@charset "utf-8";

/*========================

tb_2nd_template.css

========================*/
@media (min-width: 769px) and (max-width: 1080px) {

#main {
min-width:calc(100% - 290px);
row-gap:30px;
}

header.scroll_fixed {
padding:0;
top:0;
}

header.scroll_fixed #header_cont {
border-radius:0 0 10px 0;
flex: 0 0 290px;
}

#left_nav {
display:block;
width:290px;
}

#left_nav.close {
display:none;
flex:0 1 290px;
width:0;
}

#left_nav #left_nav_menu .bigginers {
margin:0 0 0 auto;
padding:0;
width:calc(100% - 80px);
}

#left_nav #left_nav_menu {
/*height:auto;*/
/*overflow-y:auto;*/
/*position:absolute;*/
top:auto;
-webkit-transform: translateX(0);
transform: translateX(0);
transition: all .3s linear;
opacity:1;

height: 100%;
overflow-y: scroll;
}

#left_nav.close #left_nav_menu {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
transition: all .3s linear;
opacity:0;
}



#container.close_left_nav #main {
min-width:100%;
width:100%;
}

#container #open_close_btn {
height:43px;
background-color:var(--white);
border-radius:0 20px 20px 0;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
display:flex;
justify-content:center;
padding:15px;
position:fixed;
top:110px; 
width:60px; 
z-index:5;
}

#container #open_close_btn:hover {
background-color:var(--yellow);
cursor:pointer;
}

#container #open_close_btn:after {
content:"\f053";
color:var(--blue);
font-family:var(--icon);
font-size: calc(1.0rem + ((1vw - 0.48rem) * 0.6944));
font-weight:600;
left:23px;
top:50%;
margin-top:-6px;
position:absolute;
z-index:3;
}

#container.close_left_nav #open_close_btn:after {
content:"\f054";
}

#container #open_close_btn:hover:after {
color:var(--blue);
}


#main #main_cont {
/*padding:120px 0 0;*/
padding:0;
width:100%;
}

#main_cont .section {
padding:30px 20px 20px;
width: calc(100% - 15px);
}

#main_cont .section.pattern_a .box .section_cont {
padding: 30px 20px 30px;
}

/*---------------------------------------------
head_info
---------------------------------------------*/
/*--- motor ---*/

#main.motor #head_info #head_info_left figure {
width: 20vw;
max-width:180px;
}

#main.motor #head_info #head_info_cont #head_info_left .mark {
bottom:13vw;
right:80px;
}

#main.motor #head_info #head_info_left .mark span {
font-size: calc(0.7rem + ((1vw - 0.48rem) * 0.6944));
}

/*---------------------------------------------
front_menu
---------------------------------------------*/

#front_menu {
border-radius:0;
position:absolute ;
height:90px;
left: 0;
top:0;
width:100%;
overflow-y:hidden;
z-index:5;
}

#front_menu dl.menu {
border-radius:0;
overflow-y:hidden;
position:absolute;
height:90px;
left:0;
top:0;
width:100%;
}

#container.open_left_nav #front_menu.fixed {
position: sticky;
top:0;
border-radius: 0;
opacity: 1;
}

#front_menu dl.menu,
#front_menu.fixed dl.menu {
border-radius:0;
min-width:860px;
overflow-y:hidden;
}

#front_menu dl.menu dd ul,
#front_menu.fixed dl.menu dd ul {
border-top: 1px solid var(--gray_dd);
border-radius:0;
justify-content: start;
width:100%;
overflow-y:hidden;
/*padding-left: 40px;*/
height:76px;
}

#front_menu dl.menu dd ul li,
#front_menu.fixed dl.menu dd ul li {
border-radius:0;
display: flex;
overflow: hidden;
/*max-width: 260px;*/
max-width:100%;
width: calc(100% / 5 + 10px);
}

#front_menu dl.menu dd ul li:first-child,
#front_menu.fixed dl.menu dd ul li:first-child {
border-radius:0;
padding-left: 40px;
}

