@charset "UTF-8";
@import url("//fonts.googleapis.com/css?family=Noto+Serif+JP:400&display=swap");
@import url("//fonts.googleapis.com/css?family=Noto+Serif+JP:500&display=swap");
@import url("//fonts.googleapis.com/css?family=Noto+Serif+JP:700&display=swap");

body {
  overflow-x: hidden;
}

#diag_modal {
  font-family: "Noto Serif JP" , Serif;
}

.pc_only {
  display: block;
}

.sp_only {
  display: none;
}

#diag_modal p,
#diag_modal h1,
#diag_modal h2,
#diag_modal h3 {
  margin: 0;
  font-size: 0;
  line-height: 0;
}

#diag_modal img {
  width: 100%;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  vertical-align: bottom;
}

.btn-diagnosis {
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition:all ease 0.3s;
  /* サイト */
  width: calc(538/1480*100%);
  top: 0;
}
.btn-diagnosis img {
  width: 100%;
  height: auto;
}
.btn-diagnosis:hover {
  filter: opacity(0.8);
}
#diag_modal .diag_page { 
  display: none;
  position: relative;
 }
/* モーダル全体の背景 */
#diag_modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  box-sizing: border-box;
  padding:0 2%;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
}
#diag_modal .diag_modal_inner {
  width: 100%;
  height: 100vh;
  display: flex;    
  align-content: center;      
  align-items: center;    
  justify-content: center;
}

/* モーダル内コンテンツ */
#diag_modal #diag_modal_content {
  background-color: #fff;
  margin: 50px auto;
  padding: 0;
  border: 1px solid #888;
  max-width: 1000px;
  width: 1000px;
  height: min(calc(500/1000*100vw),500px);
  position: relative;
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#diag_modal .diag_page.diag_bg {
  width: 100%;
  height: 100%;
  background-image: url(../img/diag/diag_bg_pc.jpg);
  background-size: cover;
  box-sizing: border-box;
  padding: calc(66/1000*100%) calc(110/1000*100%) 0;
  text-align: center;
}

#diag_modal .diag_page.diag_bg .diag_num {
  margin: 0 auto;
  line-height: 1;
  color: #a58c4f;
  font-size: min(calc(20/1000*100vw),20px);
  text-align: center;
  width: calc(490/816*100%);
  position: relative;
  font-style: italic;
  letter-spacing: min(calc(2/1000*100vw),2px);
  padding-bottom:  min(calc(18/1000*100vw),18px);
}
#diag_modal .diag_page.diag_bg .diag_num span {
  font-size: min(calc(30/1000*100vw),30px);
}
#diag_modal .diag_page.diag_bg .diag_num:before,
#diag_modal .diag_page.diag_bg .diag_num:after {
  content:"";
  display: block;
  padding-top: calc(4/490*100%);
  position: absolute;
  bottom:0;
}
#diag_modal .diag_page.diag_bg .diag_num:before {
  width: 100%;
  background-color: #706d6e;
  z-index:1;
}
#diag_modal .diag_page.diag_bg .diag_num:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #a58c4f;

  z-index: 2;
  height: 0;
  width: calc((490/490*100%) * var(--progress));
}
#diag_modal .diag_page.diag_bg h2 {
  width: calc(491/816*100%);
  margin: 0 auto calc(40/816*100%);
}
#diag_modal .diag_page.diag_bg h2.mb {

  margin: 0 auto calc(16/816*100%);
}

#diag_modal .diag_page input[type="checkbox"],
#diag_modal .diag_page input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
}

#diag_modal .diag_page button {
  all: unset;
  display: inline-block;
  cursor: pointer;
}


#diag_modal .diag_page form {
  display: flex;
  justify-content: space-between;
}
#diag_modal .diag_page form.col3 {
  width: calc(580/816*100%);
  margin: 0 auto;
}



#diag_modal .diag_page label {
  display: inline-block;
  width: calc(181/780*100%);
  line-height: 0;
  font-size: 0;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}
#diag_modal .diag_page form.col3 label {
  display: inline-block;
  width: calc(181/580*100%);
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}


#diag_modal .diag_page label span {
  text-align: center;
  display: block;
  line-height: 1;
  padding: 0.8em 0;
  font-size: min(calc(24/1000*100vw),24px);
  color: #a58c4f;
  background-color: #FFF;
  border: 1px solid #a58c4f;
  transition: all ease 0.2s;

}
#diag_modal .diag_page label span.lt {
  letter-spacing: -0.15em;
}
#diag_modal .diag_page label span.ht {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#diag_modal .diag_page input[type="checkbox"]:checked + span,
#diag_modal .diag_page input[type="radio"]:checked + span {
  color: #FFF;
  background-color: #a58c4f;
}

