/* Mini Skeleton CSS – single file, ~few KB
   Policy: variables -> reset -> base -> layout -> components -> utilities
*/

/* ============ Variables ============ */
:root{
  --font-sans: "Noto Sans JP", sans-serif,ui-sans-serif, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --size-container: 72rem; /* 1152px */
  --radius: 12px;
  --ring: 2px;

  /* colors */
  --bg: #ffffff;
  --fg: #222;
  --muted: #666;
  --border: #e5e7eb;

  /* spacing scale (4px grid) */
  --s-0: 0;
  --s-1: .25rem;  /* 4px */
  --s-2: .5rem;   /* 8px */
  --s-3: .75rem;  /* 12px */
  --s-4: 1rem;    /* 16px */
  --s-5: 1.25rem; /* 20px */
  --s-6: 1.5rem;  /* 24px */
  --s-8: 2rem;    /* 32px */
  --s-12: 3rem;   /* 48px */
}

/* ============ Reset (最小限) ============ */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-sans); line-height: 1.6; color: var(--fg); 
  font-weight: normal;
  background: linear-gradient(180deg, #8f8f8f 0%, #f3f3f3 25%, #f3f3f3 75%, #8f8f8f 100%);
  background-size: 200% 200%;
  animation: gradationAnim 10s ease infinite;
  display: flex;
  flex-direction: column;
}
@keyframes gradationAnim {
  0% { background-position: 50% 100% }
  50% { background-position: 50% 0% }
  100% { background-position: 50% 100% }
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; }
li{
  list-style: none;
  padding-left: 1em;
  text-indent: -1em; /* hanging indent to keep wrapped lines aligned after one space */
}
button { background: none; border: none; padding: 0; cursor: pointer; }
:focus-visible { outline: var(--ring) solid rgba(13,110,253,.5); outline-offset: 2px; }

/* ============ Base Typography ============ */
main{flex: 1 0 auto;}
footer {
  max-width: 100%;
  width: 100%;
  margin: 100px auto 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container { width: 100%; max-width: calc(var(--size-container) + 2*var(--s-4)); margin-inline: auto; padding-inline: var(--s-4); text-align: center;}
h1,h2,h3,h4 { line-height: 1.25; margin: var(--s-6) 0 var(--s-3); }
h1 { font-size: clamp(1.875rem, 1.2rem + 2vw, 2.5rem); font-family: "Noto Serif JP", serif;}
h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); font-family: "Noto Serif JP", serif;line-height: 1.8;}
h3 { font-size: 1.25rem; }
p  { margin: 0 0 var(--s-4); color: var(--fg); font-weight: normal;}
small, .text--muted { color: var(--muted); }

/* Code */
code, pre { font-family: var(--font-mono); background: #f6f8fa; border: 1px solid var(--border); border-radius: 8px; }
code { padding: 0 .25em; }
pre { padding: var(--s-4); overflow:auto; }

/* ============ Grid (mobile-first) ============ */
.grid { display: grid; gap: var(--s-4); }
@media (min-width: 640px){
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  /* columns */
  .col-1{grid-column: span 1;} .col-2{grid-column: span 2;} .col-3{grid-column: span 3;}
  .col-4{grid-column: span 4;} .col-5{grid-column: span 5;} .col-6{grid-column: span 6;}
  .col-7{grid-column: span 7;} .col-8{grid-column: span 8;} .col-9{grid-column: span 9;}
  .col-10{grid-column: span 10;} .col-11{grid-column: span 11;} .col-12{grid-column: span 12;}
}

/* ============ Components (BEM) ============ */
/* Button */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em; padding: .6em 1.1em; border-radius: var(--radius);
  border: 1px solid var(--border); background:var( --muted); color: var(--fg);
  color:#fff;
  transition: transform .02s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { opacity: .8; }
.btn:active { transform: translateY(1px); }
.btn--primary{ background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn--ghost{ background: transparent; }
.btn--block{ width: 100%; }

.logo__img{
  margin: 10px auto 20px auto;
}
.list{
  margin-top: 40px;
}
.notice{
  font-size: small;
}
.title{
  position: relative;
  margin: 0 auto;
  width: fit-content;
}
.title::before,
.title::after {
  background:#4a4a4a;
  content: "";
  height: 1px;
  width: 90px;
  display: block;
}
.title::before {
  margin-right: 10px;
  transform: rotate(-60deg);
  position: absolute;
  bottom: 0px;
  left: -100px;
}
.title::after {
  margin-left: 10px;
  transform: rotate(-60deg);
  position: absolute;
  bottom: 0;
  right: -70px;
}
.is-sp{
  display: none;
}
@media (max-width: 640px){
  .is-sp{
    display: block;
  }
  .title{
    text-align: center;
    margin-bottom: 30px;
  }
.title::before {
  margin-right: 10px;
  transform: rotate(-60deg);
  position: absolute;
  top: 50px;
  left: -90px;
}
.title::after {
  margin-left: 10px;
  transform: rotate(-60deg);
  position: absolute;
  top: 50px;
  right: -70px;
}
}
.partner{
  max-width: 800px;
  margin: 0 auto 60px auto;
  text-align: left;
  background: rgb(255 255 255 / 24%);
  padding: var(--s-6) var(--s-4);
  border-radius: var(--radius);
  border: 2px solid #ccc;
}
.partner h2{
  text-align: center;
  margin-top: 0;
}
@media (min-width: 640px){
  .partner .col-8{
    grid-column: 3 / span 8;
  }
}

/* ============ Utilities (u-*) ============ */
/* spacing (margin/padding only what使う分) */
.u-mt-0{margin-top:var(--s-0);} .u-mt-2{margin-top:var(--s-2);} .u-mt-4{margin-top:var(--s-4);} .u-mt-6{margin-top:var(--s-6);} .u-mt-8{margin-top:var(--s-8);}
.u-mb-0{margin-bottom:var(--s-0);} .u-mb-2{margin-bottom:var(--s-2);} .u-mb-4{margin-bottom:var(--s-4);} .u-mb-6{margin-bottom:var(--s-6);} .u-mb-8{margin-bottom:var(--s-8);}
.u-p-2{padding:var(--s-2);} .u-p-4{padding:var(--s-4);} .u-p-6{padding:var(--s-6);}

/* text & display */
.u-center{text-align:center;}
.u-right{text-align:right;}
.u-muted{color:var(--muted);}
.u-hide{display:none;}
.u-maxw-sm{max-width:40rem;margin-inline:auto;}