@charset "UTF-8";
/* =======================================

    cooria.css

========================================== */

/* common
========================================== */

@font-face {
    font-family: 'GenJyuuGothic';
    src: url('../font/GenJyuuGothic-P-Medium.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GenJyuuGothic';
    src: url('../font/GenJyuuGothic-P-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
.genjyu {
    font-family: 'GenJyuuGothic';
    letter-spacing: 0.08em;
}
html,body {
	width: 100%;
    margin: 0;
}
body {
  overflow-x: hidden;
}
main,img,p,div,ul,li,a,p,dl,dt,dd {
    box-sizing: border-box;
    line-height: 1.8;
    letter-spacing: 0.05em;
    color: #4A4A4A;
}
body#cooria main {
    font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;	
	font-style: normal;
    color: #5C5A5B;
    padding-bottom: 0;
    font-size: 16px;
}
main {
    color: #424242;
    /* padding-bottom: 100px; */
}
main strong {
    font-weight: normal;
}
.pc {
    display: block;
}
.sp {
    display: none;
}
img,h1,h2,h3,p,li,a,span {
    transition: all .6s;
}
a:hover {
    opacity: 0.8;
}
section {
	padding-left: 0;
	padding-right: 0;
    padding-bottom: 80px;
    position: relative;
}
section img {
  opacity: 0;
  -webkit-transition: opacity 3s;
  transition: opacity 3s;
}
section img.lazyloaded {
  opacity: 1;
}
p {
    font-size: clamp(14px, 2vw, 18px);
}
.inner {
    max-width: 1028px;
    margin: 0 auto;
    position: relative;
}
.note {
    font-size: 13px;
}
.flex {
    display: flex;
}

/* fv
========================================== */

.fv {
    background: #abd8fe url("../images/fv_bg.jpg") no-repeat center;
    width: 100%;
    position: relative;
}
.fv.btm {
    margin-bottom: 5%;
}
.fv figure {
    display: table;
    margin: 0 auto;
}
.fv:after,
.mesh:after,
section.onayami:after,
section.detail:after,
section.movie:after,
section.style:after,
section.color:after,
section.flow:after,
.fv.btm:before {
    content: "";
    display: table;
    width: 100%;
    position: absolute;
    bottom: -1px;
    z-index: 1;
    padding-top: 4.99609679938%;
}
.fv:after,
section.onayami:after,
section.movie:after,
section.color:after {
    background: url(../images/wave_top.svg) center / 100% auto no-repeat;
}

/* cvbtns
========================================== */

.cvbtn {
    display: table;
    margin: 0 auto;    
}
.cvbtn a {
    border-radius: 2em;
    font-family: 'GenJyuuGothic', sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: white;
    background: #F14848;
    line-height: 1;
    font-size: clamp(19px, 2vw, 26px);
    display: flex;
    align-items: center;
    padding: 1.15em 4em 1.15em 3em;
    text-align: center;
    position: relative;
}
.cvbtn a:after {
    content: "";
    width: 1em;
    aspect-ratio: 7 / 5;
    background: url(../images/cvbtn_arrow.svg) center / contain no-repeat;
    right: 1em;
    margin-left: 1em;
    position: absolute;
    top: 50%;
    bottom: 0;
    transform: translateY(-50%); 
}
.cvbtn a:hover {
  background-position: right center;
  background-size: 200% auto;
  -webkit-animation: pulse 2s infinite;
  animation: ripple 1.5s infinite;
  color: #fff;
  opacity: 1;
}
@keyframes ripple {
  0% {box-shadow: 0 0 0 0 #f14848;}
  70% {box-shadow: 0 0 0 10px rgb(27 133 251 / 0%);}
  100% {box-shadow: 0 0 0 0 rgb(27 133 251 / 0%);}
}
.cvbtn.fvtop {
    position: absolute;
    transform: translateY(-150%);
    left: 0;
    z-index: 2;
}
.cvbtntopwrap {
    max-width: 1028px;
    margin: 0 auto;
    position: relative;
}
.cvbtn.nishi {
    margin: 0 auto 100px auto;
}
figure.cvcatch {
    margin: 0 auto 5px auto;
}

/* intro
========================================== */

.intro {
    background: url(../images/intro_bg.jpg) center bottom / 100% auto no-repeat;
    padding: 3% 0 5% 0;
    position: relative;
}
.intro figure {
    display: table;
    margin: 0 auto;
}

/* onayami
========================================== */

section.onayami {
    background: #ACD1EC;
    padding-bottom: 0;
    padding-top: 5%;
}
section.onayami figure,
section.onayami picture,
section.detail figure,
section.detail picture,
section.movie figure,
section.style figure,
section.style .kosei figure.title,
section.color figure.title,
section.color ul.box .flex.point-check .point figure,
section.color ul.box .flex.point-check .click figure,
section.flow figure.title,
section.qa figure.title,
.mesh figure,
section.movie figure.movie-caption,
section.movie figure.movie-illust {
    display: table;
}
section.onayami figure {
    margin: 0 auto 2em auto;
}
section.onayami picture img {
    margin: 0 auto;
    position: absolute;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px); 
    left: 50%;
    right: 0;
    bottom: 0;
    z-index: 2;
}
section.onayami picture img.transparent {
    opacity: 0;
    position: relative;
    margin: 0 auto;
}

/* detail
========================================== */

section.detail {
    padding-top: 5%;
    padding-bottom: 15%;
    background: url("../images/bg_circle.webp") -8em -5% / contain no-repeat;
}
section.detail:after,
section.flow:after {
    background: url(../images/wave_beige.svg) center / 100% auto no-repeat;
}
.fv.btm:before {
    background: url(../images/wave_beige_btm.svg) center / 100% auto no-repeat;
    top: -1px;
    bottom: initial;
}
section.detail figure {
    margin: 0 auto 5% auto;
}
section.detail picture {
    margin: 0 auto 0 auto;
}
section.detail ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
section.detail p {
    text-align: center;
    margin: 2em 0 3em 0;
    font-weight: 500;
    font-size: clamp(14px, 2vw, 22px);
}

/* movie
========================================== */

.moviewrap {
    max-width: 1028px;
    margin: 0 auto 5% auto;
}
.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    max-width: initial;
    margin: 0 auto 0 auto;
}	
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
}
section.movie,
section.qa {
    background: #F3F0E3;
}
section.movie {
    padding-top: 5%;
    padding-bottom: 15%;
}
section.qa {
    padding-top: 5%;
    padding-bottom: 5%;
}
section.movie figure.movie-title,
section.color figure.title,
section.qa figure.title {
    margin: 0 auto 4% auto;
}
section.movie figure.movie-illust {
    margin: 0 auto 5% auto;
}
section.movie figure.movie-caption {
    margin: 0 auto 1em auto;
}
section.movie figure.movie-caption img {
    margin: 0 auto;
}
section.movie p {
    background: linear-gradient(transparent 70%, #D9CC87 0%);
    display: table;
    font-weight: 500;
    text-align: center;
    margin: 0 auto 0.5em auto;
    font-size: clamp(13px, 2vw, 22px);
}
section.movie p:last-child {
    margin: 0 auto 3% auto;
}

/* style
========================================== */

section.style,
section.color,
section.flow {
    padding-top: 5%;
    padding-bottom: 15%;
}
section.style:after {
    background: url("../images/wave_lightblue.svg") center / 100% auto no-repeat;
}
section.style figure.title {
    margin:0 auto 3em auto;
}
section.style .nayami {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2em auto;
}
section.style .nayami p {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 500;
}
section.style .nayami figure {
    padding-right: 1.5em;
}
section.style .note.center {
    text-align: center;
    margin: 0 auto 2em auto;
}
section.style .photo {
    margin: 0 auto;
    display: table;
    position: relative;
}
section.style .photo.nishi2 {
    margin: -2em auto 0 auto;
}
section.style .photo.yamamoto2 {
    margin: -2em auto 3em auto;
}
section.style .photo figure {
    position: absolute;
    z-index: 1;
}
section.style .photo figure a:hover {
    opacity: 1;
    filter: brightness(90%);
}
section.style .photo.nishi1 figure,
section.style .photo.yamamoto1 figure {
    right: 0;
    top: 3em;
}
section.style .photo.nishi2 figure,
section.style .photo.yamamoto2 figure {
    left: -1em;
    top: 0;
}
section.style .kosei {
    position: relative;
    background: #F5F5F5;
    padding: 5em 3em 3em 3em;
    margin: 6em auto 3em auto;
}
section.style .kosei figure.title {
    position: absolute;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px); 
    left: 50%;
    right: 0;
    top: -1.5em;
    z-index: 1;
}
section.style .flex {
    align-items: center;
    justify-content: space-between;
}
section.style .flex picture {
    padding-right: 3em;
    flex-shrink: 0;
}
section.style .flex .text figure {
    padding-bottom: 2em;
}
section.style .flex .text dl dt {
    font-size: clamp(21px, 2vw, 23px);
    font-weight: 700;
    margin-bottom: 1em;
    line-height: 1;
}
section.style .flex .text dl dd {
    font-size: clamp(16px, 2vw, 17px);
    font-weight: 500;
}

