* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.background-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* 前面のコンテンツ */
body {
  margin: 0;
  padding: 0;
}

/* 非トップページ（about.html）: ヘッダー高さを流動的に保つ */
header {
  padding: 1.5vh 0 !important; /* %管理で自動調整 */
  min-height: 9vh !important;
}
header .container { padding: 0 20px !important; }

.background-scroller {
  position: fixed;
  top: 0; /* 背景画像の開始位置 */
  left: 0;
  height: 2000px; /* 背景画像の高さ */
  width: 100%;
  background-image: url("/images/office.jpg");
  filter:brightness(100%);
  filter:opacity(90%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 0;
  will-change: transform;
}

.content-layer {
  position: relative;
  z-index: 1;
  padding-top: 0;      /* ヘッダー直下の位置決めは --header-height に委譲 */
  padding-bottom: 100px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  color: #fff;
}



.logo-text {
  color: white;
  font-size: 2rem;
  z-index: 2;
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.hidden {
  display: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.show {
  display: block;
  opacity: 1;
}



/* 通常のセクション */
.about {
  padding: 40px 20px;
  background: white;
  position: relative;
  z-index: 5;
}


main {
  padding-top: 0px;  /* ヘッダーの高さに応じて調整 */
  padding-bottom: 60px; /* フッターの高さに応じて調整 */
}

main::after {
  content: "";
  display: block;
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 拠点ボックス表示 */
/* セクション全体に共通スタイルを適用 */
.company-info,
.offices,
.history {
  background-color:rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: var(--section-pad-y) var(--section-pad-x);
  border-radius: 8px;
  background-image: 
      linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.05) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.05) 75%);
  background-size: 40px 40px;
  background-attachment: fixed;
  padding: var(--section-pad-y) var(--section-pad-x);
  margin: clamp(16px, 4vh, 32px) auto;
  max-width: 70%;
  border-radius: 10px;
  font-size: var(--fs-body);
  line-height: 1.8;
}

/* 法人情報はフロート内包でボックス高さを自然に伸ばす */
.company-info { display: flow-root; }

/* 哲学セクション */
.philosophy {
  background-color:rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: var(--section-pad-y) var(--section-pad-x);
  border-radius: 8px;
  background-image: 
      linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.05) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.05) 75%);
  background-size: 40px 40px;
  background-attachment: fixed;
  padding: var(--section-pad-y) var(--section-pad-x);
  margin: clamp(16px, 4vh, 32px) auto;
  max-width: 70%;
  border-radius: 10px;

}

.philosophy-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0rem;
}

.philosophy-text {
  font-size: clamp(1.25rem, 2.8vw, var(--fs-h1));
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  width: 100%;
}

.large-char {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  color: #fff;
  font-weight: 400;
  display: inline-block;
  margin-right: 0.1em;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.philosophy-author {
  font-size: clamp(1rem, 1.6vw, var(--fs-h3));
  color: #fff;
  font-weight: 300;
  margin-top: clamp(2rem, 6vw, 5rem);
  letter-spacing: 0.05em;
  width: 100%;
}


.philosophy-text.philosophy-left {
  text-align: left;
  margin-left: clamp(16px, 4vw, 50px); /* 横幅に応じて左余白も縮小 */
}

.philosophy-text.philosophy-center {
  text-align: center;
}

.philosophy-author.philosophy-right {
  text-align: right;
  margin-right: clamp(8px, 2.5vw, 20px); /* 横幅に応じて右余白も縮小 */
}

/* セクションの見出し */
.company-info h2,
.offices h2,
.history h2 {
  font-size: var(--fs-h2);
  margin-bottom: 1rem;
  text-align: center;
  border-bottom: 2px solid #fff;
  padding-bottom: 0.5rem;
}

/* 各リストの余白調整 */
.company-info ul,
.history ul {
  padding-left: 1rem;
}

.company-info li,
.history li {
  margin-bottom: 0.7rem;
}

.company-info-text {
  font-size: var(--fs-body);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 35%;
  float: left;
}

/* ボックス内の最初の項目だけ、画面に応じて柔軟に縮む */
.company-info-text ul li:first-child {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
}

.company-info-image-wrapper {
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  /* 固定高さを撤廃し、内容に応じて伸縮 */
  height: auto;
}

.company-info-image {
  /* 3列を基本に柔軟に折り返す */
  flex: 1 1 30%;
  max-width: 30%;
  width: 100%;                 /* 枠幅にフィット */
  height: auto;                /* 高さは比率で決定 */
  aspect-ratio: var(--about-img-ratio, 3/2); /* 統一比率で揃える */
  display: block;
  border-radius: 8px;
  object-fit: cover;           /* はみ出しをトリミングして統一感 */
}

.office-box {
  background: rgba(255, 255, 255, 0.9); /* 各ボックスも黒の半透明 */
  color: #000;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: var(--fs-body);
  max-width: 29%;
}

/* 拠点ボックス全体を中央寄せ */
.office-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center; /* 中央寄せ */
}

.office-box a {
  color: #1ac0f7;
  text-decoration: none;
}

.office-box a:hover {
  text-decoration: underline;
}

/* ========================================
   フレキシブル：長文・URL・メール等の折返しガード
   - ボックス内のどの要素でも横溢れしない
   ======================================== */
.philosophy *,
.company-info *,
.offices *,
.history * {
  overflow-wrap: anywhere; /* 連続英数字も適切に改行 */
  word-wrap: break-word;   /* 互換性のため */
  word-break: normal;      /* 日本語の文字単位分割は避ける */
  hyphens: auto;           /* 英単語にハイフンで自然改行 */
}

