/* over menu ver1.7 */

/*
	20241201 ： tabindex周りを修正、parts.jsに処理用scriptあり。
	20240624 ： .om-bt周りを微修正
	20220727 ： ボタンスタイル（.om-bt）を統合（ver1.5）
	20220212 ： 再整理。#om-offを.om-wrapから出して、ボタンアクションを付けやすいように改定。
 */

/*
<!-- #om → --><input type="radio" name="om" id="om-off" tabindex="-1" checked>
<div class="om-bt-base" tabindex="0"><label for="om-ck-1-on" class="om-bt"><span></span><span></span><span></span></label><label class="om-close" for="om-off" title="メニューを閉じる"><!-- Close Menu --></label></div><!-- >.om-bt-base< -->
<aside class="om-wrap">
	<input type="radio" name="om" id="om-ck-1-on" tabindex="-1">
	<input type="radio" name="om" id="om-ck-2-on" tabindex="-1">
	<input type="radio" name="om" id="om-ck-3-on" tabindex="-1">
	<input type="radio" name="om" id="om-ck-4-on" tabindex="-1">
	<input type="radio" name="om" id="om-ck-5-on" tabindex="-1">
	<input type="radio" name="om" id="om-ck-6-on" tabindex="-1">
	<input type="radio" name="om" id="om-ck-7-on" tabindex="-1"><!--  -->
	<div class="om"><!-- om-has-space om-white -->
<!-- 		<ul class="om-nav om-global">
			<li class="nav-1"><label for="om-ck-1-on">総合</label></li>
			<li class="nav-2"><label for="om-ck-2-on">TEST<span>テスト</span></label></li>
			<li class="nav-3"><label for="om-ck-3-on">LABEL<span>ラベル</span></label></li>
			<li class="nav-4"><label for="om-ck-4-on">TEST-LABEL<span>テスト ラベル</span></label></li>
			<li class="om-close"><label for="om-off">×</label></li>
		</ul>	 -->
		<div class="om-page">
			<div class="logo"><a href="./" tltle="">logo</a></div>
			<!-- menu -->
			<ul>
				<li><label for="om-ck-1-on">1</label></li>
				<li><label for="om-ck-2-on">2</label></li>
				<li><label for="om-ck-3-on">3</label></li>
				<li><label for="om-ck-4-on">4</label></li>
				<li><label for="om-ck-5-on">5</label></li>
				<li><label for="om-ck-6-on">6</label></li>
				<li><label for="om-ck-7-on">7</label></li>
			</ul>
		</div>
<!-- 		<div class="om-page">2<ul><li><label for="om-ck-1-on">1</label></li><li><label for="om-ck-2-on">2</label></li><li><label for="om-ck-3-on">3</label></li><li><label for="om-ck-4-on">4</label></li><li><label for="om-ck-5-on">5</label></li><li><label for="om-ck-6-on">6</label></li><li><label for="om-ck-7-on">7</label></li></ul></div>
		<div class="om-page">3<ul><li><label for="om-ck-1-on">1</label></li><li><label for="om-ck-2-on">2</label></li><li><label for="om-ck-3-on">3</label></li><li><label for="om-ck-4-on">4</label></li><li><label for="om-ck-5-on">5</label></li><li><label for="om-ck-6-on">6</label></li><li><label for="om-ck-7-on">7</label></li></ul></div>
		<div class="om-page">4<ul><li><label for="om-ck-1-on">1</label></li><li><label for="om-ck-2-on">2</label></li><li><label for="om-ck-3-on">3</label></li><li><label for="om-ck-4-on">4</label></li><li><label for="om-ck-5-on">5</label></li><li><label for="om-ck-6-on">6</label></li><li><label for="om-ck-7-on">7</label></li></ul></div>
		<div class="om-page">5<ul><li><label for="om-ck-1-on">1</label></li><li><label for="om-ck-2-on">2</label></li><li><label for="om-ck-3-on">3</label></li><li><label for="om-ck-4-on">4</label></li><li><label for="om-ck-5-on">5</label></li><li><label for="om-ck-6-on">6</label></li><li><label for="om-ck-7-on">7</label></li></ul></div>
		<div class="om-page">6<ul><li><label for="om-ck-1-on">1</label></li><li><label for="om-ck-2-on">2</label></li><li><label for="om-ck-3-on">3</label></li><li><label for="om-ck-4-on">4</label></li><li><label for="om-ck-5-on">5</label></li><li><label for="om-ck-6-on">6</label></li><li><label for="om-ck-7-on">7</label></li></ul></div>
		<div class="om-page">7<ul><li><label for="om-ck-1-on">1</label></li><li><label for="om-ck-2-on">2</label></li><li><label for="om-ck-3-on">3</label></li><li><label for="om-ck-4-on">4</label></li><li><label for="om-ck-5-on">5</label></li><li><label for="om-ck-6-on">6</label></li><li><label for="om-ck-7-on">7</label></li></ul></div>
		<div class="om-page"><iframe src="./files/menu/?v=1.0#p=2" frameborder="no"></iframe></div>
		<div class="om-page"><label for="om-ck-1-on" title="">戻る</label></div>	 -->
		<label class="om-close" for="om-off" title="メニューを閉じる"><!-- Close Menu --></label>
	</div>
</aside><!-- ← #om -->
*/


