@charset "utf-8";


/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("theme.css");
@import url("inview.css");


/*animation1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {right: -200px;}
	100% {right: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html {
	font-size: clamp(13px, 0.29vw + 11.9px, 16px);	/*画面幅375px〜1400pxの間で、13px〜16pxに可変。下でrem管理しているものも連動します。*/
	overflow-x: visible;
}
body {
	margin: 0;padding:0;
	font-family: var(--base-font);	/*フォント指定。theme.cssのbase-fontを読み込みます。*/
	font-weight: 300;
	-webkit-text-size-adjust: none;
	background: var(--bg-color);	/*背景色。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	line-height: 2;		/*行間*/
	overflow-x: hidden;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}


/*section
---------------------------------------------------------------------------*/
section {
	padding: var(--content-space-v, var(--content-space-l)) var(--content-space-l);	/*上下、左右へのsection内の余白。上下はtheme.cssのcontent-space-v（無い場合はcontent-space-l）、左右はcontent-space-lを読み込みます。上下のセクションが隣り合うと、2つ分の余白になります。*/
}

/*section内の最初と最後の要素のマージンはリセット（余白はsectionのpaddingで管理する為）*/
section > :first-child {margin-top: 0;}
section > :last-child {margin-bottom: 0;}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
	text-decoration: none;
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	animation: opa1 0.2s 0.2s both;  /*0.2(2つ目の数字)秒待機後、0.2(1つ目の数字)秒かけてフェードイン*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダー*/
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;		/*ロゴとメニューブロックの間に空けるスペース。2文字分。*/
	height: 90px;	/*ヘッダーの高さ。お好みで。*/
	margin-inline: var(--content-space-l);	/*左右の余白。theme.cssのcontent-space-lを読み込みます*/
	border-bottom: 1px solid var(--bg-border-color);	/*下の線の幅、線種、var以降は色の指定で、theme.cssのbg-border-colorを読み込みます。*/
}

/*ロゴと横の英語を囲むブロック*/
header .logo-area {
	display: flex;
	align-items: center;
	gap: 1.5rem;	/*ロゴと英語の間に空けるスペース。1.5文字分。*/
}

/*ロゴ画像*/
header .logo {margin: 0;flex-shrink: 0;}
header .logo img {
	display: block;
	width: 130px;	/*ロゴの幅。お好みで。*/
}

/*ロゴ横の英語*/
header .logo-area p {
	margin: 0;
	font-family: var(--accent-font);	/*theme.cssのaccent-fontを読み込みます。*/
	font-size: 0.7rem;		/*文字サイズ70%*/
	letter-spacing: 0.2em;	/*文字間隔を少しだけ広く*/
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	/*ロゴ横の英語を非表示に*/
	header .logo-area p {
		display: none;
	}

	}/*追加指定ここまで*/


/*メニューオーバーレイ（メニュー領域外クリックで閉じる用）
---------------------------------------------------------------------------*/
#menubar-overlay {
	display: none;
	position: fixed;
	z-index: 99;	/*#menubar(100)の下、ページの上*/
	top: 0;left: 0;
	width: 100%;height: 100%;
	background: rgba(0,0,0,0.3);	/*半透明の黒。お好みで濃さを調整。*/
}

/*noscroll（メニュー表示中のスクロール禁止用）*/
body.noscroll {
	overflow: hidden;
}


/*大きな端末で見たメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
.large-screen #menubar > nav > ul {
	display: flex;
	align-items: center;
	gap: 2.5rem;	/*メニュー同士に空けるスペース。2.5文字分。*/
	font-family: var(--accent-font);	/*theme.cssのaccent-fontを読み込みます。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
	font-weight: 400;
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li a {
	display: block;text-decoration: none;
	position: relative;
	padding-bottom: 0.3rem;	/*文字と下線の間のスペース*/
}

/*下線（マウスオンで左から右へすっと伸びます）*/
.large-screen #menubar > nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;		/*線の太さ*/
	background: currentColor;	/*線の色。文字と同じ色。*/
	transform: scaleX(0);		/*最初は長さ0で見えない状態*/
	transform-origin: right;	/*マウスが離れた時は、右へ縮んで消えます*/
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);	/*線が伸びる時間。0.4秒。*/
}

/*マウスオン時と、現在表示中のメニュー（current）は線を表示*/
.large-screen #menubar > nav > ul > li > a:hover::after,
.large-screen #menubar > nav > ul > li.current > a::after {
	transform: scaleX(1);
	transform-origin: left;	/*左から右へ伸ばす*/
}

