/* =========================================
   HOP! site – style.css (rebuild v2)
   ========================================= */

/* --- Reset (minimum) --- */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ overflow-x:hidden; }

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }

:root{
  --text:#2b2b3c;
  --muted:#7c7c95;
  --line:#ececff;

  --primary:#7c3aed;
  --primary2:#c4b5fd;

  --surface:rgba(255,255,255,.9);
  --shadow:0 10px 25px rgba(124,58,237,.08);
  --radius:16px;
}

body{
   
  margin:0;
  font-family:"Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:18px;
  line-height:1.7;
  color:var(--text);
  background:linear-gradient(180deg, #f8fafc, #ffffff 55%);
}

/* --- Layout --- */
.container{
  max-width:1000px;
  margin:0 auto;
  padding:0 16px;
}

/* --- Header --- */
.site-header{
  border-bottom:1px solid var(--line);
  background:#fff;
}

.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  white-space:nowrap;
}

.logo img{
  height:44px;
  width:auto;
}

.logo-text{
  font-weight:600;
  font-size:1.05rem;
  white-space:nowrap;
}

.nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav a{
  font-size:16px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.nav a:hover{
  background:rgba(124,58,237,.08);
  border-color:rgba(124,58,237,.12);
  transform:translateY(-1px);
}
.nav a:focus-visible{
  outline:3px solid rgba(124,58,237,.35);
  outline-offset:2px;
}

/* --- Hero --- */
.hero{
  position:relative;
  overflow:hidden;
  padding:80px 0;
}

.hero-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.hero-copy{
  max-width:520px;
}

.hero-art img{
  width: 70%;
  max-width: 360px;
 height: auto;
 
}

.hero-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.hero-copy h2{
  max-width: 620px;      /* ← 行幅を少し広げる */
  font-size:40px;
  line-height:1.35;
  margin:0 0 16px;
  letter-spacing:-0.02em;
}

.hero-copy p{
  font-size:18px;
  line-height:1.8;
  margin:0 0 10px;
}

.meta{
  color:var(--muted);
  font-size:15px;
  margin:12px 0 18px;
}
.trouble-section{
  padding: 80px 20px;
}

.trouble-wrap{
  position: relative;
  max-width: 900px;
  margin: 50px auto 0;
  text-align: center;
}

.trouble-illust{
  width: 160px;
  margin: 0 auto 40px;
  opacity: .9;
}

.trouble-items{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.trouble-item{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(124,58,237,.12);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  transition: .2s ease;
}

.trouble-item:hover{
  background: #ede9fe;
}

.trouble-detail{
  display: none;
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  background: #fff;
  border: 1px solid rgba(124,58,237,.12);
  border-radius: 14px;
  padding: 14px;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(124,58,237,.08);
}
/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  border:1px solid rgba(124,58,237,.25);
  background:rgba(255,255,255,.7);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn::after{ content:"→"; margin-left:6px; transition:transform .2s ease; }
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.btn:hover::after{ transform:translateX(4px); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn:focus-visible{ outline:3px solid rgba(124,58,237,.35); outline-offset:2px; }

.btn-primary{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(90deg, var(--primary), var(--primary2));
}
.btn-ghost{ background:rgba(255,255,255,.7); }

.hero-art{ flex:0 0 auto; }
.hero-art img{ width:100%; max-width:420px; }

/* --- Sections --- */
.section{ padding:70px 0; }
.section h3{
  margin:0 0 16px;
  font-size:24px;
  letter-spacing:-0.01em;
}

/* --- Cards base (Flow etc.) --- */
.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}

.card{
   text-align:left;
  border:1px solid rgba(229,231,235,.9);
  border-radius:var(--radius);
  padding:24px;
  background:var(--surface);
  min-height:320px;
  box-shadow:none;
  transition:box-shadow .22s ease, border-color .22s ease, transform .18s ease;
}

/* --- できること：カード hover --- */
.card{
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}

.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(124,58,237,.14);
  border-color: rgba(124,58,237,.22);
}

.card{
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(124,58,237,.15);
  border-color: rgba(124,58,237,.25);
}


/* Head + icon */
.card-head{
    display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  margin-bottom:14px;

}
.card-head h4{
  margin:0;
  font-size:20px;
  font-weight:700;
}
.card p{
  margin:0;
  font-size:17px;
  line-height:1.8;
}

/* --- icons: make SVG inherit purple --- */
.card-head .icon{
  color: var(--primary);
}

.card-head .icon img{
  width: 64px;
  height: 64px;
}







/* Icon container (SVGもPNGもOK) */
.icon{
  width:110px;
  height:110px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 56px;
  color:var(--primary); /* SVG用 */
}
.icon svg{ width:100%; height:100%; display:block; }
.icon img{ width:100%; height:auto; display:block; }
.icon--large img{
  width: 100px;
  height: 100px;
}
/* ワークだけ大きくしたい時に使うクラス */
.icon--work{
  width: 400px;
  height:350px;
  flex:0 0 72px;
 justify-content: flex-start
 
}

/* 福祉だけ大きくしたい時に使うクラス */
.icon--welfare{
  width: 550px;
  height:150px;
   flex:72px 72px 72px;
 justify-content: flex-start
 
}




/* --- Flip cards (Services) --- */
/* “できること”は flip-cards の中だけ別グリッドに固定 */
#services .cards.flip-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}

/* flip container */
.flip-card{ perspective:1000px; outline:none; }
.flip-inner{
  position:relative;
  min-height:320px;
  transform-style:preserve-3d;
  transition:transform .7s;
}
.flip-front,
.flip-back{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
}
.flip-back{ transform:rotateY(180deg); }

/* hover/focus flip (PC) */
@media (hover:hover) and (pointer:fine){
  .flip-card:hover .flip-inner,
  .flip-card:focus-within .flip-inner{
    transform:rotateY(180deg);
  }
}
/* tap flip (touch) */
.flip-card.is-flipped .flip-inner{ transform:rotateY(180deg); }

.flip-hint{ margin-top:10px; font-size:.9em; opacity:.75; }
.flip-list{ margin:10px 0 0; padding-left:1.1em; }

/* --- Contact --- */
.contact-box{
  margin-top:16px;
  padding:16px;
  border:1px solid rgba(229,231,235,.9);
  border-radius:var(--radius);
  background:rgba(255,255,255,.85);
}
.note{ margin-top:10px; color:var(--muted); font-size:14px; }

/* --- Blog / Diary --- */
.blog-section{
  padding:56px 0;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.6));
}
.blog-head{ margin-bottom:18px; }
.blog-section .section-title{
  margin:0 0 6px;
  font-size:clamp(20px, 2.2vw, 26px);
  letter-spacing:.02em;
}
.blog-section .section-lead{ margin:0; color:var(--muted); }

