/* 

sp/pc 両方で使用するので `cdc-` (Cross Device Common) 接頭辞を付けて
競合を回避します。

*/


:root {
  --cdc-size: calc(10px * 100vw / 375px);

  --cdc-content-padding: calc(var(--cdc-size) * .8);

  --cdc-button-height: calc(var(--cdc-size) * 4);

  --cdc-radius: calc(var(--cdc-size) * .8);

  --cdc-red: #c90037;
}

:root.is-pc {
  --cdc-size: 10px;
}


.cdc-clamp {
  --lines: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: var(--lines);
  -webkit-line-clamp: var(--lines);
  overflow: hidden;
}


.cdc-icon {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.cdc-icon--angle-left {
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M201.4 297.4C188.9 309.9 188.9 330.2 201.4 342.7L361.4 502.7C373.9 515.2 394.2 515.2 406.7 502.7C419.2 490.2 419.2 469.9 406.7 457.4L269.3 320L406.6 182.6C419.1 170.1 419.1 149.8 406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3L201.3 297.3z"/></svg>');
}

.cdc-icon--xmark {
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"/></svg>');
}

.cdc-icon--paper-plane {
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M568.4 37.7C578.2 34.2 589 36.7 596.4 44C603.8 51.3 606.2 62.2 602.7 72L424.7 568.9C419.7 582.8 406.6 592 391.9 592C377.7 592 364.9 583.4 359.6 570.3L295.4 412.3C290.9 401.3 292.9 388.7 300.6 379.7L395.1 267.3C400.2 261.2 399.8 252.3 394.2 246.7C388.6 241.1 379.6 240.7 373.6 245.8L261.2 340.1C252.1 347.7 239.6 349.7 228.6 345.3L70.1 280.8C57 275.5 48.4 262.7 48.4 248.5C48.4 233.8 57.6 220.7 71.5 215.7L568.4 37.7z"/></svg>');
}


.cdc-badge {
  display: inline-block;
  font-size: calc(var(--cdc-size) * 1.2);
  border-radius: 2em;
  font-weight: bold;
  line-height: 1.25;
  padding: .4em .8em;
}

.cdc-badge--online {
  background-color: rgb(228, 245, 236);
  color: rgb(30, 142, 90);
}

.cdc-badge--away {
  background-color: #ccc;
  color: #888;
}

.cdc-badge--automated {
  background-color: rgb(123, 94, 167);
  color: #fff;
}

.cdc-button {
  --bg-color: transparent;
  --fg-color: inherit;
  --bd-color: #ccc;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cdc-button-height);
  line-height: 1.25;
  padding: .4em .8em;
  border-radius: var(--cdc-radius);
  border: 1px solid var(--bd-color);
  background-color: var(--bg-color);
  font-weight: bold;
  font-size: calc(var(--cdc-size) * 1.4);
  color: var(--fg-color);
}

.cdc-button--sm {
  font-size: calc(var(--cdc-size) * 1.2);
}

.cdc-button--rounded {
  border-radius: 2em;
}

.cdc-button--blue {
  --bg-color: rgb(112, 160, 232);
  --fg-color: #fff;
}

.cdc-button--transparent {
  --bg-color: transparent;
  --fg-color: inherit;
  --bd-color: transparent;
}


.cdc-check-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: var(--cdc-button-height);
  line-height: 1.25;
  padding: calc(var(--cdc-size) * .4) calc(var(--cdc-size) * .8);
  gap: calc(var(--cdc-size) * .4);
  border-radius: var(--cdc-radius);
  border: 1px solid #ccc;
  font-size: calc(var(--cdc-size) * 1.4);

  input {
    margin: 0;
    width: 1.2em;
    height: 1.2em;
  }
}


.cdc-text-input {
  appearance: none;
  border: 1px solid #ccc;
  border-radius: var(--cdc-radius);
  padding: calc(var(--cdc-size) * .8);
}


.cdc-heading {
  font-weight: bold;
  font-size: calc(var(--cdc-size) * 2);
  border-bottom: 2px solid var(--cdc-red);
}


.cdc-message {
  --bg-color: #ccc;
  --fg-color: inherit;
  padding: calc(var(--cdc-size) * 1.6);
  border-radius: var(--cdc-radius);
  border: 1px solid var(--fg-color);
  background-color: var(--bg-color);
  font-size: calc(var(--cdc-size) * 1.4);
  color: var(--fg-color);
}

.cdc-message--info {
  --bg-color: hsl(240 100 96);
  --fg-color: hsl(240 96 50);
}

.cdc-message--warning {
  --bg-color: hsl(30 100 96);
  --fg-color: hsl(30 96 50);
}

.cdc-message--error {
  --bg-color: hsl(0 100 96);
  --fg-color: hsl(0 96 50);
}

.cdc-message__cols {
  display: flex;
  align-items: center;
  gap: calc(var(--cdc-size) * .8);

  >* {
    min-width: 0;
    max-width: 100%;
  }

  >.right-top-col {
    flex: none;
    margin-left: auto;
    margin-bottom: auto;
  }
}

.cdc-message__close-button {
  appearance: none;
  border: none;
  background: none;
  font-size: calc(var(--cdc-size) * 1.2);
  color: var(--fg-color);
}


.cdc-list {}

.cdc-list__item {
  padding-block: calc(var(--cdc-size) * .8);
  border-top: 1px solid #ccc;

  &:first-child {
    border-top: none;
  }
}


.cdc-accordion {
  --gap: calc(var(--cdc-size) * .8);
  margin: 0;

  &[open] {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }
}

.cdc-accordion__trigger {
  display: block;
  position: relative;

  &::before {
    --bg-size: calc(var(--cdc-size) * 2);
    position: absolute;
    content: '';
    right: 0;
    top: 50%;
    width: var(--bg-size);
    height: var(--bg-size);
    transform: translateY(-50%);
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M297.4 438.6C309.9 451.1 330.2 451.1 342.7 438.6L502.7 278.6C515.2 266.1 515.2 245.8 502.7 233.3C490.2 220.8 469.9 220.8 457.4 233.3L320 370.7L182.6 233.4C170.1 220.9 149.8 220.9 137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7L297.3 438.7z"/></svg>');
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: #666;
  }

  .cdc-accordion[open] &::before {
    transform: translateY(-50%) rotateZ(-180deg);
  }
}

.cdc-accordion__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.cdc-accordion__close-button {
  margin: auto;
}


.cdc-nav {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.cdc-nav__item {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: calc(var(--cdc-size) * 1.4);
  color: inherit;
  opacity: .6;
  min-height: var(--cdc-button-height);
}

.cdc-nav__item.is-active {
  opacity: 1;
  background-color: rgb(234, 242, 250);
  border-bottom: 2px solid rgb(91, 155, 213);
}


.cdc-content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--cdc-size) * 1.6);
  padding-block: calc(var(--cdc-size) * 1.6);
}

.cdc-content__header {
  padding-inline: var(--cdc-content-padding);
}

.cdc-content__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--cdc-size) * 1.6);
  padding-inline: var(--cdc-content-padding);
}