/* カスタマイズ用CSS
 * Dinh Works テーマ（シンプル・モノトーン）
 * 標準テーマ(style.css)の後に読み込まれ、上書きする。
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");

:root {
  --dw-ink: #111111;
  --dw-text: #2b2b2b;
  --dw-muted: #6b6b6b;
  --dw-line: #e4e4e4;
  --dw-bg: #ffffff;
  --dw-bg-soft: #f5f5f4;
  --dw-accent: #2f6bff;
  --dw-radius: 10px;
  --dw-font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --dw-font-en: "Inter", "Noto Sans JP", sans-serif;
}

/* ---------- 全体 ---------- */
body,
.ec-layoutRole {
  background: var(--dw-bg);
}
body,
.ec-layoutRole,
.ec-headerRole,
.ec-categoryNaviRole,
.ec-role {
  font-family: var(--dw-font);
  color: var(--dw-text);
}
a {
  color: var(--dw-ink);
}
a:hover {
  color: var(--dw-accent);
}

/* ---------- ヘッダー ---------- */
.ec-layoutRole__header {
  border-bottom: 1px solid var(--dw-line);
}
.ec-headerNaviRole {
  padding-top: 10px;
  padding-bottom: 10px;
}
.ec-headerTitle .ec-headerTitle__title a {
  margin-bottom: 0;
}
.dw-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  color: var(--dw-ink) !important;
  text-decoration: none;
}
.dw-logo:hover {
  opacity: 0.8;
}
.ec-headerTitle img.dw-logo__mark,
.dw-logo__mark {
  width: 40px;
  height: 40px;
  flex: none;
}
.dw-logo__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.dw-logo__name {
  font-family: var(--dw-font-en);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dw-logo__kana {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--dw-muted);
}
.dw-logo__tagline {
  margin: 8px 0 18px;
  font-size: 12px !important;
  letter-spacing: 0.08em;
  color: var(--dw-muted);
}

/* カテゴリナビ */
.ec-categoryNaviRole {
  border-top: 1px solid var(--dw-line);
}
.ec-itemNav__nav li a {
  font-size: 14px;
  font-weight: 500;
  color: var(--dw-ink);
}

/* カートのバッジ */
.ec-cartNavi .ec-cartNavi__badge {
  background-color: var(--dw-ink);
}

/* ---------- 共通パーツ ---------- */
.dw-section {
  padding: 64px 0;
}
.dw-heading {
  margin-bottom: 32px;
  text-align: center;
}
.dw-heading__en {
  margin: 0 0 6px;
  font-family: var(--dw-font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--dw-muted);
}
.dw-heading__ja {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--dw-ink);
}

.dw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 48px;
  padding: 0 24px;
  border: 1px solid var(--dw-ink);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.dw-btn--primary {
  background: var(--dw-ink);
  color: #fff !important;
}
.dw-btn--primary:hover {
  background: #333;
}
.dw-btn--ghost {
  background: transparent;
  color: var(--dw-ink) !important;
}
.dw-btn--ghost:hover {
  background: var(--dw-ink);
  color: #fff !important;
}

/* ---------- トップ：ヒーロー ---------- */
/* トップページだけ、背景色のある帯を画面幅いっぱいに広げる（中身は各 inner / .ec-role で幅を制限） */
.front_page .ec-layoutRole .ec-layoutRole__contents {
  max-width: none;
}
.dw-hero {
  background: var(--dw-bg-soft);
  border-bottom: 1px solid var(--dw-line);
}
/* スマホは商品が早く見えるよう、余白を詰めてイラストを出さない（PCは下の @media で広げる） */
.dw-hero__inner {
  max-width: 1130px;
  margin: 0 auto;
  padding: 32px 20px 40px;
  box-sizing: border-box;
}
.dw-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 14px;
  border: 1px solid var(--dw-line);
  border-radius: 999px;
  background: var(--dw-bg);
  font-family: var(--dw-font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--dw-ink);
}
.dw-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dw-accent);
}
.dw-hero__eyebrow {
  margin: 0 0 12px;
  font-family: var(--dw-font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--dw-muted);
}
.dw-hero__title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--dw-ink);
}
.dw-hero__lead {
  max-width: 560px;
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--dw-text);
}
.dw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.dw-br-pc {
  display: none;
}
.dw-hero__visual {
  display: none;
  text-align: center;
}
.dw-hero__visual img {
  width: 100%;
  max-width: 420px;
  height: auto;
}

/* 開店準備中のお知らせ */
.dw-notice {
  padding: 32px 20px 0;
}
.dw-notice__inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 1090px;
  margin: 0 auto;
  padding: 20px 24px;
  border: 1px solid var(--dw-line);
  border-left: 4px solid var(--dw-ink);
  border-radius: var(--dw-radius);
  box-sizing: border-box;
}
.dw-notice__icon {
  margin-top: 3px;
  font-size: 20px;
  color: var(--dw-ink);
}
.dw-notice__title {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--dw-ink);
}
.dw-notice__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--dw-text);
}
.dw-notice__text a {
  text-decoration: underline;
}

