/* ============================================================
   莉々庵 RECRUIT — Mobile-first / Monotone Japanese Modern
   ============================================================ */
:root{
  --paper:#F6F4EF;      /* 生成り */
  --ink:#1C1B19;        /* 墨黒 */
  --ink-deep:#232220;   /* 濃墨(反転セクション) */
  --gold:#A8853C;       /* 蕎麦色アクセント */
  --line-green:#06C755; /* LINE */
  --rule:#DDD8CE;       /* 罫線 */
  --serif:'Noto Serif JP','Noto Serif CJK JP','Hiragino Mincho ProN','Yu Mincho',serif;
  --sans:'Noto Sans JP','Noto Sans CJK JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:15px;
  line-height:1.9;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  padding-bottom:64px; /* 固定CTAバー分 */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---------- 共通パーツ ---------- */
.inner{
  width: 100%;;margin:auto auto;
  padding:0 20px;
  display: block;
}
.sec{padding:64px 0}
.sec-label{
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:.35em;
  color:var(--gold);
  text-transform:uppercase;
  display:block;
  margin-bottom:10px;
}
.sec-title{
  font-family:var(--serif);
  font-size:26px;
  font-weight:500;
  letter-spacing:.12em;
  line-height:1.5;
  margin-bottom:28px;
}
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;border-radius:2px;
  font-weight:700;font-size:15px;letter-spacing:.08em;
  transition:opacity .2s;
}
.btn:active{opacity:.75}
.btn-gold{background:var(--gold);color:#fff}
.btn-outline{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-line{background:var(--line-green);color:#fff}
.btn-ink{background:var(--ink);color:#fff}

/* ---------- ヘッダー ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,244,239,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.header-in{
  display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 16px;max-width:1000px;margin:0 auto;
}
.brand{display:flex;flex-direction:column;line-height:1.3}
.brand .name{font-family:var(--serif);font-size:16px;letter-spacing:.2em;font-weight:600}
.brand .sub{font-size:9px;letter-spacing:.28em;color:#8a857b}
.header-cta{
  font-size:12px;font-weight:700;letter-spacing:.1em;
  background:var(--ink);color:#fff;
  padding:9px 16px;border-radius:2px;
}

/* ---------- ヒーロー ---------- */
.hero{
  position:relative;
  min-height:88svh;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 120% 70% at 85% 10%, rgba(168,133,60,.14), transparent 55%),
    linear-gradient(165deg,#2b2925 0%,#1C1B19 55%,#141311 100%);
  color:#f2efe8;
  overflow:hidden;
}
/* 蕎麦猪口の紋様風サークル */
.hero::before{
  content:"";position:absolute;
  width:520px;height:520px;border-radius:50%;
  border:1px solid rgba(246,244,239,.10);
  right:-190px;top:-150px;
}
.hero::after{
  content:"";position:absolute;
  width:340px;height:340px;border-radius:50%;
  border:1px solid rgba(168,133,60,.25);
  left:-130px;bottom:-110px;
}
.hero-in{position:relative;text-align:center;padding:80px 24px;z-index:1}
.hero-tate{
  writing-mode:vertical-rl;
  font-family:var(--serif);
  font-size:clamp(20px,5.6vw,34px);
  font-weight:500;
  letter-spacing:.28em;
  line-height:2.1;
  margin:0 auto 28px;
  height:16.5em; /* 12文字+句読点が1列に収まる高さ(フォントサイズ連動) */
}
.hero-copy{
  font-size:13px;letter-spacing:.14em;color:#b8b3a8;margin-bottom:36px;
}
.hero-copy strong{color:var(--gold);font-weight:500}
.hero-btns{display:flex;flex-direction:column;gap:12px;max-width:320px;margin:0 auto}
.hero-note{margin-top:18px;font-size:11px;letter-spacing:.12em;color:#8a857b}

/* ---------- 働く理由 ---------- */
.reasons{display:flex;flex-direction:column;gap:16px}
.reason{
  background:#fff;
  border:1px solid var(--rule);
  padding:28px 24px;
  position:relative;
}
.reason .num{
  font-family:var(--serif);
  font-size:13px;letter-spacing:.2em;color:var(--gold);
  display:block;margin-bottom:8px;
}
.reason h3{
  font-family:var(--serif);
  font-size:18px;font-weight:600;letter-spacing:.08em;
  margin-bottom:10px;line-height:1.6;
}
.reason p{font-size:13.5px;color:#4a463f}

/* ---------- 募集職種 ---------- */
.sec-dark{background:var(--ink-deep);color:#f2efe8}
.sec-dark .sec-title{color:#f2efe8}
.jobs{display:flex;flex-direction:column;gap:20px}
.job{
  border:1px solid rgba(246,244,239,.16);
  padding:28px 24px;
  background:rgba(246,244,239,.03);
}
.job-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.job-head h3{
  font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:.12em;
}
.job-head .en{font-size:10px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.job-wage{
  font-family:var(--serif);
  font-size:14px;letter-spacing:.06em;color:#cfc9bd;
  margin-bottom:14px;
}
.job-wage strong{font-size:21px;color:var(--gold);font-weight:600}
.job p{font-size:13.5px;color:#cfc9bd;margin-bottom:16px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{
  font-size:11px;letter-spacing:.08em;
  border:1px solid rgba(246,244,239,.25);
  padding:5px 12px;border-radius:100px;color:#e6e2d8;
}

/* ---------- 募集要項 ---------- */
.spec{border-top:1px solid var(--rule)}
.spec div{
  display:flex;flex-direction:column;
  padding:16px 4px;border-bottom:1px solid var(--rule);
}
.spec dt{
  font-size:12px;font-weight:700;letter-spacing:.18em;
  color:var(--gold);margin-bottom:4px;
}
.spec dd{font-size:14px}
.spec dd small{display:block;font-size:11.5px;color:#8a857b;margin-top:2px}

/* ---------- 1日の流れ ---------- */
.flow{position:relative;padding-left:24px}
.flow::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;
  width:1px;background:var(--rule);
}
.flow li{position:relative;padding-bottom:26px}
.flow li:last-child{padding-bottom:0}
.flow li::before{
  content:"";position:absolute;left:-24px;top:8px;
  width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--gold);
}
.flow time{
  font-family:var(--serif);font-size:15px;font-weight:600;
  letter-spacing:.1em;display:block;
}
.flow p{font-size:13.5px;color:#4a463f}
.flow-block .flow li::before{background:#fff}
.flow-wrap{display:grid;gap:32px}
.flow-block{background:#fff;border:1px solid var(--rule);padding:22px 20px 24px}
.flow-head{
  font-family:var(--serif);font-size:15px;letter-spacing:.14em;
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.flow-head .tag{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;
  background:var(--ink);color:var(--paper);padding:4px 9px;
}
.flow-head small{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;color:#8a857b}

/* ---------- 画像プレースホルダー(差し替え用モック) ---------- */
.ph{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:
    repeating-linear-gradient(45deg,rgba(28,27,25,.03) 0 10px,transparent 10px 20px),
    #ECE8DF;
  border:1px dashed #C4BDAE;
  color:#9a9488;
  overflow:hidden;
}
.ph svg{width:22px;height:22px;stroke:#9a9488}
.ph .ph-label{font-size:10px;letter-spacing:.2em;text-align:center;line-height:1.5}

/* ---------- 働くメンバー ---------- */
.members{
  display:flex;gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:4px 20px 20px;
  margin:0 -20px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.members::-webkit-scrollbar{display:none}
.member{
  flex:0 0 76%;
  max-width:300px;
  scroll-snap-align:center;
  background:#fff;border:1px solid var(--rule);
}
.member .ph{aspect-ratio:3/4}
.member-body{padding:18px 18px 22px}
.member-role{
  display:inline-block;
  font-size:10px;font-weight:700;letter-spacing:.18em;
  color:var(--gold);border:1px solid var(--gold);
  padding:3px 10px;border-radius:100px;margin-bottom:10px;
}
.member-name{
  font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.1em;
  margin-bottom:8px;
}
.member-name small{font-family:var(--sans);font-size:11px;font-weight:400;color:#8a857b;margin-left:8px;letter-spacing:.06em}
.member-body p{font-size:13px;color:#4a463f;line-height:1.85}
.members-hint{font-size:11px;color:#8a857b;letter-spacing:.14em;text-align:center;margin-top:2px}

/* ---------- オフの日(BBQ等) ---------- */
.offday-lead{font-size:13.5px;color:#4a463f;margin:-8px 0 24px;max-width:640px}
.offday-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  align-items:start;
}
/* 上段=span3(横長2枚) / 下段=span2(縦長3枚) 並び順で判定 */
.offday-item:nth-child(-n+2){grid-column:span 3}
.offday-item:nth-child(n+3){grid-column:span 2}
/* 写真は原寸比率のまま(縦横比を歪ませない) */
.offday-item img{
  width:100%;height:auto;display:block;
  background:#ECE8DF;
  object-fit:cover;
}
.offday-item:nth-child(-n+2) img{aspect-ratio:4/3}
.offday-item:nth-child(n+3) img{aspect-ratio:3/4}
.offday-item .ph{width:100%;aspect-ratio:3/4}
.offday-cap{
  font-size:11.5px;letter-spacing:.1em;color:#4a463f;
  margin-top:8px;display:flex;align-items:baseline;gap:6px;
}

.offday-cap::before{content:"";width:12px;height:1px;background:var(--gold);flex-shrink:0;transform:translateY(-3px)}

/* ---------- FAQ ---------- */
.faq details{
  background:#fff;border:1px solid var(--rule);
  margin-bottom:12px;
}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:12px;
  padding:18px 20px;
  font-size:14px;font-weight:700;letter-spacing:.04em;
  min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"Q";font-family:var(--serif);color:var(--gold);
  font-size:17px;flex-shrink:0;
}
.faq summary::after{
  content:"+";margin-left:auto;color:var(--gold);font-size:20px;font-weight:400;
}
.faq details[open] summary::after{content:"−"}
.faq .a{
  padding:0 20px 18px 49px;
  font-size:13.5px;color:#4a463f;
}

/* ---------- アクセス ---------- */
.access-box{background:#fff;border:1px solid var(--rule);padding:28px 24px}
.access-box .shop{
  font-family:var(--serif);font-size:17px;font-weight:600;
  letter-spacing:.12em;margin-bottom:10px;
}
.access-box p{font-size:13.5px;color:#4a463f;margin-bottom:6px}
.access-box .map-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:12px;font-size:13px;font-weight:700;
  color:var(--gold);border-bottom:1px solid var(--gold);
  padding-bottom:2px;
}

/* ---------- 応募CTA ---------- */
.apply{background:var(--ink-deep);color:#f2efe8;text-align:center}
.apply .sec-title{color:#f2efe8}
.apply-lead{font-size:13px;color:#b8b3a8;margin-bottom:32px;letter-spacing:.08em}
.apply-btns{display:flex;flex-direction:column;gap:14px;max-width:360px;margin:0 auto}
.apply-btns .note{font-size:11px;color:#8a857b;letter-spacing:.1em;margin-top:-6px}
.tel-big{
  font-family:var(--serif);font-size:24px;letter-spacing:.08em;font-weight:600;
}

/* ---------- フッター ---------- */
footer{padding:36px 20px 48px;text-align:center;border-top:1px solid var(--rule)}
footer .name{font-family:var(--serif);font-size:15px;letter-spacing:.2em;margin-bottom:6px}
footer p{font-size:11px;color:#8a857b;letter-spacing:.1em}
footer .back{
  display:inline-block;margin-top:14px;font-size:12px;font-weight:700;
  color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:2px;
}

/* ---------- 固定ボトムCTAバー(モバイル) ---------- */
.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:1fr 1.15fr;
  height:60px;
  box-shadow:0 -4px 16px rgba(0,0,0,.14);
}
.cta-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:.06em;gap:2px;
}
.cta-bar .c-tel{background:var(--ink);color:#fff}
.cta-bar .c-line{background:var(--line-green);color:#fff}
.cta-bar span.s{font-size:9px;font-weight:400;letter-spacing:.15em;opacity:.75}

/* ============================================================
   タブレット / PC (min-width: 768px)
   ============================================================ */
@media(min-width:768px){
  body{font-size:16px;padding-bottom:0}
  .sec{padding:96px 0}
  .sec-title{font-size:34px}
  .hero-tate{font-size:40px}
  .hero-btns{flex-direction:row;max-width:520px}
  .hero-btns .btn{flex:1}
  .reasons{flex-direction:row}
  .reason{flex:1;padding:36px 28px}
  .jobs{flex-direction:row}
  .job{flex:1;padding:36px 30px}
  .spec div{flex-direction:row;padding:20px 8px}
  .spec dt{width:180px;flex-shrink:0;margin-bottom:0;padding-top:2px}
  .apply-btns{max-width:420px}
  .cta-bar{display:none}
  .members{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;overflow:visible;margin:0;padding:0}
  .member{flex:none;max-width:none}
  .members-hint{display:none}
  .flow-wrap{grid-template-columns:1fr 1fr;gap:24px}
  .flow-block{padding:28px 26px 30px}
  .offday-grid{gap:16px;max-width:900px}
  .access-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
}