@charset "utf-8";
/* ==========================================================
   U-AUDIO 新デザインCSS v5.11
   ----------------------------------------------------------
   適用範囲：.u-v2 が付いた要素配下のみ
   適用方法：既存uboy.cssの後に読み込み（上書き）
   
   【v5.11 修正内容】
   - v5.10で #lineup の横幅が 33,554,200px まで暴走する問題を解消
     原因：.u-v2#main-col に width: 100% !important を付けたことで、
     既存 #main-col { width: 770px } と競合＋table-layoutの特殊計算で暴走
   - 対処：.u-v2#main-col の width 指定を撤回（既存770pxに任せる）
     #contents-top と #lineup の width: 100% !important は残す
   
   【v5.10 修正内容】
   - 既存uboy.cssの #contents-top, #lineup の width:510px を解除
   - Recommended 4列グリッドを強制適用
   - ヘッダー padding を揃える
   - h4.recommend の黒背景を打ち消し
   
   【v5.8 修正内容】
   - Swiperを横幅基準に変更
   - 左メニューとメインエリアの間の余白を二重指定で確実に
   
   【v5.7 修正内容】
   - Webフォント強制適用撤回
   - 見出しはGeorgiaに戻す
   - Swiper矢印サイズ正常化
   
   【v5.6 修正内容】
   - Swiperの高さ上限とobject-fit: coverで画像の縦方向肥大化を抑制
   - Noto Serif JPの強制適用（→ v5.7で撤回）
   
   【v5.5 修正内容】
   - 全体フォントを Noto Serif JP に統一（→ v5.7で撤回）
   - ヘッダーのグローバルナビを右端まで展開
   - 左メニューとメインエリアの間にスペース確保
   - 全体的に文字サイズをアップ
   - Recommendedのロゴ画像サイズを拡大（max-height: 40px → 70px）
   - 買取CTAを元のHTML構造（バナー画像 + .refer ボタン）を活かす形に変更
   
   【v5.4 追加内容】
   - トップページ メインエリア（#main-col）用CSSを新規追加
   
   【v5.3 修正内容】
   - PC版フッターのレイアウトを左右分割に変更
   
   【v5.2 修正内容】
   - PC版フッターの構成を変更
   
   【v5.1 追加内容】
   - PC版フッター（#footerwrap）の新デザイン
   
   【v5.0 大幅改訂】
   - スマホメディアクエリを max-device-width → max-width に変更
   
   【設計原則】
   1. !important は原則使わない
   2. 詳細度を意識的に上げて既存CSSに勝つ
   3. 必要な上書きだけを書く
   4. GMO管理機能で設定できるものはCSSで上書きしない
   5. カレンダーは本番構造そのまま生かす
   6. スマホ判定は max-width
   
   【既存CSSの前提】
   - 1rem = 10px（html { font-size: 62.5% }）
   - body font-size: 1.5rem / color: #333 / width: 960px
   - a color: #ba1c1c / hover: #333 (下線)
   - .pc { display: inline !important }
   - .sp { display: none !important }
   ========================================================== */


/* ==========================================================
   0. 全体フォント適用（v5.7で撤回）
   ----------------------------------------------------------
   Webフォント（Noto Serif JP）の強制適用は撤回。
   既存の body 指定（font-family: sans-serif系）をそのまま活かし、
   見出しなど要所にのみ serif 系のフォントを使う方針に変更。
   最終段階で慎重にWebフォントを再検討する。
   ========================================================== */


/* ==========================================================
   1. ヘッダー領域（#headerwrap, PC版）
   ========================================================== */

/* --- ヘッダー全体：横幅を目一杯使う --- */
.u-v2#headerwrap {
    width: 100%;
}

.u-v2#headerwrap .pc #header-top {
    height: 40px;
    padding: 0 24px !important;
    background-color: #1a1a1a;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
}

.u-v2#headerwrap .pc #header-top a.login_out {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0 6px;
    margin-bottom: 0;
    color: #ddd;
}