.om,.om-page{
	top:0;
	left:0;
	right:0;
	bottom:0;
	opacity:0;
	z-index:9990;
	position:fixed;
	pointer-events:none;
	overscroll-behavior: contain;
}
.om{
	background-color:rgba(0,0,0,.7);
	transition-property:opacity;
	transition-duration:.3s;
	transition-timing-function:ease-out;
}
	.om-wrap>input[id$="-on"]:checked~.om{
		opacity:1;
		pointer-events:all;
		transition-duration:.7s;
	}
	.om-wrap>input[id$="-on"]:checked~.om>.om-page{
		pointer-events:all;
	}
.om-page{
	transition-property:transform,opacity;
	transition-duration:.25s;
	transition-timing-function:ease-out;
	transform:translate3d(-90vw,0,0);
	background-color: rgba(255,255,255,.3);
}
	.om.om-white,
	.om-white .om-page {
		background-color: rgba(255,255,255,.8);
	}
@media screen and (min-width:480px){
	.om-page{
		margin-right:auto;
		margin-left:auto;
		max-height:853px;
		max-width:480px;
	}
}

#om-off:where(.om_state_close) ~ .om-wrap {
	content-visibility: hidden;
}
#om-off:not(.om_state_close) ~ .om-wrap {
	content-visibility: visible;
}
.om-wrap>input:checked~.om,
.om-wrap>input:checked~.om>.om-page{
	overscroll-behavior-y: contain;
}
.om-wrap>input:nth-of-type(1):checked~.om>.om-page:nth-of-type(1),
.om-wrap>input:nth-of-type(2):checked~.om>.om-page:nth-of-type(2),
.om-wrap>input:nth-of-type(3):checked~.om>.om-page:nth-of-type(3),
.om-wrap>input:nth-of-type(4):checked~.om>.om-page:nth-of-type(4),
.om-wrap>input:nth-of-type(5):checked~.om>.om-page:nth-of-type(5),
.om-wrap>input:nth-of-type(6):checked~.om>.om-page:nth-of-type(6),
.om-wrap>input:nth-of-type(7):checked~.om>.om-page:nth-of-type(7){
	opacity:1;
	pointer-events:all;
	transform:translate3d(0,0,0);
	transition-duration:.3s;
	z-index:9991;
}
	#om-off:checked~.om-wrap .om-page{
		transform:translate3d(0,-90vh,0);
	}
	.om-wrap>input:nth-of-type(2):checked~.om>.om-page:nth-of-type(1),
	.om-wrap>input:nth-of-type(3):checked~.om>.om-page:nth-of-type(2),
	.om-wrap>input:nth-of-type(4):checked~.om>.om-page:nth-of-type(3),
	.om-wrap>input:nth-of-type(5):checked~.om>.om-page:nth-of-type(4),
	.om-wrap>input:nth-of-type(6):checked~.om>.om-page:nth-of-type(5),
	.om-wrap>input:nth-of-type(7):checked~.om>.om-page:nth-of-type(6){
		transform:translate3d(-30vw,0,0);
	}
	.om-wrap>input:nth-of-type(1):checked~.om>.om-page:nth-of-type(2),
	.om-wrap>input:nth-of-type(2):checked~.om>.om-page:nth-of-type(3),
	.om-wrap>input:nth-of-type(3):checked~.om>.om-page:nth-of-type(4),
	.om-wrap>input:nth-of-type(4):checked~.om>.om-page:nth-of-type(5),
	.om-wrap>input:nth-of-type(5):checked~.om>.om-page:nth-of-type(6),
	.om-wrap>input:nth-of-type(6):checked~.om>.om-page:nth-of-type(7){
		transform:translate3d(30vw,0,0);
	}
	.om-wrap>input:nth-of-type(1):checked~.om>.om-page:nth-of-type(2)~.om-page,
	.om-wrap>input:nth-of-type(2):checked~.om>.om-page:nth-of-type(3)~.om-page,
	.om-wrap>input:nth-of-type(3):checked~.om>.om-page:nth-of-type(4)~.om-page,
	.om-wrap>input:nth-of-type(4):checked~.om>.om-page:nth-of-type(5)~.om-page,
	.om-wrap>input:nth-of-type(5):checked~.om>.om-page:nth-of-type(6)~.om-page{
		transform:translate3d(90vw,0,0);
	}


