@charset "UTF-8";

/* サイト全体の基本設定 */
:root {
	/* color */
	--color_black: #1F2622;
	--color_black-op03: rgba(147, 141, 133, 0.3);
	--color_white: #fff;
	--color_ivory: #F0EEE4;
	--color_ivory-op50: rgba(240, 238, 228, 0.5);
	--color_grey: #938D85;
	--color_grey-op50: rgba(147, 141, 133, 0.5);
	--color_corp-logo: #DC000C;
	--color_primary: #FFD00B;
	--color_primary-op03: rgba(255, 208, 11, 0.3);
	--color_accent: #3188A2;
	--color_secondary: #F89D33;
	--color_secondary-op50: rgba(248, 157, 51, 0.5);
	
	/* gradation */
	--gradation-radial-primary: radial-gradient(circle, var(--color_primary) 0%, var(--color_primary) 40%, var(--color_white) 40%);

	/* font weight */
	--fw_jp_regular: 400;
	--fw_jp_medium: 500;
	--fw_jp_bold: 700;
	--fw_en_normal: 400;
	--fw_en_medium: 500;
	--fw_en_bold: 700;

	/* 基本サイズ */
	--size1-half: calc(var(--size1) / 2);
	--size1: 6.4vw; /* 1500pxの時に96px */
	--size2: calc(var(--size1) * 2);
	--size3: calc(var(--size1) * 3);
	--size4: calc(var(--size1) * 4);

	/* content width (responsive size) */
	--content_w_sm: 460px;
	--content_w_md: 768px;
	--content_w_lg: 1440px;

	/* header */
	--header-height: clamp(64px , 4.3vw, 90px);
	--header-top-link: clamp(200px, 15.6vw, 360px);
	--header-padding-inline: 0;

	/* main */
	--main-padding-top: 0;
	--circle-slide-margin: 16.4vw;

	/* hamburger */
	--hamburger-width: 50px;

	/* footer */
	--footer-padding-block: 60px;

	/* space size */
	--space-xs: clamp(4px, 0.5vw, 8px); /*8px*/
	--space-s: clamp(8px, 1vw, 16px); /*16px*/
	--space-m: clamp(15px, 1.8vw, 30px); /*30px*/
	--space-l: clamp(20px, 2.5vw, 40px); /*40px*/
	--space-xl: clamp(30px, 3.6vw, 60px); /*60px*/
	--space-xxl: clamp(40px, 4.5vw, 80px); /*80px*/
	--space-xxxl: clamp(50px, 5.6vw, 100px); /*100px*/
	/* border radius size */
	--radius-xxs: clamp(2px, 0.25vw, 4px); /* 4px	 お問い合わせフォームラベル OEMキャッチのラインマーカー */
	--radius-xs: clamp(4px, 0.5vw, 8px); /* 8px button */
	--radius-s: clamp(8px, 1vw, 16px); /* 16px */
	--radius-m: clamp(15px, 1.8vw, 30px); /* 30px 商品案内一覧のカテゴリbutton */
	--radius-l: clamp(20px, 2.5vw, 40px); /* 40px */
	--radius-xl: clamp(30px, 3.6vw, 60px); /* 60px 商品案内、企業情報のテキスト枠 */
	--radius-xxl: clamp(50px, 5vw, 100px); /* 商品案内一覧の画像枠 */
	--radius-xxxl: clamp(130px, 12vw, 260px); /* TOP POINT01-03の画像枠 */

	/* transition */
	--transition-primary: 0.4s cubic-bezier(0.37, 0.16, 0.12, 1);
	--transition_secondary: 0.2s cubic-bezier(0.37, 0.16, 0.12, 1);

	/* font */
	--en-font: "Oswald";
	--jp-font: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	--en-jp-font: "Oswald", YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

/* 基本フォントサイズ */
/* -----------------------------
 レスポンシブ文字サイズ計算式
-------------------------------- */
*, *::before, *::after {
    /* 最小文字サイズ、最大文字サイズ、最小画面幅、最大画面幅 */
    --min-size: 14;
    --max-size: 16;
    --min-viewport: 375;
    --max-viewport: 1440;

    /* 傾き a = フォントサイズの増加量:x／ビューポートの増加量:y */
    --slope: calc((var(--max-size) - var(--min-size)) / (var(--max-viewport) - var(--min-viewport)));

    /* 切片 b = y - ax */
    --intercept: calc(var(--min-size) - var(--slope) * var(--min-viewport));

    /* clamp中間の可変文字サイズ y = ax + b */
    --fluid-size: calc(var(--slope) * 100vw + var(--intercept) / 16 * 1rem);

    /* clamp(min, 可変サイズ, max) */
    --clamp-size: clamp(var(--min-size) / 16 * 1rem, var(--fluid-size), var(--max-size) / 16 * 1rem);
}


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

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--jp-font);
	width: 100%;
	font-size: 15px;
	line-height: 2.0;
	margin: 0 auto;
	font-weight: var(--fw_jp_regular);
	color: var(--color_black);
	background-color: var(--color_white);
	overflow-x: hidden;
}

img {
	display: block;
	width: 100%;
	height: 100%;
    object-fit: cover;
}

ol, ul, li {list-style-type: none;}

a {text-decoration: none; color: inherit; display: inline-block; transition: var(--transition-primary);}

button {font-family: inherit; border: none; font-weight: var(--fw_jp_medium);}

/* data-splittingで分割した文字の情報をここに入れる */
.visuallyHidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
  }

.splitting-text {
	overflow: hidden;
}

.char {
	display: inline-block;
	opacity: 0;
	transform: translateY(-5px) rotate(5deg);
	animation: char-anime 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards;
	animation-delay: calc(0.06s * var(--char-index));
}

