@charset "utf-8";

/* ==========================================================================
   top-modern.css  -  SUWAガラスの里 トップページ モダン化スタイル
   --------------------------------------------------------------------------
   2026-07-15 作成
   対象ブロック
     (1) イベント3件カード   ... #wpEventList.gc-events
     (2) 施設・サービスタイル ... .listBlk-A.gc-tiles
     (3) 共通セクション見出し ... .gc-sectionHead

   設計方針
     - common.css / common2.css / top-a.css の「後」に読み込むこと。
     - 上書きは必ず .gc-events / .gc-tiles / .gc-sectionHead を含むセレクタで行う。
       → 既存CSSは無編集。他ページの .listBlk-A / .catch_txt には一切影響しない。
     - Webフォントは読み込まない（表示速度を落とさないため OS 標準の明朝を使用）。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */

:root {
    --gc-ink: #231207;
    /* 既存ブランドの濃茶（見出し帯で使われていた色） */
    --gc-ink-sub: #6b5b4e;
    --gc-green: #15513f;
    /* News&Topics のタグと同じ深緑＝サイト内アクセント */
    --gc-green-lt: #00a678;
    --gc-paper: #f7f4ef;
    --gc-line: #e8e3da;

    --gc-radius: 14px;
    --gc-shadow: 0 1px 2px rgba(35, 18, 7, .05), 0 10px 30px -14px rgba(35, 18, 7, .22);
    --gc-shadow-h: 0 2px 6px rgba(35, 18, 7, .08), 0 24px 46px -18px rgba(35, 18, 7, .34);
    --gc-ease: cubic-bezier(.2, .7, .2, 1);

    --gc-serif: "Yu Mincho", YuMincho, "游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "Noto Serif JP", serif;
    --gc-latin: "Avenir Next", Futura, "Century Gothic", "Trebuchet MS", sans-serif;
}


/* --------------------------------------------------------------------------
   2. セクション見出し（EVENT / FACILITIES 共通）
   -------------------------------------------------------------------------- */

.gc-sectionHead {
    text-align: center;
    margin: 0 auto 32px;
    padding: 0;
    background: none;
    border: 0;
}

.gc-sectionHead .gc-en {
    display: block;
    font-family: var(--gc-latin);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .34em;
    text-indent: .34em;
    color: var(--gc-green);
    line-height: 1;
    margin-bottom: 12px;
}

.gc-sectionHead .gc-ja {
    display: block;
    font-family: var(--gc-serif);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: .12em;
    text-indent: .12em;
    line-height: 1.4;
    color: var(--gc-ink);
}

.gc-sectionHead::after {
    content: "";
    display: block;
    width: 32px;
    height: 1px;
    margin: 16px auto 0;
    background: var(--gc-green);
}

.gc-sectionHead--tiles {
    margin-top: 84px;
}

@media only screen and (max-width: 719px) {
    .gc-sectionHead {
        margin-bottom: 24px;
    }

    .gc-sectionHead .gc-ja {
        font-size: 21px;
    }

    .gc-sectionHead--tiles {
        margin-top: 56px;
    }
}


/* --------------------------------------------------------------------------
   2-5. News & Topics（WordPress /news/ カテゴリ「お知らせ」最新5件）
   　 DOM は JS 生成：
   　 ul.wp-news > li.wp-news__item > a.wp-news__link
   　                > span.wp-news__meta(time.wp-news__date + span.wp-news__tag)
   　                + span.wp-news__title
   　 旧：head 内のインライン <style>（2026-06-09）で装飾していた枠なしリスト
   　 新：イベント／タイルと同じカード言語（角丸14px・影・明朝タイトル・右に矢印）
   　     見出しは .gc-sectionHead に統一（NEWS & TOPICS / お知らせ）
   -------------------------------------------------------------------------- */

.news_area.gc-newsBlk {
    margin: 54px auto 0;
}

.news_area.gc-newsBlk .inner {
    width: 94%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 5-1. リストを1枚のカードに収める */

#divBlogSystemHeadline.gc-news {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius);
    box-shadow: var(--gc-shadow);
    overflow: hidden;
}

#divBlogSystemHeadline.gc-news .wp-news {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 0;
}

#divBlogSystemHeadline.gc-news .wp-news__item {
    border-bottom: 1px solid #f1ede6;
}