/*大きな端末で見た場合のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウン全体*/
.large-screen #menubar ul ul {
	position: absolute;z-index: 100;
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}

/*メニュー１個あたり*/
.large-screen #menubar ul ul a {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	padding: 0.2rem 1rem;	/*上下に0.2文字分、左右に1文字分の余白*/
	margin-top: 5px;		/*メニュー同士の間に空けるスペース*/
	border: 1px solid var(--bg-border-color);	/*枠線の幅、線種、最後は色の指定でtheme.cssのbg-border-colorを読み込みます。*/
}


/*小さな端末で見たメニュー（開閉メニュー）
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
.small-screen #menubar {
	animation: animation1 0.2s both;
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 50%;	/*画面の半分の幅*/
	height: 100%;
	padding: 100px var(--content-space-l) 50px;	/*上に100px、左右にtheme.cssのcontent-space-lで指定しているサイズ、下に50pxの余白*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

.small-screen #menubar {display: none;}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	.small-screen #menubar {
		width: 100%;	/*幅を100%に*/
	}

	}/*追加指定ここまで*/

/*メニュー１個あたり*/
.small-screen #menubar a {
	display: block;text-decoration: none;
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
	padding: 1rem 2rem;		/*メニュー内の余白。上下に１文字分、左右に２文字分。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*現在表示中のメニュー（current）*/
.small-screen #menubar li.current a {
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*子メニュー（ドロップダウンメニュー）*/
.small-screen #menubar ul ul a {
	margin-left: 2rem;	/*左に２文字分のスペースを空ける*/
	padding: 0.5rem 1.5rem;	/*メニュー内の余白。上下に0.5文字分、左右に1.5文字分。*/
}

/*ドロップダウンのアイコン*/
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f078";		/*このアイコンを使う*/
	margin-right: 1em;		/*アイコンとメニューテキストとの間に空けるスペース。1文字分。*/
	font-size: 0.7em;		/*アイコンサイズ。70%*/
	vertical-align: middle;
	display: inline-block;
	line-height: 1;
}


/*ドロップダウン共通（デフォルトで非表示。チラつかないよう念の為。）
---------------------------------------------------------------------------*/
#menubar ul ul {display: none;}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
	display: none; /* デフォルトは非表示 */
	animation: opa1 0s 0.2s both;
	cursor: pointer;
	position: fixed;
	z-index: 101;
	right: 0px;	/*右からの配置場所*/
	top: 10px;	/*上からの配置場所*/
	width: 70px;	/*ボタンの幅*/
	height: 70px;	/*ボタンの高さ*/
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;
	position: absolute;
	left: 18px;
	width: 35px;
	height: 1px;		/*線の高さ*/
	background: var(--bg-inverse-color);	/*線の色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham span {
	background: var(--primary-inverse-color);	/*線の色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*以下変更不要*/
#menubar_hdr span:nth-of-type(1) {
	top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
	top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
	top: 44px;
}
#menubar_hdr.ham span:nth-of-type(1) {
	transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
	opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
	transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
	display: flex;
}


/*メイン画像（3Dカルーセル・傾いたリング）
---------------------------------------------------------------------------*/
.mainimg * {margin: 0;padding: 0;}

/*メイン画像全体を囲むブロック*/
.mainimg {
	position: relative;
	overflow: hidden;	/*外側に回り込んだ写真を隠します*/
	padding: 3rem var(--content-space-l) 2rem;	/*上に3文字分、左右にtheme.cssのcontent-space-l、下に2文字分の余白*/
}

/*テキストブロック（大きなキャッチコピーと、右の英語のキャッチコピー）*/
.mainimg .text {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2rem;	/*英語とキャッチコピーの間に空けるスペース。2文字分。*/
}

/*大きなキャッチコピー*/
.mainimg .text h2 {
	font-family: var(--heading-font);	/*theme.cssのheading-fontを読み込みます。*/
	font-weight: 500;		/*文字の太さ*/
	font-size: 4.4vw;		/*文字サイズ。画面幅の4.4%。*/
	line-height: 1.5;		/*行間*/
	letter-spacing: 0.12em;	/*文字間隔を広く*/
}

/*右の英語のキャッチコピー*/
.mainimg .text .catch {
	font-family: var(--accent-font);	/*theme.cssのaccent-fontを読み込みます。*/
	font-size: 1.8rem;		/*文字サイズ180%*/
	line-height: 1.3;		/*行間*/
	letter-spacing: 0.02em;	/*文字間隔*/
	margin-top: 1.5rem;		/*上に空けるスペース。大きなキャッチコピーと上の高さを揃えます。*/
}

