@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: 12px;
}
@media (orientation: landscape){
/*デバイスが横比が大きい場合の記述*/
  #main{height: 150vw;}
}

#main > .inner{
  width: 100%;
  height: 100%;
  position: relative;
}





/* threejs-canvas
=============================*/
#main #threejs-canvas {
  aspect-ratio: 1/1;
  position: absolute; 
  top: calc((70/626)*100%); 
  left: 0; 
  z-index: 10; 
  width: min(calc(100vh - 80px),270px);
  height: min(100%,auto);
  transform: translateX(-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: 12px;
  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: 900/1248;
  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: max(calc((20/700)*100%),20px);
  left: 0;
  width: 100%;
  justify-content: center;
  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;
}


/* mainInfoArea
=============================*/
#main .mainInfoArea{
  width: 100%;
  position: absolute;
  bottom: max(calc((70/700)*100%),70px);
  left: 0;
  z-index: 10;
}
#main .mainInfoArea h1{
  width: 100%;
  padding-bottom: 15px;
  margin-bottom: 20px;
  position: relative;
  text-align: center;
}
#main .mainInfoArea h1::before{
  content: '';
  display: block;
  width: calc((38/375)*100vw);
  height: 1px;
  position: absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%);
  background: #FFF;
}
#main .mainInfoArea h1 img{
  aspect-ratio: 512/283;
  width: min(calc((512/750)*100vw),512px);
  transform: translateX(calc((30/750)*100vw));
}
#main .mainInfoArea h1 .txt{
  display: block;
  text-align: center;
  font-size: calc((18/375)*100vw);
  letter-spacing: 0.1em;
  color: #FFF;
  margin-top: 1.5em;
}


/* mapArea
=============================*/
#main .mapArea{
  
}
#main .mapArea .mapBloc{order: 1;}
#main .mapArea .map{
  width: calc((138/350)*100%);
  order: 2;
  margin-left: auto;
  margin-right: 10px;
  margin-top: 12px;
}
#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 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: 0.15rem;
}
#main .mapArea .mapBloc li span.en{
  font-size: 0.1rem;
  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: 55px 0 0;
}
#network > .inner{
}
#network .txt01{
  text-align: center;
  font-size: 0.16rem;
  line-height: calc(32/16);
  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: 0.30rem;
  line-height: calc(45/30);
  margin-top: 70px;
}

#network .tabsArea{
  margin-top: 35px;
  overflow: auto;
}
#network .tabs{
  width: fit-content;
  overflow: hidden;
  isolation: isolate;
	border-radius: 18px 18px 0px 0px / 18px 18px 0px 0px;
}
#network .tabs li{
  width: calc((160/375)*100vw);
}
#network .tabs li a{
  width: 100%;
  height: 100%;
  min-height: 105px;
  padding: 1em;
  color: #FFF;
  font-size: 0.16rem;
  line-height: calc(25/16);
}
#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;
}
#network .tabContents .tabC{
  padding: 30px 25px 25px;
}
#network .tabContents .tabC:not([data-area="tohoku"]){
  display: none;
}
#network .tabContents .tabC .map{
  aspect-ratio: 500/520;
  width: calc((265/325)*100%);
  margin:0 auto 0 auto;
  position: relative;
  left:calc((10/325)*100%);
}
#network .tabContents .tabC .txtArea{
  margin-top: 15px;
}
#network .tabContents .tabC .list > li a{
  display: block;
  color: #FFF;
  line-height: 1.5;
  padding: 15px 10px;
}
#network .tabContents .tabC .list > li a .company{
  font-size: 0.15rem;
}
#network .tabContents .tabC .list > li a .addr{
  font-size: 0.12rem;
  margin-top: 0.25em;
}
#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 25px;
  margin-top: 25px;
}
#about{margin-top: 50px;}

section.cBloc > .outer{
  padding: 60px 20px 50px;
  isolation: isolate;
	border-radius: 12px;
}
#about > .outer {background: var(--about);}
#ca > .outer    {background: var(--ca);}
#mem > .outer   {background: var(--mem);}

section.cBloc .inner{
}
section.cBloc .txtArea{
}
section.cBloc .txtArea h2{
  font-size: 0.5rem;
  line-height: calc(55/50);
}
section.cBloc .txtArea > .txt{
  font-size: 0.15rem;
  line-height: calc(30/15);
  margin-top: 0.75em;
  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: 100%;
  margin-left: 20px;
  overflow: hidden;
  isolation: isolate;
	border-radius: calc((80/375)*100vw) 0px 0px 0px / calc((80/375)*100vw) 0px 0px 0px;
  margin-top: 25px;
}

section.cBloc .bt {
  width: 100%;
  max-width: 240px;
  margin: 30px auto 0;
}
section.cBloc .bt a{
  padding: 15px 50px 15px 30px;
  min-height: 70px;
  font-size: 0.12rem;
  line-height: calc(24/12);
  position: relative;
  color: #FFF;
  background: var(--base);
  transition:
    color 0.5s ease,
    background 0.5s ease;
}
section.cBloc .bt a:active{
  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:25px;
}