/* header*/

.line_yellow{
  background: linear-gradient(transparent 70%, #FFEE00 50%);
}


button{
   background-color: transparent;
   border: none;
   cursor: pointer;
   outline: none;
   padding: 0;
   appearance: none;
  }


h1{
  font-size: 45px;
  text-align: center;
  color: #fff;
  line-height: 150%;
  letter-spacing: 2px;
  font-feature-settings : "palt";
}

p{
  font-size: 21px;
  line-height: 180%;
  margin: 0 auto;
  letter-spacing: 1px;
  color: #172a55;
  font-feature-settings : "palt";
}

h2{
  font-size: 25px;
  text-align: center;
  line-height: 140%;
  font-feature-settings : "palt";
}

@media screen and (max-width:767px){

h1{
  font-size: 6.5vw;
  text-align: center;
  color: #fff;
  line-height: 140%;
  letter-spacing: 1px;
  font-feature-settings : "palt";
}

p{
  font-size: 4.5vw;
  line-height: 180%;
  padding: 0 2%;
  letter-spacing: 1px;
  font-weight: 500;
  color: #172a55;
  font-feature-settings : "palt";
}

h2{
  font-size: 4.5vw;
  text-align: center;
  line-height: 180%;
  padding: 0 10px;
  font-feature-settings : "palt";
}

}

.subbutton{
	width: 300px;
	max-width: 100%;
	position: fixed;
	right: 2%;
	margin: 0 auto;
	bottom: 3%;
	z-index: 100;
}


/*サブボタン*/


@media screen and (max-width:767px){

/*サブボタン*/

.subbutton{
  width: 250px;
	max-width: 100%;
	position: fixed;
	right: 2%;
	margin: 0 auto;
	bottom: 3%;
	z-index: 100;
}

}


a.hover_btn img{
   transition:all 0.5s ease;
   }
a:hover.hover_btn img{
   opacity: 0.7;
   filter: alpha(opacity=70);
   }



/* header */

.header{
  background: url("../img/header_bg_pc.png");
	background-position: top;
	background-repeat: repeat;
  background-size: contain;
  padding: 50px 0 0 0;
}

.btn_area_header{
  background: url("../img/cta_bg_pc.png");
  background-position: top;
  background-repeat: repeat;
  background-size: contain;
  padding: 50px 0;
  position: relative;
}

.header_main{
  width: 1200px;
  margin: 0 auto;
  max-width: 100%;
}


.header_btn{
max-width: 95%;
width: 700px;
display: block;
margin: 0 auto;
z-index: 100;
}

.cta_text{
  width: 600px;
  margin: 0 auto;
  max-width: 100%;
}

.headerform-control{
  width: 650px;
  padding: 5px 0;
  display: block;
  margin: 20px auto 30px;
  color: #888;
  text-align: center;
  font-size: 21px;
  max-width: 100%;
}

.header_btn_box{
width: 800px;
margin: 0 auto;
position: relative;
}

.header_finger{
  width: 80px;
  max-width: 100%;
  position: absolute;
  bottom: 0%;
  left: 89%;
  z-index: 100;
}

.puyon {
  animation: puyon 1.5s linear 0s 1 ;
  animation-iteration-count:infinite;
}

@keyframes puyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}


 @media screen and (max-width:767px){

   .header{
     background: url("../img/header_bg_sp.png");
   	background-position: center;
   	background-repeat: no-repeat;
     background-size: cover;
     padding: 5% 0 0 0;
   }

   .btn_area_header{
     background: url("../img/cta_bg_sp.png");
     background-position: center;
     background-repeat: repeat;
     background-size: cover;
     padding: 0 0 7% 0;
   }


   .header_main{
     width: 100%;
     margin: 0 auto;
   }

   .cta_text{
     width: 100%;
     margin: 0 auto 5%;
     max-width: 100%;
   }

   .header_btn{
   width: 100%;
   display: block;
   margin: 0 auto;
   z-index: 100;
   }

   .header_btn_box{
   width: 92%;
   margin: 0 auto;
   position: relative;
   }


   .header_finger{
     width: 10%;
     position: absolute;
     bottom: -10%;
     left: 92%;
     z-index: 100;
   }



   .headerform-control{
     width: 85%;
     padding: 3% 0;
     display: block;
     margin: 0 auto 3%;
     color: #888;
     text-align: center;
     font-size: 4vw;
   }


   .puyon {
     animation: puyon 1.5s linear 0s 1 ;
     animation-iteration-count:infinite;
   }


 }


