/* ============================================================
   Header Component — BEM / PC-first / Responsive (768px)
   依存: Google Fonts (Manrope 500)
   ============================================================ */

/* ----------------------------------------------------------
   Custom Properties
   ブレークポイントをまたいで変化する値は
   メディアクエリ内で変数を上書きするだけで対応できる。
   ---------------------------------------------------------- */
:root {
  /* PC */
  --header-padding-y:        64px;
  --header-padding-x:        96px;
  --header-nav-gap:          72px;

  /* 共通 */
  --header-text-color:       #656565;
  --header-font-size:        18px;
  --header-font-weight:      700;
  --header-z-index:          100;
  --header-hover-opacity:    0.55;
  --header-transition:       opacity 0.2s ease;

  /* ドロワー */
  --drawer-width:            280px;
  --drawer-bg:               #ffffff;
  --drawer-padding-x:        32px;
  --drawer-padding-y:        40px;
  --drawer-link-gap:         40px;
  --drawer-z-index:          200;
  --drawer-overlay-bg:       rgba(0, 0, 0, 0.32);
  --drawer-transition:       transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                             opacity  0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ハンバーガーアイコン */
  --burger-width:            36px;
  --burger-height:           2px;
  --burger-gap:              12px;
  --burger-color:            #FFFFFF;
  --burger-transition:       transform 0.3s ease, opacity 0.2s ease;
}

/* SP（768px以下）で変数を上書き */
@media (max-width: 768px) {
  :root {
    --header-padding-y: 24px;
    --header-padding-x: 26px;
  }
}

/* ----------------------------------------------------------
   Reset / Base
   ---------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 160px; /* 固定ヘッダーの高さ分オフセット */
  font-family: 'Manrope', 'Zen Kaku Gothic Antique', sans-serif;
}

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

body {
  font-family: 'Manrope', sans-serif;
}

/* ----------------------------------------------------------
   Block: .header
   ---------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--header-z-index);
  background-color: transparent;
  /*
    将来の拡張ポイント:
    .header--scrolled {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    }
  */
}

/* ----------------------------------------------------------
   Element: .header__inner
   Flexbox で左右レイアウトを担う唯一のコンテナ。
   ---------------------------------------------------------- */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-padding-y) var(--header-padding-x);
}

/* ----------------------------------------------------------
   Element: .header__logo
   ロゴ差し込みポイント。flex-shrink: 0 でロゴの潰れを防ぐ。
   ---------------------------------------------------------- */
.header__logo {
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   Element: .header__nav（PC専用）
   SP では display: none で非表示。
   ---------------------------------------------------------- */
.header__nav {
  /* PC: 常に表示 */
}

@media (max-width: 768px) {
  .header__nav {
    display: none; /* SP: ドロワーに役割を移譲 */
  }
}

/* ----------------------------------------------------------
   Element: .header__nav-list
   ---------------------------------------------------------- */
.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--header-nav-gap);
  list-style: none;
}

/* ----------------------------------------------------------
   Element: .header__nav-link
   ---------------------------------------------------------- */
.header__nav-link {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: var(--header-font-size);
  font-weight: var(--header-font-weight);
  color: var(--header-text-color);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: var(--header-transition);
}

.header__nav-link:hover {
  opacity: var(--header-hover-opacity);
}