.cont-ttl--sub.splitting-text .char {
	transform: translateY(-5px) rotate(5deg);
	animation: char-anime 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
	animation-delay: calc(0.1s * var(--char-index));
}

@keyframes char-anime {
	0% {
		opacity: 0;
		transform: translateY(5px) rotate(5deg);
	}
	100% {
		opacity: 1;
		transform: translateY(0) rotate(0);
	}
}

/* レスポンシブ用の基本設定 */
.sp-only {display: none;}
.sp-small-only {display: none;}

/* スマートフォン用 */
@media screen and (max-width: 768px) {
	.sp-small-only {display: none;}
	.sp-only {display: block;}
	.pc-only {display: none;}
}
@media screen and (max-width: 425px) {
	.sp-small-only {display: block;}
}

/* 英字フォント */
.en {
	font-family: "Oswald" !important;
	font-weight: var(--fw_en_medium);
}

/* 大文字 */
.uppercase {
	text-transform: uppercase;
}

.external-link {
	display: flex;
	align-items: center;
}
.external-link::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 1ch;
	background: url("../img/common/external-link.svg") center / contain no-repeat; 
}
.external-link:hover::after {
	transform: scale(1.2); 
}

/* 共通フレーム基本設定 */
main {
	padding-top: var(--main-padding-top);
}

:not(#TOP) main {
	background-color: var(--color_ivory);
}

.wrapper {
	--min-size: 80;
    --max-size: 160;
    --min-viewport: 375;
    --max-viewport: 1440;
	padding-block: calc(var(--clamp-size) * 0.75);
	background-color: var(--color_ivory);
}

section.wrapper {
	padding-inline: var(--size1);
}
section.wrapper-full {
	padding-inline: 0;
}


section.wrapper:has(.container.column-2) {
	padding-inline-end: 0;
}

.container {
	max-width: var(--content_w_lg);
	margin: 0 auto;
}

.container.column-2{
	display: contents;
}

/* （下層ページ） 基本設定*/
#page-title-sec {
	position: relative;
	background-color: var(--color_primary);
	padding-block: calc(var(--header-height) + 3.4vw) 2.5vw;
	border-radius: 0 0 var(--radius-xxl) var(--radius-xxl);
}

#page-title-sec.wrapper:has(.container.column-2) {
	display: grid;
	grid-template-columns: var(--size1) 1fr var(--space-xl) 1fr var(--size1);
	grid-template-rows: auto 1fr;
	padding-inline: 0;
	background-color: transparent;
}

#page-title-sec::before {
	content: "";
	display: block;
	position: absolute;
	width: min(133px, 8.8vw);
	height: min(143px, 9.5vw);
	right: min(196px, 13vw);
	bottom: 0;
	background: url("../img/common/tamagorou-ivory_sub-header.svg") right bottom / contain no-repeat;
	mix-blend-mode: multiply;
}
#page-title-sec::after {
	content: "";
	display: block;
	position: absolute;
	width: min(260px, 20.4vw);
	height: 10.9vw;
	right: -0.5px;
	bottom: -0.5px;
	background: url("../img/common/bg_ivory-wave_02.svg") right bottom / contain no-repeat;
}

#page-title-sec.wrapper:has(.container.column-2):before {
	display: none;
}

#page-title-sec.wrapper:has(.container.column-2) .page-ttl-content {
	align-self: flex-start;
	grid-column: 2 / 3;
	grid-row: 1;
	position: relative;
	z-index: 1;
	padding-bottom: 2em;
}
#page-title-sec.wrapper:has(.container.column-2) .page-ttl-content::before {
	--min-size: 80;
    --max-size: 160;
	content: "";
	display: block;
	position: absolute;
	left: calc(var(--size1) * -1);
	top: calc(var(--clamp-size) * -1);
	width: 100vw;
	height: 100%;
	background-color: var(--color_primary);
	z-index: -1;
}
#page-title-sec.wrapper:has(.container.column-2) .page-ttl-content::after {
	--min-size: 80;
    --max-size: 160;
	content: "";
	display: block;
	position: absolute;
	left: calc(var(--size1) * -1);
	top: 0;
	width: 100vw;
	height: 100%;
	background-color: var(--color_primary);
	border-radius: 0 0 var(--radius-xxxl) var(--radius-xxl);
	z-index: -1;
}
#page-title-sec.wrapper:has(.container.column-2) .inner {
	grid-column: 4 / -1;
	grid-row: 1 / -1;
	margin-bottom: revert;
}

#page-title-sec.wrapper:has(.container.column-2) .img-figure {
	height: 100%;
	position: relative;
	z-index: 1;
	border-radius: var(--radius-xxl) 0 0 var(--radius-xxl);
	overflow: hidden;
}
#page-title-sec.wrapper:has(.container.column-2) .img-figure::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	width: min(260px, 20.4vw);
	height: 10.9vw;
	right: -0.5px;
	bottom: -0.5px;
	background: url("../img/common/bg_ivory-wave_02.svg") right bottom / contain no-repeat;
}

#page-title-sec .page-ttl + .page-ttl-desc {
	margin-top: 1em;
}

.text-indent01 {
	text-indent: 1ch;
}

/* マーク */	
.circle-mark {
	display: flex;
	align-items: center;
}

.circle-mark::before {
	--circle-size: 0.6em;
	--text-line-height: 2;
	content: "";
	display: block;
	width: var(--circle-size);
	height: var(--circle-size);
	margin-right: 1ch;
	background-color: var(--color_primary);
	border-radius: 50%;
	color: var(--color_primary);
	flex: 0 0 var(--circle-size);
	align-self: flex-start;
	margin-top: calc((var(--text-line-height) * 1em - var(--circle-size))/2);
}

/* 文字基本設定 */
.text {
	text-align: justify;
}

/* フォント設定 */
.fs60  {
	--min-size: 20;
    --max-size: 60;
	font-size: var(--clamp-size);
	line-height: 1.3;
    text-align: center;
}

