@charset "utf-8";
/* # =================================================================
#### 多階層メニュー（PC用）
# ================================================================= */
.global{
	
}
/* 最上階 */
.global .menu{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin : 0 auto;
}
.global .menu > li{
	position : relative;
	width : 100%;
	height : auto;
}
.global .menu > li:hover{
	-webkit-transition : all .5s;
	transition : all .5s;
}
.global .menu > li > a{
	position : relative;
	display : flex;
	align-items : center;
	line-height : 1;
	color : #F25700;
	font-size : clamp(18px, (22 / 1366) * 100vw, 22px);
	font-weight : bold;
	padding : 20px clamp(15px, (30 / 1366) * 100vw, 30px);
	text-decoration : none;
}
.global .menu > li > a:hover{
	background-color : #FFFFFF80;
}
.global .menu > li > a::after{
	content : "";
	position : absolute;
	display : block;
	width : clamp(20px, (30 / 1366) * 100vw, 30px);
	height : clamp(20px, (30 / 1366) * 100vw, 30px);
	background : url(../../images/common/menu-item.png)center / cover no-repeat;
	top : 0;
	right : clamp(15px, (30 / 1366) * 100vw, 30px);
	bottom : 0;
	left : auto;
	margin : auto auto;
}
/* 単階層（ドロップダウン） */
.global .menu > li > ul{
	position : absolute;
	top : 0;
	left : 100%;
	width : 100%;
	background : #FFF;
	pointer-events : none;
	transform : scaleY(0);
	transform-origin : center top;
	transition : all .3s;
	z-index : 1;
}
.global .menu > li:hover > ul{
	transform : scaleY(1);
	pointer-events : auto;
}
.global .menu > li > ul > li{
	position : relative;
}
.global .menu > li > ul > li:before{
	content : "";
	position : absolute;
	display : block;
	width : 89%;
	height : 5px;
	background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Ccircle cx='5' cy='5' r='3' fill='%23F25700' /%3E%3C/svg%3E");
	background-position : left bottom;
	background-size : 10px 5px; /* ここで「丸の大きさ」と「間隔」を制御 */
	background-repeat : repeat-x;
	top : auto;
	right : 0;
	bottom : -2px;
	left : 0;
	margin : auto auto;
}
.global .menu > li > ul > li:last-child::before{
	content : none;
}
.global .menu > li > ul > li > a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	max-height : clamp(60px, (82 / 1366) * 100vw, 82px);
	color : #F25700;
	line-height : 1;
	font-size : clamp(14px, (16 / 1366) * 100vw, 16px);
	padding : clamp(15px, (23 / 1366) * 100vw, 23px) clamp(10px, (30 / 1366) * 100vw, 30px);;
}
.global .menu > li > ul > li > a:hover{
	color : #FFF;
	background : #F25700;
}
/* # =================================================================
#### button（SP用）
# ================================================================= */
.bottom-nav{
	position : fixed;
	display : none;
	width : 50%;
	height : auto;
	z-index : 990;
	right : 0;
	bottom : 0;
	left : 0;
	margin : auto auto;
}
.bottom-nav ul{
	position : relative;
	display : flex;
	flex-wrap : nowrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
.bottom-nav ul li{
	position : relative;
	display : list-item;
	width : 25%;
	height : auto;
}
.bottom-nav ul li > a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.bottom-nav ul li > a > img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* # =================================================================
#### drawer button（SP用ハンバーガー）
# ================================================================= */
.menu-area{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	background-color : #F25700;
}
.drawer-hamburger{
	position : absolute;
	box-sizing : border-box;
	top : 0;
	right : 0;
	bottom : 0;
	left : 0;
	margin : auto auto;
	width : 100%;
	height : auto;
	cursor : pointer;
	z-index : 1100;
	border : none;
}
.drawer-hamburger:hover{
	
}
/* ハンバーガー3本線 */
.drawer-hamburger-icon{
	position : relative;
	display : block;
	width : 50px;
	height : 3px;
	background-color : #FFF;
	transition : all 0.3s ease;
	margin : 0 auto;
	top : 4px;
}
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after{
	content : "";
	position : absolute;
	left : 0;
	width : 50px;
	height : 3px;
	background-color : #FFF;
	transition : all 0.3s ease;
}
.drawer-hamburger-icon::before{ top : -10px; }
.drawer-hamburger-icon::after { top :  10px; }

/* 開閉時アニメーション */
.drawer-hamburger.is-active .drawer-hamburger-icon{
	background-color : transparent;
}
.drawer-hamburger.is-active .drawer-hamburger-icon::before{
	transform : translateY(10px) rotate(45deg);
}
.drawer-hamburger.is-active .drawer-hamburger-icon::after{
	transform : translateY(-10px) rotate(-45deg);
}
.drawer-hamburger-label{
	position : relative;
	font-size : 16px;
	color : #FFF;
	font-weight : bold;
	top : 19px;
}
/* 開いた時 body スクロール禁止
.drawer-open{
	overflow : hidden;
}
/* # =================================================================
#### drawer-nav menu（SPメニュー本体）
# ================================================================= */
body.drawer-open{
	overflow : hidden;
	height : 100vh; /* 画面の高さに固定 */
	position : fixed; /* iOSなどで確実に止める場合 */
	width : 100%;
}
.drawer-nav{
	position : fixed;
	top : 0;
	right : 0;
	width : 100%;
	height : calc(100vh - 112.08px);
	background : #FDE4BD;
	transform : translateY(calc(100% + 112.08px));
	transition : transform 0.3s ease;
	z-index : -1;
}
.drawer-nav.is-active{
	transform : translateY(112.08px);
}


.nav-sp-contanier{
	height : 100%;
	padding-top : 50px;
	padding-bottom : 200px;
	overflow-y : auto; 
	-webkit-overflow-scrolling : touch;
}
.nav-sp-contanier .inner-sp{
	text-align : center;
}
.nav-sp-contanier .inner-sp ul{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	text-align : left;
	margin : 0 auto;
}
.nav-sp-contanier .inner-sp ul li{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 25px;
}
.nav-sp-contanier .inner-sp ul li:last-child{
	margin-bottom : 0;
}
.nav-sp-contanier .inner-sp ul li a{
	display : flex;
	align-items : center;
	line-height : 1em;
	color : #F25700;
	font-size : 16px;
	font-weight : 500;
	padding-left : 1.5em;
}
.nav-sp-contanier .inner-sp ul li a:hover{

}
.nav-sp-contanier .inner-sp ul li a::before{
	content : "";
	position : absolute;
	display : inline-block;
	width : 15px;
	height : 15px;
	border-radius : 50%;
	background-color : #F25700;
	top : 2px;
	left : 0;
}
.nav-sp-contanier .inner-sp ul li a::before {
	content: "";
	display: inline-block; /* 修正：absoluteとtransformを削除 */
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: #F25700;
	flex-shrink : 0;
}

/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1400px
# ================================================================= */
@media screen and (max-width: 1400px){
.global .menu > li > a{
	font-size : 20px;
}
.global .menu > li > a::after{
	width : 20px;
	height : 20px;
}
.global .menu > li > ul{
	width : 85%;
}




}/*** 1400px ***/
/* # =================================================================
#### 1240px
# ================================================================= */
@media screen and (max-width: 1240px){
.global{
	display : none;
}
.bottom-nav{
	display : block;
}
}/*** 1240px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
.bottom-nav{
	width : 100%;
}
.drawer-hamburger-label{
	font-size : clamp(18px, 2.68vw, 24px);
}
}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
.drawer-nav{
	height : calc(100vh - 92.08px);
	transform : translateY(calc(100% + 92.08px));
}
.drawer-nav.is-active{
	transform : translateY(92.08px);
}
.drawer-hamburger-icon{
	width : 43px;
}
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after{
	width : 43px;
}
}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){
.drawer-nav{
	height : calc(100vh - 71.66px);
	transform : translateY(calc(100% + 71.66px));
}
.drawer-nav.is-active{
	transform : translateY(71.66px);
}
.drawer-hamburger-label{
	font-size : 16px;
	top : 12px;
}
.drawer-hamburger-icon{
	width : 33px;
	height : 2px;
	top : 4px;
}
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after{
	width : 33px;
	height : 2px;
}
.drawer-hamburger-icon::before{
	top : -8px;
}
.drawer-hamburger.is-active .drawer-hamburger-icon::before{
	transform: translateY(8px) rotate(45deg);
}
.drawer-hamburger-icon::after{
	top : 8px;
}
.drawer-hamburger.is-active .drawer-hamburger-icon::after {
	transform : translateY(-8px) rotate(-45deg);
}

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/