/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/*１，２質問文*/
.asterisk {
    display:none;
}
.ls-label-question{
    font-weight:700;
    font-size: 1.0em;
}
.answertext{
    font-weight:700 !important;
    font-size: 1.0em;
}

/*選択肢の間を少しつめる３*/

.fruity ul .checkbox-item {
      margin-bottom: 0.6em;
      padding-top:0.7em;
  }
.ls-answers{
    padding-top: 8px;
    padding-bottom: 8px;
}

/*スマホ表示の時の選択肢幅*/
@media screen and (max-width: 760px) {
  .checkbox-item label,.answer-item label {
      font-size: 90%;
      margin-top:5px;
  }
  .fruity .table-bordered {
      border:none;
  }
 }

/* 共通テーマ配下の単一選択肢を、カード型UIと一貫したラジオボタンとして描画する。 */
/* ネイティブinputの意味・キーボード操作・フォーカスを保ったまま、見た目だけを共通化する。 */

body.RaaS_Basic_fruity {
  --raas-radio-brand: oklch(0.5 0.19 28);
  --raas-radio-line: oklch(0.87 0.015 242);
  --raas-radio-surface: oklch(1 0 0);
  --raas-radio-focus: oklch(0.72 0.13 205);
  --raas-choice-brand: var(--raas-radio-brand);
  --raas-choice-line: var(--raas-radio-line);
  --raas-choice-surface: var(--raas-radio-surface);
  --raas-choice-focus: var(--raas-radio-focus);
}

body.RaaS_Basic_fruity .radio-list .radio-item {
  position: relative;
}

body.RaaS_Basic_fruity .radio-list .radio-item input[type="radio"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.RaaS_Basic_fruity .radio-list .radio-item .radio-label {
  position: relative;
  display: block;
  width: 100%;
  min-height: 24px;
  padding-inline-start: 2rem;
  cursor: pointer;
}

body.RaaS_Basic_fruity .radio-list .radio-item .radio-label::before,
body.RaaS_Basic_fruity .radio-list .radio-item .radio-label::after {
  box-sizing: border-box;
  /* Reset the core Fruity theme's negative indicator margin. */
  margin-left: 0;
  margin-inline-start: 0;
  pointer-events: none;
}

body.RaaS_Basic_fruity .radio-list .radio-item .radio-label::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--raas-radio-surface);
  border: 2px solid var(--raas-radio-line);
  border-radius: 50%;
  transform: translateY(-50%);
}

body.RaaS_Basic_fruity .radio-list .radio-item .radio-label::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.3125rem;
  top: 50%;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--raas-radio-brand);
  border-radius: 50%;
  transform: translateY(-50%) scale(0);
  transition: transform 120ms ease-out;
}

body.RaaS_Basic_fruity .radio-list .radio-item input[type="radio"]:checked + .radio-label::after {
  transform: translateY(-50%) scale(1);
}

body.RaaS_Basic_fruity .radio-list .radio-item input[type="radio"]:focus-visible + .radio-label::before {
  outline: 3px solid var(--raas-radio-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.RaaS_Basic_fruity .radio-list .radio-item .radio-label::after {
    transition: none;
  }
}

/* 複数選択肢も単一選択肢と同じカード内の基準線で描画する。 */

body.RaaS_Basic_fruity .checkbox-list .checkbox-item {
  position: relative;
}

body.RaaS_Basic_fruity .checkbox-list .checkbox-item > .row > .col-auto {
  inline-size: 100%;
}

body.RaaS_Basic_fruity .checkbox-list .checkbox-item input[type="checkbox"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.RaaS_Basic_fruity .checkbox-list .checkbox-item .checkbox-label {
  position: relative;
  display: block;
  width: 100%;
  min-height: 24px;
  padding-inline-start: 2rem;
  cursor: pointer;
}

body.RaaS_Basic_fruity .checkbox-list .checkbox-item .checkbox-label::before,
body.RaaS_Basic_fruity .checkbox-list .checkbox-item .checkbox-label::after {
  box-sizing: border-box;
  margin-left: 0;
  margin-inline-start: 0;
  pointer-events: none;
}

body.RaaS_Basic_fruity .checkbox-list .checkbox-item .checkbox-label::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--raas-choice-surface);
  border: 2px solid var(--raas-choice-line);
  border-radius: 0.3rem;
  transform: translateY(-50%);
}

body.RaaS_Basic_fruity .checkbox-list .checkbox-item .checkbox-label::after {
  content: "";
  /* Fruityのアイコン用背景・余白・角丸と、transformを上書きするアニメーションを解除する。 */
  background: transparent;
  padding: 0;
  border-radius: 0;
  animation: none;
  position: absolute;
  inset-inline-start: 0.43rem;
  top: 50%;
  width: 0.45rem;
  height: 0.75rem;
  border-inline-end: 2px solid var(--raas-choice-surface);
  border-block-end: 2px solid var(--raas-choice-surface);
  transform: translateY(-64%) rotate(45deg) scale(0);
  transition: transform 120ms ease-out;
}

body.RaaS_Basic_fruity .checkbox-list .checkbox-item input[type="checkbox"]:checked + .checkbox-label::before {
  background: var(--raas-choice-brand);
  border-color: var(--raas-choice-brand);
}

body.RaaS_Basic_fruity .checkbox-list .checkbox-item input[type="checkbox"]:checked + .checkbox-label::after {
  transform: translateY(-64%) rotate(45deg) scale(1);
}

body.RaaS_Basic_fruity .checkbox-list .checkbox-item input[type="checkbox"]:focus-visible + .checkbox-label::before {
  outline: 3px solid var(--raas-choice-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.RaaS_Basic_fruity .checkbox-list .checkbox-item .checkbox-label::after {
    transition: none;
  }
}