@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(min-width:1000px){

/*STYLE*/
.sp {
display:none;
}

.cts {
width:1100px;
}



/*SET*/
.titles {
padding-bottom:40px;
}

.titles .category {
font-size:110%;
font-weight:500;
color:#fff;
position:relative;
margin-bottom:15px;
}

.titles .underline {
position:relative;
}

.titles h2 {
font-size:350%;
font-weight:500;
line-height:135%;
font-family: 'Noto Serif JP', serif;
color:#fff;
}

.titles h2 sup {
font-size:50%;
}

.titles .copy {
font-size:110%;
color:#969696;
padding-top:30px;
}

.titles .attention {
font-size:70%;
color:#969696;
padding-top:10px;
}

.movie {
width:100%;
}

.movie video {
width:100%;
height:auto;
}

.movie .control {
display:flex;
justify-content:center;
align-items:center;
margin-top:15px;
}

.movie .control_btn {
width:25px;
height:25px;
background:url(../images/movie_stop.svg) center;
cursor:pointer;
}

.movie .control_btn:hover {
-webkit-animation:more_btn_hover 0.5s ease forwards;
animation:more_btn_hover 0.5s ease forwards;
}

.movie .control_btn.play {
width:25px;
height:25px;
background:url(../images/movie_play.svg) center;
}

.movie .control_btn.repeat {
width:135px;
height:25px;
background:url(../images/movie_repeat.svg) left no-repeat;
}

.movie .control_btn.repeat:before {
content:"繰り返し見る";
color:#fff;
padding-left:35px;
display:block;
font-size:90%;
color:#777;
}

.movie .again {
width:25px;
height:25px;
background:#ddd;
}

.movie .repeat_btn {
font-size:90%;
color:#777;
cursor:pointer;
}

.middle_titles .function {
font-size:110%;
font-weight:500;
color:#969696;
padding-bottom:20px;
}

.middle_titles h2 {
font-size:250%;
font-weight:500;
line-height:135%;
font-family: 'Noto Serif JP', serif;
color:#fff;
padding-bottom:50px;
}

.about_subcopy {
font-size:110%;
font-weight:500;
line-height:135%;
color:#969696;
padding-bottom:15px;
}

.about_copy {
font-size:250%;
font-weight:500;
line-height:135%;
font-family: 'Noto Serif JP', serif;
color:#fff;
padding-bottom:50px;
}

.about {
width:1100px;
margin:50px auto;
background:#141414;
padding:80px 100px 50px;
}

.about_close {
width:40px;
margin:50px auto 0;
cursor:pointer;
}

.annotation {
font-size:70%;
color:#696969;
padding-top:10px;
text-align:right;
}



/*MORE BTN*/
.more_btn {
cursor:pointer;
margin:50px auto 0;
height:50px;
}

.more_btn .btn {
display:flex;
justify-content:center;
align-items:center;
position:relative;
display:flex;
justify-content:center;
align-items:center;
height:50px;
}

.more_btn:hover {
-webkit-animation:more_btn_hover 0.5s ease forwards;
animation:more_btn_hover 0.5s ease forwards;
}

.more_btn .btn .btn_bg {
position:relative;
}

.more_btn .btn .item {
font-size:90%;
font-weight:500;
color:#969696;
position:absolute;
line-height:100%;
padding-right:25px;
}

.more_btn .btn .item:before {
content:"";
}

.more_btn .btn .icon {
position:absolute;
width:15px;
height:10px;
right:25px;
}

.more_btn .btn .icon:before {
content:"";
width:15px;
height:2px;
background:#969696;
position:absolute;
top:0;
left:0;
right:0;
margin:auto;
display:block;
}

.more_btn .btn .icon:after {
content:"";
width:15px;
height:2px;
background:#969696;
position:absolute;
bottom:0;
left:0;
right:0;
margin:auto;
display:block;
}

.more_btn .btn .arrow {
width:10px;
height:10px;
border-top:#969696 2px solid;
border-right:#969696 2px solid;
transform:rotate(45deg);
position:absolute;
right:25px;
}



/*COL IMG*/
.col_img {
    display: flex;
}

.col_img img {
    width: 47.3%;
}



/*DETAIL BTN*/
.detail_btn {
    margin: 40px 0 0 auto;
    width:200px;
}

.detail_btn .btn a {
    width:200px;
    height:50px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#00442d;
    color: #fff;
    position:relative;
}

.detail_btn .btn a:hover {
    animation:hover 0.5s ease forwards;
}

.detail_btn .btn a .arrow {
    width:10px;
    height:10px;
    border-top:#fff 1px solid;
    border-right:#fff 1px solid;
    transform:rotate(45deg);
    position:absolute;
    right:20px;
}



/*MV*/
#mv {
width:100%;
}

#mv .movie_cts {
width:100%;
}

#mv .movie_cts video {
width:100%;
height:auto;
}



/*INTRO*/
#intro {
padding:150px 0 150px;
}

#intro .subcopy {
width:1083px;
margin:0 auto 50px;
}

