@charset "UTF-8";
/* カードのホバーは背景画像の拡大のみ。 */
.company-cards .company-card__link:hover {
  opacity: 1;
}
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
- company :ページ共通枠（ヘッダーの逃げ／コンテンツ幅）
- company_head :ページタイトルの余白（h1本体は common.scss の .page_ttl）
- company_ttl_en :英語見出し＋日本語（Concept／コンセプト）
- company_concept :コンセプト（テキスト＋写真）
- company_cards :3枚のカード（製品について／製造について／サステナビリティ）
- company_banner :会社概要・沿革／yamatoya 100th
- company_btn :ボタン幅・SPの外部リンクアイコン（本体は common.scss の .products-btn）
-------------------------*/
/* ---- 会社情報ページ用 変数 ---- */
/* 見出し */
/* 本文 */
/* 会社概要・沿革の地 */
/* yamatoya 100th の地 */
/* カード写真に重ねる色（Figma #595045 / 30%） */
/* コンテンツ幅（Figma 1440 − 左右80） */
/* 左右の逃げ（Figma SP 375 − 左右20 = 335） */
/* 写真・カードの角丸 */
/* 既存PCヘッダー高さ（common.scss $hd_pc_h） */
/* 既存SPヘッダー高さ（common.scss $hd_sp_h） */
/* 英字見出し（Figma Manrope / Regular） */
/* 3列カードがFigma（408）より狭くなるPC幅（コンテンツ幅1280 ＋ 左右20 に満たない幅） */
/* 写真のトリミング（Figma scaleMode: CROP / imageTransform）の再現。
   object-fit:cover で等比に枠を覆い、基準点（$x $y）を中心に $zoom 倍する。
   基準点 ＝ Figmaで切り捨てられた余白の左（上）側の割合、$zoom ＝ Figmaの表示倍率 ÷ cover の倍率。
   基準幅ではFigmaと同じ切り抜きになり、枠の比率が変わっても写真は変形せず基準点を中心に切り抜かれる */
/* 本文の行送り（Figma 16px / 180%）。FigmaのTEXT枠はキャップ高基準のため、
   CSSの行ボックスで生まれる上下の余白を前後の余白から差し引く。
   上 = 28.8 ÷ 2 − 16 × 0.297 ≒ 9.6px ／
   下 = Figmaの本文枠は (行数 − 1) × 28.8 ＋ 12.4（2行41・3行70・4行99）のため 28.8 − 9.6 − 12.4 = 6.8px */
/* Figma SP の見出し（24px）は文字枠18を高さ22の枠に入れて並べているため、
   CSSで詰めた見出しの高さ（24 − 4.9 − 1.5 = 17.6）との差を次の要素の間隔に足す */
/*=======================================
　company
=======================================*/
/* 写真（コンセプト／カード／バナー）は枠いっぱいに等比で敷き、切り抜きは cp_crop で指定 */
.company-concept__img,
.company-card__bg,
.company-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(var(--cp-zoom, 1));
}

/* 既存ヘッダーは position:absolute のため、ページ側で開始位置を確保する */
.company {
  padding-top: 105px;
  /* ヘッダーがハンバーガーへ切り替わる幅（xl）で高さも切り替わる */
}
@media screen and (max-width: 1024px) {
  .company {
    padding-top: 60px;
  }
}
.company .company__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/* PC/SPで改行位置が異なる箇所の制御 */
@media screen and (max-width: 768px) {
  .company-br--pc {
    display: none;
  }
}

/*=======================================
　company_head
=======================================*/
/* Figma PC : パンくず53 → ttl 42 → Frame 719 padding-top 80
   Figma SP : contents-header（パンくず40 → gap 30 → ttl 42）→ Frame 572 padding-top 30 */
/* 共通パーツ（common.scss の .page_breadcrumb / .page_ttl）は、CSSの行ボックスが
   Figmaのテキスト枠より高いぶんだけ文字が下がる。common.scss は既存ページと共用のため
   変更せず、このページ内だけで位置を補正する */
