@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 {
	display: block;
}
video {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/*fv*/
.movie01 .on.item {
    max-width: 520px;
    width: 69%;
    margin-left: 0;
}
.movie01 .on.movie {
    max-width: 282px;
    width: 15em;
    overflow: hidden;
    height: 37.5vw;
    max-height: 240px;
    border-radius: 50%;
    right: 4.4%;
    left: auto;
    bottom: 8.3%;
    margin: 0 0;
}
/*cta*/
.cta {
    position: relative;
}
.fv .cta {
    margin-top: -2.2em;
}
.cta .price {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 21.1em;
    opacity: 1;
}
.fv .cta .price {
    bottom: 22.5em;
}
.cta .price.show.is-show {
    animation: big 0.5s 0.3s ease-out;
	transition: all 0s;
}
.btn.click {
    margin: 0 auto;
    height: 135.8px;
    max-width: 590px;
    width: 78.6%;
    overflow: hidden;
    z-index: 1;
    border-radius: 0.9em 0.9em;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4.4em;
    filter: drop-shadow(0 0.6em 0.4em rgba(0,0,0,0.4));
}
.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: 100.8%;
    background-color: #258038;
    border-radius: 0.9em;
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    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;
    }
.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,.line.vt p.is-show .border:after {
    transform: scale(1, 1);
}

/*縦線*/
.line.vt p .border {
    height: 100%;
    right: 0;
    left: auto;
    width: 0.375em;
}
.line.vt p .border:after {
    height: 100%;
    width: 0.375em;
    background-color: #e09494;
    z-index: 1;
    border-radius: 0;
    transform: scale(1, 0);
}

/*フェード*/
.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;
	transition: all 0s;
}
@keyframes big {
	0%   { transform: scale(1.0, 1.0);
	 }
	50%   { transform: scale(1.3, 1.3);
	 }
}

/*article01*/
.article01 .fade01 .fade {
	bottom: 10%;
}
.article01 .fade02 .fade {
    bottom: 17.8em;
}
.article01 .big01 .big {bottom: 2.5em;}
.article01 .big02 .item01 {
    margin: 0 auto 4.8em;
}
.article01 .fade03 .fade {
    top: 0.3em;
}
.article01 .fade03 .fade > p {
    max-width: 214px;
    width: 28.53%;
    position: absolute;
}
.article01 .fade03 .fade .item01 {
    left: 3em;
    transition-delay: 0.3s;
}
.article01 .fade03 .fade .item02 {
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 4.7em;
    transition-delay: 0.3s;
}
.article01 .fade03 .fade .item03 {
    right: 3em;
    transition-delay: 0.7s;
}
.article01 .fade04 .fade {
    top: 19.3em;
}
.article01 .fade04 .fade .item01 {
    z-index: 1;
    position: relative;
}
.article01 .movie02 .movie {
    max-width: 700px;
    max-height: 382px;
    width: 93%;
    height: 59.6vw;
    overflow: hidden;
    right: 0;
    left: 0;
    margin: 0 auto;
    bottom: 6em;
}
.article01 .movie02 .movie video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    width: 102%; /*動画カット前サイズ 211%*/
}
.article01 .big03 .big .item01 {
    margin: 0 auto 3.2em;
}
.article01 .big04 .big {
    bottom: 9.4em;
}


/* article02 */
.article02 .big05 .big {
    max-width: 480px;
    width: 64%;
    right: 0;
    left: auto;
    bottom: 2.3em;
}
.article02 .line01 .line, .article02 .line02 .line, .article02 .line03 .line {
    width: 100%;
    height: 100%;
}
.article02 .line01 .line,.article02 .line03 .line {
    left: 2.8em;
}
.article02 .line02 .line {
	right: 3.7em;
	left: auto;
}
.article02 .line01 .line > p,.article02 .line02 .line > p,.article02 .line03 .line > p {
    max-width: 98px;
    width: 13%;
    position: absolute;
    top: 5.1em;
    }
