@charset "utf-8";
body{
  font-family: 'Noto Sans JP',"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  line-height: 1.5;/*android用*/
  -webkit-text-size-adjust: 100%;
}

a{text-decoration: none;}
img{max-width: 100%;}


body.open{
  height: 100vh;
  overflow: hidden;
}

.mkh_spmenubtn{
  position: absolute;
  display: none;
  width: 42px;
  top: clamp(1rem, -0.75rem + 4.38vw, 1.875rem);/*16-30 640-960*/
  right: 16px;
  height: 16px;
  z-index: 50;
}
.mkh_spmenubtn div{
  position: relative;
  width: 27px;
  height: 18px;
  margin: 0 auto 4px;
}
.mkh_spmenubtn div::before,
.mkh_spmenubtn div::after{
  content: "";
  width: 100%;
}
.mkh_spmenubtn div span,
.mkh_spmenubtn div::before,
.mkh_spmenubtn div::after{
  display: block;
  height: 3px;
  border-radius: 10px;
  background-color: #FFFFFF;
  transition: all 0.2s linear;
}
.mkh_spmenubtn div span{
  margin: 4px 0;
}
.mkh_spmenubtn p{
  text-align: center;
  font-weight: bold;
  font-size: 0.6525em;
  color: #FFFFFF;
}
.mkh_spmenubtn p::after{
  content: "メニュー";
}
.mkh_spmenubtn.active p::after{
  content: "閉じる";
}
.mkh_spmenubtn.active div span{
  position: absolute;
  opacity: 0;
}
.mkh_spmenubtn.active div::before{
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
}
.mkh_spmenubtn.active div::after{
  position: absolute;
  top: 50%;
  transform: rotate(-45deg);
}


.mkh_spmenu{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/il_spbg.webp) center center no-repeat;
  background-size: cover;
  z-index: 20;

  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mkh_spmenu.open{
  visibility: visible;
  opacity: 1;
}
.mkh_menuhead{
  padding: 16px;
  margin-bottom: 64px;
}
.mkh_menuhead img{
  width: 170px;
}
.mkh_spmenu ul{
  width: 73%;
  margin: auto;
}
.mkh_spmenu ul li:nth-last-of-type(n+2){
  margin-bottom: 48px;
}
.mkh_spmenu ul li a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  letter-spacing: 0.1em;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 4px;
  background: transparent;
  border: 2px solid #FFFFFF;
}


.mkh_copyright{
  display: flex;
  justify-content: center;
  padding: 32px 16px;
  font-weight: 600;
  font-size: clamp(0.625rem, 0.487rem + 0.51vw, 0.75rem);/*10-12 430-820*/
  color: #A4A6AA;
}



