/**
 * AMCトップページ固有スタイル
 * 
 * 目次:
 * 1. 基本設定（CSS Variables, Body）
 * 2. レイアウトコンポーネント（Container, Wrapper, Grid）
 * 3. ユーザー情報コンポーネント（Status, Profile, Data）
 * 4. カード系コンポーネント（ANA Card, Point Cards）
 * 5. UIパーツ（Buttons, Icons, Links）
 * 6. タブUI（Tab Menu, Tab Content）
 * 7. アプリセクション
 * 8. その他セクション（Notice Area, Member Status）
 * 9. レスポンシブ対応（Mobile, Tablet, Desktop）
 */

/* ==========================================================================
   1. 基本設定
   ========================================================================== */

/* 1-1. CSS Variables
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-primary: #00146E;
  --color-secondary: #005AAA;
  --color-background: #E5E9F4;
  --color-gray-background: #F1F1F1;
  --color-gray-light: #E5E5E5;
  --color-gray-border: #E5E5E5;
  --color-gray-medium: #C7C7C7;
  --color-gray-dark: #949499;
  --color-border-dark: #949499;
  --color-text: #333;
  --color-white: #fff;
  --color-black: #000;
  
  /* Spacing */
  --spacing-xs: 0.4rem;
  --spacing-sm: 0.8rem;
  --spacing-md: 1.6rem;
  --spacing-lg: 2.4rem;
  --spacing-xl: 3.2rem;
  --spacing-xxl: 4.8rem;
  
  /* Border Radius */
  --radius-xs: 0.4rem;
  --radius-sm: 1rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.6rem;
  --radius-xl: 2rem;
  --radius-pill: 4rem;
  --border-radius-button: 3rem;
  
  /* Font Sizes */
  --font-size-xs: 1rem;
  --font-size-sm: 1.2rem;
  --font-size-base: 1.4rem;
  --font-size-md: 1.6rem;
  --font-size-lg: 1.8rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 2.4rem;
  
  /* Layout */
  --max-width: 120rem;
}

/* 1-2. Body & Container
   -------------------------------------------------------------------------- */
body {
  background: var(--color-gray-background);
}

/* グレースケール表示（管理画面用） */
/* body全体にfilterを適用するとfixedポジションで崩れるため、個別の要素に適用 */
body.amc-control-grayscale img {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

.asw-container {
  background-color: transparent;
}

.asw-member-info.asw-personalize-displayed {
  display: none;
}

/* ==========================================================================
   2. レイアウトコンポーネント
   ========================================================================== */

/* 2-1. Layout Grid
   -------------------------------------------------------------------------- */


.amc-control-grayscale #control-mv-wrap .js-asw-hero-carousel--top .asw-hero-carousel__item{
  height: 0 !important;
}

.asw-layout-grid:not([class*="hero-area"]) {
  margin-top: 1.6rem;
}

.asw-layout-grid.hero-area {
  min-height: 36rem;
}

/* 2-2. サムネイルボタン（レイアウト用）
   -------------------------------------------------------------------------- */
/* 共通の深いネスト構造を簡略化 */
.hd-be-bottom-thumbnail-button .asw-layout-grid__item > .aem-Grid,
.hd-be-bottom-thumbnail-button .asw-layout-grid__item > .aem-Grid > [class^="ANA-"],
.hd-be-bottom-thumbnail-button .asw-layout-grid__item > .aem-Grid > [class^="ANA-"] > .js-asw-modal__openEl,
.hd-be-bottom-thumbnail-button .asw-layout-grid__item > .aem-Grid > [class^="ANA-"] > .js-asw-modal__openEl > .aem-Grid,
.hd-be-bottom-thumbnail-button .asw-layout-grid__item > .aem-Grid > [class^="ANA-"] > .js-asw-modal__openEl > .aem-Grid > .ANA-3007,
.hd-be-bottom-thumbnail-button .asw-layout-grid__item > .aem-Grid > [class^="ANA-"] > .js-asw-modal__openEl > .aem-Grid > .ANA-3007 > .asw-thumbnail-button,
.hd-be-bottom-thumbnail-button .asw-layout-grid__item > .aem-Grid > [class^="ANA-"] > .js-asw-modal__openEl > .aem-Grid > .ANA-3007 > .asw-thumbnail-button .asw-thumbnail-button__link,
.hd-be-bottom-thumbnail-button .asw-layout-grid__item > .aem-Grid > [class^="ANA-"] > .asw-thumbnail-button,
.hd-be-bottom-thumbnail-button .asw-layout-grid__item > .aem-Grid [class^="ANA-"] > .asw-thumbnail-button .asw-thumbnail-button__link {
  height: 100%;
}

.hd-be-bottom-thumbnail-button .asw-layout-grid__item > .aem-Grid > [class^="ANA-"] > .js-asw-modal__openEl > .aem-Grid > .ANA-3007 > .asw-thumbnail-button .asw-thumbnail-button__item,
.hd-be-bottom-thumbnail-button .asw-layout-grid__item > .aem-Grid > .ANA-3007 > .asw-thumbnail-button .asw-thumbnail-button__item {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
}

.hd-be-bottom-thumbnail-button > .asw-layout-grid__inner > .asw-layout-grid__item > .aem-Grid > [class^="ANA-"] > .js-asw-modal__openEl > .aem-Grid > .ANA-3007 > .asw-thumbnail-button {
  display: flex;
  flex-wrap: nowrap;
}

/* ==========================================================================
   3. ユーザー情報コンポーネント
   ========================================================================== */

/* 3-1. ユーザーステータス
   -------------------------------------------------------------------------- */
.hd-amctop-user-status {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}

.hd-amctop-user-status__image {
  object-fit: scale-down;
  flex-shrink: 0;
}

.hd-amctop-user-status__image img {
  width: 100%;
  height: 100%;
}

.hd-amctop-user-status__data {
  font-weight: 600;
  color: var(--color-white);
}

.hd-amctop-user-status__data-company {
  margin-top: 0;
  margin-bottom: 0;
}

.hd-amctop-user-status__data-name {
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
}

.hd-amctop-user-status__data-name__honorificName {
  display: inline-block;
}

/* 3-2. ユーザーデータ
   -------------------------------------------------------------------------- */
.hd-amctop-user-data.asw-decoration {
  margin: 0;
}

.hd-amctop-user-data .ANA-3010 .asw-text {
  margin: 0;
}

.hd-amctop-user-data .asw-thumbnail-button--text .asw-thumbnail-button__text {
  align-items: center;
}

.hd-amctop-user__data-amount {
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}

.hd-amctop-user__data-unit {
  font-size: var(--font-size-base);
  margin-left: var(--spacing-xs);
}

/* ==========================================================================
   4. カード系コンポーネント
   ========================================================================== */

/* 4-1. ANAカード
   -------------------------------------------------------------------------- */
.hd-amctop-anacard,
.hd-amctop-app__detail-list,
.hd-amctop-app-button {
  display: flex;
  flex-wrap: wrap;
}

.hd-amctop-anacard {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  align-items: center;
  justify-content: center;
}

.hd-amctop-anacard__image img {
  width: 100%;
}

.hd-amctop-anacard .asw-cardface__title {
  margin-top: 0;
  margin-bottom: 0;
}

.hd-amctop-anacard__text {
  margin-bottom: 0;
  font-weight: 600;
}

.hd-amctop-anacard .asw-cardface[data-layout-type="1"] .asw-cardface__box:nth-of-type(3) [class^="ANA-"]:first-of-type > *:first-of-type {
  margin-bottom: 0;
}

/* ==========================================================================
   5. UIパーツ
   ========================================================================== */

/* 5-1. ヒーローボタン
   -------------------------------------------------------------------------- */
.hd-amctop-hero-button.asw-button {
  margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   6. タブUI
   ========================================================================== */

/* 6-1. タブ共通スタイル
   -------------------------------------------------------------------------- */
.hd-asw-tab .asw-thumbnail-button--text .asw-thumbnail-button__item, 
.hd-asw-tab .asw-thumbnail-button--text .asw-thumbnail-button__link {
  border-radius: 0;
}

/* ==========================================================================
   7. アプリセクション
   ========================================================================== */
.hd-amctop-app__phone {
  object-fit: scale-down;
}

.hd-amctop-app__phone img {
  width: 100%;
}

.hd-amctop-app__detail {
  font-weight: 600;
}

.hd-amctop-app__detail-icon {
  margin-right: var(--spacing-md);
  flex-shrink: 0;
}

.hd-amctop-app__detail-icon img {
  width: 100%;
  height: 100%;
}

.hd-amctop-app__detail-title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
}

