@charset "UTF-8";
body {
	overflow-x: hidden;
	max-width: 640px;
	margin: 0 auto;
	padding-bottom: 213px;
}
img {
	display: block;
	width: 100%;
	height: 100%;
}
.main p {
    line-height: 0;
}
a {
	display: block;
}
a:hover {
	opacity: 0.7;
}
sup {
    vertical-align: text-bottom;
    font-size: 0.65em;
}
.inner {
    max-width: 640px;
    position: relative;
    margin: 0 auto;
}
div, img {
    display: inline-block;
    vertical-align: bottom;
}
.col2 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: auto;
}
.col2 > * {
    width: calc(100%/2);
}
footer div,.qa img {
	display: block;
}

/*fv*/



/*cta*/
.cta {
    position: relative;
	margin-top: -4.1em;
}
.cta .price {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 83.2%;
    bottom: 19.8em;
	opacity: 1;
}
.cta .price.show.is-show {
    animation: big 0.5s 0.3s ease-out;
}
.btn.click {
    margin: 0 auto;
    height: 152px;
    max-width: 620px;
    width: 82.67%;
    overflow: hidden;
    z-index: 1;
	border-radius: 0 0 60px 60px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3.3em;
}
.btn.click a:hover {
    opacity: 0.8;
}
.btn.click a {
    display: block;
}
.btn.click span {
    display: block;
    margin: 0 auto;
    position: relative;
    animation: click 1.2s ease-in-out infinite;
}
.btn.click span:before {
    content: '';
    display: block;
    height: 130%;
    background-color: #15683b;
    border-radius: 120px;
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    margin: 0 auto;
    z-index: -1;
}
.btn.click span img {
	display: block;
    margin: 0 auto;
}
@keyframes click {
	0%   { transform: translateY(20px); }
	50%  { transform: translateY(0); }
	100% { transform: translateY(20px); }
}


