/*
 Theme Name:   araiseicya-child
 Template:     araiseicya
*/

/* =========================================================
   /home-preview：ベース（style.css 側は「レイアウト・見た目の土台」だけ）
   ※ 追従メニュー（hp-fixed）や最終上書き・ボタン色は functions.php の $hp_css に集約
   ========================================================= */

/* /home-preview の body 判定（slug + template + JS付与クラスの全対応） */
body.home-preview-page,
body.page-template-page-home-preview,
body.page-template-page-home-preview-php{
  /* ここには全ページ影響する指定は置かない（安全策） */
}

/* =========================================================
   /home-preview：メインビジュアル（スライド切替）
   ========================================================= */

body.home-preview-page .home-preview,
body.page-template-page-home-preview .home-preview,
body.page-template-page-home-preview-php .home-preview,
body.home-preview-page .home-preview #main,
body.page-template-page-home-preview .home-preview #main,
body.page-template-page-home-preview-php .home-preview #main{
  margin: 0;
  padding: 0;
}

body.home-preview-page .home-preview #mainimage,
body.page-template-page-home-preview .home-preview #mainimage,
body.page-template-page-home-preview-php .home-preview #mainimage{
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 非アクティブは display:none（縦並び防止） */
body.home-preview-page .home-preview #mainimage .mainimage_conts,
body.page-template-page-home-preview .home-preview #mainimage .mainimage_conts,
body.page-template-page-home-preview-php .home-preview #mainimage .mainimage_conts{
  display: none;
  position: relative; /* テキスト重ねの基準 */
}

body.home-preview-page .home-preview #mainimage .mainimage_conts.is-active,
body.page-template-page-home-preview .home-preview #mainimage .mainimage_conts.is-active,
body.page-template-page-home-preview-php .home-preview #mainimage .mainimage_conts.is-active{
  display: block;
}

/* 画像 */
body.home-preview-page .home-preview #mainimage .mainimage_img,
body.page-template-page-home-preview .home-preview #mainimage .mainimage_img,
body.page-template-page-home-preview-php .home-preview #mainimage .mainimage_img{
  position: relative;
  z-index: 1;
}

/* 本番トップ寄せ：ヒーロー高さ */
body.home-preview-page .home-preview #mainimage .mainimage_img,
body.page-template-page-home-preview .home-preview #mainimage .mainimage_img,
body.page-template-page-home-preview-php .home-preview #mainimage .mainimage_img{
  height: clamp(760px, 92vh, 1200px);
}
@media (max-width: 767px){
  body.home-preview-page .home-preview #mainimage .mainimage_img,
  body.page-template-page-home-preview .home-preview #mainimage .mainimage_img,
  body.page-template-page-home-preview-php .home-preview #mainimage .mainimage_img{
    height: clamp(520px, 78vh, 900px);
  }
}

body.home-preview-page .home-preview #mainimage .mainimage_img img,
body.page-template-page-home-preview .home-preview #mainimage .mainimage_img img,
body.page-template-page-home-preview-php .home-preview #mainimage .mainimage_img img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
}

/* テキストを画像の上に重ねる */
body.home-preview-page .home-preview #mainimage .mainimage_text,
body.page-template-page-home-preview .home-preview #mainimage .mainimage_text,
body.page-template-page-home-preview-php .home-preview #mainimage .mainimage_text{
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

body.home-preview-page .home-preview #mainimage .mainimage_text-wrap,
body.page-template-page-home-preview .home-preview #mainimage .mainimage_text-wrap,
body.page-template-page-home-preview-php .home-preview #mainimage .mainimage_text-wrap{
  padding: 20px;
  text-align: center;
}

/* PC/SPテキスト画像の出し分け（/home-preview 内だけ） */
body.home-preview-page .home-preview .mainimage_maintext_pc,
body.page-template-page-home-preview .home-preview .mainimage_maintext_pc,
body.page-template-page-home-preview-php .home-preview .mainimage_maintext_pc{ display: block; }

body.home-preview-page .home-preview .mainimage_maintext_sp,
body.page-template-page-home-preview .home-preview .mainimage_maintext_sp,
body.page-template-page-home-preview-php .home-preview .mainimage_maintext_sp{ display: none; }

@media (max-width: 767px){
  body.home-preview-page .home-preview .mainimage_maintext_pc,
  body.page-template-page-home-preview .home-preview .mainimage_maintext_pc,
  body.page-template-page-home-preview-php .home-preview .mainimage_maintext_pc{ display: none; }

  body.home-preview-page .home-preview .mainimage_maintext_sp,
  body.page-template-page-home-preview .home-preview .mainimage_maintext_sp,
  body.page-template-page-home-preview-php .home-preview .mainimage_maintext_sp{ display: block; }
}

/* サブテキスト（白フチ） */
body.home-preview-page .home-preview #mainimage .mainiamge_subtext p,
body.page-template-page-home-preview .home-preview #mainimage .mainiamge_subtext p,
body.page-template-page-home-preview-php .home-preview #mainimage .mainiamge_subtext p{
  text-shadow: 0 0 6px #fff, 0 0 2px #fff;
  margin: 0.2em 0;
}

