/*
Theme Name: Ichikawa Kaban
Theme URI: https://rectangle.work/
Author: rectangle Inc.
Author URI: https://rectangle.work/
Description: 市川鞄広様 ランドセル販売サイト用オリジナルテーマ（Welcart対応）。Figmaデザイン「【コーディング用】市川鞄広様Webサイト」準拠。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: ichikawakaban
*/

/* ==========================================================================
   Design Tokens（Figma トンマナ準拠）
   ========================================================================== */
:root {
  --color-text: #333333;
  --color-main: #013302; /* メインカラー（深緑） */
  --color-accent: #b8973d; /* アクセントカラー（金） */
  --color-bg: #f1f2ed; /* ベース背景 */
  --color-bg-sub: #d9ddd9; /* サブ背景 */
  --color-white: #ffffff;
  --font-mincho: "Zen Old Mincho", serif;
  --font-gothic: "Zen Kaku Gothic Antique", sans-serif;
  --sidebar-w: 220px;
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-gothic);
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 16px;
  line-height: 2.25; /* 36px / 16px */
  letter-spacing: 0.04em;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
a:hover {
  opacity: 0.7;
}
ul,
ol {
  list-style: none;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-mincho);
  font-weight: 500;
  color: var(--color-text);
}

/* ==========================================================================
   Layout（左サイドバー + コンテンツ・ページスクロール連動）
   ========================================================================== */
.site {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}
.site-content {
  grid-column: 2;
  grid-row: 1;
}

/* ==========================================================================
   Header（左サイドバー）
   ========================================================================== */
