/* ここからアプリ ヘッダー */

.common-header {
  border-top: 2px solid #e0481d;
  background-color: #fff;
}
.common-header__logo {
  display: flex;
  align-items: center; /* 上下中央揃え */
  justify-content: flex-end;
}

@media screen and (min-width: 768px) {
  .common-header__logo a {
    position: relative;
  }
  .common-header__logo a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition-duration: 300ms;
  }
  .common-header__logo a:hover,
  .common-header__logo a:focus-visible {
    outline: none;
  }
  .common-header__logo a:hover::after,
  .common-header__logo a:focus-visible::after {
    border-color: #757575;
  }
  .common-header__logo span {
    display: none;
  }
  .common-header.inside {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  /* オレンジラインを4pxに */
  .common-header {
    border-top: 4px solid #e0481d !important;
  }

  .common-header__logo {
    height: 37px !important; /* SP時の高さ */
    display: flex !important;
    flex-direction: row !important; /* 横並び */
    align-items: center !important;
    justify-content: space-between !important; /* 左右に配置 */
    gap: 10px !important;
    margin-right: 0 !important;
    position: relative !important;
  }

  /* デジwithロゴは表示、中小機構ロゴは非表示 */
  .common-header__logo > a img {
    display: none !important; /* 中小機構ロゴを非表示 */
  }

  /* デジwithロゴを中央に配置 */
  .common-header__logo .itpf-logo999 {
    display: flex !important;
    align-items: center !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .common-header__logo .itpf-logo999 img {
    display: block !important; /* デジwithロゴの画像を表示 */
    width: 54px !important; /* 元のサイズを維持 */
    height: 20px !important;
  }

  /* テキストを右寄せ */
  .common-header__logo span {
    font-family: 'Yu Gothic Medium', '游ゴシック Medium', 'YuGothic', '游ゴシック体', 'Yu Gothic', sans-serif !important;
    font-size: 14px !important;
    white-space: nowrap !important; /* 1行で表示 */
    margin-left: auto !important; /* 右寄せ */
  }
}

/* PC・SP共通：common-header__logoの下に水色ラインを引く */
.common-header.outside {
  border-bottom: 3px solid #007b95;
  position: relative;
  z-index: 100;
}

/* 狭い画面ではデジwithロゴを左寄せに変更（被り防止） */
@media screen and (max-width: 590px) {
  .common-header__logo .itpf-logo999 {
    position: static !important;
    transform: none !important;
    margin-right: auto !important;
  }

  .common-header__logo {
    justify-content: space-between !important;
  }
}

/* ========================================
   CocoAppヘッダーのレイアウト調整（PC版）
   ======================================== */

@media screen and (min-width: 768px) {
  /* デジwithロゴと中小機構ロゴを右寄せ */
  .common-header__logo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding: 0px 14px 0px 0px; /* 右側余白14px */
  }

  /* デジwithロゴのセクション */
  .common-header__logo .itpf-place999 {
    margin: 0;
  }

  .common-header__logo .itpf-logo999 {
    margin: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0; /* デジwithロゴも縮小を防ぐ */
  }

  /* 中小機構ロゴのコンテナ */
  .common-header__logo > a {
    display: flex;
    align-items: center; /* ロゴを上下中央に */
    padding: 5px;
    flex-shrink: 0; /* コンテナも縮小を防ぐ */
  }

  /* 中小機構ロゴのサイズ（VI規程：横幅60px以上） */
  .common-header__logo > a img {
    width: 60px !important;
    min-width: 60px !important; /* 最低横幅60pxを保証 */
    height: auto !important;
    flex-shrink: 0; /* 縮小を防ぐ */
  }

  /* デジwithロゴのサイズ（PC版） */
  .common-header__logo .itpf-logo999 img {
    width: auto;
    height: 30px;
    display: block; /* 画像のデフォルトの余白を削除 */
    flex-shrink: 0; /* 縮小を防ぐ */
  }

  /* header_logoの::afterが水色ラインに被らないように調整 */
  .header_logo::after {
    z-index: 1 !important;
  }

  /* パンくずリストがヘッダーに被らないように調整 */
  .breadcrumbs {
    margin-top: 20px !important;
  }
}

/* トップページのヘッダーがコンテンツに被っているのを調整 */
.c-pickup-area {
  margin-top: 114px;
}
@media screen and (max-width: 767.499px) {
  .c-pickup-area {
      margin-top: 104px;
  }
}