#divBlogSystemHeadline.gc-news .wp-news__item:last-child {
    border-bottom: 0;
}

/* 5-2. 1行＝日付 / タグ / タイトル / 矢印 */

#divBlogSystemHeadline.gc-news .wp-news__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 19px 24px;
    text-decoration: none;
    border-bottom: 0;
    color: inherit;
    transition: background-color .3s var(--gc-ease);
}

#divBlogSystemHeadline.gc-news .wp-news__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

#divBlogSystemHeadline.gc-news .wp-news__date {
    font-family: var(--gc-latin);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #9c9186;
    white-space: nowrap;
}

#divBlogSystemHeadline.gc-news .wp-news__tag {
    font-size: 11px;
    line-height: 1;
    color: var(--gc-green);
    background: #fff;
    border: 1px solid var(--gc-green);
    border-radius: 999px;
    padding: 5px 13px;
    white-space: nowrap;
    transition: background-color .3s var(--gc-ease), color .3s var(--gc-ease);
}

#divBlogSystemHeadline.gc-news .wp-news__title {
    min-width: 0;
    font-family: var(--gc-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: .03em;
    color: var(--gc-ink);
    transition: color .3s var(--gc-ease);
}

/* 矢印（他のカードと同じ SVG。ホバーで右へスライド） */
#divBlogSystemHeadline.gc-news .wp-news__link::after {
    content: "";
    width: 6px;
    height: 10px;
    flex: none;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%2010'%3E%3Cpath%20d='M1%201l4%204-4%204'%20fill='none'%20stroke='%2315513f'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center / 6px 10px;
    transition: transform .35s var(--gc-ease);
}

/* 5-3. ホバー */

#divBlogSystemHeadline.gc-news .wp-news__link:hover {
    background: #faf8f5;
}

#divBlogSystemHeadline.gc-news .wp-news__link:hover .wp-news__title {
    color: var(--gc-green);
}

#divBlogSystemHeadline.gc-news .wp-news__link:hover .wp-news__tag {
    background: var(--gc-green);
    color: #fff;
}

#divBlogSystemHeadline.gc-news .wp-news__link:hover::after {
    transform: translateX(4px);
}

/* 5-4. レスポンシブ（SPは 日付＋タグ を上段、タイトルを下段に折り返す） */

@media only screen and (max-width: 719px) {
    .news_area.gc-newsBlk {
        margin-top: 34px;
    }

    #divBlogSystemHeadline.gc-news .wp-news__link {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 14px;
        padding: 15px 16px;
    }

    #divBlogSystemHeadline.gc-news .wp-news__meta {
        grid-column: 1;
        grid-row: 1;
    }

    #divBlogSystemHeadline.gc-news .wp-news__title {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 14px;
    }

    #divBlogSystemHeadline.gc-news .wp-news__link::after {
        grid-column: 2;
        grid-row: 1;
    }
}


/* --------------------------------------------------------------------------
   3. イベントカード（WordPress /news/ カテゴリ「イベント」最新3件）
   　 DOM は JS 生成： <a.wp-event__link> > <p.title> + <img>
   　 → CSS の order で「画像が上・タイトルが下」に並べ替える（JS は無編集）
   -------------------------------------------------------------------------- */

/* 3-1. 外枠（.squareTxt / .service_catch の既存装飾を解除して素の器にする） */

.squareTxt.gc-eventBlk {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 46px auto 0;
}

.squareTxt.gc-eventBlk .service_catch {
    display: block;
    width: 94%;
    max-width: 1200px;
    background: transparent;
    padding: 0;
    margin: 0 auto;
}

.squareTxt.gc-eventBlk .catch_txt.wp-event-col {
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 0;
}

.squareTxt.gc-eventBlk .newsArea {
    margin: 0;
    padding: 0;
}

/* 3-2. カードグリッド */

#wpEventList.gc-events {
    display: grid;
    /* minmax(0,1fr)：バナー画像の固有幅で列が広がるのを防ぐ */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
    justify-content: initial;
    flex-wrap: nowrap;
}

/* 3-3. カード本体 */

#wpEventList.gc-events .wp-event__link {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--gc-shadow);
    animation: gcRise .7s var(--gc-ease) backwards;
    transition:
        transform .5s var(--gc-ease),
        box-shadow .5s var(--gc-ease),
        border-color .5s var(--gc-ease);
}

