@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Zen+Old+Mincho:wght@400;600&display=swap");

@import url("./reset.css");

@import url("./utils.css");

:root {
    /* 共通 */
    --border: 1px solid var(--color-border);

    --border-light: 1px solid var(--color-border-light);
    /* ビューポート・スケール基準 */
    --viewport-base: 1440;
    --viewport-mobile: 375;
    --base-font-size: 16;
    --inner-base: 1170;
    /* 基準単位 (1px = 0.0625rem) */
    --u: calc(1rem / 16);
    /* レイアウト */
    --inner-width: calc(var(--inner-base) * 100vw / var(--viewport-base));
    --inner-max: 1440px;
    --margin-offset: min(0px, calc(-50vw + (var(--inner-width) / 2)));
    /* カラー */
    --color-base: #2b2b2b;
    --color-white: #ffffff;
    --color-background: var(--color-white);
    --color-button: #242424;
    --color-border: #959595;
    --color-border-light: #bcbcbc;
    --color-required: #b00000;
    --color-dot: #4c4c4c;
    --color-hover: rgba(0, 0, 0, 0.05);
    /* フォントサイズ */
    --fz12: calc(12 * var(--u));
    --fz13: calc(13 * var(--u));
    --fz14: calc(14 * var(--u));
    --fz15: calc(15 * var(--u));
    --fz16: calc(16 * var(--u));
    --fz18: calc(18 * var(--u));
    --fz20: calc(20 * var(--u));
    --fz22: calc(22 * var(--u));
    --fz24: calc(24 * var(--u));
    --fz26: calc(26 * var(--u));
    --fz30: calc(30 * var(--u));
    --fz32: calc(32 * var(--u));
    --fz36: calc(36 * var(--u));
    --fz80: calc(36 * var(--u));
    /* スペーシング */
    --sp4: calc(4 * var(--u));
    --sp6: calc(6 * var(--u));
    --sp8: calc(8 * var(--u));
    --sp10: calc(10 * var(--u));
    --sp12: calc(12 * var(--u));
    --sp16: calc(16 * var(--u));
    --sp20: calc(20 * var(--u));
    --sp24: calc(24 * var(--u));
    --sp32: calc(32 * var(--u));
    --sp36: calc(36 * var(--u));
    --sp40: calc(40 * var(--u));
    --sp48: calc(48 * var(--u));
    --sp56: calc(56 * var(--u));
    --sp64: calc(64 * var(--u));
    --sp72: calc(72 * var(--u));
    --sp80: calc(80 * var(--u));
    --sp88: calc(88 * var(--u));
    --sp96: calc(96 * var(--u));
    --sp112: calc(112 * var(--u));
    /* アニメーション */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-rich: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 0.2s;
    --duration-base: 0.4s;
    --duration-slow: 0.6s;
    --lh-ttl: 1.6;
    --ff-en: "EB Garamond", serif;
    --ff-num: "Playfair Display", serif;
    --radius: calc(5 * var(--u));
}

html {
    font-size: calc(var(--base-font-size) * 100vw / var(--viewport-base));
    scroll-padding-top: calc(100 * var(--u));
}

body {
    background-color: var(--color-background);
    color: var(--color-base);
    font-style: normal;
    font-weight: 400;
    font-size: var(--fz15);
    line-height: 2.33;
    font-family: "Zen Old Mincho", serif;
    font-optical-sizing: auto;
    letter-spacing: 0.03em;
    text-underline-offset: calc(4 * var(--u));
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

img {
    width: var(--w);
    height: auto;

    --w: calc(var(--width, 0) * var(--u));
}

img:not([style*="--width"]) {
    width: 100%;
}

:focus-visible {
    outline: 2px solid #888888 !important;

    outline-offset: 2px;
}

::selection {
    background: rgba(0, 0, 0, 0.1);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding-inline: var(--sp16);
    padding-block: var(--sp12);
    color: var(--color-base);
    pointer-events: none;
    transition: color 0.4s var(--ease-out);
}

.header.-invert {
    color: #ffffff;
}

.header.-invert .header_logo img {
    filter: brightness(0) invert(1);
}

.header.-invert .header_nav_list > li > a[target="_blank"] > span::after {
    filter: invert(1);
}

.header_logo {
    display: inline-block;
    padding: var(--sp10) var(--sp16);
    pointer-events: all;
}

.header_logo img {
    transition: filter 0.4s var(--ease-out);
}

.header_nav {
    padding-right: var(--sp8);
    pointer-events: all;
}

.header_nav_list {
    display: flex;
    align-items: center;
}

.header_nav_list > li {
    position: relative;
}

.header_nav_list > li > a,
.header_nav_list > li > button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--sp16);
}

