@charset "utf-8";
/**
 * ============================================================================
 * com-core-layout.css
 * ============================================================================
 * 
 * 【目的】
 * サイト全体のナビゲーションとヘッダーのレイアウトを制御する。
 * レスポンシブメニュー、スクロール追従ナビ、ハンバーガーメニューを実装。
 * 
 * 【使用ページ】
 * 全ページ（必須）
 * 
 * 【依存関係】
 * - 必須: com-core-reset.css, com-core-base.css
 * - JavaScript: /js/nav.js (スクロール追従、ハンバーガーメニュー制御)
 * 
 * 【読み込み順序】
 * 3番目（com-core-reset.css, com-core-base.css の後）
 * 
 * 【主要な機能】
 * 1. グローバルナビゲーション (#global-nav)
 *    - Flexboxで横並び、均等配置
 *    - グラデーション背景、ホバーエフェクト
 * 
 * 2. スクロール追従ナビ (#top-head.fixed)
 *    - 下にスクロールすると上部に固定
 *    - 半透明白背景
 *    - ミニロゴ表示
 * 
 * 3. ハンバーガーメニュー (800px以下)
 *    - #nav-toggle: 三本線アイコン
 *    - クリックで #global-nav がスライド表示
 *    - .open クラスで状態管理
 * 
 * 4. ミニロゴ表示制御 (.minilogo)
 *    - 通常時: 非表示
 *    - スクロール追従時: 表示
 *    - 800px以下: 常に表示
 * 
 * 【レスポンシブブレークポイント】
 * - 1060px: タブレット対応
 *   - ナビ文字サイズ縮小
 *   - ミニロゴ表示
 *   - ヘッダーロゴ非表示
 * 
 * - 800px: モバイル対応
 *   - ハンバーガーメニュー表示
 *   - グローバルナビを画面外に配置
 *   - #mobile-head 表示
 * 
 * - 702px: 極小画面対応
 *   - ヘッダーロゴ調整
 * 
 * 【JavaScriptとの連携】
 * nav.js が以下のクラスを動的に追加・削除します:
 * 
 * - body.sticky: スクロール時に追加
 *   → #bodymenu のスクロール追従を制御（com-pages-nottop.css）
 * 
 * - #top-head.fixed: スクロール時に追加
 *   → ナビゲーションを上部に固定
 * 
 * - .open: ハンバーガーメニュークリック時にトグル
 *   → グローバルナビの表示/非表示を制御
 * 
 * 【注意事項】
 * ⚠️⚠️⚠️ このファイルは非常に複雑なカスケーディングを含みます ⚠️⚠️⚠️
 * 
 * - メディアクエリが3段階（1060px, 800px, 702px）あり、
 *   後のメディアクエリが前のスタイルを上書きします
 * 
 * - .fixed クラスと .open クラスの状態管理が重要です
 * 
 * - z-index の値（999, 10000）は他の要素との重なりに影響します
 *   - #top-head: z-index: 999
 *   - #mobile-head: z-index: 999
 *   - #nav-toggle: z-index: 101
 * 
 * - 変更時は全ての画面サイズ（1920px, 1060px, 800px, 375px）と
 *   全ての状態（通常/固定/ハンバーガー開閉）で動作確認が必須です
 * 
 * - 特に800px以下は、最初からfixed状態のような動作をするため、
 *   固定版と通常版を同じように指定する箇所が多くあります
 * 
 * 【開発者コメント（元のコードより）】
 * 「ファイル名navの割にheaderやめにゅなび関係
 *  画面サイズの状況に応じて上書きしていくので全体の把握が困難
 *  カスケーディングの罠」
 * 
 * 【変更履歴】
 * 2025-10-20: nav.css から改名・充実したドキュメント追加
 * 
 * ============================================================================
 */


/* ============================================================================
   .inner - コンテナ
   ----------------------------------------------------------------------------
   ヘッダー内の要素を中央寄せするためのコンテナ。
   
   【スタイル】
   - 幅: 1080px (固定)
   - 高さ: 56px
   - 中央寄せ
   - clearfixを適用
   
   【レスポンシブ】
   1060px以下: width: 100% に変更
   ============================================================================ */

.inner {
	width: 1080px;
	margin: 0 auto;height:56px;
}
.inner:after {
	content: "";
	clear: both;
	display: block;
}


