@charset "UTF-8";
/* CSS Document */
html, body{width:100%; height:100%; position:relative; overflow:scroll; background:#c7c8c9;}
a[href^="tel:"]{pointer-events:none;}

/*header*/
h1{position:fixed; top: 115px; left: 15px; width: 150px; line-height:0; z-index:1000;
transform:translateY(-100px);
transition:all 1s ease-in-out;}
h1.show{transform:translateY(0); -webkit-transform:translateY(0);}

#btn-menu{position:fixed; top: 15px; right: 15px; width:36px; height:32px; z-index:1000; overflow:hidden; cursor:pointer;}
#btn-menu span{width:100%; height:2px; background:#fff; position:absolute; top:0; left:0;
transition:all .3s ease; -webkit-transition:all .3s ease;}
#btn-menu span:nth-of-type(2){top:15px; left:-50%;}
#btn-menu span:nth-of-type(3){top:15px; left:50%;}
#btn-menu span:nth-of-type(4){top:30px;}

#btn-menu.open span{background:#464646;}
#btn-menu.open span:nth-of-type(1){
-webkit-transform: translateY(15px) translateX(0) rotate(45deg);
        transform: translateY(15px) translateX(0) rotate(45deg);}
#btn-menu.open span:nth-of-type(2){
-webkit-transform: translateX(-100%);
        transform: translateX(-100%);}
#btn-menu.open span:nth-of-type(3){
-webkit-transform: translateX(100%);
        transform: translateX(100%);}
#btn-menu.open span:nth-of-type(4){
-webkit-transform: translateY(-15px) translateX(0) rotate(-45deg);
        transform: translateY(-15px) translateX(0) rotate(-45deg);}

#menu{background-color:rgba(255,255,255,.9); position:fixed; top: 15px; right: 15px; width:400px; z-index:-1; opacity:0;
transition:all 0.5s; -webkit-transition:all 0.5s;}
#menu ul{padding:6% 8%;}
#menu li{font-size:20px; margin:0 0 4%;
font-family:Gotham, 'Gotham', 'Montserrat', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
transform-origin: left bottom;
transform: scaleY(0); -webkit-transform: scaleY(0);
transition: transform .9s cubic-bezier(.19,1,.22,1) .5s;
-webkit-transition: transform .9s cubic-bezier(.19,1,.22,1) .5s;}
#menu li:last-of-type{margin:0;}
#menu li span{margin:0 0 0 2.5em; font-size:11px; display:inline-block;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, Arial, Helvetica, Verdana, sans-serif;}

#menu li a{position:relative; pointer-events:none; display:inline-block;}
#menu li a:before{content:''; position:absolute; top:0; left:0; height:100%; width:0; background:#f2f2f2; display:block; z-index:-1;
transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
#menu li.active a:before,
#menu li a:hover:before{width:100%;}
#menu.open{opacity:1; z-index:999;}
#menu.open li{opacity:1; transform:scaleY(1); -webkit-transform:scaleY(1);}
#menu.open li a{pointer-events:auto;}
/*header*/

