@charset "utf-8";


/*
html,body{overflow:hidden;}
*/
#main #wrap{padding-top:0}
body #contents{padding:0;}
.header .bottom-in{display:none;}
#main #footer-section2{margin-top:0;}
body #footer{margin-top:0;}
body #section2{margin-top:0;}






#mainVisual-n{position:relative; overflow:hidden;  height:100vh; _background-image:url('/imgs/n1-main2.jpg');  background:var(--c1); text-align:center;}
#mainVisual-n{
  background: linear-gradient(318deg, var(--c1), var(--c2));
  background-size: 1000% 1000%;

  -webkit-animation: Coolgradient 10s linear infinite;
  -moz-animation: Coolgradient 10s linear infinite;
  -o-animation: Coolgradient 10s linear infinite;
  animation: Coolgradient 10s linear infinite;
 }

 @-webkit-keyframes Coolgradient {
     0%{background-position:5% 0%}
     50%{background-position:96% 100%}
     100%{background-position:5% 0%}
 }
 @keyframes Coolgradient {
      0%{background-position:5% 0%}
      50%{background-position:96% 100%}
      100%{background-position:5% 0%}
  }

#mainVisual-n:after{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; content:""; opacity:0; }
#mainVisual-n .img{opacity:0.5; width:300px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
#mainVisual-n .bg{opacity:0.05;  color:#fff; width:100%; position:absolute; top:50%; left:0; transform:translateY(-50%);}
#mainVisual-n .bg .marquee.big{line-height:200px;}
#mainVisual-n .bg .marquee.big .track span{font-size:100px;}

#mainVisual-n ._cont{position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%);}
#mainVisual-n .cont{position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); z-index:11;}
#mainVisual-n .cont .txt{margin-bottom:30px;}
#mainVisual-n .cont .txt h2{ margin-bottom:20px; color:#fff; font-size:40px; font-weight:100; line-height:1.1;}
#mainVisual-n .cont .txt p{ font-size:13px; font-weight:100;    width:100%; color:#fff;}
#mainVisual-n .bottom{animation-delay:1s; animation-duration:0.5s;}
#mainVisual-n .bottom ul{display:flex; justify-content:center; flex-wrap:wrap;}
#mainVisual-n .bottom ul li{position:relative; color:#fff;  margin:3px; display:flex; align-items:center; justify-content:center;  }
#mainVisual-n .bottom ul li:after{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:70px; height:70px; background:#fff; opacity:0.06; border-radius:50%; content:"";}

#mainVisual-n .pc{display:none;}
#mainVisual-n .mo{display:block;}

@media all and (min-width:768px){

  #mainVisual-n{}
  #mainVisual-n{}
  #mainVisual-n .marquee.big{line-height:200px;}
  #mainVisual-n .marquee.big .track span{font-size:150px;}

  #mainVisual-n .cont{}
  #mainVisual-n .cont .txt{margin-bottom:100px;}
  #mainVisual-n .cont .txt h2{font-size:50px;}
  #mainVisual-n .cont .txt p{font-size:18px;}
  #mainVisual-n .bottom ul li{margin:0; width:75px;}
  #mainVisual-n .bottom ul li:after{width:100px; height:100px;}

  #mainVisual-n .pc{display:block;}
  #mainVisual-n .mo{display:none;}

}









#mainVisual{position:relative; box-sizing:border-box;  overflow:hidden; }
#mainVisual>.in{  margin:0 auto; position:relative; z-index:11; box-sizing:border-box; ; text-align:center;}
#mainVisual .txt{position:absolute;  color:#fff;   z-index:11; display:none;}
#mainVisual .txt h2{font-size:20px; margin-bottom:5px; }
#mainVisual .txt p{font-size:14px; margin-bottom:20px;}
#mainVisual .txt a{color:#fff;}
#mainVisual .img{height:500px; }
#mainVisual .img:after{position:absolute; bottom:0; left:0; width:100%; height:60%; content:""; opacity:0.6;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);}
#mainVisual .img img{width:100%; height:100%; object-position:center; object-fit:cover; transition:10s ease-in-out;}
#mainVisual .swiper-slide-active .img img{transform:scale(1.08);}

