@charset "utf-8";
/* CSS Document */

#onestop_keyvj_box { background-image:url(../image_page/onestop/onestop_01.jpg); background-repeat: no-repeat; background-size:cover; background-position: center; text-align:center; padding:17% 0 16% 0; margin-bottom:3%; }
#onestop_keyvj_box .inner { width:100%; max-width:1040px; margin:0 auto;}
#onestop_keyvj_box .inner h2 { background:none; color:#FFF; font-size:calc(20px + 1vw); margin-bottom:1%; line-height:calc(36px + 1vw);}

/* PC */
#main_contents .onestop_wrap { width:100%; max-width:1040px; margin:0 auto 4% auto;}
#main_contents .onestop_wrap .inner { width:96%; max-width:1040px; margin:0 auto 5% auto; text-align:center;}
#main_contents .onestop_wrap .inner h3 { font-size:calc(16px + 1vw); line-height:calc(24px + 1vw); margin-bottom:1%; text-align:center; margin-bottom:2%; }
#main_contents .onestop_wrap .inner h4 { font-size:calc(8px + 1vw); line-height:calc(24px + 1vw);text-align:center; }

#main_contents .onestop_wrap .inner p { text-align:left; line-height:calc(20px + 0.5vw);}
#main_contents .onestop_wrap .inner .onestop_02 { float:left; margin-right:2%; margin-bottom:5%; }

#main_contents .onestop_wrap .inner h3.three_merit_tit { text-align:left; font-size:calc(8px + 1vw); line-height:calc(24px + 1vw); margin-bottom:1%; }
#main_contents .onestop_wrap .inner h3.three_merit_tit img { height:2.4vw; width:auto; margin-top:-0.5vw; margin-right:1%; }
#main_contents .onestop_wrap .inner p.three_merit_text { text-align:left; font-size:calc(14px + 0.2vw); line-height:calc(22px + 0.2vw);margin-bottom:5%; }

/* mod_panel
-----------------------------------------*/
#main_contents .mod_panel {
 margin: 0 0 3px 0;
}

#main_contents .mod_panel .panelTitle a img { width:auto; height:2.4vw; }

#main_contents .mod_panel .panelTitle a{
text-align:left;
 display: block;
 background-color: #d7d7d7;
 padding: 0.5vw 1vw;
 position: relative;
 color: #000;
 border: 1px solid #c1c1c1;
 text-decoration: none;
 font-size:calc(16px + 0.2vw);
 line-height:calc(22px + 0.2vw);
 margin:0 0 1% 0;}
 
#main_contents .mod_panel .panelTitle a:hover { background:#FFD0D1; color:#c20000; }
#main_contents .mod_panel .panelTitle a:after {
 position: absolute;
 top: 30%;
 right: 10px;
 color: #c20000;
 content: " \f0ab";
 font-family: FontAwesome;
 font-size:1.6em;
}
#main_contents .mod_panel .panelTitle.open a:after {
 content: " \f0ab";
 font-family: FontAwesome;
}

#main_contents .mod_panel_inner {
 padding: 0 0 0 0;
}
#main_contents .mod_panel_inner p{ 
margin-bottom:3%;
}
#main_contents .mod_panel_inner.close {
 display: none;
}
#main_contents .mod_panel_inner_btn p.closebtn {
 display: block;
 cursor: pointer;
 padding: 15px 20px;
 text-align: center;
}
#main_contents .mod_panel_inner_btn p.closebtn a {
 background-color: #CCC;
 color: #666;
 text-decoration: none;
 border-radius: 4px;
 display: inline-block;
 padding: 5px 10px 7px 10px;
}
#main_contents .mod_panel_inner_btn p.closebtn a::before {
 content: " ";
 display: inline-block;
 font-family: FontAwesome;
 font-size: 120%;
 margin: 0 10px 0 0;
}

/* SP */
#sp_main_contents .onestop_wrap { width:100%; max-width:1040px; margin:0 auto 4% auto;}
#sp_main_contents .onestop_wrap .inner { width:96%; max-width:1040px; margin:0 auto 5% auto; text-align:center;}
#sp_main_contents .onestop_wrap .inner h3 { font-size:calc(12px + 0.2vw); line-height:calc(20px + 1vw); margin-bottom:1%; text-align:center; margin-bottom:2%; }
#sp_main_contents .onestop_wrap .inner h4 { font-size:calc(9px + 0.5vw); line-height:calc(18px + 0.5vw);text-align:center; }


#sp_main_contents .onestop_wrap .inner p { text-align:left; line-height:calc(20px + 0.5vw);}
#sp_main_contents .onestop_wrap .inner .onestop_02 { float:left; margin-right:2%; margin-bottom:5%; }

#sp_main_contents .onestop_wrap .inner h3.three_merit_tit { text-align:left; font-size:calc(12px + 1vw); line-height:calc(18px + 1vw); margin-bottom:1%; height:14vw; }
#sp_main_contents .onestop_wrap .inner h3.three_merit_tit img { height:10vw; width:auto; margin-top:-0.5vw; margin-right:1%; }
#sp_main_contents .onestop_wrap .inner p.three_merit_text { text-align:left; font-size:calc(12px + 0.2vw); line-height:calc(18px + 0.2vw);margin-bottom:5%; }

/* mod_panel
-----------------------------------------*/
#sp_main_contents .mod_panel {
 margin: 0 0 3px 0;
}


#sp_main_contents .mod_panel .panelTitle a img { width:auto; height:10vw; }

#sp_main_contents .mod_panel .panelTitle a{
text-align:left;
 display: block;
 background-color: #d7d7d7;
 padding: 0.5vw 1vw;
 position: relative;
 color: #000;
 border: 1px solid #c1c1c1;
 text-decoration: none;
 font-size:calc(12px + 0.2vw);
 line-height:calc(14px + 0.2vw);
 margin:0 0 1% 0;}
 
#sp_main_contents .mod_panel .panelTitle a:hover { background:#FFD0D1; color:#c20000; }
#sp_main_contents .mod_panel .panelTitle a:after {
 position: absolute;
 top: 30%;
 right: 10px;
 color: #c20000;
 content: " \f0ab";
 font-family: FontAwesome;
 font-size:1.6em;
}
#sp_main_contents .mod_panel .panelTitle.open a:after {
 content: " \f0ab";
 font-family: FontAwesome;
}

#sp_main_contents .mod_panel_inner {
 padding: 0 0 0 0;
}
#sp_main_contents .mod_panel_inner p{ 
margin-bottom:3%;
}
#sp_main_contents .mod_panel_inner.close {
 display: none;
}
#sp_main_contents .mod_panel_inner_btn p.closebtn {
 display: block;
 cursor: pointer;
 padding: 15px 20px;
 text-align: center;
}
#sp_main_contents .mod_panel_inner_btn p.closebtn a {
 background-color: #CCC;
 color: #666;
 text-decoration: none;
 border-radius: 4px;
 display: inline-block;
 padding: 5px 10px 7px 10px;
}
#sp_main_contents .mod_panel_inner_btn p.closebtn a::before {
 content: " ";
 display: inline-block;
 font-family: FontAwesome;
 font-size: 120%;
 margin: 0 10px 0 0;
}

.mod_panel .panelTitle span.ptsp { font-size:calc(8px + 0.2vw);}