/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* アイコン → 1行目 → 2行目 の縦積みに固定 */
.main-header-menu .menu-item > a.menu-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  white-space: normal !important; /* 改行許可 */
  text-align: center;
  line-height: 1.2;
}

/* 2行テキストは必ず改行 */
.main-header-menu .menu-item > a.menu-link .line1,
.main-header-menu .menu-item > a.menu-link .line2 {
  display: block;
}


/*-----ここまで動作確認*/
/*
:root{
  --hover-orange: #edb452;*/
   /* 落ち着いたオレンジ（好みで変更） */


/* 色と下線アニメ（ホバー時／開いている時どちらも） */
.main-header-menu > li > a.menu-link{
  position: relative;
  transition: color .2s ease;
}
.main-header-menu > li > a.menu-link:hover,
.main-header-menu > li.is-open > a.menu-link{
  color: var(--hover-orange);
}


.main-header-menu > li > a.menu-link::before{
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -3px;
  height: 2px;
  background: var(--hover-orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.main-header-menu > li > a.menu-link:hover::before,
.main-header-menu > li.is-open > a.menu-link::before{
  transform: scaleX(1);
}








/*-----ここまで動作確認*/

/* hoverで開くのを無効化したい“だけ”なので、.is-open を除外する */
.ast-desktop .main-header-menu .menu-item-has-children:not(.is-open):hover > .sub-menu{
  display: none !important;
}

/*-----ここまで動作確認*/

/* 2) 開いているときは hover に関係なく常に表示 */
.ast-desktop .main-header-menu .menu-item-has-children.is-open > .sub-menu{
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 3) 題意と逆のルールが残っていないか確認（例：:hoverでdisplay:block を出すAstra既定） */
.ast-desktop .main-header-menu .menu-item-has-children:hover > .sub-menu{
  /* もしテーマ側で display:block; が効いているなら無効化しておく */
  display: initial; /* または何も指定しない。上の2ルールが効けばOK */
}




/* サイズと色継承だけ維持 */
.main-header-menu .menu-icon svg {
  width: 120px;   /* 好みで 44–56px */
  height: 120px;
  display: block;
  color: inherit;
}





/* 矢印消し、以下はモバイル様は消さない */
/* 疑似要素型の矢印を無効化（PCのみ） */
.ast-desktop .main-header-menu .menu-item-has-children > .menu-link::after {
  content: none !important;
}

/* アイコン要素型の矢印を無効化（PCのみ） */
.ast-desktop .main-header-menu .menu-item-has-children > .menu-link .ast-icon {
  display: none !important;
}

/* モバイルのサブメニュー用トグルは残す */
.ast-header-break-point .main-header-menu .ast-menu-toggle {
  display: inline-flex !important;
}








/* 完全固定（常に画面最上部） */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transition: none !important;          /* 余計なアニメ無効 */
}

/* 本文がヘッダーの下に潜らないように余白を足す
   実ヘッダー高さに合わせて調整（例：72px） */
.site-content{ padding-top: 72px; }

/* WP管理バー（ログイン時）のズレ防止 */
body.admin-bar .site-header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .site-header{ top: 46px; }
}


/*-----ここまで動作確認*/

/* ヘッダー高さ（実寸に合わせて）：後述のJSで自動更新も可 */
:root{ --header-h: 72px; }

/* サブメニューを“ヘッダー直下のフル幅パネル”にする（クリックで .is-open 時のみ表示） */
.ast-desktop .main-header-menu .menu-item-has-children > .sub-menu{
  position: fixed !important;
/*  top: var(--header-h) !important;*/
    top: var(--submenu-top, var(--header-h)); /* 下端の絶対座標を使う */
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;

  display: none;               /* 初期は非表示（JSで .is-open を付与） */
  background: #efebe4;
  /*  background: #dee2f3;*/
  padding: 16px 24px;
  z-index: 1900;               /* ヘッダーより上に */
  
  /* レイアウト：3列 任意行 */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 12px 24px;
}

/* 表示ルール（クリックで .is-open を付ける） */
.ast-desktop .main-header-menu .menu-item-has-children.is-open > .sub-menu{
  display: grid;
}

/* 中の項目の見た目（お好みで調整） */
.ast-desktop .main-header-menu .sub-menu > li{ list-style: none; margin:0; padding:0; }
.ast-desktop .main-header-menu .sub-menu a{
  display:inline-block; padding:4px 0; white-space:nowrap; color:inherit;
}

