/* ============================================================
   Antigravity 企業トップページ — style.css
   北の快適工房 完全トレース版
   Mobile-first | Breakpoints: 480px / 768px / 1024px / 1280px
   ============================================================ */

/* ============================================================
   0. Design Tokens
   ============================================================ */
:root {
  /* Colors — 北の快適工房準拠 */
  --clr-bg:          #FFFFFF;
  --clr-bg-alt:      #F8F9FA;
  --clr-bg-warm:     #F5F0E8;   /* 読み物コラム（工房だより風） */
  --clr-bg-green:    #EBF2EE;   /* 読み物コラム（快適のタネ風） */
  --clr-ticker:      #3D3D3D;
  --clr-notice:      #C53030;   /* 注意喚起ラベル */
  --clr-text:        #333333;
  --clr-heading:     #1A1A1A;
  --clr-muted:       #888888;
  --clr-link:        #2B6CB0;
  --clr-link-hover:  #3182CE;
  --clr-border:      #E8E8E8;
  --clr-border-lt:   #F0F0F0;
  --clr-footer:      #2D2D2D;
  --clr-footer-mid:  #242424;
  --clr-white:       #FFFFFF;
  --clr-navy:        #1A1A2E;

  /* Fonts */
  --font-sans:  'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;

  /* Spacing */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  48px;
  --sp-2xl: 80px;
  --sp-3xl: 112px;

  /* Header heights */
  --ticker-h:  40px;
  --subnav-h:  36px;
  --mainnav-h: 64px;
  --header-h:  calc(var(--subnav-h) + var(--mainnav-h));   /* sticky部分のみ */

  /* Layout */
  --container: 1100px;

  /* Radius */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;

  /* Shadow */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.13);

  /* Transition */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .22s;
}

/* ============================================================
   1. Reset & Base
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  color: var(--clr-text);
  background: var(--clr-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img  { max-width:100%; height:auto; display:block; }
a    { color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button { font-family:inherit; cursor:pointer; }
address{ font-style:normal; }

/* ============================================================
   2. Layout Helpers
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-md);
}
@media (min-width:768px){ .container{ padding-inline: var(--sp-xl); } }

.section { padding-block: var(--sp-2xl); }
.section--alt { background: var(--clr-bg-alt); }
@media (min-width:768px){ .section{ padding-block: var(--sp-3xl); } }

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity:1; transform:none; }

/* Section header */
.section__header { text-align:center; margin-bottom: var(--sp-xl); }
@media (min-width:768px){ .section__header{ margin-bottom:56px; } }

.section__label {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: var(--sp-xs);
}

.section__title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  font-weight: 600;
  color: var(--clr-heading);
  line-height: 1.5;
  letter-spacing: .02em;
}

/* ============================================================
   3. ① Ticker — 自動横スクロールテロップ
   ============================================================ */
.ticker {
  height: var(--ticker-h);
  background: var(--clr-ticker);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  white-space: nowrap;
  animation: ticker-scroll 28s linear infinite;
  will-change: transform;
}

.ticker:hover .ticker__track { animation-play-state: paused; }

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker__item {
  font-size: .8rem;
  color: rgba(255,255,255,.85);
  letter-spacing: .03em;
  flex-shrink: 0;
}