.article02 .line > p:nth-child(2) .border:after {
    transition-delay: 0.8s;
}
.article02 .line01 .line .item01,.article02 .line03 .line .item01 {
    left: 5.2em;
}
.article02 .line02 .line > p {
	right: 0;
	top: 7.3em;
	max-width: 112px;
	width: 14.9%;
}
.article02 .line02 .line .item02 {
	right: 5.9em;
}
.article02 .line03 .line > p {
	top: 9.4em;
}
.article02 .big06 .big {
    bottom: 1.7em;
}
.article02 .fade05 .fade {
    bottom: 0.4em;
}
.article02 .fade05 .on {
}

/* article03 */
.article03 .line04 .line {
    width: 72.8%;
    max-width: 546px;
    left: 3.9em;
    top: 4.2em;
    margin: 0;
}
.article03 .line04 p .border:after {
    content: '';
    height: 0.85em;
    background: url(../simg/line04.png) repeat-x left;
    border-radius: 0;
}
.article03 .fade06 .fade {
	bottom: 5.3em;
}
.article03 .fade06 .item02 {
    transition-delay: 0.3s;
}
.article03 .big07 .big {
    bottom: 2.4em;
}
.article03 .fade07 .fade {
    bottom: auto;
    max-width: 180px;
    width: 24%;
    left: 11em;
    top: 5.6em;
}
.article03 .fade07 .fade .item01 {
    transition-delay: 0.3s;
}
.article03 .fade08 .fade {
    top: 1.5em;
    bottom: auto;
}
.article03 .fade08 .on {
    top: 0;
    bottom: auto;
}
.article03 .fade08 .on > p {
    position: absolute;
}
.article03 .fade08 .on .item01 {
    max-width: 230px;
    width: 30.6%;
    right: 0;
    top: -7.6em;
}
.article03 .fade08 .on .item02 {
    max-width: 270px;
    width: 36%;
    top: 10.1em;
}
.article03 .big08 .big {
    max-width: 250px;
    width: 33.3%;
    right: 0;
    left: auto;
    top: 2.9em;
}
.article03 .movie03 .on.movie {
    max-width: 290px;
    width: 15.5em;
    overflow: hidden;
    height: 15.5em;
    max-height: 290px;
    border-radius: 50%;
    left: 3.7em;
    bottom: 6.7%;
    margin: 0 0;
}
.article03 .movie03 .on {
    max-width: 230px;
    width: 30.6%;
    left: 7em;
    bottom: 2.7em;
}
.article03 .big09 .big {
    bottom: 6.5em;
}
.article03 .fade09 .fade {
    max-width: 210px;
    width: 28%;
    margin: 0;
    left: 4.6em;
    bottom: 3.9em;
}
.article03 .line08 .line {
    max-width: 480px;
    width: 64%;
    top: 0;
    right: 0;
    left: auto;
}
.article03 .line08 .line .border {
    max-width: 140px;
    width: 29%;
    height: 88%;
    top: 5%;
    right: 10.1em;
    transform: skewY(-17deg);
}
.article03 .line08 .line .border:after {
    width: 100%;
    background-color: rgba(187,55,69,0.3);
}

.article03 .big10 .big {
    max-width: 422px;
    width: 56.26%;
    margin: 0;
    left: 7em;
    bottom: 2.9em;
}
.article03 .fv .cta {
    margin-top: 1em;
}


