:root {
    --white: #E7E7EB;
    --green: #316745;
    --font-size-smallest: 12px;
    --font-size-small: 14px;
    --font-size-h1: clamp(32px, 14.36vw , 64px);
    --font-size-h2: clamp(28px, 1.06vw + 27.87px, 40px);
    --font-size-h3: clamp(20px, 6.15vw, 28px);
    --font-size-normal: clamp(16px, 4.10vw, 18px);
    --l-height-small: 1.2;
    --l-height-normal: 1.6;
    --l-height-large: 2.0;
}

/*
@media (orientation: landscape) {
    :root {
        --font-size-small: 16px;
    }
}
*/

@media (orientation: landscape) and (min-width: 1024px) {
    :root {
        --font-size-small: 16px;
        --font-size-normal: clamp(16px, calc(1vw + 3px), 24px);
    }
}

.small-text {
    font-size: var(--font-size-smallest);
}

@media (orientation: landscape) {
    .small-text {
        font-size: var(--font-size-small);
        transform: rotate(0.04deg);
    }
}

* {
    letter-spacing: 0.02em;
}

.pc-only {
    display: none;
}

@media (orientation: landscape) {
    .sp-only {
        display: none;
    }
}

html {
    font-family: "Montserrat", "M PLUS 1p", sans-serif;
    font-weight: 300;
    line-height: var(--l-height-normal);
}

body {
    overflow-x: hidden;
    background-color: var(--green);
    color: var(--white);
}

body::selection {
    background-color: var(--white);
    color: var(--green);
}

main > section {
    padding-inline: clamp(16px, 5.13vw, 100px);
}

.text-vertical {
    writing-mode: vertical-rl;
    line-height: 1.0;
    letter-spacing: calc(var(--font-size-h2) / 5);
    margin-bottom: calc(var(--font-size-h2) / -5);
}


/* ヘッダー */
header {
    padding: 16px;
    font-weight: 300;
}

.header {
    height: 44px;
}

.header-inner {
    height: 100%;
}

.header-logo {
    height: 100%;
    width: auto;
    margin-right: 6px;
}

.header-text {
    line-height: 1;
}

.header-text > small {
    display: block;
    letter-spacing: 0.05em;
}

.header-text-logo {
    margin-top: 6px;
}

@media (orientation: landscape) {
    header {
        padding: calc(clamp(16px, 5.13vw, 100px) / 2) clamp(16px, 5.13vw, 100px);
    } 
}

@media (min-width: 1024px) {
    header {
        max-width: 90%;
        margin: 0 auto;
        padding: calc(clamp(16px, 5.13vw, 100px) / 2);
    }

    .header {
        height: 56px;
        margin: 0 auto;
    }

    .header-logo {
        margin-right: 10px;
    }

    .header-text-logo {
        height: 16px;
        width: auto;
        margin-top: 10px;
    }
}

.header-inner > * {
    display: inline-block;
}
/* /ヘッダー */


/* リンクスタイル */
.link-block {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    gap: 0 20px;
}

.button-link-block-outer {
    text-align: center;
}

.button-link-block {
    display: inline-flex;
    flex-direction: column;
    gap: 20px;
    max-width: 400px;
}

.link {
    display: inline-flex;
    overflow: hidden;
    font-weight: 400;
}

.link > .link-wrap {
    display: flex;
    align-items: center;
    min-height: 48px;
    background-color: var(--green);
    color: var(--white);
    font-size: var(--font-size-normal);
    line-height: 1.4;
    text-decoration: underline;
    transition: transform 0.5s linear;
    padding-block: 16px;
    margin-right: -1px; /* 拡大時に発生するレンダリング誤差の対策 */
    padding-right: 1px; /* 拡大時に発生するレンダリング誤差の対策 */
}

.link:hover > .link-wrap, .link:focus > .link-wrap {
    background-color: var(--white);
    color: var(--green);
    text-decoration: none;
    transform: scaleY(4);
    transition: transform 0.5s linear;
}

button {
    cursor: pointer;
}

.button {
    width: 100%;
    display: block;
    border: 1px solid var(--white);
}

.button:hover, .button:focus {
    border-color: transparent;
}

.button > .link-wrap {
    justify-content: center;
    padding: 16px 24px;
    text-decoration: none;
}
/* /リンクスタイル */


/* 閉じるボタン */
.button-close {
    position: relative;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background-color: var(--green);
    transition: transform 0.25s;
}

.button-close:hover {
    transform: rotate(90deg);
}

.button-close::before, .button-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 12px;
    width: 2px;
    border-radius: 1px;
    background-color: var(--white);
}

.button-close::before {
    transform: translate(-50%,-50%) rotate(45deg);
}
 
.button-close::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}
/* /閉じるボタン */


/* ポップオーバー */
.popover {
    width: calc(100% - (clamp(16px, 5.13vw, 100px) * 2));
    max-width: 480px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--green);
    background-color: var(--white);
    transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
    transform: scale(0);
    opacity: 0;
    filter: blur(24px);
}

.popover:popover-open {
    transform: scale(100%);
    opacity: 1;
    filter: blur(0);
}

@starting-style {
    [popover]:popover-open {
        transform: scale(0);
        opacity: 0;
        filter: blur(24px);
    }
}

.popover-inner {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    gap: 16px;
    align-items: center;
    color: var(--green);
    font-weight: 400;
}

.popover-inner::selection {
    background-color: var(--green);
    color: var(--white);
}

.popover-inner .lottie-wrap {
    height: 69px;
    width: 64px;
}

.popover-inner .lottie-wrap > * {
    display: flex;
    justify-content: center;
    margin-left: -32px;  /* 無理やりレイアウト */
}

.popover-inner .lottie-wrap canvas {
    width: 200% !important;
}

.popover-inner .link > .link-wrap {
    padding-block: 0;
    background-color: var(--white);
    color: var(--green);
}

.popover-inner .link:hover > .link-wrap, .popover-inner .link:focus > .link-wrap {
    background-color: var(--green);
    color: var(--white);
}
/* /ポップオーバー */


/* お問い合わせポップオーバー */
.link.contact {
    anchor-name: --contact-anchor;
}

.popover {
    position-anchor: --contact-anchor;
    position-area: block-start;
    margin-bottom: 16px;
}

.button-close-wrap {
    height: 100%;
}
/* /お問い合わせポップオーバー */


/* 要素のフェードイン */
.js-inview {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(20px);
    transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease;
}

.js-inview.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

body.is-splashing {
    overflow: hidden;
}

body.is-splashing .js-fv {
    opacity: 0 !important;
    visibility: hidden !important;
}
/* /要素のフェードイン */


/* フッター */
footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 2 / 1;
}

footer img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    object-position: center;
}

.footer-text-wrap {
    background-color: var(--green);
    padding-inline: 12px;
    border-radius: calc(var(--font-size-small) * var(--l-height-large) * 0.5);
}

.footer-text-wrap > small {
    font-size: var(--font-size-small);
    line-height: var(--l-height-large);
    letter-spacing: 0.1em;
}
/* /フッター */