.blog-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
}

/* Photo flip */
.photo-card{ perspective:1000px; }
.photo-inner{
  position:relative;
  width:100%;
  height:260px;
  transition:transform .6s;
  transform-style:preserve-3d;
}
.photo-card:hover .photo-inner{ transform:rotateY(180deg); }

.photo-front, .photo-back{
  position:absolute;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.photo-front img{ width:100%; height:100%; object-fit:cover; }
.photo-back{
  background:var(--surface);
  transform:rotateY(180deg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.photo-text{
  margin:0;
  line-height:1.9;
  font-size:16px;
  letter-spacing:.02em;
}

.photo-front{ position:relative; }
.photo-tag{
  position:absolute;
  left:12px;
  bottom:12px;
  font-size:12px;
  color:#111827;
  background:rgba(255,255,255,.8);
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
}

/* --- Footer --- */
.site-footer{
  border-top:1px solid var(--line);
  padding:20px 0;
  background:#fff;
  color:var(--muted);
}

/* --- Responsive --- */
@media (max-width: 900px){
  .cards{ grid-template-columns:1fr; }
  #services .cards.flip-cards{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
}

@media (max-width: 768px){
  /* header stack */
  .site-header .container{
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:10px 12px;
  }
  .nav{
    flex:0 0 100%;
    width:100%;
    justify-content:flex-start;
    gap:10px;
  }

  /* hero stack */
  .hero{ padding:60px 0; }
  .hero-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }
  .hero-copy h2{ font-size:26px; }
  .hero-copy p{ font-size:16px; }
  .hero-art{
     display: flex;
  justify-content: center;
  align-items: center;
  }
  .hero-art img{ 
     width: 60% !important;
  max-width: 100px !important;
  height: auto !important;
   
  }
  .btn-ghost{ margin-top:10px; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}
/* ==== Mobile rescue (safe) ==== */
img { max-width: 100%; height: auto; display: block; }

.container { width: min(100% - 32px, 1100px); margin-inline: auto; }

.hero, .hero-inner, .hero-grid {
  display: grid;
  gap: 20px;
}

@media (max-width: 820px){
  .hero, .hero-inner, .hero-grid { grid-template-columns: 1fr; }
  .hero img, .hero .hero-illust, .hero .hero-image { margin-inline: auto; }
  h1 { font-size: 32px; line-height: 1.2; }
}
/* ===== Mobile rescue pack ===== */

/* 画像の崩れ止め */
img { max-width: 100%; height: auto; display: block; }

/* コンテナの基本 */
.container { width: min(100% - 32px, 1100px); margin-inline: auto; }

/* ヒーローを「縦積み」に寄せる（クラス名違い吸収） */
.hero,
.hero-inner,
.hero-grid,
.hero-wrap,
main > section:first-of-type .container {
  display: grid;
  gap: 20px;
}

/* スマホ幅：1カラム＆中央寄せ */
@media (max-width: 820px){
  .hero,
  .hero-inner,
  .hero-grid,
  .hero-wrap,
  main > section:first-of-type .container {
    grid-template-columns: 1fr !important;
  }

  /* 画像が左下に落ちるのを防ぐ */
  .hero img,
  .hero-illust,
  .hero-image,
  .hero figure,
  .hero .image,
  main > section:first-of-type img {
    margin-inline: auto !important;
  }
}
/* ===== Hero: 右の余白を減らす（2カラム比率調整） ===== */
.hero,
.hero-inner,
.hero-grid,
.hero-wrap {
  grid-template-columns: 1.15fr 0.85fr !important; /* 右を細く */
}
/* ===== Hero: イラストを小さく（最大幅を制限） ===== */
.hero img,
.hero-illust,
.hero-image,
.hero figure img {
  max-width: 420px !important;
  width: 100% !important;
  height: auto !important;
}
/* ===== Hero: 右側の余白感を抑える（整列） ===== */
.hero,
.hero-inner,
.hero-grid,
.hero-wrap {
  align-items: center;
}

.hero figure,
.hero-image,
.hero-illust {
  justify-self: end; /* 右カラム内で右に寄せて“余白だけ”に見えないようにする */
}
/* ====== HERO WIDTH FIX (最終調整) ====== */

.container {
  width: min(100% - 40px, 1200px);
  margin-inline: auto;
}

.hero {
  padding: 40px 24px;
}

.hero img,
.hero-illust,
.hero-image {
  max-width: 420px;
  height: auto;
}
/* ====== FIX: ヒーローが左寄りになるのを強制的に中央へ ====== */

/* 何があっても .container を中央寄せにする */
.container{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 1つめのセクション（ヒーロー）を中央揃えに固定 */
main > section:first-of-type{
  display: flex !important;
  justify-content: center !important;
}

/* その中の container を「広め」に確保 */
main > section:first-of-type > .container{
  width: min(100% - 40px, 1200px) !important;
}

/* ヒーロー内の“白い大きい箱”も中央・横幅100%で使う */
.hero .card,
.hero-card,
.hero-box,
.hero-panel{
  width: 100% !important;
  margin-inline: auto !important;
}

/* イラストを少しだけ抑える（効き先が違っても当たりやすい） */
.hero img,
.hero-illust,
.hero-image{
  max-width: 380px !important;
  width: 100% !important;
  height: auto !important;
}
/* =========================
   Flow (vertical timeline)
   ========================= */
.flow{
  padding: 56px 0;
}

.flow .section-title{
  margin: 0 0 8px;
}

.flow .section-lead{
  margin: 0 0 22px;
  color: var(--muted);
}

.flow-timeline{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.flow-item{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  position: relative;
  padding: 10px 0;
}

.flow-item::before{
  content: "";
  position: absolute;
  left: 10px;          /* dotの中心 */
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.flow-item:last-child::before{
  bottom: 50%;
}

.flow-dot{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--primary2);
  box-shadow: 0 8px 18px rgba(124,58,237,.18);
  position: relative;
  z-index: 1;
  margin-top: 6px;
}

.flow-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 16px;
}

.flow-title{
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.35;
  color: var(--text);
}

.flow-text{
  margin: 0;
  color: var(--text);
}

.flow-list{
  margin: 0;
  padding-left: 1.2em;
  color: var(--text);
}

.flow-list li{
  margin: 6px 0;
}

/* =========================
   CTA Button
   ========================= */
.flow-cta{
  text-align: center;
  margin-top: 32px;
}

.cta-button{
  display: inline-block;
  padding: 14px 32px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 8px 20px rgba(124,58,237,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cta-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(124,58,237,.35);
}

/* =========================
   Floating CTA
   ========================= */
.floating-cta{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
}

.floating-cta a{
  display: inline-block;
  padding: 14px 26px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 10px 25px rgba(124,58,237,.35);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.floating-cta a:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(124,58,237,.45);
}


/* 下段のSVG（icon-analysis / icon-clipboard / icon-route）を紫寄せ */
.card-head .icon img[src$=".svg"]{
  filter: invert(36%) sepia(70%) saturate(1000%) hue-rotate(235deg) brightness(95%) contrast(95%);
}

.month-card{
  transition: transform .2s ease, box-shadow .2s ease;
}

.month-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

/* 年末カウントダウン */
.year-countdown{
  padding: 8px 0 18px;
}

.year-countdown__inner{
  max-width: 900px;   /* ここはサイトのcontainer幅に合わせて調整OK 。ボックスの幅を調整できる部分*/
  margin: 0 auto;
  padding: 18px 24px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(124,58,237,.12);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(124,58,237,.08);
}

.year-countdown__lead{
  margin: 0;
  text-align: center;
  font-size: 18px;/*カウントダウンのテキストのフォント*/
  line-height: 1.8;
  color: #2b2b3c; /* 既存の本文色に合わせて */
}

.year-countdown__num{
  font-weight: 800;
  font-size: 20px;
  color: #0b2df0; /* 赤。別の色にしたければ変更OK。ここは日数の表現をかえるグループ */
  letter-spacing: .02em;
}

.booking-embed{
  margin: 28px auto 0;
  max-width: 1100px;
  padding: 0 18px;
}

.booking-embed__frame iframe{
  width: 100%;
  min-height: 850px;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(124,58,237,.08);
  background: #fff;
}
/* ================================
   15分ミニ相談：ボタン → カレンダー開閉（レスポンシブ）
   ================================ */

.cta-sub{
  margin: 10px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(43,43,60,.75);
}

/* 開閉パネルの外枠余白 */
.booking-toggle__panel{
  margin: 14px;
}

/* 予約埋め込み（PC/スマホ安定） */
.booking-embed{
  margin: 0 auto 0;
  max-width: 1100px;
  padding: 0 18px;
}

.booking-embed__title{
  margin: 0 0 12px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}

.booking-embed__frame{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(124,58,237,.12);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(124,58,237,.08);
  overflow: hidden;
}

.booking-embed__frame iframe{
  display: block;
  width: 100%;
  border: 0;
  min-height: 820px; /* PC */
}

/* タブレット */
@media (max-width: 1024px){
  .booking-embed__frame iframe{ min-height: 900px; }
}

/* スマホ */
@media (max-width: 768px){
  .booking-embed{ padding: 0 12px; }
  .booking-embed__title{ font-size: 15px; }
  .booking-embed__frame iframe{ min-height: 1050px; }
}

/* 小さめスマホ */
@media (max-width: 390px){
  .booking-embed__frame iframe{ min-height: 1150px; }
}

/* カレンダー表示エリアのヘッダー（×ボタン） */
/* ===== booking panel (close button over iframe) ===== */

.booking-panel{
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 0 18px;
  position: relative;
}

.booking-panel__title{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(43,43,60,.9);
}

.booking-embed__frame{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(124,58,237,.12);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(124,58,237,.08);
  overflow: hidden;
}

.booking-embed__frame iframe{
  display:block;
  width:100%;
  border:0;
  min-height: 820px;
}

/* ×ボタン（黒丸＋白×） */
.booking-panel__close{
  position: absolute;
  top: 6px;
  right: 18px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: #111;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

@media (max-width: 768px){
  .booking-panel{ padding: 0 12px; }
  .booking-panel__close{ right: 12px; top: 4px; }
  .booking-embed__frame iframe{ min-height: 1050px; }
}

/* フォームパネル */
.contact-form-panel{
  position: relative;
  border:1px solid #e6e6f5;
  border-radius:20px;
  padding:24px;
  background:#fff;
}

/* ヘッダー */
.contact-form-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

/* 白抜き× */
.contact-form-close{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#7c3aed;
  border:2px solid #fff;
  position:relative;
  cursor:pointer;
}

.contact-form-close span::before,
.contact-form-close span::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:2px;
  background:#fff;
}

.contact-form-close span::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
.contact-form-close span::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

/* フォーム整列 */
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.field input,
.field textarea{
  padding:10px;
  border:1px solid #ddd;
  border-radius:10px;
}

.field--full{
  grid-column:1 / -1;
}

@media(max-width:700px){
  .contact-form{
    grid-template-columns:1fr;
  }
}

/* ===== Flow icons (visual cue) ===== */
.flow-title{
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 768px) {
  .flow-title {
    font-size: 20px;
  }
}
/* Font Awesome icon */
.flow-icon{
  font-size: 30px;
  color: #7c3aed;
  flex: 0 0 auto;
}

/* Screen-reader only */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================
   Contact as Flow-like card
   ========================= */

/* ContactセクションをFlowと同じリズムに */
#contact.section{
  padding-top: 56px;
  padding-bottom: 56px;
}

/* Contactの本文ブロックを「カード」として見せる */
#contact .container{
  position: relative;
}

/* 見出し＋リードをFlowカードの幅感に寄せる */
#contact .container > h3,
#contact .container > p,
#contact .contact-box{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* contact-box を flow-card 風に */
#contact .contact-box{
  padding: 28px;
  border-radius: 18px;
  border: 1px solid rgba(124,58,237,.18);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 25px rgba(124,58,237,.08);

  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ボタンの見た目を安定させる */
#contact .contact-box .btn{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
}

/* モバイルはボタン全幅 */
@media (max-width: 600px){
  #contact .contact-box{ padding: 22px 18px; }
  #contact .contact-box .btn{ width: 100%; }
}

/* Flow CTA 2-button layout */
.flow-cta{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
}
/* CTAボタンを大きく */
.flow-cta .cta-button{
  padding: 18px 36px;
  font-size: 18px;
  border-radius: 999px;
  min-width: 280px;
}

/* ボタン同士をもっと離す */
.flow-cta{
  gap: 40px;
  margin-top: 40px;
}

/* 右ボタンは少し軽め */
.cta-secondary{
  background: white;
  color: #7c3aed;
  border: 2px solid #7c3aed;
}

.cta-secondary:hover{
  background: #f3e8ff;
}

/* ミニ相談ボタンの下テキスト */
.cta-group{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-sub{
  margin-top: ４px;
  font-size: 14px;
  color: rgba(43,43,60,.75);
}

/* =========================
   Flow CTA 2 columns (fixed)
   ========================= */

.flow-cta{
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 44px;
  justify-content: center;
  align-items: start;
  max-width: 900px;
  margin: 44px auto 0;
}

.cta-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* 2つのボタンを完全に同サイズにする */
.flow-cta .cta-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 420px;
  min-height: 64px;

  padding: 18px 28px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 999px;

  box-sizing: border-box;
}

/* 右ボタン：白背景のアウトライン */
.flow-cta .cta-secondary{
  background: #fff;
  color: #7c3aed;
  border: 2px solid #7c3aed;
}

/* 左ボタン（既存のcta-buttonが紫塗り前提。もし白になるなら下を有効化）
.flow-cta .booking-toggle__btn{
  background: #7c3aed;
  color: #fff;
  border: 2px solid #7c3aed;
}
*/

.flow-cta .cta-sub{
  margin: 6px 0 0; 
  font-size: 14px;
  line-height: 1.4;
  color: rgba(43,43,60,.75);
}

/* 高さ合わせ用（見えない） */
.flow-cta .cta-sub--ghost{
  visibility: hidden;
}

/* スマホは縦積みで同サイズ */
@media (max-width: 700px){
  .flow-cta{
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 520px;
  }
  .flow-cta .cta-button{
    max-width: 520px;
  }
  .flow-cta .cta-sub--ghost{
    display: none;
  }
}
/* =========================
   HERO — SINGLE FINAL
   ========================= */

.hero{
  margin-top: 16px;
}

/* containerと完全一致 */
.hero .container{
  max-width: 1000px;   /* ←あなたのcontainer幅 */
  margin: 0 auto;
  padding: 0 16px;
}

.hero-inner{
  position: relative;
  overflow: hidden;
  border: 0 !important;  /* ←まずこれ */
  border-radius: 28px;
  box-shadow: 0 25px 60px rgba(0,0,0,.12);

  background: url("../img/lp-main.jpg")72% center / cover no-repeat !important;
  background-color:  #111827 !important; 
  background-size: 120%;
  background-position: 72% center;
  background-repeat: no-repeat;

  padding: 160px 60px 150px;
}

/* 暗幕：全体に薄く＋左から強め */
.hero-inner::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit; 
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.18) 52%,
      rgba(0,0,0,.08) 78%,
      rgba(0,0,0,.04) 100%
    );
  z-index: 0;
}