/* article04 */
.article04 .fade10 .fade {
    bottom: 1.8em;
}
.article04 .big11 .big {
    bottom: 1em;
}
.article04 .fade11 .fade,.article04 .fade13 .fade {
	top: auto;
	bottom: 0;
	width: 100%;
}
.article04 .fade11 .fade > p {
	position: absolute;
	width: 80.5%;
	max-width: 604px;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: 0.9em;
	transition-delay: 0.3s;
}
.article04 .fade11 .fade .item02,.article04 .fade13 .fade .item02 {
	transition-delay: 0.6s;
}
.article04 .fade11 .fade .item03,.article04 .fade13 .fade .item03 {
    transition-delay: 1s;
}
.article04 .line05 .line p .border {
    height: 0.1875em;
    max-width: 600px;
    width: 80%;
}
.article04 .line05 .line p .border:after {
    border-radius: 0;
    height: 0.1875em;
    background-color: #b42445;
}
.article04 .line05 .line .item01 {
    bottom: 7.35em;
}
.article04 .line05 .line .item01 .border:after {
    max-width: 440px;
    width: 73%;
    margin: 0 0 0 auto;
}
.article04 .line05 .line .item02 {
    bottom: 4.15em;
}
.article04 .line05 .line .item02 .border:after {
    transition-delay: 0.3s;
}
.article04 .line05 .line .item03 {
    bottom: 0.9em;
}
.article04 .line05 .line .item03 .border:after {
    max-width: 300px;
    width: 50%;
    margin: 0 auto 0 0;
	transition-delay: 0.6s;
}
.article04 .fade12 .fade {
	max-width: 298px;
	width: 39.73%;
	left: auto;
	right: 0;
	bottom: 15.7em;
}
.article04 .fade12 .fade .item01 {
    transition-delay: 0.8s;
}
.article04 .big12 .big {
    bottom: 0.6em;
}
.article04 .fade13 .fade > p {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    transition-delay: 0.3s;
}
.article04 .fade13 .fade .item01 {
    z-index: 1;
}


