/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


/* Global Styles 
---------------------------------------------- */
/* @link https://utopia.fyi/space/calculator?c=320,12,1.2,960,16,1.25,5,2,&s=0.75|0.5|0.25,1.25|1.5|2|2.5|3|4|6|8,xl-3xl&g=s,l,xl,12 */


:root {
  --gutter: var(--space-m);
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  
  --radius-s: 0.2rem;
  --radius-m: 0.5rem;
  --radius-l: 0.75rem;
  --radius-xl: 2.5rem;
  --radius-full: calc(infinity * 1px);

  /* Space 3xs: 3px → 4px */
  --space-3xs: clamp(0.1875rem, 0.1563rem + 0.1563vw, 0.25rem);
  /* Space 2xs: 6px → 8px */
  --space-2xs: clamp(0.375rem, 0.3125rem + 0.3125vw, 0.5rem);
  /* Space xs: 9px → 12px */
  --space-xs: clamp(0.5625rem, 0.4688rem + 0.4688vw, 0.75rem);
  /* Space s: 12px → 16px */
  --space-s: clamp(0.75rem, 0.625rem + 0.625vw, 1rem);
  /* Space m: 15px → 20px */
  --space-m: clamp(0.9375rem, 0.7813rem + 0.7813vw, 1.25rem);
  /* Space l: 18px → 24px */
  --space-l: clamp(1.125rem, 0.9375rem + 0.9375vw, 1.5rem);
  /* Space xl: 24px → 32px */
  --space-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  /* Space 2xl: 30px → 40px */
  --space-2xl: clamp(1.875rem, 1.5625rem + 1.5625vw, 2.5rem);
  /* Space 3xl: 36px → 48px */
  --space-3xl: clamp(2.25rem, 1.875rem + 1.875vw, 3rem);
  /* Space 4xl: 48px → 64px */
  --space-4xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);
  /* Space 5xl: 72px → 96px */
  --space-5xl: clamp(4.5rem, 3.75rem + 3.75vw, 6rem);
  /* Space 6xl: 96px → 128px */
  --space-6xl: clamp(6rem, 5rem + 5vw, 8rem);
  
  /* Space l-2xl: 18px → 40px */
  --space-l-2xl: clamp(1.125rem, 0.4375rem + 3.4375vw, 2.5rem);
  /* Space s-3xl: 12px → 48px */
  --space-s-3xl: clamp(0.75rem, -0.375rem + 5.625vw, 3rem);
  /* Space 4xl-6xl: 48px → 128px */
  --space-4xl-6xl: clamp(3rem, 0.5rem + 12.5vw, 8rem);

  
  --font-base: YakuHanJP, "Noto Sans JP", san-serif;
  /* 9px → 10px */
  --font-size-2xs: clamp(0.563rem, 0.522rem + 0.171vw, 0.625rem);
  /* 10px → 12px */
  --font-size-xs: clamp(0.625rem, 0.545rem + 0.342vw, 0.75rem);
  /* 12px → 14px */
  --font-size-s: clamp(0.75rem, 0.670rem + 0.342vw, 0.875rem);
  /* 14px → 16px */
  --font-size-base: clamp(0.875rem, 0.795rem + 0.342vw, 1rem);
  /* 16px → 18px */
  --font-size-m: clamp(1rem, 0.920rem + 0.342vw, 1.125rem);
  /* 18px → 20px */
  --font-size-l: clamp(1.125rem, 1.045rem + 0.342vw, 1.25rem);
  /* 20px → 24px */
  --font-size-xl: clamp(1.25rem, 1.090rem + 0.684vw, 1.5rem);
  /* 24px → 30px */
  --font-size-2xl: clamp(1.5rem, 1.260rem + 1.026vw, 1.875rem);
  /* 28px → 36px */
  --font-size-3xl: clamp(1.75rem, 1.429rem + 1.368vw, 2.25rem);
  /* 32px → 42px */
  --font-size-4xl: clamp(2rem, 1.599rem + 1.709vw, 2.625rem);
  /* 36px → 48px */
  --font-size-5xl: clamp(2.25rem, 1.769rem + 2.051vw, 3rem);


  --bg-primary: #ffffff;
  --bg-secondary: #00afec; /* 水色 */
  --bg-tertiary: #0056a8; /* 青 */
  --bg-quaternary: #f6f6f6;
  --color-primary: #d92917; /* 赤 */
  --color-secondary: #00afec; /* 水色 */
  --color-tertiary: #0056a8; /* 青 */
  --color-quaternary: #ebc556; /* 金 */
  --text-dark: #000000;
  --text-light: #ffffff;
  
  --stroke: 1px solid var(--text-dark);
}

