@charset "UTF-8";
/* =====================
Custom Property
===================== */
:root {
/* debug */
--debug: false;
/* color */
--white: #ffffff;
--primary: #0e41a4;
--color-text-primary: #181818;
--gray_text: #898989;
--gray_border: #d9d9d9;
--bg: #f2f2f2;
--gold: #262b66;
--gradation2: linear-gradient(112deg, #262b66 18.31%, #9c9eb8 104.48%);
--form-input: #f0f3f7;
--form-required: #b61024;
--form-optional: #575757;
--form-border: #b7b7b7;
--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: 'Noto Sans JP', sans-serif;
--title: 'Sorts Mill Goudy', serif;
--serif: 'Shippori Mincho', serif;
/* icon */
--icon-arrow: url('data:image/svg+xml,');
--icon-home: url('data:image/svg+xml,');
--icon-triangle: url('data:image/svg+xml,');
--icon-tel: url('data:image/svg+xml,');
--icon-instagram: url('data:image/svg+xml,');
--icon-breadcrumb: url('data:image/svg+xml,');
--icon-pdf: url('data:image/svg+xml,');
--icon-mail: 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: 92px;
}
@media only screen and (width <=768px) {
:root {
--header-height: calc((100 / 390) * 50 * 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 context
===================== */
@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 {
/* =====================
common
===================== */
html,
body {
font-family: 'Shippori Mincho', serif;
font-size: 16px;
font-weight: 500;
line-height: 1.8;
color: var(--color-text-primary);
background: var(--bg);
@media (width <=768px) {
font-size: calc((100 / 390) * 16 * 1vw);
}
}
body {
background: var(--bg);
@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);
}
body:not([data-page='top']) .main {
margin-block-start: 0;
}
@supports not (view-transition-name: none) {
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;
}
}
@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;
}
}
}
/* =====================
data-page="error"
===================== */
[data-page='error'] {
.main {
@media (width <=768px) {
padding-block-start: calc((100 / 390) * 28 * 1vw);
}
.form-text {
text-align: center;
@media (width <=768px) {
text-align: left;
}
}
.u-anchor {
margin-block: 4em;
margin-inline: auto;
}
}
}
}