@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px), print {
/* mv
-------------------------------------*/
.mv {
    background: url(../images/attractingc/mv-bg.png)no-repeat center;
    background-size: cover;
    position: relative;
    margin-top: 17px;
}
.mv::after {
    position: absolute;
    content: "";
    background: url(../images/attractingc/mv-arrow.png)no-repeat;
    background-size: contain;
    width: 110px;
    height: 55px;
    bottom: -53px;
    left: 50%;
    transform: translateX(-50%);
}
.mv .inner {
    width: min(95%, 1202px);
    margin-inline: auto;
    padding: 132px 0 212px;
    position: relative;
}
.mv h2 {
    color: #FFF;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.5; /* 150% */
    letter-spacing: -0.08em;
    margin-bottom: 67px;
}
.mv .photo {
    text-align: center;
}
.mv .fukidashi01 {
    position: absolute;
    top: 250px;
    left: 40px;
}
.mv .fukidashi02 {
    position: absolute;
    top: 413px;
    left: 169px;
}
.mv .fukidashi03 {
    position: absolute;
    top: 563px;
    left: 18px;
}
.mv .fukidashi04 {
    position: absolute;
    bottom: 210px;
    left: 45px;
}
.mv .fukidashi05 {
    position: absolute;
    bottom: 107px;
    left: 182px;
}
.mv .fukidashi06 {
    position: absolute;
    top: 273px;
    right: 4px;
}
.mv .fukidashi07 {
    position: absolute;
    top: 468px;
    right: 150px;
}
.mv .fukidashi08 {
    position: absolute;
    top: 552px;
    right: -38px;
}
.mv .fukidashi09 {
    position: absolute;
    bottom: 142px;
    right: -30px;
}

/* intro
-------------------------------------*/
.intro {
    text-align: center;
    padding: 139px 0 145px;
}
.intro h2 {
    text-align: center;
    font-size: 60px;
    font-weight: 600;
    line-height: 1.42944; /* 142.944% */
    letter-spacing: -0.08em;
    margin-bottom: 64px;
}
.intro h2 .subt {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    line-height:2.22573;
    letter-spacing: -0.08em;
    display: inline-block;
    border-bottom: 1px solid #C93801;
    margin-bottom: 32px;
}
.intro .photo img {
    width: 100%;
    height: auto;
}

/* sec共通
-------------------------------------*/
.sec {
    position: relative;
    margin-bottom: 127px;
}
.sec::before {
    position: absolute;
    content: "";
    background: #F2F2F2;
    width: 25.36%;
    height: 605px;
}
.sec .enttl {
    color: rgba(245, 245, 245, 0.70);
    font-size: 240px;
    font-weight: 700;
    line-height: 1.11985; /* 111.985% */
    text-transform: uppercase;
    padding-left: 2.2%;
    margin-bottom: -63px;
}
.sec .subt {
    color: #FFF;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.5; /* 150% */
    letter-spacing: -0.05em;
    margin-bottom: 32px;
}
.sec .subt span {
    background: #1A1A1A;
    padding: 0 24px;
}
.sec h2 {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.08em;
    margin-bottom: 71px;
}
.sec h3 {
    color: #C93800;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.88889; /* 188.889% */
    margin-bottom: 32px;
}
.sec .txt {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.875; /* 187.5% */
    margin-bottom: 32px;
}
.sec .txt:nth-last-of-type(1) {
    margin-bottom: 0
}
.sec .txt02 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7778; /* 177.778% */
    margin-bottom: 30px;
}
.sec .photo {
    position: relative;
}

/* results
-------------------------------------*/
.results::before {
    bottom: 0;
    right: 0;
}
.results .inner {
    width: min(95%, 1586px);
    margin-inline: auto;
    display: grid;
    grid-template-columns:1fr 36.75%;
    gap: 101px;
}
.results .txt-box {
    padding-left: 87px;
    padding-right: 50px;
}
.results .photo {
    position: relative;
    top: -190px;
    margin-bottom: -30px;
}