.u-v2#headerwrap .pc #header-top a.login_out:hover {
    color: #fff;
    text-decoration: none;
}

.u-v2#headerwrap .pc #header-top a {
    color: #ddd;
}

.u-v2#headerwrap .pc #header-top a:hover {
    color: #fff;
    text-decoration: none;
}

.u-v2#headerwrap .pc #header-top #login td {
    color: #ddd;
}

/* --- メインヘッダー（ロゴ＋ナビ） --- */
.u-v2#headerwrap .pc #topmenu {
    height: 80px;
    padding: 0 24px !important;
    border-bottom-color: #e5e5e5;
    gap: 20px;
    /* ロゴを左端、ナビを右端に分ける */
    justify-content: space-between;
    align-items: center;
}

.u-v2#headerwrap .pc div#topmenu img.ua {
    height: 44px;
    max-width: 160px;
}

.u-v2#headerwrap .pc #topmenu > a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* --- グローバルナビ：右端まで展開 --- */
.u-v2#headerwrap ul#gnav.pc {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;   /* 右寄せ */
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;                     /* 残りスペースを占める */
    gap: 2px;
}

.u-v2#headerwrap ul#gnav.pc li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 14px;
    border-left: 1px solid #d5d5d5;
    font-size: 0;
    color: transparent;
}

.u-v2#headerwrap ul#gnav.pc li:first-child {
    border-left: none;
}

.u-v2#headerwrap #topmenu ul#gnav.pc li a,
.u-v2#headerwrap ul#gnav.pc li a {
    color: #555;
    letter-spacing: 0.05em;
    white-space: nowrap;
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 6px;
    border-radius: 2px;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
}

.u-v2#headerwrap ul#gnav.pc li a:hover {
    background-color: #eaeaea;
    color: #222;
    text-decoration: none;
}

.u-v2#headerwrap ul#gnav.pc li a i {
    font-size: 1.3rem;
}

.u-v2#headerwrap ul#gnav.pc li a img {
    height: 14px;
    vertical-align: middle;
}


/* ==========================================================
   1.5 左メニューとメインエリアの間隔確保
   ----------------------------------------------------------
   二重で確実に効かせる：
   (1) #side-col 自体に margin-right
   (2) table#makebanner の td にも padding を強制
   ========================================================== */

/* td間に余白を作る（詳細度を上げてtable属性に勝つ） */
body table#makebanner > tbody > tr > td:first-child,
html body table#makebanner > tbody > tr > td:first-child {
    padding: 0 20px 0 10px;
}

body table#makebanner > tbody > tr > td:nth-child(2),
html body table#makebanner > tbody > tr > td:nth-child(2) {
    padding: 0 10px;
}


/* ==========================================================
   2. 左メニュー（#side-col, PC版）
   ========================================================== */

.u-v2#side-col {
    width: 180px;
    margin-right: 24px;
}

.u-v2#side-col #search-area {
    width: 100%;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    background: #fff;
    align-items: stretch;
    float: none;
    box-sizing: border-box;
}

.u-v2#side-col #search-area #searchBox {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 34px;
    padding: 4px 8px;
    margin: 0;
    border: none;
    font-size: 1.3rem;
    color: #333;
    box-sizing: border-box;
    font-family: inherit;
}

.u-v2#side-col #search-area a {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    color: #555;
    transition: color 0.2s ease;
}

.u-v2#side-col #search-area a:hover {
    color: #222;
    text-decoration: none;
}

.u-v2#side-col span.w160 {
    display: block;
    margin-top: 16px;
    padding: 9px 12px;
    background-color: #2c2c2c;
    border: none;
    box-shadow: none;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
}

.u-v2#side-col ul.leftm {
    border: 1px solid #e3e3e3;
    border-top: none;
    background: #fff;
}

.u-v2#side-col ul.leftm li {
    padding: 0;
    line-height: 1.4;
    border-bottom-color: #d5d5d5;
}

