@charset "utf-8";


/* free-or-ready
------------------------------*/

*, ::before, ::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
}

#free-or-ready{
 min-width: 1180px;}

#free-or-ready .spv{display:none;}
#free-or-ready .pcv{display:block;}

@media screen and (max-width: 768px) {
 #free-or-ready{
  min-width:inherit ;}

 #free-or-ready .spv{display:block;}
 #free-or-ready .pcv{display:none;}
}


#free-or-ready div,#free-or-ready span,#free-or-ready h2,#free-or-ready h3,#free-or-ready h4,#free-or-ready h5,#free-or-ready p,#free-or-ready a,#free-or-ready li{
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
}

#free-or-ready .content{
 position: relative ;}

#free-or-ready p {
	line-height: 1.8;
	margin: 0 0 1rem 0;
	font-size: 18px;
}

#free-or-ready .innerWrap {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
    padding: 0;
	clear:both;
}

.marker-animation.active{
 background-position: -100% 1.3rem;}
 
.marker-animation {
 background-image: -webkit-linear-gradient(left, transparent 50%, #ffffff 50%);
 background-image: -moz-linear-gradient(left, transparent 50%, #ffffff 50%);
 background-image: -ms-linear-gradient(left, transparent 50%, #ffffff 50%);
 background-image: -o-linear-gradient(left, transparent 50%, #ffffff 50%);
 background-image: linear-gradient(left, transparent 50%, #ffffff 50%);
 background-repeat: repeat-x;
 background-size: 200% .6em;
 background-position: 0 1.3rem;
 transition: all 2s ease;
 font-weight: bold;}

#free-or-ready h4.marker-animation.active{
 background-position: -100% 1.2rem;}

#free-or-ready h4.marker-animation {
 background-image: -webkit-linear-gradient(left, transparent 50%, #ffef61 50%);
 background-image: -moz-linear-gradient(left, transparent 50%, #ffef61 50%);
 background-image: -ms-linear-gradient(left, transparent 50%, #ffef61 50%);
 background-image: -o-linear-gradient(left, transparent 50%, #ffef61 50%);
 background-image: linear-gradient(left, transparent 50%, #ffef61 50%);
 background-repeat: repeat-x;
 background-size: 200% .6em;
 background-position: 0 1.2rem;
 transition: all 2s ease;
 font-weight: bold;}


#free-or-ready .content img{
 max-width: 100% ;}

.delay-15 {
  -webkit-animation-delay: 1.5s !important;
  animation-delay: 1.5s !important;
}

.delay-25 {
  -webkit-animation-delay: 2.5s !important;
  animation-delay: 2.5s !important;
}

.delay-30 {
  -webkit-animation-delay: 3s !important;
  animation-delay: 3s !important;
}

.delay-35 {
  -webkit-animation-delay: 3.5s !important;
  animation-delay: 3.5s !important;
}


/* Sec01
--------------------------------------------------*/
#free-or-ready #sec01{
 background-image: url("../images/free-or-ready/sec01_bg.jpg") ;
 background-position: top center ;
 background-repeat: no-repeat ;
 background-size: cover ;
 padding: 8rem 0 5rem;}

#free-or-ready #sec01 h2{
 position: relative ;
 text-align: center ;
 max-width: 600px ;
 margin: 0 auto 90px auto ;}

#free-or-ready #sec01 h2::before {
 position: absolute;
 top: 0;
 left: -140px;
 width: 100px;
 height: 200px;
 background: url("../images/free-or-ready/sec01_01_l.svg") no-repeat center/contain;
 content: "";
}

#free-or-ready #sec01 h2::after {
 position: absolute;
 top: 0;
 right: -140px;
 width: 100px;
 height: 200px;
 background: url("../images/free-or-ready/sec01_01_r.svg") no-repeat center/contain;
 content: "";
}

#free-or-ready #sec01 .sec01_02{
 text-align: center ;
 max-width: 900px ;
 margin: 0 auto 50px auto ;}

#free-or-ready #sec01 .sec01_btn{
 max-width: 100% ;
 margin: 0 auto ;}

#free-or-ready #sec01 .sec01_btn ul{
 display: flex ;
 justify-content: space-between ;}

