@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto+Condensed:ital@0;1&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
a img {display: block;}
figure{ line-height: 0; margin: 0;}
/* フェードイン(初期値) */
.js-fadeUp {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(5px); /* 下に5pxの位置から */
  transition: opacity .3s, transform .3s; /* 透過率と縦方向の移動を0.8秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 上に移動する */
  transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}

:root {
  --en: 'Roboto Condensed', sans-serif;
  --blue:#111e7c;
  --l-blue :#00a1e5;
  --bg-color: #f7f5f4;
  --leading-trim: calc((1em - 1lh) / 2);
}
dt,dd{ margin-block:var(--leading-trim) ;}
/* Lists –––––––––––––––– */
ul { list-style: none; }
ol, ul { padding-left: 0; margin: 0; }

html {
 font-size: 62.5%;
 scroll-behavior: smooth;
 scroll-padding-top: 88px;
}
header {
  position: fixed;
  width : 100%;
  height: 64px;
  background: linear-gradient(90deg, white 0%, white 45%, var(--blue) 45%, var(--blue) 100%);
  z-index: 999;
}
.header__wrap {
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:18px 24px 0;
  margin: 0 auto;
}
.header__logo { width:104px;}

ul#menu {
	list-style-type: none;
	width: 100%;
	background:rgba(0, 78, 164,.9);
	position: absolute;
	left: 0px;
	top : 64px;
	z-index: 990;
	display: none;
}
ul#menu li { line-height: 1; text-align: center;}
ul#menu li a {
  display: block;
  color: #fff;
	text-decoration: none;
	padding: 21px 0;
  transition: .3s;
}
ul#menu li a:hover {
	background:var(--blue);
	opacity:1;
}
ul#menu li:last-of-type { margin: auto;}
ul#menu li:last-of-type a,
.footer__body-contact a {
  position: relative;
  top : 50%;
	left: 50%;
  display: block;
  width : 32px;
  height: 32px;
  line-height: 32px;
  background : #fff;
  border-radius: 50%;
  padding: 0;
	transform: translate(-50%,-50%); 
}
ul#menu li:last-of-type a { margin-top: 24px;}
ul#menu li:last-of-type a:hover,
.footer__body-contact a:hover { background : var(--l-blue); border-radius: 50%;}
.mail::before {
  content:'';
  display: block;
  background: url('../img/nav/icon-mail.svg') center / 20px no-repeat;
  line-height: inherit;
  position: absolute;
  left: 4px;
  top : 4px;
  text-align: center;
  width: 24px;
  height: 24px;
  z-index: 999;
}

/* -- div#sp-icon ------------------- */
div#sp-icon {
	width: 64px;
	height: 64px;
	position: absolute;
	right: 0;
	top: 0px;
	z-index: 999;
}
div#sp-icon:hover { cursor: pointer;}
div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
	display: inline-block;
	width :30px;
	height: 2px;
	background: #fff;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.3s;
}
div#sp-icon span {
	left:50%;
	top: 50%;
	transform: translate( -50%, -50% );
}
div#sp-icon span:before {
	content: "";
	transform: translateY( -10px ) rotate( 0deg );
}
div#sp-icon span:after {
	content: "";
	transform: translateY( 10px ) rotate( 0deg );
}
div.sp-open span { background: transparent !important;}
div.sp-open span:before {transform: rotate( 45deg ) !important;}
div.sp-open span:after { transform: rotate( -45deg ) !important;}

body { font-size:1.4rem;}

