@charset 'UTF-8';

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

	- default setting
	- font setting
	- link setting
	- other setting
	+ wrapper
		- header
		- footer

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

:root {
	/* カラー パレット */
	--color_transparent: rgba(255, 255, 255, 0);
	--color_raisinblack: #242424;
	--color_silver: #d9d9d9;
	--color_flashwhite: #f3f3f3;
	--color_purewhite: #fff;
	--color_taupegray: #86878d;
	--color_kellygreen: #47a700;
	--color_greenlizard: #bcf243;
	--color_white: #fff;
	--color_black: #000;
	--color_bg_silver: #e3e8f0;
	--color_fmenu_gray: #1a1a1a;
	--color_keyword_yellow: #ffda1f;
	--color_gradient_cyan: #d9f0f9;
	--color_gradient_pink: #f2f4fb;
	--color_bg_skyblue: #43d0fa;
	--color_white_light: rgba(255, 255, 255, 0.6);
	--color_raisinblack_light: rgba(9, 121, 204, 0.6);
	--color_red: #f0322d;
	/* new color */
	--color_basicblue: #1B3D73;
	--color_pointgold: #AD9113;

/* transition */
/* Ease-Out */
	--transition0secEaseout: 0s cubic-bezier(0.05, 0.78, 0.23, 0.99);
	--transition02secEaseout: 0.2s cubic-bezier(0.05, 0.78, 0.23, 0.99);
	--transition03secEaseout: 0.3s cubic-bezier(0.05, 0.78, 0.23, 0.99);
	--transition05secEaseout: 0.5s cubic-bezier(0.05, 0.78, 0.23, 0.99);

/* Ease-In-Out */
	--transition03secEaseinout: 0.3s cubic-bezier(0.39, 0.21, 0.23, 0.99);
	--transition05secEaseinout: 0.5s cubic-bezier(0.39, 0.21, 0.23, 0.99);
}

html {
	max-height: 100%;
	font-size: 62.5%;

	scroll-behavior: smooth;
	caret-color: transparent;
}

:target {
	scroll-margin-top: 170px;
}

@media screen and (max-width: 1100px) {
	:target {
		scroll-margin-top: 12vw;
	}
}

@media screen and (max-width: 768px) {
	:target {
		scroll-margin-top: 20vw;
	}
}

img {
	width: 100%;
	height: auto;
}

body {
	position: relative;
	color: var(--color_raisinblack);
	line-height: 1.5;
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, Verdana, Arial, sans-serif;
}

/*----------------------------------------
	font setting
-----------------------------------------*/
.font10 {
	font-size: 1.0rem;
}

.font11,
.font11_10 {
	font-size: 1.1rem;
}

.font12,
.font12_10 {
	font-size: 1.2rem;
}

.font13 {
	font-size: 1.3rem;
}

.font14,
.font14_11,
.font14_12,
.font14_13 {
	font-size: 1.4rem;
}

.font16,
.font16_12,
.font16_13,
.font16_14,
.font16_15 {
	font-size: 1.6rem;
}

.font17_14 {
	font-size: 1.7rem;
}

.font18,
.font18_12,
.font18_14,
.font18_16 {
	font-size: 1.8rem;
}

.font20,
.font20_12,
.font20_14,
.font20_16,
.font20_18 {
	font-size: 2rem;
}

.font24,
.font24_16,
.font24_18,
.font24_20 {
	font-size: 2.4rem;
}

.font28,
.font28_18,
.font28_20 {
	font-size: 2.8rem;
}

.font30,
.font30_20 {
	font-size: 3rem;
}

.font32_20 {
	font-size: 3.2rem;
}

.font34_28 {
	font-size: 3.4rem;
}

.font36,
.font36_24 {
	font-size: 3.6rem;
}

.font41_28 {
	font-size: 4.1rem;
}

.font42 {
	font-size: 4.2rem;
}

.font44,
.font44_28 {
	font-size: 4.4rem;
}

