@charset "UTF-8"; /*-------------------------------------------- FOUNDATION --------------------------------------------*/ /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } @font-face { font-family: "icomoon"; src: url("../fonts/icon/icomoon.eot?fsx2ee"); src: url("../fonts/icon/icomoon.eot?fsx2ee#iefix") format("embedded-opentype"), url("../fonts/icon/icomoon.ttf?fsx2ee") format("truetype"), url("../fonts/icon/icomoon.woff?fsx2ee") format("woff"), url("../fonts/icon/icomoon.svg?fsx2ee#icomoon") format("svg"); font-weight: normal; font-style: normal; font-display: block; } :root { --bgGray: #C4C4C4; --fontColor: #2D2D2D; --mainBlue: #007EDB; --hoverBlue: #004AAB; --subBlue: #e5f2ff; --subBlue02: #F7FBFF; --borderBlue: #ABCDF0; --borderBlue02: #4FAAED; --mainYellow: #FFF045; --subYellow02: #FFF586; --subYellow: #FFFEE7; --hoverYellow: #FFD344; --hoverYellowSub: #FFF9B7; --accent: #FF6103; --disable: #909090; --disable_pageNation: #D9D9D9; --line: #E1E1E1; --white: #fff; --login: #004387; --loginHover: #075CB1; --index: url("../img/common/index.svg"); --extra: url("../img/common/extra.svg"); --arrow_r: url("../img/common/arrow_r.svg"); --arrow_l: url("../img/common/arrow_l.svg"); --arrow_b: url("../img/common/arrow_b.svg"); --tag: url("../img/common/tag.svg"); --maskTop: url("../img/common/top.svg"); --maskBottom: url("../img/common/bottom.svg"); --maskTopNew: url("../img/common/top_mask.webp"); --maskBottomNew: url("../img/common/bottom_mask.webp"); --maskDividerTop: max(90px, calc(90 / 1440 * 100vw)); --maskDividerBottom: max(90px, calc(90 / 1440 * 100vw)); --lineRed: #FFE5E5; --text13: clamp(11px,1.525vw,13px); --text14: clamp(12px,1.625vw,14px); --text15: clamp(13px,1.725vw,15px); --text16: clamp(14px,1.875vw,16px); --text17: clamp(15px,2vw,17px); --text18: clamp(16px,2.125vw,18px); --text19: clamp(16px,2.1875vw,19px); --text20: clamp(16px,2.375vw,20px); --text22: clamp(18px,2.5625vw,22px); --text24: clamp(18px,2.75vw,24px); --text26: clamp(21px,2.9375vw,26px); --text30: clamp(22px,3.25vw,30px); --text32: clamp(24px,3.75vw,32px); --text36: clamp(26px,4vw,36px); --text38: clamp(30px,4vw,38px); --text40: clamp(30px,4vw,40px); --text46: clamp(30px,4.25vw,46px); --cutout:url("data:image/svg+xml;utf8,"); --baseEasing : cubic-bezier(0.445, 0.05, 0.55, 0.95); --ff_en: 'Raleway', sans-serif; --tabColor: #ABCCEA; --tabDisable: #C0DAF3; --tabDisableText: #84AACF; } /*-------------------------------------------- PATH --------------------------------------------*/ /*-------------------------------------------- STATE --------------------------------------------*/ /*-------------------------------------------- STATE --------------------------------------------*/ /*-------------------------------------------- COLOR --------------------------------------------*/ /*-------------------------------------------- EM --------------------------------------------*/ /*-------------------------------------------- FONT SIZE --------------------------------------------*/ /*-------------------------------------------- FONT SIZE SP --------------------------------------------*/ /*-------------------------------------------- FONT FAMIRY --------------------------------------------*/ /*-------------------------------------------- FONT WEIGHT --------------------------------------------*/ /*-------------------------------------------- DIVISION SHORTCODE --------------------------------------------*/ /*-------------------------------------------- COLOR --------------------------------------------*/ /*-------------------------------------------- WIDTH --------------------------------------------*/ /*-------------------------------------------- EASING --------------------------------------------*/ /*-------------------------------------------- UNITLESS --------------------------------------------*/ /*-------------------------------------------- STRING REPLACE --------------------------------------------*/ /*-------------------------------------------- CAMEL CASE --------------------------------------------*/ /*-------------------------------------------- MEDIA QUERY --------------------------------------------*/ /*-------------------------------------------- SCROLL BAR --------------------------------------------*/ /*-------------------------------------------- ICON --------------------------------------------*/ /*-------------------------------------------- NOISE TEXTURE（共通） Figma の feTurbulence 仕様を再現したノイズ SVG（data URI） --------------------------------------------*/ /*-------------------------------------------- PAPER BACKGROUND（ベース色＋横罫線＋ノイズ）ノート風の横罫線パターン --------------------------------------------*/ /*-------------------------------------------- GRID BACKGROUND（ベース色＋点線グリッド＋ノイズ）方眼ノート風のダッシュ格子模様パターン --------------------------------------------*/ /*-------------------------------------------- BINDER NOISE（白系背景用、薄い青タイントのノイズ） --------------------------------------------*/ /*-------------------------------------------- GRID LIGHT NOISE（Figma Rectangle 48 と同じ #D0E2F4 のノイズ）シード/分布は binder-noise と同一、色のみ濃いめ --------------------------------------------*/ /*-------------------------------------------- LIGHT GRID BACKGROUND（薄い水色＋白系の格子線＋ノイズ） Figma: Rectangle 48 のような淡色方眼パターン $base 既定: #DAE9F8（薄い水色） --------------------------------------------*/ /*-------------------------------------------- YELLOW PAPER NOISE（#FAF266 の黄色ノイズ）シード/分布は binder-noise と同一、色のみ黄系 --------------------------------------------*/ /*-------------------------------------------- YELLOW PAPER BACKGROUND（黄色＋うすい横罫線＋黄色ノイズ） Figma: 1052:9343 — 無料体験ボード用の黄ベース罫線パターン $base 既定: #FFF586（明るい黄色） --------------------------------------------*/ /*-------------------------------------------- CREAM PAPER NOISE（#FDFAD0 のクリーム色ノイズ）シード/分布は yellow-paper-noise と同一、色のみ淡クリーム系 --------------------------------------------*/ /*-------------------------------------------- CREAM PAPER BACKGROUND（淡クリーム色＋うすい横罫線＋クリームノイズ） Figma: 1509:65363 — クリーム系の罫線パターン $base 既定: #FFFEE7（淡いクリーム色） --------------------------------------------*/ /*-------------------------------------------- BINDER BACKGROUND（ベース色＋横罫線＋ノイズ＋左端の半円切り抜き）ルーズリーフ／システム手帳風の用紙パターン。 $base は白系の色を渡す前提（罫線は黒系の低透明度）。 --------------------------------------------*/ /*-------------------------------------------- BINDER BACKGROUND SPACED（gradient マスク版／上下マージン付き）既存 binder-bg と違い、マスクを SVG ではなく gradient で組むことで半円の半径 / 間隔 / 上下マージンを mixin 引数で可変にしたバージョン。半円が出る縦範囲を $margin（上下それぞれ）で制御できる。 --------------------------------------------*/ /*-------------------------------------------- BINDER BACKGROUND PLAIN（罫線・ノイズなし／pure gradient 版）参考コード準拠：mask-image を使わず background プロパティだけで実装。 $base 色が単色の見た目になり、半円位置のみ透明になって背後が透ける。 ※ 親要素に背景色を置く必要あり（透明箇所から透ける） --------------------------------------------*/ /*-------------------------------------------- BINDER BACKGROUND（ベース色＋横罫線＋ノイズ＋左端の半円切り抜き） $base は白系の色を渡す前提（罫線は黒系の低透明度）。 --------------------------------------------*/ /*-------------------------------------------- LINK TEXT SWAP（ホバーでテキストが下から入れ替わる）対象の（リンク要素）に @include する。テキストは文字列の形でラップしておくこと。本体（span）が上へスライドアウトし、同色の影（text-shadow）で作った複製が下からスライドインして入れ替わる。 ※ 1行テキスト専用。$offset は複製位置とスライド量（line-height:1.5 基準）。 --------------------------------------------*/ /*-------------------------------------------- FADE IN --------------------------------------------*/ /*-------------------------------------------- MOVE --------------------------------------------*/ /*-------------------------------------------- SCALE --------------------------------------------*/ /*-------------------------------------------- SCALE X --------------------------------------------*/ /*-------------------------------------------- SCALE Y --------------------------------------------*/ /*-------------------------------------------- KEYFRAMES --------------------------------------------*/ /*-------------------------------------------- BG TEXT INFINITE SCROLL 背景テキストの横方向無限スクロール（2セット並べた要素を -50% 動かすことで継ぎ目なくループ） --------------------------------------------*/ @-webkit-keyframes bgTextScroll { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } } @keyframes bgTextScroll { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } } /*-------------------------------------------- FADE UP（下からフェードイン） --------------------------------------------*/ @-webkit-keyframes fadeUp { from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } /*-------------------------------------------- REVEAL LEFT TO RIGHT 左から右に向かって clip-path を解除して表示する。 steps(N) と組み合わせて「N段階で出現」させると、 1文字ずつ現れるような効果になる。 --------------------------------------------*/ @-webkit-keyframes revealLR { from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } @keyframes revealLR { from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } /*-------------------------------------------- BASE --------------------------------------------*/ html { --scrollbar: 18px; font-size: 62.5%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-scroll-chaining: none; overscroll-behavior: none; } html.mpdal-open, html.is-drawerOpen, html.is-scrollLock { overflow: clip; padding-right: var(--scrollbar); } body { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 400; font-size: 1.6rem; color: #2D2D2D; line-height: 1.75; -webkit-font-smoothing: antialiased; word-wrap: break-word; overflow-wrap: break-word; } @media (width < 992px) { body { font-size: 1.6rem; } } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition-property: none; transition-property: none; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); } main, picture { display: block; } img { display: block; max-width: 100%; height: auto; } table { width: 100%; } a, button { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a { color: currentColor; text-decoration: none; outline: none; -webkit-transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); word-break: break-all; } button { padding: 0; background: transparent; border: none; outline: none; color: currentColor; cursor: pointer; -webkit-transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } svg { fill: currentColor; } sup { font-size: max(0.625em, 10px); vertical-align: super; } sub { font-size: max(0.625em, 10px); vertical-align: sub; } @-webkit-keyframes splide-loading { 0% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes splide-loading { 0% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } .splide__track--draggable { -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; } .splide__track--fade > .splide__list > .splide__slide { margin: 0 !important; opacity: 0; z-index: 0; } .splide__track--fade > .splide__list > .splide__slide.is-active { opacity: 1; z-index: 1; } .splide--rtl { direction: rtl; } .splide__track--ttb > .splide__list { display: block; } .splide__container { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .splide__list { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: -ms-flexbox; display: -webkit-box; display: flex; height: 100%; margin: 0 !important; padding: 0 !important; } .splide.is-initialized:not(.is-active) .splide__list { display: block; } .splide__pagination { -ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; margin: 0; pointer-events: none; } .splide__pagination li { display: inline-block; line-height: 1; list-style-type: none; margin: 0; pointer-events: auto; } .splide:not(.is-overflow) .splide__pagination { display: none; } .splide__progress__bar { width: 0; } .splide { position: relative; visibility: hidden; } .splide.is-initialized, .splide.is-rendered { visibility: visible; } .splide__slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; list-style-type: none !important; margin: 0; position: relative; } .splide__slide img { vertical-align: bottom; } .splide__spinner { -webkit-animation: splide-loading 1s linear infinite; animation: splide-loading 1s linear infinite; border: 2px solid #999; border-left-color: transparent; border-radius: 50%; bottom: 0; contain: strict; display: inline-block; height: 20px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 20px; } .splide__sr { clip: rect(0 0 0 0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause { display: none; } .splide__toggle.is-active .splide__toggle__pause { display: inline; } .splide__track { overflow: hidden; position: relative; z-index: 0; } /*-------------------------------------------- LAYOUT --------------------------------------------*/ /*-------------------------------------------- CONTENT --------------------------------------------*/ .l-container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; overflow: clip; } /*-------------------------------------------- HEADER --------------------------------------------*/ .l-header { position: -webkit-sticky; position: sticky; left: 0; top: 0; width: 100%; z-index: 100; } .l-header.--home { opacity: 0; } /*-------------------------------------------- MAIN --------------------------------------------*/ .l-main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } /*-------------------------------------------- FOOTER --------------------------------------------*/ /*-------------------------------------------- OBJECT --------------------------------------------*/ /*-------------------------------------------- XXXX --------------------------------------------*/ /*-------------------------------------------- XXXX --------------------------------------------*/ @media screen { .c-fade { -webkit-transform: translate3d(0, 3rem, 0); transform: translate3d(0, 3rem, 0); opacity: 0; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .c-fade.is-anime { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .c-fade { -webkit-transition-delay: var(--t-delay, 0.2s); transition-delay: var(--t-delay, 0.2s); } .c-fadeGroup { -webkit-transform: translate3d(0, 2rem, 0); transform: translate3d(0, 2rem, 0); opacity: 0; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition-delay: var(--t-delay, 0.2s); transition-delay: var(--t-delay, 0.2s); } .is-anime .c-fadeGroup { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } .c-timeDelay01 { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; --t-delay: 0.4s; } .c-timeDelay02 { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; --t-delay: 0.6s; } .c-timeDelay03 { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; --t-delay: 0.8s; } .c-timeDelay04 { -webkit-transition-delay: 1s; transition-delay: 1s; --t-delay: 1s; } .c-timeDelay05 { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; --t-delay: 1.2s; } .c-timeDelay06 { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; --t-delay: 1.4s; } .c-timeDelay07 { -webkit-transition-delay: 1.6s; transition-delay: 1.6s; --t-delay: 1.6s; } .c-timeDelay08 { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; --t-delay: 1.8s; } .c-timeDelay09 { -webkit-transition-delay: 2s; transition-delay: 2s; --t-delay: 2s; } /*-------------------------------------------- FADE IN（横方向スライド）祖先（または自身）に js-anime → is-anime が付くと発火する。 .c-fadeRight: 右からスライドイン / .c-fadeLeft: 左からスライドイン移動量は --shift（既定 3rem）で個別に上書き可能。 --------------------------------------------*/ .c-fadeRight, .c-fadeLeft { --shift: 3rem; opacity: 0; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-duration: 0.9s; transition-duration: 0.9s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition-delay: var(--t-delay, 0s); transition-delay: var(--t-delay, 0s); will-change: opacity, transform; } .c-fadeRight { -webkit-transform: translate3d(var(--shift), 0, 0); transform: translate3d(var(--shift), 0, 0); } .c-fadeLeft { -webkit-transform: translate3d(calc(var(--shift) * -1), 0, 0); transform: translate3d(calc(var(--shift) * -1), 0, 0); } .is-anime.c-fadeRight, .is-anime .c-fadeRight, .is-anime.c-fadeLeft, .is-anime .c-fadeLeft { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*-------------------------------------------- XXXX --------------------------------------------*/ /*-------------------------------------------- SEARCH BUTTON（校舎を探す） - default ... ヘッダー用の小サイズ・青枠線 - .--lg ... フッター用の大サイズ・矢印付き --------------------------------------------*/ .c-btnSearch { position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 5px; min-height: 46px; padding: 10px 20px 11px; border: 2px solid var(--mainBlue); border-radius: 50px; background: var(--white); color: var(--mainBlue); font-size: var(--text15); font-weight: 700; line-height: 1.5; white-space: nowrap; -webkit-transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .c-btnSearch::before { content: ""; position: absolute; left: -50%; bottom: 0; width: 200%; height: 150%; z-index: 0; border-radius: 50% 50% 0 0/100% 100% 0 0; background-color: var(--mainYellow); -webkit-transform: translateY(101%); transform: translateY(101%); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); pointer-events: none; } .c-btnSearch__icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 14px; aspect-ratio: 1; position: relative; z-index: 2; } .c-btnSearch__icon svg { width: 100%; } .c-btnSearch__arrow { position: relative; display: grid; place-items: center; z-index: 1; overflow: hidden; width: 7px; aspect-ratio: 1/2; margin-left: auto; } .c-btnSearch__arrow::before, .c-btnSearch__arrow::after { content: ""; grid-column: 1; grid-row: 1; width: 100%; height: 100%; background-color: currentColor; display: block; -webkit-mask-image: var(--arrow_r); mask-image: var(--arrow_r); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; margin-left: auto; } .c-btnSearch__arrow::before { -webkit-transform: translateX(-250%); transform: translateX(-250%); } .c-btnSearch__text { position: relative; z-index: 2; } .c-btnSearch { /*--- 大サイズ（フッター用）---*/ } .c-btnSearch.--lg { max-width: 240px; width: 100%; min-height: 60px; padding: 10px 20px 11px 25px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 15px; } @media (width < 768px) { .c-btnSearch.--lg { max-width: 200px; font-size: 14px; min-height: 46px; } } @media (hover: hover) { .c-btnSearch:hover::before { -webkit-transform: translateY(0); transform: translateY(0); } .c-btnSearch:hover .c-btnSearch__arrow::before { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-transform: translateX(0%); transform: translateX(0%); } .c-btnSearch:hover .c-btnSearch__arrow::after { -webkit-transform: translateX(250%); transform: translateX(250%); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } } /*-------------------------------------------- BUTTON（汎用ボタン） Figma: Frame 127 — 240×60、青地・白文字・右矢印 --------------------------------------------*/ .c-btn { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; overflow: hidden; max-width: 100%; width: 100%; min-height: 60px; padding: 10px 20px 11px 25px; border-radius: 100vmax; background: var(--mainBlue); color: var(--white); font-size: var(--text16); font-weight: 700; line-height: 1.5; white-space: nowrap; } @media (width < 768px) { .c-btn { min-height: 46px; } } .c-btn { /*--- ホバーで下からせり上がるドーム型の塗り（青ボタン: --hoverBlue）---*/ } .c-btn::before { content: ""; position: absolute; left: -50%; bottom: 0; width: 200%; height: 150%; z-index: 0; border-radius: 50% 50% 0 0/100% 100% 0 0; background-color: var(--hoverBlue); -webkit-transform: translateY(101%); transform: translateY(101%); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); pointer-events: none; } .c-btn.--center { margin-inline: auto; } .c-btn.--right { margin-left: auto; } .c-btn.--fit { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .c-btn.--220 { max-width: 220px; } .c-btn.--240 { max-width: 240px; } .c-btn.--280 { max-width: 280px; } .c-btn.--map { min-height: 40px; padding: 5px 15px 6px 20px; gap: 20px; } .c-btn.--white { background-color: var(--white); border: 2px solid var(--mainBlue); color: var(--mainBlue); } .c-btn.--white::before { background-color: var(--mainYellow); } .c-btn.--white.--hoverYellow::before { background-color: var(--mainBlue); } @media (hover: hover) { .c-btn.--white.--hoverYellow:hover { color: var(--white); } } .c-btn.--whiteBg { background-color: var(--white); color: var(--mainBlue); } .c-btn.--whiteBg::before { background-color: var(--mainYellow); } @media (768px <= width) { .c-btn.--noicon.--spIcon { text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media (width < 992px) { .c-btn.--tabCenter { margin-inline: auto; } } @media (width < 768px) { .c-btn.--spCenter { margin-inline: auto; } } @media (width < 768px) { .c-btn.--sp200 { max-width: 200px; } } @media (width < 768px) { .c-btn.--sp220 { max-width: 220px; } } @media (width < 768px) { .c-btn.--sp240 { max-width: 240px; } } @media (width < 576px) { .c-btn.--ssCenter { margin-inline: auto; } } @media (width < 576px) { .c-btn.--ss220 { max-width: 220px; } } .c-btn__text { position: relative; z-index: 1; } .c-btn__arrow { position: relative; display: grid; place-items: center; z-index: 1; overflow: hidden; width: 7px; aspect-ratio: 1/2; } .c-btn__arrow::before, .c-btn__arrow::after { content: ""; grid-column: 1; grid-row: 1; width: 100%; height: 100%; background-color: currentColor; display: block; -webkit-mask-image: var(--arrow_r); mask-image: var(--arrow_r); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; margin-left: auto; } .c-btn__arrow::before { -webkit-transform: translateX(-250%); transform: translateX(-250%); } .c-btn__arrow.--extra { -webkit-mask-image: var(--extra); mask-image: var(--extra); width: 14px; aspect-ratio: 1; background-color: currentColor; display: block; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; margin-left: auto; } .c-btn__arrow.--extra::after, .c-btn__arrow.--extra::before { display: none; } @media (hover: hover) { .c-btn:hover::before { -webkit-transform: translateY(0); transform: translateY(0); } .c-btn:hover .c-btn__arrow::before { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-transform: translateX(0%); transform: translateX(0%); } .c-btn:hover .c-btn__arrow::after { -webkit-transform: translateX(250%); transform: translateX(250%); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } } /*--- アコーディオン派生（お知らせ「その他を見る」など。＋⇔－トグル）---*/ .c-btn.--accordion { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 260px; } @media (width < 768px) { .c-btn.--accordion { min-width: 240px; } } .c-btn__plus { position: relative; z-index: 1; -webkit-box-flex: 0; -ms-flex: 0 0 12px; flex: 0 0 12px; width: 12px; height: 12px; } .c-btn__plus::before, .c-btn__plus::after { content: ""; position: absolute; top: 50%; left: 50%; background-color: currentColor; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .c-btn__plus::before { width: 12px; height: 2px; } .c-btn__plus::after { width: 2px; height: 12px; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .c-btn.--accordion.is-open .c-btn__plus::after { opacity: 0; } /*-------------------------------------------- DECONAME --------------------------------------------*/ /*-------------------------------------------- INNER --------------------------------------------*/ .c-inner { width: 100%; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } @media (width < 992px) { .c-inner { padding-left: 30px; padding-right: 30px; } } @media (width < 768px) { .c-inner { padding-left: 20px; padding-right: 20px; } } .c-inner.--gutter0 { padding-left: 0; padding-right: 0; } @media (992px <= width) { .c-inner { max-width: calc(120rem + 40px * 2); } .c-inner.--full { max-width: 100%; } .c-inner.--gutter0 { max-width: 120rem; } } /*-------------------------------------------- XXXX --------------------------------------------*/ /*-------------------------------------------- GRID --------------------------------------------*/ .c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; } .c-grid__itemFrame.--full { grid-column: 1/-1; } .c-grid.--gapXs { gap: 20px; } .c-grid.--gapSm { gap: 30px; } .c-grid.--gapRow0 { row-gap: 0; } .c-grid.--gapRowSs { row-gap: 10px; } .c-grid.--gapRowXs { row-gap: 20px; } .c-grid.--gapRowSm { row-gap: 30px; } .c-grid.--gapCol0 { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } .c-grid.--gapColSs { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } .c-grid.--gapColXs { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .c-grid.--gapColSm { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } @media (768px <= width) { .c-grid.--col3 { grid-template-columns: 1fr 1fr 1fr; } } @media (width < 992px) { .c-grid { gap: 35px; } .c-grid.--gapRowXs { row-gap: 15px; } .c-grid.--gapRowSm { row-gap: 20px; } .c-grid.--gapColXs { -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } .c-grid.--gapColSm { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .c-grid.--gapXs { gap: 15px; } .c-grid.--gapSm { gap: 20px; } } @media (width < 768px) { .c-grid { grid-template-columns: 1fr; gap: 20px; } .c-grid.--spRowGap40{ row-gap: 40px; } .c-grid.--spRowGap50{ row-gap: 50px; } } @media (width < 768px) and (576px <= width) { .c-grid { grid-template-columns: 1fr; } .c-grid.--col2XS { grid-template-columns: 1fr 1fr; } } @media (width < 768px) { .c-grid.--col2SP { grid-template-columns: 1fr 1fr; } } /*-------------------------------------------- XXXX --------------------------------------------*/ /*-------------------------------------------- XXXXX --------------------------------------------*/ .c-img { width: 100%; } /*-------------------------------------------- XXXX --------------------------------------------*/ /*-------------------------------------------- XXXX --------------------------------------------*/ /*-------------------------------------------- XXXX --------------------------------------------*/ /*-------------------------------------------- BRAND LOGO --------------------------------------------*/ .c-logo { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; width: 140px; -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .c-logo { width: 120px; } } .c-logo.--footer { width: 100%; max-width: 240px; } @media (width < 768px) { .c-logo.--footer { max-width: 180px; margin-inline: auto; } } @media (hover: hover) { .c-logo:hover { opacity: 0.7; } } /*-------------------------------------------- PAGE TOP BUTTON（ページトップへ戻る） --------------------------------------------*/ /*-------------------------------------------- BASIC --------------------------------------------*/ /*-------------------------------------------- BASIC --------------------------------------------*/ /*-------------------------------------------- TEXT --------------------------------------------*/ /*-------------------------------------------- 英字見出し（黄色タグアイコン＋Raleway） --------------------------------------------*/ .c-ttl { display: grid; row-gap: 10px; } @media (width < 768px) { .c-ttl { row-gap: 5px; } } .c-ttl__en { display: grid; grid-template-columns: auto 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; } .c-ttl__icon { width: 23px; aspect-ratio: 23/19; display: grid; } @media (width < 768px) { .c-ttl__icon { width: 18px; } } .c-ttl__icon.--blue { --color1: var(--mainBlue); } .c-ttl__icon.--yellow { --color1: var(--mainYellow); } .c-ttl__icon.--white { --color1: var(--white); } .c-ttl__enText { font-family: var(--ff_en); font-size: var(--text30); font-weight: 600; line-height: 1; } @media (width < 768px) { .c-ttl__enText { font-size: 18px; } } .c-ttl__enText.--white { color: var(--white); } .c-ttl__enText.--ja { font-family: 'Zen Kaku Gothic New', sans-serif; font-size: var(--text24); font-weight: 700; line-height: 1.5; } @media (width < 768px) { .c-ttl__enText.--ja { font-size: 16px; } } .c-ttl__enText.--ja sup { font-size: 0.6em; vertical-align: super; } .c-ttl__ja { font-size: var(--text46); font-weight: 700; line-height: 1.5; color: var(--mainBlue); } @media (width < 768px) { .c-ttl__ja { font-size: 32px; } } .c-ttl__ja.--white { color: var(--white); } /*-------------------------------------------- BREADCRUMB --------------------------------------------*/ /*-------------------------------------------- DRAWER（ハンバーガーメニュー / pc_xs 以下のみ）クリップパスで上から下に展開して出現 --------------------------------------------*/ .p-drawer { position: fixed; inset: 0; z-index: 7; width: 100%; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--mainBlue); -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); pointer-events: none; -webkit-transition: -webkit-clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1); transition: -webkit-clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1); transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1); transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1), -webkit-clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1); will-change: clip-path; } @media (992px <= width) { .p-drawer { display: none; } } body.is-drawerOpen .p-drawer { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); pointer-events: auto; } .p-drawer__inner { position: relative; width: 100%; min-height: 100%; padding: 12px 15px 60px 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40px; } .p-drawer { /*-------------------------------------------- ヘッダー（ロゴ + 閉じるボタン） --------------------------------------------*/ } .p-drawer__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; } .p-drawer__logo { -ms-flex-negative: 0; flex-shrink: 0; min-height: 51px; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .p-drawer { /*-------------------------------------------- メニューリスト --------------------------------------------*/ } .p-drawer__list { margin-top: 40px; padding: 0 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (width < 768px) { .p-drawer__list { margin-top: 0; } } .p-drawer__item { border-bottom: 1px solid var(--borderBlue02); } .p-drawer__link { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; padding: 17px 15px; color: var(--white); font-weight: 700; font-size: 16px; line-height: 1.5; text-align: left; cursor: pointer; -webkit-transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (hover: hover) { .p-drawer__link:hover { color: var(--mainYellow); } } .p-drawer__linkLabel { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; } .p-drawer__linkIcon { -webkit-mask-image: var(--arrow_r); mask-image: var(--arrow_r); width: 7px; aspect-ratio: 1/2; background-color: currentColor; display: block; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; margin-left: auto; } .p-drawer { /*-------------------------------------------- アコーディオン開閉アイコン（+ / -） --------------------------------------------*/ } .p-drawer__toggleIcon { -ms-flex-negative: 0; flex-shrink: 0; position: relative; display: block; width: 14px; height: 14px; } .p-drawer__toggleIcon::before, .p-drawer__toggleIcon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 2px; background-color: currentColor; border-radius: 2px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-drawer__toggleIcon::after { -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .js-accordion.is-open .p-drawer__toggleIcon::after { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } .p-drawer__subMenu { color: var(--white); padding-inline: 30px 15px; padding-bottom: 17px; display: grid; row-gap: 15px; } .p-drawer__subMenu a { font-weight: 700; font-size: 16px; line-height: 1.5; -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); display: grid; grid-template-columns: auto 1fr; } .p-drawer__subMenu a::before { content: "・"; } @media (hover: hover) { .p-drawer__subMenu a:hover { color: var(--mainYellow); } } .p-drawer { /*-------------------------------------------- CTAボタン（校舎を探す / 無料体験・資料請求） --------------------------------------------*/ } .p-drawer__actions { margin: 0 auto; width: 240px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } .p-drawer__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; height: 60px; padding: 10px 20px 11px 25px; border-radius: 100vmax; color: var(--mainBlue); font-weight: 700; font-size: 16px; line-height: 1.5; text-decoration: none; -webkit-transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); position: relative; overflow: hidden; } .p-drawer__btn::before { content: ""; position: absolute; left: -50%; bottom: 0; width: 200%; height: 150%; z-index: 0; border-radius: 50% 50% 0 0/100% 100% 0 0; -webkit-transform: translateY(101%); transform: translateY(101%); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); pointer-events: none; } .p-drawer__btn--search { background: var(--white); } .p-drawer__btn--search::before { background-color: var(--mainYellow); } .p-drawer__btn--contact { background: var(--mainYellow); } .p-drawer__btn--contact::before { background-color: var(--white); } .p-drawer__btn.is-hidden{ display: none; } @media (hover: hover) { .p-drawer__btn:hover::before { -webkit-transform: translateY(0); transform: translateY(0); } } .p-drawer__btnMain { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .p-drawer__btnIcon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 16px; height: 16px; color: var(--mainBlue); position: relative; z-index: 2; } .p-drawer__btnIcon > svg { display: block; width: 100%; height: 100%; fill: currentColor; } .p-drawer__btnText { position: relative; z-index: 2; } .p-drawer__btnArrow { -webkit-mask-image: var(--arrow_r); mask-image: var(--arrow_r); width: 7px; aspect-ratio: 1/2; background-color: currentColor; display: block; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; margin-left: auto; } .p-drawer__btn--request { background: var(--mainYellow); } .p-drawer__btn--request::before { background-color: var(--white); } .p-drawer__btn--tel { background: var(--white); } .p-drawer__btn--tel::before { background-color: var(--mainYellow); } .p-drawer__actions--recruit { width: 100%; } .p-drawer__btnRow { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; } .p-drawer__btnRow .p-drawer__btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; font-size: 15px; } /*-------------------------------------------- ドロワー展開中のbodyスクロールロック --------------------------------------------*/ body.is-drawerOpen { overflow: hidden; } /*-------------------------------------------- FLOAT BUTTONS（PC限定：右側の追従ボタン群） --------------------------------------------*/ .p-floatBtns { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-floatBtns.is-ready { opacity: 1; visibility: visible; } .p-floatBtns.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } @media (width < 768px) { .p-floatBtns { display: none; } } .p-floatBtns { /*-------------------------------------------- LOGIN（縦長の濃紺ボタン、右端中央） --------------------------------------------*/ } .p-floatBtns__login { position: fixed; top: 35%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 7; display: block; width: 50px; height: 200px; -webkit-transition: 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95); background-color: var(--login); border-radius: 15px 0 0 15px; } .p-floatBtns__login > img { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media (hover: hover) { .p-floatBtns__login:hover { background-color: var(--loginHover); } } .p-floatBtns { /*-------------------------------------------- BANNER（無料体験・資料請求バナー、右下） --------------------------------------------*/ } .p-floatBtns__bnr { position: fixed; right: 10px; bottom: 10px; z-index: 7; max-width: 320px; -webkit-transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (hover: hover) { .p-floatBtns__bnr:hover { -webkit-transform: translateY(-5%); transform: translateY(-5%); } } .p-floatBtns__bnr.is-closed { display: none; } .p-floatBtns__bnrLink { display: grid; } .p-floatBtns__bnrLink::after, .p-floatBtns__bnrLink::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 100% 100%; background-repeat: no-repeat; } .p-floatBtns__bnrLink::before { background-image: url(../img/common/float_bnr_bg.webp); -webkit-transition: 0s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: 0s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-floatBtns__bnrLink::after { background-image: url(../img/common/float_bnr_bg_hover.webp); opacity: 0; -webkit-transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-floatBtns__bnrLink > img { display: block; position: relative; z-index: 1; width: 100%; height: auto; } @media (hover: hover) { .p-floatBtns__bnrLink:hover::after { opacity: 1; } } .p-floatBtns__bnrClose { position: absolute; top: 0px; right: 8px; width: 26px; aspect-ratio: 1; background: var(--white); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; display: grid; place-items: center; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); z-index: 1; } @media (hover: hover) { .p-floatBtns__bnrClose:hover { opacity: 0.7; } } .p-floatBtns__bnrCloseIcon { position: relative; width: 12px; aspect-ratio: 1; } .p-floatBtns__bnrCloseIcon::before, .p-floatBtns__bnrCloseIcon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; border-radius: 50%; background: var(--fontColor); -webkit-transform-origin: center; transform-origin: center; } .p-floatBtns__bnrCloseIcon::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .p-floatBtns__bnrCloseIcon::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /*-------------------------------------------- FOOTER --------------------------------------------*/ .l-footer { background-color: var(--subBlue); position: relative; } .l-footer.--teaser{ border-top: none; background-color: transparent; } .p-footer { position: relative; color: var(--white); background-color: var(--mainBlue); margin-top: max(70px, 4.8611111111vw); } .p-footer::before { content: ""; aspect-ratio: 1440/90; background-color: var(--mainBlue); -webkit-mask-size: 102% auto; mask-size: 102% auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 110%; } .p-footer::before { -webkit-mask-image: var(--maskTopNew); mask-image: var(--maskTopNew); bottom: calc(100% - 1px); -webkit-mask-position: center top; mask-position: center top; } .p-footer { /*-------------------------------------------- PAGETOP（右上の白い丸ボタン、curve 外側エリアに配置） --------------------------------------------*/ } .p-footer__pagetop { position: absolute; top: 0; right: 3.5%; z-index: 5; width: 175px; aspect-ratio: 1; display: grid; place-items: center; --bgColor: var(--white); -webkit-transform: translateY(-25%); transform: translateY(-25%); } @media (hover: hover) { .p-footer__pagetop:hover { --bgColor: var(--mainYellow); } } @media (width < 768px) { .p-footer__pagetop { -webkit-transform: translateY(0); transform: translateY(0); top: 35px; width: 60px; right: 15px; } } .p-footer__pagetopInner { width: 54.2857142857%; aspect-ratio: 1; border-radius: 50%; background: var(--bgColor); -webkit-transition: background 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-footer__pagetopInner { width: 100%; } } .p-footer { /*-------------------------------------------- INNER（コンテンツエリア） --------------------------------------------*/ } .p-footer__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-block: 90px 60px; } @media (width < 768px) { .p-footer__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-block: 40px 40px; gap: 60px; } } .p-footer { /*-------------------------------------------- LEFT COLUMN（ロゴ＋校舎を探す＋リンク） --------------------------------------------*/ } .p-footer__left { position: relative; width: 20%; } .p-footer__left::after { content: ""; position: absolute; top: 0; right: -78.5714285714%; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.5); } @media (width < 992px) { .p-footer__left { width: 25%; } .p-footer__left::after { right: -50%; } } @media (width < 768px) { .p-footer__left { width: 100%; } .p-footer__left::after { top: auto; bottom: -20px; right: 0; left: 0; width: 100%; height: 1px; } } @media (width < 768px) { .p-footer__logoFrame { text-align: center; } } .p-footer__btnSearch { margin-top: 52px; } @media (width < 768px) { .p-footer__btnSearch { margin-top: 25px; margin-inline: auto; } } .p-footer__leftLinks { margin-top: 30px; display: grid; row-gap: 20px; } .p-footer__leftLinks a { color: var(--white); font-size: var(--text16); line-height: 1.5; font-weight: 500; } @media (width < 768px) { .p-footer__leftLinks { margin-top: 20px; grid-template-columns: repeat(3, auto); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; row-gap: 0; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } .p-footer__leftLinks a { font-size: 13px; } } .p-footer { /*-------------------------------------------- NAVIGATION（3カラム） --------------------------------------------*/ } .p-footer__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; width: 56.6666666667%; } @media (width < 768px) { .p-footer__nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; gap: 40px; } } .p-footer__navCol { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; display: grid; gap: 30px; } @media (width < 768px) { .p-footer__navCol { width: 100%; gap: 15px; } } .p-footer__heading { display: grid; grid-template-columns: auto 1fr; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .p-footer__heading::before { content: ""; width: 18px; aspect-ratio: 18/15; -webkit-mask-image: var(--tag); mask-image: var(--tag); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; background-color: var(--mainYellow); } .p-footer__headingText { color: var(--white); font-size: var(--text20); font-family: var(--ff_en); font-weight: 600; line-height: 1; } @media (width < 768px) { .p-footer__headingText { font-size: 22px; } } .p-footer__navList { display: grid; row-gap: 30px; } @media (width < 768px) { .p-footer__navList { grid-template-columns: auto auto; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; row-gap: 10px; padding-left: 10px; grid-template-areas: "item1 item5" "item2 item5" "item3 item5" "item4 item5"; } .p-footer__navList.--about li { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .p-footer__navList.--about li:nth-of-type(1) { grid-area: item1; } .p-footer__navList.--about li:nth-of-type(2) { grid-area: item2; } .p-footer__navList.--about li:nth-of-type(3) { grid-area: item3; } .p-footer__navList.--about li:nth-of-type(4) { grid-area: item4; } .p-footer__navList.--about li:nth-of-type(5) { grid-area: item5; } .p-footer__navList.--company { display: block; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; } .p-footer__navList.--company li { margin-bottom: 10px; } } .p-footer__subList { margin: 15px 0 0; padding-left: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } @media (width < 768px) { .p-footer__subList { margin-top: 0px; padding-left: 5px; gap: 5px; } } .p-footer { /*-------------------------------------------- LINKS --------------------------------------------*/ } .p-footer__link { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: var(--text16); font-weight: 500; line-height: 1.5; color: var(--white); } .p-footer__link.--noLink { cursor: default; } @media (width < 768px) { .p-footer__link { font-size: 14px; } } @media (hover: hover) { .p-footer__link:not(.--noLink):hover { color: var(--mainYellow); } } .p-footer__subLink { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-size: var(--text16); font-weight: 500; line-height: 1.5; color: var(--white); } .p-footer__subLink::before { content: ""; -ms-flex-negative: 0; flex-shrink: 0; width: 3px; aspect-ratio: 1; border-radius: 50%; background: currentColor; } @media (width < 768px) { .p-footer__subLink { gap: 8px; font-size: 14px; } } @media (hover: hover) { .p-footer__subLink:hover { color: var(--mainYellow); } } .p-footer { /*-------------------------------------------- BOTTOM（プライバシー・コピーライト） --------------------------------------------*/ } .p-footer__bottom { position: relative; z-index: 2; } @media (width < 768px) { .p-footer__bottom { padding-bottom: 20px; } } .p-footer__privacy { display: inline-block; font-size: var(--text16); font-weight: 500; color: var(--white); line-height: 1.5; } @media (width < 768px) { .p-footer__privacy { font-size: 14px; } } @media (hover: hover) { .p-footer__privacy:hover { color: var(--mainYellow); } } .p-footer__copy { margin-top: 10px; font-size: var(--text14); font-weight: 500; color: #91C8F0; line-height: 1.5; } @media (width < 768px) { .p-footer__copy { font-size: 12px; margin-top: 12px; } } .p-footer { /*-------------------------------------------- BG TEXT（流れる Discover Your Potential!） --------------------------------------------*/ } .p-footer__bgText { color: var(--white); opacity: 0.1; font-family: var(--ff_en); font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; pointer-events: none; z-index: 1; font-size: 100px; } @media (width < 768px) { .p-footer__bgText { font-size: 50px; } } .p-footer__bgTextInner { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: bgTextScroll 60s linear infinite; animation: bgTextScroll 60s linear infinite; } @media (width < 768px) { .p-footer__bgTextInner { -webkit-animation: bgTextScroll 30s linear infinite; animation: bgTextScroll 30s linear infinite; } } .p-footer__bgTextItem { -ms-flex-negative: 0; flex-shrink: 0; } /*-------------------------------------------- GLOBAL NAVIGATION --------------------------------------------*/ @media (992px <= width) { .p-gnav__inner { width: 100%; } .p-gnav__list { display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-left: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; row-gap: 10px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .p-gnav__item { line-height: 1; position: relative; } } @media (992px <= width) and (hover: hover) { .p-gnav__item:has(.--more):hover .p-gnav__link { color: var(--mainBlue); } .p-gnav__item:has(.--more):hover .p-gnav__link > span { -webkit-transform: translateY(-1.5em); transform: translateY(-1.5em); } .p-gnav__item:has(.--more):hover .p-gnav__link::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .p-gnav__item:has(.--more):hover::after { content: ""; width: 150%; height: 200%; display: block; position: absolute; top: 100%; left: -25; } .p-gnav__item:has(.--more):hover .p-gnav__megaMenu { -webkit-transform: translateX(-15%) translateY(0%); transform: translateX(-15%) translateY(0%); opacity: 1; visibility: visible; } } @media (992px <= width) { .p-gnav__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--text14); font-weight: 700; line-height: 1.5; -webkit-transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-gnav__link:not(.--more) { overflow: hidden; } .p-gnav__link:not(.--more) > span { display: inline-block; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); text-shadow: 0 1.5em 0 currentColor; } } @media (992px <= width) and (hover: hover) { .p-gnav__link:not(.--more):hover { color: #007EDB; } .p-gnav__link:not(.--more):hover > span { -webkit-transform: translateY(-1.5em); transform: translateY(-1.5em); } } @media (992px <= width) { .p-gnav__link.--more { -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; overflow: hidden; } .p-gnav__link.--more > span { display: inline-block; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); text-shadow: 0 1.5em 0 currentColor; } .p-gnav__link.--more::after { content: ""; -webkit-mask-image: var(--arrow_b); mask-image: var(--arrow_b); width: 10px; aspect-ratio: 1/2; background-color: var(--mainBlue); display: block; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-gnav__overlay { display: none; } } .p-gnav__megaMenu { position: fixed; top: calc(var(--h_height) + 10px); border-radius: 10px; padding: 20px; background-color: var(--subBlue); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08); -webkit-transform: translateX(-15%) translateY(-10%); transform: translateX(-15%) translateY(-10%); opacity: 0; visibility: hidden; -webkit-transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-gnav__megaMenu ul { display: grid; row-gap: 10px; } .p-gnav__megaMenu a { font-size: var(--text14); font-weight: 700; line-height: 1.5; display: grid; grid-template-columns: auto 1fr; } @media (hover: hover) { .p-gnav__megaMenu a:hover { color: var(--mainBlue); } } .p-gnav__megaMenu a::before { content: "・"; } /*-------------------------------------------- HEADER MAIN --------------------------------------------*/ .p-header { position: relative; background: var(--white); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); } .p-header__logoFrame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .p-header__school { margin: 0; color: var(--fontColor); font-size: var(--text16); font-weight: 700; line-height: 1.5; white-space: nowrap; } @media (width < 768px) { .p-header__school { font-size: 12px; } } /* @media (width < 992px) { .p-header__school { display: none; } } */ @media (992px <= width) { .p-header__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; margin-left: auto; } .p-header__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 5px; padding: 10px 20px 11px; border: 2px solid var(--mainBlue); border-radius: 100vmax; font-size: var(--text15); font-weight: 700; line-height: 1.5; white-space: nowrap; -webkit-transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-header__btn--tel { background: var(--white); color: var(--mainBlue); } .p-header__btn--request, .p-header__btn--trial { background: var(--mainBlue); color: var(--white); } } @media (992px <= width) and (hover: hover) { .p-header__btn--tel:hover { background: var(--mainBlue); color: var(--mainYellow); } .p-header__btn--trial:hover, .p-header__btn--request:hover { background: var(--mainYellow); color: var(--mainBlue); border-color: var(--mainBlue); } } @media (992px <= width) { .p-header__btnIcon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 14px; aspect-ratio: 1; } .p-header__btnIcon svg { width: 100%; } } @media (992px <= width) { .p-header__actions--detail { gap: 10px; } .p-header__actions--detail .p-header__btn { gap: 8px; height: 46px; padding-top: 0; padding-bottom: 0; width: 100%; } .p-header__actions--detail .p-header__btn--tel { max-width: 160px; font-size: 16px; } .p-header__actions--detail .p-header__btn--trial, .p-header__actions--detail .p-header__btn--request { max-width: 160px; } .p-header__actions--detail .p-header__btn--tel .p-header__btnIcon { width: auto; height: 18px; aspect-ratio: auto; } .p-header__actions--detail .p-header__btn--tel .p-header__btnIcon > svg { width: auto; height: 100%; } .p-header__actions--detail .p-header__btn--trial .p-header__btnIcon, .p-header__actions--detail .p-header__btn--request .p-header__btnIcon { width: 16px; } } .p-header__btn.is-hidden{ display: none; } @media (992px <= width) { .p-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 1.3888888889%; -moz-column-gap: 1.3888888889%; column-gap: 1.3888888889%; padding: 17px 10px 17px 20px; } .p-header__gnavFrame { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .p-header__toggleFrame { display: none; } } .p-header { /*-------------------------------------------- pc_xs 以下（992px 未満：ロゴ + アイコン+テキスト+ハンバーガー） --------------------------------------------*/ } @media (width < 992px) { .p-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 12.5px 15px 12.5px 12px; gap: 18px; } .p-header__logoFrame { -ms-flex-negative: 0; flex-shrink: 0; } .p-header__gnavFrame { display: none; } .p-header__toggleFrame { -ms-flex-negative: 0; flex-shrink: 0; z-index: 8; } .p-header__toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 46px; aspect-ratio: 1; padding: 0; background: var(--mainBlue); border: none; border-radius: 50%; cursor: pointer; } .p-header__toggle > i { position: relative; display: block; width: 18px; height: 2px; background: var(--white); border-radius: 100vmax; -webkit-transition: background 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-header__toggle > i::before, .p-header__toggle > i::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--white); border-radius: 100vmax; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-header__toggle > i::before { top: -6px; } .p-header__toggle > i::after { top: 6px; } body.is-drawerOpen .p-header__toggle { background: var(--white); } body.is-drawerOpen .p-header__toggle > i::before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: var(--mainBlue); } body.is-drawerOpen .p-header__toggle > i::after { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background-color: var(--mainBlue); } } @media (width < 992px) { .p-header__actions { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 17px; } .p-header__btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; padding: 0; border: none; border-radius: 0; background: transparent; font-weight: 700; font-size: var(--text14); line-height: 1.3; text-align: center; text-decoration: none; white-space: nowrap; } } @media (width < 576px) { .p-header__actions{ display: none; } } @media (width < 992px) and (width < 768px) { .p-header__btn { font-size: 10px; } } @media (width < 992px) { .p-header__btn--search, .p-header__btn--contact { background: transparent; } .p-header__btnIcon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--mainBlue); aspect-ratio: 1; } .p-header__btnIcon > svg { width: 100%; height: 100%; } .p-header__btn--tel .p-header__btnIcon { width: 18px; } .p-header__btn--trial .p-header__btnIcon, .p-header__btn--request .p-header__btnIcon { width: 20px; } .p-header__btnText { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .p-header__btnTextLine { display: block; } .p-header__btnTextSep { display: none; } } /* detail */ .p-breadcrumbs{ background-color: #007EDB; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.2rem, rgba(255, 255, 255, 0.1)), color-stop(0.2rem, transparent)), url("data:image/svg+xml;utf8,"); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0.2rem, transparent 0.2rem), url("data:image/svg+xml;utf8,"); background-size: 100% 3.1rem, 300px 300px; background-repeat: repeat, repeat; margin-top: min(-80px, -5.5555555556vw); padding-top: max(100px, 6.94444444vw); padding-bottom: max(100px, 6.94444444vw); } /* teaser */ .p-breadcrumbs.--teaser{ padding-bottom: 0; } #school_breadcrumbs.p-breadcrumbs.--teaser a{ color:var(--white); } @media (hover: hover) { #school_breadcrumbs.p-breadcrumbs.--teaser a:hover{ color: var(--mainYellow); } } @media (width < 859px) { #school_breadcrumbs.p-breadcrumbs.--teaser .inner { margin: auto 0; } } .p-breadcrumbs__inner { padding-bottom: 14px; } .p-breadcrumbs__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; column-gap: 15px; row-gap: 5px; margin: 0; padding: 0; list-style: none; } @media (width < 768px) { .p-breadcrumbs .breadcrumbs__list { gap: 10px; } } .p-breadcrumbs .breadcrumbs__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; color: var(--white); font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; } @media (width < 768px) { .p-breadcrumbs .breadcrumbs__item { font-size: 12px; gap: 10px; } } .p-breadcrumbs .breadcrumbs__item:not(:first-child)::before { content: ""; -ms-flex-negative: 0; flex-shrink: 0; width: 3px; height: 3px; border-radius: 50%; background: currentColor; } .p-breadcrumbs .breadcrumbs__item a { color: inherit; -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-breadcrumbs .breadcrumbs__item strong { font-weight: 500; } @media (hover: hover) { .p-breadcrumbs .breadcrumbs__item a:hover { color: var(--mainYellow); } } /* fv */ .p-schoolFv{ background-color: var(--subBlue); /* margin-top: min(-80px, calc(-80 / 1440 * 100vw)); */ /* padding-top: max(80px, calc(80 / 1440 * 100vw)); */ padding-bottom: max(35px, calc(35 / 1440 * 100vw)); position: relative; } .p-schoolFv::before{ content: ""; position: absolute; left: 50%; width: 110%; aspect-ratio: 1440 / 90; background-color: var(--subBlue); transform: translateX(-50%); mask-size: 102% auto; bottom: calc(100% - 1px); mask-image: var(--maskTopNew); mask-position: center top; } @media (width < 992px) { .p-schoolFv{ margin-top: min(-50px, calc(-50 / 1440 * 100vw)); } } @media (width < 768px) { .p-schoolFv{ padding-top: 10px; padding-bottom: 20px; margin-top: min(-60px, calc(-60 / 1440 * 100vw)); } } .p-schoolFv__ttl{ width: 100%; max-width: 490px; margin-inline: auto; margin-bottom: 80px; } @media (width < 768px) { .p-schoolFv__ttl{ width: min(240px, 80%); margin-bottom: 50px; } } .p-schoolFv__slider .splide__slide{ border-radius: 20px; overflow: hidden; aspect-ratio: 580 / 360; height: fit-content; } .p-schoolFv__slider .splide__slide picture{ width: 100%; height: 100%; } .p-schoolFv__slider .splide__slide img{ height: 100%; width: 100%; object-fit: cover; } .p-schoolFv__slider .splide__pagination{ position: static; margin-top: 20px; } .p-schoolFv__slider .splide__pagination__page { display: block; width: 6px; height: 6px; background: var(--disable_pageNation); border-radius: 50%; opacity: 1; cursor: pointer; margin: 6px; transition: background .3s var(--baseEasing); } .p-schoolFv__slider .splide__pagination__page.is-active { background: var(--mainBlue); transform: none; } .p-schoolFv__infoFrame { display: flex; flex-direction: column; gap: 35px; color: var(--fontColor); } .p-schoolFv__headFrame { display: flex; align-items: flex-end; gap: 15px; flex-wrap: wrap; } @media (width < 768px) { .p-schoolFv__headFrame{ flex-direction: column; row-gap: 20px; align-items: center; } } .p-schoolFv__name { font-weight: 700; font-size: var(--text46); line-height: 1; margin: 0; } .p-schoolFv__city { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 15px 2px; background: var(--subBlue); border-radius: 20px; font-weight: 500; font-size: var(--text16); line-height: 1; white-space: nowrap; } @media (width < 768px) { .p-schoolFv__name{ font-size: 32px; } .p-schoolFv__city{ font-size: 16px; } } .p-schoolFv__contact { display: flex; flex-direction: column; gap: 20px; margin: 0; } .p-schoolFv__contactRow { display: flex; align-items: flex-start; gap: 9px; } @media (width < 768px) { .p-schoolFv__contact{ row-gap: 10px; } .p-schoolFv__contactRow{ gap: 10px; } } .p-schoolFv__contactIcon { flex-shrink: 0; display: flex; justify-content: center; padding-top: 7px; width: 15px; color: var(--mainBlue); } .p-schoolFv__contactIcon svg { width: 100%; } .p-schoolFv__contactBody { font-weight: 500; line-height: 1.75; } .p-schoolFv__zip, .p-schoolFv__address { font-size: var(--text18); } .p-schoolFv__phone { font-size: var(--text20); } .p-schoolFv__hour { font-size: 14px; } @media (width < 768px) { .p-schoolFv__zip, .p-schoolFv__address { font-size: 14px; } .p-schoolFv__phone{ font-size: 16px; } } .p-schoolFv__targetFrame { display: flex; flex-direction: column; gap: 10px; } .p-schoolFv__targetLabel { font-weight: 500; font-size: var(--text18); } .p-schoolFv__pills { display: flex; flex-wrap: wrap; gap: 10px; } .p-schoolFv__pill { display: flex; align-items: center; justify-content: center; min-width: 80px; padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: var(--text16); line-height: 1.35; text-align: center; color: var(--white); } /* access */ .p-schoolAccess{ background-color: var(--subBlue); padding-top: max(35px, calc(35 / 1440 * 100vw)); padding-bottom: max(150px, calc(150 / 1440 * 100vw)); } @media (width < 768px) { .p-schoolAccess{ padding-top: 20px; padding-bottom: 100px; } } .p-schoolAccess__infoFrame { display: flex; flex-direction: column; gap: 20px; } .p-schoolAccess__text { color: var(--fontColor); font-weight: 500; font-size: var(--text16); line-height: 1.75; } .p-schoolAccess__text p { margin: 0; } .p-schoolAccess__mapFrame { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; } .p-schoolAccess__map { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 580 / 340; width: 100%; } .p-schoolAccess__map .map_show { width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: none; } @media (width < 768px) { .p-schoolAccess__mapFrame, .p-schoolAccess__map { align-items: stretch; } .p-schoolAccess__map .map_link { align-self: flex-end; } } /* campaign */ .p-schoolCampaign{ background-color: var(--subBlue); padding-bottom: max(120px, calc(120 / 1440 * 100vw)); } @media (width < 768px) { .p-schoolCampaign{ padding-bottom: 70px; } } .p-schoolCampaign__card { position: relative; padding: 50px calc(125 / 1200 * 100%) 70px; background-color: var(--white); border-radius: 20px; } .p-schoolCampaign__decoFrame { position: absolute; left: 23px; top: 34px; width: 60px; height: 291px; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 0; } .p-schoolCampaign__deco { transform: rotate(90deg); white-space: nowrap; color: var(--subBlue); font-family: var(--ff_en); font-weight: 600; font-size: 60px; line-height: 1; } .p-schoolCampaign__character { position: absolute; top: -32px; right: 64px; width: calc(127 / 1200 * 100%); height: auto; pointer-events: none; min-width: 75px; } .p-schoolCampaign__ttl { text-align: center; color: var(--mainBlue); font-weight: 700; font-size: var(--text36); } .p-schoolCampaign__list { display: grid; grid-template-columns: 1fr 1fr; gap: 50px 30px; margin-top: 50px; position: relative; z-index: 1; } .p-schoolCampaign__item { display: flex; flex-direction: column; } .p-schoolCampaign__link { display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: opacity .3s var(--baseEasing, ease); } @media (hover: hover) { .p-schoolCampaign__link:hover { opacity: .8; } } .p-schoolCampaign__item > :not(.p-schoolCampaign__link) + p { margin-top: 10px; } .p-schoolCampaign__imgFrame { overflow: hidden; aspect-ratio: 460 / 184; border-radius: 10px; background-color: #cdcdcd; } .p-schoolCampaign__imgFrame img { display: block; width: 100%; height: 100%; object-fit: cover; } .p-schoolCampaign__heading { margin: 0; color: var(--fontColor); font-weight: 500; font-size: var(--text16); line-height: 1.75; } @media (width < 992px) { .p-schoolCampaign__card { padding: 50px 60px 60px; } .p-schoolCampaign__character { right: 20px; } } @media (width < 768px) { .p-schoolCampaign__card { padding: 30px 20px 40px; } .p-schoolCampaign__decoFrame { display: none; } .p-schoolCampaign__character { width: 80px; right: 10px; } .p-schoolCampaign__ttl { font-size: 26px; } } @media (width < 576px) { .p-schoolCampaign__list { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; max-width: 310px; margin-inline: auto; } } /* contact */ .p-schoolContact { background-color: var(--subBlue); padding-bottom: max(120px, calc(120 / 1440 * 100vw)); } .p-schoolContact__inner { position: relative; background-color: #007EDB; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.2rem, rgba(255, 255, 255, 0.1)), color-stop(0.2rem, transparent)), url("data:image/svg+xml;utf8,"); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0.2rem, transparent 0.2rem), url("data:image/svg+xml;utf8,"); background-size: 100% 3.1rem, 300px 300px; background-repeat: repeat, repeat; border-radius: 20px; padding: 45px 20px 60px; color: var(--white); } .p-schoolContact__heading { display: flex; flex-direction: column; align-items: center; gap: 10px; } .p-schoolContact__en { font-family: var(--ff_en); font-weight: 600; font-size: var(--text18); line-height: 1; } .p-schoolContact__ttl { font-weight: 700; font-size: var(--text36); } .p-schoolContact__btns { width: min(670px, 100%); margin-top: 45px; margin-inline: auto; display: flex; flex-direction: column; gap: 50px; } .p-schoolContact__btnRow { display: flex; gap: 30px; } .p-schoolContact__btn { position: relative; display: flex; align-items: center; border-radius: 5px; color: var(--fontColor); transition: 0.3s var(--baseEasing, ease); } .p-schoolContact__btn.is-hidden { display: none; } .p-schoolContact__btn.--trial { gap: 18px; min-height: 93px; padding: 14px 30px; background-color: var(--mainYellow); } .p-schoolContact__btn.--trial-sub, .p-schoolContact__btn.--request, .p-schoolContact__btn.--line { flex: 1; justify-content: space-between; gap: 12px; min-height: 80px; padding: 14px 30px; background-color: var(--white); } .p-schoolContact__btn.--trial-sub { background-color: var(--mainYellow); } .p-schoolContact__introText{ text-align: center; color: var(--white); font-size: var(--text16); font-weight: 700; line-height: 2; margin-top: 10px; } .p-schoolContact__introText.is-hidden{ display: none; } @media (hover: hover) { .p-schoolContact__btn:hover{ transform: translateY(-10px); } .p-schoolContact__btn.--request:hover, .p-schoolContact__btn.--line:hover { background-color: var(--hoverYellowSub); } .p-schoolContact__btn.--trial-sub:hover, .p-schoolContact__btn.--trial:hover { background-color: var(--hoverYellow); } } .p-schoolContact__btnIcon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--mainBlue); } .p-schoolContact__btnIcon svg { width: 100%; } .p-schoolContact__btn.--trial .p-schoolContact__btnIcon { width: 24px; } .p-schoolContact__btn.--trial-sub .p-schoolContact__btnIcon { width: 20px; } .p-schoolContact__btn.--request .p-schoolContact__btnIcon { width: 26px; } .p-schoolContact__btnIcon.--line { width: 34px; } .p-schoolContact__btnText { font-weight: 700; white-space: nowrap; margin-inline: auto; } .p-schoolContact__btn.--trial .p-schoolContact__btnText { font-size: var(--text22); } .p-schoolContact__btn.--trial-sub .p-schoolContact__btnText, .p-schoolContact__btn.--request .p-schoolContact__btnText, .p-schoolContact__btn.--line .p-schoolContact__btnText { font-size: var(--text18); } .p-schoolContact__btnNote { flex: 1; font-size: var(--text13); font-weight: 500; line-height: 1.75; } .p-schoolContact__btnNote.is-hidden{ display: none; } .p-schoolContact__badge { position: absolute; left: 16px; top: 0; transform: translateY(calc(-100% + 5px)); display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 5px 5px 5px 0; background-color: var(--tagBg); color: var(--white); font-weight: 500; font-size: var(--text13); line-height: 1.4; white-space: nowrap; } .p-schoolContact__badge::after { content: ""; position: absolute; left: 0; top: calc(100% - 1px); width: 15px; aspect-ratio: 22 / 17; background-color: var(--tagBg); -webkit-mask-image: var(--index); mask-image: var(--index); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; } .p-schoolContact__tel { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 45px; } .p-schoolContact__telDeco { width: calc(140 / 1200 * 100%); position: absolute; bottom: 0; left: 50%; transform: translateX(-250%); min-width: 80px; } .p-schoolContact__telBody { display: flex; flex-direction: column; align-items: center; gap: 4px; } .p-schoolContact__telLead { font-weight: 700; font-size: var(--text18); } .p-schoolContact__telNum { display: flex; align-items: center; gap: 12px; transition: .3s var(--baseEasing, ease); } @media (hover: hover) { .p-schoolContact__telNum:hover { color: var(--mainYellow); } } .p-schoolContact__telIcon { width: 21px; display: grid; } .p-schoolContact__telIcon svg { width: 100%; height: auto; } .p-schoolContact__telNum { color: var(--white); font-weight: 700; font-size: var(--text36); line-height: 1.25; letter-spacing: 0.02em; } .p-schoolContact__telHour { font-weight: 700; font-size: var(--text14); line-height: 1.75; } @media (width < 768px) { .p-schoolContact{ padding-bottom: 70px; } .p-schoolContact.--tsushin{ padding-bottom: 48px; } .p-schoolContact__inner { padding: 30px 30px 120px; } .p-schoolContact__btns { margin-top: 40px; gap: 0px; } .p-schoolContact__btn.--trial { flex-wrap: wrap; padding: 18px 20px; min-height: 80px; } .p-schoolContact__btn.--trial .p-schoolContact__btnNote { flex-basis: 100%; } .p-schoolContact__btnRow { flex-direction: column; row-gap: 50px; } .p-schoolContact__btn{ width: min(290px , 100%); margin-inline: auto; } .p-schoolContact__btn.--request, .p-schoolContact__btn.--line { min-height: 66px; } .p-schoolContact__btnNote{ margin-block: 8px 50px; font-weight: 700; font-size: 13px; } .p-schoolContact__btnText{ margin-inline: auto; } .p-schoolContact__tel { gap: 10px; margin-top: 25px; } .p-schoolContact__telDeco { width: 100px; transform: translateX(-50%); } .p-schoolContact__badge{ left: 50%; transform: translate(-50% , calc(-100% + 5px)); } .p-schoolContact__introText{ margin-top: 25px; } } /*-------------------------------------------- METHOD（ショウイン式） --------------------------------------------*/ .p-schoolMethod { background-color: var(--subBlue); padding-bottom: max(120px, calc(120 / 1440 * 100vw)); } .p-schoolMethod__inner { background-color: var(--subYellow02); background-image: linear-gradient(to bottom, rgba(97, 97, 97, 0.05) 2px, transparent 2px), url("data:image/svg+xml;utf8,"); background-size: 100% 24.8px, 300px 300px; background-repeat: repeat, repeat; padding: calc(50 / 1200 * 100%) calc(60 / 1200 * 100%) calc(60 / 1200 * 100%); border-radius: 30px; } .p-schoolMethod__ttl { color: var(--mainBlue); font-weight: 700; font-size: var(--text36); text-align: center; margin-bottom: 30px; } /* ---- カード（紙テクスチャ背景） ---- */ .p-schoolMethod__card { position: relative; background-color: var(--subYellow); border-radius: 0 60px 0 60px; padding-bottom: calc(45 / 1200 * 100%);;; padding-left: calc(50 / 1200 * 100%); padding-right: calc(50 / 1200 * 100%); } /* ---- バッジ（わかるの3大法則） ---- */ .p-schoolMethod__badge { width: calc(240 / 1080 * 100%); filter: drop-shadow(3.728px 3.728px 9.942px rgba(0, 0, 0, 0.10)); margin-bottom: 20px; } /* ---- リード文 ---- */ .p-schoolMethod__lead { font-weight: 700; font-size: var(--text16); line-height: 2.2; margin-bottom: 40px; } /* ---- 3カラム ---- */ .p-schoolMethod__list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(100 / 990 * 100%); align-items: start; } .p-schoolMethod__item { display: flex; flex-direction: column; position: relative; } /* ---- 矢印（PC：写真の左に配置） ---- */ .p-schoolMethod__item:not(:first-child)::before { content: ""; position: absolute; top: 50%; right: 100%; transform: translateX(-25%); width: 23.2143%; aspect-ratio: 78 / 50; background-color: var(--fontColor); mask-image: url(../img/method/arrow.webp); mask-position: center; mask-repeat: no-repeat; mask-size: 100% 100%; } .p-schoolMethod__tag { width: 80px; margin-bottom: 9px; filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.10)); } .p-schoolMethod__heading { color: var(--mainBlue); font-weight: 700; font-size: var(--text20); margin-bottom: 16px; } .p-schoolMethod__headingAccent { color: var(--accent); } .p-schoolMethod__img { margin: 0; } /* ---- 下部キャッチコピー ---- */ .p-schoolMethod__catch { color: var(--mainBlue); font-weight: 700; font-size: var(--text24); width: fit-content; margin-inline: auto; margin-top: 40px; } /* ============================================ SP ============================================ */ @media (width < 768px) { .p-schoolMethod__inner{ padding: 25px 20px 40px; } .p-schoolMethod { padding-bottom: 60px; } .p-schoolMethod__ttl { font-size: 20px; line-height: 1.75; margin-bottom: 20px; } .p-schoolMethod__card { border-radius: 0 30px 0 30px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px; } .p-schoolMethod__badge { width: min(260px, 100%); margin-inline: auto; } .p-schoolMethod__lead { line-height: 2; margin-bottom: 40px; } .p-schoolMethod__list { grid-template-columns: 1fr; row-gap: 55px; width: 92.5%; margin-inline: auto; } .p-schoolMethod__item { align-items: center; } .p-schoolMethod__tag { align-self: flex-start; } .p-schoolMethod__heading { align-self: flex-start; font-size: 20px; } .p-schoolMethod__img { width: 180px; max-width: 100%; } /* PCの横矢印を無効化 */ .p-schoolMethod__item:not(:first-child)::before { top: -32.5px; right: auto; left: 50%; -webkit-transform: translate(-50%, 0%) rotate(90deg); transform: translate(-50%, 0%) rotate(90deg); width: 50px; } } /*-------------------------------------------- ANCHOR NAV（ページ内ナビ） --------------------------------------------*/ .p-anchorNav { background-color: var(--subBlue); padding-bottom: max(120px, calc(120 / 1440 * 100vw)); } .p-anchorNav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 35px; } .p-anchorNav__link { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; border-radius: 50px; color: var(--fontColor); font-weight: 700; font-size: var(--text16); transition: .3s var(--baseEasing, ease); } @media (hover: hover) { .p-anchorNav__link:hover { color: var(--mainBlue); } } /* アイコン：白丸＋下向き矢印（--arrow_b） */ .p-anchorNav__icon { flex-shrink: 0; width: 26px; aspect-ratio: 1; border-radius: 50%; background-color: var(--white); display: grid; place-items: center; transition: .3s var(--baseEasing, ease); } .p-anchorNav__icon::after { content: ""; mask-image: var(--arrow_b); mask-size: 100% 100%; width: 10px; aspect-ratio: 10 / 6; background-color: var(--mainBlue); transition: .3s var(--baseEasing, ease); } @media (hover: hover) { .p-anchorNav__link:hover .p-anchorNav__icon{ background-color: var(--mainBlue); } .p-anchorNav__link:hover .p-anchorNav__icon::after{ background-color: var(--mainYellow); } } @media (width < 768px) { .p-anchorNav { padding-bottom: 70px; } .p-anchorNav__list { gap: 15px 16px; } .p-anchorNav__link { gap: 6px; padding: 0 8px; font-size: 14px; min-height: auto; } .p-anchorNav__icon { width: 20px; height: 20px; background-size: 10px auto; } } /*-------------------------------------------- REASONS（選ばれる理由） --------------------------------------------*/ .p-reasons { padding-bottom: max(120px, calc(120 / 1440 * 100vw)); background-color: var(--subBlue); } /* ---- 見出し ---- */ .p-reasons__lead { margin-top: 40px; margin-bottom: 50px; color: var(--fontColor); font-weight: 700; font-size: var(--text20); line-height: 1.75; } /* ---- 3カード ---- */ .p-reasons__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: reasonsNum; } @media (width < 992px) { .p-reasons__list { grid-template-columns: repeat(1, 1fr); } } .p-reasons__item { padding: 40px; border: 2px solid var(--mainBlue); border-radius: 20px; } .p-reasons__imgWrap { position: relative; aspect-ratio: 300 / 172; max-width: 300px; margin-inline: auto; } .p-reasons__img { display: block; width: 100%; height: 100%; border-radius: 10px; object-fit: cover; } /* 番号バッジ（style02 の counter 方式を踏襲） */ .p-reasons__imgWrap::before { counter-increment: reasonsNum; content: counter(reasonsNum, decimal-leading-zero); position: absolute; z-index: 1; top: -17px; left: 15px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background-color: var(--mainYellow); color: var(--mainBlue); font-family: var(--ff_en); font-weight: 500; font-size: 20px; line-height: 1; } .p-reasons__cardTtl { margin-top: 15px; color: var(--mainBlue); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: var(--text20); line-height: 1.75; text-align: center; } .p-reasons__cardText { margin-top: 2px; color: var(--fontColor); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; font-size: var(--text14); line-height: 2; } /* ---- 口コミランキングバナー ---- */ .p-reasons__rank { margin-top: 50px; } .p-reasons__rankInner { display: flex; align-items: center; justify-content: center; gap: 80px; padding: 40px 20px; border-radius: 20px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)), linear-gradient(to left, #E7E4BB, #FCEED6 50%, #F2D1BE); } .p-reasons__rankText { flex-shrink: 0; } .p-reasons__rankLabel { color: var(--mainBlue); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: var(--text20); line-height: 1.5; } .p-reasons__rankLead { margin-top: 10px; color: var(--fontColor); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: var(--text24); line-height: 1.5; } .p-reasons__rankImg { flex: 0 1 auto; min-width: 0; margin: 0; } .p-reasons__rankImg img { display: block; width: 100%; max-width: 573px; height: auto; } .p-reasons__rankNote { margin-top: 9px; color: var(--fontColor); font-size: var(--text13); text-align: right; } /* ============================================ SP ============================================ */ @media (width < 768px) { .p-reasons{ padding-bottom: 60px; } .p-reasons__lead { font-size: 16px; margin-top: 30px; margin-bottom: 40px; } .p-reasons__list { grid-template-columns: 1fr; gap: 15px; } .p-reasons__item { padding: 30px 20px; } .p-reasons__cardTtl { font-size: 18px; margin-top: 10px; } .p-reasons__rankText{ width: 100%; } .p-reasons__cardText { font-size: 14px; } .p-reasons__rank{ margin-top: 40px; } .p-reasons__rankInner { flex-direction: column; gap: 24px; padding: 30px 20px; } .p-reasons__rankLabel{ font-size: 18px; } .p-reasons__rankLead{ font-size: 20px; } .p-reasons__rankNote{ font-size: 14px; } .p-reasons__rankImg img { margin-inline: auto; } } /*-------------------------------------------- GALLERY（校舎風景） --------------------------------------------*/ .p-schoolGallery { padding-bottom: max(120px, calc(120 / 1440 * 100vw)); padding-top: max(120px, calc(120 / 1440 * 100vw)); background-color: var(--subBlue); } .p-schoolGallery__slider { position: relative; width: min(800px, 80%); margin: 60px auto 0; } /* ---- メイン ---- */ .p-schoolGallery__main { width: 100%; } .p-schoolGallery__mainImg { aspect-ratio: 800 / 497; border-radius: 20px; overflow: hidden; } .p-schoolGallery__mainImg picture{ width: 100%; height: 100%; } .p-schoolGallery__mainImg img { width: 100%; height: 100%; object-fit: cover; } .p-schoolGallery__caption { margin-top: 10px; font-weight: 700; font-size: var(--text20); line-height: 2.2; } /* ---- サムネイル（固定・並べるだけ） ---- */ .p-schoolGallery__thumb { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 50px; } .p-schoolGallery__thumbItem { flex: 0 0 auto; } .p-schoolGallery__thumbBtn { display: block; width: 120px; aspect-ratio: 120 / 74; border-radius: 5px; overflow: hidden; cursor: pointer; opacity: 0.5; transition: opacity 0.3s ease; } .p-schoolGallery__thumbBtn:hover, .p-schoolGallery__thumbBtn.is-active { opacity: 1; } .p-schoolGallery__thumbBtn picture { width: 100%; height: 100%; } .p-schoolGallery__thumbBtn img { width: 100%; height: 100%; object-fit: cover; } /* ---- 矢印（Figma: 48px 円） ---- */ .p-schoolGallery__arrow { height: auto; display: grid; place-items: center; width: 48px; aspect-ratio: 1; background-color: var(--mainBlue); border: 2px solid var(--mainBlue); border-radius: 50%; color: var(--white); cursor: pointer; opacity: 1; -webkit-transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-schoolGallery__arrow::after { content: ""; width: 7px; aspect-ratio: 1/2; background-color: currentColor; display: block; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; } .p-schoolGallery__arrow.--next::after { -webkit-mask-image: var(--arrow_r); mask-image: var(--arrow_r); } .p-schoolGallery__arrow.--prev::after { -webkit-mask-image: var(--arrow_l); mask-image: var(--arrow_l); } .p-schoolGallery__main .splide__arrow--prev { left: 0; transform: translateX(-185%) translateY(-115%); } .p-schoolGallery__main .splide__arrow--next { right: 0; transform: translateX(185%) translateY(-115%); } @media (hover: hover) { .p-schoolGallery__arrow:hover:not(:disabled) { background: var(--white); color: var(--mainBlue); } } /* ---- レスポンシブ ---- */ @media (width < 768px) { .p-schoolGallery{ padding-top: 60px; padding-bottom: 60px; } .p-schoolGallery__slider { margin-top: 40px; width: calc(310 / 350 * 100%); } .p-schoolGallery__caption{ font-size: 14px; } .p-schoolGallery__thumb { margin-top: 20px; gap: 8px; } .p-schoolGallery__thumbBtn { width: 54px; aspect-ratio: 24 / 17; } .p-schoolGallery__main .splide__arrow { width: 30px; height: 30px; } .p-schoolGallery__main .splide__arrow--prev { left: 0px; transform: translateX(-50%) translateY(-115%); } .p-schoolGallery__main .splide__arrow--next { right: 0px; transform: translateX(50%) translateY(-115%); } } /*-------------------------------------------- MESSAGE（塾長メッセージ） --------------------------------------------*/ .p-schoolMessage { padding-top: max(120px, calc(120 / 1440 * 100vw)); padding-bottom: max(120px, calc(120 / 1440 * 100vw)); background-color: var(--subYellow); } /* ---- プロフィール＋メッセージ ---- */ .p-schoolMessage__profile { display: flex; align-items: flex-start; gap: 100px; margin-top: 50px; } .p-schoolMessage__person { flex: 0 0 calc(300 / 1200 * 100%); width: calc(300 / 1200 * 100%); display: flex; flex-direction: column; align-items: center; gap: 20px; } .p-schoolMessage__photo { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; } .p-schoolMessage__photo picture { width: 100%; height: 100%; } .p-schoolMessage__photo img { width: 100%; height: 100%; object-fit: cover; } .p-schoolMessage__name { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--fontColor); text-align: center; } .p-schoolMessage__school { font-weight: 500; font-size: var(--text18); } .p-schoolMessage__chief { font-weight: 700; font-size: var(--text24); } .p-schoolMessage__box { flex: 1 1 0; padding: 30px; background-color: var(--white); border: 2px solid var(--mainBlue); border-radius: 10px; color: var(--fontColor); font-size: var(--text16); line-height: 2; font-weight: 500; } .p-schoolMessage__box p:has(+ p){ margin-bottom: 1em; } .p-schoolMessage__boxInner:has(+ .p-schoolMessage__boxInner){ margin-bottom: 50px; } /* ---- インタビュー ---- */ .p-schoolMessage__interview { margin-top: 80px; } .p-schoolMessage__qaList { display: flex; flex-direction: column; gap: 50px; margin-top: 30px; } .p-schoolMessage__q { font-weight: 700; font-size: var(--text20); } .p-schoolMessage__a { margin-top: 15px; color: var(--fontColor); font-size: var(--text16); line-height: 2; font-weight: 500; } /* ---- 動画 ---- */ .p-schoolMessage__movie { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 1000px; margin: 80px auto 0; padding: 44px 20px 100px; background-color: var(--subYellow02); background-image: linear-gradient(to bottom, rgba(97, 97, 97, 0.05) 2px, transparent 2px), url("data:image/svg+xml;utf8,"); background-size: 100% 24.8px, 300px 300px; background-repeat: repeat, repeat; border-radius: 0 80px 0 80px; } .p-schoolMessage__movieTtl { color: var(--mainBlue); font-weight: 700; font-size: var(--text24); text-align: center; } .p-schoolMessage__movieList { margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); width: 90%; gap: 30px; } .p-schoolMessage__movieFrame { position: relative; max-width: 600px; aspect-ratio: 16 / 9; border: 4px solid var(--white); border-radius: 10px; overflow: hidden; width: 100%; } .p-schoolMessage__movieFrame:first-child:last-child { grid-column: 1/3; margin-inline: auto; } .p-schoolMessage__movieFrame iframe { display: block; width: 100%; height: 100%; border: 0; } .p-schoolMessage__movieBtn { display: block; width: 100%; height: 100%; cursor: pointer; } .p-schoolMessage__movieThumb { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); } /* 自前の再生ボタン（青丸＋白三角） */ .p-schoolMessage__playBtn { position: absolute; top: 50%; left: 50%; width: 70px; aspect-ratio: 1; background-color: var(--mainBlue); border-radius: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease; } .p-schoolMessage__playBtn::before { content: ""; position: absolute; top: 50%; left: 54%; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--white); transform: translate(-50%, -50%); } .p-schoolMessage__movieBtn:hover .p-schoolMessage__playBtn { transform: translate(-50%, -50%) scale(1.1); } /* ---- レスポンシブ ---- */ @media (width < 768px) { .p-schoolMessage{ padding-top: 60px; padding-bottom: 60px; } .p-schoolMessage__profile { flex-direction: column; align-items: stretch; gap: 30px; } .p-schoolMessage__person { flex-basis: auto; width: auto; gap: 10px; } .p-schoolMessage__photo { width: 160px; margin: 0 auto; } .p-schoolMessage__interview { margin-top: 50px; } .p-schoolMessage__qaList { gap: 30px; } .p-schoolMessage__movie { margin-top: 50px; padding: 30px 16px 50px; border-radius: 0 40px 0 40px; } .p-schoolMessage__school{ font-size: 14px; } .p-schoolMessage__chief{ font-size: 20px; } .p-schoolMessage__box{ padding: 20px; } .p-schoolMessage__movieTtl{ font-size: 20px; } .p-schoolMessage__movieList{ width: 100%; } .p-schoolMessage__playBtn{ width: 50px; } .p-schoolMessage__playBtn::before{ border-width: 8px 0 8px 15px; } } /*-------------------------------------------- SCORE UP（点数アップ実績） --------------------------------------------*/ .p-scoreUp { padding-top: max(70px, calc(70 / 1440 * 100vw)); padding-bottom: max(180px, calc(180 / 1440 * 100vw)); background-color: var(--white); } /* ---- 見出し＋説明文 ---- */ .p-scoreUp__head { display: flex; justify-content: space-between; gap: 60px; } .p-scoreUp__lead { flex: 1; margin-top: auto; max-width: 700px; font-size: var(--text16); line-height: 2.2; font-weight: 500; } /* ---- スライダー ---- */ .p-scoreUp__slider { margin-top: 88px; } .p-scoreUp__card { display: flex; align-items: center; gap: 20px; height: 160px; padding: 20px; background-color: var(--white); border: 2px solid var(--mainBlue); border-radius: 10px; box-sizing: border-box; } .p-scoreUp__icon { flex: 0 0 120px; width: 120px; aspect-ratio: 1; background-color: var(--subBlue); border-radius: 50%; overflow: hidden; } .p-scoreUp__icon picture { width: 100%; height: 100%; } .p-scoreUp__icon img { width: 100%; height: 100%; object-fit: cover; } .p-scoreUp__body { display: flex; flex-direction: column; gap: 10px; } .p-scoreUp__grade { font-size: var(--text14); line-height: 1.75; font-weight: 500; } .p-scoreUp__score { display: flex; align-items: baseline; gap: 4px; color: var(--mainBlue); font-weight: 700; } .p-scoreUp__num { font-size: 40px; line-height: 1; } .p-scoreUp__unit { font-size: var(--text16); } .p-scoreUp__up { font-family: var(--ff_en); font-size: 20px; font-weight: 600; line-height: 1; } .p-scoreUp__subject { padding: 2px 10px 4px; background-color: var(--subBlue); border-radius: 100vmax; color: var(--mainBlue); font-size: 14px; font-weight: 500; width: fit-content; } /* ---- レスポンシブ ---- */ @media (width < 768px) { .p-scoreUp{ padding-top: 60px; padding-bottom: 80px; } .p-scoreUp__head { flex-direction: column; gap: 40px; } .p-scoreUp__lead { font-size: 16px; line-height: 2; } .p-scoreUp__slider{ margin-top: 40px; } .p-scoreUp__card { gap: 14px; padding: 16px; flex-direction: column; height: auto; max-width: 180px; } .p-scoreUp__icon { flex-basis: 80px; width: 80px; } .p-scoreUp__body{ gap: 5px; text-align: center; } .p-scoreUp__num { font-size: 30px; } .p-scoreUp__unit{ font-size: 16px; } .p-scoreUp__grade{ font-size: 14px; } .p-scoreUp__score{ justify-content: center; } .p-scoreUp__subject{ font-size: 13px; margin-inline: auto; } } /*-------------------------------------------- VOICE（生徒・保護者の声） --------------------------------------------*/ .p-schoolVoice { position: relative; z-index: 2; padding-top: max(70px, calc(70 / 1440 * 100vw)); padding-bottom: max(70px, calc(70 / 1440 * 100vw)); background-color: var(--mainBlue); } /* 上下の曲線 */ .p-schoolVoice::before, .p-schoolVoice::after { content: ""; position: absolute; left: 50%; width: 110%; aspect-ratio: 1440 / 90; background-color: var(--mainBlue); transform: translateX(-50%); mask-size: 102% auto; } .p-schoolVoice::before { bottom: calc(100% - 1px); mask-image: var(--maskTopNew); mask-position: center top; } .p-schoolVoice::after { top: calc(100% - 1px); mask-image: var(--maskBottomNew); mask-position: center bottom; } @media (width < 768px) { .p-schoolVoice{ padding-top: 35px; padding-bottom: 70px; } .p-schoolVoice::before { mask-position: center calc(100% + 1px); } .p-schoolVoice::after { mask-position: center calc(0% - 1px); } } .p-schoolVoice__inner { position: relative; } .p-schoolVoice__head { margin-bottom: 60px; } @media (width < 768px) { .p-schoolVoice__head { margin-bottom: 40px; } } /* ---- スライダー ---- */ .p-schoolVoice__slider { position: relative; margin-top: 60px; } @media (width < 768px) { .p-schoolVoice__slider { margin-top: 40px; } } .js-sliderHomeVoice .splide__track { overflow: visible; } .p-schoolVoice__card { position: relative; width: fit-content; } .p-schoolVoice__card.--g1 { --tagBg: #ef74ba; --tagColor: #fff; } .p-schoolVoice__card.--g2 { --tagBg: #e0eb67; --tagColor: #007edb; } .p-schoolVoice__card.--g3 { --tagBg: #3bc6f1; --tagColor: #fff; } .p-schoolVoice__card.--g4 { --tagBg: #fd8d3d; --tagColor: #fff; } .p-schoolVoice__cardInner { max-width: 360px; height: fit-content; padding: 45px 40px 45px 45px; border-radius: 5px; background-color: var(--white); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 0.1rem, transparent 0.1rem), url("data:image/svg+xml;utf8,"); background-size: 100% 2.6rem, 300px 300px; background-repeat: repeat, repeat; mask-image: url("data:image/svg+xml;utf8,"), linear-gradient(#fff, #fff); mask-size: 28px 49px, calc(100% - 27px) 100%; mask-position: 0 0, 27px 0; mask-repeat: repeat-y, no-repeat; } @media (width < 768px) { .p-schoolVoice__cardInner { max-width: 310px; padding: 40px 30px 30px; } } .p-schoolVoice__arrows { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; margin-top: 35px; } @media (width < 768px) { .p-schoolVoice__arrows { margin-top: 15px; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } } .p-schoolVoice__arrow { position: static; display: grid; place-items: center; width: 48px; aspect-ratio: 1; height: auto; transform: translateY(0); background-color: var(--mainBlue); border-radius: 50%; border: 2px solid var(--white); color: var(--white); cursor: pointer; opacity: 1; -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), background 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), background 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-schoolVoice__arrow { width: 40px; } } .p-schoolVoice__arrow::after { content: ""; width: 7.5px; aspect-ratio: 1/2; background-color: currentColor; display: block; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; } .p-schoolVoice__arrow.--next::after { -webkit-mask-image: var(--arrow_r); mask-image: var(--arrow_r); } .p-schoolVoice__arrow.--prev::after { -webkit-mask-image: var(--arrow_l); mask-image: var(--arrow_l); } .p-schoolVoice__arrow:disabled { cursor: default; opacity: 0.4; } @media (hover: hover) { .p-schoolVoice__arrow:hover:not(:disabled) { background: var(--white); color: var(--mainBlue); } } /* ---- Voiceタグ ---- */ .p-schoolVoice__cardTag { position: absolute; top: 0; left: 15%; z-index: 2; width: fit-content; line-height: 0; transform: translateY(-50%); } .p-schoolVoice__cardTag::after { content: ""; position: absolute; top: calc(100% - 1px); left: 0; width: 12.5%; aspect-ratio: 22 / 17; background-color: var(--tagBg); mask-image: var(--index); mask-position: center; mask-repeat: no-repeat; mask-size: contain; } @media (width < 992px) { .p-schoolVoice__cardTag { left: 30px; } } .p-schoolVoice__cardTagInner { display: flex; align-items: flex-end; gap: 6px; padding: 0 1em 5px; border-radius: 9px 0; background-color: var(--tagBg); color: var(--tagColor); line-height: 1; } .p-schoolVoice__cardTagLabel { font-family: "Raleway", sans-serif; font-weight: 600; font-size: var(--text16); line-height: 1; } .p-schoolVoice__cardTagNum { font-weight: 600; font-size: var(--text24); line-height: 1; } /* ---- プロフィール＋見出し ---- */ .p-schoolVoice__cardHead { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 15px; } @media (width < 768px) { .p-schoolVoice__cardHead { row-gap: 20px; } } .p-schoolVoice__cardProfileMeta { display: flex; align-items: center; gap: 9px; grid-column: 1 / 3; grid-row: 1 / 2; } @media (width < 768px) { .p-schoolVoice__cardProfileMeta { flex-direction: column; align-items: flex-start; row-gap: 5px; grid-column: 2 / 3; } } .p-schoolVoice__cardProfileLabel { font-weight: 500; font-size: var(--text18); line-height: 1.5; } @media (width < 768px) { .p-schoolVoice__cardProfileLabel { font-size: 18px; } } .p-schoolVoice__cardProfileArea { display: flex; align-items: center; justify-content: center; height: 20px; padding: 0 8px; border-radius: 100vmax; background: var(--subBlue); color: var(--mainBlue); font-weight: 500; font-size: var(--text13); line-height: 1.5; white-space: nowrap; } @media (width < 768px) { .p-schoolVoice__cardProfileArea { font-size: 13px; } } .p-schoolVoice__cardPhoto { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; background-color: var(--bgGray); } @media (width < 768px) { .p-schoolVoice__cardPhoto { grid-column: 1 / 2; grid-row: 1 / 2; max-width: 100px; } } .p-schoolVoice__cardTitle { flex: 1; min-width: 0; font-weight: 700; font-size: var(--text14); line-height: 2; } @media (width < 768px) { .p-schoolVoice__cardTitle { grid-column: 1 / 3; grid-row: 2 / 3; font-size: 14px; } } /* ---- 本文 ---- */ .p-schoolVoice__cardText { margin-top: 20px; font-weight: 500; font-size: var(--text14); line-height: 2; } @media (width < 768px) { .p-schoolVoice__cardText { margin-top: 10px; font-size: 14px; } } /*-------------------------------------------- NEWS（お知らせ） --------------------------------------------*/ .p-schoolNews { padding-top: max(150px, calc(150 / 1440 * 100vw)); padding-bottom: max(120px, calc(120 / 1440 * 100vw)); background-color: var(--subBlue); } .p-schoolNews__list { display: flex; flex-direction: column; gap: 30px; margin-top: 40px; padding: 20px 30px; background-color: var(--white); max-height: 500px; overflow-y: auto; border-radius: 10px; } .p-schoolNews__item { padding: 0; } /* 2件目以降は上に区切り線を引く（hidden で隠れている時は線も出ない） */ .p-schoolNews__item + .p-schoolNews__item { padding-top: 30px; border-top: 1px solid var(--borderBlue); } .p-schoolNews__item[hidden] { display: none; } .p-schoolNews__meta { display: flex; align-items: center; gap: 20px; } .p-schoolNews__date { color: var(--mainBlue); font-weight: 700; font-size: var(--text18); line-height: 1.5; } .p-schoolNews__tags { display: flex; align-items: center; gap: 10px; } .p-schoolNews__cat, .p-schoolNews__new { display: flex; align-items: center; justify-content: center; padding: 2px 15px 4px; border-radius: 20px; color: var(--mainBlue); font-weight: 500; font-size: var(--text14); line-height: 1.5; white-space: nowrap; } .p-schoolNews__cat { background-color: var(--subBlue); } .p-schoolNews__new { background-color: var(--mainYellow); } .p-schoolNews__text { margin-top: 15px; color: var(--fontColor); font-weight: 500; font-size: var(--text16); line-height: 1.75; } /* ---- もっと見るボタン ---- */ .p-schoolNews__more { display: flex; justify-content: center; margin-top: 25px; } /* ---- レスポンシブ ---- */ @media (width < 768px) { .p-schoolNews{ padding-top: 80px; padding-bottom: 60px; } .p-schoolNews__date{ width: 100%; font-size: 14px; } .p-schoolNews__cat, .p-schoolNews__new{ font-size: 13px; } .p-schoolNews__list { gap: 20px; padding: 20px; } .p-schoolNews__item + .p-schoolNews__item { padding-top: 20px; } .p-schoolNews__meta { flex-wrap: wrap; gap: 10px 15px; } .p-schoolNews__text { font-size: 14px; } } /* ============================================= 公式SNS ============================================= */ .p-schoolSns{ padding-bottom: max(120px, calc(120 / 1440 * 100vw)); background-color: var(--subBlue); } .p-schoolSns__inner { display: grid; grid-template-columns: auto 1fr; align-items: center; justify-content: space-between; gap: 40px; padding: 60px; border-radius: 20px; background-color: #DAE9F8; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.1rem, rgba(255, 255, 255, 0.3)), color-stop(0.1rem, transparent)), -webkit-gradient(linear, left top, right top, color-stop(0.1rem, rgba(255, 255, 255, 0.3)), color-stop(0.1rem, transparent)), url("data:image/svg+xml;utf8,"); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0.1rem, transparent 0.1rem), linear-gradient(to right, rgba(255, 255, 255, 0.3) 0.1rem, transparent 0.1rem), url("data:image/svg+xml;utf8,"); background-size: 60px 60px, 60px 60px, 300px 300px; background-repeat: repeat, repeat, repeat; } .p-schoolSns__head{ grid-column: 1/3; grid-row: 1/2; } .p-schoolSns__body { grid-column: 1/2; grid-row: 2/3; display: flex; flex-direction: column; gap: 40px; max-width: 420px; } .p-schoolSns__text { font-size: var(--text16); font-weight: 500; line-height: 2.2; } /* ---- ボタン（白カード＋バッジ） ---- */ .p-schoolSns__btns { grid-column: 2/3; grid-row: 2/3; display: flex; justify-content: space-between; gap: 30px; height: fit-content; } /* 「中にボタンが1つだけ」を持つ __btns を中央寄せ */ .p-schoolSns__btns:has(.p-schoolSns__btn:only-child) { margin-inline: auto; min-width: 290px; } .p-schoolSns__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: min(290px , 100%); min-height: 80px; padding: 14px 20px; border-radius: 5px; background-color: var(--white); transition: 0.3s var(--baseEasing, ease); } @media (hover: hover) { .p-schoolSns__btn:hover { transform: translateY(-10px); background-color: var(--hoverYellowSub); } } .p-schoolSns__btnIcon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; } .p-schoolSns__btnIcon img { width: 100%; height: auto; } .p-schoolSns__btnText { font-weight: 700; font-size: var(--text18); white-space: nowrap; } /* ---- バッジ（吹き出しタブ） ---- */ .p-schoolSns__badge { position: absolute; left: 50%; top: 0%; transform: translate(-50% , calc(-100% + 5px) ); display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 5px 5px 5px 0; background-color: var(--tagBg); color: var(--white); font-weight: 500; font-size: var(--text13); line-height: 1.4; white-space: nowrap; } .p-schoolSns__badge::after { content: ""; position: absolute; left: 0; top: calc(100% - 1px); width: 15px; aspect-ratio: 22 / 17; background-color: var(--tagBg); -webkit-mask-image: var(--index); mask-image: var(--index); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* ---- レスポンシブ ---- */ @media (width < 992px) { .p-schoolSns__inner { gap: 40px; padding: 40px; } .p-schoolSns__body { max-width: none; } .p-schoolSns__btns { justify-content: center; } } @media (width < 768px) { .p-schoolSns{ padding-bottom: 60px; } .p-schoolSns__inner { padding: 30px 30px 60px; display: flex; flex-direction: column; align-items: stretch; } .p-schoolSns__text { line-height: 2; font-size: 16px; } .p-schoolSns__btns { flex-direction: column; align-items: center; gap: 36px; } .p-schoolSns__btn { width: 100%; max-width: 320px; margin-top: 25px; } } /* ============================================= システムの特徴（後で style.css へマージ） ============================================= */ .p-schoolSystem { background-color: var(--white); padding-top: max(120px, calc(120 / 1440 * 100vw)); padding-bottom: max(120px, calc(120 / 1440 * 100vw)); } /* ---- 黄色カード（method と同じ紙テクスチャ） ---- */ .p-schoolSystem__inner { margin-top: 40px; background-color: var(--subYellow02); background-image: linear-gradient(to bottom, rgba(97, 97, 97, 0.05) 2px, transparent 2px), url("data:image/svg+xml;utf8,"); background-size: 100% 24.8px, 300px 300px; background-repeat: repeat, repeat; padding: 40px 40px 20px; border-radius: 30px; } /* ---- 見出し（定額 × 低価格の松陰塾 / キャッチ） ---- */ .p-schoolSystem__head { text-align: center; } .p-schoolSystem__catch { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; } .p-schoolSystem__tag { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px 4px; border-radius: 5px; background-color: var(--mainBlue); color: var(--mainYellow); font-weight: 700; font-size: var(--text20); line-height: 1.5; } .p-schoolSystem__cross { color: var(--mainBlue); font-weight: 900; font-size: var(--text24); } .p-schoolSystem__of { color: var(--mainBlue); font-weight: 700; font-size: var(--text20); } .p-schoolSystem__headline { color: var(--mainBlue); font-weight: 700; font-size: var(--text36); line-height: 1.5; } /* ---- 特徴カード（3カラム） ---- */ .p-schoolSystem__list { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 40px; column-gap: calc(40 / 1120 * 100%); max-width: 980px; margin: 50px auto 0; } .p-schoolSystem__item { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 240px; padding: 30px 20px 0; border-radius: 0 50px 0 50px; background-color: var(--subYellow); text-align: center; } /* 連番バッジ（上辺に重なる円） */ .p-schoolSystem__num { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background-color: var(--mainBlue); color: var(--white); font-family: var(--ff_en); font-weight: 500; font-size: var(--text20); line-height: 1; } .p-schoolSystem__en { color: var(--mainBlue); font-family: var(--ff_en); font-weight: 600; font-size: 12px; line-height: 1; margin-bottom: 6px; } .p-schoolSystem__cardTtl { color: var(--fontColor); font-weight: 700; font-size: var(--text16); line-height: 2; } .p-schoolSystem__accent { color: var(--accent); font-weight: 700; font-size: var(--text20); line-height: 2; } .p-schoolSystem__img { width: min(180px , 100%); max-width: 100%; margin: auto 0 0; } /* ---- 注釈 ---- */ .p-schoolSystem__note { margin-top: 40px; color: var(--fontColor); font-size: var(--text14); line-height: 1.75; font-weight: 500; } .p-schoolSystem__noteLink { color: var(--mainBlue); } /* ============================================ SP ============================================ */ @media (width < 768px) { .p-schoolSystem{ padding-top: 60px; padding-bottom: 60px; } .p-schoolSystem__inner { padding: 40px 20px; border-radius: 20px; } .p-schoolSystem__catch { flex-wrap: wrap; gap: 8px; } .p-schoolSystem__headline { line-height: 1.75; } .p-schoolSystem__list { grid-template-columns: 1fr; gap: 50px; max-width: 320px; margin-top: 40px; } .p-schoolSystem__cardTtl{ font-size: 16px; } .p-schoolSystem__accent{ font-size: 20px; } .p-schoolSystem__note{ font-size: 14px; } } /*-------------------------------------------- TAB（コース切り替え） --------------------------------------------*/ .p-schoolTab{ background-color: var(--subBlue); } .p-schoolTab__list { display: flex; justify-content: center; width: min(800px , 100%); margin-inline: auto; background-color: var(--tabDisable); border-radius: 100vmax; } .p-schoolTab__btn { position: relative; flex: 1 1 50%; min-height: 70px; padding: 8px 16px; border-radius: 100vmax; color: var(--tabDisableText); font-weight: 700; font-size: var(--text20); text-align: center; cursor: pointer; transition: background-color .3s var(--baseEasing, ease), color .3s var(--baseEasing, ease); } /* 隣り合うタブを少し重ねる */ /* .p-schoolTab__btn + .p-schoolTab__btn { margin-left: -62px; } */ .p-schoolTab__btn:not(.is-active):hover { background-color: var(--tabColor); } .p-schoolTab__btn.is-active { z-index: 1; background-color: var(--mainBlue); color: var(--white); } /* アクティブタブの下向き矢印 */ .p-schoolTab__btn.is-active::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-style: solid; border-width: 15px 15px 0 15px; border-color: var(--mainBlue) transparent transparent transparent; } .p-schoolTab__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .p-schoolTab__panel { padding-top: 60px; } @media (width < 992px) { .p-schoolTab__btn { font-size: 16px; } } @media (width < 768px) { .p-schoolTab__panel { padding-top: 35px; } .p-schoolTab__btn { font-size: 14px; } .p-schoolTab__btn.is-active::after { border-width: 10px 10px 0 10px; } } /* ========================================================================== p-schoolFloating : SP追従CTAバー (new2026) ========================================================================== */ .p-schoolFloating { position: fixed; inset: auto 0 0; z-index: 6; padding: 5px; transition: opacity 0.4s, visibility 0.4s; } .p-schoolFloating.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .p-schoolFloating__inner { display: flex; align-items: stretch; gap: 5px; } .p-schoolFloating__btn { display: flex; align-items: center; gap: 15px; min-height: 40px; padding: 4px 12px; border-radius: 5px; background-color: var(--mainBlue); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; } .p-schoolFloating__btn.is-hidden { display: none; } /* 電話するは他より幅を狭く（デザイン比 102:134:134） */ .p-schoolFloating__btn.--tel { flex: 102; } .p-schoolFloating__btn.--trial, .p-schoolFloating__btn.--request { flex: 134; } .p-schoolFloating__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .p-schoolFloating__icon svg { display: block; width: auto; height: 18px; /* icon-tel / icon-request は塗り無指定 → fill で着色 */ fill: var(--mainYellow); /* icon-pen は inline style で var(--color1) を参照 */ --color1: var(--mainYellow); } @media (hover: hover) { .p-schoolFloating__btn { transition: opacity 0.3s ease; } .p-schoolFloating__btn:hover { opacity: 0.8; } }