@charset "UTF-8";

body{overflow-y: scroll;}
/* 開く時の.bodyのアニメーション */
@keyframes modalwindow_body_in{
0%{transform:translateY(-20px);}
100%{transform:translateY(0px);}
}
@keyframes modalwindow_body_out{
0%{transform:translateY(0px);}
100%{transform:translateY(-20px);}
}
.modalwindow{
/* オーバーレイ＆スクロール領域になるレイヤー */
display:none;
position:fixed;
top:0;
left:0;
overflow:auto;
z-index:101;
width:100%;
/* スマホでスワイプして指を離すまでの間下部の背景が無くなるため余分に指定 */
height:calc(100% + 100px);
background:rgba(0, 0, 0, 0.5);
border-bottom:100px solid transparent;
cursor:pointer;
opacity:1;
}
.modalwindow.no_overlay_close{cursor:default;}
.modalwindow.lock .close_modal{background:#ccc;}

.modalwindow .body{
position:relative;
width:90%;
max-width:780px;
margin:20px auto;
background:#fff;
border-radius:4px;
cursor:default;
box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
transform:translateY(-20px);
animation:200ms modalwindow_body_out;
}
.zi{
position:relative;
width:100%;
max-width:700px;
height:100%;
margin:0 auto;
padding:30px;
}
.zi img{
max-width:700px;
padding:0;
}
.show2,.show3,.show4{
display:none;
}
#seko .zi h2{
width:100%;
margin:0 auto 5px;
padding:0;
font-size:17px;
font-weight:bold;
line-height:23px;
}
.sse{
width:100%;
margin:20px 0 0;
}
.sse li{
display:inline-block;
box-sizing:content-box;
width:25%;
min-width:100px;
border:solid 1px #fff;
}
.sse li:hover,.sse li:focus,.sse li:active{
border:solid 1px #666;
}
.sse li+li{margin-left:10px;}
.ki{margin-top:15px;}
button{
display:block;
cursor:pointer;
width:120px;
margin:30px auto 0;
padding:10px 30px;
color:#fff;
background-color:#a9a9a9;
border:solid 1px #a9a9a9;
text-align:center;
}
button:hover,button:focus,button:active{
color:#060606;
background-color:#fff;
border:solid 1px #a9a9a9;
}

@media screen and (max-width:700px){.zi{padding:20px;}}
@media screen and (max-width:480px){
.sse{margin-top:10px;}
.sse li{width:30%;min-width:0;}
.sse li+li{margin-left:5px;}
.ki{margin-top:10px;}
dl,dt,dd{display:block;width:100%;line-height:22px;}
dd{border-left:solid 1px #ededed;}
}

.modalwindow.is_visible .body{
transform:translateY(0px);
animation:400ms modalwindow_body_in;
}