/* ============================================================
   株式会社逆旅 総合オンラインストア（BASE）カスタムCSS
   原稿用紙モチーフ × 既存3サイトの寒色系ファミリーデザイン
   ファイルアップローダーでアップして <link> で読み込む
   ============================================================ */

/* Webフォント（Shippori Mincho B1 / Zen Kaku Gothic New / Cormorant Garamond） */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Shippori+Mincho+B1:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&display=swap");

/* ─ 配色（ここだけ変えれば全体に効く）───────────────── */
:root{
  --ink:      #1e2a3a;   /* 本文の濃紺寄りの墨 */
  --sub:      #69737A;   /* 補助テキスト */
  --bg:       #ffffff;
  --bg-soft:  #FAFBFC;
  --line:     #DBE2E6;
  --cyan:     #5DC1CF;   /* 逆旅ブランドカラー */
  --cyan-d:   #3FA7B8;
  --pub:      #14a7cc;   /* 逆旅出版 */
  --mint:     #7bceb8;
  --navy:     #14203C;   /* GEKIRYO BOOKS ALTERNATIVE */
  --navy-2:   #1E2A4A;
  --ivory:    #FCFBF8;
  --navy-sub: #5D6A87;
}

/* ─ 背景・基本の文字 ───────────────────────────────── */
body.shop{
  background-color: var(--bg);
  color: var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing:.03em;
}
a{ color: var(--ink); }

/* ─ ヘッダー（屋号＝原稿用紙ロゴはJSが組み立てる）──── */
body.shop #mainHeader{ margin: 0 auto 48px; }
body.shop #shopHeader h1{ margin:56px 0 0; }
.gk-logo{
  display:flex; width:fit-content; margin:0 auto;
  border:1px solid rgba(93,193,207,.5);
  outline:1px solid rgba(93,193,207,.5);
  outline-offset:3px;
  background:
    repeating-linear-gradient(90deg, rgba(93,193,207,.5) 0 1px, transparent 1px 58px),
    #fff;
}
.gk-logo span{
  flex:0 0 58px; height:58px;
  display:flex; align-items:center; justify-content:center;
  font-family:"Shippori Mincho B1",serif; font-weight:700;
  font-size:27px; color:var(--ink);
}
.gk-caption{
  text-align:center; font-size:11px; letter-spacing:.3em;
  color:var(--sub); margin:16px 0 0;
}

/* ─ ナビ（方眼紙の帯）──────────────────────────────── */
body.shop #shopHeader nav{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:32px 7px 0;
  background:
    repeating-linear-gradient(90deg,  rgba(219,226,230,.5) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(180deg, rgba(219,226,230,.5) 0 1px, transparent 1px 28px),
    var(--bg-soft);
}
body.shop #shopHeader nav ul li{ height:46px; line-height:24px; }
body.shop #shopHeader nav ul li a{
  font-family:"Shippori Mincho B1",serif;
  font-weight:600; font-size:13px; letter-spacing:.14em;
  color:var(--ink);
}
body.shop #shopHeader nav ul li:hover{
  border-bottom:2px solid var(--cyan);
  height:44px;
}
.mainHeaderNavColor{ color:var(--ink) !important; }

/* ─ ナビのプルダウン（レーベルで探す／ジャンルで探す）──
   テーマ側のメニューCSSに負けないよう強めに上書き */
body.shop #shopHeader nav ul li.gk-nav-cat{ position:relative !important; overflow:visible !important; }
body.shop #shopHeader nav ul li.gk-nav-cat > ul.gk-nav-drop{
  display:none !important;
  position:absolute !important; top:100% !important; left:50% !important;
  transform:translateX(-50%) !important;
  width:250px !important; z-index:1000 !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:0 8px 20px rgba(30,42,58,.1) !important;
  padding:6px 0 !important; margin:0 !important;
  text-align:center !important;
}
body.shop #shopHeader nav ul li.gk-nav-cat:hover > ul.gk-nav-drop,
body.shop #shopHeader nav ul li.gk-nav-cat:focus-within > ul.gk-nav-drop{
  display:block !important;
}
body.shop #shopHeader nav ul li.gk-nav-cat .gk-nav-drop li{
  float:none !important; display:block !important;
  width:100% !important; height:auto !important;
  line-height:1.6 !important;
  border:none !important; margin:0 !important; padding:0 !important;
  writing-mode:horizontal-tb !important;
}
body.shop #shopHeader nav ul li.gk-nav-cat .gk-nav-drop li a{
  display:block !important; width:auto !important;
  padding:11px 20px !important;
  font-family:"Shippori Mincho B1",serif !important;
  font-size:12px !important; letter-spacing:.1em !important;
  line-height:1.8 !important;
  color:var(--ink) !important;
  white-space:normal !important;   /* 長いレーベル名は折り返して2行に */
  writing-mode:horizontal-tb !important;
}
body.shop #shopHeader nav ul li.gk-nav-cat .gk-nav-drop li a:hover{
  color:var(--cyan-d) !important; background:var(--bg-soft) !important;
}

