@charset "UTF-8";

/* ========BASIC======== */
* {
   font-family:"Hiragino Kaku Gothic Pro",HiraKakuPro-W3,"ヒラギノ角ゴ Pro W3","メイリオ", Meiryo,"MS P ゴシック",verdana,sans-serif;
   color:#333;
   box-sizing: border-box; /* スマホでのレイアウト崩れを防ぐ最重要設定 */
}

body {
   margin:0;
   padding:0;
   line-height:1.6;
   letter-spacing:1px;
   background: #f8fafc; /* 背景をほんのり明るいグレーにして清潔感をプラス */
}

br {
   letter-spacing:normal;
}

/* リンクをパソコン版と統一し、スマホでも見やすく目立つ青に変更 */
a {
   color: #0066cc;
   text-decoration: underline;
}

a:hover {
   text-decoration: none;
   color: #004499;
}

img {
   border:0;
   vertical-align:bottom;
   max-width: 100%;
   height: auto; /* 画像が歪まないように調整 */
}

h1,h2,h3,h4,h5,h6 {
   margin:0;
}


/* ========TEMPLATE LAYOUT======== */
div#top {
   width: 100%; /* スマホの画面幅に自動で合わせる */
   margin:0 auto;
   background: #fff;
}

div#header {
   position:relative;
   width: 100%;
}

div#pr {
   width: 100%;
}

/* スマホ版では右上ナビを非表示、またはヘッダー下に自然に流すため位置リセット */
div#gnavi {
   position: static;
   width: 100%;
   background: #2b4c7e;
   padding: 5px 10px;
}

div#menu {
   width: 100%;
   margin-bottom: 20px;
}

/* メインタイトル（「ロッカーキーバンド」の製造販売?）のスマホ調整 */
#top > h1 {
   font-size: 1.05em;
   text-align: center;
   padding: 12px 10px;
   color: #1a365d;
   line-height: 1.4;
   background: #f1f5f9;
   margin: 10px 0;
}

div#icatch {
   width: 100%;
   margin:0 auto;
   background:#fff;
}

div#contents {
   width: 100%;
   margin:0 auto;
   padding:10px 15px; /* 左右に程よい余白を作って文字を読みやすく */
   background:#fff;
}

/* スマホでは左右の2カラム配置を解除し、全て縦1列に並べる */
div#main, div#sub, div#info, div#info2, div#news {
   float: none !important;
   width: 100% !important;
   margin-bottom: 20px;
}

div#totop {
   clear:both;
   text-align: center;
   padding: 15px 0;
}

div#footMenu {
   width: 100%;
   clear:both;
   overflow:hidden;
   padding:15px 10px;
   background: #f1f5f9;
}

div#footer {
   width: 100%;
   clear:both;
   padding:15px 0;
   text-align: center;
   background: #f1f5f9;
   border-top: 1px solid #e2e8f0;
}


/* ========HEADER CUSTOMIZE======== */
div#header h1 {
   margin:0;
   padding:0;
   line-height: 1;
}
div#header h1 img {
   width: 100%; /* ヘッダー画像をスマホ幅いっぱいに拡大縮小 */
   height: auto;
   display: block;
}

/* GNAVI CUSTOMIZE (スマホ用の簡易表示調整) */
div#header #gnavi ul {
   list-style:none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: flex-end;
}

div#header #gnavi li {
   font-size: 0.75em;
   margin-left: 15px;
}

div#header #gnavi li a{
   color: #fff; /* 青背景で見やすいように白文字化 */
   text-decoration: none;
}


/* ========MENU CUSTOMIZE======== */
/* スマホの狭い画面で1列にすると文字が潰れるため、押しやすい縦並びボタンに最適化 */
div#menu ul {
   margin:0;
   padding:0;
   width: 100%;
   list-style: none;
}

div#menu li {
   margin:0;
   padding:0;
   width: 100%;
   font-size: 0.85em; /* スマホでタップしやすいように文字を大きく */
   color:#fff;
   text-align:center;
}

div#menu li span {
   font-family: verdana, sans-serif;
   font-size: 110%;
   color: #cbd5e1; /* 英語表記は少し控えめなライトグレーに */
   display: inline-block;
   margin-left: 8px;
}

div#menu li a{
   display:block;
   width: 100%;
   padding: 14px 0; /* 指でタップしやすい高さに変形 */
   color: #ffffff;
   background: #2b4c7e; /* パソコン版と統一した落ち着いたブルー */
   border-bottom: 1px solid #3b5c8e; /* ボタン同士の区切り線 */
   text-decoration: none;
}

div#menu li a:hover{
   background: #3b5c8e;
}