.ticker__link {
  color: #93C5FD;
  margin-left: var(--sp-sm);
  font-weight: 500;
  transition: color var(--dur) var(--ease);
}
.ticker__link:hover { color: #BFDBFE; }

.ticker__sep {
  color: rgba(255,255,255,.3);
  flex-shrink: 0;
}

/* ============================================================
   4. ② Header — サブナビ＋メインナビ（sticky）
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--clr-white);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease);
}
.header.scrolled { box-shadow: var(--shadow-sm); }

/* ─ 上段：サブナビ ─ */
.header__subnav {
  height: var(--subnav-h);
  border-bottom: 1px solid var(--clr-border-lt);
  background: var(--clr-bg-alt);
}
.header__subnav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.header__subnav-list {
  display: flex;
  gap: var(--sp-lg);
}
.header__subnav-list a {
  font-size: .75rem;
  color: var(--clr-muted);
  transition: color var(--dur) var(--ease);
}
.header__subnav-list a:hover { color: var(--clr-link); }

/* ─ 下段：メインヘッダー ─ */
.header__main {
  height: var(--mainnav-h);
  border-bottom: 1px solid var(--clr-border);
}
.header__main-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.header__logo { display:flex; flex-direction:row; align-items:center; gap:12px; }
.header__logo-img { display:block; height:36px; width:auto; }

/* PC グローバルナビ */
.header__nav { display:none; }

@media (min-width:1024px) {
  .header__nav { display:block; }

  .header__nav-list {
    display: flex;
    align-items: stretch;
    height: var(--mainnav-h);
  }

  .header__nav-list > li {
    display: flex;
    align-items: center;
  }

  .header__nav-list > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    height: 100%;
    position: relative;
    transition: background var(--dur) var(--ease);
  }
  .header__nav-list > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--clr-link);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease);
  }
  .header__nav-list > li > a:hover::after { transform:scaleX(1); }
  .header__nav-list > li > a:hover { background: var(--clr-bg-alt); }

  .header__nav-ja {
    font-size: .8rem;
    font-weight: 500;
    color: var(--clr-heading);
    white-space: nowrap;
  }
  .header__nav-en {
    font-size: .65rem;
    letter-spacing: .1em;
    color: var(--clr-muted);
    text-transform: uppercase;
    margin-top: 2px;
  }

  .header__nav-contact > .header__nav-ja { color: var(--clr-link); }
}

/* ─ ハンバーガー ─ */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 4px;
  transition: background var(--dur) var(--ease);
}
.hamburger:hover { background: var(--clr-bg-alt); }

.hamburger__line {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--clr-heading);
  border-radius: 1px;
  transform-origin: center;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width:1024px){ .hamburger{ display:none; } }

/* ─ Drawer ─ */
.drawer {
  position: fixed;
  top: var(--header-h);
  right: 0;
  z-index: 190;
  width: min(300px, 85vw);
  height: calc(100dvh - var(--header-h));
  background: var(--clr-white);
  border-left: 1px solid var(--clr-border);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
}
.drawer:not([hidden]) { transform: translateX(0); }

.drawer__list { padding: var(--sp-md); }

.drawer__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--sp-md);
  font-size: .9rem;
  font-weight: 500;
  color: var(--clr-text);
  border-bottom: 1px solid var(--clr-border-lt);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.drawer__link span {
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--clr-muted);
  text-transform: uppercase;
}
.drawer__link:hover { color: var(--clr-link); padding-left: calc(var(--sp-md) + 6px); }
.drawer__divider { height: 1px; background: var(--clr-border); margin: var(--sp-sm) 0; }

.drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 180;
  background: rgba(0,0,0,.35);
}
.drawer-overlay.is-active { display: block; }

/* ============================================================
   5. ③ Hero Carousel — カルーセルスライダー
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #1A1A2E;
}

.carousel {
  position: relative;
  width: 100%;
  height: clamp(340px, 65vh, 760px);
}

/* スライド */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s var(--ease);
  pointer-events: none;
}
.slide--active {
  opacity: 1;
  pointer-events: auto;
}

.slide__bg {
  position: absolute;
  inset: 0;
}
.slide__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

.slide__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(26,26,46,.75) 0%,
    rgba(26,26,46,.45) 55%,
    rgba(26,26,46,.08) 100%
  );
}

/* スマホ時：スライド3テキストを右寄せ（人物・パッケージに被らない） */
@media (max-width: 768px) {
  .slide--sp-right .slide__overlay {
    background: linear-gradient(
      to left,
      rgba(26,26,46,.75) 0%,
      rgba(26,26,46,.45) 55%,
      rgba(26,26,46,.08) 100%
    );
  }
  .slide--sp-right .slide__content {
    margin-left: auto;
    text-align: right;
    align-items: flex-end;
  }
}

