/* ========================================
   1. 変数定義（CSS Variables）
   ======================================== */
:root {
  /* オレンジ系 */
  --color-orange-primary: #f08300;
  --color-orange-dark: #e96600;

  /* その他の色 */
  --color-red: #d50000;
  --color-yellow: #f9be00;
  --color-white: #fff;
  --color-text-brown: #5a3a3a;

  /* フォントファミリー */
  --font-family-std: "Yu Gothic StdN", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  --font-family-pr6: "Yu Gothic Pr6N", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

/* ========================================
   2.共通
   ======================================== */
img{
   width: 100%;
   height: auto;
   max-width: 100%;
}
b{
   font-weight: 600;
}
.u-colRed{
   color: var(--color-red)!important;
}
h1,h2,h3,h4,h5,h6,p{
   margin: 0;
   font-weight: normal;
}
ul,li{
   margin: 0;
   padding: 0;
}
.quiz-main{
   padding-top: 90px;
}
@media (max-width: 767px) {
   .quiz-main{
      padding-top: 46px;
   }
}

.sp_only{
   display: none;
}
.pc_only{
   display: block
}
@media (max-width: 768px) {
   .sp_only{
      display: block;
   }
   .pc_only{
      display: none;
   }
}

/* ========================================
   3.メインビジュアル
   ======================================== */
.quiz-mv {
  background: var(--color-yellow);
}
.quiz-mvInner{
   padding-inline: 40px;
}

.quiz-mvLimit{
   background-color: var(--color-orange-primary);
   padding-block: 18.7px 15.3px;
}
.quiz-mvLimitText{
   font-family: var(--font-family-std);
   font-size: 28px;
   font-weight: 600;
   line-height: calc(32px / 28px);
 text-align: center;
   color: var(--color-white);

}
.quiz-mvLimitTextTime{
   display: inline-block;
font-family: var(--font-family-pr6);
font-size: 24px;
line-height: calc(36px / 24px);
background-color: var(--color-red);
border-radius: 4px;
margin-right: 11px;
padding-block: 6.7px 6.3px;
padding-inline: 20px;
}
@media (max-width: 767px) {
   .quiz-mvInner{
padding: 0;
   }
   .quiz-mvLimit{
      background-color: var(--color-orange-primary);
      padding-block: 12px;
      padding-inline: 12px ;
      letter-spacing: -1px;
   }
   .quiz-mvLimitText{
      font-size: 18px;
      line-height: calc(32px / 18px);   
   }
   .quiz-mvLimitTextTime{
      font-size: 18px;
      line-height: calc(32px / 18px);   
      margin-right: 10px;
      padding: 6px;
   }
}

/* ========================================
   4. イントロダクション
   ======================================== */
.quiz-intro{
   padding-block: 56px 127px;
   padding-inline: 40px;
   background-image: url(../img/background_pattern01.jpg);
   background-repeat: repeat;
}
   .quiz-intro-content{
      text-align: center;
   }
.quiz-intro-contentText{
font-family: var(--font-family-pr6);
font-size: 20px;
line-height: calc(32px / 20px);
color: var(--color-text-brown);
font-weight: 600;
}
.quiz-intro-contentText.large{
font-family: var(--font-family-std);
font-size: 32px;
line-height: calc(51px / 32px);
margin-block: 19px 28px;
}
.quiz-intro-contentText.middle{
font-family: var(--font-family-std);   
font-size: 24px;
line-height: calc(38px / 24px);
margin-bottom: 7px;
}
.quiz-intro-contentText.small{
   font-family: var(--font-family-pr6);
   font-size: 18px;
   line-height: calc(36px / 18px);
   margin-top: 16px;
}

@media (max-width: 767px) {
   .quiz-intro{
padding-block: 32px 118px;
padding-inline: 21px;
   }

.quiz-intro-content{
   letter-spacing: -1px;
   /* WEB上で確認して入らないなら消す */
}
   
   .quiz-intro-contentText{
      font-size: 15px;
      line-height: calc(24px / 15px);
      }
      .quiz-intro-contentText.large{
         font-size: 24px;
         line-height: calc(38px / 24px);
         margin-block: 5px 20px;
      }
      .quiz-intro-contentText.middle{
         font-size: 18px;
         line-height: calc(32px / 18px);
         margin-bottom: 20px;
      }
      .quiz-intro-contentText.small{
font-size: 13px;
line-height: calc(21px / 13px);
margin-top: 14px;
      }

}







/* ========================================
   5. キャンペーン
   ======================================== */
.quiz-campaign{
   position: relative;
   background-image: url(../img/background_pattern02.jpg);
   background-repeat: repeat;
}
.quiz-campaignCharacter{
   position: absolute;
   max-width: 110px;
   height: auto;
   top: -104px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 1;
}
.quiz-campaignInner{
   padding-block: 57.7px 80.7px;
   padding-inline: 20px;
}
.quiz-campaignBody{
   border-radius: 20px;
   background: var(--color-white);
   max-width: 1100px;
   margin-inline: auto;
}
.quiz-campaignBodyInner{
   padding-block: 87px 80.5px;
   padding-inline: 40px;
}
.quiz-campaignBodyTitleWrap{
   position: relative;
   width: 100%;
   margin-bottom: -46.4px;
}
   .quiz-campaignBodyTitle{
font-family: var(--font-family-std);
font-size: 40px;
font-weight: 600;
line-height: 1;
color: var(--color-white);
      position: absolute;
      top: 27px;
      left: 50%;
      transform: translateX(-50%);
   }
.quiz-campaignBodyTitleImg{
   display: block;
   aspect-ratio: 720 / 109;
   max-width: 720px;
   margin-inline: auto;
}
.quiz-campaignBodyIntroText{
   font-family: var(--font-family-pr6);
   font-size: 18px;
   line-height: calc(30px / 18px);
   text-align: center;
   color: var(--color-text-brown);   
   font-weight: 600;
   
}
.quiz-campaignBodyIntroTextLarge{
font-family: var(--font-family-std);
font-size: 28px;
line-height: calc(45px / 28px);
text-align: center;
color: var(--color-red);
margin-top: 15px;
font-weight: 600;
}

.quiz-campaignBodyWrapper{
   display: flex;
   justify-content: center;
   gap: 60px;
   margin-top: 40.7px;
}
.quiz-campaignBodyWrap{
width: calc(100% / 2);
max-width: 480px;
}

.quiz-campaignBodyWrapItem + .quiz-campaignBodyWrapItem{
   margin-top: 30.5px;
}
.quiz-campaignBodyWrapItemTitle{
   position: relative;
font-family: var(--font-family-std);
font-size: 20px;
font-weight: 600;
line-height: calc(36px / 20px);
text-align: center;
color: var(--color-orange-dark);
border-radius: 20px;
max-width: 480px;
&::before{
   content: '';
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   background: var(--color-yellow);
   opacity: 0.5;
   border-radius: 20px;
}
}

.quiz-campaignBodyWrapItemBox{
   margin-top: 24px;
}
.quiz-campaignBodyWrapItemBox.Height{
   min-height: 67px;
}
.quiz-campaignBodyWrapItemText.large{
font-family: var(--font-family-std);
font-size: 28px;
line-height: calc(32px / 28px);
color: var(--color-text-brown);
}
.quiz-campaignBodyWrapItemText{
font-family: var(--font-family-pr6);
font-size: 16px;
line-height: calc(32px / 16px);
color: var(--color-text-brown);
font-weight: 600;
}
.quiz-campaignBodyWrapItemList{
   margin-top: 10.1px;
}
.quiz-campaignBodyWrapItemListNotice{
font-family: var(--font-family-pr6);
font-size: 13px;
line-height: calc(24px / 13px);
color: var(--color-text-brown);
list-style: none;
}

.quiz-campaignBodyWrapItemImg{
max-width: 480px;
}

.quiz-campaignBodyWrapItemProductList{
   margin-top: 24px;
}
.quiz-campaignBodyWrapItemProductListName{
font-family: var(--font-family-pr6);
font-weight: normal;
font-size: 16px;
line-height: calc(28px / 16px);
color: var(--color-text-brown);
list-style: none;
font-weight: 600;
}
.listMaker{
   font-size: 8px;
   display: inline-block;
   color: var(--color-orange-primary);
   vertical-align: middle;
}

.quiz-campaignTerms{
   max-width: 760px;
   margin-inline: auto;
   margin-top: 73.1px;
}
.quiz-campaignTermsTitle{
font-family: var(--font-family-pr6);
font-size: 20px;
line-height: calc(50px / 20px);
color: var(--color-text-brown);
font-weight: 600;

}
.quiz-campaignTermsContent{
   height: 108.37px;
   overflow-y: scroll;  
   border-top: 1px solid var(--color-text-brown);
   margin-top: 10.9px;
 padding-top: 19.5px;
 padding-right: 22.3px;

   /* Firefox用スクロールバースタイル */
   scrollbar-width: auto;
   scrollbar-color: #D9D9D9 transparent;
}

/* Webkit系ブラウザ（Chrome、Safari、Edge）用スクロールバースタイル */
.quiz-campaignTermsContent::-webkit-scrollbar {
   width: 17px;
}
.quiz-campaignTermsContent::-webkit-scrollbar-track {
   background-color: #D9D9D9;
}
.quiz-campaignTermsContent::-webkit-scrollbar-thumb {
   background-color: #D9D9D9;
}
.quiz-campaignTermsContentText{
font-family: var(--font-family-pr6);
font-size: 14px;
line-height: calc(24px / 14px);
color: var(--color-text-brown);
font-weight: 600;
}

@media (max-width: 767px) {
   .quiz-campaignCharacter{
      max-width: 85.05px;
      height: auto;
      top: -80px;
   }
   .quiz-campaignInner{
      padding-block: 45.8px 40.7px;
      padding-inline: 0;
   }
   .quiz-campaignBody{
      max-width: 100%;
      margin-inline: 21px;
   }
   .quiz-campaignBodyInner{
      padding-block: 54.6px 92.6px;
      padding-inline: 18px 17px;
   }
   .quiz-campaignBodyTitleWrap{
      position: relative;
      width: 100%;
      margin-bottom: -45.8px;
   }
   .quiz-campaignBodyTitle{
      font-size: 28px;
      white-space: nowrap;
            position: absolute;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
         }
      .quiz-campaignBodyTitleImg{
         display: block;
         aspect-ratio: 360 / 71;
         max-width: 360px;
      }
      .quiz-campaignBodyIntroText{
         font-size: 15px;
         line-height: calc(24px / 15px);
         
         
      }
      .quiz-campaignBodyIntroTextLarge{
         font-size: 18px;
         line-height: calc(29px / 18px);
      margin-top: 20px;
         letter-spacing: -1px;
            /* WEB上で確認して入らないなら消す */
      }
      
      .quiz-campaignBodyWrapper{
         display: flex;
         justify-content: center;
         flex-direction: column;
         gap: 40px;
         margin-top: 34px;
      }
      .quiz-campaignBodyWrap{
      width: 100%;
      max-width: 100%;
      }
      
      .quiz-campaignBodyWrapItem + .quiz-campaignBodyWrapItem{
         margin-top: 40px;
      }
      .quiz-campaignBodyWrapItemTitle{
         font-size: 15px;
         line-height: calc(36px / 15px);
      border-radius: 16px;
      max-width: 100%;
      &::before{
         border-radius: 16px;
      }
      }
      
      .quiz-campaignBodyWrapItemBox{
         margin-top: 16px;
      }
      .quiz-campaignBodyWrapItemBox.Height{
         min-height: auto;
      }
      .quiz-campaignBodyWrapItemText.large{
         font-size: 18px;
         line-height: calc(29px / 18px);
         
      }
      .quiz-campaignBodyWrapItemText{
         font-size: 15px;
         line-height: calc(24px / 15px);
      }
      .quiz-campaignBodyWrapItemList{
         margin-top: 20px;
      }
      .quiz-campaignBodyWrapItemListNotice{
         font-size: 13px;
         line-height: calc(21px / 13px);
      }
      
      .quiz-campaignBodyWrapItemImg{
      max-width: 100%;
      }

      .quiz-campaignBodyWrapItemProductList{
         margin-top: 12.3px;
      }
      .quiz-campaignBodyWrapItemProductListName{
         font-size: 13px;
         line-height: calc(21px / 13px);
      }

      .quiz-campaignTerms{
         max-width: 100%;
         margin-inline: auto;
         margin-top: 36px;
      }
      .quiz-campaignTermsTitle{
         font-size: 13px;
         line-height: calc(21px / 13px);
      }
      .quiz-campaignTermsContent{
         height: 154.18px;
         margin-top: 11px;
       padding-top: 18.1px;
       padding-right: 17.5px;
      
         /* Firefox用スクロールバースタイル */
         scrollbar-width: auto;
         scrollbar-color: #D9D9D9 transparent;
      }
      
      /* Webkit系ブラウザ（Chrome、Safari、Edge）用スクロールバースタイル */
      .quiz-campaignTermsContent::-webkit-scrollbar {
         width: 17px;
      }
      .quiz-campaignTermsContent::-webkit-scrollbar-track {
         background-color: #D9D9D9;
      }
      .quiz-campaignTermsContent::-webkit-scrollbar-thumb {
         background-color: #D9D9D9;
      }
      .quiz-campaignTermsContentText{
      font-family: var(--font-family-pr6);
      font-size: 14px;
      line-height: calc(24px / 14px);
      color: var(--color-text-brown);
      
      }

}

/* ========================================
   6. クイズセクション
   ======================================== */

.quiz-question {
   padding-bottom: 80px;
  background-image: url("../img/background_pattern01.jpg");
  background-repeat: repeat;
}
.quiz-questionInner{
max-width: 1100px;
margin-inline: auto;
padding-block: 80px;
padding-inline: 20px;
}
.quiz-instruction {
   font-family: var(--font-family-pr6);
   font-size: 28px;
   font-weight: 600;
   line-height: calc(36px / 28px);
   text-align: center;
   color: var(--color-text-brown);
   
}
.quiz-questionWrapper{
   padding-top: 60px;
}
.quiz-questionWrapper + .quiz-questionWrapper{
   padding-top: 42px;
}
.quiz-container {
border-radius: 20px;
background: var(--color-white);
border: 2px solid var(--color-text-brown);
  overflow: hidden;
}

.quiz-header {
  background: var(--color-text-brown);
  display: flex;
  gap: 20px;
  padding-block: 27.8px 26.2px;
padding-inline: 40px;
}

.quiz-headerNumber {
   font-family: var(--font-family-pr6);
   font-weight: normal;
   font-size: 40px;
   line-height: calc(36px / 40px);
   color: var(--color-orange-primary);
   padding-bottom: 9px;
   white-space: nowrap;
}

.quiz-headerText {
font-family: var(--font-family-std);
font-size: 28px;
line-height: calc(36px / 28px);
  color: var(--color-white);
  align-self: center;
  font-weight: 600;
}
.quiz-headerTextSmall{
   font-size: 18px;
}

.quiz-options {
  background: var(--color-white);
  padding: 40px 48.5px 0;
  display: flex;
  gap: 48px;
}

.quiz-options-left,
.quiz-options-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.quiz-options-divider {
  width: 4px;
  min-height: 104px;
  flex-shrink: 0;
  border-left: 4px dotted var(--color-text-brown);
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}


.quiz-option input[type="checkbox"] {
  width: 24px;
  height: 24px;
  cursor: pointer;
  border: 2px solid var(--color-text-brown);
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--color-white);
}

