/* ================================================================
   株式会社オファーズ TOPページ用CSS
   ホームページ・ビルダーで編集しやすいよう、標準CSSのみ使用しています。
   色を変更する場合は、まず下の「基本色」を変更してください。
   ================================================================ */

:root {
  --navy: #0b2b4a;       /* 濃紺 */
  --blue: #126aa3;       /* 青 */
  --orange: #d86120;     /* 申込みボタン */
  --pale: #f3f7fa;       /* 薄い背景 */
  --text: #3f5363;       /* 本文 */
  --line: #d7e2ea;       /* 枠線 */
  --white: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--navy); background: var(--white); font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ヘッダー */
.site-header { min-height: 82px; padding: 10px 3vw; display: flex; align-items: center; gap: 22px; position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.97); box-shadow: 0 3px 15px rgba(18,48,74,.10); }
.brand { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.brand img { width: 66px; height: 60px; object-fit: contain; }
.brand span { display: flex; flex-direction: column; font-size: 19px; font-weight: 800; }
.brand small { margin-top: 2px; color: #687c8d; font-size: 9px; }
.global-nav { display: flex; gap: 14px; margin-left: auto; font-size: 13px; font-weight: 700; }
.global-nav a:hover, .global-nav a:focus { color: var(--blue); }
.header-cta, .button-orange { display: inline-flex; justify-content: center; align-items: center; border-radius: 5px; background: var(--orange); color: var(--white); font-weight: 800; }
.header-cta { padding: 14px 20px; }
.menu-toggle, .menu-button { display: none; }
.global-nav a[aria-current="page"] { color: var(--blue); }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--navy); color: var(--white); }
.skip-link:focus { top: 10px; }