#free-or-ready #sec01 .sec01_btn ul li{
 list-style: none ;
 flex-basis: 49% ;}

@media screen and (min-width: 320px) and (max-width: 768px) {
 #free-or-ready #sec01{
  padding: 4rem 0 2rem;}

 #free-or-ready #sec01 h2{
  max-width: 70% ;
  margin: 0 auto 40px auto ;}

 #free-or-ready #sec01 h2::before {
  left: -28%;
  width: 20%;
  height: 100%;}

 #free-or-ready #sec01 h2::after {
  right: -35%;
  height: 100%;}

 #free-or-ready #sec01 .sec01_02{
  max-width: 95% ;
  margin: 0 auto 20px auto ;}

 #free-or-ready #sec01 .sec01_btn{
  max-width: 95%;}
 
}


/* Sec02
--------------------------------------------------*/
#free-or-ready #sec02{
background: #f4fdda;
 padding: 0 0 5rem ;
margin: 0;}

#free-or-ready #sec02 h2{
 text-align: center ;
 max-width: 250px ;
 margin: 0 auto 20px auto ;
 padding-top: 100px ;}

#free-or-ready #sec02 h2:before{
 display: block ;
 content: '' ;
 position: relative ;
 width: 100% ;
 height: 140px ;
 margin: 0 auto 40px auto ;
 text-align: center ;
 background-image: url("../image/free-or-ready/sec02_01.svg") ;
 background-position: center center ;
 background-repeat: no-repeat ;}

#free-or-ready #sec02 .sub_midashi{
 text-align: center ;
 margin: 0 auto 80px auto ;
 max-width: 670px ;}

#free-or-ready #sec02 h3{
 text-align: center ;
 max-width: 380px ;
 margin: 0 auto 60px auto ;}

#free-or-ready #sec02 ul{
 display: flex ;
 max-width: 100% ;
 justify-content: space-between ;
 margin: 0 auto 80px auto ;}

#free-or-ready #sec02 ul li{
 list-style: none ;
 flex-basis: 33% ;}
   
#free-or-ready #sec02 .waku{
 display: flex ;
 justify-content:space-around ;
 align-items: center ;
 max-width: 100% ;
 border: 2px solid #000;
 border-radius:10px ;
 padding: 40px 20px;
 margin: 0 auto ;
 box-sizing: border-box ;}

#free-or-ready #sec02 .waku h4{
 flex-basis: 160px ;
 margin: 0 ;}

#free-or-ready #sec02 .waku div{
 flex-basis: calc( 100% - 230px) ;}

#free-or-ready #sec02 .waku div .midashi{
 font-size: 1.7rem ;
 font-weight: bold ;
 margin: 0 auto 10px auto ;}

#free-or-ready #sec02 .waku div .note{
 font-size: 1.2rem ;
 font-weight: bold ;
 line-height: 1.8 ;
 margin-bottom: 0 ;}


