@charset "utf-8";
/*------------------------  common  ------------------------*/

/*-------------------  web font  -------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Roboto:wght@400;500&display=swap');

/*------------  reset  ------------*/
*, *::before, *::after { box-sizing: border-box; }
* { padding: 0; margin: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
form { margin: 0; padding: 0; }
li { list-style-type: none; }
img { border: none; width: 100%; vertical-align: bottom; }
a { color: #111; text-decoration: none; opacity: 1; }
a:hover { text-decoration: none; opacity: .7; }
button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background-color: transparent; padding: 0; }

@media screen and (max-width: 840px) {
 a:hover { opacity: 1; }
}

/*------------  base  ------------*/
html { height: -webkit-fill-available; }
body { min-width: 320px; min-height: 100vh; min-height: -webkit-fill-available; font-size: 1em; line-height: 1; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; color: #111; font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }


#home .gnav .nav_home .nav_link,
#prod .gnav .nav_products .nav_link,
#products .gnav .nav_products .nav_link,
#case .gnav .nav_case .nav_link,
#support .gnav .nav_support .nav_link,
#company .gnav .nav_company .nav_link,
#cont .gnav .nav_contact .nav_link,
#contact .gnav .nav_contact .nav_link { color: #a00e14; }



/*------------  header  ------------*/
#header { position: -webkit-sticky; position: sticky; top: 0; width: 100%; background: #fff; border-bottom: 1px solid #e6e6e6; z-index: 1000; }
#header .header_inner { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 0 20px; max-width: 1280px; height: 60px; }
#header .logo { display: flex; align-items: center; width: 184px; z-index: 1001; }
#header .logo .link { display: block; }
.menu_btn { display: none; }

#header .header_gnav {}
#header .header_gnav .gnav { display: flex; align-items: center; font-weight: 700; font-size: 15px; }
#header .header_gnav .gnav .nav { margin-right: 28px; }
#header .header_gnav .gnav .nav:nth-of-type(1),
#header .header_gnav .gnav .nav:nth-of-type(5),
#header .header_gnav .gnav .nav:nth-of-type(6),
#header .header_gnav .gnav .nav:nth-of-type(7) { margin-right: 0; }
#header .header_gnav .gnav .nav .nav_link { display: block; padding: 8px; }
#header .header_gnav .gnav .nav .nav_link:hover { opacity: 1; color: #a00e14; }
#header .header_gnav .gnav .nav_home { display: none; }
#header .header_gnav .gnav .nav_card { display: none; }
#header .header_gnav .gnav .nav_contact { display: none; }

#header .header_btn { display: flex; align-items: center; }
#header .header_btn .btn_set:not(:last-of-type) { margin-right: 10px; }
#header .header_btn .btn { display: flex; justify-content: center; align-items: center; height: 38px; padding: 0 18px; font-weight: 700; font-size: 14px; color: #fff; border-radius: 3px; }
#header .header_btn .card_btn { background: #a00e14; }
#header .header_btn .contact_btn { background: #111; }


@media screen and (max-width: 1020px) {

 #header .header_inner { padding: 0 16px; }
 #header .logo { width: 168px; }
 #header .header_gnav .gnav .nav { margin-right: .7em; }
 #header .header_btn .btn_set:not(:last-of-type) { margin-right: 8px; }
 #header .header_btn .btn { height: 34px; padding: 0 12px; font-size: 13px; }

}


@media screen and (max-width: 840px) {

 #header .header_inner { justify-content: flex-start; padding: 0 12px; height: 54px; width: 100%; }
 #header .logo { width: 140px; }

 .menu_btn { display: block; position: absolute; top: 5px; right: 5px; width: 44px; height: 44px; text-align: center; transform: rotate(0deg); cursor: pointer; transition: .4s; z-index: 1001; }
 .menu_btn .bar { display: block; position: absolute; width: 22px; height: 1px ; left: 11px; background: #a00e14; }
 .menu_btn .bar:nth-of-type(1) { top: 15px; }
 .menu_btn .bar:nth-of-type(2) { top: 22px; }
 .menu_btn .bar:nth-of-type(3) { top: 29px; }
 .menu_btn.active { transform: rotate(90deg); }
 .menu_btn.active .bar:nth-child(1) { top: 22px; transform: rotate(45deg); }
 .menu_btn.active .bar:nth-child(2) { top: 22px; opacity: 0; }
 .menu_btn.active .bar:nth-child(3) { top: 22px; transform: rotate(-45deg); }

 body.fix { overflow: hidden; }
 body.fix #header { position: fixed; top: 0; left: 0; }
 body.fix #products .chapter { display: none; }

 #header .header_gnav.active { display: block; }

 #header .header_gnav { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 120vh; background: #fff; z-index: 1000; }
 #header .header_gnav .gnav { display: block; padding: 60px 15px 0; width: 100%; font-size: 14px; }
 #header .header_gnav .gnav .nav { margin: 0; width: 100%; }
 #header .header_gnav .gnav .nav .nav_link { display: block; padding: 18px 10px; height: auto; border-bottom: 1px solid #e6e6e6; }
 #header .header_gnav .gnav .nav_home { display: block; }
 #header .header_gnav .gnav .nav_card { display: block; }
 #header .header_gnav .gnav .nav_contact { display: block; }
 #header .header_btn { display: none; }

 @media (orientation: landscape) {
  #header .header_gnav .gnav { display: flex; flex-wrap: wrap; }
  #header .header_gnav .gnav .nav { width: 50%; padding: 0 8px; }
 }

}



/*------------  main  ------------*/
.main { padding: 0; }



/*------------  content  ------------*/
.content { margin: 0 auto; max-width: 1080px; }



/*------------  btn  ------------*/
.btn { display: flex; justify-content: center; align-items: center; height: 46px; background: #a00e14; font-weight: 700; font-size: 14px; line-height: 1.3; color: #fff; border-radius: 3px; }
.btn .btn_label { position: relative; padding: 0 10px 0 0; }
.btn .btn_label::after { content: ''; position: absolute; top: 50%; right: -2px; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: translate(0, -50%) rotate(45deg); }

@media screen and (max-width: 840px) {
 .btn { height: 44px; font-size: 14px; }
}



/*------------  tel  ------------*/
@media (min-width: 841px) {
 .call[href*="tel:"] { pointer-events: none; cursor: default; text-decoration: none; }
}



/*------------  breadcrumbs  ------------*/
.breadcrumbs { display: flex; align-items: center; margin: 0 auto; padding: 24px 20px; max-width: 1280px; white-space: nowrap; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; font-size: 12px; line-height: 1.3; }
.breadcrumbs .nav { position: relative; padding: 0 23px 0 0; color: #a00e14; }
.breadcrumbs .nav::before { content:""; position: absolute; top: 50%; right: 10px; width: 5px; height: 5px; border-top: 1px solid #111; border-right: 1px solid #111; transform: translate(0, -50%) rotate(45deg); }
.breadcrumbs .nav .nav_link { color: #111; }
.breadcrumbs .nav:last-of-type { padding: 0; }
.breadcrumbs .nav:last-of-type::before { display: none; }
.breadcrumbs .nav .nav_link .icon_home { width: 16px; height: 16px; }

@media screen and (max-width: 840px) {
 .breadcrumbs { padding: 20px 15px; overflow-x: auto; }
 .breadcrumbs::-webkit-scrollbar:horizontal { display: none; }
}



/*------------  pagetop  ------------*/
.pagetop { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background: #a00e14; white-space: nowrap; text-indent: 100%; overflow: hidden; border-radius: 3px; cursor: pointer; z-index: 2; }
.pagetop::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: translate(-50%, -25%) rotate(-45deg); }

@media screen and (max-width: 840px) {
 .pagetop { position: fixed; bottom: 14px; right: 14px; width: 44px; height: 44px; }
 .pagetop::after { width: 8px; height: 8px; }
}



/*------------  footer  ------------*/
#footer { padding: 45px 0; background: #f6f6f6; }
#footer .footer_inner { margin: 0 auto; padding: 0 20px; max-width: 1280px; font-weight: 400; line-height: 1.3; color: #666; }
#footer .nav_link { display: block; color: #666; }
#footer .footer_gnav { display: flex; justify-content: space-between; padding: 0 6% 0 6px; border-bottom: 1px solid #ddd; }
#footer .footer_gnav .logo { width: 156px; }
#footer .footer_gnav .logo .link { display: block; }
#footer .footer_gnav .dir_column { padding: 0 0 10px; font-size: 13px; }
#footer .footer_gnav .dir_column_inner { padding: 0 0 30px; }
#footer .footer_gnav .dir_column_ttl { display: none; }
#footer .footer_gnav .dir_column_check { display: none; }
#footer .footer_gnav .dir_column_label { display: none; }
#footer .footer_gnav .dir_column_label::after { display: none; }
#footer .footer_gnav .dir_column_content {}
#footer .footer_gnav .dir_column .nav { padding: 4px 0; }
#footer .footer_gnav .dir_column .nav:first-of-type { padding: 0 0 10px; font-weight: 700; }
#footer .footer_gnav .dir_column .nav2 { padding: 0 0 14px; font-weight: 700; font-size: 13px; }
#footer .footer_subnav { padding: 20px 6px 0; font-weight: 400; font-size: 13px; }
#footer .footer_subnav .subnav { display: flex; }
#footer .footer_subnav .subnav .nav:not(:last-of-type) { margin-right: 2em; }
#footer .footer_subnav .copyright { padding: 15px 0 0; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 14px; }


@media screen and (max-width: 1040px) {

 #footer .footer_gnav { flex-wrap: wrap; }
 #footer .footer_gnav .logo_column { padding: 0 0 30px; width: 100%; }

}


@media screen and (max-width: 840px) {

 #footer { padding: 25px 0 35px; }
 #footer .footer_inner { padding: 0 15px; }
 #footer .footer_gnav { display: block; padding: 0; }
 #footer .footer_gnav .logo_column { padding: 0 0 20px; }
 #footer .footer_gnav .logo { width: 128px; }
 #footer .footer_gnav .dir_column { padding: 0; }
 #footer .footer_gnav .dir_column_inner { padding: 0; }
 #footer .footer_gnav .dir_column_ttl { display: block; font-weight: 700; font-size: 13px; }
 #footer .footer_gnav .dir_column_label { display: block; position: relative; padding: 13px 0; border-top: 1px solid #ddd; cursor: pointer; }
 #footer .footer_gnav .dir_column_content { height: 0; opacity: 0; overflow: hidden; }
 #footer .footer_gnav .dir_column_label::after { display: block; content: '＋'; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); transition: .3s; }
 #footer .footer_gnav .dir_column_check:checked + .dir_column_label:after { transform: translate(0, -50%) rotate(45deg); }
 #footer .footer_gnav .dir_column_check:checked + .dir_column_label + .dir_column_content {  height: inherit; opacity: 1; transition: .3s; }
 #footer .footer_gnav .dir_column .nav { padding: 0 6px; }
 #footer .footer_gnav .dir_column .nav .nav_link { padding: 7px; }
 #footer .footer_gnav .dir_column .nav:first-of-type { padding: 4px 6px 0; font-weight: 400; }
 #footer .footer_gnav .dir_column .nav:last-of-type { padding: 0 6px 18px; font-weight: 400; }
 #footer .footer_gnav .dir_column .nav2 { padding: 0; border-top: 1px solid #ddd; }
 #footer .footer_gnav .dir_column .nav2 .nav_link { padding: 13px 0; }
 #footer .footer_subnav { display: block; padding: 24px 0 0; }
 #footer .footer_subnav .subnav { display: flex; flex-wrap: wrap; }
 #footer .footer_subnav .subnav .nav { flex-basis: calc(100% / 2); padding: 0 0 12px; }
 #footer .footer_subnav .subnav .nav:not(:last-of-type) { margin-right: 0; }
 #footer .footer_subnav .copyright { padding: 15px 0 0; font-size: 13px; }

}