/* =====================================================================
   insta-tone.css ── Instagram（@miki_design_future）の世界観に寄せるレイヤー
   ・コーラル × ターコイズ × クリーム
   ・手書き風の日本語見出し（Zen Kurenaido）＋英字はインスタと同じ Marcellus（筆記体は日本人に読みにくいのでやめた）
   ・エアメールの消印・飛行機・点線のモチーフ
   main.css の後に読み込む。外せば元のシックな見た目に戻る。
   ===================================================================== */

:root{
  --it-coral:#E4876F;
  --it-coral-deep:#D26F57;
  --it-coral-soft:#F6D3C8;
  --it-teal:#3E9FAA;
  --it-teal-deep:#2E8792;
  --it-teal-soft:#CFE9EB;
  --it-cream:#FBF4EC;
  --it-paper:#FFFBF6;
  --it-ink:#4A3F3A;
  --it-hand:'Zen Kurenaido','Klee One','Hiragino Maru Gothic ProN',sans-serif;
  --it-script:'Marcellus','Cormorant Garamond',serif;
}

/* ---------- ベース ---------- */
body{ background:var(--it-paper); color:var(--it-ink); }
p, li{ color:var(--it-ink); }

/* 背景色がついていたセクションはクリームに統一 */
#flow, #pricing, #media, .bg-mesh{ background:var(--it-cream) !important; }

/* ---------- 見出し：英字は Marcellus、日本語は手書き風 ---------- */
.section-head{ position:relative; }
.section-en,
.story-en,
.lifestyle-en{
  font-family:var(--it-script) !important;
  font-size:1.6rem !important;
  font-weight:400 !important;
  letter-spacing:.08em !important;
  text-transform:none !important;
  color:var(--it-coral) !important;
  line-height:1.2;
}
.section-en::before,.section-en::after{ display:none !important; content:none !important; }

.section-title-ja,
.story-title,
.story-block h3,
.concept-step h3,
.service-card h3,
.pricing-group-title h3,
.about-text h3{
  font-family:var(--it-hand) !important;
  font-weight:400 !important;
  letter-spacing:.06em !important;
  color:var(--it-ink) !important;
}
.section-title-ja{ font-size:clamp(1.7rem,3.4vw,2.3rem) !important; }

/* 見出しの下：飛行機が飛ぶ点線 */
.section-head .section-title-ja::after{
  display:block !important;
  content:"" !important;
  width:150px; height:18px; margin:14px auto 0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='18' viewBox='0 0 150 18'><path d='M4 13 Q55 1 112 9' fill='none' stroke='%23E4876F' stroke-width='1.6' stroke-dasharray='4 5' stroke-linecap='round'/><path d='M120 9 l16 -5 l-4 5 l4 5 z M126 9 l-6 -4 M126 9 l-6 4' fill='%233E9FAA'/></svg>") center/contain no-repeat;
}

/* 見出しの右上：エアメールの消印 */
.section-head::before{
  content:"";
  position:absolute; top:-14px; right:calc(50% - 190px);
  width:78px; height:78px; opacity:.55; pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='78' height='78' viewBox='0 0 78 78'><g fill='none' stroke='%233E9FAA' stroke-width='1.4'><circle cx='39' cy='39' r='33'/><circle cx='39' cy='39' r='25'/></g><text x='39' y='27' text-anchor='middle' font-family='Georgia,serif' font-size='7.5' letter-spacing='1.5' fill='%233E9FAA'>AIR MAIL</text><text x='39' y='58' text-anchor='middle' font-family='Georgia,serif' font-size='6.5' letter-spacing='1.2' fill='%233E9FAA'>SOUL JOURNEY</text><path d='M26 41 l26 -8 l-6 8 l6 8 z' fill='%23E4876F'/><g stroke='%233E9FAA' stroke-width='1.2'><path d='M2 70 q8 -4 16 0 t16 0 t16 0 t16 0 t16 0'/><path d='M2 75 q8 -4 16 0 t16 0 t16 0 t16 0 t16 0'/></g></svg>") center/contain no-repeat;
  transform:rotate(-12deg);
}
@media (max-width:640px){ .section-head::before{ right:6px; top:-24px; width:60px; height:60px; } }

/* ---------- ボタン ---------- */
.btn-primary{
  background:var(--it-coral) !important;
  border-color:var(--it-coral) !important;
  color:#fff !important;
  border-radius:999px !important;
  box-shadow:0 10px 24px rgba(228,135,111,.35) !important;
}
.btn-primary:hover{ background:var(--it-coral-deep) !important; box-shadow:0 14px 30px rgba(228,135,111,.45) !important; }
.btn-secondary,.btn-light{
  background:#fff !important;
  color:var(--it-teal-deep) !important;
  border:1.5px solid var(--it-teal) !important;
  border-radius:999px !important;
  box-shadow:none !important;
}
.btn-secondary:hover,.btn-light:hover{ background:var(--it-teal-soft) !important; }

