@charset "UTF-8";

/*
変数定義
----------------------------------------------------------- */
:root {
    /* カラー */
    --color-primary: #E9E4D7;
    --color-secondary: #F6F3EB;
    --color-accent: #687657;
    --color-text: #472C11;
    --color-link: #996D42;
    --color-white: #FFFFFE;
    --color-body: #FFFFFE;
    --color-point: #CCC3BC;

    --font-jp: "Noto Sans JP", sans-serif;
    --font-en: "DM Sans", sans-serif;
    --font-accent: "Zen Maru Gothic", sans-serif;

    --wrapper: 1380px;
    --wrapper-wide: 1650px;
    --wrapper-xl: 1780px;
    --wrapper-news: 1580px;

    --space-unit: 70px;
    --header-height: 145px;
    --space-sec-num: 3px;
    --space-heading: 25px;
    --space-heading-text: 50px;
    --space-text-btn: 60px;
    --space-mv-top: 30px;
    --space-section: 140px;
    --space-books-extra: 210px;
    --space-side-large-max: 200px;
    --space-side-large-min: 70px;
    --space-news-area: 100px;
    --space-footer-top: 100px;

    --gap-20: 20px;
    --gap-30: 30px;
    --gap-70: 70px;
    --gap-sm: 50px;
    --gap-md: 100px;
    --gap-lg: 130px;

    --duration: 0.7s;
}

/*
ベース
----------------------------------------------------------- */
html {
    font-size: 100%;
    overflow-x: clip;
}

body {
    font-family: var(--font-jp);
    font-size: 1rem;
    /* 16px */
    line-height: calc(36 / 16);
    letter-spacing: 0.1em;
    font-optical-sizing: auto;
    font-weight: 400;
    overflow-x: clip;
    padding-top: var(--header-height);
    background-color: var(--color-body);
    color: var(--color-text);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/*
レイアウト
----------------------------------------------------------- */
/*.wrapper,
.wrapper-wide,
.wrapper-xl{
    width:100%;
    margin:0 auto;
    padding-inline:var(--space-unit);
}*/

.wrapper {
    max-width: var(--wrapper);
    margin-inline: auto;
    padding-inline: var(--space-unit);
}

.wrapper-wide {
    max-width: var(--wrapper-wide);
    margin-inline: auto;
}

.wrapper-xl {
    width: 100%;
    max-width: var(--wrapper-xl);
    margin-inline: auto;
    padding-inline: var(--space-unit);
}

.wrapper-wide-left {
    padding-left: clamp(var(--space-side-large-min), 10vw, var(--space-side-large-max));
    padding-right: var(--space-side-large-min);
}

.wrapper-wide-right {
    padding-left: var(--space-side-large-min);
    padding-right: clamp(var(--space-side-large-min), 10vw, var(--space-side-large-max));
}

/*
ユーティリティ - Flex
----------------------------------------------------------- */
.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.gap-20 {
    gap: var(--gap-20);
}

.gap-30 {
    gap: var(--gap-30);
}

.gap-70 {
    gap: var(--gap-70);
}

.gap-sm {
    gap: var(--gap-sm);
}

.gap-md {
    gap: var(--gap-md);
}

.gap-lg {
    gap: var(--gap-lg);
}

/*
ユーティリティ - Grid
----------------------------------------------------------- */
.grid {
    display: grid;
}

.grid-4col {
    grid-template-columns: repeat(4, 1fr);
}

.grid-3col {
    grid-template-columns: repeat(3, 1fr);
}

.grid-2col {
    grid-template-columns: repeat(2, 1fr);
}

/*
共通コンポーネント
----------------------------------------------------------- */
.sec-num {
    font-family: var(--font-en);
    font-size: 1rem;
    /* 16px */
    line-height: calc(22 / 16);
    font-weight: 700;
    padding-bottom: var(--space-sec-num);
    color: var(--color-accent);
}

.sec-en {
    font-family: var(--font-en);
    font-size: 1.125rem;
    /* 18px */
    line-height: calc(25 / 18);
    font-weight: 700;
    padding-bottom: var(--space-heading);
    color: var(--color-accent);
}

.sec-ttl {
    font-family: var(--font-accent);
    font-size: 1.625rem;
    /* 26px */
    font-weight: 700;
    line-height: calc(38 / 26);
    /*text-align: left;*/
    padding-bottom: var(--space-heading-text);
    color: var(--color-text);
}

.section-label {
    font-size: 1.375rem;
    /* 22px */
    font-weight: 700;
    letter-spacing: .1em;
    line-height: calc(40 / 22);
    color: var(--color-accent);
    padding-bottom: 20px;
}

.section-label-en {
    font-family: var(--font-en);
}

.section-label-ja {
    font-family: var(--font-accent);
}

.section-space {
    margin-bottom: var(--space-section);
}

.sub-ttl {
    font-family: var(--font-accent);
    font-size: 1.5rem;
    /* 24px */
    font-weight: 700;
    line-height: calc(40 / 24);
    color: var(--color-text);
    padding-bottom: 5px;
}

.sub-en {
    font-family: var(--font-en);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-point);
    line-height: calc(20 / 14);
    padding-bottom: 30px;
}

/* br */
.br-sp {
    display: none;
}

/* ボタン共通 */
.btn {
    display: inline-flex;
    align-items: center;
    width: 362px;
    height: 92px;
    padding-left: 25px;
    border: 1.5px solid var(--color-text);
    background-color: transparent;
    font-family: var(--font-accent);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    position: relative;
    transition: background-color var(--duration), color var(--duration);
    /*margin-top: var(--space-text-btn);*/
}

/* 矢印 */
.btn::after {
    content: "";
    position: absolute;
    right: 25px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: inherit;
}

.mt-btn {
    margin-top: var(--space-text-btn);
}

/* ページトップボタン */
.pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    background-color: var(--color-accent);
    border-radius: 50%;
    border: 1px solid var(--color-accent);
    opacity: 0;
    visibility: hidden;
    transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.5s, visibility 0.5s;
}

/* 表示状態 */
.pagetop.is-visible {
    opacity: 1;
    visibility: visible;
}

.pagetop:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    border-top: 3px solid var(--color-white);
    border-right: 3px solid var(--color-white);
    translate: 0 20%;
    rotate: -45deg;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
}

.pagetop {
    transition: background-color var(--duration), border-color var(--duration), opacity 0.5s, visibility 0.5s;
}

/* ホバー制御（PC） */
@media (hover: hover) and (pointer: fine) {
    .btn:hover {
        background-color: var(--color-text);
        color: var(--color-body);
    }

    .card figure img:hover {
        transform: scale(1.08);
    }

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

    .pagetop:hover::before {
        border-color: var(--color-accent);
    }
}

/**** 下層ページ ****/
/* page-hero */
.page-hero {
    padding-block: 140px;
}