.show {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

/*下線*/
.wrap,.line p {
    position: relative;
/* margin-bottom: 4em; */}
.line, .fade, .line p .border, .on,.big {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
padding-top: -4em;}
.line p img {
    z-index: 1;
    position: relative;
}
.line p .border {
    overflow: hidden;
    display: block;
    height: 0.75em;
}
.line p .border:after {
    content: '';
    height: 0.75em;
    width: 100%;
    display: block;
    background-color: rgba(221,178,88,0.4);
    border-radius: 1em;
    transition: 0.7s 0.3s all;
    transform: scale(0, 1);
    transform-origin: left top;
}
.line p.is-show .border:after {
    transform: scale(1, 1);
}

/*フェード*/
.show.fadein {
     opacity: 0;
}
.show.fadein.is-show {
    opacity: 1;
}

/*フェード 下から*/
.show.fadein.under {
    transform: translateY(50%);
}
.show.fadein.under.is-show {
    transform: translateY(0%);
}

/* 拡大 */
.big p.is-show {
    animation: big 0.5s 0.3s ease-out;
}
@keyframes big {
	0%   { transform: scale(1.0, 1.0);
	 }
	50%   { transform: scale(1.3, 1.3);
	 }
}

/*article01*/
.article01 .line01 .line .item01 {
    margin-bottom: 1em;
top: 0.03em;}
.line01 p.item01 .border,
.line01 p.item01.is-show .border:after {
    width: 17.8em;
}
.line01 p.item02 .border,
.line01 p.item02.is-show .border:after {
    width: 27.5em;
}
.article01 .fade01 .fade {
    top: 6.8em;
    bottom: auto;
}
.article01 .line02 .line .item01 {
/* padding-bottom: 4em; */
	top: -1.6em;
}
.article01 .line02 .line .item02 {
    margin-bottom: 2.5em;
transition-delay: 0.5s;}
.line02 p .border:after {
    background-color: rgba(240,218,123,1);
}
.line02 p.item01 .border,
.line02 p.item01.is-show .border:after,
.line02 p.item02 .border,
.line02 p.item02.is-show .border:after {
    width: 32em;
}
.article01 .fade02 .fade {
    bottom: 9.5em;
}
.article01 .fade02 .item02,.article03 .fade06 .item02 {
    transition-delay: 0.3s;
}
.article01 .fade03 .fade {
    bottom: 0.5em;
}
.article01 .fade04 .on {
    max-width: 370px;
    width: 49.33%;
    bottom: 1.3em;
    transform: translateX(-0.5em);
}
.fade.icon p {
    max-width: 212px;
    width: 70.6%;
}
.article01 .fade04 .fade .item01 {
    margin: 0 0 -2.7em auto;
}
.fade.icon {
    left: auto;
    max-width: 300px;
    width: 40%;
}
.article01 .fade04 .fade, .article03 .fade10 .fade {
    bottom: 12.9em;
    right: 1em;
}
video {
    max-width: 100%;
    display: block;
}
.movie01 .on.movie {
    max-width: 680px;
    width: 90.3%;
    top: 27.1em;
    overflow: hidden;
    height: 19.125em;
}
.article01 .fade05 .fade,.article03 .fade11 .fade {
    bottom: auto;
    top: 23.7em;
    right: 0.5em;
}
.article01 .fade05 .fade .item01 {
    margin: 4.2em 0 0 2.5em;
}
.article01 .fade05 .fade .item02,
.article03 .fade11 .fade .item02 {
    max-width: 264px;
    width: 88%;
    margin: -16.6em 0 0;
    opacity: 0;
    -webkit-transition: all 0.5s 0.4s;
    -moz-transition: all 0.5s 0.4s;
    -ms-transition: all 0.5s 0.4s;
    -o-transition: all 0.5s 0.4s;
    transition: all 0.5s 0.4s;transform: translateY(50%);
}
.article01 .fade05 .fade .item01.is-show + .item02,
.article03 .fade11 .fade .item01.is-show + .item02 {
    opacity: 1;
    transform: translateY(0%);
}
.article01 .movie02 .movie {
    max-width: 240px;
    max-height: 200px;
    width: 32%;
    height: 16.2%;
    border-radius: 50%;
    overflow: hidden;
    top: 1.2em;
    right: 0.9em;
    margin: 0 0 0 auto;
	z-index: 1;
}
.article01 .movie02 .movie video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    width: 102%; /*動画カット前サイズ 211%*/
}
.article01 .movie03 .on {
    position: relative;
    z-index: -1;
    margin: -3.5em auto;
    transform: rotate(-6deg);
}
.article01 .movie03 .on video {
    max-width: none;
    width: 110%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* article02 voice*/
.article02 .big01 .big .item01 {
    max-width: 430px;
    width: 57.33%;
    margin: 0 auto 6.6em;
}
.article02 .big02 .big {
    top: 13.9em;
    bottom: auto;
}
.article02 .big02 .big .item01,.article05 .big10 .big .item01 {
    max-width: 260px;
    width: 34.66%;
    margin: 0 auto;
    padding-left: 0.4em;
}
.article02 .big03 .big .item01 {
    max-width: 570px;
    width: 76%;
    padding-right: 5.5em;
    margin: 0 auto 6.4em;
}
.article02 .cta {
    margin-top: 0;
}

/* article03 voice*/
.article03 .big04 .big {
    bottom: 9.6em;
}
.article03 .fade07 .fade {
    top: 5em;
    bottom: auto;
}
.article03 .fade08 .fade,
.article03 .fade09 .fade {
    bottom: 3.3em;
}
.article03 .big05 .big {
    bottom: 12.7em;
}
.article03 .fade10 .fade .item01 {
    margin: 0 0 -0.3em auto;
}
.article03 .fade10 .fade {
    bottom: 14em;
}
.article03 .fade10 .fade .item02 {
    margin: 0 0.6em 0 auto;
}
.article03 .fade11 .fade .item01 {
    margin: 4.2em 0 0 2.5em;
}
.article03 .fade11 .fade {
    right: -0.6em;
}

/* article04 */
.article04 .fade12 .fade {
	max-width: 350px;
	width: 46.7%;
	left: 0;
	right: auto;
	bottom: 0.9em;
}
.article04 .big06 .big {
    bottom: 4.5em;
}
.article04 .big07 .big {
    bottom: 4.3em;
}
.article04 .fade13 .fade {
    max-width: 400px;
    width: 53.33%;
    left: 0;
    right: auto;
    bottom: 0em;
}
.article04 .fade14 .fade {
    bottom: 3em;
}
.article04 .big09 .big {
    bottom: 8.9em;
}
.article04 .line03 .line {
    bottom: 7.8em;
}
.article04 .line03 .line p .border::after {
    background: url("../img/line_txt05_bdr.png") no-repeat top/contain;
	background-position-x: -100vw;
}
.article04 .line03 .line p .border {
    max-width: 676px;
    width: 90%;
}
.article04 .line03 .line p.is-show .border::after {
    background-position-x: 0;
}
.article04 .line03 .line p .border,
.article04 .line03 .line p .border::after {
    height: 1.75em;
}
.article04 .movie04 .movie {
    max-height: 312px;
    height: 48.8vw;
    overflow: hidden;
}
.article04 .fade15 .fade {
    bottom: 1.8em;
}

/* article05 */
.article05 .movie05 .on {
    margin: 0 auto;
	max-width: 676px;
	width: 90%;
	bottom: 1.8em;
}
.youtube {
  /* position: relative; */
  width: 100%;
  padding-top: 50.6%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.article05 .fade16 .fade .show {
	transition: all 0.8s 0.5s;
}
.article05 .big11 .big {
	bottom: 24.8em;
}
.article05 .big10 .big {
    top: 14.1em;
    bottom: auto;
}


.qa {
    /* margin-top: 61px; */
}
.qa .item {
	width: 100%;
	background-color: #c2ccdd;
padding-bottom: 3.5em;}
.qa .sub {
    font-size: 1.875em;
    color: #022b70;
    font-weight: 600;
    width: 90%;
    margin: 2em 1em 0;
}
.qa .sub + label {
    margin-top: 0.5em;
}
.accbox .accshow a + img.h-200 {
    width: auto;
    max-height: 26em;
}

/*ボックス全体*/
.accbox {
    
 
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5em 0 0;
    color: #fff;
    font-size: 1.875em;
    line-height: 1.416em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.5s;
    border-bottom: 1px solid #000;
    position: relative;
	background-color: #022b70;
	padding: 0.7em 0;
}
.accbox label h4 {
    padding: 0 2.5em 0 4.5em;
    position: relative;
	min-height: 2.8em;
	display: flex;
	align-items: center;
}
.accbox label h4 span {
    padding-left: 1em;
border-left: 2px solid #366188;}
.accbox label:first-of-type {
    margin-top: 0;
}
/*ラベルホバー時*/
.accbox label:hover {
opacity: 0.7;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    position: relative;
background-color: #fff;}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    
    opacity: 1;
    padding: 2em 0;
}
.accbox label h4:after, .accbox label h4:before {
    content: '';
    display: block;
    position: absolute;
}
.accbox label h4:after {
    width: 1.375em;
    height: 1.375em;
    background: url("../img/q_arr_icon.png") no-repeat center;
    background-size: contain;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
}

.accbox label h4:before {
    width: 4.4375em;
    height: 100%;
    max-height: 2.81em;background: url("../img/q_icon.png") no-repeat center;
    background-size: contain;
    top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.accbox .accshow p {
    padding: 0 1.7em;
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.584em;
    text-align: justify;
    text-justify: inter-ideograph;
    text-justify: inter-character;
	margin-bottom: 1em;
}
.accbox .accshow p span.sub {
	font-size: 0.6em;
	display: inline-block;
	vertical-align: top;
	line-height: 2em;
}
.accbox .accshow p span.sub_txt {
    font-size: 0.8em;
    line-height: 1.3em;
    display: inline-block;
    margin-top: 0.6em;
    padding-left: 1em;
    text-indent: -1em;
}
.accbox .accshow img, .accbox .accshow a {
    width: 88%;
    margin: 0 auto;
}
.accbox .accshow a + img {
    width: 50%;
    margin: 3em auto;
}

.l-footer {
  background: #232773;
  color: #fff;
  text-align: center;
}
.l-footer__head {
    padding: 5% 0;
}
.l-footer__list {
    display: flex;
    justify-content: space-around;
}
.l-footer__item a {
    color: #fff;
    text-decoration: none;
    font-size: 1.25em;
}
.l-footer__item a:before {
      content: '>';
      display: inline-block;
      margin-right: 5px;
}
.l-footer__body h1 {
    font-size: 1.875em;
	line-height: 2em;
}
.l-footer__body p {
    font-size: 1.375em;
}
.l-footer small {
    display: inline-block;
    margin-top: 6%;
    margin-bottom: 3%;
    font-size: 1.0625em;
}

div#float {
    position: fixed;
    bottom: 0;
    background-color: rgba(255,255,255,0.7);
    box-shadow: 0 -4px 10px rgb(125 125 125 / 50%);
    z-index: 999;
	max-width: 640px;
}

/*lazyLoad用 */

.cta {
    max-height: 1512px;
    height: 236.25vw;
}
.line01 {
    max-height: 916px;
    height: 143.125vw;
margin-bottom: -1px;}
.fade01 {
    max-height: 665px;
    height: 104.0625vw;
margin-bottom: -1px;}
.line02 {
    max-height: 327px;
    height: 51.09375vw;
}
.fade02 {
    max-height: 1029px;
    height: 160.78125vw;
}
.fade03 {
    max-height: 508px;
    height: 79.375vw;
}
.fade04 {
    max-height: 1203px;
    height: 187.96875vw;
}
.movie01 {
    max-height: 1158px;
    height: 180.9375vw;
}
.fade05.movie02 {
    max-height: 1076px;
    height: 168.125vw;
}
.movie03 {
    max-height: 1256px;
    height: 196.25vw;
}
.big01 {
    max-height: 733px;
    height: 114.53125vw;
}
.big02 {
    max-height: 1290px;
    height: 201.5625vw;
margin-bottom: -1px;}
.big03 {
    max-height: 472px;
    height: 73.75vw;
}
.big04 {
    max-height: 547px;
    height: 85.46875vw;
}
.fade06 {
    max-height: 1122px;
    height: 175.3125vw;
}
.fade07 {
    max-height: 597px;
    height: 93.28125vw;
}
.fade08 {
    max-height: 549px;
    height: 85.78125vw;
}
.fade09 {
    max-height: 573px;
    height: 89.53125vw;
margin-bottom: -1px;}
.big05 {
    max-height: 641px;
    height: 100.15625vw;
}
.fade10 {
    max-height: 1078px;
    height: 168.4375vw;
}
.fade11 {
    max-height: 1138px;
    height: 177.8125vw;
}
.fade12 {
    max-height: 684px;
    height: 106.875vw;
}
.big06 {
    max-height: 566px;
    height: 88.4375vw;
}
.big07 {
    max-height: 300px;
    height: 46.875vw;
}
.fade13 {
    max-height: 634px;
    height: 99.0625vw;
}
.fade14 {
    max-height: 374px;
    height: 58.4375vw;
}
.big08 {
    max-height: 358px;
    height: 55.9375vw;
}
.big09 {
    max-height: 414px;
    height: 64.6875vw;
}
.line03 {
    max-height: 370px;
    height: 57.8125vw;
}
.fade15 {
    max-height: 448px;
    height: 70vw;
}
.movie05 {
    max-height: 853px;
    height: 133.25125vw;
}
.big10 {
    max-height: 1295px
    ;height: 202.34375vw;
}
.fade16 {
    max-height: 819px;
    height: 127.96875vw;
}
.big11 {
    max-height: 1141px;
    height: 178.281255vw;
}





@media (max-width: 640px){
	.pc {
		display: none!important;
	}
	.sp {
		display: block;
	}
	a:hover {
    	opacity: 1;
    }
	body {
		font-size: 2.5vw!important;
		padding-bottom: 35.066vw;
	}
    .qa .item {
        /* margin: 7.333vw auto; */
    }
	/*ラベルホバー時*/
    .accbox label:hover {
        opacity: 1;
    }
	.accbox label {
	    font-size: 5.333vw;
	}
	.cssacc:checked + .accshow {
	    padding: 4.266vw 0;
	}
	.accbox .accshow p {
	    font-size: 4vw;
	}
	.btn.click,.btn.click span:before {
        height: 24.666vw;
        border-radius: 9.375vw;
        bottom: 2.8em;
    }
    @keyframes click {
    	0%   { transform: translateY(2.666vw); }
    	50%  { transform: translateY(0); }
    	100% { transform: translateY(2.666vw); }
    }
    .qa {
    /* margin-top: 8.133vw; */
}

}
@media (min-width: 751px){
	.pc {
		display: block;
	}
	.sp {
		display: none!important;
	}
}