/* コンテナ・ボックスの最小幅を0にしてフレックス縮小を許可 */
.company-info,
.offices,
.history,
.office-grid,
.office-box {
  min-width: 0;
}

/* メールアドレス等の長い英数字列がボックスをはみ出さないようにする */
.office-box,
.office-box p,
.office-box a[href^="mailto:"] {
  overflow-wrap: anywhere;  /* 推奨：スペース無しでも折り返す */
  word-wrap: break-word;    /* レガシー互換 */
  white-space: normal;      /* 折り返しを許可 */
}

.office-box a[href^="mailto:"] {
  display: inline-block;
  max-width: 100%;
}

.timeline {
  list-style: none;
  position: relative;
  margin: 2rem 0 0 0;
  padding-left: 2rem;
  border-left: 3px solid #1ac0f7; /* タイムライン線 */
}

.timeline li {
  margin-bottom: 2rem;
  position: relative;
  padding-left: 1rem;
}

.timeline li::before {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: -0.9rem;
  width: 16px;
  height: 16px;
  background: #649fff;
  border: 3px solid #fff;
  border-radius: 50%;
  z-index: 1;
}

.timeline .year {
  font-weight: bold;
  font-size: var(--fs-h4);
  color: #649fff;
  margin-bottom: 0.3rem;
  display: inline-block;
}

.timeline p {
  font-size: var(--fs-body);
  color: #fff;
  line-height: 1.6;
}

/* ========================================
   レスポンシブ対応
   ======================================== */

/* タブレット（768px以下） */
@media (max-width: 768px) {
  .background-scroller {
    height: 1500px;
  }

  .content-layer {
    padding-top: 0;     /* 二重オフセットを回避 */
    padding-bottom: 80px;
  }

  .philosophy,
  .company-info,
  .offices,
  .history {
    max-width: 95%;
    padding: 1.5rem;
    margin: 1.5rem auto;
    font-size: 1.1rem;
  }

  /* フォントはベースのclampで流動。固定値上書きは行わない */

  .company-info h2,
  .offices h2,
  .history h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .company-info-text {
    max-width: 100%;
    float: none;
    margin-bottom: 2rem;
  }

  .company-info-image-wrapper {
    height: auto;
    gap: 0.8rem;
  }

  .company-info-image {
    flex: 1 1 40%;
    max-width: 40%;
  }

  .office-box {
    max-width: 100%;
    font-size: 1.1rem;
    padding: 1.5rem;
  }

  .office-grid {
    gap: 20px;
    flex-direction: column;
  }

  .timeline {
    padding-left: 1.5rem;
  }

  .timeline li {
    padding-left: 0.8rem;
  }

  .timeline .year {
    font-size: 1rem;
  }

  .timeline p {
    font-size: 1rem;
  }
}

/* スマートフォン（480px以下） */
@media (max-width: 480px) {
  /* 固定ヘッダー分の二重オフセットを避けるため、body の上マージンはゼロに */
  body {
    margin-top: 0;
  }

  .background-scroller {
    height: 1200px;
  }

  .content-layer {
    padding-top: 0;      /* ヘッダー分は --header-height で吸収 */
    padding-bottom: 56px;
  }

  .philosophy,
  .company-info,
  .offices,
  .history {
    max-width: 100%;
    padding: 1rem;
    margin: 1rem auto;
    font-size: 0.95rem;
    border-radius: 0;
  }

  .philosophy-text {
    letter-spacing: 0.05em; /* 極小幅帯は字間を気持ち狭める */
  }

  /* 480px帯でも左右配置を極力維持。中央寄せは更に狭い幅で適用 */

  .large-char {
    font-size: 2.5rem;
    margin-right: 0.05em;
  }

  .philosophy-author {
    font-size: 1rem;
    margin-top: 2rem;
  }

  .company-info h2,
  .offices h2,
  .history h2 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
  }

  .company-info li,
  .history li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
  }

  .company-info-text {
    max-width: 100%;
    float: none;
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .company-info-image-wrapper {
    height: auto;
    gap: 0.5rem;
  }

  .company-info-image {
    flex: 1 1 50%;
    max-width: 50%;
    border-radius: 4px;
  }

  .office-box {
    max-width: 100%;
    font-size: 0.95rem;
    padding: 1rem;
  }

  .office-box h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .office-box p {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .office-grid {
    gap: 15px;
    flex-direction: column;
  }

  .timeline {
    padding-left: 1rem;
    border-left-width: 2px;
  }

  .timeline li {
    padding-left: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .timeline li::before {
    width: 12px;
    height: 12px;
    left: -0.7rem;
  }

  .timeline .year {
    font-size: 0.9rem;
  }

  .timeline p {
    font-size: 0.9rem;
  }
}

/* 超小型デバイス（320px以下） */
@media (max-width: 320px) {
  .philosophy-text {
    font-size: 1.2rem;
  }

  .large-char {
    font-size: 2rem;
  }

  .philosophy-author {
    font-size: 0.9rem;
  }

  .company-info h2,
  .offices h2,
  .history h2 {
    font-size: 1.1rem;
  }

  .company-info-image-wrapper {
    height: 100px;
    flex-direction: column;
  }

  .company-info-image {
    max-width: 80%;
    height: auto;
  }
}

/* Portrait 固有の微調整：画像のはみ出し防止 */
@media (orientation: portrait) {
  .company-info-text {
    max-width: 100%;
    float: none;
    margin-bottom: 1rem;
  }

  .company-info-image-wrapper {
    height: auto; /* 自動高さにして縦に積む */
    gap: 0.6rem;
    flex-direction: column;
    align-items: center;
  }

  .company-info-image {
    max-width: 90%;
    width: 90%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
  }
}