.hero-copy{
  position: relative;
  z-index: 1;
  max-width: 560px;
  color: #fff;
}

/* SP */
@media (max-width: 768px){
  .hero-inner{
    padding: 100px 24px 90px;
    border-radius: 18px;
  }
}

/* ===== HERO: round corners guaranteed ===== */
.hero-inner{
  border-radius: 28px !important;
  overflow: hidden !important;          /* ← これが無いと切り抜けません */
  background-size: 120% !important;
  background-repeat: no-repeat !important;
  box-shadow: none;
  background-position: 60% center;
}

.hero-inner::before{
  border-radius: inherit !important;    /* ← 暗幕も同じ角丸にする */
}
.hero::before{
  border-radius: 0 !important; /* 外側は丸めない（カード内だけ丸める） */
}

.hero .meta{
  color: #ffffff;
}

/* =========================
   ヘッダーを写真の上に重ねる
   ========================= */

.site-header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  background:transparent;
}

/* ナビ文字を白に */
.site-header a,
.site-header nav a{
  color:#ffffff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* ロゴ文字も白 */
.site-header h1,
.site-header .logo{
  color:#ffffff;
}

/* ヒーロー（写真部分） */
.hero{
  position:relative;
  padding-top:90px; /* ヘッダー高さ分 */
}

/* 写真の上にうっすら暗幕 */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.45),
    rgba(0,0,0,.1) 50%,
    rgba(0,0,0,.25)
  );
  border-radius:20px; /* 角丸なら合わせる */
  pointer-events:none;
}

