/* ****************************************************

	追従

***************************************************** */

#page-top {
    position: fixed;
    top: 0;
    right: 0;
    font-size: 90%;
	z-index: 9999;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	padding: 0 5px;
	 width: 500px;
}
#page-top .blue { background-color: #0061A3; color: #fff; padding: 5px; border-radius: 5px; margin-left: 4px; width: 50%;}
#page-top .blue a { color: #fff;}
#page-top .yellow { background-color: #FFDB29; color: #033F70; padding: 5px; border-radius: 5px; width: 50%; margin-left: 4px;}
#page-top a {
    text-decoration: none;
    padding: 10px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;	
}

@media screen and (max-width:768px), print {
#page-top {
	 width: 100%; margin: 0; padding: 0; border-radius: 0; font-size: 0.8rem;
}
#page-top a {
    text-decoration: none;
    padding: 10px 0;
    text-align: center;
    display: block;
    border-radius: 0;
	font-size: 0.8rem;
}
#page-top .blue { margin: 0; border-radius: 0;}
#page-top .yellow { margin: 0; border-radius: 0;}
	
	
}

/* ****************************************************

	layout

***************************************************** */

body { background-color:#FFF; color:#033F70; font-family: "Noto Sans JP", "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; letter-spacing: 0.05em; line-height: 160%; padding: 0 auto; margin:0 auto; width: 100%; overvoice1:hidden; overvoice1-y:scroll; box-sizing: border-box; font-weight: 600; }

a{ color: #033F70; }
section { width: 100%; z-index: 2!important;}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

hr { height: 1px;
 background-color: #45CEB3;
 width: 100%;
 max-width: 950px;
 border: none;
 margin: 4% auto; }

.marker-yellow {
	background:linear-gradient(transparent 60%, #FFE239 60%);
	z-index: -1!important;
}
.blue { color: #23AEE5;}
.small { font-size: 2vw; line-height: 120%; }
.big { font-size: 1.2rem; font-weight: 600; margin: 3px 0; }
.bold { font-weight: 600; }
.pc { display: block !important; margin: 0; padding: 0; }
.sp { display: none !important; margin: 0; padding: 0; }

/* フェードイン関係　画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }
.fadeinleft {
    opacity : 0.1;
    transform : translate(-50px, 0);
    transition : all 500ms;
    }
.fadeinright {
    opacity : 0.1;
    transform : translate(50px, 0);
    transition : all 500ms;
    }
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
.fadeinleft.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }
.fadeinright.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* コンテンツ下のマージン */
.flex-child { margin-bottom: 30px; font-size: 1.0em;}

/* 各カラム毎のコンテンツと疑似要素の横幅 */
.flex-col2 .flex-child { width: calc( (100% - 10px) / 2 ); }

.flex-col3::after,
.flex-col3 .flex-child { width: calc( (100% - 20px) / 3 ); }

.flex-col4::before,
.flex-col4::after,
.flex-col4 .flex-child { width: calc( (100% - 30px) / 4 ); }
	
/* 最終行は両端揃えにしない */
.flex-col3::after,
.flex-col4::before,
.flex-col4::after { content: ""; }

.flex-col4::before { order: 1; }

/* レスポンシブ対応 */

/* 991px以下で4列 → 3列 
@media screen and (max-width: 991px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 3 ); }
}*/

/* 767px以下で4列・3列 → 2列 */
@media screen and (max-width: 800px) {
	.flex-col3 .flex-child,	
	.flex-col4 .flex-child { width: calc( (100% - 10px) / 2 ); }
}

/* 575px以下で全て1列 */
@media screen and (max-width: 767px) {
	.flex-col2 .flex-child,
	.flex-col3 .flex-child,
	.flex-col4 .flex-child { width: 100%; }
}


@media screen and (max-width:768px), print {
body, div, h1, h2, h3, h4, h5, h6, p, ul, li, img, form, dl, dd, dt, section {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
.small { font-size: 6vw; line-height: 120%; }
.pc { display: none !important; margin: 0; padding: 0; }
.sp { display: block !important; margin: 0; padding: 0; }
}

/* ****************************************************

	section:title

***************************************************** */

#title { background-image: url( "../images/top_bg.png" ) ; margin: 0 auto; box-sizing: border-box; width: 100%; line-height:0; background-color:#fff; background-size: 100%; background-repeat: no-repeat; background-position: top 0 left 0; position: relative; z-index: 1!important; }

#title .inner {
  width: 96%;
  padding: 0 auto; 
  margin: 0 auto;
  line-height:0;
}
#title .name { width: 80%; padding: 1% auto; margin: 0 auto;  position: absolute; z-index: 1!important; top:10px; left:15%; line-height:180%; text-align: left; box-sizing: border-box; }
#title .sub { font-size: 0.8rem; font-weight: 500; }
#title .logo { font-size: 1.5rem; letter-spacing:0.05rem;  }
#title .awardbox { width: 30%; padding: 2% auto; margin: 0 auto; }
#title .awardbox img { width: 100%;}
#title .ttlbox { width: 35%; margin: 2% auto 0; padding: 2% auto 0;}

#title .animation { 	
	opacity: 0;
    animation: fadein 1.5s ease forwards;}

@keyframes fadein { 100% {  opacity: 1;}
}
 
/*以下遅延の指定*/
#title .delay05 { animation-delay: 0.3s;}
#title .delay1 { animation-delay: 1s;}


#title .ttlbox img { width: 100%;}
#title .btn { 
  width: 40%;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box; 
  -ms-align-items: center;
  align-items: center;
  margin: 0 auto;
 }
#title .btn img { width: 100%; padding: 8px;}
#title .left { width: 50%; line-height:0; }
#title .right { width: 50%; }
#title .midasi { width: 100%; font-size: 1.3vw; font-weight: 600; letter-spacing: 0.01em; line-height:160%; margin: 4% auto 1%; text-align: center;}

@media screen and (max-width:768px), print {
#title { background-image: url( "../images/top_bg_sp.png" ) ; }
	
#title .name { left:10px;}
	
#title .midasi { font-size: 1.3rem; padding-top: 85%; width: 96%; box-sizing: border-box; margin: 0 auto ;  }
#title .btn { width: 98%; box-sizing: border-box; margin: 0 auto ; padding: 0 auto ; }
#title .awardbox { width: 90%; padding-top: 90px; box-sizing: border-box; margin: 0 auto ;}
#title .ttlbox { width: 98%; margin: 3% auto 0; padding: 1% auto 0;}
}



/* ****************************************************

	section:Problem

***************************************************** */

#Problem { background-color:#FFDB29; box-sizing: border-box; text-align: center; margin: 0 auto;}


#Problem .inner {
  width: 90%;
  max-width: 650px;
  margin: 0 auto;
  padding: 50px auto;
  text-align: center;
  z-index:2;
}

#Problem .box { width: 100%; padding-top: 50px; margin: 0 auto; }

#Problem p{
   width: 100%; font-size:0.9rem; line-height: 180%; font-weight: 500; padding-bottom: 50px; margin: 8px auto; }