footer { background: var(--blue); color: #FFF;}
.footer__wrap { max-width: 960px; padding:64px 24px; margin: auto;}
.footer__body { display: flex; gap:24px; margin-top: 32px;}
.footer__logo { width: 140px; line-height: 0;}

@media screen and (min-width: 768px) {
html { scroll-padding-top: 112px;}
header { height: 88px;}
.header__wrap { padding: 24px;}
.header__logo { width: 140px;}
div#sp-icon { top:10px;}
ul#menu { top:88px;}
ul#menu li a { padding: 24px 0;} 
body{ font-size : 1.5rem;}
.footer__wrap {
  display: flex;
  gap:32px;
  align-items: center;
}
.footer__body { margin-top: 0;}
}
@media print,screen and (min-width: 1008px){
.header__wrap { height: 88px; padding: 0;}
.header__logo { width: 160px;}
div#sp-icon { display: none;}
ul#menu {
  width: auto;
  height: 32px;
  position: unset; 
  display: flex!important;
  align-items: center;
  background: none;
}
ul#menu li { display: flex; height: 32px; list-style: 32px;}
ul#menu li a { padding: 8px 24px;} 
ul#menu li a:hover { background: var(--l-blue); border-radius: 2px;} 
ul#menu li:after {
    content:'/';
    display: inline-block;
    line-height: 32px;
    color: #FFF;
    margin: 0;
} 
ul#menu li:nth-of-type(4){ margin-right: 8px;}
ul#menu li:nth-of-type(4):after,
ul#menu li:last-of-type:after { display:none;}
ul#menu li:last-of-type a { margin-top: 0;}
}
/* Links –––––––––––––––– */
a { color: var(--blue); text-decoration: none; z-index: 50; }
a:hover img {
  opacity: .8;
  filter : alpha(opacity=80);
  -moz-opacity : .8;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition  : .3s ease-in-out;
  transition     : .3s ease-in-out;
}
/* breadlist / page-nav / page-top –––––––––––––––– */
.breadlist .container {display: flex;}
.breadlist li a,
.page-nav li a {
  border-radius: 1px;  
  padding: 4px 8px;
  transition: .3s;
}
.breadlist li a:hover,
.page-nav li a:hover,
.nav-ttl a:hover {
  width: 100%;
  background: var(--l-blue);
  color: #fff;
}
#page-top {
  position:fixed;
  bottom :20px;
  right:15px;
  width:35px;
  z-index: 50;
}
#page-top a { display : block; padding: 0;}

/* content –––––––––––––––– */
.page-ttl {
  position: relative;
  color :var(--blue);
  width : 100%;
  text-align: center;
}
.page-ttl__wrap {
  display: flex;
  flex-direction: column;
  gap:16px;
  align-items: center;
  justify-content: center;
  padding: 64px 0;
}
.page-ttl--company:before,
.page-ttl--case:before,
.page-ttl--contact:before{
  content: "";
  position: absolute;
  z-index: 1;
  width :100%;
  height:100%;
  background: url(../img/nav/B.svg) left top /contain no-repeat;
  top : 0;
  left: 0;
  opacity: .25;
}
.page-ttl--case { background: url(../img/case/bg_case_ttl.jpg) center center / cover no-repeat;}
.page-ttl--company { background: url(../img/company/bg_company_ttl.jpg) center center / cover no-repeat;}
.page-ttl--contact {background: url(../img/contact/bg_contact_ttl.jpg) center center / cover no-repeat;}

.page-ttl__ttl {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .2em;
}
 .page-ttl__ttl:before {
    display: block;
    content: 'Network is Power.';
    font-family:var(--en);
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
 .page-ttl__txt { font-family:var(--en); font-size: 22px;letter-spacing: .1em;}
.page-lead { padding: 0 24px; margin: 80px auto;}
.breadlist {
  font-size: .85em;
  text-align : left;
  line-height: 32px;
  color: #666;
  background: #f7f5f4;
  padding-top: 64px;
}
@media screen and (min-width: 768px) {
.breadlist { padding-top: 88px;}
.page-ttl__wrap{ padding: 120px 0;}
.page-ttl__ttl { font-size: 26px;}
.page-ttl__ttl:before {
  font-size: 15px;
  margin-bottom: 16px;
}
.page-ttl__txt { font-size: 24px;}
.page-lead { margin: 120px auto;}
}
@media screen and (min-width: 1008px) {
.page-ttl__wrap{ padding: 128px 0;}
.page-ttl__ttl { font-size: 28px;}
.page-ttl__ttl:before { font-size: 16px;}
.page-ttl__txt { font-size: 26px;}
}
@media screen and (min-width: 1120px) {
.page-ttl__wrap { padding: 160px 0;}
.page-ttl--case-customer .page-ttl__wrap { padding: 120px 0;}
}
/* utility –––––––––––––––– */
.bg-color {
  background:var(--bg-color);
  padding: 88px 0;
}
.bg-product {
  background: #eff5f9;
  padding-top: 88px;
  padding-bottom: 88px;
  margin: 96px auto;
}
.u-center { text-align: center;}
.u-right { text-align: right;}
.u-color  { color: var(--blue);}
.u-pt8 { padding-top: 8px;}
.u-pt16 { padding-top: 16px;}
.u-pt24 { padding-top: 24px;}
.u-pt40 { padding-top: 40px;}

.u-mt24 { margin-top: 24px;}
.u-mt48 { margin-top: 48px;}
.LL { font-size: 2.3em;}
.l  { font-size: 1.3333em;} 
.s  { font-size: .95em/*14*/; line-height: 1.6;}
.ss { font-size: .8em/*14*/;}

@media print {
	#page-top { display:none;}
	body { width:980px;}
	header .container div:last-of-type {margin-left: auto;}
	nav li{ display: inline;}
}