@charset "utf-8";

/*------------------------------------------------------------
  Disable scrolling and ensure full-height layout
------------------------------------------------------------*/
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;
}

/*------------------------------------------------------------
  フォント定義
------------------------------------------------------------*/
@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: "opensanswdthwght-webfont";
  src: url("/ux/assets/fonts/opensanswdthwght-webfont.woff2") format("woff2"),
    url("/ux/assets/fonts/opensanswdthwght-webfont.woff") format("woff");
  font-weight: 400;
  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-padding-bottom: var(--space-block-5xl);

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

  --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(1rem, 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);

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


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;
}

.practice .container {
  position: relative;
  width: 100dvw;
  height: 80vh;
  min-height: calc(100vh - 13vh);
  overflow: hidden;
}

.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: 12vw;
  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;
}

.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;
}

.practice .content h2 {
  font-family: "PPPangramSans-CondensedThin";
  font-size: 1.5rem;
  line-height: 1.1em;
  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;
  /* アイコンを絶対位置で中に配置するために必要 */
}

.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;
}




/* Tablet 
@media (max-width: 1024px) {
  .practice .container {
    width: 70rem;
  }
  .practice .content {
    width: 18vw;
  }
  .practice .content .number {
    font-size: 1rem;
  }
  .practice .content h2 {
    font-size: 1.8rem;
  }
  .practice .content p {
    font-size: 1.2rem;
  }
}*/

/* Mobile 
@media (max-width: 768px) {
  .practice .container {
    width: 50rem;
  }
  .practice .content {
    width: 30vw;
  }
  .practice .content .number {
    font-size: 1.2rem;
  }
  .practice .content h2 {
    font-size: 2rem;
  }
  .practice .content p {
    font-size: 1.4rem;
  }
}*/

/* Small Mobile 
@media (max-width: 480px) {
  .practice .container {
    width: 100%;
    height: auto;
  }
  .practice .content {
    width: 80vw;
  }
  .practice .content .number {
    font-size: 1.4rem;
  }
  .practice .content h2 {
    font-size: 2.2rem;
  }
  .practice .content p {
    font-size: 1.6rem;
  }
}*/


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

/* Tablet breakpoint: >600px */
@media (min-width: 600px) {
  footer {
    padding-left: var(--space-inline-lg);
    padding-right: var(--space-inline-lg);
    padding-bottom: var(--space-block-3xl);
  }
}

/* Desktop breakpoint: >1024px */
@media (min-width: 1025px) {

  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);
  }

}