.site-header {
  grid-column: 1;
  grid-row: 1 / 3;
  width: var(--sidebar-w);
  background: rgba(255, 255, 255, 0.8);
  z-index: 100;
  display: flex;
  flex-direction: column;
}
.menu-toggle {
  display: none;
}
.site-header__logo-line {
  margin-top: 33.5px;
  margin-bottom: 15.5px;
  width: 220px;
  height: 0;
  border: none;
  border-top: 4px solid #013302;
  opacity: 1;
}
.site-header__logo {
  background: var(--color-main);
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 21px;
  padding-bottom: 21px;
}
.site-header__logo a {
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-weight: 400;
  font-size: 32px;
  color: var(--color-white);
  line-height: 1;
  letter-spacing: 0.2em;
}
.global-nav {
  margin: 164px 0 0 45px;
}
.global-nav li {
  margin-bottom: 26px;
  height: 24px;
}
.global-nav a {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
}
.site-header__buttons {
  margin: 24px 27px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site-header__buttons ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.global-nav + .site-header__buttons {
  margin-top: 60px;
}
.btn-side {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 164px;
  height: 47px;
  font-size: 14px;
  border: 1px solid var(--color-accent);
  background: var(--color-white);
  color: var(--color-accent);
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.btn-side:hover {
  background: var(--color-accent);
  color: var(--color-white);
  opacity: 1;
}
.btn-side--fill {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn-side--fill:hover {
  background: var(--color-white);
  color: var(--color-accent);
}
.site-header__icons {
  display: flex;
  gap: 16px;
  margin: 40px 0 40px 78px;
}
.site-header__icons img {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   共通パーツ
   ========================================================================== */
/* セクション見出し（英語ラベル + 斜線 + 日本語見出し） */
.sec-label {
  font-family: var(--font-mincho);
  color: var(--color-accent);
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sec-label::before {
  content: "";
  width: 21px;
  height: 1px;
  background: var(--color-accent);
  transform: rotate(-45deg);
}
.sec-title {
  font-size: 40px;
  line-height: 2;
  color: var(--color-text);
}
/* 下線付きテキストリンク */
.link-underline {
  display: inline-block;
  font-family: var(--font-mincho);
  font-size: 16px;
  color: var(--color-main);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-main);
  position: relative;
  transition: color 0.3s ease;
}
.link-underline:hover {
  color: var(--color-accent);
  opacity: 1;
}
/* 枠線ボタン */
.btn-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 60px;
  border: 1px solid var(--color-accent);
  background: var(--color-white);
  color: var(--color-accent);
  font-size: 14px;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.btn-frame:hover {
  background: var(--color-accent);
  color: var(--color-white);
  opacity: 1;
}
/* カテゴリバッジ */
.badge-cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 141px;
  height: 40px;
  padding: 0 12px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 14px;
  line-height: 1;
}
.inner {
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 60px;
}

/* ==========================================================================
   News カード（TOP / お知らせ一覧 共通）
   ========================================================================== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 77px 43px;
}
.news-card {
  display: block;
  position: relative;
}
.news-card__thumb {
  background: var(--color-white);
  height: 247px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.news-card__thumb img {
  max-height: 195px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.news-card:hover .news-card__thumb img {
  transform: scale(1.05);
}
.news-card .badge-cat {
  position: absolute;
  top: 206px;
  left: 0;
}
.news-card__date {
  font-family: var(--font-mincho);
  font-size: 14px;
  color: var(--color-main);
  letter-spacing: 0.04em;
  line-height: 2.57;
  margin-top: 4px;
}
.news-card__title {
  font-size: 16px;
  line-height: 1.625;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   TOP（front-page.php）
   ========================================================================== */
.mv {
  position: relative;
  margin-left: calc(-1 * var(--sidebar-w));
}
.mv__img img {
  width: 100%;
  height: 100vh;
  min-height: 700px;
  object-fit: cover;
}
.mv__copy {
  position: absolute;
  top: 24%;
  left: 400px;
  font-family: var(--font-mincho);
  font-size: 61px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--color-text);
}
.mv__copy .u-gold {
  color: var(--color-accent);
}

/* 導入（縦書きキャッチ） */
.top-intro {
  padding: 120px 0 100px;
  position: relative;
}
.top-intro__catch {
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: 0.18em;
  height: 480px;
}
.top-intro__catch .u-gold {
  color: var(--color-accent);
}
.top-intro__lead {
  font-size: 18px;
  line-height: 2.44;
  letter-spacing: 0.04em;
  margin-top: 40px;
}
.top-intro__row {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  justify-content: space-between;
}
.top-intro__img-main {
  flex: 1;
  min-width: 0;
}
.top-intro__img-sub {
  width: 291px;
  margin-top: 270px;
}

/* News */
.top-news {
  padding: 100px 0;
}
.top-news__more {
  text-align: right;
  margin-top: 60px;
}

/* Concept */
.top-concept {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.top-concept__row {
  display: flex;
  gap: 70px;
  align-items: flex-start;
}
.top-concept__text {
  width: 493px;
  flex-shrink: 0;
}
.top-concept__img {
  flex: 1;
  min-width: 0;
  border-radius: 0 0 0 50px;
  overflow: hidden;
}
.top-concept .link-underline {
  margin-top: 60px;
}

/* Brand */
.top-brand {
  padding: 140px 0;
  background: url(images/top/brand-bg-leaves.jpg) center / cover no-repeat;
}
.top-brand__row {
  display: flex;
  gap: 80px;
  justify-content: space-between;
  align-items: flex-start;
}
.top-brand__desc {
  width: 571px;
}
.top-brand__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 82px;
  margin-top: 100px;
}
.feature-card__img {
  border: 1px solid var(--color-accent);
  aspect-ratio: 1 / 1;
  padding: 10px;
}
.feature-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-card__name {
  font-family: var(--font-mincho);
  font-size: 30px;
  line-height: 2.66;
  border-bottom: 1px solid var(--color-text);
  display: block;
  text-align: left;
}
.feature-card__text {
  text-align: center;
  margin-top: 16px;
}
.top-brand__more {
  text-align: center;
  margin-top: 80px;
}

/* Safety */
.top-safety {
  padding: 120px 0 160px;
  position: relative;
}
.top-safety__row {
  display: flex;
  align-items: center;
  margin-top: 60px;
  position: relative;
}
.top-safety__img {
  width: 53%;
  border-radius: 0 50px 50px 0;
  overflow: hidden;
}
.top-safety__panel {
  background: var(--color-white);
  border-radius: 50px 0 0 50px;
  padding: 80px 90px 80px 145px;
  width: 52.5%;
  margin-left: -5.5%;
  position: relative;
  z-index: 1;
}
.top-safety__mark {
  width: 122px;
  margin-top: 30px;
}
.top-safety__bag {
  position: absolute;
  right: 0;
  bottom: -180px;
  width: 370px;
  transform: rotate(3deg);
  z-index: 2;
}

/* Product スライダー */
.top-product {
  padding: 120px 0;
}
.top-product__scroll {
  display: flex;
  gap: 170px;
  overflow-x: auto;
  padding: 20px 0 40px;
  scroll-snap-type: x mandatory;
}
.product-card {
  flex: 0 0 354px;
  text-align: center;
  scroll-snap-align: start;
}
.product-card__img img {
  width: 100%;
  height: 371px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.product-card:hover .product-card__img img {
  transform: translateY(-8px);
}
.product-card__name {
  font-size: 18px;
  line-height: 1.44;
  margin-top: 22px;
}
.product-card__price {
  font-family: var(--font-mincho);
  font-size: 16px;
  color: var(--color-accent);
  margin-top: 8px;
}
.top-product__nav {
  display: flex;
  gap: 60px;
  margin-top: 10px;
}
.top-product__nav button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 28px;
  color: var(--color-text);
}
.top-product__more {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}

/* CTA バナー */
.top-cta {
  padding: 80px 0 160px;
}
.cta-banner {
  display: flex;
  background: var(--color-white);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  min-height: 242px;
  transition: box-shadow 0.3s ease;
}
.cta-banner:hover {
  box-shadow: 0 10px 30px rgba(1, 51, 2, 0.15);
  opacity: 1;
}
.cta-banner__imgs {
  position: relative;
  width: 280px;
  flex-shrink: 0;
}
.cta-banner__imgs img:first-child {
  position: absolute;
  left: 31px;
  top: 13px;
  width: 153px;
}
.cta-banner__imgs img:last-child {
  position: absolute;
  left: 111px;
  top: 69px;
  width: 150px;
}
.cta-banner__text {
  flex: 1;
  padding: 82px 20px 0 50px;
}
.cta-banner__sub {
  font-weight: 500;
  font-size: 16px;
  line-height: 40px;
  letter-spacing: 0;
  color: var(--color-accent);
}
.cta-banner__main {
  font-weight: 700;
  font-size: 32px;
  line-height: 55px;
  letter-spacing: 0;
  color: var(--color-main);
}
.cta-banner__green {
  background: var(--color-main);
  color: var(--color-white);
  width: 43%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: 103px;
  font-size: 24px;
  line-height: 1.66;
  position: relative;
}
.cta-banner__green::after {
  content: "→";
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  grid-column: 2;
  grid-row: 2;
  background: var(--color-main);
  color: var(--color-white);
  position: relative;
}
.site-footer__totop {
  position: absolute;
  right: 60px;
  top: -63px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 2;
}
.site-footer__totop img {
  width: 44px;
}
.site-footer__totop span {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-main);
  line-height: 1;
}
.site-footer__inner {
  padding: 86px 120px 40px;
}
.site-footer__nav {
  display: flex;
  gap: 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  padding-top: 38px;
}
.site-footer__nav ul li {
  line-height: 3.1;
}
.site-footer__nav a {
  font-size: 16px;
  color: var(--color-white);
}
.site-footer__icons {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}
.site-footer__icons img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}
.site-footer__copy {
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  margin-top: 40px;
  padding-top: 10px;
  text-align: right;
  font-size: 14px;
  line-height: 3.5;
}

