@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;600&family=Zen+Maru+Gothic:wght@500&display=swap');
/* BASE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


body {width:100%; background:var(--bodyBg); font-size:1rem; line-height:1.8; font-family:"Inter", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif; color:#1a1a1a; font-feature-settings:"pkna";}
:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {line-height:calc(1em + .625rem);}
a {text-decoration:underline solid #000d 1px; text-decoration-skip-ink:none; text-underline-offset:.2em; color:inherit;}
.container {display:flow-root; position:relative; margin:0 auto;}
.navOverlay {display:none;}
:root {--bodyBg:#f4f6f8; --themeBlue:#2076c7; --themeLightBlue:#dce8f4; --themeOrange:#ff632d;}

@media (min-width:600px){
  body {display:grid; grid-template-columns:clamp(250px,25vw,300px) 1fr; grid-template-rows:1fr auto;}
  .pageHeader {grid-column:1 / 2; grid-row:1/3;}
}
@media (max-width:599px){
  html {font-size:90%;}
  .pageHeader, .pageFooter {min-width:320px;}
  .container {width:auto; margin:0 20px;}
  body.-navOpen .navOverlay {width:100%; height:100%; position:fixed; top:0; left:0; z-index:10; display:block; background:#0006; z-index:900;}
}

/* =============== ヘッダ */