.company .page_breadcrumb {
  padding: 18.6px 0 19.4px;
}
@media screen and (max-width: 768px) {
  .company .page_breadcrumb {
    padding: 13.6px 0 15.6px;
  }
}

.company__head {
  padding-bottom: 82.6px;
}
@media screen and (max-width: 768px) {
  .company__head {
    padding-bottom: 36.2px;
  }
}
.company__head .page_ttl {
  margin-top: -0.6px;
}
@media screen and (max-width: 768px) {
  .company__head .page_ttl {
    margin-top: 31px;
  }
}

/*=======================================
　company_ttl_en
=======================================*/
/* Figma : Concept（Manrope 400 / 50px）→ gap 20 → コンセプト 16px / Medium */
.company-ttl-en .company-ttl-en__main {
  display: block;
  /* FigmaのTEXT枠はキャップ高（36）。Manrope（ascent 1.066 / descent 0.3 / cap 0.72）の
     行ボックス上端からキャップ上端まで = (50 − 68.3) ÷ 2 + (53.3 − 36) ≒ 8.15 */
  margin-top: -8.15px;
  font-family: "Manrope", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  color: #1D1D1F;
}
.company-ttl-en .company-ttl-en__sub {
  display: block;
  margin-top: 10.95px; /* 16 ÷ 2 − 16 × 0.297 と Concept の行ボックスがベースラインより下へ出る分（50 − 8.15 − 36） */
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #1D1D1F;
}

/*=======================================
　company_concept
=======================================*/
/* Figma PC : Frame 589（左テキスト299 ＋ gap 137 ＋ 写真844 × 500）
   Figma SP : 写真 → gap 25 → テキスト
   PCは本文列の幅299を保ち、コンテンツ幅が1280より狭いぶんは間隔（最小40）→ 写真の順に縮める */
.company-concept .company-concept__body {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .company-concept .company-concept__body {
    flex-direction: column;
  }
}
.company-concept .company-concept__txt {
  flex: 0 0 299px;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .company-concept .company-concept__txt {
    flex: 0 1 auto;
    margin-top: 25px;
  }
}
.company-concept .company-concept__lead {
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .company-concept .company-concept__lead {
    margin-top: 30px;
  }
}
.company-concept .company-concept__catch {
  margin-top: -12.1px; /* 37.7 ÷ 2 − 26 × 0.297 */
  margin-bottom: -6.5px;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.45;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .company-concept .company-concept__catch {
    margin-top: -12.9px; /* 40 ÷ 2 − 24 × 0.297 */
    margin-bottom: -9.5px;
    font-size: 24px;
    line-height: 40px;
  }
}
.company-concept .company-concept__desc {
  margin-top: 30.4px;
  margin-bottom: -6.8px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #666666;
}
@media screen and (max-width: 768px) {
  .company-concept .company-concept__desc {
    margin-top: 20.4px;
  }
}
.company-concept .company-concept__action {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .company-concept .company-concept__action {
    margin-top: 30px;
    text-align: center;
  }
}
.company-concept .company-concept__media {
  position: relative;
  overflow: hidden;
  flex: 0 1 844px;
  min-width: 0;
  margin-left: 40px;
  aspect-ratio: 844/500;
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .company-concept .company-concept__media {
    order: -1; /* SPは写真が先頭 */
    flex: 0 1 auto;
    margin-left: 0;
    aspect-ratio: 335/259.188;
  }
}
.company-concept .company-concept__img {
  --cp-zoom: 1.4502;
  object-position: 57.211% 24.802%;
  transform-origin: 57.211% 24.802%;
}
@media screen and (max-width: 768px) {
  .company-concept .company-concept__img {
    --cp-zoom: 1.4111;
    object-position: 55.508% 18.678%;
    transform-origin: 55.508% 18.678%;
  }
}

