.l-container{
  padding: 130px 20px 20px;
  background-repeat: no-repeat;
  background-size: cover;
}
.l-header__inner{
  display: none;
}
.fs-l-footer{
      display: none;
}

.p-page_content__inner{
  max-width: 1000px;
}

.u-margin__top--60 {
    margin-top: 30px;
}

.fst_img{
  width: 70%;
  margin: 0 auto;
}

.yorn .button_width{
   padding: 24px 17px;
  border: 2px solid;
  flex: none;
  margin: 0px 0px;

  cursor: pointer;
  transition: all 0.15s ease;
}
.yorn .button_width img {
  width: 70%;
  margin: 0 auto;
  display: block; /* 中央寄せを確実にする */
  transition: transform 0.15s ease; /* 画像のアニメーション */
}

/* クリック・タップ時の効果 */
.yorn .button_width:active,
.questions .start_btn:active {
  transform: scale(0.95); /* ボタン全体が少し縮む */
  background-color: #f0f0f0; /* 背景色を変更 */
}

.an_nest:active,
.questions .restart:active {
  transform: scale(0.95); 
  background-color: #ccc;
}

.yorn .button_width:active img {
  transform: scale(0.95); /* 画像も少し縮む */
}

/* ホバー時の効果（PC用） */
.yorn .button_width:hover,
.questions .start_btn:hover{
  background-color: #f8f8f8;
  transform: scale(1.02); /* 少し大きくなる */
}

.an_nest:hover,
.questions .restart:hover {
  background-color: #ccc;
  transform: scale(1.02); /* 少し大きくなる */
}


.br-sp {
    display: none;
}

