@charset "utf-8";

/* ------------------------------------------------------------ common  */
:root{
	--main-color: #004698;
	--second-color: #F1F7FB;
}


img{ max-width: 100%; height: auto;}
figure{ margin: 0; }
.no_scroll{ overflow: hidden; }
.inner{ width: 1100px; margin: 0 auto; padding: 0 50px; box-sizing: content-box; }
.sp{ display: none; }

.main-ttl{ font-size: 43px; background: #004699; color: #fff; padding: 45px 0; text-align: center; font-weight: bold; }

.second-ttl{ position: relative; margin-bottom: 65px; font-size: 41px; text-align: center; color: var(--main-color); font-weight: 800; }
.second-ttl:before,
.second-ttl:after{ position: absolute; content: ""; top: 50%; translate: 0 -50%; width: 30%; height: 2px; background: var(--main-color); }
.second-ttl:before{ left: 0; }
.second-ttl:after{ right: 0; }

.third-ttl{ position: relative; text-align: center; font-size: 43px; font-weight: 800; color: #004699; }
.third-ttl:before,
.third-ttl:after{ position: absolute; content: ""; top: 50%; translate: 0 -50%; width: 33%; height: 2px; background: var(--main-color); }
.third-ttl:before{ left: 0; }
.third-ttl:after{ right: 0; }
/* .third-ttl span{ position: relative; padding: 0 25%; font-size: 31px; font-weight: 800; } */

.flex{ display: flex; align-items: flex-start; justify-content: space-between; }
.flex-re{ flex-direction: row-reverse; }

.btn{ width: 500px; margin: 70px auto 50px; text-align: center; background: #FB283F; filter: drop-shadow(0px 10px 0px #C11C2E); }
.btn a{ display: block; width: 100%; height: initial; padding: 29px 10px; color: #fff; font-size: 35px; font-weight: 800; line-height: 1; }

.top_btn{ padding: 0; }



/* ------------------------------------------------------------ information  */
.contents{ padding: 70px 0; }

.tabs{ box-sizing: border-box; opacity: 0.8; padding: 34px 10px 35px; background: var(--main-color); text-align: center; font-size: 32px; font-weight: 800; color: #fff; }
.tabs.is-active{ opacity: 1; }

.panel{ display: none; }
.panel.is-show{ display: block; }
.panel .third-ttl{ margin: 0 0 30px; }
.panel figure{ position: relative; margin: 0 0 30px; }
.panel figure img{ width: max(980px, 90%); }
.panel figcaption{ display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: max(15%,150px); padding: 15px 5px; background: #fff; border-bottom: 9px solid #84A3CE; font-size: 20px; line-height: 180%; font-weight: 800; filter: drop-shadow(9px 0px 0px #84A3CE); }

.article{ padding: 0 0 40px; }
.article .text .article-ttl{ padding: 0 0 15px; font-size: 28px; font-weight: 800; line-height: 150%; }
.article .text p{ font-size: 16px; line-height: 180%; }

.article.flex figure{ width: 46%; }
.article.flex .text{ width: 50%; }

.schedule figure{ text-align: right; }
.schedule figure img{ width: 1050px; }
.schedule-ttl{ width: 670px; margin: 0 auto 80px; padding: 34px 10px; font-size: 32px; font-weight: 800; text-align: center; color: #fff; background: var(--main-color); }

#information .panel-group{ margin: 100px 0 0; }
#information .third-ttl{ margin: 0 0 60px; }
#information .second-ttl::before,
#information .second-ttl::after{ width: 35%; }


/* ------------------------------------------------------------ development  */
#development h4{ padding: 0 0 78px; text-align: center; font-weight: 800; line-height: 200%; font-size: 35px;}
#development .example{ padding: 0 0 60px; }
#development .example h5{ padding: 0 0 20px; font-weight: 800; font-size: 30px; text-align: center; color: var(--main-color); }
#development .box{ padding: 30px 60px; background: #F6F9FB; }
#development .box li{ width: 100%; padding: 0 0 25px; font-size: 25px; }
#development .box li:last-of-type{ padding-bottom: 0; }

#development table,
#development thead,
#development tr{ width: 100%; }
#development table{ margin: 0 0 50px; }
#development tr{ width: 100%; }
#development th{ width: 225px; padding: 30px 5px; background: var(--main-color); color: #fff; border: 1px solid var(--main-color); border-bottom: 1px solid #fff; font-size: 25px; font-weight: 800; }
#development td{ width: calc(100% - 225px); padding: 30px 40px; background: #F6F9FB; border: 1px solid #92B0D3; }
#development td p{ font-size: 25px; line-height: 180%; }
#development td dl{ padding: 35px 0 0; text-align: center; }
#development td dt{ padding: 0 0 20px; border-bottom: 1px solid #707070; font-size: 24px; }
#development td dd{ padding: 40px 0 0; font-size: 18px; line-height: 150%; }

#development h6{ font-size: 30px; text-align: center; }


/* ------------------------------------------------------------ message  */
#message figure{ width: 35%; }
#message .article.flex .text{ width: 60%; }
#message .article .text p:first-of-type{ padding: 0 0 30px; }
#message .article .text ul{ padding: 0 0 15px; }
#message .article .text li{ padding: 0 0 15px; font-weight: 600; }


/* ------------------------------------------------------------ voice  */
#voice .voice{ padding: 0 0 50px; font-weight: 800; font-size: 18px; text-align: center; }
#voice .tab-group .tabs{ width: calc(100% / 5); font-size: 23px; }

#voice .panel-group{ margin: 140px 0 0; }
#voice .article:nth-of-type(2) .text{ width: 64%; }
#voice .article:nth-of-type(2) figure{ width: 33%; }
#voice .article .text p{ font-weight: 800; }

#schedule .tab{ width: calc(100% / 2 - 3%); }
#schedule .tabs{ opacity: 1; }
#schedule span{ display: block; padding: 10px 0 0; font-weight: 800; font-size: 18px; text-align: center; }
#schedule span img{ width: 15px; height: auto; margin-right: 5px; }
#schedule .third-ttl:before,
#schedule .third-ttl:after{ width: 24%; }

#overlay{  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10; }
.modal-window { position: fixed; top: 53%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; max-width: 1400px; max-height: 900px; background-color: #fff; border-radius: 5px; z-index: 11; overflow-y: scroll; padding: 50px; box-sizing: border-box; border: 8px solid var(--second-color); }
.button-close{ display: block; width: 35%; padding: 30px; margin: 0 auto; background: var(--second-color); font-size: 20px; letter-spacing: 0.1em; }


/* ------------------------------------------------------------ process  */
#process .ast{ padding: 50px 0 0; font-size: 25px; text-align: center; font-weight: 800; color: var(--main-color); }

.faq{ margin: 160px 0 0; padding: 120px 0 100px; position: relative; background: var(--second-color); }
.faq .second-ttl{ width: 1100px; position: absolute; top: -20px; left: 50%; translate: -50% 0; }
.faq .second-ttl span{ padding: 10px 52px; font-weight: 800; background: #fff; }

.faq-list{ width: 1230px; margin: 0 auto; padding: 0 5%; box-sizing: border-box; }
.faq-list dl{ margin: 0 0 95px; padding: 60px 65px; background: #fff; }
.faq-list dt{ padding: 0 0 40px; font-size: 37px; font-weight: 800; border-bottom: 1px solid #004698; }
.faq-list dt span{ padding-right: 42px; font-size: 54px; font-weight: 800; color: var(--main-color); }
.faq-list dd{ position: relative; padding: 35px 0 0 80px; font-size: 26px; line-height: 180%; }
.faq-list dd:before{ position: absolute; content: "A"; left: 0; top: 35px; width: 37px; height: 54px; color: #F85E5E; font-size: 54px; font-weight: 800; }




/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
/* ------------------------------------------------------------ common  */
	body{ min-width: 100%; }
	
	.inner{ width: 90%; padding: 0; }
	.sp{ display: block; }
	.pc{ display: none; }
	.flex{ flex-wrap: wrap; }
	
	.main-ttl{ font-size: 24px; padding: 25px 0; }
	
	.second-ttl{ margin-bottom: 25px; font-size: 18px; }
	.second-ttl::before,
	.second-ttl::after{ width: 18%; height: 1px; }
	
	.third-ttl{ /* padding: 0 30%; */ font-size: 16px; }
	.third-ttl::before,
	.third-ttl::after{ width: 30%; height: 1px; }
	
	.btn{ width: 55%; margin: 26px auto; filter: drop-shadow(0px 6px 0px #C11C2E); }
	.btn a{ box-sizing: border-box; padding: 15px 10px; font-size: 20px; }
	


/* ------------------------------------------------------------ information  */
	.contents{ padding: 50px 0 32px; }
	
	.tabs{ padding: 10px 10px 11px; font-size: 17px; }
	
	/*
	#information .tabs{ width: 100%; margin: 0 0 10px; }
	#information .tab-group.flex{ display: block; }
	*/
	
	
	.panel figure{ margin: 0 0 28px; }
	.panel figure img{ width: 90%; }
	.panel figcaption{ top: 50%; right: 0; width: 21%; padding: 10px; font-size: 0.5rem; filter: drop-shadow(4px 0px 0px #84A3CE); border-width: 4px; }
	
	.article{ padding: 0 0 20px; }
	.article .text .article-ttl{ padding: 0 0 21px; font-size: 16px; }
	.article .text p{ font-size: 14px; }
	
	.article.flex{ flex-direction: column; }
	.article.flex figure{ width: 100%; margin: 0 0 20px; }
	.article.flex figure img{ width: 100%; height: auto; }
	.article.flex .text{ width: 100%; }
	#voice .article .text p{ font-weight: 400; }
	
	.schedule-ttl{ width: 75%; margin: 0 auto 30px; padding: 8px 10px; font-size: 15px; }
	.schedule figure{ text-align: center; }
	.schedule figure img{ width: 100%; height: auto; }
	
	
	#information .panel-group{ margin: 35px 0 0; }
	#information .third-ttl{ margin: 0 0 20px; }
	#information .second-ttl::before,
	#information .second-ttl::after{ width: 28%; }
	

/* ------------------------------------------------------------ development  */
	#development h4{ padding: 0 0 33px; font-size: 15px; }
	
	#development .example{ padding: 0 0 30px; }
	#development .example:last-of-type{ padding: 0; }
	
	#development .example h5{ padding: 0 0 10px; font-size: 15px; }
	#development .box{ padding: 20px 5%; }
	#development .box li{ padding: 0 0 15px; font-size: 14px; line-height: 150%; padding-left: 1rem; text-indent: -1rem; }
	
	#development table{ margin: 0 0 25px; }
	#development tr{ padding: 0 0 20px; }
	#development th{ width: 25%; padding: 13px 5px; font-size: 14px; line-height: 150%; }
	#development td{ width: 75%; padding: 13px 10px; }
	#development td p{ font-size: 14px; }
	#development td dl{ padding: 14px 0 0; }
	#development td dt{ padding: 0 0 10px; font-size: 11px; }
	#development td dd{ padding: 10px 0 0; font-size: 0.6rem; }
	
	#development h6{ font-size: 14px; line-height: 150%; }


/* ------------------------------------------------------------ message  */
	#message figure{ width: 100%; }
	#message .article.flex .text{ width: 100%; }
	#message .article .text p:first-of-type{ padding: 0 0 15px; }
	#message .article .text ul{ padding: 0 0 10px; }
	#message .article .text li{ padding: 0 0 10px; font-size: 14px; }


/* ------------------------------------------------------------ voice  */
	#voice .tab-group .tabs{ width: calc(100% / 2 - 2%); font-size: 17px; margin: 0 0 10px; padding: 10px 10px 11px; }
	#voice .panel-group{ margin: 40px 0 0; }
	
	#voice .voice{ padding: 0 0 25px; font-size: 16px; }
	#voice .article:nth-of-type(2) figure{ width: 100%; }
	#voice .article:nth-of-type(2) .text{ width: 100%; }
	
	#schedule .contents{ padding-top: 0; }
	#schedule span{ padding: 5px 0 0; font-size: 13px; }
	#schedule span img{ width: 10px; }
	
	.modal-window{ width: 90%; height: 90%; padding: 30px 10px; }
	.button-close{ width: 100%; padding: 20px; font-size: 15px; }
	

/* ------------------------------------------------------------ process  */

	#process .ast{ padding: 25px 0 0; font-size: 13px; line-height: 150%; }
	
	.faq{ margin: 60px 0 0; padding: 60px 0; }
	.faq .second-ttl{ width: 90%; top: -14px; }
	.faq .second-ttl span{ padding: 10px 5px; }
	
	.faq-list{ width: 90%; padding: 0; }
	.faq-list dl{ margin: 0 0 25px; padding: 20px 5%; }
	.faq-list dt{ padding: 0 0 12px; font-size: 14px; line-height: 150%; }
	.faq-list dt span{ padding-right: 15px; font-size: 20px; }
	.faq-list dd{ padding: 10px 0 0 32px; font-size: 14px; }
	.faq-list dd::before{ top: 20px; width: 27px; height: 41px; font-size: 22px; }



}