/* スクロールしたら白背景に */
.site-header.is-scrolled{
  position:fixed;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.site-header.is-scrolled a{
  color:#2b2b3c;
  text-shadow:none;
}

.site-header.is-scrolled h1,
.site-header.is-scrolled .logo{
  color:#2b2b3c;
}


/* =========================
   Hero を画面いっぱいに大きくする（上書き）
   ========================= */

/* ヒーロー全体：ヘッダー分の余白は確保 */
.hero{
  padding-top: 92px;
  padding-bottom: 28px;
}

/* ヒーローだけ container の最大幅を解除して、中央配置に */
.hero > .container{
  max-width: none !important;
  width: 100% !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* 写真の箱を「画面幅いっぱい」にする */
.hero-inner{
  width: min(1600px, 100%);   /* まずは 1200px。もっと大きくしたければ 1400〜1600 に */
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  min-height: 600px;          /* 写真を大きく見せる高さ。好みで 560/620 もOK */
  background-size: cover;
  background-position: center;
  position: relative;
}

/* さらに “画面いっぱい” にしたい場合はこちら（上の width/min を上書き） */
/*
.hero-inner{
  width: calc(100vw - 48px) !important;  // 左右24pxずつ余白を残して画面いっぱい
  max-width: 1600px;
}
*/

/* 暗幕（写真の上に） */
.hero-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.45),
    rgba(0,0,0,.10) 55%,
    rgba(0,0,0,.20)
  );
  pointer-events:none;
  z-index: 1;
}

