@charset "UTF-8";
/* =====================
Custom Property
===================== */
:root {
/* debug */
--debug: false;
/* color */
--black: #333;
--color-text-primary: #2c2c2c;
--primary: #1f3091;
--bg: #f6f6f6;
--gray-l: #d7d7d7;
--gray: #8c8c8c;
/* 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;
--poppins: 'Poppins', sans-serif;
--outfit: 'Outfit', sans-serif;
/* icon */
--icon-mail: url('data:image/svg+xml,');
--icon-arrow: url('data:image/svg+xml,');
--icon-download: url('data:image/svg+xml,');
--icon-arrow-link: url('data:image/svg+xml,');
--icon-breadcrumb: url('data:image/svg+xml,');
--icon-close: url('data:image/svg+xml,');
--icon-angle: url('data:image/svg+xml,');
--icon-blank: url('data:image/svg+xml,');
--icon-arrow-triangle: url('data:image/svg+xml,');
--icon-modal-close: url('data:image/svg+xml,');
--icon-modal-feature-close-sp: url('data:image/svg+xml,');
--icon-modal-arrow: 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);
--easeOutBounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
/* =====================
container context
===================== */
@container style(--debug:true) {
* {
outline: 1px solid tomato;
&::before,
&::after {
outline: 1px solid tomato;
}
&:focus {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
}
}
/* =====================
animation
===================== */
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes scrollable {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-25%);
}
}
@layer style {
/* =====================
common
===================== */
html,
body {
font-family: var(--sanserif);
font-size: 16px;
line-height: 1.8;
color: var(--color-text-primary);
background: var(--bg);
@media (width <= 768px) {
font-size: calc((100 / 390) * 16 * 1vw);
}
}
body {
@media (width > 768px) {
min-inline-size: 1440px;
}
}
@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: sticky;
inset: 0 auto;
z-index: 20;
display: block grid;
grid-template-columns: 1fr auto auto;
align-items: center;
padding-inline: 42px;
margin-inline: auto;
color: white;
transition: all 250ms ease 0s;
@media only screen and (width <= 768px) {
position: fixed;
grid-template-rows: repeat(auto-fit, minmax(0, min-content));
block-size: fit-content;
padding-block: 0;
padding-inline: calc((100 / 390) * 16 * 1vw) 0;
}
/* ==== logo ==== */
.logo {
inline-size: fit-content;
padding-block: 24px;
transition: opacity 250ms ease 0s, filter 250ms ease 0s;
will-change: filter, opacity;
@media only screen and (width <= 768px) {
block-size: auto;
padding-block: calc((100 / 390) * 15 * 1vw);
}
& img {
filter: brightness(0) invert(1);
@media only screen and (width <= 768px) {
inline-size: calc((100 / 390) * 120 * 1vw);
}
}
}
/* ==== nav ==== */
& nav {
display: block flex;
align-items: center;
block-size: 100%;
@media only screen and (width <= 768px) {
display: none;
}
& ul {
display: inherit;
gap: 32px;
block-size: inherit;
margin-right: 32px;
& li {
display: block flex;
align-items: center;
block-size: inherit;
& a {
display: block flex;
align-items: center;
block-size: inherit;
}
}
}
}
/* ==== sdgs ==== */
.sdgs {
display: block grid;
place-content: center;
padding-block: 15.5px;
padding-inline: 17px;
margin-inline-end: 16px;
background: white;
border: 1px solid var(--gray-l);
border-radius: 4px;
}
/* ==== contact ==== */
.contact {
display: block grid;
grid-auto-flow: column;
gap: 10px;
align-items: center;
justify-content: flex-start;
padding-block: 6px;
padding-inline: 28.7px;
margin-inline-end: 18px;
font-family: var(--outfit);
font-size: 20px;
font-weight: 500;
background: var(--primary);
border-radius: 4px;
&::before {
inline-size: 21px;
aspect-ratio: 21 / 16.5;
content: '';
background-color: currentcolor;
mask-image: var(--icon-mail);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
/* ==== language ==== */
.language {
position: relative;
display: block flex;
gap: 6px;
align-items: center;
font-family: var(--outfit);
font-size: 21px;
font-weight: 500;
& a.active {
color: var(--primary);
pointer-events: none;
}
@media only screen and (width <= 768px) {
position: fixed;
inset: unset;
inset-block-start: calc((100 / 390) * 80.47 * 1vw);
inset-inline-end: 0;
gap: calc((100 / 390) * 4 * 1vw);
padding-inline: calc((100 / 390) * 8 * 1vw);
font-size: calc((100 / 390) * 18 * 1vw);
color: var(--gray);
background: var(--primary);
border-radius: calc((100 / 390) * 4 * 1vw) 0 0 calc((100 / 390) * 4 * 1vw);
& a.active {
color: white;
pointer-events: none;
}
}
}
}
.header-color .header {
inline-size: 100%;
background: var(--bg);
/* ==== logo ==== */
& .logo img {
filter: none;
}
/* ==== nav ==== */
& nav {
& ul {
color: var(--color-text-primary);
}
}
/* ==== language ==== */
.language {
color: var(--gray);
}
}
.menu-on .header {
pointer-events: auto;
}
/* ==== .u-second ==== */
.u-second .header {
inline-size: 100%;
background: var(--bg);
/* ==== logo ==== */
& .logo img {
filter: none;
}
/* ==== nav ==== */
& nav {
& ul {
color: var(--color-text-primary);
}
}
/* ==== language ==== */
.language {
color: var(--gray);
}
}
/* =====================
aside
===================== */
.aside {
padding-block: 90px 88px;
color: white;
background-color: var(--primary);
background-image: url('../img/_common/footer.webp');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
@media only screen and (width <= 768px) {
padding-block: calc((100 / 390) * 90 * 1vw) 20.4vw;
background-image: url('../img/_common/footer_sp.webp');
}
.inner {
display: block grid;
grid-template-columns: auto auto 1fr;
gap: 49px;
align-items: center;
justify-content: flex-start;
max-inline-size: 1200px;
margin-inline: auto;
@media only screen and (width <= 768px) {
display: block flex;
flex-direction: column;
gap: calc((100 / 390) * 0 * 1vw);
justify-content: center;
}
}
/* ==== hgroup ==== */
& hgroup {
display: block grid;
gap: 18px;
@media only screen and (width <= 768px) {
gap: calc((100 / 390) * 7 * 1vw);
}
& h2 {
margin-block: calc((1em - 1lh) / 2);
font-family: var(--yumin);
font-size: 20px;
font-weight: 600;
line-height: 1;
@media only screen and (width <= 768px) {
font-size: calc((100 / 390) * 18 * 1vw);
}
}
& [lang='en'] {
font-size: 64px;
font-weight: 400;
line-height: 1;
@media only screen and (width <= 768px) {
font-size: calc((100 / 390) * 56 * 1vw);
}
}
}
/* ==== body ==== */
.body {
letter-spacing: 0.48px;
@media only screen and (width <= 768px) {
margin-block-start: calc((100 / 390) * 59 * 1vw);
font-size: calc((100 / 390) * 16 * 1vw);
text-align: center;
letter-spacing: calc((100 / 390) * 0.48 * 1vw);
}
}
/* ==== u-anchor ==== */
.u-anchor {
margin-inline: auto 0;
@media only screen and (width <= 768px) {
margin-block-start: calc((100 / 390) * 48 * 1vw);
margin-inline: auto;
}
}
}
/* =====================
footer
===================== */
.footer {
padding-block: 55px 57px;
background: #f6f6f6;
@media only screen and (width <= 768px) {
padding-block: calc((100 / 390) * 64 * 1vw);
}
/* ==== inner ==== */
.inner {
display: block grid;
grid-template-columns: 1fr auto;
gap: 24px 0;
max-inline-size: 1200px;
margin-inline: auto;
@media only screen and (width <= 768px) {
display: block flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
/* ==== logo ==== */
.logo {
display: block flex;
grid-area: 1 / 1 / 2 / 2;
gap: 8px;
align-items: flex-start;
inline-size: fit-content;
margin-block-start: 9px;
@media only screen and (width <= 768px) {
gap: 8px;
margin-block-start: 0;
margin-inline: auto;
& img + img {
inline-size: calc((100 / 390) * 210 * 1vw);
}
}
}
/* ==== address ==== */
& address {
display: grid;
grid-area: 2 / 1 / 3 / 2;
inline-size: fit-content;
font-size: 14px;
font-weight: 350;
& span {
line-height: 1.85;
}
@media only screen and (width <= 768px) {
padding-inline: calc((100 / 390) * 16 * 1vw);
margin-inline: auto;
font-size: calc((100 / 390) * 16 * 1vw);
text-align: center;
& span {
line-height: 1.8;
}
& span:first-child {
translate: -2vw 0;
}
& a[href^='tel:'] {
color: var(--primary);
text-decoration: underline;
}
.pc-only {
display: none;
}
}
}
/* ==== u-anchor ==== */
.u-anchor {
grid-area: 3 / 1 / 4 / 2;
gap: 17px;
padding-block: 16px;
padding-inline: 38px 30px;
font-size: 15px;
@media only screen and (width <= 768px) {
gap: 0;
padding-block: 3.8vw;
padding-inline: 13.6vw;
margin-inline: auto;
font-size: calc((100 / 390) * 15 * 1vw);
text-indent: -2.8vw;
}
}
/* ==== nav ==== */
& nav {
display: block grid;
grid-area: 1 / 2 / 5 / 3;
gap: 34px;
align-self: flex-start;
@media only screen and (width <= 768px) {
gap: 4.7vw 0;
justify-content: center;
margin-block-start: calc((100 / 390) * 22 * 1vw);
margin-inline: auto;
}
& ul {
display: block flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
@media only screen and (width <= 768px) {
text-align: center;
}
}
.main-nav {
display: block flex;
gap: 40.1px;
font-size: 15px;
font-weight: 500;
color: var(--black);
@media only screen and (width <= 768px) {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc((100 / 390) * 15 * 1vw) calc((100 / 390) * 35 * 1vw);
padding-inline: calc((100 / 390) * 16 * 1vw);
margin-inline: auto;
font-size: calc((100 / 390) * 17 * 1vw);
font-weight: 400;
}
& [data-size='small'] {
@media (width > 768px) {
font-size: 13px;
}
}
}
.sub-nav {
gap: 30px;
font-size: 13px;
color: #666;
@media only screen and (width <= 768px) {
display: block grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
font-size: calc((100 / 390) * 14 * 1vw);
font-weight: 400;
& li {
text-indent: 3.4vw;
& + li {
text-indent: -3.2vw;
}
}
}
}
}
/* ==== small ==== */
& small {
grid-area: 4 / 1 / 5 / 3;
inline-size: fit-content;
margin-block-start: 51px;
margin-inline: auto;
font-size: 12px;
color: #999;
letter-spacing: 1.2px;
@media only screen and (width <= 768px) {
margin-block-start: calc((100 / 390) * 69 * 1vw);
font-size: calc((100 / 390) * 12 * 1vw);
letter-spacing: calc((100 / 390) * 1.2 * 1vw);
}
}
}
/* =====================
to-top
===================== */
.to-top {
position: absolute;
inset-block-end: 20px;
inset-inline-end: 0;
display: block grid;
gap: 8px;
place-content: center;
inline-size: 60px;
block-size: 60px;
aspect-ratio: 1 / 1;
font-family: var(--title);
font-weight: 400;
line-height: 1;
color: white;
cursor: pointer;
background-image: linear-gradient(99deg, #274827 15.79%, #aad59a 90.99%);
background-size: 100% 100%;
border-radius: 6px;
transition: background-size 300ms ease 0s;
will-change: background-size;
@media (any-hover: hover) {
&:hover {
background-size: 200% 100%;
}
}
@media (width <= 768px) {
inset-block-end: calc((100 / 390) * 55 * 1vw);
inset-inline-end: calc((100 / 390) * 16 * 1vw);
gap: calc((100 / 390) * 14 * 1vw);
inline-size: calc((100 / 390) * 60 * 1vw);
block-size: calc((100 / 390) * 60 * 1vw);
border-radius: calc((100 / 390) * 6 * 1vw);
}
&::before {
display: block flow;
inline-size: 14px;
aspect-ratio: 14 / 10;
margin-inline: auto;
content: '';
background-color: currentcolor;
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
rotate: 0 0 1 -90deg;
}
@media (width <= 768px) {
&::before {
inline-size: calc((100 / 390) * 18 * 1vw);
translate: 0 6px;
}
}
}
/* =====================
sp-menu
===================== */
.sp-menu {
position: fixed;
inset-block-start: 0;
inset-inline-end: 0;
z-index: 41;
display: block grid;
gap: calc((100 / 390) * 8 * 1vw);
place-content: center;
inline-size: calc((100 / 390) * 64 * 1vw);
aspect-ratio: 1 / 1;
cursor: pointer;
background: var(--primary);
&::before {
inline-size: calc((100 / 390) * 32 * 1vw);
block-size: calc((100 / 390) * 20 * 1vw);
content: '';
border-block-start: calc((100 / 390) * 2 * 1vw) solid white;
border-block-end: calc((100 / 390) * 2 * 1vw) solid white;
transition: all 250ms ease 0s;
}
&::after {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
display: block flow;
inline-size: calc((100 / 390) * 32 * 1vw);
block-size: calc((100 / 390) * 2 * 1vw);
content: '';
background-color: white;
translate: -50% -50%;
transition: all 250ms ease 0s;
}
@media (width > 768px) {
display: none;
}
}
/* =====================
sp-nav
===================== */
.sp-nav {
position: fixed;
inset: 0 auto;
z-index: 41;
display: block grid;
gap: 0;
inline-size: 100%;
block-size: 100%;
color: white;
pointer-events: none;
background: rgb(0 0 0 / 80%);
opacity: 0;
translate: 100% 0;
transition: translate 250ms ease 0s;
@media (width > 768px) {
display: none;
}
.inner {
inline-size: calc((100 / 390) * 340 * 1vw);
block-size: 100lvh;
padding-block: calc((100 / 390) * 48 * 1vw) calc((100 / 390) * 90 * 1vw);
padding-inline: calc((100 / 390) * 40 * 1vw);
margin-inline: auto 0;
overflow-y: scroll;
color: white;
background: var(--primary);
}
/* ==== close-menu ==== */
.close-menu {
display: block flow;
margin-inline: auto 0;
translate: -0.5vw 0;
&::before {
display: block flow;
inline-size: calc((100 / 390) * 52 * 1vw);
block-size: calc((100 / 390) * 30 * 1vw);
aspect-ratio: 1 / 1;
content: '';
background-color: currentcolor;
mask-image: var(--icon-close);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
/* ==== main-nav ==== */
.main-nav {
display: block grid;
margin-block-start: 12.5vw;
/* ==== h3 ==== */
& h3 {
display: block grid;
grid-template-columns: 1fr auto;
grid-auto-flow: column;
align-items: center;
justify-content: flex-start;
padding-inline-end: 1.1vw;
font-weight: 500;
&:has(button) {
grid-template-columns: 1fr calc((100 / 390) * 45 * 1vw);
}
& button {
position: relative;
display: block flow;
inline-size: 100%;
aspect-ratio: 1 / 1;
translate: 0 0.2vw;
&::before {
position: absolute;
inset-block-start: 3.5vw;
inset-inline-end: 0;
display: block flow;
inline-size: calc((100 / 390) * 19 * 1vw);
aspect-ratio: 1 / 1;
margin-inline: auto 0;
content: '';
background: white;
clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
transition: clip-path 150ms ease 0s;
will-change: clip-path;
}
&.on {
&::before {
inset-block-start: 5.2vw;
clip-path: polygon(45% 45%, 55% 45%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 55%, 55% 100%, 55% 55%, 0% 55%, 0% 45%, 45% 45%);
}
}
}
}
/* ==== section ==== */
& section {
border-block-end: 1px solid white;
&:has(.on) .anchor {
padding-block-end: 0;
}
}
/* ==== anchor ==== */
.anchor {
position: relative;
display: block flow;
inline-size: 100%;
padding-block: 4.4vw 3.7vw;
letter-spacing: calc((100 / 390) * 1.12 * 1vw);
}
/* ==== ul ==== */
& ul {
position: relative;
z-index: 2;
display: none;
grid-template-rows: 0fr;
grid-template-columns: 1fr;
margin-block-start: 0.2vw;
font-size: calc((100 / 390) * 14 * 1vw);
& li a {
display: block flow;
padding-inline-start: calc((100 / 390) * 8 * 1vw);
letter-spacing: calc((100 / 390) * 0.98 * 1vw);
}
&.on {
display: block grid;
grid-template-rows: 1fr;
padding-block-end: 3.3vw;
}
}
}
/* ==== contact ==== */
.contact {
display: block grid;
place-content: center;
padding-block: calc((100 / 390) * 12.5 * 1vw);
margin-block-start: calc((100 / 390) * 48 * 1vw);
font-weight: 700;
color: var(--primary);
letter-spacing: calc((100 / 390) * 1.12 * 1vw);
background: white;
border-radius: calc((100 / 390) * 8 * 1vw);
}
/* ==== sub-nav ==== */
.sub-nav {
margin-block-start: calc((100 / 390) * 47.6 * 1vw);
& ul {
display: block grid;
gap: calc((100 / 390) * 16 * 1vw);
font-size: calc((100 / 390) * 14 * 1vw);
font-weight: 400;
& li {
& a {
display: block grid;
grid-template-columns: auto 1fr;
gap: calc((100 / 390) * 8 * 1vw);
align-items: center;
letter-spacing: calc((100 / 390) * 0.98 * 1vw);
&::before {
inline-size: calc((100 / 390) * 10 * 1vw);
aspect-ratio: 10 / 15;
content: '';
background-color: currentcolor;
mask-image: var(--icon-angle);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
}
}
}
}
/* Menu on */
.menu-on .sp-nav {
pointer-events: auto;
opacity: 1;
translate: 0 0;
}
.header ul li {
position: relative;
font-weight: 500;
}
.header ul li::after {
position: absolute;
inset-block-end: 2px;
inset-inline: auto;
inline-size: 0;
block-size: 2px;
margin-inline: auto;
content: '';
background: var(--gradation-green);
transition: inline-size 250ms ease 0s;
}
@media (any-hover: hover) {
.header ul li {
&:hover {
&::after {
inline-size: 100%;
}
}
}
}
body:not([data-page='top'], [data-page='contact'], [data-page='entry'])::after {
position: fixed;
top: 0;
left: 0;
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100dvh;
pointer-events: none;
content: '';
background: #fff;
opacity: 1;
transition: all 600ms ease-in-out 100ms;
}
.pageshow body::before {
opacity: 0;
}
.pageshow body::after {
opacity: 0;
}
@media (width <= 768px) {
.header {
transition: inset 250ms ease 0s;
}
body:not(.scrolled) .header {
inset: 0 auto auto 0;
}
.menu-on .header {
inset: 0 auto auto 0;
}
}
@media (width > 768px) {
main {
margin-block-start: -101px;
}
}
/* =====================
lang="en"
===================== */
html[lang='en'] {
.header nav ul {
font-family: var(--outfit);
font-size: 20px;
}
.aside {
padding-block: 104px 102px;
@media only screen and (width <= 768px) {
padding-block: calc((100 / 390) * 93 * 1vw) calc((100 / 390) * 80 * 1vw);
}
}
.footer {
@media only screen and (width <= 768px) {
& address {
display: block flow;
}
& [data-size='small'] {
font-size: calc((100 / 390) * 13 * 1vw);
translate: 0 calc((100 / 390) * 6 * 1vw);
}
& address span {
font-size: calc((100 / 390) * 16 * 1vw);
word-break: normal;
}
& .u-anchor {
padding-block: 4.8vw;
padding-inline: 14.7vw;
}
& nav {
margin-block-start: calc((100 / 390) * 18 * 1vw);
}
& .main-nav {
gap: calc((100 / 390) * 19 * 1vw) calc((100 / 390) * 35 * 1vw);
margin-block-end: calc((100 / 390) * 6 * 1vw);
font-size: calc((100 / 390) * 15 * 1vw);
font-weight: 500;
}
& .sub-nav {
font-size: calc((100 / 390) * 14 * 1vw);
font-weight: 500;
& li:last-child {
font-size: calc((100 / 390) * 13 * 1vw);
}
}
}
}
.sp-nav {
.main-nav {
& li {
& a {
padding-inline-end: calc((100 / 390) * 60 * 1vw);
font-size: calc((100 / 390) * 14 * 1vw);
letter-spacing: calc((100 / 390) * 1.08 * 1vw);
word-break: normal;
}
}
}
}
.u-mv {
& hgroup {
padding-block: 29px 27px;
@media only screen and (width <= 768px) {
padding-block: 13.6vw 0;
}
}
}
}
}