@charset "utf-8";

html{
	font-size: 16px;
}

*,
*::before,
*::after{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face {
	font-family: 'NotoSans';
	src: url(../fonts/NotoSansJP-VariableFont_wght.ttf);
}

@font-face {
	font-family: 'ShipporiM';
	src: url(../fonts/ShipporiMincho-Regular.ttf);
}

/* body{
	width: 100%;
	font-family: "NotoSans","Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", yu-mincho-pr6, serif;
	color: #333;
	letter-spacing: 0.1em;
	overflow-x: hidden;
}

li{
	list-style: none;
}

ol > li{
	list-style: decimal-leading-zero;
}

img{
	width: 100%;
	vertical-align: bottom;
}

a{
	color: #333;
	text-decoration: none;
	transition: all 0.3s;
	opacity: 1;
}

a:hover{
	opacity: 0.6;
}

h1{
	margin: 0;
} */

/* ---------変数・汎用クラス--------- */
/* ●変数 */
	/* PC用 */
:root{
	/* フォントサイズ用 */
	--header-font-xxs: 0.625rem;  /* 10x */
	--header-font-xs: 0.75rem;    /* 12px */
	--header-font-s:  clamp(0.75rem, 0.666rem + 0.17vw, 0.875rem); /* 12~14px */
	--header-font-n:  clamp(0.875rem, 0.791rem + 0.17vw, 1rem);    /* 14~16px */
	--header-font-l:  1.125rem;   /* 18px */
	--header-font-xl: 1.5rem;     /* 24px */
	--header-font-ttl: 2rem;      /* 32px */
	--header-font-cc:  clamp(2rem, 0.664rem + 2.78vw, 4rem);       /* 32px~64px */

	/* margin,padding用 */
	--header-space-xs: 0.25rem; /* 4px */
	--header-space-s:  0.5rem;  /* 8px */
	--header-space-n: 	1rem;    /* 16px */
	--header-space-nn: 1.5rem;  /* 24px */
	--header-space-l:  2rem;    /* 32px */
	--header-space-xl: 4rem;    /* 64px */
	--header-space-h:  6.25rem; /* 100px */
	
	/* コンテンツサイズ */
	--header-arrow-size: 2.5rem;   /* 40px */
	--header-contents-size: 50rem; /* 800px */

	/* 色 */
	--header-c-gray:  #727171;
	--header-c-grayw: #adadad;
	--header-c-whiteg:#DBDCDC;
	--header-c-gold:  #D2AF3A;
	--header-c-goldw:  #866f22;
	--header-c-blue:  #1a2c51;

	/* 画像用サイズ */
	--header-img-icon-xs:0.75rem; /* 12px */
	--header-img-icon-ss:1rem;    /* 16px */
	--header-img-icon-s: 1.25rem; /* 20px */
	--header-img-icon-l: 2.5rem;  /* 40px */
	--header-img-icon-xl: 5rem;   /* 80px */
	--header-img-m     : 6rem;    /* 96px */
	--header-img-l     : clamp(17rem, 14.996rem + 4.17vw, 20rem); /*  272~320px */
	--header-img-xl    : 30rem;   /* 480px */
	--header-img-banner: 20rem;   /* 320~400px */
	--header-img-contact:clamp(17rem, 14.996rem + 4.17vw, 20rem); /*  272~320px */
}

@media screen and (max-width:768px) {
	/* スマホ用 */
	:root{
		/* フォントサイズ用 */
		--header-font-xxs: 0.5rem;  /* 8px */
		--header-font-xs: clamp(0.625rem, 0.545rem + 0.43vw, 0.75rem);   /* 10~12px */
		--header-font-s:  clamp(0.75rem, 0.67rem + 0.43vw, 0.875rem); /* 12~14px */
		--header-font-n:  clamp(0.875rem, 0.795rem + 0.43vw, 1rem);  /* 14px */
		--header-font-l:  1.25rem; /* 20px */
		--header-font-xl: 1.5rem;     /* 24px */
		--header-font-ttl: 1.5rem;  /* 32px */
		--header-font-cc: clamp(1.5rem, 0.538rem + 5.13vw, 3rem); /* 24px~48px */

		/* margin,padding用 */
		--header-space-xs: 0.25rem; /* 4px */
		--header-space-s:  0.5rem;  /* 8px */
		--header-space-n: 	0.75rem;    /* 12px */
		--header-space-nn: 1.5rem;  /* 24px */
		--header-space-l:  2rem;    /* 32px */
		--header-space-xl: 5rem;    /* 80px */
		--header-space-h:  4rem;    /* 64px */

		/* 画像用サイズ */
		--header-img-icon-xs: 0.625rem; /* 10px */
		--header-img-icon-ss: 0.875rem; /* 14px */
		--header-img-icon-s:  1.25rem;     /* 16px */
		--header-img-icon-l: 2rem;      /* 32px */
		--header-img-icon-xl: 4rem;     /* 64px */
		--header-img-l: 12rem;			 /* 192px */
		--header-img-banner: 17rem;	 /* 272px */
		--header-img-contact: 15rem;    /* 240px */
	}
}

/* ●汎用クラス（サイズ、幅、一部カラーは原則ここにあるクラスを使用します） */

/* 基本フォントサイズ */
.header-font-xxs{font-size: var(--header-font-xxs);}
.header-font-xs{font-size: var(--header-font-xs);}
.header-font-s{font-size: var(--header-font-s);}
.header-font-n{font-size: var(--header-font-n);}
.header-font-l{font-size: var(--header-font-l);}
.header-font-xl{font-size: var(--header-font-xl);}

/* h2用フォントサイズ */
.header-font-title{font-size: var(--header-font-ttl);}

/* キャッチコピー用フォントサイズ */
.header-font-cc{font-size: var(--header-font-cc);}
.header-font-cc-s{font-size: calc(var(--header-font-cc) * 0.8);}
.header-font-cc-l{font-size: calc(var(--header-font-cc) * 1.3);}
.header-font-sc{font-size: calc(var(--header-font-cc) * 0.5);}

/* フォント太さ */
.header-font-bold{font-weight: 600;}

/* 基本幅、高さ調整用(padding) */
.header-padding-s{padding: var(--header-space-s);}
.header-padding-n{padding: 1rem;}
.header-padding-nn{padding: var(--header-space-nn);}
.header-paddingt-n{padding-top: var(--header-space-n);}
.header-paddingt-nn{padding-top: var(--header-space-nn);}
.header-paddingt-l{padding-top: var(--header-space-l);}
.header-paddingb-n{padding-bottom: var(--header-space-n);}
.header-paddingb-l{padding-bottom: var(--header-space-l);}
.header-paddingl-n{padding-left: var(--header-space-n);}
.header-paddingl-l{padding-left: var(--header-space-l);}
.header-paddingr-n{padding-right: var(--header-space-n);}
.header-paddingr-l{padding-right: var(--header-space-l);}
.header-paddingtb-xs{padding: var(--header-space-xs) 0;}
.header-paddingtb-s{padding: var(--header-space-s) 0;}
.header-paddingtb-n{padding: var(--header-space-n) 0;}
.header-paddingtb-l{padding: var(--header-space-xl) 0;}
.header-paddingtb-xl{padding: var(--header-space-xl) 0;}
.header-paddingrl-s{padding: 0 var(--header-space-s);}
.header-paddingrl-n{padding: 0 var(--header-space-n);}
.header-paddingrl-l{padding: 0 var(--header-space-l);}

/* ヘッダーと同じ高さの幅 */
.header-paddingt-h{padding-top: var(--header-space-h);}

/* ナビゲーションの幅 */
.header-padding-nav{padding: var(--header-space-n) 0 var(--header-space-n) 0;}
.header-padding-nav-c{padding: var(--header-space-n) var(--header-space-l) var(--header-space-n) var(--header-space-l);}

/* 幅、高さ調整用(marginが必要な場合) */
.header-marginl-xs{margin-left: var(--header-space-xs);}
.header-marginrl-n{margin: var(--header-space-n);}
.header-margint-n{margin-top: var(--header-space-n);}
.header-margint-nn{margin-top: var(--header-space-nn);}
.header-margint-xl{margin-top: var(--header-space-xl);}
.header-margintb-nn{margin: var(--header-space-nn) 0;}
.header-margintb-xl{margin: var(--header-space-xl) 0;}

/* 文字間の幅 */
.header-line-height-p{line-height: 1.7;}

/* コンテンツなどの幅 */
.header-padding-content{padding: var(--header-space-n) var(--header-space-n) calc(var(--header-space-n) * 3) var(--header-space-n);}
.header-padding-content-s{padding: var(--header-space-n) var(--header-space-n) calc(var(--header-space-n) * 2) var(--header-space-n);}
.header-padding-box{padding: var(--header-space-n) calc(var(--header-space-n) * 3);}
.header-padding-box-s{padding: var(--header-space-s) var(--header-space-n);}

/* 矢印用 */
.header-arrow-size{width: var(--header-arrow-size); aspect-ratio: 5 / 4; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%);}