.header_nav_list > li > a > span {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: right bottom;
    background-size: 0 1px;
    background-repeat: no-repeat;
    line-height: 1.8;
    transition: background-size var(--duration-base) var(--ease-out);
}

.header_nav_list > li > a:hover > span {
    background-position: left bottom;
    background-size: 100% 1px;
}

.header_nav_list > li > a[target="_blank"] > span::after {
    content: "";
    display: inline-block;
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    margin-left: var(--sp4);
    background: url(/assets/img/common/icon-blank.svg) no-repeat center / contain;
    vertical-align: -0.15em;
    transition: filter 0.4s var(--ease-out);
}

.header_nav_list > li > button {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: default;
}

.header_nav_sublist {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: calc(200 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.1);
    background: var(--color-white);
    color: var(--color-base);
    font-size: var(--fz14);
    transition:
        opacity var(--duration-base) var(--ease-out),
        visibility var(--duration-base) var(--ease-rich);
}

.header_nav_list > li:hover .header_nav_sublist,
.header_nav_list > li:focus-within .header_nav_sublist {
    visibility: visible;
    opacity: 1;
}

.header_nav_sublist > li {
}

.header_nav_sublist > li > a {
    display: block;
    padding: var(--sp8) var(--sp16);
    transition: background var(--duration-fast) var(--ease-out);
}

.header_nav_sublist > li > a:hover {
    background: var(--color-hover);
}

.menu {
    display: none;
}

.menu > span {
}

.menu > span.-top {
}

.menu > span.-mid {
}

.menu > span.-btm {
}

.spnav {
    display: none;
}

.spnav_list {
}

.spnav_list > li {
}

.spnav_list > li > a,
.spnav_list > li > button {
}

.spnav_list > li > button {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
}

.spnav_sublist {
}

.spnav_sublist > li {
}

.spnav_sublist > li > a {
}

.main {
    overflow: clip;
}

body:not(.-home) .main {
    padding-top: calc(170 * var(--u));
}

.main.-pb {
    padding-bottom: calc(170 * var(--u));
}

.main.-single .u-inner {
    position: relative;
}

.main_hd {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-bottom: var(--sp72);
}

.main_hd.-mb-m {
    margin-bottom: var(--sp48);
}

.main_ttl,
.main_hd_ttl {
    font-weight: 600;
    font-size: var(--fz30);
}

.main_ttl {
}

.main.-single .main_ttl {
    position: absolute;
    top: 0;
    left: 0;
}

.main_hd_ttl {
    display: flex;
    flex: 440;
    justify-content: center;
    align-items: center;
}

.main_hd_img {
    flex: 1000;
}

.main_hd_img > img {
    max-height: 520px;
    object-fit: cover;
}

.main_body {
}

.main.-single .main_body {
    width: calc(900 * var(--u));
    margin-inline: auto;
    padding-top: var(--sp36);
}

.cta {
    padding-block: var(--sp96);
    background-image: url(/assets/img/common/cta-bg@2x.jpg);
    background-position: center;
    background-size: cover;
    color: var(--color-white);
    text-align: center;
}

.cta_ttl {
    font-weight: 600;
    font-size: var(--fz30);
    line-height: var(--lh-ttl);
}

.cta_text {
    margin-top: var(--sp36);
}

.cta_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: var(--sp80);
}

.cta_item {
}

.cta_item:not(:first-child) {
    border-left: 1px solid var(--color-white);
}

.cta_item > dt {
}

.cta_item > dd {
}

