/*
  Skin Name: ECサイト風スキン（Cocoon）
  Description: 商品カード風UI・ボタン強調・白×グレー×ブルーのECデザイン
  Skin URI: https://wp-cocoon.com/
  Author: Cocoonのスキン作成（ChatGPT）
  Author URI: https://nelog.jp/
  Version: 1.0.0
  Priority: 10
*/

/* =========================================================
  変数（色・影・角丸）
========================================================= */
:root{
  --ec-main:#2f80ed;
  --ec-accent:#56ccf2;
  --ec-bg:#f7f7f7;
  --ec-card:#ffffff;
  --ec-border:#e5e7eb;
  --ec-text:#222;
  --ec-muted:#666;
  --ec-shadow:0 6px 18px rgba(0,0,0,.10);
  --ec-shadow-hover:0 10px 26px rgba(0,0,0,.14);
  --ec-radius:10px;
}

/* =========================================================
  全体
========================================================= */
body{
  background: var(--ec-bg);
  color: var(--ec-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{
  max-width: 1200px;
}

/* コンテンツ背景（白い面を作る） */
.content-in{
  background: transparent;
}

/* =========================================================
  ヘッダー
========================================================= */
.header{
  background: #fff;
  border-bottom: 1px solid var(--ec-border);
}

.header-in{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ロゴ・サイト名 */
.logo-text,
.site-name-text{
  font-weight: 800;
  letter-spacing: .04em;
}

.tagline{
  font-size: 12px;
  color: #888;
}

/* =========================================================
  ナビ（PC）
========================================================= */
.navi{
  background:#fff;
}

.navi-in{
  border-top: 1px solid var(--ec-border);
}

.menu-header .menu-item a{
  padding: 14px 18px;
  font-weight: 700;
  color: #333;
  position: relative;
}

.menu-header .menu-item a:hover{
  color: var(--ec-main);
}

/* アクティブっぽい下線（hover） */
.menu-header .menu-item a:after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:8px;
  height:2px;
  background: var(--ec-main);
  transform: scaleX(0);
  transform-origin: left;
  transition: .25s;
  opacity:.9;
}

.menu-header .menu-item a:hover:after{
  transform: scaleX(1);
}

/* =========================================================
  メイン領域（見出しなどのトーン調整）
========================================================= */
.main{
  padding-top: 10px;
}

h1,h2,h3,h4{
  letter-spacing:.02em;
}

/* =========================================================
  記事カード＝商品カード風（重要）
========================================================= */
.entry-card-wrap{
  gap: 18px;
}

/* カード本体 */
.entry-card,
.e-card{
  background: var(--ec-card);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow);
  overflow: hidden;
  transition: .28s ease;
}

/* hover */
.entry-card:hover,
.e-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--ec-shadow-hover);
  border-color: rgba(47,128,237,.25);
}

/* リンク全体 */
.a-wrap{
  color: inherit;
}

/* サムネ（商品画像感） */
.entry-card-thumb,
.e-card-thumb{
  background:#f3f4f6;
}

.entry-card-thumb img,
.e-card-thumb img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display:block;
}

/* サムネ無しの場合もそれっぽく */
.no-image .entry-card-thumb,
.list-no-image .entry-card-thumb{
  min-height: 160px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg,#f1f5f9,#e2e8f0);
}

/* コンテンツ部 */
.entry-card-content,
.e-card-content{
  padding: 14px 14px 16px;
}

/* タイトル＝商品名風 */
.entry-card-title,
.e-card-title{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
  margin: 0 0 6px;
}

/* スニペット＝商品説明風 */
.entry-card-snippet,
.e-card-snippet{
  font-size: 14px;
  color: var(--ec-muted);
  line-height: 1.65;
  margin: 0 0 10px;
}

/* メタ＝在庫/価格の位置っぽく */
.entry-card-meta,
.e-card-meta{
  font-size: 12px;
  color: #9aa0a6;
  display:flex;
  align-items:center;
  gap:10px;
}