/* progress
-------------------------------------*/
.progress {
    margin-left: auto;
    margin-bottom: 168px;
}
.progress::before {
    bottom: -54px;
    left: 0;
}
.progress::after {
    position: absolute;
    content: "";
    background: url(../images/attractingc/progress-photo02.jpg)no-repeat;
    background-size: contain;
    width: 477px;
    height: 318px;
    top: 182px;
    right: 0;
}
.progress .enttl {
    text-align: right;
    padding-left: 0;
    padding-right: 4.5%;
    margin-bottom: 19px;
}
.progress .inner {
    width: min(95%, 1436px);
    margin-right: auto;
    display: grid;
    grid-template-columns:40.59% 46.58%;
    gap: 184px;
}
.progress h3 {margin-bottom: 47px;}
.progress .txt {
    margin-bottom: 49px;
}
.progress .txt:nth-last-of-type(2) {margin-bottom: 30px;}
.progress .txt02 {
    margin-bottom: 47px;
}
.progress .photo {top: -60px;}

/* partner
-------------------------------------*/
.partner {
    margin-bottom: 160px;
}
.partner::before {
    top: 0;
    right: 0;
}
.partner .enttl {
    padding-top: 78px;
    margin-bottom: -60px;
}
.partner .inner {
    width: min(95%, 1690px);
    margin-inline: auto;
    display: grid;
    grid-template-columns:1fr 41.18%;
    gap: 112px;
}
.partner .txt-box {
    padding-left: 49px;
}
.partner .photo {top: -74px;}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1100px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1100px) {
  /* mv
-------------------------------------*/
.mv {
    margin-top: 1.545vw;
}
.mv::after {
    width: 10vw;
    height: 5vw;
    bottom: -4.818vw;
    left: 50%;
    transform: translateX(-50%);
}
.mv .inner {
    padding: 12vw 0 19.273vw;
}
.mv h2 {
    font-size: 3.636vw;
    margin-bottom: 6.091vw;
}

.mv .fukidashi01 {
    top: 22.727vw;
    left: 3.636vw;
}
.mv .fukidashi01 img {
    width: 26.55vw;
}
.mv .fukidashi02 {
    top: 37.545vw;
    left: 15.364vw;
}
.mv .fukidashi02 img {
    width: 27.45vw;
}
.mv .fukidashi03 {
    top: 51.182vw;
    left: 1.636vw;
}
.mv .fukidashi03 img {
    width: 21.09vw;
}
.mv .fukidashi04 {
    bottom: 19.091vw;
    left: 4.091vw;
}
.mv .fukidashi04 img{
    width: 28.09vw;
}
.mv .fukidashi05 {
    bottom: 9.727vw;
    left: 16.545vw;
}
.mv .fukidashi05 img{
    width: 38.82vw;
}
.mv .fukidashi06 {
    top: 24.818vw;
    right: 0.364vw;
}
.mv .fukidashi06 img{
    width: 30.45vw;
}
.mv .fukidashi07 {
    top: 42.545vw;
    right: 13.636vw;
}
.mv .fukidashi07 img {
    width: 25.64vw;
}
.mv .fukidashi08 {
    top: 50.182vw;
    right: -3.455vw;
}
.mv .fukidashi08 img {
    width: 32.36vw;
}
.mv .fukidashi09 {
    bottom: 12.909vw;
    right: -2.727vw;
}
.mv .fukidashi09 img {
    width: 35.45vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1280px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
.intro h2 {
    font-size: clamp(2.375rem, 0.313rem + 4.3vw, 3.75rem);
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1840px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1840px) {
/* sec共通
-------------------------------------*/
.sec {
    margin-bottom: 6.902vw;
}
.sec::before {
    width: 25.36%;
    height: 32.88vw;
}
.sec .enttl {
    font-size: 13.043vw;
    padding-left: 2.2%;
    margin-bottom: -3.424vw;
}
.sec .subt {
    font-size: 2.174vw;
    margin-bottom: 1.739vw;
}
.sec .subt span {
    padding: 0 1.304vw;
}
.sec h2 {
    font-size: 3.261vw;
    margin-bottom: 3.859vw;
}
.sec h3 {
    font-size: clamp(0.875rem, 0.696rem + 0.37vw, 1.125rem);
    margin-bottom: 1.739vw;
}
.sec .txt {
    font-size: clamp(0.75rem, 0.571rem + 0.37vw, 1rem);
    margin-bottom: 1.739vw;
}
.sec .txt02 {
    font-size: clamp(0.875rem, 0.696rem + 0.37vw, 1.125rem);
    margin-bottom: 1.63vw;
}
.sec .photo img {
    width: 100%;
    height: auto;
}

/* results
-------------------------------------*/
.results .inner {
    width: 86.20vw;
    grid-template-columns:1fr 36.75%;
    gap: 2.489vw;
}
.results .txt-box {
    padding-left: 4.728vw;
    padding-right: 0;
}
.results .photo {
    top: -10.326vw;
    margin-bottom: -1.63vw;
}

/* progress
-------------------------------------*/
.progress {
    margin-bottom: 9.13vw;
}
.progress::before {
    bottom: -2.935vw;
    left: 0;
}
.progress::after {
    width: 25.924vw;
    height: 17.283vw;
    top: 9.891vw;
    right: 0;
}
.progress .enttl {
    padding-right: 4.5%;
    margin-bottom: 1.033vw;
}
.progress .inner {
    width: 78.04vw;
    grid-template-columns: 40.59% 51.8%;
    gap: 6vw;
}
.progress h3 {margin-bottom: 2.554vw;}
.progress .txt {
    margin-bottom: 2.663vw;
}
.progress .txt:nth-last-of-type(2) {margin-bottom: 1.63vw;}
.progress .txt02 {
    margin-bottom: 2.554vw;
}
.progress .photo {top: -3.261vw;}

/* partner
-------------------------------------*/
.partner {
    margin-bottom: 8.696vw;
}
.partner .enttl {
    padding-top: 4.239vw;
    margin-bottom: -3.261vw;
}
.partner .inner {
    width: 91.85vw;
    grid-template-columns:1fr 41.18%;
    gap: 6.087vw;
}
.partner .txt-box {
    padding-left: 2.663vw;
}
.partner .photo {top: -4.022vw;}

}

/* ========================================
 screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
    .results .inner {
        grid-template-columns: 1fr 35.75%;
    }
    .progress::before {
        bottom: 8.782vw;
    }
}


/* ========================================
media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* mv
-------------------------------------*/
.mv {
    background: url(../images/attractingc/mv-bg_sp.png)no-repeat center;
    background-size: cover;
    position: relative;
    margin-top: 12vw;
}
.mv::after {
    position: absolute;
    content: "";
    background: url(../images/attractingc/mv-arrow.png)no-repeat;
    background-size: contain;
    width: 21.01vw;
    height: 12.08vw;
    bottom: -8.8vw;
    left: 50%;
    transform: translateX(-50%);
}
.mv .inner {
    width: 89.37vw;
    margin-inline: auto;
    padding: 15.46vw 0 23.67vw;
    position: relative;
}
.mv h2 {
    color: #FFF;
    text-align: center;
    font-size:5.797vw;
    font-weight: 500;
    line-height: 1.5; /* 150% */
    letter-spacing: -0.08em;
    margin-bottom: 100vw;
}
.mv .photo {
    text-align: center;
}
.mv .fukidashi01 {
    position: absolute;
    top: 38.5vw;
    left: -3vw;
}
.mv .fukidashi01 img {
    width: 42.63vw;
}
.mv .fukidashi02 {
    position: absolute;
    top: 39.5vw;
    right: -3.5vw;
}
.mv .fukidashi02 img {
    width: 60.27vw;
}
.mv .fukidashi03 {
    position: absolute;
    top: 61vw;
    left: 10.5vw;
}
.mv .fukidashi03 img {
    width: 35.75vw;
}
.mv .fukidashi04 {
    position: absolute;
    top: 61.5vw;
    right: -4vw;
}
.mv .fukidashi04 img {
    width: 47.58vw;
}
.mv .fukidashi05 {
    position: absolute;
    top: 78vw;
    left: -2vw;
}
.mv .fukidashi05 img {
    width: 62.32vw;
}
.mv .fukidashi06 {
    position: absolute;
    top: 90.2vw;
    right: 3vw;
}
.mv .fukidashi06 img {
    width: 48.79vw;
}
.mv .fukidashi07 {
    position: absolute;
    top: 100vw;
    left: 6vw;
}
.mv .fukidashi07 img {
    width: 41.18vw;
}
.mv .fukidashi08 {
    position: absolute;
    top: 110.2vw;
    right: -2vw;
}
.mv .fukidashi08 img {
    width: 51.93vw;
}
.mv .fukidashi09 {
    position: absolute;
    top: 120.5vw;
    left: 0;
}
.mv .fukidashi09 img {
    width: 64.86vw;
}

/* intro
-------------------------------------*/
.intro {
    text-align: center;
    padding: 13.84vw 0 13.77vw;
}
.intro h2 {
    text-align: center;
    font-size:9.662vw;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.08em;
    margin-bottom: 3.8vw;
    position: relative;
    left: -3.5vw;
}
.intro h2 .subt {
    text-align: center;
    font-size:4.348vw;
    font-weight: 600;
    line-height:2.2222;
    letter-spacing: -0.08em;
    display: inline-block;
    border-bottom: 0.2vw solid #C93801;
    margin-bottom: 2.4vw;
    position: relative;
    left: 3.5vw;
}
.intro h2 .small {
    font-size:8.696vw;
    font-weight: 600;
    line-height: 1.3889;
    letter-spacing: -0.08em;
    position: relative;
    left: 5.5vw;
    top: -1.5vw;
}
.intro .photo img {
    width: 100%;
    height: auto;
}

/* sec共通
-------------------------------------*/
.sec {
    position: relative;
    margin-bottom: 13.57vw;
}
.sec::before {
    position: absolute;
    content: "";
    background: #F2F2F2;
    width: 44.93vw;
    height: 94.69vw;
}
.sec .enttl {
    color: rgba(245, 245, 245, 0.70);
    font-size: 19.32vw;
    font-weight: 700;
    line-height: 0.875;
    text-transform: uppercase;
    margin-bottom: -4.1vw;
}
.sec .inner {
    display: grid;
}
.sec .txt-box {
    order: 2;
    width: 89.37vw;
    margin-inline: auto;
    position: relative;
    z-index: 2;
    margin-top: -1.7vw;
}
.sec .subt {
    color: #FFF;
    font-size:5.314vw;
    font-weight: 500;
    line-height: 1.36364;
    letter-spacing: -0.05em;
    margin-bottom: 4.9vw;
}
.sec .subt span {
    background: #1A1A1A;
    padding: 1.21vw 1.93vw;
}
.sec h2 {
    font-size:9.662vw;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.08em;
    margin-bottom: 7.73vw;
}
.sec h3 {
    color: #C93800;
    font-size:3.865vw;
    font-weight: 700;
    line-height: 1.75;
    margin-bottom: 4.83vw;
}
.sec .txt {
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.84615;
    margin-bottom: 4.83vw;
}
.sec .txt:nth-last-of-type(1) {
    margin-bottom: 0
}
.sec .txt02 {
    font-size:3.865vw;
    font-weight: 500;
    line-height: 1.75;
    margin-bottom: 4.83vw;
}
.sec .photo {
    position: relative;
    order: 1;
    width: 85.51vw;
    margin-left: auto;
}

/* results
-------------------------------------*/
.results::before {
    top: 17.5vw;
    right: 0;
}

/* progress
-------------------------------------*/
.progress::before {
    bottom: 45vw;
    left: 0;
    height: 76.09vw;
    width: 63vw;
}
.progress::after {
    position: absolute;
    content: "";
    background: url(../images/attractingc/progress-photo02_sp.jpg)no-repeat;
    background-size: contain;
    width: 88.41vw;
    height: 57.00vw;
    top: 13vw;
    left: 0;
}
.progress .inner {
    gap: 15.49vw;
}
.progress .enttl {
    margin-bottom: 52.8vw;
}
.progress .txt-box {
    order: 1;
}
.progress .photo {
    order: 2;
}

/* partner
-------------------------------------*/
.partner {
    margin-bottom: 23.19vw;
}
.partner::before {
    top: 34.5vw;
    right: 0;
    width: 54.59vw;
    height: 86.71vw;
}
.partner .photo {
    margin-left: 0;
    margin-right: auto;
}

/* voice
-------------------------------------*/
#voice-sec {
    margin-bottom: 38.65vw;
}
 
}