/* ===========================================================
   Big Surpass Co.,Ltd. — 共通スタイル
   現行HPのデザイン（黒基調ナビ・白背景・オレンジアクセント）を踏襲
=========================================================== */
:root{
  --c-black: #0d0d0d;
  --c-black-90: rgba(13,13,13,.92);
  --c-orange: #f0a500;
  --c-orange-deep: #e08e00;
  --c-white: #ffffff;
  --c-gray-text: #333333;
  --c-gray-light: #f4f4f4;
  --c-line: #e2e2e2;
  --font-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS明朝E", "MS PMincho", "Times New Roman", serif;
  --font-sans: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS明朝E", "MS PMincho", "Times New Roman", serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  font-family:var(--font-serif);
  color:var(--c-gray-text);
  background:var(--c-white);
  line-height:1.9;
  font-size:17px;
  overflow-x:hidden;
  max-width:100vw;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

.container{max-width:1200px; margin:0 auto; padding:0 32px;}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  transition:background .3s;
}
.site-header.scrolled{background:var(--c-black-90);}
.site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap;
  padding:12px 20px;
  gap:16px;
}
.logo{
  display:flex; align-items:center; gap:8px;
  color:var(--c-white);
  font-family:var(--font-serif);
  font-size:22px; letter-spacing:.3px;
  flex-shrink:0;
}
.logo svg{width:30px; height:30px;}
.logo-img{height:40px; width:auto; display:block;}
.nav-list{display:flex; flex-wrap:nowrap; gap:11px; align-items:center;}
.nav-list a{
  color:var(--c-white);
  font-size:13px;
  letter-spacing:0;
  padding:6px 1px;
  white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:border-color .2s, opacity .2s;
}
.nav-list a:hover{border-color:var(--c-orange);}
.nav-list a.current{border-color:var(--c-orange); opacity:.85;}
.nav-toggle{display:none;}

/* 現行HPと同様、ナビは常に横一列。収まりきらない極端に狭い幅（実質モバイル）でのみ
   ハンバーガーメニューへ切り替える保険をかける（デザインの基本方針は変更しない） */
.header-inner{overflow-x:auto; scrollbar-width:none;}
.header-inner::-webkit-scrollbar{display:none;}

@media (max-width:760px){
  .nav-toggle{
    display:block; margin-left:auto; background:none; border:none; color:var(--c-white);
    font-size:26px; cursor:pointer; z-index:110; padding:0;
  }
  .nav-list{
    position:fixed; top:0; right:-100%; height:100vh; width:78vw; max-width:320px;
    background:var(--c-black); flex-direction:column; gap:0;
    padding:90px 28px 28px; transition:right .3s;
  }
  .nav-list.open{right:0;}
  .nav-list a{padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); width:100%; color:var(--c-white);}
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  background:var(--c-gray-light);
  padding:14px 32px;
  font-size:15px; color:#888;
}
.breadcrumb a{color:#888;}

/* ---------- Hero (inner pages) ---------- */
.page-hero{
  position:relative;
  height:56vh; min-height:340px;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
/* 全ページ共通：トップ画像（各ページの page-hero ／ホームの hero）の高さを統一。
   PC：画面一面（ビューポート高さ − ヘッダー高さ）。スマホ：画面高さの70%。
   画像は background-size:cover で縦横比を保ったまま拡大（引き伸ばし無し）。 */
:root{--header-h:64px;}
.page-hero, .hero{
  height:calc(100vh - var(--header-h));
  height:calc(100svh - var(--header-h));
  min-height:520px; max-height:none;
}
@media (max-width:760px){
  .page-hero, .hero{
    height:70vh; height:70svh;
    min-height:400px; max-height:none;
  }
}
/* トップ画像の明るさ調整（ホーム／リユース／新電力／SNSのみ。指示4-1・7-1・8-1・9-1） */
/* 暗いオーバーレイを .45→.10 に下げ、さらに画像自体を明るく補正（リユース・新電力の画像は現行HPの暗い表示のまま
   切り出された素材のため、オーバーレイを外すだけでは現行HPと同程度にしかならない）。見出しは白文字のため可読性は維持 */
.page-hero.hero-bright{filter:brightness(1.4);}
.page-hero.hero-bright::after{background:rgba(10,10,10,.10);}
.page-hero.hero-bright h1{text-shadow:0 2px 12px rgba(0,0,0,.45);}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:rgba(10,10,10,.45);
}
.page-hero h1{
  position:relative; z-index:1;
  color:var(--c-white);
  font-family:var(--font-serif);
  font-size:clamp(32px,4.6vw,50px);
  letter-spacing:.15em;
}

/* ---------- Section basics ---------- */
section{padding:90px 0;}
.section-tight{padding:60px 0;}
.eyebrow{
  font-family:var(--font-serif);
  font-size:clamp(46px, 6vw, 76px); color:var(--c-black);
  font-weight:700; line-height:1.1;
}
.eyebrow .first{color:var(--c-orange);}
.eyebrow-sub{color:#999; font-size:16px; margin-top:4px; letter-spacing:.08em;}
.rule{
  width:60px; height:3px; background:var(--c-orange); margin:20px 0;
}
.center{text-align:center;}
.center .rule{margin-left:auto; margin-right:auto;}

.btn{
  display:inline-block;
  background:linear-gradient(180deg, #f7bb2e, var(--c-orange-deep));
  color:var(--c-white);
  padding:16px 46px;
  font-size:16px; letter-spacing:.12em;
  border:none; cursor:pointer;
  transition:filter .2s, transform .2s;
  align-self:flex-start; /* flexコンテナ内に置かれてもstretchで横幅いっぱいに伸びないよう固定（サイズ統一） */
}
.btn:hover{filter:brightness(1.06); transform:translateY(-1px);}

/* ---------- Footer ---------- */
.site-footer{background:var(--c-black); color:var(--c-white); padding:46px 32px 30px;}
.footer-top{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:20px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.15);
}
.footer-logo{font-family:var(--font-serif); font-size:24px;}
.footer-links{display:flex; gap:26px; flex-wrap:wrap; font-size:13px;}
.footer-copy{text-align:right; font-size:14px; opacity:.7; margin-top:22px;}

/* ---------- Scroll to top ---------- */
.to-top{
  position:fixed; right:26px; bottom:26px; z-index:90;
  width:46px; height:46px; background:var(--c-orange);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-white); font-size:20px; box-shadow:0 3px 10px rgba(0,0,0,.25);
}

/* ---------- Utility ----------
   .reveal はJS(main.js)が読み込めた場合のみアニメーション化。
   JS未実行環境でも内容は必ず表示される（プログレッシブエンハンスメント）。 */
.reveal{opacity:1; transform:none;}
.js-ready .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.js-ready .reveal.left{transform:translateX(-20px);}
.reveal.in{opacity:1; transform:translate(0,0);}
.js-ready .reveal.in{opacity:1 !important; transform:translate(0,0) !important;}
@media (prefers-reduced-motion: reduce){
  .js-ready .reveal{opacity:1; transform:none; transition:none;}
}
.stagger .reveal:nth-child(1){transition-delay:.05s;}
.stagger .reveal:nth-child(2){transition-delay:.2s;}
.stagger .reveal:nth-child(3){transition-delay:.35s;}

/* ---------- Accordion (store selector etc.) ---------- */
.acc-list{display:flex; flex-wrap:wrap; gap:14px;}
.acc-item{flex:1 1 30%; min-width:220px;}
.acc-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg, #f7bb2e, var(--c-orange-deep));
  color:#fff; border:none; cursor:pointer;
  padding:16px 22px; font-size:16.5px; letter-spacing:.04em;
  font-family:var(--font-serif);
}
.acc-toggle .chev{transition:transform .25s;}
.acc-item.open .acc-toggle .chev{transform:rotate(180deg);}
.acc-panel{display:none; padding-top:46px;}
.acc-item.open .acc-panel{display:block;}
@media (max-width:760px){.acc-item{flex:1 1 100%;}}