@media screen and (min-width: 320px) and (max-width: 768px) {
 #free-or-ready #sec02{
  padding: 0 0 3rem;
}

 #free-or-ready #sec02 h2{
  max-width: 150px ;
  padding-top: 30px ;}

 #free-or-ready #sec02 h2:before{
  width: 40% ;
  height: 60px ;
  margin: 0 auto 20px auto ;}

 #free-or-ready #sec02 .sub_midashi{
  margin: 0 auto 20px auto ;
  max-width: 90% ;}

 #free-or-ready #sec02 h3{
  max-width: 50% ;
  margin: 0 auto 20px auto ;}

 #free-or-ready #sec02 ul{
  margin: 0 auto 20px auto ;}

 #free-or-ready #sec02 .waku{
  max-width: 90% ;
  flex-wrap: wrap ;
  padding: 20px 20px;}

 #free-or-ready #sec02 .waku h4{
  flex-basis: 100% ;
  text-align: center ;
  padding-bottom: 20px ;}

 #free-or-ready #sec02 .waku h4 img{
  max-width: 120px; }

 #free-or-ready #sec02 .waku div{
  flex-basis: 100%;}

 #free-or-ready #sec02 .waku div .midashi{
  display:inline ;
  border-bottom: 5px solid #c2e176;
  font-size: 1.2rem ;}

 #free-or-ready #sec02 .waku div .note{
  margin-top: 20px ;
  font-size: 0.9rem ;
  line-height: 1.8 ;}
 
}


/* Sec03
--------------------------------------------------*/
#free-or-ready #sec03{
 background: #f4f3e9;
 padding: 0 0 5rem;
    margin: 0;
}

#free-or-ready #sec03:before{
 position: absolute ;
 display: block ;
 content: '' ;
 top: 0 ;
 left: 48% ;
 width: 50px ;
 height: 50px ;
 border-top: 50px solid #f4fdda;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent; }

#free-or-ready #sec03 h2{
 text-align: center ;
 max-width: 380px ;
 margin: 0 auto 30px auto ;
 padding-top: 100px ;}

#free-or-ready #sec03 .sub_midashi{
 text-align: center ;
 font-size: 1.4rem ;
 margin: 0 auto 80px auto ;
 max-width: 580px ;}

#free-or-ready #sec03 .plan{
 width: 90% ;
 display: flex ;
 justify-content: space-between ;
 margin: 0 0 80px auto ;}

#free-or-ready #sec03 .plan .plan_info{
 flex-basis: 355px ;}

#free-or-ready #sec03 .plan .plan_info .plan_info_point{
 width: 120px ;
 margin-bottom: 30px ;
 text-align: left ;}

#free-or-ready #sec03 .plan .plan_info .plan_info_title{
 margin: 0 auto 30px auto ;
 font-size: 1.7rem ;
 font-weight: bold;
 line-height: 1.7 ;
 text-align: left ;}

#free-or-ready #sec03 .plan .plan_info .plan_info_note{
 margin: 0 auto 50px auto ;
 line-height: 2.2 ;
 font-size: 1.2rem ;
 font-weight: bold ;
 letter-spacing: 3px;
 text-align: left ;}

#free-or-ready #sec03 .plan .plan_info .plan_info_link{
 display: block;
 margin: 0 auto ;
 text-align: left ;}

#free-or-ready #sec03 .plan .plan_info .plan_info_link img{
	max-width:100% ;}

#free-or-ready #sec03 .plan figure{
 flex-basis: calc(100% - 380px );
 text-align: right ;}

#free-or-ready #sec03 .plan figure img{
 width:100% ;
 max-width: none ;}

#free-or-ready #sec03 .plan.ptype1 .plan_info{
 margin-top: 80px ;}
 
#free-or-ready .sp_bnr_link{
		display: none;}

#free-or-ready #sec03 .plan.ptype2{
 margin: 0 auto 80px 0 ;}

#free-or-ready #sec03 .qa{
 width: 100% ;
 padding: 30px ;
 box-sizing: border-box ;
 margin: 0 auto ;
 border-radius:20px;
 background-image: url("../image/free-or-ready/sec03_12.png") ;
 background-position: top center ;
 background-repeat: no-repeat ;
 background-size: cover ;}

#free-or-ready #sec03 .qa dl{
 width: 100%;
 margin: 0 auto ;}

#free-or-ready #sec03 .qa dl dt{
 position: relative ;
 padding: 0 0 0 100px ;
 box-sizing: border-box ;
 font-size: 1.8rem ;
 line-height: 1.7 ;
 margin: 0 auto 20px auto ;
 font-weight: bold ;}