/* ---------- トップ：コンセプト ---------- */
.dw-concept__list {
  display: grid;
  gap: 16px;
}
.dw-concept__item {
  padding: 28px 24px;
  border: 1px solid var(--dw-line);
  border-radius: var(--dw-radius);
  background: var(--dw-bg);
}
.dw-concept__num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--dw-font-en);
  font-size: 14px;
  font-weight: 700;
  color: var(--dw-accent);
}
.dw-concept__title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--dw-ink);
}
.dw-concept__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
}

/* ---------- トップ：取扱商品 ---------- */
/* スマホは2列で名前だけにして高さを抑える（説明文はPCだけ）。4カテゴリなので2列×2段、PCは4列×1段 */
.dw-lineup {
  background: var(--dw-bg-soft);
}
.dw-section.dw-lineup {
  padding: 40px 0;
}
.dw-lineup .dw-heading {
  margin-bottom: 20px;
}
.dw-lineup__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dw-lineup__item {
  border-radius: var(--dw-radius);
  background: var(--dw-bg);
  text-align: center;
}
.dw-lineup__link {
  display: block;
  height: 100%;
  padding: 16px 6px;
  border-radius: var(--dw-radius);
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s;
}
.dw-lineup__link:hover,
.dw-lineup__link:focus-visible {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}
.dw-lineup__icon {
  margin-bottom: 8px;
  font-size: 22px;
  color: var(--dw-ink);
}
.dw-lineup__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--dw-ink);
}
.dw-lineup__text {
  display: none;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dw-muted);
}

/* ---------- トップ：おすすめ商品 ---------- */
/* おすすめ商品管理プラグインのブロック(Block/recommend_product_block.twig)。スマホ2列、PCは3列 */
.dw-pickup__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dw-pickup__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.dw-pickup__link:hover {
  text-decoration: none;
}
/* 切り抜き写真(白背景の商品だけ)も部屋の写真も、同じ白いタイルに余白をとって収める。
   切り抜き写真を枠いっぱいに出すと実物より大きく見えるため。白背景の写真がタイルに溶け込むよう、タイルは白にして線で囲む */
.dw-pickup__image {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 7%;
  object-fit: contain;
  border: 1px solid var(--dw-line);
  border-radius: var(--dw-radius);
  background: var(--dw-bg);
}
/* 商品名・紹介文は2行で省略して、カードの高さをそろえる */
.dw-pickup__name,
.dw-pickup__comment {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.dw-pickup__name {
  margin: 10px 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--dw-ink);
}
.dw-pickup__comment {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dw-muted);
}
.dw-pickup__comment br {
  display: none;
}
.dw-pickup__price {
  margin: 0;
  font-family: var(--dw-font-en);
  font-size: 16px;
  font-weight: 700;
  color: var(--dw-ink);
}
.dw-pickup__more {
  margin: 32px 0 0;
  text-align: center;
}

/* ---------- 見出し・ボタン（標準パーツ） ---------- */
.ec-secHeading {
  color: var(--dw-ink);
}
.ec-secHeading .ec-secHeading__en {
  font-family: var(--dw-font-en);
}
.ec-pageHeader h1 {
  border-top: none;
  border-bottom: 1px solid var(--dw-line);
  font-weight: 700;
  color: var(--dw-ink);
}
.ec-blockBtn--action,
.ec-inlineBtn--action {
  background-color: var(--dw-ink);
  border-color: var(--dw-ink);
  border-radius: 6px;
}
.ec-blockBtn--action:hover,
.ec-blockBtn--action:focus,
.ec-blockBtn--action:active,
.ec-inlineBtn--action:hover,
.ec-inlineBtn--action:focus,
.ec-inlineBtn--action:active {
  background-color: #333;
  border-color: #333;
}
.ec-blockBtn--cancel {
  border-radius: 6px;
}

/* ---------- 文書ページ（ガイド・規約など） ---------- */
.dw-doc {
  font-size: 15px;
  line-height: 1.9;
}
.dw-doc h2 {
  margin: 40px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--dw-line);
  font-size: 18px;
  font-weight: 700;
  color: var(--dw-ink);
}
.dw-doc ul,
.dw-doc ol {
  padding-left: 1.5em;
}
.dw-doc li + li {
  margin-top: 4px;
}
.dw-doc a {
  text-decoration: underline;
}
.dw-doc__date {
  margin-top: 40px;
  font-size: 13px;
  color: var(--dw-muted);
  text-align: right;
}

/* ---------- 商品一覧 ---------- */
/* 標準テンプレートの p には class がないため、並び順で指定する（画像 → 商品名 → 一覧コメント → 価格） */
.ec-shelfGrid__item > a > p:nth-of-type(2) {
  margin: 10px 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--dw-ink);
}
/* 一覧コメントは小さく薄くして、2行で省略する */
.ec-shelfGrid__item > a > p:nth-of-type(3):not(.price02-default) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dw-muted);
}
.ec-shelfGrid__item > a > p:nth-of-type(3):not(.price02-default) br {
  display: none;
}
.ec-shelfGrid__item .price02-default {
  margin: 0 0 12px;
  font-family: var(--dw-font-en);
  font-size: 16px;
  font-weight: 700;
  color: var(--dw-ink);
}