#Problem img {  width: 100%; padding: 50px auto; margin: 0 auto; }

@media screen and (max-width:768px), print {


}

/* ****************************************************

	section:worry

***************************************************** */
#worry { 
	padding: 0 ;
	margin: 0 auto 0;
	box-sizing: border-box;
	text-align: center; }

#worry .inner {
  width: 96%;
  max-width: 1100px;
  margin: 50px auto ;
  padding: 50px auto;
  text-align: center;
  box-sizing: border-box;
}

#worry .ttl { font-size: 1.8rem; font-weight: 600; line-height: 180%; margin-top:80px; color: #0076B7; margin: 0 auto;}

#worry .box {
  margin: 0 auto 4% ;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  -ms-align-items: left;
  align-items: left;
  width: 100%; background-color: #fff;
  text-align: left;
	
  }

#worry .boxin {
  margin: 4% auto 7% auto;
  width: 30%;
  text-align: center;  }
#worry .boxin img{ width: 100%;}

@media screen and (max-width:768px), print {

#worry .inner {
  width: 96%;
  max-width: 1100px;
  margin: 20px auto ;
  padding: 20px auto;
  text-align: center;
  box-sizing: border-box;
}
#worry .box { width: 100%; margin-bottom: 20px; display: block; }
#worry .boxin {
  margin: 5% auto 5% auto;
  width: 90%;
  text-align: center;  }