.slide__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-2xl);
  max-width: 600px;
}

.slide__eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.4);
  padding: 4px 14px;
  border-radius: var(--r-xs);
  margin-bottom: var(--sp-md);
  width: fit-content;
}

.slide__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 600;
  color: var(--clr-white);
  line-height: 1.4;
  letter-spacing: .04em;
  margin-bottom: var(--sp-md);
}

.slide__body {
  font-size: clamp(.88rem, 2vw, 1rem);
  color: rgba(255,255,255,.82);
  line-height: 1.9;
  margin-bottom: var(--sp-xl);
}

.slide__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  width: fit-content;
  min-height: 48px;
  padding: 12px 28px;
  background: var(--clr-white);
  color: var(--clr-navy);
  font-size: .88rem;
  font-weight: 500;
  border-radius: var(--r-sm);
  letter-spacing: .04em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.slide__cta:hover {
  background: rgba(255,255,255,.88);
}

/* 縦書きテキスト装飾 */
.slide__vertical-text {
  display: none;
  position: absolute;
  right: clamp(1.5rem, 4vw, 4rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: clamp(.75rem, 1.2vw, .95rem);
  font-weight: 400;
  color: rgba(255,255,255,.35);
  letter-spacing: .2em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
@media (min-width:768px){
  .slide__vertical-text { display: block; }
}

/* 矢印ボタン */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  color: var(--clr-white);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease);
}
.carousel-arrow:hover { background: rgba(255,255,255,.3); }
.carousel-arrow--prev { left: var(--sp-md); }
.carousel-arrow--next { right: var(--sp-md); }

@media (min-width:768px){
  .carousel-arrow { width:52px; height:52px; font-size:1.8rem; }
  .carousel-arrow--prev { left: var(--sp-xl); }
  .carousel-arrow--next { right: var(--sp-xl); }
}

/* インジケーター */
.carousel-dots {
  position: absolute;
  bottom: var(--sp-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: var(--sp-sm);
}
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.carousel-dot--active {
  background: var(--clr-white);
  width: 24px;
  border-radius: 4px;
}

/* ============================================================
   6. ④ Notice — 注意喚起エリア
   ============================================================ */
.notice {
  background: var(--clr-white);
  border-top: 1px solid var(--clr-border-lt);
  border-bottom: 1px solid var(--clr-border-lt);
  padding: var(--sp-md) 0;
}
.notice__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
}
.notice__label {
  flex-shrink: 0;
  background: var(--clr-notice);
  color: var(--clr-white);
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: var(--r-xs);
  letter-spacing: .06em;
  margin-top: 2px;
}
.notice__list {
  list-style: disc;
  padding-left: 1.2em;
}
.notice__list li {
  font-size: .82rem;
  color: var(--clr-muted);
  line-height: 1.7;
}

/* ============================================================
   7. ⑤ Product Lineup — 商品カードスライダー
   ============================================================ */
.lineup .container { position: relative; }

.lineup__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-xl);
}

.lineup__heading-group .section__title {
  margin-top: var(--sp-xs);
}

.lineup__see-all {
  font-size: .82rem;
  font-weight: 500;
  color: var(--clr-link);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lineup__see-all:hover {
  color: var(--clr-link-hover);
  border-bottom-color: var(--clr-link-hover);
}

/* Slider wrapper */
.product-slider {
  position: relative;
  overflow: hidden;
}

.product-slider__track {
  display: flex;
  gap: var(--sp-md);
  transition: transform .4s var(--ease);
}

/* スマホ: ネイティブ横スクロール */
@media (max-width:767px){
  .product-slider { overflow: visible; }
  .product-slider__track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 12px;
    transition: none;
  }
  .product-slider__track::-webkit-scrollbar { height: 4px; }
  .product-slider__track::-webkit-scrollbar-track { background: transparent; }
  .product-slider__track::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 2px; }
  .product-card {
    scroll-snap-align: start;
    flex: 0 0 75%;
  }
  .slider-arrow { display: none; }
}

