/* ヒーローセクション(トップページ等)functions.phpにページIDを追加する */
body.transparent-header {
  padding-top: 0;
}

/* それ以外のページ */
body:not(.transparent-header) {
  padding-top: 60px;
}

/* ヘッダーを画面上部に固定 */
.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background-color: #FFFFFFBF ;
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* 変化遅延 */
  backdrop-filter: blur(8px); /* 背景をぼかす */
  -webkit-backdrop-filter: blur(8px); /* Safari対応 */
  will-change: background-color, box-shadow; /* GPUレンダリング */
}

.main-header-menu .sub-menu {
  background-color: #FFFFFFBF ;
  backdrop-filter: blur(8px); /* ぼかし */
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; /* ふんわり影をつける */
  border-radius: 4px; /* 角を少し丸める */
  border: none !important;
  white-space: nowrap; /* 改行を防ぐ */
}

/* ホーム画面 スクロール無、マウスホバー無　の時 */
/* ティザーの段階では常に透過*/
/*transparent-header .site-header:not(.scrolled-true):not(:hover) {*/
.transparent-header .site-header {
  background-color: transparent ; /* 透過 */
  backdrop-filter: blur(0px); /* 背景のぼかしOFF */
  -webkit-backdrop-filter: blur(0px); /* Safari対応 */
}

/* トップページでスクロール無＋ホバー無＝背景透明のときだけ白文字 */
/* ティザーの段階では常に透過*/
/*
.transparent-header .site-header:not(.scrolled-true):not(:hover) .main-header-menu a,
.transparent-header .site-header:not(.scrolled-true):not(:hover) .ast-header-html-1 *,
.transparent-header .site-header:not(.scrolled-true):not(:hover) .ast-header-html-2 *,
.transparent-header .site-header:not(.scrolled-true):not(:hover) .ast-icon 
*/
.transparent-header .site-header .main-header-menu a,
.transparent-header .site-header .ast-header-html-1 *,
.transparent-header .site-header .ast-header-html-2 *,
.transparent-header .site-header .ast-icon 
{
  color: #FFFFFF !important;
}

/* ハンバーガーメニューを白く */
.transparent-header .site-header:not(.scrolled-true):not(:hover) .menu-toggle .ast-mobile-svg {
  fill: #FFFFFF !important;
}

.main-header-bar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    height: auto !important; /* Astra の内部高さ指定を無効化 */
}

/* --- お問い合わせボタン（基本設定：白背景用＝オレンジ） --- */
.header-contact-btn a {
    border: 1px solid #ff6600;    /* 基本：オレンジ枠 */
    color: #ff6600 !important;    /* 基本：オレンジ文字 */
    border-radius: 18px;
    padding: 6px 12px !important;
    line-height: 1;
    transition: all 0.5s ease;
    margin-top: -1px;
}

/* 基本のホバー時（背景オレンジ・文字白） */
.header-contact-btn a:hover {
    background-color: #ff6600;
    color: #fff !important;
}


/* --- 特殊設定：トップページで透明な時だけ「白」にする --- */
/* (既存の白い文字にする条件と同じセレクタを使います) */
.transparent-header .site-header:not(.scrolled-true):not(:hover) .header-contact-btn a {
    border-color: #fff;           /* 枠を白に上書き */
    color: #fff !important;       /* 文字を白に上書き */
}

/* --- スマホメニュー（921px以下）の時の強制上書き設定 --- */
@media (max-width: 921px) {
    /* 1. 通常時・訪問済・フォーカス時など、全状態で強制的にオレンジ文字・オレンジ枠 */
    .transparent-header .site-header .header-contact-btn a,
    .transparent-header .site-header:not(.scrolled-true):not(:hover) .header-contact-btn a, /* PCの白文字ルールをここで打ち消すためにあえて書く */
    .transparent-header .site-header .header-contact-btn a:visited,
    .transparent-header .site-header .header-contact-btn a:focus {
        color: #ff6600 !important;
        border-color: #ff6600 !important;
        background-color: transparent !important;
    }

    /* 2. タップした時（ホバー・アクティブ）は背景をオレンジ・文字を白 */
    .transparent-header .site-header .header-contact-btn a:hover,
    .transparent-header .site-header:not(.scrolled-true):not(:hover) .header-contact-btn a:hover,
    .transparent-header .site-header .header-contact-btn a:active {
        background-color: #ff6600 !important;
        color: #fff !important;
        border-color: #ff6600 !important;
    }
}

/* ロゴ背景薄白色 */
.ast-site-identity {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 0px 2px 0px 0px;
  display: inline-block;
}

/*ロゴ背景サイズ */
.site-header .custom-logo-link img {
  width: clamp(7.5rem, 15vw, 15.0rem) !important;
  height: auto !important;
}