@charset "UTF-8";

/* ==========================================================================
   共通設定 (Base & Global)
   ※全ページで共通して使われる土台のデザインです
   ========================================================================== */
:root {
    --bg-color: #FAF5F5; 
    --text-color: #4A3C3C; 
    --accent-color: #C88282; 
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

h1, h2, h3, .hero p { 
    font-family: 'Shippori Mincho', serif; 
    font-weight: normal; 
}

a { 
    color: var(--text-color); 
    text-decoration: none; 
}

/* ふわっと表示させるアニメーション（全ページ共通） */
section {
    padding: 60px 20px;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

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

/* ボタン（全ページ共通） */
.btn { 
    display: inline-block; 
    background-color: var(--accent-color); 
    color: #fff; 
    padding: 18px 40px; 
    border-radius: 30px; 
    border: 1px solid transparent; /* （透明な1pxの線を引いて高さを合わせます） */
    line-height: 1;
    margin-top: 20px; 
    transition: 0.3s; 
}

.btn-outline { 
    display: inline-block; 
    border: 1px solid var(--accent-color); 
    color: var(--accent-color); 
    padding: 18px 40px; 
    border-radius: 30px; 
    margin-top: 20px; 
    font-size: 1rem; 
    transition: 0.3s;
    line-height: 1; 
}

.btn:hover, .btn-outline:hover { 
    opacity: 0.7; 
    background-color: var(--accent-color); 
    color: #fff; 
}

/* フッター（全ページ共通） */
footer { 
    text-align: center; 
    padding: 40px 20px; 
    font-size: 0.8rem; 
    border-top: 1px solid #EADFDF; 
}
/* --- フッターナビゲーション（しっかり目立たせる） --- */
.footer-nav {
    margin-bottom: 40px;
    line-height: 2.5; /* ★スマホで改行された時の上下の隙間を広げる */
}
.footer-nav a {
    color: var(--accent-color) !important; /* ★強制的にピンクにする魔法（黒くなる問題の解決） */
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.3s ease;
    padding: 15px 20px; /* ★左右の余白を広めにとる */
    display: inline-block; /* ★余白を確実に効かせ、タップしやすくする（問題点解決） */
}
/* --- フッターの運営情報（左寄せにして中央に配置） --- */
.footer-info {
    max-width: 260px;    /* ★文字の塊の横幅を決める */
    margin: 0 auto 25px; /* ★塊ごと全体の中央に寄せる */
    text-align: left;    /* ★文字自体は左寄せにする */
    font-size: 0.8rem;
    color: #888;
    line-height: 1.8;
}
.footer-info strong {
    font-weight: normal; /* あえて太字をやめて、さらに控えめに */
    color: #666; /* タイトル部分だけ本文より少し濃く */
    letter-spacing: 0.05em;
}

/* ==========================================================================
   トップページ専用設定 (Index)
   ========================================================================== */

/* トップページの見出しを中央揃え・サイズを少し大きくして統一 */
.section-center h2 {
    text-align: center;
    font-size: 2rem; /* 少し大きくして存在感をアップ */
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}

/* --- ヒーローエリア（背景画像と中央配置、スマホ対応、アニメーション完備） --- */
.hero {
    /* ★書き換える行：PC用の画像に黒い半透明(0.4)のフィルターを重ねます */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)), url('../images/top_lamp.jpg');
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 0 20px;
    position: relative;
}

/* スマホの時（画面幅768px以下）だけ背景画像をスクエア用上書き */
@media (max-width: 768px) {
    .hero {
        /* ★書き換える行：スマホ用の画像にも同じく黒い半透明(0.4)のフィルターを重ねます */
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/magrittelamp_square.jpg');
        
        background-attachment: scroll; 
    }
}
/* ロゴと文字を読み込み時にふわっと表示（CSSアニメーション） */
.hero-logo, .hero p {
    animation: heroFadeIn 1.5s ease-out forwards;
}

@keyframes heroFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-logo {
    width: 250px;
    height: auto;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* 背景に紛れても見えやすくする影 */
}

