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

	/* margin,padding用 */
	--space-xs: 0.25rem; /* 4px */
	--space-s:  0.5rem;  /* 8px */
	--space-n: 	1rem;    /* 16px */
	--space-nn: 1.5rem;  /* 24px */
	--space-l:  2rem;    /* 32px */
	--space-xl: 4rem;    /* 64px */
	--space-h:  6.25rem; /* 100px */

	/* コンテンツサイズ */
	--arrow-size: 2.5rem;   /* 40px */
	--contents-size: 50rem; /* 800px */

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

	/* 画像用サイズ */
	--img-icon-xs:0.75rem; /* 12px */
	--img-icon-ss:1rem;    /* 16px */
	--img-icon-s: 1.25rem; /* 20px */
	--img-icon-l: 2.5rem;  /* 40px */
	--img-icon-xl: 5rem;   /* 80px */
	--img-m     : 6rem;    /* 96px */
	--img-l     : clamp(17rem, 14.996rem + 4.17vw, 20rem); /*  272~320px */
	--img-xl    : 30rem;   /* 480px */
	--img-banner: 20rem;   /* 320~400px */
	--img-contact:clamp(17rem, 14.996rem + 4.17vw, 20rem); /*  272~320px */
}
@media screen and (max-width:768px) {
	/* スマホ用 */
	:root{
		/* フォントサイズ用 */
		--font-xxs: 0.5rem;  /* 8px */
		--font-xs: clamp(0.625rem, 0.545rem + 0.43vw, 0.75rem);   /* 10~12px */
		--font-s:  clamp(0.75rem, 0.67rem + 0.43vw, 0.875rem); /* 12~14px */
		--font-n:  clamp(0.875rem, 0.795rem + 0.43vw, 1rem);  /* 14px */
		--font-l:  1.25rem; /* 20px */
		--font-xl: 1.5rem;     /* 24px */
		--font-ttl: 1.5rem;  /* 32px */
		--font-cc: clamp(1.5rem, 0.538rem + 5.13vw, 3rem); /* 24px~48px */
		/* margin,padding用 */
		--space-xs: 0.25rem; /* 4px */
		--space-s:  0.5rem;  /* 8px */
		--space-n: 	0.75rem;    /* 16px */
		--space-nn: 1.5rem;  /* 24px */
		--space-l:  2rem;    /* 32px */
		--space-xl: 5rem;    /* 80px */
		--space-h:  4rem;    /* 64px */
		/* 画像用サイズ */
		--img-icon-xs: 0.625rem; /* 10px */
		--img-icon-ss: 0.875rem; /* 14px */
		--img-icon-s:  1.25rem;     /* 16px */
		--img-icon-l: 2rem;      /* 32px */
		--img-icon-xl: 4rem;     /* 64px */
		--img-l: 12rem;			 /* 192px */
		--img-banner: 17rem;	 /* 272px */
		--img-contact: 15rem;    /* 240px */
	}
}

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

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

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

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

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

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

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

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

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

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

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

/* 矢印用 */
.arrow-size{width: var(--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%);}

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

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

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

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

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

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

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

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

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

/* ☆フッター */
footer{
	width: 100%;
}

.footer_upper{
	max-width: 22rem;
	margin: 0 auto;
	text-align: center;
}

.footer_upper > h2 > img{
	width: 18.75rem;
}

.footer_tel_fax{
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: var(--space-s); /* 8px */
}

.sns_icons{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	gap: 1rem;
}


.footer_nav > ul{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	gap: 1rem;
	flex-wrap: wrap;
	line-height: 1.5;
}

.footer_nav > ul > li > a{
	position: relative;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer_sub_list{
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

.footer_lower{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 2rem;
}

.footer_lower_box ul{
	width: fit-content;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}

.footer_wrapper small{
	display: block;
	text-align: center;
	letter-spacing: 0;
}

@media screen and (max-width:768px) {

	/* ☆フッター */
	.footer_upper > h2 > img{
		width: 17rem;
	}

	.footer_lower{
		flex-direction: column;
		align-items: center;
		gap: var(--space-n);
	}
}

@media screen and (max-width:461px) {
	.footer_nav ul{
		flex-direction: column;
		align-items: center;
	}
}