/* ====================================== */
/* modal */

.window {
    display: none;
}
.modaal-container picture {
    display: table;
    top: 10vh;
    position: relative;
    margin: 0 auto;
}
.modaal-noscroll {
    overflow: visible !important;
}

/* ====================================== */
/* color */

section.color {
    background: #DCEEF1;
}
section.color figure.title,
section.flow figure.title {
    margin: 0 auto 4% auto;
}
section.color .lead {
    text-align: center;
    font-size: clamp(16px, 2vw, 20px);
    display: table;
    font-weight: 500;
    margin: 0 auto 5% auto;
}
section.color ul.box li {
    background: white;
    padding: 2.5em;
}
section.color ul.box .stylephoto {
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
}
section.color ul.box li:first-child .stylephoto {
    margin: 0 auto 3em auto;
}
section.color ul.box .stylephoto {
    margin: 0 auto 4em auto;
}
section.color ul.box .stylephoto picture {
    flex-shrink: 0;
}
section.color ul.box li:nth-child(2) .stylephoto picture {
    display: table;
    margin: 0 auto 0 0;
}
section.color ul.box li:first-child .stylephoto dl {
    position: absolute;
    bottom: 2em;
    background: url(../images/color_fuki_nishino.png) right / 100% 100% no-repeat;
    padding: 0 2em 1em 0;
    left: 0;
}
section.color ul.box li:nth-child(2) .stylephoto dl {
    position: absolute;
    bottom: 2em;
    background: url(../images/color_fuki_yamamoto.png) right / 100% 100% no-repeat;
    padding: 0 0 1em 2em;
    right: 0;
}
section.color ul.box .flex.stylephoto dl dt {
    background: #6A94BE;
    color: white;
    font-weight: 500;
    line-height: 1;
    padding: 0.5em 0.8em;
    font-size: 19px;
    display: table;
    margin-bottom: 0.5em;
}
section.color ul.box .flex.stylephoto dl dd {
    font-size: clamp(16px, 2vw, 17px);
    font-weight: 500;
}
section.color ul.box .flex.point-check {
    justify-content: space-between;
    align-items: flex-end;
}
section.color ul.box .flex.point-check .point {
    background: #DCEEF1;
    padding: 3em 1.5em 1.5em 1.5em;
    width: 60%;
    position: relative;
}
section.color ul.box .flex.point-check .point figure {
    position: absolute;
    transform: translateY(-120%);
}
section.color ul.box .flex.point-check .point p {
    font-weight: 500;
    font-size: clamp(15px, 2vw, 15px);
}
section.color ul.box .flex.point-check .point picture {
    position: absolute;
    right: 1.5em;
    bottom: 1.5em;
    z-index: 1;
}
section.color ul.box .flex.point-check .click figure {
    margin: 0 auto 5px auto;
}
section.color ul.box .flex.point-check .click ul.thum {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
section.color ul.box .flex.point-check .click ul.thum li {
    padding: 0;
    background: transparent;
    width: calc(100% / 3 - 8px);
}
section.color ul.box .flex.point-check .click ul.thum figcaption {
    color: #917A57;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    padding:0.5em 0 0 0;
    line-height: 1;
}
section.color .cvbtn,
section.flow .cvbtn {
    margin: 3em auto 0 auto;
}

/* flow
========================================== */

section.flow li {
    background: #ECF1DC;
    padding: 1.5em;
}
section.flow li:first-child {
    margin-bottom: 3em;
}
section.flow .content {
    align-items: center;
    margin: -1em auto 0 auto;
}
section.flow li:nth-child(2) .content:first-of-type {
    margin: -1em auto 2.5em auto;
}
section.flow picture {
    flex-shrink: 0;
    padding-right: 1.5em;
}
section.flow .content p,
section.flow .content dd {
    font-size: clamp(16px, 2vw, 17px);
    line-height: 1.5;
    font-weight: 500;
}
section.flow .content dt {
    font-size: clamp(20px, 2vw, 20px);
    color: #8F9871;
    font-weight: 600;
    padding-bottom: 0.5em;
    line-height: 1;
    margin-bottom: 1em;
    border-bottom: 1px solid #8F9871;
}
section.flow .num {
    background: white;
    border: 1px solid #ECF1DC;
    color: #8F9871;
    line-height: 1;
    padding: 0.5em;
    font-size: clamp(20px, 2vw, 23px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transform: translateY(-60%);
}
section.flow .num span {
    font-size: clamp(33px, 2vw, 38px);
    padding-right: 1em;
    opacity: 0.5;
}
.contact-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 1em;
}
.contact-wrap figure {
    margin-right: 1.5em;
}
.contact-wrap figure:last-of-type {
    margin-right: 0;
}

/* ====================================== */
/* qa */

section.qa ul.box li {
    margin-bottom: 3em;
}
section.qa ul.box li:last-child {
    margin-bottom: 0;
}
section.qa ul.box li p {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
section.qa ul.box li p.que {
    font-size: clamp(17px, 2vw, 23px);
    color: #A7987C;
    font-weight: 600;
    background: white;
    padding: 0.5em;
    margin: 0 0 1em 0;
    width: 100%;
}
section.qa ul.box li p.que:before {
    content: "Q";
    margin-right: 1em;
    color: rgba(167,152,124, 0.55);
    font-size: clamp(30px, 2vw, 38px);
    font-weight: 500;
}
section.qa ul.box li p.ans {
    font-size: clamp(16px, 2vw, 17px);
    padding: 0.5em;
    font-weight: 500;
}
section.qa ul.box li p.ans:before {
    content: "A";
    color: rgba(233,129,129, 0.55);
    font-size: clamp(30px, 2vw, 38px);
    font-weight: 600;
    margin-right: 1em;
}
section.qa ul.subbox {
    width: 85%;
    margin: 0 auto;
}
section.qa ul.subbox li {
    padding: 2em;
    background: #F1EACE;
    border: 4px solid white;
    margin: 0 0 1.5em 0;
}
section.qa ul.subbox li:last-child {
    margin: 0 0 0 0;
}
section.qa ul.subbox dl {
    padding: 0 0 0 10em;
}
section.qa ul.subbox li:first-child dl {
    background: url("../images/qa_img1.png") left / 8em auto no-repeat;
}
section.qa ul.subbox li:nth-child(2) dl {
    background: url("../images/qa_img2.png") left / 8em auto no-repeat;
}
section.qa ul.subbox li:nth-child(3) dl {
    background: url("../images/qa_img3.png") left / 8em auto no-repeat;
}
section.qa ul.subbox dt p {
    color: #95785D;
    font-weight: 600;
    font-size: clamp(18px, 2vw, 25px);
    margin: 0 0 0.5em 0;
}
section.qa ul.subbox dt p span {
    font-size: 85%;
}
section.qa ul.subbox dd p {
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 500;
}
section.qa .contact-wrap {
    margin-left: 4em;
}

/* mesh
========================================== */

.mesh {
    padding: 0 0 10% 0;
    position: relative;
    display: none;
}
.mesh.btm {
    padding: 10% 0 10% 0;
}
.mesh.btm:after {
    content: none;    
}
.mesh .border {
    background: white;
    border: 10px solid #F2EDD8;
    padding: 1em 2em 1em 2em;
    position: relative;
}
.mesh .border figure.ribbon {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-20%, -45%);
}
.mesh .box {
    align-items: center;
    background: #F2EDD8;
    justify-content: space-between;
    padding: 1.5em;
    margin: 0 auto 1.5em auto;
}
.mesh .border .fuki {
    position: absolute;
    right: 0;
    top: -3em;
}
.mesh .inner {
    width: 90%;
}
.mesh:after {
    background: url(../images/wave_blue.svg) center / 100% auto no-repeat;
}

/* ====================================== */
/* media query */

@media screen and (max-width : 1280px) {
    /* cvbtn */
    .cvbtn.fvtop {
        left: 5%;
    }
    
}
@media screen and (max-width : 64em) {
    /* cvbtn */
    .cvbtn.fvtop {
        transform: translateY(-120%);
    }
    /* common */
    .inner {
        max-width: 95%;
    }
    /* detail */
    section.detail ul li:first-child {
        padding-right: 2em;
    }
    /* movie */
    section.movie figure.movie-title,
    section.color figure.title,
    section.flow figure.title,
    section.qa figure.title {
        width: 60%;
    }
    section.movie figure.movie-caption {
        width: 45%;
    }
    /* style */
    section.style figure.title {
        width: 50%;
    }
    section.style .nayami {
        max-width: 90%;
    }
    section.style .nayami p {
        width: 60%;
    }
    section.style .nayami figure {
        width: 50%;
    }
    section.style .kosei {
        padding: 3em 1.5em 1.5em 1.5em;
    }
    section.style .photo figure {
        width: 16%;
    }
    section.style .flex picture {
        width: 55%;
        padding-right: 2em;
    }
    section.style .flex .text {
        width: 45%;
    }
    
    /* color */
    section.color ul.box .stylephoto dl {
        width: 39.5%;
        bottom: 1em;
    }
    section.color ul.box .flex.point-check .point figure {
        width: 60%;
    }
    section.color ul.box .stylephoto picture {
        width: 80%;        
    }
    section.color ul.box li:first-child .stylephoto picture {
        padding-left: 1.5em;
    }
    section.color ul.box li:nth-child(2) .stylephoto picture {
        padding-right: 1.5em;
    }
    section.color ul.box .flex.stylephoto dl dt {
        font-size: 1.5rem;
    }
    section.color ul.box .flex.stylephoto dl dd {
        font-size: 1.25rem;
    }
    section.color ul.box li {
        padding: 2em;
    }
    section.color ul.box .flex.point-check .point p {
        font-size: 1.25rem;
        width: 70%;
    }
    section.color ul.box .flex.point-check .point picture {
        width: 30%;
        right: 1em;
    }
    section.color ul.box .flex.point-check .point {
        padding: 2em 1em 1em 1em;
        width: 70%;
    }
    section.color ul.box .flex.point-check .point picture {
        width: 25%;
        right: 1em;
        bottom: 1em;
    }
    section.color ul.box li:first-child .flex.point-check .click ul.thum {
        padding-left: 1.5em;
    }
    section.color ul.box li:nth-child(2) .flex.point-check .click ul.thum {
        padding-right: 1.5em;
    }
    section.color ul.box .flex.point-check .click figure {
        width: 60%;
    }
    
    /* qa */
    
    section.qa ul.subbox li {
        padding: 1em;
    }
    
    /* mesh */
    
    .mesh .border figure.ribbon {
        width: 40%;
    }
    
    
}

@media screen and (max-width : 42em) {
    /* common */
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    /* fv */
    .fv {
        background: none;
    }
    .fv:after {
        content: none;
    }
    .fv h1 {
        width: 95%;
        margin: 0 auto;
    }
    /* cvbtn */
    .cvbtn {
        display: block;
    }
    .cvbtntopwrap {
        max-width: 95%;
    }
    .cvbtn.fvtop {
        position: relative;
        transform: none;
        margin: 1em auto;
        width: 100%;
        left: initial;
    }
    .cvbtn.nishi {
        margin: 0 auto 4em auto;
    }
    .cvbtn a {
        width: 100%;
        padding: 1em;
        display: table;
    }
    /* intro */
    .intro {
        background: linear-gradient(#ffffff 40%, #e8f4f8 60%);
        padding: 2% 0 0 0;
    }
    /* detail */
    section.detail {
        background: url(../images/bg_circle.webp) 1em 5% / contain no-repeat;
        padding-top: 10%;
    }
    section.detail ul {
        justify-content: center;
        flex-flow: column;
    }
    section.detail ul li {
        margin-bottom: 5%;
    }
    section.detail ul li:first-child {
        padding-right: 0;
    }
    section.detail ul li:last-child {
        margin-bottom: 0;
    }
    section.detail p {
        margin: 1.5em 0;
    }
    section.detail p br {
        display: none;
    }
    section.detail figure {
        margin: 0 auto 5% auto;
    }
    section.detail picture {
        margin: 0 auto 8% auto;
    }
    /* movie */
    section.movie,
    section.style,
    section.color,
    section.flow {
        padding-top: 10%;
    }
    section.movie figure.movie-title,
    section.color figure.title,
    section.flow figure.title,
    section.qa figure.title {
        width: 100%;
        margin: 0 auto 8% auto;
    }
    section.movie figure.movie-caption {
        width: 100%;
    }
    section.movie p:last-child {
        margin: 0 auto 5% auto;
    }
    
    /* style */
    section.style .nayami {
        flex-flow: column;
        max-width: 100%;
    }
    section.style .nayami p {
        width: 100%;
        text-align: center;
    }
    section.style .nayami figure {
        width: 100%;
        padding-right: 0;
        padding-bottom: 1em;
    }
    section.style figure.title {
        width: 100%;
    }
    section.style .photo figure {
        width: 38%;
    }
    section.style .photo.nishi1,
    section.style .photo.yamamoto1 {
        margin: 0 auto 2em auto;
    }
    section.style .photo.nishi2 {
        margin: 0 auto;
    }    
    section.style .photo.yamamoto2 {
        margin: 0 auto 2em auto;
    }
    section.style .photo.nishi1 figure,
    section.style .photo.yamamoto1 figure {
        top: 0;
    }
    section.style .photo.nishi2 figure,
    section.style .photo.yamamoto2 figure {
        right: 0;
        left: initial;
        top: -2em;
    } 
    section.style .note.center {
        margin: 0 auto 2em auto;
    }
    section.style .flex {
        flex-flow: column;
    }
    section.style .flex picture,
    section.style .flex .text {
        width: 100%;
    }
    section.style .flex picture {
        padding-right: 0;
        padding-bottom: 2em;
    }
    section.style .kosei {
        padding: 5em 1.5em 1.5em 1.5em;
        margin: 3em auto 2em auto;
    }
    section.style .flex .text figure {
        padding-bottom: 1.5em;
    }
    
    /* color */
    
    section.color .lead {
        text-align: left;
    }
    section.color ul.box li:first-child .stylephoto,
    section.color ul.box li:nth-child(2) .stylephoto {
        flex-flow: column;
        margin: 0 auto 1em auto;
    }
    section.color ul.box .stylephoto picture {
        width: 100%;
        order: 2;
    }
    section.color ul.box li:first-child .stylephoto picture {
        padding-left: 0;
    }
    section.color ul.box li:nth-child(2) .stylephoto picture {
        padding-right: 0;
    }
    section.color ul.box .stylephoto dl {
        width: 100%;
        order: 1;
        position: relative;
    }
    section.color ul.box li:first-child .stylephoto dl,
    section.color ul.box li:nth-child(2) .stylephoto dl {
        background: url(../images/color_fuki_sp.png) center bottom / 100% auto no-repeat;
        position: relative;
        padding: 0 0 0 0;
        margin: 0 0 1.5em 0;
        left: initial;
        bottom: initial;
    }
    section.color ul.box li {
        padding: 1em;
    }
    section.color ul.box .flex.stylephoto dl dt {
        text-align: center;
        display: block;
        margin: 0 auto 1em auto;
    }
    section.color ul.box .flex.stylephoto dl dd {
        font-size: 14px;
        display: table;
        text-align: center;
        margin: 0 auto;
        padding-bottom: 1.5em;
    }
    section.color ul.box .flex.point-check {
        flex-flow: column;
    }
    section.color ul.box .flex.point-check .point {
        order: 1;
        width: 100%;
        margin-bottom: 2em;
        padding: 1em;
    }
    section.color ul.box .flex.point-check .click {
        order: 2;
    }
    section.color figure.pointtitle {
        display: table;
        margin: 0 auto;
        width: 100%;
    }
    section.color ul.box .flex.point-check .point p {
        font-size: clamp(14px, 2vw, 18px);
        width: 100%;
    }
    section.color ul.box li:first-child .flex.point-check .click ul.thum {
        padding-left: 0;
    }
    section.color ul.box li:nth-child(2) .flex.point-check .click ul.thum {
        padding-right: 0;
    }
    section.color ul.box .flex.point-check .click figure {
        width: 100%;
        margin: 0 auto 1em auto;
    }
    section.color .cvbtn {
        margin: 2em auto 0 auto;
    }
    
    /* flow */
    
    section.flow .content {
        flex-flow: column;
    }
    section.flow picture {
        padding-right: 0;
        width: 100%;
        padding-bottom: 1.5em;
    }
    .contact-wrap {
        flex-flow: column;
    }
    .contact-wrap figure {
        width: 80%;
    }
    .contact-wrap figure:first-of-type {
        margin-right: 0;
    }
    section.flow li:first-child .content dd {
        text-align: center;
    }
    
    /* qa */
    
    section.qa {
        padding-bottom: 3em;
    }
    section.qa ul.subbox dt span {
        display: block;
    }
    section.qa ul.subbox li {
    }
    section.qa ul.subbox li:first-child dl,
    section.qa ul.subbox li:nth-child(2) dl,
    section.qa ul.subbox li:nth-child(3) dl {
        background: none;
    }
    section.qa ul.subbox dl {
        padding: 0 0 0 0;
    }
    section.qa ul.subbox dt {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: flex-start;
    }
    section.qa ul.subbox dt:before {
        content: "";
        width: 3.25em;
        display: table;
        aspect-ratio: 55 / 64;
        margin-right: 1em;        
    }
    section.qa ul.subbox li:first-child dt:before {
        background: url(../images/qa_img1_sp.png) left / contain no-repeat;
    }
    section.qa ul.subbox li:nth-child(2) dt:before {
        background: url(../images/qa_img2_sp.png) left / contain no-repeat;
    }
    section.qa ul.subbox li:nth-child(3) dt:before {
        background: url(../images/qa_img3_sp.png) left / contain no-repeat;
    }
    section.qa ul.subbox dt p {
        display: block;
    }
    section.qa .contact-wrap figure:first-of-type,
    section.qa .contact-wrap figure:nth-child(2) {
        margin-bottom: 0.7em;
        margin-right: auto;
        margin-left: auto;
    }
    section.qa .contact-wrap {
        margin-left: 0;
    }
    section.flow .contact-wrap figure:first-of-type {
        margin-bottom: 0.7em;
    }
    
    /* mesh */
    
    .mesh .box {
        flex-flow: column;
        justify-content: center;
        margin: 0 auto 1em auto;
    }
    .mesh .border figure.ribbon {
        width: 60%;
    }
    .mesh figure.date {
        position: absolute;
        left: 0;
        top: 0;
    }
    .mesh .border {
        padding: 1em;
    }
    .mesh .box {
        padding: 1em;
    }
    .mesh figure.date {
        position: absolute;
        transform: translate(10%, -75%);
        top: 0;
        right: 0;
    }
    .mesh .inner {
        width: 85%;
    }
    .mesh .box figure:first-of-type {
        margin: 0 auto 2em auto;
    }
    
    
}