#worry .ttl { font-size: 1.2rem; font-weight: 600; line-height: 180%; margin-top:20px;}

}



/* ****************************************************

	section:research

***************************************************** */

#research { background-color: #0076B7; position: relative; z-index: 1!important; }

#research .inner {
  width: 100%;
  max-width: 1000px;
  text-align: center;
  z-index: 2;
	 margin: 0 auto;
}

#research .inner :after {
  content: "";
  position: absolute;
	z-index: 1!important;
  right: 0;
  bottom: -50px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #0076B7 transparent transparent transparent;
  border-width: 50px 130px 0 130px;
}
#research .txt{
  color:#fff;
  font-size:1.8rem;
  line-height: 170%;
  box-sizing: border-box;
  padding-top: 50px; 
  margin-top: 50px;
  font-weight: 600;
}

#research .img img{
  width: 100%;
  margin-top: 50px;
}

@media screen and (max-width:768px), print {
#research .txt{
  color:#fff;
  font-size:1.4rem;
  line-height: 170%;
  box-sizing: border-box;
  padding-top: 50px; 
  margin-top: 50px;
  font-weight: 600;
}
}


/* ****************************************************

	section:about

***************************************************** */

#about { margin: 0 auto; box-sizing: border-box; width: 100%;  }

#about .inner {
  width: 96%;
  max-width: 1100px;
  padding: 8% 0 0 0; 
  margin: 0 auto;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box; 
  -ms-align-items: center;
  align-items: center;
  position: relative;
	z-index: 1!important;
}
#about .dotbox {
	border: dotted 3px #23AEE5;
	margin: 4% auto;
	font-size: 1.0rem;
	width: 92%;
	box-sizing: border-box;
	text-align: center;
	line-height: 180%;
    padding: 4%;
    position: relative;
z-index: 1!important;}

#about .img { position: absolute; right: -30px; bottom: -20px; z-index: 1!important;  }
#about .ttl { text-align:left; font-size: 2rem; line-height: 180%; font-weight: 600; margin-bottom: 10px; color: #008EDD;}
#about .txt { text-align:left; font-size: 1.0rem; line-height: 200%; font-weight: 600; }

#about .txtpoint {
	font-size: 1.5rem; margin: 2% auto; line-height: 200%; text-align: center; }


@media screen and (max-width:768px), print {
#about .inner { display: block; }
#about .img { position: static; z-index: 1!important; margin: 0 auto 0; text-align:center; }
#about .img img { width: 30%; }
#about .ttl { text-align:center; font-size: 1.3rem; line-height: 170%; font-weight: 600; margin: 50px auto 20px;}
#about .txt { text-align:center; font-size: 0.9rem; line-height: 170%; font-weight: 600; }
#about .dotbox {
	text-align: left;
}

	
	
}


/* ****************************************************

	section:merit

***************************************************** */
#merit {
	background-color: #FFF0B0;
	padding: 3% auto;
	margin: 0 auto 0;
	box-sizing: border-box; }

#merit .inner {
  width: 96%;
  max-width: 900px;
  margin: 3% auto ;
  padding-bottom: 50px;
  padding-top: 20px;
  text-align: center;
}

#merit .ttl img{ width: 85%; max-width: 550px; margin: 100px auto 0; } 
#merit .boxpoint { padding: 0 auto; margin: 0 auto; text-align: center;}
#merit .boxtitle { padding: 0 auto; margin: 3% auto; font-size: 1.8rem; line-height: 200%; margin: 0 auto;}
#merit .boximg { width: 100%; max-width: 500px; margin: 0 auto; }
#merit .boximg img{ width: 100%; }
#merit .boxtext {
	margin: 4% auto;
	font-size: 1.0rem;
	width: 90%;
	box-sizing: border-box;
	text-align: left;
	line-height: 200%; }


