/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.12.3.1772270292
Updated: 2026-02-28 18:18:12

*/

/* ==========================================
   1. PC（921px以上）：ヘッダー固定
   ========================================== */
@media (min-width: 921px) {
    #masthead {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        background-color: #00008b !important;
    }

    body.admin-bar #masthead {
        top: 32px !important;
    }

    #page {
        padding-top:60px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ==========================================
   2. スマホ（920px以下）：ヘッダー固定＋フッター固定
   ========================================== */
@media (max-width: 920px) {
    /* 1. フッターを固定する設定（ここはそのまま） */
    .site-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99998 !important;
        background-color: #00008b !important;
    }

    /* 2. 【重要】フッターの高さ分、コンテンツの下に余白を作る */
    #page {
        /* フッターに隠れる分を押し上げます */
        /* 重なりがひどい場合は 120px や 140px に増やしてください */
        margin-bottom: 120px !important; 
        
        /* ヘッダー固定用の余白も維持（文字切れ防止） */
        margin-top: 50px !important; 
    }
}
/* ==========================================
   2-2. スマホ（920px以下）：ヘッダーを固定
   ========================================== */
@media (max-width: 920px) {
    /* Astraのモバイルヘッダー用クラスをすべて固定 */
    .ast-mobile-header-wrap, 
    .ast-mobile-header-container,
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        background-color: #00008b !important; /* 濃い青色 */
    }

    /* ヘッダーの中身を1行に整列 */
    .ast-mobile-header-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 60px !important; /* ヘッダーの厚みを固定 */
    }

    /* スマホ版の文字切れ防止 */
    /* 写真の「西宮の〜」の被り具合で数値を調整してください */
    #page {
        margin-top: 70px !important; 
    }
    
    /* 管理バー対応（スマホ用） */
    body.admin-bar .ast-mobile-header-wrap {
        top: 46px !important;
    }
}

/* hero */
.hero{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 動画 */
.hero-video{
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.hero-video video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gutenbergの動画ブロック余白対策 */
.wp-block-video.hero-video{
  margin: 0 !important;
}

/* コピー */
.hero-copy{
position:absolute;
top:50%;
right: clamp(4%, 8vw, 12%);
transform:translateY(-50%);
color:#fff;
writing-mode:vertical-rl;
font-size:40px;
z-index:2;

white-space:nowrap;
text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}

/* SP */
.hero-sp{
  display: none;
}

/* スマホ */
@media (max-width:768px){

  .hero-pc{
    display: none;
  }

  .hero-sp{
    display: block;
  }

  .hero-copy{
    left: 50%;
    right: auto;
    transform: translate(-50%,-50%);
    font-size: 26px;
  }

}

/* =====================================
   ヘッダー追従（PCのみ）
===================================== */

/* PCヘッダー固定 */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* PCヘッダー高さ */
.ast-primary-header-bar,
.ast-builder-grid-row-container{
  min-height: 80px;
}

/* 本文をヘッダー分下げる */
.site-content{
  margin-top: 80px;
}

/* SPは固定しない */
@media (max-width: 768px){
  .site-header{
    position: static;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-content{
    margin-top: 0;
  }
}


/* =========================
   フォーム全体（中央カード化）
   ========================= */
.wpcf7 {
  max-width: 640px;
  margin: 40px auto;
}

.wpcf7 form {
  background: #ffffff;
  padding: 40px 32px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

/* =========================
   各項目
   ========================= */
.wpcf7 form p {
  margin-bottom: 24px;
}

/* ラベル */
.wpcf7 form label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
  color: #111;
}

/* 必須 */
.wpcf7 .required {
  color: #e53935;
  font-size: 12px;
  margin-left: 6px;
}

/* =========================
   入力欄
   ========================= */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 14px 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fafafa;
  font-size: 15px;
  transition: 0.2s;
}

/* フォーカス */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  border-color: #000;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
  outline: none;
}

/* テキストエリア */
.wpcf7 textarea {
  min-height: 140px;
}

/* =========================
   ラジオ・チェック
   ========================= */
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-checkbox {
  margin-top: 6px;
}

.wpcf7 .wpcf7-list-item {
  display: block;
  margin-bottom: 8px;
}

.wpcf7 .wpcf7-list-item label {
  font-weight: normal;
  cursor: pointer;
}

/* =========================
   送信ボタン（重要）
   ========================= */
.wpcf7 input[type="submit"] {
  width: 100%;
  margin-top: 20px;
  padding: 16px;
  border-radius: 999px;
  border: none;
  background: #e53935; /* ←ジム系で強い */
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.25s;
}

.wpcf7 input[type="submit"]:hover {
  background: #c62828;
  transform: translateY(-1px);
}

/* =========================
   エラー
   ========================= */
.wpcf7-not-valid-tip {
  font-size: 12px;
  margin-top: 4px;
  color: #e53935;
}

/* =========================
   スマホ
   ========================= */
@media (max-width: 768px) {
  .wpcf7 form {
    padding: 24px 16px;
  }
}