@charset "utf-8";

/* *****************
TOP：nextBtn
全体共通 css.css との差分
***************** */
.inner .nextBtn.news {
	margin: 0 auto 150px auto
}

/* *****************
TOP：lineArea
全体共通 css.css との差分
***************** */
.lineArea svg{ 
	display:block;
	width:100%; 
	height:auto;
	vertical-align:top;
	overflow: hidden;
}
.lineArea{ line-height:0; font-size:0; } /* 念のため */

.lineArea svg{ overflow:visible; }
.lineArea path, .lineArea line{
  vector-effect: non-scaling-stroke;
}
/* *****************
TOP：ABOUTUS
全体共通 css.css との差分
***************** */
.aboutBox {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 70%;
	align-items: center;
}

@media (min-width: 769px) and (max-width: 1050px) {
	.aboutus .inner p.about {
		font-size: 1.16rem;
		line-height: 1.667em;
	}
}
@media (min-width: 453px) and (max-width: 768px) {
	.aboutus .inner p.about {
		font-size: 1.16rem;
	}
}
@media (max-width: 452px) {
	.aboutus .inner p.about {
		font-size: .82rem;
		line-height: 1.333em;
	}
}

.inner .nextBtn.about {
	display: flex;
	align-items: flex-end;
	margin: 0 auto;
	
}
@media (min-width: 1050px) and (max-width: 1280px) {
	.inner .nextBtn.about {
		display: flex;
		align-items: flex-end;
		height: 220px;
	}
}
@media (min-width: 749px) and (max-width: 1049px) {
	.inner .nextBtn.about {
		display: flex;
		align-items: flex-end;
		height: 120px;
	}
}

@media (max-width: 748px) {
	.inner .nextBtn.about {
		 height: auto;
		align-items: normal;
	}
}


/* *****************
TOP：ACCESS
全体共通 css.css との差分
***************** */
section#ACCESS {
  scroll-margin-top: 80px;
}
.companyName {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}
.companyName h2 {
	display: inline;
	font-size: 1.5rem;
	margin: 0 10px 0 0;
}
.companyName img {
	width: 45px;
	height: auto;
}

@media (max-width: 768px) {
	.map dl {
		flex-wrap: wrap;
	}
	.map dl dt {
		border: none;
	}
	.map dl dd {
		padding-left: 0;
	}
	.access .inner {
		padding: 0 20px;
	}
}

/* *****************
	TOP：2種類のスライダー
***************** */
.maskContainer{
	width:100%;
/*	max-width:1200px; */
/*padding-top削除修正*/
	height:95vh;
	perspective:900px;
}
.maskedScroll {
	display:block;
	position:fixed;
	inset:0;
	width:100%;
	height:100vh;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;

}

.maskedScroll .strip,
.maskedScroll .vstrip,
.maskedScroll .tstrip {
	transform-box: fill-box;
	transform-origin: 0 0;
	will-change: transform, opacity;
}
/* *** シーンを入れ替える *** */
.maskedScroll .scene{
  opacity: 0;
  pointer-events: none;
  animation: sceneSwap 14s linear infinite both;
}
/* U → W の順に表示 */
.maskedScroll .sceneU { animation-delay: 0s;    }
.maskedScroll .sceneW { animation-delay: 7s;  }

@keyframes sceneSwap{
	0%   { opacity: 0; }
	20%   { opacity: 1; }   /* フェードイン */
	55%  { opacity: 1; }   /* 保持 */
	60%  { opacity: 0; }   /* フェードアウト */
	100% { opacity: 0; }
}
/* *** 左右スライド *** */
.maskedScroll .sceneW .l2r { animation: slideR_gate75 24s linear infinite !important; }
.maskedScroll .sceneW .r2l { animation: slideL_gate75 24s linear infinite !important; }

@keyframes slideR_gate75 {
	0%   { transform: translateX(0); }
	100% { transform: translateX(1980px); }
}

