/* ============================================
   FV
============================================ */
.top-page_fv {
  position: relative;
  max-height: 100vh;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
	overflow:hidden;
}
@media screen and (max-width: 768px) {
	.top-page_fv {
  max-height: 100vh;
		height: 100vh;
	}
	/* SP：FVタイトルは中央寄せ＆2行（GOOD FOR / ALL THREE SIDES） */
	.top-page_fv__title.en {
		font-size: calc(56 / 390 * 100vw);
		text-align: center;
	}
	.top-page_fv__title .top-page_fv__br-sp { display: block; }
}

/* SP改行は通常時は出さない（1行表示） */
.top-page_fv__br-sp { display: none; }

.top-page_fv__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-page_fv__content {
  text-align: center;
}

.top-page_fv__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.top-page_fv__image video{
	width: 100%;                                                                                                                                         
	height: 100%;                                                        
	object-fit: cover;
}
.top-page_fv__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.top-page_fv__label {
  font-size: 13px;
  letter-spacing: 0.15em;
  color: #888;
  margin-bottom: 16px;
}

.top-page_fv__title {
  /* 1440px時に130px相当の比率でvw指定 */
  font-size: calc(130 / 1440 * 100vw);
  font-weight: 600;
  line-height: 1;
	color:#fff;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

/* FVタイトル：マスクの下から1文字ずつせり上がって出現 */
.top-page_fv__title-char {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1;
}
.top-page_fv__title-char--space {
  overflow: visible;
}
.top-page_fv__title-char-inner {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  transform: translateY(110%);
}
.top-page_fv__title-char--accent .top-page_fv__title-char-inner {
  color: #E0AD4C;
}
.top-page_fv__title.is-animated .top-page_fv__title-char-inner {
  animation: fvCharUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 0.06s);
}
@keyframes fvCharUp {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0);
  }
}

.top-page_fv__text {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
	margin-top:24px;
  margin-bottom: 40px;
}