.header__nav-link:focus-visible {
  opacity: var(--header-hover-opacity);
  outline: 2px solid var(--header-text-color);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ----------------------------------------------------------
   Element: .header__menu-btn（SP専用ハンバーガーボタン）
   - PC では display: none
   - SP では Flexbox でアイコンを中央揃え
   ---------------------------------------------------------- */
.header__menu-btn {
  display: none; /* PC: 非表示 */

  align-items: center;
  justify-content: center;
  width: 44px;   /* タップターゲット: 最低 44×44px を確保 */
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; /* iOS タップハイライト除去 */
}

@media (max-width: 768px) {
  .header__menu-btn {
    display: flex; /* SP: 表示 */
  }
}

/* ----------------------------------------------------------
   Element: .header__menu-icon（ハンバーガーアイコン）
   ::before / ::after と本体で 3本線を構成。
   .header__menu-btn--open 付与時に ✕ へアニメーション変化。
   ---------------------------------------------------------- */
.header__menu-icon,
.header__menu-icon::before,
.header__menu-icon::after {
  display: block;
  width: var(--burger-width);
  height: var(--burger-height);
  background-color: var(--burger-color);
  border-radius: 1px;
  transition: var(--burger-transition);
}

.header__menu-icon {
  position: relative;
}

.header__menu-icon::before,
.header__menu-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.header__menu-icon::before {
  top: calc(-1 * (var(--burger-gap) + var(--burger-height)));
}

.header__menu-icon::after {
  top: calc(var(--burger-gap) + var(--burger-height));
}

/* ✕ アニメーション（open 状態） */
.header__menu-btn--open .header__menu-icon {
  background-color: transparent; /* 中央線を消す */
}

.header__menu-btn--open .header__menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.header__menu-btn--open .header__menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ----------------------------------------------------------
   Block: .drawer（SP専用モーダルメニュー）
   フルスクリーンで中央にナビゲーションを表示。
   ---------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.55);
  padding: 25px 20px;
  z-index: var(--drawer-z-index);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--drawer-transition);
}

.drawer[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.drawer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #A5E6E0;
}

/* ----------------------------------------------------------
   Element: .drawer__close（閉じるボタン）
   ---------------------------------------------------------- */
.drawer__close {
  position: absolute;
  top: 40px;
  right: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.drawer__close-icon,
.drawer__close-icon::before,
.drawer__close-icon::after {
  display: block;
  width: 38px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 1px;
}

.drawer__close-icon {
  position: relative;
  background-color: transparent;
}

.drawer__close-icon::before,
.drawer__close-icon::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
}

.drawer__close-icon::before {
  transform: rotate(45deg);
}

.drawer__close-icon::after {
  transform: rotate(-45deg);
}

/* ----------------------------------------------------------
   Element: .drawer__list
   ---------------------------------------------------------- */
.drawer__list {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--drawer-link-gap);
  list-style: none;
}

/* ----------------------------------------------------------
   Element: .drawer__link
   ---------------------------------------------------------- */
.drawer__link {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 25px;
  font-weight: var(--header-font-weight);
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: var(--header-transition);
}

.drawer__link:hover,
.drawer__link:focus-visible {
  opacity: var(--header-hover-opacity);
}

.drawer__link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
  border-radius: 2px;
}

/* ----------------------------------------------------------
   Block: .drawer-overlay（ドロワー背景オーバーレイ）
   ---------------------------------------------------------- */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.55);
  z-index: calc(var(--drawer-z-index) - 1);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ----------------------------------------------------------
   Section: .hero
   - ヘッダー（fixed）と重なる形で上部から開始
   - 背景画像をタイル状にリピート
   ---------------------------------------------------------- */
.hero {
  height: 800px;
  background-image: url('../image/bg_green.png');
  background-repeat: repeat;
  background-size: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .hero {
    height: 100vh;
    background-image: url('../image/bg_green_sp.png');
  }
}

/* ----------------------------------------------------------
   Element: .hero__inner
   ロゴとテキストを横並びにし、96px の gap を確保。
   ---------------------------------------------------------- */
.hero__inner {
  display: flex;
  align-items: center;
  gap: 56px;
}

/* ----------------------------------------------------------
   Element: .hero__logo
   ---------------------------------------------------------- */