.hd-amctop-app__detail-image img {
  object-fit: scale-down;
  width: 100%;
  height: 100%;
}

.hd-amctop-app-button {
  margin-top: var(--spacing-xl);
}

.hd-amctop-app-button__item a {
  display: flex;
  width: 100%;
  height: 100%;
  font-weight: 600;
  font-size: var(--font-size-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border: solid 1px var(--color-gray-medium);
  border-radius: var(--radius-sm);
}

.hd-amctop-app-button__item .asw-text-link__anchor--icon::before {
  top: 50%;
  transform: translate(0, -50%);
  right: var(--spacing-lg);
}

.hd-amctop-app-button__icon {
  flex-shrink: 0;
}

.hd-amctop-app-button__icon img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

/* ==========================================================================
   8. その他セクション
   ========================================================================== */

/* 8-1. お知らせエリア
   -------------------------------------------------------------------------- */
.hd-notice-area .asw-image {
  margin: 0;
}

.hd-systemmaintenance-link.asw-list-button {
  margin: 0;
}

/* お知らせエリアのフォントサイズはメディアクエリ内で管理 */
/* .hd-systemmaintenance-link.asw-list-button .asw-list-button__link のfont-sizeはメディアクエリ内で定義 */

/* 8-2. 会員ステータス
   -------------------------------------------------------------------------- */
.hd-amctop-member__image img {
  width: 100%;
  height: 100%;
}

.hd-amctop-member-status__list .asw-text,
.hd-amctop-member-status__list .asw-text-link__anchor {
  color: var(--color-white);
}

.hd-amctop-member-status__list .asw-text {
  margin-bottom: 0;
}

.hd-amctop-member-status__list .asw-text--label {
  margin-bottom: var(--spacing-sm);
}

.hd-amctop-member-status__item .asw-text-link__anchor {
  color: var(--color-white);
}

.hd-amctop-member-status__title {
  font-weight: 600;
  margin-bottom: 0;
}

.hd-amctop-member-status__text {
  margin-top: var(--spacing-sm);
}

.hd-amctop-member-status__text,
.hd-amctop-member-status__item .asw-text-link__item:last-child {
  margin-bottom: 0;
}

/* 8-3. 会員リンク
   -------------------------------------------------------------------------- */
.hd-amctop-member-link {
  margin-top: var(--spacing-xxl);
  margin-bottom: 0;
}

.hd-amctop-member-link .asw-thumbnail-button__item,
.hd-amctop-member-link.asw-thumbnail-button .asw-thumbnail-button__link {
  background: none;
}

.hd-amctop-member-link.asw-thumbnail-button--line > .asw-thumbnail-button__item {
  border: none;
}

.hd-amctop-member-link .asw-thumbnail-button__item a {
  padding: var(--spacing-md);
  color: var(--color-white);
  border: solid 1px var(--color-white);
}

.hd-amctop-member-link .asw-thumbnail-button__item .asw-thumbnail-button__text {
  justify-content: center;
}

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

/* 9-1. モバイル用スタイル (max-width: 768px)
   -------------------------------------------------------------------------- */

@media screen and (max-width:768px) {
  /* SP専用：カバー背景の調整 */
  .hd-amctop-cover {
    background-size: contain;
  }

  /* SP専用：ユーザーステータスのマージンとサイズ */
  .hd-amctop-user-status {
    margin-top: 6.4rem;
  }

  .hd-amctop-user-status__image {
    margin-right: 1.6rem;
    width: 9.2rem;
    height: 5.4rem;
  }

  /* SP専用：ユーザーデータのフォントサイズ */
  .hd-amctop-user-status__data-company {
    font-size: 1.2rem;
  }

  .hd-amctop-user-status__data-name {
    font-size: 2rem;
  }

  .hd-amctop-user__data-amount {
    font-size: 2rem;
  }

  /* SP専用：ヒーローボタンのサイズとスタイル */
  .hd-amctop-hero-button.asw-button .asw-button__link {
    font-size: 1.4rem;
    max-width: 27rem;
    width: 100%;
    padding: 0.8rem 2.4rem;
    box-sizing: border-box;
  }

  /* SP専用：サムネイルボタンのレイアウト調整 */
  .hd-be-bottom-thumbnail-button > .asw-layout-grid__inner {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
  }

  .hd-be-bottom-thumbnail-button > .asw-layout-grid__inner > .asw-layout-grid__item {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .hd-be-bottom-thumbnail-button.asw-layout-grid[data-sp-column="1"] > .asw-layout-grid__inner {
    flex-direction: row;
  }

  /* .hd-be-bottom-thumbnail-button.asw-layout-grid[data-sp-column="1"] > .asw-layout-grid__inner > .asw-layout-grid__item:first-child {
    width: 100%;
  } */

  .hd-be-bottom-thumbnail-button.asw-layout-grid[data-sp-column="1"] > .asw-layout-grid__inner > .asw-layout-grid__item {
    width: 50%;
  }

  .hd-be-bottom-thumbnail-button.asw-layout-grid[data-sp-column="1"] > .asw-layout-grid__inner > .asw-layout-grid__item:not(:first-child) {
    margin-top: 0.5rem;
  }

  .hd-be-bottom-thumbnail-button.asw-layout-grid[data-sp-column="1"] > .asw-layout-grid__inner > .asw-layout-grid__item > .aem-Grid > [class^="ANA-"] > .js-asw-modal__openEl > .aem-Grid > .ANA-3007 > .asw-thumbnail-button {
    gap: unset;
  }

  .hd-be-bottom-thumbnail-button.asw-layout-grid[data-sp-column="1"] > .asw-layout-grid__inner > .asw-layout-grid__item > .aem-Grid > [class^="ANA-"] > .js-asw-modal__openEl > .aem-Grid > .ANA-3007 > .asw-thumbnail-button > .asw-thumbnail-button__item:first-child {
    margin-right: 0.5rem;
  }

  /* SP専用：ログアウト情報のマージン */
  .hd-amctop-logout__information {
    margin-bottom: 4.8rem;
  }

  /* SP専用：会員ステータスタイトルのサイズとマージン */
  .hd-amctop-member-status__tittle {
    font-size: 2.2rem;
    margin-top: 4.8rem;
    margin-bottom: 2.4rem;
  }

  /* SP専用：会員ステータスアイテムの幅とマージン */
  .hd-amctop-member-status__item {
    width: 100%;
  }

  .hd-amctop-member-status__item:not(:first-child) {
    margin-top: 4.8rem;
  }

  /* SP専用：会員画像のサイズ */
  .hd-amctop-member__image {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
  }

  /* SP専用：会員ステータスタイトルのサイズとマージン */
  .hd-amctop-member-status__title {
    font-size: 1.8rem;
    margin-top: 1.6rem;
  }

  /* SP専用：改行を非表示 */
  .hd-amctop-member-status__title br {
    display: none;
  }

  /* SP専用：会員リンクのパディング */
  .hd-amctop-member-link {
    padding-bottom: 4.8rem;
  }

  /* SP専用：会員ステータスアイテムのマージン */
  .hd-amctop-member-status__item .asw-text-link__item:first-child {
    margin-top: 0.8rem;
  }

  /* SP専用：会員リンクアイテムの幅 */
  .hd-amctop-member-link__item {
    width: 100%;
  }

  /* SP専用：会員ステータスリストのマージン */
  .hd-amctop-member-status__list .asw-text-link__item:first-child {
    margin-top: 0.8rem;
  }

  .hd-amctop-anacard {
    padding: 3.2rem 4%;
  }

  .hd-amctop-anacard .asw-cardface__box,
  .hd-amctop-anacard__image {
    width: 100%;
  }

  .hd-amctop-anacard .asw-cardface__title {
    font-size: 1.8rem;
  }

  /* SP専用：ANAカード関連の上書きスタイル */
  .hd-amctop-anacard .asw-cardface[data-layout-type="3"] .asw-cardface__box:nth-of-type(3) .asw-button {
    margin-top: 2.4rem;
  }

  /* SP専用：PC表示用要素を非表示 */
  .for-pc {
    display: none;
  }

  .hd-amctop-anacard__image {
    margin-top: 2.4rem;
  }

  .hd-amctop-anacard__text {
    margin-top: 1.6rem;
  }

  /* SP専用：会員ステータスリストのフォントサイズとマージン */
  .hd-amctop-member-status__list .asw-text--label {
    font-size: 1.8rem;
    margin-top: 3.2rem;
  }

  /* SP専用：会員ステータスリストのパディング */
  .hd-amctop-member-status__list.asw-layout-grid>.asw-layout-grid__inner>.asw-layout-grid__item {
    padding: 0 8vw;
  }

  .hd-amctop-member-status__list.asw-layout-grid>.asw-layout-grid__inner>.asw-layout-grid__item .asw-image {
    padding: 0 8vw;
  }

  /* SP専用：ANAカードレイアウトのマージン調整 */
  .hd-amctop-anacard .asw-cardface[data-layout-type="1"] .asw-cardface__box:nth-of-type(3) [class^="ANA-"]:first-of-type>*:first-of-type {
    margin-top: 2.4rem;
  }

  /* SP専用：アプリセクションのパディング */
  .hd-amctop-app {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }

  /* SP専用：アプリインナーのテキスト配置 */
  .hd-amctop-app__inner {
    text-align: center;
  }

  /* SP専用：アプリ電話画像のサイズ */
  .hd-amctop-app__phone {
    max-width: 12rem;
    width: 100%;
    margin: auto;
  }

  /* SP専用：アプリ詳細アイコンのサイズ */
  .hd-amctop-app__detail-icon {
    width: 4.8rem;
    height: 4.8rem;
  }

  /* SP専用：アプリ詳細テキストの幅とマージン */
  .hd-amctop-app__detail-text {
    width: calc(100% - 6.4rem);
    margin-top: 0;
    margin-bottom: 0;
  }

  /* SP専用：アプリ詳細タイトルのフォントサイズ */
  .hd-amctop-app__detail-title {
    font-size: 1.8rem;
  }

  /* SP専用：アプリ詳細サブタイトルの表示とサイズ */
  .hd-amctop-app__detail-subtitle {
    display: block;
    font-size: 1.4rem;
  }

  /* SP専用：アプリ詳細リストのマージン */
  .hd-amctop-app__detail-list {
    margin-top: 3.2rem;
  }

  /* SP専用：アプリ詳細画像のサイズとマージン */
  .hd-amctop-app__detail-image {
    margin-top: 0.8rem;
    width: 22.6rem;
    margin: auto;
  }

  /* SP専用：アプリボタンアイテムの幅とマージン */
  .hd-amctop-app-button__item {
    width: 100%;
  }

  .hd-amctop-app-button__item:not(:last-child) {
    margin-bottom: 1.6rem;
  }

  .hd-amctop-app-button__item img {
    margin-right: 1.6rem;
  }

  /* SP専用：アプリボタンアイテムの配置 */
  .hd-amctop-app-button__item a {
    align-items: center;
  }

  /* SP専用：アプリボタンアイコンのサイズ */
  .hd-amctop-app-button__icon {
    width: 6.4rem;
    height: 6.4rem;
  }

  /* SP専用：アプリボタンテキストの幅 */
  .hd-amctop-app-button__text {
    width: calc(100% - 8rem);
  }

  /* SP専用：お知らせエリアのパディング */
  .hd-notice-area {
    padding-bottom: 4.8rem;
  }

  /* SP専用：システムメンテナンスリンクのフォントサイズ */
  .hd-systemmaintenance-link.asw-list-button .asw-list-button__link {
    font-size: 1.6rem;
  }

  /* SP専用：ヒーローエリアの最小高さ */
  .asw-layout-grid.hero-area {
    min-height: 28rem;
  }
  .hd-amctop-anacard .asw-cardface[data-layout-type="3"] .asw-cardface__box:nth-of-type(3) .asw-button {
    margin-top: 2.4rem !important;
  }
}

/* 9-2. デスクトップ用スタイル (min-width: 769px)
   -------------------------------------------------------------------------- */

@media screen and (min-width:769px) {
  .hd-amctop-cover {
    background-repeat: no-repeat;
    background-position: 50% 0;
  }

  .hd-amctop-user-data>.aem-Grid>.ANA-3003>.asw-layout-grid>.asw-layout-grid__inner>.asw-layout-grid__item:not(:first-child) {
    border-left: 1px solid #E5E5E5;
  }

  .hd-amctop-user-status {
    margin-top: 5rem;
  }

  .hd-amctop-user-status__image {
    margin-right: 2.4rem;
    width: 14.4rem;
    height: 8.5rem;
  }

  .hd-amctop-user-status__data-company {
    font-size: 1.6rem;
  }

  .hd-amctop-user-status__data-name {
    font-size: 2.8rem;
  }

  .hd-amctop-user__data-amount {
    font-size: 2.8rem;
  }

  .hd-amctop-user__data-amount-point {
    font-size: 2.4rem;
    margin-top: 0.2rem;
  }

  /* PC専用：サムネイルボタンのレイアウト調整 */
  .hd-be-bottom-thumbnail-button > .asw-layout-grid__inner {
    margin-left: -0.4rem;
    margin-right: -0.4rem;
  }

  .hd-be-bottom-thumbnail-button > .asw-layout-grid__inner > .asw-layout-grid__item {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .hd-be-bottom-thumbnail-button .asw-thumbnail-button .asw-thumbnail-button__item .asw-thumbnail-button__image-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hd-be-bottom-thumbnail-button .asw-thumbnail-button .asw-thumbnail-button__item .asw-thumbnail-button__image {
    object-fit: contain;
    width: 3.6rem;
    height: 3.6rem;
  }

  /* PC専用：ヒーローボタンのサイズとスタイル */
  .hd-amctop-hero-button.asw-button .asw-button__link {
    font-size: 1.6rem;
    width: 31.5rem;
  }

  /* PC専用：ログアウト情報のマージン */
  .hd-amctop-logout__information {
    margin-bottom: 6.4rem;
  }

  /* PC専用：会員ステータスタイトルのサイズとマージン */
  .hd-amctop-member-status__tittle {
    font-size: 3.2rem;
    margin-top: 6.3rem;
    margin-bottom: 3.2rem;
  }

  /* PC専用：会員ステータスアイテムの幅 */
  .hd-amctop-member-status__item {
    max-width: 27rem;
    width: 100%;
    flex: 1 1 auto;
  }

  /* PC専用：会員ステータスタイトルのサイズとマージン */
  .hd-amctop-member-status__title {
    font-size: 2.4rem;
    margin-top: 2.4rem;
  }

  /* PC専用：会員リンクのパディング */
  .hd-amctop-member-link {
    padding-bottom: 4rem;
  }

  /* PC専用：会員ステータスアイテムのマージン */
  .hd-amctop-member-status__item .asw-text-link__item:first-child {
    margin-top: 1.6rem;
  }

  /* PC専用：会員リンクアイテムの幅 */
  .hd-amctop-member-link__item {
    width: calc((100% - 9.6rem) / 5);
  }

  /* PC専用：ANAカードのパディング */
  .hd-amctop-anacard {
    padding: 4.8rem 9%;
  }

  /* PC専用：ANAカード画像の幅 */
  .hd-amctop-anacard__image {
    width: calc(100% - 38.3rem);
  }

  /* PC専用：ANAカードタイトルのフォントサイズ */
  .hd-amctop-anacard .asw-cardface__title {
    font-size: 2.4rem;
  }

  /* PC専用：会員ステータスリストのマージン */
  .hd-amctop-member-status__list .asw-text-link__item:first-child {
    margin-top: 1.6rem;
  }

  /* PC専用：会員ステータスリストのフォントサイズ */
  .hd-amctop-member-status__list .asw-text--label {
    font-size: 2.4rem;
  }

  /* PC専用：SP表示用要素を非表示 */
  .for-sp {
    display: none;
  }

  /* PC専用：ANAカード関連の上書きスタイル */
  .hd-amctop-anacard .asw-cardface__box .asw-button__inner {
    margin-top: 0;
  }

  .hd-amctop-anacard .asw-cardface__box .asw-button {
    margin-top: 2.4rem;
  }

  .hd-amctop-anacard__text {
    margin-top: 1.6rem;
  }

  /* PC専用：アプリセクションのパディング */
  .hd-amctop-app {
    padding: clamp(3rem, 5vw, 5.8rem) clamp(2rem, 4vw, 4.8rem) clamp(3rem, 4vw, 4.8rem) clamp(2rem, 4vw, 4.8rem);
  }

  /* PC専用：アプリインナーのレイアウト */
  .hd-amctop-app__inner {
    display: flex;
    justify-content: center;
  }

  /* PC専用：アプリ電話画像のサイズとマージン */
  .hd-amctop-app__phone {
    max-width: 17rem;
    width: 100%;
    margin-right: 4.9rem;
    flex-shrink: 0;
  }

  /* PC専用：アプリ詳細の幅 */
  .hd-amctop-app__detail {
    max-width: 43rem;
    width: 100%;
    flex: 1 1 auto;
  }

  /* PC専用：アプリ詳細アイコンのサイズ */
  .hd-amctop-app__detail-icon {
    width: 6.4rem;
    height: 6.4rem;
  }

  /* PC専用：アプリ詳細テキストの幅 */
  .hd-amctop-app__detail-text {
    width: calc(100% - 8rem);
  }

  /* PC専用：アプリ詳細画像の幅 */
  .hd-amctop-app__detail-image {
    max-width: 36rem;
    width: 100%;
  }

  /* PC専用：アプリ詳細タイトルのフォントサイズ */
  .hd-amctop-app__detail-title {
    font-size: 2.4rem;
  }

  /* PC専用：アプリ詳細リストのマージン */
  .hd-amctop-app__detail-list {
    margin-top: 1.6rem;
  }

  /* PC専用：アプリボタンアイテムの幅とマージン */
  .hd-amctop-app-button__item {
    width: calc((100% - 4.8rem) / 3);
  }

  .hd-amctop-app-button__item:not(:last-child) {
    margin-right: 2.4rem;
  }

  .hd-amctop-app-button__item img {
    margin-right: 0.8rem;
  }

  /* PC専用：アプリボタンアイコンのサイズ */
  .hd-amctop-app-button__icon {
    width: 4.8rem;
    height: 4.8rem;
  }

  /* PC専用：アプリボタンテキストの幅 */
  .hd-amctop-app-button__text {
    width: calc(100% - 6.4rem);
  }

  /* PC専用：会員ステータスリストのレイアウト調整 */
  .hd-amctop-member-status__list.asw-layout-grid>.asw-layout-grid__inner {
    margin-left: calc((48 / -1200) * 100%);
    margin-right: calc((48 / -1200) * 100%);
  }

  .hd-amctop-member-status__list.asw-layout-grid>.asw-layout-grid__inner>.asw-layout-grid__item {
    width: calc((366 / 1296) * 100%);
    padding-left: calc((48 / 1296) * 100%);
    padding-right: calc((48 / 1296) * 100%);
  }

  /* PC専用：お知らせエリアのパディング */
  .hd-notice-area {
    padding-bottom: 6.4rem;
  }

  /* PC専用：システムメンテナンスリンクのスタイル */
  .hd-systemmaintenance-link.asw-list-button .asw-list-button__link {
    font-size: 1.8rem;
    padding: 2rem 2.4rem 2.4rem 0;
  }

  .hd-be-bottom-thumbnail-button>.asw-layout-grid__inner>.asw-layout-grid__item{
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }
}

/* 9-3. タブレット用スタイル (768px - 1024px) は使用しません（スマホスタイルを1024pxまで適用） */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .hd-be-bottom-thumbnail-button.asw-layout-grid[data-tab-column="3"]>.asw-layout-grid__inner>.asw-layout-grid__item:first-child {
    width: 50%;
  }

  .hd-be-bottom-thumbnail-button.asw-layout-grid[data-tab-column="3"]>.asw-layout-grid__inner>.asw-layout-grid__item {
    width: 25%;
  }
}

/* 9-4. デスクトップ用スタイル - 追加 (min-width: 1025px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1025px) {
  /* デスクトップ専用：サムネイルボタンのレイアウト調整 */
  .hd-be-bottom-thumbnail-button.asw-layout-grid[data-pc-column="5"] > .asw-layout-grid__inner > .asw-layout-grid__item:first-child {
    width: calc(16.6666% * 2);
  }

  .hd-be-bottom-thumbnail-button.asw-layout-grid[data-pc-column="5"] > .asw-layout-grid__inner > .asw-layout-grid__item {
    width: 16.6666%;
  }
}

/* ==========================================================================
   10. マイメニュータブUI（ログイン後専用）
   ========================================================================== */

/* 10-1. タブコンテナ
   -------------------------------------------------------------------------- */
.hd-asw-tab {
  padding: 1.8rem 1.5rem 2.4rem;
  border-radius: var(--radius-xl);
  box-shadow: -0.4rem 0.5rem  0.8rem -0.5rem #00000033;
}

/* 10-2. タブメニュー
   -------------------------------------------------------------------------- */
.hd-asw-tab .asw-tab__menu{
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.hd-asw-tab .asw-tab__menu-container {
  flex: 1;
  overflow-x: auto;
}

.hd-asw-tab .asw-tab__menu-wrap {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hd-asw-tab .asw-tab__menu-item {
  white-space: nowrap;
}

.hd-asw-tab .asw-tab__menu-button {
  padding: 1.2rem 1.6rem;
  border: 0.1rem solid #ddd;
  border-radius: var(--radius-xs);
  background-color: #fff;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* アクティブなタブボタンのスタイル（必要に応じてコメント解除）
.hd-asw-tab .asw-tab__menu-item[aria-selected="true"] .asw-tab__menu-button {
  background-color: #00146E;
  color: #fff;
  border-color: #00146E;
}

.hd-asw-tab .asw-tab__menu-item[aria-selected="false"] .asw-tab__menu-button:hover {
  border-color: #00146E;
  color: #00146E;
}
*/

/* 10-3. ナビゲーションボタン
   -------------------------------------------------------------------------- */
.hd-asw-tab .asw-tab__menu-button-prev,
.hd-asw-tab .asw-tab__menu-button-next {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0.1rem solid #ddd;
  border-radius: var(--radius-xs);
  background-color: #fff;
  margin: 0 0.8rem;
  flex-shrink: 0;
}

/* 10-4. タブパネル
   -------------------------------------------------------------------------- */
.hd-asw-tab .asw-tab__item-container {
  max-width: 120rem;
  margin: 0 1.5rem;
  padding: 1.2rem 0 2.4rem;
}

.hd-asw-tab .asw-tab__item-box {
  display: none;
}

.hd-asw-tab .asw-tab__item-box[aria-hidden="false"] {
  display: block;
}

/* 10-5. タブコンテンツスタイル
   -------------------------------------------------------------------------- */

/* お知らせタブ内のリンク */
.hd-asw-tab__item-box--notice .asw-list-button__list a {
  color: #000;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.6rem;
  border-bottom: 0.1rem solid #f0f0f0;
  font-size: 1.4rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.hd-asw-tab__item-box--notice .asw-list-button__list a:hover {
  background-color: #f9f9f9;
}

.hd-asw-tab__item-box--notice .asw-list-button__list a::after {
  content: "";
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 0.2rem solid #000;
  border-right: 0.2rem solid #000;
  transform: rotate(45deg);
  margin-left: 1.2rem;
}

/* その他タブ内のリンク */
.hd-asw-tab__item-box--other a {
  color: #005AAA;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0.8rem 0;
  transition: color 0.2s ease;
}

.hd-asw-tab__item-box--other a:hover {
  color: #00146E;
  text-decoration: underline;
}

.hd-asw-tab__item-box--other a::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 0.2rem solid #005AAA;
  border-right: 0.2rem solid #005AAA;
  transform: rotate(45deg);
  margin-left: 0.8rem;
}

.hd-asw-tab__item-box--other a:hover::after {
  border-top-color: #00146E;
  border-right-color: #00146E;
}

/* タブコンテンツタイトル */
.hd-asw-tab-content__title {
  background-color: #e8e8e8;
  color: #333;
  padding: 1.6rem;
  margin: 2rem 0 1.6rem 0;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 600;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   11. レイアウトシステム
   ========================================================================== */

/* 11-1. Background Containers
   -------------------------------------------------------------------------- */
.hd-background {
  background-image: url('/common-layout2/images/amc_top/bg-sp.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding: var(--spacing-lg) var(--spacing-md);
}

.hd-background--white {
  background: var(--color-white);
  padding: var(--spacing-lg) var(--spacing-md);
}

/* 11-2. Main Layout Wrapper
   -------------------------------------------------------------------------- */
.hd-milage__wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 var(--spacing-md);
  box-sizing: border-box;
}

.hd-layout {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
  max-width: 100%;
  box-sizing: border-box;
}

.hd-layout .asw-modal__window .asw-headline--head3{
  margin-top: 0;
}

.hd-layout__column {
  display: flex;
  flex-direction: column;
}

.hd-layout > *,
.hd-layout__column > * {
  width: 100%;
}

.hd-layout__mileageTitle {
  display: inline-block;
  font-weight: 600;
  background: var(--color-primary);
  color: var(--color-white);
  margin: 0;
  width: auto;
  align-self: flex-start;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 11-3. User Profile Section
   -------------------------------------------------------------------------- */
.hd-layout__userProfile {
  display: grid;
}

.hd-layout__statusIcon {
  grid-area: statusIcon;
}

.hd-layout__userName {
  grid-area: userName;
  font-weight: 600;
}

.hd-layout__userId {
  grid-area: userId;
}

/* 11-4. ANA Point Card
   -------------------------------------------------------------------------- */
.hd-layout__anaPoint {
  display: flex;
  border: 0.3rem solid var(--color-secondary);
  background-color: var(--color-background);
  padding: var(--spacing-lg);
  box-sizing: border-box;
  max-width: 100%;
}

.hd-layout__anaPointDataList {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
}

.hd-layout__anaPointTitle {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.hd-layout__anaPointNumber {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
}

.hd-layout__anaPointNumber span {
  font-weight: 700;
}

.hd-layout__anaPointButtonList {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  box-sizing: border-box;
  max-width: 100%;
}

/* 11-5. Common Point Card Styles
   -------------------------------------------------------------------------- */
/* Base Point Card Container */
.hd-layout__premiumPoint,
.hd-layout__upgradePoint,
.hd-layout__skycoinPoint {
  display: flex;
  border: 0.3rem solid var(--color-gray-border);
  background-color: var(--color-white);
  padding: var(--spacing-lg);
  box-sizing: border-box;
  max-width: 100%;
}

/* Point Card Modifiers */
.hd-layout__premiumPoint {
  background-color: var(--color-gray-background);
}

.hd-layout__upgradePoint {
}

.hd-layout__skycoinPoint {
}

/* Common DataList Styles */
.hd-layout__premiumPointDataList,
.hd-layout__upgradePointDataList,
.hd-layout__skycoinPointDataList {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.1rem;
  row-gap: 1rem;
  align-items: baseline;
  border-bottom: 0.1rem solid var(--color-border-dark);
  padding-bottom: 0.3rem;
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
}

.hd-layout__premiumPointDataList dt,
.hd-layout__upgradePointDataList dt,
.hd-layout__skycoinPointDataList dt {
  text-align: left;
}

.hd-layout__premiumPointDataList dd,
.hd-layout__upgradePointDataList dd,
.hd-layout__skycoinPointDataList dd {
  text-align: right;
}

.hd-layout__premiumPointDataList > *:nth-child(2):not(:last-child)::after,
.hd-layout__upgradePointDataList > *:nth-child(2):not(:last-child)::after,
.hd-layout__skycoinPointDataList > *:nth-child(2):not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% + 0.5rem);
  border-bottom: 0.1rem solid var(--color-gray-border);
}

.hd-layout__premiumPointDataList > *:nth-child(3),
.hd-layout__upgradePointDataList > *:nth-child(3),
.hd-layout__skycoinPointDataList > *:nth-child(3) {
  padding-top: var(--spacing-md);
}

/* Common Title Styles */
.hd-layout__premiumPointTitle,
.hd-layout__upgradePointTitle,
.hd-layout__skycoinPointTitle {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.hd-layout__premiumPointTitle--small {
  font-size: var(--font-size-xs);
}

/* Common Number Styles */
.hd-layout__premiumPointNumber,
.hd-layout__upgradePointNumber,
.hd-layout__skycoinPointNumber {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
}

.hd-layout__premiumPointNumber span,
.hd-layout__upgradePointNumber span,
.hd-layout__skycoinPointNumber span {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.hd-layout__premiumPointNumber--small span {
  font-size: var(--font-size-sm);
}

/* Common ButtonList Styles */
.hd-layout__premiumPointButtonList,
.hd-layout__upgradePointButtonList,
.hd-layout__skycoinPointButtonList {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  box-sizing: border-box;
  max-width: 100%;
}

/* 11-6. Text Link List
   -------------------------------------------------------------------------- */
.hd-layout__linklist {
  display: inline-block;
  background-color: var(--color-white);
}

.hd-layout__linklist ul {
  display: block;
}

.hd-layout__linklist ul li {
  display: inline-block;
  margin-right: var(--spacing-md);
}

.hd-layout__linklist ul li:last-child {
  margin-right: 0;
}

/* 11-7. Icon Link List
   -------------------------------------------------------------------------- */
/* order設定はレスポンシブで個別指定 */

.hd-layout__iconLinks ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.hd-layout__iconLinks ul li {
  display: block;
}

.hd-layout__iconLinks ul li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-white);
  border: 0.3rem solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: none;
  height: 100%;
  min-height: 5rem;
}

.hd-layout__iconLinks ul li a:hover span {
  text-decoration: underline;
}

.hd-layout__iconLinks ul li a img {
  flex-shrink: 0;
  width: var(--spacing-lg);
  height: auto;
}

.hd-layout__iconLinks ul li a span {
  text-align: center;
  flex: 1;
}

/* 11-8. Tab Container
   -------------------------------------------------------------------------- */
/* タブコンテナの並び順（レスポンシブで個別指定） */

/* ==========================================================================
   12. UIコンポーネント
   ========================================================================== */

/* 12-1. Link Button
   -------------------------------------------------------------------------- */
.hd-linkButton {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 400;
  display: inline-block;
  padding: var(--spacing-sm) 0;
}

.hd-linkButton span {
  text-decoration: underline;
  display: inline-block;
  position: relative;
  padding-right: var(--spacing-md);
}
a.hd-linkButton:focus {
  outline-offset: 1px;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #333;
}

.hd-linkButton:hover span {
  text-decoration: none;
}

.hd-linkButton span::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border-top: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  transform: translateY(-50%) rotate(45deg);
}

/* 13-2. Info Icon
   -------------------------------------------------------------------------- */
.hd-icon--info {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  text-align: center;
  line-height: 1.6rem;
  font-size: 1rem;
  margin-left: 0.5rem;
}

a.hd-icon--info:focus {
  outline-offset: 1px;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #333;
}

/* 13-3. Mileage Buttons
   -------------------------------------------------------------------------- */
/* Common Button Base */
.hd-mileageButton,
.hd-mileageButton--small {
  background: var(--color-white);
  border: 0.1rem solid var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--border-radius-button);
  font-weight: 600;
  display: grid;
  width: 100%;
  position: relative;
  justify-content: center;
  text-align: center;
}

.hd-mileageButton:hover span,
.hd-mileageButton--small:hover span {
  text-decoration: underline;
}

/* Large Button */
.hd-mileageButton {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-md);
}

.hd-mileageButton span {
  padding: 0 2.7rem;
}

.hd-mileageButton span::after {
  content: "";
  position: absolute;
  right: var(--spacing-lg);
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-sm);
  height: var(--spacing-sm);
  border-top: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  transform: translateY(-50%) rotate(45deg);
}

/* Small Button */
.hd-mileageButton--small span {
  padding: 0;
}

/* 12-4. Tab Navigation
   -------------------------------------------------------------------------- */
.hd-layout__tabNav {
  margin-top: var(--spacing-xl);
}

.hd-layout__tabNav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.hd-layout__tabNav ul li {
  flex: 1;
  min-width: calc(50% - 0.4rem);
}

.hd-layout__tabNav ul li a {
  display: block;
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-white);
  border: 0.2rem solid var(--color-gray-border);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hd-layout__tabNav ul li a:hover {
  border-color: var(--color-primary);
  background-color: rgba(0, 20, 110, 0.05);
}

.hd-layout__tabNav ul li a.is-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* 12-5. Tab Accessibility
   -------------------------------------------------------------------------- */
[role="tab"] {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

[role="tab"]:focus {
  outline-offset: -1px;
  outline-style: solid;
  outline-width: 1px;
}

/* Tab Content Container */
.hd-layout__tabContent {
  margin-top: var(--spacing-lg);
  background: var(--color-white);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
}

/* Tab Panel Display Control */
.hd-layout__tabPanel {
  display: none;
  animation: fadeIn 0.3s ease-in;
}

.hd-layout__tabPanel.is-active {
  display: block;
}

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Content Section Styles */
.tab-content-section {
  padding: var(--spacing-md) 0;
}

.tab-content-section h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 var(--spacing-md) 0;
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-secondary);
}