/* intro */

.intro{
  background-color: #f5d84f;
  padding: 50px 0 0 0;
}

.checkbox_img{
  width: 1100px;
  margin: 0 auto;
  max-width: 100%;
}

.inner_flame{
  width: 900px;
  margin: 0 auto;
  padding: 50px 20px;
  max-width: 97%;
  box-sizing: border-box;
}

@media screen and (max-width:767px){

  .intro{
    background-color: #f5d84f;
    padding: 7% 0 0 0;
  }

  .checkbox_img{
    width: 100%;
    margin: 0 auto;
  }

  .inner_flame{
    width: 95%;
    margin: 0 auto;
    padding: 7% 4%;
    box-sizing: border-box;
  }

}

/* intro */

/* contents_01 */

.contents_01{
  background-color: #fff;
 padding: 70px 0;
}

.contents_title{
  width: 1000px;
  margin: 0 auto;
  max-width: 100%;
}

.interview{
  width: 1200px;
  margin: 30px auto 0;
  max-width: 100%;
}


@media screen and (max-width:767px){


  .contents_01{
    background-color: #fff;
   padding: 10% 0;
  }

  .contents_title{
    width: 100%;
    margin: 0 auto;
  }

  .interview{
    width: 100%;
    margin: 3% auto 0;
  }

}


/* contents_01 */


/* contents_02 */

.contents_02{
  background-color: #f9f0e4;
  padding: 70px 0;
}

.graph_area{
 background-color: #f9f9f2;
 padding: 50px 0 200px 0;
 width: 1000px;
 margin: 50px auto 0;
 max-width: 100%;
}

.graph01{
  width: 850px;
  margin: 0 auto;
  max-width: 100%;
}

.graph02{
  width: 900px;
  margin: -180px auto 50px;
  max-width: 100%;
}

.btn_area{
  width: 700px;
  margin: 0 auto;
  max-width: 100%;
  position: relative;
}

.finger_02{
  width: 80px;
  max-width: 100%;
  position: absolute;
  bottom: -5%;
  left: 93%;
  z-index: 100;
}


@media screen and (max-width:767px){


  .contents_02{
    background-color: #f9f0e4;
   padding: 10% 0;
  }

  .graph_area{
   background-color: #f9f9f2;
   padding: 7% 0 40% 0;
   width: 95%;
   margin: 5% auto 0;
  }

  .graph01{
    width: 100%;
    margin: 0 auto;
  }

  .graph02{
    width: 90%;
    margin: -30% auto 5%;
  }

  .btn_area{
    width: 92%;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
  }

  .finger_02{
    width: 10%;
    position: absolute;
    bottom: -15%;
    left: 92%;
    z-index: 100;
  }


}


/* contents_02 */


/* contents_03 */

.contents_03{
  background: url("../img/contents_bg01_pc.png");
 background-position: top;
 background-repeat: repeat;
 background-size: contain;
 background-attachment: scroll;
 padding: 70px 0;
}

.img01{
  width: 1000px;
  margin: 50px auto 50px;
  max-width: 100%;
}

.img02{
  width: 1000px;
  margin: 50px auto 50px;
  max-width: 100%;
}

.checkbox_02{
  width: 1000px;
  margin: 50px auto 50px;
  max-width: 100%;
}


.text01_img{
  width: 1000px;
  margin: 50px auto 50px;
  max-width: 100%;
}


