/* =========================
   Theme / Base
========================= */
:root {
  --brand-red: #a40000;
  --glass: rgba(240, 240, 240, 0.4);
  --ink: #222;
  --ink-2: #666;
  --bg: #fff;
  --container: min(1200px, 92vw);

  /* Fonts */
  --font-jp: "Yu Mincho", "游明朝体", "YuMincho",
             "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-en: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Kozuka Gothic Pr6N", "ヒラギノ角ゴ ProN",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --cue-white: 46px;  /* ヒーロー側（白） */
  --cue-red:   58px;  /* 次のセクション側（赤） */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

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

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.en {
  font-family: var(--font-en);
}

.jp {
  font-family: var(--font-jp);
}

.sr-only {
  position: absolute;
  left: -10000px;
}

/* =========================
   Header (overlay on hero)
========================= */
.site-header {
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--glass);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  justify-content: space-between; 
}

.logo {
  margin: 0;
  font-size: 0;
}

.logo a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.logo-mark {
  width: 34px;
  height: 34px;
  object-fit: contain;
}



.logo-text-kasou {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(15px, 2vw, 20px);
  color: #333;
}

.nav_kasou {
  margin-left: auto;
}

.nav_kasou ul {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
white-space: nowrap;
}

.nav_kasou a{
    display: block;
  padding: 14px 8px;
  font-weight: 600;
  transition: opacity .2s ease;

  color: #333;
}
.nav_kasou a:hover {
  opacity: .45;
}

/* ハンバーガー */
.nav-toggle {
  display: none;
}

.hamburger {
  display: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  margin-left: 8px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 7px auto;
  transition: .2s;
}
.hamburger_kasou span {
  background: #333;
}
/* =========================
   Hero
========================= */
.hero {
  position: relative;
  isolation: isolate;
}

.hero-sp{
  display: none;
}
.hero__overlay_sp{
 display: none;
}
.hero-copy {
  position: absolute;
  right: 5%;
  bottom: 10%;
  text-align: right;
  color: #fff;
}

.hero-media{
  width: 100%;
  background: #000;          /* レターボックスの色 */
}

.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* ← ここがキモ：トリミングしない */
  object-position: center;
  display: block;
}



/* 既存のままでOK */
.hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.25));
}
.hero-copy{ right:5%; bottom:10%; position:absolute; color:#fff; text-align:right; }
/* …scroll-cue など既存CSSは流用でOK */

.hero-copy-sp{
  display: none;
}
.eyebrow.en {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: .08em;
  margin: 0 0 .6rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.jp-title {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(44px, 6.2vw, 80px);
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .5);
}
.company__desc-sp{
  display: none;
}

/* ヒーローの一番下から、赤の分だけ下へ突き出させる */
.scroll-cue{
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--cue-red));   /* ここがミソ：赤い線をヒーロー下へ出す */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  pointer-events: auto;
}

/* “scroll” の書体・見え方 */
.scroll-cue .label{
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* 縦ライン本体。高さ＝白＋赤 */
.scroll-cue .line{
  position: relative;
  width: 2px;
  height: calc(var(--cue-white) + var(--cue-red));
}

/* ヒーロー内の白い線（上側） */
.scroll-cue .line::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;                     /* アニメ開始時は0 */
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset;
  transform-origin: top;
  animation: cueWhite 0.9s ease-out forwards;
}

/* 次セクションに重なる赤い線（下側） */
.scroll-cue .line::after{
  content: "";
  position: absolute;
  top: var(--cue-white);         /* ここが境目（＝ヒーローの下端） */
  left: 0;
  width: 2px;
  height: 0;                     /* アニメ開始時は0 */
  background: var(--brand-red);  /* #a40000 */
  transform-origin: top;
  animation: cueRed 0.7s 0.85s ease-out forwards;  /* 白が伸びた後に続けて伸びる */
}
@keyframes cueWhite{
  to{ height: var(--cue-white); }
}
@keyframes cueRed{
  to{ height: var(--cue-red); }
}
/* =========================
   COMPANY section
========================= */
.company-sec {
  position: relative;
  padding: clamp(120px, 19vw, 560px) 0 clamp(120px, 12vw, 160px);
  overflow: hidden;
}

/* 巨大な “COMPANY” */
.outline-c {
  position: absolute;
  top: 6%;
  left: -3%;
  font-family: var(--font-en);
  font-weight: 200;
  font-size: clamp(72px, 15vw, 200px);
  letter-spacing: .22em;
  line-height: 1;
  color: rgba(0,0,0,.06);
  user-select: none;
  pointer-events: none;
  z-index: 20;
  /* 右側はみ出し防止 */
  right: 0;
  overflow: hidden;
}

/* 右側の大きな写真 */
.company__photo {
  position: absolute;
  top: clamp(160px, 14vw, 220px);   /* 見出しと少し重なる位置 */
  right: 0;
  width: min(54vw, 760px);
  height: clamp(360px, 48vw, 560px);
  z-index: 1;
  margin: 20px;
}

/* 左側本文 */
.company__wrap {
 display: flex;
  align-items: stretch;   /* ← 左右の高さを揃える */
  gap: 40px;
  position: relative;
  z-index: 2;
}

.company__lead {
  max-width: 620px;
}

.company__title {
  font-family: var(--font-jp);
  font-weight: 800;                 /* 游明朝 ExtraBold相当 */
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.4;
  color: var(--brand-red);          /* #a40000 */
  margin: 0 0 60px;  
}

.company__desc {
  font-family: var(--font-body);
  color: var(--ink);
  margin: 0 0 60px;  
  line-height: 3;  
}

/* 赤ボタン */
.company__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  max-width: 520px;
}

.pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--brand-red);
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.06);
  transition: background-color .18s ease, transform .06s ease;
  font-family: var(--font-jp);
}

.pill::after {
content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg); /* ← 矢印の形を固定 */
  transition: transform .2s ease;
  margin-left: 6px; 
}

.pill:hover {
  background: #8c0000;
}
.pill:active {
  background: #6f0000;
  transform: translateY(1px);
}
.pill:hover::after {
   transform: rotate(45deg) translateX(2px);
}




/* =========================
   BUSINESS section
========================= */
.business-sec {
  position: relative;
    background: url("../img/business-bg.png") center/cover no-repeat; /* 背景画像 */
  padding: clamp(60px, 10vw, 100px) 0;

}

.business-container{
  margin: auto;
}
/* 見出し（中央） */
.business__head {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.business__en {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(36px, 6.5vw, 92px);
  letter-spacing: .14em;
  line-height: 1.15;
  margin: 0 0 .4rem;
}
.business__jp {
  font-family: var(--font-jp);
  font-weight: 800;
  color: var(--brand-red);
  font-size: clamp(18px, 2.2vw, 24px);
  margin: 0 0 .6rem;
}
.business__lead {
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink-2);
  font-size: clamp(14px, 1.4vw, 16px);
}

/* 2カラム */
.business-margin{
    margin: 0 0.1rem;
}
.business__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr; /* 左やや広め */
  gap: clamp(22px, 4vw, 60px);
  align-items: start;
  margin-top: clamp(28px, 4vw, 40px);
  max-width: 1200px;
  margin-left: 20PX;
  margin-right: 20PX;
  margin: auto;
}

/* 左：上下画像 */
.biz-left {
  display: grid;
  gap: clamp(14px, 2.5vw, 20px);
}
.biz-photo {
  width: 100%;      /* ← 横幅いっぱいに広げたいならここを100% */
  max-width: 700px; /* ← 必要なら最大幅を指定（デザイン次第で調整） */
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  margin: 0 auto;   /* 中央寄せにしたい場合 */
}
/* 右：本文＋ボタン */
.biz-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.biz-text p {
  margin: 0;
  color: var(--ink);
  line-height: 4;
}
.biz-text {
  max-width: 480px;  
}
/* 赤ボタン */

.btn-red {
    margin-top: 8px;

  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--brand-red);
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.06);
  transition: background-color .18s ease, transform .06s ease;
  font-family: var(--font-jp);
}

.btn-red .arrow {
  margin-left: 2px;
  transition: transform .18s ease;
}

.btn-red::after {
content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg); /* ← 矢印の形を固定 */
  transition: transform .2s ease;
  margin-left: 6px; 
}

.btn-red:hover { background: #8c0000; }
.btn-red:active { background: #6f0000; transform: translateY(1px); }
.btn-red:hover::after {
   transform: rotate(45deg) translateX(2px);
  }




/* 下段：画像ボタン（3枚） */
.biz-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 3.5vw, 60px);
  max-width: 1200px;
  margin: auto;
    margin-top: clamp(28px, 9vw, 84px);

}
.biz-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 2;                 /* 画像比率を揃える */
  background: var(--bg) center/cover no-repeat;
  background-image: var(--bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  isolation: isolate;
}
.biz-card::before {                    /* 画像の暗幕（ラベルを読みやすく） */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.35));
  transition: opacity .25s ease;
  z-index: 0;
}
.biz-card__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 18px 12px;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: .08em;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.biz-card:hover::before { opacity: .5; }
.biz-card:active { transform: translateY(1px); }



/* =========================
   NEWS section
========================= */
.news-sec {
  padding: clamp(80px, 10vw, 120px) 0;
  background: #fff;
}

.news__wrap {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 左タイトル：右記事 */
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}

/* 左のタイトル */
.news__en {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(36px, 7vw, 72px);
  margin: 0 0 .4rem;
  letter-spacing: .1em;
}
.news__jp {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--brand-red);
  margin: 0;
}

/* 右記事部分 */
.news__item {
  margin-bottom: 24px;
}
.news__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--ink-2);
}
.news__meta time {
  font-family: var(--font-en);
}
.news__cat {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--brand-red);
  color: var(--brand-red);
  font-family: var(--font-jp);
  font-size: 14px;
  border-radius: 2px;
}

