@charset  "utf-8";
/**
 * visual-enhancements.css
 * ビジュアルインパクト強化 - フェーズ1（即効性重視）
 *
 * 実装内容：
 * 1. カード3D効果（ホバー時の浮き上がり、影、画像ズーム）
 * 2. ボタンホバー効果（リップルエフェクト、持ち上がり）
 * 3. メインビジュアルグラデーション（アニメーション付きオーバーレイ）
 */
/*--------------------------------------------------
1. カード3D効果
--------------------------------------------------*/
/* stretched-linkが機能するように.card-bodyにposition: relativeを設定 */
.index-cards .card-body {
  position: relative;
}

/* カードの基本トランジション設定 - 控えめな動き */
.index-cards .row > div.streched {
  transition: box-shadow 0.3s ease;
}

/* カードのホバー時：シャドウで浮き上がり効果 + リップルアニメーション */
/* transformを削除してstretched-linkを維持 */
.index-cards .row > div.streched:hover {
  box-shadow: 0 12px 24px rgba(38, 135, 8, 0.2),
                0 6px 12px rgba(0, 0, 0, 0.12);
  animation: card-ripple 1.5s 1;
}

/* カードのリップルアニメーション（新着情報ボタンと同じ方式） */
/* 浮き上がり効果は常に表示し、リップルを追加 */
@keyframes  card-ripple  {
0%  {
  box-shadow: 0 12px 24px rgba(38, 135, 8, 0.2), 0 6px 12px rgba(0, 0, 0, 0.12), 0 0 0 0 #ccc;
}
70%  {
  box-shadow: 0 12px 24px rgba(38, 135, 8, 0.2), 0 6px 12px rgba(0, 0, 0, 0.12), 0 0 0 15px rgb(27 133 251 / 0%);
}
100%  {
  box-shadow: 0 12px 24px rgba(38, 135, 8, 0.2), 0 6px 12px rgba(0, 0, 0, 0.12), 0 0 0 0 rgb(27 133 251 / 0%);
}
}

/* カード内画像のオーバーフロー設定 */
.index-cards .card-img-top {
  overflow: hidden;
  border-radius: 0;
}

/* カード内画像のトランジション - 控えめ */
.index-cards .card-img-top img {
  transition: transform 0.4s ease-out;
}

/* トップページのみ：Pick Upセクションの画像サイズを統一 */
body.page-top .index-cards .card-img-top img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  display: block;
}

/* カード内画像のホバー時：控えめなズーム効果 */
/* 画像だけにtransformを適用するのは問題なし（stretched-linkに影響しない） */
.index-cards .row > div.streched:hover .card-img-top img {
  transform: scale(1.03);
}

/* カードのタイトルボタンのトランジション */
.index-cards .parts-arw-bdr-btn2 {
  transition: all 0.3s ease;
}

/* カードホバー時のタイトルボタン効果 - 削除（控えめに） */
/* .index-cards .row > div.streched:hover .parts-arw-bdr-btn2 {
    background-color: #34a312;
} */
/* モバイルではホバー効果を更に軽減 */
@media  only screen and (max-width:767px)  {
.index-cards .row > div.streched:hover  {
  box-shadow: 0 8px 16px rgba(38, 135, 8, 0.15);
}
.index-cards .row > div.streched:hover .card-img-top img  {
  transform: scale(1.02);
}
}

/*--------------------------------------------------
2. ボタンホバー効果
--------------------------------------------------*/
/* アイコンボタンの基本設定 */
.parts-icon-btn a {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}

/* アイコンボタンのシャインエフェクト用疑似要素 */
.parts-icon-btn a::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}

/* アイコンボタンホバー時：影と枠線変化（シャインエフェクトのみ） */
.parts-icon-btn a:hover {
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3)  !important;
  border: 2px solid rgba(0, 123, 255, 0.3)  !important;
}

/* ホバー時にシャインエフェクトを流す */
.parts-icon-btn a:hover::after {
  left: 150%;
}

/*--------------------------------------------------
3. メインビジュアルグラデーション（削除 - 色がおかしくなるため）
--------------------------------------------------*/
/* メインビジュアル効果は削除しました */
/* 色の変化を避けるため、グラデーションと光の粒子効果は適用しません */
/*--------------------------------------------------
パフォーマンス最適化
--------------------------------------------------*/
/* GPU加速を有効化 */
/* カード全体にはtransformを使わない（stretched-link保護のため） */
.index-cards .card-img-top img,
.parts-arw-bdr-btn,
.index-btn a,
.main_image::before,
.main_image::after {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* プリントメディアではアニメーション無効化 */
@media  print  {
.main_image::before,
    .main_image::after  {
  display: none;
}
.index-cards .row > div.streched:hover  {
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: none;
}
.index-cards .row > div.streched:hover .card-img-top img  {
  transform: none;
}
}

/* 動きを抑えたい設定のユーザーに配慮 */
@media  (prefers-reduced-motion: reduce)  {
.index-cards .row > div.streched,
    .parts-arw-bdr-btn2,
    .parts-arw-bdr-btn,
    .index-btn a  {
  transition: none;
}
.main_image::before,
    .main_image::after  {
  animation: none;
  opacity: 0.3;
}
.index-cards .card-img-top img  {
  transition: none;
}
}

@media  only screen and (max-width:767px)  {
body:not(.page-top) {
}
}

/*--------------------------------------------------
4. マイクロインタラクション（フェーズ2・3）
--------------------------------------------------*/
/* マイクロインタラクションは.enable-micro-interactionsクラスがある場合のみ適用 */
/* デフォルトでは通常表示、特定ページのみアニメーション */
/* 見出しのマイクロインタラクション */
.enable-micro-interactions .parts-title-06 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.enable-micro-interactions .parts-title-06.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* カードのマイクロインタラクション */
.enable-micro-interactions .index-cards .row > div.streched {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.enable-micro-interactions .index-cards .row > div.streched.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* トップページ：新着情報ボタンのマイクロインタラクション */
.enable-micro-interactions .index-btn {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.enable-micro-interactions .index-btn.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* トップページ：アイコンボタンのマイクロインタラクション */
.enable-micro-interactions .parts-icon-btn {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.enable-micro-interactions .parts-icon-btn.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* トップページ：バナーのマイクロインタラクション */
.enable-micro-interactions #BannerArea03 .parts-btn {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.enable-micro-interactions #BannerArea03 .parts-btn.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* トップページ：ニュース項目のマイクロインタラクション */
.enable-micro-interactions .newsList .parts-tab-title {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.enable-micro-interactions .newsList .parts-tab-title.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* サイドメニュー：ウィジェットボックス見出しのマイクロインタラクション */
.enable-micro-interactions .widget-box .ttl {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.enable-micro-interactions .widget-box .ttl.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* サイドメニュー：ウィジェットリスト項目のマイクロインタラクション */
.enable-micro-interactions .parts-widget-list01 li {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.enable-micro-interactions .parts-widget-list01 li.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* アニメーション無効化設定でも軽微なアニメーションは維持 */
@media  (prefers-reduced-motion: reduce)  {
.enable-micro-interactions .parts-title-06,
    .enable-micro-interactions .index-cards .row > div.streched,
    .enable-micro-interactions .index-btn,
    .enable-micro-interactions .parts-icon-btn,
    .enable-micro-interactions #BannerArea03 .parts-btn,
    .enable-micro-interactions .newsList .parts-tab-title,
    .enable-micro-interactions .widget-box .ttl,
    .enable-micro-interactions .parts-widget-list01 li  {
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
}