@media screen and (max-width:767px){

  .contents_03{
    background: url("../img/contents_bg01_sp.png");
   background-position: center;
   background-repeat: repeat;
   background-size: contain;
   background-attachment: scroll;
   padding: 10% 0;
  }

  .img01{
    width: 100%;
    margin: 7% auto 7%;
  }

  .img02{
    width: 100%;
    margin: 7% auto 7%;
  }

  .checkbox_02{
    width: 100%;
    margin: 7% auto 7%;
  }


  .text01_img{
    width: 100%;
    margin: 7% auto 7%;
  }

}

/* contents_03 */

/* contents_04 */

.contents_04{
 background-color: #fff;
 padding: 0 0 70px 0;
}

.step_in{
 background-color: #f5d84f;
 padding: 70px 0 30px 0;
}

.step_title{
  width: 800px;
  margin: 0 auto;
  max-width: 100%;
}

.step_img{
  width: 1100px;
  margin: 0 auto;
  max-width: 100%;
}


.text02_img{
  width: 800px;
  margin: 40px auto 0;
  max-width: 100%;
}

.img06{
  width: 600px;
  margin: 50px auto 0;
  max-width: 100%;
}


@media screen and (max-width:767px){

  .contents_04{
   background-color: #fff;
   padding: 0 0 10% 0;
  }

  .step_in{
   background-color: #f5d84f;
   padding: 10% 0;
  }

  .step_title{
    width: 95%;
    margin: 0 auto;
  }

  .step_img{
    width: 80%;
    margin: 0 auto;
  }


  .text02_img{
    width: 90%;
    margin: 40px auto 0;
  }

  .img06{
    width: 80%;
    margin: 5% auto 0;
  }

}

/* contents_04 */


/* contents_05 */

.contents_05{
  background: url("../img/contents_bg02_pc.png");
 background-position: top;
 background-repeat: repeat;
 background-size: contain;
 background-attachment: scroll;
 padding: 0 0 70px 0;
}

.last_title{
  background-color: #fc5a2d;
  padding: 30px 0;
}

.contents_title05{
  width: 600px;
  margin: 0 auto;
  max-width: 100%;
}

.inner_flame_02{
  width: 800px;
  margin: 70px auto 0;
  max-width: 100%;
  background-color: #fff;
  position: relative;
  padding: 50px;
  box-sizing: border-box;
}

.icon{
  width: 250px;
  max-width: 100%;
  position: absolute;
  right: 5%;
  bottom: 0;
}


@media screen and (max-width:767px){

  .contents_05{
    background: url("../img/contents_bg02_sp.png");
   background-position: center;
   background-repeat: repeat;
   background-size: contain;
   background-attachment: scroll;
   padding: 0 0 10% 0;
  }

  .last_title{
    background-color: #fc5a2d;
    padding: 4% 0;
  }

  .contents_title05{
    width: 80%;
    margin: 0 auto;
  }

  .inner_flame_02{
    width: 95%;
    margin: 7% auto 7%;
    background-color: #fff;
    position: relative;
    padding: 5%;
    box-sizing: border-box;
  }

  .icon{
    width: 37%;
    position: absolute;
    right: -6%;
    bottom: 0;
  }


}

/* contents_05 */




a{text-decoration: none;}
img{
	max-width:100%;
	display: block;
	margin: 0;
	padding:0;
	vertical-align: bottom;
}

.container{
	width: 100%;
	max-width: 100%;
	position: relative;
	overflow: hidden;
}

/*footer*/
footer.footer_detail{
	padding: 1% 0 2% 0;
	display: block;
	text-align: center;
	background:#000;
}

.commers a:hover{
  color: #1D5ABF;
   }

footer .copyright{
	font-size: 14px;
	text-align: center;
	color: #fff;
}
/* 特商法に基づく表記 */
footer .commers a{
	color:#fff;
	font-size: 14px;
	text-align: center;
	text-decoration: underline;
  letter-spacing: 0;
}

.commers p{
  line-height: 100%;
}
@media screen and (max-width:767px){
	footer .commers a{
		padding: 2% 0;
    letter-spacing: 0;
	}

  .commers p{
    line-height: 230%;
  }

	footer.footer_detail{
		padding: 1% 0 4% 0;
		display: block;
		text-align: center;
		background:#000;
	}

}
@media screen and (min-width:768px){
	footer .commers p{
		padding:0 0 1%;
	}
}



