@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 .underline:after {
content:"";
width:100%;
height:2px;
background:#00442d;
position:absolute;
left:0;
right:0;
bottom:-5px;
}
*/

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

.titles h2 sup {
font-size:20%;
position:relative;
top:-15px;
}

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

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

.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;
}



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

#mv .movie_cts {
width:100%;
}

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



/*MAINCOPY*/
#maincopy {
width:1200px;
margin:120px auto;
}

#maincopy .main {
width:800px;
margin:auto;
}

#maincopy .moviecopy {
width:1200px;
height:200px;
display:flex;
justify-content:center;
align-items:center;
position:relative;
overflow:hidden;
}

#maincopy .moviecopy video {
margin: 0 auto;
width: 100%;
}

#maincopy .moviecopy .copy {
position:absolute;
top:0;
left:0;
right:0;
}



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

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

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



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

#engine .titles {
position:relative;
}

#engine .movie {
width:100%;
}

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

#engine .more_btn {
width:270px;
}

#engine .about {
}

#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 .movie {
width:100%;
}

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

#sensing .more_btn {
width:270px;
}

#sensing .about {
}

#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;
}




/*MINI LED*/
#mini_led {
padding:150px 0;
}

#mini_led .titles {
position:relative;
}

#mini_led .movie {
width:100%;
}

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

#mini_led .more_btn {
width:270px;
}

#mini_led .about {
}

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

#mini_led .mini_led_logo {
width:130px;
position:absolute;
right:0;
bottom:50px;
}



/*zhd*/
#zhd {
padding:150px 0;
}

#zhd .cts {
}

#zhd .titles {
position:relative;
}

#zhd .titles h2 {
}

#zhd .movie {
width:100%;
}

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

#zhd .details {
display:flex;
justify-content:space-between;
align-items:center;
}

#zhd .details .ex {
width:70%;
font-size:110%;
color:#969696;
}

#zhd .titles .logos {
width:140px;
position:absolute;
right:0;
bottom:50px;
}

#zhd .titles .logos .logo:first-child {
margin-bottom:10px;
}

#zhd .titles .logos .logo:last-child {
}



/*ANIME*/
#anime {
padding:150px 0;
display:none;
}

#anime .cts {
}

#anime .titles h2 {
}

#anime .movie {
width:100%;
}

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

#anime .details {
display:flex;
justify-content:space-between;
}

#anime .details .ex {
width:70%;
font-size:110%;
color:#969696;
}

#anime .details .logos {
width:25%;
display:flex;
justify-content:flex-end;
}

#anime .details .logos .logo {
width:120px;
}



/*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 .smart_access .explains .detail_btn {
    width:200px;
}

#zanmai .smart_access .explains .detail_btn .btn {

}

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

#zanmai .smart_access .explains .detail_btn .btn a:hover {
    -webkit-animation:hover 0.5s ease forwards;
    animation:hover 0.5s ease forwards;
}

#zanmai .smart_access .explains .detail_btn .btn a p {

}

#zanmai .smart_access .explains .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;
}

#zanmai .smart_access .movie {
    width:800px;
    margin:0 auto 70px;
}

#zanmai .smart_access .movie .youtube {
    margin:0 auto;
    padding-top: 56.25%;
    position:relative;
    background:#000;
}
    
#zanmai .smart_access .movie .youtube iframe {
    position: absolute;
    top:0;
    right:0;
    width:100% !important;
    height:100% !important;
}

#zanmai .smart_access .lineup {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

#zanmai .smart_access .lineup .detail {
    width:calc(100% - 550px);
}

#zanmai .smart_access .lineup .detail .item {
    font-size:200%;
    line-height:170%;
    letter-spacing:3px;
    padding-bottom:20px;
}

#zanmai .smart_access .lineup .detail .type {
    font-size:90%;
    line-height:170%;
    letter-spacing:3px;
    background:#1e1e1e;
    padding:15px 25px;
}

#zanmai .smart_access .lineup .photo {
    width:500px;
}



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

#video_service .titles {
}

#video_service .services {
width:900px;
margin:auto;
display:flex;
flex-wrap:wrap;
justify-content:center;
margin-bottom:50px;
}

#video_service .services .service {
width:15%;
margin:0 2% 2% 0;
}

#video_service .services .service:nth-child(6n) {
margin-right:0;
}

#video_service .controller {
width:270px;
margin:auto;
}




/*LIVING*/
#living {
padding:150px 0;
}

#living .titles {
}

#living .more_btn {
width:270px;
}

#living .movie {
width:100%;
}

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




/*AR*/
#ar {
padding:150px 0;
}

#ar .cts {
}

#ar .titles {
}

#ar .titles h2 {
}

#ar .main {
width:800px;
margin:0 auto;
}

#ar .qr {
width:120px;
margin:20px auto 0;
}

#ar .here {
font-size:110%;
font-size:600;
color:#969696;
padding-top:20px;
text-align:center;
}

#ar .attention {
font-size:80%;
color:#969696;
padding-top:5px;
text-align:center;
}

#ar .operatings {
width:600px;
margin:auto;
padding-top:40px;
}

#ar .operatings .operating {
padding-bottom:20px;
}

#ar .operatings .operating:last-child {
padding-bottom:0;
}

#ar .operatings .operating .item {
font-size:70%;
color:#969696;
}

#ar .operatings .operating .detail {
font-size:70%;
color:#969696;
display:flex;
}

#ar .annotation {
width:800px;
margin: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_100v img {
width:200px;
top:20px;
right:20px;
}

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

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

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

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

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

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

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

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

#comparison .model_65v {
width:680px;
height:381px;
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_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;
}