.news__title {
  display: block;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 10px;
}

.news__line {
  height: 1px;
  background: #432; /* 濃いめグレー */
  opacity: .5;
}

/* お知らせ一覧リンク */
.news__more {
  display: inline-block;
  margin-top: 16px;
  margin-left: auto;
  font-family: var(--font-jp);
  font-size: 15px;
  color: var(--ink);
  text-align: right;
}
.news__more:hover {
  opacity: .7;
}



/* 固定背景の“窓” */
.news-window {
  /* 見た目 */
  height: clamp(220px, 40vw, 420px);
  margin: 94px 0 64px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);

  /* 背景（動かない） */
  background-image: url("../img/news-window.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* ← これでスクロールしても背景は固定！ */

  /* ほんのり暗幕（可読性） */
  position: relative;
}
.news-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
  pointer-events: none;
}


/* =============== COLUMN =============== */
.column-sec{
  padding: clamp(80px, 9vw, 120px) 0;
  background: #f6f6f6;           /* 薄いグレー背景 */
}
.column__comingsoon,
.column-small {
  text-align: center;
  position: relative;
}


/* ゆっくり光るアニメーション */
@keyframes fade-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
/* 見出し */
/* .column__head{
  margin-bottom: clamp(20px, 4vw, 32px);
} */
.column__en{
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(32px, 6.5vw, 72px);
  letter-spacing: .14em;
  line-height: 1.1;
  margin: 0 0 .3rem;
}
.column__jp{
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--brand-red);
  font-size: clamp(16px, 2vw, 20px);
  margin: 0 0 .6rem;
}
.column__lead{
  color: var(--ink-2);
  font-size: 14px;
  margin: 0;
}

/* 左右レイアウト */
.column__grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr; 
  gap: clamp(22px, 4vw, 40px);
  align-items: start;
}

/* 左：メイン記事 */
.col-main__thumb{
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: #ddd;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
   max-height: 280px; 
}
.col-main__thumb img{
  width: 100%;
  height: auto;
  object-fit: cover;  
}
.col-main__title{
  margin: 14px 0 8px;
  font-size: clamp(16px, 2vw, 18px);
  color: var(--ink);
}
.col-main__date{
  display: block;
  font-size: 13px;
  color: var(--ink-2);
}

/* 右：サブ記事（カード） */
.col-aside{
  display: grid;
  gap: clamp(10px, 2.2vw, 16px);
  align-content: start;
}

.col-card{
  display: grid;
  grid-template-columns: 150px 1fr; 
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.25);  /* 下線 */
  text-decoration: none;
  color: inherit;
}
.col-card:last-of-type{
  margin-bottom: 6px;                   /* 最後だけ少し隙間 */
}
.col-card__thumb{
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.col-card__title{
  margin: 6px 0 6px;
  font-size: 15px;
  color: var(--ink);
}
.col-card__date{
  font-size: 12px;
  color: var(--ink-2);
}

/* もっと見る（右下寄せ） */
.column__more{
  justify-self: end;
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink);
}
.column__more:hover{ opacity:.75 }




/* =============== RECRUIT =============== */
.recruit-sec {
  position: relative;
  background: url("../img/recruit.png") center/cover no-repeat;
  color: #fff;
}

.recruit__overlay {
  position: relative;
  background: rgba(0, 0, 0, 0.45); /* 背景に半透明の黒幕をかけて可読性UP */
  padding: clamp(100px, 20vh, 160px) 20px;
  text-align: center;
}

.recruit__en {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(45px, 7vw, 80px);
  margin: 0 0 .4rem;
  letter-spacing: .12em;

}

.recruit__jp {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  margin: 0 0 1.2rem;
}

.recruit__catch {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 28px);
  margin: 0 0 1rem;
}

.recruit__desc {
  max-width: 760px;
  margin: 0 auto 2rem;
  font-size: 15px;
  line-height: 2;
  color: #f0f0f0;
}

/* 白ボタン */
.recruit__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 28px;
  border-radius: 30px;
  background: #fff;
  color: #111;
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background .2s ease, transform .1s ease;
}
.recruit__btn .arrow {
  font-family: var(--font-en);
  font-size: 1.1em;
}
.recruit__btn:hover {
  background: #f3f3f3;
}
.recruit__btn:active {
  transform: translateY(1px);
}




/* ===== NEWS → お問い合わせ CTA ===== */
.news-contact-cta{
  background: #f2f2f2;              /* 外側：薄グレー */
  padding: clamp(40px, 6vw, 72px) 0;
}

.news-contact-cta .cta-card{
  margin-left: clamp(20px, 5vw, 80px); /* ← 左にだけ余白を残す */
  margin-right: 0;
  width: calc(100% - clamp(20px, 5vw, 80px)); /* ← 右端ピッタリ、左余白分を引く */
  background: #fff;
  border-radius: 20px 0 0 20px;
  padding: clamp(40px, 6vw, 64px) clamp(24px, 4.5vw, 40px);
  display: grid;
  grid-template-columns: 1fr 6px 1.2fr 1fr; /* 左 / 縦線 / 中央 / 右 */
  align-items: center;
  gap: clamp(18px, 3.2vw, 28px);
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
  box-sizing: border-box;
}
.container--bleed-right { padding-right: 0; }
/* 左：見出し */
.cta-en{
  font-weight: 300;
  letter-spacing: .12em;
  font-size: clamp(28px, 5.5vw, 56px);
  margin: 0 0 .3rem;
}
.cta-jp{
  font-family: var(--font-jp);
  color: var(--brand-red);
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 18px);
  margin: 0;
}

/* 縦の赤線 */
.cta-vline{
  width: 2px;
  height: 120px;
  background: linear-gradient(#a40000, #a40000);
  justify-self: center;
}

/* 中央：電話 */
.cta-mid{
  align-self: center;
}
.cta-phone{
  display: flex;
  align-items: center;
  gap: 12px;
}
.cta-tel{
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 800;
  color: #333;
  letter-spacing: .02em;
}
.cta-hours{
  margin: 6px 0 0;
  color: #666;
  font-size: 14px;
}

/* 右：赤ボタン */
.mail-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--brand-red);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, transform .05s ease, box-shadow .18s ease;
  box-shadow: 0 10px 24px rgba(164,0,0,.18);
}
.mail-btn:hover{ background:#8c0000; }
.mail-btn:active{ transform: translateY(1px); }


/* ===== SNS Section ===== */
.sns-sec {
  background: #f2f2f2;   /* 薄いグレー背景 */
  padding: clamp(60px, 8vw, 100px) 0; 
  text-align: center;
}

.sns__wrap {
  display: flex;
  justify-content: center;
  gap: 48px; 
}

.sns__link {
  display: inline-flex;
  color: #111;            /* アイコンの色 */
  transition: color .2s ease, transform .2s ease;
}
.sns__link:hover {
  color: var(--brand-red); /* ホバー時に赤く */
  transform: scale(1.1);   /* 少し拡大 */
}

/* =========================
   Footer
========================= */
.site-footer{
  background: #333;             /* 黒背景 */
  color: #fff;
  padding: clamp(48px, 8vw, 72px) 0;
}

.footer__wrap{
  display: grid;
  grid-template-columns: 220px 1fr; /* 左ロゴ / 右ナビ */
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.footer__brand{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.footer__logo{
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

/* 右側ナビ */
.footer__nav{
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr)) auto; 
  gap: clamp(16px, 3vw, 28px);
}

.footer__nav .fcol:nth-child(4) h3,
.footer__nav .fcol:nth-child(4) p{
  margin: 0 0 .4rem;
}

.footer__nav .fcol:nth-child(5){
  align-self: start;
}

.fcol__en{
  margin: 0 0 .2rem;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: .04em;
}
.fcol__jp{
  margin: 0 0 .6rem;
  color: #ddd;
  font-size: 13px;
}

.fcol__list{
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
}
.fcol__list li + li{ margin-top: .4rem; }
.fcol__list a{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: #eee;
  font-size: 14px;
  text-decoration: none;
  opacity: .9;
  transition: opacity .18s ease, transform .06s ease;
}
/* 左の矢印（山形） */
.fcol__list a::before{
  content: "›";
  display: inline-block;
  transform: translateY(-1px);
  color: #ccc;
  font-size: 16px;
}
.fcol__list a:hover{ opacity: 1; transform: translateX(2px); }

/* 右端TOPへ戻る */
.fcol--top{
  align-self: center;
  justify-self: end;
}
.to-top{
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  transition: background .2s ease, transform .06s ease, color .2s ease;
}
.to-top:hover{
  background: #fff;
  color: #333;
}
.to-top:active{ transform: translateY(1px); }
.sns__link {
  display: inline-flex;
  color: #111;
  transition: color .2s ease, transform .2s ease;
}
.sns__link i {
  font-size: 40px;         /* ← 大きさ。お好みで */
  line-height: 1;
}
.sns__link:hover {
  color: var(--brand-red);  /* ホバー時に赤に */
  transform: scale(1.1);
}

/* 区切り線 & コピー */
.footer__rule{
  grid-column: 1 / -1;
  margin: clamp(28px, 4vw, 40px) 0 clamp(16px, 2vw, 22px);
  border: none;
  height: 1px;
  background: rgba(255,255,255,.6);
  opacity: .8;
}

.footer__legal{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;   /* ← 縦並びにする */
  align-items: center;
  gap: 8px;                 /* 行間 */
  color: #ddd;
  font-size: 13px;
}

.footer__legal .privacy{
  color: #fff;
  text-underline-offset: 3px;
}
.footer__legal .privacy:hover{ text-decoration: underline; }

.fcol__link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  transition: opacity .2s ease;
}

.fcol__link:hover {
  opacity: .8;
}



/* =========================
   代表挨拶
========================= */

/* 下層ページ用ヒーロー */
.sub-hero {
  position: relative;
  height: clamp(240px, 45vh, 220px);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-hero__overlay {
  background: rgba(0,0,0,0.3);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; 
}

.sub-hero__title {
  color: #fff;
  font-size: clamp(28px, 4.5vw, 44px); 
  font-family: var(--font-en);
  font-weight: 300;
  letter-spacing: .14em;
}

/* サブナビ */
/* （未定義なら）共通変数 */
:root{
  --brand-red: #a40000;
  --pill-gap: clamp(12px, 2.6vw, 24px);
  --pill-height: 64px;
  --pill-radius: 16px;
  /* 4ボタン時の1列幅（タブレットでも無理なく並ぶ幅） */
  --pill-col-4: clamp(180px, 20vw, 280px);
}

/* ===== Company subnav (4 buttons) ===== */
.company-subnav{
  padding: clamp(18px, 3vw, 28px) 0;
}

/* 4列のグリッド。中身の合計幅にフィットして中央寄せ */
.company-subnav__wrap{
  display: grid;
  grid-template-columns: repeat(4, var(--pill-col-4));
  grid-auto-rows: var(--pill-height);
  gap: var(--pill-gap);
  width: max-content;
  margin-inline: auto;
}

/* pill 共通（催事サブナビと同デザイン） */
.company-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pill-height);
  padding: 0 24px;
  border-radius: var(--pill-radius);
  background: #fff;
  border: 1px solid #e7e7e7;
  color: #333;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* アクティブ（現在ページ） */
.company-pill.is-active{
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}

/* hover（優先度確保のためスコープ付き） */
.company-subnav .company-pill:hover{
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  box-shadow: 0 6px 16px rgba(164,0,0,.2);
}


/* 代表挨拶本文 */
.greeting-sec{
  background:#fff;
  padding: 0;
  overflow: visible;  
  padding-bottom: 220px;
}

/* タイトル帯（白） */
.greeting-head{
  background:#fff;
  padding: 80px 0 0;  
}             

:root{
  --greeting-lift: clamp(80px, 12vw, 160px); 
}

.greeting-body{
  position: relative;
  padding: calc(64px + var(--greeting-lift)) 0 clamp(64px, 8vw, 96px);
  overflow: visible;   
}

.greeting-body::before{
  content:"";
  position:absolute;
inset: var(--greeting-lift) 0 0 auto;
  left: max(0px, calc((100vw - var(--container)) / 2));
  background:#f6f6f6;
  z-index: 0;
}

/* 中身は前面に */
.greeting__wrap{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 4vw, 48px);
  align-items:start;
  /* 右寄せの見え感を強めたいときは微調整してOK */
}

