@charset "UTF-8";

#modal_overlay{
z-index:999;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:120%;
background-color:#000;
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter:"alpha(opacity=80)";
}

/* #modal_overlay #message_modal
======================================================================== */
#message_modal{
width:720px;
z-index:1000;
position:fixed;
display:none;
background:#fff;
}


/* #message_modal .modal_box
==================================== */
#message_modal .modal_box{
padding:30px;
text-align:center;
}

/* #message_modal .modal_box .close_btn
-------------------------------------------------- */
#message_modal .modal_box .close_btn i{
display:block;text-indent:100%;white-space:nowrap;overflow:hidden;line-height:0;
cursor:pointer;
}

#message_modal .modal_box .close_btn i.hover{opacity:0.7;filter:alpha(opacity=70);-ms-filter:"alpha(opacity=70)";}


/* #message_modal .modal_box .close_btn.hd */
#message_modal .modal_box .close_btn.hd{
margin:-30px -30px 0 0;
}

#message_modal .modal_box .close_btn.hd i:after{content:""; clear:both; display:block;}

#message_modal .modal_box .close_btn.hd i{
float:right;
width:35px;
height:35px;
background:url(/factory/kyoto/top/parts_modal/img/close_btn_hd.png) no-repeat 0 0;
}

/* #message_modal .modal_box .close_btn.ft */
#message_modal .modal_box .close_btn.ft{
width:180px;
margin:0 auto;
}

#message_modal .modal_box .close_btn.ft i{
width:180px;
height:40px;
background:url(/factory/kyoto/top/parts_modal/img/close_btn_ft.png) no-repeat 0 0;
}


/* #message_modal .modal_box dl
==================================== */
#message_modal .modal_box dl dt{
line-height:0;
}

#message_modal .modal_box dl dt i{
margin:35px 0 30px 0;
display:block;text-indent:100%;white-space:nowrap;overflow:hidden;line-height:0;
width:650px;
height:250px;
background:url(../img/message_modal_ph_pc.png) no-repeat 0 0;
}
.webp #message_modal .modal_box dl dt i{
margin:35px 0 30px 0;
display:block;text-indent:100%;white-space:nowrap;overflow:hidden;line-height:0;
width:650px;
height:250px;
background:url(../img/message_modal_ph_pc.webp) no-repeat 0 0;
}

#message_modal .modal_box dl dd{
margin-left: 0;
font-size:13px;
line-height:150%;
color:#000;
text-align:left;
padding:0 3px;
}

#message_modal .modal_box dl dd.name{
margin:5px 0 35px 0;
text-align:right;
}

#message_modal .modal_box dl dd.name i{
padding:0 0 0 1em;
}





#message_modal .modal_box dl dd.name .u400 {
	display: none;
}


/* SP
==================================== */
@media screen and (max-width:767px){

#message_modal{width:90%;max-height:80%;overflow-y:scroll;overflow-x:hidden;}
#message_modal::-webkit-scrollbar{width:6px;background:#eee;}
#message_modal::-webkit-scrollbar-thumb{background:#ffcc00;border-radius:4px;}

#message_modal .modal_box{padding:12px;}
#message_modal .modal_box .close_btn.hd{display:none;}
#message_modal .modal_box dl dt i{display:none;}
.webp #message_modal .modal_box dl dt i{display:none;}
#message_modal .modal_box dl dt img{margin:0 0 15px 0;width:100%;height:auto;}
#message_modal .modal_box dl dd.name{margin-bottom:15px;}

}

@media screen and (max-width:499px){
	#message_modal .modal_box dl dd.name i {
		display: block;
	}
}
@media screen and (max-width:399px){
	#message_modal .modal_box dl dd.name .u400 {
		display: block;
	}
}