@import url('https://fonts.googleapis.com/css2?family=Oooh+Baby&display=swap&text=QA-Sstep0123456789');

:root {
    --green: #4BB482;
    --red: #F15B6B;
    --yellow: #F4BE5A;
    --orange: #DC9646;
    --gray: #5A6861;
    --blue: #42B1BA;
    --bg-beige: #FBF6E4;
    --bg-green: #D9E7DF;
    --bg-red: #F2E8EB;
    --bg-yellow: #F5E6B9;
}

.wrapper {
    font-family: "游ゴシック Medium", "Yu Gothic Medium", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", "M PLUS 1p", "M PLUS Rounded 1c", sans-serif;
}

.en {
    font-family: "Work Sans", sans-serif;
}

.mbtm-0 {
    margin-bottom: 0 !important;
}

.wrapper img {
    width: 100%;
    height: auto;
}

.wrp {
    position: relative;
}

/*==============================================================
header - intro
==============================================================*/

/* header --------------------*/
.main-header {
    padding: min(60px, 12vw) min(20px, 3vw) 0;
    /* background: linear-gradient(to bottom, var(--bg-beige) min(590px, 75%), var(--bg-green) min(590px, 75%)); */
    background-color: var(--bg-beige);
    position: relative;
    min-height: 550px;
}

@media screen and (max-width:767px) {
    .main-header {
        min-height: 75vw;
    }
}

.main-header .title {
    width: min(720px, 86vw);
    margin: 0 auto;
}

.main-header .title .calligraphy {
    display: block;
    width: min(300px, 60%);
    margin: 0 auto 2em;
}



/* intro --------------------*/
.intro-wrp {
    /* margin-top: -1em; */
    padding: 200px min(40px, 5vw) min(80px, 10vw);
    background-color: var(--bg-green);
    position: relative;
    z-index: 1;
}

@media screen and (max-width:767px) {
    .intro-wrp {
        padding-top: 4em;
    }
}

