/* =========================================================
   Saari 採用LP ── components.css（部品：ボタン/カード/フォーム/ヘッダ/CTA）
   Art Direction v4「ちいさな島」／ tokens.css・base.css に依存
   ========================================================= */

/* ---- Button ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;cursor:pointer;border:1px solid transparent;
  font-family:var(--ff-jp);font-size:var(--fs-sm);font-weight:var(--fw-regular);
  letter-spacing:var(--ls-jp);text-align:center;
  transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out);
}
.btn .arrow{font-family:var(--ff-display);font-size:1.05em}
.btn--primary{background:var(--c-rose);color:#fff}
.btn--primary:hover{background:var(--c-rose-deep);opacity:1;transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--c-rose-deep);border-color:var(--c-rose)}
.btn--outline:hover{background:var(--c-rose-soft);opacity:1}
.btn--ink{background:var(--c-ink);color:#fff}
.btn--ink:hover{opacity:.85}
.btn--line{background:#06c755;color:#fff}
.btn--line:hover{background:#05a544;opacity:1}
.btn--lg{padding:17px 34px;font-size:var(--fs-body)}
.btn--block{width:100%;display:flex}
/* ボタン内のリンク文字は白を維持（iOSリンク色対策） */
.btn,.btn:link,.btn:visited,.btn:hover,.btn:active{color:#fff}
.btn--outline,.btn--outline:link,.btn--outline:visited,.btn--outline:hover,.btn--outline:active{color:var(--c-rose-deep)}
.line-icon{width:22px;height:22px;flex-shrink:0;border-radius:5px}

.btn-stack{display:flex;flex-direction:column;gap:12px;align-items:stretch;max-width:380px;margin:0 auto}

/* ---- Header（最小・透明→スクロールで生成り半透明） ---- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--sp-gutter);
  transition:background var(--dur) var(--ease-out),padding var(--dur) var(--ease-out);
  pointer-events:none;
}
.site-header.is-scrolled{
  background:rgba(250,247,242,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-line-soft);padding-block:11px;pointer-events:auto;
}
.site-header__logo img{height:29px;width:auto;opacity:0;transition:opacity var(--dur)}
.site-header.is-scrolled .site-header__logo img{opacity:1}
.site-header__cta{
  font-family:var(--ff-accent);font-style:italic;font-size:.92rem;letter-spacing:.1em;
  color:var(--c-ink);padding:7px 18px;border:1px solid var(--c-line);border-radius:999px;
  pointer-events:auto;opacity:0;transition:opacity var(--dur);
}
.site-header.is-scrolled .site-header__cta{opacity:1}
.site-header__cta:hover{background:var(--c-ink);color:#fff;opacity:1}
.site-header__nav{display:flex;align-items:center;gap:16px;pointer-events:auto}
.site-header__link{font-family:var(--ff-accent);font-style:italic;font-size:.92rem;letter-spacing:.06em;color:var(--c-ink);opacity:0;transition:opacity var(--dur);pointer-events:auto;white-space:nowrap}
.site-header.is-scrolled .site-header__link{opacity:1}
.site-header__link:hover{color:var(--c-rose-deep);opacity:1}

/* ハンバーガーボタン（スマホ）＋ページ内ナビメニュー（2026-06-18） */
.site-header__burger{display:none;position:relative;z-index:56;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;border:none;background:transparent;cursor:pointer;padding:0;
  opacity:0;transition:opacity var(--dur);pointer-events:auto}
.site-header.is-scrolled .site-header__burger,.site-header.nav-open .site-header__burger{opacity:1}
.site-header__burger span{display:block;width:22px;height:1.5px;background:var(--c-ink);margin:0 auto;
  transition:transform .3s var(--ease-out),opacity .3s}
.site-header.nav-open .site-header__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.site-header.nav-open .site-header__burger span:nth-child(2){opacity:0}
.site-header.nav-open .site-header__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.site-header__scrim{display:none}
@media(max-width:1080px){
  .site-header__burger{display:flex}
  .site-header__nav{
    position:fixed;top:0;right:0;height:100dvh;width:min(80vw,330px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:24px;
    background:var(--c-paper);box-shadow:-10px 0 50px rgba(120,80,70,.18);
    padding:88px 36px 40px;transform:translateX(100%);transition:transform .38s var(--ease-out);
    z-index:55;overflow-y:auto}
  .site-header.nav-open .site-header__nav{transform:none}
  .site-header__nav .site-header__link,.site-header__nav .site-header__cta{
    opacity:1;font-style:normal;font-family:var(--ff-jp);font-size:1.04rem;letter-spacing:.06em}
  .site-header__nav .site-header__cta{margin-top:8px;align-self:flex-start}
  .site-header__scrim{display:block;position:fixed;inset:0;z-index:54;
    background:rgba(35,30,26,.4);opacity:0;pointer-events:none;transition:opacity .3s}
  .site-header.nav-open .site-header__scrim{opacity:1;pointer-events:auto}
}
body.nav-locked{overflow:hidden}

/* ---- Quote（代表の言葉・口語を残す） ---- */
.quote{
  font-family:var(--ff-jp-serif);font-weight:var(--fw-regular);
  font-size:var(--fs-h3);line-height:1.8;letter-spacing:var(--ls-jp);
  color:var(--c-ink);padding:8px 0 0 22px;border-left:1px solid var(--c-rose);
}
.quote .by{
  display:block;font-family:var(--ff-accent);font-style:italic;
  font-size:.9rem;color:var(--c-greige-deep);letter-spacing:.12em;margin-top:18px;
}

/* ---- Bubble（こんな方に来てほしい・ふきだし） ---- */
.bubble{
  display:inline-block;background:var(--c-white);border:1px solid var(--c-line);
  border-radius:18px;padding:13px 22px;font-size:var(--fs-sm);line-height:1.8;
  color:var(--c-ink);box-shadow:var(--shadow-soft);
}
.bubble-list{display:flex;flex-direction:column;gap:14px}
.bubble-list li{display:flex}
.bubble-list li:nth-child(even){justify-content:flex-end}
.bubble-list li:nth-child(even) .bubble{background:var(--c-rose-soft);border-color:transparent}

/* ---- Spec table（募集要項） ---- */
.spec{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.spec th,.spec td{text-align:left;padding:16px 6px;border-bottom:1px solid var(--c-line);vertical-align:top}
.spec th{
  width:30%;color:var(--c-greige-deep);font-weight:var(--fw-regular);
  font-family:var(--ff-accent);font-style:italic;font-size:.92rem;letter-spacing:.06em;
}
.spec td{color:var(--c-ink);line-height:1.85}
.spec td strong{color:var(--c-rose-deep);font-weight:var(--fw-medium)}
.h-sub{
  font-family:var(--ff-display);font-weight:var(--fw-light);font-size:1.25rem;
  color:var(--c-rose-deep);letter-spacing:.04em;margin:34px 0 8px;text-align:center;
}

/* ---- FAQ ---- */
.faq details{border-bottom:1px solid var(--c-line);padding:18px 4px}
.faq details:last-of-type{border-bottom:none}
.faq summary{
  list-style:none;cursor:pointer;font-size:var(--fs-body);font-weight:var(--fw-regular);
  display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--c-ink);
  transition:color var(--dur);
}
.faq summary:hover{color:var(--c-rose-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";font-family:var(--ff-display);color:var(--c-rose-deep);font-weight:300;transition:transform var(--dur)}
.faq details[open] summary::after{content:"−"}
.faq details p{font-size:var(--fs-sm);line-height:1.95;color:var(--c-ink-soft);padding:14px 4px 4px}

/* ---- Flow（採用ステップ） ---- */
.flow{display:flex;flex-direction:column;gap:12px}
.flow-step{
  display:flex;gap:20px;align-items:flex-start;
  padding:20px 22px;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--radius-lg);
  transition:transform var(--dur) var(--ease-out),border-color var(--dur);
}
.flow-step:hover{transform:translateX(4px);border-color:var(--c-rose)}
.flow-step .n{font-family:var(--ff-display);font-weight:var(--fw-light);font-size:1.6rem;color:var(--c-rose-deep);min-width:30px;line-height:1}
.flow-step h4{font-family:var(--ff-display);font-weight:var(--fw-regular);font-size:1.05rem;letter-spacing:.04em;margin-bottom:4px}
.flow-step p{font-size:var(--fs-sm);color:var(--c-ink-soft);line-height:1.75}

/* ---- Form ---- */
.form{
  background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--radius-lg);
  padding:26px 22px;max-width:440px;margin:0 auto;text-align:left;box-shadow:var(--shadow-soft);
}
.form .row{margin-bottom:18px}
.form label{
  display:block;font-family:var(--ff-jp);font-weight:var(--fw-medium);
  font-size:.86rem;letter-spacing:.04em;color:var(--c-ink-soft);margin-bottom:6px;
}
.form input,.form select,.form textarea{
  width:100%;border:none;border-bottom:1px solid var(--c-greige);background:transparent;
  padding:11px 0;font-family:inherit;font-size:var(--fs-body);color:var(--c-ink);
  font-weight:var(--fw-light);outline:none;transition:border-color var(--dur);
}
.form input:focus,.form select:focus,.form textarea:focus{border-bottom-color:var(--c-rose-deep)}
.form-note{font-size:var(--fs-xs);color:var(--c-ink-soft);text-align:center;margin-top:10px}
/* 必須／任意バッジ・同意チェック（応募フォーム） */
.form .req{display:inline-block;font-family:var(--ff-jp);font-size:.66rem;font-weight:var(--fw-medium);color:#fff;background:var(--c-rose-deep);border-radius:3px;padding:1px 7px;margin-left:7px;letter-spacing:.06em;vertical-align:2px}
.form .opt{display:inline-block;font-family:var(--ff-jp);font-size:.66rem;font-weight:var(--fw-medium);color:var(--c-greige-deep);background:var(--c-paper-sand);border:1px solid var(--c-line);border-radius:3px;padding:1px 7px;margin-left:7px;letter-spacing:.06em;vertical-align:2px}
.form-consent{display:flex;align-items:center;gap:13px;font-family:var(--ff-jp);font-size:.85rem;color:var(--c-ink-soft);margin:2px 0 8px;line-height:1.7}
.form-consent input{width:17px;height:17px;flex:none;margin:0;border:none;padding:0;accent-color:var(--c-rose-deep)}
.form-consent a{color:var(--c-rose-deep);text-decoration:underline;text-underline-offset:2px}
.form-consent .req{margin-left:8px}

/* ---- Sticky CTA（スマホ下部） ---- */
.sticky-cta{
  position:fixed;inset:auto 0 0 0;z-index:50;display:flex;gap:8px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(250,247,242,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--c-line);box-shadow:0 -4px 16px rgba(120,80,70,.06);
  transform:translateY(100%);transition:transform var(--dur) var(--ease-out);
}
.sticky-cta.is-visible{transform:none}
.sticky-cta .btn{flex:1;margin:0;padding:13px 12px;font-size:.86rem}
.sticky-cta .btn--line{flex:0 0 auto;padding:13px 20px}

/* ---- Footer ---- */
.site-footer{text-align:center;padding:64px var(--sp-gutter) calc(96px + env(safe-area-inset-bottom));background:var(--c-white)}
.site-footer__logo{width:116px;margin:0 auto 18px}
.site-footer__info{font-size:var(--fs-sm);color:var(--c-ink-soft);line-height:1.95}
.site-footer__sns{display:flex;gap:18px;justify-content:center;margin:20px 0}
.site-footer__sns a{font-family:var(--ff-accent);font-style:italic;font-size:.86rem;letter-spacing:.1em;color:var(--c-greige-deep)}
.site-footer__legal{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:16px;font-size:var(--fs-xs)}
.site-footer__legal a{color:var(--c-greige-deep);letter-spacing:.04em}
.site-footer__legal a:hover{color:var(--c-rose-deep)}
.site-footer__legal span{color:var(--c-line)}
.site-footer__copy{font-family:var(--ff-accent);font-style:italic;font-size:.78rem;color:var(--c-greige);letter-spacing:.14em;margin-top:22px}