@keyframes slideL_gate75 {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-1739px); }
}

/* *** 単体スピン *** */
/* jsでonが付与されたものが回転する */
/* ランダム秒とアニメの秒数を合わせる */
image.spinner.on {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transform-style: preserve-3d;
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	animation: spin 4s linear infinite;
}

@keyframes spin{
	0%,10% { transform: rotateY(0turn); }
	90%,100% { transform: rotateY(1turn); }
}

/* *** ロゴスピン *** */
/* 3D縦軸回転＋鼓動（あなたの現状） */
image.spinLogo{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform;
  animation: heartbeatSpinY 2s linear infinite; /* 1回の回転は2s */
}

@keyframes heartbeatSpinY{
  0%   { transform: rotateY(0deg)     scale(1);   }
  30%  { transform: rotateY(-90deg)   scale(1.2); }
  50%  { transform: rotateY(-330deg)  scale(1.1); }
  55%  { transform: rotateY(-360deg)  scale(1.1); }
  65%,
  100% { transform: rotateY(-360deg)  scale(1);   } /* ← 0%と同じ見た目にしておくのがコツ */
}


/* *** 上スライド *** */
.maskedScroll .upperA {
	animation: slideUp 6s linear infinite;
}
.maskedScroll .upperB {
	animation: slideUp 18s linear infinite;
}
.maskedScroll .upperC {
	animation: slideUp 24s linear infinite;
}

@keyframes slideUp {
	0% { transform: translateY(0); }
	100% { transform: translateY(-1018px); }
}

/* *****************
	一筆書きライン
***************** */
/* デフォルト＝モバイル表示 */
.lineArea .desktop {
	display: none;
}
.lineArea .mobile {
	display: inline;
}
/* 768px以上でPC表示 */
@media (min-width: 769px) {
	.lineArea .desktop {
		display: inline;
	}
	.lineArea .mobile {
		display: none;
	}
}

/* 線幅をズームで一定 */
.lineArea svg [stroke] { vector-effect: non-scaling-stroke; }
/* 配慮 */
@media (prefers-reduced-motion: reduce) {
  .lineArea * { animation: none !important; }
}

.lineArea svg{
	width: 100%;
	max-width: 1440px;
	height: auto;
	display: block;
	margin: 0 auto;
}
@media (max-width: 768px) {
	.lineArea svg{
		max-width: 768px;
	}
}

.lineArea.topScroll {
	margin-top: 60vh;
}
/* *** NEWS線画PCのみ縦伸ばし *** */
.news.scroll_up .gridder .lineArea,
.news .lineArea svg{
	height: 100%;
}
@media (max-width: 768px) {
	.news.scroll_up .gridder .lineArea,
	.news .lineArea svg{
		height: auto;
	}
}

.lineArea svg .SP-stroke-line,
.lineArea svg .stroke-line {
	fill: none;
	stroke: #3e4363;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.lineArea svg .SP-fill-shape,
.lineArea svg .fill-shape {
	fill: #3e4363;
}
.scroll_up #Line1,
.scroll_up #Line2,
.scroll_up #Line3,
.scroll_up #Line4 {
  animation-play-state: paused;
  fill: none;
  stroke: #4a3f35;
  stroke-width: 1px;
  stroke-dasharray: 6000;
  stroke-dashoffset: 6000;
}
.scroll_up #Line1 {
	animation: LINE01 8s ease-in 0s forwards;
 	stroke-linejoin:round;
  animation-play-state: running;
}
.scroll_up.on #Line2 {
	animation: LINE02 6s ease-in 0s forwards;
 	stroke-linejoin:round;
  animation-play-state: running;
}
.scroll_up.on #Line3 {
	animation: LINE03 6s ease-in 0s forwards;
 	stroke-linejoin:round;
  animation-play-state: running;
}
.scroll_up.on #Line4 {
	animation: LINE04 6s ease-in 0s forwards;
 	stroke-linejoin:round;
  animation-play-state: running;
}