/* テキスト */
.greeting__text{
  max-width: 72ch;
  font-size: 16px;
  line-height: 2.1;
  color: var(--ink);
  text-wrap: pretty;
  font-feature-settings: "palt" 1;
}
.greeting__title{
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 36px);
  margin: 0;                    /* タイトル帯では余白は greeting-head 側で管理 */
  letter-spacing: .02em;
}
.greeting__text p{
  margin: .9em 0 0;
  text-indent: 1em;
}
.greeting__text p:first-of-type{ text-indent: 0; }

/* 画像：グレー帯から少し飛び出し */
.greeting__photo{
  align-self:start;
  position: relative;
  z-index: 2;
}
.greeting__photo img{
  display:block;
  width:75%;
  max-width: 500px;
  height:auto;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  margin-top: calc(-1 * var(--greeting-lift)); 
  margin-left: auto; 
}



/* フッター（白背景バージョン） */
.site-footer2.white {
  background: #fff;
  color: #222;
  padding: 72px 0;

}
.site-footer2.white a {
  color: #222;
}

.site-footer2.white p {
  color: #222;
}

.footer-bottom {
  background: #111;
  color: #fff;
  text-align: center;
  padding: 20px;
  display: flex;                 /* ←コレが必須！ */
  justify-content: center;
  align-items: center;
  gap: 12px;                     /* gapはflex/gridでのみ有効 */
}

/* =========================
   経営理念
========================= */


.philo-sec{
  padding: clamp(60px, 8vw, 100px) 0;
  background: #fff;
}
.philo-h2{
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(20px, 3vw, 28px);
  text-align: center;
  margin: 90px 0 110px;
  letter-spacing: .04em;
}

/* 3カード */
.philo-cards{
  max-width: 1100px;  
  margin: 0 auto;    
  display: grid;
  gap: clamp(32px, 4vw, 48px);
}
.philo-card{
  display: flex;
  align-items: flex-start;
  gap: 62px;
  padding: 28px 40px;
  background: #f9f9f9;
  border-radius: 10px;
    margin-bottom: clamp(20px, 3vw, 32px);
}
.philo-thumb{
  width: 260px;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.philo-thumb img{
  width: 110%;
  height: 110%;
  object-fit: cover;
}
.philo-body{
  min-width: 0;
}
.philo-title{
  position: relative;
  margin: 4px 0 14px;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .05em;
}
/* 赤い下線（タイトル下） */
.philo-title::after{
  content:"";
  display:block;
  width: 64px;
  height: 2px;
  margin-top: 8px;
  background: var(--brand-red);
}
.philo-text{
  margin: 0;
  color: var(--ink);
  line-height: 2;
  font-size: clamp(14px, 1.4vw, 16px);
}

/* ===== 自動スライド・ギャラリー（CSS only） ===== */
.gallery-track{
  display: inline-block;
white-space: nowrap;
  will-change: transform;
  animation: marquee 28s linear infinite;
}
/* 無限スライド（トラック全体を左に流す） */
@keyframes slideLoop{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); } /* 1周分（要素を2倍用意している前提） */
}
.philo-gallery{
  padding: clamp(40px, 7vw, 80px) 0;
}
.gallery-mask{
  overflow: hidden;
}
:root{
  --g-gap: 20px;           /* ← すき間は固定pxで */
  --g-item-w: 240px;       /* ← 1枚の幅（vwで揺らすとズレやすい） */
  --g-item-r: 10px;        /* ← 角丸 */
}
.gallery-seq{
  display: flex;
}
.g-item{
  flex: 0 0 var(--g-item-w);
  height: calc(var(--g-item-w) * 0.75); /* 4:3 なら 0.75、好みで */
  border-radius: var(--g-item-r);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  margin-right: var(--g-gap);
}
.gallery-seq .g-item:last-child{
  margin-right: 0;         /* 最後だけ gap を消す（幅を厳密に揃える） */
}
.g-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 無限ループ：1周ぶん（=1つ目の .gallery-seq）の幅だけ左へ */
@keyframes marquee{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}

/* 念のため：モバイル Safari の最適化を強める */
@supports (-webkit-touch-callout: none) {
  .gallery-track{ -webkit-transform: translateZ(0); }
}
/* ホバーで一時停止 */
.gallery-mask:hover .gallery-track{
  animation-play-state: paused;
}


/* =========================
   判断基準
========================= */
.policy-hero{
  margin: 0 auto clamp(32px, 5vw, 56px);
  max-width: 1100px;             /* 全幅にしすぎない */
}
.policy-hero img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  object-fit: cover;
}

/* 説明文：読みやすい幅と行間 */
.policy-lead{
  max-width: 500px;
  margin: 150px auto 0;
  color: var(--ink);
  line-height: 2.2;
  font-size: clamp(15px, 1.7vw, 18px);
  text-align: center;
}
.policy-lead p{
  margin: 0 0 1.3em;
}
.policy-lead p:last-child{
  margin-bottom: 0;
}


/* =========================
 会社概要
========================= */


.company-table{
  margin: clamp(60px, 8vw, 100px) auto;
  width: var(--container);     /* トップの container 変数を流用 */
  max-width: 900px;
}

/* 1行 */
.company-table .row{
  display: grid;
  grid-template-columns: 200px 1fr;   /* 左やや広め */
  align-items: center;
  column-gap: clamp(16px, 3vw, 28px);
  padding: 12px 0;
}

/* 左（項目） */
.company-table dt{
  margin: 0;
  text-align: center;
  font-size: clamp(15px, 1.8vw, 18px);
  letter-spacing: .04em;
  padding-bottom: 14px;                     /* 下線との距離 */
  border-bottom: 2px solid var(--brand-red);/* 赤ライン */
}

/* 右（内容） */
.company-table dd{
  margin: 0;
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--ink);
  padding-bottom: 14px;
  border-bottom: 1px solid #9a9a9a;        /* グレーライン */
}

/* 行と行の間隔（下線の外側の余白感） */
.company-table .row + .row{
  margin-top: clamp(14px, 2.4vw, 18px);
}

/* =========================
リユース事業
========================= */
.fair-subnav__top.is-active {
  background: var(--brand-red);
  color: #fff;
}
.industry-hero__lead{
  margin-bottom: 50px;
}
.industry-hero__title{
  margin-top: 100px;
}
/* 白枠カード */
.industry-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: clamp(24px, 4vw, 40px);
  margin: clamp(48px, 6vw, 80px) auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}


.industry-body img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}
/* セクション全体（薄いグレー帯） */
.industry-block{
  position: relative;
  background: #f3f3f3;
  padding: clamp(48px, 11vw, 156px) 0;
  isolation: isolate;
}
.point-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: clamp(32px, 5vw, 56px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}


/* 左上に重ねる大きい番号 */
.industry-block__label{
  position: absolute;
  left: max(12px, calc((100vw - var(--container)) / 2)); /* コンテナ左端に寄せる */
  top: clamp(13px, 3vw, 55px);
  font-weight: 800;
  font-size: clamp(84px, 16vw, 180px);
  line-height: 1;
  color: #a40000;
  opacity: .18;         /* 薄く */
  z-index: 20;
  pointer-events: none;
  user-select: none;
}