.hero__logo {
  display: block;
  height: 220px;
  width: auto;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   Element: .hero__text
   ---------------------------------------------------------- */
.hero__text {
  font-family: 'Manrope', 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 45px;
  font-weight: 700;
  color: var(--header-text-color);
  line-height: 1.2;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------
   Hero: SP レスポンシブ（768px以下）
   - ロゴ＋テキストを縦積みに変更
   - ロゴ幅 112px（390px基準）、テキスト 27px、gap 56px
   ---------------------------------------------------------- */
/* PC: 改行タグを非表示 */
.hero__text-br {
  display: none;
}

.hero__text-span {
  padding-left: 0;
}

@media (max-width: 768px) {
  .hero__inner {
    flex-direction: column;
    gap: 56px;
  }

  .hero__logo {
    width: 112px;
    height: auto;
  }

  .hero__text {
    font-size: 27px;
    line-height: 1.5;
    text-align: center;
  }

  .hero__text-br {
    display: inline;
  }

  .hero__text-span {
    padding-left: 0.5em;
  }
}

/* ----------------------------------------------------------
   Section: .message
   最背面: bg_yellow.png / 前面カード: bg_green.png + border-radius 88px
   ---------------------------------------------------------- */
.message {
  position: relative;
  background-image: url('../image/bg_yellow.png');
  background-repeat: repeat;
  background-size: auto;
  padding: 80px 96px;
  overflow: hidden;
}

/* ----------------------------------------------------------
   Element: .message__card
   bg_green.png を背景に持つ角丸カード。
   ---------------------------------------------------------- */
.message__card {
  background-image: url('../image/bg_green.png');
  background-repeat: repeat;
  background-size: auto;
  border-radius: 88px;
  overflow: hidden;
  padding: 80px 120px;
}

/* ----------------------------------------------------------
   Element: .message__inner
   テキストコンテンツを中央揃えで縦積み。
   ---------------------------------------------------------- */
.message__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------
   Element: .message__label
   About Us ラベルと同一スタイル。
   ---------------------------------------------------------- */
.message__label {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #77DDD2;
  background-color: #ffffff;
  padding: 8px 24px;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------
   Element: .message__body
   ---------------------------------------------------------- */
.message__body {
  font-family: 'Manrope', 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--header-text-color);
  line-height: 2.15;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------
   Element: .message__quote
   引用文。本文より少し強調。
   ---------------------------------------------------------- */
.message__quote {
  font-family: 'Manrope', 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--header-text-color);
  letter-spacing: 0.06em;
}

/* ----------------------------------------------------------
   Element: .message__author
   代表名エリア。縦並び・中央揃え。
   ---------------------------------------------------------- */
.message__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 32px;
  gap: 8px;
}

.message__author-title {
  font-family: 'Manrope', 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--header-text-color);
  letter-spacing: 0.08em;
}

.message__author-name {
  font-family: 'Manrope', 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--header-text-color);
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------
   Element: .message__circle
   .message（セクション全体）に対して absolute 配置。
   ---------------------------------------------------------- */
.message__circle {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 218px;
  height: auto;
  pointer-events: none;
}

/* PC: message__br は表示 */
.message__br {
  display: inline;
}

@media (max-width: 768px) {
  .message {
    padding: 32px 24px 88px;
  }

  .message__inner {
    gap: 32px;
  }

  .message__card {
    background-image: url('../image/bg_green_sp.png');
    border-radius: 32px;
    padding: 56px 32px;
  }

  .message__label {
    font-size: 16px;
    padding: 8px 40px;
    letter-spacing: 0.06em;
  }

  .message__br {
    display: none;
  }

  .message__body {
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
  }

  .message__quote {
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
  }

  .message__author {
    flex-direction: row;
    align-items: baseline;
    padding-top: 0;
  }

  .message__author-title {
    font-size: 15px;
  }

  .message__author-name {
    font-size: 18px;
  }

  .message__circle {
    position: absolute;
    right: -47px;
    top: auto;
    transform: translateY(0);
    bottom: 16px;
    width: 128px;
  }
}

/* ----------------------------------------------------------
   Section: .about
   ---------------------------------------------------------- */
.about {
  background-image: url('../image/bg_yellow.png');
  background-repeat: repeat;
  background-size: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 210px 0;
}

/* ----------------------------------------------------------
   Element: .about__inner
   ラベルとテキストを縦並びにし、中央揃え。
   ---------------------------------------------------------- */
.about__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  text-align: center;
}

/* ----------------------------------------------------------
   Element: .about__label
   グレー背景のバッジ型ラベル。
   ---------------------------------------------------------- */