.cta_item > dd.-phone {
    margin-top: var(--sp16);
}

.cta_item > dd.-form {
    margin-top: var(--sp20);
}

.cta_phone {
    display: inline-block;
    font-weight: 400;
    font-size: calc(56 * var(--u));
    line-height: 1;
    font-family: var(--ff-en);
}

.cta_open {
    display: inline-flex;
    align-items: center;
    font-size: var(--fz14);
}

.cta_form {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: calc(320 * var(--u));
    height: calc(64 * var(--u));
    border: 1px solid var(--color-white);
    border-radius: calc(32 * var(--u));
    background: var(--color-white);
    color: var(--color-base);
    font-size: var(--fz18);
    transition:
        background var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}

.cta_form:hover {
    background: transparent;
    color: var(--color-white);
}

.cta_form::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: var(--sp24);
    width: calc(8 * var(--u));
    border-radius: 50%;
    background: var(--color-border);
    transform: translateY(-50%);
    aspect-ratio: 1;
}

.footer {
    padding-top: var(--sp96);
    padding-bottom: var(--sp96);
}

.footer_wrap {
    display: grid;
    grid-template-columns: auto calc(400 * var(--u));
    grid-template-rows: 1fr;
    position: relative;
}

.footer_logo {
    grid-column: 1;
}

.footer_logo > a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp16);
}

.footer_logo > a > img {
    width: calc(72 * var(--u));
}

.footer_logo > a > em {
    font-weight: 600;
    font-size: var(--fz18);
    white-space: nowrap;
}

.footer_addr {
    display: flex;
    grid-column: 1/2;
    align-items: center;
    gap: var(--sp16);
}

.footer_addr > a {
}

.footer_nav {
    display: flex;
    grid-column: 1;
    grid-row: 3/4;
    align-items: flex-start;
    gap: var(--sp80);
    margin-top: var(--sp36);
    font-size: var(--fz14);
    line-height: 1;
}

.footer_nav_list {
    display: grid;
    gap: var(--sp6);
}

.footer_nav_list > li {
}

.footer_nav_list > li > a,
.footer_nav_list > li > span {
    display: inline-block;
    padding-block: var(--sp16);
}

.footer_nav_list > li > a > span {
    padding-bottom: var(--sp4);
    background-image: linear-gradient(currentColor, currentColor);
    background-position: right bottom;
    background-size: 0 1px;
    background-repeat: no-repeat;
    transition: background-size var(--duration-base) var(--ease-out);
}

.footer_nav_list > li > a:hover > span {
    background-position: left bottom;
    background-size: 100% 1px;
}

.footer_nav_list > li > a[target="_blank"] > span::after {
    content: "";
    display: inline-block;
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    margin-left: var(--sp4);
    background: url(/assets/img/common/icon-blank.svg) no-repeat center / contain;
    vertical-align: -0.15em;
}

.footer_nav_sublist a > span {
    display: inline-block;
    transition: transform var(--duration-base) var(--ease-rich);
}

.footer_nav_sublist a:hover > span {
    transform: translateX(var(--sp4));
}

.footer_nav_sublist {
    display: grid;
    gap: var(--sp6);
    margin-top: var(--sp6);
}

.footer_nav_sublist > li {
}

.footer_nav_sublist > li > a {
    display: inline-block;
    padding-block: var(--sp16);
}

.footer_nav_sublist > li > a::before {
    content: "-  ";
}

.footer_shop {
    grid-row: 3/4;
    align-content: end;
    text-align: center;
}

.footer_shop > dt {
}

.footer_shop > dd {
    margin-top: var(--sp6);
}

.footer_shop > dd > a {
    display: inline-block;
    width: calc(400 * var(--u));
    overflow: hidden;
    border-radius: var(--radius);
    vertical-align: bottom;
    transition: opacity var(--duration-base) var(--ease-out);
}

.footer_shop > dd > a:hover {
    opacity: 0.7;
}

.footer_pagetop {
    grid-column: 2/3;
    grid-row: 1/2;
    align-content: end;
    text-align: right;
}