.quiz-option input[type="checkbox"]:checked {
  background-color: var(--color-orange-primary);
  border-color: var(--color-orange-primary);
  position: relative;
}

.quiz-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 12px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}
.quiz-optionText{
   font-family: var(--font-family-pr6);
   font-weight: normal;
   font-size: 20px;
   color: var(--color-text-brown);
   font-weight: 600;

}

.quiz-questionImage{
   margin-top: 36px;
   text-align: center;
}
.quiz-questionImageDate{
   max-width: 103px;
   margin-inline: auto;
}
.quiz-questionMovie{
   aspect-ratio: 640/360;
   max-width: 640px;
   margin-top: 50px;
   margin-inline: auto;
}
.quiz-questionMovie iframe{
  width: 100%;
  height: 100%;
  display: block;
}
.quiz-hint {
padding-block: 40px 60px;
}
.quiz-hint.pattern1 {
padding-block: 20.2px 60px;
}
.quiz-hint.pattern3 + .quiz-hint.pattern2 {
padding-top: 0;
}
.quiz-hint.pattern2 {
padding-block: 50px;
}
.quiz-hint.pattern3 {
   padding-bottom: 20.2px;
}
.quiz-hint-button {
   display: block;
   position: relative;
font-family: var(--font-family-pr6);
font-weight: normal;
font-size: 16px;
line-height: 1;
text-align: center;
color: var(--color-text-brown);
border-radius: 40px;
background: transparent;
border: 1px solid var(--color-text-brown);
padding-block: 19px;
width: 240px;
margin-inline: auto;
}
      .quiz-hint.pattern1 + .quiz-hint.pattern2{
padding-top: 0;
margin-top: 12px;
      }
      .quiz-hint.pattern1.is-next-pattern2{
         padding-bottom: 0;
      }