@keyframes LINE01 {
	0%{ stroke-dashoffset:6000;fill-opacity: 0; }
	80% { fill-opacity: 0;}
	100%{ stroke-dashoffset:0;fill-opacity: 1; }
}
@keyframes LINE02 {
	0%{ stroke-dashoffset:6000;fill-opacity: 0; }
	80% { fill-opacity: 0;}
	100%{ stroke-dashoffset:0;fill-opacity: 1; }
}
@keyframes LINE03 {
	0% {stroke-dashoffset:6000;fill-opacity: 0; }
	80% { fill-opacity: 0;}
	100%{ stroke-dashoffset:0;fill-opacity: 1; }
}
@keyframes LINE04 {
	0%{ stroke-dashoffset:6000;fill-opacity: 0; }
	80% { fill-opacity: 0;}
	100%{ stroke-dashoffset:0;fill-opacity: 1; }
}

/* *** 色玉 colorSpot *** */
.scroll_up.on #colorspot .spot1 {
	animation: SPOT1 6s ease-in 0s forwards;
	animation-play-state: running;
}
.scroll_up.on #colorspot .spot2 {
	animation: SPOT2 6s ease-in 0s forwards;
	animation-play-state: running;
}
.scroll_up.on #colorspot .spot3 {
	animation: SPOT3 6s ease-in 0s forwards;
	animation-play-state: running;
}
.scroll_up.on #colorspot .spot4 {
	animation: SPOT4 6s ease-in 0s forwards;
	animation-play-state: running;
}
.scroll_up.on #colorspot .spot5 {
	animation: SPOT5 6s ease-in 0s forwards;
	animation-play-state: running;
}
.scroll_up.on #colorspot .spot6 {
	animation: SPOT6 6s ease-in 0s forwards;
	animation-play-state: running;
}

@media (max-width: 768px) {
	.scroll_up.on #SP-colorspot .spot1 {
		animation: SPOT1 4s ease-in 0s forwards;
		animation-play-state: running;
	}
	.scroll_up.on #SP-colorspot .spot2 {
		animation: SPOT2 4.2s ease-in 0s forwards;
		animation-play-state: running;
	}
	.scroll_up.on #SP-colorspot .spot3 {
		animation: SPOT3 4.3s ease-in 0s forwards;
		animation-play-state: running;
	}
	.scroll_up.on #SP-colorspot .spot4 {
		animation: SPOT4 4.4s ease-in 0s forwards;
		animation-play-state: running;
	}
	.scroll_up.on #SP-colorspot .spot5 {
		animation: SPOT5 4.5s ease-in 0s forwards;
		animation-play-state: running;
	}
	.scroll_up.on #SP-colorspot .spot6 {
		animation: SPOT6 4.6s ease-in 0s forwards;
		animation-play-state: running;
	}
}

/* 右から順番に */
@keyframes SPOT1 {
	0%,55% { opacity: 0; }
	59%,100%{ opacity: 1; }
}
@keyframes SPOT2 {
	0%,59% { opacity: 0; }
	63%,100%{ opacity: 1; }
}
@keyframes SPOT3 {
	0%,62% { opacity: 0; }
	66%,100%{ opacity: 1; }
}
@keyframes SPOT4 {
	0%,67% { opacity: 0; }
	71%,100%{ opacity: 1; }
}
@keyframes SPOT5 {
	0%,70% { opacity: 0; }
	74%,100%{ opacity: 1; }
}
@keyframes SPOT6 {
	0%,75% { opacity: 0; }
	79%,100%{ opacity: 1; }
}


/* *****************
	NEWS 3行スライダー
***************** */