/*indexページ*/
.mkh_mainbody{
  position: relative;
  min-height: 100vh;
  padding: 56px 16px 16px;
  background: url(../img/il_topbg.webp) center top -166px no-repeat;
}
.mkh_mainbody h1{
  margin-bottom: 40px;
  text-align: center;
}
.mkh_mainbody h1 img{
  width: 320px;
}
.mkh_description{
  line-height: 1.625;
  margin-bottom: 32px;
  text-align: center;
  font-weight: 500;
  font-size: clamp(1em, 0.449em + 2.05vw, 1.5em);/*16-24 430-820*/
  color: #FFFFFF;
}
.mkh_description span{display: inline-block;}
.mkh_board{
  width: 640px;
  margin: 0 auto 32px;;
  padding: 20px 40px;
  text-align: center;
  border-radius: 8px;
  background-color: #FFFFFF;
  border: 3px solid #404A4B;
}
.mkh_trylink p{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20.84vw;
  max-width: 300px;
  min-width: 160px;
  height: clamp(1.25rem, 0.147rem + 4.1vw, 2.25rem);/*20-36 430-820*/
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
  font-size: clamp(0.625em, 1.25vw, 1.125em);
  color: #FFFFFF;
  border-radius: 18px;
  background-color: #3E3B39;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
  z-index: 5;
  pointer-events: none;
}
.mkh_trylink p::after{
  content: "";
  position: absolute;
  display: block;
  bottom: -12px;
  left: calc(50% - 6px);
  border-top: 12px solid #3E3B39;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}
.mkh_trylink a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 506px;
  height: 108px;
  margin: 0 auto 20px;
  border: 4px solid #FFFFFF;
  border-radius: 60px;
  background-color: #F7A736;
  margin-top: clamp(-6px, calc(6px - 12 * ((100vw - 430px) / 390)), 6px);/* 6 - -6 430-820*/
}
.mkh_trylink a svg{
  position: absolute;
  right: 42px;
  top: calc(50% - 15px);
  width: 30px;
  height: 30px;
  color: #FFFFFF;
}
.mkh_illwrap::before,
.mkh_illwrap::after{
  content: "";
  position: absolute;
  display: block;
}
.mkh_illwrap::before{
  width: 320px;
  height: 406px;
  left: calc(50% - 656px);
  top: 248px;
  background: url(../img/il_shain.png) center center no-repeat;
  background-size: contain;
}
.mkh_illwrap::after{
  width: 312px;
  height: 370px;
  right: calc(50% - 664px);
  top: 240px;
  background: url(../img/il_shacho.png) center center no-repeat;
  background-size: contain;
}
.mkh_sponsor{
  margin-bottom: 8px;
  text-align: center;
  font-size: clamp(0.625em, 0.212em + 1.54vw, 1em);/*10-16 430-820*/
  font-weight: bold;
  color: #3F484B;
}
.mkh_annotation{
  max-width: 630px;
  margin: 0 auto 32px;
  font-size: clamp(0.625rem, 0.349rem + 1.03vw, 0.875rem);/*10-14 430-820*/
}
.mkh_notes{
  max-width: 686px;
  margin: auto;
  padding: 24px 40px;
  border-radius: 16px;
  background-color: #FFFFFF;
  border: 1px solid #707070;
}
.mkh_notes h3{
  width: fit-content;
  margin: -40px auto 20px;
  padding: 4px 16px;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: #3F484B;
  background-color: #FFFFFF;
}
.mkh_notes p{
  line-height: 1.75;
  margin-bottom: 16px;
  font-size: clamp(0.75em, 0.612em + 0.51vw, 0.875em);/*12-14 430-820*/
  color: #3F484B;
}
.mkh_notes ul{
  line-height: 1.75;
  font-size: clamp(0.625em, 0.349em + 1.03vw, 0.875em);/*10-14 430-820*/
  color: #3F484B;
}
.mkh_notes ul li{
  padding-left: 1em;
  text-indent: -1em;
}
.mkh_backsitetop{
  position: absolute;
  top: 72px;
  right: max(32px, calc(50% - 828px));
  border-radius: 4px;
  border: 2px solid #FFFFFF;
}
.mkh_backsitetop a{
  display: block;
  padding: 14px clamp(1.25em, -1.447em + 5.26vw, 2.5em);/*20-40 820-1200*/
  letter-spacing: 0.1em;
  font-size: 1em;
  font-weight: bold;
  color: #FFFFFF;
}

.mkh_header .mkh_backsitetop{
  position: static;
}



/*--------------下層-------------*/
/*共通*/
.mkh_header{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 120px;
  background-color: #1D1C2C;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);
}
.mkh_header > div:first-of-type{
  display: flex;
  align-items: center;
  gap: clamp(1rem, -14rem + 25vw, 6rem);/*16-96 960-1280*/
}
.mkh_header h1{
  width: clamp(10em, -6.184em + 31.58vw, 17.5em);/*160-280 820-1200*/
}
.mkh_header p{
  font-weight: bold;
  letter-spacing: 0.05em;
  text-align: center;
  color: #FFFFFF;
}
.mkh_header .mkh_itemname{
  font-size: clamp(1.5rem, -2.1rem + 6vw, 3rem);/*24-48 820-1360*/
}
.mkh_header .mkh_menutxt{
  font-size: clamp(0.875rem, 0.586rem + 1.08vw, 1.5rem);/*14-24 960-1360*/
}
.mkh_header .mkh_checktxt{
  font-size: clamp(1rem, -0.2rem + 2vw, 1.5rem);/*16-24 960-1360*/
}

.mkh_dojobody{
  padding: 40px 16px;
  min-height: calc(100vh - 120px);
  background-color: #F4F4F4;
}
.mkh_wrap{
  max-width: 1200px;
  margin: auto;
}