.font48,
.font48_32 {
	font-size: 4.8rem;
}

.font50_30 {
	font-size: 5rem;
}

.font56_32 {
	font-size: 5.6rem;
}

.font60_40 {
	font-size: 6rem;
}

.font90_48 {
	font-size: 9rem;
}

/* SPサイズ */
@media screen and (max-width: 768px) {
	.font10,
	.font11_10,
	.font12_10 {
		font-size: 2.56vw;
	}

	.font11,
	.font14_11 {
		font-size: 2.82vw;
	}

	.font12,
	.font14_12,
	.font16_12,
	.font18_12,
	.font20_12 {
		font-size: 3.07vw;
	}

	.font13,
	.font14_13,
	.font16_13 {
		font-size: 3.33vw;
	}

	.font14,
	.font16_14,
	.font17_14,
	.font18_14,
	.font20_14 {
		font-size: 3.58vw;
	}

	.font15,
	.font16_15 {
		font-size: 3.84vw;
	}

	.font16,
	.font18_16,
	.font20_16,
	.font24_16 {
		font-size: 4.1vw;
	}

	.font18,
	.font20_18,
	.font24_18,
	.font28_18 {
		font-size: 4.61vw;
	}

	.font24_20,
	.font28_20,
	.font30_20,
	.font32_20 {
		font-size: 5.12vw;
	}

	.font24,
	.font36_24 {
		font-size: 6.15vw;
	}

	.font28,
	.font34_28,
	.font41_28,
	.font44_28 {
		font-size: 7.17vw;
	}

	.font30,
	.font50_30 {
		font-size: 7.69vw;
	}

	.font48_32,
	.font56_32 {
		font-size: 8.2vw;
	}

	.font36 {
		font-size: 9.23vw;
	}

	.font60_40 {
		font-size: 10.25vw;
	}

	.font42 {
		font-size: 10.76vw;
	}

	.font44 {
		font-size: 11.28vw;
	}

	.font48,
	.font90_48 {
		font-size: 12.3vw;
	}
}

/* Outfit */
.outfit {
	font-weight: 300;
	font-family: 'Outfit', Verdana, Arial, sans-serif;
}

/* Noto Serif JP - SemiBold */
.mincho {
	font-weight: 600;
	font-family: 'Noto Serif JP', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
}

/* ウェイト */
.regular {
	font-weight: 400;
}

.medium {
	font-weight: 500;
}

.demi {
	font-weight: 600;
}

.bold {
	font-weight: 700;
}

/* 行間 */
.lh12 {
	line-height: 1.2;
}

.lh127 {
	line-height: 1.27;
}

.lh13 {
	line-height: 1.3;
}

.lh14 {
	line-height: 1.4;
}

.lh15 {
	line-height: 1.5;
}

.lh16 {
	line-height: 1.6;
}

.lh166 {
	line-height: 1.66;
}

.lh17 {
	line-height: 1.7;
}

.lh175 {
	line-height: 1.75;
}

.lh18 {
	line-height: 1.8;
}

.lh2 {
	line-height: 2;
}

/* インデント設定 */
.indent1 {
	padding-left: 1em;
	text-indent: -1em;
}

/* フォントカラー */
.raisinblack {
	color: var(--color_raisinblack);
}

.silver {
	color: var(--color_silver);
}

.flashwhite {
	color: var(--color_flashwhite);
}

.purewhite {
	color: var(--color_purewhite);
}

.taupegray {
	color: var(--color_taupegray);
}

.kellygreen {
	color: var(--color_kellygreen);
}

.greenlizard {
	color: var(--color_greenlizard);
}

/* 追加分 */
.white {
	color: var(--color_white);
}

.fmenu_gray {
	color: var(--color_fmenu_gray);
}

/* new color */
.basicblue {
	color: var(--color_basicblue);
}

.pointgold {
	color: var(--color_pointgold);
}

