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

:root {
    --blue: #5789C9;
    --yellow: #FCCF00;
    --bg-gray: #f0f0f0;
    --bg-yellow: #f7f5e2;
}

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

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

.point-get-window {
    border-color: var(--blue) !important;
}

.justify {
    text-align: justify;
}

.note-wrp {
    display: block;
    margin: 2em 0;
}

.note-wrp .note {
    display: inline-block;
    text-align: left;
    font-size: min(.8em, 3vw);
}

.note-wrp .note li::before {
    content: '※';
    display: inline-block;
}

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

/* header --------------------*/
.main-header {
    height: 400px;
    padding: 0 calc(50vw - 420px);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-yellow);
    position: relative;
    z-index: 1;
}

@media screen and (max-width:767px) {
    .main-header {
        height: 300px;
        padding-bottom: 15vw;
        justify-content: flex-end;
    }
}

.main-header .bg-img {
    width: 280px;
    position: absolute;
    left: max(15vw, calc(50vw - 450px));
    bottom: 0;
    translate: -50%;
}

@media screen and (max-width:767px) {
    .main-header .bg-img {
        width: 210px;
    }
}

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

.main-header .hd-group {
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 2em;
}

.main-header .hd-group .title {
    font-size: 2.6em;
    font-weight: 700;
}

@media screen and (max-width:767px) {
    .main-header .hd-group .title {
        font-size: min(2.4em, 5.4vw);
    }
}

.main-header .hd-group .title .em {
    display: block;
    font-size: 1.5em;
}

.main-header .hd-group .hdline {
    margin-top: 1em;
    font-size: 1.55em;
    margin: 1em auto 0;
}

@media screen and (max-width:767px) {
    .main-header .hd-group .hdline {
        font-size: min(1.55em, 4vw);
    }
}

.hdline {
    --hd: auto;
    width: fit-content;
    display: grid;
    grid-template-columns: var(--hd) 1fr;
    border: solid 5px;
    line-height: 1.8;
    font-weight: 600;
    background-color: #fff;
}

.hdline .em {
    padding: 0 .5em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    background-color: #000;
}

.hdline .text {
    display: inline-block;
    padding: 0 .5em;
    align-self: center;

}

.hd-img-wrp {
    width: 100%;
    max-width: 700px;
    /* margin: -4em auto 0; */
    margin: 0 auto;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    transform: translateY(-4em);
}

@media screen and (max-width:767px) {
    .hd-img-wrp {
        /* margin: -4.5em auto 0; */
        transform: translateY(-4.5em);
    }
}

.hd-img-wrp .copy {
    width: fit-content;
    color: var(--blue);
    font-size: min(60px, 8vw);
    font-weight: 700;
    margin: .5em auto 0;
    text-align: center;
}

.hdimgillust-wrp {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
}

.hdillust {
    width: 33.333%;
    padding: 0;
}

.hdillust img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.hdimg-wrp {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}


.hdimg-wrp .hdimg {
    width: 33.33%;
}

.hdimg-wrp .hdimg img {
    width: 100%;
}

/* intro --------------------*/
.intro-wrp {
    /* padding: min(3em, 10vw) min(40px, 5vw); */
    padding: 0 min(40px, 5vw) min(3em, 10vw);
    text-align: center;
}

.intro-wrp .lead {
    width: min(17em, 100%);
    display: inline-block;
    margin-inline: auto;
    font-size: 1.875em;
    font-weight: bold;
    line-height: 2.2;
}

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

.intro-wrp .lead-sub {
    margin-top: min(3em, 10vw);
    font-size: 1.3em;
    font-weight: bold;
    line-height: 2.2;
}

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