/* Product card */
.product-card {
  flex: 0 0 calc(100% - 0px);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--clr-white);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

@media (min-width:480px){
  .product-card { flex-basis: calc(50% - 8px); }
}
@media (min-width:768px){
  .product-card { flex-basis: calc(33.333% - 11px); }
}
@media (min-width:1024px){
  .product-card { flex-basis: calc(25% - 12px); }
}

.product-card__link { display:block; color:inherit; }

.product-card__visual {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--clr-bg-alt);
}
.product-card__img {
  width:100%; height:100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.product-card:hover .product-card__img { transform:scale(1.04); }

.product-card__badge {
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-sm);
  background: var(--clr-link);
  color: var(--clr-white);
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-xs);
  letter-spacing: .06em;
}
.product-card__badge--featured { background: #C53030; }
.product-card__badge--skincare { background: #C53030; }

.product-card__body { padding: var(--sp-md); }

.product-card__name {
  font-family: var(--font-serif);
  font-size: .95rem;
  font-weight: 600;
  color: var(--clr-heading);
  line-height: 1.5;
  margin-bottom: var(--sp-xs);
}
.product-card__desc {
  font-size: .8rem;
  color: var(--clr-muted);
  line-height: 1.7;
}

/* Slider arrows (shared) */
.slider-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px; height: 40px;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: 50%;
  color: var(--clr-heading);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.slider-arrow:hover { background: var(--clr-link); color: var(--clr-white); border-color: var(--clr-link); }
.slider-arrow--prev { left: -20px; }
.slider-arrow--next { right: -20px; }

@media (max-width:767px){
  .slider-arrow { display: none; }
}

/* ============================================================
   8. ⑥ Media Banners — バナースライダー
   ============================================================ */
.media-banners .section__header { margin-bottom: var(--sp-xl); }

.banner-slider {
  position: relative;
  overflow: hidden;
}

.banner-slider__track {
  display: flex;
  gap: var(--sp-md);
  transition: transform .4s var(--ease);
  padding-inline: var(--sp-md);
}

/* スマホ: ネイティブ横スクロール */
@media (max-width:767px){
  .banner-slider { overflow: visible; }
  .banner-slider__track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 12px;
    transition: none;
  }
  .banner-slider__track::-webkit-scrollbar { height: 4px; }
  .banner-slider__track::-webkit-scrollbar-track { background: transparent; }
  .banner-slider__track::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 2px; }
  .banner-item {
    scroll-snap-align: start;
    flex: 0 0 80%;
  }
  .banner-slider .slider-arrow { display: none; }
}

@media (min-width:768px){
  .banner-slider__track { padding-inline: var(--sp-xl); }
}

.banner-item {
  flex: 0 0 calc(100% - 32px);
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: block;
}

@media (min-width:600px){
  .banner-item { flex-basis: calc(50% - 8px); }
}
@media (min-width:1024px){
  .banner-item { flex-basis: calc(33.333% - 11px); }
}

.banner-item__img {
  width: 100%;
  aspect-ratio: 8/3;
  object-fit: cover;
  object-position: top;
  transition: transform .5s var(--ease);
}
.banner-item:hover .banner-item__img { transform: scale(1.03); }

.banner-item__label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  color: var(--clr-white);
  font-size: .8rem;
  padding: var(--sp-sm) var(--sp-md) var(--sp-md);
  line-height: 1.4;
}

/* ============================================================
   9. ⑦ News — ニュースリスト
   ============================================================ */
