@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/************************************************************
 * modal
 ************************************************************/

.modal { 
  font-size:14px;
  line-height:20px;
  position:fixed;
  display:none;
  z-index:9999;
  top:50%;
  left:50%;
  width:640px;
  margin:-190px 0 0 -320px;
  overflow:visible!important;
}

@media screen and (max-width: 820px) {
.modal{
  width:90%;
  left:5%;
  top:10px;
  margin:0 0 0 0;
}
}

@media screen and (max-width: 568px) {
.modal{
  width:96%;
  top:10px;
  left:2%;
}
}

.modal_box { 
  width:100%;
  position: relative;
  box-sizing: border-box;
  padding:4% 35px;
  color:#FFF;
  text-align:center;
  background-color: rgb(51, 58, 86, 1);
  margin-bottom:10px;
}

@media screen and (max-width: 568px) {
.modal_box { 
  box-sizing: border-box;
  padding:20px 15px;
}
}

@media screen and (max-width: 400px) {
.modal_box { 
  box-sizing: border-box;
  padding:20px 10px;
}
}

.modal_box .dname{
  font-size:2em;
  margin-bottom:3%;
  line-height:1.5;
  font-family: 'Zen Antique', serif;
  font-weight:400;
  text-shadow:1px 1px 1px #000;
}

@media screen and (max-width: 820px) {
.modal_box .dname{
  font-size:1.6em;
}
}

@media screen and (max-width: 568px) {
.modal_box .dname{
  margin-bottom:10px;
}
}

.modal-syousai{
  width:100%;
}

.modal_icon{
  width:25%;
  display:inline-block;
  vertical-align:middle;
}

@media screen and (max-width: 568px) {
.modal_icon{
  width:100%;
  margin:2% auto;
  max-width:120px;
}
}

.modal_icon img{
  width:100%;
  height:auto;
}

.modal_text{
  width:75%;
  box-sizing: border-box;
  padding-left:5%;
  display:inline-block;
  vertical-align:middle;
  text-align: left;
}

@media screen and (max-width: 568px) {
.modal_text{
  width:100%;
  padding:0;
  display:block;
  text-align: center;
}
}

.modal_text .brt-ttl{
  font-size:2em;
  line-height:1.5;
  font-family: 'Zen Antique', serif;
  font-weight:400;
  text-shadow:1px 1px 1px #000;
  letter-spacing: 0.05em;
}

.modal_text .brt-txt{
  font-size:1.1em;
  margin-top:2%;
  line-height:1.8;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
  text-shadow:1px 1px 1px #000;
}

@media screen and (max-width: 568px) {
.modal_text .brt-txt{
  margin-top:10px;
  font-size:1em;
}
}

.modal_box .close_icn{
  position: absolute;
  top: -15px;
  right: -15px;
  width:30px;
  height:30px;
}

@media screen and (max-width: 568px) {
.modal_box .close_icn{
  top: -8px;
  right: -8px;
}
}

.modal_box .close_icn img{
  width:100%;
  height:auto;
}

.modal a { cursor:pointer; }
.modal a:hover { opacity: 0.7; }

.btn_close{
  text-align:center;
  margin:0 auto;
  width:63px;
  height:auto;
}

.btn_close img{
  width:100%;
  height:auto;
}

.cpn_bt{
  text-align: center;
  margin-top:20px;
  margin-bottom:15px;
  font-size:14px;
}

@media screen and (max-width: 568px) {
.cpn_bt{
  font-size:13px;
}
}

.cpn_bt a{background-color:#FFF;color:#333A56;text-decoration:none;padding:8px 20px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.cpn_bt a:hover {opacity: 0.7;text-decoration: none;}