/*------------------------------------------------------------
  フォント定義
------------------------------------------------------------*/

@font-face {
  font-family: "opensanswdthwght-webfont";
  src: url("/ux/assets/fonts/opensanswdthwght-webfont.woff2") format("woff2"),
       url("/ux/assets/fonts/opensanswdthwght-webfont.woff") format("woff");
  font-weight: 300 400 700;
  font-style: normal;
}

@font-face {
  font-family: "opensans-italicwdthwght-webfont";
  src: url("/ux/assets/fonts/opensans-italicwdthwght-webfont.woff2") format("woff2"),
       url("/ux/assets/fonts/opensans-italicwdthwght-webfont.woff") format("woff");
  font-weight: 300 400;
  font-style: italic;
}

@font-face {
  font-family: "PPPangramSans-CondensedThin";
  src: url("/ux/assets/fonts/PPPangramSans-CondensedThin.woff2") format("woff2"),
       url("/ux/assets/fonts/PPPangramSans-CondensedThin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "CircularXXTrialWeb-Bold";
  src: url("/ux/assets/fonts/CircularXXTrialWeb-Bold.woff2") format("woff2"),
       url("/ux/assets/fonts/CircularXXTrialWeb-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}


/* ---------------------------------------------
   1) 全体レイアウト・背景統一
--------------------------------------------- */

:root {
  /* Base geometric spacing scale */
  --space-xss: 0.5rem;
  --space-xs: 0.67rem;
  --space-sm: 0.89rem;
  --space-md: 1.18rem;
  --space-lg: 1.57rem;
  --space-xl: 2.09rem;
  --space-2xl: 2.78rem;
  --space-3xl: 3.70rem;
  --space-4xl: 4.93rem;
  --space-5xl: 6.57rem;
  --space-6xl: 8.75rem;
  --space-7xl: 11.66rem;
  --space-8xl: 15.5rem;

  /* Fluid Inline Spacing (horizontal) */
  --space-inline-xxs: clamp(0.50rem, 1vw, 0.75rem);
  --space-inline-xs: clamp(0.67rem, 1.25vw, 1rem);
  --space-inline-sm: clamp(0.89rem, 1.5vw, 1.25rem);
  --space-inline-md: clamp(1.18rem, 2vw, 1.75rem);
  --space-inline-lg: clamp(1.57rem, 2.5vw, 2.50rem);
  --space-inline-xl: clamp(2.09rem, 3vw, 3.25rem);
  --space-inline-2xl: clamp(2.78rem, 3.5vw, 4rem);
  --space-inline-3xl: clamp(3.70rem, 4vw, 5rem);
  --space-inline-4xl: clamp(4.93rem, 5vw, 6.50rem);
  --space-inline-5xl: clamp(6.57rem, 6vw, 8.50rem);
  --space-inline-6xl: clamp(8.75rem, 7vw, 11rem);
  --space-inline-7xl: clamp(11.66rem, 8vw, 14rem);
  --space-inline-8xl: clamp(15.50rem, 9vw, 18rem);

  /* Fluid Block Spacing (vertical) */
  --space-block-xxs: clamp(0.50rem, 1vh, 0.75rem);
  --space-block-xs: clamp(0.67rem, 1.25vh, 1rem);
  --space-block-sm: clamp(0.89rem, 1.5vh, 1.25rem);
  --space-block-md: clamp(1.18rem, 2vh, 1.75rem);
  --space-block-lg: clamp(1.57rem, 2.5vh, 2.50rem);
  --space-block-xl: clamp(2.09rem, 3vh, 3.25rem);
  --space-block-2xl: clamp(2.78rem, 3.5vh, 4rem);
  --space-block-3xl: clamp(3.70rem, 4vh, 5rem);
  --space-block-4xl: clamp(4.93rem, 5vh, 6.50rem);
  --space-block-5xl: clamp(6.57rem, 6vh, 8.50rem);
  --space-block-6xl: clamp(8.75rem, 7vh, 11rem);
  --space-block-7xl: clamp(11.66rem, 8vh, 14rem);
  --space-block-8xl: clamp(15.50rem, 9vh, 18rem);

  /* SEMANTIC SHORTCUTS (Optional) */
  /* Header & Footer Padding */
  --header-padding-top: var(--space-block-lg);
  --header-padding-inline: var(--space-inline-lg);
  --footer-padding-inline: var(--space-inline-xl);
  --footer-padding-bottom: var(--space-block-lg);

  /* Main spacing */

  --h2-padding-left: var(--space-inline-5xl);

  --image-wrapper-gap: var(--space-inline-lg);
  --caption-margin-top: var(--space-block-xxs);

  --hero-image-margin-bottom: var(--space-block-4xl);

  --section-padding-top: var(--space-block-4xl);
  --section-padding-inline: var(--space-block-4xl);
  --section-margin-bottom: var(--space-block-8xl);

  --section-children-margin-top: var(--space-block-3xl);
  --article-children-margin-top: var(--space-block-3xl);

  --container-padding-top: var(--space-block-5xl);
  --container-padding-inline: var(--space-inline-lg);
  --container-padding-bottom: var(--space-block-3xl);

  /* Fluid Font Size */
  --font-size-base: clamp(1.2rem, 1.5vw + 0.5rem, 1.25rem);
  /* 1.2 × larger */
  --font-size-120: clamp(1.2rem, 1.8vw + 0.6rem, 1.5rem);
  /* 1.4 × larger */
  --font-size-140: clamp(1.4rem, 2.1vw + 0.7rem, 1.75rem);
  /* 200% */
  --font-size-200: clamp(2.4rem, 3.0vw + 1.0rem, 2.5rem);

  /* 300% */
  --font-size-300: clamp(3.6rem, 4.5vw + 1.5rem, 3.75rem);

  /* 400% */
  --font-size-400: clamp(4.8rem, 6.0vw + 2.0rem, 5.0rem);

  /* 500% */
  --font-size-500: clamp(6.0rem, 7.5vw + 2.5rem, 6.25rem);

  /* Footer Gap Size */
  --space-footer-gap: var(--space-xl);
}

/* 0) Make sizing predictable and safe everywhere */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* padding/border do NOT add overflow */
}

/* 1) Never let content exceed its container by default */
img,
svg,
video,
canvas {
  max-inline-size: 100%;
  /* writing-mode safe */
  block-size: auto;
  display: block;
}

/* 6) Optional: avoid layout “jumps” when the vertical scrollbar appears */
html {
  scrollbar-gutter: stable both-edges;
}

html,
body {
  height: auto;
  /* ← 100% から変更（ページ全体スクロール可に） */
  margin: 0;
  padding: 0;
  font-size: var(--font-size-base);
  font-family: "opensanswdthwght-webfont", sans-serif;
  font-weight: 400;
  line-height: 1.291;
}

body {
  display: block;
  /* ← Flex不要。自然なページスクロールに変更 */
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
}

.container {
  inline-size: 100%;
  /* use % inside the layout, not vw */
  margin-inline: auto;
  max-width: 960px;
}

section {
  margin-bottom: var(--section-margin-bottom);
}

h1,
h2,
h3,
button {
  /* display: inline-block; */
  max-inline-size: 100%;
  vertical-align: baseline;
  margin-block: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
}

h1 {
  padding: var(--header-padding-top) 0 0 var(--header-padding-inline);
}

h2 {
  font-size: var(--font-size-200);
  padding-left: var(--h2-padding-left);
  font-weight: 700;
  width: 100%;
}

/* .section_number{
  font-size: var(--font-size-400);
}*/

h3 {
  font-weight: 700;
  width: 100%;
}

p {
  margin-block-start: 0;
  /* overwrite user agent style */
  margin-block-end: 0;
  /* overwrite user agent style */

  /* Word‑breaking & hyphenation */
  overflow-wrap: break-word;
  /* wrap long words */
  word-break: break-word;
  /* legacy support */
  hyphens: auto;
  /* smart hyphenation in supported browsers */

  /* Text appearance 
  text-align: justify; */
}

ul,
ol {
  list-style: none;
  padding: 0;
  /* ブラウザによるデフォルトのインデントをリセット */
  margin: 0;
  /* 必要に応じてマージンもリセット */
  margin-bottom: var(--p-padding-bottom);
}

figure {
  margin-block-start: 0;
  margin-block-end: var(--article-children-margin-top);
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.hero_image {
  margin-bottom: var(--hero-image-margin-bottom);
}

figcaption {
  margin-block-start: var(--caption-margin-top);
  font-family: "opensans-italicwdthwght-webfont";
  font-style: italic;
}

.term-list {
  list-style: none;
  padding: 0;
}

.term-list li {
  /*  padding-left: var(--h2-padding-left);   /* Einzug für alle Zeilen */
  /*  text-indent: calc((var(--h2-padding-left))*-1);   /* Hebt die erste Zeile zurück */
  list-style-type: disc;
}

.term {
  font-weight: 700;
  /* text-decoration: underline; */
}

.bold {
  font-weight: 700;
  /* text-decoration: underline; */
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.flow ul>*+* {
  /* global rhythm */
  margin-block-start: var(--space-block-xxs);
}

article>*+* {
  /* global rhythm */
  margin-block-start: var(--article-children-margin-top);
}

section>*+* {
  /* global rhythm */
  margin-block-start: var(--section-children-margin-top);
}

h2+p {
  margin-block-start: 0;
}

h3+p {
  margin-block-start: 0;
}

/* Key Problems & Solutions セクションだけに効かせる */
.kps {
  /* セクション内専用トークン（既存スケールを再利用） */
  --kps-gap-tight: var(--space-block-xxs);
  /* 既存の最小ブロックスペーシング */
}

/* マージンの“合算/相殺”を避けるため、片側を0にして明示制御 */
.kps h3 {
  margin-block-end: 0;
  /* 見出し直下は0に固定 */
}

.kps h3+ul {
  margin-block-start: var(--kps-gap-tight);
  /* 見出しとリストの距離をトークンで管理 */
}

/* リストと次の見出しの間は少し広めにしたい場合（任意） */
.kps ul {
  margin-block-end: var(--space-block-sm);
  /* 既存スケールで統一感 */
}


/* ---------------------------------------------
   2) Cards
--------------------------------------------- */
main {
  width: 100%;
}

.home main {
  height: 100%;
}

.home {
  height: 100dvh;
}

.card_inner {
  max-inline-size: 100%;
  height: 100%;
}

.practice {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 13vh);
  overflow: hidden;
  margin-bottom: 0;
}

#draggable-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.practice .content {
  position: absolute;
  padding: 10px;
  border: 1px solid #ddd;
  background: #f0f0f0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: grab;
  box-sizing: border-box;
  aspect-ratio: 1 / 1.414;
  width: 10em;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.practice .content:active {
  cursor: grabbing;
}

.practice .content:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.practice .content .number {
  font-size: 0.8rem;
  color: #333;
  font-family: "swear-text", serif;
  font-weight: 400;
  line-height: 1.4em;
  margin: 0;
}

.practice .content h2 {
  font-family: "PPPangramSans-CondensedThin";
  font-size: 1.5rem;
  line-height: 1.1em;
  padding-left: 0;
  margin: 0;
  color: #333;
}

.practice .content .number+h2 {
  margin-top: 0;
}

.practice .content p {
  font-family: "PPPangramSans-CondensedThin";
  font-size: 1rem;
  margin: 0;
  color: #666;
}

/* BG with drag */
.practice .content.dragging {
  background-color: #ffffff;
  /* ドラッグ中の背景色 */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  /* 立体感を強調するなら追加 */
  transition: background-color 0.3s ease;
}


/* 背景全体の色が変わる  */
body.dragging {
  background-color: #e7eae6;
  transition: background-color 0.4s ease;
}

/*.dark-card {
  background-color: #111b11ff;
  color: #fff;
} */

.card {
  position: relative;
  /* アイコンを絶対位置で中に配置するために必要 */
}

.card-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8%;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  text-align: center;
  box-sizing: border-box;
}


.coming-soon-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #999;
  width: 16px;
  height: 16px;
}

.site-header {
  padding: 32px 24px;
  /* 上と左右に余白 */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  z-index: 10;
}


.logo-link {
  display: inline-block;
}

.site-logo {
  height: 32px;
  /* または 36px に調整可 */
  width: auto;
  display: block;
}


/* ---------------------------------------------
   3) ヘッダー構成
--------------------------------------------- */

.header_inner {
  position: fixed;
  inset: var(--header-padding-top) var(--header-padding-inline) auto;
  display: flex;
  align-items: baseline;
  justify-content: right;
  padding-bottom: var(--space-block-xs);
}


/* Closeボタン */
header .close-btn {
  top: 0;
  right: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #000;
  outline: none;
  appearance: none;
  transition: opacity 0.2s;
  display: none;
}

header .close-btn:hover {
  opacity: 0.6;
}

header .close-btn:focus {
  outline: none;
}

/* ---------------------------------------------
   4) コンテンツ本文 
--------------------------------------------- */

.container.main_inner {
  padding: var(--container-padding-top) var(--container-padding-inline) var(--container-padding-bottom);
}

.container.main_inner h1 {
  position: relative;
  /* inset: var(--container-padding-top) var(--header-padding-inline) auto; */
}

.ab-test-gallery {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

figure:last-child {
  margin-block-end: 0;
}

.image-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: start;
  gap: var(--image-wrapper-gap);
}

/* MOBILE defaults (stacked, no stretch) */
.image-wrapper--scaled-3up {
  gap: 4rem;
  --scale: 1;
  /* mobile scale */
  display: grid;
  grid-template-columns: 1fr;
  /* stacked */
  align-items: start;
  /* prevent equal-height stretching */
  justify-items: start;
  grid-auto-rows: max-content;
  /* row height = content height */
}

/* Key: never force 100% width; cap at container instead */
.image-wrapper--scaled-3up>.img-3up {
  display: block;
  width: min(100%, calc(var(--nw, 0) * 1px * var(--scale)));
  height: auto;
  /* ↑ If a global rule sets width:100%, this wins by specificity+order */
}

/* 5) Flex/Grid children are allowed to shrink (prevents content-based overflow) */
:where(.ab-test-gallery, .image-wrapper)>* {
  min-inline-size: 0;
}


.img-180 {
  width: 45%;
  max-width: 180px;
  height: auto;
}

.img-450 {
  width: 100%;
  max-width: 450px;
  height: auto;
}

.img-ab-test {
  width: 100%;
  max-width: 450px;
  height: auto;
}

.img-960 {
  width: 100%;
  max-width: 960px;
  height: auto;
}


.video-portrait {
  max-width: 480px;
  /* ただし最大幅は480pxに制限 */
  max-height: 80dvh;
  /* アスペクト比を保持 */
  display: block;
  /*  margin: 0 auto;       /* 中央寄せ（任意） */
}

.video-landscape {
  max-width: 960px;
  /* PCでは最大960pxに */
  width: 100%;
  /* モバイルでは画面幅いっぱい */
  display: block;
  /* インライン扱いによる隙間をなくす */
  /* margin: 0 auto;  中央寄せしたいときだけ有効に */
}

#legal-info {
  padding-left: 0;
}