.page-ttl {
    font-family: var(--font-en);
    font-size: 2.5rem;
    /* 40px */
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.15em;
}

/* テーブル共通 */
.dl-table {
    width: 100%;
    border-collapse: collapse;
}

.dl-table tr {
    border-bottom: 1px dotted var(--color-text);
}

.dl-table th,
.dl-table td {
    padding: 14px 0;
    text-align: left;
    vertical-align: top;
}

.dl-table th {
    font-weight: 400;
    padding-right: 24px;
}


/*
dot-list
----------------------------------------------------------- */
.dot-list li {
    padding-left: 1em;
    position: relative;
}

.dot-list li::before {
    content: "・";
    position: absolute;
    left: 0;
}

/*
ローディング
----------------------------------------------------------- */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.8s ease;
}

#loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-logo {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.loading-logo img {
    width: 400px;
    height: auto;
}

.loading-logo.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*
header
----------------------------------------------------------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 100;
    transition: .3s;
}

.header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 254, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header .wrapper-xl {
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
}

/* ロゴ */
.logo img {
    margin: 0;
    width: 240px;
    height: auto;
    transition: .3s;
    padding-right: 15px;
}

/* グローバルナビ */
.nav-link {
    display: block;
    padding: 0 16px;
    height: calc(var(--header-height) - 20px);
    line-height: calc(var(--header-height) - 20px);
    font-family: var(--font-en);
    font-size: 1rem;
    /* 16px */
    font-weight: 600;
    color: var(--color-text);
    position: relative;
}

/* 下線 */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;
    height: 2px;
    background: var(--color-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: .3s;
}

/* ホバー時 */
@media (hover: hover) and (pointer: fine) {
    .nav-link:hover::after {
        transform: scaleX(1);
    }
}

.header-right {
    margin-left: auto;
}

/* TOPロゴ非表示 */
.home .logo {
    display: none;
}

/* オーバーレイ */
.nav-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

body.open .nav-overlay {
    opacity: 1;
    visibility: visible;
}

/* ハンバーガーメニュー */
.menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-icon {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.menu-line {
    width: 30px;
    height: 2px;
    background: var(--color-text);
    transition: 0.3s;
}

body.open .menu-line:first-child {
    transform: translateY(4px) rotate(45deg);
}

body.open .menu-line:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

/* ヘッダーアイコン */
.head-insta {
    font: size 22px;
}

.head-mail {
    font: size 22px;
}

.header-right a {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ドロワー */
.drawer-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background: var(--color-primary);
    transform: translateX(100%);
    transition: transform 0.4s ease;
    z-index: 1000;
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    /*padding-top: var(--header-height);*/
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

body.open .drawer-nav {
    transform: translateX(0);
}

/* ドロワースクロールバー非表示 */
.drawer-nav::-webkit-scrollbar {
    display: none;
    /* Chrome, Edge, Safari */
}

.drawer-logo {
    padding: 60px 20px 30px;
}

.drawer-logo img {
    width: 130px;
}

.drawer-main {
    padding: 0 40px;
}

.drawer-main a {
    display: block;
    padding: 18px 0;
    font-family: var(--font-en);
    font-size: 1rem;
    /* 16px */
    font-weight: 600;
    position: relative;
}

.drawer-subnav {
    padding: 60px 40px;
    font-family: var(--font-en);
    font-size: 1rem;
    /* 16px */
    font-weight: 400;
}

.drawer-subnav a {
    position: relative;
    display: inline-block;
}

.drawer-subnav i {
    margin-left: 6px;
    font-size: 0.875rem;
    transition: .3s;
}

/* ドロワー下線 */
.drawer-main a::after,
.drawer-subnav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: .3s;
}

/* ホバー時 */
@media (hover: hover) and (pointer: fine) {

    .drawer-main a:hover::after,
    .drawer-subnav a:hover::after {
        transform: scaleX(1);
    }
}

/* ドロワー ×ボタン */
.drawer-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
}

.drawer-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background: var(--color-text);
}

.drawer-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.drawer-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* スクロールで高さ変更 */
body.scrolled .header {
    height: 100px;
}

body.scrolled .logo img {
    width: 180px;
}

body.scrolled .nav-link {
    height: calc(var(--header-height) - 80px);
    line-height: calc(var(--header-height) - 80px);
}



/*
main visual
----------------------------------------------------------- */
.mv {
    min-height: calc(100vh - var(--header-height));
    padding-top: var(--space-mv-top);
}

.mv-txt {
    width: 35%;
    flex-direction: column;
}

.mv-copy {
    font-family: var(--font-accent);
    font-size: 1.375rem;
    /* 22px */
    font-weight: 700;
    line-height: calc(36 / 22);
    padding-top: 80px;

}

.slider {
    position: relative;
    width: 65%;
}

.slider img {
    width: 100%;
    height: auto;
    display: block;
}

.mv-logo img {
    width: 280px;
}

/* スライダー矢印カスタマイズ */
.swiper-button-prev svg,
.swiper-button-next svg {
    display: none;
}

/* スライダードットカスタマイズ */
.swiper-pagination-bullet {
    width: clamp(15px, 4vw, 30px);
    height: clamp(2px, 0.4vw, 5px);
    border-radius: 0;
    background: var(--color-white);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

.swiper-pagination {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    position: absolute;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    width: auto !important;
}

/*
sec-concept
----------------------------------------------------------- */
.concept-inner {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
}

.concept-movie {
    flex: 0 1 580px;
}

.concept-txt {
    flex: 0 1 670px;
}

.image-video {
    width: 100%;
    height: auto;
    display: block;
}

/*
sec-books
----------------------------------------------------------- */
.top-books {
    padding-bottom: var(--space-books-extra);
}

.books-txt {
    flex: 1;
    max-width: 730px;
}

.books-img {
    flex: 1;
    max-width: 790px;
    position: relative;
    aspect-ratio: 720 / 800;
}

.books-img img {
    width: 100%;
    display: block;
}

.books-img01 {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
}

.books-img02 {
    position: absolute;
    top: 38%;
    left: -7%;
    width: 44%;
}

.books-img03 {
    position: absolute;
    top: 84%;
    left: -66%;
    width: 80%;
}

/*
sec-cafe
----------------------------------------------------------- */
.cafe-txt {
    flex: 1;
    max-width: 770px;
}

.cafe-img {
    flex: 1;
    max-width: 680px;
}

.cafe-img01 {
    width: 100%;
}


/*
sec-gallery
----------------------------------------------------------- */
.gallery-txt {
    flex: 1;
    max-width: 770px;
}

.gallery-img {
    flex: 1;
    max-width: 720px;
}

.gallery-img01,
.gallery-img02 {
    width: 100%;
    max-width: 340px;
}

.gallery-img02 {
    margin-top: 100px;
}

/*
card 共通
----------------------------------------------------------- */
.card {
    position: relative;
}

.card-img {
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
    aspect-ratio: 4 / 3;
}

.card-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s;
}

