@charset "UTF-8";
  *,
::before,
::after { box-sizing: border-box;
} :where(:root) { font-family: sans-serif; line-height: 1.5; text-spacing-trim: trim-start; text-autospace: normal; line-break: strict; overflow-wrap: anywhere; -webkit-text-size-adjust: 100%;
text-size-adjust: 100%; scrollbar-gutter: stable; -webkit-tap-highlight-color: transparent;
}
:where(body) { min-block-size: 100dvb; margin: unset;
} :where(:is(h1, h2, h3, h4, h5, h6):lang(en)) { text-wrap: pretty;
}
:where(h1) { margin-block: 0.67em;
font-size: 2em;
}
:where(h2, h3, h4, h5, h6) { margin-block: unset;
}
:where(search) { display: block flow;
} :where(p, blockquote, figure, pre, address, ul, ol, dl, menu) { margin-block: unset;
}
:where(blockquote, figure) { margin-inline: unset;
}
:where(p:lang(en)) { text-wrap: pretty;
}
:where(address:lang(ja)) { font-style: unset;
}
:where(ul, ol, menu) { padding-inline-start: unset; list-style-type: "";
}
:where(dt) { font-weight: bolder;
}
:where(dd) { margin-inline-start: unset;
}
:where(pre) { text-spacing-trim: space-all; text-autospace: no-autospace;
}
@media print {
:where(pre) { text-wrap-mode: unset;
}
} :where(em:lang(ja)) { font-weight: bolder;
}
:where(:is(i, cite, em, dfn):lang(ja)) { font-style: unset;
}
:where(u, s, del, ins) { text-decoration-inset: auto;
}
:where(code, kbd, samp) { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace; font-feature-settings: initial;
font-variation-settings: initial; font-size: unset; font-variant-ligatures: none;
}
:where(abbr[title]) { text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-inset: auto;
cursor: help;
}
:where(time) { text-autospace: no-autospace;
}
@media (forced-colors: active) {
:where(mark) { background-color: Highlight;
color: HighlightText;
}
}
@media print {
:where(mark) { border-width: 1px;
border-style: dotted;
}
} :where(a) { color: unset;
}
:where(a:any-link) { text-decoration-line: unset; text-decoration-thickness: from-font; text-decoration-inset: auto;
} :where(img, svg, picture, video, audio, canvas, model, iframe, embed, object) { max-inline-size: 100%; vertical-align: bottom;
}
:where(img, svg, picture, video, canvas, model, iframe, embed, object) { block-size: auto;
}
:where(iframe) { border: unset;
} :where(table) { border-collapse: collapse;
}
:where(caption, th) { text-align: unset;
}
:where(caption:lang(en)) { text-wrap: pretty;
} :where(button, input, select, textarea),
::file-selector-button { border-width: 1px;
border-style: solid; border-color: unset;
border-radius: unset;
color: unset;
font: unset;
letter-spacing: unset;
text-align: unset;
}
:where(input:is([type="radio" i], [type="checkbox" i])) { margin: unset;
}
:where(input[type="file" i]) { border: unset;
}
:where(input[type="search" i]) { -webkit-appearance: textfield;
}
@supports (-webkit-touch-callout: none) {
:where(input[type="search" i]) { background-color: Canvas;
}
}
:where(
input:is(
[type="tel" i],
[type="url" i],
[type="email" i],
[type="number" i]
):not(:placeholder-shown)
) { direction: ltr;
}
:where(textarea) { margin-block: unset; resize: block;
}
:where(
input:not([type="button" i], [type="submit" i], [type="reset" i]),
textarea,
[contenteditable]
) { text-autospace: no-autospace;
}
:where(
button,
input:is([type="button" i], [type="submit" i], [type="reset" i])
),
::file-selector-button { background-color: unset;
}
:where(
button,
input:is([type="button" i], [type="submit" i], [type="reset" i]),
[role="tab" i],
[role="button" i],
[role="option" i]
),
::file-selector-button { touch-action: manipulation;
}
:where(
button:enabled,
label[for],
select:enabled,
input:is(
[type="button" i],
[type="submit" i],
[type="reset" i],
[type="radio" i],
[type="checkbox" i]
):enabled,
[role="tab" i],
[role="button" i],
[role="option" i]
),
:where(:enabled)::file-selector-button { cursor: pointer;
}
:where(fieldset) { min-inline-size: 0; margin-inline: unset;
padding: unset;
border: unset;
}
:where(legend) { padding-inline: unset;
}
:where(progress) { vertical-align: unset;
}
::placeholder { opacity: unset;
} :where(summary) { list-style-type: ""; cursor: pointer;
}
:where(summary)::-webkit-details-marker { display: none;
}
:where(dialog, [popover]) { overscroll-behavior-block: contain; padding: unset;
border: unset;
}
:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) { display: none !important;
}
:where(dialog) { max-inline-size: unset;
max-block-size: unset;
}
:where(dialog)::backdrop { background-color: oklch(0% 0 0deg / 30%);
}
:where([popover]) { margin: unset;
} :where(:focus-visible) { outline-offset: 3px;
}
[tabindex="-1"]:focus { outline: none !important;
} :where(:disabled, [aria-disabled="true" i]) { cursor: default;
}
[hidden]:not([hidden="until-found" i]) { display: none !important;
}
:where(h1, h2, h3, h4, h5, h6) {
margin: 0;
}
:where(p) {
margin: 0;
}
@property --root-font-size {
syntax: "<length>";
inherits: false;
initial-value: 16px;
}
:root { --inner: min(1080px, 100%);
--inner-sp: min(500px, 100%);
--padding-inner: 20px; --z-index-header: 900; --color-white: #fff;
--color-text: #333;
--color-text-dark: #0d2936;
--color-black: #000;
--color-gray: #f0f0f0;
--color-border: #aaaaaf;
--color-accent: #408f95;
--color-primary: #234f5e;
--color-navy: #013159;
--color-navy-30: rgba(1, 49, 89, 0.3);
--color-line-green: #06c755;
--color-line-green-hover: #dbf7e6;
--color-line-green-border: #a5e1bd;
--color-cta-yellow: #ffe77e;
--color-cta-yellow-hover: #fff7d2;
--color-blue-light: rgba(90, 178, 242, 0.1);
--color-blue-mid: rgba(90, 178, 242, 0.4); --fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700; --base-font-family: "Noto Sans JP", sans-serif;
--serif-font-family: "Noto Serif JP", serif;
--title-font-family: "Noto Sans JP", sans-serif;
--label-font-family: "Noto Sans JP", sans-serif;
--to-rem: calc(100vw / 1440); --duration: 0.3s; --header-height: calc(70 * var(--to-rem));
}
@media screen and (width >= 1341px) {
:root {
--to-rem: 1px;
}
}
@media screen and (width <= 767px) and (width >= 601px) {
:root {
--to-rem: 1px;
--header-height: calc(56 * var(--to-rem));
}
}
@media screen and (width <= 600px) {
:root {
--to-rem: calc(100vw / 390);
--header-height: calc(56 * var(--to-rem));
}
}
html {
font-size: 100%;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
color-scheme: light;
} [id] {
scroll-margin-top: var(--header-height);
}
a[href^=tel] {
text-decoration: none;
}
a {
color: inherit;
-webkit-tap-highlight-color: transparent; }
a:hover {
text-decoration: none;
}
img,
svg {
vertical-align: middle;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
picture {
display: block;
width: 100%;
height: 100%;
}
:where(:any-link, button, [type=button], [type=reset], [type=submit], label[for], select, summary, [role=tab], [role=button]) {
cursor: pointer;
}
:where(button, [type=button], [type=reset], [type=submit]) {
touch-action: manipulation;
}
:focus:not(:focus-visible) {
outline: none;
}
input[type=text] {
font-size: 1rem; }
textarea {
field-sizing: content;
}
body {
overflow-x: clip;
font-family: var(--base-font-family);
font-weight: var(--fw-regular);
color: var(--color-text);
background-color: var(--color-white);
}
body.is-loading {
opacity: 0;
}
body.is-loaded {
opacity: 1;
transition: opacity 0.15s ease;
}
body.is-leaving {
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.u-sp {
display: none;
}
@media screen and (max-width: 767px) {
.u-sp {
display: block;
}
}
.u-pc {
display: block;
}
@media screen and (max-width: 767px) {
.u-pc {
display: none;
}
}
.l-footerCta {
position: relative;
overflow: hidden;
min-height: calc(487 * var(--to-rem));
padding-block: calc(60 * var(--to-rem)) 0;
text-align: center;
}
@media screen and (max-width: 767px) {
.l-footerCta {
min-height: calc(591 * var(--to-rem));
padding-block: calc(36 * var(--to-rem)) calc(30 * var(--to-rem));
}
}
.l-footerCta__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.l-footerCta__bgPicture {
display: block;
width: 100%;
height: 100%;
}
.l-footerCta__bgPicture img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.l-footerCta__inner {
position: relative;
z-index: 1;
padding-inline: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footerCta__inner {
padding-inline: calc(17 * var(--to-rem));
}
}
.l-footerCta__heading {
font-family: var(--serif-font-family);
font-size: calc(32 * var(--to-rem));
font-weight: 600;
color: var(--color-text);
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.l-footerCta__heading {
font-size: calc(20 * var(--to-rem));
line-height: 1.6;
}
}
.l-footerCta__text {
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
color: var(--color-text);
line-height: 1.8;
margin-top: calc(18 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footerCta__text {
font-size: calc(14 * var(--to-rem));
margin-top: calc(7 * var(--to-rem));
}
}
.l-footerCta__spBr {
display: none;
}
@media screen and (max-width: 767px) {
.l-footerCta__spBr {
display: inline;
}
}
.l-footerCta__buttons {
display: flex;
justify-content: center;
gap: calc(60 * var(--to-rem));
margin-top: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footerCta__buttons {
flex-direction: column;
gap: 0;
margin-top: calc(14 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.l-footerCta__btn + .l-footerCta__btn {
margin-top: calc(23 * var(--to-rem));
}
}
.l-footerCta__btn {
position: relative;
display: block;
width: calc(428 * var(--to-rem));
min-height: calc(200 * var(--to-rem));
padding-block: calc(23 * var(--to-rem)) 0;
padding-inline: calc(24 * var(--to-rem));
border-radius: calc(30 * var(--to-rem));
background: transparent;
text-decoration: none;
transition: background-color var(--duration);
}
@media screen and (max-width: 767px) {
.l-footerCta__btn {
width: 100%;
padding-block: calc(18 * var(--to-rem)) 0;
padding-inline: calc(29 * var(--to-rem));
border-radius: calc(20 * var(--to-rem));
}
}
.l-footerCta__btn::before,
.l-footerCta__btn::after {
content: "";
position: absolute;
display: block;
border-radius: inherit;
}
.l-footerCta__btn::before {
top: calc(3 * var(--to-rem));
right: calc(-3 * var(--to-rem));
bottom: calc(-3 * var(--to-rem));
left: calc(3 * var(--to-rem));
z-index: 0;
}
.l-footerCta__btn::after {
inset: 0;
z-index: 1;
border: calc(3 * var(--to-rem)) solid;
background-color: var(--color-white);
transition: background-color var(--duration);
}
.l-footerCta__btnTitle,
.l-footerCta__btnDesc,
.l-footerCta__btnArrow {
position: relative;
z-index: 2;
}
@media screen and (max-width: 767px) {
.l-footerCta__btn--line {
min-height: calc(177 * var(--to-rem));
}
}
.l-footerCta__btn--line::before {
background-color: var(--color-line-green);
}
.l-footerCta__btn--line::after {
border-color: var(--color-line-green);
}
@media (any-hover: hover) {
.l-footerCta__btn--line:hover::after {
background-color: var(--color-line-green-hover);
}
}
@media screen and (max-width: 767px) {
.l-footerCta__btn--doc {
min-height: calc(153 * var(--to-rem));
}
}
.l-footerCta__btn--doc::before {
background-color: var(--color-cta-yellow);
}
.l-footerCta__btn--doc::after {
border-color: var(--color-cta-yellow);
}
@media (any-hover: hover) {
.l-footerCta__btn--doc:hover::after {
background-color: var(--color-cta-yellow-hover);
}
}
@media screen and (max-width: 767px) {
.l-footerCta__btn--line::before,
.l-footerCta__btn--doc::before {
top: calc(3 * var(--to-rem));
right: calc(-2.9 * var(--to-rem));
bottom: calc(-2.9 * var(--to-rem));
left: calc(3 * var(--to-rem));
}
}
.l-footerCta__btnTitle {
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-regular);
color: var(--color-text);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.l-footerCta__btnTitle {
font-size: calc(19 * var(--to-rem));
}
}
.l-footerCta__btnDesc {
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
color: var(--color-text);
line-height: 1.8;
margin-top: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footerCta__btnDesc {
font-size: calc(14 * var(--to-rem));
margin-top: calc(8 * var(--to-rem));
}
}
.l-footerCta__btnArrow {
position: absolute;
bottom: calc(35 * var(--to-rem));
right: calc(30 * var(--to-rem));
width: calc(142 * var(--to-rem));
height: auto;
object-fit: contain;
}
@media screen and (max-width: 767px) {
.l-footerCta__btnArrow {
width: calc(77 * var(--to-rem));
bottom: calc(14 * var(--to-rem));
right: calc(19 * var(--to-rem));
}
}
@media (any-hover: hover) {
.l-footerCta__btn:hover .l-footerCta__btnArrow {
filter: brightness(0) invert(1);
}
}
.l-footer {
background-color: #e5f3fe;
}
.l-footer__inner {
display: flex;
align-items: flex-start;
max-width: calc(1440 * var(--to-rem));
gap: calc(120 * var(--to-rem));
padding-inline: calc(120 * var(--to-rem));
padding-block: calc(60 * var(--to-rem)) calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.l-footer__inner {
display: block;
padding-inline: calc(30 * var(--to-rem));
padding-block: calc(20 * var(--to-rem)) calc(30 * var(--to-rem));
}
}
.l-footer__logo {
flex-shrink: 0;
}
.l-footer__logo a {
display: block;
line-height: 0;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-footer__logo a:hover {
opacity: 0.7;
}
}
.l-footer__logo img {
width: calc(168 * var(--to-rem));
height: auto;
object-fit: contain;
}
@media screen and (max-width: 767px) {
.l-footer__logo img {
width: calc(101 * var(--to-rem));
}
}
.l-footer__nav {
display: flex;
gap: calc(115 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footer__nav {
gap: calc(64 * var(--to-rem));
margin-left: 0;
margin-top: calc(18 * var(--to-rem));
}
}
.l-footer__navCol {
list-style: none;
}
@media screen and (max-width: 767px) {
.l-footer__navCol {
flex-shrink: 0;
}
}
.l-footer__navItem {
margin-top: calc(29 * var(--to-rem));
}
.l-footer__navItem:first-child {
margin-top: 0;
}
.l-footer__navLink {
position: relative;
display: inline-block;
padding-block-end: calc(3 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
text-decoration: none;
}
.l-footer__navLink::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(1 * var(--to-rem));
background-color: currentcolor;
content: "";
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration) ease;
}
@media screen and (max-width: 767px) {
.l-footer__navLink {
font-size: calc(14 * var(--to-rem));
line-height: 1.5;
white-space: nowrap;
}
}
@media (any-hover: hover) {
.l-footer__navLink:hover::before {
transform: scaleX(1);
}
}
.l-footer__navSub {
list-style: none;
margin-left: calc(33 * var(--to-rem));
margin-top: calc(9 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footer__navSub {
margin-left: 0;
}
}
.l-footer__navSubItem {
display: flex;
align-items: center;
gap: calc(10 * var(--to-rem));
margin-top: calc(9 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footer__navSubItem {
gap: calc(5 * var(--to-rem));
}
}
.l-footer__navSubItem:first-child {
margin-top: 0;
}
.l-footer__navSubItem::before {
content: "";
flex-shrink: 0;
display: block;
width: calc(20 * var(--to-rem));
height: calc(1 * var(--to-rem));
background: var(--color-text);
}
@media screen and (max-width: 767px) {
.l-footer__navSubItem::before {
width: calc(10 * var(--to-rem));
}
}
.l-footer__navSubLink {
position: relative;
display: inline-block;
padding-block-end: calc(3 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
text-decoration: none;
white-space: nowrap;
}
.l-footer__navSubLink::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(1 * var(--to-rem));
background-color: currentcolor;
content: "";
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration) ease;
}
@media screen and (max-width: 767px) {
.l-footer__navSubLink {
font-size: calc(14 * var(--to-rem));
}
}
@media (any-hover: hover) {
.l-footer__navSubLink:hover::before {
transform: scaleX(1);
}
}
.l-footer__navItem--legal {
margin-top: calc(62 * var(--to-rem));
}
.l-footer__navItem--legal + .l-footer__navItem--legal {
margin-top: calc(9 * var(--to-rem));
}
.l-footer__sns {
margin-left: calc(39 * var(--to-rem));
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.l-footer__sns {
margin-left: 0;
margin-top: calc(6 * var(--to-rem));
text-align: center;
}
}
.l-footer__snsLabel {
display: inline-block;
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-regular);
color: var(--color-text);
line-height: 1;
}
@media screen and (max-width: 767px) {
.l-footer__snsLabel {
font-size: calc(15 * var(--to-rem));
}
}
.l-footer__snsIcons {
display: flex;
align-items: center;
gap: calc(6 * var(--to-rem));
margin-top: calc(14 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footer__snsIcons {
justify-content: center;
margin-top: calc(10 * var(--to-rem));
}
}
.l-footer__snsLinkYt,
.l-footer__snsLinkX,
.l-footer__snsLinkNotion {
display: inline-flex;
flex-shrink: 0;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-footer__snsLinkYt:hover,
.l-footer__snsLinkX:hover,
.l-footer__snsLinkNotion:hover {
opacity: 0.7;
}
}
.l-footer__snsLinkYt img,
.l-footer__snsLinkX img,
.l-footer__snsLinkNotion img {
width: calc(50 * var(--to-rem));
height: calc(50 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footer__snsLinkYt img,
.l-footer__snsLinkX img,
.l-footer__snsLinkNotion img {
width: calc(40 * var(--to-rem));
height: calc(40 * var(--to-rem));
}
}
.l-footer__bottom {
padding-block: calc(14 * var(--to-rem));
padding-inline: calc(120 * var(--to-rem));
border-top: 1px solid rgba(0, 0, 0, 0.1);
text-align: center;
}
@media screen and (max-width: 767px) {
.l-footer__bottom {
padding-inline: calc(30 * var(--to-rem));
}
}
.l-footer__copyright {
font-size: calc(12 * var(--to-rem));
color: var(--color-text);
opacity: 0.7;
line-height: 1;
}
.l-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-index-header);
height: calc(70 * var(--to-rem));
background-color: #e5f3fe;
}
@media screen and (max-width: 767px) {
.l-header {
height: calc(58 * var(--to-rem));
}
}
.l-header__inner {
display: flex;
align-items: center;
height: 100%;
padding-inline: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-header__inner {
padding-inline: calc(10 * var(--to-rem)) calc(19 * var(--to-rem));
justify-content: space-between;
}
}
.l-header__logo {
flex-shrink: 0;
}
.l-header__logo a {
display: block;
line-height: 0;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-header__logo a:hover {
opacity: 0.7;
}
}
.l-header__logo img {
width: calc(168 * var(--to-rem));
height: auto;
object-fit: contain;
}
@media screen and (max-width: 767px) {
.l-header__logo img {
width: calc(114 * var(--to-rem));
}
}
.l-header__sns {
display: flex;
flex-direction: column;
gap: calc(4 * var(--to-rem));
margin-left: calc(25 * var(--to-rem));
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.l-header__sns {
display: none;
}
}
.l-header__snsLabel {
display: inline-block;
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
line-height: 1;
text-align: center;
}
.l-header__snsIcons {
display: flex;
align-items: center;
gap: calc(4 * var(--to-rem));
}
.l-header__snsLinkYt,
.l-header__snsLinkX,
.l-header__snsLinkNotion {
display: inline-flex;
flex-shrink: 0;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-header__snsLinkYt:hover,
.l-header__snsLinkX:hover,
.l-header__snsLinkNotion:hover {
opacity: 0.7;
}
}
.l-header__snsLinkYt img,
.l-header__snsLinkX img,
.l-header__snsLinkNotion img {
width: calc(36 * var(--to-rem));
height: calc(36 * var(--to-rem));
}
.l-header__nav {
display: flex;
align-items: center;
margin-left: auto;
}
@media screen and (max-width: 767px) {
.l-header__nav {
display: none;
}
}
.l-header__navList {
display: flex;
align-items: center;
gap: calc(50 * var(--to-rem));
list-style: none;
}
.l-header__navLink {
position: relative;
display: inline-block;
padding-block-end: calc(3 * var(--to-rem));
font-family: "Noto Serif JP", var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: 600;
color: var(--color-text);
text-decoration: none;
}
.l-header__navLink::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(1 * var(--to-rem));
background-color: currentcolor;
content: "";
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration) ease;
}
@media (any-hover: hover) {
.l-header__navLink:hover::before {
transform: scaleX(1);
}
}
.l-header__ctaBtn {
display: flex;
align-items: center;
gap: calc(8 * var(--to-rem));
flex-shrink: 0;
width: calc(222 * var(--to-rem));
height: calc(50 * var(--to-rem));
background-color: var(--color-line-green);
border-radius: calc(5 * var(--to-rem));
box-shadow: 2px 2px 4px 0px rgba(70, 95, 80, 0.25);
padding-inline: calc(17 * var(--to-rem));
margin-left: calc(50 * var(--to-rem));
text-decoration: none;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-header__ctaBtn:hover {
opacity: 0.85;
}
}
@media screen and (max-width: 767px) {
.l-header__ctaBtn {
display: none;
}
}
.l-header__ctaBtn img {
width: calc(35 * var(--to-rem));
height: calc(35 * var(--to-rem));
object-fit: contain;
flex-shrink: 0;
}
.l-header__ctaBtnText {
flex-shrink: 0;
font-size: calc(18 * var(--to-rem));
font-weight: var(--fw-medium);
color: #fff;
}
.l-header__spRight {
display: none;
align-items: center;
gap: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-header__spRight {
display: flex;
}
}
.l-header__spCtaBtn {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
width: calc(183 * var(--to-rem));
height: calc(34 * var(--to-rem));
background-color: var(--color-line-green);
border-radius: calc(3 * var(--to-rem));
box-shadow: 2px 2px 4px 0px rgba(70, 95, 80, 0.25);
text-decoration: none;
}
.l-header__spCtaBtn img {
width: calc(29 * var(--to-rem));
height: calc(29 * var(--to-rem));
object-fit: contain;
flex-shrink: 0;
}
.l-header__spCtaBtn span {
flex-shrink: 0;
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-medium);
color: #fff;
}
.l-header__hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: calc(6 * var(--to-rem));
width: calc(23 * var(--to-rem));
height: calc(23 * var(--to-rem));
background: transparent;
border: none;
padding-block: 0;
padding-inline: 0;
flex-shrink: 0;
cursor: pointer;
}
.l-header__hamburgerBar {
display: block;
width: calc(23 * var(--to-rem));
height: calc(2 * var(--to-rem));
background-color: var(--color-text);
border-radius: calc(1 * var(--to-rem));
transition: transform var(--duration), opacity var(--duration);
}
.l-header__hamburger.is-open .l-header__hamburgerBar:nth-child(1) {
transform: translateY(calc(8 * var(--to-rem))) rotate(45deg);
}
.l-header__hamburger.is-open .l-header__hamburgerBar:nth-child(2) {
opacity: 0;
}
.l-header__hamburger.is-open .l-header__hamburgerBar:nth-child(3) {
transform: translateY(calc(-7.8 * var(--to-rem))) rotate(-45deg);
}
.l-drawer {
display: none;
}
@media screen and (max-width: 767px) {
.l-drawer {
display: block;
position: fixed;
inset: 0;
z-index: 850;
pointer-events: none;
}
}
.l-drawer.is-open {
pointer-events: auto;
}
.l-drawer__panel {
position: absolute;
top: calc(60 * var(--to-rem));
right: 0;
display: flex;
flex-direction: column;
width: calc(156 * var(--to-rem));
height: calc(296 * var(--to-rem));
background-color: #2077cf;
border-radius: 0 0 0 calc(20 * var(--to-rem));
padding-block: calc(20 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem)) calc(20 * var(--to-rem));
transform: translateX(100%);
transition: transform 0.3s ease;
}
.l-drawer.is-open .l-drawer__panel {
transform: translateX(0);
}
.l-drawer__navList {
list-style: none;
display: flex;
flex-direction: column;
gap: calc(19 * var(--to-rem));
}
.l-drawer__navLink {
display: inline-block;
font-family: "Noto Serif JP", var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: #fff;
text-decoration: none;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-drawer__navLink:hover {
opacity: 0.7;
}
}
.l-drawer__sns {
margin-top: auto;
display: flex;
flex-direction: column;
gap: calc(6 * var(--to-rem));
}
.l-drawer__snsLabel {
display: inline-block;
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-medium);
color: #fff;
}
.l-drawer__snsIcons {
display: flex;
align-items: center;
gap: calc(3 * var(--to-rem));
}
.l-drawer__snsLinkYt,
.l-drawer__snsLinkX,
.l-drawer__snsLinkNotion {
display: inline-flex;
flex-shrink: 0;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-drawer__snsLinkYt:hover,
.l-drawer__snsLinkX:hover,
.l-drawer__snsLinkNotion:hover {
opacity: 0.7;
}
}
.l-drawer__snsLinkYt img,
.l-drawer__snsLinkX img,
.l-drawer__snsLinkNotion img {
width: calc(27 * var(--to-rem));
height: calc(27 * var(--to-rem));
}
.l-sideCta {
position: fixed;
right: 0;
z-index: 820;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--color-white);
border: calc(3 * var(--to-rem)) solid;
border-right: none;
border-radius: calc(5 * var(--to-rem)) 0 0 calc(5 * var(--to-rem));
box-shadow: 2px 2px 4px 0px rgba(70, 95, 80, 0.25);
text-decoration: none;
width: calc(53 * var(--to-rem));
transition: background-color var(--duration);
}
@media screen and (max-width: 767px) {
.l-sideCta {
display: none;
}
}
.l-sideCta--consultation {
top: calc(162 * var(--to-rem));
height: calc(220 * var(--to-rem));
border-color: var(--color-line-green-border);
gap: calc(6 * var(--to-rem));
}
@media (any-hover: hover) {
.l-sideCta--consultation:hover {
background-color: var(--color-line-green-hover);
}
}
@media screen and (max-width: 767px) {
.l-sideCta--consultation {
top: calc(77 * var(--to-rem));
height: calc(177 * var(--to-rem));
}
}
.l-sideCta--request {
top: calc(396 * var(--to-rem));
height: calc(96 * var(--to-rem));
border-color: var(--color-cta-yellow);
}
@media (any-hover: hover) {
.l-sideCta--request:hover {
background-color: var(--color-cta-yellow-hover);
}
}
@media screen and (max-width: 767px) {
.l-sideCta--request {
top: calc(264 * var(--to-rem));
height: calc(77 * var(--to-rem));
}
}
.l-sideCta__icon {
width: calc(23 * var(--to-rem));
height: calc(23 * var(--to-rem));
object-fit: contain;
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.l-sideCta__icon {
width: calc(22 * var(--to-rem));
height: calc(22 * var(--to-rem));
}
}
.l-sideCta__text {
writing-mode: vertical-rl;
font-family: var(--base-font-family);
font-size: calc(18 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
line-height: 1.0555555556;
letter-spacing: 0;
}
@media screen and (max-width: 767px) {
.l-sideCta__text {
font-size: calc(14 * var(--to-rem));
line-height: 1.0714285714;
}
}
.l-inner {
max-width: calc(1280 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.l-inner {
max-width: calc(540 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.l-main {
margin-block-start: var(--header-height);
}
.c-cta-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: calc(428 * var(--to-rem));
padding-block: calc(30 * var(--to-rem)) calc(40 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem));
background-color: var(--color-white);
border: calc(3 * var(--to-rem)) solid;
border-radius: calc(30 * var(--to-rem));
text-align: center;
text-decoration: none;
transition: background-color var(--duration) ease;
}
.c-cta-btn::before {
content: "";
position: absolute;
top: 1.44%;
right: -0.7%;
bottom: 3.35%;
left: 0.7%;
border-radius: calc(30 * var(--to-rem));
z-index: -1;
transition: none;
}
@media screen and (max-width: 767px) {
.c-cta-btn {
width: 100%;
padding-block: calc(24 * var(--to-rem)) calc(30 * var(--to-rem));
padding-inline: calc(24 * var(--to-rem));
}
}
.c-cta-btn[data-color=green] {
border-color: var(--color-line-green);
color: var(--color-text);
}
.c-cta-btn[data-color=green]::before {
background-color: var(--color-line-green);
}
@media (any-hover: hover) {
.c-cta-btn[data-color=green]:hover {
background-color: var(--color-line-green-hover);
}
}
.c-cta-btn[data-color=yellow] {
border-color: var(--color-cta-yellow);
color: var(--color-text);
}
.c-cta-btn[data-color=yellow]::before {
background-color: var(--color-cta-yellow);
}
@media (any-hover: hover) {
.c-cta-btn[data-color=yellow]:hover {
background-color: var(--color-cta-yellow-hover);
}
}
.c-cta-btn__title {
font-family: var(--base-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.c-cta-btn__title {
font-size: calc(20 * var(--to-rem));
}
}
.c-cta-btn__sub {
margin-top: calc(10 * var(--to-rem));
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.c-cta-btn__sub {
font-size: calc(13 * var(--to-rem));
}
}
.c-cta-btn__arrow {
display: block;
width: calc(142 * var(--to-rem));
height: auto;
margin-top: auto;
padding-top: calc(10 * var(--to-rem));
align-self: flex-end;
}
@media screen and (max-width: 767px) {
.c-cta-btn__arrow {
width: calc(100 * var(--to-rem));
}
}
.c-cta-set {
display: flex;
justify-content: center;
gap: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-cta-set {
flex-direction: column;
gap: calc(24 * var(--to-rem));
width: 100%;
}
}
.c-btn {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
gap: calc(10 * var(--to-rem));
padding-block: calc(12 * var(--to-rem)) calc(12 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem)) calc(46 * var(--to-rem));
position: relative;
background-color: var(--color-white);
border: 1px solid var(--color-navy);
border-radius: calc(5 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
text-decoration: none;
transition: opacity var(--duration) ease;
}
.c-btn::after {
content: "";
position: absolute;
top: 50%;
right: calc(16 * var(--to-rem));
width: calc(8 * var(--to-rem));
height: calc(8 * var(--to-rem));
border-top: 1.5px solid currentcolor;
border-right: 1.5px solid currentcolor;
translate: 0 -50%;
rotate: 45deg;
transition: translate var(--duration) ease;
}
@media (any-hover: hover) {
.c-btn:hover {
opacity: 0.7;
}
.c-btn:hover::after {
translate: calc(4 * var(--to-rem)) -50%;
}
}
@media screen and (max-width: 767px) {
.c-btn {
font-size: calc(14 * var(--to-rem));
}
}
.c-caseCard {
display: block;
position: relative;
overflow: hidden;
min-height: calc(610 * var(--to-rem));
border-radius: calc(30 * var(--to-rem)) 0 calc(30 * var(--to-rem)) 0;
background: var(--color-blue-light);
cursor: pointer;
text-decoration: none;
}
@media screen and (max-width: 767px) {
.c-caseCard {
min-height: calc(544 * var(--to-rem));
border-radius: calc(20 * var(--to-rem)) 0 calc(20 * var(--to-rem)) 0;
}
}
.c-caseCard__img {
overflow: hidden;
width: calc(100% - calc(40 * var(--to-rem)));
height: calc(178 * var(--to-rem));
margin-block-start: calc(22 * var(--to-rem));
margin-inline: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-caseCard__img {
height: calc(157 * var(--to-rem));
margin-block-start: calc(20 * var(--to-rem));
}
}
.c-caseCard__picture {
display: block;
width: 100%;
height: 100%;
}
.c-caseCard__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.c-caseCard__body {
padding-block: 0 calc(16 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-caseCard__body {
padding-inline: calc(15 * var(--to-rem));
}
}
.c-caseCard__info {
position: relative;
min-height: calc(100 * var(--to-rem));
margin-top: calc(20 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem));
text-align: center;
}
@media screen and (max-width: 767px) {
.c-caseCard__info {
min-height: calc(86 * var(--to-rem));
margin-top: calc(11 * var(--to-rem));
}
}
.c-caseCard__bracketOpen {
position: absolute;
top: 0;
left: 0;
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
border-top: 2px solid var(--color-navy);
border-left: 2px solid var(--color-navy);
}
.c-caseCard__bracketClose {
position: absolute;
right: 0;
bottom: 0;
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
border-right: 2px solid var(--color-navy);
border-bottom: 2px solid var(--color-navy);
}
.c-caseCard__name,
.c-caseCard__univ {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 600;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.c-caseCard__name,
.c-caseCard__univ {
font-size: calc(20 * var(--to-rem));
}
}
.c-caseCard__univ {
display: inline-block;
width: max-content;
max-width: 100%;
}
.c-caseCard__school {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.c-caseCard__school {
font-size: calc(10 * var(--to-rem));
}
}
.c-caseCard__headline {
margin-top: calc(10 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: 600;
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 767px) {
.c-caseCard__headline {
font-size: calc(18 * var(--to-rem));
}
}
.c-caseCard__text {
margin-top: calc(10 * var(--to-rem));
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
}
.c-caseCard__tags {
display: flex;
flex-direction: row;
gap: calc(10 * var(--to-rem));
align-items: flex-start;
margin-top: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-caseCard__tags {
gap: calc(5 * var(--to-rem));
}
}
.c-caseCard__tagsCol {
display: flex;
flex-direction: column;
gap: calc(3 * var(--to-rem));
align-items: flex-start;
}
.c-caseCard__tagsCol--period {
gap: 0;
}
.c-caseCard__tag {
display: inline-block;
width: max-content;
max-width: 100%;
padding-block: calc(3 * var(--to-rem));
padding-inline: calc(7 * var(--to-rem));
border: 1px solid var(--color-blue-mid);
border-radius: calc(2 * var(--to-rem));
background: var(--color-white);
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.c-caseCard__tag {
font-size: calc(13 * var(--to-rem));
padding-block: calc(4 * var(--to-rem));
padding-inline: calc(6 * var(--to-rem));
}
}
.c-caseCard__tagNote {
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
white-space: nowrap;
}
.c-caseCard__overlay {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: calc(30 * var(--to-rem)) 0 calc(30 * var(--to-rem)) 0;
background: rgba(90, 178, 242, 0.9);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration) ease;
}
@media screen and (max-width: 767px) {
.c-caseCard__overlay {
display: none;
}
}
.c-caseCard:hover .c-caseCard__overlay {
opacity: 1;
}
.c-caseCard__overlayText {
color: var(--color-white);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 600;
line-height: 1.5;
text-align: center;
transform: translateY(calc(-16 * var(--to-rem)));
}
.c-moreLink {
display: inline-flex;
position: relative;
align-items: center;
gap: calc(6 * var(--to-rem));
padding-block-end: calc(3 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
text-decoration: none;
}
.c-moreLink::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(1 * var(--to-rem));
background-color: currentcolor;
content: "";
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration) ease;
}
@media (any-hover: hover) {
.c-moreLink:hover::before {
transform: scaleX(1);
}
}
@media screen and (max-width: 767px) {
.c-moreLink {
font-size: calc(14 * var(--to-rem));
}
}
.c-moreLink__arrow {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: calc(10 * var(--to-rem));
height: calc(12 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-moreLink__arrow {
width: calc(6 * var(--to-rem));
height: calc(7 * var(--to-rem));
}
}
.c-moreLink__arrow svg {
width: 100%;
height: 100%;
}
.c-page-title {
display: flex;
flex-direction: column;
}
@media screen and (max-width: 767px) {
.c-page-title {
gap: calc(4 * var(--to-rem));
}
}
.c-page-title__en {
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
color: var(--color-navy-30);
}
@media screen and (max-width: 767px) {
.c-page-title__en {
font-size: calc(18 * var(--to-rem));
}
}
.c-page-title__ja {
font-family: var(--serif-font-family);
font-size: calc(32 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.c-page-title__ja {
font-size: calc(24 * var(--to-rem));
}
} .c-pagination { --_pagination-bg: var(--color-white, #fff);
--_pagination-text: var(--color-text);
--_pagination-text-hover: #374151;
--_pagination-bg-hover: #f9fafb;
--_pagination-active-bg: var(--color-black, #000);
--_pagination-active-text: var(--color-white, #fff);
--_pagination-border: #d1d5db;
--_pagination-border-hover: #9ca3af;
display: flex;
flex-wrap: wrap;
gap: calc(8 * var(--to-rem));
justify-content: center;
}
.c-pagination__item {
display: inline-flex;
justify-content: center;
align-items: center;
height: calc(40 * var(--to-rem));
min-width: calc(40 * var(--to-rem));
padding-block: 0;
padding-inline: calc(12 * var(--to-rem));
border: 1px solid var(--_pagination-border);
background-color: var(--_pagination-bg);
color: var(--_pagination-text);
font-size: calc(14 * var(--to-rem));
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
@media screen and (max-width: 767px) {
.c-pagination__item {
height: calc(44 * var(--to-rem));
min-width: calc(44 * var(--to-rem));
font-size: calc(15 * var(--to-rem));
}
}
@media (any-hover: hover) {
.c-pagination__item:hover:not([data-state=current]) {
border-color: var(--_pagination-border-hover);
background-color: var(--_pagination-bg-hover);
color: var(--_pagination-text-hover);
}
}
.c-pagination__item[data-state=current] {
border-color: var(--_pagination-active-bg);
background-color: var(--_pagination-active-bg);
color: var(--_pagination-active-text);
}
.c-pagination__item[data-state=dots] {
border-color: transparent;
background-color: transparent;
cursor: default;
}
.c-pagination__item[data-state=dots]:hover {
border-color: transparent;
background-color: transparent;
}
.c-pagination__item[data-state=prev],
.c-pagination__item[data-state=next] {
font-weight: var(--fw-medium, 500);
}
.c-pagination__item[data-state=disabled] {
opacity: 0.6;
cursor: default;
}
@media (any-hover: hover) {
.c-pagination__item[data-state=disabled]:hover {
border-color: var(--_pagination-border);
background-color: var(--_pagination-bg);
color: var(--_pagination-text);
}
}
.c-section-title {
display: flex;
align-items: baseline;
gap: calc(14 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-section-title {
gap: calc(5 * var(--to-rem));
}
}
.c-section-title__en {
font-family: var(--serif-font-family);
font-size: calc(62 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.4;
padding-block-end: calc(12 * var(--to-rem));
background: linear-gradient(to right, rgba(32, 119, 207, 0.5), rgba(90, 178, 242, 0.4));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
@media screen and (max-width: 767px) {
.c-section-title__en {
font-size: calc(36 * var(--to-rem));
line-height: 1.3;
padding-block-end: calc(0 * var(--to-rem));
}
}
.c-section-title[data-size=sm] .c-section-title__en {
font-size: calc(46 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-section-title[data-size=sm] .c-section-title__en {
font-size: calc(28 * var(--to-rem));
}
}
.c-section-title__ja {
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.c-section-title__ja {
font-size: calc(16 * var(--to-rem));
}
}
.c-triangle {
display: inline-block;
width: calc(64 * var(--to-rem));
aspect-ratio: 1/1;
background-color: var(--color-black);
}
.c-triangle[data-direction=top] {
clip-path: var(--clip-triangle-top);
}
.c-triangle[data-direction=bottom] {
clip-path: var(--clip-triangle-bottom);
}
.c-triangle[data-direction=left] {
clip-path: var(--clip-triangle-left);
}
.c-triangle[data-direction=right] {
clip-path: var(--clip-triangle-right);
}
.c-triangle[data-direction=lower-left] {
clip-path: var(--clip-triangle-lower-left);
}
.c-triangle[data-direction=upper-left] {
clip-path: var(--clip-triangle-upper-left);
}
.c-triangle[data-direction=lower-right] {
clip-path: var(--clip-triangle-lower-right);
}
.c-triangle[data-direction=upper-right] {
clip-path: var(--clip-triangle-upper-right);
}
.p-topMv {
position: relative;
overflow: hidden;
height: calc(var(--header-height) + 574 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv {
--mv-to-rem: 1px;
height: calc(627 * var(--mv-to-rem));
}
}
@media screen and (max-width: 600px) {
.p-topMv {
--mv-to-rem: calc(100vw / 390);
}
}
.p-topMv__bg {
position: absolute;
top: var(--header-height);
left: 0;
z-index: 0;
width: 100%;
height: calc(504 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__bg {
height: calc(465 * var(--mv-to-rem));
}
}
.p-topMv__bgPicture {
display: block;
width: 100%;
height: 100%;
}
.p-topMv__bgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
@media screen and (max-width: 767px) {
.p-topMv__bgImg {
object-position: center top;
}
}
.p-topMv__gradient {
display: none;
}
@media screen and (max-width: 767px) {
.p-topMv__gradient {
display: block;
position: absolute;
top: calc(62 * var(--mv-to-rem));
left: 0;
width: 100%;
height: calc(435 * var(--mv-to-rem));
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 26.8%, #fff 100%);
z-index: 1;
pointer-events: none;
}
}
.p-topMv__body {
position: relative;
z-index: 2;
padding-top: var(--header-height);
}
.p-topMv__copy {
position: relative;
z-index: 2;
padding-inline-start: calc(104 * var(--to-rem));
margin-top: calc(50 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__copy {
padding-inline-start: 0;
text-align: center;
margin-top: calc(254 * var(--mv-to-rem));
}
}
.p-topMv__titleSubWrap {
display: block;
width: calc(697 * var(--to-rem));
height: calc(60 * var(--to-rem));
background-color: #fff;
padding-inline: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__titleSubWrap {
display: block;
width: auto;
height: auto;
background-color: transparent;
padding-inline: 0;
}
}
.p-topMv__titleSub {
display: flex;
align-items: flex-end;
justify-content: flex-start;
gap: 0;
font-family: var(--serif-font-family);
font-weight: 600;
color: #2077cf;
text-shadow: 0 0 7px #fff;
line-height: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__titleSub {
line-height: normal;
justify-content: center;
}
}
.p-topMv__titleSubLg {
font-size: calc(42 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__titleSubLg {
font-size: calc(18 * var(--mv-to-rem));
}
}
.p-topMv__titleSubSm {
font-size: calc(28 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__titleSubSm {
font-size: calc(16 * var(--mv-to-rem));
}
}
.p-topMv__titleMainWrap {
display: block;
width: calc(628 * var(--to-rem));
min-height: calc(121 * var(--to-rem));
background-color: #fff;
padding-block: calc(8 * var(--to-rem)) calc(12 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
margin-top: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__titleMainWrap {
display: block;
width: auto;
min-height: 0;
background-color: transparent;
padding-block: 0;
padding-inline: 0;
margin-top: 0;
}
}
.p-topMv__titleMain {
display: inline-block;
font-family: var(--serif-font-family);
font-weight: 600;
color: #2077cf;
font-size: calc(84 * var(--to-rem));
line-height: 1.2;
text-shadow: 0 0 7px #fff;
}
@media screen and (max-width: 767px) {
.p-topMv__titleMain {
font-size: calc(46 * var(--mv-to-rem));
line-height: normal;
}
}
.p-topMv__desc {
position: relative;
z-index: 2;
width: calc(975 * var(--to-rem));
max-width: 100%;
min-height: calc(139 * var(--to-rem));
margin-top: calc(20 * var(--to-rem));
overflow: hidden;
padding-top: calc(19 * var(--to-rem));
padding-inline-start: calc(124 * var(--to-rem));
padding-inline-end: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__desc {
width: 100%;
min-height: calc(120 * var(--mv-to-rem));
padding-top: calc(5 * var(--mv-to-rem));
padding-inline: calc(20 * var(--mv-to-rem));
margin-top: calc(10 * var(--mv-to-rem));
}
}
.p-topMv__descBg {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
.p-topMv__descBg img {
width: 100%;
height: 100%;
object-fit: fill;
}
.p-topMv__descText {
position: relative;
z-index: 1;
font-family: var(--serif-font-family);
font-weight: 600;
color: #fff;
font-size: calc(18 * var(--to-rem));
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topMv__descText {
font-size: calc(12 * var(--mv-to-rem));
}
}
.p-topMv__ctaArea {
position: absolute;
top: calc(519 * var(--to-rem));
left: 50%;
z-index: 1;
display: flex;
width: calc(1400 * var(--to-rem));
min-height: calc(118 * var(--to-rem));
background-color: #e5f3fe;
border-radius: calc(10 * var(--to-rem));
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.p-topMv__ctaArea {
top: calc(517 * var(--mv-to-rem));
width: calc(370 * var(--mv-to-rem));
min-height: calc(110 * var(--mv-to-rem));
border-radius: calc(6 * var(--mv-to-rem));
}
}
.p-topMv__ctaInner {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 767px) {
.p-topMv__ctaInner {
align-items: flex-end;
padding-block: 0 calc(10 * var(--mv-to-rem));
}
}
.p-topMv__ctaBtnWrap {
position: relative;
display: inline-flex;
}
.p-topMv__ctaFree {
position: absolute;
bottom: calc(100% - 25 * var(--to-rem));
left: calc(-20 * var(--to-rem));
z-index: 2;
width: calc(206 * var(--to-rem));
line-height: 0;
}
@media screen and (max-width: 767px) {
.p-topMv__ctaFree {
bottom: calc(100% - 22 * var(--mv-to-rem));
left: calc(-10 * var(--mv-to-rem));
width: calc(110 * var(--mv-to-rem));
}
}
.p-topMv__ctaFreeImg {
display: block;
width: 100%;
height: auto;
}
.p-topMv__ctaBtn {
display: flex;
align-items: center;
justify-content: center;
gap: calc(12 * var(--to-rem));
width: calc(680 * var(--to-rem));
min-height: calc(78 * var(--to-rem));
padding-inline: calc(21 * var(--to-rem));
background-color: var(--color-line-green);
border-radius: calc(5 * var(--to-rem));
box-shadow: 2px 2px 4px rgba(70, 95, 80, 0.25);
text-decoration: none;
transition: opacity var(--duration) ease;
}
.p-topMv__ctaBtn:hover {
opacity: 0.8;
}
@media screen and (max-width: 767px) {
.p-topMv__ctaBtn {
width: calc(350 * var(--mv-to-rem));
min-height: calc(60 * var(--mv-to-rem));
gap: calc(8 * var(--mv-to-rem));
border-radius: calc(5 * var(--mv-to-rem));
padding-inline: calc(20 * var(--mv-to-rem));
}
}
.p-topMv__ctaBtnIcon {
width: calc(59 * var(--to-rem));
height: calc(59 * var(--to-rem));
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.p-topMv__ctaBtnIcon {
width: calc(40 * var(--mv-to-rem));
height: calc(40 * var(--mv-to-rem));
}
}
.p-topMv__ctaBtnText {
text-shadow: 2px 2px 4px rgba(70, 95, 80, 0.25);
color: #fff;
font-family: var(--base-font-family);
font-weight: var(--fw-medium);
}
.p-topMv__ctaBtnTextA {
font-size: calc(32 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__ctaBtnTextA {
font-size: calc(18 * var(--mv-to-rem));
}
}
.p-topMv__ctaBtnTextB {
font-size: calc(28 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__ctaBtnTextB {
font-size: calc(18 * var(--mv-to-rem));
}
}
.p-topService {
position: relative;
overflow: hidden;
padding-block: calc(60 * var(--to-rem)) calc(0 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService {
padding-block: calc(66 * var(--to-rem)) calc(0 * var(--to-rem));
}
}
.p-topService__inner {
position: relative;
z-index: 1;
max-width: calc(1200 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-topService__inner {
padding-inline: calc(20 * var(--to-rem));
}
}
.p-topService__desc {
margin-top: calc(20 * var(--to-rem));
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topService__desc {
margin-top: calc(12 * var(--to-rem));
}
}
.p-topService__caption {
margin-top: calc(10 * var(--to-rem));
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topService__caption {
margin-top: calc(8 * var(--to-rem));
}
}
.p-topService__features {
margin-top: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__features {
margin-top: calc(36 * var(--to-rem));
}
}
.p-topService__featuresHead {
display: flex;
align-items: center;
justify-content: center;
gap: calc(24 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__featuresHead {
gap: calc(12 * var(--to-rem));
}
}
.p-topService__featuresHeadLine {
flex-shrink: 0;
width: calc(262 * var(--to-rem));
height: calc(1 * var(--to-rem));
background-color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-topService__featuresHeadLine {
width: calc(39 * var(--to-rem));
}
}
.p-topService__featuresTitle {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(32 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
letter-spacing: 0.02em;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-topService__featuresTitle {
font-size: calc(19 * var(--to-rem));
white-space: nowrap;
}
}
.p-topService__featuresTitleEm {
font-size: calc(42 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__featuresTitleEm {
font-size: calc(20 * var(--to-rem));
}
}
.p-topService__featuresList {
max-width: calc(1000 * var(--to-rem));
margin-top: calc(55 * var(--to-rem));
margin-inline: auto;
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__featuresList {
margin-top: calc(18 * var(--to-rem));
grid-template-columns: repeat(2, 1fr);
}
}
.p-topService__featureItem {
display: flex;
}
.p-topService__featureCard {
position: relative;
width: 100%;
height: calc(205 * var(--to-rem));
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
padding-block: calc(20 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border: 2px solid var(--color-blue-mid);
border-radius: calc(10 * var(--to-rem));
background-color: var(--color-white);
box-shadow: 0 0 calc(10 * var(--to-rem)) 0 rgba(1, 49, 89, 0.35);
text-decoration: none;
cursor: pointer;
transition: transform var(--duration) ease, box-shadow var(--duration) ease;
}
.p-topService__featureCard:hover {
box-shadow: 0 calc(4 * var(--to-rem)) calc(14 * var(--to-rem)) 0 rgba(1, 49, 89, 0.35);
}
@media screen and (max-width: 767px) {
.p-topService__featureCard {
height: calc(151 * var(--to-rem));
padding-block: calc(10 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
border-radius: calc(10 * var(--to-rem));
}
}
.p-topService__featureTitle {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-topService__featureTitle {
font-size: calc(16 * var(--to-rem));
}
}
.p-topService__featureIcon {
margin-top: calc(20 * var(--to-rem));
align-self: center;
justify-self: center;
display: flex;
justify-content: center;
align-items: center;
height: calc(80 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__featureIcon {
margin-top: calc(0 * var(--to-rem));
height: calc(50 * var(--to-rem));
}
}
.p-topService__featureIcon img {
display: block;
width: auto;
max-width: 100%;
height: 100%;
object-fit: contain;
}
.p-topService__featureLink {
margin-top: calc(20 * var(--to-rem));
display: inline-flex;
align-items: center;
gap: calc(10 * var(--to-rem));
align-self: end;
justify-self: end;
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
}
@media screen and (max-width: 767px) {
.p-topService__featureLink {
margin-top: calc(0 * var(--to-rem));
gap: calc(4 * var(--to-rem));
font-size: calc(10 * var(--to-rem));
}
}
.p-topService__featureLinkLabel {
display: inline-block;
}
.p-topService__featureLinkArrow {
position: relative;
display: inline-block;
width: calc(30 * var(--to-rem));
height: calc(20 * var(--to-rem));
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.p-topService__featureLinkArrow {
width: calc(18 * var(--to-rem));
height: calc(12 * var(--to-rem));
}
}
.p-topService__featureLinkArrowLine {
position: absolute;
top: 50%;
left: 0;
width: calc(20 * var(--to-rem));
height: calc(1 * var(--to-rem));
background-color: rgba(90, 178, 242, 0.2);
}
@media screen and (max-width: 767px) {
.p-topService__featureLinkArrowLine {
width: calc(12 * var(--to-rem));
}
}
.p-topService__featureLinkArrowCircle {
position: absolute;
top: 50%;
right: 0;
width: calc(20 * var(--to-rem));
height: calc(20 * var(--to-rem));
transform: translateY(-50%);
border: calc(1 * var(--to-rem)) solid rgba(90, 178, 242, 0.2);
border-radius: 50%;
background-color: rgba(90, 178, 242, 0.2);
}
@media screen and (max-width: 767px) {
.p-topService__featureLinkArrowCircle {
width: calc(12 * var(--to-rem));
height: calc(12 * var(--to-rem));
}
}
.p-topService__grades {
margin-top: calc(120 * var(--to-rem));
margin-inline: auto;
list-style: none;
display: grid;
grid-template-columns: repeat(2, calc(320 * var(--to-rem)));
justify-content: center;
column-gap: calc(100 * var(--to-rem));
row-gap: calc(31 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__grades {
margin-top: calc(40 * var(--to-rem));
grid-template-columns: minmax(0, calc(320 * var(--to-rem)));
row-gap: calc(40 * var(--to-rem));
}
}
.p-topService__gradeCard {
display: flex;
flex-direction: column;
width: calc(320 * var(--to-rem));
min-height: calc(405 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__gradeCard {
position: relative;
min-height: auto;
overflow: visible;
isolation: isolate;
}
}
.p-topService__gradeCard--blue {
--grade-color: #2077cf;
--grade-text-color: #2077cf;
--grade-button-border-color: #2077cf;
}
.p-topService__gradeCard--green {
--grade-color: #06c755;
--grade-text-color: #06c755;
--grade-button-border-color: #06c755;
}
.p-topService__gradeCard--orange {
--grade-color: rgba(255, 107, 0, 0.6);
--grade-text-color: rgba(255, 107, 0, 0.6);
--grade-button-border-color: rgba(241, 130, 50, 0.6);
}
.p-topService__gradeCard--gray {
--grade-color: #929292;
--grade-text-color: var(--color-text);
--grade-button-border-color: #929292;
}
@media screen and (max-width: 767px) {
.p-topService__gradeCard > :not(.p-topService__gradeDecor) {
position: relative;
z-index: 1;
}
}
.p-topService__gradeDecor {
display: none;
}
@media screen and (max-width: 767px) {
.p-topService__gradeDecor {
position: absolute;
display: block;
z-index: 0;
pointer-events: none;
}
.p-topService__gradeDecor::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--deco-pill-width);
height: var(--deco-pill-height);
background-color: rgba(90, 178, 242, 0.1);
border-radius: calc(65 * var(--to-rem));
transform: translate(-50%, -50%) rotate(-45deg);
}
}
@media screen and (max-width: 767px) {
.p-topService__gradeDecor--blue-top {
top: calc(-18 * var(--to-rem));
left: calc(-120 * var(--to-rem));
width: calc(140 * var(--to-rem));
height: calc(140 * var(--to-rem));
--deco-pill-width: calc(182 * var(--to-rem));
--deco-pill-height: calc(16 * var(--to-rem));
}
.p-topService__gradeDecor--blue-main {
top: calc(51 * var(--to-rem));
left: calc(-178 * var(--to-rem));
width: calc(204 * var(--to-rem));
height: calc(204 * var(--to-rem));
--deco-pill-width: calc(239 * var(--to-rem));
--deco-pill-height: calc(48 * var(--to-rem));
}
.p-topService__gradeDecor--blue-sub {
top: calc(206 * var(--to-rem));
left: calc(-87.668 * var(--to-rem));
width: calc(71 * var(--to-rem));
height: calc(71 * var(--to-rem));
--deco-pill-width: calc(84 * var(--to-rem));
--deco-pill-height: calc(16 * var(--to-rem));
}
.p-topService__gradeDecor--orange-main {
top: calc(-130 * var(--to-rem));
left: calc(-213 * var(--to-rem));
width: calc(234 * var(--to-rem));
height: calc(234 * var(--to-rem));
--deco-pill-width: calc(304 * var(--to-rem));
--deco-pill-height: calc(27 * var(--to-rem));
}
.p-topService__gradeDecor--orange-top {
top: calc(150 * var(--to-rem));
left: calc(271 * var(--to-rem));
width: calc(155 * var(--to-rem));
height: calc(155 * var(--to-rem));
--deco-pill-width: calc(188 * var(--to-rem));
--deco-pill-height: calc(31 * var(--to-rem));
}
.p-topService__gradeDecor--orange-sub {
top: calc(202 * var(--to-rem));
left: calc(342 * var(--to-rem));
width: calc(90 * var(--to-rem));
height: calc(90 * var(--to-rem));
--deco-pill-width: calc(116 * var(--to-rem));
--deco-pill-height: calc(10 * var(--to-rem));
}
}
.p-topService__gradeTab {
position: relative;
padding-block: calc(13 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border-radius: calc(28 * var(--to-rem));
background-color: var(--grade-color);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-topService__gradeTab {
padding-block: calc(6 * var(--to-rem));
}
}
.p-topService__gradeTabLabel {
color: var(--color-white);
font-family: var(--base-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-bold);
line-height: 1.3;
letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
.p-topService__gradeTabLabel {
font-size: calc(18 * var(--to-rem));
}
}
.p-topService__gradeTabArrow {
position: absolute;
top: 100%;
left: 50%;
display: block;
width: calc(30 * var(--to-rem));
height: calc(13 * var(--to-rem));
background-color: var(--grade-color);
clip-path: polygon(50% 100%, 0 0, 100% 0);
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.p-topService__gradeTabArrow {
width: calc(22 * var(--to-rem));
height: calc(16 * var(--to-rem));
}
}
.p-topService__gradeText {
margin-top: calc(42 * var(--to-rem));
color: var(--grade-text-color);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topService__gradeText {
margin-top: calc(25 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-topService__gradeTags {
margin-top: auto;
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__gradeTags {
margin-top: calc(10 * var(--to-rem));
}
}
.p-topService__gradeTag {
position: relative;
width: calc(100 * var(--to-rem));
height: calc(100 * var(--to-rem));
margin-inline: auto;
display: flex;
justify-content: center;
align-items: center;
}
.p-topService__gradeTagImg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.p-topService__gradeTagLabel {
position: relative;
color: var(--grade-text-color);
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.4;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-topService__gradeTagLabel {
font-size: calc(15 * var(--to-rem));
}
}
.p-topService__gradeBtn {
display: flex;
width: 100%;
min-height: calc(40 * var(--to-rem));
margin-top: calc(19 * var(--to-rem));
align-items: center;
justify-content: center;
padding-block: calc(10 * var(--to-rem));
padding-inline: calc(16 * var(--to-rem));
border: 1px solid var(--grade-button-border-color);
border-radius: calc(24 * var(--to-rem));
background-color: var(--color-white);
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.1875;
text-decoration: none;
text-align: center;
transition: background-color var(--duration) ease, color var(--duration) ease;
}
@media (any-hover: hover) {
.p-topService__gradeBtn:hover {
background-color: var(--grade-button-border-color);
color: var(--color-white);
}
}
.p-topService__deco {
position: absolute;
top: 0;
left: 50%;
z-index: 0;
width: 100%;
max-width: calc(1200 * var(--to-rem));
height: 100%;
pointer-events: none;
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.p-topService__deco {
display: none;
}
}
.p-topService__decoPill {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.p-topService__decoPill::before {
content: "";
display: block;
width: var(--deco-pill-width);
height: var(--deco-pill-height);
background-color: var(--color-blue-light);
border-radius: calc(65 * var(--to-rem));
transform: rotate(-45deg);
}
.p-topService__decoPill--1 {
top: calc(867 * var(--to-rem));
left: calc(-76 * var(--to-rem));
width: calc(234 * var(--to-rem));
height: calc(234 * var(--to-rem));
--deco-pill-width: calc(304 * var(--to-rem));
--deco-pill-height: calc(27 * var(--to-rem));
}
.p-topService__decoPill--2 {
top: calc(867 * var(--to-rem));
left: calc(-76 * var(--to-rem));
width: calc(234 * var(--to-rem));
height: calc(234 * var(--to-rem));
--deco-pill-width: calc(304 * var(--to-rem));
--deco-pill-height: calc(27 * var(--to-rem));
}
.p-topService__decoPill--3 {
top: calc(1243 * var(--to-rem));
left: calc(-19 * var(--to-rem));
width: calc(119 * var(--to-rem));
height: calc(119 * var(--to-rem));
--deco-pill-width: calc(141 * var(--to-rem));
--deco-pill-height: calc(27 * var(--to-rem));
}
.p-topService__decoPill--4 {
top: calc(968 * var(--to-rem));
left: calc(-170 * var(--to-rem));
width: calc(340 * var(--to-rem));
height: calc(340 * var(--to-rem));
--deco-pill-width: calc(400 * var(--to-rem));
--deco-pill-height: calc(81 * var(--to-rem));
}
.p-topService__decoPill--5 {
top: calc(1319 * var(--to-rem));
left: calc(1030 * var(--to-rem));
width: calc(406 * var(--to-rem));
height: calc(406 * var(--to-rem));
--deco-pill-width: calc(492 * var(--to-rem));
--deco-pill-height: calc(81 * var(--to-rem));
}
.p-topService__decoPill--6 {
top: calc(1436 * var(--to-rem));
left: calc(1217 * var(--to-rem));
width: calc(234 * var(--to-rem));
height: calc(234 * var(--to-rem));
--deco-pill-width: calc(304 * var(--to-rem));
--deco-pill-height: calc(27 * var(--to-rem));
}
.p-topService__modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding-block: calc(20 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
opacity: 0;
visibility: hidden;
transition: opacity var(--duration) ease, visibility var(--duration) ease;
}
.p-topService__modal[hidden] {
display: none;
}
.p-topService__modal.is-open {
opacity: 1;
visibility: visible;
}
.p-topService__modalBackdrop {
position: absolute;
inset: 0;
background-color: rgba(1, 49, 89, 0.5);
cursor: pointer;
}
.p-topService__modalContainer {
position: relative;
width: 100%;
max-width: calc(972 * var(--to-rem));
max-height: calc(100vh - calc(40 * var(--to-rem)));
overflow-y: auto;
background-color: var(--color-white);
border: calc(3 * var(--to-rem)) solid var(--color-blue);
border-radius: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__modalContainer {
border-width: calc(2 * var(--to-rem));
border-radius: calc(14 * var(--to-rem));
max-height: calc(100vh - calc(20 * var(--to-rem)));
}
}
.p-topService__modalClose {
position: absolute;
top: calc(16 * var(--to-rem));
right: calc(16 * var(--to-rem));
z-index: 1;
width: calc(28 * var(--to-rem));
height: calc(28 * var(--to-rem));
background-color: transparent;
border: none;
cursor: pointer;
padding-block: 0;
padding-inline: 0;
}
@media screen and (max-width: 767px) {
.p-topService__modalClose {
top: calc(10 * var(--to-rem));
right: calc(10 * var(--to-rem));
width: calc(22 * var(--to-rem));
height: calc(22 * var(--to-rem));
}
}
.p-topService__modalCloseLine {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: calc(2 * var(--to-rem));
background-color: var(--color-navy);
border-radius: calc(1 * var(--to-rem));
}
.p-topService__modalCloseLine:nth-child(1) {
transform: translateY(-50%) rotate(45deg);
}
.p-topService__modalCloseLine:nth-child(2) {
transform: translateY(-50%) rotate(-45deg);
}
.p-topService__modalPanel {
display: flex;
align-items: stretch;
gap: calc(40 * var(--to-rem));
padding-block: calc(30 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__modalPanel {
flex-direction: column;
gap: calc(16 * var(--to-rem));
padding-block: calc(20 * var(--to-rem));
padding-inline: calc(16 * var(--to-rem));
}
}
.p-topService__modalPanel[hidden] {
display: none;
}
.p-topService__modalImg {
flex-shrink: 0;
width: calc(300 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__modalImg {
width: 100%;
}
}
.p-topService__modalImg img {
display: block;
width: 100%;
height: auto;
border-radius: calc(8 * var(--to-rem));
}
.p-topService__modalBody {
flex: 1;
min-width: 0;
}
.p-topService__modalTitle {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(32 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
.p-topService__modalTitle {
font-size: calc(20 * var(--to-rem));
}
}
.p-topService__modalDesc {
margin-top: calc(12 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topService__modalDesc {
margin-top: calc(10 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
body.is-modalOpen {
overflow: hidden;
}
.p-topNews {
padding-block: calc(33 * var(--to-rem)) 0;
}
@media screen and (max-width: 767px) {
.p-topNews {
padding-block: calc(20 * var(--to-rem));
}
}
.p-topNews__inner {
max-width: calc(1200 * var(--to-rem));
margin-inline: auto;
display: flex;
align-items: flex-start;
gap: calc(197 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topNews__inner {
max-width: 100%;
padding-inline: calc(20 * var(--to-rem));
flex-direction: column;
align-items: flex-start;
gap: calc(0 * var(--to-rem));
}
}
.p-topNews__head {
flex-shrink: 0;
}
.p-topNews__body {
flex: 1;
min-width: 0;
margin-top: calc(11 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topNews__body {
width: 100%;
}
}
.p-topNews__list {
list-style: none;
border-top: 1px solid var(--color-blue-mid);
}
.p-topNews__item {
display: flex;
align-items: center;
gap: calc(15 * var(--to-rem));
padding-block: calc(11 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
border-bottom: 1px solid var(--color-blue-mid);
background-color: #fff;
transition: background-color var(--duration) ease;
}
.p-topNews__item:hover {
background-color: var(--color-blue-light);
}
@media screen and (max-width: 767px) {
.p-topNews__item {
gap: calc(12 * var(--to-rem));
padding-block: calc(5 * var(--to-rem));
}
}
.p-topNews__date {
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
color: var(--color-navy);
flex-shrink: 0;
width: calc(100 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topNews__date {
font-size: calc(14 * var(--to-rem));
width: calc(88 * var(--to-rem));
}
}
.p-topNews__title {
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
color: var(--color-navy);
text-decoration: none;
transition: opacity var(--duration) ease;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.p-topNews__title:hover {
opacity: 0.7;
}
@media screen and (max-width: 767px) {
.p-topNews__title {
font-size: calc(14 * var(--to-rem));
}
}
.p-topNews__more {
margin-top: calc(30 * var(--to-rem));
text-align: right;
}
@media screen and (max-width: 767px) {
.p-topNews__more {
margin-top: calc(18 * var(--to-rem));
}
}
.p-topCase {
overflow: hidden;
padding-block: calc(37 * var(--to-rem)) calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topCase {
--to-rem: calc(100vw / 390);
padding-block: calc(30 * var(--to-rem)) calc(27 * var(--to-rem));
}
}
.p-topCase__head {
max-width: calc(1200 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-topCase__head {
padding-inline: calc(20 * var(--to-rem));
}
}
.p-topCase__desc {
margin-top: calc(26 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topCase__desc {
margin-top: calc(2 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-topCase__note {
margin-top: calc(14 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
text-align: right;
}
@media screen and (max-width: 767px) {
.p-topCase__note {
margin-top: calc(7 * var(--to-rem));
font-size: calc(10 * var(--to-rem));
text-align: left;
}
}
.p-topCase__sliderOuter {
position: relative;
max-width: calc(1200 * var(--to-rem));
margin-inline: auto;
margin-top: calc(4 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topCase__sliderOuter {
margin-top: calc(18 * var(--to-rem));
}
}
.p-topCase__swiper {
max-width: calc(1200 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topCase__swiper {
max-width: none;
padding-inline: calc(20 * var(--to-rem));
}
}
.p-topCase__swiper .swiper-wrapper {
padding-block: 0;
padding-inline: 0;
list-style: none;
}
.p-topCase__navBtn {
position: absolute;
top: 50%;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
width: calc(44 * var(--to-rem));
height: calc(44 * var(--to-rem));
padding-block: 0;
padding-inline: 0;
border: none;
background: none;
cursor: pointer;
transform: translateY(-50%);
transition: opacity var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-topCase__navBtn {
display: flex;
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
top: 50%;
transform: translateY(-50%);
}
}
.p-topCase__navBtn--prev {
left: calc(-60 * var(--to-rem));
}
@media screen and (min-width: 1440px) {
.p-topCase__navBtn--prev {
left: calc(-80 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-topCase__navBtn--prev {
left: 0;
}
}
.p-topCase__navBtn--next {
right: calc(-60 * var(--to-rem));
}
@media screen and (min-width: 1440px) {
.p-topCase__navBtn--next {
right: calc(-80 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-topCase__navBtn--next {
right: 0;
}
}
.p-topCase__navBtn svg {
width: 100%;
height: 100%;
}
.p-topCase__navCircle {
fill: transparent;
stroke: #2077cf;
stroke-width: 1;
transition: fill var(--duration) ease, stroke var(--duration) ease;
}
.p-topCase__navArrow {
fill: none;
stroke: #2077cf;
stroke-width: 1;
transition: stroke var(--duration) ease;
}
.p-topCase__navBtn:hover .p-topCase__navCircle {
fill: #2077cf;
stroke: #2077cf;
}
.p-topCase__navBtn:hover .p-topCase__navArrow {
stroke: #fff;
}
.p-topCase__pagination {
display: none;
}
@media screen and (max-width: 767px) {
.p-topCase__pagination {
position: static;
display: flex;
gap: calc(12 * var(--to-rem));
justify-content: center;
padding-block: calc(20 * var(--to-rem)) 0;
padding-inline: 0;
bottom: auto;
left: auto;
width: 100%;
}
}
.p-topCase__pagination .swiper-pagination-bullet {
width: calc(8 * var(--to-rem));
height: calc(8 * var(--to-rem));
margin: 0;
padding-block: 0;
padding-inline: 0;
border: none;
border-radius: 50%;
background: #d9d9d9;
opacity: 1;
cursor: pointer;
transition: background-color var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-topCase__pagination .swiper-pagination-bullet {
width: calc(10 * var(--to-rem));
height: calc(10 * var(--to-rem));
}
}
.p-topCase__pagination .swiper-pagination-bullet-active {
background: #2077cf;
transform: none;
opacity: 1;
}
.p-topCase__footer {
max-width: calc(1200 * var(--to-rem));
margin-top: calc(24 * var(--to-rem));
margin-inline: auto;
text-align: right;
}
@media screen and (max-width: 767px) {
.p-topCase__footer {
padding-inline: calc(20 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-topCase__footer .c-moreLink__arrow {
width: calc(10 * var(--to-rem));
height: calc(12 * var(--to-rem));
}
}
.p-caseArchive {
background-color: var(--color-white);
}
.p-caseArchive__hero {
position: relative;
overflow: hidden;
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseArchive__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-caseArchive__heroBgPicture,
.p-caseSingle__heroBgPicture {
display: block;
width: 100%;
height: 100%;
}
.p-caseArchive__heroBg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-caseArchive__heroBgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-caseArchive__heroInner {
position: relative;
z-index: 1;
}
.p-caseArchive__content {
padding-block: calc(60 * var(--to-rem)) calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseArchive__content {
padding-block: calc(52 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-caseArchive__inner {
max-width: calc(1280 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-caseArchive__inner {
max-width: calc(430 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-caseArchive__lead {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.p-caseArchive__lead {
font-size: calc(14 * var(--to-rem));
line-height: 1.8;
}
}
.p-caseArchive__note {
margin-top: calc(18 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
text-align: right;
}
@media screen and (max-width: 767px) {
.p-caseArchive__note {
margin-top: calc(12 * var(--to-rem));
font-size: calc(10 * var(--to-rem));
}
}
.p-caseArchive__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(20 * var(--to-rem));
margin-top: calc(18 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseArchive__grid {
--to-rem: calc(100vw / 390);
grid-template-columns: 1fr;
gap: calc(40 * var(--to-rem));
margin-top: calc(16 * var(--to-rem));
}
}
.p-caseArchive__grid .c-caseCard {
box-shadow: 0 calc(4 * var(--to-rem)) calc(12 * var(--to-rem)) 0 rgba(1, 49, 89, 0.15);
}
.p-caseArchive__lineCard {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(610 * var(--to-rem));
padding-block: calc(20 * var(--to-rem)) calc(41 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border-radius: calc(30 * var(--to-rem)) 0 calc(30 * var(--to-rem)) 0;
background-color: var(--color-blue-light);
box-shadow: 0 calc(4 * var(--to-rem)) calc(12 * var(--to-rem)) 0 rgba(1, 49, 89, 0.15);
}
@media screen and (max-width: 767px) {
.p-caseArchive__lineCard {
min-height: calc(544 * var(--to-rem));
padding-block: calc(20 * var(--to-rem)) calc(27 * var(--to-rem));
border-radius: calc(20 * var(--to-rem)) 0 calc(20 * var(--to-rem)) 0;
}
}
.p-caseArchive__lineCardImage {
overflow: hidden;
width: 100%;
height: calc(189 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseArchive__lineCardImage {
height: calc(167 * var(--to-rem));
}
}
.p-caseArchive__lineCardImg {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-caseArchive__lineCardText {
margin-top: calc(86 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 600;
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-caseArchive__lineCardText {
margin-top: calc(40 * var(--to-rem));
}
}
.p-caseArchive__lineCardBtn {
display: inline-flex;
gap: calc(3 * var(--to-rem));
justify-content: center;
align-items: center;
width: 100%;
min-height: calc(45 * var(--to-rem));
margin-top: auto;
border-radius: calc(5 * var(--to-rem));
background-color: var(--color-line-green);
color: var(--color-white);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
text-decoration: none;
transition: background-color var(--duration) ease;
}
@media (any-hover: hover) {
.p-caseArchive__lineCardBtn:hover {
background-color: #03b14c;
}
}
@media screen and (max-width: 767px) {
.p-caseArchive__lineCardBtn {
max-width: calc(310 * var(--to-rem));
}
}
.p-caseArchive__lineBtn img {
width: calc(45 * var(--to-rem));
height: calc(45 * var(--to-rem));
}
.p-caseArchive__lineCardBtnIcon {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(36 * var(--to-rem));
height: calc(36 * var(--to-rem));
}
.p-caseArchive__lineCardBtnIcon svg {
display: block;
width: 100%;
height: 100%;
}
.p-caseArchive__lineCardBtnIcon svg path {
stroke: currentColor;
}
.p-caseArchive__action,
.p-caseSingle__action {
display: flex;
justify-content: center;
margin-top: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseArchive__action,
.p-caseSingle__action {
margin-top: calc(40 * var(--to-rem));
}
}
.p-caseArchive__actionBtn,
.p-caseSingle__actionBtn {
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: calc(472 * var(--to-rem));
min-height: calc(76 * var(--to-rem));
padding-inline: calc(82 * var(--to-rem)) calc(30 * var(--to-rem));
border: calc(3 * var(--to-rem)) solid var(--color-blue-mid);
border-radius: calc(40 * var(--to-rem));
background-color: var(--color-white);
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
text-decoration: none;
transition: background-color var(--duration) ease, border-color var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-caseArchive__actionBtn,
.p-caseSingle__actionBtn {
max-width: calc(350 * var(--to-rem));
min-height: calc(49 * var(--to-rem));
padding-inline: calc(59 * var(--to-rem)) calc(58 * var(--to-rem));
border-width: calc(2 * var(--to-rem));
font-size: calc(16 * var(--to-rem));
}
}
.p-caseArchive__actionBtnText,
.p-caseSingle__actionBtnText {
white-space: nowrap;
}
.p-caseArchive__actionBtnIcon,
.p-caseSingle__actionBtnIcon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: calc(50 * var(--to-rem));
height: calc(50 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseArchive__actionBtnIcon,
.p-caseSingle__actionBtnIcon {
width: calc(20 * var(--to-rem));
height: calc(20 * var(--to-rem));
}
}
.p-caseArchive__actionBtnIcon svg,
.p-caseSingle__actionBtnIcon svg {
display: block;
width: 100%;
height: 100%;
}
.p-caseArchive__actionBtnIconBg,
.p-caseSingle__actionBtnIconBg {
fill: var(--color-blue-mid);
transition: fill var(--duration) ease;
}
.p-caseArchive__actionBtnIconArrow,
.p-caseSingle__actionBtnIconArrow {
stroke: var(--color-white);
transition: stroke var(--duration) ease;
}
@media (any-hover: hover) {
.p-caseArchive__actionBtn:hover,
.p-caseSingle__actionBtn:hover {
border-color: transparent;
background-color: var(--color-blue-mid);
}
.p-caseArchive__actionBtn:hover .p-caseArchive__actionBtnIconBg,
.p-caseSingle__actionBtn:hover .p-caseSingle__actionBtnIconBg {
fill: var(--color-white);
}
.p-caseArchive__actionBtn:hover .p-caseArchive__actionBtnIconArrow,
.p-caseSingle__actionBtn:hover .p-caseSingle__actionBtnIconArrow {
stroke: #5ab2f2;
}
}
.p-caseSingle {
background-color: var(--color-white);
}
.p-caseSingle__hero {
position: relative;
overflow: hidden;
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseSingle__hero {
padding-block: calc(68 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-caseSingle__heroBg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-caseSingle__heroBgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-caseSingle__heroInner {
position: relative;
z-index: 1;
}
.p-caseSingle__content {
padding-block: calc(53 * var(--to-rem)) calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseSingle__content {
padding-block: calc(32 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-caseSingle__inner {
max-width: calc(1280 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-caseSingle__inner {
padding-inline: calc(20 * var(--to-rem)) calc(30 * var(--to-rem));
}
}
.p-caseSingle__headline {
display: flex;
flex-direction: column;
gap: calc(2 * var(--to-rem));
align-items: center;
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 500;
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-caseSingle__headline {
font-size: calc(20 * var(--to-rem));
}
}
.p-caseSingle__headlineLine {
display: block;
}
.p-caseSingle__profile {
display: grid;
grid-template-columns: calc(180 * var(--to-rem)) minmax(0, 1fr);
gap: calc(60 * var(--to-rem));
align-items: start;
max-width: calc(740 * var(--to-rem));
margin-top: calc(10 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-caseSingle__profile {
grid-template-columns: 1fr;
gap: calc(22 * var(--to-rem));
max-width: calc(300 * var(--to-rem));
margin-top: calc(10 * var(--to-rem));
}
}
.p-caseSingle__student {
text-align: center;
}
.p-caseSingle__studentImage {
overflow: hidden;
width: calc(180 * var(--to-rem));
height: calc(180 * var(--to-rem));
margin-inline: auto;
border-radius: 50%;
}
@media screen and (max-width: 767px) {
.p-caseSingle__studentImage {
width: calc(100 * var(--to-rem));
height: calc(100 * var(--to-rem));
}
}
.p-caseSingle__studentPhoto {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.p-caseSingle__studentName {
margin-top: calc(14 * var(--to-rem));
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 500;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.p-caseSingle__studentName {
margin-top: calc(12 * var(--to-rem));
font-size: calc(20 * var(--to-rem));
}
}
.p-caseSingle__studentNote {
margin-top: calc(1 * var(--to-rem));
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(8 * var(--to-rem));
font-weight: 500;
line-height: 1.5;
}
.p-caseSingle__specList {
display: flex;
flex-direction: column;
gap: calc(10 * var(--to-rem));
margin-top: calc(17 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseSingle__specList {
gap: calc(15 * var(--to-rem));
margin-top: 0;
}
}
.p-caseSingle__specItem {
display: grid;
grid-template-columns: calc(184 * var(--to-rem)) minmax(0, 1fr);
gap: calc(20 * var(--to-rem));
align-items: center;
}
@media screen and (max-width: 767px) {
.p-caseSingle__specItem {
grid-template-columns: 1fr;
gap: calc(10 * var(--to-rem));
}
}
.p-caseSingle__specLabel {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(32 * var(--to-rem));
border: 1px solid #2077cf;
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: 500;
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-caseSingle__specLabel {
min-height: calc(22 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-caseSingle__specValue {
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: 500;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.p-caseSingle__specValue {
font-size: calc(14 * var(--to-rem));
text-align: center;
}
}
.p-caseSingle__qaList {
display: flex;
flex-direction: column;
gap: calc(23 * var(--to-rem));
max-width: calc(970 * var(--to-rem));
margin-top: calc(92 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-caseSingle__qaList {
gap: calc(25 * var(--to-rem));
max-width: calc(350 * var(--to-rem));
margin-top: calc(46 * var(--to-rem));
}
}
.p-caseSingle__qaQuestionWrap {
display: grid;
grid-template-columns: calc(50 * var(--to-rem)) minmax(0, 1fr);
gap: calc(10 * var(--to-rem));
align-items: start;
}
@media screen and (max-width: 767px) {
.p-caseSingle__qaQuestionWrap {
grid-template-columns: calc(30 * var(--to-rem)) minmax(0, 1fr);
}
}
.p-caseSingle__qaIcon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: calc(50 * var(--to-rem));
height: calc(50 * var(--to-rem));
color: var(--color-navy);
font-family: "Times New Roman", serif;
font-size: calc(24 * var(--to-rem));
font-weight: 400;
line-height: 1;
}
@media screen and (max-width: 767px) {
.p-caseSingle__qaIcon {
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
font-size: calc(16 * var(--to-rem));
}
}
.p-caseSingle__qaIconRing {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.p-caseSingle__qaIconText {
position: relative;
z-index: 1;
}
.p-caseSingle__qaQuestion {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-caseSingle__qaQuestion {
font-size: calc(18 * var(--to-rem));
}
}
.p-caseSingle__qaAnswer {
padding-inline-start: calc(60 * var(--to-rem));
color: var(--color-text);
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-caseSingle__qaAnswer {
padding-inline-start: calc(40 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-caseSingle__qaAnswer p + p {
margin-top: calc(4 * var(--to-rem));
}
.p-caseSingle__entry {
max-width: calc(970 * var(--to-rem));
margin-top: calc(92 * var(--to-rem));
margin-inline: auto;
color: var(--color-text);
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-caseSingle__entry {
max-width: calc(350 * var(--to-rem));
margin-top: calc(46 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-caseSingle__entry p + p {
margin-top: calc(10 * var(--to-rem));
}
.p-caseSingle__footer {
max-width: calc(1000 * var(--to-rem));
margin-top: calc(52 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-caseSingle__footer {
max-width: calc(350 * var(--to-rem));
margin-top: calc(39 * var(--to-rem));
}
}
.p-caseSingle__backLink {
display: inline-flex;
position: relative;
gap: calc(12 * var(--to-rem));
align-items: center;
padding-block-end: calc(3 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.2;
text-decoration: none;
}
.p-caseSingle__backLink::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(1 * var(--to-rem));
background-color: currentcolor;
content: "";
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration) ease;
}
@media (any-hover: hover) {
.p-caseSingle__backLink:hover::before {
transform: scaleX(1);
}
}
@media screen and (max-width: 767px) {
.p-caseSingle__backLink {
font-size: calc(14 * var(--to-rem));
}
}
.p-caseSingle__backLinkArrow {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: calc(10 * var(--to-rem));
height: calc(12 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseSingle__backLinkArrow {
width: calc(6 * var(--to-rem));
height: calc(7 * var(--to-rem));
}
}
.p-caseSingle__backLinkArrow svg {
width: 100%;
height: 100%;
transform: scaleX(-1);
}
.p-caseSingle__backLinkText {
display: inline-block;
}
.p-topVoice {
padding-block: calc(60 * var(--to-rem)) calc(50 * var(--to-rem));
background: linear-gradient(to right, rgba(90, 178, 242, 0.1), rgba(32, 119, 207, 0.3));
}
@media screen and (max-width: 767px) {
.p-topVoice {
padding-block: calc(18 * var(--to-rem)) calc(40 * var(--to-rem));
}
}
.p-topVoice__inner {
max-width: calc(1200 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-topVoice__inner {
max-width: 100%;
padding-inline: calc(20 * var(--to-rem));
}
}
.p-topVoice__head {
margin-block-end: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__head {
margin-block-end: calc(12 * var(--to-rem));
}
}
.p-topVoice__grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: calc(66 * var(--to-rem));
row-gap: calc(44 * var(--to-rem));
width: calc(1200 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__grid {
display: grid;
width: 100%;
grid-template-columns: 1fr;
row-gap: calc(30 * var(--to-rem));
}
}
.p-topVoice__card {
position: relative;
flex-shrink: 0;
width: calc(552 * var(--to-rem));
background: rgba(255, 255, 255, 0.6);
padding-block: calc(20 * var(--to-rem)) calc(19 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card {
width: 100%;
padding-block: calc(16 * var(--to-rem)) calc(22 * var(--to-rem));
padding-inline: calc(14 * var(--to-rem));
}
}
.p-topVoice__card:nth-child(2) {
margin-top: calc(16 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card:nth-child(2) {
margin-top: 0;
}
}
.p-topVoice__card:nth-child(3) {
margin-left: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card:nth-child(3) {
margin-left: 0;
}
}
.p-topVoice__card:nth-child(4) {
margin-top: calc(1 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card:nth-child(4) {
margin-top: 0;
}
}
.p-topVoice__card:nth-child(6) {
margin-top: calc(-12 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card:nth-child(6) {
margin-top: 0;
}
}
.p-topVoice__card::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: calc(100% - calc(56 * var(--to-rem)));
height: calc(100% - calc(56 * var(--to-rem)));
border-top: calc(1 * var(--to-rem)) solid var(--color-navy);
border-right: calc(1 * var(--to-rem)) solid var(--color-navy);
border-top-right-radius: calc(10 * var(--to-rem));
pointer-events: none;
}
@media screen and (max-width: 767px) {
.p-topVoice__card::before {
width: calc(100% - calc(40 * var(--to-rem)));
height: calc(100% - calc(40 * var(--to-rem)));
}
}
.p-topVoice__card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: calc(100% - calc(58 * var(--to-rem)));
height: calc(100% - calc(56 * var(--to-rem)));
border-bottom: calc(1 * var(--to-rem)) solid var(--color-navy);
border-left: calc(1 * var(--to-rem)) solid var(--color-navy);
border-bottom-left-radius: calc(10 * var(--to-rem));
pointer-events: none;
}
@media screen and (max-width: 767px) {
.p-topVoice__card::after {
width: calc(100% - calc(40 * var(--to-rem)));
height: calc(100% - calc(40 * var(--to-rem)));
}
}
.p-topVoice__cardSlash {
position: absolute;
bottom: calc(-14 * var(--to-rem));
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
pointer-events: none;
}
@media screen and (max-width: 767px) {
.p-topVoice__cardSlash {
bottom: calc(-10 * var(--to-rem));
width: calc(20 * var(--to-rem));
height: calc(20 * var(--to-rem));
}
}
.p-topVoice__cardSlash::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: calc(42 * var(--to-rem));
height: calc(1 * var(--to-rem));
background: var(--color-navy);
border-radius: calc(0.5 * var(--to-rem));
transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (max-width: 767px) {
.p-topVoice__cardSlash::before {
width: calc(28 * var(--to-rem));
}
}
.p-topVoice__card:nth-child(odd) .p-topVoice__cardSlash {
left: calc(100 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card:nth-child(odd) .p-topVoice__cardSlash {
left: calc(60 * var(--to-rem));
}
}
.p-topVoice__card:nth-child(even) .p-topVoice__cardSlash {
right: calc(70 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card:nth-child(even) .p-topVoice__cardSlash {
right: calc(60 * var(--to-rem));
}
}
.p-topVoice__card:nth-child(even) .p-topVoice__cardSlash::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.p-topVoice__cardDesc {
position: relative;
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
color: var(--color-navy);
line-height: 1.5;
margin-block-end: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__cardDesc {
font-size: calc(12 * var(--to-rem));
margin-block-end: calc(8 * var(--to-rem));
}
}
.p-topVoice__cardImg {
position: relative;
}
.p-topVoice__cardImg img {
display: block;
width: calc(512 * var(--to-rem));
max-width: 100%;
height: auto;
}
.p-topFaq,
.p-serviceFaq {
padding-block: calc(50 * var(--to-rem)) calc(50 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topFaq,
.p-serviceFaq {
padding-block: calc(20 * var(--to-rem));
}
}
.p-topFaq__inner {
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-topFaq__inner {
max-width: 100%;
padding-inline: calc(20 * var(--to-rem));
}
}
.p-topFaq__head,
.p-serviceFaq__head {
margin-block-end: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topFaq__head,
.p-serviceFaq__head {
margin-block-end: calc(6 * var(--to-rem));
}
}
.p-topFaq__list,
.p-serviceFaq__list {
padding-inline-start: 0;
list-style: none;
}
.p-topFaq__item,
.p-serviceFaq__item {
border-bottom: 1px solid var(--color-blue-mid);
}
.p-topFaq__item:last-child,
.p-serviceFaq__item:last-child {
border-bottom: 0;
}
.p-topFaq__question,
.p-serviceFaq__question {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: calc(20 * var(--to-rem));
padding-block: calc(28 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem));
border: 0;
background: transparent;
color: var(--color-navy);
font-family: var(--base-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.4;
text-align: left;
cursor: pointer;
transition: opacity var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-topFaq__question,
.p-serviceFaq__question {
gap: calc(12 * var(--to-rem));
padding-block: calc(13 * var(--to-rem));
padding-inline: calc(0 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-topFaq__question:hover,
.p-serviceFaq__question:hover {
opacity: 0.7;
}
.p-topFaq__questionText,
.p-serviceFaq__questionText {
flex: 1;
}
.p-topFaq__icon,
.p-serviceFaq__icon {
display: inline-flex;
flex-shrink: 0;
width: calc(26 * var(--to-rem));
height: calc(19 * var(--to-rem));
align-items: center;
justify-content: center;
color: var(--color-navy);
transition: transform 0.35s ease;
}
@media screen and (max-width: 767px) {
.p-topFaq__icon,
.p-serviceFaq__icon {
width: calc(15 * var(--to-rem));
height: calc(11 * var(--to-rem));
}
}
.p-topFaq__icon svg,
.p-serviceFaq__icon svg {
display: block;
width: 100%;
height: 100%;
}
.p-topFaq__item.is-open .p-topFaq__icon,
.p-serviceFaq__item.is-open .p-serviceFaq__icon {
transform: scaleY(-1);
}
.p-topFaq__answer,
.p-serviceFaq__answer {
padding-block: 0 calc(28 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem)) calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topFaq__answer,
.p-serviceFaq__answer {
padding-block: 0 calc(16 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
}
}
.p-topFaq__answerText,
.p-serviceFaq__answerText {
color: var(--color-navy);
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topFaq__answerText,
.p-serviceFaq__answerText {
font-size: calc(14 * var(--to-rem));
}
}
.p-topFaq__answerLink,
.p-serviceFaq__answerLink {
display: inline-block;
margin-top: calc(8 * var(--to-rem));
color: #2077cf;
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
text-decoration: underline;
word-break: break-all;
transition: opacity var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-topFaq__answerLink,
.p-serviceFaq__answerLink {
font-size: calc(14 * var(--to-rem));
}
}
.p-serviceFaq__inner {
max-width: calc(1080 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-serviceFaq__inner {
max-width: calc(540 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-about {
background-color: var(--color-white);
}
.p-about .c-section-title__en {
font-size: calc(46 * var(--to-rem));
padding-block-end: calc(8 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about .c-section-title__en {
font-size: calc(28 * var(--to-rem));
padding-block-end: calc(6 * var(--to-rem));
}
}
.p-about__hero {
position: relative;
overflow: hidden;
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-about__heroBg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-about__heroBgPicture {
display: block;
width: 100%;
height: 100%;
}
.p-about__heroBgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-about__heroInner {
position: relative;
z-index: 1;
}
.p-about__vision {
padding-block: calc(46 * var(--to-rem)) calc(0 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__vision {
padding-block: calc(30 * var(--to-rem)) calc(17 * var(--to-rem));
}
}
.p-about__vision .c-section-title {
padding-left: calc(100 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__vision .c-section-title {
padding-left: 0;
}
}
@media screen and (max-width: 767px) {
.p-about .c-section-title__en {
font-size: calc(36 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-about .c-section-title__ja {
font-size: calc(14 * var(--to-rem));
}
}
.p-about__visionHeadline {
margin-top: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(32 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.8;
color: var(--color-navy);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-about__visionHeadline {
margin-top: calc(3 * var(--to-rem));
font-size: calc(20 * var(--to-rem));
text-align: left;
}
}
.p-about__message {
position: relative;
padding-block: calc(64 * var(--to-rem)) calc(0 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__message {
padding-block: calc(20 * var(--to-rem)) calc(0 * var(--to-rem));
}
}
.p-about__messageBgRight {
position: absolute;
z-index: 0;
background-color: var(--color-blue-light);
top: calc(60 * var(--to-rem));
right: 0;
width: calc(50% + calc(101 * var(--to-rem)));
height: calc(439 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__messageBgRight {
top: calc(350 * var(--to-rem));
width: calc(330 * var(--to-rem));
height: calc(780 * var(--to-rem));
}
}
.p-about__messageInner {
position: relative;
z-index: 1;
}
.p-about__messageHead {
position: relative;
z-index: 2;
padding-left: calc(100 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__messageHead {
padding-left: 0;
}
}
.p-about__messageBody {
margin-top: calc(12 * var(--to-rem));
padding-left: calc(100 * var(--to-rem));
display: grid;
grid-template-columns: calc(309 * var(--to-rem)) 1fr;
column-gap: calc(31 * var(--to-rem));
align-items: start;
}
@media screen and (max-width: 767px) {
.p-about__messageBody {
margin-top: calc(-22 * var(--to-rem));
padding-left: 0;
grid-template-columns: 1fr;
row-gap: calc(40 * var(--to-rem));
}
}
.p-about__messageProfile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: calc(27 * var(--to-rem));
}
.p-about__messagePhoto {
width: calc(309 * var(--to-rem));
max-width: 100%;
}
.p-about__messagePhotoImg {
display: block;
width: 100%;
height: auto;
}
.p-about__messageRole {
margin-top: calc(18 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.8;
color: var(--color-text);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-about__messageRole {
margin-top: calc(20 * var(--to-rem));
}
}
.p-about__messageName {
margin-top: calc(0 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.8;
color: var(--color-text);
text-align: center;
}
.p-about__messageCard {
position: relative;
z-index: 1;
background-color: var(--color-white);
padding-block: calc(30 * var(--to-rem)) calc(40 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__messageCard {
margin-left: calc(-20 * var(--to-rem));
padding-block: calc(20 * var(--to-rem)) calc(20 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem)) calc(10 * var(--to-rem));
}
}
.p-about__messageHeadline {
font-family: var(--serif-font-family);
font-size: calc(28 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-about__messageHeadline {
font-size: calc(20 * var(--to-rem));
}
}
.p-about__messageDivider {
display: block;
margin-top: calc(20 * var(--to-rem));
width: 100%;
height: calc(2 * var(--to-rem));
border-radius: calc(50 * var(--to-rem));
background-color: var(--color-blue-light);
}
@media screen and (max-width: 767px) {
.p-about__messageDivider {
margin-top: calc(0 * var(--to-rem));
margin-inline: calc(-10 * var(--to-rem));
width: calc(100% + calc(20 * var(--to-rem)));
}
}
.p-about__messageText {
margin-top: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.6;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-about__messageText {
margin-top: calc(8 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-about__messageText p {
margin-top: calc(22 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__messageText p {
margin-top: calc(24 * var(--to-rem));
}
}
.p-about__messageText p:first-child {
margin-top: 0;
}
.p-about__messageText strong {
font-weight: var(--fw-bold);
color: var(--color-navy);
}
.p-about__outline {
padding-block: calc(54 * var(--to-rem)) calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__outline {
padding-block: calc(4 * var(--to-rem)) calc(60 * var(--to-rem));
}
}
.p-about__outlineHead {
padding-left: calc(100 * var(--to-rem));
margin-bottom: calc(28 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__outlineHead {
padding-left: 0;
margin-bottom: calc(4 * var(--to-rem));
}
}
.p-about__outlineList {
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-about__outlineList {
max-width: calc(500 * var(--to-rem));
}
}
.p-about__outlineRow {
display: grid;
grid-template-columns: calc(300 * var(--to-rem)) 1fr;
align-items: center;
}
@media screen and (max-width: 767px) {
.p-about__outlineRow {
grid-template-columns: calc(106 * var(--to-rem)) 1fr;
}
}
.p-about__outlineTerm {
padding-block: calc(16 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.2;
color: var(--color-text);
text-align: center;
border-top: calc(1 * var(--to-rem)) solid #2077cf;
}
@media screen and (max-width: 767px) {
.p-about__outlineTerm {
padding-block: calc(10 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
line-height: 1.2;
}
}
.p-about__outlineRow:last-child .p-about__outlineTerm {
border-bottom: calc(1 * var(--to-rem)) solid #2077cf;
}
.p-about__outlineData {
padding-block: calc(16 * var(--to-rem));
padding-inline: calc(134 * var(--to-rem)) calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.2;
color: var(--color-text);
border-top: calc(1 * var(--to-rem)) solid var(--color-blue-mid);
}
@media screen and (max-width: 767px) {
.p-about__outlineData {
padding-block: calc(10 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
line-height: 1.2;
}
}
.p-about__outlineRow:last-child .p-about__outlineData {
border-bottom: calc(1 * var(--to-rem)) solid var(--color-blue-mid);
}
.p-service {
background-color: var(--color-white);
}
.p-service__inner {
max-width: calc(1080 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-service__inner {
max-width: calc(540 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-service__hero {
position: relative;
overflow: hidden;
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-service__heroBg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-service__heroBgPicture {
display: block;
width: 100%;
height: 100%;
}
.p-service__heroBgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-service__heroInner {
position: relative;
z-index: 1;
}
.p-service__intro {
padding-block: calc(53 * var(--to-rem)) 0;
}
@media screen and (max-width: 767px) {
.p-service__intro {
padding-block: calc(30 * var(--to-rem)) 0;
}
}
.p-service__lead {
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.5;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-service__lead {
font-size: calc(20 * var(--to-rem));
line-height: 1.5;
}
}
.p-service__tabsWrap {
padding-block: calc(50 * var(--to-rem)) 0;
}
@media screen and (max-width: 767px) {
.p-service__tabsWrap {
padding-block: calc(30 * var(--to-rem)) 0;
}
}
.p-service__tabs {
display: flex;
list-style: none;
padding-block: 0;
padding-inline: 0;
background-color: var(--color-gray);
border-radius: calc(22 * var(--to-rem));
overflow: hidden;
}
.p-service__tabItem {
flex: 1;
}
.p-service__tab {
display: block;
width: 100%;
padding-block: calc(10 * var(--to-rem));
padding-inline: calc(8 * var(--to-rem));
border: none;
background: transparent;
font-family: var(--base-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
text-align: center;
cursor: pointer;
transition: background-color var(--duration) ease, color var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-service__tab {
padding-block: calc(6 * var(--to-rem));
padding-inline: calc(4 * var(--to-rem));
font-size: calc(13 * var(--to-rem));
}
}
.p-service__tab:hover {
opacity: 0.8;
}
.p-service__tab.is-active {
background-color: #2077cf;
color: var(--color-white);
border-radius: calc(22 * var(--to-rem));
}
.p-service__sectionTitle {
position: relative;
padding-block-end: calc(8 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.5;
color: var(--color-text);
border-block-end: calc(1 * var(--to-rem)) solid var(--color-blue-mid);
}
.p-service__sectionTitle::after {
content: "";
position: absolute;
left: 0;
bottom: calc(-1 * var(--to-rem));
width: calc(300 * var(--to-rem));
height: calc(1 * var(--to-rem));
background-color: #2077cf;
}
@media screen and (max-width: 767px) {
.p-service__sectionTitle {
font-size: calc(20 * var(--to-rem));
padding-block-end: calc(8 * var(--to-rem));
}
.p-service__sectionTitle::after {
display: none;
}
}
.p-service__panels {
padding-block: 0;
}
.p-service__panel {
display: none;
padding-block: calc(18 * var(--to-rem)) calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__panel {
padding-block: calc(28 * var(--to-rem));
}
}
.p-service__panel.is-active {
display: block;
}
.p-service__panelHead {
margin-top: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__panelHead {
margin-top: calc(-8 * var(--to-rem));
}
}
.p-service__panelLead {
margin-top: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__panelLead {
margin-top: calc(10 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-service__compare {
margin-top: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__compare {
margin-top: calc(38 * var(--to-rem));
}
}
.p-service__compareGrid {
position: relative;
margin-top: calc(20 * var(--to-rem));
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
gap: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__compareGrid {
margin-top: calc(20 * var(--to-rem));
grid-template-columns: 1fr;
gap: 0;
}
}
.p-service__compareCard {
align-self: stretch;
display: flex;
flex-direction: column;
padding-block: calc(20 * var(--to-rem)) calc(28 * var(--to-rem));
padding-inline: calc(50 * var(--to-rem));
border: calc(3 * var(--to-rem)) solid var(--color-blue-mid);
border-radius: calc(10 * var(--to-rem));
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-service__compareCard {
padding-block: calc(14 * var(--to-rem)) calc(20 * var(--to-rem));
padding-inline: calc(12 * var(--to-rem));
}
}
.p-service__compareCard--after {
border-color: rgba(166, 235, 193, 0.4);
}
.p-service__compareLabel {
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-service__compareLabel {
font-size: calc(16 * var(--to-rem));
}
}
.p-service__compareImage {
margin-top: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__compareImage {
margin-top: calc(6 * var(--to-rem));
}
}
.p-service__compareImage img {
display: block;
width: 100%;
max-width: calc(390 * var(--to-rem));
height: auto;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-service__compareImage img {
max-width: calc(280 * var(--to-rem));
}
}
.p-service__compareList {
margin-top: calc(15 * var(--to-rem));
list-style: none;
padding-block: 0;
padding-inline: 0;
}
.p-service__compareItem {
position: relative;
padding-inline-start: calc(22 * var(--to-rem));
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-text);
}
.p-service__compareItem::before {
content: "";
position: absolute;
top: 50%;
translate: 0 -50%;
left: 0;
width: calc(10 * var(--to-rem));
height: calc(10 * var(--to-rem));
border-radius: 50%;
background-color: var(--color-blue-mid);
}
@media screen and (max-width: 767px) {
.p-service__compareItem {
font-size: calc(14 * var(--to-rem));
padding-inline-start: calc(25 * var(--to-rem));
line-height: 1.2;
}
.p-service__compareItem::before {
width: calc(7 * var(--to-rem));
height: calc(7 * var(--to-rem));
left: calc(10 * var(--to-rem));
}
}
.p-service__compareCard--after .p-service__compareItem::before {
background-color: rgba(166, 235, 193, 0.8);
}
.p-service__compareArrow {
position: absolute;
top: 50%;
left: 50%;
width: calc(60 * var(--to-rem));
height: calc(60 * var(--to-rem));
background-color: #a5e1bd;
clip-path: polygon(0 0, 100% 50%, 0 100%);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 1;
}
@media screen and (max-width: 767px) {
.p-service__compareArrow {
position: static;
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
justify-self: center;
clip-path: polygon(0 0, 100% 0, 50% 100%);
transform: none;
margin-block: calc(-15 * var(--to-rem)) 0;
z-index: 2;
}
}
.p-service__services {
margin-top: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__services {
margin-top: calc(60 * var(--to-rem));
}
}
.p-service__schedule {
margin-top: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__schedule {
margin-top: calc(20 * var(--to-rem));
}
}
.p-service__scheduleScroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.p-service__scheduleScroll::-webkit-scrollbar {
display: none;
}
.p-service__scheduleTable {
display: grid;
grid-template-columns: calc(268 * var(--to-rem)) repeat(4, calc(172 * var(--to-rem)));
grid-template-rows: calc(60 * var(--to-rem)) repeat(5, calc(56 * var(--to-rem)));
column-gap: calc(11 * var(--to-rem));
row-gap: 0;
width: calc(1000 * var(--to-rem));
font-family: var(--serif-font-family);
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__scheduleTable {
grid-template-columns: calc(177 * var(--to-rem)) repeat(4, calc(94 * var(--to-rem)));
grid-template-rows: calc(30 * var(--to-rem)) repeat(5, calc(32 * var(--to-rem)));
column-gap: calc(8 * var(--to-rem));
width: calc(585 * var(--to-rem));
}
}
.p-service__scheduleTable thead,
.p-service__scheduleTable tbody,
.p-service__scheduleTable tr {
display: contents;
}
.p-service__scheduleMonth {
align-self: start;
height: calc(39 * var(--to-rem));
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-blue-light);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__scheduleMonth {
height: calc(21 * var(--to-rem));
font-size: calc(12 * var(--to-rem));
}
}
.p-service__scheduleRow {
display: flex;
align-items: center;
gap: calc(7 * var(--to-rem));
font-size: calc(18 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
text-align: left;
}
@media screen and (max-width: 767px) {
.p-service__scheduleRow {
gap: calc(5 * var(--to-rem));
font-size: calc(12 * var(--to-rem));
}
}
.p-service__scheduleRowLabel {
display: inline-block;
flex-shrink: 0;
}
.p-service__scheduleNum {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: calc(36 * var(--to-rem));
height: calc(36 * var(--to-rem));
border-radius: 50%;
background-color: var(--color-white);
border: calc(1 * var(--to-rem)) solid var(--color-navy);
font-size: calc(18 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-service__scheduleNum {
width: calc(26 * var(--to-rem));
height: calc(26 * var(--to-rem));
font-size: calc(12 * var(--to-rem));
}
}
.p-service__scheduleCell {
display: flex;
align-items: center;
}
.p-service__scheduleTable td[colspan="4"] {
grid-column: span 4;
}
.p-service__scheduleTable td[colspan="3"] {
grid-column: span 3;
}
.p-service__scheduleBar {
display: flex;
flex: 1;
align-items: center;
height: calc(27 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border-radius: calc(13 * var(--to-rem));
background-color: #bde0fa;
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
text-align: left;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.p-service__scheduleBar {
height: calc(21 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
font-size: calc(12 * var(--to-rem));
}
}
.p-service__scheduleCell--split {
padding: 0;
}
.p-service__scheduleSplitRow {
display: flex;
flex: 1;
width: 100%;
}
.p-service__scheduleBar--splitLeft {
flex: 0 0 37.3092926491%;
}
.p-service__scheduleBar--splitRight {
flex: 0 0 62.6907073509%;
}
.p-service__scheduleHint {
display: none;
}
@media screen and (max-width: 767px) {
.p-service__scheduleHint {
display: block;
margin-top: calc(16 * var(--to-rem));
}
}
.p-service__scheduleHintTrack {
position: relative;
width: 100%;
height: calc(4 * var(--to-rem));
border-radius: calc(2 * var(--to-rem));
background-color: rgba(51, 51, 51, 0.25);
}
.p-service__scheduleHintThumb {
position: absolute;
top: 0;
left: 0;
width: calc(100 * var(--to-rem));
height: calc(4 * var(--to-rem));
border-radius: calc(2 * var(--to-rem));
background-color: #2077cf;
transition: left 0.05s linear;
}
.p-service__scheduleHintText {
margin-top: calc(6 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-medium);
color: #000;
text-align: right;
}
.p-service__servicesList {
list-style: none;
padding-block: 0;
padding-inline: 0;
margin-top: calc(60 * var(--to-rem));
counter-reset: service;
}
@media screen and (max-width: 767px) {
.p-service__servicesList {
margin-top: calc(38 * var(--to-rem));
}
}
.p-service__service {
padding-block: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__service {
padding-block: calc(20 * var(--to-rem));
}
}
.p-service__serviceHead {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
column-gap: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__serviceHead {
column-gap: calc(6 * var(--to-rem));
}
}
.p-service__serviceNum {
font-family: "Times New Roman", serif;
font-style: italic;
font-size: calc(46 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-service__serviceNum {
font-size: calc(24 * var(--to-rem));
}
}
.p-service__serviceTitle {
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.5;
letter-spacing: -0.02em;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-service__serviceTitle {
font-size: calc(18 * var(--to-rem));
font-weight: 600;
letter-spacing: 0;
}
}
.p-service__serviceTitle:has(br) {
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.p-service__serviceTitle:has(br) {
white-space: normal;
}
}
.p-service__serviceMain {
margin-top: calc(20 * var(--to-rem));
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: calc(40 * var(--to-rem));
padding-inline-start: calc(calc(46 * var(--to-rem)) + calc(20 * var(--to-rem)));
}
@media screen and (max-width: 767px) {
.p-service__serviceMain {
grid-template-columns: 1fr;
gap: calc(20 * var(--to-rem));
padding-inline-start: 0;
}
}
.p-service__serviceMain--full {
grid-template-columns: 1fr;
}
.p-service__serviceLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__serviceLayout {
grid-template-columns: 1fr;
gap: calc(20 * var(--to-rem));
}
}
.p-service__serviceLayoutLeft {
min-width: 0;
}
.p-service__serviceLayoutLeft .p-service__serviceTextWrap {
margin-top: calc(20 * var(--to-rem));
padding-inline-start: calc(56 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__serviceLayoutLeft .p-service__serviceTextWrap {
padding-inline-start: 0;
margin-top: calc(15 * var(--to-rem));
}
}
.p-service__serviceTextWrap {
min-width: 0;
}
.p-service__serviceText {
margin: 0;
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.5;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__serviceText {
font-size: calc(14 * var(--to-rem));
line-height: 1.5;
}
}
.p-service__serviceText + .p-service__serviceText {
margin-top: calc(15 * var(--to-rem));
}
.p-service__serviceImage {
width: calc(452 * var(--to-rem));
align-self: start;
}
@media screen and (max-width: 767px) {
.p-service__serviceImage {
width: 100%;
}
}
.p-service__serviceImage img {
display: block;
width: 100%;
height: auto;
}
.p-service__cycle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: calc(110 * var(--to-rem));
margin-top: calc(40 * var(--to-rem));
padding-inline: calc(28 * var(--to-rem));
border: calc(3 * var(--to-rem)) solid #bde0fa;
border-radius: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__cycle {
height: calc(94 * var(--to-rem));
margin-top: calc(33 * var(--to-rem));
padding-inline: calc(16 * var(--to-rem));
}
}
.p-service__cycleLabel,
.p-service__planLabel,
.p-service__lineExamplesLabel {
position: absolute;
top: 0;
left: calc(10 * var(--to-rem));
transform: translateY(-50%);
display: inline-block;
padding-block: calc(4 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border-radius: calc(13 * var(--to-rem));
background-color: #bde0fa;
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__cycleLabel,
.p-service__planLabel,
.p-service__lineExamplesLabel {
left: calc(71 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-service__lineExamplesLabel {
left: 50%;
transform: translate(-50%, -50%);
}
}
.p-service__cycleList {
display: flex;
align-items: start;
justify-content: center;
gap: calc(6 * var(--to-rem));
list-style: none;
padding-block: 0;
padding-inline: 0;
}
.p-service__cycleItem {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: var(--serif-font-family);
flex: 0 0 auto;
}
.p-service__cycleArrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: calc(50 * var(--to-rem));
height: calc(6 * var(--to-rem));
margin-top: calc(7 * var(--to-rem));
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__cycleArrow {
width: calc(20 * var(--to-rem));
height: calc(3 * var(--to-rem));
margin-top: calc(6 * var(--to-rem));
}
}
.p-service__cycleArrowSvg {
width: 100%;
height: 100%;
}
.p-service__cycleStep {
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__cycleStep {
font-size: calc(14 * var(--to-rem));
}
}
.p-service__cycleNote {
margin-top: calc(4 * var(--to-rem));
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__cycleNote {
margin-top: calc(2 * var(--to-rem));
font-size: calc(8 * var(--to-rem));
}
}
.p-service__plan {
position: relative;
margin-top: calc(40 * var(--to-rem));
padding-block: calc(28 * var(--to-rem));
padding-inline: calc(28 * var(--to-rem));
border: calc(3 * var(--to-rem)) solid #bde0fa;
border-radius: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__plan {
margin-top: calc(28 * var(--to-rem));
padding-block: calc(14 * var(--to-rem)) calc(13 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem)) 0;
}
}
.p-service__planNote {
margin-top: calc(12 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(10 * var(--to-rem));
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__planNote {
margin-top: calc(9 * var(--to-rem));
text-align: center;
}
}
.p-service__planTarget {
margin-top: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__planTarget {
margin-top: calc(28 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-service__planScroll {
margin-top: calc(16 * var(--to-rem));
margin-left: calc(-10 * var(--to-rem));
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 767px) {
.p-service__planScroll {
margin-top: calc(26 * var(--to-rem));
scrollbar-width: none;
}
.p-service__planScroll::-webkit-scrollbar {
display: none;
}
}
.p-service__planTable {
width: 100%;
border-collapse: separate;
border-spacing: calc(11 * var(--to-rem)) calc(4 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
color: var(--color-text);
table-layout: fixed;
}
@media screen and (max-width: 767px) {
.p-service__planTable {
min-width: calc(680 * var(--to-rem));
font-size: calc(12 * var(--to-rem));
border-spacing: calc(8 * var(--to-rem)) calc(3 * var(--to-rem));
}
}
.p-service__planTable th,
.p-service__planTable td {
padding-block: calc(8 * var(--to-rem));
padding-inline: calc(4 * var(--to-rem));
text-align: center;
vertical-align: middle;
}
@media screen and (max-width: 767px) {
.p-service__planTable th,
.p-service__planTable td {
padding-block: 0;
padding-inline: 0;
}
}
.p-service__planTable thead th.p-service__planMonth {
background-color: var(--color-blue-light);
font-weight: var(--fw-medium);
text-align: center;
}
.p-service__planSubject {
width: calc(60 * var(--to-rem));
text-align: center;
font-weight: var(--fw-medium);
}
@media screen and (max-width: 767px) {
.p-service__planSubject {
position: sticky;
left: 0;
z-index: 2;
width: calc(40 * var(--to-rem));
text-align: left;
background-color: var(--color-white);
}
}
.p-service__planMonth {
width: auto;
}
.p-service__planCell {
padding-block: calc(4 * var(--to-rem));
}
.p-service__planBar {
display: block;
padding-block: calc(5 * var(--to-rem));
padding-inline: calc(8 * var(--to-rem));
border-radius: calc(15 * var(--to-rem));
background-color: var(--color-blue-mid);
line-height: 1.3;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.p-service__planBar--green {
background-color: rgba(165, 225, 189, 0.6);
}
.p-service__planBar--yellow {
background-color: rgba(255, 231, 126, 0.4);
}
.p-service__planPhase td {
padding-block: calc(4 * var(--to-rem));
}
.p-service__planPhaseLabel {
display: block;
padding-block: calc(6 * var(--to-rem));
padding-inline: calc(8 * var(--to-rem));
border: calc(2 * var(--to-rem)) solid var(--color-blue-mid);
border-radius: calc(4 * var(--to-rem));
background-color: transparent;
color: var(--color-text);
font-weight: var(--fw-medium);
text-align: center;
line-height: 1.3;
}
.p-service__planPhaseLabel--basic {
border-color: rgba(90, 178, 242, 0.6);
}
.p-service__planPhaseLabel--shift {
border-color: rgb(165, 225, 189);
}
.p-service__planPhaseLabel--exam {
border-color: rgb(255, 231, 126);
}
.p-service__planHint {
display: none;
}
@media screen and (max-width: 767px) {
.p-service__planHint {
display: block;
margin-top: calc(12 * var(--to-rem));
}
}
.p-service__planHintTrack {
position: relative;
width: calc(302 * var(--to-rem));
max-width: 100%;
height: calc(4 * var(--to-rem));
margin-inline: auto;
border-radius: calc(2 * var(--to-rem));
background-color: rgba(51, 51, 51, 0.25);
}
.p-service__planHintThumb {
position: absolute;
top: 0;
left: 0;
width: calc(82 * var(--to-rem));
height: calc(4 * var(--to-rem));
border-radius: calc(2 * var(--to-rem));
background-color: #2077cf;
transition: left 0.05s linear;
}
.p-service__planHintText {
margin-top: calc(6 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-medium);
color: #000;
text-align: right;
}
.p-service__line {
margin-top: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__line {
margin-top: calc(28 * var(--to-rem));
}
}
.p-service__lineSliderWrap {
position: relative;
margin-inline: calc(-100 * var(--to-rem));
padding-inline: calc(133 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__lineSliderWrap {
margin-inline: 0;
padding-inline: calc(40 * var(--to-rem));
}
}
.p-service__lineSlider .swiper-wrapper {
padding-block: 0;
padding-inline: 0;
list-style: none;
}
.p-service__lineShot img {
display: block;
width: calc(257 * var(--to-rem));
max-width: 100%;
height: auto;
margin-inline: auto;
}
.p-service__lineArrow {
position: absolute;
top: 50%;
z-index: 2;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: calc(60 * var(--to-rem));
height: calc(60 * var(--to-rem));
border-radius: 50%;
background-color: var(--color-white);
border: calc(1 * var(--to-rem)) solid var(--color-navy);
opacity: 1;
cursor: pointer;
transition: background-color var(--duration) ease;
}
@media (any-hover: hover) {
.p-service__lineArrow:hover {
background-color: var(--color-navy);
}
}
@media screen and (max-width: 767px) {
.p-service__lineArrow {
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
}
}
.p-service__lineArrow.swiper-button-disabled {
opacity: 0.3;
cursor: default;
}
.p-service__lineArrow svg {
width: calc(20 * var(--to-rem));
height: calc(20 * var(--to-rem));
fill: var(--color-navy);
transition: fill var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-service__lineArrow svg {
width: calc(10 * var(--to-rem));
height: calc(10 * var(--to-rem));
}
}
@media (any-hover: hover) {
.p-service__lineArrow:hover svg {
fill: var(--color-white);
}
}
.p-service__lineArrow--prev {
left: 0;
}
.p-service__lineArrow--prev svg {
transform: rotate(180deg);
}
.p-service__lineArrow--next {
right: 0;
}
.p-service__lineExamples {
position: relative;
margin-top: calc(60 * var(--to-rem));
padding-block: calc(33 * var(--to-rem)) calc(30 * var(--to-rem));
padding-inline: calc(91 * var(--to-rem)) calc(40 * var(--to-rem));
border: calc(3 * var(--to-rem)) solid #bde0fa;
border-radius: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__lineExamples {
margin-top: calc(40 * var(--to-rem));
padding-block: calc(33 * var(--to-rem)) calc(40 * var(--to-rem));
padding-inline: calc(19 * var(--to-rem));
}
}
.p-service__lineSliderNote {
display: none;
}
@media screen and (max-width: 767px) {
.p-service__lineSliderNote {
display: block;
margin-top: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
text-align: center;
}
}
.p-service__lineExamplesList {
list-style: none;
padding-block: 0;
padding-inline: 0;
}
.p-service__lineExamplesItem {
position: relative;
padding-inline-start: calc(22 * var(--to-rem));
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.6;
color: var(--color-text);
}
.p-service__lineExamplesItem::before {
content: "";
position: absolute;
top: 50%;
left: 0;
translate: 0 -50%;
width: calc(10 * var(--to-rem));
height: calc(10 * var(--to-rem));
border-radius: 50%;
background-color: #bde0fa;
}
@media screen and (max-width: 767px) {
.p-service__lineExamplesItem {
font-size: calc(14 * var(--to-rem));
padding-inline-start: calc(11 * var(--to-rem));
}
}
.p-service__lineExamplesItem + .p-service__lineExamplesItem {
margin-top: calc(8 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__lineExamplesItem + .p-service__lineExamplesItem {
margin-top: calc(20 * var(--to-rem));
}
}
.p-service__flow {
padding-block: calc(60 * var(--to-rem)) calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flow {
padding-block: calc(13 * var(--to-rem)) calc(40 * var(--to-rem));
}
}
.p-service__flowGrid {
margin-top: calc(40 * var(--to-rem));
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: calc(80 * var(--to-rem));
row-gap: calc(60 * var(--to-rem));
grid-template-areas: "lineCol formCol" "steps   steps";
}
@media screen and (max-width: 767px) {
.p-service__flowGrid {
margin-top: calc(20 * var(--to-rem));
grid-template-columns: 1fr;
column-gap: 0;
row-gap: calc(20 * var(--to-rem));
grid-template-areas: "lineCol" "steps" "formCol";
}
}
.p-service__flowBranch--line {
grid-area: lineCol;
position: relative;
padding-inline-start: calc(77 * var(--to-rem));
}
.p-service__flowBranch--line::after {
content: "";
position: absolute;
top: calc(66 * var(--to-rem));
bottom: 0;
right: calc(-40 * var(--to-rem));
width: 1px;
background-color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__flowBranch--line {
padding-inline-start: 0;
}
.p-service__flowBranch--line::after {
display: none;
}
}
.p-service__flowBranch--form {
grid-area: formCol;
}
.p-service__flowBranchTitle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: calc(319 * var(--to-rem));
max-width: 100%;
height: calc(45 * var(--to-rem));
margin-inline: auto;
padding-inline: calc(16 * var(--to-rem));
border-radius: calc(28 * var(--to-rem));
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-bold);
line-height: 1.4;
color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-service__flowBranchTitle {
width: 100%;
}
}
.p-service__flowBranchTitleText {
display: block;
}
.p-service__flowBranchTitle--line {
background-color: var(--color-line-green);
}
.p-service__flowBranchTitle--form {
background-color: #2077cf;
margin-inline-start: calc(38 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranchTitle--form {
margin-inline-start: auto;
}
}
.p-service__flowBranchTriangle {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
display: block;
width: calc(26 * var(--to-rem));
height: calc(22 * var(--to-rem));
pointer-events: none;
}
@media screen and (max-width: 767px) {
.p-service__flowBranchTriangle {
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
transform: translate(-50%, calc(-15 * var(--to-rem)));
}
}
.p-service__flowBranchTriangle--line {
color: var(--color-line-green);
}
.p-service__flowBranchTriangle--form {
color: #2077cf;
}
.p-service__flowBranchTriangleSvg {
display: block;
width: 100%;
height: 100%;
}
.p-service__flowBranchStep {
position: relative;
margin-top: calc(45 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranchStep {
margin-top: calc(35 * var(--to-rem));
padding-inline-start: calc(40 * var(--to-rem));
}
}
.p-service__flowBranchStep + .p-service__flowBranchStep {
margin-top: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranchStep + .p-service__flowBranchStep {
margin-top: calc(23 * var(--to-rem));
}
}
.p-service__flowBranchBody--form {
margin-top: calc(45 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranchBody--form {
margin-top: calc(35 * var(--to-rem));
}
}
.p-service__flowNum {
position: absolute;
top: calc(-10 * var(--to-rem));
left: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(50 * var(--to-rem));
height: calc(50 * var(--to-rem));
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-service__flowNum {
top: 0;
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
}
}
.p-service__flowBranch--line .p-service__flowNum {
left: calc(-77 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranch--line .p-service__flowNum {
left: 0;
}
}
.p-service__flowSteps .p-service__flowNum {
top: calc(-7 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowSteps .p-service__flowNum {
top: 0;
}
}
.p-service__flowNumSvg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.p-service__flowNumText {
position: relative;
font-family: "Times New Roman", serif;
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-service__flowNumText {
font-size: calc(16 * var(--to-rem));
}
}
.p-service__flowBranchText {
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
color: var(--color-text);
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.p-service__flowBranchText {
font-size: calc(14 * var(--to-rem));
white-space: normal;
}
}
.p-service__flowBranchText + .p-service__flowBranchText {
margin-top: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranch--line .p-service__flowBranchText + .p-service__flowBranchText {
margin-top: 0;
}
}
.p-service__flowBtn {
display: flex;
align-items: center;
justify-content: center;
gap: calc(12 * var(--to-rem));
width: calc(396 * var(--to-rem));
max-width: 100%;
height: calc(45 * var(--to-rem));
border-radius: calc(5 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: 600;
color: var(--color-white);
text-decoration: none;
filter: drop-shadow(2px 2px 4px rgba(51, 51, 51, 0.25));
transition: opacity var(--duration) ease;
}
.p-service__flowBtn:hover {
opacity: 0.85;
}
@media screen and (max-width: 767px) {
.p-service__flowBtn {
width: 100%;
}
}
.p-service__flowBtn--line {
margin-top: calc(40 * var(--to-rem));
background-color: var(--color-line-green);
}
@media screen and (max-width: 767px) {
.p-service__flowBtn--line {
margin-top: calc(20 * var(--to-rem));
margin-inline-start: calc(-40 * var(--to-rem));
width: calc(350 * var(--to-rem));
max-width: none;
}
}
.p-service__flowBtn--line img {
width: calc(45 * var(--to-rem));
height: calc(45 * var(--to-rem));
}
.p-service__flowBtn--form {
margin-top: calc(10 * var(--to-rem));
background-color: #2077cf;
}
@media screen and (max-width: 767px) {
.p-service__flowBtn--form {
margin-top: calc(20 * var(--to-rem));
}
}
.p-service__flowBranchBody--form .p-service__flowBtn + .p-service__flowBranchText {
margin-top: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranchBody--form .p-service__flowBtn + .p-service__flowBranchText {
margin-top: calc(20 * var(--to-rem));
}
}
.p-service__flowBranchBody--form .p-service__flowBranchText {
padding-inline-start: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranchBody--form .p-service__flowBranchText {
padding-inline-start: 0;
}
}
.p-service__flowBranchImage {
margin-top: calc(20 * var(--to-rem));
}
.p-service__flowBranch--line .p-service__flowBranchImage {
margin-top: calc(11 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranch--line .p-service__flowBranchImage {
margin-top: calc(20 * var(--to-rem));
margin-inline-start: calc(-40 * var(--to-rem));
width: calc(100% + calc(40 * var(--to-rem)));
max-width: none;
}
}
.p-service__flowBranch--form .p-service__flowBranchImage {
margin-top: calc(68 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranch--form .p-service__flowBranchImage {
margin-top: calc(20 * var(--to-rem));
}
}
.p-service__flowBranchImage img {
display: block;
width: 100%;
height: auto;
}
.p-service__flowBranch--line .p-service__flowBranchImage img {
max-width: calc(328 * var(--to-rem));
}
.p-service__flowBranch--form .p-service__flowBranchImage img {
max-width: calc(396 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranch--line .p-service__flowBranchImage img,
.p-service__flowBranch--form .p-service__flowBranchImage img {
max-width: 100%;
}
}
.p-service__flowSteps {
grid-area: steps;
list-style: none;
padding-block: 0;
padding-inline: 0;
margin: 0;
}
.p-service__flowStep {
position: relative;
padding-inline-start: calc(77 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowStep {
padding-inline-start: calc(40 * var(--to-rem));
}
}
.p-service__flowStep + .p-service__flowStep {
margin-top: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowStep + .p-service__flowStep {
margin-top: calc(20 * var(--to-rem));
}
}
.p-service__flowStepBody {
padding-top: calc(7 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowStepBody {
padding-top: calc(2 * var(--to-rem));
}
}
.p-service__flowStepTitle {
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__flowStepTitle {
font-size: calc(18 * var(--to-rem));
}
}
.p-service__flowStepText {
margin-top: calc(8 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__flowStepText {
font-size: calc(14 * var(--to-rem));
margin-top: calc(0 * var(--to-rem));
}
}
.p-newsHero {
position: relative;
overflow: hidden;
min-height: calc(300 * var(--to-rem));
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-newsHero {
min-height: calc(195 * var(--to-rem));
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-newsHero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-newsHero__bgPicture,
.p-newsHero__bgImg {
display: block;
width: 100%;
height: 100%;
}
.p-newsHero__bgImg {
object-fit: cover;
object-position: center;
}
.p-newsHero__inner {
position: relative;
z-index: 1;
}
.p-newsArchive,
.p-newsSingle {
background-color: var(--color-white);
}
.p-newsArchive__content {
padding-block: calc(60 * var(--to-rem)) calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-newsArchive__content {
padding-block: calc(20 * var(--to-rem)) calc(50 * var(--to-rem));
}
}
.p-newsArchive__inner {
max-width: calc(1280 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-newsArchive__inner {
max-width: calc(390 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-newsArchive__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(30 * var(--to-rem)) calc(20 * var(--to-rem));
list-style: none;
}
@media screen and (max-width: 767px) {
.p-newsArchive__list {
grid-template-columns: 1fr;
gap: calc(40 * var(--to-rem));
}
}
.p-newsArchive__empty {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(18 * var(--to-rem));
line-height: 1.8;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-newsArchive__empty {
font-size: calc(14 * var(--to-rem));
}
}
.p-newsCard {
display: flex;
flex-direction: column;
min-height: calc(402 * var(--to-rem));
padding-block: calc(20 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border-radius: calc(30 * var(--to-rem)) 0 calc(30 * var(--to-rem)) 0;
background-color: var(--color-blue-light);
color: var(--color-text);
text-decoration: none;
}
@media (any-hover: hover) {
.p-newsCard:hover .p-newsCard__more {
border-color: var(--color-navy);
background-color: var(--color-navy);
color: var(--color-white);
}
}
@media screen and (max-width: 767px) {
.p-newsCard {
min-height: calc(393 * var(--to-rem));
padding-block: calc(20 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-newsCard__thumb {
overflow: hidden;
width: 100%;
aspect-ratio: 350/178;
background-color: #929292;
}
.p-newsCard__thumbImg,
.p-newsCard__thumbPlaceholder {
display: block;
width: 100%;
height: 100%;
}
.p-newsCard__thumbImg {
object-fit: cover;
object-position: center;
}
.p-newsCard__thumbPlaceholder {
background-color: #929292;
}
.p-newsCard__body {
display: flex;
flex: 1;
flex-direction: column;
}
.p-newsCard__date {
margin-top: calc(10 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
.p-newsCard__title {
display: -webkit-box;
overflow: hidden;
min-height: 1.8em;
margin-top: calc(1 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
@media screen and (max-width: 767px) {
.p-newsCard__title {
min-height: 1.6em;
line-height: 1.6;
}
}
.p-newsCard__excerpt {
display: -webkit-box;
overflow: hidden;
min-height: 3em;
margin-top: calc(7 * var(--to-rem));
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.p-newsCard__more {
display: inline-flex;
justify-content: center;
align-items: center;
min-height: calc(41 * var(--to-rem));
margin-top: auto;
border: 1px solid var(--color-blue-mid);
border-radius: calc(22 * var(--to-rem));
background-color: var(--color-white);
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
transition: border-color var(--duration) ease, background-color var(--duration) ease, color var(--duration) ease;
}
.p-newsPagination {
margin-top: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-newsPagination {
margin-top: calc(40 * var(--to-rem));
}
}
.p-newsPagination__inner {
display: flex;
justify-content: center;
align-items: center;
gap: calc(19 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
line-height: 1;
}
@media screen and (max-width: 767px) {
.p-newsPagination__inner {
gap: calc(17 * var(--to-rem));
}
}
.p-newsPagination__number,
.p-newsPagination__edge {
color: inherit;
text-decoration: none;
}
.p-newsPagination__number.current {
font-weight: var(--fw-bold);
text-decoration: underline;
text-underline-offset: calc(2 * var(--to-rem));
}
.p-newsPagination__number.dots,
.p-newsPagination__edge.is-disabled {
opacity: 0.45;
}
.p-newsSingle__content {
padding-block: calc(60 * var(--to-rem)) calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-newsSingle__content {
padding-block: calc(20 * var(--to-rem)) calc(50 * var(--to-rem));
}
}
.p-newsSingle__inner {
max-width: calc(1280 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-newsSingle__inner {
max-width: calc(390 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem)) calc(30 * var(--to-rem));
}
}
.p-newsSingle__date {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-newsSingle__date {
font-size: calc(16 * var(--to-rem));
}
}
.p-newsSingle__title {
margin-top: calc(1 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-newsSingle__title {
font-size: calc(20 * var(--to-rem));
}
}
.p-newsSingle__body {
max-width: calc(1000 * var(--to-rem));
margin-top: calc(54 * var(--to-rem));
margin-inline: auto;
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-newsSingle__body {
max-width: none;
margin-top: calc(29 * var(--to-rem));
margin-inline: 0;
font-size: calc(14 * var(--to-rem));
line-height: 1.5;
}
}
.p-newsSingle__body > * + * {
margin-top: 1.8em;
}
@media screen and (max-width: 767px) {
.p-newsSingle__body > * + * {
margin-top: 1.5em;
}
}
.p-newsSingle__body a {
color: var(--color-navy);
text-decoration: underline;
}
.p-newsSingle__body img {
max-width: 100%;
height: auto;
}
.p-newsSingle__body h2,
.p-newsSingle__body h3,
.p-newsSingle__body h4 {
color: var(--color-navy);
font-weight: 600;
line-height: 1.6;
}
.p-newsSingle__body ul,
.p-newsSingle__body ol {
padding-inline-start: 1.4em;
}
.p-newsSingle__footer {
max-width: calc(1000 * var(--to-rem));
margin-top: calc(60 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-newsSingle__footer {
max-width: none;
margin-top: calc(42 * var(--to-rem));
margin-inline: 0;
}
}
.p-newsSingle__back {
display: inline-flex;
align-items: center;
gap: calc(18 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
text-decoration: none;
}
@media (any-hover: hover) {
.p-newsSingle__back:hover .p-newsSingle__backText {
text-decoration-thickness: 2px;
}
}
@media screen and (max-width: 767px) {
.p-newsSingle__back {
gap: calc(12 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-newsSingle__backText {
text-decoration: underline;
text-underline-offset: calc(2 * var(--to-rem));
}
.p-contact {
background-color: var(--color-white);
}
.p-contact__hero {
position: relative;
overflow: hidden;
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-contact__heroBg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-contact__heroBgPicture {
display: block;
width: 100%;
height: 100%;
}
.p-contact__heroBgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-contact__heroInner {
position: relative;
z-index: 1;
}
.p-contact__intro {
padding-block: calc(55 * var(--to-rem)) calc(60 * var(--to-rem));
width: calc(1100 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-contact__intro {
padding-block: calc(30 * var(--to-rem));
width: 100%;
}
}
.p-contact__introLead {
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.8;
color: var(--color-navy);
text-align: left;
}
@media screen and (max-width: 767px) {
.p-contact__introLead {
font-size: calc(16 * var(--to-rem));
}
}
.p-contact__lineBtn {
display: flex;
align-items: center;
justify-content: center;
gap: calc(12 * var(--to-rem));
width: calc(405 * var(--to-rem));
max-width: 100%;
height: calc(59 * var(--to-rem));
margin-top: calc(50 * var(--to-rem));
margin-inline: auto;
padding-inline: calc(20 * var(--to-rem));
background-color: var(--color-line-green);
border-radius: calc(5 * var(--to-rem));
color: var(--color-white);
text-decoration: none;
transition: opacity var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-contact__lineBtn {
width: calc(350 * var(--to-rem));
height: calc(45 * var(--to-rem));
margin-top: calc(28 * var(--to-rem));
gap: calc(8 * var(--to-rem));
}
}
.p-contact__lineBtn:hover {
opacity: 0.85;
}
.p-contact__lineBtnIcon {
width: calc(55 * var(--to-rem));
height: calc(55 * var(--to-rem));
object-fit: contain;
}
@media screen and (max-width: 767px) {
.p-contact__lineBtnIcon {
width: calc(34 * var(--to-rem));
height: calc(34 * var(--to-rem));
}
}
.p-contact__lineBtnText {
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-bold);
line-height: 1.8;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-contact__lineBtnText {
font-size: calc(16 * var(--to-rem));
}
}
.p-contact__form {
padding-block: calc(39 * var(--to-rem)) calc(140 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__form {
padding-block: calc(15 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-contact__formTitle {
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
text-align: center;
padding-block: 0 calc(10 * var(--to-rem));
background-image: linear-gradient(to right, #2077cf 0, #2077cf 30%, var(--color-blue-mid) 30%, var(--color-blue-mid) 100%);
background-position: 0 100%;
background-size: 100% calc(1 * var(--to-rem));
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.p-contact__formTitle {
font-size: calc(20 * var(--to-rem));
padding-block: 0 calc(10 * var(--to-rem));
}
}
.p-contact__formBody {
margin-top: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__formBody {
margin-top: calc(6 * var(--to-rem));
}
}
.p-contact__formBody .wpcf7 {
max-width: calc(970 * var(--to-rem));
margin-inline: auto;
}
.p-contact__row {
display: grid;
grid-template-columns: calc(215 * var(--to-rem)) 1fr;
align-items: start;
column-gap: calc(44 * var(--to-rem));
padding-block: calc(15 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__row {
grid-template-columns: 1fr;
row-gap: calc(10 * var(--to-rem));
padding-block: calc(10 * var(--to-rem));
}
}
.p-contact__rowLabel {
display: flex;
align-items: center;
gap: calc(14 * var(--to-rem));
min-height: calc(43 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-contact__rowLabel {
min-height: auto;
font-weight: var(--fw-bold);
}
}
.p-contact__rowLabel .p-contact__required {
margin-inline-start: auto;
}
@media screen and (max-width: 767px) {
.p-contact__rowLabel .p-contact__required {
margin-inline-start: 0;
}
}
.p-contact__required {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(36 * var(--to-rem));
height: calc(21 * var(--to-rem));
padding-top: calc(1 * var(--to-rem));
background-color: #ffa6a6;
border-radius: calc(3 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1;
color: var(--color-text);
}
.p-contact__rowField {
min-width: 0;
}
.p-contact__formBody .wpcf7-form-control-wrap {
display: block;
position: relative;
}
.p-contact__formBody input[type=text],
.p-contact__formBody input[type=tel],
.p-contact__formBody input[type=email],
.p-contact__formBody textarea {
width: 100%;
height: calc(43 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
background-color: var(--color-white);
border: calc(1 * var(--to-rem)) solid #929292;
border-radius: 0;
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.4;
color: var(--color-text);
}
.p-contact__formBody input[type=text]::placeholder,
.p-contact__formBody input[type=tel]::placeholder,
.p-contact__formBody input[type=email]::placeholder,
.p-contact__formBody textarea::placeholder {
color: #929292;
font-size: calc(14 * var(--to-rem));
}
.p-contact__formBody input[type=text]:focus,
.p-contact__formBody input[type=tel]:focus,
.p-contact__formBody input[type=email]:focus,
.p-contact__formBody textarea:focus {
outline: none;
border-color: var(--color-navy);
}
.p-contact__formBody textarea {
height: calc(80 * var(--to-rem));
min-height: calc(80 * var(--to-rem));
padding-block: calc(10 * var(--to-rem));
line-height: 1.6;
resize: vertical;
field-sizing: auto;
}
.p-contact__formBody .wpcf7-radio {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(20 * var(--to-rem)) calc(36 * var(--to-rem));
min-height: calc(43 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__formBody .wpcf7-radio {
gap: calc(14 * var(--to-rem)) calc(65 * var(--to-rem));
}
}
.p-contact__formBody .wpcf7-list-item {
margin: 0;
padding-block: 0;
padding-inline: 0;
}
.p-contact__formBody .wpcf7-list-item label {
display: inline-flex;
align-items: center;
gap: calc(8 * var(--to-rem));
cursor: pointer;
}
.p-contact__formBody input[type=radio] {
appearance: none;
width: calc(20 * var(--to-rem));
height: calc(20 * var(--to-rem));
margin: 0;
background-color: var(--color-white);
border: calc(1 * var(--to-rem)) solid var(--color-border);
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
transition: border-color var(--duration) ease;
}
.p-contact__formBody input[type=radio]:checked {
border-color: var(--color-navy);
background-image: radial-gradient(circle, var(--color-navy) 0 calc(5 * var(--to-rem)), transparent calc(6 * var(--to-rem)) 100%);
}
.p-contact__formBody input[type=radio]:focus-visible {
outline: calc(2 * var(--to-rem)) solid var(--color-blue-mid);
outline-offset: calc(2 * var(--to-rem));
}
.p-contact__privacy {
margin-top: calc(40 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact__privacy {
margin-top: calc(30 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-contact__formBody input[type=checkbox] {
display: inline-block;
appearance: auto;
width: calc(20 * var(--to-rem));
height: calc(20 * var(--to-rem));
margin: 0;
accent-color: var(--color-navy);
cursor: pointer;
flex-shrink: 0;
}
.p-contact__formBody input[type=checkbox]:focus-visible {
outline: calc(2 * var(--to-rem)) solid var(--color-blue-mid);
outline-offset: calc(2 * var(--to-rem));
}
.p-contact__privacy a {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: calc(3 * var(--to-rem));
}
.p-contact__formBody .wpcf7-list-item-label {
display: inline-block;
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
cursor: pointer;
}
@media screen and (max-width: 767px) {
.p-contact__formBody .wpcf7-list-item-label {
font-size: calc(14 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-contact__row--stackSp .wpcf7-radio {
flex-direction: column;
align-items: flex-start;
gap: calc(14 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-contact__row--gradeGrid .wpcf7-radio {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(14 * var(--to-rem)) calc(65 * var(--to-rem));
}
}
.p-contact__submit {
margin-top: calc(50 * var(--to-rem));
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact__submit {
margin-top: calc(36 * var(--to-rem));
}
}
.p-contact__privacy + .p-contact__submit {
margin-top: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__privacy + .p-contact__submit {
margin-top: calc(24 * var(--to-rem));
}
}
.p-contact__formBody input[type=submit],
.p-contact__formBody .wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: calc(160 * var(--to-rem));
height: calc(54 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
background-color: var(--color-white);
border: calc(3 * var(--to-rem)) solid var(--color-blue-mid);
border-radius: calc(40 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-bold);
line-height: 1.8;
color: var(--color-text);
cursor: pointer;
transition: background-color var(--duration) ease, color var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-contact__formBody input[type=submit],
.p-contact__formBody .wpcf7-submit {
border-width: calc(2 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
height: calc(44 * var(--to-rem));
min-width: calc(140 * var(--to-rem));
padding-inline: calc(28 * var(--to-rem));
}
}
.p-contact__formBody input[type=submit]:hover,
.p-contact__formBody .wpcf7-submit:hover {
background-color: var(--color-blue-light);
}
.p-contact__formBody .wpcf7-form:not(.invalid):not(.unaccepted) .wpcf7-not-valid-tip {
display: none;
}
.p-contact__formBody .wpcf7-form:not(.invalid):not(.unaccepted) .wpcf7-not-valid {
border-color: #929292;
}
.p-contact__formBody .wpcf7-not-valid-tip {
margin-top: calc(6 * var(--to-rem));
font-size: calc(13 * var(--to-rem));
font-weight: var(--fw-regular);
color: #c40000;
}
.p-contact__formBody .wpcf7-form.invalid .wpcf7-not-valid {
border-color: #c40000;
}
.p-contact__formBody .wpcf7-response-output {
margin: calc(24 * var(--to-rem)) 0 0;
padding-block: calc(12 * var(--to-rem));
padding-inline: calc(16 * var(--to-rem));
border: calc(1 * var(--to-rem)) solid var(--color-border);
border-radius: calc(4 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
line-height: 1.6;
text-align: center;
}
.p-contact__formBody .wpcf7-spinner {
display: none;
margin-left: calc(12 * var(--to-rem));
vertical-align: middle;
}
.p-contact__formBody .wpcf7-form.submitting .wpcf7-spinner {
display: inline-block;
}
.p-contact__thanks {
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__thanks {
padding-block: calc(60 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-contact__thanksInner {
display: flex;
flex-direction: column;
align-items: center;
}
.p-contact__thanksCheck {
width: calc(100 * var(--to-rem));
height: calc(100 * var(--to-rem));
object-fit: contain;
}
@media screen and (max-width: 767px) {
.p-contact__thanksCheck {
width: calc(60 * var(--to-rem));
height: calc(60 * var(--to-rem));
}
}
.p-contact__thanksHeading {
margin-top: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-text);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact__thanksHeading {
margin-top: calc(16 * var(--to-rem));
}
}
.p-contact__thanksLead {
margin-top: calc(40 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-text);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact__thanksLead {
margin-top: calc(20 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-contact__thanks .p-contact__lineBtn {
margin-top: calc(26 * var(--to-rem));
}
.p-contact__thanksQr {
width: calc(200 * var(--to-rem));
height: calc(200 * var(--to-rem));
margin-top: calc(50 * var(--to-rem));
object-fit: contain;
}
.p-contact__thanksBack {
display: inline-flex;
align-items: center;
gap: calc(8 * var(--to-rem));
margin-top: calc(70 * var(--to-rem));
margin-inline-end: auto;
margin-inline-start: 0;
align-self: flex-start;
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
text-decoration: none;
transition: opacity var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-contact__thanksBack {
margin-top: calc(28 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-contact__thanksBack:hover {
opacity: 0.7;
}
.p-contact__thanksBackArrow {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: calc(5 * var(--to-rem)) calc(6 * var(--to-rem)) calc(5 * var(--to-rem)) 0;
border-color: transparent var(--color-navy) transparent transparent;
}
.p-contact__thanksBackText {
text-decoration: underline;
}
.p-download {
background-color: var(--color-white);
}
.p-download__inner {
max-width: calc(1080 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-download__inner {
max-width: calc(540 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-download__hero {
position: relative;
overflow: hidden;
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-download__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-download__heroBg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-download__heroBgPicture {
display: block;
width: 100%;
height: 100%;
}
.p-download__heroBgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-download__heroInner {
position: relative;
z-index: 1;
}
.p-download__preview {
padding-block: calc(60 * var(--to-rem)) 0;
}
@media screen and (max-width: 767px) {
.p-download__preview {
padding-block: calc(40 * var(--to-rem)) 0;
}
}
.p-download__previewInner {
max-width: calc(680 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-download__previewInner {
max-width: calc(390 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-download__previewImg {
display: block;
width: 100%;
height: auto;
}
.p-download__form {
padding-block: calc(65 * var(--to-rem)) calc(140 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-download__form {
padding-block: calc(40 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-download__formTitle {
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
text-align: center;
padding-block: 0 calc(10 * var(--to-rem));
background-image: linear-gradient(to right, #2077cf 0, #2077cf 30%, var(--color-blue-mid) 30%, var(--color-blue-mid) 100%);
background-position: 0 100%;
background-size: 100% calc(1 * var(--to-rem));
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.p-download__formTitle {
font-size: calc(20 * var(--to-rem));
padding-block: 0 calc(10 * var(--to-rem));
}
}
.p-download__formLead {
margin-top: calc(30 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.6;
color: var(--color-text);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-download__formLead {
margin-top: calc(20 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-download__features {
position: relative;
margin-top: calc(40 * var(--to-rem));
padding-block: calc(28 * var(--to-rem)) calc(28 * var(--to-rem));
padding-inline: calc(100 * var(--to-rem));
border: calc(3 * var(--to-rem)) solid #bde0fa;
border-radius: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-download__features {
margin-top: calc(30 * var(--to-rem));
padding-block: calc(28 * var(--to-rem)) calc(20 * var(--to-rem));
padding-inline: calc(35 * var(--to-rem)) calc(20 * var(--to-rem));
}
}
.p-download__featuresLabel {
position: absolute;
top: 0;
left: calc(20 * var(--to-rem));
transform: translateY(-50%);
display: inline-block;
padding-block: calc(4 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border-radius: calc(13 * var(--to-rem));
background-color: #bde0fa;
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-download__featuresLabel {
left: 50%;
translate: -50%;
padding-block: calc(6 * var(--to-rem));
font-size: calc(16 * var(--to-rem));
white-space: nowrap;
}
}
.p-download__featuresList {
list-style: none;
padding-block: 0;
padding-inline: 0;
}
.p-download__featuresItem {
display: flex;
align-items: center;
gap: calc(10 * var(--to-rem));
padding-inline-start: calc(8 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 2;
color: var(--color-text);
}
.p-download__featuresItem::before {
content: "";
flex-shrink: 0;
display: inline-block;
width: calc(15 * var(--to-rem));
height: calc(8 * var(--to-rem));
border-left: calc(2 * var(--to-rem)) solid var(--color-blue-mid);
border-bottom: calc(2 * var(--to-rem)) solid var(--color-blue-mid);
transform: rotate(-45deg);
transform-origin: center;
}
@media screen and (max-width: 767px) {
.p-download__featuresItem {
font-size: calc(14 * var(--to-rem));
gap: calc(8 * var(--to-rem));
padding-inline-start: 0;
line-height: 2.3;
}
.p-download__featuresItem::before {
width: calc(13 * var(--to-rem));
height: calc(7 * var(--to-rem));
}
}
.p-download__formBody {
margin-top: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-download__formBody {
margin-top: calc(8 * var(--to-rem));
}
}
.p-download__formBody .wpcf7 {
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
}
.p-download__row {
display: grid;
grid-template-columns: calc(244 * var(--to-rem)) 1fr;
align-items: start;
column-gap: calc(30 * var(--to-rem));
padding-block: calc(15 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-download__row {
grid-template-columns: 1fr;
row-gap: calc(10 * var(--to-rem));
padding-block: calc(12 * var(--to-rem));
}
}
.p-download__rowLabel {
display: flex;
align-items: center;
gap: calc(14 * var(--to-rem));
min-height: calc(43 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-download__rowLabel {
min-height: auto;
font-weight: var(--fw-bold);
}
}
.p-download__rowLabel .p-download__required {
margin-inline-start: auto;
}
@media screen and (max-width: 767px) {
.p-download__rowLabel .p-download__required {
margin-inline-start: 0;
}
}
.p-download__required {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(36 * var(--to-rem));
height: calc(21 * var(--to-rem));
padding-top: calc(1 * var(--to-rem));
background-color: #ffa6a6;
border-radius: calc(3 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1;
color: var(--color-text);
}
.p-download__rowField {
min-width: 0;
}
.p-download__formBody .wpcf7-form-control-wrap {
display: block;
position: relative;
}
.p-download__formBody input[type=text],
.p-download__formBody input[type=email] {
width: 100%;
height: calc(43 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
background-color: var(--color-white);
border: calc(1 * var(--to-rem)) solid #929292;
border-radius: 0;
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.4;
color: var(--color-text);
}
.p-download__formBody input[type=text]::placeholder,
.p-download__formBody input[type=email]::placeholder {
color: #929292;
font-size: calc(14 * var(--to-rem));
}
.p-download__formBody input[type=text]:focus,
.p-download__formBody input[type=email]:focus {
outline: none;
border-color: var(--color-navy);
}
.p-download__submit {
margin-top: calc(50 * var(--to-rem));
text-align: center;
}
@media screen and (max-width: 767px) {
.p-download__submit {
margin-top: calc(30 * var(--to-rem));
}
}
.p-download__formBody input[type=submit],
.p-download__formBody .wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: calc(330 * var(--to-rem));
height: calc(60 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
background-color: var(--color-white);
border: calc(3 * var(--to-rem)) solid var(--color-blue-mid);
border-radius: calc(40 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-bold);
line-height: 1.8;
color: var(--color-text);
cursor: pointer;
transition: background-color var(--duration) ease, color var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-download__formBody input[type=submit],
.p-download__formBody .wpcf7-submit {
min-width: calc(350 * var(--to-rem));
}
}
.p-download__formBody input[type=submit]:hover,
.p-download__formBody .wpcf7-submit:hover {
background-color: var(--color-blue-light);
}
.p-download__formBody .wpcf7-form:not(.invalid):not(.unaccepted) .wpcf7-not-valid-tip {
display: none;
}
.p-download__formBody .wpcf7-form:not(.invalid):not(.unaccepted) .wpcf7-not-valid {
border-color: #929292;
}
.p-download__formBody .wpcf7-not-valid-tip {
margin-top: calc(6 * var(--to-rem));
font-size: calc(13 * var(--to-rem));
font-weight: var(--fw-regular);
color: #c40000;
}
.p-download__formBody .wpcf7-form.invalid .wpcf7-not-valid {
border-color: #c40000;
}
.p-download__formBody .wpcf7-response-output {
margin: calc(24 * var(--to-rem)) 0 0;
padding-block: calc(12 * var(--to-rem));
padding-inline: calc(16 * var(--to-rem));
border: calc(1 * var(--to-rem)) solid var(--color-border);
border-radius: calc(4 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
line-height: 1.6;
text-align: center;
}
.p-download__formBody .wpcf7-spinner {
display: none;
margin-left: calc(12 * var(--to-rem));
vertical-align: middle;
}
.p-download__formBody .wpcf7-form.submitting .wpcf7-spinner {
display: inline-block;
}
.p-privacy {
background-color: var(--color-white);
}
.p-privacy__hero {
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-privacy__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-privacy__body {
padding-block: calc(60 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
background-color: var(--color-blue-light);
}
@media screen and (max-width: 767px) {
.p-privacy__body {
padding-block: calc(20 * var(--to-rem));
}
}
.p-privacy__bodyInner {
width: 100%;
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-privacy__bodyInner {
max-width: calc(350 * var(--to-rem));
}
}
.p-privacy__lead {
padding-block: calc(30 * var(--to-rem)) calc(20 * var(--to-rem));
padding-inline: calc(100 * var(--to-rem));
background-color: var(--color-white);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-privacy__lead {
margin-bottom: calc(74 * va[Truncated]
min-block-size: 100dvb; margin: unset;
} :where(:is(h1, h2, h3, h4, h5, h6):lang(en)) { text-wrap: pretty;
}
:where(h1) { margin-block: 0.67em;
font-size: 2em;
}
:where(h2, h3, h4, h5, h6) { margin-block: unset;
}
:where(search) { display: block flow;
} :where(p, blockquote, figure, pre, address, ul, ol, dl, menu) { margin-block: unset;
}
:where(blockquote, figure) { margin-inline: unset;
}
:where(p:lang(en)) { text-wrap: pretty;
}
:where(address:lang(ja)) { font-style: unset;
}
:where(ul, ol, menu) { padding-inline-start: unset; list-style-type: "";
}
:where(dt) { font-weight: bolder;
}
:where(dd) { margin-inline-start: unset;
}
:where(pre) { text-spacing-trim: space-all; text-autospace: no-autospace;
}
@media print {
:where(pre) { text-wrap-mode: unset;
}
} :where(em:lang(ja)) { font-weight: bolder;
}
:where(:is(i, cite, em, dfn):lang(ja)) { font-style: unset;
}
:where(u, s, del, ins) { text-decoration-inset: auto;
}
:where(code, kbd, samp) { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace; font-feature-settings: initial;
font-variation-settings: initial; font-size: unset; font-variant-ligatures: none;
}
:where(abbr[title]) { text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-inset: auto;
cursor: help;
}
:where(time) { text-autospace: no-autospace;
}
@media (forced-colors: active) {
:where(mark) { background-color: Highlight;
color: HighlightText;
}
}
@media print {
:where(mark) { border-width: 1px;
border-style: dotted;
}
} :where(a) { color: unset;
}
:where(a:any-link) { text-decoration-line: unset; text-decoration-thickness: from-font; text-decoration-inset: auto;
} :where(img, svg, picture, video, audio, canvas, model, iframe, embed, object) { max-inline-size: 100%; vertical-align: bottom;
}
:where(img, svg, picture, video, canvas, model, iframe, embed, object) { block-size: auto;
}
:where(iframe) { border: unset;
} :where(table) { border-collapse: collapse;
}
:where(caption, th) { text-align: unset;
}
:where(caption:lang(en)) { text-wrap: pretty;
} :where(button, input, select, textarea),
::file-selector-button { border-width: 1px;
border-style: solid; border-color: unset;
border-radius: unset;
color: unset;
font: unset;
letter-spacing: unset;
text-align: unset;
}
:where(input:is([type="radio" i], [type="checkbox" i])) { margin: unset;
}
:where(input[type="file" i]) { border: unset;
}
:where(input[type="search" i]) { -webkit-appearance: textfield;
}
@supports (-webkit-touch-callout: none) {
:where(input[type="search" i]) { background-color: Canvas;
}
}
:where(
input:is(
[type="tel" i],
[type="url" i],
[type="email" i],
[type="number" i]
):not(:placeholder-shown)
) { direction: ltr;
}
:where(textarea) { margin-block: unset; resize: block;
}
:where(
input:not([type="button" i], [type="submit" i], [type="reset" i]),
textarea,
[contenteditable]
) { text-autospace: no-autospace;
}
:where(
button,
input:is([type="button" i], [type="submit" i], [type="reset" i])
),
::file-selector-button { background-color: unset;
}
:where(
button,
input:is([type="button" i], [type="submit" i], [type="reset" i]),
[role="tab" i],
[role="button" i],
[role="option" i]
),
::file-selector-button { touch-action: manipulation;
}
:where(
button:enabled,
label[for],
select:enabled,
input:is(
[type="button" i],
[type="submit" i],
[type="reset" i],
[type="radio" i],
[type="checkbox" i]
):enabled,
[role="tab" i],
[role="button" i],
[role="option" i]
),
:where(:enabled)::file-selector-button { cursor: pointer;
}
:where(fieldset) { min-inline-size: 0; margin-inline: unset;
padding: unset;
border: unset;
}
:where(legend) { padding-inline: unset;
}
:where(progress) { vertical-align: unset;
}
::placeholder { opacity: unset;
} :where(summary) { list-style-type: ""; cursor: pointer;
}
:where(summary)::-webkit-details-marker { display: none;
}
:where(dialog, [popover]) { overscroll-behavior-block: contain; padding: unset;
border: unset;
}
:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) { display: none !important;
}
:where(dialog) { max-inline-size: unset;
max-block-size: unset;
}
:where(dialog)::backdrop { background-color: oklch(0% 0 0deg / 30%);
}
:where([popover]) { margin: unset;
} :where(:focus-visible) { outline-offset: 3px;
}
[tabindex="-1"]:focus { outline: none !important;
} :where(:disabled, [aria-disabled="true" i]) { cursor: default;
}
[hidden]:not([hidden="until-found" i]) { display: none !important;
}
:where(h1, h2, h3, h4, h5, h6) {
margin: 0;
}
:where(p) {
margin: 0;
}
@property --root-font-size {
syntax: "<length>";
inherits: false;
initial-value: 16px;
}
:root { --inner: min(1080px, 100%);
--inner-sp: min(500px, 100%);
--padding-inner: 20px; --z-index-header: 900; --color-white: #fff;
--color-text: #333;
--color-text-dark: #0d2936;
--color-black: #000;
--color-gray: #f0f0f0;
--color-border: #aaaaaf;
--color-accent: #408f95;
--color-primary: #234f5e;
--color-navy: #013159;
--color-navy-30: rgba(1, 49, 89, 0.3);
--color-line-green: #06c755;
--color-line-green-hover: #dbf7e6;
--color-line-green-border: #a5e1bd;
--color-cta-yellow: #ffe77e;
--color-cta-yellow-hover: #fff7d2;
--color-blue-light: rgba(90, 178, 242, 0.1);
--color-blue-mid: rgba(90, 178, 242, 0.4); --fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700; --base-font-family: "Noto Sans JP", sans-serif;
--serif-font-family: "Noto Serif JP", serif;
--title-font-family: "Noto Sans JP", sans-serif;
--label-font-family: "Noto Sans JP", sans-serif;
--to-rem: calc(100vw / 1440); --duration: 0.3s; --header-height: calc(70 * var(--to-rem));
}
@media screen and (width >= 1341px) {
:root {
--to-rem: 1px;
}
}
@media screen and (width <= 767px) and (width >= 601px) {
:root {
--to-rem: 1px;
--header-height: calc(56 * var(--to-rem));
}
}
@media screen and (width <= 600px) {
:root {
--to-rem: calc(100vw / 390);
--header-height: calc(56 * var(--to-rem));
}
}
html {
font-size: 100%;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
color-scheme: light;
} [id] {
scroll-margin-top: var(--header-height);
}
a[href^=tel] {
text-decoration: none;
}
a {
color: inherit;
-webkit-tap-highlight-color: transparent; }
a:hover {
text-decoration: none;
}
img,
svg {
vertical-align: middle;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
picture {
display: block;
width: 100%;
height: 100%;
}
:where(:any-link, button, [type=button], [type=reset], [type=submit], label[for], select, summary, [role=tab], [role=button]) {
cursor: pointer;
}
:where(button, [type=button], [type=reset], [type=submit]) {
touch-action: manipulation;
}
:focus:not(:focus-visible) {
outline: none;
}
input[type=text] {
font-size: 1rem; }
textarea {
field-sizing: content;
}
body {
overflow-x: clip;
font-family: var(--base-font-family);
font-weight: var(--fw-regular);
color: var(--color-text);
background-color: var(--color-white);
}
body.is-loading {
opacity: 0;
}
body.is-loaded {
opacity: 1;
transition: opacity 0.15s ease;
}
body.is-leaving {
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
.u-sp {
display: none;
}
@media screen and (max-width: 767px) {
.u-sp {
display: block;
}
}
.u-pc {
display: block;
}
@media screen and (max-width: 767px) {
.u-pc {
display: none;
}
}
.l-footerCta {
position: relative;
overflow: hidden;
min-height: calc(487 * var(--to-rem));
padding-block: calc(60 * var(--to-rem)) 0;
text-align: center;
}
@media screen and (max-width: 767px) {
.l-footerCta {
min-height: calc(591 * var(--to-rem));
padding-block: calc(36 * var(--to-rem)) calc(30 * var(--to-rem));
}
}
.l-footerCta__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.l-footerCta__bgPicture {
display: block;
width: 100%;
height: 100%;
}
.l-footerCta__bgPicture img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.l-footerCta__inner {
position: relative;
z-index: 1;
padding-inline: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footerCta__inner {
padding-inline: calc(17 * var(--to-rem));
}
}
.l-footerCta__heading {
font-family: var(--serif-font-family);
font-size: calc(32 * var(--to-rem));
font-weight: 600;
color: var(--color-text);
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.l-footerCta__heading {
font-size: calc(20 * var(--to-rem));
line-height: 1.6;
}
}
.l-footerCta__text {
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
color: var(--color-text);
line-height: 1.8;
margin-top: calc(18 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footerCta__text {
font-size: calc(14 * var(--to-rem));
margin-top: calc(7 * var(--to-rem));
}
}
.l-footerCta__spBr {
display: none;
}
@media screen and (max-width: 767px) {
.l-footerCta__spBr {
display: inline;
}
}
.l-footerCta__buttons {
display: flex;
justify-content: center;
gap: calc(60 * var(--to-rem));
margin-top: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footerCta__buttons {
flex-direction: column;
gap: 0;
margin-top: calc(14 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.l-footerCta__btn + .l-footerCta__btn {
margin-top: calc(23 * var(--to-rem));
}
}
.l-footerCta__btn {
position: relative;
display: block;
width: calc(428 * var(--to-rem));
min-height: calc(200 * var(--to-rem));
padding-block: calc(23 * var(--to-rem)) 0;
padding-inline: calc(24 * var(--to-rem));
border-radius: calc(30 * var(--to-rem));
background: transparent;
text-decoration: none;
transition: background-color var(--duration);
}
@media screen and (max-width: 767px) {
.l-footerCta__btn {
width: 100%;
padding-block: calc(18 * var(--to-rem)) 0;
padding-inline: calc(29 * var(--to-rem));
border-radius: calc(20 * var(--to-rem));
}
}
.l-footerCta__btn::before,
.l-footerCta__btn::after {
content: "";
position: absolute;
display: block;
border-radius: inherit;
}
.l-footerCta__btn::before {
top: calc(3 * var(--to-rem));
right: calc(-3 * var(--to-rem));
bottom: calc(-3 * var(--to-rem));
left: calc(3 * var(--to-rem));
z-index: 0;
}
.l-footerCta__btn::after {
inset: 0;
z-index: 1;
border: calc(3 * var(--to-rem)) solid;
background-color: var(--color-white);
transition: background-color var(--duration);
}
.l-footerCta__btnTitle,
.l-footerCta__btnDesc,
.l-footerCta__btnArrow {
position: relative;
z-index: 2;
}
@media screen and (max-width: 767px) {
.l-footerCta__btn--line {
min-height: calc(177 * var(--to-rem));
}
}
.l-footerCta__btn--line::before {
background-color: var(--color-line-green);
}
.l-footerCta__btn--line::after {
border-color: var(--color-line-green);
}
@media (any-hover: hover) {
.l-footerCta__btn--line:hover::after {
background-color: var(--color-line-green-hover);
}
}
@media screen and (max-width: 767px) {
.l-footerCta__btn--doc {
min-height: calc(153 * var(--to-rem));
}
}
.l-footerCta__btn--doc::before {
background-color: var(--color-cta-yellow);
}
.l-footerCta__btn--doc::after {
border-color: var(--color-cta-yellow);
}
@media (any-hover: hover) {
.l-footerCta__btn--doc:hover::after {
background-color: var(--color-cta-yellow-hover);
}
}
@media screen and (max-width: 767px) {
.l-footerCta__btn--line::before,
.l-footerCta__btn--doc::before {
top: calc(3 * var(--to-rem));
right: calc(-2.9 * var(--to-rem));
bottom: calc(-2.9 * var(--to-rem));
left: calc(3 * var(--to-rem));
}
}
.l-footerCta__btnTitle {
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-regular);
color: var(--color-text);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.l-footerCta__btnTitle {
font-size: calc(19 * var(--to-rem));
}
}
.l-footerCta__btnDesc {
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
color: var(--color-text);
line-height: 1.8;
margin-top: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footerCta__btnDesc {
font-size: calc(14 * var(--to-rem));
margin-top: calc(8 * var(--to-rem));
}
}
.l-footerCta__btnArrow {
position: absolute;
bottom: calc(35 * var(--to-rem));
right: calc(30 * var(--to-rem));
width: calc(142 * var(--to-rem));
height: auto;
object-fit: contain;
}
@media screen and (max-width: 767px) {
.l-footerCta__btnArrow {
width: calc(77 * var(--to-rem));
bottom: calc(14 * var(--to-rem));
right: calc(19 * var(--to-rem));
}
}
@media (any-hover: hover) {
.l-footerCta__btn:hover .l-footerCta__btnArrow {
filter: brightness(0) invert(1);
}
}
.l-footer {
background-color: #e5f3fe;
}
.l-footer__inner {
display: flex;
align-items: flex-start;
max-width: calc(1440 * var(--to-rem));
gap: calc(120 * var(--to-rem));
padding-inline: calc(120 * var(--to-rem));
padding-block: calc(60 * var(--to-rem)) calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.l-footer__inner {
display: block;
padding-inline: calc(30 * var(--to-rem));
padding-block: calc(20 * var(--to-rem)) calc(30 * var(--to-rem));
}
}
.l-footer__logo {
flex-shrink: 0;
}
.l-footer__logo a {
display: block;
line-height: 0;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-footer__logo a:hover {
opacity: 0.7;
}
}
.l-footer__logo img {
width: calc(168 * var(--to-rem));
height: auto;
object-fit: contain;
}
@media screen and (max-width: 767px) {
.l-footer__logo img {
width: calc(101 * var(--to-rem));
}
}
.l-footer__nav {
display: flex;
gap: calc(115 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footer__nav {
gap: calc(64 * var(--to-rem));
margin-left: 0;
margin-top: calc(18 * var(--to-rem));
}
}
.l-footer__navCol {
list-style: none;
}
@media screen and (max-width: 767px) {
.l-footer__navCol {
flex-shrink: 0;
}
}
.l-footer__navItem {
margin-top: calc(29 * var(--to-rem));
}
.l-footer__navItem:first-child {
margin-top: 0;
}
.l-footer__navLink {
position: relative;
display: inline-block;
padding-block-end: calc(3 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
text-decoration: none;
}
.l-footer__navLink::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(1 * var(--to-rem));
background-color: currentcolor;
content: "";
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration) ease;
}
@media screen and (max-width: 767px) {
.l-footer__navLink {
font-size: calc(14 * var(--to-rem));
line-height: 1.5;
white-space: nowrap;
}
}
@media (any-hover: hover) {
.l-footer__navLink:hover::before {
transform: scaleX(1);
}
}
.l-footer__navSub {
list-style: none;
margin-left: calc(33 * var(--to-rem));
margin-top: calc(9 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footer__navSub {
margin-left: 0;
}
}
.l-footer__navSubItem {
display: flex;
align-items: center;
gap: calc(10 * var(--to-rem));
margin-top: calc(9 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footer__navSubItem {
gap: calc(5 * var(--to-rem));
}
}
.l-footer__navSubItem:first-child {
margin-top: 0;
}
.l-footer__navSubItem::before {
content: "";
flex-shrink: 0;
display: block;
width: calc(20 * var(--to-rem));
height: calc(1 * var(--to-rem));
background: var(--color-text);
}
@media screen and (max-width: 767px) {
.l-footer__navSubItem::before {
width: calc(10 * var(--to-rem));
}
}
.l-footer__navSubLink {
position: relative;
display: inline-block;
padding-block-end: calc(3 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
text-decoration: none;
white-space: nowrap;
}
.l-footer__navSubLink::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(1 * var(--to-rem));
background-color: currentcolor;
content: "";
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration) ease;
}
@media screen and (max-width: 767px) {
.l-footer__navSubLink {
font-size: calc(14 * var(--to-rem));
}
}
@media (any-hover: hover) {
.l-footer__navSubLink:hover::before {
transform: scaleX(1);
}
}
.l-footer__navItem--legal {
margin-top: calc(62 * var(--to-rem));
}
.l-footer__navItem--legal + .l-footer__navItem--legal {
margin-top: calc(9 * var(--to-rem));
}
.l-footer__sns {
margin-left: calc(39 * var(--to-rem));
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.l-footer__sns {
margin-left: 0;
margin-top: calc(6 * var(--to-rem));
text-align: center;
}
}
.l-footer__snsLabel {
display: inline-block;
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-regular);
color: var(--color-text);
line-height: 1;
}
@media screen and (max-width: 767px) {
.l-footer__snsLabel {
font-size: calc(15 * var(--to-rem));
}
}
.l-footer__snsIcons {
display: flex;
align-items: center;
gap: calc(6 * var(--to-rem));
margin-top: calc(14 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footer__snsIcons {
justify-content: center;
margin-top: calc(10 * var(--to-rem));
}
}
.l-footer__snsLinkYt,
.l-footer__snsLinkX,
.l-footer__snsLinkNotion {
display: inline-flex;
flex-shrink: 0;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-footer__snsLinkYt:hover,
.l-footer__snsLinkX:hover,
.l-footer__snsLinkNotion:hover {
opacity: 0.7;
}
}
.l-footer__snsLinkYt img,
.l-footer__snsLinkX img,
.l-footer__snsLinkNotion img {
width: calc(50 * var(--to-rem));
height: calc(50 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-footer__snsLinkYt img,
.l-footer__snsLinkX img,
.l-footer__snsLinkNotion img {
width: calc(40 * var(--to-rem));
height: calc(40 * var(--to-rem));
}
}
.l-footer__bottom {
padding-block: calc(14 * var(--to-rem));
padding-inline: calc(120 * var(--to-rem));
border-top: 1px solid rgba(0, 0, 0, 0.1);
text-align: center;
}
@media screen and (max-width: 767px) {
.l-footer__bottom {
padding-inline: calc(30 * var(--to-rem));
}
}
.l-footer__copyright {
font-size: calc(12 * var(--to-rem));
color: var(--color-text);
opacity: 0.7;
line-height: 1;
}
.l-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-index-header);
height: calc(70 * var(--to-rem));
background-color: #e5f3fe;
}
@media screen and (max-width: 767px) {
.l-header {
height: calc(58 * var(--to-rem));
}
}
.l-header__inner {
display: flex;
align-items: center;
height: 100%;
padding-inline: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-header__inner {
padding-inline: calc(10 * var(--to-rem)) calc(19 * var(--to-rem));
justify-content: space-between;
}
}
.l-header__logo {
flex-shrink: 0;
}
.l-header__logo a {
display: block;
line-height: 0;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-header__logo a:hover {
opacity: 0.7;
}
}
.l-header__logo img {
width: calc(168 * var(--to-rem));
height: auto;
object-fit: contain;
}
@media screen and (max-width: 767px) {
.l-header__logo img {
width: calc(114 * var(--to-rem));
}
}
.l-header__sns {
display: flex;
flex-direction: column;
gap: calc(4 * var(--to-rem));
margin-left: calc(25 * var(--to-rem));
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.l-header__sns {
display: none;
}
}
.l-header__snsLabel {
display: inline-block;
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
line-height: 1;
text-align: center;
}
.l-header__snsIcons {
display: flex;
align-items: center;
gap: calc(4 * var(--to-rem));
}
.l-header__snsLinkYt,
.l-header__snsLinkX,
.l-header__snsLinkNotion {
display: inline-flex;
flex-shrink: 0;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-header__snsLinkYt:hover,
.l-header__snsLinkX:hover,
.l-header__snsLinkNotion:hover {
opacity: 0.7;
}
}
.l-header__snsLinkYt img,
.l-header__snsLinkX img,
.l-header__snsLinkNotion img {
width: calc(36 * var(--to-rem));
height: calc(36 * var(--to-rem));
}
.l-header__nav {
display: flex;
align-items: center;
margin-left: auto;
}
@media screen and (max-width: 767px) {
.l-header__nav {
display: none;
}
}
.l-header__navList {
display: flex;
align-items: center;
gap: calc(50 * var(--to-rem));
list-style: none;
}
.l-header__navLink {
position: relative;
display: inline-block;
padding-block-end: calc(3 * var(--to-rem));
font-family: "Noto Serif JP", var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: 600;
color: var(--color-text);
text-decoration: none;
}
.l-header__navLink::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(1 * var(--to-rem));
background-color: currentcolor;
content: "";
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration) ease;
}
@media (any-hover: hover) {
.l-header__navLink:hover::before {
transform: scaleX(1);
}
}
.l-header__ctaBtn {
display: flex;
align-items: center;
gap: calc(8 * var(--to-rem));
flex-shrink: 0;
width: calc(222 * var(--to-rem));
height: calc(50 * var(--to-rem));
background-color: var(--color-line-green);
border-radius: calc(5 * var(--to-rem));
box-shadow: 2px 2px 4px 0px rgba(70, 95, 80, 0.25);
padding-inline: calc(22 * var(--to-rem));
margin-left: calc(50 * var(--to-rem));
text-decoration: none;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-header__ctaBtn:hover {
opacity: 0.85;
}
}
@media screen and (max-width: 767px) {
.l-header__ctaBtn {
display: none;
}
}
.l-header__ctaBtn img {
width: calc(35 * var(--to-rem));
height: calc(35 * var(--to-rem));
object-fit: contain;
flex-shrink: 0;
}
.l-header__ctaBtnText {
flex-shrink: 0;
font-size: calc(18 * var(--to-rem));
font-weight: var(--fw-medium);
color: #fff;
}
.l-header__spRight {
display: none;
align-items: center;
gap: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.l-header__spRight {
display: flex;
}
}
.l-header__spCtaBtn {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
width: calc(183 * var(--to-rem));
height: calc(34 * var(--to-rem));
background-color: var(--color-line-green);
border-radius: calc(3 * var(--to-rem));
box-shadow: 2px 2px 4px 0px rgba(70, 95, 80, 0.25);
text-decoration: none;
}
.l-header__spCtaBtn img {
width: calc(29 * var(--to-rem));
height: calc(29 * var(--to-rem));
object-fit: contain;
flex-shrink: 0;
}
.l-header__spCtaBtn span {
flex-shrink: 0;
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-medium);
color: #fff;
}
.l-header__hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: calc(6 * var(--to-rem));
width: calc(23 * var(--to-rem));
height: calc(23 * var(--to-rem));
background: transparent;
border: none;
padding-block: 0;
padding-inline: 0;
flex-shrink: 0;
cursor: pointer;
}
.l-header__hamburgerBar {
display: block;
width: calc(23 * var(--to-rem));
height: calc(2 * var(--to-rem));
background-color: var(--color-text);
border-radius: calc(1 * var(--to-rem));
transition: transform var(--duration), opacity var(--duration);
}
.l-header__hamburger.is-open .l-header__hamburgerBar:nth-child(1) {
transform: translateY(calc(8 * var(--to-rem))) rotate(45deg);
}
.l-header__hamburger.is-open .l-header__hamburgerBar:nth-child(2) {
opacity: 0;
}
.l-header__hamburger.is-open .l-header__hamburgerBar:nth-child(3) {
transform: translateY(calc(-7.8 * var(--to-rem))) rotate(-45deg);
}
.l-drawer {
display: none;
}
@media screen and (max-width: 767px) {
.l-drawer {
display: block;
position: fixed;
inset: 0;
z-index: 850;
pointer-events: none;
}
}
.l-drawer.is-open {
pointer-events: auto;
}
.l-drawer__panel {
position: absolute;
top: calc(60 * var(--to-rem));
right: 0;
display: flex;
flex-direction: column;
width: calc(156 * var(--to-rem));
height: calc(296 * var(--to-rem));
background-color: #2077cf;
border-radius: 0 0 0 calc(20 * var(--to-rem));
padding-block: calc(20 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem)) calc(20 * var(--to-rem));
transform: translateX(100%);
transition: transform 0.3s ease;
}
.l-drawer.is-open .l-drawer__panel {
transform: translateX(0);
}
.l-drawer__navList {
list-style: none;
display: flex;
flex-direction: column;
gap: calc(19 * var(--to-rem));
}
.l-drawer__navLink {
display: inline-block;
font-family: "Noto Serif JP", var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: #fff;
text-decoration: none;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-drawer__navLink:hover {
opacity: 0.7;
}
}
.l-drawer__sns {
margin-top: auto;
display: flex;
flex-direction: column;
gap: calc(6 * var(--to-rem));
}
.l-drawer__snsLabel {
display: inline-block;
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-medium);
color: #fff;
}
.l-drawer__snsIcons {
display: flex;
align-items: center;
gap: calc(3 * var(--to-rem));
}
.l-drawer__snsLinkYt,
.l-drawer__snsLinkX,
.l-drawer__snsLinkNotion {
display: inline-flex;
flex-shrink: 0;
transition: opacity var(--duration);
}
@media (any-hover: hover) {
.l-drawer__snsLinkYt:hover,
.l-drawer__snsLinkX:hover,
.l-drawer__snsLinkNotion:hover {
opacity: 0.7;
}
}
.l-drawer__snsLinkYt img,
.l-drawer__snsLinkX img,
.l-drawer__snsLinkNotion img {
width: calc(27 * var(--to-rem));
height: calc(27 * var(--to-rem));
}
.l-sideCta {
position: fixed;
right: 0;
z-index: 820;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--color-white);
border: calc(3 * var(--to-rem)) solid;
border-right: none;
border-radius: calc(5 * var(--to-rem)) 0 0 calc(5 * var(--to-rem));
box-shadow: 2px 2px 4px 0px rgba(70, 95, 80, 0.25);
text-decoration: none;
width: calc(53 * var(--to-rem));
transition: background-color var(--duration);
}
@media screen and (max-width: 767px) {
.l-sideCta {
display: none;
}
}
.l-sideCta--consultation {
top: calc(162 * var(--to-rem));
height: calc(220 * var(--to-rem));
border-color: var(--color-line-green-border);
gap: calc(6 * var(--to-rem));
}
@media (any-hover: hover) {
.l-sideCta--consultation:hover {
background-color: var(--color-line-green-hover);
}
}
@media screen and (max-width: 767px) {
.l-sideCta--consultation {
top: calc(77 * var(--to-rem));
height: calc(177 * var(--to-rem));
}
}
.l-sideCta--request {
top: calc(396 * var(--to-rem));
height: calc(96 * var(--to-rem));
border-color: var(--color-cta-yellow);
}
@media (any-hover: hover) {
.l-sideCta--request:hover {
background-color: var(--color-cta-yellow-hover);
}
}
@media screen and (max-width: 767px) {
.l-sideCta--request {
top: calc(264 * var(--to-rem));
height: calc(77 * var(--to-rem));
}
}
.l-sideCta__icon {
width: calc(23 * var(--to-rem));
height: calc(23 * var(--to-rem));
object-fit: contain;
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.l-sideCta__icon {
width: calc(22 * var(--to-rem));
height: calc(22 * var(--to-rem));
}
}
.l-sideCta__text {
writing-mode: vertical-rl;
font-family: var(--base-font-family);
font-size: calc(18 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
line-height: 1.0555555556;
letter-spacing: 0;
}
@media screen and (max-width: 767px) {
.l-sideCta__text {
font-size: calc(14 * var(--to-rem));
line-height: 1.0714285714;
}
}
.l-inner {
max-width: calc(1280 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.l-inner {
max-width: calc(540 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.l-main {
margin-block-start: var(--header-height);
}
.c-cta-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: calc(428 * var(--to-rem));
padding-block: calc(30 * var(--to-rem)) calc(40 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem));
background-color: var(--color-white);
border: calc(3 * var(--to-rem)) solid;
border-radius: calc(30 * var(--to-rem));
text-align: center;
text-decoration: none;
transition: background-color var(--duration) ease;
}
.c-cta-btn::before {
content: "";
position: absolute;
top: 1.44%;
right: -0.7%;
bottom: 3.35%;
left: 0.7%;
border-radius: calc(30 * var(--to-rem));
z-index: -1;
transition: none;
}
@media screen and (max-width: 767px) {
.c-cta-btn {
width: 100%;
padding-block: calc(24 * var(--to-rem)) calc(30 * var(--to-rem));
padding-inline: calc(24 * var(--to-rem));
}
}
.c-cta-btn[data-color=green] {
border-color: var(--color-line-green);
color: var(--color-text);
}
.c-cta-btn[data-color=green]::before {
background-color: var(--color-line-green);
}
@media (any-hover: hover) {
.c-cta-btn[data-color=green]:hover {
background-color: var(--color-line-green-hover);
}
}
.c-cta-btn[data-color=yellow] {
border-color: var(--color-cta-yellow);
color: var(--color-text);
}
.c-cta-btn[data-color=yellow]::before {
background-color: var(--color-cta-yellow);
}
@media (any-hover: hover) {
.c-cta-btn[data-color=yellow]:hover {
background-color: var(--color-cta-yellow-hover);
}
}
.c-cta-btn__title {
font-family: var(--base-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.c-cta-btn__title {
font-size: calc(20 * var(--to-rem));
}
}
.c-cta-btn__sub {
margin-top: calc(10 * var(--to-rem));
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.c-cta-btn__sub {
font-size: calc(13 * var(--to-rem));
}
}
.c-cta-btn__arrow {
display: block;
width: calc(142 * var(--to-rem));
height: auto;
margin-top: auto;
padding-top: calc(10 * var(--to-rem));
align-self: flex-end;
}
@media screen and (max-width: 767px) {
.c-cta-btn__arrow {
width: calc(100 * var(--to-rem));
}
}
.c-cta-set {
display: flex;
justify-content: center;
gap: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-cta-set {
flex-direction: column;
gap: calc(24 * var(--to-rem));
width: 100%;
}
}
.c-btn {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
gap: calc(10 * var(--to-rem));
padding-block: calc(12 * var(--to-rem)) calc(12 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem)) calc(46 * var(--to-rem));
position: relative;
background-color: var(--color-white);
border: 1px solid var(--color-navy);
border-radius: calc(5 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
text-decoration: none;
transition: opacity var(--duration) ease;
}
.c-btn::after {
content: "";
position: absolute;
top: 50%;
right: calc(16 * var(--to-rem));
width: calc(8 * var(--to-rem));
height: calc(8 * var(--to-rem));
border-top: 1.5px solid currentcolor;
border-right: 1.5px solid currentcolor;
translate: 0 -50%;
rotate: 45deg;
transition: translate var(--duration) ease;
}
@media (any-hover: hover) {
.c-btn:hover {
opacity: 0.7;
}
.c-btn:hover::after {
translate: calc(4 * var(--to-rem)) -50%;
}
}
@media screen and (max-width: 767px) {
.c-btn {
font-size: calc(14 * var(--to-rem));
}
}
.c-caseCard {
display: block;
position: relative;
overflow: hidden;
min-height: calc(610 * var(--to-rem));
border-radius: calc(30 * var(--to-rem)) 0 calc(30 * var(--to-rem)) 0;
background: var(--color-blue-light);
cursor: pointer;
text-decoration: none;
}
@media screen and (max-width: 767px) {
.c-caseCard {
min-height: calc(544 * var(--to-rem));
border-radius: calc(20 * var(--to-rem)) 0 calc(20 * var(--to-rem)) 0;
}
}
.c-caseCard__img {
overflow: hidden;
width: calc(100% - calc(40 * var(--to-rem)));
height: calc(178 * var(--to-rem));
margin-block-start: calc(22 * var(--to-rem));
margin-inline: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-caseCard__img {
height: calc(157 * var(--to-rem));
margin-block-start: calc(20 * var(--to-rem));
}
}
.c-caseCard__picture {
display: block;
width: 100%;
height: 100%;
}
.c-caseCard__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.c-caseCard__body {
padding-block: 0 calc(16 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-caseCard__body {
padding-inline: calc(15 * var(--to-rem));
}
}
.c-caseCard__info {
position: relative;
min-height: calc(100 * var(--to-rem));
margin-top: calc(20 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem));
text-align: center;
}
@media screen and (max-width: 767px) {
.c-caseCard__info {
min-height: calc(86 * var(--to-rem));
margin-top: calc(11 * var(--to-rem));
}
}
.c-caseCard__bracketOpen {
position: absolute;
top: 0;
left: 0;
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
border-top: 2px solid var(--color-navy);
border-left: 2px solid var(--color-navy);
}
.c-caseCard__bracketClose {
position: absolute;
right: 0;
bottom: 0;
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
border-right: 2px solid var(--color-navy);
border-bottom: 2px solid var(--color-navy);
}
.c-caseCard__name,
.c-caseCard__univ {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 600;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.c-caseCard__name,
.c-caseCard__univ {
font-size: calc(20 * var(--to-rem));
}
}
.c-caseCard__univ {
display: inline-block;
width: max-content;
max-width: 100%;
}
.c-caseCard__school {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.c-caseCard__school {
font-size: calc(10 * var(--to-rem));
}
}
.c-caseCard__headline {
margin-top: calc(10 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: 600;
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 767px) {
.c-caseCard__headline {
font-size: calc(18 * var(--to-rem));
}
}
.c-caseCard__text {
margin-top: calc(10 * var(--to-rem));
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
}
.c-caseCard__tags {
display: flex;
flex-direction: row;
gap: calc(10 * var(--to-rem));
align-items: flex-start;
margin-top: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-caseCard__tags {
gap: calc(5 * var(--to-rem));
}
}
.c-caseCard__tagsCol {
display: flex;
flex-direction: column;
gap: calc(3 * var(--to-rem));
align-items: flex-start;
}
.c-caseCard__tagsCol--period {
gap: 0;
}
.c-caseCard__tag {
display: inline-block;
width: max-content;
max-width: 100%;
padding-block: calc(3 * var(--to-rem));
padding-inline: calc(7 * var(--to-rem));
border: 1px solid var(--color-blue-mid);
border-radius: calc(2 * var(--to-rem));
background: var(--color-white);
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.c-caseCard__tag {
font-size: calc(13 * var(--to-rem));
padding-block: calc(4 * var(--to-rem));
padding-inline: calc(6 * var(--to-rem));
}
}
.c-caseCard__tagNote {
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
white-space: nowrap;
}
.c-caseCard__overlay {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: calc(30 * var(--to-rem)) 0 calc(30 * var(--to-rem)) 0;
background: rgba(90, 178, 242, 0.9);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration) ease;
}
@media screen and (max-width: 767px) {
.c-caseCard__overlay {
display: none;
}
}
.c-caseCard:hover .c-caseCard__overlay {
opacity: 1;
}
.c-caseCard__overlayText {
color: var(--color-white);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 600;
line-height: 1.5;
text-align: center;
transform: translateY(calc(-16 * var(--to-rem)));
}
.c-moreLink {
display: inline-flex;
position: relative;
align-items: center;
gap: calc(6 * var(--to-rem));
padding-block-end: calc(3 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
text-decoration: none;
}
.c-moreLink::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(1 * var(--to-rem));
background-color: currentcolor;
content: "";
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration) ease;
}
@media (any-hover: hover) {
.c-moreLink:hover::before {
transform: scaleX(1);
}
}
@media screen and (max-width: 767px) {
.c-moreLink {
font-size: calc(14 * var(--to-rem));
}
}
.c-moreLink__arrow {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: calc(10 * var(--to-rem));
height: calc(12 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-moreLink__arrow {
width: calc(6 * var(--to-rem));
height: calc(7 * var(--to-rem));
}
}
.c-moreLink__arrow svg {
width: 100%;
height: 100%;
}
.c-page-title {
display: flex;
flex-direction: column;
}
@media screen and (max-width: 767px) {
.c-page-title {
gap: calc(4 * var(--to-rem));
}
}
.c-page-title__en {
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
color: var(--color-navy-30);
}
@media screen and (max-width: 767px) {
.c-page-title__en {
font-size: calc(18 * var(--to-rem));
}
}
.c-page-title__ja {
font-family: var(--serif-font-family);
font-size: calc(32 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.c-page-title__ja {
font-size: calc(24 * var(--to-rem));
}
} .c-pagination { --_pagination-bg: var(--color-white, #fff);
--_pagination-text: var(--color-text);
--_pagination-text-hover: #374151;
--_pagination-bg-hover: #f9fafb;
--_pagination-active-bg: var(--color-black, #000);
--_pagination-active-text: var(--color-white, #fff);
--_pagination-border: #d1d5db;
--_pagination-border-hover: #9ca3af;
display: flex;
flex-wrap: wrap;
gap: calc(8 * var(--to-rem));
justify-content: center;
}
.c-pagination__item {
display: inline-flex;
justify-content: center;
align-items: center;
height: calc(40 * var(--to-rem));
min-width: calc(40 * var(--to-rem));
padding-block: 0;
padding-inline: calc(12 * var(--to-rem));
border: 1px solid var(--_pagination-border);
background-color: var(--_pagination-bg);
color: var(--_pagination-text);
font-size: calc(14 * var(--to-rem));
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
@media screen and (max-width: 767px) {
.c-pagination__item {
height: calc(44 * var(--to-rem));
min-width: calc(44 * var(--to-rem));
font-size: calc(15 * var(--to-rem));
}
}
@media (any-hover: hover) {
.c-pagination__item:hover:not([data-state=current]) {
border-color: var(--_pagination-border-hover);
background-color: var(--_pagination-bg-hover);
color: var(--_pagination-text-hover);
}
}
.c-pagination__item[data-state=current] {
border-color: var(--_pagination-active-bg);
background-color: var(--_pagination-active-bg);
color: var(--_pagination-active-text);
}
.c-pagination__item[data-state=dots] {
border-color: transparent;
background-color: transparent;
cursor: default;
}
.c-pagination__item[data-state=dots]:hover {
border-color: transparent;
background-color: transparent;
}
.c-pagination__item[data-state=prev],
.c-pagination__item[data-state=next] {
font-weight: var(--fw-medium, 500);
}
.c-pagination__item[data-state=disabled] {
opacity: 0.6;
cursor: default;
}
@media (any-hover: hover) {
.c-pagination__item[data-state=disabled]:hover {
border-color: var(--_pagination-border);
background-color: var(--_pagination-bg);
color: var(--_pagination-text);
}
}
.c-section-title {
display: flex;
align-items: baseline;
gap: calc(14 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-section-title {
gap: calc(5 * var(--to-rem));
}
}
.c-section-title__en {
font-family: var(--serif-font-family);
font-size: calc(62 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.4;
padding-block-end: calc(12 * var(--to-rem));
background: linear-gradient(to right, rgba(32, 119, 207, 0.5), rgba(90, 178, 242, 0.4));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
@media screen and (max-width: 767px) {
.c-section-title__en {
font-size: calc(36 * var(--to-rem));
line-height: 1.3;
padding-block-end: calc(0 * var(--to-rem));
}
}
.c-section-title[data-size=sm] .c-section-title__en {
font-size: calc(46 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.c-section-title[data-size=sm] .c-section-title__en {
font-size: calc(28 * var(--to-rem));
}
}
.c-section-title__ja {
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.c-section-title__ja {
font-size: calc(16 * var(--to-rem));
}
}
.c-triangle {
display: inline-block;
width: calc(64 * var(--to-rem));
aspect-ratio: 1/1;
background-color: var(--color-black);
}
.c-triangle[data-direction=top] {
clip-path: var(--clip-triangle-top);
}
.c-triangle[data-direction=bottom] {
clip-path: var(--clip-triangle-bottom);
}
.c-triangle[data-direction=left] {
clip-path: var(--clip-triangle-left);
}
.c-triangle[data-direction=right] {
clip-path: var(--clip-triangle-right);
}
.c-triangle[data-direction=lower-left] {
clip-path: var(--clip-triangle-lower-left);
}
.c-triangle[data-direction=upper-left] {
clip-path: var(--clip-triangle-upper-left);
}
.c-triangle[data-direction=lower-right] {
clip-path: var(--clip-triangle-lower-right);
}
.c-triangle[data-direction=upper-right] {
clip-path: var(--clip-triangle-upper-right);
}
.p-topMv {
position: relative;
overflow: hidden;
height: calc(var(--header-height) + 574 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv {
--mv-to-rem: 1px;
height: calc(627 * var(--mv-to-rem));
}
}
@media screen and (max-width: 600px) {
.p-topMv {
--mv-to-rem: calc(100vw / 390);
}
}
.p-topMv__bg {
position: absolute;
top: var(--header-height);
left: 0;
z-index: 0;
width: 100%;
height: calc(504 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__bg {
height: calc(465 * var(--mv-to-rem));
}
}
.p-topMv__bgPicture {
display: block;
width: 100%;
height: 100%;
}
.p-topMv__bgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
@media screen and (max-width: 767px) {
.p-topMv__bgImg {
object-position: center top;
}
}
.p-topMv__gradient {
display: none;
}
@media screen and (max-width: 767px) {
.p-topMv__gradient {
display: block;
position: absolute;
top: calc(62 * var(--mv-to-rem));
left: 0;
width: 100%;
height: calc(435 * var(--mv-to-rem));
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 26.8%, #fff 100%);
z-index: 1;
pointer-events: none;
}
}
.p-topMv__body {
position: relative;
z-index: 2;
padding-top: var(--header-height);
}
.p-topMv__copy {
position: relative;
z-index: 2;
padding-inline-start: calc(104 * var(--to-rem));
margin-top: calc(50 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__copy {
padding-inline-start: 0;
text-align: center;
margin-top: calc(254 * var(--mv-to-rem));
}
}
.p-topMv__titleSubWrap {
display: block;
width: calc(697 * var(--to-rem));
height: calc(60 * var(--to-rem));
background-color: #fff;
padding-inline: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__titleSubWrap {
display: block;
width: auto;
height: auto;
background-color: transparent;
padding-inline: 0;
}
}
.p-topMv__titleSub {
display: flex;
align-items: flex-end;
justify-content: flex-start;
gap: 0;
font-family: var(--serif-font-family);
font-weight: 600;
color: #2077cf;
text-shadow: 0 0 7px #fff;
line-height: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__titleSub {
line-height: normal;
justify-content: center;
}
}
.p-topMv__titleSubLg {
font-size: calc(42 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__titleSubLg {
font-size: calc(18 * var(--mv-to-rem));
}
}
.p-topMv__titleSubSm {
font-size: calc(28 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__titleSubSm {
font-size: calc(16 * var(--mv-to-rem));
}
}
.p-topMv__titleMainWrap {
display: block;
width: calc(628 * var(--to-rem));
min-height: calc(121 * var(--to-rem));
background-color: #fff;
padding-block: calc(8 * var(--to-rem)) calc(12 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
margin-top: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__titleMainWrap {
display: block;
width: auto;
min-height: 0;
background-color: transparent;
padding-block: 0;
padding-inline: 0;
margin-top: 0;
}
}
.p-topMv__titleMain {
display: inline-block;
font-family: var(--serif-font-family);
font-weight: 600;
color: #2077cf;
font-size: calc(84 * var(--to-rem));
line-height: 1.2;
text-shadow: 0 0 7px #fff;
}
@media screen and (max-width: 767px) {
.p-topMv__titleMain {
font-size: calc(46 * var(--mv-to-rem));
line-height: normal;
}
}
.p-topMv__desc {
position: relative;
z-index: 2;
width: calc(975 * var(--to-rem));
max-width: 100%;
min-height: calc(139 * var(--to-rem));
margin-top: calc(20 * var(--to-rem));
overflow: hidden;
padding-top: calc(19 * var(--to-rem));
padding-inline-start: calc(124 * var(--to-rem));
padding-inline-end: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__desc {
width: 100%;
min-height: calc(120 * var(--mv-to-rem));
padding-top: calc(5 * var(--mv-to-rem));
padding-inline: calc(20 * var(--mv-to-rem));
margin-top: calc(10 * var(--mv-to-rem));
}
}
.p-topMv__descBg {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
.p-topMv__descBg img {
width: 100%;
height: 100%;
object-fit: fill;
}
.p-topMv__descText {
position: relative;
z-index: 1;
font-family: var(--serif-font-family);
font-weight: 600;
color: #fff;
font-size: calc(18 * var(--to-rem));
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topMv__descText {
font-size: calc(12 * var(--mv-to-rem));
}
}
.p-topMv__ctaArea {
position: absolute;
top: calc(519 * var(--to-rem));
left: 50%;
z-index: 1;
display: flex;
width: calc(1400 * var(--to-rem));
min-height: calc(118 * var(--to-rem));
background-color: #e5f3fe;
border-radius: calc(10 * var(--to-rem));
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.p-topMv__ctaArea {
top: calc(517 * var(--mv-to-rem));
width: calc(370 * var(--mv-to-rem));
min-height: calc(110 * var(--mv-to-rem));
border-radius: calc(6 * var(--mv-to-rem));
}
}
.p-topMv__ctaInner {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 767px) {
.p-topMv__ctaInner {
align-items: flex-end;
padding-block: 0 calc(10 * var(--mv-to-rem));
}
}
.p-topMv__ctaBtnWrap {
position: relative;
display: inline-flex;
}
.p-topMv__ctaFree {
position: absolute;
bottom: calc(100% - 25 * var(--to-rem));
left: calc(-20 * var(--to-rem));
z-index: 2;
width: calc(206 * var(--to-rem));
line-height: 0;
}
@media screen and (max-width: 767px) {
.p-topMv__ctaFree {
bottom: calc(100% - 22 * var(--mv-to-rem));
left: calc(-10 * var(--mv-to-rem));
width: calc(110 * var(--mv-to-rem));
}
}
.p-topMv__ctaFreeImg {
display: block;
width: 100%;
height: auto;
}
.p-topMv__ctaBtn {
display: flex;
align-items: center;
justify-content: center;
gap: calc(12 * var(--to-rem));
width: calc(680 * var(--to-rem));
min-height: calc(78 * var(--to-rem));
padding-inline: calc(21 * var(--to-rem));
background-color: var(--color-line-green);
border-radius: calc(5 * var(--to-rem));
box-shadow: 2px 2px 4px rgba(70, 95, 80, 0.25);
text-decoration: none;
transition: opacity var(--duration) ease;
}
.p-topMv__ctaBtn:hover {
opacity: 0.8;
}
@media screen and (max-width: 767px) {
.p-topMv__ctaBtn {
width: calc(350 * var(--mv-to-rem));
min-height: calc(60 * var(--mv-to-rem));
gap: calc(8 * var(--mv-to-rem));
border-radius: calc(5 * var(--mv-to-rem));
padding-inline: calc(20 * var(--mv-to-rem));
}
}
.p-topMv__ctaBtnIcon {
width: calc(59 * var(--to-rem));
height: calc(59 * var(--to-rem));
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.p-topMv__ctaBtnIcon {
width: calc(40 * var(--mv-to-rem));
height: calc(40 * var(--mv-to-rem));
}
}
.p-topMv__ctaBtnText {
text-shadow: 2px 2px 4px rgba(70, 95, 80, 0.25);
color: #fff;
font-family: var(--base-font-family);
font-weight: var(--fw-medium);
}
.p-topMv__ctaBtnTextA {
font-size: calc(32 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__ctaBtnTextA {
font-size: calc(18 * var(--mv-to-rem));
}
}
.p-topMv__ctaBtnTextB {
font-size: calc(28 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topMv__ctaBtnTextB {
font-size: calc(18 * var(--mv-to-rem));
}
}
.p-topService {
position: relative;
overflow: hidden;
padding-block: calc(60 * var(--to-rem)) calc(0 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService {
padding-block: calc(66 * var(--to-rem)) calc(0 * var(--to-rem));
}
}
.p-topService__inner {
position: relative;
z-index: 1;
max-width: calc(1200 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-topService__inner {
padding-inline: calc(20 * var(--to-rem));
}
}
.p-topService__desc {
margin-top: calc(20 * var(--to-rem));
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topService__desc {
margin-top: calc(12 * var(--to-rem));
}
}
.p-topService__caption {
margin-top: calc(10 * var(--to-rem));
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topService__caption {
margin-top: calc(8 * var(--to-rem));
}
}
.p-topService__features {
margin-top: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__features {
margin-top: calc(36 * var(--to-rem));
}
}
.p-topService__featuresHead {
display: flex;
align-items: center;
justify-content: center;
gap: calc(24 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__featuresHead {
gap: calc(12 * var(--to-rem));
}
}
.p-topService__featuresHeadLine {
flex-shrink: 0;
width: calc(262 * var(--to-rem));
height: calc(1 * var(--to-rem));
background-color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-topService__featuresHeadLine {
width: calc(39 * var(--to-rem));
}
}
.p-topService__featuresTitle {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(32 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
letter-spacing: 0.02em;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-topService__featuresTitle {
font-size: calc(19 * var(--to-rem));
white-space: nowrap;
}
}
.p-topService__featuresTitleEm {
font-size: calc(42 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__featuresTitleEm {
font-size: calc(20 * var(--to-rem));
}
}
.p-topService__featuresList {
max-width: calc(1000 * var(--to-rem));
margin-top: calc(55 * var(--to-rem));
margin-inline: auto;
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__featuresList {
margin-top: calc(18 * var(--to-rem));
grid-template-columns: repeat(2, 1fr);
}
}
.p-topService__featureItem {
display: flex;
}
.p-topService__featureCard {
position: relative;
width: 100%;
height: calc(205 * var(--to-rem));
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
padding-block: calc(20 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border: 2px solid var(--color-blue-mid);
border-radius: calc(10 * var(--to-rem));
background-color: var(--color-white);
box-shadow: 0 0 calc(10 * var(--to-rem)) 0 rgba(1, 49, 89, 0.35);
text-decoration: none;
cursor: pointer;
transition: transform var(--duration) ease, box-shadow var(--duration) ease;
}
.p-topService__featureCard:hover {
box-shadow: 0 calc(4 * var(--to-rem)) calc(14 * var(--to-rem)) 0 rgba(1, 49, 89, 0.35);
}
@media screen and (max-width: 767px) {
.p-topService__featureCard {
height: calc(151 * var(--to-rem));
padding-block: calc(10 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
border-radius: calc(10 * var(--to-rem));
}
}
.p-topService__featureTitle {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-topService__featureTitle {
font-size: calc(16 * var(--to-rem));
}
}
.p-topService__featureIcon {
margin-top: calc(20 * var(--to-rem));
align-self: center;
justify-self: center;
display: flex;
justify-content: center;
align-items: center;
height: calc(80 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__featureIcon {
margin-top: calc(0 * var(--to-rem));
height: calc(50 * var(--to-rem));
}
}
.p-topService__featureIcon img {
display: block;
width: auto;
max-width: 100%;
height: 100%;
object-fit: contain;
}
.p-topService__featureLink {
margin-top: calc(20 * var(--to-rem));
display: inline-flex;
align-items: center;
gap: calc(10 * var(--to-rem));
align-self: end;
justify-self: end;
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
}
@media screen and (max-width: 767px) {
.p-topService__featureLink {
margin-top: calc(0 * var(--to-rem));
gap: calc(4 * var(--to-rem));
font-size: calc(10 * var(--to-rem));
}
}
.p-topService__featureLinkLabel {
display: inline-block;
}
.p-topService__featureLinkArrow {
position: relative;
display: inline-block;
width: calc(30 * var(--to-rem));
height: calc(20 * var(--to-rem));
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.p-topService__featureLinkArrow {
width: calc(18 * var(--to-rem));
height: calc(12 * var(--to-rem));
}
}
.p-topService__featureLinkArrowLine {
position: absolute;
top: 50%;
left: 0;
width: calc(20 * var(--to-rem));
height: calc(1 * var(--to-rem));
background-color: rgba(90, 178, 242, 0.2);
}
@media screen and (max-width: 767px) {
.p-topService__featureLinkArrowLine {
width: calc(12 * var(--to-rem));
}
}
.p-topService__featureLinkArrowCircle {
position: absolute;
top: 50%;
right: 0;
width: calc(20 * var(--to-rem));
height: calc(20 * var(--to-rem));
transform: translateY(-50%);
border: calc(1 * var(--to-rem)) solid rgba(90, 178, 242, 0.2);
border-radius: 50%;
background-color: rgba(90, 178, 242, 0.2);
}
@media screen and (max-width: 767px) {
.p-topService__featureLinkArrowCircle {
width: calc(12 * var(--to-rem));
height: calc(12 * var(--to-rem));
}
}
.p-topService__grades {
margin-top: calc(120 * var(--to-rem));
margin-inline: auto;
list-style: none;
display: grid;
grid-template-columns: repeat(2, calc(320 * var(--to-rem)));
justify-content: center;
column-gap: calc(100 * var(--to-rem));
row-gap: calc(31 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__grades {
margin-top: calc(40 * var(--to-rem));
grid-template-columns: minmax(0, calc(320 * var(--to-rem)));
row-gap: calc(40 * var(--to-rem));
}
}
.p-topService__gradeCard {
display: flex;
flex-direction: column;
width: calc(320 * var(--to-rem));
min-height: calc(405 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__gradeCard {
position: relative;
min-height: auto;
overflow: visible;
isolation: isolate;
}
}
.p-topService__gradeCard--blue {
--grade-color: #2077cf;
--grade-text-color: #2077cf;
--grade-button-border-color: #2077cf;
}
.p-topService__gradeCard--green {
--grade-color: #06c755;
--grade-text-color: #06c755;
--grade-button-border-color: #06c755;
}
.p-topService__gradeCard--orange {
--grade-color: rgba(255, 107, 0, 0.6);
--grade-text-color: rgba(255, 107, 0, 0.6);
--grade-button-border-color: rgba(241, 130, 50, 0.6);
}
.p-topService__gradeCard--gray {
--grade-color: #929292;
--grade-text-color: var(--color-text);
--grade-button-border-color: #929292;
}
@media screen and (max-width: 767px) {
.p-topService__gradeCard > :not(.p-topService__gradeDecor) {
position: relative;
z-index: 1;
}
}
.p-topService__gradeDecor {
display: none;
}
@media screen and (max-width: 767px) {
.p-topService__gradeDecor {
position: absolute;
display: block;
z-index: 0;
pointer-events: none;
}
.p-topService__gradeDecor::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--deco-pill-width);
height: var(--deco-pill-height);
background-color: rgba(90, 178, 242, 0.1);
border-radius: calc(65 * var(--to-rem));
transform: translate(-50%, -50%) rotate(-45deg);
}
}
@media screen and (max-width: 767px) {
.p-topService__gradeDecor--blue-top {
top: calc(-18 * var(--to-rem));
left: calc(-120 * var(--to-rem));
width: calc(140 * var(--to-rem));
height: calc(140 * var(--to-rem));
--deco-pill-width: calc(182 * var(--to-rem));
--deco-pill-height: calc(16 * var(--to-rem));
}
.p-topService__gradeDecor--blue-main {
top: calc(51 * var(--to-rem));
left: calc(-178 * var(--to-rem));
width: calc(204 * var(--to-rem));
height: calc(204 * var(--to-rem));
--deco-pill-width: calc(239 * var(--to-rem));
--deco-pill-height: calc(48 * var(--to-rem));
}
.p-topService__gradeDecor--blue-sub {
top: calc(206 * var(--to-rem));
left: calc(-87.668 * var(--to-rem));
width: calc(71 * var(--to-rem));
height: calc(71 * var(--to-rem));
--deco-pill-width: calc(84 * var(--to-rem));
--deco-pill-height: calc(16 * var(--to-rem));
}
.p-topService__gradeDecor--orange-main {
top: calc(-130 * var(--to-rem));
left: calc(-213 * var(--to-rem));
width: calc(234 * var(--to-rem));
height: calc(234 * var(--to-rem));
--deco-pill-width: calc(304 * var(--to-rem));
--deco-pill-height: calc(27 * var(--to-rem));
}
.p-topService__gradeDecor--orange-top {
top: calc(150 * var(--to-rem));
left: calc(271 * var(--to-rem));
width: calc(155 * var(--to-rem));
height: calc(155 * var(--to-rem));
--deco-pill-width: calc(188 * var(--to-rem));
--deco-pill-height: calc(31 * var(--to-rem));
}
.p-topService__gradeDecor--orange-sub {
top: calc(202 * var(--to-rem));
left: calc(342 * var(--to-rem));
width: calc(90 * var(--to-rem));
height: calc(90 * var(--to-rem));
--deco-pill-width: calc(116 * var(--to-rem));
--deco-pill-height: calc(10 * var(--to-rem));
}
}
.p-topService__gradeTab {
position: relative;
padding-block: calc(13 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border-radius: calc(28 * var(--to-rem));
background-color: var(--grade-color);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-topService__gradeTab {
padding-block: calc(6 * var(--to-rem));
}
}
.p-topService__gradeTabLabel {
color: var(--color-white);
font-family: var(--base-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-bold);
line-height: 1.3;
letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
.p-topService__gradeTabLabel {
font-size: calc(18 * var(--to-rem));
}
}
.p-topService__gradeTabArrow {
position: absolute;
top: 100%;
left: 50%;
display: block;
width: calc(30 * var(--to-rem));
height: calc(13 * var(--to-rem));
background-color: var(--grade-color);
clip-path: polygon(50% 100%, 0 0, 100% 0);
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.p-topService__gradeTabArrow {
width: calc(22 * var(--to-rem));
height: calc(16 * var(--to-rem));
}
}
.p-topService__gradeText {
margin-top: calc(42 * var(--to-rem));
color: var(--grade-text-color);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topService__gradeText {
margin-top: calc(25 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-topService__gradeTags {
margin-top: auto;
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__gradeTags {
margin-top: calc(10 * var(--to-rem));
}
}
.p-topService__gradeTag {
position: relative;
width: calc(100 * var(--to-rem));
height: calc(100 * var(--to-rem));
margin-inline: auto;
display: flex;
justify-content: center;
align-items: center;
}
.p-topService__gradeTagImg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.p-topService__gradeTagLabel {
position: relative;
color: var(--grade-text-color);
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.4;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-topService__gradeTagLabel {
font-size: calc(15 * var(--to-rem));
}
}
.p-topService__gradeBtn {
display: flex;
width: 100%;
min-height: calc(40 * var(--to-rem));
margin-top: calc(19 * var(--to-rem));
align-items: center;
justify-content: center;
padding-block: calc(10 * var(--to-rem));
padding-inline: calc(16 * var(--to-rem));
border: 1px solid var(--grade-button-border-color);
border-radius: calc(24 * var(--to-rem));
background-color: var(--color-white);
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.1875;
text-decoration: none;
text-align: center;
transition: background-color var(--duration) ease, color var(--duration) ease;
}
@media (any-hover: hover) {
.p-topService__gradeBtn:hover {
background-color: var(--grade-button-border-color);
color: var(--color-white);
}
}
.p-topService__deco {
position: absolute;
top: 0;
left: 50%;
z-index: 0;
width: 100%;
max-width: calc(1200 * var(--to-rem));
height: 100%;
pointer-events: none;
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.p-topService__deco {
display: none;
}
}
.p-topService__decoPill {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.p-topService__decoPill::before {
content: "";
display: block;
width: var(--deco-pill-width);
height: var(--deco-pill-height);
background-color: var(--color-blue-light);
border-radius: calc(65 * var(--to-rem));
transform: rotate(-45deg);
}
.p-topService__decoPill--1 {
top: calc(867 * var(--to-rem));
left: calc(-76 * var(--to-rem));
width: calc(234 * var(--to-rem));
height: calc(234 * var(--to-rem));
--deco-pill-width: calc(304 * var(--to-rem));
--deco-pill-height: calc(27 * var(--to-rem));
}
.p-topService__decoPill--2 {
top: calc(867 * var(--to-rem));
left: calc(-76 * var(--to-rem));
width: calc(234 * var(--to-rem));
height: calc(234 * var(--to-rem));
--deco-pill-width: calc(304 * var(--to-rem));
--deco-pill-height: calc(27 * var(--to-rem));
}
.p-topService__decoPill--3 {
top: calc(1243 * var(--to-rem));
left: calc(-19 * var(--to-rem));
width: calc(119 * var(--to-rem));
height: calc(119 * var(--to-rem));
--deco-pill-width: calc(141 * var(--to-rem));
--deco-pill-height: calc(27 * var(--to-rem));
}
.p-topService__decoPill--4 {
top: calc(968 * var(--to-rem));
left: calc(-170 * var(--to-rem));
width: calc(340 * var(--to-rem));
height: calc(340 * var(--to-rem));
--deco-pill-width: calc(400 * var(--to-rem));
--deco-pill-height: calc(81 * var(--to-rem));
}
.p-topService__decoPill--5 {
top: calc(1319 * var(--to-rem));
left: calc(1030 * var(--to-rem));
width: calc(406 * var(--to-rem));
height: calc(406 * var(--to-rem));
--deco-pill-width: calc(492 * var(--to-rem));
--deco-pill-height: calc(81 * var(--to-rem));
}
.p-topService__decoPill--6 {
top: calc(1436 * var(--to-rem));
left: calc(1217 * var(--to-rem));
width: calc(234 * var(--to-rem));
height: calc(234 * var(--to-rem));
--deco-pill-width: calc(304 * var(--to-rem));
--deco-pill-height: calc(27 * var(--to-rem));
}
.p-topService__modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding-block: calc(20 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
opacity: 0;
visibility: hidden;
transition: opacity var(--duration) ease, visibility var(--duration) ease;
}
.p-topService__modal[hidden] {
display: none;
}
.p-topService__modal.is-open {
opacity: 1;
visibility: visible;
}
.p-topService__modalBackdrop {
position: absolute;
inset: 0;
background-color: rgba(1, 49, 89, 0.5);
cursor: pointer;
}
.p-topService__modalContainer {
position: relative;
width: 100%;
max-width: calc(972 * var(--to-rem));
max-height: calc(100vh - calc(40 * var(--to-rem)));
overflow-y: auto;
background-color: var(--color-white);
border: calc(3 * var(--to-rem)) solid var(--color-blue);
border-radius: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__modalContainer {
border-width: calc(2 * var(--to-rem));
border-radius: calc(14 * var(--to-rem));
max-height: calc(100vh - calc(20 * var(--to-rem)));
}
}
.p-topService__modalClose {
position: absolute;
top: calc(16 * var(--to-rem));
right: calc(16 * var(--to-rem));
z-index: 1;
width: calc(28 * var(--to-rem));
height: calc(28 * var(--to-rem));
background-color: transparent;
border: none;
cursor: pointer;
padding-block: 0;
padding-inline: 0;
}
@media screen and (max-width: 767px) {
.p-topService__modalClose {
top: calc(10 * var(--to-rem));
right: calc(10 * var(--to-rem));
width: calc(22 * var(--to-rem));
height: calc(22 * var(--to-rem));
}
}
.p-topService__modalCloseLine {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: calc(2 * var(--to-rem));
background-color: var(--color-navy);
border-radius: calc(1 * var(--to-rem));
}
.p-topService__modalCloseLine:nth-child(1) {
transform: translateY(-50%) rotate(45deg);
}
.p-topService__modalCloseLine:nth-child(2) {
transform: translateY(-50%) rotate(-45deg);
}
.p-topService__modalPanel {
display: flex;
align-items: stretch;
gap: calc(40 * var(--to-rem));
padding-block: calc(30 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__modalPanel {
flex-direction: column;
gap: calc(16 * var(--to-rem));
padding-block: calc(20 * var(--to-rem));
padding-inline: calc(16 * var(--to-rem));
}
}
.p-topService__modalPanel[hidden] {
display: none;
}
.p-topService__modalImg {
flex-shrink: 0;
width: calc(300 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topService__modalImg {
width: 100%;
}
}
.p-topService__modalImg img {
display: block;
width: 100%;
height: auto;
border-radius: calc(8 * var(--to-rem));
}
.p-topService__modalBody {
flex: 1;
min-width: 0;
}
.p-topService__modalTitle {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(32 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
.p-topService__modalTitle {
font-size: calc(20 * var(--to-rem));
}
}
.p-topService__modalDesc {
margin-top: calc(12 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topService__modalDesc {
margin-top: calc(10 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
body.is-modalOpen {
overflow: hidden;
}
.p-topNews {
padding-block: calc(33 * var(--to-rem)) 0;
}
@media screen and (max-width: 767px) {
.p-topNews {
padding-block: calc(20 * var(--to-rem));
}
}
.p-topNews__inner {
max-width: calc(1200 * var(--to-rem));
margin-inline: auto;
display: flex;
align-items: flex-start;
gap: calc(197 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topNews__inner {
max-width: 100%;
padding-inline: calc(20 * var(--to-rem));
flex-direction: column;
align-items: flex-start;
gap: calc(0 * var(--to-rem));
}
}
.p-topNews__head {
flex-shrink: 0;
}
.p-topNews__body {
flex: 1;
min-width: 0;
margin-top: calc(11 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topNews__body {
width: 100%;
}
}
.p-topNews__list {
list-style: none;
border-top: 1px solid var(--color-blue-mid);
}
.p-topNews__item {
display: flex;
align-items: center;
gap: calc(15 * var(--to-rem));
padding-block: calc(11 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
border-bottom: 1px solid var(--color-blue-mid);
background-color: #fff;
transition: background-color var(--duration) ease;
}
.p-topNews__item:hover {
background-color: var(--color-blue-light);
}
@media screen and (max-width: 767px) {
.p-topNews__item {
gap: calc(12 * var(--to-rem));
padding-block: calc(5 * var(--to-rem));
}
}
.p-topNews__date {
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
color: var(--color-navy);
flex-shrink: 0;
width: calc(100 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topNews__date {
font-size: calc(14 * var(--to-rem));
width: calc(88 * var(--to-rem));
}
}
.p-topNews__title {
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
color: var(--color-navy);
text-decoration: none;
transition: opacity var(--duration) ease;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.p-topNews__title:hover {
opacity: 0.7;
}
@media screen and (max-width: 767px) {
.p-topNews__title {
font-size: calc(14 * var(--to-rem));
}
}
.p-topNews__more {
margin-top: calc(30 * var(--to-rem));
text-align: right;
}
@media screen and (max-width: 767px) {
.p-topNews__more {
margin-top: calc(18 * var(--to-rem));
}
}
.p-topCase {
overflow: hidden;
padding-block: calc(37 * var(--to-rem)) calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topCase {
--to-rem: calc(100vw / 390);
padding-block: calc(30 * var(--to-rem)) calc(27 * var(--to-rem));
}
}
.p-topCase__head {
max-width: calc(1200 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-topCase__head {
padding-inline: calc(20 * var(--to-rem));
}
}
.p-topCase__desc {
margin-top: calc(26 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topCase__desc {
margin-top: calc(2 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-topCase__note {
margin-top: calc(14 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
text-align: right;
}
@media screen and (max-width: 767px) {
.p-topCase__note {
margin-top: calc(7 * var(--to-rem));
font-size: calc(10 * var(--to-rem));
text-align: left;
}
}
.p-topCase__sliderOuter {
position: relative;
max-width: calc(1200 * var(--to-rem));
margin-inline: auto;
margin-top: calc(4 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topCase__sliderOuter {
margin-top: calc(18 * var(--to-rem));
}
}
.p-topCase__swiper {
max-width: calc(1200 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topCase__swiper {
max-width: none;
padding-inline: calc(20 * var(--to-rem));
}
}
.p-topCase__swiper .swiper-wrapper {
padding-block: 0;
padding-inline: 0;
list-style: none;
}
.p-topCase__navBtn {
position: absolute;
top: 50%;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
width: calc(44 * var(--to-rem));
height: calc(44 * var(--to-rem));
padding-block: 0;
padding-inline: 0;
border: none;
background: none;
cursor: pointer;
transform: translateY(-50%);
transition: opacity var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-topCase__navBtn {
display: flex;
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
top: 50%;
transform: translateY(-50%);
}
}
.p-topCase__navBtn--prev {
left: calc(-60 * var(--to-rem));
}
@media screen and (min-width: 1440px) {
.p-topCase__navBtn--prev {
left: calc(-80 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-topCase__navBtn--prev {
left: 0;
}
}
.p-topCase__navBtn--next {
right: calc(-60 * var(--to-rem));
}
@media screen and (min-width: 1440px) {
.p-topCase__navBtn--next {
right: calc(-80 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-topCase__navBtn--next {
right: 0;
}
}
.p-topCase__navBtn svg {
width: 100%;
height: 100%;
}
.p-topCase__navCircle {
fill: transparent;
stroke: #2077cf;
stroke-width: 1;
transition: fill var(--duration) ease, stroke var(--duration) ease;
}
.p-topCase__navArrow {
fill: none;
stroke: #2077cf;
stroke-width: 1;
transition: stroke var(--duration) ease;
}
.p-topCase__navBtn:hover .p-topCase__navCircle {
fill: #2077cf;
stroke: #2077cf;
}
.p-topCase__navBtn:hover .p-topCase__navArrow {
stroke: #fff;
}
.p-topCase__pagination {
display: none;
}
@media screen and (max-width: 767px) {
.p-topCase__pagination {
position: static;
display: flex;
gap: calc(12 * var(--to-rem));
justify-content: center;
padding-block: calc(20 * var(--to-rem)) 0;
padding-inline: 0;
bottom: auto;
left: auto;
width: 100%;
}
}
.p-topCase__pagination .swiper-pagination-bullet {
width: calc(8 * var(--to-rem));
height: calc(8 * var(--to-rem));
margin: 0;
padding-block: 0;
padding-inline: 0;
border: none;
border-radius: 50%;
background: #d9d9d9;
opacity: 1;
cursor: pointer;
transition: background-color var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-topCase__pagination .swiper-pagination-bullet {
width: calc(10 * var(--to-rem));
height: calc(10 * var(--to-rem));
}
}
.p-topCase__pagination .swiper-pagination-bullet-active {
background: #2077cf;
transform: none;
opacity: 1;
}
.p-topCase__footer {
max-width: calc(1200 * var(--to-rem));
margin-top: calc(24 * var(--to-rem));
margin-inline: auto;
text-align: right;
}
@media screen and (max-width: 767px) {
.p-topCase__footer {
padding-inline: calc(20 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-topCase__footer .c-moreLink__arrow {
width: calc(10 * var(--to-rem));
height: calc(12 * var(--to-rem));
}
}
.p-caseArchive {
background-color: var(--color-white);
}
.p-caseArchive__hero {
position: relative;
overflow: hidden;
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseArchive__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-caseArchive__heroBgPicture,
.p-caseSingle__heroBgPicture {
display: block;
width: 100%;
height: 100%;
}
.p-caseArchive__heroBg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-caseArchive__heroBgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-caseArchive__heroInner {
position: relative;
z-index: 1;
}
.p-caseArchive__content {
padding-block: calc(60 * var(--to-rem)) calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseArchive__content {
padding-block: calc(52 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-caseArchive__inner {
max-width: calc(1280 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-caseArchive__inner {
max-width: calc(430 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-caseArchive__lead {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.p-caseArchive__lead {
font-size: calc(14 * var(--to-rem));
line-height: 1.8;
}
}
.p-caseArchive__note {
margin-top: calc(18 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
text-align: right;
}
@media screen and (max-width: 767px) {
.p-caseArchive__note {
margin-top: calc(12 * var(--to-rem));
font-size: calc(10 * var(--to-rem));
}
}
.p-caseArchive__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(20 * var(--to-rem));
margin-top: calc(18 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseArchive__grid {
--to-rem: calc(100vw / 390);
grid-template-columns: 1fr;
gap: calc(40 * var(--to-rem));
margin-top: calc(16 * var(--to-rem));
}
}
.p-caseArchive__grid .c-caseCard {
box-shadow: 0 calc(4 * var(--to-rem)) calc(12 * var(--to-rem)) 0 rgba(1, 49, 89, 0.15);
}
.p-caseArchive__lineCard {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(610 * var(--to-rem));
padding-block: calc(20 * var(--to-rem)) calc(41 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border-radius: calc(30 * var(--to-rem)) 0 calc(30 * var(--to-rem)) 0;
background-color: var(--color-blue-light);
box-shadow: 0 calc(4 * var(--to-rem)) calc(12 * var(--to-rem)) 0 rgba(1, 49, 89, 0.15);
}
@media screen and (max-width: 767px) {
.p-caseArchive__lineCard {
min-height: calc(544 * var(--to-rem));
padding-block: calc(20 * var(--to-rem)) calc(27 * var(--to-rem));
border-radius: calc(20 * var(--to-rem)) 0 calc(20 * var(--to-rem)) 0;
}
}
.p-caseArchive__lineCardImage {
overflow: hidden;
width: 100%;
height: calc(189 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseArchive__lineCardImage {
height: calc(167 * var(--to-rem));
}
}
.p-caseArchive__lineCardImg {
width: 100%;
height: 100%;
object-fit: cover;
}
.p-caseArchive__lineCardText {
margin-top: calc(86 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 600;
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-caseArchive__lineCardText {
margin-top: calc(40 * var(--to-rem));
}
}
.p-caseArchive__lineCardBtn {
display: inline-flex;
gap: calc(3 * var(--to-rem));
justify-content: center;
align-items: center;
width: 100%;
min-height: calc(45 * var(--to-rem));
margin-top: auto;
border-radius: calc(5 * var(--to-rem));
background-color: var(--color-line-green);
color: var(--color-white);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
text-decoration: none;
transition: background-color var(--duration) ease;
}
@media (any-hover: hover) {
.p-caseArchive__lineCardBtn:hover {
background-color: #03b14c;
}
}
@media screen and (max-width: 767px) {
.p-caseArchive__lineCardBtn {
max-width: calc(310 * var(--to-rem));
}
}
.p-caseArchive__lineBtn img {
width: calc(45 * var(--to-rem));
height: calc(45 * var(--to-rem));
}
.p-caseArchive__lineCardBtnIcon {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(36 * var(--to-rem));
height: calc(36 * var(--to-rem));
}
.p-caseArchive__lineCardBtnIcon svg {
display: block;
width: 100%;
height: 100%;
}
.p-caseArchive__lineCardBtnIcon svg path {
stroke: currentColor;
}
.p-caseArchive__action,
.p-caseSingle__action {
display: flex;
justify-content: center;
margin-top: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseArchive__action,
.p-caseSingle__action {
margin-top: calc(40 * var(--to-rem));
}
}
.p-caseArchive__actionBtn,
.p-caseSingle__actionBtn {
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: calc(472 * var(--to-rem));
min-height: calc(76 * var(--to-rem));
padding-inline: calc(82 * var(--to-rem)) calc(30 * var(--to-rem));
border: calc(3 * var(--to-rem)) solid var(--color-blue-mid);
border-radius: calc(40 * var(--to-rem));
background-color: var(--color-white);
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
text-decoration: none;
transition: background-color var(--duration) ease, border-color var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-caseArchive__actionBtn,
.p-caseSingle__actionBtn {
max-width: calc(350 * var(--to-rem));
min-height: calc(49 * var(--to-rem));
padding-inline: calc(59 * var(--to-rem)) calc(58 * var(--to-rem));
border-width: calc(2 * var(--to-rem));
font-size: calc(16 * var(--to-rem));
}
}
.p-caseArchive__actionBtnText,
.p-caseSingle__actionBtnText {
white-space: nowrap;
}
.p-caseArchive__actionBtnIcon,
.p-caseSingle__actionBtnIcon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: calc(50 * var(--to-rem));
height: calc(50 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseArchive__actionBtnIcon,
.p-caseSingle__actionBtnIcon {
width: calc(20 * var(--to-rem));
height: calc(20 * var(--to-rem));
}
}
.p-caseArchive__actionBtnIcon svg,
.p-caseSingle__actionBtnIcon svg {
display: block;
width: 100%;
height: 100%;
}
.p-caseArchive__actionBtnIconBg,
.p-caseSingle__actionBtnIconBg {
fill: var(--color-blue-mid);
transition: fill var(--duration) ease;
}
.p-caseArchive__actionBtnIconArrow,
.p-caseSingle__actionBtnIconArrow {
stroke: var(--color-white);
transition: stroke var(--duration) ease;
}
@media (any-hover: hover) {
.p-caseArchive__actionBtn:hover,
.p-caseSingle__actionBtn:hover {
border-color: transparent;
background-color: var(--color-blue-mid);
}
.p-caseArchive__actionBtn:hover .p-caseArchive__actionBtnIconBg,
.p-caseSingle__actionBtn:hover .p-caseSingle__actionBtnIconBg {
fill: var(--color-white);
}
.p-caseArchive__actionBtn:hover .p-caseArchive__actionBtnIconArrow,
.p-caseSingle__actionBtn:hover .p-caseSingle__actionBtnIconArrow {
stroke: #5ab2f2;
}
}
.p-caseSingle {
background-color: var(--color-white);
}
.p-caseSingle__hero {
position: relative;
overflow: hidden;
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseSingle__hero {
padding-block: calc(68 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-caseSingle__heroBg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-caseSingle__heroBgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-caseSingle__heroInner {
position: relative;
z-index: 1;
}
.p-caseSingle__content {
padding-block: calc(53 * var(--to-rem)) calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseSingle__content {
padding-block: calc(32 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-caseSingle__inner {
max-width: calc(1280 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-caseSingle__inner {
padding-inline: calc(20 * var(--to-rem)) calc(30 * var(--to-rem));
}
}
.p-caseSingle__headline {
display: flex;
flex-direction: column;
gap: calc(2 * var(--to-rem));
align-items: center;
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 500;
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-caseSingle__headline {
font-size: calc(20 * var(--to-rem));
}
}
.p-caseSingle__headlineLine {
display: block;
}
.p-caseSingle__profile {
display: grid;
grid-template-columns: calc(180 * var(--to-rem)) minmax(0, 1fr);
gap: calc(60 * var(--to-rem));
align-items: start;
max-width: calc(740 * var(--to-rem));
margin-top: calc(10 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-caseSingle__profile {
grid-template-columns: 1fr;
gap: calc(22 * var(--to-rem));
max-width: calc(300 * var(--to-rem));
margin-top: calc(10 * var(--to-rem));
}
}
.p-caseSingle__student {
text-align: center;
}
.p-caseSingle__studentImage {
overflow: hidden;
width: calc(180 * var(--to-rem));
height: calc(180 * var(--to-rem));
margin-inline: auto;
border-radius: 50%;
}
@media screen and (max-width: 767px) {
.p-caseSingle__studentImage {
width: calc(100 * var(--to-rem));
height: calc(100 * var(--to-rem));
}
}
.p-caseSingle__studentPhoto {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.p-caseSingle__studentName {
margin-top: calc(14 * var(--to-rem));
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 500;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.p-caseSingle__studentName {
margin-top: calc(12 * var(--to-rem));
font-size: calc(20 * var(--to-rem));
}
}
.p-caseSingle__studentNote {
margin-top: calc(1 * var(--to-rem));
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(8 * var(--to-rem));
font-weight: 500;
line-height: 1.5;
}
.p-caseSingle__specList {
display: flex;
flex-direction: column;
gap: calc(10 * var(--to-rem));
margin-top: calc(17 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseSingle__specList {
gap: calc(15 * var(--to-rem));
margin-top: 0;
}
}
.p-caseSingle__specItem {
display: grid;
grid-template-columns: calc(184 * var(--to-rem)) minmax(0, 1fr);
gap: calc(20 * var(--to-rem));
align-items: center;
}
@media screen and (max-width: 767px) {
.p-caseSingle__specItem {
grid-template-columns: 1fr;
gap: calc(10 * var(--to-rem));
}
}
.p-caseSingle__specLabel {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(32 * var(--to-rem));
border: 1px solid #2077cf;
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: 500;
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-caseSingle__specLabel {
min-height: calc(22 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-caseSingle__specValue {
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: 500;
line-height: 1.5;
}
@media screen and (max-width: 767px) {
.p-caseSingle__specValue {
font-size: calc(14 * var(--to-rem));
text-align: center;
}
}
.p-caseSingle__qaList {
display: flex;
flex-direction: column;
gap: calc(23 * var(--to-rem));
max-width: calc(970 * var(--to-rem));
margin-top: calc(92 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-caseSingle__qaList {
gap: calc(25 * var(--to-rem));
max-width: calc(350 * var(--to-rem));
margin-top: calc(46 * var(--to-rem));
}
}
.p-caseSingle__qaQuestionWrap {
display: grid;
grid-template-columns: calc(50 * var(--to-rem)) minmax(0, 1fr);
gap: calc(10 * var(--to-rem));
align-items: start;
}
@media screen and (max-width: 767px) {
.p-caseSingle__qaQuestionWrap {
grid-template-columns: calc(30 * var(--to-rem)) minmax(0, 1fr);
}
}
.p-caseSingle__qaIcon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: calc(50 * var(--to-rem));
height: calc(50 * var(--to-rem));
color: var(--color-navy);
font-family: "Times New Roman", serif;
font-size: calc(24 * var(--to-rem));
font-weight: 400;
line-height: 1;
}
@media screen and (max-width: 767px) {
.p-caseSingle__qaIcon {
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
font-size: calc(16 * var(--to-rem));
}
}
.p-caseSingle__qaIconRing {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.p-caseSingle__qaIconText {
position: relative;
z-index: 1;
}
.p-caseSingle__qaQuestion {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-caseSingle__qaQuestion {
font-size: calc(18 * var(--to-rem));
}
}
.p-caseSingle__qaAnswer {
padding-inline-start: calc(60 * var(--to-rem));
color: var(--color-text);
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-caseSingle__qaAnswer {
padding-inline-start: calc(40 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-caseSingle__qaAnswer p + p {
margin-top: calc(4 * var(--to-rem));
}
.p-caseSingle__entry {
max-width: calc(970 * var(--to-rem));
margin-top: calc(92 * var(--to-rem));
margin-inline: auto;
color: var(--color-text);
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-caseSingle__entry {
max-width: calc(350 * var(--to-rem));
margin-top: calc(46 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-caseSingle__entry p + p {
margin-top: calc(10 * var(--to-rem));
}
.p-caseSingle__footer {
max-width: calc(1000 * var(--to-rem));
margin-top: calc(52 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-caseSingle__footer {
max-width: calc(350 * var(--to-rem));
margin-top: calc(39 * var(--to-rem));
}
}
.p-caseSingle__backLink {
display: inline-flex;
position: relative;
gap: calc(12 * var(--to-rem));
align-items: center;
padding-block-end: calc(3 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.2;
text-decoration: none;
}
.p-caseSingle__backLink::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(1 * var(--to-rem));
background-color: currentcolor;
content: "";
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--duration) ease;
}
@media (any-hover: hover) {
.p-caseSingle__backLink:hover::before {
transform: scaleX(1);
}
}
@media screen and (max-width: 767px) {
.p-caseSingle__backLink {
font-size: calc(14 * var(--to-rem));
}
}
.p-caseSingle__backLinkArrow {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: calc(10 * var(--to-rem));
height: calc(12 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-caseSingle__backLinkArrow {
width: calc(6 * var(--to-rem));
height: calc(7 * var(--to-rem));
}
}
.p-caseSingle__backLinkArrow svg {
width: 100%;
height: 100%;
transform: scaleX(-1);
}
.p-caseSingle__backLinkText {
display: inline-block;
}
.p-topVoice {
padding-block: calc(60 * var(--to-rem)) calc(50 * var(--to-rem));
background: linear-gradient(to right, rgba(90, 178, 242, 0.1), rgba(32, 119, 207, 0.3));
}
@media screen and (max-width: 767px) {
.p-topVoice {
padding-block: calc(18 * var(--to-rem)) calc(40 * var(--to-rem));
}
}
.p-topVoice__inner {
max-width: calc(1200 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-topVoice__inner {
max-width: 100%;
padding-inline: calc(20 * var(--to-rem));
}
}
.p-topVoice__head {
margin-block-end: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__head {
margin-block-end: calc(12 * var(--to-rem));
}
}
.p-topVoice__grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: calc(66 * var(--to-rem));
row-gap: calc(44 * var(--to-rem));
width: calc(1200 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__grid {
display: grid;
width: 100%;
grid-template-columns: 1fr;
row-gap: calc(30 * var(--to-rem));
}
}
.p-topVoice__card {
position: relative;
flex-shrink: 0;
width: calc(552 * var(--to-rem));
background: rgba(255, 255, 255, 0.6);
padding-block: calc(20 * var(--to-rem)) calc(19 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card {
width: 100%;
padding-block: calc(16 * var(--to-rem)) calc(22 * var(--to-rem));
padding-inline: calc(14 * var(--to-rem));
}
}
.p-topVoice__card:nth-child(2) {
margin-top: calc(16 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card:nth-child(2) {
margin-top: 0;
}
}
.p-topVoice__card:nth-child(3) {
margin-left: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card:nth-child(3) {
margin-left: 0;
}
}
.p-topVoice__card:nth-child(4) {
margin-top: calc(1 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card:nth-child(4) {
margin-top: 0;
}
}
.p-topVoice__card:nth-child(6) {
margin-top: calc(-12 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card:nth-child(6) {
margin-top: 0;
}
}
.p-topVoice__card::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: calc(100% - calc(56 * var(--to-rem)));
height: calc(100% - calc(56 * var(--to-rem)));
border-top: calc(1 * var(--to-rem)) solid var(--color-navy);
border-right: calc(1 * var(--to-rem)) solid var(--color-navy);
border-top-right-radius: calc(10 * var(--to-rem));
pointer-events: none;
}
@media screen and (max-width: 767px) {
.p-topVoice__card::before {
width: calc(100% - calc(40 * var(--to-rem)));
height: calc(100% - calc(40 * var(--to-rem)));
}
}
.p-topVoice__card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: calc(100% - calc(58 * var(--to-rem)));
height: calc(100% - calc(56 * var(--to-rem)));
border-bottom: calc(1 * var(--to-rem)) solid var(--color-navy);
border-left: calc(1 * var(--to-rem)) solid var(--color-navy);
border-bottom-left-radius: calc(10 * var(--to-rem));
pointer-events: none;
}
@media screen and (max-width: 767px) {
.p-topVoice__card::after {
width: calc(100% - calc(40 * var(--to-rem)));
height: calc(100% - calc(40 * var(--to-rem)));
}
}
.p-topVoice__cardSlash {
position: absolute;
bottom: calc(-14 * var(--to-rem));
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
pointer-events: none;
}
@media screen and (max-width: 767px) {
.p-topVoice__cardSlash {
bottom: calc(-10 * var(--to-rem));
width: calc(20 * var(--to-rem));
height: calc(20 * var(--to-rem));
}
}
.p-topVoice__cardSlash::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: calc(42 * var(--to-rem));
height: calc(1 * var(--to-rem));
background: var(--color-navy);
border-radius: calc(0.5 * var(--to-rem));
transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (max-width: 767px) {
.p-topVoice__cardSlash::before {
width: calc(28 * var(--to-rem));
}
}
.p-topVoice__card:nth-child(odd) .p-topVoice__cardSlash {
left: calc(100 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card:nth-child(odd) .p-topVoice__cardSlash {
left: calc(60 * var(--to-rem));
}
}
.p-topVoice__card:nth-child(even) .p-topVoice__cardSlash {
right: calc(70 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__card:nth-child(even) .p-topVoice__cardSlash {
right: calc(60 * var(--to-rem));
}
}
.p-topVoice__card:nth-child(even) .p-topVoice__cardSlash::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.p-topVoice__cardDesc {
position: relative;
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
color: var(--color-navy);
line-height: 1.5;
margin-block-end: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topVoice__cardDesc {
font-size: calc(12 * var(--to-rem));
margin-block-end: calc(8 * var(--to-rem));
}
}
.p-topVoice__cardImg {
position: relative;
}
.p-topVoice__cardImg img {
display: block;
width: calc(512 * var(--to-rem));
max-width: 100%;
height: auto;
}
.p-topFaq,
.p-serviceFaq {
padding-block: calc(50 * var(--to-rem)) calc(50 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topFaq,
.p-serviceFaq {
padding-block: calc(20 * var(--to-rem));
}
}
.p-topFaq__inner {
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-topFaq__inner {
max-width: 100%;
padding-inline: calc(20 * var(--to-rem));
}
}
.p-topFaq__head,
.p-serviceFaq__head {
margin-block-end: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topFaq__head,
.p-serviceFaq__head {
margin-block-end: calc(6 * var(--to-rem));
}
}
.p-topFaq__list,
.p-serviceFaq__list {
padding-inline-start: 0;
list-style: none;
}
.p-topFaq__item,
.p-serviceFaq__item {
border-bottom: 1px solid var(--color-blue-mid);
}
.p-topFaq__item:last-child,
.p-serviceFaq__item:last-child {
border-bottom: 0;
}
.p-topFaq__question,
.p-serviceFaq__question {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: calc(20 * var(--to-rem));
padding-block: calc(28 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem));
border: 0;
background: transparent;
color: var(--color-navy);
font-family: var(--base-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.4;
text-align: left;
cursor: pointer;
transition: opacity var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-topFaq__question,
.p-serviceFaq__question {
gap: calc(12 * var(--to-rem));
padding-block: calc(13 * var(--to-rem));
padding-inline: calc(0 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-topFaq__question:hover,
.p-serviceFaq__question:hover {
opacity: 0.7;
}
.p-topFaq__questionText,
.p-serviceFaq__questionText {
flex: 1;
}
.p-topFaq__icon,
.p-serviceFaq__icon {
display: inline-flex;
flex-shrink: 0;
width: calc(26 * var(--to-rem));
height: calc(19 * var(--to-rem));
align-items: center;
justify-content: center;
color: var(--color-navy);
transition: transform 0.35s ease;
}
@media screen and (max-width: 767px) {
.p-topFaq__icon,
.p-serviceFaq__icon {
width: calc(15 * var(--to-rem));
height: calc(11 * var(--to-rem));
}
}
.p-topFaq__icon svg,
.p-serviceFaq__icon svg {
display: block;
width: 100%;
height: 100%;
}
.p-topFaq__item.is-open .p-topFaq__icon,
.p-serviceFaq__item.is-open .p-serviceFaq__icon {
transform: scaleY(-1);
}
.p-topFaq__answer,
.p-serviceFaq__answer {
padding-block: 0 calc(28 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem)) calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-topFaq__answer,
.p-serviceFaq__answer {
padding-block: 0 calc(16 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
}
}
.p-topFaq__answerText,
.p-serviceFaq__answerText {
color: var(--color-navy);
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-topFaq__answerText,
.p-serviceFaq__answerText {
font-size: calc(14 * var(--to-rem));
}
}
.p-topFaq__answerLink,
.p-serviceFaq__answerLink {
display: inline-block;
margin-top: calc(8 * var(--to-rem));
color: #2077cf;
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
text-decoration: underline;
word-break: break-all;
transition: opacity var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-topFaq__answerLink,
.p-serviceFaq__answerLink {
font-size: calc(14 * var(--to-rem));
}
}
.p-serviceFaq__inner {
max-width: calc(1080 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-serviceFaq__inner {
max-width: calc(540 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-about {
background-color: var(--color-white);
}
.p-about .c-section-title__en {
font-size: calc(46 * var(--to-rem));
padding-block-end: calc(8 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about .c-section-title__en {
font-size: calc(28 * var(--to-rem));
padding-block-end: calc(6 * var(--to-rem));
}
}
.p-about__hero {
position: relative;
overflow: hidden;
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-about__heroBg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-about__heroBgPicture {
display: block;
width: 100%;
height: 100%;
}
.p-about__heroBgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-about__heroInner {
position: relative;
z-index: 1;
}
.p-about__vision {
padding-block: calc(46 * var(--to-rem)) calc(0 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__vision {
padding-block: calc(30 * var(--to-rem)) calc(17 * var(--to-rem));
}
}
.p-about__vision .c-section-title {
padding-left: calc(100 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__vision .c-section-title {
padding-left: 0;
}
}
@media screen and (max-width: 767px) {
.p-about .c-section-title__en {
font-size: calc(36 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-about .c-section-title__ja {
font-size: calc(14 * var(--to-rem));
}
}
.p-about__visionHeadline {
margin-top: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(32 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.8;
color: var(--color-navy);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-about__visionHeadline {
margin-top: calc(3 * var(--to-rem));
font-size: calc(20 * var(--to-rem));
text-align: left;
}
}
.p-about__message {
position: relative;
padding-block: calc(64 * var(--to-rem)) calc(0 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__message {
padding-block: calc(20 * var(--to-rem)) calc(0 * var(--to-rem));
}
}
.p-about__messageBgRight {
position: absolute;
z-index: 0;
background-color: var(--color-blue-light);
top: calc(60 * var(--to-rem));
right: 0;
width: calc(50% + calc(101 * var(--to-rem)));
height: calc(439 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__messageBgRight {
top: calc(350 * var(--to-rem));
width: calc(330 * var(--to-rem));
height: calc(780 * var(--to-rem));
}
}
.p-about__messageInner {
position: relative;
z-index: 1;
}
.p-about__messageHead {
position: relative;
z-index: 2;
padding-left: calc(100 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__messageHead {
padding-left: 0;
}
}
.p-about__messageBody {
margin-top: calc(12 * var(--to-rem));
padding-left: calc(100 * var(--to-rem));
display: grid;
grid-template-columns: calc(309 * var(--to-rem)) 1fr;
column-gap: calc(31 * var(--to-rem));
align-items: start;
}
@media screen and (max-width: 767px) {
.p-about__messageBody {
margin-top: calc(-22 * var(--to-rem));
padding-left: 0;
grid-template-columns: 1fr;
row-gap: calc(40 * var(--to-rem));
}
}
.p-about__messageProfile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: calc(27 * var(--to-rem));
}
.p-about__messagePhoto {
width: calc(309 * var(--to-rem));
max-width: 100%;
}
.p-about__messagePhotoImg {
display: block;
width: 100%;
height: auto;
}
.p-about__messageRole {
margin-top: calc(18 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.8;
color: var(--color-text);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-about__messageRole {
margin-top: calc(20 * var(--to-rem));
}
}
.p-about__messageName {
margin-top: calc(0 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.8;
color: var(--color-text);
text-align: center;
}
.p-about__messageCard {
position: relative;
z-index: 1;
background-color: var(--color-white);
padding-block: calc(30 * var(--to-rem)) calc(40 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__messageCard {
margin-left: calc(-20 * var(--to-rem));
padding-block: calc(20 * var(--to-rem)) calc(20 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem)) calc(10 * var(--to-rem));
}
}
.p-about__messageHeadline {
font-family: var(--serif-font-family);
font-size: calc(28 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-about__messageHeadline {
font-size: calc(20 * var(--to-rem));
}
}
.p-about__messageDivider {
display: block;
margin-top: calc(20 * var(--to-rem));
width: 100%;
height: calc(2 * var(--to-rem));
border-radius: calc(50 * var(--to-rem));
background-color: var(--color-blue-light);
}
@media screen and (max-width: 767px) {
.p-about__messageDivider {
margin-top: calc(0 * var(--to-rem));
margin-inline: calc(-10 * var(--to-rem));
width: calc(100% + calc(20 * var(--to-rem)));
}
}
.p-about__messageText {
margin-top: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.6;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-about__messageText {
margin-top: calc(8 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-about__messageText p {
margin-top: calc(22 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__messageText p {
margin-top: calc(24 * var(--to-rem));
}
}
.p-about__messageText p:first-child {
margin-top: 0;
}
.p-about__messageText strong {
font-weight: var(--fw-bold);
color: var(--color-navy);
}
.p-about__outline {
padding-block: calc(54 * var(--to-rem)) calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__outline {
padding-block: calc(4 * var(--to-rem)) calc(60 * var(--to-rem));
}
}
.p-about__outlineHead {
padding-left: calc(100 * var(--to-rem));
margin-bottom: calc(28 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-about__outlineHead {
padding-left: 0;
margin-bottom: calc(4 * var(--to-rem));
}
}
.p-about__outlineList {
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-about__outlineList {
max-width: calc(500 * var(--to-rem));
}
}
.p-about__outlineRow {
display: grid;
grid-template-columns: calc(300 * var(--to-rem)) 1fr;
align-items: center;
}
@media screen and (max-width: 767px) {
.p-about__outlineRow {
grid-template-columns: calc(106 * var(--to-rem)) 1fr;
}
}
.p-about__outlineTerm {
padding-block: calc(16 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.2;
color: var(--color-text);
text-align: center;
border-top: calc(1 * var(--to-rem)) solid #2077cf;
}
@media screen and (max-width: 767px) {
.p-about__outlineTerm {
padding-block: calc(10 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
line-height: 1.2;
}
}
.p-about__outlineRow:last-child .p-about__outlineTerm {
border-bottom: calc(1 * var(--to-rem)) solid #2077cf;
}
.p-about__outlineData {
padding-block: calc(16 * var(--to-rem));
padding-inline: calc(134 * var(--to-rem)) calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.2;
color: var(--color-text);
border-top: calc(1 * var(--to-rem)) solid var(--color-blue-mid);
}
@media screen and (max-width: 767px) {
.p-about__outlineData {
padding-block: calc(10 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
line-height: 1.2;
}
}
.p-about__outlineRow:last-child .p-about__outlineData {
border-bottom: calc(1 * var(--to-rem)) solid var(--color-blue-mid);
}
.p-service {
background-color: var(--color-white);
}
.p-service__inner {
max-width: calc(1080 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-service__inner {
max-width: calc(540 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-service__hero {
position: relative;
overflow: hidden;
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-service__heroBg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-service__heroBgPicture {
display: block;
width: 100%;
height: 100%;
}
.p-service__heroBgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-service__heroInner {
position: relative;
z-index: 1;
}
.p-service__intro {
padding-block: calc(53 * var(--to-rem)) 0;
}
@media screen and (max-width: 767px) {
.p-service__intro {
padding-block: calc(30 * var(--to-rem)) 0;
}
}
.p-service__lead {
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.5;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-service__lead {
font-size: calc(20 * var(--to-rem));
line-height: 1.5;
}
}
.p-service__tabsWrap {
padding-block: calc(50 * var(--to-rem)) 0;
}
@media screen and (max-width: 767px) {
.p-service__tabsWrap {
padding-block: calc(30 * var(--to-rem)) 0;
}
}
.p-service__tabs {
display: flex;
list-style: none;
padding-block: 0;
padding-inline: 0;
background-color: var(--color-gray);
border-radius: calc(22 * var(--to-rem));
overflow: hidden;
}
.p-service__tabItem {
flex: 1;
}
.p-service__tab {
display: block;
width: 100%;
padding-block: calc(10 * var(--to-rem));
padding-inline: calc(8 * var(--to-rem));
border: none;
background: transparent;
font-family: var(--base-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
text-align: center;
cursor: pointer;
transition: background-color var(--duration) ease, color var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-service__tab {
padding-block: calc(6 * var(--to-rem));
padding-inline: calc(4 * var(--to-rem));
font-size: calc(13 * var(--to-rem));
}
}
.p-service__tab:hover {
opacity: 0.8;
}
.p-service__tab.is-active {
background-color: #2077cf;
color: var(--color-white);
border-radius: calc(22 * var(--to-rem));
}
.p-service__sectionTitle {
position: relative;
padding-block-end: calc(8 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.5;
color: var(--color-text);
border-block-end: calc(1 * var(--to-rem)) solid var(--color-blue-mid);
}
.p-service__sectionTitle::after {
content: "";
position: absolute;
left: 0;
bottom: calc(-1 * var(--to-rem));
width: calc(300 * var(--to-rem));
height: calc(1 * var(--to-rem));
background-color: #2077cf;
}
@media screen and (max-width: 767px) {
.p-service__sectionTitle {
font-size: calc(20 * var(--to-rem));
padding-block-end: calc(8 * var(--to-rem));
}
.p-service__sectionTitle::after {
display: none;
}
}
.p-service__panels {
padding-block: 0;
}
.p-service__panel {
display: none;
padding-block: calc(18 * var(--to-rem)) calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__panel {
padding-block: calc(28 * var(--to-rem));
}
}
.p-service__panel.is-active {
display: block;
}
.p-service__panelHead {
margin-top: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__panelHead {
margin-top: calc(-8 * var(--to-rem));
}
}
.p-service__panelLead {
margin-top: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__panelLead {
margin-top: calc(10 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-service__compare {
margin-top: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__compare {
margin-top: calc(38 * var(--to-rem));
}
}
.p-service__compareGrid {
position: relative;
margin-top: calc(20 * var(--to-rem));
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
gap: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__compareGrid {
margin-top: calc(20 * var(--to-rem));
grid-template-columns: 1fr;
gap: 0;
}
}
.p-service__compareCard {
align-self: stretch;
display: flex;
flex-direction: column;
padding-block: calc(20 * var(--to-rem)) calc(28 * var(--to-rem));
padding-inline: calc(50 * var(--to-rem));
border: calc(3 * var(--to-rem)) solid var(--color-blue-mid);
border-radius: calc(10 * var(--to-rem));
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-service__compareCard {
padding-block: calc(14 * var(--to-rem)) calc(20 * var(--to-rem));
padding-inline: calc(12 * var(--to-rem));
}
}
.p-service__compareCard--after {
border-color: rgba(166, 235, 193, 0.4);
}
.p-service__compareLabel {
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-service__compareLabel {
font-size: calc(16 * var(--to-rem));
}
}
.p-service__compareImage {
margin-top: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__compareImage {
margin-top: calc(6 * var(--to-rem));
}
}
.p-service__compareImage img {
display: block;
width: 100%;
max-width: calc(390 * var(--to-rem));
height: auto;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-service__compareImage img {
max-width: calc(280 * var(--to-rem));
}
}
.p-service__compareList {
margin-top: calc(15 * var(--to-rem));
list-style: none;
padding-block: 0;
padding-inline: 0;
}
.p-service__compareItem {
position: relative;
padding-inline-start: calc(22 * var(--to-rem));
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-text);
}
.p-service__compareItem::before {
content: "";
position: absolute;
top: 50%;
translate: 0 -50%;
left: 0;
width: calc(10 * var(--to-rem));
height: calc(10 * var(--to-rem));
border-radius: 50%;
background-color: var(--color-blue-mid);
}
@media screen and (max-width: 767px) {
.p-service__compareItem {
font-size: calc(14 * var(--to-rem));
padding-inline-start: calc(25 * var(--to-rem));
line-height: 1.2;
}
.p-service__compareItem::before {
width: calc(7 * var(--to-rem));
height: calc(7 * var(--to-rem));
left: calc(10 * var(--to-rem));
}
}
.p-service__compareCard--after .p-service__compareItem::before {
background-color: rgba(166, 235, 193, 0.8);
}
.p-service__compareArrow {
position: absolute;
top: 50%;
left: 50%;
width: calc(60 * var(--to-rem));
height: calc(60 * var(--to-rem));
background-color: #a5e1bd;
clip-path: polygon(0 0, 100% 50%, 0 100%);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 1;
}
@media screen and (max-width: 767px) {
.p-service__compareArrow {
position: static;
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
justify-self: center;
clip-path: polygon(0 0, 100% 0, 50% 100%);
transform: none;
margin-block: calc(-15 * var(--to-rem)) 0;
z-index: 2;
}
}
.p-service__services {
margin-top: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__services {
margin-top: calc(60 * var(--to-rem));
}
}
.p-service__schedule {
margin-top: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__schedule {
margin-top: calc(20 * var(--to-rem));
}
}
.p-service__scheduleScroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.p-service__scheduleScroll::-webkit-scrollbar {
display: none;
}
.p-service__scheduleTable {
display: grid;
grid-template-columns: calc(268 * var(--to-rem)) repeat(4, calc(172 * var(--to-rem)));
grid-template-rows: calc(60 * var(--to-rem)) repeat(5, calc(56 * var(--to-rem)));
column-gap: calc(11 * var(--to-rem));
row-gap: 0;
width: calc(1000 * var(--to-rem));
font-family: var(--serif-font-family);
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__scheduleTable {
grid-template-columns: calc(177 * var(--to-rem)) repeat(4, calc(94 * var(--to-rem)));
grid-template-rows: calc(30 * var(--to-rem)) repeat(5, calc(32 * var(--to-rem)));
column-gap: calc(8 * var(--to-rem));
width: calc(585 * var(--to-rem));
}
}
.p-service__scheduleTable thead,
.p-service__scheduleTable tbody,
.p-service__scheduleTable tr {
display: contents;
}
.p-service__scheduleMonth {
align-self: start;
height: calc(39 * var(--to-rem));
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-blue-light);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__scheduleMonth {
height: calc(21 * var(--to-rem));
font-size: calc(12 * var(--to-rem));
}
}
.p-service__scheduleRow {
display: flex;
align-items: center;
gap: calc(7 * var(--to-rem));
font-size: calc(18 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
text-align: left;
}
@media screen and (max-width: 767px) {
.p-service__scheduleRow {
gap: calc(5 * var(--to-rem));
font-size: calc(12 * var(--to-rem));
}
}
.p-service__scheduleRowLabel {
display: inline-block;
flex-shrink: 0;
}
.p-service__scheduleNum {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: calc(36 * var(--to-rem));
height: calc(36 * var(--to-rem));
border-radius: 50%;
background-color: var(--color-white);
border: calc(1 * var(--to-rem)) solid var(--color-navy);
font-size: calc(18 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-service__scheduleNum {
width: calc(26 * var(--to-rem));
height: calc(26 * var(--to-rem));
font-size: calc(12 * var(--to-rem));
}
}
.p-service__scheduleCell {
display: flex;
align-items: center;
}
.p-service__scheduleTable td[colspan="4"] {
grid-column: span 4;
}
.p-service__scheduleTable td[colspan="3"] {
grid-column: span 3;
}
.p-service__scheduleBar {
display: flex;
flex: 1;
align-items: center;
height: calc(27 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border-radius: calc(13 * var(--to-rem));
background-color: #bde0fa;
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
text-align: left;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.p-service__scheduleBar {
height: calc(21 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
font-size: calc(12 * var(--to-rem));
}
}
.p-service__scheduleCell--split {
padding: 0;
}
.p-service__scheduleSplitRow {
display: flex;
flex: 1;
width: 100%;
}
.p-service__scheduleBar--splitLeft {
flex: 0 0 37.3092926491%;
}
.p-service__scheduleBar--splitRight {
flex: 0 0 62.6907073509%;
}
.p-service__scheduleHint {
display: none;
}
@media screen and (max-width: 767px) {
.p-service__scheduleHint {
display: block;
margin-top: calc(16 * var(--to-rem));
}
}
.p-service__scheduleHintTrack {
position: relative;
width: 100%;
height: calc(4 * var(--to-rem));
border-radius: calc(2 * var(--to-rem));
background-color: rgba(51, 51, 51, 0.25);
}
.p-service__scheduleHintThumb {
position: absolute;
top: 0;
left: 0;
width: calc(100 * var(--to-rem));
height: calc(4 * var(--to-rem));
border-radius: calc(2 * var(--to-rem));
background-color: #2077cf;
transition: left 0.05s linear;
}
.p-service__scheduleHintText {
margin-top: calc(6 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-medium);
color: #000;
text-align: right;
}
.p-service__servicesList {
list-style: none;
padding-block: 0;
padding-inline: 0;
margin-top: calc(60 * var(--to-rem));
counter-reset: service;
}
@media screen and (max-width: 767px) {
.p-service__servicesList {
margin-top: calc(38 * var(--to-rem));
}
}
.p-service__service {
padding-block: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__service {
padding-block: calc(20 * var(--to-rem));
}
}
.p-service__serviceHead {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
column-gap: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__serviceHead {
column-gap: calc(6 * var(--to-rem));
}
}
.p-service__serviceNum {
font-family: "Times New Roman", serif;
font-style: italic;
font-size: calc(46 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-service__serviceNum {
font-size: calc(24 * var(--to-rem));
}
}
.p-service__serviceTitle {
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.5;
letter-spacing: -0.02em;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-service__serviceTitle {
font-size: calc(18 * var(--to-rem));
font-weight: 600;
letter-spacing: 0;
}
}
.p-service__serviceTitle:has(br) {
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.p-service__serviceTitle:has(br) {
white-space: normal;
}
}
.p-service__serviceMain {
margin-top: calc(20 * var(--to-rem));
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: calc(40 * var(--to-rem));
padding-inline-start: calc(calc(46 * var(--to-rem)) + calc(20 * var(--to-rem)));
}
@media screen and (max-width: 767px) {
.p-service__serviceMain {
grid-template-columns: 1fr;
gap: calc(20 * var(--to-rem));
padding-inline-start: 0;
}
}
.p-service__serviceMain--full {
grid-template-columns: 1fr;
}
.p-service__serviceLayout {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__serviceLayout {
grid-template-columns: 1fr;
gap: calc(20 * var(--to-rem));
}
}
.p-service__serviceLayoutLeft {
min-width: 0;
}
.p-service__serviceLayoutLeft .p-service__serviceTextWrap {
margin-top: calc(20 * var(--to-rem));
padding-inline-start: calc(56 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__serviceLayoutLeft .p-service__serviceTextWrap {
padding-inline-start: 0;
margin-top: calc(15 * var(--to-rem));
}
}
.p-service__serviceTextWrap {
min-width: 0;
}
.p-service__serviceText {
margin: 0;
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.5;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__serviceText {
font-size: calc(14 * var(--to-rem));
line-height: 1.5;
}
}
.p-service__serviceText + .p-service__serviceText {
margin-top: calc(15 * var(--to-rem));
}
.p-service__serviceImage {
width: calc(452 * var(--to-rem));
align-self: start;
}
@media screen and (max-width: 767px) {
.p-service__serviceImage {
width: 100%;
}
}
.p-service__serviceImage img {
display: block;
width: 100%;
height: auto;
}
.p-service__cycle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: calc(110 * var(--to-rem));
margin-top: calc(40 * var(--to-rem));
padding-inline: calc(28 * var(--to-rem));
border: calc(3 * var(--to-rem)) solid #bde0fa;
border-radius: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__cycle {
height: calc(94 * var(--to-rem));
margin-top: calc(33 * var(--to-rem));
padding-inline: calc(16 * var(--to-rem));
}
}
.p-service__cycleLabel,
.p-service__planLabel,
.p-service__lineExamplesLabel {
position: absolute;
top: 0;
left: calc(10 * var(--to-rem));
transform: translateY(-50%);
display: inline-block;
padding-block: calc(4 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border-radius: calc(13 * var(--to-rem));
background-color: #bde0fa;
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__cycleLabel,
.p-service__planLabel,
.p-service__lineExamplesLabel {
left: calc(71 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-service__lineExamplesLabel {
left: 50%;
transform: translate(-50%, -50%);
}
}
.p-service__cycleList {
display: flex;
align-items: start;
justify-content: center;
gap: calc(6 * var(--to-rem));
list-style: none;
padding-block: 0;
padding-inline: 0;
}
.p-service__cycleItem {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: var(--serif-font-family);
flex: 0 0 auto;
}
.p-service__cycleArrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: calc(50 * var(--to-rem));
height: calc(6 * var(--to-rem));
margin-top: calc(7 * var(--to-rem));
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__cycleArrow {
width: calc(20 * var(--to-rem));
height: calc(3 * var(--to-rem));
margin-top: calc(6 * var(--to-rem));
}
}
.p-service__cycleArrowSvg {
width: 100%;
height: 100%;
}
.p-service__cycleStep {
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__cycleStep {
font-size: calc(14 * var(--to-rem));
}
}
.p-service__cycleNote {
margin-top: calc(4 * var(--to-rem));
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__cycleNote {
margin-top: calc(2 * var(--to-rem));
font-size: calc(8 * var(--to-rem));
}
}
.p-service__plan {
position: relative;
margin-top: calc(40 * var(--to-rem));
padding-block: calc(28 * var(--to-rem));
padding-inline: calc(28 * var(--to-rem));
border: calc(3 * var(--to-rem)) solid #bde0fa;
border-radius: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__plan {
margin-top: calc(28 * var(--to-rem));
padding-block: calc(14 * var(--to-rem)) calc(13 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem)) 0;
}
}
.p-service__planNote {
margin-top: calc(12 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(10 * var(--to-rem));
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__planNote {
margin-top: calc(9 * var(--to-rem));
text-align: center;
}
}
.p-service__planTarget {
margin-top: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__planTarget {
margin-top: calc(28 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-service__planScroll {
margin-top: calc(16 * var(--to-rem));
margin-left: calc(-10 * var(--to-rem));
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 767px) {
.p-service__planScroll {
margin-top: calc(26 * var(--to-rem));
scrollbar-width: none;
}
.p-service__planScroll::-webkit-scrollbar {
display: none;
}
}
.p-service__planTable {
width: 100%;
border-collapse: separate;
border-spacing: calc(11 * var(--to-rem)) calc(4 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
color: var(--color-text);
table-layout: fixed;
}
@media screen and (max-width: 767px) {
.p-service__planTable {
min-width: calc(680 * var(--to-rem));
font-size: calc(12 * var(--to-rem));
border-spacing: calc(8 * var(--to-rem)) calc(3 * var(--to-rem));
}
}
.p-service__planTable th,
.p-service__planTable td {
padding-block: calc(8 * var(--to-rem));
padding-inline: calc(4 * var(--to-rem));
text-align: center;
vertical-align: middle;
}
@media screen and (max-width: 767px) {
.p-service__planTable th,
.p-service__planTable td {
padding-block: 0;
padding-inline: 0;
}
}
.p-service__planTable thead th.p-service__planMonth {
background-color: var(--color-blue-light);
font-weight: var(--fw-medium);
text-align: center;
}
.p-service__planSubject {
width: calc(60 * var(--to-rem));
text-align: center;
font-weight: var(--fw-medium);
}
@media screen and (max-width: 767px) {
.p-service__planSubject {
position: sticky;
left: 0;
z-index: 2;
width: calc(40 * var(--to-rem));
text-align: left;
background-color: var(--color-white);
}
}
.p-service__planMonth {
width: auto;
}
.p-service__planCell {
padding-block: calc(4 * var(--to-rem));
}
.p-service__planBar {
display: block;
padding-block: calc(5 * var(--to-rem));
padding-inline: calc(8 * var(--to-rem));
border-radius: calc(15 * var(--to-rem));
background-color: var(--color-blue-mid);
line-height: 1.3;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.p-service__planBar--green {
background-color: rgba(165, 225, 189, 0.6);
}
.p-service__planBar--yellow {
background-color: rgba(255, 231, 126, 0.4);
}
.p-service__planPhase td {
padding-block: calc(4 * var(--to-rem));
}
.p-service__planPhaseLabel {
display: block;
padding-block: calc(6 * var(--to-rem));
padding-inline: calc(8 * var(--to-rem));
border: calc(2 * var(--to-rem)) solid var(--color-blue-mid);
border-radius: calc(4 * var(--to-rem));
background-color: transparent;
color: var(--color-text);
font-weight: var(--fw-medium);
text-align: center;
line-height: 1.3;
}
.p-service__planPhaseLabel--basic {
border-color: rgba(90, 178, 242, 0.6);
}
.p-service__planPhaseLabel--shift {
border-color: rgb(165, 225, 189);
}
.p-service__planPhaseLabel--exam {
border-color: rgb(255, 231, 126);
}
.p-service__planHint {
display: none;
}
@media screen and (max-width: 767px) {
.p-service__planHint {
display: block;
margin-top: calc(12 * var(--to-rem));
}
}
.p-service__planHintTrack {
position: relative;
width: calc(302 * var(--to-rem));
max-width: 100%;
height: calc(4 * var(--to-rem));
margin-inline: auto;
border-radius: calc(2 * var(--to-rem));
background-color: rgba(51, 51, 51, 0.25);
}
.p-service__planHintThumb {
position: absolute;
top: 0;
left: 0;
width: calc(82 * var(--to-rem));
height: calc(4 * var(--to-rem));
border-radius: calc(2 * var(--to-rem));
background-color: #2077cf;
transition: left 0.05s linear;
}
.p-service__planHintText {
margin-top: calc(6 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-medium);
color: #000;
text-align: right;
}
.p-service__line {
margin-top: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__line {
margin-top: calc(28 * var(--to-rem));
}
}
.p-service__lineSliderWrap {
position: relative;
margin-inline: calc(-100 * var(--to-rem));
padding-inline: calc(133 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__lineSliderWrap {
margin-inline: 0;
padding-inline: calc(40 * var(--to-rem));
}
}
.p-service__lineSlider .swiper-wrapper {
padding-block: 0;
padding-inline: 0;
list-style: none;
}
.p-service__lineShot img {
display: block;
width: calc(257 * var(--to-rem));
max-width: 100%;
height: auto;
margin-inline: auto;
}
.p-service__lineArrow {
position: absolute;
top: 50%;
z-index: 2;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: calc(60 * var(--to-rem));
height: calc(60 * var(--to-rem));
border-radius: 50%;
background-color: var(--color-white);
border: calc(1 * var(--to-rem)) solid var(--color-navy);
opacity: 1;
cursor: pointer;
transition: background-color var(--duration) ease;
}
@media (any-hover: hover) {
.p-service__lineArrow:hover {
background-color: var(--color-navy);
}
}
@media screen and (max-width: 767px) {
.p-service__lineArrow {
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
}
}
.p-service__lineArrow.swiper-button-disabled {
opacity: 0.3;
cursor: default;
}
.p-service__lineArrow svg {
width: calc(20 * var(--to-rem));
height: calc(20 * var(--to-rem));
fill: var(--color-navy);
transition: fill var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-service__lineArrow svg {
width: calc(10 * var(--to-rem));
height: calc(10 * var(--to-rem));
}
}
@media (any-hover: hover) {
.p-service__lineArrow:hover svg {
fill: var(--color-white);
}
}
.p-service__lineArrow--prev {
left: 0;
}
.p-service__lineArrow--prev svg {
transform: rotate(180deg);
}
.p-service__lineArrow--next {
right: 0;
}
.p-service__lineExamples {
position: relative;
margin-top: calc(60 * var(--to-rem));
padding-block: calc(33 * var(--to-rem)) calc(30 * var(--to-rem));
padding-inline: calc(91 * var(--to-rem)) calc(40 * var(--to-rem));
border: calc(3 * var(--to-rem)) solid #bde0fa;
border-radius: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__lineExamples {
margin-top: calc(40 * var(--to-rem));
padding-block: calc(33 * var(--to-rem)) calc(40 * var(--to-rem));
padding-inline: calc(19 * var(--to-rem));
}
}
.p-service__lineSliderNote {
display: none;
}
@media screen and (max-width: 767px) {
.p-service__lineSliderNote {
display: block;
margin-top: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(10 * var(--to-rem));
font-weight: var(--fw-medium);
color: var(--color-text);
text-align: center;
}
}
.p-service__lineExamplesList {
list-style: none;
padding-block: 0;
padding-inline: 0;
}
.p-service__lineExamplesItem {
position: relative;
padding-inline-start: calc(22 * var(--to-rem));
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.6;
color: var(--color-text);
}
.p-service__lineExamplesItem::before {
content: "";
position: absolute;
top: 50%;
left: 0;
translate: 0 -50%;
width: calc(10 * var(--to-rem));
height: calc(10 * var(--to-rem));
border-radius: 50%;
background-color: #bde0fa;
}
@media screen and (max-width: 767px) {
.p-service__lineExamplesItem {
font-size: calc(14 * var(--to-rem));
padding-inline-start: calc(11 * var(--to-rem));
}
}
.p-service__lineExamplesItem + .p-service__lineExamplesItem {
margin-top: calc(8 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__lineExamplesItem + .p-service__lineExamplesItem {
margin-top: calc(20 * var(--to-rem));
}
}
.p-service__flow {
padding-block: calc(60 * var(--to-rem)) calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flow {
padding-block: calc(13 * var(--to-rem)) calc(40 * var(--to-rem));
}
}
.p-service__flowGrid {
margin-top: calc(40 * var(--to-rem));
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: calc(80 * var(--to-rem));
row-gap: calc(60 * var(--to-rem));
grid-template-areas: "lineCol formCol" "steps   steps";
}
@media screen and (max-width: 767px) {
.p-service__flowGrid {
margin-top: calc(20 * var(--to-rem));
grid-template-columns: 1fr;
column-gap: 0;
row-gap: calc(20 * var(--to-rem));
grid-template-areas: "lineCol" "steps" "formCol";
}
}
.p-service__flowBranch--line {
grid-area: lineCol;
position: relative;
padding-inline-start: calc(77 * var(--to-rem));
}
.p-service__flowBranch--line::after {
content: "";
position: absolute;
top: calc(66 * var(--to-rem));
bottom: 0;
right: calc(-40 * var(--to-rem));
width: 1px;
background-color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__flowBranch--line {
padding-inline-start: 0;
}
.p-service__flowBranch--line::after {
display: none;
}
}
.p-service__flowBranch--form {
grid-area: formCol;
}
.p-service__flowBranchTitle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: calc(319 * var(--to-rem));
max-width: 100%;
height: calc(45 * var(--to-rem));
margin-inline: auto;
padding-inline: calc(16 * var(--to-rem));
border-radius: calc(28 * var(--to-rem));
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-bold);
line-height: 1.4;
color: var(--color-white);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-service__flowBranchTitle {
width: 100%;
}
}
.p-service__flowBranchTitleText {
display: block;
}
.p-service__flowBranchTitle--line {
background-color: var(--color-line-green);
}
.p-service__flowBranchTitle--form {
background-color: #2077cf;
margin-inline-start: calc(38 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranchTitle--form {
margin-inline-start: auto;
}
}
.p-service__flowBranchTriangle {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
display: block;
width: calc(26 * var(--to-rem));
height: calc(22 * var(--to-rem));
pointer-events: none;
}
@media screen and (max-width: 767px) {
.p-service__flowBranchTriangle {
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
transform: translate(-50%, calc(-15 * var(--to-rem)));
}
}
.p-service__flowBranchTriangle--line {
color: var(--color-line-green);
}
.p-service__flowBranchTriangle--form {
color: #2077cf;
}
.p-service__flowBranchTriangleSvg {
display: block;
width: 100%;
height: 100%;
}
.p-service__flowBranchStep {
position: relative;
margin-top: calc(45 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranchStep {
margin-top: calc(35 * var(--to-rem));
padding-inline-start: calc(40 * var(--to-rem));
}
}
.p-service__flowBranchStep + .p-service__flowBranchStep {
margin-top: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranchStep + .p-service__flowBranchStep {
margin-top: calc(23 * var(--to-rem));
}
}
.p-service__flowBranchBody--form {
margin-top: calc(45 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranchBody--form {
margin-top: calc(35 * var(--to-rem));
}
}
.p-service__flowNum {
position: absolute;
top: calc(-10 * var(--to-rem));
left: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(50 * var(--to-rem));
height: calc(50 * var(--to-rem));
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-service__flowNum {
top: 0;
width: calc(30 * var(--to-rem));
height: calc(30 * var(--to-rem));
}
}
.p-service__flowBranch--line .p-service__flowNum {
left: calc(-77 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranch--line .p-service__flowNum {
left: 0;
}
}
.p-service__flowSteps .p-service__flowNum {
top: calc(-7 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowSteps .p-service__flowNum {
top: 0;
}
}
.p-service__flowNumSvg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.p-service__flowNumText {
position: relative;
font-family: "Times New Roman", serif;
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
color: var(--color-navy);
}
@media screen and (max-width: 767px) {
.p-service__flowNumText {
font-size: calc(16 * var(--to-rem));
}
}
.p-service__flowBranchText {
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
color: var(--color-text);
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.p-service__flowBranchText {
font-size: calc(14 * var(--to-rem));
white-space: normal;
}
}
.p-service__flowBranchText + .p-service__flowBranchText {
margin-top: calc(20 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranch--line .p-service__flowBranchText + .p-service__flowBranchText {
margin-top: 0;
}
}
.p-service__flowBtn {
display: flex;
align-items: center;
justify-content: center;
gap: calc(12 * var(--to-rem));
width: calc(396 * var(--to-rem));
max-width: 100%;
height: calc(45 * var(--to-rem));
border-radius: calc(5 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: 600;
color: var(--color-white);
text-decoration: none;
filter: drop-shadow(2px 2px 4px rgba(51, 51, 51, 0.25));
transition: opacity var(--duration) ease;
}
.p-service__flowBtn:hover {
opacity: 0.85;
}
@media screen and (max-width: 767px) {
.p-service__flowBtn {
width: 100%;
}
}
.p-service__flowBtn--line {
margin-top: calc(40 * var(--to-rem));
background-color: var(--color-line-green);
}
@media screen and (max-width: 767px) {
.p-service__flowBtn--line {
margin-top: calc(20 * var(--to-rem));
margin-inline-start: calc(-40 * var(--to-rem));
width: calc(350 * var(--to-rem));
max-width: none;
}
}
.p-service__flowBtn--line img {
width: calc(45 * var(--to-rem));
height: calc(45 * var(--to-rem));
}
.p-service__flowBtn--form {
margin-top: calc(10 * var(--to-rem));
background-color: #2077cf;
}
@media screen and (max-width: 767px) {
.p-service__flowBtn--form {
margin-top: calc(20 * var(--to-rem));
}
}
.p-service__flowBranchBody--form .p-service__flowBtn + .p-service__flowBranchText {
margin-top: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranchBody--form .p-service__flowBtn + .p-service__flowBranchText {
margin-top: calc(20 * var(--to-rem));
}
}
.p-service__flowBranchBody--form .p-service__flowBranchText {
padding-inline-start: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranchBody--form .p-service__flowBranchText {
padding-inline-start: 0;
}
}
.p-service__flowBranchImage {
margin-top: calc(20 * var(--to-rem));
}
.p-service__flowBranch--line .p-service__flowBranchImage {
margin-top: calc(11 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranch--line .p-service__flowBranchImage {
margin-top: calc(20 * var(--to-rem));
margin-inline-start: calc(-40 * var(--to-rem));
width: calc(100% + calc(40 * var(--to-rem)));
max-width: none;
}
}
.p-service__flowBranch--form .p-service__flowBranchImage {
margin-top: calc(68 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranch--form .p-service__flowBranchImage {
margin-top: calc(20 * var(--to-rem));
}
}
.p-service__flowBranchImage img {
display: block;
width: 100%;
height: auto;
}
.p-service__flowBranch--line .p-service__flowBranchImage img {
max-width: calc(328 * var(--to-rem));
}
.p-service__flowBranch--form .p-service__flowBranchImage img {
max-width: calc(396 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowBranch--line .p-service__flowBranchImage img,
.p-service__flowBranch--form .p-service__flowBranchImage img {
max-width: 100%;
}
}
.p-service__flowSteps {
grid-area: steps;
list-style: none;
padding-block: 0;
padding-inline: 0;
margin: 0;
}
.p-service__flowStep {
position: relative;
padding-inline-start: calc(77 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowStep {
padding-inline-start: calc(40 * var(--to-rem));
}
}
.p-service__flowStep + .p-service__flowStep {
margin-top: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowStep + .p-service__flowStep {
margin-top: calc(20 * var(--to-rem));
}
}
.p-service__flowStepBody {
padding-top: calc(7 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-service__flowStepBody {
padding-top: calc(2 * var(--to-rem));
}
}
.p-service__flowStepTitle {
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__flowStepTitle {
font-size: calc(18 * var(--to-rem));
}
}
.p-service__flowStepText {
margin-top: calc(8 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-service__flowStepText {
font-size: calc(14 * var(--to-rem));
margin-top: calc(0 * var(--to-rem));
}
}
.p-newsHero {
position: relative;
overflow: hidden;
min-height: calc(300 * var(--to-rem));
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-newsHero {
min-height: calc(195 * var(--to-rem));
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-newsHero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-newsHero__bgPicture,
.p-newsHero__bgImg {
display: block;
width: 100%;
height: 100%;
}
.p-newsHero__bgImg {
object-fit: cover;
object-position: center;
}
.p-newsHero__inner {
position: relative;
z-index: 1;
}
.p-newsArchive,
.p-newsSingle {
background-color: var(--color-white);
}
.p-newsArchive__content {
padding-block: calc(60 * var(--to-rem)) calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-newsArchive__content {
padding-block: calc(20 * var(--to-rem)) calc(50 * var(--to-rem));
}
}
.p-newsArchive__inner {
max-width: calc(1280 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-newsArchive__inner {
max-width: calc(390 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-newsArchive__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(30 * var(--to-rem)) calc(20 * var(--to-rem));
list-style: none;
}
@media screen and (max-width: 767px) {
.p-newsArchive__list {
grid-template-columns: 1fr;
gap: calc(40 * var(--to-rem));
}
}
.p-newsArchive__empty {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(18 * var(--to-rem));
line-height: 1.8;
text-align: center;
}
@media screen and (max-width: 767px) {
.p-newsArchive__empty {
font-size: calc(14 * var(--to-rem));
}
}
.p-newsCard {
display: flex;
flex-direction: column;
min-height: calc(402 * var(--to-rem));
padding-block: calc(20 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border-radius: calc(30 * var(--to-rem)) 0 calc(30 * var(--to-rem)) 0;
background-color: var(--color-blue-light);
color: var(--color-text);
text-decoration: none;
}
@media (any-hover: hover) {
.p-newsCard:hover .p-newsCard__more {
border-color: var(--color-navy);
background-color: var(--color-navy);
color: var(--color-white);
}
}
@media screen and (max-width: 767px) {
.p-newsCard {
min-height: calc(393 * var(--to-rem));
padding-block: calc(20 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-newsCard__thumb {
overflow: hidden;
width: 100%;
aspect-ratio: 350/178;
background-color: #929292;
}
.p-newsCard__thumbImg,
.p-newsCard__thumbPlaceholder {
display: block;
width: 100%;
height: 100%;
}
.p-newsCard__thumbImg {
object-fit: cover;
object-position: center;
}
.p-newsCard__thumbPlaceholder {
background-color: #929292;
}
.p-newsCard__body {
display: flex;
flex: 1;
flex-direction: column;
}
.p-newsCard__date {
margin-top: calc(10 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
.p-newsCard__title {
display: -webkit-box;
overflow: hidden;
min-height: 1.8em;
margin-top: calc(1 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
@media screen and (max-width: 767px) {
.p-newsCard__title {
min-height: 1.6em;
line-height: 1.6;
}
}
.p-newsCard__excerpt {
display: -webkit-box;
overflow: hidden;
min-height: 3em;
margin-top: calc(7 * var(--to-rem));
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.p-newsCard__more {
display: inline-flex;
justify-content: center;
align-items: center;
min-height: calc(41 * var(--to-rem));
margin-top: auto;
border: 1px solid var(--color-blue-mid);
border-radius: calc(22 * var(--to-rem));
background-color: var(--color-white);
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
transition: border-color var(--duration) ease, background-color var(--duration) ease, color var(--duration) ease;
}
.p-newsPagination {
margin-top: calc(60 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-newsPagination {
margin-top: calc(40 * var(--to-rem));
}
}
.p-newsPagination__inner {
display: flex;
justify-content: center;
align-items: center;
gap: calc(19 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
line-height: 1;
}
@media screen and (max-width: 767px) {
.p-newsPagination__inner {
gap: calc(17 * var(--to-rem));
}
}
.p-newsPagination__number,
.p-newsPagination__edge {
color: inherit;
text-decoration: none;
}
.p-newsPagination__number.current {
font-weight: var(--fw-bold);
text-decoration: underline;
text-underline-offset: calc(2 * var(--to-rem));
}
.p-newsPagination__number.dots,
.p-newsPagination__edge.is-disabled {
opacity: 0.45;
}
.p-newsSingle__content {
padding-block: calc(60 * var(--to-rem)) calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-newsSingle__content {
padding-block: calc(20 * var(--to-rem)) calc(50 * var(--to-rem));
}
}
.p-newsSingle__inner {
max-width: calc(1280 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-newsSingle__inner {
max-width: calc(390 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem)) calc(30 * var(--to-rem));
}
}
.p-newsSingle__date {
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-newsSingle__date {
font-size: calc(16 * var(--to-rem));
}
}
.p-newsSingle__title {
margin-top: calc(1 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: 600;
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-newsSingle__title {
font-size: calc(20 * var(--to-rem));
}
}
.p-newsSingle__body {
max-width: calc(1000 * var(--to-rem));
margin-top: calc(54 * var(--to-rem));
margin-inline: auto;
color: var(--color-text);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.8;
}
@media screen and (max-width: 767px) {
.p-newsSingle__body {
max-width: none;
margin-top: calc(29 * var(--to-rem));
margin-inline: 0;
font-size: calc(14 * var(--to-rem));
line-height: 1.5;
}
}
.p-newsSingle__body > * + * {
margin-top: 1.8em;
}
@media screen and (max-width: 767px) {
.p-newsSingle__body > * + * {
margin-top: 1.5em;
}
}
.p-newsSingle__body a {
color: var(--color-navy);
text-decoration: underline;
}
.p-newsSingle__body img {
max-width: 100%;
height: auto;
}
.p-newsSingle__body h2,
.p-newsSingle__body h3,
.p-newsSingle__body h4 {
color: var(--color-navy);
font-weight: 600;
line-height: 1.6;
}
.p-newsSingle__body ul,
.p-newsSingle__body ol {
padding-inline-start: 1.4em;
}
.p-newsSingle__footer {
max-width: calc(1000 * var(--to-rem));
margin-top: calc(60 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-newsSingle__footer {
max-width: none;
margin-top: calc(42 * var(--to-rem));
margin-inline: 0;
}
}
.p-newsSingle__back {
display: inline-flex;
align-items: center;
gap: calc(18 * var(--to-rem));
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1;
text-decoration: none;
}
@media (any-hover: hover) {
.p-newsSingle__back:hover .p-newsSingle__backText {
text-decoration-thickness: 2px;
}
}
@media screen and (max-width: 767px) {
.p-newsSingle__back {
gap: calc(12 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-newsSingle__backText {
text-decoration: underline;
text-underline-offset: calc(2 * var(--to-rem));
}
.p-contact {
background-color: var(--color-white);
}
.p-contact__hero {
position: relative;
overflow: hidden;
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-contact__heroBg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-contact__heroBgPicture {
display: block;
width: 100%;
height: 100%;
}
.p-contact__heroBgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-contact__heroInner {
position: relative;
z-index: 1;
}
.p-contact__intro {
padding-block: calc(55 * var(--to-rem)) calc(60 * var(--to-rem));
width: calc(1100 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-contact__intro {
padding-block: calc(30 * var(--to-rem));
width: 100%;
}
}
.p-contact__introLead {
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.8;
color: var(--color-navy);
text-align: left;
}
@media screen and (max-width: 767px) {
.p-contact__introLead {
font-size: calc(16 * var(--to-rem));
}
}
.p-contact__lineBtn {
display: flex;
align-items: center;
justify-content: center;
gap: calc(12 * var(--to-rem));
width: calc(405 * var(--to-rem));
max-width: 100%;
height: calc(59 * var(--to-rem));
margin-top: calc(50 * var(--to-rem));
margin-inline: auto;
padding-inline: calc(20 * var(--to-rem));
background-color: var(--color-line-green);
border-radius: calc(5 * var(--to-rem));
color: var(--color-white);
text-decoration: none;
transition: opacity var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-contact__lineBtn {
width: calc(350 * var(--to-rem));
height: calc(45 * var(--to-rem));
margin-top: calc(28 * var(--to-rem));
gap: calc(8 * var(--to-rem));
}
}
.p-contact__lineBtn:hover {
opacity: 0.85;
}
.p-contact__lineBtnIcon {
width: calc(55 * var(--to-rem));
height: calc(55 * var(--to-rem));
object-fit: contain;
}
@media screen and (max-width: 767px) {
.p-contact__lineBtnIcon {
width: calc(34 * var(--to-rem));
height: calc(34 * var(--to-rem));
}
}
.p-contact__lineBtnText {
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-bold);
line-height: 1.8;
color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-contact__lineBtnText {
font-size: calc(16 * var(--to-rem));
}
}
.p-contact__form {
padding-block: calc(39 * var(--to-rem)) calc(140 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__form {
padding-block: calc(15 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-contact__formTitle {
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
text-align: center;
padding-block: 0 calc(10 * var(--to-rem));
background-image: linear-gradient(to right, #2077cf 0, #2077cf 30%, var(--color-blue-mid) 30%, var(--color-blue-mid) 100%);
background-position: 0 100%;
background-size: 100% calc(1 * var(--to-rem));
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.p-contact__formTitle {
font-size: calc(20 * var(--to-rem));
padding-block: 0 calc(10 * var(--to-rem));
}
}
.p-contact__formBody {
margin-top: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__formBody {
margin-top: calc(6 * var(--to-rem));
}
}
.p-contact__formBody .wpcf7 {
max-width: calc(970 * var(--to-rem));
margin-inline: auto;
}
.p-contact__row {
display: grid;
grid-template-columns: calc(215 * var(--to-rem)) 1fr;
align-items: start;
column-gap: calc(44 * var(--to-rem));
padding-block: calc(15 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__row {
grid-template-columns: 1fr;
row-gap: calc(10 * var(--to-rem));
padding-block: calc(10 * var(--to-rem));
}
}
.p-contact__rowLabel {
display: flex;
align-items: center;
gap: calc(14 * var(--to-rem));
min-height: calc(43 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-contact__rowLabel {
min-height: auto;
font-weight: var(--fw-bold);
}
}
.p-contact__rowLabel .p-contact__required {
margin-inline-start: auto;
}
@media screen and (max-width: 767px) {
.p-contact__rowLabel .p-contact__required {
margin-inline-start: 0;
}
}
.p-contact__required {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(36 * var(--to-rem));
height: calc(21 * var(--to-rem));
padding-top: calc(1 * var(--to-rem));
background-color: #ffa6a6;
border-radius: calc(3 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1;
color: var(--color-text);
}
.p-contact__rowField {
min-width: 0;
}
.p-contact__formBody .wpcf7-form-control-wrap {
display: block;
position: relative;
}
.p-contact__formBody input[type=text],
.p-contact__formBody input[type=tel],
.p-contact__formBody input[type=email],
.p-contact__formBody textarea {
width: 100%;
height: calc(43 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
background-color: var(--color-white);
border: calc(1 * var(--to-rem)) solid #929292;
border-radius: 0;
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.4;
color: var(--color-text);
}
.p-contact__formBody input[type=text]::placeholder,
.p-contact__formBody input[type=tel]::placeholder,
.p-contact__formBody input[type=email]::placeholder,
.p-contact__formBody textarea::placeholder {
color: #929292;
font-size: calc(14 * var(--to-rem));
}
.p-contact__formBody input[type=text]:focus,
.p-contact__formBody input[type=tel]:focus,
.p-contact__formBody input[type=email]:focus,
.p-contact__formBody textarea:focus {
outline: none;
border-color: var(--color-navy);
}
.p-contact__formBody textarea {
height: calc(80 * var(--to-rem));
min-height: calc(80 * var(--to-rem));
padding-block: calc(10 * var(--to-rem));
line-height: 1.6;
resize: vertical;
field-sizing: auto;
}
.p-contact__formBody .wpcf7-radio {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(20 * var(--to-rem)) calc(36 * var(--to-rem));
min-height: calc(43 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__formBody .wpcf7-radio {
gap: calc(14 * var(--to-rem)) calc(65 * var(--to-rem));
}
}
.p-contact__formBody .wpcf7-list-item {
margin: 0;
padding-block: 0;
padding-inline: 0;
}
.p-contact__formBody .wpcf7-list-item label {
display: inline-flex;
align-items: center;
gap: calc(8 * var(--to-rem));
cursor: pointer;
}
.p-contact__formBody input[type=radio] {
appearance: none;
width: calc(20 * var(--to-rem));
height: calc(20 * var(--to-rem));
margin: 0;
background-color: var(--color-white);
border: calc(1 * var(--to-rem)) solid var(--color-border);
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
transition: border-color var(--duration) ease;
}
.p-contact__formBody input[type=radio]:checked {
border-color: var(--color-navy);
background-image: radial-gradient(circle, var(--color-navy) 0 calc(5 * var(--to-rem)), transparent calc(6 * var(--to-rem)) 100%);
}
.p-contact__formBody input[type=radio]:focus-visible {
outline: calc(2 * var(--to-rem)) solid var(--color-blue-mid);
outline-offset: calc(2 * var(--to-rem));
}
.p-contact__privacy {
margin-top: calc(40 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact__privacy {
margin-top: calc(30 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-contact__formBody input[type=checkbox] {
display: inline-block;
appearance: auto;
width: calc(20 * var(--to-rem));
height: calc(20 * var(--to-rem));
margin: 0;
accent-color: var(--color-navy);
cursor: pointer;
flex-shrink: 0;
}
.p-contact__formBody input[type=checkbox]:focus-visible {
outline: calc(2 * var(--to-rem)) solid var(--color-blue-mid);
outline-offset: calc(2 * var(--to-rem));
}
.p-contact__privacy a {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: calc(3 * var(--to-rem));
}
.p-contact__formBody .wpcf7-list-item-label {
display: inline-block;
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
cursor: pointer;
}
@media screen and (max-width: 767px) {
.p-contact__formBody .wpcf7-list-item-label {
font-size: calc(14 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-contact__row--stackSp .wpcf7-radio {
flex-direction: column;
align-items: flex-start;
gap: calc(14 * var(--to-rem));
}
}
@media screen and (max-width: 767px) {
.p-contact__row--gradeGrid .wpcf7-radio {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(14 * var(--to-rem)) calc(65 * var(--to-rem));
}
}
.p-contact__submit {
margin-top: calc(50 * var(--to-rem));
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact__submit {
margin-top: calc(36 * var(--to-rem));
}
}
.p-contact__privacy + .p-contact__submit {
margin-top: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__privacy + .p-contact__submit {
margin-top: calc(24 * var(--to-rem));
}
}
.p-contact__formBody input[type=submit],
.p-contact__formBody .wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: calc(160 * var(--to-rem));
height: calc(54 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
background-color: var(--color-white);
border: calc(3 * var(--to-rem)) solid var(--color-blue-mid);
border-radius: calc(40 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-bold);
line-height: 1.8;
color: var(--color-text);
cursor: pointer;
transition: background-color var(--duration) ease, color var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-contact__formBody input[type=submit],
.p-contact__formBody .wpcf7-submit {
border-width: calc(2 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
height: calc(44 * var(--to-rem));
min-width: calc(140 * var(--to-rem));
padding-inline: calc(28 * var(--to-rem));
}
}
.p-contact__formBody input[type=submit]:hover,
.p-contact__formBody .wpcf7-submit:hover {
background-color: var(--color-blue-light);
}
.p-contact__formBody .wpcf7-form:not(.invalid):not(.unaccepted) .wpcf7-not-valid-tip {
display: none;
}
.p-contact__formBody .wpcf7-form:not(.invalid):not(.unaccepted) .wpcf7-not-valid {
border-color: #929292;
}
.p-contact__formBody .wpcf7-not-valid-tip {
margin-top: calc(6 * var(--to-rem));
font-size: calc(13 * var(--to-rem));
font-weight: var(--fw-regular);
color: #c40000;
}
.p-contact__formBody .wpcf7-form.invalid .wpcf7-not-valid {
border-color: #c40000;
}
.p-contact__formBody .wpcf7-response-output {
margin: calc(24 * var(--to-rem)) 0 0;
padding-block: calc(12 * var(--to-rem));
padding-inline: calc(16 * var(--to-rem));
border: calc(1 * var(--to-rem)) solid var(--color-border);
border-radius: calc(4 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
line-height: 1.6;
text-align: center;
}
.p-contact__formBody .wpcf7-spinner {
display: none;
margin-left: calc(12 * var(--to-rem));
vertical-align: middle;
}
.p-contact__formBody .wpcf7-form.submitting .wpcf7-spinner {
display: inline-block;
}
.p-contact__thanks {
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-contact__thanks {
padding-block: calc(60 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-contact__thanksInner {
display: flex;
flex-direction: column;
align-items: center;
}
.p-contact__thanksCheck {
width: calc(100 * var(--to-rem));
height: calc(100 * var(--to-rem));
object-fit: contain;
}
@media screen and (max-width: 767px) {
.p-contact__thanksCheck {
width: calc(60 * var(--to-rem));
height: calc(60 * var(--to-rem));
}
}
.p-contact__thanksHeading {
margin-top: calc(20 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-text);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact__thanksHeading {
margin-top: calc(16 * var(--to-rem));
}
}
.p-contact__thanksLead {
margin-top: calc(40 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-text);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-contact__thanksLead {
margin-top: calc(20 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-contact__thanks .p-contact__lineBtn {
margin-top: calc(26 * var(--to-rem));
}
.p-contact__thanksQr {
width: calc(200 * var(--to-rem));
height: calc(200 * var(--to-rem));
margin-top: calc(50 * var(--to-rem));
object-fit: contain;
}
.p-contact__thanksBack {
display: inline-flex;
align-items: center;
gap: calc(8 * var(--to-rem));
margin-top: calc(70 * var(--to-rem));
margin-inline-end: auto;
margin-inline-start: 0;
align-self: flex-start;
color: var(--color-navy);
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
text-decoration: none;
transition: opacity var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-contact__thanksBack {
margin-top: calc(28 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-contact__thanksBack:hover {
opacity: 0.7;
}
.p-contact__thanksBackArrow {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: calc(5 * var(--to-rem)) calc(6 * var(--to-rem)) calc(5 * var(--to-rem)) 0;
border-color: transparent var(--color-navy) transparent transparent;
}
.p-contact__thanksBackText {
text-decoration: underline;
}
.p-download {
background-color: var(--color-white);
}
.p-download__inner {
max-width: calc(1080 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-download__inner {
max-width: calc(540 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-download__hero {
position: relative;
overflow: hidden;
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-download__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-download__heroBg {
position: absolute;
inset: 0;
z-index: 0;
}
.p-download__heroBgPicture {
display: block;
width: 100%;
height: 100%;
}
.p-download__heroBgImg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-download__heroInner {
position: relative;
z-index: 1;
}
.p-download__preview {
padding-block: calc(60 * var(--to-rem)) 0;
}
@media screen and (max-width: 767px) {
.p-download__preview {
padding-block: calc(40 * var(--to-rem)) 0;
}
}
.p-download__previewInner {
max-width: calc(680 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-download__previewInner {
max-width: calc(390 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
}
}
.p-download__previewImg {
display: block;
width: 100%;
height: auto;
}
.p-download__form {
padding-block: calc(65 * var(--to-rem)) calc(140 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-download__form {
padding-block: calc(40 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-download__formTitle {
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
font-family: var(--serif-font-family);
font-size: calc(24 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
text-align: center;
padding-block: 0 calc(10 * var(--to-rem));
background-image: linear-gradient(to right, #2077cf 0, #2077cf 30%, var(--color-blue-mid) 30%, var(--color-blue-mid) 100%);
background-position: 0 100%;
background-size: 100% calc(1 * var(--to-rem));
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.p-download__formTitle {
font-size: calc(20 * var(--to-rem));
padding-block: 0 calc(10 * var(--to-rem));
}
}
.p-download__formLead {
margin-top: calc(30 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.6;
color: var(--color-text);
text-align: center;
}
@media screen and (max-width: 767px) {
.p-download__formLead {
margin-top: calc(20 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
}
}
.p-download__features {
position: relative;
margin-top: calc(40 * var(--to-rem));
padding-block: calc(28 * var(--to-rem)) calc(28 * var(--to-rem));
padding-inline: calc(100 * var(--to-rem));
border: calc(3 * var(--to-rem)) solid #bde0fa;
border-radius: calc(10 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-download__features {
margin-top: calc(30 * var(--to-rem));
padding-block: calc(28 * var(--to-rem)) calc(20 * var(--to-rem));
padding-inline: calc(35 * var(--to-rem)) calc(20 * var(--to-rem));
}
}
.p-download__featuresLabel {
position: absolute;
top: 0;
left: calc(20 * var(--to-rem));
transform: translateY(-50%);
display: inline-block;
padding-block: calc(4 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
border-radius: calc(13 * var(--to-rem));
background-color: #bde0fa;
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-download__featuresLabel {
left: 50%;
translate: -50%;
padding-block: calc(6 * var(--to-rem));
font-size: calc(16 * var(--to-rem));
white-space: nowrap;
}
}
.p-download__featuresList {
list-style: none;
padding-block: 0;
padding-inline: 0;
}
.p-download__featuresItem {
display: flex;
align-items: center;
gap: calc(10 * var(--to-rem));
padding-inline-start: calc(8 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 2;
color: var(--color-text);
}
.p-download__featuresItem::before {
content: "";
flex-shrink: 0;
display: inline-block;
width: calc(15 * var(--to-rem));
height: calc(8 * var(--to-rem));
border-left: calc(2 * var(--to-rem)) solid var(--color-blue-mid);
border-bottom: calc(2 * var(--to-rem)) solid var(--color-blue-mid);
transform: rotate(-45deg);
transform-origin: center;
}
@media screen and (max-width: 767px) {
.p-download__featuresItem {
font-size: calc(14 * var(--to-rem));
gap: calc(8 * var(--to-rem));
padding-inline-start: 0;
line-height: 2.3;
}
.p-download__featuresItem::before {
width: calc(13 * var(--to-rem));
height: calc(7 * var(--to-rem));
}
}
.p-download__formBody {
margin-top: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-download__formBody {
margin-top: calc(8 * var(--to-rem));
}
}
.p-download__formBody .wpcf7 {
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
}
.p-download__row {
display: grid;
grid-template-columns: calc(244 * var(--to-rem)) 1fr;
align-items: start;
column-gap: calc(30 * var(--to-rem));
padding-block: calc(15 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-download__row {
grid-template-columns: 1fr;
row-gap: calc(10 * var(--to-rem));
padding-block: calc(12 * var(--to-rem));
}
}
.p-download__rowLabel {
display: flex;
align-items: center;
gap: calc(14 * var(--to-rem));
min-height: calc(43 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1.4;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-download__rowLabel {
min-height: auto;
font-weight: var(--fw-bold);
}
}
.p-download__rowLabel .p-download__required {
margin-inline-start: auto;
}
@media screen and (max-width: 767px) {
.p-download__rowLabel .p-download__required {
margin-inline-start: 0;
}
}
.p-download__required {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(36 * var(--to-rem));
height: calc(21 * var(--to-rem));
padding-top: calc(1 * var(--to-rem));
background-color: #ffa6a6;
border-radius: calc(3 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-medium);
line-height: 1;
color: var(--color-text);
}
.p-download__rowField {
min-width: 0;
}
.p-download__formBody .wpcf7-form-control-wrap {
display: block;
position: relative;
}
.p-download__formBody input[type=text],
.p-download__formBody input[type=email] {
width: 100%;
height: calc(43 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
background-color: var(--color-white);
border: calc(1 * var(--to-rem)) solid #929292;
border-radius: 0;
font-family: var(--base-font-family);
font-size: calc(16 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.4;
color: var(--color-text);
}
.p-download__formBody input[type=text]::placeholder,
.p-download__formBody input[type=email]::placeholder {
color: #929292;
font-size: calc(14 * var(--to-rem));
}
.p-download__formBody input[type=text]:focus,
.p-download__formBody input[type=email]:focus {
outline: none;
border-color: var(--color-navy);
}
.p-download__submit {
margin-top: calc(50 * var(--to-rem));
text-align: center;
}
@media screen and (max-width: 767px) {
.p-download__submit {
margin-top: calc(30 * var(--to-rem));
}
}
.p-download__formBody input[type=submit],
.p-download__formBody .wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: calc(330 * var(--to-rem));
height: calc(60 * var(--to-rem));
padding-inline: calc(40 * var(--to-rem));
background-color: var(--color-white);
border: calc(3 * var(--to-rem)) solid var(--color-blue-mid);
border-radius: calc(40 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(20 * var(--to-rem));
font-weight: var(--fw-bold);
line-height: 1.8;
color: var(--color-text);
cursor: pointer;
transition: background-color var(--duration) ease, color var(--duration) ease;
}
@media screen and (max-width: 767px) {
.p-download__formBody input[type=submit],
.p-download__formBody .wpcf7-submit {
min-width: calc(350 * var(--to-rem));
}
}
.p-download__formBody input[type=submit]:hover,
.p-download__formBody .wpcf7-submit:hover {
background-color: var(--color-blue-light);
}
.p-download__formBody .wpcf7-form:not(.invalid):not(.unaccepted) .wpcf7-not-valid-tip {
display: none;
}
.p-download__formBody .wpcf7-form:not(.invalid):not(.unaccepted) .wpcf7-not-valid {
border-color: #929292;
}
.p-download__formBody .wpcf7-not-valid-tip {
margin-top: calc(6 * var(--to-rem));
font-size: calc(13 * var(--to-rem));
font-weight: var(--fw-regular);
color: #c40000;
}
.p-download__formBody .wpcf7-form.invalid .wpcf7-not-valid {
border-color: #c40000;
}
.p-download__formBody .wpcf7-response-output {
margin: calc(24 * var(--to-rem)) 0 0;
padding-block: calc(12 * var(--to-rem));
padding-inline: calc(16 * var(--to-rem));
border: calc(1 * var(--to-rem)) solid var(--color-border);
border-radius: calc(4 * var(--to-rem));
font-size: calc(14 * var(--to-rem));
line-height: 1.6;
text-align: center;
}
.p-download__formBody .wpcf7-spinner {
display: none;
margin-left: calc(12 * var(--to-rem));
vertical-align: middle;
}
.p-download__formBody .wpcf7-form.submitting .wpcf7-spinner {
display: inline-block;
}
.p-privacy {
background-color: var(--color-white);
}
.p-privacy__hero {
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-privacy__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-privacy__body {
padding-block: calc(60 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
background-color: var(--color-blue-light);
}
@media screen and (max-width: 767px) {
.p-privacy__body {
padding-block: calc(20 * var(--to-rem));
}
}
.p-privacy__bodyInner {
width: 100%;
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-privacy__bodyInner {
max-width: calc(350 * var(--to-rem));
}
}
.p-privacy__lead {
padding-block: calc(30 * var(--to-rem)) calc(20 * var(--to-rem));
padding-inline: calc(100 * var(--to-rem));
background-color: var(--color-white);
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-text);
}
@media screen and (max-width: 767px) {
.p-privacy__lead {
margin-bottom: calc(74 * var(--to-rem));
padding-block: 0;
padding-inline: calc(10 * var(--to-rem));
background-color: transparent;
}
}
.p-privacy__card {
padding-block: calc(24 * var(--to-rem)) calc(60 * var(--to-rem));
padding-inline: calc(100 * var(--to-rem));
background-color: var(--color-white);
}
@media screen and (max-width: 767px) {
.p-privacy__card {
padding-block: calc(20 * var(--to-rem)) calc(40 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
}
}
.p-privacy__article + .p-privacy__article {
margin-top: calc(40 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-privacy__article + .p-privacy__article {
margin-top: calc(40 * var(--to-rem));
}
}
.p-privacy__articleTitle {
padding-bottom: calc(6 * var(--to-rem));
background-image: linear-gradient(to right, #2077cf 0, #2077cf 30%, #bde0fa 30%, #bde0fa 100%);
background-position: 0 100%;
background-size: 100% calc(1 * var(--to-rem));
background-repeat: no-repeat;
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-bold);
line-height: 1.5;
color: var(--color-text);
}
.p-privacy__articleBody {
margin-top: calc(10 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-text);
}
.p-privacy__articleBody p + p {
margin-top: calc(21 * var(--to-rem));
}
.p-privacy__articleBody a {
color: inherit;
text-decoration: underline;
word-break: break-all;
}
.p-transactions {
background-color: var(--color-white);
}
.p-transactions__hero {
padding-block: calc(120 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-transactions__hero {
padding-block: calc(58 * var(--to-rem)) calc(76 * var(--to-rem));
}
}
.p-transactions__body {
padding-block: calc(34 * var(--to-rem)) calc(110 * var(--to-rem));
padding-inline: calc(20 * var(--to-rem));
background-color: var(--color-blue-light);
}
@media screen and (max-width: 767px) {
.p-transactions__body {
padding-block: calc(30 * var(--to-rem)) calc(70 * var(--to-rem));
}
}
.p-transactions__bodyInner {
width: 100%;
max-width: calc(1000 * var(--to-rem));
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.p-transactions__bodyInner {
max-width: calc(350 * var(--to-rem));
}
}
.p-transactions__info {
background-color: var(--color-white);
padding-block: calc(8 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-transactions__info {
padding-block: calc(4 * var(--to-rem));
padding-inline: calc(10 * var(--to-rem));
}
}
.p-transactions__infoRow {
display: grid;
grid-template-columns: calc(360 * var(--to-rem)) 1fr;
align-items: start;
padding-block: calc(11 * var(--to-rem));
padding-inline: calc(30 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-transactions__infoRow {
grid-template-columns: calc(122 * var(--to-rem)) 1fr;
padding-block: calc(10 * var(--to-rem));
padding-inline: calc(14 * var(--to-rem));
}
}
.p-transactions__infoRow:not(:last-child) {
background-image: linear-gradient(to right, #2077cf 0%, #2077cf 38%, rgba(90, 178, 242, 0.4) 38%, rgba(90, 178, 242, 0.4) 100%);
background-position: 0 100%;
background-size: 100% calc(1 * var(--to-rem));
background-repeat: no-repeat;
}
.p-transactions__infoTerm {
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-black);
}
@media screen and (max-width: 767px) {
.p-transactions__infoTerm {
font-size: calc(11 * var(--to-rem));
}
}
.p-transactions__infoDesc {
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-black);
word-break: break-all;
}
@media screen and (max-width: 767px) {
.p-transactions__infoDesc {
font-size: calc(11 * var(--to-rem));
}
}
.p-transactions__infoLine + .p-transactions__infoLine {
margin-top: 0;
}
@media screen and (max-width: 767px) {
.p-transactions__infoSub {
font-size: calc(8 * var(--to-rem));
}
}
.p-transactions__infoNote {
font-size: inherit;
}
.p-transactions__section {
margin-top: calc(50 * var(--to-rem));
}
@media screen and (max-width: 767px) {
.p-transactions__section {
margin-top: calc(36 * var(--to-rem));
}
}
.p-transactions__sectionTitle {
padding-block: 0 calc(6 * var(--to-rem));
background-image: linear-gradient(to right, #2077cf 0%, #2077cf 30%, rgba(90, 178, 242, 0.4) 30%, rgba(90, 178, 242, 0.4) 100%);
background-position: 0 100%;
background-size: 100% calc(1 * var(--to-rem));
background-repeat: no-repeat;
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-bold);
line-height: 1.5;
color: var(--color-text);
}
.p-transactions__sectionBody {
margin-top: calc(7 * var(--to-rem));
font-family: var(--serif-font-family);
font-size: calc(14 * var(--to-rem));
font-weight: var(--fw-regular);
line-height: 1.5;
color: var(--color-text);
}
.p-transactions__block + .p-transactions__block {
margin-top: calc(21 * var(--to-rem));
}
.p-transactions__list {
list-style: none;
padding-left: calc(21 * var(--to-rem));
}
.p-transactions__listItem {
position: relative;
padding-left: calc(14 * var(--to-rem));
}
.p-transactions__listItem::before {
content: "";
position: absolute;
top: calc(8 * var(--to-rem));
left: 0;
width: calc(4 * var(--to-rem));
height: calc(4 * var(--to-rem));
background-color: currentColor;
border-radius: 50%;
}
:root {
--clip-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
--clip-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
--clip-triangle-right: polygon(0 0, 100% 50%, 0 100%);
--clip-triangle-left: polygon(0 50%, 100% 0, 100% 100%);
--clip-triangle-lower-left: polygon(0 0, 100% 100%, 0 100%);
--clip-triangle-upper-left: polygon(0 0, 100% 0, 0 100%);
--clip-triangle-lower-right: polygon(100% 0, 100% 100%, 0 100%);
--clip-triangle-upper-right: polygon(0 0, 100% 0, 100% 100%);
}
@media (width <= 767px) {
[data-only-device=md] {
display: none;
}
}
@media (width >= 768px) {
[data-only-device=sm] {
display: none;
}
}
.u-sr-only {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(100%);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
white-space: nowrap;
}
.u-text__marker {
background: linear-gradient(transparent 75%, var(--color-orange) 75%);
}
.u-text__inline-block {
display: inline-block;
}
.u-text__indent {
padding-inline-start: 1em;
text-indent: -1em;
}
.u-nobr {
white-space: nowrap;
}