/*

style for heim_d1

*/

/* @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900&family=Noto+Serif+JP:wght@200..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&display=swap');

/* common page title */
@media print,
screen and (max-width: 767px) {
    .hirayaKv__fg__t {
        color: #222;
        /* text-shadow: 0 0 2px rgb(21 96 130/ .8), 0 0 10px rgb(21 96 130/ .5); */
    }
}

.hirayaKv__tt>span.is-l {
    padding: clamp(13.5px / 1440 * 1140, 13.5 / 1440 * 100vw, 13.5px) clamp(48px / 1440 * 1140, 48 / 1440 * 100vw, 48px) clamp(17.5px / 1440 * 1140, 17.5 / 1440 * 100vw, 17.5px) clamp(48px / 1440 * 1140, 48 / 1440 * 100vw, 48px);
    font-size: clamp(60px / 1440 * 1140, 60 / 1440 * 100vw, 60px);
}

.hirayaKv__tt img {
    width: min(260px, 40vw);
}

/* main contents */
.hirayaWrap__bd {
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'メイリオ', 'Meiryo', sans-serif;

    --serif: minion-pro-display, "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Noto Serif JP", serif;
    /* --serif: "Crimson Pro", "Noto Serif JP", serif; */
}

.hirayaKv__fg__t.is-04.serif {
    font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Noto Serif JP", serif;
}

.hirayaWrap__bd img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

.hirayaWrap__bd p {
    max-width: 1000px;
    line-height: 1.8;
    font-size: min(22px, 3.8vw);
    /* font-family: var(--serif); */
}

.hirayaWrap__bd p.serif {
    font-size: min(19px, 3.8vw);
}

.hirayaWrap__bd li {
    list-style-type: none;
}

.hirayaWrap__bd .serif {
    font-family: var(--serif);
}

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

.hirayaWrap__bd .mi-center {
    margin-inline: auto;
}

.hirayaWrap__bd .iblock {
    display: inline-block;
}

.hirayaWrap__bd .inner {
    width: min(1160px, 90%);
    margin: 0 auto;
    padding: min(100px, 15vw) 0;
}

.hirayaWrap__bd :where(.design02, .design03) .inner {
    width: min(1000px, 90%);
}

.hirayaWrap__bd .hd {
    width: 100%;
    margin-bottom: 1em;
    font-family: var(--serif);
    font-size: min(1.875em, 5.2vw);
    font-weight: 500;
    text-align: center;
    letter-spacing: .05em;
}


/* desigin */
.design01 {
    --design-color: #789eb1;
}

.design02 {
    --design-color: #998771;
}

.design03 {
    --design-color: #5f805b;
}

/* desigin - main */
.design .main {
    width: 100%;
    aspect-ratio: 2/1;
    padding: max(80px, 5vw) 2em;
    text-align: center;
    position: relative;
    z-index: auto;
    overflow: hidden;
    box-sizing: border-box;
}

@media print,
screen and (max-width: 767px) {
    .design .main {
        aspect-ratio: 1/1.2;
        padding: min(80px, 10vw) 2em;
    }

    .design .main img {
        object-position: 32% top;

    }
}

.design .main .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.design .main .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.design .main .title {
    font-family: var(--serif);
    position: relative;
    z-index: 1;
}

.design .lead {
    font-family: var(--serif);
    margin-inline: auto;
    padding-left: .75em;
    padding-top: 1em;
    padding-bottom: 1em;
    position: relative;
    z-index: 1;
    text-align: center;
}

/* desigin - nav */
.design-nav .btn {
    padding-top: 4em;
    flex-basis: 33%;
    flex-grow: 1;
    text-align: center;
    font-family: var(--serif);
    cursor: pointer;
}

@media print,
screen and (max-width: 767px) {
    .design-nav .btn {
        padding-top: 2em;
    }
}

.design-nav .btn .num {
    font-size: min(2.8em, 8vw);
    color: var(--design-color);
    line-height: 1;
}

.design-nav .btn .en {
    margin: .5em 0;
    padding-bottom: .5em;
    font-size: min(1.8em, 4.6vw);
    color: var(--design-color);
    line-height: 1.2;
}

.design-nav .btn .jp {
    padding: 1em .5em 2.5em;
    font-size: min(1.2em, 4vw);
    background-color: var(--design-color);
    color: #fff;
    position: relative;
}

.design-nav .btn .jp::after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    border-right: solid 1px;
    border-bottom: solid 1px;
    position: absolute;
    left: 50%;
    bottom: 1.25em;
    rotate: 45deg;
    translate: -50%;
    transition: bottom .3s ease;
}

