/**
 * Home Page Styles - トップページ専用スタイル
 * 
 * @package kai-rinkou
 * @since 1.0.0
 */

/* ==================================================
 * ヒーローセクション（画像スライダー対応）
 * ================================================== */

.kai-rinkou-hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.kai-rinkou-hero__container {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* スライダーコンテナ */
.kai-rinkou-hero__slider {
  width: 100%;
  height: 100%;
  position: relative;
}

.kai-rinkou-hero__slides {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 個別スライド */
.kai-rinkou-hero__slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  /* transform: scale(1.1); */
  transition: opacity 1.5s ease-in-out;
  will-change: opacity, transform;
}

.kai-rinkou-hero__slide--active {
  opacity: 1;
  /* transform: scale(1.1); */
  animation: zoomOut 4s ease-out forwards;
}

.kai-rinkou-hero__slide--active.zoom-complete {
  transform: scale(1);
  animation: none;
}

.kai-rinkou-hero__slide--fade-out {
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.5s ease-in-out, transform 2s ease-out;
}

.kai-rinkou-hero__slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ズームアウトアニメーション */
@keyframes zoomOut {
  0% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}


.kai-rinkou-hero__content {
  position: absolute;
  right: 100px;
  top: 80%;
  transform: translateY(-50%);
  z-index: 10;
}

.kai-rinkou-hero__title {
  font-size: clamp(2rem, 1.165rem + 1.74vw, 3.25rem);
  font-weight: 700;
  margin-bottom: 40px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  color: white;
}

.kai-rinkou-hero__title-word {
  font-size: clamp(3rem, 2.332rem + 1.39vw, 4rem);
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ==================================================
 * 企業理念セクション（Group 213.png準拠）
 * ================================================== */

.philosophy {
  padding: 120px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.philosophy__container {
  display: flex;
  flex-direction: row-reverse;
  gap: clamp(0.625rem, -10.833rem + 16.67vw, 3.75rem);
  align-items: flex-start;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 5rem;
}

.philosophy__column {
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/**
 * 企業理念セクションのアニメーション設定
 *
 * - 下からスライドアップするフェードイン演出
 * - アニメーションクラスはJavaScriptで制御
 * - prefers-reduced-motion 環境ではアニメーション無効化
 */
@keyframes philosophySlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.philosophy__column {
  opacity: 0;
  transform: translateY(30px);
}

.philosophy__column.is-animated {
  animation: philosophySlideUp 0.9s ease-out forwards;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .philosophy__column {
    opacity: 1;
    transform: none;
  }

  .philosophy__column.is-animated {
    animation: none;
  }
}

/**
 * 各カラムのgapを1rem（16px）に統一
 * 
 * - 企業理念セクションの各カラム（.philosophy__column--01〜--05）に適用
 * - デザイン意図：全カラムの縦方向の間隔を統一し、可読性と整列性を向上
 * - 制限事項：個別のgap指定は廃止
 */
.philosophy__column--01,
.philosophy__column--02,
.philosophy__column--03,
.philosophy__column--04,
.philosophy__column--05 {
  gap: 1rem;
}

/* タイトル（見出し）スタイル */
.philosophy__title {
  font-size: clamp(1.875rem, 1.624rem + 0.52vw, 2.25rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.05em;
  color: #4A4A4A;
  margin: 0;
  text-align: left;
}

/* テキストスタイル */
.philosophy__text {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0.05em;
  color: #4A4A4A;
  margin: 0;
  text-align: right;
}

/* 各カラムの特別な配置 */
.philosophy__column--02 .philosophy__text {
  text-align: right;
}

.philosophy__column--03 .philosophy__text:first-child {
  text-align: left;
  /* 「宮崎県北エリアを中心に、」のみ左寄せ */
}

.philosophy__column--03 .philosophy__text:not(:first-child) {
  text-align: right;
  /* その他は右寄せ */
}

.philosophy__column--04 {
  justify-content: space-between;
  /* Frame 23のspace-between */
}

.philosophy__column--05 .philosophy__text {
  text-align: center;
  /* 結論は中央寄せ */
}

/* Lightning親テーマのh2スタイルを完全に無効化 */
.philosophy h2,
.philosophy .philosophy__title,
.philosophy h2:where(:not(.wp-block-post-title)) {
  padding: 0 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  margin: 0 !important;
  background: none !important;
}

/* 更に具体的にLightningのスタイルを上書き */
.philosophy .philosophy__column h2.philosophy__title {
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  border: none !important;
  margin: 0 !important;
}

/* 最終行（Noto Sans JP） */
.philosophy__text--final {
  text-align: center;
}

/* レスポンシブ対応 - 1200px以下で横書きに変更 */
@media (max-width: 1200px) {
  .philosophy {
    padding: 80px 40px;
  }

  .philosophy__container {
    flex-direction: column;
    gap: 0;
    align-items: center;
    max-width: 800px;
  }

  .philosophy__column {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    width: 100%;
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .philosophy__title {
    font-size: 32px;
    text-align: center;
    display: inline-block;
    margin: 0 0.5rem;
  }

  .philosophy__text {
    font-size: 20px;
    text-align: center;
    line-height: 1.8;
    margin: 0;
    padding: 0;
  }

  /* JavaScriptで連結されたテキスト用の調整 */
  .philosophy__column .philosophy__text:only-child,
  .philosophy__column .philosophy__title:only-child {
    display: block;
    width: 100%;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.8;
  }

  /* 横書き時のカラム間の統一スタイル */
  .philosophy__column {
    margin-bottom: 2rem;
  }

  .philosophy__column:last-child {
    margin-bottom: 0;
  }

  /* 各カラムの特別配置をリセット */
  .philosophy__column--02 .philosophy__text,
  .philosophy__column--03 .philosophy__text:first-child,
  .philosophy__column--03 .philosophy__text:not(:first-child),
  .philosophy__column--05 .philosophy__text {
    text-align: center;
  }

  .philosophy__column--04 {
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .kai-rinkou-hero__content {
    left: 60px;
  }

  .kai-rinkou-hero__subtitle {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .philosophy {
    padding: 60px 20px;
    min-height: auto;
  }

  .philosophy__title {
    font-size: 28px;
  }

  .philosophy__text {
    font-size: 18px;
  }

  .kai-rinkou-hero {
    height: 70vh;
  }


  /* ヒーローセクションのキャッチコピーを左側に縦書きで配置 */
  .kai-rinkou-hero__content {
    position: absolute;
    left: 20px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  .kai-rinkou-hero__title {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    margin-bottom: 20px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    -webkit-writing-mode: vertical-rl;
    -webkit-text-orientation: upright;
    line-height: 1.2;
    letter-spacing: 0.1em;
  }

  .kai-rinkou-hero__title-word {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  .kai-rinkou-hero__subtitle {
    font-size: 18px;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    -webkit-writing-mode: horizontal-tb;
    -webkit-text-orientation: mixed;
  }
}

@media (max-width: 480px) {
  .philosophy {
    padding: 40px 16px;
  }

  .philosophy__container {
    padding: 2rem;
  }

  .philosophy__title {
    font-size: 24px;
  }

  .philosophy__text {
    font-size: 16px;
  }

  /* 480px以下でのヒーローセクション調整 */
  .kai-rinkou-hero {
    height: 60vh;
  }


  .kai-rinkou-hero__content {
    left: 15px;
    right: auto;
  }

  .kai-rinkou-hero__title {
    font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
    line-height: 1.1;
    letter-spacing: 0.05em;
  }

  .kai-rinkou-hero__title-word {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
  }
}

/* ==================================================
 * 会社概要セクション - SDGsリンク
 * ================================================== */

.company__sdgs {
  margin-top: 60px;
  text-align: center;
  padding: 0 60px;
}

.company__sdgs-link {
  display: inline-block;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.company__sdgs-link:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.company__sdgs-img {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .company__sdgs {
    margin-top: 40px;
    padding: 0 20px;
  }

  .company__sdgs-img {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .company__sdgs {
    margin-top: 30px;
    padding: 0 16px;
  }
}