/* デフォはSP想定 */
.news-row, .news-row2, .news-row3 { display:block; width:100%; height:auto; }
#newsArea .row1 svg ,
#newsArea .row2 svg,
#newsArea .row3 svg {
	width:100%; 
	height:auto;
	display:block;
}

/* PC/SP切替 */
.news-row .desktop,
.row2 .desktop,
.row3 .desktop {
	display:none; 
}
.news-row .mobile,
.row2 .mobile,
.row3 .mobile {
	display:inline; 
}
@media (min-width: 769px){
	#newsArea svg { width:98vw; margin-left:50%; transform:translateX(-50%); overflow:hidden; }
  .news-row .desktop,
	.row2 .desktop,
	.row3 .desktop{
		display:inline; 
		overflow-y: hidden;
		overflow-x: clip;
	}
  .news-row .mobile,
	.row2 .mobile,
	.row3 .mobile{
		display:none;
	}
}

/* --- 1行目 --- */
/* SP 覗き用 */
#newsArea .row1 .mobile .vp { width:100%; height:100%; display:block; clip-path: inset(0 25px); }

@media (max-width:768px){
	#newsArea{ width:99svw; margin:0; transform:none; overflow:hidden; }
	#newsArea .row1,
	#newsArea .row2,
	#newsArea .row3 {
		width:99svw;
	}
	#newsSlide { aspect-ratio:436 / 300; }
	#newsSlide2,
	#newsSlide3 { aspect-ratio:636 / 230; }
	#newsArea .row1 .mobile .vp{
		width:100%; height:100%; display:block;
		clip-path: inset(0 25px);
	}
	#newsArea .row2 .mobile .vp,
	#newsArea .row3 .mobile .vp{
		width:100%; height:100%; display:block;
	}
}

/* ---- SP 行（row1） ---- */
/* 覗きを CSS の clip で作っているので、ストリップは -25px ずらす */
.strip-row1{
  transform-box:view-box;
  transform-origin:0 0;
  --peek:25px;
  --pitch:398px;
  transform:translateX(calc(var(--peek)));
  will-change:transform;
}
#newsSlide .strip-row1 > .anim{
  /* コマ送り：4コマ＝1592px */
  animation: stepRow1 12s ease-out infinite;
  will-change: transform;
}
@keyframes stepRow1{
  0%{   transform: translateX(0); }
  4.1667%{ transform: translateX(calc(-1 * 398px)); } 25%{ transform: translateX(calc(-398px)); }
  29.1667%{ transform: translateX(calc(-2 * 398px)); } 50%{ transform: translateX(calc(-2 * 398px)); }
  54.1667%{ transform: translateX(calc(-3 * 398px)); } 75%{ transform: translateX(calc(-3 * 398px)); }
  79.1667%{ transform: translateX(calc(-4 * 398px)); } 100%{ transform: translateX(calc(-4 * 398px)); } /* -1592 */
}
/* PC側：同じコマ送り */
#newsSlide .desktop .strip > .anim{ animation: stepRow1 12s ease-out infinite; }

/* ---- SP 行（row2）: 基準オフセット（固定） ---- */
.strip-row2{
  transform-box: view-box;
  transform-origin: 0 0;
  --peek: 0;
  --pitch: 318px;
  /* ここは “固定の基準位置” だけを持つ */
  transform: translateX(calc(var(--peek) - var(--i1, 0) * var(--pitch)));
  will-change: transform;
}
/* コマ送り：アニメは “子の .anim” にだけ適用する */
#newsSlide2 .strip-row2 > .anim{
  animation: stepRow2 12s ease-out infinite;
  will-change: transform;
}
/* 5コマ（318px × 5 = 1590px）で最後に -1590px まで送る */
@keyframes stepRow2{
  0%   { transform: translateX(0); }
  4%   { transform: translateX(318px); } 20% { transform: translateX(318px); }
  24%  { transform: translateX(636px); } 40% { transform: translateX(636px); }
  44%  { transform: translateX(954px); } 60% { transform: translateX(954px); }
  64%  { transform: translateX(1272px);} 80% { transform: translateX(1272px);}
  84%  { transform: translateX(1590px);} 100%{ transform: translateX(1590px); }
}
/* ---- PC ---- */
#newsSlide2 .desktop .strip > .anim{
  animation: stepRow2 12s ease-out infinite;
  will-change: transform;
}

