@charset "UTF-8";
/*----------------------header--ヘッダー--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.to-content{z-index:2;position:relative;}
header{padding:0;margin:0;clear:both;float:left;width:100%;}
.header-in{margin:0 auto;clear:both;padding:0;max-width:var(--site-width);}

/*----------------------------------ナビ-------------------------------------
----------------------------------------------------------------------------------------------*/
.navi-top{display:none;}
.fixed{clear:both;float:left;position:fixed;width:100%;top:0;z-index:1000 !important;}

.top-global-nav{display:flex;align-items:center;justify-content:center;background:var(--navi);border-bottom:var(--nav-border-width,0px) solid var(--nav-border-color,var(--navi-font));}
.top-global-nav:hover{background:var(--navi);}
.top-nav-box{width:100%;margin:0 auto;display:flex;align-items:center;justify-content:flex-start;}
.top-nav-box > div:nth-child(1){}
.top-nav-box > div:nth-child(2){max-width:var(--site-width);padding:0 1%; }
.top-nav-box > div:nth-child(1){}

.nav-logo{width:20%;max-width:300px;}
.nav-logo a{padding:5% 15%;clear:both;float:right;width:100%;}
.nav-logo a img{height: 60px;}

/*------ ドロップダウン(dd)・メガドロップダウン(mdd) のCSSは header-nav-dd.css / header-nav-mdd.css に分離。
         pcナビ種別に応じて functions.php で条件付き enqueue（共通chrome・fs・sticky・@media はこの base に残置）。------*/
/* dd/fs：アイコン・画像 */
.nav__col-icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:18px;line-height:1;color:inherit;}
.nav__col-img{display:inline-flex;align-items:center;flex-shrink:0;width:24px;height:24px;overflow:hidden;border-radius:4px;}
.nav__col-img img{width:100%;height:100%;object-fit:cover;display:block;}
/* dd/fs：タイトル属性（サブタイトル） */
.nav__attr-title{display:block;font-size:14px;font-weight:400;opacity:.7;margin-top:2px;}
.menu-top-navi-container .menu li a .nav__attr-title{font-size:14px;float:none;width:auto;clear:none;}
/* 2・3階層目のサブテキスト・アイコン */
.menu-top-navi-container .menu__second li a .nav__attr-title{font-size:14px;float:none;width:auto;clear:none;}
.menu-top-navi-container .menu__second li a .nav__col-icon,
.menu-top-navi-container .menu__second li a .nav__col-img{float:none;width:auto;clear:none;display:inline-flex;vertical-align:bottom;margin-right:4px;font-size:var(--font-size);}
/* dd 1階層目：アイコンに float/width リセット（menu li span の一括指定を上書き） */
.menu-top-navi-container .menu > li > a .nav__col-icon,
.menu-top-navi-container .menu > li > a .nav__col-img{float:none;width:auto;clear:none;display:inline-flex;vertical-align:bottom;margin-right:4px;}
.menu-top-navi-container .menu > li > a .nav__col-icon{font-size:var(--font-size);}