.store-detail{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
.store-detail img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.store-detail h3{font-size:26px; margin-bottom:18px;}
.store-detail p{font-size:16px; line-height:2;}
.store-cta{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}
.store-cta a{
  flex:1 1 auto; min-width:150px; text-align:center;
  padding:14px 10px; font-size:15.5px; color:#fff;
}
.store-cta .cta-official{background:linear-gradient(90deg,#f7bb2e,var(--c-orange-deep));}
.store-cta .cta-ig{background:linear-gradient(90deg,#f58529,#dd2a7b,#8134af);}
.menu-block{background:var(--c-gray-light); padding:70px 0; text-align:center; margin-top:56px;}
.menu-block h4{font-size:19px; letter-spacing:.08em; margin-bottom:36px;}
.menu-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:36px; text-align:left; max-width:1000px; margin:0 auto;}
.menu-grid figure{margin:0;}
.menu-grid img{width:100%; aspect-ratio:16/11; object-fit:cover;}
.menu-grid figcaption{margin-top:12px; font-size:15.5px; padding-bottom:12px; border-bottom:1px dotted var(--c-line);}
.menu-cta{margin-top:44px;}
@media (max-width:760px){.store-detail{grid-template-columns:1fr;} .menu-grid{grid-template-columns:1fr;}}

table.profile-table{width:100%; border-collapse:collapse;}
table.profile-table th, table.profile-table td{
  text-align:left; padding:22px 24px; border-top:1px solid var(--c-line);
  vertical-align:top;
}
table.profile-table th{
  background:var(--c-gray-light); width:220px; font-weight:600; font-size:16px;
}
table.profile-table tr:last-child th, table.profile-table tr:last-child td{border-bottom:1px solid var(--c-line);}

/* スマホ：表（会社概要・採用情報）の項目列が220px固定のため内容列が数文字幅まで潰れていた不具合を修正 */
@media (max-width:760px){
  table.profile-table th{width:32%; padding:16px 12px; font-size:15px;}
  table.profile-table td{padding:16px 12px;}
}
/* スマホ：ボタン文字（「VIEW MORE」「お問い合わせはこちら」等）が枠内で折り返していた不具合を修正 */
@media (max-width:760px){
  .btn{padding-left:28px; padding-right:28px; letter-spacing:.06em; max-width:100%;}
}
/* 360px前後の小さいスマホ：表の内容列とボタン内の文字が不自然に折り返さないよう、余白・字間のみ微調整（指示3-5） */
@media (max-width:400px){
  table.profile-table th{width:28%; padding:14px 8px;}
  table.profile-table td{padding:14px 10px;}
  .btn{padding-left:18px; padding-right:18px; letter-spacing:.02em;}
}