/* CSS Document */

/*font-size:.625rem;/*10px*/
/*font-size:.75rem;/*12px*/
/*font-size:.875rem;/*14px*/
/*font-size:1rem;/*16px*/
/*font-size:1.125rem;/*18px*/
/*font-size:1.25rem;/*20px*/

/*font-size:1.625rem;/*26px*/

/*font-size:1.875rem;/*30px*/

/*font-size:2.25rem;/*36px*/

/*font-size:3.125rem;/*50px*/

#contents{
font-family: 'Noto Sans JP', sans-serif;
}

#contents > *{
}

#contents *{
box-sizing: border-box;
}

#contents img{
max-width: 100%;
height: auto;
}

#contents sup{
font-size: .75rem; 
}

.section{
overflow: hidden;
position: relative;
display: flex;
background-color: white;
min-height: 100vh;
padding-top:100px;
padding-bottom: 100px;
font-size: 1.125rem;
line-height: 1.6;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.section:nth-child(1){
padding: 0;
}

.section > *{
flex-basis: 100%;
}

.section *{
font-size: inherit;
color: inherit;
word-break: break-all;
line-height: inherit;
}

.section h2{
margin-bottom: 40px;
font-size: 6.25rem;
font-weight: bold;
text-align: center;
line-height: 1.2;
}

.section h3{
margin-bottom: 2rem;
font-size: 1.875rem;
line-height: 1.4;
}

.section p,
.section ul{
margin-bottom: 1.125rem;
}

.section a{
color: black;
}

.section a:not(.btn){border-bottom: 1px dashed red;}
.section .figure a, .section a:not(.btn):hover{border-bottom: none;}

.section a:hover{
opacity: 1;
}

.section strong{
font-weight: bold;
}

.inner{
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 0 10px;
}

.narrow{
max-width: 1000px !important;
width: 100%;
margin: 0 auto;
}

.full{
max-width: none !important;
width: 100%;
margin: 0 auto;
}

.figure{
position: relative;
margin-bottom: 1.125rem;
text-align: center;
}

.figure.shadow::before{
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to left, rgba(255,255,255, 1) 0, rgba(255,255,255, 0) 100%);
opacity: .7;
z-index: 1;
}

.bg-black .figure.shadow::before{
background: linear-gradient(to right, rgba(0,0,0, 1) 0, rgba(0,0,0, 0) 100%);
}

.title-box{
position: relative;
min-height: 80vh;
padding-top: 0;
align-items: flex-start;
}

.title-box .flex{
display: flex;
background: url(../images/index-bg_title_off.jpg) center center no-repeat;
background-size: contain;
max-width: 1400px;
margin: 0 auto;
justify-content: center;
}

.title-box .flex> *{
padding-top:100px;
text-align: center;
}

.title-box .figure{
margin-bottom: 0;
text-align: right;
}

.title-box h1{
text-align: left;
}

.bg-black{
background-color: black;
color: white;
}

.bg-black a{
color: white;
}

.bg-white{
background-color: white;
color: black;
}

.bg-white a{
color: black;
}

#nav{
position: absolute;
top: 80%;
width: 100%;
}

.local-nav{
width: 100%;
}

.local-nav ul{
display: flex;
max-width: 1000px;
margin: 0 auto;
padding: 1em 0;
border: 1px solid white;
font-weight: bold;
text-align: center;
justify-content: space-around;
}

.local-nav ul li{
position: relative;
}

.local-nav ul li a{
position: relative;
display: block;
padding: 10px 5px 20px;
border: none !important;
}

.local-nav ul li a::after{
content: "";
position: absolute;
bottom: 10px;
left: 50%;
display: block;
border: 8px solid transparent;
border-top-color: white;
border-bottom: none;
transform: translate(-50%, 0);
transition: .1s;
}

.local-nav ul li a:hover{
color: red;
opacity: 1;
}

.local-nav ul li a:hover::after{
border-top-color: red;
transform: translate(-50%, 40%);
}

.features{
width: 166.666666%;
}

.feature-box{
}

.feature-box h4{
margin-bottom: 0;
color: #2693FF;
font-size: 3.125rem;
text-align: center;
}

.lineup > .inner{
padding: 1.125rem 0 0;
}

.lineup > .inner:nth-of-type(odd){
background-color: white;
color: black;
}

.lineup > .inner:nth-of-type(odd) a{
color: black;
}

.box-border,
.bg-black .box-border{
border: 1px solid white;
}

.bg-white .box-border,
.lineup > .inner:nth-of-type(odd) .box-border{
border-color: black;
}

.bg-design{
background: url("../images/wx11000t12-image.jpg") center center no-repeat white;
background-size: cover;
}

.bg-design > *{
z-index: 1;
}