/* 白い大カード（大きめ・角丸・影） */
.industry-block__card{
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 28px;
  padding: clamp(36px, 5vw, 64px);
  box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

/* 見出し（大きめ＆赤） */
.industry-block__title{
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: .02em;
  color: #a40000;
}

/* 本文＋グラフの2カラム */
.industry-block__grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* 文章やや広め */
  align-items: start;
  gap: clamp(20px, 4.5vw, 44px);
}

.industry-block__text{
  font-size: clamp(15px, 1.7vw, 16px);
  line-height: 2.2;
  color: #333;
  margin-top: 50px;
}
.industry-block__text .accent{ color:#a40000; font-weight: 800; }

/* グラフのサイズをCSSでコントロール（レスポンシブ） */
.industry-block__chart{
  min-height: clamp(240px, 32vw, 380px);
}
.industry-block__chart canvas{
  width: 100% !important;
  height: 100% !important;
}

/* スマホは縦積み */
@media (max-width: 900px){
  .industry-block__grid{
    grid-template-columns: 1fr;
  }
}

/* セクション２ */
.ind-section {
  position: relative;
  padding: clamp(60px, 8vw, 100px) 20px;
  background: #f3f3f3; /* 全体背景は白 */
  text-align: center;
}

.ind-step {
  position: absolute;
  top: clamp(33px, 3vw, 55px);
  left: 50%;                   /* 左端を画面の中央に */
  transform: translateX(-50%); /* 要素の幅分を半分戻す */
  font-weight: 800;
  font-size: clamp(64px, 10vw, 120px);
  color: #a40000;
  opacity: .18;         
  z-index: 20;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}


.ind-title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: #a00000;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

/* グレー背景枠 */
.ind-box.gray {
  background: #fff;
  border-radius: 20px;
  padding: clamp(40px, 6vw, 70px);
  padding-top: clamp(40px, 7vw, 200px);
  margin: 0 auto;
  max-width: 1000px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.ind-desc {
  margin-bottom: 32px;
  font-size: 16px;
  color: #333;
}

.ind-figure {
  display: flex;
   gap: clamp(16px, 4vw, 40px); 
  justify-content: center;
  margin-bottom: 30px;
   flex-wrap: nowrap;
}

.ind-card {
  background: #f3f3f3;
  border-radius: 16px;
  padding: 24px 32px;
   flex: 1 1 clamp(160px, 30vw, 300px); 
  max-width: 400px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  text-align: center;
}

.ind-card h3 {
  font-size: clamp(15px, 2vw, 20px);
  margin-bottom: 50px;
  color: #333;
}

.circle {
  position: relative;
  width: clamp(100px, 20vw, 160px);
  height: clamp(80px, 20vw, 100px);
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 16px;
}

.good .circle {
  background: #2a7d2e;
}

.bad .circle {
  background: #a00000;
}

/* 矢印アイコン */
.arrow.up {
  position: absolute;
  top: -30px;
  border: solid currentColor;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 12px;
  transform: rotate(-135deg);
  color: inherit;
}

.good .arrow {
  color: #2a7d2e;
}
.bad .arrow {
  color: #a00000;
}

.ind-bottom {
  font-size: 16px;
  color: #333;
}

.ind-bottom .highlight {
  color: #a00000;
  font-weight: 700;
}
/* 矢印アイコン（共通） */
.arrow.up {
  position: absolute;
  top: -30px;
  border: solid;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 12px;
  transform: rotate(-135deg);

  /* アニメーションで上下に動かす */
  animation: bounceArrow 1.2s infinite ease-in-out;
}

/* 矢印の色分け */
.good .arrow {
  border-color: #2a7d2e; /* 緑 */
}

.bad .arrow {
  border-color: #a00000; /* 赤 */
}

/* 上下に動くアニメーション */
@keyframes bounceArrow {
  0%, 100% {
    transform: translateY(0) rotate(-135deg);
  }
  50% {
    transform: translateY(-10px) rotate(-135deg);
  }
}






/* セクション３ */
/* 03：白背景＋“グレー枠” */

.industry-block_3{
  position: absolute;
  left: max(12px, calc((100vw - var(--container)) / 2)); /* コンテナ左端に寄せる */
  top: clamp(100px, 1vw, 110px);
  font-weight: 800;
  font-size: clamp(84px, 16vw, 130px);
  line-height: 1;
  color: #a40000;
  opacity: .18;         /* 薄く */
  z-index: 20;
  pointer-events: none;
  user-select: none;
}
.industry-block3{
  position: relative;
  background: #fff;
  padding: clamp(48px, 11vw, 180px) 0;
  isolation: isolate;
}

.industry-block3 .industry-block__card{
  position: relative;
  z-index: 1;
  background: #f3f3f3;
  border-radius: 28px;
  padding: clamp(36px, 5vw, 64px);
  padding-bottom: 120px;
  box-shadow: 0 14px 36px rgba(0,0,0,.10);
}
.industry-block__title3{
  margin: 0 0 clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 30px);
  letter-spacing: .02em;
  color: #a40000;
}






:root{
  --brand-red:#a00000;  /* サイトの赤に合わせて変更OK */
  --ink:#333;
  --card:#fff;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

.asset-graph2{
  max-width:min(960px,92vw);
  text-align:center;
}
.graph2-title{
  color:var(--brand-red);
  font-weight:700;
  font-size:clamp(20px,3.2vw,28px);
  margin-bottom:22px;
}

/* 外側は overflow:visible にして、はみ出しを許可 */
.graph2-box{
  position:relative;
  overflow:visible;
  height:clamp(260px,48vw,380px); /* 高さお好みで */
}

/* 角丸＆切り抜きは内側ラッパに付与 */
.graph2-clip{
  position:relative;
  height:100%;
  background:var(--card);
  border-radius:16px;
  overflow:hidden;          /* ← クリップはここだけ */
  box-shadow:var(--shadow);
}

/* 上段：かくれ資産面 */
.graph2-hidden{
  position:absolute;
  inset:0 0 56px 0;         /* 下の赤バー分を空ける */
  display:grid;
  place-items:center;
}
.hidden-caption{
  color:var(--ink);
  font-size:clamp(16px,2.3vw,20px);
  line-height:1.4;
  margin:0;
}
.hidden-caption strong{
  display:block;
  font-size:clamp(28px,4.2vw,40px);
  font-weight:800;
  letter-spacing:.02em;
}

/* 下段：顕在化（赤バー） */
.graph2-visible{
  position:absolute;
  left:0; right:0; bottom:0;
  height:56px;
  background:var(--brand-red);
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
  transform:scaleY(0);
  transform-origin:bottom;
  opacity:.9;
}
/* ラベルはボックスの外側に配置（overflowの影響を受けない） */
.visible-callout{
  left:50%;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:2;                /* 念のため前面に */
}
.visible-text{
  color:var(--brand-red);
  font-weight:700;
  font-size:clamp(16px,2.4vw,20px);
  opacity: 1;
  transform: none;
}
.visible-text strong{ font-size:1.15em; }
.visible-text small{ font-weight:600; font-size:.9em; color:#8a1a1a; }

/* ラベル→赤バーの棒線 */
.visible-line{
  display:block;
  width:2px;
  height:26px;
  background:var(--brand-red);
  margin-top:6px;
  border-radius:1px;
  transform:scaleY(0);
  transform-origin:top;
}

/* ===== アニメーション ===== */
@keyframes riseBar{ from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes growLine{ from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes popTxt{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

.asset-graph2.is-in .graph2-visible{ 
  animation:riseBar 2s cubic-bezier(.25,.9,.2,1) forwards; 
}
@media (prefers-reduced-motion:reduce){
  .graph2-visible,.visible-text{
    animation:none !important;
    transform:none !important;
  }
}


/* セクション４ */
/* 04：グレー背景に白カード（上で .bg-soft を使用） */



.industry-block_4{
  position: absolute;
  left: max(12px, calc((100vw - var(--container)) / 2)); /* コンテナ左端に寄せる */
  top: clamp(100px, 3vw, 130px);
  font-weight: 800;
  font-size: clamp(84px, 16vw, 130px);
  line-height: 1;
  color: #a40000;
  opacity: .18;         /* 薄く */
  z-index: 20;
  pointer-events: none;
  user-select: none;
}
.industry-block4{
  position: relative;
  background: #f3f3f3;
  padding: clamp(48px, 11vw, 180px) 0;
  isolation: isolate;
}

.industry-block4 .industry-block__card{
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 28px;
  padding: clamp(36px, 5vw, 84px);
  box-shadow: 0 14px 36px rgba(0,0,0,.10);
}
.industry-block__title4{
  margin: 0 0 clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 30px);
  letter-spacing: .02em;
  color: #a40000;
}
.industry-block__grid {
  display: grid;
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
}
.ind-col--img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;  /* 必要ならトリミング */
}

.industry-block__grid4 {
  display: grid;
  grid-template-columns: 40% 60%;  /* 画像4割、テキスト6割 */
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
}


/* まとめ
　　　　　　　 */


.summary {
  padding: clamp(60px, 8vw, 100px) 20px;
  text-align: center;
  background: #fff;
}

.summary-title {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 700;
  margin-bottom: 70px;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.summary-title span {
  color: #a00000; /* 赤色で「4」強調 */
  font-weight: 900;
}

.summary-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #a00000; /* 赤い下線 */
}

.summary-points {
  background: #f8f8f8;
  border-radius: 16px;
  padding: 30px 70px;
  margin: 0 auto 60px;
  max-width: 800px;
  text-align: left;
}

.summary-points ol {
  list-style: decimal;
  padding-left: 20px;
  margin: 0;
}

.summary-points li {
  font-size: 18px;
  margin: 40px;
  font-weight: 500;
  line-height: 1.6;
}

.summary-points li::marker {
  color: #a00000; /* 番号を赤色に */
  font-weight: bold;
}

.summary-text {
  font-size: 18px;
  color: #333;
  line-height: 1.8;
}


/* =========================
催事買取
========================= */

/* =============== Business Subnav =============== */
:root{
  --brand-red: #a40000;
  --pill-gap: clamp(12px, 2.6vw, 24px);
  --pill-height: 64px;
  --pill-radius: 16px;
  /* 各ボタンの1列ぶんの幅（下の3ボタンの幅） */
  --pill-col: clamp(220px, 28vw, 360px);
}

/* 全体の余白 */
.fair-subnav{
  padding: clamp(18px, 3vw, 28px) 0;
}

/* ★同じグリッドに上1/下3を配置。グリッド自体の幅＝3列＋隙間×2 */
.fair-subnav__wrap{
  display: grid;
  grid-template-columns: repeat(3, var(--pill-col));
  grid-auto-rows: var(--pill-height);
  gap: var(--pill-gap);
  width: max-content;     /* 中身の合計幅にフィット */
  margin-inline: auto;    /* 中央寄せ */
}

/* ボタン共通 */
.fair-subnav__top,
.fair-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--pill-height);
  padding: 0 24px;
  border-radius: var(--pill-radius);
  background: #fff;
  border: 1px solid #e7e7e7;
  color: #333;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.fair-subnav__top{
  grid-column: 1 / -1;
  color: #333;
}

/* アクティブ（現在のページ） */
.fair-pill.is-active{
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}

/* hover（優先度を上げて確実に効かせる） */
.fair-subnav .fair-subnav__top:hover,
.fair-subnav .fair-pill:hover{
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  box-shadow: 0 6px 16px rgba(164,0,0,.2);
}



/* =============== Intro 2col =============== */
.fairbuy-intro{ 
  padding: clamp(56px, 8vw, 90px) 0; 
  background:#fff; 
}
.fairbuy-intro__wrap{
  display:grid; 
  grid-template-columns: 1.05fr .95fr; gap: clamp(22px, 3.8vw, 40px); 
  align-items:start;
}
.section-title{ 
  font-weight:800; 
  font-size: clamp(22px, 3.2vw, 34px); 
  margin:0; 
}
.title-underline{ 
  width: 120px; 
  height: 2px; 
  background: #222; 
  margin: 14px 0 18px; 
}
.fairbuy-intro__text p{ 
  margin:0; 
  line-height:2; 
  color:var(--ink); 
}
.fairbuy-intro__photo img{
  display:block; 
  width:100%; 
  height:auto; 
  border-radius:12px; 
  box-shadow:0 8px 26px rgba(0,0,0,.08);
}

/* =============== full width image =============== */
/* 窓（マスク） */
.fairbuy-wideimg{
  height: clamp(240px, 45vh, 480px);
  margin: clamp(20px, 4vw, 36px) 0 0;
  background: url("../img/fairbuy-main.png") center / cover no-repeat fixed;
}


/* iOS/Safariの“fixedが効きにくい”対策：素直にフォールバック */
@supports (-webkit-touch-callout: none) {
  .fairbuy-wideimg::before{
    background-attachment: scroll;   /* fixedが怪しい端末は通常スクロールに */
  }
}
/* =============== 3 Points =============== */
.point-title {
  display: flex;
  align-items: center;
  gap: 8px; /* 文字との余白 */
}

.point-title .dot {
  display: inline-block;
  width: 10px;   /* サイズ調整 */
  height: 10px;
  border-radius: 50%;
  background: var(--brand-red); /* 赤色 */
}

.fair-bg{
  padding: clamp(50px, 7vw, 90px) 0;
  background: url("../img/business-bg.png") center/cover no-repeat; /* 背景画像を全体に */
  position: relative;
  z-index: 0;
}

.fair-bg::before {
  content: "";
  position: absolute;
  inset: 0; /* 全体に広げる */
  z-index: -1; /* 背景に配置 */
}


.fairbuy-points__head{ 
  margin-bottom: clamp(18px, 6vw, 50px);
 }
.fairbuy-points__head h3{ 
  margin:0; font-size: clamp(18px, 2.6vw, 24px);
 }
.fairbuy-points__head .lead{ 
  margin:.35rem 0 0; 
  color:#555; 
}

.point-cards{
  display:grid; 
  gap: clamp(14px, 2.8vw, 20px);
}
ol {
  list-style: none;
  padding-left: 0; /* ← 左の余白も消したい場合 */
  margin: 0;       /* ← 不要ならマージンもリセット */
}
.point-card{
  display: block;
  position:relative; 
  padding: clamp(18px, 3vw, 80px);
  padding-left: clamp(18px, 7vw, 120px);
  padding-right: clamp(18px, 7vw, 120px);
  border-radius: 84px; 
  background:#fff; 
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
}
.point-card__title { 
  display: block;
  margin: 0 0 8px;     /* 下だけ余白 */
  font-weight: 800;
  font-size: clamp(16px, 2vw, 20px);
}

.point-card__text { 
  display: block;
  margin: 0;          /* 横並び防止 */
  color: #444; 
  line-height: 1.9; 
}

/* =============== Big gallery (scroll-snap) =============== */

.fairbuy-gallery{
  padding: clamp(40px, 7vw, 80px) 0;
}
.gallery-mask{
  overflow: hidden;
}
.gallery-track{
display: inline-flex;           /* ← block ではなく inline-flex */
  width: max-content;             /* ← コンテンツ幅にフィット */
  will-change: transform;
  animation: slideLoop 28s linear infinite;
}
.fg-item{
  display: inline-block;
  vertical-align: top;
  width: clamp(160px, 25vw, 560px); /* 1枚あたりの幅 */
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  margin-right: clamp(14px, 2vw, 20px); 
}

.fg-item:last-child{ margin-right: 0; }
.fg-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
 display: block;
}

@keyframes slideLoop{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* ← トラック自身の幅の半分だけ動かす */
}

/* 動きを控えたいユーザー向け */
@media (prefers-reduced-motion: reduce){
  .gallery-track{ animation: none !important; }
}



/* =========================
店舗買取
========================= */


.shop-link {
  color: #a40000;         /* ブランドの赤 */
  font-weight: 700;
  text-decoration: underline;
  transition: color .2s ease;
}

.shop-link:hover {
  color: #6f0000;         /* 濃い赤に変化 */
  text-decoration: underline;
}
/* =========================
お知らせ一覧
========================= */
.news-list {
  padding: clamp(60px, 8vw, 100px) 0;
}


.news-list__title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  margin-bottom: 40px;
}