.fs52 {
    --min-size: 18;
    --max-size: 52;
    font-size: var(--clamp-size);
    font-family: var(--jp-font);
    font-weight: var(--fw_jp_medium);
	letter-spacing: 0.05em;
	line-height: 1.6;
}

.fs42 {
    --min-size: 18;
    --max-size: 42;
    font-size: var(--clamp-size);
    font-family: var(--jp-font);
    font-weight: var(--fw_jp_medium);
	letter-spacing: 0.05em;
	line-height: 1.6;
}

.fs40 {
    --min-size: 18;
    --max-size: 40;
    font-size: var(--clamp-size);
    font-family: var(--jp-font);
    font-weight: var(--fw_jp_medium);
	letter-spacing: 0.05em;
	line-height: 1.3;
}

.fs28 {
	--min-size: 18;
    --max-size: 28;
    font-size: var(--clamp-size);
    font-family: var(--jp-font);
    font-weight: var(--fw_jp_medium);
	letter-spacing: 0.05em;
	line-height: 1.5;
}

.fs24 {
	--min-size: 18;
    --max-size: 24;
    font-size: var(--clamp-size);
    font-family: var(--jp-font);
    font-weight: var(--fw_jp_medium);
	letter-spacing: 0.05em;
	line-height: 1.5;
}

.fs20 {
	--min-size: 17;
    --max-size: 20;
    font-size: var(--clamp-size);
    font-family: var(--jp-font);
    font-weight: var(--fw_jp_medium);
	letter-spacing: 0.05em;
	line-height: 1.6;
}

.fs18 {
	--min-size: 16;
    --max-size: 18;
    font-size: var(--clamp-size);
    font-family: var(--en-jp-font);
    font-weight: var(--fw_jp_regular);
	letter-spacing: 0.1em;
	line-height: 1;
}

.fs16 {
	--min-size: 14;
    --max-size: 17;
		font-size: var(--clamp-size);
		font-family: var(--jp-font);
		font-weight: var(--fw_jp_regular);
		letter-spacing: 0.05em;
		line-height: 2;
	}

.fs14 {
	--min-size: 12;
    --max-size: 14;
		font-size: var(--clamp-size);
		font-family: var(--jp-font);
		font-weight: var(--fw_jp_regular);
		letter-spacing: 0.05em;
		line-height: 2;
	}

.fs11 {
	--min-size: 10;
    --max-size: 11;
		font-size: var(--clamp-size);
		font-family: var(--jp-font);
		font-weight: var(--fw_jp_regular);
		letter-spacing: 0.05em;
		line-height: 1.4;
	}

@media screen and (max-width: 600px) {
	.fs60 {
		font-size: 24px;
	}
	.fs52 {
		font-size: 20px;
	}	
	.fs42 {
		font-size: 18px;
	}
	.fs40 {
		font-size: 18px;
	}
	.fs24,
	.fs24 span {
		font-size: 16px;
	}
	.fs20 {
		font-size: 16px;
	}
	.fs18 {
		font-size: 14px;
	}
	.fs16,
	.fs16 span {
		font-size: 14px;
	}
	.fs14 {
		font-size: 13px;
	}
	.fs11 {
		font-size: 10px;
	}
}

.accent {
	font-weight: 500 !important;
	color: var(--color_accent) !important;
	text-transform: uppercase !important;
}

.medium {
	font-weight: var(--fw_en_medium) !important;
}

.egg-dot {
	position: relative;
	display: flex;
	align-items: center;
}
.egg-dot::before {
	content: "";
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.2em;
	border-radius: 50%;
	background: var(--gradation-radial-primary);
}

/* ヘッダー設定 */
#header-block {
	position: fixed;
	top: 0;
	background-color: transparent;
	width: 100%;
	z-index: 999;
	height: var(--header-height);
	padding-inline: var(--header-padding-inline);
	transition: var(--transition-primary);
	-webkit-transition: var(--transition-primary);
	-moz-transition: var(--transition-primary);
	-ms-transition: var(--transition-primary);
	-o-transition: var(--transition-primary);
}

#header-block .header__container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	margin: 0 auto;
}

#header-block .header__logo {
	width: var(--header-top-link);
	height: var(--header-height);
	display: flex;
	justify-content: center;
	align-items: center;
	/* padding-inline: 20px; */
	background-color: var(--color_white);
	border-radius: 0 0 var(--radius-xs);
}

#header-block .header__logo > a {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-inline: 20px;
}

/* PC用ロゴ */
#header-block .header__logo img {
	width: 100%;
	object-fit: contain;
}
/* モバイル用ロゴ */
@media screen and (max-width: 450px) {
	#header-block .header__logo img {
		width: 42px;
		height: 42px;
	}
}

#header-block .nav-unit {
	/* width: 80%; */
}

#header-block .header__nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background-color: var(--color_primary);
	border-radius: 0 0 0 var(--radius-xs);
	padding-left: var(--space-s);
	font-weight: 500;
}

#header-block .header__nav > ul {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
}

#header-block .header__nav > ul > li {
	transition: all var(--transition-primary);
	-webkit-transition: all var(--transition-primary);
	-moz-transition: all var(--transition-primary);
	-ms-transition: all var(--transition-primary);
	-o-transition: all var(--transition-primary);
	position: relative;
}

#header-block .header__nav > ul > li > a {
	color: var(--color_black);
	letter-spacing: 0.05em;
	text-decoration: none;
	text-align: center;
	line-height: 1;
	height: var(--header-height);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5em;
	padding: 0 var(--space-s);
	position: relative;
	white-space: nowrap;
}

.menu_has-chevron {
	display: flex;
	align-items: center;
	gap: 0.3em;
}
.chevron-down {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-top: 0.2em;
	background: url("../img/common/chevron-down.svg") center / cover no-repeat;
}