/* メイン画像 */
.hero { min-height: 590px; display: grid; grid-template-columns: 52% 48%; overflow: hidden; }
.hero-copy { padding: 100px 5vw; position: relative; z-index: 2; }
.hero-kicker, .section-label { color: var(--blue); font-weight: 900; letter-spacing: .13em; }
.hero h1 { margin: 20px 0; font-size: clamp(44px, 5vw, 66px); line-height: 1.3; }
.hero-lead { max-width: 570px; margin: 0 0 30px; color: var(--text); font-size: 18px; line-height: 2; }
.button-orange { min-height: 52px; padding: 0 24px; }
.button-orange:hover { background: #b84d14; }
.hero-photo { background: url("hero-classroom.png") center center / cover no-repeat; }

/* 特長 */
.trust-strip { padding: 28px 8vw; display: grid; grid-template-columns: repeat(3,1fr); background: var(--navy); color: var(--white); text-align: center; }
.trust-strip strong { padding: 4px 15px; border-right: 1px solid rgba(255,255,255,.25); }
.trust-strip strong:last-child { border-right: 0; }

/* 共通セクション */
.section { padding: 90px max(5vw, calc((100vw - 1240px) / 2)); }
.section-pale { background: var(--pale); }
.section-label { margin: 0; font-size: 13px; }
.section h2 { margin: 10px 0; font-size: clamp(30px, 3vw, 44px); }
.section-lead { margin: 0 0 35px; color: var(--text); line-height: 1.8; }

/* 講習カード */
.course-grid { margin-top: 35px; display: grid; grid-template-columns: repeat(4,1fr); gap: 17px; }
.course-card { min-height: 245px; padding: 26px; border: 1px solid var(--line); border-top: 4px solid var(--blue); background: var(--white); box-shadow: 0 8px 25px rgba(11,43,74,.07); transition: transform .2s, box-shadow .2s; }
.course-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(11,43,74,.13); }
.course-card small, .schedule-info small { display: inline-block; padding: 5px 7px; background: #e9f4fb; color: var(--blue); font-weight: 800; }
.course-card h3 { margin: 25px 0 8px; font-size: 20px; }
.course-card p { color: var(--text); font-size: 14px; line-height: 1.8; }
.course-card b { color: var(--orange); font-size: 14px; }
.course-card.future { border-top-color: var(--orange); }

/* 開催日程 */
.schedule-list { display: grid; gap: 10px; }
.sample-notice { margin: 0 0 8px; padding: 12px 15px; border-left: 4px solid var(--orange); background: #fff4e8; color: #70431e; font-size: 13px; font-weight: 700; }
.schedule-card { padding: 18px 22px; display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 20px; border: 1px solid var(--line); background: var(--white); }
.schedule-date { display: flex; flex-direction: column; gap: 6px; padding-right: 20px; border-right: 1px solid var(--line); }
.schedule-date span, .schedule-info p { color: var(--text); font-size: 13px; }
.schedule-info h3 { margin: 7px 0 3px; font-size: 17px; }
.schedule-info p { margin: 0; }
.schedule-info small.online { background: #e7f5ef; color: #126345; }
.schedule-card > a { padding: 12px; color: var(--orange); font-weight: 800; }
.empty-message { padding: 30px; background: var(--white); color: var(--text); text-align: center; }

/* 申込み前の案内 */
.guide-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(5,1fr); gap: 15px; }
.guide-grid a { padding: 26px; border-bottom: 3px solid var(--blue); background: var(--pale); font-weight: 800; }
.guide-grid a:hover { color: var(--blue); }

/* フッター */
.site-footer { padding: 45px 7vw 18px; display: grid; grid-template-columns: 2fr 3fr; gap: 35px; background: var(--navy); color: var(--white); }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 78px; height: 71px; object-fit: contain; }
.footer-brand span { display: flex; flex-direction: column; gap: 5px; }
.footer-brand b { font-size: 17px; }
.footer-brand small, .footer-links { color: #c7d7e2; font-size: 12px; }
.footer-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 20px; }
.copyright { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); color: #adc1cf; }
.site-footer address { color: #c7d7e2; font-size: 12px; font-style: normal; }

/* 下層ページ */
.page-hero { min-height: 310px; padding: 80px max(6vw, calc((100vw - 1120px) / 2)); display: flex; align-items: center; position: relative; overflow: hidden; background: linear-gradient(115deg, #eef6fb 0%, #f8fbfd 62%, #dcecf6 100%); }
.page-hero::after { content: ""; width: 420px; height: 420px; position: absolute; right: -80px; top: -170px; border: 80px solid rgba(18,106,163,.07); border-radius: 50%; }
.page-hero > div { position: relative; z-index: 1; }
.page-hero h1 { margin: 8px 0 12px; font-size: clamp(34px, 4.3vw, 54px); letter-spacing: .03em; line-height: 1.25; }
.page-hero p:last-child { max-width: 720px; margin: 0; color: var(--text); }
.breadcrumb { max-width: 1120px; margin: 0 auto; padding: 22px 28px 0; display: flex; gap: 10px; color: #6c7f8d; font-size: 13px; }
.breadcrumb a { color: var(--blue); }
.content-shell { max-width: 1120px; margin: 0 auto; padding: 48px 28px 90px; color: var(--text); }
.legacy-content > div, .legacy-content #shop, .legacy-content #order, .legacy-content #item { width: 100%; }
.legacy-content h2, .legacy-content h3, .legacy-content h4 { color: var(--navy); }
.legacy-content h3 { margin: 54px 0 18px; padding: 0 0 13px; border-bottom: 2px solid var(--line); position: relative; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.5; }
.legacy-content h3::after { content: ""; width: 82px; height: 3px; position: absolute; left: 0; bottom: -2px; background: var(--blue); }
.legacy-content h3:first-child { margin-top: 0; }
.faq-accordion { display: grid; gap: 14px; }
.faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 8px 24px rgba(11,43,74,.06); }
.faq-item summary { min-height: 82px; padding: 22px 72px 22px 26px; position: relative; display: flex; align-items: center; color: var(--navy); font-size: clamp(17px, 2vw, 21px); font-weight: 900; line-height: 1.55; cursor: pointer; list-style: none; transition: color .2s, background-color .2s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "＋"; width: 36px; height: 36px; position: absolute; right: 24px; top: 50%; display: grid; place-items: center; border-radius: 50%; background: var(--pale); color: var(--blue); font-size: 24px; line-height: 1; transform: translateY(-50%); }
.faq-item summary:hover { color: var(--blue); background: var(--pale); }
.faq-item summary:focus-visible { outline: 3px solid rgba(18,106,163,.35); outline-offset: -3px; }
.faq-item[open] summary { color: var(--blue); background: var(--pale); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 26px; border-top: 1px solid var(--line); }
.faq-answer > :first-child { margin-top: 0; }
.faq-answer > :last-child { margin-bottom: 0; }
.legacy-content h4 { margin: 28px 0 10px; font-size: 18px; }
.legacy-content p, .legacy-content li, .legacy-content td, .legacy-content th { line-height: 1.9; }
.legacy-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.legacy-content a:hover { color: var(--orange); }
.legacy-content img { height: auto; margin: 12px 0; border-radius: 6px; }
.legacy-content hr { height: 1px; margin: 38px 0; border: 0; background: var(--line); }
.legacy-content table { width: 100% !important; margin: 22px 0; border-collapse: collapse; border: 1px solid var(--line); }
.legacy-content th, .legacy-content td { width: auto !important; padding: 13px 15px; border: 1px solid var(--line) !important; background: var(--white) !important; text-align: left; vertical-align: top; }
.legacy-content th { background: var(--pale) !important; color: var(--navy); }
.legacy-content ol { padding-left: 1.6em; }
.legacy-content ul { padding-left: 1.3em; }
.legacy-content #flow ol { padding: 0; list-style: none; counter-reset: flow-step; }
.legacy-content #flow li { margin: 0 0 12px; padding: 18px 18px 18px 64px; position: relative; border: 1px solid var(--line); border-radius: 7px; background: var(--pale); counter-increment: flow-step; }
.legacy-content #flow li::before { content: counter(flow-step); width: 32px; height: 32px; position: absolute; left: 17px; top: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: var(--white); font-weight: 800; }
.legacy-content #page-executive, .legacy-content #page-grande { display: inline-block; margin: 0 8px 8px 0; padding: 10px 15px; border: 1px solid var(--line); border-radius: 5px; background: var(--pale); }
.legacy-content #hpb-executive, .legacy-content #hpb-grande { text-align: center; }
.legacy-content #hpb-executive h3::after, .legacy-content #hpb-grande h3::after { left: 50%; transform: translateX(-50%); }
.legacy-content #hpb-executive img, .legacy-content #hpb-grande img { display: block; margin-left: auto; margin-right: auto; }
.legacy-content object, .legacy-content embed, .legacy-content video { max-width: 100%; }
.legacy-content [align="center"] { max-width: 100%; }
.legacy-content font[color="#ff0000"], .legacy-content [style*="color : red"], .legacy-content [style*="color: red"] { color: #b64118 !important; }
.legacy-content font[color="#0000ff"] { color: #125f99 !important; }
.page-actions { margin-top: 70px; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); }
.page-actions a { font-weight: 800; text-decoration: none; }
.sitemap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.legacy-content .sitemap-grid > a { min-height: 112px; padding: 22px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 6px; background: var(--white); text-decoration: none; box-shadow: 0 7px 20px rgba(11,43,74,.05); }
.legacy-content .sitemap-grid b { color: var(--navy); font-size: 17px; }
.legacy-content .sitemap-grid span { margin-top: 5px; color: var(--text); font-size: 13px; }
.related-pages { margin-top: 70px; padding: 34px; border-radius: 8px; background: var(--pale); }
.related-pages h2 { margin: 5px 0 22px; font-size: clamp(22px, 2.4vw, 30px); }
.related-pages > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.legacy-content .related-pages a { min-height: 120px; padding: 20px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 6px; background: var(--white); text-decoration: none; }
.legacy-content .related-pages b { color: var(--navy); font-size: 17px; }
.legacy-content .related-pages span { margin-top: 5px; color: var(--text); font-size: 13px; }

/* 講習別サイト */
.course-page-hero { background: linear-gradient(115deg, #eef6fb 0%, #f8fbfd 58%, #e6f0f6 100%); }
.venue-hero { min-height: 240px; background: linear-gradient(115deg, #f3f7fa 0%, #ffffff 65%, #e8f1f6 100%); }
.course-content { overflow-wrap: anywhere; }
.course-content iframe, .course-content object, .course-content embed { max-width: 100%; }
.course-content input:not([type="checkbox"]):not([type="radio"]), .course-content textarea, .course-content select { max-width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); font: inherit; }
.course-content input[type="submit"], .course-content input[type="button"], .course-content button { padding: 11px 18px; border: 0; border-radius: 5px; background: var(--blue); color: var(--white); font: inherit; font-weight: 800; cursor: pointer; }
.course-content .more a, .course-content a[class*="button"] { display: inline-flex; padding: 11px 18px; border-radius: 5px; background: var(--blue); color: var(--white); font-weight: 800; text-decoration: none; }
.course-content .attention { padding: 24px; border: 1px solid #efc7b2; border-left: 5px solid var(--orange); border-radius: 6px; background: #fff8f3; }
.course-content .attention ul { margin-block: 20px; }
.course-content .content-alert-title { margin: 0 0 22px; padding: 18px; border: 1px solid #efc7b2; border-radius: 6px; background: #fff8f3; color: var(--navy); font-size: clamp(24px, 3vw, 38px); text-align: center; }
.course-directory { margin-top: 70px; padding: 34px; border-radius: 8px; background: var(--pale); }
.course-directory h2 { margin: 5px 0 22px; color: var(--navy); font-size: clamp(22px, 2.4vw, 30px); }
.course-directory > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.legacy-content .course-directory a { min-height: 112px; padding: 20px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 6px; background: var(--white); text-decoration: none; box-shadow: 0 7px 20px rgba(11,43,74,.05); }
.legacy-content .course-directory a[aria-current="page"] { border-top-color: var(--orange); background: #fff8f3; }
.legacy-content .course-directory b { color: var(--navy); font-size: 16px; }
.legacy-content .course-directory span { margin-top: 4px; color: var(--text); font-size: 12px; }
.venue-back { margin-top: 65px; padding: 32px; border-radius: 8px; background: var(--pale); text-align: center; }
.venue-back h2 { margin: 5px 0 22px; color: var(--navy); font-size: clamp(22px, 2.4vw, 30px); }
.legacy-content .venue-back .button-orange { color: var(--white); text-decoration: none; }
.legacy-content .schedule-premium-logo { width: 210px; max-width: 100%; height: auto; margin: 10px auto 0; display: block; border-radius: 4px; }
.application-cta { margin: 56px auto 28px; display: flex; justify-content: center; text-align: center; }
.legacy-content .application-cta a { width: min(100%, 540px); min-height: 116px; padding: 22px 70px 22px 34px; display: inline-flex; position: relative; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 3px solid #fff; border-radius: 16px; outline: 2px solid #bd4c12; background: linear-gradient(135deg, #ed843d 0%, var(--orange) 52%, #b8420b 100%); box-shadow: 0 16px 36px rgba(216,97,32,.36); color: var(--white); font-weight: 900; text-decoration: none; transition: transform .2s, box-shadow .2s, filter .2s; }
.application-cta a small { color: #fff4ec; font-size: 13px; font-weight: 800; letter-spacing: .05em; }
.application-cta a strong { color: var(--white); font-size: clamp(30px, 4vw, 40px); line-height: 1.25; letter-spacing: .12em; }
.legacy-content .application-cta a:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(216,97,32,.36); color: var(--white); filter: brightness(1.04); }
.legacy-content .application-cta a:focus-visible { outline: 4px solid rgba(18,106,163,.3); outline-offset: 4px; }
.application-cta .application-cta-arrow { position: absolute; right: 28px; top: 50%; color: var(--white); font-size: 30px; transform: translateY(-50%); transition: transform .2s; }
.application-cta a:hover .application-cta-arrow { transform: translate(5px, -50%); }

/* FAQは質問を見つけやすいカード表示 */
body:has(.page-hero .section-label:first-child) .legacy-content { overflow-wrap: anywhere; }

/* キーボード操作時の枠 */
a:focus-visible, .menu-button:focus-visible { outline: 3px solid rgba(18,106,163,.35); outline-offset: 3px; }

/* タブレット */
@media (max-width: 1180px) {
  .menu-button { display: block; margin-left: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 800; }
  .global-nav { display: none; position: absolute; top: 82px; left: 0; right: 0; margin: 0; padding: 20px 5vw; flex-direction: column; gap: 18px; background: var(--white); box-shadow: 0 8px 18px rgba(11,43,74,.12); }
  .menu-toggle:checked ~ .global-nav { display: flex; }
  .hero { grid-template-columns: 1fr; position: relative; }
  .hero-copy { background: rgba(255,255,255,.87); }
  .hero-photo { position: absolute; inset: 0; z-index: 0; }
  .course-grid { grid-template-columns: repeat(2,1fr); }
  .guide-grid { grid-template-columns: repeat(2,1fr); }
}

/* スマートフォン */
@media (max-width: 650px) {
  .site-header { min-height: 70px; padding: 8px 4vw; gap: 8px; }
  .brand img { width: 48px; height: 44px; }
  .brand span { font-size: 14px; }
  .brand small { display: none; }
  .header-cta { padding: 10px; font-size: 11px; }
  .global-nav { top: 70px; }
  .hero { min-height: 620px; }
  .hero-copy { padding: 70px 6vw; }
  .hero h1 { font-size: 41px; }
  .hero-lead { font-size: 16px; }
  .trust-strip { padding: 16px 6vw; grid-template-columns: 1fr; }
  .trust-strip strong { padding: 13px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.25); }
  .trust-strip strong:last-child { border-bottom: 0; }
  .section { padding: 65px 6vw; }
  .course-grid, .guide-grid { grid-template-columns: 1fr; }
  .schedule-card { grid-template-columns: 1fr; gap: 12px; }
  .schedule-date { padding: 0; border-right: 0; }
  .schedule-card > a { padding: 8px 0; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .page-hero { min-height: 245px; padding: 58px 6vw; }
  .breadcrumb { padding-inline: 6vw; }
  .content-shell { padding: 38px 6vw 65px; }
  .legacy-content table { display: block; overflow-x: auto; white-space: normal; }
  .legacy-content #flow li { padding-left: 58px; }
  .page-actions { flex-direction: column; }
  .sitemap-grid { grid-template-columns: 1fr; }
  .related-pages { padding: 24px; }
  .related-pages > div { grid-template-columns: 1fr; }
  .course-directory { padding: 24px; }
  .course-directory > div { grid-template-columns: 1fr; }
  .course-content .attention { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}