@charset "UTF-8";

        #fgskpwd .container {
            max-width: 770px;
            margin: 0 auto;
            border-radius: 0; /* 角丸なし */
            box-sizing: border-box;
            background: #f1ebdf;
            color: #2d2d2d;
        }

        /* キービジュアルのレスポンシブスタイル */
        #fgskpwd .campaign-kv {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 無料値引き画像のスタイル（幅60%・中央寄せ） */
        #fgskpwd .campaign-banner{
            background: #252424;
            padding: 10px;
        }

        #fgskpwd .campaign-banner img {
            width: 80%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        /* キャンペーン紹介テキストのスタイル */
        #fgskpwd .campaign-intro {
            text-align: center;
            color: #fffdfa;
            padding: 15px 10px 5px 10px;
            line-height: 1.6;
        }

        #fgskpwd .campaign-intro-main {
            font-size: 20px;
            font-weight: bold;
            color: #e0a92b;
            margin-bottom: 8px;
        }

        #fgskpwd .campaign-intro-sub {
            font-size: 14px;
            color: #e0e0e0;
            margin: 0;
        }

        /* キャンペーン期間 */
        #fgskpwd .campaign-header {
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            padding: 10px 15px 15px 15px;
            color: #fffdfa;
        }

        /* 見出しのスタイル */
        #fgskpwd .section-title-bar {
            background-color: #a67c1e; 
            color: #fff;
            text-align: center;
            padding: 12px 10px;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px; /* 絵文字とテキストの間隔 */
            box-sizing: border-box;
        }

        /* 虫眼鏡イラストアイコン用のスタイル設定 */
        #fgskpwd .title-icon {
            height: 24px;         /* 文字のサイズ（20px）に合わせて綺麗に見える高さに調整 */
            width: auto;
            display: inline-block;
            vertical-align: middle; /* テキストと縦方向の中央を合わせる */
        }

        /* スクロールインジケータ（フェード）用の親要素 */
        #fgskpwd .tag-campaign-outer {
            position: relative;
            background-color: #f0eee9;
            padding: 15px 0;
            margin-bottom: 30px;
            box-shadow: 0 4px 20px rgba(166, 124, 30, 0.12); 
        }

        /* 右側にスクロールが続くことを示すグラデーションマスク */
        #fgskpwd .tag-campaign-outer::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 100%;
            background: linear-gradient(to right, rgba(240, 238, 233, 0) 0%, rgba(240, 238, 233, 0.95) 100%);
            pointer-events: none; /* 下のボタンをクリックできるようにする */
            z-index: 2;
        }

        /* タグエリア全体を囲む背景 */
        #fgskpwd .tag-campaign-wrapper {
            overflow-x: auto;          /* この親要素自体で横スクロールを受け止める */
            -webkit-overflow-scrolling: touch; 
            padding: 0 20px 8px 15px;  /* 右側に余裕を持たせる */
        }

        /* 上下の並び順を崩さず、画像通りの2段並列を作る */
        #fgskpwd .tag-scroll-row {
            display: flex;
            flex-direction: column;    /* 縦に並べる（1つ分のインナー塊を縦積み） */
            gap: 12px;                 /* 1段目と2段目の間の隙間 */
            width: max-content;        /* 中身の総幅に応じて横にどこまでも広げる */
            padding-right: 20px;       /* フェードアウトで見えなくなる分の余白 */
        }
        
        /* 1段目・2段目のそれぞれの横一列の並び */
        #fgskpwd .tag-line {
            display: flex;
            gap: 10px; /* タグ同士の左右の隙間 */
        }

        /* スクロールバーのデザイン */
        #fgskpwd .tag-campaign-wrapper::-webkit-scrollbar {
            height: 5px; /* 横スクロールバーの太さを少し太く */
        }
        #fgskpwd .tag-campaign-wrapper::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.03);
            border-radius: 3px;
        }
        #fgskpwd .tag-campaign-wrapper::-webkit-scrollbar-thumb {
            background: rgba(166, 124, 30, 0.4); /* キャンペーンのゴールドに合わせた半透明バー */
            border-radius: 3px;
        }

        /* 白背景になじむように未選択時のタグボタンのスタイルを調整 */
        #fgskpwd .tag-btn {
            /* 白背景と同化しないよう薄いグレーの枠線を追加 */
            border: 1px solid #d2d2d6;    
            /* 清潔感と落ち着きのあるプレミアムホワイトグレー */
            background-color: #f4f4f7; 
            /* 引き締まったダークグラファイトの文字色 */
            color: #242426;               
            padding: 8px 18px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.2s ease;
            height: 36px;
            box-sizing: border-box;
            white-space: nowrap; /* ボタン内の文字を改行させない */
            flex-shrink: 0;
        }

        /* 白背景用のタグ選択（アクティブ）時のスタイル */
        #fgskpwd .tag-btn.active {
            background-color: #111112;    
            color: #fff;
            /* 光彩（シャドウ） */
            box-shadow: 0 2px 7px rgba(78, 77, 77, 0.6);
            border-color: #111112;
        }

        /* 作品リストエリア（初期値：1行に3つ） */
        #fgskpwd .work-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            padding: 0 10px;
        }
        
        /* 作品カード */
        #fgskpwd .work-item {
            overflow: hidden;
            display: flex;
            flex-direction: column;    /* 縦並びのレイアウトに設定 */
            height: 100%;
            transition: transform 0.2s ease;
        }
        #fgskpwd .work-item:hover {
            transform: translateY(-2px);
        }

        /* 非表示用クラス */
        #fgskpwd .work-item.is-hidden {
            display: none;
        }
        
        /* 書影リンクエリア */
        #fgskpwd .work-link {
            text-decoration: none;
            display: block;
            width: 100%;
        }
        
        /* 書影画像の表示設定 */
        #fgskpwd .work-thumbnail {
            background-color: transparent; /* 画像が足りない部分の余白背景をなし（透明）にする */
            aspect-ratio: 3 / 4;    /* ワイヤーフレームの縦横比を維持 */
            width: 100%;
            display: block;
            object-fit: contain;    /* 画像を切り取らず、枠内に綺麗に収める（足りない部分は余白） */
        }

        /* 作品番号と所持タグエリア */
        #fgskpwd .work-info {
            font-size: 14px;
            color: #383a3d;
            padding: 10px 8px; 
            text-align: left;
            box-sizing: border-box;
        }
        
        /* 無料立読みボタン */
        #fgskpwd .work-btn {
            background-color: #a67c1e;    
            color: #fff;
            text-align: center;
            transition: background 0.2s;
            margin-top: auto; /* 上のコンテンツが伸びても、ボタンを常に一番下に押し下げる */
        }

        #fgskpwd .work-btn a{
            display: block;
            padding: 12px;
            font-size: 14px;
            font-weight: bold;
            text-decoration: none;
        }

        #fgskpwd .work-btn:hover {
            background-color: #1e2229;
        }

        #fgskpwd .work-btn a:hover{
            text-decoration: none;
        }

        /* 該当作品なしメッセージ */
        #noMatchMessage {
            display: none;
            text-align: center;
            margin: 0 10px;
            padding: 60px 0;
            color: #a67c1e; 
            font-size: 16px;
            font-weight: bold;
            border: 2px dashed rgba(212, 175, 55, 0.4); 
            border-radius: 0; 
        }

        /* 最下部コピーライト */
        #fgskpwd .campaign-footer-copyright {
            margin-top: 30px;
            padding-top: 20px;
            padding-bottom: 20px;
            border-top: 1px solid rgba(212, 175, 55, 0.4);
            font-size: 10px;
            line-height: 1.6;
            color: #a67c1e; 
            text-align: center;
        }

        /* レスポンシブ対応（480px未満のタイミングで1行2つに切替） */
        @media (max-width: 480px) {
            #fgskpwd .work-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px; /* スマホ画面に合わせて隙間を少し狭く */
            }
            #fgskpwd .section-title-bar {
                font-size: 17px; /* スマホ画面では見出しの文字サイズを少し微調整 */
            }
            #fgskpwd .campaign-intro-main {
                font-size: 17px; /* スマホ画面用のメインタイトル縮小 */
            }
            #fgskpwd .campaign-intro-sub {
                font-size: 12px;
            }
        }