/*
Theme Name:EVERY Child
Theme URI://tcd-theme.com/tcd075
Description:WordPressテーマ「EVERY」の子テーマです。
Template:every_tcd075
Author:TCD
Author URI:http://tcd-theme.com/
Version:2.17.1
*/

/* -------------------------------------------------
   1️⃣ Google Fonts から Noto Sans JP をインポート
   ------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* -------------------------------------------------
   2️⃣ フォント適用（全ページ）
   ------------------------------------------------- */
body {
   font-family: "Noto Sans JP", "Helvetica", "Arial", sans-serif;
}

/* -------------------------------------------------
   3️⃣ トップページヘッダースライダー
   ------------------------------------------------- */
/* PC・タブレット・SP共通: margin-bottomを5pxに統一 */
#index_header_content {
   margin-bottom: 3px !important;
}

/* PC・タブレット・SP共通: 左右マージンを0に統一 */
#index_slider_wrap {
   margin-left: 0 !important;
   margin-right: 0 !important;
}

/* スライダーのowl-item activeのmargin-rightを1pxに */
.owl-item.active {
   margin-right: 1px !important;
}

/* -------------------------------------------------
   4️⃣ タブレット・モバイル対応 (650px以下)
   ------------------------------------------------- */
/* 
   要件:
   - 画像をwidth 100%で表示
   - 画像が見切れないこと（最優先）
   - 高さは動的に変化してOK
   - シンプルなフェードアニメーションで画像切り替え
*/
@media screen and (max-width: 650px) {

   /* ヘッダーコンテンツエリア: 高さを自動に */
   #index_header_content {
      height: auto !important;
   }

   /* スライダーラッパー: aspect-ratioで画像の縦横比を維持 */
   #index_slider_wrap {
      height: auto !important;
      /* 画像サイズ 1125 x 540 のアスペクト比 */
      aspect-ratio: 1125 / 540;
   }

   /* スライダー本体 */
   #index_slider {
      height: auto !important;
      aspect-ratio: 1125 / 540;
   }

   /* スライダーアイテム - 背景画像として表示 */
   #index_slider .item {
      height: auto !important;
      aspect-ratio: 1125 / 540;
      position: relative;
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      overflow: hidden;
   }

   /* スライスアニメーションを完全に無効化 */
   #index_slider .item .slice_image_list,
   #index_slider .item .slice_image_list.pc,
   #index_slider .item .slice_image_list.mobile {
      display: none !important;
   }

   /* キャプション（テキスト）の位置調整 */
   #index_slider .caption {
      width: 90% !important;
      padding: 0 20px !important;
   }

   /* キャッチフレーズのフォントサイズ調整 */
   #index_slider .catch {
      font-size: 24px !important;
      line-height: 1.4 !important;
   }

   /* 説明文のフォントサイズ調整 */
   #index_slider .desc {
      font-size: 14px !important;
      line-height: 1.8 !important;
      margin-top: 10px !important;
   }

   /* ボタンサイズ調整 */
   #index_slider .button {
      font-size: 14px !important;
      min-width: 200px !important;
      height: 50px !important;
      line-height: 50px !important;
      margin-top: 20px !important;
      padding: 0 40px !important;
   }

   /* オーバーレイ */
   #index_slider .overlay {
      display: block;
   }

   /* ドットナビゲーション位置調整 */
   #index_slider .slick-dots {
      bottom: 15px !important;
   }

   /* フェードアニメーション設定 */
   #index_slider .item {
      opacity: 0;
      transition: opacity 0.8s ease-in-out;
   }

   #index_slider .item.slick-active {
      opacity: 1;
   }
}

/* 
   フェードアニメーション実装完了✨
   - スライスを完全に非表示
   - .itemに背景画像を設定
   - シンプルなフェード切り替え
   - aspect-ratioで画像が見切れないように保護
*/