@charset "utf-8";
/* ============================================================================================== */
/* modal                                                                                          */
/* ============================================================================================== */
#modal {
 padding: 30px;
}
#modal h1 {
 font-size: 30px;
 font-weight: bold;
 margin: 0 0 15px;
}
#modal .sp {
 display: none !important;
}
@media screen and (max-width: 767px) {
 #modal {
  padding: 3vw;
 }
 #modal h1 {
  font-size: 6vw;
 }
 #modal img {
  width: 100%;
 }
 #modal .sp {
  display: block !important;
 }
 #modal .pc {
  display: none !important;
 }
}
#modal .tab_contents_wrapper {
 position: relative;
 width: 900px;
 text-align: left;
 margin: 0 auto 0 0;
}
#modal .tab_contents_wrapper .recipe_txt {
 position: absolute;
 top: 15px;
 right: 0;
 width: 440px;
 height: 500px;
 padding: 30px 35px;
 background: #E68012;
 box-sizing: border-box;
}
@media screen and (max-width: 767px) {
 #modal .tab_contents_wrapper {
  width: 100%;
  margin: 0 auto 0;
 }
 #modal .tab_contents_wrapper .recipe_txt {
  position: relative;
  width: 85vw;
  height: 90vw;
  padding: 3vw 4vw 10vw;
  margin: -10vw auto 3vw;
 }
}
/*----modal tab-----*/
#modal .tab_contents_wrapper ul.tabs {
 display: -webkit-flex;
 display: flex;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 -webkit-align-items: flex-start;
 align-items: flex-start;
 padding: 6px 0 0;
 margin: 0 auto 16px;
 border-bottom: 1px solid #fff;
}
#modal .tab_contents_wrapper ul.tabs li {
 position: relative;
 list-style: none;
 width: 173px;
 height: 40px;
 padding-left: 16px;
 background: #ECB580;
 color: #ffffff;
 font-size: 18px;
 font-weight: bold;
 line-height: 40px;
 cursor: pointer;
 box-sizing: border-box;
}
#modal h4 {
 line-height: 2.5;
 margin: 0;
 padding: 0;
}
#modal .tab_contents_wrapper ul.tabs li.active {
 background: #ffff;
 color: #E68012;
 cursor: default;
}
#modal .tab_contents_wrapper ul.tabs li::after {
 content: "";
 width: 7px;
 height: 100%;
 background-image: url('../../images/tab_icon_off.svg');
 background-position: center center;
 background-size: 100% auto;
 background-repeat: no-repeat;
 pointer-events: none;
 position: absolute;
 top: 0;
 right: 14px;
}
#modal ul.tabs li.active::after {
 width: 12px;
 background-image: url('../../images/tab_icon_on.svg');
 right: 11px;
}
@media screen and (max-width: 767px) {
 #modal .tab_contents_wrapper ul.tabs {
  padding-top: 0;
  margin: 3vw auto 3vw;
  border-bottom-width: 0.2vw;
 }
 #modal .tab_contents_wrapper ul.tabs li {
  width: 40vw;
  height: 9.3vw;
  padding-left: 4vw;
  font-size: 4vw;
  line-height: 9.3vw;
 }
 #modal .tab_contents_wrapper ul.tabs li.active {}
 #modal .tab_contents_wrapper ul.tabs li::after {
  width: 1.56vw;
  right: 3.3vw;
 }
 #modal .tab_contents_wrapper ul.tabs li.active::after {
  width: 2.8vw;
  right: 2.6vw;
 }
}
/*----contents-----*/
#modal .tab_contents_wrapper .contents {
 color: #fff;
 /*height: 80%;*/
 height: 68%;
 overflow-y: auto;
}
#modal .tab_contents_wrapper .contents::-webkit-scrollbar {
 width: 5px;
}
#modal .tab_contents_wrapper .contents::-webkit-scrollbar-thumb {
 background: rgba(25, 25, 25, 0.5);
 border-radius: 3px;
}
#modal .tab_contents_wrapper .contents > div {
 display: none;
 padding-right: 5px;
}
#modal .tab_contents_wrapper .contents > div.active {
 display: block;
}
#modal .tab_contents_wrapper .contents dl {
 display: flex;
 border-bottom: 1px #fff dotted;
}
#modal .tab_contents_wrapper .contents dl:first-child {
 margin-top: 0;
}
#modal .tab_contents_wrapper .contents dl dt {
 width: 70%;
 padding: 5px 0;
}
#modal .tab_contents_wrapper .contents dl dd {
 width: 30%;
 text-align: right;
 padding: 5px 0;
}
#modal .tab_contents_wrapper .contents .howto div {
 text-indent: -16px;
 padding: 5px 0 5px 16px;
 border-bottom: 1px #fff dotted;
}
#modal .tab_contents_wrapper .contents .howto .notes {}
#modal .tab_contents_wrapper .contents .btn_tuginavi {
 display: block;
 position: absolute;
 bottom: 20px;
}
@media screen and (max-width: 767px) {
 #modal .tab_contents_wrapper .contents > div {}
 #modal .tab_contents_wrapper .contents > div.active {}
 #modal .tab_contents_wrapper .contents .btn_tuginavi {
  position: static;
  width: 74.26vw;
  margin: 2vw auto 0;
 }
}