.q_num{
    border: 1px solid;
    text-align: center;
    width: 70px;
    font-size: 20px;
    padding: 10px;
    font-family: din2014, Noto sans, sans-serif;
    font-weight: 600;
    background-color: #000;
    color: #fff;
    margin: 0 auto 30px;
}

  .question .prev{
    font-size: 1.8em;
    margin: 50px auto 20px;
    text-align: center;
    font-weight: bold;
    font-family: din2014, Noto sans, sans-serif;
    color: #aa6175;
  }

  .question,
  .result{
    height:auto;
    padding: 40px 10px;
  }

  .questions .logo{
    width: 9%;
    margin: 50px auto 0px;
  }

  .questions .logoimg{
    width:50%;
    margin: 30px auto 60px;
  }

  .questions .ttl_p{
    font-size: 24px;
    margin: 30px auto 0px;
    text-align: center;
    font-weight: 500;
    font-family: din2014, Noto sans, sans-serif;
  }

  .questions .ttl_p2{
    font-size: 42px;
    margin: 7px auto 50px;
    text-align: center;
    font-weight: 700;
    font-family: din2014, Noto sans, sans-serif;
  }

  .ttlttl .ttl_p{
    font-size: 14px;
    margin: 0px auto 0px;
    text-align: center;
    font-weight: 500;
    font-family: din2014, Noto sans, sans-serif;
  }

  .ttlttl .ttl_p2{
    font-size: 32px;
    margin: 0px auto 0px;
    text-align: center;
    font-weight: 700;
    font-family: din2014, Noto sans, sans-serif;
  }

    .pep{
    width: 10%;
    display: inline;
    vertical-align: middle;
  }

  .questions .prev {
    border: solid 1px #000;
    color: #000;
    border-radius: 0px;
    font-weight: normal;
    margin-top: 40px;
    background-color: #fff;
    padding: 20px 50px;
  }

    .questions .restart{
    font-size: 1.4em;
    font-weight: 600;
    width: 33%;
    padding: 17px 17px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .questions .start{
    height:auto;
    padding: 10px;
    margin-top: 100px;
  }
    .questions  .fstbtn{
      margin-bottom: 40px;
    }


  .questions .start_btn{
    border: 2px solid #000;
    margin: 0 auto;
    font-size: 2.3em;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: din2014, Noto sans, sans-serif;
    padding: 13px 80px;

    cursor: pointer;
    transition: all 0.15s ease;
}
  
  .q_div{
        padding-top: 10px;
    margin-bottom: 20px;
  }

  
  .question .q_text,
  .result .q_text{
    font-size: 20px;
    margin: 0px auto 30px;
    text-align: center;
    font-family: din2014, Noto sans, sans-serif;
    line-height: 1.5;
    font-weight: 500;
  }
   .result .aka{
    color:red;
    font-weight:bold;
   }

  .osusumetxt{
    width: 40%;
  }

  .answer_div2 .tyu,
  .an_point .tyu{
    font-size:0.6em;
    vertical-align: top;
  }

  .answer_div2 .tyu_1,
  .an_point .tyu_1{
    font-size:0.7em;
  }

  .yorn{
    display: flex;
    justify-content: center;
    width: 50%;
    gap: 0px 100px;
    margin: 20px auto;
  }

  .marbat_img{
    width: 70%;
    margin: 0 auto;
  }

  .result .an_ttl{
    font-size: 1.4em;
    text-align: center;
    padding: 40px 0px 0px;
    font-weight: 400;
    color: #aa6175;
  }

  .answer_div2 .kaitou_seikai{
    font-size: 19px;
    margin: 20px auto 20px;
    text-align: center;
    font-family: din2014, Noto sans, sans-serif;
    line-height: 1.5;
    font-weight: 500;
  }

  .kaitou_img{
    width: 6%;
    margin: 0 auto;
  }

  .answer_div2 .kaitou_txt{
    font-size: 1.3em;
    margin: 40px auto 30px;
    text-align: center;
    font-family: din2014, Noto sans, sans-serif;
    line-height: 1.5;
    font-weight: 500;
  }

  .bu_next{
    text-align:center;
    margin-top: 30px;
  }

  .bu_next .an_nest{
    font-size: 1.2em;
    font-weight: 600;
    width: 31%;
    padding: 17px 17px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .an_point{
    position: relative;
    border: 2px solid #ccc;
    text-align: center;
    padding: 10px 10px 20px;
    width: 80%;
    max-width: 660px;
    margin: 10px auto 20px;
  }

  .an_point .point {
    position: absolute;
    font-family: din2014, Noto sans, sans-serif;
    top: -27px; /* 文字の半分がボーダーにかかるように調整 */
    left: 50%;
    transform: translateX(-50%); /* 中央寄せ */
    background: #fff; /* 背景色を白に設定してボーダーを隠す */
    padding: 0 40px; /* 左右に余白を追加 */
    margin: 0;
    font-weight: bold;
    font-size: 23px; /* お好みのサイズに調整 */
    color: #333; /* お好みの色に変更 */
  }

  .an_point .po_txt{
    font-size: 15px;
    margin: 30px auto 17px;
    text-align: center;
    font-family: din2014, Noto sans, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 1px;
  }

  .pdt_div{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    max-width: 600px;
    margin: 0 auto;
  }

  .pdt_img{
    width: 40%;
    max-width: 200px;
    height: auto;
  }

  .an_point .po_pdttxtttl{
    font-size: 13px;
    margin: 0 auto 17px;
    text-align: center;
    font-family: din2014, Noto sans, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 1.9px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    display: inline-block;
  }

  .an_point .po_pdttxt{
    font-weight: 600;
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
    margin: 0;
  }

  .an_point .new_txt{
    font-weight: 600;
    font-size: 0.8em;
    line-height: 2;
  }

  .an_point .date{
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
  }

  .an_point .pdt_uv{
    font-size:13px;
  }

  .answer_div1{
    padding-bottom: 10px;
  }

  .answer_div1 .an_txt{
    line-height: 1.9;
    color: #aa6175;
    font-size: 1.2em;
    margin-bottom: 40px;
  }

  .answer_div2{
    width: 100%;
  }

  .seikai{
    text-align:center;
    font-family: din2014, Noto sans, sans-serif;
  }
  .result .seikai_num{
    font-size: 2.4em;
    font-weight: 600;
  }
  .result .answ_num{
    font-size: 2.5em;
  }
  .result .seikai_txt{
    font-size: 1.4em;
    font-weight: 600;
  }

  .osusume{
    text-align:center;
    font-family: din2014, Noto sans, sans-serif;
    margin: 30px auto;
  }
  .result .osusume_txt{
    font-size: 1.2em;
    font-weight: 500;
    margin-bottom: 30px;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
    display: inline-block;
  }
  .osusume_div.osusume_auto_wrap {
  display: flex;
  align-items: flex-start; /* 上揃えに変更 */
  justify-content: center;
  flex-wrap: wrap; /* 自動折り返しを有効化 */
  gap: 5px; /* アイテム間の統一間隔 */
  margin: 20px auto;
  max-width: 96%; /* 幅を100%に設定 */
  }
  .osusume_div .osusume_pdt {
  width: 200px;
    min-width: 200px;
    max-width: 200px;
  flex: none;
}
  .osusume_img{
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
  .osusume_div .date{
    font-size: 0.8em;
    line-height: 1.5;
  }
  .osusume_div .osusume_name{
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1.4;
  }
  .osusume_div .osusume_btn{
    background-color: #000;
    padding: 12px 5px;
    color: #fff;
    font-size: 0.9em;
    width: 70%;
    margin: 10px auto;
  }
    .last_next .an_nest{
    font-size: 1.4em;
    font-weight: 600;
    width: 33%;
    padding: 17px 17px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.15s ease;
  }


@media(min-width:751px){
    .sp{
        display: none;
    }
    .br-pc {
        display: block;
    }

}

@media(max-width:750px){
    .pc{
        display: none;
    }

    .u-margin__top--60 {
      margin-top: 40px;
    }
    .u-margin__bottom--100{
      margin-bottom: 0px;
    }

    .p-page_content {
        padding-right: 0px;
        padding-left: 0px;
    }

    .l-container{
      padding: 0px 0px 20px;
    }

    .fst_img{
      width:100%;
    }

    .questions .start{
      height: auto;
              padding: 10px 0px 5px;
    }

    .questions .logo{
      width: 13%;
      margin: 10px auto 0px;
    }

    .question .q_text,
    .result .q_text{
        font-size: 1.1em;
        margin: 20px auto 10px;
    }

    .yorn{
      width: 42%;
      margin: 0 auto;
      gap: 20px;
      padding: 20px 0px 0px;
    }

    .yorn .button_width{
      margin: 0px auto 20px;
        width: 100%;
        font-size: 1.1em;
        padding: 22px 42px;
    }
    .bu_next .an_nest{
    font-size: 1.2em;
    font-weight: 600;
    width: 50%;
    padding: 17px 17px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .osusumetxt{
        width: 100%;
    margin: 0 auto;
  }

    .answer_div1{
      padding: 0px;
      margin-top: 15px;
    }
    
    .kaitou_img{
      width:16%;
    }

    .answer_pdt1  {
      display: block;
      margin: 10px auto;
    }

    .question,
    .result{
      padding: 10px 10px 40px;
      height:auto;
    }

    .question .prev{
      font-size: 1.5em;
      margin: 19px auto 20px;
    }

    .questions .logoimg {
        width: 61%;
        margin: 30px auto 10px;
    }

    .questions .ttl_p{
        line-height: 1.7;
        font-size: 1.5em;
        margin-bottom: 0px;
    }

    .questions .ttl_p2{
      font-size: 36px;
      margin: 7px auto 50px;
    }

  .answer_div2 .tyu,
  .an_point .tyu{
    font-size:0.6em;
    vertical-align: top;
  }

  .answer_div2 .tyu_1,
  .an_point .tyu_1{
    font-size:0.7em;
  }
  .ttlttl .ttl_p{
      font-size: 1.1em;
  }

  .ttlttl .ttl_p2{
        font-size: 2.3em;
        margin: 0px auto 6px;
  }
  

      .q_div{
      padding-top: 0px;
    }

    .questions .start_btn{
        padding: 10px 60px;
        font-size: 1.6em;
    }
    .bu_next{
      text-align: center;
      margin: 20px 0px;
        padding-bottom: 40px;
    }

    .questions .restart{
      padding: 17px 10px;
        font-size: 1em;
        font-weight: 600;
        width: 56%;
    }

    section.questions{
      padding:00px;
      margin-top: 0px;
    }

    .q_num{
      width: 60px;
    font-size: 16px;
    padding: 7px;
    margin: 0 auto 10px;
    }

    .answer_div1 .an_txt{
        font-size: 0.9em;
        line-height: 1.6;
    }

    .answer_div2 .kaitou_txt{
      font-size: 1em;
      margin: 30px auto 30px;
    }

    .an_point{
      width: 90%;
    }

    .an_point .point{
      top: -22px;
      font-size: 20px;
      padding: 0 28px;
    }

    .an_point .po_txt{
      font-size: 11px;
      margin: 18px auto 17px;
    }

    .pdt_div{
      display: block;
      margin-top: 20px;
    }

    .pdt_img{
      margin:0 auto;
    }

    .an_point .po_pdttxtttl{
      margin: 10px auto 17px;
    }

    .an_point .date{
      font-size: 13px;
    }

    .an_point .po_pdttxt{
      font-size: 1em;
    }

    .osusume_div.osusume_auto_wrap {
    padding: 0px 5px;
    gap: 8px; /* スマホ用の間隔 */
    justify-content: center;
    flex-wrap: wrap; /* スマホでも折り返し有効 */
    align-items: flex-start; /* 上揃え */
    }
    .result .seikai_txt{
      font-size: 1em;
      font-weight: 500;
    }
    .osusume_div .osusume_pdt {
     width: 150px;
    min-width: 150px;
    max-width: 150px;
    flex: none;
    }
    .osusume_img{
       width: 90%;
    display: block;
    }
    .osusume_div .osusume_name{
          font-size: 0.8em;
          line-height: 1.4;
        font-weight: 500;
    }
    .osusume_div .date {
      font-size: 0.6em;
    }
    .osusume_div .osusume_btn{
      padding: 7px 0px;
        font-size: 0.6em;
        width: 84%;
        margin: 10px auto;
        display: block;
    }

    .an_nest{
      font-size: 1.2em;
      width: 48%;
    }

    .restart {
    font-size: 16px;
    margin: 30px auto 40px;
    }

    .br-sp {
        display: block;
    }
    .br-pc{
      display:none;
    }
    
}