.news__list {
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--clr-border);
}
.news-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px var(--sp-md);
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--clr-border-lt);
}
@media (min-width:600px){
  .news-item {
    grid-template-columns: 96px auto 1fr;
    align-items: center;
    padding: var(--sp-md) var(--sp-sm);
  }
}
.news-item__date {
  font-size: .8rem;
  color: var(--clr-muted);
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.news-item__tag {
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 10px;
  border: 1px solid var(--clr-link);
  border-radius: var(--r-xs);
  color: var(--clr-link);
  white-space: nowrap;
  justify-self: start;
  letter-spacing: .04em;
}
.news-item__title {
  font-size: .9rem;
  color: var(--clr-text);
  line-height: 1.6;
  grid-column: 1 / -1;
  transition: color var(--dur) var(--ease);
}
.news-item__title { cursor: default; }
@media (min-width:600px){
  .news-item__title { grid-column:3; grid-row:1; }
  .news-item__tag   { grid-column:2; grid-row:1; }
  .news-item__date  { grid-column:1; grid-row:1; }
}

/* ============================================================
   10. ⑧ Reading Columns — 読み物コンテンツ
   ============================================================ */
.columns-section { padding: 0; }

.columns-section__grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width:768px){
  .columns-section__grid { grid-template-columns: 1fr 1fr; }
}

/* 共通ブロック */
.col-block {
  padding: var(--sp-2xl) var(--sp-md);
}
@media (min-width:768px){
  .col-block { padding: var(--sp-3xl) var(--sp-xl); }
}

/* 左：温かみベージュ */
.col-block--warm { background: var(--clr-bg-warm); }
/* 右：爽やかグリーン */
.col-block--green { background: var(--clr-bg-green); }

.col-block__header { margin-bottom: var(--sp-xl); }

.col-block__label-en {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-muted);
  display: block;
  margin-bottom: var(--sp-xs);
}

.col-block__title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 600;
  color: var(--clr-heading);
  line-height: 1.4;
  margin-bottom: var(--sp-xs);
}

.col-block__subtitle {
  font-size: .82rem;
  color: var(--clr-muted);
}

.col-block__articles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}
.col-block__coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed rgba(0,0,0,.15);
  border-radius: 8px;
  background: rgba(255,255,255,.5);
}
.col-block__coming-soon-en {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--clr-heading);
  margin-bottom: 8px;
}
.col-block__coming-soon-ja {
  font-size: .95rem;
  font-weight: 500;
  color: var(--clr-text);
  margin-bottom: 4px;
}
.col-block__coming-soon-sub {
  font-size: .8rem;
  color: var(--clr-muted);
}

/* Article card */
.col-article {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-start;
  padding: var(--sp-md);
  background: rgba(255,255,255,.7);
  border-radius: var(--r-md);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.col-article:hover {
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow-sm);
}

.col-article__thumb {
  flex-shrink: 0;
  width: 88px;
  border-radius: var(--r-sm);
  overflow: hidden;
}
@media (min-width:768px){ .col-article__thumb { width: 100px; } }

.col-article__img {
  width:100%; aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.col-article:hover .col-article__img { transform: scale(1.05); }

.col-article__body { flex:1; }

.col-article__title {
  font-family: var(--font-serif);
  font-size: .9rem;
  font-weight: 600;
  color: var(--clr-heading);
  line-height: 1.55;
  margin-bottom: var(--sp-xs);
}
.col-article:hover .col-article__title { color: var(--clr-link); }

.col-article__date {
  font-size: .75rem;
  color: var(--clr-muted);
  letter-spacing: .04em;
}

/* ============================================================
   11. ⑨ Trust Bar — 認証バッジ＋SNS帯
   ============================================================ */
.trust-bar {
  background: var(--clr-white);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  padding-block: var(--sp-xl);
}

.trust-bar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xl);
}
@media (min-width:768px){
  .trust-bar__inner {
    flex-direction: row;
    justify-content: center;
    gap: var(--sp-2xl);
  }
}

.trust-bar__divider {
  width: 1px;
  height: 48px;
  background: var(--clr-border);
  display: none;
}
@media (min-width:768px){ .trust-bar__divider{ display:block; } }