/* 背景色 */
.bg_silver {
	background: var(--color_bg_silver);
}

.bg_white {
	background: var(--color_white);
}

/* new color */
.bg_basicblue {
	background: var(--color_basicblue);
}

.bg_pointgold {
	background: var(--color_pointgold);
}

/*----------------------------------------
	link settings
-----------------------------------------*/

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

/*----------------------------------------
	other settings
-----------------------------------------*/
body *.pc {
	display: block;
}

body *.sp {
	display: none;
}

@media screen and (max-width: 768px) {
	body *.pc {
		display: none;
	}

	body *.sp {
		display: block;
	}
}

/* ボタン */
[class^='btn-'] {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10em;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0), 0 0 40px rgba(128, 128, 128, 0);
	letter-spacing: 0.04em;
	transition: all var(--transition03secEaseout);
}

[class^='btn-']:hover {
	transform: translateY(-0.1em);
	box-shadow: 0 4px 4px rgba(255, 255, 255, 0.1),
	0 1px 6px rgba(255, 255, 255, 0.05),
	0 8px 8px rgba(255, 255, 255, 0.1),
	0 16px 16px rgba(0, 0, 0, 0.05),
	8px 16px 16px rgba(0, 0, 0, 0.07),
	8px 32px 32px rgba(0, 0, 0, 0.07);
	transition: all var(--transition05secEaseout);
}

/* outfit時の文字間調整 */
[class^='btn-'].outfit {
	letter-spacing: 0.02em;
}

/* 製品に関するお問い合わせ等 */
.btn-l {
	width: 500px;
	height: 100px;
}

/* read More, 絞り込む、グループ本部など */
.btn-m {
	width: 220px;
	height: 52px;
}

/* 検索結果に戻る、google Maps等 */
.btn-m.long {
	width: 300px;
}

@media screen and (max-width: 768px) {
	.btn-l {
		width: 76.92vw;
		height: 13.33vw;
	}

	.btn-m {
		width: 46.15vw;
		height: 13.33vw;
	}

	.btn-m.long {
		width: 61.53vw;
	}
}

/* ボタン用アイコン */
.btn-ic-arw,
.btn-ic-prevarw,
.btn-ic-link,
.btn-ic-contact,
.btn-ic-pdf {
	position: relative;
}

.btn-ic-arw::after {
	content: '';
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-left: 16px;
	background: transparent url(../img/c_ic_arw_r_s_white.svg) no-repeat center center/contain;
}

.btn-ic-prevarw::after {
	content: '';
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-left: 12px;
	background: transparent url(../img/c_ic_arw_back_white.svg) no-repeat center center/contain;
}

.btn-ic-link::after {
	content: ' ';
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-left: 10px;
	background: transparent url(../img/c_ic_browser_basicblue.svg) no-repeat center center/contain;
}

.btn-ic-link02::after {
	content: ' ';
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-left: 10px;
	background: transparent url(../img/c_ic_browser_white.svg) no-repeat center center/contain;
}

.btn-ic-contact::after {
	content: ' ';
	display: inline-block;
	width: 21.6px;
	height: 14.57px;
	margin: 0 3px 0 20px;
	background: transparent url(../img/c_ic_contact_white.svg) no-repeat center center/contain;
}

.btn-ic-pdf::after {
	content: ' ';
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-left: 16px;
	background: transparent url(../img/c_ic_pdf_red.svg) no-repeat center center/contain;
}

@media screen and (max-width: 768px) {
	.btn-ic-arw::after {
		width: 30px;
		height: 30px;
		margin-left: 1.53vw;
	}

	.btn-ic-prevarw::after {
		width: 30px;
		height: 30px;
		margin-left: 1.53vw;
	}

	.btn-ic-link::after {
		width: 30px;
		height: 30px;
		margin-left: 1.02vw;
	}

	.btn-ic-contact::after {
		width: 30px;
		height: 30px;
		margin-left: 2.56vw;
	}

	.btn-ic-pdf::after {
		width: 30px;
		height: 30px;
		margin-left: 1.53vw;
	}
}

