@charset "UTF-8";

/*==================================================
    基本設定
==================================================*/
:root {
  --ink: #284253;
  --ink-dark: #193746;
  --muted: #647783;
  --blue: #78b9d7;
  --blue-pale: #eaf6fb;
  --mint: #8bcdb7;
  --mint-pale: #eaf8f3;
  --lavender: #aa9bd2;
  --lavender-pale: #f2eef9;
  --orange: #ef985c;
  --orange-dark: #dc7942;
  --peach: #fff0e6;
  --yellow: #fff7d9;
  --line: #dce7eb;
  --white: #fff;
  --shadow: 0 16px 42px rgba(49, 88, 105, .10);
  --radius: 26px;
  --font-sans: "Noto Sans JP", sans-serif;
  --font-round: "M PLUS Rounded 1c", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; padding-top: 92px; color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.9; background: #fff; -webkit-font-smoothing: antialiased; }
body, button, input, textarea { font-family: var(--font-sans); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-size: 1rem; }
h1, h2, h3, p { margin-top: 0; }
.container { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.section { padding: 112px 0; }
.section--tint { background: #f5fafb; }
.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; padding: 10px 18px; border-radius: 8px; background: var(--ink-dark); color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/*==================================================
    共通パーツ
==================================================*/
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 58px; padding: 0 30px; border: 0; border-radius: 999px; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button--primary { color: #fff; background: var(--orange); box-shadow: 0 10px 24px rgba(239, 152, 92, .28); }
.button--primary:hover { background: var(--orange-dark); box-shadow: 0 13px 30px rgba(239, 152, 92, .36); }
.button--outline { min-width: 340px; border: 1px solid var(--blue); color: #327b9d; background: #fff; }
.button--outline span { padding: 2px 8px; border-radius: 4px; color: #fff; font-size: 10px; background: #e66b62; }
.button--large { min-width: 380px; min-height: 68px; font-size: 17px; }
.section-heading { margin-bottom: 48px; }
.section-heading--center { text-align: center; }
.section-heading--row { display: flex; align-items: end; justify-content: space-between; }
.section-heading--row > p { color: var(--muted); }
.section-heading__en { margin-bottom: 10px; color: #5c9bb8; font-size: 12px; font-weight: 700; letter-spacing: .24em; }
.section-heading h2 { margin-bottom: 14px; color: var(--ink-dark); font-family: var(--font-round); font-size: clamp(31px, 3vw, 42px); line-height: 1.45; letter-spacing: .04em; }
.section-heading > p:last-child { color: var(--muted); }
.section-heading__line { display: block; width: 54px; height: 3px; margin: 24px auto 0; border-radius: 2px; background: var(--orange); }
.section-action { margin-top: 48px; text-align: center; }

.schedule-support {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: min(820px, 100%);
  margin: 100px auto 0;
  padding: 22px 28px;
  border: 1px solid #d5e6ed;
  border-radius: 18px;
  align-items: center;
  color: #284b60;
  background: linear-gradient(105deg, #f4fbfd 0%, #fff 62%, #fffaf5 100%);
  box-shadow: 0 12px 28px rgba(31, 76, 99, .07);
  gap: 30px;
}

.schedule-support__heading {
  display: flex;
  min-width: 240px;
  align-items: center;
  gap: 14px;
}

.schedule-support__icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
  color: #2b91b7;
  background: #e4f5f8;
}

.schedule-support__icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.schedule-support__heading small {
  display: block;
  margin-bottom: 2px;
  color: #6094aa;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
}

.schedule-support__heading h3 {
  margin: 0;
  color: #173d53;
  font-family: var(--font-round);
  font-size: 18px;
  line-height: 1.5;
}

.schedule-support__content {
  padding-left: 30px;
  border-left: 1px solid #d7e5eb;
}

.schedule-support__content strong {
  display: flex;
  margin-bottom: 5px;
  align-items: center;
  color: #173d53;
  font-size: 14px;
  gap: 8px;
}

.schedule-support__content strong span {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
  font-size: 11px;
}

.schedule-support__content p {
  margin: 0;
  color: #617783;
  font-size: 12px;
  line-height: 1.8;
}
.line-icon { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-round); font-size: 22px; }
.photo-placeholder { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 240px; color: #66808c; background: linear-gradient(135deg, #edf5f6, #dfeeee); }
.photo-placeholder:not(:has(img))::after { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; }
.photo-placeholder > span { position: relative; z-index: 1; font-weight: 600; letter-spacing: .08em; }
.photo-placeholder > img { width: 100%; height: 100%; object-fit: cover; }

/*==================================================
    ヘッダー
==================================================*/
.site-header { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; width: 100%; height: 92px; border-bottom: 1px solid rgba(220,231,235,.8); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.site-header__inner { display: flex; align-items: center; height: 100%; padding: 0 26px; gap: 22px; }
.site-header__logo {
  display: grid;
  place-items: center;
  flex: 0 0 142px;
  width: 142px;
  height: 78px;
  overflow: visible;
}
.site-header__logo img {
  display: block;
  width: 138px;
  height: 78px;
  object-fit: contain;
  object-position: center;
  transform: none;
}
.site-header__logo-fallback { font-family: var(--font-round); font-weight: 700; }
.global-nav { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: clamp(12px, 1.25vw, 24px); white-space: nowrap; }
.global-nav a { position: relative; font-size: clamp(11px, .9vw, 14px); font-weight: 600; }
.global-nav a::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; background: var(--orange); transform: scaleX(0); transition: transform .2s; }
.global-nav a:hover::after { transform: scaleX(1); }
.button--header { flex: 0 0 auto; min-height: 48px; padding: 0 22px; color: #fff; font-size: 13px; background: var(--orange); }

/*==================================================
    メインビジュアル
==================================================*/
.hero { position: relative; overflow: hidden; padding: 68px 0 0; background: linear-gradient(112deg, #fff 0 53%, #f0f8fa 53% 100%); }
.hero__inner { display: grid; grid-template-columns: .93fr 1.07fr; align-items: center; min-height: 610px; gap: 54px; }
.hero__copy { position: relative; z-index: 2; padding: 30px 0 70px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #56869b; font-size: 14px; font-weight: 600; letter-spacing: .12em; }
.eyebrow span { width: 30px; height: 1px; background: var(--orange); }
.hero h1 { margin: 26px 0 28px; color: var(--ink-dark); font-family: var(--font-round); font-size: clamp(40px, 3.35vw, 48px); line-height: 1.58; letter-spacing: .035em; }
.hero h1 strong { position: relative; color: #4d99b8; font-weight: 700; }
.hero h1 strong::after { content: ""; position: absolute; z-index: -1; right: -4px; bottom: 2px; left: -4px; height: 12px; border-radius: 10px; background: #dff2f8; }
.hero__lead { margin-bottom: 12px; font-size: 17px; font-weight: 500; line-height: 2; }
.hero__note { color: var(--muted); font-size: 14px; line-height: 1.8; }
.hero__actions { display: flex; align-items: center; gap: 22px; margin-top: 32px; }
.hero__visual { position: relative; align-self: stretch; min-height: 610px; }

/*==================================================
    教室紹介・おすすめする方
==================================================*/
.section--about { padding-top: 130px; }
.about-grid { display: grid; grid-template-columns: 1fr 1.02fr; align-items: center; gap: 92px; }
.about-visual { position: relative; padding: 0 0 42px 42px; }
.photo-placeholder--about { min-height: 440px; border-radius: 90px 20px 90px 20px; }
.about-visual::before { content: ""; position: absolute; z-index: -1; bottom: 0; left: 0; width: 75%; height: 75%; border-radius: 60px 20px 60px 20px; background: var(--blue-pale); }
.about-visual__accent { position: absolute; right: -34px; bottom: 10px; padding: 22px 28px; border-radius: 16px; color: #fff; background: var(--mint); font-family: var(--font-round); font-weight: 700; line-height: 1.6; transform: rotate(-2deg); }
.about-copy__catch { color: var(--ink-dark); font-family: var(--font-round); font-size: 26px; font-weight: 700; line-height: 1.8; }
.about-copy p:not(.about-copy__catch) { color: var(--muted); }
.about-copy strong { color: #3e839f; }
.recommend { padding: 42px 0 105px; }
.recommend__inner { display: grid; grid-template-columns: 320px 1fr; overflow: hidden; border-radius: var(--radius); background: #f4faf9; box-shadow: var(--shadow); }
.recommend__title { padding: 50px; color: #fff; background: #6fb49f; }
.recommend__title .section-heading__en { color: rgba(255,255,255,.75); }
.recommend__title h2 { margin-bottom: 22px; font-family: var(--font-round); font-size: 30px; line-height: 1.55; }
.recommend__title > p:last-child { margin: 0; font-size: 13px; }
.recommend__list { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 42px 56px; list-style: none; gap: 10px 38px; }
.recommend__list li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #d8e9e4; font-weight: 600; }
.recommend__list span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--orange); font-size: 12px; }
.reason-card { position: relative; min-height: 380px; padding: 34px 25px; border-radius: 80px 16px 60px 16px; background: #fff; box-shadow: 0 10px 28px rgba(49,88,105,.07); }
.reason-card__number { position: absolute; top: 22px; right: 22px; color: currentColor; font-family: var(--font-round); font-size: 12px; letter-spacing: .1em; opacity: .7; }
.reason-card .line-icon { margin: 35px 0 30px; }
.reason-card h3 { color: var(--ink-dark); font-family: var(--font-round); font-size: 19px; line-height: 1.65; }
.reason-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }

/*==================================================
    講師紹介
==================================================*/
.instructor { overflow: hidden; }

/*==================================================
    受講スタイル
==================================================*/
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: 940px; margin: auto; gap: 30px; }
.plan-card { position: relative; overflow: hidden; padding: 0 50px 45px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.plan-card__head { margin: 0 -50px 30px; padding: 30px; text-align: center; background: var(--blue-pale); }
.plan-card--private .plan-card__head { background: var(--lavender-pale); }
.plan-card__head span { font-size: 12px; }
.plan-card__head h3 { margin: 4px 0 0; color: var(--ink-dark); font-family: var(--font-round); font-size: 26px; }
.plan-card__price { display: flex; align-items: baseline; justify-content: center; margin-bottom: 25px; color: var(--ink-dark); }
.plan-card__price small { margin-right: 8px; }.plan-card__price strong { color: #438eae; font-family: var(--font-round); font-size: 40px; }.plan-card--private .plan-card__price strong { color: #8978b8; }.plan-card__price span { font-size: 12px; }
.plan-card ul { display: grid; margin: 0; padding: 0; list-style: none; gap: 11px; }
.plan-card li { position: relative; padding: 9px 10px 9px 42px; border-radius: 8px; background: #f7fafb; font-size: 14px; }
.plan-card li::before { content: "✓"; position: absolute; left: 15px; color: var(--mint); font-weight: 700; }
.plan-card__ribbon { position: absolute; z-index: 2; top: 18px; right: -42px; width: 150px; padding: 4px; color: #fff; font-size: 9px; text-align: center; background: var(--orange); transform: rotate(40deg); }
.plan-common { display: flex; align-items: center; justify-content: center; max-width: 940px; margin: 24px auto 0; padding: 18px 28px; border-radius: 14px; background: #fff; gap: 24px; }
.plan-common span { padding: 3px 14px; border-radius: 999px; color: #fff; font-size: 11px; background: var(--ink); }.plan-common p { margin: 0; }.plan-common small { color: var(--muted); }
.lesson-methods { margin-top: 54px; text-align: center; }.lesson-methods h3 { font-family: var(--font-round); }.lesson-methods > div { display: flex; justify-content: center; gap: 16px; }
.lesson-methods > div span { display: inline-flex; align-items: center; gap: 10px; min-width: 180px; padding: 13px 22px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px rgba(49,88,105,.06); font-weight: 600; }
.lesson-methods b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 11px; background: var(--blue); }.lesson-methods span:nth-child(2) b { background: var(--mint); }.lesson-methods span:nth-child(3) b { background: var(--lavender); }.lesson-methods p { margin: 18px 0 0; color: var(--muted); font-size: 13px; }

/*==================================================
    開催教室・受講までの流れ
==================================================*/
.school-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.school-card { position: relative; padding: 38px; border: 1px solid var(--line); border-radius: 22px; background: #fff; transition: transform .2s, box-shadow .2s; }
.school-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.school-card__tag { color: #7fb0c5; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.school-card h3 { margin: 7px 0 18px; font-family: var(--font-round); font-size: 25px; }
.school-card p { min-height: 105px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.school-card a { color: #5d9ab4; font-size: 12px; font-weight: 700; }
.flow { background: linear-gradient(120deg, #edf8f5, #f7fbfc); }
.flow-list { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; gap: 24px; }
.flow-list::before { content: ""; position: absolute; top: 74px; right: 10%; left: 10%; border-top: 1px dashed #96c5b6; }
.flow-list li { position: relative; text-align: center; }
.flow-list > li > span { display: block; color: #6aaa96; font-size: 9px; line-height: 1.2; letter-spacing: .1em; }
.flow-list > li > span strong { font-family: var(--font-round); font-size: 22px; }
.flow-list .line-icon { position: relative; margin: 16px auto 24px; border-color: #9cc9bb; color: #5d9d89; background: #fff; }
.flow-list h3 { font-family: var(--font-round); font-size: 17px; }.flow-list p { color: var(--muted); font-size: 12px; line-height: 1.8; }

/*==================================================
    教室ギャラリー・YouTube・ブログ
==================================================*/
.gallery-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 16px; }
.gallery-grid .photo-placeholder { min-height: 0; border-radius: 18px; }
.gallery-grid__main { grid-row: 1 / 3; }
.gallery-grid__main img { object-position: 46% center; }
.gallery-grid__consult img { object-position: 76% center; }
.gallery-grid__lesson img { object-position: 32% center; }
.gallery-grid__smile img { object-position: center 25%; }
.gallery-grid__caption { position: absolute !important; right: 14px; bottom: 13px; padding: 6px 11px; border-radius: 999px; color: #fff; font-size: 10px; background: rgba(32,62,74,.68); backdrop-filter: blur(5px); }
.gallery-grid > div:nth-child(2) { background: linear-gradient(135deg,#e9f5f2,#d6e9e4); }.gallery-grid > div:nth-child(3) { background: linear-gradient(135deg,#f2eff8,#e2dcec); }.gallery-grid > div:nth-child(4) { background: linear-gradient(135deg,#fff2e9,#f0e2d8); }
.youtube { color: #fff; background: #4d6978; }
.youtube .section-heading__en { color: #a8d6e8; }
.youtube__intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: 46px; gap: 100px; }.youtube__intro h2 { margin: 0; font-family: var(--font-round); font-size: 38px; line-height: 1.5; }.youtube__intro > p { margin: 0; color: #dce8ed; font-size: 14px; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.video-card { display: block; }.video-card__thumb { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16/9; border-radius: 18px; background: linear-gradient(135deg,#b9dce8,#7eafc2); }.video-card__thumb::before { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.video-card__thumb small { position: absolute; bottom: 14px; left: 16px; font-weight: 700; letter-spacing: .15em; }.video-card h3 { margin: 16px 4px 0; font-size: 15px; line-height: 1.7; }
.button--youtube { color: #fff; background: #e35b52; }.button--youtube:hover { background: #cc4c45; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }.blog-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: transform .2s, box-shadow .2s; }.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card__thumb { display: grid; place-items: center; aspect-ratio: 1.7; color: #fff; background: #9bcadd; }.blog-card__thumb span { padding: 7px 14px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; font-size: 10px; letter-spacing: .15em; }
.blog-card__body { padding: 26px; }.blog-card__meta { display: flex; align-items: center; justify-content: space-between; color: #8a9aa3; font-size: 10px; }.blog-card__meta span { padding: 3px 9px; border-radius: 4px; color: #4e8ba5; background: var(--blue-pale); }.blog-card h3 { margin: 15px 0 10px; color: var(--ink-dark); font-size: 17px; line-height: 1.7; }.blog-card p { color: var(--muted); font-size: 12px; }.blog-card__more { color: #5795af; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.text-link { display: inline-flex; align-items: center; gap: 30px; padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-weight: 600; }

/*==================================================
    よくある質問
==================================================*/
.faq-container { max-width: 920px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.faq-item summary { display: grid; grid-template-columns: 44px 1fr 26px; align-items: center; padding: 23px 26px; cursor: pointer; font-weight: 600; list-style: none; gap: 14px; }.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__q, .faq-item__answer > span { color: #5696b2; font-family: var(--font-round); font-size: 21px; }
.faq-item__toggle { position: relative; width: 20px; height: 20px; }.faq-item__toggle::before, .faq-item__toggle::after { content: ""; position: absolute; top: 9px; left: 2px; width: 16px; height: 2px; background: #79a9bc; transition: transform .25s; }.faq-item__toggle::after { transform: rotate(90deg); }.faq-item[open] .faq-item__toggle::after { transform: rotate(0); }
.faq-item__answer { display: grid; grid-template-columns: 44px 1fr; margin: 0 26px; padding: 20px 0 24px; border-top: 1px solid var(--line); gap: 14px; }.faq-item__answer p { margin: 0; color: var(--muted); font-size: 14px; }

/*==================================================
    個別説明会CTA・お問い合わせ
==================================================*/
.cta { position: relative; overflow: hidden; padding: 100px 0; color: #fff; text-align: center; background: #79b9d2; }.cta::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(circle at 2px 2px, #fff 1px, transparent 0); background-size: 28px 28px; }
.cta__inner { position: relative; z-index: 1; }.cta .section-heading__en { color: rgba(255,255,255,.75); }.cta h2 { margin-bottom: 18px; font-family: var(--font-round); font-size: 42px; }.cta p { margin-bottom: 32px; }.cta small { display: block; margin-top: 20px; }
.cta__decor { position: absolute; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }.cta__decor--left { bottom: -120px; left: -80px; }.cta__decor--right { top: -120px; right: -40px; }
.contact__inner { display: grid; grid-template-columns: .75fr 1.25fr; align-items: start; gap: 85px; }.contact__intro { position: sticky; top: 135px; }.contact__intro > p { color: var(--muted); }.contact__note { margin-top: 35px; padding: 22px; border-radius: 14px; color: #537382; font-size: 12px; background: var(--blue-pale); }
.contact-form { display: grid; padding: 44px 50px; border-radius: var(--radius); background: #f6fafb; gap: 26px; }.contact-form label { display: grid; gap: 8px; }.contact-form label > span:first-child { color: var(--ink-dark); font-size: 13px; font-weight: 600; }.contact-form em { margin-left: 8px; padding: 2px 7px; border-radius: 3px; color: #fff; font-size: 9px; font-style: normal; background: var(--orange); }.contact-form label small { color: var(--muted); font-weight: 400; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea { width: 100%; padding: 16px 18px; border: 1px solid #d6e3e7; border-radius: 9px; outline: none; color: var(--ink); background: #fff; transition: border .2s, box-shadow .2s; }.contact-form textarea { resize: vertical; }.contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(120,185,215,.16); }
.contact-form__privacy { display: flex !important; align-items: center; justify-content: center; grid-template-columns: auto 1fr; gap: 10px !important; }.contact-form__privacy input { width: 18px; height: 18px; accent-color: var(--blue); }.contact-form__privacy a { text-decoration: underline; }
.button--submit { width: 100%; }.contact-form__demo { margin: 0; color: #4c8c77; font-size: 13px; text-align: center; }

/*==================================================
    Contact Form 7 調整
==================================================*/

/* ▼ CF7が追加するラッパーをレイアウトに馴染ませる */
.contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* ▼ CF7が自動で生成するpタグの余白を削除 */
.contact-form p {
  margin: 0;
}

/* ▼ 各項目の余計な改行・高さを抑える */
.contact-form br {
  display: none;
}

/* ▼ 入力欄は元デザインと同じ幅 */
.contact-form .wpcf7-form-control {
  width: 100%;
  box-sizing: border-box;
}

/* ▼ テキスト・メール・電話・テキストエリア */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #d6e3e7;
  border-radius: 9px;
  outline: none;
  color: var(--ink);
  background: #fff;
  transition: border .2s, box-shadow .2s;
}

/* ▼ textarea */
.contact-form textarea {
  resize: vertical;
}

/* ▼ フォーカス */
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(120,185,215,.16);
}

/* ▼ 必須エラー */
.contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #d95c54;
  font-size: 11px;
}

/* ▼ プライバシーポリシー */
.contact-form .contact-form__privacy {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px !important;
}

/* ▼ acceptanceタグの余計なラッパーを横並び化 */
.contact-form .contact-form__privacy .wpcf7-form-control-wrap,
.contact-form .contact-form__privacy .wpcf7-acceptance,
.contact-form .contact-form__privacy .wpcf7-list-item,
.contact-form .contact-form__privacy .wpcf7-list-item label {
  display: inline-flex;
  width: auto;
  align-items: center;
  margin: 0;
  gap: 8px;
}

/* ▼ チェックボックス */
.contact-form .contact-form__privacy input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
}

/* ▼ プライバシーリンク */
.contact-form .contact-form__privacy a {
  text-decoration: underline;
}

/* ▼ 送信ボタン */
.contact-form input[type="submit"] {
  width: 100%;
  cursor: pointer;
}

/* ▼ CF7の送信中スピナーを非表示 */
.contact-form .wpcf7-spinner {
  display: none;
}

/* ▼ 送信結果メッセージ */
.contact-form .wpcf7-response-output {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
}

/* ▼ CF7による余計な縦余白を防ぐ */
.contact-form .wpcf7 {
  margin: 0;
}


/*==================================================
    Contact Form 7 調整
==================================================*/

/* ▼ CF7が追加するラッパーをレイアウトに馴染ませる */
.contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* ▼ CF7が自動で生成するpタグの余白を削除 */
.contact-form p {
  margin: 0;
}

/* ▼ 各項目の余計な改行・高さを抑える */
.contact-form br {
  display: none;
}

/* ▼ 入力欄は元デザインと同じ幅 */
.contact-form .wpcf7-form-control {
  width: 100%;
  box-sizing: border-box;
}

/* ▼ テキスト・メール・電話・テキストエリア */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #d6e3e7;
  border-radius: 9px;
  outline: none;
  color: var(--ink);
  background: #fff;
  transition: border .2s, box-shadow .2s;
}

/* ▼ textarea */
.contact-form textarea {
  resize: vertical;
}

/* ▼ フォーカス */
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(120,185,215,.16);
}

/* ▼ 必須エラー */
.contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #d95c54;
  font-size: 11px;
}

/* ▼ プライバシーポリシー */
.contact-form .contact-form__privacy {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px !important;
}

/* ▼ acceptanceタグの余計なラッパーを横並び化 */
.contact-form .contact-form__privacy .wpcf7-form-control-wrap,
.contact-form .contact-form__privacy .wpcf7-acceptance,
.contact-form .contact-form__privacy .wpcf7-list-item,
.contact-form .contact-form__privacy .wpcf7-list-item label {
  display: inline-flex;
  width: auto;
  align-items: center;
  margin: 0;
  gap: 8px;
}

/* ▼ チェックボックス */
.contact-form .contact-form__privacy input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
}

/* ▼ プライバシーリンク */
.contact-form .contact-form__privacy a {
  text-decoration: underline;
}

/* ▼ 送信ボタン */
.contact-form input[type="submit"] {
  width: 100%;
  cursor: pointer;
}

/* ▼ CF7の送信中スピナーを非表示 */
.contact-form .wpcf7-spinner {
  display: none;
}

/* ▼ 送信結果メッセージ */
.contact-form .wpcf7-response-output {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
}

/* ▼ CF7による余計な縦余白を防ぐ */
.contact-form .wpcf7 {
  margin: 0;
}


/*==================================================
    フッター
==================================================*/
.site-footer { padding: 70px 0 24px; color: #dce8ec; background: #294655; }.site-footer__main { display: grid; grid-template-columns: 330px 1fr; padding-bottom: 55px; gap: 80px; }.site-footer__brand img { width: 140px; height: 92px; object-fit: cover; transform: scale(1.35); filter: brightness(0) invert(1); opacity: .95; }.site-footer__brand p { margin: 20px 0 0; font-family: var(--font-round); font-size: 14px; line-height: 1.8; }
.site-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }.site-footer__nav > div { display: grid; align-content: start; gap: 11px; }.site-footer__nav a { color: #dce8ec; font-size: 12px; }.site-footer__nav a:hover { color: #fff; }
.site-footer__notice { padding: 16px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; color: #b9cbd2; font-size: 11px; text-align: center; }.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 25px; color: #9fb5bf; font-size: 10px; }.site-footer__bottom a { letter-spacing: .1em; }

/*==================================================
    PC・タブレット表示の補正
==================================================*/
@media (max-width: 1250px) {
  .site-header__inner { padding-inline: 18px; gap: 13px; }
  .global-nav { gap: 12px; }
  .global-nav a { font-size: 11px; }
  .button--header { padding-inline: 16px; }
  .reason-card { padding-inline: 20px; }
}
@media (max-width: 1020px) {
  .global-nav a:nth-child(6), .global-nav a:nth-child(7), .global-nav a:nth-child(8), .global-nav a:nth-child(9) { display: none; }
  .hero__inner { grid-template-columns: 1fr 1fr; }
  .reason-card { min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/*==================================================
    スケジュールPDFモーダル
==================================================*/
body.schedule-modal-open {
  overflow: hidden;
}

.schedule-modal[hidden] {
  display: none;
}

.schedule-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 48px);
  box-sizing: border-box;
  background: rgba(9, 38, 59, .7);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}

.schedule-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.schedule-modal__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(88vw, 1160px);
  height: min(88dvh, 900px);
  overflow: hidden;
  border: 1px solid rgba(31, 101, 139, .16);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(3, 31, 49, .28);
  transform: translateY(10px) scale(.99);
  transition: transform .28s ease;
}

.schedule-modal.is-open .schedule-modal__panel {
  transform: translateY(0) scale(1);
}

.schedule-modal__header,
.schedule-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
}

.schedule-modal__header {
  border-bottom: 1px solid #dce8ee;
}

.schedule-modal__label {
  display: block;
  margin-bottom: 3px;
  color: #2b91cf;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}

.schedule-modal__header h2 {
  margin: 0;
  color: #12364e;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
}

.schedule-modal__close {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid #d4e3ea;
  border-radius: 50%;
  background: #f5fafc;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}

.schedule-modal__close::before,
.schedule-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #12364e;
}

.schedule-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.schedule-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.schedule-modal__close:hover { border-color: #9fc6d8; background: #eaf5f8; }
.schedule-modal__close:focus-visible { outline: 3px solid rgba(43, 145, 207, .3); outline-offset: 3px; }

.schedule-modal__viewer {
  min-height: 0;
  background: #edf3f6;
}

.schedule-modal__viewer iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.schedule-modal__classes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 38px);
  padding: 14px 24px;
  border-top: 1px solid #dce8ee;
  color: #294e63;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  background: linear-gradient(90deg, #f4fbfd, #fffaf6);
}

.schedule-modal__classes span::first-letter {
  color: #ef7d49;
}

.schedule-modal__footer {
  border-top: 1px solid #dce8ee;
  color: #667f8e;
  font-size: 13px;
}

.schedule-modal__footer p { margin: 0; }

.schedule-modal__external {
  flex: 0 0 auto;
  color: #176f9e;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.schedule-modal__external:hover { color: #ff7845; }

@media (prefers-reduced-motion: reduce) {
  .schedule-modal,
  .schedule-modal__panel {
    transition-duration: .08s;
  }

  .schedule-modal__panel { transform: none; }
}

/*==================================================
    ブランドカラーの調整
==================================================*/
:root {
  --ink: #263f55;
  --ink-dark: #102f49;
  --blue: #168bd2;
  --blue-pale: #e8f6ff;
  --mint: #1bbca7;
  --mint-pale: #e2faf6;
  --orange: #ff7b42;
  --orange-dark: #e9612b;
  --yellow-bright: #ffd447;
  --pink: #f66e91;
  --turquoise: #17bfc4;
}
.site-header { box-shadow: 0 8px 24px rgba(16,47,73,.06); }
.site-header::after { content: ""; position: absolute; right: 0; bottom: -3px; left: 0; height: 3px; background: linear-gradient(90deg, var(--orange) 0 20%, var(--yellow-bright) 20% 40%, var(--turquoise) 40% 60%, var(--blue) 60% 80%, var(--pink) 80%); }
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::before { content: ""; position: absolute; z-index: -1; top: -50%; left: -80%; width: 50%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-20deg); transition: left .55s ease; }
.button:hover::before { left: 135%; }
.button--header { background: linear-gradient(135deg, var(--orange), #ff9b44); box-shadow: 0 8px 18px rgba(255,123,66,.25); }

.hero { background: linear-gradient(112deg, #fffdf4 0 53%, #e8f8ff 53% 100%); }
.hero::before { content: ""; position: absolute; top: 0; left: 0; width: 210px; height: 210px; opacity: .4; background: repeating-conic-gradient(#ffd447 0 25%, transparent 0 50%) 0 0 / 38px 38px; mask-image: linear-gradient(135deg,#000,transparent 72%); }
.hero::after { content: ""; position: absolute; right: 3%; bottom: 7%; width: 125px; height: 125px; border: 24px dotted rgba(246,110,145,.25); border-radius: 50%; animation: slow-spin 24s linear infinite; }
.hero__shape { position: absolute; z-index: 1; border-radius: 50%; transform: translateY(var(--parallax-y, 0)); pointer-events: none; }
.hero__shape--one { top: 112px; left: 47%; width: 84px; height: 84px; border: 18px solid rgba(255,212,71,.58); animation: float-y 4.6s ease-in-out infinite; }
.hero__shape--two { right: 8%; bottom: 118px; width: 45px; height: 45px; background: var(--pink); box-shadow: 28px -28px 0 -12px var(--yellow-bright); animation: float-y 3.8s .6s ease-in-out infinite reverse; }
.hero h1 strong { color: var(--blue); }

.section-heading__en { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); }
.section-heading__en::before, .section-heading__en::after { content: ""; width: 18px; height: 5px; border-radius: 999px; background: var(--yellow-bright); transform: rotate(-8deg); }
.section-heading--center .section-heading__en { justify-content: center; }
.section-heading__line { width: 72px; height: 6px; background: linear-gradient(90deg,var(--orange) 0 33%,var(--yellow-bright) 33% 66%,var(--turquoise) 66%); }
.section--about { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fffaf0 100%); }
.section--about::before { content: ""; position: absolute; top: 80px; right: -55px; width: 190px; height: 190px; border: 36px solid rgba(23,191,196,.12); border-radius: 42% 58% 65% 35%; animation: blob 9s ease-in-out infinite; }
.about-visual::after { content: "LEARN & GROW"; position: absolute; top: -19px; right: -30px; padding: 10px 18px; border-radius: 999px; color: var(--ink-dark); background: var(--yellow-bright); font-size: 10px; font-weight: 800; letter-spacing: .14em; transform: rotate(5deg); }
.about-visual__accent { background: linear-gradient(135deg, var(--turquoise), #0fa587); box-shadow: 0 12px 24px rgba(27,188,167,.28); transform: translateY(var(--parallax-y, 0)) rotate(-3deg); }
.photo-placeholder--about { border: 7px solid #fff; box-shadow: 0 22px 40px rgba(16,47,73,.15); }
.photo-placeholder--about img { object-position: 50% center; }

.style-fit { position: relative; overflow: hidden; padding: 105px 0; color: #fff; background: linear-gradient(130deg,#102f49 0%,#164f76 48%,#087f91 100%); }
.style-fit::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(circle at 2px 2px,#fff 1px,transparent 0); background-size: 30px 30px; }
.style-fit__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 250px 1fr; align-items: center; gap: 80px; }
.style-fit__label { display: grid; align-content: center; width: 210px; height: 210px; padding: 30px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; text-align: center; background: rgba(255,255,255,.1); box-shadow: 0 0 0 14px rgba(255,212,71,.15); transform: rotate(-5deg); }
.style-fit__label span { color: var(--yellow-bright); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.style-fit__label strong { margin-top: 7px; font-family: var(--font-round); font-size: 25px; }
.style-fit__content > p:first-child { margin-bottom: 8px; color: #aeeeff; font-weight: 700; letter-spacing: .1em; }
.style-fit__content h2 { margin-bottom: 22px; font-family: var(--font-round); font-size: 35px; line-height: 1.65; }
.style-fit__content h2 em { position: relative; color: var(--yellow-bright); font-style: normal; }
.style-fit__content h2 em::after { content: ""; position: absolute; right: 0; bottom: -7px; left: 0; height: 5px; border-radius: 5px; background: linear-gradient(90deg,var(--yellow-bright),var(--orange)); }
.style-fit__content > p:last-of-type { max-width: 790px; color: #dcecf2; }
.style-fit__choices { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
.style-fit__choices span { padding: 9px 16px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; color: var(--ink-dark); background: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.style-fit__choices span:nth-child(2) { background: var(--yellow-bright); }.style-fit__choices span:nth-child(3) { background: #a6f1e5; }
.style-fit__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr));
  width: min(100%, 420px);
}
.style-fit__choices span {
  display: grid;
  place-items: center;
  text-align: center;
}

.impact-strip { position: relative; z-index: 3; padding: 36px 0; color: #fff; background: var(--ink-dark); }
.impact-strip::before { content: ""; position: absolute; inset: 0; opacity: .12; background: repeating-linear-gradient(135deg, transparent 0 22px, #fff 23px 25px); }
.impact-strip__inner { position: relative; display: grid; grid-template-columns: repeat(4,1fr); }
.impact-strip__inner > div { display: flex; align-items: center; justify-content: center; gap: 16px; }
.impact-strip__inner > div + div { border-left: 1px dashed rgba(255,255,255,.34); }
.impact-strip strong { color: var(--yellow-bright); font-family: var(--font-round); font-size: 42px; line-height: 1; }
.impact-strip strong small { margin-left: 4px; color: #fff; font-size: 12px; }
.impact-strip p { margin: 0; font-size: 12px; line-height: 1.65; }

.recommend { position: relative; overflow: hidden; padding: 76px 0 112px; background: linear-gradient(135deg, #11aeca 0%, #168ed2 100%); }
.recommend::before, .recommend::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.16); }
.recommend::before { top: 35px; left: 5%; width: 105px; height: 105px; box-shadow: 85px 55px 0 -26px rgba(255,212,71,.5); }
.recommend::after { right: 4%; bottom: -40px; width: 180px; height: 180px; border: 2px dashed rgba(255,255,255,.5); background: transparent; animation: slow-spin 28s linear infinite reverse; }
.recommend__inner { position: relative; z-index: 1; border: 8px solid rgba(255,255,255,.32); border-radius: 34px; background: #fff; box-shadow: 0 24px 50px rgba(6,73,113,.22); }
.recommend__title { background: linear-gradient(145deg, #102f49, #164d71); }
.recommend__list li { border-bottom-color: #d9ebef; transition: color .25s, transform .25s; }
.recommend__list li:hover { color: var(--blue); transform: translateX(7px); }
.recommend__list span { background: linear-gradient(135deg,var(--orange),var(--pink)); }

#reasons { position: relative; overflow: hidden; background: #ffe27b; }
#reasons::before, #reasons::after { content: ""; position: absolute; width: 180px; height: 180px; opacity: .28; background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 36px 36px; }
#reasons::before { top: 0; left: 0; mask-image: linear-gradient(135deg,#000,transparent 70%); }
#reasons::after { right: 0; bottom: 0; transform: rotate(180deg); mask-image: linear-gradient(135deg,#000,transparent 70%); }
#reasons .container { position: relative; z-index: 1; }
.reason-card { border: 2px solid rgba(255,255,255,.8); box-shadow: 0 13px 0 rgba(16,47,73,.08), 0 18px 32px rgba(49,88,105,.08); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.reason-card:hover { transform: translateY(-12px) rotate(-1deg); box-shadow: 0 18px 0 rgba(16,47,73,.06), 0 28px 42px rgba(49,88,105,.15); }
.reason-card .line-icon { background: currentColor; color: #fff; border: 0; box-shadow: 0 8px 0 rgba(16,47,73,.09); }

.instructor { position: relative; overflow: hidden; background: linear-gradient(140deg, #fff 0 58%, #e8faf6 58% 100%); }
.instructor::before { content: ""; position: absolute; right: 4%; bottom: 6%; width: 150px; height: 150px; border: 3px dashed rgba(22,139,210,.22); border-radius: 50%; animation: slow-spin 22s linear infinite; }
.instructor__messages { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.instructor__messages article { padding: 20px; border: 2px solid #dcebf0; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(16,47,73,.07); }
.instructor__messages article:nth-child(2) { border-color: #d9d1ef; background: #fbf9ff; }
.instructor__messages span { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.instructor__messages article:nth-child(2) span { color: #8a69ca; }
.instructor__messages h3 { margin: 5px 0 9px; font-family: var(--font-round); font-size: 17px; }
.instructor__messages p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }

#plans { position: relative; overflow: hidden; background: linear-gradient(145deg,#e5f7ff 0%,#f3fbff 48%,#e8fbf5 100%); }
#plans::after { content: ""; position: absolute; top: 18%; right: -50px; width: 160px; height: 160px; border-radius: 40% 60%; background: rgba(246,110,145,.12); transform: rotate(28deg); }
.plan-card { border-width: 3px; transition: transform .35s, box-shadow .35s; }
.plan-card:hover { transform: translateY(-10px); box-shadow: 0 24px 50px rgba(16,47,73,.16); }
.plan-card--group { border-color: #8ad6f2; }
.plan-card--private { border-color: #c2b4ed; }
.plan-card__price strong { color: var(--blue); }
.lesson-methods > div span { transition: transform .25s; }
.lesson-methods > div span:hover { transform: translateY(-6px) rotate(-1deg); }

#schools { position: relative; overflow: hidden; }
#schools::before { content: ""; position: absolute; top: 50px; left: 2%; width: 90px; height: 90px; border: 20px dotted rgba(255,123,66,.18); border-radius: 50%; }
.school-card { border-width: 2px; }
.school-card:nth-child(1) { border-top: 7px solid var(--blue); }.school-card:nth-child(2) { border-top: 7px solid var(--turquoise); }.school-card:nth-child(3) { border-top: 7px solid var(--pink); }
.school-card:hover { transform: translateY(-9px) rotate(.5deg); }

.flow { position: relative; overflow: hidden; background: linear-gradient(120deg, #e0faf3, #e7f8ff); }
.flow::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(circle at 2px 2px, #1bbca7 1px, transparent 0); background-size: 32px 32px; }
.flow .container { position: relative; z-index: 1; }
.flow-list .line-icon { transition: transform .3s, color .3s, background .3s; }
.flow-list li:hover .line-icon { color: #fff; background: var(--orange); transform: scale(1.12) rotate(-6deg); }

.gallery { position: relative; overflow: hidden; background: #fff8e6; }
.gallery::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 14px; background: linear-gradient(90deg,var(--orange),var(--yellow-bright),var(--turquoise),var(--blue),var(--pink)); }
.gallery-grid .photo-placeholder { border: 5px solid #fff; box-shadow: 0 14px 30px rgba(16,47,73,.13); transition: transform .4s, box-shadow .4s; }
.gallery-grid .photo-placeholder:hover { z-index: 2; transform: scale(1.035) rotate(-1deg); box-shadow: 0 24px 40px rgba(16,47,73,.22); }
.gallery-grid__main img { object-position: 48% center; }
.gallery-grid__remote img { object-position: 58% center; }
.gallery-grid__consult img { object-position: 50% center; }
.gallery-grid__lesson img { object-position: 35% center; }
.gallery-grid__smile img { object-position: center 32%; }
.gallery-grid__caption { background: var(--ink-dark); }

.youtube { position: relative; overflow: hidden; background: linear-gradient(135deg, #102f49 0%, #134f76 55%, #087d95 100%); }
.youtube::before { content: ""; position: absolute; top: -110px; right: -90px; width: 360px; height: 360px; border: 70px dotted rgba(255,212,71,.18); border-radius: 50%; animation: slow-spin 35s linear infinite; }
.youtube .container { position: relative; z-index: 1; }
.video-card { transition: transform .3s; }
.video-card:hover { transform: translateY(-9px); }
.video-card__thumb { border: 5px solid rgba(255,255,255,.8); box-shadow: 0 18px 32px rgba(0,0,0,.18); }
.video-card:hover .play-button { transform: scale(1.13); background: var(--yellow-bright); }

/* ▼ YouTubeサムネイル */
.video-card__thumb {
  display: block;
  border-width: 3px;
  background: #eef4f6;
}
.video-card__thumb::before { content: none; }
.video-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.video-card:hover .video-card__thumb img {
  transform: scale(1.035);
  filter: saturate(1.04) brightness(1.02);
}
.video-card h3 {
  min-height: 52px;
  margin-top: 18px;
  font-size: 16px;
  letter-spacing: .02em;
}

#blog { position: relative; overflow: hidden; }
#blog::after { content: ""; position: absolute; right: -50px; bottom: 50px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,212,71,.28); box-shadow: -45px -55px 0 -18px rgba(246,110,145,.18); }
.blog-card { border-width: 2px; }
.blog-card:hover { transform: translateY(-10px) rotate(.5deg); box-shadow: 0 25px 45px rgba(16,47,73,.16); }

#faq { position: relative; background: linear-gradient(135deg,#e6f8ff,#eefcf8); }
.faq-item { border: 2px solid #d8edf5; transition: border-color .25s, transform .25s; }
.faq-item:hover { border-color: var(--blue); transform: translateX(5px); }
.faq-item[open] { border-color: var(--turquoise); box-shadow: 0 12px 28px rgba(16,47,73,.09); }
.cta { background: linear-gradient(110deg, #168bd2, #17bfc4 55%, #16a878); }
.contact { position: relative; background: linear-gradient(180deg,#fff,#fff9ea); }
.contact-form { border: 3px solid #e1eef2; box-shadow: 0 24px 50px rgba(16,47,73,.1); background: #fff; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea { border-width: 2px; background: #fbfdfe; }
.site-footer { background: var(--ink-dark); }

/* ▼ 共通アニメーション */
.reveal { opacity: 0; transform: translateY(34px) scale(.985); transition: opacity .75s ease var(--reveal-delay,0ms), transform .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.reason-card.reveal:nth-child(even), .school-card.reveal:nth-child(even), .blog-card.reveal:nth-child(even) { transform: translateY(34px) translateX(20px) rotate(1deg); }
.reason-card.reveal.is-visible:nth-child(even), .school-card.reveal.is-visible:nth-child(even), .blog-card.reveal.is-visible:nth-child(even) { transform: none; }
@keyframes float-y { 0%,100% { transform: translateY(var(--parallax-y,0)); } 50% { transform: translateY(calc(var(--parallax-y,0) - 12px)); } }
@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes blob { 0%,100% { border-radius: 42% 58% 65% 35%; transform: rotate(0); } 50% { border-radius: 60% 40% 38% 62%; transform: rotate(18deg); } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .hero::after, .hero__shape, .hero__mini-card, .recommend::after, .instructor::before, .youtube::before { animation: none !important; }
}

/*==================================================
    メインビジュアル・エフくんの調整
==================================================*/
.hero__copy { align-self: center; padding-bottom: 88px; }
.hero__visual { min-width: 0; }
.hero-slider { position: absolute; top: 0; right: -80px; bottom: 58px; left: 0; overflow: hidden; border: 9px solid #fff; border-radius: 190px 28px 90px 190px; background: #dbeaf0; box-shadow: 0 24px 50px rgba(16,47,73,.2); transform: rotate(1.2deg); }
.hero-slider::after { content: ""; position: absolute; z-index: 3; inset: 18px; border: 1px solid rgba(255,255,255,.48); border-radius: inherit; pointer-events: none; }
.hero-slider__track, .hero-slider__slide { position: absolute; inset: 0; }
.hero-slider__slide { margin: 0; opacity: 0; visibility: hidden; transform: scale(1.06); transition: opacity 1s ease, visibility 1s, transform 6s ease; }
.hero-slider__slide.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.hero-slider__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slider__slide:nth-child(1) img { object-position: 52% center; }
.hero-slider__slide:nth-child(2) img { object-position: 58% center; }
.hero-slider__slide:nth-child(3) img { object-position: 50% center; }
.hero-slider__slide figcaption { position: absolute; z-index: 2; right: 24px; bottom: 22px; max-width: 330px; padding: 13px 19px; border: 1px solid rgba(255,255,255,.75); border-radius: 14px; color: #fff; background: rgba(16,47,73,.75); font-size: 13px; font-weight: 600; line-height: 1.55; backdrop-filter: blur(8px); }
.hero-slider__slide figcaption span { display: block; color: #88e5e4; font-size: 8px; letter-spacing: .16em; }
.hero-slider__controls { position: absolute; z-index: 5; bottom: 22px; left: 32px; display: flex; gap: 8px; }
.hero-slider__controls button { width: 11px; height: 11px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; transition: width .25s, border-radius .25s, background .25s; }
.hero-slider__controls button.is-active { width: 30px; border-radius: 999px; background: var(--yellow-bright); }

.mascot-guide { position: relative; display: flex; align-items: center; width: fit-content; gap: 8px; }
.mascot-guide img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 8px 15px rgba(16,47,73,.16)); transition: transform .35s; }
.mascot-guide:hover img { transform: translateY(-5px) rotate(-3deg); }
.mascot-guide p { position: relative; margin: 0; padding: 9px 13px; border: 2px solid #d9ecf5; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(16,47,73,.1); font-size: 10px; line-height: 1.4; }
.mascot-guide p::before { content: ""; position: absolute; top: 50%; left: -7px; width: 11px; height: 11px; border-bottom: 2px solid #d9ecf5; border-left: 2px solid #d9ecf5; background: #fff; transform: translateY(-50%) rotate(45deg); }
.mascot-guide p strong, .mascot-guide p span { display: block; }
.mascot-guide p strong { color: var(--blue); font-size: 9px; }
.mascot-guide p span { color: var(--ink-dark); font-weight: 700; white-space: nowrap; }
.mascot-guide--hero { position: absolute; z-index: 6; right: 12px; bottom: 4px; }
.mascot-guide--hero img { width: 82px; height: 82px; }

.style-fit__content h2 strong { display: inline-block; margin-bottom: 8px; padding: 5px 14px; border-radius: 8px; color: var(--ink-dark); background: var(--yellow-bright); font-size: 29px; transform: rotate(-1deg); }
.style-fit__choices span:nth-child(4) { background: #ffd8e2; }
.recommend__inner { position: relative; }
.mascot-guide--recommend { position: absolute; z-index: 5; right: 18px; bottom: 12px; }
.mascot-guide--recommend img { width: 76px; height: 76px; }
.recommend__list { padding-right: 180px; padding-bottom: 78px; }

.faq-container { position: relative; }
.mascot-guide--faq { position: absolute; z-index: 2; top: 48px; right: 20px; }
.mascot-guide--faq img { width: 105px; height: 105px; }
.mascot-guide--faq p { transform: translateY(15px); }
.cta__inner { padding-left: 150px; }
.mascot-guide--cta { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.mascot-guide--cta img { width: 142px; height: 142px; border: 5px solid rgba(255,255,255,.8); }
.mascot-guide--cta p { border-color: rgba(255,255,255,.7); }
.gallery-grid__smile { background: radial-gradient(circle,#fff 0 35%,#e8f6ff 75%); }
.gallery-grid__smile img { object-fit: contain; mix-blend-mode: multiply; }

@media (max-width: 1250px) {
  .mascot-guide--hero { right: -8px; }
  .mascot-guide--hero p { display: none; }
  .faq-container { padding-right: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide { transition: none; transform: none; }
}

/*==================================================
    ブランドデザインの調整
==================================================*/
body { background: #fcfcfb; }
.section { padding: 132px 0; }
.section-heading { margin-bottom: 62px; }
.section-heading h2 { font-size: clamp(34px,3vw,46px); letter-spacing: .02em; }
.section-heading__en { color: #2d7eaa; letter-spacing: .2em; }
.section-heading__en::before, .section-heading__en::after { width: 12px; height: 2px; background: #9bb7c7; transform: none; }
.section-heading__line { width: 52px; height: 2px; background: var(--orange); }

/* ▼ 写真を主役にしたメインビジュアル */
.hero { padding: 0; background: #f7f8f7; }
.hero::before { display: none; }
.hero .hero__inner { position: relative; display: grid; grid-template-columns: 1fr; width: 100%; max-width: none; min-height: 720px; gap: 0; }
.hero__copy, .hero__visual { grid-area: 1 / 1; }
.hero__visual { min-height: 720px; }
.hero__copy {
  z-index: 5;
  align-self: stretch;
  justify-self: start;
  width: max-content;
  max-width: min(780px, 58vw);
  padding: 94px 0 118px max(78px, calc((100vw - 1180px) / 2 + 34px));
}
.hero-slider { inset: 0; border: 0; border-radius: 0; box-shadow: 0 22px 60px rgba(18,45,64,.12); transform: none; }
.hero-slider::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.9) 34%,rgba(255,255,255,.32) 59%,rgba(255,255,255,0) 78%); pointer-events: none; }
.hero-slider::after { display: none; }
.hero h1 { margin: 24px 0 25px; font-size: clamp(45px,4vw,58px); line-height: 1.5; letter-spacing: .015em; white-space: nowrap; }
.hero__lead { width: max-content; max-width: 100%; color: #334d5d; font-size: 15px; line-height: 2.05; }
.hero__note { color: #687a84; }
.hero-slider__slide figcaption { right: 26px; bottom: 26px; border: 0; border-radius: 10px; background: rgba(13,36,52,.72); font-weight: 500; }
.hero-slider__controls { bottom: 32px; left: 58%; }
.mascot-guide--hero { right: -118px; bottom: 18px; }
.mascot-guide--hero img { width: 112px; height: 112px; border-radius: 0; object-fit: contain; mix-blend-mode: multiply; }
.mascot-guide p { border: 1px solid #dce5ea; border-radius: 10px; box-shadow: 0 8px 22px rgba(18,45,64,.08); }

/* ▼ セクション背景 */
.section--about { background: #fcfcfb; }
.section--about::before, #reasons::before, #reasons::after, #schools::before { display: none; }
.photo-placeholder--about { border: 0; border-radius: 22px; box-shadow: 0 24px 60px rgba(18,45,64,.13); }
.about-visual::after { top: -16px; right: 18px; color: #fff; background: #1a5b7e; transform: none; }
.about-visual__accent { border-radius: 12px; box-shadow: none; transform: translateY(var(--parallax-y,0)); }

.style-fit { padding: 126px 0; background: linear-gradient(135deg,#102f49,#174e6d 64%,#176c75); }
.style-fit::before { opacity: .06; }
.style-fit__label { width: 190px; height: 190px; border-color: rgba(255,255,255,.28); box-shadow: none; transform: none; }
.style-fit__content h2 { font-size: 38px; line-height: 1.7; }
.style-fit__content h2 strong { padding: 0; color: #fff; background: transparent; font-size: 38px; transform: none; }
.style-fit__content h2 em::after { height: 2px; }
.style-fit__choices span { border: 1px solid rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.08) !important; box-shadow: none; backdrop-filter: blur(8px); }

#reasons { background: #f3f6f7; }
.reason-card { grid-column: span 2; min-height: 300px; padding: 38px 34px; border: 1px solid #e4eaed; border-radius: 22px; color: #286b91; background: #fff !important; box-shadow: 0 12px 34px rgba(18,45,64,.06); }
.reason-card:nth-child(4), .reason-card:nth-child(5) { grid-column: span 3; min-height: 270px; }
.reason-card:hover { transform: translateY(-7px); box-shadow: 0 22px 48px rgba(18,45,64,.11); }
.reason-card .line-icon { width: 54px; height: 54px; margin: 20px 0 30px; border: 1px solid #cddde5; border-radius: 14px; color: #276e95; background: #f5fafc; box-shadow: none; font-size: 18px; }
.reason-card__number { color: #8fa6b2; }
.reason-card h3 { font-size: 20px; letter-spacing: .02em; }
.reason-card p { font-size: 13px; line-height: 1.95; }

/* ▼ 講師プロフィールとマスコット */
.instructor { background: #fff; }
.instructor::before { display: none; }
.instructor__content .section-heading { order: 1; margin-bottom: 28px; }
.instructor__messages { order: 3; gap: 18px; }
.instructor__messages article { padding: 25px; border: 1px solid #e1e7ea; border-radius: 16px; box-shadow: none; }

/* ▼ 教室カード */
.school-grid { gap: 28px; }
.school-card { overflow: hidden; padding: 0; border: 1px solid #e1e8eb !important; border-radius: 20px; box-shadow: 0 14px 38px rgba(18,45,64,.07); }
.school-card:hover { transform: translateY(-6px); box-shadow: 0 24px 52px rgba(18,45,64,.12); }
.school-card__visual { position: relative; overflow: hidden; height: 220px; background: #e8eef0; }
.school-card__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.school-card:nth-child(1) .school-card__visual img { object-position: 50% center; }
.school-card:nth-child(2) .school-card__visual img { object-position: 50% center; }
.school-card:nth-child(3) .school-card__visual img { object-position: 58% center; }
.school-card:hover .school-card__visual img { transform: scale(1.045); }
.school-card__visual span { position: absolute; right: 14px; bottom: 12px; padding: 4px 9px; border-radius: 5px; color: #fff; background: rgba(16,47,73,.65); font-size: 9px; backdrop-filter: blur(6px); }
.school-card__body { padding: 31px 34px 34px; }
.school-card p { min-height: 105px; }

/* ▼ エフくんの配置 */
.mascot-guide img { border-radius: 0; object-fit: contain; mix-blend-mode: multiply; }
.mascot-guide--recommend { right: 10px; bottom: 0; }
.mascot-guide--faq { right: -138px; }
.mascot-guide--cta img { border: 0; border-radius: 0; mix-blend-mode: multiply; }
.gallery-grid__smile { background: #fff; }
.gallery-grid__smile img { padding: 12px; }

.recommend { background: linear-gradient(135deg,#17698e,#168aa4); }
.recommend::before, .recommend::after { opacity: .18; }
.recommend__inner { border: 0; border-radius: 22px; box-shadow: 0 28px 65px rgba(11,45,63,.2); }
.recommend__title { background: #12394f; }
.plan-card, .blog-card, .faq-item, .contact-form { border-color: #e1e7ea; box-shadow: 0 12px 36px rgba(18,45,64,.06); }
.flow::before, .youtube::before, #blog::after { opacity: .1; }
.gallery { background: #f8f7f3; }
.gallery::before { height: 4px; }
.cta { background: linear-gradient(120deg,#153f59,#176c75); }
.cta::before { opacity: .08; }

@media (max-width: 1250px) {
  .hero__copy { width: max-content; max-width: 61vw; padding-left: 64px; }
  .mascot-guide--hero { right: -88px; }
  .mascot-guide--faq { right: 0; }
}

/*==================================================
    講師ストーリー・指導方針・メッセージ
==================================================*/
.instructor {
  isolation: isolate;
  padding: 150px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(34, 159, 176, .08), transparent 24%),
    linear-gradient(180deg, #fbfcfc 0%, #f4f7f8 52%, #fff 100%);
}
.instructor-story { width: min(1100px, calc(100% - 64px)); }
.instructor-story__kicker {
  display: flex;
  align-items: center;
  margin: 0 0 28px;
  color: #6f8998;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
}
.instructor-story__kicker span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 14px;
  border: 1px solid rgba(39, 110, 149, .24);
  border-radius: 50%;
  color: #276e95;
  letter-spacing: 0;
}
.instructor-philosophy {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  padding: 78px 260px 76px 78px;
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 20%, rgba(89, 213, 211, .2), transparent 29%),
    linear-gradient(128deg, #102f49 0%, #174d6d 62%, #176f78 100%);
  box-shadow: 0 34px 80px rgba(17, 55, 76, .18);
}
.instructor-philosophy::before {
  content: "";
  position: absolute;
  top: -110px;
  right: -80px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(255, 255, 255, .025), 0 0 0 86px rgba(255, 255, 255, .02);
}
.instructor-philosophy .instructor-story__kicker { color: #9fd8dc; }
.instructor-philosophy .instructor-story__kicker span {
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.instructor-philosophy__lead {
  position: relative;
  display: inline-block;
  margin: 4px 0 30px;
  color: #fff;
  font-family: var(--font-round);
  font-size: clamp(42px, 3.55vw, 51px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .035em;
}
.instructor-philosophy__lead::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), #f2a65f, #f0bd67);
  transform: scaleX(.98);
  transform-origin: left;
  opacity: .9;
}
.instructor-philosophy h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .035em;
}
.instructor-philosophy__note {
  max-width: 700px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  line-height: 2;
}
.instructor-philosophy.is-visible .instructor-guide {
  animation: instructor-guide-in .75s cubic-bezier(.2,.75,.25,1) .35s forwards;
}
.instructor-philosophy.is-visible .instructor-guide img {
  animation: instructor-guide-greet 1s ease-in-out 1.05s 1;
}
@keyframes instructor-guide-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes instructor-guide-greet {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  32% { transform: translate3d(0, -6px, 0) rotate(-2deg); }
  68% { transform: translate3d(0, -2px, 0) rotate(2deg); }
}
.instructor-story__connector {
  position: relative;
  height: 110px;
}
.instructor-story__connector::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 78px;
  background: linear-gradient(#b7c9d1, #6f9caf);
}
.instructor-story__connector span {
  position: absolute;
  bottom: 19px;
  left: calc(50% - 5px);
  width: 11px;
  height: 11px;
  border-right: 1px solid #6f9caf;
  border-bottom: 1px solid #6f9caf;
  transform: rotate(45deg);
}
.instructor-profile-card {
  position: relative;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  overflow: hidden;
  border: 1px solid #e0e8eb;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(18, 45, 64, .09);
}
.instructor-profile-card__heading {
  padding: 58px 52px 54px;
  border-right: 1px solid #e4eaed;
}
.instructor-profile-card__heading .instructor-story__kicker { margin-bottom: 42px; }
.instructor-profile-card__eyebrow {
  margin: 0 0 12px;
  color: #2b769d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}
.instructor-profile-card__heading h3 {
  margin: 0 0 24px;
  color: #17384c;
  font-family: var(--font-round);
  font-size: 28px;
  line-height: 1.65;
}
.instructor-profile-card__heading > p:last-child {
  margin: 0;
  color: #60747f;
  font-size: 13px;
  line-height: 2;
}
.instructor-message-block {
  display: grid;
  grid-template-columns: .42fr 1.58fr;
  align-items: start;
  gap: 70px;
}
.instructor-message-block__heading { padding-top: 16px; }
.instructor-message-block__heading h3 {
  margin: 0 0 24px;
  color: #17384c;
  font-family: var(--font-round);
  font-size: 34px;
  line-height: 1.6;
}
.instructor-message-block__heading > p:last-child {
  color: #687c87;
  font-size: 13px;
  line-height: 2;
}
.instructor-message-block .instructor__messages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  gap: 20px;
}
.instructor-message-block .instructor-message-card {
  position: relative;
  overflow: hidden;
  min-height: 370px;
  padding: 38px 36px;
  border: 1px solid #dfe8eb;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(18, 45, 64, .07);
}
.instructor-message-card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(38, 137, 170, .06);
}
.instructor-message-card--experienced::after { background: rgba(241, 137, 70, .08); }
.instructor-message-card__top {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  gap: 17px;
}
.instructor-message-card__icon {
  display: grid;
  flex: 0 0 56px;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  color: #237c9f;
  background: #e9f7f7;
}
.instructor-message-card--experienced .instructor-message-card__icon {
  color: #db7740;
  background: #fff2e9;
}
.instructor-message-card__icon svg {
  width: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.instructor-message-card__top small {
  color: #78909c;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
}
.instructor-message-card__top h4 {
  margin: 4px 0 0;
  color: #17384c;
  font-family: var(--font-round);
  font-size: 22px;
}
.instructor-message-block .instructor-message-card > p {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: #5e737f;
  font-size: 13px;
  line-height: 2;
}
.instructor-message-block .instructor-message-card .instructor-message-card__emphasis {
  margin: 22px 0;
  padding: 15px 0 15px 19px;
  border-left: 3px solid #28a1aa;
  color: #173e54;
  font-family: var(--font-round);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}
.instructor-message-block .instructor-message-card--experienced .instructor-message-card__emphasis {
  border-color: var(--orange);
}

@media (max-width: 980px) {
  .instructor-philosophy { padding-right: 210px; padding-left: 54px; }
  .instructor-profile-card { grid-template-columns: 1fr; }
  .instructor-profile-card__heading { border-right: 0; border-bottom: 1px solid #e4eaed; }
  .instructor-message-block { grid-template-columns: 1fr; gap: 35px; }
}

/* ▼ 講師の歩み */
.instructor-profile-card {
  display: block;
  padding: 0 0 34px;
  background: #f7f9fa;
}
.instructor-profile-card__heading {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  padding: 62px 64px 54px;
  border-right: 0;
  border-bottom: 1px solid #e1e8eb;
  column-gap: 70px;
}
.instructor-profile-card__heading .instructor-story__kicker {
  grid-column: 1 / -1;
  margin-bottom: 34px;
}
.instructor-profile-card__eyebrow { align-self: start; margin-top: 8px; }
.instructor-profile-card__heading h3 { margin-top: 0; }
.instructor-profile-card__heading > p:last-child {
  grid-column: 2;
  max-width: 560px;
}
.instructor-journey {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 34px;
  gap: 24px;
}
.instructor-journey__item {
  overflow: hidden;
  border: 1px solid #e0e7ea;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(18, 45, 64, .055);
  transition: transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .45s ease;
}
.instructor-journey__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(18, 45, 64, .11);
}
.instructor-journey__item figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.62 / 1;
  margin: 0;
  background: #dae4e7;
}
.instructor-journey__item figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(10, 35, 51, .32));
  pointer-events: none;
}
.instructor-journey__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.instructor-journey__item:hover img { transform: scale(1.035); }
.instructor-journey__item:nth-child(1) img { object-position: center 56%; }
.instructor-journey__item:nth-child(2) img { object-position: center 52%; }
.instructor-journey__item:nth-child(3) img { object-position: center center; }
.instructor-journey__item:nth-child(4) img { object-position: center 48%; }
.instructor-journey__copy { min-height: 285px; padding: 30px 32px 34px; }
.instructor-journey__copy > span {
  display: block;
  margin-bottom: 14px;
  color: #7b939f;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
}
.instructor-journey__copy .instructor-journey__meta {
  margin: 0 0 13px;
  color: #24799d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
}
.instructor-journey__meta strong {
  margin-left: 5px;
  color: #ed7f49;
  font-family: var(--font-round);
  font-size: 19px;
}
.instructor-journey__copy h4 {
  margin: 0 0 17px;
  color: #17384c;
  font-family: var(--font-round);
  font-size: 24px;
  line-height: 1.6;
}
.instructor-journey__copy > p:last-child {
  margin: 0;
  color: #687c87;
  font-size: 12px;
  line-height: 1.95;
}
.instructor-profile-card__closing {
  margin: 4px 34px 0;
  padding: 22px 28px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(105deg, #173e57, #1e7780);
  font-family: var(--font-round);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .06em;
}
.instructor-profile-card__closing span {
  margin-right: 16px;
  color: #9cd8dc;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: .18em;
}

@media (max-width: 980px) {
  .instructor-profile-card__heading { grid-template-columns: 1fr; padding: 52px 45px; }
  .instructor-profile-card__heading > p:last-child { grid-column: 1; }
  .instructor-profile-card__eyebrow { margin-top: 0; }
  .instructor-journey { grid-template-columns: 1fr; }
}

/*==================================================
    選ばれる理由のカードデザイン
==================================================*/
#reasons {
  padding: 145px 0 155px;
  background:
    radial-gradient(circle at 92% 8%, rgba(234, 170, 76, .12), transparent 22%),
    linear-gradient(180deg, #f5f7f7 0%, #edf2f3 100%);
}
#reasons .container { width: min(1200px, calc(100% - 64px)); }
.reason-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  margin-bottom: 68px;
  column-gap: 70px;
}
.reason-heading .section-heading__en { grid-column: 1 / -1; margin-bottom: 19px; justify-self: start; }
.reason-heading h2 { margin: 0; text-align: left; }
.reason-heading > p:last-child {
  margin: 0 0 3px;
  color: #617783;
  font-size: 13px;
  line-height: 2;
}
.reason-experience {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.reason-experience .reason-card {
  position: relative;
  grid-column: auto;
  overflow: hidden;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(222, 231, 234, .95);
  border-radius: 24px;
  color: #17384c;
  background: #fff !important;
  box-shadow: 0 17px 44px rgba(18, 45, 64, .075);
  transition: transform .5s cubic-bezier(.2,.75,.2,1), box-shadow .5s ease;
}
.reason-experience .reason-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 29px 58px rgba(18, 45, 64, .14);
}
.reason-card__media {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #dbe5e8;
}
.reason-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11, 37, 52, .16));
  pointer-events: none;
}
.reason-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.reason-card:hover .reason-card__media img { transform: scale(1.04); }
.reason-card__content { padding: 31px 32px 34px; }
.reason-experience .reason-card__number {
  position: static;
  display: block;
  margin-bottom: 17px;
  color: #2c819f;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  opacity: 1;
}
.reason-experience .reason-card h3 {
  margin: 0 0 17px;
  color: #17384c;
  font-family: var(--font-round);
  font-size: 23px;
  line-height: 1.65;
  letter-spacing: .015em;
}
.reason-experience .reason-card p {
  margin: 0;
  color: #667b86;
  font-size: 12px;
  line-height: 1.95;
}
.reason-card--lead {
  grid-column: span 7 !important;
  height: 590px;
}
.reason-card--lead .reason-card__media,
.reason-card--setup .reason-card__media {
  position: absolute;
  inset: 0;
  height: auto;
}
.reason-card--lead .reason-card__media::after,
.reason-card--setup .reason-card__media::after {
  background: linear-gradient(180deg, rgba(8, 29, 43, .01) 18%, rgba(8, 29, 43, .18) 48%, rgba(8, 29, 43, .91) 100%);
}
.reason-card--lead .reason-card__media img {
  object-position: center 48%;
  transform: scale(1.12);
}
.reason-card--lead:hover .reason-card__media img { transform: scale(1.16); }
.reason-card--setup .reason-card__media img { object-position: center 42%; }
.reason-card--lead .reason-card__content,
.reason-card--setup .reason-card__content {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 48px 48px 44px;
}
.reason-experience .reason-card--lead .reason-card__number,
.reason-experience .reason-card--setup .reason-card__number { color: #8ed8d8; }
.reason-experience .reason-card--lead h3,
.reason-experience .reason-card--setup h3 {
  max-width: 590px;
  color: #fff;
  font-size: 31px;
  line-height: 1.55;
}
.reason-experience .reason-card--lead p,
.reason-experience .reason-card--setup p {
  max-width: 590px;
  color: rgba(255, 255, 255, .79);
}
.reason-card--setup {
  grid-column: span 5 !important;
  height: 590px;
}
.reason-card--practice {
  grid-column: span 5 !important;
  height: 440px;
}
.reason-card--flexible {
  grid-column: span 3 !important;
  height: 440px;
}
.reason-card--community {
  grid-column: span 4 !important;
  height: 440px;
}
.reason-card--practice .reason-card__media,
.reason-card--flexible .reason-card__media,
.reason-card--community .reason-card__media { height: 205px; }
.reason-card--practice .reason-card__media img { object-position: center 45%; }
.reason-card--flexible .reason-card__media img { object-position: 62% center; }
.reason-card--community .reason-card__media img { object-position: center center; }
.reason-card--practice .reason-card__content,
.reason-card--flexible .reason-card__content,
.reason-card--community .reason-card__content { padding: 25px 27px 28px; }
.reason-card--flexible .reason-card__content { padding-inline: 22px; }
.reason-experience .reason-card--practice h3 { font-size: 21px; }
.reason-experience .reason-card--flexible h3 { font-size: 18px; line-height: 1.6; }
.reason-experience .reason-card--community h3 { font-size: 20px; }
.reason-card--flexible p { font-size: 11px !important; }

@media (max-width: 1050px) {
  .reason-card--lead, .reason-card--setup { grid-column: span 6 !important; }
  .reason-card--practice { grid-column: span 6 !important; }
  .reason-card--flexible, .reason-card--community { grid-column: span 3 !important; }
  .reason-heading { grid-template-columns: 1fr; gap: 24px; }
}

/* ▼ メインビジュアルの最終調整 */
.hero::after,
.hero__shape { display: none; }
.hero__copy {
  padding-left: max(64px, calc((100vw - 1180px) / 2 + 5px));
}
.hero__actions {
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  width: fit-content;
  gap: 28px;
  margin-top: 34px;
}
.hero__actions .button--primary {
  flex: 0 0 auto;
  min-width: 274px;
  min-height: 64px;
  padding: 0 25px 0 34px;
  gap: 24px;
  border: 1px solid rgba(255, 255, 255, .34);
  font-size: 15px;
  white-space: nowrap;
  box-shadow: 0 14px 32px rgba(218, 108, 56, .27);
}
.hero__actions .button--primary span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-size: 15px;
  transition: transform .25s ease, background .25s ease;
}
.hero__actions .button--primary:hover span {
  background: rgba(255, 255, 255, .28);
  transform: translateX(3px);
}
.hero__trust-chips {
  width: 450px;
  max-width: 100%;
  text-align: center;
}
.hero__trust-chips > p {
  margin: 0 0 14px;
  color: #526f7e;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
}
.hero__trust-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hero__trust-features > span {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 30px;
  padding: 3px 12px;
  align-items: center;
  justify-content: center;
  color: #294b5e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  gap: 6px;
}
.hero__trust-features > span + span {
  border-left: 1px solid #d3dde2;
}
.hero__trust-features svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-slider__controls {
  right: 42px;
  bottom: 32px;
  left: auto;
}

@media (max-width: 1250px) {
  .hero__copy { padding-left: 58px; }
}

/* ▼ 教室の特徴一覧 */
.mascot-guide--hero {
  right: -140px;
  bottom: 18px;
}
.mascot-guide--hero img {
  width: 104px;
  height: 104px;
}
.mascot-guide--hero p {
  padding: 10px 15px;
  border-width: 1px;
  border-radius: 11px;
  box-shadow: 0 10px 25px rgba(18, 45, 64, .1);
}
.mascot-guide--hero p::before { border-width: 0 0 1px 1px; }
.hero-feature-band {
  position: relative;
  z-index: 8;
  border-top: 1px solid #e3e9ec;
  border-bottom: 1px solid #e6ebed;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 12px 32px rgba(18, 45, 64, .035);
}
.hero-feature-band__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(1200px, calc(100% - 64px));
  margin-inline: auto;
}
.hero-feature {
  --feature-color: #287da6;
  position: relative;
  min-height: 310px;
  padding: 46px 36px 42px;
}
.hero-feature + .hero-feature { border-left: 1px solid #e2e8eb; }
.hero-feature--mint { --feature-color: #2b9b91; }
.hero-feature--orange { --feature-color: #e58046; }
.hero-feature--pink { --feature-color: #d96f8d; }
.hero-feature__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.hero-feature__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid color-mix(in srgb, var(--feature-color) 42%, white);
  border-radius: 50%;
  color: var(--feature-color);
  background: color-mix(in srgb, var(--feature-color) 5%, white);
}
.hero-feature__icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.hero-feature__number {
  color: var(--feature-color);
  font-family: var(--font-round);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}
.hero-feature h2 {
  margin: 0 0 15px;
  color: #17384c;
  font-family: var(--font-round);
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: .015em;
}
.hero-feature p {
  margin: 0;
  color: #687c87;
  font-size: 11px;
  line-height: 1.9;
}

@media (max-width: 1250px) {
  .mascot-guide--hero { right: -92px; }
  .mascot-guide--hero p { display: block; }
  .hero-feature { padding-inline: 27px; }
}

@media (max-width: 700px) {
  .hero-feature-band__inner {
    grid-template-columns: repeat(2, 1fr);
    width: calc(100% - 32px);
  }
  .hero-feature { min-height: 280px; padding: 34px 24px; }
  .hero-feature:nth-child(3) { border-left: 0; }
  .hero-feature:nth-child(n + 3) { border-top: 1px solid #e2e8eb; }
}

/* ▼ 受講者別メッセージ */
.instructor-message-block {
  grid-template-columns: 350px minmax(0, 1fr);
  align-items: stretch;
  gap: 42px;
}
.instructor-message-block__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 500px;
  padding: 32px 4px 32px 0;
}
.instructor-message-block__heading .instructor-story__kicker { margin-bottom: 38px; }
.instructor-message-block__heading h3 {
  margin-bottom: 27px;
  font-size: 36px;
  line-height: 1.55;
  letter-spacing: .015em;
}
.instructor-message-block__heading > p:last-child {
  max-width: 305px;
  margin: 0;
  font-size: 13px;
  line-height: 2.05;
}
.instructor-message-block .instructor__messages {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
}
.instructor-message-block .instructor-message-card {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  padding: 38px 34px 31px;
}
.instructor-message-card__top {
  flex: 0 0 65px;
  min-height: 65px;
  margin-bottom: 27px;
}
.instructor-message-card__top h4 { font-size: 21px; }
.instructor-message-block .instructor-message-card > p { margin: 0; }
.instructor-message-block .instructor-message-card .instructor-message-card__intro {
  flex: 0 0 155px;
  color: #5e737f;
  font-size: 12.5px;
  line-height: 2.05;
}
.instructor-message-block .instructor-message-card .instructor-message-card__emphasis {
  display: flex;
  flex: 0 0 106px;
  align-items: center;
  min-height: 96px;
  margin: 22px 0 25px;
  padding: 18px 10px 18px 21px;
  font-size: 17px;
  line-height: 1.75;
}
.instructor-message-block .instructor-message-card .instructor-message-card__footer {
  display: flex;
  flex: 0 0 70px;
  margin-top: auto;
  min-height: 70px;
  align-items: center;
  min-height: 55px;
  padding-top: 21px;
  border-top: 1px solid #e4eaed;
  color: #23465a;
  font-size: 11.5px;
  line-height: 1.65;
  gap: 11px;
}
.instructor-message-card__footer span {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: #28a1aa;
  font-size: 12px;
}
.instructor-message-card--experienced .instructor-message-card__footer span {
  background: var(--orange);
}
.instructor-message-card__footer strong { font-weight: 700; }

@media (max-width: 1050px) {
  .instructor-message-block { grid-template-columns: 1fr; gap: 34px; }
}

/* ▼ ブログカード */
.blog-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.blog-card__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1.7;
  background: #e7eef0;
}
.blog-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(12, 38, 52, .22));
  pointer-events: none;
}
.blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .75s cubic-bezier(.2,.7,.2,1);
}
.blog-card:nth-child(1) .blog-card__thumb img { object-position: center 52%; }
.blog-card:nth-child(2) .blog-card__thumb img { object-position: center 42%; }
.blog-card:nth-child(3) .blog-card__thumb img { object-position: center 45%; }
.blog-card:hover .blog-card__thumb img { transform: scale(1.045); }
.blog-card__thumb span {
  position: absolute;
  z-index: 2;
  bottom: 17px;
  left: 18px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 999px;
  color: #fff;
  background: rgba(18, 55, 73, .55);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  backdrop-filter: blur(7px);
}
.blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.blog-card h3 { min-height: 58px; }
.blog-card__body > p { min-height: 42px; }
.blog-card__more { margin-top: auto; padding-top: 17px; }

/* ▼ エフくんのアニメーション */
.mascot-guide img,
.footer-mascot img {
  transform-origin: 50% 82%;
  will-change: transform;
}
.mascot-guide--hero img {
  animation: fkun-float 3.8s ease-in-out infinite;
}
.mascot-guide--hero p {
  opacity: 0;
  animation: fkun-bubble-in .65s ease-out .55s forwards;
}
.mascot-guide--hero::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 47px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #70dffc;
  box-shadow: 0 0 0 0 rgba(112, 223, 252, .55);
  animation: fkun-antenna-glow 3.2s ease-out infinite;
  pointer-events: none;
}
.mascot-guide--faq,
.mascot-guide--contact {
  opacity: 0;
  visibility: hidden;
}
.mascot-guide--faq.is-character-visible,
.mascot-guide--contact.is-character-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .65s ease, transform .75s ease;
}
.mascot-guide--faq.is-thinking img {
  animation: fkun-think .8s ease-in-out 1;
}
.mascot-guide--faq.is-answering img {
  animation: fkun-bounce .55s cubic-bezier(.22,.8,.35,1) 1;
}
.mascot-guide--cta.is-character-visible img {
  animation: fkun-flag-sway 5s ease-in-out infinite;
}
.mascot-guide--cta.is-cta-cheer img {
  animation: fkun-bounce .55s cubic-bezier(.22,.8,.35,1) 1;
}
.contact__intro { position: relative; }
.mascot-guide--contact {
  position: relative;
  margin: 26px 0 -18px auto;
  padding: 0 22px;
}
.mascot-guide--contact img {
  width: 118px;
  height: 118px;
}
.mascot-spark {
  position: absolute;
  z-index: 2;
  color: #e8a833;
  opacity: 0;
  font-size: 20px;
}
.mascot-spark--one { top: 4px; left: 8px; }
.mascot-spark--two { top: 35px; right: 5px; color: #39aeb8; font-size: 16px; }
.mascot-guide--contact.is-character-visible .mascot-spark {
  animation: fkun-spark-in 1.8s ease-in-out .35s both;
}
.mascot-guide--contact.is-character-visible .mascot-spark--two {
  animation-delay: .72s;
}
.site-footer__brand { position: relative; }
.footer-mascot {
  position: absolute;
  right: 2px;
  bottom: -58px;
  width: 90px;
  height: 90px;
  pointer-events: none;
}
.footer-mascot img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  opacity: .92;
  mix-blend-mode: screen;
}
.footer-note {
  position: absolute;
  color: #8adfe4;
  opacity: 0;
  font-size: 15px;
  animation: footer-note-float 4.8s ease-out infinite;
}
.footer-note--one { top: 12px; right: 5px; }
.footer-note--two { top: 28px; left: -1px; animation-delay: 1.6s; }
.footer-note--three { top: -2px; left: 24px; animation-delay: 3.1s; }

@keyframes fkun-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}
@keyframes fkun-bubble-in {
  from { opacity: 0; transform: translate3d(-7px, 5px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fkun-antenna-glow {
  0%, 58%, 100% { box-shadow: 0 0 0 0 rgba(112, 223, 252, 0); opacity: .45; }
  72% { box-shadow: 0 0 0 8px rgba(112, 223, 252, .13); opacity: 1; }
}
@keyframes fkun-think {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-3deg); }
  68% { transform: rotate(3deg); }
}
@keyframes fkun-bounce {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  42% { transform: translate3d(0, -9px, 0) scale(1.015); }
  72% { transform: translate3d(0, 1px, 0) scale(.995); }
}
@keyframes fkun-flag-sway {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(1.8deg); }
}
@keyframes fkun-spark-in {
  0% { opacity: 0; transform: scale(.5) rotate(-12deg); }
  30%, 72% { opacity: .9; transform: scale(1) rotate(0); }
  100% { opacity: .25; transform: scale(.85) rotate(8deg); }
}
@keyframes footer-note-float {
  0%, 18% { opacity: 0; transform: translate3d(0, 5px, 0); }
  34% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(3px, -24px, 0); }
}

@media (max-width: 767px) {
  .mascot-guide--hero img { animation-name: fkun-float-mobile; animation-duration: 4.4s; }
  .mascot-guide--cta.is-character-visible img { animation-duration: 6s; }
  .mascot-guide--contact img { width: 92px; height: 92px; }
  .footer-mascot { transform: scale(.82); transform-origin: right bottom; }
}
@keyframes fkun-float-mobile {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-guide--hero img,
  .mascot-guide--hero p,
  .mascot-guide--hero::after,
  .mascot-guide--faq img,
  .mascot-guide--cta img,
  .mascot-spark,
  .footer-note {
    animation: none !important;
  }
  .mascot-guide--hero p,
  .mascot-guide--faq,
  .mascot-guide--contact,
  .instructor-guide {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* ▼ セクション共通のエフくん */
.section--about > .container,
#plans > .container,
#schools > .container,
.flow > .container {
  position: relative;
}
.section-mascot {
  position: absolute;
  z-index: 6;
  right: 0;
  top: 52px;
  gap: 10px;
  pointer-events: none;
}
.section-mascot img {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
}
.section-mascot p {
  width: 210px;
  min-width: 210px;
  padding: 12px 16px 13px;
  border: 1px solid #d7e4ea;
  border-radius: 16px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 10px 26px rgba(18,45,64,.1);
  line-height: 1.45;
}
.section-mascot p::before {
  left: -7px;
  width: 12px;
  height: 12px;
  border-width: 0 0 1px 1px;
  border-color: #d7e4ea;
  background: rgba(255,255,255,.97);
}
.section-mascot p strong {
  color: #2688b7;
  font-size: 10px;
  font-weight: 700;
}
.section-mascot p span {
  margin-top: 2px;
  color: #16384c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.section-mascot.is-visible img {
  animation: section-mascot-float 4.2s ease-in-out .85s infinite;
}
.section-mascot p {
  opacity: 0;
  transform: translate3d(-7px, 4px, 0);
}
.section-mascot.is-visible p {
  animation: section-mascot-bubble .6s ease-out .42s forwards;
}
.section-mascot--philosophy {
  right: 30px;
  top: auto;
  bottom: 27px;
}
.section-mascot--philosophy img {
  mix-blend-mode: screen;
  filter: drop-shadow(0 10px 14px rgba(0,20,34,.2));
}
.section-mascot--philosophy p { min-width: 174px; }
.section-mascot--plans { top: 48px; }
.section-mascot--flow { top: 48px; }

@keyframes section-mascot-float {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-6px,0); }
}
@keyframes section-mascot-bubble {
  from { opacity: 0; transform: translate3d(-7px,4px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@media (max-width: 1120px) {
  .section-mascot { right: 12px; top: 74px; }
  .section-mascot p { min-width: 0; }
  .section-mascot p span { white-space: normal; max-width: 150px; }
  .section-mascot--philosophy { top: auto; right: 24px; bottom: 24px; }
}
@media (max-width: 767px) {
  .section-mascot {
    position: relative;
    top: auto;
    right: auto;
    justify-content: flex-end;
    margin: -24px 0 28px auto;
    transform: none;
  }
  .section-mascot img { width: 72px; height: 72px; flex-basis: 72px; }
  .section-mascot p span { max-width: 142px; font-size: 11px; }
  .section-mascot--philosophy {
    position: absolute;
    right: 18px;
    bottom: 18px;
    margin: 0;
  }
  .section-mascot--philosophy p { display: none; }
  .section-mascot.is-visible img { animation-name: fkun-float-mobile; }
}
@media (prefers-reduced-motion: reduce) {
  .section-mascot,
  .section-mascot img,
  .section-mascot p {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ▼ 講師紹介の構成調整 */
.instructor-message-block {
  position: relative;
  grid-template-columns: 330px minmax(0, 1fr);
  overflow: hidden;
  padding: 58px 54px;
  border: 1px solid #e0e9ed;
  border-radius: 28px;
  background:
    radial-gradient(circle at 4% 16%, rgba(39, 144, 171, .08), transparent 28%),
    linear-gradient(135deg, #fff 0%, #f7fbfc 52%, #fffaf5 100%);
  box-shadow: 0 24px 64px rgba(18,45,64,.09);
  gap: 46px;
}
.instructor-message-block__heading {
  position: relative;
  z-index: 1;
  min-height: 520px;
  padding: 24px 10px 24px 0;
}
.instructor-message-block__heading h3 {
  position: relative;
  margin-bottom: 31px;
  color: #12374d;
  font-size: 43px;
  line-height: 1.5;
}
.instructor-message-block__heading h3::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 25px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), #f0bd67);
}
.instructor-message-block__heading > p:last-child {
  max-width: 290px;
  color: #526d7b;
  font-size: 14px;
  line-height: 2.15;
}
.instructor-message-block .instructor__messages {
  position: relative;
  z-index: 1;
  gap: 22px;
}
.instructor-message-block .instructor-message-card {
  min-height: 520px;
  padding: 42px 36px 34px;
  border-color: #d9e5e9;
  box-shadow: 0 18px 44px rgba(18,45,64,.09);
}
.instructor-message-block .instructor-message-card--experienced {
  border-color: #eadfd9;
}
.instructor-message-card__top {
  flex-basis: 70px;
  min-height: 70px;
  margin-bottom: 30px;
}
.instructor-message-card__top h4 { font-size: 22px; }
.instructor-message-block .instructor-message-card .instructor-message-card__intro {
  flex-basis: 162px;
  font-size: 13px;
  line-height: 2.08;
}
.instructor-message-block .instructor-message-card .instructor-message-card__emphasis {
  flex-basis: 110px;
  min-height: 110px;
  margin: 23px 0 27px;
  font-size: 18px;
}
.instructor-philosophy {
  min-height: 590px;
  padding-bottom: 72px;
}
.instructor-philosophy__action {
  position: relative;
  z-index: 3;
  margin-top: 25px;
}
.instructor-philosophy__action .button {
  min-width: 330px;
  min-height: 66px;
  padding-right: 27px;
  padding-left: 34px;
  font-size: 15px;
  white-space: nowrap;
}
.instructor-philosophy__action .button span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transition: transform .25s ease, background .25s ease;
}
.instructor-philosophy__action .button:hover span {
  background: rgba(255,255,255,.28);
  transform: translateX(3px);
}

.private-consultation {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin-top: 28px;
}

.private-consultation__label {
  margin: 0 0 10px;
  color: #9fdde0;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .2em;
}

.private-consultation__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.private-consultation__features > div {
  display: flex;
  min-height: 82px;
  padding: 14px 17px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 16px;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  gap: 13px;
  backdrop-filter: blur(8px);
}

.private-consultation__icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,126,66,.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.private-consultation__features > div:nth-child(2) .private-consultation__icon {
  color: #12384f;
  background: #8edfdc;
}

.private-consultation__features p {
  margin: 0;
}

.private-consultation__features strong,
.private-consultation__features small {
  display: block;
}

.private-consultation__features strong {
  color: #fff;
  font-family: var(--font-round);
  font-size: 15px;
  line-height: 1.5;
}

.private-consultation__features small {
  margin-top: 2px;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  line-height: 1.6;
}

.cta__reservation-label {
  display: flex;
  width: fit-content;
  margin: 0 auto 16px !important;
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.1);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  backdrop-filter: blur(6px);
}

@media (max-width: 1050px) {
  .instructor-message-block {
    grid-template-columns: 1fr;
    padding: 48px 42px;
  }
  .instructor-message-block__heading { min-height: 0; }
  .instructor-message-block__heading > p:last-child { max-width: 620px; }
}

/*==================================================
    PC版エフくんの共通サイズ・配置
==================================================*/
@media (min-width: 768px) {
  :root {
    --pc-fkun-size: 142px;
    --pc-fkun-bubble-width: 218px;
  }

  .mascot-guide img,
  .section-mascot img,
  .mascot-guide--hero img,
  .mascot-guide--recommend img,
  .mascot-guide--faq img,
  .mascot-guide--cta img,
  .mascot-guide--contact img {
    width: var(--pc-fkun-size);
    height: var(--pc-fkun-size);
    max-width: var(--pc-fkun-size);
    flex: 0 0 var(--pc-fkun-size);
    object-fit: contain;
  }

  .mascot-guide p,
  .section-mascot p {
    width: max-content;
    min-width: 168px;
    max-width: var(--pc-fkun-bubble-width);
    padding: 12px 17px 13px;
    border-radius: 16px;
    line-height: 1.5;
  }

  .mascot-guide p strong,
  .section-mascot p strong {
    font-size: 10px;
  }

  .mascot-guide p span,
  .section-mascot p span {
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
  }

  .mascot-guide--hero {
    right: -178px;
    bottom: 12px;
  }

  .mascot-guide--hero::after {
    top: 8px;
    left: 65px;
  }

  .recommend__list {
    padding-right: 326px;
    padding-bottom: 126px;
  }

  .mascot-guide--recommend {
    right: 24px;
    bottom: 18px;
  }

  .section-mascot {
    top: 112px;
    right: 0;
  }

  .section-mascot--plans,
  .section-mascot--flow {
    top: 112px;
  }

  .instructor-philosophy {
    padding-right: 405px;
  }

  .section-mascot--philosophy {
    top: auto;
    right: 28px;
    bottom: 28px;
  }

  .faq-container {
    padding-right: 0;
  }

  .mascot-guide--faq {
    top: 78px;
    right: 0;
  }

  .faq-list {
    padding-top: 92px;
  }

  .cta__inner {
    padding-left: 190px;
  }

  .mascot-guide--cta {
    left: 0;
  }

  .mascot-guide--contact {
    min-height: var(--pc-fkun-size);
    margin-top: 26px;
    padding: 0;
  }

  .mascot-guide--contact .mascot-spark--one {
    top: 15px;
    left: -24px;
  }

  .mascot-guide--contact .mascot-spark--two {
    top: 48px;
    right: -22px;
  }

  .footer-mascot {
    right: -12px;
    bottom: -92px;
    width: var(--pc-fkun-size);
    height: var(--pc-fkun-size);
  }

  .footer-mascot img {
    width: var(--pc-fkun-size);
    height: var(--pc-fkun-size);
    transform: none;
  }
}

/*==================================================
    PC版講師プロフィールの見出し階層
==================================================*/
@media (min-width: 981px) {
  .hero__copy {
    text-align: center;
  }

  .hero__copy .eyebrow {
    justify-content: center;
  }

  .hero__lead,
  .hero__note {
    margin-right: auto;
    margin-left: auto;
  }

  .hero__actions {
    margin-right: auto;
    margin-left: auto;
  }

  .mascot-guide--hero {
    right: -240px;
    bottom: 158px;
  }

  .instructor-philosophy {
    padding-right: 78px;
  }

  .instructor-philosophy__lead {
    max-width: none;
    font-size: 38px;
    white-space: nowrap;
  }

  .instructor-philosophy h2 {
    max-width: none;
    font-size: clamp(21px, 1.75vw, 24px);
    line-height: 1.9;
    white-space: nowrap;
  }

  .instructor-philosophy h2 br {
    display: block;
  }

  .instructor-philosophy__note {
    max-width: 700px;
  }

  .recommend__list {
    grid-auto-rows: minmax(68px, auto);
    padding: 42px 56px 182px;
    gap: 0 38px;
  }

  .recommend__list li {
    min-width: 0;
    min-height: 68px;
    padding: 13px 0;
    gap: 14px;
  }

  .recommend__list span {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }

  .instructor-profile-card__heading {
    display: block;
    padding: 42px 64px 46px;
  }

  .instructor-profile-card__heading .instructor-story__kicker {
    margin: 0 0 24px;
  }

  .instructor-profile-card__eyebrow {
    display: flex;
    margin: 0 0 18px;
    align-items: center;
    color: #267ca5;
    font-family: var(--font-round);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .07em;
    gap: 16px;
  }

  .instructor-profile-card__eyebrow::after {
    content: "";
    width: 54px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--orange), #f2bd68);
  }

  .instructor-profile-card__heading h3 {
    max-width: 980px;
    margin: 0 0 20px;
    font-size: clamp(31px, 3vw, 42px);
    line-height: 1.55;
    letter-spacing: .015em;
  }

  .instructor-profile-card__heading > p:last-child {
    max-width: 850px;
    margin: 0;
    font-size: 14px;
    line-height: 2;
  }
}

/* ▼ 3段階の受講者別メッセージ */
.instructor-message-block__heading h3::after {
  margin-right: auto;
  margin-left: auto;
}

.instructor-message-card--restarter {
  border-color: #dcdced !important;
  background: linear-gradient(180deg, #fff 0%, #f8f7fc 100%) !important;
}

.instructor-message-card--restarter::after {
  background: rgba(117, 105, 177, .08);
}

.instructor-message-card--restarter .instructor-message-card__icon {
  color: #7168b4;
  background: #f0eefb;
}

.instructor-message-card--restarter .instructor-message-card__emphasis {
  border-color: #8277bd !important;
}

.instructor-message-card--restarter .instructor-message-card__footer span {
  background: #8277bd;
}

.instructor-message-block__eyebrow {
  display: flex;
  width: 100%;
  margin: 0 0 18px;
  align-items: center;
  justify-content: center;
  color: #267ca5;
  font-family: var(--font-round);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .07em;
  gap: 16px;
}

.instructor-message-block__eyebrow::after {
  content: "";
  width: 54px;
  height: 3px;
  flex: 0 0 54px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), #f2bd68);
}

@media (min-width: 1051px) {
  .instructor-message-block {
    grid-template-columns: 1fr;
    padding: 42px 64px 46px;
    gap: 38px;
  }

  .instructor-message-block__heading {
    min-height: 0;
    padding: 0;
    align-items: flex-start;
    text-align: left;
  }

  .instructor-message-block__heading .instructor-story__kicker {
    margin: 0 0 24px;
    align-self: flex-start;
  }

  .instructor-message-block__eyebrow {
    width: auto;
    margin-bottom: 18px;
    align-self: flex-start;
    justify-content: flex-start;
  }

  .instructor-message-block__heading h3 {
    width: 100%;
    max-width: 980px;
    margin: 0 0 20px;
    text-align: left;
    font-size: clamp(31px, 3vw, 42px);
    line-height: 1.55;
    white-space: nowrap;
  }

  .instructor-message-block__heading h3::after {
    display: none;
  }

  .instructor-message-block__heading > p:last-child {
    width: 100%;
    max-width: 850px;
    margin: 0;
    text-align: left;
    font-size: 14px;
    line-height: 2;
  }

  .instructor-message-block .instructor__messages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .instructor-message-block .instructor-message-card {
    height: 580px;
    min-height: 580px;
    padding: 34px 26px 28px;
  }

  .instructor-message-card__top {
    flex: 0 0 70px;
    min-height: 70px;
    margin-bottom: 24px;
  }

  .instructor-message-card__top h4 {
    font-size: 18px;
    line-height: 1.55;
  }

  .instructor-message-block .instructor-message-card .instructor-message-card__intro {
    display: -webkit-box;
    flex: 0 0 162px;
    min-height: 162px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.85;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
  }

  .instructor-message-block .instructor-message-card .instructor-message-card__emphasis {
    flex: 0 0 104px;
    min-height: 104px;
    margin: 16px 0 22px;
    padding: 14px 8px 14px 18px;
    font-size: 16px;
  }

  .instructor-message-block .instructor-message-card .instructor-message-card__footer {
    flex: 0 0 70px;
    min-height: 70px;
    margin-top: auto;
    padding-top: 18px;
  }
}

/*==================================================
    固定エフくんナビゲーション
==================================================*/
.floating-fkun-nav {
  position: fixed;
  z-index: 900;
  right: 22px;
  bottom: 20px;
  display: flex;
  padding: 0;
  border: 0;
  align-items: center;
  color: #173e54;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition:
    opacity .45s ease,
    visibility .45s ease,
    transform .45s cubic-bezier(.22, 1, .36, 1);
  gap: 10px;
  filter: drop-shadow(0 12px 24px rgba(18, 45, 64, .14));
}

.floating-fkun-nav.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.floating-fkun-nav img {
  width: 98px;
  height: 98px;
  flex: 0 0 98px;
  object-fit: contain;
  transform-origin: 52% 85%;
  mix-blend-mode: multiply;
}

.floating-fkun-nav__bubble {
  position: relative;
  display: grid;
  min-width: 190px;
  min-height: 54px;
  padding: 11px 16px;
  border: 1px solid #d5e2e8;
  border-radius: 15px;
  place-items: center;
  color: #173e54;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px rgba(18, 45, 64, .12);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  transition: opacity .25s ease, transform .25s ease;
}

.floating-fkun-nav__bubble.is-changing {
  opacity: 0;
  transform: translateY(3px);
}

.floating-fkun-nav__bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #d5e2e8;
  border-right: 1px solid #d5e2e8;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
}

.floating-fkun-nav.is-cta-mode .floating-fkun-nav__bubble {
  border-color: rgba(239, 152, 92, .48);
  color: #25546c;
  box-shadow: 0 12px 30px rgba(224, 118, 61, .16);
}

.floating-fkun-nav.is-cta-mode .floating-fkun-nav__bubble::after {
  border-color: rgba(239, 152, 92, .48);
}

.floating-fkun-nav:hover img,
.floating-fkun-nav:focus-visible img {
  animation: floating-fkun-cheer .62s ease-in-out both;
}

.floating-fkun-nav:focus-visible {
  border-radius: 16px;
  outline: 3px solid rgba(38, 128, 170, .35);
  outline-offset: 4px;
}

@keyframes floating-fkun-cheer {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-7px) rotate(-2deg); }
  68% { transform: translateY(-2px) rotate(2deg); }
}

@media (max-width: 767px) {
  .floating-fkun-nav {
    right: 10px;
    bottom: 12px;
    gap: 6px;
  }

  .floating-fkun-nav img {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
  }

  .floating-fkun-nav__bubble {
    min-width: 132px;
    min-height: 46px;
    padding: 8px 11px;
    border-radius: 13px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-fkun-nav,
  .floating-fkun-nav img {
    animation: none !important;
    transition: none !important;
  }
}

/*==================================================
    LINE相談への導線
==================================================*/

.button--line-cta {
  display: flex;
  width: min(380px, 100%);
  min-height: 54px;
  margin: 18px auto 0;
  padding: 13px 28px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  font-weight: 700;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.button--line-cta:hover,
.button--line-cta:focus-visible {
  border-color: #fff;
  color: #24566c;
  background: #fff;
  transform: translateY(-2px);
}

.line-contact-panel {
  width: min(920px, calc(100% - 64px));
  margin: 24px auto 96px;
  padding: 54px 48px;
  border: 1px solid #dbe8ed;
  border-radius: 24px;
  color: var(--ink);
  background: linear-gradient(135deg, #f4fbfd 0%, #fff 55%, #fff7ef 100%);
  text-align: center;
}

.line-contact-panel__label {
  margin-bottom: 14px;
  color: #2c83a9;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
}

.line-contact-panel h2 {
  margin-bottom: 18px;
  color: var(--ink-dark);
  font-family: var(--font-round);
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.45;
}

.line-contact-panel > p:not(.line-contact-panel__label) {
  margin-bottom: 28px;
  color: var(--muted);
}

.button--line-panel {
  display: inline-flex;
  min-width: 260px;
  min-height: 54px;
  padding: 13px 28px;
  border: 1px solid #2c83a9;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  color: #246f91;
  background: #fff;
  font-weight: 700;
  transition: color .25s ease, background-color .25s ease, transform .25s ease;
}

.button--line-panel:hover,
.button--line-panel:focus-visible {
  color: #fff;
  background: #246f91;
  transform: translateY(-2px);
}

/*==================================================
    固定SNSナビゲーション
==================================================*/
.fixed-social-nav {
  position: fixed;
  z-index: 850;
  top: 50%;
  right: 0;
  display: flex;
  width: 64px;
  flex-direction: column;
  gap: 10px;
  transform: translateY(-50%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity .28s ease,
    visibility .28s ease,
    transform .38s cubic-bezier(.22, 1, .36, 1);
}

.fixed-social-nav.is-scrolling {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(26px, -50%);
}

.fixed-social-nav__link {
  position: relative;
  display: grid;
  width: 64px;
  height: 182px;
  padding: 13px 0 15px 6px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-right: 0;
  border-radius: 20px 0 0 20px;
  align-items: center;
  grid-template-columns: max-content max-content;
  grid-template-rows: max-content max-content;
  align-content: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  column-gap: 3px;
  row-gap: 20px;
  box-shadow: -8px 10px 24px rgba(24, 59, 80, .16);
  transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.fixed-social-nav__link::before {
  content: "";
  position: absolute;
  inset: 5px 0 5px 5px;
  border: .75px dashed rgba(255, 255, 255, .22);
  border-right: 0;
  border-radius: 15px 0 0 15px;
  pointer-events: none;
}

.fixed-social-nav__link::after {
  align-self: center;
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}

.fixed-social-nav__link--line {
  background: #35bda7;
  row-gap: 20px;
}

.fixed-social-nav__link--line::before {
  inset: 6px 0 6px 6px;
  border: 2px dashed rgba(255, 255, 255, .58);
  border-right: 0;
  border-radius: 14px 0 0 14px;
}

.fixed-social-nav__link--instagram::before {
  inset: 6px 0 6px 6px;
  border: 2px dashed rgba(255, 255, 255, .58);
  border-right: 0;
  border-radius: 14px 0 0 14px;
}

.fixed-social-nav__link--line::after {
  content: "気軽に相談";
}

.fixed-social-nav__link--instagram {
  background: #ef8b4d;
}

.fixed-social-nav__link--instagram::after {
  content: "最新情報を";
}

.fixed-social-nav__icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  place-items: center;
  background: rgba(255, 255, 255, .92);
  transition: transform .3s ease;
}

.fixed-social-nav__icon svg {
  width: 21px;
  height: 21px;
}

.fixed-social-nav__link--line svg {
  display: none;
}

.fixed-social-nav__link--line .fixed-social-nav__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background-color: rgba(255, 255, 255, .92);
  background-image: url("../images/LINE-1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 21px;
}

.fixed-social-nav__link--instagram svg {
  fill: none;
  stroke: #db7540;
  stroke-width: 1.7;
}

.fixed-social-nav__link--instagram .fixed-social-nav__dot {
  fill: #db7540;
  stroke: none;
}

.fixed-social-nav__link:hover,
.fixed-social-nav__link:focus-visible {
  box-shadow: -12px 14px 30px rgba(24, 59, 80, .23);
  transform: translateX(-8px);
}

.fixed-social-nav__link--line:hover,
.fixed-social-nav__link--line:focus-visible {
  background: #46c9b3;
}

.fixed-social-nav__link--instagram:hover,
.fixed-social-nav__link--instagram:focus-visible {
  background: #f39a62;
}

.fixed-social-nav__text {
  align-self: center;
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}

.fixed-social-nav__link--instagram .fixed-social-nav__text {
  font-size: 0;
}

.fixed-social-nav__link--instagram .fixed-social-nav__text::after {
  content: "INSTA";
  font-size: 12px;
}

.fixed-social-nav__link:hover .fixed-social-nav__icon,
.fixed-social-nav__link:focus-visible .fixed-social-nav__icon {
  transform: scale(1.08);
}

.fixed-social-nav__link:focus-visible {
  outline: 3px solid rgba(36, 111, 145, .5);
  outline-offset: 3px;
}

/*==================================================
    初回訪問時のローディング画面
==================================================*/
.fx-site-loader {
  display: none;
}

.fx-loader-pending .fx-site-loader {
  position: fixed;
  z-index: 20000;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: #fff;
  opacity: 1;
  place-items: center;
  transition: opacity .5s ease, visibility .5s ease;
}

.fx-loader-pending body {
  overflow: hidden;
}

.fx-site-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fx-site-loader__inner {
  display: grid;
  width: min(90vw, 660px);
  justify-items: center;
  gap: 24px;
}

.fx-site-loader__guide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.fx-site-loader__guide img {
  width: 158px;
  height: 158px;
  flex: 0 0 158px;
  object-fit: contain;
  opacity: 0;
  transform: none;
  animation: fx-loader-character-in 3s .1s ease-out forwards;
}

.fx-site-loader__bubble {
  position: relative;
  min-width: 260px;
  margin: 0;
  padding: 20px 26px;
  border: 1px solid #cfdee6;
  border-radius: 22px;
  color: #173e54;
  background: #fff;
  box-shadow: 0 16px 42px rgba(18, 45, 64, .1);
  opacity: 0;
  transform: translateY(14px);
  animation: fx-loader-bubble-in .8s .78s cubic-bezier(.16, 1, .3, 1) forwards;
}

.fx-site-loader__bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -9px;
  width: 16px;
  height: 16px;
  border-bottom: 1px solid #cfdee6;
  border-left: 1px solid #cfdee6;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
}

.fx-site-loader__bubble strong,
.fx-site-loader__bubble span {
  position: relative;
  z-index: 1;
  display: block;
}

.fx-site-loader__bubble strong {
  margin-bottom: 5px;
  color: #1886bf;
  font-size: 14px;
}

.fx-site-loader__bubble span {
  font-family: var(--font-round);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.65;
}

.fx-site-loader__dots {
  display: flex;
  min-height: 12px;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fx-loader-bubble-in .5s 1.28s ease forwards;
  gap: 9px;
}

.fx-site-loader__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: fx-loader-dot 1s ease-in-out infinite;
}

.fx-site-loader__dots span:nth-child(1) { background: #2b91cf; }
.fx-site-loader__dots span:nth-child(2) { background: #57c9b7; animation-delay: .12s; }
.fx-site-loader__dots span:nth-child(3) { background: #ff8247; animation-delay: .24s; }
.fx-site-loader__dots span:nth-child(4) { background: #f3c844; animation-delay: .36s; }

@keyframes fx-loader-character-in {
  to { opacity: 1; }
}

@keyframes fx-loader-bubble-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fx-loader-dot {
  0%, 70%, 100% { opacity: .36; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-5px); }
}

@media (max-width: 767px) {
  .fx-site-loader__inner {
    width: min(88vw, 390px);
    gap: 18px;
  }

  .fx-site-loader__guide {
    flex-direction: column;
    gap: 8px;
  }

  .fx-site-loader__guide img {
    width: 124px;
    height: 124px;
    flex-basis: 124px;
  }

  .fx-site-loader__bubble {
    width: min(82vw, 300px);
    min-width: 0;
    padding: 16px 20px;
    border-radius: 18px;
    text-align: center;
  }

  .fx-site-loader__bubble::before {
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }

  .fx-site-loader__bubble strong {
    font-size: 12px;
  }

  .fx-site-loader__bubble span {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-site-loader__guide img,
  .fx-site-loader__bubble,
  .fx-site-loader__dots {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .fx-site-loader__dots span {
    opacity: .7;
    animation: none;
  }
}