/* SNS */
.trust-sns { text-align: center; }
.trust-sns__label {
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: var(--sp-sm);
}
.trust-sns__list { display:flex; gap:var(--sp-lg); justify-content:center; }
.trust-sns__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  color: var(--clr-muted);
  transition: color var(--dur) var(--ease);
}
.trust-sns__link:hover { color: var(--clr-link); }
.trust-sns__icon { width:22px; height:22px; }

/* Certs */
.trust-certs { text-align: center; }
.trust-certs__label {
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: var(--sp-sm);
}
.trust-certs__list {
  display: flex;
  gap: var(--sp-lg);
  justify-content: center;
  flex-wrap: wrap;
}
.trust-cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
}
.trust-cert__img {
  width: 64px; height: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-border);
}
.trust-cert__name {
  font-size: .68rem;
  color: var(--clr-muted);
  letter-spacing: .04em;
}

/* ============================================================
   12. ⑩ Footer — 4カラムサイトマップ
   ============================================================ */
.footer { background: var(--clr-footer); }

/* 上段：サイトマップ */
.footer__sitemap {
  padding-block: var(--sp-2xl);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer__sitemap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-xl) var(--sp-lg);
}
@media (min-width:768px){
  .footer__sitemap-grid { grid-template-columns: repeat(4, 1fr); }
}

.footer__col-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.footer__col-list { display:flex; flex-direction:column; gap:var(--sp-sm); }
.footer__col-list a {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  transition: color var(--dur) var(--ease);
  line-height: 1.5;
}
.footer__col-list a:hover { color: var(--clr-white); }

/* 中段：SNS＋認証 */
.footer__mid {
  background: var(--clr-footer-mid);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-block: var(--sp-lg);
}
.footer__mid-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-lg);
}
.footer__sns-list {
  display: flex;
  gap: var(--sp-md);
}
.footer__sns-link {
  display: inline-block;
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.2);
  padding: 5px 16px;
  border-radius: var(--r-xs);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer__sns-link:hover { color: var(--clr-white); border-color: rgba(255,255,255,.5); }
.footer__cert-list {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}
.footer__cert-badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.15);
  padding: 3px 10px;
  border-radius: var(--r-xs);
}

/* 下段：ロゴ＋品質ステートメント */
.footer__brand-row {
  padding-block: var(--sp-xl);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer__brand-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  text-align: center;
}
.footer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.footer__logo-img {
  display: block;
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
}
.footer__statement {
  font-family: var(--font-serif);
  font-size: .88rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .08em;
}

/* 最下段：法務＋Copyright */
.footer__legal-row {
  padding-block: var(--sp-lg);
}
.footer__legal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  text-align: center;
}
@media (min-width:768px){
  .footer__legal-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}
.footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm) var(--sp-lg);
}
.footer__legal-list a {
  font-size: .75rem;
  color: rgba(255,255,255,.35);
  transition: color var(--dur) var(--ease);
}
.footer__legal-list a:hover { color: rgba(255,255,255,.7); }
.footer__copy small {
  font-size: .72rem;
  color: rgba(255,255,255,.25);
}

/* ============================================================
   13. ⑪ Right Fixed Sidebar
   ============================================================ */
.side-nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.side-nav__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-height: 64px;
  padding: var(--sp-sm) var(--sp-xs);
  gap: 4px;
  color: var(--clr-white);
  font-family: var(--font-sans);
  border: none;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.side-nav__btn:hover { filter: brightness(1.15); }

.side-nav__btn--line { background: #06C755; }  /* LINE green */
.side-nav__btn--mail { background: var(--clr-navy); }
.side-nav__btn--top  { background: #555; }

.side-nav__icon { font-size: 1.1rem; line-height: 1; }
.side-nav__label { font-size: .58rem; font-weight: 700; line-height: 1.3; text-align: center; }

/* ============================================================
   14. Focus / A11y
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--clr-link);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ============================================================
   15. Print
   ============================================================ */
@media print {
  .ticker, .header, .carousel-arrow, .slider-arrow,
  .side-nav, .drawer { display: none !important; }
  body { font-size: 12pt; color: #000; }
}