.design-nav .btn:hover .jp::after {
    bottom: 1em;
}

/* desigin - 01,02,03 */
.design-title {
    text-align: center;
    font-family: var(--serif);
}

.design-title .num {
    font-size: 3em;
    color: var(--design-color);
    line-height: 1;
}

.design-title .en {
    font-size: 1.875em;
    margin-inline: auto;
    padding-bottom: .5em;
    color: var(--design-color);
}

.design-title .jp {
    margin-bottom: 0;
}

/* desigin - 01 */
.design>.design01 {
    background-color: #eef3f5;
}

.design .design01 .title {
    display: inline-block;
    margin-top: min(100px, 12vw);
    margin-right: .5em;
    font-size: min(2.6em, 7vw);
    letter-spacing: .05em;
    font-weight: 500;
}

.design .design01 .description {
    display: inline-block;
    font-size: min(1.4em, 4.2vw);
}

.design .design01 .img {
    margin-top: 1em;
    margin-bottom: 2em;

}

/* desigin - 02,03 */
.design>.design02 {
    background-color: #f9f7f6;
}

.design>.design03 {
    background-color: #eff2ef;
}

:is(.design02, .design03) .title {
    margin-top: 1.5em;
    margin-bottom: 1em;
    font-family: var(--serif);
    font-size: min(1.5em, 4.6vw);
    font-weight: 400;
    letter-spacing: .05em;

}

:is(.design02, .design03) .img {
    margin-top: min(100px, 12vw);
}

@media print,
screen and (min-width: 768px) {
    .design :is(.design02, .design03) .grid {
        display: grid;
        grid-template-areas: 'title img' 'txt img';
        grid-template-columns: 1fr 58%;
        grid-template-rows: 1fr auto;
        align-items: end;
        gap: 0 7%;
    }
}

.design :is(.design02, .design03) .grid figure {
    grid-area: img;
}

.design :is(.design02, .design03) .grid [class*="title"] {
    grid-area: title;
}

.design :is(.design02, .design03) .grid p {
    grid-area: txt;
}

/* structure */
.structure {
    padding: min(100px, 15vw) 0;
}

.structure .main {
    position: relative;
}

.structure .main .bg {
    position: relative;
}

.structure .main .title {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
}

.structure .main .title+p {
    max-width: min(1000px, 90%);
}

/* structure - unit */
.unit {
    width: min(1000px, 90%);
    margin: min(100px, 12vw) auto 0;
    padding: min(80px, 7vw) min(80px, 5vw) min(80px, 5vw);
    border: solid 1px;
    text-align: center;
    box-sizing: border-box;
}

@media print,
screen and (min-width: 768px) {
    .unit {
        display: grid;
        grid-template-areas: 'title title' 'txt img2' 'img1 img2';
        grid-template-columns: repeat(2, 1fr);
        gap: 0 10%;
    }
}

.unit .unit-title {
    grid-area: title;
    margin-bottom: min(3em, 5vw);
    font-size: min(1.5em, 4.6vw);
    letter-spacing: .1em;
    font-weight: 400;
    text-align: center;
}

.unit .txt {
    width: fit-content;
    grid-area: txt;
    margin-bottom: 2em;
}

.unit .img01 {
    grid-area: img1;
}

.unit .img02 {
    grid-area: img2;
}

@media print,
screen and (max-width: 767px) {
    .unit .img01 {
        width: min(400px, 80%);
        margin: 0 auto 3em;
    }
}

/* plan */
.plan {
    background-color: #f6f5f5;
}

.plan .title {
    margin-bottom: .75em;
    font-size: min(2.4em, 8vw);
    text-align: center;
}

.plan .title::after {
    content: '';
    display: block;
    width: 4em;
    height: 0;
    margin: 0 auto;
    border-top: solid 1px;
}

.plan .copy {
    font-size: min(1.56em, 4.8vw);
    text-align: center;
    letter-spacing: .05em;
}

.plan .map {
    margin: min(100px, 12vw) auto min(80px, 10vw);
    padding: min(60px, 5vw);
    background-color: #fff;
}

.point {
    gap: 3em 0;
}

.point .li {
    width: min(328px, 32%);
    text-align: center;
}

@media print,
screen and (max-width: 640px) {
    .point .li {
        width: 100%;
    }
}

.point .li .point-title {
    font-size: min(2.4em, 8vw);
}

.point .li .img {
    margin: 1em auto;
}