/*menuページ*/
.mkh_coursemenu{
  max-width: 640px;
  margin: auto;
}
.mkh_coursemenu li{
  position: relative;
}
.mkh_coursemenu li:nth-last-of-type(n+2){
  margin-bottom: 28px;
}
.mkh_coursemenu li a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
  height: 80px;
  padding: 0 24px 0 40px;
  color: #3F484B;
  border-radius: 16px;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
}
.mkh_coursemenu li a svg{
  width: 30px;
  height: 30px;
}
.mkh_coursemenu li p{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 78px);
}
.mkh_coursemenu li a span:first-of-type{
  letter-spacing: 0.05em;
  font-size: clamp(1.25rem, 0.423rem + 3.08vw, 2rem);/*20-32 430-820*/
  font-weight: bold;
}
.mkh_coursemenu li a span:last-of-type{
  letter-spacing: 0.05em;
  font-size: clamp(0.75rem, 0.199rem + 2.05vw, 1.25rem);/*12-20 430-820*/
  font-weight: bold;
  color: #FFFFFF;
}
.mkh_coursemenu li a span.now_try{
  color: #D13C51 !important;
}
.mkh_coursemenu li a span.one_more_try{
  color: #3F484B !important;
}
.mkh_resultshow{
  position: absolute;
  display: none;
  right: -128px;
  top: calc(50%);
  letter-spacing: 0.05em;
  font-size: clamp(0.75em, 0.547em + 0.75vw, 1em);/*12-16 430-960*/
  font-weight: bold;
  color: #3F484B;
  transform: translateY(-50%);
  cursor: pointer;
}
.mkh_resultshow::after{
  content: "";
  display: inline-block;
  margin-top: 5px;
  margin-left: 4px;
  vertical-align: top;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #3F484B;
  border-radius: 2px;
}



/*プログレスバー*/
.mkh_progress,
.mkh_progress ul{
  position: relative;
  display: flex;
  justify-content: space-between;
}
.mkh_progress{
  max-width: 1040px;
  margin: 0 auto 28px;
}
  /*結果ページプログレスバー*/
.mkh_progress.mkh_result{
  max-width: 1148px;
  margin: 0 0 28px auto;
  padding-top: 32px;
}
.mkh_progress.mkh_result ul{
  width: calc(100% - 140px);
}
.mkh_progress.mkh_result p{
  position: relative;
  margin-top: -9px;
  font-weight: bold;
  font-size: clamp(1.25em, 0.236em + 3.77vw, 2.5em);/*20-40 430-960*/
  color: #2A7DC3;
  z-index: 5;
}
.mkh_progress.mkh_result::before{
  width: calc(100% - 108px);
  top: 52px;
}

.mkh_progress li{
  position: relative;
  text-align: center;
  z-index: 5;
}
.mkh_progress li::before{
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 100%;
  border: 2px solid transparent;
  background-repeat: no-repeat;
}
  /* 未回答 */
