/* #NOTE 148 .ahr-ad (旧仕様) 廃止予定 */
.ahr-ad {
  position: absolute;
}
.ahr-ad img {
  margin: 12px;
  border: 1px #d8e0e7 solid;
  height: 336px;
}
.ahr-ad iframe {
  margin: 12px;
  border: 1px #d8e0e7 solid;
  height: 336px;
}

/**
 * #NOTE 150 [ad2 システム] コンテンツ挿入コンテナ
 *  - .ahr-ad2
 *    - .show-doc.a ( ～ .show-doc.b)
 */
.ahr-ad2 {
  position: absolute;
}
.ahr-ad2 .show-doc {
  height: 338px; /* ※サイズを指定しないと内容が読み込まれるまでの間にボックスのサイズが不定になってレイアウトが崩れる ※imgのmaxより枠線分を2pxプラスする */
}
.ahr-ad2 .show-doc img,
.ahr-ad2 .show-doc iframe {
  display: block; /* ※imgタグ特有の余白を除去（インライン要素の空白回避） */
  border: 1px #d8e0e7 solid;
  max-height: 336px;  /* ※画像サイズをボックス内に収まるように制限 */
}

/**
 * #NOTE 150 [ad2 システム] イメージスイッチング
 *  - .ahr-ad2
 *    - .show-switch.a  (～ .show-switch.b)
 *    - .show-images
 *      - .show-image.a  ( ～ .show-image.b)
 *        - .show-image-label
 *        - .show-doc.a ( ～ .show-doc.b) ※コンテンツ挿入
 *    - .show-buttons
 *      - .show-switch-button.a  ( ～ .show-switch-button.b)
 *  - [keyframes] ani-glow-pop
 */
.ahr-ad2 .show-switch {
  display: none;
}
.ahr-ad2 .show-images .show-image {
  display: none;
  position: relative; /* ※ラベル（.show-image-label）で position: absolute を使用するため指定する */
}
.ahr-ad2 .show-images .show-image .show-doc {
  width: 450px; /* ※サイズを指定しないと内容が読み込まれるまでの間にボックスのサイズが不定になってレイアウトが崩れる ※imgのmaxより枠線分を2pxプラスする */
}
.ahr-ad2 .show-images .show-image .show-doc img,
.ahr-ad2 .show-images .show-image .show-doc iframe {
  max-width: 448px; /* ※画像サイズをボックス内に収まるように制限 */
}
.ahr-ad2 .show-switch.a:checked ~ .show-images .show-image.a,
.ahr-ad2 .show-switch.b:checked ~ .show-images .show-image.b {
  display: block;
}
.ahr-ad2 .show-images .show-image .show-image-label {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 80px;
  clip-path: polygon(
    0% 0%, /* 左上 */
    100% 0%, /* 右上 */
    90% 100%, /* 右下（少し内側に折りたたむ） */
    0% 100% /* 左下 */
  );
  background: rgba(243, 156, 18, 0.9);
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  pointer-events: none; /* ※ラベルはクリック対象外 */
}

.ahr-ad2 .show-buttons .show-switch-button {
  display: inline-block;
  margin: 0; /* ※親要素の gap で間隔設定するのでマージンは無効化（.layout* クラスで配置するため） */
  padding: 5px 10px;
  background-color: #ECECEC;
  color: #333333;
  cursor: pointer;
  font-size: 16px;
  font-weight: normal;
  text-align: center;
  border-radius: 4px;
  border: 2px solid transparent;
  box-shadow: 0 0 4px rgba(255, 255, 200, 0.15);
  transform: scale(0.9);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease; /* ポインタが外れたときに元の状態に戻るトランジション */
}
.ahr-ad2 .show-buttons .show-switch-button:hover {
  background-color: #E0E0E0;
  box-shadow: 0 0 10px rgba(255, 255, 180, 0.45), 0 0 20px rgba(255, 255, 160, 0.25);
  transform: scale(1.05);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.1s ease; /* ポインタがホバーしたときに状態移行するトランジション */
}
.ahr-ad2 .show-switch.a:checked ~ .show-buttons .show-switch-button.a,
.ahr-ad2 .show-switch.b:checked ~ .show-buttons .show-switch-button.b {
  background-color: #F39C12;
  color: white;
  font-weight: bold;
  border-color: #D98200;
  box-shadow: 0 0 8px rgba(255, 235, 170, 0.35), 0 0 16px rgba(255, 220, 130, 0.25);
  transform: scale(1);
  animation: ani-glow-pop 1.5s ease; /* ボタンが有効になったときにエフェクト */
}

/**
 * #NOTE 150 [ad2 システム] 光が溢れるエフェクト
 */
@keyframes ani-glow-pop {
  0% {
    box-shadow: 0 0 0 rgba(255, 235, 170, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 235, 170, 0.6), 0 0 40px rgba(255, 220, 130, 0.4);
  }
  100% {
    box-shadow: 0 0 8px rgba(255, 235, 170, 0.35), 0 0 16px rgba(255, 220, 130, 0.25);
  }
}

/**
 * #NOTE 150 [ad2 システム] レイアウト１（サイドメニューつきイメージビュー）
 *  - .ahr-ad2
 *    - .layout1
 *      - .layout1-main
 *      - .layout1-nav
 */
.ahr-ad2 .layout1 {
  display: flex;
  flex-direction: row; /* 横並び */
  align-items: flex-start; /* 上揃え */
  margin: 12px; /* 外枠のマージン */
  gap: 20px; /* 要素の間隔 */
}
/* .ahr-ad2 .layout1 .layout1-main {} */
.ahr-ad2 .layout1 .layout1-nav {
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 10px; /* 要素の間隔 */
}