#wpEventList.gc-events .wp-event__link:nth-child(2) {
    animation-delay: .09s;
}

#wpEventList.gc-events .wp-event__link:nth-child(3) {
    animation-delay: .18s;
}

@keyframes gcRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 3-4. バナー画像
       器の高さは 16:7 で統一し、cover で枠いっぱいに表示する（2026-07-29 顧客要望）。
       縦長バナーは上下が切り取られる点に注意。 */

#wpEventList.gc-events .wp-event__link img {
    order: 1;
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    background: var(--gc-paper);
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--gc-line);
}

/* 3-5. ガラスの反射光（きらっ）演出は 2026-07-24 顧客要望で削除 */

/* 3-6. タイトル（旧：20px＋下線 → 明朝の見出しへ） */

#wpEventList.gc-events .wp-event__link .title {
    order: 2;
    margin: 0;
    padding: 18px 18px 18px;
    border: 0;
    border-bottom: 0;
    font-family: var(--gc-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: .04em;
    color: var(--gc-ink);
    text-align: left;
    transition: color .3s var(--gc-ease);
}

#wpEventList.gc-events .wp-event__link:hover .title {
    color: var(--gc-green);
}

/* 3-7. カード下部の導線（矢印は SVG。ホバーで右へスライド） */

#wpEventList.gc-events .wp-event__link::after {
    content: "詳しく見る";
    order: 3;
    margin-top: auto;
    padding: 13px 34px 15px 18px;
    border-top: 1px solid #f1ede6;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--gc-green);
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%2010'%3E%3Cpath%20d='M1%201l4%204-4%204'%20fill='none'%20stroke='%2315513f'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 6px 10px;
    transition: background-position .35s var(--gc-ease);
}

#wpEventList.gc-events .wp-event__link:hover::after {
    background-position: right 13px center;
}

/* 3-8. ホバー */

#wpEventList.gc-events .wp-event__link:hover {
    transform: translateY(-5px);
    box-shadow: var(--gc-shadow-h);
    border-color: #ddd6c9;
}

/* 3-9. レスポンシブ */

@media only screen and (max-width: 719px) {
    .squareTxt.gc-eventBlk {
        margin-top: 34px;
    }

    #wpEventList.gc-events {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    #wpEventList.gc-events .wp-event__link {
        width: auto;
        margin: 0;
    }

    #wpEventList.gc-events .wp-event__link .title {
        font-size: 15px;
        padding: 15px 15px 15px;
    }
}


/* --------------------------------------------------------------------------
   4. 施設・サービスタイル（.listBlk-A.gc-tiles）
   　 DOM： <section> > <a.inner> > h3 + p.pic + p.txt + p.btn
   　 → 旧：茶色の帯見出しが画像の上／新：画像を主役にして見出しを画像内へ重ねる
   -------------------------------------------------------------------------- */

/* 4-1. グリッド */

.listBlk-A.gc-tiles {
    display: grid;
    /* 1fr ではなく minmax(0,1fr)。1fr の最小値は auto（＝中身の最小幅）のため、
       画像の固有幅（380px）に列が押し広げられてカードが親からはみ出す。 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 22px;
    width: 94%;
    max-width: 1200px;
    margin: 0 auto 90px;
    justify-content: initial;
    flex-flow: initial;
}

/* .cf（クリアフィックス）の擬似要素がグリッドの升目にならないよう無効化 */
.listBlk-A.gc-tiles::before,
.listBlk-A.gc-tiles::after {
    content: none;
    display: none;
}

.listBlk-A.gc-tiles>section {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    flex: none;
    width: auto;
    min-width: 0;
    display: block;
    vertical-align: baseline;
}

/* 4-2. カード本体（画像／本文／導線 の3段グリッド。高さを揃える） */

.listBlk-A.gc-tiles .inner {
    position: relative;
    display: grid;
    /* 同上：minmax(0,1fr) にしないと画像の固有幅で列が広がりカードを突き破る */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius);
    overflow: hidden;
    box-shadow: var(--gc-shadow);
    text-decoration: none;
    transition:
        transform .5s var(--gc-ease),
        box-shadow .5s var(--gc-ease),
        border-color .5s var(--gc-ease);
}