/* ─ 商品カード（元のグリッドにも、JSが作るセクションにも効く）─ */
body#shopTopPage .item{ padding-top:14px; }
body#shopTopPage .item a{ color:var(--ink); }
body#shopTopPage .item .itemImg{ background:#fff; }
body#shopTopPage .item:hover .itemImg{ border:none; padding:1px; }
body#shopTopPage .item:hover .itemImg img.image-resize{ opacity:.82; }
body#shopTopPage .item:hover a{ color:var(--cyan-d); }
body#shopTopPage .item a .itemTitle h2{
  font-family:"Shippori Mincho B1",serif;
  font-weight:600; font-size:14px; letter-spacing:.04em;
}
body#shopTopPage .item .itemDetail .itemPrice{
  color:var(--sub); font-size:11px; letter-spacing:.08em;
}
body#shopTopPage .item .comingSoon{ color:var(--cyan-d); }
body#shopTopPage .item .itemImg a .soldout_cover p{ color:var(--ink); }

/* ─ JSが組み立てるレーベル別セクション ──────────────── */
.gk-sec{ padding:64px 0; }
.gk-wrap{ max-width:1040px; margin:0 auto; padding:0 24px; }

/* 原稿用紙の枡目見出し（余った枡は空白マスで行末まで） */
.gk-genko{
  --cell:54px;
  display:flex; flex-wrap:wrap; width:100%; overflow:hidden;
  min-height:var(--cell); margin:0;
  border:1px solid var(--gk);
  outline:1px solid var(--gk);
  outline-offset:3px;
  background:
    repeating-linear-gradient(90deg,  var(--gk) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(180deg, var(--gk) 0 1px, transparent 1px var(--cell)),
    var(--gk-bg, transparent);
}
.gk-genko span{
  flex:0 0 var(--cell); height:var(--cell);
  display:flex; align-items:center; justify-content:center;
  font-family:"Shippori Mincho B1",serif; font-weight:600;
  font-size:24px; color:var(--gk-ink, var(--ink));
}
.gk-genko i.gk-br{ display:block; flex-basis:100%; height:0; }
.gk-en{
  display:block; text-align:right; margin-top:12px;
  font-family:"Cormorant Garamond",serif;
  font-size:13px; letter-spacing:.3em; text-transform:uppercase;
}
.gk-lead{ font-size:12.5px; color:var(--sub); letter-spacing:.08em; margin:10px 0 32px; }
.gk-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  gap:8px 28px;
}
.gk-grid .item{ float:none !important; width:auto !important; margin:0 !important; }
.gk-grid.gk-standalone{ margin:28px 0 56px; }   /* カテゴリページ用グリッド */