/* 文字を暗幕より前に */
.hero-copy{
  position: relative;
  z-index: 2;
  padding: 70px 64px;         /* 余白を増やすと“高級感”が出る */
}

/* 見出し・文章の読みやすさ */
.hero-copy h2{
  line-height: 1.2;
  font-size: clamp(28px, 3.2vw, 44px);
  margin: 0 0 14px;
}
.hero-copy p{
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.8;
  margin: 0;
}

/* スマホは高さと余白を調整 */
@media (max-width: 720px){
  .hero{ padding-top: 78px; }
  .hero > .container{ padding-left: 14px; padding-right: 14px; }
  .hero-inner{ min-height: 380px; border-radius: 22px; }
  .hero-copy{ padding: 46px 22px; }
}

/* ヒーロー写真の高さを大きくする */

.hero-inner{
  min-height: 800px;   /* ← 数字を変えるだけで高さ調整 */
}
/* ヒーロー画像の見せる位置を上に寄せる */
.hero-inner{
  background-position: 50% 20% !important; /* ← 上に見せたいほど 0% に近づける */
}


/* 念のため：背景画像が伸びる設定（背景画像方式の場合） */
.hero-inner{
  background-size: cover !important;
  background-position: center !important;
}
/* =========================
   Header を写真の上に重ねる（確実版）
   ========================= */