/*------フルスクリーンメニュー-----*/
.fs-nav-trigger span{display:block;width:28px;height:2px;background:var(--navi-font);transition:transform .3s ease,opacity .3s ease;}
.fs-nav-overlay{position:fixed;inset:0;z-index:9999;background:var(--navi);display:flex;flex-direction:column;justify-content:center;align-items:center;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;}
.fs-nav-overlay.is-open{opacity:1;visibility:visible;}
.fs-nav-close{position:absolute;top:30px;right:30px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:0;}
.fs-nav-close span{display:block;width:28px;height:2px;background:var(--navi-font);position:absolute;top:50%;left:50%;}
.fs-nav-close span:first-child{transform:translate(-50%,-50%) rotate(45deg);}
.fs-nav-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}
/* 1階層目 */
.fs-nav-list{list-style:none;padding:0;margin:0;text-align:center;}
.fs-nav-list > li{position:relative;transition:background .2s;}
.fs-nav-list > li:hover,.fs-nav-list > li.is-sub-open{background:var(--navi-hover, rgba(255,255,255,.08));}
.fs-nav-list > li > a{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:10px;color:var(--navi-font);font-size:22px;font-weight:600;padding:16px 60px;transition:color .2s;position:relative;}
.fs-nav-list > li > a:hover,.fs-nav-list > li.is-sub-open > a{color:var(--navi-hover-font);}
.fs-nav-list > li > a .nav__col-icon{font-size:22px;float:none;width:auto;display:inline-flex;align-items:flex-end;}
.fs-nav-list > li > a .nav__col-img{width:22px;height:22px;float:none;display:inline-flex;}
.fs-nav-list > li > a .nav__attr-title{font-size:14px;float:none;width:auto;}
/* アコーディオントリガー（子あり項目） */
.fs-nav-list > li.menu-item-has-children > a{padding-right:80px;}
.fs-sub-toggle{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:30px;height:30px;background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;}
.fs-sub-toggle::before,.fs-sub-toggle::after{content:'';display:block;width:12px;height:2px;background:var(--navi-font);position:absolute;transition:transform .3s;}
.fs-sub-toggle::before{transform:rotate(0deg);}
.fs-sub-toggle::after{transform:rotate(90deg);}
.fs-sub-toggle.is-open::after{transform:rotate(0deg);}
/* 2階層目（グローバルの.menu__secondを上書き） */
.fs-nav-list .menu__second{list-style:none;padding:0;margin:0;display:none;position:static;visibility:visible;opacity:1;background:var(--navi-back-02, transparent);box-shadow:none;width:auto;}
.fs-nav-list .menu__second > li{transition:background .2s;position:relative;}
.fs-nav-list .menu__second > li:hover{background:var(--navi-hover02, rgba(255,255,255,.08));}
.fs-nav-list .menu__second > li > a{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:10px;color:var(--navi-font-02, var(--navi-font));font-size:16px;font-weight:400;padding:10px 40px;opacity:.8;transition:opacity .2s,color .2s;position:relative;}
.fs-nav-list .menu__second > li:hover > a{opacity:1;color:var(--navi-hover-font02, var(--navi-hover-font));}
.fs-nav-list .menu__second > li > a .nav__col-icon{font-size:16px;float:none;width:auto;display:inline-flex;align-items:flex-end;}
.fs-nav-list .menu__second > li > a .nav__attr-title{font-size:14px;float:none;width:auto;}
/* 3階層目 */
.fs-nav-list .menu__second .menu__second{padding-left:20px;background:var(--navi-back-03, transparent);}
.fs-nav-list li.fs-no-sub > .menu__second{display:none !important;}
.fs-nav-list li.fs-no-sub > .fs-sub-toggle{display:none !important;}
.fs-nav-list .menu__second .menu__second > li > a{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:10px;color:var(--navi-font-03, var(--navi-font));font-size:14px;padding:8px 40px;opacity:.65;transition:opacity .2s,color .2s,background .2s;}
.fs-nav-list .menu__second .menu__second > li > a:hover{color:var(--navi-hover-font03, var(--navi-hover-font));opacity:1;background:var(--navi-hover03, rgba(255,255,255,.06));}
.fs-nav-list .menu__second .menu__second > li > a .nav__col-icon{font-size:14px;float:none;width:auto;display:inline-flex;align-items:flex-end;}
.fs-nav-list .menu__second .menu__second > li > a .nav__attr-title{font-size:12px;float:none;width:auto;}
/* nav-right：検索＋fsトリガーをまとめた右端エリア */
.nav-right{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0;}
/* dd：中央揃えに戻す＋メニュー直後に配置 */
.is-dd-nav .top-nav-box{justify-content:center;}
.is-dd-nav .nav-right{margin-left:0;}
/* mdd：mddナビエリアとの間に余白、右端にもロゴと同程度の余白 */
.is-mdd-nav .nav-right{margin-left:0;padding-left:20px;padding-right:30px;}
.fs-nav-trigger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:0;}
/* dd/mdd：PC では非表示、SPのみ表示（fs は常時表示） */
.is-dd-nav .fs-nav-trigger,.is-mdd-nav .fs-nav-trigger{display:none;}