/* ==========================================================================
   下層ページ 共通
   ========================================================================== */
.page-hero {
  padding: 120px 0 60px;
}
.page-hero__title {
  font-size: 40px;
  line-height: 2;
}
.entry-content {
  padding-bottom: 120px;
}
.entry-content p {
  margin-bottom: 2em;
}

/* パンくず */
.breadcrumb {
  text-align: right;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 3.1;
  padding-right: 120px;
}
.breadcrumb .u-green {
  color: var(--color-main);
}
.breadcrumb a {
  color: var(--color-main);
}

/* 画像付きページヘッダー */
.page-hero--image {
  padding: 0;
  position: relative;
}
.page-hero__img img {
  width: 100%;
  height: 460px;
  object-fit: cover;
}
.page-hero__heading {
  padding: 60px 0 0 80px;
}
.page-hero__title-lg {
  font-size: 61px;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.page-hero__heading .sec-label {
  margin-top: 16px;
}

/* ==========================================================================
   コンセプトページ
   ========================================================================== */
.concept-intro {
  padding: 100px 0;
}
.concept-intro__row {
  display: flex;
  gap: 80px;
  align-items: center;
  justify-content: space-between;
}
.concept-intro__sub {
  margin-top: 40px;
}
.concept-intro__img {
  flex: 1;
  min-width: 0;
  max-width: 640px;
}

.concept-block {
  padding: 80px 0;
}
.concept-block__row {
  display: flex;
  gap: 90px;
  align-items: flex-start;
  justify-content: space-between;
}
.concept-block--reverse .concept-block__row {
  flex-direction: row;
}
.concept-block__text {
  max-width: 749px;
}
.concept-block__text .sec-title {
  margin-bottom: 40px;
}
.concept-block__text p {
  margin-bottom: 2em;
}
.concept-block__img {
  flex: 1;
  min-width: 0;
  position: relative;
}
.concept-block__img-sub {
  margin-top: 40px;
}

.concept-points {
  background: var(--color-main);
  padding: 120px 0;
  color: var(--color-white);
}
.concept-points__title {
  font-family: var(--font-mincho);
  font-size: 40px;
  color: var(--color-white);
  text-align: center;
  margin-bottom: 80px;
}
.concept-points__scroll {
  display: flex;
  gap: 55px;
  overflow-x: auto;
  padding: 0 60px 40px;
  scroll-snap-type: x mandatory;
}
.point-item {
  flex: 0 0 1035px;
  display: flex;
  gap: 50px;
  scroll-snap-align: start;
}
.point-item__text {
  width: 408px;
  flex-shrink: 0;
}
.point-item__heading {
  font-family: var(--font-mincho);
  font-size: 26px;
  color: var(--color-white);
  line-height: 3;
}
.point-item__line {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  margin-bottom: 30px;
}
.point-item__img {
  width: 577px;
}
.point-item__img img {
  width: 100%;
  height: 387px;
  object-fit: cover;
}

.concept-bags {
  padding: 100px 0 0;
  background: url(images/top/brand-bg-leaves.jpg) center / cover no-repeat;
}
.concept-bags__row {
  display: flex;
  align-items: flex-end;
  gap: 35px;
  padding-bottom: 90px;
}
.concept-bags__row img {
  width: 240px;
  object-fit: contain;
}
.concept-bags__row .btn-frame {
  margin-left: auto;
  margin-bottom: 40px;
}
.concept-bags__strip {
  position: relative;
}
.concept-bags__strip img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  filter: brightness(0.5);
}