.u-v2#side-col ul.leftm li a {
    color: #444;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    display: block;
    padding: 10px 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.u-v2#side-col ul.leftm li a:hover {
    background-color: #eaeaea;
    color: #222;
    text-decoration: none;
}

.u-v2#side-col ul.leftm li a i {
    color: #888;
    font-size: 1.1rem;
    margin-right: 2px;
}

.u-v2#side-col ul.leftm li a b {
    color: #333;
}

.u-v2#side-col img.side {
    display: block;
    width: 100%;
    margin-top: 10px;
    border: 1px solid #e5e5e5;
}

.u-v2#side-col a:hover img.side {
    opacity: 0.85;
}


/* ==========================================================
   3. メインエリア（#main-col, トップページ）
   ========================================================== */

/* --- 1カラム化（実際の指定は下の「#main-col / #contents-top の幅制限解除」セクション） --- */

/* --- Swiperカルーセル ---
   横幅100%で画像の比率に任せて高さを決める自然な表示。
   画像差し替え時は横長バナー（例：1200×637程度）推奨。 */
.u-v2#main-col .swiper-container {
    width: 100%;
    margin: 0 0 28px;
    overflow: hidden;
    position: relative;
}

.u-v2#main-col .swiper-slide {
    text-align: center;
    background: #f0f0f0;
}

.u-v2#main-col .swiper-slide a.toBlock {
    display: block;
    width: 100%;
}

.u-v2#main-col .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Swiper ナビゲーション矢印のサイズと色 */
.u-v2#main-col .swiper-button-next,
.u-v2#main-col .swiper-button-prev {
    width: 36px;
    height: 36px;
    margin-top: -18px;      /* 垂直中央揃え補正 */
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    transition: background .2s;
}

.u-v2#main-col .swiper-button-next:hover,
.u-v2#main-col .swiper-button-prev:hover {
    background: rgba(0,0,0,0.5);
}

.u-v2#main-col .swiper-button-next::after,
.u-v2#main-col .swiper-button-prev::after {
    font-size: 1.6rem;
    font-weight: bold;
}

/* ページネーションドット */
.u-v2#main-col .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.6;
}

.u-v2#main-col .swiper-pagination-bullet-active {
    background: #ba1c1c;
    opacity: 1;
}

/* --- お知らせ帯 --- */
.u-v2#main-col .topicf {
    margin: 0 0 14px;
    padding: 14px 18px;
    background: #fafafa;
    border-left: 3px solid #ba1c1c;
    font-size: 1.4rem;
    line-height: 1.8;
}

.u-v2#main-col .topicf .red {
    color: #ba1c1c;
    font-weight: 600;
    margin-right: 4px;
}

.u-v2#main-col .topicf + div {
    margin: 0 0 28px;
    padding: 14px 18px;
    background: #fafafa;
    border-left: 3px solid #888;
    font-size: 1.4rem;
    line-height: 1.8;
}

/* --- セクション見出し（パターンA：下線+英字） --- */
.u-v2#main-col .w510 {
    display: block;
    margin: 42px 0 20px;
    padding: 0 0 12px;
    border-bottom: 1px solid #333;
    background: none;
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #222;
    font-family: "Georgia", "Times New Roman", serif;
    line-height: 1.3;
}

/* --- Topics --- */
.u-v2#main-col #topics {
    margin: 0;
    padding: 0;
}

.u-v2#main-col #topics dl {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 8px 4px;
    border-bottom: 1px dotted #ddd;
    margin: 0;
    line-height: 1.4;
}

.u-v2#main-col #topics dl:hover {
    background: #fafafa;
}

.u-v2#main-col #topics dt {
    flex: 0 0 auto;
    font-size: 1.3rem;
    color: #888;
    letter-spacing: 0.04em;
    min-width: 82px;
    font-weight: 400;
    line-height: 1.4;
}