/* ---------- ファーストビュー：本人写真を主役に ---------- */
.first-view{ background:var(--it-cream) !important; }
.first-view-scrim{ display:none !important; }
@media (min-width:861px){
  /* 文字と写真を中央寄せの2カラムに。写真は画面いっぱいに伸ばさない */
  .first-view{
    justify-content:center !important;
    align-items:center !important;
    gap:clamp(40px,5.5vw,96px);
    padding:calc(var(--header-height,72px) + 36px) 5vw 64px !important;
  }
  .first-view-bg{
    position:relative !important; inset:auto !important;
    order:2; flex:0 0 min(36vw,470px);
    height:min(calc(100svh - var(--header-height,72px) - 130px),600px) !important;
    width:auto !important;
  }
  .first-view-bg img{ object-position:50% 30% !important; }
  .first-view-content{
    order:1; flex:0 1 580px; max-width:580px !important;
    margin:0 !important; padding:0 !important;
  }
  .first-view-content h1{ font-size:clamp(2.3rem,3.6vw,3.4rem) !important; }
  .first-view-content .tagline{ max-width:none !important; }
}
@media (max-width:860px){
  .first-view{ flex-direction:column; }
  .first-view-bg{
    position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
    order:1; width:calc(100% - 64px) !important; margin:calc(var(--header-height,72px) + 18px) 32px 0; height:46vh;
  }
  .first-view-bg img{ object-position:50% 26% !important; }
  .first-view-content{ order:2; padding-top:30px !important; padding-bottom:40px !important; }
  .first-view-content h1{ font-size:clamp(1.9rem,8vw,2.6rem) !important; }
  .first-view-content .brand-label .dot{ display:none !important; }
}
.first-view-content .brand-label{
  font-family:var(--it-hand) !important;
  text-transform:none !important;
  letter-spacing:.08em !important;
  font-size:.98rem !important;
  color:var(--it-coral-deep) !important;
}
.first-view-content .brand-label .dot{ background:var(--it-teal) !important; box-shadow:0 0 0 4px var(--it-teal-soft) !important; }
.first-view-content h1{
  font-family:var(--it-hand) !important;
  font-weight:400 !important;
  color:var(--it-ink) !important;
  letter-spacing:.06em !important;
  text-shadow:none !important;
}
.first-view-content .tagline{ font-family:'Noto Sans JP',sans-serif !important; color:var(--it-ink) !important; }

/* 実績チップ（子連れ14カ国 など） */
.it-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:-14px 0 30px; }
@media (max-width:860px){ .it-chips{ justify-content:center; } }
.it-chips span{
  font-size:.82rem; padding:6px 13px; border-radius:999px;
  background:#fff; border:1px dashed var(--it-coral); color:var(--it-coral-deep);
}
.it-chips span i{ margin-right:5px; color:var(--it-teal); }

/* ---------- カード類：クリームの便箋っぽく ---------- */
.service-card,.price-card,.concept-step,.voice-card,.story-block{
  border-radius:16px !important;
  border-color:rgba(228,135,111,.28) !important;
}
.price-card .badge{ border-radius:999px !important; }
.badge{ background:var(--it-coral) !important; }
.badge.main,.flag-badge{ background:var(--it-teal) !important; }
.step-no,.service-no,.story-block-num{ color:var(--it-coral) !important; font-family:var(--it-script) !important; }

/* 引用：手書き風＋コーラルの点線枠 */
.story-quote p{ font-family:var(--it-hand) !important; color:var(--it-ink) !important; }
.story-quote{ border:none !important; }
.hl{ background:linear-gradient(transparent 62%, var(--it-coral-soft) 62%) !important; color:inherit !important; }

/* 旅する暮らしバンド */
.lifestyle-copy{ font-family:var(--it-hand) !important; }

/* 右下のオプチャボタン：LINEグリーンではなくターコイズで世界観に合わせる */
.floating-cta{ background:var(--it-teal) !important; }
.floating-cta:hover{ background:var(--it-teal-deep) !important; }

/* About のバッジ */
.about-badge{ background:var(--it-coral) !important; font-family:var(--it-hand) !important; }

@media (max-width:640px){ .story-title{ font-size:1.32rem !important; letter-spacing:.02em !important; } }

