@charset "UTF-8"; @import url("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"); /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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 { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* 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; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* 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; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } picture, img, svg { display: block; width: 100%; height: auto; } iframe, video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; } html { scroll-behavior: smooth; } body { --font: Noto Sans JP, sans-serif; font-family: var(--font); } button { cursor: pointer; } :root { --z-header: 1000; --z-fixed-cv: 1000; --pc-padding-x: 20px; --z-modal: 10000; } @media (min-width: 1024px) { .hide-pc { display: none !important; } } @media (max-width: 1023px) { .hide-sp { display: none !important; } } @media (min-width: 1024px) { .c-pc-header__body { border-radius: 999px; background: #fff; box-shadow: 16px 16px 48px 0px rgba(0, 0, 0, 0.04); display: grid; grid-template-columns: 76px 1fr auto auto; align-items: center; padding-left: 40px; padding-right: 24px; height: 64px; } .c-pc-header__sub-logo { position: relative; color: var(--555555, #555); font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; padding-left: 16px; margin-left: 16px; } .c-pc-header__sub-logo::before { content: ""; display: block; width: 1px; height: 40px; position: absolute; top: 0; bottom: 0; left: 0; background: var(--NSM-color, #b9141e); margin: auto; } .c-pc-header__initial { color: var(--NSM-color, #b9141e); } .c-pc-header__icon-nav { margin-left: 24px; } .c-pc-header-nav-list { display: flex; gap: 24px; } .c-pc-header-nav-list__link { color: var(--555555, #555); text-align: center; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .c-pc-header-icon-nav-list { display: flex; gap: 24px; align-items: center; } .c-pc-header-icon-nav-list__link { display: grid; justify-items: center; gap: 4px; } .c-pc-header-icon-nav-list__icon picture { width: auto; height: auto; } .c-pc-header-icon-nav-list__label { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 700; line-height: 100%; /* 12px */ min-height: 20px; display: grid; align-content: center; } } @media (max-width: 1023px) { .c-sp-header__body { border-radius: 999px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px); padding-left: 24px; padding-right: 24px; display: grid; grid-template-columns: 50px 1fr auto 32px; align-items: center; padding-top: 4px; padding-bottom: 4px; transition: background-color 0.25s; pointer-events: auto; } .c-sp-header__sub-logo { color: var(--555555, #555); font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; padding-top: 2px; padding-bottom: 2px; border-left: 1px solid var(--NSM-color, #b9141e); padding-left: 7px; margin-left: 8px; transition: color 0.25s; } .c-sp-header__initial { color: var(--NSM-color, #b9141e); } .c-sp-header__icon-nav { padding-right: 16px; } .c-sp-header__button { display: block; height: 40px; position: relative; width: 100%; } .c-sp-header__button-bar { position: absolute; left: 0; height: 3px; background: #323232; width: 100%; transition: top 0.25s, rotate 0.25s, opacity 0.25s; } .c-sp-header__button-bar:nth-child(1) { top: 7px; } .c-sp-header__button-bar:nth-child(2) { top: 17px; } .c-sp-header__button-bar:nth-child(3) { top: 27px; } .c-sp-header__nav-menu { margin-top: 8px; pointer-events: none; opacity: 0; transition: opacity 0.25s; } .c-sp-header--open .c-sp-header__nav-menu { pointer-events: auto; opacity: 1; } .c-sp-header--open .c-sp-header__body { background: var(--111111, #111); } .c-sp-header--open .c-sp-header__button-bar { background-color: #fff; } .c-sp-header--open .c-sp-header__button-bar:nth-child(1) { rotate: 45deg; top: 18.5px; } .c-sp-header--open .c-sp-header__button-bar:nth-child(2) { opacity: 0; } .c-sp-header--open .c-sp-header__button-bar:nth-child(3) { rotate: -45deg; top: 18.5px; } .c-sp-header--open .c-sp-header__sub-logo { color: #fff; } .c-sp-header-icon-nav-list__link { display: grid; justify-content: center; justify-items: center; gap: 4px; } .c-sp-header-icon-nav-list__icon { width: 16px; } .c-sp-header-icon-nav-list__label { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 700; line-height: 100%; /* 12px */ } } @media (hover: hover) { .c-pc-header__logo { transition: opacity 0.25s; } .c-pc-header__logo:hover { opacity: 0.5; } .c-pc-header-nav-list__link { transition: opacity 0.25s; } .c-pc-header-nav-list__link:hover { opacity: 0.5; } .c-pc-header-iconn-nav-list__link { transition: opacity 0.25s; } .c-pc-header-iconn-nav-list__link:hover { opacity: 0.5; } .c-pc-header-icon-nav-list__link { transition: opacity 0.25s; } .c-pc-header-icon-nav-list__link:hover { opacity: 0.5; } } @media (min-width: 1024px) { .c-nav-contact-block__title { color: var(--white, var(--white, #fff)); /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .c-nav-contact-block__link { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; padding-top: 2px; padding-bottom: 2px; margin-top: 16px; } .c-nav-contact-block__link-label { color: #fff; font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 500; line-height: 150%; /* 36px */ } .c-nav-contact-block__information { margin-top: 16px; border-radius: 4px; border: 1px solid var(--f5f5f5, #f5f5f5); background: var(--111111, #111); padding-top: 15px; padding-bottom: 15px; color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .c-nav-contact-block__address { display: grid; grid-template-columns: 16px 1fr; gap: 8px; } .c-nav-contact-block__address-label { color: #fff; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .c-nav-contact-block__address-link { color: #fff; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } } @media (max-width: 1023px) { .c-nav-contact-block { padding-left: 14px; padding-right: 14px; } .c-nav-contact-block__title { color: var(--white, var(--white, #fff)); /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .c-nav-contact-block__link { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; padding-top: 2px; padding-bottom: 2px; margin-top: 16px; } .c-nav-contact-block__link-label { color: #fff; font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 500; line-height: 150%; /* 36px */ } .c-nav-contact-block__information { margin-top: 16px; border-radius: 4px; border: 1px solid var(--f5f5f5, #f5f5f5); background: var(--111111, #111); padding-top: 15px; padding-bottom: 15px; color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .c-nav-contact-block__address { display: grid; grid-template-columns: 16px 1fr; gap: 8px; margin-top: 16px; } .c-nav-contact-block__address-label { color: #fff; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .c-nav-contact-block__address-link { color: #fff; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } } @media (hover: hover) { .c-nav-contact-block__address-link, .c-nav-contact-block__link { transition: opacity 0.3s; } .c-nav-contact-block__address-link:hover, .c-nav-contact-block__link:hover { opacity: 0.5; } } .c-sp-nav-menu { display: grid; border-radius: 16px; background: var(--111111, #111); padding-top: 16px; padding-left: 16px; padding-right: 16px; padding-bottom: 48px; } .c-sp-global-nav { display: grid; } .c-sp-global-nav__item { border-bottom: 0.5px solid var(--555555, #555); } .c-sp-global-nav-item__body { overflow: hidden; transition: height 0.25s; } .c-sp-global-nav-item-header { position: relative; display: flex; padding-left: 24px; padding-top: 9px; padding-bottom: 9px; padding-right: 24px; } .c-sp-global-nav-item-header::before { content: ""; display: block; width: 16px; height: 2px; position: absolute; left: 0; background: var(--NSM-color, #b9141e); top: 0; bottom: 0; margin: auto; } .c-sp-global-nav-item-header__category { display: grid; grid-template-columns: 1fr 16px; align-items: center; flex-grow: 1; } .c-sp-global-nav-item-header__category-label { color: #fff; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .c-sp-global-nav-item-header__button { display: block; height: 32px; width: 32px; position: relative; } .c-sp-global-nav-item-header__button-bar { width: 16px; height: 2px; background: #fff; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; transition: rotate 0.25s; } .c-sp-global-nav-item-header__button-bar:nth-child(2) { rotate: 90deg; } .c-sp-global-nav-item--open .c-sp-global-nav-item-header__button-bar:nth-of-type(2) { rotate: 0deg; } .c-sp-global-nav-item-body__link { display: grid; grid-template-columns: 1fr 16px; align-items: center; padding-top: 12px; padding-bottom: 12px; padding-left: 24px; padding-right: 24px; border-top: 0.5px solid #d9d9d9; background: #444; } .c-sp-global-nav-item-body__link:nth-child(2n) { background: #555; } .c-sp-global-nav-item-body__link-label { color: #fff; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } @media (min-width: 1024px) { .c-more { border-radius: 999px; background: var(--111111, #111); display: inline-grid; grid-template-columns: 16px auto; gap: 8px; padding-top: 8px; padding-bottom: 8px; padding-left: 32px; padding-right: 32px; align-items: center; } .c-more__label { color: #fff; text-align: center; font-family: Poppins, Noto Sans JP; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } .c-more--white { background: var(--white, #fff); } .c-more--white .c-more__label { color: var(--323232, #323232); } .c-more--red { background: var(--red, #b9141e); } .c-more--red .c-more__label { color: var(--white, #fff); } } @media (max-width: 1023px) { .c-more { border-radius: 999px; background: var(--111111, #111); display: inline-grid; grid-template-columns: 16px auto; gap: 8px; padding-top: 8px; padding-bottom: 8px; padding-left: 32px; padding-right: 32px; align-items: center; } .c-more__label { color: var(--white, var(--white, #fff)); text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } .c-more--white { background: var(--white, #fff); } .c-more--white .c-more__label { color: var(--323232, #323232); } .c-more--red { background: var(--red, #b9141e); } .c-more--red .c-more__label { color: var(--white, #fff); } } @media (hover: hover) { .c-more { transition: background 0.3s ease-out; } .c-more__arrow { transition: translate 0.3s ease-out; } .c-more__arrow svg path { transition: fill 0.3s ease-out; } .c-more__label { transition: color 0.3s ease-out, translate 0.3s ease-out; } a:hover .c-more, a.c-more:hover { background: var(--red, #b9141e); } a:hover .c-more .c-more__arrow, a.c-more:hover .c-more__arrow { translate: 54px; } a:hover .c-more .c-more__arrow svg path, a.c-more:hover .c-more__arrow svg path { fill: var(--white, #fff); } a:hover .c-more .c-more__label, a.c-more:hover .c-more__label { translate: -24px; color: var(--white, #fff); } } @media (min-width: 1024px) { .c-four-year-banner-area { background: var(--323232, linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), #323232); padding-left: var(--pc-padding-x); padding-right: var(--pc-padding-x); padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .c-four-year-banner-area--course { background: var(--NSM-color, #b9141e); } .c-four-year-banner { display: grid; position: relative; border-radius: 16px; box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.08); overflow: hidden; } .c-four-year-banner__text-block { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 48px; display: grid; align-items: center; } .c-four-year-banner__title { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 100%; margin-top: 8px; } .c-four-year-banner__title-number { font-size: 36px; } .c-four-year-banner__catch-copy { width: 351px; } .c-four-year-banner__info { display: grid; grid-template-columns: auto auto; gap: 16px; justify-content: left; align-items: center; margin-top: 16px; } .c-four-year-banner__info1 { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .c-four-year-banner__info2 { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ border-radius: 4px; background: var(--white, #fff); padding: 0px 16px; } .c-four-year-banner__more { margin-top: 16px; } } @media (max-width: 1023px) { .c-four-year-banner-area { background: var(--323232, linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), #323232); padding-left: 16px; padding-right: 16px; padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: minmax(0, 343px); justify-content: center; } .c-four-year-banner-area--course { background: var(--NSM-color, #b9141e); } .c-four-year-banner { display: block; position: relative; border-radius: 16px; box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.08); overflow: hidden; } .c-four-year-banner__image { position: relative; } .c-four-year-banner__text-block { display: flex; flex-direction: column; justify-content: end; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 24px; } .c-four-year-banner__title { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 100%; /* 20px */ margin-top: 8px; } .c-four-year-banner__catch-copy { width: 68.4745762712%; margin-top: 8px; } .c-four-year-banner__info { order: 3; display: grid; grid-template-columns: auto auto; gap: 8px; justify-content: left; align-items: center; margin-top: 8px; } .c-four-year-banner__info1 { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .c-four-year-banner__info2 { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ border-radius: 4px; background: var(--white, #fff); padding: 0px 16px; } .c-four-year-banner__more { order: 4; margin-top: 16px; } } @media (hover: hover) { .c-four-year-banner__image { position: relative; } .c-four-year-banner__image picture { position: relative; } .c-four-year-banner__image picture img { position: relative; transition: transform 0.3s ease-out; } .c-four-year-banner__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .c-four-year-banner:hover .c-four-year-banner__image picture img { will-change: transform; transform: scale(1.1); } .c-four-year-banner:hover .c-four-year-banner__image picture::after { opacity: 1; } } @media (min-width: 1024px) { .c-effect-title { display: grid; justify-content: center; position: relative; z-index: 2; --color: #111; --text-align: center; } .c-effect-title--white { --color: #fff; } .c-effect-title--left { --text-align: left; justify-content: start; } .c-effect-title__inner { position: relative; } .c-effect-title__english { color: var(--color, #111); text-align: var(--text-align); font-family: Poppins; font-size: 80px; font-style: italic; font-weight: 700; line-height: 80%; /* 64px */ letter-spacing: -4px; } .c-effect-title__japanese { color: var(--color, #111); text-align: var(--text-align); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .c-effect-title__effect { position: absolute; z-index: -1; } .c-effect-title__effect--top-course { width: 271px; top: -89px; left: -120px; } .c-effect-title__effect--top-magazine { width: 193px; top: -48px; left: -109.5px; } .c-effect-title__effect--top-school { width: 185px; top: -17px; left: -83px; } .c-effect-title__effect--top-faq { width: 234px; top: -78px; right: -117px; } .c-effect-title__effect--school { width: 138px; top: -63px; left: -69px; } .c-effect-title__effect--mind { width: 158px; top: -79px; left: 0; right: 0; margin: auto; } .c-effect-title__effect--course { width: 233px; top: -92px; left: -113px; } .c-effect-title__effect--campus-life { width: 158px; top: -73px; right: -109px; } } @media (max-width: 1023px) { .c-effect-title { display: grid; justify-content: center; position: relative; z-index: 2; --color: #111; --text-align: center; } .c-effect-title--top { text-align: center; } .c-effect-title--top .c-effect-title__english { font-size: 64px; } .c-effect-title--white { --color: #fff; } .c-effect-title--left { --text-align: left; justify-content: start; } .c-effect-title__inner { position: relative; } .c-effect-title__english { color: var(--color, #000); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 80%; /* 38.4px */ } .c-effect-title__japanese { color: var(--color, #000); text-align: var(--text-align); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .c-effect-title__effect { position: absolute; z-index: -1; } .c-effect-title__effect--top-course { width: 225px; top: -60px; left: 0px; } .c-effect-title__effect--top-magazine { width: 139px; top: -56px; left: -0.5px; } .c-effect-title__effect--top-school { width: 122px; top: -47px; left: -29px; } .c-effect-title__effect--top-faq { width: 234px; top: -78px; right: -117px; } .c-effect-title__effect--school { width: 138px; top: -63px; left: -69.5px; } .c-effect-title__effect--course { width: 138px; top: -51px; left: -56.5px; } .c-effect-title__effect--mind { width: 158px; top: -60px; left: calc(50% - 79px); } .c-effect-title__effect--campus-life { width: 155px; top: -73px; left: -24px; } .c-effect-title--mind { margin-left: -19.5px; margin-right: -19.5px; position: relative; } .c-effect-title--mind .c-effect-title__english { font-size: 32px; } .c-effect-title--mind .c-effect-title__japanese { font-size: 20px; margin-top: 16px; } .c-effect-title--campus-life { margin-left: -19.5px; margin-right: -19.5px; } } @media (min-width: 1024px) { .c-magazine-card { border-radius: 8px; border: 1px solid var(--EAEAEA, #eaeaea); background: #fff; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.08); overflow: hidden; height: 100%; display: grid; } .c-magazine-card__body { padding-top: 16px; padding-bottom: 48px; padding-left: 24px; padding-right: 24px; position: relative; } .c-magazine-card__header { display: grid; grid-template-columns: auto 1fr; align-items: center; } .c-magazine-card__category { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ border-radius: 999px; border: 1px solid var(--707070, #707070); padding-left: 15px; padding-right: 15px; } .c-magazine-card__date { color: #707070; text-align: right; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 130%; /* 18.2px */ } .c-magazine-card__title { color: var(--323232, #323232); text-align: justify; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .c-magazine-card__more { display: grid; grid-template-columns: 16px auto; align-items: center; justify-content: start; gap: 4px; position: absolute; left: 24px; bottom: 16px; } .c-magazine-card__more-label { color: var(--323232, #323232); text-align: center; font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; /* 14px */ } } @media (max-width: 1023px) { .c-magazine-card { border-radius: 8px; border: 1px solid var(--EAEAEA, #eaeaea); background: #fff; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.08); overflow: hidden; height: 100%; display: grid; } .c-magazine-card__body { padding-top: 16px; padding-bottom: 48px; padding-left: 24px; padding-right: 24px; position: relative; } .c-magazine-card__header { display: grid; grid-template-columns: auto 1fr; align-items: center; } .c-magazine-card__category { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ border-radius: 999px; border: 1px solid var(--707070, #707070); padding-left: 15px; padding-right: 15px; } .c-magazine-card__date { color: #707070; text-align: right; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 130%; /* 18.2px */ } .c-magazine-card__title { color: var(--323232, #323232); text-align: justify; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .c-magazine-card__more { display: grid; grid-template-columns: 16px auto; align-items: center; justify-content: start; gap: 4px; position: absolute; left: 24px; bottom: 16px; } .c-magazine-card__more-label { color: var(--323232, #323232); text-align: center; font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; /* 14px */ } } @media (hover: hover) { .c-magazine-card { position: relative; } .c-magazine-card .c-magazine-card__image { position: relative; overflow: hidden; } .c-magazine-card .c-magazine-card__image img { position: relative; transition: transform 0.3s ease-out, filter 0.3s ease-out; } .c-magazine-card .c-magazine-card__image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .c-magazine-card .c-magazine-card__title { transition: color 0.3s ease-out; } .c-magazine-card .c-magazine-card__more-label { transition: color 0.3s ease-out; } .c-magazine-card:hover .c-magazine-card__image img { will-change: transform; transform: scale(1.1); } .c-magazine-card:hover .c-magazine-card__image::after { opacity: 1; } .c-magazine-card:hover .c-magazine-card__title { color: var(--NSM-color, #b9141e); } .c-magazine-card:hover .c-magazine-card__more-label { color: var(--NSM-color, #b9141e); } } @media (min-width: 1024px) { .c-faq-item { border-radius: 8px; background: #fff; box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.08); position: relative; } .c-faq-item__body { transition: height 0.25s, padding-bottom 0.25s; overflow: hidden; padding-left: 48px; padding-right: 105px; } .c-faq-item::before, .c-faq-item::after { content: ""; display: block; width: 25px; height: 1px; background: #b9141e; position: absolute; right: 48px; top: 0; bottom: 0; margin: auto; transition: rotate 0.25s; } .c-faq-item::after { rotate: 90deg; } .c-faq-item--opened::after { rotate: 0deg; } .c-faq-q { display: block; width: 100%; padding-top: 16px; padding-left: 48px; padding-right: 105px; padding-bottom: 16px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; } .c-faq-q__q { color: var(--323232, #323232); font-family: Poppins; font-size: 48px; font-style: normal; font-weight: 600; line-height: 100%; /* 48px */ } .c-faq-q__title { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .c-faq-a { border-top: 1px dashed var(--707070, #707070); padding-top: 16px; padding-bottom: 32px; display: grid; grid-template-columns: auto 1fr; gap: 16px; } .c-faq-a__a { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 48px; font-style: normal; font-weight: 600; line-height: 100%; /* 48px */ } .c-faq-a__text { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .c-faq-a__text a { color: var(--NSM-color, #b9141e); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .c-faq-a__text small { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; } .c-faq-a__title { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 400; line-height: 150%; } } @media (max-width: 1023px) { .c-faq-item { border-radius: 8px; background: #fff; box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.08); position: relative; } .c-faq-item__body { transition: height 0.25s, padding-bottom 0.25s; overflow: hidden; padding-left: 16px; padding-right: 16px; } .c-faq-item__header { position: relative; } .c-faq-q { position: relative; padding-top: 16px; padding-bottom: 16px; padding-left: 16px; padding-right: 50px; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; width: 100%; } .c-faq-q__q { color: var(--323232, #000); font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ } .c-faq-q__title { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .c-faq-q__title br { display: none; } .c-faq-q::before, .c-faq-q::after { content: ""; display: block; width: 16px; height: 1px; background: #b9141e; position: absolute; right: 16px; top: 50%; margin: auto; transition: rotate 0.25s; } .c-faq-q::after { rotate: 90deg; } .c-faq-q--opened::after { rotate: 0deg; } .c-faq-a { border-top: 1px dashed var(--707070, #707070); padding-top: 16px; padding-bottom: 16px; display: grid; grid-template-columns: auto 1fr; gap: 8px; width: 100%; } .c-faq-a__a { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ } .c-faq-a__text { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .c-faq-a__text a { color: var(--NSM-color, #b9141e); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } } @media (hover: hover) { .c-faq-q .c-faq-q__q { transition: color 0.3s ease-out; } .c-faq-q .c-faq-q__title { transition: color 0.3s ease-out; } .c-faq-q:hover .c-faq-q__q { color: var(--NSM-color, #b9141e); } .c-faq-q:hover .c-faq-q__title { color: var(--NSM-color, #b9141e); } .c-faq-a .c-faq-a__text a { transition: opacity 0.3s ease-out; } .c-faq-a .c-faq-a__text a:hover { will-change: color; opacity: 0.8; } } @media (min-width: 1024px) { .c-open-campus-banner-area { display: grid; grid-template-columns: minmax(0, 960px); padding-left: 20px; padding-right: 20px; justify-content: center; padding-top: 64px; padding-bottom: 64px; background: var(--course-main-color, #b9141e); } .c-open-campus-banner { display: grid; position: relative; border-radius: 8px; overflow: hidden; } .c-open-campus-banner__text-block { position: absolute; inset: 0; width: 100%; height: 100%; padding-left: 64px; padding-right: 64px; display: grid; align-items: center; align-content: center; } .c-open-campus-banner__catch-copy { color: #fff; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .c-open-campus-banner__title-english { color: #fff; font-family: Poppins; font-size: 48px; font-style: normal; font-weight: 700; line-height: 80%; /* 38.4px */ margin-top: 16px; } .c-open-campus-banner__title-japanese { color: #fff; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 700; line-height: 150%; /* 18px */ } .c-open-campus-banner__more { margin-top: 16px; } } @media (max-width: 1023px) { .c-open-campus-banner-area { display: grid; grid-template-columns: 100%; padding-left: 16px; padding-right: 16px; justify-content: center; padding-top: 48px; padding-bottom: 48px; background: var(--course-main-color, #b9141e); } .c-open-campus-banner { display: grid; position: relative; border-radius: 8px; overflow: hidden; } .c-open-campus-banner__text-block { position: absolute; inset: 0; width: 100%; height: 100%; padding-left: 24px; padding-right: 24px; display: grid; align-items: center; align-content: center; } .c-open-campus-banner__catch-copy { color: #fff; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .c-open-campus-banner__title-english { color: #fff; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 700; line-height: 80%; /* 25.6px */ margin-top: 16px; } .c-open-campus-banner__title-japanese { color: #fff; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 700; line-height: 150%; /* 18px */ } .c-open-campus-banner__more { margin-top: 16px; } } @media (hover: hover) { .c-open-campus-banner__image picture { position: relative; } .c-open-campus-banner__image picture img { position: relative; transition: transform 0.3s ease-out; } .c-open-campus-banner__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .c-open-campus-banner:hover .c-open-campus-banner__image picture img { will-change: transform; transform: scale(1.1); } .c-open-campus-banner:hover .c-open-campus-banner__image picture::after { opacity: 1; } } @media (min-width: 1024px) { .c-text-more { display: inline-grid; grid-template-columns: 16px auto; gap: 4px; justify-content: center; align-items: center; } .c-text-more__label { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } } @media (max-width: 1023px) { .c-text-more { display: inline-grid; grid-template-columns: 16px auto; gap: 4px; justify-content: center; align-items: center; } .c-text-more__label { color: var(--NSM-color, #B9141E); text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } } @media (min-width: 1024px) { .c-pagination { display: grid; justify-content: center; align-items: center; grid-template-columns: 16px auto 16px; gap: 16px; } .c-pagination__list { display: flex; justify-content: center; align-items: center; gap: 16px; } .c-pagination__page { border-radius: 999px; border: 1px solid var(--707070, #707070); height: 24px; display: grid; color: var(--707070, #707070); text-align: center; font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; /* 12px */ letter-spacing: -0.96px; width: 24px; padding-top: 5px; padding-right: 1.5px; } .c-pagination__page--current { background: var(--707070, #707070); color: #fff; } .c-pagination__blank { color: #000; font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; /* 12px */ } } @media (max-width: 1023px) { .c-pagination { display: grid; justify-content: center; align-items: center; grid-template-columns: 16px auto 16px; gap: 16px; } .c-pagination__list { display: flex; justify-content: center; align-items: center; gap: 8px; } .c-pagination__page { border-radius: 999px; border: 1px solid var(--707070, #707070); height: 24px; display: grid; color: var(--707070, #707070); text-align: center; font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; /* 12px */ letter-spacing: -0.96px; width: 24px; padding-top: 5px; padding-right: 1.5px; } .c-pagination__page--current { background: var(--707070, #707070); color: #fff; } .c-pagination__blank { color: #000; font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; /* 12px */ } } @media (hover: hover) { .c-pagination__arrow { position: relative; } .c-pagination__arrow svg { position: relative; } .c-pagination__arrow svg path { transition: fill 0.3s ease-out; } .c-pagination__arrow::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 999px; background: var(--323232, #323232); opacity: 0; transition: background 0.3s ease-out; } .c-pagination__arrow:hover svg { position: relative; } .c-pagination__arrow:hover svg path:nth-of-type(1) { fill: #fff; } .c-pagination__arrow:hover::before { opacity: 1; } .c-pagination__page { transition: color 0.3s ease-out, background 0.3s ease-out; } .c-pagination__page:hover { background: var(--707070, #707070); color: #fff; } } @media (min-width: 1024px) { .c-detail-nav { display: flex; justify-content: center; align-items: center; gap: 16px; } .c-detail-nav__arrow { width: 16px; display: block; } .c-detail-nav__top { border-radius: 999px; background: var(--111111, #111); padding-top: 8px; padding-bottom: 8px; display: inline-grid; grid-template-columns: 16px auto; align-items: center; justify-content: center; gap: 8px; padding-left: 32px; padding-right: 32px; } .c-detail-nav__top-label { color: #fff; text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } } @media (max-width: 1023px) { .c-detail-nav { display: flex; justify-content: center; align-items: center; gap: 16px; } .c-detail-nav__arrow { width: 16px; display: block; } .c-detail-nav__top { border-radius: 999px; background: var(--111111, #111); padding-top: 8px; padding-bottom: 8px; display: inline-grid; grid-template-columns: 16px auto; align-items: center; justify-content: center; gap: 8px; padding-left: 32px; padding-right: 32px; } .c-detail-nav__top-label { color: #FFF; text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } } @media (hover: hover) { .c-detail-nav__arrow { position: relative; } .c-detail-nav__arrow svg { position: relative; } .c-detail-nav__arrow svg path { transition: fill 0.3s ease-out; } .c-detail-nav__arrow::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 999px; background: var(--323232, #323232); opacity: 0; transition: background 0.3s ease-out; } .c-detail-nav__arrow:hover svg { position: relative; } .c-detail-nav__arrow:hover svg path:nth-of-type(1) { fill: #fff; } .c-detail-nav__arrow:hover::before { opacity: 1; } .c-detail-nav__top { transition: background 0.3s ease-out; } .c-detail-nav__top .c-detail-nav__top-arrow svg { position: relative; } .c-detail-nav__top .c-detail-nav__top-arrow svg path { transition: fill 0.3s ease-out; } .c-detail-nav__top:hover { background-color: var(--NSM-color, #B9141E); } .c-detail-nav__top:hover .c-detail-nav__top-arrow svg path { fill: #fff; } } @media (min-width: 1024px) { .c-core-footer { padding-top: 48px; background: #000; } .c-core-footer__logo { width: 256px; margin: auto; display: block; } .c-core-footer__nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 32px; margin-top: 32px; } .c-core-footer__nav-item { position: relative; } .c-core-footer__nav-item + .c-core-footer__nav-item::before { content: ""; position: absolute; top: 0; left: -16px; width: 1px; height: 100%; background: #fff; } .c-core-footer__nav-link { display: block; color: #fff; font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ } .c-core-footer__copyright { display: block; background: var(--NSM-color, #b9141e); margin-top: 32px; padding-top: 10px; padding-bottom: 10px; color: var(--white, var(--white, #fff)); text-align: center; font-family: Poppins; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; /* 12px */ } } @media (max-width: 1023px) { .c-core-footer { padding-top: 48px; background: #000; } .c-core-footer__logo { width: 256px; margin: auto; display: block; } .c-core-footer__nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 32px; margin-top: 32px; } .c-core-footer__nav-item { position: relative; } .c-core-footer__nav-item + .c-core-footer__nav-item::before { content: ""; position: absolute; top: 0; left: -16px; width: 1px; height: 100%; background: #fff; } .c-core-footer__nav-link { display: block; color: #fff; font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ } .c-core-footer__copyright { display: block; background: var(--NSM-color, #b9141e); margin-top: 32px; padding-top: 10px; padding-bottom: 10px; color: var(--white, var(--white, #fff)); text-align: center; font-family: Poppins; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; /* 12px */ } } @media (min-width: 1024px) { .c-footer-sns-block { padding-top: 64px; padding-bottom: 64px; } .c-footer-sns-block__text { color: #323232; text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 400; line-height: 150%; /* 36px */ } .c-footer-sns-block__list { display: grid; grid-template-columns: repeat(5, 96px); gap: 64px; justify-content: center; margin-top: 32px; } .c-footer-sns-block__link { display: block; position: relative; border-radius: 9999px; background: #fff; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.08); } .c-footer-sns-block__link-icon-hovered { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .c-footer-banner-block { display: grid; grid-template-columns: minmax(0, 1344px); justify-content: center; padding-left: 20px; padding-right: 20px; background: #333; padding-top: 48px; padding-bottom: 48px; } .c-footer-banner-block__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .c-footer-banner-block__link { display: grid; border-radius: 16px; overflow: hidden; } .c-footer-global-nav { background: var(--111111, #111); padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: minmax(0, 1280px); justify-content: center; padding-left: 20px; padding-right: 20px; } .c-footer-global-nav__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .c-footer-global-nav__column { display: grid; gap: 32px; align-items: start; align-content: start; } .c-footer-global-nav-category__category-link { position: relative; display: grid; padding-left: 24px; padding-right: 24px; padding-top: 16px; padding-bottom: 16px; align-items: center; } .c-footer-global-nav-category__category-link::before { content: ""; display: block; width: 16px; height: 2px; background: var(--NSM-color, #b9141e); position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } .c-footer-global-nav-category__category-label { color: #fff; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } .c-footer-global-nav-category__item-link { display: grid; grid-template-columns: 1fr 16px; align-items: center; padding-left: 24px; padding-right: 24px; padding-top: 8px; padding-bottom: 8px; } .c-footer-global-nav-category__item-link-label { color: #fff; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } } @media (max-width: 1023px) { .c-footer-sns-block { padding-top: 48px; padding-bottom: 48px; } .c-footer-sns-block__text { color: #323232; text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .c-footer-sns-block__list { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; max-width: 224px; margin: auto; margin-top: 16px; } .c-footer-sns-block__link { width: 64px; display: block; position: relative; border-radius: 9999px; background: #fff; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.08); } .c-footer-sns-block__link-icon-hovered { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .c-footer-banner-block { display: grid; justify-content: center; padding-left: 15px; padding-right: 15px; background: #333; padding-top: 48px; padding-bottom: 48px; } .c-footer-banner-block__list { display: grid; gap: 32px; } .c-footer-banner-block__link { display: grid; border-radius: 8px; overflow: hidden; } .c-sp-footer-global-nav { background: var(--111111, #111); padding-left: 30px; padding-right: 30px; padding-top: 48px; padding-bottom: 48px; } } @media (hover: hover) { .c-footer-sns-block__link { transition: background-color 0.25s; } .c-footer-sns-block__link:hover { background-color: #000; } .c-footer-sns-block__link-icon-hovered { transition: opacity 0.25s; } .c-footer-sns-block__link:hover .c-footer-sns-block__link-icon-hovered { opacity: 1; } .c-footer-sns-block__link-icon { transition: opacity 0.25s; } .c-footer-sns-block__link:hover .c-footer-sns-block__link-icon { opacity: 0; } .c-footer-banner-block__link, .c-footer-global-nav-category__category-link, .c-footer-global-nav-category__item-link, .c-nav-contact-block__link, .c-core-footer__nav-link, .c-core-footer__logo { transition: opacity 0.3s; } .c-footer-banner-block__link:hover, .c-footer-global-nav-category__category-link:hover, .c-footer-global-nav-category__item-link:hover, .c-nav-contact-block__link:hover, .c-core-footer__nav-link:hover, .c-core-footer__logo:hover { opacity: 0.5; } } @media (min-width: 1024px) { .c-path-nav { display: grid; padding-left: 68px; padding-right: 68px; display: grid; grid-template-columns: minmax(0, 1280px); justify-content: center; --path-nav-color: #fff; } .c-path-nav--gray { --path-nav-color: #707070; } .c-path-nav__list { display: flex; gap: 16px; align-items: center; } .c-path-nav__item { position: relative; } .c-path-nav__item + .c-path-nav__item::before { content: ""; display: block; position: absolute; left: -7px; top: 0; bottom: 0; width: 1px; height: 13px; margin: auto; background-color: var(--path-nav-color); rotate: 45deg; } .c-path-nav__home { width: 16px; display: block; } .c-path-nav__link { display: block; } .c-path-nav__label { color: var(--path-nav-color); text-align: center; font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ } } @media (max-width: 1023px) { .c-path-nav { display: grid; padding-left: 16px; padding-right: 16px; display: grid; --path-nav-color: #fff; } .c-path-nav--gray { --path-nav-color: #707070; } .c-path-nav__list { display: flex; flex-wrap: wrap; align-items: center; } .c-path-nav__item { position: relative; } .c-path-nav__item + .c-path-nav__item { margin-left: 16px; } .c-path-nav__item + .c-path-nav__item::before { content: ""; display: block; position: absolute; left: -7px; top: 0; bottom: 0; width: 1px; height: 13px; margin: auto; background-color: var(--path-nav-color); rotate: 45deg; } .c-path-nav__home { width: 16px; display: block; } .c-path-nav__link { display: block; } .c-path-nav__label { color: var(--path-nav-color); text-align: center; font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ } } @media (min-width: 1024px) { .c-instructor-card { position: relative; border-radius: 8px; overflow: hidden; width: 100%; display: grid; height: 100; } .c-instructor-card__body { position: absolute; inset: 0; width: 100%; height: 100%; padding: 8px; display: grid; align-content: end; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 68.99%, rgba(0, 0, 0, 0.64) 100%); } .c-instructor-card__category { color: var(--white, var(--white, #fff)); font-family: Poppins, "Noto Sans JP"; font-size: 11px; font-style: normal; font-weight: 600; line-height: 100%; /* 11px */ } .c-instructor-card__name { color: var(--white, var(--white, #fff)); font-family: Poppins; font-size: 15px; font-style: normal; font-weight: 600; line-height: 150%; /* 22.5px */ } .c-instructor-card__more { display: inline-grid; grid-template-columns: auto 16px; align-items: center; justify-items: start; justify-content: start; gap: 4px; } .c-instructor-card__more-label { color: #fff; text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .c-instructor-modal { width: 100%; display: grid; grid-template-columns: 164px 1fr; padding: 48px; gap: 32px; align-items: start; } .c-instructor-modal__image { border-radius: 8px; overflow: hidden; } .c-instructor-modal__body { display: grid; align-content: center; justify-items: start; } .c-instructor-modal__category { border-radius: 1px; background: var(--NSM-color, #b9141e); display: inline-block; padding-left: 16px; padding-right: 16px; color: var(--white, #fff); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .c-instructor-modal__category br { display: none; } .c-instructor-modal__name { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 500; line-height: 100%; /* 32px */ } .c-instructor-modal__category + .c-instructor-modal__name { margin-top: 8px; } .c-instructor-modal__name-suffix { display: inline-block; color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; margin-left: 8px; } .c-instructor-modal__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 16px; } .c-instructor-modal__section-title { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ padding-bottom: 3px; border-bottom: 1px dashed var(--000000, #000); margin-top: 16px; } .c-instructor-modal__section-text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 4px; } } @media (max-width: 1023px) { .c-instructor-card { position: relative; border-radius: 8px; overflow: hidden; width: 100%; display: grid; } .c-instructor-card__body { position: absolute; inset: 0; width: 100%; height: 100%; padding: 8px; display: grid; align-content: end; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 68.99%, rgba(0, 0, 0, 0.64) 100%); } .c-instructor-card__category { color: var(--white, var(--white, #fff)); font-family: Poppins; font-size: 11px; font-style: normal; font-weight: 600; line-height: 100%; /* 11px */ } .c-instructor-card__name { color: var(--white, var(--white, #fff)); font-family: Poppins; font-size: 15px; font-style: normal; font-weight: 600; line-height: 150%; /* 22.5px */ } .c-instructor-card__more { display: inline-grid; grid-template-columns: auto 16px; align-items: center; justify-items: start; justify-content: start; gap: 4px; } .c-instructor-card__more-label { color: #fff; text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 100%; /* 14px */ } .c-instructor-modal { width: 100%; display: grid; padding: 16px 16px 24px 16px; gap: 12px; } .c-instructor-modal__image { border-radius: 8px; overflow: hidden; } .c-instructor-modal__body { display: grid; align-content: center; justify-items: start; } .c-instructor-modal__category { border-radius: 1px; background: var(--NSM-color, #b9141e); display: inline-block; padding: 4px 8px; color: var(--white, #fff); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ border-radius: 1px; } .c-instructor-modal__name { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 500; line-height: 100%; /* 28px */ } .c-instructor-modal__category + .c-instructor-modal__name { margin-top: 8px; } .c-instructor-modal__name-suffix { display: inline-block; color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 100%; /* 14px */ margin-left: 8px; } .c-instructor-modal__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 150%; /* 18px */ margin-top: 16px; } .c-instructor-modal__section-title { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ padding-bottom: 3px; border-bottom: 1px dashed var(--000000, #000); margin-top: 12px; } .c-instructor-modal__section-text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 150%; /* 18px */ margin-top: 4px; } } @media (hover: hover) { .c-instructor-card__image { position: relative; overflow: hidden; } .c-instructor-card__image picture { position: relative; } .c-instructor-card__image picture img { position: relative; transition: transform 0.3s ease-out; } .c-instructor-card__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3333); opacity: 0; transition: opacity 0.3s ease-out; } .c-instructor-card__more-label { transition: color 0.3s ease-out; } .c-instructor-card__more-icon svg path, .c-instructor-card__more-icon svg rect { transition: fill 0.3s ease-out; } .c-instructor-card:hover .c-instructor-card__image picture img { will-change: transform; transform: scale(1.1); } .c-instructor-card:hover .c-instructor-card__image picture::after { opacity: 1; } .c-instructor-card:hover .c-instructor-card__more-label { color: var(--NSM-color, #b9141e); } .c-instructor-card:hover .c-instructor-card__more-icon svg path, .c-instructor-card:hover .c-instructor-card__more-icon svg rect { fill: var(--NSM-color, #b9141e); } } @media (min-width: 1024px) { .c-course-banner { border-radius: 8px; display: grid; position: relative; overflow: hidden; } .c-course-banner__body { position: absolute; inset: 0; width: 100%; height: 100%; padding: 48px; display: grid; align-items: end; } .c-course-banner__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 700; line-height: 80%; /* 51.2px */ } .c-course-banner__title-japanese { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .c-course-banner__catch-copy1 { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; } .c-course-banner__catch-copy2 { color: #fff; font-family: "Noto Sans JP"; font-size: 36px; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ } .c-course-banner__more { margin-top: 16px; } } @media (max-width: 1023px) { .c-course-banner { border-radius: 8px; display: grid; position: relative; overflow: hidden; } .c-course-banner__body { position: absolute; inset: 0; width: 100%; height: 100%; padding: 16px 20px; display: grid; align-items: end; align-content: end; } .c-course-banner__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 25.6px */ } .c-course-banner__title-japanese { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .c-course-banner__catch-copy1 { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-top: 16px; } .c-course-banner__catch-copy2 { color: #fff; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .c-course-banner__more { margin-top: 16px; } } @media (hover: hover) { .c-course-banner__image picture { transition: scale 0.3s ease-in-out; } .c-course-banner__image { position: relative; } .c-course-banner__image::after { content: ""; position: absolute; background: rgba(0, 0, 0, 0.5); inset: 0; opacity: 0; transition: opacity 0.3s ease-in-out; } .c-course-banner:hover .c-course-banner__image picture { scale: 1.1; } .c-course-banner:hover .c-course-banner__image::after { opacity: 1; } } @media (min-width: 1024px) { .c-fixed-cv { border-radius: 8px 0px 0px 8px; background: var(--000000, #000); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08); padding: 8px; display: grid; gap: 8px; } .c-fixed-cv__link { display: grid; justify-items: center; align-items: center; align-content: center; gap: 4px; border-radius: 4px; background: var(--NSM-color, #b9141e); height: 80px; width: 80px; } .c-fixed-cv__icon { width: 32px; height: 32px; } .c-fixed-cv__label { color: var(--white, var(--white, #fff)); text-align: center; font-family: Poppins, "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 100%; /* 14px */ } } @media (max-width: 1023px) { .c-fixed-cv { background: var(--000000, #000); padding: 8px; display: grid; gap: 4px; grid-template-columns: repeat(2, 1fr); } .c-fixed-cv__link { display: grid; justify-items: center; justify-content: center; align-items: center; align-content: center; gap: 8px; border-radius: 4px; background: var(--NSM-color, #b9141e); height: 48px; grid-template-columns: 32px auto; } .c-fixed-cv__icon { width: 32px; height: 32px; } .c-fixed-cv__label { color: var(--white, var(--white, #fff)); text-align: center; font-family: Poppins, "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 100%; /* 14px */ } } @media (hover: hover) { .c-fixed-cv__link { transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .c-fixed-cv__icon path { transition: stroke 0.3s ease-in-out; } .c-fixed-cv__label { transition: color 0.3s ease-in-out; } .c-fixed-cv__link:hover { background: var(--white, #fff); box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.08) inset; } .c-fixed-cv__link:hover .c-fixed-cv__icon path { stroke: #b9141e; } .c-fixed-cv__link:hover .c-fixed-cv__label { color: #000; } } @keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes modal-content-slide-in { 0% { transform: translateY(15%); } 100% { transform: translateY(0); } } @keyframes modal-content-slide-out { 0% { transform: translateY(0); } 100% { transform: translateY(15%); } } .c-modal { display: none; } .c-modal.is-open { display: block; } .c-modal[aria-hidden=false] .c-modal__overlay { animation: modal-fade-in 0.3s cubic-bezier(0, 0, 0.2, 1); } .c-modal[aria-hidden=false] .c-modal__wrapper { animation: modal-fade-in 0.3s cubic-bezier(0, 0, 0.2, 1); } .c-modal[aria-hidden=true] .c-modal__overlay { animation: modal-fade-out 0.3s cubic-bezier(0, 0, 0.2, 1); } .c-modal[aria-hidden=true] .c-modal__wrapper { animation: modal-fade-out 0.3s cubic-bezier(0, 0, 0.2, 1); } .c-modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: grid; justify-content: center; align-items: center; z-index: var(--z-modal); } .c-modal__wrapper { will-change: transform; max-height: 100vh; max-height: 100svh; width: 100%; display: grid; grid-template-rows: 1fr auto; align-items: center; } .c-modal__content { border-radius: 16px; background: var(--white, #fff); overscroll-behavior-y: none; overflow-y: auto; max-height: 100%; } .c-modal__close-block { text-align: center; margin-top: 24px; pointer-events: none; } .c-modal__close { display: inline-grid; grid-template-columns: auto 16px; gap: 4px; align-items: center; justify-content: center; } .c-modal__close-label { color: var(--f5f5f5, #f5f5f5); text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } html:has(.c-modal.is-open) { overflow: hidden; } .c-modal__close { pointer-events: auto; } @media (min-width: 1024px) { .c-modal__overlay { grid-template-columns: minmax(0, 960px); padding-left: 20px; padding-right: 20px; } .c-modal__overlay--mini { grid-template-columns: minmax(0, 608px); } .c-modal__wrapper { padding-top: 70px; padding-bottom: 24px; } } @media (max-width: 1023px) { .c-modal__overlay { padding-left: 16px; padding-right: 16px; } .c-modal__wrapper { padding-top: 32px; padding-bottom: 16px; } } @media (hover: hover) { .c-modal__close { cursor: pointer; transition: opacity 0.3s; } .c-modal__close:hover { opacity: 0.5; } } @media (min-width: 1024px) { .c-project-modal { padding: 48px 64px; } .c-project-modal__logo { display: grid; grid-template-columns: minmax(0, 320px); justify-content: center; } .c-project-modal__title { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ position: relative; } .c-project-modal__title::after { content: ""; display: block; width: 48px; height: 4px; margin: auto; margin-top: 4px; background: var(--NSM-color, #b9141e); } .c-project-modal__image { border-radius: 16px; overflow: hidden; margin-top: 16px; } .c-project-modal__category { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ padding: 4px 8px; background: var(--707070, #707070); display: inline-block; margin-top: 16px; } .c-project-modal__lead { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 8px; } .c-project-modal__description { color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .c-project-modal__dl { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 16px; border-radius: 8px; background: var(--FAFAFA, #fafafa); padding: 8px 16px; align-items: center; } .c-project-modal__dt { color: var(--NSM-color, #b9141e); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ border-right: 1px solid var(--NSM-color, #b9141e); padding-right: 15px; } .c-project-modal__dd { color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .c-project-modal__section { margin-top: 16px; border-radius: 8px; background: var(--f5f5f5, #f5f5f5); padding: 24px 32px 32px 32px; } .c-project-modal__section-title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .c-project-modal__section-text { color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .c-project-modal__section-image-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; } .c-project-modal__section-image-item { border-radius: 4px; overflow: hidden; } .c-project-modal__sub-image { border-radius: 16px; overflow: hidden; max-width: 348px; margin: auto; margin-top: 16px; } .c-project-modal__video { border-radius: 16px; overflow: hidden; margin-top: 16px; } } @media (max-width: 1023px) { .c-project-modal { padding: 16px; } .c-project-modal__logo { display: grid; grid-template-columns: minmax(0, 240px); justify-content: center; } .c-project-modal__title { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 120%; /* 28.8px */ position: relative; } .c-project-modal__title::after { content: ""; display: block; width: 48px; height: 4px; margin: auto; margin-top: 4px; background: var(--NSM-color, #b9141e); } .c-project-modal__image { border-radius: 16px; overflow: hidden; margin-top: 16px; } .c-project-modal__category { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 700; line-height: 150%; /* 18px */ padding: 4px 8px; background: var(--707070, #707070); display: inline-block; margin-top: 16px; } .c-project-modal__lead { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ margin-top: 4px; } .c-project-modal__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 4px; } .c-project-modal__dl { margin-top: 16px; display: grid; gap: 16px; justify-items: start; border-radius: 8px; gap: 4px; background: var(--FAFAFA, #fafafa); padding: 8px 16px; align-items: center; } .c-project-modal__dt { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 13px; font-style: normal; font-weight: 400; line-height: 150%; /* 19.5px */ border-bottom: 1px solid var(--NSM-color, #b9141e); padding-bottom: 1px; } .c-project-modal__dd { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 13px; font-style: normal; font-weight: 400; line-height: 150%; /* 19.5px */ } .c-project-modal__section { margin-top: 16px; border-radius: 8px; background: var(--f5f5f5, #f5f5f5); padding: 24px 16px 32px 16px; } .c-project-modal__section-title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } .c-project-modal__section-text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .c-project-modal__section-image-list { display: grid; gap: 16px; margin-top: 16px; padding-left: 1px; padding-right: 16px; } .c-project-modal__section-image-item { border-radius: 4px; overflow: hidden; } .c-project-modal__sub-image { border-radius: 16px; overflow: hidden; margin-top: 16px; } .c-project-modal__video { border-radius: 16px; overflow: hidden; margin-top: 16px; } } @media (min-width: 1024px) { .c-article-banner { border-radius: 16px; box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.16); overflow: hidden; display: block; margin-top: 80px; } .c-article-banner img { border-radius: 0; margin-top: 0; } } @media (max-width: 1023px) { .c-article-banner { margin-top: 48px; border-radius: 8px; box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.16); overflow: hidden; display: block; } } @media (hover: hover) { .c-article-banner { position: relative; } .c-article-banner picture { position: relative; } .c-article-banner::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .c-article-banner:hover::after { opacity: 1; } } @media (min-width: 1024px) { .root__header { position: absolute; left: 0; right: 0; top: 28px; padding-left: 20px; padding-right: 20px; max-width: 1416px; margin: auto; z-index: var(--z-header); } .root__path-nav { position: absolute; left: 0; right: 0; width: 100%; top: 96px; z-index: var(--z-header); } .root__fixed-cv { position: fixed; top: 0; bottom: 0; right: 0; margin: auto; height: 184px; z-index: var(--z-fixed-cv); } } @media (max-width: 1023px) { .root__header { pointer-events: none; position: absolute; left: 16px; right: 16px; top: 16px; z-index: var(--z-header); } .root__path-nav { position: absolute; left: 0; right: 0; width: 100%; top: 64px; z-index: var(--z-header); } .root__fixed-cv { position: fixed; left: 0; bottom: 0; right: 0; height: 64px; z-index: var(--z-fixed-cv); } .root:has(.c-fixed-cv) { padding-bottom: 64px; } } @media (min-width: 1024px) { .lv1-nav-list { background: var(--nav-list-background, #ecece3); padding-top: 128px; padding-bottom: 128px; display: grid; grid-template-columns: minmax(0, 960px); justify-content: center; padding-left: 20px; padding-right: 20px; gap: 48px; list-style: none; } .lv1-nav-list--admission { background: var(--F5F5F7, #f5f5f7); } .lv1-nav-list__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .lv1-nav-card { display: grid; background-color: #fff; border-radius: 16px; overflow: hidden; } .lv1-nav-card__body { height: 96px; display: grid; align-items: center; align-content: center; } .lv1-nav-card__label { color: var(--323232, #323232); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .lv1-nav-card__arrow { display: inline-block; width: 16px; height: 16px; margin-right: 4px; } .lv1-nav-card__special { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 100%; /* 12px */ } } @media (max-width: 1023px) { .lv1-nav-list { background: var(--nav-list-background, #ecece3); padding-top: 128px; padding-bottom: 128px; display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 35.5px; padding-right: 35.5px; gap: 24px; list-style: none; } .lv1-nav-list--admission { background: var(--F5F5F7, #f5f5f7); } .lv1-nav-list__list { display: grid; grid-template-columns: 100%; gap: 24px; } .lv1-nav-list .lv1-nav-card { display: grid; background-color: #fff; border-radius: 16px; overflow: hidden; } .lv1-nav-list .lv1-nav-card__body { height: 96px; display: grid; align-items: center; align-content: center; } .lv1-nav-list .lv1-nav-card__label { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .lv1-nav-list .lv1-nav-card__arrow { display: inline-block; width: 16px; height: 16px; margin-right: 4px; } .lv1-nav-list .lv1-nav-card__special { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 100%; /* 12px */ } } @media (hover: hover) { .lv1-nav-card { position: relative; } .lv1-nav-card__image { position: relative; } .lv1-nav-card__image picture { position: relative; } .lv1-nav-card__image picture img { position: relative; transition: transform 0.3s ease-out; } .lv1-nav-card__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .lv1-nav-card__image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 16px 16px 0 0; border: solid 0px #fff; transition: border 0.3s ease-out; } .lv1-nav-card__label { transition: color 0.3s ease-out; } .lv1-nav-card:hover .lv1-nav-card__image picture img { will-change: transform; transform: scale(0.95); } .lv1-nav-card:hover .lv1-nav-card__image picture::after { opacity: 1; } .lv1-nav-card:hover .lv1-nav-card__image::after { will-change: border; border: solid 12px #fff; } .lv1-nav-card:hover .lv1-nav-card__label { color: var(--NSM-color, #b9141e); } } @media (min-width: 1024px) { .lv1-kv { position: relative; } .lv1-kv__image { height: 832px; } .lv1-kv__image picture { height: 832px; } .lv1-kv__image img { height: 832px; width: 100%; object-fit: cover; } .lv1-kv__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; align-content: center; padding-left: 20px; padding-right: 20px; } .lv1-kv__title-en { color: var(--white, #fff); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: Poppins; font-size: 80px; font-style: italic; font-weight: 700; line-height: 80%; /* 64px */ } .lv1-kv__title-ja { color: var(--white, #fff); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } } @media (max-width: 1023px) { .lv1-kv { position: relative; } .lv1-kv__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: 100%; justify-content: center; align-content: center; padding-left: 20px; padding-right: 20px; } .lv1-kv__title-en { color: var(--white, #fff); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 80%; /* 38.4px */ } .lv1-kv__title-ja { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ margin-top: 16px; } } @media (min-width: 1024px) { .lv2 { background: #ecece3; } .lv2--ffffff { background: #fff; } .lv2--fafafa { background: #fafafa; } .lv2--f9f9f6 { background: var(--F9F9F6, #f9f9f6); } .lv2__page-nav { margin-top: -28px; height: 28px; } .lv2__catch-copy { margin-top: -48px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-left: 20px; padding-right: 20px; position: relative; } .lv2__mind-section { margin-top: 128px; } .lv2__mind-section + .lv2__mind-section { margin-top: 0; } .lv2__features-section { margin-top: 128px; } .lv2__features-section--even { background-color: var(--F5F5F7, #f5f5f7); } .lv2__features-section + .lv2__features-section { margin-top: 0; } .lv2__course-section { background: var(--F9F9F6, #f9f9f6); } .lv2__course-section--even { background: var(--F5F5F7, #f5f5f7); } .lv2__course-sub-section { background: var(--white, #fff); } .lv2__course-sub-section + .lv2__course-sub-section { background: var(--ECECE3, #ecece3); } .lv2__visitor-section--even { background-color: var(--F5F5F7, #f5f5f7); } .lv2__scholarship-sibling { background: var(--F5F5F7, #f5f5f7); } .lv2__admission-banner-area { background: var(--F5F5F7, #f5f5f7); } .lv2__admission-office-description { background: var(--F5F5F7, #f5f5f7); } .lv2__admission-section--even { background: var(--F5F5F7, #f5f5f7); } .lv2__campus-life-event-section--even { background: var(--FAFAFA, #fafafa); } .lv2__campus-life-support-section--2 { background: var(--F9F9F6, #f9f9f6); } .lv2__campus-life-support-section--3 { background: var(--ECECE3, #ecece3); } .lv2__policy-contents { background: var(--F5F5F7, #f5f5f7); } .lv2__policy-contents--even { background: var(--ECECE3, #ecece3); } } @media (max-width: 1023px) { .lv2 { background: #ecece3; } .lv2--ffffff { background: #fff; } .lv2--fafafa { background: #fafafa; } .lv2--f9f9f6 { background: var(--F9F9F6, #f9f9f6); } .lv2__page-nav { height: 0; } .lv2__catch-copy { position: relative; margin-top: -61px; margin-right: 16px; margin-left: 16px; } .lv2__features-section { margin-top: 71px; } .lv2__features-section--even { background-color: var(--F5F5F7, #f5f5f7); } .lv2__features-section + .lv2__features-section { margin-top: 0; } .lv2__course-section { background: var(--F9F9F6, #f9f9f6); } .lv2__course-section--even { background: var(--F5F5F7, #f5f5f7); } .lv2__course-sub-section { background: var(--white, #fff); } .lv2__course-sub-section + .lv2__course-sub-section { background: var(--ECECE3, #ecece3); } .lv2__visitor-section--even { background-color: var(--F5F5F7, #f5f5f7); } .lv2__scholarship-sibling { background: var(--F5F5F7, #f5f5f7); } .lv2__admission-banner-area { background: var(--F5F5F7, #f5f5f7); } .lv2__admission-office-description { background: var(--F5F5F7, #f5f5f7); } .lv2__admission-section--even { background: var(--F5F5F7, #f5f5f7); } .lv2__campus-life-event-section--even { background: var(--FAFAFA, #fafafa); } .lv2__campus-life-support-section--2 { background: var(--F9F9F6, #f9f9f6); } .lv2__campus-life-support-section--3 { background: var(--ECECE3, #ecece3); } .lv2__policy-contents { background: var(--F5F5F7, #f5f5f7); } .lv2__policy-contents--even { background: var(--ECECE3, #ecece3); } } @media (min-width: 1024px) { .lv2-kv { position: relative; } .lv2-kv--black { --lv2-kv-color: #000; } .lv2-kv__image { height: 600px; } .lv2-kv__image picture { height: 100%; } .lv2-kv__image img { object-fit: cover; object-position: center; width: 100%; height: 100%; } .lv2-kv__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1120px); justify-content: center; align-content: center; padding-left: 20px; padding-right: 20px; z-index: 1; } .lv2-kv--reverse .lv2-kv__inner { justify-items: end; } .lv2-kv__title { display: grid; gap: 16px; } .lv2-kv__title-english { color: var(--lv2-kv-color, #fff); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 700; line-height: 80%; /* 51.2px */ } .lv2-kv__title-japanese { color: var(--lv2-kv-color, #fff); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .lv2-kv__w-curriculum { position: absolute; left: 14px; bottom: 20px; width: 287px; } } @media (max-width: 1023px) { .lv2-kv { position: relative; --lv2-kv-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); } .lv2-kv--black { --lv2-kv-color: #000; --lv2-kv-text-shadow: 0 0 0; } .lv2-kv--sp-black { --lv2-kv-color: #000; --lv2-kv-text-shadow: 0 0 0; } .lv2-kv__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: 100%; justify-content: center; align-content: center; padding-left: 20px; padding-right: 0px; } .lv2-kv__title { display: grid; } .lv2-kv__title-english { color: var(--lv2-kv-color, #fff); text-shadow: var(--lv2-kv-text-shadow); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 38.4px */ } .lv2-kv__title-japanese { color: var(--lv2-kv-color, #fff); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } } @media (min-width: 1024px) { .lv2-page-nav__list { display: flex; gap: 16px; justify-content: center; align-items: center; } .lv2-page-nav__item { width: 234px; } .lv2-page-nav--small .lv2-page-nav__item { width: 186px; } .lv2-page-nav--small .lv2-page-nav__list { gap: 8px; } } @media (max-width: 1023px) { .lv2-page-nav { translate: 0 -50%; } .lv2-page-nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 167px)); column-gap: 11px; row-gap: 15px; justify-content: center; align-items: center; flex-wrap: wrap; } } @media (min-width: 1024px) { .lv2-page-nav-link { display: grid; position: relative; min-height: 56px; height: 100%; justify-items: center; justify-content: center; align-items: center; border-radius: 999px; background: #fff; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.16); } .lv2-page-nav-link__label { color: var(--323232, #323232); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .lv2-page-nav-link__label-small { font-size: 12px; line-height: 120%; } .lv2-page-nav-link--small .lv2-page-nav-link__label { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 120%; /* 16.8px */ } .lv2-page-nav-link__arrow { width: 16px; position: absolute; bottom: 8px; right: 0; left: 0; margin: auto; } } @media (max-width: 1023px) { .lv2-page-nav-link { display: grid; position: relative; min-height: 40px; height: 100%; justify-items: center; justify-content: center; align-items: center; border-radius: 999px; background: #fff; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.16); border-radius: 999px; } .lv2-page-nav-link__label { color: var(--323232, #000); text-align: center; font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 700; line-height: 150%; /* 18px */ } .lv2-page-nav-link__arrow { width: 16px; position: absolute; bottom: 4px; right: 0; left: 0; margin: auto; } } @media (hover: hover) { .lv2-page-nav-link { transition: background 0.3s ease-out, box-shadow 0.3s ease-out; } .lv2-page-nav-link__label { transition: color 0.3s ease-out; } .lv2-page-nav-link::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: solid 1px var(--NSM-color, #b9141e); border-radius: 999px; opacity: 0; transition: opacity 0.3s ease-out; } .lv2-page-nav-link:hover { background: var(--F9F9F6, #f9f9f6); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0); } .lv2-page-nav-link:hover .lv2-page-nav-link__label { color: var(--NSM-color, #b9141e); } .lv2-page-nav-link:hover::after { opacity: 1; } } @media (min-width: 1024px) { .lv2-title-lv2__sub-title { color: var(--323232, #323232); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .lv2-title-lv2__japanese { color: var(--323232, #323232); text-align: center; font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 700; line-height: 150%; /* 72px */ } .lv2-title-lv2__japanese--ornament:before, .lv2-title-lv2__japanese--ornament:after { content: ""; display: inline-block; width: 36px; height: 3px; background-color: var(--323232, #323232); vertical-align: middle; } .lv2-title-lv2__japanese--ornament:before { margin-right: 4px; } .lv2-title-lv2__japanese--ornament:after { margin-left: 4px; } .lv2-title-lv2__english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 700; line-height: 80%; /* 12.8px */ } } @media (max-width: 1023px) { .lv2-title-lv2__sub-title { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .lv2-title-lv2__japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; text-align: center; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; letter-spacing: -0.025em; /* 41.6px */ } .lv2-title-lv2__japanese--ornament:before, .lv2-title-lv2__japanese--ornament:after { content: ""; display: inline-block; width: 25px; height: 2px; background-color: var(--323232, #323232); vertical-align: middle; } .lv2-title-lv2__japanese--ornament:before { margin-right: 4px; } .lv2-title-lv2__japanese--ornament:after { margin-left: 4px; } .lv2-title-lv2__english { color: var(--NSM-color, #B9141E); text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ margin-top: 8px; } } @media (min-width: 1024px) { .lv2-catch-copy-section { border-radius: 16px; background: var(--white, #fff); box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.08); padding: 64px; padding-left: 20px; padding-right: 20px; } .lv2-catch-copy-section__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .lv2-catch-copy-section__catch-copy { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 16px; } .lv2-catch-copy-section__description { color: var(--323232, #323232); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 16px; } .lv2-catch-copy-section:has(.lv2-catch-copy-section__title-large) .lv2-catch-copy-section__title { text-align: center; } .lv2-catch-copy-section:has(.lv2-catch-copy-section__title-large) .lv2-catch-copy-section__title-large { font-family: "Noto Sans JP"; font-size: 40px; font-style: normal; font-weight: 700; line-height: 100%; /* 40px */ } .lv2-catch-copy-section:has(.lv2-catch-copy-section__title-large) .lv2-catch-copy-section__title-number { font-family: "Noto Sans JP"; font-size: 96px; font-style: italic; font-weight: 700; line-height: 100%; } .lv2-catch-copy-section:has(.lv2-catch-copy-section__title-large) .lv2-catch-copy-section__title-unit { font-family: "Noto Sans JP"; font-size: 64px; font-style: italic; font-weight: 700; line-height: 100%; } } @media (max-width: 1023px) { .lv2-catch-copy-section { border-radius: 16px; background: var(--white, #fff); box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.08); padding: 32px 24px; } .lv2-catch-copy-section__title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .lv2-catch-copy-section__catch-copy { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; } .lv2-catch-copy-section__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .lv2-catch-copy-section:has(.lv2-catch-copy-section__title-large) .lv2-catch-copy-section__title { text-align: center; } .lv2-catch-copy-section:has(.lv2-catch-copy-section__title-large) .lv2-catch-copy-section__title-large { font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 100%; /* 32px */ } .lv2-catch-copy-section:has(.lv2-catch-copy-section__title-large) .lv2-catch-copy-section__title-number { font-family: "Noto Sans JP"; font-size: 80px; font-style: italic; font-weight: 700; line-height: 100%; } .lv2-catch-copy-section:has(.lv2-catch-copy-section__title-large) .lv2-catch-copy-section__title-unit { font-family: "Noto Sans JP"; font-size: 48px; font-style: italic; font-weight: 700; line-height: 100%; } } @media (min-width: 1024px) { .lv2-flow-list { display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; gap: 32px; } .lv2-flow-list__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .lv2-flow-list__item { position: relative; } .lv2-flow-list__item:not(:nth-child(3n+1))::before, .lv2-flow-list__item:not(:nth-child(3n+1))::after { content: ""; position: absolute; left: -22px; display: block; background-color: var(--NSM-color, #b9141e); width: 12px; height: 16px; } .lv2-flow-list__item:not(:nth-child(3n+1))::before { top: 197px; transform: skewX(36.87deg); } .lv2-flow-list__item:not(:nth-child(3n+1))::after { top: 213px; transform: skewX(-36.87deg); } } @media (max-width: 1023px) { .lv2-flow-list { display: grid; grid-template-columns: 100%; justify-content: center; gap: 32px; } .lv2-flow-list__list { display: grid; grid-template-columns: 100%; gap: 47px; padding-left: 27.5px; padding-right: 27.5px; } .lv2-flow-list__item::after { content: ""; position: absolute; display: block; } .lv2-flow-list__item::after { content: ""; display: block; position: absolute; width: 20px; height: 15px; left: calc(50% - 10px); top: auto; margin-top: 16px; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2215%22%20viewBox%3D%220%200%2021%2015%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M20.5%207.10526V0L10.5%207.89474L0.5%200V7.10526L10.5%2015L20.5%207.10526Z%22%20fill%3D%22%23B9141E%22%2F%3E%3C%2Fsvg%3E"); } .lv2-flow-list__item:last-of-type::after { display: none; } } @media (min-width: 1024px) { .lv2-flow-card { height: 100%; display: grid; border-radius: 16px; border: 1px solid var(--EAEAEA, #eaeaea); overflow: hidden; background: var(--white, #fff); } .lv2-flow-card__body { padding: 24px; } .lv2-flow-card__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .lv2-flow-card__title small { font-size: 14px; } .lv2-flow-card__description { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } } @media (max-width: 1023px) { .lv2-flow-card { display: grid; border-radius: 16px; border: 1px solid var(--EAEAEA, #eaeaea); overflow: hidden; background: var(--white, #fff); } .lv2-flow-card__body { padding: 24px; } .lv2-flow-card__title { color: var(--NSM-color, #B9141E); text-align: center; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .lv2-flow-card__title small { font-size: 14px; } .lv2-flow-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } } @media (min-width: 1024px) { .features-section { padding-top: 128px; padding-bottom: 128px; } .features-section--white { background: var(--F5F5F7, #f5f5f7); } .features-section__header { display: grid; grid-template-columns: 800fr 592fr; gap: 48px; align-items: center; } .features-section__header--reverse { grid-template-columns: 592fr 800fr; } .features-section__header-image { border-radius: 0px 16px 16px 0px; overflow: hidden; position: relative; } .features-section__header-image img { height: 400px; object-fit: cover; } .features-section__badge-section { position: absolute; top: 22px; left: 26px; } .features-section__badge-section--right { top: 22px; right: 26px; left: auto; } .features-section__badge { width: 148px; height: 148px; background: var(--NSM-color, #b9141e); border-radius: 50%; display: grid; align-items: center; justify-content: center; justify-items: center; } .features-section__badge-inner { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .features-section__badge-inner--internship { padding-top: 30px; } .features-section__badge-number { color: var(--white, var(--white, #fff)); text-align: justify; font-family: Poppins; font-size: 48px; font-style: normal; font-weight: 600; line-height: 100%; /* 48px */ letter-spacing: -2.4px; } .features-section__badge-unit { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; letter-spacing: -1.2px; } .features-section__badge-note { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; /* 12px */ margin-top: 7px; } .features-section__header-detail { display: grid; grid-template-columns: minmax(0, 464px); } .features-section__header--reverse .features-section__header-detail { justify-content: end; } .features-section__header--reverse .features-section__header-image { border-radius: 16px 0px 0px 16px; order: 2; } .features-section__header--reverse .features-section__header-detail { order: 1; } .features-section__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 700; line-height: 90%; /* 21.6px */ margin-top: 8px; } .features-section__title-japanese-block { display: flex; align-items: center; gap: 8px; } .features-section__title-japanese { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 900; line-height: 130%; /* 62.4px */ letter-spacing: -1.92px; } .features-section__catch-copy { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 16px; } .features-section__description { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .features-section__description a { text-decoration: underline; } .features-section__description--small { font-size: 16px; } .features-section__note { margin-top: 16px; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; /* 12px */ } .features-section__flow-list { margin-top: 80px; } } @media (max-width: 1023px) { .features-section { padding-top: 80px; padding-bottom: 80px; } .features-section--white { background: var(--F5F5F7, #f5f5f7); } .features-section__header { display: grid; grid-template-columns: 100%; gap: 32px; align-items: center; } .features-section__header-image { position: relative; } .features-section__badge-section { position: absolute; top: 12px; left: 16px; } .features-section__badge-section--right { top: 12px; right: 16px; left: auto; } .features-section__badge { width: 148px; height: 148px; background: var(--NSM-color, #b9141e); border-radius: 50%; display: grid; align-items: center; justify-content: center; justify-items: center; } .features-section__badge-inner { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .features-section__badge-inner--internship { padding-top: 30px; } .features-section__badge-number { color: var(--white, var(--white, #fff)); text-align: justify; font-family: Poppins; font-size: 48px; font-style: normal; font-weight: 600; line-height: 100%; /* 48px */ letter-spacing: -2.4px; } .features-section__badge-unit { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; letter-spacing: -1.2px; } .features-section__badge-note { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; /* 12px */ margin-top: 7px; } .features-section__header-detail { display: grid; grid-template-columns: 100%; padding-left: 24px; padding-right: 24px; } .features-section__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 700; line-height: 90%; /* 18px */ margin-top: 8px; } .features-section__title-japanese-block { display: flex; align-items: center; gap: 8px; } .features-section__title-japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 900; line-height: 130%; /* 41.6px */ } .features-section__catch-copy { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 16px; } .features-section__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; } .features-section__description br { display: none; } .features-section__note { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; /* 12px */ margin-top: 16px; } .features-section__flow-list { margin-top: 48px; } } @media (min-width: 1024px) { .features-global-nav { padding-top: 96px; padding-bottom: 96px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; background: var(--F5F5F7, #f5f5f7); } .features-global-nav__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(0, 200px)); gap: 16px; justify-content: center; margin-top: 48px; } .features-global-nav-card__image { border-radius: 8px; overflow: hidden; } .features-global-nav-card__title { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ margin-top: 4px; } } @media (max-width: 1023px) { .features-global-nav { padding-top: 80px; padding-bottom: 80px; padding-left: 24px; padding-right: 24px; display: grid; grid-template-columns: 100%; justify-content: center; background: var(--F5F5F7, #f5f5f7); } .features-global-nav__list { display: grid; grid-template-columns: 100%; gap: 24px; justify-content: center; margin-top: 48px; } .features-global-nav-card__image { border-radius: 8px; overflow: hidden; } .features-global-nav-card__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ margin-top: 4px; } } @media (hover: hover) { .features-global-nav-card__image { position: relative; } .features-global-nav-card__image picture { position: relative; } .features-global-nav-card__image picture img { position: relative; transition: transform 0.3s ease-out; } .features-global-nav-card__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .features-global-nav-card__title { transition: color 0.3s ease-out; } .features-global-nav-card:hover .features-global-nav-card__image picture img { will-change: transform; transform: scale(1.1); } .features-global-nav-card:hover .features-global-nav-card__image picture::after { opacity: 1; } .features-global-nav-card:hover .features-global-nav-card__title { color: var(--red, #b9141e); } } @media (min-width: 1024px) { .visitor-jikei-com-banner { display: grid; grid-template-columns: 106px auto; gap: 24px; align-items: center; border-radius: 8px; background: var(--white, #fff); padding-top: 24px; padding-bottom: 24px; padding-left: 64px; padding-right: 64px; } .visitor-jikei-com-banner__catch-copy { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .visitor-jikei-com-banner__text { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .visitor-jikei-com-banner__more { margin-top: 4px; display: inline-grid; grid-template-columns: 16px auto; gap: 8px; align-items: center; justify-content: start; justify-items: start; padding-top: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--000000, #000); } .visitor-jikei-com-banner__more-label { color: var(--000000, #000); text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } } @media (max-width: 1023px) { .visitor-jikei-com-banner { display: grid; gap: 16px; justify-items: center; border-radius: 8px; background: var(--white, #fff); padding-top: 24px; padding-bottom: 24px; padding-left: 24px; padding-right: 24px; } .visitor-jikei-com-banner__catch-copy { text-align: center; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .visitor-jikei-com-banner__text { text-align: center; color: var(--NSM-color, #B9141E); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .visitor-jikei-com-banner__more { margin-top: 4px; display: grid; grid-template-columns: 16px auto; gap: 8px; align-items: center; margin-left: auto; margin-right: 0; padding-top: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--000000, #000); width: fit-content; } .visitor-jikei-com-banner__more-label { color: var(--323232, #000); text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } } @media (hover: hover) { .visitor-jikei-com-banner { position: relative; } .visitor-jikei-com-banner__more { transition: border 0.3s ease-out; } .visitor-jikei-com-banner__more-icon svg path { transition: fill 0.3s ease-out; } .visitor-jikei-com-banner__more-label { transition: color 0.3s ease-out; } .visitor-jikei-com-banner::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 8px; border: solid 1px var(--NSM-color, #b9141e); opacity: 0; background-color: rgba(0, 0, 0, 0.1); transition: opacity 0.3s ease-out; } .visitor-jikei-com-banner:hover .visitor-jikei-com-banner__more { border-bottom: 1px solid var(--NSM-color, #b9141e); } .visitor-jikei-com-banner:hover .visitor-jikei-com-banner__more-icon svg path { fill: var(--NSM-color, #b9141e); } .visitor-jikei-com-banner:hover .visitor-jikei-com-banner__more-label { color: var(--NSM-color, #b9141e); } .visitor-jikei-com-banner:hover::after { opacity: 1; } } @media (min-width: 1024px) { .visitor-section { padding-top: 20px; padding-bottom: 20px; padding-top: 128px; padding-bottom: 128px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .visitor-section__title-japanese { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 700; line-height: 150%; /* 72px */ } .visitor-section__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 700; line-height: 80%; /* 12.8px */ } .visitor-section__body { margin-top: 32px; } .visitor-section--english .visitor-section__title-english { color: var(--000000, #000); text-align: center; font-family: Poppins; font-size: 48px; font-style: normal; font-weight: 700; line-height: 150%; /* 72px */ } .visitor-section--english .visitor-section__title-japanese { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } } @media (max-width: 1023px) { .visitor-section { padding-right: 16px; padding-left: 16px; padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: 100%; justify-content: center; } .visitor-section__title-japanese { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .visitor-section__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 20px; font-style: italic; font-weight: 700; line-height: 100%; /* 20px */ margin-top: 8px; } .visitor-section__body { margin-top: 32px; } .visitor-section--english .visitor-section__title-english { color: var(--000000, #000); text-align: center; font-family: Poppins; font-size: 40px; font-style: normal; font-weight: 700; line-height: 130%; /* 52px */ } .visitor-section--english .visitor-section__title-japanese { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } } @media (min-width: 1024px) { .visitor-section-lv2__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .visitor-section-lv2__title-strong { color: var(--NSM-color, #b9141e); } .visitor-section-lv2__body { margin-top: 8px; } .visitor-section-lv2__dl-list { border-top: 1px solid var(--D9D9D9, #d9d9d9); margin-top: 8px; } .visitor-section-lv2__dl { border-bottom: 1px solid var(--D9D9D9, #d9d9d9); } .visitor-section-lv2__description + .visitor-section-lv2__description { margin-top: 8px; } .visitor-section-lv2__check-list + .visitor-section-lv2__description { margin-top: 16px; } .visitor-section-lv2__club-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 16px; } .visitor-section-lv2__support-link { margin-top: 16px; } .visitor-section-lv2__check-list { margin-top: 16px; } .visitor-section-lv2__language-list { margin-top: 16px; } .visitor-section-lv2__other-language-section { margin-top: 32px; padding-top: 32px; border-top: 1px solid #b9141e; } } @media (max-width: 1023px) { .visitor-section-lv2__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .visitor-section-lv2__title-strong { color: var(--NSM-color, #b9141e); } .visitor-section-lv2__body { margin-top: 12px; } .visitor-section-lv2__dl-list { border-top: 1px solid var(--D9D9D9, #d9d9d9); margin-top: 6px; } .visitor-section-lv2__dl { border-bottom: 1px solid var(--D9D9D9, #d9d9d9); } .visitor-section-lv2__description + .visitor-section-lv2__description { margin-top: 8px; } .visitor-section-lv2__description:has(+ .visitor-section-lv2__other-language-section) { /* 24px */ margin-top: 16px; } .visitor-section-lv2__description:has(+ .visitor-section-lv2__other-language-section) .visitor-section-description { font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; } .visitor-section-lv2__club-list { display: grid; grid-template-columns: 100%; gap: 32px; margin-top: 16px; } .visitor-section-lv2__support-link { margin-top: 16px; } .visitor-section-lv2__check-list { margin-top: 16px; } .visitor-section-lv2__language-list { margin-top: 16px; } .visitor-section-lv2__other-language-section { margin-top: 48px; padding-top: 48px; border-top: 1px solid #b9141e; } .lv2__visitor-parents .visitor-section-lv2__title { font-size: 20px; } } @media (min-width: 1024px) { .visitor-contents-card { border-radius: 16px; overflow: hidden; display: grid; background: #fff; position: relative; height: 100%; box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.08); align-content: start; } .visitor-contents-card--wide { grid-template-columns: 1fr 1fr; } .visitor-contents-card--wide .visitor-contents-card__body { position: relative; padding: 24px; } .visitor-contents-card--wide .visitor-contents-card__more { position: relative; inset: auto; margin-top: 8px; } .visitor-contents-card--wide .visitor-contents-card__title { text-align: left; } .visitor-contents-card__body { padding: 16px 24px; padding-bottom: 45px; } .visitor-contents-card__title { color: var(--555555, #555); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-top: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .visitor-contents-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .visitor-contents-card__more { display: grid; grid-template-columns: 16px auto; justify-content: center; justify-items: center; gap: 4px; align-items: center; position: absolute; bottom: 16px; left: 0; right: 0; margin: auto; } .visitor-contents-card__more-label { color: var(--000000, #000); text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } } @media (max-width: 1023px) { .visitor-contents-card { border-radius: 16px; overflow: hidden; display: grid; background: #fff; position: relative; height: 100%; box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.08); } .visitor-contents-card__body { padding: 16px 24px; padding-bottom: 45px; } .visitor-contents-card__title { color: var(--555555, #555); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-top: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .visitor-contents-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .visitor-contents-card__more { display: grid; grid-template-columns: 16px auto; justify-content: center; justify-items: center; gap: 4px; align-items: center; position: absolute; bottom: 16px; left: 0; right: 0; margin: auto; } .visitor-contents-card__more-label { color: var(--323232, #000); text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } } @media (hover: hover) { .visitor-contents-card__image { position: relative; } .visitor-contents-card__image picture { position: relative; overflow: hidden; } .visitor-contents-card__image picture img { position: relative; transition: transform 0.3s ease-out; } .visitor-contents-card__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3333); opacity: 0; transition: opacity 0.3s ease-out; } .visitor-contents-card__more-label { transition: color 0.3s ease-out; } .visitor-contents-card__more-arrow svg path, .visitor-contents-card__more-arrow svg rect { transition: fill 0.3s ease-out; } .visitor-contents-card:hover .visitor-contents-card__image picture img { will-change: transform; transform: scale(1.1); } .visitor-contents-card:hover .visitor-contents-card__image picture::after { opacity: 1; } .visitor-contents-card:hover .visitor-contents-card__more-label { color: var(--NSM-color, #B9141E); } .visitor-contents-card:hover .visitor-contents-card__more-arrow svg path, .visitor-contents-card:hover .visitor-contents-card__more-arrow svg rect { fill: var(--NSM-color, #B9141E); } } @media (min-width: 1024px) { .visitor-contents-list__list { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; } .visitor-contents-list__item { width: 304px; } .visitor-contents-list__item--wide { width: 608px; } } @media (max-width: 1023px) { .visitor-contents-list__list { display: grid; gap: 32px; padding-left: 19.5px; padding-right: 19.5px; } } @media (min-width: 1024px) { .admission-section { padding-top: 128px; padding-bottom: 128px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-left: 20px; padding-right: 20px; } .admission-section__body { margin-top: 48px; } } @media (max-width: 1023px) { .admission-section { padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 12px; padding-right: 12px; } .admission-section__body { margin-top: 32px; } } @media (min-width: 1024px) { .admission-link { display: inline-grid; border-radius: 999px; background: var(--000000, #000); box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.08); grid-template-columns: auto 32px; align-items: center; padding-top: 24px; padding-bottom: 24px; padding-left: 48px; padding-right: 48px; gap: 4px; } .admission-link__label { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } } @media (max-width: 1023px) { .admission-link { display: inline-grid; border-radius: 999px; background: var(--000000, #000); box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.08); grid-template-columns: auto 32px; align-items: center; justify-content: center; justify-items: center; padding-top: 24px; padding-bottom: 24px; gap: 8px; width: 100%; } .admission-link__label { color: var(--white, var(--white, #FFF)); text-align: center; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } } @media (hover: hover) { .admission-link { transition: background 0.3s ease-out; } .admission-link:hover { background: var(--NSM-color, #b9141e); } } @media (min-width: 1024px) { .admission-table { background: var(--F1F1F1, #f1f1f1); padding: 48px; } .admission-table__table { display: contents; } .admission-table__head { display: contents; } .admission-table__head-row { display: grid; grid-template-columns: 148px 1fr 1fr; border-bottom: 1px dashed var(--707070, #707070); background: var(--555555, #555); padding-left: 24px; padding-right: 24px; padding-top: 8px; padding-bottom: 8px; } .admission-table__head-cell { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; /* 16px */ } .admission-table__head-cell + .admission-table__head-cell { border-left: 1px solid var(--D9D9D9, #d9d9d9); } .admission-table__body { display: contents; } .admission-table__row { display: grid; grid-template-columns: 148px 1fr 1fr; border-bottom: 1px dashed var(--707070, #707070); background: #fff; padding-top: 8px; padding-bottom: 7px; padding-left: 24px; padding-right: 24px; } .admission-table__row:nth-child(2n) { background: var(--FAFAFA, #fafafa); } .admission-table__cell { display: grid; color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ text-align: center; } .admission-table__cell--head { font-weight: 500; } .admission-table__number { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; /* 24px */ } } @media (max-width: 1023px) { .admission-table { background: var(--F1F1F1, #f1f1f1); padding: 32px 12px; } .admission-table__table { display: contents; } .admission-table__head { display: contents; } .admission-table__head-row { display: grid; grid-template-columns: 49px 1fr 1fr; align-items: center; border-bottom: dashed var(--707070, #707070); background: var(--555555, #555); padding-left: 8px; padding-right: 8px; padding-top: 8px; padding-bottom: 8px; } .admission-table__head-cell { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 13px; font-style: normal; font-weight: 500; line-height: 110%; /* 14.3px */ height: 100%; display: flex; align-items: center; justify-content: center; } .admission-table__head-cell + .admission-table__head-cell { border-left: 1px solid var(--D9D9D9, #d9d9d9); } .admission-table__body { display: contents; } .admission-table__row { display: grid; grid-template-columns: 49px 1fr 1fr; align-items: baseline; border-bottom: 1px dashed var(--707070, #707070); background: #fff; padding-top: 8px; padding-bottom: 7px; padding-left: 8px; padding-right: 8px; align-items: center; } .admission-table__row:nth-child(2n) { background: var(--FAFAFA, #fafafa); } .admission-table__cell { display: grid; color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ text-align: center; font-feature-settings: "palt"; } .admission-table__cell--head { text-align: center; font-weight: 500; padding-right: 8px; font-size: 12px; } .admission-table__cell + .admission-table__cell { border-left: 1px solid var(--D9D9D9, #d9d9d9); } .admission-table__number { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 22px; font-style: normal; font-weight: 700; line-height: 100%; /* 24px */ } .admission-table__note { margin-top: 8px; } } @media (min-width: 1024px) { .admission-check-list-section { background: var(--F1F1F1, #f1f1f1); padding: 24px; display: grid; gap: 32px; } .admission-check-list { display: grid; grid-template-columns: 96px 1fr; gap: 16px; } .admission-check-list__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ border-right: 1px solid var(--D9D9D9, #d9d9d9); } .admission-check-item { display: grid; grid-template-columns: 24px 1fr; gap: 4px; padding-top: 8px; padding-bottom: 7px; border-bottom: 1px dashed var(--707070, #707070); } .admission-check-item__text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .admission-check-list-block { padding-top: 24px; padding-bottom: 24px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 768px); justify-content: center; background: var(--FAFAFA, #fafafa); } } @media (max-width: 1023px) { .admission-check-list-section { background: var(--F1F1F1, #f1f1f1); padding: 24px 12px; display: grid; gap: 32px; } .admission-check-list { display: grid; grid-template-columns: 100%; gap: 8px; } .admission-check-list__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding: 0 4px 3px 4px; border-bottom: 1px solid var(--D9D9D9, #d9d9d9); } .admission-check-item { display: grid; grid-template-columns: 24px 1fr; gap: 4px; padding-top: 8px; padding-bottom: 7px; border-bottom: 1px dashed var(--707070, #707070); } .admission-check-item__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .admission-check-item__text-small { font-size: 14px; } .admission-check-list-block { padding-top: 24px; padding-bottom: 24px; padding-left: 12px; padding-right: 12px; display: grid; grid-template-columns: 100%; justify-content: center; background: var(--FAFAFA, #fafafa); } } @media (min-width: 1024px) { .admission-document-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; } .admission-document-card { display: grid; gap: 8px; grid-template-columns: 168fr 224fr; } .admission-document-card__label { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ border-bottom: 1px solid var(--NSM-color, #b9141e); } .admission-document-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .admission-document-card__description small { font-size: 12px; } .admission-document-card--wide { grid-template-columns: 1fr; } .admission-document-card--wide .admission-document-card__body { display: contents; } .admission-document-card--wide .admission-document-card__image { order: 2; width: 200px; margin: auto; } .admission-document-card--wide .admission-document-card__label { order: 1; } .admission-document-card--wide .admission-document-card__description { order: 3; } .admission-document-card--envelope { background: var(--F1F1F1, #f1f1f1); padding: 16px; } } @media (max-width: 1023px) { .admission-document-list { display: grid; grid-template-columns: 100%; gap: 48px; } .admission-document-card { display: grid; gap: 8px; grid-template-columns: 100%; padding-left: 16px; padding-right: 16px; } .admission-document-card__image picture { width: 52.664%; margin: 0 auto; } .admission-document-card__label { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ border-bottom: 1px solid var(--NSM-color, #b9141e); } .admission-document-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .admission-document-card__description small { font-size: 12px; } .admission-document-card__description-small { display: block; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; } .admission-document-card--envelope { background: var(--F1F1F1, #f1f1f1); padding: 16px; } } @media (min-width: 1024px) { .admission-section-lv2__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .admission-section-lv2__body { margin-top: 8px; } .admission-section-lv2__check-list { margin-top: 8px; } .admission-section-lv2__document-list { margin-top: 24px; } .admission-section-lv2__link { text-align: center; margin-top: 48px; padding-bottom: 40px; } .admission-section-lv2__section + .admission-section-lv2__section { margin-top: 24px; } .admission-section-lv2__student-support-table { margin-top: 8px; } .admission-section-lv2__student-supporter { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-top: 8px; } } @media (max-width: 1023px) { .admission-section-lv2__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .admission-section-lv2__body { margin-top: 16px; } .admission-section-lv2__check-list { margin-top: 16px; } .admission-section-lv2__document-list { margin-top: 24px; } .admission-section-lv2__link { text-align: center; margin-top: 48px; } .admission-section-lv2__section + .admission-section-lv2__section { margin-top: 24px; } .admission-section-lv2__student-support-table { margin-top: 8px; } .admission-section-lv2__student-supporter { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-top: 8px; } } @media (min-width: 1024px) { .admission-section-lv3__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .admission-section-lv3__description { color: var(--000000, #000); /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; } } @media (max-width: 1023px) { .admission-section-lv3__title { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .admission-section-lv3__description { color: var(--323232, #000); /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; } } @media (min-width: 1024px) { .admission-flow-section__title { padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .admission-flow-section__title-japanese { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .admission-flow-section__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } .admission-flow-section__list { display: grid; gap: 32px; margin-top: 32px; } .admission-flow-item__header { display: grid; gap: 24px; grid-template-columns: 172px 1fr; align-items: center; } .admission-flow-item__flow { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 600; line-height: 100%; /* 32px */ border-right: 1px solid var(--NSM-color, #b9141e); } .admission-flow-item__flow-number { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 600; line-height: 100%; display: inline-block; margin-left: 8px; } .admission-flow-item__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .admission-flow-item__title strong { color: var(--NSM-color, #b9141e); } .admission-flow-item__description { color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 16px; } } @media (max-width: 1023px) { .admission-flow-section__title { padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .admission-flow-section__title-japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .admission-flow-section__title-english { color: var(--NSM-color, #B9141E); font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } .admission-flow-section__list { display: grid; gap: 32px; margin-top: 32px; } .admission-flow-item__header { display: grid; gap: 8px; grid-template-columns: 100%; } .admission-flow-item__flow { color: var(--NSM-color, #B9141E); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 600; line-height: 100%; /* 32px */ position: relative; padding-bottom: 8px; } .admission-flow-item__flow::after { content: ""; display: block; width: 48px; height: 1px; position: absolute; left: 0; bottom: 0; background: var(--NSM-color, #b9141e); } .admission-flow-item__flow-number { display: inline-block; margin-left: 8px; color: var(--NSM-color, #B9141E); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 600; line-height: 100%; } .admission-flow-item__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .admission-flow-item__title strong { color: var(--NSM-color, #b9141e); } .admission-flow-item__description { color: var(--323232, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 16px; } } @media (min-width: 1024px) { .campus-life-kv { position: relative; padding-bottom: 40px; } .campus-life-kv__image { width: 70.5555555556%; height: 600px; } .campus-life-kv__image img { height: 600px; object-fit: cover; } .campus-life-kv__body { position: absolute; right: min(11.1111111111%, 160px); bottom: 0; width: 532px; border-radius: 16px; background: rgba(185, 20, 30, 0.8); backdrop-filter: blur(4px); padding: 48px; min-height: 480px; display: grid; align-content: center; } .campus-life-kv__title-english { color: var(--white, #fff); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: Poppins; font-size: 80px; font-style: italic; font-weight: 700; line-height: 90%; /* 72px */ } .campus-life-kv__title-japanese { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .campus-life-kv__catch-copy { color: #fff; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 16px; } .campus-life-kv__description { color: #fff; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 16px; } .campus-life-kv__note { display: block; color: #fff; font-family: "Noto Sans JP"; font-size: 13px; font-style: normal; font-weight: 500; line-height: 150%; /* 19.5px */ margin-top: 4px; } } @media (max-width: 1023px) { .campus-life-kv { position: relative; padding-bottom: 0; } .campus-life-kv__image { position: relative; width: 100%; height: 480px; } .campus-life-kv__image img { height: 480px; object-fit: cover; } .campus-life-kv__body { position: relative; width: calc(100% - 32px); min-height: 240px; margin: -80px auto 0 auto; border-radius: 8px; background: rgba(185, 20, 30, 0.8); backdrop-filter: blur(4px); padding: 32px; display: grid; align-content: center; } .campus-life-kv__title-english { color: var(--white, #fff); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 90%; /* 28.8px */ } .campus-life-kv__title-japanese { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .campus-life-kv__catch-copy { color: #fff; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; letter-spacing: -0.025em; /* 30px */ margin-top: 16px; } .campus-life-kv__description { color: #fff; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .campus-life-kv__note { display: block; color: #fff; font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 500; line-height: 150%; /* 15px */ margin-top: 4px; } } @media (min-width: 1024px) { .campus-life-nav { display: grid; padding-left: 20px; padding-right: 20px; grid-template-columns: minmax(0, 1064px); justify-content: center; padding-top: 96px; padding-bottom: 96px; background: var(--F5F5F7, #f5f5f7); } .campus-life-nav__title-japanese { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 700; line-height: 150%; /* 72px */ } .campus-life-nav__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 700; line-height: 80%; /* 12.8px */ } .campus-life-nav__list { margin-top: 48px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .campus-life-nav-card { display: grid; gap: 4px; } .campus-life-nav-card__image { border-radius: 8px; overflow: hidden; } .campus-life-nav-card__label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } } @media (max-width: 1023px) { .campus-life-nav { display: grid; padding-left: 24px; padding-right: 24px; grid-template-columns: minmax(0, 1064px); justify-content: center; padding-top: 80px; padding-bottom: 80px; background: var(--F5F5F7, #f5f5f7); } .campus-life-nav__title-japanese { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .campus-life-nav__title-english { color: var(--NSM-color, #B9141E); text-align: center; font-family: Poppins; font-size: 20px; font-style: italic; font-weight: 700; line-height: 80%; /* 16px */ } .campus-life-nav__list { margin-top: 48px; display: grid; grid-template-columns: 100%; gap: 24px; } .campus-life-nav-card { display: grid; gap: 4px; } .campus-life-nav-card__image { border-radius: 8px; overflow: hidden; } .campus-life-nav-card__label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } } @media (hover: hover) { .campus-life-nav-card__image { position: relative; } .campus-life-nav-card__image picture { position: relative; } .campus-life-nav-card__image picture img { position: relative; transition: transform 0.3s ease-out; } .campus-life-nav-card__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .campus-life-nav-card__label { transition: color 0.3s ease-out; } .campus-life-nav-card:hover .campus-life-nav-card__image picture img { will-change: transform; transform: scale(1.1); } .campus-life-nav-card:hover .campus-life-nav-card__image picture::after { opacity: 1; } .campus-life-nav-card:hover .campus-life-nav-card__label { color: var(--NSM-color, #B9141E); } } @media (min-width: 1024px) { .campus-life-support-section { padding-top: 128px; padding-bottom: 128px; } .campus-life-support-section__body { margin-top: 80px; } .campus-life-support-section-header { display: grid; grid-template-columns: 880fr 528fr; gap: 32px; align-items: center; } .campus-life-support-section-header--reverse { grid-template-columns: 528fr 880fr; } .campus-life-support-section-header--reverse .campus-life-support-section-header__image { order: 2; border-radius: 16px 0px 0px 16px; } .campus-life-support-section-header--reverse .campus-life-support-section-header__body { order: 1; display: grid; justify-content: end; } .campus-life-support-section-header__image { border-radius: 0px 16px 16px 0px; overflow: hidden; } .campus-life-support-section-header__image img { height: 440px; object-fit: cover; } .campus-life-support-section-header__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 80px; font-style: italic; font-weight: 700; line-height: 90%; /* 72px */ } .campus-life-support-section-header__title-japanese { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 130%; /* 26px */ margin-top: 8px; } } @media (max-width: 1023px) { .campus-life-support-section { padding-top: 80px; padding-bottom: 80px; } .campus-life-support-section__body { margin-top: 80px; } .campus-life-support-section-header { display: grid; grid-template-columns: 100%; gap: 32px; padding-right: 16px; } .campus-life-support-section-header__image { border-radius: 0px 16px 16px 0px; overflow: hidden; } .campus-life-support-section-header__title-english { color: var(--NSM-color, #B9141E); font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 700; line-height: 90%; /* 57.6px */ padding: 0 16px; } .campus-life-support-section-header__title-japanese { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 130%; /* 26px */ margin-top: 8px; padding: 0 16px; } } @media (min-width: 1024px) { .top-kv { position: relative; } .top-kv__text-block { position: absolute; left: 4.4444444444%; bottom: 0; margin-bottom: 4.4444444444%; width: 69.4444444444%; } .top-kv__catch-copy { width: 94.4%; } .top-kv__text { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 2.5vw; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ } .top-kv__control-block { position: absolute; left: 0; top: 108px; width: 100%; display: grid; grid-template-columns: minmax(0, 1376px); padding-left: 20px; padding-right: 20px; justify-content: center; justify-items: end; } @keyframes top-kv-control-pc { 0% { translate: 0 -50%; opacity: 0; } 100% { translate: 0 0; opacity: 1; } } .top-kv-control { border-radius: 999px; background: #fff; padding: 8px 24px; display: flex; align-items: center; gap: 8px; opacity: 0; translate: 0 -50%; } .top-kv-control--loaded { animation: top-kv-control-pc 0.25s both; animation-delay: 0.5s; } .top-kv-control__label { color: var(--707070, #707070); font-family: Poppins; font-size: 14px; font-style: italic; font-weight: 500; line-height: 100%; /* 14px */ } .top-kv-control__button { display: block; color: var(--D9D9D9, #d9d9d9); font-family: Poppins; font-size: 14px; font-style: italic; font-weight: 500; line-height: 100%; /* 14px */ transition: color 0.3s ease; } .top-kv-control__button--active { color: var(--NSM-color, #b9141e); pointer-events: none; } .top-kv-control__separator { width: 12px; height: 12px; position: relative; } .top-kv-control__separator::before { content: ""; display: block; width: 16px; height: 1px; background: #707070; position: absolute; left: -2px; top: 50%; rotate: -45deg; } .top-infomation { display: grid; grid-template-columns: minmax(0, 1132px); justify-content: center; padding-left: var(--pc-padding-x); padding-right: var(--pc-padding-x); padding-top: 128px; padding-bottom: 128px; } .top-infomation__inner { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: center; gap: 48px; } .top-infomation-list__title-english { color: var(--111111, #111); text-align: justify; font-family: Poppins; font-size: 80px; font-style: normal; font-weight: 700; line-height: 80%; /* 64px */ letter-spacing: -4px; } .top-infomation-list__title-japanese { color: var(--111111, #111); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 100%; /* 20px */ } .top-infomation-list__title { border-bottom: 1px solid var(--111111, #111); padding-bottom: 7px; height: 148px; display: grid; align-content: end; position: relative; } .top-infomation-list__effect { position: absolute; z-index: -1; } .top-infomation-list__effect--news { width: 207px; top: -7px; left: 124.5px; } .top-infomation-list__effect--topics { width: 179px; top: -7px; left: 73.5px; } .top-infomation-list__effect--open-campus { width: 189px; top: -23px; left: 191.5px; } .top-infomation-list__list { display: grid; } .top-infomation-list__item { border-bottom: 1px dashed #707070; } .top-infomation-list__more { margin-top: 48px; display: grid; justify-content: center; } .top-infomation-card { display: grid; gap: 16px; align-items: center; min-height: 136px; } .top-infomation-card:has(.top-infomation-card__image) { grid-template-columns: 96px 1fr; } .top-infomation-card:has(.top-infomation-card__image) .top-infomation-card__text-block { grid-template-columns: 1fr; } .top-infomation-card:has(.top-infomation-card__image) .top-infomation-card__title-block { grid-column: 1/2; } .top-infomation-card__image { overflow: hidden; border-radius: 4px; } .top-infomation-card__text-block { display: grid; gap: 4px; align-items: center; justify-items: start; grid-template-columns: auto 1fr; } .top-infomation-card__date { color: #323232; text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; /* 12px */ } .top-infomation-card__category { color: #323232; text-align: center; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 100%; /* 12px */ padding-top: 3px; padding-bottom: 3px; border-radius: 999px; border: 1px solid #323232; padding-left: 16px; padding-right: 16px; } .top-infomation-card__title-block { grid-column: 1/3; display: grid; grid-template-columns: 1fr 16px; align-items: center; gap: 16px; width: 100%; } .top-infomation-card__title { color: #323232; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .top-love { position: relative; } .top-love__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .top-love__image picture { width: 100%; height: 100%; } .top-love__image img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .top-love__body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; align-content: center; padding-left: 20px; padding-right: 20px; padding-top: 128px; padding-bottom: 128px; } .top-love__title-japanese { color: #fff; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 700; line-height: 150%; /* 18px */ } .top-love__title-english { color: #fff; text-align: justify; font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 600; line-height: 100%; /* 64px */ letter-spacing: -3.2px; } .top-love__text { color: #fff; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-top: 24px; } .top-love__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 572px; margin-top: 24px; } .top-love__more { margin-top: 24px; } .top-love-card { display: grid; background: #fff; border-radius: 4px; box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.16); overflow: hidden; } .top-love-card__body { padding-top: 16px; padding-bottom: 16px; display: grid; grid-template-columns: 8px auto; gap: 4px; align-items: center; justify-content: center; } .top-love-card__label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 130%; /* 15.6px */ } .top-course { padding-top: 128px; padding-bottom: 128px; background: var(--F9F9F6, #f9f9f6); } .top-course__section { margin-top: 48px; background: #ecece3; } .top-course__section + .top-course__section { margin-top: 0; } .top-course__section:nth-child(2n+1) { background: transparent; } .top-course-section { padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: 800fr minmax(500px, 508fr); gap: 32px; align-items: center; } .top-course-section__title-japanese { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .top-course-section__title-english { color: var(--000000, #000); font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ letter-spacing: -1px; } .top-course-section__text { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 24px; } .top-course-section__dl { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ display: flex; margin-top: 24px; } .top-course-section__dl + .top-course-section__dl { margin-top: 0; } .top-course-section__dl-text-strong { color: var(--NSM-color, #b9141e); } .top-course-section__image { border-radius: 0px 24px 24px 0px; overflow: hidden; } .top-course-section__more { margin-top: 24px; } .top-course-section--reverse { grid-template-columns: minmax(500px, 508fr) 800fr; } .top-course-section--reverse .top-course-section__image { border-radius: 24px 0px 0px 24px; order: 2; } .top-course-section--reverse .top-course-section__body { order: 1; display: grid; justify-content: end; padding-left: 20px; } .top-magazine { padding-top: 128px; padding-bottom: 128px; } .top-magazine__image { margin-top: 48px; } .top-magazine__kv { margin-top: 48px; } .top-magazine__body { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-left: var(--pc-padding-x); padding-right: var(--pc-padding-x); } .top-magazine__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .top-nav { display: grid; grid-template-columns: minmax(0, 1376px); padding-left: 20px; padding-right: 20px; padding-top: 128px; padding-bottom: 128px; justify-content: center; background: var(--F9F9F6, #f9f9f6); } .top-nav__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .top-nav__school { grid-column: 1/4; } .top-nav-school { display: grid; position: relative; overflow: hidden; border-radius: 16px; } .top-nav-school__body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-left: 128px; display: grid; align-content: center; gap: 32px; } .top-nav-school__text { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ position: relative; z-index: 2; } .top-nav-school__more { position: relative; } .top-nav-card { display: grid; position: relative; border-radius: 16px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 75.56%); box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.16); overflow: hidden; } .top-nav-card__body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 24px; display: grid; align-content: space-between; } .top-nav-card__title-english { color: var(--white, var(--white, #fff)); text-align: justify; font-family: Poppins; font-size: 64px; font-style: normal; font-weight: 700; line-height: 100%; /* 64px */ } .top-nav-card__title-japanese { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .top-nav-card__sub-title { color: #fff; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .top-nav-card__sub-title--black { color: var(--000000, #000); } .top-nav-card__text { color: #fff; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .top-nav-card__more { margin-top: 24px; } .top-faq { display: grid; grid-template-columns: minmax(0, 1024px); padding-left: 20px; padding-right: 20px; padding-top: 128px; padding-bottom: 128px; justify-content: center; background: var(--f5f5f5, #f5f5f5); } .top-faq__list { display: grid; gap: 16px; margin-top: 48px; } .top-faq__more { display: flex; justify-content: center; margin-top: 48px; } } @media (max-width: 1023px) { .top { overflow: hidden; } .top-kv { position: relative; } .top-kv__text-block { position: absolute; left: 5.3333333333%; bottom: 0; margin-bottom: 5.3333333333%; width: 85.3333333333%; } .top-kv__catch-copy { width: 85.3333333333%; } .top-kv__text { font-family: "Noto Sans JP"; font-size: 5.3333333333vw; color: var(--000000, #000); font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 2.1333333333vw; } .top-kv__control-block { position: absolute; left: 0; width: 100%; bottom: 76px; display: grid; justify-content: center; justify-items: cenhter; } .top-kv__video { aspect-ratio: auto; } @keyframes top-kv-control-sp { 0% { translate: 0 50%; opacity: 0; } 100% { translate: 0 0; opacity: 1; } } .top-kv-control { border-radius: 999px; background: #fff; padding: 8px 24px; display: flex; align-items: center; gap: 8px; opacity: 0; translate: 0 50%; } .top-kv-control--loaded { animation: top-kv-control-sp 0.25s both; animation-delay: 0.5s; } .top-kv-control__label { color: var(--707070, #707070); font-family: Poppins; font-size: 14px; font-style: italic; font-weight: 500; line-height: 100%; /* 14px */ } .top-kv-control__button { display: block; color: var(--D9D9D9, #d9d9d9); font-family: Poppins; font-size: 14px; font-style: italic; font-weight: 500; line-height: 100%; /* 14px */ transition: color 0.3s ease; } .top-kv-control__button--active { color: var(--NSM-color, #b9141e); pointer-events: none; } .top-kv-control__separator { width: 12px; height: 12px; position: relative; } .top-kv-control__separator::before { content: ""; display: block; width: 16px; height: 1px; background: #707070; position: absolute; left: -2px; top: 50%; rotate: -45deg; } .top-infomation { display: grid; justify-content: center; padding-left: 15px; padding-right: 15px; padding-top: 80px; padding-bottom: 80px; } .top-infomation__inner { display: grid; justify-content: center; gap: 80px; } .top-infomation__news { order: 3; } .top-infomation-list__title-english { color: var(--111111, #111); text-align: justify; font-family: Poppins; font-size: 80px; font-style: normal; font-weight: 700; line-height: 80%; /* 64px */ letter-spacing: -4px; } .top-infomation-list__title-japanese { color: var(--111111, #111); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 100%; /* 20px */ } .top-infomation-list__title { border-bottom: 1px solid var(--111111, #111); padding-bottom: 7px; height: 148px; display: grid; align-content: end; position: relative; } .top-infomation-list__effect { position: absolute; z-index: -1; } .top-infomation-list__effect--news { width: 207px; top: -7px; left: 124.5px; } .top-infomation-list__effect--topics { width: 179px; top: -7px; left: 73.5px; } .top-infomation-list__effect--open-campus { width: 189px; top: -23px; left: 191.5px; } .top-infomation-list__list { display: grid; } .top-infomation-list__item { border-bottom: 1px dashed #707070; } .top-infomation-list__more { margin-top: 48px; display: grid; justify-content: center; } .top-infomation-card { display: grid; gap: 16px; align-items: center; padding-top: 8px; padding-bottom: 8px; } .top-infomation-card:has(.top-infomation-card__image) { grid-template-columns: 96px 1fr; } .top-infomation-card:has(.top-infomation-card__image) .top-infomation-card__text-block { grid-template-columns: 1fr; } .top-infomation-card:has(.top-infomation-card__image) .top-infomation-card__title-block { grid-column: 1/2; } .top-infomation-card__image { overflow: hidden; border-radius: 4px; } .top-infomation-card__text-block { display: grid; gap: 4px; align-items: center; justify-items: start; grid-template-columns: auto 1fr; } .top-infomation-card__date { color: #323232; text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; /* 12px */ } .top-infomation-card__category { color: #323232; text-align: center; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 100%; /* 12px */ padding-top: 3px; padding-bottom: 3px; border-radius: 999px; border: 1px solid #323232; padding-left: 16px; padding-right: 16px; } .top-infomation-card__title-block { grid-column: 1/3; display: grid; grid-template-columns: 1fr 16px; align-items: center; gap: 16px; width: 100%; } .top-infomation-card__title { color: #323232; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .top-love { position: relative; } .top-love__image { position: absolute; top: 0; left: 0; width: 100%; height: 100vw; } .top-love__image picture { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .top-love__image img { width: 100%; height: 100%; object-fit: cover; } .top-love__body { position: relative; padding-bottom: 48px; z-index: 1; } .top-love__mv { display: grid; align-content: space-between; height: 100vw; padding: 15px; } .top-love__title-japanese { color: #fff; font-family: "Noto Sans JP"; font-size: 3.2vw; font-style: normal; font-weight: 700; line-height: 150%; /* 18px */ } .top-love__title-english { color: #fff; text-align: justify; font-family: Poppins; font-size: 12.8vw; font-style: italic; font-weight: 600; line-height: 90%; /* 43.2px */ letter-spacing: -2.4px; } .top-love__text { color: #fff; font-family: "Noto Sans JP"; font-size: 3.7333333333vw; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .top-love__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 244px)); justify-content: center; gap: 8px; margin-top: 24px; margin-left: 4px; margin-right: 4px; } .top-love__more { margin-top: 24px; text-align: center; } .top-love-card { display: grid; background: #fff; border-radius: 4px; box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.16); overflow: hidden; } .top-love-card__body { padding-top: 16px; padding-bottom: 16px; display: grid; grid-template-columns: 8px auto; gap: 4px; align-items: center; justify-content: center; } .top-love-card__label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 130%; /* 15.6px */ } .top-course { padding-top: 80px; padding-bottom: 80px; background: var(--F9F9F6, #f9f9f6); } .top-course__section { margin-top: 48px; background: #ecece3; } .top-course__section + .top-course__section { margin-top: 0; } .top-course__section:nth-child(2n+1) { background: transparent; } .top-course-section { padding-top: 48px; padding-bottom: 48px; display: grid; padding-left: 16px; padding-right: 16px; gap: 16px; } .top-course-section__title-japanese { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .top-course-section__title-english { color: var(--000000, #000); font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 800; line-height: 100%; /* 20px */ letter-spacing: -1px; } .top-course-section__text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-top: 16px; } .top-course-section__dl { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 13px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ display: flex; margin-top: 16px; } .top-course-section__dl + .top-course-section__dl { margin-top: 0; } .top-course-section__dl-text-strong { color: var(--NSM-color, #b9141e); } .top-course-section__image { border-radius: 8px; overflow: hidden; } .top-course-section__more { margin-top: 24px; } .top-magazine { padding-top: 80px; padding-bottom: 80px; } .top-magazine__image { margin-top: 48px; } .top-magazine__kv { margin-top: 48px; } .top-magazine__body { margin-top: 48px; display: grid; justify-content: center; padding-left: 25px; padding-right: 25px; } .top-magazine__list { display: grid; gap: 24px; } .top-nav { display: grid; padding-left: 10px; padding-right: 10px; padding-top: 80px; padding-bottom: 80px; justify-content: center; background: var(--F9F9F6, #f9f9f6); } .top-nav__inner { display: grid; gap: 16px; } .top-nav-school { display: grid; position: relative; overflow: hidden; border-radius: 16px; } .top-nav-school__body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-left: 24px; padding-right: 24px; padding-bottom: 24px; display: grid; align-content: end; gap: 16px; } .top-nav-school__text { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ position: relative; z-index: 2; } .top-nav-school__more { position: relative; } .top-nav-card { display: grid; position: relative; border-radius: 16px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 75.56%); box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.16); overflow: hidden; } .top-nav-card__body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 24px; display: grid; align-content: space-between; } .top-nav-card__title-english { color: var(--white, var(--white, #fff)); text-align: justify; font-family: Poppins; font-size: 48px; font-style: normal; font-weight: 700; line-height: 100%; /* 48px */ } .top-nav-card__title-japanese { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .top-nav-card__sub-title { color: #fff; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .top-nav-card__sub-title--black { color: var(--000000, #000); } .top-nav-card__text { color: #fff; text-align: justify; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .top-nav-card__more { margin-top: 16px; } .top-faq { display: grid; padding-left: 16px; padding-right: 16px; padding-top: 80px; padding-bottom: 80px; justify-content: center; background: var(--f5f5f5, #f5f5f5); } .top-faq__list { display: grid; gap: 16px; margin-top: 32px; } .top-faq__more { display: flex; justify-content: center; margin-top: 32px; } } @media (hover: hover) { .top-kv-control__button { transition: color 0.3s ease; } .top-kv-control__button:hover { color: var(--NSM-color, #b9141e); } .top-infomation-card__image picture { position: relative; transition: scale 0.3s ease-out; } .top-infomation-card__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .top-infomation-card__title { transition: color 0.3s ease-out; } .top-infomation-card:hover .top-infomation-card__image picture { scale: 1.1; } .top-infomation-card:hover .top-infomation-card__image picture::after { opacity: 1; } .top-infomation-card:hover .top-infomation-card__title { color: var(--NSM-color, #b9141e); } .top-love-card__image { overflow: hidden; } .top-love-card__image picture { transition: scale 0.3s ease-out; } .top-love-card__label { transition: color 0.3s ease-out; } .top-love-card:hover .top-love-card__image picture { scale: 1.1; } .top-love-card:hover .top-love-card__label { color: #b9141e; } .top-nav-school__image picture { transition: scale 0.3s ease-out; } .top-nav-school:hover .top-nav-school__image picture { scale: 1.1; } .top-nav-card__image picture { transition: scale 0.3s ease-out; } .top-nav-card:hover .top-nav-card__image picture { scale: 1.1; } } @media (min-width: 1024px) { .school-kv { position: relative; } .school-kv__image picture { height: 832px; } .school-kv__image img { height: 100%; object-fit: cover; object-position: top; } .school-kv__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; align-content: center; gap: 32px; padding-left: 20px; padding-right: 20px; } .school-kv__catch-copy { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 36px; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ } .school-kv__text { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ } } @media (max-width: 1023px) { .school-kv__image picture { height: 530px; } .school-kv__image img { height: 100%; object-fit: cover; object-position: top; } .school-kv__inner { display: grid; grid-template-columns: 100%; justify-content: center; align-content: center; gap: 16px; padding: 32px 24px; } .school-kv__catch-copy { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ letter-spacing: -0.5px; } .school-kv__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 180%; /* 25.2px */ } } @media (min-width: 1024px) { .school-concept-message { padding-top: 128px; padding-bottom: 128px; background: var(--F5F5F7, #f5f5f7); } .school-concept-message__contents { display: grid; grid-template-columns: 1fr 560px; padding-left: 160px; gap: 80px; margin-top: 48px; } .school-concept-message__profile { order: 2; } .school-concept-message__text-block { order: 1; } .school-concept-message__title { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 36px; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ } .school-concept-message__text { color: var(--555555, #555); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 200%; /* 40px */ margin-top: 16px; } .school-concept-message__text + .school-concept-message__text { margin-top: 2em; } .principal-profile { position: relative; } .principal-profile__image { border-radius: 16px 0px 0px 16px; overflow: hidden; } .principal-profile__sign { position: absolute; width: 127px; top: 475px; right: 111px; } .principal-profile__name-block { margin-top: 16px; } .principal-profile__position { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .principal-profile__name-en { color: var(--323232, #323232); font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 80%; } .principal-profile__name-en-initial { color: var(--NSM-color, #b9141e); } .principal-profile__name-ja { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .principal-profile__name-ja-honorific { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; } .principal-profile__text { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 16px; padding-right: 64px; } .jikei-com { background: var(--ECECE3, #ecece3); padding-top: 128px; padding-bottom: 128px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .jikei-com__image { width: 106px; margin: auto; } .jikei-com__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 64px; font-style: normal; font-weight: 700; line-height: 100%; /* 64px */ margin-top: 32px; } .jikei-com__text { color: var(--555555, #555); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ margin-top: 16px; } .jikei-com__concept { margin-top: 48px; } .school-concept__text { color: #323232; text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .school-concept__block { margin-top: 32px; } .school-concept-section { padding: 32px; border-radius: 16px; background: var(--white, #fff); } .school-concept-section__title { padding-top: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .school-concept-section__title-japanese { color: var(--323232, #323232); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 500; line-height: 100%; /* 32px */ } .school-concept-section__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 12px; font-style: italic; font-weight: 600; line-height: 100%; /* 12px */ margin-top: 8px; } .school-concept-section__cuidelines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; } .school-concept-section__pillars { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .school-concept-section__pillar { color: var(--323232, #323232); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ border-radius: 4px; background: var(--f5f5f5, #f5f5f5); padding: 24px; } .school-cuideline { border-radius: 4px; background: var(--f5f5f5, #f5f5f5); padding: 24px; height: 100%; } .school-cuideline__title-japanese { color: var(--323232, #323232); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .school-cuideline__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; /* 12px */ } .school-cuideline__text { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .school-symbol { border-radius: 16px; background: #fff; padding: 32px 64px; display: grid; grid-template-columns: 227px 1fr; gap: 32px; align-items: center; } .school-symbol__image { border-radius: 16px; background: var(--white, #fff); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08); } .school-symbol__concept { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .school-symbol__concept-strong { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 40px; font-style: normal; font-weight: 700; line-height: 150%; /* 60px */ } .school-symbol__text { color: var(--323232, #323232); text-align: justify; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .school-symbol__link-block { margin-top: 24px; } .school-symbol__link { display: inline-grid; grid-template-columns: 24px auto; gap: 8px; align-items: center; } .school-symbol__link-label { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } } @media (max-width: 1023px) { .school-concept-message { padding-top: 96px; padding-bottom: 80px; background: var(--F5F5F7, #f5f5f7); } .school-concept-message__contents { display: grid; grid-template-columns: 100%; gap: 32px; margin-top: 48px; } .school-concept-message__profile { order: 2; padding-left: 24px; } .school-concept-message__text-block { order: 1; padding-left: 20px; padding-right: 20px; } .school-concept-message__title { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .school-concept-message__text { color: var(--555555, #555); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 200%; /* 32px */ margin-top: 16px; } .school-concept-message__text br { display: none; } .school-concept-message__text + .school-concept-message__text { margin-top: 2em; } .principal-profile { position: relative; } .principal-profile__image { border-radius: 16px 0px 0px 16px; overflow: hidden; } .principal-profile__sign { position: relative; } .principal-profile__sign picture { position: absolute; right: 33px; top: -10px; width: 80px; } .principal-profile__name-block { margin-top: 16px; } .principal-profile__position { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .principal-profile__name-en { color: var(--323232, #000); font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 80%; } .principal-profile__name-en-initial { color: var(--NSM-color, #b9141e); } .principal-profile__name-ja { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .principal-profile__name-ja-honorific { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; } .principal-profile__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 16px; margin-right: 24px; } .jikei-com { background: var(--ECECE3, #ecece3); padding-top: 80px; padding-bottom: 80px; padding-left: 24px; padding-right: 24px; display: grid; grid-template-columns: 100%; justify-content: center; } .jikei-com__image { width: 106px; margin: auto; } .jikei-com__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 700; line-height: 100%; /* 32px */ margin-top: 32px; } .jikei-com__text { color: var(--555555, #555); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ margin-top: 16px; } .jikei-com__concept { margin-top: 48px; } .school-concept__text { color: #323232; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .school-concept__block { margin-top: 32px; } .school-concept-section { padding: 32px; border-radius: 16px; background: var(--white, #fff); } .school-concept-section__title { padding-top: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .school-concept-section__title-japanese { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 500; line-height: 100%; /* 32px */ } .school-concept-section__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 12px; font-style: italic; font-weight: 600; line-height: 100%; /* 12px */ margin-top: 8px; } .school-concept-section__cuidelines { display: grid; grid-template-columns: 100%; gap: 16px; margin-top: 16px; } .school-concept-section__pillars { display: grid; grid-template-columns: 100%; gap: 8px; margin-top: 16px; } .school-concept-section__pillar { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ border-radius: 4px; background: var(--f5f5f5, #f5f5f5); padding: 24px; } .school-cuideline { border-radius: 4px; background: var(--f5f5f5, #f5f5f5); padding: 24px; } .school-cuideline__title-japanese { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .school-cuideline__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 600; line-height: 100%; /* 12px */ } .school-cuideline__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .school-symbol { border-radius: 16px; background: #fff; padding: 32px 16px; display: grid; grid-template-columns: 100%; gap: 32px; align-items: center; } .school-symbol__image { border-radius: 16px; background: var(--white, #fff); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08); display: flex; width: 227px; height: 268px; justify-content: center; align-items: center; gap: 10px; margin: 0 auto; } .school-symbol__concept { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .school-symbol__concept-strong { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .school-symbol__text { color: var(--323232, #000); text-align: justify; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .school-symbol__link-block { margin-top: 24px; } .school-symbol__link { display: inline-grid; grid-template-columns: 24px auto; gap: 8px; align-items: center; } .school-symbol__link-label { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } } @media (hover: hover) { .school-symbol__link { transition: opacity 0.3s ease-out; } .school-symbol__link:hover { opacity: 0.85; } } @media (min-width: 1024px) { .overview-table-section { padding-top: 128px; padding-bottom: 128px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 960px); justify-content: center; background: var(--F5F5F7, #f5f5f7); } .overview-table-section__table { border-top: 1px solid var(--707070, #707070); border-bottom: 1px solid var(--707070, #707070); margin-top: 48px; } .overview-table-section__row { padding-top: 16px; padding-bottom: 15px; } .overview-table-section__row + .overview-table-section__row { border-top: 1px dashed var(--707070, #707070); } .overview-row { display: grid; grid-template-columns: 144px 1fr; gap: 16px; align-items: center; } .overview-row__title { padding-left: 16px; color: var(--323232, #323232); /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .overview-row__content { border-left: 1px solid var(--707070, #707070); padding-left: 16px; } .overview-row__text { color: var(--323232, #323232); /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .overview-row__list { display: flex; gap: 3em; } .overview-row__item { position: relative; } .overview-row__item + .overview-row__item::before { position: absolute; left: -1.5em; top: 0; bottom: 0; margin: auto; content: ""; display: block; width: 1px; height: 16px; background: var(--323232, #323232); } .overview-row__pdf-list { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; } .overview-pdf-item { display: grid; grid-template-columns: 26px auto; gap: 8px; align-items: center; } .overview-pdf-item__label { color: var(--323232, #323232); /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .school-history { background: var(--ECECE3, #ecece3); padding-top: 128px; padding-bottom: 128px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 960px); justify-content: center; } .school-history__contents { border-radius: 16px; background: #fff; margin-top: 32px; padding: 64px; padding-left: 121px; } .school-history__list { display: grid; gap: 32px; } .school-history__item { position: relative; display: grid; grid-template-columns: 90px 1fr; align-items: center; } .school-history__item::before { content: ""; display: block; height: calc(100% + 32px); width: 32px; border-left: 1px solid var(--NSM-color, #b9141e); border-top: 1px dotted var(--NSM-color, #b9141e); position: absolute; left: -53px; top: 16px; } .school-history__item::after { content: ""; display: block; width: 9px; height: 9px; background: var(--NSM-color, #b9141e); border-radius: 50%; position: absolute; left: -57px; top: 11px; } .school-history__item:last-child::before { border-left-style: dashed; } .school-history__year { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 500; line-height: 100%; /* 32px */ letter-spacing: -1.6px; } .school-history__label { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .school-course { padding-top: 128px; padding-bottom: 128px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 960px); justify-content: center; background: var(--F5F5F7, #f5f5f7); } .school-course__contents { border-radius: 16px; background: #fff; padding: 64px; margin-top: 32px; } .school-course__text { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .school-course__section { margin-top: 32px; } .school-course-lv2__title { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .school-course-lv2__sub-title { font-size: 14px; font-weight: 400; } .school-course-lv2__text { color: var(--323232, #323232); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .school-course-lv2__section { margin-top: 32px; } .school-course-lv2__list { border-radius: 8px; background: var(--f5f5f5, #f5f5f5); margin-top: 8px; padding: 32px; display: grid; gap: 8px; } .school-course-lv2__note { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ display: block; margin-top: 8px; } .school-course-lv3__title { padding-left: 24px; color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ position: relative; } .school-course-lv3__title::before { content: ""; width: 16px; height: 4px; display: block; background: var(--NSM-color, #b9141e); position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } .school-course-lv3__text { color: var(--323232, #323232); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .school-course-lv3__list { margin-top: 8px; color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ list-style: decimal; padding-left: 1.5em; } .school-course-pdf-link { border-radius: 4px; background: var(--white, #fff); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.04); padding: 8px 24px; display: grid; grid-template-columns: 26px 1fr 16px; align-items: center; gap: 16px; } .school-course-pdf-link__label { color: var(--555555, #555); font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .school-area-list { background: var(--ECECE3, #ecece3); padding-top: 128px; padding-bottom: 128px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 916px); justify-content: center; } .school-area-list__area { margin-top: 32px; } .school-area-list__area + .school-area-list__area { margin-top: 24px; } .school-area-list__link { display: block; border-radius: 4px; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.08); overflow: hidden; } .school-area { display: grid; gap: 8px; } .school-area__title { border-left: 1px solid var(--NSM-color, #b9141e); padding-left: 7px; color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .school-area__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .school-area__link { display: grid; border-radius: 4px; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.08); overflow: hidden; } } @media (max-width: 1023px) { .overview-table-section { padding-top: 128px; padding-bottom: 80px; padding-left: 24px; padding-right: 24px; background: var(--F5F5F7, #f5f5f7); } .overview-table-section__table { border-top: 1px solid var(--707070, #707070); border-bottom: 1px solid var(--707070, #707070); margin-top: 48px; } .overview-table-section__row { padding-top: 16px; padding-bottom: 15px; } .overview-table-section__row + .overview-table-section__row { border-top: 1px dashed var(--707070, #707070); } .overview-row { display: grid; grid-template-columns: 100%; gap: 8px; } .overview-row__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .overview-row__text { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .overview-row__list { display: flex; flex-wrap: wrap; column-gap: 3em; } .overview-row__item { position: relative; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .overview-row__item::after { position: absolute; right: -1.5em; top: 0; bottom: 0; margin: auto; content: ""; display: block; width: 1px; height: 15px; background: var(--323232, #323232); } .overview-row__item:last-child::after { content: none; } .overview-row__pdf-list { display: flex; flex-direction: column; gap: 8px; } .overview-pdf-item { display: grid; grid-template-columns: 22px auto; gap: 8px; align-items: center; } .overview-pdf-item__label { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .school-history { background: var(--ECECE3, #ecece3); padding-top: 80px; padding-bottom: 80px; padding-left: 16px; padding-right: 16px; display: grid; grid-template-columns: 100%; justify-content: center; } .school-history__contents { border-radius: 16px; background: #fff; margin-top: 32px; padding: 48px 16px; } .school-history__list { display: grid; gap: 32px; } .school-history__item { position: relative; display: grid; grid-template-columns: 78px 1fr; } .school-history__item::before { content: ""; display: block; height: calc(100% + 32px); width: 25px; border-left: 1px solid var(--NSM-color, #b9141e); border-top: 1px dotted var(--NSM-color, #b9141e); position: absolute; left: 4px; top: 10px; } .school-history__item::after { content: ""; display: block; width: 9px; height: 9px; background: var(--NSM-color, #b9141e); border-radius: 50%; position: absolute; left: 0; top: 6px; } .school-history__item:last-child::before { height: calc(100% + 0px); border-left-style: dashed; } .school-history__year { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; /* 16px */ letter-spacing: -0.8px; padding-top: 4px; padding-left: 33px; } .school-history__label { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; } .school-course { padding-top: 80px; padding-bottom: 80px; padding-left: 16px; padding-right: 16px; display: grid; grid-template-columns: 100%; justify-content: center; background: var(--F5F5F7, #f5f5f7); } .school-course__contents { border-radius: 16px; background: #fff; padding: 32px 16px; margin-top: 32px; } .school-course__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .school-course__section { margin-top: 32px; } .school-course-lv2__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .school-course-lv2__sub-title { display: block; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; margin-top: -2px; } .school-course-lv2__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .school-course-lv2__section { margin-top: 32px; } .school-course-lv2__list { border-radius: 8px; background: var(--f5f5f5, #f5f5f5); margin-top: 8px; padding: 32px 16px; display: grid; gap: 8px; } .school-course-lv2__note { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ display: block; margin-top: 8px; } .school-course-lv3__title { padding-left: 24px; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; /* 27px */ position: relative; } .school-course-lv3__title::before { content: ""; width: 16px; height: 4px; display: block; background: var(--NSM-color, #b9141e); position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } .school-course-lv3__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .school-course-lv3__list { margin-top: 8px; color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ list-style: decimal; padding-left: 1.5em; } .school-course-pdf-link { border-radius: 4px; background: var(--white, #fff); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.04); padding: 8px 16px; display: grid; grid-template-columns: 26px 1fr 16px; align-items: center; gap: 8px; } .school-course-pdf-link__label { color: var(--555555, #555); font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 130%; /* 18.2px */ padding-left: 8px; } .school-area-list { background: var(--ECECE3, #ecece3); padding-top: 80px; padding-bottom: 80px; padding-left: 36px; padding-right: 36px; } .school-area-list__area { margin-top: 32px; } .school-area-list__area + .school-area-list__area { margin-top: 24px; } .school-area-list__link { display: block; border-radius: 4px; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.08); overflow: hidden; } .school-area { display: grid; gap: 8px; } .school-area__title { border-left: 1px solid var(--NSM-color, #b9141e); padding-left: 7px; color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .school-area__list { display: grid; grid-template-columns: 100%; gap: 8px; } .school-area__link { display: grid; border-radius: 4px; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.08); overflow: hidden; } } @media (hover: hover) { .overview-pdf-item .overview-pdf-item__label { transition: color 0.3s ease-out; } .overview-pdf-item:hover .overview-pdf-item__label { color: var(--NSM-color, #b9141e); transition: color 0.3s ease-out; } .school-course-pdf-link { position: relative; } .school-course-pdf-link .school-course-pdf-link__label { transition: color 0.3s ease-out; } .school-course-pdf-link::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 4px; border: solid 1px var(--NSM-color, #b9141e); transition: opacity 0.3s ease-out; opacity: 0; } .school-course-pdf-link:hover .school-course-pdf-link__label { color: var(--NSM-color, #b9141e); transition: color 0.3s ease-out; } .school-course-pdf-link:hover::after { opacity: 1; } .school-area-list__link picture { background: var(--white, #fff); } .school-area-list__link picture img { transition: opacity 0.3s ease-out; } .school-area-list__link:hover picture img { opacity: 0.5; } } @media (min-width: 1024px) { .school-access-map-section { padding-top: 128px; background: var(--F5F5F7, #f5f5f7); } .school-access-map-section__text { margin-top: 48px; padding-left: 20px; padding-right: 20px; color: var(--323232, #323232); text-align: center; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .school-access-map-section__detail { display: flex; justify-content: center; gap: 16px; margin-top: 48px; } .school-access-map-section__detail-item { display: flex; align-items: center; gap: 4px; } .school-access-map-section__detail-item-icon { display: inline-block; } .school-access-map-section__detail-item-icon svg { width: auto; height: auto; } .school-access-map-section__detail-item-label { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .school-access-map-section__map { margin-top: 16px; } .google-map { height: 550px; } .google-map iframe { display: block; width: 100%; height: 100%; border: 0; } .school-route { background: var(--ECECE3, #ecece3); padding-top: 128px; padding-bottom: 128px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .school-route__section + .school-route__section { margin-top: 80px; } .school-route-section__header { display: grid; align-items: center; gap: 32px; } .school-route-section__title { border-radius: 16px; border: 1px solid var(--NSM-color, #b9141e); display: grid; justify-content: center; align-content: center; height: 100%; padding-top: 31px; padding-bottom: 31px; } .school-route-section__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 700; line-height: 80%; /* 51.2px */ } .school-route-section__title-japanese { color: var(--323232, #323232); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .school-route-section__image { border-radius: 16px; overflow: hidden; } .school-route-section__header--reverse .school-route-section__title { order: 2; } .school-route-section__header--reverse .school-route-section__image { order: 1; } .school-route-section__card-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; } .route-card { display: grid; border-radius: 16px; overflow: hidden; height: 100%; background: var(--white, #fff); } .route-card__body { padding: 8px 24px 24px 24px; } .route-card__title { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 600; line-height: 150%; /* 24px */ border-bottom: 1px solid var(--NSM-color, #b9141e); } .route-card__title-number { font-size: 24px; } .route-card__description { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } } @media (max-width: 1023px) { .school-access-map-section { padding-top: 80px; background: var(--F5F5F7, #f5f5f7); } .school-access-map-section__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 32px; padding-left: 24px; padding-right: 24px; } .school-access-map-section__detail { display: grid; gap: 12px; margin-top: 32px; padding-left: 24px; padding-right: 24px; } .school-access-map-section__detail-item { display: flex; align-items: center; gap: 4px; } .school-access-map-section__detail-item-icon { display: inline-block; } .school-access-map-section__detail-item-icon svg { width: auto; height: auto; } .school-access-map-section__detail-item-label { color: var(--323232, #000); font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .school-access-map-section__detail-item-label-small { color: var(--323232, #000); font-family: Poppins "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; } .school-access-map-section__map { margin-top: 48px; } .google-map { height: 232px; } .google-map iframe { display: block; width: 100%; height: 100%; border: 0; } .school-route { background: var(--ECECE3, #ecece3); padding-top: 80px; padding-bottom: 80px; padding-left: 24px; padding-right: 24px; display: grid; grid-template-columns: 100%; justify-content: center; } .school-route__section + .school-route__section { margin-top: 80px; } .school-route-section__header { display: grid; grid-template-columns: 100%; align-items: center; gap: 32px; } .school-route-section__header--reverse { grid-template-columns: 100%; } .school-route-section__title { border-radius: 16px; border: 1px solid var(--NSM-color, #b9141e); display: grid; gap: 8px; justify-content: center; align-content: center; padding: 32px 16px; } .school-route-section__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 80%; /* 38.4px */ } .school-route-section__title-japanese { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .school-route-section__image { border-radius: 16px; overflow: hidden; } .school-route-section__card-list { display: grid; grid-template-columns: 100%; gap: 32px; margin-top: 32px; } .route-card { display: grid; border-radius: 16px; overflow: hidden; background: var(--white, #fff); } .route-card__body { padding: 8px 24px 24px 24px; } .route-card__title { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 600; line-height: 36px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .route-card__title-number { font-size: 24px; display: inline-block; margin-left: 4px; } .route-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } } @media (min-width: 1024px) { .school-equipment-section { display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 128px; padding-bottom: 128px; background: var(--F5F5F7, #f5f5f7); } .school-equipment-section__contents { margin-top: 48px; } .school-equipment-section__title-lv2 { color: var(--323232, #323232); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .school-equipment-section__text { color: var(--323232, #323232); text-align: center; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .school-equipment-section__equipment-list { display: grid; gap: 48px; margin-top: 48px; } .floor { padding-left: 80px; padding-right: 80px; } .floor--open .floor__main-image { opacity: 1; } .floor--reverse .floor__label-block { right: auto; left: -80px; } .floor__header { position: relative; transition: height 0.25s ease-in-out; } .floor__thumbnail { position: absolute; top: 0; left: 0; width: 100%; transition: opacity 0.25s ease-in-out; opacity: 1; aspect-ratio: 1024/390; border-radius: 16px; overflow: hidden; } .floor__main-image { position: absolute; top: 0; left: 0; width: 100%; transition: opacity 0.25s ease-in-out; opacity: 0; aspect-ratio: 1024/590; border-radius: 16px; overflow: hidden; } .floor__label-block { border-radius: 8px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px); position: absolute; right: -80px; top: 108px; width: 287px; height: 172px; padding: 24px 32px; } .floor__label { color: var(--323232, #323232); font-family: Poppins; font-size: 48px; font-style: normal; font-weight: 600; line-height: 100%; /* 48px */ } .floor__label-number { color: var(--NSM-color, #b9141e); } .floor__room-list { margin-top: 4px; display: grid; gap: 4px; } .floor__room-item { position: relative; padding-left: 16px; color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .floor__room-item::before { content: ""; display: block; width: 8px; height: 2px; background: var(--NSM-color, #b9141e); position: absolute; left: 0; top: 0; bottom: 0; margin: auto; } .floor__body { transition: height 0.25s ease-in-out; overflow: hidden; } .floor__body-inner { padding-top: 32px; padding-bottom: 32px; display: grid; gap: 32px; } .floor__label-state { position: absolute; bottom: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #707070; transition: opacity 0.25s ease-in-out; } .floor__label-state span { position: absolute; inset: 0; margin: auto; display: block; width: 16px; height: 1px; background: #707070; } .floor__label-state span:nth-child(2) { transform: rotate(90deg); } .floor--open .floor__label-state { opacity: 0; } .floor__close-button-block { display: grid; justify-content: center; } .floor__close-button { display: grid; grid-template-columns: auto 16px; align-items: center; gap: 4px; } .floor__close-button-label { color: var(--555555, #555); text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .floor-room { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .floor-room--reverse .floor-room__images { order: 2; } .floor-room--reverse .floor-room__body { order: 1; } .floor-room__images { border-radius: 8px; overflow: hidden; } .floor-room__title { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ letter-spacing: -3.2px; position: relative; padding-left: 32px; } .floor-room__title::before { content: ""; display: block; width: 24px; height: 4px; background: var(--NSM-color, #b9141e); position: absolute; left: 0; top: 0; bottom: 0; margin: auto; } .floor-room__catch-copy { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .floor-room__description { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } } @media (max-width: 1023px) { .school-equipment-section { display: grid; grid-template-columns: 100%; justify-content: center; padding-top: 80px; padding-bottom: 80px; background: var(--F5F5F7, #f5f5f7); } .school-equipment-section__contents { margin-top: 32px; } .school-equipment-section__title-lv2 { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 22px; font-style: normal; font-weight: 700; line-height: 150%; /* 33px */ padding-left: 24px; padding-right: 24px; } .school-equipment-section__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; padding-left: 24px; padding-right: 24px; } .school-equipment-section__equipment-list { display: grid; margin-top: 32px; } .school-equipment-section__equipment-item:nth-of-type(1) { margin-bottom: 88px; } .school-equipment-section__equipment-item:nth-of-type(2) { margin-bottom: 115px; } .school-equipment-section__equipment-item:nth-of-type(3) { margin-bottom: 115px; } .school-equipment-section__equipment-item:nth-of-type(4) { margin-bottom: 144px; } .school-equipment-section__equipment-item:nth-of-type(5) { margin-bottom: 115px; } .school-equipment-section__equipment-item:nth-of-type(6) { margin-bottom: 88px; } .school-equipment-section__equipment-item:nth-of-type(7) { margin-bottom: 115px; } .school-equipment-section__equipment-item:nth-of-type(8) { margin-bottom: 40px; } .school-equipment-section__equipment-item:nth-of-type(8) .floor .floor-room__image:nth-of-type(1) { display: none; } .floor { /* &--open &__label-state { opacity: 0; } */ } .floor--open .floor__main-image { opacity: 1; } .floor--open .floor__label-block { opacity: 0; } .floor--reverse .floor__label-block { right: 16px; left: auto; } .floor--reverse .floor__label-state { margin-left: auto; margin-right: 0; } .floor__header { display: grid; grid-template-columns: 100%; position: relative; transition: height 0.25s ease-in-out; } .floor__thumbnail { position: absolute; top: 0; left: 0; width: 100%; transition: opacity 0.25s ease-in-out; aspect-ratio: 375/245; overflow: hidden; opacity: 1; } .floor__main-image { position: absolute; top: 0; left: 0; width: 100%; transition: opacity 0.25s ease-in-out; opacity: 0; aspect-ratio: 375/245; overflow: hidden; } .floor__label-block { border-radius: 8px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px); position: absolute; left: 16px; top: 149px; width: fit-content; min-width: 200px; padding: 24px 32px 16px 32px; transition: opacity 0.25s ease-in-out; } .floor__label { color: var(--323232, #000); font-family: Poppins; font-size: 28px; font-style: normal; font-weight: 600; line-height: 100%; /* 28px */ } .floor__label-number { color: var(--NSM-color, #b9141e); } .floor__room-list { margin-top: 4px; display: grid; gap: 4px; } .floor__room-item { position: relative; padding-left: 16px; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .floor__room-item::before { content: ""; display: block; width: 8px; height: 2px; background: var(--NSM-color, #b9141e); position: absolute; left: 0; top: 0; bottom: 0; margin: auto; } .floor__body { transition: height 0.25s ease-in-out; overflow: hidden; } .floor__body-inner { padding-top: 32px; padding-bottom: 0; display: grid; gap: 16px; } .floor__label-state { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #707070; margin-top: 8px; } .floor__label-state span { position: absolute; inset: 0; margin: auto; display: block; width: 16px; height: 1px; background: #707070; } .floor__label-state span:nth-child(2) { transform: rotate(90deg); } .floor__close-button-block { display: grid; justify-content: center; } .floor__close-button { display: grid; grid-template-columns: auto 16px; align-items: center; gap: 4px; } .floor__close-button-label { color: var(--555555, #555); text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .floor .floor-room { display: grid; grid-template-columns: 100%; gap: 8px; padding-right: 24px; padding-left: 24px; } .floor .floor-room__images { border-radius: 8px; overflow: hidden; } .floor .floor-room__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ position: relative; padding-left: 32px; } .floor .floor-room__title::before { content: ""; display: block; width: 24px; height: 4px; background: var(--NSM-color, #b9141e); position: absolute; left: 0; top: 0; bottom: 0; margin: auto; } .floor .floor-room__catch-copy { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } .floor .floor-room__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 8px; } } @media (hover: hover) { .floor__header { cursor: pointer; } .floor__header .floor__thumbnail picture img { transition: transform 0.6s ease-out; } .floor__header .floor__thumbnail::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.3s ease-out; } .floor__header .floor__main-image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.3s ease-out; } .floor__header:hover .floor__thumbnail picture img { transform: scale(1.1); } .floor__header:hover .floor__thumbnail::after { opacity: 1; } .floor__header:hover .floor__main-image::after { opacity: 1; } .floor__close-button { cursor: pointer; } .floor__close-button:hover .floor__close-button-label { color: var(--NSM-color, #b9141e); } .floor__close-button:hover .floor__close-button-icon svg path, .floor__close-button:hover .floor__close-button-icon svg rect { fill: var(--NSM-color, #b9141e); } } @media (min-width: 1024px) { .school-faq-section { background: var(--ECECE3, #ecece3); padding-top: 128px; } .school-faq-section__category { padding-top: 128px; padding-bottom: 128px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-left: 20px; padding-right: 20px; } .school-faq-section__category:nth-of-type(1) { padding-top: 48px; } .school-faq-section__category:nth-of-type(2n) { background: var(--FAFAFA, #fafafa); } .school-faq-section__nav { display: grid; grid-template-columns: minmax(0, 858px); justify-content: center; padding-left: 20px; padding-right: 20px; margin-top: 48px; } .school-faq-section__nav-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .faq-category__title { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 400; line-height: 150%; /* 48px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .faq-category__item-list { display: grid; gap: 16px; margin-top: 16px; } } @media (max-width: 1023px) { .school-faq-section { background: var(--ECECE3, #ecece3); padding-top: 80px; } .school-faq-section__category { padding-top: 32px; padding-bottom: 32px; display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 16px; padding-right: 16px; } .school-faq-section__category:nth-of-type(1) { padding-top: 48px; } .school-faq-section__category:nth-of-type(2n) { background: var(--FAFAFA, #fafafa); } .school-faq-section__nav { display: grid; margin-top: 48px; padding-left: 14px; padding-right: 14px; } .school-faq-section__nav-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; } .school-faq-section .lv2-page-nav-link__label { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 700; line-height: 130%; /* 15.6px */ } .school-faq-section .lv2-page-nav-link__arrow { display: none; } .faq-category__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .faq-category__item-list { display: grid; gap: 16px; margin-top: 16px; } } @media (min-width: 1024px) { .recruit { display: grid; grid-template-columns: minmax(0, 960px); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 128px; padding-bottom: 128px; background: var(--F9F9F6, #f9f9f6); } .recruit__section { margin-top: 48px; } .recruit-section-lv2__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 400; line-height: 150%; /* 48px */ border-bottom: 1px solid var(--NSM-color, #b9141e); padding-bottom: 7px; } .recruit-section-lv2__lead { color: #000; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 16px; } .recruit-section-lv2__text { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 16px; } .recruit-section-lv2__text + .recruit-section-lv2__text { margin-top: 48px; } .recruit-section-lv2__text-strong { color: var(--NSM-color, #b9141e); font-weight: 700; } .recruit-section-lv2__section { margin-top: 16px; border-top: 1px solid #707070; } .recruit-section-lv2__section + .recruit-section-lv2__section { margin-top: 0; } .recruit-section-lv2__section:last-of-type { border-bottom: 1px solid #707070; } .recruit-section-lv3__title { background: var(--EAEAEA, #eaeaea); padding: 16px; color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .recruit-section-lv3__work-item { border-top: 1px dashed #707070; } .recruit-section-lv3__text-wrapper { border-top: 1px dashed #707070; padding: 16px; } .recruit-section-lv3__item { color: #000; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .recruit-section-lv3__text { color: #000; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .recruit-list-item { padding: 16px; } .recruit-list-item__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .recruit-list-item__description { color: #000; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } } @media (max-width: 1023px) { .recruit { display: grid; padding-left: 20px; padding-right: 20px; padding-top: 80px; padding-bottom: 80px; background: var(--F9F9F6, #f9f9f6); } .recruit__section { margin-top: 48px; } .recruit-section-lv2__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 400; line-height: 150%; /* 48px */ border-bottom: 1px solid var(--NSM-color, #b9141e); padding-bottom: 7px; } .recruit-section-lv2__lead { color: #000; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 16px; } .recruit-section-lv2__text { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 16px; } .recruit-section-lv2__text + .recruit-section-lv2__text { margin-top: 48px; } .recruit-section-lv2__text-strong { color: var(--NSM-color, #b9141e); font-weight: 700; } .recruit-section-lv2__section { margin-top: 16px; border-top: 1px solid #707070; } .recruit-section-lv2__section + .recruit-section-lv2__section { margin-top: 0; } .recruit-section-lv2__section:last-of-type { border-bottom: 1px solid #707070; } .recruit-section-lv3__title { background: var(--EAEAEA, #eaeaea); padding: 16px; color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .recruit-section-lv3__work-item { border-top: 1px dashed #707070; } .recruit-section-lv3__text-wrapper { border-top: 1px dashed #707070; padding: 16px; } .recruit-section-lv3__item { color: #000; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .recruit-section-lv3__text { color: #000; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .recruit-list-item { padding: 16px; } .recruit-list-item__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .recruit-list-item__description { color: #000; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } } @media (min-width: 1024px) { .mind-kv { position: relative; } .mind-kv__image picture { height: 832px; } .mind-kv__image img { height: 100%; object-fit: cover; } .mind-kv__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; align-content: center; padding-left: 20px; padding-right: 20px; } .mind-kv__catch-copy-english { color: #fff; font-family: Poppins; font-size: 40px; font-style: normal; font-weight: 700; line-height: 90%; /* 36px */ } .mind-kv__catch-copy-japanese { width: 565px; margin-top: 8px; } .mind-kv__catch-copy2 { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ margin-top: 24px; } .mind-kv__text { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ margin-top: 16px; } } @media (max-width: 1023px) { .mind-kv__image picture { height: 530px; } .mind-kv__image img { height: 100%; object-fit: cover; object-position: top; } .mind-kv__inner { position: relative; display: grid; grid-template-columns: 100%; justify-content: center; align-content: center; gap: 16px; padding: 32px 24px; } .mind-kv__catch-copy { width: 100%; position: absolute; top: 0; left: 0; padding-left: 32px; padding-right: 32px; padding-bottom: 48px; transform: translateY(-100%); } .mind-kv__catch-copy-english { color: #FFF; font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 700; line-height: 90%; /* 21.6px */ } .mind-kv__catch-copy-japanese { width: 96.463%; margin-top: 16px; } .mind-kv__catch-copy2 { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .mind-kv__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 180%; /* 25.2px */ } } @media (min-width: 1024px) { .com-debut-information-center { display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 48px; } .presentation-of-new-talent-graph { padding-top: 48px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-left: 20px; padding-right: 20px; } .presentation-of-new-talent-graph__flow { border-radius: 24px; border: 1px solid var(--NSM-color, #b9141e); background: var(--white, #fff); padding: 32px 48px; display: grid; gap: 48px; } .presentation-of-new-talent-graph__flow1 { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-top: 8px; padding-bottom: 8px; border-radius: 8px; background: var(--NSM-color, #b9141e); } .presentation-of-new-talent-graph__flow2 { border-radius: 16px; background: var(--NSM-color, #b9141e); padding: 32px 48px; display: grid; gap: 8px; position: relative; } .presentation-of-new-talent-graph__flow2::before { content: ""; position: absolute; top: -32px; left: 0; right: 0; width: 70px; height: 24px; border-left: 35px solid transparent; border-right: 35px solid transparent; border-top: 24px solid #707070; margin: auto; } .presentation-of-new-talent-graph__flow-title { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ text-align: center; } .presentation-of-new-talent-graph__flow-description { color: var(--white, var(--white, #fff)); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .presentation-of-new-talent-graph__companies-achievement { margin-top: 16px; } .companies-achievement-section { border-radius: 24px; border: 1px solid var(--NSM-color, #b9141e); background: var(--white, #fff); padding: 32px 48px; } .companies-achievement-section__header { display: flex; gap: 16px; align-items: center; border-bottom: 1px dashed var(--NSM-color, #b9141e); padding-bottom: 3px; } .companies-achievement-section__title { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .companies-achievement-section__note { color: #000; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .companies-achievement-section__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; } .companies-achievement-section__item { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 130%; /* 18.2px */ } .companies-achievement-section__etc { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 130%; /* 18.2px */ text-align: right; margin-top: -16px; } } @media (max-width: 1023px) { .com-debut-information-center { padding-top: 48px; display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 16px; padding-right: 16px; } .presentation-of-new-talent-graph { padding-top: 48px; display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 16px; padding-right: 16px; } .presentation-of-new-talent-graph__flow { display: grid; gap: 32px; border-radius: 16px; border: 1px solid var(--NSM-color, #B9141E); background: var(--white, #FFF); padding: 32px 16px; } .presentation-of-new-talent-graph__flow1 { color: var(--white, var(--white, #FFF)); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-top: 8px; padding-bottom: 8px; border-radius: 8px; background: var(--NSM-color, #b9141e); } .presentation-of-new-talent-graph__flow2 { border-radius: 16px; background: var(--NSM-color, #b9141e); padding: 32px; display: grid; gap: 8px; position: relative; } .presentation-of-new-talent-graph__flow2::before { content: ""; position: absolute; top: -20px; left: 0; right: 0; width: 34.64px; height: 12px; border-left: 17.32px solid transparent; border-right: 17.32px solid transparent; border-top: 12px solid #707070; margin: auto; } .presentation-of-new-talent-graph__flow-title { color: var(--white, var(--white, #FFF)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ text-align: center; } .presentation-of-new-talent-graph__flow-description { color: var(--white, var(--white, #FFF)); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .presentation-of-new-talent-graph__flow-description__companies-achievement { margin-top: 16px; } .companies-achievement-section { border-radius: 24px; border: 1px solid var(--NSM-color, #b9141e); background: var(--white, #fff); padding: 32px 16px; margin-top: 16px; } .companies-achievement-section__header { display: flex; flex-direction: column; align-items: start; gap: 2px; border-bottom: 1px dashed var(--NSM-color, #b9141e); padding-bottom: 7px; } .companies-achievement-section__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .companies-achievement-section__note { color: #000; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .companies-achievement-section__list { display: grid; grid-template-columns: 100%; gap: 6px; margin-top: 16px; } .companies-achievement-section__item { /* 18.2px */ color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 130%; /* 15.6px */ } .companies-achievement-section__etc { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 130%; /* 15.6px */ text-align: right; margin-top: -15.6px; } } @media (min-width: 1024px) { .com-career-center { padding-top: 48px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .com-career-center__points { margin-top: 24px; } .com-career-center__after-graduation-support { margin-top: 24px; } .ccc-introduction { display: grid; grid-template-columns: 384px minmax(0, 608px); justify-content: center; align-items: center; align-content: center; gap: 8px 32px; } .ccc-introduction__title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ grid-row: 1/2; } .ccc-introduction__description { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ grid-row: 2/3; grid-column: 1/2; } .ccc-introduction__workplace-introduction-graph { grid-row: 1/3; grid-column: 2/3; } .ccc-points__title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 700; line-height: 150%; text-align: center; border-bottom: 1px solid var(--NSM-color, #b9141e); } .ccc-points__title-number { font-family: Poppins; font-size: 64px; font-weight: 600; } .ccc-point-section { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; padding-bottom: 15px; border-bottom: 1px dashed var(--NSM-color, #b9141e); padding-top: 16px; } .ccc-point-section__body:has(.ccc-point-section__image) { display: grid; grid-template-columns: 1fr minmax(0, 300px); gap: 16px; align-items: center; } .ccc-point-section__title-point { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 600; line-height: 100%; /* 32px */ border-bottom: 1px solid var(--NSM-color, #b9141e); padding-bottom: 3px; text-align: center; } .ccc-point-section__title-number { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 600; line-height: 80%; /* 38.4px */ display: inline-block; margin-left: 4px; } .ccc-point-section__title-text { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 4px; text-align: center; } .ccc-point-section__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .ccc-point-section__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; } .ccc-point-section__item { border-radius: 4px; border: 1px solid var(--NSM-color, #b9141e); background: var(--white, #fff); padding-top: 7px; padding-bottom: 7px; color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ text-align: center; } .ccc-point-section__image { border-radius: 16px; overflow: hidden; } .ccc-after-graduation-support-section__title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .ccc-after-graduation-support-section__description { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 8px; } .ccc-after-graduation-support-section__flow { display: grid; grid-template-columns: 172px 1fr 172px; padding-left: 54px; padding-right: 54px; padding-top: 24px; padding-bottom: 24px; gap: 56px; border-radius: 16px; background: var(--white, #fff); margin-top: 16px; align-items: center; } .ccc-after-graduation-support-section__flow-item { border-radius: 16px; background: var(--NSM-color, #b9141e); padding: 16px 24px; color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 36px; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ text-align: center; position: relative; } .ccc-after-graduation-support-section__flow-item:has(.ccc-after-graduation-support-section__flow-item-note) { padding-top: 16px; padding-bottom: 16px; } .ccc-after-graduation-support-section__flow-item + .ccc-after-graduation-support-section__flow-item::before, .ccc-after-graduation-support-section__flow-item + .ccc-after-graduation-support-section__flow-item::after { content: ""; display: block; width: 11px; height: 16px; background-color: #000; position: absolute; left: -17px; } .ccc-after-graduation-support-section__flow-item + .ccc-after-graduation-support-section__flow-item::before { bottom: 50%; transform: skewX(36deg) translate(-16px, 0); } .ccc-after-graduation-support-section__flow-item + .ccc-after-graduation-support-section__flow-item::after { top: 50%; transform: skewX(-36deg) translate(-16px, 0); } .ccc-after-graduation-support-section__flow-item-note { color: #fff; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ display: block; } .joint-company-briefing-session { display: grid; grid-template-columns: minmax(0, 1024px); padding-left: 20px; padding-right: 20px; padding-top: 48px; justify-content: center; } .internship { display: grid; grid-template-columns: minmax(0, 1024px); padding-left: 20px; padding-right: 20px; padding-top: 48px; justify-content: center; } } @media (max-width: 1023px) { .com-career-center { padding-top: 48px; padding-left: 16px; padding-right: 16px; display: grid; grid-template-columns: 100%; justify-content: center; } .com-career-center__points { margin-top: 48px; } .com-career-center__after-graduation-support { margin-top: 48px; } .ccc-introduction { display: grid; grid-template-columns: 100%; } .ccc-introduction__title { color: var(--NSM-color, #B9141E); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .ccc-introduction__description { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 8px; } .ccc-introduction__workplace-introduction-graph { margin-top: 32px; } .ccc-points__title { color: var(--NSM-color, #B9141E); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; text-align: center; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .ccc-points__title-number { font-family: Poppins; font-size: 48px; font-weight: 600; } .ccc-point-section { display: grid; grid-template-columns: 100%; justify-items: center; gap: 16px; align-items: center; padding-bottom: 31px; border-bottom: 1px dashed var(--NSM-color, #b9141e); padding-top: 48px; } .ccc-point-section__body:has(.ccc-point-section__image) { display: grid; grid-template-columns: 100%; gap: 16px; align-items: center; } .ccc-point-section__body:has(.ccc-point-section__image) .ccc-point-section__text-block { grid-row: 2/3; } .ccc-point-section__body:has(.ccc-point-section__image) .ccc-point-section__image { grid-row: 1/2; } .ccc-point-section__title-point { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 600; line-height: 100%; /* 32px */ border-bottom: 1px solid var(--NSM-color, #b9141e); padding-bottom: 3px; margin: 0 auto; text-align: center; width: fit-content; } .ccc-point-section__title-number { color: var(--NSM-color, #B9141E); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 600; line-height: 80%; /* 38.4px */ display: inline-block; margin-left: 4px; } .ccc-point-section__title-text { color: var(--NSM-color, #B9141E); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 4px; text-align: center; } .ccc-point-section__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .ccc-point-section__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 8px; } .ccc-point-section__item { border-radius: 4px; border: 1px solid var(--NSM-color, #b9141e); background: var(--white, #fff); padding-top: 7px; padding-bottom: 7px; color: var(--NSM-color, #B9141E); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ text-align: center; } .ccc-point-section__image { border-radius: 8px; overflow: hidden; } .ccc-after-graduation-support-section__title { color: var(--NSM-color, #B9141E); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .ccc-after-graduation-support-section__description { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } .ccc-after-graduation-support-section__flow { display: grid; grid-template-columns: 100%; grid-template-rows: auto; justify-items: center; padding-left: 16px; padding-right: 16px; padding-top: 24px; padding-bottom: 24px; gap: 32px; border-radius: 16px; background: var(--white, #fff); margin-top: 16px; align-items: center; } .ccc-after-graduation-support-section__flow-item { border-radius: 16px; background: var(--NSM-color, #b9141e); padding: 16px 32px; color: var(--white, var(--white, #FFF)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ width: fit-content; text-align: center; position: relative; } .ccc-after-graduation-support-section__flow-item:first-of-type { min-width: 172px; font-size: 28px; } .ccc-after-graduation-support-section__flow-item:has(.ccc-after-graduation-support-section__flow-item-note) { width: 100%; color: var(--white, var(--white, #FFF)); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ padding-top: 16px; padding-bottom: 16px; } .ccc-after-graduation-support-section__flow-item + .ccc-after-graduation-support-section__flow-item::after { content: ""; display: block; position: absolute; top: -20px; left: calc(50% - 8px); width: 16px; height: 12px; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2217%22%20height%3D%2212%22%20viewBox%3D%220%200%2017%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M16.5%205.68421V0L8.5%206.31579L0.5%200V5.68421L8.5%2012L16.5%205.68421Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); } .ccc-after-graduation-support-section__flow-item-note { color: #FFF; text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ display: block; } .joint-company-briefing-session { display: grid; grid-template-columns: 100%; padding-left: 16px; padding-right: 16px; justify-content: center; } .internship { display: grid; grid-template-columns: 100%; padding-left: 16px; padding-right: 16px; justify-content: center; } } @media (min-width: 1024px) { .career-results { background: var(--F5F5F7, #f5f5f7); } .career-results__category:nth-of-type(2n) { background: var(--F9F9F6, #f9f9f6); } .career-results-category-section { padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; padding-left: 20px; padding-right: 20px; } .career-results-category-section__title { padding-top: 8px; padding-bottom: 7px; color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ border-bottom: 1px solid var(--NSM-color, #b9141e); } .career-results-category-section__list { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .career-results-category-section__item { border-radius: 4px; border: 1px solid var(--D9D9D9, #d9d9d9); background: #fff; display: grid; gap: 8px; padding: 16px; } .career-results-category-section__item-name { color: #000; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ text-align: center; } .career-results-category-section__item-name span { font-size: 12px; } .career-results-category-section__item-type { border-radius: 4px; background: var(--F5F5F7, #f5f5f7); padding: 4px 8px; color: var(--707070, #707070); text-align: center; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } .career-results-category-section__note { margin-top: 32px; color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } } @media (max-width: 1023px) { .career-results { background: var(--F5F5F7, #f5f5f7); } .career-results__category:nth-of-type(2n) { background: var(--F9F9F6, #f9f9f6); } .career-results-category-section { padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 32px; padding-right: 32px; } .career-results-category-section__title { padding-top: 8px; padding-bottom: 7px; color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ border-bottom: 1px solid var(--NSM-color, #b9141e); } .career-results-category-section__list { margin-top: 32px; display: grid; grid-template-columns: 100%; gap: 16px; } .career-results-category-section__item { border-radius: 4px; border: 1px solid var(--D9D9D9, #d9d9d9); background: #fff; display: grid; gap: 8px; padding: 16px; } .career-results-category-section__item-name { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ text-align: center; } .career-results-category-section__item-name span { font-size: 12px; } .career-results-category-section__item-type { border-radius: 4px; background: var(--F5F5F7, #f5f5f7); padding: 4px 8px; color: var(--707070, #707070); text-align: center; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } .career-results-category-section__note { margin-top: 32px; /* 24px */ color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } } @media (min-width: 1024px) { .related-corporate-project { padding-top: 48px; } .related-corporate-project__title { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .related-corporate-project__flow-list { margin-top: 32px; } .related-corporate-project__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .corporate-project { padding-top: 48px; display: grid; grid-template-columns: minmax(0, 1168px); justify-content: center; padding-left: 20px; padding-right: 20px; } .corporate-project__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .corporate-project-card { height: 100%; display: grid; border-radius: 16px; overflow: hidden; background-color: #fff; width: 100%; grid-template-rows: auto 1fr; } .corporate-project-card__body { padding: 16px 0; display: grid; align-content: space-between; align-items: center; grid-template-rows: 1fr auto; } .corporate-project-card__title { color: var(--555555, #555); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .corporate-project-card__more { margin-top: 8px; text-align: center; } } @media (max-width: 1023px) { .related-corporate-project { padding-top: 48px; } .related-corporate-project__title { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .related-corporate-project__flow-list { margin-top: 32px; } .related-corporate-project__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .corporate-project { padding-top: 48px; display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 12px; padding-right: 12px; } .corporate-project__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .corporate-project-card { height: 100%; width: 100%; display: grid; overflow: hidden; border-radius: 8px; border: 1px solid var(--EAEAEA, #eaeaea); background-color: #fff; grid-template-rows: auto 1fr; } .corporate-project-card__body { padding: 12px 8px; display: grid; align-content: space-between; align-items: center; grid-template-rows: 1fr auto; } .corporate-project-card__title { color: var(--555555, #555); text-align: center; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 700; line-height: 150%; /* 18px */ } .corporate-project-card__more { margin-top: 8px; text-align: center; } } @media (hover: hover) { .corporate-project-card__image { position: relative; overflow: hidden; } .corporate-project-card__image picture { position: relative; } .corporate-project-card__image picture img { position: relative; transition: transform 0.3s ease-out; } .corporate-project-card__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .corporate-project-card__title { transition: color 0.3s ease-out; } .corporate-project-card .c-text-more__icon svg path { transition: fill 0.3s ease-out; } .corporate-project-card .c-text-more__label { transition: color 0.3s ease-out; } .corporate-project-card:hover .corporate-project-card__image picture img { will-change: transform; transform: scale(1.1); } .corporate-project-card:hover .corporate-project-card__image picture::after { opacity: 1; } .corporate-project-card:hover .corporate-project-card__title { color: var(--NSM-color, #b9141e); } .corporate-project-card:hover .c-text-more__icon svg path { fill: var(--323232, #000); } .corporate-project-card:hover .c-text-more__label { color: var(--323232, #000); } } @media (min-width: 1024px) { .w-major-curriculum { padding-top: 48px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .w-major-curriculum__title { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .w-major-curriculum__flow-list { margin-top: 32px; } .w-major-curriculum__result { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ border-radius: 8px; border: 1px solid var(--NSM-color, #b9141e); background: var(--white, #fff); margin-top: 32px; } .w-major-curriculum-system { display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 96px; } .w-major-curriculum-system__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 36px; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .w-major-curriculum-system__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 32px; } .w-major-curriculum-example__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .w-major-curriculum-example__image-list { margin-top: 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; position: relative; } .w-major-curriculum-example__image-list::before, .w-major-curriculum-example__image-list::after { content: ""; display: block; width: 80px; height: 8px; position: absolute; top: 156px; left: 0; right: 0; margin: auto; background-color: #b9141e; } .w-major-curriculum-example__image-list::before { rotate: 45deg; } .w-major-curriculum-example__image-list::after { rotate: -45deg; } .w-major-curriculum-example__image { overflow: hidden; border-radius: 16px; } } @media (max-width: 1023px) { .w-major-curriculum { padding-top: 48px; display: grid; grid-template-columns: 100%; justify-content: center; } .w-major-curriculum__title { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ padding-left: 24px; padding-right: 24px; } .w-major-curriculum__flow-list { margin-top: 32px; } .w-major-curriculum__result { color: var(--NSM-color, #B9141E); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ border-radius: 8px; border: 1px solid var(--NSM-color, #b9141e); background: var(--white, #fff); padding-top: 8px; padding-bottom: 8px; margin-top: 32px; margin-left: 24px; margin-right: 24px; } .w-major-curriculum-system { display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 16px; padding-right: 16px; padding-top: 48px; } .w-major-curriculum-system__title { color: var(--NSM-color, #B9141E); text-align: center; font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 700; line-height: 150%; /* 42px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .w-major-curriculum-system__list { display: grid; grid-template-columns: 100%; gap: 48px; margin-top: 32px; } .w-major-curriculum-example__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .w-major-curriculum-example__image-list { margin-top: 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; position: relative; } .w-major-curriculum-example__image-list::before, .w-major-curriculum-example__image-list::after { content: ""; display: block; width: 40px; height: 4px; position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; background-color: #b9141e; } .w-major-curriculum-example__image-list::before { rotate: 45deg; } .w-major-curriculum-example__image-list::after { rotate: -45deg; } .w-major-curriculum-example__image { overflow: hidden; border-radius: 8px; } } @media (min-width: 1024px) { .overseas-training { display: grid; padding-left: 20px; padding-right: 20px; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-top: 48px; } .overseas-training__section + .overseas-training__section { margin-top: 48px; } .overseas-training__sister-school-section-block { border-radius: 16px; border: 1px solid var(--NSM-color, #b9141e); background: #fff; padding: 47px; margin-top: 64px; } .overseas-training-section__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 700; line-height: 150%; /* 72px */ } .overseas-training-section__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .overseas-training-section__note { font-size: 12px; font-weight: 400; } .overseas-training-section__example { margin-top: 32px; } .overseas-training-section__example + .overseas-training-section__example { margin-top: 48px; } .overseas-training-example__title { border-bottom: 1px solid var(--NSM-color, #b9141e); } .overseas-training-example__title-english { color: var(--NSM-color, #b9141e); text-align: justify; font-family: Poppins; font-size: 36px; font-style: italic; font-weight: 600; line-height: 100%; /* 36px */ } .overseas-training-example__title-japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .overseas-training-example__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 16px; } .overseas-training-example-card { border-radius: 16px; overflow: hidden; background-color: #fff; height: 100%; } .overseas-training-example-card__body { padding: 24px; } .overseas-training-example-card__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ padding-top: 7px; padding-bottom: 7px; border-radius: 999px; border: 1px solid var(--NSM-color, #b9141e); } .overseas-training-example-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .sister-school-section__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .sister-school-section__list { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .sister-school__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; } .sister-school__description { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .new-york { padding-top: 48px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; } .new-york__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .new-york__lecturer { margin-top: 32px; } .new-york-card { border-radius: 8px; overflow: hidden; background-color: #fff; height: 100%; } .new-york-card__body { padding: 16px; } .new-york-card__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins, "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .new-york-card__category { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins, "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 600; line-height: 150%; /* 30px */ } .new-york-card__header { height: 88px; display: grid; align-content: center; border-bottom: 1px solid var(--NSM-color, #b9141e); padding-bottom: 7px; } .new-york-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .new-york-lecturer { border-radius: 16px; background: var(--white, #fff); padding-top: 48px; padding-bottom: 48px; padding-left: 60px; padding-right: 60px; } .new-york-lecturer__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 80%; /* 38.4px */ text-align: center; } .new-york-lecturer__title-japanese { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ text-align: center; } .new-york-lecturer__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; } .dip { padding-top: 48px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; } .dip__title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 40px; font-style: normal; font-weight: 700; line-height: 150%; /* 60px */ } .dip__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 16px; } .dip__image-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 32px; } .dip__image-item { border-radius: 8px; overflow: hidden; } .dip__message { margin-top: 32px; } .dip__voice { margin-top: 32px; } .dip-message { border-radius: 16px; overflow: hidden; position: relative; } .dip-message__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dip-message__image picture { width: 100%; height: 100%; } .dip-message__image img { width: 100%; height: 100%; object-fit: cover; } .dip-message__inner { position: relative; z-index: 1; padding: 48px; } .dip-message__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 80%; /* 38.4px */ } .dip-message__title-japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .dip-message__description { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 400; line-height: 180%; /* 36px */ margin-top: 16px; } .dip-message__director { margin-top: 48px; width: 414px; } .dip-message-director { border-radius: 16px; background: rgba(255, 255, 255, 0.8); padding: 32px; } .dip-message-director__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 25.6px */ } .dip-message-director__title-japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .dip-message-director__name { margin-top: 16px; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .dip-message-director__name-suffix { font-size: 14px; } .dip-message-director__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 16px; } .dip-voice { border-radius: 24px; background: var(--FAFAFA, #fafafa); padding: 48px; display: grid; grid-template-columns: 1fr 335px; gap: 32px; } .dip-voice__title { grid-column: 1/3; } .dip-voice__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 25.6px */ } .dip-voice__title-japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .dip-voice__catch-copy { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .dip-voice__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .dip-voice__name-block { display: flex; align-items: center; gap: 24px; margin-top: 8px; } .dip-voice__course { color: var(--323232, #000); text-align: justify; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .dip-voice__name { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 500; line-height: 150%; /* 36px */ } .dip-voice__name-suffix { font-size: 16px; } .overseas-abroad { padding-top: 48px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; } .overseas-abroad__section-title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ border-bottom: 1px solid var(--NSM-color, #b9141e); } .overseas-abroad__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; } .overseas-abroad__list--4 { grid-template-columns: repeat(4, 1fr); } .overseas-abroad__section + .overseas-abroad__section { margin-top: 32px; } .overseas-abroad__interview { margin-top: 32px; } .overseas-abroad-card { height: 100%; border-radius: 8px; overflow: hidden; background-color: #fff; } .overseas-abroad-card__body { padding: 16px 24px; } .overseas-abroad-card__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins, "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 600; line-height: 150%; /* 30px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .overseas-abroad-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .overseas-abroad-interview { border-radius: 8px; background: var(--NSM-color, #b9141e); padding: 48px; } .overseas-abroad-interview__title { color: #fff; text-align: center; font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 700; line-height: 100%; /* 64px */ } .overseas-abroad-interview__image-block { position: relative; border-radius: 4px; overflow: hidden; margin-top: 10px; } .overseas-abroad-interview__name-block { position: absolute; bottom: 35px; width: 200px; background: var(--111111, #111); padding: 16px; } .overseas-abroad-interview__name-block--1 { left: 0; } .overseas-abroad-interview__name-block--2 { right: 0; } .overseas-abroad-interview__course { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .overseas-abroad-interview__name { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 500; line-height: 150%; } .overseas-abroad-interview__name-suffix { font-size: 16px; } .overseas-abroad-interview__body { padding: 48px; border-radius: 4px; background: #fff; margin-top: 10px; } .overseas-abroad-interview__question { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-left: 26px; position: relative; padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .overseas-abroad-interview__question::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; height: 4px; background: var(--NSM-color, #b9141e); margin: auto; } .overseas-abroad-interview__answer-block { margin-top: 16px; display: grid; grid-template-columns: 48px 1fr; gap: 16px; } .overseas-abroad-interview__answer-name { color: var(--NSM-color, #b9141e); text-align: right; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .overseas-abroad-interview__section + .overseas-abroad-interview__section { margin-top: 32px; } .overseas-abroad-interview__note { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ margin-top: 32px; } } @media (max-width: 1023px) { .overseas-training { display: grid; padding-left: 24px; padding-right: 24px; grid-template-columns: 100%; justify-content: center; padding-top: 48px; } .overseas-training__section + .overseas-training__section { margin-top: 48px; } .overseas-training__sister-school-section-block { border-radius: 16px; border: 1px solid var(--NSM-color, #b9141e); background: #fff; padding: 32px 16px; margin-top: 64px; display: grid; grid-template-columns: 100%; gap: 48px; } .overseas-training-section__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 700; line-height: 150%; /* 42px */ } .overseas-training-section__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; /* 27px */ } .overseas-training-section__note { font-size: 12px; font-weight: 400; } .overseas-training-section__example { margin-top: 48px; } .overseas-training-section__example + .overseas-training-section__example { margin-top: 48px; } .overseas-training-example__title { border-bottom: 1px solid var(--NSM-color, #b9141e); } .overseas-training-example__title-english { color: var(--NSM-color, #B9141E); text-align: justify; font-family: Poppins; font-size: 36px; font-style: italic; font-weight: 600; line-height: 100%; /* 36px */ } .overseas-training-example__title-japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } .overseas-training-example__list { display: grid; grid-template-columns: 100%; gap: 32px; margin-top: 16px; } .overseas-training-example-card { border-radius: 16px; overflow: hidden; background-color: #fff; border: 1px solid var(--EAEAEA, #EAEAEA); } .overseas-training-example-card__body { padding: 24px; } .overseas-training-example-card__title { color: var(--NSM-color, #B9141E); text-align: center; font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ padding-top: 7px; padding-bottom: 7px; border-radius: 999px; border: 1px solid var(--NSM-color, #b9141e); } .overseas-training-example-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .sister-school-section__title { color: var(--NSM-color, #B9141E); text-align: center; font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 700; line-height: 150%; /* 42px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .sister-school-section__list { margin-top: 16px; display: grid; grid-template-columns: 100%; gap: 32px; } .sister-school__title { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .sister-school__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } .new-york { margin-top: 48px; padding-left: 16px; padding-right: 16px; display: grid; grid-template-columns: 100%; justify-content: center; } .new-york__list { display: grid; grid-template-columns: 100%; gap: 32px; } .new-york__lecturer { margin-top: 32px; } .new-york-card { border-radius: 8px; overflow: hidden; background-color: #fff; height: 100%; } .new-york-card__body { padding: 16px; } .new-york-card__title { display: inline; color: var(--NSM-color, #B9141E); text-align: center; font-family: Poppins, "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .new-york-card__category { display: inline; color: var(--NSM-color, #B9141E); text-align: center; font-family: Poppins, "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 600; line-height: 150%; } .new-york-card__header { text-align: center; border-bottom: 1px solid var(--NSM-color, #b9141e); padding-bottom: 7px; } .new-york-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .new-york-lecturer { border-radius: 16px; background: var(--white, #fff); padding-top: 48px; padding-bottom: 48px; padding-left: 11.5px; padding-right: 11.5px; margin-left: -8px; margin-right: -8px; } .new-york-lecturer__title-english { color: var(--NSM-color, #B9141E); font-family: Poppins; font-size: 40px; font-style: italic; font-weight: 700; line-height: 80%; /* 32px */ text-align: center; } .new-york-lecturer__title-japanese { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .new-york-lecturer__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; } .dip { padding-top: 44px; padding-left: 24px; padding-right: 24px; display: grid; grid-template-columns: 100%; justify-content: center; } .dip__title { color: var(--NSM-color, #B9141E); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .dip__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } .dip__image-list { display: grid; grid-template-columns: 59.633% 1fr; grid-template-rows: auto auto; gap: 8px; margin-top: 32px; } .dip__image-item { border-radius: 4px; overflow: hidden; position: relative; } .dip__image-item picture { width: 100%; height: 100%; } .dip__image-item picture img { width: 100%; height: 100%; object-fit: cover; } .dip__image-item:nth-of-type(1) { grid-column: 1/2; grid-row: 1/3; } .dip__image-item:nth-of-type(2) { grid-column: 2/3; grid-row: 1/2; } .dip__image-item:nth-of-type(3) { grid-column: 2/3; grid-row: 2/3; } .dip__message { margin-top: 32px; } .dip-message { overflow: hidden; position: relative; margin-left: -24px; margin-right: -24px; } .dip-message__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dip-message__image picture { width: 100%; height: 100%; } .dip-message__image img { width: 100%; height: 100%; object-fit: cover; } .dip-message__inner { position: relative; z-index: 1; padding: 48px 16px; } .dip-message__title-english { color: var(--NSM-color, #B9141E); font-family: Poppins; font-size: 40px; font-style: italic; font-weight: 700; line-height: 80%; /* 32px */ } .dip-message__title-japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .dip-message__description { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 180%; /* 25.2px */ margin-top: 16px; } .dip-message__director { margin-top: 48px; } .dip-message-director { border-radius: 16px; background: rgba(255, 255, 255, 0.8); padding: 32px 24px; } .dip-message-director__title-english { color: var(--NSM-color, #B9141E); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 25.6px */ } .dip-message-director__title-japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .dip-message-director__name { margin-top: 8px; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .dip-message-director__name-suffix { font-size: 14px; } .dip-message-director__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .dip__voice { margin-left: -8px; margin-right: -8px; padding-top: 32px; } .dip-voice { border-radius: 24px; background: var(--FAFAFA, #FAFAFA); padding: 32px 16px 32px 16px; display: grid; gap: 16px; grid-template-columns: 100%; } .dip-voice__title { grid-row: 1/2; } .dip-voice__image-block { grid-row: 2/3; } .dip-voice__text-block { grid-row: 3/4; } .dip-voice__title-english { color: var(--NSM-color, #B9141E); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 25.6px */ } .dip-voice__title-japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .dip-voice__catch-copy { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .dip-voice__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .dip-voice__name-block { display: flex; align-items: center; gap: 24px; margin-top: 8px; } .dip-voice__course { color: var(--323232, #000); text-align: justify; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .dip-voice__name { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 500; line-height: 150%; /* 36px */ } .dip-voice__name-suffix { font-size: 16px; } .overseas-abroad { padding-top: 48px; padding-left: 24px; padding-right: 24px; display: grid; grid-template-columns: 100%; justify-content: center; } .overseas-abroad__section-title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ border-bottom: 1px solid var(--NSM-color, #b9141e); } .overseas-abroad__list { display: grid; grid-template-columns: 100%; gap: 16px; margin-top: 16px; } .overseas-abroad__section + .overseas-abroad__section { margin-top: 32px; } .overseas-abroad__interview { margin-top: 32px; } .overseas-abroad-card { height: 100%; border-radius: 8px; overflow: hidden; background-color: #fff; } .overseas-abroad-card__body { padding: 16px 24px; } .overseas-abroad-card__title { color: var(--NSM-color, #B9141E); text-align: center; font-family: Poppins, "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 600; line-height: 150%; /* 30px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .overseas-abroad-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .overseas-abroad-interview { border-radius: 8px; background: var(--NSM-color, #b9141e); padding: 48px 12px; margin-left: -24px; margin-right: -24px; } .overseas-abroad-interview__title { color: #FFF; text-align: center; font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 100%; /* 48px */ } .overseas-abroad-interview__image-block { position: relative; border-radius: 4px; overflow: hidden; margin-top: 10px; } .overseas-abroad-interview__name-block { position: absolute; bottom: 17px; width: 157px; background: var(--111111, #111); padding: 12px; } .overseas-abroad-interview__name-block--1 { left: 0; } .overseas-abroad-interview__name-block--2 { right: 0; } .overseas-abroad-interview__course { color: var(--white, var(--white, #FFF)); font-family: "Noto Sans JP"; font-size: 11px; font-style: normal; font-weight: 500; line-height: 150%; /* 16.5px */ } .overseas-abroad-interview__name { color: var(--white, var(--white, #FFF)); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; } .overseas-abroad-interview__name-suffix { font-size: 14px; } .overseas-abroad-interview__body { padding: 32px 16px; border-radius: 4px; background: #fff; margin-top: 10px; } .overseas-abroad-interview__question { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-left: 26px; position: relative; padding-top: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .overseas-abroad-interview__question::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; height: 4px; background: var(--NSM-color, #b9141e); margin: auto; } .overseas-abroad-interview__answer { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .overseas-abroad-interview__answer-block { margin-top: 16px; display: grid; grid-template-columns: 42px 1fr; gap: 16px; } .overseas-abroad-interview__answer-name { color: var(--NSM-color, #B9141E); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .overseas-abroad-interview__section + .overseas-abroad-interview__section { margin-top: 32px; } .overseas-abroad-interview__note { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ margin-top: 32px; } } @media (min-width: 1024px) { .instructor__section + .instructor__section { margin-top: 32px; } .instructor__section:nth-child(2n+1) { background: var(--white, #fff); } .instructor-header { display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 128px; padding-bottom: 48px; } .instructor-header__title-japanese { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 700; line-height: 150%; /* 72px */ } .instructor-header__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 700; line-height: 80%; /* 12.8px */ } .instructor-header__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; } .c-instructor-section { display: grid; grid-template-columns: minmax(0, 1104px); padding-left: 20px; padding-right: 20px; justify-content: center; padding-top: 128px; padding-bottom: 128px; } .c-instructor-section__title { position: relative; } .c-instructor-section__title-effect { position: absolute; } .c-instructor-section__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 100%; /* 48px */ position: relative; z-index: 1; } .c-instructor-section__title-japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ position: relative; z-index: 1; } .c-instructor-section__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 24px; } .c-instructor-section--vocal-musician .c-instructor-section__title-effect { top: -95px; left: -54px; width: 201px; } .c-instructor-section--creater-and-artist .c-instructor-section__title-effect { top: -27px; left: 439px; width: 169px; } .c-instructor-section--dance-kpop .c-instructor-section__title-effect { top: -144px; left: -110px; width: 150px; } .c-instructor-section--actor .c-instructor-section__title-effect { top: -38px; left: 524px; width: 228px; } .c-instructor-section--staff .c-instructor-section__title-effect { top: -36px; left: -118px; width: 110px; } .c-instructor-section--video-creator .c-instructor-section__title-effect { top: -29px; left: 409px; width: 167px; } } @media (max-width: 1023px) { .lv2 { overflow-x: hidden; } .instructor__section:nth-child(2n+1) { background: var(--white, #fff); } .instructor-header { display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 80px; padding-bottom: 48px; } .instructor-header__title-japanese { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .instructor-header__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 700; line-height: 80%; /* 12.8px */ } .instructor-header__nav { display: grid; grid-template-columns: 100%; gap: 8px; margin-top: 48px; } .instructor-header .lv2-page-nav-link { min-height: 55px; } .instructor-header .lv2-page-nav-link__label { font-size: 15px; } .instructor-header .lv2-page-nav-link__label .hide-pc { display: none; } .instructor-header .lv2-page-nav-link__arrow { display: none; } .c-instructor-section { display: grid; grid-template-columns: 100%; padding-left: 16px; padding-right: 16px; justify-content: center; padding-top: 80px; padding-bottom: 80px; } .c-instructor-section__title { position: relative; } .c-instructor-section__title-effect { position: absolute; } .c-instructor-section__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 100%; /* 32px */ position: relative; z-index: 1; } .c-instructor-section__title-japanese { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ position: relative; z-index: 1; } .c-instructor-section__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; } .c-instructor-section--vocal-musician .c-instructor-section__title-effect { top: -55px; left: 183px; width: 160px; } .c-instructor-section--creater-and-artist .c-instructor-section__title-effect { top: -89px; left: 183px; width: 160px; } .c-instructor-section--dance-kpop .c-instructor-section__title-effect { top: -106px; left: 193px; width: 150px; } .c-instructor-section--actor .c-instructor-section__title-effect { top: -126px; left: 173px; width: 200px; } .c-instructor-section--staff .c-instructor-section__title-effect { top: -107px; left: 222px; width: 110px; } .c-instructor-section--video-creator .c-instructor-section__title-effect { top: -113px; left: 3px; width: 167px; } } @media (min-width: 1024px) { .ready-to-work { display: grid; padding-left: 20px; padding-right: 20px; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-top: 80px; } .ready-to-work__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; } .ready-to-work-card { display: grid; } .ready-to-work-card__image { border-radius: 8px; overflow: hidden; } .ready-to-work-card__body { margin-top: 8px; } .ready-to-work-card__title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .ready-to-work-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .ready-to-work-card__more { margin-top: 8px; display: grid; grid-template-columns: 16px auto; justify-content: end; align-items: center; gap: 4px; } .ready-to-work-card__more-label { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .benefits-4year { padding-top: 128px; padding-bottom: 128px; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; } .benefits-4year__title { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 900; line-height: 130%; /* 62.4px */ } .benefits-4year__description { color: #000; text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 16px; } .benefits-4year__overview { margin-top: 48px; } .benefits-4year__section { margin-top: 48px; } .benefits-4year-overview { border-radius: 16px; background: var(--f5f5f5, #f5f5f5); padding: 48px; } .benefits-4year-overview__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .benefits-4year-overview__graph { margin-top: 16px; } .benefits-4year-overview__section { margin-top: 16px; } .benefits-4year-overview__section-title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .benefits-4year-overview__section-title-strong { color: var(--NSM-color, #b9141e); } .benefits-4year-overview__section-description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 4px; } .benefits-4year-lv2__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 130%; /* 41.6px */ } .benefits-4year-lv2__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .benefits-4year-lv2__graph { border-radius: 16px; background: #fff; padding: 48px 64px; margin-top: 32px; } .benefits-4year-faq { padding-top: 128px; padding-bottom: 128px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .benefits-4year-faq__list { margin-top: 48px; display: grid; gap: 16px; } .benefits-4year-faq__voice { margin-top: 48px; } .benefits-banner-section { background: #323232; padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; padding-left: 20px; padding-right: 20px; } } @media (max-width: 1023px) { .ready-to-work { display: grid; padding-left: 24px; padding-right: 24px; justify-content: center; padding-top: 32px; } .ready-to-work__list { display: grid; gap: 48px; } .ready-to-work-card { display: grid; } .ready-to-work-card__image { border-radius: 8px; overflow: hidden; } .ready-to-work-card__body { margin-top: 8px; } .ready-to-work-card__title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .ready-to-work-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .ready-to-work-card__more { margin-top: 8px; display: grid; grid-template-columns: 16px auto; justify-content: end; align-items: center; gap: 4px; } .ready-to-work-card__more-label { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .benefits-4year { padding-top: 80px; padding-bottom: 80px; display: grid; } .benefits-4year__title { color: #000; text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 900; line-height: 130%; /* 41.6px */ padding-left: 24px; padding-right: 24px; } .benefits-4year__description { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 16px; padding-left: 24px; padding-right: 24px; } .benefits-4year__overview { margin-top: 48px; } .benefits-4year__section { margin-top: 48px; } .benefits-4year-overview { background: var(--f5f5f5, #f5f5f5); padding: 48px; padding-left: 20px; padding-right: 20px; } .benefits-4year-overview__title { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .benefits-4year-overview__graph { margin-top: 16px; } .benefits-4year-overview__section { margin-top: 16px; } .benefits-4year-overview__section-title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .benefits-4year-overview__section-title-strong { color: var(--NSM-color, #b9141e); } .benefits-4year-overview__section-description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 4px; } .benefits-4year-lv2__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 130%; /* 41.6px */ padding-left: 24px; padding-right: 24px; } .benefits-4year-lv2__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; padding-left: 24px; padding-right: 24px; } .benefits-4year-lv2__graph { background: #fff; padding: 48px 10px; margin-top: 32px; } .benefits-4year-faq { padding-top: 80px; padding-bottom: 80px; padding-left: 24px; padding-right: 24px; } .benefits-4year-faq__list { margin-top: 48px; display: grid; gap: 16px; } .benefits-4year-faq__voice { margin-top: 48px; } .benefits-banner-section { background: #323232; padding-top: 80px; padding-bottom: 80px; padding-left: 20px; padding-right: 20px; } } @media (hover: hover) { .ready-to-work-card__image { position: relative; } .ready-to-work-card__image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .ready-to-work-card:hover .ready-to-work-card__image::after { opacity: 1; } } @media (min-width: 1024px) { .course-kv { position: relative; } .course-kv__image picture { height: 832px; } .course-kv__image img { height: 100%; object-fit: cover; object-position: top; } .course-kv__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; align-content: center; padding-left: 20px; padding-right: 20px; } .course-kv__catch-copy1 { width: 392px; } .course-kv__catch-copy2 { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ margin-top: 8px; } .course-kv__text { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ margin-top: 16px; } } @media (max-width: 1023px) { .course-kv__image picture { height: 530px; } .course-kv__image img { height: 100%; object-fit: cover; object-position: top; } .course-kv__inner { position: relative; display: grid; grid-template-columns: 100%; justify-content: center; align-content: center; gap: 16px; padding: 32px 24px; } .course-kv__catch-copy1 { width: 100%; position: absolute; top: 0; left: 0; padding-left: 24px; padding-right: 24px; padding-bottom: 48px; transform: translateY(-100%); } .course-kv__catch-copy2 { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .course-kv__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 180%; /* 25.2px */ } } @media (min-width: 1024px) { .course-color-variable--vocal_musician { --course-main-color: #b9141e; --course-section-header-background: rgba(185, 20, 30, 0.8); } .course-color-variable--music-creator_net-artist { --course-main-color: #3f3383; --course-section-header-background: rgba(63, 51, 131, 0.8); } .course-color-variable--dance_k-pop { --course-main-color: #d15a00; --course-section-header-background: rgba(209, 90, 0, 0.8); } .course-color-variable--voice-actor_actor { --course-main-color: #aa1d74; --course-section-header-background: rgba(170, 29, 116, 0.8); } .course-color-variable--concert_manager { --course-main-color: #4c8247; --course-section-header-background: rgba(76, 130, 71, 0.8); } .course-color-variable--video-creator { --course-main-color: #0242b8; --course-section-header-background: rgba(2, 66, 184, 0.8); } .course-target-career-paths { display: grid; grid-template-columns: minmax(0, 1088px); padding-left: 20px; padding-right: 20px; justify-content: center; padding-top: 80px; padding-bottom: 80px; background: var(--ECECE3, #ecece3); } .course-target-career-paths__title { color: var(--course-main-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 700; line-height: 150%; /* 72px */ } .course-target-career-paths__description { color: #000; text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 16px; } .course-target-career-paths__list { display: grid; grid-template-columns: repeat(6, minmax(0, 168px)); gap: 16px; margin-top: 48px; } .course-target-career-path-card { border-radius: 4px; overflow: hidden; width: 100%; display: grid; position: relative; } .course-target-career-path-card__body { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; align-items: end; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; } .course-target-career-path-card__title { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 130%; /* 18.2px */ } .course-target-career-path-card__icon { position: absolute; right: 0; bottom: 0; border-top: 16px solid transparent; border-left: 16px solid transparent; border-right: 16px solid #b9141e; border-bottom: 16px solid #b9141e; } .course-target-career-path-card__icon span { position: absolute; bottom: -6px; right: -12px; width: 8px; height: 2px; background-color: #fff; } .course-target-career-path-card__icon span:nth-child(2) { transform: rotate(90deg); } .course-target-career-path-modal { padding: 48px; } .course-target-career-path-modal__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 100%; /* 20px */ } .course-target-career-path-modal__title br { display: none; } .course-target-career-path-modal__description { margin-top: 12px; color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .course-section { padding-top: 80px; padding-bottom: 80px; } .course-section__body { display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; padding-left: 20px; padding-right: 20px; margin-top: 112px; } .course-section__year-section-grid { display: grid; gap: 32px; } .course-section__year-section-grid + .course-section__year-section-grid { margin-top: 48px; padding-top: 48px; border-top: 1px dashed var(--000000, #000); padding-bottom: 0; } .course-section__year-section-grid--2-1 { grid-template-columns: 2fr 1fr; } .course-section__learn-features-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .course-section__section { margin-top: 80px; } .course-section__message { margin-top: 32px; } .course-section__time-table { margin-top: 80px; } .course-section-lv2__title { display: grid; justify-content: center; border-bottom: 1px solid var(--course-main-color, #b9141e); position: relative; z-index: 1; } .course-section-lv2__title-label { color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 130%; /* 41.6px */ padding-top: 8px; padding-bottom: 7px; position: relative; } .course-section-lv2__title-effect { position: absolute; top: -40px; left: -71px; width: 90px; z-index: -1; } .course-section-lv2__description { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 16px; } .course-section-lv2__list { display: grid; margin-top: 32px; } .course-section-lv2__list--2-column { grid-template-columns: repeat(2, 1fr); gap: 48px; } .course-section-lv2__list--3-column { grid-template-columns: repeat(3, 1fr); gap: 32px; } .course-section-lv2__list--center-big { grid-template-columns: minmax(0, 640px); justify-content: center; } .course-section-lv2__more { display: grid; justify-content: center; margin-top: 32px; } .course-section-header { display: grid; padding-left: 48px; padding-right: 48px; position: relative; } .course-section-header__image { width: 59.5238095238%; border-radius: 8px; overflow: hidden; } .course-section-header__image picture { height: 400px; } .course-section-header__image img { height: 400px; object-fit: cover; object-position: center; } .course-section-header__body { position: absolute; top: 134px; left: 50%; width: 35.7142857143%; min-width: 458px; height: 330px; border-radius: 8px; background: var(--course-section-header-background); backdrop-filter: blur(4px); display: grid; align-items: center; align-content: center; padding: 32px; padding-top: 0; padding-bottom: 0; } .course-section-header__title { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 700; line-height: 130%; /* 62.4px */ } .course-section-header__title--center { text-align: center; } .course-section-header__catch-copy { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 8px; } .course-section-header__description { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } .course-section-header--reverse .course-section-header__image { margin-left: auto; } .course-section-header--reverse .course-section-header__body { left: auto; right: 50%; } .course-year-section__list { display: grid; gap: 32px; margin-top: 24px; } .course-year-section__list--1 { grid-template-columns: 1fr; } .course-year-section__list--2 { grid-template-columns: repeat(2, 1fr); } .course-year-section__list--3 { grid-template-columns: repeat(3, 1fr); } .course-year-section__item { max-width: 373px; flex-shrink: 1; flex-grow: 1; } .course-year-section-header__title { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 0; } .course-year-section-header__title-english { grid-column: 1/3; color: var(--course-main-color, #b9141e); font-family: Poppins; font-size: 40px; font-style: italic; font-weight: 700; line-height: 100%; /* 40px */ } .course-year-section-header__year { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 100%; } .course-year-section-header__year-number { color: var(--000000, #000); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 600; line-height: 100%; /* 48px */ } .course-year-section-header__subject-block { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; position: relative; padding-left: 16px; } .course-year-section-header__special { background: var(--course-main-color, #b9141e); color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-style: normal; font-weight: 700; line-height: 120%; padding-top: 7px; padding-bottom: 7px; padding-left: 23px; padding-right: 23px; border-radius: 4px; border: 1px solid var(--course-main-color, #b9141e); background: var(--white, #fff); font-size: 20px; /* 28.8px */ } .course-year-section-header__special--altitude { background: var(--course-main-color, #b9141e); color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 24px; } .course-year-section-header__subject { color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 120%; /* 28.8px */ } .course-open-campus-nav { background: var(--course-main-color, #b9141e); padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: minmax(0, 1024px); padding-left: 20px; padding-right: 20px; justify-content: center; } .course-open-campus-nav__title { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .course-open-campus-nav__title-strong { color: var(--white, var(--white, #fff)); font-size: 32px; } .course-open-campus-nav__list { display: grid; grid-template-columns: repeat(auto-fill, 235px); justify-content: center; gap: 24px; margin-top: 32px; } .course-open-campus-nav__more { display: grid; justify-content: center; margin-top: 32px; } .course-card { display: grid; } .course-card__image { border-radius: 8px; overflow: hidden; } .course-card__title { color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 8px; } .course-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 4px; } .course-card__table { border-left: 1px solid var(--707070, #707070); border-bottom: 1px solid var(--707070, #707070); border-right: 1px solid var(--707070, #707070); margin-top: 4px; } .course-card__table-row { border-top: 1px solid var(--707070, #707070); display: flex; } .course-card__table-cell { flex-grow: 1; color: var(--323232, #323232); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .course-card__table-cell + .course-card__table-cell { border-left: 1px solid var(--707070, #707070); } .course-learn-feature-card { display: grid; } .course-learn-feature-card__image { border-radius: 8px; overflow: hidden; } .course-learn-feature-card__title { color: var(--course-main-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .course-learn-feature-card__description { margin-top: 4px; color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .course-practice-studio-card { display: grid; grid-template-columns: 1fr 245px; gap: 16px; } .course-practice-studio-card__image { border-radius: 8px; overflow: hidden; } .course-practice-studio-card__title { color: var(--course-main-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .course-practice-studio-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 8px; } .course-time-table-section { background: var(--ECECE3, #ecece3); display: grid; grid-template-columns: minmax(0, 1104px); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 80px; padding-bottom: 80px; } .course-time-table { border-radius: 8px; background: var(--white, #fff); padding-top: 48px; padding-bottom: 48px; display: grid; padding-left: 20px; padding-right: 20px; justify-content: center; } .course-time-table__title { color: var(--323232, #323232); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .course-time-table__selector { display: flex; justify-content: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; } .course-time-table__selector-button { border-radius: 999px; border: 1px solid var(--course-main-color, #b9141e); background: #fff; color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ padding: 3px 15px; } .course-time-table__selector-button--active { background: var(--course-main-color, #b9141e); color: var(--white, #fff); } .course-time-table__body { margin-top: 16px; display: none; } .course-time-table__body--active { display: grid; justify-content: center; } .course-time-table__tbody { display: grid; gap: 4px; } .course-time-table__row { display: grid; grid-template-columns: 64px repeat(5, 1fr); gap: 4px; } .course-time-table__table--6days .course-time-table__row { grid-template-columns: 64px repeat(6, 1fr); } .course-time-table__cell { display: grid; align-content: center; width: 100%; border-radius: 4px; background: var(--FAFAFA, #fafafa); width: 160px; padding-top: 4px; padding-bottom: 4px; position: relative; } .course-time-table__cell:nth-child(1) { width: 64px; } .course-time-table__cell:nth-child(2n) { background: var(--f5f5f5, #f5f5f5); } .course-time-table__cell--empty { background: transparent; } .course-time-table__cell--day { color: var(--323232, #323232); font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ text-align: center; } .course-time-table__cell--time-header { display: grid; gap: 16px; place-items: center; place-content: center; } .course-time-table__cell-time { position: relative; } .course-time-table__cell-time + .course-time-table__cell-time::before { content: ""; display: block; position: absolute; width: 1px; height: 8px; background-color: #000; left: 0; right: 0; top: -12px; margin: auto; } .course-time-table__cell-list { list-style: disc; padding-left: 32px; } .course-time-table__cell-list-item { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 120%; /* 19.2px */ } .course-time-table__cell-list-item-sub { font-size: 14px; } .course-time-table__cell-detail-icon { position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; border: 1px solid #b9141e; border-radius: 50%; } .course-time-table__cell-detail-icon span { display: block; position: absolute; width: 8px; height: 2px; inset: 0; margin: auto; background-color: #b9141e; } .course-time-table__cell-detail-icon span:nth-child(2) { transform: rotate(90deg); } .course-banner-section { padding-top: 80px; padding-bottom: 80px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; background: var(--333333, #333); gap: 32px; } .course-w-mejor-banner { display: grid; grid-template-columns: repeat(2, 1fr); background-color: #000; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.24); border-radius: 8px; overflow: hidden; } .course-w-mejor-banner__image { height: 100%; order: 2; } .course-w-mejor-banner__image picture { height: 100%; } .course-w-mejor-banner__image img { height: 100%; object-fit: cover; } .course-w-mejor-banner__body { padding-top: 45px; padding-bottom: 24px; padding-left: 48px; padding-right: 16px; } .course-w-mejor-banner__title { position: relative; padding-left: 120px; } .course-w-mejor-banner__title-label { color: var(--NSM-color, #b9141e); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 700; line-height: 100%; /* 48px */ } .course-w-mejor-banner__title-badge { position: absolute; top: -24px; left: -29px; width: 157px; } .course-w-mejor-banner__catch-copy { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 10px; position: relative; } .course-w-mejor-banner__text { color: #fff; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .course-w-mejor-banner__more { margin-top: 16px; } .course-debut-banner { display: grid; grid-template-columns: repeat(2, 1fr); background-color: #000; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.24); border-radius: 8px; overflow: hidden; } .course-debut-banner__image { height: 100%; } .course-debut-banner__image picture { height: 100%; } .course-debut-banner__image img { height: 100%; object-fit: cover; } .course-debut-banner__body { padding-top: 49px; padding-bottom: 24px; padding-left: 48px; padding-right: 16px; } .course-debut-banner__title { position: relative; } .course-debut-banner__title-label { color: var(--NSM-color, #b9141e); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 700; line-height: 100%; /* 48px */ position: relative; } .course-debut-banner__title-effect { position: absolute; top: -47px; left: 299px; width: 191px; } .course-debut-banner__catch-copy { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; position: relative; } .course-debut-banner__text { color: #fff; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .course-debut-banner__more { margin-top: 16px; } .course-support-card { display: grid; } .course-support-card__header { display: grid; grid-template-columns: 1fr 236px; gap: 16px; } .course-support-card__image { border-radius: 8px; overflow: hidden; } .course-support-card__header-text-block { display: grid; align-items: center; align-content: center; } .course-support-card__title { color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .course-support-card__sub-title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ /* 24px */ margin-top: 8px; } .course-support-card__description { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 16px; } .course-faq-section { background: var(--ECECE3, #ecece3); padding-top: 128px; padding-bottom: 128px; padding-left: 20px; padding-right: 20px; display: grid; justify-content: center; grid-template-columns: minmax(0, 1024px); } .course-faq-section__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 400; line-height: 150%; /* 48px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .course-faq-section__list { margin-top: 16px; display: grid; gap: 16px; } .c-voice-section { border-radius: 8px; background: #fff; padding: 48px 80px; } .c-voice-section__title { padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--course-main-color, #b9141e); display: flex; align-items: center; } .c-voice-section__title-english { color: var(--course-main-color, #b9141e); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 600; line-height: 80%; /* 25.6px */ } .c-voice-section__title-japanese { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-left: 16px; } .c-voice-section__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 24px; } .c-voice-section__card-list { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 768px); justify-content: center; gap: 32px; } .c-voice-section__card { display: grid; grid-template-columns: 267px 1fr; gap: 16px; align-items: center; } .c-voice-section__card--reverse { grid-template-columns: 1fr 267px; } .c-voice-section__card--reverse .c-voice-section__card-body { order: 1; } .c-voice-section__card--reverse .c-voice-section__card-image { order: 2; } .c-voice-section__card-image { border-radius: 8px; overflow: hidden; } .c-voice-section__card-title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .c-voice-section__card-description { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 16px; } .course-message-card { display: grid; } .course-message-card__image { border-radius: 8px; overflow: hidden; } .course-message-card__label { color: var(--000000, #000); font-family: Poppins, "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; /* 16px */ /* 16px */ margin-top: 8px; } .course-message-card__label--center { text-align: center; } .course-message-card__catch-copy { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 130%; /* 18.2px */ margin-top: 6px; } .course-global-nav { padding-top: 96px; padding-bottom: 96px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1280px); justify-content: center; background: var(--F5F5F7, #f5f5f7); } .course-global-nav__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(0, 200px)); gap: 16px; justify-content: center; margin-top: 48px; } .course-global-nav-card__image { border-radius: 8px; overflow: hidden; } .course-global-nav-card__title { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ margin-top: 4px; } .course-k-pop-audition__title { color: #fff; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-bottom: 7px; border-bottom: 1px solid var(--white, #fff); } .course-k-pop-audition__description { color: #fff; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .course-k-pop-audition__list { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 16px; gap: 16px 32px; } .course-k-pop-audition__item { border-radius: 8px; border: 1px solid var(--white, #fff); padding: 16px; } .course-k-pop-audition__item-title { color: #fff; font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ } .course-k-pop-audition__item-artist-title { margin-top: 8px; color: #fff; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ border-bottom: 1px solid #fff; } .course-k-pop-audition__item-artist-list { color: #fff; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 8px; } .course-employment-section { padding-top: 128px; padding-bottom: 128px; background: var(--F9F9F6, #f9f9f6); } .course-employment-section__body { display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; padding-left: 20px; padding-right: 20px; margin-top: 80px; } .course-employment-section__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .course-employment-section-header { display: grid; grid-template-columns: 800fr 592fr; gap: 48px; align-items: center; } .course-employment-section-header__image { border-radius: 0px 16px 16px 0px; overflow: hidden; } .course-employment-section-header__image img { height: 400px; object-fit: cover; object-position: top; } .course-employment-section-header__body { display: grid; grid-template-columns: minmax(0, 464px); } .course-employment-section-header__title-japanese { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 900; line-height: 130%; /* 62.4px */ } .course-employment-section-header__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 700; line-height: 90%; /* 21.6px */ margin-top: 8px; } .course-employment-section-header__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; } .course-employment-section-header__note { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; /* 12px */ margin-top: 16px; } .course-employment-card { border-radius: 8px; overflow: hidden; background-color: #fff; height: 100%; } .course-employment-card__body { padding: 24px; } .course-employment-card__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .course-employment-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } } @media (max-width: 1023px) { .course-color-variable--vocal_musician { --course-main-color: #b9141e; --course-section-header-background: rgba(185, 20, 30, 0.8); } .course-color-variable--music-creator_net-artist { --course-main-color: #3f3383; --course-section-header-background: rgba(63, 51, 131, 0.8); } .course-color-variable--dance_k-pop { --course-main-color: #d15a00; --course-section-header-background: rgba(209, 90, 0, 0.8); } .course-color-variable--voice-actor_actor { --course-main-color: #aa1d74; --course-section-header-background: rgba(170, 29, 116, 0.8); } .course-color-variable--concert_manager { --course-main-color: #4c8247; --course-section-header-background: rgba(76, 130, 71, 0.8); } .course-color-variable--video-creator { --course-main-color: #0242b8; --course-section-header-background: rgba(2, 66, 184, 0.8); } .course-target-career-paths { display: grid; grid-template-columns: minmax(0, 1088px); padding-left: 16px; padding-right: 16px; justify-content: center; padding-top: 80px; padding-bottom: 80px; background: var(--ECECE3, #ecece3); } .course-target-career-paths__title { color: var(--course-main-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .course-target-career-paths__description { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 16px; } .course-target-career-paths__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 32px; } .course-target-career-path-card { border-radius: 4px; overflow: hidden; width: 100%; display: grid; position: relative; } .course-target-career-path-card__body { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; align-items: end; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; } .course-target-career-path-card__title { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 130%; /* 18.2px */ } .course-target-career-path-card__icon { position: absolute; right: 0; bottom: 0; border-top: 16px solid transparent; border-left: 16px solid transparent; border-right: 16px solid #b9141e; border-bottom: 16px solid #b9141e; } .course-target-career-path-card__icon span { position: absolute; bottom: -6px; right: -12px; width: 8px; height: 2px; background-color: #fff; } .course-target-career-path-card__icon span:nth-child(2) { transform: rotate(90deg); } .course-target-career-path-modal { padding: 32px; } .course-target-career-path-modal__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; /* 16px */ } .course-target-career-path-modal__title br { display: none; } .course-target-career-path-modal__description { margin-top: 12px; color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .course-section { padding-bottom: 80px; } .course-section__body { display: grid; grid-template-columns: 100%; justify-content: center; margin-top: 48px; } .course-section__year-section-grid + .course-section__year-section-grid { margin-top: 48px; } .course-section__learn-features-list { display: grid; grid-template-columns: 100%; gap: 32px; padding-left: 16px; padding-right: 16px; } .course-section__section { margin-top: 80px; padding-left: 16px; padding-right: 16px; } .course-section__message { margin-top: 32px; padding-left: 16px; padding-right: 16px; } .course-section__time-table { margin-top: 80px; padding-left: 16px; padding-right: 16px; } .course-section__year-section-grid { margin-left: 16px; margin-right: 16px; } .course-section__year-section-grid + .course-section__year-section-grid { margin-top: 48px; border-top: 1px dashed var(--000000, #000); padding-top: 48px; } .course-section__year-section:not(.hide-sp) + .course-section__year-section { margin-top: 48px; border-top: 1px dashed var(--000000, #000); padding-top: 48px; } .course-section-lv2__title { display: grid; justify-content: center; border-bottom: 1px solid var(--course-main-color, #b9141e); position: relative; z-index: 1; } .course-section-lv2__title-label { color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 130%; /* 31.2px */ padding-top: 8px; padding-bottom: 7px; } .course-section-lv2__title-effect { position: absolute; top: -37px; left: -4px; width: 80px; z-index: -1; } .course-section-lv2__description { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; /* 27px */ margin-top: 16px; } .course-section-lv2__list { display: grid; margin-top: 32px; gap: 32px; } .course-section-lv2__more { display: grid; justify-content: center; margin-top: 32px; } .course-section-header { position: relative; display: grid; } .course-section-header__image { position: relative; } .course-section-header__body { border-radius: 8px 0px 0px 8px; background: var(--course-section-header-background); backdrop-filter: blur(4px); padding: 24px; margin-left: 20px; margin-right: 20px; margin-top: -80px; min-height: 160px; display: grid; align-items: center; position: relative; z-index: 2; } .course-section-header__title { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 130%; /* 31.2px */ } .course-section-header__title--center { text-align: center; } .course-section-header__catch-copy { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-top: 8px; } .course-section-header__description { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 8px; } .course-section-header--reverse .course-section-header__body { width: calc(100% - 32px); border-radius: 8px; padding: 24px 32px; margin-left: auto; margin-right: auto; margin-top: -64px; } .course-section-header--k-pop-business .course-section-header__body { width: calc(100% - 32px); border-radius: 8px; padding: 24px 32px; margin-left: auto; margin-right: auto; margin-top: -64px; } .course-year-section__list { display: grid; grid-template-columns: 100%; gap: 24px; margin-top: 32px; } .course-year-section-header__title { gap: 16px; } .course-year-section-header__title-english { color: var(--course-main-color, #b9141e); font-family: Poppins; font-size: 36px; font-style: italic; font-weight: 700; line-height: 100%; /* 36px */ padding-bottom: 16px; } .course-year-section-header__year { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 40px; display: inline-block; } .course-year-section-header__year-number { font-family: Poppins; font-size: 40px; font-style: italic; font-weight: 600; } .course-year-section-header__subject-block { display: contents; } .course-year-section-header__special { display: inline-block; color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 120%; /* 24px */ padding-top: 7px; padding-bottom: 7px; padding-left: 23px; padding-right: 23px; border: 1px solid var(--course-main-color, #b9141e); margin-left: 8px; vertical-align: 4px; } .course-year-section-header__special--altitude { border-radius: 4px; background: var(--course-main-color, #b9141e); color: var(--white, var(--white, #fff)); } .course-year-section-header__subject { color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 120%; /* 24px */ margin-top: 10px; } .course-open-campus-nav { background: var(--course-main-color, #b9141e); padding-top: 80px; padding-bottom: 80px; display: grid; padding-left: 20px; padding-right: 20px; } .course-open-campus-nav__title { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .course-open-campus-nav__title-strong { font-size: 24px; } .course-open-campus-nav__list { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: center; gap: 8px; margin-top: 32px; } .course-open-campus-nav__more { display: grid; justify-content: center; margin-top: 32px; } .course-card { display: grid; } .course-card__image { border-radius: 8px; overflow: hidden; } .course-card__title { color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 8px; } .course-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 4px; } .course-card__table { border-left: 1px solid var(--707070, #707070); border-bottom: 1px solid var(--707070, #707070); border-right: 1px solid var(--707070, #707070); margin-top: 4px; } .course-card__table-row { border-top: 1px solid var(--707070, #707070); display: flex; } .course-card__table-cell { flex-grow: 1; color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .course-card__table-cell + .course-card__table-cell { border-left: 1px solid var(--707070, #707070); } .course-learn-feature-card { display: grid; } .course-learn-feature-card__image { border-radius: 8px; overflow: hidden; } .course-learn-feature-card__title { color: var(--course-main-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .course-learn-feature-card__description { margin-top: 4px; color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .course-practice-studio-card { display: grid; gap: 8px; } .course-practice-studio-card__image { border-radius: 8px; overflow: hidden; } .course-practice-studio-card__title { color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } .course-practice-studio-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 8px; } .course-time-table-section { background: var(--ECECE3, #ecece3); display: grid; grid-template-columns: 100%; justify-content: center; padding-top: 80px; padding-bottom: 80px; padding-left: 20px; padding-right: 20px; } .course-time-table { border-radius: 8px; background: var(--white, #fff); padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: 100%; justify-content: center; } .course-time-table__title { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ padding-left: 16px; padding-right: 16px; } .course-time-table__selector { display: flex; justify-content: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; padding-left: 16px; padding-right: 16px; } .course-time-table__selector-item { flex-grow: 1; } .course-time-table__selector-button { border-radius: 4px; border: 1px solid var(--course-main-color, #b9141e); background: #fff; color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; text-align: center; padding: 3px 15px; height: 100%; width: 100%; } .course-time-table__selector-button--active { background: var(--course-main-color, #b9141e); color: var(--white, #fff); } .course-time-table__body { margin-top: 32px; display: none; overflow-x: scroll; } .course-time-table__body--active { display: block; } .course-time-table__table { min-width: 884px; margin-left: 16px; margin-right: 16px; } .course-time-table__tbody { display: grid; gap: 4px; } .course-time-table__row { display: grid; grid-template-columns: 64px repeat(5, 1fr); gap: 4px; } .course-time-table__table--6days .course-time-table__row { grid-template-columns: 64px repeat(6, 1fr); } .course-time-table__cell { display: grid; align-content: center; width: 100%; border-radius: 4px; background: var(--FAFAFA, #fafafa); width: 160px; padding-top: 4px; padding-bottom: 4px; position: relative; } .course-time-table__cell:nth-child(1) { width: 64px; } .course-time-table__cell:nth-child(2n) { background: var(--f5f5f5, #f5f5f5); } .course-time-table__cell--empty { background: transparent; } .course-time-table__cell--day { color: var(--323232, #323232); font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ text-align: center; } .course-time-table__cell--time-header { display: grid; gap: 16px; place-items: center; place-content: center; } .course-time-table__cell-time { position: relative; } .course-time-table__cell-time + .course-time-table__cell-time::before { content: ""; display: block; position: absolute; width: 1px; height: 8px; background-color: #000; left: 0; right: 0; top: -12px; margin: auto; } .course-time-table__cell-list { list-style: disc; padding-left: 32px; } .course-time-table__cell-list-item { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 120%; /* 19.2px */ } .course-time-table__cell-list-item-sub { font-size: 14px; } .course-time-table__cell-detail-icon { position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; border: 1px solid #b9141e; border-radius: 50%; } .course-time-table__cell-detail-icon span { display: block; position: absolute; width: 8px; height: 2px; inset: 0; margin: auto; background-color: #b9141e; } .course-time-table__cell-detail-icon span:nth-child(2) { transform: rotate(90deg); } .course-banner-section { padding-top: 80px; padding-bottom: 80px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; background: var(--333333, #333); gap: 32px; } .course-w-mejor-banner { display: grid; background-color: #000; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.24); border-radius: 8px; overflow: hidden; } .course-w-mejor-banner__body { padding: 24px 16px 32px 16px; position: relative; } .course-w-mejor-banner__title-label { color: var(--white, var(--white, #fff)); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: "Noto Sans JP"; font-size: 36px; font-style: normal; font-weight: 700; line-height: 100%; /* 36px */ } .course-w-mejor-banner__title-badge { position: absolute; top: -103px; right: 0px; width: 157px; } .course-w-mejor-banner__catch-copy { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; position: relative; } .course-w-mejor-banner__text { color: #fff; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 8px; } .course-w-mejor-banner__more { margin-top: 16px; } .course-debut-banner { display: grid; background-color: #000; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.24); border-radius: 8px; overflow: hidden; } .course-debut-banner__body { padding: 24px 16px 32px 16px; position: relative; } .course-debut-banner__title-label { color: var(--white, var(--white, #fff)); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: "Noto Sans JP"; font-size: 36px; font-style: normal; font-weight: 700; line-height: 100%; /* 36px */ position: relative; } .course-debut-banner__title-effect { position: absolute; top: -15px; right: 0px; width: 138px; } .course-debut-banner__catch-copy { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; position: relative; } .course-debut-banner__text { color: #fff; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 8px; } .course-debut-banner__more { margin-top: 16px; } .course-support-card { display: grid; } .course-support-card__header { display: grid; grid-template-columns: 100%; gap: 8px; } .course-support-card__image { border-radius: 8px; overflow: hidden; } .course-support-card__header-text-block { display: grid; } .course-support-card__title { color: var(--course-main-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .course-support-card__sub-title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-top: 8px; } .course-support-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 4px; } .course-faq-section { background: var(--ECECE3, #ecece3); padding-top: 80px; padding-bottom: 80px; padding-left: 16px; padding-right: 16px; display: grid; justify-content: center; grid-template-columns: minmax(0, 1024px); } .course-faq-section__title { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 400; line-height: 150%; /* 36px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .course-faq-section__list { margin-top: 32px; display: grid; gap: 16px; } .c-voice-section { border-radius: 8px; background: #fff; padding: 32px 16px; } .c-voice-section__title { padding-bottom: 7px; border-bottom: 1px solid var(--course-main-color, #b9141e); } .c-voice-section__title-english { color: var(--course-main-color, #b9141e); font-family: Poppins; font-size: 24px; font-style: italic; font-weight: 600; line-height: 80%; /* 19.2px */ } .c-voice-section__title-japanese { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ margin-top: 8px; } .c-voice-section__list { display: grid; grid-template-columns: 100%; gap: 32px; margin-top: 24px; } .c-voice-section__card-list { margin-top: 32px; display: grid; justify-content: center; gap: 32px; } .c-voice-section__card { display: grid; gap: 16px; align-items: center; } .c-voice-section__card-image { border-radius: 8px; overflow: hidden; } .c-voice-section__card-title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .c-voice-section__card-description { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 16px; } .course-message-card { display: grid; } .course-message-card__image { border-radius: 8px; overflow: hidden; } .course-message-card__label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; /* 16px */ margin-top: 8px; } .course-message-card__catch-copy { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 130%; /* 18.2px */ margin-top: 6px; } .course-global-nav { padding-top: 80px; padding-bottom: 80px; padding-left: 24px; padding-right: 24px; display: grid; grid-template-columns: 100%; justify-content: center; background: var(--F5F5F7, #f5f5f7); } .course-global-nav__list { display: grid; grid-template-columns: 100%; gap: 24px; justify-content: center; margin-top: 48px; } .course-global-nav-card__image { border-radius: 8px; overflow: hidden; } .course-global-nav-card__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ margin-top: 4px; } .course-k-pop-audition__title { color: #fff; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-bottom: 7px; border-bottom: 1px solid var(--white, #fff); } .course-k-pop-audition__description { color: #fff; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .course-k-pop-audition__list { display: grid; margin-top: 16px; gap: 16px 32px; } .course-k-pop-audition__item { border-radius: 8px; border: 1px solid var(--white, #fff); padding: 16px; } .course-k-pop-audition__item-title { color: #fff; font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ } .course-k-pop-audition__item-artist-title { margin-top: 8px; color: #fff; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ border-bottom: 1px solid #fff; } .course-k-pop-audition__item-artist-list { color: #fff; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 8px; } .course-employment-section { padding-top: 80px; padding-bottom: 80px; background: var(--F9F9F6, #f9f9f6); } .course-employment-section__body { display: grid; padding-left: 16px; padding-right: 16px; margin-top: 48px; } .course-employment-section__list { display: grid; gap: 32px; } .course-employment-section-header { display: grid; gap: 32px; align-items: center; } .course-employment-section-header__body { padding-left: 16px; padding-right: 16px; margin-top: 32px; } .course-employment-section-header__title-japanese { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 900; line-height: 130%; /* 36.4px */ } .course-employment-section-header__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 700; line-height: 90%; /* 18px */ margin-top: 8px; } .course-employment-section-header__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .course-employment-section-header__note { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; /* 12px */ margin-top: 16px; } .course-employment-card { border-radius: 8px; overflow: hidden; background-color: #fff; } .course-employment-card__body { padding: 16px; } .course-employment-card__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .course-employment-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } } @media (min-width: 1024px) { .course-time-table__cell--detail { cursor: pointer; } } @media (hover: hover) { .course-target-career-path-card__image { position: relative; } .course-target-career-path-card__image picture { position: relative; } .course-target-career-path-card__image picture img { position: relative; transition: transform 0.3s ease-out; } .course-target-career-path-card__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .course-target-career-path-card__icon { transition: border 0.3s ease-out; } .course-target-career-path-card__icon span { transition: background-color 0.3s ease-out; } .course-target-career-path-card:hover .course-target-career-path-card__image picture img { will-change: transform; transform: scale(1.1); } .course-target-career-path-card:hover .course-target-career-path-card__image picture::after { opacity: 1; } .course-target-career-path-card:hover .course-target-career-path-card__icon { border-top: 16px solid transparent; border-left: 16px solid transparent; border-right: 16px solid #fff; border-bottom: 16px solid #fff; } .course-target-career-path-card:hover .course-target-career-path-card__icon span { background-color: #b9141e; } .course-time-table__selector-button { transition: background 0.3s ease-out, color 0.3s ease-out; } .course-time-table__selector-button:hover { background: var(--course-main-color, #b9141e); color: var(--white, #fff); } .course-global-nav-card__image { position: relative; } .course-global-nav-card__image picture { position: relative; } .course-global-nav-card__image picture img { position: relative; transition: transform 0.3s ease-out; } .course-global-nav-card__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .course-global-nav-card__title { transition: color 0.3s ease-out; } .course-global-nav-card:hover .course-global-nav-card__image picture img { will-change: transform; transform: scale(1.1); } .course-global-nav-card:hover .course-global-nav-card__image picture::after { opacity: 1; } .course-global-nav-card:hover .course-global-nav-card__title { color: var(--red, #b9141e); } .course-debut-banner__image picture, .course-w-mejor-banner__image picture { transition: scale 0.3s ease-out; } .course-debut-banner:hover .course-debut-banner__image picture, .course-debut-banner:hover .course-w-mejor-banner__image picture, .course-w-mejor-banner:hover .course-debut-banner__image picture, .course-w-mejor-banner:hover .course-w-mejor-banner__image picture { scale: 1.1; } } @media (min-width: 1024px) { .visitor-nav { background: var(--ECECE3, #ecece3); display: grid; grid-template-columns: minmax(0, 960px); padding-left: 20px; padding-right: 20px; justify-content: center; padding-top: 128px; padding-bottom: 128px; } .visitor-nav--other { background: var(--F5F5F7, #f5f5f7); } .visitor-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; margin-top: 48px; } .visitor-nav__item { flex-basis: 288px; } .visitor-nav__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 700; line-height: 150%; /* 72px */ } .visitor-nav-card { display: grid; position: relative; border-radius: 16px; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.16); overflow: hidden; } .visitor-nav-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 100%); z-index: 1; } .visitor-nav-card__body { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; align-items: end; align-content: end; padding-bottom: 24px; z-index: 2; } .visitor-nav-card__title { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .visitor-nav-card__more { margin-top: 8px; display: grid; grid-template-columns: auto 16px; justify-content: center; align-items: center; gap: 4px; } .visitor-nav-card__more-label { color: var(--white, var(--white, #fff)); text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } } @media (max-width: 1023px) { .visitor-nav { background: var(--ECECE3, #ecece3); display: grid; grid-template-columns: 100%; justify-content: center; padding-top: 80px; padding-bottom: 80px; overflow-x: hidden; } .visitor-nav--other { background: var(--F5F5F7, #f5f5f7); } .visitor-nav__list { display: grid; gap: 32px; margin-top: 32px; padding-left: 28px; padding-right: 28px; } .visitor-nav__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .visitor-nav-card { display: grid; position: relative; border-radius: 16px; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.16); overflow: hidden; } .visitor-nav-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 100%); } .visitor-nav-card__body { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; align-items: end; align-content: end; padding-bottom: 24px; } .visitor-nav-card__title { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .visitor-nav-card__more { margin-top: 8px; display: grid; grid-template-columns: auto 16px; justify-content: center; align-items: center; gap: 4px; } .visitor-nav-card__more-label { color: var(--white, var(--white, #fff)); text-align: center; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } } @media (hover: hover) { .visitor-nav-card__image { position: relative; } .visitor-nav-card__image picture { position: relative; } .visitor-nav-card__image picture img { position: relative; transition: transform 0.3s ease-out; } .visitor-nav-card__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .visitor-nav-card__title { transition: color 0.3s ease-out; } .visitor-nav-card__more-icon svg path { transition: fill 0.3s ease-out; } .visitor-nav-card__more-label { transition: color 0.3s ease-out; } .visitor-nav-card:hover .visitor-nav-card__image picture img { will-change: transform; transform: scale(1.1); } .visitor-nav-card:hover .visitor-nav-card__image picture::after { opacity: 1; } .visitor-nav-card:hover .visitor-nav-card__title { color: var(--NSM-color, #b9141e); } .visitor-nav-card:hover .visitor-nav-card__more-icon svg path { fill: var(--NSM-color, #b9141e); } .visitor-nav-card:hover .visitor-nav-card__more-label { color: var(--NSM-color, #b9141e); } } @media (min-width: 1024px) { .visitor-high-school { display: grid; grid-template-columns: minmax(0, 960px); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 128px; padding-bottom: 128px; background: var(--ECECE3, #ecece3); } .visitor-high-school__title { color: var(--000000, #000); /* Noto Sans JP B 32pt */ font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; text-align: center; } .visitor-high-school__title-strong { color: var(--NSM-color, #b9141e); } .visitor-high-school__description { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 24px; } .visitor-high-school__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; margin-top: 48px; } .visitor-high-school-card__image { border-radius: 16px; overflow: hidden; } .visitor-high-school-card__title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 16px; } .visitor-high-school-card__description { color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .visitor-high-school-card__link-block { display: grid; justify-content: end; margin-top: 16px; } .visitor-high-school-card__link { display: inline-grid; grid-template-columns: 12px auto; gap: 8px; align-items: center; } .visitor-high-school-card__link-label { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .visitor-open-campus-nav { display: grid; padding-left: 20px; padding-right: 20px; grid-template-columns: minmax(0, 960px); justify-content: center; padding-top: 128px; padding-bottom: 128px; background: var(--FAFAFA, #fafafa); } .visitor-open-campus-nav__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } } @media (max-width: 1023px) { .visitor-high-school { display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 24px; padding-right: 24px; padding-top: 80px; padding-bottom: 80px; background: var(--ECECE3, #ecece3); } .visitor-high-school__title { text-align: center; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; } .visitor-high-school__title-strong { color: var(--NSM-color, #b9141e); } .visitor-high-school__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; /* 27px */ margin-top: 24px; } .visitor-high-school__list { display: grid; grid-template-columns: 100%; gap: 48px; margin-top: 48px; } .visitor-high-school-card__image { border-radius: 16px; overflow: hidden; } .visitor-high-school-card__title { color: var(--NSM-color, #B9141E); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 16px; } .visitor-high-school-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .visitor-high-school-card__link-block { display: grid; justify-content: end; margin-top: 16px; } .visitor-high-school-card__link { display: inline-grid; grid-template-columns: 12px auto; gap: 8px; align-items: center; } .visitor-high-school-card__link-label { color: var(--NSM-color, #B9141E); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .visitor-open-campus-nav { display: grid; padding-left: 24px; padding-right: 24px; grid-template-columns: 100%; justify-content: center; padding-top: 48px; padding-bottom: 48px; background: var(--FAFAFA, #fafafa); } .visitor-open-campus-nav__title { color: var(--NSM-color, #B9141E); text-align: center; font-family: "Noto Sans JP"; font-size: 22px; font-style: normal; font-weight: 700; line-height: 150%; /* 33px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } } @media (hover: hover) { .visitor-high-school-card__link { transition: opacity 0.3s ease-in-out; } .visitor-high-school-card__link:hover { opacity: 0.8; } } @media (min-width: 1024px) { .visitor-header { padding-top: 128px; padding-bottom: 128px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .visitor-header__title { color: var(--000000, #000); /* Noto Sans JP B 32pt */ font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .visitor-header__title-strong { color: var(--NSM-color, #b9141e); } .visitor-header__text { margin-top: 24px; color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .visitor-header__banner { width: 597px; margin: auto; margin-top: 48px; } .visitor-section-body { border-radius: 16px; background: #fff; padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: minmax(0, 864px); justify-content: center; padding-left: 20px; padding-right: 20px; } .visitor-section-body__section + .visitor-section-body__section { margin-top: 32px; } .visitor-section-body__text + .visitor-section-body__section { margin-top: 32px; } .visitor-section-body__event-tel-banner { display: grid; justify-content: center; margin-top: 32px; } .visitor-section-body__recruit-nav { margin-top: 32px; } .visitor-section-body__recruit-download { margin-top: 32px; } .visitor-section-description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .visitor-section-text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .visitor-section-text__small { font-size: 14px; } .visitor-dl { display: grid; grid-template-columns: 192px 1fr; } .visitor-dl__header { display: grid; align-items: center; justify-content: center; color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ border-right: 1px solid var(--D9D9D9, #d9d9d9); background: var(--f5f5f5, #f5f5f5); } .visitor-dl__body { padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; } .visitor-dl__text { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .visitor-dl__small { font-size: 12px; } .visitor-dl__list { list-style: disc; list-style-position: inside; } .visitor-club-card__image { border-radius: 8px; overflow: hidden; } .visitor-club-card__title { color: var(--000000, #000); text-align: justify; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; border-bottom: 1px solid var(--707070, #707070); } .visitor-club-card__list { display: grid; gap: 4px; margin-top: 4px; border-bottom: 1px solid var(--D9D9D9, #d9d9d9); } .visitor-club-card__list-item { color: var(--555555, #555); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ padding-bottom: 3px; } .visitor-club-card__list-item + .visitor-club-card__list-item { border-top: 1px dashed var(--D9D9D9, #d9d9d9); } .visitor-event-tel-banner { padding: 24px 32px; border-radius: 8px; background: var(--f5f5f5, #f5f5f5); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.04); display: grid; grid-template-columns: auto 1fr; gap: 24px; justify-content: center; align-items: center; } .visitor-event-tel-banner__label { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .visitor-event-tel-banner__tel-block { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; } .visitor-event-tel-banner__tel { color: var(--555555, #555); font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ } .visitor-recruit-nav { background: var(--f5f5f5, #f5f5f5); padding-left: 20px; padding-right: 20px; padding-top: 32px; padding-bottom: 32px; } .visitor-recruit-nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 316px)); justify-content: center; gap: 32px; } .visitor-recruit-nav__link { display: grid; grid-template-columns: auto 16px; gap: 16px; justify-content: center; padding-top: 16px; padding-bottom: 16px; border-radius: 4px; background: var(--white, #fff); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.04); align-items: center; } .visitor-recruit-nav__link-label { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .visitor-recruit-nav__link-mail { display: grid; grid-template-columns: 32px 180px; gap: 8px; align-items: center; } .visitor-recruit-nav__link-mail-label { color: var(--707070, #707070); font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 600; line-height: 150%; /* 30px */ } .visitor-recruit-download { background: var(--FAFAFA, #fafafa); padding-top: 32px; padding-bottom: 32px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: 164px 536px; justify-content: center; gap: 16px; } .visitor-recruit-download__title { border-radius: 4px; border: 1px solid var(--707070, #707070); color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ padding-top: 10px; padding-bottom: 10px; display: grid; justify-content: center; } .visitor-recruit-download__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .visitor-recruit-download__link { display: flex; justify-content: center; align-items: center; border-radius: 4px; background: var(--white, #fff); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.04); padding-top: 16px; padding-bottom: 16px; } .visitor-recruit-download__link-icon { flex-shrink: 0; flex-grow: 0; } .visitor-recruit-download__link-icon--word { width: 32px; } .visitor-recruit-download__link-icon--pdf { width: 26px; } .visitor-recruit-download__link-label { color: var(--707070, #707070); font-family: Poppins, "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; margin-left: 8px; } .visitor-recruit-download__link-arrow { width: 16px; flex-shrink: 0; flex-grow: 0; margin-left: 16px; } .visitor-support-link-block { padding-top: 32px; padding-bottom: 32px; border-radius: 16px; background: var(--f5f5f5, #f5f5f5); display: grid; grid-template-columns: minmax(0, 397px); justify-content: center; padding-left: 20px; padding-right: 20px; } .visitor-support-link-block__link { display: grid; padding: 16px 0px; grid-template-columns: auto 16px; justify-content: center; align-items: center; border-radius: 999px; background: var(--NSM-color, #b9141e); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.04); gap: 16px; } .visitor-support-link-block__link-label { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .visitor-portal-site-link-list { max-width: 976px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .visitor-portal-site-card { display: grid; border-radius: 16px; overflow: hidden; background: #fff; position: relative; height: 100%; align-content: start; } .visitor-portal-site-card__body { padding-top: 16px; padding-left: 24px; padding-right: 24px; padding-bottom: 48px; } .visitor-portal-site-card__title { color: var(--555555, #555); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-top: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .visitor-portal-site-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .visitor-portal-site-card__note { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; margin-top: 1.5em; } .visitor-portal-site-card__arrow { position: absolute; bottom: 24px; right: 24px; width: 16px; } .visitor-section-check-list { display: grid; } .visitor-section-check-list--3-columns { grid-template-columns: repeat(3, 1fr); gap: 20px; } .visitor-section-check-list__item { padding-top: 8px; padding-bottom: 7px; border-bottom: 1px dashed var(--707070, #707070); display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 4px; } .visitor-section-check-list__label { color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .visitor-section-language-list { border-radius: 8px; background: var(--f5f5f5, #f5f5f5); padding: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .visitor-section-language-list__link { border-radius: 4px; background: #fff; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.08); display: grid; grid-template-columns: 53px 1fr 16px; gap: 16px; align-items: center; padding: 8px 16px; } .visitor-section-language-list__label { color: var(--000000, #000); /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .visitor-section-strong-description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 500; line-height: 150%; /* 36px */ } .visitor-section-strong-description__small { font-size: 14px; } .visitor-application-methods { display: grid; gap: 32px; } .visitor-application-methods-abroad { border-radius: 16px; background: #fff; padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: minmax(0, 864px); justify-content: center; padding-left: 20px; padding-right: 20px; } .visitor-application-methods-abroad__section + .visitor-application-methods-abroad__section { margin-top: 32px; border-top: 1px solid #b9141e; padding-top: 32px; } .visitor-application-methods-abroad__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 500; line-height: 150%; /* 36px */ } .visitor-application-methods-abroad__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 16px; } .visitor-application-methods-abroad__small { margin-top: 16px; color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ display: block; } .visitor-faq__list { display: grid; gap: 16px; } } @media (max-width: 1023px) { .visitor-header { padding-top: 80px; padding-bottom: 80px; padding-left: 24px; padding-right: 24px; display: grid; grid-template-columns: 100%; justify-content: center; } .visitor-header__title { color: var(--323232, #000); /* Noto Sans JP B 32pt */ font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .visitor-header__title-strong { color: var(--NSM-color, #b9141e); } .visitor-header__text { margin-top: 24px; color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .visitor-header__banner { margin-top: 32px; } .visitor-section-body { border-radius: 16px; background: #fff; padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 16px; padding-right: 16px; } .visitor-section-body__section + .visitor-section-body__section { margin-top: 32px; } .visitor-section-body__text + .visitor-section-body__section { margin-top: 32px; } .visitor-section-body__event-tel-banner { margin-top: 32px; } .visitor-section-body__recruit-nav { margin-top: 32px; } .visitor-section-body__recruit-download { margin-top: 32px; } .visitor-section-description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; /* 27px */ } .visitor-section-description__small { display: block; color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 16px; } .visitor-section-text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; /* 27px */ } .visitor-section-text__small { font-size: 14px; } .visitor-dl { display: grid; grid-template-columns: 100%; } .visitor-dl__header { display: grid; align-items: center; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ border-left: 1px solid var(--D9D9D9, #d9d9d9); border-right: 1px solid var(--D9D9D9, #d9d9d9); border-bottom: 1px solid var(--D9D9D9, #d9d9d9); background: var(--f5f5f5, #f5f5f5); padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; } .visitor-dl__body { padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; border-left: 1px solid var(--D9D9D9, #d9d9d9); border-right: 1px solid var(--D9D9D9, #d9d9d9); } .visitor-dl__text { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .visitor-dl__small { font-size: 12px; } .visitor-dl__list { list-style: disc; list-style-position: inside; } .visitor-club-card__image { border-radius: 8px; overflow: hidden; } .visitor-club-card__title { color: var(--323232, #000); text-align: justify; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; border-bottom: 1px solid var(--707070, #707070); } .visitor-club-card__list { display: grid; gap: 4px; margin-top: 4px; border-bottom: 1px solid var(--D9D9D9, #d9d9d9); } .visitor-club-card__list-item { color: var(--555555, #555); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ padding-bottom: 3px; } .visitor-club-card__list-item + .visitor-club-card__list-item { border-top: 1px dashed var(--D9D9D9, #d9d9d9); } .visitor-event-tel-banner { padding-top: 24px; padding-bottom: 24px; border-radius: 8px; background: var(--f5f5f5, #f5f5f5); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.04); display: grid; grid-template-columns: 100%; gap: 8px; justify-content: center; justify-items: center; width: 100%; } .visitor-event-tel-banner__label { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .visitor-event-tel-banner__tel-block { display: grid; grid-template-columns: 32px auto; gap: 8px; align-items: center; } .visitor-event-tel-banner__tel { color: var(--555555, #555); font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ } .visitor-recruit-nav { background: var(--f5f5f5, #f5f5f5); padding: 32px 16px; } .visitor-recruit-nav__list { display: grid; grid-template-columns: 100%; gap: 16px; } .visitor-recruit-nav__link { display: grid; grid-template-columns: auto 16px; gap: 16px; justify-items: center; justify-content: center; padding-top: 16px; padding-bottom: 16px; border-radius: 4px; background: var(--white, #fff); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.04); align-items: center; } .visitor-recruit-nav__link-label { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } .visitor-recruit-nav__link-mail { display: grid; grid-template-columns: 32px auto; gap: 8px; align-items: center; width: fit-content; } .visitor-recruit-nav__link-mail-label { color: var(--707070, #707070); font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 600; line-height: 150%; /* 30px */ } .visitor-recruit-download { background: var(--f5f5f5, #f5f5f5); padding: 32px 16px; display: grid; grid-template-columns: 100%; gap: 16px; } .visitor-recruit-download__title { border-radius: 4px; border: 1px solid var(--707070, #707070); color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ padding-top: 21px; padding-bottom: 21px; display: grid; justify-content: center; } .visitor-recruit-download__list { display: grid; grid-template-columns: 100%; gap: 16px; } .visitor-recruit-download__link { display: flex; justify-content: center; align-items: center; border-radius: 4px; background: var(--white, #fff); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.04); padding-top: 16px; padding-bottom: 16px; } .visitor-recruit-download__link-icon { flex-shrink: 0; flex-grow: 0; } .visitor-recruit-download__link-icon--word { width: 32px; } .visitor-recruit-download__link-icon--pdf { width: 26px; } .visitor-recruit-download__link-label { color: var(--707070, #707070); font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-left: 8px; } .visitor-recruit-download__link-arrow { width: 16px; flex-shrink: 0; flex-grow: 0; margin-left: 16px; } .visitor-support-link-block { padding-top: 32px; padding-bottom: 32px; border-radius: 8px; background: var(--f5f5f5, #f5f5f5); display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 15.5px; padding-right: 15.5px; } .visitor-support-link-block__link { display: grid; padding: 16px 0px; grid-template-columns: auto 16px; justify-content: center; align-items: center; border-radius: 999px; background: var(--NSM-color, #b9141e); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.04); gap: 16px; } .visitor-support-link-block__link-label { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .visitor-support-link-block__link-label--alternative { font-size: 18px; } .visitor-portal-site-link-list { display: grid; grid-template-columns: 100%; gap: 32px; padding-left: 19.5px; padding-right: 19.5px; } .visitor-portal-site-card { display: grid; border-radius: 16px; overflow: hidden; background: #fff; position: relative; padding-bottom: 24px; } .visitor-portal-site-card__body { padding-top: 16px; padding-left: 24px; padding-right: 24px; } .visitor-portal-site-card__title { color: var(--555555, #555); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-top: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .visitor-portal-site-card__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .visitor-portal-site-card__note { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; margin-top: 1.5em; } .visitor-portal-site-card__arrow { display: flex; justify-content: flex-end; padding-left: 24px; padding-right: 24px; padding-top: 8px; } .visitor-portal-site-card__arrow svg { width: 16px; } .visitor-section-check-list { display: grid; } .visitor-section-check-list--3-columns { grid-template-columns: 100%; gap: 0px; } .visitor-section-check-list__item { padding-top: 8px; padding-bottom: 7px; border-bottom: 1px dashed var(--707070, #707070); display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 4px; } .visitor-section-check-list__label { color: var(--323232, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .visitor-section-language-list { border-radius: 8px; background: var(--f5f5f5, #f5f5f5); padding: 32px 16px; display: grid; grid-template-columns: 100%; gap: 16px; } .visitor-section-language-list__link { border-radius: 4px; background: #fff; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.08); display: grid; grid-template-columns: 53px 1fr 16px; gap: 16px; align-items: center; padding: 8px 16px; } .visitor-section-language-list__label { color: var(--323232, #000); /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .visitor-section-strong-description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .visitor-section-strong-description__small { display: block; font-size: 14px; text-align: left; line-height: 21px; margin-top: 16px; } .visitor-application-methods { display: grid; gap: 32px; } .visitor-application-methods-abroad { border-radius: 16px; background: #fff; padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 16px; padding-right: 16px; } .visitor-application-methods-abroad__section + .visitor-application-methods-abroad__section { margin-top: 32px; border-top: 1px solid #b9141e; padding-top: 32px; } .visitor-application-methods-abroad__title { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .visitor-application-methods-abroad__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 16px; } .visitor-application-methods-abroad__small { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 16px; display: block; } .visitor-faq__list { display: grid; gap: 16px; } .lv2__visitor-parents .visitor-section-description { font-size: 16px; } .lv2__visitor-teacher .visitor-section-description { font-size: 16px; font-weight: 400; } .lv2__visitor-company .visitor-section-description { font-size: 16px; font-weight: 400; } .lv2__visitor-alumni .visitor-section-description { font-size: 16px; font-weight: 400; } } @media (hover: hover) { .visitor-recruit-nav__link { position: relative; } .visitor-recruit-nav__link .visitor-recruit-nav__link-label, .visitor-recruit-nav__link .visitor-recruit-nav__link-mail-label { transition: color 0.3s ease-out; } .visitor-recruit-nav__link .visitor-recruit-nav__link-icon svg path { transition: fill 0.3s ease-out; } .visitor-recruit-nav__link .visitor-recruit-nav__link-mail-icon svg circle, .visitor-recruit-nav__link .visitor-recruit-nav__link-mail-icon svg path { transition: stroke 0.3s ease-out; } .visitor-recruit-nav__link::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: solid 1px var(--NSM-color, #b9141e); border-radius: 4px; background-color: rgba(0, 0, 0, 0.025); opacity: 0; transition: opacity 0.3s ease-out; } .visitor-recruit-nav__link:hover .visitor-recruit-nav__link-label, .visitor-recruit-nav__link:hover .visitor-recruit-nav__link-mail-label { color: var(--NSM-color, #b9141e); } .visitor-recruit-nav__link:hover .visitor-recruit-nav__link-icon svg path { fill: var(--NSM-color, #b9141e); } .visitor-recruit-nav__link:hover .visitor-recruit-nav__link-mail-icon svg circle, .visitor-recruit-nav__link:hover .visitor-recruit-nav__link-mail-icon svg path { stroke: var(--NSM-color, #b9141e); } .visitor-recruit-nav__link:hover::after { opacity: 1; } .visitor-recruit-download__link { position: relative; } .visitor-recruit-download__link .visitor-recruit-download__link-label { transition: color 0.3s ease-out; } .visitor-recruit-download__link .visitor-recruit-download__link-arrow svg path { transition: stroke 0.3s ease-out; } .visitor-recruit-download__link::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: solid 1px var(--NSM-color, #b9141e); border-radius: 4px; background-color: rgba(0, 0, 0, 0.025); opacity: 0; transition: opacity 0.3s ease-out; } .visitor-recruit-download__link:hover .visitor-recruit-download__link-label { color: var(--NSM-color, #b9141e); } .visitor-recruit-download__link:hover .visitor-recruit-download__link-arrow svg path { fill: var(--NSM-color, #b9141e); } .visitor-recruit-download__link:hover::after { opacity: 1; } .visitor-section-language-list__link { position: relative; } .visitor-section-language-list__link .visitor-section-language-list__label { transition: color 0.3s ease-out; } .visitor-section-language-list__link .visitor-section-language-list__arrow svg path { transition: fill 0.3s ease-out; } .visitor-section-language-list__link::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: solid 1px var(--NSM-color, #b9141e); border-radius: 8px; opacity: 0; transition: opacity 0.3s ease-out; } .visitor-section-language-list__link:hover .visitor-section-language-list__label { color: var(--NSM-color, #b9141e); } .visitor-section-language-list__link:hover .visitor-section-language-list__arrow svg path { fill: var(--NSM-color, #b9141e); } .visitor-section-language-list__link:hover::after { opacity: 1; } .visitor-support-link-block__link { position: relative; transition: background 0.3s ease-out; } .visitor-support-link-block__link .visitor-support-link-block__link-label { transition: color 0.3s ease-out; } .visitor-support-link-block__link .visitor-support-link-block__link-arrow svg path { transition: fill 0.3s ease-out; } .visitor-support-link-block__link::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: solid 2px var(--NSM-color, #b9141e); border-radius: 999px; opacity: 0; transition: opacity 0.3s ease-out; } .visitor-support-link-block__link:hover { background: var(--white, var(--white, #fff)); } .visitor-support-link-block__link:hover .visitor-support-link-block__link-label { color: var(--NSM-color, #b9141e); } .visitor-support-link-block__link:hover .visitor-support-link-block__link-arrow svg path { fill: var(--NSM-color, #b9141e); } .visitor-support-link-block__link:hover::after { opacity: 1; } a.visitor-portal-site-card .visitor-portal-site-card__image { position: relative; } a.visitor-portal-site-card .visitor-portal-site-card__image picture { position: relative; overflow: hidden; } a.visitor-portal-site-card .visitor-portal-site-card__image picture img { position: relative; transition: transform 0.3s ease-out; } a.visitor-portal-site-card .visitor-portal-site-card__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3333); opacity: 0; transition: opacity 0.3s ease-out; } a.visitor-portal-site-card .visitor-portal-site-card__arrow svg path { transition: fill 0.3s ease-out; } a.visitor-portal-site-card:hover .visitor-portal-site-card__image picture img { will-change: transform; transform: scale(1.1); } a.visitor-portal-site-card:hover .visitor-portal-site-card__image picture::after { opacity: 1; } a.visitor-portal-site-card:hover .visitor-portal-site-card__arrow svg path { fill: var(--NSM-color, #b9141e); } } @media (min-width: 1024px) { .admission-top-kv { position: relative; } .admission-top-kv__image picture { height: 832px; } .admission-top-kv__image img { width: 100%; height: 100%; object-fit: cover; } .admission-top-kv__inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; align-content: end; padding-bottom: 96px; } .admission-top-kv__title-japanese { color: var(--white, #fff); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .admission-top-kv__title-english { color: var(--white, #fff); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: Poppins; font-size: 80px; font-style: italic; font-weight: 700; line-height: 80%; /* 64px */ } .admission-top-kv__catch-copy { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 30px; font-style: normal; font-weight: 700; line-height: 150%; /* 45px */ margin-top: 32px; } .admission-top-kv__description { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ margin-top: 24px; } .admission-top-kv__description + .admission-top-kv__description { margin-top: 1.8em; } .admission-top-kv__description strong { font-size: 24px; } .admission-top-qualifications { background: var(--F5F5F7, #f5f5f7); padding-top: 128px; padding-bottom: 128px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .admission-top-qualifications__body { padding-top: 64px; padding-bottom: 64px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 864px); justify-content: center; border-radius: 16px; background: var(--white, #fff); margin-top: 48px; } .admission-top-qualifications__body-title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .admission-top-qualifications__list { display: grid; gap: 8px; margin-top: 16px; } .admission-top-qualifications__list-item { display: grid; grid-template-columns: 24px 1fr; padding-bottom: 7px; border-bottom: 1px dashed var(--707070, #707070); } .admission-top-qualifications__list-label { color: var(--555555, #555); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 120%; /* 24px */ } .admission-top-qualifications__body-note { color: var(--707070, #707070); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 120%; /* 16.8px */ display: block; margin-top: 8px; } .admission-top-policy { background: var(--ECECE3, #ecece3); padding-top: 128px; padding-bottom: 128px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 960px); justify-content: center; } .admission-top-policy__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; } .admission-top-policy-card { border-radius: 16px; overflow: hidden; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.16); position: relative; } .admission-top-policy-card__body { position: absolute; left: 0; bottom: 0; width: 100%; height: 104px; display: grid; justify-content: center; align-content: center; } .admission-top-policy-card__title { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } } @media (max-width: 1023px) { .admission-top-kv__image picture { height: 530px; } .admission-top-kv__image img { width: 100%; height: 100%; object-fit: cover; } .admission-top-kv__inner { position: relative; display: grid; grid-template-columns: 100%; justify-content: center; align-content: center; padding: 32px 24px; } .admission-top-kv__title { width: 100%; position: absolute; top: -302px; left: 0; padding-left: 20px; padding-right: 20px; } .admission-top-kv__title-japanese { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .admission-top-kv__title-english { color: var(--white, #fff); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 80%; /* 38.4px */ } .admission-top-kv__catch-copy { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .admission-top-kv__description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 180%; /* 25.2px */ margin-top: 16px; } .admission-top-kv__description + .admission-top-kv__description { margin-top: 0; } .admission-top-kv__description strong { font-size: 20px; } .admission-top-qualifications { background: var(--F5F5F7, #f5f5f7); padding-top: 80px; padding-bottom: 80px; padding-left: 16px; padding-right: 16px; display: grid; grid-template-columns: 100%; justify-content: center; } .admission-top-qualifications__body { padding-top: 48px; padding-bottom: 48px; padding-left: 16px; padding-right: 16px; display: grid; grid-template-columns: 100%; justify-content: center; border-radius: 16px; background: var(--white, #fff); margin-top: 32px; } .admission-top-qualifications__body-title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .admission-top-qualifications__list { display: grid; gap: 8px; margin-top: 16px; } .admission-top-qualifications__list-item { display: grid; grid-template-columns: 24px 1fr; padding-bottom: 7px; border-bottom: 1px dashed var(--707070, #707070); } .admission-top-qualifications__list-label { color: var(--555555, #555); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .admission-top-qualifications__body-note { color: var(--707070, #707070); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 120%; /* 16.8px */ display: block; margin-top: 8px; } .admission-top-policy { background: var(--ECECE3, #ecece3); padding-top: 80px; padding-bottom: 80px; padding-left: 15.5px; padding-right: 15.5px; display: grid; grid-template-columns: minmax(0, 960px); justify-content: center; } .admission-top-policy__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 32px; } .admission-top-policy-card { border-radius: 16px; overflow: hidden; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.16); position: relative; } .admission-top-policy-card__body { position: absolute; left: 0; bottom: 0; width: 100%; height: 86px; display: grid; justify-content: center; align-content: center; } .admission-top-policy-card__title { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } } @media (min-width: 1024px) { .admission-office-description__title { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 30px; font-style: normal; font-weight: 700; line-height: 150%; /* 45px */ } .admission-office-description__title strong { color: var(--NSM-color, #b9141e); font-size: 32px; } .admission-office-description__text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 180%; /* 36px */ margin-top: 16px; } .admission-office-description__text strong { color: var(--NSM-color, #b9141e); font-weight: 700; } .admission-office-description__link { text-align: center; margin-top: 48px; } .admission-office-merits { border-radius: 16px; background: var(--white, #fff); } .admission-office-flow__list { display: grid; gap: 48px; } .ao-flow-section { border-radius: 16px; background: var(--white, #fff); padding: 64px 20px; display: grid; grid-template-columns: minmax(0, 864px); justify-content: center; } .ao-flow-section__header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; } .ao-flow-section__header-title { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 600; line-height: 80%; /* 25.6px */ } .ao-flow-section__header-number { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 600; line-height: 80%; display: inline-block; margin-left: 8px; } .ao-flow-section__header-name { color: var(--000000, #000); font-family: Poppins, "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ border-left: 1px solid var(--NSM-color, #b9141e); padding-left: 24px; } .ao-flow-section__header-name-small { font-size: 14px; } .ao-flow-section__body { margin-top: 24px; } .ao-flow-description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .ao-flow-description__strong { color: var(--NSM-color, #b9141e); } .ao-flow-entry__cv { margin-top: 32px; } .ao-flow-entry__cv-text { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .ao-flow-entry__cv-link { text-align: center; margin-top: 16px; } .ao-flow-entry__dl { margin-top: 32px; } .ao-flow-entry__dl + .ao-flow-entry__dl { margin-top: 16px; } .ao-flow-entry__note { margin-top: 16px; } .ao-flow-entry__presentation-example { margin-top: 24px; } .ao-presentation-example { display: grid; grid-template-columns: 200fr 648fr; gap: 16px; } .ao-presentation-example__image-block { grid-row: 1/3; } .ao-presentation-example__image-text { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 13px; font-style: normal; font-weight: 500; line-height: 150%; /* 19.5px */ background: var(--NSM-color, #b9141e); } .ao-presentation-example__image { margin-top: 4px; } .ao-presentation-example__description { color: var(--000000, #000); /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .ao-presentation-example__div { display: grid; gap: 24px; grid-template-columns: 304fr 320fr; align-items: center; align-content: center; } .ao-presentation-example__section-block { display: grid; gap: 16px; } .ao-presentation-example__section-title { color: var(--NSM-color, #b9141e); /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ border-bottom: 1px solid #b9141e; padding-bottom: 3px; } .ao-presentation-example__section-description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 4px; } .ao-presentation-example__movie-text { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 150%; /* 18px */ } .ao-presentation-example__movie { margin-top: 4px; } .ao-flow-selection__table { margin-top: 16px; } .ao-flow-permit { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; align-content: center; } .ao-flow-permit__note { margin-top: 16px; } .ao-flow-application__dl { margin-top: 16px; } .ao-flow-application__note { margin-top: 16px; } .ao-flow-application__document { margin-top: 24px; } .ao-flow-application__document-list { margin-top: 24px; } .ao-flow-application__link { text-align: center; margin-top: 48px; } .ao-flow-application__section { margin-top: 24px; } .ao-flow-notification__description { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 600; line-height: 150%; } .ao-flow-notification__date { font-size: 24px; font-weight: 500; } .ao-flow-notification__year { font-family: Poppins; font-size: 32px; font-weight: 600; } .ao-flow-notification__day { font-family: Poppins; font-size: 40px; font-weight: 600; } } @media (max-width: 1023px) { .admission-office-description { padding-left: 12px; padding-right: 12px; } .admission-office-description__title { text-align: center; font-family: "Noto Sans JP"; font-size: 30px; font-style: normal; font-weight: 700; line-height: 150%; /* 45px */ } .admission-office-description__title strong { color: var(--NSM-color, #b9141e); font-size: 32px; } .admission-office-description__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 180%; /* 28.8px */ margin-top: 16px; } .admission-office-description__text strong { color: var(--NSM-color, #b9141e); font-weight: 700; } .admission-office-description__link { text-align: center; margin-top: 48px; } .admission-office-merits { border-radius: 16px; background: var(--white, #fff); } .admission-office-flow__list { display: grid; gap: 32px; } .ao-flow-section { border-radius: 16px; background: var(--white, #fff); padding: 48px 16px; display: grid; grid-template-columns: 100%; justify-content: center; } .ao-flow-section__header { display: grid; grid-template-columns: 100%; gap: 8px; } .ao-flow-section__header-title { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 600; line-height: 100%; /* 32px */ } .ao-flow-section__header-number { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 600; line-height: 100%; display: inline-block; margin-left: 8px; } .ao-flow-section__header-name { position: relative; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ padding-top: 8px; } .ao-flow-section__header-name::before { content: ""; display: block; width: 64px; height: 1px; background-color: var(--NSM-color, #b9141e); position: absolute; left: 0; top: 0; } .ao-flow-section__header-name-small { font-size: 14px; } .ao-flow-section__body { margin-top: 24px; } .ao-flow-description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; /* 27px */ } .ao-flow-description__strong { color: var(--NSM-color, #b9141e); } .ao-flow-entry__cv { margin-top: 32px; } .ao-flow-entry__cv-text { color: var(--NSM-color, #b9141e); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .ao-flow-entry__cv-link { text-align: center; margin-top: 16px; } .ao-flow-entry__dl { margin-top: 32px; } .ao-flow-entry__dl + .ao-flow-entry__dl { margin-top: 16px; } .ao-flow-entry__note { margin-top: 16px; } .ao-flow-entry__presentation-example { margin-top: 24px; } .ao-presentation-example { display: grid; grid-template-columns: 100%; gap: 16px; } .ao-presentation-example__image-text { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 13px; font-style: normal; font-weight: 500; line-height: 150%; /* 19.5px */ background: var(--NSM-color, #b9141e); margin-left: 16px; margin-right: 16px; } .ao-presentation-example__image { margin-top: 4px; margin-left: 16px; margin-right: 16px; } .ao-presentation-example__description { color: var(--323232, #000); text-align: justify; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .ao-presentation-example__div { display: grid; gap: 24px; grid-template-columns: 100%; } .ao-presentation-example__section-block { display: grid; gap: 16px; } .ao-presentation-example__section-title { color: var(--NSM-color, #b9141e); /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ border-bottom: 1px solid #b9141e; padding-bottom: 3px; } .ao-presentation-example__section-description { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 4px; } .ao-presentation-example__movie-text { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 150%; /* 18px */ } .ao-presentation-example__movie { margin-top: 4px; } .ao-flow-selection__table { margin-top: 16px; } .ao-flow-permit { display: grid; grid-template-columns: 100%; gap: 24px; } .ao-flow-permit__image { grid-row: 2/3; margin-left: 14px; margin-right: 14px; } .ao-flow-permit__inner { grid-row: 1/2; } .ao-flow-permit__note { margin-top: 16px; } .ao-flow-application__dl { margin-top: 16px; } .ao-flow-application__note { margin-top: 16px; } .ao-flow-application__document { margin-top: 24px; } .ao-flow-application__document-list { margin-top: 24px; } .ao-flow-application__link { text-align: center; margin-top: 48px; } .ao-flow-application__section { margin-top: 24px; } .ao-flow-notification__description { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 600; line-height: 150%; } .ao-flow-notification__date { font-size: 24px; font-weight: 500; } .ao-flow-notification__year { font-family: Poppins; font-size: 32px; font-weight: 600; } .ao-flow-notification__day { font-family: Poppins; font-size: 40px; font-weight: 600; } } @media (min-width: 1024px) { .school-expenses__text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .school-expenses__section-title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); margin-top: 32px; } .school-expenses__section-banner { display: grid; grid-template-columns: minmax(0, 832px); justify-content: center; margin-top: 48px; } .school-expenses__request-list { max-width: 832px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, auto); gap: 48px; border-radius: 8px; justify-content: center; background: var(--000000, #000); align-items: center; padding-top: 16px; padding-bottom: 16px; margin-top: 48px; } .school-expenses__request-item { display: grid; grid-template-columns: 32px auto; align-items: center; } .school-expenses__request-label { color: var(--white, var(--white, #fff)); font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ } .school-expenses-request-banner { display: grid; border-radius: 16px; box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.16); overflow: hidden; position: relative; } .school-expenses-request-banner__body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; align-items: center; align-content: center; padding-left: 48px; padding-right: 48px; justify-content: start; } .school-expenses-request-banner__catch-copy1 { width: 284px; filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.48)); } .school-expenses-request-banner__catch-copy2 { color: #fff; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.48); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .school-expenses-request-banner__arrow-block { border-radius: 999px; background: rgba(255, 255, 255, 0.8); display: inline-grid; padding: 16px 24px; grid-template-columns: 20px auto; align-items: center; gap: 8px; margin-top: 16px; } .school-expenses-request-banner__arrow-label { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .scholarship-flow__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .scholarship-flow__card { border-radius: 16px; background: #fff; padding: 32px; display: grid; grid-template-rows: auto 1fr auto; height: 100%; } .scholarship-flow__flow { padding-bottom: 7px; border-bottom: 1px solid #b9141e; text-align: center; } .scholarship-flow__flow-label { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 600; line-height: 100%; /* 32px */ } .scholarship-flow__flow-number { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 600; line-height: 100%; display: inline-block; margin-left: 8px; } .scholarship-flow__label { margin-top: 8px; color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .scholarship-flow__label--entrance { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ border-radius: 8px; background: var(--NSM-color, #b9141e); display: grid; align-items: center; } .scholarship-flow__description { margin-top: 8px; color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .scholarship-flow__note { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ display: grid; align-items: end; height: 100%; } .scholarship-sibling { display: grid; grid-template-columns: minmax(0, 1224px); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 96px; padding-bottom: 96px; } .scholarship-sibling__inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .scholarship-sibling__header { border-radius: 16px; background: #fff; padding: 32px 48px; display: grid; align-content: center; } .scholarship-sibling__title-japanese { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .scholarship-sibling__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 700; line-height: 80%; /* 12.8px */ margin-top: 4px; } .scholarship-sibling__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .scholarship-sibling__note { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; } .scholarship-sibling-banner { border-radius: 16px; background: #008cd7; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden; display: grid; align-content: center; height: 100%; } .scholarship-sibling-banner__catch-copy { color: #fff; text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .scholarship-sibling-banner__title { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 120%; /* 38.4px */ margin-top: 8px; } .scholarship-sibling-banner__note { color: #fff; text-align: center; font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; /* 12px */ } .scholarship-sibling-banner__text { color: #fff; text-align: center; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 8px; } .scholarship-sibling-banner__arrow { width: 16px; position: absolute; top: 7px; right: 7px; } .student-support-table { display: grid; grid-template-columns: minmax(80px, auto) 1fr; width: 100%; border-bottom: 1px solid var(--D9D9D9, #d9d9d9); border-right: 1px solid var(--D9D9D9, #d9d9d9); } .student-support-table__body, .student-support-table__header, .student-support-table__row, .student-support-table__header-row { display: contents; } .student-support-table__header-cell { display: grid; border-top: 1px solid var(--D9D9D9, #d9d9d9); border-left: 1px solid var(--D9D9D9, #d9d9d9); background: var(--f5f5f5, #f5f5f5); padding-top: 4px; padding-bottom: 4px; align-items: center; } .student-support-table__header-cell-text { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .student-support-table__header-cell-text small { font-size: 12px; } .student-support-table__cell { display: grid; border-top: 1px solid var(--D9D9D9, #d9d9d9); border-left: 1px solid var(--D9D9D9, #d9d9d9); padding: 8px 16px; align-items: center; height: 100%; } .student-support-table__cell-text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .student-support-table__cell-text a { color: var(--textlink, #0090ff); } .student-support-table__cell-list { list-style: disc; padding-left: 24px; } .student-support-table__cell-item { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .student-support-table__cell-item a { color: var(--textlink, #0090ff); } .student-support-table--3-column { grid-template-columns: 32px 48px 1fr 1fr; } .student-support-table__header-cell[colspan="2"], .student-support-table__cell[colspan="2"] { grid-column: span 2; } .student-support-table__header-cell[colspan="2"] .student-support-table__cell-text, .student-support-table__cell[colspan="2"] .student-support-table__cell-text { text-align: center; } .student-support-table__header-cell[rowspan="3"], .student-support-table__cell[rowspan="3"] { grid-row: span 3; writing-mode: vertical-rl; letter-spacing: 0.5em; } .student-support-table__header-cell[rowspan="3"] .student-support-table__cell-text, .student-support-table__cell[rowspan="3"] .student-support-table__cell-text { writing-mode: vertical-rl; } .admission-banner-area { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 960px); padding-left: 20px; padding-right: 20px; justify-content: center; } .admission-banner-area__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .admission-banner-area__banner { border-radius: 16px; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.08); overflow: hidden; display: grid; } } @media (max-width: 1023px) { .school-expenses__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; /* 27px */ } .school-expenses__section-title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); margin-top: 32px; } .school-expenses__section-banner { display: grid; grid-template-columns: 100%; justify-content: center; margin-top: 32px; } .school-expenses__request-list { max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: 100%; gap: 16px; border-radius: 8px; justify-content: center; background: var(--000000, #000); align-items: center; padding-top: 16px; padding-bottom: 16px; margin-top: 32px; } .school-expenses__request-item { display: grid; grid-template-columns: 32px auto; align-items: center; justify-items: center; justify-content: center; } .school-expenses__request-label { color: var(--white, var(--white, #fff)); font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 600; line-height: 150%; /* 30px */ } .school-expenses-request-banner { display: grid; border-radius: 4px; box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.16); overflow: hidden; position: relative; } .school-expenses-request-banner__body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; align-items: end; align-content: end; padding-left: 16px; padding-right: 16px; padding-bottom: 24px; } .school-expenses-request-banner__catch-copy1 { width: 83.6012%; filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.48)); } .school-expenses-request-banner__catch-copy2 { color: #fff; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.48); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .school-expenses-request-banner__arrow-block { border-radius: 999px; background: rgba(255, 255, 255, 0.8); display: inline-grid; padding: 10px 32px; grid-template-columns: 20px auto; align-items: center; gap: 16px; margin-top: 16px; } .school-expenses-request-banner__arrow-label { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } .scholarship-flow__list { display: grid; grid-template-columns: 100%; gap: 24px; padding-right: 15.5px; padding-left: 15.5px; } .scholarship-flow__card { border-radius: 16px; background: #fff; padding: 32px; display: grid; } .scholarship-flow__flow { padding-bottom: 7px; border-bottom: 1px solid #b9141e; text-align: center; } .scholarship-flow__flow-label { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 600; line-height: 100%; /* 32px */ } .scholarship-flow__flow-number { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 600; line-height: 100%; margin-left: 8px; } .scholarship-flow__label { margin-top: 8px; color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .scholarship-flow__label--entrance { display: flex; justify-content: center; align-items: center; height: 110px; color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ border-radius: 8px; background: var(--NSM-color, #b9141e); } .scholarship-flow__label__description { margin-top: 8px; color: var(--323232, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .scholarship-flow__note { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .scholarship-sibling { display: grid; grid-template-columns: minmax(0, 1224px); justify-content: center; padding-left: 16px; padding-right: 16px; padding-top: 80px; padding-bottom: 80px; } .scholarship-sibling__inner { display: grid; grid-template-columns: 100%; gap: 32px; } .scholarship-sibling__header { border-radius: 16px; background: #fff; padding: 32px 24px; display: grid; align-content: center; } .scholarship-sibling__title-japanese { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .scholarship-sibling__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 700; line-height: 80%; /* 12.8px */ margin-top: 4px; } .scholarship-sibling__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .scholarship-sibling__note { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; } .scholarship-sibling-banner { border-radius: 16px; background: #008cd7; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden; display: grid; align-content: center; padding: 24px 0; } .scholarship-sibling-banner__catch-copy { color: #fff; text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .scholarship-sibling-banner__title { color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 120%; /* 28.8px */ margin-top: 8px; } .scholarship-sibling-banner__note { color: #fff; text-align: center; font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 120%; /* 12px */ } .scholarship-sibling-banner__text { color: #fff; text-align: center; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 8px; } .scholarship-sibling-banner__arrow { width: 16px; position: absolute; top: 7px; right: 7px; } .student-support-table { display: grid; grid-template-columns: minmax(80px, auto) 1fr; width: 100%; border-bottom: 1px solid var(--D9D9D9, #d9d9d9); border-right: 1px solid var(--D9D9D9, #d9d9d9); } .student-support-table__body, .student-support-table__header, .student-support-table__row, .student-support-table__header-row { display: contents; } .student-support-table__header { display: contents; } .student-support-table__header-cell { display: grid; border-top: 1px solid var(--D9D9D9, #d9d9d9); border-left: 1px solid var(--D9D9D9, #d9d9d9); background: var(--f5f5f5, #f5f5f5); padding-top: 4px; padding-bottom: 4px; align-items: center; } .student-support-table__header-cell-text { color: var(--323232, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .student-support-table__header-cell-text small { font-size: 12px; } .student-support-table__cell { display: grid; border-top: 1px solid var(--D9D9D9, #d9d9d9); border-left: 1px solid var(--D9D9D9, #d9d9d9); padding: 8px; align-items: center; height: 100%; } .student-support-table__cell-text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .student-support-table__cell-text a { color: var(--textlink, #0090ff); } .student-support-table__cell-list { list-style: disc; padding-left: 24px; } .student-support-table__cell-item { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .student-support-table__cell-item a { color: var(--textlink, #0090ff); } .student-support-table--3-column { grid-template-columns: 32px 48px 1fr 1fr; } .student-support-table__header-cell[colspan="2"], .student-support-table__cell[colspan="2"] { grid-column: span 2; } .student-support-table__header-cell[colspan="2"] .student-support-table__cell-text, .student-support-table__cell[colspan="2"] .student-support-table__cell-text { text-align: center; } .student-support-table__header-cell[rowspan="3"], .student-support-table__cell[rowspan="3"] { grid-row: span 3; writing-mode: vertical-rl; letter-spacing: 0.5em; } .student-support-table__header-cell[rowspan="3"] .student-support-table__cell-text, .student-support-table__cell[rowspan="3"] .student-support-table__cell-text { writing-mode: vertical-rl; } .admission-banner-area { padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: 100%; padding-left: 16px; padding-right: 16px; justify-content: center; } .admission-banner-area__list { display: grid; grid-template-columns: 100%; gap: 24px; } .admission-banner-area__banner { border-radius: 16px; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.08); overflow: hidden; display: grid; } } @media (hover: hover) { .school-expenses-request-banner__image { position: relative; } .school-expenses-request-banner__image picture { position: relative; } .school-expenses-request-banner__image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .school-expenses-request-banner__arrow-block { transition: background 0.3s ease-out; } .school-expenses-request-banner__catch-copy1 { transform: translate3d(0, 0, 0); } .school-expenses-request-banner__arrow-icon svg path { transition: fill 0.3s ease-out, stroke 0.3s ease-out; } .school-expenses-request-banner__arrow-label { transition: color 0.3s ease-out; } .school-expenses-request-banner:hover .school-expenses-request-banner__image picture::after { opacity: 1; } .school-expenses-request-banner:hover .school-expenses-request-banner__arrow-block { background: var(--NSM-color, #b9141e); } .school-expenses-request-banner:hover .school-expenses-request-banner__arrow-icon svg path { will-change: fill; fill: var(--white, #fff); } .school-expenses-request-banner:hover .school-expenses-request-banner__arrow-label { color: var(--white, #fff); } .scholarship-sibling-banner { transition: background 0.3s ease-out; } .scholarship-sibling-banner:hover { background: #006aa3; } .admission-banner-area__banner .admission-banner-area__banner-image { position: relative; } .admission-banner-area__banner .admission-banner-area__banner-image picture { position: relative; } .admission-banner-area__banner .admission-banner-area__banner-image picture::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .admission-banner-area__banner:hover .admission-banner-area__banner-image picture::after { opacity: 1; } } @media (min-width: 1024px) { .admission-dl { display: grid; grid-template-columns: auto 1fr; align-items: center; } .admission-dl__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .admission-dl__title::after { content: "："; } .admission-dl__description-text { color: var(--000000, #000); font-family: Poppins, "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 500; line-height: 100%; } .admission-dl__description-text--strong { color: var(--NSM-color, #b9141e); } .admission-dl__year { font-size: 32px; font-weight: 600; line-height: 100%; /* 32px */ } .admission-dl__day { font-size: 40px; font-weight: 600; line-height: 100%; } .admission-dl__strong { font-size: 32px; font-weight: 600; line-height: 100%; /* 32px */ } .admission-dl__small { font-size: 14px; font-weight: 600; line-height: 100%; } .admission-note { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 13px; font-style: normal; font-weight: 400; line-height: 150%; /* 19.5px */ } .admission-note__strong { color: var(--NSM-color, #b9141e); font-size: 14px; font-weight: 500; line-height: 150%; /* 21px */ } .admission-type { display: grid; grid-template-columns: 88px 1fr; gap: 24px; } .admission-type__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ position: relative; } .admission-type__title::after { content: ""; position: absolute; right: 0; top: 8px; width: 1px; height: 32px; background: #b9141e; display: block; } .admission-type__text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .admission-type__description { padding-top: 8px; } .admission-type__text-small { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; display: block; } .admission-type__text-strong { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; display: block; } .admission-section-lv2-text { color: var(--000000, #000); /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; } .admission-section-lv2-text__price { color: var(--NSM-color, #b9141e); text-align: justify; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ } .admission-section-lv2-text__price-unit { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; } .admission-section-lv2-text__small { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; } .admission-section-lv2-text a { text-decoration: underline; } .admission-main-points { border-radius: 16px; background: #fff; padding: 64px 20px; display: grid; grid-template-columns: minmax(0, 864px); justify-content: center; } .admission-main-points__section { margin-top: 32px; } .admission-main-points__flow-section { margin-top: 32px; } .admission-main-points__text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .admission-main-points__check-list { margin-top: 8px; } .admission-main-points__note { color: var(--707070, #707070); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .admission-main-points__check-list + .admission-main-points__note { margin-top: 8px; } .admission-main-points__type + .admission-main-points__type { margin-top: 32px; } .admission-selection-date { border-radius: 16px; background: #fff; padding-top: 64px; padding-bottom: 64px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 832px); justify-content: center; } .admission-selection-date__note { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 13px; font-style: normal; font-weight: 400; line-height: 150%; /* 19.5px */ margin-top: 8px; } .admission-selection-date__table { margin-top: 24px; } } @media (max-width: 1023px) { .admission-dl { display: grid; grid-template-columns: 100%; } .admission-dl__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .admission-dl__title::after { content: "："; } .admission-dl__description-text { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 500; line-height: 110%; } .admission-dl__description-text--strong { color: var(--NSM-color, #b9141e); } .admission-dl__year { font-family: Poppins; font-size: 32px; font-weight: 600; line-height: 110%; /* 35.2px */ } .admission-dl__day { font-family: Poppins; font-size: 40px; font-weight: 600; line-height: 110%; } .admission-dl__strong { font-size: 32px; font-style: normal; font-weight: 600; line-height: 150%; /* 48px */ } .admission-dl__small { font-family: Poppins, "Noto Sans JP"; font-size: 14px; font-weight: 700; line-height: 150%; } .admission-note { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .admission-note__strong { color: var(--NSM-color, #b9141e); font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .admission-type { display: grid; grid-template-columns: 100%; gap: 8px; } .admission-type__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 700; line-height: 150%; /* 42px */ position: relative; padding-bottom: 8px; } .admission-type__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 1px; background: #b9141e; display: block; } .admission-type__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; /* 27px */ } .admission-type__text-small { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; display: block; } .admission-type__text-strong { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; display: block; } .admission-section-lv2-text { color: var(--323232, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .admission-section-lv2-text__price { color: var(--NSM-color, #b9141e); text-align: justify; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ } .admission-section-lv2-text__price-unit { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; } .admission-section-lv2-text__small { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; } .admission-main-points { border-radius: 16px; background: #fff; padding: 48px 16px; display: grid; grid-template-columns: minmax(0, 864px); justify-content: center; } .admission-main-points__type + .admission-main-points__type { margin-top: 48px; } .admission-main-points__section { margin-top: 48px; } .admission-main-points__flow-section { margin-top: 48px; } .admission-main-points__text { color: var(--323232, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; /* 27px */ } .admission-main-points__check-list { margin-top: 8px; } .admission-main-points__note { color: var(--707070, #707070); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .admission-main-points__check-list + .admission-main-points__note { margin-top: 8px; } .admission-main-points__type + .admission-main-points__type { margin-top: 48px; } .admission-selection-date { border-radius: 16px; background: #fff; padding-top: 48px; padding-bottom: 48px; padding-left: 12px; padding-right: 12px; display: grid; grid-template-columns: 100%; justify-content: center; } .admission-selection-date__note { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 13px; font-style: normal; font-weight: 400; line-height: 150%; /* 19.5px */ margin-top: 8px; } .admission-selection-date__table { margin-top: 16px; } } @media (min-width: 1024px) { .admission-course { background: var(--F5F5F7, #f5f5f7); padding-top: 128px; } .admission-course__section { padding-top: 128px; padding-bottom: 128px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .admission-course__section--even { background: var(--ECECE3, #ecece3); } .admission-course__title + .admission-course__section { padding-top: 48px; } .admission-course-section__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 48px; } .admission-course-section__item { display: grid; align-items: stretch; } .admission-course-section-header__title { display: grid; grid-template-columns: 265px 1fr 96px; align-items: center; gap: 24px 0; } .admission-course-section-header__title-english { grid-column: 1/4; color: var(--000000, #000); font-family: Poppins; font-size: 80px; font-style: italic; font-weight: 700; line-height: 90%; /* 72px */ } .admission-course-section-header__year { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 40px; font-style: normal; font-weight: 700; line-height: 96px; } .admission-course-section-header__year-number { font-family: Poppins; font-size: 96px; font-style: italic; font-weight: 600; } .admission-course-section-header__subject-block { display: grid; justify-content: start; justify-items: start; position: relative; padding-left: 32px; } .admission-course-section-header__subject-block::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 1px; background: #b9141e; } .admission-course-section-header__special { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 120%; /* 28.8px */ } .admission-course-section-header__special--altitude { border-radius: 4px; background: var(--NSM-color, #b9141e); padding-top: 4px; padding-bottom: 4px; padding-left: 16px; padding-right: 16px; color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 120%; /* 28.8px */ } .admission-course-section-header__subject { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 120%; /* 38.4px */ } .admission-course-section-header__admission { border-radius: 999px; background: var(--NSM-color, #b9141e); display: grid; place-content: center; height: 96px; } .admission-course-section-header__admission-label { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 90%; /* 14.4px */ } .admission-course-section-header__admission-number { color: var(--white, var(--white, #fff)); font-family: Poppins; font-size: 40px; font-style: italic; font-weight: 600; line-height: 100%; letter-spacing: -2px; } .admission-course-section-header__admission-unit { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 90%; /* 14.4px */ } .admission-course-card { border-radius: 16px; background: var(--white, #fff); padding: 48px; } .admission-course-card__title { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ border-left: 6px solid var(--NSM-color, #b9141e); padding-left: 10px; } .admission-course-card__special { margin-top: 8px; } .admission-course-card__special-title { position: relative; padding-left: 24px; color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 500; line-height: 150%; /* 36px */ padding-top: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--707070, #707070); } .admission-course-card__special-title::before { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; height: 4px; background: var(--NSM-color, #b9141e); margin: auto; } .admission-course-card__special-item { padding: 8px; padding-bottom: 7px; border-bottom: 1px dashed var(--707070, #707070); background: var(--white, #fff); color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 400; line-height: 150%; /* 30px */ } .admission-course-card__special-item:last-child { border-bottom: 2px solid var(--707070, #707070); } } @media (max-width: 1023px) { .lv2__page-nav-visitor-introduction .lv2-page-nav-link__label::first-letter { font-family: Poppins; font-size: 18px; font-weight: 600; line-height: 100%; /* 18px */ } .admission-course { background: var(--F5F5F7, #f5f5f7); padding-top: 80px; } .admission-course__section { padding-top: 80px; padding-bottom: 80px; padding-left: 16px; padding-right: 16px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .admission-course__section--even { background: var(--ECECE3, #ecece3); } .admission-course__title + .admission-course__section { padding-top: 32px; } .admission-course-section__list { display: grid; grid-template-columns: 100%; gap: 24px; margin-top: 32px; } .admission-course-section__item { display: grid; align-items: stretch; } .admission-course-section-header__title { display: grid; grid-template-columns: 1fr 96px; align-items: center; row-gap: 16px; } .admission-course-section-header__title-english { grid-column: 1/3; grid-row: 1/2; color: var(--323232, #000); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 90%; /* 28.8px */ } .admission-course-section-header__year { grid-column: 1/2; grid-row: 2/3; color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 100%; /* 80px */ position: relative; padding-bottom: 8px; } .admission-course-section-header__year::before { content: ""; position: absolute; bottom: 0; left: 0; width: 80px; height: 1px; background: #b9141e; } .admission-course-section-header__year-number { font-family: Poppins; font-size: 80px; font-style: italic; font-weight: 600; line-height: 100%; /* 80px */ } .admission-course-section-header__subject-block { grid-column: 1/3; grid-row: 3/4; display: grid; justify-content: start; justify-items: start; } .admission-course-section-header__special { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 700; line-height: 120%; /* 33.6px */ } .admission-course-section-header__special--altitude { border-radius: 4px; background: var(--NSM-color, #b9141e); padding-top: 4px; padding-bottom: 4px; padding-left: 16px; padding-right: 16px; color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 120%; /* 28.8px */ } .admission-course-section-header__subject { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 700; line-height: 120%; /* 33.6px */ } .admission-course-section-header__admission { border-radius: 999px; background: var(--NSM-color, #b9141e); display: grid; place-content: center; height: 96px; } .admission-course-section-header__admission-label { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 90%; /* 14.4px */ } .admission-course-section-header__admission-number { color: var(--white, var(--white, #fff)); font-family: Poppins; font-size: 40px; font-style: italic; font-weight: 600; line-height: 100%; letter-spacing: -2px; } .admission-course-section-header__admission-unit { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 90%; /* 14.4px */ } .admission-course-card { border-radius: 16px; background: var(--white, #fff); padding: 32px 24px; } .admission-course-card__title { color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ border-left: 6px solid var(--NSM-color, #b9141e); padding-left: 10px; } .admission-course-card__special { margin-top: 8px; } .admission-course-card__special-title { position: relative; padding-left: 24px; color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ padding-top: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--707070, #707070); } .admission-course-card__special-title::before { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; height: 4px; background: var(--NSM-color, #b9141e); margin: auto; } .admission-course-card__special-item { padding: 8px; padding-bottom: 7px; border-bottom: 1px dashed var(--707070, #707070); background: var(--white, #fff); color: var(--323232, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .admission-course-card__special-item:last-child { border-bottom: 2px solid var(--707070, #707070); } } @media (min-width: 1024px) { .news-top { background: var(--F9F9F6, #f9f9f6); padding-bottom: 80px; } .news-top__body { padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .news-top__title { padding-top: 8px; padding-bottom: 8px; margin-top: 80px; } .news-top__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 700; line-height: 80%; /* 51.2px */ text-align: center; } .news-top__title-japanese { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } .news-top__list { margin-top: 56px; border-top: 1px solid var(--000000, #000); } .news-top__item { border-bottom: 1px dashed #707070; } .news-top__item:last-child { border-bottom: 1px solid var(--000000, #000); } .news-top__pagination { margin-top: 48px; } .news-top-item { padding-left: 16px; padding-right: 16px; padding-top: 32px; padding-bottom: 32px; display: grid; grid-template-columns: 80px 120px 1fr 16px; align-items: center; } .news-top-item__date { color: #323232; text-align: justify; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } .news-top-item__category { border-radius: 999px; border: 1px solid #323232; padding-top: 7px; padding-bottom: 7px; color: #323232; text-align: center; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 100%; /* 14px */ } .news-top-item__title { color: #323232; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-left: 32px; } .news-top-kv { position: relative; } .news-top-kv__image img { height: 436px; object-fit: cover; object-position: center; } .news-top-kv__inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: grid; align-items: center; grid-template-columns: minmax(0, 1120px); justify-content: center; padding-left: 20px; padding-right: 20px; } .news-top-kv__title-english { color: var(--white, #fff); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 700; line-height: 80%; /* 51.2px */ } .news-top-kv__title-japanese { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ margin-top: 16px; } .news-top-selector { display: grid; grid-template-columns: minmax(0, 1024px); padding-left: 20px; padding-right: 20px; justify-content: center; padding-top: 48px; padding-bottom: 48px; } .news-top-selector__list { display: flex; gap: 16px; flex-wrap: wrap; } .news-top-selector__item { width: 112px; flex-shrink: 0; flex-grow: 0; } .news-top-selector__item--all { width: 100px; } .news-top-selector-button { display: grid; width: 100%; border-radius: 999px; border: 1px solid var(--707070, #707070); background: var(--FAFAFA, #fafafa); padding-top: 7px; padding-bottom: 7px; } .news-top-selector-button__label { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; /* 12px */ } .news-top-selector-button--current { background: var(--D9D9D9, #d9d9d9); } } @media (max-width: 1023px) { .news-top { background: var(--F9F9F6, #f9f9f6); padding-bottom: 48px; } .news-top__body { padding-left: 25px; padding-right: 25px; display: grid; grid-template-columns: 100%; justify-content: center; } .news-top__title { margin-top: 48px; } .news-top__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 80%; /* 38.4px */ } .news-top__title-japanese { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ margin-top: 16px; } .news-top__list { margin-top: 48px; border-top: 1px solid var(--000000, #000); } .news-top__item { border-bottom: 1px dashed #707070; } .news-top__item:last-child { border-bottom: 1px solid var(--000000, #000); } .news-top__pagination { margin-top: 48px; } .news-top-item { padding-left: 8px; padding-right: 8px; padding-top: 16px; padding-bottom: 16px; display: grid; grid-template-columns: 71px 108px 1fr 16px; align-items: center; gap: 8px; } .news-top-item__date { grid-column: 1/2; grid-row: 1/2; color: #323232; text-align: justify; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } .news-top-item__category { grid-column: 2/3; grid-row: 1/2; border-radius: 999px; border: 1px solid #323232; padding-top: 4px; padding-bottom: 4px; color: #323232; text-align: center; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 100%; /* 12px */ } .news-top-item__title { grid-column: 1/4; grid-row: 2/3; color: #323232; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-right: 16px; } .news-top-item__arrow { grid-column: 4/5; grid-row: 2/3; } .news-top-kv { position: relative; } .news-top-kv__inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: grid; align-items: center; grid-template-columns: 100%; justify-content: center; padding-left: 20px; padding-right: 20px; } .news-top-kv__title-english { color: var(--white, #fff); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 80%; /* 38.4px */ } .news-top-kv__title-japanese { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ margin-top: 16px; } .news-top-selector { padding-left: 20px; padding-right: 20px; padding-top: 32px; padding-bottom: 0; } .news-top-selector__list { max-width: 232px; margin: 0 auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 0 auto; } .news-top-selector__item { width: 112px; } .news-top-selector-button { display: grid; width: 100%; border-radius: 999px; border: 1px solid var(--707070, #707070); background: var(--FAFAFA, #fafafa); padding-top: 7px; padding-bottom: 7px; } .news-top-selector-button__label { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; /* 12px */ } .news-top-selector-button--current { background: var(--D9D9D9, #d9d9d9); } } @media (hover: hover) { .news-top-item { transition: background 0.3s ease-out; } .news-top-item__arrow { position: relative; } .news-top-item__arrow svg { position: relative; } .news-top-item__arrow svg path { transition: fill 0.3s ease-out; } .news-top-item__arrow::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 999px; background: var(--323232, #323232); opacity: 0; transition: background 0.3s ease-out; } .news-top-item:hover { background: var(--ECECE3, #ecece3); } .news-top-item:hover .news-top-item__arrow svg { position: relative; } .news-top-item:hover .news-top-item__arrow svg path:nth-of-type(1) { fill: #fff; } .news-top-item:hover .news-top-item__arrow::before { opacity: 1; } .news-top-selector-button { transition: background 0.3s ease-out, border 0.3s ease-out; } .news-top-selector-button:hover { border: 1px solid var(--NSM-color, #b9141e); background: var(--D9D9D9, #d9d9d9); } } @media (min-width: 1024px) { .news { background: var(--F9F9F6, #f9f9f6); padding-top: 192px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 750px); justify-content: center; padding-bottom: 128px; } .news__body { margin-top: 32px; } .news__nav { margin-top: 80px; } .news-body > h1 { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 36px; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ } .news-body h1 + p, .news-body h1 + pre { margin-top: 32px; } .news-body > h2 { margin-top: 80px; color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ border-left: 4px solid var(--NSM-color, #b9141e); padding-left: 12px; } .news-body > h3 { margin-top: 48px; color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid #707070; } .news-body > p, .news-body > pre { margin-top: 16px; } .news-body p, .news-body pre, .news-body figcaption { color: var(--323232, #323232); text-align: justify; /* Noto Sans JP 16pt 150% */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .news-body pre { white-space: pre-wrap; } .news-body > .has-text-align-center { text-align: center; } .news-body > .has-text-align-right { text-align: right; } .news-body a { color: #0084ff; } .news-body em { font-style: italic; } .news-body strong { font-weight: 700; } .news-body s { text-decoration: line-through; } .news-body > .wp-block-image { margin-top: 48px; margin-left: 48px; margin-right: 48px; display: grid; justify-content: center; } .news-body img { border-radius: 8px; overflow: hidden; width: auto; max-width: 100%; height: auto; } .news-body > .wp-block-gallery { margin-top: 16px; display: grid; gap: 8px; } .news-body > .wp-block-gallery:has(.wp-block-image:nth-of-type(2)) { grid-template-columns: repeat(2, 1fr); } .news-body > blockquote { margin-top: 16px; color: var(--323232, #323232); text-align: justify; /* Noto Sans JP 16pt 150% */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ background: var(--F5F5F7, #f5f5f7); padding: 24px 48px; position: relative; z-index: 2; } .news-body > blockquote::before, .news-body > blockquote::after { content: ""; display: block; position: absolute; width: 64px; height: 48px; } .news-body > blockquote::before { left: 0; top: 0; background: url("/assets/images/pc/news/blockquote__left.svg") no-repeat center center/contain; z-index: -1; } .news-body > blockquote::after { right: 0; bottom: 0; background: url("/assets/images/pc/news/blockquote__right.svg") no-repeat center center/contain; z-index: -1; } .news-body > ol, .news-body > ul { margin-top: 48px; } .news-body > ol { list-style: decimal; list-style-position: inside; } .news-body > ul { list-style: disc; list-style-position: inside; } .news-body li { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; } .news-body__kv { margin-top: 32px; } .news-header { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 16px; } .news-header__category { color: #707070; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ border-radius: 999px; border: 1px solid #707070; padding-top: 3px; padding-bottom: 3px; padding-left: 15px; padding-right: 15px; } .news-header__category::before { content: "＃ "; } .news-header__date { color: #707070; text-align: right; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } .news-header__share-list { display: grid; grid-template-columns: 36px 32px 32px; justify-content: end; gap: 16px; } .news-kv { border-radius: 8px; overflow: hidden; } .news-kv img { margin: 0; } } @media (max-width: 1023px) { .news { background: var(--F9F9F6, #f9f9f6); background: var(--F9F9F6, #f9f9f6); padding-top: 128px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: 100%; justify-content: center; padding-bottom: 80px; } .news__body { margin-top: 48px; } .news__kv { margin-top: 16px; } .news__nav { margin-top: 48px; } .news-body > h1 { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .news-body > h2 { margin-top: 48px; color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ border-left: 4px solid var(--NSM-color, #b9141e); padding-left: 12px; } .news-body > h3 { margin-top: 32px; color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid #707070; } .news-body > p, .news-body > pre { margin-top: 16px; } .news-body p, .news-body pre, .news-body figcaption { color: var(--323232, #323232); text-align: justify; /* Noto Sans JP 16pt 150% */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .news-body pre { white-space: pre-wrap; } .news-body > .has-text-align-center { text-align: center; } .news-body > .has-text-align-right { text-align: right; } .news-body a { color: #0084ff; } .news-body em { font-style: italic; } .news-body strong { font-weight: 700; } .news-body s { text-decoration: line-through; } .news-body > .wp-block-image { margin-top: 32px; display: grid; justify-content: center; } .news-body img { border-radius: 8px; overflow: hidden; width: auto; max-width: 100%; height: auto; } .news-body > .wp-block-gallery { margin-top: 16px; display: grid; gap: 8px; } .news-body > .wp-block-gallery:has(.wp-block-image:nth-of-type(2)) { grid-template-columns: repeat(2, 1fr); } .news-body > blockquote { background: var(--F5F5F7, #f5f5f7); padding: 16px; position: relative; margin-top: 16px; color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ z-index: 2; } .news-body > blockquote::before, .news-body > blockquote::after { content: ""; display: block; position: absolute; width: 64px; height: 48px; } .news-body > blockquote::before { left: 0; top: 0; background: url("/assets/images/pc/news/blockquote__left.svg") no-repeat center center/contain; z-index: -1; } .news-body > blockquote::after { right: 0; bottom: 0; background: url("/assets/images/pc/news/blockquote__right.svg") no-repeat center center/contain; z-index: -1; } .news-body > ol, .news-body > ul { margin-top: 32px; } .news-body li { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .news-body > ol { list-style: decimal; list-style-position: inside; } .news-body > ul { list-style: disc; list-style-position: inside; } .news-header { display: grid; grid-template-columns: 1fr 132px; align-items: center; column-gap: 16px; row-gap: 8px; } .news-header__category { grid-column: 1/2; grid-row: 1/2; width: fit-content; color: #707070; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ border-radius: 999px; border: 1px solid #707070; padding-top: 3px; padding-bottom: 3px; padding-left: 15px; padding-right: 15px; } .news-header__category::before { content: "＃ "; } .news-header__date { grid-column: 1/2; grid-row: 2/3; color: #707070; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } .news-header__share-list { grid-column: 2/3; grid-row: 1/3; display: grid; grid-template-columns: 36px 32px 32px; justify-content: end; gap: 16px; } .news-kv { border-radius: 8px; overflow: hidden; } } @media (hover: hover) { .news-header__share-link { transition: opacity 0.3s; } .news-header__share-link:hover { opacity: 0.5; } } @media (min-width: 1024px) { .magazine-top { background: var(--FAFAFA, #fafafa); } .magazine-top__recommend { margin-top: 48px; } .magazine-top__category-list { margin-top: 48px; } .magazine-top__list { margin-top: 148px; } .magazine-top__pagination { margin-top: 48px; } .magazine-top__ranking { margin-top: 96px; } .magazine-header { padding-top: 32px; padding-bottom: 43px; display: grid; justify-content: center; grid-template-columns: 320px auto 320px; justify-content: center; align-items: center; gap: 48px; border-bottom: 6px solid var(--323232, #323232); position: relative; padding-left: 20px; padding-right: 20px; } .magazine-header::after { content: ""; width: 100%; position: absolute; bottom: 14px; left: 0; border-bottom: 1px solid var(--323232, #323232); } .magazine-header__title-block { order: 2; } .magazine-header__share-block { order: 1; display: grid; grid-template-columns: 36px 32px 32px; align-items: center; justify-content: center; gap: 32px; } .magazine-header__share-link { display: block; } .magazine-header__nav-block { order: 3; } .magazine-header__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: "DIN Next LT Pro"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 100%; /* 32px */ } .magazine-header__title-magazine { color: var(--000000, #000); font-family: "DIN Next LT Pro"; font-size: 64px; font-style: normal; font-weight: 500; line-height: 100%; /* 64px */ } .magazine-header__sub-title { display: grid; grid-template-columns: 35px auto 35px; align-items: center; justify-content: center; margin-top: 3px; } .magazine-header__sub-title-text { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ white-space: nowrap; } .magazine-header__nav-block { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .magazine-header__search { width: 195px; height: 48px; position: relative; } .magazine-header__search-input { display: block; width: 195px; height: 100%; border-radius: 4px; border: 1px solid var(--323232, #323232); background: #fafafa; padding: 11px 15px; color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .magazine-header__search-icon { position: absolute; top: 0; bottom: 0; right: 16px; width: 16px; height: 16px; margin: auto; pointer-events: none; } .magazine-header__nav-logo { display: block; } .magazine-topic-path { padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-top: 12px; padding-bottom: 11px; border-bottom: 1px solid #ddd; } .magazine-topic-path__list { display: flex; gap: 18px; align-items: center; } .magazine-topic-path__item { display: block; position: relative; color: var(--707070, #707070); text-align: center; font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ } .magazine-topic-path__item--top { width: 16px; } .magazine-topic-path__item + .magazine-topic-path__item::before { content: ""; display: block; width: 0.5px; height: 14px; rotate: 45deg; position: absolute; left: -8px; top: 0; bottom: 0; margin: auto; background: var(--707070, #707070); } .magazine-top-recommend__item { width: 480px; } .magazine-top-recommend__pagination { margin-top: 48px; } .magazine-top-recommend-pagination { display: grid; grid-template-columns: 16px auto 16px; align-items: center; justify-content: center; gap: 24px; } .magazine-top-recommend-pagination__page-list { display: flex; } .magazine-top-recommend-pagination__page-button.swiper-pagination-bullet { width: 24px; height: 8px; display: block; border: 1px solid var(--D9D9D9, #d9d9d9); background: transparent; border-radius: 0; opacity: 1; } .magazine-top-recommend-pagination__page-button.swiper-pagination-bullet.swiper-pagination-bullet-active { background: #d9d9d9; } .magazine-top-recommend-card { display: grid; } .magazine-top-recommend-card__image { border-radius: 8px; overflow: hidden; } .magazine-top-recommend-card__header { display: grid; grid-template-columns: auto 1fr; align-items: center; margin-top: 8px; } .magazine-top-recommend-card__category { border-radius: 999px; border: 1px solid #707070; padding: 3px 15px; color: #707070; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .magazine-top-recommend-card__category::before { content: "＃ "; } .magazine-top-recommend-card__date { color: #707070; text-align: right; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } .magazine-top-recommend-card__title { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 8px; } .magazine-top-recommend-card__description { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .magazine-top-category-list { display: grid; padding-left: 20px; padding-right: 20px; align-items: center; justify-content: center; grid-template-columns: minmax(0, 1024px); } .magazine-top-category-list__list { display: flex; flex-wrap: wrap; gap: 8px; } .magazine-top-category-list__link { display: block; border-radius: 999px; border: 1px solid var(--707070, #707070); background: var(--FAFAFA, #fafafa); padding: 7px 15px; color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; /* 12px */ } .magazine-top-category-list__link::before { content: "＃"; } .magazine-top-category-list__link--all::before { content: ""; } .magazine-top-list { display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-left: 20px; padding-right: 20px; } .magazine-top-list__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .magazine-top-ranking { background: var(--F5F5F7, #f5f5f7); padding-top: 128px; padding-bottom: 128px; padding-left: 20px; padding-right: 29px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; } .magazine-top-ranking__title { display: grid; grid-template-columns: 48px auto 1fr; align-items: end; gap: 8px; padding-bottom: 5px; border-bottom: 3px solid var(--000000, #000); } .magazine-top-ranking__title-english { color: #000; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ } .magazine-top-ranking__title-japanese { color: var(--000000, #000); /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .magazine-top-ranking__list { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; } .magazine-top-ranking-item { display: grid; } .magazine-top-ranking-item__label { display: grid; grid-template-columns: 48px auto 1fr; align-items: end; } .magazine-top-ranking-item__label-ranking { font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ padding-bottom: 6px; } .magazine-top-ranking-item__label-ranking--1 { color: #c39e5a; } .magazine-top-ranking-item__label-ranking--2 { color: #7f94a6; } .magazine-top-ranking-item__label-ranking--3 { color: #a67f7f; } .magazine-top-ranking-item__label-number { font-family: Poppins; font-size: 36px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ padding-left: 4px; padding-bottom: 2px; } .magazine-top-ranking-item__label-number--1 { color: #c39e5a; } .magazine-top-ranking-item__label-number--2 { color: #7f94a6; } .magazine-top-ranking-item__label-number--3 { color: #a67f7f; } } @media (max-width: 1023px) { .magazine-top { background: var(--FAFAFA, #fafafa); } .magazine-top__recommend { margin-top: 32px; } .magazine-top__category-list { margin-top: 32px; } .magazine-top__list { margin-top: 32px; } .magazine-top__pagination { margin-top: 48px; } .magazine-top__ranking { margin-top: 48px; } .magazine-header { padding-top: 32px; padding-bottom: 32px; display: grid; justify-content: center; grid-template-columns: 100%; justify-content: center; align-items: center; gap: 24px; border-bottom: 6px solid var(--323232, #323232); position: relative; padding-left: 20px; padding-right: 20px; } .magazine-header::after { content: ""; width: 100%; position: absolute; bottom: 8px; left: 0; border-bottom: 1px solid var(--323232, #323232); } .magazine-header__title-block { order: 1; } .magazine-header__share-block { order: 2; display: grid; grid-template-columns: 36px 32px 32px; align-items: center; justify-content: center; gap: 16px; } .magazine-header__nav-block { order: 3; } .magazine-header__title { /* color: var(--NSM-color, #B9141E); text-align: center; font-family: "DIN Next LT Pro"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 100%; */ /* 32px */ max-width: 295px; margin: 0 auto; } .magazine-header__title-magazine { color: var(--000000, #000); font-family: "DIN Next LT Pro"; font-size: 64px; font-style: normal; font-weight: 500; line-height: 100%; /* 64px */ } .magazine-header__sub-title { display: grid; grid-template-columns: 35px auto 35px; gap: 8px; align-items: center; justify-content: center; margin-top: 3px; } .magazine-header__sub-title-text { color: var(--323232, #323232); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ white-space: nowrap; } .magazine-header__nav-block { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .magazine-header__search { width: 220px; height: 37px; position: relative; } .magazine-header__search-input { display: block; width: 220px; height: 100%; border-radius: 4px; border: 1px solid var(--323232, #323232); background: #fafafa; padding: 7px 15px; color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .magazine-header__search-icon { position: absolute; top: 0; bottom: 0; right: 16px; width: 16px; height: 16px; margin: auto; pointer-events: none; } .magazine-header__nav-logo { display: block; } .magazine-topic-path { padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: 100%; justify-content: center; padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid #ddd; } .magazine-topic-path__list { display: flex; gap: 18px; align-items: center; } .magazine-topic-path__item { display: block; position: relative; color: var(--707070, #707070); text-align: center; font-family: "Noto Sans JP"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 150%; /* 15px */ } .magazine-topic-path__item--top { width: 16px; } .magazine-topic-path__item + .magazine-topic-path__item::before { content: ""; display: block; width: 0.5px; height: 14px; rotate: 45deg; position: absolute; left: -8px; top: 0; bottom: 0; margin: auto; background: var(--707070, #707070); } .magazine-top-recommend__item { width: 315px; } .magazine-top-recommend__pagination { margin-top: 32px; } .magazine-top-recommend-pagination { display: grid; grid-template-columns: 16px auto 16px; align-items: center; justify-content: center; gap: 8px; } .magazine-top-recommend-pagination__page-list { display: flex; } .magazine-top-recommend-pagination__page-button.swiper-pagination-bullet { width: 24px; height: 8px; display: block; border: 1px solid var(--D9D9D9, #d9d9d9); background: transparent; border-radius: 0; opacity: 1; } .magazine-top-recommend-pagination__page-button.swiper-pagination-bullet.swiper-pagination-bullet-active { background: #d9d9d9; } .magazine-top-recommend-card { display: grid; } .magazine-top-recommend-card__image { border-radius: 8px; overflow: hidden; } .magazine-top-recommend-card__header { display: grid; grid-template-columns: auto 1fr; align-items: center; margin-top: 8px; } .magazine-top-recommend-card__category { border-radius: 999px; border: 1px solid #707070; padding: 3px 15px; color: #707070; text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ /* 21px */ } .magazine-top-recommend-card__category::before { content: "＃ "; } .magazine-top-recommend-card__date { color: #707070; text-align: right; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } .magazine-top-recommend-card__title { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .magazine-top-recommend-card__description { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .magazine-top-category-list { display: grid; padding-left: 20px; padding-right: 20px; justify-content: center; grid-template-columns: 100%; } .magazine-top-category-list__list { display: flex; flex-wrap: wrap; gap: 8px; } .magazine-top-category-list__link { display: block; border-radius: 999px; border: 1px solid var(--707070, #707070); background: var(--FAFAFA, #fafafa); padding: 7px 15px; color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; /* 12px */ } .magazine-top-category-list__link::before { content: "＃"; } .magazine-top-category-list__link--all::before { content: ""; } .magazine-top-list { display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 32px; } .magazine-top-list__list { display: grid; grid-template-columns: 100%; gap: 24px; padding-left: 5px; padding-right: 5px; } .magazine-top-ranking { background: var(--F5F5F7, #f5f5f7); padding-top: 48px; padding-bottom: 48px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: 100%; justify-content: center; } .magazine-top-ranking__title { display: grid; grid-template-columns: 48px auto 1fr; align-items: end; gap: 8px; padding-bottom: 5px; border-bottom: 3px solid var(--000000, #000); } .magazine-top-ranking__title-english { color: #000; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ } .magazine-top-ranking__title-japanese { color: var(--000000, #000); /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .magazine-top-ranking__list { margin-top: 32px; display: grid; grid-template-columns: 100%; gap: 24px; padding-left: 5px; padding-right: 5px; } .magazine-top-ranking-item { display: grid; } .magazine-top-ranking-item__label { display: grid; grid-template-columns: 48px auto 1fr; align-items: end; } .magazine-top-ranking-item__label-ranking { font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ padding-bottom: 6px; } .magazine-top-ranking-item__label-ranking--1 { color: #c39e5a; } .magazine-top-ranking-item__label-ranking--2 { color: #7f94a6; } .magazine-top-ranking-item__label-ranking--3 { color: #a67f7f; } .magazine-top-ranking-item__label-number { font-family: Poppins; font-size: 36px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ padding-left: 4px; padding-bottom: 2px; } .magazine-top-ranking-item__label-number--1 { color: #c39e5a; } .magazine-top-ranking-item__label-number--2 { color: #7f94a6; } .magazine-top-ranking-item__label-number--3 { color: #a67f7f; } } @media (hover: hover) { a.magazine-topic-path__item { color: fill 0.3s ease-out; } a.magazine-topic-path__item svg path { transition: fill 0.3s ease-out; } a.magazine-topic-path__item:hover { color: var(--NSM-color, #b9141e); } a.magazine-topic-path__item:hover svg path { fill: var(--NSM-color, #b9141e); } .magazine-top-recommend-pagination__page-button.swiper-pagination-bullet { transition: background 0.3s ease-out; } .magazine-top-recommend-pagination__page-button.swiper-pagination-bullet:hover { background: #d9d9d9; } .magazine-top-recommend-pagination__arrow { position: relative; } .magazine-top-recommend-pagination__arrow svg { position: relative; } .magazine-top-recommend-pagination__arrow svg path { transition: fill 0.3s ease-out; } .magazine-top-recommend-pagination__arrow::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 999px; background: var(--323232, #323232); opacity: 0; transition: background 0.3s ease-out; } .magazine-top-recommend-pagination__arrow:hover svg { position: relative; } .magazine-top-recommend-pagination__arrow:hover svg path:nth-of-type(1) { fill: #fff; } .magazine-top-recommend-pagination__arrow:hover::before { opacity: 1; } .magazine-top-category-list__link { transition: color 0.3s ease-out, border 0.3s ease-out; } .magazine-top-category-list__link:hover { color: var(--NSM-color, #b9141e); border: solid 1px var(--NSM-color, #b9141e); } .magazine-top-recommend-card { position: relative; } .magazine-top-recommend-card .magazine-top-recommend-card__image { position: relative; } .magazine-top-recommend-card .magazine-top-recommend-card__image img { position: relative; transition: transform 0.3s ease-out, filter 0.3s ease-out; } .magazine-top-recommend-card .magazine-top-recommend-card__image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .magazine-top-recommend-card .magazine-top-recommend-card__title { transition: color 0.3s ease-out; } .magazine-top-recommend-card:hover .magazine-top-recommend-card__image img { will-change: transform; transform: scale(1.1); } .magazine-top-recommend-card:hover .magazine-top-recommend-card__image::after { opacity: 1; } .magazine-top-recommend-card:hover .magazine-top-recommend-card__title { color: var(--NSM-color, #b9141e); } } @media (min-width: 1024px) { .magazine { background: var(--FAFAFA, #fafafa); } .magazine__body { display: grid; grid-template-columns: minmax(0, 750px) 240px; gap: 34px; justify-content: center; padding-left: 20px; padding-right: 20px; margin-top: 48px; padding-bottom: 128px; } .magazine-detail__content { margin-top: 24px; padding-left: 47px; padding-right: 47px; } .magazine-detail__author { margin-top: 64px; } .magazine-detail__nav { margin-top: 64px; } .magazine-body > h1 { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 36px; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ position: relative; padding-bottom: 21px; border-bottom: 3px solid #000; } .magazine-body > h1::after { content: ""; display: block; width: 100%; height: 1px; background: #000; position: absolute; bottom: 8px; left: 0; } .magazine-body h1 + p, .magazine-body h1 + pre { margin-top: 48px; } .magazine-body > h2 { margin-top: 80px; color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ border-left: 4px solid var(--NSM-color, #b9141e); padding-left: 12px; } .magazine-body > h3 { margin-top: 32px; color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid #707070; } .magazine-body > p, .magazine-body > pre { margin-top: 16px; } .magazine-body p, .magazine-body pre, .magazine-body figcaption { color: var(--323232, #323232); text-align: justify; /* Noto Sans JP 16pt 150% */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .magazine-body pre { white-space: pre-wrap; } .magazine-body > .has-text-align-center { text-align: center; } .magazine-body > .has-text-align-right { text-align: right; } .magazine-body a { color: #0084ff; } .magazine-body em { font-style: italic; } .magazine-body strong { font-weight: 700; } .magazine-body s { text-decoration: line-through; } .magazine-body > .wp-block-image { margin-top: 16px; display: grid; justify-content: center; } .magazine-body img { border-radius: 8px; overflow: hidden; width: auto; max-width: 100%; height: auto; } .magazine-body > .wp-block-gallery { margin-top: 16px; display: grid; gap: 8px; } .magazine-body > .wp-block-gallery:has(.wp-block-image:nth-of-type(2)) { grid-template-columns: repeat(2, 1fr); } .magazine-body__index { margin-top: 80px; } .magazine-body > blockquote { margin-top: 16px; color: var(--323232, #323232); text-align: justify; /* Noto Sans JP 16pt 150% */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ background: var(--F5F5F7, #f5f5f7); padding: 24px 48px; position: relative; z-index: 2; } .magazine-body > blockquote::before, .magazine-body > blockquote::after { content: ""; display: block; position: absolute; width: 64px; height: 48px; } .magazine-body > blockquote::before { left: 0; top: 0; background: url("/assets/images/pc/news/blockquote__left.svg") no-repeat center center/contain; z-index: -1; } .magazine-body > blockquote::after { right: 0; bottom: 0; background: url("/assets/images/pc/news/blockquote__right.svg") no-repeat center center/contain; z-index: -1; } .magazine-body > ol, .magazine-body > ul { margin-top: 48px; } .magazine-body > ol { list-style: decimal; list-style-position: inside; } .magazine-body > ul { list-style: disc; list-style-position: inside; } .magazine-body li { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; } .magazine-kv { border-radius: 8px; overflow: hidden; } .magazine-detail-header { display: grid; align-items: center; grid-template-columns: auto 1fr; } .magazine-detail-header__category { border-radius: 999px; border: 1px solid #707070; padding-top: 3px; padding-bottom: 3px; padding-left: 15px; padding-right: 15px; color: #707070; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .magazine-detail-header__category::before { content: "＃ "; } .magazine-detail-header__date { color: #707070; text-align: right; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } .magazine-body .magazine-index { background: var(--white, #fff); padding: 32px; } .magazine-body .magazine-index__title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: Poppins; font-size: 48px; font-style: normal; font-weight: 700; line-height: 100%; /* 48px */ margin-top: 0; padding-left: 0; border: 0; } .magazine-body .magazine-index__item-lv1 { margin-top: 16px; } .magazine-body .magazine-index__link-lv1 { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .magazine-body .magazine-index__list-lv2 { margin-top: 8px; } .magazine-body .magazine-index__item-lv2::before { content: "・ "; } .magazine-body .magazine-index__link-lv2 { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .magazine-author { padding: 32px; border-radius: 4px; background: var(--EAEAEA, #eaeaea); } .magazine-author__header { display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: center; padding-bottom: 15px; border-bottom: 1px dashed var(--333333, #333); } .magazine-author__avatar { border-radius: 999px; overflow: hidden; } .magazine-author__profile-title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .magazine-author__profile-text { color: var(--333333, #333); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } .magazine-author__text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 16px; } .magazine-recommend { background: var(--F5F5F7, #f5f5f7); padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-top: 128px; padding-bottom: 128px; } .magazine-recommend__title-english { color: #000; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ } .magazine-recommend__title-japanese { color: var(--000000, #000); /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .magazine-recommend__title { padding-bottom: 5px; border-bottom: 3px solid var(--000000, #000); display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 8px; } .magazine-recommend__list { list-style-type: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; } .magazine-side__banner { margin-top: 16px; } .magazine-side__banner-link { display: block; border-radius: 8px; overflow: hidden; } .magazine-side-ranking__title { display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding-bottom: 5px; border-bottom: 3px solid var(--000000, #000); } .magazine-side-ranking__title-text { color: #000; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ } .magazine-side-ranking__item { padding-top: 16px; padding-bottom: 16px; } .magazine-side-ranking__item + .magazine-side-ranking__item { border-top: 1px dotted #323232; } .magazine-side-ranking-card-1 { display: grid; } .magazine-side-ranking-card-1__image { border-radius: 4px; overflow: hidden; } .magazine-side-ranking-card-1__header { display: grid; grid-template-columns: auto 1fr; align-items: center; } .magazine-side-ranking-card-1__rank { display: grid; grid-template-columns: 32px auto 1fr; align-items: end; } .magazine-side-ranking-card-1__rank-label { color: #c39e5a; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; /* 14px */ } .magazine-side-ranking-card-1__rank-number { color: #c39e5a; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; } .magazine-side-ranking-card-1__date { color: #707070; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; /* 12px */ text-align: right; } .magazine-side-ranking-card-1__title { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .magazine-side-ranking-card { display: grid; grid-template-columns: 1fr 136px; gap: 8px; align-items: start; } .magazine-side-ranking-card__image { border-radius: 4px; overflow: hidden; } .magazine-side-ranking-card__header { display: grid; grid-template-columns: auto 1fr; align-items: center; } .magazine-side-ranking-card__rank { display: grid; grid-template-columns: 24px 1fr; align-items: end; gap: 4px; } .magazine-side-ranking-card__rank-number { color: #707070; font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ } .magazine-side-ranking-card__rank-number--2 { color: #7f94a6; } .magazine-side-ranking-card__rank-number--3 { color: #a67f7f; } .magazine-side-ranking-card__date { color: #707070; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; /* 12px */ text-align: right; } .magazine-side-ranking-card__title { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 130%; /* 15.6px */ margin-top: 4px; } } @media (max-width: 1023px) { .magazine { background: var(--FAFAFA, #fafafa); } .magazine__body { display: grid; grid-template-columns: 100%; gap: 48px; justify-content: center; padding-bottom: 48px; } .magazine-detail__content { margin-top: 32px; padding-left: 20px; padding-right: 20px; } .magazine-detail__author { margin-top: 80px; } .magazine-detail__nav { margin-top: 64px; } .magazine-body > h1 { margin-top: 32px; color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ position: relative; padding-bottom: 21px; border-bottom: 3px solid #000; } .magazine-body > h1::after { content: ""; display: block; width: 100%; height: 1px; background: #000; position: absolute; bottom: 8px; left: 0; } .magazine-body h1 + p, .magazine-body h1 + pre { margin-top: 24px; } .magazine-body > h2 { margin-top: 48px; color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ border-left: 4px solid var(--NSM-color, #b9141e); padding-left: 12px; } .magazine-body > h3 { margin-top: 32px; color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid #707070; } .magazine-body > p, .magazine-body > pre { margin-top: 16px; } .magazine-body p, .magazine-body pre, .magazine-body figcaption { color: var(--323232, #323232); text-align: justify; /* Noto Sans JP 16pt 150% */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .magazine-body pre { white-space: pre-wrap; } .magazine-body > .has-text-align-center { text-align: center; } .magazine-body > .has-text-align-right { text-align: right; } .magazine-body a { color: #0084ff; } .magazine-body em { font-style: italic; } .magazine-body strong { font-weight: 700; } .magazine-body s { text-decoration: line-through; } .magazine-body > .wp-block-image { margin-top: 16px; display: grid; justify-content: center; } .magazine-body img { border-radius: 8px; overflow: hidden; width: auto; max-width: 100%; height: auto; } .magazine-body > .wp-block-gallery { margin-top: 16px; display: grid; gap: 8px; } .magazine-body > .wp-block-gallery:has(.wp-block-image:nth-of-type(2)) { grid-template-columns: repeat(2, 1fr); } .magazine-body__index { margin-top: 48px; } .magazine-body > blockquote { margin-top: 16px; color: var(--323232, #323232); text-align: justify; /* Noto Sans JP 16pt 150% */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ background: var(--F5F5F7, #f5f5f7); padding: 24px 48px; position: relative; z-index: 2; } .magazine-body > blockquote::before, .magazine-body > blockquote::after { content: ""; display: block; position: absolute; width: 64px; height: 48px; } .magazine-body > blockquote::before { left: 0; top: 0; background: url("/assets/images/pc/news/blockquote__left.svg") no-repeat center center/contain; z-index: -1; } .magazine-body > blockquote::after { right: 0; bottom: 0; background: url("/assets/images/pc/news/blockquote__right.svg") no-repeat center center/contain; z-index: -1; } .magazine-body > ol, .magazine-body > ul { margin-top: 24px; } .magazine-body > ol { list-style: decimal; list-style-position: inside; } .magazine-body > ul { list-style: disc; list-style-position: inside; } .magazine-body li { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; } .magazine-kv { overflow: hidden; } .magazine-detail-header { display: grid; align-items: center; grid-template-columns: auto 1fr; } .magazine-detail-header__category { border-radius: 999px; border: 1px solid #707070; padding-top: 3px; padding-bottom: 3px; padding-left: 15px; padding-right: 15px; color: #707070; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .magazine-detail-header__category::before { content: "＃ "; } .magazine-detail-header__date { color: #707070; text-align: right; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 100%; /* 14px */ } .magazine-body .magazine-index { background: var(--white, #fff); padding: 32px; } .magazine-body .magazine-index__title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: Poppins; font-size: 48px; font-style: normal; font-weight: 700; line-height: 100%; /* 48px */ margin-top: 0; padding-left: 0; border: 0; } .magazine-body .magazine-index__item-lv1 { margin-top: 16px; } .magazine-body .magazine-index__link-lv1 { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .magazine-body .magazine-index__list-lv2 { margin-top: 8px; } .magazine-body .magazine-index__item-lv2::before { content: "・ "; } .magazine-body .magazine-index__link-lv2 { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .magazine-author { padding: 32px 20px; background: var(--EAEAEA, #eaeaea); } .magazine-author__header { display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: center; padding-bottom: 15px; border-bottom: 1px dashed var(--333333, #333); } .magazine-author__avatar { border-radius: 999px; overflow: hidden; } .magazine-author__profile-title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .magazine-author__profile-text { color: var(--333333, #333); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } .magazine-author__text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 16px; } .magazine-recommend { background: var(--F5F5F7, #f5f5f7); padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: 100%; justify-content: center; padding-top: 48px; padding-bottom: 48px; } .magazine-recommend__title-english { color: #000; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ } .magazine-recommend__title-japanese { color: var(--000000, #000); /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .magazine-recommend__title { padding-bottom: 5px; border-bottom: 3px solid var(--000000, #000); display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 8px; } .magazine-recommend__list { list-style-type: none; display: grid; grid-template-columns: 100%; gap: 24px; margin-top: 32px; padding-left: 5px; padding-right: 5px; } .magazine-side { padding-left: 20px; padding-right: 20px; padding-top: 32px; } .magazine-side__banner { margin-top: 16px; } .magazine-side__banner-link { display: block; border-radius: 8px; overflow: hidden; } .magazine-side-ranking__title { display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding-bottom: 5px; border-bottom: 3px solid var(--000000, #000); } .magazine-side-ranking__title-text { color: #000; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ } .magazine-side-ranking__item { padding-top: 16px; padding-bottom: 16px; } .magazine-side-ranking__item + .magazine-side-ranking__item { border-top: 1px dotted #323232; } .magazine-side-ranking-card-1 { display: grid; } .magazine-side-ranking-card-1__image { border-radius: 4px; overflow: hidden; } .magazine-side-ranking-card-1__header { display: grid; grid-template-columns: auto 1fr; align-items: center; } .magazine-side-ranking-card-1__rank { display: grid; grid-template-columns: 32px auto 1fr; align-items: end; } .magazine-side-ranking-card-1__rank-label { color: #c39e5a; font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; /* 14px */ padding-bottom: 6px; } .magazine-side-ranking-card-1__rank-number { color: #c39e5a; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; padding-bottom: 2px; } .magazine-side-ranking-card-1__date { text-align: right; color: #707070; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; /* 12px */ } .magazine-side-ranking-card-1__title { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .magazine-side-ranking-card { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: start; } .magazine-side-ranking-card__image { border-radius: 4px; overflow: hidden; } .magazine-side-ranking-card__header { display: grid; grid-template-columns: auto 1fr; align-items: center; } .magazine-side-ranking-card__rank { display: grid; grid-template-columns: 24px 1fr; align-items: end; gap: 4px; } .magazine-side-ranking-card__rank-number { color: #707070; font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 600; line-height: 100%; /* 24px */ } .magazine-side-ranking-card__rank-number--2 { color: #7f94a6; } .magazine-side-ranking-card__rank-number--3 { color: #a67f7f; } .magazine-side-ranking-card__date { color: #707070; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; /* 12px */ text-align: right; } .magazine-side-ranking-card__title { color: var(--323232, #323232); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 130%; /* 15.6px */ margin-top: 4px; } } @media (hover: hover) { .magazine-index__link-lv1 { transform: color 0.3s ease-out; } .magazine-index__link-lv1:hover { color: var(--NSM-color, #b9141e); } .magazine-index__link-lv2 { transform: color 0.3s ease-out; } .magazine-index__link-lv2:hover { color: var(--NSM-color, #b9141e); } .magazine-side__banner-link { position: relative; } .magazine-side__banner-link picture { position: relative; } .magazine-side__banner-link::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .magazine-side__banner-link:hover::after { opacity: 1; } .magazine-side-ranking-card-1__image img { will-change: scale; transition: scale 0.3s ease-in-out; } .magazine-side-ranking-card-1:hover .magazine-side-ranking-card-1__image img { scale: 1.1; } .magazine-side-ranking-card__image img { will-change: scale; transition: scale 0.3s ease-in-out; } .magazine-side-ranking-card:hover .magazine-side-ranking-card__image img { scale: 1.1; } .magazine-header__share-link { transition: opacity 0.3s ease-in-out; } .magazine-header__share-link:hover { opacity: 0.5; } } @media (min-width: 1024px) { .campus-life-top-kv { position: relative; } .campus-life-top-kv__image img { height: 832px; object-fit: cover; object-position: top; } .campus-life-top-kv__body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 48px; padding-bottom: 48px; align-items: end; align-content: end; } .campus-life-top-kv__catch-copy { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 30px; font-style: normal; font-weight: 700; line-height: 150%; /* 45px */ } .campus-life-top-kv__text { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ margin-top: 24px; } } @media (max-width: 1023px) { .campus-life-top-kv { position: relative; } .campus-life-top-kv__body { position: relative; display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 24px; padding-right: 24px; padding-top: 32px; padding-bottom: 32px; background-color: var(--white, #fff); } .campus-life-top-kv__catch-copy { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .campus-life-top-kv__text { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 180%; /* 25.2px */ margin-top: 16px; } } @media (min-width: 1024px) { .campus-life-event-section { display: grid; grid-template-columns: minmax(0, 1280px); padding-left: 20px; padding-right: 20px; justify-content: center; padding-top: 80px; padding-bottom: 80px; } .campus-life-event-section__body { margin-top: 32px; } .campus-life-event-section__block2 { margin-top: 16px; } .campus-life-event-header { display: grid; align-items: center; grid-template-columns: auto 1fr; gap: 32px; justify-content: center; } .campus-life-event-header__month { display: grid; justify-items: center; } .campus-life-event-header__month-icon { width: 32px; } .campus-life-event-header__month-number { color: var(--000000, #000); text-align: center; font-family: Poppins; font-size: 128px; font-style: italic; font-weight: 700; line-height: 80%; /* 102.4px */ margin-top: 8px; } .campus-life-event-header__month-text { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 25.6px */ margin-top: 8px; } .campus-life-event-header__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; } .campus-life-event-header-item { border-radius: 4px; border: 1px solid var(--NSM-color, #b9141e); padding-top: 15px; padding-bottom: 15px; padding-left: 23px; padding-right: 23px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; height: 100%; } .campus-life-event-header-item__label { color: var(--555555, #555); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .campus-life-event-header-item__label--pickup { color: var(--NSM-color, #b9141e); } .campus-life-event-section-block1 { display: grid; grid-template-columns: 538fr 355fr 355fr; grid-template-rows: 1fr auto auto; gap: 16px; align-content: end; align-items: end; } .campus-life-event-section-block1__section { padding-top: 16px; display: grid; align-items: center; padding-left: 16px; padding-right: 16px; } .campus-life-event-section-block1__section-title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 700; line-height: 150%; /* 42px */ } .campus-life-event-section-block1__section-description { color: var(--555555, #555); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; } .campus-life-event-section-block1__item--1 { grid-column: 2/4; grid-row: 1/2; display: grid; align-items: center; height: 100%; } .campus-life-event-section-block1__item--2 { grid-column: 1/2; grid-row: 1/4; } .campus-life-event-section-block2 { display: grid; grid-template-columns: 416fr 848fr; gap: 16px; } .campus-life-event-section-block2__item--3 { grid-column: 2/3; grid-row: 1/3; } .campus-life-event-section-block3 { display: grid; grid-template-columns: repeat(3, 416fr); gap: 16px; } .campus-life-event-section-block3__section { padding-bottom: 32px; } .campus-life-event-section-block3__section-title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 700; line-height: 150%; /* 42px */ } .campus-life-event-section-block3__section-description { color: var(--555555, #555); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; } .campus-life-event-section-block3__item--1 { grid-column: 1/4; padding-left: 16px; padding-right: 16px; padding-top: 32px; } .campus-life-event-section-block3__item--2 { grid-column: 1/3; grid-row: 2/4; } } @media (max-width: 1023px) { .campus-life-event-section { display: grid; grid-template-columns: 100%; padding-left: 10px; padding-right: 10px; justify-content: center; padding-top: 48px; padding-bottom: 48px; } .campus-life-event-section__body { margin-top: 32px; } .campus-life-event-section__block2 { margin-top: 8px; } .campus-life-event-header { display: grid; align-items: center; grid-template-columns: 100%; gap: 32px; padding-left: 4px; padding-right: 4px; } .campus-life-event-header__month { width: fit-content; display: grid; justify-items: center; padding-left: 8px; padding-right: 8px; } .campus-life-event-header__month-icon { width: 32px; } .campus-life-event-header__month-number { color: var(--000000, #000); text-align: center; font-family: Poppins; font-size: 96px; font-style: italic; font-weight: 700; line-height: 80%; /* 76.8px */ margin-top: 8px; } .campus-life-event-header__month-text { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 25.6px */ margin-top: 8px; } .campus-life-event-header__list { display: grid; grid-template-columns: 100%; gap: 16px; } .campus-life-event-header-item { border-radius: 4px; border: 1px solid var(--NSM-color, #b9141e); padding-top: 15px; padding-bottom: 15px; padding-left: 23px; padding-right: 23px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; } .campus-life-event-header-item__label { color: var(--555555, #555); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .campus-life-event-header-item__label--pickup { color: var(--NSM-color, #b9141e); } .campus-life-event-section-block1 { display: grid; grid-template-columns: 100%; gap: 8px; } .campus-life-event-section-block1__section { display: grid; align-items: center; padding-top: 16px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; } .campus-life-event-section-block1__section-title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .campus-life-event-section-block1__section-description { color: var(--555555, #555); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-top: 8px; } .campus-life-event-section-block1__item--2 { grid-row: 6; } .campus-life-event-section-block2 { display: grid; gap: 8px; } .campus-life-event-section-block3 { display: grid; gap: 8px; } .campus-life-event-section-block3__section { display: grid; align-items: center; padding-top: 16px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; } .campus-life-event-section-block3__section-title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .campus-life-event-section-block3__section-description { color: var(--555555, #555); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-top: 8px; } } @media (min-width: 1024px) { .campus-life-interview-section { padding-top: 80px; padding-bottom: 80px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1280px); justify-content: center; } .campus-life-interview-section__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; } .campus-life-interview-card { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: center; } .campus-life-interview-card__image { border-radius: 8px; overflow: hidden; } .campus-life-interview-card__body { padding-left: 4px; padding-right: 4px; } .campus-life-interview-card__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 22px; font-style: normal; font-weight: 700; line-height: 150%; /* 33px */ } .campus-life-interview-card__profile { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: end; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .campus-life-interview-card__course { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 130%; /* 18.2px */ grid-column: 1/3; } .campus-life-interview-card__name { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 500; line-height: 150%; /* 42px */ } .campus-life-interview-card__name-suffix { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .campus-life-interview-card__school { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 120%; /* 14.4px */ padding-bottom: 6px; } .campus-life-interview-card__description { color: var(--555555, #555); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } } @media (max-width: 1023px) { .campus-life-interview-section { padding-top: 80px; padding-bottom: 80px; padding-left: 37.5px; padding-right: 37.5px; display: grid; grid-template-columns: 100%; justify-content: center; } .campus-life-interview-section__list { display: grid; grid-template-columns: 100%; gap: 80px; } .campus-life-interview-card { display: grid; grid-template-columns: 100%; gap: 12px; align-items: center; } .campus-life-interview-card__image { border-radius: 8px; overflow: hidden; } .campus-life-interview-card__body { padding-left: 4px; padding-right: 4px; } .campus-life-interview-card__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 22px; font-style: normal; font-weight: 700; line-height: 150%; /* 33px */ } .campus-life-interview-card__profile { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: end; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .campus-life-interview-card__course { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 130%; /* 18.2px */ grid-column: 1/3; } .campus-life-interview-card__name { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 500; line-height: 150%; /* 42px */ } .campus-life-interview-card__name-suffix { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .campus-life-interview-card__school { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 120%; /* 14.4px */ padding-bottom: 6px; } .campus-life-interview-card__description { color: var(--555555, #555); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } } @media (min-width: 1024px) { .campus-life-real-section { padding-top: 96px; padding-bottom: 96px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; } .campus-life-real-section__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .campus-life-real-card { border-radius: 8px; background: var(--white, #fff); padding-top: 32px; height: 100%; position: relative; } .campus-life-real-card__q-block { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding-bottom: 15px; border-bottom: 1px dashed var(--707070, #707070); margin-left: 24px; margin-right: 24px; } .campus-life-real-card__q { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 25.6px */ } .campus-life-real-card__q-label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .campus-life-real-card__q-block-note { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; } .campus-life-real-card__a-block { margin-left: 24px; margin-right: 24px; display: grid; grid-template-columns: auto 1fr; gap: 16px; margin-top: 16px; } .campus-life-real-card__a-block--absolute { position: relative; } .campus-life-real-card__a-block--absolute .campus-life-real-card__a-content { position: relative; } .campus-life-real-card__a { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 25.6px */ } .campus-life-real-card__a-title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } .campus-life-real-card__a-description { color: var(--555555, #555); text-align: justify; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .campus-life-real-card__a-title + .campus-life-real-card__a-description { margin-top: 4px; } .campus-life-real-card__a-ranking { grid-column: 1/3; } .campus-life-real-card__a-ranking-item { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; } .campus-life-real-card__a-ranking-item--1 { --ranking-color: #b9141e; --ranking-number-font-size: 28px; --ranking-font-size: 24px; } .campus-life-real-card__a-ranking-item--2, .campus-life-real-card__a-ranking-item--3 { --ranking-color: #000; --ranking-number-font-size: 24px; --ranking-font-size: 20px; } .campus-life-real-card__a-ranking-item--4, .campus-life-real-card__a-ranking-item--5 { --ranking-color: #555; --ranking-number-font-size: 20px; --ranking-font-size: 14px; } .campus-life-real-card__a-ranking-item--etc { --ranking-color: #555; --ranking-number-font-size: 12px; --ranking-font-size: 12px; } .campus-life-real-card__a-ranking-item + .campus-life-real-card__a-ranking-item { border-top: 1px dashed var(--D9D9D9, #d9d9d9); margin-top: 4px; padding-top: 4px; } .campus-life-real-card__a-ranking-item-number { color: var(--ranking-color, #555); font-family: Poppins, "Noto Sans JP"; font-size: var(--ranking-number-font-size, 12px); font-style: italic; font-weight: 600; line-height: 100%; /* 28px */ text-align: right; } .campus-life-real-card__a-ranking-item-number-suffix { font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ display: inline-block; margin-left: 2px; } .campus-life-real-card__a-ranking-item-content { color: var(--ranking-color, #555); font-family: "Noto Sans JP"; font-size: var(--ranking-font-size, 12px); font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .campus-life-real-card__a-ranking-item-etc-label { color: var(--555555, #555); text-align: right; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .campus-life-real-card__image { margin-top: 16px; } .campus-life-real-card__image--4 { position: absolute; left: 0; bottom: 0; width: 100%; } .campus-life-real-card__image--8 { margin-top: -26px; } .campus-life-real-card__image--9 { position: absolute; right: 24px; bottom: 0; left: 171px; } .campus-life-real-card--11 { padding-bottom: 102px; } .campus-life-real-card__image--11 { position: absolute; left: 0; bottom: 0; width: 100%; } } @media (max-width: 1023px) { .campus-life-real-section { padding-top: 96px; padding-bottom: 96px; padding-left: 16px; padding-right: 16px; display: grid; grid-template-columns: 100%; justify-content: center; } .campus-life-real-section__list { display: grid; grid-template-columns: 100%; gap: 80px; } .campus-life-real-card { border-radius: 8px; background: var(--white, #fff); padding-top: 32px; height: 100%; position: relative; } .campus-life-real-card__q-block { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding-bottom: 15px; border-bottom: 1px dashed var(--707070, #707070); margin-left: 24px; margin-right: 24px; } .campus-life-real-card__q { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 25.6px */ } .campus-life-real-card__q-label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .campus-life-real-card__q-block-note { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; } .campus-life-real-card__a-block { margin-left: 24px; margin-right: 24px; display: grid; grid-template-columns: auto 1fr; gap: 16px; margin-top: 16px; } .campus-life-real-card__a-block--absolute { position: relative; } .campus-life-real-card__a-block--absolute .campus-life-real-card__a-content { position: relative; } .campus-life-real-card__a { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 25.6px */ } .campus-life-real-card__a-title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } .campus-life-real-card__a-description { color: var(--555555, #555); text-align: justify; /* Noto Sans M 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .campus-life-real-card__a-title + .campus-life-real-card__a-description { margin-top: 4px; } .campus-life-real-card__a-ranking { grid-column: 1/3; } .campus-life-real-card__a-ranking-item { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; } .campus-life-real-card__a-ranking-item--1 { --ranking-color: #b9141e; --ranking-number-font-size: 28px; --ranking-font-size: 24px; } .campus-life-real-card__a-ranking-item--2, .campus-life-real-card__a-ranking-item--3 { --ranking-color: #000; --ranking-number-font-size: 24px; --ranking-font-size: 20px; } .campus-life-real-card__a-ranking-item--4, .campus-life-real-card__a-ranking-item--5 { --ranking-color: #555; --ranking-number-font-size: 20px; --ranking-font-size: 14px; } .campus-life-real-card__a-ranking-item--4 .campus-life-real-card__a-ranking-item-content, .campus-life-real-card__a-ranking-item--5 .campus-life-real-card__a-ranking-item-content { font-weight: 400; } .campus-life-real-card__a-ranking-item--etc { align-items: start; --ranking-color: #555; --ranking-number-font-size: 12px; --ranking-font-size: 12px; } .campus-life-real-card__a-ranking-item--etc .campus-life-real-card__a-ranking-item-content { font-weight: 500; } .campus-life-real-card__a-ranking-item + .campus-life-real-card__a-ranking-item { border-top: 1px dashed var(--D9D9D9, #d9d9d9); margin-top: 4px; padding-top: 4px; } .campus-life-real-card__a-ranking-item-number { color: var(--ranking-color, #555); font-family: Poppins, "Noto Sans JP"; font-size: var(--ranking-number-font-size, 12px); font-style: italic; font-weight: 600; line-height: 100%; /* 28px */ text-align: right; } .campus-life-real-card__a-ranking-item-number-suffix { font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ display: inline-block; margin-left: 2px; } .campus-life-real-card__a-ranking-item-content { color: var(--ranking-color, #555); font-family: "Noto Sans JP"; font-size: var(--ranking-font-size, 12px); font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .campus-life-real-card__a-ranking-item-etc-label { color: var(--555555, #555); text-align: right; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .campus-life-real-card__image { margin-top: 16px; } .campus-life-real-card__image--8 { margin-top: -26px; } .campus-life-real-card__image--9 { position: absolute; right: 24px; bottom: 0; left: 171px; } .campus-life-real-card--9 { padding-bottom: 20px; } .campus-life-real-card--11 { padding-bottom: 104px; } .campus-life-real-card__image--11 { position: absolute; left: 0; bottom: 0; width: 100%; } .campus-life-real-card--12 { padding-bottom: 32px; } } @media (min-width: 1024px) { .campus-life-oneday { padding-top: 80px; display: grid; justify-items: center; } .campus-life-oneday--life { --color-main: #b9141e; } .campus-life-oneday--ordinary { --color-main: #0242b8; background-color: #f9f9fe; } .campus-life-oneday__title-block { position: relative; padding-top: 8px; padding-bottom: 8px; } .campus-life-oneday__title-block::before, .campus-life-oneday__title-block::after { content: ""; position: absolute; width: 48px; height: 100%; top: 0; } .campus-life-oneday__title-block::before { left: -64px; border-left: 9px solid #000; border-top: 9px solid #000; border-bottom: 9px solid #000; } .campus-life-oneday__title-block::after { right: -64px; border-right: 9px solid #000; border-top: 9px solid #000; border-bottom: 9px solid #000; } .campus-life-oneday__section { width: 100%; display: grid; justify-items: center; grid-template-columns: minmax(0, 1024px); padding-left: 20px; padding-right: 20px; justify-content: center; } .campus-life-oneday__title { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 56px; font-style: normal; font-weight: 700; line-height: 130%; /* 72.8px */ } .campus-life-oneday__title-strong { color: var(--color-main); } .campus-life-oneday__catch-copy { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 8px; } .campus-life-oneday__section { margin-top: 80px; padding-top: 48px; padding-bottom: 48px; } .campus-life-oneday__section--even { background: #f4f4f1; } .campus-life-oneday--ordinary .campus-life-oneday__section--even { background: #f0f0fb; } .campus-life-oneday--ordinary .campus-life-oneday__section:last-child { padding-bottom: 112px; } .campus-life-oneday-section__favorite { margin-top: 64px; } .campus-life-oneday-section__introduction { margin-top: 64px; } .campus-life-oneday-section__faq-section { margin-top: 64px; } .campus-life-oneday-kv { position: relative; } .campus-life-oneday-kv__image { border-radius: 8px; overflow: hidden; margin-right: 224px; } .campus-life-oneday-kv__body { position: absolute; width: 352px; bottom: 48px; right: 0; border-radius: 8px; background: #fff; padding: 32px; } .campus-life-oneday-kv--reverse .campus-life-oneday-kv__image { margin-right: 0; margin-left: 224px; } .campus-life-oneday-kv--reverse .campus-life-oneday-kv__body { right: auto; left: 0; } .campus-life-oneday-kv__label { color: var(--000000, #000); text-align: right; font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 600; line-height: 80%; /* 25.6px */ } .campus-life-oneday-kv__label-strong { color: var(--color-main); } .campus-life-oneday-kv__number { color: var(--D9D9D9, #d9d9d9); font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 600; line-height: 80%; /* 51.2px */ } .campus-life-oneday-kv__badge { padding: 4px 8px; color: var(--white, #fff); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .campus-life-oneday-kv__badge--single { background: var(--0242b8, #0242b8); } .campus-life-oneday-kv__badge--dormitory { background: var(--000000, #000); } .campus-life-oneday-kv__header { display: grid; grid-template-columns: auto auto auto; gap: 8px; justify-content: start; align-items: end; } .campus-life-oneday-kv__course { margin-top: 4px; color: var(--color-main); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .campus-life-oneday-kv__name { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 500; line-height: 150%; /* 48px */ margin-top: 4px; } .campus-life-oneday-kv__name-suffix { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; /* 27px */ } .campus-life-oneday-kv__school { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 150%; /* 18px */ margin-top: 4px; } .campus-life-oneday-kv__detail { display: flex; gap: 8px; margin-top: 4px; } .campus-life-oneday-kv__dl { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 4px; align-items: center; } .campus-life-oneday-kv__dt { border: 0.5px solid var(--707070, #707070); padding-top: 1px; padding-bottom: 1px; padding-left: 5px; padding-right: 5px; color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 11px; font-style: normal; font-weight: 400; line-height: 150%; /* 16.5px */ } .campus-life-oneday-kv__dd { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .campus-life-oneday-favorite { border-radius: 16px; border: 1px solid var(--color-main); padding: 63px 19px; display: grid; grid-template-columns: minmax(0, 864px); justify-content: center; } .campus-life-oneday-favorite__header { height: 100%; display: grid; align-items: center; } .campus-life-oneday-favorite__list { display: grid; grid-template-columns: repeat(2, minmax(0, 355px)); gap: 48px; justify-content: center; margin-top: 32px; } .campus-life-oneday-favorite-title { border-bottom: 1px solid var(--color-main); padding-bottom: 23px; display: grid; grid-template-columns: auto 1fr; gap: 16px; } .campus-life-oneday-favorite-title--center { grid-template-columns: 1fr; justify-content: center; text-align: center; } .campus-life-oneday-favorite-title__english { color: var(--color-main); font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 700; line-height: 80%; /* 51.2px */ } .campus-life-oneday-favorite-title__japanese { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 80%; /* 14.4px */ } .campus-life-oneday-schedule-card__image { border-radius: 8px; overflow: hidden; } .campus-life-oneday-schedule-card__title { display: grid; grid-template-columns: 32px 1fr; gap: 4px; align-items: center; margin-top: 8px; } .campus-life-oneday-schedule-card__title-label { color: var(--color-main); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } .campus-life-oneday-schedule-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 4px; } .campus-life-oneday-introduction { display: grid; gap: 32px; } .campus-life-oneday-introduction__lead { color: var(--color-main); font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 700; line-height: 150%; /* 42px */ } .campus-life-oneday-introduction__lead--right { text-align: right; } .campus-life-oneday-introduction__list { display: flex; gap: 16px; } .campus-life-oneday-introduction__item { flex-basis: 355px; } .campus-life-oneday-introduction__image { position: relative; } .campus-life-oneday-introduction__image--2-1 { padding-left: 141px; } .campus-life-oneday-introduction__image-caption { position: absolute; color: var(--color-main); font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 700; line-height: 150%; /* 42px */ left: 32px; bottom: 64px; } .campus-life-oneday-introduction-card { border-radius: 8px; background: var(--white, #fff); overflow: hidden; height: 100%; } .campus-life-oneday-introduction-card__body { padding: 12px; padding-bottom: 16px; } .campus-life-oneday-introduction-card__header { display: grid; grid-template-columns: auto 1fr; gap: 4px; align-items: center; } .campus-life-oneday-introduction-card__category { border-radius: 4px; background: var(--color-main); padding: 2px 8px; color: var(--white, #fff); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .campus-life-oneday-introduction-card__title { color: var(--color-main); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } .campus-life-oneday-introduction-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 4px; } .campus-life-oneday-favorite-card__image { border-radius: 8px; overflow: hidden; } .campus-life-oneday-favorite-card__description { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } .campus-life-oneday-faq-section { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; } .campus-life-oneday-faq-section__image--3 { width: 298px; } .campus-life-oneday-faq-section__image--4 { width: 368px; } .campus-life-oneday-faq-section__image--5 { width: 368px; } .campus-life-oneday-faq-section__image--6 { width: 384px; } .campus-life-oneday-faq-section__list { display: grid; gap: 16px; } .campus-life-oneday-faq-section--reverse { grid-template-columns: auto 1fr; } .campus-life-oneday-faq-section--reverse .campus-life-oneday-faq-section__image { order: 1; } .campus-life-oneday-faq-section--reverse .campus-life-oneday-faq-section__list { order: 2; } .campus-life-oneday-faq-card { border-radius: 16px; border: 1px solid var(--D9D9D9, #d9d9d9); background: #fff; padding: 32px; display: grid; gap: 16px; } .campus-life-oneday-faq-card__question-block { display: grid; grid-template-columns: auto 1fr; gap: 8px; } .campus-life-oneday-faq-card__question-label { color: var(--white, #fff); text-align: center; font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ width: 32px; height: 32px; display: grid; place-content: center; border-radius: 999px; background: var(--000000, #000); } .campus-life-oneday-faq-card__question { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .campus-life-oneday-faq-card__answer-block { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 16px; } .campus-life-oneday-faq-card__answer-label { color: var(--white, #fff); text-align: center; font-family: Poppins; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ width: 32px; height: 32px; display: grid; place-content: center; border-radius: 999px; background: #0242b8; } .campus-life-oneday-faq-card__answer-title { color: #0242b8; text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .campus-life-oneday-faq-card__answer { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ } .campus-life-oneday-faq-card__answer-title + .campus-life-oneday-faq-card__answer { margin-top: 4px; } } @media (max-width: 1023px) { .campus-life-oneday { padding-top: 80px; display: grid; justify-items: center; } .campus-life-oneday--life { --color-main: #b9141e; } .campus-life-oneday--ordinary { --color-main: #0242b8; background-color: #f9f9fe; padding-top: 128px; } .campus-life-oneday__title-block { position: relative; padding-left: 12px; padding-right: 12px; margin-bottom: 80px; width: 100%; } .campus-life-oneday__title-block::before, .campus-life-oneday__title-block::after { display: block; content: ""; width: 100%; height: 30px; top: 0; } .campus-life-oneday__title-block::before { border-left: 7px solid #000; border-top: 7px solid #000; border-right: 7px solid #000; margin-bottom: 20px; } .campus-life-oneday__title-block::after { border-right: 7px solid #000; border-left: 7px solid #000; border-bottom: 7px solid #000; margin-top: 12px; } .campus-life-oneday__section { width: 100%; display: grid; justify-items: center; grid-template-columns: 100%; justify-content: center; } .campus-life-oneday__title { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 130%; /* 41.6px */ } .campus-life-oneday__title-strong { color: var(--color-main); } .campus-life-oneday__catch-copy { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 15px; font-style: normal; font-weight: 700; line-height: 150%; /* 22.5px */ margin-top: 16px; } .campus-life-oneday__section--even { background: #f4f4f1; } .campus-life-oneday__section + .campus-life-oneday__section { padding-top: 128px; } .campus-life-oneday--ordinary .campus-life-oneday__section--even { background: #f0f0fb; } .campus-life-oneday-section__favorite { margin-top: 48px; } .campus-life-oneday-section__introduction { margin-top: 48px; } .campus-life-oneday-section__faq-section { margin-top: 48px; } .campus-life-oneday-kv { position: relative; } .campus-life-oneday-kv__body { position: relative; border-radius: 8px; background: #fff; padding: 32px; margin-top: -80px; margin-left: 12px; margin-right: 12px; } .campus-life-oneday-kv__label { color: var(--000000, #000); text-align: right; font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 600; line-height: 80%; /* 25.6px */ } .campus-life-oneday-kv__label-strong { color: var(--color-main); } .campus-life-oneday-kv__number { color: var(--D9D9D9, #d9d9d9); text-align: right; font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 600; line-height: 80%; /* 51.2px */ } .campus-life-oneday-kv__badge { padding: 4px 8px; color: var(--white, #fff); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .campus-life-oneday-kv__badge--single { background: var(--0242b8, #0242b8); } .campus-life-oneday-kv__badge--dormitory { background: var(--000000, #000); } .campus-life-oneday-kv__header { display: grid; grid-template-columns: auto auto auto; gap: 8px; justify-content: start; align-items: end; } .campus-life-oneday-kv__course { margin-top: 4px; color: var(--color-main); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .campus-life-oneday-kv__name { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 500; line-height: 150%; /* 48px */ margin-top: 4px; } .campus-life-oneday-kv__name-suffix { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; /* 27px */ } .campus-life-oneday-kv__school { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 150%; /* 18px */ margin-top: 4px; } .campus-life-oneday-kv__detail { display: flex; gap: 8px; margin-top: 4px; } .campus-life-oneday-kv__dl { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 4px; align-items: center; } .campus-life-oneday-kv__dt { border: 0.5px solid var(--707070, #707070); padding-top: 1px; padding-bottom: 1px; padding-left: 5px; padding-right: 5px; color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 11px; font-style: normal; font-weight: 400; line-height: 150%; /* 16.5px */ } .campus-life-oneday-kv__dd { color: var(--707070, #707070); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .campus-life-oneday-favorite { border-radius: 16px; border: 1px solid var(--color-main); padding: 48px 12px; margin-left: 12px; margin-right: 12px; display: grid; grid-template-columns: 100%; justify-content: center; } .campus-life-oneday-favorite__header { height: 100%; display: grid; align-items: center; } .campus-life-oneday-favorite__list { display: grid; grid-template-columns: 100%; gap: 32px; justify-content: center; margin-top: 32px; } .campus-life-oneday-favorite-title { border-bottom: 1px solid var(--color-main); padding-bottom: 15px; display: grid; grid-template-columns: 100%; gap: 16px; width: fit-content; margin: 0 auto; } .campus-life-oneday-favorite-title__english { text-align: center; color: var(--color-main); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 80%; /* 38.4px */ } .campus-life-oneday-favorite-title__japanese { text-align: center; color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 80%; /* 14.4px */ } .campus-life-oneday-schedule-card__image { border-radius: 8px; overflow: hidden; } .campus-life-oneday-schedule-card__title { display: grid; grid-template-columns: 32px 1fr; gap: 4px; align-items: center; margin-top: 8px; } .campus-life-oneday-schedule-card__title-label { color: var(--color-main); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } .campus-life-oneday-schedule-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 4px; } .campus-life-oneday-introduction { display: grid; gap: 32px; } .campus-life-oneday-introduction__lead { padding-left: 16px; padding-right: 16px; color: var(--color-main); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ /* &--right { text-align: right; } */ } .campus-life-oneday-introduction__list { display: grid; gap: 32px; } .campus-life-oneday-introduction__image { position: relative; } .campus-life-oneday-introduction-card { border-radius: 8px; background: var(--white, #fff); overflow: hidden; margin-left: 10px; margin-right: 10px; } .campus-life-oneday-introduction-card__body { padding: 12px; padding-bottom: 16px; } .campus-life-oneday-introduction-card__header { display: grid; grid-template-columns: auto 1fr; gap: 4px; align-items: start; } .campus-life-oneday-introduction-card__category { border-radius: 4px; background: var(--color-main); padding: 2px 8px; color: var(--white, #fff); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 2px; } .campus-life-oneday-introduction-card__title { color: var(--color-main); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ } .campus-life-oneday-introduction-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 4px; } .campus-life-oneday-favorite-card__image { border-radius: 8px; overflow: hidden; } .campus-life-oneday-favorite-card__description { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } .campus-life-oneday-faq-section { display: grid; grid-template-columns: 100%; padding-left: 10px; padding-right: 10px; } .campus-life-oneday-faq-section__image--3 { margin-top: 16px; } .campus-life-oneday-faq-section__image--4 { margin-top: 16px; } .campus-life-oneday-faq-section__image--5 { margin-top: 16px; } .campus-life-oneday-faq-section__image--6 { margin-top: 0; } .campus-life-oneday-faq-section__list { display: grid; gap: 16px; } .campus-life-oneday-faq-card { border-radius: 16px; border: 1px solid var(--D9D9D9, #d9d9d9); background: #fff; padding: 24px 16px; display: grid; gap: 16px; } .campus-life-oneday-faq-card__question-block { display: grid; grid-template-columns: auto 1fr; gap: 8px; } .campus-life-oneday-faq-card__question-label { color: var(--white, #fff); text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ width: 28px; height: 28px; display: grid; place-content: center; border-radius: 999px; background: var(--000000, #000); } .campus-life-oneday-faq-card__question { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .campus-life-oneday-faq-card__answer-block { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 6px; } .campus-life-oneday-faq-card__answer-label { color: var(--white, #fff); text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ width: 28px; height: 28px; display: grid; place-content: center; border-radius: 999px; background: #0242b8; } .campus-life-oneday-faq-card__answer-title { color: #0242b8; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .campus-life-oneday-faq-card__answer { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .campus-life-oneday-faq-card__answer-title + .campus-life-oneday-faq-card__answer { margin-top: 4px; } .campus-life-oneday-section--1 .campus-life-oneday-introduction--1-1 .campus-life-oneday-introduction__header { position: relative; display: flex; justify-content: flex-end; } .campus-life-oneday-section--1 .campus-life-oneday-introduction--1-1 .campus-life-oneday-introduction__lead { position: absolute; left: 6px; top: 30.75px; } .campus-life-oneday-section--1 .campus-life-oneday-introduction--1-1 .campus-life-oneday-introduction__image { width: 160px; margin-right: 10px; } .campus-life-oneday-section--1 .campus-life-oneday-introduction--1-2 .campus-life-oneday-introduction__header { position: relative; display: flex; justify-content: flex-end; order: 3; } .campus-life-oneday-section--1 .campus-life-oneday-introduction--1-2 .campus-life-oneday-introduction__lead { position: absolute; left: 10px; top: 7px; } .campus-life-oneday-section--1 .campus-life-oneday-introduction--1-2 .campus-life-oneday-introduction__image { width: 160px; margin-right: 10px; } .campus-life-oneday-section--2 .campus-life-oneday-introduction--1-1 .campus-life-oneday-introduction__header { position: relative; display: flex; } .campus-life-oneday-section--2 .campus-life-oneday-introduction--1-1 .campus-life-oneday-introduction__lead { position: absolute; right: 32px; top: 70px; } .campus-life-oneday-section--2 .campus-life-oneday-introduction--1-1 .campus-life-oneday-introduction__image { width: 160px; margin-left: 10px; } .campus-life-oneday-section--2 .campus-life-oneday-introduction--1-2 .campus-life-oneday-introduction__header { position: relative; display: flex; justify-content: flex-end; order: 3; } .campus-life-oneday-section--2 .campus-life-oneday-introduction--1-2 .campus-life-oneday-introduction__lead { position: absolute; left: 10px; top: 38px; } .campus-life-oneday-section--2 .campus-life-oneday-introduction--1-2 .campus-life-oneday-introduction__image { width: 280px; margin-right: 0px; } } @media (min-width: 1024px) { .campus-life-student-support { display: grid; grid-template-columns: minmax(0, 1312px); justify-content: center; padding-left: 20px; padding-right: 20px; } .campus-life-student-support__body { display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; padding-left: 20px; padding-right: 20px; } .campus-life-student-support__title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 36px; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ } .campus-life-student-support__catch-copy { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 4px; } .campus-life-student-support__description { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 4px; padding-bottom: 5px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .campus-life-student-support__list { margin-top: 32px; display: grid; gap: 32px 16px; grid-template-columns: repeat(3, 1fr); } .campus-life-student-support__column { margin-top: 80px; border-radius: 8px; background: var(--F9F9F6, #f9f9f6); padding: 80px 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .campus-life-student-support-card__image { border-radius: 8px; overflow: hidden; } .campus-life-student-support-card__title { display: flex; align-items: end; margin-top: 8px; } .campus-life-student-support-card__title-position { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .campus-life-student-support-card__title-name-prefix { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; margin-right: 3px; } .campus-life-student-support-card__title-name { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; } .campus-life-student-support-card__title-name-suffix { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; margin-left: 3px; } .campus-life-student-support-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 4px; } .campus-life-student-support-column-card__image { border-radius: 8px; overflow: hidden; } .campus-life-student-support-column-card__title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 120%; /* 28.8px */ margin-top: 16px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .campus-life-student-support-column-card__catch-copy { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .campus-life-student-support-column-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .campus-life-student-support-column-card__link { margin-top: 8px; text-align: right; } .campus-life-support-card-link { display: inline-grid; grid-template-columns: 12px auto; gap: 8px; align-items: center; } .campus-life-support-card-link__label { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .campus-life-school-life-support { display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; padding-left: 20px; padding-right: 20px; } .campus-life-school-life-support__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .campus-life-school-life-support-card__image { border-radius: 8px; overflow: hidden; } .campus-life-school-life-support-card__image iframe { aspect-ratio: 284/176; } .campus-life-school-life-support-card__title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 120%; /* 19.2px */ margin-top: 16px; border-bottom: 1px solid var(--NSM-color, #b9141e); padding-bottom: 7px; } .campus-life-school-life-support-card__catch-copy { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-top: 8px; } .campus-life-school-life-support-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .campus-life-school-life-support-card__link { text-align: right; margin-top: 8px; } .campus-life-career-support { display: grid; grid-template-columns: minmax(0, 1184px); justify-content: center; padding-left: 20px; padding-right: 20px; } .campus-life-career-support__section { margin-top: 64px; } .campus-life-career-support-program__header { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; border-radius: 8px; background: #fff; overflow: hidden; } .campus-life-career-support-program__header-body { padding-left: 48px; padding-right: 48px; } .campus-life-career-support-program__title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 36px; font-style: normal; font-weight: 700; line-height: 150%; /* 54px */ } .campus-life-career-support-program__catch-copy1 { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 8px; } .campus-life-career-support-program__catch-copy2 { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .campus-life-career-support-program__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .campus-life-career-support-program__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; } .campus-life-career-support-program-case { border-radius: 8px; background: var(--white, #fff); padding: 32px 24px; height: 100%; } .campus-life-career-support-program-case__case { position: relative; display: grid; grid-template-columns: auto auto; gap: 4px; align-items: center; padding-bottom: 9px; justify-content: center; } .campus-life-career-support-program-case__case:after { content: ""; display: block; width: 24px; height: 2px; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; background: #b9141e; } .campus-life-career-support-program-case__case-label { color: var(--000000, #000); text-align: center; font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 600; line-height: 100%; /* 16px */ } .campus-life-career-support-program-case__case-number { color: var(--000000, #000); text-align: center; font-family: Poppins; font-size: 36px; font-style: italic; font-weight: 600; line-height: 100%; /* 36px */ } .campus-life-career-support-program-case__title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 7px; } .campus-life-career-support-program-case__question { color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; position: relative; } .campus-life-career-support-program-case__question:after { content: ""; display: block; width: 24px; height: 16px; border-top: 16px solid #b9141e; border-left: 12px solid transparent; border-right: 12px solid transparent; margin: auto; position: absolute; bottom: -24px; left: 0; right: 0; } .campus-life-career-support-program-case__answer { color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 32px; } .campus-life-career-support-other { border-radius: 8px; background: #fff; padding: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .campus-life-career-support-other__section { display: grid; grid-template-columns: repeat(2, 1fr); } .campus-life-career-support-other__image { border-radius: 8px; overflow: hidden; } .campus-life-career-support-other__body { margin-left: 16px; } .campus-life-career-support-other__title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .campus-life-career-support-other__catch-copy { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; } .campus-life-career-support-other__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } } @media (max-width: 1023px) { .campus-life-student-support { display: grid; grid-template-columns: 100%; justify-content: center; } .campus-life-student-support__body { display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 16px; padding-right: 16px; } .campus-life-student-support__title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .campus-life-student-support__catch-copy { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .campus-life-student-support__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 4px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .campus-life-student-support__list { margin-top: 32px; display: grid; gap: 32px; grid-template-columns: 100%; } .campus-life-student-support__item:nth-of-type(5) .campus-life-student-support-card__title-position { width: 100%; } .campus-life-student-support__column { border-radius: 8px; background: var(--F9F9F6, #f9f9f6); padding: 48px 12px; margin: 64px 12px 0 12px; display: grid; grid-template-columns: 100%; gap: 48px; } .campus-life-student-support-card__image { border-radius: 8px; overflow: hidden; } .campus-life-student-support-card__title { display: flex; flex-wrap: wrap; align-items: end; margin-top: 8px; } .campus-life-student-support-card__title-position { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .campus-life-student-support-card__title-name-prefix { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; margin-right: 3px; } .campus-life-student-support-card__title-name { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; } .campus-life-student-support-card__title-name-suffix { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; margin-left: 3px; } .campus-life-student-support-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 4px; } .campus-life-student-support-column-card__image { border-radius: 8px; overflow: hidden; } .campus-life-student-support-column-card__title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 120%; /* 24px */ margin-top: 16px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .campus-life-student-support-column-card__catch-copy { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ margin-top: 8px; } .campus-life-student-support-column-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .campus-life-student-support-column-card__link { margin-top: 8px; text-align: right; } .campus-life-support-card-link { display: inline-grid; grid-template-columns: 12px auto; gap: 8px; align-items: center; } .campus-life-support-card-link__label { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .campus-life-school-life-support { display: grid; grid-template-columns: 100%; justify-content: center; padding-left: 16px; padding-right: 16px; } .campus-life-school-life-support__list { display: grid; grid-template-columns: 100%; gap: 64px; } .campus-life-school-life-support-card__image { border-radius: 8px; overflow: hidden; } .campus-life-school-life-support-card__title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 120%; /* 19.2px */ letter-spacing: -0.32px; margin-top: 16px; border-bottom: 1px solid var(--NSM-color, #b9141e); padding-bottom: 7px; } .campus-life-school-life-support-card__catch-copy { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-top: 8px; } .campus-life-school-life-support-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .campus-life-school-life-support-card__link { text-align: right; margin-top: 8px; } .campus-life-career-support { display: grid; grid-template-columns: 100%; justify-content: center; } .campus-life-career-support-program { padding-left: 8px; padding-right: 8px; } .campus-life-career-support-program__header { display: grid; grid-template-columns: 100%; align-items: center; border-radius: 8px; background: #fff; overflow: hidden; } .campus-life-career-support-program__header-body { padding: 16px; } .campus-life-career-support-program__title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; } .campus-life-career-support-program__catch-copy1 { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 8px; } .campus-life-career-support-program__catch-copy2 { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .campus-life-career-support-program__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; } .campus-life-career-support-program__list { display: grid; grid-template-columns: 100%; gap: 16px; margin-top: 16px; padding-left: 8px; padding-right: 8px; } .campus-life-career-support-program-case { border-radius: 8px; background: var(--white, #fff); padding: 32px 24px; } .campus-life-career-support-program-case__case { position: relative; display: grid; grid-template-columns: auto auto; gap: 4px; align-items: center; padding-bottom: 9px; justify-content: center; } .campus-life-career-support-program-case__case:after { content: ""; display: block; width: 24px; height: 2px; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; background: #b9141e; } .campus-life-career-support-program-case__case-label { color: var(--000000, #000); text-align: center; font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 600; line-height: 100%; /* 16px */ } .campus-life-career-support-program-case__case-number { color: var(--000000, #000); text-align: center; font-family: Poppins; font-size: 36px; font-style: italic; font-weight: 600; line-height: 100%; /* 36px */ } .campus-life-career-support-program-case__title { color: var(--NSM-color, #b9141e); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .campus-life-career-support-program-case__question { color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 8px; position: relative; } .campus-life-career-support-program-case__question:after { content: ""; display: block; width: 24px; height: 16px; border-top: 16px solid #b9141e; border-left: 12px solid transparent; border-right: 12px solid transparent; margin: auto; position: absolute; bottom: -24px; left: 0; right: 0; } .campus-life-career-support-program-case__answer { color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ margin-top: 32px; } .campus-life-career-support-other { border-radius: 8px; background: #fff; padding: 32px 16px; margin: 64px 8px 0 8px; display: grid; grid-template-columns: 100%; gap: 48px; } .campus-life-career-support-other__section { display: grid; grid-template-columns: 100%; } .campus-life-career-support-other__image { border-radius: 8px; overflow: hidden; } .campus-life-career-support-other__body { padding: 8px 8px 0 8px; } .campus-life-career-support-other__title { color: var(--NSM-color, #b9141e); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .campus-life-career-support-other__catch-copy { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; } .campus-life-career-support-other__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } } @media (hover: hover) { .campus-life-support-card-link { transition: opacity 0.3s ease-out; } .campus-life-support-card-link:hover { opacity: 0.85; } } @media (min-width: 1024px) { .open-campus__list { background: var(--F9F9F6, #f9f9f6); display: grid; grid-template-columns: repeat(4, minmax(0, 235px)); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 48px; gap: 24px; } .open-campus__link-block { text-align: center; padding-top: 48px; padding-bottom: 48px; background: var(--F9F9F6, #f9f9f6); } .open-campus__link { display: inline-grid; grid-template-columns: auto 16px; gap: 8px; align-items: center; } .open-campus__link-label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .open-campus-control { background: var(--ECECE3, #ecece3); display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding: 48px 20px; } .open-campus-control__tab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 8px; } .open-campus-control__body { display: none; } .open-campus-control__body--active { display: block; } .open-campus-control__button-list { display: grid; grid-template-columns: repeat(2, minmax(0, 248px)); gap: 16px; justify-content: center; margin-top: 24px; } .open-campus-tab-button { display: block; width: 100%; border-radius: 4px; background: var(--707070, #707070); box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.08); color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ padding-top: 8px; padding-bottom: 8px; } .open-campus-tab-button--active { background: var(--NSM-color, #b9141e); } .open-campus-control-body__category-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .open-campus-control-body__day-list { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; margin-top: 8px; } .open-campus-control-check-box { border-radius: 4px; background: #fff; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.08); padding: 9px 16px; display: grid; height: 100%; grid-template-columns: 16px 1fr; gap: 8px; align-items: center; cursor: pointer; } .open-campus-control-check-box__input { display: none; } .open-campus-control-check-box__check-box { height: 16px; border: 2px solid #000; position: relative; } .open-campus-control-check-box__check-box::before { content: ""; position: absolute; display: block; width: 9px; height: 5px; border-left: 2px solid #b9141e; border-bottom: 2px solid #b9141e; rotate: -135deg; left: 2px; top: 2px; opacity: 0; transition: rotate 0.3s, opacity 0.3s; } .open-campus-control-check-box__input:checked ~ .open-campus-control-check-box__check-box::before { opacity: 1; rotate: -45deg; } .open-campus-control-check-box__label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .open-campus-control-check-box__input:checked ~ .open-campus-control-check-box__label { color: var(--b9141e, #b9141e); } .open-campus-control-day-box { border-radius: 4px; background: #fff; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.08); padding: 12px 8px; display: grid; height: 100%; grid-template-columns: 16px 1fr; gap: 4px; align-items: center; justify-content: center; cursor: pointer; } .open-campus-control-day-box__input { display: none; } .open-campus-control-day-box__check-box { position: relative; } .open-campus-control-day-box__check-box::before { content: ""; position: absolute; display: block; width: 9px; height: 5px; border-left: 2px solid #b9141e; border-bottom: 2px solid #b9141e; rotate: -135deg; left: 4px; top: 4px; opacity: 0; transition: rotate 0.3s, opacity 0.3s; } .open-campus-control-day-box__input:checked ~ .open-campus-control-day-box__check-box::before { opacity: 1; rotate: -45deg; } .open-campus-control-day-box__label { font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; /* 14px */ color: var(--707070, #707070); } .open-campus-control-day-box__label--sat { color: var(--0242b8, #0242b8); } .open-campus-control-day-box__label--sun { color: var(--NSM-color, #b9141e); } .open-campus-control-button { display: block; width: 100%; border-radius: 999px; background: var(--707070, #707070); padding: 12px 64px; color: #fff; text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; /* 16px */ } .open-campus-control-button--submit { background: var(--NSM-color, #b9141e); } .c-open-campus-card { border-radius: 8px; background: #fff; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.08); height: 100%; overflow: hidden; display: block; } .c-open-campus-card__body { padding-top: 16px; padding-bottom: 16px; padding-left: 16px; padding-right: 16px; } .c-open-campus-card__title { color: #323232; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 130%; /* 18.2px */ } .c-open-campus-card__date-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; } .c-open-campus-card__date-item { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 500; line-height: 100%; /* 12px */ letter-spacing: -0.48px; } } @media (max-width: 1023px) { .open-campus__list { background: var(--F9F9F6, #f9f9f6); display: grid; grid-template-columns: repeat(2, minmax(0, 163px)); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 48px; gap: 8px; } .open-campus__link-block { text-align: center; padding-top: 48px; padding-bottom: 48px; background: var(--F9F9F6, #f9f9f6); } .open-campus__link { display: inline-grid; grid-template-columns: auto 16px; gap: 8px; align-items: center; } .open-campus__link-label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 150%; /* 18px */ text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .open-campus-control { background: var(--ECECE3, #ecece3); display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding: 48px 20px; } .open-campus-control__tab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 8px; } .open-campus-control__body { display: none; } .open-campus-control__body--active { display: block; } .open-campus-control__button-list { display: grid; grid-template-columns: repeat(2, minmax(0, 143px)); gap: 16px; justify-content: center; margin-top: 16px; } .open-campus-tab-button { display: block; width: 100%; border-radius: 4px; background: var(--707070, #707070); box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.08); color: var(--white, var(--white, #fff)); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ padding-top: 8px; padding-bottom: 8px; } .open-campus-tab-button--active { background: var(--NSM-color, #b9141e); } .open-campus-control-body__category-list { display: grid; gap: 4px; margin-top: 8px; } .open-campus-control-body__day-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .open-campus-control-check-box { border-radius: 4px; background: #fff; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.08); padding: 9px 16px; display: grid; height: 100%; grid-template-columns: 16px 1fr; gap: 8px; align-items: center; cursor: pointer; } .open-campus-control-check-box__input { display: none; } .open-campus-control-check-box__check-box { height: 16px; border: 2px solid #000; position: relative; } .open-campus-control-check-box__check-box::before { content: ""; position: absolute; display: block; width: 9px; height: 5px; border-left: 2px solid #b9141e; border-bottom: 2px solid #b9141e; rotate: -135deg; left: 2px; top: 2px; opacity: 0; transition: rotate 0.3s, opacity 0.3s; } .open-campus-control-check-box__input:checked ~ .open-campus-control-check-box__check-box::before { opacity: 1; rotate: -45deg; } .open-campus-control-check-box__label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .open-campus-control-check-box__input:checked ~ .open-campus-control-check-box__label { color: var(--b9141e, #b9141e); } .open-campus-control-day-box { border-radius: 4px; background: #fff; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.08); padding: 12px 8px; display: grid; height: 100%; grid-template-columns: 16px 1fr; gap: 4px; align-items: center; justify-content: center; cursor: pointer; } .open-campus-control-day-box__input { display: none; } .open-campus-control-day-box__check-box { position: relative; } .open-campus-control-day-box__check-box::before { content: ""; position: absolute; display: block; width: 9px; height: 5px; border-left: 2px solid #b9141e; border-bottom: 2px solid #b9141e; rotate: -135deg; left: 4px; top: 4px; opacity: 0; transition: rotate 0.3s, opacity 0.3s; } .open-campus-control-day-box__input:checked ~ .open-campus-control-day-box__check-box::before { opacity: 1; rotate: -45deg; } .open-campus-control-day-box__label { font-family: Poppins; font-size: 14px; font-style: normal; font-weight: 600; line-height: 100%; /* 14px */ color: var(--707070, #707070); } .open-campus-control-day-box__label--sat { color: var(--0242b8, #0242b8); } .open-campus-control-day-box__label--sun { color: var(--NSM-color, #b9141e); } .open-campus-control-button { display: block; width: 100%; border-radius: 999px; background: var(--707070, #707070); padding: 12px 0px; color: #fff; text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; /* 16px */ } .open-campus-control-button--submit { background: var(--NSM-color, #b9141e); } .c-open-campus-card { border-radius: 8px; background: #fff; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.08); height: 100%; overflow: hidden; display: block; } .c-open-campus-card__body { padding-top: 16px; padding-bottom: 16px; padding-left: 8px; padding-right: 8px; } .c-open-campus-card__title { color: #323232; text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 700; line-height: 130%; /* 18.2px */ } .c-open-campus-card__date-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 8px; } .c-open-campus-card__date-item { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 12px; font-style: normal; font-weight: 500; line-height: 100%; /* 12px */ letter-spacing: -0.48px; } } @media (hover: hover) { .open-campus-tab-button { transition: opacity 0.3s; } .open-campus-tab-button:hover { opacity: 0.5; } .open-campus-control-button { transition: opacity 0.3s; } .open-campus-control-button:hover { opacity: 0.5; } .open-campus-control-check-box { transition: border 0.3s; padding: 7px 14px; border: 2px solid #fff; } .open-campus-control-check-box:hover { border: 2px solid #b9141e; } .open-campus-control-day-box { padding: 10px 6px; border: 2px solid #fff; transition: border 0.3s; } .open-campus-control-day-box:hover { border: 2px solid #b9141e; } .c-open-campus-card__image { position: relative; } .c-open-campus-card__image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.3s ease-out; } .c-open-campus-card:hover .c-open-campus-card__image::after { opacity: 1; } .c-open-campus-card__title { transition: color 0.3s ease-out; } .c-open-campus-card:hover .c-open-campus-card__title { color: #b9141e; } .open-campus__link { transition: opacity 0.3s; } .open-campus__link:hover { opacity: 0.5; } } @media (min-width: 1024px) { .open-campus-detail { padding-top: 144px; background: var(--ECECE3, #ecece3); } .open-campus-detail__main { display: grid; grid-template-columns: minmax(0, 562px) 750px; justify-content: center; gap: 32px; position: relative; align-items: start; padding-left: 48px; padding-right: 48px; } .open-campus-detail__kv { position: sticky; top: 32px; left: 0; border-radius: 16px; overflow: hidden; } .open-campus-detail__recommend { background: var(--F9F9F6, #f9f9f6); margin-top: 128px; } .occ { display: grid; gap: 32px; } .occ__block { border-radius: 8px; background: var(--white, #fff); padding: 48px 32px; } .occ__image-list { margin-top: 16px; } .occ__application { padding: 32px 48px; border-radius: 8px; background: var(--white, #fff); } .occ__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ padding-bottom: 4px; border-bottom: 4px solid var(--NSM-color, #b9141e); } .occ__lead { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .occ__note { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ margin-top: 16px; } .occ__description { margin-top: 16px; } .occ__section { margin-top: 48px; } .occ-section { display: grid; gap: 32px; } .occ-section__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .occ-section__title strong { color: var(--NSM-color, #b9141e); } .occ-description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .occ-description strong { color: var(--NSM-color, #b9141e); } .occ-description a { color: var(--textlink, #0090ff); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .occ-note { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .occ-note strong { color: var(--NSM-color, #b9141e); } .occ-note a { color: var(--textlink, #0090ff); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .occ-image-card-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding-left: 32px; padding-right: 32px; } .occ-image-card__image { border-radius: 8px; overflow: hidden; } .occ-image-card__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .occ-image-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 4px; } .occ-image-card__description strong { color: var(--NSM-color, #b9141e); } .occ-point-card-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding-left: 32px; padding-right: 32px; } .occ-point-card__image { border-radius: 8px; overflow: hidden; } .occ-point-card__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; position: relative; padding-left: 20px; } .occ-point-card__title::before { content: ""; display: block; width: 16px; height: 4px; background: var(--NSM-color, #b9141e); position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } .occ-point-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 4px; } .occ-point-card__description strong { color: var(--NSM-color, #b9141e); } .occ-point-card__description a { color: var(--textlink, #0090ff); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .occ-application { display: grid; } .occ-application__title { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; } .occ-application__title-label { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .occ-application__list { margin-top: 8px; } .occ-application__link-block { display: grid; grid-template-columns: 245px; justify-content: center; } * + .occ-application__link-block { margin-top: 32px; } .occ-application__link { display: grid; grid-template-columns: 32px auto; justify-content: center; align-items: center; gap: 16px; padding-top: 8px; padding-bottom: 8px; border-radius: 999px; background: #06c755; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.16); } .occ-application__link-label { color: var(--white, var(--white, #fff)); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .occ-application__button-block { display: grid; grid-template-columns: 172px; justify-content: center; padding-top: 16px; padding-bottom: 16px; } .occ-application-accordion__list-wrapper { overflow: hidden; transition: height 0.3s ease-in-out; } .occ-application-accordion__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .occ-application-accordion__item { border-bottom: 1px dashed #707070; padding-top: 14px; padding-bottom: 14px; } .occ-application-accordion__item:nth-of-type(1), .occ-application-accordion__item:nth-of-type(2) { border-top: 1px dashed #707070; } .occ-application-accordion__button-block { display: grid; justify-content: center; margin-top: 32px; } .occ-application-accordion__button { display: grid; grid-template-columns: auto 16px; gap: 8px; align-items: center; padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid #000; } .occ-application-accordion__button-label { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .occ-application-accordion__button-icon { width: 16px; height: 16px; border: 1px solid #000; border-radius: 999px; position: relative; } .occ-application-accordion__button-icon::before, .occ-application-accordion__button-icon::after { content: ""; display: block; width: 8px; height: 1px; background: #000; position: absolute; inset: 0; margin: auto; transition: transform 0.3s ease-in-out; } .occ-application-accordion__button-icon::before { transform: rotate(0); } .occ-application-accordion__button-icon::after { transform: rotate(90deg); } .occ-application-accordion--open .occ-application-accordion__button-icon::after { transform: rotate(0); } .occ-application-item { padding-top: 4px; padding-bottom: 4px; display: grid; grid-template-columns: 1fr 152px; align-items: center; } .occ-application-item__date { color: #000; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; } .occ-application-item__date-number { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .occ-application-button { display: grid; grid-template-columns: auto 24px; justify-content: center; align-items: center; gap: 8px; border-radius: 999px; background: var(--NSM-color, #b9141e); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.16); padding-top: 8px; padding-bottom: 8px; } .occ-application-button__label { color: var(--white, var(--white, #fff)); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .occ-schedule__title-english { color: var(--NSM-color, #b9141e); text-align: justify; font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 100%; /* 48px */ } .occ-schedule__title-japanese { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 100%; /* 16px */ } .occ-schedule__check-list { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ margin-top: 16px; } .occ-schedule__check-list strong { color: var(--NSM-color, #b9141e); } .occ-schedule__list { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 32px; margin-top: 48px; } .occ-schedule-card__title { display: grid; grid-template-columns: 48px auto 1fr; gap: 8px; align-items: center; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .occ-schedule-card__title-label { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .occ-schedule-card__title-time { border-radius: 4px; background: var(--NSM-color, #b9141e); padding: 0px 16px; color: var(--white, var(--white, #fff)); text-align: justify; /* Roboto24 */ font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .occ-schedule-card__body { margin-top: 16px; padding-left: 32px; padding-right: 32px; } .occ-schedule-card__image { border-radius: 8px; overflow: hidden; } .occ-schedule-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .occ-time-icon { position: relative; max-width: 48px; } .occ-time-icon__hour { position: absolute; box-sizing: content-box; width: 5px; height: 0px; border: 1px solid var(--NSM-color, #b9141e); transform-origin: left center; left: 50%; top: 0; margin-top: 47.9166666667%; border-radius: 999px; } .occ-time-icon__minute { position: absolute; box-sizing: content-box; width: 9px; height: 0px; border: 1px solid var(--NSM-color, #b9141e); transform-origin: left center; left: 50%; top: 0; margin-top: 47.9166666667%; border-radius: 999px; } .occ-support__title { display: grid; grid-template-columns: 48px 1fr; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); gap: 16px; border-bottom: 1px solid var(--NSM-color, #b9141e); padding-bottom: 7px; align-items: center; } .occ-support__title-english { color: var(--NSM-color, #b9141e); text-align: justify; font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 100%; /* 48px */ } .occ-support__title-japanese { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 100%; /* 24px */ } .occ-support__body { margin-top: 16px; } .occ-support__catch-copy { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; } .occ-support__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } .occ-guest { display: grid; padding-left: 32px; padding-right: 32px; grid-template-columns: 294fr 320fr; gap: 8px; align-items: start; } .occ-guest__image { border-radius: 8px; overflow: hidden; } .occ-guest__body { display: grid; align-content: center; height: 100%; } .occ-guest__name { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .occ-guest__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .occ-guest__description a { color: var(--textlink, #0090ff); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .occ-guest__name + .occ-guest__description { margin-top: 4px; } .occ-line-description { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 32px; padding-left: 32px; padding-right: 32px; } .occ-line-description__image { border-radius: 8px; overflow: hidden; } .occ-line-description__body { display: grid; } .occ-line-description__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-bottom: 7px; border-bottom: 1px dashed var(--000000, #000); } .occ-line-description__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .open-campus-detail-recommend { padding: 80px 20px; display: grid; grid-template-columns: minmax(0, 1012px); justify-content: center; } .open-campus-detail-recommend__title-japanese { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 48px; font-style: normal; font-weight: 700; line-height: 150%; /* 72px */ } .open-campus-detail-recommend__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 700; line-height: 80%; /* 12.8px */ } .open-campus-detail-recommend__list { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .occ-image { padding-left: 48px; padding-right: 48px; } .occ-image__image { border-radius: 8px; overflow: hidden; } .occ-image__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } } @media (max-width: 1023px) { .open-campus-detail { padding-top: 112px; background: var(--ECECE3, #ecece3); } .open-campus-detail__recommend { background: var(--F9F9F6, #f9f9f6); margin-top: 32px; } .open-campus-detail__content { padding-left: 20px; padding-right: 20px; margin-top: 32px; } .occ { display: grid; gap: 32px; } .occ__block { border-radius: 8px; background: var(--white, #fff); padding: 48px 20px; } .occ__image-list { margin-top: 16px; } .occ__application { padding: 32px 20px; border-radius: 8px; background: var(--white, #fff); } .occ__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ padding-bottom: 4px; border-bottom: 4px solid var(--NSM-color, #b9141e); } .occ__lead { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .occ__note { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ margin-top: 16px; } .occ__description { margin-top: 16px; } .occ__section { margin-top: 48px; } .occ-section { display: grid; gap: 32px; } .occ-section__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .occ-section__title strong { color: var(--NSM-color, #b9141e); } .occ-description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .occ-description strong { color: var(--NSM-color, #b9141e); } .occ-description a { color: var(--textlink, #0090ff); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .occ-note { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .occ-note strong { color: var(--NSM-color, #b9141e); } .occ-note a { color: var(--textlink, #0090ff); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .occ-image-card-list { display: grid; gap: 32px; } .occ-image-card__image { border-radius: 8px; overflow: hidden; } .occ-image-card__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-top: 8px; } .occ-image-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 4px; } .occ-image-card__description strong { color: var(--NSM-color, #b9141e); } .occ-point-card-list { display: grid; gap: 32px; } .occ-point-card__image { border-radius: 8px; overflow: hidden; } .occ-point-card__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ padding-left: 20px; position: relative; margin-top: 8px; } .occ-point-card__title::before { content: ""; display: block; width: 16px; height: 4px; background: var(--NSM-color, #b9141e); position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } .occ-point-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 4px; } .occ-point-card__description strong { color: var(--NSM-color, #b9141e); } .occ-point-card__description a { color: var(--textlink, #0090ff); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .occ-application { display: grid; } .occ-application__title { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; } .occ-application__title-label { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ } .occ-application__list { margin-top: 8px; } * + .occ-application__link-block { margin-top: 32px; } .occ-application__link { display: grid; grid-template-columns: 32px auto; justify-content: center; align-items: center; gap: 16px; padding-top: 8px; padding-bottom: 8px; border-radius: 999px; background: #06c755; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.16); } .occ-application__link-label { color: var(--white, var(--white, #fff)); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .occ-application__button-block { display: grid; grid-template-columns: 172px; justify-content: center; padding-top: 16px; padding-bottom: 16px; } .occ-application-accordion__list-wrapper { overflow: hidden; transition: height 0.3s ease-in-out; } .occ-application-accordion__list { display: grid; gap: 0 32px; } .occ-application-accordion__item { border-bottom: 1px dashed #707070; padding-top: 14px; padding-bottom: 14px; } .occ-application-accordion__item:nth-of-type(1), .occ-application-accordion__item:nth-of-type(2) { border-top: 1px dashed #707070; } .occ-application-accordion__button-block { display: grid; justify-content: center; margin-top: 32px; } .occ-application-accordion__button { display: grid; grid-template-columns: auto 16px; gap: 8px; align-items: center; padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid #000; } .occ-application-accordion__button-label { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .occ-application-accordion__button-icon { width: 16px; height: 16px; border: 1px solid #000; border-radius: 999px; position: relative; } .occ-application-accordion__button-icon::before, .occ-application-accordion__button-icon::after { content: ""; display: block; width: 8px; height: 1px; background: #000; position: absolute; inset: 0; margin: auto; transition: transform 0.3s ease-in-out; } .occ-application-accordion__button-icon::before { transform: rotate(0); } .occ-application-accordion__button-icon::after { transform: rotate(90deg); } .occ-application-accordion--open .occ-application-accordion__button-icon::after { transform: rotate(0); } .occ-application-item { padding-top: 4px; padding-bottom: 4px; display: grid; grid-template-columns: 1fr 144px; align-items: center; } .occ-application-item__date { color: #000; font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; } .occ-application-item__date-number { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 28px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .occ-application-button { display: grid; grid-template-columns: auto 24px; justify-content: center; align-items: center; gap: 8px; border-radius: 999px; background: var(--NSM-color, #b9141e); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.16); padding-top: 8px; padding-bottom: 8px; } .occ-application-button__label { color: var(--white, var(--white, #fff)); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .occ-schedule__title-english { color: var(--NSM-color, #b9141e); text-align: justify; font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 100%; /* 32px */ } .occ-schedule__title-japanese { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 100%; /* 16px */ } .occ-schedule__check-list { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ margin-top: 16px; } .occ-schedule__check-list strong { color: var(--NSM-color, #b9141e); } .occ-schedule__list { display: grid; gap: 48px 32px; margin-top: 48px; } .occ-schedule-card__title { display: grid; grid-template-columns: 48px 1fr; justify-content: start; justify-items: start; gap: 0 8px; align-items: center; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .occ-schedule-card__title-icon { grid-row: 1/3; } .occ-schedule-card__title-label { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .occ-schedule-card__title-time { border-radius: 4px; background: var(--NSM-color, #b9141e); padding: 0px 16px; color: var(--white, var(--white, #fff)); text-align: justify; /* Roboto24 */ font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ } .occ-schedule-card__body { margin-top: 16px; } .occ-schedule-card__image { border-radius: 8px; overflow: hidden; } .occ-schedule-card__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } .occ-time-icon { position: relative; max-width: 48px; } .occ-time-icon__hour { position: absolute; box-sizing: content-box; width: 5px; height: 0px; border: 1px solid var(--NSM-color, #b9141e); transform-origin: left center; left: 50%; top: 0; margin-top: 47.9166666667%; border-radius: 999px; } .occ-time-icon__minute { position: absolute; box-sizing: content-box; width: 9px; height: 0px; border: 1px solid var(--NSM-color, #b9141e); transform-origin: left center; left: 50%; top: 0; margin-top: 47.9166666667%; border-radius: 999px; } .occ-support__title { display: grid; grid-template-columns: 48px 1fr; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); gap: 16px; align-items: center; } .occ-support__title-english { color: var(--NSM-color, #b9141e); text-align: justify; font-family: Poppins; font-size: 36px; font-style: italic; font-weight: 700; line-height: 100%; /* 36px */ } .occ-support__title-japanese { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 100%; /* 20px */ } .occ-support__body { margin-top: 16px; } .occ-support__catch-copy { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; } .occ-support__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } .occ-guest { display: grid; gap: 8px; align-items: start; } .occ-guest__image { border-radius: 8px; overflow: hidden; } .occ-guest__body { display: grid; align-content: center; height: 100%; } .occ-guest__name { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .occ-guest__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .occ-guest__description a { color: var(--textlink, #0090ff); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .occ-guest__name + .occ-guest__description { margin-top: 4px; } .occ-line-description { display: grid; align-items: start; gap: 32px; } .occ-line-description__image { border-radius: 8px; overflow: hidden; order: 2; } .occ-line-description__body { display: grid; order: 1; } .occ-line-description__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ padding-bottom: 7px; border-bottom: 1px dashed var(--000000, #000); } .occ-line-description__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 16px; } .open-campus-detail-recommend { padding: 80px 20px; display: grid; } .open-campus-detail-recommend__title-japanese { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; /* 48px */ } .open-campus-detail-recommend__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 16px; font-style: italic; font-weight: 700; line-height: 80%; /* 12.8px */ } .open-campus-detail-recommend__list { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 8px; } .occ-image__image { border-radius: 8px; overflow: hidden; } .occ-image__description { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ margin-top: 8px; } } @media (hover: hover) { .occ-application-button { transition: opacity 0.3s ease-in-out; } .occ-application-button:hover { opacity: 0.5; } .occ-application-button__icon { transition: translate 0.3s ease-in-out; } .occ-application-button:hover .occ-application-button__icon { translate: 8px 0; } .occ-application__link { transition: opacity 0.3s ease-in-out; } .occ-application__link:hover { opacity: 0.5; } .occ-application-accordion__button { transition: opacity 0.3s ease-in-out; } .occ-application-accordion__button:hover { opacity: 0.5; } } @media (min-width: 1024px) { .open-campus-result-kv { position: relative; } .open-campus-result-kv__image img { height: 320px; object-fit: cover; } .open-campus-result-kv__body { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; align-items: end; justify-content: center; padding-bottom: 128px; grid-template-columns: minmax(0, 1120px); padding-left: 20px; padding-right: 20px; } .open-campus-result-kv__title { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 500; line-height: 150%; /* 36px */ } .open-campus-result-section { display: grid; grid-template-columns: minmax(0, 960px); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 80px; padding-bottom: 80px; } .open-campus-result-section__title { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 130%; /* 31.2px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .open-campus-result-section__list { margin-top: 32px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding-left: 24.5px; padding-right: 24.5px; } } @media (max-width: 1023px) { .open-campus-result-kv { position: relative; } .open-campus-result-kv__body { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; align-items: center; padding-left: 32px; padding-right: 32px; } .open-campus-result-kv__title { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 36px */ } .open-campus-result-section { display: grid; padding-left: 20px; padding-right: 20px; padding-top: 48px; padding-bottom: 48px; } .open-campus-result-section__title { color: #000; text-align: justify; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 130%; /* 26px */ padding-top: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--NSM-color, #b9141e); } .open-campus-result-section__list { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } } .open-campus-result { background: var(--F9F9F6, #f9f9f6); } .open-campus-result__section--odd { background: var(--ECECE3, #ecece3); } .open-campus-result-card { height: 100%; border-radius: 8px; background: #fff; overflow: hidden; } .open-campus-result-card__body { padding: 8px; } .open-campus-result-card__title { color: var(--555555, #555); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 130%; /* 15.6px */ } .open-campus-result-card__description { color: #000; font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 500; line-height: 130%; /* 15.6px */ margin-top: 8px; } @media (min-width: 1024px) { .policy-contents { display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; padding-left: 20px; padding-right: 20px; padding-top: 128px; padding-bottom: 128px; } .policy-contents-lead { margin: 32px 0 0; } .policy-contents-lead a { color: #0090ff; } .policy-contents-lead p { margin: 24px 0 0; text-align: justify; font-size: 16px; font-weight: 400; line-height: 150%; } p.policy-contents-lead__txt1 { font-size: 14px; line-height: 21px; text-align: right; } .policy-contents__img1 { margin: 24px 0 0; } .policy-contents__img1 img { width: 160px; filter: drop-shadow(8px 8px 16px rgba(0, 0, 0, 0.0784313725)); } .policy-contents-txt { margin: 32px 0 0; padding: 32px 80px 64px; background: #fff; border-radius: 16px; } .policy-contents-txt p { margin: 16px 0 0; font-size: 14px; line-height: 21px; text-align: justify; } .policy-contents-txt h3 { margin: 32px 0 0; padding: 0 0 11px; font-size: 28px; font-weight: 300; line-height: 42px; border-bottom: 1px solid #d9d9d9; position: relative; } .policy-contents-txt h3::before { width: 80px; height: 3px; content: ""; background: #b9141e; position: absolute; left: 0; bottom: 0; } .policy-contents-txt h3 + p { margin-top: 8px; } .policy-contents-txt h4 { margin: 24px 0 0; padding: 0 0 8px 24px; font-size: 20px; font-weight: 400; line-height: 30px; border-bottom: 1px dashed #d9d9d9; position: relative; } .policy-contents-txt h4::before { width: 16px; height: 3px; content: ""; background: #b9141e; position: absolute; top: 14px; left: 0; } .policy-contents-txt h4 + p { margin-top: 8px; } .policy-contents-txt .policy-contents-txt__tel { margin: 0; padding: 0 0 0 25px; background: url(/assets/images/pc/privacy/ico_tel.svg) no-repeat 3px center/10px auto; } .policy-contents-txt .policy-contents-txt__mail { margin: 0; padding: 0 0 0 25px; background: url(/assets/images/pc/privacy/ico_mail.svg) no-repeat 0 center/16px auto; } .policy-contents-txt__list1 { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 16px 48px; } .policy-contents-txt__list1 li { width: calc((100% - 48px) / 2); } .policy-contents-txt__list1 li h4 { margin-top: 0; } .policy-contents-txt__list1 li a { display: block; margin: 8px 0 0; font-family: Poppins; line-height: 16px; } .policy-contents-txt__list2 { margin: 8px 0 0; font-size: 14px; line-height: 21px; text-align: justify; counter-reset: number 0; } .policy-contents-txt__list2 li { padding: 0 0 0 15px; position: relative; } .policy-contents-txt__list2 li::before { counter-increment: number 1; content: counter(number, lower-alpha) ". "; position: absolute; top: 0; left: 0; } p.policy-contents-txt__txt1 { margin: 0; font-size: 12px; line-height: 18px; text-align: justify; } p.policy-contents-txt__txt2 { margin: 0; } .beigeBg { background: #ecece3; } .policy-contents__titlecatch { font-size: 20px; font-weight: 700; line-height: 30px; text-align: center; color: #000; } } @media (max-width: 1023px) { .policy-contents { padding: 80px 16px; } .policy-contents-lead { margin: 32px 0 0; } .policy-contents-lead a { color: #0090ff; } .policy-contents-lead p { margin: 24px 0 0; text-align: justify; font-size: 16px; font-weight: 400; line-height: 24px; } p.policy-contents-lead__txt1 { font-size: 14px; line-height: 21px; text-align: right; } .policy-contents__img1 { margin: 24px 0 0; } .policy-contents__img1 img { width: 160px; filter: drop-shadow(8px 8px 16px rgba(0, 0, 0, 0.0784313725)); } .policy-contents-txt { margin: 32px 0 0; padding: 16px 16px 48px; background: #fff; border-radius: 16px; } .policy-contents-txt p { margin: 16px 0 0; font-size: 14px; line-height: 21px; text-align: justify; } .policy-contents-txt h3 { margin: 32px 0 0; padding: 0 0 11px; font-size: 24px; font-weight: 300; line-height: 36px; border-bottom: 1px solid #d9d9d9; position: relative; } .policy-contents-txt h3::before { width: 80px; height: 3px; content: ""; background: #b9141e; position: absolute; left: 0; bottom: 0; } .policy-contents-txt h3 + p { margin-top: 8px; } .policy-contents-txt h4 { margin: 24px 0 0; padding: 0 0 8px 24px; font-size: 20px; line-height: 30px; border-bottom: 1px dashed #d9d9d9; position: relative; } .policy-contents-txt h4::before { width: 16px; height: 3px; content: ""; background: #b9141e; position: absolute; top: 14px; left: 0; } .policy-contents-txt h4 + p { margin-top: 8px; } .policy-contents-txt .policy-contents-txt__tel { margin: 0; padding: 0 0 0 25px; background: url(/assets/images/pc/privacy/ico_tel.svg) no-repeat 3px center/10px auto; } .policy-contents-txt .policy-contents-txt__mail { margin: 0; padding: 0 0 0 25px; background: url(/assets/images/pc/privacy/ico_mail.svg) no-repeat 0 center/16px auto; } .policy-contents-txt__list1 li { margin: 24px 0 0; } .policy-contents-txt__list1 li h4 { margin-top: 0; font-size: 16px; font-weight: 400; line-height: 24px; } .policy-contents-txt__list1 li h4::before { top: 12px; } .policy-contents-txt__list1 li a { display: block; margin: 8px 0 0; font-family: Poppins; font-size: 14px; line-height: 16px; } .policy-contents-txt__list2 { margin: 8px 0 0; font-size: 14px; line-height: 21px; text-align: justify; counter-reset: number 0; } .policy-contents-txt__list2 li { padding: 0 0 0 15px; position: relative; } .policy-contents-txt__list2 li::before { counter-increment: number 1; content: counter(number, lower-alpha) ". "; position: absolute; top: 0; left: 0; } p.policy-contents-txt__txt1 { margin: 0; font-size: 12px; line-height: 18px; text-align: justify; } p.policy-contents-txt__txt2 { margin: 0; } .beigeBg { background: #ecece3; } .policy-contents__titlecatch { margin: 0 0 8px; font-size: 14px; font-weight: 700; line-height: 21px; text-align: center; color: #000; } } @media (hover: hover) { .policy-contents-txt__list1 a { transition: opacity 0.3s; } .policy-contents-txt__list1 a:hover { opacity: 0.5; } .policy-contents-lead a { transition: opacity 0.3s; } .policy-contents-lead a:hover { opacity: 0.5; } .policy-contents-txt a { transition: opacity 0.3s; } .policy-contents-txt a:hover { opacity: 0.5; } } .webentry { background: #ecece3; } @media (min-width: 1024px) { .webentry { padding-bottom: 128px; } .webentry-header, .webentry-kv, .webentry__lead, .webentry-point, .webentry-term, .webentry-btn { max-width: 960px; margin: 0 auto; } .webentry-header { padding: 32px 0 24px; } .webentry-header p { max-width: 527px; margin: 0 auto; } .webentry-kv { border-radius: 16px; position: relative; overflow: hidden; } .webentry-kv-text { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding-left: 80px; display: grid; align-content: center; } .webentry-kv-text p { font-family: Poppins; font-size: 80px; font-weight: 700; line-height: 80px; color: #b9141e; } .webentry-kv-text h1 { font-size: 24px; font-weight: 900; line-height: 36px; } .webentry__lead { padding: 48px 0; text-align: center; font-size: 24px; font-weight: 700; line-height: 36px; } .webentry-point ul { display: flex; flex-wrap: wrap; gap: 0 24px; } .webentry-point ul li { flex: 1; padding: 48px; background: #fff; border-radius: 8px; } .webentry-point ul li div { margin: 0 auto; } .webentry-point ul li:nth-child(1) div { width: 142px; } .webentry-point ul li:nth-child(2) div { width: 126px; } .webentry-point ul li:nth-child(3) div { width: 64px; } .webentry-point ul li p { margin: 32px 0 0; font-size: 16px; font-weight: 700; line-height: 24px; text-align: justify; } .webentry-term { margin-top: 32px; padding: 48px 32px; background: #fff; border-radius: 8px; } .webentry-term p { font-size: 20px; font-weight: 500; line-height: 30px; } .webentry-term__title span { color: #b9141e; } .webentry-term-list { margin: 32px 0 24px; display: flex; flex-wrap: wrap; gap: 0 32px; } .webentry-term-list li { flex: 1; } .webentry-term-list__title { padding: 0 0 8px; border-bottom: 1px solid #b9141e; color: #b9141e; } .webentry-term-list1, .webentry-term-list2 { margin: 16px 0 0; } .webentry-term-list1 li, .webentry-term-list2 li { font-size: 20px; font-weight: 500; line-height: 30px; text-align: justify; } .webentry-term-list1 li span, .webentry-term-list2 li span { font-size: 14px; font-weight: 400; line-height: 21px; } .webentry-term-list1 { padding: 0 0 0 22px; list-style-type: decimal; } .webentry-term-list1__txt { display: block; } .webentry-term-list2 { padding: 0 0 0 22px; list-style-type: disc; } .webentry-term__comp { margin: 80px 0 0; padding: 8px 0; text-align: center; background: #000; font-size: 24px; font-weight: 700; line-height: 36px; color: #fff; position: relative; } .webentry-term__comp::before { width: 42px; height: 24px; content: ""; display: block; margin: 0 auto; background: #b9141e; clip-path: polygon(50% 100%, 0 0, 100% 0); position: absolute; top: -56px; left: 0; right: 0; } p.webentry-term__txt1 { margin: 8px 0 0; text-align: center; font-size: 14px; font-weight: 400; line-height: 21px; } .webentry-btn { margin-top: 48px; } .webentry-btn a { width: 312px; display: block; margin: 0 auto; padding: 25px 84px 25px 48px; background: url(../../../../assets/images/pc/webentry/ico_entry.svg) no-repeat right 48px center/32px auto #b9141e; border-radius: 50px; box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.0784313725); font-size: 20px; font-weight: 700; line-height: 30px; color: #fff; } .webentry-footer { padding: 48px 0 0; background: #000; } .webentry-footer__logo { width: 256px; margin: 0 auto; } .webentry-footer__copy { margin: 48px 0 0; padding: 10px 0; background: #b9141e; font-family: Poppins; font-size: 10px; font-weight: 400; line-height: 12px; text-align: center; color: #fff; } } @media (max-width: 1023px) { .webentry { padding-bottom: 80px; } .webentry-header, .webentry-kv, .webentry__lead, .webentry-point, .webentry-term, .webentry-btn { margin: 0 16px; } .webentry-header { padding: 32px 0 24px; } .webentry-header p { width: 100%; max-width: 327px; margin: 0 auto; } .webentry-kv { border-radius: 16px; position: relative; overflow: hidden; } .webentry-kv-text { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding-left: 16px; display: grid; align-content: center; } .webentry-kv-text p { font-family: Poppins; font-size: 48px; font-weight: 700; line-height: 48px; color: #b9141e; } .webentry-kv-text h1 { font-size: 22px; font-weight: 900; line-height: 33px; } .webentry__lead { padding: 48px 0; text-align: center; font-size: 24px; font-weight: 700; line-height: 36px; } .webentry-point ul { display: flex; flex-wrap: wrap; gap: 24px 0; } .webentry-point ul li { width: 100%; padding: 48px; background: #fff; border-radius: 8px; } .webentry-point ul li div { margin: 0 auto; } .webentry-point ul li:nth-child(1) div { width: 142px; } .webentry-point ul li:nth-child(2) div { width: 126px; } .webentry-point ul li:nth-child(3) div { width: 64px; } .webentry-point ul li p { margin: 32px 0 0; font-size: 16px; font-weight: 700; line-height: 24px; text-align: justify; } .webentry-term { margin-top: 32px; padding: 48px 16px; background: #fff; border-radius: 8px; } .webentry-term p { font-size: 20px; font-weight: 500; line-height: 30px; } p.webentry-term__title { font-size: 18px; line-height: 27px; } p.webentry-term__title span { color: #b9141e; } .webentry-term-list { margin: 40px 0 24px; display: flex; flex-wrap: wrap; gap: 32px 0; } .webentry-term-list li { width: 100%; } p.webentry-term-list__title { padding: 0 0 8px; border-bottom: 1px solid #b9141e; font-size: 20px; font-weight: 700; line-height: 30px; color: #b9141e; } .webentry-term-list1, .webentry-term-list2 { margin: 16px 0 0; } .webentry-term-list1 li, .webentry-term-list2 li { font-size: 20px; font-weight: 500; line-height: 30px; text-align: justify; } .webentry-term-list1 li span, .webentry-term-list2 li span { font-size: 14px; font-weight: 400; line-height: 21px; } .webentry-term-list1 { padding: 0 0 0 22px; list-style-type: decimal; } .webentry-term-list1__txt { display: block; } .webentry-term-list2 { padding: 0 0 0 22px; list-style-type: disc; } .webentry-term__comp { margin: 80px 0 0; padding: 8px 0; text-align: center; background: #000; border-radius: 4px; font-size: 24px; font-weight: 700; line-height: 36px; color: #fff; position: relative; } .webentry-term__comp::before { width: 42px; height: 24px; content: ""; display: block; margin: 0 auto; background: #b9141e; clip-path: polygon(50% 100%, 0 0, 100% 0); position: absolute; top: -56px; left: 0; right: 0; } p.webentry-term__txt1 { margin: 8px 0 0; font-size: 14px; font-weight: 400; line-height: 21px; } .webentry-btn { margin-top: 48px; } .webentry-btn a { width: 312px; display: block; margin: 0 auto; padding: 25px 84px 25px 48px; background: url(../../../../assets/images/pc/webentry/ico_entry.svg) no-repeat right 48px center/32px auto #b9141e; border-radius: 50px; box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.0784313725); font-size: 20px; font-weight: 700; line-height: 30px; color: #fff; } .webentry-footer { padding: 48px 0 0; background: #000; } .webentry-footer__logo { width: 256px; margin: 0 auto; } .webentry-footer__copy { margin: 48px 0 0; padding: 10px 0; background: #b9141e; font-family: Poppins; font-size: 10px; font-weight: 400; line-height: 12px; text-align: center; color: #fff; } } @media (hover: hover) { .webentry-btn a { transition: opacity 0.25s; } .webentry-btn a:hover { opacity: 0.5; } } @media (min-width: 1024px) { .line-kv { position: relative; } .line-kv__inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1120px); justify-content: center; align-content: center; padding-left: 20px; padding-right: 20px; padding-top: 44px; } .line-kv__title-english { color: var(--white, #fff); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: Poppins; font-size: 64px; font-style: italic; font-weight: 700; line-height: 80%; /* 51.2px */ } .line-kv__title-japanese { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .line-body { padding-top: 96px; padding-bottom: 96px; padding-left: 20px; padding-right: 20px; display: grid; grid-template-columns: minmax(0, 1024px); justify-content: center; background: var(--ECECE3, #ecece3); } .line-body__description { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 500; line-height: 150%; /* 30px */ margin-top: 48px; } .line-body__flow-list { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .line-flow { border-radius: 16px; background: #fff; padding: 32px 48px; height: 100%; } .line-flow__title-flow { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 600; line-height: 100%; /* 32px */ padding-bottom: 8px; border-bottom: 1px solid #b9141e; } .line-flow__title-flow-number { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 600; line-height: 100%; display: inline-block; margin-left: 8px; } .line-flow__title-text { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .line-flow__url-block { margin-top: 34px; } .line-flow__qr-block { margin-top: 8px; } .line-flow__send-contents { margin-top: 8px; } .line-flow__caution { margin-top: 8px; } .line-flow__tel-block { margin-top: 8px; } .line-flow__complete { margin-top: 8px; padding-top: 36px; display: grid; align-items: center; color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 180%; /* 36px */ } .line-flow-url-block { border-radius: 4px; background: var(--f5f5f7, #f5f5f7); padding: 24px 16px; } .line-flow-url-block__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .line-flow-url-block__url { color: var(--000000, #000); /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .line-flow-qr-block { border-radius: 4px; background: var(--F5F5F7, #f5f5f7); padding: 24px 0px; display: grid; grid-template-columns: auto 96px; justify-content: center; gap: 24px; align-items: center; } .line-flow-qr-block__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .line-flow-send-contents__list { display: grid; gap: 8px; } .line-flow-send-contents__item { border-bottom: 1px dashed var(--000000, #000); padding-bottom: 3px; } .line-flow-send-contents__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .line-flow-send-contents__note { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; display: inline-block; } .line-caution { border-radius: 4px; background: var(--NSM-color, #b9141e); color: var(--white, var(--white, #fff)); padding: 16px; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .line-flow-tel-block__title { color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .line-flow-tel-block__tel { display: inline-block; margin-top: 4px; color: var(--000000, #000); font-family: Poppins; font-size: 36px; font-style: italic; font-weight: 600; line-height: 100%; /* 36px */ } } @media (max-width: 1023px) { .line-kv { position: relative; } .line-kv__inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: grid; align-content: center; padding-left: 20px; padding-right: 20px; } .line-kv__title-english { color: var(--white, #fff); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8); font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 700; line-height: 80%; /* 25.6px */ } .line-kv__title-japanese { color: var(--white, var(--white, #fff)); font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 150%; /* 21px */ } .line-body { padding-top: 80px; padding-bottom: 80px; padding-left: 20px; padding-right: 20px; display: grid; background: var(--ECECE3, #ecece3); } .line-body__description { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 32px; } .line-body__flow-list { margin-top: 32px; display: grid; gap: 32px; } .line-flow { border-radius: 8px; background: #fff; padding: 32px 20px; } .line-flow__title-flow { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 32px; font-style: italic; font-weight: 600; line-height: 100%; /* 32px */ padding-bottom: 8px; border-bottom: 1px solid #b9141e; } .line-flow__title-flow-number { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 600; line-height: 100%; display: inline-block; margin-left: 8px; } .line-flow__title-text { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 8px; } .line-flow__url-block { margin-top: 8px; } .line-flow__qr-block { margin-top: 16px; } .line-flow__send-contents { margin-top: 8px; } .line-flow__caution { margin-top: 8px; } .line-flow__tel-block { margin-top: 8px; } .line-flow__complete { margin-top: 8px; color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ } .line-flow-url-block { border-radius: 4px; background: var(--f5f5f7, #f5f5f7); padding: 24px 16px; } .line-flow-url-block__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ } .line-flow-url-block__url { color: var(--000000, #000); /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } .line-flow-qr-block { border-radius: 4px; background: var(--F5F5F7, #f5f5f7); padding: 24px 0px; display: grid; grid-template-columns: auto 96px; justify-content: center; gap: 24px; align-items: center; } .line-flow-qr-block__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .line-flow-send-contents__list { display: grid; gap: 8px; } .line-flow-send-contents__item { border-bottom: 1px dashed var(--000000, #000); padding-bottom: 3px; } .line-flow-send-contents__title { color: var(--000000, #000); text-align: justify; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ } .line-flow-send-contents__note { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; display: inline-block; } .line-caution { border-radius: 4px; background: var(--NSM-color, #b9141e); color: var(--white, var(--white, #fff)); padding: 16px; text-align: justify; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ } .line-flow-tel-block__title { color: var(--000000, #000); text-align: justify; /* Noto Sans R 16pt */ font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; /* 24px */ } .line-flow-tel-block__tel { display: inline-block; margin-top: 4px; color: var(--000000, #000); font-family: Poppins; font-size: 36px; font-style: italic; font-weight: 600; line-height: 100%; /* 36px */ } } @media (hover: hover) { .line-flow-url-block__url { transition: opacity 0.3s; } .line-flow-url-block__url:hover { opacity: 0.5; } } @media (min-width: 1024px) { .sitemap { background: var(--F9F9F6, #f9f9f6); padding-top: 232px; padding-bottom: 80px; } .sitemap__title-english { color: var(--NSM-color, #b9141e); font-family: Poppins; text-align: center; font-size: 64px; font-style: italic; font-weight: 700; line-height: 80%; /* 51.2px */ } .sitemap__title-japanese { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; /* 24px */ margin-top: 8px; } .sitemap__contents { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 288px)); justify-content: center; align-items: start; gap: 48px; } .sitemap__column { display: grid; gap: 32px; } .sitemap-category__title { display: grid; grid-template-columns: 16px 1fr; align-items: center; padding-top: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--NSM-color, #b9141e); gap: 8px; } .sitemap-category__title::before { content: ""; display: block; width: 16px; height: 2px; background: var(--NSM-color, #b9141e); } .sitemap-category__title-label { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } .sitemap-category__list { padding-top: 16px; padding-bottom: 16px; } .sitemap-category__item-link { display: grid; padding-left: 24px; padding-right: 24px; padding-top: 8px; padding-bottom: 8px; grid-template-columns: 1fr 16px; align-items: center; } .sitemap-category__item-link-label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .sitemap-category__item-link-label br { display: none; } } @media (max-width: 1023px) { .sitemap { background: var(--F9F9F6, #f9f9f6); padding-top: 168px; padding-bottom: 80px; } .sitemap__title-english { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 48px; font-style: italic; font-weight: 700; line-height: 80%; /* 38.4px */ } .sitemap__title-japanese { color: var(--000000, #000); text-align: center; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; /* 21px */ margin-top: 8px; } .sitemap__contents { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 288px); padding-left: 20px; padding-right: 20px; justify-content: center; align-items: start; gap: 16px; } .sitemap__column { display: grid; gap: 16px; } .sitemap-category__title { display: grid; grid-template-columns: 16px 1fr; align-items: center; padding-top: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--NSM-color, #b9141e); gap: 8px; } .sitemap-category__title::before { content: ""; display: block; width: 16px; height: 2px; background: var(--NSM-color, #b9141e); } .sitemap-category__title-label { color: var(--NSM-color, #b9141e); font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } .sitemap-category__list { padding-top: 16px; padding-bottom: 16px; } .sitemap-category__item-link { display: grid; padding-left: 24px; padding-right: 24px; padding-top: 8px; padding-bottom: 8px; grid-template-columns: 1fr 16px; align-items: center; } .sitemap-category__item-link-label { color: var(--000000, #000); font-family: "Noto Sans JP"; font-size: 12px; font-style: normal; font-weight: 400; line-height: 150%; /* 18px */ } .sitemap-category__item-link-label br { display: none; } } @media (hover: hover) { .sitemap-category__title { transition: opacity 0.3s ease-in-out; } .sitemap-category__title:hover { opacity: 0.5; } .sitemap-category__item-link { transition: opacity 0.3s ease-in-out; } .sitemap-category__item-link:hover { opacity: 0.5; } } @media (min-width: 1024px) { .error-page { background: var(--ECECE3, #ecece3); padding-top: 224px; padding-left: 20px; padding-right: 20px; padding-bottom: 160px; } .error-page__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 64px; font-style: normal; font-weight: 600; line-height: 100%; /* 64px */ } .error-page__lead { color: var(--333333, #333); text-align: center; font-family: "Noto Sans JP"; font-size: 24px; font-style: normal; font-weight: 700; line-height: 150%; /* 36px */ margin-top: 16px; } .error-page__description { color: #555; text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 180%; /* 36px */ margin-top: 16px; } .error-page__link-block { margin-top: 32px; text-align: center; } .error-page__link { display: inline-grid; grid-template-columns: 16px auto; justify-content: ce nter; align-items: center; gap: 8px; border-radius: 999px; background: var(--111111, #111); padding: 12px 32px; } .error-page__link-label { color: #fff; text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } } @media (max-width: 1023px) { .error-page { background: var(--ECECE3, #ecece3); padding-top: 160px; padding-left: 20px; padding-right: 20px; padding-bottom: 80px; } .error-page__title { color: var(--NSM-color, #b9141e); text-align: center; font-family: Poppins; font-size: 32px; font-style: normal; font-weight: 600; line-height: 100%; /* 32px */ } .error-page__lead { color: var(--333333, #333); text-align: center; font-family: "Noto Sans JP"; font-size: 20px; font-style: normal; font-weight: 700; line-height: 150%; /* 30px */ margin-top: 16px; } .error-page__description { color: #555; text-align: center; font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 180%; /* 25.2px */ margin-top: 16px; } .error-page__link-block { margin-top: 32px; text-align: center; } .error-page__link { display: inline-grid; grid-template-columns: 16px auto; justify-content: ce nter; align-items: center; gap: 8px; border-radius: 999px; background: var(--111111, #111); padding: 12px 32px; } .error-page__link-label { color: #fff; text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ } } @media (hover: hover) { .error-page__link { transition: background 0.3s ease-in-out; } .error-page__link-icon { transition: translate 0.3s ease-in-out; } .error-page__link-icon path { transition: fill 0.3s ease-in-out; } .error-page__link-label { transition: translate 0.3s ease-in-out; } .error-page__link:hover { background: #b9141e; } .error-page__link:hover .error-page__link-icon { translate: 36px 0; } .error-page__link:hover .error-page__link-icon path { fill: #fff; } .error-page__link:hover .error-page__link-label { translate: -24px 0; } }