.bg-design::before,
.bg-design::after{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 80%;
display: block;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
z-index: 0;
}

.bg-design::after{
top: 80%;
bottom: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

#dfs{
padding-top: 0;
}

.bg-dfs{
position: relative;
background: url("../images/index-bg_dfs.jpg") top center no-repeat black;
background-size: cover;
width: 100%;
height: 100vh;
z-index: 0;
}

.bg-dfs > *{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;
z-index: 1;
}

.bg-dfs::before{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
z-index: 0;
}

.btn{
overflow: hidden;
position: relative;
display: inline-block;
border: 1px solid red;
padding: 5px 10px !important;
padding-right: 10% !important;
color: white !important;
transition: .2s;
z-index: 1;
}

.btn::before{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background-color: red;
width: 100%;
height: 100%;
transition: .2s;
z-index: -1;
}

.btn::after{
content: "";
position: absolute;
top: 50%;
right: 0;
bottom: 0;
display: block;
width: calc(1em + 20px);
height: calc(1em + 20px);
border: 1px solid white;
border-bottom: none;
border-left: none;
transform: translate(-50%, -50%) rotate(45deg);
transition: .2s;
}

.btn:hover{
color: red !important;
opacity: 1;
}

.btn:hover::before{
left: 100%;
}

.btn:hover::after{
border-color: red;
}

.section .link{
position: relative;
display: inline;
border-bottom: 1px dashed red;
color: red;
}

.section .link::after{
content: "";
display: inline-block;
width: .5em;
height: .5em;
border-top: 1px solid red;
border-right: 1px solid red;
transform: translate(0, -.1em) rotate(45deg) skew(-10deg, -10deg);
transition: .2s;
}

.section .link:hover{
border-bottom-color: transparent;
}

.section .link:hover::after{
transform: translate(1em, -.1em) rotate(45deg) skew(-10deg, -10deg);
}

.notes{
display: table;
font-size: .875rem;
text-align: left;
}

.notes > *{
display: table-row;
}

.notes > * > *{
display: table-cell;
}

.notes > * > *:nth-child(1){
text-align: right;
padding-right: .5em;
word-break: keep-all;
}

.box-image{
position: relative;
margin: 100px auto;
padding-right: 20%;
text-shadow: 1px 1px 0 white;
z-index: 10;
}

.box-image > .col{
z-index: 1;
}

.box-image > .col3{
z-index: 2;
}

.box-image > .col3 > *{
position: relative;
z-index: 1;
}

.box-image .figure{
overflow: hidden;
position: relative;
margin-left: -20%;
margin-right: -20%;
}

.box-image .figure > img{
position: relative;
}

.box-image .figure.shadow::before{
left: 25%;
opacity: 1;
}

.box{
display: inline-block;
background-color: lightgray;
margin: 2px 4px;
padding: .2rem .6rem .3rem;
line-height: 1 !important;
color: black;
}

.box > *{
line-height: 1 !important;
}

.box:nth-child(1){margin-left: 0;}
.box:nth-last-child(1){margin-right: 0;}

.box.red{
background-color: pink;
color: black;
}

.box.black{
background-color: black;
color: white;
}

.video{
position:relative;
width:100%;
margin:0 auto;
padding-top:56.25%;
}

.video iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}


/* .history
--------------------------------------------------------------------------- */

.history{
position: relative;
}

.history ul{
overflow: hidden;
display: flex;
margin: 50px auto;
font-size: 1.25rem;
text-align: center;
align-items: flex-start;
}

.history ul *{
word-break: keep-all;
}

.history li{
display: flex;
padding: 5px;
flex-wrap: wrap;
flex-basis: 100%;
justify-content: center;
align-items: center;
}

.history span{
display: block;
flex-basis: 100%;
}

.history strong{
font-weight: normal;
}

.history .band{
display: flex;
font-size: .75rem;
}

.history .band > *{
display: flex;
margin: 2px;
border: 1px solid #aaaaaa;
justify-content: center;
align-items: center;
}

.history .band > *:nth-child(1){margin-left: 0;}
.history .band > *:nth-last-child(1){margin-right: 0;}

.history .band strong{
font-size: 1.125rem;
padding-right: 2px;
}