/*キャッチコピーの下の小さな英語*/
.mainimg .text .catch + p {
	font-family: var(--accent-font);	/*theme.cssのaccent-fontを読み込みます。*/
	font-size: 0.8rem;		/*文字サイズ80%*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	opacity: 0.7;			/*少しだけ薄く*/
	margin-top: 1rem;		/*上に空けるスペース*/
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	/*テキストブロックを縦並びに*/
	.mainimg .text {
		flex-direction: column;
		gap: 0;
	}

	/*大きなキャッチコピー*/
	.mainimg .text h2 {
		font-size: 7vw;	/*文字サイズ。画面幅の7%。*/
	}

	/*キャッチコピー*/
	.mainimg .text .catch {
		font-size: 1.2rem;	/*文字サイズ120%*/
	}

	}/*追加指定ここまで*/


/*カルーセルの表示エリア
---------------------------------------------------------------------------*/
.mainimg .carousel {
	position: relative;
	height: 30vw;			/*表示エリアの高さ。上から見下ろすので、奥の写真のぶんも高さをとります。*/
	margin-top: 6vw;		/*上に空けるスペース。奥の写真が上の文字に重ならないように、画面幅の6%。*/
	perspective: 100vw;		/*奥行きの強さ。小さいほど遠近感が強くなります。*/
	perspective-origin: 50% -60%;	/*見ている位置。-60%で、表示エリアより上から見下ろす形になります。50% 50%にすると真横から見たリングになります。*/
	opacity: 0;				/*写真の準備ができるまで透明にしておきます*/
	transition: opacity 0.8s;	/*ふわっと表示する時間。0.8秒。*/
}

/*写真の準備ができたら表示（jsが.is-readyを付けます）*/
.mainimg .carousel.is-ready {
	opacity: 1;
}

/*写真の下にうっすら落ちる影*/
.mainimg .carousel::after {
	content: "";
	position: absolute;z-index: -1;
	left: 20%;
	right: 20%;
	bottom: -2vw;
	height: 4vw;
	background: radial-gradient(closest-side, rgba(0,0,0,0.12), transparent);	/*中心ほど濃い楕円の影*/
}

/*写真を円形に並べる台（jsが回転させます）*/
.mainimg .ring {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;	/*中の写真を立体的に並べる指定*/
	transform: translateZ(calc(var(--radius) * -1)) rotateY(var(--rotate));	/*--radius（円の半径）と--rotate（回転の角度）はjsが入れます*/
	transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);	/*回転にかける時間。1.2秒。*/
}

/*写真１枚あたり*/
.mainimg .slide {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20vw;			/*写真の幅。画面幅の20%。*/
	aspect-ratio: 4 / 3;	/*写真の縦横比。横4：縦3。*/
	transform: translate(-50%, -50%) rotateY(var(--angle)) translateZ(calc(var(--radius) + var(--pop, 0px)));	/*--angle（円の中での位置）はjsが入れます。--popは下の「正面の写真」で指定します。*/
	backface-visibility: visible;	/*奥の写真（裏側）もうっすら見せる*/
	opacity: 0;
	filter: saturate(0.3) brightness(0.95);	/*正面以外の写真の色。彩度30%、明るさ95%。どちらも1にすると元の色のままになります。*/
	transition: opacity 1.2s, filter 1.2s, transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);	/*変化にかける時間。.ringの回転時間と揃えます。*/
	cursor: pointer;
}
.mainimg .slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*正面の写真（手前にせり出して、元の色に戻します）*/
.mainimg .slide.pos0 {
	--pop: 6vw;		/*手前にせり出す距離。0にするとせり出しません。大きくしすぎると安っぽくなるので10vwくらいまでがおすすめ。*/
	filter: saturate(1) brightness(1);	/*元の色*/
	opacity: 1;
	cursor: auto;
}

/*正面からの距離ごとの濃さ（pos1が正面の隣、pos2がその隣…。pos4は奥にあるすべての写真）*/
.mainimg .slide.pos1 {opacity: 1;}
.mainimg .slide.pos2 {opacity: 0.8;}
.mainimg .slide.pos3 {opacity: 0.5;}
.mainimg .slide.pos4 {opacity: 0.15;}

/*写真の説明（下のキャプション欄にjsがコピーするので、ここでは非表示）*/
.mainimg .slide .caption {display: none;}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	/*表示エリア*/
	.mainimg .carousel {
		height: 60vw;	/*表示エリアの高さ*/
		margin-top: 16vw;	/*上に空けるスペース*/
		perspective: 150vw;	/*奥行きの強さ*/
	}

	/*写真１枚あたり*/
	.mainimg .slide {
		width: 44vw;	/*写真の幅。画面幅の44%。*/
	}

	}/*追加指定ここまで*/

	/*動きを減らす設定にしている端末では、回転をすぐに切り替えます*/
	@media (prefers-reduced-motion: reduce) {

	.mainimg .ring, .mainimg .slide {
		transition: none;
	}

	}/*追加指定ここまで*/