/* パネル内の × ボタン（下部中央） */
/* グリッドの最終行にフル幅で配置（前回の方針） */
.mega-close{
  grid-column: 1 / -1;
  justify-self: center;

  /* 横並び＆可変幅 */
  display: inline-flex;
  align-items: center;
  gap: .4em;

  padding: 8px 14px;          /* 可変幅にするので padding に変更 */
  width: auto;
  height: auto;
  border: 0;
  border-radius: 9999px;
  background: rgba(0,0,0,.06);
  color: #333;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;         /* 折り返さない＝横に流す */
  writing-mode: horizontal-tb; /* 親から縦書きが継承されても横書きに固定 */
  text-orientation: mixed;     /* 念のため */
  cursor: pointer;
}
.mega-close:hover{ background: rgba(0,0,0,.12); }

.ast-desktop .main-header-menu .menu-item-has-children > .sub-menu{
  border: none !important;
  outline: none !important;
  box-shadow: none;                 /* 影も不要なら */
}



/* パネルが position: fixed であれば、相対基準にするため */
.ast-desktop .main-header-menu .menu-item-has-children > .sub-menu{
  position: fixed;
  /* 既存の top/left/right/width などはそのまま */
  /* × の absolute 基準にするなら relative を親に付けてもOK */
  /* position: fixed のままでも子の absolute は fixed基準になるのでこの用途ならOK */
}



/* 画面全体を覆う暗幕（本文とフッターだけ暗くする） */
.mega-dim{
  position: fixed;
  inset: 0;                /* 画面全体 */
  background: rgba(0,0,0,.85);
  opacity: 0;
  visibility: hidden;
  z-index: 1800;            /* コンテンツより上、ヘッダー(1000)・サブメニュー(1001)より下 */
  transition: opacity .15s ease, visibility .15s ease;
}

.mega-dim.is-active{
  opacity: 1;
  visibility: visible;
}

/* 暗幕表示中はページスクロールを止める（任意） */
body.mega-open{
  overflow: hidden;
}

/* 以下、下線アニメーションを出すための設定 */

/* 一番下：暗幕（本文の上に載る） */
.mega-dim { z-index: 1800; }

/* 中：サブメニュー（暗幕より上、ヘッダーより下） */
.ast-desktop .main-header-menu .menu-item-has-children > .sub-menu{
  z-index: 1900;
  position: fixed;
  top: var(--submenu-top, var(--header-h)); /* ←ヘッダー直下に必ず置く */
}

/* 上：ヘッダー（下線もここに属する） */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;            /* ←この指定はOK */
  background:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transition: none !important;
}