/* 旅先診断バナー：紺で重く浮いていたのを、クリーム地になじむ白カードに */
.hero-oracle-banner{
  background:#fff !important;
  color:var(--it-ink) !important;
  border:1.5px dashed var(--it-teal) !important;
  box-shadow:0 8px 20px rgba(62,159,170,.14) !important;
}
.hero-oracle-banner:hover{ color:var(--it-ink) !important; box-shadow:0 12px 26px rgba(62,159,170,.22) !important; }
.hero-oracle-banner small{ color:var(--it-teal-deep) !important; }
.hero-oracle-icon{ background:var(--it-teal) !important; color:#fff !important; }
.hero-oracle-arrow{ color:var(--it-coral) !important; }

/* ---------- 花とちょうちょ（hand.js が見出しの文字を画像に差し替える） ---------- */
.hand-sr{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.hand-run{
  display:inline-block;
  max-width:100%;
  height:auto;
  vertical-align:-0.18em;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-position:center; mask-position:center;
}

/* ---------- 暗い背景の上の文字（ink色を強制したせいで沈んでいたのを戻す） ---------- */
/* 写真の上の帯：暗い半透明 → クリームの便箋っぽいカードに */
.lifestyle-overlay{
  background:rgba(251,244,236,.9) !important;
  backdrop-filter:blur(4px);
  border:1.5px dashed var(--it-coral) !important;
  color:var(--it-ink) !important;
}
.lifestyle-copy{ color:var(--it-ink) !important; }

/* お問い合わせ：紺 → ターコイズのグラデーションにして、文字は白で読めるように */
.contact-section{ background:linear-gradient(150deg,#3E9FAA 0%,#2E7F8A 100%) !important; }
.section-title-ja.light,
.section-en.light{ color:#fff !important; }
.contact-section .contact-lead,
.contact-section p,
.contact-section li{ color:rgba(255,255,255,.92) !important; }
.contact-section .section-head::before{ filter:brightness(0) invert(1); opacity:.5; }
.contact-section .section-head .section-title-ja::after{ filter:brightness(0) invert(1); opacity:.85; }

/* ---------- インスタのリールのサムネみたいに、斜めの色面を重ねる ---------- */
/* ぼかしの丸い飾りはやめる */
.orb{ display:none !important; }
.bg-mesh, .gallery-section{ background:var(--it-cream) !important; }
.lifestyle-overlay{ backdrop-filter:none !important; background:rgba(251,244,236,.95) !important; }

#about, #flow, #services, #pricing, #media, .story-section, .fs-band{ position:relative; overflow:hidden; }
#about > .container, #flow > .container, #services > .container, #pricing > .container, #media > .container,
.story-section > .story-inner, .fs-band > .fs-band-inner{ position:relative; z-index:1; }

/* 色面はセクションの「上の角」と「横の辺の途中」にだけ置く。
   下の角に置くと、次のセクションの上の角とぶつかって境目でズレて見えるため */
#about::before, #flow::before, #services::before, #pricing::before, #media::before, .story-section::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:0; left:0; width:min(40vw,540px); height:min(50vw,660px,70%);
  background:
    linear-gradient(to bottom right, rgba(62,159,170,.30) 0 26%, transparent 26%),
    linear-gradient(to bottom right, rgba(228,135,111,.28) 0 50%, transparent 50%);
}
/* 反対側の辺から、途中に三角を差し込む（上下の端には触れない） */
#about::after, #flow::after, #services::after, #pricing::after, #media::after, .story-section::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:0; top:50%; transform:translateY(-50%); width:min(22vw,300px); height:min(40vw,520px,56%);
  background:
    linear-gradient(to left, rgba(228,135,111,.30) 0 45%, transparent 45%),
    rgba(62,159,170,.22);
  clip-path:polygon(100% 0,100% 100%,0 50%);
}
/* セクションごとに左右を入れ替える */
#flow::before, #pricing::before, .story-section::before{
  left:auto; right:0;
  background:
    linear-gradient(to bottom left, rgba(228,135,111,.32) 0 24%, transparent 24%),
    linear-gradient(to bottom left, rgba(62,159,170,.24) 0 50%, transparent 50%);
}
#flow::after, #pricing::after, .story-section::after{
  right:auto; left:0;
  background:
    linear-gradient(to right, rgba(62,159,170,.30) 0 45%, transparent 45%),
    rgba(228,135,111,.22);
  clip-path:polygon(0 0,100% 50%,0 100%);
}

/* ファーストビュー：右側に斜めの色面を3枚重ねる */
.first-view::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(162deg, transparent 0 74%, rgba(210,111,87,.55) 74%),
    linear-gradient(118deg, transparent 0 60%, rgba(62,159,170,.30) 60%),
    linear-gradient(132deg, transparent 0 46%, rgba(246,211,200,.85) 46%);
}
.first-view-content, .first-view-bg{ z-index:1; }