.card-img:hover img {
    transform: scale(1.05);
}

.card-ttl {
    padding-bottom: 20px;
}

.card-ttl a {
    font-family: var(--font-accent);
    font-size: 1.125rem;
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    transition: .3s;
}

.card-ttl a:hover {
    text-decoration: none;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-cat {
    display: inline-block;
    padding: 4px 16px;
    background: var(--color-primary);
    font-size: 1rem;
    line-height: calc(22 / 16);
    font-family: var(--font-en);
    color: inherit;
    text-decoration: none;
    transition: .3s;
}

a.card-cat:hover {
    opacity: .7;
}

.card-meta time {
    font-family: var(--font-en);
    font-size: 0.875rem;
}

/*
info-list 情報リスト（gallery・single で共通使用）
----------------------------------------------------------- */
.ga-sec03-info {
    margin-top: 30px;
    margin-bottom: 30px;
}

.ga-sec03-info p {
    display: flex;
    gap: 20px;
}

.ga-sec03-info span {
    font-weight: 700;
    min-width: 80px;
}

/*
sec-event-news
----------------------------------------------------------- */
.top-news {
    padding-inline: var(--space-unit);
}

.news-box {
    max-width: var(--wrapper-news);
    margin-inline: auto;
    border: 1.5px solid var(--color-text);
    padding: var(--space-news-area);
}

.news-box .wrapper {
    padding-inline: 0;
}

.top-news .btn {
    display: flex;
    margin: var(--space-text-btn) auto 0;
}

.home .card:nth-child(4) {
    display: none;
}

/*
FAQ
----------------------------------------------------------- */
.faq-img {
    flex-shrink: 0;
    width: min(480px, 40%);
}

.faq-img img {
    width: 100%;
    display: block;
}

.faq-txt {
    flex: 1;
    max-width: 800px;
}

.faq-item {
    margin-bottom: 40px;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    background: none;
    border: none;
    padding: 0 30px 20px 0;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px dotted var(--color-text);
}

/* Qマーク */
.faq-mark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-en);
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    line-height: calc(50 / 20);

    min-width: 44px;
    flex-shrink: 0;
}

/* Qテキスト */
.faq-question-text {
    font-family: var(--font-accent);
    font-size: 1.125rem;
    /* 18px */
    font-weight: 700;
    line-height: calc(38 / 18);
}

.top-faq .btn {
    margin-top: 40px;
}

/* アコーディオン */
.faq-answer {
    display: none;
}

.faq-answer p {
    margin-top: 20px;
}

.faq-item.active .faq-answer {
    display: block;
    animation: fadeIn .3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*+マーク */
.faq-question {
    position: relative;
}

.faq-question::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    transition: .3s;
}

.faq-item.active .faq-question::after {
    transform: translateY(-50%) rotate(45deg);
}

/*
split layout
----------------------------------------------------------- */

/* 左エリア：コンテンツ（残りの幅をすべて使う） */

/* 右エリア：動画（幅50%固定） */

/*
footer
----------------------------------------------------------- */
.footer {
    background: var(--color-primary);
    padding: var(--space-footer-top) 0;
}

.footer-inner {
    align-items: flex-end;
}

.footer-left {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.footer-logo {
    text-align: left;
    margin-bottom: -10px;
}

.footer-logo img {
    width: 240px;
    display: block;
}

/*.footer-info { margin-bottom:50px; }*/
.footer-map {
    font-family: var(--font-en);
    font-weight: 700;
}

.text-arrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.text-arrow::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    transform: rotate(45deg);
    transition: .3s;
}

.text-arrow:hover::after {
    transform: translateX(3px) rotate(45deg);
}

.footer-map a:hover {
    opacity: .7;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.footer-btn {
    background: var(--color-white);
}

.footer-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Instagramアイコン */
.footer-nav i {
    margin-left: 6px;
    font-size: 0.875rem;
    transition: .3s;
}

.footer-nav li {
    display: flex;
    align-items: center;
}

.footer-nav li:not(:last-child)::after {
    content: "|";
    margin: 0 16px;
}

.footer-nav a {
    position: relative;
    text-decoration: none;
    color: inherit;
}

/* 下線 */
.footer-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: .3s;
}

/* ホバー時 */
@media (hover: hover) and (pointer: fine) {
    .footer-nav a:hover::after {
        transform: scaleX(1);
    }
}

.copyright {
    text-align: center;
    font-size: 0.875rem;
    /* 14px */
}

small {
    font-size: 100%;
}


/*
フェードアップアニメーション
----------------------------------------------------------- */
.f-up {
    opacity: 0;
}

.f-up.fadeup {
    animation: fadeupanime 1s forwards;
}

@keyframes fadeupanime {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delay-1.fadeup {
    animation-delay: .2s;
}

.delay-2.fadeup {
    animation-delay: .4s;
}

.delay-3.fadeup {
    animation-delay: .6s;
}

/*
レスポンシブ - tablet
----------------------------------------------------------- */


/*
レスポンシブ - tablet + mobile 共通
----------------------------------------------------------- */


/*
レスポンシブ - mobile
----------------------------------------------------------- */


/*
concept ページ（コンセプト）
----------------------------------------------------------- */

/*
co-sec01
----------------------------------------------------------- */
.co-sec01-img {
    margin-bottom: 60px;
}

.co-sec01-img img {
    width: 100%;
    aspect-ratio: 7 / 3;
    /* 比率を指定 */
    object-fit: cover;
}

/*
co-sec02〜04 共通
----------------------------------------------------------- */
.co-sec02-img,
.co-sec03-img,
.co-sec04-img {
    width: clamp(400px, 46vw, 800px);
    /* 可変 */
    flex-shrink: 0;
}

.co-sec02-img img,
.co-sec03-img img,
.co-sec04-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.co-sec02-txt,
.co-sec04-txt {
    flex: 1;
    padding-right: clamp(70px, 14vw, 280px);
}

.co-sec03-txt {
    flex: 1;
    padding-left: clamp(70px, 14vw, 280px);
}


/*
レスポンシブ - tablet
----------------------------------------------------------- */


/*
レスポンシブ - tablet + mobile 共通
----------------------------------------------------------- */


/*
レスポンシブ - mobile
----------------------------------------------------------- */


/*
books ページ（書籍紹介）
----------------------------------------------------------- */

/*
co-sec01
----------------------------------------------------------- */
.bo-sec01-txt {
    width: 40%;
    padding-left: clamp(70px,14vw,270px);
}

.bo-sec01-img {
    width: 60%;
    gap: 16px;
}

.bo-sec01-img figure {
    flex: 1;
}

.bo-sec01-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
co-sec02
----------------------------------------------------------- */
.bo-sec02-lead {
    padding-bottom: var(--space-heading-text);
}

.bo-sec02 .card-ttl a {
    font-size: 1rem;
}

/*
bo-sec03
----------------------------------------------------------- */
.bo-sec03-txt {
    flex: 1;
}

.bo-sec03-inner .swiper-sub {
    flex: 1;
    min-width: 0;
}

.bo-sec03-inner .swiper-sub img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/*
genre
----------------------------------------------------------- */
.genre-box {
    border: 1px solid var(--color-text);
    padding: 30px;
    margin-top: 40px;
}

.genre-list {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 20px 30px;
}

.genre-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-family: var(--font-accent);
}

.genre-list i {
    color: var(--color-point);
    width: 20px;
    text-align: center;
}

/*
レスポンシブ - tablet
----------------------------------------------------------- */


/*
レスポンシブ - tablet + mobile 共通
----------------------------------------------------------- */


/*
レスポンシブ - mobile
----------------------------------------------------------- */


/*
cafe ページ（カフェメニュー）
----------------------------------------------------------- */

/*
共通
----------------------------------------------------------- */
.menu-note {
    font-size: 0.875rem;
    padding-bottom: var(--space-heading-text);
    text-align: right;
}


/*
ca-sec02
----------------------------------------------------------- */
.recommend-img {
    overflow: hidden;
    margin-bottom: 20px;
}

.recommend-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.recommend-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.recommend-name {
    font-size: 1.375rem;
    font-weight: 700;
    font-family: var(--font-accent);
}

.recommend-price {
    font-family: var(--font-en);
    font-size: 1.375rem;
    font-weight: 700;
    white-space: nowrap;
}

.recommend-txt {
    line-height: 2;
    background: var(--color-secondary);
    padding: 15px;
}
/*
ca-sec03・04
----------------------------------------------------------- */
.menu-group {
    align-items: flex-start;
}

.menu-group + .menu-group {
    margin-top: 56px;
}

.menu-img {
    width: 32%;
    flex-shrink: 0;
}

.menu-img img {
    width: 100%;
    display: block;
}

.menu-content {
    flex: 1;
}

.menu-caption {
    margin-top: 12px;
    font-size: .75rem;
    line-height: calc(20 / 12);
    color: var(--color-text-light);
}

.menu-content .dl-table td {
    font-family: var(--font-en);
    text-align: right;
    white-space: nowrap;
}


/*
レスポンシブ - tablet
----------------------------------------------------------- */


/*
レスポンシブ - tablet + mobile 共通
----------------------------------------------------------- */


/*
レスポンシブ - mobile
----------------------------------------------------------- */


/*
gallery ページ（ギャラリー）
----------------------------------------------------------- */

/*
ga-sec02 展示スペース
----------------------------------------------------------- */
.ga-sec02-inner {
    padding-left: clamp(70px, 14vw, 270px);
}

.ga-sec02-txt {
    flex: 0 1 500px;
    min-width: 200px;
}

.ga-sec02-img {
    flex: 0 1 1050px;
    min-width: 0;
}

.ga-sec02-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/*
ga-sec03 現在開催中の展示
----------------------------------------------------------- */
.ga-sec03-inner {
    gap: 80px;
}

.ga-sec03-img {
    flex: 0 1 800px;
    min-width: 0;
}

.ga-sec03-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .5s;
}

.ga-sec03-img:hover img {
    transform: scale(1.05);
}

.ga-sec03-txt {
    flex: 0 1 500px;
    min-width: 0;
}

.ga-sec03 .btn {
    display: flex;
    margin: var(--space-text-btn) auto 0;
}

/*
ga-sec04 ワークショップ・イベント
----------------------------------------------------------- */
.ga-sec04-txt {
    flex: 0 1 640px;
    min-width: 0;
}

.ga-sec04-inner .swiper-sub {
    flex: 0 1 640px;
    min-width: 0;
}

.ga-sec04-inner .swiper-sub img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/*
ga-sec05 展示スペースについて
----------------------------------------------------------- */
.ga-sec05-inner {
    margin-top: 80px;
}

.ga-sec05-img {
    flex: 0 1 427px;
    min-width: 0;
}

.ga-sec05-img img {
    width: 100%;
    display: block;
}

.ga-sec05-txt {
    flex: 0 1 900px;
    min-width: 0;
}

.ga-sec05-detail {
    margin-top: 80px;
}

/*
ga-sec06 お問い合わせ
----------------------------------------------------------- */
.ga-sec06-img {
    flex: 0 1 960px;
    min-width: 0;
}

.ga-sec06-img img {
    width: 100%;
    display: block;
}

.ga-sec06-txt {
    flex: 0 1 680px;
    min-width: 0;
    padding-right: clamp(70px, 9.4vw, 180px);
}

/*
レスポンシブ - tablet
----------------------------------------------------------- */


/*
レスポンシブ - tablet + mobile 共通
----------------------------------------------------------- */


/*
レスポンシブ - mobile
----------------------------------------------------------- */


/*
event-news ページ（イベント・お知らせ一覧）
----------------------------------------------------------- */

/*
archive-filter カテゴリーフィルター
----------------------------------------------------------- */
.archive-filter {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 60px;
}

.filter-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1.5px solid var(--color-text);
    padding: 0 20px 0 0;
}

.filter-label {
    font-family: var(--font-en);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    padding: 10px 16px;
}

.filter-list li:not(:last-child)::after {
    content: "|";
    margin: 0 16px;
    opacity: 0.4;
}

.filter-list {
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-btn {
    font-family: var(--font-en);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    padding: 4px 8px;
    transition: .3s;
}

.filter-btn.is-active {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .filter-btn:hover {
        opacity: .7;
    }
}

/*
pagination ページネーション
----------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 80px;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    width: 160px;
    height: 64px;
    padding-left: 25px;
    border: 1.5px solid var(--color-text);
    background-color: transparent;
    font-family: var(--font-en);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    position: relative;
    text-decoration: none;
    transition: background-color var(--duration), color var(--duration);
}

/* NEXTの矢印 */
.pagination-next::after {
    content: "";
    position: absolute;
    right: 25px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: inherit;
}

/* PREVの矢印 */
.pagination-prev::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 3px solid currentColor;
    border-left: 3px solid currentColor;
    transform: translateY(-50%) rotate(-45deg);
    transition: inherit;
}

.pagination-prev {
    padding-left: 45px;
    /* 矢印分ずらす */
}

.pagination-list {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    font-family: var(--font-en);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    border: 1.5px solid var(--color-text);
    transition: .3s;
}

.pagination-num.is-active,
.pagination-num:hover {
    background: var(--color-text);
    color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .pagination-btn:hover {
        background-color: var(--color-text);
        color: var(--color-white);
    }
}

/* 一覧ページは全件表示
.news-archive .card {
    display: block;
} */