.listBlk-A.gc-tiles .inner:hover {
    transform: translateY(-6px);
    box-shadow: var(--gc-shadow-h);
    border-color: #ddd6c9;
    background: #fff;
}

/* 4-3. 画像（1段目） */

.listBlk-A.gc-tiles .pic {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #fff;
}

.listBlk-A.gc-tiles .pic img {
    display: block;
    width: 100%;
    height: 100%;
    /* このサイトは reset.css で box-sizing 未指定＝content-box のため、
       下のロゴ用 padding が width/height:100% に加算されてはみ出す。border-box で固定する。 */
    box-sizing: border-box;
    object-fit: cover;
    padding: 0;
    transition: transform .9s var(--gc-ease);
}

/* ロゴ画像（SUWAプレミアム / ArTIST SqUARE）は写真ではないので切り抜かず全体表示。
   見出し帯を廃止したため、上下の余白を均等にして中央に配置（2026-07-15）。
   背景は #fff で統一する：as_logo.png はアルファチャンネルを持たない24bit PNGで
   白背景が焼き込まれており、紙色にすると白い四角が浮いてしまうため。 */
.listBlk-A.gc-tiles .pic img[src*="_logo"] {
    object-fit: contain;
    padding: 11% 14%;
    background: #fff;
}

/* ガラスの反射光（きらっ）演出は 2026-07-24 顧客要望で削除 */

.listBlk-A.gc-tiles .inner:hover .pic img {
    transform: scale(1.07);
}

.listBlk-A.gc-tiles .inner:hover .pic img[src*="_logo"] {
    transform: scale(1.04);
}

/* 4-4. 見出し（2026-07-15 顧客指示：画像に重ねる白文字と黒グラデーションを全12枚で廃止）
       施設名はカード下部のリンク行に出ているため、見た目としては不要。
       ただし h3 を削除・display:none にすると見出し構造がSEO・音声読み上げから失われるため、
       「目には見えないが検索エンジン・スクリーンリーダーには残る」標準手法で隠す。 */

.listBlk-A.gc-tiles h3 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    background: none;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 4-5. 説明文（2段目・1fr なので高さが揃う） */

.listBlk-A.gc-tiles .txt {
    grid-row: 2;
    grid-column: 1;
    position: static;
    margin: 0;
    padding: 15px 16px 12px;
    min-height: 0;
    font-size: 13px;
    line-height: 1.85;
    letter-spacing: .02em;
    color: var(--gc-ink-sub);
    text-align: left;
}

/* 4-6. 導線（3段目・矢印は SVG。旧 arrow-green.png の :after は無効化） */

.listBlk-A.gc-tiles .btn {
    grid-row: 3;
    grid-column: 1;
    position: relative;
    margin: 0;
    padding: 13px 34px 15px 16px;
    border-top: 1px solid #f1ede6;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--gc-green);
    text-align: left;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%2010'%3E%3Cpath%20d='M1%201l4%204-4%204'%20fill='none'%20stroke='%2315513f'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 6px 10px;
    transition: background-position .35s var(--gc-ease), color .3s var(--gc-ease);
}

.listBlk-A.gc-tiles .btn::after {
    content: none;
    display: none;
    background: none;
}

.listBlk-A.gc-tiles .inner:hover .btn {
    background-position: right 11px center;
}

/* 4-7. レスポンシブ
       旧CSS（719px 以下でサムネイルを position:absolute の横並びリストに変える指定）は
       上のセレクタで打ち消し済み。ここでは列数と文字サイズだけ調整する。 */

@media only screen and (max-width: 1099px) {
    .listBlk-A.gc-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 719px) {
    .listBlk-A.gc-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
        width: 92%;
        margin-bottom: 56px;
    }

    .listBlk-A.gc-tiles .txt {
        font-size: 12px;
        line-height: 1.75;
        padding: 11px 11px 10px;
    }

    .listBlk-A.gc-tiles .btn {
        font-size: 11px;
        padding: 10px 26px 12px 11px;
        background-position: right 11px center;
    }

    .listBlk-A.gc-tiles .inner:hover .btn {
        background-position: right 8px center;
    }
}