/* 下線はヘッダー内で完結させる（はみ出さない）*/
.main-header-menu > li > a.menu-link{
  position: relative;
  padding-bottom: 6px;       /* 下線用スペース */
  transition: color .2s ease;
}
.main-header-menu > li > a.menu-link::before{
  content:"";
  position:absolute;
  left:12%; right:12%;
  bottom:0;                  /* -pxにしない：はみ出し防止 */
  height:2px;
  background: var(--hover-orange, #edb452);
   /* background: var(--hover-orange, #05ffd1);*/
  transform: scaleX(0);
  transform-origin:center;
  transition: transform .25s ease;
}
.main-header-menu > li > a.menu-link:hover::before{
  transform: scaleX(1);
}

/* 以上、下線アニメーションを出すための設定 */


/* 以下、モバイルメニューで横にアイコンを出すための設定 */
/* メニューアイコン共通スタイル */

/* メニューのラベルを横並びにする */
.ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link {
  display: inline-flex;        /* 横並びに */
  align-items: center;         /* 縦位置を揃える */
  gap: 6px;                    /* アイコンと文字の間隔 */
}



@media (max-width: 921px){
  .main-header-menu .menu-item > .menu-link img.menu-icon {
    display: inline-block;
  }
}
@media (min-width: 922px){
  .main-header-menu .menu-item > .menu-link img.menu-icon {
    display: none; /* PCでは非表示 */
  }
}



/* ===== Astraのデフォルトを上書きして横並びを強制する ===== */
@media (max-width: 921px){
  .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link {
    display: inline-flex !important;   /* ← blockを上書き */
    align-items: center;               /* 縦位置を中央揃え */
    justify-content: flex-start;       /* 左寄せ */
    gap: 6px;                          /* アイコンと文字の間隔 */
    text-align: left !important;       /* 中央寄せを解除 */
  }

  .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link img.menu-icon {
    display: inline-block !important;  /* block→inline-block */
    margin: 0 6px 0 0 !important;      /* 文字との間隔 */
    vertical-align: middle;            /* 文字の縦位置と揃える */
  }
}

/* ===== モバイルメニュー：アイコンを文字の左で横並びに強制 ===== */
@media (max-width: 921px){

  /* 縦積みを上書き：row に固定＆左寄せ */
  .ast-mobile-popup-drawer .main-header-menu .menu-item .menu-link,
  .ast-builder-menu-mobile .main-header-menu .menu-item .menu-link{
    display: flex !important;
    flex-direction: row !important;   /* ← ここがキモ */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px;                          /* アイコンと文字の間隔 */
    text-align: left !important;       /* 中央寄せを打ち消す */
 
  }

  /* 画像のブロック化・中央寄せを打ち消す */
/* アイコンサイズ・位置を統一（モバイル用） */
.ast-mobile-popup-drawer .main-header-menu .menu-item .menu-link img.menu-icon,
.ast-builder-menu-mobile .main-header-menu .menu-item .menu-link img.menu-icon {
  display: inline-block !important;
  width: 60px;     /* ←ここで統一して調整 */
  height: 60px;
 /*margin: 0 6px 0 30px !important;/*（top right bottom left の順）*/
  margin: 0 6px 0 8px !important;/*（top right bottom left の順）*/
  vertical-align: middle;
}


  /* ラベル側が block にされていても崩れないよう保険 */
  .ast-mobile-popup-drawer .main-header-menu .menu-item .menu-link > span,
  .ast-builder-menu-mobile .main-header-menu .menu-item .menu-link > span{
    display: inline !important;
  }
}


/* 以上、モバイルメニューにアイコンを出すための設定 */




/* ===== モバイル（～1024px）：親=52pxで積む／上限なし／中だけスクロール／裏は暗転＆スクロール不可 ===== */
@media (max-width: 1024px){

  /* モバイルメニュー本体：高さは内容に応じて伸びる。画面を超えたら内側だけスクロール */
  header.site-header:has(.menu-toggle[aria-expanded="true"]) #ast-hf-mobile-menu,
  header.site-header:has(.ast-button-toggle[aria-expanded="true"]) #ast-hf-mobile-menu,
  header.site-header:has(.ast-mobile-menu-trigger[aria-expanded="true"]) #ast-hf-mobile-menu{
    position: fixed !important;


    top: 0 !important; left: 0 !important; right: 0 !important;
    /*bottom: auto !important;*/
        bottom: 0 !important;



   /* z-index: 2100 !important;*/
        z-index: 1900 !important;
    width: 100vw !important;
    

    /*width: 100% !important;*/

    height: auto !important;           /* ← 固定をやめる */
    /*max-height: 100vh !important;      /* 画面より長い時は中だけスクロール() */
    max-height: 100vh !important; 
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* 親メニュー 1項目＝52px（テキストは1行・省略） */
  #ast-hf-mobile-menu .main-header-menu > li > a.menu-link{
    display: flex !important;
    align-items: center !important;
    height: 52px !important;           /* ちょうど52px */
    padding: 0 16px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    /*overflow: hidden !important;*/
    text-overflow: ellipsis !important;
  }

  /* サブメニューは内容に応じて高さ可変（Astraの display:none を無効化） */
  #ast-hf-mobile-menu .menu-item-has-children.is-open > .sub-menu{
    display: block !important;         /* gridでもOK */
    visibility: visible !important;
    opacity: 1 !important;
  }



















@media (max-width: 921px){
  /* 親の左右余白を消す（ズレの主犯） */
  header.site-header #ast-hf-mobile-menu,
  header.site-header #ast-hf-mobile-menu .ast-mobile-popup-content{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 親を縦Flexにして ::before を“横いっぱい”にしやすく */
  header.site-header #ast-hf-mobile-menu{
    display: flex !important;
    flex-direction: column !important;
  }

  /* 見出しの箱そのものを横いっぱいに → 中身は中央 */
  header.site-header #ast-hf-mobile-menu::before{
    content: "MENU";
    display: block;
    width: 100%;
    align-self: stretch;              /* 親がflexでも横いっぱい */
    text-align: center;               /* 文字を中央 */
    font-weight: 700;
    font-size: 25px;
    line-height: 1.3;/* 行間 */
    padding: 12px 16px;/* 内側余白（上下12px、左右16px） */

 /* 上下の内側余白（背景つきの高さ） */
    padding-block: 20px;          /* = padding-top/bottom: 20px */
    padding-inline: 16px;



    background: #fff;
    border-bottom: none;
    z-index: 1;
  }
}


 /* 以下、モバイルのメニューが複数開くように */