/* article05 */
.article05 .fade14 .fade {
    top: 14.7em;
}
.article05 .movie04 .on {
    max-width: 550px;
    width: 73.333%;
    left: auto;
    right: -0.1em;
    bottom: 5em;
}
.article05 .movie04 .shadow {
    filter: drop-shadow(0 0 1em rgba(0,0,0,0.5));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
.article05 .movie04 .on.movie {
    max-width: 570px;
    width: 77%;
    max-height: 658px;
    height: 51%;
    overflow: hidden;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    left: 0;
    bottom: auto;
}
.article05 .fade15 .fade {
    bottom: 6.1em;
}
.article05 .fade15 .fade .item01 {
    transition-delay: 0.3s;
}
.article05 .big13 .big {
    max-width: 300px;
    width: 40%;
    left: auto;
    right: 3.1em;
}
.article05 .fade16 .fade > p {
    position: absolute;
    bottom: 5.7em;
    transition-delay: 0.5s;
}
.article05 .fade16 .fade {
    width: 100%;
    height: 100%;
}
.article05 .fade16 .fade .item02 {
    z-index: 1;
}
.article05 .fade16 .fade .item03 {
    transition-delay: 0.8s;
}
.article05 .big14 .big {
    top: 0.8em;
}
.article05 .fade17 .fade {
    max-width: 202px;
    width: 26.93%;
    bottom: 3.5em;
}
.article05 .fade18 .fade {
    max-width: 342px;
    width: 45.6%;
    left: 3.5em;
    bottom: 1em;
    margin: 0;
}
.article05 .movie05 .on {
    margin: 0 auto;
    max-width: 700px;
    width: 93.3%;
    max-height: 370px;
    height: 56.2%;
    bottom: 14.4em;
    overflow: hidden;
}
.youtube {
  /* position: relative; */
  width: 100%;
  padding-top: 50.6%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.article05 .big15 .big {
    bottom: 9.1em;
}


/* article06 */
.article06 .big16 .big {
    bottom: 0.4em;
}
.article06 .line06 .on,.article06 .line07 .on {
    z-index: 1;
}
.article06 .line06 .on {
    bottom: 0.6em;
}
.article06 .line06 .line > p,.article06 .line07 .line > p {
    max-width: 620px;
    width: 82.66%;
    margin: 0 auto;
}
.article06 .line06 .line > p .border,.article06 .line07 .line > p .border {
    height: 1.1875em;
}
.article06 .line06 .line .item01 .border {
    width: 25.8em;
    bottom: 7em;
    margin: 0;
}
.article06 .line06 .line .item02 .border {
    width: 8.4em;
    bottom: 0.7em;
    left: 7em;
    margin: 0;
}
.article06 .line06 .line > p .border:after,.article06 .line07 .line > p .border:after {
	background-color: #fff280;
	height: 1.1875em;
	border-radius: 0;
}
.article06 .line06 .line .item02 .border:after {
    transition-delay: 0.5s;
}
.article06 .line07 .line .item02 .border:after {
    transition-delay: 0.5s;
}
.article06 .line07 .line .item03 .border:after {
    transition-delay: 0.8s;
}
.article06 .movie06 .movie {
    max-width: 700px;
    width: 93.33%;
    max-height: 382px;
    height: 83%;
    overflow: hidden;
    bottom: 4.1em;
}
.article06 .fade19 .fade {
    max-width: 200px;
    width: 26.66%;
    bottom: 6.1em;
}
.article06 .big17 .big {
    bottom: 0.4em;
}
.article06 .line07 .on {
    bottom: 2.6em;
}
.article06 .line07 .line .item01 .border {
    width: 10.7em;
    left: 17.7em;
    bottom: 15.4em;
    margin: 0;
}
.article06 .line07 .line .item02 .border {
    width: 8.7em;
    bottom: 8.7em;
    left: auto;
    right: -0.2em;
    margin: 0;
}
.article06 .line07 .line .item03 .border {
    width: 17.8em;
    bottom: 5.5em;
    left: 0;
    margin: 0;
}
.article06 .fade20 .fade {
    width: 100%;
    height: 100%;
}
.article06 .fade20 .fade > p {
    max-width: 250px;
    width: 33.33%;
    position: absolute;
	transition-delay: 0.3s;
}
.article06 .fade20 .fade .item01 {
    right: 9.3em;
}
.article06 .fade20 .fade .item02 {
    top: 5.3em;
    left: 4.1em;
}
.article06 .fade20 .fade .item03 {
    top: 11.8em;
    right: 1.9em;
}
.article06 .fade20 .fade .item04 {
    bottom: 13.9em;
    left: 3.2em;
}
.article06 .fade20 .fade .item05 {
    bottom: 8.2em;
    right: 8em;
}
.article06 .fade20 .on {
    max-width: 250px;
    width: 33.33%;
    bottom: 4.8em;
    margin: 0;
    left: 11.1em;
}
.article06 .movie07 .movie {
    max-width: 700px;
    width: 90%;
    overflow: hidden;
    bottom: 2.8em;
}

/* article07 */
.article07 .big18 .big {
    max-width: 400px;
    width: 53.33%;
    bottom: 2.2em;
    left: 3.1em;
    margin: 0;
}
.article07 .big19 .big {
    bottom: 2.1em;
}
.article07 .fade21 .fade {
    width: 100%;
    height: 100%;
}
.article07 .fade21 .fade > p {
    position: absolute;
}
.article07 .fade21 .fade .item01 {
    top: 12.8em;
}
.article07 .fade21 .fade .item02 {
    bottom: 2.1em;
    transition-delay: 0.3s;
}

/* footer */
.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用 */

.movie01 {
    max-height: 1117px;
    height: 174.5vw;
}
.cta {
    max-height: 1228px;
    height: 191.8vw;
}
.fv .cta {
    max-height: 1713px;
    height: 267.6vw;
}
.cta.lst {
    max-height: 1138px;
    height: 177.8vw;
}
.fade01 {
    max-height: 460px;
    height: 71.875vw;
    /* margin-bottom: -1px; */
    }
.fade02 {
    max-height: 674px;
    height: 105.3vw;
}
.fade03 {
    max-height: 354px;
    height: 55.3125vw;
}
.fade04 {
    max-height: 853px;
    height: 133.2vw;
}
.big01 {
    max-height: 264px;
    height: 41.25vw;
}
.big02 {
    max-height: 324px;
    height: 50.625vw;
    /* margin-bottom: -1px; */
    }


.line01 {
    max-height: 593px;
    height: 92.6vw;
    /* margin-bottom: -1px; */
    }
.line02 {
    max-height: 691px;
    height: 107.9vw;
}
.line03 {
    max-height: 701px;
    height: 109.5vw;
}
.line04 {
    max-height: 361px;
    height: 56.4vw;
}
.fade05 {
    max-height: 614px;
    height: 95.9vw;
}
.big03 {
    max-height: 520px;
    height: 81.25vw;
}
.big04,.big15 {
    max-height: 491px;
    height: 76.7vw;
}
.fade06 {
    max-height: 593px;
    height: 92.6vw;
}
.fade07 {
    max-height: 680px;
    height: 106.25vw;
}
.fade08 {
    max-height: 987px;
    height: 154.2vw;
}
.fade09 {
    max-height: 744px;
    height: 116.25vw;
    }
.big05 {
    max-height: 418px;
    height: 65.3vw;
}
.fade10 {
    max-height: 409px;
    height: 63.9vw;
}
.fade11 {
    max-height: 469px;
    height: 73.2vw;
}
.line05 {
    max-height: 657px;
    height: 102.6vw;
    margin-bottom: -1px;
}
.fade12 {
    max-height: 459px;
    height: 71.7vw;
}
.big06,.big19 {
    max-height: 348px;
    height: 54.375vw;
}
.big07 {
    max-height: 442px;
    height: 69vw;
    margin-bottom: -1px;
}
.fade13 {
    max-height: 494px;
    height: 77.18vw;
}
.fade14 {
    max-height: 612px;
    height: 95.625vw;
}
.big08 {
    max-height: 786px;
    height: 122.8vw;
}
.big09 {
    max-height: 735px;
    height: 114.8vw;
}
.fade15 {
    max-height: 733px;
    height: 114.53vw;
}
.movie04 {
    max-height: 1109px;
    height: 173.28vw;
}
.movie05 {
    max-height: 563px;
    height: 87.96vw;
}
.big10 {
    max-height: 426px;
    height: 66.56vw;
}
.fade16 {
    max-height: 476px;
    height: 74.375vw;
}
.big11 {
    max-height: 384px;
    height: 60vw;
}
.big12 {
    max-height: 341px;
    height: 53.28vw;
}
.big13 {
    max-height: 810px;
    height: 126.56vw;
    z-index: 1;
}
.big14 {
    max-height: 298px;
    height: 46.56vw;
}
.fade17 {
    max-height: 494px;
    height: 77.18vw;
}
.fade18 {
    max-height: 409px;
    height: 63.9vw;
}
.big16 {
    max-height: 754px;
    height: 117.8vw;
}
.line06 {
    max-height: 230px;
    height: 35.93vw;
    margin-bottom: -1px;
}
.movie06 {
    max-height: 394px;
    height: 61.56vw;
}
.fade19 {
    max-height: 631px;
    height: 98.5vw;
}
.big17 {
    max-height: 332px;
    height: 51.875vw;
}
.line07 {
    max-height: 302px;
    height: 47.18vw;
    margin-bottom: -1px;
}
.fade20 {
    max-height: 740px;
    height: 115.625vw;
}
.movie07 {
    max-height: 709px;
    height: 110.7vw;
}
.big18 {
    max-height: 273px;
    height: 42.65vw;
}
.fade21 {
    max-height: 1152px;
    height: 180vw;
}



@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; */
	}
	.btn.click,.btn.click span:before {
        height: 21.2vw;
        border-radius: 2.25vw;
        bottom: 4.9em;
    }
    @keyframes click {
    	0%   { transform: translateY(2.666vw); }
    	50%  { transform: translateY(0); }
    	100% { transform: translateY(2.666vw); }
    }
}
@media (min-width: 751px){
	.pc {
		display: block;
	}
	.sp {
		display: none!important;
	}
}