/*カルーセルの下のキャプションと操作ボタン（正面の写真の真下に、中央揃えで並べます）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.mainimg .carousel-nav {
	display: flex;
	flex-direction: column;	/*縦に並べる*/
	align-items: center;	/*中央揃え*/
	gap: 1.2rem;			/*キャプションと矢印の間に空けるスペース*/
	margin-top: 1.5rem;		/*上に空けるスペース。1.5文字分。*/
	text-align: center;
	font-family: var(--accent-font);	/*theme.cssのaccent-fontを読み込みます。*/
}

/*キャプション（中身はjsが表示中の写真からコピーします）*/
.mainimg .carousel-caption {
	animation: opa1 0.8s both;	/*切り替わるたびにフェードイン*/
}

/*商品名*/
.mainimg .carousel-caption .name {
	font-size: 1.15rem;		/*文字サイズ115%*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*番号（jsが商品名の前に付けます）*/
.mainimg .carousel-caption .num::after {
	content: "—";	/*番号と商品名の間の線*/
	margin: 0 0.8em;
}

/*補足の説明*/
.mainimg .carousel-caption .info {
	margin-top: 0.2rem;
	font-size: 0.85rem;	/*文字サイズ85%*/
	opacity: 0.6;		/*少しだけ薄く*/
}

/*View menuのリンク*/
.mainimg .carousel-caption .more {
	margin-top: 0.8rem;
}
.mainimg .carousel-caption .more a {
	text-decoration: none;
	font-size: 0.85rem;		/*文字サイズ85%*/
	padding-bottom: 0.3rem;	/*文字と下線の間のスペース*/
	border-bottom: 2px solid var(--accent-color);	/*下線の幅、線種、var以降は色の指定でtheme.cssのaccent-colorを読み込みます。*/
}

/*矢印と枚数のブロック*/
.mainimg .carousel-ctrl {
	display: flex;
	align-items: center;
	gap: 1.5rem;	/*矢印と枚数の間に空けるスペース。1.5文字分。*/
}

/*矢印ボタン*/
.mainimg .carousel-ctrl button {
	background: none;
	border: none;
	color: inherit;
	font-size: 1.6rem;	/*矢印のサイズ*/
	line-height: 1;
	cursor: pointer;
	transition: 0.3s;
}
.mainimg .carousel-ctrl button:hover {
	opacity: 0.5;	/*マウスオン時に少し薄く*/
}

/*枚数（01 / 07）*/
.mainimg .carousel-count {
	font-size: 0.85rem;		/*文字サイズ85%*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}


/*ボタン
---------------------------------------------------------------------------*/
.btn a {
	display: inline-flex;		/*文字とSVG矢印を横並びにする*/
	align-items: center;		/*縦位置を中央に揃える*/
	text-decoration: none;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
	padding: 0.8rem 2rem;	/*上下に0.8文字分、左右に2文字分の余白*/
	font-weight: bold;		/*太字に*/
}

/*背景が白いタイプのボタン*/
.btn.inverse a {
	background: var(--primary-inverse-color);	/*背景色。theme.cssのprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);				/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*アクセントカラーのボタン*/
.btn.accent a {
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
	border: 1px solid var(--accent-color);	/*枠線の幅、線種、var以降は色の指定で、theme.cssのaccent-colorを読み込みます。*/
}


/*contents
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	min-height: 0;
}


/*main
---------------------------------------------------------------------------*/
main {
	container-type: inline-size;
}

/*main内で使用するul,ol要素（リストタグ）*/
main ul,main ol {
	margin-left: 2rem;
	margin-right: 2rem;
}

/*h2（各ブロックの見出し）*/
main h2 {
	margin: 0 0 2rem;
	font-family: var(--heading-font);	/*フォント指定。theme.cssのheading-fontを読み込みます。*/
	font-weight: 500;
	font-size: 2.4rem;		/*文字サイズ240%*/
	line-height: 1.5;		/*行間*/
	letter-spacing: 0.05em;	/*文字間隔を少しだけ広く*/
}

/*h2内のspan（上の小さな英語）*/
main h2 span {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--accent-font);	/*フォント指定。theme.cssのaccent-fontを読み込みます。*/
	font-weight: 400;
	font-size: 0.75rem;		/*文字サイズ75%*/
	letter-spacing: 0.2em;	/*文字間隔を広く*/
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	main h2 {
		font-size: 1.8rem;	/*文字サイズ180%*/
	}

	}/*追加指定ここまで*/

/*「詳しく見る」などのリンク*/
.more a {
	display: inline-block;
	text-decoration: none;
	font-size: 0.85rem;		/*文字サイズ85%*/
	padding-bottom: 0.3rem;	/*文字と下線の間のスペース*/
	border-bottom: 1px solid currentColor;	/*下線。文字と同じ色。*/
}
.more i {
	margin-left: 0.8rem;	/*文字と矢印の間のスペース*/
	transition: 0.3s;
}
.more a:hover i {
	transform: translateX(4px);	/*マウスオンで矢印を右に4px動かす*/
}


/*２カラム（.c2をつけたブロックを左右2列に）
---------------------------------------------------------------------------*/
main .c2 {
	display: flex;
	align-items: center;
	gap: 6vw;	/*左右の間に空けるスペース。画面幅の6%。*/
}
main .c2 > div {
	flex: 1;
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	main .c2 {
		flex-direction: column;	/*縦積みに*/
		align-items: stretch;
		gap: 2rem;
	}

	}/*追加指定ここまで*/


/*concept（「コンセプト」ブロック）
---------------------------------------------------------------------------*/
#concept .image {
	flex: 0 0 38%;	/*写真の幅。38%。*/
}
#concept .image img {
	display: block;
	width: 100%;
}

