@charset "UTF-8";
/* ==========================================================
   トップページ
   デザイン: 26_09dss_web_top.pdf（幅1280px基準）
   ========================================================== */

.top {
  font-family: 'Noto Sans JP', sans-serif;
  font-feature-settings: "palt";
  color: #000;
  background: #fff;
  overflow: hidden;
}
:where(.top) p { margin: 0; }
:where(.top) img { display: block; max-width: none; }

/* ---------- 共通パーツの配置（パーツ本体は common.css） ---------- */
.top .c-title { margin-top: 56px; }

/* ---------- メイド・イン・ジャパン ---------- */
.top-intro {
  position: relative;
  height: 528px;
  max-width: 1280px;
  margin: 0 auto;
}
.top-intro__inner {
  position: relative;
  z-index: 1;
  padding: 77px 0 0 120px;
}
.top-intro .c-heading { line-height: 42px; }
.top-intro__img {
  position: absolute;
  top: 116.5px;
  left: 645px;
  width: 635px;
  height: 416px;
}

/* ---------- 56 Base ---------- */
.top-base {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  height: 2198.5px;
}
.top-base__img {
  position: absolute;
  top: 93px;
  left: 0;
  width: 680px;
  height: 1763px;
}
.top-base__body {
  position: relative;
  z-index: 1;
  display: flow-root;
  margin-left: 720px;
}
/* ロゴ（common/svg/56base_pc.svg、767px以下は 56base_sp.svg） */
.top-base__logo { display: block; margin: 22px 0 0 -13px; }
.top-base__logo img { display: block; width: 210px; height: auto; }
.top-base .c-heading { margin-top: 97px; }
.top-base .c-text { margin-top: 19.5px; }
.top-base .c-title { margin-top: 45px; }

.top-facility { position: relative; }
.top-facility--factory { margin-top: 77px; margin-left: -16px; }
.top-facility__name {
  font-size: 36px;
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #4c4c4c;
}
.top-facility__name span {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}
.top-facility img {
  width: 466px;
  height: 181px;
  margin-top: 14.5px;
}
.top-cross {
  position: relative;
  display: block;
  width: 51.5px;
  height: 51.5px;
  margin: 36.75px 0 32.75px 134px;
}
.top-cross::before,
.top-cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  width: 72.8px;
  height: 0.5px;
  background: #999;
  transform: rotate(45deg);
}
.top-cross::after { transform: rotate(-45deg); }

/* ---------- 製品ブランド ---------- */
.top-product {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  height: 842px;
}
.top-product__body {
  position: relative;
  z-index: 1;
  padding: 4.5px 0 0 120px;
}
.top-product .c-text { margin-top: 18px; }
.top-product .c-title { margin-top: 42px; }
.top-product__logo {
  width: 287px;
  height: auto;
  margin-top: 102px;
  color: #000;
}
.top-product__img {
  position: absolute;
  top: 9.5px;
  left: 600px;
  width: 680px;
  height: 681px;
}

/* ---------- ショールーム ---------- */
.top-showroom {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  height: 861.5px;
}
.top-showroom__img {
  position: absolute;
  top: 15.5px;
  left: 0;
  width: 680px;
  height: 681px;
}
.top-showroom__body {
  position: relative;
  z-index: 1;
  margin-left: 720px;
  padding-top: 10px;
}
.top-showroom .c-text { margin-top: 20.5px; }
.top-showroom .c-title { margin-top: 41.5px; }
.top-showroom__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 63px;
  margin-left: -6px;
}
.top-showroom__thumbs img { width: 200px; height: 200px; }

