@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

.wrapper {
    --pink: #d27eb1;
    --sky: #6eb9d2;
    --yellow: #f5e696;
    --bg-sky: #daefed;
    --bg-beige: #fbf6e4;
    font-weight: bold;
    font-weight: 500;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "Meiryo", system-ui, sans-serif;
}

.inner {
    width: min(1080px, 90vw);
    margin: 0 auto;
    padding: min(80px, 15vw) 0;
}

.inner960 {
    width: min(960px, 90vw);
    margin: 0 auto;
}

.inner780 {
    width: min(780px, 90vw);
    margin: 0 auto;
}

.mark,
.mark-hd {
    background: repeating-linear-gradient(180deg, transparent 0, transparent .7lh, color-mix(in srgb, var(--pink) 40%, #fff) .7lh, color-mix(in srgb, var(--pink) 40%, #fff) calc(.7lh + .3em), transparent calc(.7lh + .3em), transparent 1lh);
}

.mark-hd {
    margin: -.1em 0 -.15em;
    font-size: 1.6em;
    line-height: 1.6;
}

.m-auto {
    width: fit-content;
    margin-inline: auto;
}

.shikujiri img {
    width: auto;
    height: 100%;
    vertical-align: -.2em;
}

.note {
    font-weight: normal !important;
}


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

tochisagashi top

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

/* header
------------------------------------------*/
.main-header {
    width: 100%;
    height: 550px;
    background: url(../img/bg-pattern1.svg) no-repeat left center / contain,
        url(../img/bg-pattern2.svg) no-repeat right center / contain;
    position: relative;
    z-index: 0;
}

@media screen and (max-width: 767px) {
    .main-header {
        height: 80vw;
        background: url(../img/bg-pattern1.svg) no-repeat left -55% center / contain,
            url(../img/bg-pattern2.svg) no-repeat right -50% center / contain;
    }
}

.main-header .title {
    width: min(710px, 82vw);
    padding-top: min(80px, 12vw);
    margin: 0 auto;
    z-index: 2;
}

.main-header-img {
    width: min(580px, 90%);
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -47%;
    z-index: 1;
}

.main-header-img img {
    width: 100%;
    height: auto;
}

/* main
------------------------------------------*/

/* intro */
.intro-wrp {
    background-color: var(--bg-beige);
}

.intro-wrp .hd {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    font-size: min(4rem, 6.2vw);
    position: relative;
}

.intro-wrp .hd::before,
.intro-wrp .hd::after {
    content: '';
    height: 1.5em;
    border-left: solid 2px;
    position: absolute;
    bottom: -.1em;
}

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

    .intro-wrp .hd::before,
    .intro-wrp .hd::after {
        height: 2em;
    }
}

.intro-wrp .hd::before {
    right: calc(100% + 1em);
    rotate: -25deg;
}

.intro-wrp .hd::after {
    left: calc(100% + 1em);
    rotate: 25deg;
}

.intro-wrp .survey-figure {
    max-width: 90%;
    margin: 30px auto 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    translate: -15px;
}

.intro-wrp .survey-figure .summary {
    width: min(570px, 62%);
}

.intro-wrp .survey-figure .graph {
    width: min(330px, 35%);
    margin-top: 50px;
}

@media screen and (max-width: 600px) {
    .intro-wrp .survey-figure {
        width: min(440px, 100%);
        margin: 2em auto;
        gap: 0;
        justify-content: space-between;
        translate: 0;
    }

    .intro-wrp .survey-figure .summary {
        width: 45%;
        scale: 1.65;
        translate: 3%;
        transform-origin: left top;
    }

    .intro-wrp .survey-figure .graph {
        width: 55%;
        margin-top: min(110px, 24vw);
    }
}

/* comment-wrp */
.intro-wrp .comment-wrp {
    width: min(940px, 100%);
    /* height: 17em; */
    margin: 30px auto 0;
    position: relative;
}

@media screen and (max-width: 767px) {
    .intro-wrp .comment-wrp {
        height: auto;
    }
}

.intro-wrp .comment-wrp .fukidashi {
    width: max-content;
    padding: 1em 1.5em;
    display: flex;
    align-items: center;
    gap: 1em;
    border: solid 1px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    --fukidashi-set: 15%;
}

.intro-wrp .comment-wrp .fukidashi::before,
.intro-wrp .comment-wrp .fukidashi::after {
    content: '';
    width: 2em;
    height: 1.5em;
    position: absolute;
    left: var(--fukidashi-set);
    top: 100%;
    clip-path: polygon(0 0, 100% 0, 80% 100%);
}

.intro-wrp .comment-wrp .fukidashi::before {
    background-color: currentColor;
}

.intro-wrp .comment-wrp .fukidashi::after {
    margin-top: -1.75px;
    margin-left: -.5px;
    background-color: #fff;
}

@media screen and (max-width: 600px) {
    .intro-wrp .comment-wrp .fukidashi {
        --fukidashi-set: 8%;
    }

    .intro-wrp .comment-wrp .fukidashi::before,
    .intro-wrp .comment-wrp .fukidashi::after {
        width: 1.5em;
        height: 1.25em;
    }
}

.intro-wrp .comment-wrp .fukidashi:nth-child(2) {
    margin-left: auto;
    position: relative;
    translate: -20% -15%;
    --fukidashi-set: 80%;
}

.intro-wrp .comment-wrp .fukidashi:nth-child(2)::before,
.intro-wrp .comment-wrp .fukidashi:nth-child(2)::after {
    transform: rotateY(180deg);
}

.intro-wrp .comment-wrp .fukidashi:nth-child(2)::after {
    margin-left: .5px;
}

@media screen and (max-width: 800px) {
    .intro-wrp .comment-wrp .fukidashi:nth-child(2) {
        margin-bottom: 1em;
        translate: 0 -15%;
    }
}

.intro-wrp .comment-wrp .fukidashi:nth-child(3) {
    margin: 0 auto;
    position: relative;
    translate: -10%;
    --fukidashi-set: 45%;
}

@media screen and (max-width: 767px) {
    .intro-wrp .comment-wrp .fukidashi:nth-child(3) {
        translate: unset;
    }
}

.intro-wrp .comment-wrp .fukidashi .face {
    --face-size: 60px;
    width: var(--face-size);
    height: var(--face-size);
    translate: 0 -8px;
}

@media screen and (max-width: 767px) {
    .intro-wrp .comment-wrp .fukidashi .face {
        --face-size: min(60px, 9vw);
        translate: 0 -3px;
    }
}

.intro-wrp .comment-wrp .fukidashi .face img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.intro-wrp .comment-wrp .fukidashi p {
    padding: 0 1em;
    font-size: 1.4em;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .intro-wrp .comment-wrp .fukidashi p {
        font-size: min(1.4em, 4vw);
    }
}

.intro-wrp .comment-wrp~.note {
    margin-top: min(70px, 10vw);
    font-size: min(1.3rem, 3.4vw);
}

/* lead */
.lead-wrp .inner {
    padding: min(100px, 15vw) 0;
}

.lead-wrp p {
    font-size: min(2.6rem, 5vw);
    text-align: center;
    line-height: 2;
    font-weight: 700;
}

/* article list wrp */
.list-wrp {
    background-color: var(--bg-sky);
}

.list-wrp .list-title {
    text-align: center;
    font-size: 3.2rem;
}

@media screen and (max-width: 767px) {
    .list-wrp .list-title {
        padding: 0 1em;
        font-size: min(3.2rem, 6.2vw);
    }
}

.list-wrp .list-title .hd {
    display: block;
    width: 8em;
    margin: 0 auto .5em;
    padding: .25em;
    border: solid 2px;
    background-color: #fff;
    font-size: .9em;
}

.list-wrp .list-title .shikujiri {
    display: inline-block;
    width: auto;
    height: 1.05lh;
    margin-right: .25em;
    margin-left: -.5em;
    vertical-align: -.1em;
}

.article-list {
    width: 100%;
    margin: 1.5em auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4em 2.5em;
}

@media screen and (max-width:960px) {
    .article-list {
        gap: 4em 1.5em;
    }
}

@media screen and (max-width:767px) {
    .article-list {
        gap: min(4em, 10vw) 2.5em;
    }
}

.article-list li {
    width: calc(33% - 1.6em);
    text-align: center;
    position: relative;
}

.article-list li:nth-child(n+4) {
    width: calc(36% - 1em);
}

@media screen and (max-width:960px) {
    .article-list li {
        width: calc(33% - 1em);
    }
}

@media screen and (max-width:767px) {
    .article-list li {
        width: min(500px, 100%) !important;
    }
}

.article-list li::after {
    content: '';
    width: 2em;
    height: 2em;
    position: absolute;
    top: 1em;
    right: 1em;
    background-image: url(/_assets/contents/img/icn_pointcoin.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.article-list li a {
    display: block;
    text-decoration: none;
    color: inherit;
}

@media screen and (max-width:767px) {
    .article-list li a {
        display: grid;
        grid-template-areas: 'thumb title' 'thumb btn';
        grid-template-columns: min(200px, 35vw) auto;
        gap: 0 1em;
    }

    .article-list li:nth-child(even) a {
        display: grid;
        grid-template-areas: 'title thumb' 'btn thumb';
        grid-template-columns: auto min(200px, 35vw);
    }
}

.article-list li.new::before {
    /* content: ' NEW';
    display: block;
    width: 8.5em;
    height: 8.5em;
    padding: .4em;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 1.24rem;
    color: #fff;
    background: var(--color-red);
    z-index: 5; */
}

.article-list li .thumb {
    grid-area: thumb;
    width: min(230px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: auto;
}

.article-list li .thumb::before {
    content: '';
    display: block;
    width: 90%;
    aspect-ratio: 1/1;
    background-color: var(--bg-beige);
    border-radius: 100%;
    position: absolute;
    z-index: 0;
}

.article-list li .thumb img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.article-list li .title {
    grid-area: title;
    margin-top: .25em;
    font-size: 2.3rem;
    text-align: center;
    line-height: 2;
    letter-spacing: .05em;
    font-weight: 600;
}

@media screen and (max-width:960px) {
    .article-list li .title {
        font-size: 1.8rem;
    }
}

@media screen and (max-width:767px) {
    .article-list li .title {
        font-size: min(2rem, 4vw);
    }
}

.article-list li .title .sml {
    font-size: .8em;
}

.article-list li .title .mark-hd {
    font-weight: 700;
}

.article-list li a .btn {
    grid-area: btn;
    width: min(13em, 100%) !important;
    padding: .75em !important;
}

@media (hover: hover) {
    .article-list li a:hover .btn {
        background-color: color-mix(in srgb, var(--pink) 70%, #fff);
    }

    .article-list li a:hover .btn::before,
    .article-list li a:hover .btn::after {
        right: .7em;
    }
}

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

tochisagashi page

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

/* article header
------------------------------------------*/
.article-header {
    width: 100%;
    height: min(250px, 27vw);
    background: url(../img/bg-pattern1.svg) no-repeat left center / contain,
        url(../img/bg-pattern2.svg) no-repeat right center / contain;
    display: grid;
    place-items: center;
}

.article-header .contents-logo {
    width: min(420px, 50vw);
}

/* article common
------------------------------------------*/

/* title */
.article-wrp .article-hd {
    width: max-content;
    margin: 0 auto;
    font-size: min(4rem, 6.2vw);
    text-align: center;
    letter-spacing: .1em;
    position: relative;
}

.article-wrp .article-hd .shikujiri {
    display: inline-block;
    width: auto;
    height: 1.2em;
    padding: 0 .2em;
    vertical-align: baseline;
}

.article-wrp .article-hd .spot-illust {
    width: max-content;
    max-width: 120px;
    position: absolute;
    top: 50%;
    translate: 0 -55%;
}

.article-wrp .article-hd .spot-illust.left {
    right: calc(100% + .5em);
}

.article-wrp .article-hd .spot-illust.right {
    left: calc(100% + .5em);
}

@media screen and (max-width:767px) {
    .article-wrp .article-hd .spot-illust {
        display: block;
        max-width: 25vw;
        margin: 0 auto .5em;
        position: relative;
        top: unset;
        left: unset !important;
        right: unset !important;
        translate: unset;
    }
}

.underline-hd {
    width: fit-content;
    margin-inline: auto;
    padding: 0 .5em .25em;
    text-align: center;
    border-bottom: solid 1px;
}

.checked-title {
    --icon-size: 1.8em;
    width: fit-content;
    margin: 3em auto 1em;
    /* font-size: 1.8rem; */
    font-size: 2.4rem;
    line-height: 1.6;
}

.checked-title:first-child {
    margin: 0 auto .75em;
}

@media screen and (max-width:767px) {
    .checked-title {
        margin: min(3em, 10vw) auto 1em;
        font-size: min(2.4rem, 5.2vw);
    }
}

.checked-title-wrp {
    margin: 72px auto 0;
}

@media screen and (max-width:767px) {
    .checked-title-wrp {
        margin: min(60px, 10vw) auto 0;
    }
}

.checked-title-wrp.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
}

.checked-title-wrp:first-child {
    margin: 0 auto;
}

.checked-title-wrp.flex>.img {
    width: 160px;
}

@media screen and (max-width:767px) {
    .checked-title-wrp.flex>.img {
        width: min(200px, 100%);
        margin: 0 auto;
    }
}

.checked-title-wrp.flex>.text {
    width: calc(100% - 160px - 2em);
}

@media screen and (max-width:767px) {
    .checked-title-wrp.flex>.text {
        width: 100%;
        margin: 0 auto;
    }
}

.checked-title-wrp.flex>.text .checked-title {
    width: auto;
    margin-left: 0;
    margin-right: 0;
}

/* checked icon */
:is(.merit-item, .demerit-item, .checked-title, .prevention-hd) {
    --icon-size: 1.5em;
    padding-left: calc(var(--icon-size) + .5em);
    font-weight: 600;
    position: relative;
}

:is(.merit-item, .demerit-item):not(:first-child) {
    margin-top: .5em;
}

:is(.merit-item, .demerit-item, .checked-title, .prevention-hd)::before {
    content: '';
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    background: url(../img/checkmark1.svg) no-repeat center / contain;
    position: absolute;
    left: 0;
    top: 1em;
    top: .5lh;
    translate: 0 -50%;
}

.demerit-item::before {
    background: url(../img/checkmark2.svg) no-repeat center / contain;
}

.checked-title::before,
.prevention-hd::before {
    background: url(../img/checkmark2-2.svg) no-repeat center / contain;
    translate: 0 -60%;
}

/* figure */
.fig-wrp {
    margin-top: 3em;
}

.fig-wrp figcaption.underline-hd {
    margin-bottom: 2em;
    font-size: 2rem;
    text-align: center;
}

.fig-wrp :is(li, div) *~ :is(p, .img) {
    margin-top: 1em;
}

.fig-wrp :is(li, div) .label {
    /* margin-top: 1em; */
    font-size: 2rem;
    text-align: center;
    font-weight: 600;
}

.fig-wrp :is(li, div) p:not(.label) {
    margin-top: .5em;
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
}

.fig-wrp :is(li, div) p .em {
    display: block;
    margin: 0 auto;
    font-size: 1.2em;
    font-weight: 600;
}

/* frame-figure */
/* .frame-figure {
    margin-top: 2.5em;
    padding: 40px;
    border: solid 1px;
    background-color: #fff;
}

@media screen and (max-width:767px) {
    .frame-figure {
        padding: min(40px, 7vw) min(40px, 5vw);
    }
} */

/* flex */
.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flex-3col,
.flex-2col {
    --w: 28%;
    --min-w: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3em 0;
}

.flex-2col {
    --w: 43%;
    --min-w: 300px;
    justify-content: space-evenly;
}

.flex-3col li,
.flex-2col li {
    width: var(--w);
    text-align: center;
}

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

    .flex-3col,
    .flex-2col {
        justify-content: space-between;
    }

    .flex-3col li,
    .flex-2col li {
        width: min(var(--min-w), 100%);
        margin: 0 auto;
    }
}

/* btn */
.tochisagashi .main-contents-wrp .btn {
    width: fit-content;
    max-width: 100%;
    padding: .75em 3em;
    margin: 1em auto 0;
    color: currentcolor;
    background-color: #fff;
    border: solid 2px;
    font-size: min(1.8rem, 4vw);
}

@media (hover: hover) {
    .tochisagashi .main-contents-wrp .btn:hover {
        background-color: color-mix(in srgb, var(--pink) 70%, #fff);
    }
}

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

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

@media (hover: hover) {

    .tochisagashi .main-contents-wrp .btn:hover::before,
    .tochisagashi .main-contents-wrp .btn:hover::after {
        right: .7em;
    }
}

/* case header
------------------------------------------*/
.case-header {
    background-color: var(--bg-beige);
}

.case-header .inner {
    height: 420px;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width:980px) {
    .case-header .inner {
        padding: 1em 0;
    }
}

@media screen and (max-width:767px) {
    .case-header .inner {
        display: block;
        height: auto;
    }
}

.case-header .thumb {
    width: 420px;
}

@media screen and (max-width:980px) {
    .case-header .thumb {
        width: 40%;
    }
}

@media screen and (max-width:767px) {
    .case-header .thumb {
        width: min(300px, 70%);
        margin: 0 auto;
        aspect-ratio: 4/3;
        overflow: hidden;
    }

    .case-header .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .vol3 .case-header .thumb {
        aspect-ratio: 1/1;
    }

    .vol4 .case-header .thumb {
        aspect-ratio: 5/3;
        width: min(300px, 80%);
    }
}

.case-header .thumb img {
    width: 100%;
}

.case-header .case-title-wrp {
    width: calc(100% - 490px);
    translate: 0 -.75em;
}

@media screen and (max-width:980px) {
    .case-header .case-title-wrp {
        width: fit-content;
        max-width: 60%;
        margin: 0 auto;
        translate: unset;
    }
}

@media screen and (max-width:767px) {
    .case-header .case-title-wrp {
        width: 100%;
        max-width: 100%;
        padding: 2em 0;
        text-align: center;
    }
}

.case-header .case-title-wrp .profile {
    margin-bottom: -.75em;
    font-size: 2.2rem;
}

@media screen and (max-width:767px) {
    .case-header .case-title-wrp .profile {
        font-size: min(2rem, 4.6vw);
    }
}

.case-header .case-title-wrp .profile :where(.name, .age) {
    display: inline-block;
    padding: .4em .7em;
    border: solid 1px;
    background-color: #fff;
}

.case-header .case-title-wrp .profile .age {
    margin-left: -1px;
}

.case-header .case-title-wrp .case-title {
    font-size: 2.7rem;
    line-height: 1.9;
    letter-spacing: .05em;
}

@media screen and (max-width:767px) {
    .case-header .case-title-wrp .case-title {
        font-size: min(2.7rem, 5.6vw);
        line-height: 2;
    }
}

.case-header .case-title-wrp .case-title .mark {
    font-size: 1.45em;
}

.case-header .case-title-wrp .case-title .sml {
    font-size: .85em;
}

/* episode
------------------------------------------*/
.episode-wrp .flex {
    width: min(800px, 100%);
    margin: 2.5em auto 0;
    align-items: center;
}

.episode-wrp .text-wrp {
    width: calc(100% - 260px);
}

@media screen and (max-width:767px) {
    .episode-wrp .text-wrp {
        width: 100%;
    }
}

.episode-wrp .text-wrp p {
    line-height: 1.8;
    font-size: 1.8rem;
}

@media screen and (max-width:767px) {
    .episode-wrp .text-wrp p {
        font-size: min(1.8rem, 4.2vw);
    }
}

.episode-wrp .episode-img {
    width: 200px;
}

@media screen and (max-width:767px) {
    .episode-wrp .episode-img {
        width: min(240px, 80%);
        margin: 1em auto 0;
        text-align: center;
    }
}

/* cause
------------------------------------------*/
.cause-wrp {
    background-color: var(--bg-sky);
}

.cause-wrp .cause-lead {
    margin: 1.5em auto 0;
    font-size: min(3.4rem, 5.8vw);
    text-align: center;
    letter-spacing: .05em;
    font-weight: 600;
}

.cause-wrp .cause-lead::after {
    content: '';
    display: block;
    width: 60px;
    margin: 30px auto;
    border-top: solid 2px var(--pink);
}

.cause-wrp .cause-copy,
.prevention-wrp .prevention-copy {
    margin-top: 1.75em !important;
    font-size: 2rem;
    line-height: 1.8;
    text-align: center;
    font-weight: 600;
}

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

    .cause-wrp .cause-copy,
    .prevention-wrp .prevention-copy {
        margin-top: 1.5em;
        font-size: min(2rem, 4.4vw);
    }

    .cause-wrp .cause-copy .mark-hd,
    .prevention-wrp .prevention-copy .mark-hd {
        font-size: 1.3em;
    }
}

.cause-wrp .cause-copy .em,
.prevention-wrp .prevention-copy .em {
    font-size: 1.25em;
}

.cause-wrp .cause-copy .em .mark-hd,
.prevention-wrp .prevention-copy .em .mark-hd {
    font-size: 1.4em;
}

.cause-wrp .cause-lead~p:not(.cause-lead),
.checked-title+p:not([class]),
.prevention-wrp p:not([class]),
.prevention-wrp p.scrlup {
    width: min(780px, 100%);
    margin: 0 auto;
    font-size: 1.8rem;
    line-height: 1.8;
}

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

    .cause-wrp .cause-lead~p:not(.cause-lead),
    .checked-title+p:not([class]),
    .prevention-wrp p:not([class]),
    .prevention-wrp p.scrlup {
        font-size: min(1.8rem, 4.2vw);
    }
}


/* prevention
------------------------------------------*/
.prevention-wrp {
    background-color: var(--bg-beige);
}

.prevention-wrp .article-hd-wrp {
    width: 100%;
    padding: min(120px, 10vw) 0 min(120px, 17vw);
    background-color: #fff;
    text-align: center;
}

.prevention-wrp .prevention-title-wrp {
    margin-top: 2rem;
    text-align: center;
    position: relative;
}

.prevention-wrp .prevention-title-wrp .spot-illust {
    position: absolute;
    left: 50%;
    bottom: 100%;
    translate: -50%;
}

.prevention-wrp .prevention-title-wrp .prevention-hd {
    --icon-size: 1.8em;
    display: inline-block;
    margin: 1em 0 2em;
    padding: 1em 2em 1em 4em;
    /* padding: 1em 2em; */
    background-color: #fff;
    border: solid 1px;
    border-radius: 12px;
    position: relative;
}

@media screen and (max-width:767px) {
    .prevention-wrp .prevention-title-wrp .prevention-hd {
        /* padding: .75em 1.5em; */
        padding: .75em 1.5em .75em 3.5em;
    }
}

.prevention-wrp .prevention-title-wrp .prevention-hd::before {
    left: 1.5em;
    top: 50%;
}

.prevention-wrp .prevention-title-wrp .prevention-title {
    font-size: min(3.8rem, 6.2vw);
}

.prevention-wrp .prevention-title-wrp+.prevention-copy::before {
    content: '';
    display: block;
    width: 60px;
    margin: 30px auto;
    border-top: solid 2px var(--pink);
}

.prevention-wrp .prevention-title-wrp+p {
    margin-top: 3em;
}

/* prevention - oneself-wrp */
.oneself-wrp .inner {
    padding: min(80px, 15vw) 0 min(100px, 20vw);
}

/* prevention - professional-wrp */
.professional-wrp .inner {
    padding: min(100px, 20vw) 0;
}

/* specific-wrp */
.specific-wrp {
    width: min(960px, 100%);
    margin: min(4em, 7vw) auto 0;
    padding: min(60px, 7vw) clamp(40px, calc(50% - 380px), 100px) min(80px, 10vw);
    border-radius: 20px;
    border: solid 1px;
    background-color: #fff;
}

@media screen and (max-width:500px) {
    .specific-wrp {
        padding: 7vw 5vw;
    }
}

.specific-wrp .specific-title {
    font-size: 2.6rem;
}

@media screen and (max-width:767px) {
    .specific-wrp .specific-title {
        font-size: min(2.6rem, 5.6vw);
    }
}

.specific-wrp .specific-title .spot-illust {
    display: block;
    width: 80px;
    margin: 0 auto .5em;
}

/* checksheet
------------------------------------------*/
.checksheet-wrp {
    background-color: var(--bg-sky);
}

.checksheet {
    width: min(730px, 100%);
    margin: 0 auto;
    padding: min(60px, 10vw);
    border: solid 6px var(--pink);
    background-color: #fff;
    border-radius: min(25px, 6vw);
    position: relative;
}

@media screen and (max-width:640px) {
    .checksheet {
        padding: 10vw 7vw;
    }
}

.checksheet .spot-illust {
    width: min(160px, 30vw);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    translate: -40%;
}

.checksheet .checksheet-title {
    font-size: 2.6rem;
}

@media screen and (max-width:640px) {
    .checksheet .checksheet-title {
        font-size: min(2.6rem, 5.4vw);
    }
}

.checksheet .check-list {
    margin-top: 2em;
    font-weight: 600;
}

.checksheet .check-list .demerit-item {
    font-size: 1.85rem;
    line-height: 1.8;
    --icon-size: 1.8em;
}

@media screen and (max-width:640px) {
    .checksheet .check-list .demerit-item {
        font-size: min(1.85rem, 4.4vw);
    }
}

.checksheet .check-list .demerit-item:not(:first-child) {
    margin-top: 2em;
}

@media screen and (max-width:640px) {
    .checksheet .check-list .demerit-item:not(:first-child) {
        margin-top: 1.5em;
    }
}

@media screen and (max-width:640px) {
    .checksheet .check-list .demerit-item br {
        display: none;
    }
}


/* point-get-wrp */
.page-point-get-wrp {
    background-color: #8ad775;
    padding: 50px 20px;
}

/* pagenaiton
------------------------------------------*/
.pagination {
    padding: 3em 15px;
}