/* --------------------------------------------------------------------------
   5. 下段インフォメーション3ボックス（.flexbox_top_u.gc-info）
   　 DOM： .item2（オンラインストア: a > h3 + img + p）
   　      .item_m ×2（h2 > span, p, .section_btn2 > a.plan_btn, ul）
   　 旧：細いグレー枠＋緑の破線見出し＋黒に近いピルボタン（高さもバラバラ）
   　 新：上のタイル／イベントと同じカード言語（角丸14px・影・明朝見出し・深緑ボタン）
   　 ※ .item_m / .plan_btn は attention.php 等の他ページでも使用中のため、
   　   必ず .gc-info を含むセレクタでのみ上書きする。
   -------------------------------------------------------------------------- */

/* 5-1. グリッド（3枚の高さを自動で揃える） */

.flexbox_top_u.gc-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    width: 94%;
    max-width: 1200px;
    margin: 0 auto 90px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

/* 5-2. カード共通 */

.flexbox_top_u.gc-info>div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 24px 22px 22px;
    background: #fff;
    border: 1px solid var(--gc-line);
    border-radius: var(--gc-radius);
    box-shadow: var(--gc-shadow);
    flex: none;
    overflow: hidden;
    transition:
        transform .5s var(--gc-ease),
        box-shadow .5s var(--gc-ease),
        border-color .5s var(--gc-ease);
}

/* 5-3. 見出し（緑の破線 → 明朝＋短い深緑のルール） */

.flexbox_top_u.gc-info h2,
.flexbox_top_u.gc-info>div h3 {
    position: relative;
    margin: 0 0 16px;
    padding: 0 0 13px;
    border: 0;
    border-bottom: 0;
    font-family: var(--gc-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .06em;
    color: var(--gc-ink);
}

.flexbox_top_u.gc-info h2::after,
.flexbox_top_u.gc-info>div h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 1px;
    background: var(--gc-green);
}

.flexbox_top_u.gc-info h2 span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* 5-4. 本文 */

.flexbox_top_u.gc-info>div p {
    margin: 0 0 8px;
    padding: 0;
    font-size: 14px;
    line-height: 1.85;
    letter-spacing: .02em;
    color: var(--gc-ink-sub);
}

/* 注釈（※〜）は元のDOMではボタンの「後ろ」にあるが、それだと2枚のカードで
   ボタンの高さが揃わない。order で注釈を前に出し、ボタンを常にカード最下部へ揃える。 */
.flexbox_top_u.gc-info .item_m ul {
    order: -1;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1.8;
    color: #8a7d72;
}

/* header.css にグローバルな .box{margin:20px auto 50px; padding:10px; max-width:1000px}
   があり、その margin-bottom:50px がカード下部に空白を作ってボタンの高さを狂わせる。
   ここで打ち消す（header.css 側は他ページで使用中のため触らない）。 */
.flexbox_top_u.gc-info .item_m .box {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0;
    padding: 0;
    max-width: none;
}

/* 5-5. ボタン（黒に近いピル → 深緑。矢印アニメーションは既存 .plan_btn の指定を活かす） */

.flexbox_top_u.gc-info .section_btn2 {
    margin: auto 0 0;
    padding: 18px 0 0;
}

.flexbox_top_u.gc-info .plan_btn {
    min-width: 0;
    margin: 0;
    padding: 12px 46px 12px 18px;
    background-color: var(--gc-green);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    box-shadow: 0 6px 16px -8px rgba(21, 81, 63, .8);
    transition: background-color .35s var(--gc-ease), box-shadow .35s var(--gc-ease), transform .35s var(--gc-ease);
}

.flexbox_top_u.gc-info .plan_btn:hover {
    opacity: 1;
    background-color: #0f3d2f;
    box-shadow: 0 10px 22px -8px rgba(21, 81, 63, .95);
    transform: translateY(-2px);
}

/* 5-6. オンラインストア（画像を上・見出しを下へ並べ替え＝イベントカードと同じ構成） */

.flexbox_top_u.gc-info .item2 {
    padding: 0;
}

.flexbox_top_u.gc-info .item2>a {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.flexbox_top_u.gc-info .item2 img {
    order: 1;
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    /* 元画像 586x220（約8:3）。ほぼ切り抜かずに収まる比率を指定 */
    aspect-ratio: 8 / 3;
    object-fit: cover;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--gc-line);
    transition: transform .9s var(--gc-ease);
}