.mkh_progress li.off::before{
  background-image: radial-gradient(circle, #B7B7B7 16px, transparent 17px);
}
  /* 回答済み */
.mkh_progress li.on::before{
  background-image: radial-gradient(circle, #2A7DC3 16px, transparent 17px);
}
  /* カレント */
.mkh_progress li.current::before{
  background-image: radial-gradient(circle, #2A7DC3 16px, transparent 17px);
  border: 2px solid #2A7DC3;
}
.mkh_questionnum{
  font-size: clamp(0.75em, 0.142em + 2.26vw, 1.5em);/*12-24 430-960*/
  font-weight: bold;
  color: #000000;
}
.mkh_progress::before{
  content: "";
  position: absolute;
  display: block;
  width: calc(100% - 32px);
  height: 6px;
  top: 20px;
  left: 16px;
  background-color: #D4D4D4;
  z-index: 1;
}
.mkh_mark{
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
}
.mkh_mark span{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin: auto;
  letter-spacing: 0.05em;
  font-size: clamp(0.875em, 0.469em + 1.51vw, 1.375em);
  font-weight: bold;
  border-radius: 100%;
}
.mkh_true span{
  color: #314A70;
  border: 2px solid #314A70;
}
.mkh_false span{
  color: #D13C51;
  border: 2px solid #D13C51;
}


/*問題枠*/
.mkh_questionarea{
  margin-bottom: 44px;
  padding: 32px 124px 40px 48px;
  border-radius: 16px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.08);
}
.mkh_questionhead{
  display: flex;
  gap: 24px 0;
}
.mkh_questionhead h2{
  width: 3em;
  line-height: 1.3;
  letter-spacing: 0.05em;
  font-size: clamp(1.25em, 0.063em + 4.42vw, 3.375em);/*20-54 430-1200*/;
  font-weight: bold;
  color: #1D1C2C;
}
.mkh_questionhead p{
  width: calc(100% - 200px);
  margin-bottom: 24px;
  font-size: clamp(0.875rem, 0.578rem + 1.11vw, 1.5rem);/*14-24 430-1334*/
  color: #000000;
}

.mkh_selectarea{
  padding-left: clamp(7rem, 0.796rem + 12.11vw, 9.875rem);/*112-158 820-1200*/
}
.mkh_selectarea div{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px 24px;
  background-color: #FFFFFF;
  border: 1px solid #333333;
}
  /* デフォルト背景 */
.mkh_selectarea div.sel{
  background-color: rgba(0, 140, 214, 0.16);
  box-shadow: 0 0 0 3px #333333;
}
  /* 選択背景 */
.mkh_selectarea div.correct{
  background-color: #CCCCFF;
}
.mkh_selectarea div:nth-last-of-type(n+2){
  margin-bottom: 24px;
}
.mkh_selectarea div span:first-of-type{
  padding-right: 20px;
  font-size: 1.125em;
  color: #000000;
}
.mkh_selectarea div span:last-of-type{
  width: calc(100% - 40px);
  padding-left: 24px;
  font-size: clamp(0.875em, 0.737em + 0.51vw, 1em);/*14-16 430-820*/
  color: #000000;
  border-left: 1px solid #314A70;
}

.mkh_buttonbox{
  text-align: center;
}
.mkh_buttonbox button{
  cursor: pointer;
  width: 300px;
  height: 60px;
  font-size: clamp(0.875rem, 0.599rem + 1.03vw, 1.125rem);/*14-18 430-820*/
  font-weight: bold;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
}
.mkh_next{
  background-color: #1168CC;
  box-shadow: 0px 4px 0px #134D97;
}
.mkh_deside{
  display: none;
  margin: auto;
  background-color: #D13C51;
  filter: drop-shadow(0px 4px 0px #872533);
}



/*結果ページ*/
.mkh_resulthead{
  display: flex;
  align-items: baseline;
  gap: clamp(1.25rem, -1.75rem + 5vw, 2.5rem);/*20-40 960-1360*/
}
.mkh_questionarea.mkh_result{
  padding: 32px 80px 72px;
}
.mkh_result h2{
  text-align: center;
  font-size: clamp(1.125em, 0.16em + 3.59vw, 2em);/*18-32 430-820*/
  font-weight: bold;
  color: #262626;
}
.mkh_resultscore{
  text-align: center;
  font-weight: bold;
  font-size: clamp(3em, 1.897em + 4.1vw, 4em);/*48-64 430-820*/
  color: #2A7DC3;
}
.mkh_resultscore span:nth-of-type(2){
  vertical-align: baseline;
  font-size: 0.75em;
}
.mkh_message{
  line-height: 1.625;
  margin-bottom: 12px;
  text-align: center;
  font-size: clamp(1em, 0.449em + 2.05vw, 1.5em);/*16-24 430-820*/
  font-weight: 500;
  color: #000000;
}
.mkh_commentary{
  line-height: 1.625;
  margin-bottom: 32px;
  text-align: center;
  font-size: clamp(0.875em, 0.599em + 1.03vw, 1.125em);/*14-18 430-820*/
  font-weight: 500;
  color: #000000;
}
.mkh_commentary b{
  font-weight: bold;
}

.mkh_relation h3{
  height: 48px;
  margin-bottom: 24px;
  padding-top: 8px;
  text-align: center;
  font-size: 1.125em;
  font-weight: 900;
  color: #111111;
  border-radius: 5px;
  background-color: #F1F5F8;
}
.mkh_relation ul{
  display: flex;
  justify-content: center;
  gap: 0 20px;
}
.mkh_relation ul li{
  width: 214px;
}
.mkh_relation ul li a{display: block;}
.mkh_relation ul li figure div{
  aspect-ratio: 107/70;
}
.mkh_relation ul li figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-bottom: 10px;
  border-radius: 12px;
}
.mkh_relation ul li figure figcaption{
  text-align: center;
  font-weight: 500;
  font-size: 0.875em;
  color: #333333;
}



.mkh_explanation{
  display: flex;
  justify-content: space-between;
}
.mkh_explanation h2{
  width: 3em;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: clamp(1.25em, -1.093em + 8.72vw, 3.375em);/*20-54 430-820*/
  color: #1D1C2C;
}
.mkh_explanation > div{max-width: calc(100% - 176px);}
.mkh_exphead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.mkh_exphead p{
  display: flex;
  align-items: center;
}
.mkh_exphead p:first-of-type{
  width: 148px;
}
.mkh_exphead p:nth-of-type(2){
  width: calc(100% - 196px);
}
.mkh_exphead p b{
  width: 2em;
  font-size: 0.875em;
  font-weight: bold;
  color: #000000;
}
.mkh_answer{
  display: block;
  line-height: 1;
  margin: 0 16px 0 30px;
  font-size: clamp(1.125em, 0.712em + 1.54vw, 1.5em);/*18-24 430-820*/
  color: #000000;
}
.result_false{
  width: 3em;
  font-weight: bold;
  color: #D13C51;
}
.result_true{
  width: 3em;
  font-weight: bold;
  color: #314A70;
}
.mkh_question{
  margin-left: 30px;
  width: calc(100% - 3em - 30px);
  font-size: 0.875em;
  color: #000000;
}

.mkh_selectlist > div{
  display: flex;
  align-items: center;
}
.mkh_selectlist > div:nth-last-of-type(n+2){
  margin-bottom: 24px;
}
.mkh_correct{
  width: calc(2em + 14px);
  font-size: clamp(1em, 0.724em + 1.03vw, 1.25em);/*16-20 430-820*/
  font-weight: bold;
  color: #314A70;
}
.mkh_problemstatement{
  width: calc(100% - 40px);
  padding: 24px;
  border: 1px solid #333333;
}
.correct .mkh_problemstatement{
  background-color: rgba(0, 140, 214, 0.08);
}
.mkh_problemstatement div{
  display: flex;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #CCCCCC;
}
.mkh_problemstatement div span:first-of-type{
  padding-right: 20px;
  font-size: 1.125em;
  color: #000000;
}
.mkh_problemstatement div span:last-of-type{
  width: calc(100% - 40px);
  padding-left: 24px;
  font-size: clamp(0.875em, 0.737em + 0.51vw, 1em);/*14-16 430-820*/
  color: #000000;
  border-left: 1px solid #314A70;
}
.mkh_problemstatement p{
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 16px;
}
.mkh_problemstatement p b{
  display: block;
  width: 2.5em;
  font-weight: bold;
  font-size: clamp(0.875em, 0.599em + 1.03vw, 1.125em);/*14-18 430-820*/
  color: #000000;
}
.mkh_problemstatement p span{
  display: block;
  width: calc(100% - 2.25em - 32px);
  font-size: clamp(0.875em, 0.737em + 0.51vw, 1em);/*14-16 430-820*/
  color: #000000;
}






@media screen and (min-width:821px){
  .mkh_trylink a:hover{
    background-color: #F5BB6B;
  }
  .mkh_backsitetop a:hover{
    background-color: rgba(255,255,255,0.25);
  }
  .mkh_coursemenu li a:hover{
    color: #FFFFFF;
    background-color: #2A7DC3;
  }
  .mkh_selectarea div:hover{
    border: 1px solid #2A7DC3;
  }
  .mkh_resultshow:hover{
    color: #2A7DC3;
  }
  .mkh_progress li:hover .mkh_questionnum{
    color: #2A7DC3;
  }
  .mkh_progress li:hover::before{
    background: radial-gradient(circle, #2A7DC3 16px, transparent 17px);
  }
  .mkh_progress.mkh_result p a:hover{
    color: #111111;
  }
  .mkh_relation ul li a:hover img{
    opacity: 0.7;
  }
  .mkh_relation ul li a:hover figcaption{
    text-decoration: underline;
  }
}





@media screen and (max-width:1440px){
  .mkh_mainbody{
    background-position: center top clamp(-14.5rem, -23.5rem + 15vw, -10rem);/*-232ー-160 960-1440*/
  }
  .mkh_board{
    width: max(300px, 44.44vw);
    padding: max(16px, 1.38vw) max(20px, 2.78vw);
  }
  .mkh_trylink a{
    width: max(260px, 35.14vw);
    height: max(54px, 7.5vw);
  }
  .mkh_trylink a img{
    width: max(100px, 13.89vw);
  }

  .mkh_illwrap::before{
    width: 22.22vw;
    height: 28.2vw;
    left: 16px;
    pointer-events: none;
  }
  .mkh_illwrap::after{
    width: 21.66vw;
    height: 25.7vw;
    right: 16px;
    pointer-events: none;
  }
}
@media screen and (max-width:1200px){
  .mkh_questionarea{
    padding: max(16px, 2.66vw) clamp(1em, -13.566em + 28.42vw, 7.75em) max(24px, 3.33vw) max(16px, 4vw);
  }/*16-124 820-1200*/
}
@media screen and (max-width:960px){
  .mkh_dojobody{min-height: calc(100vh - 80px);}
  .mkh_mainbody{
    background-position: center top clamp(-18.375rem, -24.833rem + 17.22vw, -14.5rem);/*-294ー-230 600-960*/
    overflow: hidden;
  }



  .mkh_spmenubtn{
    display: block;
  }
  .mkh_mainbody h1 img {
    width: max(222px, 33.33vw);
  }

  .mkh_header h1{
    display: none;
  }
  .mkh_backsitetop,
  .mkh_header > div.mkh_backsitetop{
    display: none;
  }
  .mkh_trylink a svg{
    right: max(20px, 4.375vw);
    top: calc(50% - 8px);
    width: 16px;
    height: 16px;
  }

  .mkh_illwrap::before{
    top: 268px;
  }
  .mkh_illwrap::after{
    top: 266px;
  }

  .mkh_header{
    height: max(64px, 9.75vw);
    padding-right: 48px;
  }
  .mkh_coursemenu li{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mkh_coursemenu li a{
    width: calc(100% - 72px);
  }
  .mkh_resultshow{
    position: static;
    width: 56px;
    transform: none;
  }
  .mkh_resultshow::after{
    content: none;
  }
}
@media screen and (max-width:820px){
  .mkh_mainbody{
    padding-top: max(30px, 6.83vw);
    background-position: center top clamp(-18.375rem, -31.11rem + 34.36vw, -13.5rem);/*-294ー-216 593-820*/
  }
  .mkh_mainbody h1{
    margin-bottom: max(24px, 4.8vw);
  }
  .mkh_description{margin-bottom: max(16px, 3.9vw);}
  .mkh_dojobody{padding-top: max(24px, 4.87vw);}

  .mkh_board{margin-bottom: 84px;}

  .mkh_illwrap::before{
    width: 156px;
    height: 192px;
    top: clamp(19rem, 5.938rem + 35.24vw, 24rem);/*304-384 593-820*/
    left: max(0px, calc(50% - 216px));
    background-image: url(../img/il_shain_sp.png);
  }
  .mkh_illwrap::after{
    width: 126px;
    height: 176px;
    top: clamp(19.625rem, 6.89rem + 34.36vw, 24.5rem);/*314-392 593-820*/
    right: max(-10px, calc(50% - 228px));
    background-image: url(../img/il_shacho_sp.png);
    background-position: left top;
    background-size: auto;
  }

  .mkh_trylink a{margin-bottom: 56px;}
  .mkh_notes{
    padding: 24px max(4.87vw);
  }
  .mkh_notes h3{
    margin-bottom: max(12px, 2.44vw);
  }



  .mkh_coursemenu li a{
    gap: 12px;
    width: calc(100% - 56px);
    height: max(64px, 9.75vw);
    padding: 0 max(10px, 2.92vw) 0 max(16px, 4.87vw);
  }
  .mkh_coursemenu li a span:last-of-type{color: #3F484B;}
  .mkh_coursemenu li p{
    width: calc(100% - 28px);
  }
  .mkh_coursemenu li a svg{
    width: 16px;
    height: 16px;
  }
  .mkh_resultshow{
    width: 48px;
  }



  .mkh_questionhead{
    flex-wrap: wrap;
    gap: 12px;
  }
  .mkh_questionhead p{
    width: 100%;
  }
  .mkh_selectarea{
    padding-left: 0;
  }
  .mkh_selectarea div{
    padding: max(12px, 2.9vw) max(16px, 2.9vw);
  }
  .mkh_selectarea div:nth-last-of-type(n+2) {
    margin-bottom: 12px;
  }
  .mkh_selectlist > div:nth-last-of-type(n+2) {
    margin-bottom: 12px;
  }



  .mkh_buttonbox button{
    width: max(206px, 3.65vw);
    height: max(40px, 7.3vw);
  }



  .mkh_progress li::before{
    width: max(24px, 5.12vw);
    height: max(24px, 5.12vw);
  }
  .mkh_progress li.off::before{
    background-image: radial-gradient(circle, #B7B7B7 10px, transparent 11px);
  }
  .mkh_progress li.on::before{
    background-image: radial-gradient(circle, #2A7DC3 10px, transparent 11px);
  }
  .mkh_progress li.current::before{
    background-image: radial-gradient(circle, #2A7DC3 10px, transparent 11px);
  }
  .mkh_mark{top: -4.26vw;}
  .mkh_mark span{
    width: max(20px, 3.9vw);
    height: max(20px, 3.9vw);
  }
  .mkh_progress{
    margin-bottom: 3.41vw;
  }
  .mkh_progress::before{
    height: max(4px, 0.73vw);
    top: max(12px, 2.44vw);
  }
  .mkh_progress.mkh_result{
    margin-bottom: 3.41vw;
    padding-top: 3.9vw;
  }
  .mkh_progress.mkh_result::before{
    top: max(30px, 6.34vw);
  }

  .mkh_questionarea.mkh_result{
    padding: 32px max(16px, 9.75vw) 72px;
  }



  .mkh_explanation{
    flex-wrap: wrap;
  }
  .mkh_explanation h2{
    margin-bottom: 12px;
  }
  .mkh_explanation > div{
    max-width: none;
  }
  .mkh_exphead{
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }
  .mkh_exphead p:first-of-type,
  .mkh_exphead p:nth-of-type(2){
    width: 100%;
  }
  .mkh_exphead p:nth-of-type(2){
    align-items: flex-start;
  }
  .mkh_selectlist > div{
    position: relative;
  }
  .mkh_correct{
    position: absolute;
    left: 10px;
    top: 4px;
  }
  .mkh_problemstatement{
    width: 100%;
    padding: max(12px, 2.9vw) max(16px, 2.9vw);
  }
  .mkh_problemstatement div{
    padding-bottom: 8px;
  }
  .mkh_problemstatement div span:first-of-type{
    padding: 11px max(14px, 2.4vw) 10px 0;
  }
  .mkh_problemstatement div span:last-of-type{
    padding-left: max(16px, 2.92vw);
  }
  .mkh_problemstatement p{
    align-items: flex-start;
    gap: 16px;
  }
  .mkh_problemstatement p span{
    width: calc(100% - 2em - 16px);
  }



  .mkh_relation ul{
    flex-wrap: wrap;
    gap: 24px;
  }
}
/*テキストの段落ちに合わせて背景・イラスト位置変更*/
@media screen and (max-width:592px){
  .mkh_mainbody{
    background-position: center top clamp(-17.25rem, -24.549rem + 27.16vw, -14.5rem);/*-276ー-232 430-592*/
  }

  .mkh_illwrap::before{
    top: clamp(20.375rem, 13.739rem + 24.69vw, 22.875rem);/*326-366 430-592*/
  }
  .mkh_illwrap::after{
    top: clamp(21.25rem, 14.282rem + 25.93vw, 23.875rem);/*340-382 430-592*/
  }
}
/*ここまで*/
@media screen and (max-width:430px){
  .mkh_header{
    justify-content: flex-start;
    padding-left: 16px;
  }
  .mkh_header .mkh_menutxt{margin-left: 0;}


  .mkh_trylink a{
    width: max(222px, 60.46vw);
  }


  .mkh_coursemenu li a span:last-of-type:not([class]){display: none;}


  .mkh_resulthead{gap: 16px;}
  .mkh_progress.mkh_result ul{
    width: calc(100% - 56px);
  }
  .mkh_progress.mkh_result::before{
    width: calc(100% - 64px);
    top: max(27px, 6.97vw);
  }
  .mkh_progress.mkh_result p{
    margin-top: -2px;
  }
  .mkh_mark{top: -24px;}

  .mkh_questionarea.mkh_result{
    padding: 24px 16px 40px;
  }
}