@media (max-width: 1024px){ 
  #ast-hf-mobile-menu .menu-item-has-children.is-open > .sub-menu{
    display: block !important;     /* gridでもOK。テーマのdisplay:noneを打ち消す */
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* ----- モバイル時だけ：下線アニメと色変更を無効化 ----- */
@media (max-width: 1024px){
  /* リンク色そのまま・アニメ停止 */
  .main-header-menu > li > a.menu-link{
    color: inherit !important;
    transition: none !important;
  }

  /* 下線そのものを作らない */
  .main-header-menu > li > a.menu-link::before{
    content: none !important;
  }

  /* ホバー時／開いている時（.is-open）も色を変えない */
  .main-header-menu > li > a.menu-link:hover,
  .main-header-menu > li.is-open > a.menu-link{
    color: inherit !important;
  }
}



/* モバイル子メニューの高さを親と同じにする */
@media (max-width: 1024px){
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link {
    display: flex !important;
    align-items: center !important;
    height: 52px !important;         /* 親と同じ高さ */
    padding: 0 16px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    /*overflow: hidden !important;*/
    overflow: auto !important;
    text-overflow: ellipsis !important;
  }
}


/* モバイル子メニューの色変更 */
@media (max-width: 1024px){
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link {
    background: #fae3bb !important;  /* 背景色 */
      /* background: #a5bcff !important;  /* 背景色 */
    color: #003366 !important;       /* 文字色 */
    /*color: #2b0707 !important;       /* 文字色 */
  }

  /* hover時の色 */
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link:hover {
    background: #e0e0e0 !important;
    color: #d33 !important;
  }
}













/* モバイルだけ：親メニューが開いても/選択中でも色を変えない */
@media (max-width: 1024px){

  /* 基本色を「親から継承」に固定（青っぽくならない） */
  #ast-hf-mobile-menu .main-header-menu > li > a.menu-link,
  .ast-header-break-point .main-header-menu > li > a.menu-link,
  .ast-mobile-popup-drawer .main-header-menu > li > a.menu-link {
    color: inherit !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent; /* iOSの青っぽいタップ強調を抑制 */
  }

  /* 開いている・現在地・祖先・ホバー/フォーカス/アクティブ/ビジテッドも色を固定 */
  #ast-hf-mobile-menu .main-header-menu > li.is-open > a.menu-link,
  #ast-hf-mobile-menu .main-header-menu > li.current-menu-item > a.menu-link,
  #ast-hf-mobile-menu .main-header-menu > li.current-menu-ancestor > a.menu-link,
  #ast-hf-mobile-menu .main-header-menu > li.current_page_item > a.menu-link,
  #ast-hf-mobile-menu .main-header-menu > li.current_page_ancestor > a.menu-link,
  #ast-hf-mobile-menu .main-header-menu > li > a.menu-link:hover,
  #ast-hf-mobile-menu .main-header-menu > li > a.menu-link:focus,
  #ast-hf-mobile-menu .main-header-menu > li > a.menu-link:active,
  #ast-hf-mobile-menu .main-header-menu > li > a.menu-link:visited,
  .ast-header-break-point .main-header-menu > li.is-open > a.menu-link,
  .ast-header-break-point .main-header-menu > li.current-menu-item > a.menu-link,
  .ast-header-break-point .main-header-menu > li.current-menu-ancestor > a.menu-link {
    color: inherit !important;
    background: transparent !important;
    text-decoration: none !important;
  }
}


/* モバイル：子メニューをアニメで“スルッ”と展開 */
@media (max-width: 1024px){
  /* 閉じている状態の基準（displayは常にblockにしてmax-heightで畳む） */
  #ast-hf-mobile-menu .menu-item-has-children > .sub-menu {
    display: block !important;        /* ← ここ重要：display:none だとアニメしない */
    max-height: 0;                    /* 畳む */
    overflow: hidden;                 /* はみ出し非表示 */
    opacity: 0;                       /* 透明から */
    transform: translateY(-4px);      /* 少し上から出てくる感じ */
    transition:
     max-height .40s ease,/* ← ここ（開閉の主速） */
     opacity .26s ease,/* ← フェード速 */
     transform .40s ease;/* ← “少し下に出る”動きの速さ */

    will-change: max-height, opacity, transform;
  }

  /* 開いた状態（.is-open をJSが付与） */
  #ast-hf-mobile-menu .menu-item-has-children.is-open > .sub-menu {
    max-height: 1000px;              /* 充分に大きい上限（必要なら調整） */
    opacity: 1;
    transform: translateY(0);
  }

  /* ユーザーが“簡易表示”設定のときはアニメ抑制（アクセシビリティ） */
  @media (prefers-reduced-motion: reduce){
    #ast-hf-mobile-menu .menu-item-has-children > .sub-menu {
      transition: none !important;
    }
  }
}