/* --- ③ スクロールを促す「Vが3つ並んだ矢印」のデザインと点滅設定 --- */
.scroll-down-hint {
    position: absolute;
    bottom: 30px; /* 画面の一番下から少し浮かせた位置 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

/* 誰が見てもスクロールだとわかる文字 */
.scroll-down-hint::before {
    content: "SCROLL";
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    margin-bottom: 5px;
    opacity: 0.8;
}

/* vを3つ表現するパーツ */
.scroll-down-hint span {
    display: block;
    width: 12px;
    height: 12px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg); /* 四角の枠線を45度傾けて「v」の形にする技術 */
    opacity: 0;
    animation: arrowWave 2s infinite;
}

/* 3つのvが上から下へ順番に流れるように点滅する魔法（ディレイ設定） */
.scroll-down-hint span:nth-child(1) { animation-delay: 0s; }
.scroll-down-hint span:nth-child(2) { animation-delay: 0.2s; }
.scroll-down-hint span:nth-child(3) { animation-delay: 0.4s; }

@keyframes arrowWave {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-5px, -5px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(5px, 5px);
    }
}

/* --- 各セクションの横幅いっぱいの背景色（交互に切り替え） --- */
#news, #history, #workshop {
    background-color: #FAF5F5; /* 全体のベースとなる非常に薄いピンクベージュ */
}

#about, #online-shop, #contact {
    background-color: #FFFFFF; /* 交互に真っ白を挟むことで、ミニマムに境界線を表現 */
}

/* 横幅いっぱいに背景色を広げるため、各セクションの幅制限を解除 */
section {
    max-width: 100% !important;
    padding: 60px 0; /* 上下の余白を均等に設定 */
}

/* 代わりに、中の文字やコンテンツがはみ出さないための共通のインナー枠を設定 */
.section-center > *:not(h2):not(.history-timeline):not(.ws-summary-container) {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center; /* ABOUT等の通常の段落テキストを中央揃えに */
}


/* --- NEWSセクション --- */
#news {
    padding-top: 30px !important;
    padding-bottom: 15px !important;
}
#news h2 {
    margin-top: 0;
    margin-bottom: 5px;
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
}
.news-list li {
    border-bottom: 1px dashed #EADFDF;
    padding: 4px 0;
}
.news-list li:last-child {
    border-bottom: none;
}
.news-list a {
    display: flex;
    flex-direction: row; /* ★ここを column から row（横並び）に変更 */
    align-items: flex-start; /* ★タイトルが長くて2行になった時、日付と上端を綺麗に揃える */
    gap: 20px; /* ★日付とタイトルの間の余白（お好みで15px〜30pxに調整してください） */
    transition: opacity 0.3s ease;
}
.news-list a:hover {
    opacity: 0.7;
}
.news-date {
    flex-shrink: 0; /* ★画面が狭くなっても「日付」の幅が潰れないように守る魔法 */
    font-size: 0.8rem;
    color: var(--accent-color);
    font-weight: bold;
    padding-top: 2px; /* ★タイトルの文字サイズとの微妙な高さのズレを整える微調整 */
}
.news-title {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.3;
}
.news-more-wrap {
    text-align: center;
    margin-top: 15px;
}
/* ★追加：NEWSエリアの中にあるボタンだけを特別に薄く（スリムに）する魔法 */
#news .btn-outline {
    padding: 10px 30px; /* 上下の分厚さを18pxから10pxへ薄くする */
    margin-top: 0;      /* 無駄な上の余白を消す */
    font-size: 0.85rem; /* 文字も少し小さく */
}

/* --- ABOUTセクション・採用事例誘導 --- */
.index-action-wrap {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dashed #EADFDF;
}
.index-action-wrap p {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 15px;
}
/* --- ABOUTセクションの文章のみ、適度な位置で左揃えにする --- */
#about p {
    text-align: left; /* 文字自体は左から右へ読むように揃える */
    max-width: 560px; /* ★ポイント：箱の幅を少しだけ絞る */
    margin: 0 auto 30px; /* 箱ごと全体の中央に配置する */
}