a:hover .chevron-down {
	transform: translateY(0.2em);
	transition: var(--transition-primary);
}

.header__en {
	color: white;
	text-transform: uppercase;
	font-family: var(--en-font);
	font-size: 12px;
	transition: var(--transition-primary);
}

a:hover > .header__en {
	color: var(--color_accent);
	transition: var(--transition-primary);
}

#header-block .header__nav > ul > a:hover::before {
	color: var(--color_accent);
	transition: var(--transition-primary);
}

#header-block .header__nav > ul > li > .nav-child {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 100%;
	left: 10px;
	margin-top: 10px;
	min-width: 10em;
	max-width: 14em;
	border-radius: var(--radius-xs);
	box-shadow: 3px 3px 6px var(--color_black-op03);
	overflow: hidden;
	transition: all var(--transition-primary);
	-webkit-transition: all var(--transition-primary);
	-moz-transition: all var(--transition-primary);
	-ms-transition: all var(--transition-primary);
	-o-transition: all var(--transition-primary);
}

#header-block .header__nav > ul > li:hover > .nav-child {
	visibility: visible;
	opacity: 1;
}

#header-block .header__nav .nav-child > li > a {
	font-size: 14px;
	line-height: 1.5;
	color: var(--color_black);
	text-decoration: none;
	padding: 0.7em 1.2em;
	width: 100%;
	position: relative;
	text-align: left;
	background-color: var(--color_white);
	display: block;
	transition: all var(--transition-primary);
	-webkit-transition: all var(--transition-primary);
	-moz-transition: all var(--transition-primary);
	-ms-transition: all var(--transition-primary);
	-o-transition: all var(--transition-primary);
}

#header-block .header__nav .nav-child > li > a:hover {
	color: var(--color_black);
	background-color: var(--color_primary);
	transition: var(--transition-primary);
}

#header-block .header__nav .nav-btn {
	margin-left: 10px;
	width: 100%;
	max-width: 180px;
	height: var(--header-height);
	display: flex;
	justify-content: center;
	align-items: center;
}

#header-block .header__nav .nav-btn .nav-btn__link {
	color: var(--color_primary);
	letter-spacing: 0.05em;
	text-decoration: none;
	text-align: center;
	line-height: 1;
	width: 100%;
	height: 100%;
	background-color: var(--color_black);
	transition: all var(--transition-primary);
	-moz-transition: all var(--transition-primary);
	-ms-transition: all var(--transition-primary);
	-o-transition: all var(--transition-primary);
	-webkit-transition: all var(--transition-primary);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5em;
	padding: 0 38px;
	position: relative;
	white-space: nowrap;
}

#header-block .header__nav .nav-btn .nav-btn__link:hover {
	background-color: var(--color_secondary);
	color: var(--color_black);
}

/* オンラインストア カートアイコン */
#header-block .header__nav a .header__cart {
	--cart-icon-size: 48px;
	width: var(--cart-icon-size);
	height: var(--cart-icon-size);
	border-radius: 50%;
	padding: calc(var(--cart-icon-size) / 5) calc(var(--cart-icon-size) / 6) calc(var(--cart-icon-size) / 8) calc(var(--cart-icon-size) / 7);
	background-color: var(--color_white);
	box-shadow: 3px 3px 6px var(--color_black-op03);
	transition: var(--transition-primary);
}

#header-block .header__nav a:hover .header__cart {
	background-color: var(--color_secondary);
	transition: var(--transition-primary);
}

/* フッター設定 */
#footer-block {
	background-color: var(--color_ivory);
	color: var(--color_black);
	padding-block-start: var(--space-xl);
	padding-block-end: var(--space-xs);
	padding-inline: var(--size1);
	container-type: inline-size;
}

#footer-block .footer__container {
	max-width: var(--content_w_lg);
	display: grid;
	justify-content: space-between;
	grid-template-columns: 2fr 3fr auto min(156px, 10vw);
	grid-template-areas:
		"content description description description" 
		"content nav sub-nav character" 
		"copy copy copy copy"
		;
	row-gap: var(--space-l);
	column-gap: clamp(var(--space-xs), 4.9vw, var(--space-l));
	margin: 0 auto;
	/* width: 90%; */
}

@container (width <= 900px) {
	#footer-block .footer__container {
		grid-template-columns: 2fr 3fr min(156px, 10vw);
		grid-template-areas:
		"content description description"
		"content nav nav"
		"content sub-nav character"
		"copy copy copy"
		;
	}
}
@container (width <= 768px) {
	#footer-block .footer__container {
		grid-template-columns: 2fr 3fr min(156px, 10vw);
		grid-template-areas:
		"content description description"
		"content nav nav"
		"content sub-nav character"
		"copy copy copy"
		;
		row-gap: var(--space-s);
	}
}
@container (width <= 400px) {
	#footer-block .footer__container {
		grid-template-columns: 1fr clamp(80px, 10vw, 156px);
		grid-template-areas:
		"content content"
		"description description"
		"nav nav"
		"sub-nav character"
		"copy copy"
		;
	}
}


#footer-block .footer__content .footer__logo {
	max-width: 300px;
}

#footer-block .footer__content .company-name {
	font-size: 16px;
	letter-spacing: 0.1em;
	font-weight: var(--fw_jp_bold);
}

#footer-block .footer__content address {
	font-size: 14px;
	font-style: normal;
}

#footer-block .footer__description {
	grid-area: description;
	padding-bottom: var(--space-l);
	border-bottom: 1px solid var(--color_black-op03);
}
#footer-block .footer__description-title {
	font-weight: var(--fw_jp_regular);
}

#footer-block .footer__nav-wrapper {
	grid-area: nav;
	container-type: inline-size;
}

