@charset "UTF-8";
/* ============================================================
   秋山隊長特設ページ (page-akiyama.php)
   ============================================================ */

.p-akiyama {
  max-width: 1920px;
  margin: 0 auto;
  background-color: #fff;
  overflow-x: hidden;
}
@media (max-width: 1279px) {
  .p-akiyama {
    padding-top: 54px;     /* SP/タブレットはヘッダー分の余白を確保 */
  }
}

/* パンくず（このページでは非表示） */
.p-akiyama__breadcrumb {
  display: none;
  position: absolute;
  top: 100px;
  left: max(40px, calc((100% - 1500px) / 2 + 40px));
  margin-left: 0;
  z-index: 4;
  padding: 0;
}
@media (max-width: 1279px) {
  /* SP: ヘッダー下に通常フロー配置 */
  .p-akiyama__breadcrumb {
    position: static;
    top: auto;
    left: auto;
    padding: 34px 20px;
  }
}

/* ============================================================
   FV（100vh）
   ============================================================ */
.p-akiyama-fv {
  /* 画面幅縮小時の共通シフト量。1710pxを基準に画面が狭まるとマイナスになる */
  --layout-shift: clamp(-400px, calc(34vw - 581px), 0px);
  /* catch 用は倍率を大きく（1280pxで約-238px。-8%と合わせて -340px に） */
  --catch-shift: clamp(-700px, calc((100vw - 1710px) * 0.55), 0px);
  position: relative;
  z-index: 0;               /* FV内のz-indexを閉じ込め、動画セクション(z-index:1)を前面に */
  height: 110vh;
  min-height: 950px;        /* 注記下端+動画食い込み分(833+95)を確保 */
  max-height: 1000px;       /* 縦長モニターで肥大化しないよう上限 */
  background: linear-gradient(160deg, #d8d9e4 40%, #f4f4f7 100%);
  overflow: hidden;
}
.p-akiyama-fv__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 右：メインビジュアル（秋山さん＋隊長ラベル＋赤背景が1枚の素材） */
.p-akiyama-fv__visual {
  position: absolute;
  top: 0;
  right: var(--layout-shift);  /* 画面幅縮小に追従して画像が右へオフセット */
  width: 66%;
  height: 100%;
  min-height: 950px;
  z-index: 2;
}
.p-akiyama-fv__mainvisual {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
}

/* キャッチ「ハモンバンドつけてますか？」斜めバナー（独立配置・左見切れ・大型） */
.p-akiyama-fv__catch {
  position: absolute;
  top: 0px;
  left: calc(-8% + var(--catch-shift));  /* 画面幅縮小に追従して catch も大きく左へオフセット */
  width: 80%;
  min-width: 1300px;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}
.p-akiyama-fv__catch picture {
  display: block;
  width: 100%;
}
.p-akiyama-fv__catch-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 左：見出し + 注記（キャッチの下） */
.p-akiyama-fv__text {
  position: absolute;
  top: 410px;
  left: calc(17% + var(--layout-shift));  /* 画面幅縮小に追従して text も左へオフセット */
  z-index: 3;
  width: 32%;
  min-width: 500px;
  /* max-width: 570px; */
}
.p-akiyama-fv__headline {
  margin: 0 0 28px;
}
.p-akiyama-fv__headline-img {
  display: block;
  width: 100%;
  /* max-width: 500px; */
  height: auto;
}
.p-akiyama-fv__note {
  font-size: 1.3rem;
  line-height: 1.9;
  color: #3d3d3d;
  letter-spacing: 0.04em;
  margin: 0;
  font-weight: bold;
}

/* ------------------------------------------------------------
   FV エントランスアニメーション
   ① キャッチ：左からスピード感のあるスライドイン
   ② メインビジュアル：若干右からゆっくり定位置へドリフト
   ------------------------------------------------------------ */
@keyframes akiyama-catch-in {
  from {
    transform: translate(-115%, 85%);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes akiyama-visual-in {
  from {
    transform: translateX(8%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes akiyama-note-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.p-akiyama-fv__catch {
  animation: akiyama-catch-in 0.9s cubic-bezier(0.7, 0, 0.84, 0) 0.1s both;
}
.p-akiyama-fv__mainvisual {
  animation: akiyama-visual-in 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.p-akiyama-fv__note {
  animation: akiyama-note-in 1s ease-out 1.6s both;
}
@media (prefers-reduced-motion: reduce) {
  .p-akiyama-fv__catch,
  .p-akiyama-fv__mainvisual,
  .p-akiyama-fv__note {
    animation: none;
  }
}

/* タブレット〜SP: メインビジュアル(上) → キャッチ → 見出し+注記 の縦積み（order で制御） */
@media (max-width: 1279px) {
  .p-akiyama-fv {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .p-akiyama-fv__inner {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .p-akiyama-fv__visual {
    order: 1;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .p-akiyama-fv__mainvisual {
    position: relative;
    right: auto;
    bottom: auto;
    width: 120%;
    height: auto;
  }
  .p-akiyama-fv__catch {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: -27vw;
    padding: 20px 0 0;
    z-index: 3;
  }
  .p-akiyama-fv__text {
    order: 3;
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 16px 30px 80px;
    margin-top: -25vw;      /* キャッチに深く重なる */
  }
  .p-akiyama-fv__note {
    font-size: 1.05rem;
  }
}

/* タブレット (769〜1279px): キャッチをさらに拡大・左へオフセット／テキストの食い込みを調整 */
@media (min-width: 769px) and (max-width: 1279px) {
  .p-akiyama-fv__catch {
    width: 140%;
    left: -15%;
  }
  .p-akiyama-fv__text {
    margin-top: -16vw;
  }
  .p-akiyama-fv__note {
    font-size: 1.5rem;
  }
}

/* ============================================================
   メイン動画（FV下端に食い込む／全幅グレー帯＋縦書きブランド）
   ============================================================ */
.p-akiyama-movie {
  position: relative;
  display: flow-root;       /* マージン相殺を防ぎつつ overflow は切らない */
  z-index: 1;               /* FV より前面 */
  padding-bottom: 9.2%;     /* 動画の下に残るグレー帯（158/1721） */
}
/* 全幅グレー帯（セクション背景） */
.p-akiyama-movie__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: #b7b7c2;
  z-index: -1;
}
/* 帯の下端に重なる一段明るいグレーの棚（半透明オーバーレイ相当） */
.p-akiyama-movie::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 94%;
  height: 4.6vw;
  background-color: rgba(183, 183, 194, 0.5);
  z-index: -1;
}
/* 縦書きブランド「hamon band」（右端・帯と同じ高さ） */
.p-akiyama-movie__brand {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  z-index: 1;
  pointer-events: none;
}
.p-akiyama-movie__main {
  position: relative;
  z-index: 2;
  width: 82.4%;
  margin: -6.7% 0 0 10.6%;  /* FV へ食い込み（上）＋やや左寄せ */
}
.p-akiyama-movie__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #5f5f5f;
  overflow: hidden;
}
/* 動画下のグロー/影はメイン動画のみ */
.p-akiyama-movie__main .p-akiyama-movie__frame {
  box-shadow: 0 40px 80px -24px rgba(95, 95, 105, 0.55);
}
.p-akiyama-movie__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 1279px) {
  .p-akiyama-movie {
    padding-bottom: 10%;
  }
  .p-akiyama-movie::after {
    height: 7vw;
  }
  /* SP: 縦書きブランドは表示（base継承）。動画はやや内寄せ・右にブランド用余白 */
  .p-akiyama-movie__brand {
    right: 2.5%;
  }
  .p-akiyama-movie__main {
    width: 88%;
    margin: max(-50px, -10vw) 0 0 3%;   /* FV に食い込む（タブレット幅では最大-50pxにキャップ） */
  }
}

/* ============================================================
   スペシャル動画 2本
   ============================================================ */
.p-akiyama-specials {
  padding: calc(4.6vw + 80px) 0 0;  /* 動画セクション下端の明るい棚をクリアして余白を確保 */
}
.p-akiyama-specials__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-akiyama-specials__item {
  margin: 0;
}
.p-akiyama-specials__title {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.67;
  letter-spacing: 0.1em;
  color: #3e3e3e;
  margin: 0 0 20px;
}
/* 赤い平行四辺形マーク（#E60012） */
.p-akiyama-specials__bar {
  display: block;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin-top: 0.75em;
  background-color: #e60012;
  clip-path: polygon(50% 0, 100% 0, 50% 100%, 0% 100%);
}
@media (max-width: 1279px) {
  .p-akiyama-specials__list {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .p-akiyama-specials__item {
    width: 78%;
    margin: 0 auto;
  }
}
/* タブレットのみ: specials の padding と見出し中央寄せ、products の gap */
@media (min-width: 769px) and (max-width: 1279px) {
  .p-akiyama-specials {
    padding: 140px 0 0;
  }
  .p-akiyama-specials__title {
    justify-content: center;
  }
  .p-akiyama-products__list {
    gap: 40px;
  }
}
/* SP のみ: padding 70px、見出しを中央寄せ・小サイズに（タブレットは PC 同等を維持） */
@media (max-width: 768px) {
  .p-akiyama-specials {
    padding: 70px 0 0;
  }
  .p-akiyama-specials__title {
    gap: 8px;
    justify-content: center;
    font-size: 1rem;
  }
  .p-akiyama-specials__bar {
    width: 18px;
    height: 16px;
    margin-top: 0.35em;
  }
}

/* ============================================================
   製品カード（V / N）画像左・テキスト右の横並び
   ============================================================ */
.p-akiyama-products {
  padding: 80px 0 0;
}
.p-akiyama-products__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-akiyama-products__item {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 520px;
  justify-self: center;
  margin: 0;
}
/* 時計画像＋NEWバッジ */
.p-akiyama-products__media {
  position: relative;
  flex-shrink: 0;
  width: 40%;
}
.p-akiyama-products__img {
  display: block;
  width: 100%;
  height: auto;
}
.p-akiyama-products__new {
  position: absolute;
  top: 10%;
  left: 4%;
  width: 20%;
  max-width: 83px;
  height: auto;
  z-index: 2;
}
/* テキスト群（上に待望グラフィック分のスペースを常に確保し V/N でロゴ位置を揃える） */
.p-akiyama-products__body {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-top: 68px;
}
.p-akiyama-products__feature {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: auto;
  max-width: 197px;
  height: auto;
  margin: 0;
}
/* N用 NETIS バッジ（Vの「待望」と同じ位置に配置） */
.p-akiyama-products__netis {
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 768px) {
  /* SP: テキスト列が狭く折り返してしまうので、バッジ自体を縮小し1行に収める */
  .p-akiyama-products__netis .c-netis-badge {
    font-size: 0.95rem;
    padding: 4px 8px;
    gap: 4px;
    white-space: nowrap;
  }
}
.p-akiyama-products__logo {
  display: block;
  width: auto;
  max-width: 197px;
  height: auto;
  margin: 0 0 16px;
}
.p-akiyama-products__desc {
  font-size: 1.5rem;
  line-height: 2;
  color: #000;
  letter-spacing: 0.08em;
  margin: 0 0 24px;
}
.p-akiyama-products__btn {
  position: relative;
  display: flex;
  width: fit-content;
  margin-left: auto;       /* カード右端に寄せる */
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 0 50px;
  border: 1.28px solid #4a474c;
  border-radius: 999px;
  color: #4a474c;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.54rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.p-akiyama-products__btn:hover {
  background-color: #4a474c;
  color: #fff;
}
.p-akiyama-products__btn-arrow {
  position: absolute;
  right: 14px;
  width: 38px;
  height: auto;
}
.p-akiyama-products__btn:hover .p-akiyama-products__btn-arrow {
  filter: invert(1);
}
@media (max-width: 1279px) {
  /* SP: PC同様の「画像左・テキスト右」横並びを踏襲（サイズのみ縮小） */
  .p-akiyama-products {
    padding: 80px 0 30px;
  }
  .p-akiyama-products__list {
    grid-template-columns: 1fr;
    gap: 0px;
  }
  .p-akiyama-products__item,
  .p-akiyama-products__item--n {
    gap: 12px;
  }
  .p-akiyama-products__new {
    top: 4%;
    left: -4%;
  }
  .p-akiyama-products__media,
  .p-akiyama-products__item--n .p-akiyama-products__media {
    width: 42%;
    max-width: 180px;
    overflow: visible;
  }
  /* SP: 画像はコンテナ幅を保ったまま視覚的に拡大（テキスト列を圧迫しない） */
  .p-akiyama-products__img {
    transform: scale(1.3);
    transform-origin: center;
  }
  .p-akiyama-products__body {
    padding-top: 52px;
  }
  .p-akiyama-products__feature {
    max-width: 180px;
  }
  .p-akiyama-products__logo {
    max-width: 185px;
  }
  .p-akiyama-products__desc {
    font-size: 1.2rem;
    margin-bottom: 14px;
  }
  .p-akiyama-products__btn {
    height: 36px;
    margin-left: 0;
    padding: 0 32px;
    font-size: 1.2rem;
    white-space: nowrap;
  }
  .p-akiyama-products__btn-arrow {
    right: 8px;
    width: 22px;
  }
}
/* SP のみ: 製品カード間の gap */
@media (max-width: 768px) {
  .p-akiyama-products__list {
    gap: 16px;
  }
}

/* ============================================================
   法人お問い合わせ CONTACT（全幅赤帯／左:CONTACT大英字・右:ボタン群）
   ============================================================ */
.p-akiyama-contact {
  margin-top: 80px;
}
.p-akiyama-contact__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 225px;
  padding: 0 8%;
  background: #e60012 linear-gradient(143deg, rgba(255, 0, 4, 0) 19%, rgba(230, 0, 18, 0.5) 43%, rgba(140, 0, 2, 1) 100%);
  text-decoration: none;
  overflow: hidden;
}
/* 白系ラジアル透かし */
.p-akiyama-contact__watermark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* 左:CONTACT 大英字（上端見切れ） */
.p-akiyama-contact__en {
  position: absolute;
  left: 16%;
  top: -10px;
  width: 30%;
  height: auto;
  z-index: 1;
}
/* 右:区切り線＋法人お問い合わせ＋白ボタン */
.p-akiyama-contact__right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  z-index: 1;
}
.p-akiyama-contact__divider {
  width: 119px;
  height: 1px;
  background: #fff;
}
.p-akiyama-contact__ja {
  color: #fff;
  font-weight: 700;
  font-size: 1.66rem;
  letter-spacing: 0.15em;
}
.p-akiyama-contact__btn {
  width: 300px;
  height: auto;
  margin-left: -8px;
}
@media (max-width: 1279px) {
  .p-akiyama-contact {
    margin-top: 56px;
  }
  .p-akiyama-contact__inner {
    height: 124px;
    padding: 0 16px;
  }
  .p-akiyama-contact__en {
    left: 7%;
    top: -4px;
    width: 50%;
  }
  .p-akiyama-contact__right {
    gap: 10px;
  }
  .p-akiyama-contact__divider {
    display: block;
    width: 28px;
  }
  .p-akiyama-contact__ja {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
  }
  .p-akiyama-contact__btn {
    width: 140px;
    margin-left: -4px;
  }
}

/* ============================================================
   TOPへ戻る
   ============================================================ */
.p-akiyama-back {
  padding: 40px;
}
.p-akiyama-back__link {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  color: #4a474c;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.p-akiyama-back__link:hover {
  color: #e60012;
}
@media (max-width: 1279px) {
  .p-akiyama-back {
    padding: 28px 20px;
  }
  .p-akiyama-back__link {
    font-size: 1.4rem;
  }
}