.u-v2#main-col #topics dd {
    flex: 1 1 auto;
    font-size: 1.4rem;
    margin: 0;
    line-height: 1.5;
}

.u-v2#main-col #topics dd a {
    color: #333;
    transition: color .15s;
}

.u-v2#main-col #topics dd a:hover {
    color: #ba1c1c;
    text-decoration: none;
}

.u-v2#main-col .mt-10 {
    margin: 16px 0 0;
    font-size: 1.3rem;
}

.u-v2#main-col .mt-10 a {
    color: #666;
}

.u-v2#main-col .mt-10 a::after {
    content: " →";
    color: #ba1c1c;
}

/* ============================================================
   #main-col / #contents-top / #lineup の幅制限解除
   ----------------------------------------------------------
   既存uboy.cssで以下が指定されている：
     #main-col    { width: 770px; margin: 0 10px 0 20px; }
     #contents-top { width: 510px; float: left; }
     #col-right   { width: 235px; float: left; }
     #lineup      { width: 510px; }
   
   方針：
   - #main-col の width: 770px はそのままにする（既存に任せる）
     ※ width: 100% !important を指定すると、親のtable-layoutと競合して
       横幅が 33,554,200px まで暴走する現象が発生したため撤回
   - #contents-top と #lineup の width: 510px を 100% に強制上書き
   - これで #main-col(770px) の中で #contents-top(100%→770px相当)・
     #lineup(100%→770px相当) が広がる
   ============================================================ */

/* #main-col 自体の width は指定しない。既存の width: 770px を継承。
   padding や text-align のみ新しく指定 */
.u-v2#main-col {
    box-sizing: border-box;
    padding: 0;
    text-align: left;
    margin: 0 10px 0 20px;   /* 既存と同じに明示 */
}

.u-v2#main-col #contents-top {
    width: 100% !important;
    float: none !important;
    display: block;
}


/* --- Recommended（ブランド4列グリッド、ロゴ画像を大きく） ---
   既存uboy.cssの以下を確実に上書き：
     #contents-top #lineup { clear: both; width: 100%; margin: 0 0 20px; }
     #lineup { width: 510px; }
     #lineup div.img-banner { display: inline-block; width: 32%; margin: 0 0.5px; } */
.u-v2#main-col #lineup {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;  /* 暴走防止の保険 */
    margin: 0 !important;
    padding: 0;
    clear: both;
}

.u-v2#main-col #lineup .img-banner {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0;
    float: none;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    box-sizing: border-box;
}

.u-v2#main-col #lineup .img-banner a {
    display: block;
    padding: 20px 12px 16px;
    text-align: center;
    color: #333;
    text-decoration: none;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    font-weight: 500;
    line-height: 1.4;
}

.u-v2#main-col #lineup .img-banner:hover {
    border-color: #ba1c1c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.u-v2#main-col #lineup .img-banner:hover a {
    text-decoration: none;
}

.u-v2#main-col #lineup .img-banner img {
    display: block;
    margin: 0 auto 10px;
    max-height: 70px;
    width: auto;
    max-width: 100%;
    border: none;
    object-fit: contain;
}

/* --- 買取エリア（元の #col-right 構造を活かす） ---
   元HTML構造：
   <div id="col-right">
     <center>
       <a><img alt="オーディオ高価買取" src="kaitori-banner02.jpg" width="100%"></a>
       <br>
       <a class="refer"><i class="fas fa-search"></i>買取価格を調べる</a>
     </center>
     <h4 class="recommend">お勧め商品</h4>
     [SPECIAL1N]
   </div>
*/

/* col-right全体の上下余白 */
.u-v2#main-col #col-right {
    margin: 40px 0 0;
    padding: 0;
    width: 100%;
    float: none;
}

/* 買取バナー + ボタンのcenterブロック：背景ありの帯に */
.u-v2#main-col #col-right > center {
    display: block;
    margin: 0 0 36px;
    padding: 28px 24px 30px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    text-align: center;
}