#om-off,.om-wrap>input[type="radio"]{
	opacity:0;
	position: fixed;
	right:100vw;
}
.om-wrap label{
	cursor:pointer;
}
.om-page>iframe{
	display:block;
	height:100%;
	width:100%;
}
.om>.om-close{
	position:fixed;
	bottom:0;
	z-index:9989;
	display:block;
	box-sizing:border-box;
	width:100%;
	height:100%;
	padding:0;
	background-color:transparent;
	color: transparent;
	text-indent: -200vw;
}


.om>.om-nav{
	display:flex;
	flex-wrap:nowrap;
	list-style:none;
	min-height:55px;
	padding:0;
	position:fixed;
	text-align:center;
	top:0;
	width:100vw;
	z-index:9992;
}
	.om .om-nav>li{
		flex-grow:1;
		min-width:20%;
		width:33%;
	}
		.om .om-nav>li.om-close{
			flex-grow:0;
			min-width:10%;
			width:12%;
		}
		.om .om-nav>li.om-close,
		.om .om-nav>li.om-close label{
			background-color:#999;
			color:#eee;
		}
		.om .om-nav>li.om-close label{
			font-size:20px;
			height:100%;
			line-height:1;
			padding-top:17px;
		}
.om-wrap>input:nth-of-type(1):checked~.om>.om-nav>li:nth-of-type(1) label,
.om-wrap>input:nth-of-type(2):checked~.om>.om-nav>li:nth-of-type(2) label,
.om-wrap>input:nth-of-type(3):checked~.om>.om-nav>li:nth-of-type(3) label,
.om-wrap>input:nth-of-type(4):checked~.om>.om-nav>li:nth-of-type(4) label,
.om-wrap>input:nth-of-type(5):checked~.om>.om-nav>li:nth-of-type(5) label,
.om-wrap>input:nth-of-type(6):checked~.om>.om-nav>li:nth-of-type(6) label,
.om-wrap>input:nth-of-type(7):checked~.om>.om-nav>li:nth-of-type(7) label,
.om .om-nav>li.current label,
.om .om-nav>li.current a{
	background-color:#1c5cbd;
	color:#dfdfdf;
}
.om .om-nav>li label,
.om .om-nav>li a{
	background-color:#eaeaea;
	background-image: linear-gradient(to bottom,#00000000 70%,#00000022);
	box-sizing:border-box;
	color:#666;
	display:block;
	height:100%;
	padding:15px 0 9px;
	text-decoration:none;
	line-height: 1.4;
}
	.om .om-nav > li label > span,
	.om .om-nav > li a > span {
		display: block;
		font-size: 70%;
		line-height: 1;
		opacity: .85;
	}


/*  */
.om-nav~.om-page,
.om-has-space .om-page{
	margin-top:55px;
}
.om-has-space .om-page{
	margin-bottom:70px;
}
.om-page{
	overflow:auto;
	-webkit-overflow-scrolling:touch!important;
}

@media (min-width:756px){
	.om>.om-nav{
		margin:105px 0 0 -240px!important;
		max-width:480px;
		left:50%;
		height:61px;
	}
	.om-nav~.om-page,
	.om-has-space .om-page{
		margin-top:166px;
	}
	.om-page{width:100%;}
}
@media (min-width:960px){
	.om-page{
		opacity:.7;
	}
	.om-page:hover{
		opacity:1;
	}
}
@media (-ms-high-contrast:none),(-ms-high-contrast:active){.om-page{transition-property:opacity;}}
@media (-ms-high-contrast:none),(-ms-high-contrast:active){
	.om{
		z-index:-1;
	}
	.om-wrap>input[id$="-on"]:checked~.om{
		z-index:9990;
	}
}

@media (min-width:756px) and (max-height: 878px) { /* 縦が狭い端末向け */
	.om>.om-nav{
		margin-top: 20px!important;
	}
	.om-nav~.om-page,
	.om-has-space .om-page{
		margin-top: 81px; /* 166px */
	}
	.om-has-space .om-page{
		margin-bottom: 50px;
	}
}

@media (max-height: 640px) { /* キーボード対策 */
	.om>.om-nav{
		min-height: auto;
		height: 45px;
		font-size: .85em;
	}
	.om .om-nav>li.om-close label{
		padding-top: 13px;
	}
	.om .om-nav>li label, .om .om-nav>li a{
		padding-top: 10px;
	}

	.om .om-nav>li.nav-all > label{
		font-size: 1.25em;
		padding-top: 13px;
	}

	.om-nav~.om-page,
	.om-has-space .om-page{
		margin-top: 45px;
	}
	.om-page{
		margin-bottom: 45px;
	}
}
@media (max-height: 500px) { /* キーボード対策 */
	.om-page{
		margin-bottom: 0;
	}
	.om>.om-close {
		height: 0;
		padding: 0;
	}
}
@supports (-ms-ime-align:auto){.om-page{transition-property:opacity;}}
@supports (-ms-ime-align:auto){
	.om{
		z-index:-1;
	}
	.om-wrap>input[id$="-on"]:checked~.om{
		z-index:9990;
	}
}
/*  */


/* ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ */
			/* .om-bt menu >> */
/* __________________________________________________________________ */

:root {
	--om-bt-bc: rgb(130,130,130);/* #222 */
	--om-bt-oc: rgb(220,220,220);
	--om-bt-lh: 3px;
	--om-bt-sp: 12px;
	--om-bt-wx: calc(var(--om-bt-sp) * 2.8); /* 50 */;
	--om-bt-ma: var(--spacing-md, 1rem);
	--om-bt-pd: var(--spacing-sm, .5rem);
	--om-bt-ph: max(var(--om-bt-pd), calc((44px - ((var(--om-bt-sp) + var(--om-bt-pd)) * 2) + var(--om-bt-lh)) / 2 + var(--om-bt-pd)));
	--om-bt-mw: 960px;
	--om-bt-rd: 1.5;
	--hamburger-height: calc((var(--om-bt-sp) * 2) + var(--om-bt-lh) + (var(--om-bt-ma) * 2));
	--hamburger-offset: calc(var(--om-bt-wx,28px) + (var(--om-bt-pd) * 2));
}
.om-bt-base {
	z-index: 9991;
	position: fixed;
	top: calc(var(--om-bt-ma) - var(--om-bt-ph));
	right: max(calc(var(--om-bt-ma) - var(--om-bt-pd)),calc((100vw - var(--max-width,var(--om-bt-mw))) / 2));
	height: max-content;
	overflow: visible;
	/* 4init */
	opacity: 1;
	transition: opacity 500ms ease-out 1200ms;
}
.no-js>body .om-bt-base {
	opacity: 0;
}
.om-bt-base>.om-close{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	cursor: pointer;
	pointer-events:none;
}
#om-off:not(:checked) ~ .om-bt-base > .om-close,
#om-off:not(:checked) ~ * .om-bt-base > .om-close {
	pointer-events:all;
	z-index: 1;
}