/* pcで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
@media screen and (max-width:767px){
	.pc { display: none !important; }
	.sp { display: block !important;}
}



/*文字装飾*/

.font_size_40{
	font-size: 40px;
}


.font_size_60{
	font-size: 60px;
}

.font_size_90{
	font-size: 90px;
}


.font_size_9sp{
	font-size: 9vw;
}

.font_size_15sp{
	font-size: 15vw;
}

.font_size_7sp{
	font-size: 7vw;
}


.font_size_7sp{
	font-size: 7vw;
}


.font_size_8sp{
	font-size: 8vw;
}

.font_size_5sp{
	font-size: 5.5vw;
	line-height: 150%;
}

.font_size_4sp_02{
	font-size: 4.5vw;
	line-height: 150%;
}


.font_size_4sp{
	font-size: 4vw;
	line-height: 150%;
}


.font_size_6sp{
	font-size: 6vw;
}


.font_size_27{
	font-size: 27px;
}

.font_size_25{
	font-size: 25px;
}


.font_size_30{
	font-size: 30px;
}

.font_size_18{
	font-size: 18px;
}


.font_size_15{
	font-size: 15px;
	line-height: 170%;
}

.font_w{
	font-weight: 700;
}

.font_w_900{
	font-weight: 900;
}


.italic{
  font-style: italic;
}

.border_b{
	text-decoration: underline;
}

.border_r{
	text-decoration: underline #e00f13;
}


.border_ol{
	text-decoration: underline #E44A13;
}

.border_bl{
	text-decoration: underline #07BEE8;
}

.border_gr{
	text-decoration: underline #008E45;
}

.border_rbl{
	text-decoration: underline;
	color: #00FFFF;
}

.border_y{
	text-decoration: underline #f5d84f;
}

.border_yellow{
  border-bottom: solid #f5d84f 3px ;
}

.border_w{
  border-bottom: solid #fff 3px ;
}

.border_w_sp{
  border-bottom: solid #fff 2px ;
}

.border_yellow_sp{
  border-bottom: solid #f5d84f 2px ;
}


.border_line_orange{
  border-bottom: solid #FF931E 5px;
}




.font_red{
	color: #e00f13;
}

.font_y{
	color: #f5d84f;
}

.font_bl{
	color: #07BEE8;
}

.font_rbl{
	color: #00FFFF;
}


.font_wh{
	color: #fff;
}

.font_bk{
	color: #000;
}

.font_ol{
	color: #FF931E;
}

.font_red02{
	color: #E72D32;
}

.font_gr{
	color: #40ae36;
}

.font_bk{
	color: #ED2087;
}


.text_marker{
	background: #f5d84f;
}

.text_marker_b{
	background: #00ffff;
}

.text_marker_r{
	background: #e00f13;
}

