/* ============================================================
   outline.css — 「会社概要」ページ専用スタイル
   ============================================================ */

/* ============================================================
   ファーストビュー（左：赤パネル／右：倉庫写真）
   about-heroと同じ構造（1440×500、2カラム）を流用
   ============================================================ */
.ida-outline-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  aspect-ratio: 1440 / 500;
}

.ida-outline-hero__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--brand-red);
  padding: 40px;
}

.ida-outline-hero__mark {
  width: 126px;
  height: auto;
  margin-bottom: 32px;
}

.ida-outline-hero__title {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  color: var(--shiro);
}

.ida-outline-hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── レスポンシブ（タブレット以下：〜1023px） ───────────── */
@media (max-width: 1023px) {
  .ida-outline-hero {
    aspect-ratio: 375 / 300;
  }

  .ida-outline-hero__panel {
    padding: 24px 16px;
  }

  .ida-outline-hero__photo {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* ============================================================
   沿革セクション
   ============================================================ */
.ida-outline-history {
  padding-top: 40px;
  padding-bottom: 80px;
}

.ida-outline-history__head {
  text-align: center;
  margin-bottom: 40px;
}

.ida-outline-history__icon {
  width: 78px;
  height: auto;
  margin: 0 auto 16px;
}

.ida-outline-history__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
}

.ida-outline-history__list {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0 48px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

/* ── 写真カラム：年号列とは独立して縦に流れる ── */
.ida-outline-history__photos {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* ── タイムラインカラム：年号＋説明文が連続する ── */
.ida-outline-history__timeline {
  display: flex;
  flex-direction: column;
}

.ida-outline-history__photo {
  margin: 0;
  text-align: center;
}

.ida-outline-history__photo img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
}

.ida-outline-history__photo figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-gray);
}

.ida-outline-history__entry {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 0;
  margin: 0 0 16px;
}

.ida-outline-history__entry dt {
  flex: 0 0 176px;
  position: relative;
  padding-left: 18px;
  padding-top: 22px;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-red); /* 【修正】Figma準拠：年は赤文字 */
}

.ida-outline-history__entry dt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 30px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-red);
}

.ida-outline-history__entry dd {
  flex: 1;
  margin: 0;
  padding: 20px 28px;
  background: var(--shiro);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-dark);
}

@media (max-width: 1023px) {
  /* PC版の2カラム（写真列／タイムライン列）は横並びが窮屈になるため、
     写真は横並びグリッドで先に一覧表示し、タイムラインをその下に続ける */
  .ida-outline-history__list {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ida-outline-history__photos {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }

  .ida-outline-history__photos .ida-outline-history__photo {
    flex: 0 1 200px;
  }
}

@media (max-width: 767px) {
  .ida-outline-history__entry {
    flex-direction: column;
    gap: 8px;
  }

  .ida-outline-history__entry dt {
    flex: none;
    padding-top: 0;
  }

  .ida-outline-history__entry dt::before {
    top: 8px;
  }

  .ida-outline-history__entry dd {
    padding: 16px 20px;
  }

  .ida-outline-history__photos .ida-outline-history__photo {
    flex-basis: 140px;
  }
}

/* ============================================================
   石田缶詰のラベルギャラリーセクション
   ============================================================ */
.ida-outline-gallery-wrap {
  padding: 80px 0;
  background: #EEEADF;
}

.ida-outline-gallery {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px 60px;
  border: 1px solid #a67c34;
  background: var(--shiro);
  text-align: center;
}

/* ── リボン：外側（左右の羽根）＋内側（中央バー＋折り返しの影）の2層構造 ── */
.ida-outline-gallery__ribbon {
  display: inline-block;
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  height: 46px;
  box-sizing: border-box;
  z-index: 2;
}

/* 左右の羽根：山形にくり抜かれた台形（borderトリックで生成） */
.ida-outline-gallery__ribbon::before,
.ida-outline-gallery__ribbon::after {
  content: '';
  position: absolute;
  width: 10px;
  bottom: -12px;
  z-index: -2;
  border: 22px solid #8a6a2c;
}

.ida-outline-gallery__ribbon::before {
  left: -38px;
  border-left-color: transparent;
}

.ida-outline-gallery__ribbon::after {
  right: -38px;
  border-right-color: transparent;
}

/* 中央バー：テキスト本体 */
.ida-outline-gallery__ribbon-text {
  display: inline-block;
  position: relative;
  padding: 0 32px;
  height: 46px;
  line-height: 46px;
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 700;
  color: var(--shiro);
  letter-spacing: 0.15em;
  white-space: nowrap;
  background: linear-gradient(180deg, #b6903f, #8a6a2c);
}

/* 中央バー下の折り返しの影（左右） */
.ida-outline-gallery__ribbon-text::before,
.ida-outline-gallery__ribbon-text::after {
  content: '';
  position: absolute;
  top: 100%;
  border-bottom: solid 12px transparent;
}

.ida-outline-gallery__ribbon-text::before {
  left: 0;
  border-right: solid 16px #5e4720;
}

.ida-outline-gallery__ribbon-text::after {
  right: 0;
  border-left: solid 16px #5e4720;
}

.ida-outline-gallery__title {
  margin: 24px 0 16px;
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
}

.ida-outline-gallery__lead {
  margin: 0 0 48px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-dark);
}

.ida-outline-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}

.ida-outline-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border-line);
}

.ida-outline-gallery__item figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-dark);
}