#om-off:not(:checked) ~ .om-bt-base > .om-bt::after,
#om-off:not(:checked) ~ * .om-bt-base > .om-bt::after {
	border-color: var(--om-bt-oc);
}
#om-off:not(:checked) ~ .om-bt-base > .om-bt span,
#om-off:not(:checked) ~ * .om-bt-base > .om-bt span {
	background-color: var(--om-bt-oc);
	transition: background-color .5s;
}

/*=============================
.om-bt >> via.https://125naroom.com/web/2958
=============================*/
.om-bt,
.om-bt span {
	display: block;
	transition: all .5s;
}
.om-bt {
	position: relative;
	padding: var(--om-bt-ph) var(--om-bt-pd);
	width: calc((var(--om-bt-pd) * 2) + var(--om-bt-wx)); /* 50 */
	height: calc(((var(--om-bt-sp) + var(--om-bt-ph)) * 2) + var(--om-bt-lh)); /* 20+4+20 */
	cursor: pointer;
	margin: 0 auto;
}
.om-bt span {
	position: absolute;
	left: var(--om-bt-pd);
	right: var(--om-bt-pd);
	height: var(--om-bt-lh); /* 4 */
	background-color: var(--om-bt-bc);
	border-radius: var(--om-bt-lh); /* 4 */
}
.om-bt span:nth-of-type(1) {
	top: var(--om-bt-ph);
}
.om-bt span:nth-of-type(2) {
	top: calc(var(--om-bt-sp) + var(--om-bt-ph)); /* 20 */
}
.om-bt span:nth-of-type(3) {
	bottom: var(--om-bt-ph);
}

