.modal-content
{
position: fixed;
display: none;
z-index: 100000;
width: 100%;
margin: 0;
padding: 0;
}

.modal-content p
{
margin: 0;
padding: 0;
}


/***************************************************************
           画面サイズ1201px以上
***************************************************************/
@media (min-width: 1201px)
{
/*--------------------------------------------------------------
    料金を確認する
--------------------------------------------------------------*/
.modal-open
{
display: block;
width: 85%;
margin: 20px auto 0 auto;
padding: 10px 0;
background: #B22222;
border-radius: 10px;
color: #fff;
font-size: 18px;
letter-spacing: 2px;
text-align: center;
text-decoration: none;
}
.modal-open i
{
display: inline-block;
vertical-align: top;
padding: 0 10px 0 0;
font-size: 20px;
}
/*--------------------------------------------------------------
    閉じる
--------------------------------------------------------------*/
.modal-close i
{
position: absolute;
top: -200px;
right: 20px;
color: #fff;
font-size: 40px;
}
/*--------------------------------------------------------------
    領域
--------------------------------------------------------------*/
.modal-content ul
{
box-sizing: border-box;
font-size: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 100%;
}
/*--------------------------------------------------------------
    スクロールバー
--------------------------------------------------------------*/
.modal-content ul::-webkit-scrollbar
{
width: 0px;
}
.modal-content ul::-webkit-scrollbar-track
{
background: #444;
}
.modal-content ul::-webkit-scrollbar-thumb
{
background: #fff;
}
/*--------------------------------------------------------------
    リンク
--------------------------------------------------------------*/
.modal-content ul
{
font-size: 0;
}
.modal-content ul li
{
display: inline-block;
width: 20%;
vertical-align: top;
}
.modal-content ul li a
{
display: block;
padding: 20px 0;
background: #333;
border-color: #fff;
border-width: 1px;
border-style: solid;
color: #fff;
font-size: 14px;
letter-spacing: 2px;
text-align: center;
text-decoration: none;
}
.modal-content ul li a.miyagi
{
background: #FF0000;
}
.modal-content ul li a.fukushima
{
background: #008000;
}
.modal-content ul li a.akita
{
background: #0000FF;
}
.modal-content ul li a.tokyo
{
background: #FFA500;
}
.modal-content ul li a.kanagawa
{
background: #9ACD32;
}
.modal-content ul li a.saitama
{
background: #800080;
}
.modal-content ul li a.chiba
{
background: #FF69B4;
}
.modal-content ul li a.ibaraki
{
background: #008080;
}
.modal-content ul li a.tochigi
{
background: #191970;
}
.modal-content ul li a.gumma
{
background: #8B4513;
}
.modal-content ul li a.nagano
{
background: #6B8E23;
}
.modal-content ul li a.aichi
{
background: #87CEEB;
}
.modal-content ul li a.ishikawa
{
background: #0B4C5F;
}
.modal-content ul li a.kyoto
{
background: #F4A460;
}
.modal-content ul li a.osaka
{
background: #393B0B;
}
.modal-content ul li a.hyogo
{
background: #6A5ACD;
}
.modal-content ul li a.tottori
{
background: #FA8072;
}
.modal-content ul li a.okayama
{
background: #00B400;
}
.modal-content ul li a.hiroshima
{
background: #4682B4;
}
.modal-content ul li a.yamaguchi
{
background: #FF6347;
}
.modal-content ul li a.kagawa
{
background: #8A4B08;
}
.modal-content ul li a.fukuoka
{
background: #2D4902;
}
.modal-content ul li a.niigata
{
background: #556b2f;
}
}


/***************************************************************
           画面サイズ737px以上1200px以下
***************************************************************/
@media (min-width: 737px) and (max-width: 1200px)
{
/*--------------------------------------------------------------
    料金を確認する
--------------------------------------------------------------*/
.modal-open
{
display: block;
width: 90%;
margin: 20px auto 0 auto;
padding: 10px 0;
background: #B22222;
border-radius: 5px;
color: #fff;
font-size: 14px;
letter-spacing: 2px;
text-align: center;
text-decoration: none;
}
.modal-open i
{
display: inline-block;
vertical-align: top;
padding: 0 10px 0 0;
font-size: 16px;
}
/*--------------------------------------------------------------
    料金を確認する
--------------------------------------------------------------*/
.modal-open
{
display: block;
width: 90%;
margin: 20px auto 0 auto;
padding: 10px 0;
background: #B22222;
border-radius: 10px;
color: #fff;
font-size: 20px;
letter-spacing: 4px;
text-align: center;
text-decoration: none;
}
/*--------------------------------------------------------------
    閉じる
--------------------------------------------------------------*/
.modal-close i
{
position: absolute;
top: -350px;
right: 20px;
color: #fff;
font-size: 30px;
}
/*--------------------------------------------------------------
    領域
--------------------------------------------------------------*/
.modal-content ul
{
box-sizing: border-box;
font-size: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 100%;
}
/*--------------------------------------------------------------
    スクロールバー
--------------------------------------------------------------*/
.modal-content ul::-webkit-scrollbar
{
width: 0px;
}
.modal-content ul::-webkit-scrollbar-track
{
background: #444;
}
.modal-content ul::-webkit-scrollbar-thumb
{
background: #fff;
}
/*--------------------------------------------------------------
    画像
--------------------------------------------------------------*/
.modal-content ul li
{
display: inline-block;
width: 20%;
vertical-align: top;
padding: 0;
}
.modal-content ul li img
{
display: block;
width: 100%;
}
/*--------------------------------------------------------------
    リンク
--------------------------------------------------------------*/
.modal-content ul
{
font-size: 0;
text-align: left;
box-sizing: border-box;
}
.modal-content ul li
{
display: inline-block;
width: 50%;
vertical-align: middle;
box-sizing: border-box;
background: #333;
border-color: #fff;
border-width: 1px;
border-style: solid;
}
.modal-content ul li a
{
display: block;
padding: 20px 0;
color: #fff;
font-size: 14px;
letter-spacing: 2px;
line-height: 20px;
text-align: center;
text-decoration: none;
}
.modal-content ul li a.miyagi
{
background: #FF0000;
}
.modal-content ul li a.fukushima
{
background: #008000;
}
.modal-content ul li a.akita
{
background: #0000FF;
}
.modal-content ul li a.tokyo
{
background: #FFA500;
}
.modal-content ul li a.kanagawa
{
background: #9ACD32;
}
.modal-content ul li a.saitama
{
background: #800080;
}
.modal-content ul li a.chiba
{
background: #FF69B4;
}
.modal-content ul li a.ibaraki
{
background: #008080;
}
.modal-content ul li a.tochigi
{
background: #191970;
}
.modal-content ul li a.gumma
{
background: #8B4513;
}
.modal-content ul li a.nagano
{
background: #6B8E23;
}
.modal-content ul li a.aichi
{
background: #87CEEB;
}
.modal-content ul li a.ishikawa
{
background: #0B4C5F;
}
.modal-content ul li a.kyoto
{
background: #F4A460;
}
.modal-content ul li a.osaka
{
background: #393B0B;
}
.modal-content ul li a.hyogo
{
background: #6A5ACD;
}
.modal-content ul li a.tottori
{
background: #FA8072;
}
.modal-content ul li a.okayama
{
background: #00B400;
}
.modal-content ul li a.hiroshima
{
background: #4682B4;
}
.modal-content ul li a.yamaguchi
{
background: #FF6347;
}
.modal-content ul li a.kagawa
{
background: #8A4B08;
}
.modal-content ul li a.fukuoka
{
background: #2D4902;
}
}