#free-or-ready #sec03 .qa dl dt:before{
 position: absolute ;
 display: block ;
 content: '' ;
 top: 0 ;
 left: 0 ;
 width: 90px ;
 height: 90px ;
 background-image: url("../image/free-or-ready/sec03_13.svg") ;
 background-position: top center ;
 background-repeat: no-repeat ;
 background-size: contain ;}

#free-or-ready #sec03 .qa dl dd{
 position: relative ;
 padding: 0 0 0 100px ;
 box-sizing: border-box ;
 font-size: 1.3rem ;
 line-height: 1.7 ;
 font-weight: bold ;}

#free-or-ready #sec03 .qa dl dd:before{
 position: absolute ;
 display: block ;
 content: '' ;
 top: 0 ;
 left: 0 ;
 width: 90px ;
 height: 90px ;
 background-image: url("../image/free-or-ready/sec03_14.svg") ;
 background-position: top center ;
 background-repeat: no-repeat ;
 background-size: contain ;}

#free-or-ready #sec03 .qa dl dt span,
#free-or-ready #sec03 .qa dl dd span{
 padding: 0 5px ;
 box-sizing: border-box ;
 margin-bottom: 10px ;
 background: #f4f3e9 ;
    font-size: min(4vw, 30px);
    font-weight: 700;
}
#free-or-ready #sec03 .qa dl dd span{
 padding: 0 5px ;
 box-sizing: border-box ;
 margin-bottom: 10px ;
 background: #f4f3e9 ;
    font-size: min(3vw, 22px);
}



@media screen and (min-width: 320px) and (max-width: 768px) {
 #free-or-ready #sec03{
  padding: 2rem 0 3rem ;}
 
 #free-or-ready #sec03:before{
  left: calc( 50% - 50px);}

 #free-or-ready #sec03 h2{
  max-width: 80% ;
  margin: 0 auto 20px auto ;
  padding-top: 30px ;}

 #free-or-ready #sec03 .sub_midashi{
  margin: 0 auto 20px auto ;
  max-width: 90% ;}

 #free-or-ready #sec03 .plan{
  width: 100% ;
  flex-wrap: wrap ;
  margin: 0 0 30px auto ;}

 #free-or-ready #sec03 .plan .plan_info{
  flex-basis:90% ;
  margin-left: 5% ;
  margin-bottom: 15px ;}

 #free-or-ready #sec03 .plan .plan_info .plan_info_point{
  width: 120px ;
  margin-bottom: 20px ;}

 #free-or-ready #sec03 .plan .plan_info .plan_info_title{
  margin: 0 auto 20px auto ;
  font-size: 1.1rem ;}

 #free-or-ready #sec03 .plan .plan_info .plan_info_note{
  margin: 0 auto 20px auto ;
  font-size: 0.9rem ;}

	#free-or-ready #sec03 .plan .plan_info .plan_info_link{
		display: none;
		text-align:center ;}

	#free-or-ready #sec03 .plan .plan_info .plan_info_link img{
		max-width:250px ;}
	#free-or-ready .sp_bnr_link{
		display: block;
		float: right;
		width:250px;
		margin-bottom:50px;}
		
 #free-or-ready #sec03 .plan figure{
  flex-basis: 100%;}

 #free-or-ready #sec03 .plan.ptype1 .plan_info{
  margin-top: 0 ;}

 #free-or-ready #sec03 .plan.ptype2{
  margin: 0 auto 20px 0 ;}