/* ============================================================================
   #top-head - ヘッダーエリア（通常時）
   ----------------------------------------------------------------------------
   【通常時の動作】
   - position: static (通常のフロー)
   - top: -100px (初期位置、JavaScriptで調整される可能性あり)
   - z-index: 999
   
   【ミニロゴ】
   通常時は display: none で非表示
   ============================================================================ */

#top-head {
  font-size:0.9em;
  top: -100px;
  position:static;
  margin:0 auto 0;
  padding: 0;
  line-height: 1;
  text-align:center;
  z-index: 999;
}
#top-head a,
#top-head {
	color: #fff;
	text-decoration: none;
}
#top-head .inner {
	position: relative;
}
/* 通常時見せないミニロゴを消去 */
#top-head .minilogo {
  display:none;
  float: left;
}


/* ============================================================================
   #global-nav - グローバルナビゲーション（通常時）
   ----------------------------------------------------------------------------
   【レイアウト】
   - Flexbox で横並び
   - justify-content: space-around で均等配置
   
   【デザイン】
   - グラデーション背景 (linear-gradient)
   - border-radius: 10px
   - box-shadow: inset で内側の影
   
   【ホバーエフェクト】
   - 色変化、テキストシャドウ
   - transition: all 300ms cubic-bezier
   ============================================================================ */

#global-nav{
 box-shadow: 0px -2px 15px -8px #fff;
}
#global-nav ul {
 display: flex;
 width: inherit;
 justify-content: space-around;
 list-style: none;
 bottom: 0;
 font-size: 1em;
 margin: 0 auto 0;
 padding: 0;
 overflow: hidden;
 background: transparent;
}
#global-nav ul li {
  position: relative;
}
/* フロートかつセンターここまで。以下装飾 */
#global-nav ul li a {
 text-align: center;
 letter-spacing: 8px;
 padding: .6em 0 .6em 8px;
 box-shadow: rgba(255, 255, 255, 0.4) 0 0px 0px 1px inset;
 transition: all 300ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
 display: inline-block;
 /* margin: 20px auto; */
 text-decoration: none;
 border-radius: 10px;
 background: linear-gradient(to bottom, #ffeef9, #f88);
 color:black;
}
/* 通常時のナビ */
#global-nav ul li a:hover {
 color: #fcf;
 transition: color 1.0s ease-in-out;
 text-shadow: 0px 0px 3px #000, 0px 0px 2px #000, 0px 0px 2px #000;
 background: linear-gradient(to top, #ddccfc, #f88);
 transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
 box-shadow: rgba(255, 255, 255, 0.8) 0 0px 0px 60px inset, #fff 0 0 2px inset;
}
#global-nav ul li a:active {
 opacity: 0.5;
 color: black;
}


/* ============================================================================
   #top-head.fixed - スクロール追従ナビ（1060px以上）
   ----------------------------------------------------------------------------
   JavaScriptによって #top-head に .fixed クラスが追加されると発動します。
   
   【動作】
   - position: fixed で上部に固定
   - width: 100% で画面幅いっぱい
   - height: 44px に縮小
   - 半透明白背景 rgba(255,255,255,.7)
   - ミニロゴを表示
   
   【アニメーション】
   transition: top 0.55s ease-in でスムーズに表示
   
   【ナビゲーション】
   - フォントサイズ縮小 (0.75rem)
   - letter-spacing: normal
   - パディング縮小
   ============================================================================ */

#top-head.fixed {
  margin: 0;
  top: 0;
  position: fixed;
  width:100%;
  height: 44px;
  background: #fff;
  background: rgba(255,255,255,.7);
  transition: top 0.55s ease-in;
  padding-top:0;
  font-size:1em;
}
#top-head.fixed .inner {
  width:1060px;
  margin:0 auto 0;
}
#top-head.fixed .minilogo {
 /*ついてくるときに見せるミニロゴを可視化させる。このミニロゴ部分のみ可視化させる指定であることに注意、トグルなどは非表示のままだ*/
 color: #333;
 display: inline;
}
#top-head.fixed #global-nav ul {
 padding-top: .3rem;
 min-width: 32em;
 right: 0;
 bottom: 1em;
}
#top-head.fixed #global-nav ul li a {
 color: #333;
 padding: 0 0.5em;
 line-height: 1;
 letter-spacing: normal;
 font-size: 0.75rem;
}
/* Transition */
#top-head,
#top-head .logo,
#top-head .minilogo,
#global-nav ul li,
#global-nav ul li a {
 transition: all 0.9s ease;
}