#diag_modal .diag_page .diag_next_btn {
  font-size: min(calc(16/1000*100vw),16px);
  background-color: rgba(155,153,152,0.8);
  color: #FFF;
  padding:0.4em 4em;
  margin-top: calc(50/816*100%);
  transition: all ease 0.2s;
  background-image: url(../img/diag/diag_btn_next_icon.png);
  background-repeat: no-repeat;
  background-position: right 10% top 50%;
}
#diag_modal .diag_page .diag_next_btn.active {
  background-color: #706d6e;
}

#diag_modal .diag_page .diag_btn_wrap {
  margin: calc(20/780*100%) auto 0;
  font-size: min(calc(14/1000*100vw),14px);
  text-align: center;
}
#diag_modal .diag_page .diag_btn_wrap .diag_reset_btn {
  margin-right: 1%;
}

#diag_modal .diag_page .diag_result_btn {
  font-size: min(calc(16/1000*100vw),16px);
  background-image: url(../img/diag/diag_btn_bg.png);
  background-color: rgba(255,255,255,0.5);
  background-blend-mode:lighten;
  background-size: cover;
  padding:0.4em 4em;
  margin-top: calc(50/816*100%);
  color: #FFF;
  cursor: pointer;
}
#diag_modal .diag_page .diag_result_btn.active {
  background-color: rgba(255,255,255,0);
}

/* 開いたとき */
#diag_modal #diag_modal_content.show {
  transform: scale(1);
  opacity: 1;
}


/* 閉じるボタン */
#diag_modal #diag_close_btn {
  position: absolute;
  top: 0;
  right: 0;
  padding:0;
  outline: none;
  border: none;
  cursor: pointer;
  width: 30px;
  z-index:2;
}

/* 最終ページ閉じるボタン */

#diag_modal .diag_page .diag_close_btn {
  position: absolute;
  top:87%;
  left:69.5%;
  background-color: rgba(169,165,163,0.7);
  padding:0.5em 2em 0.5em 1em;
  color: #FFF;
  background-image: url(../img/diag/diag_close_icon.png);
  background-repeat: no-repeat;
  background-position: right 10% top 55%;
  cursor: pointer;
  transition: all ease 0.2s;
  line-height: 1;
  font-size: min(calc(16/1000*100vw),16px);
}
#diag_modal .diag_page .diag_close_btn:hover {
  background-color: rgba(169,165,163,1); 
}
/* 購入ボタン風 */
#diag_modal .diag_purchase_btn {
  position: absolute;
  top:87%;
  left:80%;
  color: #fff;
  cursor: pointer;
  padding: 0.5em 3em;
  background-color: #000;
  transition: all ease 0.2s;
  background-image: url(../img/diag/diag_btn_cart.png),url(../img/diag/diag_btn_next_icon.png);
  background-repeat: no-repeat,no-repeat;
  background-position: left 10% top 50%,right 10% top 50%;
  background-size: 12% ,5%;
  line-height: 1;
  font-size: min(calc(16/1000*100vw),16px);
}
#diag_modal .diag_purchase_btn:hover {
  background-color: #a58c4f;
}
#diag_modal .counts {
  font-size: 16px;
line-height: 1;
text-align: left;
}


/* Liquid */

#diag_modal #diag_modal_content {
  height: min(calc(470/1000*100vw),500px);
}
/* 閉じるボタン */
#diag_modal #diag_close_btn {
  width:calc(30/1000*100%);

}

/* Smartphone */