.tab-content-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-content-section ul li {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-gray-border);
}

.tab-content-section ul li:last-child {
  border-bottom: none;
}

.tab-content-section ul li a {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  position: relative;
}

.tab-content-section ul li a:hover {
  text-decoration: underline;
  color: var(--color-primary);
}

/* Tab Button Focus State */
[role="tab"] {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

[role="tab"]:focus {
  outline-offset: -1px;
  outline-style: solid;
  outline-width: 1px;
}

/* ==========================================================================
   13. レスポンシブレイアウト（レイアウトシステム用）
   ========================================================================== */

/* 13-1. モバイル (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .hd-layout__tabContent {
    padding: var(--spacing-md);
  }

  .tab-content-section {
    padding: var(--spacing-sm) 0;
  }

  .tab-content-section h3 {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
  }

  /* Layout Structure */
  .hd-layout {
    gap: var(--spacing-md) 0.6rem;
    padding: var(--spacing-md);
  }

  .hd-layout__column {
    display: contents;
  }

  /* Order Configuration */
  .hd-layout__userProfile {
  }

  .hd-layout__anaPoint {
  }

  .hd-layout__premiumPoint {
  }

  .hd-layout__upgradePoint {
  }

  .hd-layout__skycoinPoint {
  }

  .hd-layout__linklist {
  }

  .hd-layout__iconLinks {
    margin-top: 3.2rem;
  }

  #js-custom-tab-container {
  }

  /* Mileage Title */
  .hd-layout__mileageTitle {
    font-size: var(--font-size-sm);
    padding: 0.6rem var(--spacing-md);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  /* User Profile */
  .hd-layout__userProfile {
    grid-template-areas:
      "statusIcon userName"
      "statusIcon userId";
    grid-template-columns: minmax(4rem, 6rem) 1fr;
    gap: 0 var(--spacing-md);
  }

  .hd-layout__userName {
    font-size: var(--font-size-xs);
    margin: 0;
  }

  .hd-layout__userName span {
    font-size: var(--font-size-md);
  }

  .hd-layout__userId {
    font-size: 1rem;
    margin: 0;
  }

  .hd-layout__userId span {
    font-size: 1.1rem;
  }

  /* ANA Point Card */
  .hd-layout__anaPoint {
    flex-direction: column;
    gap: var(--spacing-md);
    border-radius: var(--radius-md);
  }

  .hd-layout__anaPointNumber span {
    font-size: var(--spacing-lg);
  }

  /* Premium Point Card */
  .hd-layout__premiumPoint {
    flex-direction: column;
    gap: var(--spacing-md);
    border-radius: var(--radius-md);
  }

  .hd-layout__premiumPointNumber {
    font-size: 1rem;
  }

  .hd-layout__premiumPointNumber span {
    font-size: var(--font-size-lg);
  }

  .hd-layout__premiumPointButtonList li,
  .hd-layout__upgradePointButtonList li,
  .hd-layout__skycoinPointButtonList li {
    display: flex;
    justify-content: center;
  }

  /* Upgrade Point Card */
  .hd-layout__upgradePoint {
    flex-direction: column;
    gap: var(--spacing-md);
    border-radius: var(--radius-md);
  }

  .hd-layout__upgradePointNumber {
    font-size: 1rem;
  }

  .hd-layout__upgradePointNumber span {
    font-size: var(--font-size-lg);
  }

  /* SKY Coin Point Card */
  .hd-layout__skycoinPoint {
    flex-direction: column;
    gap: var(--spacing-md);
    border-radius: var(--radius-md);
  }

  .hd-layout__skycoinPointNumber {
    font-size: 1rem;
  }

  .hd-layout__skycoinPointNumber span {
    font-size: var(--font-size-lg);
  }

  /* Button Sizing */
  .hd-mileageButton--small {
    font-size: 1.1rem;
    padding: var(--spacing-xs) var(--spacing-lg);
    width: auto;
    display: inline-grid;
  }

  /* Tab Navigation */
  .hd-layout__tabNav ul li {
    min-width: calc(50% - 0.4rem);
  }

  .hd-layout__tabNav ul li a {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* タブレット用スタイル */
  .hd-layout__premiumPointButtonList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
  }
}