#intro .maincopy {
width:1048px;
margin:auto;
}



/*ZANMAI*/
#zanmai {
padding:150px 0;
}

#zanmai .smart_access p {
    color:#fff;
}

#zanmai .smart_access {
    padding-top:30px;
}

#zanmai .smart_access .items {
    text-align:center;
    padding-bottom:20px;
}

#zanmai .smart_access .items .subitem {
    font-size:125%;
    letter-spacing:3px;
    padding-bottom:20px;
}

#zanmai .smart_access .items .mainitem {
    width:600px;
    margin:0 auto 30px;
}

#zanmai .smart_access .mainimage {
    margin-bottom:40px;
}

#zanmai .smart_access .explains {
    display:flex;
    justify-content:space-between;
    padding-bottom:50px;
}

#zanmai .smart_access .explains .explain {
    width:calc(100% - 230px);
}

#zanmai .smart_access .explains .explain .tx {
    font-size:100%;
    line-height:170%;
    padding-bottom:5px;
}

#zanmai .smart_access .explains .explain .attention {
    font-size:100%;
    line-height:170%;
    color:#666;
}

#zanmai .detail_btn {
    margin-top: 0;
}



/*Mini LED*/
#mini_led_01 {
    padding:150px 0;
}

#mini_led_01 .movie_title {
    display: flex;
}

#mini_led_01 .movie_title li {
    margin-bottom: 15px;
    width: 50%;
    text-align: center;
    color: #ddd;
    font-size: 20px;
    font-family: 'Noto Serif JP', serif;
}

#mini_led_02 {
    padding:150px 0;
}

#mini_led_02 .col_img {
    margin-bottom: 40px;
}

#mini_led_02 dl {
    margin-bottom: 10px;
    font-size: 110%;
}

#mini_led_02 dt {
    float: left;
    color: #fff;
}

#mini_led_02 dd {
    overflow: hidden;
    color: #969696;
}

#mini_led_02 .note {
    color: #969696;
    font-size: 11px;
}



/*ENGINE*/
#engine {
padding:150px 0;
}

#engine .titles {
position:relative;
}

#engine .more_btn {
width:270px;
}

#engine .about .ex {
color:#969696;
}

#engine .zr_logo {
width:120px;
position:absolute;
right:0;
bottom:50px;
}



/*SENSING*/
#sensing {
padding:150px 0;
}

#sensing .cts {
width:1220px;
position:relative;
}

#sensing .titles {
width:1100px;
margin:auto;
}

#sensing .more_btn {
width:270px;
}

#sensing .about .ex {
color:#969696;
}

#sensing .slider_cts {
position:relative;
}

#sensing .sensing_container {
width:100%;
margin:auto;
padding:0 60px;
}

#sensing .sensing_container .movie_cts {
padding-top:40px;
position:relative;
}

#sensing .sensing_container .swiper-slide {
opacity:0.4;
}

#sensing .sensing_container .swiper-slide-active {
opacity:1;
}

#sensing .sensing_container .swiper-slide-active .ex {
font-size:110%;
text-align:center;
color:#fff;
padding:30px 0 20px;
}

#sensing .sensing_container .ex .fs {
font-size:80%;
}

#sensing .sensing_container .explain {
position:relative;
}

#sensing .sensing_container .explain .copy {
font-size:110%;
color:#969696;
}

#sensing .sensing_container .explain .sensing_logo {
width:200px;
position:absolute;
top:0;
right:0;
}

#sensing .sensing_container .swiper-slide-active .copy {
font-size:110%;
color:#969696;
}



/*ZIS*/
#zis {
padding:150px 0;
}

#zis .main_img {
margin-bottom: 60px;
}



/*IMMERSIVE SOUND 360*/
#immersive_sound_360 {
padding:150px 0;
}



/*VIDEO SERVICE*/
#video_service {
padding:150px 0;
}

#video_service .main_img {
max-width: 277px;
margin: 0 auto;
}



/*COMPARISON*/
#comparison {
padding:150px 0;
}

#comparison {
}

#comparison .titles {
padding-bottom:0;
}

#comparison .comparison_cts {
position:relative;
width:1100px;
height:671px;
margin:auto;
overflow:hidden;
}

#comparison .model {
position:absolute;
bottom:0;
left:0;
transform:translate(-100%,100%);
}

#comparison .model img {
position:absolute;
top:15px;
right:15px;
z-index:10;
}

#comparison .model_110v img {
width:95px;
top:10px;
right:15px;
}

#comparison .model_100v img {
width:95px;
}

#comparison .model_85v img {
width:70px;
}

#comparison .model_75v img {
width:70px;
}
    
#comparison .model_65v img {
width:70px;
}

#comparison .model.active {
transform:translate(0,0);
}

#comparison .model_110v {
width:1100px;
height:616px;
background-size:cover;
transition:1s;
transition-delay:2s;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
}

#comparison .model_110v video {
margin: 0 auto;
z-index: 1;
width: 100%;
}

#comparison .comparison_bg.active {
opacity:1;
}