/* ヘッダーを写真の上へ */
.site-header{
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ヘッダー内の並び */
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: transparent !important;
}

/* ロゴとナビを白に（写真上で読めるように） */
.site-header .logo-text,
.site-header .nav a{
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  font-weight: 700;
}

/* ヒーローをヘッダーの下に潜り込ませないための余白 */
.hero{
  margin-top: 0;
  padding-top: 90px;   /* ←ヘッダー高さ分。必要なら80〜110で調整 */
}

/* スクロールしたら白背景に（任意だが実用） */
.site-header.is-scrolled{
  position: fixed !important;
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(8px);
}

.site-header.is-scrolled .logo-text,
.site-header.is-scrolled .nav a{
  color:#2b2b3c !important;
  text-shadow:none;
}

/* =========================
   ヘッダーをヒーロー（写真）の上に重ねる：確定版
   ========================= */

/* 1) ヘッダーは常に最前面 */
.site-header{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 2) いまヒーローを下げている余白をゼロにする（ここが肝） */
.hero{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 3) その代わり、写真（hero-inner）の中に“ヘッダーが乗るぶんの余白”を作る */
.hero-inner{
  position: relative;
  padding-top: 86px !important; /* ヘッダーが重なるスペース */
}

/* 4) ナビ文字を写真上で読めるように白に */
.site-header .logo-text,
.site-header .nav a{
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
  font-weight: 700;
}