#footer-block .footer__nav > ul {
	column-count: 3;
}

@container (width <= 500px) {
	#footer-block .footer__nav > ul {
		column-count: 2;
	}
}
@container (width <= 280px) {
	#footer-block .footer__nav > ul {
		column-count: 1;
	}
}

#footer-block .footer__nav li {
	width: fit-content;
	max-width: 10em;
	white-space: nowrap;
}

#footer-block .footer__nav a {
	text-decoration: none;
	transition: all var(--transition-primary);
	-webkit-transition: all var(--transition-primary);
	-moz-transition: all var(--transition-primary);
	-ms-transition: all var(--transition-primary);
	-o-transition: all var(--transition-primary);
}

#footer-block .footer__nav a:hover {
	text-decoration: underline;
}

#footer-block .footer__nav a span {
	margin-left: 1em;
}

#footer-block .footer__content {
	grid-area: content;
	container-type: inline-size;
	/* margin: 60px auto; */
}

#footer-block .footer__content img {
	object-fit: contain;
}

#footer-block .footer__content > div {
	margin-top: var(--space-xs);
}

#footer-block .footer__lead {
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.03em;
}

#footer-block .address__wrapper {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-s);
}

#footer-block .address__wrapper * {
	width: fit-content;
}

#footer-block .footer__sub-nav {
	max-width: fit-content;
	grid-area: sub-nav;
	align-self: flex-start;
	background-color: var(--color_primary);
	padding: 24px;
	border-radius: 1.2em;
}

#footer-block .footer__sub-nav ul {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 15px;
}


#footer-block .footer__sub-nav ul li:first-of-type {
	border-left: none;
}

#footer-block .footer__sub-nav a {
	text-decoration: none;
	transition: all var(--transition-primary);
	-webkit-transition: all var(--transition-primary);
	-moz-transition: all var(--transition-primary);
	-ms-transition: all var(--transition-primary);
	-o-transition: all var(--transition-primary);
}

#footer-block .footer__sub-nav .header__cart {
	display: flex;
	align-items: center;
	gap: 1ch;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--color_black);
}

#footer-block .footer__sub-nav .header__cart img {
	width: 2em;
	height: 2em;
}

#footer-block .external-link:hover {
	color: var(--color_accent);
}

#footer-block .external-link:hover::after {
	text-decoration: none;
	background: url("../img/common/external-link_hover02.svg") center / contain no-repeat;
}


#footer-block .tamagorou__circle {
	opacity: 1;
}
/* -------------------------
たまごろうと円形テキスト start
------------------------- */

.tamagorou__circle {
	grid-area: character;
	/* align-self: flex-end; */
	position: relative;
	aspect-ratio: 1 / 1;
	opacity: 0;
}

#main-content:not(.hidden) .tamagorou__circle {
	animation: fadein 0.5s 1s ease-in forwards;
}

@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.tamagorou__text, .tamagorou__character {
	width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.tamagorou__text {
	left: 0%;
	top: 0%;
	animation: rotation 40s linear infinite;
}


@keyframes rotation {
	0% { 
		transform:rotate(0);
	}
	100% { 
		transform:rotate(360deg); 
	}
  }

/* -------------------------
copyrights
------------------------- */

#footer-block .footer__copyrights {
	grid-area: copy;
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
}

/* -------------------------
下層ページのh2 .sec-ttl
------------------------- */

.sec-ttl {
    margin-bottom: var(--space-l);
    text-align: center;
}

.sec-ttl-en {
	display: block;
}

/* ---------------------------
下層ページのコンテンツ .sec-content
--------------------------- */

.sec-content + .sec-content {
	margin-top: var(--space-m);
}

/*********************************************/
/* お問い合わせ section .contact-sec */
/*********************************************/

.contact-sec {
	--contact-arc-height: 5.6vw;
	position: relative;
	background-color: var(--color_primary);
	overflow: visible;
	margin-block-start: var(--contact-arc-height);
}

.contact-sec::before {
	content: "";
	position: absolute;
	width: 100vw;
	height: var(--contact-arc-height);
	position: absolute;
	right: 0;
	top: calc(-1 * var(--contact-arc-height) + 0.5px);
	z-index: 2;
	background-color: var(--color_ivory);
	background-image: url("../img/common/background_yellow-arc.svg");
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}

.contact-sec::after {
	content: "";
	display: block;
	position: absolute;
	width: 17vw;
	height: 19.4vw;
	right: 1vw;
	top: -2vw;
	mix-blend-mode: multiply;
	background: url("../img/common/bg_email.svg") right bottom / contain no-repeat;
}

.contact-sec .inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
	gap: 1.8vw;
}

.contact-block {
	display: grid;
	/* align-items: center; */
	height: 100%;
	padding: clamp(12px, 1.6vw, 24px) clamp(24px, 3.2vw, 48px);
	border-radius: 8px;
	background-color: var(--color_ivory);
}

.tel-contact-num {
	font-size: clamp(24px, 3.4vw, 51px);
	line-height: 1.4;
	letter-spacing: 0.03em;
}
.contact-tel-link:hover .tel-contact-num {
	color: var(--color_secondary);
	transition: var(--transition-primary);
}

.tel-label {
	font-size: 0.73em;
}

.tel-contact-time {
	width: min(66%, 427px);
	margin-inline: auto;
	border-radius: 0.5em;
	background-color: var(--color_white);
	font-family: var(--en-jp-font);
	padding: 0.1em 2em;
}

.contact-block .link-btn__unit {
	margin-top: clamp(12px, 1.4vw, 22px);
}

.contact-block .link-btn__unit .link-btn {
	height: 100%;
	padding-inline: clamp(30px, 5.7vw, 86px);
}

/* ---------------------------------
文字の設定
--------------------------------- */
/* h2基本設定(コンテンツタイトル) */
.cont-ttl {
	margin: 0 auto 3em;
}