@media (max-width: 1024px){
  /* Astra標準のモバイルドロワーを正しく固定＆内側だけスクロール */
  .ast-mobile-popup-drawer{
    position: fixed !important;
    inset: 0 !important;
    z-index: 1900 !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 100vh !important;
    overflow: hidden !important;      /* スクロールは中身側 */
  }
  .ast-mobile-popup-content{
    flex: 1 1 auto !important;
    min-height: 0 !important;         /* ★必須：これが無いと子が縮めずスクロール不可に */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 念のための横はみ出し封じ */
  .ast-mobile-popup-content, 
  .ast-mobile-popup-content .main-header-menu{
    overflow-x: hidden !important;
  }
}


@media (max-width:1024px){
  /* 画面を覆う層（外側） */
  .ast-mobile-popup-drawer{
    position: fixed !important;
    inset: 0 !important;
    z-index: 1900 !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 100vh !important;
    overflow: hidden !important;      /* ← スクロールは中身側で */
    touch-action: pan-y;               /* 端末によって必要 */
    overscroll-behavior: contain;
  }

  /* ← 本当にスクロールさせる層（中身） */
  .ast-mobile-popup-content{
    flex: 1 1 auto !important;
    min-height: 0 !important;         /* ★Flexの“縮み止め”を解除（超重要） */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overflow-x: hidden;
  }

  /* もし .ast-mobile-popup-content が無い構成なら保険（どちらかが当たればOK） */
  #ast-hf-mobile-menu{
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}
/* 1) メニュー層を暗幕より前面に（確実に上に） */
@media (max-width:1024px){
  /* Astra のモバイルドロワー一式を最前面に */
  .ast-mobile-popup-drawer,
  #ast-hf-mobile-menu {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2100 !important;   /* ← 暗幕(1800)より高く */
    display: flex !important;
    flex-direction: column !important;
    max-height: 100vh !important;
    overflow: hidden !important; /* スクロールは中身側で */
  }

  /* 本当にスクロールさせる“中身の層” */
  .ast-mobile-popup-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;          /* ← 超重要：これが無いと下に行けない */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overflow-x: hidden !important;
    position: relative;                 /* 新たな積層文脈を作りつつ */
    z-index: 1;                         /* メニューの中でも前面に */
  }


}

/* 2) 旧セレクタの縛りをゆるめる（ヘッダー直下限定だと外す） */
@media (max-width:1024px){
  header.site-header #ast-hf-mobile-menu { all: unset; } /* ←一旦リセット（必要なら削る） */
}

/* 3) 横はみ出しがあるとスクロールが横に奪われるのを封じる */
@media (max-width:1024px){
  .ast-mobile-popup-content,
  .ast-mobile-popup-content .main-header-menu { overflow-x: hidden !important; }
}


/*以下、モバイル子メニューガでない問題*/
/* ===== 子メニューが途中で切れる不具合の修正（モバイル） ===== */
@media (max-width: 1024px){
  /* 開いている sub-menu は“上限なし”かつ“隠さない/必要なら内側スクロール”にする */
  #ast-hf-mobile-menu .menu-item-has-children.is-open > .sub-menu{
    max-height: none !important;     /* ← 1000pxの上限を撤廃 */
    overflow: visible !important;    /* ← 全部見せる（親側が100vhでスクロールを受け持つ） */
  }

  /* もし“内側だけでスクロールさせたい”場合は上をコメントアウトしてこちらを使う */
  /* #ast-hf-mobile-menu .menu-item-has-children.is-open > .sub-menu{
       max-height: calc(100vh - 120px) !important;  // 見出しや余白分は適宜調整
       overflow-y: auto !important;
       -webkit-overflow-scrolling: touch;
     } */
}





@media (max-width:921px){
  #ast-hf-mobile-menu .menu-close-btn {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #ddd;
  }
  #ast-hf-mobile-menu .menu-close-btn .mobile-menu-close {
    display: block;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #333;
    cursor: pointer;
  }
  #ast-hf-mobile-menu .menu-close-btn .mobile-menu-close:hover {
    background: #f5f5f5;
    color: #d33;
  }
}

