:root {
  --orange: #ee7800;
  --navy: #13202e;
  --button: #123b67;
  --text: #4c4948;
  --content: 977px;
  --wide: 1440px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/*
 * クラス名は全て "samedu-"（samurai-education）を接頭辞にしたBEM風命名にしている。
 * WordPress自体やテーマ(SWELL)が自動付与するクラス（例: body の "page"）と
 * 偶然一致して意図せず二重にスタイルが当たる事故を避けるため。
 * 例外: .samedu-legal-content 配下（規約ページ等、編集者がGutenbergで自由に
 * 見出し・段落・リンクを入力する箇所）は、1タグずつにclassを付けさせるのが
 * 非現実的なため、ユニークな親クラスでスコープした要素セレクタ（h2, p, a等）を
 * 使っている。親クラス自体がユニークなので衝突はしない。
 */

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--text); background: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 400; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 3px; }

.samedu-page { padding-top: 92px; }

.samedu-header { position: fixed; z-index: 50; inset: 0 0 auto; height: 92px; display: flex; align-items: center; background: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, .14); }
/* ログイン中はWordPressの管理バー（固定, 高さ32px/モバイル46px）の下にヘッダーをずらす */
body.admin-bar .samedu-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .samedu-header { top: 46px; }
}
.samedu-header__inner { width: 100%; max-width: var(--wide); height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.samedu-header__logo-link { display: inline-flex; align-items: center; width: max-content; max-width: 100%; }
.samedu-header__logo-img { width: 241px; max-width: 100%; height: auto; }

.samedu-hero { position: relative; height: 200px; overflow: hidden; background: #dfdfdf; color: #fff; }
.samedu-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.samedu-hero__inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.samedu-hero__eyebrow { font-family: ofelia-text, var(--font-sans); font-size: 13px; font-weight: 700; line-height: 1.36; letter-spacing: -.01em; }
.samedu-hero__title { font-family: var(--font-sans); font-size: 22px; font-weight: 900; line-height: 1.36; letter-spacing: -.01em; }

.samedu-announcement-area { width: 100%; max-width: var(--content); margin: 0 auto; padding: 24px 16px 0; display: flex; flex-direction: column; gap: 24px; }
.samedu-announcement-variant { display: flex; flex-direction: column; gap: 8px; }
.samedu-announcement { width: 100%; padding: 20px; border-radius: 10px; background: #f2f1ec; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.samedu-announcement__badge { display: inline-flex; align-items: center; padding: 4px 14px; border: 1px solid var(--orange); border-radius: 999px; color: var(--orange); font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.samedu-announcement__title { flex: 1; overflow-wrap: anywhere; }
.samedu-announcement__title--static { width: 100%; color: var(--navy); font-weight: 700; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.samedu-announcement__body { width: 100%; color: var(--text); font-size: 13px; font-weight: 400; line-height: 1.9; }

.samedu-intro { width: 100%; max-width: var(--content); margin: 0 auto; padding: 60px 16px 0; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.samedu-intro__text { width: 100%; color: var(--text); font-size: 14px; font-weight: 400; line-height: 2; letter-spacing: 0; text-align: center; }

/* 見出し（アンダーライン付き）。.samedu-intro や各 .samedu-service-section で共通利用 */
.samedu-heading { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.samedu-heading__title { color: var(--text); font-family: var(--font-sans); font-size: 24px; font-weight: 900; line-height: 1.8; letter-spacing: -.01em; overflow-wrap: anywhere; }
.samedu-heading__underline { width: 70px; height: 3px; background: var(--orange); }

.samedu-services { width: 100%; max-width: var(--content); margin: 0 auto; padding: 64px 16px; display: flex; flex-direction: column; gap: 64px; }
.samedu-service-section { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.samedu-card-grid { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.samedu-card-grid > .samedu-service-card { width: 100%; }
.samedu-media-cards { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.samedu-wide-card-grid { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.samedu-service-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; color: inherit; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .12); cursor: pointer; }
.samedu-service-card__image { height: 146px; flex: 0 0 auto; overflow: hidden; }
.samedu-service-card__thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.samedu-service-card__body { position: relative; min-height: 200px; flex: 1; padding: 20px 20px 80px; display: flex; flex-direction: column; }
.samedu-service-card__title { margin-bottom: 4px; color: var(--text); font-family: var(--font-sans); font-size: 18px; font-weight: 700; line-height: 1.6; letter-spacing: 0; text-align: center; overflow-wrap: anywhere; }
.samedu-service-card__description { color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.78; letter-spacing: -.01em; }
.samedu-service-card__button { position: absolute; bottom: 20px; left: 50%; width: calc(100% - 40px); max-width: 266px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 5px; color: #fff; background: var(--button); font-family: var(--font-sans); font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: -.01em; transform: translateX(-50%); transition: opacity .2s; }

.samedu-simple-hero { padding: 64px 16px; text-align: center; color: #000; }
.samedu-simple-hero__title { font-family: var(--font-sans); font-size: 20px; font-weight: 900; line-height: 1.5; letter-spacing: -.01em; }

/* 規約ページ等の自由記述コンテンツ。編集者が1タグずつclassを付けるのは非現実的なため、
   このユニークな親クラスでスコープした要素セレクタで統一している */
.samedu-legal-content { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 16px 150px; display: flex; flex-direction: column; gap: 24px; color: var(--text); font-size: 14px; line-height: 1.9; }
/* 横に長い比較表など、通常幅(--content: 977px)では窮屈になるページ専用の広幅バリエーション */
.samedu-legal-content--wide { max-width: 1200px; }
.samedu-legal-content h2 { color: var(--navy); font-family: var(--font-sans); font-size: 20px; font-weight: 700; line-height: 1.6; }
.samedu-legal-content h3 { color: var(--navy); font-family: var(--font-sans); font-size: 16px; font-weight: 700; line-height: 1.6; }
.samedu-legal-content p { line-height: 1.9; }
.samedu-legal-content ul, .samedu-legal-content ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.samedu-legal-content ul { list-style: disc; }
.samedu-legal-content ol { list-style: decimal; }
.samedu-legal-content a { color: var(--button); text-decoration: underline; }
.samedu-legal-content table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.samedu-legal-content th, .samedu-legal-content td { padding: 8px 12px; border: 1px solid #ddd; text-align: left; }

.samedu-breadcrumb-area { height: 67px; display: flex; align-items: center; overflow: hidden; background: #f7f7f7; }
.samedu-breadcrumb { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.samedu-breadcrumb__list { margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; list-style: none; color: #000; font-size: 13px; font-weight: 500; line-height: 1.8; letter-spacing: .02em; white-space: nowrap; overflow-x: auto; }
.samedu-breadcrumb__item { display: flex; align-items: center; gap: 12px; }
.samedu-breadcrumb__item + .samedu-breadcrumb__item::before { width: 7px; height: 7px; content: ""; flex: 0 0 auto; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); }
.samedu-breadcrumb__link { font-family: ofelia-text, var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: 0; }
.samedu-breadcrumb__link:hover { text-decoration: underline; }

.samedu-footer { background: #fff; }
.samedu-footer__inner { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 60px 24px 40px; display: flex; flex-direction: column; gap: 40px; }
.samedu-footer__brand { display: flex; flex-direction: column; gap: 24px; flex: 0 0 auto; }
.samedu-footer__logo-link { display: inline-flex; align-items: center; width: max-content; transition: color .4s, opacity .4s; }
.samedu-footer__logo-img { width: 180px; height: auto; }
.samedu-social-links { display: flex; align-items: center; justify-content: flex-start; gap: 2px; }
.samedu-social-links__link { display: block; width: 40px; height: 40px; transition: color .4s, opacity .4s; }
.samedu-social-links__icon { display: block; width: 40px; height: 40px; }
.samedu-footer__navs { display: flex; flex-direction: column; gap: 32px; flex: 1; }
.samedu-footer__nav { flex: 1; }
.samedu-footer__nav-link, .samedu-footer__nav-heading { display: block; padding: 6px 0; color: var(--navy); font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; transition: color .4s, opacity .4s; }
.samedu-footer__nav-heading { font-weight: 700; }
.samedu-footer__actions { display: flex; flex-direction: column; gap: 16px; flex: 0 0 auto; }
.samedu-footer__button { position: relative; min-width: 200px; min-height: 58px; padding: 16px 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid; border-radius: 999px; color: #fff; background-clip: padding-box; font-family: var(--font-sans); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .07em; text-align: center; transition: background-color .4s, border-color .4s, opacity .4s; }
.samedu-footer__button-label { display: block; text-align: center; white-space: nowrap; }
.samedu-footer__button-icon { position: absolute; top: 50%; right: 24px; width: 12px; height: 12px; transform: translateY(-50%); }
.samedu-footer__button--orange { border-color: var(--orange); background: var(--orange); }
.samedu-footer__button--navy { border-color: var(--navy); background: var(--navy); }
.samedu-copyright { width: 100%; max-width: var(--wide); margin: 32px auto 0; padding: 18px 24px; }
.samedu-copyright__text { color: rgba(19, 32, 46, .4); font-family: var(--font-sans); font-size: 10px; line-height: 1.5; letter-spacing: 0; text-align: center; }

@media (min-width: 640px) {
  .samedu-header__inner { padding-inline: 40px; }
  .samedu-breadcrumb { padding-inline: 40px; }
  .samedu-footer__inner { padding-inline: 40px; }
  .samedu-hero { height: 236px; }
  .samedu-hero__inner { gap: 19px; }
  .samedu-announcement-area { padding: 32px 24px 0; gap: 28px; }
  .samedu-announcement { padding: 28px 32px; gap: 14px; }
  .samedu-intro { padding: 80px 24px 0; }
  .samedu-heading { gap: 28px; }
  .samedu-services { padding: 80px 24px; gap: 80px; }
  .samedu-card-grid > .samedu-service-card { width: calc((100% - 20px) / 2); }
  .samedu-card-grid--corporate > .samedu-service-card { width: calc((100% - 30px) / 2); }
  .samedu-card-grid--corporate { gap: 30px; }
  .samedu-wide-card-grid { flex-direction: row; gap: 30px; }
  .samedu-service-card--wide { flex: 1; }
  .samedu-footer__navs { flex-direction: row; gap: 64px; }
  .samedu-footer__actions { flex-direction: row; }
}

@media (min-width: 768px) {
  body { font-size: 16px; }
  .samedu-hero__eyebrow { font-size: clamp(13px, 1.6vw, 22px); }
  .samedu-hero__title { font-size: clamp(20px, 2.7vw, 38px); }
  .samedu-announcement__title--static { font-size: 15px; }
  .samedu-announcement__body { font-size: 14px; }
  .samedu-intro__text { font-size: 16px; }
  .samedu-heading__title { font-size: 32px; line-height: 1.6; }
  .samedu-simple-hero__title { font-size: 28px; }
  .samedu-legal-content { font-size: 16px; }
}

@media (min-width: 1024px) {
  .samedu-announcement-area { padding: 40px 0 0; }
  .samedu-intro { padding: 100px 0 0; }
  .samedu-services { padding: 130px 0; gap: 130px; }
  .samedu-card-grid > .samedu-service-card { width: calc((100% - 40px) / 3); }
  .samedu-card-grid--corporate > .samedu-service-card { width: calc((100% - 60px) / 3); }
  .samedu-card-grid > .samedu-service-card { min-height: 385px; }
  .samedu-footer__inner { padding-top: 90px; padding-bottom: 70px; flex-direction: row; gap: 64px; }
  .samedu-footer__navs { flex: 0 1 520px; margin-left: auto; }
  .samedu-footer__actions { width: 220px; flex-direction: column; }
  .samedu-footer__button { width: 220px; min-width: 220px; }
  .samedu-copyright { margin-top: 60px; padding: 0 40px 37px; }
  .samedu-copyright__text { text-align: right; }
}

@media (hover: hover) and (pointer: fine) {
  .samedu-service-card:hover .samedu-service-card__thumb { transform: scale(1.1); }
  .samedu-service-card:hover .samedu-service-card__button { opacity: .9; }
  .samedu-footer__nav-link:hover { color: var(--orange); }
  .samedu-footer__button--orange:hover { border-color: var(--navy); background-color: var(--navy); }
  .samedu-footer__button--navy:hover { border-color: var(--orange); background-color: var(--orange); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