#free-or-ready #sec03 .qa{
 width: 100% ;
 padding: 30px ;
 box-sizing: border-box ;
 margin: 0 auto ;
 background:none;
 /*border:2px solid #03b8df;
 border-radius:20px;
 background-image: url("../img/sec03_12_sp.png") ;
 background-position: top center ;
 background-repeat:repeat;
 background-size: cover ;
 background-color: #f4f3e9;
 background-image: none;*/
 }

 #free-or-ready #sec03 .plan.ptype2 .plan_info{
  order: 1 ;}
 
 #free-or-ready #sec03 .plan.ptype2 figure{
  order: 2 ;}
 
 #free-or-ready #sec03 .qa{
  width: 90% ;
  padding: 10px ;}

 #free-or-ready #sec03 .qa dl dt{
  padding: 0 0 0 50px ;
  font-size: 1rem ;}

 #free-or-ready #sec03 .qa dl dt:before{
  width: 40px ;
  height: 40px ;}

 #free-or-ready #sec03 .qa dl dd{
  padding: 0 0 0 50px ;
  font-size: 0.9rem ;}

 #free-or-ready #sec03 .qa dl dd:before{
  width: 40px ;
  height: 40px ;}


}


/* Sec04
--------------------------------------------------*/
#free-or-ready #sec04{
 background: #ef856d;
 padding: 0 0 5rem ;}

#free-or-ready #sec04 h2{
 text-align: center ;
 max-width: 390px ;
 margin: 0 auto 30px auto ;
 padding-top: 100px ;}

#free-or-ready #sec04 h2:before{
 display: block ;
 content: '' ;
 position: relative ;
 width: 100% ;
 height: 130px ;
 margin: 0 auto 40px auto ;
 text-align: center ;
 background-image: url("../images/free-or-ready/sec04_01.svg") ;
 background-position: center center ;
 background-repeat: no-repeat ;}

#free-or-ready #sec04 .sub_midashi{
 text-align: center ;
 margin: 0 auto 80px auto ;
 max-width: 600px ;}

#free-or-ready #sec04 h3{
 text-align: center ;
 max-width: 310px ;
 margin: 0 auto 60px auto ;}

#free-or-ready #sec04 ul{
 display: flex ;
 max-width: 100% ;
 justify-content: space-between ;
 margin: 0 auto 80px auto ;}

#free-or-ready #sec04 ul li{
 list-style: none ;
 flex-basis: 33% ;}
   
#free-or-ready #sec04 .waku{
 display: flex ;
 justify-content:space-around ;
 align-items: center ;
 max-width: 900px ;
 border: 2px solid #ffffff ;
 border-radius:10px ;
 padding: 40px 20px;
 margin: 0 auto ;
 box-sizing: border-box ;}

@media screen and (min-width: 320px) and (max-width: 768px) {
 #free-or-ready #sec04{
  padding: 0 0 3rem ;}

 #free-or-ready #sec04 h2{
  max-width: 150px ;
  padding-top: 30px ;}

 #free-or-ready #sec04 h2:before{
  width: 40% ;
  height: 60px ;
  margin: 0 auto 20px auto ;}

 #free-or-ready #sec04 .sub_midashi{
  margin: 0 auto 20px auto ;
  max-width: 90% ;}

 #free-or-ready #sec04 h3{
  max-width: 50% ;
  margin: 0 auto 20px auto ;}

 #free-or-ready #sec04 ul{
  margin: 0 auto 20px auto ;}

}

/* Sec05
--------------------------------------------------*/
#free-or-ready #sec05{
 background: #f4f3e9;
 padding: 0 0 5rem ;}

#free-or-ready #sec05:before{
 position: absolute ;
 display: block ;
 content: '' ;
 top: 0 ;
 left: 48% ;
 width: 50px ;
 height: 50px ;
 border-top: 50px solid #ef856d;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent; }

#free-or-ready #sec05 h2{
 text-align: center ;
 max-width: 445px ;
 margin: 0 auto 30px auto ;
 padding-top: 100px ;}

#free-or-ready #sec05 .sub_midashi{
 text-align: center ;
 font-size: 1.4rem ;
 margin: 0 auto 80px auto ;
 max-width: 730px ;}

#free-or-ready #sec05 .plan{
 width: 90% ;
 display: flex ;
 justify-content: space-between ;
 margin: 0 0 80px auto ;}

