:root{
  --ink:#0f0f0f;--muted:#6b6b6b;--gold:#b68b2e;--line:#e9e9e9;
  --max:1160px;--pad-xl:56px;--pad-lg:40px;--pad-md:28px;--stickyH:116px
}
*{
	box-sizing:border-box;
}
body{
  margin:0;font-family:"A1明朝","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Baskerville","Garamond","Times New Roman",serif;color:var(--ink);line-height:2.0;letter-spacing:.02em;
}
a{
	color:inherit;text-decoration:none;
}
img{
	max-width:100%;height:auto;display:block;
}
html{ scroll-behavior:smooth; }

/* ===== Header / Nav ===== */
header{
	position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:50;
}
.h-inner{
  max-width:var(--max);margin:0 auto;padding:14px var(--pad-md);
  display:flex;align-items:center;gap:18px
}
.brand img{
	height:104px;
}
nav{
	margin-left:auto;
}

/* PC nav */
.nav{
	display:flex;gap:18px;align-items:center
}

.nav a {
  padding:8px 12px;
  border-radius:12px;
  transition: opacity .25s ease, background .25s ease;
}

.nav a:hover {
  background:#f3f3f3;
  color:var(--gold);        /* あなたのゴールド色でも可 */
  font-weight:600;
  transform:translateY(-1px); /* 少し浮く効果 */
}


/* Lang buttons */
.lang button{
  padding:8px 14px;border:1px solid var(--line);background:#fff;border-radius:999px;cursor:pointer;font-size:.95rem;
}
.lang .active{
	background:#f0f0f0;
}

/* Hamburger button (hidden on desktop) */
.hb{
  display:none;width:48px;height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;
}
.hb::before,.hb::after,.hb span{
  content:"";display:block;width:24px;height:2px;background:#333;margin:0 auto;
}
.hb:before{ transform:translateY(7px) }
.hb:after { transform:translateY(-7px) }

/* Panels */
.panel{
	display:flex;gap:18px;align-items:center
}
.panel.desktop{
	display:flex;
} /* PC用 */
.panel.mobile{
  display:none;flex-direction:column;align-items:flex-start;padding:var(--pad-md) 0;border-top:1px solid var(--line)
}

/* ===== Layout ===== */
.wrap{
	max-width:var(--max);margin:0 auto;padding:var(--pad-xl) var(--pad-md)
}
.section{ padding:var(--pad-lg) 0;scroll-margin-top:calc(var(--stickyH) + 12px) }
.h2{
	margin:0 0 var(--pad-md);font-size:1.82rem;letter-spacing:.04em;scroll-margin-top:calc(var(--stickyH) + 12px)
}

/* ===== Hero ===== */
.hero{
  position:relative;border-radius:22px;overflow:hidden;height:min(66vh,760px);background:#000;
}
.hero::before{
  content:"";position:absolute;inset:0;background:url("TOP-2.jpg") center/cover no-repeat;
}
.hero-copy{
  position:absolute;
  inset:0;                       /* 上下左右ぜんぶ 0 にして全面レイヤー化 */
  display:grid;
  place-items:center;            /* グリッドで上下左右センター */
  padding:var(--pad-lg) var(--pad-md);
  text-align:center;
  color:#fff;
}

.hero-copy h1,.hero-copy p{
	color:#fff;
}
.hero-copy h1{
  margin:0 0 12px;font-size:2.06rem;font-weight:600;letter-spacing:.06em;
}
.hero-copy p{
	margin:0;font-size:1.08rem;
}





/* ===== Sections ===== */
.news ul{
	list-style:none;margin:0;padding:0;
}
.news li{
	display:flex;gap:14px;padding:14px 0;border-top:1px dashed var(--line)
}
.news time{
	color:var(--muted);white-space:nowrap;
}

.services{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px }
.svc{
	padding:4px 2px;
}
.svc h3{
	margin:0 0 8px;font-size:1.04rem;letter-spacing:.02em;
}
.svc p{
	margin:0 0 10px;color:#222;font-size:.94rem;
}


.more{
	color:var(--gold);font-weight:600;font-size:.94rem;
}


/* === “くわしく見る →” ハイライト付きデザイン === */
.more {
  color: var(--gold);               
  font-weight: 600;
  font-size: .94rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  padding: 4px 6px;                 /* ほんの少し余白を追加 */
  transition: color .25s ease, background-color .25s ease, transform .25s ease;
}

.more::after {
  content: "→";
  display: inline-block;
  transition: transform .25s ease;
}

.more:hover {
  color: var(--gold);                        /* 文字はゴールドのまま */
  background-color: rgba(182,139,46,0.25);   /* 半透明の淡いゴールド */
}

.more:hover::after {
  transform: translateX(4px);       /* 矢印を右にスライド */
}


