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

:root {
  --color-primary: #2a2a84;
  --color-secondary: #217285;
  --color-tertiary: #2c652c;

  --color-primary-disabled: #9a9ab0;
  --color-secondary-disabled: #8593b3;
  --color-tertiary-disabled: #747474;

  --color-primary-hover: #0b0b3a;
  --color-secondary-hover: #174c58;
  --color-tertiary-hover: #a4e2a4;

  --color-text: #111;
  --color-text-inverted: #fff;
  --color-text-disabled: #747474;
}

body {
  font-family: sans-serif;
}

.contentsWrapper {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
}

h1 {
  display: flex;
  justify-content: center;
  text-align: center;
  column-gap: 16px;
  font-size: 24px;
  margin-bottom: 48px;
  &::before,
  &::after {
    content: "-";
  }
}

section {
  margin-bottom: 48px;
  h2 {
    font-size: 20px;
    padding-bottom: 6px;
    padding-left: 6px;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: 16px;
  }
}

button {
  appearance: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.contentsList {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  font-size: 18px;
  padding-left: 32px;
  padding-top: 24px;
}

.basicUsage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 48px;
  p {
    margin-bottom: 16px;
  }
}

.hoge,
.fuga,
.piyo {
  width: 120px;
  height: 120px;
  margin-bottom: 24px;
}