/* 買取バナー画像のサイズ制御 */
.u-v2#main-col #col-right > center > a:first-child {
    display: inline-block;
    max-width: 560px;
    width: 100%;
    margin: 0 auto 18px;
    transition: opacity .2s;
}

.u-v2#main-col #col-right > center > a:first-child:hover {
    opacity: 0.85;
    text-decoration: none;
}

.u-v2#main-col #col-right > center > a:first-child img {
    width: 100%;
    height: auto;
    display: block;
}

/* 「買取価格を調べる」ボタン（.refer）を拡大・洗練化
   既存 .refer のスタイルを上書き */
.u-v2#main-col #col-right > center a.refer {
    display: inline-block;
    margin: 0;
    padding: 14px 36px;
    background: #ba1c1c;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: none;
    border-radius: 2px;
    transition: background .2s;
    font-family: inherit;
}

.u-v2#main-col #col-right > center a.refer:hover {
    background: #8f1414;
    color: #fff;
    text-decoration: none;
}

.u-v2#main-col #col-right > center a.refer i {
    margin-right: 8px;
    font-size: 1.4rem;
}

/* <br>を視覚的に無効化（中央ブロックが縦積みなので不要） */
.u-v2#main-col #col-right > center > br {
    display: none;
}

/* お勧め商品 見出し h4.recommend
   既存uboy.css: h4.recommend { background-color: #282828; color: #fff; margin-top: 1rem; } を打ち消す */
.u-v2#main-col #col-right h4.recommend {
    display: block;
    margin: 0 0 20px !important;
    padding: 0 0 12px;
    border-bottom: 1px solid #333;
    background: none !important;
    background-color: transparent !important;
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #222 !important;
    font-family: "Georgia", "Times New Roman", serif;
    line-height: 1.3;
    text-align: left;
}

/* Pick Up 見出しは本来 span.w510 で出すので、h4.recommendは元々ある */
/* どちらも見出しとして使える */

/* --- [SPECIAL1N] 商品リストのCSS --- */
.u-v2#main-col #col-right table {
    border-collapse: collapse;
    background: transparent !important;
    width: 100%;
}

.u-v2#main-col #col-right td[width="5"] {
    display: none;
}

.u-v2#main-col #col-right tr > td.line[colspan="4"] {
    padding: 0;
    height: 0;
    background: transparent;
    border: none;
}

.u-v2#main-col #col-right tr:has(> td[width="80"]) {
    display: block;
    margin-bottom: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e5e5e5;
    transition: border-color .2s;
}

.u-v2#main-col #col-right tr:has(> td[width="80"]):hover {
    border-color: #ba1c1c;
}

.u-v2#main-col #col-right td[width="80"] {
    display: inline-block;
    vertical-align: middle;
    width: 100px !important;
    padding-right: 16px;
    text-align: center;
}

.u-v2#main-col #col-right td[width="80"] img {
    width: 80px !important;
    height: auto;
    border: 1px solid #eee;
}

.u-v2#main-col #col-right td.woong {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 120px);
    font-size: 1.4rem;
    line-height: 1.6;
    color: #ba1c1c;
    font-weight: 600;
}

.u-v2#main-col #col-right td.woong a {
    display: inline-block;
    color: #222;
    font-weight: 500;
    font-size: 1.45rem;
    margin-bottom: 3px;
    transition: color .15s;
    line-height: 1.5;
}

.u-v2#main-col #col-right td.woong a:hover {
    color: #ba1c1c;
    text-decoration: none;
}

.u-v2#main-col #col-right td.woong img {
    margin-left: 2px;
    vertical-align: middle;
}


/* ==========================================================
   4. フッター領域（#footerwrap, PC版）
   ========================================================== */

.u-v2#footerwrap {
    border-top: 1px solid #e5e5e5;
    background: #fafafa;
    margin-top: 50px;
}