@media (max-width:750px) {

  .pc_only {
    display: none;
  }
  
  .sp_only {
    display: block;
  }
  .btn-diagnosis {
    width: calc(574/750*100%);
    top: 0;
  }
  #diag_modal .diag_page { 
    display: none;
    position: relative;
   }
  /* モーダル全体の背景 */
  #diag_modal {
    width: 100%;
    box-sizing: border-box;
    padding:0 calc(30/750*100%);
  }
  
  /* モーダル内コンテンツ */
  #diag_modal #diag_modal_content {
    max-width: 690px;
    width: 100%;
    height: auto;
  }
  #diag_modal .diag_modal_inner {
    width: 100%;
    max-width: 690px;
    height: 100vh;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
  }
  #diag_modal .diag_page.diag_bg {
    background-image: url(../img/diag/diag_bg_sp.jpg);
    padding: calc(56/690*100%) calc(60/690*100%)  calc(20/690*100%);
  }
  
  #diag_modal .diag_page.diag_bg .diag_num {
    font-size: min(calc(24/750*100vw),24px);
    width: 100%;
    padding-bottom:  min(calc(20/750*100vw),20px);
  }
  #diag_modal .diag_page.diag_bg .diag_num span {
    font-size: min(calc(36/750*100vw),36px);
  }
  #diag_modal .diag_page.diag_bg .diag_num:before,
  #diag_modal .diag_page.diag_bg .diag_num:after {
    padding-top: calc(4/690*100%);
  }
  #diag_modal .diag_page.diag_bg .diag_num:before {
    width: 100%;
  }
  #diag_modal .diag_page.diag_bg .diag_num::after {
    /* SP時：ベース幅(400/690*100%) に進捗率を掛ける */
    width: calc((690/690*100%) * var(--progress));
  }
  
  #diag_modal .diag_page.diag_bg h2 {
    width: 100%;
    margin: 0 auto calc(40/690*100%);
  }
  #diag_modal .diag_page.diag_bg h2.mb {
  
    margin: 0 auto calc(35/690*100%);
  }

  #diag_modal .diag_page form {
    text-align: center;
    display: block;
    margin-bottom: calc(60/690*100%);
  }
  #diag_modal .diag_page form.col3 {
    text-align: center;
    width:100%;
    margin: 0 auto calc(190/690*100%);
  }

  #diag_modal .diag_page label {
    display: inline-block;
    width: calc(400/690*100%);
    line-height: 0;
    font-size: 0;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0 auto;
  }
  #diag_modal .diag_page form.col3 label {
    width: calc(400/690*100%);
  }
  #diag_modal .diag_page label:not(last-of-type) {
    margin-bottom: calc(40/690*100%);
  }
  
  #diag_modal .diag_page label:last-of-type {
    margin-bottom: 0;
  }
  
  #diag_modal .diag_page label span {
    display: block;
    line-height: 1;
    padding: 0.8em 0;
    font-size: min(calc(28/750*100vw),28px);
    color: #a58c4f;
    background-color: #FFF;
    border: 1px solid #a58c4f;
    transition: all ease 0.2s;
  }
  #diag_modal .diag_page label span.lt {
    letter-spacing: -0.15em;
  }
  #diag_modal .diag_page label span.ht {
    height: auto;
    display:block;
  }
  #diag_modal .diag_page .diag_next_btn {
    font-size: min(calc(24/750*100vw),24px);
    color: #FFF;
    padding:0.4em 3em;
    margin-top: 0;
    margin-bottom: calc(40/690*100%);
    background-size: 5% 20%;
  }

  #diag_modal .diag_page .diag_btn_wrap {
    margin: 0 auto 0;
    font-size: min(calc(20/750*100vw),20px);
  }
  #diag_modal .diag_page .diag_btn_wrap .diag_reset_btn {
    margin-right: 1.5%;
  }
  
  #diag_modal .diag_page .diag_result_btn {
    background-image: url(../img/diag/diag_btn_bg.png);
    background-color: rgba(255,255,255,0.5);
    background-blend-mode:lighten;
    background-size: cover;
    font-size: min(calc(24/750*100vw),24px);
    padding:0.5em 2em;
    margin-top: 0;
    margin-bottom: calc(40/690*100%);
    color: #FFF;
    cursor: pointer;
  }
  #diag_modal .diag_page .diag_result_btn.active {
    background-color: rgba(255,255,255,0);
  }
  
  /* 開いたとき */
  #diag_modal #diag_modal_content.show {
    transform: scale(1);
    opacity: 1;
  }
  
  
  /* 閉じるボタン */
  #diag_modal #diag_close_btn {
    position: absolute;
    top: 0;
    right: 0;
    padding:0;
    outline: none;
    border: none;
    cursor: pointer;
    width: calc(50/690*100%);
    z-index:2;
  }
  
  /* 最終ページ閉じるボタン */
  
  #diag_modal .diag_page .diag_close_btn {
    position: absolute;
    top:90%;
    left:7%;
    background-color: rgba(169,165,163,0.7);
    padding:0.6em 3em 0.6em 3em;
    color: #FFF;
    background-image: url(../img/diag/diag_close_icon.png);
    background-repeat: no-repeat;
    background-position: right 10% top 55%;
    cursor: pointer;
    transition: all ease 0.2s;
    font-size: min(calc(24/750*100vw),24px);
  }
  #diag_modal .diag_page .diag_close_btn:hover {
    background-color: rgba(169,165,163,1); 
  }
  /* 購入ボタン風 */
  #diag_modal .diag_purchase_btn {
    position: absolute;
    top:90%;
    left:43%;
    color: #fff;
    cursor: pointer;
    padding: 0.6em 5em;
    background-color: #000;
    transition: all ease 0.2s;
    background-image: url(../img/diag/diag_btn_cart.png),url(../img/diag/diag_btn_next_icon.png);
    background-repeat: no-repeat,no-repeat;
    background-position: left 22% top 50%,right 7% top 50%;
    background-size: 9% ,4%;
    font-size: min(calc(24/750*100vw),24px);
  }
  #diag_modal .diag_purchase_btn:hover {
    background-color: #a58c4f;
  }
  #diag_modal .counts {
    font-size: min(calc(16/750*100vw),16px);

  }
  

}