/* 日付アイコンなど */
.entry-date{
  font-weight:700;
}

/* =========================================================
  カテゴリラベル＝タグ風
========================================================= */
.cat-label{
  background: var(--ec-main);
  color:#fff;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing:.03em;
  box-shadow: 0 6px 14px rgba(47,128,237,.18);
}

/* =========================================================
  続きを読む＝購入/詳細ボタン風
========================================================= */
.read-more{
  display: inline-flex;
  align-items:center;
  gap:8px;
  margin-top: 10px;
  padding: 10px 16px;
  background: var(--ec-main);
  color:#fff !important;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing:.02em;
  box-shadow: 0 10px 18px rgba(47,128,237,.20);
  transition: .22s ease;
}

/* 矢印装飾 */
.read-more .arrow{
  display:inline-block;
  transform: translateX(0);
  transition: .22s ease;
}

.read-more:hover{
  background: var(--ec-accent);
  box-shadow: 0 12px 20px rgba(86,204,242,.22);
}

.read-more:hover .arrow{
  transform: translateX(3px);
}

/* =========================================================
  検索ボックス（フッター検索想定）
========================================================= */
.search-box{
  background:#111;
  border-radius: 10px;
  padding: 10px;
}

.search-edit{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius: 8px;
  padding: 10px 12px;
}

.search-edit::placeholder{
  color: rgba(255,255,255,.6);
}

.search-submit{
  background: var(--ec-main);
  border-radius: 8px;
  padding: 10px 12px;
}

.search-submit:hover{
  background: var(--ec-accent);
}

/* =========================================================
  フッター（ECサイト定番：ダーク）
========================================================= */
.footer{
  background:#161616;
  color:#cfcfcf;
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer-in{
  padding-top: 24px;
  padding-bottom: 18px;
}

.footer-title,
.widget-title{
  color:#fff;
  font-weight: 900;
  letter-spacing:.03em;
}

.footer a{
  color:#cfcfcf;
  text-decoration: none;
}

.footer a:hover{
  color:#fff;
}

.footer-widgets .widget{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px;
}

/* カテゴリ一覧 */
.widget_categories .cat-item a{
  display:flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
}

.widget_categories .cat-item a:hover{
  background: rgba(255,255,255,.06);
}

/* 外部リンクボックス等 */
.external-link-box{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,.03);
}

/* =========================================================
  フッターボトム
========================================================= */
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 14px;
}

.copyright{
  color: rgba(255,255,255,.65);
  font-size: 12px;
}

/* =========================================================
  トップへ戻るボタン
========================================================= */
.go-to-top-button{
  background: var(--ec-main);
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(47,128,237,.20);
}

.go-to-top-button:hover{
  background: var(--ec-accent);
}

/* =========================================================
  モバイルフッターボタン（ある場合）
========================================================= */
.mobile-menu-buttons .menu-button-in{
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--ec-border);
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
}

.mobile-menu-buttons .menu-button:hover .menu-button-in{
  border-color: rgba(47,128,237,.25);
}

/* =========================================================
  ちょい調整（スマホ）
========================================================= */
@media (max-width: 834px){
  .menu-header .menu-item a{
    padding: 12px 14px;
  }

  .entry-card-title,
  .e-card-title{
    font-size: 15px;
  }
}

/* =========================================================
  サイト全体の中央寄せ修正
========================================================= */

/* 最上位ラッパー */
.wrap,
.container,
.header-container,
.content,
.content-in,
.footer-container,
.footer-in{
  margin-left: auto;
  margin-right: auto;
}

/* 念のため幅指定がある要素も中央固定 */
.container,
.header-container-in,
.content-in,
.footer-in{
  max-width: 1200px;
  width: 100%;
}

/* 左寄りになる原因を潰す */
body,
#body-in,
#container{
  margin: 0;
  padding: 0;
}

/* PC表示時のズレ対策 */
@media (min-width: 1024px){
  .wrap{
    display: block;
  }
}