/* ================================================= 下層ページ共通レイアウト ================================================= */ /* 余白調整用変数（ページ別に上書き可） */ :root{ --page-top-gap: 50px; } @media (max-width: 768px){ :root{ --page-top-gap: 20px; } } @media (max-width: 540px){ :root{ --page-top-gap: 8px; } } /* ------------------------- 左レール + 本文 ------------------------- */ .page-shell{ display: grid; grid-template-columns: 200px 1fr; /* 左：タイトル / 右：本文 */ column-gap: 48px; align-items: start; margin-top: calc(var(--header-h, 88px) + var(--page-top-gap)); } /* ------------------------- 左：ページタイトル ------------------------- */ .page-hero{ position: sticky; top: calc(var(--header-h) + var(--page-top-gap)); display: flex; flex-direction: column; align-items: center; } .page-title{ writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-serif); font-size: 36px; font-weight: 600; letter-spacing: .12em; line-height: 1.1; color: var(--dark-green); padding-top: 30px; } .page-title-en{ margin-top: 16px; font-size: 12px; line-height: 1.4; letter-spacing: .2em; text-align: center; opacity: .6; padding-bottom: 50px; } /* ------------------------- 右：本文 ------------------------- */ .page-article{ min-width: 0; width: 100%; max-width: 900px; justify-self: start; padding-bottom: 70px; } /* リード文 */ .page-article .lead{ font-size: 110%; font-family: var(--font-sans); line-height: 1.6; margin-bottom: 2em; } /* 本文中の強調 */ .page-article strong{ font-family: var(--font-sans); font-weight: 400; color: var(--aqua-green); } /* 段落区切り：ドット */ .divider-dots{ text-align: center; font-size: 10px; color: var(--aqua-green); letter-spacing: 0.7em; line-height: 1; margin: 70px 0; user-select: none; opacity: .5; } @media (max-width: 540px){ .divider-dots{ margin: 45px 0; } } /* 段落 */ .page-article p{ font-family: var(--font-serif); font-weight: 300; line-height: 2.0; margin-bottom: 2.0em; } /* 段落内テキストリンク */ .page-article p a { font-family: var(--font-sans); text-decoration: none; } /* ------------------------- 見出し（章） ------------------------- */ .page-article-title{ display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-serif); font-size: 24px; font-weight: 600; margin: 3em 0 1em; padding-bottom: 12px; border-bottom: 1px solid var(--line); } /* 見出しアイコン（装飾用） */ .page-article-title .title-icon{ width: 1.1em; height: 1.1em; background: url("../images/common/icon_sorobandama.png") no-repeat; background-size: 1.1em 1.1em; margin-top: .1em; flex: 0 0 auto; } /* ------------------------- 単体画像 ------------------------- */ .page-article figure{ margin: 35px 0; } .page-article figure img{ width: 100%; height: auto; display: block; } /* ================================================= split（本文内 横並びユニット） ================================================= */ .split{ display: grid; gap: 24px; align-items: start; margin: 45px 0; } .split-2{ grid-template-columns: 1fr 1fr; } /* 比率バリエーション */ .split-2.is-46{ grid-template-columns: 4fr 6fr; } .split-2.is-37{ grid-template-columns: 3fr 7fr; } /* split内の画像 */ .split .split-media{ margin: 0; } .split img{ width: 100%; height: auto; display: block; } /* split内の文章 */ .split-body > :first-child{ margin-top: 0; } .split-body > :last-child{ margin-bottom: 0; } .figcaption{ font-size: 14px; font-family: var(--font-sans); font-weight: 400; text-align: center; margin: 10px 0 0 0; } /* ================================================= 下層CTA ================================================= */ .page-cta{ margin: 4em 0 0; padding: 32px; text-align: center; } .page-cta .section-title{ font-size: 22px; margin-bottom: .5em; } .page-cta .desc{ margin-bottom: 1.5em; } .page-cta .cta-actions{ display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } /* ================================================= 全幅レイアウト（左レール無し） ================================================= */ .layout-wide .page-shell{ grid-template-columns: 1fr; } .layout-wide .page-hero{ display: none; } /* ================================================= ページ内ナビ ================================================= */ /* 2列×n段のナビボタン */ .nav-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; /* 行/列 */ margin: 70px 0 40px 0; } /* ボタン（左右半分・同じ高さ） */ .nav-grid__item{ position: relative; display: flex; align-items: center; justify-content: flex-start; min-height: 64px; padding: 24px 44px 24px 18px; border: 1px solid var(--aqua-green); text-decoration: none; font-size: 20px; font-family: var(--font-serif); font-weight: 600; line-height: 1.4; } /* 右矢印（擬似要素で統一） */ .nav-grid__item::after{ content: ""; position: absolute; right: 16px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--aqua-green); border-bottom: 2px solid var(--aqua-green); transform: translateY(-50%) rotate(-45deg); opacity: .9; } /* hover（PCのみ） */ @media (hover: hover) and (pointer: fine){ .nav-grid__item:hover{ background: var(--pale-green); } } @media (max-width: 1100px){ .nav-grid__item{ font-size: 18px; } } /* SPは1列 */ @media (max-width: 768px){ .nav-grid{ grid-template-columns: 1fr; margin-bottom: 0; } .nav-grid__item{ font-size: 16px; } } /* ================================================= スマホ対応 ================================================= */ @media (max-width: 768px){ .page-shell{ grid-template-columns: 1fr; column-gap: 0; margin-top: calc(var(--header-h, 50px) + var(--page-top-gap)); } /* 左タイトル → 上へ */ .page-hero{ position: static; margin-bottom: 0; } .page-title{ writing-mode: horizontal-tb; text-orientation: initial; font-size: 28px; letter-spacing: .06em; line-height: 1.2; margin-bottom: 0; } .page-title-en{ margin-top: 8px; padding-bottom: 0; } /*本文見出し*/ .page-article-title { font-size:20px; } /* split → 縦積み */ .split-2{ grid-template-columns: 1fr; } } /* ===================================== 背景 緑 + 白抜き文字 ===================================== */ p.bg-aqua-box { background: var(--aqua-green); font-family: var(--font-sans); color: #fff; padding: 14px 18px; line-height: 1.6; } /* ===================================== ul（●マーカー） ===================================== */ .ul-maru { margin: 0; } .ul-maru > li { list-style: none; position: relative; padding-left: 1.2em; line-height: 1.8; } .ul-maru > li::before { content: "●"; position: absolute; left: 0; top: 0; color: var(--aqua-green); font-size: .8em; line-height: 2.0; } .ul-maru > li + li { margin-top: 6px; } /* ===================================== 破線で囲まれた ul（●マーカー） ===================================== */ .ul-dashed { border: 2px dashed color-mix(in srgb, var(--aqua-green) 70%, #ffffff 30%); padding: 14px 18px; margin: 0; } .ul-dashed > li { list-style: none; position: relative; padding-left: 1.2em; line-height: 1.8; } .ul-dashed > li::before { content: "●"; position: absolute; left: 0; top: 0; color: var(--aqua-green); font-size: .8em; line-height: 2.0; } .ul-dashed > li + li { margin-top: 6px; } /* ===================================== th枠付きtable ===================================== */ table.border-th-table{ --flow-th: 180px; /* th列の幅（レスポンシブで変える前提） */ --arrow-w: 12px; /* ▼の左右サイズ */ --arrow-h: 12px; /* ▼の高さ */ --arrow-gap: 5px; /* ▼先端と次行の間 */ width: 100%; border-collapse: separate; border-spacing: 0 calc(var(--arrow-h) + var(--arrow-gap)); } table.border-th-table tr{ position: relative; } table.border-th-table th { width: 180px; padding: 16px 12px; border: 1px solid var(--aqua-green); color: var(--aqua-green); font-weight: 700; font-size: 15px; line-height: 1.4; text-align: center; vertical-align: middle; white-space: nowrap; } /* 右：本文 */ table.border-th-table td { padding: 10px 14px; line-height: 1.8; font-size: 14px; vertical-align: middle; } /* ===================================== 渋谷式とは ===================================== */ /* 上部ページ内リンク */ table.skill-table th, table.skill-table td{ padding: 0; vertical-align: middle; line-height: 1.4; } table.skill-table td{ padding: 0 14px; } a.anchor-link{ font-size: 115%; line-height: 1; display: block; height: 100%; margin: 0; padding: 24px 14px; } a.anchor-link:hover{ background: var(--pale-green); } /* 下部ページ遷移ナビ */ .nav-grid a[aria-current="page"]{ color: #aaa; background: var(--pale-green); pointer-events: none; cursor: default; } @media (max-width: 540px){ a.anchor-link{ font-size: 105%; } } /* ===================================== 未就学児ページ ===================================== */ @media (max-width: 540px){ table.border-th-table th { width: 120px; } } /* ===================================== フローチャート（table版） ===================================== */ table.flow-table{ --flow-th: 180px; /* th列の幅（レスポンシブで変える前提） */ --arrow-w: 12px; /* ▼の左右サイズ */ --arrow-h: 12px; /* ▼の高さ */ --arrow-gap: 5px; /* ▼先端と次行の間 */ width: 100%; border-collapse: separate; border-spacing: 0 calc(var(--arrow-h) + var(--arrow-gap)); } table.flow-table tr{ position: relative; } /* ▼：trに付与（最後以外） */ table.flow-table tr:not(:last-child)::after{ content: ""; position: absolute; /* thの中央に合わせる（サイズ変えてもズレない） */ left: calc(var(--flow-th) / 2); transform: translateX(-50%); /* 上の四角に密着（必要なら -1px を -2px に） */ top: calc(100% - 1px); width: 0; height: 0; border-left: var(--arrow-w) solid transparent; border-right: var(--arrow-w) solid transparent; border-top: var(--arrow-h) solid var(--aqua-green); } /* 左：見出し枠 */ table.flow-table th { width: 180px; padding: 10px 12px; border: 1px solid var(--aqua-green); color: var(--aqua-green); font-weight: 700; font-size: 15px; line-height: 1.4; text-align: center; vertical-align: middle; white-space: nowrap; } /* 右：本文 */ table.flow-table td { padding: 10px 14px; line-height: 1.8; font-size: 14px; vertical-align: middle; } @media (max-width: 540px){ table.flow-table th { width: 120px; font-size: 14px; } table.flow-table{ --flow-th: 120px; } } /* ===================================== スケジュールテーブル ===================================== */ table.time-table{ width: 100%; border-collapse: collapse; border-spacing: 0; margin: 15px 0 50px 0; } table.time-table td{ text-align: center; vertical-align: middle; padding:1.5em 0.5em; } table.time-table td:not(:last-child){ border-right: 8px solid #fff; } table.time-table td.m-25{ width:40%; } table.time-table td.m-15{ width:30%; } table.time-table td.bg-pale-green{ background: var(--pale-green); } table.time-table td.bg-aqua-green{ background: var(--aqua-green); color: var(--white); } /* ===================================== 下向き矢印 ===================================== */ .arrow-under { width: 100%; height: 24px; position: relative; } .arrow-under::before { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-right: 2px solid var(--aqua-green); border-bottom: 2px solid var(--aqua-green); transform: rotate(45deg); } /* ===================================== テキストリンク（下層ページ用） アンダーライン＋矢印 ===================================== */ p.contents-bottom-link{ font-size: 14px; font-family: var(--font-sans); line-height: 1; text-align:right; padding: 16px 0; } .text-link{ display: inline-block; padding-right: 20px; padding-bottom: 12px; position: relative; color: var(--text); } .text-link::after{ content: ""; width: 1.1em; height: 1.1em; background: url("../images/common/arrow_green_circle_right.svg") no-repeat; position: absolute; top: 0; right: 0; } .text-link::before{ content: ""; width:100%; height:1px; border-bottom: 1px solid #99cc33; position: absolute; bottom: 0; right: 0; } .text-link:hover{ color: var(--hover); } .mail-img{ width: 100%; max-width: 160px; aspect-ratio: 565 / 62; vertical-align: baseline; } /* ===================================== シンプルテーブル ===================================== */ .table { font-size: 0.9em; line-height: 1.4; width: 100%; border-collapse: collapse; border-spacing: 0; /* table は上だけ線 */ border-top: 1px solid var(--line, #e6e6e6); } /* th / td 共通 */ .table th, .table td { padding: 1.5em 1em; border-bottom: 1px solid var(--line, #e6e6e6); background: #fff; vertical-align: middle; text-align: left; } /* th / td 共通 センター揃え */ .table th.text-center, .table td.text-center{ text-align: center; } .table th { white-space: nowrap; } .table th[rowspan] { white-space: normal; } .table .nowrap{ white-space: nowrap; } /* 淡いグリーン */ .table th.th-pale-green { background: var(--pale-green); padding: 0.7em 1em; } /* アクアグリーン（白文字） */ .table th.th-aqua-green { background: var(--aqua-green); color: #fff; } .table p{ line-height: 1.6; margin-bottom: 0; } /* ===================================== 無料体験授業ページ　時間割テーブル ===================================== */ a.tel-link{ font-size:1.2em; font-weight: 600; } @media (max-width: 540px){ .table.trial-table th, .table.trial-table td{ padding: 1.0em 0.2em; } .table.trial-table th{ white-space: wrap; } } /* ===================================== 教室案内ページ ===================================== */ /* 枠線付きナビボタン（共通） */ .nav-btn-border{ display: grid; gap: 10px; margin: 50px 0 70px 0; } .nav-btn-border a{ display: flex; align-items: center; justify-content: center; height: 4.5em; border: 1px solid var(--aqua-green); position: relative; } /* ページ内リンク */ .nav-btn-border.is-inpage a{ padding-bottom: 0.5em; } .nav-btn-border.is-inpage a::after{ content: ""; width: .6em; height: .6em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; position: absolute; left: 50%; bottom: 1em; transform: translateX(-50%) rotate(45deg); } /* 別ページへリンク */ .nav-btn-border.is-external a{ padding-left: 0; padding-right: 2.2em; justify-content: center; } .nav-btn-border.is-external a::before{ content: ""; width: .6em; height: .6em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; position: absolute; right: 1em; top: 50%; transform: translateY(-50%) rotate(-45deg); } /* hoverはPCだけ */ @media (hover: hover) and (pointer: fine){ nav.nav-btn-border a:hover{ background: var(--pale-green); } } nav.nav-btn-border a:focus-visible{ outline: 2px solid var(--aqua-green); outline-offset: 2px; } /* 分割列数*/ .btn-cols-2{ grid-template-columns: repeat(2, 1fr); } .btn-cols-3{ grid-template-columns: repeat(3, 1fr); } .btn-cols-4{ grid-template-columns: repeat(4, 1fr); } .btn-cols-5{ grid-template-columns: repeat(5, 1fr); } /* 教室案内ページ会社概要ブロック*/ dl.company-profile{ display: flex; flex-direction: row; flex-wrap: wrap; } dl.company-profile dt{ width: 15%; padding: 1em; background: var(--pale-green); margin-bottom: 0.5em; white-space: nowrap; } dl.company-profile dd{ width: 85%; padding: 1em; } @media (max-width: 540px){ .btn-cols-2{ grid-template-columns: repeat(1, 1fr); } .btn-cols-4{ grid-template-columns: repeat(2, 1fr); } .btn-cols-5{ grid-template-columns: repeat(3, 1fr); } dl.company-profile dt{ width: 5em; } dl.company-profile dd{ width: calc(100% - 5em); } } /* ===================================== 教室案内ページ時間割テーブル ===================================== */ /*実施曜日の案内文PCでは非表示*/ p.col-week-sp{ display:none; } table.table.schedule-simple th, table.table.schedule-simple td{ padding: 0.5em; } table.table.schedule-simple .text-blue{ padding-left: 0.5em; color:#2d9fc4; } table.table.schedule-simple .time-blue{ padding-left: 0.75em; color:#2d9fc4; } @media (max-width: 540px) { table.table.schedule-simple th { white-space: normal; } table.table.schedule-simple th span{ display: block; white-space: nowrap; } table.table.schedule-simple .text-blue{ padding-left: 0; white-space: normal; } table.table.schedule-simple .time-blue{ white-space: nowrap; } /*実施曜日の案内文のセルSPでは非表示*/ table.table.schedule-simple .col-week{ display:none; } /*実施曜日の案内文SPで表示*/ p.col-week-sp{ display:block; margin-top: 1.0em; line-height: 1.5; } } /* ===================================== GoogleMap ===================================== */ .gmap-wrap { width: 100%; height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; margin: 20px 0; } .gmap-wrap iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } /* ===================================== リスト マーカーなし ===================================== */ .ul-nomarker { list-style: none; padding-left: 0; margin: 0 0 2em 0; } .ul-nomarker li { font-size: 1em; font-weight: 400; line-height: 1.6; margin-bottom: 0.7em; } /* ===================================== リスト ドットマーカー ===================================== */ .ul-dots { list-style: none; padding-left: 0; margin: 0 0 2em 0; } .ul-dots li { position: relative; padding-left: 1em; font-size: 1em; font-family: var(--font-serif); line-height: 1.6; margin-bottom: 0.7em; } .ul-dots li::before { content: ""; width: 0.3em; height: 0.3em; background: #777; border-radius: 50%; position: absolute; left: 0.35em; /* 全角中央寄せ */ top: 0.65em; } /* ===================================== コンテンツ小見出し ===================================== */ h4.pp-heading{ font-size: 1.1em; font-family: var(--font-sans); font-weight: 300; margin-top: 50px; } h4.qa-heading{ font-size: 1.15em; font-family: var(--font-sans); font-weight: 600; color: var(--aqua-green); margin-top: 50px; } /* ===================================== FAQ（dl/dt/dd） ===================================== */ .faq { margin: 0; padding: 0; } /* 1項目ごとの区切り */ .faq dt { margin: 0; padding: 0.9em 1em 0.9em 3.2em; /* 左にQバッジ分の余白 */ position: relative; font-weight: 700; line-height: 1.6; } .faq dd { margin: 0 0 1.1em; padding: 0.7em 1em 1.05em 3.2em; /* 左にAバッジ分の余白 */ position: relative; line-height: 1.8; } /* Q / A バッジ共通 */ .faq dt::before, .faq dd::before { position: absolute; left: 1em; top: 0.95em; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 0.2em; color: #fff; font-weight: 700; font-size: 0.85em; letter-spacing: 0.02em; } /* Q */ .faq dt::before { content: "Q"; background: var(--aqua-green); } /* A */ .faq dd::before { content: "A"; background: var(--light-green); } .faq dt, .faq dd { color: var(--text, #111); } /* ===================================== Post.php用 ===================================== */ /* 左：縦タイトル（下層流用） */ .page-shell--two-col .page-side-title{ position: sticky; top: calc(var(--header-h) + var(--page-top-gap)); display: flex; flex-direction: column; align-items: center; } .page-shell--two-col .page-side-title .v-title{ writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-serif); font-size: 36px; font-weight: 600; letter-spacing: .12em; line-height: 1.1; color: var(--dark-green); padding-top: 30px; } .post-wrap{ padding-bottom: 80px; /* まずはこのくらい */ } /* ===================================== 未就学児・小学生ページ下部の生徒・保護者の声 ===================================== */ .voice-wrapper{ padding: 30px 45px; border: 1px solid var(--line); } .voice-article{ margin-top: 30px; padding: 30px 45px; border: 1px solid var(--line); } .voice-wrapper h5, .voice-article h5{ font-family: var(--font-sans); font-weight: 600; } @media (max-width: 540px){ .voice-wrapper, .voice-article{ padding: 30px 20px; } } /*日時・カテゴリ名*/ .article-meta, .voice-article__meta{ margin: 15px 0; } .article-meta span.date, .voice-article__meta span.date{ font-size: 1.0em; padding-right: 0.5em; } .article-meta span.category, .voice-article__meta span.category{ font-size: 0.85em; color: #fff; line-height: 1.2; display: inline-block; margin-right: .5em; padding: .12em .55em; border-radius: 4px; } .article-meta span.category.cat-voice-child, .voice-article__meta span.category.cat-voice-child{ background: #6a5acd; } .article-meta span.category.cat-voice-kids, .voice-article__meta span.category.cat-voice-kids{ background: #99cc33; } .article-meta span.category.cat-voice-jr, .voice-article__meta span.category.cat-voice-jr{ background: #f32a5e; } /* ===================================== News.php用 ===================================== */ /* newsページ：一覧ブロックは白背景に */ .post-wrap--news #topics, .post-wrap--news .topic-inner{ background: #fff; } /* newsページ：tableを横幅いっぱいに */ .post-wrap--news table.topic-list{ width: 100%; } /* もし “白い箱” が狭い原因が inner の幅制限なら解除 */ .post-wrap--news .topic-inner{ max-width: none; /* これが効くと一気に広がる */ } /* tableセルの見た目が崩れるなら（任意） */ .post-wrap--news table.topic-list{ table-layout: fixed; /* 折返し安定 */ } /* ========================= Recruit form (koushi.php) ========================= */ .mailform-container{ margin-top: 2rem; padding: clamp(16px, 2.2vw, 28px); border: 1px solid rgba(0,0,0,.08); border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.04); } .mailform-container p.form-lead{ margin: 0 0 1.25rem; line-height: 1.75; font-size: 1.05em; font-family: var(--font-sans); font-weight: 400; color: rgba(0,0,0,.75); } .form{ display: grid; gap: 14px; } .form-row{ display: grid; gap: 8px; } .form-row label{ display: grid; gap: 8px; font-size: 0.95rem; line-height: 1.5; color: rgba(0,0,0,.85); } .req{ display: inline-block; padding: .15em .55em; border-radius: 999px; font-size: .75em; line-height: 1.4; background: #eef3f1; color: rgba(40,153,139,1); vertical-align: middle; } .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="date"], .form textarea{ width: 100%; border: 1px solid rgba(0,0,0,.18); border-radius: 6px; padding: 12px 14px; font-size: 16px; /* iOSズーム防止 */ line-height: 1.4; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; margin-bottom: 10px; } .form textarea{ resize: vertical; min-height: 7.5em; } .form input::placeholder{ color: rgba(0,0,0,.45); } .form input:focus, .form textarea:focus{ outline: none; border-color: rgba(40,153,139,.8); box-shadow: 0 0 0 4px rgba(40,153,139,.15); } /* 必須入力の簡易視認性（対応ブラウザのみ） */ .form input:required:invalid, .form textarea:required:invalid{ border-color: rgba(40,153,139,.8); } .mailform-container p.form-note{ margin: 8px 0; font-size: 1em; font-family: var(--font-sans); font-weight: 400; color: rgba(0,0,0,.65); } /*.form-actions*/ .form-actions{ display: flex; justify-content: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; } /* buttons*/ .formbtn{ display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 9em; padding: .85em 1.3em; border-radius: 999px; font-weight: 700; line-height: 1; } .formbtn-primary{ background: #28998b; color: #fff; } .formbtn-primary:hover{ background: #669999; } .formbtn-secondary{ background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.2); color: rgba(0,0,0,.75); } .formbtn-secondary:hover{ background: rgba(0,0,0,.2); } @media (max-width: 540px){ .form-actions{ justify-content: stretch; } .form-actions .formbtn{ width: 100%; justify-content: center; text-align: center; } } /*確認画面*/ .form-confirm-table{ width: 100%; border-collapse: collapse; border: 1px solid #d9f2e4; background: #fff; } .form-confirm-table th, .form-confirm-table td{ padding: 12px 14px; border-bottom: 1px solid #d9f2e4; vertical-align: top; } .form-confirm-table th{ width: 15em; font-weight: 400; background: #eef3f1; white-space: nowrap; } .form-error .error_messe{ color: #c00; margin: 6px 0; } /* mail_recruit.php 確認・完了 共通 */ .mailform-container{ width: 96%; margin-inline: auto; } .mailform-container p{ margin-bottom: 0; } /* select を input と同じトーンに */ .form select{ width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line, #cfd8d6); border-radius: 8px; background: #fff; font: inherit; } /* ちょい分かりやすく：フォーカス */ .form select:focus{ outline: none; border-color: var(--aqua-green, #669999); box-shadow: 0 0 0 3px rgba(102,153,153,.18); } /* form-row の下の余白（全体を少し呼吸させる） */ .form .form-row{ margin-bottom: 10px; } /* radio / checkbox はネイティブ表示に戻す */ input[type="radio"], input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; } /* 性別のラジオ：横並び */ .form-radio{ display: flex; gap: 18px; align-items: center; margin-top: 6px; } .form-radio label{ display: inline-flex; gap: 8px; align-items: center; } /* 希望日時：月日を横並びに */ .form-date{ display: flex; gap: 10px; align-items: center; margin-top: 6px; } .form-date select{ width: auto; min-width: 120px; /* “指定なし”も入る想定 */ } .form-date__unit{ white-space: nowrap; } /* SPでは縦積み */ @media (max-width: 540px){ .mailform-container{ width: 100%; } .form-confirm-table th, .form-confirm-table td{ display: block; width: 100%; } .form-confirm-table th{ border-bottom: none; padding-bottom: 6px; white-space: normal; } .form-confirm-table td{ padding-top: 0; } } /* ========================= 渋谷そろばん新聞 ========================= */ #newspaper-body h3{ font-size: 1.25em; line-height: 1.25; padding-left: 0.7em; border-left: 2px solid var(--aqua-green); } /*公開中ボタン*/ a.btn-badge{ color: #fff; font-size: 0.85em; font-family: var(--font-sans); display: inline-flex; padding: 0.1em 1.5em 0.1em 0.7em; border-radius: 2px; background: #f28c4f; margin-left: 10px; letter-spacing: 0.1em; position:relative; } a.btn-badge::after{ content: ""; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); position: absolute; top: calc(50% - 4px); right: 10px; } a.btn-badge:hover{ background: #e18122; } /*注意書き*/ .attention{ font-size: 90%; padding: 0.7em 1.0em; background: #f5f5f5; } /*ボーダー枠罫付き*/ .bordered-box{ padding:0.75em 1.0em; border: 1px solid #ddd; } /*スペーサー 罫線のみ*/ hr.border-spacer{ display: block; width: 50px; height: 1px; border: none; border-top: 1px solid var(--aqua-green); margin: 50px auto; } /*画像配置用クラス*/ .image-box { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); } /* 1枚のとき：2カラムのうち中央に配置（幅は常に1/2） */ .image-box:has(span:only-child) span { grid-column: 1 / -1; /* グリッド全体を使う */ max-width: 50%; /* ＝1カラム分の幅 */ margin-inline: auto; /* センター寄せ */ } /* SP：540px以下は強制1列 */ @media (max-width: 540px) { .image-box { grid-template-columns: 1fr; } .image-box:has(span:only-child) span { max-width: 100%; } } .image-box span { display: block; } .image-box img { display: block; width: 100%; height: auto; } /*リスト内講師の回答*/ .list-answer{ display:block; padding-left:1em; font-family: var(--font-serif); font-weight: var(--w-serif-body); } /* ========================= くろべえ紹介ページ ========================= */ .kurobei-article{ width: 100%; max-width: 700px; margin: 0 auto; } /* ========================= ページ下部の無料体験授業申込ボタン ========================= */ .btn-footer__freetrial{ display: flex; width: 400px; max-width: 80%; height: 60px; background: url("../images/common/freetrial_icon.png") no-repeat; background-size: 2.0em; background-color: var(--aqua-green); background-position: left 12px center; border-radius: 8px; font-size: 24px; color: #fff; font-weight: 600; align-items: center; justify-content: center; margin: 0 auto; position: relative; } .btn-footer__freetrial::after{ content: ""; position: absolute; top: 50%; right: 16px; width: 14px; height: 14px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg); pointer-events: none; } .btn-footer__freetrial:hover{ background-color: var(--light-green); } @media (max-width: 450px) { .btn-footer__freetrial{ max-width: 100%; font-size: 22px; } }