.intro-wrp .header-img {
    width: min(980px, 94vw);
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.intro-wrp .bg-img img {
    width: 100%;
    height: auto;
}

.intro-wrp .lead {
    margin: 0 auto 1em;
    font-size: 1.75em;
    font-weight: bold;
    line-height: 1.8;
    text-align: center;
}

@media screen and (max-width:767px) {
    .intro-wrp .lead {
        font-size: min(1.75em, 5vw);
    }
}

.intro-wrp .lead .calligraphy {
    display: block;
    width: min(270px, 50%);
    margin: 0 auto 2rem;
}

.intro-wrp .lead-sub {
    font-size: 1em;
    text-align: center;
    line-height: 1.8;
}

@media screen and (max-width:767px) {
    .intro-wrp .lead-sub {
        font-size: min(1em, 4vw);
        text-align: justify;
    }

    .intro-wrp .lead-sub .iblock {
        display: inline;
    }
}

.intro-wrp .premise-wrp {
    width: min(500px, 100%);
    margin: 4em auto 0;
    padding-top: min(5.5em, 17%);
    text-align: center;
    position: relative;
    z-index: 2;
}

.intro-wrp .premise-wrp::before {
    content: '';
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: var(--bg-beige);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.intro-wrp .premise-wrp .premise-title {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
}

@media screen and (max-width:767px) {
    .intro-wrp .premise-wrp .premise-title {
        font-size: min(1.2em, 4.2vw);
    }
}

.intro-wrp .premise-wrp p:not([class]) {
    margin: 1em auto 1.5em;
    line-height: 1.8;
}

.intro-wrp .premise-wrp .illust {
    width: min(194px, 40%);
    margin: 0 auto -4%;
}

.intro-wrp .premise-wrp .label {
    width: min(450px, 100%);
    margin: 0 auto;
    padding: 1.5em .5em;
    text-align: center;
    font-weight: bold;
    letter-spacing: .05em;
    color: #fff;
    background-color: var(--green);
}

/*==============================================================
article-list-wrp
==============================================================*/
.article-list-wrp {
    padding: min(80px, 12vw) min(40px, 5vw);
    background-color: var(--bg-beige);
    text-align: center;
}

.article-list-wrp .article-list-title {
    margin: 0 auto;
    font-weight: bold;
    font-size: 1.75em;
    line-height: 1.8;
}

@media screen and (max-width:767px) {
    .article-list-wrp .article-list-title {
        font-size: min(1.75em, 5vw);
    }
}

.article-list-wrp .article-list-title .calligraphy {
    display: block;
    width: min(260px, 40%);
    margin: 0 auto 2rem;
}

/* link */
.article-list {
    width: min(1200px, 100%);
    margin: min(4em, 10vw) auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: min(80px, 15vw) 2%;
}

.article-link {
    width: 32%;
    position: relative;
}

@media (max-width: 767px) {
    .article-link {
        width: min(520px, 100%);
        margin: 0 auto;
    }
}

.article-link.soon .thumbnail,
.article-link.soon .article-title {
    opacity: .4;
}

/* .article-link.soon::after {
    content: 'COMING SOON';
    display: inline-block;
    width: fit-content;
    padding: .5em 1em;
    font-weight: bold;
    font-size: min(1.2em, 4vw);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} */

.article-link.soon a {
    pointer-events: none;
}

.article-link.soon .link-btn {
    font-weight: bold;
    background-color: unset;
    border: unset;
    padding: 0;
    font-size: min(1.3em, 4vw);
}

.article-link.soon .link-btn::before,
.article-link.soon .link-btn::after {
    content: unset;
}

.vol01 {
    --article-color: var(--green);
    --article-bgcolor: var(--bg-green);
}

.vol02 {
    --article-color: var(--red);
    --article-bgcolor: var(--bg-red);
}

.vol03 {
    --article-color: var(--yellow);
    --article-bgcolor: var(--bg-yellow);
}

.vol04 {
    --article-color: var(--gray);
    --article-bgcolor: var(--bg-green);
}

.vol05 {
    --article-color: var(--orange);
    --article-bgcolor: var(--bg-yellow);
}

.article-link a {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: inherit;
    text-decoration: none;
    position: relative;
}

@media (max-width: 767px) {
    .article-link a {
        display: grid;
        grid-template-areas: 'thumb title' 'thumb btn';
        grid-template-columns: 40% 1fr;
        align-items: center;
        gap: 0 1em;
    }

    .article-link:nth-child(even) a {
        grid-template-areas: 'title thumb' 'btn thumb';
        grid-template-columns: 1fr 40%;
    }
}

.article-link .thumbnail {
    grid-area: thumb;
    width: min(250px, 100%);
    margin: 0 auto;
    position: relative;
}

@media (max-width: 767px) {
    .article-link .thumbnail {
        align-self: center;
    }
}

.article-link .thumbnail::before {
    content: '';
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: #fff;
    position: absolute;
    z-index: 0;
}

.article-link .thumbnail img {
    position: relative;
    z-index: 1;
}

.article-link .badge {
    --size: 6em;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    text-align: center;
    color: #fff;
    background-color: var(--article-color, var(--green));
    border-radius: 100%;
    font-size: 0.875em;
    position: absolute;
    left: 0;
    top: 0;
    translate: max(-50%, -2vw);
    z-index: 2;
}

@media (max-width: 767px) {
    .article-link .badge {
        --size: 5em;
        translate: max(-50%, -2vw) -30%;
        font-size: min(0.875em, 3vw);
    }
}

.article-link .article-title {
    grid-area: title;
    margin: 1em auto;
    font-size: min(1.375em, 2.2vw);
    font-weight: bold;
}

@media (max-width: 767px) {
    .article-link .article-title {
        margin: 0 auto 1em;
        font-size: min(1.375em, 4vw);
        align-self: end;
    }
}

.article-link .article-title .em {
    font-size: min(1.4em, 4.6vw);
    font-weight: bold;

}

.article-link .link-btn {
    grid-area: btn;
    width: 12em;
    margin: auto 0 0;
    text-align: center;
    line-height: 3;
    background-color: #fff;
    border: solid 1px;
    border-radius: 100vmax;
    font-size: min(1em, 2vw);
    transition: all .3s ease;
}

.link-btn {
    text-decoration: none;
    position: relative;
}

@media (max-width: 767px) {
    .article-link .link-btn {
        margin: 0 auto;
        font-size: min(1em, 3.6vw);
        align-self: start;
    }
}

@media (hover: hover) {
    .article-link .link-btn:hover {
        color: #fff;
        background-color: var(--article-color);
    }
}

.link-btn::before,
.link-btn::after {
    content: '';
    width: 1.2em;
    border-top: solid 1px;
    position: absolute;
    right: 1em;
    top: calc(50% - 1px);
    transition: right .3s ease;
}

.link-btn::after {
    width: .5em;
    top: calc(50% - .5px);
    rotate: 45deg;
    transform-origin: right center;
}

@media (hover: hover) {

    .link-btn:hover::before,
    .link-btn:hover::after {
        right: .7em;
    }
}


/*==============================================================
page
==============================================================*/

/* contents-hd --------------------*/
.article-wrp .contents-header {
    padding: min(40px, 5vw) min(20px, 5vw) min(60px, 10vw);
    background-color: var(--bg-beige);
}

.article-wrp .contents-header .calligraphy {
    display: block;
    width: min(180px, 30%);
    margin: 0 auto .5em;
}

.article-wrp .contents-header .title {
    display: block;
    width: min(300px, 70%);
    margin: 0 auto;
}

/* page-header --------------------*/
.page-header {
    padding: 100px 160px 80px;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .page-header {
        padding: min(100px, 20vw) min(180px, 10vw) min(200px, 25vw);
        position: relative;
    }
}

.page-header .badge {
    --size: 6em;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    text-align: center;
    color: #fff;
    background-color: var(--article-color);
    border-radius: 100%;
    font-size: 1.125em;
    font-weight: bold;
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% -25%;
    z-index: 2;
}

@media (max-width: 767px) {
    .page-header .badge {
        --size: 5em;
        font-size: min(1.125em, 4.2vw);
    }
}

.page-header .page-title {
    text-align: center;
    font-size: min(2.5em, 4.2vw);
    font-weight: bold;
}

@media (max-width: 767px) {
    .page-header .page-title {
        font-size: min(2.5em, 6.4vw);
    }
}

.page-header .page-illust {
    position: absolute;
    left: max(calc(50% - 580px), 3%);
}

.vol01 .page-header .page-illust {
    width: min(204px, 20vw);
    bottom: 0;
}

.vol02 .page-header .page-illust {
    width: min(230px, 20vw);
    bottom: -6%;
    z-index: 2;
}

.vol03 .page-header .page-illust {
    width: min(214px, 24vw);
    top: 0;
    bottom: unset;
}

.vol04 .page-header .page-illust {
    width: min(220px, 20vw);
    bottom: -6%;
}

.vol05 .page-header .page-illust {
    width: min(210px, 18vw);
    left: max(calc(50% - 600px), 1%);
    bottom: -6%;
}

@media (max-width: 767px) {
    .page-header .page-illust {
        left: 50% !important;
        translate: -50% !important;
    }

    .vol01 .page-header .page-illust {
        width: min(204px, 25vw);
    }

    .vol02 .page-header .page-illust {
        width: min(230px, 28vw);
    }

    .vol03 .page-header .page-illust {
        width: min(200px, 19vw);
        top: unset;
        bottom: -4%;
    }

    .vol04 .page-header .page-illust {
        width: min(220px, 32vw);
    }

    .vol05 .page-header .page-illust {
        width: min(210px, 32vw);
        bottom: -4%;

    }
}

/* page-intro --------------------*/
.page-intro {
    padding: min(80px, 10vw) min(20px, 5vw);
    text-align: center;
    color: #fff;
    background-color: var(--article-color);
    position: relative;
}

@media (max-width: 767px) {
    .page-intro {
        padding: min(80px, 10vw) min(80px, 5vw) min(150px, 25vw);
        position: relative;
    }
}

.page-intro .lead {
    font-size: min(2.1em, 4vw);
    font-weight: bold;
}

@media (max-width: 767px) {
    .page-intro .lead {
        font-size: min(2.1em, 5vw);
    }
}

.page-intro .sub-lead {
    margin-top: 1.5em;
    font-size: 1.125em;
    font-weight: bold;
    line-height: 1.8;
}

@media (max-width: 767px) {
    .page-intro .sub-lead {
        font-size: min(1em, 3.8vw);
    }
}

.page-intro .intro-illust {
    position: absolute;
    right: max(calc(50% - 540px), 2%);
    bottom: 0;
}

.vol01 .page-intro .intro-illust {
    width: min(160px, 18vw);
}

.vol02 .page-intro .intro-illust {
    width: min(160px, 18vw);
    bottom: -3%;
}

.vol03 .page-intro .intro-illust {
    width: min(200px, 18vw);
    bottom: -8%;
    z-index: 2;
}

.vol04 .page-intro .intro-illust {
    width: min(220px, 20vw);
    bottom: -6%;
}

.vol05 .page-intro .intro-illust {
    width: min(320px, 24vw);
    right: max(calc(50% - 660px), 1%);
    bottom: -10%;
}

@media (max-width: 767px) {
    .page-intro .intro-illust {
        right: 50% !important;
        translate: 50% !important;
    }

    .vol01 .page-intro .intro-illust {
        width: min(140px, 25vw);
    }

    .vol02 .page-intro .intro-illust {
        width: min(140px, 28vw);
    }

    .vol03 .page-intro .intro-illust {
        width: min(180px, 32vw);
        bottom: -5%;
    }

    .vol04 .page-intro .intro-illust {
        width: min(200px, 33vw);
    }

    .vol05 .page-intro .intro-illust {
        width: min(300px, 40vw);
    }
}

/* section-wrp --------------------*/
.section-wrp {
    --bg-color: var(--article-bgcolor, var(--bg-green));
    --wrp-color: var(--bg-beige);
    padding: min(100px, 15vw) 0 min(100px, 12vw);
    background-color: var(--bg-color);
}

.section-wrp.section-even {
    --bg-color: var(--bg-beige);
    --wrp-color: var(--article-bgcolor);
}

.section-wrp .section-title {
    width: 100%;
    margin-bottom: min(100px, 12vw);
    padding: 0 min(40px, 7vw);
    font-size: min(2.1em, 6vw);
    font-weight: bold;
    text-align: center;
}

.section-wrp .section-title .calligraphy {
    display: block;
    width: min(220px, 50%);
    margin: 0 auto 2rem;
}

.section-wrp .section-lead {
    width: 100%;
    margin-top: max(-60px, -7vw);
    margin-bottom: min(100px, 12vw);
    padding: 0 min(40px, 7vw);
    font-size: 1.125em;
    line-height: 2;
    text-align: center;

}

@media (max-width: 767px) {
    .section-wrp .section-lead {
        font-size: min(1.125em, 4vw);
        text-align: justify;
    }
}

/* flex-wrp */
.section-wrp .flex-inner {
    width: min(1200px, 100%);
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

@media (max-width: 767px) {
    .section-wrp .flex-inner {
        padding: 0 7vw;

    }
}

.section-wrp .flex-inner+.flex-inner {
    margin-top: min(100px, 15vw);

}

.section-wrp .flex-inner .text {
    width: 50%;
    padding: 0 3em;
    line-height: 1.8;
    z-index: 1;
}

.section-wrp .flex-inner .text:has(.mistake-hd) {
    padding: 0 1em 0 5em;
}

@media (max-width: 767px) {
    .section-wrp .flex-inner .text {
        width: 100%;
        padding: 0 !important;
        order: 1;
    }
}

/* step-hd */
.section-wrp .flex-inner .text .step-hd {
    width: fit-content;
    margin-left: -.5em;
    font-family: "Oooh Baby", serif;
    font-size: 2.2em;
    font-weight: bold;
    color: var(--red);
    position: relative;
}

@media (max-width: 767px) {
    .section-wrp .flex-inner .text .step-hd {
        font-size: min(2.2em, 7vw);
        margin-left: 0;

    }
}

.section-wrp .flex-inner .text .step-hd::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(4.2em, 30vw);
    height: min(4.2em, 30vw);
    border-radius: 100%;
    background-color: var(--wrp-color);
    translate: -50% -45%;
    z-index: -1;
}

/* mistake-hd */
.section-wrp .flex-inner .text .mistake-hd {
    width: fit-content;
    margin-left: -2.5em;
    margin-bottom: -.75em;
    font-size: 1.25em;
    font-weight: bold;
    color: #fff;
    text-align: center;
    position: relative;
}

@media (max-width: 767px) {
    .section-wrp .flex-inner .text .mistake-hd {
        font-size: min(1.15em, 4.6vw);
        margin-left: 0;
        margin-bottom: 0;
    }
}

.section-wrp .flex-inner .text .mistake-hd span {
    display: block;
    margin: 0 auto;
    font-family: "Oooh Baby", serif;
    font-size: 1.8em;
    line-height: 1;
}

.section-wrp .flex-inner .text .mistake-hd::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(6.2em, 30vw);
    height: min(6.2em, 30vw);
    mask-image: url('../img/hd-bg1.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    background-color: var(--article-color);
    translate: -50% -52%;
    z-index: -1;
}

/* qa-hd */
.section-wrp .qa-hd {
    width: fit-content;
    margin-left: -50px;
    margin-bottom: -5px;
    font-family: "Oooh Baby", serif;
    font-size: 2.2em;
    font-weight: bold;
    text-align: center;
    position: relative;
}

.section-wrp .qa-hd.q {
    color: var(--blue);
}

.section-wrp .qa-hd.a {
    color: #fff;
}

@media (max-width: 767px) {
    .section-wrp .qa-hd {
        font-size: min(2.2em, 7vw);
        margin-left: .1em;
        margin-bottom: 0;
    }
}

.section-wrp .qa-hd::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(4em, 30vw);
    height: min(4em, 30vw);
    mask-image: url('../img/hd-bg2.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    translate: -48% -52%;
    z-index: -1;
}

.section-wrp .qa-hd.q::before {
    background-color: var(--wrp-color);
}

.section-wrp .qa-hd.a::before {
    background-color: var(--blue);
}

/* flex-title */
.section-wrp .flex-inner .text .flex-title {
    margin: 0 auto 1em;
    font-size: 1.6em;
    line-height: 1.6;
    font-weight: bold;
}

@media screen and (max-width:767px) {
    .section-wrp .flex-inner .text .flex-title {
        font-size: min(1.6em, 5.2vw);
    }
}

.section-wrp .flex-inner .text p {
    line-height: 2;
    text-align: justify;
}

@media screen and (max-width:767px) {
    .section-wrp .flex-inner .text p {
        font-size: min(1em, 3.8vw);
    }
}

.section-wrp .flex-inner .photo {
    width: 48%;
    border-radius: min(20px, 5vw);
    overflow: hidden;
}

.section-wrp .flex-inner .photo .inner-photo {
    border-radius: min(20px, 4vw);
    overflow: hidden;
}

.section-wrp .flex-inner .photo-wrp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8% 4%;
}

.section-wrp .flex-inner .photo-wrp .h2 {
    grid-row: 2/1;
}

.section-wrp .flex-inner .photo-wrp .h3 {
    grid-row: 1/3;
}

/* .section-wrp .flex-inner .photo-wrp {
    display: grid;
    grid-template-columns: 1fr 1fr;

}

.section-wrp .flex-inner .w100 {
    width: 100%;
}

.section-wrp .flex-inner .w50 {
    width: 48%;
}

.section-wrp .flex-inner .w100 {
    width: 100%;
} */

.section-wrp .flex-inner .photo.no-r {
    border-radius: 0;
    overflow: unset;
}

.section-wrp .flex-inner .radius {
    border-radius: min(12px, 4vw);
    overflow: hidden;
}

@media (max-width: 767px) {
    .section-wrp .flex-inner .photo {
        width: 100%;
        margin: 2em auto 0;
        order: 2;
    }
}

/* point-wrp */
.section-wrp .point-wrp {
    width: min(calc(50vw + 550px), 97vw);
    margin-top: min(100px, 12vw);
    margin-left: auto;
    border-radius: 50px 0 0 50px;
    background-color: var(--wrp-color);
}

.section-wrp.section-even .point-wrp {
    margin-left: 0;
    border-radius: 0 50px 50px 0;
}

.section-wrp .point-wrp .point-inner {
    /* width: min(980px, 100%); */
    width: min(1100px, 100%);
    padding: min(60px, 10vw) min(60px, 7vw) min(80px, 15vw) min(60px, 4vw);
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.section-wrp.section-even .point-wrp .point-inner {
    margin-left: auto;
    padding: min(60px, 10vw) min(60px, 4vw) min(80px, 15vw) min(60px, 7vw);
}

.section-wrp .point-wrp .point-inner .photo {
    width: min(320px, 32%);
    border-radius: 100%;
    overflow: hidden;
    align-self: flex-start;
}

@media (max-width: 767px) {
    .section-wrp .point-wrp .point-inner .photo {
        width: 70%;
        margin: 2em auto 0;
        order: 2;
    }
}

.section-wrp .point-wrp .point-inner .text {
    width: min(490px, 50vw);
    margin: 0 auto;
    line-height: 1.8;
}

@media (max-width: 767px) {
    .section-wrp .point-wrp .point-inner .text {
        width: 100%;
    }
}

.section-wrp .point-wrp .point-inner .point-title {
    width: 100%;
    margin: 0 auto 1em;
    font-weight: bold;
    font-size: min(1.45em, 4.8vw);
    text-align: center;
}

.section-wrp .point-wrp .point-inner .point-title .attention-hd {
    font-size: .78em;
}

/* attention-hd */
.section-wrp .attention-hd {
    display: block;
    width: fit-content;
    margin: 0 auto 1em;
    padding: .5em 1.5em;
    font-weight: bold;
    position: relative;
}

.section-wrp .attention-hd::before,
.section-wrp .attention-hd::after {
    content: '';
    display: block;
    width: 0;
    height: 2em;
    border-left: solid 1px;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
}

.section-wrp .attention-hd::before {
    left: 0;
    rotate: -30deg;
}

.section-wrp .attention-hd::after {
    right: 0;
    rotate: 30deg;
}

.section-wrp .point-wrp .point-inner .point-lead {
    width: 100%;
    font-size: min(1.3em, 4vw);
    font-weight: bold;
    text-align: center;
    line-height: 1.8;
}

.section-wrp .point-wrp .point-inner .point-lead .em {
    color: var(--article-color);
    font-size: 1.3em;
}

@media (max-width: 1100px) {
    .section-wrp .point-wrp .point-inner .point-lead .em {
        font-size: 1.2em;
    }
}

.section-wrp .point-wrp .point-inner p {
    line-height: 2;
    text-align: justify;
}

@media screen and (max-width:767px) {
    .section-wrp .point-wrp .point-inner p {
        font-size: min(1em, 3.8vw);
    }
}

.section-wrp .point-wrp .point-inner .text ul {
    margin: 1em 0;
}

.section-wrp .point-wrp .point-inner .text ul li {
    padding-left: 1.5em;
    position: relative;
}

@media screen and (max-width:767px) {
    .section-wrp .point-wrp .point-inner .text ul li {
        font-size: min(1em, 3.8vw);
    }
}

.section-wrp .point-wrp .point-inner .text ul li::before {
    content: '';
    width: .7em;
    height: .7em;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: .5lh;
    translate: 0 -52%;
    background-color: var(--red);
}

.section-wrp .point-wrp .point-inner .illust {
    width: min(130px, 26vw);
    position: absolute;
    right: 3%;
    bottom: 0;
    translate: 0 15%;
}

/* link-wrp */
.link-wrp {
    width: fit-content;
    margin: min(80px, 12vw) auto 0;
    position: relative;
}

.link-wrp .link-btn {
    display: block;
    width: fit-content;
    padding: .75em 5em;
    border-radius: 100vmax;
    background-color: var(--red);
    color: #fff;
    font-size: min(1.25em, 4vw);
    font-weight: bold;
    text-align: center;
}

.link-wrp .illust {
    width: 190px;
    position: absolute;
    right: 100%;
    bottom: 0;
    translate: 60% 15%;
}

@media screen and (max-width:767px) {
    .link-wrp .illust {
        width: min(160px, 32vw);
        translate: 70% 15%;
    }
}

/* vol02 -----------------------*/
@media (max-width: 1100px) {
    .vol02 .section-wrp:not(.section-even) .point-wrp .point-inner {
        padding-bottom: min(80px, 20vw);
    }
}

.section-wrp .point-wrp .point-inner .point-lead br.bp {
    display: none;
}

@media (max-width: 1100px) {
    .section-wrp .point-wrp .point-inner .point-lead br.bp {
        display: block;
    }
}

.vol02 .section-wrp:not(.section-even) .point-wrp .point-inner .illust {
    width: min(170px, 20vw);
    translate: 40% 0;
}

@media screen and (max-width:767px) {
    .vol02 .section-wrp:not(.section-even) .point-wrp .point-inner .illust {
        width: min(170px, 20vw);
        translate: 10% 0;
    }
}

.vol02 .section-wrp.section-even .point-wrp .point-inner .illust {
    width: min(170px, 26vw);
    left: 3%;
    right: unset;
    translate: 0;
}

/* vol03 -----------------------*/
.vol03 .page-header {
    z-index: 5;
}

.vol03 .page-intro {
    z-index: 4;
}

.vol03 .section-wrp {
    position: relative;
}

.vol03 .section-wrp:not(.fav-interior-wrp)::after {
    content: '';
    width: 100%;
    height: min(120px, 14vw);
    position: absolute;
    left: 0;
    top: calc(100% - 2px);
    background-color: var(--bg-color);
    clip-path: polygon(0 0, 100% 0, 100% 1px, 50% 100%, 0 1px);
    z-index: 1;
}

.vol03 .section-wrp ul {
    margin: min(60px, 5vw) auto 0;
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: min(2.5em, 5vw) 5%;
}

@media (max-width: 767px) {
    .vol03 .section-wrp ul {
        padding: 0 7vw;
    }
}

@media (max-width: 600px) {
    .vol03 .section-wrp ul {
        gap: min(2.5em, 7vw) 8%;
    }
}

.vol03 .section-wrp ul:not(.fav-interior-list) li {
    cursor: pointer;
}

.vol03 .section-wrp ul li .thumb {
    border-radius: min(20px, 5vw);
    overflow: hidden;
    position: relative;
    margin-bottom: 1.5em;
}

.vol03 .section-wrp ul.fav-interior-list li .thumb {
    border-radius: min(20px, 5vw);
    margin-bottom: 0;
}

.vol03 .section-wrp ul:not(.fav-interior-list) li .thumb::after {
    content: '';
    width: 101%;
    height: 101%;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    pointer-events: none;
    border-radius: min(20px, 5vw);
    border: solid 0 var(--yellow);
    transition: border .3s ease;
}

@media (hover: hover) {

    .vol03 .section-wrp ul li:hover .thumb::after,
    .vol03 .section-wrp ul li.current .thumb::after {
        border: solid 6px var(--yellow);
    }
}

.vol03 .section-wrp ul li p {
    margin-top: 1em;
    text-align: center;
    font-size: min(1.125em, 3vw);
}

@media (max-width: 460px) {
    .vol03 .section-wrp ul li p {
        font-size: min(1em, 3.8vw);
    }
}

/* floor-wrp */
.vol03 .floor-wrp {
    padding-bottom: min(40px, 5vw);
    z-index: 3;
}

.vol03 .floor-wrp .floor-list {
    width: min(880px, 100%);
}

@media (max-width: 600px) {
    .vol03 .floor-wrp .floor-list {
        gap: 3vw 8%;
    }
}

.vol03 .floor-wrp .floor-list li {
    width: 16%;
}

@media (max-width: 767px) {
    .vol03 .floor-wrp .floor-list li {
        width: 24%;
    }
}

@media (max-width: 600px) {
    /* .vol03 .floor-wrp .floor-list li {
        width: 46%;
    } */

    .vol03 .floor-wrp .floor-list li:nth-child(3) {
        /* margin: 0 25%; */
    }
}

.vol03 .floor-wrp .floor-list li .thumb,
.vol03 .floor-wrp .floor-list li .thumb::after {
    border-radius: 100% !important;
}

/* style-list */
.vol03 .style-wrp {
    --bg-color: var(--bg-beige);
    padding-top: min(200px, 24vw);
    padding-bottom: min(40px, 5vw);
    z-index: 2;
}

.vol03 .style-wrp .style-list {
    width: min(1300px, 100%);
}

.vol03 .style-wrp .style-list li {
    width: 30%;
}

@media (min-width: 1025px) {
    .vol03 .style-wrp .style-list.ecru li:nth-child(2) {
        margin-left: 5%;
    }

    .vol03 .style-wrp .style-list.ecru li:nth-child(4) {
        margin-right: 5%;
    }
}

@media (max-width: 1024px) {
    .vol03 .style-wrp .style-list li {
        width: 47.5%;
    }
}

@media (max-width: 767px) {
    .vol03 .style-wrp .style-list li {
        width: 100%;
    }
}

/* fav */
.vol03 .fav-interior-wrp {
    --bg-color: #fff;
    padding-top: min(200px, 24vw);
    padding-bottom: 0;
    z-index: 1;
}

.vol03 .fav-interior-wrp .section-title {
    font-size: min(2.1em, 5.8vw);
}

.vol03 .fav-interior-wrp .fav-interior-list {
    width: min(1000px, 100%);
}

.vol03 .fav-interior-wrp .fav-interior-list li {
    width: 47.5%;
}

@media (max-width: 600px) {
    .vol03 .fav-interior-wrp .fav-interior-list li {
        width: 100%;
    }
}

.vol03 .fav-interior-wrp .fav-interior-list li .thumb {
    aspect-ratio: 1/.75;
}

.vol03 .fav-interior-wrp .fav-interior-list li .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #fff;
}

.vol03 .pagination {
    padding-top: min(200px, 24vw);
}

/* vol04 -----------------------*/
.section-wrp .qa-title-wrp {
    width: min(1200px, 100%);
    margin: 0 auto min(80px, 12vw);
    padding: 0 calc(2em + 10px) 3em calc(5em + 10px);
    position: relative;
    z-index: 1;
}

@media screen and (max-width:767px) {
    .section-wrp .qa-title-wrp {
        padding: 0 7vw 2em;
    }
}

.section-wrp .qa-title-wrp::after {
    content: '';
    display: block;
    width: calc(100% - 20px);
    position: absolute;
    left: 50%;
    bottom: 0;
    border-top: solid 1px;
    translate: -50%;
}

@media screen and (max-width:767px) {
    .section-wrp .qa-title-wrp::after {
        width: calc(100% - 14vw);
    }
}

.section-wrp .qa-title-wrp .qa-title {
    line-height: 1.6;
    font-size: 1.6em;
    font-weight: bold;
}

@media screen and (max-width:767px) {
    .section-wrp .qa-title-wrp .qa-title {
        font-size: min(1.6em, 5.4vw);
    }
}

.section-wrp .flex-inner .text:has(.qa-hd) {
    padding: 0 2em 0 5em;
}

.section-wrp .advice-wrp {
    width: min(900px, 100%);
    margin: min(100px, 15vw) auto 0;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width:767px) {
    .section-wrp .advice-wrp {
        padding: 0 7vw;
    }
}

.section-wrp .advice-wrp .hd-wrp {
    width: 164px;
    position: relative;
}

@media screen and (max-width:767px) {
    .section-wrp .advice-wrp .hd-wrp {
        width: 24%;
    }
}

.section-wrp .advice-wrp .hd-wrp .attention-hd {
    width: max-content;
    position: absolute;
    left: 50%;
    bottom: 95%;
    translate: -50%;
    font-size: min(.85em, 3.2vw);
    text-align: center;
}

@media screen and (max-width:767px) {
    .section-wrp .advice-wrp .hd-wrp .attention-hd {
        padding: .5em min(1.5em, 2.5vw);
    }
}

.section-wrp .advice-wrp .hd-wrp .person {
    width: 100%;
    aspect-ratio: 1/1;
    padding-top: 12%;
    background-color: var(--wrp-color);
    border-radius: 100%;
    overflow: hidden;
}

.section-wrp .advice-wrp .fukidashi {
    width: calc(100% - 164px - min(80px, 7vw));
    padding: 2em 8%;
    background-color: var(--wrp-color);
    border-radius: min(20px, 5vw);
    position: relative;
}

@media screen and (max-width:767px) {
    .section-wrp .advice-wrp .fukidashi {
        width: 70%;
        padding: 1.25em;
    }
}

.section-wrp .advice-wrp .fukidashi::before {
    content: '';
    width: min(1.5em, 4vw);
    height: min(2em, 6vw);
    position: absolute;
    right: 99%;
    top: 50%;
    translate: 0 -50%;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    background-color: var(--wrp-color);
}

.section-wrp .advice-wrp .fukidashi p {
    line-height: 1.8;
    font-size: min(1em, 3.8vw);
    text-align: justify;

}

.section-wrp .point-wrp .referencemov-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .section-wrp .point-wrp .referencemov-list {
        justify-content: center;
        gap: 5vw;
    }
}