.footer_pagetop > a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp8);
    font-size: var(--fz13);
}

.footer_pagetop > a > em {
}

.footer_pagetop > a > img {
    width: calc(31 * var(--u));
    transition: transform 0.6s var(--ease-out);
}

.footer_pagetop > a:hover > img {
    animation: fish-jump 0.8s ease-in-out;
}

@keyframes fish-jump {
    0% {
        transform: translateY(0) rotate(0);
    }

    25% {
        transform: translateY(calc(-16 * var(--u))) rotate(-15deg);
    }

    50% {
        transform: translateY(0) rotate(0);
    }

    65% {
        transform: translateY(calc(-6 * var(--u))) rotate(8deg);
    }

    80% {
        transform: translateY(0) rotate(0);
    }

    90% {
        transform: translateY(calc(-2 * var(--u))) rotate(-3deg);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

.footer_copy {
    grid-column: 2/3;
    grid-row: 5/5;
    margin-top: var(--sp16);
    font-size: var(--fz12);
    text-align: right;
}

[data-parallax="fadeUp"] {
    opacity: 0;
    transform: translateY(calc(24 * var(--u)));
    transition:
        opacity 0.8s var(--ease-out),
        transform 0.8s var(--ease-out);
}

[data-parallax="fadeUp"].-view {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 767.98px) {
    html {
        font-size: calc(var(--base-font-size) * 100vw / var(--viewport-mobile));
    }

    :root {
        --inner-width: calc(100vw - 48 * var(--u));
        --margin-offset: calc(-24 * var(--u));
    }

    body {
        line-height: 2;
    }

    /* header */
    .header_logo {
        padding: var(--sp6) var(--sp8);
    }

    .header_logo > img,
    .header_logo > a > img {
        width: calc(56 * var(--u));
    }

    .header_nav {
        display: none;
    }

    .menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: calc(6 * var(--u));
        position: fixed;
        top: var(--sp12);
        right: var(--sp16);
        z-index: 1001;
        width: calc(48 * var(--u));
        height: calc(48 * var(--u));
        border: none;
        background: transparent;
        cursor: pointer;
    }

    .menu > span {
        display: block;
        width: calc(24 * var(--u));
        height: 1px;
        background: var(--color-base);
        transition:
            transform var(--duration-base) var(--ease-out),
            opacity var(--duration-base) var(--ease-out),
            background 0.4s var(--ease-out);
    }

    .header.-invert + .menu:not(.-active) > span {
        background: #ffffff;
    }

    .menu.-active > span.-top {
        transform: translateY(calc(7 * var(--u))) rotate(45deg);
    }

    .menu.-active > span.-mid {
        opacity: 0;
    }

    .menu.-active > span.-btm {
        transform: translateY(calc(-7 * var(--u))) rotate(-45deg);
    }

    /* spnav */
    .spnav {
        display: flex;
        flex-direction: column;
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 100dvh;
        padding-top: calc(72 * var(--u));
        overflow-y: auto;
        background: var(--color-white);
        transition:
            opacity var(--duration-base) var(--ease-out),
            visibility var(--duration-base) var(--ease-out);

        -webkit-overflow-scrolling: touch;
    }

    .spnav.-active {
        visibility: visible;
        opacity: 1;
    }

    .spnav_list {
        display: grid;
        gap: var(--sp4);
        padding: var(--sp32) var(--sp24);
        font-size: var(--fz16);
        line-height: 1;
    }

    .spnav_list > li > a,
    .spnav_list > li > button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        width: 100%;
        padding-block: var(--sp16);
        text-align: left;
        cursor: pointer;
    }

    .spnav_list > li > button::before,
    .spnav_list > li > button::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        background: var(--color-base);
        transform: translateY(-50%);
        transition: transform var(--duration-base) var(--ease-out);
    }

    .spnav_list > li > button::before {
        width: calc(16 * var(--u));
        height: 1px;
    }

    .spnav_list > li > button::after {
        width: calc(16 * var(--u));
        height: 1px;
        transform: translateY(-50%) rotate(90deg);
    }

    .spnav_list > li > button.-open::after {
        transform: translateY(-50%) rotate(0deg);
    }

    .spnav_sublist {
        display: grid;
        gap: var(--sp4);
        height: 0;
        padding-left: var(--sp16);
        overflow: hidden;
        font-size: var(--fz14);
        transition: height var(--duration-base) var(--ease-out);
    }

    .spnav_sublist > li > a {
        display: block;
        padding-block: var(--sp12);
    }

    .spnav_sublist > li > a::before {
        content: "-  ";
    }

    .spnav_list > li > a[target="_blank"] > span::after {
        content: "";
        display: inline-block;
        width: calc(16 * var(--u));
        height: calc(16 * var(--u));
        margin-left: var(--sp8);
        background: url(/assets/img/common/icon-blank.svg) no-repeat center / contain;
        vertical-align: -0.15em;
    }

    /* main */
    body:not(.-home) .main {
        padding-top: calc(130 * var(--u));
    }

    .main.-pb {
        padding-bottom: calc(96 * var(--u));
    }

    .main.-single .main_body {
        width: 100%;
    }

    /* main_hd */
    .main_hd {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp24);
        margin-bottom: var(--sp40);
    }

    .main_hd_ttl {
        padding-inline: var(--sp24);
    }

    .main_hd_img > img {
        max-height: none;
    }

    .main_ttl,
    .main_hd_ttl {
        font-size: var(--fz20);
    }

    .main_ttl .u-vertical,
    .main_hd_ttl .u-vertical {
        letter-spacing: 0.1em;
        text-indent: 0;
        writing-mode: horizontal-tb;
    }

    .main.-single .main_ttl {
        position: static;
        /* margin-bottom: var(--sp32); */
    }

    /* cta */
    .cta {
        padding-block: var(--sp64);
    }

    .cta_ttl {
        font-size: var(--fz24);
    }

    .cta_text {
        margin-top: var(--sp24);
        font-size: var(--fz14);
        text-align: justify;
    }

    .cta_text > br {
        display: none;
    }

    .cta_list {
        grid-template-columns: 1fr;
        gap: var(--sp32);
        margin-top: var(--sp48);
    }

    .cta_item:not(:first-child) {
        padding-top: var(--sp32);
        border-top: 1px solid var(--color-white);
        border-left: none;
    }

    .cta_phone {
        font-size: calc(40 * var(--u));
    }

    .cta_form {
        width: 100%;
        max-width: calc(300 * var(--u));
        font-size: var(--fz16);
    }

    /* footer */
    .footer {
        padding-top: var(--sp64);
        padding-bottom: var(--sp48);
    }

    .footer_wrap {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: var(--sp24);
    }

    .footer_logo {
        grid-column: auto;
    }

    .footer_logo > a {
        /* flex-direction: column; */
        align-items: center;
        /* gap: var(--sp6); */
    }

    .footer_logo > a > em {
        font-size: var(--fz14);
    }

    .footer_addr {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp8);
        font-size: var(--fz13);
    }

    .footer_nav {
        display: none;
    }

    .footer_shop {
        grid-row: auto;
        margin-top: var(--sp8);
    }

    .footer_shop > dt {
        font-size: var(--fz13);
    }

    .footer_shop > dd > a {
        width: 100%;
    }

    .footer_pagetop {
        display: none;
        grid-column: auto;
        grid-row: auto;
        position: absolute;
        top: 0;
        right: 0;
        text-align: right;
    }

    .footer_copy {
        grid-column: auto;
        grid-row: auto;
        margin-top: var(--sp32);
        text-align: left;
    }
}

@media screen and (min-width: 1440px) {
    :root {
        --inner-width: calc(var(--inner-base) * 100vw / var(--viewport-base));
        --margin-offset: min(0px, calc(-50vw + (var(--inner-width) / 2)));
    }
}

@media screen and (min-width: 1771px) {
    html {
        font-size: 19.6923px;
    }

    :root {
        --inner-width: var(--inner-max);
        --margin-offset: calc((var(--inner-max) - 100vw) / 2);
    }
}

@media print {
    body {
        -webkit-print-color-adjust: exact;
    }
}