.flexbox_top_u.gc-info .item2 h3 {
    order: 2;
    margin: 0 22px 14px;
    padding: 20px 0 13px;
}

.flexbox_top_u.gc-info .item2 p {
    order: 3;
    margin: 0;
    padding: 0 22px 22px;
}

/* ガラスの反射光（きらっ）演出は 2026-07-24 顧客要望で削除 */

.flexbox_top_u.gc-info .item2:hover {
    transform: translateY(-6px);
    box-shadow: var(--gc-shadow-h);
    border-color: #ddd6c9;
}

.flexbox_top_u.gc-info .item2:hover img {
    transform: scale(1.06);
}

.flexbox_top_u.gc-info .item2:hover h3 {
    color: var(--gc-green);
}

/* 5-6b. 「詳細はこちら」ボタン（3カード共通・カード最下部に揃える・深緑ピル＋矢印） */
.flexbox_top_u.gc-info .item2 .gc-card__btn {
    order: 4;
    align-self: flex-start;
    margin: auto 22px 22px;
    position: relative;
    display: inline-block;
    padding: 12px 44px 12px 20px;
    background-color: var(--gc-green);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    box-shadow: 0 6px 16px -8px rgba(21, 81, 63, .8);
    transition: background-color .35s var(--gc-ease), box-shadow .35s var(--gc-ease), transform .35s var(--gc-ease);
}
.flexbox_top_u.gc-info .item2 .gc-card__btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform .35s var(--gc-ease);
}
.flexbox_top_u.gc-info .item2:hover .gc-card__btn {
    background-color: #0f3d2f;
    box-shadow: 0 10px 22px -8px rgba(21, 81, 63, .95);
}
.flexbox_top_u.gc-info .item2:hover .gc-card__btn::after {
    transform: rotate(45deg) translate(2px, -2px);
}

/* 5-7. レスポンシブ */

@media only screen and (max-width: 959px) {
    .flexbox_top_u.gc-info {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-bottom: 56px;
    }

    .flexbox_top_u.gc-info>div {
        padding: 20px 18px 18px;
    }

    .flexbox_top_u.gc-info .item2 {
        padding: 0;
    }

    .flexbox_top_u.gc-info h2,
    .flexbox_top_u.gc-info>div h3 {
        font-size: 16px;
    }
}


/* --------------------------------------------------------------------------
   6. アクセシビリティ
   -------------------------------------------------------------------------- */

/* キーボード操作時のフォーカス可視化 */
#wpEventList.gc-events .wp-event__link:focus-visible,
.listBlk-A.gc-tiles .inner:focus-visible {
    outline: 2px solid var(--gc-green);
    outline-offset: 3px;
}

/* OS 側で「視差効果を減らす」を有効にしている利用者には動きを出さない */
@media (prefers-reduced-motion: reduce) {

    #divBlogSystemHeadline.gc-news .wp-news__link,
    #divBlogSystemHeadline.gc-news .wp-news__link::after,
    #divBlogSystemHeadline.gc-news .wp-news__title,
    #divBlogSystemHeadline.gc-news .wp-news__tag,
    #wpEventList.gc-events .wp-event__link,
    #wpEventList.gc-events .wp-event__link::before,
    #wpEventList.gc-events .wp-event__link::after,
    #wpEventList.gc-events .wp-event__link .title,
    .listBlk-A.gc-tiles .inner,
    .listBlk-A.gc-tiles .pic img,
    .listBlk-A.gc-tiles .pic::after,
    .listBlk-A.gc-tiles .btn,
    .flexbox_top_u.gc-info>div,
    .flexbox_top_u.gc-info .item2 img,
    .flexbox_top_u.gc-info .item2>a::before,
    .flexbox_top_u.gc-info .item2 .gc-card__btn,
    .flexbox_top_u.gc-info .plan_btn {
        animation: none !important;
        transition: none !important;
    }

    #wpEventList.gc-events .wp-event__link:hover,
    .listBlk-A.gc-tiles .inner:hover,
    .flexbox_top_u.gc-info .item2:hover,
    .flexbox_top_u.gc-info .plan_btn:hover {
        transform: none;
    }

    .listBlk-A.gc-tiles .inner:hover .pic img,
    .flexbox_top_u.gc-info .item2:hover img {
        transform: none;
    }
}