.concept-message {
  padding: 120px 0 60px;
  position: relative;
}
.concept-message .sec-title {
  margin-bottom: 40px;
}
.concept-message__sign {
  margin-top: 40px;
  font-family: var(--font-mincho);
  font-size: 20px;
  line-height: 2;
}
.concept-message__sign strong {
  font-family: var(--font-gothic);
  font-size: 18px;
}
.concept-message__photos {
  display: flex;
  gap: 30px;
  margin-top: 80px;
}
.concept-message__photos img {
  width: calc((100% - 60px) / 3);
  height: 348px;
  object-fit: cover;
}

.company-profile {
  padding: 80px 0 140px;
}
.company-profile__title {
  text-align: center;
  margin-bottom: 60px;
}
.company-profile__table {
  max-width: 860px;
  margin: 0 auto;
}
.company-profile__table > div {
  display: flex;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-bg-sub);
}
.company-profile__table dt {
  width: 180px;
  flex-shrink: 0;
}
.company-profile__table dd {
  flex: 1;
}

/* ==========================================================================
   ユーティリティ
   ========================================================================== */
.u-center {
  text-align: center;
}
.u-gold {
  color: var(--color-accent);
}
.u-green {
  color: var(--color-main);
}
.u-required {
  color: #f41919;
  display: block;
  font-size: 16px;
}
.u-underline {
  text-decoration: underline;
}
.inner--narrow {
  max-width: 1320px;
}