#front_menu dl.menu dd ul li a,
#front_menu.fixed dl.menu dd ul li a {
display:flex;
justify-content:center;
font-size: calc(1.0rem + ((1vw - 0.48rem) * 0.6944));
letter-spacing:-0.01em;
padding: 20px 35px 20px 10px;
text-overflow: ellipsis;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-align:left;
}

#front_menu.fixed dl.menu dd ul li:first-child {
border-radius:0;
}

#front_menu dl.menu dd ul li:first-child a,
#front_menu dl.menu dd ul li:last-child a {
border-radius:0;
}

#front_menu dl.menu dd ul li a:before,
#front_menu.fixed dl.menu dd ul li a:before {
left:auto;
right:12px;
bottom:auto;
top:50%;
margin-left:0;
margin-top:-9px;
height:16px;
width:16px;
}

#front_menu dl.menu dd ul li a:after,
#front_menu.fixed dl.menu dd ul li a:after {
font-size: calc(0.5rem + ((1vw - 0.48rem) * 0.6944));
left:auto;
right:15px;
bottom:auto;
top:50%;
margin-top:-6px;
}

/*--- open_left_nav ---*/
.left_scroll_button {
background-color:var(--white);
border:1px solid var(--gray_dd);
top:0;
left:0;
width:40px;
height:76px;
position: sticky;
z-index:4;
}

#container.open_left_nav .left_scroll_button {
/*position: fixed;*/
}

#container.open_left_nav .left_scroll_button {

}

.right_scroll_button {
background-color:var(--white);
border:1px solid var(--gray_dd);
display:block;
top:0;
right:0;
position: sticky;
width:40px;
height:76px;
z-index:4;
}

#container.open_left_nav .right_scroll_button {
/*position: fixed;*/
left:auto;
right:0;
}

.left_scroll_button i,
.right_scroll_button i {
color:var(--blue);
display:block;
font-size: calc(1.2rem + ((1vw - 0.48rem) * 0.6944));
font-weight:600;
position:absolute;
margin-top:-5px;
margin-left:-5px;
top:50%;
left:50%;
}

#container.open_left_nav .left_scroll_button:hover,
#container.open_left_nav .right_scroll_button:hover {
background-color:var(--blue);
cursor:pointer;
}

#container.open_left_nav .left_scroll_button:hover i,
#container.open_left_nav .right_scroll_button:hover i {
color:var(--white);
display:block;
}


#container.open_left_nav .left_scroll_button {
/*left:320px;*/
left:0;
}



/*---------------------------------------------
front_menu2
---------------------------------------------*/
#front_menu2 {
border-radius:10px 0 0 10px;
/*position:absolute;*/
/*left: 0;*/
/*top:0;*/
width:100%;
overflow-y:hidden;
z-index:5;
}

#front_menu2 dl.menu {
border-radius:10px 0 0 10px;
overflow-y:hidden;
left:0;
top:0;
width:100%;
}

#front_menu2 dl.menu dd {
padding:0;
}

#front_menu2 dl.menu dd ul {
padding:0;
width:100%;
}

#front_menu2 dl.menu dd ul li a {
font-size:calc(0.9rem + ((1vw - 0.48rem) * 0.6944));
}

#front_menu2 dl.menu dd ul li a:before {
width:calc(100% - 10px);
}

#front_menu2 dl.menu dd ul li a:after {
right:11px;
margin-top:-5px;
}

/*--- fixed ---*/
#container.open_left_nav #front_menu2.fixed {
position: sticky;
top:0;
border-radius: 0;
opacity: 1;
}

#container.open_left_nav #front_menu2.fixed dl.menu,
#container.open_left_nav #front_menu2.fixed dl.menu dd,
#container.open_left_nav #front_menu2.fixed dl.menu dd ul,
#container.open_left_nav #front_menu2.fixed dl.menu dd ul li:first-child {
border-radius:0;
}



/*---------------------------------------------
price_table
---------------------------------------------*/
.price_table .price_table_cont {
overflow-x: scroll;
}

.price_table .price_table_cont table {
min-width:800px;
}

.price_table p.note {
font-size: calc(0.8rem + ((1vw - 0.48rem) * 0.6944));
}


}