@charset "utf-8"; /*---------------------------- 先にトップ画領域はメインコンテンツ用を使用。 このCSSで上書きする。 -----------------------------*/ :root { font-size: 16px; /* --- 基本色 --- */ --base-color: #007f50; --accent: #d45a00; --alert-red: #c0392c; --bg-subtle-green: #e6f2ed; /* --- テキスト --- */ --text-body: #333333; /* 視認性向上のため少し濃く */ --text-muted: #666666; --text-white: #ffffff; /* --- 背景・面 --- */ --bg-white: #fff; --bg-accent: #fdf7f2; --bg-gray-light: #f5f5f5; /* --- 枠線・装飾 --- */ --border-light: #eeeeee; --border-color: #dddddd; /* --- 横幅 --- */ --width-box: 800px; } body { margin: 0; padding: 0; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; color: var(--text-body); background-color: var(--bg-white); line-height: 1.75; /* JIS準拠に近い読みやすさ */ -webkit-font-smoothing: antialiased; } .section-base{ padding:calc( 2em + 2vw ) 0; } .section-base h2 { font-size: 1.5em; color: var(--base-color); border-bottom: 2px solid var(--base-color); margin: 0 0 1.5em 0; padding-bottom: 0.4em; font-weight: 700; } .section-base h3 { font-size: 1.2em; color: var(--text-body); font-weight: 700; margin: 2.5em 0 0; padding-left: 0.75em; border-left: 0.3em solid var(--base-color); } .section-base h3 span { display: block; font-size: 70%; } .section-base h2 + h3 { margin-top: 0; } .section-base h3 + ul , .section-base h3 + p { margin-top: 1.5em; } .section-base a{ color: var(--base-color ); text-decoration: underline; } .section-base a[target="_blank"]{ color: var(--accent); } .section-base a[target="_blank"]::after { content: " ⧉"; font-size: 0.8em; text-decoration: none; display: inline-block; vertical-align: top; } .box-insight { position: relative; font-size: 0.9em; line-height: 1.7; padding: 1.5em; margin-top: 3em; background: var(--bg-accent); border-left: 4px solid var(--accent); } .box-insight h3{ font-size:inherit; line-height: inherit; color: var(--accent); border: none; margin: 0; padding: 0; } .box-insight p{ font-size:inherit; line-height: inherit; } .box-insight h3 + p , .box-insight p + p { margin-top: 0.5em; } /* ------------------------------ 2. データセクション
---------------------------------*/ .data-table { font-size: 0.95em; width:fit-content; border-collapse: collapse; margin-bottom: 0.75em; } .data-table th, .data-table td { border: 1px solid var(--border-color); padding: 0.75em 1em; } .data-table thead th { background: var(--bg-gray-light); color: var(--text-body); font-weight: 700; } .data-table tbody th { background: var(--bg-gray-light); text-align: left; } .data-table td { text-align: center; } /* ------------------------------ 3. 同系校
---------------------------------*/ .related-section{ background-color: var(--bg-gray-light); } .school-list2{ display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding-left: 0.5em; padding-right: 0.5em; margin:1.5em 0 0; } .school-list2 + ul { margin-top: 1em; } .school-list2 li{ margin: 0; padding: 3px 1em; border: 1px solid rgb(200,200,200); } .school-list2 li + li{ margin: 0; } .school-list2 li a{ color: currentColor; text-decoration:none; } .school-list2 li a:hover{ text-decoration:underline; } .school-list2 li.self{ background-color: var(--bg-subtle-green ); } /* ------------------------------ 4. 向き・不向き（定義リスト）
---------------------------------*/ .opinion-section h2{ margin-bottom: 0; } .type-opinion { margin-bottom: 0; } .type-opinion h3{ color: var(--text-body) !important; border-left: 0.3em solid var(--accent); margin-bottom: 2em !important; } .type-opinion + .type-opinion{ margin-top: -1em; } .type-opinion + .type-opinion::before{ display: block; content: ""; border-top: 1px solid var(--border-color); padding-top: 4em; } .type-opinion ul , .type-opinion dl { margin-top: 0; } .type-opinion dt { font-size: 1.05em; font-weight: 700; color: var(--alert-red); margin-bottom: 0.75em; } .type-opinion dt::before { content: "※"; margin-right: 0.2em; } .type-opinion dd { color: var(--text-body); padding-left: 1em; } .type-opinion dd + dt { margin-top: 1.75em; } /* ------------------------------ 5. 学習指針
---------------------------------*/ .guide-section { background-color: var(--bg-subtle-green); } .step-list { padding: 0; counter-reset: step-counter; } .step-list li { position: relative; display: flex; align-items: flex-start; border-radius: 2px; background: var(--bg-white); margin-bottom: 1em; padding: 1.25em; list-style: none; } .step-list li::before { counter-increment: step-counter; content: counter(step-counter); background: var(--base-color); color: var(--text-white); width: 1.75em; height: 1.75em; margin-right: 1em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-size: 0.9em; font-weight: bold; } .guide-section .box-insight{ border-color: var(--base-color); background-color: var(--bg-subtle-green); box-shadow: 0 0 1px var(--base-color); } /* ------------------------------ 6. 学校情報
---------------------------------*/ .senction-school-info{ padding: calc( 2em + 2vw) 0; } .senction-school-info .grid{ font-size: 0.9em; display: grid; grid-template-columns: 1fr; gap: 1.5em; margin: 2em 0; } @media (min-width: 600px) { .senction-school-info .grid { grid-template-columns: 1fr 1fr; } } .senction-school-info h2{ font-size: 1.2em; font-family:serif; font-weight:700; margin:0 0 1.5em; } .senction-school-info .box-map{ aspect-ratio: 4 / 3; min-width: 0; } .senction-school-info iframe.gmap{ height:100%; margin: 0 ; padding: 0; } /* ------------------------------ 7. リンク ---------------------------------*/ .sub-footer-grid ul{ grid-template-columns: 1fr; } .sub-footer-grid li{ width: fit-content; padding: 0 1.5em; margin-left: auto; margin-right: auto;} @media (max-width: 600px) { body { font-size: 15px; } .section-base { padding: 3em 1em; } .data-table tbody th { width: 40%; } }