/* ==========================================================================
   ブランドページ
   ========================================================================== */
.page-hero--brand {
  padding-top: 0;
  position: relative;
}
.page-hero--brand .page-hero__row {
  display: flex;
  align-items: stretch;
}
.page-hero--brand .page-hero__heading {
  flex: 1;
  padding: 100px 0 60px 80px;
}
.page-hero__img--half img {
  width: 100%;
  height: 460px;
  object-fit: cover;
}

.brand-intro {
  padding: 100px 0;
}
.brand-intro__sub {
  font-family: var(--font-mincho);
  font-size: 20px;
  margin: 8px 0 40px;
}
.brand-intro__photo {
  max-width: 900px;
  margin: 60px auto 0;
}

.brand-six-years {
  padding: 100px 0;
  background: url(images/brand/six-years-bg.png) center / cover no-repeat;
}
.brand-six-years__panel {
  background: rgba(255, 255, 255, 0.9);
  padding: 70px 80px;
  display: flex;
  gap: 60px;
  align-items: center;
}
.brand-six-years__text {
  flex: 1;
}
.brand-six-years__text .sec-title {
  margin-bottom: 30px;
}
.brand-six-years__img {
  width: 360px;
  flex-shrink: 0;
}

.brand-kodawari {
  padding: 120px 0 0;
}
.brand-kodawari__title {
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-size: 40px;
  letter-spacing: 0.3em;
  margin: 0 auto 60px;
  height: 340px;
}
.brand-kodawari__lead {
  margin-bottom: 100px;
}

.kodawari-block {
  display: flex;
  gap: 80px;
  align-items: center;
  margin-bottom: 100px;
}
.kodawari-block--reverse {
  flex-direction: row-reverse;
}
.kodawari-block__img {
  width: 48%;
  flex-shrink: 0;
}
.kodawari-block__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.kodawari-block__text {
  flex: 1;
}
.kodawari-block__text h3 {
  font-family: var(--font-mincho);
  font-size: 30px;
  margin-bottom: 24px;
}

.func-scroll {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  padding: 40px 60px 60px;
}
.func-card {
  flex: 0 0 300px;
  position: relative;
}
.func-card__img {
  background: var(--color-white);
}
.func-card__img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.func-card .badge-cat {
  margin-top: -20px;
  position: relative;
}
.func-card p {
  font-size: 14px;
  line-height: 1.8;
  margin-top: 12px;
}

.brand-support {
  padding: 100px 0;
}
.brand-support__row {
  display: flex;
  align-items: center;
  margin: 60px 0 80px;
}
.brand-support__img {
  width: 50%;
}
.brand-support__img img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 0 50px 50px 0;
}
.brand-support__panel {
  background: var(--color-white);
  border-radius: 50px 0 0 50px;
  padding: 70px 80px 70px 100px;
  width: 55%;
  margin-left: -5%;
  position: relative;
  z-index: 1;
}
.brand-support__panel h3 {
  font-family: var(--font-mincho);
  font-size: 30px;
  margin-bottom: 24px;
}
.brand-support__mark {
  width: 120px;
  margin-top: 20px;
}

.repair-info > div {
  margin-bottom: 40px;
}
.repair-info dt {
  margin-bottom: 8px;
}
.repair-info dd {
  line-height: 2.25;
}

