/* --- 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;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

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;
}

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

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

/* 商品Pickupここから */
.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;
}
/* 商品Pickupここまで */

/* --- 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: 3000px;
    /* 画像の最大幅（必要に応じて調整） */
    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) {
.product-pickup {
    padding: 10px 0;
}
    .bg-wagara {
        /* スマホでは柄を小さくするか、思い切って消す（display:none）のも手です */
        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 {
    height: 300px; /* 高さ固定 */
    overflow: hidden;
    padding: 20px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

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

    display: flex;
    align-items: center;
    justify-content: center;

    height: 80px; /* 固定高さ */
    box-sizing: border-box;
}

/* ボタン */
.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));
}



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

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

    .intro-gallery {
        gap: 20px;
    }

    .gallery-item {
        width: 100%;
        /* スマホでは大きく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 ;
    /* 画像に被らないようにする */
    text-align: right ;
    /* ★右寄せ */
    margin-top: 15px;
    /* 画像との隙間 */
}

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

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

/* テキスト側 */
.text-wrapper {
    flex: 1;
    padding-left: 60px;
    padding-right: 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-section {
    padding: 10px 0;
    background-image: url('washi-texture.jpg');
    /* 和紙背景 */
    background-size: cover;
}
    
    /* 商品一覧ここから */
    /* 1. 親要素を縦並びに変更 */
    .lineup-container {
        flex-direction: column;
        /* 横から縦へ */
        gap: 40px;
        /* スライダーとテキストの間の余白 */
        padding: 0 20px;
        /* 左右に少し余白を作る */
    }

    /* 2. 各ブロックの横幅をいっぱいに広げる */
    .slider-wrapper,
    .text-wrapper {
        width: 100%;
    }
.text-wrapper {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}
    
    /* 3. テキスト周りの調整 */
    .text-inner {
        padding: 0;
        /* デスクトップ用の余白があればリセット */
        text-align: center;
        /* スマホでは中央揃えにすると綺麗に見えます（お好みで） */
    }

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

    .text-inner p {
        width: 100%;
        font-size: 0.9rem;
        line-height: 1.7;
        text-align: justify;
        padding: 0 5px;

        /* 文章は両端揃えが見やすいです */
    }

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

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

.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 {
     /*height: 300px; 高さ固定 */
    overflow: hidden;
    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.65rem;
    line-height: 1.2;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 50px; /* 高さ統一 */
    box-sizing: border-box;
}

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

.btn-outline-red {
    display: inline-block;
    padding: 5px 25px;
    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) {
.lineup-list {
    padding: 20px 0;
}
    /*.product-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px 10px;
    }*/
    .product-grid {
        display: flex;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 10px;

        /* スクロールを滑らかに */
        scroll-snap-type: x mandatory;

        /* スクロールバー非表示 */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .product-grid::-webkit-scrollbar {
        display: none;
    }

    .product-card {
        flex: 0 0 80%;
        scroll-snap-align: start;
    }
    
    .btn-outline-red {
        padding: 5px 25px;
        display: inline-block;
        min-width: 0;
    }

    .view-more {
        text-align: center;
        margin-top: 30px;
    }
}

.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;
}

/* =============================================
   About us セクション：スマホ対応 (768px以下)
   ============================================= */
@media (max-width: 768px) {
    .about-section {
        padding: 20px 20px; /* 上下の余白を調整 */
    }

    /* 1. 横並びを縦並びに変更（順番はHTMLの記述順：テキスト1→画像→テキスト2） */
    .about-content {
        flex-direction: column;
        gap: 30px; /* 要素間の隙間 */
    }

    /* 2. 縦書きを横書きにリセット */
    .about-text {
        writing-mode: horizontal-tb; /* 横書きに変更 */
        text-orientation: mixed;      /* 向きをリセット */
        height: auto;
        font-size: 1.1rem;
        line-height: 1.6;
        letter-spacing: 0.1em;
        text-align: center;           /* スマホでは中央寄せが綺麗です */
    }

    /* 3. イラスト（ロゴ）エリアの調整 */
    .about-main-img {
        flex: none;
        width: 100%;
        max-width: 300px; /* スマホで大きすぎないよう制限 */
        margin: 0 auto;
    }

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

/* 斜め画像部分 */
/* --- 共通の画像枠設定 --- */
.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 {
    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;
    text-decoration: none; /* 下線を消す */
}

.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);
}

/* --- レスポンシブ（スマホ対応）：ここから差し替え・追記 --- */
/* すべての要素の基本設定（CSSの冒頭に一度あればOK） */
* {
    box-sizing: border-box;
}

/* =============================================
   スマホ対応 (768px以下)
   ============================================= */
