@charset "UTF-8";

/* よくあるご質問
   読み込み順は functions.php（後に読み込んだ指定が勝つので順番を変えない） */

/* --------------------------------------------------------------------- */
/* よくあるご質問　*/
/* --------------------------------------------------------------------- */

.q-and-a-container {
  display: flex;
  margin: 0 auto 80px auto;
  justify-content: center;
  max-width: 1500px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    flex-direction: column;
  }
}

.q-and-a-link-nav {
  @media (min-width: 961px) {
    position: sticky;
    top: 43px;
    align-self: flex-start;
    margin-top: 10px;
  }
}

/* Q&A リンク */
.q-and-a-link {
  margin-top: 80px;
  margin-right: 80px;
  list-style: none;
  /* Q&Aのタブを開いた時に横幅が勝手に変わらないように固定 */
  min-width: 240px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    margin-top: 40px;
  }
}

/* Q&A リンク リスト */
.q-and-a-link li {
  position: relative;
  /* 三角形分の余白 */
  padding-left: 20px;
  margin-bottom: 10px;
  /* 行間 */
  line-height: 40px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    /* 行間 */
    line-height: 25px;
  }
}

/* リスト　三角アイコン */
.q-and-a-link li::before {
  content: '';
  position: absolute;
  /* 三角形をリストの左側に配置 */
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.icon-pink::before {
  /* 三角形の色 */
  border-left: 10px solid var(--color-pink);
}

.icon-blue::before {
  /* 三角形の色 */
  border-left: 10px solid var(--color-blue);
}

/* ホバー時 */
.q-and-a-link a:hover {
  color: var(--color-text-light);
}

/* Q&A */
.q-and-a {
  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    margin-top: -30px;
  }
}

/* Q&A ジャンルの枠 */
.q-and-a-item-container {
  margin-top: 80px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    text-align: center;
  }
}

/* 折りたたみ要素 */
details {
  border-radius: 6px;
  margin: 20px 0;
  padding: 20px 20px;
  width: 680px;

  @media (max-width: 1200px) {
    width: auto;
  }
}

/* 質問 */
summary {
  position: relative;
  padding-right: 30px;
  font-size: 18px;
  /* iOSでのデフォルトアイコンを非表示にする */
  list-style: none;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    font-size: 15px;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-sp-heading-s);
  }
}

/* Safari特有のデフォルトマーカーを非表示にする */
summary::-webkit-details-marker {
  display: none;
}

/* 回答 */
details p {
  margin-left: 50px;
  line-height: 27px;
  word-break: normal;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    line-height: 19.5px;
  }
}

/* Qアイコン */
summary:first-of-type {
  list-style: none;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: auto 48px;
  padding-left: 50px;
  /* 高さ　最低値 */
  min-height: 50px;
  line-height: 22.5px;
  /* 縦方向に中央揃え */
  display: flex;
  align-items: center;
  /* 左寄せ */
  text-align: left;
}

/* Qアイコン　ピンク */
.question-pink {
  background-image: url(../img/question-pink.png);
}

.question-blue {
  background-image: url(../img/question-blue.png);
}

/* 折りたたみウィジェットのアイコン */
summary::after {
  position: absolute;
  right: 10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 16px solid var(--color-text);
  content: '';

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 12px solid var(--color-text);
  }
}

/* 詳細が開かれたときのアイコンの向き */
details[open] summary::after {
  /* 上向き三角を消す */
  border-top: none;
  /* 下向き三角に変更 */
  border-bottom: 16px solid var(--color-text);

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    /* 下向き三角に変更 */
    border-bottom: 12px solid var(--color-text);
  }
}

/* 横線 */
details .border {
  margin: 10px 2px;
  /* 色を変更 */
  background: repeating-linear-gradient(
    to right,
    /* 線の色 */ var(--color-text-light),
    /* 線の幅 */ var(--color-text-light) 8px,
    /* 線間の透明な部分 */ transparent 8px,
    /* 線の間隔 */ transparent 12px
  );
  /* ボーダーの高さ */
  height: 2px;
}

/* 回答 */
.answer {
  margin: 25px 0;
  /* 左寄せ */
  text-align: left;
}

/* ページ内リンク着地位置のズレ調整 */
#section1,
#section2,
#section3,
#question1,
#question2,
#question3,
#question4 {
  scroll-margin-top: 100px;
}