#contact-info {
  padding-left: 0;
}

/* ---------- Layout ---------- */
.persona-image-container {
  position: relative;
  display: inline-block;
}

.persona-image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.persona-quotes {
  position: absolute;
  /* overlay */
  top: 2%;
  left: 5%;
  right: 5%;
  /* “upper‑third” cinematic position */
  color: #5976b9;
  pointer-events: none;
}

.persona-quotes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* ---------- Animation ---------- */
/* .quote now targets the <li> directly */
.quote {
  left: 0;
  /* NEW: pin to left edge of overlay */
  width: 100%;
  opacity: 0;
  font-size: var(--font-size-120);
  font-family: "opensans-italicwdthwght-webfont";
  font-weight: 300;
  font-style: italic;
  text-align: left;
  quotes: initial;
  animation: fadeCycle 10s var(--expo-ease) infinite;
  margin-bottom: var(--space-xxs);
}

.q_cs3_colour {
  color: #012796;

}

/* exponential‑like easing (close to GSAP expoInOut) */
:root {
  --expo-ease: cubic-bezier(.87, 0, .13, 1);
}

/* Quote 1 timeline (0 → 10 s) */
.q1 {
  animation: quote1Cycle 10s var(--expo-ease) infinite;
}

/* Quote 2 starts later but shares same 10 s cycle */
.q2 {
  animation: quote2Cycle 10s var(--expo-ease) infinite;
}

