@charset "UTF-8";
/* CSS Document */
header .logo a{
	color: #FFF;
  transition: color 0.5s ease;
}
header.show .logo a{
	color: var(--base);
}

/*=============================
  main
=============================*/
#main{
  width: 100%;
  height: 100svh;
  padding: 40px;
}

#main > .inner{
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
}
#main h1{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width: min(calc((830/1320)*100cqw),830px);
  z-index: 10;
}
#main h1 .txt{
  display: block;
  text-align: center;
  font-size: min(calc((28/1320)*100cqw),0.28rem);
  letter-spacing: 0.1em;
  color: #FFF;
  margin-top: 1.5em;
}
/* タブレット縦向け */
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  #main{
    aspect-ratio: 16/10;/*1320/730*/
    height: auto;
  }
}


/* threejs-canvas
=============================*/
#main #threejs-canvas {
  aspect-ratio: 1/1;
  position: absolute; 
  top: 50%; 
  left: 0; 
  z-index: 10; 
  width: min(40%,calc(100vh - 80px));
  height: min(100%,auto);
  transform: translate(0,-50%);
}
#main #threejs-canvas canvas {
  aspect-ratio: 1/1;
  width: 100%!important;
  height: 100%!important;
}

/* splide
=============================*/
#main .splide{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  z-index: 0;
  isolation: isolate;
	border-radius: 24px;
  overflow: hidden;
}
#main .splide::before{
  content: '';
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}
#main .splide .splide__track,
#main .splide .splide__list{
  height: 100%;
}
#main .splide .splide__slide{
  width: 100%;
  height: 100%;
}


#main .splide .splide__track .splide__canvas {
  aspect-ratio: 2640/1460;
  width: auto!important;
  height: auto!important;
  min-width: 100%;
  min-height: 100%;
  max-width: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}


/* Splide pagination プログレスバー */
#main .splide .splide__pagination {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  gap: 16px;
}
#main .splide .splide__pagination > li{
  position: relative;
}
/* PIXIアニメーション中はページネーションの上に透明な壁を置いて操作を防ぐ */
#main .splide.is-pixi-transitioning .splide__pagination > li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* ボタンより手前に配置 */
  cursor: pointer; /* カーソルはポインターのままにする */
}

#main .splide .splide__pagination__page {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  position: relative;
  cursor: pointer;
}
/* プログレスバー - シンプル版 */
#main .splide .splide__pagination__page .progress-bar {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 44px;
  height: 44px;
}

#main .splide .splide__pagination__page .progress-bar svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

#main .splide .splide__pagination__page .progress-bar circle {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 117;
  stroke-dashoffset: 117;
}
#main .splide .splide__pagination__page.is-active .progress-bar circle {
  animation: progress-circle 5s linear infinite;
}
@keyframes progress-circle {
  to {
    stroke-dashoffset: 0;
  }
}

#main .splide .splide__pagination__page .progress-bar {
  mask: radial-gradient(circle, transparent 17px, black 19px);
  -webkit-mask: radial-gradient(circle, transparent 17px, black 19px);
}
/* 中央のドット */
#main .splide .splide__pagination__page::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FFF;
  z-index: 1;
}

/* mapArea
=============================*/
#main .mapArea{
  width: 356px;
  position: absolute;
  bottom: 40px;
  right: 20px;
  z-index: 10;
  container-type: inline-size;
}
/* タブレット縦向け */
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  #main .mapArea{
    width: 25%;
    bottom: 20px;
  }
}
#main .mapArea .map svg g > *{
  fill: #fff;
  opacity: 0.9;
  transition: fill 1.5s ease;
}
#main .mapArea .map svg g#tohoku.current > *{
  fill: var(--blue02);
  opacity: 1.0;
}
#main .mapArea .map svg g#kanto.current > *{
  fill: var(--green02);
  opacity: 1.0;
}
#main .mapArea .map svg g#kansai.current > *{
  fill: var(--yel02);
  opacity: 1.0;
}
#main .mapArea .map svg g#kyusyu.current > *{
  fill: var(--red02);
  opacity: 1.0;
}


#main .mapArea .map svg path#line {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
}



#main .mapArea .mapBloc{margin-top: 15px;}
#main .mapArea .mapBloc li{
  visibility: hidden;
  opacity: 0;
  animation: mapBlocHide 0.25s linear 0s 1 normal both;
}
#main .mapArea .mapBloc li.current{
  animation: mapBlocShow 0.25s linear 0s 1 normal both;
}
@keyframes         mapBlocShow {
	0% {
    visibility: visible;
    opacity: 0;
  }
	100% {
    visibility: visible;
    opacity: 1;
  }
}
@keyframes         mapBlocHide {
	0% {
    visibility: visible;
    opacity: 1;
  }
	99% {
    visibility: visible;
    opacity: 0;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
}

#main .mapArea .mapBloc li > span{
  display: block;
  text-align: center;
  color: #FFF;
}
#main .mapArea .mapBloc li span.jp{
  font-size: min(calc((15/356)*100cqw),0.15rem);
}
#main .mapArea .mapBloc li span.en{
  font-size: min(calc((10/356)*100cqw),0.10rem);
  margin-top: 1em;
}

/*scroll
=============================*/
#main .scroll {
	position: absolute;
	bottom:0;
	left: -55px;
	width: 110px;
	z-index: 100;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}
