:root{
  --main:#ef88ad;
  --ink:#4a3f44;
  --muted:#9a8d92;
  --paper:#fffdfb;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:transparent;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:920px;margin:0 auto;padding:0 18px;position:relative;z-index:1}

/* ===== 背景写真・ベール（最奥） ===== */
.bg-photo{position:fixed;inset:0;z-index:-2;background-size:cover;background-position:center;background-repeat:no-repeat}
.bg-veil{position:fixed;inset:0;z-index:-1}

/* ===== 季節背景 ===== */
.season-bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(10px);opacity:.5}
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-26px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-34px,28px)}}
@keyframes floatC{0%,100%{transform:translate(0,0)}50%{transform:translate(22px,-30px)}}
.flake{position:absolute;top:-26px;animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes fall{
  0%{transform:translateY(-26px) translateX(0) rotate(0deg);opacity:0}
  10%{opacity:.8}
  90%{opacity:.8}
  100%{transform:translateY(105vh) translateX(40px) rotate(320deg);opacity:0}
}
.flake.snow{filter:blur(.4px)}
.flake.bubble{filter:blur(.3px)}

/* ===== 年齢注意 ===== */
.age-note{text-align:center;font-size:12px;color:var(--main);background:rgba(255,235,243,.6);padding:8px;position:relative;z-index:1}

/* ===== ヘッダー ===== */
.site-header{position:relative;z-index:1;text-align:center;padding:30px 18px 10px}
.deco-l,.deco-r{position:absolute;top:38px;color:#f6c6da;font-size:13px;letter-spacing:4px;opacity:.7}
.deco-l{left:24px}.deco-r{right:24px}
.logo-emblem{width:84px;height:84px;border-radius:50%;border:1.5px solid #f3b2cd;display:flex;align-items:center;justify-content:center;margin:8px auto 14px;font-size:30px;color:var(--main);font-weight:700;background:rgba(255,255,255,.5)}
.logo-img{max-height:160px;width:auto;margin:8px auto 14px;display:block}
.site-title{font-size:30px;font-weight:800;background:linear-gradient(90deg,#f5a6c4,#ef88ad,#f0b69a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:2px}
.site-en{font-size:12px;letter-spacing:5px;color:#cbb7bf;margin-top:6px}
.tagline{font-size:13px;color:var(--muted);margin-top:12px}

/* ===== エリア ===== */
.area-section{margin-top:18px}
.area-label{font-size:13px;color:var(--muted);margin-bottom:10px;letter-spacing:1px}
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{padding:8px 18px;border-radius:24px;border:1px solid #f1dfe6;background:rgba(255,255,255,.7);font-size:13px;font-weight:700;color:#7a6e74;cursor:pointer;transition:.2s;position:relative;overflow:hidden;opacity:0;transform:translateY(12px) scale(.85);animation:pillIn .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes pillIn{to{opacity:1;transform:none}}
.pill::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg);pointer-events:none}
.pill:hover::after{animation:pillShine .55s ease}
@keyframes pillShine{to{left:135%}}
.pill:hover{border-color:var(--main);color:var(--main);transform:translateY(-2px);box-shadow:0 6px 14px rgba(220,150,170,.2)}
.pill.on{background:var(--main);color:#fff;border-color:var(--main)}
.pill.pop{animation:pillPop .32s ease}
@keyframes pillPop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.pill{animation:none;opacity:1;transform:none}.pill:hover::after{animation:none}}

/* ===== ブランド紹介ボタン ===== */
.brand-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.brand-btn{flex:1;min-width:200px;text-align:center;padding:14px 16px;border-radius:14px;font-size:14.5px;font-weight:700;transition:.2s}
.brand-btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(220,150,170,.16)}

/* ===== トップの全体お問い合わせ ===== */
.top-contact{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.top-contact .cbtn{flex:1;min-width:160px;width:auto}

/* ===== 店舗一覧 ===== */
.shop-list{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.shop{display:flex;background:rgba(255,255,255,.82);border-radius:16px;overflow:hidden;border:1px solid #f1e6ec;transition:.25s;opacity:0;transform:translateY(14px);animation:cardIn .5s ease forwards;backdrop-filter:blur(4px)}
@keyframes cardIn{to{opacity:1;transform:none}}
.shop:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(220,150,170,.16)}
.frame{width:150px;flex:none;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.area-jp{font-size:18px;font-weight:800;letter-spacing:2px}
.area-en{font-size:10px;letter-spacing:2px;margin-top:2px}
.shop .body{flex:1;padding:16px 18px;min-width:0}
.brand-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:6px}
.shop h3{font-size:17px;font-weight:800;margin-bottom:4px}
.copy{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.pay-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pay-label{font-size:11px;color:#fff;background:#f3a9c4;padding:2px 8px;border-radius:10px}
.pay{font-size:16px;font-weight:800}
.more{margin-left:auto;font-size:12px;color:var(--muted)}
.count-note{text-align:center;font-size:12px;color:var(--muted);margin-top:6px}

/* ===== セクション見出し ===== */
.sec-head{display:flex;align-items:baseline;gap:10px;justify-content:center;margin:36px 0 20px}
.sec-head .ja{font-size:22px;font-weight:800;color:var(--ink)}
.sec-head .en{font-size:11px;letter-spacing:3px;color:#cbb7bf}

/* ===== 問い合わせボタン群 ===== */
.contact-btns{display:flex;flex-direction:column;gap:11px;align-items:center;margin:22px 0 8px}
.cbtn{display:block;width:100%;max-width:320px;text-align:center;padding:13px 18px;border-radius:30px;font-size:15px;font-weight:700;color:#fff;transition:.2s}
.cbtn:hover{opacity:.9;transform:translateY(-1px)}
.cbtn-tel{background:#7bb89a}
.cbtn-line{background:#5ac463}
.cbtn-mail{background:#e89ab4}
.cbtn-hp{background:#9aa9c4}

/* ===== 店長・スタッフのところ ===== */
.link-corner{display:flex;flex-direction:column;gap:10px;max-width:480px;margin:0 auto 18px}
.link-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;border:1px solid #f1dfe6;background:rgba(255,255,255,.86);transition:.2s}
.link-item:hover{border-color:var(--main);transform:translateY(-2px);box-shadow:0 8px 16px rgba(220,150,170,.14)}
.link-icon{flex:0 0 auto;width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.link-icon svg{display:block}
.link-label{flex:1 1 auto;font-size:14px;font-weight:700;color:var(--ink);line-height:1.4}
.link-arrow{flex:0 0 auto;color:var(--main);font-weight:800}

/* ===== ブランド紹介文 ===== */
.brand-intro{background:rgba(255,255,255,.82);border:1px solid #f1dfe6;border-radius:16px;padding:22px;margin-top:8px;backdrop-filter:blur(4px)}

/* ===== 待遇・特典 ===== */
.benefit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.benefit-card{background:rgba(255,255,255,.82);border-radius:14px;padding:4px 0;backdrop-filter:blur(4px)}
.benefit-title{font-size:16px;font-weight:800;margin-bottom:8px}
.benefit-img{height:150px;border-radius:10px;overflow:hidden;position:relative;border-left:5px solid var(--main)}
.benefit-img img{width:100%;height:100%;object-fit:cover}
.benefit-point{font-size:14px;font-weight:800;letter-spacing:.04em;margin:8px 0 6px}
.benefit-body{font-size:13px;color:#6a5e64;line-height:1.8}

/* ===== 給与例 ===== */
.salary-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.salary-card{display:flex;gap:14px;background:rgba(255,255,255,.82);border-radius:14px;padding:14px;backdrop-filter:blur(4px)}
.salary-photo{width:96px;height:120px;flex:none;border-radius:10px;overflow:hidden;position:relative}
.salary-photo img{width:100%;height:100%;object-fit:cover}
.salary-info{flex:1;min-width:0}
.salary-name{font-size:17px;font-weight:800;margin-bottom:6px}
.salary-row{font-size:13px;color:#6a5e64;line-height:1.7}

/* ===== 店舗詳細 ===== */
.shop-detail{margin-top:18px}
.detail-hero{width:100%;max-width:1100px;height:200px;border-radius:16px;overflow:hidden;position:relative;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.detail-hero img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.detail-hero span{position:relative;font-size:32px;font-weight:800;letter-spacing:4px;z-index:1}
.info-table{width:100%;border-collapse:collapse;margin:18px 0;background:rgba(255,255,255,.82);border-radius:12px;overflow:hidden}
.info-table th,.info-table td{text-align:left;padding:12px 14px;font-size:13px;border-bottom:1px solid #f3e7ed}
.info-table th{width:90px;color:var(--muted);font-weight:700;background:rgba(255,240,246,.6)}

/* ===== 応募フォーム ===== */
.form-box{max-width:480px;margin:0 auto;background:rgba(255,255,255,.86);border-radius:16px;padding:22px;border:1px solid #f1e6ec}
.form-box label{display:block;font-size:13px;font-weight:700;color:#7a6e74;margin:12px 0 4px}
.form-box input,.form-box textarea,.form-box select{width:100%;padding:10px 12px;border:1px solid #e8d6de;border-radius:10px;font-size:14px;font-family:inherit}
.btn{display:inline-block;padding:13px 28px;border-radius:30px;background:var(--main);color:#fff;font-size:15px;font-weight:700;border:none;cursor:pointer;transition:.2s}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn-center{text-align:center}
.err{color:#e05c7a;font-size:13px;margin-top:8px}

/* ===== フッター ===== */
.site-footer{position:relative;z-index:1;background:rgba(250,248,250,.86);border-top:1px solid #f1e6ec;padding:30px 18px 36px;text-align:center;color:#a89aa0;font-size:12px;margin-top:48px;backdrop-filter:blur(4px)}
.site-footer a{color:var(--main)}
.footer-note{font-size:12px;color:#9a8d92;line-height:1.9;margin-bottom:18px}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-bottom:18px}
.footer-nav a{font-size:13px;font-weight:700;color:#7a6e74;position:relative;padding:2px 0;transition:color .2s}
.footer-nav a:hover{color:var(--main)}
.footer-nav a::before{content:"‐";color:var(--main);margin-right:6px}
.footer-copy{font-size:11px;color:#b3a6ac;letter-spacing:.04em}

/* 上に戻る */
.to-top{position:fixed;right:18px;bottom:22px;z-index:50;width:46px;height:46px;border:none;border-radius:50%;
  background:linear-gradient(135deg,var(--main),#ef9ec0);color:#fff;font-size:15px;cursor:pointer;
  box-shadow:0 6px 16px rgba(220,130,165,.4);opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{transform:translateY(-2px)}

/* ===== トップに戻る（テキストリンク） ===== */
.back-top{display:inline-block;padding:8px 22px;border-radius:24px;border:1px solid var(--main);color:var(--main);font-size:13px;font-weight:700;background:rgba(255,255,255,.7);transition:.2s}
.back-top:hover{background:var(--main);color:#fff}

/* ===== スクロール登場 ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ===== ヘッダー登場演出 ===== */
.site-header .logo-emblem,.site-header .logo-img,.site-header .site-title,.site-header .site-en,.site-header .tagline{
  opacity:0;transform:translateY(14px);animation:headIn .8s ease forwards
}
.site-header .logo-emblem,.site-header .logo-img{animation-delay:.05s}
.site-header .site-title{animation-delay:.22s}
.site-header .site-en{animation-delay:.36s}
.site-header .tagline{animation-delay:.5s}
@keyframes headIn{to{opacity:1;transform:none}}

/* ボタン・カードの反応 */
.brand-btn,.cbtn,.pill{transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}

/* ===== レスポンシブ ===== */
@media (max-width:600px){
  .site-title{font-size:24px}
  .frame{width:108px}
  .shop h3{font-size:15px}
  .deco-l,.deco-r{display:none}
  .brand-btn{min-width:100%}
}

/* アニメーションを控える設定への配慮 */
@media (prefers-reduced-motion: reduce){
  .orb,.flake,.shop,.reveal,.site-header .logo-emblem,.site-header .logo-img,.site-header .site-title,.site-header .site-en,.site-header .tagline{animation:none!important;opacity:1!important;transform:none!important}
}

/* ===== 面接スタッフ紹介 ===== */
.interviewers{display:flex;flex-direction:column;gap:18px;max-width:620px;margin:0 auto 8px}
.interviewer{display:flex;gap:18px;align-items:center;background:rgba(255,255,255,.86);border:1px solid #f1dfe6;border-radius:16px;padding:16px}
.interviewer .iv-photo{flex:0 0 auto;width:150px;height:100px;border-radius:12px;overflow:hidden;background:#eee}
.interviewer .iv-photo img{width:100%;height:100%;object-fit:cover}
.interviewer .iv-body{flex:1;min-width:0}
.interviewer .iv-shop{font-size:14px;font-weight:700;color:var(--main);line-height:1.7}
.interviewer .iv-name{font-size:13px;color:var(--ink);margin-top:4px}
@media (max-width:600px){
  .interviewer{gap:14px;padding:12px}
  .interviewer .iv-photo{width:118px;height:82px}
  .interviewer .iv-shop{font-size:13px}
}