@media (max-width: 768px) {

    /* 1. 外枠の余白とはみ出し防止 */
    .about-details {
        padding: 60px 0;
        text-align: center;
        overflow-x: hidden; /* 念のための横揺れ防止 */
    margin-top: 0px;
    }

    /* 2. グリッドを縦並びに変更 */
    .about-details .details-grid {
        display: block; 
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* 3. カラム（画像とテキストの塊）の中央寄せ設定 */
    .about-details .grid-column {
        display: flex;
        flex-direction: column;
        align-items: center; /* 横方向の中央 */
        width: 100%;
        padding: 0 20px;     /* 画面端に文字がつかないよう左右に余白 */
        margin: 0 0 50px 0;
        /* PC版で設定された位置調整をリセット */
        position: static; 
        left: auto;
        right: auto;
        transform: none;
    }

    /* 4. 画像エリアの調整（中央配置） */
    .grid-column .img-box {
        width: 100%;
        max-width: 400px;   /* テキストと揃える最大幅 */
        margin: 0 auto 20px;
        display: block;
    }

    .img-box picture,
    .img-box img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
        border-radius: 15px;
    }

    /* 5. 装飾アイコンを非表示 */
    .grid-column .deco-deer-outline,
    .grid-column .deco-pagoda,
    .grid-column .deco-building {
        display: none;
    }

    /* 6. テキストブロックを画像幅に合わせて中央寄せ */
    .grid-column .text-block {
        width: 100%;
        max-width: 400px;   /* 画像の幅と統一 */
        margin: 0 auto;
        padding: 0;
    }

    .text-block p {
        writing-mode: horizontal-tb;
        text-align: justify; /* 両端揃え（読みやすさ重視） */
        font-size: 0.95rem;
        line-height: 1.8;
        margin: 0;
        width: 100%;
        /* 万が一、PC版で個別に幅が指定されていても100%にする */
        max-width: 100%; 
    }

    /* 7. ボタンの中央寄せ */
    .about-details .concept-button {
        display: inline-block;
        width: 80%;
        max-width: 300px;
        margin: 20px auto 80px; /* ★3つ目の数値「80px」が下の余白です */
        text-align: center;
        text-decoration: none; /* 下線を消す設定もここにあると安心です */
    }
}

/* --- スマホここまで --- */

/* footerここから */
/* --- ビジュアルエリア（段違い画像） --- */
.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;
    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 ;
    /* 強制的に白を指定 */
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    /* リンクの下線を消す */
    margin: 0;
}

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

@media (max-width: 768px) {
    /* 1. 4枚の写真エリアを非表示 */
    .footer-visual {
        display: none ;
    }

    /* 2. コンテンツ全体を中央寄せ */
    .footer-content-block {
        padding: 40px 15px; /* 左右に少し余裕を持たせる */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* 3. ロゴの調整 */
    .footer-logo {
        margin-bottom: 40px;
        width: 100%;
    }

    .footer-logo img {
        max-width: 160px; /* スマホ向けに少しサイズ調整 */
        height: auto;
        margin: 0 auto;
    }

    /* 4. ナビボタンを横に並べつつ中央に寄せる */
    .footer-nav {
        width: 100%;
    }

 /* 4. ナビゲーション全体の調整 */
    .nav-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 20px 20px; /* メニュー同士の間隔 */
        padding-left: -50px;
        list-style: none;
        max-width: 100%;
        margin: 0 auto;
        width: 100%;            /* liの幅いっぱいに使う */
    }
    .nav-grid li {
        width: calc(50% - 10px);
        display: flex;
        justify-content: flex-start; /* ★各アイテムの行頭を揃える */
    }

    /* アイコンと文字を横並びにする */
    .nav-grid li a {
        display: flex;
        flex-direction: row;    /* ★横並びに変更 */
        align-items: center;    /* 上下中央揃え */
        text-decoration: none;
        width: auto;            /* 幅固定を解除して内容に合わせる */
        gap: 3px;               /* ★アイコンと文字の間の距離（ここでお好みに調整） */
    }

    /* アイコン（マーク）のサイズ調整 */
    .nav-grid li a img {
        width: 32px;            /* 横並び用に少し小さくするとバランスが良いです */
        height: auto;
        margin: 0;
        display: block;
    }

    /* テキスト部分の調整 */
    .nav-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* ★左寄せ（アイコンの右側に来るため） */
        text-align: left;
    }

    .nav-text .en {
        font-size: 0.85rem;
        font-weight: bold;
        line-height: 1.1;
        margin: 0;
    }

    .nav-text .jp {
        font-size: 0.6rem;
        color: #888;
        line-height: 1.1;
        margin-top: 2px;
        white-space: nowrap;
    }

}
/* footerここまで */

