/***** css sp *****/

@media screen and (max-width: 767px) {

main {
    overflow: hidden;
}

h1 {
    margin: 0;
    padding: 0;
}

a,
a:hover {
    text-decoration: none !important;
}

.sec-mv {
    width: 100vw;
    margin: 0 auto;
    background: #fafafa;

    & img {
        margin: 0 auto;
    }
}

.sec-lead {
    width: 100%;
    background: #7DB0B4;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: calc(40 * (100vw / 375)) 0 calc(60 * (100vw / 375));

    & .lead-deco {
        position: absolute;
        width: 90%;
        margin: auto;
        top: calc(-24 * (100vw / 375));
        left: 0;
        right: 0;
    }

    & h2 {
        font: 600 calc(18 * (100vw / 375)) / 1.6em "Noto Sans JP", sans-serif;
        color: #fff;
        margin: calc(10 * (100vw / 375)) auto calc(20 * (100vw / 375));
    }
}

.sec-lead .lead-bubble {
    width: 100%;
    margin: 0 auto calc(20 * (100vw / 375));

    & li {
        position: relative;
        width: fit-content;
        padding: calc(12 * (100vw / 375)) calc(16 * (100vw / 375));
        border: 1px solid #333333;
        background: #fff;
        border-radius: calc(3 * (100vw / 375));
    }

    & li:nth-child(1) {
        margin: 0 auto calc(10*(100vw / 375));
        transition-delay: 0s;
    }

    & li:nth-child(2) {
        margin: 0 auto calc(10*(100vw / 375));
        transition-delay: 0.5s;
    }

    & li:nth-child(3) {
        margin: 0 auto calc(10*(100vw / 375));
        transition-delay: 0s;
    }

    & li:nth-child(4) {
        margin: 0 auto calc(10*(100vw / 375));
        transition-delay: 0.5s;
    }

    & li:nth-child(2n-1)::after {
        content: "";
        position: absolute;
        top: calc(60%);
        left: -11%;
        width: calc(25 * (100vw / 375));
        height: 2px;
        box-sizing: border-box;
        background-color: #333;
        box-shadow: 0 2px 0 #ffffff, 0 -2px 0 #ffffff;
        rotate: 320deg;
    }

    & li:nth-child(2n)::after {
        content: "";
        position: absolute;
        top: calc(60%);
        right: -7%;
        width: calc(25 * (100vw / 375));
        height: 2px;
        box-sizing: border-box;
        background-color: #333;
        box-shadow: 0 2px 0 #ffffff, 0 -2px 0 #ffffff;
        rotate: 35deg;
    }

}

.sec-theme {
    margin: calc(20 * (100vw / 375)) auto calc(70 * (100vw / 375));
    text-align: center;
    width: 100%;
    position: relative;

    &::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 100%;
        height: calc(200 * (100vw / 375));
        border-radius: 50% / 100% 100% 0 0;
        background: #fff;
        left: 0;
        right: 0;
        margin: auto;
        top: calc(-70 * (100vw / 375));
    }

    & .theme-con {
        position: relative;
        z-index: 1;
    }
 
    & p {
        font: 400 calc(16 * (100vw / 375)) / 2.0em "Noto Sans JP", sans-serif;
    }

    & p em {
        font: 600 calc(24 * (100vw / 375)) / 2.0em "Noto Sans JP", sans-serif;
        color: #7DB0B4;
    }

    & .theme-btn {
        width: 100%;
        height: calc(60 * (100vw / 375));
        margin: calc(50 * (100vw / 375)) auto calc(70 * (100vw / 375));
    }

    & .theme-btn span {
        font: 700 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        text-align: center;
        background: #7DB0B4;
        color: #fff;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: 90%;
        height: 100%;
        margin: 0 auto;
    }
}

/*-- sec-styling --*/

.sec-styling {
    width: 100%;
    margin-bottom: calc(70 * (100vw / 375));
}

.sec-styling .sec-visual {
    background-attachment: fixed;
    background-size: 150%;
    background-position-x: center;
    width:100%;
    height:calc(150 * (100vw / 375));
}