@media (max-width: 1023px) {
  .ida-outline-gallery {
    padding: 60px 24px 40px;
  }

  .ida-outline-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .ida-outline-gallery__ribbon {
    height: 36px;
  }

  .ida-outline-gallery__ribbon::before,
  .ida-outline-gallery__ribbon::after {
    width: 8px;
    bottom: -9px;
    border-width: 17px;
  }

  .ida-outline-gallery__ribbon::before {
    left: -29px;
  }

  .ida-outline-gallery__ribbon::after {
    right: -29px;
  }

  .ida-outline-gallery__ribbon-text {
    padding: 0 22px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
  }

  .ida-outline-gallery__ribbon-text::before,
  .ida-outline-gallery__ribbon-text::after {
    border-bottom-width: 9px;
  }

  .ida-outline-gallery__ribbon-text::before {
    border-right-width: 12px;
  }

  .ida-outline-gallery__ribbon-text::after {
    border-left-width: 12px;
  }

  .ida-outline-gallery__title {
    font-size: 24px;
  }
}

/* ============================================================
   石田缶詰のロゴギャラリーセクション
   【変更】ラベルギャラリーと同じ枠（.ida-outline-gallery）内にネスト
   ============================================================ */
.ida-outline-logo-gallery {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid var(--border-line);
  text-align: center;
}

.ida-outline-logo-gallery__title {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
}

.ida-outline-logo-gallery__lead {
  margin: 0 0 48px;
  font-size: 16px;
  color: var(--text-dark);
}

.ida-outline-logo-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.ida-outline-logo-gallery__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.ida-outline-logo-gallery__item figcaption {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
}

@media (max-width: 767px) {
  .ida-outline-logo-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* ============================================================
   勤魂貫今セクション
   ============================================================ */
.ida-outline-clock-wrap {
  width: 100%;
  background: var(--shiro);
}

.ida-outline-clock {
  padding-top: 60px;
  padding-bottom: 80px;
}

.ida-outline-clock__title {
  margin: 0 0 40px;
  font-size: 30px;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
}

.ida-outline-clock__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.ida-outline-clock__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.ida-outline-clock__photo figcaption {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: var(--text-dark);
}

.ida-outline-clock__body p {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-dark);
}

.ida-outline-clock__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  .ida-outline-clock__grid {
    grid-template-columns: 1fr;
  }

  .ida-outline-clock__photo img {
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ── 区切り用の全幅写真 ── */
.ida-outline-divider-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 260;
  object-fit: cover;
  display: block;
}

/* SP：縦幅を取って、煙突がぎりぎり見切れない程度まで高さを確保
   （見切れる場合は比率の 3 / 1 を 5 / 2 → 2 / 1 の順に小さくして高さを足す） */
@media (max-width: 767px) {
  .ida-outline-divider-photo {
    aspect-ratio: 3 / 1;
    object-position: center;
  }
}

/* ============================================================
   会社概要（詳細テーブル）＋マップセクション
   ============================================================ */
.ida-outline-info {
  padding-top: 60px;
  padding-bottom: 80px;
}

.ida-outline-info__head {
  text-align: center;
  margin-bottom: 40px;
}

.ida-outline-info__icon {
  width: 60px;
  height: auto;
  margin: 0 auto 16px;
}

.ida-outline-info__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
}

.ida-outline-info__table {
  max-width: 1000px;
  margin: 0 auto 48px;
}

.ida-outline-info__row {
  display: flex;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-line);
}

.ida-outline-info__row dt {
  flex: 0 0 180px;
  font-size: 16px;
  font-weight: 700;
  color: #896334;
}

.ida-outline-info__row dd {
  flex: 1;
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-dark);
}

.ida-outline-info__text {
  margin-bottom: 12px;
}

.ida-outline-info__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.ida-outline-info__badges figure {
  margin: 0;
  text-align: center;
}

.ida-outline-info__badges img {
  height: 70px;
  width: auto;
  margin: 0 auto;
}

.ida-outline-info__badges figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-gray);
}

.ida-outline-info__map {
  max-width: 1000px;
  margin: 0 auto;
}

.ida-outline-info__map iframe {
  width: 100%;
  aspect-ratio: 16 / 7;
  border: 0;
  display: block;
}

@media (max-width: 767px) {
  .ida-outline-info__row {
    flex-direction: column;
    gap: 8px;
  }

  .ida-outline-info__row dt {
    flex: none;
  }

  .ida-outline-info__map iframe {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================
   【全頁共通修正】SP：タイトル（上）→写真（下）の上下並び（Figma準拠）
   ============================================================ */
@media (max-width: 767px) {
  .ida-outline-hero {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .ida-outline-hero__panel {
    padding: 24px 16px;
  }

  .ida-outline-hero__mark {
    width: 44px;
    margin-bottom: 10px;
  }

  .ida-outline-hero__title {
    font-size: 24px;
  }

  /* 【修正】縦幅を出して、屋根の煙突3本が入るように（5/2 → 2/1）。左右は従来どおりトリミング */
  .ida-outline-hero__photo {
    height: auto;
    aspect-ratio: 2 / 1;
    object-position: center top;
  }

  /* 【修正】承認事項バナー（BCP等）を左寄せにし、左の余計な余白をなくす */
  .ida-outline-info__badges {
    justify-content: flex-start;
  }

  .ida-outline-info__badges figure {
    text-align: left;
  }

  .ida-outline-info__badges img {
    margin: 0;
  }
}