@charset "UTF-8";
/*font-family: 'Noto Sans JP', sans-serif;*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
/*font-family: 'Klee One', cursive;*/
@import url("https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap");
/*囲み*/
#wrapper {
  background-image: url(../images/common/back_tile.png);
  background-size: calc(100% / 3);
  background-repeat: repeat; }

/*ヘッダー*/
header {
  width: 100%;
  text-align: center; }
  header img {
    width: 100%;
    object-fit: contain; }
  header#content_index {
    margin: 0 0 1.5vh; }
  header #ttl_contents_index {
    padding: 1.6vh 0; }
    header #ttl_contents_index img {
      height: 7vh; }
  header #ttl_contents_contents {
    padding: 1.4vh 0; }
    header #ttl_contents_contents img {
      height: 3vh;
      object-fit: contain; }
  header.is_yukari {
    background-color: #56FF6F; }
  header.is_sura {
    background-color: #6CB3FF; }
  header.is_quiz {
    background-color: #E1FF0A; }
  header.is_chosyu {
    background-color: #FF80D0; }
    header.is_chosyu #ttl_contents_contents img {
      height: 4vh;
      object-fit: contain; }

/*スクロールバー*/
::-webkit-scrollbar {
  width: 10px; }

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #D4D4D4; }

::-webkit-scrollbar-thumb {
  background-color: #439DFF;
  border-radius: 10px; }

/*アニメーションキーフレーム*/
@keyframes scroller_anime {
  0% {
    opacity: 0;
    transform: translateX(30px); }
  50% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0; } }
/*メイン*/
main {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  line-height: 2.3vh;
  /*ゆかりの品を深読み！*/
  /*すらすら読む！古文書*/
  /*=====すらすら読む！古文書*/
  /*=====教えて！松陰先生*/ }
  main a {
    text-decoration: underline; }
  main .txt_link {
    width: 90%;
    font-size: .8em;
    text-align: right;
    margin: 0 auto; }
  main .list_cmn_1 {
    width: auto;
    margin-left: 22px; }
  main .align_center {
    text-align: center; }
  main .align_right {
    text-align: right; }
  main .btn_back {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22%;
    height: 5.5vh;
    text-decoration: none;
    border-radius: .5vh;
    background-color: #ccc;
    background-image: url(../images/common/icon_arrow_left.svg);
    background-size: 2vh;
    background-position: 8% center;
    box-shadow: 0px .5vh 0px 0px #9A9A9A;
    margin: 0 auto; }
  main .btn_next {
    width: auto;
    text-align: center; }
    main .btn_next a {
      display: inline-block;
      width: auto;
      text-decoration: none;
      border-radius: 1vh;
      background-color: #fff;
      background-image: url(../images/common/icon_arrow_right.svg);
      background-size: 2vh;
      background-position: 92% center;
      border: 3px solid #BDBDBD;
      box-shadow: 0px .5vh 0px 0px #BDBDBD;
      padding: 2.5vw 7vw; }
  main .btn_favorite {
    width: auto;
    height: 13vh;
    text-decoration: none; }
  main .mar01 {
    padding-bottom: 1vh; }
  main .mar02 {
    padding-bottom: 2vh; }
  main .mar03 {
    padding-bottom: 3vh; }
  main img {
    max-width: 90%;
    height: auto; }
  main .img_chart {
    position: relative;
    display: block;
    width: 70%;
    height: auto;
    font-size: 1rem;
    line-height: 1;
    margin: 5vw auto; }
    main .img_chart ul {
      list-style: none; }
    main .img_chart li {
      position: absolute; }
    main .img_chart a {
      display: block;
      width: 10vh;
      height: 10vh;
      text-indent: -9999px; }
    main .img_chart .li_mouri {
      top: 1vh;
      right: 15vh; }
    main .img_chart .li_sufu {
      top: 24vh;
      right: 7vh; }
      main .img_chart .li_sufu a {
        width: 10vh;
        height: 7vh; }
    main .img_chart .li_omura {
      top: 4vh;
      right: 4vh; }
      main .img_chart .li_omura a {
        width: 8vh; }
    main .img_chart .li_yoshida {
      top: 14vh;
      right: 16vh; }
      main .img_chart .li_yoshida a {
        width: 8vh;
        height: 10vh; }
    main .img_chart .li_kusaka {
      top: 24vh;
      left: 1vh; }
      main .img_chart .li_kusaka a {
        width: 8vh;
        height: 10vh; }
    main .img_chart .li_takasugi {
      top: 24vh;
      left: 11vh; }
      main .img_chart .li_takasugi a {
        width: 8vh;
        height: 10vh; }
    main .img_chart .li_yamagata {
      left: 1vh;
      bottom: 3vh; }
      main .img_chart .li_yamagata a {
        width: 8vh;
        height: 10vh; }
    main .img_chart .li_ito {
      left: 11vh;
      bottom: 3vh; }
      main .img_chart .li_ito a {
        width: 8vh;
        height: 10vh; }
    main .img_chart .li_kido {
      right: 7vh;
      bottom: 9vh; }
      main .img_chart .li_kido a {
        width: 10vh;
        height: 7vh; }
    main .img_chart .li_inoue {
      right: 7vh;
      bottom: 1vh; }
      main .img_chart .li_inoue a {
        width: 10vh;
        height: 7vh; }
  main .img_chosyu {
    width: 100%;
    height: auto;
    margin: 3vw auto 6vw; }
  main .nav_page_1,
  main .nav_page_2,
  main .nav_page_3 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
    line-height: 1.2;
    text-align: center;
    list-style: none;
    margin: 0 auto; }
    main .nav_page_1 li,
    main .nav_page_2 li,
    main .nav_page_3 li {
      width: 48%;
      margin: 0 .5vh 1vh; }
    main .nav_page_1 a,
    main .nav_page_2 a,
    main .nav_page_3 a {
      display: block;
      width: 100%;
      text-decoration: none;
      background-color: #ffc934;
      border: 3px solid #bb9032;
      border-radius: .5vh;
      background-image: url(../images/common/icon_arrow_right.svg);
      background-size: 2vh;
      background-position: 96% center;
      box-shadow: 0px .2vh 0px 0px #bb9032;
      padding: 1.4vh 0; }
  main .nav_page_2 {
    justify-content: space-between; }
  main .nav_page_3 {
    justify-content: space-between; }
    main .nav_page_3:after {
      content: "";
      display: block;
      width: 32%; }
    main .nav_page_3 li {
      width: 32%;
      margin: 0 0 1vh; }
    main .nav_page_3 a {
      padding: 1.2vh 0; }
  main #nav_yukari {
    position: relative;
    width: 80%;
    height: 44.7vh;
    list-style: none;
    background-image: url(../images/yukari/index/nav_yukari_back.jpg);
    background-size: contain;
    padding: 1vh 0 0;
    margin: 2vh auto 4vh; }
    main #nav_yukari li {
      position: absolute;
      width: 25%; }
      main #nav_yukari li img {
        width: 100%;
        height: auto; }
    main #nav_yukari #nav_mouri_takachika {
      left: 2vh; }
    main #nav_yukari #nav_kido_takayoshi {
      right: 1vh; }
    main #nav_yukari #nav_minie_rifle {
      top: 22vh;
      left: 1vh;
      width: 30%; }
    main #nav_yukari #nav_kiheitai {
      top: 22vh;
      right: 1vh; }
    main #nav_yukari #nav_yosida_syoin {
      left: 0;
      right: 0;
      bottom: 1vh;
      width: 30%;
      margin: 0 auto; }
  main #is_scroll_yukari {
    position: absolute;
    top: 3vh;
    right: 23vh;
    opacity: 0;
    animation-name: scroller_anime;
    animation-duration: 3s;
    animation-iteration-count: 3; }
    main #is_scroll_yukari img {
      width: 15%;
      height: auto; }
  main #nav_sura {
    position: relative;
    width: 80%;
    height: 43vh;
    background-image: url(../images/yukari/index/nav_yukari_back.jpg);
    background-size: contain;
    padding: 1vh 0 0;
    margin: 2vh auto 3vh; }
    main #nav_sura h2 {
      position: absolute;
      top: 4vh;
      left: 0;
      right: 0;
      width: 20%;
      margin: 0 auto; }
    main #nav_sura ul {
      width: auto;
      list-style: none; }
      main #nav_sura ul li {
        position: absolute; }
      main #nav_sura ul #nav_fukukawa {
        top: 4vh;
        left: .5vh;
        width: 24%; }
      main #nav_sura ul #nav_sugi {
        top: 4vh;
        right: -1vh;
        width: 42%; }
      main #nav_sura ul #nav_nakatani {
        top: 22vh;
        left: -1vh;
        width: 32%; }
      main #nav_sura ul #nav_zuien {
        top: 15vh;
        right: -.6vh;
        width: 34%; }
      main #nav_sura ul #nav_gessyo {
        top: 27vh;
        right: -.6vh;
        width: 34%; }
    main #nav_sura img {
      width: 100%;
      height: auto; }
  main .ttl_cmn_1 {
    width: auto;
    line-height: 1;
    font-size: 3vh;
    font-weight: 700;
    background-color: #fff;
    text-align: center;
    padding: 2vh 0 2.3vh;
    margin: 0 0 2vh; }
  main .ttl_cmn_2 {
    width: auto;
    font-size: 2.3vh;
    font-weight: 700;
    text-align: center;
    margin: 0 0 2vh; }
    main .ttl_cmn_2 span {
      display: inline-block;
      width: auto;
      border-bottom: .3vh solid #111;
      padding: 0 0 .8vh; }
  main .ttl_cmn_3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    font-size: 1.8vh;
    font-weight: 500;
    text-align: center;
    margin: 0 0 1vh; }
    main .ttl_cmn_3:before, main .ttl_cmn_3:after {
      content: "";
      display: block;
      width: 2em;
      height: 1px;
      background-color: #111;
      margin: 0 .5em; }
  main .ttl_fukayomi,
  main .ttl_sura,
  main .ttl_junior {
    width: 50%;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2.2vh;
    font-weight: 700;
    color: #fff;
    background-color: #27A847;
    border-radius: 50%;
    padding: 1.5vh 0;
    margin: 0 auto 2vh; }
  main .ttl_sura {
    background-color: #439DFF; }
  main .ttl_junior {
    background-color: #FF6191; }
  main #box_wrapper,
  main #box_wrapper_2 {
    width: 92%;
    height: 56vh;
    overflow-y: auto;
    padding: 0 2%;
    margin: 0 auto 2.5vh; }
    main #box_wrapper p,
    main #box_wrapper_2 p {
      margin: 2vh 0; }
    main #box_wrapper img,
    main #box_wrapper_2 img {
      max-width: 100%;
      height: auto; }
    main #box_wrapper figcaption,
    main #box_wrapper_2 figcaption {
      text-align: center;
      margin: .3vh 0 0; }
    main #box_wrapper .float_right,
    main #box_wrapper_2 .float_right {
      float: right;
      width: auto;
      padding: 0 2vh 2vh; }
    main #box_wrapper .width80,
    main #box_wrapper_2 .width80 {
      width: 80%;
      margin: 2vh auto; }
  main #box_wrapper_2 {
    height: auto;
    margin: 0 auto 3.5vh; }
  main #list_ranking {
    width: 92%;
    list-style: none;
    margin: 5vh auto; }
    main #list_ranking li {
      background-color: #fff;
      border: 1px solid #ddd;
      background-position: .2vh center;
      margin: 0 0 1vh; }
    main #list_ranking a {
      display: block;
      width: calc(100% - 10vh);
      color: #fff;
      text-decoration: none;
      background-position: left center;
      background-size: 11vh;
      padding: 4vh 3vh 4vh 13vh;
      margin: 0 0 0 auto; }
    main #list_ranking li:nth-child(n + 4) a {
      padding: 3vh 3vh 3vh 13vh; }
    main #list_ranking li:first-child {
      background-image: url(../images/common/icon_no_1.svg); }
      main #list_ranking li:first-child a {
        background-color: red; }
    main #list_ranking li:nth-child(2) {
      background-image: url(../images/common/icon_no_2.svg); }
      main #list_ranking li:nth-child(2) a {
        background-color: #B78C00; }
    main #list_ranking li:nth-child(3) {
      background-image: url(../images/common/icon_no_3.svg); }
      main #list_ranking li:nth-child(3) a {
        background-color: #625E74; }
    main #list_ranking li:nth-child(4) {
      background-image: url(../images/common/icon_no_4.svg); }
      main #list_ranking li:nth-child(4) a {
        background-color: #AF623B; }
    main #list_ranking li:nth-child(5) {
      background-image: url(../images/common/icon_no_5.svg); }
      main #list_ranking li:nth-child(5) a {
        background-color: #3D7D5C; }
    main #list_ranking #li_yosida_syoin {
      background-image: url(../images/yukari/ranking/img_rank_yoshida.jpg); }
    main #list_ranking #li_mouri_takachika {
      background-image: url(../images/yukari/ranking/img_rank_mouri.jpg); }
    main #list_ranking #li_kido_takayoshi {
      background-image: url(../images/yukari/ranking/img_rank_kido.jpg); }
    main #list_ranking #li_minie_rifle {
      background-image: url(../images/yukari/ranking/img_rank_minie.jpg); }
    main #list_ranking #li_kiheitai {
      background-image: url(../images/yukari/ranking/img_rank_kiheitai.jpg); }
  main #section_relation {
    position: relative;
    width: 92%;
    margin: 0 auto; }
    main #section_relation h3 {
      position: absolute;
      top: -3vw;
      left: 0;
      display: block;
      width: auto;
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 700;
      color: #fff;
      text-align: center;
      line-height: 1.2;
      border-radius: 3vw;
      background-color: #093880;
      padding: 2vw 2vw; }
    main #section_relation p {
      width: 92%;
      font-size: 1.2em;
      border-radius: 3vw;
      background-color: #fff;
      border: 5px solid #093880;
      padding: 3vw 2vw 3vw 10vw;
      margin: 0 0 0 auto; }
  main #flex_komon {
    display: flex;
    justify-content: space-between;
    width: 92%;
    margin: 0 auto 3vh; }
    main #flex_komon .section_komon {
      position: relative;
      width: 48%; }
      main #flex_komon .section_komon h3,
      main #flex_komon .section_komon h4 {
        position: absolute;
        top: -.5vh;
        right: -1vh;
        writing-mode: vertical-rl;
        color: #fff;
        line-height: 1;
        background-color: #959595;
        padding: 10px 10px 12px; }
      main #flex_komon .section_komon .txt_tate {
        width: 100%;
        height: 30.5vh;
        font-family: 'Klee One', cursive;
        font-weight: 600;
        overflow-y: auto;
        writing-mode: vertical-rl;
        border: 1px solid #ccc;
        background-color: #fff;
        padding: 2vh 2.5vh; }
        main #flex_komon .section_komon .txt_tate p {
          padding: 0 1vh; }
      main #flex_komon .section_komon.is_origin h4 {
        background-color: #E35050; }
      main #flex_komon .section_komon.is_origin .txt_tate {
        background-color: #FFEFC4; }
  main #img_sura {
    width: 100%;
    text-align: center;
    margin: 2vh 0; }
    main #img_sura img {
      width: auto;
      min-height: 24vh;
      max-height: 24vh; }
  main #box_tate_sura {
    position: relative;
    width: 92%;
    height: 52vh;
    font-family: 'Klee One', cursive;
    font-weight: 600;
    font-size: 2vh;
    line-height: 2;
    writing-mode: vertical-rl;
    border: 1px solid #ccc;
    background-color: #DEEEF6;
    overflow-y: auto;
    padding: 2vh;
    margin: 0 auto 2vh; }
    main #box_tate_sura p {
      padding: 0 1vh; }
    main #box_tate_sura.is_junior {
      background-color: #FFE8EA; }
  main #is_scroll {
    position: absolute;
    left: 3vh;
    bottom: 23vh;
    opacity: 0;
    animation-name: scroller_anime;
    animation-duration: 3s;
    animation-iteration-count: 3; }
    main #is_scroll img {
      width: 36%;
      height: auto; }
  main #box_voice {
    position: absolute;
    right: 4%;
    bottom: 11vh;
    width: 10vh;
    line-height: 1;
    text-align: center; }
    main #box_voice h5 {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 700;
      color: #40400D;
      margin: 0 0 1vh; }
    main #box_voice ul {
      display: flex;
      justify-content: space-between;
      width: auto;
      border-radius: 1.3vh;
      overflow: hidden;
      line-height: 1;
      border: 3px solid #b9ba23;
      box-shadow: 0px .5vh 0px 0px #b9ba23;
      list-style: none; }
      main #box_voice ul li {
        width: 50%;
        height: 4vh; }
      main #box_voice ul li:last-child button {
        background-color: #FFFF0A;
        border-left: 3px solid #b9ba23; }
      main #box_voice ul button {
        width: 100%;
        height: 100%;
        text-indent: -9999px;
        background-position: center center;
        background-color: #dfdfdf; }
      main #box_voice ul #btn_play {
        background-image: url(../images/sura/index/btn_start.svg);
        background-size: 60%; }
      main #box_voice ul #btn_pause {
        background-image: url(../images/sura/index/btn_stop.svg);
        background-size: 40%; }
  main #img_lead_quiz {
    width: 100%;
    margin: -3vw 0 -8vw; }
    main #img_lead_quiz img {
      min-width: 100%;
      height: auto; }
  main #box_quiz_lead {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto 4vw; }
    main #box_quiz_lead .detail_quiz_lead {
      position: relative;
      width: 64%;
      background-color: #fff;
      border: 5px solid #E1FF0A;
      border-radius: 20px;
      padding: 5%; }
      main #box_quiz_lead .detail_quiz_lead:after, main #box_quiz_lead .detail_quiz_lead:before {
        left: 100%;
        top: 40%;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none; }
      main #box_quiz_lead .detail_quiz_lead:after {
        border-color: rgba(255, 255, 255, 0);
        border-left-color: #fff;
        border-width: 20px;
        margin-top: -20px; }
      main #box_quiz_lead .detail_quiz_lead:before {
        border-color: rgba(194, 225, 245, 0);
        border-left-color: #E1FF0A;
        border-width: 26px;
        margin-top: -26px; }
    main #box_quiz_lead .list_red {
      font-weight: bold;
      list-style: none;
      color: #D13F21; }
    main #box_quiz_lead .color_red {
      font-size: 1.1em;
      color: #D13F21; }
    main #box_quiz_lead figure {
      width: 30%; }
  main #nav_quiz {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
    list-style: none;
    margin: 0 auto; }
    main #nav_quiz li {
      position: relative;
      width: 42%;
      margin: 0 3vw 3vw; }
    main #nav_quiz span {
      position: absolute;
      bottom: 0;
      display: block;
      width: 100%;
      text-align: center;
      border-radius: 1vh;
      background-color: #E1FA3D;
      background-image: url(../images/common/icon_arrow_right.svg);
      background-size: 2vh;
      background-position: 92% center;
      border: 3px solid #94A851;
      box-shadow: 0px .5vh 0px 0px #94A851;
      padding: 3vw 0; }
    main #nav_quiz img {
      min-width: 100%;
      height: auto;
      border-radius: 50%; }
  main #list_answer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 90%;
    list-style: none;
    text-align: center;
    margin: 0 auto; }
    main #list_answer li {
      width: 48%;
      margin: 0 0 4vw; }
    main #list_answer a {
      display: block;
      width: auto;
      background-color: #FFC934;
      border-bottom: 5px solid #BB9032;
      border-radius: 10px;
      padding: 1vh 0 .5vh; }
      main #list_answer a img {
        width: 100%;
        height: 9vh;
        border-radius: 5px;
        object-fit: cover; }
    main #list_answer span {
      display: block;
      width: auto; }
  main .txt_answer {
    color: #007BBF;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0 .5em 0 0; }
  main .img_answer {
    width: auto;
    height: 15vh;
    text-align: center;
    margin: 0 0 4vh; }
    main .img_answer img {
      width: auto;
      height: 15vh; }
  main .img_answer_3 {
    width: 100%;
    text-align: center;
    margin: 0 0 3vh; }
    main .img_answer_3 img {
      width: 100%;
      height: auto;
      border-radius: 10px; }

/*フッター*/
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 2vh;
  font-weight: 700;
  text-align: center;
  background-color: #111;
  padding: 1.5vh 1vh; }
  footer ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: auto;
    list-style: none; }
  footer li {
    width: 22%; }
  footer a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 5.5vh;
    border-radius: .5vh; }
  footer #btn_back_index {
    color: #fff;
    background-image: url(../images/common/btn_back_index.png);
    background-size: contain;
    background-position: right bottom;
    background-color: #1343a7;
    box-shadow: 0px .5vh 0px 0px #002983; }
  footer #btn_back_history {
    background-color: #ccc;
    background-image: url(../images/common/icon_arrow_left.svg);
    background-size: 2vh;
    background-position: 8% center;
    box-shadow: 0px .5vh 0px 0px #9A9A9A; }
  footer #btn_ranking {
    background-color: #ffc934;
    box-shadow: 0px .5vh 0px 0px #bb9032; }
  footer #btn_back_yukari {
    background-color: #71fa48;
    box-shadow: 0px .5vh 0px 0px #61b461; }
  footer #btn_back_chosyu {
    background-color: #FFB1E2;
    box-shadow: 0px .5vh 0px 0px #D153B4; }
  footer #btn_back_sura {
    background-color: #A2D4FF;
    box-shadow: 0px .5vh 0px 0px #508FD3; }
  footer #btn_back_quiz {
    background-color: #E1FF0A;
    box-shadow: 0px .5vh 0px 0px #96B924; }