@charset "UTF-8";
/* ///////////////////////////////////////////
  value.scss
  変数・mixinに関する設定
/////////////////////////////////////////// */
/*====================================
  カラー
=====================================*/
/*
$color1: #1f3134; //黒っぽい緑
$color2: #ff0033; //赤
$color3: #b40034; //エンジ色
$color4: #0f3784; //青

//2022～
$color5: #aac467; //黄緑
$color7: #595757; //濃グレー

$mainColor: $color1;
$accentColor: #fff; //白

//2022～
$fontColor: $color7;

$bgColor1: #f8eef7; //薄ピンク
$bgColor2: #e0eff2; //水色
$bgColor3: #f4efe4; //ベージュ
$bgColor4: #f5f2ef; //グレーっぽいベージュ
$bgColor5: #fffee6; //薄黄色

$bdColor1: #d5d7d6; //グレー

$pastelColor1: #e3a7c8;
$pastelColor2: #f3efa1;
$pastelColor3: #a8cae5;
$pastelColor4: #ed7986;

$pastelColor1-dark: #eca1ca;
$pastelColor2-dark: #e6d223;
$pastelColor3-dark: #7ebded;

$mkColor1: #f6d1e5; //薄ピンク
$mkColor2: #c6e0f6; //水色
$mkColor3: #faf3b1; //黄色

//2022～
$boysColor: #5aa7ab;
$girlsColor: #ab226d;
$boysBgColor: #d4e5e6;
$girlsBgColor: #eadfe4;

$btnColor: #9fa0a0;
*/
/*====================================
  画像
=====================================*/
/*====================================
  font
=====================================*/
/*--------------------
～2021用フォント設定
--------------------*/
@font-face {
  font-family: "HoshizoraMincho";
  src: url(./../images/font/StarSkyMincyou-Regular.woff2) format("woff2");
  src: url(./../images/font/StarSkyMincyou-Regular.woff) format("woff");
}
/*--------------------
2022～フォント設定
--------------------*/
/*====================================
  レイアウト・パーツ
=====================================*/
/* /////////////////////////////////
  Media Queries
///////////////////////////////// */
/* /////////////////////////////////
  Media Queries
///////////////////////////////// */
/* ///////////////////////////////////////////
  quiz.scss
  フジタのランドセルYesNoクイズ
/////////////////////////////////////////// */
.page--quiz {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, Arial, sans-serif;
}
@media only screen and (max-width: 768px) {
  .page--quiz {
    padding: 0;
  }
}
@media print, screen and (min-width: 769px) {
  .page--quiz {
    padding: 0;
  }
}
.page--quiz .page__title {
  position: relative;
}
.page--quiz .quiz__list {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .page--quiz .quiz__list {
    padding: 50px 20px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1219px) {
  .page--quiz .quiz__list {
    padding: 100px 30px;
  }
}
@media print, screen and (min-width: 1220px) {
  .page--quiz .quiz__list {
    padding: 100px 80px;
  }
}
.page--quiz .quiz__list__tab {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: flex-start;
  z-index: -1;
  position: relative;
}
.page--quiz .quiz__list__tab > * {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
.page--quiz .quiz__list__tab > * {
  width: 32%;
  margin: 0;
}
.page--quiz .quiz__list__tab > *:nth-child(3n) {
  margin-right: 0;
}
@media only screen and (max-width: 768px) {
  .page--quiz .quiz__list__tab.foot {
    margin-top: -5px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--quiz .quiz__list__tab.foot {
    margin-top: -10px;
  }
}
.page--quiz .quiz__list__tab.foot li {
  border-radius: 0 0 12px 12px;
}
.page--quiz .quiz__list__tab li {
  font-family: "HoshizoraMincho", "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro W3", "HiraMinPro-W3", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  border: solid 3px #f7a1cb;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page--quiz .quiz__list__tab li:first-child {
  background-color: #f7a1cb;
}
.page--quiz .quiz__list__tab li:nth-child(2) {
  border-color: #e6d223;
}
.page--quiz .quiz__list__tab li:nth-child(2) span {
  color: #e6d223;
}
.page--quiz .quiz__list__tab li:nth-child(3) {
  border-color: #7ebded;
}
.page--quiz .quiz__list__tab li:nth-child(3) span {
  color: #7ebded;
}
.page--quiz .quiz__list__tab li h2 {
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .page--quiz .quiz__list__tab li h2 {
    font-size: 1.4rem;
    padding: 20px 0;
  }
}
@media print, screen and (min-width: 769px) {
  .page--quiz .quiz__list__tab li h2 {
    font-size: 3rem;
    padding: 35px 0;
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1219px) {
  .page--quiz .quiz__list__tab li h2 {
    font-size: 2rem;
  }
}
.page--quiz .quiz__list__tab li a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media only screen and (max-width: 768px) {
  .page--quiz .quiz__list__tab li a {
    font-size: 1.4rem;
    padding: 5px 0;
  }
}
@media print, screen and (min-width: 769px) {
  .page--quiz .quiz__list__tab li a {
    font-size: 3rem;
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1219px) {
  .page--quiz .quiz__list__tab li a {
    font-size: 2rem;
  }
}
.page--quiz .quiz__list__tab li span {
  display: block;
  font-size: 0.6em;
}
.page--quiz .quiz__list dl {
  margin: 0 auto;
  border-top: solid 10px #f7a1cb;
  border-bottom: solid 10px #f7a1cb;
}
@media only screen and (max-width: 768px) {
  .page--quiz .quiz__list dl {
    border-width: 5px;
    margin-top: -5px;
    padding: 30px 0;
  }
}
@media print, screen and (min-width: 769px) {
  .page--quiz .quiz__list dl {
    border-width: 10px;
    margin-top: -10px;
    padding: 100px 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: flex-start;
  }
  .page--quiz .quiz__list dl > * {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) and (max-width: 1219px) {
  .page--quiz .quiz__list dl {
    padding: 100px 0px;
  }
}
.page--quiz .quiz__list dl dt {
  font-family: "HoshizoraMincho", "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro W3", "HiraMinPro-W3", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
.page--quiz .quiz__list dl dt > * {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
@media only screen and (max-width: 768px) {
  .page--quiz .quiz__list dl dt {
    margin-top: 30px;
    font-size: 1.4rem;
    flex-direction: column;
  }
}
@media print, screen and (min-width: 769px) {
  .page--quiz .quiz__list dl dt {
    margin-top: 50px;
    padding-right: 20px;
    width: calc( 100% - 180px);
    font-size: 2.4rem;
  }
}
.page--quiz .quiz__list dl dt:first-of-type {
  margin-top: 0;
}
.page--quiz .quiz__list dl dt span {
  color: #fff;
  background-color: #f7a1cb;
  border-radius: 30px;
  text-align: center;
  flex-shrink: 0;
}
@media only screen and (max-width: 768px) {
  .page--quiz .quiz__list dl dt span {
    padding: 8px 15px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--quiz .quiz__list dl dt span {
    margin-right: 30px;
    width: 80px;
  }
}
@media only screen and (max-width: 768px) {
  .page--quiz .quiz__list dl dt p {
    margin-top: 10px;
  }
}
.page--quiz .quiz__list dl dd {
  font-family: "HoshizoraMincho", "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro W3", "HiraMinPro-W3", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
@media only screen and (max-width: 768px) {
  .page--quiz .quiz__list dl dd {
    margin-top: 15px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--quiz .quiz__list dl dd {
    width: 180px;
    margin-top: 50px;
    flex-shrink: 0;
  }
  .page--quiz .quiz__list dl dd:first-of-type {
    margin-top: 0;
  }
}
.page--quiz .quiz__list dl dd .button {
  display: block;
  color: #f7a1cb;
  background-color: #fff;
  border: solid 2px #f7a1cb;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .page--quiz .quiz__list dl dd .button {
    font-size: 1.4rem;
    padding: 8px 15px;
  }
}
@media print, screen and (min-width: 769px) {
  .page--quiz .quiz__list dl dd .button {
    font-size: 2.4rem;
    padding: 0 20px;
  }
}
.page--quiz .quiz__list dl dd .button::before, .page--quiz .quiz__list dl dd .button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 15px;
  height: 2px;
  background: #f7a1cb;
  transition: all 0.3s ease-in-out;
}
.page--quiz .quiz__list dl dd .button::before {
  transform: rotate(90deg);
}
.page--quiz .quiz__list dl dd .button.open::before {
  transform: rotate(180deg);
}
.page--quiz .quiz__list dl dd .answer {
  display: none;
  text-align: center;
  line-height: 1;
  color: #f7a1cb;
  transition: none;
}
@media only screen and (max-width: 768px) {
  .page--quiz .quiz__list dl dd .answer {
    padding: 20px 0 0;
    font-size: 1.6rem;
  }
}
@media print, screen and (min-width: 769px) {
  .page--quiz .quiz__list dl dd .answer {
    padding: 30px 0 0;
    font-size: 3.6rem;
  }
}
.page--quiz .quiz__list dl dd .answer.open {
  display: block;
}/*# sourceMappingURL=quiz.css.map */