/* JSが自前で描画する商品カード（カンプと同じ見た目） */
.gk-item{ display:block; text-decoration:none; color:var(--ink); }
.gk-item .gk-item-img{
  display:flex; align-items:flex-end; justify-content:center;
  height:240px;              /* 本棚方式：画像エリアの高さを揃えて下端揃え */
  background:transparent; border:none; padding:0;
}
.gk-item .gk-item-img img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;   /* 書影そのままの縦横比。枠なしで影だけ */
  display:block;
  box-shadow:3px 5px 14px rgba(30,42,58,.2);
  transition:opacity .3s;
}
.gk-item:hover .gk-item-img img{ opacity:.85; }
.gk-gba .gk-item .gk-item-img img{ box-shadow:3px 5px 16px rgba(0,0,0,.45); }
.gk-item .gk-item-name{
  display:block; font-family:"Shippori Mincho B1",serif; font-weight:600;
  font-size:13.5px; letter-spacing:.06em; margin-top:12px; line-height:1.7;
}
.gk-item:hover .gk-item-name{ color:var(--cyan-d); }
.gk-item .gk-item-price{
  display:block; font-size:11px; color:var(--sub);
  letter-spacing:.08em; margin-top:4px;
}
.gk-gba .gk-item{ color:var(--ivory); }
.gk-gba .gk-item .gk-item-img{ background:var(--navy-2); border-color:#2c3a5e; box-shadow:0 2px 12px rgba(0,0,0,.35); }
.gk-gba .gk-item .gk-item-price{ color:#9aa4bd; }
.gk-gba .gk-item:hover .gk-item-name{ color:#c9d0e2; }
.gk-more{ text-align:center; margin-top:40px; }
.gk-more a{
  font-family:"Shippori Mincho B1",serif; font-size:12px; letter-spacing:.22em;
  border:1px solid var(--ink); padding:12px 46px; display:inline-block;
  text-decoration:none;
}

/* 逆旅出版 */
.gk-pub{ background:var(--bg); }
.gk-pub .gk-genko{ --gk: rgba(20,167,204,.45); --gk-bg:#fff; }
.gk-pub .gk-en{ color:var(--pub); }
.gk-pub .gk-more a:hover{ border-color:var(--pub); color:var(--pub); }

/* GEKIRYO BOOKS ALTERNATIVE（常に3段の原稿用紙） */
.gk-gba{ background:var(--navy); color:var(--ivory); }
.gk-gba .gk-genko{ --gk: rgba(93,106,135,.65); --gk-ink: var(--ivory); --gk-bg: var(--navy-2); --cell:36px; }
.gk-gba .gk-genko span{ font-family:"Cormorant Garamond",serif; font-weight:600; font-size:19px; }
.gk-gba .gk-lead{ color:#9aa4bd; }
.gk-gba .item a, .gk-gba .item a .itemTitle h2{ color:var(--ivory) !important; }
.gk-gba .item .itemDetail .itemPrice{ color:#9aa4bd !important; }
.gk-gba .item .itemImg{ background:var(--navy-2) !important; }
.gk-gba .gk-more a{ border-color:var(--ivory); color:var(--ivory); }
.gk-gba .gk-more a:hover{ border-color:var(--navy-sub); color:#c9d0e2; }

/* グッズ（方眼紙の帯） */
.gk-goods{
  background:
    repeating-linear-gradient(90deg,  rgba(219,226,230,.5) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(180deg, rgba(219,226,230,.5) 0 1px, transparent 1px 28px),
    var(--bg-soft);
}
.gk-goods .gk-genko{ --gk: rgba(93,193,207,.55); --gk-bg:#fff; }
.gk-goods .gk-en{ color:var(--cyan-d); }
.gk-goods .gk-more a:hover{ border-color:var(--cyan-d); color:var(--cyan-d); }

/* ─ 商品詳細ページ ──────────────────────────────────── */
body#shopDetailPage header h1.itemTitle{
  font-family:"Shippori Mincho B1",serif;
  color:var(--ink); letter-spacing:.04em;
}
body#shopDetailPage .itemPrice h2{ color:var(--ink); }
body#shopDetailPage .purchase{
  border-top:1px dotted var(--line);
  border-bottom:1px dotted var(--line);
}
body#shopDetailPage .purchase .soldout{ color:var(--ink); }
body#shopDetailPage .purchase .comingSoon{ color:var(--cyan-d); }
body#shopDetailPage .itemDescription p{ line-height:2; }

/* ─ ボタン類（購入・問い合わせ）────────────────────── */
body#shopDetailPage #purchase_form .purchaseButton .purchaseButton__btn{
  background:var(--ink); letter-spacing:.18em; padding:16px 0;
}
.inquirySection .control-panel input#buttonLeave,
#inquiryCompleteSection a{ background:var(--ink); color:#fff; }

/* ─ ABOUTページ（うっすら方眼紙）────────────────────── */
.main{
  background:
    repeating-linear-gradient(90deg,  rgba(219,226,230,.35) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(180deg, rgba(219,226,230,.35) 0 1px, transparent 1px 32px),
    var(--bg);
}
.main #about h2,
.main #about h3{ font-family:"Shippori Mincho B1",serif; color:var(--ink); }

/* ─ SNS帯（枡にアイコンが1つずつ・JSが組み立てる）──── */
.gk-sns{ text-align:center; padding:72px 24px; background:var(--bg); border-top:1px solid var(--line); }
.gk-sns-lead{
  font-family:"Shippori Mincho B1",serif; font-size:14px;
  letter-spacing:.14em; margin:0 0 30px; color:var(--ink);
}
.gk-sns-genko{
  display:inline-flex;
  border:1px solid rgba(93,193,207,.5);
  outline:1px solid rgba(93,193,207,.5);
  outline-offset:3px;
  background:#fff;
}
.gk-sns-genko a{
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  border-right:1px solid rgba(93,193,207,.5);
  color:var(--ink);
}
.gk-sns-genko a:last-child{ border-right:none; }
.gk-sns-genko a:hover{ color:var(--cyan-d); background:var(--bg-soft); }
.gk-sns-genko svg{ width:24px; height:24px; }

/* ─ フッター ───────────────────────────────────────── */
body.shop #mainFooter .footerMenu ul li{ color:var(--sub); }
.footerNav{ color:var(--sub) !important; }

/* ─ カートのバッジ ─────────────────────────────────── */
.cart-qty{ background:var(--cyan); }

/* ─ スマホ ─────────────────────────────────────────── */
@media (max-width:640px){
  .gk-genko{ --cell:38px; }
  .gk-genko span{ font-size:17px; }
  .gk-gba .gk-genko{ --cell:28px; }
  .gk-gba .gk-genko span{ font-size:14px; }
  .gk-grid{ grid-template-columns:repeat(2, 1fr); gap:8px 18px; }
  .gk-item .gk-item-img{ height:170px; }
  .gk-logo span{ flex-basis:48px; height:48px; font-size:22px; }
  .gk-logo{ background:
    repeating-linear-gradient(90deg, rgba(93,193,207,.5) 0 1px, transparent 1px 48px), #fff; }
}