/* サブテキスト サイズ（重複整理：ここだけが有効） */
body.home-preview-page .home-preview #mainimage .mainiamge_subtext,
body.page-template-page-home-preview .home-preview #mainimage .mainiamge_subtext,
body.page-template-page-home-preview-php .home-preview #mainimage .mainiamge_subtext{
  font-size: 170% !important;
  line-height: 1.45 !important;
}
body.home-preview-page .home-preview #mainimage .mainiamge_subtext p,
body.page-template-page-home-preview .home-preview #mainimage .mainiamge_subtext p,
body.page-template-page-home-preview-php .home-preview #mainimage .mainiamge_subtext p{
  font-size: 1em !important;
  line-height: inherit !important;
}
@media (max-width: 767px){
  body.home-preview-page .home-preview #mainimage .mainiamge_subtext,
  body.page-template-page-home-preview .home-preview #mainimage .mainiamge_subtext,
  body.page-template-page-home-preview-php .home-preview #mainimage .mainiamge_subtext{
    font-size: 100% !important;
  }
}

/* =========================================================
   /home-preview：ヘッダー内の右上配置（オンラインショップ＋ハンバーガー）
   ※ header を absolute にする “最終保証” は functions.php 側（$hp_css）に置く想定
   ========================================================= */

body.home-preview-page .home-preview #h_menu,
body.page-template-page-home-preview .home-preview #h_menu,
body.page-template-page-home-preview-php .home-preview #h_menu{
  position: relative;
}

body.home-preview-page .home-preview #h_menu .h_menu-contact,
body.page-template-page-home-preview .home-preview #h_menu .h_menu-contact,
body.page-template-page-home-preview-php .home-preview #h_menu .h_menu-contact{
  position: absolute;
  top: 0;
  right: 60px;
  z-index: 10000;
}

body.home-preview-page .home-preview #h_menu .h_menu-hummenu,
body.page-template-page-home-preview .home-preview #h_menu .h_menu-hummenu,
body.page-template-page-home-preview-php .home-preview #h_menu .h_menu-hummenu{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10000;
}

/* =========================================================
   /home-preview：YouTube（1本想定で中央寄せ）
   ========================================================= */

body.home-preview-page .top_movie{
  display: block !important;
}
body.home-preview-page .top_movie .top_movieconts{
  float: none !important;
  width: auto !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.home-preview-page .top_movie iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
}

/* =========================================================
   /home-preview：hp-fixed 用スペーサー（JSが insertBefore する）
   ※ 追従の挙動・固定CSSは functions.php の $hp_css に集約
   ========================================================= */

body.home-preview-page .hp-menu-ph,
body.page-template-page-home-preview .hp-menu-ph,
body.page-template-page-home-preview-php .hp-menu-ph{
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
}

/* /contact/（page-id-5686）だけ：通常ヘッダー（ハンバーガー）が #mainconts_header と重ならないようにする */
body.page-id-5686 header{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

/* 念のため：上方向の余白を消す（状況により不要だが安全） */
body.page-id-5686 #main{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===========================
   /contact（page-id-5686）
   PCはヘッダー分(60px)確保、SPは空白を詰めてロゴを上げる
   =========================== */

body.page-id-5686 #mainconts_header{
  position: relative !important;
  top: auto !important;
  margin-top: 0 !important;
  padding-top: 60px !important;  /* PCは現状維持（ほぼ理想形） */
}

/* SPだけ：上の空白を消してロゴを上げる */
@media (max-width: 782px){
  body.page-id-5686 #mainconts_header{
    padding-top: 0 !important;   /* ★ここが肝 */
  }

  /* ついでにロゴ周りの余白も詰める（必要なら） */
  body.page-id-5686 #mainconts_header .mainconts_h-top{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.page-id-5686 #mainconts_header .h_topconts-logo{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.page-id-5686 #mainconts_header .h_logo{
    margin: 0 !important;
    line-height: 1 !important;
  }
  body.page-id-5686 #mainconts_header .h_logo img{
    display: block;
  }
}

/* 下部固定バーがある場合の保険 */
body.page-id-5686 #mainconts_wrap{
  padding-bottom: 96px !important;
}

/* =========================================================
   下層（body#second）: #h_menu(60px) とロゴ帯の間の「空白行」を詰める
   - /contact（page-id-5686）と /home-preview は既存調整があるため除外
   ========================================================= */
body#second:not(.page-id-5686):not(.home-preview-page) header{
  /* header 自体が 100px 等になっていると、#h_menu(60px) 直下に “空白” が残るため固定 */
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 商品一覧(/item/) だけ：ロゴ下〜メニュー帯の余白を少しだけ確保（必要に応じて数値調整） */
body#second.onlineshop #mainconts_header .mainconts_h-btm{
  margin-top: 10px !important;
}


/* =========================================================
   下層ページ（body#second）：追従(.on)時の “微妙な隙間” を潰す
   - #h_menu は 60px 固定の前提
   - fixed化の top を JS が調整できない（second.css が !important 等）場合も後勝ちさせる
   ========================================================= */
body#second #mainconts_header .mainconts_h-btm.on{
  top: 60px !important;
  margin-top: 0 !important;
  transform: none !important;
}

/* header 自体に余分な高さが乗っている場合の保険（見た目の40px空白対策） */
body#second header{
  height: 60px !important;
  min-height: 60px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}