/*------フルスクリーン：オーバーレイ内検索（dd/mddと同デザイン）-----*/
.fs-nav-search{width:100%;max-width:480px;margin-top:40px;padding:0 20px;box-sizing:border-box;}
.fs-nav-search form{display:flex;align-items:center;border:1px solid var(--navi-font);border-radius:30px;overflow:hidden;}
.fs-search-field{flex:1;background:none;border:none;padding:10px 16px;color:var(--navi-font);font-size:14px;outline:none;}
.fs-search-field::placeholder{color:var(--navi-font);opacity:.5;}
.fs-search-submit{background:none;border:none;padding:10px 14px;color:var(--navi-font);font-size:15px;cursor:pointer;transition:opacity .2s;}
.fs-search-submit:hover{opacity:.7;}

/*------全ナビ共通 上部固定追従-----*/
#global-nav{position:fixed;top:0;left:0;width:100%;z-index:1000;transition:box-shadow .3s ease;}
#global-nav.is-scrolled{box-shadow:0 2px 12px rgba(0,0,0,.12);}
#global-nav.is-scrolled .nav-logo a img{height:40px;transition:height .3s ease;}
#global-nav.is-scrolled .menu-top-navi-container .menu > li a{padding:10% 2% 14%;}
#global-nav.is-scrolled .mdd__list > li > a.mdd__top-link{min-height:60px;padding:10px 4%;}

/*----------search-検索------------------------------------
------------------------------------------------------------------------------------------------- */
/* 検索コンテナの配置（ヘッダーに合わせて調整してください） */
.header-search-container {
    position: relative;
    display: inline-block;
}
.is-fs-nav .header-search-container { display: none; }
/* dd/mdd：検索フォームを#global-nav（sticky）基準でヘッダー下に展開 */
.is-dd-nav .header-search-container,.is-mdd-nav .header-search-container{position:static;}
.is-dd-nav .search-form-inner,.is-mdd-nav .search-form-inner{top:calc(100% + 2px);right:0;}

/* 検索アイコンボタン */
.search-icon-btn{background:none;border:none;font-size:24px;cursor:pointer;color:var(--navi-font);padding:0 10px;transition:opacity .2s;line-height:1;}
.search-icon-btn:hover{opacity:.7;}

/* 検索フォームドロップダウン */
.search-form-inner{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:var(--navi);padding:16px;box-shadow:0 6px 20px rgba(0,0,0,.2);border-radius:8px;display:none;z-index:10000;}
.search-form{display:flex;align-items:center;border:1px solid var(--navi-font);border-radius:30px;overflow:hidden;}
.search-field{flex:1;background:none;border:none;padding:10px 16px;color:var(--navi-font);font-size:14px;outline:none;}
.search-field::placeholder{color:var(--navi-font);opacity:.5;}
.search-submit{background:none;border:none;padding:10px 14px;color:var(--navi-font);font-size:15px;cursor:pointer;transition:opacity .2s;}
.search-submit:hover{opacity:.7;}

/* SPドロワーはデフォルト非表示、768px以下で表示 */
@media only screen and (max-width:768px){
.slider-in,.hdnvpc{display:none!important;}

/* ==========================================================================
   SP：#global-nav を固定ヘッダーバーとして表示
   ========================================================================== */
#global-nav {
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.top-global-nav { height: 60px; }
.top-nav-box {
  height: 60px;
  padding: 0 15px;
  max-width: 100% !important;
  justify-content: space-between;
}
.nav-logo { width: auto; }
.nav-logo a img { height: 36px; width: auto; }

/* PCメニューリストはSPで非表示 */
.menu-top-navi-container,
.mdd-nav { display: none !important; }

/* 検索フォームはSPで非表示（fs overlay内で対応） */
.header-search-container { display: none !important; }

/* fs-nav-trigger を全ナビタイプでSPに表示 */
.nav-right .fs-nav-trigger { display: flex !important; }
} /* end @media max-width:768px */

/* ナビ内ロゴ表示：出す/出さないは「ナビ内ロゴを表示」(is-pc-nav-logo)だけ。ONで表示・OFFで display:none。
   「ナビ内ロゴ遅延」(is-nav-logo-reveal)は“出し方”のみ担当で表示可否には関与しない（header-behavior.css ④ が追従時に opacity 制御）。
   SP側は is-sp-nav-logo。 */
@media only screen and (min-width:769px){ body:not(.is-pc-nav-logo) .nav-logo{display:none !important;} }
@media only screen and (max-width:768px){ body:not(.is-sp-nav-logo) .nav-logo{display:none !important;} }