@charset "UTF-8";

/* ==========================================================================
   Font-face declarations
   Adobe Fonts: Load Neue Haas Unica W1G via Adobe Fonts embed in HTML.
   Tazugane Gothic: Add local path if self-hosted.
   ========================================================================== */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* Colors */
  --background: #F7F7F7;
  --white: #FFFFFF;
  --black: #181818;
  --key: #100088;

  /* Typography - Font families */
  --font-en-main: "range-sans-variable","neue-haas-unica", sans-serif;

  --font-en-sub: "neue-haas-unica", sans-serif;
  --font-jp-main: "range-sans-variable","neue-haas-unica",'Tazugane Gothic StdN Light', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', sans-serif;
  --font-weight-light: 320;
  --font-weight-regular: 420;

  /* Spacing - Padding (desktop default) */
  --padding: 25px;

  /* Legacy aliases (map old names to design system) */
  --backgroundColor: var(--background);
  --textColor: var(--black);
  --mainColor: var(--key);
  --heading-font: var(--font-en-main);
  --text-font: var(--font-en-main);
  --h1-font-size: 42px;

  --shuffle-height: 15vh;
}

/* Mobile: reduce padding */
@media (max-width: 767px) {
  :root {
    --padding: 15px;
    --h1-font-size: 32px;
    --shuffle-height: 30px;
  }
}

@media (min-width: 1640px) {
  :root {
    --padding: 15px;
    --h1-font-size: 46px;
  }
}

/* ==========================================================================
   Base Reset / Normalize
   ========================================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   Global HTML & Body
   ========================================================================== */

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}



html,
body {
  width: 100%;
  min-height: 100%;
  background-color: var(--background);
  color: var(--key);
  font-family: var(--font-en-main);
  font-weight: var(--font-weight-regular);
  font-variation-settings: 'wght' var(--font-weight-regular);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
}
html {background-color: var(--key);}

/* Japanese: use JP main font */
:lang(ja) body,
:lang(ja) {
  font-family: var(--font-jp-main);
  font-weight: 400;
  font-variation-settings: 'wght' 400;
}

/* ==========================================================================
   Typography - Headings (Desktop default: 1024px+)
   ========================================================================== */
svg, svg path, svg g {fill: currentColor;}
h1,.h1,h2,.h2,h3,.h3,
h4,.h4,h5,.h5,h6,.h6,
span, button, ul, li, a, div,p {
  /* color is inherited from body (var(--key)) so dark sections
     like /contact can override it via `color: var(--white)`. */
  color: inherit;
  font-weight: var(--font-weight-regular);
  font-variation-settings: 'wght' var(--font-weight-regular);
  line-height: 1.6;
}

p, .p {
  font-size: 14.5px;
  line-height: 1.65;
  font-family: var(--font-en-main);
  font-weight: var(--font-weight-regular);
}
p:lang(en) {line-height: 1.4;}

h1, .h1 { font-size: var(--h1-font-size); line-height: 1.1;}
h2, .h2 { font-size: 24px; line-height: 1.2;}
h3, .h3 { font-size: 18px; line-height: 1.5;}
h4, .h4 { font-size: 13.5px;}
h5, .h5 { font-size: 11.5px;}
h6, .h6 { font-size: 10px;}


.sp {display: none;}
/* Tablet (1023px and below) - optional overrides */
@media (max-width: 1023px) {

  .sp {display: block;}
  .pc {display: none;}
  /* Adjust if needed; desktop sizes can persist or scale */
}

/* Mobile (767px and below) - Heading & body sizes */
@media (max-width: 767px) {
  h1, .h1 { font-size: var(--h1-font-size); }
  h2, .h2 { font-size: 18px; }
  h3, .h3 { font-size: 14px; }
  h4, .h4 { font-size: 12px; }
  h5, .h5 { font-size: 10.5px; }
  h6, .h6 { font-size: 9px; }

  body { font-size: 10.5px; }
  p, .p { font-size: 10.5px; }
}

@media (min-width: 1640px) {
  h1, .h1 { font-size: var(--h1-font-size); }
  h2, .h2 { font-size: 28px; }
  h3, .h3 { font-size: 22px; }
  h4, .h4 { font-size: 15px; }
  h5, .h5 { font-size: 13px; }
  h6, .h6 { font-size: 11.5px; }

  body { font-size: 13px; }
  p, .p { font-size: 15px; }
  :root { --padding: 30px; }
}

