@charset "UTF-8";

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


              // layout //
	  

    /////////////////////////////////////////////////////////////////////////////*/
    
    /* section
	-------------------------------------------------- */
    .section-inner {
        padding: 0 20px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // common parts //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    
	/* sec-ttl
	-------------------------------------------------- */
    .sec-ttl {
        text-align: center;
        font-weight: 700;
        line-height: 1.5;
        position: relative;
        z-index: 1;
    }
    .sec-ttl .subttl {
        font-size: 2.0rem;
    }
    .sec-ttl .ttl {
        font-size: 3.2rem;
    }
    .sec-ttl .ttl ._stroke {
        -webkit-text-stroke: 3px #111111;
        text-stroke: 3px #111111;
    }
    .sec-ttl .en-ttl {
        font-size: 9.0rem;
        top: -30px;
    }
    .sec-ttl ._lightning::after {
        width: 31px;
        height: 30px;
    }
    /* ---- sec-point-top ---- */
    .sec-point-top .sec-ttl ._lightning::after {
        right: -24px;
        top: -10px;
    }
    /* ---- sec-why ---- */
    .sec-why .sec-ttl {
        display: block;
        padding: 0 0 5px;
    }
    .sec-why .sec-ttl::after {
        font-size: 10.0rem;
        right: -38px;
        top: -22px;
        z-index: -1;
    }
    .sec-why .sec-ttl ._lightning::after {
        right: -16px;
        top: -18px;
    }
    /* ---- sec-voice ---- */
    .sec-voice .sec-ttl ._lightning::after {
        left: -26px;
        top: -20px;
    }
    /* ---- sec-flow ---- */
    .sec-flow .sec-ttl .subttl {
        margin-bottom: 10px;
    }
    
    /* sec-txt
    -------------------------------------------------- */
    .sec-txt {
        font-size: 1.8rem;
        letter-spacing: 0.04em;
        padding-top: 15px;
    }
    
    /* font
    -------------------------------------------------- */
    .note {
        font-size: 1.1rem;
        line-height: 1.5;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // header //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .header {
        padding: 0 12px;
        position: relative;
    }
    .header-inner {
        height: 56px;
    }
    .header-logo {
        max-width: 173px;
        width: 49.2877%;
        padding: 15px 0;
    }
    .header-btn {
        padding: 10px 0;
        width: 44.1594%;
        max-width: 155px;
    }
    .header-btn a {
        width: 100%;
        font-size: 1.3rem;
    }
    .header-btn a::before {
        height: calc(100% + 3px);
        bottom: -4px;
    }
    .header-btn a span {
        line-height: 30px;
        padding: 0 4px 2px 0;
    }
    .header-btn a span::after {
        width: 12px;
        height: 12px;
        right: 8px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // visual //
	  

	/////////////////////////////////////////////////////////////////////////////*/
        .visual {
          padding-top: 0;
          height:calc(940/750 * 100vw);
          background: url(../images/mv_sp.png) center top/100% auto no-repeat;
        }
    .notes-list {
        padding: 0 12px 0 20px;
    }
    .notes-list li {
        font-size: 1.0rem;
        padding-left: 25px;
        position: relative;
    }
    .notes-list li span {
        position: absolute;
        left: 0;
        top: 0;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // POINT //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    
    /* sec-point-top
	-------------------------------------------------- */
    .sec-point-top {
        background-size: 26px auto;
        padding: 40px 0 0;
    }
    .point-top-list {
        flex-wrap: wrap;
        padding: 18px 0 50px;
    }
    .point-top-list .block {
        width: calc(50% + 10px);
        margin: 0 -5px;
    }
    .point-top-list .block:nth-child(1) {
        margin: 0 0 -32px;
    }
    .point-top-list .block-inner {
        padding-bottom: 5px;
    }
    .point-top-list .block:nth-child(1) .block-inner {
        padding-bottom: 10px;
    }
    .point-top-list .block-inner .txt {
        font-size: 1.5rem;
    }
    .point-top-list .block-inner .txt ._large {
        line-height: 1.3;
    }
    .point-top-list .block-inner .txt ._en {
        transform: translateY(1px);
    }
    .point-top-list .block-inner .icon {
        width: 34px;
        margin: 0 auto 5px;
    }
    
    /* sec-chara
	-------------------------------------------------- */
    .sec-chara {
        padding: 20px;
    }
    .chara-block {
        padding: 15px 18px 18px;
        display: block;
        border-radius: 8px;
        position: relative;
    }
    .chara-block .chara {
        width: 75px;
        padding-left: 0;
        position: absolute;
        left: 20px;
        top: -9px;
    }
    .chara-block .block-inner {
        width: 100%;
    }
    .chara-block .ttl {
        font-size: 1.6rem;
        line-height: 1.3;
        background-size: 8px auto;
        padding: 0 0 20px 84px;
        margin-bottom: 8px;
    }
    .chara-block ._zen {
        font-size: 1.3rem;
        letter-spacing: -0.08em;
    }
    
    /* sec-why
	-------------------------------------------------- */
    .sec-why {
        padding: 40px 0 45px;
        overflow: hidden;
    }
    .why-list {
        padding: 16px 0;
    }
    .why-list::before {
        border-top: 19px solid #1c5fac;
        border-left: 17px solid transparent;
        border-right: 17px solid transparent;
    }
    .why-list::after {
        width: 38px;
        height: 38px;
        background-size: 18px auto;
    }
    .why-block {
        width: calc(50% + 6px);
        margin: 0 -3px;
    }
    .why-block .inner {
        z-index: 4;
    }
    .why-block .inner .txt {
        font-size: 1.5rem;
    }
    
    /* sec-secret
    -------------------------------------------------- */
    .sec-secret {
        padding: 32px 0 26px;
    }
    .secret-ttl {
        padding-bottom: 20px;
    }
    .secret-ttl .subttl {
        max-width: 266px;
        padding-left: 18px;
    }
    .secret-ttl .ttl {
        font-size: 2.4rem;
    }
    .secret-ttl .ttl ._en {
        transform: translateY(2px);
    }
    .point-block {
        background-size: 20px auto;
        padding: 26px 20px 32px;
        border-radius: 8px;
        display: block;
        margin-bottom: 24px;
    }
    .point-block .cont {
        width: 100%;
        padding-bottom: 18px;
    }
    .point-block .cont .numb {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }
    .point-block .cont .ttl {
        font-size: 2.4rem;
        margin-bottom: 12px;
    }
    .point-block .side {
        width: 100%;
    }
    .point-block .side .txt {
        border-radius: 8px;
        padding: 7px 10px 9px;
        margin-bottom: 18px;
        letter-spacing: 0.04em;
    }
    .point-block .side .txt::after {
        border-top: 10px solid #1c5fac;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        bottom: -10px;
    }
    .point-block .side .txt p {
        font-size: 1.5rem;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // CTA //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .sec-cta {
        background-size: 30px auto;
        border-bottom: 2px solid #333333;
        border-top: 2px solid #333333;
        padding: 22px 0;
        overflow: hidden;
    }
    .sec-cta .ttl {
        display: inline-block;
        max-width: 220px;
        margin-bottom: 0;
        margin-left: 8px;
    }
    .cta-btn {
        margin-bottom: 24px;
    }
    .cta-btn a {
        width: 100%;
    }
    .cta-btn a .btn {
        width: 94%;
        font-size: 1.3rem;
        margin: auto;
    }
    .cta-btn a .btn::before {
        height: calc(100% + 4px);
        bottom: -6px;
    }
    .cta-btn a .btn > span {
        line-height: 1.4;
        padding: 13px 0;
    }
    .cta-btn a .btn ._large {
        display: block;
        font-size: 2.0rem;
        transform: none;
        padding-left: 0;
    }
    .cta-btn a .txt {
        width: 25.7%;
        left: -10px;
    }
    .cta-btn a .chara {
        width: 28.655%;
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
        animation: rotation-sp 2s infinite forwards;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // VOICE //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .sec-voice {
        padding: 68px 0 0;
    }
    .voice-list {
        display: block;
        padding: 30px 0 0;
    }
    .voice-block {
        width: 100%;
        padding: 24px 20px 22px;
        border-radius: 8px;
        margin-bottom: 24px;
    }
    .voice-block .inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
    }
    .voice-block:nth-child(2n) .inner {
        flex-direction: row-reverse;
    }
    .voice-block .icon {
        width: 40.6779%;
        margin: 0;
    }
    .voice-block .ttl-cont {
        width: 53%;
    }
    .voice-block .ttl-cont .ttl {
        font-size: 2.0rem;
        letter-spacing: 0.04em;
    }
    .voice-block .ttl-cont .info {
        font-size: 1.2rem;
    }
    .sec-voice .sec-txt {
        font-size: 2.0rem;
        line-height: 1.5;
        padding-top: 10px;
    }
    .voice-btm-chara {
        width: 93.15%;
        margin: 15px auto -2px;
        padding-left: 3px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // FLOW //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .sec-flow {
        padding: 40px 0 0;
    }
    .bg-ttl {
        font-size: 6.0rem;
        letter-spacing: 0.10em;
        top: 36px;
    }
    .flow-list {
        width: 100%;
        margin: auto;
        padding: 55px 0 20px;
    }
    .flow-list::before {
        width: 2px;
        height: calc(100% - 250px);
        top: 120px;
    }
    .flow-block {
        border-radius: 8px;
        padding: 36px 20px 24px;
        margin-bottom: 60px;
    }
    .flow-block .numb {
        min-width: 40px;
        font-size: 2.4rem;
        line-height: 73px;
        -webkit-text-stroke: 4px #fa8200;
        text-stroke: 4px #fa8200;
        top: -35px;
    }
    .flow-block .ttl {
        font-size: 2.4rem;
        margin-bottom: 5px;
    }
    .flow-block .txt {
        margin-bottom: 4px;
    }
    
    /* sec-attention
    -------------------------------------------------- */
    .sec-attention {
        padding: 66px 0 30px;
    }
    .sec-attention::before {
        border-top: 50px solid #edf6ff;
    }
    .attention-chara {
        width: 95%;
        margin: 0 auto 24px;
        text-align: left;
    }
    .attention-chara .txt {
        font-size: 1.1rem;
    }
    .attention-block {
        border: 1px solid #1c5fac;
        border-radius: 8px;
    }
    .attention-block .ttl span {
        font-size: 1.6rem;
        line-height: 32px;
        padding: 0 24px 2px;
        background-size: 16px auto;
    }
    .attention-block-inner {
        display: block;
        padding: 20px 20px 24px;
    }
    .attention-block .cont {
        width: 100%;
        padding-bottom: 18px;
    }
    .attention-block .cont .subttl {
        font-size: 1.6rem;
        padding-bottom: 8px;
        text-align: center;
    }
    .attention-block .cont .txt {
        padding-right: 0;
    }
    .attention-block .fig {
        width: 100%;
    }
    .attention-detail {
        padding-top: 24px;
    }
    .attention-detail-btn {
        font-size: 1.6rem;
        padding: 12px 10px 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .attention-detail-list {
        display: block;
    }
    .attention-detail-list li {
        width: 100%;
        margin-bottom: 20px;
    }
    .attention-detail-list li .ttl {
        font-size: 2.0rem;
        margin-bottom: 8px;
        background-size: 16px auto;
        padding-left: 26px;
    }
    
    /* plus
    -------------------------------------------------- */
    .plus {
        width: 16px;
        height: 16px;
        right: 16px;
    }
    .plus::before,
    .plus::after {
        width: 8px;
        left: 4px;
        top: 7px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // FAQ //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .sec-faq {
        padding: 68px 0 50px;
    }
    .faq-list {
        padding: 50px 0 24px;
    }
    .faq-block {
        padding-bottom: 16px;
    }
    .faq-block .question {
        padding: 12px 40px 13px 44px;
        border-radius: 8px;
    }
    .faq-block .question ._en {
        font-size: 3.2rem;
        left: 14px;
    }
    .faq-block .question .txt {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.5;
    }
    .faq-block .question .plus {
        right: 16px;
    }
    .faq-block .answer {
        padding: 0 0 16px;
    }
    .faq-block .answer p {
        margin-top: 16px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // footer //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .footer-section {
        padding: 0 16px 100px;
    }
    .footer-wrap {
        display: block;
        padding: 64px 0 calc(64/750 * 100vw) 0;
    }
    .footer-sitemap {
        display: block;
        margin-top: 40px;
    }
    .footer-sitemap-item {
        margin-top: 16px;
    }
    .footer-sns {
        gap: 20px;
    }
    .footer-sns img {
        width: 32px;
        height: 32px;
    }
    .footer-copyright {
        margin-top: 40px;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // fixed-cta //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .fixed-cta {
        background-size: 30px auto;
    }
    .fixed-cta-inner {
        width: 100%;
        position: relative;
    }
    .fixed-cta-btn {
        padding: 15px 0 0 10px;
    }
    .fixed-cta-btn a {
        width: 52%;
    }
    .fixed-cta-btn a::before {
        height: calc(100% + 4px);
        bottom: -6px;
    }
    .fixed-cta-btn a > span {
        font-size: 1.2rem;
        line-height: 1.3;
        padding: 12px 10px;
    }
    .fixed-cta-btn a > span::after {
        width: 16px;
        height: 16px;
        right: 14px;
    }
    .fixed-cta-btn a > span ._large {
        display: block;
        font-size: 2.0rem;
        transform: none;
        padding-left: 0;
    }
    .fixed-cta-chara {
        width: 41.3333%;
        right: 0;
        bottom: 0;
    }
    
    /*/////////////////////////////////////////////////////////////////////////////


              // colorbox //
	  

	/////////////////////////////////////////////////////////////////////////////*/
    .modal::after {
        width: 28px;
        height: 28px;
        right: 5px;
        top: 5px;
    }
    .btn-culm {
        width: 78.6666666667vw;
        margin: 0 auto;
        display: block;
      }
      .cta-btn {
          font-weight: 600;
          line-height: 1.3em;
          padding-top: 3.133333vw;
          width: 78.6666666667vw;
          height: 11.666667vw;
          font-size: 4.3vw;
          -webkit-box-shadow: 0px 2.1333333333vw 0px 0px #000000;
          box-shadow: 0px 2.1333333333vw 0px 0px #000000;
        }
        .cta-btn .cta-btn-stxt {
          font-size: 3.4666666667vw;
        }
        .cta-btn .fa-circle-chevron-right {
            right: 1.4vw;
            width: 5.3333333333vw;
            top: 33%;
        }
        .btn-sttl {
          font-size: 5.0666666667vw;
          margin-bottom: 4.2666666667vw;
        }
        .btn-ttl-box{
            width: calc(600/750 * 100vw); 
            margin-bottom: calc(24/750 * 100vw);
         }
         .btn-ttl-box .btn-badge{
            max-width: 100px;
            width: 100%;
        }
        .cta-btn > p::after{
            right: calc(30 / 750* 100vw);
        }

        .fixed-cta .cta-btn {
           height: calc(72/750 * 100vw);
            width: 43.2vw;
            font-size: 2.9333333333vw;
          }
          .fixed-cta .btn-sttl {
            margin-bottom: 0.6vw;
            font-size: 3.4666666667vw;
          }
          .fixed-cta .btn-culm{
            display: flex;
            align-items: center;
            width: calc(690/750 * 100vw);
          }
          .fixed-cta .cta-btn > p::after{
            display: none;
          }
          .fixed-cta{
            padding-top: calc(16/750 * 100vw);
            padding-bottom: calc(24/750 * 100vw);
          }
          .cta-btn > p::after {
            width: 25px;
            height: 25px;
        }

        .banner-sp-img{
            width:80%;
          }

          .banner-area{
            padding-top: calc(80/750 * 100vw);
            padding-bottom: calc(80/750 * 100vw);
          }


          @media(max-width:750px){
            .banner-pc-img{
                display: none ;
            }
        }
        .campaign-box {
            display: block;
        }
        .campaign-box p:first-child {
            width: 100%;
            text-align: center;
            padding: calc(32/750 * 100vw) calc(0/750 * 100vw) calc(8/750 * 100vw) 0;
            font-size: calc(32/750 * 100vw);
        }
        .campaign-box p {
            width: 100%;
            font-size: calc(24/750 * 100vw);
        }
        .qa-list-red .qa-a-inner{
            padding: calc(32/750 * 100vw) calc(48/750 * 100vw);
        }
        .step {
            background: #b71c25;
            color: #ffffff;
            font-weight: bold;
            padding: calc(3/750 * 100vw) calc(10/750 * 100vw);
            border-radius: calc(15/750 * 100vw);
            margin: calc(5/750 * 100vw) calc(10/750 * 100vw) 0 0;
        }
        .cp-area{
            background: url(../images/cp_bg_sp.png) top center/calc(750/750 * 100vw) auto no-repeat;
            padding: calc(50/750 * 100vw) 0;
        }
        .sp-cta-chara,.sp-in{
           display: block;
        }
        .sp-cta-chara{
            width: calc(106/750 * 100vw);
            position: absolute;
            top: calc(-24/750 * 100vw);
            right: calc(44/750 * 100vw);
        }
        .cp-are-img-box{
            position: relative;
            width:calc(670/750 * 100vw);
            margin: 0 auto;
            margin-bottom: calc(64/750 * 100vw);
        }
        .cp-area-img-icon{
            width: calc(154/750 * 100vw);
            position: absolute;
            top: calc(3 / 750* 100vw);
            left: calc(-30 / 750* 100vw);
        }
        .cta-chara{
            display: none;
        }
        .cp-day{
            font-size: calc(30/750 * 100vw)!important;
        }
}