#mainVisual .box{position:absolute;  width:100%;  bottom:10px; left:0;  box-sizing:border-box; padding:10px; margin:0 auto; text-align:left;  z-index:11;}
#mainVisual .box>.in{max-width:1400px; margin:0 auto; }

#mainVisual .box .txt-area{}
#mainVisual .box .txt-area h2{ font-size:25px; color:#fff; margin-bottom:10px; line-height:1.2;}
#mainVisual .box .txt-area p{font-size:15px; margin-bottom:5px; color:#fff; opacity:0.7;}
#mainVisual .box .txt-area a{}

#mainVisual .box .txt-area.on h2{animation:fadeIn 1s linear;}

#mainVisual .box .bottom{ width:100px; display:flex; justify-content:space-between; align-items:center;}
#mainVisual .swiper-pagination{display:flex; color:#fff; letter-spacing:4px; align-items:center; position:static;    width:auto; text-align:center;; z-index:100;}

#mainVisual .swiper-progress-bar {  position: relative;  width: 150px;  display: block;  z-index: 1;  height:3px; position:absolute; top:95px; right:0; z-index:101;}
#mainVisual .swiper-progress-bar .slide_progress-bar {  position: absolute;  height: 3px;  background:#e8dbd4;  width: auto;  clear: both;  opacity: 0;  bottom: 45px;  left: 0;  right: 0;}
#mainVisual .swiper-progress-bar .slide_progress-bar:after {  position: absolute;  top: 0;  left: 0;  background:var(--base-color5);  height: 100%;  width: 0;  content: "";}
#mainVisual .swiper-progress-bar.active .slide_progress-bar {  opacity: 1;}
#mainVisual .swiper-progress-bar.animate .slide_progress-bar:after {  transition: width linear;  transition-delay: unset;  width: 100%;  transition-duration: 3.5s;}

#mainVisual .swiper-button-prev{position:relative;; top:0; left:0; right:auto;  bottom:auto; margin:0; height:auto;}
#mainVisual .swiper-button-next{position:relative;; top:0; right:0; left:auto; bottom:auto; margin:0; height:auto;}
#mainVisual .swiper-button-prev:after,
#mainVisual .swiper-button-next:after{color:#fff; font-size:12px;}

#mainVisual .autoplay-progress {  position:relative;  margin:10px 5px;	z-index: 10;	width: 130px;	height: 2px;	background-color: rgba(255,255,255, 0.1);  overflow:hidden;;}
#mainVisual .autoplay-progress svg {	--progress: 0;	position: absolute;	left: 0;	top: 0;	z-index: 10;	width: 100%;	stroke-width: 10px;	stroke: #fff;	fill: none;	stroke-dashoffset: calc(100 * (1 - var(--progress)));	stroke-dasharray: 100;}



@media all and (min-width:768px){

  #mainVisual{}
  #mainVisual>.in{ }
  #mainVisual .img{height:100vh;}
  #mainVisual .img img{}
  #mainVisual .box{bottom:auto; top:50%; transform:translateY(-50%);}
  #mainVisual .box .txt-area h2{font-size:40px; margin-bottom:30px;}
  #mainVisual .box .txt-area p{font-size:20px; margin-bottom:30px;}
  #mainVisual .box .txt-area a span{font-size:20px;}
  #mainVisual .autoplay-progress{width:250px; margin:25px 5px;}


}


@-webkit-keyframes scale-01 {
  from {transform:scale(0.95); }
  to {transform:scale(1);}
}

@-ms-keyframes scale-01 {
  from {transform:scale(0.95); }
  to {transform:scale(1);}
}

@-moz-keyframes scale-01 {
  from {transform:scale(0.95); }
  to {transform:scale(1);}
}

@keyframes scale-01 {
  from {transform:scale(0.95); }
  to {transform:scale(1);}
}