.history .band .band6{border-color: red; color: red;}
.history .band .band5{border-color: #2693FF; color: #2693FF;}
.history .band .band2_4{border-color: fuchsia; color: fuchsia;}

.history .name{
margin-bottom: 10px;
font-size: 3.125rem;
line-height: 1;
}

.history .sub{
background-color: #aaaaaa;
margin-bottom: 5px;
color: white;
}

.history .sub strong{
font-size: 1.875rem;
line-height: 1;
}

.history .data{
position: relative;
margin-bottom: 12px;
font-size: 1rem;
}

.history .data::after{
content: "";
position: absolute;
top: 100%;
left: 50%;
display: block;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: white;
border-bottom: none;
transform: translateX(-50%);
}

.history .data strong{
font-size: 1.25rem;
}

.history .wifi6e{
flex-basis: 120%;
}

.history .wifi6e .data{
color: red;
font-size: 1.25rem;
}

.history .wifi6e .data::after{
border-top-color: red;
}

.history .wifi6e .data strong{
font-size: 1.875rem;
}

.history .wifi6e .name{
font-size: 3.75rem;
}

.history .wifi6e .sub{
background-color: red;
}

.history ul,
.history li{
position: relative;
transform: translate(0, 0);
transition: .4s ease-out;
opacity: 1;
z-index: 1;
}

.history li:nth-last-child(1){margin-top: 0%; transition-delay: .5s;}
.history li:nth-last-child(2){margin-top: 8%; transition-delay: .4s;}
.history li:nth-last-child(3){margin-top: 15%; transition-delay: .3s;}
.history li:nth-last-child(4){margin-top: 17%; transition-delay: .2s;}
.history li:nth-last-child(5){margin-top: 19%; transition-delay: .1s; flex-basis: 80%;}
.history li:nth-last-child(6){margin-top: 20%; transition-delay: 0s; flex-basis: 80%;}

.history ul::before,
.history ul::after{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: linear-gradient(to left, white 0%, black 100%);
border-radius: 100%;
transform: translateY(-40%) rotate(-10deg);
z-index: 0;
opacity: .4;
transition: .4s ease-in-out;
transition-delay: .5s;
}

.history ul::after{
top: -30px;
right: -100px;
bottom: 30px;
left: -100px;
background: black;
transform: translateY(-40%) rotate(-12deg);
opacity: 1;
}

.history.preset li{transform: translate(-100%, 50%); opacity: 0;}
.history.preset ul::before{opacity: 0;}

.history.preset.move li{transform: translate(0, 0); opacity: 1;}
.history.preset.move ul::before{opacity: .4;}


/* .triband
--------------------------------------------------------------------------- */

.triband{
padding: 100px 0;
}

.triband .grid{
display: grid;
font-size: 1.25rem;
grid-template-columns: .3fr 1fr 1fr 1fr;
column-gap: 10px;
text-align: center;
}

.triband .name{
position: relative;
border-left: 5px solid red;
border-right: 5px solid #666666;
color: #666666;
font-size: 1.875rem;
grid-column: 2/4;
}

.triband .name::before{
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
display: block;
border-top: 2px solid #666666;
z-index: 0;
}

.triband .name > *{
position: relative;
display: inline-block;
background-color: black;
padding: 0 10px;
z-index: 1;
}

.triband .name.wifi6e{
border-right: 5px solid red;
color: white;
font-size: 2.5rem;
grid-column: 2/5;
}

.triband .name.wifi6e::before{
border-top-color: red;
}

.triband .blank{
overflow: hidden;
display: flex;
border-right: 5px solid red;
align-items: flex-end;
justify-content: center;
}

.triband .blank span{
display: flex;
background-color: white;
width:3em;
height: 3em;
margin-bottom: -.5em;
border-radius: 100%;
color: red;
font-weight: bold;
justify-content: center;
align-items: center;
z-index: 0;
}

.triband .band{
display: flex;
background-color: black;
padding: 10px;
border: 5px solid #666666;
line-height: 1;
align-items: center;
justify-content: center;
}

.triband .band strong{
position: relative;
display: inline-block;
padding-right: 5px;
font-size: 1.875rem;
margin-top: -.2em;
}

.triband .band6{border-color: red; font-size: 1.875rem; color: red;}
.triband .band6 strong{font-size: 2.5rem;}
.triband .band5{border-color: #2693FF; color: #2693FF;}
.triband .band2_4{border-color: fuchsia; color: fuchsia;}

.triband .border{
margin: 10px 0;
border-bottom: 1px solid gray;
grid-column: 1/5;
}

.triband .text-title,
.triband .text{
display: flex;
font-size: .75rem;
line-height: 1.6;
justify-content: center;
align-items: center;
}
.triband .text ul{
text-align: left;
}

.triband .text li{
padding-left: 1em;
text-indent: -1em;
}

.triband .text.band6{
color: white;
}


.triband .grid > *{
transition: .2s ease-in;
}

.triband.preset .grid > *{
transform: scaleX(0);
}

.triband.preset .grid .blank > span{
transform: scale(0);
transition: .2s ease-in;
}

.triband.preset.move .grid > *{
transform: scaleX(100%);
}

.triband.preset.move .grid .band{
transition-delay: 0s;
}

.triband.preset.move .grid .name{
transition-delay: 0s;
}

.triband.preset.move .grid .band6,
.triband.preset.move .grid .name.wifi6e,
.triband.preset.move .grid .blank{
transition-delay: .2s;
}

.triband.preset.move .grid .blank > span{
transform: scale(100%);
transition-delay: .2s;
}


/* .channel
--------------------------------------------------------------------------- */

.channel{
padding: 50px 0;
}

.channel .grid{
display: grid;
font-size: 1.25rem;
grid-template-columns: 14% 24% 44%;
column-gap: 9%;
text-align: center;
line-height: 1;
}

.channel .gain{
position: relative;
display: flex;
padding: 30px 0 0;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

.channel .gain::before{
content: "";
position: absolute;
top: 0;
left: 50%;
bottom: 50%;
width: 0;
border-left: 1px solid white;
z-index: 0;
}

.channel .circle{
position: relative;
display: flex;
font-size: 1.25rem;
flex-wrap: wrap;
flex-basis: 100%;
z-index: 1;
}

.channel .circle > *{
flex-basis: 100%;
}

.channel .circle::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
background-color: white;
width: 100%;
padding-top: 100%;
border-radius: 100%;
transform: translate(-50%, -50%);
z-index: -1;
}

.channel .band2_4 .circle{padding: 32% 0 32%;}
.channel .band5 .circle{padding: 35% 0 35%;}
.channel .band6 .circle{padding: 28% 0 28%;}
.channel .band6 .circle::before{width: 80%; padding-top: 80%;}

.channel .circle .sub{position: absolute; top: 100%; width: 100%; color: white; text-align: center;}

.channel .circle .title{font-size: .75rem;}

.channel .circle .num{font-weight: bold;}
.channel .band2_4 .circle .num{font-size: 1.875rem;}
.channel .band5 .circle .num{font-size: 2.5rem;}
.channel .band6 .circle .num{font-size: 3.75rem;}

.channel .band2_4 .circle .num strong{font-size: 2.5rem;}
.channel .band5 .circle .num strong{font-size: 3.75rem;}
.channel .band6 .circle .num strong{font-size: 6.25rem;}


.channel .band{
position: relative;
display: flex;
margin-bottom: 5px;
justify-content: center;
align-items: flex-end;
line-height: 1;
}

x.channel .band::after{
content: "";
position: absolute;
top: 50%;
right: -120%;
margin-top: 2%;
border: 6px solid transparent;
border-left: 10px solid white;
border-right: none;
transform: translateY(-50%);
}

x.channel .band::before{
content: "";
position: absolute;
top: 50%;
right: -120%;
left: 85%;
margin-top: 2%;
border-top: 2px solid white;
transform: translateY(-50%);
}

.channel .band.band5::after,
.channel .band.band5::before{
right: -107%;
}

.channel .band.band5::before{
left: 66%;
}

.channel .band.band6::before{
display: none;
}

.channel .band.band6 > span::before{
content: "NEW";
position: absolute;
bottom: 100%;
left: 50%;
color: #ffffff;
font-size: 1.25rem;
transform: translateX(-50%);
}



.channel .band.band2_4{font-size: 1.25rem; font-weight: normal;}
.channel .band.band5{font-size: 1.25rem; font-weight: normal;}
.channel .band.band6{font-size: 1.875rem; font-weight: bold;}

.channel .band.band2_4 strong{font-size: 1.875rem; padding-right: 2px; font-weight: normal;}
.channel .band.band5 strong{font-size: 1.875rem; padding-right: 2px; font-weight: normal;}
.channel .band.band6 strong{font-size: 2.5rem; padding-right: 2px;}

.channel .band2_4{color: fuchsia}
.channel .band5{color: #2693FF;}
.channel .band6{color: red;}

.channel .gain.band2_4::before{border-color: fuchsia;}
.channel .gain.band5::before{border-color: #2693FF;}
.channel .gain.band6::before{border-color: red;}

.channel .gain.band6 .circle{color: white;}
.channel .gain.band6 .circle::before{background-color: red;}


.channel .image{
position: relative;
z-index: 100;
}

.channel .image > span{
position: absolute;
bottom: 0;
left: 50%;
display: block;
width: 100%;
max-width: 220px !important;
margin: 0 auto;
transform: translateX(-50%);
}

.channel .image > span > span{
display: block;
}

.channel .size{
position: relative;
bottom: 1.5rem;
height: 1.5rem;
border: 1px solid gray;
border-top: none;
grid-column: 1/3;
z-index: 100;
}

.channel .size.band6{
grid-column: 3/4;
}

.channel .size.band6::before,
.channel .size.band6::after{
content: "";
position: absolute;
top: 50%;
right: 108%;
display: block;
background-color: gray;
height: 39px;
width: 9px;
transform: translate(-50%, -50%);
}

.channel .size.band6::after{
transform: translate(-50%, -50%) rotate(90deg);
}

.channel .size.all-band{
margin-top: 1rem;
border-color: white;
grid-column: 1/4;
}

.channel .size.all-band > span{
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
background-color: black;
padding: 0 10px;
color: red;
font-size: 2.5rem;
font-weight: bold;
transform: translate(-50%, -25%);
}

.channel .size.all-band > span span{font-size: 1.25rem; font-weight: normal;}
.channel .size.all-band > span strong{font-size: 3.75rem; line-height: 0;}


.channel.preset .band span{opacity: 0;}

.channel.preset.move .band.band2_4 span{
transition: .2s;
opacity: 1;
}

.channel.preset.move .band.band5 span{
transition: .2s;
transition-delay: .4s;
opacity: 1;
}

.channel.preset.move .band.band6 span{
transition: .2s;
transition-delay: .6s;
opacity: 1;
}



.channel.preset .band::before,
.channel.preset .band::after{
opacity: 0;
}

.channel.preset .band.band2_4::before,
.channel.preset .band.band2_4::after{
right: 0%;
}

.channel.preset .band.band5::before,
.channel.preset .band.band5::after{
right: 0%;
}

.channel.preset.move .band.band2_4::before,
.channel.preset.move .band.band2_4::after{
right: -120%;
transition: .2s;
transition-delay: .1s;
opacity: 1;
}

.channel.preset.move .band.band5::before,
.channel.preset.move .band.band5::after{
right: -107%;
transition: .2s;
transition-delay: .4s;
opacity: 1;
}

.channel.preset .gain::before{
bottom: 100%;
opacity: 0;
}

.channel.preset.move .gain::before{
bottom: 50%;
transition: .2s;
opacity: 1;
}

.channel.preset.move .gain.band2_4::before{
transition-delay: .1s;
}

.channel.preset.move .gain.band5::before{
transition-delay: .4s;
}

.channel.preset.move .gain.band6::before{
transition-delay: .7s;
}

.channel.preset .gain .circle{
transform: scale(0);
opacity: 0;
}

.channel.preset .image{
transform: translateX(-100%);
opacity: 0;
}

.channel.preset .size{
transform: translateY(50%);
opacity: 0;
}

.channel.preset .image{
}

.channel.preset.move .gain .circle{
transform: scale(100%);
transition: .3s;
opacity: 1;
}

.channel.preset.move .gain.band2_4 .circle{
transition-delay: .2s;
}

.channel.preset.move .gain.band5 .circle{
transition-delay: .5s;
}

.channel.preset.move .gain.band6 .circle{
transition-delay: .8s;
}

.channel.preset.move .image{
transform: translateX(0%);
transition: .8s;
opacity: 1;
}

.channel.preset.move .image.band2_4{
transition-delay: .7s;
}

.channel.preset.move .image.band5{
transition-delay: .7s;
}

.channel.preset.move .image.band6{
transition-delay: .7s;
}

.channel.preset.move .size{
transform: translateX(0%);
transition: .4s;
transition-delay: .8s;
opacity: 1;
}

.channel.preset.move .size.all-band{
transition-delay: 1s;
}


.channel .image img{
animation: vibration 0.2s infinite;
}

@keyframes vibration{
0%{transform: translateY(0); }
50%{transform: translateY(-2%);}
100%{transform: translateY(0);}
}

.channel .image > span > span{
animation: chase 5s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}

.channel .image.band2_4 > span > span{
animation-duration: 9s;
}

.channel .image.band5 > span > span{
animation-duration: 7s;
}

@keyframes chase{
0%{transform: translateX(0%); }
5%{transform: translateX(2%);}
10%{transform: translateX(-2%);}
15%{transform: translateX(2%);}
20%{transform: translateX(-2%);}
30%{transform: translateX(6%);}
40%{transform: translateX(-4%);}
50%{transform: translateX(0%);}
55%{transform: translateX(-2%);}
60%{transform: translateX(2%);}
65%{transform: translateX(-2%);}
70%{transform: translateX(2%);}
80%{transform: translateX(-6%);}
90%{transform: translateX(4%);}
100%{transform: translateX(0%);}
}


/* .slide-bg
--------------------------------------------------------------------------- */

.slide-bg{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 300vh;
z-index: 10;
mix-blend-mode: difference;
}

.slide-bg > *{
position: relative;
width: 100%;
height: 150vh;
z-index: 0;
}

.z100{
position: relative;
z-index: 100 !important;
}

.slide-text .text{
position: relative;
}

.slide-text .text1,
.slide-text .text2{
position: absolute;
opacity: 0;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: .4s;
}

.slide-text .text2{
transform: translateY(0%);
z-index: 100;
}

.slide-text .text1,
.slide-text .move .text2{
transform: translateY(-50%);
opacity: 1;
}

.slide-text .move .text1{
transform: translateY(-100%);
opacity: 0;
}


/* .dfs
--------------------------------------------------------------------------- */

.dfs{
padding:  0;
}

.dfs .flex{
justify-content: center;
}

.dfs .title{
font-size: 1.25rem;
font-weight: bold;
line-height: 1.2;
margin-bottom: 30px;
}

.dfs .title strong{
font-size: 1.875rem;
}

.dfs .band6 .title span{
font-size: 1.875rem;
}

.dfs .band6 .title strong{
font-size: 2.5rem;
}

.dfs .circle{
position: relative;
display: flex;
padding: 3% 0;
margin: 0 40px;
font-size: 1.25rem;
text-align: center;
flex-wrap: wrap;
flex-basis: 100%;
justify-content: space-around;
z-index: 1;
}

.dfs .circle > *{
flex-basis: 100%;
}

.dfs .circle::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
background-color: #2693FF;
width: 100%;
padding-top: 100%;
border-radius: 100%;
transform: translate(-50%, -50%);
z-index: -1;
}

.dfs .inside{
position: relative;
display: flex;
padding: 19% 0;
line-height: 1.2;
justify-content: center;
}

.dfs .inside::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
background: rgba(0,0,0, .4);
border: 2px dashed white;
border: 2px dashed rgba(0,0,0, .4);
width: 70%;
padding-top: 70%;
border-radius: 100%;
transform: translate(-50%, -50%);
z-index: -1;
}

.dfs .inside strong{
font-size: 2.5rem;
}

.dfs .circle.band6::before{
background-color: red;
}

.dfs .circle.band6 .inside::before{
background: none;
border: 2px dashed rgba(255,255,255, .4);
}

.dfs.preset .circle{
transform: scale(0);
transition: .4s ease-in;
opacity: 0;
}

.dfs.preset.move .circle{
transform: scale(100%);
transition-delay: 0s;
opacity: 1;
}

.dfs.preset .inside{
transform: scale(0);
transition: .4s ease-in;
opacity: 0;
}

.dfs.preset.move .inside{
transform: scale(100%);
transition-delay: .2s;
opacity: 1;
}



#pin1_text{
}

#pin2_text{
overflow: hidden;
position: relative;
}

