@charset "UTF-8";
/* =====================
Custom Property
===================== */
:root {
/* debug */
--debug: false;
/* color */
--black: #111;
--color-text-primary: #47321d;
--pink: #db99ac;
--gray100: #dcdcdc;
--bg: #f4f1eb;
--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;
--forum: 'Forum', serif;
--oooh: 'Oooh Baby', cursive;
--serif: 'Shippori Mincho B1', serif;
/* icon */
--icon-arrow: url('data:image/svg+xml,');
--icon-plus: url('data:image/svg+xml,');
--icon-blank: url('data:image/svg+xml,');
--icon-forget: 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: 124.45;
}
@media only screen and (width <= 768px) {
:root {
--header-height: calc((100 / 390) * 96.25 * 1vw);
}
}
/* =====================
animate
===================== */
/* 左から右 */
@keyframes loop-list {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
/* =====================
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% {
opacity: 0;
transform: translateX(0);
}
5% {
opacity: 0;
}
10% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
transform: translateX(-25%);
}
}
@keyframes loop-list {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
@layer style {
/* =====================
common
===================== */
html,
body {
font-family: var(--serif);
font-size: 16px;
line-height: 1.8;
color: var(--color-text-primary);
background: var(--bg);
@media (width <= 768px) {
font-size: calc((100 / 390) * 14 * 1vw);
}
}
body {
@media (width > 768px) {
min-inline-size: 1440px;
}
}
@media (width > 768px) {
.sp {
display: none;
}
}
@media (width <= 768px) {
.pc {
display: none;
}
}
::selection {
background: color-mix(in srgb, var(--pink) 40%, white 60%);
}
/* =====================
main
===================== */
.main {
min-block-size: 100svh;
margin-block-start: calc(var(--header-height) * -1);
}
/* p */
:where(p, li, dt, dd, th, td) {
line-height: 2.2;
}
body:not([data-page='recruit/top'], [data-page='recruit/entry'])::after {
position: fixed;
top: 0;
left: 0;
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
block-size: 100dvh;
pointer-events: none;
content: '';
background: var(--bg);
opacity: 1;
transition: all 600ms ease-in-out 100ms;
}
.pageshow body::before {
opacity: 0;
}
.pageshow body::after {
opacity: 0;
}
/* =====================
error
===================== */
[data-page='error'] {
main {
@media (width <= 768px) {
.u-mv {
hgroup {
span[lang='en'] {
font-size: 11vw;
}
}
}
padding-block-end: 20vw;
}
.form-text {
padding-block: 7em 3em;
text-align: center;
@media (width <= 768px) {
padding-block: 3em;
text-align-last: left;
}
}
.u-anchor {
margin-block: 1em;
margin-inline: auto;
}
}
}
}