/* ==========================================================================
   Margin utility classes
   Values: 1, 3, 5, 8, 10, 15, 20, 30, 40, 60, 80, 100, 120 (pixels)
   ========================================================================== */

.mx-1  { margin-left: 1px;   margin-right: 1px; }
.mx-3  { margin-left: 3px;   margin-right: 3px; }
.mx-5  { margin-left: 5px;   margin-right: 5px; }
.mx-8  { margin-left: 8px;   margin-right: 8px; }
.mx-10 { margin-left: 10px;  margin-right: 10px; }
.mx-15 { margin-left: 15px;  margin-right: 15px; }
.mx-20 { margin-left: 20px;  margin-right: 20px; }
.mx-30 { margin-left: 30px;  margin-right: 30px; }
.mx-40 { margin-left: 40px;  margin-right: 40px; }
.mx-60 { margin-left: 60px;  margin-right: 60px; }
.mx-80 { margin-left: 80px;  margin-right: 80px; }
.mx-100 { margin-left: 100px; margin-right: 100px; }
.mx-120 { margin-left: 120px; margin-right: 120px; }

.my-1  { margin-top: 1px;   margin-bottom: 1px; }
.my-3  { margin-top: 3px;   margin-bottom: 3px; }
.my-5  { margin-top: 5px;   margin-bottom: 5px; }
.my-8  { margin-top: 8px;   margin-bottom: 8px; }
.my-10 { margin-top: 10px;  margin-bottom: 10px; }
.my-15 { margin-top: 15px;  margin-bottom: 15px; }
.my-20 { margin-top: 20px;  margin-bottom: 20px; }
.my-30 { margin-top: 30px;  margin-bottom: 30px; }
.my-40 { margin-top: 40px;  margin-bottom: 40px; }
.my-60 { margin-top: 60px;  margin-bottom: 60px; }
.my-80 { margin-top: 80px;  margin-bottom: 80px; }
.my-100 { margin-top: 100px; margin-bottom: 100px; }
.my-120 { margin-top: 120px; margin-bottom: 120px; }

.mt-1  { margin-top: 1px; }
.mt-3  { margin-top: 3px; }
.mt-5  { margin-top: 5px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.mt-80 { margin-top: 80px; }
.mt-100 { margin-top: 100px; }
.mt-120 { margin-top: 120px; }

.mb-1  { margin-bottom: 1px; }
.mb-3  { margin-bottom: 3px; }
.mb-5  { margin-bottom: 5px; }
.mb-8  { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }
.mb-80 { margin-bottom: 80px; }
.mb-100 { margin-bottom: 100px; }
.mb-120 { margin-bottom: 120px; }

.ml-1  { margin-left: 1px; }
.ml-3  { margin-left: 3px; }
.ml-5  { margin-left: 5px; }
.ml-8  { margin-left: 8px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-30 { margin-left: 30px; }
.ml-40 { margin-left: 40px; }
.ml-60 { margin-left: 60px; }
.ml-80 { margin-left: 80px; }
.ml-100 { margin-left: 100px; }
.ml-120 { margin-left: 120px; }

.mr-1  { margin-right: 1px; }
.mr-3  { margin-right: 3px; }
.mr-5  { margin-right: 5px; }
.mr-8  { margin-right: 8px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-30 { margin-right: 30px; }
.mr-40 { margin-right: 40px; }
.mr-60 { margin-right: 60px; }
.mr-80 { margin-right: 80px; }
.mr-100 { margin-right: 100px; }
.mr-120 { margin-right: 120px; }

/* ==========================================================================
   Special utility classes
   ========================================================================== */

.bold {
  font-variation-settings: 'wght' var(--font-weight-regular);
}

.white {
  color: var(--white);
}

.w100 {
  width: 100vw;
  margin-left: calc(-1 * var(--padding));
}

/* ==========================================================================
   Layout - Section padding
   ========================================================================== */

section {
  padding-left: var(--padding);
  padding-right: var(--padding);
}

/* ==========================================================================
   Elements
   ========================================================================== */

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:hover {
  opacity: 0.7;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 50%;
}

input, button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

/* ==========================================================================
   Legacy / compatibility (optional - remove if not needed)
   ========================================================================== */

.uppercase { text-transform: uppercase; }
.center { text-align: center; }
.flex { display: flex; justify-content: center; align-items: center; }