@media (max-width:921px){
  #ast-hf-mobile-menu > .menu-close-btn { display: list-item !important; }
}










/* ===== モバイル：区切り線を消す ===== */
@media (max-width:1024px){
  /* 各行の下線・囲み線をリセット */
  #ast-hf-mobile-menu,
  #ast-hf-mobile-menu .main-header-menu,
  #ast-hf-mobile-menu .main-header-menu > li,
  #ast-hf-mobile-menu .main-header-menu > li > a.menu-link {
    border: none !important;
    box-shadow: none !important;
  }
  /* Astraが li に付けるデフォのボーダー対策 */
  #ast-hf-mobile-menu .main-header-menu > li { border-bottom: 0 !important; }
}

/* ===== モバイル末尾の「閉じる」を .mega-close と同じ見た目に ===== */
@media (max-width:1024px){
  /* 置き場：中央寄せ＆上下に少し余白 */
  #ast-hf-mobile-menu > .menu-close-btn{
    display: flex !important;
    justify-content: center !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border: 0 !important;            /* ← 区切り線を消す */
    background: transparent !important;
  }

  /* ボタン本体（= .mega-close と同等） */
  #ast-hf-mobile-menu .menu-close-btn .mobile-menu-close{
    display: inline-flex !important;
    align-items: center !important;
    gap: .4em !important;

    padding: 8px 14px !important;     /* 可変幅 */
    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 9999px !important;
    background: rgba(0,0,0,.06) !important;
    color: #333 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;

    /* 万一縦書き継承があっても横書き固定 */
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  #ast-hf-mobile-menu .menu-close-btn .mobile-menu-close:hover{
    background: rgba(0,0,0,.12) !important;
  }
}

/* （参考）デスクトップ・パネル側の .mega-close はこのままでOK */






/*以下、サブメニューの子メニューに下線点線*/
/* ===== モバイル専用：子メニュー文字のみに点線アンダーライン ===== */
@media (max-width:1024px){
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link {
    display: inline; /* 文字幅に合わせる */
    text-decoration-line: underline;
    text-decoration-style: dotted;  /* 点線 */
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;     /* 少し下げる */
    text-decoration-color: rgba(0,0,0,0.6); /* 少し淡く */
  }

  /* hover時はやや濃く */
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link:hover {
    text-decoration-color: rgba(0,0,0,0.9);
  }
}

/* ===== モバイル専用：子メニュー文字の後ろに ＞ を付ける ===== */
/* ===== モバイル専用：子メニューは高さ52px＋点線アンダーラインを維持しつつ「＞」を文字直後に表示 ===== */
@media (max-width:1024px){
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link{
    display: flex !important;            /* 行レイアウトは維持 */
    align-items: center !important;
    height: 52px !important;             /* 既存の行高 */
    padding: 0 16px !important;          /* 既存の左右余白 */
    gap: .4em;                            /* 文字と ＞ の間 */
    text-decoration-line: underline;      /* 文字に点線下線 */
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  /* 文字の“すぐ後”に付く。flexの子として後置されるので右端には行かない */
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link::after{
    content: "＞";
    line-height: 1;
    opacity: .75;
    /* ↓ 下線が矢印まで引かれるのが気になる場合の軽減策（多くの環境で効きます） */
    text-decoration: none;
  }

  /* タップ時の視認性（任意） */
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link:hover::after{
    opacity: .95;
  }
}


/*以下文字　フォント*/

/* ===== 柔らかい本文フォント（Shippori Mincho） ===== */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500&display=swap');

/* 本文・見出しを明朝体でやわらかく */
body,
.entry-content,
p,
li,
.post-content,
.ast-article-single,
.ast-single-post .entry-content p,
.ast-single-post .entry-content li {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 400;
  color: #333;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* 見出しはやや太めで柔らかく */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 500;
  color: #222;
  line-height: 1.5;
}

/* ===== メニュー類はゴシック系のまま（上書き防止） ===== */
.main-header-menu a,
.ast-builder-menu .main-header-menu a,
.ast-mobile-popup-drawer .main-header-menu a {
  font-family: 'Noto Sans JP', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}


/*以下、矢印消しと＋－ボタン*/
/* ============================================================
   モバイル：本物のトグルを無視して、親リンクの疑似要素で丸＋／−を描く
   ============================================================ */
@media (max-width:1024px){

  /* 既存の矢印/トグルは全て隠す（重なり防止） */
  #ast-hf-mobile-menu .menu-link .ast-icon.icon-arrow,
  #ast-hf-mobile-menu .menu-link .icon-arrow,
  #ast-hf-mobile-menu .ast-header-navigation-arrow,
  #ast-hf-mobile-menu .ast-menu-toggle {
    display: none !important;
  }

  /* 親行の右にインジケータ分の余白を確保＆基準化 */
  #ast-hf-mobile-menu .menu-item-has-children { position: relative !important; }
  #ast-hf-mobile-menu .menu-item-has-children > a.menu-link{
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 52px !important;
    padding: 0 16px !important;
    padding-right: 56px !important;  /* ← 丸のスペース */
    overflow: visible !important;
  }

  /* 丸＋（横棒＋縦棒）を a::after 1枚で描く
     2本の linear-gradient を重ねる：横(14x2) と 縦(2x14) */
  #ast-hf-mobile-menu .menu-item-has-children > a.menu-link::after{
    content: "";
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.08);                 /* 丸の塗り */
    background-image:
      linear-gradient(#333,#333),                       /* 横棒 */
      linear-gradient(#333,#333);                       /* 縦棒 */
    background-size: 14px 2px, 2px 14px;
    background-position: center, center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
  }

  /* 開いているときは縦棒を消して “−” 表示にする */
  #ast-hf-mobile-menu .menu-item-has-children.is-open > a.menu-link::after{
    background-image: linear-gradient(#333,#333);       /* 横棒のみ */
    background-size: 14px 2px;
  }

  /* 子メニューはフェードで開閉（親の位置は不動） */
  #ast-hf-mobile-menu .sub-menu{
    opacity: 0; display: none; transition: opacity .25s ease;
  }
  #ast-hf-mobile-menu li.menu-item-has-children.is-open > .sub-menu{
    display: block; opacity: 1;
  }
}