.repair-flow {
  padding: 80px 0 120px;
}
.repair-steps {
  margin-top: 60px;
  position: relative;
}
.repair-steps::before {
  content: "";
  position: absolute;
  left: 43px;
  top: 20px;
  bottom: 60px;
  width: 1px;
  background: var(--color-accent);
}
.repair-step {
  display: flex;
  gap: 50px;
  margin-bottom: 50px;
  position: relative;
}
.repair-step__no {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-mincho);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1.2;
  z-index: 1;
}
.repair-step__no--last {
  background: var(--color-accent);
  color: var(--color-white);
}
.repair-step__no span {
  font-size: 13px;
}
.repair-step__no strong {
  font-size: 24px;
}
.repair-step__card {
  background: var(--color-white);
  padding: 34px 50px;
  flex: 1;
}
.repair-step__card h3 {
  font-family: var(--font-mincho);
  font-size: 22px;
  margin-bottom: 10px;
}

.brand-products {
  background: var(--color-main);
  padding: 100px 0 120px;
}
.brand-products__title {
  font-family: var(--font-mincho);
  font-size: 40px;
  color: var(--color-white);
  margin-bottom: 60px;
}
.product-card--dark .product-card__name {
  color: var(--color-white);
}
.top-product__nav--light button {
  color: var(--color-white);
}

/* ==========================================================================
   お問い合わせページ
   ========================================================================== */
.contact-lead {
  padding: 100px 0 60px;
}
.contact-lead .sec-title {
  margin-bottom: 30px;
}
.contact-tel {
  padding: 40px 0 80px;
  position: relative;
}
.contact-tel__box {
  background: var(--color-white);
  border-radius: 22px;
  max-width: 626px;
  margin: 0 auto;
  padding: 30px 40px 40px;
  text-align: center;
}
.contact-tel__box h3 {
  font-family: var(--font-mincho);
  font-size: 30px;
  line-height: 2.2;
}
.contact-tel__number {
  font-weight: 700;
  font-size: 55px;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.contact-tel__number img {
  width: 48px;
}
.contact-tel__bag {
  position: absolute;
  right: 40px;
  top: 0;
  width: 390px;
  transform: rotate(18deg);
}
.contact-tel__bag img {
  border-radius: 65px;
}

.contact-form {
  padding: 60px 0 140px;
}
.contact-form__title {
  font-family: var(--font-mincho);
  font-size: 30px;
  line-height: 2.6;
}
.form-steps {
  display: flex;
  justify-content: center;
  gap: 274px;
  margin: 40px 0 80px;
  position: relative;
}
.form-steps::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 50%;
  transform: translateX(-50%);
  width: 666px;
  height: 1px;
  background: var(--color-bg-sub);
}
.form-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.form-steps__no {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-bg-sub);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-steps li.is-current .form-steps__no {
  background: var(--color-accent);
}
.form-steps__label {
  color: var(--color-bg-sub);
}
.form-steps li.is-current .form-steps__label {
  color: var(--color-text);
}

.contact-form__table {
  max-width: 1250px;
  margin: 0 auto;
}
.form-row {
  display: flex;
}
.form-row__label {
  width: 257px;
  flex-shrink: 0;
  background: var(--color-bg-sub);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.16);
  padding: 30px 0 30px 47px;
}
.form-row__input {
  flex: 1;
  background: var(--color-white);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.16);
  padding: 30px 54px;
  display: flex;
  align-items: center;
}
.form-row__input input,
.form-row__input textarea {
  width: 100%;
  max-width: 318px;
  border: 1px solid var(--color-bg-sub);
  padding: 16px;
  font-family: var(--font-gothic);
  font-size: 16px;
  background: var(--color-bg);
}
.form-row--textarea .form-row__input textarea {
  max-width: 890px;
}
.contact-form__submit {
  text-align: center;
  margin-top: 60px;
}
.btn-frame--green {
  border-color: var(--color-main);
  color: var(--color-main);
  margin: 0 auto;
}
.btn-frame--green:hover {
  background: var(--color-main);
  color: var(--color-white);
}