/*文章*/
#concept .text p {
	line-height: 2.2;	/*行間を少しだけ広く*/
}


/*gallery1（「季節のおすすめ」ブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.gallery1 {
	display: flex;
	gap: 1rem;	/*左右のブロックの間に空けるスペース。1文字分。*/
}

/*左側（大きめの写真と説明文）*/
.gallery1 .left {
	flex: 1;min-width: 0;
}

/*右側（小さめの写真2枚を縦積み）*/
.gallery1 .right {
	width: 38%;		/*幅。お好みで。*/
	display: flex;
	flex-direction: column;	/*縦積み*/
	gap: 1rem;		/*上下の写真の間のスペース。1文字分。*/
}

/*画像*/
.gallery1 img {
	display: block;
	width: 100%;
}

/*写真の角を丸くする場合（gallery1にkadomaruを追加）*/
.gallery1.kadomaru img {
	border-radius: 1rem;	/*角の丸み。1文字分。*/
}

/*説明文*/
.gallery1 .left p {
	margin-top: 1rem;
}

/*タイトル*/
.gallery1 .left .name {
	font-family: var(--accent-font);	/*フォント指定。theme.cssのaccent-fontを読み込みます。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*メニューを見るリンク*/
#menu .more {
	margin-top: 2rem;
}


/*list1（「こだわり」ブロック、「メニュー」ページ）
---------------------------------------------------------------------------*/
.list1 * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 3rem 2rem;		/*ボックス同士の間に空けるスペース。上下に3文字分、左右に2文字分。*/
}

/*2列にする場合（「メニュー」ページ）*/
.list1.col2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));	/*2列*/
	gap: 4rem 3rem;		/*上下に4文字分、左右に3文字分。*/
}

	/*@container対応ブラウザでは、コンテナ幅(この場合はmain)が699px以下で1カラム*/
	@container (max-width: 699px) {
		.list1, .list1.col2 { grid-template-columns: 1fr; }
	}

/*ボックス１個あたり*/
.list1 .list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/*画像*/
.list1 .list img {
	display: block;
	width: 100%;
}

/*テキストボックス*/
.list1 .list .text {
	flex: 1;
}

/*見出し*/
.list1 .list h4 {
	font-family: var(--heading-font);	/*フォント指定。theme.cssのheading-fontを読み込みます。*/
	font-weight: 500;
	font-size: 1.3rem;	/*文字サイズ130%*/
	margin-bottom: 0.5rem;
}

/*説明文*/
.list1 .list p {
	font-size: 0.9rem;	/*文字サイズ90%*/
	line-height: 1.8;	/*行間*/
}


/*flow（「ホールケーキのご予約」ブロック）
---------------------------------------------------------------------------*/
.flow * {margin: 0;padding: 0;}

/*ボックス全体*/
main .flow {
	margin: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));	/*4列*/
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	main .flow {
		grid-template-columns: 1fr;	/*縦積みに*/
		gap: 2rem;
	}

	}/*追加指定ここまで*/