#free-or-ready #sec05 .plan .plan_info{
 flex-basis: 355px ;}

#free-or-ready #sec05 .plan .plan_info .plan_info_point{
 width: 120px ;
 margin-bottom: 30px ;
 text-align: left ;}

#free-or-ready #sec05 .plan .plan_info .plan_info_title{
 margin: 0 auto 30px auto ;
 font-size: 1.7rem ;
 font-weight: bold;
 line-height: 1.7 ;
 text-align: left ;}

#free-or-ready #sec05 .plan .plan_info .plan_info_note{
 margin: 0 auto 50px auto ;
 line-height: 2.3 ;
 font-size: 1.2rem ;
 letter-spacing: 3px;
 font-weight: bold ;
 text-align: left ;}

#free-or-ready #sec05 .plan .plan_info .plan_info_link{
 display: block;
 margin: 0 auto ;
 text-align: left ;}

#free-or-ready #sec05 .plan .plan_info .plan_info_link img{
	max-width:100% ;}

#free-or-ready #sec05 .plan figure{
 flex-basis: calc(100% - 380px );
 text-align: right ;}

#free-or-ready #sec05 .plan figure img{
 width:100% ;
 max-width: none ;}

#free-or-ready #sec05 .plan.ptype1 .plan_info{
 margin-top: 80px ;}

#free-or-ready #sec05 .plan.ptype2{
 margin: 0 auto 80px 0 ;}

#free-or-ready #sec05 .plan.ptype2 .plan_info{
 margin-top: 200px ;}

@media screen and (min-width: 320px) and (max-width: 768px) {
 #free-or-ready #sec05{
  padding: 2rem 0 3rem ;}

 #free-or-ready #sec05:before{
  left: calc( 50% - 50px);}

 #free-or-ready #sec05 h2{
  max-width: 80% ;
  margin: 0 auto 20px auto ;
  padding-top: 30px ;}

 #free-or-ready #sec05 .sub_midashi{
  margin: 0 auto 20px auto ;
  max-width: 90% ;}

 #free-or-ready #sec05 .plan{
  width: 100% ;
  flex-wrap: wrap ;
  margin: 0 0 30px auto ;}

 #free-or-ready #sec05 .plan .plan_info{
  flex-basis:90% ;
  margin-left: 5% ;
  margin-bottom: 15px ;}

 #free-or-ready #sec05 .plan .plan_info .plan_info_point{
  width: 120px ;
  margin-bottom: 20px ;}

 #free-or-ready #sec05 .plan .plan_info .plan_info_title{
  margin: 0 auto 20px auto ;
  font-size: 1.1rem ;}

 #free-or-ready #sec05 .plan .plan_info .plan_info_note{
  margin: 0 auto 20px auto ;
  font-size: 0.9rem ;}

	#free-or-ready #sec05 .plan .plan_info .plan_info_link{
		display: none;
		text-align:center ;}

	#free-or-ready #sec05 .plan .plan_info .plan_info_link img{
		max-width:250px ;}

 #free-or-ready #sec05 .plan figure{
  flex-basis: 100%;}

 #free-or-ready #sec05 .plan.ptype1 .plan_info{
  margin-top: 0 ;}

 #free-or-ready #sec05 .plan.ptype2{
  margin: 0 auto 20px 0 ;}

 #free-or-ready #sec05 .plan.ptype2 .plan_info{
  margin-top: 0 ;
  order: 1 ;}
 
 #free-or-ready #sec05 .plan.ptype2 figure{
  order: 2 ;}


}

/* Sec06
--------------------------------------------------*/
#free-or-ready #sec06{
 background: #ffffff ;
 padding: 5rem 0 4rem ;}

#free-or-ready #sec06 figure{
 max-width: 850px;
 margin: 0 auto ;
 text-align: center ;}

@media screen and (min-width: 320px) and (max-width: 768px) {
 #free-or-ready #sec06 figure{
  max-width: 90%;}
}