@charset "UTF-8";
/* =====================
Custom Property
===================== */
:root {
/* debug */
--debug: false;
/* color */
--black: #2b2b2b;
--primary: #00601f;
--secondary: #789676;
/* 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: 'Hammersmith One', sans-serif;
--catch: 'Yuji Syuku', serif;
--name: 'Shippori Mincho', serif;
/* icon */
--icon-arrow: url('data:image/svg+xml,');
--icon-download: url('data:image/svg+xml,');
--icon-arrow-circle: url('data:image/svg+xml,');
--icon-breadcrumb: url('data:image/svg+xml,');
--icon-mail: url('data:image/svg+xml,');
--icon-tel: url('data:image/svg+xml,');
--icon-earth: url('data:image/svg+xml,');
--icon-blank: 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%);
}
}
@keyframes displayAnime {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@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) * 15 * 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;
}
}