.border_line_pink{
  background: linear-gradient(transparent 50%, #FFE9E9 50%);
}

.border_line_blue{
  background: linear-gradient(transparent 50%, #EBFEFF 50%);
}

.border_line_yellow{
  background: linear-gradient(transparent 70%, #efd875 50%);
}

.border_line_lightyellow{
  background: linear-gradient(transparent 60%, #FFFB78 40%);
}




/*グラデーション*/

.reflection{
display:inline-block;
position:relative;
overflow:hidden;
}

.reflection:after {
content:"";
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
}

@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


/* 拡大・縮小 */

.keyframe5{
	animation-name: anim_sc;
	transform: scale(0.95,0.95);
}
@keyframes anim_sc {
	100% {
		transform: scale(1,1);
	}
}

.animation{
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 0.7s;
}





/*点滅*/

.flash{
	animation: flash 1.5s linear infinite;
}

@keyframes flash {
	0%,100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}




/* fuwafuwaっていうアニメーションはこんなふうだよ！ */
.fuwafuwa {
	-webkit-animation-name: fuwafuwa; /* fuwafuwaっていうアニメーションをしてね！ */
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function: ease;
	-moz-animation-name: fuwafuwa;
	-moz-animation-duration: 1.5s;
	-moz-animation-iteration-count: infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function: ease;
}
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -15px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -15px);}
	100% {-moz-transform:translate(0, 0);}
}

.bound {
	animation: bound 3s infinite;
}
@keyframes bound {
	0% { transform:translateY(0) }
	5% { transform:translateY(0) }
	10% { transform:translateY(0) }
	20% { transform:translateY(-10px) }
	25% { transform:translateY(0) }
	30% { transform:translateY(-10px) }
	50% { transform:translateY(0) }
	100% { transform:translateY(0) }
}

.header_icon {
	transform-origin:center top;
	animation:show 1s both;
}

@keyframes show {
 0% {
   transform:translate(0,2em);
   opacity:0;
   text-shadow:0 0 0 #0f0;
 }
 50% {
   text-shadow:0 0 0.5em #0f0;
 }
 100% {
   transform:translate(0,0);
   opacity:1;
   text-shadow:none;
 }
}


span.header_icon {display:inline-block;}
.img1 {animation-delay:0.5s;}



/* フェードインアニメーション */

.fadein{opacity : 0;transform : translate(0, 30px);transition : all 700ms;}
.fadein_right {opacity: 0; transform: translate(100px,0); transition: all 1000ms;}
.fadein_left {opacity: 0;	transform: translate(-100px,0); transition: all 1000ms;}
.fadein.scrollin,.fadein_right.scrollin,.fadein_left.scrollin{opacity : 1;transform : translate(0, 0);}



/*フェードインさせる */

.fadeIn {
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}


/*--- 拡大・縮小 ---*/
.keyframe {
	animation-name: anim_sc;
	transform: scale(0.9, 0.9);
}

@keyframes anim_sc {
	100% {
		transform: scale(1, 1);
	}
}

.animation {
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1s;
}

@keyframes skew {
       0% {transform: skew(0deg, 0deg);}
       5% {transform: skew(5deg, 4.2deg);}
       10% {transform: skew(-4deg, -3deg);}
       15% {transform: skew(3deg, 2.2deg);}
       20% {transform: skew(-2deg, -1.5deg);}
       25% {transform: skew(0.9deg, 0.9deg);}
       30% {transform: skew(-0.6deg, -0.6deg);}
       35% {transform: skew(0.3deg, 0.3deg);}
       40% {transform: skew(-0.2deg, -0.2deg);}
       45% {transform: skew(0.1deg, 0.1deg);}
       50% {transform: skew(0deg, 0deg);}
   }


   .btn_animation {
     margin: 0 auto;
     max-width: 100%;
     display: block;
     cursor: pointer;
     border-radius: 500px;
     -webkit-animation: btnwrapanime 11s infinite;
     animation: btnwrapanime 1.5s infinite;
     -webkit-box-shadow: 0 0 0 0 rgba(0, 188, 0, 1);
     box-shadow: 0 0 0 0 rgba(0, 188, 0, 1); }
   @-webkit-keyframes btnwrapanime {
     70% {
       -webkit-box-shadow: 0 0 0 50px rgba(233, 30, 99, 0);
       box-shadow: 0 0 0 50px rgba(233, 30, 99, 0); }
     100% {
       -webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
       box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
   @keyframes btnwrapanime {
     70% {
       -webkit-box-shadow: 0 0 0 50px rgba(233, 30, 99, 0);
       box-shadow: 0 0 0 50px rgba(233, 30, 99, 0); }
     100% {
       -webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
       box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
     @media (max-width: 750px) {
       @-webkit-keyframes btnwrapanime {
         70% {
           -webkit-box-shadow: 0 0 0 25px rgba(233, 30, 99, 0);
           box-shadow: 0 0 0 25px rgba(233, 30, 99, 0); }
         100% {
           -webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
           box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
       @keyframes btnwrapanime {
         70% {
           -webkit-box-shadow: 0 0 0 25px rgba(233, 30, 99, 0);
           box-shadow: 0 0 0 25px rgba(233, 30, 99, 0); }
         100% {
           -webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
           box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } } }