/* --- Variables & Base --- */
:root {
    --nara-red: #b03020;
    --bg-cream: #f8f7f2;
    --bg-beige: #f2f0e9;
    --text-main: #333;
    --white: #ffffff;
    --radius-l: 40px;
    --radius-m: 20px;
}

body {
    font-family: 'Noto Serif JP', serif;
    color: var(--text-main);
    line-height: 2;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

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

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 25px;
    position: relative;
}

/* --- Header --- */
.site-header {
    background: var(--bg-cream) url('images/washi-texture.png');
    border-bottom: 2px solid var(--nara-red);
    padding: 15px 0;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.main-logo {
    height: 70px;
}

.header-nav ul {
    display: flex;
    gap: 45px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav a {
    text-decoration: none;
    color: #1a2a3a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-nav a img {
    width: 40px;
}

.nav-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.nav-text .en {
    font-size: 1.1rem;
    font-weight: 500;
}

.nav-text .jp {
    font-size: 0.65rem;
}

/* style.css */
body {
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    background-color: #fdfaf5;
    /* 画像のような温かい白 */
    color: #333;
}

header {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

.header-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

.hero {
    height: 600px;
    background-image: url('images/hero-bg.jpg');
    /* 背景画像 */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-title {
    text-align: center;
    color: #c44e3a;
    /* 画像で使われている赤色 */
    margin: 50px 0;
    font-size: 2rem;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.product-item {
    text-align: center;
}

.product-item img {
    width: 100%;
    border: 1px solid #eee;
}

.more-btn {
    text-align: center;
    margin-top: 40px;
}

.more-btn a {
    background-color: #c44e3a;
    color: #fff;
    padding: 10px 40px;
    text-decoration: none;
    border-radius: 20px;
}

/* --- PC版の基本形 --- */
.hamburger {
    display: none; /* PCでは隠す */
}

/* --- ハンバーガーメニュー スマホ版（768px以下） --- */
@media (max-width: 768px) {
    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }

    /* ハンバーガーボタンのデザイン */
    .hamburger {
        display: block;
        position: relative;
        z-index: 100;
        width: 30px;
        height: 24px;
        background: none;
        border: none;
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #333;
        transition: all 0.3s;
    }

    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 11px; }
    .hamburger span:nth-child(3) { bottom: 0; }

    /* ボタンが押された時（×印） */
    .hamburger.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
    .hamburger.is-active span:nth-child(2) { opacity: 0; }
    .hamburger.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

    /* メニュー本体（右からスライドイン） */
    .header-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 最初は隠す */
        width: 80%;    /* メニューの幅 */
        height: 100vh;
        background-color: #fff;
        z-index: 90;
        transition: all 0.5s;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        padding-top: 80px; /* ボタンと重ならないよう隙間を空ける */
    }

    .header-nav.is-open {
        right: 0; /* 表示 */
    }

    /* メニュー内のリストを縦並びに */
    .header-nav ul {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .header-nav li {
        border-bottom: 1px solid #eee;
    }

    .header-nav li a {
        display: flex;
        align-items: center;
        padding: 20px;
        text-decoration: none;
        color: #333;
    }

    .nav-icon {
        width: 30px;
        margin-right: 15px;
    }

    .nav-text .en {
        display: block;
        font-size: 0.8rem;
        color: #b03a2e;
    }

    .nav-text .jp {
        display: block;
        font-size: 0.9rem;
        font-weight: bold;
    }
}

/* --- キービジュアルのスタイル --- */

.hero {
    width: 100%;
    overflow: hidden;
    /* ロゴがはみ出さないように */
}

.hero-container {
    position: relative;
    /* ロゴを重ねる基準にする */
    max-width: 1920px;
    /* 画像の最大幅（必要に応じて調整） */
    margin: 0 auto;
}

/* 背景画像のグリッドレイアウト */
.hero-bg-grid {
    display: grid;
    /* 3列、行の高さは画像に合わせる */
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    /* 画像間の隙間をなくす */
}

/* 各画像の配置指定 */
.grid-item-shop {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    /* 1行目から2行目まで貫通 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 領域に合わせてトリミング */
}

.grid-item-somen {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 100%;
}

.grid-item-narazuke {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    width: 100%;
}

.grid-item-kuzumochi {
    grid-column: 2 / 4;
    /* 2列目から3列目まで貫通 */
    grid-row: 2 / 3;
    width: 100%;
}

/* 中央のロゴのスタイル */
.hero-logo {
    position: absolute;
    top: 50%;
    /* 親要素の上から50%の位置 */
    left: 50%;
    /* 親要素の左から50%の位置 */
    transform: translate(-50%, -50%);
    /* 自身のサイズ分だけ戻して中央寄せ */
    z-index: 10;
    /* 画像より上に重ねる */
    width: 25%;
    /* ロゴの幅（画面幅に合わせて調整） */
    max-width: 300px;
    /* ロゴの最大幅 */
    background: #fff;
    /* 白い背景 */
    padding: 10px;
    /* ロゴと白枠の間の余白 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* 軽い影で浮かせる */
    border-radius: 8px;
    /* 角を少し丸くする */
}

.hero-logo img {
    width: 100%;
    height: auto;
}

/* --- レスポンシブ対応（スマホ向け） --- */
@media (max-width: 768px) {
    .hero-bg-grid {
        /* スマホでは1列にして縦に並べる */
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
    }

    .grid-item-shop,
    .grid-item-somen,
    .grid-item-narazuke,
    .grid-item-kuzumochi {
        grid-column: 1 / 2;
        grid-row: auto;
    }

    .hero-logo {
        width: 50%;
        /* スマホではロゴを少し大きく */
    }
}

/* 商品ピックアップ */
.product-pickup {
    position: relative;
    width: 100%;
    padding: 80px 0;
    overflow: hidden;
}

/* --- 背景レイヤーの管理 --- */
.bg-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* 背面に配置 */
}

/* 上半分の赤（高さ400px。カードの半分にしたい場合はここを調整） */
.bg-red {
    height: 400px;
    background-color: #b03a2e;
    /* 濃い赤 */
}

/* 下半分の和紙 */
.bg-washi {
    height: calc(100% - 400px);
    background-color: #fdfaf5;
    /* 和紙のベース色 */
    background-image: url('washi-texture.jpg');
    /* 和紙画像 */
    background-size: cover;
}

/* 和柄レイヤー（赤背景の上に重ねる） */
/* 和柄レイヤー（左右個別に配置） */
.bg-wagara {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    /* 赤背景の高さに合わせる */

    /* 1つ目に左、2つ目に右の画像を指定 */
    background-image:
        url('/images/wagara-left.png'),
        url('/images/wagara-right.png');

    /* それぞれの配置：左は左上、右は右上 */
    background-position:
        left top,
        right top;

    background-repeat: no-repeat;

    /* サイズ調整：
       auto 100% にすると、赤背景の高さに合わせて自動調整されます。
       横幅を固定したい場合は 300px auto のように指定してください。 */
    background-size:
        auto 100%,
        auto 100%;

    z-index: 1;
    pointer-events: none;
}

/* スマホ対応：画面が狭い時に柄がカードに被る場合の調整 */
@media (max-width: 768px) {
    .bg-wagara {
        /* スマホでは柄を小さくするか、思い切って消す（display:none）のも手です */
        background-size: 30% auto, 30% auto;
        height: 300px;
        /* 赤背景のレスポンシブ高さに合わせる */
    }
}

/* --- コンテンツの管理 --- */
.container {
    position: relative;
    z-index: 10;
    /* 背景レイヤーより確実に手前に出す */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.pickup-header {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}

.pickup-header h2 {
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: 0.1em;
}

/* グリッドレイアウト */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* PCでは4枚 */
    gap: 20px;
}

/* 商品カード */
.product-card {
    background: transparent;
}

.card-inner {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-img {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img img {
    max-width: 100%;
    height: auto;
}

/* 青いキャプション部分 */
.product-caption {
    background-color: #435971;
    /* 紺色 */
    color: #fff;
    text-align: center;
    padding: 15px 10px;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ボタン */
.more-btn-area {
    text-align: center;
    margin-top: 50px;
}

.more-btn {
    display: inline-block;
    background-color: #b03a2e;
    color: #fff;
    padding: 12px 60px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 0 #8a2e24;
}

/* --- レスポンシブ（スマホ対応） --- */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        /* スマホでは2枚ずつ */
    }

    .bg-red {
        height: 300px;
        /* 赤い部分を少し短く */
    }

    .bg-wagara {
        background-size: 150% auto;
        /* スマホでは和柄を少し拡大して見せる */
    }
}


/* 千年の風土が育てた、奈良のかたち */

.nara-intro {
    padding: 100px 0;
    text-align: center;
    background-image: url('washi-texture.jpg');
    /* 和紙背景を継続 */
    background-size: cover;
}

/* テキスト部分 */
.intro-header {
    margin-bottom: 60px;
}

.deer-icon {
    text-align: center;
    /* 1. 親のdivの中で中身を中央に寄せる */
    width: 100%;
    /* 念のため幅を100%確保 */
}

.deer-icon img {
    width: 60px;
    height: auto;
    display: block;
    /* 2. 画像をブロック化する */
    margin: 0 auto 30px;
    /* 3. 左右の余白を「auto」にすることで中央配置にする */
}

.catchphrase {
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    margin-bottom: 15px;
    color: #333;
}

.sub-title {
    font-size: 1.8rem;
    font-weight: normal;
    letter-spacing: 0.15em;
    color: #333;
}

/* ギャラリー部分：Flexboxでふんわり並べる */
.intro-gallery {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    /* 下揃えにすることでリズムを出す */
    gap: 40px 20px;
    padding: 0 20px;
}

.gallery-item img {
    max-width: 100%;
    height: auto;
    /* 影を薄くつけると、和紙の上に置いている感が出ます */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.05));
}

/* 個別のサイズ微調整（画像に合わせて） */
.item-sushi {
    width: 45%;
}

.item-somen {
    width: 45%;
}

.item-sweets-l {
    width: 25%;
}

.item-sweets-c {
    width: 30%;
}

.item-tsukemono {
    width: 35%;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .catchphrase {
        font-size: 1.2rem;
    }

    .sub-title {
        font-size: 1.4rem;
    }

    .intro-gallery {
        gap: 20px;
    }

    .gallery-item {
        width: 80% !important;
        /* スマホでは大きく1枚ずつ見せる */
        margin-bottom: 20px;
    }
}


.pickup-header {
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.pickup-header h2 {
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: 0.1em;
}

/* 商品グリッド */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 個別のカード */
.product-card {
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.card-img {
    padding: 20px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-img img {
    max-width: 100%;
    height: auto;
}

/* 紺色のキャプション部分 */
.card-caption {
    background-color: #435971;
    /* 画像に合わせた紺色 */
    color: #fff;
    text-align: center;
    padding: 15px 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    min-height: 3em;
}

/* ボタン */
.more-link {
    text-align: center;
    margin-top: 50px;
}

.more-link a {
    display: inline-block;
    background-color: #b03a2e;
    color: #fff;
    padding: 12px 60px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    box-shadow: 0 4px 0 #8a2e24;
    /* ボタンの立体感 */
}

.lineup-section {
    padding: 80px 0;
    background-image: url('washi-texture.jpg');
    /* 和紙背景 */
    background-size: cover;
}

.lineup-title {
    text-align: center;
    margin-bottom: 50px;
}

.lineup-title .title-icon {
    width: 40px;
    height: auto;
    display: block;
    /* 1. 画像をブロック要素（一つの箱）にする */
    margin: 0 auto 10px;
    /* 2. 左右の余白を「auto」にして中央に寄せる。下余白は10px。 */
}

.lineup-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* 垂直方向中央 */
    padding: 0 40px;
}

/* スライダー側 */
.slider-wrapper {
    flex: 1.2;
    /* 少し広めに確保 */
    min-width: 0;
    /* Swiper崩れ防止 */
}

.swiper {
    width: 100%;
    height: 450px;
    border-radius: 15px;
    /* 写真の角丸 */
    overflow: hidden;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    /* 親要素（.swiper）の高さに合わせる */
    object-fit: cover;
    display: block;
}

/* スライダーを包む枠（Swiperの外に出したパジネーションの基準になります） */
.slider-wrapper {
    flex: 1.2;
    min-width: 0;
    position: relative;
    /* 子要素の配置基準に */
}

/* パジネーション全体の配置 */
.swiper-pagination {
    position: static !important;
    /* 画像に被らないようにする */
    text-align: right !important;
    /* ★右寄せ */
    margin-top: 15px;
    /* 画像との隙間 */
}

/* 丸いマークの基本（枠線のみ） */
.swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: transparent !important;
    /* 中を透明に */
    border: 1px solid #333 !important;
    /* 黒っぽい枠線 */
    opacity: 1 !important;
    /* 透明度を100%に */
    margin: 0 4px !important;
    /* 丸同士の隙間 */
    vertical-align: middle;
}

/* 現在表示されている丸（塗りつぶし） */
.swiper-pagination-bullet-active {
    background: #333 !important;
    /* 黒っぽく塗りつぶす */
}

/* テキスト側 */
.text-wrapper {
    flex: 1;
    padding-left: 60px;
    position: relative;
}

.text-inner h3 {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 30px;
    color: #333;
}

.text-inner p {
    font-size: 0.95rem;
    line-height: 2;
    color: #444;
    text-align: justify;
}

/* 装飾アイコンの配置 */
.deco-cloud {
    position: absolute;
    top: 50px;
    right: 150px;
    width: 60px;
    opacity: 0.8;
}

.deco-deer {
    position: absolute;
    top: 0;
    right: 20px;
    width: 100px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .lineup-container {
        flex-direction: column;
    }

    .text-wrapper {
        padding-left: 0;
        margin-top: 40px;
    }

    .swiper {
        height: 250px;
        /* スマホでは高さを抑える */
    }
}

.lineup-list {
    padding: 60px 0;
    background-image: url('washi-texture.jpg');
    background-size: cover;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* グリッドの設定 */
.product-grid {
    display: grid;
    /* PCでは4列 */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    /* 縦の隙間を30px、横を20pxに */
    margin-bottom: 50px;
}

/* 個別のカード */
.product-card {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}

.card-img {
    padding: 15px;
    aspect-ratio: 1 / 1;
    /* 正方形を維持 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* 商品全体が見えるように */
}

/* 下の紺色ラベル */
.card-caption {
    background-color: #435971;
    color: #fff;
    text-align: center;
    padding: 15px 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    flex-grow: 1;
    /* 高さを揃える */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ボタンのスタイル */
.view-more {
    text-align: right;
    margin-top: 30px;
    /* 必要に応じて上の余白を調整 */
}

.btn-outline-red {
    display: inline-block;
    padding: 5px 25px;
    /* 80pxから30pxへ。これでギュッと小さくなります */
    border: 1.5px solid #b03a2e;
    /* 枠線を少し細くするとより繊細な印象に */
    font-size: 0.7rem;
    /* 文字も少し小さくするとバランスが良いです */
    /* その他のスタイル（背景白、角丸など）は維持 */
    color: #333;
    text-decoration: none;
    border-radius: 30px;
    background-color: #fff;
    transition: all 0.3s;
}

.btn-outline-red:hover {
    background-color: #b03a2e;
    color: #fff;
}

/* レスポンシブ調整 */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        /* タブレットは3列 */
    }
}

@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        /* スマホは2列 */
        gap: 15px 10px;
    }

    .btn-outline-red {
        width: fit-content !important;
        padding: 30px 200px;
        /* 3. inline-block を維持（念のため） */
        display: inline-block;
        min-width: 0;
    }

    .view-more {
        text-align: right;
    }
}

/* style.css */

.landscape-divider {
    display: flex;
    /* 横並びにする */
    width: 100%;
    /* 画面の端から端まで */
    margin: 60px 0;
    /* 前後のセクションとの余白 */
    overflow: hidden;
}

.landscape-item {
    flex: 1;
    /* 3つの要素を均等な幅（1:1:1）にする */
    height: 300px;
    /* PCでの表示の高さ。お好みで調整してください */
}

.landscape-item img {
    width: 100%;
    height: 100%;
    display: block;
    /* ★ここがポイント：異なる比率の写真でも枠に合わせて自動切り抜き */
    object-fit: cover;

    /* 少しコントラストを整えると和風に馴染みます（任意） */
    filter: brightness(0.95);
}

.about-section {
    padding: 100px 0;
    background-color: #fff;
    text-align: center;
}

.about-header {
    text-align: center;
    /* 親要素で中身を中央に寄せる */
    width: 100%;
}

.about-icon {
    display: inline-block;
    /* 中身のサイズに合わせた箱にする */
}

.about-icon img {
    width: 40px;
    height: auto;

    /* ★ 中央寄せの定番セット */
    display: block;
    /* 1. 画像をブロック要素にする */
    margin: 0 auto 10px;
    /* 2. 左右の余白を「auto」にして中央へ */
}

.about-header h2 {
    font-family: 'Shippori Mincho', serif;
    /* 明朝体で高級感を出す */
    font-size: 1.5rem;
    font-weight: normal;
    color: #444;
}

/* --- レイアウトの肝 --- */
.about-content {
    display: flex;
    justify-content: center;
    /* 横方向の中央寄せ */
    align-items: center;
    /* 縦方向の中央寄せ */
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    /* 画像とテキストの間の距離 */
}

/* 縦書きの指定 */
.about-text {
    writing-mode: vertical-rl;
    /* ★縦書き（右から左へ） */
    text-orientation: upright;
    /* 文字の向きを正立させる */
    font-family: 'Shippori Mincho', serif;
    font-size: 1.2rem;
    line-height: 2;
    letter-spacing: 0.3em;
    /* 文字の間隔を広げてゆとりを出す */
    color: #333;
    text-align: left;
    /* 縦書きの中での開始位置 */
}

/* 中央のイラスト画像 */
.about-main-img {
    flex: 0 1 600px;
    /* 幅を最大600pxに制限 */
}

.about-main-img img {
    width: 100%;
    height: auto;
}


.about-details {
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px 20px;
    background-image: url('washi-texture.jpg');
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3等分 */
    gap: 40px;
    align-items: start;
}

/* --- 共通の画像枠設定 --- */
.img-box {
    width: 100%;
    height: 100%;
    /* ★画像が枠いっぱいに広がり、はみ出た分を自動で切り抜きます */
    object-fit: cover;
    display: block;
}

/* 画像共通：角丸を忘れずに */
.img-box img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    display: block;
}

/* --- カラムのレイアウト設定 --- */
.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
}

/* ズレ（リズム）の調整 */
/* 画像の高さが揃うので、padding-top の数値だけで正確にズレを制御できます */
.col-left {
    padding-top: 0;
}

.col-center {
    /* 真ん中のカラムをグッと下げる */
    padding-top: 180px;
}

.col-right {
    /* 右のカラムを少し下げる */
    padding-top: 60px;
}

.text-block p {
    /* 現在 0.9rem だったものを 0.8rem (約13px弱) に下げてみます */
    font-size: 0.8rem;
    line-height: 1.8;
    color: #444;
    letter-spacing: 0.05em;
    /* 文字を小さくした時は少し間隔を広げると読みやすいです */
}

/* --- 装飾アイコンの調整 --- */
.deco-deer-outline,
.deco-pagoda,
.deco-building {
    /* アイコンは切り抜かれたくないので、aspect-ratio は指定しません */
    width: 100px;
    margin: 30px auto;
    text-align: center;
}

.deco-deer-outline img,
.deco-pagoda img,
.deco-building img {
    width: 100%;
    height: auto;
}

.about-details {
    width: 100%;
    /* 横幅いっぱいを確保 */
    text-align: center;
    /* ★中身（ボタン）を中央に寄せる */
    margin-top: 80px;
    /* 上のコンテンツとの距離 */
}

.concept-button {
    /* 1. 基本の形 */
    display: inline-block;
    padding: 15px 60px;
    /* 上下15px、左右60px（文字の小ささに合わせて調整） */
    border: 1px solid #d4b886;
    /* 画像の薄い金色の枠線 */
    background-color: #fff;
    position: relative;
    /* 装飾を置くための基準点 */
    cursor: pointer;
    transition: all 0.3s;
}

.concept-button-text {
    /* 2. 文字のスタイル */
    font-family: "Shippori Mincho", serif;
    /* 明朝体 */
    font-size: 1rem;
    /* 文字を少し小さめに設定 */
    letter-spacing: 0.2em;
    /* 和風らしく、ゆったりした文字間隔 */
    color: #333;
}

/* 3. 左下の装飾 */
.concept-button::before {
    content: '';
    position: absolute;
    bottom: 5px;
    /* 枠からの距離 */
    left: 5px;
    width: 35px;
    /* 模様のサイズ */
    height: 35px;
    background-image: url('/images/pattern-gold-left.png');
    /* 左下の模様画像 */
    background-size: contain;
    background-repeat: no-repeat;
}

/* 4. 右上の装飾 */
.concept-button::after {
    content: '';
    position: absolute;
    top: 5px;
    /* 枠からの距離 */
    right: 5px;
    width: 35px;
    /* 模様のサイズ */
    height: 35px;
    background-image: url('/images/pattern-gold-right.png');
    /* 右上の模様画像 */
    background-size: contain;
    background-repeat: no-repeat;
}

/* ホバーした時に少し浮き上がる演出（お好みで） */
.concept-button:hover {
    box-shadow: 0 4px 12px rgba(212, 184, 134, 0.2);
    transform: translateY(-2px);
}

/* --- レスポンシブ（スマホ対応）：ここから差し替え・追記 --- */
@media (max-width: 768px) {

    /* グリッドを1列に強制し、余計な幅をなくす */
    .details-grid {
        display: block !important;
        /* グリッドをやめて縦に並べる */
        width: 100% !important;
        padding: 0 20px !important;
    }

    /* 1. 装飾アイコン類をすべて非表示にする */
    .deco-deer-outline,
    .deco-pagoda,
    .deco-building,
    .deco-cloud,
    .deco-deer,
    .title-icon {
        display: none !important;
    }

    /* 2. PC版の「段差」をすべて消去 */
    .col-left,
    .col-center,
    .col-right {
        width: 100% !important;
        padding-top: 0 !important;
        /* 上の隙間をゼロにする */
        margin-bottom: 50px !important;
        /* 要素ごとの間隔を作る */
    }

    /* 3. 縦書きをすべて横書きに戻す（重要！） */
    .about-text,
    .v-title,
    [style*="writing-mode: vertical-rl"] {
        writing-mode: horizontal-tb !important;
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
        margin: 20px 0 !important;
    }

    /* 4. 画像とアイコンを中央に寄せる */
    .img-box,
    .about-main-img,
    .deco-deer-outline,
    .deco-pagoda,
    .deco-building {
        width: 90% !important;
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .img-box img {
        width: 100% !important;
        height: auto !important;
    }

    /* 5. テキストブロックの調整 */
    .text-block {
        width: 100% !important;
        padding: 0 10px !important;
    }

    .text-block p {
        text-align: justify !important;
        /* 文章を読みやすく */
        font-size: 0.95rem !important;
    }

    /* 6. ボタンを中央に */
    .about-details {
        margin-top: 30px !important;
        text-align: center !important;
    }

    .concept-button {
        width: 80% !important;
        max-width: 300px !important;
    }
}

/* --- ここまで --- */

/* footerここから */
/* 
.main-footer {
    background-image: url('washi-texture.jpg');
    padding-top: 80px;
    position: relative;
    overflow: hidden;
} */

/* --- ビジュアルエリア（段違い画像） --- */
.footer-visual {
    max-width: 1200px;
    margin: 0 auto 60px;
    position: relative;
}

.visual-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: flex-start;
}

.visual-item {
    flex: 1;
    max-width: 220px;
    aspect-ratio: 3 / 4;
    /* 縦横比を固定 */
    overflow: hidden;
    border-radius: 15px;
}

.visual-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 段違いの調整 */
.item1 {
    margin-top: 0;
}

.item2 {
    margin-top: 80px;
}

.item3 {
    margin-top: 160px;
}

.item4 {
    margin-top: 240px;
}

/* 装飾アイコンの配置 */
.deco-line {
    position: absolute;
    top: 80px;
    right: 5%;
    width: 300px;
}

.deco-kumo-top {
    position: absolute;
    top: 180px;
    right: 2%;
    width: 100px;
}

.deco-kumo-left {
    position: absolute;
    bottom: 100px;
    left: 0;
    width: 150px;
}

/* --- ロゴ＆ナビゲーション --- */
/* .main-footer {
    background-image: url('washi-texture.jpg');
    padding: 100px 0 0;
} */

/* 全体を中央に寄せるための大きな箱 */
.footer-container {
    max-width: 1000px;
    /* 画像4枚が綺麗に収まる幅 */
    margin: 0 auto;
    /* これで全体が中央へ */
    padding: 0 40px;
    /* 左右の余白 */
    position: relative;
}

/* --- 画像エリア --- */
.footer-visual {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.visual-item {
    width: 23%;
    /* 4枚並べるためのサイズ */
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
}

/* 段違いの調整（スクリーンショット通りに） */
.item1 {
    margin-top: 0;
}

.item2 {
    margin-top: 100px;
}

.item3 {
    margin-top: 150px;
}

.item4 {
    margin-top: 250px;
}

/* --- ロゴとナビを左に揃えるブロック --- */
.footer-content-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* ★これでロゴとナビが左に揃う */
    /* 1枚目の画像の下あたりに配置されるように調整 */
    margin-top: -100px;
    /* 画像の段違いに合わせて位置を上げる */
    padding-bottom: 100px;
}

.footer-logo img {
    width: 250px;
    margin-bottom: 40px;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 60px;
    list-style: none;
    padding: 0;
}

.nav-grid li a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

/* ナビのテキストサイズ微調整 */
.nav-text .en {
    font-size: 1.1rem;
    color: #333;
}

.nav-text .jp {
    font-size: 0.65rem;
    color: #999;
}

/* 赤いバー */
.footer-bottom-bar {
    background-color: #b03a2e;
    padding: 15px 0;
    text-align: center;
}

.footer-bottom-bar p,
.footer-bottom-bar a {
    color: #ffffff !important;
    /* 強制的に白を指定 */
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    /* リンクの下線を消す */
    margin: 0;
}

/* リンクにマウスを乗せた時の演出（任意） */
.footer-bottom-bar a:hover {
    text-decoration: underline;
    /* ホバー時だけ下線を出す */
    opacity: 0.8;
}

/* footerここまで */



/* ここからaboutページ */
/* --- キービジュアルのスタイル --- */

.hero {
    width: 100%;
    overflow: hidden;
    /* ロゴがはみ出さないように */
}

.hero-container {
    position: relative;
    /* ロゴを重ねる基準にする */
    max-width: 1920px;
    /* 画像の最大幅（必要に応じて調整） */
    margin: 0 auto;
}

/* 背景画像のグリッドレイアウト */
.hero-bg-grid {
    display: grid;
    /* 3列、行の高さは画像に合わせる */
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    /* 画像間の隙間をなくす */
}

/* 各画像の配置指定 */
.grid-item-shop {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    /* 1行目から2行目まで貫通 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 領域に合わせてトリミング */
}

.grid-item-somen {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 100%;
}

.grid-item-narazuke {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    width: 100%;
}

.grid-item-kuzumochi {
    grid-column: 2 / 4;
    /* 2列目から3列目まで貫通 */
    grid-row: 2 / 3;
    width: 100%;
}

/* 中央のロゴのスタイル */
.hero-logo {
    position: absolute;
    top: 50%;
    /* 親要素の上から50%の位置 */
    left: 50%;
    /* 親要素の左から50%の位置 */
    transform: translate(-50%, -50%);
    /* 自身のサイズ分だけ戻して中央寄せ */
    z-index: 10;
    /* 画像より上に重ねる */
    width: 25%;
    /* ロゴの幅（画面幅に合わせて調整） */
    max-width: 300px;
    /* ロゴの最大幅 */
    background: #fff;
    /* 白い背景 */
    padding: 10px;
    /* ロゴと白枠の間の余白 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* 軽い影で浮かせる */
    border-radius: 8px;
    /* 角を少し丸くする */
}

.hero-logo img {
    width: 100%;
    height: auto;
}

/* --- レスポンシブ対応（スマホ向け） --- */
@media (max-width: 768px) {
    .hero-bg-grid {
        /* スマホでは1列にして縦に並べる */
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
    }

    .grid-item-shop,
    .grid-item-somen,
    .grid-item-narazuke,
    .grid-item-kuzumochi {
        grid-column: 1 / 2;
        grid-row: auto;
    }

    .hero-logo {
        width: 50%;
        /* スマホではロゴを少し大きく */
    }
}

/* 商品ピックアップ */
.product-pickup {
    position: relative;
    width: 100%;
    padding: 80px 0;
    overflow: hidden;
}

/* --- 背景レイヤーの管理 --- */
.bg-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* 背面に配置 */
}

/* 上半分の赤（高さ400px。カードの半分にしたい場合はここを調整） */
.bg-red {
    height: 400px;
    background-color: #b03a2e;
    /* 濃い赤 */
}

/* 下半分の和紙 */
.bg-washi {
    height: calc(100% - 400px);
    background-color: #fdfaf5;
    /* 和紙のベース色 */
    background-image: url('washi-texture.jpg');
    /* 和紙画像 */
    background-size: cover;
}

/* 和柄レイヤー（赤背景の上に重ねる） */
/* 和柄レイヤー（左右個別に配置） */
.bg-wagara {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    /* 赤背景の高さに合わせる */

    /* 1つ目に左、2つ目に右の画像を指定 */
    background-image:
        url('/images/wagara-left.png'),
        url('/images/wagara-right.png');

    /* それぞれの配置：左は左上、右は右上 */
    background-position:
        left top,
        right top;

    background-repeat: no-repeat;

    /* サイズ調整：
       auto 100% にすると、赤背景の高さに合わせて自動調整されます。
       横幅を固定したい場合は 300px auto のように指定してください。 */
    background-size:
        auto 100%,
        auto 100%;

    z-index: 1;
    pointer-events: none;
}

/* スマホ対応：画面が狭い時に柄がカードに被る場合の調整 */
@media (max-width: 768px) {
    .bg-wagara {
        /* スマホでは柄を小さくするか、思い切って消す（display:none）のも手です */
        background-size: 30% auto, 30% auto;
        height: 300px;
        /* 赤背景のレスポンシブ高さに合わせる */
    }
}

/* --- コンテンツの管理 --- */
.container {
    position: relative;
    z-index: 10;
    /* 背景レイヤーより確実に手前に出す */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.pickup-header {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}

.pickup-header h2 {
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: 0.1em;
}

/* グリッドレイアウト */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* PCでは4枚 */
    gap: 20px;
}

/* 商品カード */
.product-card {
    background: transparent;
}

.card-inner {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-img {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img img {
    max-width: 100%;
    height: auto;
}

/* 青いキャプション部分 */
.product-caption {
    background-color: #435971;
    /* 紺色 */
    color: #fff;
    text-align: center;
    padding: 15px 10px;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ボタン */
.more-btn-area {
    text-align: center;
    margin-top: 50px;
}

.more-btn {
    display: inline-block;
    background-color: #b03a2e;
    color: #fff;
    padding: 12px 60px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 0 #8a2e24;
}

/* --- レスポンシブ（スマホ対応） --- */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        /* スマホでは2枚ずつ */
    }

    .bg-red {
        height: 300px;
        /* 赤い部分を少し短く */
    }

    .bg-wagara {
        background-size: 150% auto;
        /* スマホでは和柄を少し拡大して見せる */
    }
}


/* 千年の風土が育てた、奈良のかたち */

.nara-intro {
    padding: 100px 0;
    text-align: center;
    background-image: url('washi-texture.jpg');
    /* 和紙背景を継続 */
    background-size: cover;
}

/* テキスト部分 */
.intro-header {
    margin-bottom: 60px;
}

.deer-icon {
    text-align: center;
    /* 1. 親のdivの中で中身を中央に寄せる */
    width: 100%;
    /* 念のため幅を100%確保 */
}

.deer-icon img {
    width: 60px;
    height: auto;
    display: block;
    /* 2. 画像をブロック化する */
    margin: 0 auto 30px;
    /* 3. 左右の余白を「auto」にすることで中央配置にする */
}

.catchphrase {
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    margin-bottom: 15px;
    color: #333;
}

.sub-title {
    font-size: 1.8rem;
    font-weight: normal;
    letter-spacing: 0.15em;
    color: #333;
}

/* ギャラリー部分：Flexboxでふんわり並べる */
.intro-gallery {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    /* 下揃えにすることでリズムを出す */
    gap: 40px 20px;
    padding: 0 20px;
}

.gallery-item img {
    max-width: 100%;
    height: auto;
    /* 影を薄くつけると、和紙の上に置いている感が出ます */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.05));
}

/* 個別のサイズ微調整（画像に合わせて） */
.item-sushi {
    width: 45%;
}

.item-somen {
    width: 45%;
}

.item-sweets-l {
    width: 25%;
}

.item-sweets-c {
    width: 30%;
}

.item-tsukemono {
    width: 35%;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .catchphrase {
        font-size: 1.2rem;
    }

    .sub-title {
        font-size: 1.4rem;
    }

    .intro-gallery {
        gap: 20px;
    }

    .gallery-item {
        width: 80% !important;
        /* スマホでは大きく1枚ずつ見せる */
        margin-bottom: 20px;
    }
}


.pickup-header {
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.pickup-header h2 {
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: 0.1em;
}

/* 商品グリッド */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 個別のカード */
.product-card {
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.card-img {
    padding: 20px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-img img {
    max-width: 100%;
    height: auto;
}

/* 紺色のキャプション部分 */
.card-caption {
    background-color: #435971;
    /* 画像に合わせた紺色 */
    color: #fff;
    text-align: center;
    padding: 15px 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    min-height: 3em;
}

/* ボタン */
.more-link {
    text-align: center;
    margin-top: 50px;
}

.more-link a {
    display: inline-block;
    background-color: #b03a2e;
    color: #fff;
    padding: 12px 60px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    box-shadow: 0 4px 0 #8a2e24;
    /* ボタンの立体感 */
}

.lineup-section {
    padding: 80px 0;
    background-image: url('washi-texture.jpg');
    /* 和紙背景 */
    background-size: cover;
}

.lineup-title {
    text-align: center;
    margin-bottom: 50px;
}

.lineup-title .title-icon {
    width: 40px;
    height: auto;
    display: block;
    /* 1. 画像をブロック要素（一つの箱）にする */
    margin: 0 auto 10px;
    /* 2. 左右の余白を「auto」にして中央に寄せる。下余白は10px。 */
}

.lineup-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* 垂直方向中央 */
    padding: 0 40px;
}

/* スライダー側 */
.slider-wrapper {
    flex: 1.2;
    /* 少し広めに確保 */
    min-width: 0;
    /* Swiper崩れ防止 */
}

.swiper {
    width: 100%;
    height: 450px;
    border-radius: 15px;
    /* 写真の角丸 */
    overflow: hidden;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    /* 親要素（.swiper）の高さに合わせる */
    object-fit: cover;
    display: block;
}

/* ドットのデザイン調整 */
.swiper-pagination {
    position: relative !important;
    margin-top: 20px;
    text-align: right !important;
    /* 右側に配置 */
}

.swiper-pagination-bullet {
    background: #000 !important;
    opacity: 0.3;
}

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

/* テキスト側 */
.text-wrapper {
    flex: 1;
    padding-left: 60px;
    position: relative;
}

.text-inner h3 {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 30px;
    color: #333;
}

.text-inner p {
    font-size: 0.95rem;
    line-height: 2;
    color: #444;
    text-align: justify;
}

/* 装飾アイコンの配置 */
.deco-cloud {
    position: absolute;
    top: 50px;
    right: 150px;
    width: 60px;
    opacity: 0.8;
}

.deco-deer {
    position: absolute;
    top: 0;
    right: 20px;
    width: 100px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .lineup-container {
        flex-direction: column;
    }

    .text-wrapper {
        padding-left: 0;
        margin-top: 40px;
    }

    .swiper {
        height: 250px;
        /* スマホでは高さを抑える */
    }
}

.lineup-list {
    padding: 60px 0;
    background-image: url('washi-texture.jpg');
    background-size: cover;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* グリッドの設定 */
.product-grid {
    display: grid;
    /* PCでは4列 */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    /* 縦の隙間を30px、横を20pxに */
    margin-bottom: 50px;
}

/* 個別のカード */
.product-card {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}

.card-img {
    padding: 15px;
    aspect-ratio: 1 / 1;
    /* 正方形を維持 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* 商品全体が見えるように */
}

/* 下の紺色ラベル */
.card-caption {
    background-color: #435971;
    color: #fff;
    text-align: center;
    padding: 15px 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    flex-grow: 1;
    /* 高さを揃える */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ボタンのスタイル */
.view-more {
    text-align: right;
    margin-top: 30px;
    /* 必要に応じて上の余白を調整 */
}

.btn-outline-red {
    display: inline-block;
    padding: 5px 25px;
    /* 80pxから30pxへ。これでギュッと小さくなります */
    border: 1.5px solid #b03a2e;
    /* 枠線を少し細くするとより繊細な印象に */
    font-size: 0.7rem;
    /* 文字も少し小さくするとバランスが良いです */
    /* その他のスタイル（背景白、角丸など）は維持 */
    color: #333;
    text-decoration: none;
    border-radius: 30px;
    background-color: #fff;
    transition: all 0.3s;
}

.btn-outline-red:hover {
    background-color: #b03a2e;
    color: #fff;
}

/* レスポンシブ調整 */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        /* タブレットは3列 */
    }
}

@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        /* スマホは2列 */
        gap: 15px 10px;
    }

    .btn-outline-red {
        width: 100%;
        /* スマホではボタンを横いっぱいに */
        padding: 10px 0;
    }
}

/* style.css */

.landscape-divider {
    display: flex;
    /* 横並びにする */
    width: 100%;
    /* 画面の端から端まで */
    margin: 60px 0;
    /* 前後のセクションとの余白 */
    overflow: hidden;
}

.landscape-item {
    flex: 1;
    /* 3つの要素を均等な幅（1:1:1）にする */
    height: 300px;
    /* PCでの表示の高さ。お好みで調整してください */
}

.landscape-item img {
    width: 100%;
    height: 100%;
    display: block;
    /* ★ここがポイント：異なる比率の写真でも枠に合わせて自動切り抜き */
    object-fit: cover;

    /* 少しコントラストを整えると和風に馴染みます（任意） */
    filter: brightness(0.95);
}

/* --- レスポンシブ（スマホ対応） --- */
@media (max-width: 768px) {
    .landscape-divider {
        flex-direction: column;
        /* スマホでは縦に並べる */
    }

    .landscape-item {
        height: 200px;
        /* スマホでは少し低めにする */
        width: 100%;
    }
}

.about-section {
    padding: 100px 0;
    background-color: #fff;
    text-align: center;
}

.about-header {
    text-align: center;
    /* 親要素で中身を中央に寄せる */
    width: 100%;
}

.about-icon {
    display: inline-block;
    /* 中身のサイズに合わせた箱にする */
}

.about-icon img {
    width: 40px;
    height: auto;

    /* ★ 中央寄せの定番セット */
    display: block;
    /* 1. 画像をブロック要素にする */
    margin: 0 auto 10px;
    /* 2. 左右の余白を「auto」にして中央へ */
}

.about-header h2 {
    font-family: 'Shippori Mincho', serif;
    /* 明朝体で高級感を出す */
    font-size: 1.5rem;
    font-weight: normal;
    color: #444;
}

/* --- レイアウトの肝 --- */
.about-content {
    display: flex;
    justify-content: center;
    /* 横方向の中央寄せ */
    align-items: center;
    /* 縦方向の中央寄せ */
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    /* 画像とテキストの間の距離 */
}

/* 縦書きの指定 */
.about-text {
    writing-mode: vertical-rl;
    /* ★縦書き（右から左へ） */
    text-orientation: upright;
    /* 文字の向きを正立させる */
    font-family: 'Shippori Mincho', serif;
    font-size: 1.2rem;
    line-height: 2;
    letter-spacing: 0.3em;
    /* 文字の間隔を広げてゆとりを出す */
    color: #333;
    text-align: left;
    /* 縦書きの中での開始位置 */
}

/* 中央のイラスト画像 */
.about-main-img {
    flex: 0 1 600px;
    /* 幅を最大600pxに制限 */
}

.about-main-img img {
    width: 100%;
    height: auto;
}

/* --- レスポンシブ（スマホ対応） --- */
@media (max-width: 768px) {
    .about-content {
        flex-direction: column;
        /* スマホでは縦に並べる */
        gap: 30px;
    }

    .about-text {
        writing-mode: horizontal-tb;
        /* ★スマホでは横書きに戻す（読みやすさ重視） */
        text-align: center;
        letter-spacing: 0.1em;
    }

    .about-main-img {
        order: -1;
        /* 画像を一番上に持ってくる */
        width: 90%;
    }
}

.about-details {
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px 20px;
    background-image: url('washi-texture.jpg');
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3等分 */
    gap: 40px;
    align-items: start;
}

/* --- 共通の画像枠設定 --- */
.img-box {
    width: 100%;
    height: 100%;
    /* ★画像が枠いっぱいに広がり、はみ出た分を自動で切り抜きます */
    object-fit: cover;
    display: block;
}

/* 画像共通：角丸を忘れずに */
.img-box img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    display: block;
}

/* --- カラムのレイアウト設定 --- */
.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
}

/* ズレ（リズム）の調整 */
/* 画像の高さが揃うので、padding-top の数値だけで正確にズレを制御できます */
.col-left {
    padding-top: 0;
}

.col-center {
    /* 真ん中のカラムをグッと下げる */
    padding-top: 180px;
}

.col-right {
    /* 右のカラムを少し下げる */
    padding-top: 60px;
}

.text-block p {
    /* 現在 0.9rem だったものを 0.8rem (約13px弱) に下げてみます */
    font-size: 0.8rem;
    line-height: 1.8;
    color: #444;
    letter-spacing: 0.05em;
    /* 文字を小さくした時は少し間隔を広げると読みやすいです */
}

/* --- 装飾アイコンの調整 --- */
.deco-deer-outline,
.deco-pagoda,
.deco-building {
    /* アイコンは切り抜かれたくないので、aspect-ratio は指定しません */
    width: 100px;
    margin: 30px auto;
    text-align: center;
}

.deco-deer-outline img,
.deco-pagoda img,
.deco-building img {
    width: 100%;
    height: auto;
}