.main-slider{height:100%; width:100%;}
.swiper-slide{background:#c7c8c9; width:100%; height:100%; position:relative;}

/*.inner{position:absolute; top:50%; left:5%; right:5%; width:90%; margin:0 auto; transform:translateY(-50%); -webkit-transform:translateY(-50%);}*/
h2{margin:0 0 40px; opacity:0; transition:opacity 0.5s ease-in-out 0.8s; -webkit-transition:opacity 0.5s ease-in-out 0.8s;}
h2 svg{stroke:rgba(1,1,1,0); stroke-width:1; stroke-dasharray:130; stroke-dashoffset:0; fill:#010101; width:100%;}

.btn-scroll{position:absolute; bottom:50px; left:0; right:0; margin:0 auto; width:60px; height:60px; background:#fff; border-radius:100%; z-index:10; display:block; cursor:pointer; text-indent:-999px;}
.btn-scroll:before{position:absolute; top:23px; left:23px; content:''; border:solid #333; border-width:0 1px 1px 0; display:block; padding:6px; transform:rotate(45deg);  -webkit-transform:rotate(45deg);}
.btn-scroll:hover{opacity:.7;}

.inner.anime h2{opacity:1;}
.inner.anime h2 svg{animation: a-top-svg 2.5s linear; -webkit-animation: a-top-svg 2.5s linear;}
@keyframes a-top-svg{
0%{fill:rgba(1,1,1,0); stroke:#010101; stroke-dashoffset:130;}
40%{fill:rgba(1,1,1,0); stroke:#010101; stroke-dashoffset:130;}
80%{fill:rgba(1,1,1,0); stroke:#010101; stroke-dashoffset:0;}
100%{fill:#010101; stroke:rgba(1,1,1,0); stroke-dashoffset:0;}
}

@-webkit-keyframes a-top-svg{
0%{fill:rgba(1,1,1,0); stroke:#010101; stroke-dashoffset:130;}
40%{fill:rgba(1,1,1,0); stroke:#010101; stroke-dashoffset:130;}
80%{fill:rgba(1,1,1,0); stroke:#010101; stroke-dashoffset:0;}
100%{fill:#010101; stroke:rgba(1,1,1,0); stroke-dashoffset:0;}
}

/* MV */
#mv{overflow:hidden; background:#fff; display: none;}
#mv:before{background:url(../../images/dot.png); position:absolute; top:0; left:0; width:100%; height:100%; content:''; z-index:2;}
#mv.show2:before{background:url(../../images/dot2.png);}
#mv .video{position:absolute; top:50%; left:50%; width:auto; height:auto; min-width:100%; min-height:100%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); opacity:0;}
#mv #video1{z-index:1; min-height:130%;}
#mv #video2{z-index:0;}

#mv .label{position:absolute; top:4%; right:2%; font-size:16px; font-weight:bold; z-index:10; letter-spacing:0.1em;}
#mv .cont{position:absolute; top:50%; left:0; right:0; margin:0 auto; width:776px; z-index:10; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
#mv h1{display:none; position:absolute; top:72%; left:0; right:0; margin:0 auto; width:67.5%; z-index:10; text-align:center;}
#mv .txt{position:relative;}
#mv .txt:after{position:absolute; top:0; left:4.5%; height:100%; width:0; background:#fff; content:''; z-index:-1; transition:all 1s; -webkit-transition:all 1s;}
#mv .txt.show:after{width:68.7%;}
#mv .line{margin:0 0 0 4.5%; background:url(../../images/line.png) repeat-x left bottom; background-size:auto 100%; text-align:right; width:60px; transition:all 1s; -webkit-transition:all 1s;}
#mv .line.show{width:95.5%;}
#mv .txt, #mv .line{opacity:0;}

#news{background: #c7c8c9; margin: 60px;}
#news .box{position: relative; overflow: hidden;}
#news .box img.imgphoto {transform: scale(1.1); -webkit-transform: scale(1.1); width: 100%; height: auto; animation: animationZoom1 2s ease-in-out forwards;}
#news .box3{background: #EEEEEE; padding: 0px 100px 50px;}
#news .cont{max-width: 860px; margin: 0 auto;}
#news h3{font-size: 30px; font-weight: bold; padding-bottom: 30px; letter-spacing: 0.03em;}
#news time {font-size: 14px; color: #888888; letter-spacing: 0.01em;}
#news p{line-height: 2.0; letter-spacing: 0.01em; padding: 10px 0 10px; clear: both;}
#news p span{border: solid 2px #727171; background-color: #727171; color: white;}
#news h4{font-size: 20px; font-weight: bold;}
#news p a{padding-bottom: 1px; border-bottom: solid 0.02rem #333; box-shadow: inset 0 -0.1rem #333, inset 0 -0.5rem transparent;}
#news .return_news {clear: both; text-align: center;}
#news .return_news img{width: 18%;}
#news .np_img{width: 50%;}

  @keyframes animationZoom1 {
      100% { transform:scale(1)} 
    }

/* COMMON */


/* NEWS INDEX */
#news_in{background: #c7c8c9; margin: 60px;}
#news_in h2{width:200px; opacity: 1;}
#news_in h3{font-size: 15px; font-weight: 900;}
#news_in .fade{animation: fadeIn 2.5s ease 0s 1 normal; -webkit-animation: fadeIn 2.5s ease 0s 1 normal;}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
#news_in .cont{max-width:860px; margin: 0 auto;}
/* #news_in .info{ opacity:0; transition:opacity 1s ease-in-out 0.8s; -webkit-transition:opacity 1s ease-in-out 0.8s;}*/
#news_in .cont4{width:100%; max-width:410px; height: 360px; margin:0 auto 0 0; background:#fff; padding:3% 3% 2%; float: left;}
#news_in .cont5{width:100%; max-width:410px; height: 360px; margin:0 0 20px auto; background:#fff; padding:3% 3% 2%;}
#news_in time {font-size: 14px; color: #888888; letter-spacing: 0.01em;}
#news_in p {text-align: center;}
#news_in p img {width: 20%; padding-top: 20px;}

#news_in h2 svg{animation: a-top-svg 2.5s linear; -webkit-animation: a-top-svg 2.5s linear;}
@keyframes a-top-svg{
0%{fill:rgba(1,1,1,0); stroke:#010101; stroke-dashoffset:130;}
40%{fill:rgba(1,1,1,0); stroke:#010101; stroke-dashoffset:130;}
80%{fill:rgba(1,1,1,0); stroke:#010101; stroke-dashoffset:0;}
100%{fill:#010101; stroke:rgba(1,1,1,0); stroke-dashoffset:0;}
}

/* BRAND1 */
#brand1 h2{width:240px;}
#brand1 h3{font-size: 20px; font-weight: 600;}
#brand1 .btn-scroll{bottom:2%;}
#brand1 .inner{max-width:860px;}
#brand1 .info{width:40%; float:left; font-size:15px; line-height:2.2; opacity:0; transition:opacity 1s ease-in-out 0.8s; -webkit-transition:opacity 1s ease-in-out 0.8s;}
#brand1 .info p{margin:0; line-height:1.8;}
#brand1 table {font-size: 12px; margin: -10px 0 5px;}
#brand1 .map{height: 150px;}

#brand1 .pc{display: block;}
#brand1 .sp{display: none;}
#brand1 ul{width: 420px; float: right; opacity:0; transition:opacity 1s ease-in-out 0.8s; -webkit-transition:opacity 1s ease-in-out 0.8s;}

#brand1 .anime .info{opacity:1;}
#brand1 .anime ul{opacity:1;}

#brand1 a{position:relative; z-index:1;}
#brand1 a:before{content:''; width:0; left:0; top:0; height:100%; position:absolute; background:#BBBBBB; z-index:-1;
transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
#brand1 a:hover:before{width:100%;}
#brand1 a.un:hover:before{display:none;}

/* BRAND2 */
#brand2 h2{width:240px;}
#brand2 h3{font-size: 20px; font-weight: 600;}
#brand2 .btn-scroll{bottom:2%;}
#brand2 .inner{max-width:860px;}
#brand2 .info{width:40%; float:right; font-size:15px; line-height:2.2; opacity:0; transition:opacity 1s ease-in-out 0.8s; -webkit-transition:opacity 1s ease-in-out 0.8s;}
#brand2 .info p{margin:0; line-height:1.8;}
#brand2 table {font-size: 12px; margin: -10px 0 5px;}
#brand2 .map{height: 150px;}

#brand2 .pc{display: block;}
#brand2 .sp{display: none;}
#brand2 ul{width: 420px; float: left; opacity:0; transition:opacity 1s ease-in-out 0.8s; -webkit-transition:opacity 1s ease-in-out 0.8s; margin-top: 20px;}

#brand2 .anime .info{opacity:1;}
#brand2 .anime ul{opacity:1;}

#brand2 a{position:relative; z-index:1;}
#brand2 a:before{content:''; width:0; left:0; top:0; height:100%; position:absolute; background:#BBBBBB; z-index:-1;
transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
#brand2 a:hover:before{width:100%;}
#brand2 a.un:hover:before{display:none;}

/* BRAND3 */
#brand3 h2{width:240px;}
#brand3 h3{font-size: 20px; font-weight: 600;}
#brand3 .btn-scroll{bottom:2%;}
#brand3 .inner{max-width:860px;}
#brand3 .info{width:40%; float:left; font-size:15px; line-height:2.2; opacity:0; transition:opacity 1s ease-in-out 0.8s; -webkit-transition:opacity 1s ease-in-out 0.8s;}
#brand3 .info p{margin:0; line-height:1.8;}
#brand3 table {font-size: 12px; margin: -10px 0 5px;}
#brand3 .map{height: 150px;}

#brand3 .pc{display: block;}
#brand3 .sp{display: none;}
#brand3 ul{width: 420px; float: right; opacity:0; transition:opacity 1s ease-in-out 0.8s; -webkit-transition:opacity 1s ease-in-out 0.8s; margin-top: 20px;}

#brand3 .anime .info{opacity:1;}
#brand3 .anime ul{opacity:1;}

#brand3 a{position:relative; z-index:1;}
#brand3 a:before{content:''; width:0; left:0; top:0; height:100%; position:absolute; background:#BBBBBB; z-index:-1;
transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
#brand3 a:hover:before{width:100%;}
#brand3 a.un:hover:before{display:none;}


/* Access */
#access h2{width:305px;}
#access .btn-scroll{bottom:2%;}
#access .inner{max-width:860px;}
#access .info{width:40%; float:left; font-size:15px; line-height:2.2; opacity:0; transition:opacity 1s ease-in-out 0.8s; -webkit-transition:opacity 1s ease-in-out 0.8s;}
#access .info p{margin:0 0 40px; line-height:1;}
#access .map{width:55%; float:right; opacity:0; transition:opacity 1s ease-in-out 1s; -webkit-transition:opacity 1s ease-in-out 1s;}

#access .anime .map{opacity:1;}
#access .anime .info{opacity:1;}

#access a{position:relative; z-index:1;}
#access a:before{content:''; width:0; left:0; top:0; height:100%; position:absolute; background:#BBBBBB; z-index:-1;
transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
#access a:hover:before{width:100%;}
#access a.un:hover:before{display:none;}

/* Access2 */
#access2 h2{width:205px;}
#access2 .btn-scroll{bottom:2%;}
#access2 .inner{max-width:860px;}
#access2 .info{width:40%; float:left; font-size:15px; line-height:2.2; opacity:0; transition:opacity 1s ease-in-out 0.8s; -webkit-transition:opacity 1s ease-in-out 0.8s;}
#access2 .info p{margin:0 0 40px; line-height:1;}
#access2 .map{width:55%; float:right; opacity:0; transition:opacity 1s ease-in-out 1s; -webkit-transition:opacity 1s ease-in-out 1s;}

#access2 .anime .map{opacity:1;}
#access2 .anime .info{opacity:1;}


/* Company Profile*/
#company .inner{max-width:980px;}
#company h2{width:340px; position:absolute; top:50%; left:0; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
#company h2 svg.sp{display:none;}
#company .profile{padding:0 0 0 48%; font-size:12px; line-height:2; opacity:0; transition:opacity 1s ease-in-out 0.8s; -webkit-transition:opacity 1s ease-in-out 0.8s;}
#company table{width:100%;}
#company tr{vertical-align:top;}
#company th{width:122px; text-align:right; padding:0 10px 25px 0;}
#company td{padding:0 0 25px;}
#company td p{padding:0 0 25px;}
#company td p:last-of-type{padding:0;}
#company tr.nopad th{padding:0 10px 0 0;}
#company tr.nopad td{padding:0;}

#company .anime .profile{opacity:1;}

#company a{position:relative; z-index:1;}
#company a:before{content:''; width:0; left:0; top:0; height:100%; position:absolute; background:#BBBBBB; z-index:-1;
transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
#company a:hover:before{width:100%;}
#company a.un:hover:before{display:none;}


/* ----------- MEDIA ----------- */
@media screen and (max-width:1366px) {
.btn-scroll{width:40px; height:40px;}
.btn-scroll:before{top:12px; left:13px;}

#mv .label{top:20px; right:20px; font-size:14px;}
#mv .cont{width:600px;}

}

@media screen and (max-width:1000px) {
#mv .cont{width:80%;}
#mv .line, #mv .line img{width:4.7vw; line-height:0;}

#access h2{width:26vw;}
	
#access2 h2{width:130px;}

#company h2{width:29vw;}
#company .profile{padding:0 0 0 45%;}
}

@media screen and (max-width:1024px) {
#news_in .cont4{max-width: 410px; height: 360px;}
#news_in .cont5{max-width: 410px; height: 360px;}	
	
#news_in p img {width: 40%;}
}

@media screen and (max-width:768px) { 
#news_in .cont4{max-width: 310px; height: 315px;}
#news_in .cont5{max-width: 310px; height: 315px;}
}

@media screen and (max-width:767px) { 
a[href^="tel:"]{pointer-events:auto;}
h2{margin:0 0 3vh;}
	
#menu {width: calc(100% - 50px);}
#menu li {font-size: 4vw;}

#news{margin: 60px 20px}
#news .box3{padding: 0px 30px 50px;}
#news h3{font-size: 4.5vw;}
#news h4{font-size: 4.0vw;}
#news p{letter-spacing: 0; font-size: 2.8vw;}
#news p a{border-bottom: none;}
#news time {font-size: 2.8vw;}
#news .return_news img {width: 29%;}

#news_in{margin: 40px 20px;}
#news_in .cont{padding: 0;}
#news_in h2 {width: 93px;}
#news_in h3 {font-size: 3.4vw; font-weight: 900;}
#news_in .cont4 {padding: 7% 8% 6%; margin-bottom: 15px; float: none; max-width: 500px; width: 100%; height: 100%;}
#news_in .cont5{padding: 7% 8% 6%; margin-bottom: 15px; float: none; max-width: 500px; width: 100%; height: 100%;}
#news_in time {font-size: 3.3vw;}
#news_in p img {width: 45%;padding-top: 20px;}
#news .np_img{width: 100%;}

#access h2{width:calc(12vw + 12vh);}
	
#access2 h2{width:80px;}
	
#brand1 h2{width: 107px; margin: 30px 0 10px;}
#brand1 h3{font-size: 4.5vw;}
#brand1 .info{width: 100%; float: none;}
#brand1 .info p{font-size: 3.4vw;}
#brand1 .map{height: 100px;}
#brand1 .pc{display: none;}
#brand1 .sp{display: block;}
#brand1 ul{width: 100%; float: none;}
	
#brand2 h2{width: 107px;}
#brand2 h3{font-size: 4.5vw;}
#brand2 .inner{margin-top: 5px;}
#brand2 .info{width: 100%; float: none;}
#brand2 .info p{font-size: 3.4vw;}
#brand2 .map{height: 100px;}
#brand2 .pc{display: none;}
#brand2 .sp{display: block;}
#brand2 ul{width: 100%; float: none; margin-top: 0;}
	
#brand3 h2{width: 107px;}
#brand3 h3{font-size: 4.5vw;}
#brand2 .inner{margin-top: 5px;}
#brand3 .info{width: 100%; float: none;}
#brand3 .info p{font-size: 3.4vw;}
#brand3 .map{height: 100px;}
#brand3 .pc{display: none;}
#brand3 .sp{display: block;}
#brand3 ul{width: 100%; float: none; margin-top: 0;}
	
#company h2{width:calc(14vw + 14vh);}
#company th{width:32%; padding:0 3% 1vh 0;}
#company td{padding:0 0 1vh;}
#company td p{padding:0 0 1vh;}
#company tr.nopad th{padding:0 3% 0 0;}
}

@media screen and (max-width:480px) { 
#news_in .cont4 {padding: 3% 3%; margin-bottom: 15px; float: none; max-width: 500px; width: 100%; height: 100%;}
#news_in .cont5{padding: 3% 3%; margin-bottom: 15px; float: none; max-width: 500px; width: 100%; height: 100%;}	
}

/* Portrait */
@media only screen and (min-device-width: 100px) and (max-device-width: 767px) and (orientation: portrait) {
#mv .label{font-size:2.8vw; top:10px; right:10px;}

#access .info{width:100%; float:none; font-size:3.4vw; margin:0 0 6vh;}
#access .info p{margin:0 0 2vh;}
#access .map{width:100%; float:none;}
#access .map iframe{height:calc(10vw + 20vh);}
	
#access2 .info{width:100%; float:none; font-size:3.4vw; margin:0 0 6vh;}
#access2 .info p{margin:0 0 2vh;}
#access2 .map{width:100%; float:none;}
#access2 .map iframe{height:calc(10vw + 20vh);}

#company h2{width:calc(28.5vw + 28.5vh); position:static; transform:translateY(0); -webkit-transform:translateY(0);}
#company h2 svg.pc{display:none;}
#company h2 svg.sp{display:block;}
#company .profile{padding:0; font-size:3.15vw; line-height:1.7;}
}

/* Landscape */
@media only screen and (min-device-width: 100px) and (max-device-width: 767px) and (orientation: landscape) {
#mv .label{font-size:calc(1vw + 1vh);}
#mv .cont{width:calc(30vw + 30vh);}
#mv h1{width:calc(22.8vw + 22.8vh);}
#mv .line, #mv .line img{width:calc(1.5vw + 1.5vh);}

#access .info{font-size:calc(1.2vw + 1vh);}
#access .info p{margin:0 0 3vh;}
#access .map iframe{height:calc(14vw + 24vh);}
	
#access2 .info{font-size:calc(1.2vw + 1vh);}
#access2 .info p{margin:0 0 3vh;}
#access2 .map iframe{height:calc(14vw + 24vh);}

#company .profile{font-size:calc(0.9vw + 1vh); line-height:1.5;}
}