#pin2_text .pin2_box2{
position: absolute;
top: 250%;
transform: translateY(-50%);
}


#products{
position: relative;
z-index: 2;
}

#pin4{
position: relative;
z-index: 1;
padding-top: 50vh;
}

.bg-products{
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
margin: 0 auto;
padding-top:100px;
z-index: 0;
}

.bg-products img{
position: relative;
display: block;
width: 100%;
max-width: 1200px !important;
height: auto;
margin-left: auto;
}

#pin4::before,
#pin4::after{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 80%;
display: block;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
z-index: 1;
}

#pin4::after{
top: 80%;
bottom: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.bg-products + div{
position: relative;
z-index: 1;
}

.bg-products > div{
position: relative;
z-index: 0;
}

.bg-products::before{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
display: block;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
z-index: 1;
}

.box-image .figure > div{
transform: translateX(-20%);
opacity: 0;
transition: .8s;
}

.box-image.move .figure > div{
transform: translateX(0%);
opacity: 1;
}

.box-image > .col3,
.bg-design .flex > .col3{
opacity: 0;
transition: 1s;
}

.box-image.move > .col3,
.bg-design.move .flex > .col3{
opacity: 1;
}

#pin6{
}

#pin7{
background-color: black;
opacity: 0;
}

#pin8{
opacity: 0;
z-index: 100;
}