/* 13-2. PC Layout (Desktop - Min 1025px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1025px) {
  /* Background & Layout Structure */
  .hd-background {
    background-image: url('/common-layout2/images/amc_top/bg-pc.png');
    padding: 4.2rem 0;
  }

  .hd-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl) var(--spacing-lg);
    box-sizing: border-box;
  }

  /* Column Configuration */
  .hd-layout__column {
    flex: 1;
    gap: var(--spacing-lg);
  }

  .hd-layout__column--right {
    max-width: 57.2rem;
    flex: 0 1 auto;
    gap: var(--spacing-md);
  }

  /* Mileage Title */
  .hd-layout__mileageTitle {
    font-size: var(--font-size-xl);
    padding: 0.6rem clamp(1.6rem, 4vw, 4.8rem);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  /* User Profile */
  .hd-layout__userProfile {
    grid-template-areas:
      "statusIcon userName userId";
    grid-template-columns: minmax(6rem, 8rem) 1fr minmax(12rem, 16rem);
    gap: 0 var(--spacing-md);
    align-items: center;
  }

  .hd-layout__userName {
    font-size: var(--font-size-md);
  }

  .hd-layout__userName span {
    font-size: var(--font-size-lg);
  }

  .hd-layout__userId {
    font-size: var(--font-size-xs);
  }

  .hd-layout__userId span {
    font-size: var(--font-size-sm);
  }

  /* ANA Point Card */
  .hd-layout__anaPoint {
    flex-direction: row;
    align-items: center;
    gap: 0 4.3rem;
    border-radius: var(--radius-lg);
  }

  .hd-layout__anaPointDataList {
    flex: 1 1 auto;
    min-width: 13rem;
  }

  .hd-layout__anaPointNumber span {
    font-size: var(--spacing-xl);
  }

  /* Premium/Upgrade/SKYcoin Point Cards */
  .hd-layout__premiumPoint,
  .hd-layout__upgradePoint,
  .hd-layout__skycoinPoint {
    flex-direction: row;
    align-items: center;
    gap: 0 var(--spacing-md);
    border-radius: var(--radius-lg);
  }

  .hd-layout__premiumPointButtonList,
  .hd-layout__upgradePointButtonList,
  .hd-layout__skycoinPointButtonList {
    max-width: 22rem;
    flex: 0 1 22rem;
  }

  .hd-layout__premiumPointDataList,
  .hd-layout__upgradePointDataList,
  .hd-layout__skycoinPointDataList {
    max-width: 28.8rem;
    flex: 1 1 28.8rem;
    min-width: 0;
  }

  .hd-layout__premiumPointNumber,
  .hd-layout__upgradePointNumber,
  .hd-layout__skycoinPointNumber {
    font-size: 1rem;
  }

  .hd-layout__premiumPointNumber span,
  .hd-layout__upgradePointNumber span,
  .hd-layout__skycoinPointNumber span {
    font-size: var(--font-size-lg);
  }

  /* Button Sizing */
  .hd-mileageButton--small {
    font-size: var(--font-size-sm);
    padding: 0.6rem 0.5rem;
  }

  /* Icon Links */
  .hd-layout__iconLinks ul {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xxl);
  }

  .hd-layout__iconLinks ul li a {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    font-size: var(--font-size-md);
  }

  .hd-layout__iconLinks ul li a img {
    max-width: 5rem;
    width: 100%;
    height: auto;
  }

  .hd-layout__iconLinks ul li:last-child a img {
    margin-right: -1.5rem;
  }

  .hd-layout__iconLinks ul li a span {
    text-align: center;
  }

  #js-custom-tab-container {
  }

  .hd-layout__iconLinks {
    margin-top: 3rem;
  }

  /* Tab Navigation */
  .hd-layout__tabNav ul {
    flex-wrap: nowrap;
  }

  .hd-layout__tabNav ul li {
    flex: 0 1 auto;
    min-width: auto;
  }

  .hd-layout__tabNav ul li a {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-lg);
    white-space: nowrap;
  }
}