.u-v2#footerwrap #footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: auto;
    max-width: 1280px;
    height: auto;
    margin: 0 auto;
    padding: 36px 40px;
    border-top: none;
    background: transparent;
    text-align: left;
}

.u-v2#footerwrap #ft_info {
    flex: 1;
}

.u-v2#footerwrap #ft_info p.ft_brand {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.1em;
}

.u-v2#footerwrap #ft_info p.ft_address {
    margin: 0;
    font-size: 1.3rem;
    color: #666;
    line-height: 1.8;
}

.u-v2#footerwrap #ft_info p.ft_contact {
    margin: 4px 0 0 0;
    font-size: 1.3rem;
    color: #444;
}

.u-v2#footerwrap #ft_info p.ft_contact a {
    color: #444;
    text-decoration: none;
}

.u-v2#footerwrap #ft_info p.ft_contact a:hover {
    color: #ba1c1c;
    text-decoration: none;
}

.u-v2#footerwrap #ft_right {
    padding-left: 32px;
    border-left: 1px solid #ddd;
    text-align: right;
}

.u-v2#footerwrap #ft_policy {
    margin: 0 0 10px 0;
}

.u-v2#footerwrap #ft_policy ul {
    display: inline-flex;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.3rem;
}

.u-v2#footerwrap #ft_policy li {
    margin: 0;
    padding: 0;
    font-size: 0;
    color: transparent;
}

.u-v2#footerwrap #ft_policy li a {
    color: #666;
    text-decoration: none;
    padding: 0 6px;
    font-size: 1.3rem;
    transition: color 0.2s ease;
}

.u-v2#footerwrap #ft_policy li a:hover {
    color: #ba1c1c;
    text-decoration: none;
}

.u-v2#footerwrap #ft_policy li:first-child::after {
    content: "|";
    color: #ccc;
    font-size: 1.3rem;
    padding: 0 2px;
}

.u-v2#footerwrap #footer p.copyright {
    margin: 0;
    font-size: 1.2rem;
    color: #aaa;
    letter-spacing: 0.05em;
}

.u-v2#footerwrap #footer p.copyright a.f_copyright {
    color: #aaa;
    text-decoration: none;
}

.u-v2#footerwrap #footer p.copyright a.f_copyright:hover {
    color: #ba1c1c;
    text-decoration: none;
}


/* ==========================================================
   5. レスポンシブ対応（スマホ：max-width 767px）
   ========================================================== */

