@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; } /*-------------------------------------------- COMPLEMENT --------------------------------------------*/ /*-------------------------------------------- GRAYSCALE --------------------------------------------*/ /*-------------------------------------------- INVERT --------------------------------------------*/ /*-------------------------------------------- MIX --------------------------------------------*/ /*-------------------------------------------- ADJUST HUE --------------------------------------------*/ /*-------------------------------------------- ALPHA --------------------------------------------*/ /*-------------------------------------------- LIGHTEN --------------------------------------------*/ /*-------------------------------------------- DARKEN --------------------------------------------*/ /*-------------------------------------------- SATURATE --------------------------------------------*/ /*-------------------------------------------- DESATURATE --------------------------------------------*/ /*-------------------------------------------- APPEND --------------------------------------------*/ /*-------------------------------------------- INDEX --------------------------------------------*/ /*-------------------------------------------- JOIN --------------------------------------------*/ /*-------------------------------------------- LENGTH --------------------------------------------*/ /*-------------------------------------------- NTH --------------------------------------------*/ /*-------------------------------------------- MERGE --------------------------------------------*/ /*-------------------------------------------- GET --------------------------------------------*/ /*-------------------------------------------- KEYS --------------------------------------------*/ /*-------------------------------------------- REMOVE --------------------------------------------*/ /*-------------------------------------------- PI --------------------------------------------*/ /*-------------------------------------------- CEIL --------------------------------------------*/ /*-------------------------------------------- FLOOR --------------------------------------------*/ /*-------------------------------------------- ROUND --------------------------------------------*/ /*-------------------------------------------- ABS --------------------------------------------*/ /*-------------------------------------------- POW --------------------------------------------*/ /*-------------------------------------------- SQRT --------------------------------------------*/ /*-------------------------------------------- COS --------------------------------------------*/ /*-------------------------------------------- SIN --------------------------------------------*/ /*-------------------------------------------- TAN --------------------------------------------*/ /*-------------------------------------------- ACOS --------------------------------------------*/ /*-------------------------------------------- ASIN --------------------------------------------*/ /*-------------------------------------------- ATAN --------------------------------------------*/ /*-------------------------------------------- ATAN2 --------------------------------------------*/ /*-------------------------------------------- UNIT --------------------------------------------*/ /*-------------------------------------------- DIV --------------------------------------------*/ /*-------------------------------------------- TYPE OF --------------------------------------------*/ /*-------------------------------------------- QUOTE --------------------------------------------*/ /*-------------------------------------------- UNQUOTE --------------------------------------------*/ /*-------------------------------------------- INDEX --------------------------------------------*/ /*-------------------------------------------- STR LENGTH --------------------------------------------*/ /*-------------------------------------------- STR SLICE --------------------------------------------*/ /*-------------------------------------------- UPPER CASE --------------------------------------------*/ /*-------------------------------------------- LOWER CASE --------------------------------------------*/ /*-------------------------------------------- PATH --------------------------------------------*/ /*-------------------------------------------- STATE --------------------------------------------*/ /*-------------------------------------------- MEDIA --------------------------------------------*/ /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ /*-------------------------------------------- COLOR --------------------------------------------*/ /*-------------------------------------------- SCROLLBAR --------------------------------------------*/ /*-------------------------------------------- FONT FAMILY --------------------------------------------*/ /*-------------------------------------------- TRANSITION --------------------------------------------*/ /*-------------------------------------------- OPACITY --------------------------------------------*/ /*-------------------------------------------- BORDER RADIUS --------------------------------------------*/ /*-------------------------------------------- ICON --------------------------------------------*/ /*-------------------------------------------- FONT FACE --------------------------------------------*/ @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 { --disabled: #e7e7e7; --pagerText: #b6b6b6; --bgGray: #C4C4C4; --fontColor: #2D2D2D; --mainBlue: #007EDB; --hoverBlue: #004AAB; --bgBlue: #0172C5; --subBlue: #e5f2ff; --subBlue02: #F7FBFF; --borderBlue: #ABCDF0; --borderBlue02: #4FAAED; --mainYellow: #FFF045; --subYellow02: #FFF586; --subYellow: #FFFEE7; --accent: #FF6103; --disable: #909090; --line: #E1E1E1; --white: #fff; --login: #004387; --loginHover: #075CB1; --stroke: #4AA3D5; --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"); --icon_tel: url("../img/common/icon_tel.webp"); --maskTop: url("../img/common/top.webp"); --maskBottom: url("../img/common/bottom.webp"); --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; --beige: #F5EEE4; --caption: #777; --text12: clamp(10px,1.425vw,12px); --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); --text28: clamp(22px,3.025vw,28px); --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,"); } /*-------------------------------------------- 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; } /*-------------------------------------------- WRAPPER --------------------------------------------*/ .l-wrapper { background-color: var(--white); position: relative; } .l-wrapper::before { content: ""; aspect-ratio: 1440/90; background-color: var(--white); -webkit-mask-size: 102% auto; mask-size: 102% auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 110%; } .l-wrapper::before { -webkit-mask-image: var(--maskTopNew); mask-image: var(--maskTopNew); bottom: calc(100% - 1px); -webkit-mask-position: center top; mask-position: center top; } @media (width < 768px) { .l-wrapper::before { -webkit-mask-position: center calc(100% + 1px); mask-position: center calc(100% + 1px); } } .l-wrapper[data-color=green] { background-color: #F4F6AB; } .l-wrapper[data-color=green]::before { background-color: #F4F6AB; } .l-wrapper[data-color=blue] { background-color: #D0E9FF; } .l-wrapper[data-color=blue]::before { background-color: #D0E9FF; } .l-wrapper[data-color=orange] { background-color: #FFE8A9; } .l-wrapper[data-color=orange]::before { background-color: #FFE8A9; } @media (width < 768px) { .l-wrapper { padding-top: 30px; margin-top: min(-50px, -3.4722222222vw); } } @media (width < 576px) { .l-wrapper { margin-top: min(-60px, -4.1666666667vw); } } /*-------------------------------------------- FOOTER --------------------------------------------*/ .l-innerLayout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 90px; } .l-innerLayout.--row70 { row-gap: 70px; } @media (width < 768px) { .l-innerLayout { row-gap: 60px; } } /*-------------------------------------------- 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; } } .c-btnSearch.--larger { max-width: 340px; min-height: 50px; padding: 10px 20px 11px 20px; } @media (width < 768px) { .c-btnSearch.--larger { font-size: 14px; } } .c-btnSearch.--bgYellow { background: var(--mainYellow); border: unset; } .c-btnSearch.--bgYellow::before { background-color: var(--white); } @media (hover: hover) { .c-btnSearch:hover { color: var(--mainBlue); opacity: 1; } .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 { /*--- テキスト中央寄せ＋矢印を右端に絶対配置（sReserve 予約ボタン等）---*/ } .c-btn.--txtCenter { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .c-btn.--txtCenter .c-btn__arrow { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .c-btn.--small { min-height: 50px; } @media (width < 768px) { .c-btn.--small { min-height: 42px; } } .c-btn.--smaller { min-height: 40px; gap: 4px; padding: 7px 18px 7px 14px; font-size: var(--text15); } @media (width < 768px) { .c-btn.--smaller { min-height: 40px; font-size: 15px; } } .c-btn.--200 { max-width: 200px; } .c-btn.--220 { max-width: 220px; } .c-btn.--230 { max-width: 230px; } .c-btn.--240 { max-width: 240px; } .c-btn.--254 { max-width: 254px; } .c-btn.--280 { max-width: 280px; } .c-btn.--300 { max-width: 300px; } .c-btn.--500 { max-width: 500px; } .c-btn.--800 { max-width: 800px; } .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.--sp210 { max-width: 210px; } } @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__text.--icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } .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; } .c-btn.--back { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding-right: 37px; padding-left: 25px; } .c-btn.--back .c-btn__text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; } .c-btn.--back .c-btn__arrow { -webkit-transform: scaleX(-1); transform: scaleX(-1); } @media (hover: hover) { .c-btn:hover::before { -webkit-transform: translateY(0); transform: translateY(0); } .c-btn:hover { color: var(--white); opacity: 1; } .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.--whiteBg:hover { color: var(--mainBlue); } } /*-------------------------------------------- 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.--sm { max-width: calc(100rem + 40px * 2); } .c-inner.--md { max-width: calc(138rem + 40px * 2); } .c-inner.--gutter0 { max-width: 120rem; } } /*-------------------------------------------- XXXX --------------------------------------------*/ .c-faq { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 30px; } @media (width < 768px) { .c-faq { row-gap: 20px; } } .c-faq[data-variant=large] .c-faq__frame { border-radius: 20px; } @media (768px <= width) { .c-faq[data-variant=large] .c-faq__trigger { font-size: var(--text24); padding: 40px 80px 40px 30px; } .c-faq[data-variant=large] .c-faq__trigger::before { margin-top: 5px; } .c-faq[data-variant=large] .c-faq__trigger i { width: 40px; height: 40px; right: 40px; } .c-faq[data-variant=large] .c-faq__trigger i::before, .c-faq[data-variant=large] .c-faq__trigger i::after { width: 16px; } .c-faq[data-variant=large] .c-faq__body { -webkit-transform: translateY(-20px); transform: translateY(-20px); } .c-faq[data-variant=large] .c-faq__main { padding-bottom: 20px; } } .c-faq__frame { border-radius: 10px; border: 2px solid var(--subBlue); background-color: var(--subBlue); -webkit-transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .c-faq__frame[data-opened] { background-color: var(--white); border-color: var(--mainBlue); } .c-faq__frame[data-opened] .c-faq__trigger i { background-color: var(--mainYellow); } .c-faq__frame[data-opened] .c-faq__trigger i::before, .c-faq__frame[data-opened] .c-faq__trigger i::after { background-color: var(--mainBlue); } .c-faq__frame[data-opened] .c-faq__trigger i::after { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } .c-faq__frame[data-opened] > .c-faq__body { grid-template-rows: 1fr; } @media (hover: hover) { .c-faq__frame:hover { border-color: var(--mainBlue); background-color: var(--white); } } .c-faq__trigger { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; padding: 20px 80px 20px 30px; font-size: var(--text18); font-weight: 700; line-height: 1.5; cursor: pointer; list-style: none; position: relative; } @media (width < 768px) { .c-faq__trigger { gap: 10px; padding: 20px 60px 20px 20px; font-size: 16px; } } .c-faq__trigger::-webkit-details-marker { display: none; } .c-faq__trigger::before { content: "Q."; font-family: 'Raleway', sans-serif; font-size: clamp(22px, 3vw, 28px); font-weight: 600; line-height: 1; color: var(--mainBlue); } @media (width < 768px) { .c-faq__trigger::before { margin-top: 4.5px; font-size: 20px; } } .c-faq__trigger i { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 30px; background-color: var(--mainBlue); position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .c-faq__trigger i { width: 28px; height: 28px; border-radius: 28px; right: 20px; } } .c-faq__trigger i::before, .c-faq__trigger i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 2px; background-color: var(--white); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: background-color 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); transition: background-color 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); transition: background-color 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), transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 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), 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); } @media (width < 768px) { .c-faq__trigger i::before, .c-faq__trigger i::after { width: 10px; height: 1.5px; } } .c-faq__trigger i::after { -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .c-faq__body { display: grid; grid-template-rows: 0fr; -webkit-transition: grid-template-rows 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: grid-template-rows 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: grid-template-rows 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -ms-grid-rows 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .c-faq__inner { overflow: hidden; min-height: 0; } .c-faq__main { padding-bottom: 20px; padding-inline: 77px 80px; } @media (width < 768px) { .c-faq__main { padding-inline: 50px 60px; } } .c-faq__text { font-size: var(--text16); font-weight: 500; line-height: 2.2; } @media (width < 768px) { .c-faq__text { font-size: 14px; line-height: 1.75; } } .c-faq__text > small { font-size: var(--text14); } @media (width < 768px) { .c-faq__text > small { font-size: 12px; } } .c-faq__text > strong { font-weight: 700; } .c-faq__link { margin-top: 20px; } @media (width < 768px) { .c-faq__link { margin-top: 15px; } } /*-------------------------------------------- XXXX --------------------------------------------*/ /*-------------------------------------------- c-formLead（申込みリード：体験予約 / 資料請求共通）見出し（校舎名＋フォーム名）＋画像＋ CTAボタンのまとまり --------------------------------------------*/ .c-formLead { padding-bottom: 130px; } @media (width < 768px) { .c-formLead { padding-bottom: 70px; } } .c-formLead__ttl { display: grid; row-gap: 30px; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 50px; } @media (width < 768px) { .c-formLead__ttl { row-gap: 10px; margin-bottom: 40px; } } .c-formLead__ttlName { font-size: var(--text46); font-weight: 700; line-height: 1; } @media (width < 768px) { .c-formLead__ttlName { font-size: 32px; line-height: 1.5; } } .c-formLead__ttlText { color: var(--mainBlue); font-size: var(--text24); font-weight: 700; line-height: 1; } @media (width < 768px) { .c-formLead__ttlText { font-size: 16px; line-height: 1.5; } } .c-formLead__btnFrame { margin-top: 30px; } /*-------------------------------------------- GRID --------------------------------------------*/ .c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; } .c-grid__itemFrame.--full { grid-column: 1/-1; } .c-grid.--gapXs { gap: 2rem; } .c-grid.--gapSm { gap: 3rem; } .c-grid.--gapRow0 { row-gap: 0; } .c-grid.--gapRowSs { row-gap: 1rem; } .c-grid.--gapRowXs { row-gap: 2rem; } .c-grid.--gapRowSm { row-gap: 3rem; } .c-grid.--gapCol0 { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } .c-grid.--gapColSs { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; } .c-grid.--gapColXs { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } .c-grid.--gapColSm { -webkit-column-gap: 3rem; -moz-column-gap: 3rem; column-gap: 3rem; } @media (768px <= width) { .c-grid.--col3 { grid-template-columns: 1fr 1fr 1fr; } } @media (width < 992px) { .c-grid { gap: 3.5rem; } .c-grid.--gapRowXs { row-gap: 1.5rem; } .c-grid.--gapRowSm { row-gap: 2rem; } .c-grid.--gapColXs { -webkit-column-gap: 1.5rem; -moz-column-gap: 1.5rem; column-gap: 1.5rem; } .c-grid.--gapColSm { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } .c-grid.--gapXs { gap: 1.5rem; } .c-grid.--gapSm { gap: 2rem; } } @media (width < 768px) { .c-grid { grid-template-columns: 1fr; gap: 2rem; } } @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; } } /*-------------------------------------------- BREADCRUMB --------------------------------------------*/ .c-group { background-color: var(--subBlue); padding-top: max(120px, 8.3333333333vw); padding-bottom: max(120px, 8.3333333333vw); } .c-group.--top { padding-bottom: 0; } @media (width < 768px) { .c-group { padding-top: 50px; padding-bottom: 0px; } } .c-group__main { 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; } @media (width < 768px) { .c-group__main { background-size: 30px 30px, 30px 30px, 300px 300px; } } .c-group__main { border-radius: 20px; } @media (992px <= width) { .c-group__main { padding: 5% 4.1666666667%; } } @media (width < 992px) { .c-group__main { padding: 30px 20px; border-radius: 12px; } } @media (width < 768px) { .c-group__main { padding: 30px 20px; } } .c-group__mainInner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (width < 992px) { .c-group__mainInner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .c-group__mainHead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px; } @media (width < 992px) { .c-group__mainHead { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .c-group__mainEn { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: var(--text20); line-height: 1; color: var(--mainBlue); } @media (width < 768px) { .c-group__mainEn { font-size: 18px; } } .c-group__mainTitle { margin: 0; font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700; font-size: var(--text30); line-height: 1.5; } @media (width < 768px) { .c-group__mainTitle { font-size: 26px; } } .c-group__mainList { 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; width: 63.6363636364%; --w: 700; margin-inline: auto; } @media (width < 992px) { .c-group__mainList { width: 100%; } } .c-group__mainRow { 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; } @media (width < 768px) { .c-group__mainRow { row-gap: 8px; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; max-width: 400px; margin-inline: auto; } } .c-group__mainItem { -ms-flex-negative: 0; flex-shrink: 0; } .c-group__mainItem.--lg { width: calc(340 / var(--w) * 100%); } @media (width < 768px) { .c-group__mainItem.--lg { width: 100%; } } .c-group__mainItem.--sm { width: calc(198 / var(--w) * 100%); } @media (width < 768px) { .c-group__mainItem.--sm { width: calc(50% - 3px); } } .c-group__mainItem.--md { width: calc(226 / var(--w) * 100%); } @media (width < 768px) { .c-group__mainItem.--md { width: calc(50% - 3px); } } .c-group__mainLink { display: block; width: 100%; height: 100%; line-height: 0; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; -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); } .c-group__mainLink > img { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media (hover: hover) { .c-group__mainLink:hover { opacity: 0.5; } } /*-------------------------------------------- HEADING --------------------------------------------*/ .c-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 15px; --mainColor: var(--black); --labelColor: var(--mainBlue); } @media (width < 768px) { .c-heading { row-gap: 8px; } } .c-heading.--invert { --mainColor: var(--white); --labelColor: var(--mainYellow); } .c-heading__main { font-size: var(--text36); font-weight: 700; line-height: 1.5; color: var(--mainColor); } @media (width < 768px) { .c-heading__main { font-size: 26px; } } .c-heading__label { font-family: 'Raleway', sans-serif; font-size: var(--text18); font-weight: 600; line-height: 1; color: var(--labelColor); padding-left: 13px; position: relative; } @media (width < 768px) { .c-heading__label { font-size: 14px; } } .c-heading__label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background-color: var(--labelColor); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .c-heading__secondary { font-size: var(--text24); font-weight: 700; line-height: 1.5; color: var(--mainBlue); padding-left: 16px; position: relative; } @media (width < 768px) { .c-heading__secondary { font-size: 20px; } } .c-heading__secondary::before { content: ""; width: 6px; height: 32px; border-radius: 6px; background-color: var(--mainBlue); position: absolute; top: 0.75em; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (width < 768px) { .c-heading__secondary::before { width: 4px; height: 100%; top: 3px; -webkit-transform: unset; transform: unset; } } /*-------------------------------------------- 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; } } /*-------------------------------------------- HEADING --------------------------------------------*/ @media (width < 768px) { .c-lowerHeading { margin-top: 0; } } .c-lowerHeading__inner { 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 50px; } @media (width < 768px) { .c-lowerHeading__inner { row-gap: 20px; } } .c-lowerHeading__frame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 10px; } .c-lowerHeading__main { font-size: var(--text46); font-weight: 700; line-height: 1; text-align: center; } @media (width < 768px) { .c-lowerHeading__main { font-size: 32px; line-height: 1.5; } } .c-lowerHeading__label { font-family: 'Raleway', sans-serif; font-size: var(--text24); font-weight: 600; line-height: 1; text-align: center; color: var(--mainBlue); } @media (width < 768px) { .c-lowerHeading__label { font-size: 16px; } } .c-lowerHeading__lead > p { font-size: var(--text14); font-weight: 500; line-height: 2.2; text-align: center; } @media (width < 768px) { .c-lowerHeading__lead > p { font-size: 14px; line-height: 2; } } .c-lowerHeading__lead > p > span { display: inline-block; } .modal-2-container { position: relative; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; -webkit-transition: 0.3s; transition: 0.3s; 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; } .modal-2-container.active { opacity: 1; visibility: visible; z-index: 2000; } .modal-2-body { position: relative; max-width: 600px; width: 90%; } .modal-2-close { padding: 0; border: none; background: transparent; color: #000000; border-radius: 0; position: absolute; top: 22px; right: 22px; width: 30px; height: 30px; cursor: pointer; } .modal-2-content { display: block; overflow: auto; width: 100%; height: 100%; max-height: 90vh; padding: 20px 36px 20px; background: #fff; border-radius: 15px; border: 5px solid #007EDB; } .modal-form { -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .modal-form-head-1 { 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px; margin-bottom: 15px; } .modal-form-head-1__sub { padding: 3px 24px; background: #FFF045; font-size: 1.7rem; color: #007EDB; border-radius: 50px; font-weight: 700; letter-spacing: 0.1em; } .modal-form-head-1__main { font-size: 2.5rem; font-weight: 700; color: #007EDB; letter-spacing: 0.1em; } .modal-form-head-2 { padding: 6px; border-top: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb; font-size: 1.3rem; line-height: 1.5; font-weight: 700; text-align: center; } .modal-form-head-3 { 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; margin-bottom: 10px; padding: 2px 25px; border: 1px solid #007EDB; color: #007EDB; border-radius: 50px; max-width: 95%; } .modal-form-head-3__main { display: block; font-size: 1.9rem; line-height: 1.5; font-weight: 700; letter-spacing: 0.1em; } .modal-form-head-3__sub { display: block; font-size: 1.3rem; line-height: 1.5; font-weight: 700; letter-spacing: 0.1em; } .modal-form-head-4 { margin-bottom: 20px; font-weight: 700; font-size: 2.5rem; line-height: 1.36; text-align: center; color: #007EDB; letter-spacing: 0.1em; } .modal-form-head-5 { margin-bottom: 15px; font-weight: 700; font-size: 1.9rem; line-height: 1.23; text-align: center; color: #007EDB; letter-spacing: 0.1em; } .modal-form-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 15px 0; border-bottom: 1px solid #e7e7e7; } .modal-form-row--start { -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .modal-form-row__label { -ms-flex-negative: 0; flex-shrink: 0; min-width: 135px; padding-right: 10px; font-size: 1.3rem; line-height: 1.2142; font-weight: 700; letter-spacing: 0.075em; } .modal-form-row__label--xs { min-width: 28px; } .modal-form-row__label--sm { min-width: 100px; } .modal-form-row--start .modal-form-row__label { padding-top: 5px; } .modal-form-row__main { width: 100%; } .modal-form-row__main.has-error input[type=text] { background-color: rgb(255, 238, 238); } .modal-form-row__zip, .modal-form-row__tel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .modal-form-row__zip span, .modal-form-row__tel span { display: inline-block; position: relative; top: -0.1em; font-weight: 700; font-size: 2.5rem; line-height: 1; } .modal-form-row__zip input[type=text], .modal-form-row__tel input[type=text] { text-align: center; } .modal-form-row__mail { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .modal-form-row__mail span { display: inline-block; position: relative; top: -0.1em; font-weight: 700; font-size: 1.4rem; line-height: 1; } .modal-form-row__horizontal { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0 14px; } .modal-form-row__horizontal__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 150px; } .modal-form-row__note { display: block; margin-top: 6px; font-size: 0.9rem; line-height: 1.5; letter-spacing: 0.1em; } .modal-form-row input[type=text] { display: block; -webkit-box-shadow: none; box-shadow: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; background: #ffffff; width: 100%; border: 1px solid #bbbbbb; padding: 4px 10px; border-radius: 25px; font-size: 1.5rem; } .modal-form-row input[type=text][name=inputZip1] { width: 100px; } .modal-form-row input[type=text][name=inputZip2] { width: 120px; } .modal-form-row input[type=text]:focus { outline: none; } .modal-form-row input[type=text]::-webkit-input-placeholder { color: #cccccc; } .modal-form-row input[type=text]::-moz-placeholder { color: #cccccc; } .modal-form-row input[type=text]::-ms-input-placeholder { color: #cccccc; } .modal-form-row input[type=text]::placeholder { color: #cccccc; } .modal-form-row input[type=text]:-ms-input-placeholder { color: #cccccc; } .modal-form-row input[type=text]::-ms-input-placeholder { color: #cccccc; } .modal-form-row select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0 10px; border-radius: 50px; outline: none; border: 1px solid #bbbbbb; width: 100%; max-width: 260px; padding: 5px; font-size: 1.3rem; font-weight: 700; text-align: center; letter-spacing: 0.075em; background: url(../../_common/images/icon_arrow_select.svg) no-repeat center right 10px/12px #eeeeee; } .modal-form-row select:focus { outline: none; } .modal-form-btn { display: block; padding: 0; border: none; background: #007EDB; width: 100%; margin-top: 15px; padding: 6px 5px; color: #fff; border-radius: 100px; font-size: 1.7rem; line-height: 1.5; letter-spacing: 0.1em; font-weight: 700; cursor: pointer; -webkit-transition: 0.3s; transition: 0.3s; text-align: center; text-decoration: none; } .modal-form-btn:hover { opacity: 0.6; color: #fff; } .modal-form-btn--lg { font-size: 1.9rem; } .modal-form-btn--back { width: 200px; margin-left: auto; margin-right: auto; padding: 4px 5px 2px; border-bottom-color: #999999; background: #cccccc; font-size: 1.5rem; color: #666666; } .modal-form-btn--close { background: #888888; border-bottom-color: #555555; } .modal-form-btn span { margin-right: 10px; font-size: 1.2rem; letter-spacing: 0.1em; } .modal-form-results { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 15px; } .modal-form-results__button { 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; width: 100%; padding: 4px 15px 4px 28px; background: transparent; color: #1f1f1f; border: 1px solid #bbbbbb; border-bottom-width: 4px; border-radius: 50px; font-weight: 700; cursor: pointer; -webkit-transition: 0.3s; transition: 0.3s; } .modal-form-results__button:hover { background: #f2a842; color: #fff; border-color: #f2a842; border-bottom-color: #b67e31; } .modal-form-results__main { display: block; font-size: 1.7rem; letter-spacing: 0.1em; } .modal-form-results__sub { display: block; font-size: 1.2rem; letter-spacing: 0.1em; } .modal-form-check { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; } .modal-form-check__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.4rem; line-height: 1.5; font-weight: 700; letter-spacing: 0.075em; } .modal-form-check__item input { position: relative; top: 0.05em; } .modal-form-check__label { display: inline-block; margin-left: 8px; cursor: pointer; } .modal-form-policy { margin-top: 10px; } .modal-form-policy p { font-size: 1.2rem; line-height: 1.6667; letter-spacing: 0.025em; } .modal-form-text-1 { font-weight: 700; font-size: 1.5rem; line-height: 1.5; letter-spacing: 0.075em; text-align: center; } .modal-form-text-error { display: block; width: 100%; margin-top: 0.3em; color: #dc3545; font-size: 1.1rem; line-height: 1.4; font-weight: 700; } .modal-form-img { display: block; margin: 30px auto; max-width: 300px; } .nav-sp-bnr { margin-top: 26px; padding: 10px; background: #ffffff; text-align: center; border: 3px solid #007EDB; border-radius: 15px; } .nav-sp-bnr__button { padding: 0; border: none; background: transparent; color: #000000; border-radius: 0; } .nav-sp-bnr__text { position: relative; display: inline-block; margin-bottom: 5px; font-size: 1.6rem; line-height: 1.5; font-weight: 700; color: #007EDB; letter-spacing: 0.1em; } .nav-sp-bnr__text::before { content: ""; position: relative; top: 2px; display: inline-block; width: 2px; height: 15px; background: #007EDB; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); margin-right: 8px; } .nav-sp-bnr__text::after { content: ""; position: relative; top: 2px; display: inline-block; width: 2px; height: 15px; background: #007EDB; -webkit-transform: rotate(30deg); transform: rotate(30deg); margin-left: 8px; } .btn-modal-form { position: fixed; bottom: 30px; left: 30px; padding: 0; border: none; background: transparent; color: #000000; border-radius: 0; width: 120px; height: 120px; cursor: pointer; -webkit-transition: 0.3s; transition: 0.3s; } .btn-modal-form:hover { opacity: 0.7; } .btn-modal-form-sp { position: fixed; bottom: 0; /* bottom: 90px; */ left: 0; padding: 0; border: none; background: transparent; color: #000000; border-radius: 0; width: 220px; height: 58px; } .step { position: absolute; top: 0; left: 0; z-index: 1000; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .step.current { opacity: 1; z-index: 1001; } .step.after { left: -15px; opacity: 0; } .step.before { left: 15px; opacity: 0; } .nav_sp_back.open { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } @media screen and (max-width: 859px) { .modal-2-container { /* sp */ } .modal-2-body { /* sp */ width: 88%; } .modal-2-close { /* sp */ width: 30px; height: 30px; top: 10px; right: 10px; } .modal-2-content { /* sp */ padding: 20px; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); } .modal-form-head-1 { /* sp */ gap: 8px; } .modal-form-head-1__sub { /* sp */ padding: 3px 30px; } .modal-form-head-3 { /* sp */ max-width: 90%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .modal-form-head-3__main { font-size: min(3.7333333333vw, 1.6rem); } .modal-form-row { /* sp */ padding: 16px 0; } .modal-form-row__label { /* sp */ min-width: 70px; font-size: 1.4rem; } .modal-form-row__label--xs { /* sp */ min-width: 24px; } .modal-form-row__label--sm { /* sp */ min-width: 60px; } .modal-form-row__horizontal__item { /* sp */ width: calc(50% - 7px); } .modal-form-row__note { /* sp */ font-size: 1.1rem; } .modal-form-row input[type=text][name=inputZip1] { /* sp */ width: 40%; } .modal-form-row input[type=text][name=inputZip2] { /* sp */ width: 50%; } .modal-form-btn { /* sp */ padding: 8px 10px 6px; font-size: 1.9rem; } .modal-form-btn--back { /* sp */ padding: 6px 10px 4px; font-size: 1.5rem; } .modal-form-btn span { /* sp */ display: block; } .modal-form-policy p { /* sp */ font-size: 1.1rem; } .modal-form-text-1 { /* sp */ text-align: left; } } /*-------------------------------------------- NEWS LIST（お知らせ／開校情報共通一覧） NewsList.js が生成。news / kaikou で共有するコンポーネント。 --------------------------------------------*/ .c-newsList { padding-top: 120px; padding-bottom: 120px; } @media (width < 768px) { .c-newsList { padding-top: 40px; padding-bottom: 60px; } } .c-newsList__list { width: min(1000px, 100%); margin-inline: auto; border-top: 1px solid var(--borderBlue); } .c-newsList__item { border-bottom: 1px solid var(--borderBlue); } .c-newsList__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; padding: 32px 40px; -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 (width < 768px) { .c-newsList__link { display: grid; grid-template-columns: 1fr auto; row-gap: 0px; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; padding: 15px 10px; } } @media (hover: hover) { .c-newsList__link:hover { opacity: 0.5; } } .c-newsList__link--static { cursor: default; } @media (hover: hover) { .c-newsList__link--static:hover { opacity: 1; } } .c-newsList__meta { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } @media (width < 768px) { .c-newsList__meta { grid-column: 1/2; grid-row: 1/2; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; } } .c-newsList__date { -ms-flex-negative: 0; flex-shrink: 0; width: 80px; max-width: 100%; font-weight: 700; font-size: 18px; color: var(--mainBlue); } @media (width < 768px) { .c-newsList__date { width: auto; font-size: 13px; } } .c-newsList__category { -ms-flex-negative: 0; flex-shrink: 0; 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; padding: 2px 15px 4px; border-radius: 100vmax; background-color: var(--subBlue); font-size: 14px; font-weight: 500; color: var(--mainBlue); } @media (width < 768px) { .c-newsList__category { font-size: 13px; line-height: 1.2; padding: 2px 10px; } } .c-newsList__title { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; font-size: 16px; font-weight: 500; line-height: 1.75; } @media (width < 768px) { .c-newsList__title { grid-column: 1/2; grid-row: 2/3; font-size: 14px; } } .c-newsList__arrow { -ms-flex-negative: 0; flex-shrink: 0; display: block; width: 7px; aspect-ratio: 1/2; margin-left: auto; color: var(--mainBlue); background-color: currentColor; -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; } @media (width < 768px) { .c-newsList__arrow { grid-column: 2/3; grid-row: 1/3; } } .c-newsList__pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 40px; } @media (width < 768px) { .c-newsList__pagination { margin-top: 50px; } } /*-------------------------------------------- PAGER（ページ送り / NewsList.js が生成） - 数字: 文字のみ（現在=mainBlue / それ以外=pagerText、Ralewayフォント） - 前へ/次へ: 塗りつぶし円＋白い三角（有効=mainBlue / 無効=disabled） --------------------------------------------*/ .c-pager { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .c-pager__num { 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; font-family: 'Raleway', sans-serif; font-weight: 500; font-size: var(--text16); line-height: 1; color: var(--pagerText); -webkit-transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); cursor: pointer; } @media (width < 768px) { .c-pager__num { font-size: 16px; } } @media (hover: hover) { .c-pager__num:hover { color: var(--mainBlue); } } .c-pager__num.is-current { color: var(--mainBlue); pointer-events: none; } .c-pager__ellipsis { 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; font-family: 'Raleway', sans-serif; font-weight: 500; font-size: var(--text16); line-height: 1; color: var(--pagerText); } @media (width < 768px) { .c-pager__ellipsis { font-size: 16px; } } .c-pager__prev, .c-pager__next { 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: 38px; aspect-ratio: 1; height: auto; border: 1px solid var(--mainBlue); border-radius: 50%; background-color: var(--mainBlue); color: var(--white); text-decoration: none; -webkit-transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); cursor: pointer; } @media (hover: hover) { .c-pager__prev:hover, .c-pager__next:hover { background-color: var(--white); color: var(--mainBlue); } } .c-pager__prev.is-disabled, .c-pager__next.is-disabled { background-color: var(--disabled); border-color: var(--disabled); pointer-events: none; } .c-pager__prev { margin-right: 20px; } @media (width < 768px) { .c-pager__prev { margin-right: 10px; } } .c-pager__next { margin-left: 20px; } @media (width < 768px) { .c-pager__next { margin-left: 10px; } } /*-------------------------------------------- PAGE TOP BUTTON（ページトップへ戻る） --------------------------------------------*/ /*-------------------------------------------- SCHOOL SEARCH（校舎を探す） --------------------------------------------*/ .c-schoolSearch { position: relative; margin-top: calc(var(--maskDividerBottom) * -1); padding-top: max(180px, 12.5vw); padding-bottom: max(250px, 17.3611111111vw); } .c-schoolSearch.--nanoni { padding-top: max(300px, 20.8333333333vw); padding-bottom: 0; background-color: var(--subBlue); } @media (width < 992px) { .c-schoolSearch.--nanoni { padding-top: 200px; } } @media (width < 768px) { .c-schoolSearch.--nanoni { padding-top: 175px; } } .c-schoolSearch.--method { padding-top: max(90px, 6.25vw); padding-bottom: 0; background-color: var(--subBlue); margin-top: 0; } @media (width < 992px) { .c-schoolSearch.--method { padding-top: 70px; } } @media (width < 768px) { .c-schoolSearch.--method { padding-top: 60px; } } @media (width < 768px) { .c-schoolSearch { padding: 160px 0 150px; } } .c-schoolSearch__rule { pointer-events: none; position: absolute; top: 0; left: 70px; width: 20px; height: 100%; border-left: 2px solid var(--lineRed); border-right: 2px solid var(--lineRed); z-index: 0; } @media (width < 768px) { .c-schoolSearch__rule { display: none; } } .c-schoolSearch__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; } @media (width < 992px) { .c-schoolSearch__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 40px; } } .c-schoolSearch { /*-------------------------------------------- HEADER（Search / 校舎を探す） --------------------------------------------*/ } .c-schoolSearch__head { width: 25%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; position: relative; z-index: 1; } @media (width < 992px) { .c-schoolSearch__head { width: 100%; } } .c-schoolSearch { /*-------------------------------------------- BODY（右側コンテンツ） --------------------------------------------*/ } .c-schoolSearch__body { display: grid; gap: 20px; width: 100%; max-width: 740px; margin-inline: auto; position: relative; z-index: 1; } @media (width < 992px) { .c-schoolSearch__body { max-width: none; } } .c-schoolSearch { /*-------------------------------------------- カード（都道府県 / 地図） --------------------------------------------*/ } .c-schoolSearch__cardList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (width < 768px) { .c-schoolSearch__cardList { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media (width < 576px) { .c-schoolSearch__cardList { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .c-schoolSearch__card { position: relative; background: var(--subYellow02); border-radius: 20px; padding: 11.1111111111% 13.8888888889%; 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: start; -ms-flex-align: start; align-items: flex-start; gap: 15px; } .--nanoni .c-schoolSearch__card, .--method .c-schoolSearch__card { background: var(--white); } @media (width < 768px) { .c-schoolSearch__card { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; padding: min(20px, 5.7142857143%) 20px; gap: 10px; } } .c-schoolSearch__cardHead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } @media (width < 576px) { .c-schoolSearch__cardHead { margin-inline: auto; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; } } .c-schoolSearch__cardIcon { 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; -ms-flex-negative: 0; flex-shrink: 0; width: 40px; } .c-schoolSearch__cardIcon svg { width: 100%; } @media (width < 768px) { .c-schoolSearch__cardIcon { width: 30px; } } .c-schoolSearch__cardTitle { font-weight: 700; font-size: var(--text24); line-height: 1.5; } @media (width < 768px) { .c-schoolSearch__cardTitle { font-size: 18px; } } .c-schoolSearch__cardNote { font-weight: 500; font-size: var(--text14); line-height: 1.5; } @media (width < 768px) { .c-schoolSearch__cardNote { font-size: 13px; } } .c-schoolSearch { /*-------------------------------------------- キーワード検索カード --------------------------------------------*/ } .c-schoolSearch__keyword { background: var(--subYellow02); border-radius: 20px; padding: 40px; } .--nanoni .c-schoolSearch__keyword, .--method .c-schoolSearch__keyword { background: var(--white); } @media (width < 992px) { .c-schoolSearch__keyword { padding: 20px 15px; } } @media (width < 768px) { .c-schoolSearch__keyword { padding: min(20px, 5.7142857143%) 20px; } } .c-schoolSearch__keywordTitle { margin: 0 0 25px; font-weight: 700; font-size: var(--text24); line-height: 1.5; } @media (width < 992px) { .c-schoolSearch__keywordTitle { margin-bottom: 15px; } } @media (width < 768px) { .c-schoolSearch__keywordTitle { font-size: 18px; text-align: center; margin: 0 0 10px; } } .c-schoolSearch__keywordForm { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .c-schoolSearch__keywordInputWrap { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 60px; background: var(--white); border: 2px solid var(--mainBlue); border-radius: 10px; padding: 0 15px 0 50px; } @media (width < 768px) { .c-schoolSearch__keywordInputWrap { padding-left: 30px; height: 50px; } } .c-schoolSearch__keywordInputWrap.--gray { background: #F5F5F5; } .c-schoolSearch__keywordInputIcon { position: absolute; top: 50%; left: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 20px; aspect-ratio: 1; pointer-events: none; } @media (width < 992px) { .c-schoolSearch__keywordInputIcon { left: 12px; width: 16px; } } .c-schoolSearch__keywordInputIcon > svg { display: block; width: 100%; height: 100%; color: var(--mainBlue); } .c-schoolSearch__keywordInput { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; width: 100%; height: 100%; background: transparent; font-weight: 500; font-size: var(--text18); line-height: 1.5; } @media (width < 768px) { .c-schoolSearch__keywordInput { font-size: 14px; } } .c-schoolSearch__keywordInput::-webkit-input-placeholder { color: #989898; } .c-schoolSearch__keywordInput::-moz-placeholder { color: #989898; } .c-schoolSearch__keywordInput::-ms-input-placeholder { color: #989898; } .c-schoolSearch__keywordInput::placeholder { color: #989898; } .c-schoolSearch__keywordSubmit { -ms-flex-negative: 0; flex-shrink: 0; width: 100px; height: 60px; padding: 10px 20px; background: var(--mainBlue); border-radius: 10px; color: var(--white); font-weight: 700; font-size: var(--text18); line-height: 1.5; cursor: pointer; text-align: center; overflow: hidden; position: relative; } .c-schoolSearch__keywordSubmit span { position: relative; z-index: 1; } .c-schoolSearch__keywordSubmit::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; } @media (width < 768px) { .c-schoolSearch__keywordSubmit { padding: 0; width: 60px; height: 50px; font-size: 14px; } } @media (hover: hover) { .c-schoolSearch__keywordSubmit:hover::before { -webkit-transform: translateY(0); transform: translateY(0); } } .c-schoolSearch__keywordNote { margin-top: 15px; font-weight: 500; font-size: var(--text14); line-height: 1.5; } @media (width < 768px) { .c-schoolSearch__keywordNote { font-size: 13px; } } .c-schoolSearch { /*-------------------------------------------- オンライン学習（松陰スタディ） --------------------------------------------*/ } .c-schoolSearch__online { margin-top: 20px; 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: start; -ms-flex-align: start; align-items: flex-start; gap: 15px; } @media (width < 768px) { .c-schoolSearch__online { font-size: 13px; row-gap: 20px; } } .c-schoolSearch__onlineText { font-weight: 700; font-size: var(--text16); line-height: 1.5; } @media (width < 768px) { .c-schoolSearch__onlineText { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; } } /*-------------------------------------------- BASIC --------------------------------------------*/ /*-------------------------------------------- BASIC --------------------------------------------*/ /*-------------------------------------------- TEL CTA（お電話でのお申し込み） Figma: node 959:9575 - 校舎名 / 電話番号 / 受付時間は EJS の locals で差し替え可能 --------------------------------------------*/ .c-telCta { background-color: var(--subBlue); padding-top: max(70px, 4.8611111111vw); padding-bottom: max(90px, 6.25vw); } @media (width < 768px) { .c-telCta { padding: 50px 0 0px; margin-bottom: calc(6.25vw - 72.5px); } } .c-telCta__title { text-align: center; color: var(--fontColor); font-size: var(--text28); font-weight: 700; } @media (width < 768px) { .c-telCta__title { font-size: 22px; } } .c-telCta__body { 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; margin-top: 30px; } @media (width < 768px) { .c-telCta__body { margin-top: 20px; } } .c-telCta__illust { width: 130px; position: absolute; left: 0; top: 50%; -webkit-transform: translate(-150%, -50%); transform: translate(-150%, -50%); } @media (width < 768px) { .c-telCta__illust { width: 80px; position: relative; top: auto; left: auto; z-index: 3; -webkit-transform: none; transform: none; margin-inline: auto; margin-top: 20px; } } .c-telCta__illust img { width: 100%; height: auto; } .c-telCta__contact { text-align: center; position: relative; } .c-telCta__school { color: var(--mainBlue); font-size: var(--text24); font-weight: 700; } @media (width < 768px) { .c-telCta__school { font-size: 20px; } } .c-telCta__tel { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; color: var(--mainBlue); -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-telCta__tel { gap: 6px; } } .c-telCta__telIcon { -ms-flex-negative: 0; flex-shrink: 0; width: 24px; aspect-ratio: 24/42; background-color: currentColor; -webkit-mask-image: var(--icon_tel); mask-image: var(--icon_tel); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } @media (width < 768px) { .c-telCta__telIcon { width: 18px; } } .c-telCta__telNum { font-size: var(--text40); font-weight: 700; line-height: 1.75; } @media (width < 768px) { .c-telCta__telNum { font-size: 30px; } } .c-telCta__hours { margin-top: 4px; color: var(--fontColor); font-size: var(--text18); font-weight: 700; line-height: 1.75; } @media (width < 768px) { .c-telCta__hours { font-size: 14px; } } @media (hover: hover) { .c-telCta__tel:hover { opacity: 0.7; } } /*-------------------------------------------- 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-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; } .c-ttl__icon { width: 23px; aspect-ratio: 23/19; display: grid; } .c-ttl__icon:has(+ .--ja) { margin-top: 0.5em; } @media (width < 768px) { .c-ttl__icon:has(+ .--ja) { margin-top: 0.25em; } } @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: 'Raleway', sans-serif; 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 --------------------------------------------*/ .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); } .p-breadcrumbs__inner { padding-bottom: 14px; } .p-breadcrumbs__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 15px; -moz-column-gap: 15px; 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; gap: 15px; color: var(--white); font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-breadcrumbs .breadcrumbs__item:not(:last-child) { -ms-flex-negative: 0; flex-shrink: 0; } @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; margin-top: 0.75em; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .p-breadcrumbs .breadcrumbs__item a { color: inherit; white-space: nowrap; -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); -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-breadcrumbs .breadcrumbs__item strong { font-weight: 500; } @media (hover: hover) { .p-breadcrumbs .breadcrumbs__item a:hover { color: var(--mainYellow); } } .p-breadcrumbs .breadcrumbs__item p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*-------------------------------------------- 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 (1300px <= 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); } @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; } /*-------------------------------------------- ドロワー展開中の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; padding-top: max(70px, 4.8611111111vw); border: none; } .p-footer { position: relative; color: var(--white); background-color: var(--mainBlue); } .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: 100%; } .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); top: -5%; } @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: 'Raleway', sans-serif; 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: 'Raleway', sans-serif; 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 (1300px <= 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 (1300px <= 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 (1300px <= 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 (1300px <= 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 (1300px <= 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__logo { background-color: transparent; height: auto; } .p-header__school { 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; } } .p-header__logoFrame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } @media (width < 768px) { .p-header__logoFrame { gap: 5px; } } @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--search { background: var(--white); color: var(--mainBlue); } .p-header__btn--tel { background: var(--white); color: var(--mainBlue); font-size: 16px; max-width: 160px; } .p-header__btn--tel .p-header__btnIcon { width: auto; height: 18px; aspect-ratio: auto; } .p-header__btn--tel .p-header__btnIcon svg { width: auto; height: 100%; } .p-header__btn--contact { background: var(--mainBlue); color: var(--white); } .p-header__btn--contact .p-header__btnIcon { display: none; } } @media (992px <= width) and (hover: hover) { .p-header__btn--search:hover { background: var(--mainBlue); color: var(--mainYellow); } .p-header__btn--contact:hover { background: var(--mainYellow); color: var(--mainBlue); border-color: var(--mainBlue); } .p-header__btn--tel:hover { background: var(--mainBlue); color: var(--mainYellow); } } @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 (1300px <= 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 以下（1300px 未満：ロゴ + アイコン+テキスト+ハンバーガー） --------------------------------------------*/ } @media (width < 1300px) { .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: 10px 15px 10px 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 < 992px) and (width < 768px) { .p-header__btn { font-size: 10px; } } @media (width < 992px) { .p-header__btn--tel { display: none; } .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); } .p-header__btnIcon > svg { width: 100%; height: 100%; } .p-header__btn--search .p-header__btnIcon { width: 18px; aspect-ratio: 1; } .p-header__btn--contact .p-header__btnIcon { width: 20px; height: 21px; } .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; } } /*-------------------------------------------- SIDEBAR --------------------------------------------*/ /*-------------------------------------------- PAGENAME --------------------------------------------*/ /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ /*-------------------------------------------- BLOCK NAME --------------------------------------------*/ /*-------------------------------------------- ABOUT（松陰塾の教育理念） --------------------------------------------*/ .p-about { /*-------------------------------------------- 大見出し「150年の時を超え…」 --------------------------------------------*/ } .p-about__catch { margin-top: 70px; } @media (width < 768px) { .p-about__catch { margin-top: 60px; margin-bottom: 60px; } } .p-about__catchTitle { font-weight: 700; font-size: var(--text36); text-align: center; color: var(--mainBlue); line-height: 1; } @media (width < 768px) { .p-about__catchTitle { font-size: 24px; line-height: 1.75; } } .p-about { /*-------------------------------------------- 内側ラッパー（PC1200 / SP350・.c-inner 併用） --------------------------------------------*/ } .p-about__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 90px; } @media (width < 768px) { .p-about__inner { gap: 0px; } } .p-about { /*-------------------------------------------- 各セクション --------------------------------------------*/ } .p-about__sec { position: relative; } .p-about__sec.--01 { padding-bottom: max(120px, 8.3333333333vw); } @media (width < 768px) { .p-about__sec.--01 { padding-bottom: 70px; } } .p-about__sec.--02 { padding-top: max(100px, 6.9444444444vw); padding-bottom: max(75px, 5.2083333333vw); background-color: var(--subBlue); } @media (width < 768px) { .p-about__sec.--02 { padding-top: 60px; padding-bottom: 45px; } } .p-about__introContents { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 40px; } @media (width < 768px) { .p-about__introContents { row-gap: 20px; } } .p-about { /*-------------------------------------------- 見出しブロック（英字ラベル + 中見出し） --------------------------------------------*/ /*-------------------------------------------- 本文 --------------------------------------------*/ } .p-about__body { font-weight: 500; font-size: var(--text16); line-height: 2.2; } @media (width < 768px) { .p-about__body { font-size: 16px; line-height: 2; } } .p-about { /*-------------------------------------------- 2カラム（テキスト + 写真） PC: 横並び gap80 / SP: 縦積み --------------------------------------------*/ } .p-about__cols { display: grid; grid-template-columns: repeat(2, 1fr); -webkit-column-gap: 80px; -moz-column-gap: 80px; column-gap: 80px; } @media (width < 768px) { .p-about__cols { grid-template-columns: 1fr; gap: 20px; } } .p-about__cols > .p-about__body, .p-about__cols > .p-about__lead { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; } .p-about { /*-------------------------------------------- 画像 figure（人物写真 / About02写真） --------------------------------------------*/ } .p-about__figure { -ms-flex-negative: 0; flex-shrink: 0; 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; width: 100%; max-width: 560px; } @media (width < 768px) { .p-about__figure { width: 100%; gap: 5px; } } .p-about__img { border-radius: 20px; overflow: hidden; } .p-about__caption { font-weight: 500; font-size: var(--text14); line-height: 1.5; } @media (width < 768px) { .p-about__caption { font-size: 12px; } } .p-about__textFrame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 40px; } @media (width < 768px) { .p-about__textFrame { row-gap: 30px; } .p-about__textFrame.--spRowGap40 { row-gap: 40px; } } .p-about { /*-------------------------------------------- 顕彰碑ボックス（ベージュ） PC: 横並び padding40/60 gap60 / SP: 縦積み padding30/20 gap20 --------------------------------------------*/ } .p-about__box { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 60px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 40px 60px; border-radius: 20px; background-color: var(--beige); width: min(900px, 100%); margin-inline: auto; } @media (width < 768px) { .p-about__box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; padding: 30px 20px; margin-top: 40px; } } .p-about__boxBody { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; font-weight: 500; font-size: var(--text16); line-height: 2.2; } @media (width < 768px) { .p-about__boxBody { font-size: 14px; } } .p-about__boxFigure { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; max-width: 240px; border-radius: 20px; overflow: hidden; } @media (width < 768px) { .p-about__boxFigure { width: 200px; border-radius: 10px; } } .p-about { /*-------------------------------------------- 理念ブロック（小見出し blue + 本文） --------------------------------------------*/ } .p-about__lead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; padding-top: 15px; } @media (width < 768px) { .p-about__lead { padding-top: 0; } } .p-about__leadTitle { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700; font-size: var(--text24); line-height: 1.75; color: var(--mainBlue); } @media (width < 768px) { .p-about__leadTitle { font-size: 20px; } } .p-about__leadText { font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 500; font-size: var(--text16); line-height: 2.2; color: var(--fontColor); } @media (width < 768px) { .p-about__leadText { font-size: 16px; line-height: 2; } } .p-about { /*-------------------------------------------- 取り組み 3カラムカード PC: 横並び gap60 / SP: 縦積み gap50 --------------------------------------------*/ } .p-about__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; } @media (width < 992px) { .p-about__cards { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } } @media (width < 768px) { .p-about__cards { grid-template-columns: 1fr; gap: 50px; } } .p-about__card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; } @media (width < 768px) { .p-about__card { gap: 10px; } } @media (width < 768px) { .p-about__cardFigure { width: 280px; max-width: 100%; margin-left: auto; margin-right: auto; } } .p-about__cardBody { 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-about__cardBody { gap: 5px; } } .p-about__cardTitle { font-weight: 700; font-size: var(--text18); line-height: 1.75; color: var(--fontColor); } @media (width < 768px) { .p-about__cardTitle { font-size: 16px; text-align: center; } } .p-about__cardText { font-weight: 500; font-size: var(--text14); line-height: 1.75; } @media (width < 768px) { .p-about__cardText { font-size: 14px; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-campaignIntro { padding-top: max(60px, 4.1666666667vw); padding-bottom: max(210px, 14.5833333333vw); } @media (width < 768px) { .p-campaignIntro { padding-top: 60px; padding-bottom: 96px; } } .p-campaignIntro__image { border-radius: 20px; overflow: hidden; } @media (width < 768px) { .p-campaignIntro__image { border-radius: 10px; } } .p-campaignIntro__cast { margin-top: 60px; } .p-campaignIntro__castGrid { margin-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } @media (width < 1200px) { .p-campaignIntro__castGrid { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 40px; } } @media (width < 768px) { .p-campaignIntro__castGrid { margin-top: 40px; row-gap: 20px; } } .p-campaignIntro__castFrame { width: calc(50% - 20px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; padding: 30px 25px; border-radius: 30px; background-color: var(--subYellow); } @media (width < 1200px) { .p-campaignIntro__castFrame { width: 100%; } } @media (width < 768px) { .p-campaignIntro__castFrame { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; padding: 20px; } } .p-campaignIntro__castImg { -ms-flex-negative: 0; flex-shrink: 0; width: 200px; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; } @media (width < 768px) { .p-campaignIntro__castImg { width: 48.3870967742%; max-width: 200px; margin-inline: auto; } } .p-campaignIntro__castName { font-size: var(--text16); font-weight: 700; line-height: 1.75; } @media (width < 768px) { .p-campaignIntro__castName { font-size: 16px; } } .p-campaignIntro__castText { margin-top: 10px; font-size: var(--text14); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-campaignIntro__castText { font-size: 14px; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-campaignMain { padding-top: max(60px, 4.1666666667vw); background-color: var(--subBlue); position: relative; } .p-campaignMain::before { content: ""; aspect-ratio: 1440/90; background-color: var(--subBlue); -webkit-mask-size: 102% auto; mask-size: 102% auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 110%; } .p-campaignMain::before { -webkit-mask-image: var(--maskTopNew); mask-image: var(--maskTopNew); bottom: calc(100% - 1px); -webkit-mask-position: center top; mask-position: center top; } @media (width < 768px) { .p-campaignMain::before { -webkit-mask-position: center calc(100% + 1px); mask-position: center calc(100% + 1px); } } @media (width < 768px) { .p-campaignMain { padding-top: 36px; } } .p-campaignMain__container { margin-top: 60px; } @media (width < 768px) { .p-campaignMain__container { margin-top: 40px; } } .p-campaignMain__container + .p-campaignMain__container { margin-top: 120px; } @media (width < 768px) { .p-campaignMain__container + .p-campaignMain__container { margin-top: 60px; } } .p-campaignMain__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; row-gap: 50px; } @media (width < 768px) { .p-campaignMain__grid { margin-top: 24px; grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap: 20px; } } .p-campaignMain__frame { padding: 30px 30px 40px; border-radius: 10px; background-color: var(--white); } @media (width < 768px) { .p-campaignMain__frame { padding: 20px; } } .p-campaignMain__heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 7px; } @media (width < 768px) { .p-campaignMain__heading { row-gap: 5px; } } .p-campaignMain__ttl { font-size: var(--text18); font-weight: 700; line-height: 1.5; } @media (width < 768px) { .p-campaignMain__ttl { font-size: 16px; } } .p-campaignMain__date { font-size: var(--text16); font-weight: 700; line-height: 1.5; color: var(--mainBlue); } @media (width < 768px) { .p-campaignMain__date { font-size: 14px; } } .p-campaignMain__video { max-width: 400px; margin-top: 20px; margin-inline: auto; aspect-ratio: 16/9; border-radius: 5px; overflow: hidden; } @media (width < 768px) { .p-campaignMain__video { margin-top: 15px; max-width: 100%; } } .p-campaignMain__video iframe { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-campaignMain__view { margin-top: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } @media (width < 992px) { .p-campaignMain__view { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 15px; } } @media (width < 768px) { .p-campaignMain__view { margin-top: 18px; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } } .p-campaignMain__view audio { width: 100%; } @media (width < 992px) { .p-campaignMain__view audio { max-width: 400px; } } .p-campaignMain__viewLabel { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; row-gap: 5px; font-size: var(--text16); font-weight: 500; line-height: 1.5; color: var(--mainBlue); } @media (width < 768px) { .p-campaignMain__viewLabel { font-size: 14px; } } .p-campaignMain__viewLabel i { width: 24px; } @media (width < 768px) { .p-campaignMain__viewLabel i { width: 20px; } } .p-campaignMain__button { -ms-flex-negative: 0; flex-shrink: 0; margin-top: 30px; margin-inline: auto; } @media (width < 768px) { .p-campaignMain__button { margin-top: 15px; } } .p-campaignMain__button + .p-campaignMain__button { margin-top: 15px; } @media (width < 768px) { .p-campaignMain__button + .p-campaignMain__button { margin-top: 10px; } } .p-campaignMain__bottom { margin-top: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } @media (width < 768px) { .p-campaignMain__bottom { margin-top: 60px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } } .p-campaignMain__banner { width: calc(50% - 20px); } @media (width < 768px) { .p-campaignMain__banner { width: 100%; } } @media (hover: hover) { .p-campaignMain__banner:hover .p-campaignMain__bannerImg img { opacity: 0.6; } } .p-campaignMain__bannerImg { border-radius: 10px; overflow: hidden; background-color: var(--white); } .p-campaignMain__bannerImg img { -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); } .p-campaignMain__bannerLead { margin-top: 10px; font-size: var(--text16); font-weight: 500; line-height: 1.5; color: var(--mainBlue); } @media (width < 768px) { .p-campaignMain__bannerLead { margin-top: 5px; font-size: 14px; } } /*-------------------------------------------- CHARACTERS（キャラクター） --------------------------------------------*/ .p-chara { /*-------------------------------------------- Chara 01：キャラクター紹介 --------------------------------------------*/ } .p-chara__intro { margin-top: 80px; } @media (width < 768px) { .p-chara__intro { margin-top: 60px; } } .p-chara__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; } @media (width < 992px) { .p-chara__list { gap: 24px; } } @media (width < 768px) { .p-chara__list { grid-template-columns: repeat(1, 1fr); max-width: 373px; margin-inline: auto; margin-top: 30px; } } .p-chara__card { max-width: 373px; 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; row-gap: 10px; } @media (width < 768px) { .p-chara__card { row-gap: 5px; } } .p-chara__cardFigure { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } @media (width < 768px) { .p-chara__cardFigure { width: 85%; margin-inline: auto; } } .p-chara__cardBody { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 15px; } .p-chara__cardName { font-size: var(--text22); font-weight: 700; letter-spacing: 1px; text-align: center; color: var(--mainBlue); } @media (width < 768px) { .p-chara__cardName { font-size: 22px; } } .p-chara__cardText { padding: 20px; border-radius: 10px; background-color: var(--subBlue); } .p-chara__cardText p { font-size: var(--text16); font-weight: 500; line-height: 2.2; color: var(--fontColor); } @media (width < 768px) { .p-chara__cardText p { font-size: 14px; } } .p-chara { /*-------------------------------------------- Chara 02：キャラクターデザイナー紹介 --------------------------------------------*/ } .p-chara__designer { margin-top: 80px; margin-bottom: 120px; } @media (width < 768px) { .p-chara__designer { margin-top: 60px; margin-bottom: 60px; } } .p-chara__designerFrame { 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; row-gap: 40px; padding: 80px; border-radius: 30px; background-color: var(--subYellow); } @media (width < 1200px) { .p-chara__designerFrame { padding: 60px; } } @media (width < 992px) { .p-chara__designerFrame { padding: 40px; } } @media (width < 768px) { .p-chara__designerFrame { padding: 35px 20px; border-radius: 20px; } } .p-chara__designerHead { 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: 57px; width: 100%; } @media (width < 768px) { .p-chara__designerHead { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 30px; } } .p-chara__designerInfo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 30px; } @media (width < 768px) { .p-chara__designerInfo { row-gap: 25px; } } .p-chara__designerLead { font-size: var(--text16); font-weight: 500; line-height: 2.2; color: var(--fontColor); } @media (width < 768px) { .p-chara__designerLead { font-size: 16px; } } .p-chara__designerFigure { -ms-flex-negative: 0; flex-shrink: 0; width: 36.5384615385%; max-width: 380px; border-radius: 20px; overflow: hidden; } @media (width < 768px) { .p-chara__designerFigure { width: 100%; margin-inline: auto; } } .p-chara__profile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; width: 100%; padding: 40px; border: 2px solid var(--mainBlue); border-radius: 20px; background-color: var(--white); } @media (width < 992px) { .p-chara__profile { gap: 24px; } } @media (width < 768px) { .p-chara__profile { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 15px; padding: 30px 20px; } } .p-chara__profileLabel { -ms-flex-negative: 0; flex-shrink: 0; font-family: 'Raleway', sans-serif; font-size: var(--text24); font-weight: 600; line-height: 1; text-align: center; color: var(--mainBlue); } @media (width < 768px) { .p-chara__profileLabel { font-size: 24px; text-align: left; } } .p-chara__profileBody { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 10px; } .p-chara__profileText p { font-size: var(--text16); font-weight: 500; line-height: 2.2; color: var(--fontColor); } @media (width < 768px) { .p-chara__profileText p { font-size: 14px; } } .p-chara__profileNote { font-size: var(--text14); font-weight: 500; line-height: 2.2; color: var(--fontColor); } @media (width < 768px) { .p-chara__profileNote { font-size: 14px; } } .p-chara__wikiLink { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; color: var(--mainBlue); line-height: 1.75; border-bottom: 1px solid var(--mainBlue); -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 (hover: hover) { .p-chara__wikiLink:hover { opacity: 0.6; } } .p-chara__wikiLink::after { content: ""; width: 12px; height: 12px; -webkit-mask-image: var(--extra); mask-image: var(--extra); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; background-color: currentColor; } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-daihyoCeo { padding-top: max(100px, 6.9444444444vw); padding-bottom: max(120px, 8.3333333333vw); } @media (width < 768px) { .p-daihyoCeo { padding-top: 60px; padding-bottom: 60px; } } .p-daihyoCeo__fv { margin-top: 60px; position: relative; } @media (width < 992px) { .p-daihyoCeo__fv { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 30px; } } .p-daihyoCeo__fvBody { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 60px; position: absolute; top: 50%; left: 60px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } @media (width < 992px) { .p-daihyoCeo__fvBody { row-gap: 40px; position: static; -webkit-transform: unset; transform: unset; } } .p-daihyoCeo__fvLead { font-size: var(--text46); font-weight: 700; line-height: 1.65; color: var(--mainBlue); } @media (width < 992px) { .p-daihyoCeo__fvLead br { display: none; } } @media (width < 768px) { .p-daihyoCeo__fvLead { font-size: 26px; } } .p-daihyoCeo__fvProf { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } @media (width < 768px) { .p-daihyoCeo__fvProf { row-gap: 12px; } } .p-daihyoCeo__fvPosition { font-size: var(--text14); font-weight: 500; line-height: 1; letter-spacing: 0.05em; } @media (width < 768px) { .p-daihyoCeo__fvPosition { font-size: 14px; } } .p-daihyoCeo__fvName { font-size: var(--text26); font-weight: 700; line-height: 1; } @media (width < 768px) { .p-daihyoCeo__fvName { font-size: 22px; } } .p-daihyoCeo__fvBg { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 460px; border-radius: 20px; overflow: hidden; position: relative; } @media (width < 992px) { .p-daihyoCeo__fvBg { width: 100vw; min-height: unset; margin-left: -30px; border-radius: 0; } } @media (width < 768px) { .p-daihyoCeo__fvBg { margin-left: -20px; } } .p-daihyoCeo__fvBg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; } @media (width < 992px) { .p-daihyoCeo__fvBg img { position: static; } } .p-daihyoCeo__main { margin-top: 80px; max-width: 1000px; margin-inline: auto; } @media (width < 768px) { .p-daihyoCeo__main { margin-top: 60px; } } .p-daihyoCeo__label { font-size: var(--text32); font-weight: 700; line-height: 1.75; letter-spacing: 0.02em; } @media (width < 768px) { .p-daihyoCeo__label { font-size: 22px; } } .p-daihyoCeo__content { margin-top: 40px; } @media (width < 768px) { .p-daihyoCeo__content { margin-top: 20px; } } .p-daihyoCeo__text { font-size: var(--text16); font-weight: 500; line-height: 2.4; letter-spacing: 0.02em; } @media (width < 768px) { .p-daihyoCeo__text { font-size: 16px; letter-spacing: 0; } } .p-daihyoCeo__prof { max-width: 1000px; margin-top: 118px; margin-inline: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-column-gap: 38px; -moz-column-gap: 38px; column-gap: 38px; } @media (width < 768px) { .p-daihyoCeo__prof { margin-top: 60px; position: relative; } } .p-daihyoCeo__profBody { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 22px; } @media (width < 768px) { .p-daihyoCeo__profBody { row-gap: 25px; padding-top: 22px; } } .p-daihyoCeo__profLabel { font-family: 'Raleway', sans-serif; font-size: var(--text16); font-weight: 700; line-height: 1; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mainBlue); } @media (width < 768px) { .p-daihyoCeo__profLabel { font-size: 16px; } } .p-daihyoCeo__profInfo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 10px; } .p-daihyoCeo__profPosition { font-size: var(--text12); font-weight: 500; line-height: 1; letter-spacing: 0.05em; } @media (width < 768px) { .p-daihyoCeo__profPosition { font-size: 12px; line-height: 1.3; } } .p-daihyoCeo__profName { font-size: var(--text18); font-weight: 700; line-height: 1; } @media (width < 768px) { .p-daihyoCeo__profName { font-size: 22px; } } .p-daihyoCeo__profText { font-size: var(--text12); font-weight: 500; line-height: 1.8; letter-spacing: 0.03em; } @media (width < 768px) { .p-daihyoCeo__profText { margin-top: 24px; font-size: 12px; } } .p-daihyoCeo__profImage { -ms-flex-negative: 0; flex-shrink: 0; width: 182px; border-radius: 20px; overflow: hidden; } @media (width < 768px) { .p-daihyoCeo__profImage { width: 150px; position: absolute; top: 0; right: 0; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-daihyoMedia { padding-top: max(100px, 6.9444444444vw); padding-bottom: max(100px, 6.9444444444vw); background-color: var(--subBlue); } @media (width < 768px) { .p-daihyoMedia { padding-top: 60px; padding-bottom: 50px; } } .p-daihyoMedia__heading { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; font-size: var(--text24); font-weight: 700; line-height: 1; letter-spacing: 0.05em; text-align: center; color: var(--mainBlue); padding-inline: 20px; position: relative; } @media (width < 768px) { .p-daihyoMedia__heading { font-size: 20px; } } .p-daihyoMedia__heading::before, .p-daihyoMedia__heading::after { content: ""; width: 10px; height: 3px; background-color: var(--mainBlue); position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .p-daihyoMedia__heading::before { left: 0; } .p-daihyoMedia__heading::after { right: 0; } .p-daihyoMedia__list { margin-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 35px; -moz-column-gap: 35px; column-gap: 35px; row-gap: 30px; } @media (width < 768px) { .p-daihyoMedia__list { margin-top: 50px; row-gap: 20px; padding-inline: 10px; } } .p-daihyoMedia__item { width: calc(33.3333333333% - 23.3333333333px); border-radius: 20px; padding: 50px 10px 40px; background-color: var(--white); position: relative; } @media (width < 992px) { .p-daihyoMedia__item { width: calc(50% - 17.5px); } } @media (width < 576px) { .p-daihyoMedia__item { width: 100%; } } .p-daihyoMedia__badge { width: 50px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 50px; background-color: var(--mainYellow); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.2em; text-align: center; color: var(--mainBlue); position: absolute; top: 14px; left: 12px; z-index: 1; } .p-daihyoMedia__thumb { max-width: 170px; margin-inline: auto; -webkit-filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.1)); } .p-daihyoMedia__title { margin-top: 32px; font-size: var(--text16); font-weight: 700; line-height: 1.6; text-align: center; color: var(--mainBlue); } @media (width < 768px) { .p-daihyoMedia__title { font-size: 14px; } } .p-daihyoMedia__info { margin-top: 22px; font-size: var(--text14); font-weight: 500; line-height: 1.5; text-align: center; } @media (width < 768px) { .p-daihyoMedia__info { font-size: 12px; } } .p-daihyoMedia__box { margin-top: 15px; padding-top: 102px; padding-bottom: 45px; padding-left: 62px; padding-right: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; position: relative; } @media (width < 768px) { .p-daihyoMedia__box { width: calc(100% - 20px); margin-top: 12px; padding-top: 100px; margin-inline: auto; padding-bottom: 60px; padding-left: 25px; padding-right: 25px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 30px; } } .p-daihyoMedia__box::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: url("../img/daihyo/media_pattern.webp"); background-repeat: repeat; background-size: 35px 35px; background-position: 50%; background-color: var(--white); -webkit-mask-image: url("../img/daihyo/media_mask.svg"); mask-image: url("../img/daihyo/media_mask.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } @media (width < 992px) { .p-daihyoMedia__box::before { -webkit-mask-image: url("../img/daihyo/media_mask-sp.svg"); mask-image: url("../img/daihyo/media_mask-sp.svg"); } } .p-daihyoMedia__boxBorder { width: 100%; height: 100%; position: absolute; inset: 0; left: -2px; z-index: 1; pointer-events: none; overflow: visible; } .p-daihyoMedia__boxBorder.--sp { display: none; } @media (width < 992px) { .p-daihyoMedia__boxBorder { left: unset; } .p-daihyoMedia__boxBorder.--pc { display: none; } .p-daihyoMedia__boxBorder.--sp { display: block; } } .p-daihyoMedia__boxBody { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 30px; position: relative; z-index: 2; } @media (width < 768px) { .p-daihyoMedia__boxBody { row-gap: 20px; } } .p-daihyoMedia__boxLead { font-size: var(--text18); font-weight: 700; line-height: 1; color: var(--mainBlue); } @media (width < 768px) { .p-daihyoMedia__boxLead { font-size: 16px; text-align: center; } } .p-daihyoMedia__boxTitle { font-size: var(--text28); font-weight: 700; line-height: 1.8; } @media (width < 768px) { .p-daihyoMedia__boxTitle { font-size: 22px; line-height: 1.7; text-align: center; } } .p-daihyoMedia__video { max-width: 356px; aspect-ratio: 16/9; position: relative; z-index: 2; } .p-daihyoMedia__video iframe { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-daihyoMessage { padding-top: max(120px, 8.3333333333vw); padding-bottom: max(100px, 6.9444444444vw); } @media (width < 768px) { .p-daihyoMessage { padding-top: 60px; padding-bottom: 50px; } } .p-daihyoMessage__container { margin-top: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } @media (width < 992px) { .p-daihyoMessage__container { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 40px; } } @media (width < 768px) { .p-daihyoMessage__container { margin-top: 35px; row-gap: 30px; } } .p-daihyoMessage__main { max-width: 560px; } @media (width < 992px) { .p-daihyoMessage__main { max-width: 100%; } } .p-daihyoMessage__lead { font-size: var(--text46); font-weight: 700; line-height: 1.65; color: var(--mainBlue); } @media (width < 768px) { .p-daihyoMessage__lead { font-size: 26px; } } .p-daihyoMessage__info { margin-top: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } @media (width < 768px) { .p-daihyoMessage__info { margin-top: 40px; row-gap: 12px; } } .p-daihyoMessage__position { font-size: var(--text14); font-weight: 500; line-height: 1; letter-spacing: 0.05em; } @media (width < 768px) { .p-daihyoMessage__position { font-size: 14px; } } .p-daihyoMessage__name { font-size: var(--text26); font-weight: 700; line-height: 1; } @media (width < 768px) { .p-daihyoMessage__name { font-size: 22px; } } .p-daihyoMessage__box { padding: 22px 20px; border-radius: 20px; background-color: #F2F9FF; background-image: linear-gradient(to bottom, #eaf5ff 2px, transparent 2px), url("data:image/svg+xml;utf8,"); background-size: 100% 33px, 300px 300px; background-repeat: repeat, repeat; } @media (width < 768px) { .p-daihyoMessage__box { margin-top: 8px; } } .p-daihyoMessage__boxText { font-size: var(--text12); font-weight: 500; line-height: 1.8; letter-spacing: 0.03em; } @media (width < 768px) { .p-daihyoMessage__boxText { font-size: 12px; line-height: 1.75; } } .p-daihyoMessage__content { margin-top: 100px; } @media (width < 768px) { .p-daihyoMessage__content { margin-top: 60px; } } .p-daihyoMessage__text { font-size: var(--text16); font-weight: 500; line-height: 2.4; letter-spacing: 0.02em; } @media (width < 768px) { .p-daihyoMessage__text { font-size: 16px; line-height: 2; letter-spacing: 0; } } .p-daihyoMessage__image { max-width: 485px; } @media (width < 992px) { .p-daihyoMessage__image { width: 70%; max-width: 400px; } } .p-daihyoMessage__imageWrap { position: -webkit-sticky; position: sticky; top: calc(var(--h_height) + 45px); right: 0; } @media (width < 992px) { .p-daihyoMessage__imageWrap { position: static; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-gaiyoCompany { padding-top: max(84px, 5.8333333333vw); padding-bottom: max(50px, 3.4722222222vw); background-color: var(--subBlue); position: relative; } .p-gaiyoCompany::after, .p-gaiyoCompany::before { content: ""; aspect-ratio: 1440/90; background-color: var(--subBlue); -webkit-mask-size: 102% auto; mask-size: 102% auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 110%; } .p-gaiyoCompany::after { -webkit-mask-image: var(--maskBottomNew); mask-image: var(--maskBottomNew); top: calc(100% - 1px); -webkit-mask-position: center bottom; mask-position: center bottom; } @media (width < 768px) { .p-gaiyoCompany::after { -webkit-mask-position: center calc(0% - 1px); mask-position: center calc(0% - 1px); } } .p-gaiyoCompany::before { -webkit-mask-image: var(--maskTopNew); mask-image: var(--maskTopNew); bottom: calc(100% - 1px); -webkit-mask-position: center top; mask-position: center top; } @media (width < 768px) { .p-gaiyoCompany::before { -webkit-mask-position: center calc(100% + 1px); mask-position: center calc(100% + 1px); } } @media (width < 768px) { .p-gaiyoCompany { padding-top: 36px; padding-bottom: 20px; } } .p-gaiyoCompany__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } @media (width < 992px) { .p-gaiyoCompany__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } } .p-gaiyoCompany__heading { -ms-flex-negative: 0; flex-shrink: 0; width: 240px; } @media (width < 992px) { .p-gaiyoCompany__heading { width: 100%; } } .p-gaiyoCompany__headingWrap { position: -webkit-sticky; position: sticky; top: calc(var(--h_height) + 40px); left: 0; } @media (width < 992px) { .p-gaiyoCompany__headingWrap { position: static; } } .p-gaiyoCompany__image { margin-top: 40px; border-radius: 20px; overflow: hidden; } @media (width < 992px) { .p-gaiyoCompany__image { display: none; } } .p-gaiyoCompany__body { max-width: 770px; } @media (width < 992px) { .p-gaiyoCompany__body { max-width: 100%; } } .p-gaiyoCompany__item { display: grid; grid-template-columns: 180px minmax(0, 1fr); -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; padding-block: 25px; } @media (width < 768px) { .p-gaiyoCompany__item { grid-template-columns: minmax(0, 1fr); row-gap: 7px; padding-block: 24px; } } .p-gaiyoCompany__item:not(:last-child) { border-bottom: 1px solid var(--borderBlue); } .p-gaiyoCompany__title p { font-size: var(--text16); font-weight: 700; line-height: 1.75; letter-spacing: 0.2em; color: var(--mainBlue); } @media (width < 768px) { .p-gaiyoCompany__title p { font-size: 14px; line-height: 1.5; } } .p-gaiyoCompany__detail p:not([class]) { font-size: var(--text16); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-gaiyoCompany__detail p:not([class]) { font-size: 14px; line-height: 1.5; } } .p-gaiyoCompany__detail p:not([class]) a { text-decoration: underline; -webkit-transition: -webkit-text-decoration-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: -webkit-text-decoration-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: text-decoration-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: text-decoration-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-text-decoration-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (hover: hover) { .p-gaiyoCompany__detail p:not([class]) a:hover { -webkit-text-decoration-color: transparent; text-decoration-color: transparent; } } .p-gaiyoCompany__office { display: grid; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; grid-template-columns: repeat(2, auto); -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; row-gap: 40px; } @media (width < 768px) { .p-gaiyoCompany__office { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } } .p-gaiyoCompany__grid { display: grid; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; grid-template-columns: repeat(2, auto); -webkit-column-gap: 18px; -moz-column-gap: 18px; column-gap: 18px; } @media (width < 768px) { .p-gaiyoCompany__grid { grid-template-columns: minmax(0, 1fr); } } .p-gaiyoCompany__grid.--wide { -webkit-column-gap: 38px; -moz-column-gap: 38px; column-gap: 38px; } .p-gaiyoCompany__grid.--wide p { font-size: var(--text14); } @media (width < 768px) { .p-gaiyoCompany__grid.--wide p { font-size: 14px; } } .p-gaiyoCompany__map { margin-top: 20px; aspect-ratio: 570/320; border-radius: 5px; overflow: hidden; } @media (width < 768px) { .p-gaiyoCompany__map { margin-top: 10px; aspect-ratio: 350/196; } } .p-gaiyoCompany__map iframe { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-gaiyoCompany__detailImage { display: none; } @media (width < 992px) { .p-gaiyoCompany__detailImage { display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 20px; margin-top: 20px; overflow: hidden; } } .p-gaiyoCompany__banner { background-image: url("../img/gaiyo/jja_bg.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 25px; border-radius: 5px; overflow: hidden; } @media (width < 768px) { .p-gaiyoCompany__banner { padding: 20px; background-image: url("../img/gaiyo/jja_bg-sp.webp"); } } .p-gaiyoCompany__bannerFrame { background-color: rgba(255, 255, 255, 0.85); padding: 20px 16px; border-radius: 5px; overflow: hidden; } @media (width < 768px) { .p-gaiyoCompany__bannerFrame { padding: 28px 15px; } } .p-gaiyoCompany__bannerHead { max-width: 240px; margin-inline: auto; } @media (width < 768px) { .p-gaiyoCompany__bannerHead { max-width: 280px; } } .p-gaiyoCompany__bannerLogo { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .p-gaiyoCompany__bannerNote { margin-top: 3px; font-size: 10px; font-weight: 500; line-height: 1; text-align: right; } @media (width < 768px) { .p-gaiyoCompany__bannerNote { margin-top: 7px; font-size: 10px; } } .p-gaiyoCompany__bannerLead { margin-top: 10px; font-size: var(--text14); font-weight: 700; line-height: 1; } @media (width < 768px) { .p-gaiyoCompany__bannerLead { margin-top: 25px; font-size: 14px; } } .p-gaiyoCompany__bannerText { margin-top: 5px; font-size: var(--text14); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-gaiyoCompany__bannerText { margin-top: 12px; font-size: 14px; line-height: 1.7; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-gaiyoHistory { padding-top: max(210px, 14.5833333333vw); padding-bottom: max(210px, 14.5833333333vw); } @media (width < 768px) { .p-gaiyoHistory { padding-top: 86px; padding-bottom: 86px; } } .p-gaiyoHistory__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } @media (width < 768px) { .p-gaiyoHistory__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 10px; } } .p-gaiyoHistory__container { -ms-flex-negative: 0; flex-shrink: 0; width: 198px; } @media (width < 768px) { .p-gaiyoHistory__container { width: 100%; } } .p-gaiyoHistory__containerWrap { position: -webkit-sticky; position: sticky; top: calc(var(--h_height) + 40px); left: 0; } @media (width < 768px) { .p-gaiyoHistory__containerWrap { position: static; } } .p-gaiyoHistory__nav { margin-top: 40px; } @media (width < 768px) { .p-gaiyoHistory__nav { margin-top: 30px; width: 100vw; margin-left: -20px; overflow: auto; } } .p-gaiyoHistory__navList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 10px; } @media (width < 768px) { .p-gaiyoHistory__navList { padding-inline: 20px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; } } .p-gaiyoHistory__navButton { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; max-width: 100%; width: 100%; min-height: 50px; padding: 10px 25px 11px 25px; border-radius: 100vmax; background: #F2F8FF; } @media (width < 768px) { .p-gaiyoHistory__navButton { min-width: 153px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px 20px 11px 20px; } } .p-gaiyoHistory__navButton { /*--- ホバーで下からせり上がるドーム型の塗り（青ボタン: --hoverBlue）---*/ } .p-gaiyoHistory__navButton::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(--mainBlue); -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-gaiyoHistory__navButton i { position: absolute; top: 50%; right: 25px; -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); display: grid; place-items: center; z-index: 1; overflow: hidden; width: 7px; aspect-ratio: 1/2; color: var(--mainBlue); -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); } @media (width < 768px) { .p-gaiyoHistory__navButton i { display: none; } } .p-gaiyoHistory__navButton i::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; } @media (hover: hover) { .p-gaiyoHistory__navButton:hover::before { -webkit-transform: translateY(0); transform: translateY(0); } .p-gaiyoHistory__navButton:hover i { color: var(--white); -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } .p-gaiyoHistory__navButton:hover .p-gaiyoHistory__navYear, .p-gaiyoHistory__navButton:hover .p-gaiyoHistory__navEra { color: var(--white); } } .p-gaiyoHistory__navButton.is-act { background-color: var(--mainBlue); } .p-gaiyoHistory__navButton.is-act i { color: var(--white); -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } .p-gaiyoHistory__navButton.is-act .p-gaiyoHistory__navYear, .p-gaiyoHistory__navButton.is-act .p-gaiyoHistory__navEra { color: var(--white); } .p-gaiyoHistory__navYear { font-size: var(--text16); font-weight: 700; line-height: 1; white-space: nowrap; position: relative; z-index: 1; -webkit-transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-gaiyoHistory__navYear { font-size: 16px; letter-spacing: 0.05em; } } .p-gaiyoHistory__navEra { font-size: var(--text14); font-weight: 500; line-height: 1; white-space: nowrap; position: relative; z-index: 1; -webkit-transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-gaiyoHistory__navEra { font-size: 14px; letter-spacing: 0.05em; } } .p-gaiyoHistory__panels { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-width: 0; max-width: 770px; padding-top: 128px; } @media (width < 768px) { .p-gaiyoHistory__panels { max-width: 100%; padding-top: 0; } } .p-gaiyoHistory__panel[hidden] { display: none; } .p-gaiyoHistory__timeline { padding-top: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 25px; } @media (width < 768px) { .p-gaiyoHistory__timeline { padding-top: 24px; row-gap: 24px; } } .p-gaiyoHistory__event { display: grid; grid-template-columns: 130px minmax(0, 1fr); -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; padding-bottom: 25px; } @media (width < 992px) { .p-gaiyoHistory__event { grid-template-columns: 130px minmax(0, 1fr); -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } } @media (width < 768px) { .p-gaiyoHistory__event { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } } .p-gaiyoHistory__event:not(:last-child) { border-bottom: 1px solid var(--borderBlue); } .p-gaiyoHistory__month { font-size: var(--text16); font-weight: 700; line-height: 1.75; letter-spacing: 0.2em; color: var(--mainBlue); } @media (width < 768px) { .p-gaiyoHistory__month { font-size: 16px; } } .p-gaiyoHistory__detail { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 15px; } .p-gaiyoHistory__detail > p { font-size: var(--text16); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-gaiyoHistory__detail > p { font-size: 14px; line-height: 1.65; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-gaiyoMessage { padding-top: max(120px, 8.3333333333vw); padding-bottom: max(210px, 14.5833333333vw); } @media (width < 768px) { .p-gaiyoMessage { padding-top: 60px; padding-bottom: 96px; } } .p-gaiyoMessage__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; margin-top: 72px; } @media (width < 992px) { .p-gaiyoMessage__item { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 30px; } } @media (width < 768px) { .p-gaiyoMessage__item { margin-top: 30px; row-gap: 20px; } } .p-gaiyoMessage__item + .p-gaiyoMessage__item { margin-top: 60px; } @media (width < 768px) { .p-gaiyoMessage__item + .p-gaiyoMessage__item { margin-top: 50px; } } .p-gaiyoMessage__body { width: 41.6666666667%; } @media (width < 992px) { .p-gaiyoMessage__body { width: 100%; } } .p-gaiyoMessage__lead { font-size: var(--text32); font-weight: 700; line-height: 1.6; color: var(--mainBlue); } @media (width < 768px) { .p-gaiyoMessage__lead { font-size: 24px; } } .p-gaiyoMessage__info { margin-top: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 10px; } @media (width < 768px) { .p-gaiyoMessage__info { margin-top: 20px; } } .p-gaiyoMessage__position { font-size: var(--text14); font-weight: 500; line-height: 1; letter-spacing: 0.05em; } @media (width < 768px) { .p-gaiyoMessage__position { font-size: 14px; } } .p-gaiyoMessage__name { font-size: var(--text20); font-weight: 700; line-height: 1; } @media (width < 768px) { .p-gaiyoMessage__name { font-size: 20px; } } .p-gaiyoMessage__button { margin-top: 35px; } @media (width < 768px) { .p-gaiyoMessage__button { margin-top: 20px; } } .p-gaiyoMessage__image { width: 58.3333333333%; border-radius: 20px; overflow: hidden; } @media (width < 992px) { .p-gaiyoMessage__image { width: 100%; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-gaiyoPhilosophy { padding-top: max(84px, 5.8333333333vw); padding-bottom: max(120px, 8.3333333333vw); background-color: var(--subYellow); position: relative; } .p-gaiyoPhilosophy::before { content: ""; aspect-ratio: 1440/90; background-color: var(--subYellow); -webkit-mask-size: 102% auto; mask-size: 102% auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 110%; } .p-gaiyoPhilosophy::before { -webkit-mask-image: var(--maskTopNew); mask-image: var(--maskTopNew); bottom: calc(100% - 1px); -webkit-mask-position: center top; mask-position: center top; } @media (width < 768px) { .p-gaiyoPhilosophy::before { -webkit-mask-position: center calc(100% + 1px); mask-position: center calc(100% + 1px); } } @media (width < 768px) { .p-gaiyoPhilosophy { padding-top: 34px; padding-bottom: 60px; } } .p-gaiyoPhilosophy__body { margin-top: 60px; padding: 80px; background-color: var(--white); border-radius: 20px; } @media (width < 992px) { .p-gaiyoPhilosophy__body { padding: 40px; } } @media (width < 768px) { .p-gaiyoPhilosophy__body { margin-top: 30px; padding: 20px; } } .p-gaiyoPhilosophy__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (width < 768px) { .p-gaiyoPhilosophy__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 40px; } } .p-gaiyoPhilosophy__main { width: 51.9230769231%; max-width: 540px; } @media (width < 768px) { .p-gaiyoPhilosophy__main { width: 100%; max-width: 100%; } } .p-gaiyoPhilosophy__lead { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 540px; } .p-gaiyoPhilosophy__text { margin-top: 50px; font-size: var(--text16); font-weight: 500; line-height: 1.8; letter-spacing: 0.05em; } @media (width < 768px) { .p-gaiyoPhilosophy__text { margin-top: 20px; font-size: 14px; } } .p-gaiyoPhilosophy__info { width: 41.3461538462%; max-width: 430px; } @media (width < 768px) { .p-gaiyoPhilosophy__info { width: 100%; max-width: 100%; } } .p-gaiyoPhilosophy__image { border-radius: 20px; overflow: hidden; } .p-gaiyoPhilosophy__name { margin-top: 30px; margin-left: auto; width: 112px; } @media (width < 768px) { .p-gaiyoPhilosophy__name { margin-top: 15px; } } .p-gaiyoPhilosophy__infoNote { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-top: 16px; margin-left: auto; font-size: var(--text12); font-weight: 500; line-height: 1.7; text-align: right; } @media (width < 768px) { .p-gaiyoPhilosophy__infoNote { font-size: 12px; } } .p-gaiyoPhilosophy__frame { margin-top: 80px; padding: 60px; border-radius: 20px; border: 2px solid var(--mainBlue); } @media (width < 992px) { .p-gaiyoPhilosophy__frame { margin-top: 40px; padding: 30px; } } @media (width < 768px) { .p-gaiyoPhilosophy__frame { padding: 18px; } } .p-gaiyoPhilosophy__frameCont { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (width < 992px) { .p-gaiyoPhilosophy__frameCont { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } } @media (width < 768px) { .p-gaiyoPhilosophy__frameCont { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } } .p-gaiyoPhilosophy__frameBody { width: 58.6956521739%; max-width: 540px; } @media (width < 768px) { .p-gaiyoPhilosophy__frameBody { width: 100%; max-width: 100%; } } .p-gaiyoPhilosophy__frameTtl { font-size: var(--text24); font-weight: 700; line-height: 1.5; letter-spacing: 0.05em; color: var(--mainBlue); } @media (width < 768px) { .p-gaiyoPhilosophy__frameTtl { font-size: 20px; text-align: center; } } .p-gaiyoPhilosophy__frameTtl span { display: inline-block; } .p-gaiyoPhilosophy__frameLead { margin-top: 20px; font-size: var(--text16); font-weight: 700; line-height: 1.5; } @media (width < 768px) { .p-gaiyoPhilosophy__frameLead { margin-top: 15px; font-size: 16px; text-align: center; } } .p-gaiyoPhilosophy__frameLead span { display: inline-block; } .p-gaiyoPhilosophy__frameText { margin-top: 10px; font-size: var(--text12); font-weight: 500; line-height: 1.75; letter-spacing: 0.05em; } @media (width < 768px) { .p-gaiyoPhilosophy__frameText { font-size: 12px; } } .p-gaiyoPhilosophy__frameVideo { width: 34.7826086957%; max-width: 320px; aspect-ratio: 16/9; } @media (width < 992px) { .p-gaiyoPhilosophy__frameVideo { width: 52.1739130435%; max-width: 480px; } } @media (width < 768px) { .p-gaiyoPhilosophy__frameVideo { width: 100%; max-width: 100%; } } .p-gaiyoPhilosophy__frameVideo iframe { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-gaiyoPhilosophy__bonner { display: block; margin-top: 60px; -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 < 992px) { .p-gaiyoPhilosophy__bonner { margin-top: 30px; } } @media (width < 768px) { .p-gaiyoPhilosophy__bonner { margin-top: 20px; } } @media (hover: hover) { .p-gaiyoPhilosophy__bonner:hover { opacity: 0.6; } } .p-gaiyoPhilosophy__bonnerImg { display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 5px; overflow: hidden; } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-gakunenFeature { margin-top: 80px; padding-bottom: max(80px, 5.5555555556vw); position: relative; } .p-gakunenFeature::after { content: ""; aspect-ratio: 1440/90; background-color: #F4F6AB; -webkit-mask-size: 102% auto; mask-size: 102% auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 110%; } .p-gakunenFeature::after { -webkit-mask-image: var(--maskBottomNew); mask-image: var(--maskBottomNew); top: calc(100% - 1px); -webkit-mask-position: center bottom; mask-position: center bottom; } @media (width < 768px) { .p-gakunenFeature::after { -webkit-mask-position: center calc(0% - 1px); mask-position: center calc(0% - 1px); } } .p-gakunenFeature[data-color=blue] { background-color: #D0E9FF; } .p-gakunenFeature[data-color=blue]::after { background-color: #D0E9FF; } .p-gakunenFeature[data-color=blue] .p-gakunenFeature__body { background-color: #EBF5FF; } .p-gakunenFeature[data-color=orange] { background-color: #FFE8A9; } .p-gakunenFeature[data-color=orange]::after { background-color: #FFE8A9; } .p-gakunenFeature[data-color=orange] .p-gakunenFeature__body { background-color: #FFF3D4; } @media (width < 768px) { .p-gakunenFeature { margin-top: 60px; padding-bottom: 50px; } } .p-gakunenFeature__container { margin-top: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 120px; } @media (width < 768px) { .p-gakunenFeature__container { margin-top: 30px; row-gap: 40px; } } .p-gakunenFeature__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (width < 768px) { .p-gakunenFeature__content { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 25px; } } .p-gakunenFeature__content:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media (width < 768px) { .p-gakunenFeature__content:nth-child(even) { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .p-gakunenFeature__body { width: 53.3333333333%; min-height: 318px; padding: 60px; border-radius: 20px; background-color: #FDFFC1; position: relative; } @media (width < 992px) { .p-gakunenFeature__body { padding: 60px 30px; } } @media (width < 768px) { .p-gakunenFeature__body { width: 100%; min-height: unset; padding: 30px 20px 20px; } } .p-gakunenFeature__label { width: 136px; position: absolute; top: -25px; left: 25px; } @media (width < 768px) { .p-gakunenFeature__label { width: 102px; top: -18px; left: 8px; } } .p-gakunenFeature__lead { font-size: var(--text24); font-weight: 700; line-height: 1.75; } @media (width < 768px) { .p-gakunenFeature__lead { font-size: 22px; } } .p-gakunenFeature__text { margin-top: 15px; font-size: var(--text16); font-weight: 500; line-height: 2.2; } @media (width < 768px) { .p-gakunenFeature__text { margin-top: 10px; font-size: 16px; } } .p-gakunenFeature__image { width: 41.6666666667%; border-radius: 20px; overflow: hidden; } @media (width < 768px) { .p-gakunenFeature__image { width: 100%; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-gakunenIntro__icon { width: 120px; margin-inline: auto; } @media (width < 768px) { .p-gakunenIntro__icon { width: 100px; } } .p-gakunenIntro__heading { margin-top: 30px; 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-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; row-gap: 20px; } @media (width < 768px) { .p-gakunenIntro__heading { margin-top: 20px; row-gap: 10px; } } .p-gakunenIntro__headingMain { font-size: var(--text46); font-weight: 700; line-height: 1; text-align: center; } @media (width < 768px) { .p-gakunenIntro__headingMain { font-size: 32px; line-height: 1.5; } } .p-gakunenIntro__headingLabel { font-size: var(--text18); font-weight: 700; line-height: 1.5; text-align: center; color: var(--mainBlue); } @media (width < 768px) { .p-gakunenIntro__headingLabel { font-size: 16px; } } .p-gakunenIntro__box { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-top: 60px; margin-inline: auto; padding: 30px 50px; border-radius: 30px 0 30px 0; background-color: var(--white); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } @media (width < 768px) { .p-gakunenIntro__box { width: 100%; padding: 25px 20px; -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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 15px; } } .p-gakunenIntro__boxLabel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 111px; height: 106px; position: relative; } @media (width < 768px) { .p-gakunenIntro__boxLabel { width: 66.6px; height: 63.6px; } } .p-gakunenIntro__boxLabel span { padding-top: 4px; font-family: 'Raleway', sans-serif; font-size: var(--text24); font-weight: 600; line-height: 1; text-align: center; color: var(--mainBlue); } @media (width < 768px) { .p-gakunenIntro__boxLabel span { padding-top: 3px; font-size: 15px; } } .p-gakunenIntro__boxLabel img { width: 100%; position: absolute; top: 0; left: 0; } .p-gakunenIntro__boxMain { font-size: var(--text32); font-weight: 700; line-height: 1.65; text-align: center; color: var(--mainBlue); } @media (width < 768px) { .p-gakunenIntro__boxMain { font-size: 22px; line-height: 1.5; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-gakunenSystem { padding-top: max(64px, 4.4444444444vw); padding-bottom: max(54px, 3.75vw); background-color: var(--subYellow); position: relative; } .p-gakunenSystem::after, .p-gakunenSystem::before { content: ""; aspect-ratio: 1440/90; background-color: var(--subYellow); -webkit-mask-size: 102% auto; mask-size: 102% auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 110%; } .p-gakunenSystem::after { -webkit-mask-image: var(--maskBottomNew); mask-image: var(--maskBottomNew); top: calc(100% - 1px); -webkit-mask-position: center bottom; mask-position: center bottom; } @media (width < 768px) { .p-gakunenSystem::after { -webkit-mask-position: center calc(0% - 1px); mask-position: center calc(0% - 1px); } } .p-gakunenSystem::before { -webkit-mask-image: var(--maskTopNew); mask-image: var(--maskTopNew); bottom: calc(100% - 1px); -webkit-mask-position: center top; mask-position: center top; } @media (width < 768px) { .p-gakunenSystem::before { -webkit-mask-position: center calc(100% + 1px); mask-position: center calc(100% + 1px); } } @media (width < 768px) { .p-gakunenSystem { padding-top: 46px; padding-bottom: 46px; } } .p-gakunenSystem__intro { margin-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; } @media (width < 768px) { .p-gakunenSystem__intro { margin-top: 40px; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 20px; } } .p-gakunenSystem__introBody { width: 41.6666666667%; padding-top: 15px; } @media (width < 992px) { .p-gakunenSystem__introBody { width: 50%; } } @media (width < 768px) { .p-gakunenSystem__introBody { width: 100%; padding-top: 0; } } .p-gakunenSystem__introLead { font-size: var(--text24); font-weight: 700; line-height: 1.75; } @media (width < 768px) { .p-gakunenSystem__introLead { font-size: 20px; } } .p-gakunenSystem__introText { margin-top: 15px; font-size: var(--text16); font-weight: 500; line-height: 2.2; } @media (width < 768px) { .p-gakunenSystem__introText { margin-top: 20px; font-size: 16px; line-height: 2; } } .p-gakunenSystem__introText span { color: var(--mainBlue); } .p-gakunenSystem__introImage { width: 51.6666666667%; } @media (width < 992px) { .p-gakunenSystem__introImage { width: 48.3333333333%; } } @media (width < 768px) { .p-gakunenSystem__introImage { width: 100%; } } .p-gakunenSystem__introDeco { width: 122px; position: absolute; right: 0; top: -165px; } @media (width < 768px) { .p-gakunenSystem__introDeco { width: 75px; top: -96px; } } .p-gakunenSystem__main { margin-top: 90px; } @media (width < 768px) { .p-gakunenSystem__main { margin-top: 40px; } } .p-gakunenSystem__container { margin-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; row-gap: 50px; } @media (width < 992px) { .p-gakunenSystem__container { row-gap: 20px; } } @media (width < 768px) { .p-gakunenSystem__container { margin-top: 30px; row-gap: 20px; } } .p-gakunenSystem__frame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 14px; width: calc(50% - 20px); --ttl-max-w: 400px; --ttl-space: 10px; --ttl-radius: 0 0 15px 15px; --ttl-size: var(--text20); --lead-size: var(--text16); background-color: #FFF586; background-image: linear-gradient(to bottom, rgba(97, 97, 97, 0.08) 2px, transparent 2px), url("data:image/svg+xml;utf8,"); background-size: 100% 24.8px, 300px 300px; background-repeat: repeat, repeat; border-radius: 0 60px 0 60px; padding-inline: 30px; padding-bottom: 32px; } @media (width < 992px) { .p-gakunenSystem__frame { width: calc(50% - 13px); border-radius: 0 30px 0 30px; } } @media (width < 768px) { .p-gakunenSystem__frame { width: 100%; --ttl-max-w: 222px; --ttl-size: 18px; --lead-size: 16px; row-gap: 15px; padding-inline: 20px; } } .p-gakunenSystem__frame.--small { width: calc(25% - 19.5px); row-gap: 10px; --ttl-max-w: 180px; --ttl-space: 5px 5px 7px; --ttl-radius: 0 0 15px 15px; --ttl-size: var(--text16); --lead-size: var(--text15); border-radius: 0 30px 0 30px; padding-inline: 20px; padding-bottom: 32px; } @media (width < 992px) { .p-gakunenSystem__frame.--small { width: calc(50% - 13px); } } @media (width < 768px) { .p-gakunenSystem__frame.--small { width: 100%; --ttl-max-w: 180px; --ttl-size: 16px; --lead-size: 15px; padding-bottom: 20px; row-gap: 10px; } } .p-gakunenSystem__ttl { width: 100%; max-width: var(--ttl-max-w); margin-inline: auto; padding: var(--ttl-space); font-size: var(--ttl-size); font-weight: 700; line-height: 1.5; text-align: center; color: var(--white); border-radius: var(--ttl-radius); background-color: var(--mainBlue); } .p-gakunenSystem__ttl span { display: inline-block; } .p-gakunenSystem__lead { font-size: var(--lead-size); font-weight: 700; line-height: 1.5; text-align: center; } @media (width < 768px) { .p-gakunenSystem__lead { margin-top: 5px; } } .p-gakunenSystem__list { min-height: 95px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 10px; } .p-gakunenSystem__list li { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; font-size: var(--text14); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-gakunenSystem__list li { font-size: 14px; } } .p-gakunenSystem__list li::before { content: ""; -ms-flex-negative: 0; flex-shrink: 0; display: block; width: 20px; height: 15px; background-image: url("../img/gakunen/icon_check.svg"); background-repeat: no-repeat; background-size: contain; -webkit-transform: translateY(8px); transform: translateY(8px); } @media (width < 768px) { .p-gakunenSystem__list li::before { width: 14px; height: 10.5px; } } .p-gakunenSystem__image { margin-top: 20px; margin-inline: auto; } .p-gakunenSystem__image:has([src*="system_step.webp"]) { max-width: 486px; } @media (width < 768px) { .p-gakunenSystem__image:has([src*="system_step.webp"]) { margin-top: 0; } } .p-gakunenSystem__image:has([src*="system_return.webp"]) { max-width: 491px; } @media (width < 768px) { .p-gakunenSystem__image:has([src*="system_return.webp"]) { margin-top: 12px; } } .p-gakunenSystem__text { font-size: var(--text14); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-gakunenSystem__text { font-size: 14px; } } .p-gakunenSystem__bottom { width: 100%; max-width: 800px; margin-top: 112px; margin-inline: auto; position: relative; } @media (width < 768px) { .p-gakunenSystem__bottom { margin-top: 52px; } } .p-gakunenSystem__bottomLabel { width: 307px; position: absolute; top: -17px; left: 38px; } @media (width < 768px) { .p-gakunenSystem__bottomLabel { left: 16px; } } .p-gakunenSystem__bottomFrame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 38px; border-radius: 10px; border: 2px solid var(--mainBlue); background-color: var(--white); } @media (width < 768px) { .p-gakunenSystem__bottomFrame { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; padding: 38px 18px 20px; } } .p-gakunenSystem__bottomBody { width: 48.3425414365%; padding-top: 3px; } @media (width < 768px) { .p-gakunenSystem__bottomBody { width: 100%; padding-top: 0; } } .p-gakunenSystem__bottomLead { font-size: var(--text20); font-weight: 700; line-height: 1.75; color: var(--mainBlue); } @media (width < 768px) { .p-gakunenSystem__bottomLead { font-size: 18px; } } .p-gakunenSystem__bottomText { margin-top: 15px; font-size: var(--text14); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-gakunenSystem__bottomText { font-size: 14px; } } .p-gakunenSystem__bottomImage { width: 44.1988950276%; border-radius: 10px; overflow: hidden; } @media (width < 768px) { .p-gakunenSystem__bottomImage { width: 100%; } } .p-gakunenSystem__bottomDeco { width: 105px; position: absolute; bottom: 2px; right: 20px; } @media (width < 768px) { .p-gakunenSystem__bottomDeco { width: 80px; right: 30px; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-gakunenTech { padding-top: max(156px, 10.8333333333vw); padding-bottom: max(170px, 11.8055555556vw); background-color: var(--white); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.1rem, rgba(0, 126, 219, 0.06)), color-stop(0.1rem, transparent)), url("data:image/svg+xml;utf8,"); background-image: linear-gradient(to bottom, rgba(0, 126, 219, 0.06) 0.1rem, transparent 0.1rem), url("data:image/svg+xml;utf8,"); background-size: 100% 30px, 300px 300px; background-repeat: repeat, repeat; } @media (width < 768px) { .p-gakunenTech { padding-top: 84px; padding-bottom: 70px; } } .p-gakunenTech__lead { margin-top: 60px; font-size: var(--text16); font-weight: 500; line-height: 2.2; } @media (width < 768px) { .p-gakunenTech__lead { margin-top: 30px; font-size: 16px; line-height: 2; } } .p-gakunenTech__list { margin-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 38px; -moz-column-gap: 38px; column-gap: 38px; row-gap: 48px; } @media (width < 768px) { .p-gakunenTech__list { margin-top: 50px; row-gap: 30px; } } .p-gakunenTech__item { width: calc(33.3333333333% - 25.3333333333px); min-height: 200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 0 20px 0 20px; border: 2px solid var(--mainBlue); background-color: var(--white); position: relative; } @media (width < 992px) { .p-gakunenTech__item { width: calc(50% - 19px); } } @media (width < 768px) { .p-gakunenTech__item { width: 100%; min-height: 130px; } } .p-gakunenTech__index { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 8px; width: 38px; height: 38px; border-radius: 50%; background-color: var(--mainBlue); font-family: 'Raleway', sans-serif; font-size: 20px; font-weight: 500; line-height: 1; color: var(--white); text-align: center; position: absolute; top: -19px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (width < 768px) { .p-gakunenTech__index { font-size: 18px; padding-top: 10px; } } .p-gakunenTech__content { font-size: var(--text20); font-weight: 700; line-height: 1.75; text-align: center; } @media (width < 768px) { .p-gakunenTech__content { font-size: 18px; } } .p-gakunenTech__content span { color: var(--mainBlue); } .p-gakunenTech__deco { position: absolute; } .p-gakunenTech__deco:has([src*="tech_note.svg"]) { width: 95px; left: -19px; bottom: -21px; } @media (width < 768px) { .p-gakunenTech__deco:has([src*="tech_note.svg"]) { width: 69px; left: unset; right: -10px; bottom: -10px; } } .p-gakunenTech__deco:has([src*="tech_pen.svg"]) { width: 41px; left: -13px; bottom: -22px; } @media (width < 768px) { .p-gakunenTech__deco:has([src*="tech_pen.svg"]) { width: 30px; left: 12px; bottom: -10px; } } .p-gakunenTech__deco:has([src*="tech_ruler.svg"]) { width: 118px; right: -36px; bottom: -21px; } @media (width < 768px) { .p-gakunenTech__deco:has([src*="tech_ruler.svg"]) { width: 86px; right: -10px; bottom: -15px; } } .p-gakunenTech__bottom { margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } @media (width < 768px) { .p-gakunenTech__bottom { margin-top: 45px; -webkit-column-gap: 22px; -moz-column-gap: 22px; column-gap: 22px; } } .p-gakunenTech__bottomText { font-size: var(--text20); font-weight: 700; line-height: 2.2; } @media (width < 768px) { .p-gakunenTech__bottomText { font-size: 16px; line-height: 1.75; } } .p-gakunenTech__bottomText span { display: inline-block; } .p-gakunenTech__bottomText strong { color: var(--mainBlue); } .p-gakunenTech__bottomImage { -ms-flex-negative: 0; flex-shrink: 0; width: 164px; } @media (width < 768px) { .p-gakunenTech__bottomImage { width: 135px; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-gakunenVoice { padding-top: max(154px, 10.6944444444vw); background-color: var(--subBlue); } @media (width < 768px) { .p-gakunenVoice { padding-top: 74px; } } .p-gakunenVoice__container { margin-top: 74px; position: relative; } @media (width < 768px) { .p-gakunenVoice__container { margin-top: 44px; } } .p-gakunenVoice .splide .splide__track { overflow: visible; } .p-gakunenVoice__cardInner { border-radius: 5px; background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.1rem, rgba(0, 0, 0, 0.06)), color-stop(0.1rem, transparent)), url("data:image/svg+xml;utf8,"); 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,"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)); 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; -webkit-mask-image: url("data:image/svg+xml;utf8,"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)); -webkit-mask-image: url("data:image/svg+xml;utf8,"), linear-gradient(#fff, #fff); -webkit-mask-size: 28px 49px, calc(100% - 27px) 100%; -webkit-mask-position: 0 0, 27px 0; -webkit-mask-repeat: repeat-y, no-repeat; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 40px 35px 40px 45px; max-width: 360px; } @media (width < 768px) { .p-gakunenVoice__cardInner { padding: 40px 30px 30px; max-width: 310px; } } .p-gakunenVoice__card { position: relative; } .p-gakunenVoice__card.--g1 { --tagBg: #EF74BA; --tagColor: #fff; } .p-gakunenVoice__card.--g2 { --tagBg: #E0EB67; --tagColor: #007EDB; } .p-gakunenVoice__card.--g3 { --tagBg: #3BC6F1; --tagColor: #fff; } .p-gakunenVoice__card.--g4 { --tagBg: #FD8D3D; --tagColor: #fff; } .p-gakunenVoice__card:nth-child(odd) { -webkit-transform: translateY(20px); transform: translateY(20px); } @media (width < 768px) { .p-gakunenVoice__card:nth-child(odd) { -webkit-transform: unset; transform: unset; } } .p-gakunenVoice { /*-------------------------------------------- タグ（Voice 1〜3） Method セクションと同様に要素でタグshapeを表示し、テキストを absolute で重ねる構造 --------------------------------------------*/ } .p-gakunenVoice__cardTag { position: absolute; top: 0; left: 15%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; line-height: 0; z-index: 2; } .p-gakunenVoice__cardTag::after { content: ""; position: absolute; left: 0; top: calc(100% - 1px); background-color: var(--tagBg); width: 12.5%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: var(--index); mask-image: var(--index); aspect-ratio: 22/17; } @media (width < 992px) { .p-gakunenVoice__cardTag { left: 30px; } } .p-gakunenVoice__cardTagInner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 6px; padding: 0 1em 5px 1em; line-height: 1; border-radius: 9px 0; background-color: var(--tagBg); color: var(--tagColor); } .p-gakunenVoice__cardTagLabel { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: var(--text16); line-height: 1; } .p-gakunenVoice__cardTagNum { font-weight: 600; font-size: var(--text24); line-height: 1; } .p-gakunenVoice { /*-------------------------------------------- 上段（プロフィール + タイトル） --------------------------------------------*/ } .p-gakunenVoice__cardHead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; margin-top: 20px; } .p-gakunenVoice__cardProfileLabel { font-weight: 500; font-size: var(--text14); line-height: 1.5; } @media (width < 768px) { .p-gakunenVoice__cardProfileLabel { font-size: 14px; } } .p-gakunenVoice__cardPhoto { width: 100%; max-width: 100px; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; } @media (width < 768px) { .p-gakunenVoice__cardPhoto { max-width: 100px; grid-column: 1/2; grid-row: 1/2; } } .p-gakunenVoice__cardTitle { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; font-weight: 700; font-size: var(--text20); line-height: 1.75; color: var(--mainBlue); } @media (width < 768px) { .p-gakunenVoice__cardTitle { font-size: 16px; grid-column: 1/3; grid-row: 2/3; } } .p-gakunenVoice { /*-------------------------------------------- 本文テキスト --------------------------------------------*/ } .p-gakunenVoice__cardText { margin-top: 20px; font-weight: 500; font-size: var(--text14); line-height: 2; } @media (width < 768px) { .p-gakunenVoice__cardText { font-size: 14px; margin-top: 10px; } } .p-gakunenVoice { /*-------------------------------------------- 矢印（スライダーボタン） --------------------------------------------*/ } .p-gakunenVoice__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-gakunenVoice__arrows { margin-top: 30px; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } } .p-gakunenVoice__arrow { position: static; display: grid; place-items: center; width: 48px; aspect-ratio: 1; background-color: var(--subBlue); border-radius: 50%; border: 2px solid var(--mainBlue); color: var(--mainBlue); 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-gakunenVoice__arrow { width: 40px; } } .p-gakunenVoice__arrow::after { content: ""; width: 14.5833333333%; 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-gakunenVoice__arrow.--next::after { -webkit-mask-image: var(--arrow_r); mask-image: var(--arrow_r); } .p-gakunenVoice__arrow.--prev::after { -webkit-mask-image: var(--arrow_l); mask-image: var(--arrow_l); } .p-gakunenVoice__arrow:disabled { cursor: default; opacity: 0.4; } @media (hover: hover) { .p-gakunenVoice__arrow:hover:not(:disabled) { background: var(--mainBlue); color: var(--white); } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-highSchoolCta { padding-bottom: max(120px, 8.3333333333vw); } @media (width < 768px) { .p-highSchoolCta { padding-bottom: 60px; } } .p-highSchoolCta__main { background-color: #0060C0; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.1rem, rgba(255, 255, 255, 0.15)), color-stop(0.1rem, transparent)), -webkit-gradient(linear, left top, right top, color-stop(0.1rem, rgba(255, 255, 255, 0.15)), color-stop(0.1rem, transparent)), url("data:image/svg+xml;utf8,"); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0.1rem, transparent 0.1rem), linear-gradient(to right, rgba(255, 255, 255, 0.15) 0.1rem, transparent 0.1rem), url("data:image/svg+xml;utf8,"); background-size: 43.125px 43.125px, 43.125px 43.125px, 300px 300px; background-repeat: repeat, repeat, repeat; padding: 56px 20px 68px; border-radius: 0 80px 0 80px; } @media (width < 768px) { .p-highSchoolCta__main { border-radius: 0 60px 0 60px; padding: 60px 20px 70px; } } .p-highSchoolCta__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 64px; -moz-column-gap: 64px; column-gap: 64px; } @media (width < 992px) { .p-highSchoolCta__inner { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } } @media (width < 768px) { .p-highSchoolCta__inner { -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 30px; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; } } .p-highSchoolCta__image { width: 125px; } @media (width < 768px) { .p-highSchoolCta__image { width: 70px; } } .p-highSchoolCta__body { width: 100%; max-width: 400px; } @media (width < 768px) { .p-highSchoolCta__body { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } } .p-highSchoolCta__label { font-family: 'Raleway', sans-serif; font-size: var(--text24); font-weight: 600; line-height: 1; text-align: center; color: var(--mainYellow); } @media (width < 768px) { .p-highSchoolCta__label { font-size: 20px; } } .p-highSchoolCta__ttl { margin-top: 12px; font-size: var(--text36); font-weight: 700; line-height: 1.75; text-align: center; color: var(--white); } @media (width < 768px) { .p-highSchoolCta__ttl { margin-top: 15px; font-size: 24px; } } .p-highSchoolCta__btn { width: 100%; max-width: 400px; min-height: 70px; margin-top: 38px; padding: 10px 25px; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; font-size: var(--text18); color: var(--black); --color1: var(--black); } @media (width < 768px) { .p-highSchoolCta__btn { font-size: 16px; margin-top: 20px; } } .p-highSchoolCta__bottom { margin-top: 50px; } @media (width < 768px) { .p-highSchoolCta__bottom { margin-top: 40px; } } .p-highSchoolCta__bottomttl { font-size: var(--text20); font-weight: 700; line-height: 1.75; text-align: center; } @media (width < 768px) { .p-highSchoolCta__bottomttl { font-size: 18px; } } .p-highSchoolCta__bottomText { margin-top: 10px; margin-bottom: 20px; font-size: var(--text16); font-weight: 500; line-height: 1.75; text-align: center; } @media (width < 768px) { .p-highSchoolCta__bottomText { margin-bottom: 30px; font-size: 14px; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-highSchoolDetail { padding-top: max(70px, 4.8611111111vw); padding-bottom: max(210px, 14.5833333333vw); background-color: var(--subBlue); } @media (width < 768px) { .p-highSchoolDetail { padding-top: 60px; padding-bottom: 84px; } } .p-highSchoolDetail__list { margin-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; row-gap: 20px; } @media (width < 768px) { .p-highSchoolDetail__list { margin-top: 40px; row-gap: 15px; } } .p-highSchoolDetail__frame { width: calc(25% - 19.5px); min-height: 156px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; row-gap: 20px; border-radius: 0 20px 0 20px; padding: 20px; background-color: var(--white); } @media (width < 992px) { .p-highSchoolDetail__frame { width: calc(50% - 13px); } } @media (width < 768px) { .p-highSchoolDetail__frame { width: 100%; min-height: 124px; } } .p-highSchoolDetail__text { font-size: var(--text16); font-weight: 500; line-height: 2; text-align: center; } @media (width < 768px) { .p-highSchoolDetail__text { font-size: 16px; } } .p-highSchoolDetail__cont { margin-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 25px; } @media (width < 768px) { .p-highSchoolDetail__cont { margin-top: 30px; row-gap: 20px; } } .p-highSchoolDetail__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; } @media (width < 768px) { .p-highSchoolDetail__item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 5px; } } .p-highSchoolDetail__ttl { -ms-flex-negative: 0; flex-shrink: 0; width: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100vmax; padding-top: 2px; padding-bottom: 4px; background-color: #75B4F4; font-size: var(--text16); font-weight: 500; line-height: 1.5; color: var(--white); text-align: center; } @media (width < 768px) { .p-highSchoolDetail__ttl { font-size: 16px; } } .p-highSchoolDetail__detail { font-size: var(--text16); font-weight: 500; line-height: 2; } @media (width < 768px) { .p-highSchoolDetail__detail { font-size: 16px; line-height: 1.75; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-highSchoolFeature { padding-bottom: max(120px, 8.3333333333vw); padding-top: max(50px, 3.4722222222vw); background-color: #FFFEE7; 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; } @media (width < 768px) { .p-highSchoolFeature { padding-bottom: 60px; padding-top: 20px; } } .p-highSchoolFeature__wrapper { padding-top: max(20px, 1.3888888889vw); position: relative; } @media (width < 768px) { .p-highSchoolFeature__wrapper { padding-top: 40px; } } .p-highSchoolFeature__deco { width: 67px; position: absolute; top: min(-10px, -0.6944444444vw); right: 0; } @media (width < 768px) { .p-highSchoolFeature__deco { width: 56px; top: 6px; } } .p-highSchoolFeature__container { margin-top: 90px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 100px; } @media (width < 768px) { .p-highSchoolFeature__container { margin-top: 40px; row-gap: 40px; } } .p-highSchoolFeature__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (width < 768px) { .p-highSchoolFeature__item { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 20px; } } .p-highSchoolFeature__item:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media (width < 768px) { .p-highSchoolFeature__item:nth-child(even) { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .p-highSchoolFeature__body { width: 46.6666666667%; } @media (width < 992px) { .p-highSchoolFeature__body { width: 50%; } } @media (width < 768px) { .p-highSchoolFeature__body { width: 100%; } } .p-highSchoolFeature__label { padding: 8px 24px; border-radius: 9px 0; background-color: var(--tagColor); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; } @media (width < 768px) { .p-highSchoolFeature__label { padding: 3.5px 15px 4.5px; border: 7px 0; } } .p-highSchoolFeature__label.--pink { --tagColor: #EF74BA; } .p-highSchoolFeature__label.--green { --tagColor: #1AB383; } .p-highSchoolFeature__label.--purple { --tagColor: #A279E0; } .p-highSchoolFeature__label span { font-size: var(--text18); font-weight: 700; line-height: 1.4; text-align: center; color: var(--white); } @media (width < 768px) { .p-highSchoolFeature__label span { font-size: 16px; } } .p-highSchoolFeature__label::after { content: ""; position: absolute; left: 0; bottom: -9px; background-color: var(--tagColor); width: 10px; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: var(--index); mask-image: var(--index); aspect-ratio: 1/1; } @media (width < 768px) { .p-highSchoolFeature__label::after { bottom: -6.5px; width: 7.5px; } } .p-highSchoolFeature__ttl { margin-top: 12px; font-size: var(--text24); font-weight: 700; line-height: 1.75; } @media (width < 768px) { .p-highSchoolFeature__ttl { margin-top: 10px; font-size: 22px; } } .p-highSchoolFeature__text { margin-top: 15px; font-size: var(--text16); font-weight: 500; line-height: 2.2; } @media (width < 768px) { .p-highSchoolFeature__text { font-size: 16px; line-height: 2; } } .p-highSchoolFeature__image { width: 46.6666666667%; border-radius: 20px; overflow: hidden; } @media (width < 768px) { .p-highSchoolFeature__image { width: 100%; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-highSchoolFee { padding-top: max(160px, 11.1111111111vw); padding-bottom: max(120px, 8.3333333333vw); } @media (width < 768px) { .p-highSchoolFee { padding-top: 88px; padding-bottom: 60px; } } .p-highSchoolFee__frame { margin-top: 50px; padding: 28px 20px 45px; border-radius: 10px; border: 2px solid var(--mainBlue); } @media (width < 768px) { .p-highSchoolFee__frame { margin-top: 40px; padding: 18px; } } .p-highSchoolFee__lead { font-size: var(--text18); font-weight: 500; line-height: 1.75; text-align: center; color: var(--mainBlue); } @media (width < 768px) { .p-highSchoolFee__lead { font-size: 16px; } } .p-highSchoolFee__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 80px; -moz-column-gap: 80px; column-gap: 80px; max-width: 900px; margin-top: 20px; margin-inline: auto; padding: 30px 20px; background-color: var(--subYellow02); border-radius: 10px; } @media (width < 992px) { .p-highSchoolFee__container { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } } @media (width < 768px) { .p-highSchoolFee__container { -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; row-gap: 20px; padding: 20px 20px 20px 16px; } } .p-highSchoolFee__main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-column-gap: 6px; -moz-column-gap: 6px; column-gap: 6px; } @media (width < 768px) { .p-highSchoolFee__main { -webkit-column-gap: 4px; -moz-column-gap: 4px; column-gap: 4px; } } .p-highSchoolFee__image { -ms-flex-negative: 0; flex-shrink: 0; width: 108px; } @media (width < 768px) { .p-highSchoolFee__image { width: 81px; } } .p-highSchoolFee__text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .p-highSchoolFee__textMain { font-family: 'Raleway', sans-serif; font-size: var(--text40); font-weight: 600; line-height: 1; color: var(--mainBlue); } @media (width < 768px) { .p-highSchoolFee__textMain { font-size: 34px; } } .p-highSchoolFee__textUnit { margin-left: 2px; -webkit-transform: translateY(-2px); transform: translateY(-2px); font-size: var(--text18); font-weight: 700; line-height: 1.75; color: var(--mainBlue); } @media (width < 768px) { .p-highSchoolFee__textUnit { font-size: 16px; } } .p-highSchoolFee__textLabel { margin-left: -5px; -webkit-transform: translateY(-2px); transform: translateY(-2px); font-size: var(--text12); font-weight: 500; line-height: 1.75; color: var(--mainBlue); } @media (width < 768px) { .p-highSchoolFee__textLabel { font-size: 12px; } } .p-highSchoolFee__textLabel + .p-highSchoolFee__textUnit { margin-left: -3px; } .p-highSchoolFee__note { margin-top: -6px; margin-left: 3px; font-size: var(--text14); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-highSchoolFee__note { margin-top: 0; font-size: 12px; } } .p-highSchoolFee__list { margin-top: 30px; } @media (width < 768px) { .p-highSchoolFee__list { margin-top: 20px; } } .p-highSchoolFee__list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; font-size: var(--text16); font-weight: 500; line-height: 2; } @media (width < 768px) { .p-highSchoolFee__list li { font-size: 14px; } } .p-highSchoolFee__list li::before { content: "※"; -ms-flex-negative: 0; flex-shrink: 0; } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-highSchoolFloating { width: 120px; height: 120px; 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 7.2px; border-radius: 120px; border: 2px solid var(--white); background-color: var(--mainBlue); position: fixed; right: 20px; bottom: 20px; z-index: 100; opacity: 0; pointer-events: none; -webkit-transition: background-color 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); transition: background-color 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); transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), background-color 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), background-color 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); } @media (width < 768px) { .p-highSchoolFloating { width: 70px; height: 70px; row-gap: 1.8px; right: 10px; bottom: 10px; } } .p-highSchoolFloating.is-active { opacity: 1; pointer-events: auto; } @media (hover: hover) { .p-highSchoolFloating:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); background-color: var(--mainYellow); } .p-highSchoolFloating:hover .p-highSchoolFloating__label { color: var(--mainBlue); } } .p-highSchoolFloating__icon { width: 42px; } @media (width < 768px) { .p-highSchoolFloating__icon { width: 21px; } } .p-highSchoolFloating__label { font-size: var(--text16); font-weight: 700; line-height: 1.2; text-align: center; color: var(--white); -webkit-transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-highSchoolFloating__label { font-size: 10px; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-highSchool .p-breadcrumbs { background-color: unset; background-image: unset; padding-bottom: 0; position: relative; z-index: 1; } .p-highSchoolFv { width: 100%; min-height: 480px; margin-top: -76px; position: relative; z-index: 0; } @media (width < 768px) { .p-highSchoolFv { min-height: unset; margin-top: -123px; } } .p-highSchoolFv__heading { padding-top: 162px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 10px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } @media (width < 768px) { .p-highSchoolFv__heading { top: unset; bottom: 20%; padding-top: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .p-highSchoolFv__title { font-size: var(--text46); font-weight: 700; line-height: 1; color: var(--white); } @media (width < 768px) { .p-highSchoolFv__title { font-size: 32px; line-height: 1.5; } } .p-highSchoolFv__label { font-family: 'Raleway', sans-serif; font-size: var(--text24); font-weight: 600; line-height: 1; color: var(--mainYellow); } @media (width < 768px) { .p-highSchoolFv__label { font-size: 16px; } } .p-highSchoolFv__image { width: 100%; min-height: 480px; position: relative; } @media (width < 768px) { .p-highSchoolFv__image { min-height: unset; } } .p-highSchoolFv__image img { width: 100%; height: 100%; min-height: 480px; -o-object-fit: cover; object-fit: cover; -o-object-position: center bottom; object-position: center bottom; } @media (width < 768px) { .p-highSchoolFv__image img { min-height: unset; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-highSchoolIntro { margin-top: 70px; padding-bottom: 120px; } @media (width < 768px) { .p-highSchoolIntro { margin-top: 60px; padding-bottom: 60px; } } .p-highSchoolIntro__label { padding: 8px 24px; border-radius: 9px 0; background-color: var(--mainYellow); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; } @media (width < 768px) { .p-highSchoolIntro__label { padding: 3.5px 15px 4.5px; border-radius: 7px 0; } } .p-highSchoolIntro__label span { font-size: var(--text18); font-weight: 700; line-height: 1.4; text-align: center; } @media (width < 768px) { .p-highSchoolIntro__label span { font-size: 16px; } } .p-highSchoolIntro__label::after { content: ""; position: absolute; left: 0; bottom: -9px; background-color: var(--mainYellow); width: 10px; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: var(--index); mask-image: var(--index); aspect-ratio: 1/1; } @media (width < 768px) { .p-highSchoolIntro__label::after { bottom: -6.5px; width: 7.5px; } } .p-highSchoolIntro__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (width < 768px) { .p-highSchoolIntro__container { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 20px; } } .p-highSchoolIntro__body { width: 46.6666666667%; } @media (width < 768px) { .p-highSchoolIntro__body { width: 100%; } } .p-highSchoolIntro__heading { margin-top: 18px; font-size: var(--text24); font-weight: 700; line-height: 1.75; color: var(--mainBlue); } @media (width < 768px) { .p-highSchoolIntro__heading { margin-top: 15px; font-size: 22px; line-height: 1.5; } } .p-highSchoolIntro__text { margin-top: 15px; font-size: var(--text16); font-weight: 500; line-height: 2.2; } @media (width < 768px) { .p-highSchoolIntro__text { font-size: 16px; line-height: 2; } } .p-highSchoolIntro__image { margin-top: 62px; width: 46.6666666667%; border-radius: 20px; overflow: hidden; } @media (width < 768px) { .p-highSchoolIntro__image { width: 100%; margin-top: 0; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-highSchoolNav { margin-top: 20px; } @media (width < 768px) { .p-highSchoolNav { margin-top: 30px; } } .p-highSchoolNav__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; gap: 12px 35px; } @media (width < 768px) { .p-highSchoolNav__list { gap: 15px 16px; } } .p-highSchoolNav__link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; min-height: 40px; border-radius: 50px; color: var(--fontColor); font-weight: 700; font-size: var(--text16); -webkit-transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-highSchoolNav__link { font-size: 14px; min-height: auto; } } @media (hover: hover) { .p-highSchoolNav__link:hover { color: var(--mainBlue); } .p-highSchoolNav__link:hover .p-highSchoolNav__icon { background-color: var(--mainBlue); } .p-highSchoolNav__link:hover .p-highSchoolNav__icon::after { background-color: var(--white); } } .p-highSchoolNav__icon { -ms-flex-negative: 0; flex-shrink: 0; width: 26px; aspect-ratio: 1; border-radius: 50%; background-color: var(--subBlue); display: grid; place-items: center; -webkit-transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-highSchoolNav__icon { width: 20px; height: 20px; background-size: 10px auto; } } .p-highSchoolNav__icon::after { content: ""; -webkit-mask-image: var(--arrow_b); mask-image: var(--arrow_b); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; width: 10px; aspect-ratio: 10/6; background-color: var(--mainBlue); -webkit-transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-highSchoolStep { padding-top: max(40px, 2.7777777778vw); padding-bottom: max(90px, 6.25vw); background-color: var(--mainBlue); position: relative; } .p-highSchoolStep::after, .p-highSchoolStep::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-highSchoolStep::after { -webkit-mask-image: var(--maskBottomNew); mask-image: var(--maskBottomNew); top: calc(100% - 1px); -webkit-mask-position: center bottom; mask-position: center bottom; } @media (width < 768px) { .p-highSchoolStep::after { -webkit-mask-position: center calc(0% - 1px); mask-position: center calc(0% - 1px); } } .p-highSchoolStep::before { -webkit-mask-image: var(--maskTopNew); mask-image: var(--maskTopNew); bottom: calc(100% - 1px); -webkit-mask-position: center top; mask-position: center top; } @media (width < 768px) { .p-highSchoolStep::before { -webkit-mask-position: center calc(100% + 1px); mask-position: center calc(100% + 1px); } } @media (width < 768px) { .p-highSchoolStep { padding-top: 48px; padding-bottom: 46px; } } .p-highSchoolStep__wrapper { margin-top: 75px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } @media (width < 768px) { .p-highSchoolStep__wrapper { margin-top: 36px; row-gap: 10px; } } .p-highSchoolStep__container { 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-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; row-gap: 20px; } @media (width < 768px) { .p-highSchoolStep__container { row-gap: 10px; } } .p-highSchoolStep__container:not(:last-child)::after { content: ""; display: block; width: 60px; height: 40px; background-image: url("../img/high-school-support/step_arrow.svg"); background-repeat: no-repeat; background-size: contain; } @media (width < 768px) { .p-highSchoolStep__container:not(:last-child)::after { width: 42px; height: 28px; } } .p-highSchoolStep__frame { width: 100%; min-height: 190px; display: grid; grid-template-columns: 117px auto; -webkit-column-gap: 58px; -moz-column-gap: 58px; column-gap: 58px; border-radius: 10px; border: 2px solid var(--white); padding: 38px 53px 38px 38px; background-color: var(--mainBlue); } @media (width < 992px) { .p-highSchoolStep__frame { grid-template-columns: 70px auto; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; padding: 40px 30px 40px 30px; } } @media (width < 768px) { .p-highSchoolStep__frame { grid-template-columns: unset; row-gap: 60px; padding: 20px 20px; position: relative; } } .p-highSchoolStep__label { position: relative; } .p-highSchoolStep__label::after { content: ""; width: 4px; height: calc(100% + 4px); background-image: url("../img/high-school-support/step_border.svg"); background-repeat: repeat-y; background-size: contain; position: absolute; top: -2px; right: -2px; } @media (width < 768px) { .p-highSchoolStep__label::after { width: 100%; height: 2px; background-image: url("../img/high-school-support/step_border-sp.svg"); background-repeat: repeat-x; top: unset; right: unset; bottom: -30px; } } .p-highSchoolStep__labelWrap { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; 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-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .p-highSchoolStep__labelLead { font-family: 'Raleway', sans-serif; font-size: var(--text18); font-weight: 600; line-height: 1; text-align: center; color: var(--white); } @media (width < 768px) { .p-highSchoolStep__labelLead { font-size: 13.5px; } } .p-highSchoolStep__labelNum { margin-top: -2px; font-family: 'Raleway', sans-serif; font-size: clamp(36px, 4.5vw, 50px); font-weight: 600; line-height: 1; text-align: center; color: var(--white); } @media (width < 768px) { .p-highSchoolStep__labelNum { font-size: 37.5px; } } .p-highSchoolStep__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 45px; -moz-column-gap: 45px; column-gap: 45px; } @media (width < 992px) { .p-highSchoolStep__body { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } } @media (width < 768px) { .p-highSchoolStep__body { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .p-highSchoolStep__ttl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; --color1: var(--mainYellow); } @media (width < 768px) { .p-highSchoolStep__ttl { -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; } } .p-highSchoolStep__ttl svg { margin-top: 8px; width: 24px; fill: currentColor; } @media (width < 768px) { .p-highSchoolStep__ttl svg { margin-top: 4px; width: 18px; } } .p-highSchoolStep__ttlLabel { font-size: var(--text24); font-weight: 700; line-height: 1.5; color: var(--white); } @media (width < 768px) { .p-highSchoolStep__ttlLabel { font-size: 20px; } } .p-highSchoolStep__content { margin-top: 10px; font-size: var(--text16); font-weight: 500; line-height: 2; color: var(--white); } @media (width < 768px) { .p-highSchoolStep__content { font-size: 16px; } } .p-highSchoolStep__image { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: 120px; } @media (width < 768px) { .p-highSchoolStep__image { position: absolute; top: -10px; right: 20px; } } .p-highSchoolStep__btn { margin-top: 20px; } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ /*-------------------------------------------- XXXXXX --------------------------------------------*/ /*-------------------------------------------- HOME ABOUT（現代に蘇る松下村塾） --------------------------------------------*/ .p-homeAbout { position: relative; background-color: #FFFEE7; background-image: linear-gradient(to bottom, rgba(97, 97, 97, 0.08) 2px, transparent 2px), url("data:image/svg+xml;utf8,"); background-size: 100% 24.8px, 300px 300px; background-repeat: repeat, repeat; padding-top: max(70px, 4.8611111111vw); padding-bottom: max(162px, 11.25vw); } @media (width < 768px) { .p-homeAbout { padding: 50px 0 90px; } } .p-homeAbout__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .p-homeAbout { /*-------------------------------------------- 本文（キャッチ + 説明） --------------------------------------------*/ } .p-homeAbout__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; margin-block: 70px 50px; } @media (width < 768px) { .p-homeAbout__body { margin-block: 40px; } } .p-homeAbout__catch { font-weight: 700; font-size: var(--text24); line-height: 2.2; } @media (width < 768px) { .p-homeAbout__catch { font-size: 20px; line-height: 1.5; } } .p-homeAbout__desc { font-weight: 500; font-size: var(--text16); line-height: 2.2; } @media (width < 768px) { .p-homeAbout__desc { line-height: 2; font-size: 16px; } } .p-homeAbout { /*-------------------------------------------- 画像3枚 PC: 横3カラム（380×260・角丸15px・gap30px） SP: 1枚目フル幅＋ 2・3枚目を横並び（角丸10px） --------------------------------------------*/ } .p-homeAbout__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; } @media (width < 768px) { .p-homeAbout__list { grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; } } .p-homeAbout__item { border-radius: 15px; overflow: hidden; display: grid; row-gap: 10px; } @media (width < 768px) { .p-homeAbout__item { border-radius: 10px; row-gap: 5px; } .p-homeAbout__item:first-child { grid-column: 1/-1; } } .p-homeAbout__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-homeAbout__itemText { font-size: 14px; line-height: 1.75; font-weight: 500; } @media (width < 768px) { .p-homeAbout__itemText { font-size: 13px; } } .p-homeAbout { /*-------------------------------------------- CTAボタン --------------------------------------------*/ } .p-homeAbout__ctaWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /*-------------------------------------------- HOME AI（ショウイン式®を支える独自開発AI教材） --------------------------------------------*/ .p-homeAi { position: relative; z-index: 1; padding-top: max(70px, 4.8611111111vw); padding-bottom: max(70px, 4.8611111111vw); background-color: var(--mainBlue); } .p-homeAi::after, .p-homeAi::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-homeAi::after { -webkit-mask-image: var(--maskBottomNew); mask-image: var(--maskBottomNew); top: calc(100% - 1px); -webkit-mask-position: center bottom; mask-position: center bottom; } @media (width < 768px) { .p-homeAi::after { -webkit-mask-position: center calc(0% - 1px); mask-position: center calc(0% - 1px); } } .p-homeAi::before { -webkit-mask-image: var(--maskTopNew); mask-image: var(--maskTopNew); bottom: calc(100% - 1px); -webkit-mask-position: center top; mask-position: center top; } @media (width < 768px) { .p-homeAi::before { -webkit-mask-position: center calc(100% + 1px); mask-position: center calc(100% + 1px); } } @media (width < 768px) { .p-homeAi { padding: 70px 0 70px; } } .p-homeAi { /*-------------------------------------------- ヘッダー（タイトル） --------------------------------------------*/ } .p-homeAi__head { margin-bottom: 65px; } @media (width < 768px) { .p-homeAi__head { margin-bottom: 40px; } } .p-homeAi { /*-------------------------------------------- 本文：テキスト + 画像 --------------------------------------------*/ } .p-homeAi__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (width < 768px) { .p-homeAi__body { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 30px; } } .p-homeAi__text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; max-width: 50rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.5rem; color: var(--white); } @media (width < 768px) { .p-homeAi__text { max-width: none; row-gap: 10px; } } .p-homeAi__catch { font-weight: 700; font-size: var(--text24); line-height: 1.75; } @media (width < 768px) { .p-homeAi__catch { line-height: 1.8; font-size: 18px; } } .p-homeAi__desc { font-weight: 500; font-size: var(--text16); line-height: 2.2; } @media (width < 992px) { .p-homeAi__desc { font-size: 16px; } } .p-homeAi__descAccent { color: var(--mainYellow); } .p-homeAi__img { width: 51.6666666667%; max-width: 620px; } @media (width < 768px) { .p-homeAi__img { width: 100%; margin-inline: auto; } } .p-homeAi__ctaWrap { margin-top: 65px; } @media (width < 768px) { .p-homeAi__ctaWrap { margin-top: 30px; } } /*-------------------------------------------- HOME CORRESPONDENCE（通信制高校） --------------------------------------------*/ .p-homeCorr { position: relative; padding-bottom: max(120px, 8.3333333333vw); } @media (width < 768px) { .p-homeCorr { padding-bottom: 70px; } } .p-homeCorr { /*-------------------------------------------- ボックス（白地+青ボーダー） --------------------------------------------*/ } .p-homeCorr__box { position: relative; border: 2px solid var(--mainBlue); background-color: var(--white); border-radius: 10px; padding: 70px 40px 60px; } @media (width < 992px) { .p-homeCorr__box { padding: 40px 20px 30px; } } @media (width < 768px) { .p-homeCorr__box { padding: 40px 20px 50px; border-radius: 8px; } } .p-homeCorr { /*-------------------------------------------- あしらい（右上の人物イラスト） box の右上、上端より少しはみ出して配置 --------------------------------------------*/ } .p-homeCorr__deco { position: absolute; top: 14%; right: 7%; width: 60px; aspect-ratio: 73/186; pointer-events: none; z-index: 1; } @media (width < 992px) { .p-homeCorr__deco { width: 50px; top: -20px; right: 20px; } } @media (width < 768px) { .p-homeCorr__deco { width: 45px; top: 0px; right: 10px; -webkit-transform: translateY(-75%); transform: translateY(-75%); } } .p-homeCorr { /*-------------------------------------------- ヘッダー（タイトル + リード文） --------------------------------------------*/ } .p-homeCorr__head { 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; gap: 15px; margin-bottom: 50px; text-align: center; } @media (width < 992px) { .p-homeCorr__head { margin-bottom: 30px; } } @media (width < 768px) { .p-homeCorr__head { row-gap: 5px; } } .p-homeCorr__title { font-weight: 700; font-size: var(--text36); line-height: 1.5; color: var(--mainBlue); } @media (width < 992px) { .p-homeCorr__title { font-size: var(--text24); } } @media (width < 768px) { .p-homeCorr__title { font-size: 24px; } } .p-homeCorr__lead { font-weight: 700; font-size: var(--text20); line-height: 2; } @media (width < 992px) { .p-homeCorr__lead { font-size: var(--text14); } } @media (width < 768px) { .p-homeCorr__lead { font-size: 16px; } } .p-homeCorr { /*-------------------------------------------- 3カラムリスト --------------------------------------------*/ } .p-homeCorr__list { margin-bottom: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4.4117647059%; max-width: 1020px; margin-inline: auto; } @media (width < 768px) { .p-homeCorr__list { grid-template-columns: 1fr; margin-bottom: 30px; row-gap: 50px; } } .p-homeCorr__item { 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-homeCorr__item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .p-homeCorr { /*-------------------------------------------- 画像 + タグ（タグは画像の左上にオーバーラップ） --------------------------------------------*/ } .p-homeCorr__itemMedia { position: relative; width: 100%; } .p-homeCorr__itemImg { width: 100%; max-width: 300px; margin-inline: auto; } .p-homeCorr__itemTitle { font-weight: 700; font-size: var(--text18); line-height: 2; margin-block: 15px 5px; } @media (width < 768px) { .p-homeCorr__itemTitle { font-size: 16px; } } .p-homeCorr__itemText { font-weight: 500; font-size: var(--text14); line-height: 1.75; } @media (width < 768px) { .p-homeCorr__itemText { font-size: 14px; } } .p-homeCorr { /*-------------------------------------------- CTAボタン（青地+白文字） --------------------------------------------*/ } .p-homeCorr__ctaWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /*-------------------------------------------- HOME FV --------------------------------------------*/ .p-homeFv.is-noFvIntro .p-homeFv__photoItem, .p-homeFv.is-noFvIntro .p-homeFv__photoItem .p-homeFv__photoImg > img, .p-homeFv.is-noFvIntro .p-homeFv__photoItem .p-homeFv__photoTag { -webkit-transition: none !important; transition: none !important; } .p-homeFv { position: relative; z-index: 2; 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; color: var(--white); overflow: hidden; margin-top: min(-80px, -5.5555555556vw); padding-top: max(80px, 5.5555555556vw); padding-bottom: var(--maskDividerBottom); -webkit-mask-composite: exclude; mask-composite: exclude; -webkit-mask-image: var(--maskBottom), -webkit-gradient(linear, left top, left bottom, from(black), to(black)); -webkit-mask-image: var(--maskBottom), linear-gradient(black, black); mask-image: var(--maskBottom), -webkit-gradient(linear, left top, left bottom, from(black), to(black)); mask-image: var(--maskBottom), linear-gradient(black, black); -webkit-mask-size: 101% auto, 100% 100%; mask-size: 101% auto, 100% 100%; -webkit-mask-position: center calc(100% + 2px), center; mask-position: center calc(100% + 2px), center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @media (width < 768px) { .p-homeFv { padding-bottom: 50px; -webkit-mask-position: center calc(100% + 1px), center; mask-position: center calc(100% + 1px), center; } } @media (width < 576px) { .p-homeFv { -webkit-mask-position: center calc(100% + 0.5px), center; mask-position: center calc(100% + 0.5px), center; } } .p-homeFv__bg { 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; width: 100%; height: 100lvh; position: fixed; top: 0; left: 0; z-index: 2; } .p-homeFv { /*-------------------------------------------- VERTICAL RULE（左端の縦罫線2本） --------------------------------------------*/ } .p-homeFv__rule { pointer-events: none; position: absolute; top: -90px; left: 70px; width: 20px; height: calc(100% + 90px); border-left: 2px solid rgba(255, 255, 255, 0.3); border-right: 2px solid rgba(255, 255, 255, 0.3); } @media (width < 768px) { .p-homeFv__rule { left: 20px; border-left: 2px solid rgba(255, 255, 255, 0.1); border-right: 2px solid rgba(255, 255, 255, 0.1); } } .p-homeFv { /*-------------------------------------------- COPY（タイトル + リード） --------------------------------------------*/ } .p-homeFv__copy { position: relative; z-index: 3; display: grid; margin-block: 45px 30px; } @media (width < 768px) { .p-homeFv__copy { margin-block: 20px 30px; } } .p-homeFv__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-inline: auto; width: 92.6666666667%; } @media (width < 768px) { .p-homeFv__title { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .p-homeFv__titleTag { -webkit-box-flex: 0; -ms-flex: 0 0 24.2805755396%; flex: 0 0 24.2805755396%; display: block; -webkit-margin-end: 1.7985611511%; margin-inline-end: 1.7985611511%; -webkit-filter: drop-shadow(5.275px 5.275px 15.826px rgba(0, 74, 128, 0.3)); filter: drop-shadow(5.275px 5.275px 15.826px rgba(0, 74, 128, 0.3)); } @media (width < 768px) { .p-homeFv__titleTag { -webkit-box-flex: 0; -ms-flex: 0 0 38.4615384615%; flex: 0 0 38.4615384615%; } } .p-homeFv__titleText { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; font-weight: 700; font-size: clamp(28px, 4vw, 54px); line-height: 1.5; color: var(--white); letter-spacing: 0.01em; overflow: hidden; } @media (width < 768px) { .p-homeFv__titleText { font-size: 33px; } .p-homeFv__titleText.--line2 { -ms-flex-preferred-size: 100%; flex-basis: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media (width < 768px) { .p-homeFv__titleText { font-size: 30px; } } .p-homeFv { /*-------------------------------------------- タイトル初期状態（GSAP で制御）初回訪問時のみ HomeFvIntro.js が timeline で表示する。 2回目以降も同じ JS が clearProps で即表示状態にする。 --------------------------------------------*/ } .p-homeFv__titleChar { display: inline-block; } .p-homeFv__lead { font-weight: 700; line-height: 1.5; text-align: center; color: var(--white); font-size: var(--text24); } @media (width < 768px) { .p-homeFv__lead { font-size: 16px; margin-top: 10px; } } .p-homeFv__leadAccent { color: var(--mainYellow); } .p-homeFv { /*-------------------------------------------- PHOTOS（写真3枚） --------------------------------------------*/ } .p-homeFv__photos { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 30px; -webkit-column-gap: 3.75%; -moz-column-gap: 3.75%; column-gap: 3.75%; z-index: 2; } @media (width < 768px) { .p-homeFv__photos { grid-template-columns: 1fr; max-width: 330px; margin-inline: auto; } } .p-homeFv__photo { position: relative; display: grid; } @media (width < 768px) { .p-homeFv__photo { grid-column: 1; grid-row: 1; } } .p-homeFv__photoItem { position: relative; grid-column: 1; grid-row: 1; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; visibility: hidden; -webkit-transition: visibility 0s linear 1.2s; transition: visibility 0s linear 1.2s; } @media (width < 768px) { .p-homeFv__photoItem { margin-inline: auto; } } .p-homeFv__photoItem.is-act { visibility: visible; -webkit-transition: visibility 0s linear 0s; transition: visibility 0s linear 0s; } @media (768px <= width) { .p-homeFv__photoItem.--01, .p-homeFv__photoItem.--04 { rotate: -5deg; margin-right: auto; } } @media (768px <= width) { .p-homeFv__photoItem.--03, .p-homeFv__photoItem.--06 { margin-left: auto; rotate: 5deg; } } .p-homeFv__photoItem.--01 { width: 93.7837837838%; --w: 347; --h: 431; } @media (width < 768px) { .p-homeFv__photoItem.--01 { width: 79.5428571429%; --w: calc(347 * .8); --h: calc(431 * .8); } } .p-homeFv__photoItem.--02 { width: 90.8108108108%; --w: 336; --h: 420; } @media (width < 768px) { .p-homeFv__photoItem.--02 { width: 76.8%; --w: calc(336 * .8); --h: calc(420 * .8); } } .p-homeFv__photoItem.--03 { width: 105.1351351351%; --w: 389; --h: 415; } @media (width < 768px) { .p-homeFv__photoItem.--03 { width: 88.9142857143%; --w: calc(389 * .8); --h: calc(415 * .8); } } .p-homeFv__photoItem.--04 { width: 89.1891891892%; --w: 330; --h: 470; } @media (width < 768px) { .p-homeFv__photoItem.--04 { width: 75.4285714286%; --w: calc(330 * .8); --h: calc(470 * .8); } } .p-homeFv__photoItem.--05 { width: 91.8918918919%; --w: 340; --h: 415; } @media (width < 768px) { .p-homeFv__photoItem.--05 { width: 77.7142857143%; --w: calc(340 * .8); --h: calc(415 * .8); } } .p-homeFv__photoItem.--06 { width: 89.4594594595%; --w: 331; --h: 410; } @media (width < 768px) { .p-homeFv__photoItem.--06 { width: 75.6571428571%; --w: calc(331 * .8); --h: calc(410 * .8); } } .p-homeFv { /*-------------------------------------------- 画像本体（picture） overflow:hidden を効かせて、中のが縮小→等倍に戻りながら出現するアニメーションを行う --------------------------------------------*/ } .p-homeFv__photoImg { display: block; overflow: hidden; } .p-homeFv__photoImg > img { display: block; width: 100%; height: auto; -webkit-transform: translate3d(0, 100%, 0) scale(0); transform: translate3d(0, 100%, 0) scale(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: -webkit-transform 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-transform 0.3s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .p-homeFv__photoItem.is-act .p-homeFv__photoImg > img { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) 0.1s; transition: -webkit-transform 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) 0.1s; transition: transform 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) 0.1s; transition: transform 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) 0.1s, -webkit-transform 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) 0.1s; } .p-homeFv__photoTag { position: absolute; z-index: 3; line-height: 0; pointer-events: none; -webkit-filter: drop-shadow(5.25px 5.25px 10.5px rgba(0, 74, 128, 0.15)); filter: drop-shadow(5.25px 5.25px 10.5px rgba(0, 74, 128, 0.15)); opacity: 0; -webkit-transform: translateY(-25%); transform: translateY(-25%); -webkit-transition: 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s; transition: 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s; } .p-homeFv__photoItem.is-act .p-homeFv__photoTag { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s; transition: 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s; } .p-homeFv__photoItem.--01 .p-homeFv__photoTag { top: calc(112 / var(--h) * 100%); left: calc(18.8 / var(--w) * -100%); width: calc(122 / var(--w) * 100%); } @media (width < 768px) { .p-homeFv__photoItem.--01 .p-homeFv__photoTag { width: calc(97.6 / var(--w) * 100%); } } .p-homeFv__photoItem.--02 .p-homeFv__photoTag { top: calc(63 / var(--h) * 100%); right: calc(40 / var(--w) * -100%); width: calc(123 / var(--w) * 100%); } @media (width < 768px) { .p-homeFv__photoItem.--02 .p-homeFv__photoTag { width: calc(970.4 / var(--w) * 100%); } } .p-homeFv__photoItem.--03 .p-homeFv__photoTag { top: calc(167 / var(--h) * 100%); right: calc(5 / var(--w) * 100%); width: calc(111 / var(--w) * 100%); } @media (width < 768px) { .p-homeFv__photoItem.--03 .p-homeFv__photoTag { width: calc(88.8 / var(--w) * 100%); } } .p-homeFv__photoItem.--04 .p-homeFv__photoTag { top: calc(88 / var(--h) * 100%); right: calc(38 / var(--w) * -100%); width: calc(122 / var(--w) * 100%); } @media (width < 768px) { .p-homeFv__photoItem.--04 .p-homeFv__photoTag { width: calc(97.6 / var(--w) * 100%); } } .p-homeFv__photoItem.--05 .p-homeFv__photoTag { top: calc(48 / var(--h) * 100%); left: calc(10 / var(--w) * -100%); width: calc(89 / var(--w) * 100%); } @media (width < 768px) { .p-homeFv__photoItem.--05 .p-homeFv__photoTag { width: calc(71.2 / var(--w) * 100%); } } .p-homeFv__photoItem.--06 .p-homeFv__photoTag { top: calc(48 / var(--h) * 100%); right: calc(20 / var(--w) * -100%); width: calc(108 / var(--w) * 100%); } @media (width < 768px) { .p-homeFv__photoItem.--06 .p-homeFv__photoTag { width: calc(86.4 / var(--w) * 100%); } } .p-homeFv { /*-------------------------------------------- BACKGROUND TEXT（Discover Your Potential!） --------------------------------------------*/ } .p-homeFv__bgText { margin: 0; color: var(--white); opacity: 0; font-family: 'Raleway', sans-serif; font-weight: 700; line-height: 1; white-space: nowrap; pointer-events: none; overflow: hidden; position: absolute; z-index: 1; bottom: 0; left: 0; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); font-size: 130px; letter-spacing: 0; } @media (width < 768px) { .p-homeFv__bgText { font-size: 65px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } } .p-homeFv__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-homeFv__bgTextInner { -webkit-animation: bgTextScroll 30s linear infinite; animation: bgTextScroll 30s linear infinite; } } .p-homeFv__bgTextItem { -ms-flex-negative: 0; flex-shrink: 0; } .p-homeFv { /*-------------------------------------------- SCROLL（右下のスクロールインジケーター） --------------------------------------------*/ } .p-homeFv__scroll { position: absolute; right: 50px; bottom: 120px; z-index: 3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 8px; color: var(--white); pointer-events: none; opacity: 0; } @media (width < 768px) { .p-homeFv__scroll { right: 3%; bottom: 10%; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .p-homeFv__scrollIcon { display: block; width: 28px; height: 72px; background-color: currentColor; -webkit-mask-image: url(../img/home/fv/scroll.svg); mask-image: url(../img/home/fv/scroll.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-animation: fvScrollBob 1.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite; animation: fvScrollBob 1.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite; } .p-homeFv__scrollText { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: var(--text14); line-height: 1.5; color: var(--white); } /*-------------------------------------------- KEYFRAMES（スクロールアイコンの上下バウンド） --------------------------------------------*/ @-webkit-keyframes fvScrollBob { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes fvScrollBob { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(6px); transform: translateY(6px); } } /*-------------------------------------------- HOME GRADE（学年別学習ポイント） --------------------------------------------*/ .p-homeGradeFrame { position: relative; -webkit-clip-path: inset(0); clip-path: inset(0); } .p-homeGradeFrame::after { content: ""; width: 100%; height: 100%; display: block; position: fixed; top: 0; left: 0; background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.1rem, rgba(0, 126, 219, 0.06)), color-stop(0.1rem, transparent)), url("data:image/svg+xml;utf8,"); background-image: linear-gradient(to bottom, rgba(0, 126, 219, 0.06) 0.1rem, transparent 0.1rem), url("data:image/svg+xml;utf8,"); background-size: 100% 30px, 300px 300px; background-repeat: repeat, repeat; z-index: -1; } .p-homeGrade { position: relative; padding-top: max(100px, 6.9444444444vw); padding-bottom: max(140px, 9.7222222222vw); z-index: 1; } @media (width < 992px) { .p-homeGrade { padding: 60px 0 80px; } } @media (width < 768px) { .p-homeGrade { padding: 68px 0 123px; } } .p-homeGrade__rule { pointer-events: none; position: absolute; top: 0; left: 3%; width: 20px; height: 100%; border-left: 2px solid var(--lineRed); border-right: 2px solid var(--lineRed); z-index: 0; } @media (width < 768px) { .p-homeGrade__rule { display: none; } } .p-homeGrade { /*-------------------------------------------- HEADER（Grade Guide / 学年別学習ポイント） --------------------------------------------*/ } .p-homeGrade__head { margin-bottom: 60px; } @media (width < 992px) { .p-homeGrade__head { margin-bottom: 30px; } } @media (width < 768px) { .p-homeGrade__head { margin-bottom: 0px; } } .p-homeGrade__inner { position: -webkit-sticky; position: sticky; top: var(--h_height); } .p-homeGrade { /*-------------------------------------------- BODY（左ナビ + カード） --------------------------------------------*/ } .p-homeGrade__body { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5%; } @media (width < 768px) { .p-homeGrade__body { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 38px; padding-top: 40px; overflow: clip; } } .p-homeGrade { /*-------------------------------------------- 左サイドナビ（sticky） --------------------------------------------*/ } .p-homeGrade__nav { -ms-flex-negative: 0; flex-shrink: 0; width: 16.6666666667%; position: -webkit-sticky; position: sticky; top: calc(var(--h_height) + 10vh); height: -webkit-max-content; height: -moz-max-content; height: max-content; margin-left: auto; } @media (width < 768px) { .p-homeGrade__nav { width: 100%; top: calc(var(--h_height) + 5vh); } } .p-homeGrade__navList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 45px; } @media (width < 768px) { .p-homeGrade__navList { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .p-homeGrade__navStroke { position: absolute; width: 110%; left: 50%; top: 50%; -webkit-transform: translate(-65%, -45%); transform: translate(-65%, -45%); pointer-events: none; fill: none; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; -webkit-transition: stroke-dashoffset 0.6s linear; transition: stroke-dashoffset 0.6s linear; } @media (width < 768px) { .p-homeGrade__navStroke { width: 150%; } } .p-homeGrade__navStroke.--1 { stroke: #D7DD00; } .p-homeGrade__navStroke.--2 { stroke: #91C9FB; } .p-homeGrade__navStroke.--3 { stroke: #F8C741; } @media (width < 1200px) { .p-homeGrade__navStroke { -webkit-transform: translate(-60%, -45%); transform: translate(-60%, -45%); } } @media (width < 992px) { .p-homeGrade__navStroke { -webkit-transform: translate(-55%, -45%); transform: translate(-55%, -45%); } } @media (width < 768px) { .p-homeGrade__navStroke { -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); } } .p-homeGrade__navItem { color: var(--disable); -webkit-transition: color 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: color 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95); position: relative; } .p-homeGrade__navItem.is-current { color: var(--mainBlue); } .p-homeGrade__navItem.is-current .p-homeGrade__navStroke { stroke-dashoffset: 0; } .p-homeGrade__navLink { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } @media (width < 768px) { .p-homeGrade__navLink { text-align: center; } } .p-homeGrade__navLabel { font-weight: 700; font-size: var(--text24); line-height: 1.5; } @media (width < 768px) { .p-homeGrade__navLabel { font-size: 16px; } } .p-homeGrade__navRange { font-weight: 500; font-size: var(--text16); line-height: 1.5; color: inherit; } @media (width < 768px) { .p-homeGrade__navRange { font-size: 13px; } } .p-homeGrade { /*-------------------------------------------- カードリスト --------------------------------------------*/ } .p-homeGrade__cardList { min-height: 300vh; max-width: 760px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 200px; } @media (width < 992px) { .p-homeGrade__cardList { gap: 60px; } } @media (width < 768px) { .p-homeGrade__cardList { display: grid; min-height: 350vh; } } .p-homeGrade { /*-------------------------------------------- カード本体 --------------------------------------------*/ } .p-homeGrade__card { position: -webkit-sticky; position: sticky; top: calc(var(--h_height) + 10vh); border-radius: 20px; padding: 60px 50px 50px; max-width: 760px; width: 100%; -ms-flex-item-align: end; align-self: flex-end; margin-left: auto; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } @media (width < 992px) { .p-homeGrade__card { padding: 40px 20px 30px; border-radius: 15px; } } @media (width < 768px) { .p-homeGrade__card { -ms-flex-item-align: stretch; align-self: stretch; margin-left: 0; top: calc(var(--h_height) + 5vh + 100px); padding: 35px 20px; min-height: 450px; } } .p-homeGrade__card--lower { background: #F4F6AB; --itemBg: #FDFFC1; } .p-homeGrade__card--upper { background: #D0E9FF; --itemBg: #EBF5FF; margin-right: -10px; } @media (width < 768px) { .p-homeGrade__card--upper { margin-right: 0; } } .p-homeGrade__card--junior { background: #FFE8A9; --itemBg: #FFF3D4; margin-right: -20px; } @media (width < 768px) { .p-homeGrade__card--junior { margin-right: 0; } } .p-homeGrade { /*-------------------------------------------- カードヘッダー --------------------------------------------*/ } .p-homeGrade__cardHead { margin-bottom: 40px; } @media (width < 992px) { .p-homeGrade__cardHead { margin-bottom: 20px; } } @media (width < 768px) { .p-homeGrade__cardHead { margin-bottom: 35px; } } .p-homeGrade__cardEn { margin-bottom: 10px; font-family: 'Raleway', sans-serif; font-weight: 600; font-size: var(--text14); line-height: 1; color: var(--mainBlue); } .p-homeGrade__cardTitle { font-weight: 700; font-size: var(--text24); line-height: 2; } @media (width < 992px) { .p-homeGrade__cardTitle { line-height: 1.75; } } .p-homeGrade { /*-------------------------------------------- カード右上のキャラクター画像 --------------------------------------------*/ } .p-homeGrade__cardImg { position: absolute; top: 30px; right: 30px; width: 21.2121212121%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; } @media (width < 992px) { .p-homeGrade__cardImg { top: 20px; right: 20px; width: 90px; } } @media (width < 768px) { .p-homeGrade__cardImg { width: 80px; top: 30px; right: 20px; } } .p-homeGrade { /*-------------------------------------------- 3つの小カード（学年別キャッチコピー） --------------------------------------------*/ } .p-homeGrade__itemList { margin-bottom: 40px; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (width < 992px) { .p-homeGrade__itemList { gap: 15px; margin-bottom: 30px; } } @media (width < 768px) { .p-homeGrade__itemList { gap: 10px; } } .p-homeGrade__item { position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; background: var(--itemBg); border-radius: 8px; padding: 30px 20px 20px 30px; min-height: 110px; } @media (width < 768px) { .p-homeGrade__item { padding: 20px 5px 15px 12px; } } .p-homeGrade { /*-------------------------------------------- タグ（小学生 1年など） Method セクションと同様に要素で shape を表示し、テキストは absolute で重ねる構造 --------------------------------------------*/ } .p-homeGrade__itemTag { position: absolute; top: 0; left: 5%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 90px; aspect-ratio: 90/35; -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08)); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08)); background-image: url(../img/home/grade/item_tag.svg); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; display: grid; place-items: center; } @media (width < 768px) { .p-homeGrade__itemTag { width: 80%; } } .p-homeGrade__itemTagText { 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; padding-bottom: 5px; color: var(--mainBlue); font-weight: 700; font-size: var(--text14); line-height: 1.4; white-space: nowrap; } .p-homeGrade__itemText { font-weight: 500; font-size: var(--text16); line-height: 1.75; } @media (width < 992px) { .p-homeGrade__itemText { font-size: var(--text14); } } @media (width < 768px) { .p-homeGrade__itemText { font-size: 13px; } } .p-homeGrade { /*-------------------------------------------- Scroll インジケーター（右側 sticky） --------------------------------------------*/ } .p-homeGrade__scroll { position: -webkit-sticky; position: sticky; top: 50%; margin-right: -5%; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-item-align: start; align-self: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 16px; height: -webkit-max-content; height: -moz-max-content; height: max-content; color: var(--mainBlue); pointer-events: none; } @media (width < 1300px) { .p-homeGrade__scroll { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-right: -2.5%; } } @media (width < 992px) { .p-homeGrade__scroll { display: none; } } .p-homeGrade__scrollIcon { display: block; width: 26px; height: 46px; background: url(../img/home/grade/scroll.svg) center/contain no-repeat; } .p-homeGrade__scrollText { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: var(--text14); line-height: 1.5; color: var(--mainBlue); } /*-------------------------------------------- HOME INFO（開校情報） --------------------------------------------*/ .p-homeInfo { position: relative; background: var(--subYellow); padding-top: max(180px, 12.5vw); padding-bottom: max(150px, 10.4166666667vw); z-index: 1; } @media (width < 992px) { .p-homeInfo { padding-block: 180px 100px; } } @media (width < 768px) { .p-homeInfo { padding: 70px 0; } } .p-homeInfo__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (width < 992px) { .p-homeInfo__inner { display: grid; -webkit-box-pack: inherit; -ms-flex-pack: inherit; justify-content: inherit; gap: 20px; } } .p-homeInfo { /*-------------------------------------------- 左カラム（タイトル + CTA） --------------------------------------------*/ } .p-homeInfo__side { width: 100%; max-width: 240px; display: grid; row-gap: 70px; } @media (width < 992px) { .p-homeInfo__side { display: contents; } } @media (width < 992px) { .p-homeInfo__more { grid-row: 3/4; margin-top: 10px; } } .p-homeInfo { /*-------------------------------------------- 右カラム（2カラムリスト） --------------------------------------------*/ } .p-homeInfo__list { max-width: 840px; width: 70%; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, auto); grid-auto-flow: column; -webkit-column-gap: 4.7619047619%; -moz-column-gap: 4.7619047619%; column-gap: 4.7619047619%; } @media (width < 992px) { .p-homeInfo__list { max-width: none; width: 100%; } } @media (width < 768px) { .p-homeInfo__list { grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-flow: row; } } .p-homeInfo__item { border-bottom: 1px solid var(--borderBlue); } .p-homeInfo__item:nth-child(1), .p-homeInfo__item:nth-child(6) { border-top: 1px solid var(--borderBlue); } @media (width < 768px) { .p-homeInfo__item:nth-child(6) { border-top: none; } .p-homeInfo__item:nth-child(n+6) { display: none; } } .p-homeInfo__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; padding: 15px; color: inherit; -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) { .p-homeInfo__link { padding: 10px; display: grid; grid-template-columns: 1fr auto; gap: 0; } } @media (hover: hover) { .p-homeInfo__link:hover { opacity: 0.5; } } .p-homeInfo__date { font-weight: 700; font-size: var(--text14); line-height: 1.5; color: var(--mainBlue); } @media (width < 768px) { .p-homeInfo__date { font-size: 13px; grid-column: 1/2; grid-row: 1/2; } } .p-homeInfo__text { font-weight: 500; font-size: var(--text16); line-height: 1.75; } @media (width < 768px) { .p-homeInfo__text { font-size: 14px; grid-column: 1/2; grid-row: 2/3; } } .p-homeInfo__arrow { -webkit-mask-image: var(--arrow_r); mask-image: var(--arrow_r); width: 7px; 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; margin-left: auto; } @media (width < 768px) { .p-homeInfo__arrow { grid-column: 2/3; grid-row: 1/3; } } /*-------------------------------------------- HOME METHOD（ショウイン式®わかるの3大法則） --------------------------------------------*/ .p-homeMethod { position: relative; background-color: var(--subBlue); padding-top: max(240px, 16.6666666667vw); padding-bottom: max(70px, 4.8611111111vw); } @media (width < 768px) { .p-homeMethod { padding: 143px 0 70px; } } .p-homeMethod { /*-------------------------------------------- HEADER（タイトル + リード文） --------------------------------------------*/ } .p-homeMethod__intro { display: grid; grid-template-columns: auto 1fr; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 50px; } @media (width < 992px) { .p-homeMethod__intro { grid-template-columns: 1fr; row-gap: 20px; } } @media (width < 768px) { .p-homeMethod__intro { row-gap: 30px; } } .p-homeMethod__lead { max-width: 700px; margin-left: auto; padding-top: 45px; font-weight: 500; font-size: var(--text16); line-height: 2.2; } @media (width < 992px) { .p-homeMethod__lead { margin-left: 0; max-width: none; padding-top: 0; } } @media (width < 768px) { .p-homeMethod__lead { font-size: 16px; } } .p-homeMethod { /*-------------------------------------------- メインボード（薄い青の角丸ボックス） --------------------------------------------*/ } .p-homeMethod__board { position: relative; background-color: #007DD8; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.1rem, rgba(255, 255, 255, 0.1)), color-stop(0.1rem, transparent)), -webkit-gradient(linear, left top, right top, color-stop(0.1rem, rgba(255, 255, 255, 0.1)), color-stop(0.1rem, transparent)), url("data:image/svg+xml;utf8,"); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0.1rem, transparent 0.1rem), linear-gradient(to right, rgba(255, 255, 255, 0.1) 0.1rem, transparent 0.1rem), url("data:image/svg+xml;utf8,"); background-size: 60px 60px, 60px 60px, 300px 300px; background-repeat: repeat, repeat, repeat; } @media (width < 768px) { .p-homeMethod__board { background-size: 30px 30px, 30px 30px, 300px 300px; } } .p-homeMethod__board { border-radius: 0 60px 0 60px; padding: 4.1666666667% 3.3333333333%; } @media (width < 768px) { .p-homeMethod__board { padding: 30px 20px 60px; } } .p-homeMethod__boardCopy { max-width: 386px; width: 90%; margin-inline: auto; margin-bottom: 45px; -webkit-filter: drop-shadow(0 0 20px rgba(0, 74, 128, 0.5)); filter: drop-shadow(0 0 20px rgba(0, 74, 128, 0.5)); } @media (width < 768px) { .p-homeMethod__boardCopy { margin-bottom: 20px; } } .p-homeMethod { /*-------------------------------------------- 3つの「わかる」リスト --------------------------------------------*/ } .p-homeMethod__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; } @media (width < 768px) { .p-homeMethod__list { grid-template-columns: 1fr; row-gap: 65px; } } .p-homeMethod__item { 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; } @media (width < 768px) { .p-homeMethod__item { -webkit-column-gap: 6px; -moz-column-gap: 6px; column-gap: 6px; width: 80%; margin-inline: auto; } } .p-homeMethod__item + .p-homeMethod__item::before { content: ""; position: absolute; top: 50%; right: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 23.2142857143%; aspect-ratio: 78/50; background-image: url(../img/home/method/arrow.webp); background-size: contain; background-position: center; background-repeat: no-repeat; } @media (width < 768px) { .p-homeMethod__item + .p-homeMethod__item::before { top: -32.5px; right: auto; left: 50%; -webkit-transform: translate(-50%, 0%) rotate(90deg); transform: translate(-50%, 0%) rotate(90deg); width: 50px; } } .p-homeMethod { /*-------------------------------------------- 「わかる X」タグ（フキダシ形状） --------------------------------------------*/ } .p-homeMethod__itemTag { display: inline-block; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; max-width: 80px; margin-bottom: 10px; position: absolute; top: 0%; left: 0; } .p-homeMethod__itemTextFrame { padding-top: 50px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; position: relative; } @media (width < 576px) { .p-homeMethod__itemTextFrame { width: 100%; margin-inline: inherit; } } .p-homeMethod { /*-------------------------------------------- タイトル（わかる ... 始めますなど） --------------------------------------------*/ } .p-homeMethod__itemText { margin-bottom: 15px; font-weight: 700; font-size: var(--text20); line-height: 1.5; color: var(--white); text-align: center; } @media (width < 768px) { .p-homeMethod__itemText { text-align: left; margin-bottom: 0; font-size: 20px; } } .p-homeMethod__itemTextAccent { color: var(--mainYellow); } .p-homeMethod { /*-------------------------------------------- 画像 --------------------------------------------*/ } .p-homeMethod__itemImg { width: 100%; max-width: 280px; margin-inline: auto; } @media (width < 768px) { .p-homeMethod__itemImg { max-width: 180px; } } .p-homeMethod { /*-------------------------------------------- CTAボタン（青地+白文字） --------------------------------------------*/ } .p-homeMethod__ctaWrap { margin-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (width < 768px) { .p-homeMethod__ctaWrap { margin-top: 30px; } } /*-------------------------------------------- HOME NEWS（お知らせ） --------------------------------------------*/ .p-homeNews { position: relative; background: var(--subBlue); padding-top: max(90px, 6.25vw); padding-bottom: max(212px, 14.7222222222vw); } @media (width < 768px) { .p-homeNews { padding: 50px 0 70px; } } .p-homeNews__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 8.3333333333%; } @media (width < 1300px) { .p-homeNews__inner { gap: 40px; } } @media (width < 992px) { .p-homeNews__inner { display: grid; -webkit-box-pack: inherit; -ms-flex-pack: inherit; justify-content: inherit; gap: 20px; } } .p-homeNews { /*-------------------------------------------- 左カラム（タイトル + CTA） --------------------------------------------*/ } .p-homeNews__side { width: 100%; max-width: 240px; display: grid; row-gap: 70px; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } @media (width < 992px) { .p-homeNews__side { display: contents; } } @media (width < 992px) { .p-homeNews__more { grid-row: 3/4; } } @media (width < 768px) { .p-homeNews__more { margin-top: 10px; } } .p-homeNews { /*-------------------------------------------- 右カラム（リスト） --------------------------------------------*/ } .p-homeNews__list { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; max-width: 860px; border-top: 1px solid var(--borderBlue); } @media (width < 992px) { .p-homeNews__list { max-width: none; width: 100%; } } .p-homeNews__item { border-bottom: 1px solid var(--borderBlue); } .p-homeNews__link { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; padding: 15px; color: inherit; text-decoration: none; -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 < 992px) { .p-homeNews__link { padding: 15px 10px; gap: 8px; } } @media (width < 768px) { .p-homeNews__link { padding: 10px; } } @media (hover: hover) { .p-homeNews__link:hover { opacity: 0.5; } } .p-homeNews__main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; } @media (width < 768px) { .p-homeNews__main { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; row-gap: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .p-homeNews__date { -ms-flex-negative: 0; flex-shrink: 0; font-weight: 700; font-size: var(--text14); line-height: 1.5; color: var(--mainBlue); } @media (width < 992px) { .p-homeNews__date { font-size: 12px; } } @media (width < 768px) { .p-homeNews__date { font-size: 13px; } } .p-homeNews__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; 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: start; -ms-flex-align: start; align-items: flex-start; gap: 5px; } @media (width < 992px) { .p-homeNews__body { display: contents; } } .p-homeNews__category { 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; min-width: 50px; height: 24px; padding: 0 10px 2px; background: var(--white); border-radius: 100vmax; font-weight: 500; font-size: var(--text13); color: var(--mainBlue); white-space: nowrap; } @media (width < 768px) { .p-homeNews__category { font-size: 13px; height: 20px; line-height: 1; } } .p-homeNews__text { width: 100%; font-weight: 500; font-size: var(--text16); line-height: 1.75; color: var(--fontColor); } @media (width < 768px) { .p-homeNews__text { font-size: 14px; } } .p-homeNews__arrow { -webkit-mask-image: var(--arrow_r); mask-image: var(--arrow_r); width: 7px; 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; margin-left: auto; } /*-------------------------------------------- HOME PICKUP（ピックアップ + グループ事業） --------------------------------------------*/ .p-homePickup { position: relative; background-color: var(--subBlue); padding-block: max(100px, 6.9444444444vw); } @media (width < 992px) { .p-homePickup { padding: 60px 0; } } @media (width < 768px) { .p-homePickup { padding: 50px 0; } } .p-homePickup__inner { position: relative; } .p-homePickup { /*-------------------------------------------- HEADER（Pick up / ピックアップ） --------------------------------------------*/ } .p-homePickup__head { margin-bottom: 50px; } @media (width < 768px) { .p-homePickup__head { margin-bottom: 30px; } } .p-homePickup { /*-------------------------------------------- SLIDER（Splide カルーセル） --------------------------------------------*/ } .p-homePickup__slider { position: relative; margin-top: 50px; } @media (width < 768px) { .p-homePickup__slider { margin-top: 30px; } } .p-homePickup__slider .splide__track { overflow: visible; } .p-homePickup__slide { width: 100%; max-width: 500px; } @media (width < 768px) { .p-homePickup__slide { max-width: 300px; } } .p-homePickup__slideLink { display: grid; -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); border: 2px solid var(--line); border-radius: 10px; overflow: hidden; } @media (hover: hover) { .p-homePickup__slideLink:hover { opacity: 0.5; } } .p-homePickup { /*-------------------------------------------- ARROWS（左右の矢印ボタン） --------------------------------------------*/ } .p-homePickup__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-homePickup__arrows { margin-top: 15px; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } } .p-homePickup__arrow { position: static; 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); } @media (width < 768px) { .p-homePickup__arrow { width: 40px; } } .p-homePickup__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-homePickup__arrow.--next::after { -webkit-mask-image: var(--arrow_r); mask-image: var(--arrow_r); } .p-homePickup__arrow.--prev::after { -webkit-mask-image: var(--arrow_l); mask-image: var(--arrow_l); } .p-homePickup__arrow:disabled { cursor: default; opacity: 0.4; } @media (hover: hover) { .p-homePickup__arrow:hover:not(:disabled) { background: var(--white); color: var(--mainBlue); } } .p-homePickup { /*-------------------------------------------- PAGINATION（下中央のドット） --------------------------------------------*/ } .p-homePickup__pagination { position: absolute; bottom: 24px; -webkit-transform: translateY(50%); transform: translateY(50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; width: 100%; } @media (width < 768px) { .p-homePickup__pagination { bottom: 15px; gap: 10px; position: static; margin-top: 20px; } } .p-homePickup__pagination .splide__pagination__page { display: block; width: 8px; height: 8px; background: var(--white); border-radius: 50%; opacity: 1; cursor: pointer; -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-homePickup__pagination .splide__pagination__page.is-active { background: var(--mainBlue); -webkit-transform: none; transform: none; } @media (hover: hover) { .p-homePickup__pagination .splide__pagination__page:hover { background: var(--mainBlue); } } .p-homePickup { /*-------------------------------------------- GROUP（グループ事業ボックス） --------------------------------------------*/ } .p-homePickup__group { margin-top: 120px; 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; } @media (width < 768px) { .p-homePickup__group { background-size: 30px 30px, 30px 30px, 300px 300px; } } .p-homePickup__group { border-radius: 20px; } @media (992px <= width) { .p-homePickup__group { padding: 5% 4.1666666667%; } } @media (width < 992px) { .p-homePickup__group { margin-top: 60px; padding: 30px 20px; border-radius: 12px; } } @media (width < 768px) { .p-homePickup__group { margin-top: 40px; padding: 30px 20px; } } .p-homePickup__groupInner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (width < 992px) { .p-homePickup__groupInner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .p-homePickup__groupHead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px; } @media (width < 992px) { .p-homePickup__groupHead { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .p-homePickup__groupEn { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: var(--text20); line-height: 1; color: var(--mainBlue); } @media (width < 768px) { .p-homePickup__groupEn { font-size: 18px; } } .p-homePickup__groupTitle { margin: 0; font-family: 'Zen Kaku Gothic New', sans-serif; font-weight: 700; font-size: var(--text30); line-height: 1.5; } @media (width < 768px) { .p-homePickup__groupTitle { font-size: 26px; } } .p-homePickup__groupList { 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; width: 63.6363636364%; --w: 700; margin-inline: auto; } @media (width < 992px) { .p-homePickup__groupList { width: 100%; } } .p-homePickup__groupRow { 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; } @media (width < 768px) { .p-homePickup__groupRow { row-gap: 8px; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; max-width: 400px; margin-inline: auto; } } .p-homePickup__groupItem { -ms-flex-negative: 0; flex-shrink: 0; } .p-homePickup__groupItem.--lg { width: calc(340 / var(--w) * 100%); } @media (width < 768px) { .p-homePickup__groupItem.--lg { width: 100%; } } .p-homePickup__groupItem.--sm { width: calc(198 / var(--w) * 100%); } @media (width < 768px) { .p-homePickup__groupItem.--sm { width: calc(50% - 3px); } } .p-homePickup__groupItem.--md { width: calc(226 / var(--w) * 100%); } @media (width < 768px) { .p-homePickup__groupItem.--md { width: calc(50% - 3px); } } .p-homePickup__groupLink { display: block; width: 100%; height: 100%; line-height: 0; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; -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); } .p-homePickup__groupLink > img { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media (hover: hover) { .p-homePickup__groupLink:hover { opacity: 0.5; } } /*-------------------------------------------- HOME POINT（松陰塾の特徴） --------------------------------------------*/ .p-homePoint { position: relative; background: var(--subBlue); padding-top: max(192px, 13.3333333333vw); padding-bottom: max(120px, 8.3333333333vw); } @media (width < 768px) { .p-homePoint { padding: 70px 0; } } .p-homePoint { /*-------------------------------------------- HEADER（Point / 松陰塾の特徴） --------------------------------------------*/ } .p-homePoint__head { margin-bottom: 35px; } @media (width < 768px) { .p-homePoint__head { margin-bottom: 30px; } } .p-homePoint { /*-------------------------------------------- INTRO（リード文 + CTA） --------------------------------------------*/ } .p-homePoint__intro { 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: 15px; margin-bottom: 90px; } @media (width < 992px) { .p-homePoint__intro { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 20px; margin-bottom: 50px; } } @media (width < 768px) { .p-homePoint__intro { gap: 30px; } } .p-homePoint__lead { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; font-weight: 500; font-size: var(--text16); line-height: 2.2; } @media (width < 768px) { .p-homePoint__lead { font-size: 16px; } } .p-homePoint { /*-------------------------------------------- COMPARE（比較表） --------------------------------------------*/ } .p-homePoint__compare { margin-bottom: 130px; max-width: 1000px; margin-inline: auto; } @media (width < 992px) { .p-homePoint__compare { margin-bottom: 60px; } } @media (width < 768px) { .p-homePoint__compare { margin-bottom: 50px; max-width: 500px; margin-inline: auto; } } .p-homePoint { /*-------------------------------------------- FEATURE（毎日通い放題ボード） --------------------------------------------*/ } .p-homePoint__featureBoard { position: relative; border-radius: 20px; padding: 60px 60px 40px; background-image: url(../img/home/point/bg.svg); background-size: auto 100%; background-repeat: no-repeat; background-position: left; -webkit-filter: drop-shadow(5px 5px 15px rgba(0, 74, 128, 0.15)); filter: drop-shadow(5px 5px 15px rgba(0, 74, 128, 0.15)); } @media (width < 1300px) { .p-homePoint__featureBoard { padding: 60px 40px 40px; } } @media (width < 992px) { .p-homePoint__featureBoard { padding: 50px 20px 50px 50px; border-radius: 15px; } } @media (width < 768px) { .p-homePoint__featureBoard { padding: 40px 20px 64px 20px; background-image: url(../img/home/point/bg_sp.svg); border-radius: 10px; } } .p-homePoint__featureCopy { width: 45%; margin-inline: auto; margin-bottom: 40px; } @media (width < 992px) { .p-homePoint__featureCopy { margin-bottom: 20px; } } @media (width < 768px) { .p-homePoint__featureCopy { width: 85%; max-width: 450px; } } .p-homePoint__featureBody { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 60px; } @media (width < 1300px) { .p-homePoint__featureBody { gap: 30px; } } @media (width < 992px) { .p-homePoint__featureBody { gap: 30px; } } @media (width < 768px) { .p-homePoint__featureBody { display: grid; gap: 0px; } } .p-homePoint__featureText { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; } @media (width < 768px) { .p-homePoint__featureText { display: contents; } } .p-homePoint__featureTitle { margin-bottom: 20px; font-weight: 700; font-size: var(--text24); line-height: 1.75; } @media (width < 768px) { .p-homePoint__featureTitle { margin-bottom: 10px; } } .p-homePoint__featureDesc { margin-bottom: 30px; font-weight: 500; font-size: var(--text16); line-height: 2.2; } @media (width < 992px) { .p-homePoint__featureDesc { font-size: 14px; } } @media (width < 768px) { .p-homePoint__ctaFrame { grid-row: 7/8; } } .p-homePoint { /*-------------------------------------------- SURVEY（アンケート結果） --------------------------------------------*/ } .p-homePoint__survey { -ms-flex-negative: 0; flex-shrink: 0; width: 46.2962962963%; } @media (width < 768px) { .p-homePoint__survey { width: 100%; } } .p-homePoint__surveyTitle { margin-bottom: 20px; font-weight: 700; text-align: center; font-size: var(--text17); line-height: 1.75; } @media (width < 768px) { .p-homePoint__surveyTitle { font-size: 17px; } } .p-homePoint__graphImg { width: 100%; max-width: 530px; margin-inline: auto; } @media (width < 768px) { .p-homePoint__graphImg { margin-bottom: 20px; } } .p-homePoint__surveyNote { margin-top: 15px; font-weight: 500; font-size: var(--text13); line-height: 1.75; color: #777; text-align: right; } @media (width < 992px) { .p-homePoint__surveyNote { font-size: 11px; text-align: center; } } @media (width < 768px) { .p-homePoint__surveyNote { margin-bottom: 40px; } } /*-------------------------------------------- HOME SCROLL IMG（メソッド上部の横スクロール画像）画像を2回並べて -50% 動かすことでシームレスにループ --------------------------------------------*/ .p-homeScrollImg { overflow: hidden; width: 100%; position: absolute; top: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .p-homeScrollImg__track { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: -webkit-max-content; width: -moz-max-content; width: max-content; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: bgTextScroll 60s linear infinite; animation: bgTextScroll 60s linear infinite; } @media (width < 992px) { .p-homeScrollImg__track { -webkit-animation-duration: 40s; animation-duration: 40s; } } .p-homeScrollImg__img { display: block; -ms-flex-negative: 0; flex-shrink: 0; width: auto; height: 300px; } @media (width < 992px) { .p-homeScrollImg__img { height: 250px; } } @media (width < 768px) { .p-homeScrollImg__img { height: 210px; } } /*-------------------------------------------- HOME SEARCH（校舎を探す） --------------------------------------------*/ .p-homeSearch { position: relative; background-color: var(--white); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.1rem, rgba(0, 126, 219, 0.06)), color-stop(0.1rem, transparent)), url("data:image/svg+xml;utf8,"); background-image: linear-gradient(to bottom, rgba(0, 126, 219, 0.06) 0.1rem, transparent 0.1rem), url("data:image/svg+xml;utf8,"); background-size: 100% 30px, 300px 300px; background-repeat: repeat, repeat; margin-top: calc(var(--maskDividerBottom) * -1); padding-top: max(180px, 12.5vw); padding-bottom: max(250px, 17.3611111111vw); } @media (width < 768px) { .p-homeSearch { padding: 160px 0 150px; } } .p-homeSearch__rule { pointer-events: none; position: absolute; top: 0; left: 70px; width: 20px; height: 100%; border-left: 2px solid var(--lineRed); border-right: 2px solid var(--lineRed); z-index: 0; } @media (width < 768px) { .p-homeSearch__rule { display: none; } } .p-homeSearch__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; } @media (width < 992px) { .p-homeSearch__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 40px; } } .p-homeSearch { /*-------------------------------------------- HEADER（Search / 校舎を探す） --------------------------------------------*/ } .p-homeSearch__head { width: 25%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; position: relative; z-index: 1; } @media (width < 992px) { .p-homeSearch__head { width: 100%; } } .p-homeSearch { /*-------------------------------------------- BODY（右側コンテンツ） --------------------------------------------*/ } .p-homeSearch__body { display: grid; gap: 20px; width: 100%; max-width: 740px; margin-inline: auto; position: relative; z-index: 1; } @media (width < 992px) { .p-homeSearch__body { max-width: none; } } .p-homeSearch { /*-------------------------------------------- カード（都道府県 / 地図） --------------------------------------------*/ } .p-homeSearch__cardList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (width < 768px) { .p-homeSearch__cardList { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media (width < 576px) { .p-homeSearch__cardList { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .p-homeSearch__card { position: relative; background: var(--subYellow02); border-radius: 20px; padding: 11.1111111111% 13.8888888889%; 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: start; -ms-flex-align: start; align-items: flex-start; gap: 15px; } @media (width < 768px) { .p-homeSearch__card { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; padding: min(20px, 5.7142857143%) 20px; gap: 10px; } } .p-homeSearch__cardHead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } @media (width < 576px) { .p-homeSearch__cardHead { margin-inline: auto; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; } } .p-homeSearch__cardIcon { 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; -ms-flex-negative: 0; flex-shrink: 0; width: 40px; } .p-homeSearch__cardIcon svg { width: 100%; } @media (width < 768px) { .p-homeSearch__cardIcon { width: 30px; } } .p-homeSearch__cardTitle { font-weight: 700; font-size: var(--text24); line-height: 1.5; } @media (width < 768px) { .p-homeSearch__cardTitle { font-size: 18px; } } .p-homeSearch__cardNote { font-weight: 500; font-size: var(--text14); line-height: 1.5; } @media (width < 768px) { .p-homeSearch__cardNote { font-size: 13px; } } .p-homeSearch { /*-------------------------------------------- キーワード検索カード --------------------------------------------*/ } .p-homeSearch__keyword { background: var(--subYellow02); border-radius: 20px; padding: 40px; } @media (width < 992px) { .p-homeSearch__keyword { padding: 20px 15px; } } @media (width < 768px) { .p-homeSearch__keyword { padding: min(20px, 5.7142857143%) 20px; } } .p-homeSearch__keywordTitle { margin: 0 0 25px; font-weight: 700; font-size: var(--text24); line-height: 1.5; } @media (width < 992px) { .p-homeSearch__keywordTitle { margin-bottom: 15px; } } @media (width < 768px) { .p-homeSearch__keywordTitle { font-size: 18px; text-align: center; margin: 0 0 10px; } } .p-homeSearch__keywordForm { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .p-homeSearch__keywordInputWrap { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 60px; background: var(--white); border: 2px solid var(--mainBlue); border-radius: 10px; padding: 0 15px 0 50px; } @media (width < 768px) { .p-homeSearch__keywordInputWrap { padding-left: 30px; height: 50px; } } .p-homeSearch__keywordInputIcon { position: absolute; top: 50%; left: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 20px; aspect-ratio: 1; pointer-events: none; } @media (width < 992px) { .p-homeSearch__keywordInputIcon { left: 12px; width: 16px; } } .p-homeSearch__keywordInputIcon > svg { display: block; width: 100%; height: 100%; color: var(--mainBlue); } .p-homeSearch__keywordInput { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; width: 100%; height: 100%; background: transparent; font-weight: 500; font-size: var(--text18); line-height: 1.5; } @media (width < 768px) { .p-homeSearch__keywordInput { font-size: 14px; } } .p-homeSearch__keywordInput::-webkit-input-placeholder { color: #989898; } .p-homeSearch__keywordInput::-moz-placeholder { color: #989898; } .p-homeSearch__keywordInput::-ms-input-placeholder { color: #989898; } .p-homeSearch__keywordInput::placeholder { color: #989898; } .p-homeSearch__keywordSubmit { -ms-flex-negative: 0; flex-shrink: 0; width: 100px; height: 60px; padding: 10px 20px; background: var(--mainBlue); border-radius: 10px; color: var(--white); font-weight: 700; font-size: var(--text18); line-height: 1.5; cursor: pointer; text-align: center; overflow: hidden; position: relative; } .p-homeSearch__keywordSubmit span { position: relative; z-index: 1; } .p-homeSearch__keywordSubmit::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; } @media (width < 768px) { .p-homeSearch__keywordSubmit { padding: 0; width: 60px; height: 50px; font-size: 14px; } } @media (hover: hover) { .p-homeSearch__keywordSubmit:hover::before { -webkit-transform: translateY(0); transform: translateY(0); } } .p-homeSearch__keywordNote { margin-top: 15px; font-weight: 500; font-size: var(--text14); line-height: 1.5; } @media (width < 768px) { .p-homeSearch__keywordNote { font-size: 13px; } } .p-homeSearch { /*-------------------------------------------- オンライン学習（松陰スタディ） --------------------------------------------*/ } .p-homeSearch__online { margin-top: 20px; 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: start; -ms-flex-align: start; align-items: flex-start; gap: 15px; } @media (width < 768px) { .p-homeSearch__online { font-size: 13px; row-gap: 20px; } } .p-homeSearch__onlineText { font-weight: 700; font-size: var(--text16); line-height: 1.5; } @media (width < 768px) { .p-homeSearch__onlineText { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; } } /*-------------------------------------------- HOME TRIAL（無料体験受付中） --------------------------------------------*/ .p-homeTrial { position: relative; background: var(--subYellow); padding-bottom: max(130px, 9.0277777778vw); } @media (width < 768px) { .p-homeTrial { padding-block: 75px; background-color: transparent; } } .p-homeTrial { /*-------------------------------------------- 黄色のボード --------------------------------------------*/ } .p-homeTrial__board { position: relative; background-color: #FFF586; background-image: linear-gradient(to bottom, rgba(97, 97, 97, 0.08) 2px, transparent 2px), url("data:image/svg+xml;utf8,"); background-size: 100% 24.8px, 300px 300px; background-repeat: repeat, repeat; border-radius: 30px; padding-block: 60px 70px; } @media (width < 768px) { .p-homeTrial__board { border-radius: 20px; padding: 50px 20px; } } .p-homeTrial { /*-------------------------------------------- タイトル（無料体験受付中） --------------------------------------------*/ } .p-homeTrial__title { font-weight: 700; font-size: var(--text46); line-height: 1.5; color: var(--mainBlue); text-align: center; } @media (width < 768px) { .p-homeTrial__title { font-size: 30px; } } .p-homeTrial { /*-------------------------------------------- 右上の生徒イラスト --------------------------------------------*/ } .p-homeTrial__illust { position: absolute; top: 0; right: 6.6666666667%; width: 10.8333333333%; -webkit-transform: translateY(-15%); transform: translateY(-15%); z-index: 2; pointer-events: none; } @media (width < 768px) { .p-homeTrial__illust { right: 20px; width: 80px; -webkit-transform: translateY(-55%); transform: translateY(-55%); } } .p-homeTrial { /*-------------------------------------------- 写真＋フロー --------------------------------------------*/ } .p-homeTrial__flow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 5%; margin-top: 50px; } @media (width < 992px) { .p-homeTrial__flow { gap: 3.5%; } } @media (width < 768px) { .p-homeTrial__flow { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; margin-top: 20px; } } .p-homeTrial__photo { width: 47.5%; border-radius: 0 30px 30px 0; overflow: hidden; } @media (width < 768px) { .p-homeTrial__photo { width: 100%; border-radius: 20px; max-width: 570px; margin-inline: auto; } } .p-homeTrial { /*-------------------------------------------- フロー（右側コンテンツ） --------------------------------------------*/ } .p-homeTrial__steps { padding-right: 5.8333333333%; width: 47.5%; } @media (width < 768px) { .p-homeTrial__steps { width: 100%; padding-right: 0; } } @media (width < 768px) { .p-homeTrial__stepsTitle { display: block; text-align: center; } } .p-homeTrial__stepsTitleMain { font-weight: 700; font-size: var(--text24); line-height: 1.5; } @media (width < 768px) { .p-homeTrial__stepsTitleMain { font-size: 18px; } } .p-homeTrial__stepsTitleSub { font-weight: 700; font-size: var(--text18); line-height: 1.5; } @media (width < 768px) { .p-homeTrial__stepsTitleSub { font-size: 14px; } } .p-homeTrial__stepList { margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5%; } @media (width < 768px) { .p-homeTrial__stepList { display: grid; grid-template-columns: repeat(2, 1fr); -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; row-gap: 25px; justify-items: center; margin-top: 20px; max-width: 310px; margin-inline: auto; } } .p-homeTrial__stepIcon { width: 100%; max-width: 100px; margin-inline: auto; } .p-homeTrial__step { position: relative; width: -webkit-max-content; width: -moz-max-content; width: max-content; display: grid; row-gap: 3px; } .p-homeTrial__stepText { font-size: var(--text15); font-weight: 700; line-height: 1.5; color: var(--mainBlue); text-align: center; } @media (width < 768px) { .p-homeTrial__stepText { font-size: 16px; } } .p-homeTrial__stepsDesc { margin-top: 20px; } .p-homeTrial__stepsDesc > p { font-weight: 500; font-size: var(--text16); line-height: 2; } @media (width < 768px) { .p-homeTrial__stepsDesc > p { font-size: 16px; } } .p-homeTrial { /*-------------------------------------------- カード（学力診断カルテ / 入塾ハンドブック） --------------------------------------------*/ } .p-homeTrial__cardList { margin-top: 110px; max-width: 1140px; padding-inline: 40px; margin-inline: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (width < 992px) { .p-homeTrial__cardList { padding-inline: 30px; } } @media (width < 768px) { .p-homeTrial__cardList { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; max-width: none; padding-inline: 0; margin-top: 40px; } } .p-homeTrial__card { position: relative; width: 47.1698113208%; max-width: 100%; background: var(--subBlue); border-radius: 0 30px 0 30px; padding: 0 3.7735849057% 3.7735849057% 3.7735849057%; } @media (width < 992px) { .p-homeTrial__card { width: 48.5%; padding: 0 2.358490566% 3.7735849057% 2.358490566%; } } @media (width < 768px) { .p-homeTrial__card { width: 100%; padding: 0 15px 30px; } } .p-homeTrial__cardHead { width: 100%; max-width: 90%; margin-inline: auto; background: var(--subBlue02); border-radius: 0 0 15px 15px; 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: 10px; padding: 8px 10px 10px 10px; } @media (width < 992px) { .p-homeTrial__cardHead { max-width: none; } } @media (width < 768px) { .p-homeTrial__cardHead { max-width: 80.6451612903%; gap: 12px; } } .p-homeTrial__cardBadge { 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: 54px; aspect-ratio: 27/14; padding: 0 10px 2px; background: var(--mainYellow); border-radius: 100vmax; color: var(--mainBlue); font-weight: 700; font-size: var(--text15); line-height: 1.5; } @media (width < 768px) { .p-homeTrial__cardBadge { width: 48px; font-size: 13px; } } .p-homeTrial__cardTitle { font-weight: 700; font-size: var(--text24); line-height: 1.75; color: var(--mainBlue); } @media (width < 768px) { .p-homeTrial__cardTitle { font-size: 18px; } } .p-homeTrial__cardLead { font-weight: 700; font-size: var(--text18); line-height: 2; text-align: center; margin-top: 17px; } @media (width < 992px) { .p-homeTrial__cardLead { line-height: 1.4; } } @media (width < 768px) { .p-homeTrial__cardLead { font-size: 16px; line-height: 1.75; margin-top: 10px; } } .p-homeTrial__cardBody { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; margin-top: 15px; } @media (width < 768px) { .p-homeTrial__cardBody { -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: 10px; margin-top: 10px; } } .p-homeTrial__cardText { font-weight: 500; font-size: var(--text14); line-height: 2; min-width: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media (width < 768px) { .p-homeTrial__cardText { font-size: 14px; width: 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .p-homeTrial__cardImg.--karte { width: 42.8571428571%; } @media (width < 768px) { .p-homeTrial__cardImg.--karte { width: 180px; } } .p-homeTrial__cardImg.--book { width: 24.7619047619%; } @media (width < 768px) { .p-homeTrial__cardImg.--book { width: 104px; } } @media (width < 768px) { .p-homeTrial__cardImg { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .p-homeTrial { /*-------------------------------------------- CTA ボタン --------------------------------------------*/ } .p-homeTrial__ctaWrap { margin-top: 50px; } @media (width < 768px) { .p-homeTrial__ctaWrap { margin-top: 40px; } } /*-------------------------------------------- HOME VOICE（利用者の声 + テレビCM） --------------------------------------------*/ .p-homeVoice { position: relative; z-index: 2; background-color: var(--mainBlue); padding-top: max(70px, 4.8611111111vw); padding-bottom: max(70px, 4.8611111111vw); } .p-homeVoice::after, .p-homeVoice::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-homeVoice::after { -webkit-mask-image: var(--maskBottomNew); mask-image: var(--maskBottomNew); top: calc(100% - 1px); -webkit-mask-position: center bottom; mask-position: center bottom; } @media (width < 768px) { .p-homeVoice::after { -webkit-mask-position: center calc(0% - 1px); mask-position: center calc(0% - 1px); } } .p-homeVoice::before { -webkit-mask-image: var(--maskTopNew); mask-image: var(--maskTopNew); bottom: calc(100% - 1px); -webkit-mask-position: center top; mask-position: center top; } @media (width < 768px) { .p-homeVoice::before { -webkit-mask-position: center calc(100% + 1px); mask-position: center calc(100% + 1px); } } @media (width < 768px) { .p-homeVoice { padding-block: 60px 60px; } } .p-homeVoice__inner { position: relative; } .p-homeVoice { /*-------------------------------------------- INTRO（タイトル＋リード） --------------------------------------------*/ } .p-homeVoice__intro { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 5%; margin-bottom: 60px; } @media (width < 992px) { .p-homeVoice__intro { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; margin-bottom: 40px; } } @media (width < 768px) { .p-homeVoice__intro { gap: 40px; margin-bottom: 70px; } } .p-homeVoice__lead { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; max-width: 780px; padding-top: 40px; font-weight: 500; font-size: var(--text16); line-height: 2.2; color: var(--white); } @media (width < 992px) { .p-homeVoice__lead { padding-top: 0; } } @media (width < 768px) { .p-homeVoice__lead { font-size: 16px; } } .p-homeVoice { /*-------------------------------------------- SLIDER（4カードの横スライダー） --------------------------------------------*/ } .p-homeVoice__slider { position: relative; } .p-homeVoice .splide.js-sliderHomeVoice .splide__track { overflow: visible; } .p-homeVoice__cardInner { border-radius: 5px; background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.1rem, rgba(0, 0, 0, 0.06)), color-stop(0.1rem, transparent)), url("data:image/svg+xml;utf8,"); 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,"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)); 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; -webkit-mask-image: url("data:image/svg+xml;utf8,"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)); -webkit-mask-image: url("data:image/svg+xml;utf8,"), linear-gradient(#fff, #fff); -webkit-mask-size: 28px 49px, calc(100% - 27px) 100%; -webkit-mask-position: 0 0, 27px 0; -webkit-mask-repeat: repeat-y, no-repeat; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 45px 40px 45px 45px; max-width: 360px; } @media (width < 768px) { .p-homeVoice__cardInner { padding: 40px 30px 30px; max-width: 310px; } } .p-homeVoice__card { position: relative; } .p-homeVoice__card.--g1 { --tagBg: #EF74BA; --tagColor: #fff; } .p-homeVoice__card.--g2 { --tagBg: #E0EB67; --tagColor: #007EDB; } .p-homeVoice__card.--g3 { --tagBg: #3BC6F1; --tagColor: #fff; } .p-homeVoice__card.--g4 { --tagBg: #FD8D3D; --tagColor: #fff; } .p-homeVoice { /*-------------------------------------------- タグ（Voice 1〜3） Method セクションと同様に要素でタグshapeを表示し、テキストを absolute で重ねる構造 --------------------------------------------*/ } .p-homeVoice__cardTag { position: absolute; top: 0; left: 15%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; line-height: 0; z-index: 2; } .p-homeVoice__cardTag::after { content: ""; position: absolute; left: 0; top: calc(100% - 1px); background-color: var(--tagBg); width: 12.5%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: var(--index); mask-image: var(--index); aspect-ratio: 22/17; } @media (width < 992px) { .p-homeVoice__cardTag { left: 30px; } } .p-homeVoice__cardTagInner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 6px; padding: 0 1em 5px 1em; line-height: 1; border-radius: 9px 0; background-color: var(--tagBg); color: var(--tagColor); } .p-homeVoice__cardTagLabel { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: var(--text16); line-height: 1; } .p-homeVoice__cardTagNum { font-weight: 600; font-size: var(--text24); line-height: 1; } .p-homeVoice { /*-------------------------------------------- 上段（プロフィール + タイトル） --------------------------------------------*/ } .p-homeVoice__cardHead { display: grid; grid-template-columns: 100px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } @media (width < 768px) { .p-homeVoice__cardHead { row-gap: 20px; } } .p-homeVoice__cardProfileMeta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 9px; grid-column: 1/3; grid-row: 1/2; } @media (width < 768px) { .p-homeVoice__cardProfileMeta { row-gap: 5px; grid-column: 2/3; grid-row: 1/2; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .p-homeVoice__cardProfileLabel { font-weight: 500; font-size: var(--text18); line-height: 1.5; } @media (width < 768px) { .p-homeVoice__cardProfileLabel { font-size: 18px; } } .p-homeVoice__cardProfileArea { 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; padding: 0 8px; height: 20px; background: var(--subBlue); border-radius: 100vmax; color: var(--mainBlue); font-weight: 500; font-size: var(--text13); line-height: 1.5; white-space: nowrap; } @media (width < 768px) { .p-homeVoice__cardProfileArea { font-size: 13px; } } .p-homeVoice__cardPhoto { width: 100%; aspect-ratio: 1/1; } @media (width < 768px) { .p-homeVoice__cardPhoto { max-width: 100px; grid-column: 1/2; grid-row: 1/2; } } .p-homeVoice__cardTitle { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; font-weight: 700; font-size: var(--text14); line-height: 2; } @media (width < 768px) { .p-homeVoice__cardTitle { font-size: 14px; grid-column: 1/3; grid-row: 2/3; } } .p-homeVoice { /*-------------------------------------------- 本文テキスト --------------------------------------------*/ } .p-homeVoice__cardText { margin-top: 20px; font-weight: 500; font-size: var(--text14); line-height: 2; } @media (width < 768px) { .p-homeVoice__cardText { font-size: 14px; margin-top: 10px; } } .p-homeVoice { /*-------------------------------------------- 矢印（スライダーボタン） --------------------------------------------*/ } .p-homeVoice__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-homeVoice__arrows { margin-top: 15px; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } } .p-homeVoice__arrow { position: static; display: grid; place-items: center; width: 48px; aspect-ratio: 1; 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-homeVoice__arrow { width: 40px; } } .p-homeVoice__arrow::after { content: ""; width: 14.5833333333%; 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-homeVoice__arrow.--next::after { -webkit-mask-image: var(--arrow_r); mask-image: var(--arrow_r); } .p-homeVoice__arrow.--prev::after { -webkit-mask-image: var(--arrow_l); mask-image: var(--arrow_l); } .p-homeVoice__arrow:disabled { cursor: default; opacity: 0.4; } @media (hover: hover) { .p-homeVoice__arrow:hover:not(:disabled) { background: var(--white); color: var(--mainBlue); } } .p-homeVoice { /*-------------------------------------------- BG TEXT（Discover Your Potential!） --------------------------------------------*/ } .p-homeVoice__bgText { position: relative; margin-top: 40px; font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 100px; line-height: 1; color: #fff; opacity: 0.1; white-space: nowrap; overflow: hidden; pointer-events: none; } @media (992px <= width) { .p-homeVoice__bgText { margin-left: calc(50% - 50vw); width: 100vw; } } @media (width < 992px) { .p-homeVoice__bgText { font-size: 50px; margin-top: 40px; } } @media (width < 768px) { .p-homeVoice__bgText { margin-top: 35px; width: 100vw; margin-left: -20px; } } .p-homeVoice__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-homeVoice__bgTextInner { -webkit-animation: bgTextScroll 30s linear infinite; animation: bgTextScroll 30s linear infinite; } } .p-homeVoice__bgTextItem { -ms-flex-negative: 0; flex-shrink: 0; } /*-------------------------------------------- BUSINESS（事業概要） --------------------------------------------*/ .p-jigyo { /*--- 事業紹介セクション（白／薄黄交互）---*/ } .p-jigyo__sections { margin-top: 90px; } @media (width < 768px) { .p-jigyo__sections { margin-top: 40px; } } .p-jigyo__section { padding-top: 70px; padding-bottom: 70px; } @media (width < 768px) { .p-jigyo__section { padding-top: 50px; padding-bottom: 50px; } } .p-jigyo__section.--yellow { background-color: var(--subYellow); } .p-jigyo__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 30px; } .p-jigyo { /*--- 見出し下：テキスト＋画像 ---*/ } .p-jigyo__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 40px; } @media (width < 992px) { .p-jigyo__body { gap: 24px; } } @media (width < 768px) { .p-jigyo__body { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; } } .p-jigyo__text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; padding-top: 10px; } @media (width < 768px) { .p-jigyo__text { width: 100%; padding-top: 0; row-gap: 30px; } } .p-jigyo__image { -ms-flex-negative: 0; flex-shrink: 0; width: 50%; } @media (width < 768px) { .p-jigyo__image { max-width: 600px; margin-inline: auto; width: 100%; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } } .p-jigyo { /*--- 小見出し＋本文のかたまり ---*/ } .p-jigyo__item { 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-jigyo__item { row-gap: 5px; } .p-jigyo__item + .p-jigyo__item { margin-top: 10px; } } .p-jigyo__subhead { position: relative; padding-left: 16px; font-size: var(--text18); font-weight: 700; line-height: 2.2; color: var(--fontColor); } @media (width < 768px) { .p-jigyo__subhead { font-size: 18px; } } .p-jigyo__subhead::before { content: ""; position: absolute; left: 0; top: 1.1em; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background-color: var(--mainBlue); } .p-jigyo__desc p { font-size: var(--text16); font-weight: 500; line-height: 2.2; color: var(--fontColor); } @media (width < 768px) { .p-jigyo__desc p { font-size: 16px; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-mediaBanner { padding-top: max(80px, 5.5555555556vw); } @media (width < 768px) { .p-mediaBanner { padding-top: 60px; } } .p-mediaBanner__image { border-radius: 20px; overflow: hidden; } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-mediaMain { padding-top: max(120px, 8.3333333333vw); padding-bottom: max(210px, 14.5833333333vw); } @media (width < 768px) { .p-mediaMain { padding-top: 60px; padding-bottom: 90px; } } .p-mediaMain__content + .p-mediaMain__content { margin-top: 40px; } @media (width < 768px) { .p-mediaMain__content + .p-mediaMain__content { margin-top: 20px; } } .p-mediaMain__frame { border-radius: 20px; border: 2px solid var(--subBlue); background-color: var(--subBlue); -webkit-transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-mediaMain__frame[data-opened] { background-color: var(--white); border-color: var(--mainBlue); } .p-mediaMain__frame[data-opened] .p-mediaMain__trigger i { background-color: var(--mainYellow); } .p-mediaMain__frame[data-opened] .p-mediaMain__trigger i::before, .p-mediaMain__frame[data-opened] .p-mediaMain__trigger i::after { background-color: var(--mainBlue); } .p-mediaMain__frame[data-opened] .p-mediaMain__trigger i::after { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } .p-mediaMain__frame[data-opened] > .p-mediaMain__body { grid-template-rows: 1fr; } @media (hover: hover) { .p-mediaMain__frame:hover { border-color: var(--mainBlue); background-color: var(--white); } } .p-mediaMain__trigger { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 40px; font-size: var(--text24); font-weight: 700; line-height: 1.5; text-align: center; cursor: pointer; list-style: none; position: relative; } @media (width < 768px) { .p-mediaMain__trigger { padding: 20px; font-size: 18px; } } .p-mediaMain__trigger::-webkit-details-marker { display: none; } .p-mediaMain__trigger i { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 40px; background-color: var(--mainBlue); position: absolute; top: 50%; right: 40px; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-mediaMain__trigger i { width: 28px; height: 28px; border-radius: 28px; right: 20px; } } .p-mediaMain__trigger i::before, .p-mediaMain__trigger i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; border-radius: 2px; background-color: var(--white); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: background-color 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); transition: background-color 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); transition: background-color 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), transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 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), 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); } @media (width < 768px) { .p-mediaMain__trigger i::before, .p-mediaMain__trigger i::after { width: 10px; height: 1.5px; } } .p-mediaMain__trigger i::after { -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .p-mediaMain__body { display: grid; grid-template-rows: 0fr; -webkit-transition: grid-template-rows 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: grid-template-rows 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: grid-template-rows 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -ms-grid-rows 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-mediaMain__inner { overflow: hidden; min-height: 0; } .p-mediaMain__main { max-width: 1055px; margin-inline: auto; padding-top: 20px; padding-bottom: 60px; padding-inline: 30px; } @media (width < 768px) { .p-mediaMain__main { padding-inline: 18px; padding-top: 10px; padding-bottom: 20px; } } .p-mediaMain__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 30px; } @media (width < 768px) { .p-mediaMain__list { grid-template-columns: repeat(4, minmax(0, 1fr)); -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; row-gap: 10px; } } .p-mediaMain__info { margin-top: 40px; } @media (width < 768px) { .p-mediaMain__info { margin-top: 20px; } } .p-mediaMain__infoLead { font-size: var(--text22); font-weight: 700; line-height: 1.75; text-align: center; color: var(--mainBlue); } @media (width < 768px) { .p-mediaMain__infoLead { font-size: 16px; text-align: left; } } .p-mediaMain__infoText { margin-top: 10px; font-size: var(--text16); font-weight: 500; line-height: 1.75; text-align: center; } @media (width < 768px) { .p-mediaMain__infoText { font-size: 14px; text-align: left; } } .p-mediaMain__infoNote { margin-top: 10px; font-size: var(--text14); font-weight: 500; line-height: 1.75; text-align: center; } @media (width < 768px) { .p-mediaMain__infoNote { font-size: 12px; text-align: left; } } .p-mediaMain__video { display: grid; grid-template-columns: repeat(auto-fill, minmax(311px, 1fr)); -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 30px; } @media (width < 768px) { .p-mediaMain__video { grid-template-columns: repeat(1, minmax(0, 1fr)); -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; row-gap: 10px; } } .p-mediaMain__videoFrame { aspect-ratio: 16/9; border-radius: 5px; overflow: hidden; } .p-mediaMain__videoFrame iframe { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-mediaMain__videoInfo { margin-top: 10px; font-size: var(--text14); font-weight: 500; line-height: 1.5; color: var(--mainBlue); } @media (width < 768px) { .p-mediaMain__videoInfo { margin-top: 5px; font-size: 14px; } } .p-mediaMain__videoName { font-size: var(--text14); font-weight: 500; line-height: 1.5; } @media (width < 768px) { .p-mediaMain__videoName { font-size: 14px; } } .p-mediaMain__bottom { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } @media (width < 768px) { .p-mediaMain__bottom { margin-top: 20px; display: block; } } .p-mediaMain__bottom li { font-size: var(--text16); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-mediaMain__bottom li { font-size: 14px; } } .p-mediaMain__infoList { margin-top: 40px; } @media (width < 768px) { .p-mediaMain__infoList { margin-top: 20px; } } .p-mediaMain__infoList li { font-size: var(--text16); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-mediaMain__infoList li { font-size: 14px; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-mediaVideo { padding-top: max(40px, 2.7777777778vw); background-color: var(--subBlue); position: relative; } .p-mediaVideo::before { content: ""; aspect-ratio: 1440/90; background-color: var(--subBlue); -webkit-mask-size: 102% auto; mask-size: 102% auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 110%; } .p-mediaVideo::before { -webkit-mask-image: var(--maskTopNew); mask-image: var(--maskTopNew); bottom: calc(100% - 1px); -webkit-mask-position: center top; mask-position: center top; } @media (width < 768px) { .p-mediaVideo::before { -webkit-mask-position: center calc(100% + 1px); mask-position: center calc(100% + 1px); } } @media (width < 768px) { .p-mediaVideo { padding-top: 46px; } } .p-mediaVideo__tab { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } @media (width < 768px) { .p-mediaVideo__tab { -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; } } .p-mediaVideo__tabBtn { position: relative; z-index: 0; 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: 10px; max-width: 215px; width: calc(25% - 15px); min-height: 60px; padding: 18px; border: 2px solid var(--mainBlue); border-radius: 100vmax; background-color: var(--white); color: var(--mainBlue); font-size: var(--text20); font-weight: 700; line-height: 1; letter-spacing: 0.05em; text-align: center; white-space: nowrap; -webkit-transition: background-color 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: background-color 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-mediaVideo__tabBtn { width: calc(25% - 3.75px); min-height: 52px; padding: 8px; font-size: 16px; } } .p-mediaVideo__tabBtn::before { content: ""; position: absolute; left: 50%; bottom: -11px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 20px; height: 14px; background-image: url("../img/media/arrow.svg"); background-repeat: no-repeat; background-size: contain; opacity: 0; z-index: -1; -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); } @media (width < 768px) { .p-mediaVideo__tabBtn::before { bottom: -8.8px; width: 16px; height: 11.2px; } } .p-mediaVideo__tabBtn::after { content: ""; width: 100%; height: 100%; border-radius: 100vmax; background-color: var(--white); position: absolute; inset: 0; z-index: 0; -webkit-transition: background-color 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: background-color 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 (hover: hover) { .p-mediaVideo__tabBtn:hover { background-color: var(--mainBlue); color: var(--white); } .p-mediaVideo__tabBtn:hover::after { background-color: var(--mainBlue); } } .p-mediaVideo__tabBtn.is-active { background-color: var(--mainBlue); color: var(--white); } .p-mediaVideo__tabBtn.is-active::before { opacity: 1; } .p-mediaVideo__tabBtn.is-active::after { background-color: var(--mainBlue); } .p-mediaVideo__tabBtn span { position: relative; z-index: 1; } .p-mediaVideo__panel { margin-top: 70px; } @media (width < 768px) { .p-mediaVideo__panel { margin-top: 38px; } } .p-mediaVideo__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(373px, 1fr)); -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; row-gap: 40px; } @media (width < 768px) { .p-mediaVideo__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap: 20px; } } .p-mediaVideo__grid.--row2 { grid-template-columns: repeat(auto-fill, minmax(579px, 1fr)); } @media (width < 1279px) { .p-mediaVideo__grid.--row2 { grid-template-columns: repeat(auto-fill, minmax(373px, 1fr)); } } @media (width < 768px) { .p-mediaVideo__grid.--row2 { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .p-mediaVideo__grid:not(.is-active) { display: none; } .p-mediaVideo__frame { aspect-ratio: 16/9; border-radius: 5px; overflow: hidden; } .p-mediaVideo__frame iframe { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-mediaVideo__title { margin-top: 10px; font-size: var(--text16); font-weight: 500; line-height: 1.5; } @media (width < 768px) { .p-mediaVideo__title { margin-top: 5px; font-size: 14px; } } /*-------------------------------------------- METHOD（ショウイン式とは） --------------------------------------------*/ .p-method__learn { margin-top: max(120px, 8.3333333333vw); } @media (width < 768px) { .p-method__learn { margin-top: 60px; } } .p-method { /*-------------------------------------------- 01: 「学ぶ力」を鍛える（白背景） --------------------------------------------*/ } .p-method__learnTop { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: min(80px, 6.6666666667%); -moz-column-gap: min(80px, 6.6666666667%); column-gap: min(80px, 6.6666666667%); margin-top: 60px; } @media (width < 992px) { .p-method__learnTop { -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } } @media (width < 768px) { .p-method__learnTop { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 30px; margin-top: 30px; } } .p-method__body { width: min(500px, 41.6666666667%); } @media (width < 768px) { .p-method__body { width: 100%; } } .p-method__learnText { font-weight: 500; font-size: var(--text16); line-height: 2.2; } @media (width < 768px) { .p-method__learnText { font-size: 16px; line-height: 2; } } .p-method__marker { color: var(--mainBlue); font-weight: 700; } .p-method__marker.--yellow { color: var(--mainYellow); } .p-method__compare { width: min(620px, 51.6666666667%); } @media (width < 768px) { .p-method__compare { width: 100%; max-width: 620px; margin-inline: auto; } } @media (width < 576px) { .p-method__compare { max-width: 350px; width: 100%; } } .p-method { /*-------------------------------------------- わかるの3大法則 --------------------------------------------*/ } .p-method__card { position: relative; 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; } @media (width < 768px) { .p-method__card { background-size: 30px 30px, 30px 30px, 300px 300px; } } .p-method__card { border-radius: 0 60px 0 60px; padding-bottom: 4.5833333333%; padding-left: 4.1666666667%; padding-right: 4.1666666667%; margin-top: 120px; } @media (width < 768px) { .p-method__card { margin-top: 60px; border-radius: 0 40px 0 40px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px; } } .p-method { /* ---- バッジ（わかるの3大法則） ---- */ } .p-method__badge { width: 27.2727272727%; -webkit-filter: drop-shadow(3.728px 3.728px 9.942px rgba(0, 0, 0, 0.1)); filter: drop-shadow(3.728px 3.728px 9.942px rgba(0, 0, 0, 0.1)); margin-bottom: 30px; } @media (width < 768px) { .p-method__badge { width: min(260px, 100%); margin-inline: auto; } } .p-method { /* ---- リード文 ---- */ } .p-method__lead { font-weight: 700; font-size: var(--text16); line-height: 2.2; margin-bottom: 40px; } @media (width < 768px) { .p-method__lead { margin-bottom: 40px; font-size: 16px; } } .p-method { /* ---- 3カラム ---- */ } .p-method__list { display: grid; grid-template-columns: repeat(3, 1fr); -webkit-column-gap: 10.101010101%; -moz-column-gap: 10.101010101%; column-gap: 10.101010101%; -webkit-box-align: start; -ms-flex-align: start; align-items: start; max-width: 1074px; margin-inline: auto; } @media (width < 768px) { .p-method__list { grid-template-columns: 1fr; row-gap: 55px; width: 77.4193548387%; margin-inline: auto; } } .p-method__item { 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; } @media (width < 768px) { .p-method__item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .p-method__item { /* ---- 矢印（PC：写真の左に配置） ---- */ } .p-method__item:not(:first-child)::before { content: ""; position: absolute; top: 50%; right: 100%; -webkit-transform: translateX(-25%); transform: translateX(-25%); width: 23.2143%; aspect-ratio: 78/50; background-color: var(--fontColor); -webkit-mask-image: url(../img/home/method/arrow.webp); mask-image: url(../img/home/method/arrow.webp); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } @media (width < 768px) { .p-method__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; } } .p-method__tag { width: 80px; margin-bottom: 9px; -webkit-filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.1)); filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.1)); } @media (width < 768px) { .p-method__tag { -ms-flex-item-align: start; align-self: flex-start; } } .p-method__heading { color: var(--mainBlue); font-weight: 700; font-size: var(--text20); margin-bottom: 16px; } @media (width < 768px) { .p-method__heading { -ms-flex-item-align: start; align-self: flex-start; font-size: 20px; } } @media (width < 768px) { .p-method__img { width: 180px; max-width: 100%; } } .p-method__headingAccent { color: var(--accent); } .p-method { /*-------------------------------------------- 02: 学習の穴をしっかり埋めて成績アップ！（青バンド） --------------------------------------------*/ } .p-method__fix { margin-top: max(120px, 8.3333333333vw); padding: max(70px, 4.8611111111vw) 0 max(200px, 13.8888888889vw); background-color: var(--mainBlue); } @media (width < 768px) { .p-method__fix { margin-top: 60px; padding: 60px 0 90px; } } .p-method__fixTop { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: 80px; -moz-column-gap: 80px; column-gap: 80px; margin-top: 60px; } @media (width < 992px) { .p-method__fixTop { -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } } @media (width < 768px) { .p-method__fixTop { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; margin-top: 40px; } } .p-method__fixFigure { -ms-flex-negative: 0; flex-shrink: 0; width: min(620px, 51.6666666667%); border-radius: 16px; overflow: hidden; } @media (width < 768px) { .p-method__fixFigure { width: 88.5714285714%; margin-inline: auto; } } .p-method__fixText { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; color: var(--white); } .p-method__fixSubTitle { font-weight: 700; font-size: var(--text24); line-height: 1.75; margin-top: 15px; margin-bottom: 15px; color: var(--white); } @media (width < 768px) { .p-method__fixSubTitle { font-size: 20px; margin-top: 0px; margin-bottom: 10px; } } .p-method__fixBody { font-weight: 500; font-size: var(--text16); line-height: 2.2; } @media (width < 768px) { .p-method__fixBody { font-size: 16px; line-height: 2; } } .p-method__fixCards { display: grid; grid-template-columns: repeat(3, 1fr); -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 40px; margin-top: 84px; } @media (width < 768px) { .p-method__fixCards { grid-template-columns: 1fr; max-width: 350px; margin: 40px auto 0; row-gap: 20px; } } .p-method__fixCard { 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; padding: 40px 45px 30px; border-radius: 20px; background-color: var(--bgBlue); text-align: center; } @media (width < 768px) { .p-method__fixCard { padding: 40px 30px 30px; } } .p-method__fixCardFigure { position: relative; margin-bottom: 15px; max-width: 280px; margin-inline: auto; } .p-method__fixNum { position: absolute; top: 0px; left: 0px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); z-index: 1; display: grid; place-items: center; width: 38px; aspect-ratio: 1; border-radius: 50%; background-color: var(--mainYellow); color: var(--mainBlue); font-family: 'Raleway', sans-serif; font-weight: 500; font-size: 20px; line-height: 1; } .p-method__fixCardText { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 4px; } .p-method__fixCardLead { font-weight: 700; font-size: var(--text16); line-height: 2; color: var(--white); } @media (width < 768px) { .p-method__fixCardLead { font-size: 16px; } } .p-method__fixCardAccent { font-weight: 700; font-size: var(--text20); line-height: 1.75; color: var(--mainYellow); } @media (width < 768px) { .p-method__fixCardAccent { font-size: 20px; } } /*-------------------------------------------- 03: AI-Showinシステム（黄背景） ※ gakunenページの p-gakunenSystem を method 用に複製 --------------------------------------------*/ .p-methodSystem { padding-top: max(64px, 4.4444444444vw); padding-bottom: max(54px, 3.75vw); background-color: var(--subYellow); position: relative; } .p-methodSystem::after, .p-methodSystem::before { content: ""; aspect-ratio: 1440/90; background-color: var(--subYellow); -webkit-mask-size: 102% auto; mask-size: 102% auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 110%; } .p-methodSystem::after { -webkit-mask-image: var(--maskBottomNew); mask-image: var(--maskBottomNew); top: calc(100% - 1px); -webkit-mask-position: center bottom; mask-position: center bottom; } @media (width < 768px) { .p-methodSystem::after { -webkit-mask-position: center calc(0% - 1px); mask-position: center calc(0% - 1px); } } .p-methodSystem::before { -webkit-mask-image: var(--maskTopNew); mask-image: var(--maskTopNew); bottom: calc(100% - 1px); -webkit-mask-position: center top; mask-position: center top; } @media (width < 768px) { .p-methodSystem::before { -webkit-mask-position: center calc(100% + 1px); mask-position: center calc(100% + 1px); } } @media (width < 768px) { .p-methodSystem { padding-top: 46px; padding-bottom: 46px; } } .p-methodSystem__intro { margin-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; } @media (width < 768px) { .p-methodSystem__intro { margin-top: 40px; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 20px; } } .p-methodSystem__introBody { width: 41.6666666667%; padding-top: 15px; } @media (width < 992px) { .p-methodSystem__introBody { width: 50%; } } @media (width < 768px) { .p-methodSystem__introBody { width: 100%; padding-top: 0; } } .p-methodSystem__introLead { font-size: var(--text24); font-weight: 700; line-height: 1.75; } @media (width < 768px) { .p-methodSystem__introLead { font-size: 20px; } } .p-methodSystem__introText { margin-top: 15px; font-size: var(--text16); font-weight: 500; line-height: 2.2; } @media (width < 768px) { .p-methodSystem__introText { margin-top: 20px; font-size: 16px; line-height: 2; } } .p-methodSystem__introText span { color: var(--mainBlue); } .p-methodSystem__introImage { width: 51.6666666667%; } @media (width < 992px) { .p-methodSystem__introImage { width: 48.3333333333%; } } @media (width < 768px) { .p-methodSystem__introImage { width: 100%; } } .p-methodSystem__introDeco { width: 122px; position: absolute; right: 0; top: -165px; } @media (width < 768px) { .p-methodSystem__introDeco { width: 75px; top: -96px; } } .p-methodSystem__main { margin-top: 90px; } @media (width < 768px) { .p-methodSystem__main { margin-top: 40px; } } .p-methodSystem__container { margin-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; row-gap: 50px; } @media (width < 992px) { .p-methodSystem__container { row-gap: 20px; } } @media (width < 768px) { .p-methodSystem__container { margin-top: 30px; row-gap: 20px; } } .p-methodSystem__frame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 14px; width: calc(50% - 20px); --ttl-max-w: 400px; --ttl-space: 10px; --ttl-radius: 0 0 15px 15px; --ttl-size: var(--text20); --lead-size: var(--text16); background-color: #FFF586; background-image: linear-gradient(to bottom, rgba(97, 97, 97, 0.08) 2px, transparent 2px), url("data:image/svg+xml;utf8,"); background-size: 100% 24.8px, 300px 300px; background-repeat: repeat, repeat; border-radius: 0 60px 0 60px; padding-inline: 30px; padding-bottom: 32px; } @media (width < 992px) { .p-methodSystem__frame { width: calc(50% - 13px); border-radius: 0 30px 0 30px; } } @media (width < 768px) { .p-methodSystem__frame { width: 100%; --ttl-max-w: 222px; --ttl-size: 18px; --lead-size: 16px; row-gap: 15px; padding-inline: 20px; } } .p-methodSystem__frame.--small { width: calc(25% - 19.5px); row-gap: 10px; --ttl-max-w: 180px; --ttl-space: 5px 5px 7px; --ttl-radius: 0 0 15px 15px; --ttl-size: var(--text16); --lead-size: var(--text15); border-radius: 0 30px 0 30px; padding-inline: 20px; padding-bottom: 32px; } @media (width < 992px) { .p-methodSystem__frame.--small { width: calc(50% - 13px); } } @media (width < 768px) { .p-methodSystem__frame.--small { width: 100%; --ttl-max-w: 180px; --ttl-size: 16px; --lead-size: 15px; padding-bottom: 20px; row-gap: 10px; } } .p-methodSystem__ttl { width: 100%; max-width: var(--ttl-max-w); margin-inline: auto; padding: var(--ttl-space); font-size: var(--ttl-size); font-weight: 700; line-height: 1.5; text-align: center; color: var(--white); border-radius: var(--ttl-radius); background-color: var(--mainBlue); } .p-methodSystem__ttl span { display: inline-block; } .p-methodSystem__lead { font-size: var(--lead-size); font-weight: 700; line-height: 1.5; text-align: center; } @media (width < 768px) { .p-methodSystem__lead { margin-top: 5px; } } .p-methodSystem__list { min-height: 95px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 10px; } .p-methodSystem__list li { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; font-size: var(--text14); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-methodSystem__list li { font-size: 14px; } } .p-methodSystem__list li::before { content: ""; -ms-flex-negative: 0; flex-shrink: 0; display: block; width: 20px; height: 15px; background-image: url("../img/gakunen/icon_check.svg"); background-repeat: no-repeat; background-size: contain; -webkit-transform: translateY(8px); transform: translateY(8px); } @media (width < 768px) { .p-methodSystem__list li::before { width: 14px; height: 10.5px; } } .p-methodSystem__image { margin-top: 20px; margin-inline: auto; } .p-methodSystem__image:has([src*="system_step.webp"]) { max-width: 486px; } @media (width < 768px) { .p-methodSystem__image:has([src*="system_step.webp"]) { margin-top: 0; } } .p-methodSystem__image:has([src*="system_return.webp"]) { max-width: 491px; } @media (width < 768px) { .p-methodSystem__image:has([src*="system_return.webp"]) { margin-top: 12px; } } .p-methodSystem__text { font-size: var(--text14); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-methodSystem__text { font-size: 14px; } } .p-methodSystem__bottom { width: 100%; max-width: 800px; margin-top: 112px; margin-inline: auto; position: relative; } @media (width < 768px) { .p-methodSystem__bottom { margin-top: 52px; } } .p-methodSystem__bottomLabel { width: 307px; position: absolute; top: -17px; left: 38px; } @media (width < 768px) { .p-methodSystem__bottomLabel { left: 16px; } } .p-methodSystem__bottomFrame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 38px; border-radius: 10px; border: 2px solid var(--mainBlue); background-color: var(--white); } @media (width < 768px) { .p-methodSystem__bottomFrame { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; padding: 38px 18px 20px; } } .p-methodSystem__bottomBody { width: 48.3425414365%; padding-top: 3px; } @media (width < 768px) { .p-methodSystem__bottomBody { width: 100%; padding-top: 0; } } .p-methodSystem__bottomLead { font-size: var(--text20); font-weight: 700; line-height: 1.75; color: var(--mainBlue); } @media (width < 768px) { .p-methodSystem__bottomLead { font-size: 18px; } } .p-methodSystem__bottomText { margin-top: 15px; font-size: var(--text14); font-weight: 500; line-height: 1.75; } @media (width < 768px) { .p-methodSystem__bottomText { font-size: 14px; } } .p-methodSystem__bottomImage { width: 44.1988950276%; border-radius: 10px; overflow: hidden; } @media (width < 768px) { .p-methodSystem__bottomImage { width: 100%; } } .p-methodSystem__bottomDeco { width: 105px; position: absolute; bottom: 2px; right: 20px; } @media (width < 768px) { .p-methodSystem__bottomDeco { width: 80px; right: 30px; } } /*-------------------------------------------- NANONI（完全個別なのに通い放題の塾） --------------------------------------------*/ .p-nanoni__mv { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 40px; } @media (width < 768px) { .p-nanoni__mv { row-gap: 20px; } } .p-nanoni__mvLead { font-size: var(--text14); font-weight: 500; line-height: 2.2; text-align: center; } @media (width < 768px) { .p-nanoni__mvLead { font-size: 14px; line-height: 2; } } .p-nanoni__mvTitle { width: min(506px, 76.9230769231%); margin-inline: auto; } .p-nanoni { /*-------------------------------------------- セクションA-1: 学力の差は時間の差 --------------------------------------------*/ } .p-nanoni__result { margin-top: max(116px, 8.0555555556vw); } @media (width < 768px) { .p-nanoni__result { margin-top: 60px; } } .p-nanoni__resultGrid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: 80px; -moz-column-gap: 80px; column-gap: 80px; } @media (width < 992px) { .p-nanoni__resultGrid { -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } } @media (width < 768px) { .p-nanoni__resultGrid { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } } .p-nanoni__resultText { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 15px; } .p-nanoni__resultTitle { font-weight: 700; font-size: var(--text24); line-height: 1.75; color: var(--mainBlue); } @media (width < 768px) { .p-nanoni__resultTitle { font-size: 22px; line-height: 1.5; } } .p-nanoni__resultBody { font-weight: 500; font-size: var(--text16); line-height: 2.2; } @media (width < 768px) { .p-nanoni__resultBody { font-size: 16px; line-height: 2; } } .p-nanoni__resultNote { font-weight: 500; font-size: var(--text14); line-height: 2.2; } @media (width < 768px) { .p-nanoni__resultNote { font-size: 14px; line-height: 2; } } .p-nanoni__resultFigure { -ms-flex-negative: 0; flex-shrink: 0; width: min(560px, 46.6666666667%); height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; 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; row-gap: 18px; padding: 35px 15px; border-radius: 20px; background-color: var(--subYellow); } @media (width < 768px) { .p-nanoni__resultFigure { width: 100%; padding: 25px 15px; } } .p-nanoni__resultGraph { width: 100%; max-width: 530px; } .p-nanoni__resultCaption { font-weight: 500; font-size: var(--text13); line-height: 1.75; margin-left: auto; color: var(--caption); } @media (width < 768px) { .p-nanoni__resultCaption { font-size: 12px; text-align: center; margin-left: unset; } } .p-nanoni { /*-------------------------------------------- セクションA-2: 他塾では真似のできない圧倒的な差（紙テクスチャの黄色ボード） --------------------------------------------*/ } .p-nanoni__compare { margin-top: max(70px, 4.8611111111vw); } @media (width < 768px) { .p-nanoni__compare { margin-top: 60px; } } .p-nanoni__compareBox { padding: 40px 40px 30px; border-radius: 30px; background-color: var(--subYellow02); background-image: linear-gradient(to bottom, rgba(97, 97, 97, 0.08) 2px, transparent 2px), url("data:image/svg+xml;utf8,"); background-size: 100% 24.8px, 300px 300px; background-repeat: repeat, repeat; } @media (width < 768px) { .p-nanoni__compareBox { padding: 40px 20px 20px; border-radius: 20px; } } .p-nanoni__compareHead { text-align: center; } .p-nanoni__compareCatch { 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; margin-bottom: 10px; } @media (width < 768px) { .p-nanoni__compareCatch { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 6px; } } .p-nanoni__compareTag { 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; 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; } @media (width < 768px) { .p-nanoni__compareTag { font-size: 20px; } } .p-nanoni__compareCross { color: var(--mainBlue); font-weight: 900; font-size: var(--text24); } @media (width < 768px) { .p-nanoni__compareCross { font-size: 24px; } } .p-nanoni__compareOfSub { color: var(--mainBlue); font-weight: 700; font-size: var(--text20); } @media (width < 768px) { .p-nanoni__compareOfSub { font-size: 20px; } } .p-nanoni__compareHeadline { color: var(--mainBlue); font-weight: 700; font-size: var(--text36); line-height: 1.5; } @media (width < 768px) { .p-nanoni__compareHeadline { font-size: 26px; } } .p-nanoni__compareList { display: grid; grid-template-columns: repeat(3, 1fr); -webkit-column-gap: 3.5714285714%; -moz-column-gap: 3.5714285714%; column-gap: 3.5714285714%; row-gap: 40px; max-width: 980px; margin: 40px auto 0; } @media (width < 768px) { .p-nanoni__compareList { grid-template-columns: 1fr; gap: 30px; max-width: 310px; margin-top: 50px; } } .p-nanoni__compareItem { 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; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 240px; padding: 30px 20px 0; border-radius: 0 50px 0 50px; background-color: var(--white); text-align: center; } @media (width < 768px) { .p-nanoni__compareItem { padding: 26px 20px 0; } } .p-nanoni__compareNum { position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: grid; place-items: center; width: 38px; aspect-ratio: 1; border-radius: 50%; background-color: var(--subBlue); color: var(--mainBlue); font-family: 'Raleway', sans-serif; font-weight: 500; font-size: var(--text20); line-height: 1; } @media (width < 768px) { .p-nanoni__compareNum { font-size: 20px; } } .p-nanoni__compareCardTtl { color: var(--fontColor); font-weight: 700; font-size: var(--text16); line-height: 2; } @media (width < 768px) { .p-nanoni__compareCardTtl { font-size: 16px; } } .p-nanoni__compareAccent { color: var(--accent); font-weight: 700; font-size: var(--text20); line-height: 2; } @media (width < 768px) { .p-nanoni__compareAccent { font-size: 20px; } } .p-nanoni__compareEn { margin-bottom: 6px; color: var(--mainBlue); font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 12px; line-height: 1; } @media (width < 768px) { .p-nanoni__compareEn { margin-bottom: 8px; } } .p-nanoni__compareImg { width: min(180px, 100%); margin: auto 0 0; } .p-nanoni__compareNote { margin-top: 40px; color: var(--fontColor); font-weight: 500; font-size: var(--text14); line-height: 1.75; display: grid; } .p-nanoni__compareNote li { display: -webkit-box; display: -ms-flexbox; display: flex; } .p-nanoni__compareNote li::before { content: "※"; } @media (width < 768px) { .p-nanoni__compareNote { font-size: 14px; margin-top: 20px; } } .p-nanoni__compareNoteAccent { color: var(--mainBlue); } .p-nanoni { /*-------------------------------------------- セクションB: ショウイン式®の自立学習（青セクション）上下を半円マスクで区切る（サイト共通の意匠） --------------------------------------------*/ } .p-nanoni__system { position: relative; margin-top: max(200px, 13.8888888889vw); padding-block: max(35px, 2.4305555556vw) max(60px, 4.1666666667vw); background-color: var(--mainBlue); z-index: 2; } @media (width < 768px) { .p-nanoni__system { margin-top: 90px; padding-block: 40px; } } .p-nanoni__system::before, .p-nanoni__system::after { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 110%; aspect-ratio: 1440/90; background-color: var(--mainBlue); -webkit-mask-size: 102% auto; mask-size: 102% auto; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .p-nanoni__system::before { bottom: calc(100% - 1px); -webkit-mask-image: var(--maskTopNew); mask-image: var(--maskTopNew); -webkit-mask-position: center top; mask-position: center top; } .p-nanoni__system::after { top: calc(100% - 1px); -webkit-mask-image: var(--maskBottomNew); mask-image: var(--maskBottomNew); -webkit-mask-position: center bottom; mask-position: center bottom; } .p-nanoni__systemBox { margin-top: 60px; padding: 80px 40px 90px; border-radius: 20px; background-color: #035FB9; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.1rem, rgba(255, 255, 255, 0.1)), color-stop(0.1rem, transparent)), -webkit-gradient(linear, left top, right top, color-stop(0.1rem, rgba(255, 255, 255, 0.1)), color-stop(0.1rem, transparent)), url("data:image/svg+xml;utf8,"); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0.1rem, transparent 0.1rem), linear-gradient(to right, rgba(255, 255, 255, 0.1) 0.1rem, transparent 0.1rem), url("data:image/svg+xml;utf8,"); background-size: 60px 60px, 60px 60px, 300px 300px; background-repeat: repeat, repeat, repeat; } @media (width < 768px) { .p-nanoni__systemBox { background-size: 30px 30px, 30px 30px, 300px 300px; } } @media (width < 768px) { .p-nanoni__systemBox { margin-top: 30px; padding: 40px 20px 130px; border-radius: 16px; } } .p-nanoni__systemLead { 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; color: var(--white); text-align: center; } .p-nanoni__systemPill { 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; padding: 2px 12px; border-radius: 5px; background-color: var(--subBlue); color: var(--mainBlue); font-weight: 700; font-size: var(--text18); margin-bottom: 10px; } @media (width < 768px) { .p-nanoni__systemPill { font-size: 16px; } } .p-nanoni__systemLeadTitle { font-weight: 700; font-size: var(--text30); line-height: 1.5; color: var(--mainYellow); margin-bottom: 20px; } @media (width < 768px) { .p-nanoni__systemLeadTitle { font-size: 22px; } } .p-nanoni__systemPoints { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 5px; text-align: left; } @media (width < 768px) { .p-nanoni__systemPoints { row-gap: 10px; } } .p-nanoni__systemPoint { position: relative; padding-left: 28px; font-weight: 500; font-size: var(--text16); line-height: 2; } @media (width < 768px) { .p-nanoni__systemPoint { font-size: 14px; line-height: 1.75; } } .p-nanoni__systemPoint::before { content: ""; position: absolute; left: 4px; top: calc(1em - 6px); width: 13px; height: 8px; border-left: 2px solid var(--mainYellow); border-bottom: 2px solid var(--mainYellow); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .p-nanoni { /*-------------------------------------------- 教 / 育の2カード --------------------------------------------*/ } .p-nanoni__systemCards { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; max-width: 830px; margin: 55px auto 0; -webkit-column-gap: 22px; -moz-column-gap: 22px; column-gap: 22px; } @media (width < 768px) { .p-nanoni__systemCards { -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; row-gap: 45px; max-width: 340px; margin-top: 45px; } } .p-nanoni__systemCard { position: relative; width: calc(50% - 75px); max-width: 340px; min-height: 320px; padding: 35px 28px 130px; border-radius: 0 50px 0 50px; border: 2px solid var(--mainBlue); background-color: var(--white); text-align: center; } @media (width < 768px) { .p-nanoni__systemCard { width: 100%; padding: 40px 15px 120px; } } .p-nanoni__systemBadge { position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background-color: var(--white); border: 2px solid var(--mainBlue); color: var(--mainBlue); font-weight: 700; font-size: var(--text24); } @media (width < 768px) { .p-nanoni__systemBadge { font-size: 24px; } } .p-nanoni__systemCardEn { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 12px; line-height: 1; color: var(--mainBlue); } .p-nanoni__systemCardTitle { font-weight: 700; font-size: var(--text20); line-height: 2; color: var(--mainBlue); } @media (width < 768px) { .p-nanoni__systemCardTitle { font-size: 20px; } } .p-nanoni__systemCardList { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; row-gap: 5px; text-align: left; } .--teaching .p-nanoni__systemCardList { max-width: 75%; } @media (width < 768px) { .p-nanoni__systemCardList { -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } } .p-nanoni__systemCardItem { position: relative; padding-left: 19px; font-weight: 500; font-size: var(--text14); line-height: 2; } @media (width < 768px) { .p-nanoni__systemCardItem { font-size: 14px; padding-left: 17px; } } .p-nanoni__systemCardItem::before { content: ""; position: absolute; left: 2px; top: calc(1em - 6px); width: 11px; height: 7px; border-left: 2px solid var(--stroke); border-bottom: 2px solid var(--stroke); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .p-nanoni__systemCardImg { position: absolute; left: 50%; bottom: -2px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 180px; max-width: 90%; } .p-nanoni__systemDeco { position: absolute; left: 50%; bottom: -90px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 232px; z-index: 2; pointer-events: none; } @media (width < 768px) { .p-nanoni__systemDeco { width: 174px; bottom: -130px; } } /*-------------------------------------------- NEWS DETAIL --------------------------------------------*/ .p-newsDetail { padding-top: 60px; padding-bottom: 120px; } @media (width < 768px) { .p-newsDetail { padding-top: 20px; padding-bottom: 60px; } } .p-newsDetail__inner { width: min(1000px, 100%); margin-inline: auto; 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; row-gap: 120px; } @media (width < 768px) { .p-newsDetail__inner { row-gap: 60px; } } .p-newsDetail__article { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 50px; } @media (width < 768px) { .p-newsDetail__article { row-gap: 30px; } } .p-newsDetail__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } @media (width < 768px) { .p-newsDetail__head { row-gap: 15px; } } .p-newsDetail__metaRow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } @media (width < 768px) { .p-newsDetail__metaRow { -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; } } .p-newsDetail__date { -ms-flex-negative: 0; flex-shrink: 0; font-weight: 700; font-size: 18px; line-height: 1.5; color: var(--mainBlue); } @media (width < 768px) { .p-newsDetail__date { font-size: 15px; } } .p-newsDetail__category { -ms-flex-negative: 0; flex-shrink: 0; 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; padding: 2px 15px 4px; border-radius: 100vmax; background-color: var(--subBlue); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--mainBlue); white-space: nowrap; } @media (width < 768px) { .p-newsDetail__category { font-size: 13px; padding: 2px 12px 3px; } } .p-newsDetail__title { font-weight: 700; font-size: 30px; line-height: 1.5; color: var(--fontColor); } @media (width < 768px) { .p-newsDetail__title { font-size: 22px; } } .p-newsDetail__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 40px; } @media (width < 768px) { .p-newsDetail__body { row-gap: 25px; } } .p-newsDetail__thumb { width: 100%; aspect-ratio: 1100/413; border-radius: 10px; overflow: hidden; background-color: var(--subBlue); } .p-newsDetail__thumb > img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-newsDetail__wrap { font-size: 16px; font-weight: 500; line-height: 2.2; color: var(--fontColor); } .p-newsDetail__wrap > * + * { margin-top: 1.5em; } .p-newsDetail__wrap a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; color: var(--mainBlue); text-decoration: none; border-bottom: 1px solid var(--mainBlue); line-height: 1.75; -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 (hover: hover) { .p-newsDetail__wrap a:hover { opacity: 0.6; } } .p-newsDetail__wrap a > svg { width: 14px; aspect-ratio: 1; height: auto; fill: currentColor; } .p-newsDetail__foot { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .p-newsDetail__back { 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; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; width: 280px; max-width: 100%; height: 60px; padding: 0 20px 0 25px; border: 1px solid var(--mainBlue); border-radius: 50px; background-color: var(--mainBlue); color: var(--white); font-size: 16px; font-weight: 700; line-height: 1.5; text-decoration: none; position: relative; overflow: hidden; -webkit-transition: border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-newsDetail__back::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; } @media (hover: hover) { .p-newsDetail__back:hover { border-color: var(--hoverBlue); } .p-newsDetail__back:hover::before { -webkit-transform: translateY(0); transform: translateY(0); } .p-newsDetail__back:hover .p-newsDetail__backArrow::before { -webkit-transform: translateX(0%); transform: translateX(0%); -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-newsDetail__back:hover .p-newsDetail__backArrow::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); } } .p-newsDetail__backText { position: relative; z-index: 1; margin-inline: auto; } .p-newsDetail__backArrow { position: relative; z-index: 1; -ms-flex-negative: 0; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; width: 5px; aspect-ratio: 1/2; } .p-newsDetail__backArrow::before, .p-newsDetail__backArrow::after { content: ""; grid-column: 1; grid-row: 1; width: 100%; height: 100%; background-color: currentColor; display: block; -webkit-mask-image: var(--arrow_l); mask-image: var(--arrow_l); -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-newsDetail__backArrow::before { -webkit-transform: translateX(250%); transform: translateX(250%); } /*-------------------------------------------- PRIVACY POLICY --------------------------------------------*/ .p-privacyPolicy { padding-top: 120px; padding-bottom: 120px; } @media (width < 768px) { .p-privacyPolicy { padding-top: 60px; padding-bottom: 60px; } } .p-privacyPolicy__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 60px; width: min(1000px, 100%); margin-inline: auto; } @media (width < 768px) { .p-privacyPolicy__list { row-gap: 50px; } } .p-privacyPolicy__block { display: grid; row-gap: 15px; } @media (width < 768px) { .p-privacyPolicy__block { row-gap: 10px; } } .p-privacyPolicy__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 15px; } @media (width < 768px) { .p-privacyPolicy__body { row-gap: 10px; } } .p-privacyPolicy__text { font-size: var(--text16); font-weight: 500; line-height: 2.2; } @media (width < 768px) { .p-privacyPolicy__text { font-size: 16px; } } .p-privacyPolicy__box { padding: min(30px, 2.0833333333vw) min(40px, 2.7777777778vw); border: 1px solid var(--mainBlue); border-radius: 10px; } @media (width < 768px) { .p-privacyPolicy__box { padding: 20px; } } .p-privacyPolicy__boxText { font-size: var(--text16); font-weight: 700; line-height: 1.75; } @media (width < 768px) { .p-privacyPolicy__boxText { font-size: 14px; } } /*-------------------------------------------- FRAMEWORK --------------------------------------------*/ .p-qa__main { padding-top: max(80px, 5.5555555556vw); padding-bottom: max(120px, 8.3333333333vw); } @media (width < 768px) { .p-qa__main { padding-top: 60px; padding-bottom: 70px; } } /*-------------------------------------------- REASON（選ばれる理由） --------------------------------------------*/ .p-reason { /*-------------------------------------------- Point 01〜03 ラッパー figma: Frame(1299:12001) 縦積み gap90 / 幅1200(c-inner) --------------------------------------------*/ } .p-reason__points { margin-top: max(120px, 8.3333333333vw); } @media (width < 768px) { .p-reason__points { margin-top: 60px; } } .p-reason__pointsInner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 90px; } @media (width < 768px) { .p-reason__pointsInner { row-gap: 40px; } } .p-reason { /*-------------------------------------------- 各 Point（テキスト左 + 画像右 / figma gap80） --------------------------------------------*/ } .p-reason__point { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 80px; } @media (width < 992px) { .p-reason__point { gap: 40px; } } @media (width < 768px) { .p-reason__point { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; gap: 0px; max-width: 500px; margin-inline: auto; } .p-reason__point.--03 { display: grid; } } .p-reason__pointBody { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 30px; } @media (width < 768px) { .p-reason__pointBody { row-gap: 15px; width: 100%; margin-top: -20px; position: relative; z-index: 2; } } .p-reason__point.--03 .p-reason__pointBody { row-gap: 40px; } @media (width < 768px) { .p-reason__point.--03 .p-reason__pointBody { row-gap: 15px; grid-row: 2/3; } } .p-reason { /*-------------------------------------------- 見出しブロック（バッジ + タイトル群） figma: gap20 --------------------------------------------*/ } .p-reason__pointHead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } .p-reason__pointTitleGroup { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 5px; } .p-reason { /*-------------------------------------------- Point バッジ（figma: Union 120×48・黄タグ） --------------------------------------------*/ } .p-reason__badge { 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: 120px; min-height: 4px; padding: 6px 20px; border-radius: 10px 0 10px 0; background-color: var(--mainYellow); position: relative; } .p-reason__badge::after { content: ""; position: absolute; left: 0; top: calc(100% - 1px); background-color: var(--mainYellow); width: 8.3333333333%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: var(--index); mask-image: var(--index); aspect-ratio: 22/17; } .p-reason__badge > span { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: var(--text20); line-height: 1.4; } @media (width < 768px) { .p-reason__badge > span { font-size: 15px; } } @media (width < 768px) { .p-reason__badge { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-height: 30px; padding: 4.5px 17px 4.5px 15px; } } .p-reason__pointSub { font-weight: 700; font-size: var(--text24); line-height: 1.5; color: var(--mainBlue); } .p-reason__pointTitle { font-weight: 700; font-size: var(--text36); line-height: 1.5; color: var(--mainBlue); } @media (width < 768px) { .p-reason__pointTitle { font-size: 24px; } } .p-reason { /*-------------------------------------------- 本文（figma: 16px / line2.2 / 幅620） --------------------------------------------*/ } .p-reason__pointText { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } @media (width < 768px) { .p-reason__pointText { row-gap: 15px; } } .p-reason__pointDesc { font-weight: 500; font-size: var(--text16); line-height: 2.2; } @media (width < 768px) { .p-reason__pointDesc { line-height: 2; font-size: 16px; } } .p-reason__pointNote { font-weight: 500; font-size: var(--text14); line-height: 1.75; } @media (width < 768px) { .p-reason__pointNote { line-height: 1.5; } } .p-reason { /*-------------------------------------------- 画像（figma: 500×370・角丸20px） --------------------------------------------*/ } .p-reason__pointFigure { position: relative; -ms-flex-negative: 0; flex-shrink: 0; width: 41.6666666667%; max-width: 500px; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } @media (width < 768px) { .p-reason__pointFigure { width: 100%; margin-inline: auto; } } @media (width < 768px) { .p-reason__point.--03 .p-reason__pointFigure { display: contents; } } .p-reason { /*-------------------------------------------- Point 03 学年別ボックス（figma: 190px×3 gap20） --------------------------------------------*/ } .p-reason__grades { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; } @media (width < 992px) { .p-reason__grades { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } } @media (width < 768px) { .p-reason__grades { row-gap: 10px; } } .p-reason__grade { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; 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; row-gap: 5px; padding: 20px; border-radius: 20px; text-align: center; } @media (width < 768px) { .p-reason__grade { padding: 10px 20px; border-radius: 15px; } } .p-reason__grade.--low { background-color: #f4f6ab; } .p-reason__grade.--mid { background-color: #d0e9ff; } .p-reason__grade.--high { background-color: #ffe8a9; } .p-reason__gradeName { font-weight: 700; font-size: var(--text18); line-height: 1.5; } @media (width < 768px) { .p-reason__gradeName { font-size: 16px; } } .p-reason__gradeText { font-weight: 500; font-size: var(--text14); line-height: 1.5; width: 105%; } @media (width < 768px) { .p-reason__gradeText { width: 100%; font-size: 14px; } } .p-reason { /*-------------------------------------------- 「個別ブース完備」フロート（figma: 円形200px・白枠2px） Point03 画像の左下に重ねて配置 --------------------------------------------*/ } .p-reason__booth { position: absolute; right: -30px; bottom: -45px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 10px; width: 64.4%; } @media (width < 992px) { .p-reason__booth { right: -10px; } } @media (width < 768px) { .p-reason__booth { position: static; -webkit-transform: none; transform: none; margin-top: 16px; grid-row: 3/4; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 100%; } } .p-reason__boothText { font-weight: 500; font-size: var(--text14); line-height: 1.5; color: var(--fontColor); text-align: right; white-space: nowrap; } @media (width < 768px) { .p-reason__boothText { font-size: 14px; text-align: left; } } .p-reason__boothImg { -ms-flex-negative: 0; flex-shrink: 0; overflow: hidden; width: 62.1118012422%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--white); } @media (width < 768px) { .p-reason__boothImg { width: 140px; height: 140px; } } .p-reason { /*-------------------------------------------- 口コミランキング（figma: 青背景帯の上のクリーム箱）青背景は figma #0081df → トークン --mainBlue を使用 --------------------------------------------*/ } .p-reason__ranking { margin-top: max(185px, 12.8472222222vw); padding-block: max(100px, 6.9444444444vw); 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; } @media (width < 768px) { .p-reason__ranking { margin-top: 60px; padding-block: 47px 45px; } } .p-reason__rankingBox { position: relative; 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: 80px; min-height: 280px; padding: 40px 60px; border-radius: 20px; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, from(#e7e4bb), color-stop(50%, #fceed6), to(#f2d1be)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)), linear-gradient(to left, #e7e4bb 0%, #fceed6 50%, #f2d1be 100%); } @media (width < 768px) { .p-reason__rankingBox { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; min-height: 0; padding: 30px 20px; } } .p-reason__rankingText { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 10px; } @media (width < 768px) { .p-reason__rankingText { text-align: center; } } .p-reason__rankingLead { font-weight: 700; font-size: var(--text20); line-height: 1.5; color: var(--mainBlue); } @media (width < 768px) { .p-reason__rankingLead { font-size: 16px; } } .p-reason__rankingTitle { font-weight: 700; font-size: var(--text24); line-height: 1.5; } @media (width < 768px) { .p-reason__rankingTitle { font-size: 20px; } } .p-reason__rankingFigure { -ms-flex-negative: 0; flex-shrink: 0; width: 47.75%; max-width: 100%; } @media (width < 768px) { .p-reason__rankingFigure { width: 100%; } } .p-reason__rankingNote { margin-top: 10px; font-weight: 500; font-size: var(--text14); line-height: 1.5; color: var(--white); text-align: right; } /*-------------------------------------------- SAGASU --------------------------------------------*/ .p-sagasu__inner { margin-top: 144px; position: relative; } @media (width < 768px) { .p-sagasu__inner { margin-top: 54px; } } .p-sagasu__inner:has(.p-sagasuHistory) { margin-top: 114px; } @media (width < 768px) { .p-sagasu__inner:has(.p-sagasuHistory) { margin-top: 40px; } } .p-sagasu__inner:has(.p-sagasuPref) { margin-top: 80px; } @media (width < 768px) { .p-sagasu__inner:has(.p-sagasuPref) { margin-top: 40px; } } .p-sagasu__inner:has(.p-sagasu__all) { margin-top: 120px; } @media (width < 768px) { .p-sagasu__inner:has(.p-sagasu__all) { margin-top: 50px; } } .p-sagasu__inner:has(.p-sagasu__all) .p-sagasu__deco { top: -108px; } @media (width < 768px) { .p-sagasu__inner:has(.p-sagasu__all) .p-sagasu__deco { top: -46px; } } .p-sagasu__area { margin-top: 93px; } .p-sagasu__areaInner { position: relative; } .p-sagasu__deco { width: 103px; position: absolute; top: -54px; right: -16px; } @media (width < 1380px) { .p-sagasu__deco { right: 20px; } } @media (width < 768px) { .p-sagasu__deco { width: 70px; top: -32px; right: 5px; } } .p-sagasuHistory { 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 24px; padding: 24px 24px 32px; margin-bottom: 100px; border-radius: 15px; background-color: #F3F9FF; } @media (width < 768px) { .p-sagasuHistory { padding: 27px 20px 30px; margin-bottom: 76px; row-gap: 30px; } } .p-sagasuHistory__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } @media (width < 768px) { .p-sagasuHistory__head { -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; } } .p-sagasuHistory__head i { display: block; width: 25px; } @media (width < 768px) { .p-sagasuHistory__head i { width: 18px; } } .p-sagasuHistory__head i img { width: 100%; height: auto; } .p-sagasuHistory__head span { font-size: var(--text24); font-weight: 700; line-height: 1.5; } @media (width < 768px) { .p-sagasuHistory__head span { font-size: 16px; } } .p-sagasuHistory__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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; row-gap: 20px; } @media (width < 768px) { .p-sagasuHistory__list { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } } .p-sagasuHistory__frame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 14px; -moz-column-gap: 14px; column-gap: 14px; } @media (width < 768px) { .p-sagasuHistory__frame { -webkit-column-gap: 6px; -moz-column-gap: 6px; column-gap: 6px; } } @media (hover: hover) { .p-sagasuHistory__frame:hover .p-sagasuHistory__text { color: var(--mainBlue); } .p-sagasuHistory__frame:hover .p-sagasuHistory__icon::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%); } .p-sagasuHistory__frame:hover .p-sagasuHistory__icon::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); } } .p-sagasuHistory__text { font-size: var(--text16); font-weight: 700; line-height: 1.5; -webkit-transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-sagasuHistory__text { font-size: 14px; line-height: 1; } } .p-sagasuHistory__icon { position: relative; display: grid; place-items: center; z-index: 1; overflow: hidden; width: 6px; aspect-ratio: 1/2; } .p-sagasuHistory__icon::before, .p-sagasuHistory__icon::after { content: ""; grid-column: 1; grid-row: 1; width: 100%; height: 100%; background-color: var(--mainBlue); 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; } .p-sagasuHistory__icon::before { -webkit-transform: translateX(-250%); transform: translateX(-250%); } .p-sagasuSearch { padding-bottom: max(120px, 8.3333333333vw); } @media (width < 768px) { .p-sagasuSearch { padding-bottom: 60px; } } .p-sagasuSearch__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 120px; } @media (width < 992px) { .p-sagasuSearch__grid { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 80px; } } .p-sagasuSearch__grid:has(+ .p-sagasu__other) { margin-bottom: 80px; } .p-sagasuSearch__map { width: 360px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } @media (width < 768px) { .p-sagasuSearch__map { width: 100%; } .p-sagasuSearch__map .c-btn { width: 240px; margin-inline: auto; } } .p-sagasuSearch__note { font-size: var(--text16); font-weight: 500; line-height: 1.5; } @media (width < 768px) { .p-sagasuSearch__note { font-size: 13px; } } .p-sagasuSearch__keyword { width: calc(100% - 360px - 30px); max-width: 658px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } @media (width < 992px) { .p-sagasuSearch__keyword { width: 100%; max-width: 100%; } } .p-sagasuSearch__pref { width: 100%; } .p-sagasuSearch__prefGrid { margin-top: 30px; margin-bottom: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 70px; } @media (width < 768px) { .p-sagasuSearch__prefGrid { margin-top: 20px; margin-bottom: 40px; row-gap: 40px; } } .p-sagasuSearch__prefWrap { width: calc(50% - 15px); max-width: 540px; } @media (width < 768px) { .p-sagasuSearch__prefWrap { width: 100%; max-width: 100%; } } .p-sagasuSearch__prefWrap.--hokkaido-tohoku { --prefBtnColor: #F2F8FF; --prefBtnHoverColor: #DBEDFF; } .p-sagasuSearch__prefWrap.--kanto { --prefBtnColor: #F5FBDA; --prefBtnHoverColor: #E5F2AA; } .p-sagasuSearch__prefWrap.--tokai-koshinetsu-hokuriku { --prefBtnColor: #F4F2FF; --prefBtnHoverColor: #DDD6F7; } .p-sagasuSearch__prefWrap.--kinki { --prefBtnColor: #FFF5E6; --prefBtnHoverColor: #FFE7C4; } .p-sagasuSearch__prefWrap.--chugoku-shikoku { --prefBtnColor: #FEFCDF; --prefBtnHoverColor: #FDF8A2; } .p-sagasuSearch__prefWrap.--kyushu-okinawa { --prefBtnColor: #FFF2F6; --prefBtnHoverColor: #FFDDE7; } .p-sagasuSearch__prefLabel { font-size: var(--text20); font-weight: 700; line-height: 1.5; } @media (width < 768px) { .p-sagasuSearch__prefLabel { font-size: 16px; } } .p-sagasuSearch__prefList { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; row-gap: 15px; } @media (width < 768px) { .p-sagasuSearch__prefList { margin-top: 15px; grid-template-columns: repeat(auto-fill, minmax(0, 100px)); } } .p-sagasuSearch__prefBtn { 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; height: 34px; padding: 5px 9px 6px 15px; border-radius: 34px; background-color: var(--prefBtnColor, #F2F8FF); overflow: hidden; position: relative; } .p-sagasuSearch__prefBtn::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(--prefBtnHoverColor, var(--mainBlue)); -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; } @media (hover: hover) { .p-sagasuSearch__prefBtn:hover::before { -webkit-transform: translateY(0); transform: translateY(0); } .p-sagasuSearch__prefBtn:hover .p-sagasuSearch__prefArrow::before { -webkit-transition: background-color 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: background-color 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), background-color 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), background-color 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%); } .p-sagasuSearch__prefBtn:hover .p-sagasuSearch__prefArrow::after { -webkit-transform: translateX(250%); transform: translateX(250%); -webkit-transition: background-color 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: background-color 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), background-color 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), background-color 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-sagasuSearch__prefText { font-size: var(--text15); font-weight: 500; line-height: 1.5; position: relative; z-index: 1; -webkit-transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-sagasuSearch__prefText { font-size: 14px; } } .p-sagasuSearch__prefArrow { position: relative; display: grid; place-items: center; z-index: 1; overflow: hidden; width: 6px; aspect-ratio: 1/2; } .p-sagasuSearch__prefArrow::before, .p-sagasuSearch__prefArrow::after { content: ""; grid-column: 1; grid-row: 1; width: 100%; height: 100%; background-color: var(--mainBlue); 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; -webkit-transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-sagasuSearch__prefArrow::before { -webkit-transform: translateX(-250%); transform: translateX(-250%); } .p-sagasuPref { padding-bottom: 100px; } @media (width < 768px) { .p-sagasuPref { padding-bottom: 60px; } } .p-sagasuPref__wrap { margin-bottom: 50px; padding: 40px 60px 50px; border-radius: 15px; background-color: var(--subBlue); } @media (width < 992px) { .p-sagasuPref__wrap { padding-inline: 30px; } } @media (width < 768px) { .p-sagasuPref__wrap { margin-bottom: 30px; padding: 30px 20px; } } .p-sagasuPref__list { max-width: 1035px; margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; row-gap: 15px; } @media (width < 768px) { .p-sagasuPref__list { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); } } .p-sagasuPref__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; height: 34px; padding: 7.5px 15px 8.5px 20px; border-radius: 34px; background-color: var(--white); overflow: hidden; position: relative; } @media (width < 768px) { .p-sagasuPref__btn { padding: 7.5px 11px 8.5px 15px; } } .p-sagasuPref__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(--mainBlue); -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; } @media (hover: hover) { .p-sagasuPref__btn:hover::before { -webkit-transform: translateY(0); transform: translateY(0); } .p-sagasuPref__btn:hover .p-sagasuPref__text { color: var(--white); } .p-sagasuPref__btn:hover .p-sagasuPref__arrow::before { background-color: var(--white); -webkit-transition: background-color 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: background-color 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), background-color 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), background-color 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%); } .p-sagasuPref__btn:hover .p-sagasuPref__arrow::after { background-color: var(--white); -webkit-transform: translateX(250%); transform: translateX(250%); -webkit-transition: background-color 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: background-color 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), background-color 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), background-color 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-sagasuPref__text { font-size: var(--text16); font-weight: 500; line-height: 1.5; position: relative; z-index: 1; -webkit-transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-sagasuPref__text { font-size: 13px; } } .p-sagasuPref__arrow { position: relative; display: grid; place-items: center; z-index: 1; overflow: hidden; width: 6px; aspect-ratio: 1/2; } .p-sagasuPref__arrow::before, .p-sagasuPref__arrow::after { content: ""; grid-column: 1; grid-row: 1; width: 100%; height: 100%; background-color: var(--mainBlue); 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; -webkit-transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-sagasuPref__arrow::before { -webkit-transform: translateX(-250%); transform: translateX(-250%); } .p-sagasu__other { 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: start; -ms-flex-align: start; align-items: flex-start; row-gap: 15px; } @media (width < 768px) { .p-sagasu__other { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .p-sagasu__otherText { font-size: var(--text16); font-weight: 500; line-height: 1.5; } @media (width < 768px) { .p-sagasu__otherText { font-size: 14px; line-height: 1.75; text-align: center; } } .p-sagasuList { padding-top: 70px; background-color: var(--subBlue); } @media (width < 768px) { .p-sagasuList { padding-top: 50px; padding-bottom: 60px; } } .p-sagasuList__container { margin-bottom: 90px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 40px; } @media (width < 768px) { .p-sagasuList__container { margin-bottom: 40px; row-gap: 30px; } } .p-sagasuList__container:has(.c-heading) { margin-bottom: 120px; } @media (width < 768px) { .p-sagasuList__container:has(.c-heading) { margin-bottom: 100px; } } .p-sagasuList__main { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); -webkit-column-gap: 26px; -moz-column-gap: 26px; column-gap: 26px; row-gap: 26px; } @media (width < 768px) { .p-sagasuList__main { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); row-gap: 20px; } } .p-sagasuList__main:has(+ .c-heading__secondary) { margin-bottom: 50px; } .p-sagasuList__main li { display: contents; } .p-sagasuList__card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; padding: 25px; background-color: var(--white); border-radius: 20px; } @media (width < 768px) { .p-sagasuList__card { display: block; position: relative; padding: 15px; border-radius: 15px; } } @media (hover: hover) { a.p-sagasuList__card:hover .p-sagasuList__name { color: var(--mainBlue); } a.p-sagasuList__card:hover .p-sagasuList__btn::before { -webkit-transform: translateY(0); transform: translateY(0); } a.p-sagasuList__card:hover .p-sagasuList__btn .p-sagasuList__text { color: var(--white); } a.p-sagasuList__card:hover .p-sagasuList__btn .p-sagasuList__arrow::before { background-color: var(--white); -webkit-transition: background-color 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: background-color 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), background-color 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), background-color 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%); } a.p-sagasuList__card:hover .p-sagasuList__btn .p-sagasuList__arrow::after { background-color: var(--white); -webkit-transform: translateX(250%); transform: translateX(250%); -webkit-transition: background-color 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: background-color 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), background-color 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), background-color 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-sagasuList__name { font-size: var(--text20); font-weight: 700; line-height: 1.5; -webkit-transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-sagasuList__name { font-size: 18px; } } .p-sagasuList__address { margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-column-gap: 6px; -moz-column-gap: 6px; column-gap: 6px; } @media (width < 768px) { .p-sagasuList__address { margin-top: 5px; } } .p-sagasuList__address i { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: 8px; padding-top: 5px; } @media (width < 768px) { .p-sagasuList__address i { padding-top: 4px; } } .p-sagasuList__address span { font-size: var(--text14); font-weight: 500; line-height: 1.5; } @media (width < 768px) { .p-sagasuList__address span { font-size: 13px; } } .p-sagasuList__tell { margin-top: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 6px; -moz-column-gap: 6px; column-gap: 6px; } .p-sagasuList__tell i { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: 8px; } .p-sagasuList__tell span { font-size: var(--text14); font-weight: 500; line-height: 1.5; } @media (width < 768px) { .p-sagasuList__tell span { font-size: 13px; } } .p-sagasuList__bottom { margin-top: 15px; 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-pack: end; -ms-flex-pack: end; justify-content: flex-end; row-gap: 16px; } @media (width < 768px) { .p-sagasuList__bottom { display: contents; } } .p-sagasuList__badge { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0 10px; border-radius: 999px; background-color: #F6EFED; font-size: var(--text13); font-weight: 500; line-height: 1.5; color: #9E4B37; } @media (width < 768px) { .p-sagasuList__badge { margin-top: 8px; font-size: 13px; } } .p-sagasuList__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; width: 124px; height: 32px; margin-left: auto; padding: 4px 12px; border-radius: 34px; background-color: var(--white); border: 2px solid var(--mainBlue); overflow: hidden; position: relative; } @media (width < 768px) { .p-sagasuList__btn { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 28px; height: 28px; padding: 0; position: absolute; bottom: 15px; right: 15px; } } .p-sagasuList__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(--mainBlue); -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-sagasuList__text { font-size: var(--text14); font-weight: 700; line-height: 1.5; color: VAR(--mainBlue); position: relative; z-index: 1; -webkit-transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } @media (width < 768px) { .p-sagasuList__text { display: none; } } .p-sagasuList__arrow { position: relative; display: grid; place-items: center; z-index: 1; overflow: hidden; width: 6px; aspect-ratio: 1/2; } .p-sagasuList__arrow::before, .p-sagasuList__arrow::after { content: ""; grid-column: 1; grid-row: 1; width: 100%; height: 100%; background-color: var(--mainBlue); 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; -webkit-transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .p-sagasuList__arrow::before { -webkit-transform: translateX(-250%); transform: translateX(-250%); } .p-sagasuList__note { margin-bottom: 70px; } @media (width < 768px) { .p-sagasuList__note { margin-bottom: 40px; } } .p-sagasuList__noteText { font-size: var(--text16); font-weight: 500; line-height: 2; } @media (width < 768px) { .p-sagasuList__noteText { font-size: 13px; } } .p-sagasuList__noteText + .p-sagasuList__noteText { margin-top: 15px; } .p-sagasuNone { margin-top: 70px; padding-bottom: 120px; } @media (width < 768px) { .p-sagasuNone { margin-top: 20px; padding-bottom: 60px; } } .p-sagasuNone__lead { font-size: var(--text20); font-weight: 700; line-height: 1.5; text-align: center; } @media (width < 768px) { .p-sagasuNone__lead { font-size: 16px; } } .p-sagasuNone__wrapper { margin-top: 90px; padding: 32px 57px 40px; border-radius: 10px; border: 3px solid var(--mainBlue); position: relative; } @media (width < 992px) { .p-sagasuNone__wrapper { padding-inline: 30px; } } @media (width < 768px) { .p-sagasuNone__wrapper { margin-top: 60px; padding: 25px 20px 40px; } } .p-sagasuNone__note { font-size: var(--text24); font-weight: 700; line-height: 1.5; text-align: center; color: var(--mainBlue); } @media (width < 768px) { .p-sagasuNone__note { font-size: 18px; } } .p-sagasuNone__cont { margin-top: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (width < 768px) { .p-sagasuNone__cont { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; row-gap: 50px; } } .p-sagasuNone__body { width: 48%; max-width: 500px; padding-top: 30px; } @media (width < 768px) { .p-sagasuNone__body { width: 100%; padding-top: 0; 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-sagasuNone__label { font-size: var(--text36); font-weight: 700; line-height: 1.5; margin-bottom: 20px; } @media (width < 768px) { .p-sagasuNone__label { font-size: 22px; margin-bottom: 15px; } } .p-sagasuNone__text { font-size: var(--text16); font-weight: 500; line-height: 1.75; margin-bottom: 45px; } @media (width < 768px) { .p-sagasuNone__text { font-size: 16px; margin-bottom: 30px; } } .p-sagasuNone__imageWrap { display: -webkit-box; display: -ms-flexbox; display: flex; width: 48%; max-width: 500px; } @media (width < 768px) { .p-sagasuNone__imageWrap { width: 100%; position: relative; } } .p-sagasuNone__imageWrap .p-sagasuNone__deco { display: none; } @media (width < 768px) { .p-sagasuNone__imageWrap .p-sagasuNone__deco { display: -webkit-box; display: -ms-flexbox; display: flex; } } .p-sagasuNone__image { display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 20px; overflow: hidden; } .p-sagasuNone__deco { display: -webkit-box; display: -ms-flexbox; display: flex; width: 208px; position: absolute; right: 16px; bottom: 0; } @media (width < 768px) { .p-sagasuNone__deco { display: none; width: 148px; right: -10px; bottom: -30px; } } /*-------------------------------------------- XXXX --------------------------------------------*/ /*-------------------------------------------- OBJECT --------------------------------------------*/ /*-------------------------------------------- HERO --------------------------------------------*/ /*-------------------------------------------- HEADER --------------------------------------------*/ /*# sourceMappingURL=style.css.map */