/*=======================================
　company_cards
=======================================*/
/* Figma PC : Frame 599（408 × 386 の3列 / gap 28）
   Figma SP : 335幅の1列 / gap 25
   3列はPC表示（1025px以上）のみ。1024px以下は見出しとアイコンが収まる1列（SPのカード構成）にする */
.company-cards {
  margin-top: 60px;
  /* minmax(0, 1fr)：列幅を中身の最小幅で押し広げない */
}
.company-cards .company-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
@media screen and (max-width: 1024px) {
  .company-cards .company-cards__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
  }
}
.company-cards .company-card {
  min-width: 0;
}
@media screen and (max-width: 640px) {
  .company-cards .company-card {
    container-type: inline-size;
  }
}
.company-cards .company-card__link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  min-height: 386px;
  border-radius: 20px;
}
@media screen and (max-width: 1024px) {
  .company-cards .company-card__link {
    min-height: 0;
    padding-bottom: 60px; /* Figma 251.36 − (30 ＋ 161.36)。丸ボタンの置き場 */
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .company-cards .company-card__link:hover .company-card__bg {
    transform: scale(calc(var(--cp-zoom, 1) * 1.03));
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .company-cards .company-card__link:hover .company-card__bg {
    transform: scale(calc(var(--cp-zoom, 1) * 1.03));
  }
}
.company-cards .company-card__bg {
  z-index: 0;
  transition: transform 0.4s ease;
}
.company-cards .company-card--products .company-card__bg {
  --cp-zoom: 1.0828;
  object-position: 17.071% 59.433%;
  transform-origin: 17.071% 59.433%;
}
@media screen and (max-width: 640px) {
  .company-cards .company-card--products .company-card__bg {
    --cp-zoom: 1.0478;
    object-position: 50% 7.853%;
    transform-origin: 50% 7.853%;
  }
}
@supports (width: 1cqw) {
  @media screen and (max-width: 640px) {
    .company-cards .company-card--products .company-card__bg {
      object-position: 50% clamp(100%, 198.57px - 60.337cqw, 0%);
      transform-origin: 50% 0;
    }
  }
}
.company-cards .company-card--manufacture .company-card__bg {
  --cp-zoom: 2.1975;
  object-position: 45.141% 13.846%;
  transform-origin: 45.141% 13.846%;
}
@media screen and (max-width: 640px) {
  .company-cards .company-card--manufacture .company-card__bg {
    --cp-zoom: 2.3858;
    object-position: 42.618% 7.471%;
    transform-origin: 42.618% 7.471%;
  }
}
.company-cards .company-card--sustainability .company-card__bg {
  --cp-zoom: 2.5529;
  object-position: 71.071% 39.428%;
  transform-origin: 71.071% 39.428%;
}
@media screen and (max-width: 640px) {
  .company-cards .company-card--sustainability .company-card__bg {
    --cp-zoom: 2.7108;
    object-position: 67.546% 41.918%;
    transform-origin: 67.546% 41.918%;
  }
}
.company-cards .company-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(89, 80, 69, 0.3);
  pointer-events: none;
}
.company-cards .company-card__body {
  position: relative;
  z-index: 2;
  padding: 50px 22px 0 clamp(30px, 20.34% - 33px, 50px);
}
@media screen and (max-width: 1024px) {
  .company-cards .company-card__body {
    padding: 30px 20px 0;
  }
}
.company-cards .company-card__ttl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 10px;
  max-width: 288.24px;
  height: 71.36px;
}
.company-cards .company-card__ttl-txt {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 500;
  font-size: 23px;
  line-height: 1;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .company-cards .company-card__ttl-txt {
    font-size: clamp(20px, 6.133vw, 23px);
  }
}
.company-cards .company-card__icon {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 71.36px;
}
@media screen and (max-width: 768px) {
  .company-cards .company-card__icon {
    height: clamp(60px, 19.03vw, 71.36px);
  }
}
.company-cards .company-card__desc {
  margin-top: 38.4px;
  margin-bottom: -6.8px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #fff;
}
@media screen and (max-width: 1024px) {
  .company-cards .company-card__desc {
    margin-top: 10.4px;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1319px) {
  .company-cards .company-card__desc .company-br--pc {
    display: none;
  }
}
.company-cards .company-card__btn {
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  width: 250px;
  margin: auto auto 48px; /* Figma 386 − 288 − 50 */
}
@media screen and (max-width: 1024px) {
  .company-cards .company-card__btn {
    position: absolute;
    right: 20px;
    bottom: 17.5px;
    width: 30px;
    height: 30px;
    margin: 0;
  }
}
@media screen and (max-width: 1024px) {
  .company-cards .company-card__btn .products-btn__txt {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .company-cards .company-card__btn::after {
    right: 11px;
  }
}

/*=======================================
　company_banner
=======================================*/
/* Figma PC : 1280幅の横並び（左テキスト ／ 右写真735）
   Figma SP : 写真 → テキストの縦積み
   横並びはPC表示（1025px以上）のみ。1024px以下は写真 → テキストの縦積み */
.company-banner {
  margin-top: 60px;
}
.company-banner:last-of-type {
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .company-banner:last-of-type {
    padding-bottom: 60px;
  }
}
.company-banner .company-banner__box {
  position: relative;
  overflow: hidden;
  display: flex;
  border-radius: 20px;
}
@media screen and (max-width: 1024px) {
  .company-banner .company-banner__box {
    flex-direction: column;
  }
}
.company-banner--profile .company-banner__box {
  background: #F6F6F8;
}
.company-banner--100th .company-banner__box {
  background: #F8F3EA;
}
.company-banner .company-banner__media {
  position: relative;
  overflow: hidden;
  flex: 0 0 57.422%;
  order: 2;
  min-width: 0;
}
@media screen and (max-width: 1024px) {
  .company-banner .company-banner__media {
    flex: 0 0 auto;
    order: 0;
  }
}
.company-banner--profile .company-banner__media {
  aspect-ratio: 735/430;
}
@media screen and (max-width: 768px) {
  .company-banner--profile .company-banner__media {
    aspect-ratio: 335/192;
  }
}
.company-banner--100th .company-banner__media {
  container-type: size;
  aspect-ratio: 735/312;
}
@media screen and (max-width: 768px) {
  .company-banner--100th .company-banner__media {
    aspect-ratio: 335/200;
  }
}
.company-banner--profile .company-banner__img {
  --cp-zoom: 1;
  object-position: 57.032% 50%;
  transform-origin: 57.032% 50%;
}
@media screen and (max-width: 768px) {
  .company-banner--profile .company-banner__img {
    --cp-zoom: 1;
    object-position: 50% 50%;
    transform-origin: 50% 50%;
  }
}
.company-banner--100th .company-banner__img {
  --cp-zoom: 1.0587;
  object-position: 50% 7.575%;
  transform-origin: 50% 7.575%;
}
@media screen and (max-width: 768px) {
  .company-banner--100th .company-banner__img {
    --cp-zoom: 1.0587;
    object-position: 50% 27.542%;
    transform-origin: 50% 27.542%;
  }
}
.company-banner .company-banner__logo {
  position: absolute;
  z-index: 1;
  width: 22.512%; /* 165.459 ÷ 735 */
  height: auto;
  left: 40.889%; /* 300.541 ÷ 735 */
  top: 27.564%; /* 86 ÷ 312 */
}
@media screen and (max-width: 768px) {
  .company-banner .company-banner__logo {
    width: 22.958%; /* 76.906 ÷ 335 */
    left: 41.194%;
    top: 16.367%;
  }
}
@supports (width: 1cqw) {
  .company-banner .company-banner__logo {
    --cp-photo-w: calc(max(100cqw, 100cqh * 1.60401) * 1.0587);
    --cp-photo-h: calc(var(--cp-photo-w) / 1.60401);
    width: calc(var(--cp-photo-w) * 0.21264);
    left: calc((100cqw - var(--cp-photo-w)) * 0.5 + var(--cp-photo-w) * 0.41394);
    top: calc((100cqh - var(--cp-photo-h)) * 0.07575 + var(--cp-photo-h) * 0.20431);
  }
  @media screen and (max-width: 768px) {
    .company-banner .company-banner__logo {
      width: calc(var(--cp-photo-w) * 0.21685);
      left: calc((100cqw - var(--cp-photo-w)) * 0.5 + var(--cp-photo-w) * 0.41683);
      top: calc((100cqh - var(--cp-photo-h)) * 0.27542 + var(--cp-photo-h) * 0.17433);
    }
  }
}
.company-banner .company-banner__body {
  position: relative;
  flex: 1 1 auto;
  align-self: center;
  min-width: 0;
  padding: 45px clamp(30px, 3.125%, 40px) 45px clamp(50px, 20% - 147px, 109px);
}
@media screen and (max-width: 1024px) {
  .company-banner .company-banner__body {
    align-self: stretch;
    padding: 40px 40px 45px;
  }
}
@media screen and (max-width: 768px) {
  .company-banner .company-banner__body {
    padding: 30px 20px;
  }
}
@media screen and (max-width: 768px) {
  .company-banner--profile .company-banner__body {
    padding: 30px 15px 35px;
  }
}
@media screen and (max-width: 768px) {
  .company-banner--100th .company-banner__body {
    padding: 30px 12px 30px 20px;
  }
}
.company-banner .company-banner__ttl {
  margin-top: -6.1px; /* 30 ÷ 2 − 30 × 0.297 */
  margin-bottom: -1.8px; /* 30 − 6.1 − 30 × 0.7357 */
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .company-banner .company-banner__ttl {
    margin-top: -4.9px; /* 24 ÷ 2 − 24 × 0.297 */
    margin-bottom: -1.5px; /* 24 − 4.9 − 24 × 0.7357 */
    font-size: 24px;
  }
}
.company-banner .company-banner__desc {
  margin-top: 30.4px;
  margin-bottom: -6.8px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #666666;
}
@media screen and (max-width: 768px) {
  .company-banner .company-banner__desc {
    margin-top: 19.8px;
  }
}
@media screen and (max-width: 768px) {
  .company-banner--100th .company-banner__desc {
    margin-top: 24.8px;
  }
}
.company-banner .company-banner__action {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .company-banner .company-banner__action {
    margin-top: 30px;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .company-banner--profile .company-banner__action {
    margin-top: 35px;
  }
}
@media screen and (max-width: 768px) {
  .company-banner--100th .company-banner__action {
    margin-left: -8px;
  }
}

/*=======================================
　company_btn
=======================================*/
/* ボタン本体は common.scss の .products-btn（#CFAD75 / radius 999 / 白文字）。
   このページでは幅（Figma 299 × 50）とSPの外部リンクアイコンを指定する */
.company-btn {
  display: flex;
  width: 299px;
  max-width: 100%;
}
@media screen and (max-width: 768px) {
  .company-btn {
    margin: 0 auto;
  }
}
.company-btn .company-btn__blank {
  display: none;
}
@media screen and (max-width: 768px) {
  .company-btn .company-btn__blank {
    display: block;
    position: absolute;
    top: 50%;
    right: 24px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
  }
}

/* Figma SP : 会社概要・沿革は 250 × 50 を中央に配置 */
@media screen and (max-width: 768px) {
  .company-banner--profile .company-btn {
    width: 250px;
  }
}

/* SP : 100thは矢印の代わりに外部リンクアイコンを表示 */
@media screen and (max-width: 768px) {
  .company-banner--100th .company-btn::after {
    content: none;
  }
}