.pageHeader {position:relative; z-index:998; background:#fff;}
.pageHeader a {text-decoration:none;}
.pageHeader nav li {position:relative;}
.pageHeader h1 {font-size:100%;}
.pageHeader ._siteName img {object-fit:contain;}
.gnav > li > a {display:block; font-weight:bold;}
.gnav > li.-on > a:before {filter:brightness(145%) hue-rotate(2deg) saturate(120%);}
.gnav > li > a:before {content:""; display:inline-block; vertical-align:-20%; width:28px; height:28px; margin-right:10px; background-repeat-no-repeat; background-position:50% 50%; background-size:contain;}
.gnav > li > a[href*="/about"]:before {background-image:url(../images/common/gnav_icon01.png);}
.gnav > li > a[href*="/products"]:before {background-image:url(../images/common/gnav_icon02.png);}
.gnav > li > a[href*="/manu"]:before {background-image:url(../images/common/gnav_icon03.png);}
.gnav > li > a[href*="/contact"]:before {background-image:url(../images/common/gnav_icon04.png);}

@media (min-width:600px) {
  .pageHeader .container {position:sticky; top:0; left:0; height:100vh; display:flex; flex-direction:column; align-content:flex-start;}
  .pageHeader ._siteName {aspect-ratio:6/5; background:var(--themeBlue); color:#fff;}
  .pageHeader ._siteName a {display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:6/5;}
  .pageHeader ._siteName img {display:block; margin-inline:auto;}
  .pageHeader ._siteName img[src*="logo"] {width:28%; min-width:75px;}
  .pageHeader ._siteName img[src*="name"] {width:71%; min-width:200px; margin-block:15px;}
  #spNav {display:none;}
  .gnav {display:flex; flex-direction:column; gap:18px; width:fit-content; margin:0 auto; padding:60px 0;}
  .gnav > li > a {padding-right:1em;}
  .pageHeader address {width:minmax(220px,calc(100% - 80px)); margin:auto auto 0; padding-bottom:25px; line-height:1.5; font-size:var(--fs12);}
  .pageHeader address .btn2 {display:inline-block; margin-top:.3em;}
}
@media (max-width:599px) {
  .pageHeader {background:var(--themeBlue);}
  .pageHeader .container {margin:0;}
  .pageHeader ._siteName {float:none; margin-left:20px; padding:4px 0;}
  .pageHeader ._siteName img {vertical-align:middle;}
  .pageHeader ._siteName img[src*="logo"] {width:35px; margin:0 10px 0 -3px;}
  .pageHeader ._siteName img[src*="name"] {width:200px;}
  .pageHeader nav {position:absolute; width:100%; max-height:200vh; padding:25px 20px; background:#fff; box-shadow:0 4px rgba(0,0,0,.2); opacity:1; overflow:hidden; transition:all .2s;}
  body:not(.-navOpen) .pageHeader nav {max-height:0; opacity:0;}
  .gnav {display:block;}
  .gnav > li {display:block; width:auto;}
  .gnav > li > :where(a,span,div):first-child {position:relative; display:block; padding:.8em 16px;}
  /* 開閉ボタン */
  #spNav {display:block; width:50px; height:35px; position:absolute; top:50%; right:0; transform:translate(0,-50%); text-align:center; cursor:pointer; --navBtnLineClr:#fff;}
  #spNav:before, #spNav:after {content:""; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:2px; background:var(--navBtnLineClr); transition:.15s all;}
  #spNav:before {box-shadow:0 -8px 0 var(--navBtnLineClr);}
  #spNav:after {box-shadow:0 8px 0 var(--navBtnLineClr);}
  .-navOpen #spNav:before {box-shadow:none; transform:translate(-50%,-50%) rotate(-45deg);}
  .-navOpen #spNav:after {box-shadow:none; transform:translate(-50%,-50%) rotate(45deg);}
}

/* =============== フッタ */

.pageFooter {position:sticky; top:100vh; background:#; color:#;}
.pageFooter .container {padding:20px 0; font-size:var(--fs15);}
.pageFooter a {text-decoration:none;}
.pageFooter .copyright {margin-bottom:0; font-size:var(--fs11); text-align:center;}

@media (min-width:600px) {
  .pageFooter .container :not(.copyright) {display:none;} 
}
@media (max-width:599px) {
  .pageFooter {padding-top:15px; background:#30384a; color:#fff;}
  .pageFooter ul {display:flex; flex-wrap:wrap; gap:6px 25px; margin-bottom:25px; overflow:hidden;}
  .pageFooter li {position:relative;}
  .pageFooter li:before {content:""; display:block; position:absolute; left:-13px; top:calc(50% - .5em); height:1em; border-left:1px #fff8 solid;}
}

/* =============== メイン */

main .-rte ul {padding-left:1.5em; list-style-type:disc;}
main .-rte ul > li > ul {padding-left:1.5em; list-style-type:circle;}
:is(:first-child) {margin-top:0;} :is(:last-child) {margin-bottom:0;}

@media (min-width:600px) {
  main {display:flex; flex-direction:column; justify-content:flex-start; min-width:730px;}
  main > .container {z-index:2; width:clamp(670px,calc(100% - 9vw),1200px); padding:60px 0 80px;}
}
@media (max-width:599px) {
  main {min-width:320px;}
  main > .container, main > * > .container {padding:30px 0 50px;}
}

/* H2～H6 */
:root {--fsH2:var(--fs24); --fsH3:var(--fs21); --fsH4:var(--fs19); --fsH5:var(--fs17); --fsH6:1rem;}
.fsH2 {font-size:var(--fsH2);} .fsH3 {font-size:var(--fsH3);} .fsH4 {font-size:var(--fsH4);} .fsH5 {font-size:var(--fsH5);} .fsH6 {font-size:var(--fsH6);}
h2, .h2 {width:auto; margin:3em 0 1.5em; padding:0 0 0 .8em; border:0; border-left:10px var(--themeBlue) solid; border-radius:0; background:none; font-size:var(--fsH2);}
h3, .h3 {width:auto; margin:1.5em 0 .75em; padding:0; border:0; border-radius:0; background:none; font-size:var(--fsH3); color:var(--themeBlue);}
h4, .h4 {width:auto; margin:1.5em 0 .6em; padding:0; border:0; border-radius:0; background:none; font-size:var(--fsH4);}
h5, .h5 {width:auto; margin:1.2em 0 .4em; padding:0; border:0; border-radius:0; background:none; font-size:var(--fsH5);}
h6, .h6 {width:auto; margin:.8em 0 .2em; padding:0; border:0; border-radius:0; background:none; font-size:var(--fsH6);}
:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6):first-child {margin-top:0;}

@media (max-width:599px) {
/*  :root {--fsH2:1.5625rem; --fsH3:1.375rem; --fsH4:1.25rem; --fsH5:1.09375rem; --fsH6:1rem;} */
}


/* CUSTOM COMPONENTS %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


/* ページタイトル */
.pageTitle {overflow:hidden; transition:.4s all;}
.pageTitle ._pic {position:absolute; left:0; top:0; width:100%; height:100%; background:#013; overflow:hidden;}
.pageTitle ._pic img {width:100%; height:100%; object-fit:cover; opacity:.6; transition:.7s all;}
.pageTitle ._pic:after {content:""; display:block; height:100%; position:absolute; left:0; top:0; background:#2a304aaa; backdrop-filter:blur(5px); transition:.3s transform ease-out,1s opacity ease-out;}
.pageTitle h1 {position:relative; z-index:2; font-size:var(--fs40); color:#fff; transition:.6s all;}
.pageTitle.-noPic h1 {color:var(--themeBlue);}

@media (min-width:600px) {
  .pageTitle .container {display:flex; align-items:center; justify-content:center; width:100%; height:clamp(calc(1250px / 6),calc(125vw / 6),250px);}
  .pageTitle ._pic:after {width:clamp(320px,calc((100vw - 300px) * .5),420px);}
  .pageTitle h1 {width:clamp(670px,calc(100% - 9vw),1200px); letter-spacing:.08em;}
  .pageTitle.-noPic .container {height:auto; padding-top:60px;}
  .pageTitle:not(.-noPic) {position:sticky; top:0;}
  .pageTitle:not(.-noPic).-fadedOut, 
  body:not(.-opened) .pageTitle {opacity:0;}
  .pageTitle:not(.-noPic).-fadedOut h1, 
  body:not(.-opened) .pageTitle:not(.-noPic) h1 {text-indent:-50vw;}
  .pageTitle:not(.-noPic).-fadedOut ._pic img,
  body:not(.-opened) .pageTitle ._pic img {transform:scale(1.05); transform-origin:50% 50%; filter:blur(20px);}
  .pageTitle:not(.-noPic).-fadedOut ._pic:after,
  body:not(.-opened) .pageTitle ._pic:after {transform:translate(-200%,0); opacity:0;}
}
@media (max-width:599px) {
  .pageTitle .container {margin:0; padding:0;}
  .pageTitle ._pic:after {width:60vw;}
  .pageTitle h1 {width:fit-content; padding:45px 20px; font-size:var(--fs30);}
}

/* .btn */
.btn1 :is(a, button), :is(a, button).btn1 {position:relative; display:inline-block; min-width:180px; padding:.4em 1.6rem .45em 1em; border:0; background:var(--themeOrange); text-decoration:none; font-weight:bold; color:#fff;}
.btn1 :is(a, button):after, :is(a, button).btn1:after {content:""; display:block; height:10px; width:10px; position:absolute; right:8px; top:calc(50% - 4px); border:#fff solid; border-width:2px 2px 0 0; transform:rotate(45deg) scale(.8);}
.btn2 a, a.btn2 {}
.btn2 a:before, a.btn2:before {content:""; display:inline-block; height:8px; width:8px; margin-right:.4em; border:var(--themeOrange) solid; border-width:2px 2px 0 0; transform:rotate(45deg) scale(.8);}

@media (min-width:600px) {
}
@media (max-width:599px) {
}

:root {--bg1:#2471;}


/* PAGES %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


/* =============== トップページ */

.mv {position:relative; color:#fff; background:#224499; overflow:hidden;}
.mv ._txt {position:absolute; top:0; background:url(../images/home_mv_cable.png) no-repeat 100% 100%; background-size:34px auto; text-align:right; transition:.6s all ease-out;}
body:not(.-loaded) ._txt {background-position:100% 130%;}
.mv ._txt > * {display:block; line-height:1.4; transition:1.2s all;}
body:not(.-loaded) .mv ._txt > * {transform:translate(-40px,0); opacity:0;}
.mv ._txt i {margin-top:.2em; font-style:normal; font-weight:bold;}
.mv ._slide, .mv ._slide [class*="slick-"] {height:100%; overflow:hidden;}
.mv ._slide img {width:100%; height:100%; object-fit:cover; opacity:.83; filter:blur(10px); transform:scale(1.05); transition:2s filter, 5s transform ease-out;}
.mv ._slide .-loaded.slick-active img {filter:blur(0); transform:scale(1);}
.home_outline ._txt {position:relative;}
.home_outline ._txt:before {content:""; display:block; width:140px; aspect-ratio:1/1; position:absolute; left:0; top:-40px; background:var(--themeLightBlue);}
.home_outline ._txt > * {position:relative;}
.home_outline h2 {position:relative; margin-bottom:1rem; padding:0; border:0; color:var(--themeBlue);}
.home_outline ._pic {position:relative;}
.home_outline ~ * {margin-top:80px;}
.home_news {position:relative; display:flow-root;}
.home_news .datedList {background:#fff;}
.home_news .datedList :is(dt:nth-of-type(n+4),dt:nth-of-type(n+4) ~ *) {display:none;}
.home_news .btn1 {display:none;}
.home_products {padding-bottom:40px; border-bottom:1px var(--themeBlue) solid;}
.home_products h2 {display:flex; align-items:center; gap:15px; border:0; padding:0; font-size:var(--fs18); color:var(--themeBlue);}
.home_products h2 i {flex-grow:1; border-top:1px var(--themeBlue) solid;}
.home_products .slashed {font-size:var(--fs13);}

@media (min-width:600px) {
  .mv {min-width:730px; height:clamp(500px,calc(80vw - 260px),630px);}
  .mv ._txt {right:6.5%; padding:clamp(90px,calc(16vw - 52px),110px) 70px 0 0;}
  .mv ._txt b {font-size:clamp(3.6rem,5.4vw,4.2rem);}
  .mv ._txt i {font-size:clamp(1.2rem,1.8vw,1.4rem);}
  .mv {opacity:0; transition:.6s all ease-out;}
  .mv ~ * {opacity:0; transform:translate(0,20px); transition:.4s all ease-out;}
  .-loaded .mv {opacity:1;}
  .-loaded .mv ~ * {opacity:1; transform:translate(0,0);}
  .home_outline {display:grid; grid-template-columns:1fr 50px min(40%,390px); padding-top:40px;}
  .home_outline ._txt {grid-column:1/2; padding-left:clamp(20px,3vw,40px);}
  .home_outline ._pic {grid-column:3/4; background:#000;}  
  .home_outline ._pic img {position:absolute; bottom:0; left:0; width:100%; height:calc(100% + 135px); object-fit:cover;}
  .home_news .datedList {margin:0 30px 0 0; padding:2.5em 3.5em;}
  .home_news .btn1 {float:right; transform:translate(0,-40%);}
  .home_products {display:flex; flex-wrap:wrap; justify-content:space-between;}
  .home_products h2 {width:100%;}
  .home_products ._pic {position:relative; width:200px;}
  .home_products ._pic img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
  .home_products ._txt {width:calc(100% - 240px); order:100;}
}
@media (max-width:599px) {
  .mv {height:80vw;}
  .mv ._txt {right:6.5%; padding:20vw 40px 0 0; background-size:20px auto;}
  .mv ._txt b {font-size:9vw;}
  .mv ._txt i {font-size:3vw;}
  .home_outline ._txt:before {left:-70px; top:-5px; width:70px; opacity:.93;}
  .home_outline h2 {padding-left:20px;}
  .home_outline ._pic {margin-top:1.5em;}
  .home_news {background:#fff; padding-bottom:2em; box-shadow:-50px 0 0 #fff, 50px 0 0 #fff;}
  .home_news .datedList {margin:0; padding:2em 0;}
  .home_news .btn1 {text-align:center;}
  .home_products {padding-bottom:35px;}
  .home_products h2 span {order:-100;}
  .home_products ._pic {display:none;}
  .home_products .btn1 {text-align:center;}
}

/* =============== 会社案内 */

.history {display:flex; flex-wrap:wrap;}
.history dt {width:6.8rem; display:flow-root;}
.history :is(dt:not(:first-child), dt:not(:first-child) + dd) {padding-top:.3em;}
.history dt > span {float:right;}
.history dd {width:calc(100% - 8rem); margin-left:auto; padding-left:1rem; border-left:1px #ccc solid;}

@media (min-width:600px) {
}
@media (max-width:599px) {
  .profile {--tl_dtW:6rem;}
}

/* =============== 取扱商品 */

.productNotes {display:grid; grid-template-columns:repeat(auto-fill, minmax(420px,1fr)); gap:10px;}
.productNotes article {position:relative; padding:1.2em 1.5em; background:var(--bg1); overflow:hidden;}
/*.productNotes article:before {content:""; display:block; position:absolute; right:-21px; top:-21px; width:40px; height:40px; background:#0001;}*/
.productNotes article:after {content:""; display:block; position:absolute; right:-25px; top:-25px; width:40px; height:40px; background:var(--bodyBg); transform:rotate(45deg);}
.productNotes article h3 {margin-bottom:.5em; font-size:var(--fs18);}
.productList {border-bottom:1px #ccc solid;}
.productList > * {border-top:1px #ccc solid;}
.productList dt {font-weight:bold;}
.productList dd > :is(a,span) {display:inline-block; margin-right:1em;}
.kcv_num {display:flex; gap:10px;}
.kcv_num li {line-height:1.1; text-align:center; font-size:var(--fs11);}
.kcv_num li b {display:block; border-bottom:1px #333 solid; margin-bottom:.2em; padding-bottom:.2em; font-size:var(--fs16); letter-spacing:0;}
.kcv_num li:last-child {position:relative; margin-left:1.5rem;}
.kcv_num li:last-child:before {content:"ｘ"; position:absolute; left:-1.5rem; width:1rem; text-align:center; font-size:1rem;}
[class*="kcv_table"] table {font-size:var(--fs14);}
[class*="kcv_table"] tr > * {padding:.2em .4em; text-align:center;}
.kcv_table1wrap {display:grid; grid-template-columns:repeat(auto-fit, 1fr));}
.kcv_table1 {overflow:auto;}
.kcv_table1 * {white-space:nowrap;}
.kcv_table1:before {content:""; display:block; width:34.5rem; height:2px;}
.kcv_table1 table {width:98%; overflow:hidden;}
.kcv_table1 [class*="-color"] th {position:relative;}
.kcv_table1 [class*="-color"] th:before {content:""; display:block; position:absolute; right:100%; top:0; width:200vw; height:100%;}
.kcv_table1 .-color1 th:before {box-shadow:200vw 0 0 #3691;}
.kcv_table1 .-color2 th:before {box-shadow:200vw 0 0 #3961;}
.kcv_table1 .-color3 th:before {box-shadow:200vw 0 0 #9671;}
.kcv_table2 table {width:98%;}
.kcv_table2 th {width:5rem;}
.kcv_table2 td {width:calc(10% - .5rem);}
.kcv_table2 table:nth-of-type(3n+1) tr:first-child td {background:#3691;}
.kcv_table2 table:nth-of-type(3n+2) tr:first-child td {background:#3961;}
.kcv_table2 table:nth-of-type(3n) tr:first-child td {background:#9671;}

@media (min-width:600px) {
  .productList {display:flex; flex-wrap:wrap;}
  .productList :is(dt,dd) {padding:1.2em 1em;}
  .productList dt {width:22rem;}
  .productList dd {width:calc(100% - 22rem);}
}
@media (max-width:599px) {
  .productNotes {display:flex; flex-direction:column;}
  .productList dt {padding:1em 0 .3em; line-height:1.5;}
  .productList dd {padding:0 0 1em 1em; border:0;}
  .productList dd > :is(a,span) {margin-right:.8em;}
  .kcv_num li {letter-spacing:-.06em;}
}

/* =============== 取扱メーカー */

.manuList h2 {margin-bottom:1em;}
.manuList li {position:relative; padding:.5em .8em .6em; font-weight:bold;}
.manuList li p {margin-top:.2em; line-height:1.5; font-weight:normal; font-size:var(--fs15);}

@media (min-width:600px) {
  .manuList {display:flex; flex-wrap:wrap; align-items:flex-start;}
  .manuList h2 {width:4rem; margin-top:0; padding-left:0; border:0; color:var(--themeBlue);}
  .manuList ul {width:calc(100% - 4rem); display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:6px; margin:0 0 3rem;}
  .manuList li {background:var(--bg1);}
  .manuList li a:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#fff6; opacity:0; transition:.15s all;}
  .manuList li a:hover:before {opacity:.5;}
}
@media (max-width:599px) {
  .manuList li:nth-child(2n-1) {background:var(--bg1);}
}

/* =============== お問い合わせ */

.recruit[data-status="0"] section._active,
.recruit[data-status="1"] section._inactive {display:none;}
#mailform {padding:2em; background:var(--bg1);}
#mailform h2 {padding-left:0; border-left:0;}

@media (min-width:600px) {
}
@media (max-width:599px) {
  #mailform {padding-inline:20px;}
}

/* ===============サイトマップ */

.sitemap, .sitemap ul {display:flex; flex-direction:column; gap:1em; line-height:1.5;}
.sitemap li ul {gap:.6em; margin:.5em 0 0 1em; padding:.3em 0 .3em 1em; border-left:4px var(--bg1) solid;}
.sitemap li ul a:before {vertical-align:middle; width:4px; height:0; border-width:1px 0 0; border-color:#0008; transform:none;}

@media (min-width:600px) {
}
@media (max-width:599px) {
}