/* ========INFO CUSTOMIZE======== */
div#info h2 {
   background: #2b4c7e; /* パソコン版と統一 */
   font-size: 90%;
   font-weight: bold;
   color:#fff;
   padding: 8px 10px;
   border-bottom:3px solid #1a365d;
}

/* スマホで深刻なガタつきの原因になる、古いネガティブマージン記述をスマホ用にリセット */
div#info dl dt {
   float: none;
   width: auto;
   padding: 5px 0;
}

div#info dl dd {
   margin-left:0;
   padding: 10px 5px;
   background:#fff;
}

div#info h3 {
   font-size: 14px;
   color: #333;
   padding: 5px 0 15px 0;
   font-weight: normal;
   line-height: 1.6;
}

div#info ul {
   margin: 0;
   padding: 0 0 0 15px;
}

div#info li {
   padding-left: 5px;
   font-size: 0.8em;
   list-style: square; /* 標準のアイコンで確実に表示 */
   margin-bottom: 5px;
}


/* ========NEWS CUSTOMIZE======== */
div#news p {
   margin:0;
   padding: 10px 0;
   text-align: center;
}
/* メイン画像がスマホからはみ出さないように100%幅に強制制限 */
div#news p img {
   width: 100% !important;
   height: auto !important;
}

div#news h2 {
   background:#475569;
   font-size:90%;
   color:#fff;
   padding:8px 10px;
}


/* ========MAIN CONTENTS CUSTOMIZE======== */
div#main h2 {
   margin:0 0 15px 0;
   padding: 6px 0;
   font-size: 100%;
   color:#1a365d;
   border-bottom:2px solid #2b4c7e;
}

div#main p{
   margin:0 0 1em 0;
   font-size:0.8em;
}

div#main dd{
   padding: 10px;
   margin: 0 0 1em 0;
   background:#f1f5f9;
}

/* 「300円」をスマホでも強烈に目立たせる設定 */
.c_price {
   color: #d9383a;
   font-size: 1.4em;
   font-weight: bold;
   background: linear-gradient(transparent 60%, #fff3b3 60%);
   padding: 0 4px;
   margin: 0 2px;
   display: inline-block;
}


/* ========SUBCONTENTS CUSTOMIZE======== */
div#sub .section {
   margin-bottom:15px;
}

div#sub h2 {
   font-size:0.9em;
   font-weight:bold;
   color:#1a365d;
}

div#sub li a {
   display:block;
   width: 100%;
   padding: 10px;
   background: #f8fafc;
   border-bottom: 1px solid #e2e8f0;
}


/* ========TOTOP CUSTOMIZE======== */
div#totop p{
   position: static;
   font-size: 0.85em;
}


/* ========FOOTMENU CUSTOMIZE========= */
div#footMenu ul{
   position: static;
   float: none;
   margin:0;
   padding:0;
}

div#footMenu li{
   position: static;
   float: none;
   margin: 0 0 10px 0;
   padding: 5px 0;
   border-bottom: 1px solid #e2e8f0;
   font-size: 0.85em;
}


/* ========FOOTER CUSTOMIZE======== */
div#footer address {
   font-size:0.85em;
   color: #64748b;
   font-style: normal;
}

/* =======ADDITIONAL STYLES ======== */
td {
    font-size:14px; color:#333;
}