/* ==========================================================================
   14. カスタムタブUI - アクセシビリティ対応版
   ========================================================================== */

/* 14-1. タブコンテナ
   -------------------------------------------------------------------------- */
.custom-tab {
  padding: var(--spacing-lg) var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 0.2rem var(--spacing-sm) rgba(0, 0, 0, 0.1);
}

/* 14-2. タブメニュー
   -------------------------------------------------------------------------- */
.custom-tab__menu {
  display: flex;
  justify-content: flex-start;
  gap: var(--spacing-xs);
  padding: 0;
  list-style: none;
}

.custom-tab__menu-item {
  margin: 0;
  padding: 0;
}

/* 14-3. タブボタン
   -------------------------------------------------------------------------- */
.custom-tab__menu-button {
  padding: var(--spacing-xs) var(--spacing-lg);
  border-radius: 0.8rem;
  background: #f5f5f5;
  color: var(--color-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: normal;
  font-family: inherit;
  font-weight: 600;
  height: 100%;
}

.custom-tab__menu-button:hover {
  background: #e8e8e8;
  border-bottom-color: #00146E;
}

/* 14-4. フォーカス表示
   -------------------------------------------------------------------------- */
.custom-tab__menu-button:focus {
  outline-offset: 1px;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #333;
}

/* 14-5. アクティブ状態
   -------------------------------------------------------------------------- */
.custom-tab__menu-item--active .custom-tab__menu-button {
  background: #0066cc;
  color: var(--color-white);
  border-color: #0066cc;
  font-weight: bold;
}

.custom-tab__menu-item--active .custom-tab__menu-button:hover {
  background: #0052a3;
  border-color: #0052a3;
}

/* 14-6. タブコンテンツ
   -------------------------------------------------------------------------- */
.custom-tab__content {
  display: none;
  /* padding: 2rem 0 0 0; */
  border-top: 0.1rem solid var(--color-border-dark);
}

.custom-tab__content:focus {
  outline: none;
}

.custom-tab__content--active {
  display: block;
}

/* 14-6-1. お知らせタブスタイル
   -------------------------------------------------------------------------- */
.custom-tab__content .asw-list-button__list {
  margin: 0;
  padding: 0;
}

.custom-tab__content .asw-list-button__item {
  list-style: none;
}

.custom-tab__content .asw-list-button__link {
  display: block;
  padding: var(--spacing-md) 0;
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 0.2s ease;
}

.custom-tab__content #js-my-menu-info-custom-tab .asw-list-button__link{
  padding-right: 1rem;
}