.about__label {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  background-color: #848484;
  padding: 8px 24px;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------
   Element: .about__text
   ---------------------------------------------------------- */
.about__text {
  font-family: 'Manrope', 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #848484;
  line-height: 2.15;
  letter-spacing: 0.04em;
  text-align: center;
}

/* PC: about__br は表示 */
.about__br {
  display: inline;
}

/* ----------------------------------------------------------
   About: SP レスポンシブ（768px以下）
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .about__br {
    display: none;
  }

  .about {
    padding: 88px 32px 46px;
  }

  .about__label {
    font-size: 16px;
    padding: 8px 40px;
    letter-spacing: 0.06em;
  }

  .about__text {
    font-size: 18px;
    line-height: 1.9;
    text-align: left;
  }
}

/* ----------------------------------------------------------
   Section: .company
   ---------------------------------------------------------- */
.company {
  position: relative;
  background-image: url('../image/bg_yellow.png');
  background-repeat: repeat;
  background-size: auto;
  padding: 120px 96px 240px;
  overflow: hidden;
}

/* ----------------------------------------------------------
   Element: .company__hexagon / .company__wave
   装飾オブジェクト。セクション全体に対して absolute 配置。
   ---------------------------------------------------------- */
.company__hexagon {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: auto;
  pointer-events: none;
}

.company__wave {
  position: absolute;
  bottom: -200px;
  right: -108px;
  width: 746px;
  height: auto;
  pointer-events: none;
}

/* ----------------------------------------------------------
   Element: .company__inner
   ラベルとテーブルを縦積み・中央揃え。
   ---------------------------------------------------------- */
.company__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}


/* ----------------------------------------------------------
   Element: .company__label
   他セクションのラベルと同一スタイル。
   ---------------------------------------------------------- */
.company__label {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  background-color: #848484;
  padding: 8px 24px;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .company {
    padding: 32px 32px 88px;
  }

  .company__label {
    font-size: 16px;
    padding: 8px 40px;
    letter-spacing: 0.06em;
  }

  .company__hexagon {
    display: none;
  }

  .company__wave {
    bottom: -80px;
    right: -38px;
    width: 298px;
  }

  .company__inner {
    gap: 48px;
  }
}

/* ----------------------------------------------------------
   Element: .company__table
   dl を grid で2カラム化。
   ---------------------------------------------------------- */
.company__table {
  width: 100%;
  max-width: 730px;
}

/* ----------------------------------------------------------
   Element: .company__row
   各行を grid で term / desc に分割。
   ---------------------------------------------------------- */
.company__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 24px 0;
}

/* ----------------------------------------------------------
   Element: .company__term
   ---------------------------------------------------------- */
.company__term {
  font-family: 'Manrope', 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--header-text-color);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------
   Element: .company__desc
   ---------------------------------------------------------- */
.company__desc {
  font-family: 'Manrope', 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--header-text-color);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.company__desc-br {
  display: none;
}

@media (max-width: 768px) {
  .company__row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .company__term {
    font-size: 13px;
  }

  .company__desc {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.56;
  }

  .company__desc-br {
    display: inline;
  }
}

/* ----------------------------------------------------------
   Block: .footer
   ---------------------------------------------------------- */
.footer {
  background-image: url('../image/bg_green.png');
  background-repeat: repeat;
  background-size: auto;
  padding: 64px 96px;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  text-align: center;
}

.footer__logo {
  width: 168px;
  height: auto;
}

.footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.footer__name {
  font-family: 'Manrope', 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--header-text-color);
  letter-spacing: 0.06em;
}

.footer__address,
.footer__contact {
  font-family: 'Manrope', 'Zen Kaku Gothic Antique', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--header-text-color);
  letter-spacing: 0.04em;
}

.footer__copyright {
  font-family: 'Manrope', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--header-text-color);
  letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .footer {
    padding: 64px 40px;
  }

  .footer__inner {
    gap: 20px;
  }

  .footer__logo {
    width: 122px;
  }

  .footer__container {
    gap: 12px;
    margin-top: 24px;
  }

  .footer__name {
    font-size: 14px;
  }

  .footer__address,
  .footer__contact {
    font-size: 14px;
  }

  .footer__copyright {
    font-size: 11px;
  }
}