.intro-wrp .lead span {
    display: inline-block;
    width: 100%;
    background-image:
        linear-gradient(0deg, transparent 0 3px, #fff 3px),
        repeating-linear-gradient(135deg, var(--blue) 0 6px, transparent 6px 8px);
}

.intro-wrp .sh-points {
    width: min(960px, 100%);
    margin: min(5em, 15vw) auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5vw 0;
}

.intro-wrp .sh-point-wrp {
    width: 48%;
    /* padding: min(2.5em, 7vw) 0; */
    /* background-color: var(--bg-gray); */
    border: solid 3px var(--blue);
    border-radius: 20px;
    overflow: hidden;
}

@media screen and (max-width:767px) {
    .intro-wrp .sh-point-wrp {
        width: 100%;
    }
}

.intro-wrp .sh-point-hd {
    padding: min(2em, 6vw) 0 1em;
    background-color: var(--bg-yellow);
}

.intro-wrp .sh-point-wrp .sh-point-title {
    text-align: center;
    font-weight: bold;
    font-size: 1.4em;
}

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

.intro-wrp .sh-point-wrp .sh-point-title .em {
    color: var(--blue);
}

.intro-wrp .sh-point-wrp .sh-point-title .icon-point {
    display: block;
    width: 3.2em;
    margin: 1em auto .75em;
}

.intro-wrp .sh-point-wrp .sh-point-title .point {
    font-size: 1.2em;
}

.intro-wrp .sh-point-wrp .sh-point {
    width: 12em;
    margin: 1em auto 0;
    padding: .5em 1em;
    text-align: center;
    line-height: 2;
    color: var(--blue);
    background-color: #fff;
    border: solid 4px var(--blue);
    border-radius: 100vmax;
    line-height: 1;
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: .05em;
}

@media screen and (max-width:767px) {
    .intro-wrp .sh-point-wrp .sh-point {
        font-size: min(1.1em, 4vw);
    }
}

.intro-wrp .sh-point-wrp .sh-point-img {
    /* margin: min(2em, 5vw) 0; */
}

.intro-wrp .sh-point-wrp .point-list {
    padding: 1.5em min(2em, 5vw);
}

.intro-wrp .sh-point-wrp .point-list li {
    padding-left: 2.5em;
    text-align: left;
    font-size: .95em;
    font-weight: 600;
    line-height: 1.8;
    position: relative;
}

.intro-wrp .sh-point-wrp .point-list li+li {
    margin-top: .25em;
}

.intro-wrp .sh-point-wrp .point-list li::before {
    content: '';
    width: 1.8em;
    height: 1.4em;
    position: absolute;
    left: 0;
    top: .5lh;
    background: url(../img/icon-point.svg) no-repeat center / contain;
    translate: 0 -50%;
}

/*==============================================================
interview wrp
==============================================================*/
.interview-wrp {
    padding: min(120px, 15vw) min(40px, 5vw);
    background-color: var(--bg-gray);
}

.interview-wrp .interview-title {
    width: fit-content;
    margin: 0 auto;
    font-weight: bold;
    font-size: 1.875em;
    color: var(--blue);
    border-bottom: solid 1px #333;
}

.interview-wrp .lead {
    margin-top: 1em;
    text-align: center;
    font-weight: 600;
    line-height: 1.6;
}

.interview-wrp .lead.em {
    font-size: min(1.8em, 5vw);
}

/* link */
.article-list-wrp {
    width: min(1000px, 100%);
    margin: 3.5em auto 0;
}

.article-list-wrp .article-list .article-link {
    margin-top: 3.5em;
    background-color: #fff;
    border: solid 3px #000;
    transition: all .3s;
    position: relative;
}

.article-list-wrp .article-list .article-link:hover {
    border: solid 3px var(--blue);

}

.article-link a {
    container-type: inline-size;
    min-height: 250px;
    display: flex;
    color: inherit;
    text-decoration: none;
}

@media screen and (max-width:767px) {
    .article-link a {
        flex-direction: column;
        min-height: unset;
    }
}

.article-link .thumbnail {
    width: min(360px, 38%);
    flex-shrink: 0;
}

@container (max-width: 1000px) {
    .article-link .thumbnail {
        width: 30%;
    }
}

@media screen and (max-width:767px) {
    .article-link .thumbnail {
        width: 100%;
        aspect-ratio: 5/3;
        overflow: hidden;
    }
}

.article-link .meta {
    padding: 2.5em;
    flex-grow: 1;
    display: grid;
    grid-template-areas: 'vol sum' 'info sum';
    grid-template-columns: 10em 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 2em;
    position: relative;
}

@container (max-width: 1000px) {
    .article-link .meta {
        padding: 2.5em 3vw;
        gap: 0 2vw;
    }
}

@media (max-width: 767px) {
    .article-link .meta {
        padding: min(1.5em, 5vw) min(1.5em, 5vw) 3.5em;
        grid-template-areas: 'vol info' 'sum sum';
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr;
        gap: 1em 2em;
    }
}

.article-link .meta .interview-vol {
    grid-area: vol;
    align-self: start;
    width: fit-content;
    padding-bottom: .25em;
    color: var(--blue);
    font-weight: 600;
    border-bottom: solid 1px #000;
}

@media (max-width: 767px) {
    .article-link .meta .interview-vol {
        font-size: min(1em, 3.8vw);
    }
}

.article-link .meta .house-info {
    grid-area: info;
    align-self: end;
    font-size: .85em;
    font-weight: 600;
}

@media (max-width: 767px) {
    .article-link .meta .house-info {
        font-size: min(.85em, 3.6vw);
    }
}

.article-link .meta .article-summary {
    grid-area: sum;
}

.article-link .meta .article-summary .article-title {
    margin-bottom: 1em;
    font-size: min(1.6em, 4.8vw);
    font-weight: 600;
}

@media (max-width: 767px) {
    .article-link .meta .article-summary .article-title {
        margin-bottom: .5em;
    }
}

.article-link .meta .article-summary .article-title .marker {
    display: inline-block;
    font-size: 1.2em;
    background: linear-gradient(180deg, transparent 80%, color-mix(in srgb, var(--yellow) 50%, white) 80%);
}

.article-link .meta .article-summary .article-description {
    font-size: min(1.15em, 4vw);
    font-weight: 600;
    line-height: 1.6;
}

/* @media (max-width: 767px) {
    .article-link .meta .article-summary .article-description {
        font-size: min(1.1em, 4vw);
    }
} */

.article-link .meta .arrow-link {
    padding-right: 5em;
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: .8em;
}

@media (max-width: 767px) {
    .article-link .meta .arrow-link {
        padding-right: 4em;
    }
}

.arrow {
    --arrow-position: 0;
    display: block;
    width: 4em;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

@media (max-width: 767px) {
    .arrow {
        width: 3em;
    }
}

.arrow::before,
.arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    border-top: solid 1px;
    transition: all .2s ease;
}

.arrow::before {
    width: 100%;
    right: var(--arrow-position);
}

.arrow::after {
    width: 45%;
    right: var(--arrow-position);
    rotate: 40deg;
    transform-origin: right bottom;
}