#main .scroll span{display: block;}
#main .scroll .fenb{
	font-size: 0.12rem;
	letter-spacing: 0.05em;
	color: #FFF;
}
#main .scroll .borderAni{
	position: absolute;
	top:50%;
	right: 0;
	width: 50px;
	height: 1px;
	overflow: hidden;
}
#main .scroll .borderAni::before{
	content: '';
	position: absolute;
	top:0;
	left:-100%;
	width: 100%;
	height: 100%;
	background: #FFF;
	animation: borderAni 1.5s linear 0s infinite normal both;
}
@-webkit-keyframes borderAni {
	0% {left:-100%;}
	100% {left:100%;}
}
@keyframes         borderAni {
	0% {left:-100%;}
	100% {left:100%;}
}



/*=============================
  network
=============================*/
#network{
  padding: 60px 40px 0;
}
#network > .inner{
  max-width: 1100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  container-type: inline-size;
}
#network .txt01{
  text-align: center;
  font-size: min(calc((24/1100)*100cqw),0.24rem);
  line-height: calc(48/24);
  transform: translateY(50px);
  opacity: 0;
  transition:
    transform 1s ease,
    opacity 1s ease;
}
#network.show .txt01{
  transform: translateY(0);
  opacity: 1;
}

#network h2{
  text-align: center;
  font-size: min(calc((52/1100)*100cqw),0.52rem);
  line-height: calc(91/52);
  margin-top: 70px;
}

#network .tabsArea{
  margin-top: 30px;
}
#network .tabs{
  overflow: hidden;
  isolation: isolate;
	border-radius: 24px 24px 0px 0px / 24px 24px 0px 0px;
}
#network .tabs li{
  width: calc(100% / 4);
  
}
#network .tabs li a{
  width: 100%;
  height: 100%;
  min-height: 140px;
  padding: 1em;
  color: #FFF;
  font-size: 0.21rem;
  line-height: calc(33/21);
}
#network .tabs li a[data-area="tohoku"],
#network .tabContents .tabC[data-area="tohoku"]{background: var(--blue02);}
#network .tabs li a[data-area="kanto"],
#network .tabContents .tabC[data-area="kanto"]{background: var(--green02);}
#network .tabs li a[data-area="kansai"],
#network .tabContents .tabC[data-area="kansai"]{background: var(--yel02);}
#network .tabs li a[data-area="kyusyu"],
#network .tabContents .tabC[data-area="kyusyu"]{background: var(--red02);}

#network .tabs li a span{
  display: inline-block;
  margin: auto;
  text-align: center;
}
#network .tabContents{
  overflow: hidden;
  isolation: isolate;
	border-radius: 0px 0px 24px 24px / 0px 0px 24px 24px;
}
#network .tabContents .tabC{
  padding: 70px 50px 60px;
}
#network .tabContents .tabC:not([data-area="tohoku"]){
  display: none;
}
#network .tabContents .tabC .map{
  aspect-ratio: 500/520;
  width: calc((500/1000)*100%);
  margin-right: auto;
}
#network .tabContents .tabC .txtArea{
  width: calc((485/1000)*100%);
}
#network .tabContents .tabC .list{
  width: 100%;
  margin: auto 0;
}
#network .tabContents .tabC .list > li a{
  color: #FFF;
  line-height: 1.5;
  padding: 10px 20px;
}
#network .tabContents .tabC .list > li a .company{
  font-size: 0.16rem;
  width: calc((310/445)*100%);
  padding-right: 1em;
}
#network .tabContents .tabC .list > li a .addr{
  font-size: 0.15rem;
  width: calc((135/445)*100%);
}
#network .tabContents .tabC .list > li:nth-child(even) a{
  isolation: isolate;
	border-radius: 8px;
  background: rgba(0,0,0,0.05);
}

/*=============================
  cBloc
=============================*/
section.cBloc{
  padding: 0 40px 0;
  margin-top: 40px;
}
#about{margin-top: 150px;}

section.cBloc > .outer{
  padding-left: calc((100/1320)*100%);
  isolation: isolate;
	border-radius: 24px;
}
#about > .outer {background: var(--about);}
#ca > .outer    {background: var(--ca);}
#mem > .outer   {background: var(--mem);}

section.cBloc .inner{
  width: 100%;
  max-width: 1320px;
  min-height: 600px;
  margin-left: auto;
  margin-right: auto;
}
section.cBloc .txtArea{
  width: calc((570/1220)*100%);
  padding-right: 50px;
  margin-right: auto;
}
section.cBloc .txtArea h2{
  font-size: min(0.84rem,calc((84/1080)*100vw));
  line-height: calc(100/84);
}
section.cBloc .txtArea > .txt{
  font-size: 0.18rem;
  line-height: calc(32/18);
  margin-top: 1em;
  transform: translateY(0.75em);
  opacity: 0;
  transition:
    transform 1s 0.25s ease,
    opacity 1s 0.25s ease;
}
section.cBloc.show .txtArea > .txt{
  transform: translateY(0);
  opacity: 1;
}


section.cBloc .pic{
  aspect-ratio: 644/368;
  width: calc((644/1220)*100%);
  overflow: hidden;
  isolation: isolate;
	border-radius: min(180px,calc((180/1400)*100vw)) 0px 0px 0px / min(180px,calc((180/1400)*100vw)) 0px 0px 0px;
}

section.cBloc .bt {
  width: 100%;
  max-width: 400px;
  margin-top: 40px;
}
section.cBloc .bt a{
  padding: 15px 70px 15px 50px;
  min-height: 120px;
  font-size: 0.18rem;
  line-height: calc(32/18);
  position: relative;
  color: #FFF;
  background: var(--base);
  transition:
    color 0.5s ease,
    background 0.5s ease;
}
section.cBloc .bt a:hover{
  color: var(--base);
  background: #FFF;
}
section.cBloc .bt a .txt{
  margin: auto 0;
}
section.cBloc .bt a .icon{
  position: absolute;
  top:calc(50% - 5px);
  right:50px;
}

/*=============================
  about
=============================*/