/* 5) スクロール後に白背景（任意。不要なら消してOK） */
.site-header.is-scrolled{
  position: fixed !important;
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
}
.site-header.is-scrolled .logo-text,
.site-header.is-scrolled .nav a{
  color:#2b2b3c !important;
  text-shadow:none !important;
}

.hero-inner{
  padding-top: 110px !important;
}

.hero-copy h2{
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1.2;
}
.nowrap{ white-space: nowrap; }

.hero-copy h2{
  letter-spacing: 0.02em;
   max-width: 800px;
    font-size: 38px;
}
/* ヒーロー サブコピーを少し大きく */
.hero-copy p{
  font-size: 20px;   /* まずは +2px 程度 */
  line-height: 1.7;
}

/* --- Footer polish --- */
.site-footer{
  padding: 28px 0;
  border-top: 1px solid rgba(0,0,0,.08);
}

.site-footer .container{
  display: grid;
  gap: 10px;
}

.site-footer a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer a:hover{
  opacity: .85;
}

.site-footer small{
  display: inline-block;
  margin-top: 6px;
  opacity: .75;
}
/* --- Footer: remove "middle island" --- */
.site-footer .container{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px 24px;
}

/* 左ブロックを作る：1〜3番目（屋号／メール／規約リンク）を左寄せで固める */
.site-footer .container > :nth-child(1),
.site-footer .container > :nth-child(2),
.site-footer .container > :nth-child(3){
  text-align:left;
}

