:root {
  /**
  * デジ人スタイル
  */
  --color-red: #ff0000;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-orange: #ffb81c;

  --color-primary: #0071bc;
  --color-primary-light: #d6e9f5;
  --color-secondary: #00bfb3;
  --color-secondary-light: #e9faf9;
  --color-gray: #97999b;
  --color-gray-light: #bbbcbc;

  --color-text: #0a0a0a;
  --color-text-gray: #707070;
  --color-text-gray-light: #f0f0f0;
  --color-text-white: #ffffff;

  --color-background: #ffffff;

  /**
  * デジ人新トンマナ
  */
  --color-v2-red: #ff0000;
  --color-v2-black: #000000;
  --color-v2-white: #ffffff;
  --color-v2-orange: #ff821c;

  --color-v2-primary: #0071bc;
  --color-v2-primary-light: #d6e9f5;
  --color-v2-secondary: #1ea6d3;
  --color-v2-secondary-light: #e9faf9;
  --color-v2-gray: #97999b;
  --color-v2-gray-light: #bbbcbc;

  --color-v2-text: #0a0a0a;
  --color-v2-text-gray: #707070;
  --color-v2-text-gray-light: #f0f0f0;
  --color-v2-text-white: #ffffff;

  --color-v2-background: #ffffff;

  /**
  * ピタテンスタイル
  */
  --color-pitaten-primary: #22d3c9;
  --color-pitaten-primary-light: #00bfb6;
  --color-pitaten-primary-dark: #00857f;
  --color-pitaten-primary-bg: #f2fffc;
  --color-pitaten-primary-schedule-button: #d0f4f1; /** 仮。Figma未定義。スケジュールボタンの色 */
  --color-pitaten-secondary: #ff9b29;
  --color-pitaten-secondary-text: #f69421;
  --color-pitaten-secondary-bg: #fffaf4;
  --color-pitaten-secondary-schedule-button: #ffe8c7; /** 仮。Figma未定義。スケジュールボタンの色 */
  --color-pitaten-light-gray: #d7d7d7;
  --color-pitaten-text: #393939;
  --color-pitaten-text-white: #ffffff;
  --color-pitaten-background: #ffeee1;

  --color-pitaten-validation: #ff5449;
}

/**
 * LP に関するスタイル指定
 * プラポリなどのCSSは common.css を参照
 */
html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;

  /* グローバルなフォント指定 */
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-display: swap;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
  color: var(--color-pitaten-text);
}

/* ピタテン背景色をサービスサイトと揃える */
html body {
  background: var(--color-pitaten-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

select::-ms-expand {
  display: none; /* デフォルトの矢印を非表示(IE用) */
}

select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url(/assets/images/icon_select.svg);
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

/* for header and contents  */
.main__contents__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

/* contents start */
.contents__container {
  margin-top: 16px;

  display: flex;
  padding: 0px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}

/* question start */
.question__container {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  position: relative;
}

.question__title:before {
  content: '■';
  color: var(--color-secondary);
  font-size: 16px;
  margin-right: 2px;
}

.question__title {
  flex: 1 0 0;
  color: var(--color-text);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 145%;
}

.question__title .title {
  font-size: 16px;
}

/* question end */

/* Button seq start */
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

.fade-enter-active {
  animation: open 0.5s;
}

.fade-leave-active {
  animation: open 0.5s linear reverse;
}

@keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

input,
select {
  font-size: 16px;
}