.section-wrp .point-wrp .referencemov-list li {
    width: min(290px, 32%);
    overflow: hidden;
    border-radius: min(20px, 5vw);
}

@media (max-width: 767px) {
    .section-wrp .point-wrp .referencemov-list li {
        width: min(300px, 100%);
    }
}

.section-wrp .point-wrp .referencemov-list li .mov-inner {
    padding-bottom: 178%;
}

.vol04 .section-wrp .point-wrp .point-inner .illust {
    width: min(150px, 28vw);
    right: -1%;
    translate: 0;
    transform: rotateY(180deg);
    pointer-events: none;
}

/* vol05 -----------------------*/
.section-wrp .support-wrp {
    width: min(1080px, 90vw);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: min(80px, 5vw) min(80px, 4%);
}

.section-wrp .support-wrp .support {
    width: min(500px, 48%);
    background-color: var(--bg-beige);
    border-radius: min(20px, 5vw);
    overflow: hidden;
}

@media (max-width: 767px) {
    .section-wrp .support-wrp .support {
        width: 100%;
    }
}

.section-wrp .support-wrp .support .text {
    padding: 2.5em;
}

@media (max-width: 767px) {
    .section-wrp .support-wrp .support .text {
        padding: 2em;
    }
}

.section-wrp .support-wrp .support .support-title {
    margin: 0 auto 1em;
    font-size: min(1.6em, 2.5vw);
    font-weight: bold;
}