/*DESIGN*/
#design {
padding:150px 0;
}

#design .cts {
}

#design .movie {
width:100%;
}

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

#design .ex {
color:#969696;
}



/*SERVICE*/
#service {
margin-bottom:50px;
}

#service .cts {
display:flex;
justify-content:space-between;
}

#service .service {
width:30%;
background:#141414;
padding:40px;
}

#service .detail {
}

#service .icon {
width:50px;
margin:0 0 20px;
}

#service .service h3 {
font-size:125%;
font-weight:500;
line-height:150%;
font-family: 'Noto Serif JP', serif;
color:#fff;
padding-bottom:20px;
}

#service .service .ex {
font-size:90%;
color:#969696;
}

#service .service .info,
#service .service .info_after {
position:relative;
display:flex;
align-items:center;
cursor:pointer;
}

#service .service .info .arrow,
#service .service .info_after .arrow {
width:8px;
height:8px;
border-top:#969696 1px solid;
border-right:#969696 1px solid;
transform:rotate(45deg);
margin-left:10px;
}

#service .service .info .arrow.after_arrow,
#service .service .info_after .arrow.after_arrow {
transform:rotate(135deg);
}

#service .service .info:hover,
#service .service .info_after:hover {
-webkit-animation:hover 0.5s ease forwards;
animation:hover 0.5s ease forwards;
}

#service .service .support {
font-size:80%;
color:#969696;
padding-top:10px;
display:none;
}

#service .service .support .support_item {
font-size:110%;
font-weight:700;
padding-bottom:10px;
color:#fff;
}

#service .service .support .support_ex {
}

#service .service .support .support_ex a {
font-weight:600;
color:#969696;
}

#service .service .support .support_attention {
padding-top:10px;
}

#service .service .support .support_attention p {
display:flex;
font-size:80%;
}

#service .service .support .support_contacts {
}

#service .service .support .support_contacts .support_contact {
margin-bottom:10px;
}

#service .service .support .support_contacts .support_contact p:first-child {
font-weight:bold;
}

#service .service .support .support_contacts .support_contact p:last-child {
}



/*CAMPAIGN*/
#campaign {
    margin-bottom:50px;
}

#campaign .banner {
    width:850px;
    margin:auto;
}









/*POSTER*/
#poster {
margin-bottom:50px;
}

#poster .cts {
}

#poster .cts a {
display:flex;
justify-content:center;
align-items:center;
padding:50px;
background:#141414;
position:relative;
}

#poster .cts a .campaign {
width:800px;
}

#poster .cts a .arrow {
width:30px;
position:absolute;
right:50px;
}

#poster .ex {
font-size:110%;
color:#969696;
text-align:center;
}



/*SPEC*/
#spec {
}

#spec .titles {
text-align:center;
}

#spec .cts {
background:#141414;
padding:100px;
}

#spec .product {
width:70%;
margin:0 auto 50px;
}

#spec .specs {
width:500px;
margin:auto;
padding-bottom:50px;
}

#spec .specs .spec {
width:100%;
margin-bottom:70px;
}

#spec .specs .spec .item {
font-size:80%;
color:#969696;
}

#spec .specs .spec .item .anno {
font-size:50%;
color:#696969;
}

#spec .specs .spec .detail {
font-size:110%;
color:#fff;
}

#spec .specs .spec .detail .anno {
font-size:50%;
color:#696969;
}

#spec .graph {
width:100%;
margin:0 auto;
padding-bottom:50px;
}

#spec .more_btn {
width:180px;
}

#spec .spec_annotation {
padding-top:70px;
}

#spec .spec_annotation p {
font-size:70%;
font-weight:400;
color:#696969;
display:flex;
}



/*FUNCTION LOGO*/
#function_logo {
padding:50px 0;
}

#function_logo .logos {
display:flex;
justify-content:center;
align-items:center;
margin-bottom:30px;
}

#function_logo .logo {
margin:0 30px;
}

#function_logo .logo:last-child {
margin-right:0;
}

#function_logo .logo:nth-child(1) {
width:110px;
}

#function_logo .logo:nth-child(2) {
width:140px;
}

#function_logo .logo:nth-child(2) img {
border:#fff 1px solid;
border-radius:10px;
}

#function_logo .logo:nth-child(3) {
width:100px;
}

#function_logo .logo:nth-child(4) {
width:120px;
}

#function_logo .attention {
font-size:60%;
color:#969696;
text-align:center;
}



/*LINK*/
#link {
background:#141414;
padding:70px 0;
}

#link .item {
font-size:180%;
font-weight:500;
color:#fff;
padding-bottom:20px;
}

#link .item:last-child {
padding-bottom:0;
}

#link .item a {
color:#fff;
font-weight:600;
position:relative;
background:rgba(30,30,30,0.8);
padding:20px 30px;
display:flex;
align-items:center;
}

#link .item a:after {
content:"";
width:12px;
height:12px;
border-top:#fff 1px solid;
border-right:#fff 1px solid;
transform:rotate(45deg);
display:block;
margin-left:10px;
position:absolute;
right:30px;
}

#link .subitem {
font-size:70%;
color:#969696;
padding-bottom:10px;
}

#link ul {
}

#link ul li {
margin:5px 0;
}

#link ul li a {
font-size:110%;
font-weight:500;
color:#fff;
position:relative;
}

#link ul li a:after {
content:"";
width:8px;
height:8px;
border-top:#fff 1px solid;
border-right:#fff 1px solid;
transform:rotate(45deg);
display:block;
margin-left:10px;
position:absolute;
top:10px;
right:-20px;
}




/*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;
}







}