/* ==========================================================================
   プライバシーポリシー
   ========================================================================== */
.privacy {
  padding: 80px 0 120px;
}
.privacy p {
  margin-bottom: 2em;
}
.privacy__heading {
  font-family: var(--font-mincho);
  font-size: 30px;
  color: var(--color-accent);
  line-height: 2.6;
  border-top: 1px solid var(--color-bg-sub);
  margin-top: 40px;
}
.privacy__date {
  text-align: right;
  margin-top: 80px;
}

/* ==========================================================================
   お知らせ 一覧・詳細
   ========================================================================== */
.page-hero--news {
  padding: 0;
  background: var(--color-white);
  position: relative;
}
.page-hero--news .breadcrumb {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.page-hero--news__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 340px;
}
.page-hero--news .page-hero__heading {
  padding: 60px 0 60px 80px;
}
.page-hero--news__img {
  width: 45%;
  align-self: stretch;
}
.page-hero--news__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.news-layout {
  display: flex;
  gap: 60px;
  padding-top: 100px;
  padding-bottom: 120px;
}
.news-layout__main {
  flex: 1;
  min-width: 0;
}
.news-grid--col2 {
  grid-template-columns: repeat(2, 1fr);
}
.news-grid--col3 {
  grid-template-columns: repeat(3, 1fr);
}

.news-sidebar {
  width: 300px;
  flex-shrink: 0;
}
.news-sidebar__heading {
  font-family: var(--font-mincho);
  font-size: 18px;
  color: var(--color-main);
  border-left: 4px solid var(--color-main);
  padding-left: 12px;
  margin-bottom: 20px;
}
.news-sidebar__latest li {
  border-bottom: 1px dashed var(--color-bg-sub);
  padding: 12px 0;
}
.news-sidebar__date {
  display: block;
  font-family: var(--font-mincho);
  font-size: 13px;
  color: var(--color-main);
}
.news-sidebar__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.7;
}
.news-sidebar__banners {
  margin-top: 50px;
}
.news-sidebar__banner {
  display: block;
  margin-bottom: 16px;
}

.pagination {
  margin-top: 80px;
  text-align: center;
}
.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  font-family: var(--font-mincho);
}
.pagination .page-numbers.current {
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 50%;
}
.pagination .prev,
.pagination .next {
  font-size: 14px;
}