/* メイン全体幅 */
.header-contents-size{width: 95%; max-width: var(--header-contents-size); margin: 0 auto;}

/* 下線用(色別) */
.header-border-bottom{border-bottom: #333 1px solid; padding: var(--header-space-xs); padding-top: 0;}
.header-border-bottomw{border-bottom: #FFF 1px solid; padding: var(--header-space-xs); padding-top: 0;}
.header-border-bottomg{border-bottom: var(--header-c-gold) 2px solid;}
.header-border-bottom-dotted{border-bottom: #333 1px dotted; padding: var(--header-space-xs);}

/* 背景及びそれに合わせた文字色 */
.header-bg-gray{color: #fff; background-color: var(--header-c-gray);}
.header-bg-gold{color: #fff; background-color: var(--header-c-gold);}
.header-bg-blue{color: #fff; background-color: var(--header-c-blue);}
.header-bg-white{color: #333; background-color: #fff;}
.header-bg-whiteg{background-color: var(--header-c-whiteg);}
.header-c-lgold{background: linear-gradient(30deg, var(--header-c-goldw), var(--header-c-gold) 66%, var(--header-c-goldw)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

/* アイコンサイズ */
.header-img-icon-xs{width: auto; height: var(--header-img-icon-xs); margin-right: var(--header-space-xs);}
.header-img-icon-ss{width: auto; height: var(--header-img-icon-ss); margin-right: var(--header-space-xs);}
.header-img-icon-s{width: auto; height: var(--header-img-icon-s); margin-right: var(--header-space-xs);}
.header-img-icon-l{width: auto; height: var(--header-img-icon-l);}
.header-img-icon-xl{width: auto; height: var(--header-img-icon-xl);}

/* 基本画像サイズ */
.header-img-m{width: var(--header-img-m);}
.header-img-l{width: var(--header-img-l);}
.header-img-xl{width: var(--header-img-xl);}

/* バナー用サイズ */
.header-img-banner{width: var(--header-img-banner);} 

/* お問い合わせ用のサイズ */
.header-img-contact{width: calc(var(--header-img-contact) * 1.1); height: var(--header-img-contact);}
.header-img-contact-inner{width: var(--header-img-l); height: var(--header-img-l);}

/* 改行位置制御 */
.header-nowrap-word{white-space: nowrap;}

@media screen and (max-width:768px) {
	/* コンテンツサイズのスマホ版 */
	.header-padding-box{padding: var(--header-space-n) calc(var(--header-space-n) * 1.5);}
	.header-padding-content{padding: var(--header-space-n) 0 calc(var(--header-space-n) * 3) 0;}
}
/* ---------変数・汎用クラスここまで--------- */

/* ☆ヘッダー */
header,
.header_menu_fixed{
	width: 100%;
	height: 4.69rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0 1rem;
	font-family: "NotoSans","Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", yu-mincho-pr6, serif;
	font-weight: 400;
	color: #333;
	letter-spacing: 0.1em;
	line-height: 1.15;
}

.header_menu_fixed{
	position: fixed;
	top: 1rem;
	left: 0;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s;
}

.header_menu_fixed.fixed{
	opacity: 1;
	visibility: visible;
}

header .header_nav_box:not(.header_contact_box),
.header_menu_fixed .header_nav_box:not(.header_contact_box){
	font-family: "NotoSans","Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", yu-mincho-pr6, serif;
	color: #333;
	text-decoration: none;
	transition: all 0.3s;
}

header img,
.header_menu_fixed img{
	max-width: 100%;
	vertical-align: bottom;
}


.header_logo{
	width: clamp(11rem, 6.429rem + 7.14vw, 15rem);
}

.header_nav ul{
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 1rem;
}

.header_menu_fixed .header_nav{
	outline: solid 2px var(--c-darkblue);
	outline-offset: -1px;
	background-color: #FFF;
	border-radius: 50px;
}

.header_nav_box{
	text-align: center;
	display: flex;
	flex-direction: column;
	transition: opacity 0.2s ease-in-out;
}

.header_nav_box > p{
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 20250801 追加 */
.hnav_dropdown_wrap{
	position: relative;
}

.header_nav.top_header ul.hnav_dropdown_list{
	position: absolute;
	display: flex;
	width: calc(100% + 2em);
	z-index: 20000;
	top: calc(100% + 1rem - 2px);
	left: 50%;
	padding: 0.5rem 0;
	translate: -50% 0;
	opacity: 0;
	visibility: hidden;
	flex-direction: column;
	background-color: #FFF;
}

.header_nav.top_header ul.hnav_dropdown_list{
	border: var(--c-darkblue) 2px solid;
	border-radius: 0.5rem;
}
.header_nav.top_header ul.hnav_dropdown_list::before{
	position: absolute;
	content: "";
	width: 1.25rem;
	height: 1rem;
	top: 0;
	left: 50%;
	translate: -50% -100%;
	background-color: var(--c-darkblue);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.header_nav.top_header ul.hnav_dropdown_list::after{
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 1rem;
	top: 0;
	left: 0;
	translate: 0 -100%;
}

.header_menu_fixed .header_nav ul.hnav_dropdown_list{
	position: absolute;
	display: flex;
	width: calc(100% + 2em);
	top: calc(100% - 1px);
	left: 50%;
	padding: 0.5rem 0;
	translate: -50% 0;
	opacity: 0;
	visibility: hidden;
	flex-direction: column;
	background-color: #FFF;
	border: var(--c-darkblue) 2px solid;
	border-top: none;
	border-radius: 0 0 0.5rem 0.5rem;
}
.header_menu_fixed .header_nav ul.hnav_dropdown_list::before,
.header_menu_fixed .header_nav ul.hnav_dropdown_list::after{
	display: none;
}

.hnav_dropdown_item{
	width: 100%;
}

.hnav_dropdown_link{
	display: block;
	padding: 0 1rem;
	text-align: center;
	color: #333;
	transition: opacity 0.2s ease-in-out;
}

/*-----------------------*/

.header_tel > p{
	display: flex;
	align-items: center;
}

.header_contact_box{
	color: #fff;
	background-color: var(--c-darkblue);
	transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}

.header_menu_fixed .header_contact_box{
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
}

.hamburger{
	display: none;
}

@media screen and (max-width:1024px) {
	/* ◇タブレットサイズ */
	/* ☆ヘッダー */
	/* ハンバーガーメニュー関連 */
	.header_nav{
		display: none;
	}

	.header_menu_fixed{
		display: none;
	}

	.hamburger{
		display: block;
		position: fixed;
		z-index: 9999;
	}

	.hamburger_button{
		width: 3rem;
		height: 3rem;
		background-color: #333;
		border: 0;
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 1rem;
		right: 1rem;
		z-index: 9999;
	}

	.hamburger_button > span{
		display: block;
		width: 1.5rem;
		height: 0.2rem;
		background-color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.3s;
	}

	.hamburger_button > span:first-child{
		top: calc(50% - 0.6rem);
	}

	.hamburger_button > span:last-child{
		top: calc(50% + 0.6rem);
	}

	.hamburger_button.open span:first-child {
		top: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.hamburger_button.open span:last-child {
		top: 50%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.hamburger_button.open span:nth-child(2) {
		display: none;
	}

	header .header_nav_box:not(.header_contact_box),
	.header_menu_fixed .header_nav_box:not(.header_contact_box){
		color: #FFF;
	}

	.header_nav_hamburger{
		opacity: 0;
		visibility: hidden;
		background-color: rgba(51, 51, 51, 0.9);
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		max-width: 15rem;
		height: 100dvh;
		z-index: 999;
		transition: all 0.5s;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.header_nav_hamburger.open{
		opacity: 1;
		visibility: visible;
		right: 0;
	}

	.header_nav_hamburger ul{
		width: 14rem;
		display: flex;
		flex-direction: column;
		gap:var(--header-space-n);
		text-align: center;
		list-style: none;
		padding-top: 6.25rem;
	}

	.header_nav_hamburger li{
		width: 100%;
	}

	.header_nav_box > p{
		justify-content: flex-start;
	}

	.header_contact_box{
		width: 100%;
		max-width: 13rem;
		color: #333!important;
		font-weight: 600;
		background-color: var(--header-c-gold);
		border-radius: 50px;
		border: 0;
		justify-content: center;
		align-items: center;
		padding: var(--header-space-s) var(--header-space-n);
		margin: auto;
	}

	.header_contact_box > p:first-child{
		border: 0;
	}

	.menu_blank{
		width: 100%;
		height: 100dvh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-color: rgba(51, 51, 51, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: all 0.7s;
	}

	.menu_blank.open{
		opacity: 1;
		visibility: visible;
	}
}

@media screen and (max-width:768px) {
	/*　☆ヘッダー　*/
	header,
	.header_menu_fixed{
		padding: 0 0.5rem;
	}

	.hamburger_button{
		right: 0.5rem;
	}

	.header_nav_hamburger{
		max-width: 100%;
	}
}

@media (hover :hover){
	.header_nav_box:hover{
		opacity: 0.6;
	}

	.header_contact_box:hover{
		color: var(--header-c-whiteg);
	}

	.hnav_dropdown_wrap:hover ul.hnav_dropdown_list{
		visibility: visible;
		opacity: 1;
		/* transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out; */
	}

	.hnav_dropdown_link:hover{
		opacity: 0.6;
	}
}