html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset;}@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) { html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }} body { margin: 0;} article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary { display: block;} audio,canvas,progress,video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0;} [hidden],template { display: none;} a { background-color: transparent;} a:active,a:hover,input[type="text"], input[type="password"], textarea, select,button { outline: 0;} abbr[title] { border-bottom: 1px dotted;} b,strong { font-weight: bold;} dfn { font-style: italic;} h1 { font-size: 2em; margin: 0.67em 0;} mark { background: #ff0; color: #000;} small { font-size: 80%;} sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup { top: -0.5em;} sub { bottom: -0.25em;} img { border: 0;} svg:not(:root) { overflow: hidden;} figure { margin: 1em 40px;} hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0;} pre { overflow: auto;} code,kbd,pre,samp { font-family: monospace, monospace; font-size: 1em;} button,input,optgroup,select,textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; background: none;} button,select { text-transform: none;} button,html input[type="button"], input[type="reset"],input[type="submit"] { appearance: button; -webkit-appearance: button; cursor: pointer; } button[disabled],html input[disabled] { cursor: default;} button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0;} input { line-height: normal;} input[type="checkbox"],input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { height: auto;} input[type="search"] { appearance: textfield; -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;} fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;} legend { border: 0; padding: 0; } textarea { overflow: auto;} optgroup { font-weight: bold;} table { border-collapse: collapse; border-spacing: 0;} td,th { padding: 0;} :root { --c-blue: #1A3A49; --c-blue-rgb: 26, 58, 73; --c-white: #FFFFFF; --c-blue-900: #0C5767; --c-blue-700: #1F7385; --c-blue-500: #41A2B6; --c-blue-300: #C2DADF; --c-blue-100: #EFF5F6; --c-gray: #889196; --c-gray-600: #C5C5C5; --c-gray-300: #F1F1F1; --c-link: #2DA5EE; --c-secondary: #B79025; --c-secondary-darken: #99751E; --c-secondary-lighten: #C39C31; --c-danger: #DF171A; --c-danger-darken: #B30000; --c-danger-lighten: #FF0000; --c-submit: #EE5700; --c-submit-darken: #CD4B00; --c-submit-lighten: #FF6B00; --fs-4xl: 6.4rem; --fs-3xl: 4.8rem; --fs-2xl: 3.6rem; --fs-xl: 2.8rem; --fs-lg: 2rem; --fs-md: 1.6rem; --fs-sm: 1.5rem; --fs-xs: 1.4rem; --fs-2xs: 1.2rem; --fs-3xs: 1rem; --fs-4xl-sp: 4rem; --fs-3xl-sp: 2.8rem; --fs-2xl-sp: 2.4rem; --fs-xl-sp: 2rem; --fs-lg-sp: 1.6rem; --fs-md-sp: 1.4rem; --fs-sm-sp: 1.3rem; --fs-xs-sp: 1.2rem; --fs-2xs-sp: 1.1rem; --fs-3xs-sp: 1rem; --fw-default: 400; --fw-bold: 700; --fw-en: 800; --ff-sans-selif: YakuHanJPs, "Roboto", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Sans", "MS PGothic", "Hiragino Kaku Gothic ProN", sans-serif; --ff-en: YakuHanJPs,"Red Hat Display", sans-serif; --line-height: 1.4em; --p-line-height: 2em; --spc: .4rem; --spc-1: calc(var(--spc) * 1); --spc-2: calc(var(--spc) * 2); --spc-3: calc(var(--spc) * 3); --spc-4: calc(var(--spc) * 4); --spc-5: calc(var(--spc) * 5); --spc-6: calc(var(--spc) * 6); --spc-7: calc(var(--spc) * 7); --spc-8: calc(var(--spc) * 8); --spc-9: calc(var(--spc) * 9); --spc-10: calc(var(--spc) * 10); --spc-11: calc(var(--spc) * 11); --spc-12: calc(var(--spc) * 12); --spc-14: calc(var(--spc) * 14); --spc-16: calc(var(--spc) * 16); --spc-20: calc(var(--spc) * 20); --spc-24: calc(var(--spc) * 24); --spc-28: calc(var(--spc) * 28); --spc-32: calc(var(--spc) * 32); --spc-36: calc(var(--spc) * 36); --spc-40: calc(var(--spc) * 40); --spc-44: calc(var(--spc) * 44); --spc-48: calc(var(--spc) * 48); --spc-52: calc(var(--spc) * 52); --spc-56: calc(var(--spc) * 56); --spc-60: calc(var(--spc) * 60); --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50; --container-max-width: 112rem; --container-padding: var(--spc-16); --container-padding-sp: var(--spc-8); --sticky-width: 30rem;} * { box-sizing: border-box; word-wrap: break-word; line-height: var(--line-height); color: var(--c-blue); transition: .2s ease; &:before, &:after { transition: .2s ease; }} body.is-noscroll { overflow: hidden;} html { background-color: var(--c-white); font-size: 62.5%; font-family: var(--ff-sans-selif); -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset; scroll-behavior: smooth;}@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }} body,h1,h2,h3,h4,h5,h6,ul,li,a,p,blockquote { margin: 0;} body,h1,h2,h3,h4,h5,h6,ul,li,p,blockquote { color: var(--c-blue);} body { display: flex; flex-direction: column; min-height: 100vh;} img,svg { display: block; width: 100%; height: auto;} input,label,select,button,textarea { padding: 0; border:0;} h1,h2,h3,h4,h5,h6,p,li,th,td { a { color: var(--c-link); }} h1 { font-size: var(--fs-3xl); @media (max-width: 1024px) { font-size: var(--fs-3xl-sp); }} h2 { font-size: var(--fs-2xl); @media (max-width: 1024px) { font-size: var(--fs-2xl-sp); }} h3 { font-size: var(--fs-xl); @media (max-width: 1024px) { font-size: var(--fs-xl-sp); }} h4 { font-size: var(--fs-md); @media (max-width: 1024px) { font-size: var(--fs-md-sp); }} h5 { font-size: var(--fs-2xs); @media (max-width: 1024px) { font-size: var(--fs-2xs-sp); }} h6 { font-size: var(--fs-3xs); @media (max-width: 1024px) { font-size: var(--fs-3xs-sp); }} ul { padding: 0; list-style: none;} p,li { font-size: var(--fs-md);} p { line-height: var(--p-line-height);} a { color: var(--c-link); text-decoration: none; &:hover { text-decoration: none; cursor: pointer; opacity: .8; }} button,textarea,select { display: block; appearance: none; -webkit-appearance: none; -moz-appearance: none;} textarea { resize: none;}
.l-aside { padding-block: var(--spc-24) var(--spc-36); background-color: var(--c-gray-300); @media (max-width: 1024px) { padding-block: var(--spc-12) var(--spc-24); }} .l-aside-head + .l-aside-content { margin-top: var(--spc-12);} .l-aside-content + .l-aside-bottom { margin-top: var(--spc-8);} .l-aside-bottom-inner { display: flex; flex-direction: column; gap: var(--spc-4);} .l-aside__title { text-align: center; color: var(--c-blue-900); & + .l-aside__desc { margin-top: var(--spc-4); }} .l-aside__desc { max-width: 64rem; margin-inline: auto; color: var(--c-gray);} .l-aside__list { display: flex; flex-wrap: wrap; gap: var(--spc-1); @media (max-width: 1024px) { flex-direction: column; gap: var(--spc-8); } & > li { flex: 1; display: flex; flex-direction: column; }} .l-aside__list-head { display: flex; align-items: center; gap: var(--spc-4); text-align: center; color: var(--c-blue-700); &:before, &::after { content: ''; display: block; flex: 1; height: .1rem; background-color: var(--c-white); } & + .l-aside__list-content { margin-top: var(--spc-4); }} .l-aside__list-content { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spc-1); @media (max-width: 600px) { flex-direction: column; align-items: center; gap: var(--spc-4); } & > article { flex: 1; @media (max-width: 600px) { width: 100%; } }}
.l-container { max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--container-padding); container: layoutContainer / inline-size; @media (max-width: 600px) { padding-inline: var(--container-padding-sp); } &.--wide { max-width: 160rem; padding-inline: var(--container-padding-sp); } &.--narrow { max-width: 72rem; } &.--slim { max-width: 96rem; }}
.l-contents { border-radius: var(--spc-12) var(--spc-12) 0 0; box-shadow: 0 0 var(--spc-2) 0 rgba(var(--c-blue-rgb), 0.1); background-color: var(--c-white); @media (max-width: 1024px) { border-radius: var(--spc-8) var(--spc-8) 0 0; }} .l-contents-head { padding-block: var(--spc-8); & + .l-contents-content { border-top: solid .1rem var(--c-gray-300); } * { color: var(--c-blue-700); }} .l-contents-content { padding-block: var(--spc-12);} .l-contents__btns { display: flex; flex-wrap: wrap; gap: var(--spc-4); margin-top: var(--spc-4);}
.l-footer { position: relative; width: 100%;}
.l-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-40);}
.l-hero { padding-block: var(--spc-48) var(--spc-28); background-size: cover; background-position: top center; background-repeat: no-repeat; @media (max-width: 1024px) { padding-block: var(--spc-28) var(--spc-20); } & + .l-contents { margin-top: calc(var(--spc-12) * -1); @media (max-width: 1024px) { margin-top: calc(var(--spc-8) * -1); } }} .l-hero__titleEn { color: var(--c-blue-500); & + .l-hero__title { margin-top: var(--spc-2); }} .l-hero__title,.l-hero__desc { color: var(--c-blue-700);} .l-hero__title + .l-hero__desc { margin-top: var(--spc-4);}
.l-main { flex: 1; width: 100%;}
.l-sticky-wrapper { position: relative;} .l-sticky { position: absolute; inset: 0 0 0 calc(var(--container-max-width) / 2 - var(--sticky-width) - var(--container-padding) + 50%); @media (max-width: 1280px) { display: none; }} .l-sticky__contents { position: sticky; width: var(--sticky-width); top: 0; padding-top: var(--spc-40);}
.l-toggle { border-radius: var(--spc-12) var(--spc-12) 0 0; overflow: hidden; @media (max-width: 1024px) { border-radius: var(--spc-4) var(--spc-4) 0 0; }} .l-toggle-head { display: flex;}.l-toggle__tabBtn { flex: 1 1 0; padding: var(--spc-6); background-color: var(--c-gray-300); color: var(--c-blue-700); text-align: center; cursor: pointer; @media (max-width: 1024px) { padding: var(--spc-4); } span { display: block; margin-bottom: var(--spc-1); color: var(--c-blue-700); } &:hover { background-color: var(--c-blue-100); } &.is-active { background-color: var(--c-blue-700); color: var(--c-blue-100); cursor: default; span { color: var(--c-blue-100); } }} .l-toggle-content { background-color: var(--c-white);} .l-toggle__contents { display: none; &.is-active { display: block; }}
.fee { display: flex; align-items: baseline; span { line-height: 1em; color: var(--c-blue-900); }}
.features { display: flex; flex-direction: column; gap: var(--spc-2); & > li { display: grid; grid-template-columns: 1.6rem 1fr; align-items: center; gap: var(--spc-1); color: var(--c-gray); * { color: var(--c-gray); } &.--current { color: var(--c-blue-700); * { color: var(--c-blue-700); } } span.--caption { grid-column: 2 / 3; } }}
.label { --pd-block: .5em; display: inline-block; padding: var(--pd-block) calc(var(--line-height) / 2 + var(--pd-block)); border: solid .1rem var(--c-blue-700); border-radius: calc(var(--line-height) / 2 + var(--pd-block)); background-color: var(--c-blue-700); color: var(--c-blue-300); font-weight: var(--fw-bold); text-align: center; &.--block { display: block; width: 100%; } &.--outline { color: var(--c-blue-700); background-color: transparent; }} .skillLabel { display: block; width: fit-content; padding: .25em .5em; border: solid .2rem var(--c-blue-500); border-radius: var(--spc-1); color: var(--c-blue-500);} .feeLabel { width: fit-content; padding: var(--spc-1) var(--spc-2); border: solid .1rem var(--c-danger); color: var(--c-danger);}
.checkbox { & > span { margin: 0; label { display: flex; gap: var(--spc-2); width: fit-content; cursor: pointer; input { width: fit-content; } span { color: var(--c-blue-900); } } }}
.form { max-width: 60rem; & + .form { margin-top: var(--spc-6); } &.--required { .form-head { display: flex; gap: var(--spc-2); &::after { content: '*必須'; font-size: min(var(--fs-3xs), .75em); color: var(--c-danger); } } } &.--short { .form-content { max-width: 32rem; } }} .form-head { color: var(--c-blue-900); & + .form-content { margin-top: var(--spc-1); }} .form-content > span { display: block;} .form-content input,.form-content textarea { display: block; width: 100%; padding: var(--spc-2); border: solid .1rem var(--c-blue-300); border-radius: var(--spc-1);} .form__description { color: var(--c-gray); & + * { margin-top: var(--spc-2); }} .cform { width: 100%; max-width: 60rem; tbody { display: flex; flex-direction: column; gap: var(--spc-6); tr { display: flex; flex-direction: column; gap: var(--spc-1); th, td { text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-bold); } th { display: flex; align-items: center; gap: var(--spc-2); color: var(--c-blue-900); .required-srt { font-size: min(var(--fs-3xs), .75em); color: var(--c-danger); &::before { content: "*"; } } } td { input, textarea, select { display: block; width: 100%; padding: var(--spc-2); border: solid .1rem var(--c-blue-300); border-radius: var(--spc-1); } } } }} .mwform-checkbox-field { display: block; label { display: flex; gap: var(--spc-2); cursor: pointer; width: fit-content; span { display: block; color: var(--c-blue-900); white-space: nowrap; } }} 
.text-4xl { font-size: var(--fs-4xl); @media (max-width: 1024px) { font-size: var(--fs-4xl-sp); }} .text-3xl { font-size: var(--fs-3xl); @media (max-width: 1024px) { font-size: var(--fs-3xl-sp); }} .text-2xl { font-size: var(--fs-2xl); @media (max-width: 1024px) { font-size: var(--fs-2xl-sp); }} .text-xl { font-size: var(--fs-xl); @media (max-width: 1024px) { font-size: var(--fs-xl-sp); }} .text-lg { font-size: var(--fs-lg); @media (max-width: 1024px) { font-size: var(--fs-lg-sp); }} .text-md { font-size: var(--fs-md); @media (max-width: 1024px) { font-size: var(--fs-md-sp); }} .text-sm { font-size: var(--fs-sm); @media (max-width: 1024px) { font-size: var(--fs-sm-sp); }} .text-xs { font-size: var(--fs-xs); @media (max-width: 1024px) { font-size: var(--fs-xs-sp); }} .text-2xs { font-size: var(--fs-2xs); @media (max-width: 1024px) { font-size: var(--fs-2xs-sp); }} .text-3xs { font-size: var(--fs-3xs); @media (max-width: 1024px) { font-size: var(--fs-3xs-sp); }} .text-en { font-family: var(--ff-en); font-weight: var(--fw-en);} .text-bold { font-weight: var(--fw-bold);}
.btn,.submit-btn { display: flex; align-items: center; justify-content: center; gap: 1.25em; position: relative; width: fit-content; padding: 1.25em 1.75em; border-radius: .4em; box-shadow: 0 0 var(--spc-1) 0 rgba(var(--c-blue-rgb), 0.25); color: var(--c-gray-600); overflow: hidden; z-index: 0; span { display: block; &:first-of-type { width: fit-content; margin: -.5em -.5em -.5em -1em; padding: .5em 1em; border-radius: .25em; font-size: min(var(--fs-3xs), .75em); color: var(--c-white); background-color: var(--c-gray-600); & + span { flex: 1; text-align: center; } } } &::before, &::after { content: ''; position: absolute; z-index: -1; } &::before { inset: 0; background-color: var(--c-white); } &::after { inset: 0 0 0 auto; width: 15%; background-color: var(--c-white); transform: skewX(-15deg) translateX(50%); } &:hover { opacity: 1; box-shadow: 0 0 var(--spc-2) 0 rgba(var(--c-blue-rgb), 0.25); &::before { background-color: var(--c-white); } &::after { background-color: var(--c-white); transform: skewX(-15deg) translateX(20%); } } img { width: 1.5em; height: 1.5em; margin-inline: -.5em; } &.--block { width: 100%; } &.--primary { color: var(--c-white); span { color: var(--c-white); &:first-of-type { background-color: var(--c-blue-900); } } &::before { background-color: var(--c-blue-700); } &::after { background-color: var(--c-blue-900); } &:hover { span:first-of-type { background-color: var(--c-blue-700); } &::before { background-color: var(--c-blue-900); } &::after { background-color: var(--c-blue); } } } &.--secondary { color: var(--c-white); span { color: var(--c-white); &:first-of-type { background-color: var(--c-secondary); } } &::before { background-color: var(--c-secondary-lighten); } &::after { background-color: var(--c-secondary); } &:hover { span:first-of-type { background-color: var(--c-secondary-darken); } &::before { background-color: var(--c-secondary); } &::after { background-color: var(--c-secondary-darken); } } } &.--danger { color: var(--c-white); span { color: var(--c-white); &:first-of-type { background-color: var(--c-danger); } } &::before { background-color: var(--c-danger-lighten); } &::after { background-color: var(--c-danger); } &:hover { span:first-of-type { background-color: var(--c-danger-darken); } &::before { background-color: var(--c-danger); } &::after { background-color: var(--c-danger-darken); } } } &.--submit { color: var(--c-white); span { color: var(--c-white); &:first-of-type { background-color: var(--c-submit); } } input { opacity: 0; position: absolute; inset: 0; } &::before { background-color: var(--c-submit-lighten); } &::after { background-color: var(--c-submit); } &:hover { span:first-of-type { background-color: var(--c-submit-darken); } &::before { background-color: var(--c-submit); } &::after { background-color: var(--c-submit-darken); } } }} .submit-btn { margin-top: var(--spc-6); padding: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-white); cursor: pointer; @media (max-width: 1024px) { font-size: var(--fs-sm-sp); } span { color: var(--c-white); &:first-of-type { background-color: var(--c-submit); } } input { padding: 1.25em 1.75em; background-color: transparent; } &::before { background-color: var(--c-submit-lighten); } &::after { background-color: var(--c-submit); } &:hover { span:first-of-type { background-color: var(--c-submit-darken); } &::before { background-color: var(--c-submit); } &::after { background-color: var(--c-submit-darken); } }} input[name="submitBack"] { margin-top: var(--spc-6); padding: 1.25em 1.75em; border-radius: .4em; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-gray); @media (max-width: 1024px) { font-size: var(--fs-sm-sp); }} .tandbBtn { display: block; padding: var(--spc-2); border-radius: var(--spc-1); background-color: var(--c-blue-900); &:hover { background-color: var(--c-blue); & > span + span { border-top-color: var(--c-blue-900); } } & > span { display: block; padding-inline: var(--spc-2); text-align: center; color: var(--c-white); & + span { margin-top: var(--spc-2); padding-top: var(--spc-2); border-top: solid .1rem var(--c-blue-700); } }}
.gnavList { display: flex; height: 100%;}.gnavList__item { position: relative; & > a:hover { opacity: 1; } &.--primary { & > a { display: flex; align-items: flex-end; position: relative; height: 100%; &::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c-gray-300); } &:hover { &::before { width: 100%; } } & > * { position: relative; } } .gnavList__item-inner { display: grid; grid-template-rows: auto auto; column-gap: var(--spc-3); @media (max-width: 1280px) { column-gap: var(--spc-2); } } .gnavList__item-head { display: flex; align-items: center; justify-content: center; grid-row: 1 / 3; } .gnavList__item-content { color: var(--c-blue-500); } & + .gnavList__item.--primary::after { content: ''; position: absolute; top: 0; left: 0; width: 0.1rem; height: 100%; background: var(--c-gray-300); } &.--prev.is-active { .gnavList__item-head img { transform: rotate(270deg); } &:hover > a { .gnavList__item-head img { transform: rotate(270deg); } } } &.--prev:hover > a { .gnavList__item-head img { transform: rotate(90deg); } } &.--prev .gnavList__item-inner { grid-template-columns: 2.4rem 1fr; padding: var(--spc-4) var(--spc-6) var(--spc-4) var(--spc-4); @media (max-width: 1280px) { grid-template-columns: 2rem 1fr; padding: var(--spc-3) var(--spc-5) var(--spc-3) var(--spc-3); } .gnavList__item-content, .gnavList__item-bottom { grid-column-start: 2; } } &.--next > a:hover { .gnavList__item-head img { transform: translateX(var(--spc-1)); } } &.--next .gnavList__item-inner { grid-template-columns: 1fr 2.4rem; padding: var(--spc-4) var(--spc-4) var(--spc-4) var(--spc-6); @media (max-width: 1280px) { grid-template-columns: 1fr 2rem; padding: var(--spc-3) var(--spc-3) var(--spc-3) var(--spc-5); } .gnavList__item-head { grid-column-start: 2; } .gnavList__item-content, .gnavList__item-bottom { grid-column-start: 1; } } } &.--find { & > a { display: flex; align-items: flex-end; position: relative; height: 100%; background-color: var(--c-blue); &::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c-blue-900); } &:hover { &::before { width: 100%; } .gnavList__item-head img { transform: translateX(var(--spc-1)); } } & > * { position: relative; } } .gnavList__item-inner { display: grid; grid-template-columns: 1fr 2.4rem; column-gap: var(--spc-3); row-gap: var(--spc-1); padding: var(--spc-4) var(--spc-4) var(--spc-4) var(--spc-6); @media (max-width: 1280px) { grid-template-columns: 1fr 2rem; padding: var(--spc-3) var(--spc-3) var(--spc-3) var(--spc-5); } } .gnavList__item-head { grid-column-start: 2; grid-row-start: 2; align-self: center; } .gnavList__item-content { grid-column: 1 / 3; color: var(--c-blue-500); } .gnavList__item-bottom { grid-column-start: 1; align-self: center; color: var(--c-white); } & + .gnavList__item.--find::after { content: ''; position: absolute; top: 0; left: 0; width: 0.1rem; height: 100%; background: var(--c-blue-900); } } &.--login { padding: var(--spc-3); @media (max-width: 1280px) { padding: var(--spc-2); } }} .gnavListMenu { display: flex; flex-direction: row-reverse; border-top: .1rem solid var(--c-blue-100); border-radius: 0 0 0 var(--spc-2); background-color: var(--c-white); overflow: hidden;} .gnavListMenu-inner { & > section { display: flex; & + section .gnavListMenu-head { border-top: .1rem solid var(--c-blue-100); } & + section .gnavListMenu-content { border-top: .1rem solid var(--c-gray-300); } }} .gnavListMenu-head { display: grid; width: 17.5rem; text-align: center; background-color: var(--c-blue-300); padding: var(--spc-4) var(--spc-6); & > span { align-self: center; color: var(--c-blue-700); }} .gnavListMenu-content > li + li { border-top: .1rem solid var(--c-blue-100);} .gnavListMenu-content > li > a { display: grid; grid-template-columns: 1fr 6.4rem 2.4rem; align-items: center; column-gap: var(--spc-8); position: relative; padding: var(--spc-4) var(--spc-6); border-right: .1rem solid var(--c-white); & > * { position: relative; } &::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c-blue-100); } &:hover { opacity: 1; &::before { width: 100%; } .gnavListMenu__icon { transform: translateX(var(--spc-1)); } }} .gnavListMenu__close { flex: 1; padding: var(--spc-4); background-color: var(--c-gray-300); & > span { display: block; width: 2.4rem; height: 2.4rem; margin-left: auto; cursor: pointer; &:hover { transform: rotate(90deg); } }} .gnavListMenu__desc { color: var(--c-blue-500);} .gnavListMenu__title { grid-column: 1 / 2; grid-row: 2 / 3;} .gnavListMenu__label { grid-column: 2 / 3; grid-row: 1 / 3; & > span { display: block; padding: var(--spc-1) var(--spc-2); border: solid .1rem var(--c-danger); text-align: center; color: var(--c-danger); }} .gnavListMenu__icon { grid-column: 3 / 4; grid-row: 1 / 3;}
.columns { display: grid; align-items: center; grid-template-columns: 10.8rem 1fr; gap: var(--spc-4); padding-block: var(--spc-4); @media (max-width: 768px) { grid-template-columns: 9.6rem 1fr; gap: var(--spc-2); }} .columns-bottom { color: var(--c-blue-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @media (max-width: 768px) { grid-column: 1 / 3; grid-row: 2 / 3; }} .columns.--reverse .columns-bottom { color: var(--c-blue-300);}
.news { display: grid; align-items: center; grid-template-columns: 10rem 10.8rem 1fr; gap: var(--spc-4); padding-block: var(--spc-4); @media (max-width: 768px) { grid-template-columns: 8.8rem 9.6rem 1fr; gap: var(--spc-2); }} .news-head { color: var(--c-blue-300);} .news-bottom { color: var(--c-blue-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @media (max-width: 768px) { grid-column: 1 / 3; grid-row: 2 / 3; }} .news.--reverse .news-bottom { color: var(--c-blue-300);}
.tile { display: block; max-width: 36rem; background-color: var(--c-blue-700); border-radius: var(--spc-3); &:hover { opacity: 1; .tile__icon { width: 1.6rem; } } &.--reverse .tile-head { color: var(--c-blue-900); * { color: var(--c-blue-900); } } &.--outline { background-color: transparent; border: .1rem solid var(--c-blue-700); .tile-head { color: var(--c-blue-700); * { color: var(--c-blue-700); } } .tile-content { border-color: var(--c-blue-700); } .tile__icon { background-color: var(--c-blue-700); } .tile__text { color: var(--c-blue-700); } }}.tile-head { display: flex; flex-direction: column; gap: var(--spc-2); color: var(--c-blue-300); padding: var(--spc-3) var(--spc-4) var(--spc-6); * { color: var(--c-blue-300); }}.tile-content { display: flex; align-items: center; gap: var(--spc-3); padding: var(--spc-3) var(--spc-4); border-top: .1rem solid var(--c-blue-500);}.tile__icon { width: .8rem; height: .8rem; background-color: var(--c-blue-500); border-radius: .4rem;}.tile__text { color: var(--c-blue-300);}
.feature { padding-bottom: var(--container-padding); & + .feature { border-top: solid .1rem var(--c-blue-900); }} .feature-head { position: relative; padding-top: var(--spc-16); @media (max-width: 1024px) { padding-top: var(--spc-12); } & + .feature-content { margin-top: var(--spc-6); }} .feature-head-inner { display: flex; flex-wrap: wrap; gap: var(--spc-4); width: calc(100% - 32rem); @media (max-width: 1024px) { width: 100%; }} .feature-content { position: relative; margin-inline: var(--container-padding); padding-block: var(--spc-8); border-radius: var(--spc-6); background-color: var(--c-blue-900); @media (max-width: 1024px) { margin-inline: 0; padding-block: 0; border-radius: 0; background-color: transparent; } & > * { position: relative; }} .feature-content-inner { @media (max-width: 1024px) { padding: var(--spc-4) var(--spc-5); border-radius: var(--spc-4); background-color: var(--c-blue-900); }} .feature__catch { span { display: block; line-height: 1em; color: var(--c-white); & + span { margin-top: var(--spc-1); } }} .feature__title { flex: 1; display: flex; align-items: center; gap: var(--spc-1); line-height: 1em; color: transparent; -webkit-text-stroke: .1rem var(--c-white); span { display: block; line-height: 1.2em; color: transparent; }} .feature__desc { width: 100%; color: var(--c-white); & + .feature__issue { @media (max-width: 1024px) { margin-top: var(--spc-4); } }} .feature__issue { position: absolute; top: var(--spc-12); right: var(--spc-12); width: 100%; max-width: 36rem; padding: var(--spc-4) var(--spc-6); border: solid .1rem var(--c-blue-500); border-radius: var(--spc-4); @media (max-width: 1024px) { position: relative; top: 0; right: 0; padding: var(--spc-3) var(--spc-4); border-radius: var(--spc-3); }} .feature__issue-head { position: absolute; top: calc(var(--spc-4) * -1); right: calc(var(--spc-4) * -1); width: 16rem;} .feature__issue-content { span { display: block; line-height: 1em; color: var(--c-blue-500); & + h5 { margin-top: var(--spc-2); } } h5 { color: var(--c-gray-300); }} .feature__contentsDesc { max-width: 64rem; color: var(--c-blue-300); & + .feature__contentsImg { margin-top: var(--spc-4); }}
.faq { display: grid; align-items: center; grid-template-columns: 10.8rem 1fr; gap: var(--spc-4); padding-block: var(--spc-4); @media (max-width: 768px) { grid-template-columns: 9.6rem 1fr; gap: var(--spc-2); }} .faq-bottom { color: var(--c-blue-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @media (max-width: 768px) { grid-column: 1 / 3; grid-row: 2 / 3; }} .faq.--reverse .faq-bottom { color: var(--c-blue-300);}
.wpcontents { * { &:first-child { margin-top: 0; padding-top: 0; border-top: none; } & + * { margin-top: var(--spc-4); } } h2, h3, h4, h5, h6 { color: var(--c-blue-900); } h2 { margin-top: var(--spc-16); padding-top: var(--spc-16); border-top: solid .1rem var(--c-blue-100); font-size: var(--fs-xl); @media (max-width: 1024px) { margin-top: var(--spc-12); font-size: var(--fs-xl-sp); } } h3 { margin-top: var(--spc-10); font-size: var(--fs-lg); @media (max-width: 1024px) { font-size: var(--fs-lg-sp); } } h4 { font-size: var(--fs-md); @media (max-width: 1024px) { font-size: var(--fs-md-sp); } } h5 { font-size: var(--fs-2xs); @media (max-width: 1024px) { font-size: var(--fs-2xs-sp); } } h6 { font-size: var(--fs-3xs); @media (max-width: 1024px) { font-size: var(--fs-3xs-sp); } } p, li, th, td { font-size: var(--fs-md); @media (max-width: 1024px) { font-size: var(--fs-md-sp); } } th { text-align: center; } ul, ol { padding-left: 2em; } ul { list-style-type: disc; } ol { & > li { & + li { margin-top: var(--spc-6); } } } li { line-height: var(--line-height); } hr { margin-block: var(--spc-12); border-width: .1rem; border-color: var(--c-blue-100); } .wp-block-table { margin-inline: auto; }}
.gnavMenuModal { position: fixed; inset: 0; z-index: var(--z-50); display: flex; align-items: flex-start; justify-content: center; transition: opacity 0.3s; opacity: 0; pointer-events: none; overflow-y: scroll;}.gnavMenuModal.is-opened { opacity: 1; pointer-events: auto; .gnavMenuModal-inner { transform: translateY(0); opacity: 1; }}.gnavMenuModal-inner { display: flex; flex-direction: column; gap: var(--spc-12); width: 100%; min-height: 100%; height: fit-content; padding: var(--spc-12); background-color: rgba(var(--c-blue-rgb), .95); transform: translateY(calc(var(--spc-10) * -1)); backdrop-filter: blur(var(--spc-3)); @media (max-width: 1024px) { padding: var(--spc-8); } @media (max-width: 480px) { gap: var(--spc-8); padding: var(--container-padding-sp); }} .gnavMenuModal-head { display: flex; align-items: center; justify-content: space-between;} .gnavMenuModal-content { flex: 1; display: flex; flex-direction: column; gap: var(--spc-4);} .gnavMenuModal-content-inner { display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: var(--spc-8); row-gap: var(--spc-4);} .gnavMenuModal__logo { display: block; width: 16rem; @media (max-width: 1024px) { width: 12.8rem; }} .gnavMenuModal__close { width: 2.4rem; &:hover > img { transform: rotate(90deg); }} .gnavMenuModal__col { width: 20rem;} .gnavMenuModal__col-head { display: flex; flex-direction: column; gap: var(--spc-1); padding-bottom: var(--spc-2); border-bottom: .1rem solid var(--c-blue-700); @media (max-width: 480px) { flex-direction: row; align-items: center; gap: var(--spc-2); } * { color: var(--c-blue-700); }} .gnavMenuModal__col-content { display: flex; flex-direction: column; gap: var(--spc-2); padding-block: var(--spc-3); * { color: var(--c-blue-500); }} .gnavMenuModal__aside { display: flex; flex-wrap: wrap; gap: var(--spc-6); row-gap: var(--spc-2); * { color: var(--c-blue-500); } & + .gnavMenuModal__copyright { margin-top: var(--spc-4); }} .gnavMenuModal__copyright { color: var(--c-blue-700);}
.footerNav { background: var(--c-blue); padding: var(--container-padding); @media (max-width: 600px) { padding: var(--container-padding-sp); }}.footerNav-inner { display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: space-between; margin: 0 auto; column-gap: var(--spc-8); row-gap: var(--spc-12); @media (max-width: 600px) { flex-direction: column; }} .footerNav-content { flex: 1; display: flex; flex-wrap: wrap; gap: var(--spc-8); @media (max-width: 1024px) { row-gap: var(--spc-4); }} .footerNav-bottom { display: flex; flex-direction: column; gap: var(--spc-6); width: 100%;} .footerNav__col { width: 20rem;} .footerNav__col-head { display: flex; flex-direction: column; gap: var(--spc-1); padding-bottom: var(--spc-2); border-bottom: .1rem solid var(--c-blue-900); * { color: var(--c-blue-900); }} .footerNav__col-content { display: flex; flex-direction: column; gap: var(--spc-2); padding-block: var(--spc-3); * { color: var(--c-blue-700); }} .footerNav__aside { display: flex; flex-wrap: wrap; column-gap: var(--spc-6); row-gap: var(--spc-2); * { color: var(--c-blue-700); }} .footerNav__logo { display: block; width: 13.2rem;} .footerNav__copyright { color: var(--c-blue-900);}
.price { padding: var(--spc-4) var(--spc-6); background-color: var(--c-white); border-radius: var(--spc-3); @media (max-width: 1024px) { padding: var(--spc-3) var(--spc-4); border-radius: var(--spc-2); }} .price-head { color: var(--c-blue-500); & + .price-content { margin-top: var(--spc-1); }} .price__title,.price__sub { color: var(--c-blue-500);} .price__price { display: flex; align-items: baseline; line-height: 1em; color: var(--c-blue-900); * { line-height: 1em; color: var(--c-blue-900); } span { display: inline-block; height: 1em; text-align: right; overflow: hidden; &.--w4676 { width: 4.676rem; @media (max-width: 1024px) { width: 3.637rem; } } &.--w4938 { width: 4.938rem; @media (max-width: 1024px) { width: 3.841rem; } } &.--w5815 { width: 5.815rem; @media (max-width: 1024px) { width: 4.523rem; } } &.--w6146 { width: 6.146rem; @media (max-width: 1024px) { width: 4.78rem; } } }}
 .card { max-width: 40rem; background: var(--c-white); border-radius: var(--spc-6); overflow: hidden; box-shadow: 0 0 var(--spc-2) 0 rgba(var(--c-blue-rgb), 0.1); @media (max-width: 1024px) { border-radius: var(--spc-4); } &:hover { box-shadow: 0 0 var(--spc-2) 0 rgba(var(--c-blue-rgb), 0.25); .card__icon { width: 1.6rem; } } & > a { display: flex; flex-direction: column; height: 100%; &:hover { opacity: 1; } }} .card-head { background: var(--c-gray); padding: var(--spc-2); text-align: center; color: var(--c-white);} .card.--current .card-head { background: var(--c-blue-700);} .card-content { flex: 1; padding: var(--spc-6) var(--spc-8); @media (max-width: 1024px) { padding: var(--spc-4) var(--spc-5); }} .card-bottom { display: flex; align-items: center; gap: var(--spc-3); padding: var(--spc-5) var(--spc-6); border-top: .1rem solid var(--c-gray-300); @media (max-width: 1024px) { padding: var(--spc-3) var(--spc-4); }} .card__icon { width: .8rem; height: .8rem; background-color: var(--c-blue-500); border-radius: .4rem;} .card__text { color: var(--c-blue-500);} .planCard-content { @media (max-width: 1280px) { padding: var(--spc-4) var(--spc-5); }} .planCard__title { color: var(--c-blue-700); & + .planCard__subtitle { margin-top: var(--spc-1); }} .planCard__subtitle { color: var(--c-blue-500);} .planCard__desc { margin: var(--spc-4) calc(var(--spc-8) * -1) 0; padding: var(--spc-4) var(--spc-8); color: var(--c-blue-700); background-color: var(--c-blue-100); @media (max-width: 1280px) { margin: var(--spc-4) calc(var(--spc-5) * -1) 0; padding: var(--spc-4) var(--spc-5); } & > * { color: var(--c-blue-700); }} .planCard__label { margin-top: var(--spc-4);} .planCard__price { margin-top: var(--spc-2);} .planCard__features { margin-top: var(--spc-4); padding-top: var(--spc-4); border-top: solid .1rem var(--c-gray-300);} .featureCard__title { color: var(--c-blue-900); & + .featureCard__desc { margin-top: var(--spc-2); }} .featureCard__desc { color: var(--c-gray);} .supportCard { max-width: none;} .supportCard-content { display: grid; grid-template-columns: 1fr 12rem; grid-template-rows: auto 1fr; gap: var(--spc-4); @media (max-width: 1024px) { grid-template-columns: 1fr 9.6rem; } @media (max-width: 480px) { grid-template-columns: 1fr 6.4rem; }} .supportCard__titleEn { line-height: 1em; color: var(--c-blue-300);} .supportCard__title { grid-row: 2 / 3; color: var(--c-blue-900); @media (max-width: 480px) { grid-column: 1 / 3; }} .supportCard__icon { grid-column: 2 / 3; grid-row: 1 / 3; @media (max-width: 480px) { grid-row: 1 / 2; }}
.data { display: flex; flex-wrap: wrap; background: var(--c-blue-100); border-radius: var(--spc-6); @media (max-width: 1024px) { border-radius: var(--spc-4); } @media (max-width: 834px) { display: block; }} .data-head { display: flex; flex-direction: column; gap: var(--spc-2); width: 100%; max-width: 36rem; padding: var(--spc-10) var(--spc-12); @media (max-width: 1024px) { max-width: 25.2rem; padding: var(--spc-5) var(--spc-6); }} .data-content { flex: 1; display: flex; flex-direction: column; gap: var(--spc-2); position: relative; padding: var(--spc-10); border-left: .1rem solid var(--c-white); @media (max-width: 1024px) { padding: var(--spc-6); } @media (max-width: 834px) { padding-top: 0; }} .data__catch { color: var(--c-blue-500); & > span { display: block; color: var(--c-blue-500); }} .data__title { flex: 1; & > span { display: block; }} .data__date { color: var(--c-blue-300);} .data__tiles { display: flex; flex-wrap: wrap; gap: var(--spc-2);} .data__frameworks { display: flex; flex-direction: column; gap: var(--spc-2); padding: var(--spc-4) var(--spc-5) var(--spc-5); background-color: var(--c-white); border-radius: var(--spc-3); @media (max-width: 1024px) { border-radius: var(--spc-2); }} .data__frameworks-head { color: var(--c-blue-500);} .data__frameworks-content { display: flex; flex-wrap: wrap; gap: var(--spc-1);} .a-graph-grow-v path { transform: scaleY(0); transform-origin: bottom; transition: transform 1s cubic-bezier(0.4,0,0.2,1);}.a-graph-grow-v.is-animated path { transform: scaleY(1);} .a-graph-grow-h path { transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(0.4,0,0.2,1);}.a-graph-grow-h.is-animated path { transform: scaleX(1);} .a-graph-visible { opacity: 0; transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1); pointer-events: none;}.a-graph-visible.is-visible { opacity: 1; pointer-events: auto;} .data__summary { display: flex; gap: var(--spc-4); position: absolute; inset: var(--spc-5) var(--spc-5) auto auto; background-color: var(--c-white); border-radius: var(--spc-3); padding: var(--spc-4) var(--spc-5); @media (max-width: 834px) { inset: 0 var(--spc-5) auto auto; padding: var(--spc-3) var(--spc-4); border-radius: var(--spc-2); } @media (max-width: 480px) { position: relative; inset: auto; width: fit-content; }} .data__summary-head { color: var(--c-blue-500); & > span { display: block; color: var(--c-blue-500); }} .data__summary-content { display: flex; align-items: baseline; color: var(--c-blue-900); & > span { display: block; height: 1em; text-align: right; line-height: 1em; color: var(--c-blue-900); overflow: hidden; &.--w6884 { width: 6.884rem; @media (max-width: 1024px) { width: 5.355rem; } } &.--w4616 { width: 4.616rem; @media (max-width: 1024px) { width: 3.591rem; } } &.--w7131 { width: 7.131rem; @media (max-width: 1024px) { width: 5.547rem; } } &.--w6715 { width: 6.715rem; @media (max-width: 1024px) { width: 5.223rem; } } }}
.newsNav { border-radius: var(--spc-12) var(--spc-12) 0 0; background-color: var(--c-blue-900); margin-top: calc(var(--spc-12) * -1); padding-block: var(--spc-16); @media (max-width: 1024px) { padding-block: var(--spc-8); border-radius: var(--spc-8) var(--spc-8) 0 0; }} .newsNav-inner { display: grid; grid-template-columns: 1fr 27.2rem; column-gap: var(--spc-8); row-gap: var(--spc-4); @media (max-width: 1024px) { grid-template-columns: 1fr; }} .newsNav-head { grid-column: 1 / 3;} .newsNav-content { grid-column: 1 / 2; @media (max-width: 1024px) { grid-column: 1 / 3; }} .newsNav-bottom { display: flex; flex-direction: column; gap: var(--spc-2); grid-column: 2 / 3; @media (max-width: 1024px) { grid-column: 1 / 3; }} .newsNav__title { color: var(--c-blue-700);} .newsNav__list > li { & + li { border-top: .1rem solid var(--c-blue-700); }}
.gnav.is-scroll { background-color: var(--c-white); .gnav-inner { @media (max-width: 600px) { padding: 0; } } .gnav-head { padding: var(--spc-6); @media (max-width: 1024px) { padding: 0 var(--spc-4); } }} .gnav-inner { display: flex; justify-content: space-between; @media (max-width: 600px) { padding: var(--spc-2); }}.gnav-head { display: flex; align-items: center; padding: var(--spc-10) var(--container-padding-sp) var(--spc-6); @media (max-width: 1280px) { padding: var(--spc-8) var(--spc-6) var(--spc-6); } @media (max-width: 1024px) { padding: 0 var(--spc-4); }}.gnav-content { display: flex; justify-content: flex-end; position: relative; background-color: var(--c-white); @media (max-width: 1024px) { background-color: transparent; }}.gnav__logo { display: block; width: 20rem; @media (max-width: 1280px) { width: 16rem; } @media (max-width: 1024px) { width: 12.8rem; }}.gnav__nav { @media (max-width: 1024px) { display: none; }}.gnav__menu { display: flex; align-items: center; margin: var(--spc-3) var(--spc-3) var(--spc-3) 0; padding: var(--spc-3); border-radius: var(--spc-1); cursor: pointer; @media (max-width: 1024px) { margin: 0; } &:hover { background-color: var(--c-gray-300); .gnav__menu-content > span { width: 100%; transition: width 0.2s cubic-bezier(0.4,0,0.2,1); } }}.gnav__menu-head { font-size: var(--fs-xs); line-height: 1em; color: var(--c-blue-700); @media (max-width: 1024px) { font-size: var(--fs-3xs-sp); }}.gnav__menu-content { flex: 1; display: flex; flex-direction: column; gap: var(--spc-1); margin-top: var(--spc-2); @media (max-width: 1024px) { margin-top: var(--spc-1); } & > span { display: block; height: 0.2rem; background: var(--c-blue-700); transition: width 0.4s cubic-bezier(0.4,0,0.2,1); &:nth-child(1) { width: 100%; } &:nth-child(2) { width: 66%; } &:nth-child(3) { width: 33%; } }} .gnav__listMenu { position: absolute; inset: 100% 0 auto 0; opacity: 0; pointer-events: none; transform: translateY(calc(var(--spc-4) * -1)); z-index: var(--z-50); &.is-opened { opacity: 1; pointer-events: auto; transform: translateY(0); }}
.a-fadeInUp { opacity: 0; transform: translateY(var(--spc-6)); transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); &.is-inview { opacity: 1; transform: translateY(0); }}
.u-hidden-3xl { @media (max-width: 1440px) { display: none!important; }} .u-hidden-2xl { @media (max-width: 1280px) { display: none!important; }} .u-hidden-xl { @media (max-width: 1024px) { display: none!important; }} .u-hidden-lg { @media (max-width: 768px) { display: none!important; }} .u-hidden-md { @media (max-width: 600px) { display: none!important; }} .u-hidden-sm { @media (max-width: 480px) { display: none!important; }} .u-hidden-xs { @media (max-width: 414px) { display: none!important; }} .u-hidden-2xs { @media (max-width: 375px) { display: none!important; }} .u-hidden-3xs { @media (max-width: 320px) { display: none!important; }}
.u-visible-3xl { display: none!important; @media (max-width: 1440px) { display: block!important; }} .u-visible-2xl { display: none!important; @media (max-width: 1280px) { display: block!important; }} .u-visible-xl { display: none!important; @media (max-width: 1024px) { display: block!important; }} .u-visible-lg { display: none!important; @media (max-width: 768px) { display: block!important; }} .u-visible-md { display: none!important; @media (max-width: 600px) { display: block!important; }} .u-visible-sm { display: none!important; @media (max-width: 480px) { display: block!important; }} .u-visible-xs { display: none!important; @media (max-width: 414px) { display: block!important; }} .u-visible-2xs { display: none!important; @media (max-width: 375px) { display: block!important; }} .u-visible-2xs { display: none!important; @media (max-width: 320px) { display: block!important; }}