#logo{
z-index: 0;
}

#logo::before{
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to right, rgba(0,0,0, 1) 0, rgba(0,0,0, 0) 100%);
opacity: .7;
z-index: 1;
transform: translateX(0);
transition: .4s;
}

#logo.move::before{
transform: translateX(-100%);
}


/* loader
------------------------------------------------------------------ */

.loader{
position:absolute;
display:block;
top:0;
left:0;
right:0;
bottom:0;
background: black;
opacity:1;
z-index:100000;
}

@keyframes loader{
0%{transform: scaley(1); }
50%{transform: scaley(0.4);}
100%{transform: scaley(1);}
}

.loader .bar > div{
background-color: #fff;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
animation-fill-mode: both;
display: inline-block;
animation: loader 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}

.loader .bar > div:nth-child(2), .loader .bar > div:nth-child(4){animation-delay: -0.4s !important;}
.loader .bar > div:nth-child(1), .loader .bar > div:nth-child(5){animation-delay: -0.2s !important;}
.loader .bar > div:nth-child(1){background-color: red;}
.loader .bar > div:nth-child(2){background-color: white;}
.loader .bar > div:nth-child(3){background-color: red;}
.loader .bar > div:nth-child(4){background-color: white;}
.loader .bar > div:nth-child(5){background-color: red;}