/*
レスポンシブ - tablet
----------------------------------------------------------- */


/*
レスポンシブ - tablet + mobile 共通
----------------------------------------------------------- */


/*
レスポンシブ - mobile
----------------------------------------------------------- */


/*
faq ページ（よくある質問）
----------------------------------------------------------- */

/*
レスポンシブ - tablet
----------------------------------------------------------- */


/*
レスポンシブ - tablet + mobile 共通
----------------------------------------------------------- */


/*
レスポンシブ - mobile
----------------------------------------------------------- */


/*
access ページ（アクセス）
----------------------------------------------------------- */

/*
ac-sec01 店舗情報
----------------------------------------------------------- */
.ac-sec01-inner {
    align-items: flex-start;
}

.ac-sec01-img {
    flex: 0 1 665px;
    min-width: 0;
}

.ac-sec01-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.ac-sec01-txt {
    flex: 0 1 665px;
    min-width: 0;
}

/*
ac-sec02 アクセスガイド
----------------------------------------------------------- */
.ac-sec02-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.ac-sec02-caption {
    margin-top: 16px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.ac-sec02-num {
    font-family: var(--font-en);
    color: var(--color-accent);
    font-weight: 700;
}

/*
レスポンシブ - tablet
----------------------------------------------------------- */


/*
レスポンシブ - tablet + mobile 共通
----------------------------------------------------------- */


/*
レスポンシブ - mobile
----------------------------------------------------------- */


/*
contact ページ（お問い合わせ）
----------------------------------------------------------- */

/*
co-sec02
----------------------------------------------------------- */
.co-sec02-note {
    margin-bottom: 40px;
    font-size: .875rem;
}

.contact-form-wrap {
    border: 1.5px solid var(--color-text);
    padding: clamp(40px, 5vw, 90px);
}

.contact-form {
    max-width: 1060px;
    margin-inline: auto;
}

.form-group {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
}

.form-group+.form-group {
    margin-top: 20px;
}

.form-label {
    font-weight: 700;
    line-height: 46px;
    white-space: nowrap;
}

.form-required {
    color: #c96b6b;
    font-size: .875rem;
}

/* 入力欄共通 */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: #f8f7f3;
    color: var(--color-text);
    font: inherit;
}

/* input・select */
.form-input,
.form-select {
    min-height: 46px;
}

/* select */
.form-select {
    padding-block: 12px;
}

/* textarea */
.form-textarea {
    min-height: 180px;
    resize: vertical;
}

/* フォーカス */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* チェックボックス */
.form-check {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}

.form-check input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--color-accent);
}

.form-check label {
    font-size: .875rem;
    cursor: pointer;
}

.form-check a {
    color: inherit;
    text-decoration: underline;
}

/* 送信ボタン */
.form-submit {
    text-align: center;
    margin-top: 32px;
}

.form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 180px;
    height: 56px;
    background: var(--color-text);
    color: var(--color-white);
    border: none;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
}

.form-btn:hover {
    background: var(--color-accent);
}

.form-btn i {
    font-size: 1rem;
}

/* CF7が勝手につけるspanのmarginをリセット */
.wpcf7-form-control-wrap {
    margin: 0;
}

/* pタグをgridアイテムとして機能させる */
.form-group p {
    display: contents;
}

/* brタグを非表示に */
.form-group br {
    display: none;
}

/*
レスポンシブ - tablet
----------------------------------------------------------- */


/*
レスポンシブ - tablet + mobile 共通
----------------------------------------------------------- */


/*
レスポンシブ - mobile
----------------------------------------------------------- */


/*
single ページ（記事詳細）
----------------------------------------------------------- */

/*
single-thumb アイキャッチ
----------------------------------------------------------- */
.single-thumb {
    padding-top: var(--space-section);
}

.single-thumb-img {
    max-width: 800px;
    margin-inline: auto;
}

.single-thumb-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/*
single-header 記事ヘッダー
----------------------------------------------------------- */
.single-header.section-space {
    margin-bottom: 0;
}

.single-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 40px;
    /* 画像との余白 */
}

.single-meta time {
    font-family: var(--font-en);
    font-size: 1.125rem;
    line-height: calc(36 / 18);
}

.single-meta .card-cat {
    font-size: 1.125rem;
    line-height: calc(36 / 18);
}

.single-ttl {
    font-family: var(--font-accent);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: calc(38 / 26);
    color: var(--color-text);
    padding-block: 20px;
    border-top: 1.5px solid var(--color-text);
    border-bottom: 1.5px solid var(--color-text);
}

/*
single-body 記事本文
----------------------------------------------------------- */
.single-body {
    padding-top: var(--space-heading-text);
}

/*.single-body p {
    margin-bottom: 20px;
}*/

/*
single-nav ページナビゲーション
----------------------------------------------------------- */
.single-nav {
    margin-top: 60px;
}

.single-nav-inner {
    gap: 16px;
}

.single-nav-btn {
    display: inline-flex;
    align-items: center;
    height: 64px;
    padding-inline: 25px;
    border: 1.5px solid var(--color-text);
    background-color: transparent;
    font-family: var(--font-en);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    position: relative;
    text-decoration: none;
    transition: background-color var(--duration), color var(--duration);
}

/* NEXT矢印 */
.single-nav-next::after {
    content: "";
    position: absolute;
    right: 25px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: inherit;
}

.single-nav-next {
    padding-right: 50px;
}

/* PREV矢印 */
.single-nav-prev::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 3px solid currentColor;
    border-left: 3px solid currentColor;
    transform: translateY(-50%) rotate(-45deg);
    transition: inherit;
}

.single-nav-prev {
    padding-left: 50px;
}

@media (hover: hover) and (pointer: fine) {
    .single-nav-btn:hover {
        background-color: var(--color-text);
        color: var(--color-white);
    }
}

/* ギャラリーの情報リストを記事本文内で使用（info-list共通コンポーネント参照） */
.single-body .ga-sec03-info p {
    margin-bottom: 0;
}

/* artist profile */
/*.artist-profile .wp-block-group {
    align-items: center;
}*/

.artist-ttl {
    font-family: var(--font-en);
    color: var(--color-accent);
    font-weight: 700;
    line-height: calc(36 / 16);

}

.artist-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.artist-bio {
    font-size: 1rem;
    line-height: 1.8;
}

.artist-profile .wp-block-group.is-vertical {
    padding-left: 40px;
}

/*
レスポンシブ - tablet
----------------------------------------------------------- */


/*
レスポンシブ - tablet + mobile 共通
----------------------------------------------------------- */


/*
レスポンシブ - mobile
----------------------------------------------------------- */


/*
privacy-policy ページ（プライバシーポリシー）
----------------------------------------------------------- */

/*
privacy
----------------------------------------------------------- */
.privacy-block {
    margin-top: 60px;
}