.quiz-hint.pattern2 .quiz-hint-button{
   width: fit-content;
   padding-inline: 20px 51px;
}
.quiz-hint-buttonText{
   position: relative;
   font-weight: 600;
}
   .quiz-hint-buttonText::after {
   content: "";
   display: block;
   position: absolute;
   right: -20px;
   top: 50%;
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
   background-image: url(../img/outlink.svg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   }
   .quiz-hint.pattern2 .quiz-hint-buttonText::after{
      right: -20px;
   }

.quiz-actionsButton{
   display: block;
font-family: var(--font-family-pr6);
font-weight: normal;
font-size: 40px;
text-align: center;
color: var(--color-white);
border-radius: 60px;
background: #e50012;
padding-block: 40px;
padding-inline: 20px;
width: 100%;
max-width: 720px;
border: none;
margin-inline: auto;
font-weight: 600;
}
.quiz-actionsButton:hover{
   opacity: 0.7;
}


.quiz-actionsNotice{
   display: block;
font-family: var(--font-family-pr6);
font-weight: normal;
font-size: 18px;
line-height: calc(36px / 18px);   
color: var(--color-text-brown);
   text-align: center;
   margin-top: 40px;
   font-weight: 600;
}
   @media (max-width: 767px) {
   .quiz-questionInner{
   max-width: 100%;
   padding-block: 35px 60px;
   }
   .quiz-instruction {
   font-size: 18px;
   line-height: calc(29px / 18px);

   }
   .quiz-questionWrapper{
   padding-top: 40px;
   }
   .quiz-questionWrapper + .quiz-questionWrapper{
      padding-top: 20px;
   }
   .quiz-container {
   border-radius: 10px;
   border: none;
   }
   .quiz-header {
   background: var(--color-text-brown);
   display: flex;
   gap: 11px;
   padding-block: 12px 11px;
   padding-inline: 12px;
   }

   .quiz-headerNumber {
font-size: 24px;
line-height: calc(36px / 24px);
white-space: nowrap;
padding-bottom: 0;
   }

   .quiz-headerText {
      font-size: 18px;
      line-height: calc(29px / 18px);
   }
   .quiz-headerTextSmall{
      font-size: 13px;
   }
   .quiz-options {
      background: var(--color-white);
      padding-block: 20px 0;
      padding-inline: 20px ;
      flex-direction: column;
      gap: 0;
    }
    
    .quiz-options-left,
    .quiz-options-right {
      gap: 18px;
    }
    .quiz-options-right{
      margin-top: 18px;
    }
    .quiz-options-divider {
display: none;
    }
    
    .quiz-option {
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      }

      .quiz-option input[type="checkbox"] {
      width: 28px;
      height: 28px;
      border-radius: 4px;
      padding: 12px;
      }
      .quiz-optionText{
      font-size: 15px;
      }
      .quiz-questionImageDate{
         max-width: 76.5px;
      }
      .quiz-questionMovie{
         aspect-ratio: 300/169;
         max-width: 100%;
         margin-top: 32px;
         margin-inline: 18px 17px;
      }
      .quiz-questionMovie iframe{
         width: 100%;
         height: 100%;
         display: block;
      }
      .quiz-hint {
      padding-block: 35px 29px;
      }
      .quiz-hint.pattern1 {
      padding-block: 23px 40px;
      }
      .quiz-hint.pattern3 {
         padding-block: 23px;
      }
     
      .quiz-hint.pattern2 {
      padding-block: 28px 32px;
      }
      .quiz-hint-button{
         padding-block: 16px 17px;
      }
      .quiz-hint.pattern2 .quiz-hint-button{
         padding-block: 16px 13px;
         padding-inline: 25px 38px;

      }
      .quiz-hint-buttonText {
      font-size: 13px;

      }

      .quiz-hint-button + .quiz-hint-button{
         margin-top: 10px;
      }
      .quiz-hint.pattern2 .quiz-hint-buttonText{
         font-size: 14px;
         line-height: calc(20px / 14px);
      }

      .quiz-hint.pattern2 .quiz-hint-buttonText::after{
         right: -100px;
      }
      .quiz-hint.pattern2:has(.ver2) .quiz-hint-buttonText::after{
         right: -40px;
      }
      .quiz-actionsButton{
         font-size: 28px;
         line-height: calc(36px / 28px);
      border-radius: 40px;
      background: #e50012;
      padding-block: 25.7px;
      padding-inline: 18px;
      max-width: 330px;
      }
      .quiz-actionsNotice{
         display: none;

      }
}
/**************************************
 share
 **************************************/
 .share{
   padding: 80px 0 140px;
}
.top{
   text-align: center;
}
.top-link:hover{
   color: #E96600;
}
.share-link{
   display: block;
   max-width: 380px;
   background-color: #E96600;
   color: #fff;
   font-size: 16px;
   text-align: center;
   padding: 16px;
   border-radius: 40px;
   margin: 0 auto;
   position: relative;
   box-shadow: 0px 10px 20px 0px rgba(90, 58, 58, 0.2);
   transition: 0.1s ease-out;
   cursor: pointer;
   font-weight: 600;
}
.share-link::before{
   position: absolute;
   content: "";
   background: url(../img/share.svg);
   background-size: contain;
   width: 18px;
   height: 20px;
   top: 50%;
   left: 20%;
   transform: translateY(-50%);
}
@media all and (min-width: 768px) {
   .share-link:hover {
     color: #e96600;
     background-color: #fff;
   }
   .share-link:hover::before {
     background-image: url("/jp/memory/assets/img/com/ico_share_orange.svg");
   }
 }
 
.share-link span{
   display: inline-block;
   margin-left: 20px;
}
.share-bottom{
   padding: 48px 0 60px;
}
@media (max-width: 768px) {
   .share{
       padding: 40px 16px 100px;
   }
   .link-box .share{
       padding: 40px 16px 50px;
   }
   .share-link::before{
       left: 16%;
   }
}
/* ========================================
   5. アンサーページ
   ======================================== */

.quiz-main{
   background-image: url(../img/background_pattern01.jpg);
   background-repeat: repeat;
}
.quiz-answerInner{
   padding-block: 120px 34px;
}
.quiz-answerMessageText{
font-family: var(--font-family-std);
font-size: 54px;
line-height: calc(51px / 54px);  
color: var(--color-text-brown);
text-align: center;
font-weight: 600;
}
.quiz-answerMessageTextLarge{
   font-size: 72px;
   line-height: calc(51px / 72px);
}
.--Purple{
   color:#996EB5;
}
.--Green{
   color: #6FBC7E;
}
.--Orange{
   color: #E96600;
}
.quiz-answerCharacter{
   text-align: center;
}
.quiz-answerCharacter:has(.quiz-answerCharacterImg01){
   margin-top: 57px;
}
.quiz-answerCharacterImg01{
max-width: 114px;
}
.quiz-answerCharacter:has(.quiz-answerCharacterImg02){
   margin-top: 37.2px;
}
.quiz-answerCharacterImg02{
max-width: 131px;
}
.quiz-answerCharacter:has(.quiz-answerCharacterImg03){
   margin-top: 38.4px;
}
.quiz-answerCharacterImg03{
max-width: 639.91px;
}
.quiz-answerButtonWrap:has(.miss){
   margin-top: 55.3px;
}
.quiz-answerButtonWrap:has(.nextpage){
   margin-top: 58.3px;
}
.quiz-answerButton{
   display: block;
font-family: var(--font-family-pr6);
font-weight: normal;
font-size: 28px;
text-align: center;
color: var(--color-white);
border: none;
border-radius: 60px;
padding-block: 25px 23px;
background: #5a3a3a;
width: 100%;
max-width: 540px;
margin-inline: auto;
font-weight: 600;
}

.quiz-answerButton:hover {
   background-color: #e96600;
}

.quiz-answerButton.nextpage:hover{
   opacity: 0.7;
}
.quiz-answerButton.nextpage{
background-color: #D50000;
}
.quiz-answerCopyright{
   margin-top: 58.3px;
}
.quiz-answerCopyrightText{
font-family: var(--font-family-pr6);
font-weight: normal;
font-size: 14px;
line-height: calc(40px / 14px);
text-align: center;
color: var(--color-text-brown);

}

.quiz-answerMissCount{
   position: relative;
   background-color: var(--color-white);
border-radius: 24px;
padding-block: 13.6px 16.4px;
padding-inline: 12px;
width: 100%;
max-width: 540px;
margin-inline: auto;
margin-top: 54px;
}
.quiz-answerMissCount::before{
   position: absolute;
display: block;
content: '';
bottom: -14px;
    transform: translateX(-55%);
    left: 50%;
width: 16px;
height: 14px;
background-color: var(--color-white);
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.quiz-answerMissCountText{
font-family: var(--font-family-std);
font-weight: normal;
font-size: 20px;
line-height: calc(40px / 20px);
text-align: center;
color: var(--color-text-brown);
font-weight: 600;
}
.quiz-answerMissCountTextQuestion{
   color: var(--color-orange-primary);
}
.quiz-answerClearCount{
   position: relative;
   background-color: var(--color-white);
border-radius: 24px;
padding-block: 13.6px 16.4px;
padding-inline: 12px;
width: 100%;
max-width: 540px;
margin-inline: auto;
margin-top: 54px;
}
.quiz-answerClearCount::before{
   position: absolute;
display: block;
content: '';
bottom: -14px;
    transform: translateX(-55%);
    left: 50%;
width: 16px;
height: 14px;
background-color: var(--color-white);
clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.quiz-answerClearCountText{
font-family: var(--font-family-std);
font-weight: normal;
font-size: 20px;
line-height: calc(40px / 20px);
text-align: center;
color: var(--color-text-brown);
font-weight: 600;
}

/* 正解の解説セクション */
.quiz-answerExplanation {
   max-width: 1100px;
   margin-inline: auto;
   margin-top: 54px;
   background-color: var(--color-white);
   border-radius: 24px;
   padding: 50px 90px;
}

.quiz-answerExplanationItem ul {
   margin-top: 12px;
   margin-left: 1.2em;
}

.quiz-answerExplanationItem a{
   text-decoration: underline;
   font-weight: 600;
}
.quiz-answerExplanationItem a:hover{
   color: gray;
   text-decoration: none;
}
.quiz-answerExplanationItem + .quiz-answerExplanationItem {
   margin-top: 72.8px;
}

.quiz-answerExplanationItemTitle {
   display: flex;
align-items: flex-end;
   gap: 16px;
font-family: var(--font-family-std);
font-weight: normal;
font-size: 20px;
line-height: calc(32px / 20px);
color: var(--color-text-brown);
font-weight: 600;
border-bottom: 1px solid #5A3A3A;
padding-bottom: 12.2px;
}
.quiz-answerExplanationItemTitleNumber{
   display: inline-block;
   align-self:flex-start;
font-family: var(--font-family-pr6);
font-weight: normal;
font-size: 32px;
line-height: calc(36px / 32px);
color: var(--color-orange-primary);
min-width: 50px;
height: 42px;
font-weight: 600;
}
.quiz-answerExplanationItemAnswer {
   display: flex;
   align-items: baseline;
   gap: 8px;
   margin-top: 32.5px;
}

.quiz-answerExplanationItemAnswerLabel {
   font-family: var(--font-family-std);
   font-weight: normal;
   font-size: 28px;
   line-height: calc(36px / 28px);
   color: var(--color-orange-primary);
   margin: 0;
   flex-shrink: 0;
   font-weight: 600;

}

.quiz-answerExplanationItemAnswerText {
   font-family: var(--font-family-std);
   font-weight: normal;
   font-size: 28px;
   line-height: calc(36px / 28px);
   color: var(--color-orange-primary);
   margin: 0;
   font-weight: 600;
}

.quiz-answerExplanationItemDescription {
   font-family: var(--font-family-pr6);
   font-weight: normal;
   font-size: 16px;
   line-height: calc(32px / 16px);
color: #333;
   margin: 30px 0 0 0;
   font-weight: 600;



}
.quiz-answerExplanationItemDescription.center{
   width: fit-content;
   margin-inline: auto;
}
.quiz-answerExplanationItemDescription + .quiz-answerExplanationItemDescription{
   margin-top: 16px;
}

@media screen and (max-width: 767px) {
   .quiz-answerInner{
      padding-block: 60px 186px;
      padding-inline: 23px 22px;;
   }


   .quiz-answerMessageText{
      font-size: 36px;
      line-height: calc(56px / 36px);
      font-weight: 600;
   }
   .quiz-answerMessageTextLarge{
      font-size: 48px;
      line-height: calc(56px / 48px);
   }
   .quiz-answerCharacter:has(.quiz-answerCharacterImg01){
      margin-top: 54.4px;
   }
   .quiz-answerCharacterImg01{
   max-width: 88.67px;
   }
   .quiz-answerCharacter:has(.quiz-answerCharacterImg02){
      margin-top: 43.8px;
   }
   .quiz-answerCharacterImg02{
   max-width: 100px;
   }
   .quiz-answerCharacter:has(.quiz-answerCharacterImg03){
      margin-top: 38.2px;
   }
   .quiz-answerCharacterImg03{
   max-width: 318.72px;
   }
   .quiz-answerButtonWrap:has(.miss){
      margin-top: 54.2px;
   }
   .quiz-answerButtonWrap:has(.nextpage){
      margin-top: 38.2px;
   }
   .quiz-answerButton{
      font-size: 18px;
      font-weight: 600;
   border-radius: 60px;
   padding-block: 31px;
   max-width: 100%;
   }
   .quiz-answerCopyright{
      margin-top: 38.2px;
   }
   .quiz-answerCopyrightText{
      font-size: 13px;
      line-height: calc(20px / 13px);
      
   }
.quiz-answerMissCount{
   max-width:100%;
}
.quiz-answerClearCount{
   max-width:100%;
}

.quiz-answerExplanation {
   max-width: 100%;
   padding: 20px;
   margin-top: 32px;
}

.quiz-answerExplanationItem {
   padding-block: 20px;
}
.quiz-answerExplanationItem + .quiz-answerExplanationItem {
   margin-top: 32.8px;
}
.quiz-answerExplanationItemTitle {
   font-size: 21px;
}
.quiz-answerExplanationItemTitleNumber{
   font-size: 24px;
   min-width: 45px;
}
.quiz-answerExplanationItemAnswer {
   margin-top: 24px;
   gap: 4px;
}

.quiz-answerExplanationItemAnswerLabel {
   font-size: 21px;
}

.quiz-answerExplanationItemAnswerText {
   font-size: 21px;
}

.quiz-answerExplanationItemDescription {
   font-size: 15px;
   margin-top: 12px;
}

}