.about-details {
    width: 100%;
    /* 横幅いっぱいを確保 */
    text-align: center;
    /* ★中身（ボタン）を中央に寄せる */
    margin-top: 80px;
    /* 上のコンテンツとの距離 */
}

.concept-button {
    /* 1. 基本の形 */
    display: inline-block;
    padding: 15px 60px;
    /* 上下15px、左右60px（文字の小ささに合わせて調整） */
    border: 1px solid #d4b886;
    /* 画像の薄い金色の枠線 */
    background-color: #fff;
    position: relative;
    /* 装飾を置くための基準点 */
    cursor: pointer;
    transition: all 0.3s;
}

.concept-button-text {
    /* 2. 文字のスタイル */
    font-family: "Shippori Mincho", serif;
    /* 明朝体 */
    font-size: 1rem;
    /* 文字を少し小さめに設定 */
    letter-spacing: 0.2em;
    /* 和風らしく、ゆったりした文字間隔 */
    color: #333;
}

/* 3. 左下の装飾 */
.concept-button::before {
    content: '';
    position: absolute;
    bottom: 5px;
    /* 枠からの距離 */
    left: 5px;
    width: 35px;
    /* 模様のサイズ */
    height: 35px;
    background-image: url('/images/pattern-gold-left.png');
    /* 左下の模様画像 */
    background-size: contain;
    background-repeat: no-repeat;
}

/* 4. 右上の装飾 */
.concept-button::after {
    content: '';
    position: absolute;
    top: 5px;
    /* 枠からの距離 */
    right: 5px;
    width: 35px;
    /* 模様のサイズ */
    height: 35px;
    background-image: url('/images/pattern-gold-right.png');
    /* 右上の模様画像 */
    background-size: contain;
    background-repeat: no-repeat;
}

/* ホバーした時に少し浮き上がる演出（お好みで） */
.concept-button:hover {
    box-shadow: 0 4px 12px rgba(212, 184, 134, 0.2);
    transform: translateY(-2px);
}

/* footerここから */

.main-footer {
    background-image: url('washi-texture.jpg');
    padding-top: 80px;
    position: relative;
    overflow: hidden;
}

/* --- ビジュアルエリア（段違い画像） --- */
.footer-visual {
    max-width: 1200px;
    margin: 0 auto 60px;
    position: relative;
}

.visual-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: flex-start;
}

.visual-item {
    flex: 1;
    max-width: 220px;
    aspect-ratio: 3 / 4;
    /* 縦横比を固定 */
    overflow: hidden;
    border-radius: 15px;
}

.visual-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 段違いの調整 */
.item1 {
    margin-top: 0;
}

.item2 {
    margin-top: 80px;
}

.item3 {
    margin-top: 160px;
}

.item4 {
    margin-top: 240px;
}

/* 装飾アイコンの配置 */
.deco-line {
    position: absolute;
    top: 80px;
    right: 5%;
    width: 300px;
}

.deco-kumo-top {
    position: absolute;
    top: 180px;
    right: 2%;
    width: 100px;
}

.deco-kumo-left {
    position: absolute;
    bottom: 100px;
    left: 0;
    width: 150px;
}

/* --- ロゴ＆ナビゲーション --- */
.main-footer {
    background-image: url('washi-texture.jpg');
    padding: 100px 0 0;
}

/* 全体を中央に寄せるための大きな箱 */
.footer-container {
    max-width: 1000px;
    /* 画像4枚が綺麗に収まる幅 */
    margin: 0 auto;
    /* これで全体が中央へ */
    padding: 0 40px;
    /* 左右の余白 */
    position: relative;
}

/* --- 画像エリア --- */
.footer-visual {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.visual-item {
    width: 23%;
    /* 4枚並べるためのサイズ */
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
}

/* 段違いの調整（スクリーンショット通りに） */
.item1 {
    margin-top: 0;
}

.item2 {
    margin-top: 100px;
}

.item3 {
    margin-top: 150px;
}

.item4 {
    margin-top: 250px;
}

/* --- ロゴとナビを左に揃えるブロック --- */
.footer-content-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* ★これでロゴとナビが左に揃う */
    /* 1枚目の画像の下あたりに配置されるように調整 */
    margin-top: -100px;
    /* 画像の段違いに合わせて位置を上げる */
    padding-bottom: 100px;
}

.footer-logo img {
    width: 250px;
    margin-bottom: 40px;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 60px;
    list-style: none;
    padding: 0;
}

.nav-grid li a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

/* ナビのテキストサイズ微調整 */
.nav-text .en {
    font-size: 1.1rem;
    color: #333;
}

.nav-text .jp {
    font-size: 0.65rem;
    color: #999;
}

/* 赤いバー */
.footer-bottom-bar {
    background-color: #b03a2e;
    padding: 15px 0;
    text-align: center;
}

.footer-bottom-bar p,
.footer-bottom-bar a {
    color: #ffffff !important;
    /* 強制的に白を指定 */
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    /* リンクの下線を消す */
    margin: 0;
}

/* リンクにマウスを乗せた時の演出（任意） */
.footer-bottom-bar a:hover {
    text-decoration: underline;
    /* ホバー時だけ下線を出す */
    opacity: 0.8;
}

/* footerここまで */



/* ここからaboutページ */
/* --- Hero Section --- */
.main-intro {
    background-color: var(--nara-red);
    color: var(--white);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.side-pattern {
    position: absolute;
    left: -150px;
    top: 20px;
    bottom: 45px;
    width: 600px;
    background: url('images/pattern.png') repeat-y;
    opacity: 0.6;
}

/* 修正: 写真とアイコンの上端を揃える */
.hero-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 天出しを揃える */
    margin-bottom: 60px;
    gap: 40px;
}

.slider-area {
    width: 78%;
}

.image-box img {
    border-radius: var(--radius-l);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- 一番上のセクション（赤背景）用のドット設定 --- */
.slider-area {
    width: 78%;
    /* position: relative; は解除するか、dotsの絶対配置をやめる */
}

.slider-dots {
    display: flex;
    justify-content: flex-end;
    /* 画像の右下に合わせる */
    gap: 10px;
    margin-top: 15px;
    /* 画像のすぐ下に配置 */
}

.slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    /* 枠線を白に */
    background-color: transparent;
    display: inline-block;
}

.slider-dots .dot.active {
    background-color: #ffffff;
    /* アクティブなドットを白塗りに */
}

/* 右側の白いアイコンカード */
.collage-card {
    width: 30%;
    background: var(--white);
    border-radius: 15px;
    padding: 15px;
    /* 余白を少し広げました */
}

.intro-content {
    display: flex;
    align-items: flex-end;
    gap: 40px;
}

.torii-illust {
    width: 420px;
    flex-shrink: 0;
}

/* 修正: 横幅を適切に制限 */
.main-copy {
    font-size: 2.2rem;
    margin-bottom: 25px;
    font-weight: 500;
    line-height: 1.4;
}

.main-desc {
    font-size: 1rem;
    text-align: justify;
}

/* --- Product Grid --- */
.visual-full-grid {
    border-top: 3px solid var(--nara-red);
}

.grid-row {
    display: flex;
}

.grid-col {
    flex: 1;
    height: 350px;
    overflow: hidden;
}