/* --- HISTORYセクション（文字を読ませる大人の2カラム・ダイジェスト年表） --- */
.history-timeline {
    max-width: 750px;
    margin: 40px auto 0;
}
/* 各年代の行（PCで横並び、スマホで縦並びにする設定） */
.history-row {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 40px;
    border-bottom: 1px dashed rgba(234, 223, 223, 0.5);
    padding-bottom: 30px;
}
.history-row:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}
/* 歴史の小ぶりな写真エリア */
.history-node-img-wrap {
    flex: 0 0 220px; /* 写真の横幅を制限 */
}
.history-node-img {
    width: 100%;
    height: 140px; /* 高さも抑えてコンパクトに */
    object-fit: cover;
    border-radius: 4px;
}
/* 文字を読ませるテキストエリア */
.history-node-content {
    flex: 1;
}
.history-year {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.25rem;
    color: var(--accent-color);
    font-weight: bold;
    margin: 0 0 10px 0;
    display: block;
}
.history-node-text {
    font-size: 0.9rem;
    line-height: 1.75;
    color: #555;
    margin: 0;
}
.history-more-wrap {
    text-align: center;
    margin-top: 30px;
}

/* スマホの時は写真と文章を縦並びにして見やすくする微調整 */
/* 変更後 */
@media (max-width: 600px) {
    .history-row {
        flex-direction: column;
        gap: 15px;
    }
    .history-node-img-wrap {
        flex: none;
        width: 100%;
    }
    .history-node-img {
        height: 160px;
    }
    /* ★修正：文字のブロック（text）にだけ、スマホ時に20pxの左右余白を上品に持たせる */
    .history-node-text {
        padding: 0 20px;
    }
}

/* --- WORKSHOPセクション（1カラム・概要集約） --- */
.ws-summary-container {
    max-width: 700px;
    margin: 0 auto;
}
.ws-summary-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 25px;
}
.ws-summary-text {
    font-size: 0.95rem;
    line-height: 1.85;
    color: #555;
    margin-bottom: 35px;
}
.ws-btn-wrap {
    text-align: center;
}

/* --- ② オンラインショップとお問い合わせセクション内のコンテンツ（ボタン）を確実に中央配置 --- */
#online-shop, #contact {
    text-align: center;
}
/* --- プロフィール＆運営情報（CONTACT内） --- */
.profile-info {
    max-width: 500px;
    margin: 0 auto 40px; /* 下にあるボタンとの間に余白を取る */
    padding: 25px;
    background-color: #fcfcfc; /* ほんのり背景色をつけて区別する */
    border: 1px solid #EADFDF;
    border-radius: 4px;
    text-align: center;
}
.profile-title {
    font-size: 1rem;
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 15px;
    letter-spacing: 0.1em;
}
.profile-text {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-color);
    margin: 0;
}

/* ==========================================================================
   活動記録ページ専用設定 (Activities)
   ========================================================================== */
/* 見出しタグの追加補完（indexの指定にh4, h5, summaryを追加） */
h4, h5, summary { font-family: 'Shippori Mincho', serif; font-weight: normal; }