.news-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #999;
}

.news-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #999;
  font-size: 16px;
}
.news-link{
  display: grid;
  grid-template-columns: 120px auto 1fr; /* 日付 / ラベル / タイトル */
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}
.news-link:hover .news-text{ color: var(--brand-red); }
.news-link:focus-visible{
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
  border-radius: 4px;
}
.news-date {
  min-width: 110px;
  font-weight: 500;
  color: #333;
}

.news-label {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--brand-red);
  color: var(--brand-red);
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
}

.news-text {
  color: #222;
  text-decoration: none;
  transition: color .2s ease;
}
.news-text:hover {
  color: var(--brand-red);
}

.pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--brand-red);
  color: var(--brand-red);
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.page.active {
  background: var(--brand-red);
  color: #fff;
}

.page:hover:not(.active) {
  background: rgba(200, 0, 0, 0.05);
}


/* =========================
お知らせ詳細
========================= */
.news-detail {
  padding: clamp(60px, 8vw, 100px) 0;
}

.news-detail__title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  margin-bottom: 16px;
}

.news-detail__date {
  font-size: 14px;
  color: #666;
  margin-bottom: 28px;
}

.news-detail__content {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 40px;
  color: #222;
}

.news-detail__line {
  border: none;
  border-top: 1px solid #999;
  margin: 40px 0;
}

.news-detail__back {
  text-align: center;
}










/* =========================
   コラム詳細
========================= */


/* ===== Column Article (詳細) ===== */
.article{
  padding: clamp(60px, 8vw, 100px) 0;
}
.article__head{
  margin-bottom: clamp(18px, 3vw, 26px);
}
.article__title{
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.6;
  margin: 0 0 6px;
}
.article__date{
  display: inline-block;
  font-size: 13px;
  color: #666;
}