#main-01{padding:50px 10px; box-sizing:border-box;}
#main-01>.in{text-align: center;}
#main-01 h3{font-size:15px;}
#main-01 h2{font-size:25px; text-transform:uppercase; letter-spacing:5px;}
#main-01 span{display:block; width:1px; margin:20px auto; height:40px; background:#000;}
#main-01 p{font-size:14px; color:#666;}


@media all and (min-width:768px){

  #main-01{padding:100px 20px;}
  #main-01 h3{font-size:20px;}
  #main-01 h2{font-size:40px}
  #main-01 span{height:60px; margin:30px auto; }
  #main-01 p{font-size:17px;}

}







#main-02{ background:#f9f9f9; padding:50px 10px;}
#main-02>.in{box-sizing:border-box; max-width:1400px; margin:0 auto;}
#main-02 .scroll-to-slideArea{height:100%; }
#main-02 .scroll-to-slideArea .scroll-wrap{position:sticky; height:auto; top:0;}
#main-02 .scroll-to-slideArea .scroll-in{padding-left:10px; overflow-x:hidden; display:flex; flex-flow:row; align-items:center;}
#main-02 .scroll-to-slideArea .scroll-in .item{max-width:1400px; width:100%;   margin-right:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}

#main-02 .scroll-to-slideArea .scroll-wrap{top:150px;}
#main-02 .scroll-to-slideArea{padding-bottom:150px;}

#main-02 .title h2{text-align:center; font-size:25px; line-height:1.2; margin-bottom:30px; font-weight:800;}
#main-02 ul{}
#main-02 .item{width:100%;}
#main-02 .item + .item{margin-top:30px;}
#main-02 .item a{}
#main-02 .item .img{width:100%; height:200px;}
#main-02 .item .img img{ width:100%; height:100%; object-fit:cover; object-position:center;}
#main-02 .item .txt{width:100%; box-sizing:border-box; padding:10px 0;  }
#main-02 .item .txt h2{font-size:15px; font-weight:normal;}
#main-02 .item .txt h2 b{display:inline-block; font-weight:normal; margin-right:5px;}
#main-02 .item .txt p{margin:0 0 30px 0; font-size:14px; display:none;}
#main-02 .item .txt a{opacity:0.5; display:none;}


@media all and (min-width:768px){
  #main-02{padding:100px 20px;}
  #main-02 .title h2{text-align:left; font-size:40px;}
  #main-02>.in{}
  #main-02 .scroll-to-slideArea .scroll-in{padding-left:100px}
  #main-02 .scroll-to-slideArea .scroll-wrap{top:250px;}
  #main-02 ul{width:101%; margin-left:-1%;}
  #main-02 .item{width:15%; margin-left:1%; transition:0.6s;}
  #main-02 .item + .item{margin-top:0}
  #main-02 .item.on{width:51%;}
  #main-02 .item a{display:block;}
  #main-02 .item a:after{}
  #main-02 .item .img{position:relative; height:500px;}
  #main-02 .item .img:after{position:absolute; top:0; left:0;  width:100%; height:100%; background:#000; content:""; opacity:0.5; transition:0.3s;}
  #main-02 .item.on .img:after{opacity:0;}
  #main-02 .item .img img{max-width:initial;  }
  #main-02 .item .txt{opacity:0; transition:0.3s;}
  #main-02 .item.on .txt{opacity:1;}
  #main-02 .item .txt h2{font-size:20px;}
  #main-02 .item .txt h2 b{}
  #main-02 .item .txt p{font-size:17px; max-width:300px;}
}


#main-marquee{  }
#main-marquee .marquee.big span{font-weight:bold; color:var(--c1);   }
#main-marquee .marquee.big span strong1{-webkit-background-clip: text;  -webkit-text-fill-color: transparent; -webkit-text-fill-color: #fff;   -webkit-text-stroke: 1px var(--c1);}
#main-marquee .marquee.big span b{}








#main-03{}
#main-03>.in{}






@media all and (min-width:768px){





}

































































/**/