@charset "utf-8";
/* ------------------------------------------------------------ modal */
/* #modal{ background: rgb(0,0,0,0.5); } */

.modal_html{ overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; width: 1100px; max-height: 90%; padding: 60px 50px 70px; box-sizing: border-box; background: #f8f8f2; border-radius: 30px; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.modal_html::-webkit-scrollbar{ display:none; }

.modal_html h2{ padding: 80px 80px 40px;  font-size: 30px; text-align: center; background: url(../images/modal_ttl.png) center no-repeat; }

.modal_html ul{; padding: 30px 0 0; }
.modal_html ul li{ float: left; width: 300px; min-height: 190px; margin: 0 50px 0 0; padding: 20px 0; border-bottom: 1px solid #e40057; }
.modal_html ul li:nth-of-type(3n){ margin: 0; }
.modal_html ul li:first-of-type,
.modal_html ul li:nth-of-type(2),
.modal_html ul li:nth-of-type(3){ border-top: 1px solid #e40057; }

.modal_html ul li h3{ padding: 0 0 10px; font-size: 20px; color: #e40057; font-weight: 800; line-height: 150%;  }
.modal_html ul li p{ line-height: 160%; }

/* 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: 90vh; padding: 30px 5% 40px; border-radius: 10px; }
.modal_html h2{ padding: 24% 0 17%; font-size: 19px; background: url(../images/modal_ttl.png) center/100% no-repeat; width: 80%; margin: 0 auto; }
.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; }



}