@charset "UTF-8";
/* =====================
Custom Property
===================== */
:root {
--debug: false;
/* color */
--white: #fff;
--primary: #00529f;
--color-text-primary: #3c3c3c;
--text_gray: #989898;
--gray_road: #d9d9d9;
--lightblue: #e7f4fa;
--form-form-input: #f0f3f7;
--form-form-required: #b61024;
--form-form-optional: #575757;
--form-form-border: #b7b7b7;
--form-form-input-placeholder: #bababa;
/* 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: 'Zen Kaku Gothic New', sans-serif;
--noto: 'Noto Sans JP', serif;
--title: 'Questrial', sans-serif;
/* icon */
--icon-bracket: url('data:image/svg+xml,');
--icon-head: url('data:image/svg+xml,');
--icon-arrow: url('data:image/svg+xml,');
--icon-angle: url('data:image/svg+xml,');
--icon-scroll: url('data:image/svg+xml,');
--icon-breadcrumb: 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);
/* ==== project ==== */
--header-height: 80px;
}
@media (width <=768px) {
:root {
--header-height: calc((100 / 390) * 72 * 1vw);
}
}
/* =====================
nudge
===================== */
:root {
--nudge-1: 8px;
--nudge-2: 16px;
--nudge-3: 24px;
--nudge-4: 32px;
--nudge-5: 40px;
--nudge-6: 48px;
--nudge-7: 56px;
--nudge-8: 64px;
--nudge-9: 70px;
--nudge-10: 80px;
}
@media (width <=768px) {
:root {
--nudge-1: calc((100 / 390) * 8 * 1vw);
--nudge-2: calc((100 / 390) * 16 * 1vw);
--nudge-3: calc((100 / 390) * 24 * 1vw);
--nudge-4: calc((100 / 390) * 32 * 1vw);
--nudge-5: calc((100 / 390) * 40 * 1vw);
--nudge-6: calc((100 / 390) * 48 * 1vw);
--nudge-7: calc((100 / 390) * 56 * 1vw);
--nudge-8: calc((100 / 390) * 64 * 1vw);
--nudge-9: calc((100 / 390) * 70 * 1vw);
--nudge-10: calc((100 / 390) * 80 * 1vw);
}
}
@container style(--debug:true) {
* {
outline: 1px solid tomato;
&::before,
&::after {
outline: 1px solid tomato;
}
&:focus {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
}
}
@layer style {
:where(html, body) {
font-family: var(--sanserif);
font-size: 16px;
font-weight: 500;
line-height: 1.8;
color: var(--color-text-primary);
@media (width <=768px) {
font-size: calc((100 / 390) * 15 * 1vw);
}
}
body {
@media (width > 768px) {
min-inline-size: 1440px;
}
}
@media (width > 768px) {
.sp {
display: none;
}
}
@media (width <=768px) {
.pc {
display: none;
}
}
/* ==== main ==== */
.main {
position: relative;
margin-block-start: calc(var(--header-height) * -1);
}
@supports (view-transition-name: none) {
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.4s;
animation-timing-function: ease-in-out;
}
::view-transition-old(root) {
animation: slide-out 0.4s ease-in-out;
}
::view-transition-new(root) {
animation: slide-in 0.4s ease-in-out;
}
@keyframes slide-out {
to {
opacity: 0;
}
}
@keyframes slide-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
}