.article__hero{
  margin: 0 0 clamp(22px, 3.5vw, 34px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
.article__hero img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.article__body{
  color: #222;
  line-height: 2;
  font-size: clamp(15px, 1.6vw, 16px);
}
.article__body h2{
  font-size: clamp(16px, 2vw, 20px);
  margin: 0 0 .6em;
}
.article__body p{
  margin: 0 0 1.1em;
  text-indent: 1em;         /* 和文っぽく1字下げ */
}
.article__body p:first-of-type{ text-indent: 0; }

.article__rule{
  margin: clamp(24px, 4vw, 36px) 0 clamp(16px, 3vw, 26px);
  border: none;
  height: 1px;
  background: rgba(0,0,0,.45);
}

/* 戻るボタン（お知らせ詳細と同テイスト） */
.btn-pill-red{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--brand-red);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(164,0,0,.18);
  transition: background .18s ease, transform .05s ease;
}
.btn-pill-red:hover{ background:#8c0000; }
.btn-pill-red:active{ transform: translateY(1px); }

.article__back{
  text-align: center;
  margin-top: clamp(8px, 2.2vw, 14px);
}




/* ===== Column Index (一覧共通レイアウト) ===== */
.post-index {
  padding: clamp(60px, 8vw, 100px) 0;
}
.post-index__title{
  font-size: clamp(20px, 2.6vw, 28px);
  margin: 0 0 clamp(22px, 3.5vw, 34px);
}

/* リスト全体 */
.post-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(22px, 4vw, 32px);
}


/* クリック領域を広く */
.post-link{
  display: grid;
  grid-template-columns: 320px 1fr;             /* 左：画像 幅固定 / 右：本文 */
  gap: clamp(18px, 3.2vw, 36px);
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.post-link:hover .post-title { text-decoration: underline; }

/* サムネイル */
.post-thumb{
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  background: #eee;
}
.post-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 本文側 */
.post-body { align-self: start; }
.post-date{
  color: var(--brand-red);
  font-size: 13px;
  display: inline-block;
  margin: 4px 0 10px;
}
.post-title{
  font-size: clamp(16px, 2.1vw, 20px);
  margin: 0 0 10px;
}
.post-excerpt{
  color: #444;
  font-size: 14px;
  line-height: 1.9;
  margin: 0;
}

/* 区切り線 */
.post-divider{
  height: 1px;
  background: rgba(0,0,0,.35);
  margin-top: clamp(16px, 2.5vw, 20px);
}

/* ページャ（赤丸） */
.pager{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(34px, 6vw, 54px);
}
.pager__item{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c3c3c3;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: filter .2s ease, transform .05s ease;
}
.pager__item:hover{ filter: brightness(0.95); }
.pager__item.is-current{
  background: var(--brand-red);
}
/* =========================
 問い合わせ
========================= */
/* ページ全体の幅を統一 */
.contact-container {
  max-width: 800px;   /* ページ全体の横幅 */
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;    /* スマホで端にくっつかないように */
}

/* 見出し */
.contact-section-title {
  background: #f2f2f2;
  font-weight: 700;
  padding: 12px 16px;
  margin: 60px 0 20px;
  font-size: 18px;
}

/* 電話番号 */
.contact-phone {
  font-size: 26px;
  font-weight: 700;
  margin: 8px 0;
}
.contact-hours {
  font-size: 14px;
  color: #555;
}

/* フォーム */
.contact-form .form-group {
  margin-bottom: 32px;
}

.contact-form label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: #333;
}

.radio-group {
  display: flex;
  gap: 40px; /* ボタン間の余白 */
  margin-top: 8px;
  align-items: center; /* 縦位置を中央に揃える */
}

.contact-form .radio-group label {   
  display: flex;                 
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #333;
  font-size: 16px;
}
.radio-group input[type="radio"] {
  accent-color: #bb1a1a; /* 赤いチェックマーク */
  width: 18px;
  height: 18px;
  margin: 0; /* 不要な余白を削除 */
}
.conditional[hidden] { display: none !important; }
.required {
  color: #bb1a1a; /* 赤色の小さな星 */
  font-size: 14px;
  margin-left: 4px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  color: #333;
  box-sizing: border-box;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid rgba(164,0,0,.25);
  outline-offset: 2px;
  border-color: #a40000;
  box-shadow: 0 0 0 3px rgba(164,0,0,.12);
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

/* ボタン */
.button-container { 
  text-align: center; 
margin-top: 70px;   /* ← フォームの下に余白を追加 */
  margin-bottom: 90px; 
}
.submit-button {
  display: inline-block;
  background: var(--brand-red, #a40000);
  color: #fff;
  font-weight: 700;
  padding: 12px 36px;
  border: none;
  border-radius: 4px; /* ← 少しだけ丸み */
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s ease;
}
.submit-button:hover {
  background: #8c0000;
}

.submit-button:active  { transform: translateY(1px); }



/* =========================
   プライバシーポリシー
========================= */

.privacy-sec {
  padding: clamp(60px, 8vw, 100px) 0;
  background: #fff;
}

.privacy-sec .container{
  max-width: 840px;   /* お好みで 760–900 の間に */
}
.privacy__h2 {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 32px;
  color: var(--brand-red);
}

.privacy__h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 36px 0 12px;
  border-left: 4px solid var(--brand-red);
  padding-left: 10px;
  color: #222;
}

.privacy-sec p {
  margin: 0 0 20px;
  line-height: 1.9;
  font-size: 15px;
  color: var(--ink);
}

/* =========================
   Responsive
========================= */

@media (max-width: 1200px) {
  .company-sec {
    padding: 150px 0 50px;
  }

  .company__wrap {
    flex-direction: column;
  }

  .company__photo {
    position: static;
    margin: 0;         /* 絶対配置ではなく通常フローへ */
    margin-top: 30px;
    width: 100%;
    height: auto;
  }

  .company__buttons {
    grid-template-columns: 1fr;
    max-width: 1200px;
  }

  .outline-c {
    left: -2%;
    font-size: clamp(40px, 15vw, 140px);
    margin-top: 20px;
  }

  .footer__nav{
    row-gap: 24px;
  }
  .footer__wrap{
    gap: 5px;
    grid-template-columns: 200px 1fr;   /* 左ロゴ / 右ナビ */
  }
  .footer__logo{
    width: 64px; height: 64px;
  }
  .footer__nav{
    grid-template-columns: repeat(4, minmax(140px, 1fr)) auto; /* 列数ダウン */
    gap: clamp(14px, 2.6vw, 22px);
  }
  .fcol__en{ font-size: clamp(16px, 1.8vw, 22px); }
  .fcol__link_top{
    display: none;
  }
  .fcol__link_top{
    display: none;
  }
    .container--bleed-right { padding-right: 0; } /* 右端までカードを伸ばす */

  .news-contact-cta .cta-card{
    margin-right: 0;
    margin-left: 0;
    margin: 0;
    padding: 36px 28px;
    gap: 24px;
    border-radius: 0;
    width: 100%;
    /* カラム比率を少し圧縮して中央の密度を上げる */
    display: grid;
    align-items: center;
  }

  .cta-vline{ height: 100px; }
  .cta-en   { font-size: clamp(26px, 4.5vw, 48px); }
  .cta-jp   { font-size: clamp(14px, 1.6vw, 16px); }

  .cta-tel  { font-size: clamp(18px, 1vw, 26px); }
  .mail-btn { 
    padding: 14px 24px;   
    font-size: 12px;
}
    /* 催事 */
.fairbuy-intro__wrap{
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 3vw, 28px);
  }
  .title-underline{
    width: 110px;
    margin: 12px 0 16px;
  }
  .fair-bg{
    padding: clamp(44px, 6vw, 72px) 0;
    background-position: center top;       /* 背景の見え方を安定させる */
  }
  .point-card{
    border-radius: 48px;
    padding: clamp(18px, 3.2vw, 56px);
    padding-left: clamp(18px, 6vw, 80px);
    padding-right: clamp(18px, 6vw, 80px);
  }
  .fairbuy-points__head{
    margin-bottom: clamp(18px, 4.5vw, 36px);
  }

}
@media (max-width: 1200px) and (min-width: 641px) {
  .fcol3 {
    display: flex;
    flex-direction: column; /* ← 縦並びに */
  }

  .fcol3 .fcol__link {
    display: inline-flex;
    flex-direction: column;
  }
}


/* 1100px以下：ナビの詰め・ハンバーガー化・ドロワー表示 */
@media (max-width: 1140px) {
  .nav_kasou ul {
    gap: 18px;
  }


  .hamburger {
    display: block;
  }

  .nav_kasou {
    position: fixed;
    inset: 72px 0 auto 0;
    background: rgba(0, 0, 0, .8);
    transform: translateY(-120%);
    transition: none;      /* 初期表示時はトランジションなし */
    visibility: hidden;    /* ← これが効く */
    z-index: 1000;
  }

  .nav_kasou ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px 20px;
  }

  .nav_kasou li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .nav_kasou a {
    display: block;
    padding: 14px 6px;
    color: #fff;
  }

  .nav-toggle:checked ~ .hamburger + .nav_kasou {
    transform: translateY(0);
  }

  #nav-toggle:checked ~ .nav_kasou {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform .25s ease;  /* ここでだけアニメ有効 */
  }
  /* リユース */

    .industry-block__title3,
    .industry-block__title4 {
    margin-top: 80px;
  }

}

@media (max-width: 1024px){
  .fcol--top{ justify-self: start; }


  .cta-vline{ height: 100px; }
    /* 経営理念 */

  :root{ --g-item-w: 200px; --g-gap: 16px; }

.philo-card{
    gap: 36px;
    padding: 24px 28px;
  }
  .philo-thumb{ 
    width: 220px; 
  }

  /* リユースについて */
  .industry-block__grid4 {
    grid-template-columns: 45% 55%;
    gap: clamp(16px, 3.2vw, 28px);
  }
  /* コラム */
  .post-list{
    gap: clamp(18px, 3.2vw, 28px);
  }
  .post-link{
    grid-template-columns: 260px 1fr; 
    gap: clamp(16px, 2.8vw, 28px);
  }

    /* コラム詳細 */

  .article{ padding: clamp(48px, 7vw, 80px) 0; }
  .article__head{ margin-bottom: clamp(14px, 2.6vw, 22px); }
  .article__title{ line-height: 1.5; }
  .article__hero{ margin-bottom: clamp(18px, 3vw, 28px); }
}