.custom-tab__content .asw-list-button__item:last-child .asw-list-button__link {
  border-bottom: none;
}

.custom-tab__content .asw-list-button__link:hover {
  background-color: #f5f5f5;
}

.custom-tab__content .asw-list-button__link span {
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
}

/* 15-6-2. お知らせ以外のタブスタイル（会員情報、ご家族、Edy、その他）
   -------------------------------------------------------------------------- */

/* h3タイトルのスタイル */
.custom-tab__content:not(#tab-notice) h3 {
  font-size: 1.6rem;
  text-align: center;
  margin: 2rem 0 1.6rem;
  font-weight: 600;
  background-color: #F1F1F1;
}
.custom-tab__content .asw-headline--head3{
  margin: 0;
}

/* サムネイルボタンアイテムのボーダースタイル（カスタムタブ内のみ） */
.custom-tab__content .asw-thumbnail-button__item {
  /* border-bottom: 1px solid #949499;
  border-top: none;
  border-left: none;
  border-right: none;
  margin-bottom: 0;
  border-radius: 0; */
}

/* サムネイルボタンリンクに右矢印を追加（カスタムタブ内のみ） */
.custom-tab__content .asw-thumbnail-button__link .asw-thumbnail-button__text {
  font-size: 1.4rem;
  color: #00146E;
}