/* Keyframes */
@keyframes quote1Cycle {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  /* fade‑in 0 – 1 s  */
  40% {
    opacity: 1;
  }

  /* stays alone 1 – 3 s */
  90% {
    opacity: 1;
  }

  /* stays with q2 4 – 9 s */
  100% {
    opacity: 0;
  }

  /* fade‑out 9 – 10 s */
}

@keyframes quote2Cycle {

  0%,
  30% {
    opacity: 0;
  }

  /* hidden first 3 s   */
  40% {
    opacity: 1;
  }

  /* fade‑in 3 – 4 s     */
  90% {
    opacity: 1;
  }

  /* with q1 4 – 9 s     */
  100% {
    opacity: 0;
  }

  /* fade‑out 9 – 10 s   */
}

/* ---------- Visually‑hidden utility (unchanged) ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}





.resume-download {
  font-family: "opensans-italicwdthwght-webfont";
  font-style: italic;
  text-align: left;
}

.resume-download a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: #000;
  text-decoration: none;
  transition: color 0.3s ease;
}

.resume-download a:hover {
  transition: opacity 0.2s;
  opacity: 0.6;
}

.download-icon {
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.resume-download a:hover .download-icon {
  transform: translateY(2px);
}

#email-obfuscated a {
  text-decoration: none;
}

.impressum-meta a {
  text-decoration: none;
  color: #000;
  font-family: "opensans-italicwdthwght-webfont";
  font-style: italic;
}

.impressum-meta a:hover,
.impressum-meta a:focus {
  transition: opacity 0.2s;
  opacity: 0.6;
}

/*------------------------------------------------------------
  Style guide Color system (no inline styles)
------------------------------------------------------------*/