body {
  background: var(--bg-primary);
  color: var(--text-dark);
  font-size: var(--font-size-base);
  font-family: var(--font-base);
  line-height: 1;
  font-size-adjust: from-font;
  margin: 0;
}

h1 {
  font-size: var(--font-size-2xl);
}
h2 {
  font-size: var(--font-size-xl);
}
h3 {
  font-size: var(--font-size-m);
}
:is(h4, h5, h6) {
  font-size: var(--font-size-m);
}

small {
  font-size: var(--font-size-s);
}

ins {
  text-decoration: none;
  background: var(--color-primary);
  color: var(--color-dark);
  padding-inline: 0.3em;
}

:is(code, kbd, samp) {
  font-family: var(--font-mono);
  padding: 0.2em 0.2em 0.05em 0.2em;
  hyphens: none;
  tab-size: 2;
  text-align: left;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  box-decoration-break: clone;
}
@supports not (font-size-adjust: from-font) {
  :is(code, kbd, samp) {
    font-size: 0.8em;
  }
}
pre:has(code) {
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
pre code {
  border: none;
  background: none;
  padding: 0;
}
kbd {
  border: 1px solid;
  padding-block-end: 0.1em;
}
var {
  font-style: normal;
  font-weight: var(--font-medium);
}

q {
  font-style: italic;
}

ul:not([class]) {
  padding-inline-start: 1.7ch;
  list-style-type: disc;
}
ul:not([class]) > li {
  padding-inline-start: var(--space-xs);
}
ul ::marker {
  font-size: 0.8lh;
}
ol ::marker {
  font-size: 1em;
  font-weight: var(--font-bold);
}

[role='list'][class],
[role='tablist'][class] {
  margin-block: 0;
  padding: 0;
}

dt {
  font-weight: var(--font-medium);
}
dt + dd {
  margin-block-start: var(--space-xs);
}
dd + dt {
  margin-block-start: var(--space-s);
}
dd {
  margin-inline-start: 1.5ch;
}

blockquote {
  margin-inline: 0;
  color: var(--color-light);
}
blockquote footer {
  margin-block-start: var(--space-s);
  color: var(--color-primary);
  font-size: var(--size-step-0);
}
blockquote q {
  font-style: normal;
}

:is(video, iframe[src*='youtube']) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

img {
  height: auto;
  max-width: 100%;
  display: block;
}

figcaption {
  padding-block-start: 0.5em;
  font-size: var(--size-step-0);
  font-family: monospace;
}

table {
  border: var(--stroke);
  border-collapse: collapse;
  width: 100%;
}
th {
  text-align: left;
  font-weight: var(--font-bold);
  line-height: var(--leading-fine);
}
thead th {
  padding-block: var(--space-s);
}
td,
th {
  padding: var(--space-xs) var(--space-s);
}
th:not(:only-of-type) {
  border-block-end: var(--stroke);
}
th:only-of-type {
  border-inline-end: var(--stroke);
}
:is(th, td) ~ :is(th, td) {
  border-inline-start: var(--stroke);
}
tr + tr :is(th, td) {
  border-block-start: var(--stroke);
}

caption {
  caption-side: bottom;
  margin-block-start: var(--space-s);
}

a:not([class]) {
  text-underline-offset: 0.15lh;
  font-weight: 700;
  color: var(--color-secondary);
}
a:not([class]):hover {
  text-underline-offset: 0.1lh;
  color: var(--color-secondary);
}

:is(h1, h2, h3, h4) a:not([class]) {
  text-decoration-thickness: 0.1ex;
  text-underline-offset: 0.2ex;
}
:is(h1, h2, h3, h4) a:not([class]):hover {
  text-underline-offset: 0.2ex;
}

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-primary, currentColor);
  outline-offset: var(--focus-offset, 0.2lh);
}
@supports (-moz-appearance: none) {
  :root {
    --focus-offset: 0.08em;
  }
}

:target {
  scroll-margin-block: 5lh;
}

::selection {
  color: var(--text-light);
  background: var(--color-primary);
}

hr {
  border: none;
  border-block-start: var(--stroke);
  margin-block: var(--flow-space, var(--space-xl));
}

svg:not([class]) {
  width: auto;
  height: 1lh;
}

svg {
  flex-shrink: 0;
}

svg[role='img'][width][height] {
  width: revert;
  height: revert;
}


summary {
  font-weight: var(--font-bold);
  cursor: pointer;
}

details[open] summary {
  margin-block-end: var(--space-s);
}