/*ボックス１個あたり*/
.flow li {
	padding: 0 2rem;	/*左右に2文字分の余白*/
	border-left: 1px solid var(--light-border-color);	/*左の線。theme.cssのlight-border-colorを読み込みます。*/
}
.flow li:first-child {
	padding-left: 0;
	border-left: none;	/*1個目は線なし*/
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	.flow li {
		padding: 0;
		border-left: none;
	}

	}/*追加指定ここまで*/

/*番号*/
.flow .num {
	font-family: var(--accent-font);	/*フォント指定。theme.cssのaccent-fontを読み込みます。*/
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*見出し*/
.flow h4 {
	font-family: var(--heading-font);	/*フォント指定。theme.cssのheading-fontを読み込みます。*/
	font-weight: 500;
	font-size: 1.4rem;	/*文字サイズ140%*/
	margin: 0.5rem 0 1rem;
}

/*見出しの下の短い線*/
.flow h4::after {
	content: "";
	display: block;
	width: 1.5rem;		/*線の長さ*/
	height: 1px;		/*線の太さ*/
	margin-top: 1rem;	/*見出しと線の間のスペース*/
	background: currentColor;	/*線の色。文字と同じ色。*/
}

/*説明文*/
.flow p {
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.8;	/*行間*/
}


/*contact（「お問い合わせ」ブロック）
---------------------------------------------------------------------------*/
#contact {
	padding-top: 6rem;		/*上の余白*/
	padding-bottom: 1rem;	/*下の余白（すぐ下のフッターにも余白があります）*/
}

/*見出し*/
#contact h2 {
	font-size: 3rem;	/*文字サイズ300%*/
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	#contact h2 {
		font-size: 2rem;	/*文字サイズ200%*/
	}

	}/*追加指定ここまで*/

/*右側（ボタンと電話番号）*/
#contact .c2 > div:last-child {
	flex: 0 0 auto;
	text-align: right;
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	#contact .c2 > div:last-child {
		text-align: left;
	}

	}/*追加指定ここまで*/

/*ボタン内の矢印*/
#contact .btn i {
	margin-left: 1rem;
}

/*電話番号*/
#contact .tel {
	margin-top: 1rem;
	font-family: var(--accent-font);	/*フォント指定。theme.cssのaccent-fontを読み込みます。*/
	font-size: 0.9rem;
	letter-spacing: 0.1em;
}


/*free1（「お店について」ページ。画像と文章を左右交互に並べるブロック）
---------------------------------------------------------------------------*/
/*画像と文字を囲むブロック*/
.free1 .list {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));	/*12等分*/
	grid-auto-flow: dense;
	align-items: center;
	gap: 4rem;	/*画像と文章の間に空けるスペース。4文字分。*/
	margin-bottom: 6rem;	/*下に空けるスペース。6文字分。*/
}
.free1 .list:last-child {
	margin-bottom: 0;
}

/*画像（左）と文章（右）*/
.free1 .image {
	grid-column: 1 / 7;
}
.free1 .text {
	grid-column: 7 / -1;
}

/*左右入れ替え（reverse）*/
.free1 .list.reverse .image {
	grid-column: 7 / -1;
}
.free1 .list.reverse .text {
	grid-column: 1 / 7;
}

/*画像*/
.free1 img {
	display: block;
	width: 100%;
}

/*見出し*/
.free1 h3 {
	margin-top: 0;
	font-family: var(--heading-font);	/*フォント指定。theme.cssのheading-fontを読み込みます。*/
	font-weight: 500;
	font-size: 1.6rem;	/*文字サイズ160%*/
}

/*見出しの番号*/
.free1 h3 span {
	display: block;
	font-family: var(--accent-font);	/*フォント指定。theme.cssのaccent-fontを読み込みます。*/
	font-size: 0.8rem;	/*文字サイズ80%*/
	letter-spacing: 0.2em;
}

/*文章*/
.free1 .text p {
	line-height: 2.2;	/*行間を少しだけ広く*/
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	/*縦積みに*/
	.free1 .list {
		display: block;
	}
	.free1 .image {
		margin-bottom: 1.5rem;
	}

	}/*追加指定ここまで*/


/*message（「店舗案内」ページの店主のあいさつ）
---------------------------------------------------------------------------*/
#message .image {
	flex: 0 0 38%;	/*写真の幅。38%。*/
}
#message .image img {
	display: block;
	width: 100%;
}

/*見出し*/
#message h3 {
	margin-top: 0;
	font-family: var(--heading-font);	/*フォント指定。theme.cssのheading-fontを読み込みます。*/
	font-weight: 500;
	font-size: 1.6rem;	/*文字サイズ160%*/
	line-height: 1.6;
}