#merit .box {
  background-color: #FFF;
  margin: 8% auto ;
  padding-bottom: 30px;
  }

#merit .box-left { width: 55%; padding: 6% 4% 4%;}
#merit .boxkomidasi { font-size: 1.7em; line-height: 150%; padding: 5% auto; margin: 5% auto; font-weight: 600;}
#merit .boxtext { font-size: 1.0em; font-weight: 600; padding: 5px;}

#merit .box-right { width: 45%; position: relative; z-index: 1!important;}
#merit .box-right img { width: 100%; }

@media screen and (max-width:768px), print {
#merit .ttl img{ margin-top: 30px; } 
#merit .boxtext {
	font-size: 0.8rem;
	line-height: 160%;
	text-align: left;}
#merit .box { width: 90%; display: block; }
#merit .box-left { width: 100%;}
#merit .box-right { width: 100%; }
#merit .boxtitle { font-size: 1.2rem; }
}



/* ****************************************************

	section:price

***************************************************** */
#price {
	padding: 0 ;
	margin: 0 auto 0;
	box-sizing: border-box;
	text-align: center; }
#price .inner {
  width: 96%;
  max-width: 1000px;
  margin: 0 auto ;
  padding: 0 auto;
  text-align: center;
}
#price .ttl { font-size: 1.8rem; font-weight: 600; line-height: 200%; margin-bottom: 8%; margin-top: 40px; }

#price .box {
  margin: 0 auto 7% auto;
  width: 95%; max-width: 850px; height: auto;
  text-align: center;  z-index: 1!important; position: relative; z-index: 1!important;
  }
#price .btn { 
  width: 100%;
  max-width: 700px;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box; 
  -ms-align-items: center;
  align-items: center;
  padding: 2% auto;
  margin: 2% auto;
 }
#price img { width: 100%; padding: 8px;}
#price .left { width: 50%; line-height:0; }
#price .right { width: 50%; }

@media screen and (max-width:768px), print {

}




/* ****************************************************

	section:voice1

***************************************************** */
#voice1 {
	background-color: #0076B7;
	padding: 0 auto;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: center; }

#voice1 .inner {
  width: 96%;
  max-width: 800px;
  margin: 0 auto ;
  padding-bottom: 50px;
  padding-top: 20px;
}

#voice1 .ttl { font-size: 1.8rem; font-weight: 600; line-height: 180%; margin-bottom: 1%; color: #fff; margin-top: 80px; }
#voice1 .eg { font-size: 1.0rem; line-height: 180%; color: #23AEE5; }

#voice1 .case { background-color: #FFDB29; margin: 0 0 -12% -20px; text-align: left; padding: 3%; font-size: 1.3rem; width: 80%; }

#voice1 .txt { font-size: 0.9rem; line-height: 160%; }

#voice1 .box {
  margin: 6% auto ;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  -ms-align-items: left;
  align-items: left;
  width: 100%;
  background-color: #fff;
  text-align: left;
	padding: 5% 2% 2%;
	z-index: -9999!important;
  }

#voice1 .left { width: 20%; padding: 0 auto;}
#voice1 .right { width: 70%; padding: 2%;}

@media screen and (max-width:768px), print {
#voice1 .case { background-color: #FFDB29; margin-bottom: -60px; text-align: left; padding: 3% 3% 3% 30px; font-size: 1.0rem; width: 100%; }

#voice1 .ttl { margin-top: 40px; }
#voice1 .box { display: block; padding: 30px 2% 2%; margin-bottom: 80px;}
#voice1 .left { width: 100%; padding: 0 auto; margin: 0 auto; text-align: center;}
#voice1 .left img{ width: 30%; padding: 0 auto; margin: 0 auto; text-align: center;}
#voice1 .right { width: 100%; padding: 2%; auto}
#voice1 .txt { font-size: 0.9rem; line-height: 140%; }

}