.news-single__eyecatch {
  margin-bottom: 40px;
}
.news-single__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}
.news-single__title {
  font-size: 32px;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* 記事本文（WYSIWYG想定） */
.entry-content h2 {
  font-family: var(--font-mincho);
  font-size: 28px;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 8px;
  margin: 2.5em 0 1em;
}
.entry-content h3 {
  font-size: 22px;
  border-bottom: 1px solid var(--color-bg-sub);
  padding-bottom: 8px;
  margin: 2em 0 1em;
}
.entry-content h4 {
  font-size: 18px;
  margin: 2em 0 1em;
}
.entry-content ul {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: 2em;
}
.entry-content img {
  margin: 1em 0;
}

.related-news {
  margin-top: 100px;
}
.related-news__heading {
  font-family: var(--font-mincho);
  font-size: 28px;
  margin-bottom: 40px;
}

.post-nav {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 80px;
  font-size: 14px;
}
.post-nav__list {
  font-weight: 700;
}

/* ==========================================================================
   Welcart 商品一覧・詳細
   ========================================================================== */
.shop-utility {
  display: flex;
  gap: 40px;
  padding: 60px 0 40px;
}
.shop-utility__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.shop-utility__btn--cart img {
  width: 22px;
  background: var(--color-main);
  padding: 6px;
  box-sizing: content-box;
}

.item-filter {
  margin-bottom: 60px;
}
.item-filter__heading {
  font-family: var(--font-gothic);
  color: var(--color-accent);
  font-size: 16px;
  border-left: 2px solid var(--color-accent);
  padding-left: 16px;
  margin-bottom: 24px;
}
.item-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
}
.item-filter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 63px;
  background: var(--color-white);
  font-size: 15px;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.item-filter__btn:hover {
  background: var(--color-accent);
  color: var(--color-white);
  opacity: 1;
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 90px 90px;
}
.item-card {
  display: block;
  position: relative;
  text-align: center;
}
.item-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-main);
  color: var(--color-white);
  font-size: 14px;
  padding: 7px 16px;
  z-index: 1;
}
.item-card__img img {
  width: 100%;
  height: 400px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.item-card:hover .item-card__img img {
  transform: translateY(-8px);
}
.item-card__name {
  font-size: 18px;
  margin-top: 20px;
}
.item-card .product-card__price {
  display: block;
  margin-top: 4px;
}
.item-card__colors {
  font-family: var(--font-mincho);
  font-size: 14px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.item-card__colors span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* 商品詳細 */
.item-purchase {
  display: flex;
  gap: 70px;
  padding: 60px 0 80px;
}
.item-purchase__gallery {
  width: 45%;
  flex-shrink: 0;
}
.item-purchase__main-img {
  background: var(--color-white);
  padding: 30px;
}
.item-purchase__main-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.item-purchase__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.item-purchase__thumbs img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
}
.item-purchase__info {
  flex: 1;
}
.item-purchase__name {
  font-family: var(--font-mincho);
  font-size: 32px;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.item-purchase__price {
  font-family: var(--font-mincho);
  font-size: 28px;
  color: var(--color-accent);
  margin-bottom: 30px;
}
.item-purchase__tax {
  font-size: 14px;
  color: var(--color-text);
}
.item-purchase__note {
  font-size: 13px;
  color: #888;
  margin-top: 20px;
}

/* Welcart が出力する SKU テーブル・カートボタンの基本調整 */
#itempage .field_price {
  font-family: var(--font-mincho);
  color: var(--color-accent);
}
#itempage .skubutton,
#itempage input[type="submit"] {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1px solid var(--color-accent);
  padding: 14px 40px;
  font-size: 16px;
  font-family: var(--font-gothic);
  cursor: pointer;
  transition: opacity 0.3s ease;
}
#itempage .skubutton:hover {
  opacity: 0.7;
}
#itempage .skuform select,
#itempage .quantity input {
  border: 1px solid var(--color-bg-sub);
  padding: 10px;
  font-size: 16px;
  background: var(--color-white);
}

.item-guarantee {
  padding: 40px 0;
}
.item-guarantee__box {
  background: var(--color-white);
  border: 2px solid var(--color-accent);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px;
}
.item-guarantee__catch {
  font-family: var(--font-mincho);
  font-size: 32px;
  color: var(--color-main);
}
.item-guarantee__catch strong {
  font-size: 48px;
  color: var(--color-accent);
}
.item-guarantee__box img {
  width: 100px;
}

.item-features {
  padding: 60px 0;
}
.item-features .sec-title {
  margin-bottom: 80px;
}
.item-spec {
  padding: 40px 0 80px;
}
.item-spec__table {
  max-width: 860px;
  margin: 40px auto 0;
}
.item-others {
  padding: 60px 0 100px;
}
.item-others .sec-title {
  margin-bottom: 60px;
}

/* Welcart カート・会員ページ（プラグイン出力）の基本調整 */
.usces_cart_page table,
.usces_member_page table {
  background: var(--color-white);
  width: 100%;
}
.usces_cart_page th,
.usces_member_page th {
  background: var(--color-bg-sub);
  font-weight: 500;
  padding: 14px;
}
.usces_cart_page td,
.usces_member_page td {
  padding: 14px;
  border-bottom: 1px solid var(--color-bg-sub);
}
.usces_cart_page input[type="submit"],
.usces_member_page input[type="submit"] {
  background: var(--color-main);
  color: var(--color-white);
  border: none;
  padding: 14px 32px;
  cursor: pointer;
}