.custom-tab__content .asw-thumbnail-button__link:hover {
  text-decoration: underline;
}

.custom-tab__content .asw-thumbnail-button--text .asw-thumbnail-button__item:not([target="_blank"]),
.custom-tab__content .asw-thumbnail-button--text .asw-thumbnail-button__link:not([target="_blank"]){
  position: relative;
}

/* 右矢印（target="_blank"以外のリンクのみ） */
.custom-tab__content .asw-thumbnail-button__link:not([target="_blank"])::after {
  content: "";
  position: absolute;
  right: 1.8rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border-top: 0.2rem solid #00146E;
  border-right: 0.2rem solid #00146E;
  transform: translateY(-50%) rotate(45deg);
}

.custom-tab__content .asw-thumbnail-button__link:not([target="_blank"]):hover::after {
  opacity: 0.8;
}

/* 15-7. レスポンシブ対応
   -------------------------------------------------------------------------- */

/* PC */
@media (min-width: 1025px) {
  .custom-tab{
    padding: clamp(2rem, 3vw, 3.2rem) clamp(2rem, 4vw, 4.8rem);
  }
  .custom-tab__menu {
    gap: 3.2rem;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 0 3.2rem;
    margin-bottom: 0;
  }

  .custom-tab__menu-button {
    padding: 0.8rem 0;
    border: none;
    border-bottom: 0.3rem solid transparent;
    border-radius: 0;
    background: transparent;
    color: #333333;
    font-size: 1.6rem;
    font-weight: 600;
  }

  .custom-tab__menu-button:hover {
    background: transparent;
  }

  .custom-tab__menu-item--active .custom-tab__menu-button {
    background: transparent;
    color: #00146E;
    border-bottom-color: #00146E;
    font-weight: bold;
  }

  .custom-tab__menu-item--active .custom-tab__menu-button:hover {
    background: transparent;
    border-bottom-color: #00146E;
  }

  .custom-tab__content .asw-list-button__list {
    padding: 0 3.2rem;
  }

  .custom-tab__content .asw-text-link.asw-text-link--horizontal {
    justify-content: center;
  }
}

