@charset "UTF-8";
/* ---------------------------------------------
*   Custom Properties
--------------------------------------------- */
:root { --color-base-1: #000; --color-base-1-rgb: 0, 0, 0; --color-black-1: #000; --color-black-1-rgb: 0, 0, 0; --color-black-2: #1a1b1c; --color-black-2-rgb: 26, 27, 28; --color-black-3: #707070; --color-black-3-rgb: 112, 112, 112; --color-black-4: #111; --color-black-4-rgb: 17, 17, 17; --color-red-1: #c9002c; --color-red-1-rgb: 201, 0, 44; --color-white-1: #fff; --color-white-1-rgb: 255, 255, 255; --color-yellow-1: #b78c42; --color-yellow-1-rgb: 183, 140, 66; --color-yellow-2: #feea9b; --color-yellow-2-rgb: 254, 234, 155; --contents-side-padding: 80; --contents-width: 1088; --design-width: 1440; --ff-noto: "Noto Sans JP", sans-serif; --ff-root: "LINESeedJPStd Regular"; --ff-ud-b: "LINESeedJPStd ExtraBold"; --ff-ud-db: "LINESeedJPStd Bold"; --fixed-header-height: 0; --hover-duration: .3s; --hover-opacity-ratio: .6; --line-height: 1.5; --minwidth: calc(var(--contents-width) + var(--contents-side-padding) * 2); --root-fz: 16; }
@media screen and (max-width: 1024px) { :root { --contents-side-padding: 20; --contents-width: 335; --design-width: 375; --fixed-header-height: 0; --line-height: 1.5; --minwidth: 320; --root-fz: 32; } }

/* ---------------------------------------------
*   Universal selector
--------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* ---------------------------------------------
*   html, body
--------------------------------------------- */
html, body { color: var(--color-base-1); font-family: var(--ff-root); font-size: calc(var(--root-fz) * 1px); -webkit-text-size-adjust: 100%; }
@media screen and (max-width: 1024px) { html, body { font-size: calc(var(--root-fz) / var(--design-width) * 100vw); } }

body { line-height: var(--line-height); }
@media screen and (max-width: 1024px) { body { min-width: calc(var(--minwidth) * 1px); } }

/* ---------------------------------------------
*   <a> tag
--------------------------------------------- */
a { color: inherit; cursor: pointer; text-decoration: none; }

/* ---------------------------------------------
*   <img> tag
--------------------------------------------- */
img { height: auto; max-width: 100%; vertical-align: bottom; width: 100%; }

/* ---------------------------------------------
*   <hr> tag as anchor target
--------------------------------------------- */
hr[id^="anchor-"] { background: 0; border: 0; display: block; height: 0; margin: calc(var(--fixed-header-height) * -1px) 0 0 0; padding: calc(var(--fixed-header-height) * 1px) 0 0 0; pointer-events: none; width: auto; }

/* ---------------------------------------------
*   keyframes animation
--------------------------------------------- */
@keyframes shine { 100% { left: 100%; } }