/* ============================================================================
   #nav-toggle - ハンバーガーメニュー（三本線）
   ----------------------------------------------------------------------------
   800px以下で表示されるハンバーガーメニューアイコン。
   
   【構造】
   #nav-toggle
   └─ div
      ├─ span (1本目)
      ├─ span (2本目)
      └─ span (3本目) + "open"テキスト
   
   【アニメーション】
   .open クラスが付与されると:
   - 1本目: top: 11px, rotate(315deg)
   - 2本目: width: 0 (消える)
   - 3本目: top: 11px, rotate(-315deg)
   → ×印に変化
   
   【初期状態】
   display: none (800px以上では非表示)
   ============================================================================ */

#nav-toggle {
 display: none;
 position: absolute;
 right: 12px;
 top: 14px;
 width: 10%;
 height: 36px;
 cursor: pointer;
 z-index: 101;
}
#nav-toggle div {
 position: relative;
}
#nav-toggle span {
 display: block;
 position: absolute;
 height: 4px;
 width: 100%;
 background: #666;
 left: 0;
 color: black;
 font-size: 10px;
 transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
	top: 0;
}
#nav-toggle span:nth-child(2) {
	top: 11px;
}
#nav-toggle span:nth-child(3) {
	top: 22px;line-height: 2.0
}/*トグルの棒123*/
#nav-toggle span:nth-child(3)::after {
	content:"open";top: 25px;
}/*トグルの棒3のうしろにopen追加*/
#top-head.open #nav-toggle span:nth-child(3)::after {
	content:"";
}/* openしたらcontent""でopenの文字削除 */


/* ============================================================================
   レスポンシブ: 1060px以下（タブレット）
   ----------------------------------------------------------------------------
   【変更内容】
   1. .inner の幅を100%に
   2. .header-inner を非表示（通常のロゴ2つ）
   3. ミニロゴを表示（左上に絶対配置）
   4. ナビのフォントサイズ・パディング調整
   
   【注意】
   この設定は800px以下でもカスケーディングされます
   ============================================================================ */

@media screen and (max-width: 1060px) {
  /*1060以下横幅ディスプレイの表示は、グローバルナビミニ版を上部表示し、
  追随メニューもmini版、ロゴもミニ版とする　800以下もカスケーディングされる
  タブレットを想定*/
#top-head.fixed .inner,.inner {
  width:100%;/*1060以上では、　これは1060と指定してある　*/
  margin:0 auto 0;
  height:50px;
}
#global-nav ul {
/*  display:inherit;
  width: 100%;*/
}
article {
  padding:0;
}


.header-inner{
  visibility:hidden;
  height:60px;
  border-top:none;
}/* 通常時のlogo2つ不可視にし高さ指定。visibilityこれだけでは内包物があるため高さ指定は無意味。内包物をdisplay noneにしないと */

#top-head.fixed #global-nav ul{
  position:absolute;
  right:0;
  bottom:1em;
  min-width: 28em;
}
#global-nav ul li a {
 letter-spacing: inherit;
 padding: 1.5vh 1vw;
}

/*ついてくるときは1060以上版の、フォントを小さくしたもの、横パディングも小に。これのみで対処可*/
#top-head.fixed #global-nav ul li a { 
 font-size: 0.7rem;
 padding: 0 2px;
}

#mobile-head .minilogo{
  /*1060以下時では、
  ついてくるときと同じ仕様であるが、通常時は画面左上に絶対配置して表示する　-50pxにすることによってグローバルナビミニ版より一段上にする*/
position: absolute;
  top: -50px;
  z-index: 2;
  color: #333;
  display:inline;
  left:0;
}
.fixed #mobile-head .minilogo {
 /*ついてくるときはミニロゴを固定mobile-headの中に左上固定に絶対配置*/
 top: 0px;
}
}/*1060　以下　指定　ここまで　　800以下は　以下の記述で上書きする*/


/* ============================================================================
   レスポンシブ: 800px以下（モバイル）
   ----------------------------------------------------------------------------
   【重要】
   この画面サイズでは最初からfixed状態のような動作をします。
   したがって、fixed版と通常版を同じように指定する箇所が多くあります。
   
   【変更内容】
   1. #top-head を最初から position: fixed に
   2. #mobile-head を表示（半透明白背景、100vw幅）
   3. #nav-toggle を表示
   4. #global-nav を画面外（top: -100vh）に配置
   5. .open クラスで #global-nav を top: 57px に移動
   6. ナビを縦並び、フォントサイズ5vh
   
   【ハンバーガーメニューの動作】
   通常時: #global-nav は top: -100vh (画面外)
   .open時: #global-nav は top: 57px (#mobile-headの下)
   ============================================================================ */

