/*
Theme Name: Twenty Twenty-One (custom)
Description: Minimal CSS to mimic v0 styling without Tailwind build.
Author: You
Version: 0.1
*/

/* ------------------------------
   CSS Variables (palette / radius / shadows)
--------------------------------*/
:root{
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.10);

  /* grays */
  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-600:#4b5563;
  --gray-700:#374151;
  --gray-800:#1f2937;

  /* brand (pink/purple) */
  --pink-25:#fff0f7;
  --pink-100:#ffe0ef;
  --pink-200:#fecdd3;
  --pink-400:#fb7185;
  --pink-500:#f43f5e;

  --purple-100:#f3e8ff;
  --purple-400:#a78bfa;
  --purple-500:#8b5cf6;

  --blue-50:#eff6ff;
  --blue-300:#93c5fd;
  --blue-400:#60a5fa;

  --green-50:#ecfdf5;
  --green-300:#86efac;
  --green-400:#4ade80;

  --text:#111827;
  --muted:#6b7280;
  --border:#f3e0ea; /* light pinkish border */
  --ring:#fda4af;
}

/* ------------------------------
   Base / Reset (lightweight)
--------------------------------*/
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--gray-50);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem}
h1,h2,h3{margin:0 0 .75rem;color:#111}

/* ------------------------------
   Layout helpers (Tailwind-like)
--------------------------------*/
.container{max-width:1120px;margin:0 auto;padding:0 1rem}
.site-main{min-height:60vh;padding:0rem 0 2rem}
.shadow-sm{box-shadow:var(--shadow-sm)}
.shadow-md{box-shadow:var(--shadow-md)}
.shadow-lg{box-shadow:var(--shadow-lg)}
.rounded{border-radius:var(--radius)}
.rounded-xl{border-radius:var(--radius-lg)}
.bg-white{background:#fff}
.bg-gray-50{background:var(--gray-50)}
.border{border:1px solid var(--gray-200)}
.border-pink-100{border-color:var(--pink-100)}
.border-pink-200{border-color:var(--pink-200)}
.text-muted{color:var(--muted)}
.text-gray-800{color:var(--gray-800)}
.text-blue-600{color:#2563eb}
.grid{display:grid;gap:2rem}
.md-grid-2{grid-template-columns:1fr}
@media(min-width:768px){.md-grid-2{grid-template-columns:1fr 1fr}}

/* spacing */
.mt-6{margin-top:1.5rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}

/* ------------------------------
   Header
--------------------------------*/
.site-header{
  background:#fff;
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--gray-200);
  backdrop-filter:saturate(180%) blur(6px);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.75rem 1rem;
}
.brand-link{font-weight:700;font-size:1.125rem}
.brand-tagline{font-size:.85rem;color:var(--muted);margin-top:.125rem}
.site-nav .menu{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.site-nav .menu a{padding:.5rem .75rem;border-radius:8px}
.site-nav .menu a:hover{background:var(--gray-100)}

/* ------------------------------
   “Card” container (v0 contact area)
--------------------------------*/
.card-gradient{
  background:linear-gradient(135deg,#fff 0%, var(--pink-25) 100%);
  border:1px solid var(--pink-100);
  border-radius:16px;
  padding:2rem;
  position:relative;
  box-shadow:var(--shadow-md);
}

/* ------------------------------
   Buttons
--------------------------------*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 1rem;width:100%;
  border:0;border-radius:14px;font-weight:600;color:#fff;
  background-image:linear-gradient(90deg,var(--pink-400),var(--purple-400));
  box-shadow:0 8px 16px rgba(244,63,94,.15), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .04s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{filter:saturate(1.05) brightness(1.02);box-shadow:0 10px 20px rgba(139,92,246,.18)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* ------------------------------
   Forms (inputs / selects / textarea)
--------------------------------*/
.form-field{display:block;width:100%}
.label{
  display:flex;align-items:center;gap:.5rem;
  font-weight:600;margin-bottom:.35rem
}
.input,.select,.textarea{
  width:100%;background:#fff;height:48px;
  border:2px solid var(--pink-200);
  border-radius:14px;padding:.65rem .9rem;
  outline:0;transition:border-color .15s, box-shadow .15s;
  font-size:16px;
}
.textarea{min-height:140px;height:auto;resize:vertical;padding:.75rem .9rem}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--pink-400);
  box-shadow:0 0 0 3px rgba(251,113,133,.25);
}
.help{font-size:.85rem;color:var(--muted)}

/* ------------------------------
   Info blocks (icon boxes)
--------------------------------*/
.info{
  border-left:4px solid var(--pink-200);
  background:var(--pink-25);
  padding:1rem;border-radius:12px
}
.info.purple{border-color:var(--purple-400);background:var(--purple-100)}
.info.blue{border-color:var(--blue-300);background:var(--blue-50)}
.info.green{border-color:var(--green-400);background:var(--green-50)}
.info-title{font-size:.9rem;font-weight:600;opacity:.85;margin-bottom:.25rem}
.info-text{font-weight:600;color:var(--gray-800)}

/* ------------------------------
   “Notice” strip (gradient)
--------------------------------*/
.notice{
  margin-top:1rem;
  background:linear-gradient(90deg,var(--pink-100),var(--purple-100));
  border-radius:12px;padding:1rem
}

/* ------------------------------
   Utility for emoji headings
--------------------------------*/
.h1{font-size:1.5rem;font-weight:800;display:flex;align-items:center;gap:.5rem;margin-bottom:1.25rem}
.h2{font-size:1.125rem;font-weight:700;display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}

/* ------------------------------
   Accessibility focus ring
--------------------------------*/
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* ------------------------------
   Simple page sections to mirror v0 spacing
--------------------------------*/
.section{padding:2rem 0}
.section .container{max-width:960px}

/* ------------------------------
   WordPress core minimal fixes
--------------------------------*/
.alignwide{max-width:1200px;margin-left:auto;margin-right:auto}
.alignfull{width:100vw;margin-left:50%;transform:translateX(-50%)}
.screen-reader-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}


/* ===== Footer ===== */
.site-footer{
  background: linear-gradient(180deg, #ffffff 0%, #fff5f8 100%);
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.footer-inner{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
  padding: 28px 0;
  align-items: start;
}
.footer-brand .brand-link{
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
  text-decoration: none;
}
.footer-copy{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted-foreground);
}
.footer-nav .menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.footer-nav .menu a{
  color: var(--text);
  text-decoration: none;
  padding: 4px 0;
}
.footer-nav .menu a:hover{ color: var(--primary); }
.footer-meta{
  font-style: normal;
  display: grid;
  gap: 6px;
  color: var(--muted-foreground);
}
.footer-meta .meta-line{ font-size: 14px; }

/* Responsive */
@media (max-width: 960px){
  .footer-inner{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .site-header .header-inner{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* =========================
   Home / Index styles
   ========================= */

/* --- Hero --- */
.hero{
  background: linear-gradient(180deg,#fff 0%, #fff7fb 80%);
  border-bottom: 1px solid var(--border);
}
.hero-inner{
  padding: 48px 0;
}
.hero-title{
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: .02em;
}
.hero-text{
  color: var(--muted-foreground);
  margin: 0 0 18px;
  font-size: 15px;
}

/* search bar */
.hero-search{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--pink-200, #fecdd3);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--ds-shadow-small, 0 1px 2px rgba(0,0,0,.04));
  max-width: 640px;
}
.hero-search .input{
  border: 0;
  outline: 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  background: transparent;
}
.hero-search .btn{
  padding: 12px 20px;
}

/* tag pills */
.hero-tags{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-tags a{
  display: inline-block;
  font-size: 13px;
  text-decoration: none;
  color: var(--primary);
  background: #fff;
  border: 1px solid var(--pink-200, #fecdd3);
  padding: 6px 10px;
  border-radius: 999px;
}

/* --- Sections --- */
.home-section{
  padding: 28px 0;
}
.section-title{
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 14px;
}

/* --- Card grid --- */
.card-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.card{
  display: block;
  text-decoration: none;
  background: linear-gradient(135deg,#fff 0%, #fff5f8 100%);
  border: 1px solid var(--pink-100, #ffe4e6);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--ds-shadow-border-small, 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04));
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-border-medium, 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06));
}
.card-emoji{
  font-size: 20px;
  line-height: 1;
  margin-bottom: 8px;
}
.card-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}
.card-text{
  font-size: 13px;
  color: var(--muted-foreground);
  margin: 0;
}

/* --- Posts (latest columns) --- */
.posts{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.post-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--ds-shadow-small, 0 1px 2px rgba(0,0,0,.04));
}
.post-title{
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
}
.post-title a{
  text-decoration: none;
  color: var(--text);
}
.post-title a:hover{ color: var(--primary); }
.post-excerpt{
  font-size: 13px;
  color: var(--muted-foreground);
  margin: 0 0 10px;
}
.post-link{
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
}

/* --- CTA --- */
.cta{
  margin: 10px 0 34px;
}
.cta-inner{
  background: linear-gradient(90deg, #fce7f3 0%, #e9d5ff 100%);
  border: 1px solid var(--pink-200, #fecdd3);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.cta-title{
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text);
}
.cta-text{
  margin: 0;
  color: var(--muted-foreground);
  font-size: 14px;
}

/* buttons (reuse) */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary{
  background: linear-gradient(90deg, var(--primary) 0%, #a855f7 100%);
  color: #fff;
  box-shadow: 0 6px 14px rgba(236,72,153,.25);
}
.btn-primary:hover{ filter: brightness(1.03); }

/* --- Responsive --- */
@media (max-width: 960px){
  .hero-inner{ padding: 36px 0; }
  .card-grid, .posts{ grid-template-columns: 1fr 1fr; }
  .cta-inner{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .hero-search{ grid-template-columns: 1fr; }
  .card-grid, .posts{ grid-template-columns: 1fr; }
}

/* ===== Home (v0 同等再現) ===== */
:root{
  --pink-50:#fff1f5; --pink-100:#ffe4ec; --pink-200:#fecdd3; --pink-300:#fda4af; --pink-400:#fb7185;
  --purple-50:#f3e8ff; --purple-100:#e9d5ff; --purple-200:#d8b4fe; --purple-300:#c084fc; --purple-400:#a855f7;
  --text:#1f2937;
}

/* helpers */
.container{max-width:1200px;margin:0 auto;padding:0 1rem;}
.sec-title{font-weight:700;font-size:1.375rem;color:#1f2937;text-align:center;margin:0 0 2rem;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;font-weight:600;transition:.25s box-shadow,.25s transform,.25s background;}
.btn--grad{color:#fff;background:linear-gradient(90deg,var(--pink-300),var(--pink-400));}
.btn--grad:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(251,113,133,.25);}
.btn--lg{height:56px;padding:0 1rem;width:100%;font-size:1rem;}
.btn__icon{width:20px;height:20px}

.hero{position:relative;min-height:70vh;min-height:500px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;background-image:var(--hero);background-size:cover;background-position:center}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,.2),transparent)}
.hero__inner{position:relative;z-index:1;text-align:center;color:#fff;padding:0 1rem;max-width:48rem}
.hero__title{margin:0 0 1rem}
.hero__title-sub{color:#f5d0fe}
.hero__title-main{background:linear-gradient(90deg,#f9a8d4,#d8b4fe);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1.2}
.hero__lead{font-size:clamp(1.1rem,2.5vw,1.375rem);opacity:.92}

.hero__decor{position:absolute;opacity:.2}
.hero__decor--sakura{top:1rem;right:1rem;width:80px;height:80px}
.hero__decor--sakura::before{content:"🌸";font-size:64px;display:block;line-height:1;text-align:center}
.hero__decor--cosme{left:1rem;bottom:1rem;width:72px;height:72px}
.hero__decor--cosme::before{content:"💄";font-size:48px;display:block;line-height:1;text-align:center}

/* Search */
.search{position:relative;padding:2rem 1rem}
.search__decor{position:absolute;left:25%;top:0;width:64px;height:64px;opacity:.12}
.search__decor::before{content:"🌺";font-size:48px;display:block;line-height:1;text-align:center}
.search__wrap{max-width:480px;margin:0 auto;display:grid;gap:1rem}
.search__input-wrap{position:relative}
.search__icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#fb7185}
.search__input{width:100%;height:56px;border:2px solid var(--pink-200);border-radius:999px;padding:0 16px 0 44px;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.05);font-size:16px}
.search__input:focus{outline:none;border-color:#fb7185;box-shadow:0 0 0 3px rgba(251,113,133,.15)}

/* Areas */
.areas{padding:2.5rem 1rem;background:linear-gradient(to bottom,#fff,var(--pink-50))}
.areas__decor{position:absolute;inset:auto 2rem auto auto;top:8px;width:80px;height:80px;opacity:.15}
.areas__decor::before{content:"🎀";font-size:64px;display:block;line-height:1;text-align:center}
.areas__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:768px){.areas__grid{grid-template-columns:repeat(4,1fr)}}
.areas__item{display:block;background:linear-gradient(135deg,var(--pink-100),var(--purple-100));
  padding:1rem;text-align:center;border-radius:1rem;border:1px solid var(--pink-200);
  color:#374151;font-weight:600;transition:.25s transform,.25s box-shadow}
.areas__item:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 20px rgba(168,85,247,.18)}

/* Columns */
.columns{position:relative;padding:2.5rem 1rem}
.columns__decor{position:absolute;left:2rem;bottom:2rem;width:96px;height:96px;opacity:.1}
.columns__decor::before{content:"💐";font-size:72px;display:block;line-height:1;text-align:center}
.columns__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem}
.columns__more{color:#ec4899;font-weight:600}
.columns__grid{display:grid;gap:1.25rem}
@media (min-width:768px){.columns__grid{grid-template-columns:repeat(2,1fr)}}

.card{display:block;border:1px solid var(--pink-100);border-radius:1rem;overflow:hidden;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.04);transition:.25s transform,.25s box-shadow}
.card:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 30px rgba(0,0,0,.12)}
.card__media{position:relative;height:192px;background-image:var(--img);background-size:cover;background-position:center}
.card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.22),transparent)}
.card__body{padding:1.25rem}
.card__eyecap{width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,var(--pink-200),var(--purple-200));
  display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}
.card__title{font-weight:700;color:#1f2937;line-height:1.4;margin:.25rem 0 .5rem}
.card__excerpt{color:#6b7280;font-size:.925rem;margin:0 0 .75rem}
.card__meta{display:flex;justify-content:space-between;color:#6b7280;font-size:.8rem}
.card__meta-item{display:inline-flex;align-items:center;gap:.25rem}

/* spacing with header/footer from your theme */
.site-main{background:linear-gradient(to bottom,var(--pink-50),#fff)}

/* ===== V0 Header / Footer ===== */
.v0-header{
  background:linear-gradient(90deg,#fff1f5,#f3e8ff);
  border-bottom:1px solid #fecdd3;
  box-shadow:0 1px 8px rgba(0,0,0,.04);
}
.v0-header__inner{display:flex;align-items:center;justify-content:space-between;height:64px}

.v0-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.v0-brand__logo{
  width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#fb7185,#a855f7);color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(168,85,247,.25)
}
.v0-brand__text{display:flex;flex-direction:column;line-height:1}
.v0-brand__title{
  font-weight:800;
  background:linear-gradient(90deg,#ec4899,#a78bfa);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.v0-brand__sub{font-size:.72rem;color:#fb7185}

.v0-nav{display:none;gap:.5rem}
@media (min-width:768px){.v0-nav{display:flex}}
.v0-nav__link{
  display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .875rem;border-radius:999px;
  color:#374151;font-weight:600;text-decoration:none;transition:.2s background,.2s color,.2s transform
}
.v0-nav__link:hover{background:#ffe4ec;color:#ec4899;transform:translateY(-1px)}

.v0-footer{
  background:linear-gradient(135deg,#ffe4ec,#f3e8ff,#fff5f8);
  border-top:1px solid #fecdd3; padding:2rem 0
}
.v0-footer__grid{display:grid;gap:1.5rem}
@media (min-width:900px){.v0-footer__grid{grid-template-columns:2fr 1fr 1fr}}

.v0-footer__brand{padding-right:1rem}
.v0-brand--footer .v0-brand__logo{box-shadow:0 6px 16px rgba(251,113,133,.25)}
.v0-footer__desc{color:#4b5563;font-size:.9rem;margin:.75rem 0 1rem}
.v0-footer__sns{display:flex;gap:.5rem}
.v0-footer__sns span{
  width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#fecdd3,#e9d5ff)
}

.v0-footer__title{font-weight:700;color:#111827;margin:0 0 .75rem;display:flex;align-items:center;gap:.5rem}
.v0-footer__list{list-style:none;margin:0;padding:0}
.v0-footer__list a{
  display:flex;align-items:center;gap:.5rem;padding:.25rem 0;color:#4b5563;text-decoration:none;font-size:.92rem
}
.v0-footer__list a:hover{color:#ec4899}

.v0-footer__bar{
  border-top:1px solid #fecdd3;margin-top:1.5rem;padding-top:1rem;
  display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:space-between
}
@media (min-width:900px){.v0-footer__bar{flex-direction:row}}
.v0-footer__copy{color:#4b5563;text-align:center}
@media (min-width:900px){.v0-footer__copy{text-align:left}}
.v0-footer__tagline{font-size:.8rem;color:#6b7280;margin:.25rem 0 0}
.v0-footer__cta{padding:.5rem 1rem;border-radius:999px;font-weight:600}


/* ===== サロン一覧 ===== */
.abs { position:absolute; inset:auto; }
.deco { right:.5rem; top:.5rem; width:3rem; height:3rem; opacity:.2; background: radial-gradient(circle at 30% 30%, #f472b6 0%, #a78bfa 60%, transparent 70%); filter:saturate(1.2) blur(0.2px); border-radius:12px; }
.deco-search { mask-image: radial-gradient(circle, #000 60%, transparent 62%); }

.input { width:100%; background:#fff; border:2px solid #fbcfe8; border-radius:9999px; padding:.75rem 1rem; font-size:.95rem; transition: all .2s; }
.input:focus { outline: none; box-shadow: 0 0 0 4px rgba(236,72,153,.15); border-color:#f472b6; }

.select-like { display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%; height:3rem; padding:.5rem .9rem; background:#fff; border:2px solid #fbcfe8; border-radius:9999px; font-size:.92rem; transition:all .2s; }
.select-like:hover { background:#fff5fb; border-color:#f472b6; transform: translateY(-1px); }
.select-like .chev { width:16px; height:16px; opacity:.5; stroke:currentColor; fill:none; stroke-width:2; }

.salon-card { display:block; background:linear-gradient(135deg,#fff 0%,#fff 60%,#fff4fb 100%); border:1px solid #fde2f2; border-radius:1.25rem; box-shadow: 0 3px 12px rgba(244,114,182,.08); transition:transform .25s, box-shadow .25s; }
.salon-card:hover { transform:translateY(-2px) scale(1.01); box-shadow: 0 10px 28px rgba(244,114,182,.18); }

.icon-badge { width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; border-radius:9999px; background:linear-gradient(135deg,#fbcfe8,#ddd6fe); }
.card-title { font-weight:700; color:#1f2937; font-size:1.05rem; }

.row-line { display:flex; align-items:center; color:#4b5563; margin-bottom:.25rem; }
.ico-pin { width:16px; height:16px; margin-right:.35rem; color:#f472b6; }

.rating { display:flex; align-items:center; gap:.35rem; background:linear-gradient(90deg,#fef3c7,#ffedd5); padding:.25rem .5rem; border-radius:9999px; }
.rating .ico-star { width:16px; height:16px; color:#f59e0b; }
.rating span { font-size:.9rem; font-weight:600; color:#b45309; }

.pill { display:flex; align-items:center; gap:.5rem; padding:.75rem; border-radius:.9rem; }
.pill-pink { background:#fdf2f8; color:#4b5563; }
.pill-purple { background:#f5f3ff; color:#4b5563; }
.pill .ico-16 { width:16px; height:16px; margin-right:.25rem; color:inherit; }
.pill-cap { display:block; font-size:.72rem; color:#ec4899; font-weight:600; margin-bottom:2px; }
.pill-purple .pill-cap { color:#8b5cf6; }
.pill-val { font-size:.9rem; font-weight:600; color:#111827; }

.price-chip { display:flex; align-items:center; gap:.35rem; padding:.4rem .75rem; background:#fee2e2; color:#be185d; border-radius:9999px; border:1px solid #fecdd3; font-weight:600; }
.price-chip .ico-16 { width:16px; height:16px; }

@media (max-width: 767px){
  .select-like { height:2.75rem; }
  .card-title { font-size:1rem; }
}

/* --- Mini utility shim (Tailwind未読込の穴埋め) --- */

/* spacing stack */
.space-y-4 > * + * { margin-top: 1rem; }

/* grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-4 { gap: 1rem; }
@media (min-width: 768px){
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* flex helpers */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* container width helpers */
.max-w-4xl { max-width: 56rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* paddings (使っている分だけ) */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.p-6  { padding: 1.5rem; }

/* margin */
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }

/* radius / border / shadow */
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.border { border-width: 1px; border-style: solid; }
.border-pink-100 { border-color: #fde2f2; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* colors / backgrounds (必要最小限) */
.bg-gray-50 { background-color: #f9fafb; }
.bg-white { background-color: #fff; }
.text-gray-600 { color: #4b5563; }
.text-gray-800 { color: #1f2937; }

/* position / size / opacity (必要最小限) */
.relative { position: relative; }
.absolute { position: absolute; }
.top-2 { top: .5rem; } .right-2 { right: .5rem; }
.w-12 { width: 3rem; } .h-12 { height: 3rem; }
.opacity-20 { opacity: .2; }

/* min-h-screen */
.min-h-screen { min-height: 100vh; }

/* --- SVG/アイコン サイズが効かない問題の応急処置 --- */
.lucide { display:inline-block; vertical-align:middle; }

/* 高さ/幅ユーティリティ（使っている分だけ） */
.h-4 { height: 1rem; } .w-4 { width: 1rem; }
.h-5 { height: 1.25rem; } .w-5 { width: 1.25rem; }
.h-6 { height: 1.5rem; } .w-6 { width: 1.5rem; }

/* 汎用：入力ラッパー内のアイコン位置補正（既に指定がある場合はそちら優先） */
input + .lucide, .select-like .lucide { pointer-events:none; }


/* ===========================
   v0 Review (scoped) – 口コミ投稿フォーム
   =========================== */
:root{
  --v0-pink-25:#fff7fb;
  --v0-pink-50:#ffeaf4;
  --v0-pink-100:#ffd7ea;
  --v0-pink-200:#ffb8d9;
  --v0-pink-300:#ff8ec3;
  --v0-purple-400:#a78bfa;
  --v0-yellow-50:#fff8e1;
  --v0-orange-50:#fff2e0;
  --v0-text:#1f2937;         /* gray-800 */
  --v0-text-muted:#6b7280;   /* gray-500 */
  --v0-border:#fbcfe8;       /* pink-200 */
}

/* コンテナ */
.v0-review{
  max-width: 48rem;          /* 768px */
  margin: 0 auto;
  padding: 24px 16px;
}

/* カード */
.v0-review__card{
  position: relative;
  background: linear-gradient(135deg,#fff 0%,var(--v0-pink-25) 100%);
  border: 1px solid var(--v0-border);
  border-radius: 20px;        /* 2xl相当 */
  padding: 32px;
  box-shadow: 0 12px 28px rgba(255,150,190,.18);
}

.v0-review__deco{
  position:absolute; top:12px; right:12px;
  width:64px; height:64px;
  opacity:.12; font-size:36px;
  display:grid; place-items:center;
  pointer-events:none; user-select:none;
}

/* タイトル */
.v0-review__title{
  display:flex; align-items:center;
  gap:10px;
  margin:0 0 24px;
  font-size:22px; font-weight:700; color:var(--v0-text);
}
.v0-review__title-ico{ font-size:22px; }

/* フォーム */
.v0-review__form{ display:grid; gap:18px; }
.v0-field{ display:grid; gap:8px; }

/* ラベル */
.v0-label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:600; color:var(--v0-text);
}
.v0-ico{ width:20px; text-align:center; }
.v0-req{ color:#ef4444; margin-left:4px; }

/* 入力 */
.v0-input{
  width:100%;
  height:48px;
  padding:8px 12px;
  font-size:14.5px; color:var(--v0-text);
  background:#fff;
  border:2px solid var(--v0-border);
  border-radius:14px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.v0-input:focus{
  border-color:var(--v0-pink-300);
  box-shadow:0 0 0 3px rgba(255,142,195,.2);
}
.v0-select{ appearance:auto; background-image:none; }
.v0-textarea{ min-height:120px; line-height:1.6; padding-top:12px; }

/* 補助テキスト */
.v0-help, .v0-note{
  font-size:13px; color:var(--v0-text-muted);
  background:var(--v0-pink-50);
  padding:10px 12px;
  border-radius:12px;
}
.v0-note{ text-align:center; }

/* 評価スター（CSSのみ） */
.v0-rating{
  background: linear-gradient(90deg,var(--v0-yellow-50),var(--v0-orange-50));
  border-radius:14px; padding:14px;
}
.v0-stars{
  direction:rtl; unicode-bidi:bidi-override;
  display:inline-flex; gap:6px; position:relative;
}
.v0-stars input{
  position:absolute; opacity:0; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0);
}
.v0-stars label{
  cursor:pointer; width:32px; height:32px;
  line-height:32px; text-align:center;
  border-radius:8px;
  color:#d1d5db; /* gray-300 */
  transition:transform .12s ease, color .12s ease;
  display:inline-block;
}
.v0-stars label::before{ content:"★"; font-size:24px; color:currentColor; display:block; }
.v0-stars label:hover,
.v0-stars label:hover ~ label{ color:#f59e0b; transform:scale(1.06); }
.v0-stars input:checked ~ label{ color:#f59e0b; }

/* 送信ボタン（既存v0ボタン系と調和） */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:56px; padding:0 16px;
  font-weight:600; font-size:15px;
  border:none; border-radius:14px; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn--lg{ height:56px; font-size:15px; }
.btn--grad{
  color:#fff;
  background-image:linear-gradient(90deg,var(--v0-pink-300),var(--v0-purple-400));
  box-shadow:0 10px 26px rgba(255,105,180,.28);
}
.btn--grad:hover{ filter:brightness(1.05); box-shadow:0 12px 30px rgba(255,105,180,.36); }
.btn--grad:active{ transform:translateY(1px); }

/* レイアウト微調整（サイト全体の余白感に合わせる） */
#primary.site-main{ background:#f9fafb; } /* 他ページに合わせるなら任意 */