@charset "UTF-8";
/*
 * ============================================================
 * nav-layout-hamburger.css
 * ============================================================
 * 【使い方】
 * index.html の addstyle.css の読み込み直後に、このファイルを追加する：
 *
 *   <link rel="stylesheet" href="./addstyle.css">
 *   <link rel="stylesheet" href="./nav-layout-hamburger.css"> ← 追加
 *
 * このCSSを読み込むと、画面幅に関係なく常にハンバーガーメニューになります。
 * addstyle.css の「981px以上でPC横並び」スタイルを上書きします。
 *
 * ★BREAKPOINT★ このファイルでは全幅でハンバーガー固定のため
 *   ブレークポイントの変更は不要です。
 *   js/function.js の HAMBURGER_BREAKPOINT を合わせて変更してください。
 *   →「全幅ハンバーガー」にする場合は HAMBURGER_BREAKPOINT を 99999 にします。
 * ============================================================
 */

/*
 * addstyle.css の「981px以上」メディアクエリを打ち消す
 * → PC幅でもハンバーガー仕様にする
 */
@media (61.313rem <= width) {
	 /* 981px以上 を上書き */

	/* ハンバーガーボタンを表示 */
	.site-header .nav_toggle {
		pointer-events: auto;
		display: grid;
		place-items: center;
		z-index: 10;
		position: absolute;
		/* top: 8px;
		right: 8px; */
		top: 30%;
        right: 20%;
		width: 48px;
		height: 48px;
		color: var(--themecolor);
		/* transform: translate(-50%, -25%); */
		border-radius: 999vmax;
        border: 1px solid #fff;
	}
	.site-header .nav_toggle {
        pointer-events: auto;
        display: grid;
        place-items: center;
        z-index: 10;
        position: absolute;
        top: 30%;
        right: 17%;
}
	/* .site-header .nav_toggle.is-open {
		position: fixed;
		top: 4.5%;
        right: 20%;
	} */
	.site-header .nav_toggle.is-open {
        position: fixed;
        top: 4.5%;
        right: 17%;
    }
	.site-header .nav_toggle svg {
		grid-area: 1 / 1;
		position: absolute;
		overflow: visible;
		fill: none;
		/* stroke: currentcolor;
		stroke-width: 2; */
		stroke: #008e99;
		stroke-width: 3;
		stroke-linecap: round;
		transition: opacity .4s var(--easeInOut), transform .4s var(--easeInOut);
	}
	.site-header .nav_toggle .b1 { transform: translateY(-8px); }
	.site-header .nav_toggle .b3 { transform: translateY(8px); }
	@media (any-hover: hover) {
		.site-header .nav_toggle { transition: color .4s; cursor: pointer; }
		/* .site-header .nav_toggle:hover { color: #86c0de; transition-duration: .1s; } */
		.site-header .nav_toggle:hover { color: #067584; transition-duration: .1s; }
	}
	/* CLOSE時 */
	.site-header .nav_toggle.is-open .b1 { transform: rotate(-45deg); }
	.site-header .nav_toggle.is-open .b2 { opacity: 0; transform: rotate(-90deg); }
	.site-header .nav_toggle.is-open .b3 { transform: rotate(-135deg); }

	/* ドロワー仕様（SP時と同じスタイルを適用） */
	.site-header { justify-content: center; justify-items: center; padding-block: 1em; }
	.site-header .nav { z-index: 2; position: fixed;  inset: 0; height: 100%; }
	.site-header .nav::before { content: ""; z-index: -1; position: fixed; inset: 0; opacity: .1; transition: opacity .4s; }
	.site-header .nav-list {
		flex-direction: column;
		row-gap: .3em;
		overflow: auto;
		position: absolute;
		top: 0; right: 0;
		padding: 56px 2em;
		background: #008e99;
		height: 100%;
		clip-path: inset(0);
		/* スクロールバーを消す */
		scrollbar-width: none;
		scrollbar-color: transparent;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
	.site-header .nav-list::-webkit-scrollbar { width: 0; height: 0; }
	.site-header .nav-list::-webkit-scrollbar-thumb,
	.site-header .nav-list::-webkit-scrollbar-track { background: transparent; }
	.site-header .nav-list li { display: grid; grid-template-columns: auto auto 1fr; }

	/* ドロワーアニメーション */
	.site-header .nav-list.is-anim { transition: clip-path .4s var(--easeInOut); }
	.site-header .nav:not(.is-open) { pointer-events: none; }
	.site-header .nav:not(.is-open)::before { opacity: 0; }
	.site-header .nav-list:not(.is-open) { clip-path: inset(0 0 0 100%); }

	/* サブメニュー（高さアニメーション方式に変更） */
	.site-header .nav-sub {
		position: static; /* PC時のabsoluteを解除 */
		clip-path: none;  /* PC時のclip-pathを解除 */
		grid-area: 2 / 1 / 3 / 4;
		overflow: hidden;
		pointer-events: none;
		height: 0;
		padding: 2px;
		padding-left: 1em;
		background-color: transparent; /* PC時の背景色を解除 */
		top: auto;
		z-index: auto;
	}

	/* ===要設定: サブメニューの項目数に合わせて --openHeight を調整=== */
	/* calc(3em * 項目数 + 4px) で計算 */
	.site-header .nav-sub { --openHeight: calc(3em * 2 + 4px); }
	.site-header .nav-list [href="#news"] ~ .nav-sub,
	.site-header .nav-list [href="#company"] ~ .nav-sub { --openHeight: calc(3em * 3 + 4px); }
	.site-header .nav-list [href="#service"] ~ .nav-sub,
	.site-header .nav-list [href="#blog"] ~ .nav-sub { --openHeight: calc(3em * 4 + 4px); }

	/* hoverによるサブメニュー展開は使わない → クリックのみ（JSで制御） */
	/* .is-open を付けてドロップダウン */
	.site-header .nav-sub.is-anim { transition: height .4s var(--easeInOut); }
	.site-header .nav-sub.is-open { pointer-events: auto; height: var(--openHeight); }
	.site-header .nav-list li.is-active svg { color: #86c0de; }

	/* PC横並び用スタイルを無効化 */
	.site-header .nav-list > li > a { height: auto; display: block; color: #fff; position: relative;}

	.site-header .nav-list li { display: grid;
		width: 30%;
        margin: 0 auto !important;}
	.site-header .nav-list > li:last-child { margin-right: 0; }

	.nav-list li.flex-box {
		display: inline-block;
		width: 30%;
		margin: 0 auto;
	}
	.nav-list .flex-box .link-btn-frame {
		width: 70%;
		margin: 1rem;
	}
	.nav-list .flex-box .link-btn-frame:last-child {
		margin-top: 1.5rem;
	}
	.nav-list .flex-box .link-btn-frame .link-btn {
		border: 1px solid #fff;
		border-radius: 999vmax;
		display: inline-block;
		width: 100%;
		text-align: center;
		padding: 1rem 1rem;
		color: #fff;
		font-weight: bold;
	}
	.nav-list .flex-box .link-btn-frame .link-btn.btn2 {
		padding: 2rem 1rem;
		background-color: #fff;
		color: #48aab7;
	}
}