.basicButtonStyle {
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.backToTop {
  margin-top: 64px;
  text-align: center;
}

.radioButtonWrapper,
.buttonWrapper {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}

.buttonWrapperLabel {
  display: flex;
  align-items: center;
  column-gap: 24px;
  justify-content: space-between;
}

.buttonVariantSwitchLabel {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
}

.colorSchemeSwitchLabel {
  display: block;
  margin-bottom: 16px;
}

.typographyVariant {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.typographySelector {
  width: 120px;
  height: 36px;
  padding: 0 8px;
  font-size: 16px;
}

.resultWrapper {
  display: grid;
  place-items: center;
  padding: 32px 16px;
  position: relative;
}

.resultTitle {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  padding: 4px 8px;
}

.sizeJudgeBox {
  width: 120px;
  height: 120px;
}

.windowSizeWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 16px;
}

.colorSchemeBoxWrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.colorSchemeBox {
  width: 120px;
  height: 120px;
  border-radius: 10px;
}

.hpBarWrapper {
  display: flex;
  align-items: center;
  column-gap: 8px;
}

.hpBarLabel {
  font-size: 18px;
  font-weight: bold;
}

.hpBar {
  width: 240px;
  height: 24px;
  border: 3px solid #000;
  border-radius: 8px;
  overflow: hidden;
  background-color: #505050;
}

.hpBarInner {
  height: 100%;
  border-radius: 5px;
  box-shadow: inset 0 0 4px 2px rgba(255, 255, 255, 0.5);
}

.temparetureSliderContainer {
  display: flex;
  align-items: center;
  column-gap: 8px;
}

.temparetureIconWrapper {
  width: 96px;
  height: 96px;
  overflow: hidden;
  flex-shrink: 0;
}

.temparetureSlider {
  width: 200px;
}

.cardComponent {
  width: 288px;
  height: auto;
  border: 1px solid #dcdcdc;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 12px;
  color: var(--color-text);
  cursor: pointer;
}

.cardImage {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.cardInfo {
  padding: 0 24px 24px;
}

.cardTitle {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 8px;
}

.cardDescription {
  color: #6e6e6e;
  font-size: 14px;
  margin-bottom: 32px;
}

.buttonComponent {
  display: block;
  width: 200px;
  height: 48px;
  border-radius: 24px;
  font-weight: bold;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  margin: 0 auto;
  color: var(--color-text-inverted);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.dragAndDrop {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropAreaWrapper {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.dropArea {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-width: 2px;
  border-color: #000;
  transition: all 0.3s ease;
}
.draggableItem {
  width: 160px;
  height: 160px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  &.typeA {
    background-color: #39e366;
  }
  &.typeB {
    background-color: #3980e3;
  }
  &.typeC {
    background-color: #e3c139;
  }
}
/* --colorの値がprimaryなら赤、それ以外は青 */
.hoge {
  background-color: if(style(--color: primary): red; else: blue;);
}

/* 画面幅が768px以下のときは赤、それ以外は青 */

.fuga {
  background-color: if(media(width <= 768px): red; else: blue;);
}

/* display: gridが使えるときは赤、それ以外は青 */
.piyo {
  background-color: if(supports(display: grid): red; else: blue;);
}

/* ボタンバリアントのスタイル。バリアントに応じて背景色、ボーダー色、文字色が変化する */
.buttonVariant {
  background-color: if(
    style(--variant: primary): var(--color-primary) ;
      style(--variant: secondary): var(--color-secondary) ;
      style(--variant: tertiary): transparent;
  );
  border-color: if(
    style(--variant: primary): var(--color-primary) ;
      style(--variant: secondary): var(--color-secondary) ;
      style(--variant: tertiary): var(--color-tertiary) ;
  );
  color: if(
    style(--variant: tertiary): var(--color-text) ;
      else: var(--color-text-inverted)
  );
}

/* ボタンバリアントのスタイル 別の書き方 */
.buttonVariant {
  --background-color: if(
    style(--variant: primary): var(--color-primary) ;
      style(--variant: secondary): var(--color-secondary) ;
      style(--variant: tertiary): transparent;
  );
  --border-color: if(
    style(--variant: primary): var(--color-primary) ;
      style(--variant: secondary): var(--color-secondary) ;
      style(--variant: tertiary): var(--color-tertiary) ;
  );
  --text-color: if(
    style(--variant: tertiary): var(--color-text) ;
      else: var(--color-text-inverted)
  );

  background-color: var(--background-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.typography {
  font-size: if(
    style(--font-size: display): 48px; style(--font-size: heading): 32px;
      style(--font-size: body): 16px; style(--font-size: small): 14px;
      else: 16px;
  );
  font-weight: if(
    style(--font-weight: bold): 700; style(--font-weight: regular): 400;
      else: 400;
  );
}

.fontSize-display {
  --font-size: display;
}

.fontSize-heading {
  --font-size: heading;
}

.fontSize-body {
  --font-size: body;
}

.fontSize-small {
  --font-size: small;
}

.fontWeight-bold {
  --font-weight: bold;
}

.fontWeight-regular {
  --font-weight: regular;
}

/** 3種類のバリアントに非活性・ホバーのスタイルがある場合 */

.buttonComplexVariant {
  &:disabled {
    --isDisabled: true;
  }
  &:hover {
    --isHover: true;
  }
}

.buttonComplexVariant {
  background-color: if(
    style(--variant: primary): if(
        style(--isDisabled: true): var(--color-primary-disabled) ;
          style(--isHover: true): var(--color-primary-hover) ;
          else: var(--color-primary) ;
      )
      ;
      style(--variant: secondary): if(
        style(--isDisabled: true): var(--color-secondary-disabled) ;
          style(--isHover: true): var(--color-secondary-hover) ;
          else: var(--color-secondary) ;
      )
      ;
      style(--variant: tertiary): if(
        style(--isDisabled: true): transparent;
          style(--isHover: true): var(--color-tertiary-hover) ;
          else: transparent;
      )
      ;
  );
  border-color: if(
    style(--variant: primary): if(
        style(--isDisabled: true): var(--color-primary-disabled) ;
          style(--isHover: true): var(--color-primary-hover) ;
          else: var(--color-primary) ;
      )
      ;
      style(--variant: secondary): if(
        style(--isDisabled: true): var(--color-secondary-disabled) ;
          style(--isHover: true): var(--color-secondary-hover) ;
          else: var(--color-secondary) ;
      )
      ;
      style(--variant: tertiary): if(
        style(--isDisabled: true): var(--color-tertiary-disabled) ;
          style(--isHover: true): var(--color-tertiary-hover) ;
          else: var(--color-tertiary) ;
      )
      ;
  );
  color: if(
    style(--variant: tertiary): if(
        style(--isDisabled: true): var(--color-text-disabled) ;
          else: var(--color-text)
      )
      ; else: var(--color-text-inverted)
  );
}
@property --window-size {
  syntax: "mobile | tablet | desktop";
  inherits: true;
  initial-value: desktop;
}

:root {
  --window-size: if(
    media(width >= 1024px): desktop; media(768px <= width < 1024px): tablet;
      else: mobile;
  );
}

/* 従来のメディアクエリでの書き方
@media screen and (min-width: 1024px) {
  :root {
    --window-size: desktop;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  :root {
    --window-size: tablet;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --window-size: mobile;
  }
}


*/

.sizeJudgeBox {
  background-color: if(
    style(--window-size: mobile): var(--color-tertiary) ;
      style(--window-size: tablet): var(--color-secondary) ;
      style(--window-size: desktop): var(--color-primary) ;
  );
}

.desktopOnly {
  display: if(style(--window-size: desktop): revert; else: none;);
}

.tabletOnly {
  display: if(style(--window-size: tablet): revert; else: none;);
}

.mobileOnly {
  display: if(style(--window-size: mobile): revert; else: none;);
}

:root {
  --color-1: if(
    style(--color-scheme: type1): #28536B;
      style(--color-scheme: type2): #5BC0EB;
      style(--color-scheme: type3): #36213E;
  );
  --color-2: if(
    style(--color-scheme: type1): #C2948A;
      style(--color-scheme: type2): #FDE74C;
      style(--color-scheme: type3): #554971;
  );
  --color-3: if(
    style(--color-scheme: type1): #7EA8BE;
      style(--color-scheme: type2): #9BC53D;
      style(--color-scheme: type3): #63768D;
  );
}

.colorSchemeBox.color1 {
  background-color: var(--color-1);
}

.colorSchemeBox.color2 {
  background-color: var(--color-2);
}

.colorSchemeBox.color3 {
  background-color: var(--color-3);
}
@property --is-under-50 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --is-under-20 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --hp-bar-width {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

.hpBarInner {
  --is-under-50: sign(var(--hp-bar-width) - 50%);
  --is-under-20: sign(var(--hp-bar-width) - 20%);
  width: var(--hp-bar-width);
  background-color: if(
    style(--is-under-20: -1): #e60c30; style(--is-under-50: -1): #e6df0c;
      else: #0ec70b
  );
  animation: hpBar 3s linear infinite backwards;
}

/* 開始前の溜めと終了後の溜めを作るため*/
@keyframes hpBar {
  0% {
    --hp-bar-width: 100%;
  }
  20% {
    --hp-bar-width: 100%;
  }
  70% {
    --hp-bar-width: 0%;
  }
  100% {
    --hp-bar-width: 0%;
  }
}

@property --tempareture {
  syntax: "<integer>";
  inherits: true;
  initial-value: 20;
}

@property --icon-icy {
  syntax: "<integer>";
  inherits: true;
  initial-value: 1;
}

@property --icon-cold {
  syntax: "<integer>";
  inherits: true;
  initial-value: 1;
}

@property --icon-comfortable {
  syntax: "<integer>";
  inherits: true;
  initial-value: 1;
}

@property --icon-hot {
  syntax: "<integer>";
  inherits: true;
  initial-value: 1;
}

.temparetureSliderContainer {
  --icon-icy: sign(var(--tempareture) - 5);
  --icon-cold: sign(var(--tempareture) - 17);
  --icon-comfortable: sign(var(--tempareture) - 27);
  --icon-hot: sign(var(--tempareture) - 35);
}

.temparetureIconInner {
  display: flex;
  flex-direction: column;
  transition: translate 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  translate: if(
    style(--icon-icy: -1): 0px 0px; style(--icon-cold: -1): 0px -96px;
      style(--icon-comfortable: -1): 0px -192px;
      style(--icon-hot: -1): 0px -288px; style(--icon-hot: 0): 0px -384px;
      style(--icon-hot: 1): 0px -384px; else: 0px 0px;
  );
}

.temparetureIcon {
  width: 96px;
  height: 96px;
  font-size: 64px;
  text-align: center;
  line-height: 1.5;
  font-family: "Noto Color Emoji", serif;
}
.cardComponent {
  --is-hover: false;
  &:hover {
    --is-hover: true;
  }
}

.buttonComponent {
  background-color: if(style(--is-hover: true): #31316d; else: #6767d2;);
}

.dropArea {
  --color-typeA: rgba(57, 227, 102, 1);
  --color-typeA-droppable: rgba(57, 227, 102, 0.2);
  --color-typeA-droppable-hover: rgba(57, 227, 102, 0.5);
  --color-typeB: rgba(57, 128, 227, 1);
  --color-typeB-droppable: rgba(57, 128, 227, 0.2);
  --color-typeB-droppable-hover: rgba(57, 128, 227, 0.5);
  --color-typeC: rgba(227, 193, 57, 1);
  --color-typeC-droppable: rgba(227, 193, 57, 0.2);
  --color-typeC-droppable-hover: rgba(227, 193, 57, 0.5);
  /* ドロップ可能な状態のスタイル */
  &.typeA {
    border-color: var(--color-typeA);
    &:not(:has(.draggableItem)) {
      background-color: if(
        style(--dragging-type: A): if(
            style(--is-dragging-over: true): var(--color-typeA-droppable-hover)
              ; else: var(--color-typeA-droppable) ;
          )
          ; else: transparent;
      );
    }
  }
  &.typeB {
    border-color: var(--color-typeB);
    &:not(:has(.draggableItem)) {
      background-color: if(
        style(--dragging-type: B): if(
            style(--is-dragging-over: true): var(--color-typeB-droppable-hover)
              ; else: var(--color-typeB-droppable) ;
          )
          ; else: transparent;
      );
    }
  }
  &.typeC {
    border-color: #e3c139;
    &:not(:has(.draggableItem)) {
      background-color: if(
        style(--dragging-type: C): if(
            style(--is-dragging-over: true): var(--color-typeC-droppable-hover)
              ; else: var(--color-typeC-droppable) ;
          )
          ; else: transparent;
      );
    }
  }
}