@charset "utf-8";

/*
  font-family: "Noto Sans JP", sans-serif; from 100 to 900
  font-family: "Figtree", sans-serif;  font-weight: 800;
*/

/* ----------------------------------------------------
element base setting (common)
---------------------------------------------------- */
body {color: #000; line-height: 1.8; background: #D1DDF3; font-family: "Noto Sans JP", sans-serif;}
a{text-decoration: none; color: inherit;}
.flex {display: flex; display: -webkit-flex; justify-content: space-between; flex-wrap: wrap;}
img {width: 100%; height: auto;}
.br_spOnly{display:none;}
.br_pcOnly{display:block;}
#wrapper{display:block; position: relative;}
.innerContents{width:66%; max-width: 1000px; margin: 0 auto;}


/* ----------------------------------------------------
header
---------------------------------------------------- */
#header {position: fixed; left: 0; top: 0; z-index: 99; width: 100%; background: rgba(209, 221, 243, 0); align-items: center; justify-content: flex-end;}
#header.fixed {position: fixed; /*background: rgba(209, 221, 243, 0.7);*/}
.hd-logo{width:min( 15vw , 225px ); margin: 0 0 0 min( 3.33vw , 50px );}

/* ----------------------------------------------------
エントリー
---------------------------------------------------- */
.entryBt{background-color: #F57038;}
.entryBt span{color: white; position: relative; letter-spacing: 0.05em; font-family: "Figtree", sans-serif; font-weight: 800; display: block; margin: 0.3em 0.8em; font-size: min(2vw , 2.4rem); padding-top: min( 3.667vw , 55px );}
.entryBt span::before{position: absolute; top: 0; left: 50%; transform: translateX(-50%); content: ""; background: url("../img/icon_entry.svg") no-repeat 0 0; width: min( 3.667vw , 55px ); height: min( 3.667vw , 55px );}

/* ----------------------------------------------------
フッターエントリー
---------------------------------------------------- */
.footEntryWrap{background-color:white; border-top: 10px solid #F57038; padding: 1.5em 0; margin: min( -5.333vw , -80px ) 0 min( 3.33vw , 50px ) 0;}
.footEntryWrap .ftbp{font-size: min(2vw , 2.4rem); font-weight:800; color: #092079;}
.footEntryWrap .entryBt{width: 80%; margin: 1em auto 0 auto; border-radius: 999999px; display: block; padding: min( 1vw , 15px )}
.footEntryWrap .entryBt span{display: block; text-align: center; margin: 0; font-size: min(2vw , 2.4rem); font-weight: 800; padding-top: 0;}
.footEntryWrap .entryBt span::before{position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.footEntryWrap .entryBt span::after{position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ""; background: url("../img/icon_arrow.svg") no-repeat 0 0; width: min( 2.667vw , 40px ); height: min( 1.667vw , 25px );}


/* ----------------------------------------------------
mainVis
---------------------------------------------------- */
.mainVis{padding-top: min( 12.867vw , 193px );}
.mainVis h2{text-align: center; width: min( 61.533vw , 923px ); margin: 0 auto;}
.mainVis h3{text-align: center; font-size: min( 2.867vw , 4.3rem ); font-weight: 900; margin: 2em 0 1em 0; color: #092079;}
.mainVis p{text-align: center; font-size: min( 1.33vw , 2.0rem ); line-height: 2; color: #092079;}

/* ----------------------------------------------------
イラストエリア
---------------------------------------------------- */
.illust{margin:3.5em 0 2.5em 0;}
.illust p{margin-top:0.8em; background-color: #092079; color: white; font-size: min( 2.133vw , 3.2rem ); text-align: center; font-weight: 600;}

/* ----------------------------------------------------
概要
---------------------------------------------------- */
.infoBox{background-color:white; padding: min( 3.667vw , 55px ); margin-bottom: min( 10vw , 150px );}
.infoBox h4{color: #092079; font-size: min( 1.467vw , 2.2rem ); font-weight: 500; position: relative; padding-left: 1.15em; margin-top: 1.7em;}
.infoBox h4::before{position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: "●"; color: #D1DDF3; /*font-size: min( 1vw , 1.5rem );*/}
.infoBox h4:first-child{margin-top: 0;}

.lineblock{border: 1px solid #D5D5D5; padding: 1em; margin: 1em 0;}
.lineblock dl{justify-content: flex-start;}

.flowBox{width:100%; margin: 2em 0;}
.flowBox th{width:12%; padding: 0.3em;}
.flowBox th.th01{background-color: #D5D5D5; color: black;}
.flowBox th.th02{background-color: black; color: white;}
.flowBox th.th03{background-color: #F57038; color: white; vertical-align: top; padding: 0.3em 0.3em 5em 0.3em;}
.flowBox td{width:40%; text-align: center; color: black; font-weight: 600;}
.flowBox td.sideLine{border-left: min( 2.22vw , 33px ) solid white; border-right: min( 2.22vw , 33px ) solid white;}
.flowBox td.tdCont{background-color: #F3F5F7;}
.flowBox td.yeLine{background: url("../img/tdBack.png") repeat-y center top;}
.flowBox td.Brank{}
.yelWhite{background-color:white; padding: 0.5em; display: inline;}
.yelWhiteWrap{padding: 2em 0;}
.humIllust{width:30%; margin: 0 auto;}

.speechBubble {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  padding: 0.3em 1.5em;
  border: 1px solid #d5d5d5;
  border-radius: 9999px;
  background-color: #ffffff;
  text-align: left;
  font-weight: 600;
  line-height: 1.5;
  color: #000000;
}

.speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 15px 7.5px 0 7.5px;
  border-color: #d5d5d5 transparent transparent;
  translate: -50% 100%;
}

.speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 12.8px 6.4px 0 6.4px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}



/* ----------------------------------------------------
entryBody
---------------------------------------------------- */
.entryBody{background-color: #5C6BA6; padding: 2.5em 0 1.5em 0; text-align: center;}




/* ----------------------------------------------------
footer (common)
---------------------------------------------------- */
#footer {padding:min( 3.333vw , 50px ) 0 0 0; background-color: #e6e6e6; text-align: center; position: relative; z-index: 2;}
.pagetop{width:min( 3.333vw , 50px ); position: absolute; bottom: 1%; right: 2%; transition: 0.2s;
  opacity: 0;
  z-index:-1;}
.contactTitle{font-size: min( 1.6vw , 2.4rem ); letter-spacing: 0.05em; font-weight: 600;}
.contactTitle span{font-size: min( 0.8vw , 1.2rem ); color: #245396; display: block; font-weight: 400;}
.contactName{font-weight: 800; margin: 1.5em 0 1em 0;}
.contactWhite{background-color:white; border-radius: min( 0.733vw , 11px); display: inline-block; margin: 0 auto min( 3.333vw , 50px ) auto; padding: 1.2em;}
.contactTel{color: #245396; font-size: min( 2vw , 3.0rem); font-weight: 800; position: relative; display: inline-block; padding-left: 1em;}
.contactTel::before{content: ""; margin: auto; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: min( 1.333vw , 20px); height: min( 1.6vw , 24px ); background: url("../img/icon_tel.svg") no-repeat right center;}
.contactWhite p{}
.footLogo{background-color:white; padding: min( 2vw , 30px) 0;}
.footLogo img{width: min( 10vw , 150px);}
.footLogo span{display: block; font-size: min( 0.933vw , 1.4rem );}
.ftCopy {color: #767676; font-size: min( 0.933vw , 1.4rem );}

.btRecPriv{padding-bottom: 2em;}
.btRecPriv a{color: #092079;}
.btRecPriv a:hover{opacity: 0.6;}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
pcSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width:768px) {
/* ----------------------------------------------------
common(pc)
---------------------------------------------------- */
/* hover */

a img:hover {
  opacity: .8 !important; filter: alpha(opacity=80);
  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.clickable:hover {
  filter: alpha(opacity=70) !important;	opacity: .7 !important;
  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
}


	
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
tabletSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1330px) and (min-width: 1200px) {
.flowBox th{font-size: 90%;}
	
}


@media (max-width: 1200px) and (min-width: 768px) {

	
}
@media (max-width: 1024px) and (min-width: 768px) {

	
@media (orientation: landscape) {

}
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
spSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 767px) {
.innerContents {width: 85%;}
.br_spOnly{display:block;}
.br_pcOnly{display:none;}
.order1{order:1;}
.order2{order:2}

/*
1.6rem 	3.077vw
2.0rem 	3.846vw
2.4rem 	4.6vw
2.5rem 	4.8vw
2.6rem 	5vw
2.8rem 	5.385vw
*/
	

/* ----------------------------------------------------
header
---------------------------------------------------- */
.hd-logo{width:45%; margin: 5% 0 0 2%;}

/* ----------------------------------------------------
エントリー
---------------------------------------------------- */
.entryBt span{margin: 0.3em 0.8em; font-size: 4.6vw; padding-top: 9vw;}
.entryBt span::before{width: 7.161vw; height: 7.161vw; top: 2vw;}

/* ----------------------------------------------------
フッターエントリー
---------------------------------------------------- */
.footEntryWrap{margin: -15.417vw 0 6.51vw 0;}
.footEntryWrap .entryBt{padding: 1.953vw; width: 90%;}
.footEntryWrap .entryBt span{font-size: 4.2vw;}
.footEntryWrap .ftbp{font-size: 4.2vw;}
.footEntryWrap .entryBt span::after{width: 5.208vw; height: 3.255vw;}

/* ----------------------------------------------------
mainVis
---------------------------------------------------- */
.mainVis{padding-top: 30vw;}
.mainVis h2{width: 90%; margin: 0 auto;}
.mainVis h3{font-size: 5.2vw;}
.mainVis p{font-size: 3.6vw;}

/* ----------------------------------------------------
イラストエリア
---------------------------------------------------- */
.illust{margin:2.5em 0 2.5em 0;}
.illust p{font-size: 4vw;}

/* ----------------------------------------------------
概要
---------------------------------------------------- */
.infoBox{padding: 5vw; margin-bottom: 19.531vw;}
.infoBox h4{font-size: 4.2vw;}
/*.infoBox h4::before{font-size: 3.2vw;}*/
.flowBox th{width:22%; padding: 0.2em;}
.flowBox td{width:34%; line-height: 1.2;}
.flowBox td.sideLine{border-left: 2vw solid white; border-right: 2vw solid white;}
.humIllust{width:60%; margin: 1em auto 0 auto;}

.speechBubble {padding: 0.3em 0.5em; font-size: 3.0vw;}

/* ----------------------------------------------------
.entryBody
---------------------------------------------------- */
.entryBody{background-color: #5C6BA6; padding: 2.5em 0 1.5em 0; text-align: center;}

	
	

/* ----------------------------------------------------
footer (common)
---------------------------------------------------- */
#footer {padding:5vw 0 0 0;}
.contactTitle{font-size: 3.8vw;}
.contactTitle span{font-size: 2.8vw;}
.contactWhite{border-radius: 2vw; width: 70%; margin: 0 auto 5vw auto;}
.contactTel{font-size: 4.6vw;}
.contactTel::before{width: 2.804vw; height: 3.325vw;}
.footLogo{padding: 3vw 0;}
.footLogo img{width: 25%;}
.footLogo span{font-size: 2.6vw;}
.ftCopy {font-size: 2.6vw;}
	
	
	
	
@media (orientation: landscape) {/* スマホ横 */
	.infoBox p,.lineblock,.flowBox,.contactName{font-size:2.8vw;}
	.contactWhite p,.btRecPriv{font-size:2.4vw;}
}	
	
	



}