.loader .bar{
position:fixed;
top: 50%;
left: 50%;
opacity:1;
z-index:2;
transform: translate(-50%, -50%);
}

.run .loader{
animation: loader-outro 1s forwards;
}

.run .bar{
display: none;
}

@keyframes loader-outro{
0%{opacity: 1;}
100%{opacity: 0; display: none; z-index: -1;}
}

.title-box .flex> *{
filter: brightness(.1);
transition: filter .8s;
transition-delay: .8s;
}

.run .title-box .flex{
background-image: url(../images/index-bg_title.jpg);
}

.run .title-box .flex > *{
filter: brightness(1);
}




/* common
--------------------------------------------------------------------------- */


.flex{display: flex;}
.flex> *{padding: 0 10px;flex: 1 1 auto;}

.flex.middle{align-items: center;}
.flex.center{justify-content: center;}
.flex.center> *{flex-basis: auto;}
.flex.wrap{flex-wrap: wrap;}

.col{flex-basis: 100%;}
.col2{flex-basis: 200%;}
.col3{flex-basis: 300%;}
.col4{flex-basis: 400%;}

.mb0{margin-bottom: 0 !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}
.mb60{margin-bottom: 60px !important;}
.mb70{margin-bottom: 70px !important;}
.mb80{margin-bottom: 80px !important;}
.mb90{margin-bottom: 90px !important;}
.mb100{margin-bottom: 100px !important;}