/*文章*/
#message .text p {
	line-height: 2.2;	/*行間を少しだけ広く*/
}

/*名前*/
#message .name {
	margin-top: 2rem;
	text-align: right;
}


/*狭い幅
---------------------------------------------------------------------------*/
.narrow {
	max-width: 900px;	/*最大幅。お好みで。*/
	margin-inline: auto;	/*中央に配置*/
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	border-top: 1px solid var(--bg-border-color);	/*テーブルの一番上の線。幅、線種、varは色の設定でtheme.cssのbg-border-colorを読み込みます。*/
	width: 100%;	/*幅を100%に*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid var(--bg-border-color);	/*テーブルの下線。幅、線種、varは色の設定でtheme.cssのbg-border-colorを読み込みます。*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 1.2rem 1rem;	/*ボックス内の余白。上下に1.2文字分、左右に1文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: clamp(8rem, 22vw, 13rem);	/*幅。8文字分〜13文字分の間で、画面幅に応じて自動調整。真ん中の22vwは画面幅の22%。*/
	text-align: left;	/*左よせにする*/
	font-weight: 500;
}


/*YouTube・Google Map用
---------------------------------------------------------------------------*/
.iframe1 {
	width: 100%;
	aspect-ratio: 21 / 9;	/*アスペクト比。お好みで。*/
	position: relative;
	overflow: hidden;
}
.iframe1 iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	border: none;
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	.iframe1 {
		aspect-ratio: 4 / 3;	/*アスペクト比。お好みで。*/
	}

	}/*追加指定ここまで*/


/*news（お知らせ）
---------------------------------------------------------------------------*/
/*左に見出し、右にお知らせ*/
#news .c2 {
	align-items: flex-start;	/*上揃え*/
}
#news .c2 > div:first-child {
	flex: 0 0 25%;	/*見出し側の幅。25%。*/
}

dl.news * {margin: 0;padding: 0;}

/*ブロック全体*/
dl.news {
	border-top: 1px solid var(--bg-border-color);	/*一番上の線。theme.cssのbg-border-colorを読み込みます。*/
}

/*日付*/
dl.news dt {
	padding-top: 1.5rem;	/*上の余白*/
	font-family: var(--accent-font);	/*フォント指定。theme.cssのaccent-fontを読み込みます。*/
	font-weight: 300;
	font-size: 1.4rem;		/*文字サイズ140%*/
	letter-spacing: 0.05em;	/*文字間隔を少しだけ広く*/
	line-height: 1.4;
}

/*カテゴリー（日付の下の小さな文字）*/
dl.news dt span {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.3rem;
	font-family: var(--base-font);	/*フォント指定。theme.cssのbase-fontを読み込みます。*/
	font-size: 0.7rem;		/*文字サイズ70%*/
	letter-spacing: 0.1em;
}

/*カテゴリーの前の短い線*/
dl.news dt span::before {
	content: "";
	width: 1rem;		/*線の長さ*/
	height: 1px;		/*線の太さ*/
	background: currentColor;	/*線の色。文字と同じ色。*/
}

/*目立たせたいカテゴリー（accent-color）。線の代わりに、theme.cssのaccent-colorの丸を表示します。*/
dl.news dt span.accent-color::before {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--accent-color);	/*丸の色。theme.cssのaccent-colorを読み込みます。*/
}

/*本文*/
dl.news dd {
	padding: 0.5rem 0 1.5rem;	/*上に0.5文字分、下に1.5文字分の余白*/
	border-bottom: 1px solid var(--bg-border-color);	/*下の線。theme.cssのbg-border-colorを読み込みます。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

	/*画面幅900px以上の追加指定*/
	@media (min-width: 900px){

	/*日付と本文を横並びに*/
	dl.news {
		display: grid;
		grid-template-columns: 10rem minmax(0, 1fr);	/*左（日付）の幅は10文字分、右（本文）は残り一杯。*/
	}

	dl.news dt {
		padding: 1.5rem 0;
		border-bottom: 1px solid var(--bg-border-color);	/*下の線。theme.cssのbg-border-colorを読み込みます。*/
	}
	dl.news dd {
		padding: 1.8rem 0 1.5rem;	/*上は日付の文字の高さに合わせて少し多めに*/
	}

	}/*追加指定ここまで*/


/*フッター
---------------------------------------------------------------------------*/
footer ul {list-style: none;margin: 0;padding: 0;}
footer p {margin: 0;}

/*フッターボックス全体*/
footer {
	display: flex;	/*横並びにする*/
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem 3rem;	/*上下に2文字分、左右に3文字分のスペース*/
	padding: 3rem var(--content-space-l) 2rem;	/*上は3文字分、左右はtheme.cssのcontent-space-lを読み込み、下は2文字分の余白。*/
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);					/*文字色。theme.cssのbg-colorを読み込みます。*/
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*ロゴ*/
footer .logo {
	margin-right: auto;	/*メニューを右に寄せる*/
}
footer .logo img {
	display: block;
	width: 130px;	/*ロゴの幅。お好みで。*/
}

/*フッターメニュー*/
footer .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	font-family: var(--accent-font);	/*フォント指定。theme.cssのaccent-fontを読み込みます。*/
}
footer .menu a {
	text-decoration: none;
}