.sec-styling .styling-ttl {
    max-width: 100%;
    margin: calc(40 * (100vw / 375)) auto calc(40 * (100vw / 375));
    text-align: center;
    
    & h3 {
        font: 600 calc(26 * (100vw / 375)) / 1.6em "Noto Sans JP", sans-serif;
    }

    & p {
        font: 400 calc(14 * (100vw / 375)) / 1.8em "Noto Sans JP", sans-serif;
        width: 90%;
        margin: 0 auto;
        text-align: left;
    }

}

.sec-styling .styling-con {
    width: 100%;
    margin: 0 auto;
    padding: calc(40 * (100vw / 375)) calc(20 * (100vw / 375));
    border-radius: 0;

    & img {
        width: 100%;
        height: auto;
    }

    & .styling-list {
        margin-left: 0;
        width: 100%;
    }
    
    & li {
        display: flex;
        flex-wrap: nowrap;
        text-align: left;
        color: #fff;
        margin-bottom: calc(20 * (100vw / 375));
        font: 400 calc(14 * (100vw / 375)) / 1.6em "Noto Sans JP", sans-serif;
    }

    & li:last-child {
        margin-bottom: 0;
    }

    & li div {
        margin-right: .5em;
    }

    & li em {
        font: 600 calc(14 * (100vw / 375)) / 1.6em "Noto Sans JP", sans-serif;
        color: #ccc;
    }

    & li a {
        margin: auto 0 auto auto;
    }

    & .styling-btn {
        font: 700 calc(14 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        border: 1px solid #000;
        text-align: center;
        width: calc(140 * (100vw / 375));
        height: calc(40 * (100vw / 375));
        background: #fff;
        color: #000;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }
}

/*-- color variations --*/

.con01 {
    & .sec-visual {
        background-image: url("/img/feature/w-acidt-250724/sec-visual01.jpg");
    }

    & .styling-con {
        background-color: #373755;
    }
}

.con02 {
    & .sec-visual {
        background-image: url("/img/feature/w-acidt-250724/sec-visual02.jpg");
    }

    & .styling-con {
        background-color: #4F3E32;
    }
}

.con03 {
    & .sec-visual {
        background-image: url("/img/feature/w-acidt-250724/sec-visual03.jpg");
    }

    & .styling-con {
        background-color: #006C7D;
    }
}

.con04 {
    & .sec-visual {
        background-image: url("/img/feature/w-acidt-250724/sec-visual04.jpg");
    }

    & .styling-con {
        background-color: #A9AF00;
    }
}

/*-- sec-bottom --*/

.sec-bottom {
    width: 100%;
    border-top: 1px solid #ccc;
    padding-top: calc(60 * (100vw / 375));

    & .btn-3col {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    & .btn-3col ul {
    }

    & .btn-3col li {
        flex: 0 0 calc(100% / 3 - calc(20 * (100vw / 375)));
    }

    & .btn-3col div {
        font: 700 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        border: 1px solid #241754;
        margin: calc(8 * (100vw / 375)) auto calc(10 * (100vw / 375));
        text-align: center;
        width: 90%;
        height: calc(60 * (100vw / 375));
        background: #fff;
        color: #241754;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    & .btn-1col {
        width: 90%;
        margin: 0 auto;
    }

    & .btn-1col p {
        font: 600 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        padding: calc(16*(100vw / 375)) 0;
        margin: 0 auto calc(60 * (100vw / 375));
        text-align: center;
        width: 100%;
        background: #241754;
        color: #fff;
    }
}
 /*-- fadein --*/
.slide-left {
    opacity: 0;
    transform: translate(-2.5rem, 0);
    transition: all 1s ease-out;
 }

.slide-right {
    opacity: 0;
    transform: translate(2.5rem, 0);
    transition: all 1s ease-out;
 }


 /*-- fadeFrame --*/
.fadeFrame {
    position: relative;
    width: 100%;
    height: 96vw;
}

.fadeFrame img {
    position: absolute;
    width: 100%;
    opacity: 0;
    animation: change-img-anim 24s infinite;
}

.fadeFrame img:nth-of-type(1) {
    animation: change-img-anim-first 24s infinite;
    animation-delay: 0s;
}
.fadeFrame img:nth-of-type(2) {
    animation-delay: 6s;
}
.fadeFrame img:nth-of-type(3) {
    animation-delay: 12s;
}

.fadeFrame img:nth-of-type(4) {
    animation-delay: 18s;
}

@keyframes change-img-anim-first {
    0%{ opacity: 1;}
    30%{ opacity: 1;}
    36%{ opacity: 1;}
    45%{ opacity: 0;}
    100%{ opacity: 0;}
}

@keyframes change-img-anim {
    0%{ opacity: 0;}
    30%{ opacity: 1;}
    36%{ opacity: 1;}
    45%{ opacity: 0;}
    100%{ opacity: 0;}
}

}

/***** css pc *****/

@media screen and (min-width: 768px) {

    .sp {
        display: none;
    }

main {
    overflow: hidden;
}

h1 {
    margin: 0;
    padding: 0;
}

a,
a:hover {
    text-decoration: none !important;
}

.sec-mv {
    width: 100%;
    background: #fafafa;

    & img {
        margin: 0 auto;
    }
}

.sec-lead {
    width: 100%;
    background: #7DB0B4;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: 80px 0 100px;

    & .lead-deco {
        position: absolute;
        width: 600px;
        margin: auto;
        top: -40px;
        left: 0;
        right: 0;
    }

    & h2 {
        font: 600 24px / 1.6em "Noto Sans JP", sans-serif;
        color: #fff;
        margin: 10px auto 50px;
    }
}

.sec-lead .lead-bubble {
    width: 600px;
    margin: 0 auto 30px;

    & li {
        position: relative;
        width: fit-content;
        padding: 12px 16px;
        border: 1px solid #333333;
        background: #fff;
        border-radius: 3px;
    }

    & li:nth-child(1) {
        margin: 0 0 0 50px;
        transition-delay: 0s;
    }

    & li:nth-child(2) {
        margin: 0 0 0 auto;
        transition-delay: 0.5s;
    }

    & li:nth-child(3) {
        transition-delay: 0s;
    }

    & li:nth-child(4) {
        margin: 0 50px 0 auto;
        transition-delay: 0.5s;
    }

    & li:nth-child(2n-1)::after {
        content: "";
        position: absolute;
        top: calc(60%);
        left: -11%;
        width: 30px;
        height: 2px;
        box-sizing: border-box;
        background-color: #333;
        box-shadow: 0 2px 0 #ffffff, 0 -2px 0 #ffffff;
        rotate: 320deg;
    }

    & li:nth-child(2n)::after {
        content: "";
        position: absolute;
        top: calc(60%);
        right: -7%;
        width: 30px;
        height: 2px;
        box-sizing: border-box;
        background-color: #333;
        box-shadow: 0 2px 0 #ffffff, 0 -2px 0 #ffffff;
        rotate: 35deg;
    }

}

.sec-theme {
    margin: 0 auto 100px;
    text-align: center;
    width: 100%;
    position: relative;

    &::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 800px;
        height: 300px;
        border-radius: 50% / 100% 100% 0 0;
        background: #fff;
        left: 0;
        right: 0;
        margin: auto;
        top: -70px;
    }

    & .theme-con {
        position: relative;
        z-index: 1;
    }
 
    & p {
        font: 400 16px / 2.0em "Noto Sans JP", sans-serif;
    }

    & p em {
        font: 500 30px / 2.0em "Noto Sans JP", sans-serif;
        color: #7DB0B4;
    }

    & .theme-btn {
        width: 300px;
        height: 60px;
        margin: 50px auto 120px;
    }

    & .theme-btn span {
        font: 700 16px / 1.4em "Noto Sans JP", sans-serif;
        text-align: center;
        background: #7DB0B4;
        color: #fff;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
}

/*-- sec-styling --*/

.sec-styling {
    width: 100%;
    margin-bottom: 140px;
}

.sec-styling .sec-visual {
    background-attachment: fixed;
    background-size: cover;
    width:100%;
    height:300px;
}

.sec-styling .styling-ttl {
    max-width: 900px;
    margin: 80px auto 60px;
    text-align: center;
    
    & h3 {
        font: 600 26px / 1.6em "Noto Sans JP", sans-serif;
    }

    & p {
        font: 400 14px / 1.8em "Noto Sans JP", sans-serif;
    }

}

.sec-styling .styling-con {
    width: 900px;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    margin: 0 auto;
    padding: 50px 70px;
    border-radius: 6px;

    & img {
        width: 220px;
        height: auto;
    }

    & .styling-list {
        margin-left: 60px;
        width: 480px;
    }
    
    & li {
        display: flex;
        flex-wrap: nowrap;
        text-align: left;
        color: #fff;
        margin-bottom: 20px;
        font: 400 16px / 1.6em "Noto Sans JP", sans-serif;
    }

    & li:last-child {
        margin-bottom: 0;
    }

    & li em {
        font: 600 14px / 1.6em "Noto Sans JP", sans-serif;
        color: #ccc;
    }

    & li a {
        margin: auto 0 auto auto;
    }

    & .styling-btn {
        font: 700 16px / 1.4em "Noto Sans JP", sans-serif;
        border: 1px solid #000;
        text-align: center;
        width: 180px;
        height: 40px;
        background: #fff;
        color: #000;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }
}

/*-- color variations --*/

.con01 {
    & .sec-visual {
        background-image: url("/img/feature/w-acidt-250724/sec-visual01.jpg");
    }

    & .styling-con {
        background-color: #373755;
    }
}

.con02 {
    & .sec-visual {
        background-image: url("/img/feature/w-acidt-250724/sec-visual02.jpg");
    }

    & .styling-con {
        background-color: #4F3E32;
    }
}

.con03 {
    & .sec-visual {
        background-image: url("/img/feature/w-acidt-250724/sec-visual03.jpg");
    }

    & .styling-con {
        background-color: #006C7D;
    }
}

.con04 {
    & .sec-visual {
        background-image: url("/img/feature/w-acidt-250724/sec-visual04.jpg");
    }

    & .styling-con {
        background-color: #A9AF00;
    }
}

/*-- sec-bottom --*/

.sec-bottom {
    width: 100%;
    border-top: 1px solid #ccc;
    padding-top: 100px;

    & .btn-3col {
        width: 900px;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    & .btn-3col ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    & .btn-3col li {
        flex: 0 0 calc(100% / 3 - 20px);
    }

    & .btn-3col div {
        font: 700 16px / 1.4em "Noto Sans JP", sans-serif;
        border: 1px solid #241754;
        margin: 8px auto 40px;
        text-align: center;
        width: 100%;
        height: 60px;
        background: #fff;
        color: #241754;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    & .btn-1col {
        width: 400px;
        margin: 0 auto;
    }

    & .btn-1col p {
        font: 600 16px / 1.4em "Noto Sans JP", sans-serif;
        padding: 14px 0px;
        margin: 0 auto 100px;
        text-align: center;
        width: 400px;
        background: #241754;
        color: #fff;
    }
}
 /*-- fadein --*/
.slide-left {
    opacity: 0;
    transform: translate(-2.5rem, 0);
    transition: all 1s ease-out;
 }

.slide-right {
    opacity: 0;
    transform: translate(2.5rem, 0);
    transition: all 1s ease-out;
 }


 /*-- fadeFrame --*/
.fadeFrame {
    position: relative;
    width: 220px;
    height: 220px;
}

.fadeFrame img {
    position: absolute;
    width: 100%;
    opacity: 0;
    animation: change-img-anim 24s infinite;
}

.fadeFrame img:nth-of-type(1) {
    animation: change-img-anim-first 24s infinite;
    animation-delay: 0s;
}
.fadeFrame img:nth-of-type(2) {
    animation-delay: 6s;
}
.fadeFrame img:nth-of-type(3) {
    animation-delay: 12s;
}

.fadeFrame img:nth-of-type(4) {
    animation-delay: 18s;
}

@keyframes change-img-anim-first {
    0%{ opacity: 1;}
    30%{ opacity: 1;}
    36%{ opacity: 1;}
    45%{ opacity: 0;}
    100%{ opacity: 0;}
}

@keyframes change-img-anim {
    0%{ opacity: 0;}
    30%{ opacity: 1;}
    36%{ opacity: 1;}
    45%{ opacity: 0;}
    100%{ opacity: 0;}
}
}