.om-bt span:nth-of-type(1) {
	animation: om-l1 .5s forwards;
}
@keyframes om-l1 {
	  0%	{ transform: translateY(var(--om-bt-sp)) rotate(-45deg);	}
	100%	{ transform: translateY(0) rotate(0);	}
}
.om-bt span:nth-of-type(2) {
	animation: om-l2 .5s forwards;
}
@keyframes om-l2 {
	  0%	{ opacity: 0; }
	100%	{ opacity: 1; }
}
.om-bt span:nth-of-type(3) {
	animation: om-l3 .5s forwards;
}
@keyframes om-l3 {
	  0%	{ transform: translateY(calc(var(--om-bt-sp) * -1)) rotate(45deg);	}
	100%	{ transform: translateY(0) rotate(0);	}
}

.om-bt::after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	content: '';
	width: calc(var(--om-bt-sp) * var(--om-bt-rd,1.5)); /* 20*1.5 */
	aspect-ratio: 1/1;
	translate: -50% -50%;
	border-radius: 50%;
	border: var(--om-bt-lh) solid var(--om-bt-bc);
	transition: all .1s;
	opacity: 0;
	pointer-events: none;
}
#om-off:not(:checked) ~ .om-bt-base > .om-bt::after,
#om-off:not(:checked) ~ * .om-bt-base > .om-bt::after {
	animation: om-circle .5s;
}
@keyframes om-circle {
	  0%	{ opacity: 0; width: calc(var(--om-bt-sp) * var(--om-bt-rd,1.5) * .1);	}
	 50%	{ opacity: .3;				}
	100%	{ opacity: 0; width: calc(var(--om-bt-sp) * var(--om-bt-rd,1.5) * 3.5);	}
}

#om-off:not(:checked) ~ .om-bt-base > .om-bt span:nth-of-type(1),
#om-off:not(:checked) ~ * .om-bt-base > .om-bt span:nth-of-type(1) {
	animation: active-om-l1 .5s .5s forwards;
}
@keyframes active-om-l1 {
	  0%	{ transform: translateY(0)    rotate(0);	}
	100%	{ transform: translateY(var(--om-bt-sp)) rotate(-45deg);	}
}
#om-off:not(:checked) ~ .om-bt-base > .om-bt span:nth-of-type(2),
#om-off:not(:checked) ~ * .om-bt-base > .om-bt span:nth-of-type(2) {
	animation: active-om-l2 .5s .5s forwards;
}
@keyframes active-om-l2 {
	  0%	{ opacity: 1; }
	100%	{ opacity: 0; }
}
#om-off:not(:checked) ~ .om-bt-base > .om-bt span:nth-of-type(3),
#om-off:not(:checked) ~ * .om-bt-base > .om-bt span:nth-of-type(3) {
	animation: active-om-l3 .5s .5s forwards;
}
@keyframes active-om-l3 {
	  0%	{ transform: translateY(0)     rotate(0);	}
	100%	{ transform: translateY(calc(var(--om-bt-sp) * -1)) rotate(45deg);	}
}

/*=============================
<< .om-bt
=============================*/

/* 640 */ @media ( max-width: 639px ) {
	:root {
		--om-bt-lh: 2px;	/* for .om-bt> */
		--om-bt-sp: 10px;	/* for .om-bt> */
	}
}

/* ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ */
			/* << .om-bt menu */
/* __________________________________________________________________ */


/* round-action >> */
.om-bt-base.om-style-key-bg {
	z-index: 9990;
}
.om-bt-base.om-style-key-bg::before {
	content: "";
	background-color: var(--col-key);
	aspect-ratio: 1/1;
	border-radius: 75vw;
	width: 0px;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	transition: width 500ms ease-in-out;
}
#om-off:not(:checked) ~ .om-bt-base.om-style-key-bg::before {
	width: calc((100vh + 100vw) * 2);
}
#om-off:not(:checked) ~ .om-bt-base.om-style-key-bg > .om-bt span,
#om-off:not(:checked) ~ * .om-bt-base.om-style-key-bg > .om-bt span {
	transition: background-color .5s;
}
.om-bt-base.om-style-key-bg > .om-bt span {
	transition: background-color 100ms .5s;
}
.om-bt-base.om-style-key-bg ~ .om-wrap > .om {
	background-color: var(--col-transparent);
	color: var(--col-white);
}
.om-bt-base.om-style-key-bg ~ .om-wrap > .om > .om-page {
	background-color: var(--col-transparent);
}
/* << round-action */