/* ---------- ニュース ---------- */
.top-news {
  background: #e5e5e5;
  height: 372px;
}
.top-news__inner {
  display: flex;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 120px 0 126px;
  box-sizing: border-box;
}
.top-news__head {
  width: 354px;
  padding-top: 76.5px;
}
.top-news__head .c-title { margin-top: 0; }
.top-news__list {
  flex: 1;
  margin: 115.5px 0 0;
  padding: 0;
  list-style: none;
  border-top: 0.5px solid #000;
  align-self: flex-start;
}
.top-news__list li { border-bottom: 0.5px solid #000; }
.top-news__list a {
  display: flex;
  align-items: center;
  height: 57.5px;
  padding-left: 24px;
  font-size: 13.5px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
}
.top-news__list time { width: 125px; flex-shrink: 0; }
.top-news__list a:hover span { text-decoration: underline; }

/* ---------- 採用情報 ---------- */
.top-recruit {
  position: relative;
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 167.5px;
  height: 770px;
  box-sizing: border-box;
}
.top-recruit__photos { width: 800px; flex-shrink: 0; }
.top-recruit__img { width: 800px; height: 320px; }
.top-recruit__thumbs {
  display: flex;
  gap: 7px;
  margin: 16px 0 0 120px;
}
.top-recruit__thumbs img { width: 222px; height: 100px; }
.top-recruit__body { margin: -5px 0 0 41px; }
.top-recruit .c-text { margin-top: 20px; }
.top-recruit .c-title { margin-top: 41.5px; }

/* ==========================================================
   レスポンシブ（スマートフォン・タブレット）
   1279px以下: 1カラム（PC版は1280px前提の配置のため） / 767px以下: スマートフォン
   ========================================================== */
@media screen and (max-width: 1279px) {
  .top .c-title { margin-top: 44px; }
  .top-heading br, .top .c-text br { display: inline; }

  /* メイド・イン・ジャパン */
  .top-intro { height: auto; }
  .top-intro__inner { padding: 64px 40px 0; }
  .top-intro .c-heading { line-height: 1.2; }
  .top-intro__img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 635 / 416;
    margin-top: 32px;
    object-fit: cover;
    object-position: left top;
  }

  /* 56 Base */
  .top-base { height: auto; padding-bottom: 20px; }
  .top-base__img {
    position: static;
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center top;
  }
  .top-base__body { margin-left: 0; padding: 48px 40px 0; }
  .top-base__logo { margin: 0 0 0 -6px; }
  .top-base .c-heading { margin-top: 56px; }
  .top-base .c-title { margin-top: 40px; }
  .top-facility--factory { margin-top: 64px; margin-left: 0; }
  .top-facility__name { font-size: 30px; }
  .top-facility img { width: 100%; max-width: 466px; height: auto; margin-top: 10px; }
  .top-cross { margin: 28px 0 28px 134px; }

  /* 製品ブランド */
  .top-product { height: auto; }
  .top-product__body { padding: 72px 40px 0; }
  .top-product__logo { width: 220px; margin-top: 56px; }
  .top-product__img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-top: 48px;
    object-fit: cover;
  }

  /* ショールーム */
  .top-showroom { height: auto; }
  .top-showroom__img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  .top-showroom__body { margin-left: 0; padding: 56px 40px 72px; }
  .top-showroom__thumbs { gap: 12px; margin: 40px 0 0; }
  .top-showroom__thumbs img { width: calc(50% - 6px); height: auto; aspect-ratio: 1; }

  /* ニュース */
  .top-news { height: auto; }
  .top-news__inner { flex-direction: column; padding: 64px 40px; }
  .top-news__head { width: auto; padding-top: 0; }
  .top-news__list { margin-top: 36px; align-self: stretch; }
  .top-news__list a { height: auto; min-height: 57.5px; padding: 14px 0 14px 10px; flex-wrap: wrap; }
  .top-news__list time { width: 125px; }
  .top-news__list span { flex: 1; min-width: 200px; }

  /* 採用情報 */
  .top-recruit { flex-direction: column; height: auto; padding: 72px 0 96px; }
  .top-recruit__photos { width: 100%; }
  .top-recruit__img { width: 100%; height: auto; aspect-ratio: 800 / 320; object-fit: cover; }
  .top-recruit__thumbs { gap: 8px; margin: 8px 40px 0; }
  .top-recruit__thumbs img { width: calc((100% - 16px) / 3); height: auto; aspect-ratio: 222 / 100; }
  .top-recruit__body { margin: 48px 40px 0; }
}

