@charset "utf-8";
/* ------------------------------------------------------------ modal */
/* #modal{ background: rgb(0,0,0,0.5); } */
.modal_html {
  width: 900px;
  max-height: 85%;
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal_html::-webkit-scrollbar {
  display: none;
}
.modal_inner {
  border: 1px solid #c8113d;
  border-radius: 10px;
  padding: 60px 50px 70px;
  overflow-y: scroll;
  scrollbar-width: none;
  height: 700px;
}

#aichi .modal_inner,
#shizuoka .modal_inner,
#mie .modal_inner,
#gifu .modal_inner{
  border: 1px solid #de8b54;
}
#osaka .modal_inner,
#kyoto .modal_inner,
#hyogo .modal_inner,
#shiga .modal_inner,
#nara .modal_inner,
#wakayama .modal_inner{
  border: 1px solid #dfb33f;
}
#okayama .modal_inner,
#fukuoka .modal_inner,
#kagoshima .modal_inner{
  border: 1px solid #a9c63f;
}

.modal_html h2{
  width: 150px;
  border-radius: 25px;
  background: #c8113d;
  font-weight: 600;
  font-size: 2.0rem;
  letter-spacing: 0.2em;
  text-align: center;
  color: #fff;
  margin: 0 auto;
  padding: 10px 0;
}
#aichi h2,
#shizuoka h2,
#mie h2,
#gifu h2{
  background: #de8b54;
}
#osaka h2,
#kyoto h2,
#hyogo h2,
#shiga h2,
#nara h2,
#wakayama h2{
  background: #dfb33f;
}
#okayama h2,
#fukuoka h2,
#kagoshima h2{
   background: #a9c63f;
}

.modal_html ul {
  ;
  padding: 30px 0 0;
}
.modal_html ul li {
  float: left;
  width: 29%;
  min-height: 180px;
  margin: 0 50px 0 0;
}
.modal_html ul li:nth-of-type(3n) {
  margin: 0;
}

.modal_html ul li h3{
  padding: 0 0 10px;
  font-size: 18px;
  color: #c8113d;
  font-weight: 800;
  line-height: 150%;
  border-bottom: 1px solid #c8113d;
}
#aichi ul li h3,
#shizuoka ul li h3,
#mie ul li h3,
#gifu ul li h3{
  color: #de8b54;
  border-bottom: 1px solid #de8b54;
}
#osaka ul li h3,
#kyoto ul li h3,
#hyogo ul li h3,
#shiga ul li h3,
#nara ul li h3,
#wakayama ul li h3{
  color: #dfb33f;
  border-bottom: 1px solid #dfb33f;
}
#okayama ul li h3,
#fukuoka ul li h3,
#kagoshima ul li h3{
  color: #a9c63f;
  border-bottom: 1px solid #a9c63f;
}

.modal_html ul li p {
  line-height: 160%;
  font-size: 1.4rem;
  margin-top: 15px;
}
/* close_btn */
.modal_html .box {
  position: relative;
}
.modal_html .close_btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 80px;
  color: #e40057;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {
  /* ------------------------------------------------------------ modal */
  .modal_html{
  width: 90%;
  max-height: auto;
  height: 400px;
  padding: 0 5% 40px;
  border-radius: 10px;
}
  .modal_html h2 {
  }
  .modal_inner {
  height: 400px;
  padding: 20px;
}
  .modal_html ul {
    ;
    padding: 0;
  }
  .modal_html ul li {
    width: 100%;
    min-height: auto;
    margin: 0;
    padding: 10px 0;
  }
  .modal_html ul li:nth-of-type(2), .modal_html ul li:nth-of-type(3) {
    border-top: none;
  }
  .modal_html ul li h3 {
    padding: 0 0 5px;
    font-size: 15px;
  }
  .modal_html ul li p {
    font-size: 12px;
  }
}