/*以下点線アンダーラインの＞にはかけない設定*/
/* モバイル子メニュー：矢印をテキスト直後にピタ付け */
@media (max-width:1024px){
  /* 1) AstraのSVG矢印は隠す */
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link .ast-icon.icon-arrow,
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link .ast-arrow-svg{
    display: none !important;
  }

  /* 2) a 全体に点線下線（＞も含めて連続表示） */
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link{
    display: inline-flex !important;     /* テキストと::afterを横並び */
    align-items: baseline !important;
    gap: 0 !important;                   /* 隙間ゼロ */
    padding-right: 16px !important;      /* 行の右余白だけ（予約エリア不要） */
    text-decoration-line: underline !important;
    text-decoration-style: dotted !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
  }

  /* 3) テキスト直後に ＞ を生成（余白ゼロ・下線継承） */
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link::after{
    content: "＞";
    display: inline;                     /* インラインのまま */
    margin-left: 0 !important;           /* 余白なし＝ピタ付け */
    text-decoration: inherit !important; /* 下線をそのまま共有 */
  }
}
/* ==== 子メニュー行を縦・中央揃えに統一 ==== */
@media (max-width:1024px){
  /* 行本体をFlex化して中央揃え */
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link{
    height: 52px !important;           /* 既定の行高 */
    display: flex !important;           /* inline-flex ではなく flex に */
    align-items: center !important;     /* ← 縦・中央揃え */
    line-height: 1 !important;
    gap: 0 !important;                  /* 文字と＞の隙間ゼロにするなら */
  }

  /* もし ＞ を ::after で出している場合も中央に */
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link::after{
    display: inline-block;              /* Flex内でも高さ計算が安定 */
    line-height: 1;
    vertical-align: middle;
  }

  /* SVG矢印を使う構成ならこちらも保険で中央に */
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link .ast-icon.icon-arrow,
  #ast-hf-mobile-menu .sub-menu > li > a.menu-link .ast-arrow-svg{
    position: static !important;        /* 絶対配置をやめて */
    display: inline-flex !important;    /* 行内要素として */
    align-self: center !important;      /* ← 中央に */
    margin-left: 0 !important;
    vertical-align: middle !important;
    transform: none !important;
  }
}
/* ==== 子メニューの左矢印だけ非表示（モバイル） ==== */
/* ==== モバイル子メニュー：左側の矢印だけ完全非表示 ==== */
@media (max-width:1024px){
  /* 1) 左矢印の実体（テキストの直前にある span.ast-icon.icon-arrow ）を潰す */
  #ast-hf-mobile-menu ul.sub-menu > li > a.menu-link > span.ast-icon.icon-arrow{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* 念のため中の SVG も */
  #ast-hf-mobile-menu ul.sub-menu > li > a.menu-link > span.ast-icon.icon-arrow > svg{
    display: none !important;
  }

  /* 2) 万一 ::before で左矢印を描いているスキン対策 */
  #ast-hf-mobile-menu ul.sub-menu > li > a.menu-link::before{
    content: none !important;
    background: none !important;
  }

  /* 3) 左矢印ぶんの余白も詰める（必要に応じて 8〜16px で調整） */
  #ast-hf-mobile-menu ul.sub-menu > li > a.menu-link{
    padding-left: 16px !important;
  }
}


