@charset "UTF-8";

@media screen and (max-width: 767px) {
    /* body
	-------------------------------------------------- */
    html {
        font-size: 62.5%;
    }
    body {
        font-size: 1.4em;
        letter-spacing: 0.06em;
        min-width: inherit;
    }
    /* Responsive
	-------------------------------------------------- */
    .pc {
        display: none;
    }
    .sp {
        display: inline;
    }
	
	
    
    /*/////////////////////////////////////////////////////////////////////////////


              // layout //
	  

    /////////////////////////////////////////////////////////////////////////////*/
    
    /* section
	-------------------------------------------------- */
	.section-inner {
	    padding-right: 5.3333%;
	    padding-left: 5.3333%;
	}
    
    /*/////////////////////////////////////////////////////////////////////////////


              // common parts //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    
    /* ===============================================
        title
	=============================================== */
	/* sec-ttl
	-------------------------------------------------- */
    .sec-ttl {
        margin-bottom: 28px;
    }
    .sec-ttl-logo {
        width: 100%;
        padding: 15px 20px;
        margin: 0 auto 22px;
    }
    .sec-ttl .en-ttl {
        font-size: 1.5rem;
        padding: 0 30px;
        background-size: 20px auto;
        margin-bottom: 2px;
    }
    .sec-ttl .ttl {
        font-size: 2.8rem;
        line-height: 1.6;
    }
    .sec-ttl .ttl span {
        font-size: 1.7rem;
    }
    
    /* modtxt
    -------------------------------------------------- */
    .modtxt {
        line-height: 1.35;
    }
    .modtxt::before,
    .modtxt::after {
        height: 65%;
    }
    .modtxt::before {
        left: -25px;
    }
    .modtxt::after {
        right: -25px;
    }
    
    /* ===============================================
	    btn
	=============================================== */ 
    /* btn
	-------------------------------------------------- */
    .btn a {
        width: 100%;
        line-height: 44px;
        font-size: 1.5rem;
        padding-bottom: 3px;
    }
    .btn a::after {
        width: 12px;
        height: 12px;
        right: 20px;
        top: 50%;
    }
    .btn._large a {
        width: 85%;
        line-height: 48px;
    }
    .btn._large a::after {
        right: 20px;
    }
    .btn._small a {
        width: 85%;
        font-size: 1.4rem;
    }
    .btn._border a {
        width: 85%;
        line-height: 40px;
    }
    .btn._logo img {
        width: 100px;
        transform: translateY(-2px);
        padding-right: 5px;
    }
    .btn._short {
        margin-top: 8px;
    }
    .btn._short a {
        width: 100%;
        line-height: 30px;
        font-size: 1.2rem;
        text-align: left;
        padding: 0 15px 2px;
        box-sizing: border-box;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // header //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .header {
        width: 260px;
        height: 52px;
        padding: 3px 20px 0 10px;
        border-radius: 0 0 20px 0;
    }
    .header::before,
    .header::after {
        width: 16px;
        height: 16px;
    }
    .header::before {
        width: 16px;
        height: 16px;
        top: 20px;
        right: -16px;
    }
    .header::after {
        bottom: -16px;
        left: 10px;
    }
    .header-logo {
        width: 100%;
        padding: 0;
    }
    .header-logo a,
    .header-logo img {
        display: block;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // visual //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .visual {
        width: 100%;
        height: auto;
        min-height: inherit;
        padding: 20px 0 0 10px;
        position: relative;
    }
    .visual::before {
        content: "";
        width: 100%;
        height: 280px;
        background: #f5f5f5;
        position: absolute;
        left: 0;
        bottom: -1px;
    }
    .visual-inner {
        border-radius: 16px 0 0 16px;
    }
    .visual-slider .slick-list {
        border-radius: 16px 0 0 16px;
    }
    .visual-slider li {
        height: 123vw;
        min-height: inherit;
        border-radius: 16px;
        margin: 0 3px;
    }
    .visual-slider li::after {
        background: rgba(0,0,0,0.45);
    }
    .visual-ttl {
        width: calc(100% - 15px);
        left: 15px;
        bottom: 20px;
        padding: 0 10px 4vw 26px;
    }
    .visual-ttl::before {
        width: 1px;
        height: calc(100% - 15px);
    }
    .visual-ttl::after {
        width: calc(100% - 20px);
        height: 1px;
    }
    .visual-ttl .txt {
        font-size: 4.2vw;
    }
    .visual-ttl .txt::before {
        width: 15px;
        left: -26px;
        top: 15px;
    }
    .visual-ttl .v-keywords {
        padding: 19px 0 8px;
    }
    .visual-ttl .v-keywords li {
        padding: 5px 10px 6px;
        margin-right: 4px;
        font-size: 3.5897vw;
    }
    .visual-ttl .ttl {
        font-size: 7.4358vw;
        line-height: 1.5;
        margin-bottom: 20px;
    }
    .visual-ttl .ttl span {
        font-size: 9.7435vw;
    }
    .visual-ttl .v-logo {
        width: 63.8297%;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // MOVIE //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .sec-movie {
        padding: 35px 0 40px;
        background: #f5f5f5;
    }
    .movie-block-ttl {
        padding: 6px 10px;
        border-radius: 8px 8px 0 0;
    }
    .movie-block-ttl .ttl {
        font-size: 1.7rem;
    }
    .movie-block {
        border-radius: 0 0 8px 8px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // FEATURES //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .sec-feature {
        padding: 40px 0;
    }
    .sec-feature-ttl {
        display: block;
        padding: 0 5.3333% 25px;
        position: relative;
    }
    .sec-feature-ttl .fig {
        width: 33%;
        position: absolute;
        right: 0;
        bottom: inherit;
        top: -60px;
        z-index: 1;
        mix-blend-mode: multiply;
    }
    .sec-feature-ttl .ttl {
        width: 100%;
        margin-bottom: 10px;
    }
    .sec-feature-ttl .ttl .ttl-inner:nth-child(1) {
        font-size: 7.4358vw;
    }
    .sec-feature-ttl .ttl .ttl-inner:nth-child(1) ._red {
        font-size: 9.4871vw;
    }
    .sec-feature-ttl .ttl .ttl-inner:nth-child(2) {
        font-size: 9.7435vw;
        letter-spacing: 0.08em;
    }
    .sec-feature-ttl .lead {
        width: 100%;
        font-size: 1.5rem;
        line-height: 1.75;
        padding: 0;
    }
    .sec-feature-col2 {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        padding: 0 5.3333% 0 0;
    }
    .sec-feature-col2 .thumb {
        width: 100%;
        height :auto;
        border-radius: 0 8px 8px 0;
    }
    .sec-feature-col2 .thumb::after {
        padding-top: 66.6666%;
    }
    .sec-feature-col2 .feature-list {
        width: 100%;
        padding: 0 0 35px 5.6338%;
        box-sizing: border-box;
    }
    .sec-feature-col2 .feature-list ul li {
        padding: 20px 0;
    }
    .sec-feature-col2 .feature-list ul li .icon {
        width: 60px;
        height: 60px;
    }
    .sec-feature-col2 .feature-list ul li .txt {
        width: calc(100% - 80px);
        font-size: 1.6rem;
    }
    .sec-feature-col2 .feature-list ul li .txt ._red {
        font-size: 2.1rem;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // Point //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .sec-point {
        position: relative;
        padding: 35px 0 15px;
    }
    .sec-point::before {
        height: 460px;
        background: #f5f5f5;
    }
    .sec-point-inner {
        display: block;
        padding-left: 5.3333%;
        position: relative;
    }
    .sec-point-ttl {
        width: 100%;
        padding-right: 5.6338%;
        margin-bottom: 12px;
        box-sizing: border-box;
        position: relative;
    }
    .sec-point-ttl .subttl {
        font-size: 4.1025vw;
        margin-bottom: 8px;
    }
    .sec-point-ttl .subttl span {
        font-size: 5.6410vw;
    }
    .sec-point-ttl .subttl ._dot {
        display: inline-block;
        position: relative;
    }
    .sec-point-ttl .subttl ._dot::after {
        width: 5px;
        height: 5px;
    }
    .sec-point-ttl .balloon-ttl {
        font-size: 4.1025vw;
        padding: 5px 15px 7px;
        border-radius: 6px;
        margin-bottom: 16px;
    }
    .sec-point-ttl .balloon-ttl::after {
        border-top: 12px solid #ff0000;
        border-right: 13px solid transparent;
        bottom: -12px;
    }
    .sec-point-ttl .ttl .ttl-inner {
        display: block;
        line-height: 1.35;
    }
    .sec-point-ttl .ttl .ttl-inner:nth-child(1) {
        font-size: 6.6666vw;
        letter-spacing: 0.06em;
    }
    .sec-point-ttl .ttl .ttl-inner:nth-child(1) span {
        font-size: 4.6153vw;
    }
    .sec-point-ttl .ttl .ttl-inner:nth-child(2) {
        font-size: 9.2307vw;
        letter-spacing: 0.07em;
    }
    .sec-point-ttl .fig {
        width: 27%;
        margin-top: 0;
        position: absolute;
        right: 5.3333%;
        bottom: 0px;
    }
    .sec-point-cont {
        width: 100%;
        padding-top: 10px;
        transition: .2s;
    }
    .point-block {
        width: 82vw;
        padding: 14px;
        margin-right: 3vw;
    }
    .point-block-inner {
        padding: 20px 15px 20px;
    }
    .point-block-inner._last {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .point-block .en-ttl {
        width: 46px;
        height: 46px;
        font-size: 2.0rem;
        left: -5px;
        top: -5px;
    }
    .point-block .ttl {
        font-size: 1.8rem;
        padding: 0 0 12px;
        margin-bottom: 20px;
    }
    .point-block .subttl {
        padding: 12px 0 4px;
    }
    .point-block .subttl ._red {
        font-size: 1.8rem;
    }
    .point-block .txt {
        font-size: 1.4rem;
    }
    .point-block-last {
        padding-top: 10px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // Lineup //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .sec-lineup {
        padding: 50px 0;
    }
    .lineup-block {
        border-radius: 8px;
        padding: 35px 15px 40px;
    }
    .lineup-block .item {
        width: 110px;
        right: -8px;
        top: inherit;
        bottom: -30px;
    }
    .lineup-block-ttl {
        font-size: 2.2rem;
        padding: 0 45px;
        top: -30px;
    }
    .lineup-list {
        margin-bottom: 10px;
    }
    .lineup-list li {
        width: 50%;
        margin: -2px 0;
    }

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


              // CTA //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .sec-cta {
        padding-bottom: 50px;
    }
    
    /* cta-contents
	-------------------------------------------------- */
    .cta-contents {
        background: url("../../../images/asset/lp/online-purchase-003/cta_bg_sp.jpg") center center no-repeat;
        background-size: cover;
        padding: 40px 5.3333% 0;
    }
    .cta-contents::before {
        background: rgba(0, 0, 0, 0.32);
    }
    .cta-contents-col2 {
        margin: 0 auto;
        display: block;
    }
    .cta-main {
        width: 100%;
        text-align: center;
        padding: 0 0 30px;
    }
    .cta-main .ttl {
        font-size: 6.1538vw;
        margin-bottom: 16px;
    }
    .cta-main .cta-logo {
        width: 85%;
        margin: 0 auto 25px;
    }
    .cta-main .box {
        display: block;
        padding: 15px 10px 20px;
        margin-top: 25px;
        text-align: center;
    }
    .cta-main .box .txt {
        width: 100%;
        font-size: 1.8rem;
        margin-bottom: 8px;
    }
    .cta-main .box .btn {
        width: 92%;
        margin: auto;
    }
    .cta-side {
        width: 60%;
        margin: 0 auto -100px;
    }
    .cta-side .fig {
        position: relative;
    }
    
    /* mobox-contents
	-------------------------------------------------- */
    .mobox-contents {
        padding-top: 40px;
    }
    .mobox-contents-ttl {
        font-size: 2.2rem;
        margin-bottom: 20px;
    }
    .mobox-contents-col2 {
        display: block;
        padding: 0 26px 32px;
        border-radius: 10px;
    }
    .mobox-main {
        width: 100%;
        padding-top: 25px;
        margin-bottom: 25px;
    }
    .mobox-main .fee {
        width: 28%;
        position: absolute;
        left: inherit;
        right: -20px;
        top: -5px;
    }
    .mobox-main .subttl {
        font-size: 3.8461vw;
        line-height: 1.6;
        letter-spacing: 0.06em;
        padding-right: 60px;
        margin-bottom: 2px;
    }
    .mobox-main .ttl {
        font-size: 7.6923vw;
        letter-spacing: 0.06em;
        margin-bottom: 13px;
    }
    .mobox-feature li {
        font-size: 3.0769vw;
        border-radius: 4px;
        padding: 5px 2px 6px;
    }
    .mobox-side {
        width: 100%;
    }
    .mobox-logo {
        width: 83%;
        margin: 0 auto 16px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // FLOW //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .sec-flow {
        padding: 50px 0 40px;
        background: #f5f5f5;
    }
    .step-block {
        border-radius: 6px;
        margin-bottom: 20px;
    }
    .step-block-head {
        display: block;
        padding: 20px 20px 26px;
    }
    .step-block-head ._numb {
        width: 100%;
        margin-bottom: 10px;
        font-size: 1.5rem;
        line-height: 1.2;
    }
    .step-block-head ._numb span {
        font-size: 3.2rem;
    }
    .step-block-ttl {
        width: 100%;
        border-left: none;
        border-top: 1px solid #cccccc;
        padding: 15px 0 70px 0;
        text-align: center;
    }
    .step-block-ttl .subttl {
        font-size: 1.8rem;
        padding: 0 0 3px;
        margin-bottom: 12px;
    }
    .step-block-ttl .subttl::before,
    .step-block-ttl .subttl::after {
        border-top: 10px solid #333333;
        border-right: 13px solid transparent;
        left: 30%;
        bottom: -12px;
    }
    .step-block-ttl .subttl::after {
        border-top: 10px solid #ffffff;
        left: 30%;
        bottom: -8px;
        margin-left: 2px;
    }
    .step-block-ttl .ttl {
        font-size: 2.2rem;
        line-height: 1.5;
    }
    .step-block-ttl .ttl ._red {
        font-size: 3.0rem;
    }
    .plus {
        width: 50px;
        height: 50px;
        right: inherit;
        top: inherit;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }
    .plus::before,
    .plus::after {
        width: 16px;
        left: 17px;
        top: 24px;
    }
    .step-block-cont {
        padding: 0 20px;
        display: none;
    }
    .step-block-cont .inner {
        padding: 20px 0 40px;
    }
    .step-block-cont .lead {
        font-size: 1.6rem;
        text-align: left;
        margin-bottom: 20px;
    }
    .step-box-list {
        display: block;
    }
    .step-box-item {
        width: 100%;
        padding: 20px 15px 0;
        border-radius: 4px;
        margin-top: 15px;
    }
    .step-box-item._col1 {
        width: 100%;
        margin-top: 15px;
    }
    .step-box-item .fig {
        width: 80px;
    }
    .step-box-item .fig._icon {
        width: 55px;
    }
    .step-box-item-inner {
        width: calc(100% - 100px);
        padding-bottom: 15px;
    }
    .step-box-item .fig._icon + .step-box-item-inner {
        width: calc(100% - 65px);
        padding-bottom: 20px;
    }
    .step-box-item .check-txt {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
    .step-box-item .check-txt li {
        font-size: 1.5rem;
        padding-left: 25px;
        margin-top: 0;
        line-height: 1.6;
    }
    .step-box-item .check-txt li::before {
        width: 16px;
        height: 20px;
        top: 6px;
    }
    .step-box-item .dl-txt dt {
        font-size: 1.8rem;
        margin-bottom: 4px;
    }
    .step-box-item .dl-txt dd {
        font-size: 1.5rem;
    }
    .step-box-item .dl-txt dd .note {
        font-size: 1.5rem;
        margin-top: 1px;
    }
    .step-box-item .dl-txt dd .list-disc {
        margin-top: 0;
    }
    .step-box-item .dl-txt dd .list-disc li {
        padding-left: 10px;
        margin: 0 0 6px;
        font-size: 1.4rem;
        line-height: 1.6;
    }
    .step-box-item .dl-txt dd .list-disc li::before {
        width: 4px;
        height: 4px;
        top: 11px;
    }
    .step-box-item .dl-txt dd .list-disc li span {
        font-size: 1.6rem;
        display: block;
    }
    .step-box-btm {
        display: block;
        border-radius: 6px;
        padding: 15px 20px 20px;
        margin-top: 25px;
    }
    .step-box-btm .txt {
        width: 100%;
        font-size: 1.6rem;
        line-height: 1.6;
        text-align: center;
        padding: 0 0 8px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // REVIEW //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .sec-review {
        padding: 40px 0 50px;
    }
    .review-list {
        display: block;
    }
    .review-block {
        width: 100%;
        padding: 25px 20px;
        border-radius: 6px;
        margin-bottom: 20px;
    }
    .review-block-head {
        margin-bottom: 15px;
    }
    .review-block-head .icon {
        width: 90px;
    }
    .review-block-ttl {
        width: calc(100% - 110px);
        margin-top: 0;
    }
    .review-block-ttl .ttl {
        font-size: 1.8rem;
        margin-bottom: 5px;
    }
    .review-block-ttl .txt {
        font-size: 1.2rem;
    }
    .score-block {
        display: block;
        padding: 25px 20px 10px;
        border-radius: 6px;
    }
    .score-block-ttl {
        width: 100%;
        text-align: center;
        border-right: none;
        border-bottom: 1px solid #cccccc;
        padding: 0 0 15px;
    }
    .score-block-ttl .ttl {
        font-size: 2.4rem;
        margin-bottom: 5px;
    }
    .score-block-ttl .ttl ._red {
        display: block;
        font-size: 4.2rem;
        line-height: 1.2;
    }
    .score-block-ttl .ttl ._red span {
        font-size: 2.4rem;
    }
    .score-block-ttl .ttl ._red span::before {
        top: -8%;
    }
    .score-block-cont {
        width: 100%;
        padding: 0;
    }
    .score-list {
        display: block;
    }
    .score-list-item {
        width: 100%;
        text-align: center;
        margin: 20px 0 25px;
    }
    .score-list-item .txt {
        line-height: 1.5;
    }
    .score-list-item .txt span {
        font-size: 1.8rem;
        font-weight: 700;
    }
    .score-list-item .icon {
        width: 180px;
        margin: 8px auto 0;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // footer //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .footer {
        margin-top: -20px;
    }
    
    /* ft-info
    -------------------------------------------------- */
    .ft-info {
        margin-bottom: 30px;
    }
    .ft-info .ft-logo {
        width: 90%;
        margin: 0 auto 10px;
    }
    .ft-info dl dd {
        font-size: 1.2rem;
    }
    
    /* ft-btm
    -------------------------------------------------- */
    .ft-btm {
        padding: 30px 0 40px;
    }
    .ft-nav {
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 1.3rem;
    }
    .ft-nav li {
        width: 49%;
        margin: 5px 0;
    }
    
    /* copyright
    -------------------------------------------------- */
    .copyright {
        text-align: left;
        font-size: 1.0rem;
        padding: 25px 120px 25px 20px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // fixed-cta //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .fixed-cta {
        right: 6px;
        bottom: 6px;
    }
    .fixed-cta a {
        width: 100px;
        height: 100px;
        padding: 8px 6px;
        background-position: center bottom 12px;
        background-size: 10px auto;
    }
    .fixed-cta a .txt {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }
    .fixed-cta a .ttl {
        font-size: 1.0rem;
    }
    .fixed-cta a .ttl span {
        font-size: 1.4rem;
        padding: 4px 0 7px;
        margin-bottom: 1px;
        white-space: nowrap;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // Slider //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    /* Arrows */
    .slick-prev,
    .slick-next {
        width: 46px;
        height: 46px;
    }
    .slick-next {
        left: 54px;
    }
    
    /* Dots */
    .slick-dotted.slick-slider {
        padding-bottom: 61px;
    }
    .slick-dots {
        left: 125px;
        width: calc(94% - 125px);
        height: 3px;
    }
    .slick-dots li {
        position: relative;
        width: 25%;
        height: 3px;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer;
    }
    .slick-dots li.slick-active button {
        transform: scaleX(1);
    }
    .slick-dots li:nth-child(1):has(+ .slick-active) button,
    .slick-dots li:nth-child(1):has(+ li + .slick-active) button,
    .slick-dots li:nth-child(1):has(+ li + li + .slick-active) button,
    .slick-dots li:nth-child(2):has(+ .slick-active) button,
    .slick-dots li:nth-child(2):has(+ li + .slick-active) button,
    .slick-dots li:nth-child(3):has(+ .slick-active) button {
        transform: scaleX(1);
    }
    
    
}