.swatch-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.swatch{ margin: 0; }

/* Set tokens on the SAME element (stronger selector =確実に当たる) */
.swatch-grid .tile.tile--primary   { --c1:#5c4688; --c2:#f7f4ff; }
.swatch-grid .tile.tile--secondary { --c1:#626262; --c2:#f4f6f8; }
.swatch-grid .tile.tile--success   { --c1:#0b4b3a; --c2:#8af4a1; }
.swatch-grid .tile.tile--pause     { --c1:#5a3810; --c2:#ffd68f; }

/* Render (stable + fallback) */
.swatch-grid .tile{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 140px;

  background-color: var(--c1, #000);
  background-image: linear-gradient(
    135deg,
    var(--c1, #000) 0 50%,
    var(--c2, #fff) 50% 100%
  );
  background-repeat: no-repeat;
} 


/*------------------------------------------------------------
  Typography
------------------------------------------------------------*/
/* レイアウト（見本の垂直リズム用） */
.stack>*+* {
  margin-top: 40px;
}

.sample>*+* {
  margin-top: 12px;
}

/* ============ Type scale ============ */
/* H1-XL: 32/32, Circular Bold */
.h1-xl {
  font-family: "Circular", serif;
  font-weight: 700;
  /* Bold */
  font-size: 2rem;
  /* 32px */
  line-height: 1;
  /* 32/32 */
  letter-spacing: 0;
}

/* H1-L: 22/22, Circular Bold */
.h1-l {
  font-family: "Circular", serif;
  font-weight: 700;
  /* Semibold */
  font-size: 1.375rem;
  /* 22px */
  line-height: 1;
  /* 22/22 */
}

/* H2: 16/22, Inter Semibold */
.h2 {
  font-family: "inter-variable", sans-serif;
  font-weight: 600;
  /* Semibold */
  font-size: 1rem;
  /* 16px */
  line-height: 1.375;
  /* 22/16 */
}

/* Body-M: 16/24, Inter Regular */
.body-m {
  font-family: "inter-variable", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  /* 16px */
  line-height: 1.5;
  /* 24/16 */
}

/* Meta: 12/12, Inter Regular */
.meta {
  font-family: "inter-variable", sans-serif;
  font-weight: 400;
  font-size: .75rem;
  /* 12px */
  line-height: 1;
  /* 12/12 */
}

/* Nav: 10/14, Inter Regular */
.nav {
  font-family: "inter-variable", sans-serif;
  font-weight: 400;
  font-size: .625rem;
  /* 10px */
  line-height: 1.4;
  /* 14/10 */
  letter-spacing: .02em;
}

/* Link: 16/24, Inter Regular */
.link_text {
  font-family: "inter-variable", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  /* 16px */
  line-height: 1.5;
  /* 24/16 */
}

/* Button/CTA: 18/18, Inter Regular */
.cta {
  font-family: "inter-variable", sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  /* 18px */
  line-height: 1;
  /* 18/18 */
}

/* Chips: 14/18, Inter Regular */
.chip {
  font-family: "inter-variable", sans-serif;
  font-weight: 400;
  font-size: .875rem;
  /* 14px */
  line-height: 1.2857;
  /* 18/14 */
}


/*------------------------------------------------------------
	Nav レイアウト
------------------------------------------------------------
nav {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: transparent;
  padding: 0 var(--footer-padding-inline) var(--footer-padding-bottom);  
  z-index: 100;
  box-sizing: border-box;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.logo-list,
.link-list {
  list-style: none;
  display: flex;
  gap: var(--space-footer-gap);
  padding: 0;
  margin: 0;
  margin-left: auto; 
}

.link-list a {
  color: #000;
  text-decoration: none;
  position: relative;
  transition: all 0.2s ease-in-out;
}


.link-list a:hover,
.link-list a:focus {
  transition: opacity 0.2s;
  opacity: 0.6;
}

.link-list a:hover::after {
  width: 100%;
}*/

/*------------------------------------------------------------
	Media Queries
------------------------------------------------------------*/

/* Tablet breakpoint: >600px */
@media (min-width: 600px) {
  .container.main_inner {
    --container-padding-top: var(--space-block-6xl);
    --container-padding-inline: var(--space-inline-2xl);
    --container-padding-bottom: var(--space-block-4xl);
    padding: var(--container-padding-top) var(--container-padding-inline) var(--container-padding-bottom);
  }

  /* Closeボタン */
  header .close-btn {
    display: block;
  }

  footer {
    padding-left: var(--space-inline-lg);
    padding-right: var(--space-inline-lg);
    padding-bottom: var(--space-block-3xl);
  }

  .image-wrapper--scaled-3up {
    --scale: 0.9;
    grid-template-columns: repeat(2, max-content);
    justify-content: space-between;
    align-items: start;
    /* keep */
  }

  .image-wrapper--scaled-3up>.img-3up {
    /* At tablet+, you can drop the 100% clamp if you like */
    width: calc(var(--nw, 0) * 1px * var(--scale));
    max-width: none;
  }

  .img-180 {
    width: 17%;
    max-width: 180px;
    height: auto;
  }

  .img-450 {
    width: 48%;
    max-width: 450px;
    height: auto;
  }

  .container.main_inner h1 {
    position: relative;
  }
}

/* Desktop breakpoint: >1024px */
@media (min-width: 1025px) {
  .container.main_inner {
    --container-padding-top: var(--space-block-4xl);
    --container-paddingr-inline: var(--space-inline-3xl);
    --container-padding-bottom: var(--space-block-4xl);
    padding: var(--container-padding-top) var(--container-padding-inline) var(--container-padding-bottom);
  }

  /* Closeボタン */
  header .close-btn {
    display: block;
  }

  footer {
    --footer-padding-inline: var(--space-inline-2xl);
    --footer-padding-bottom: calc((var(--space-block-2xl))*.8);
    padding: 0 var(--footer-padding-inline) var(--footer-padding-bottom);
  }

  .image-wrapper--scaled-3up {
    gap: 0;
    --scale: 0.6;
    grid-template-columns: repeat(3, max-content);
  }

  .img-180 {
    width: 15%;
    max-width: 180px;
    height: auto;
  }

  .img-2up {
    display: inline-block;
    width: 49%;
    max-width: 450px;
    height: auto;
    vertical-align: top;
  }

  /* 4-up 用 */
  .img-4up {
    width: 21%;
    max-width: 225px;
    height: auto;
    vertical-align: top;
  }

  .img-320 {
    width: 30%;
    max-width: 280px;
    height: auto;
  }

  .img-450 {
    width: 47%;
    max-width: 450px;
    height: auto;
  }
}

/* Desktop breakpoint: >1024px */
@media (min-width: 1440px) {
  h1 {
    position: fixed;
    --container-padding-top: var(--space-block-6xl);
    --header-padding-inline: var(--space-inline-5xl);
    inset: var(--container-padding-top) 0 auto var(--header-padding-inline);
    padding: 0 0 0 0;
  }
}