.grid-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Utilities & Responsive --- */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    /* 修正: スマホで見やすくするために並び替え */
    .hero-flex {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .collage-card {
        width: 80%;
        order: -1;
        /* スマホではアイコンカードを写真より上に配置してブランドを強調 */
    }

    .slider-area {
        width: 100%;
    }

    .slider-dots {
        justify-content: center;
        /* スマホでは中央に配置 */
    }

    .intro-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .torii-illust {
        width: 60%;
        margin-bottom: 20px;
    }

    .main-copy {
        font-size: 1.6rem;
    }

    .grid-row {
        flex-direction: column;
    }

    .grid-col {
        height: 250px;
    }
}

/* --- Concept Sections --- */
.concept-area {
    background: var(--bg-beige) url('washi-texture.png');
    padding: 100px 0;
    position: relative;
}

.concept-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 150px;
}

/* PDF下段：テキストを左、画像を右にする設定 */
.concept-row.reverse {
    flex-direction: row-reverse;
}

.concept-img-block {
    width: 52%;
}

.concept-txt-block {
    width: 40%;
}

/* タイトルとイラストの配置 */
.title-wrap {
    display: flex;
    gap: 20px;
}

/* ドットの親要素：画像の下に配置し、高さを確保する */
.dots-under {
    display: flex;
    justify-content: flex-end;
    /* PDF に合わせ右寄せ */
    gap: 10px;
    margin-top: 15px;
    /* 画像との余白を確保 */
    width: 100%;
}

/* --- コンセプトエリア（ベージュ背景）用のドット設定 --- */
.dots-under {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

.dots-under .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #333333;
    /* ベージュ背景で見えるように黒系に */
    background-color: transparent;
    display: inline-block;
}

.dots-under .dot.active {
    background-color: #333333;
}

.title-wrap {
    display: flex;
    flex-direction: row-reverse;
    /* タイトルの右側にイラストを配置 */
    align-items: flex-start;
    justify-content: flex-end;
    /* 右側に寄せる */
    gap: 15px;
    /* タイトルとイラストの距離をPDFに近づける */
    position: relative;
    margin-bottom: 30px;
}

/* 縦書きタイトルの高さと余白 */
.v-title {
    writing-mode: vertical-rl;
    font-size: 2.2rem;
    letter-spacing: 0.35em;
    line-height: 1.6;
    height: 420px;
    /* イラストとのバランスを見て調整 */
}

/* 1. 立ち鹿（上段セクション）を小さく、テキスト右下に配置 */
.deco-deer-standing {
    position: absolute;
    /* テキストの1行目と2行目の間、かつ下方に配置 */
    right: 42px;
    bottom: 20px;
    /* テキストエリアの下端からの距離 */
    z-index: 2;
}

.deco-deer-standing img {
    /* さらに小さく、さりげないサイズ感に調整 */
    width: 70px;
    height: auto;
    opacity: 0.6;
}

/* 2. 鹿の頭（下段）のサイズと位置 */
.deco-deer-head {
    padding-top: 260px;
    /* タイトルの下部に来るよう調整  */
}

.deco-deer-head img {
    width: 140px;
    /* 頭のイラストは少し大きめに配置 */
    height: auto;
}

/* 2. 波（エ霞）の位置調整：画像と重ならないように */
.deco-wave {
    position: absolute;
    left: 50%;
    /* 1段目の画像が終わった後の「余白部分」に配置 */
    top: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    z-index: 0;
    /* 背景の一番奥へ */
    pointer-events: none;
}

.deco-wave img {
    width: 100%;
    height: auto;
    /* 非常に淡くして背景に溶け込ませる */
    opacity: 0.25;
}

/* 3. 親要素（テキストブロック）の設定 */
.concept-txt-block {
    width: 42%;
    position: relative;
    /* 鹿の配置基準 */
    /* 下側に少し余裕を持たせて鹿を配置しやすくする */
    padding-bottom: 40px;
}

.title-wrap {
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.v-title {
    writing-mode: vertical-rl;
    font-size: 2.2rem;
    letter-spacing: 0.35em;
    line-height: 1.8;
    height: 400px;
}

/* --- Responsive (Mobile) --- */
@media (max-width: 850px) {
    .title-wrap {
        flex-direction: column;
        /* スマホでは縦並び */
        align-items: center;
        gap: 15px;
    }

    .v-title {
        writing-mode: horizontal-tb;
        /* 横書きに変更 */
        height: auto;
        text-align: center;
        font-size: 1.6rem;
        letter-spacing: 0.1em;
    }

    .deco-illust {
        padding-top: 0 !important;
        /* スマホでは位置調整をリセット */
        order: -1;
        /* タイトルの上にイラストを表示 */
    }

    .deco-illust img {
        width: 80px;
        /* スマホ用にサイズダウン */
    }

    .deco-deer-standing {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 10px auto;
        text-align: center;
    }

    .deco-deer-standing img {
        width: 60px;
    }

    .deco-wave {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 180px;
        margin: 20px auto;
        /* スマホでは画像間に配置されるため少し濃くする */
        opacity: 0.4;
    }
}


/* --- Responsive (Mobile) --- */
@media (max-width: 850px) {

    .concept-row,
    .concept-row.reverse {
        flex-direction: column;
        /* スマホはすべて縦一列 */
        align-items: center;
        margin-bottom: 80px;
    }

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

    /* 修正：スマホでは常にテキスト（タイトル）を画像より上に配置 */
    .concept-txt-block {
        order: -1;
        margin-bottom: 30px;
    }

    .v-title {
        writing-mode: horizontal-tb;
        /* スマホは横書きで読みやすく */
        height: auto;
        text-align: center;
        font-size: 1.5rem;
    }

    .title-wrap {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .deco-illust {
        padding-top: 0 !important;
        /* スマホでは位置固定を解除 */
        order: -1;
        /* イラストをタイトルの上に */
    }

    .deco-deer-standing img,
    .deco-deer-head img {
        width: 70px;
        /* スマホでは一律サイズダウン */
    }

    .deco-wave {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin: 20px auto;
        width: 180px;
    }

    /* 商品一覧ここから */
    /* 1. 親要素を縦並びに変更 */
    .lineup-container {
        flex-direction: column;
        /* 横から縦へ */
        gap: 40px;
        /* スライダーとテキストの間の余白 */
        padding: 0 20px;
        /* 左右に少し余白を作る */
    }

    /* 2. 各ブロックの横幅をいっぱいに広げる */
    .slider-wrapper,
    .text-wrapper {
        width: 100%;
    }

    /* 3. テキスト周りの調整 */
    .text-inner {
        padding: 0;
        /* デスクトップ用の余白があればリセット */
        text-align: center;
        /* スマホでは中央揃えにすると綺麗に見えます（お好みで） */
    }

    .text-inner h3 {
        font-size: 1.4rem;
        /* タイトルをスマホ向けに少し小さく */
        margin-bottom: 20px;
    }

    .text-inner p {
        font-size: 0.9rem;
        line-height: 1.7;
        text-align: justify;
        /* 文章は両端揃えが見やすいです */
    }

    /* 4. 装飾アイコン（雲や鹿）の調整 */
    /* スマホだと文字に被りやすいため、少し小さくするか位置を調整します */
    .deco-cloud {
        width: 80px;
        top: -20px;
        right: 0;
    }

    .deco-deer {
        width: 70px;
        bottom: -30px;
        right: 10px;
    }
}