@media screen and (max-width: 800px) {/*800以下の横幅ディスプレイの表示は
  トグルを表示させ、グローバルナビを不可視の位置にとばしている。
グローバルナビは縦羅列のメニューに姿を変える
  */
article {width:100%;padding:0;}
/*要注意次項　この画面サイズは、ある程度下にいくとfixed版を出すという今までと
違い最初からfixed状態のようなもの。
したがってfixed版がカスケードされておかしなことにならないように、fixed版と通常版を同じように指定する箇所がおおくある

いま問題としてfixed版のメニューがおかしいのを解決したい
*/
#top-head {
 top: 0;
 padding:0;
 position: fixed;
 margin-top: 0;
}
#top-head .fixed	.inner {/*これまでinnerにpadding をつけたことはないようだが…消せるかもしれない*/
 width:inherit;
 padding:0;
}/*以上2つは一番上に固定を決定するだけの意味、いじらない*/


#top-head .inner {padding:0;}
#top-head #mobile-head .minilogo {/*ミニロゴは今回はblockにしている。理由は不明inlineならカスケードされる　ポジションもか？*/
  display:block;
  position:absolute;
}
#top-head.fixed .minilogo,
#top-head .minilogo {
 position: absolute;
 left: 1px;
 top: 6px;
 color: #333;
}
#top-head.fixed .minilogo img,
#top-head .minilogo img{
border-radius:30px;
}
	/* 固定を上書き。以下、画面小さいときプラス固定を上書きしながらの指定 */
#top-head.fixed {/*
 background:transparent;*/
}

/* トグルのあるmobile-headは800以下で初登場。横幅画面いっぱいにするにはvwを使う方法しか見当たらない.
背景を半透明白色とする このエリアが出てくるのはここから*/
#mobile-head {
 background: #fff;
 height: 56px;
 z-index: 999;
 position: relative;
 background-color: rgba(255, 255, 255, 0.7);
 width: 100vw;
}

#global-nav {
 position: absolute;
 /*開いてないときは画面外1500に配置、だったがvhが良さそう*/
 top: -100vh; 
 background: transparent;
 width: 100vw;
 text-align: center;
 transition: .3s ease-in-out;
}
#global-nav ul,
#top-head.fixed #global-nav ul,
#top-head.open #global-nav ul {
 position: static;
 right: 0;
 bottom: 0;
 width: 98vw;
 display: block;
  min-width: inherit;

}
#global-nav ul li {
 float: none;
 position: static;
}

#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
 display: block;
 color:#000;
 padding:2vh 0;
 font-size:5vh;
 font-weight:bold;
 letter-spacing: 0;
 line-height: 1
}
#top-head.fixed #global-nav ul li a {font-size: 5vh}
#top-head #global-nav ul li a:hover,
#top-head.fixed #global-nav ul li a:hover {
  letter-spacing:5px;
  color:#fff;
  background-color:#ffdeef;
}

	#nav-toggle {
		display: block;
	}
	/* #nav-toggle 切り替えアニメーション */
	.open #nav-toggle span:nth-child(1) {
		top: 11px;
		transform: rotate(315deg);
	}
	.open #nav-toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.open #nav-toggle span:nth-child(3) {
		top: 11px;
		transform: rotate(-315deg);
	}/*トグルの棒の回転*/
	/* #global-nav スライドアニメーション */
	.open #global-nav {
		/* アニメーションで変化する方法はこれ。#global-nav top + #mobile-head height 
		-moz-transform: translateY(556px);
		transform: translateY(calc(500px + 500px));*/
	}/* この数字がトグルクリックでずれる数字 */
	.open #global-nav {top:57px;left: inherit;
		/* ぱっと出すならこの方法 */
	}/* この数字がトグルクリックでずれる数字 メニューの幅分にする。 */


}/* 800px以下ここまで */


/* ============================================================================
   レスポンシブ: 702px以下（極小画面）
   ----------------------------------------------------------------------------
   ヘッダーロゴの微調整
   ============================================================================ */

@media only screen and (max-width: 702px) {
.header-inner {
 margin: 0;
 padding: 0;
}
.logo {
 text-align: center;
 margin: 0
}

.tl_img {
 margin: 0;
 padding: 0;
 border-top: 3px double #f07f89;
 border-bottom: 10px solid #f07f89
}
.tl_img02 {
 margin-top: -4px;
}
}