/***************************************************************
           画面サイズ736px以下
***************************************************************/
@media (min-width: 0px) and (max-width: 736px)
{
/*--------------------------------------------------------------
    料金を確認する
--------------------------------------------------------------*/
.modal-open
{
display: block;
width: 90%;
margin: 20px auto 0 auto;
padding: 10px 0;
background: #B22222;
border-radius: 5px;
color: #fff;
font-size: 14px;
letter-spacing: 2px;
text-align: center;
text-decoration: none;
}
.modal-open i
{
display: inline-block;
vertical-align: top;
padding: 0 10px 0 0;
font-size: 16px;
}
/*--------------------------------------------------------------
    閉じる
--------------------------------------------------------------*/
.modal-close i
{
position: absolute;
top: -220px;
right: 20px;
color: #fff;
font-size: 30px;
}
/*--------------------------------------------------------------
    領域
--------------------------------------------------------------*/
.modal-content ul
{
box-sizing: border-box;
font-size: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 100%;
}
/*--------------------------------------------------------------
    スクロールバー
--------------------------------------------------------------*/
.modal-content ul::-webkit-scrollbar
{
width: 0px;
}
.modal-content ul::-webkit-scrollbar-track
{
background: #444;
}
.modal-content ul::-webkit-scrollbar-thumb
{
background: #fff;
}
/*--------------------------------------------------------------
    リンク
--------------------------------------------------------------*/
.modal-content ul
{
font-size: 0;
text-align: left;
}
.modal-content ul li
{
display: inline-block;
width: 25%;
vertical-align: middle;
background: #333;
border-color: #fff;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
}
.modal-content ul li a
{
height: 60px;
padding: 0 0px;
color: #fff;
font-size: 14px;
line-height: 20px;
text-align: center;
text-decoration: none;
word-break: break-all;
display: -ms-grid;
display: grid;
place-items: center;
}
.modal-content ul li a.miyagi
{
background: #FF0000;
}
.modal-content ul li a.fukushima
{
background: #008000;
}
.modal-content ul li a.akita
{
background: #0000FF;
}
.modal-content ul li a.tokyo
{
background: #FFA500;
}
.modal-content ul li a.kanagawa
{
background: #9ACD32;
}
.modal-content ul li a.saitama
{
background: #800080;
}
.modal-content ul li a.chiba
{
background: #FF69B4;
}
.modal-content ul li a.ibaraki
{
background: #008080;
}
.modal-content ul li a.tochigi
{
background: #191970;
}
.modal-content ul li a.gumma
{
background: #8B4513;
}
.modal-content ul li a.nagano
{
background: #6B8E23;
}
.modal-content ul li a.aichi
{
background: #87CEEB;
}
.modal-content ul li a.ishikawa
{
background: #0B4C5F;
}
.modal-content ul li a.kyoto
{
background: #F4A460;
}
.modal-content ul li a.osaka
{
background: #393B0B;
}
.modal-content ul li a.hyogo
{
background: #6A5ACD;
}
.modal-content ul li a.tottori
{
background: #FA8072;
}
.modal-content ul li a.okayama
{
background: #00B400;
}
.modal-content ul li a.hiroshima
{
background: #4682B4;
}
.modal-content ul li a.yamaguchi
{
background: #FF6347;
}
.modal-content ul li a.kagawa
{
background: #8A4B08;
}
.modal-content ul li a.fukuoka
{
background: #2D4902;
}
}


@media (min-width: 501px) and (max-width: 736px)
{
    .modal-content ul {
        height: 400px;
    }
}


.modal-overlay
{
z-index: 10000;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.75);
}

.modal-close
{
color: #00f;
text-decoration: underline;
text-align: center;
}

.modal-close:hover
{
cursor: pointer;
color: #f00;
}