/*Copyright部分*/
footer small {
	display: block;
	width: 100%;	/*幅を100%に*/
	padding-top: 2rem;
	border-top: 1px solid var(--bg-inverse-border-color);	/*上の線。theme.cssのbg-inverse-border-colorを読み込みます。*/
	font-family: var(--accent-font);	/*フォント指定。theme.cssのaccent-fontを読み込みます。*/
	letter-spacing: 0.1em;
}


/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
	text-decoration: none;display: block;
	background: rgba(0,0,0,0.5);
	color: #ccc;
	text-align: right;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: 900;
	margin-right: 0.5em;
}



/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 1s 0.4s both;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*bg1-border-parts
---------------------------------------------------------------------------*/
.bg1-border-parts {
	border-top: 1px solid var(--bg-border-color);		/*上の線の幅、線種、var以降は色の事でtheme.cssのbg-border-colorを読み込みます。*/
	border-bottom: 1px solid var(--bg-border-color);	/*下の線の幅、線種、var以降は色の事でtheme.cssのbg-border-colorを読み込みます。*/
}

/*bg1-parts
---------------------------------------------------------------------------*/
.bg1-parts {
	background-color: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);		/*文字色。theme.cssのbg-colorを読み込みます。*/
}

/*bg1-primary
---------------------------------------------------------------------------*/
.bg1-primary-parts {
	background-color: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}


/*bg1-primary-light
---------------------------------------------------------------------------*/
.bg1-primary-light-parts {
	background-color: var(--primary-light-color);		/*背景色。theme.cssのprimary-light-colorを読み込みます。*/
	color: var(--primary-light-inverse-color);	/*文字色。theme.cssのprimary-light-inverse-colorを読み込みます。*/
}

/*bg1-light
---------------------------------------------------------------------------*/
.bg1-light-parts {
	background-color: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
}


/*bg1-accent
---------------------------------------------------------------------------*/
.bg1-accent-parts {
	background-color: var(--accent-color);		/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}


/*bg-parts（bg1-primary-parts、bg1-light-parts、bg1-accent-partsとセットで使います）
---------------------------------------------------------------------------*/
.bg-parts {
	padding-top: var(--content-space-v, var(--content-space-l));		/*ボックス内の上に空ける余白。sectionと同じ値。*/
	padding-bottom: var(--content-space-v, var(--content-space-l));	/*ボックス内の下に空ける余白。sectionと同じ値。*/
}


/*section内で画面両サイドいっぱいまで広げる場合（marginのみでもいいが安定版に）
---------------------------------------------------------------------------*/
.bleed-x-parts {
	--bleed-x: var(--content-space-l);	/*エイリアスに*/
	width: calc(100% + (var(--bleed-x) * 2));	/*section内容の幅＋両サイドpadding（対象要素の幅）*/
	margin-left: calc(var(--bleed-x) * -1);
	margin-right: calc(var(--bleed-x) * -1);
	max-width: none;
}


/*左右によせる専用
---------------------------------------------------------------------------*/
.bleed-left-parts {
	width: calc(100% + var(--content-space-l));
	margin-left: calc(-1 * var(--content-space-l));
}
.bleed-right-parts {
	width: calc(100% + var(--content-space-l));
	margin-right: calc(-1 * var(--content-space-l));
}


/*その他
---------------------------------------------------------------------------*/
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 100%;display: block;}
.wl {width: 100%;display: block;}
.mt0 {margin-top: 0px !important;}
.mb0 {margin-bottom: 0px !important;}
.mb1rem {margin-bottom: 1rem !important;}
.mb3rem {margin-bottom: 3rem !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: rgba(0,0,0,0.7);color: #fff; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.look .color-check {color: #ffe14d !important;}
.small {font-size: 0.8em;}
.large {font-size: 1.6em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
.is-clip {overflow: hidden;}

/*大きな画面の場合*/
.large-screen .ws {width: 50%;}
.large-screen .sh {display: none;}
.large-screen .pc {display: block;}