.cont-ttl.cont-ttl-center {
	text-align: center;
}

.cont-ttl .cont-ttl--jp {
	--min-size: 18;
    --max-size: 28;
    font-size: var(--clamp-size);
    font-family: var(--jp-font);
    font-weight: var(--fw_jp_medium);
	letter-spacing: 0.05em;
	line-height: 1.3;
	margin-top: 0.5em;
}

.cont-ttl .cont-ttl--en {
	--min-size: 12;
    --max-size: 14;
	font-size: var(--clamp-size);
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color_accent);
}

.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}

/* リンクボタン基本設定 */
.link-btn__unit {
	--min-size: 20;
    --max-size: 40;
    --min-viewport: 375;
    --max-viewport: 1440;
	margin-top: var(--clamp-size);
	text-align: right;
}
.link-btn__unit.align-center {
	text-align: center;
}

.finish-comment ~ .link-btn__unit {
	text-align: center;
}

.link-btn__unit .link-btn {
	position: relative;
	z-index: 1;
	min-height: 4.12em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.25em;
    padding: 0.4em 2em;
    border-radius: 0.5em;
	font-weight: var(--fw_jp_bold);
	color: var(--color_black);
	user-select: none;
}

.link-btn.link-btn--primary01 {
    background-color: var(--color_primary);
}
.link-btn.link-btn--primary02 {
    background-color: var(--color_white);
}

.link-btn__unit .link-btn--primary01:hover,
.link-btn__unit .link-btn--primary02:hover {
	background-color: var(--color_secondary);
}


.link-btn .link-btn_arrow {
    transition: 0.3s ease;
}
.link-btn:hover .link-btn_arrow {
    transform: translateX(0.5em);
    transition: 0.3s ease;
}

.link-btn_text {
	white-space: nowrap;
}

.link-btn .link-btn_img {
    width: 3em;
    height: 3em;
    background: url("../img/common/button-egg_static.svg") center / contain no-repeat;
    transition: 0.3s ease;
}
.link-btn:hover .link-btn_img {
    background-image: url("../img/common/button-egg_hover.svg");
    transition: 0.3s ease;
}



.link-btn__unit .link-btn--secondary {
	width: 250px;
	color: var(--color_white);
	background-color: var(--color_primary);
}

.link-btn__unit .link-btn--secondary:hover {
	background-color: var(--color_secondary);
}

.link-btn__unit .link-btn--tertiary {
	width: 300px;
	color: var(--color_black);
	background-color: var(--color_accent);
}

.link-btn__unit .link-btn--tertiary:hover {
	background-color: var(--color_secondary);
}