@media screen and (max-width:767px) {
    .section-wrp .support-wrp .support .support-title {
        font-size: min(1.6em, 5.4vw);
    }
}

.section-wrp .support-wrp .support p {
    line-height: 2;
    text-align: justify;
}

@media screen and (max-width:767px) {
    .section-wrp .support-wrp .support p {
        font-size: min(1em, 3.8vw);
    }
}

/* pagination --------------------*/
.pagination {
    padding: min(80px, 12vw) min(40px, 5vw);
}

.pagination .btn-wrp {
    width: min(460px, 100%);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5em;
}

.pagination .btn-wrp .link-btn {
    width: 40%;
    flex-grow: 1;
    margin: auto 0 0;
    padding: 1em 3em;
    text-align: center;
    line-height: 1.4;
    color: #000;
    background-color: #fff;
    border: solid 1px #000;
    border-radius: 100vmax;
    font-size: min(1em, 2vw);
}

.pagination .btn-wrp .link-btn.totop {
    width: 100%;
}

@media (max-width: 767px) {
    .pagination .btn-wrp .link-btn {
        font-size: min(1em, 3.2vw);
    }
}

.pagination .btn-wrp .link-btn:not(.next)::before,
.pagination .btn-wrp .link-btn:not(.next)::after {
    left: 1em;
    right: unset;
    transition: left .3s ease;
}

.pagination .btn-wrp .link-btn:not(.next)::after {
    rotate: -45deg;
    transform-origin: left center;
}

@media (hover: hover) {

    .pagination .btn-wrp .link-btn:not(.next):hover::before,
    .pagination .btn-wrp .link-btn:not(.next):hover::after {
        left: .7em;
        right: unset;
    }
}