/* 新着情報ここから */
/* セクション全体の背景（グラデーション） */
.news-section {
    background: linear-gradient(to bottom, #b3422d, #c2bc94); /* 画像のようなエンジからベージュのグラデ */
    padding: 60px 20px;
    text-align: center;
    margin-bottom: 30px;
}

/* タイトル部分 */
.news-title {
    color: #fff;
    margin-bottom: 30px;
}
.news-title h2 {
    font-family: "Shippori Mincho", serif;
    font-size: 2.5rem;
    margin: 5px 0;
}

/* 白いカード部分 */
.news-card {
    background: #fff;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ニュースリストのスクロールエリア */
.news-list-container {
    max-height: 300px; /* ★ここでお好みの高さ（表示される件数）を調整 */
    overflow-y: auto;
    padding-right: 15px; /* スクロールバーとの隙間 */
    margin-bottom: 30px;
}

/* ニュースリストのスクロールエリア2 */
.news-list-container2 {
    overflow-y: auto;
    padding-right: 15px; /* スクロールバーとの隙間 */
    margin-bottom: 30px;
}

/* リストのデザイン */
.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-list li {
    border-bottom: 1px solid #b3422d; /* 赤茶色の線 */
}

.news-list li .kiji {
    display: flex;
    text-decoration: none;
    color: #333;
    padding: 20px 10px;
    transition: background 0.3s;
    font-size: 12px;
    line-height: 1.3em;
}

@media screen and (min-width: 768px) {
.news-list li .kiji {
    font-size: 15px;
}
}

.news-list li .kiji:hover {
    background-color: #fcf9f5;
}

.news-list .date {
    font-family: "Shippori Mincho", serif;
    color: #888;
    width: 120px;
    text-align: left;
    flex-shrink: 0;
}

.news-list .text {
    text-align: left;
    flex-grow: 1;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.news-list .text2 {
    text-align: left;
    flex-grow: 1;
}

/* --- スクロールバーのカスタマイズ --- */
.news-list-container::-webkit-scrollbar {
    width: 6px;
}
.news-list-container::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 10px;
}
.news-list-container::-webkit-scrollbar-thumb {
    background: #b3422d; /* ツマミの色をメインカラーに */
    border-radius: 10px;
}

/* 一覧ボタン */
.news-more-btn {
    display: inline-block;
    background-color: #b3422d;
    color: #fff;
    padding: 12px 60px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.3s;
}

.news-more-btn:hover {
    opacity: 0.8;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .news-card {
        padding: 20px;
    }
    .news-list li a {
        flex-direction: column; /* スマホでは日付と文章を縦に */
    }
    .news-list .date {
        margin-bottom: 5px;
    }

    .news-section {
    margin-bottom: 100px;
    }
}

/* 新着情報ここまで */

.news-pagination {
    margin-top: 40px;
    text-align: center;
}

.news-pagination .page-numbers {
    display: inline-block;
    margin: 0 5px;
    padding: 10px 15px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
}

.news-pagination .current {
    background: #333;
    color: #fff;
    border-color: #333;
}


/*井上追加*/
/*======= contentCommon　フレックスボックス =======*/
.flexContainer {
	display: -webkit-flex;
	display: flex;

	-webkit-flex-direction: row;
	flex-direction:         row;

	-webkit-flex-wrap: wrap;
	flex-wrap:         wrap;

	-webkit-justify-content: flex-start;
	justify-content:         flex-start;/*space-around*/
}

/*フレックスボックス　2個3個4個の場合*/
.flexContainer .itemCol2,
.flexContainer .itemCol3,
.flexContainer .itemCol4 {
	position: relative;
	display: inline-block;
	width: 100%;
	height: auto;
	margin-bottom: 1rem;
	text-align: center;
}

.flexContainer .itemCol4 {
	width: 50%;
    padding: .5rem;
}

.flexContainer .itemCol4 .shado {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.flexContainer .itemCol2:last-child,
.flexContainer .itemCol3:last-child,
.flexContainer .itemCol4:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {
	.flexContainer {
		/*-webkit-justify-content: space-between;
		justify-content:         space-between;*/
	}

	.flexContainer .itemCol2 {
		width: 50%;
		margin-bottom: 0;

	}

	.flexContainer .itemCol3 {
		width: 33.33333%;
		width: -webkit-calc(99.99999% / 3);
		width: calc(99.99999% / 3);
		margin-bottom: 0;
	}

	.flexContainer .itemCol4 {
		width: 25%;
		margin-bottom: 0;
        padding: 1rem;
    }
}