.mt0{margin-top: 0 !important;}
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mt60{margin-top: 60px !important;}
.mt70{margin-top: 70px !important;}
.mt80{margin-top: 80px !important;}
.mt90{margin-top: 90px !important;}
.mt100{margin-top: 100px !important;}

.p40{padding-top: 40px !important;padding-bottom: 40px !important;}
.p0{padding-top: 0 !important;padding-bottom: 0 !important;}
.pb100{padding-bottom: 100px !important;}

.center{text-align: center !important;}
.left{text-align: left !important;}
.right{text-align: right!important;}

.fs12{font-size: .75rem !important;}
.fs16{font-size: 1rem !important;}
.fs18{font-size: 1.125rem !important;}
.fs20{font-size: 1.25rem !important;}
.fs25{font-size: 1.5625rem !important;}
.fs30{font-size: 1.875rem !important; line-height: 1.4 !important;}
.fs40{font-size: 2.5rem !important; line-height: 1.4 !important;}
.fs50{font-size: 3.125rem !important; line-height: 1.4 !important;}
.fs60{font-size: 3.75rem !important; line-height: 1.4 !important;}
.fs80{font-size: 5rem !important; line-height: 1.2 !important;}
.fs100{font-size: 6.25rem !important; line-height: 1.2 !important;}

.lh1{line-height: 1 !important;}

.bold{font-weight: bold !important;}

.filter{mix-blend-mode: soft-light;}

.red{color: red !important;}


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

.title-box .flex,
.bg-design,
.bg-dfs{
background-size: cover;
}

}


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


.dfs .title{margin-bottom: 10px;}

.section h2{font-size: 5rem;}

.feature-box h4{font-size: 2.5rem;}

.history .name,
.history .wifi6e .name,
.dfs .band6 .title strong,
.dfs .inside strong{font-size: 1.875rem;}

.dfs .title strong,
.dfs .band6 .title span,
.section h3{font-size: 1.5625rem;}

.history .wifi6e .data strong,
.history .sub strong{font-size: 1.25rem;}

.local-nav ul,
.dfs .circle,
.dfs .title,
.history .band strong,
.history .sub{font-size: 1rem;}

.history .band{font-size:.625rem;}

.fs25{font-size: 1.25rem !important;}
.fs30{font-size: 1.5625rem !important;}
.fs40{font-size: 1.875rem !important;}
.fs50{font-size: 2.5rem !important;}
h3.fs60, .fs60{font-size: 3.125rem !important;}
.fs80{font-size: 3.75rem !important;}
.fs100{font-size: 5rem !important;}
}


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

.bg-dfs{
background-size: contain;
}

.title-box .figure{
display: none;
}

#nav{
position: relative;
top: auto;
}

.local-nav ul{
justify-content: center;
flex-direction: column;
}

.bg-products{display: none;}

.box-image{
padding-right: 0;
flex-wrap: wrap;
}