/* 規約リンクは2行目の下に“寄せる” */
.site-footer .container > :nth-child(3){
  margin-top: 2px;
}

/* 真ん中に広がらないように：規約リンクを勝手に中央に行かせない */
.site-footer .container > :nth-child(3){
  margin-right:auto;   /* ←これが効くと“島”が消える */
  white-space:nowrap;
}

/* © は右上に固定 */
.site-footer small{
  margin-left:auto;
  white-space:nowrap;
  opacity:.7;
}

/* スマホは縦 */
@media (max-width: 700px){
  .site-footer .container{
    display:block;
  }
  .site-footer small{
    display:block;
    margin-top:10px;
  }
}

/* --- Footer final layout --- */
.footer-flex{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px 28px;
}

.footer-left p{
  margin: 0 0 8px;
}

.footer-links{
  margin-top: 4px;
  white-space: nowrap;
}

.footer-right{
 white-space: nowrap;
  opacity: 1;          /* 薄さを解除 */
  padding-top: 2px;
  font-size: 16px;     /* 文字を少し大きく */
  font-weight: 500;    /* 少しだけ強く */
  color: #2b2b3c;      /* 既存の本文色に寄せる（見やすい） */
}

.site-footer a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer small{
  font-size: 16px;   /* smallの縮小を打ち消す */
}

/* mobile */
@media (max-width: 700px){
  .footer-flex{
    display:block;
  }
  .footer-right{
    margin-top: 10px;
  }
}