#comparison .model_100v {
width:1000px;
height:560px;
transition:1s;
border-top:#aaa 1px dotted;
border-right:#aaa 1px dotted;
transition-delay:1.5s;
}

#comparison .model_85v {
width:850px;
height:476px;
transition:1s;
border-top:#aaa 1px dotted;
border-right:#aaa 1px dotted;
transition-delay:1s;
}

#comparison .model_75v {
width:750px;
height:420px;
border-top:#aaa 1px dotted;
border-right:#aaa 1px dotted;
transition:1s;
transition-delay:0.5s;
}

#comparison .model_65v {
width:650px;
height:364px;
border-top:#aaa 1px dotted;
border-right:#aaa 1px dotted;
transition:1s;
}

#comparison .size_change {
width:741px;
height:415px;
background:rgba(0,0,0,0.5);
}

#comparison .more_btn {
width:280px;
}

#comparison .model_110v.disabled {
transition:0s;
transition-delay:0s;
}
#comparison .model_100v.disabled {
transition:0s;
transition-delay:0s;
}
#comparison .model_85v.disabled {
transition:0s;
transition-delay:0s;
}
#comparison .model_75v.disabled {
transition:0s;
transition-delay:0s;
}
#comparison .model_65v.disabled {
transition:0s;
transition-delay:0s;
}



/*BANNER*/
.banner_list {
    margin: 150px auto;
    max-width: 1260px;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px 0;
}

.banner_list li {
    width: 48.3%;
}



/*GROBAL*/
#lp_grobal {
}

#lp_grobal .nav_btn {
width:54px;
height:54px;
position:fixed;
top:calc(50% - 27px);
right:0;
display:flex;
justify-content:center;
align-items:center;
z-index:998;
cursor:pointer;
background:#00442d;
}

#lp_grobal .nav_btn_close {
width:54px;
height:54px;
position:fixed;
top:calc(50% - 27px);
right:0;
background:transparent;
z-index:999;
display:none;
cursor:pointer;
}

#lp_grobal .nav_btn span {
width:60%;
height:2px;
background:#969696;
position:absolute;
}

#lp_grobal .nav_btn span:first-child {
top:16px;
transition:0.5s;
}

#lp_grobal .nav_btn span.show:first-child {
top:26px;
transform:rotate(45deg);
}

#lp_grobal .nav_btn span:nth-child(2) {
transition:0.5s;
}

#lp_grobal .nav_btn span.show:nth-child(2) {
opacity:0;
}

#lp_grobal .nav_btn span:last-child {
bottom:16px;
transition:0.5s;
}

#lp_grobal .nav_btn span.show:last-child {
bottom:26px;
transform:rotate(-45deg);
}

#lp_grobal .nav_close {
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
position:fixed;
top:0;
left:0;
display:none;
cursor:pointer;
z-index:997;
}

#lp_grobal .grobal_nav {
width:350px;
height:70%;
position:fixed;
top:15%;
left:0;
background:rgba(0,68,45,0);
display:flex;
justify-content:center;
align-items:flex-start;
flex-direction:column;
transform:translate(-100%,0);
transition:0.5s;
z-index:1000;
padding-left:50px;
opacity:0;
}

#lp_grobal .grobal_nav.show {
transform:translate(0,0);
opacity:1;
}

#lp_grobal .grobal_nav nav {
padding:12px 0;
line-height:120%;
}

#lp_grobal .grobal_nav nav a {
font-size:90%;
font-weight:500;
color:#969696;
}




/*SWIPER*/
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
margin-top: -25px;
z-index: 10;
cursor: pointer;
background-size: 40px 40px;
background-position: center;
background-repeat: no-repeat;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
-webkit-animation:hover 0.5s ease forwards;
animation:hover 0.5s ease forwards;
cursor:pointer;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url(../images/slide_prev.svg);
left: 0;
right: auto;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url(../images/slide_next.svg);
right: 0;
left: auto;
}




/*DELAY*/
.delay1 {
    transition-delay:0.1s;
}

.delay2 {
    transition-delay:0.2s;
}

.delay3 {
    transition-delay:0.3s;
}

.delay4 {
    transition-delay:0.4s;
}

.delay5 {
    transition-delay:0.5s;
}

.delay6 {
    transition-delay:0.6s;
}

.delay7 {
    transition-delay:0.7s;
}

.delay8 {
    transition-delay:0.8s;
}

.delay9 {
    transition-delay:0.9s;
}

.delay10 {
    transition-delay:1.0s;
}

.delay11 {
    transition-delay:1.1s;
}

.delay12 {
    transition-delay:1.2s;
}

.delay13 {
    transition-delay:1.3s;
}

.delay14 {
    transition-delay:1.4s;
}

.delay15 {
    transition-delay:1.5s;
}

.delay16 {
    transition-delay:1.6s;
}

.delay17 {
    transition-delay:1.7s;
}

.delay18 {
    transition-delay:1.8s;
}

.delay19 {
    transition-delay:1.9s;
}

.delay20 {
    transition-delay:2.0s;
}







}