@charset "UTF-8";
/* =====================
Custom Property
===================== */
:root {
/* debug */
--debug: false;
/* color */
--white: #fff;
--black: #141414;
--purple: #a73a8c;
/* 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: 'Questrial', sans-serif;
/* icon */
--icon-arrow: url('data:image/svg+xml,');
--icon-download: url('data:image/svg+xml,');
--icon-mail: url('data:image/svg+xml,');
--icon-award: url('data:image/svg+xml,');
--icon-build: url('data:image/svg+xml,');
--icon-circle: url('data:image/svg+xml,');
--icon-cup: url('data:image/svg+xml,');
--icon-bracket: url('data:image/svg+xml,');
--icon-tel: 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 ==== */
}
/* =====================
nudge
===================== */
:root {
--nudge-1: calc(8 / 16 * 1rem);
--nudge-2: calc(16 / 16 * 1rem);
--nudge-3: calc(24 / 16 * 1rem);
--nudge-4: calc(32 / 16 * 1rem);
--nudge-5: calc(40 / 16 * 1rem);
--nudge-6: calc(48 / 16 * 1rem);
--nudge-7: calc(56 / 16 * 1rem);
--nudge-8: calc(64 / 16 * 1rem);
--nudge-9: calc(70 / 16 * 1rem);
--nudge-10: calc(80 / 16 * 1rem);
}
@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: 'BIZ UDPGothic', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.8;
color: var(--black);
}
body {
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f9f9f9 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #f9f9f9 calc(100% - 1px));
background-repeat: repeat;
background-position: center center;
background-size: 16px 16px;
}
/* p */
:where(p, li, dt, dd, th, td) {
line-height: 1.8;
}
.main {
position: relative;
margin-block-start: calc(-52 / 16 * 1rem);
}
}