.c_black_12 { color: #333333; font-size:14px}
.c_blue     { color: #2b4c7e; font-weight: bold}
.c_blue_m   { color: #1a365d; font-weight: bold}
.c_blue_15  { color: #1a365d; font-weight: bold}
.c_white_15 { color: #ffffff; font-weight: bold}
.c_red      { color: #e11d48;}


/* ========「商品を見る」ボタン（スマホ版）======== */
.btn-container {
   text-align: center;
   margin: 20px 0;
   padding: 0 10px; /* 画面端との隙間 */
}

.btn-shouhin {
   display: block; /* スマホでは横幅いっぱいに広げる */
   width: 100%;
   max-width: 320px; /* 大きなスマホでも広がりすぎない制限 */
   margin: 0 auto;
   padding: 16px 0; /* 指で押しやすいように少し厚めに */
   background: #2b4c7e;
   color: #ffffff !important;
   font-size: 1.25em;
   font-weight: bold;
   text-decoration: none !important;
   border-radius: 6px;
   box-shadow: 0 4px 0 #1a355e;
   position: relative;
}

.btn-shouhin span {
   display: block;
   font-size: 0.55em;
   color: #cbd5e1;
   font-weight: normal;
   margin-top: 2px;
}

/* スマホはホバーがないため、タップした瞬間（アクティブ）の動き */
.btn-shouhin:active {
   top: 2px;
   box-shadow: 0 2px 0 #1a355e;
}


/* ======== 会社概要ページ（スマホ版） ======== */
.company-lead {
   font-size: 0.9em;
   font-weight: bold;
   color: #1a365d;
   margin-bottom: 15px;
   text-align: center;
}

.company-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 25px;
   font-size: 0.85em;
}

/* スマホでは縦並びに変形させて見やすくする */
.company-table tr {
   display: flex;
   flex-direction: column;
   border-bottom: 1px solid #e2e8f0;
}

.company-table th {
   width: 100% !important;
   background: #f1f5f9;
   color: #1a365d;
   text-align: left; /* 左揃えにしてスマホで見やすく */
   padding: 8px 12px;
   font-weight: bold;
   border: none;
}

.company-table td {
   width: 100% !important;
   padding: 12px 12px 18px 12px;
   line-height: 1.6;
   border: none;
}

/* スマホ版全体の境界線調整 */
.company-table tr:first-child {
   border-top: 2px solid #2b4c7e;
}
.company-table tr:last-child {
   border-bottom: 2px solid #2b4c7e;
}


/* ======== 商品紹介ページ専用（スマホ版・色名表示修正） ======== */
.goods-lead {
   padding-left: 20px;
   margin-bottom: 25px;
}
.goods-lead li {
   font-size: 0.85em;
   color: #2b4c7e;
   font-weight: bold;
   margin-bottom: 6px;
}

/* スマホ版コンテナ：横並びを解除して縦1列に */
.product-tables-container {
   display: block;
   width: 100%;
}

/* スマホでは各テーブルを独立した製品カードとして装飾 */
.product-spec-table {
   display: table;
   width: 100% !important;
   background: #fff;
   border: 1px solid #e2e8f0;
   border-top: 4px solid #2b4c7e;
   border-radius: 8px;
   margin-bottom: 35px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.product-spec-table th, .product-spec-table td {
   padding: 12px 10px;
}

/* スマホ版ヘッダー */
.product-spec-table thead th {
   background: #f1f5f9;
   color: #1a365d;
   font-size: 1.05em;
   font-weight: bold;
   text-align: center;
   border-bottom: 2px solid #cbd5e1;
}

/* スマホ用の見出し列幅 */
.product-spec-table tbody th {
   background: #f8fafc;
   color: #1a365d;
   font-size: 0.85em;
   font-weight: bold;
   width: 85px !important;
   text-align: center;
}

.product-spec-table tbody td {
   font-size: 0.95em; /* 文字をパッと読みやすい大きさに固定 */
   line-height: 1.6;
   background: #fff;
   color: #333333 !important; /* 文字色を濃いグレーに強制固定 */
}

/* スマホ用の画像サイズ最大化 */
.product-spec-table tr.row-image img {
   max-height: 200px;
   width: auto;
}
.product-spec-table tr.row-subimage img {
   max-width: 170px;
   height: auto;
}

/* 【重要修正】カラーリスト：幅制限を解除し、縦にゆったり1色ずつ並べる */
.color-list {
   display: block; /* 横並び（flex）をやめて縦並びに変更 */
   width: 100%;
   padding: 5px 0;
}
.color-item {
   display: flex;
   align-items: center;
   width: 100% !important; /* 横幅を100%にして、文字が右にはみ出して消えるのを完全に防ぐ */
   font-size: 1.0em !important; /* スマホでもハッキリ読めるサイズ */
   color: #333333 !important; /* 文字色を強制的に黒（濃いグレー）にする */
   margin-bottom: 10px; /* 色同士の縦の間隔をあけて見やすく */
}
.color-item:last-child {
   margin-bottom: 0;
}
.chip-color {
   display: inline-block;
   width: 20px; /* スマホでタップしやすいよう少し大きめの丸に */
   height: 20px;
   border-radius: 50%;
   border: 1px solid #94a3b8;
   margin-right: 10px; /* 丸と文字の間の隙間を広げる */
   box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
   flex-shrink: 0; /* 丸が潰れないように固定 */
}

/* 下部お問い合わせ枠 */
.goods-contact-box {
   background: #f8fafc;
   border: 2px dashed #2b4c7e;
   padding: 15px;
   border-radius: 6px;
   margin-top: 10px;
}
.g-contact-title {
   font-size: 1.1em;
   font-weight: bold;
   color: #1a365d;
}
.g-contact-btn {
   display: block;
   width: 100%;
   padding: 12px 0;
   font-size: 1.05em;
   text-align: center;
}
.g-contact-telinf ul {
   flex-direction: column;
   gap: 5px;
}
.g-contact-telinf span {
   font-size: 1.2em;
}