.link-btn__unit .arrow {
	display: block;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

.link-btn__unit .link-btn--primary .arrow svg {
	fill: var(--color_white);
}

.link-btn__unit .link-btn--secondary .arrow svg {
	fill: var(--color_white);
}

.link-btn__unit .link-btn--tertiary .arrow svg {
	fill: var(--color_black);
}

/* 等速で左に流れるスライダーの設定 */
.swiper-left {
	margin-inline: calc(50% - 50vw);
	overflow: hidden;
	pointer-events: none;
}
.swiper-left figure {
	display: block;
}

.slider-circle-wrapper {
	position: relative;
	overflow: visible;
	padding-block: var(--circle-slide-margin);
}
.slider-circle-wrapper::before {
	content: "";
	display: block;
	width: 100vw;
	height: var(--circle-slide-margin);
	position: absolute;
	top: 0.5px;
	left: 0;
	z-index: 0;
	background-color: transparent;
	background-image: url("../img/oem/oem-slide-bg-arc.svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.slider-circle-wrapper::after {
	content: "";
	display: block;
	width: 100vw;
	height: var(--circle-slide-margin);
	position: absolute;
	bottom: 0.5px;
	left: 0;
	z-index: 0;
	transform: rotate(180deg);
	background-color: transparent;
	background-image: url("../img/oem/oem-slide-bg-arc.svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.swiper-left.circle {
	background-color: var(--color_primary);
	position: relative;
	overflow: hidden;
}

.swiper-left.circle figure {
	overflow: hidden;
	border-radius: 50%;
}
.swiper-left.circle figure:nth-of-type(even) {
	margin-top: 5%;
}
.swiper-left .swiper-wrapper {
	animation-play-state: running;
	transition-timing-function: linear;
}

/* パンクズリスト設定 */
.breadcrumbs-block {
	color: var(--color_black);
	font-size: 13px;
	padding: 10px 20px;
}

.breadcrumbs-block ol {
	display: flex;
}

.breadcrumbs-block ol li {
	position: relative;
	padding-right: 20px;
}

.breadcrumbs-block ol li:last-of-type {
	padding-right: 0;
}

.breadcrumbs-block ol li::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%) rotate(45deg);
	-webkit-transform: translateY(-50%) rotate(45deg);
	-moz-transform: translateY(-50%) rotate(45deg);
	-ms-transform: translateY(-50%) rotate(45deg);
	-o-transform: translateY(-50%) rotate(45deg);
	border: 1px solid currentColor;
	border-left: none;
	border-bottom: none;
	width: 0.5em;
	height: 0.5em;
}

.breadcrumbs-block ol li:last-of-type::after {
	content: none;
}

.breadcrumbs-block a {
	color: var(--color_secondary);
	text-decoration: none;
}

.breadcrumbs-block a:hover {
	color: var(--color_grey);
	text-decoration: underline;
}

/* コピーライト */
.copyrights {
	font-weight: var(--fw_jp_regular);
}

/* グローバルナビの設定 */
.nav-burger-unit {
	display: none;
}

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

	/* グローバルナビ切り替え */
	.nav-burger-unit {
		--burger-padding: clamp(20px, 3vw, 60px);
		display: block;
	}
	.nav-unit {
		display: none;
	}

	/*** ハンバーガーボタン ***/
	.nav-burger-unit .open-btn {
		position: absolute;
		z-index: 9999;
		top: 0;
		right: 0;
		cursor: pointer;
		width: var(--hamburger-width);
		height: var(--hamburger-width);
		background-color: var(--color_primary);
		border-radius: 0 0 0 var(--radius-xs);
	}

	/* ×に変化 */
	.nav-burger-unit .open-btn span {
		display: inline-block;
		position: absolute;
		left: 14px;
		height: 2px;
		border-radius: 0;
		background-color: var(--color_black);
		width: 45%;
		transition: all 0.4s;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		-ms-transition: all 0.4s;
		-o-transition: all 0.4s;
	}

	.nav-burger-unit .open-btn span:nth-of-type(1) {
		top:15px;
	}

	.nav-burger-unit .open-btn span:nth-of-type(2) {
		top:23px;
	}

	.nav-burger-unit .open-btn span:nth-of-type(3) {
		top:31px;
	}

	.nav-burger-unit .open-btn.active {
		position: fixed;
	}

	.nav-burger-unit .open-btn.active span:nth-of-type(1) {
		top: 18px;
		left: 15px;
		width: 40%;
		transform: translateY(6px) rotate(-45deg);
		-webkit-transform: translateY(6px) rotate(-45deg);
		-moz-transform: translateY(6px) rotate(-45deg);
		-ms-transform: translateY(6px) rotate(-45deg);
		-o-transform: translateY(6px) rotate(-45deg);
	}

	.nav-burger-unit .open-btn.active span:nth-of-type(2) {
		opacity: 0;
	}

	.nav-burger-unit .open-btn.active span:nth-of-type(3){
		top: 30px;
		left: 15px;
		width: 40%;
		transform: translateY(-6px) rotate(45deg);
		-webkit-transform: translateY(-6px) rotate(45deg);
		-moz-transform: translateY(-6px) rotate(45deg);
		-ms-transform: translateY(-6px) rotate(45deg);
		-o-transform: translateY(-6px) rotate(45deg);
	}

	/*** ハンバーガーメニュー ***/
	.header__nav-burger {
		position: fixed;
		z-index: 999;
		top: 0;
		right: -200%;
		width: 100%;
		height: 100vh;
		background: var(--color05);
		transition: all 0.6s;
		-webkit-transition: all 0.6s;
		-moz-transition: all 0.6s;
		-ms-transition: all 0.6s;
		-o-transition: all 0.6s;
	}

	.header__nav-burger.panel-active {
		right: 0;
		width: 100%;
		background-color: var(--color_white);
	}

	/* ナビゲーションの縦スクロール */
	.header__nav-burger.panel-active .nav-burger__inner {
		position: fixed;
		z-index: 999;
		width: 100%;
		height: 100vh;
		margin: 0 auto;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* ナビゲーション内のロゴ */
	.header__nav-burger .nav-burger__logo {
		width: 50%;
		max-width: 200px;
		margin-inline: auto;
		margin-block-start: 40px;
	}


	/* ナビゲーション */
	.nav-burger__list {
		padding: var(--burger-padding);
	}

	.nav-burger__list > ul {
		column-count: 2;
		column-gap: var(--space-m);
		/* display: grid;
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
		column-gap: 40px; */
		margin: var(--burger-padding) auto;
	}

	/* リストのレイアウト設定 */
	.nav-burger__list > ul > li {
		list-style: none;
		text-align: center;
		border-bottom: solid 1px VAR(--color_black);
		transition: var(--transition-primary);
	}
	.nav-burger__list > ul > li:hover {
		border-bottom: solid 1px VAR(--color_accent);
		transition: var(--transition-primary);
	}

	.nav-burger__link {
		width: 100%;
		padding: 20px 35px 20px 5px;
		position: relative;
		z-index: +1;
		cursor: pointer;
		transition: .35s;
		font-size: 17px;
		line-height: 1.5;
		font-weight: 500;
		letter-spacing: 0.05em;
		text-align: left;
		-webkit-transition: .35s;
		-moz-transition: .35s;
		-ms-transition: .35s;
		-o-transition: .35s;
	}

	.nav-burger__link.open {
		width:100%;
	}

	.nav-burger__link p {
		width: fit-content;
	}

	.nav-burger__link > a {
		display: block;
		text-decoration: none;
		color: var(--color_black);
	}

	.header__en {
		font-size: 11px;
		color: var(--color_grey);
		margin-left: 4px;
		white-space: nowrap;
		transition: var(--transition-primary);
	}
	.nav-burger__link:hover .header__en {
		color: var(--color_accent);
		transition: var(--transition-primary);
	}

	/* オンラインストア カートアイコン */
	.header__cart-container {
		display: block;
		align-items: center;
	}
	.nav-burger__link .header__cart {
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}
	.nav-burger__link .header__cart img {
		--cart-icon-size: 1.2em;
		width: var(--cart-icon-size);
		height: var(--cart-icon-size);
	}

	.nav-burger__link .add-mark {
		position: absolute;
		top: 50%;
		right: 5px;
		width: 16px;
		height: 16px;
		margin-top: -10px;
	}

	.add-mark:before, .add-mark:after {
		position: absolute;
		content: "";
		margin: auto;
		vertical-align: middle;
	}

	.add-mark:before {
		border-top: 2px solid var(--color_black);
		width: 14px;
		height: 0;
		top: 6px;
		bottom: 0;
		right: 0;
	}

	.add-mark:after {
		border-left: 2px solid var(--color_black);
		width: 0;
		height: 14px;
		top: 6px;
		bottom: 0;
		left: 8px;
		transition: .3s;
		-webkit-transition: .3s;
		-moz-transition: .3s;
		-ms-transition: .3s;
		-o-transition: .3s;
	}

	.nav-burger__link.open .add-mark:after {
		height: 0;
	}

	.nav-burger__link-child {
		display: none;
		width: 100%;
		padding: 0 8px 20px 8px;
	}
	.nav-burger__link-child * {
		width: 100%;
		width: stretch;
	}

	.nav-burger__link-child a {
		text-align: left;
		display: block;
		font-size: 15px;
		letter-spacing: 0.05em;
		margin-bottom: 10px;
		position: relative;
		padding: 0 1em 0 1em;
		color: var(--color_black);
		text-decoration: none;
		max-width: 160px;
	}

	.nav-burger__link-child a:not(.external-link)::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%) rotate(45deg);
		-webkit-transform: translateY(-50%) rotate(45deg);
		-moz-transform: translateY(-50%) rotate(45deg);
		-ms-transform: translateY(-50%) rotate(45deg);
		-o-transform: translateY(-50%) rotate(45deg);
		width: 0.5em;
		height: 0.5em;
		border: 1px solid currentColor;
		border-left: none;
		border-bottom: none;
	}

	.nav-burger__link-child li:last-of-type a {
		margin-bottom: 0;
	}

	/*** ハンバーガーメニュー-end ***/


	main {
		padding-top: var(--main-padding-top);
	}

	#header-block {
		height: var(--main-padding-top);
	}

	#header-block .header__logo {
		position: fixed;
        top: 0;
		height: var(--hamburger-width);
		min-width: var(--hamburger-width);
	}

}