.profile{ display:grid;grid-template-columns:minmax(8em,13em) 1fr;border-top:1px solid var(--line) }
.profile dt,.profile dd{
	margin:0;padding:12px 0;border-bottom:1px solid var(--line)
}

.map iframe{
	width:100%;height:360px;border:0;
}

footer{
  border-top:1px solid var(--line);text-align:center;color:#777;padding:var(--pad-lg) var(--pad-md);font-size:.94rem;
}

/* ===== Breakpoints ===== */
@media (max-width:1060px){
  .brand img{
	height:96px;
}
}
@media (max-width:860px){
  .brand img{
	height:80px;
}
  .hb{
	display:block;
}              /* show hamburger */
  .panel.desktop{
	display:none;
}    /* hide desktop menu */
  .hero{ height:56vh }
  .services{ grid-template-columns:1fr 1fr;gap:28px }
}
@media (max-width:580px){
  .brand img{
	height:68px;
}
  .hero{ height:50vh }
  .hero-copy h1{
	font-size:1.68rem;
}
  .hero-copy p{
	font-size:1.0rem;
}
  .services{ grid-template-columns:1fr;gap:24px }
  .h2{
	font-size:1.58rem;
}
}

@media (max-width:580px){
  .hero{
    height:auto;
    min-height:50vh;
  }
  .hero-copy h1{
    font-size:1.42rem;
    line-height:1.5;
  }
  .hero-copy p{
    font-size:0.94rem;
  }
}



/* ===== language toggling ===== */
[data-lang]{
	display:none;
}
.on[data-lang]{
	display:block;
}

/* ===== Company table ===== */
.company-table{
  width:100%; border-collapse:collapse; margin-top:16px; margin-bottom:48px;
}
.company-table th, .company-table td{
  padding:14px 12px; vertical-align:top; line-height:1.8;
}
.company-table th{
  width:220px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.company-table tr{
	border-bottom:1px solid rgba(0,0,0,.12);
}

/* ===== Off-canvas (left drawer) for mobile ===== */
@media (max-width: 860px){
  /* 背景オーバーレイ */
  .backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.32);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
    z-index: 39; /* パネル(40)の一段下、header(50)の下 */
  }
  .backdrop.show{
    opacity: 1; pointer-events: auto;
  }

  /* ドロワーパネルを左からスライドイン */
  .panel.mobile{
    display:block;                 /* ← オフキャンバス用に常時生成（位置で隠す） */
    position: fixed; left: 0; right: auto;
    width: min(82vw, 360px);
    top: var(--stickyH);           /* JSで実寸に上書き */
    bottom: 0;
    transform: translateX(-100%);  /* 初期は画面外 */
    transition: transform .22s ease-out, top .08s ease-out;
    overflow: auto; background: #fff;
    border-right: 1px solid var(--line);
    z-index: 40;                   /* header(50)より下、backdrop(39)より上 */
    padding: var(--pad-md) 0;
  }
  .panel.mobile.open{
    transform: translateX(0);      /* 画面内へ */
  }

  /* 背景固定（任意） */
  html.no-scroll, html.no-scroll body{
	overflow: hidden;
}
}
/* === モバイルドロワー：上部ゴールドバー＆行ごとのゴールド下線 === */
.panel.mobile{
  /* 先頭にバーを入れるぶんだけ上パディングを増やす（バーの高さ 6px + 既存の余白） */
  padding-top: calc(var(--pad-md) + 6px);
}

/* 上部のゴールドバー */
.panel.mobile::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:6px;                /* バーの太さ。好みで 4px/8px などに調整可 */
  background: var(--gold);   /* 会社カラーを使用 */
  z-index:1;                 /* パネル内で最前面 */
}

/* モバイルメニューの各行に「下線（ゴールド）」を付与 */
.panel.mobile .nav a{
  display:block;             /* 1行全幅クリック可能に */
  width:100%;
  padding:12px var(--pad-md);
  border-bottom:1px solid var(--gold);   /* Excel風の下罫線 */
}

/* 最後の行は線を消す */
.panel.mobile .nav a:last-child{
  border-bottom:none;
}

.sake-columns {
  display: grid;
  gap: 24px;
  margin-top: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sake-col {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sake-col h3 {
  margin-top: 0;
  font-size: 1.1rem;
}

.sake-col p {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 12px;
}

.sake-col .more {
  margin-top: auto;
  display: inline-block;
  margin-top: 8px;
}

/* スマホ向けの微調整 */
@media (max-width: 600px) {
  .sake-col {
    border-radius: 12px;
    padding: 16px;
  }
}

/* =========================
   Rakugo pages only
   ========================= */

.rakugo .story-img img{
  width: 75%;
  height: auto;
  border-radius: 14px;
  display: block;
  margin: 0 auto;
}

/* モバイルでは可読性優先 */
@media (max-width: 768px){
  .rakugo .story-img img{
    width: 100%;
  }
}