/* レスポンシブ */
@media (max-width: 980px){
  .business__grid {
    grid-template-columns: 1fr;
  }
  .business-sec{
    width: var(--container);
    margin-inline: auto;
    padding-top: 100px;
  }
  .btn-red {
    align-self: stretch;         
    text-align: center;
    justify-content: center;
  }
.biz-text p{
  margin: 0 20px;
    line-height: 2.5;

}
.biz-text {
  max-width: 1000px;  
}

  .footer__wrap{
    grid-template-columns: 1fr;   /* 縦並び */
    justify-items: center;        /* 中央寄せ */
    text-align: center;
  }
  .footer__brand{
    justify-self: center;
  }
  .footer__logo{
    width: 60px; height: 60px;
  }

  .footer__nav{
    /* 2列グリッドで読みやすく */
    width: 100%;
  }

  .fcol{
    justify-self: center;
  }

  /* TOPへ戻るボタンは最下段中央へ */
  .fcol--top{
    justify-self: center;
    align-self: center;
    grid-column: 1 / -1;
  }

  .footer__rule,
  .footer__legal{
    grid-column: 1 / -1;
  }

/* 代表挨拶 */
  .company-subnav__wrap{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
  .company-subnav .pill {
    min-width: auto;
    font-size: 15px;
    padding: 14px 10px;
  }

/* 催事 */
 .fairbuy-intro{
    padding: clamp(44px, 7vw, 72px) 0;
  }
  .fairbuy-intro__wrap{
    gap: clamp(16px, 2.6vw, 24px);
    align-items: center; 
  }
  .fairbuy-intro__text p{
    line-height: 1.9;
  }
  .title-underline{
    width: 96px;
  }
   .fair-bg{
    padding: clamp(36px, 7vw, 60px) 0;
    background-size: cover;                /* ビューに合わせてカバー */
  }
  .point-title{ gap: 6px; }
  .point-title .dot{ width: 9px; height: 9px; }
  .fairbuy-points__head h3{ font-size: clamp(17px, 2.2vw, 20px); }
  .point-card__title{ font-size: clamp(15px, 1.9vw, 18px); }
  .point-card__text{ line-height: 1.85; }
}





@media (max-width: 960px){
  .news-contact-cta .cta-card{
    text-align: left;
    gap: 56px;
  }
  .cta-right{ justify-self: start; }

  .column__comingsoon{
    margin: 120px 10px 0;
  }
  .column-small{
    margin: 0 10px 120px;
  }
}

/* 900px以下：company は縦積み */
@media (max-width: 900px) {
.news-window{
  display: none;
}
  /* コラム*/
  .column__grid{
    grid-template-columns: 1fr; /* 縦積み */
  }
  .col-card{
    grid-template-columns: 110px 1fr;
  }


  /* 代表挨拶 */
    :root{ 
    --greeting-lift: clamp(32px, 8vw, 72px); 
}
  .greeting__wrap{
    grid-template-columns: 1fr;
  }
  .greeting__photo img{
    margin-top: -16px;   /* 少しだけ浮かせる */
  }
  .greeting-body::before{
    left: 0;
  }
/* 判断基準 */
  .policy-lead{
    margin-top: 50px;
  }
    .industry-block_4{
    left: max(8px, calc((100vw - var(--container)) / 2));
    top: clamp(40px, 6vw, 60px);
    font-size: clamp(64px, 22vw, 96px);
    opacity: .16;
  }
  .industry-block4 .industry-block__card{
    border-radius: 20px;
    padding: clamp(24px, 6vw, 40px);
  }
  .industry-block__grid4 {
    grid-template-columns: 1fr;   /* 縦積み */
  }
  .ind-col--img{
    order: 1;
  }
  .ind-col--text{
    order: 2;
  }
  .fairbuy-wideimg {
    display: none;
  }

 /* お知らせ詳細 */
   .news-detail {
    padding: clamp(44px, 7vw, 72px) 0;
  }
  .news-detail__title {
    line-height: 1.5;               
  }
  .news-detail__content {
    font-size: 15px;
  }
  /* 問い合わせ */
   .contact-container {
    max-width: 720px;
    padding: 0 18px;
  }

  .contact-section-title {
    margin: 48px 0 18px;
    font-size: 17px;
  }

  .contact-phone { font-size: 24px; }
  .contact-hours { font-size: 13px; }

  .contact-form .form-group { margin-bottom: 28px; }

 /* プライバシーポリシー */
  .privacy-sec{
    padding: clamp(48px, 7vw, 72px) 0;
  }
  .privacy__h2{
    font-size: clamp(22px, 2.6vw, 28px);
    margin-bottom: 26px;
  }
  .privacy__h3{
    font-size: 17px;
    margin: 28px 0 10px;
    padding-left: 10px;
  }
  .privacy-sec p{
    font-size: 15px;
    line-height: 1.9;
  }
}

@media (max-width: 900px) and (min-width: 601px) {
  .fcol3 {
    display: flex;
    flex-direction: column; 
    align-items: center;  
    gap: 18px;             
    text-align: center;
  }

  .fcol3 .fcol__link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 860px){
 /* コラム一覧 */
}

@media (max-width: 840px){
  .article__hero{ margin-bottom: clamp(18px, 5vw, 28px); }
    .news-contact-cta .cta-card{
    width: 100%;
    margin: 0;
    border-radius: 14px;
    /* 縦レイアウトに切替 */
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 14px;
    padding: clamp(22px, 6vw, 30px);
  }
  .cta-vline{ display: none; }

    .cta-left,
  .cta-mid,
  .cta-right{
    justify-self: center;
    text-align: center;
  }

  .cta-phone{
    justify-content: center;
    gap: 10px;
  }
  .cta-hours{
    font-size: 13px;
  }


  .cta-right{ width: 70%; }
  .mail-btn{
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    box-shadow: 0 10px 20px rgba(164,0,0,.16);
  }


}


@media (max-width: 768px){
  .hero-sp{
    display: block;
  }
  .hero-pc{
    display: none;
  }
  .hero-copy{
    display: none;
  }
.hero-copy-sp{
  display: block;
    position: absolute;
  right: -1%;
  bottom: 15%;   
  text-align: left;
  color: #fff;
}

.hero-copy-sp .eyebrow.en {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(20px, 4vw, 40px);
  letter-spacing: .08em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  margin-right: 30px;
}

.hero-copy-sp .jp-title {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(24px, 9vw, 120px);
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .5);
   text-align: left; 
   white-space: nowrap;
   overflow: hidden;  
}
.company__desc{
  display: none;
}

.company__desc-sp{
  display: flex;
  margin-bottom: 40px;
}

  .news__wrap {
    grid-template-columns: 1fr;
  }

  /* 判断基準 */
  .policy-sec{ 
    padding: 64px 0; 
  }

  .policy-hero{ 
    margin-bottom: 36px; 
  }

/* リユースデータ */
  .summary-points {
    padding: 20px 24px; 
  }
   .industry-hero__title {
    margin-top: 60px;
    font-size: clamp(22px, 5vw, 30px);
    line-height: 1.5;
  }

  .industry-hero__lead {
    margin-top: 14px;
    margin-bottom: 36px;
    font-size: 15px;
    line-height: 1.8;
    text-align: left; 
  }


 /* 催事 */
   .fairbuy-intro{
    padding: clamp(36px, 8vw, 56px) 0;
  }
  .fairbuy-intro__wrap{
    grid-template-columns: 1fr;     
    gap: clamp(16px, 4vw, 22px);
  }
  .fairbuy-intro__text{ order: 1; } 
  .fairbuy-intro__photo{ order: 2; }

  .section-title{
    line-height: 1.35;         
  }
  .title-underline{
    width: 80px;
    margin: 10px 0 14px;
  }
  .fairbuy-intro__photo img{
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
  }
   .fair-bg{
    padding: clamp(28px, 8vw, 44px) 0;
    background-attachment: scroll;         /* モバイルでのチラつき防止 */
  }
  .fairbuy-points__head{
    margin-bottom: clamp(14px, 5vw, 24px);
    text-align: left;                   
  }
  .point-cards{
    gap: clamp(12px, 4vw, 18px);
  }
  .point-card{
    border-radius: 24px;
    padding: clamp(16px, 5vw, 24px);
    padding-left: clamp(16px, 6vw, 28px);
    padding-right: clamp(16px, 6vw, 28px);
  }
  .point-card__title{
    margin-bottom: 6px;
    font-size: clamp(16px, 4.5vw, 18px);
  }
  .point-card__text{
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.9;
  }
   /* お知らせ */
   .news-item{ padding: 16px 0; }
  .news-link{
    grid-template-columns: 100px auto 1fr;
    gap: 12px;
  }
  .news-date{ min-width: auto; font-size: 14px; }
  .news-label{ font-size: 12px; padding: 2px 8px; }
  .news-text{ font-size: 15px; }

 /* コラム */
  .post-link{
    grid-template-columns: 220px 1fr;  
    gap: 16px;
  }
  .post-title{
    /* 既に clamp だが、行間だけ少し詰める */
    line-height: 1.45;
  }
  .post-excerpt{
    font-size: 13px;
  }

      /* コラム詳細 */

  .article{ padding: clamp(40px, 6vw, 64px) 0; }
  .article__title{
    font-size: clamp(18px, 4.8vw, 24px);
    line-height: 1.45;
  }
  .article__date{ font-size: 12px; }
  .article__hero{
    border-radius: 10px;
    max-height: 56vh;
  }
  .article__hero img{
    width: 100%;
    height: auto;
    object-fit: cover;    
    aspect-ratio: 16 / 9;
  }
  .article__body{
    line-height: 1.9;
    font-size: 15px;       /* clampより小さくなりすぎないよう底上げ */
  }
  .article__body p{ text-indent: 0; }
}