/* ****************************************************

	section:voice2

***************************************************** */
#voice2 { background-color: #FCDB54;
  margin: 0 auto ;
  padding: 0 auto;
  box-sizing: border-box;}

#voice2 .inner {
  width: 94%;
  max-width: 900px;
  margin: 0 auto ;
  padding: 0 auto;
  text-align: center;
  box-sizing: border-box;
}

#voice2 .ttl { font-size: 1.8rem; font-weight: 600; line-height: 180%; margin-bottom: 2%; padding-top:50px;   box-sizing: border-box;}

#voice2 .box {
  margin: 1% auto ;
  padding-top: 20px;
  width: 100%;
  box-sizing: border-box;
  }
#voice2 .box img {
  width: 100%;  margin: 0 auto ;
  padding: 0 auto; box-sizing: border-box;
  }
@media screen and (max-width:768px), print {
}



/* ****************************************************

	section:faq

***************************************************** */
#faq {
	padding: 0 ;
	margin: 0 auto 0;
	box-sizing: border-box; }

#faq .inner {
  width: 96%;
  max-width: 1000px;
  margin: 50px auto 0 ;
  padding: 5% auto;
	text-align: center;
}
#faq .ttl { font-size: 1.8rem; font-weight: 600; line-height: 180%; margin-bottom: 8%;}
#faq .box {text-align: left;}
#faq .boxq {
	font-size: 1.3em;
	font-weight: 600;
	line-height: 3;
	display: block;
	padding: 1.4em 40px 1.4em 50px ;
	margin: 8px 0 ;
	line-height: 160%;
	background-color: #FFE239; background-image: url(  "../images/faq_q.png" ) ; background-repeat: no-repeat; background-position: left 10px bottom 50%; z-index: 1!important;
	
}
#faq .boxa {
	margin: 0;
	padding: 1.4em 20px 1.4em 60px ;
	background-image: url(  "../images/faq_a.png" );
	background-repeat: no-repeat;
	background-position: left 25px top 25px ; z-index: 1!important;
}


/* ****************************************************

	section:message

***************************************************** */

#message { background-color: #2FBEEA; position: relative; z-index: 1!important; color: #fff; }

#message .inner {
  width: 96%;
  max-width: 700px;
	text-align: center;
	margin: 0 auto;
}
#message .ttl{
  color:#fff;
  font-size:1.8rem;
  line-height: 170%;
  box-sizing: border-box;
  padding-top: 50px; 
  margin-top: 50px;
  font-weight: 600;
  text-align: center;
}
#message .subttl{
  color:#fff;
  font-size:1.6rem;
  line-height: 170%;
  box-sizing: border-box;
  margin-top: 50px;
	margin-bottom: 20px;
  font-weight: 600;
  text-align: left;
}
#message .txt{
  margin: 3% auto;
  color:#fff;
  font-size:1.0rem;
  line-height: 170%;
  box-sizing: border-box;
  font-weight: 500;
  text-align: left;
}

#message .img img{
  width: 80%;
  max-width: 400px;
  margin-top: 50px;
}

@media screen and (max-width:768px), print {

}




/* ****************************************************

	footer

***************************************************** */
footer{ border-bottom: solid 8px #FFDB29; padding: 2%; text-align:left; margin-top: 0; margin: 0 auto; width:100%; box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  -ms-align-items: left;
  align-items: left;}
footer .name { width: 50%;}
footer .add{ padding: 0; font-size:0.8rem; font-weight:500; letter-spacing:0.05em; box-sizing: border-box;}
footer .copy{ width: 50%; padding-top: 20px; font-size:0.8rem; font-weight:500; letter-spacing:0.05em; box-sizing: border-box; text-align:right; }

@media screen and (max-width:768px), print {
footer{ display: block; }
footer .name { width: 100%;}
footer .add{ padding: 0; font-size:0.8rem; font-weight:500; letter-spacing:0.05em; box-sizing: border-box;}
footer .copy{ width: 100%; padding: 1% auto; font-size:0.6rem; font-weight:500; letter-spacing:0.05em; box-sizing: border-box; text-align:center;}
}