@media screen and (max-width: 767px) {

    /* 本番の <table width=770 id=makebanner> をスマホで画面幅に収める */
    table#makebanner {
        width: 100%;
        max-width: 100%;
    }

    table#makebanner > tbody > tr > td:first-child {
        width: 0;
        padding: 0;
        display: none;
    }

    table#makebanner > tbody > tr > td:nth-child(2) {
        width: 100%;
        display: block;
        padding: 0 8px;
    }

    .u-v2#side-col.pc {
        display: none;
    }

    /* --- メインエリア（スマホ） --- */
    .u-v2#main-col {
        padding: 0;
    }

    .u-v2#main-col .w510,
    .u-v2#main-col #col-right h4.recommend {
        font-size: 2.0rem;
        margin: 32px 0 16px;
    }

    .u-v2#main-col #topics dl {
        flex-direction: column;
        gap: 2px;
        padding: 10px 4px;
    }

    .u-v2#main-col #topics dt {
        min-width: auto;
    }

    .u-v2#main-col #lineup {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .u-v2#main-col #lineup .img-banner img {
        max-height: 60px;
    }

    .u-v2#main-col #col-right > center {
        padding: 20px 16px 22px;
    }

    .u-v2#main-col #col-right > center a.refer {
        padding: 12px 24px;
        font-size: 1.4rem;
    }

    .u-v2#main-col #col-right td[width="80"] {
        width: 80px !important;
        padding-right: 12px;
    }

    .u-v2#main-col #col-right td[width="80"] img {
        width: 65px !important;
    }

    .u-v2#main-col #col-right td.woong {
        width: calc(100% - 92px);
        font-size: 1.3rem;
    }

    .u-v2#main-col #col-right td.woong a {
        font-size: 1.35rem;
    }


    /* --- スマホ版：ヘッダートップ --- */
    .u-v2#headerwrap .sp #header-top {
        height: 60px;
        padding: 0 12px;
    }

    .u-v2#headerwrap .sp #header-top img.top_logo {
        height: 36px;
    }

    .u-v2#headerwrap .sp #header-top #login {
        height: auto;
        gap: 8px;
    }

    .u-v2#headerwrap .sp #header-top a.login_out {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0 4px;
        margin-bottom: 0;
        font-size: 1.2rem;
        color: #fff;
    }

    .u-v2#headerwrap .sp #header-top a {
        color: #fff;
        font-size: 1.2rem;
    }

    .u-v2#headerwrap .sp #header-top #login td {
        font-size: 1.2rem;
        color: #fff;
    }

    /* --- スマホ版：トップメニュー --- */
    .u-v2#headerwrap .sp #topmenu {
        height: 54px;
        padding: 0 12px;
        border: none;
        border-bottom: 1px solid #e5e5e5;
        gap: 0;
    }

    .u-v2#headerwrap .sp #topmenu #MakeShopTopSearchInput {
        flex: 1;
        min-width: 0;
        width: auto;
        height: 34px;
        padding: 0 10px;
        margin: 0;
        border: 1px solid #ccc;
        border-right: none;
        background: #fff;
        font-size: 1.2rem;
        color: #333;
        box-sizing: border-box;
        font-family: inherit;
    }

    .u-v2#headerwrap .sp #topmenu a#MakeShopTopSearchButton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: 34px;
        padding: 0 14px;
        margin: 0 12px 0 0;
        background: #00a504;
        color: #fff;
        font-size: 1.2rem;
        text-indent: 0;
        box-sizing: border-box;
    }

    /* --- スマホ版：フッター --- */
    .u-v2#footerwrap.pc {
        display: none;
    }

    /* --- スマホ版：右側アイコン群 --- */
    .u-v2#headerwrap .sp #topmenu .top_menu_icon_r {
        gap: 10px;
        margin-left: 0;
    }

    .u-v2#headerwrap .sp #topmenu .top_menu_icon_r a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 0;
        color: #666;
        font-size: 0.9rem;
        line-height: 1.1;
    }

    .u-v2#headerwrap .sp #topmenu .top_menu_icon_r i {
        font-size: 1.6rem;
        margin-bottom: 2px;
    }

    .u-v2#headerwrap .sp #topmenu .top_menu_icon_r img {
        height: 16px;
        width: auto;
        margin-bottom: 2px;
    }

    .u-v2#headerwrap .sp #topmenu .top_menu_icon_r .capt {
        margin-top: 0;
        font-size: 0.8rem;
        letter-spacing: 0.02em;
        line-height: 1;
    }
}


/* ==========================================================
   6. レスポンシブ対応（中間画面 1025〜1200px）
   ========================================================== */

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .u-v2#headerwrap ul#gnav.pc li {
        padding: 0 10px;
    }

    .u-v2#headerwrap ul#gnav.pc li a {
        font-size: 1.3rem;
    }
}


/* ==========================================================
   7. レスポンシブ対応（タブレット 768〜1024px）
   ========================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .u-v2#headerwrap .pc #topmenu {
        padding: 0 12px;
        gap: 12px;
    }

    .u-v2#headerwrap ul#gnav.pc li {
        padding: 0 8px;
    }

    .u-v2#headerwrap ul#gnav.pc li a {
        font-size: 1.2rem;
        letter-spacing: 0;
    }

    .u-v2#headerwrap .pc div#topmenu img.ua {
        height: 36px;
        max-width: 120px;
    }

    .u-v2#main-col #lineup {
        grid-template-columns: repeat(3, 1fr);
    }
}