/* スマートフォン用 */
@media screen and (max-width: 768px) {

	body {
		font-size: 14px;
		line-height: 1.8;
	}
	/* フッター設定 */
	#footer-block {
		padding-block-start: 10px;
		padding-block-end: 20px;
	}

	#footer-block .footer__description {
		font-size: 10px;
		line-height: 1.6;
		padding-bottom: var(--space-m);
	}

	#footer-block .footer__lead {
		font-size: 11px;
		line-height: 1.6;
		padding-bottom: 0.2em;
	}

	#footer-block .footer__content .footer__logo {
		max-width: 230px;
	}

	#footer-block .footer__content .company-name {
		font-size: 12px;
	}

	#footer-block .footer__content address {
		max-width: 12em;
		font-size: 12px;
		line-height: 1.5;
	}

	#footer-block .footer__nav > ul {
		column-count: 2;
		column-gap: var(--space-xs);
	}
	
	#footer-block .footer__nav a {
		font-size: 12px;
		padding-block: 0.2em;
	}

	.circle-mark {
		font-size: 12px;
	}

	#footer-block .footer__sub-nav {
		padding: var(--space-m) var(--space-l);
	}

	#footer-block .footer__sub-nav a {
		font-size: 12px;
	}

	#footer-block .footer__copyrights {
		font-size: 12px;
		margin-top: 10px;
	}


	/* h1基本設定（下層ページタイトル） */
	#page-title-block {
		padding: 80px 0;
	}

	/* スペース */
	.wrapper {
		padding-block: calc(var(--clamp-size) * 0.5);
	}


	/* リンクボタン基本設定 */

	/* パンクズリスト設定 */
	.breadcrumbs-block {
		font-size: 12px;
		padding: 10px 0;
	}

	.breadcrumbs-block ol {
		width: 90%;
		margin: 0 auto;
	}

	.breadcrumbs-block ol li::after {
		width: 0.4em;
		height: 0.4em;
	}

	.point-sec:nth-child(even){
		margin-left: 10%;
	}
	.contact-sec .inner {
		grid-template-columns: 1fr;
	}

	.link-btn__unit .link-btn {
		padding-inline: 1em;
	}
}

@media screen and (width <= 800px) {
	.nav-burger__list > ul {
		column-count: 1;
	}
}

@media screen and (width <= 450px) {
	#header-block .header__logo {
		width: var(--hamburger-width);
		padding-inline: 0;
	}
	#header-block .header__logo > a {
		padding-inline: 4px;
	}

	/* 下層ページタイトルセクション */
	#page-title-sec {
		padding-bottom: 1em;
		border-radius: 0 0 0 var(--radius-xl);
	}
	#page-title-sec:has(.container.column-2) {
		padding-bottom: var(--size3);
		border-radius: 0 0 var(--radius-xl) var(--radius-xl);
	}

	#page-title-sec::before,
	#page-title-sec::after {
		display: none;
	}

	/* #page-title-sec.wrapper:has(.container.column-2) */
	/* 2カラムコンテナ */
	#page-title-sec.wrapper:has(.container.column-2) {
		grid-template-columns: var(--size1) 1fr var(--size1);
		grid-template-rows: auto var(--size2) 1fr;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	#page-title-sec.wrapper:has(.container.column-2) .page-ttl-content {
		padding-inline-end: var(--size1);
		grid-column: 2 / -1;
		grid-row: 1 / -2;
		padding-bottom: 5em;
	}
	
	#page-title-sec.wrapper:has(.container.column-2) .page-ttl-content::before {
		left: calc(var(--size1) * -1);
	}
	#page-title-sec.wrapper:has(.container.column-2) .page-ttl-content::after {
		left: calc(var(--size1) * -1);
		border-radius: 0 0 0 var(--radius-xxl);
		/* height: calc(100% + var(--size3)); */
	}
	#page-title-sec.wrapper:has(.container.column-2) .inner {
		grid-column: 2 / -1;
		grid-row: 2 / -1;
	}

	.nav-burger__list > ul {
		display: grid;
		grid-template-columns: 1fr;
		margin: var(--burger-padding) auto;
	}

	.nav-burger__link-child :is(p, a) {
		max-width: 100%;
	}

	/* コピーライト */
	.copyrights {
		font-size: 10px;
	}
}