/* 写真：窓型をやめて、四角い写真の後ろに色のブロックをずらして重ねる */
.first-view-bg img{
  position:relative; z-index:2; box-sizing:border-box;
  border-radius:6px !important;
  border:8px solid #fff;
  box-shadow:0 18px 40px rgba(74,63,58,.16);
}
.first-view-bg::before, .first-view-bg::after{
  content:""; position:absolute; pointer-events:none; border-radius:4px;
}
.first-view-bg::before{ /* ターコイズ：左下にずらす */
  z-index:1; inset:0; background:var(--it-teal);
  transform:translate(-26px,26px) rotate(-3deg);
}
.first-view-bg::after{ /* コーラル：右上に小さめ */
  z-index:1; top:-22px; right:-22px; width:58%; height:46%;
  background:var(--it-coral); border:none !important;
}

@media (max-width:860px){
  .first-view::before{
    background:
      linear-gradient(155deg, rgba(62,159,170,.55) 0 16%, transparent 16%),
      linear-gradient(200deg, rgba(228,135,111,.55) 0 12%, transparent 12%),
      linear-gradient(168deg, rgba(246,211,200,.9) 0 46%, transparent 46%);
  }
  .first-view-bg img{ border-width:6px; }
  .first-view-bg::before{ transform:translate(-14px,14px) rotate(-2.5deg); }
  .first-view-bg::after{ top:-12px; right:-14px; }
  #about::before, #flow::before, #services::before, #pricing::before, #media::before, .story-section::before{ width:56vw; height:min(72vw,60%); }
  #about::after, #flow::after, #services::after, #pricing::after, #media::after, .story-section::after{ width:30vw; height:min(60vw,40%); }
}

/* ---------- 読みやすさの調整 ---------- */
/* コーラルのボタンは白文字が読みにくかったので一段濃く */
.btn-primary{ background:#C9624A !important; border-color:#C9624A !important; }
.btn-primary:hover{ background:#B5543D !important; }
/* 英字ラベルも少し濃く */
.section-en, .story-en{ color:#D26F57 !important; }
.lifestyle-en{ color:#D26F57 !important; }
/* 「わたしについて」の名前を大きく、肩書きはターコイズで */
.about-text h3{ font-size:2.1rem !important; }
.about-text h3 span{ font-size:1.1rem !important; color:var(--it-teal-deep) !important; }

/* Soul Journey の写真帯はクリックできないので、マウスを乗せても動かさない（押せると誤解されるため） */
.lifestyle-grid figure img,
.lifestyle-grid figure:hover img{ transform:none !important; transition:none !important; }
.lifestyle-band, .lifestyle-grid figure{ cursor:default !important; }

/* 撮影プラン → Future Session へのつなぎの一文を目立たせる */
.fs-bridge{ position:relative; z-index:1; text-align:center; margin:44px auto 26px; padding:0 16px; }
.fs-bridge-arrow{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; margin:0 auto 12px;
  background:var(--it-teal); color:#fff; font-size:.95rem;
}
.fs-bridge-text{
  display:inline-block; margin:0 !important;
  font-family:var(--it-hand) !important;
  font-size:clamp(1.3rem,2.6vw,1.9rem) !important; line-height:1.7 !important;
  color:var(--it-ink) !important; letter-spacing:.04em;
}
.fs-bridge-hl{
  background:linear-gradient(transparent 58%, var(--it-coral-soft) 58%);
  color:var(--it-coral-deep); padding:0 .15em;
}
@media (min-width:769px){ .fs-bridge-text .sp-only{ display:none; } }

/* 料金の小見出し：「～」だけが次の行に落ちないよう、区切り（・）ごとに改行させる */
.pricing-group-title .sub span{ display:inline-block; }
@media (max-width:600px){
  .pricing-group-title{ flex-direction:column; align-items:flex-start; gap:4px; }
  .pricing-group-title .sub{ font-size:.82rem; line-height:1.6; }
}

/* ---------- よくある質問 ---------- */
.faq-section{ background:var(--it-paper); position:relative; }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:#fff; border:1.5px solid var(--it-coral-soft); border-radius:14px;
  padding:0; overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:18px 52px 18px 54px; font-weight:600; color:var(--it-ink); line-height:1.6;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::before{
  content:"Q"; position:absolute; left:18px; top:15px;
  width:26px; height:26px; border-radius:50%; background:var(--it-coral-deep); color:#fff;
  font-family:'Marcellus',serif; font-size:.95rem; display:flex; align-items:center; justify-content:center;
}
.faq-item summary::after{
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:1.4rem; color:var(--it-teal-deep); font-weight:400;
}
.faq-item[open] summary::after{ content:"−"; }
.faq-item p{
  margin:0 !important; padding:0 22px 20px 54px; color:var(--it-ink); line-height:1.9; font-size:.95rem;
}
@media (max-width:600px){
  .faq-item summary{ padding:16px 44px 16px 48px; font-size:.95rem; }
  .faq-item summary::before{ left:14px; top:14px; }
  .faq-item p{ padding:0 18px 18px 48px; }
}