@media (max-width: 720px){
  /* 経営理念 */
  .philo-card{
    grid-template-columns: 1fr;
  }
  .philo-thumb{
    width: 100%;
  }
      .biz-cards {
    grid-template-columns: 1fr;
    max-width: 400px;
  }


  /* 会社概要 */
  .company-table .row{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .company-table dt{
    justify-self: start;        
    text-align: left;
    padding-bottom: 8px;
    border-bottom: none;         
    border-left: 2px solid var(--brand-red);
    padding-left: 10px;
  }
  .company-table dd{
    padding-bottom: 12px;
    border-bottom: 1px solid #bdbdbd;
  }
  /* リユース事業について */
.industry-block__text {
    margin-top: 30px;
}
    /* 催事買取 */

  .fair-subnav__wrap{
    grid-template-columns: 1fr;
    width: min(92vw, 520px);
  }
  .fair-subnav__top{ grid-column: 1 / 2; }
  .gallery-track{
  gap: 0;
  }



}


@media (max-width: 640px){
  .footer__wrap{
    grid-template-columns: 1fr;
  }
  .footer__brand{ margin-bottom: 8px; }
  .footer__nav{
    grid-template-columns: repeat(2, 1fr);
    padding: 0 100px;
  }
.site-footer .footer__nav .fcol3{
  display: flex !important;    
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.site-footer2 .fcol3{
  display: flex !important;     
  flex-direction: column;
  align-items: center;
  text-align: center;
}


.site-footer .footer__nav .fcol3 .fcol__link{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;        
}
  .to-top{ width: 56px; height: 56px; }

  .news-contact-cta{
    padding: clamp(28px, 7vw, 44px) 0;
  }
  .news-contact-cta .cta-card{
    width: 100%;
    margin: 0;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 14px;
    padding: clamp(22px, 6vw, 30px);
  }
  .cta-vline{ display: none; }

  .cta-left,
  .cta-mid,
  .cta-right{
    justify-self: center;
    text-align: center;
  }



  .cta-phone{
    justify-content: center;
    gap: 10px;
  }
  .cta-hours{
    font-size: 13px;
  }


  .cta-right{ width: 100%; }
  .mail-btn{
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    box-shadow: 0 10px 20px rgba(164,0,0,.16);
  }

    /* 経営理念 */

  :root{ --g-item-w: 160px; --g-gap: 12px; }

}
@media (max-width: 600px) {
  .footer__legal {
    flex-direction: column; /* ← 改行（縦並び） */
    gap: 6px; /* 間の余白調整 */
  }
.footer-bottom {
    flex-direction: column; /* ← 改行して上下に */
    gap: 6px;               /* 行間を少し狭く */
    text-align: center;    
  }
 /* お知らせ詳細 */
  .news-detail { padding: 40px 0; }

  .news-detail__title {
    font-size: clamp(18px, 5.6vw, 24px);
    margin-bottom: 12px;
  }

  .news-detail__date {
    font-size: 13px;
    margin-bottom: 18px;
    color: #555;
  }

  .news-detail__content {
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 28px;
  }

  .news-detail__line { margin: 28px 0; }

  .news-detail__back .btn-red {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
  }
  /* 問い合わせ */

  .contact-container {
    max-width: 560px;
    padding: 0 16px;
  }

  .contact-section-title {
    padding: 10px 14px;
    font-size: 16px;
    margin: 36px 0 14px;
  }

  .contact-phone { 
    font-size: 22px; 
    line-height: 1.3;
    word-break: keep-all;
  }
  .contact-hours { font-size: 12px; }

  .radio-group {
    gap: 20px;
    flex-wrap: wrap;
  }
  .contact-form .radio-group label {
    font-size: 15px;
    white-space: nowrap;
  }
  .radio-group input[type="radio"] {
    width: 20px; height: 20px; 
  }

  .contact-form label { font-size: 15px; }
  .contact-form input,
  .contact-form textarea {
    font-size: 15px;
    padding: 11px 12px;
  }
  .contact-form textarea { min-height: 140px; }

  .contact-form .form-group { margin-bottom: 22px; }

  .button-container { 
    margin-top: 48px;
    margin-bottom: 72px;
  }
  .submit-button {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    font-size: 16px;
    padding: 14px 18px;
    border-radius: 6px;
  }

 /* コラム */
  .post-link{
    grid-template-columns: 1fr;  
    gap: 12px;
    align-items: start;
  }
  .post-thumb{
    aspect-ratio: 16 / 9;         /* 横幅いっぱいで見栄え良く */
  }
  .post-divider{
    margin-top: 14px;
  }
  /* 抜粋は3行で省略（必要なければ削除可） */
  .post-excerpt{
    display: -webkit-box;
    /* -webkit-line-clamp: 3; */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pager{
    margin-top: 28px;
    gap: 8px;
  }
  .pager__item{
    width: 32px;
    height: 32px;
  }
   /* プライバシーポリシー */
     .privacy-sec{
    padding: 40px 0;
  }
  .privacy__h2{
    font-size: 20px;
    margin-bottom: 20px;
  }
  .privacy__h3{
    font-size: 16px;
    margin: 22px 0 8px;
    border-left-width: 3px;
    padding-left: 8px;
  }
  .privacy-sec p{
    font-size: 14px;
    line-height: 1.85;
    margin: 0 0 16px;
    word-break: break-word;      
  }
}
@media (max-width: 560px){
  :root{
    --cue-white: 36px;
    --cue-red:   46px;
  }

  /* 代表挨拶 */

  .company-subnav__wrap{
    grid-template-columns: 1fr;
    width: min(92vw, 520px);
  }
 /* 経営理念 */

.philo-card{
    flex-direction: column;  
    gap: 18px;
    padding: 32px 30px;
  }
  .philo-thumb{
    width: 100%;  /* 画面に合わせて可変 */
    margin: 0 auto;  
    aspect-ratio: 16 / 9;       
  }
  .philo-body{
    width: 100%;
  }
  .philo-title{
    margin-top: 4px;
    font-size: clamp(18px, 3.6vw, 22px);
  }
  .philo-title::after{
    width: 56px;           
    margin-top: 6px;
  }
  .philo-text{
    font-size: clamp(14px, 2.6vw, 16px);
    line-height: 1.9;
  }

    /* 問い合わせ */

  .radio-group { gap: 20px; }
}

@media (max-width: 520px){
  .mail-btn{
    width: 100%;
    justify-content: center;
  }
 /* リユースについて */
.ind-card{
  padding: 0;
}
}
@media (max-width: 450px){
  .footer__nav{
    padding: 0;
  }

   /* 催事 */
   .fairbuy-intro{
    padding: 32px 0;
  }
  .title-underline{
    width: 70px;
    margin: 8px 0 12px;
  }
  .fairbuy-intro__text p{
    line-height: 1.85;
  }
  .fair-bg{
    padding: 50px 0;
    background-position: center;
  }
  .point-title .dot{ width: 8px; height: 8px; }
  .point-card{
    border-radius: 18px;
    padding: 16px;
  }
  .point-card__title{ font-size: 15px; }
  .point-card__text{ font-size: 14px; line-height: 1.85; }

  /* お知らせ */
   .news-item{ padding: 14px 0; }
.news-link{
    display: flex;
    flex-wrap: wrap;          /* 折り返しを許可（長文タイトル対策） */
    align-items: center;
    gap: 8px;                 /* ← 日付とラベルの間の隙間を狭く */
  }

  .news-date {
    font-size: 13px;
    color: #444;
    order: 1;
  }

  .news-label {
    font-size: 12px;
    order: 2;
  }
.news-text {
    display: block;
    width: 100%;             /* ← 1行目（日付＋ラベル）の下に配置 */
    margin-top: 2px;         /* ← 少しだけ余白 */
    font-size: 15px;
    line-height: 1.8;
    order: 3;
  }
    .pagination{ gap: 10px; }
  .page{ width: 40px; height: 40px; }

 /* コラム詳細 */
   .article{ padding: 36px 0; }
  .article__head{ margin-bottom: 14px; }
  .article__title{
    font-size: 20px;      
    line-height: 1.4;
  }
  .article__date{ font-size: 11px; }
  .article__hero{
    margin-bottom: 18px;
    border-radius: 8px;
    max-height: 46vh;      /* 画像が長くなりすぎないように */
  }
  .article__body{
    font-size: 14.5px;
    line-height: 1.9;
  }
  .article__rule{ margin: 20px 0 14px; }
  .article__back{ margin-top: 10px; }
  .btn-pill-red{
    width: 100%;
    padding: 14px 18px;    /* 親指タップしやすい大きさ */
    border-radius: 10px;   /* pill → 角丸四角に寄せる場合はお好みで */
  }
}


@media (max-width: 380px){
  .cta-en{ font-size: 28px; }
  .cta-tel{ font-size: 18px; }
  .mail-btn{ padding: 12px 16px; font-size: 14px; }
 /* お知らせ詳細 */
  .news-detail__title {
    word-break: keep-all;    
    overflow-wrap: anywhere;  
  }
  .news-detail__content p { margin: 0; }
  /* 問い合わせ */
   .contact-section-title { font-size: 15px; }
  .contact-phone { font-size: 20px; }
  .contact-form input,
  .contact-form textarea { font-size: 14px; }

  .contact-form label { 
    line-height: 1.4;
    word-break: break-word;
  }
/* プライバシーポリシー */
  .privacy__h2{ font-size: 19px; }
  .privacy__h3{ font-size: 15px; }
  .privacy-sec p{ font-size: 13.5px; }

  /* コラム */
   .post-index{
    padding: 40px 0; 
  }
  .post-link{
    gap: 10px;
  }
  .post-date{
    font-size: 12px;
  }
  .post-title{
    font-size: 15px;  
  }
/* コラム詳細 */
  .article{ padding: 28px 0; }
  .article__title{ font-size: 18px; }
  .article__body{ font-size: 14px; }
  .article__hero{ max-height: 40vh; }
}
@media (max-width: 330px){
   /* リユース */
  .ind-figure{
    flex-wrap: wrap;  
  }
}

@media (max-width: 260px) {
  .site-footer{
    padding: clamp(36px, 8vw, 48px) 0;
  }
  .footer__logo{
    width: 56px; height: 56px;
  }
  .footer__nav{
    grid-template-columns: 1fr;   
    gap: 22px;
  }
  .fcol__en{ font-size: 18px; }
  .fcol__jp{ font-size: 12px; }
  .fcol__list a{ font-size: 15px; }

  .to-top{
    width: 56px; height: 56px;  
  }

  .footer__rule{
    margin: 22px 0 14px;
  }
  .footer__legal{
    gap: 6px;
    font-size: 12px;
  }
}