/* ヘッダー */
header { text-align: center; padding: 50px 20px 40px; background-color: #F3E8E8; border-bottom: 1px solid #EADFDF; }
header h1 { font-size: 2.2rem; margin: 0 0 10px 0; color: var(--accent-color); }

/* レイアウト・コンテナ */
.container { max-width: 900px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.sec-intro { padding: 60px 0; }
.sec-history { background-color: #F3E8E8; padding: 40px 0; }
.sec-workshop { background-color: var(--bg-color); padding: 50px 0; }

/* セクション共通 */
.section-header { text-align: center; border-bottom: 1px dashed #EADFDF; padding-bottom: 25px; margin-bottom: 50px; }
.section-title { font-size: 2rem; color: var(--accent-color); margin: 0 0 10px 0; letter-spacing: 0.1em; }
.section-intro { color: #666; font-size: 0.95rem; line-height: 1.8; margin: 0; }

/* 事業サマリー (Business Card) */
.business-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 0; }
.business-card { background: #fff; padding: 25px 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); text-align: center; border-top: 3px solid var(--accent-color); }
.business-card h3 { font-size: 1.1rem; margin: 0 0 10px 0; color: var(--accent-color); font-weight: bold; }
.business-card p { font-size: 0.85rem; color: #555; text-align: left; margin: 0; line-height: 1.6; }

/* フィードアイテム (記事リスト) */
.feed-item { display: flex; gap: 40px; margin-bottom: 60px; padding-bottom: 40px; border-bottom: 1px dashed #EADFDF; align-items: flex-start; }
.feed-item-fullwidth { display: flex; flex-direction: column; gap: 20px; margin-bottom: 60px; padding-bottom: 40px; border-bottom: 1px dashed #EADFDF; }
.feed-item:last-child, .feed-item-fullwidth:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.feed-content-top { display: flex; gap: 40px; align-items: flex-start; }
.feed-img-wrapper { flex: 0 0 35%; }
.feed-img-main { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.feed-content { flex: 1; }
.feed-meta { font-size: 0.9rem; color: #888; margin-bottom: 15px; display: flex; align-items: center; gap: 15px; font-family: 'Shippori Mincho', serif; }
    .feed-category { background-color: #F3E8E8; color: var(--accent-color); padding: 3px 12px; border-radius: 20px; font-size: 0.75rem; font-family: sans-serif; white-space: nowrap; }
.feed-title { font-size: 1.4rem; margin: 0 0 15px 0; color: var(--text-color); line-height: 1.4; }
.feed-text { font-size: 0.95rem; color: #555; margin: 0 0 20px 0; line-height: 1.8; }
.sub-text { font-size: 0.85rem; color: #888; margin-top: 10px; display: block; }
.link-text { color: var(--accent-color); text-decoration: underline; font-weight: bold; }

/* ワークショップ種類 */
.ws-type-wrapper { background-color: #fff; padding: 30px; border-radius: 8px; margin-bottom: 60px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.ws-type-wrapper h3 { text-align: center; color: var(--accent-color); margin-top: 0; margin-bottom: 10px; font-size: 1.4rem; }
.ws-type-note { text-align: center; font-size: 0.85rem; color: #888; margin-top: 0; margin-bottom: 30px; border-bottom: 1px dashed #EADFDF; padding-bottom: 15px; }
.ws-item { display: flex; gap: 25px; margin-bottom: 35px; align-items: flex-start; }
.ws-item:last-child { margin-bottom: 0; }
.ws-img { width: 200px; height: 200px; object-fit: cover; border-radius: 8px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.ws-info h4 { margin: 0 0 10px 0; font-size: 1.2rem; }
.ws-info p { font-size: 0.95rem; color: #555; margin: 0; line-height: 1.7; }

/* ヒストリータイムライン */
.history-event-wrapper { background-color: #F9F9F9; padding: 20px; border-radius: 8px; margin-top: 0; width: 100%; box-sizing: border-box; }
.history-event-year { font-size: 1.1rem; color: var(--accent-color); margin: 0 0 10px 0; border-bottom: 1px solid #EADFDF; padding-bottom: 5px; }
.history-event-row { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
.history-event-row:last-child { margin-bottom: 0; }
.history-event-list { flex: 1; font-size: 0.85rem; color: #555; list-style: none; padding: 0; margin: 0; }
.history-event-list li { margin-bottom: 8px; padding-left: 15px; position: relative; line-height: 1.4;}
.history-event-list li:last-child { margin-bottom: 0; }
.history-event-list li::before { content: '-'; position: absolute; left: 0; color: var(--accent-color); }
.history-event-list span.date { display: inline-block; min-width: 60px; font-weight: bold; color: var(--text-color); white-space: nowrap; }
.timeline-mini-gallery { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.timeline-mini-gallery img { width: 180px; height: 145px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

/* アコーディオン・ギャラリー */
.preview-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 15px; margin-bottom: 5px; }
.preview-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
details { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #EADFDF; }
summary { cursor: pointer; font-size: 0.9rem; color: var(--accent-color); font-weight: bold; outline: none; transition: opacity 0.3s; }
summary:hover { opacity: 0.7; }
.details-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 15px; }
.details-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.back-btn-container { text-align: center; margin: 40px 0 80px; }

/* ▼ インラインCSSから抽出したクラス ▼ */
.section-title-no-border { border: none; margin-bottom: 10px; padding-bottom: 0; }
.inline-link { font-size: 0.85rem; color: var(--accent-color); text-decoration: underline; }
.mb-0 { margin-bottom: 0 !important; }
.feed-item-no-border { border: none; padding-bottom: 0; }

/* レスポンシブ (スマホ用: activities専用追加分) */
@media (max-width: 768px) {
    .feed-item { flex-direction: column; gap: 20px; }
    .feed-content-top { flex-direction: column; gap: 20px; } 
    .feed-img-wrapper { width: 100%; }
    .ws-item { flex-direction: column; gap: 15px; text-align: center; }
    .ws-img { width: 100%; height: 200px; }
    .history-event-row { flex-direction: column; gap: 10px; }
    .timeline-mini-gallery { flex-direction: row; flex-wrap: wrap; }
    .timeline-mini-gallery img { width: 200px; height: 180px; }
 /* 変更箇所（上書き） */
    .business-summary { 
        display: flex; 
        flex-wrap: nowrap; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
        scroll-snap-type: x mandatory; 
        padding-bottom: 15px; 
        padding-right: 20px; /* ★追加：右端に抜け感を作り、見切れを強調する */
        scrollbar-width: none; 
    }
    .business-summary::-webkit-scrollbar { display: none; }
    .business-card { 
        flex: 0 0 80%; /* ★85%から80%に減らすことで、右端の次のカードがよりハッキリ見切れる */
        scroll-snap-align: center; 
    }
  }
/* ==========================================================================
   ACTIVITIES 事業説明カードのアイコン画像と見出しの横並び設定
   ========================================================================== */
/* アイコンと見出しを横並びにするための新しい枠 */
.card-header-wrap {
    display: flex;
    align-items: center; /* 上下中央揃え */
    gap: 15px;           /* アイコンとタイトルの間の隙間 */
    margin-bottom: 15px; /* 下の文章(pタグ)との間の余白 */
}

/* 画像自体のスタイル（前回の設定を調整） */
.card-icon-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    flex-shrink: 0;      /* 画像が横に潰れるのを防ぐ設定 */
}

/* ==========================================================================
   NEWSページ専用設定 (News)
   ========================================================================== */
/* ニュース用の幅調整（既存の.containerと併用します） */
.news-container { max-width: 700px; margin: 60px auto; }

/* ニュース記事カード */
.news-article { background: #fff; padding: 30px; border-radius: 8px; margin-bottom: 40px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.article-date { font-size: 0.85rem; color: var(--accent-color); font-weight: bold; display: block; margin-bottom: 10px; }
.article-title { font-size: 1.3rem; margin: 0 0 15px 0; border-bottom: 1px dashed #EADFDF; padding-bottom: 15px; }
.article-text { font-size: 0.95rem; color: #555; line-height: 1.8; }

/* ニュース記事内の画像（画像がない場合はこの要素自体を書かなくてOKです） */
.article-image { margin-bottom: 20px; text-align: center; }
.article-image img { 
    max-width: 95%; /* ★ここを100%から減らすと、左右に余白ができて全体が小さくなります */
    height: auto; 
    border-radius: 6px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
}

/* ==========================================================================
   採用事例ページ専用設定 (Cases)
   ========================================================================== */
/* 事例カードのグリッド（★確実に1カラムで中央配置） */
.cases-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 50px; 
    max-width: 900px; /* 横に広がりすぎないように制限 */
    margin: 40px auto 60px; /* 画面の中央に配置 */
}

/* 個別のカードデザイン */
.case-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    overflow: hidden;
    transition: transform 0.3s ease;
}
.case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* カード内の画像エリア（★横スクロールギャラリー仕様） */
.case-img-wrap {
    display: flex;
    gap: 10px; /* ★ここに追加します！写真と写真の間に10pxの隙間ができます */
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* ピタッと止まる */
    -webkit-overflow-scrolling: touch; 
    
    /* スクロールバーのカスタマイズ (Firefox用) */
    scrollbar-width: thin;
    scrollbar-color: #EADFDF transparent;
}

/* スクロールバーのカスタマイズ (Chrome, Safari, Edge用) */
.case-img-wrap::-webkit-scrollbar {
    height: 8px; /* スクロールバーの太さ */
    -webkit-appearance: none;
}
.case-img-wrap::-webkit-scrollbar-track {
    background: #f9f9f9; /* バーの背景を少しだけ見えやすく */
}
.case-img-wrap::-webkit-scrollbar-thumb {
    background: #EADFDF; /* バー本体の色 */
    border-radius: 4px;
}
.case-img-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color); /* マウスを乗せた時の色 */
}

.case-img-wrap img {
    flex: 0 0 auto; /* ★100%の強制引き伸ばしを解除し、写真本来の幅にします */
    height: 450px; /* ★枠の高さ（ここはお好みで400px〜550pxなど調整してください） */
    max-width: 100%; /* 万が一巨大な横長写真が来ても、カード幅を突き破らないための安全弁 */
    object-fit: contain; /* ★写真を一切切り取らず、指定した高さの中にすっぽり収めます */
    scroll-snap-align: center; /* ★横スクロール時、写真が枠の「真ん中」にピタッと止まるようにします */
}

/* カード内のテキストエリア */
.case-body {
    padding: 20px;
}
.case-title {
    font-size: 1.1rem;
    color: var(--accent-color);
    margin: 0 0 10px 0;
    font-weight: bold;
    border-bottom: 1px dashed #EADFDF;
    padding-bottom: 10px;
}
.case-comment {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* お問い合わせ・アクション誘導エリア */
.cases-action-area {
    background-color: #F3E8E8;
    padding: 40px 20px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 60px;
}
.cases-action-area h3 {
    margin-top: 0;
    color: var(--text-color);
    margin-bottom: 15px;
    font-size: 1.4rem;
}
.action-btn-wrap {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25px;
}

/* --- YouTube動画をレスポンシブにするための共通設定 --- */
.youtube-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9の比率を保つための魔法の数字 */
    border-radius: 8px; /* 他の写真と同じように角を丸くする */
    overflow: hidden; /* 角丸からはみ出た部分を隠す */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 他の写真と同じ影をつける */
}
.youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* ==========================================================================
   CASES 事例ビジュアル目次 (タイルアイコン)
   ========================================================================== */
.case-index-tiles {
    display: flex;
    flex-wrap: wrap;         /* 画面の幅が狭くなったら自動で折り返す設定（スマホ対応） */
    justify-content: center; /* タイル全体を中央寄せ */
    gap: 15px;               /* アイコン同士の隙間 */
    margin-top: 35px;        /* 上の文章との余白 */
}

.case-tile-link {
    display: block;
    width: 85px;             /* アイコンのサイズ（PC/スマホ共通で美しく見えるサイズ） */
    height: 85px;
    border-radius: 12px;     /* 上品な角丸スクエア */
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* 軽い影 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 浮き上がるアニメーション準備 */
}

.case-tile-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* 縦横比が違う写真も、歪ませずに正方形に切り抜く */
}
/* マウスを乗せた時（ホバー時）にフワッと浮き上がる動き */
.case-tile-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* ==================================================
   ワークショップギャラリー専用設定
================================================== */
/* 控えめな説明文 */
.ws-gallery-intro {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.8;
}

/* タイル状のグリッドレイアウト（最大幅800pxで中央配置） */
.ws-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    gap: 10px; /* 画像と画像の隙間 */
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* PC・タブレットサイズでは4列にする */
@media (min-width: 768px) {
    .ws-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
}

/* 個別の画像設定（5:4の比率で自動トリミング） */
.ws-gallery-item {
    width: 100%;
    aspect-ratio: 5 / 4; /* ここが黄金比の指定です */
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.ws-gallery-item:hover {
    opacity: 0.7; /* マウスを乗せると少し透ける */
}

/* ==================================================
   拡大表示（モーダル）用設定
================================================== */
#gallery-modal {
    display: none; /* 初期状態は隠しておく */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* 半透明の黒背景 */
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#gallery-modal img {
    max-width: 100%;
    max-height: 90vh; /* 画面の高さの90%に収める */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

#modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 35px;
    cursor: pointer;
    user-select: none;
}/* ==========================================================================
   設計士の声 (VOICE) 専用設定
   ========================================================================== */
/* セクション全体を開いた時にふわっと表示 */
@keyframes fadeInVoice {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.voice-section { 
    margin: 30px 0 60px; 
    background-color: #fff; 
    padding: 40px 30px; 
    border-radius: 8px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); 
    animation: fadeInVoice 1.2s ease-out forwards;
}

/* 巨大なダブルクォーテーションの透かし */
.voice-highlight-quote { position: relative; display: flex; gap: 25px; align-items: flex-start; margin-bottom: 25px; z-index: 1; }
.voice-highlight-quote::before {
    content: "“";
    position: absolute;
    top: -20px;
    left: 80px;
    font-size: 160px;
    font-family: 'Shippori Mincho', serif;
    color: var(--accent-color);
    opacity: 0.15; /* 透かしの濃さ */
    line-height: 1;
    z-index: 0;
}


/* アイコンと抜粋テキスト */
.voice-icons { 
    flex-shrink: 0; 
    display: flex; 
    position: relative; 
    width: 105px; /* 横幅を広げて重なりを浅く */
    height: 65px; 
}
.voice-icon-left { 
    width: 65px; /* サイズアップ */
    height: 65px; 
    border-radius: 50%; 
    overflow: hidden; 
    border: 3px solid #fff; 
    position: absolute; 
    left: 0; 
    z-index: 2; 
    background-color: #eee; 
}
.voice-icon-right { 
    width: 65px; /* サイズアップ */
    height: 65px; 
    border-radius: 50%; 
    overflow: hidden; 
    border: 3px solid #fff; 
    position: absolute; 
    left: 50px; /* 重なりすぎないように位置を調整 */
    z-index: 1; 
    background-color: #e5e5e5; 
}
.voice-icons img { width: 100%; height: 100%; object-fit: cover; }
.voice-quote-text { 
    margin-top: 5px; 
    position: relative; 
    z-index: 1; 
}

.voice-title { 
    font-family: 'Shippori Mincho', serif; 
    font-size: 1.1rem; 
    margin: 0 0 5px 0; 
    padding-left: 15px; 
    color: var(--accent-color); 
}

.voice-profile { 
    font-size: 0.85rem; 
    color: #888; 
    margin: 0 0 25px 0; 
    padding-left: 15px; 
}

.voice-quote-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    font-weight: normal; 
    font-family: 'Shippori Mincho', serif;
    font-size: 1rem; 
    line-height: 1.8; 
    color: var(--text-color); 
}
.voice-quote-list li { margin-bottom: 18px; } /* 行と行の間の余白を広めにとる */

/* アコーディオン設定 */
.voice-details { margin-top: 15px; }
.voice-summary { display: inline-block; cursor: pointer; font-size: 0.85rem; color: var(--accent-color); border: 1px solid var(--accent-color); padding: 6px 20px; border-radius: 20px; transition: all 0.3s ease; list-style: none; }
.voice-summary::-webkit-details-marker { display: none; }
.voice-summary:hover { background-color: var(--accent-color); color: #fff; }
.voice-details[open] .voice-summary { margin-bottom: 25px; background-color: var(--accent-color); color: #fff; pointer-events: none; } /* 開いたらボタンを押せなくする */
.voice-content { background-color: var(--bg-color); padding: 30px; border-radius: 8px; font-size: 0.9rem; line-height: 1.8; overflow: hidden; }

/* 会話の順番フェードインアニメーション */
@keyframes chatFadeUp {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}
.interview-line { 
    margin-bottom: 20px; 
    display: flex; 
    gap: 15px; 
    opacity: 0; 
}

.interview-line:last-child { margin-bottom: 0; }
.speaker { 
    font-weight: bold; 
    color: var(--accent-color); 
    flex-shrink: 0; 
    width: 75px; 
    position: relative; /* 写真を上に配置するための基準線 */
    padding-top: 32px;  /* 写真が上に乗るスペース（数値を調整） */
    font-size: 0.85rem; /* 名前を少しだけコンパクトにして上品に */
    text-align: center; /* 写真と名前のセンターを合わせる */
}
/* 名前の上に表示する顔写真の共通設定 */
.speaker::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 真ん中に配置 */
    width: 30px;  /* デザインを邪魔しない小さなサイズ */
    height: 30px; 
    border-radius: 50%; /* 丸く切り抜く */
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0,0,0,0.05); /* 境界線をうっすら馴染ませる */
}

/* 「ヤマウチ」という文字の時だけ、ヤマウチの写真を上に乗せる */
.speaker:contains-alternate, /* 互換性対策 */
.interview-line:not(.yamauchi-line) .speaker::before {
    background-image: url('../images/tsukahara.jpg'); /* 基本はツカハラさん */
}

/* ヤマウチのHTML行に確実に効かせるための指定 */
.interview-line:has(.speaker) .speaker::before {
    /* 会話のテキスト内容に合わせて画像を切り替える指示 */
}
/* 発言者の名前に応じて画像をピンポイントで切り替える */
.interview-line:nth-child(odd) .speaker::before { background-image: url('../images/yamauchi.jpg'); }
.interview-line:nth-child(even) .speaker::before { background-image: url('../images/tsukahara.jpg'); }

.interview-line p { margin: 0; }
.interview-link { margin-top: 20px; text-align: right; font-size: 0.85rem; opacity: 0; }

/* アコーディオンが開いたときのアニメーション発火 */
.voice-details[open] .interview-line { animation: chatFadeUp 0.6s ease forwards; }
.voice-details[open] .interview-link { animation: chatFadeUp 0.6s ease forwards; animation-delay: 5.4s; }

/* 各行の時間差設定 (0.4秒刻み) */
.voice-details[open] .interview-line:nth-child(1) { animation-delay: 0.2s; }
.voice-details[open] .interview-line:nth-child(2) { animation-delay: 0.6s; }
.voice-details[open] .interview-line:nth-child(3) { animation-delay: 1.0s; }
.voice-details[open] .interview-line:nth-child(4) { animation-delay: 1.4s; }
.voice-details[open] .interview-line:nth-child(5) { animation-delay: 1.8s; }
.voice-details[open] .interview-line:nth-child(6) { animation-delay: 2.2s; }
.voice-details[open] .interview-line:nth-child(7) { animation-delay: 2.6s; }
.voice-details[open] .interview-line:nth-child(8) { animation-delay: 3.0s; }
.voice-details[open] .interview-line:nth-child(9) { animation-delay: 3.4s; }
.voice-details[open] .interview-line:nth-child(10) { animation-delay: 3.8s; }
.voice-details[open] .interview-line:nth-child(11) { animation-delay: 4.2s; }
.voice-details[open] .interview-line:nth-child(12) { animation-delay: 4.6s; }
.voice-details[open] .interview-line:nth-child(13) { animation-delay: 5.0s; }

/* スマホ用レイアウト調整 */
@media (max-width: 600px) {
    .voice-highlight-quote { flex-direction: column; gap: 15px; }
    .voice-highlight-quote::before { left: 10px; top: -10px; font-size: 100px; }
    .voice-content { padding: 20px 15px; }
    .interview-line { flex-direction: column; gap: 5px; margin-bottom: 25px; }
    .speaker { font-size: 0.8rem; }
}