@media screen and (max-width: 767px) {
  .top-heading br, .top .c-text br { display: none; }
  .top .c-heading br, .top .c-text br.br-keep { display: inline; }
  .top-intro__inner { padding: 48px 20px 0; }
  /* 56 base：写真はセクションの背景にする（文字が読みやすいよう白を重ねて薄く） */
  .top-base { background: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)), url(../img/top/atrium.jpg) center top / cover no-repeat; }
  .top-base__img { display: none; }
  .top-base__body { padding: 40px 20px 0; }
  .top-base__logo { margin-left: -3px; }
  .top-base__logo img { width: 230px; }
  .top-facility__name { font-size: 24px; }
  .top-facility__name span { display: block; margin: 4px 0 0; font-size: 12px; }
  /* 施設写真は白い三角を含むJPGなので、背景の上では平行四辺形に切り抜く（アニメーションも同じ形で） */
  .top-facility img,
  .js-anim .top .top-facility img.a-reveal.is-inview { clip-path: polygon(0 0, 68.7% 0, 100% 100%, 31.3% 100%); }
  .js-anim .top .top-facility img.a-reveal { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  .top-cross { width: 36px; height: 36px; margin: 22px auto; }
  .top-cross::before, .top-cross::after { left: -7px; width: 51px; }
  .top-product__body { padding: 56px 20px 0; }
  .top-product__logo { width: 180px; margin-top: 44px; }
  .top-product__img { margin-top: 40px; aspect-ratio: 1; }
  .top-showroom__img { aspect-ratio: 1; }
  .top-showroom__body { padding: 44px 20px 56px; }
  .top-news__inner { padding: 48px 20px; }
  .top-news__list a { font-size: 13px; }
  .top-news__list time { width: 100%; margin-bottom: 2px; font-size: 12px; color: #666; }
  .top-news__list span { flex: 1 1 100%; min-width: 0; }
  .top-recruit { padding: 56px 0 72px; }
  .top-recruit__thumbs { margin: 6px 20px 0; gap: 6px; }
  .top-recruit__thumbs img { width: calc((100% - 12px) / 3); }
  .top-recruit__body { margin: 40px 20px 0; }
}

/* ==========================================================
   スクロールアニメーション（common/js/top-anim.js）
   html.js-anim が付いている時のみ（JS無効・視差効果を減らす設定では動かさない）
   ========================================================== */
.js-anim .top {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.77, 0, .18, 1);
}

/* ファーストビュー：読み込み時 */
.js-anim .top .fv__img {
  transform: scale(1.12);
  transition: transform 3.2s var(--ease-out);
}
.js-anim .top .fv__copy > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out);
}
.js-anim .top .fv__copy > :nth-child(2) { transition-delay: .15s; }
.js-anim .top .fv__copy > :nth-child(3) { transition-delay: .3s; }
.js-anim .top .fv__copy > :nth-child(4) { transition-delay: .45s; }
.js-anim.is-loaded .top .fv__img { transform: none; }
.js-anim.is-loaded .top .fv__copy > * { opacity: 1; transform: none; }

/* フェードアップ */
.js-anim .top .a-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
}
.js-anim .top .a-fade.is-inview { opacity: 1; transform: none; }

/* 写真：幕が開くように表示（--r は右から） */
.js-anim .top .a-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s var(--ease-inout);
}
.js-anim .top .a-reveal--r { clip-path: inset(0 0 0 100%); }
.js-anim .top .a-reveal.is-inview { clip-path: inset(0); }

/* × マーク */
.js-anim .top .a-cross {
  opacity: 0;
  transform: rotate(-90deg) scale(.5);
  transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out);
}
.js-anim .top .a-cross.is-inview { opacity: 1; transform: none; }