/* ---------- 商品詳細 ---------- */
/* カートボタンの下の送料・支払方法・発送・初期不良の案内 */
.dw-purchaseInfo {
  box-sizing: border-box;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--dw-line);
  border-radius: var(--dw-radius);
  background: var(--dw-bg-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--dw-text);
}
.dw-purchaseInfo > div {
  display: flex;
  gap: 12px;
  padding: 4px 0;
}
.dw-purchaseInfo dt {
  flex: 0 0 4.5em;
  font-weight: 700;
  color: var(--dw-ink);
}
.dw-purchaseInfo dd {
  margin: 0;
}
/* 「関連カテゴリ」のリンクと同じ色にして、押せることが分かるようにする */
.dw-purchaseInfo__link {
  margin: 8px 0 16px;
  font-size: 13px;
}
.dw-purchaseInfo__link a {
  color: #33A8D0;
  text-decoration: underline;
}

/* ---------- タグ ---------- */
/* 商品一覧・おすすめ商品のカード(Product/list.twig・Block/recommend_product_block.twig)と、商品詳細のタグを同じ小さなバッジにそろえる */
.dw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.dw-tag,
.ec-productRole .ec-productRole__tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--dw-ink);
  border-radius: 999px;
  background: var(--dw-bg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--dw-ink);
}

/* ---------- フッター ---------- */
.ec-footerRole.dw-footer {
  margin-top: 48px;
  padding: 0;
  border-top: none;
  background: var(--dw-ink);
  color: #cfcfcf;
}
.dw-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 48px 20px 36px !important;
}
.dw-logo--footer,
.dw-logo--footer:hover {
  color: #fff !important;
}
.dw-logo--footer .dw-logo__mark {
  width: 36px;
  height: 36px;
  border: 1px solid #444;
  border-radius: 8px;
}
.dw-logo--footer .dw-logo__name {
  font-size: 20px;
}
.dw-logo--footer .dw-logo__kana {
  color: #9a9a9a;
}
.dw-footer__desc {
  margin: 14px 0 0;
  font-size: 13px;
  color: #9a9a9a;
}
.dw-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.dw-footer__heading {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.dw-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dw-footer__links li + li {
  margin-top: 8px;
}
.dw-footer__links a {
  font-size: 13px;
  color: #cfcfcf;
}
.dw-footer__links a:hover {
  color: #fff;
  text-decoration: underline;
}
.dw-footer__bottom {
  border-top: 1px solid #2c2c2c;
  padding: 16px 20px;
  text-align: center;
}
.dw-footer__copyright {
  margin: 0;
  font-family: var(--dw-font-en);
  font-size: 12px;
  color: #8a8a8a;
}

/* ---------- PC ---------- */
@media only screen and (min-width: 768px) {
  .dw-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    padding: 88px 20px 96px;
  }
  .dw-hero__badge {
    margin-bottom: 28px;
  }
  .dw-hero__title {
    margin-bottom: 20px;
  }
  .dw-hero__lead {
    margin-bottom: 32px;
  }
  .dw-hero__visual {
    display: block;
  }
  .dw-hero__visual img {
    max-width: 520px;
  }
  .dw-hero__title {
    font-size: 44px;
  }
  .dw-hero__lead {
    font-size: 16px;
  }
  .dw-br-pc {
    display: inline;
  }
  .dw-section {
    padding: 88px 0;
  }
  .dw-heading__ja {
    font-size: 26px;
  }
  .dw-concept__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  /* PCは並びの幅を狭くして、1枚を約280pxにする */
  .dw-pickup__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 24px;
    max-width: 880px;
    margin: 0 auto;
  }
  .dw-lineup__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .dw-lineup__item {
    width: calc((100% - 48px) / 4);
  }
  .dw-section.dw-lineup {
    padding: 88px 0;
  }
  .dw-lineup .dw-heading {
    margin-bottom: 32px;
  }
  .dw-lineup__link {
    padding: 32px 16px;
  }
  .dw-lineup__icon {
    margin-bottom: 12px;
    font-size: 26px;
  }
  .dw-lineup__title {
    margin-bottom: 4px;
    font-size: 15px;
  }
  .dw-lineup__text {
    display: block;
  }
  /* 案内の枠を、カート・お気に入りのボタン(本体CSS: 幅60%・最小350px)と同じ幅にする */
  .dw-purchaseInfo {
    width: 60%;
    min-width: 350px;
  }
  .ec-footerRole.dw-footer {
    margin-top: 80px;
  }
  .dw-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    max-width: 1130px;
    margin: 0 auto;
    padding: 64px 20px 48px !important;
  }
  .dw-footer__cols {
    grid-template-columns: repeat(2, 200px);
    gap: 48px;
  }
}