/* SP */
@media (max-width: 1024px) {
  .custom-tab {
    padding: 1.5rem;
  }

  .custom-tab__menu {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .custom-tab__menu-item {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }

  .custom-tab__menu-button {
    padding: 0.9rem;
    font-size: 1.1rem;
    text-align: center;
    background: #fff;
    border-radius: var(--radius-pill);
    width: 100%;
    border: 0.1rem #00146E solid;
  }

  .custom-tab__menu-item--active .custom-tab__menu-button {
    background: #00146E;
    border-color: #00146E;
  }

  .custom-tab__menu-item--active .custom-tab__menu-button:hover {
    background: #00146E;
    border-color: #00146E;
  }
}

/* 15-8. アクセシビリティ対応
   -------------------------------------------------------------------------- */
/* ハイコントラストモード */
@media (prefers-contrast: high) {
  .custom-tab__menu-button {
    border-width: 0.3rem;
  }

  .custom-tab__menu-button:focus {
    outline-width: 2px;
  }
}

/* 緊急用ログイン後ヒーロー */
.hd-emergency-hero {
  background-color: #fff;
}
.hd-emergency-hero .asw-hero-carousel__overlay{
  background: #fff;
  overflow: visible;
}
.hd-emergency-hero .asw-hero-carousel__title-container {
  overflow: visible;
  height: auto;
  min-height: 100%;
}
.hd-emergency-hero .asw-hero-carousel__title{
  color: #00146E;
  font-family: serif;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: visible;
  white-space: normal;
}
.hd-emergency-hero .asw-hero-carousel__text{
  color: #00146E;
  padding-top: 2.4rem;
  position: relative;
  font-family: serif;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: visible;
  text-overflow: clip;
}
.hd-emergency-hero .asw-hero-carousel__text::before{
  content: "";
  position: absolute;
  display: block;
  background: #00146E;
  top: 0;
  left: 50%;
  width: 9rem;
  height: 0.2rem;
  transform: translateX(-50%);
}
/* PC */
@media screen and (min-width: 1025px) {
  .hd-emergency-hero .asw-hero-carousel__overlay{
    padding: 3.2rem 1.5rem;
    box-sizing: border-box;
    max-width: 100%;
  }
  .hd-emergency-hero .asw-hero-carousel__title{
    font-size: clamp(2.4rem, 2.5vw, 3.2rem);
    overflow: visible;
  }
  .hd-emergency-hero .asw-hero-carousel__text{
    font-size: clamp(1.6rem, 1.5vw, 2rem);
    max-width: 100%;
  }
}
/* SP */
@media screen and (max-width: 1024px) {
  .hd-emergency-hero .asw-hero-carousel__title{
    font-size: clamp(2rem, 5vw, 2.8rem);
    overflow: visible;
  }
  .hd-emergency-hero .asw-hero-carousel__text{
    font-size: clamp(1.2rem, 3.5vw, 1.6rem);
    overflow: visible;
    text-overflow: clip;
  }
  :lang(en) .hd-emergency-hero .asw-hero-carousel__item::before{
    padding-bottom: 150%;
  }

  /* 緊急ヒーロー: 英語でもアスペクト比を無効化（極大フォント時） */
  :lang(en) .hd-emergency-hero .asw-hero-carousel__item::before {
    padding-bottom: 0;
    display: none;
  }
}

/* 緊急ヒーロー: 固定高さを解除してコンテンツに合わせる */
.hd-emergency-hero.js-asw-hero-carousel--top .asw-hero-carousel__item {
  height: auto;
  min-height: 36rem;
}

/* 緊急ヒーロー: アスペクト比を無効化（コンテンツ量に応じて高さを調整） */
.hd-emergency-hero .asw-hero-carousel__item::before {
  padding-bottom: 0;
  display: none;
}

/* ==========================================================================
   アクセシビリティ：フォーカススタイル
   ========================================================================== */

/* 全般的なリンクのフォーカススタイル */
a:focus,
button:focus {
  outline-offset: -1px;
  outline-style: solid;
  outline-width: 1px;
}

/* Firefox用 */
@-moz-document url-prefix() {
  a:focus,
  button:focus {
    outline-style: auto;
  }
}

/* マイルボタンのフォーカススタイル */
a.hd-mileageButton:focus,
a.hd-mileageButton--small:focus {
  outline-offset: 1px;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #333;
  z-index: 1;
}

/* リストボタンのフォーカススタイル */
.asw-list-button__link:focus {
  outline-offset: 1px;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #333;
}

/* アイコンリンクのフォーカススタイル */
.hd-layout__iconLinks a:focus {
  outline-offset: 1px;
  outline-style: solid;
  outline-width: 2px;
  outline-color: #333;
}

/* ==========================================================================
   グレースケール装飾（filterなしで各パーツに個別指定）
   ========================================================================== */

/* CSS変数定義 */
body.amc-control-grayscale {
  --grayscale-text-dark: #333;
  --grayscale-text-medium: #555;
  --grayscale-border: #555;
  --grayscale-border-light: #666;
  --grayscale-hover: #444;
  --grayscale-bg-light: #E5E5E5;
  --grayscale-bg-lighter: #F1F1F1;
  --grayscale-outline: #666;
}

/* 背景画像 */
body.amc-control-grayscale .hd-background {
  background-image: url('/common-layout2/control/image/main_bg.jpg');
}

/* 緊急ヒーロー */
body.amc-control-grayscale .hd-emergency-hero .asw-hero-carousel__title,
body.amc-control-grayscale .hd-emergency-hero .asw-hero-carousel__text {
  color: var(--grayscale-text-dark);
}

body.amc-control-grayscale .hd-emergency-hero .asw-hero-carousel__text::before {
  background: var(--grayscale-text-dark);
}

/* カスタムタブ */
body.amc-control-grayscale .custom-tab__menu-button {
  color: var(--grayscale-text-dark);
}

body.amc-control-grayscale .custom-tab__menu-item--active .custom-tab__menu-button {
  border-color: var(--grayscale-border);
}

body.amc-control-grayscale .custom-tab__menu-button:focus {
  outline-offset: 1px;
  outline-style: solid;
  outline-width: 2px;
  outline-color: var(--grayscale-outline);
}

body.amc-control-grayscale .custom-tab__content .asw-thumbnail-button__link .asw-thumbnail-button__text,
body.amc-control-grayscale .custom-tab__content .asw-list-button__link span {
  color: var(--grayscale-text-dark);
}

@media (max-width: 1024px) {
  body.amc-control-grayscale .custom-tab__menu-button {
    background: #fff;
    border-color: var(--grayscale-border);
    color: var(--grayscale-text-medium);
  }

  body.amc-control-grayscale .custom-tab__menu-item--active .custom-tab__menu-button {
    background: var(--grayscale-border);
    color: #fff;
    border-color: var(--grayscale-border);
  }

  body.amc-control-grayscale .custom-tab__menu-item--active .custom-tab__menu-button:hover {
    background: var(--grayscale-hover);
    border-color: var(--grayscale-hover);
  }
}

@media (min-width: 1025px) {
  body.amc-control-grayscale .custom-tab__menu-button:hover {
    background: transparent;
    border-bottom-color: var(--grayscale-border);
  }
}

/* ポイントカード */
body.amc-control-grayscale .hd-layout__anaPoint {
  border-color: var(--grayscale-border-light);
  background-color: var(--grayscale-bg-light);
}

body.amc-control-grayscale .hd-layout__premiumPoint {
  border-color: var(--grayscale-bg-light);
  background-color: var(--grayscale-bg-lighter);
}

body.amc-control-grayscale .hd-layout__anaPointNumber,
body.amc-control-grayscale .hd-layout__premiumPointNumber,
body.amc-control-grayscale .hd-layout__upgradePointNumber,
body.amc-control-grayscale .hd-layout__skycoinPointNumber {
  color: var(--grayscale-text-dark);
}

/* リンクリスト */
body.amc-control-grayscale .hd-layout__linklist {
  background-color: #fff;
}

/* マイレージタイトル・アイコン */
body.amc-control-grayscale .hd-layout__mileageTitle,
body.amc-control-grayscale .hd-icon--info {
  background: var(--grayscale-text-medium);
  color: #fff;
}

/* ボタン類（白背景・グレーボーダー） */
body.amc-control-grayscale .hd-mileageButton,
body.amc-control-grayscale .hd-mileageButton--small,
body.amc-control-grayscale .hd-layout__iconLinks ul li a {
  background: #fff;
  border-color: var(--grayscale-border);
  color: var(--grayscale-text-medium);
}

body.amc-control-grayscale .hd-mileageButton span::after {
  border-top-color: var(--grayscale-border);
  border-right-color: var(--grayscale-border);
}

/* リンクボタン */
body.amc-control-grayscale .hd-linkButton {
  color: var(--grayscale-text-medium);
}

body.amc-control-grayscale .hd-linkButton span::after {
  border-top-color: var(--grayscale-text-medium);
  border-right-color: var(--grayscale-text-medium);
}