.privacy-ttl {
    font-family: var(--font-accent);
    font-size: 1.375rem;
    /* 22px */
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 20px;
    line-height: calc(40 / 22);
}

.privacy-inner .dot-list {
    margin-block: 16px;
}

.privacy-footer {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px dotted var(--color-text);
}

/*
レスポンシブ - tablet
----------------------------------------------------------- */


/*
レスポンシブ - tablet + mobile 共通
----------------------------------------------------------- */


/*
レスポンシブ - mobile
----------------------------------------------------------- */


/*
レスポンシブ - tablet + mobile 共通
----------------------------------------------------------- */
@media screen and (max-width: 1199px) {
    :root {
        --header-height: 130px;
        --space-section: 100px;
        --space-books-extra: 150px;
        --space-side-large-max: 70px;
        --space-side-large-min: 70px;
        --space-heading: 8px;
        --space-heading-text: 30px;
        --space-text-btn: 40px;
        --space-news-area: 60px;
        --gap-sm: 30px;
        --gap-md: 50px;
        --gap-lg: 60px;
        --gap-70: 40px;
    }

    /* レイアウト */
    .wrapper-wide-left {
        padding-left: var(--space-side-large-max);
        padding-right: var(--space-side-large-min);
    }

    .wrapper-wide-right {
        padding-left: var(--space-side-large-min);
        padding-right: var(--space-side-large-max);
    }

    /* ヘッダー（SP） */
    .pc-nav {
        display: none;
    }

    .home .logo {
        display: block;
    }

    /* ドロワー（SP） */
    .nav {
        width: 280px;
    }

    /* page-hero（SP） */
    .page-hero {
        padding-block: 100px;
    }

    .sp-full-img {
        padding-inline: var(--space-unit);
    }

    /* ボタン共通 */
    .btn {
        width: 100%;
        max-width: 290px;
        height: 78px;
    }

    /* MV全体 */
    .mv {
        min-height: calc(70vh - var(--header-height));
        position: relative;
        display: block;
        padding-top: 20px;
        /* ヘッダー分 */
        margin: 0 var(--space-unit) var(--space-section);
    }

    /* ロゴ非表示 */
    .mv-logo {
        display: none;
    }

    /* copy */
    .mv-txt {
        width: auto;
        position: absolute;
        left: 20px;
        bottom: 5%;
        z-index: 10;
    }

    .mv-copy {
        color: var(--color-white);
        font-size: 1.625rem;
        /* 26px */
    }

    /* スライダー */
    .slider {
        position: relative;
        width: 100%;
        height: 70vh;
    }

    .slider .swiper-slide img {
        width: 100%;
        height: 70vh;
        object-fit: cover;
    }

    .mv02 {
        object-fit: cover;
        object-position: right center;
    }

    /* sec-books(SP) */
    /* 全体 */
    .books-inner {
        flex-direction: column;
    }

    /* テキストは下に回す */
    .books-txt {
        order: 2;
        width: 100%;
        max-width: none;
    }

    /* 画像エリア */
    /* sec-books（タブレット） */
    .books-img {
        width: 100%;
        /*max-width: none;*/
        position: relative;
        height: clamp(400px, 70vw, 700px);
        margin-inline: auto;
    }

    .books-img01 {
        position: absolute;
        width: clamp(320px, 45vw, 420px);
        top: 0;
        right: 0;
        left: auto;
    }

    .books-img02 {
        position: absolute;
        width: clamp(180px, 31vw, 320px);
        top: clamp(220px, 34vw, 260px);
        left: 0;
    }

    .books-img03 {
        position: absolute;
        width: clamp(240px, 65vw, 480px);
        top: clamp(350px, 68vw, 630px);
        right: 0;
        left: auto;
    }

    /* sec-cafe */
    .cafe-inner {
        flex-direction: column;
    }

    .cafe-img,
    .cafe-txt {
        flex: none;
        width: 100%;
    }

    .cafe-img {
        max-width: none;
        order: 1;
    }

    .cafe-txt {
        max-width: none;
        order: 2;
    }

    /* sec-gallery（タブレット） */
    .gallery-inner {
        flex-direction: column;
    }

    .gallery-txt,
    .gallery-img {
        flex: none;
        width: 100%;
        max-width: none;
        gap: 40px;
    }

    .gallery-img {
        max-width: 750px;
    }

    .gallery-txt {
        order: 2;
    }

    .gallery-img {
        order: 1;
    }

    .gallery-img02 {
        margin-top: 50px;
    }

    .top-faq .btn {
        margin-top: 0;
    }

    /* footer（タブレット） */
    .footer-inner {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .footer-left {
        width: 100%;
        max-width: none;
        align-items: center;
        text-align: center;
    }

    .footer-logo img {
        margin: 0 auto;
    }

    .footer-right {
        width: 100%;
        align-items: center;
    }

    .footer-nav {
        justify-content: center;
    }


    /*
    books ページ（書籍紹介）
    ----------------------------------------------------------- */

    .bo-sec01-inner {
        flex-direction: column;
    }

    .bo-sec01-img,
    .bo-sec01-txt {
        width: 100%;
    }

    .bo-sec01-img {
        order: 1;
    }

    .bo-sec01-txt {
        order: 2;
        padding-inline: var(--space-unit);
    }

    .bo-sec03-inner {
        flex-direction: column;
    }
    .bo-sec03-inner .swiper-sub {
        order: 1;
        width: 100%;
    }

    .bo-sec03-inner .swiper-sub img {
        aspect-ratio: 4 / 3;
    }

    .bo-sec03-txt {
        order: 2;
        width: 100%;
    }
    .genre-box{
        padding: 30px 20px;
        margin-bottom:40px;
    }
    .genre-list {
        grid-template-columns: repeat(2,1fr);
        gap: 10px;
    }


    /*
    cafe ページ（カフェメニュー）
    ----------------------------------------------------------- */

    .recommend-name {
        font-size: 1.125rem;
        line-height: calc(36 / 18);
    }
    .recommend-price {
        font-size: 1.125rem;
        line-height: calc(36 / 18);
    }
    .menu-img {
        width: 38%;
    }


    /*
    gallery ページ（ギャラリー）
    ----------------------------------------------------------- */

    /* ga-sec02 */
    .ga-sec02-inner {
        flex-direction: column;
        padding-left: 0;
    }

    .ga-sec02-txt {
        flex: none;
        width: 100%;
        padding-inline: var(--space-unit);
        order: 2;
    }

    .ga-sec02-img {
        flex: none;
        width: 100%;
        order: 1;
    }

    /* ga-sec03 */
    .ga-sec03-inner {
        flex-direction: column;
        gap: 20px;
    }

    .ga-sec03-img,
    .ga-sec03-txt {
        flex: none;
        width: 100%;
    }

    /* ga-sec04 */
    .ga-sec04-inner {
        flex-direction: column;
    }

    .ga-sec04-txt {
        flex: none;
        width: 100%;
        order: 2;
    }

    .ga-sec04-inner .swiper-sub {
        flex: none;
        width: 100%;
        order: 1;
    }

    /* ga-sec05*/
    .ga-sec05-inner {
        flex-direction: column;
    }

    .ga-sec05-img,
    .ga-sec05-txt {
        flex: none;
        width: 100%;
    }

    /* ga-sec06 */
    .ga-sec06-inner {
        flex-direction: column;
    }

    .ga-sec06-img {
        flex: none;
        width: 100%;
        order: 1;
    }

    .ga-sec06-txt {
        flex: none;
        width: 100%;
        order: 2;
        padding-right: 0;
        padding-inline: var(--space-unit);
    }


    /*
    event-news ページ（イベント・お知らせ一覧）
    ----------------------------------------------------------- */

    .news-archive .card-list {
        grid-template-columns: repeat(2, 1fr);
    }


    /*
    access ページ（アクセス）
    ----------------------------------------------------------- */

    .ac-sec01-inner {
        flex-direction: column;
    }

    .ac-sec01-img,
    .ac-sec01-txt {
        flex: none;
        width: 100%;
    }

    .ac-sec03-map iframe {
        height: 400px;
    }
}


/*
レスポンシブ - tablet
----------------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    /* sec-news（タブレット） */
    .card-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .home .card:nth-child(4) {
        display: block;
    }

    /* faq */

    .faq-img {
        flex: none;
        width: 30%;
        /* 少し狭く */
    }

    .faq-img01 {
        aspect-ratio: 1 / 2.5;
        /* 縦長に */
        overflow: hidden;
    }

    .faq-img01 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;
    }

    .faq-txt {
        flex: 1;
        width: auto;
        max-width: none;
    }


    /*
    concept ページ（コンセプト）
    ----------------------------------------------------------- */

        .co-sec02-img img,
    .co-sec03-img img,
    .co-sec04-img img {
        aspect-ratio: 1 / 1;
    }

    .co-sec02-txt,
    .co-sec04-txt {
        flex: 1;
        padding-right: 70px;
    }

    .co-sec03-txt {
        flex: 1;
        padding-left: 70px;
    }


    /*
    gallery ページ（ギャラリー）
    ----------------------------------------------------------- */

    .ga-sec03-img {
        max-width: 800px;
        margin-inline: auto;
    }

    .ga-sec04-inner .swiper-sub {
        max-width: 640px;
        margin-inline: auto;
    }

    .ga-sec05-img {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ga-sec05-img img {
        width: 427px;
        max-width: 100%;
    }

    .ga-sec05-img .text-arrow {
        width: 427px;
        /* 画像と同じ幅 */
        max-width: 100%;
    }


    /*
    event-news ページ（イベント・お知らせ一覧）
    ----------------------------------------------------------- */

    .news-archive .card-list .card:nth-child(9) {
        display: none;
    }


    /*
    access ページ（アクセス）
    ----------------------------------------------------------- */

    .ac-sec01-inner {
        gap: 40px;
    }

    .ac-sec01-img {
        max-width: 665px;
        margin-inline: auto;
    }
}


