@charset "UTF-8";
/* =====================
Custom Property
===================== */
:root {
/* debug */
--debug: false;
/* color */
--black: #111;
--primary: #1818a8;
--text-primary: #2a2f4e;
--secondary: #7fb3d6;
--sub: #3685bd;
/* font */
--yumin: 'Yu Mincho Demibold', 'YuMincho Demibold', '游明朝', 'Yu Mincho Regular', 'Yu Mincho', 'YuMincho Medium', serif;
--yugo: '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ ゴシック', sans-serif;
--sanserif: 'Noto Sans JP', sans-serif;
--title: 'Poppins', sans-serif;
/* icon */
--icon-arrow-down: url('data:image/svg+xml,');
--icon-arrow-thin: url('data:image/svg+xml,');
--icon-arrow-up: url('data:image/svg+xml,');
--icon-arrow: url('data:image/svg+xml,');
--icon-blank: url('data:image/svg+xml,');
--icon-border: url('data:image/svg+xml,');
--icon-breadcrumb: url('data:image/svg+xml,');
--icon-cross: url('data:image/svg+xml,');
--icon-drawer: url('data:image/svg+xml,');
--icon-home: url('data:image/svg+xml,');
--icon-plus: url('data:image/svg+xml,');
--icon-to-top: url('data:image/svg+xml,');
--icon-zoom: url('data:image/svg+xml,');
/* ease */
--slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
--easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
--easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
--easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
--easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
--easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
--easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
--easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
}
/* =====================
container context
===================== */
@container style(--debug:true) {
* {
outline: 1px solid tomato;
&:focus {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
}
}
@layer style {
/* =====================
common
===================== */
html,
body {
font-family: var(--sanserif);
font-size: 16px;
line-height: 1.8;
color: var(--black);
@media (width <= 768px) {
font-size: calc((100 / 390) * 16 * 1vw);
}
}
body {
@media (width > 768px) {
min-inline-size: 1300px;
}
}
@media (width > 768px) {
.sp {
display: none;
}
}
@media (width <= 768px) {
.pc {
display: none;
}
}
/* p */
:where(p, li, dt, dd, th, td) {
line-height: 1.8;
}
/* =====================
header
===================== */
.header {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
padding-inline-end: 24px;
pointer-events: none;
@media (width <= 768px) {
padding-inline-end: 0;
}
/* ==== logo ==== */
.logo {
display: flex;
gap: 8px;
align-items: center;
inline-size: fit-content;
padding-block: 40px;
padding-inline: 32px;
font-size: 22px;
font-weight: 500;
color: white;
letter-spacing: 0.22px;
pointer-events: auto;
background: linear-gradient(279deg, #1818a8 -1.51%, #6e6ef8 100%);
@media (width <= 768px) {
padding-block: calc((100 / 390) * 15.74 * 1vw);
padding-inline: calc((100 / 390) * 16 * 1vw);
font-size: calc((100 / 390) * 13 * 1vw);
letter-spacing: calc((100 / 390) * 0.13 * 1vw);
border-radius: 0 0 calc((100 / 390) * 9 * 1vw);
& img {
inline-size: 32px;
block-size: auto;
}
}
}
/* ==== nav ==== */
.nav {
display: block flex;
gap: 24px;
align-items: center;
padding-inline: 32px 16px;
color: var(--text-primary);
pointer-events: auto;
background: white;
border-radius: 4px;
@media (width <= 768px) {
display: none;
}
/* ul */
& ul {
display: block flex;
gap: 32px;
font-weight: 400;
& a {
display: block grid;
place-content: center;
padding-block: 18px;
}
}
/* contact */
.contact {
display: block grid;
place-content: center;
block-size: fit-content;
padding-block: 10px;
padding-inline: 31px;
font-weight: 500;
color: white;
background: linear-gradient(100deg, #6e6ef8 10.32%, #1818a8 87.42%);
border-radius: 8px;
}
}
}
/* =====================
aside
===================== */
.aside {
position: relative;
display: block grid;
gap: 16px;
align-items: center;
justify-content: space-between;
max-inline-size: calc(100% - 40px * 2);
padding-block: 76px 79px;
padding-inline: 80px;
margin-inline: auto;
color: white;
border-radius: 16px;
@media (width > 768px) {
background: linear-gradient(95deg, #6e6ef8 -12.89%, #1818a8 81.39%);
}
@media (width <= 768px) {
display: block flex;
flex-direction: column;
gap: calc((100 / 390) * 24 * 1vw);
align-items: flex-start;
justify-content: flex-start;
max-inline-size: calc(100% - calc((100 / 390) * 20 * 1vw) * 2);
padding-block: calc((100 / 390) * 70 * 1vw) calc((100 / 390) * 71 * 1vw);
padding-inline: calc((100 / 390) * 20 * 1vw);
background-image: url('../img/_common/bg_sp.webp'), linear-gradient(95deg, #6e6ef8 -12.89%, #1818a8 81.39%);
background-size: cover, auto;
border-radius: calc((100 / 390) * 16 * 1vw);
}
@media (any-hover: hover) {
&:hover {
.anchor {
&::before {
translate: 20% 0;
}
}
&::after {
scale: 1.05;
}
}
}
/* ==== hgroup ==== */
.head {
display: block grid;
grid-area: 1 / 1 / 2 / 2;
gap: 15px;
& h1 {
margin-block: calc((1em - 1lh) / 2);
letter-spacing: 1.28px;
@media (width <= 768px) {
font-size: calc((100 / 390) * 16 * 1vw);
}
}
[lang='en'] {
margin-block: calc((1em - 1lh) / 2);
font-size: 56px;
font-weight: 500;
@media (width <= 768px) {
font-size: calc((100 / 390) * 54 * 1vw);
}
}
}
/* ==== body ==== */
.body {
display: block grid;
grid-area: 2 / 1 / 3 / 2;
font-size: 15px;
font-weight: 350;
@media (width <= 768px) {
display: block flow;
font-size: calc((100 / 390) * 15 * 1vw);
}
& span {
line-height: 2;
@media (width > 768px) {
display: block flow;
}
}
}
/* ==== anchor ==== */
.anchor {
display: block grid;
grid-area: 1 / 2 / 3 / 3;
place-content: center;
aspect-ratio: 1 / 1;
padding-inline: 27px;
background: white;
border-radius: 4px;
@media (width <= 768px) {
padding-inline: calc((100 / 390) * 27 * 1vw);
margin-inline: auto 0;
border-radius: calc((100 / 390) * 4 * 1vw);
}
&::before {
display: block flow;
inline-size: 30px;
aspect-ratio: 22 / 26.4;
content: '';
background-color: var(--primary);
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
transition: all 250ms ease 0s;
}
@media (width <= 768px) {
&::before {
inline-size: calc((100 / 390) * 30 * 1vw);
}
}
&::after {
position: absolute;
inset: 0;
z-index: 2;
display: block flow;
content: '';
}
}
/* ==== deco ==== */
&::after {
position: absolute;
inset: 12px 0 0;
display: block flow;
inline-size: 422px;
block-size: 278px;
margin-inline: auto;
pointer-events: none;
content: '';
background-image: url('../img/_common/aside/illust.webp');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
translate: 20% 0;
transition: all 250ms ease 0s;
}
@media (width <= 768px) {
&::after {
inset: 65vw 9.7vw 0;
inline-size: calc((100 / 390) * 358 / 2 * 1vw);
block-size: calc((100 / 390) * 273 / 2 * 1vw);
margin-inline: unset;
background-image: url('../img/_common/aside/illust_sp.webp');
translate: 0 0;
}
}
}
/* =====================
footer
===================== */
.footer {
display: block grid;
justify-content: space-between;
max-inline-size: calc(100% - 120px * 2);
padding-block: 64px;
margin-inline: auto;
@media (width <= 768px) {
display: block flow;
max-inline-size: 100%;
padding-block: calc((100 / 390) * 43 * 1vw);
}
/* ==== .logo ==== */
.logo {
grid-area: 1 / 1 / 2 / 2;
inline-size: fit-content;
@media (width <= 768px) {
display: block grid;
gap: calc((100 / 390) * 1 * 1vw);
justify-content: center;
inline-size: 100%;
margin-inline: auto;
text-align: center;
& img {
display: block flow;
margin-inline: auto;
}
}
& h2 {
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
@media (width <= 768px) {
font-size: calc((100 / 390) * 18 * 1vw);
}
}
}
/* ==== .address ==== */
.address {
display: block grid;
grid-area: 2 / 1 / 3 / 2;
gap: 3px;
margin-block-start: 18px;
font-size: 15px;
font-weight: 400;
@media (width <= 768px) {
gap: calc((100 / 390) * 3 * 1vw);
justify-content: center;
margin-block-start: calc((100 / 390) * 28 * 1vw);
font-size: calc((100 / 390) * 15 * 1vw);
text-align: center;
}
& address {
display: block grid;
gap: 3px;
@media (width <= 768px) {
gap: calc((100 / 390) * 3 * 1vw);
& span:first-child {
translate: -2.3vw 0;
}
}
}
.tel {
display: block grid;
gap: 3px;
@media (width <= 768px) {
gap: calc((100 / 390) * 3 * 1vw);
& a[href^='tel:'] {
color: var(--primary);
text-decoration: underline;
}
}
}
}
/* ==== .nav ==== */
.nav {
display: block grid;
grid-area: 1 / 2 / 2 / 3;
gap: 19px;
@media (width <= 768px) {
display: none;
}
& ul {
display: block flex;
align-items: center;
justify-content: flex-end;
block-size: fit-content;
font-size: 15px;
& a {
position: relative;
display: block grid;
}
}
.main-nav {
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
& li {
& a {
padding-inline: 24px;
}
&:last-child {
& a {
padding-inline-end: 0;
}
}
}
& li + li a::before {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
display: block flow;
inline-size: 1px;
block-size: 100%;
content: '';
background-color: #979797;
mask-image: var(--icon-border);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
.sub-nav {
gap: 49px;
color: color-mix(in srgb, var(--text-primary), transparent 50%);
}
}
/* ==== .to-top ==== */
.to-top {
display: block flex;
grid-area: 3 / 2 / 4 / 3;
gap: 18px;
align-items: center;
justify-content: flex-end;
inline-size: fit-content;
margin-block-start: 99px;
margin-inline: auto 0;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
@media (width <= 768px) {
gap: 2.3vw;
margin-block-start: 5.9vw;
margin-inline: auto;
font-size: calc((100 / 390) * 13 * 1vw);
}
&::after {
display: block flow;
inline-size: 23px;
aspect-ratio: 21 / 23.262;
content: '';
background-image: url('../img/_common/to-top.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (width <= 768px) {
&::after {
inline-size: calc((100 / 390) * 23 * 1vw);
translate: 2.3vw 0;
}
}
}
/* ==== .copyright ==== */
.copyright {
display: block flow;
grid-area: 3 / 1 / 4 / 3;
inline-size: fit-content;
margin-block-start: 96px;
font-size: 13px;
font-weight: 500;
color: color-mix(in srgb, var(--text-primary), transparent calc(100% - 24%));
@media (width <= 768px) {
margin-block-start: calc((100 / 390) * 19 * 1vw);
margin-inline: auto;
font-size: calc((100 / 390) * 11 * 1vw);
text-align: center;
}
}
}
/* =====================
sp-menu
===================== */
.sp-menu {
position: fixed;
inset-block-start: calc((100 / 390) * 0 * 1vw);
inset-inline-end: calc((100 / 390) * 0 * 1vw);
z-index: 20;
display: none;
place-content: center;
inline-size: calc((100 / 390) * 64 * 1vw);
padding-block: calc((100 / 390) * 22 * 1vw);
background: linear-gradient(145deg, #6e6ef8 0%, #1818a8 101.2%);
border-radius: 0 0 0 calc((100 / 390) * 8 * 1vw);
&::before {
inline-size: calc((100 / 390) * 32 * 1vw);
aspect-ratio: 32 / 20;
content: '';
background-color: white;
mask-image: var(--icon-drawer);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
@media (width <= 768px) {
display: block grid;
}
}
.menu-on .sp-menu {
&::before {
mask-image: var(--icon-cross);
scale: 1.8 1;
}
}
/* =====================
sp-nav
===================== */
.sp-nav {
position: fixed;
inset: 0;
z-index: 10;
display: none;
translate: 100% 0;
/* ==== wrapper ==== */
.wrapper {
position: relative;
}
/* ==== inner ==== */
.inner {
position: relative;
max-block-size: 100dvh;
padding-block: calc((100 / 390) * 98 * 1vw) calc((100 / 390) * 54 * 1vw);
padding-inline: calc((100 / 390) * 44 * 1vw);
overflow-y: auto;
color: white;
background: linear-gradient(145deg, #6e6ef8 0%, #1818a8 50.2%);
border-radius: 0 0 calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 8 * 1vw);
/* ==== global-nav ==== */
.global-nav {
display: block grid;
gap: 0;
& li a {
position: relative;
display: block grid;
grid-template-columns: 1fr auto;
padding-block: 3.4vw;
padding-inline: 2.3vw 2.8vw;
font-size: calc((100 / 390) * 16 * 1vw);
font-weight: 500;
border-block-end: 1px solid color-mix(in srgb, white 20%, transparent);
&::before {
position: absolute;
inset-block-start: 51%;
inset-inline-end: 6.2vw;
z-index: 12;
inline-size: calc((100 / 390) * 15 * 1vw);
aspect-ratio: 16 / 14;
content: '';
background-color: white;
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
translate: 0 -50%;
}
}
& li:last-child a {
border-block-end-color: transparent;
}
}
/* ==== sub-nav ==== */
.sub-nav {
display: block flex;
flex-wrap: wrap;
gap: calc((100 / 390) * 17 * 1vw) calc((100 / 390) * 50 * 1vw);
justify-content: center;
padding-block: 5.3vw;
padding-inline: calc((100 / 390) * 19 * 1vw);
margin-block-start: 4vw;
font-size: calc((100 / 390) * 14 * 1vw);
font-weight: 600;
color: var(--primary);
background: #f2f2f2;
border-radius: calc((100 / 390) * 10 * 1vw);
& li {
margin-block: calc((1em - 1lh) / 2);
}
}
/* ==== other-nav ==== */
.other-nav {
display: block flex;
gap: calc((100 / 390) * 30 * 1vw);
justify-content: center;
margin-block-start: calc((100 / 390) * 30 * 1vw);
font-size: calc((100 / 390) * 12 * 1vw);
}
}
@media (width <= 768px) {
display: block;
}
}
/* Menu on */
.menu-on .sp-nav {
pointer-events: auto;
translate: 0 0;
transition: translate 350ms var(--easeOutExpo) 0s;
}
}