.top-page_fv__image-placeholder {
  background: #ddd;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

/* ============================================
   お知らせ
============================================ */
.top-page_news {
  padding: 180px 0 0 0;
}

/* セクション全体：左=見出し / 右=本文（リスト＋もっとみる） */
.top-page_news .l-inner {
  display: flex;
  align-items: flex-start;
  gap: 160px;
}
.top-page_news .c-section-head {
  flex-shrink: 0;
}
.top-page_news__body {
  width: 100%;
  max-width: 630px;
}

/* .top-page_news__list / __link / __thumb / __text / __date / __title は global.css に移動（お知らせ一覧でも流用） */


/* ============================================
   コンセプト・メッセージ
============================================ */
.top-page_concept {
  padding: 80px 0;
	position:relative;
}

/* 英字見出し WHAT'S W3：縁取り（アクセント色）／WHAT'S=body色・W3=アクセント色 */
.top-page_concept__en .is-outline,
.top-page_concept__en .is-accent {
  font-weight: 600;
  paint-order: stroke fill;
}
.top-page_concept__en .is-outline {
  color: #FFFEFC; /* 中身は body と同じ色 */
  -webkit-text-stroke: 2px #000; /* 縁取り 黒 */
  text-stroke: 1px #000;
}
.top-page_concept__en .is-accent {
  color: #E0AD4C; /* W3 はアクセント色（塗りつぶし） */
  -webkit-text-stroke: 1px #E0AD4C;
  text-stroke: 1px #E0AD4C;
}

/* コンセプト見出し：右寄せ／英字164px(1440基準のvw・max164)／日本語40px通常／間20px */
.top-page_concept .c-section-head {
  align-items: flex-end;
  text-align: right;
}
.top-page_concept__en {
  font-size: min(calc(164 / 1440 * 100vw), 164px);
  line-height: 1;
}
.top-page_concept .c-section-head__title {
  font-size: 40px;
  font-weight: 500;
  margin-top: 20px;
}

/* コンセプトのインナー幅 */
.top-page_concept .l-inner {
  max-width: 1100px;
}

/* コンセプト：左=画像 / 右=テキスト の2カラム */
/* .top-page_concept__inner / __image / __body / __lead は global.css に移動（会社概要でも流用） */
.top-page_concept__image-placeholder {
  background: #ddd;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}


.top-page_concept__text {
  font-size: 15px;
  line-height: 2;
  color: #555;
  margin-bottom: 40px;
}

/* ============================================
   店舗紹介
============================================ */
/* ============================================
   会社概要
============================================ */
.top-page_company {
  padding: 100px 0;
  background: #f9f9f6;
}

/* .top-page_company__table のスタイルは global.css に移動（company等の下層ページでも適用するため） */


@media screen and (max-width: 1024px) {
	.top-page_concept__lead {
        font-size: 20px;
    }
	/* タブレット：見出しと本文の間隔を 160px → 40px */
	.top-page_news .l-inner {
		gap: 40px;
	}
}
@media screen and (max-width: 768px) {
	.top-page_concept {
    padding: 60px 0 0;
}
	.top-page_concept__en {
		font-size: min(calc(60 / 390 * 100vw), 164px);
	}
	.top-page_concept .c-section-head__title {
		font-size: 32px;
		margin-top: 10px;
	}
	/* スマホ：画像とテキストを縦積み */
	.top-page_concept__inner {
		flex-direction: column;
		gap: 32px;
	}
	.top-page_concept__image {
		width: 100%;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
.top-page_concept__lead {
        font-size: 18px;
        margin: 0px auto 0 auto;
	}
	.top-page_news {
    padding: 60px 0 0 0;
}
	/* スマホ：見出しを上、本文を下に縦積み */
	.top-page_news .l-inner {
		flex-direction: column;
		gap: 32px;
	}
	.top-page_news__body {
		max-width: none;
	}
}

@media screen and (max-width: 640px) {
	.top-page_concept__lead {
        font-size: 15px;
    }
}
/* ============================================
   オープニングアニメ（フロントのみ・#intro）
   描画（三角＋ロゴ）→ 三角の穴が拡大してFV写真を覗く（写真は固定・拡大しない）
============================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #1a1a1a;
  overflow: hidden;
  pointer-events: none;
  animation: introOut 0.4s ease 3.05s forwards;
}
@keyframes introOut { to { opacity: 0; visibility: hidden; } }

/* 覗く対象のFV写真：固定（拡大しない）。三角クリップの穴だけが広がる */
.intro__window {
  position: fixed;
  inset: 0;
  background-image: url(../img/top_fv.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(12px);
  clip-path: polygon(50% calc(50% - 101px), calc(50% + 190px) calc(50% + 101px), calc(50% - 190px) calc(50% + 101px));
  animation: introWinIn 0.22s linear 2.1s forwards,
             introWinGrow 1.15s cubic-bezier(0.25, 1, 0.35, 1) 2.2s forwards;
}
@keyframes introWinIn { to { opacity: 1; } }
@keyframes introWinGrow {
  to {
    /* 開始三角(101/190)の×15。マークの scale(15) と一致させて線と画像を同調 */
    clip-path: polygon(50% calc(50% - 1515px), calc(50% + 2850px) calc(50% + 1515px), calc(50% - 2850px) calc(50% + 1515px));
    filter: blur(0);
  }
}

/* 全面FV（背面）：三角がほぼ広がり切った終盤でフェードインし、
   大画面で三角が覆い切れない四隅・端の黒残りを防ぐ（窓と同じ画像・位置なので継ぎ目なし） */
.intro__fill {
  position: fixed;
  inset: 0;
  z-index: -1; /* .intro背景(#1a1a1a)より上・window/markより下 */
  background-image: url(../img/top_fv.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation: introFillIn 0.4s ease 2.95s forwards;
}
@keyframes introFillIn { to { opacity: 1; } }

/* 三角アウトライン＋ロゴ（サイズ固定・描画 → 拡大開始時にフェード） */
.intro__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%; /* 画面中心＝窓の拡大中心に合わせて同調 */
  width: 380px;
  height: auto;
  overflow: visible;
  /* 三角の穴の拡大に同調して拡大しながら、途中でふわっと消える */
  animation: introMarkOut 1.15s cubic-bezier(0.25, 1, 0.35, 1) 2.2s forwards;
}
@keyframes introFade { to { opacity: 0; } }
@keyframes introMarkOut {
  0%   { opacity: 1; }
  48%  { opacity: 0; } /* 拡大しながらゆったり消える */
  to {
    transform: translate(-50%, -50%) scale(15);
    opacity: 0;
  }
}

/* 三角形：描画はJSが実寸(getTotalLength)で制御。CSSはJS前の非表示状態のみ
   （大きめのdashで隠す。pathLengthに依存せず全ブラウザで向き一致） */
.intro__tri {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
}

/* ロゴ（独立配置）：三角の下寄り中央。自分の中心で拡大→ズレない */
.intro__logo-fig {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 34px));
  width: 92px;
  transform-origin: center center;
  animation: introLogoOut 1.15s cubic-bezier(0.25, 1, 0.35, 1) 2.2s forwards;
}
.intro__logo-fig .intro__logo {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes introLogoOut {
  0%  { opacity: 1; }
  48% { opacity: 0; }
  to {
    transform: translate(-50%, calc(-50% + 34px)) scale(15);
    opacity: 0;
  }
}

/* ロゴ：縁取りを描いてから白で塗る（描画はJSが実寸で制御。塗りはCSS） */
.intro__logo path {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: introLogoFill 0.4s ease 1.75s forwards;
}
@keyframes introLogoFill { to { fill: #fff; } }

@media screen and (max-width: 768px) {
  .intro__mark { width: 280px; }
  .intro__logo-fig { width: 68px; }
  .intro__fill { background-image: url(../img/top_fv_sp.jpg); }
  .intro__window {
    background-image: url(../img/top_fv_sp.jpg);
    clip-path: polygon(50% calc(50% - 73px), calc(50% + 140px) calc(50% + 73px), calc(50% - 140px) calc(50% + 73px));
    /* SP：重いフルスクリーンblurは外して軽量化（写真はシャープに表示）*/
    filter: none;
    animation: introWinIn 0.22s linear 2.1s forwards,
               introWinGrowSp 1.15s cubic-bezier(0.25, 1, 0.35, 1) 2.2s forwards;
  }
}
@keyframes introWinGrowSp {
  to {
    /* SPはfilterを動かさない（blur無し）= モバイルGPU負荷を回避 */
    clip-path: polygon(50% calc(50% - 1095px), calc(50% + 2100px) calc(50% + 1095px), calc(50% - 2100px) calc(50% + 1095px));
  }
}