.bg-design{background-position: 15%;}
.bg-design .flex > .col2{display: none;}
.bg-design::before{bottom: 0;}

.section h2{font-size: 2.8125rem !important;}

.feature-box h4{font-size: 2.5rem !important;}

.section h3{font-size: 1.25rem !important;}

.flex{
flex-wrap: wrap;
}

.col{order: 1;}
.col2{order: 2;}
.col3{order: 3;}
.col3{order: 4;}

.history ul{
flex-wrap: wrap;
flex-direction: column-reverse;
align-items: flex-start;
}

.history li:nth-last-child(1n){
display: flex;
width: 100%;
margin-top: 0;
transform: none !important;
flex-wrap: nowrap;
align-items: stretch;
justify-content: center;
}

.history li > *{
flex-basis: 25%;
}

.history li > div{
padding-right: 10%;
flex-basis: 75%;
}

.history .data{
display: flex;
padding-right: 5px;
margin-bottom: 0;
margin-right: 20px;
border-right: 1px solid white;
align-items: center;
justify-content: flex-end;
}

.history .wifi6e .data{
border-right-color: red;
}

.history .data::after,
.history .wifi6e .data::after{
top: 50%;
left: 100%;
border: 7px solid transparent;
border-left-color: white;
border-radius: none;
transform: translate(5px,-50%);
}

.history .wifi6e .data::after{
border-left-color: red;
}

.history ul::before, .history ul::after{display: none;margin-top: 0;}

.features{width: 100%;}
.features .feature-box{flex-basis: 100%;}

.dfs .circle{height: 360px; margin: 20px auto;}
.dfs .circle::before{width: 360px; padding-top: 360px;}
.dfs .inside::before{width: 250px; padding-top: 250px;}

.channel .grid{
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.channel .grid > *{
flex-basis: 100%;
}

.channel .band2_4{
order: 1;
}

.channel .band5{
order: 2;
}

.channel .band6,
.channel .all-band{
order: 3;
}

.channel .band{
margin-top: 60px;
}

.channel .band::before, .channel .band::after{
display: none !important;
}

.channel .band2_4 .circle::before{
width: 30%;
padding-top: 30%;
}

.channel .band5 .circle::before{
width: 60%;
padding-top: 60%;
}

.channel .band6 .circle::before{
width: 80%;
padding-top: 80%;
}

.channel .gain .circle{padding: 22% 0 22% !important;}
.channel .gain.band6 .circle{padding: 30% 0 30% !important;}

.channel .image.band2_4 > span{
max-width: 30% !important;
}

.channel .size{
display: none;
}

.channel .size.all-band{
display: block;
margin-top: 40px;
}

.channel .size.all-band > span{
position: relative;
top: auto;
left: auto;
transform: none;
text-align: center;
}

.slide-bg{height: 200vh;}
.slide-bg > *{height: 100vh;}

.slide-text{width: 100%;}

.slide-text .text p{text-align: center !important;}
.slide-text .text1, .slide-text .text2{top: 0; width: 100%;}
.slide-text .text2{transform: translateY(100%);}
.slide-text .text1, .slide-text .move .text2{transform: translateY(0);}

.slide-text .move .text1{
transform: translateY(-100%);
}

#pin4{padding-top: 100vh;}

#pin2 .inner > .flex > *{
height: 45vh;
padding: 0;
order: 1;
}

#pin2 .inner > .flex .slide-text{
order: 2;
}

#pin2 .inner > .flex > *:not(.slide-text){
display: flex;
align-items: flex-end;
justify-content: center;
}

#pin2 .inner > .flex .figure{
max-width: 40vh;
}

.box-image .figure > div{transform: translateX(0%);}

.box-image .motion{transform: translate(0%, 0%) !important;}


.lineup > .inner{
text-align: center;
}

.notes{font-size: .75rem;}

.fs25{font-size: 1.125rem !important;}
.fs30{font-size: 1.25rem !important;}
.fs40{font-size: 1.5625rem !important;}
.fs50{font-size: 1.875rem !important;}
h3.fs60, .fs60{font-size: 2.1875rem !important;}
.fs80{font-size: 2.8125rem !important;}
.fs100{font-size: 2.8125rem !important;}
}


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

.history li > div{
padding-right: 0;
}

.triband .grid{grid-template-columns: 1fr 1fr 1fr;}
.triband .band{font-size: 1rem;}
.triband .band.band6,
.triband .band strong{font-size: 1.25rem;}
.triband .band.band6 strong{font-size: 1.5625rem;}
.triband .text-title{display: none;}
.triband .name{grid-column: 1/3;}
.triband .name.wifi6e{grid-column: 1/4;}
.triband .border{grid-column: 1/4;}

}