/*
レスポンシブ - mobile
----------------------------------------------------------- */
@media screen and (max-width: 767px) {
    :root {
        --header-height: 80px;
        --space-unit: 20px;
        --space-heading: 8px;
        --space-heading-text: 30px;
        --space-text-btn: 40px;
        --space-section: 70px;
        --space-books-extra: 70px;
        --space-side-large-max: 20px;
        --space-side-large-min: 20px;
        --space-news-area: 20px;
        --space-footer-top: 60px;

        /*--gap-sm: 50px;*/
        --gap-md: 30px;
        --gap-lg: 40px;
        --gap-20: 10px;
        --gap-70: 30px;
    }

    /* 共通コンポーネント */
    .br-sp {
        display: block;
    }

    .sec-num {
        font-size: 0.875rem;
        /* 14px */
        line-height: calc(20 / 14);
    }

    .sec-en {
        font-size: 0.9rem;
        /* 約15px */
        line-height: calc(23 / 15);
    }

    .sec-ttl {
        font-size: 1.375rem;
        line-height: calc(40 / 22);
    }

    .section-label {
        font-size: 1.125rem;
        line-height: calc(38 / 18);
    }

    .sub-ttl {
        font-size: 1.25rem;
        line-height: calc(38 / 20);

    }

    /* page-hero（SP） */
    .page-hero {
        padding-block: 60px;
    }

    .page-ttl {
        font-size: 1.75rem;
        /* 28px */
    }

    /* グリッド */
    .grid-4col,
    .grid-3col,
    .grid-2col {
        grid-template-columns: 1fr;
    }

    /* ボタン共通 */
    .btn {
        width: 100%;
        max-width: 260px;
        height: 64px;
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }

    /* ページトップ（SP） */
    .pagetop {
        bottom: 20px;
        right: 10px;
    }

    /* ヘッダー（SP） */
    .header .wrapper-xl {
        padding: 10px var(--space-unit);
    }

    .loading-logo img {
        width: 200px;
        /* お好みで調整 */
    }

    .logo img {
        width: 140px;
        height: auto;
    }

    /* ヘッダースクロール解除（SP） */
    body.scrolled .header {
        height: var(--header-height);
    }

    body.scrolled .logo img {
        width: 140px;
    }

    body.scrolled .nav-link {
        height: auto;
        line-height: normal;
    }

    /* MV */
    .mv-copy {
        font-size: 1.375rem;
        /* 22px */
    }

    .swiper-pagination {
        gap: 3px;
    }

    /* sec-concept(SP) */
    .concept-inner {
        flex-direction: column;
    }

    .concept-movie,
    .concept-txt {
        width: 100%;
    }

    .concept-movie {
        order: 1;
        flex: none;
    }

    .concept-txt {
        order: 2;
        flex: none;
    }

    /* sec-books(SP) */
    .books-img {
        height: 420px;
        order: 1;
        width: 100%;
        max-width: none;
        position: relative;
        /* 2カラム＋下段分を確保 */
        height: 340px;
        /*margin-bottom:20px;*/
    }

    .books-img01 {
        width: clamp(150px, 48vw, 220px);
        top: 0;
        right: 0;
        left: auto;
    }

    .books-img02 {
        width: clamp(110px, 37vw, 150px);
        top: 140px;
        left: 0;
    }

    .books-img03 {
        width: clamp(170px, 62vw, 260px);
        top: 305px;
        right: 0;
        left: auto;
    }

    /* スプリットレイアウト（SP） */


    /* footer-nav（SP） */
    .footer-left {
        gap: 30px;
    }

    .footer-nav {
        flex-wrap: wrap;
        justify-content: center;
        /*gap: 8px;*/
    }

    /* sec-gallery（タブレット） */
    .gallery-img {
        gap: 40px;
    }

    /* sec-news(SP) */
    .news-box {
        padding-block: 40px;
    }

    .card-ttl a {
        font-size: 1rem;
    }

    /* sec-faq（タブレット） */
    .faq-inner {
        flex-direction: column;
    }

    .faq-img,
    .faq-txt {
        flex: none;
        width: 100%;
        max-width: none;
    }

    .faq-img {
        order: 1;
    }

    .faq-txt {
        order: 2;
    }

    /* 画像を4:3にトリミング */
    .faq-img01 {
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    .faq-img01 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 80%;
    }


    /*
    concept ページ（コンセプト）
    ----------------------------------------------------------- */

    .co-sec01-img {
        margin-bottom: 30px;
    }

    /* co-sec02〜04 共通（SP） */
    .co-sec02-inner,
    .co-sec03-inner,
    .co-sec04-inner {
        flex-direction: column;
    }

    .co-sec02-img,
    .co-sec03-img,
    .co-sec04-img {
        width: 100%;
    }

    /*.co-sec02-img img,
    .co-sec03-img img,
    .co-sec04-img img {
        aspect-ratio: 4 / 3;
    }*/

    /* 全セクション画像が上・テキストが下 */
    .co-sec02-img,
    .co-sec03-img,
    .co-sec04-img {
        order: 1;
    }

    .co-sec02-txt,
    .co-sec03-txt,
    .co-sec04-txt {
        order: 2;
        padding: 0;
        /* paddingをリセット */
        flex: none;
        width: 100%;
    }

    /*.co-sec02,
    .co-sec03,
    .co-sec04 {
        padding-inline: var(--space-unit);
    }*/


    /*
    books ページ（書籍紹介）
    ----------------------------------------------------------- */

    .genre-list {
        grid-template-columns: 35% 65%;
        /*gap: 20px 24px;*/
    }



    /*
    cafe ページ（カフェメニュー）
    ----------------------------------------------------------- */

    .ca-sec02 .sec-ttl,
    .ca-sec03 .sec-ttl,
    .ca-sec04 .sec-ttl {
    padding-bottom: 0;
    }
    .menu-heading {
        display: block;
    }

    .menu-note {
        margin-top: 8px;
    }

    .menu-group {
        display: block;
    }

    .menu-group + .menu-group {
        margin-top: 48px;
    }

    .menu-img{ 
        width: 100%;
        margin-bottom: 20px;
    }

    .menu-content {
        width: 100%;
    }

    .menu-content .section-label{
        padding-bottom:5px;
    }


    /*
    gallery ページ（ギャラリー）
    ----------------------------------------------------------- */

    .ga-sec03 .btn {
    max-width: 300px;
    }

    /* ga-sec05 */
    .ga-sec05-img,
    .ga-sec05-txt {
        flex: none;
        width: 100%;
    }

    .ga-sec05-detail-inner {
        grid-template-columns: 1fr;
    }

    .ga-sec05-inner,
    .ga-sec05-detail {
        margin-top: 40px;
    }


    /*
    event-news ページ（イベント・お知らせ一覧）
    ----------------------------------------------------------- */

    .archive-filter {
        justify-content: center;
        margin-bottom: 40px;
    }

    .filter-inner {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 20px;
    }

    .filter-label {
        padding: 0;
    }

    .filter-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0;
    }

    .filter-list li {
        display: flex;
        align-items: center;
    }

    .filter-list li:not(:last-child)::after {
        margin: 0 12px;
    }

    .news-archive .card-list {
        grid-template-columns: 1fr;
    }

    .pagination {
        gap: 8px;
    }

    .pagination-list {
        gap: 8px;
    }

    .pagination-btn,
    .pagination-num {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        font-size: .875rem;
    }

    /* 文字を消す */
    .pagination-prev,
    .pagination-next {
        font-size: 0;
        position: relative;
    }

    /* PREV矢印 */
    .pagination-prev::before {
        left: 50%;
        top: 50%;
        width: 8px;
        height: 8px;
        transform: translate(-35%, -50%) rotate(-45deg);
    }

    /* NEXT矢印 */
    .pagination-next::after {
        right: auto;
        left: 50%;
        top: 50%;
        width: 8px;
        height: 8px;
        transform: translate(-65%, -50%) rotate(45deg);
    }


    /*
    access ページ（アクセス）
    ----------------------------------------------------------- */

    .ac-sec01 .dl-table tr {
        display: flex;
        flex-direction: column;
    }

    .ac-sec01 .dl-table th {
        padding-bottom: 4px;
    }

    .ac-sec01 .dl-table td {
        padding-top: 0;
    }

    .ac-sec02-grid {
        grid-template-columns: 1fr;
    }

    .ac-sec03-map iframe {
        height: 300px;
    }


    /*
    contact ページ（お問い合わせ）
    ----------------------------------------------------------- */

    .contact-form-wrap {
        padding: 30px 20px;
    }

    .form-group {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .form-group+.form-group {
        margin-top: 24px;
    }

    .form-label {
        line-height: 1.6;
    }

    .form-check {
        justify-content: flex-start;
        align-items: flex-start;
    }

    .form-btn {
        width: 100%;
    }


    /*
    single ページ（記事詳細）
    ----------------------------------------------------------- */

    .single-meta {
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .single-meta time,
    .single-meta .card-cat {
        font-size: 1rem;
        line-height: calc(36 / 16);
    }

    .single-ttl {
        font-size: 1.375rem;
    }

    .single-nav-inner{
        gap:12px;
    }

    .single-nav-btn{
        height:54px;
    }

    /* PREV・NEXTの文字だけ消す */
    .single-nav-prev,
    .single-nav-next{
        font-size:0;
        width:54px;
        padding:0;
        justify-content:center;
    }

    /* 矢印を中央に */
    .single-nav-prev::before{
        left:50%;
        transform:translate(-35%, -50%) rotate(-45deg);
    }

    .single-nav-next::after{
        right:50%;
        transform:translate(35%, -50%) rotate(45deg);
    }

    /* 一覧へ戻るだけ通常表示 */
    .single-nav-back{
        padding-inline:16px;
        font-size:.875rem;
    }

     .artist-profile {
        flex-direction: column;
    }

    .artist-profile .wp-block-group.is-vertical {
            padding-left: 0;
    }


    /*
    privacy-policy ページ（プライバシーポリシー）
    ----------------------------------------------------------- */

    .privacy-block {
        margin-top: 40px;
    }

    .privacy-ttl {
        font-size: 1.125rem;
        /* 18px */
        line-height: calc(38 / 18);
        margin-bottom: 10px;
    }

    .privacy-footer {
        margin-top: 40px;
        padding-top: 30px;
    }
}