/*以下、TOPページだけじわっと表示*/
/* ============================================================
   フロントページ遷移時：白からじわっと全体フェードイン
   （ロゴクリックなどでTOPに戻った時も適用）
   ============================================================ */
:root{
  --page-fade-duration: 1.2s;   /* フェード時間 */
  --page-fade-delay: .1s;      /* ページ描画安定待ち */
  --page-fade-color: #ffffff;  /* 白フェード色 */
}

/* 固定ページをトップにしている場合（body に .front-page クラス） */
body.front-page::before,
body.home::before {
  content: "";
  position: fixed;
  inset: 0;                      /* 画面全体 */
  background: var(--page-fade-color);
  z-index: 9999;                 /* 最前面（ヘッダーより上） */
  opacity: 1;
  pointer-events: none;          /* クリック操作は透過 */
  animation: pageFadeOut var(--page-fade-duration) ease-out var(--page-fade-delay) forwards;
  will-change: opacity, visibility;
}

/* フェードアニメーション本体 */
@keyframes pageFadeOut {
  0%   { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* 動きを抑制する設定（ユーザー環境が簡易表示モードなら） */
@media (prefers-reduced-motion: reduce){
  body.front-page::before,
  body.home::before {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}


/* 以下ヘッダーの位置調整 */
/* 以下ヘッダーの位置調整（余白を一切入れない版） */

:root {
  --header-h: 72px;                 /* 読み込み直後の保険 */
  --submenu-top: var(--header-h);
}

/* 余白をゼロ固定（JSで更新しても入れない） */
.site-content {
  padding-top: 0 !important;        /* ←ここを完全に固定 */
}

/* サブメニュー位置だけは変数を使って維持 */
.ast-desktop .main-header-menu .menu-item-has-children > .sub-menu {
  top: var(--submenu-top, var(--header-h));
}

.site-content {
  padding-top: var(--header-h);
}

/* === 追加：ホーム以外 (.home ではないページ) にヘッダー分の余白を付与 === */
body:not(.home) .site-content {
  padding-top: var(--header-h) !important;
}

/* トップ以外すべてに header-h を適用（!important で確実に勝たせる） */
body:not(.home) .site-content {
  padding-top: var(--header-h) !important;
}




/*以下参加者のわく*/
/* ========== 顔＋本文ボックス（左1/9画像・右紺色） ========== */
.pbl-profile {
  --avatar-col: 11.111%;          /* 左の幅：全体の1/9 */
  --body-bg: #0b2a4a;             /* 紺色 */
  --body-radius: 14px;
  --gap: 12px;
  --pad: 1rem;

  display: flex;
  align-items: stretch;
  gap: var(--gap);
}

/* 左：顔画像の列（トリミングなし＝等比で収める） */
.pbl-profile__avatar {
  flex: 0 0 var(--avatar-col);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;                   /* 画像の余白（必要なら調整） */
}
.pbl-profile__avatar img {
  max-width: 100%;
  height: auto;                   /* アスペクト比を保持 */
  object-fit: contain;            /* 切り抜かない（収める） */
  border-radius: 0;               /* 円形にしない指定（今回はトリミング無し） */
}

/* 右：本文ボックス（紺色・角丸・白文字） */
.pbl-profile__body {
  flex: 1 1 auto;
  background: var(--body-bg);
  color: #fff;
  border-radius: var(--body-radius);
  padding: var(--pad) calc(var(--pad) * 1.25);
  line-height: 1.8;
}

/* 最初の1行だけ太字（例：年齢／参加回数の行） */
.pbl-profile__body > p:first-child {
  font-weight: 700;
}

/* 細かい可読性向上 */
.pbl-profile__body a { color: #cfe8ff; text-decoration: underline; }
.pbl-profile__body strong { font-weight: 800; }

/* モバイル最適化（必要なら調整） */
@media (max-width: 640px) {
  .pbl-profile {
    gap: 10px;
  }
  .pbl-profile__avatar {
    flex-basis: 22%;              /* スマホは少しだけ広めに */
  }
}