/* ---- SP 行（row3）: 基準オフセット（固定） ---- */
.strip-row3{
  transform-box: view-box;
  transform-origin: 0 0;
  --peek: 0;
  --pitch: -318px;
  /* ここは “固定の基準位置” だけを持つ */
  transform: translateX(calc(var(--peek) - var(--i1, 0) * var(--pitch)));
  will-change: transform;
}
/* コマ送り：アニメは “子の .anim” にだけ適用する */
#newsSlide3 .strip-row3 > .anim{
  animation: stepRow3 12s ease-out infinite;
  will-change: transform;
}
/* 5コマ（318px × 5 = 1590px）で最後に -1590px まで送る */
@keyframes stepRow3{
  0%   { transform: translateX(0); }
  4%   { transform: translateX(-318px); } 20% { transform: translateX(-318px); }
  24%  { transform: translateX(-636px); } 40% { transform: translateX(-636px); }
  44%  { transform: translateX(-954px); } 60% { transform: translateX(-954px); }
  64%  { transform: translateX(-1272px);} 80% { transform: translateX(-1272px);}
  84%  { transform: translateX(-1590px);} 100%{ transform: translateX(-1590px); }
}
/* ---- PC ---- */
#newsSlide3 .desktop .strip > .anim{
  animation: stepRow3 12s ease-out infinite;
  will-change: transform;
}


/* フレームは塗りなしで黒マス回避 */
.tile-frame,
.tile-frameS {
	fill:none;
	stroke:rgba(0,0,0,.1);
	pointer-events:none;
}

@media (max-width:768px){
	/* 余白 */
	#newsSlide2, #newsSlide3 { margin-bottom: 10px; }
}

/* テキスト揃え（SVGでも効く） */
#newsArea text.date { text-anchor: end; }

#newsArea text.caption, #newsArea text.date {
  	font-size: 0.8125rem;
  	font-weight: 200;
	dominant-baseline: alphabetic; /* mac safariで画像への食い込み回避 */
}
#newsArea text.caption, #newsArea text.date {
	transform: translateY(1.06em);/* mac safariで画像への食い込み調整 */
}
#newsArea text.caption:has(tspan) {
	transform: translateY(1.0em);/* mac safariで画像への食い込み調整 */
}

#newsArea text.caption tspan { font-weight: 200; }

/* マウスオーバー周り */
/* 画像拡大（どこでも効くよう最小セレクタに） */
.tile .zoom,
.tileS .zoom{
  transition: transform .25s ease;
  transform-box: fill-box;
  transform-origin: center; /* or 153px 96.5px でもOK */
}
/* ホバーで拡大（ベールはそのまま） */
.row1 .tile:hover .zoom,
.row1 .tile:focus-within .zoom,
.tileS:hover .zoom,
.tileS:focus-within .zoom{
  transform: scale(1.1);
}
/* 共通オーバーレイの出し入れ */
.row1 .ov-common,
.tileS .ov-common{
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none; /* クリックを下の<a>へ通す */
}
.row1 .tile:hover .ov-common,
.row1 .tile:focus-within .ov-common,
.tileS:hover .ov-common,
.tileS:focus-within .ov-common{ opacity: 1; }


/* 矢印チップ内の矢印色やサイズ */
.chip-arrow{
  fill:#fff;
  font-weight:700;
  font-size:.8rem;
}

/* VIEW MORE の体裁（必要なら） */
.ov-text{
  fill:#fff;
	font-family: "brother-xl", sans-serif;
	font-weight: 400;
}