/* ボタン用 カラーグラデーション */
/* ボタン シルバー */
.btn-silver {
	background: linear-gradient(135deg, hsl(0, 0%, 100%) 0%, hsl(0, 0%, 100%) 20%, hsl(40, 10%, 94%) 55%, hsl(60, 2%, 89%) 100%);
	color: var(--color_basicblue);
}

/* ボタン 背景シルバー＆青字 */
[class^='btn-'].bg_silver {
	color: var(--color_basicblue);
}

/* new btn */
.btn-basicblue {
	background: linear-gradient(to right, hsl(206, 65%, 36%) 0%, hsl(206, 65%, 36%) 30%, hsl(216, 62%, 24%) 100%);
	color: var(--color_purewhite);
}

.btn-l.btn-basicblue {
	background: linear-gradient(to bottom, hsl(206, 65%, 36%) 0%, hsl(216, 62%, 24%)  100%);
	color: var(--color_purewhite);
}

.btn-pointgold {
	background: linear-gradient(to right, hsl(49, 80%, 38%) 0%, hsl(49, 80%, 38%) 100%);
	color: var(--color_purewhite);
}

.long.btn-pointgold {
	background: linear-gradient(to bottom, hsl(49, 80%, 38%) 0%, hsl(49, 80%, 38%) 100%, hsl(49, 80%, 38%) 100%);
	color: var(--color_purewhite);
}

.btn-tsukasablue {
	background: linear-gradient(to right, #0095CC 0%, #0095CC 100%);
	color: var(--color_purewhite);
}

.long.btn-tsukasablue {
	background: linear-gradient(to bottom, #0095CC 0%, #0095CC 100%, #0095CC 100%);
	color: var(--color_purewhite);
}

.btn-silver {
	background: linear-gradient(135deg, hsl(0, 0%, 100%) 0%, hsl(0, 0%, 100%) 20%, hsl(40, 10%, 94%) 55%, hsl(60, 2%, 89%) 100%);
	color: var(--color_basicblue);
}

[class^='btn-'].bg_silver {
	color: var(--color_basicblue);
}

/* STORYsitetop用追加設定 */
.btn-inline {
	width: 140px;
	letter-spacing: 0.02em;
}

.btn-inline,
.btn-inline:hover {
	transform: initial;
	box-shadow: none;
	transition: none;
}

.btn-inline::after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 17px;
	margin-left: 19px;
	background: transparent url(../img/c_ic_arw_r_s_pointgold.svg) no-repeat center center/contain;
}

/* STORYsitetop用追加設定 */
.btn-box {
	display: flex;
	flex-direction: column;
	gap: 21px;
	justify-content: center;
	align-items: center;
	max-width: 468px;
	width: 100%;
	height: 130px;
	border-radius: initial;
	background-color: var(--color_white);
	letter-spacing: 0.04em;
}

.btn-box,
.btn-box:hover {
	transform: initial;
	box-shadow: none;
	transition: none;
}

.btn-box::after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 17px;
	background: transparent url(../img/c_ic_arw_r_s_basicblue.svg) no-repeat center center/contain;
}

@media screen and (max-width: 768px) {
	.btn-box {
		gap: 3.07vw;
		max-width: initial;
		width: 100%;
		height: 23.58vw;
	}

	.btn-box::after {
		width: 6.15vw;
		height: 4.35vw;
	}
}

/*----------------------------------------
	アニメーション
-----------------------------------------*/

@keyframes arrow_animation {
	0% {
		transform: translateX(0);
		opacity: 1;
	} 33% {
		transform: translateX(80%);
		opacity: 0;
	} 66% {
		transform: translateX(-80%);
		opacity: 0;
	} 100% {
		transform: translateX(0);
		opacity: 1;
	}
}