/*
Theme Name:		有坂石材 _ Arisaka Stone
Description: 有坂石材 _ Arisaka Stoneは、Welcart Basicの子テーマです。
Template:		welcart_basic
Version:		1.2.1
*/
/*
サイト構成、サイト更新、カスタム投稿についての詳細は
readme.mdファイルを必ず参照してください。

Description: 全ページ基本とヘッダーフッター共通のスタイル設定
*/
:root {
	scroll-behavior: smooth;
	--arisaka-narrow-width: 1100px;
	--arisaka-middle-width: 1400px;
	--arisaka-wide-width: 1648px;
	--arisaka-aspect-rate: grid-template-columns: 0.3fr 0.7fr;
	--arisaka-aspect-rateR: grid-template-columns: 0.7fr 0.3fr;
	--arisaka-aspect-inlinewidth: clamp(1rem, -27.769rem + 37.97vw, 19rem);
}
/* ========================================
   リセットCSS
   ======================================== */
:where(*, *::before, *::after) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	margin: 0;
	padding: 0;
	line-height: 1.6;
	position: relative;
}
/* ========================================
   フォント設定（デフォルト: モバイル向け）
   ======================================== */
/* 本文: ローカルフォント（明朝系） */
:where(body, p, li, dd, dt, td, th, div, span, section, main, article, aside, header, footer, nav, form, label, input, textarea, select, button, address) {
	font-family: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Noto Serif CJK JP', 'Noto Serif JP', 'Yu Mincho', serif;
	font-feature-settings: "palt" 1, "kern" 1;
	text-size-adjust: 100%;
}
/* 見出し要素: Webフォント（明朝系） */
:where(h1, h2, h3, h4, h5, h6, a) {
	font-family: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', serif;
	font-weight: 400;
	font-feature-settings: "palt" 1, "kern" 1;
	text-size-adjust: 100%;
}
/* 英文字用フォント指定クラス */
:where(.eb-garamond, .spelling-english ){
	font-family: 'EB Garamond', serif;
	font-kerning: normal;
	font-feature-settings: "kern" 1, "liga" 1;
	text-size-adjust: 100%;
}
/* ========================================
   1024px以上: すべてWebフォント
   ======================================== */
@media (width >=1024px) {
	/* 本文もWebフォントに変更 */
	:where(body, p, li, dd, dt, td, th, div, span, a, section, main, article, aside, header, footer, nav, form, label, input, textarea, select, button, address) {
		font-family: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', serif;
		font-feature-settings: "palt" 1, "kern" 1;
		text-size-adjust: 100%;
	}
}
/* ========================================
   レスポンシブフォントサイズ設定
   ======================================== */
/* 600px以下: 15px固定 */
body {
	font-size: 15px;
}
/* 600px以上～1920px: 16px固定 */
@media (width >=600px) {
	body {
		font-size: 16px;
	}
}
/* 1920pxより大きい場合: 16pxを基準に相対的に拡大 */
/* 1920pxで16px、2880pxで18pxになるように設定 */
/* 計算式: 16px + (100vw - 1920px) * (2px / 960px) */
@media (width > 1920px) {
	body {
		font-size: clamp(16px, calc(16px + (100vw - 1920px) * 0.0020833), 18px);
	}
}
/* ========================================
   その他のリセットCSS
   ======================================== */
:where(p) {
	letter-spacing: 0.05em;
	text-align: justify;
	text-justify: inter-word;
}
/* リストのリセット */
:where(ul, ol) {
	list-style: none;
}
/* リンクのリセット */
a {
	text-decoration: none;
	color: inherit;
}
:where(address) {
	font-style: normal;
}
:where(em) {
	font-style: normal;
}
/* 画像のリセット */
:where(img) {
	width: auto;
	display: block;
}
/* テーブルのリセット */
:where(table) {
	border-collapse: collapse;
	border-spacing: 0;
}
/* フォーム要素のリセット */
/* フォントは上記のフォント設定で既に指定済み */
:where(input, textarea, select, button) {
	font-size: inherit;
	line-height: inherit;
}
/* OSの影響を受けるフォーム部品のフォント設定 */
/* 注意: OSのネイティブUIが使われる要素（date, time, color, file, rangeなど）は
   フォント設定が効かない場合がありますが、表示部分には可能な範囲で適用されます */
:where(input[type="date"],
	input[type="time"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="week"],
	input[type="color"],
	input[type="file"],
	input[type="range"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="url"],
	input[type="email"]) {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}
/* select要素のフォント設定（特にモバイルでOSのネイティブUIが使われる場合がある） */
:where(select) {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	/* appearance: none; を設定するとネイティブUIを無効化できますが、
	   UXを損なう可能性があるため、必要に応じて個別に設定してください */
}
:where(button) {
	cursor: pointer;
	border: none;
	background: none;
}
:where(.site-content, .site-footer a){
	color:var(--wp--preset--color--arisaka-main-color);
}
:where(
	.site-content h1,
	.site-content h2,
	.site-content h3,
	.site-content h4,
	.site-content h5){
font-weight: bold;
}
h2{
	font-size: clamp(1.6em, 0.964em + 1.43vw, 2.25em);
	&[data-text]{
		letter-spacing: 0.25em;
	}
}

/* 通常英文字のサブ見出し */
h2[data-text]::before,
h3[data-text]::before{
	content: attr(data-text);
	color: inherit;
	display: block;
	letter-spacing: 0.25em;
	font-family: 'EB Garamond', serif;
	font-kerning: normal;
	font-feature-settings: "kern" 1, "liga" 1;
	text-size-adjust: 100%;
	font-size:clamp(0.75rem, 0.616rem + 0.36vw, 0.938rem);
}
h3{
	font-size: clamp(1.875em, 1.429em + 1.19vw, 2.5em);
}
/* ヒーローテキスト */
.large-font{
	font-size: clamp(2.5em, 0.268em + 5.95vw, 5.625em);
}
/* 縦文字見出しサイズ */
.vertical-text{
	font-size: clamp(1.25em, 0.714em + 1.43vw, 2em);
}
/* 英文字テキストキャッチサイズ */
.catch-text{
	font-size: clamp(1.25em, 0.714em + 1.43vw, 2em);
	font-family: 'EB Garamond', serif;
	font-kerning: normal;
	font-feature-settings: "kern" 1, "liga" 1;
	text-size-adjust: 100%;
}
/* ヘッダーにある英文字クラス */
.spelling-english {
font-size: 0.9375em;
font-style: normal;
font-weight: 700;
letter-spacing: 0.23438rem;
}
.site-content :where(p){
	line-height: 1.75;
	margin-block-end: 1em;
	text-align: justify;
}

/* WordPressブロックエディタのテキスト配置クラスを優先 */
.site-content .has-text-align-left {
	text-align: left;
}
.site-content .has-text-align-center {
	text-align: center;
}
.site-content .has-text-align-right {
	text-align: right;
}

/* * ___ ページトップ */
.pageTop {
	position: fixed;
	right: 2em;
	bottom: 4em;
	width: fit-content;
	z-index: 900;
	a {
		position: relative;
		text-decoration: none;
		-ms-writing-mode: tb-rl;
		border: 1px solid var(--wp--preset--color--arisaka-lightgray-color);
		writing-mode: vertical-rl;
		position: relative;
		color: var(--wp--preset--color--arisaka-lightgray-color);
		padding: 2.5em clamp(0.8rem, 0.3rem + 1.33vw, 1.5rem) 1.5em;
		background-color: var(--wp--preset--color--arisaka-main-color);
		text-align: center;
		letter-spacing: 0.15em;
		font-size:clamp(0.75rem, 0.571rem + 0.48vw, 1rem);
	}
	a,
	span,
	img {
		display: block;
	}
	span::before {
		content: '';
		position: absolute;
		top: 0.8em;
		left: 0;
		width: 100%;
		height: 0.75em;
		background-color: var(--wp--preset--color--arisaka-lightgray-color);
		clip-path: polygon(50% 0px, 42% 100%, 58% 100%);
	}
	img {
		position: absolute;
		right: calc(clamp(0.75rem, 0.071rem + 1.81vw, 1.7rem) * -1);
		bottom: calc(clamp(1.1rem, 0.286rem + 1.9vw, 2rem) * -1);
		width:clamp(1.75rem, 0.813rem + 2.5vw, 3.063rem);
		height:auto;
	}
}
.company-logo {
	display: flex;
	align-items: center;
	svg {
		display: block;
		max-width: 100%;
		height: auto;
		&.logomark {
			aspect-ratio: 1/1;
		}
		&.logotitle {
			aspect-ratio: 1/0.148;
		}
	}
}

.width-wide-block,.width-wide-block img{
	width: 100vw;
	height: auto;
	display: block;
	object-fit: contain;
	overflow-x: clip;
}

:where(.telenumber-btn span,
.mailicon-btn span){
font-weight: 700;
}


/* PC幅（900px 以上）では tel: リンクを完全無効化 */
@media (width >=900px) {
	a[href^="tel:"] {
		pointer-events: none;
		/* クリック無効 */
		cursor: default;
		/* 通常のカーソルに */
		color: inherit;
		/* 見た目は普通の文字 */
		text-decoration: none;
		/* 下線も消す */
	}
}
/* ========================================
   モバイル/PC メニュー切り替え
   ======================================== */
/* モバイル専用メニュー: デフォルト表示 */
.main-navigation.mobile-only {
	display: block;
}

/* PC専用メニュー: デフォルト非表示 */
.main-navigation.desktop-only {
	display: none;
}

/* 1220px超: モバイル非表示、PC表示 */
@media (width > 1220px) {
	.main-navigation.mobile-only {
		display: none;
	}
	
	.main-navigation.desktop-only {
		display: block;
	}
}

/* ========================================
   ヘッダーメニュー - ドロップダウン実装
   ======================================== */
/* メインナビゲーション：子要素の基準点 */
.main-navigation {
	position: relative;
}
/* モバイルメニュー用checkbox：非表示 */
.mobile-only #panel.on-off {
	display: none;
}
/* ハンバーガーメニューラベル：デフォルト非表示 */
.main-navigation.mobile-only label[for="panel"] {
	cursor: pointer;
	display: none;
}
/* ハンバーガーアイコン：3本線 */
.main-navigation.mobile-only label[for="panel"] span {
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--wp--preset--color--arisaka-main-color);
	position: relative;
	transition: all 0.3s ease;
	-webkit-user-select: none;
	user-select: none;
}
/* ハンバーガーアイコンの上下線 */
.main-navigation.mobile-only label[for="panel"] span::before,
.main-navigation.mobile-only label[for="panel"] span::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--wp--preset--color--arisaka-main-color);
	position: absolute;
	left: 0;
	transition: all 0.3s ease;
}
.main-navigation.mobile-only label[for="panel"] span::before {
	top: -6px;
}
.main-navigation.mobile-only label[for="panel"] span::after {
	bottom: -6px;
}
/* メニュー開閉時：クロスアイコンに変更 */
.mobile-only #panel:checked~label span {
	background-color: transparent;
}
.mobile-only #panel:checked~label span::before {
	top: 0;
	left: 50%;
	width: 24px;
	transform: translateX(-50%) rotate(55deg);
	background-color: var(--wp--preset--color--white);
}
.mobile-only #panel:checked~label span::after {
	top: 0;
	left: 50%;
	width: 24px;
	transform: translateX(-50%) rotate(-55deg);
	background-color: var(--wp--preset--color--white);
}
/* メニューリストコンテナ：リセット */
.header-nav-container {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* メニューコンテナ：PC表示時は常に表示 */
.nav-menu-open {
	display: block;
}
/* メニューアイテム：サブメニューの基準点 */
.header-nav-container>.menu-item {
	position: relative;
}
/* メニューリンク：基本スタイル */
.header-nav-container .menu-item>a {
	display: block;
	padding-block: 0.5em;
	text-decoration: none;
	transition: all 0.3s ease;
}
/* サブメニュー矢印アイコン */
.header-nav-container .existing-submenu>a {
	position: relative;
	display: inline-block;
}
.header-nav-container .existing-submenu>a::after {
	content: '<';
	display: inline-block;
	margin-inline-start: 0.5em;
	transform: rotate(-90deg);
	font-size: 1em;
	line-height: 1;
	transform-origin: center;
	transition: transform 0.3s ease;
	vertical-align: middle;
}
.header-nav-container .existing-submenu.active>a::after {
	transform: rotate(90deg);
}
/* サブメニュー：デフォルト非表示（PC用ドロップダウン） */
.header-nav-container .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	/* background-color: #fff; */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	z-index: 990;
	list-style: none;
	margin: 0;
	padding: 0;
	margin-inline-start: -2em;
}
/* サブメニューアイテム：最後の項目の区切り線を削除 */
.header-nav-container .sub-menu .menu-item:last-child {
	border-bottom: none;
}
/* サブメニューリンク */
.header-nav-container .sub-menu .menu-item>a {
	padding-block: 0.5em;
	display: block;
}
/* ========================================
   PC表示用ブロック（for_wide-block）
   ======================================== */
.for_wide-block {
	display: none;
	/* デフォルトでは非表示（モバイル用） */
}
/* ========================================
   メニュー内（モバイル用）フッター関連スタイル
   ======================================== */
.header-menu-footer {
	display: none;
	/* デフォルトでは非表示（PC用） */
}
.mail-form_btn {
	text-align: center;
	a {
		display: block;
		padding-block: 0.7em;
		border: 1px solid var(--wp--preset--color--white);
		font-size: 0.935em;
		transition: 0.5s ease;
		&:hover {
			border-color: var(--wp--preset--color--arisaka-sub-color);
			background-color: var(--wp--preset--color--arisaka-sub-color);
			color: var(--wp--preset--color--arisaka-main-color);
		}
	}
}
.telenumber-btn {
	/* margin-block-start: 1em; */
	>a span.telcallnumber {
		/* font-size: 1.42em; */
		display: flex;
		letter-spacing: 0.1em;
		font-size: 1.25rem;
		column-gap: 0.5em;
		justify-content: center;
		svg {
			display: block;
			width: 1em;
		}
	}
	span:nth-child(2) {
		text-align: center;
		letter-spacing: 0.1em;
		font-size: 0.75rem;
	}
}
/* ========================================
   ヘッダー基本設定
   ======================================== */
header.site-header {
	background-color: var(--wp--preset--color--arisaka-accent-color-alpha);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 990;
	color: var(--wp--preset--color--white);
	padding: 1em clamp(1rem, -0.743rem + 2.29vw, 2rem);
	a {
		color: var(--wp--preset--color--white);
		transition: all 0.8s ease;
		/* &:hover{
			color:red;
		} */
	}
	.site-title a {
		position: relative;
		z-index: 998;
	}
	>.site-description {
		font-size: 0.6em;
	}
	/* ロゴ会社名表示 */
	.company-logo {
		svg {
			&.logomark,
			&.logotitle {
				height: clamp(17px, 8.82px + 1.36vw, 35px);
			}
		}
	}
	.header-main-navigation,
	.snav.cf,
	.menu-header-blok-top {
		display: flex;
	}
	span:not(.telcallnumber) {
		display: block;
	}
	.manu-header-block {
		position: relative;
	}
	.snav.cf {
		color: var(--wp--preset--color--white);
		position: relative;
		column-gap: 0.5em;
		a {
			position: relative;
			width: fit-content;
			display: block;
		}
		span {
			position: relative;
			&.total-quant {
				position: absolute;
				right: -6px;
				top: -7px;
				color: var(--wp--preset--color--white);
				background-color: var(--wp--preset--color--arisaka-main-color);
				font-size: 0.689em;
				font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
				font-weight: 600;
				font-variant-numeric: tabular-nums;
				letter-spacing: 0;
				width: 1.85em;
				height: 1.85em;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		svg {
			display: block;
			width: clamp(1.25rem, 0.964rem + 0.76vw, 18px);
			height: auto;
			aspect-ratio: 1/1;
			&.shopingcart {
				width: auto;
				height: clamp(1.5rem, 1.143rem + 0.95vw, 24px);
			}
		}
	}
}
/* デスクトップ表示：1220pxより大きい */
@media (width > 1220px) {
	.header-nav-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1.25em;
		&:hover {
			a {
				color: rgba(255, 255, 255, 0.623);
				&:hover {
					color: var(--wp--preset--color--white);
				}
			}
		}
		.menu-item-has-children:hover>.sub-menu,
		.menu-item-has-children.active>.sub-menu {
			opacity: 1;
			visibility: visible;
			transform: translateY(15px);
		}
		>.menu-item,
		ul.sub-menu {
			width: auto;
			>a {
				padding-block: 0;
			}
		}
		.existing-submenu>a::after {
			vertical-align: unset;
			margin-inline-start: 0.25em;
			font-size: 0.8em;
		}
		ul.sub-menu {
			background-color: transparent;
			min-width: unset;
			width: auto;
			li.menu-item {
				border-bottom: 1px solid var(--wp--preset--color--arisaka-main-color);
				&:first-child {
					padding-block-start: 1.1em;
				}
				&:last-child {
					border-bottom: none;
				}
				a {
					padding-inline: 1.5em;
					white-space: nowrap;
					padding-block: 0.8em;
					background-color: color-mix(in srgb, var(--wp--preset--color--arisaka-main-color) 90%, transparent);
				}
			}
		}
		li, a {
			font-size: 0.93542em;
			letter-spacing: 0.05em;
		}
	}
	p.site-description+.header-main-navigation {
		display: grid;
		align-items: end;
		column-gap: 1em;
		grid-template-columns: 1fr auto auto;
		justify-content: space-between;
		label[for="panel"] {
			display: none;
		}
	}
	.nav-menu-open {
		display: block !important;
	}
	.for_wide-block {
		display: grid;
		align-items: center;
		grid-template-columns: repeat(2, auto);
		column-gap: 1em;
		margin-inline-start: 1.85em;
		.telenumber-btn {
			grid-column: 1 / 2;
			font-weight: 700;
			font-size: 20px;
			&>a span.telcallnumber {
				column-gap: 0.25em;
				svg {
					width: 0.78em;
				}
			}
		}
		.mail-form_btn {
			grid-column: 2 / 3;
			font-size: 14px;
			a {
				display: block;
				padding-inline: 3.08em;
			}
		}
	}
	/* PC表示時：メニューフッター非表示 */
	.header-menu-footer {
		display: none;
	}
	header.site-header {
		padding-block-start: 0.2em;
		>p.site-description {
			font-size: 0.6em;
			position: relative;
			top: 12px;
		}
		.menu-header-blok-top {
			display: grid;
			align-self: end;
		}
		.snav.cf {
			justify-self: end;
			span {
				&.total-quant {
					right: -12px;
				}
			}
		}
	}
}
/**
 * モバイル表示用スタイル（1220px以下）
 */
@media (width <=1220px) {
	.main-navigation.mobile-only label[for="panel"] {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 998;
		width: 2em;
		height: 2em;
		padding: 0.5em;
		aspect-ratio: 1/1;
		cursor: pointer;
		background-color: var(--wp--preset--color--white);
		transition: background-color 0.3s ease;
	}
	.mobile-only #panel:checked~label[for="panel"] {
		background-color: transparent;
	}
	.mobile-only #panel.on-off {
		display: none;
	}
	.mobile-only .nav-menu-open {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		background-color: #1f304ef7;
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		z-index: 995;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 2em 1em;
		/* スライドイン/アウトアニメーション */
		transform: translateX(100%);
		transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s 0.3s;
		visibility: hidden;
		opacity: 0;
		font-size: 0.94em;
		display: grid;
		align-content: start;
		justify-content: center;
		row-gap: 3em;
	}
	.mobile-only #panel:checked~.nav-menu-open {
		transform: translateX(0);
		visibility: visible;
		opacity: 1;
		transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s 0s;
	}
	.mobile-only .header-nav-container {
		display: flex;
		margin-block: 7em 0.5em;
		flex-direction: column;
		width: 100%;
		transition: 0.5s ease;
		&:hover a {
			color: rgba(255, 255, 255, 0.8);
			&:hover {
				color: var(--wp--preset--color--white);
			}
		}
		>.menu-item {
			width: 100%;
			a {
				display: block;
			}
		}
		.sub-menu {
			position: static;
			width: 100%;
			opacity: 1;
			visibility: visible;
			transform: none;
			box-shadow: none;
			max-height: 0;
			overflow: hidden;
			padding-inline-start: 2em;
			transition: max-height 0.3s ease;
			a {
				padding-inline-start: 1em;
			}
		}
		.menu-item-has-children.active>.sub-menu {
			max-height: 1000px;
		}
	}
	.telenumber-btn {
		margin-block-start: 1em;
	}
	.for_wide-block {
		display: none !important;
	}
	.header-menu-footer {
		display: block;
	}
	header.site-header {
		padding-block-start: 0.35em;
		/* サイト説明文の文字数制限 */
		.site-description {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 0.5em;
			margin-block-end: 0.5em;
		}
		.header-main-navigation {
			justify-content: space-between;
			align-items: center;
		}
		.menu-header-blok-top {
			justify-content: space-between;
			flex-direction: row;
			align-items: center;
			column-gap: 0.7em;
		}
	}
}
/* footer */
:where(.footer-colophon, .footer-inner-block) {
	/* min-height: 100dvh; */
	width: 100%;
}
.footer-colophon {
	position: relative;
	color: var(--wp--preset--color--arisaka-sub-color);
	a {
		color: var(--wp--preset--color--arisaka-sub-color);
	}
	svg {
		display: block;
		/* width: clamp(1.25rem, 0.964rem + 0.76vw, 18px); */
		height: auto;
		aspect-ratio: 1 / 1;
	}
	.company-logo {
		svg {
			&.logomark {
				width: 37px;
			}
			&.logotitle {
				width: 238px;
			}
		}
	}
	nav {
		p:has(svg) {
			display: flex;
			align-items: center;
			column-gap: 0.5em;
			a {
				display: block;
				width: fit-content;
				padding: 1em;
				background-color: var(--wp--preset--color--arisaka-main-color);
			}
		}
		svg {
			width: 2em;
		}
	}
	iframe {
		width: 100%;
		filter: grayscale(100%);
	}
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100dvw;
		height: 100%;
		background-color: #161b26e6;
		z-index: 1;
	}
	.footer-navigation {
		display: grid;
		div:hover a {
			transition: 0.3s ease;
			&:hover {
				transform: translateX(3%);
			}
		}
	}
}
.footer-inner-block {
	/* background-color: rgb(31, 48, 78, 0.9); */
	max-width: 1140px;
	margin-inline: auto;
	ul, li {
		margin: 0;
		padding: 0;
	}
	a {
		display: block;
	}
	.footer-menu-block {
		width: 100%;
	}
}
nav {
	.fmenuheader {
		display: block;
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--white);
		padding-block-end: 0.75em;
		&+li {
			margin-block-start: 1.25em;
		}
		a,
		&~li a {
			display: block;
			padding-block: 0.45em;
			padding-inline: 0.25em;
		}
	}
}
.footer-menu-footer_menu04 .fmenuheader-top,
.footer-menu-footer_menu02 .fmenuheader {
	position: relative;
	letter-spacing: 0.1em;
	&::after {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 1.75em;
		height: auto;
		aspect-ratio: 19 / 8;
		background-color: #e4e4e4;
		mask: url("data:image/svg+xml,%3Csvg width='19' height='8' viewBox='0 0 19 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6378 0.5L17.6673 3.52953L14.6378 6.55905' stroke='%23EEEEEE' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0.5 3.53125H17.6673' stroke='%23EEEEEE' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
		mask-size: contain;
		-webkit-mask: url("data:image/svg+xml,%3Csvg width='19' height='8' viewBox='0 0 19 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6378 0.5L17.6673 3.52953L14.6378 6.55905' stroke='%23EEEEEE' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0.5 3.53125H17.6673' stroke='%23EEEEEE' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
		-webkit-mask-size: contain;
		transition: 0.3s ease;
	}
	&:hover::after {
		transform: translateX(15%) translateY(-50%);
	}
}
.footer-menu-footer_menu03,
.footer-menu-footer_menu04 {
	.fmenuheader:not(.fmenuheader-top) a {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
		color: inherit;
	}
}
.copyright {
	color: #636975;
	letter-spacing: 0.1em;
	font-size: 0.625rem;
	/* max-width: calc(375px - calc(1.365em * 2));
	margin-inline: auto; */
}
p:has(svg) {
	/* margin-block: 3em 5em; */
	a {
		transition: 0.8s ease;
		&:hover {
			color: #eeeeee9b;
		}
	}
}

/* フッターメッセージ表示エリア */
.footer-inmeaage-form{
	position: relative;
	background-image: url(./assets/images/footer-inmeaage-form_bg.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4em 2em;
	>div{
		position: relative;
	}
	.inner-block_content{
		position: relative;
		display: grid;
		row-gap: 2.5em;
		>div{
			display: grid;
			row-gap: 2.25em;
		}
		margin-inline:auto 0;
		background-color: var(--wp--preset--color--arisaka-main-color);
		color:var(--wp--preset--color--arisaka-sub-color);
		a{
			color:var(--wp--preset--color--arisaka-sub-color);
		}
		h2,h3{
			color:var(--wp--preset--color--white);
		}
		h3{
			letter-spacing: 0.1em;
			text-align: justify;
			line-height: 1.4;
		}
		p{
			color:var(--wp--preset--color--arisaka-sub-color);
			font-size: 1rem;
			line-height: 1.8;
		}
		.telenumber-btn,
		.mailicon-btn{
			margin-block: 0;
			color:var(--wp--preset--color--arisaka-lightgray-color);
			a{
				display:block;
				padding-block:0.5em 0.35em;
				background-color: var(--wp--preset--color--arisaka-lightgray-color);
				color:var(--wp--preset--color--arisaka-main-color);
				transition: 0.8s ease;
				&:hover{
					color:var(--wp--preset--color--arisaka-lightgray-color);
					background-color: #ffffff10;
					transition: 0.8s ease;
				}
				span:nth-child(2) {
					text-align: center;
					display:block;
					font-size:0.78em
				}
			}
		}
	}
	figure{
		>img{
			width: fit-content;
			height: auto;
			object-fit: contain;
		}
	}
}

.mailicon-btn{
	.mailicon{
		display:flex;
		align-items: center;
		justify-content: center;
		column-gap: 0.5em;
	}
	svg{
		width: 1.65em;
		display: block;
		aspect-ratio: 1 / 1;
	}
}

/* 600px以下 */
@media (width <=600px) {
	.width-wide-block img{
		height: 85dvh;
		width: auto;
		object-fit: cover;
		object-position: left 68% top 0%;
	}

	.footer-inner-block {
		padding-block: 5em;
		h2 {
			text-align: center;
			font-size: 1.2em;
			margin-block-end: 0.5em;
		}
		.company-logo {
			width: fit-content;
			margin-inline: auto;
		}
		address {
			text-align: center;
			letter-spacing: 0.08em;
		}
		address,
		.footer-navigation,
		iframe {
			margin-block-start: 2.7em;
			margin-inline: 1.365em;
		}
		.telenumber-btn {
			margin-block-start: 0.3em;
			.telcallnumber,
			span:nth-child(2) {
				letter-spacing: 0.09em;
			}
			span:nth-child(2) {
				display: block;
			}
		}
		iframe {
			width: 100%;
			margin-inline: auto;
			aspect-ratio: 3 / 1.7;
			height: 100%;
		}
		.footer-navigation {
			/* max-width: calc(375px - calc(1.365em * 2)); */
			/* justify-content: space-between; */
			padding-inline: 1.365em;
			margin-inline: auto;
			align-content: end;
			display: grid;
			align-items: start;
			column-gap: 2em;
			grid-template-areas:
				"a c"
				"b c"
				"d ."
				"e .";
		}
		.footer-menu-footer_menu04 {
			grid-area: a;
		}
		.footer-menu-footer_menu02 {
			grid-area: c;
		}
		.footer-menu-footer_menu03 {
			grid-area: d;
		}
		p:has(svg) {
			grid-area: e;
		}
	}
	.copyright {
		color: #636975;
		letter-spacing: 0.1em;
		font-size: 0.625rem;
		margin-inline: 1.365em;
	}
	p:has(svg) {
		margin-block: 2em 5em;
		a {
			transition: 0.8s ease;
			&:hover {
				color: #eeeeee9b;
			}
		}
	}
}
/* 600px over */
@media (width > 600px) {
	.footer-navigation {
		position: relative;
		grid-area: content;
		display: grid;
		align-items: start;
		grid-template-columns: repeat(3, minmax(150px, 1fr));
		grid-template-rows: repeat(2, auto);
		column-gap: clamp(2.4rem, -1.659rem + 10.82vw, 7rem);
		.footer-menu-footer_menu02 {
			grid-column: 2/3;
			grid-row: 1/3;
		}
		.footer-menu-footer_menu03 {
			grid-column: 3/4;
			grid-row: 1/2;
		}
		.footer-menu-footer_menu04 {
			grid-column: 1/2;
			grid-row: 1/3;
		}
		>p:has(a>svg) {
			align-items: flex-start;
			margin-block-start: -3em;
		}
	}
	.footer-inner-block {
		padding-block: clamp(6.25em, -1.75em + 10vw, 10.25em);
		.company-logo {
			svg {
				&.logomark {
					width: 63px;
				}
				&.logotitle {
					width: 390px;
				}
			}
		}
		h2 {
			font-size: clamp(2em, 1.779em + 0.59vw, 2.25em);
			margin-block-end: 1em;
		}
		address {
			margin-block-start: clamp(8rem, 6.235rem + 4.71vw, 10rem);
			font-size: 0.875em;
			iframe {
				margin-block: 2em;
				height: 100%;
				aspect-ratio: 1 / 0.5;
			}
		}
		.company-logo {
			margin-inline: auto;
			width: fit-content;
		}
		.telenumber-btn {
			>a span.telcallnumber {
				font-size: 2rem;
				letter-spacing: 0.09em;
				svg {
					width: 1em;
				}
			}
			span:nth-child(2) {
				letter-spacing: 0.25em;
				em {
					display: inline-block;
					padding-inline-end: 1em;
				}
			}
		}
	}
}
@media (600px < width < 1280px) {
	.footer-inner-block {
		padding-inline: 1.365em;
		display: block;
	}
	.footer-side, .footer-navigation {
		width: clamp(31.25em, 14.706em + 44.12vw, 50em);
		margin-inline: auto;
		h2 {
			text-align: center;
		}
		address {
			text-align: center;
		}
	}
}
/* 1280px over */
@media (width >=1280px) {
	.footer-inner-block {
		max-width: 1440px;
		display: grid;
		align-items: start;
		grid-template-columns: minmax(550px, 26vw) 1fr;
		/* grid-template-rows: auto 2em; */
		column-gap: clamp(11.25rem, 4.625rem + 8.28vw, 14.563rem);
		grid-template-rows: auto;
		address {
			margin-block-start: 8em;
			margin-inline-start: 0;
		}
		h2 {
			text-align: center;
		}
		.telenumber-btn {
			>a span.telcallnumber {
				justify-content: flex-start;
				svg {
					width: 1.15em;
				}
			}
		}
		.company-logo {
			margin-inline-start: 0;
		}
	}
	.footer-side {
		grid-column: 1/2;
		grid-row: 1/2;
	}
	.footer-navigation {
		column-gap: clamp(2.25rem, 1.125rem + 1.41vw, 2.813rem);
		grid-column: 2/3;
		grid-row: 1/2;
		padding-block-start: 17em;
	}
	.copyright {
		font-size: 0.75rem;
		letter-spacing: 0.1em;
		/* margin-block-start: -2em; */
	}
}


@media(width <= 823px){
	.footer-inmeaage-form {
		position: relative;
		padding-inline: 2em 0;
		padding-block: 4.5em;
		background-position: left 40% top 0;
		.inner-block_content{
			padding: 3.5em 2em 8em 2em;
		}
		figure {
			position: relative;
			margin-block-start: -4em;
			padding-inline: 2em;
			img {
				max-width: 400px;
				width: 100%;
				aspect-ratio: 288.8 / 365;
				margin-inline: auto;
				height: auto;
				object-fit: cover;
				object-position: center;
			}
		}
	}
}
@media (823px < width < 1360px){
	.footer-inmeaage-form {
		background-position: center top;
		>div {
			margin-block: 9.8em 4.5em;
			position: relative;
			display: block;
			max-width: var(--arisaka-wide-width);
			margin-inline:auto;
			flex-direction: column;
	
			.inner-block_content{
				/* flex:1 1 auto; */
				padding:60px 55px;
				/* width:var(--arisaka-wide-width); */
				>div{
					margin-inline:auto;
					width:36em;
					p{letter-spacing: 0.05em}
				}
			.telenumber-btn,
			.mailicon-btn {
				width: 21em;
				font-size: 24px;
				a {
					width: 100%;
					display:flex;
					height: 100%;
					align-items: center;
					gap:0.5em;
					padding-inline-start: 1.35em;
					span{letter-spacing: 0.1em;}
					em{
						display: block;
					}
					span:nth-child(2){
						font-size:14px;
						text-align: start;	
					}
					span.telcallnumber {
						font-size: 32px;
						& + span{
							letter-spacing: 0.05em;
							em{
								letter-spacing: 0.1em;
							}
						}
					}
	
				}
			}
		}
	
		.footer-bg-image{
			position: absolute;
			top: -105px;
			right: -2em;
			width: clamp(19.375rem, 10.833rem + 16.67vw, 25rem);
			object-fit: cover;
			object-position: center;
			/* margin-block-start: -1.5em; */
			img{
				width: 100%;
				height: auto;
				object-fit: contain;
				object-position: center;
			}
		}
	}
	}
}
@media (1360px <= width){
	.footer-inmeaage-form {
		background-position: center top;
		>div {
			margin-block: 9.8em 15em;
			position: relative;
			display: flex;
			max-width: var(--arisaka-wide-width);
			margin-inline:auto;
			flex-direction: row-reverse;
	
			.inner-block_content{
				flex:1 1 auto;
				padding:60px 55px;
				width:var(--arisaka-wide-width);
				>div{
					margin-inline:auto;
					width:36em;
					p{letter-spacing: 0.05em}
				}
			.telenumber-btn,
			.mailicon-btn {
				width: 21em;
				font-size: 24px;
				a {
					width: 100%;
					display:flex;
					height: 100%;
					align-items: center;
					gap:0.5em;
					padding-inline-start: 1.35em;
					span{letter-spacing: 0.1em;}
					em{
						display: block;
					}
					span:nth-child(2){
						font-size:14px;
						text-align: start;	
					}
					span.telcallnumber {
						font-size: 32px;
						& + span{
							letter-spacing: 0.05em;
							em{
								letter-spacing: 0.1em;
							}
						}
					}
	
				}
			}
		}
	
		.footer-bg-image{
				position: relative;
				width: 50%;
				height: auto;
			object-fit: cover;
			object-position: center;
			img{
				position: absolute;
				bottom: -200px;
				left: clamp(0rem, -16.827rem + 19.23vw, 6.25rem);
				width: 510px;
			}
		}
	}
	}
}


:where(.entry-header,.page-header,.item-header){
	background-color: var(--wp--preset--color--arisaka-lightgray-color);
	background-image: url(./assets/images/header-image-shop.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: clamp(13.813rem, 7.456rem + 27.12vw, 40rem);
	display: grid;
    align-content: center;
	color:var(--wp--preset--color--white);
	.spelling-english{
		padding-block-start: clamp(2.5rem, -1.056rem + 15.17vw, 12.6rem);
		font-size: clamp(0.75rem, 0.616rem + 0.36vw, 0.937rem);
	}
	.spelling-english,
	.entry-title,
	.item_page_title,
	.page-title{
		/* width: clamp(21.25rem, 9.721rem + 49.19vw, 68.75rem); */
		width: 100%;
		margin-inline: auto;
		max-width: var(--arisaka-narrow-width);
		@media(width < 1120px) {
			margin-inline: 1.5rem;
		}
	}

	h1{
		font-size: clamp(1.5rem, 0.964rem + 1.43vw, 2.25rem);
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		letter-spacing: 0.225rem;
	}
&.feature{
	background-image: url(./assets/images/header-image-feature.webp);
}
&.service{
	background-image: url(./assets/images/header-image-serveice.webp);
}
&.tombstone{
	background-image: url(./assets/images/header-image-tombstone.webp);
}
&.monument{
	background-image: url(./assets/images/header-image-monument.webp);
}
&.shrines_and_temples{
	background-image: url(./assets/images/header-image-shrinestemples.webp);
}
&.architectural_environment_stone{
	background-image: url(./assets/images/header-image-enviromentstone.webp);
}
&.pure_memorial{
	background-image: url(./assets/images/header-image-memorial.webp);
}
&.faq{
	background-image: url(./assets/images/header-image-faq.webp);
}
&.company{
	background-image: url(./assets/images/header-image-company.webp);
}
&.contact{
	background-image: url(./assets/images/header-image-contact.webp);
}
&.guide{
	background-image: url(./assets/images/header-image-guide.webp);
}
&.usces-cart{
	background-image: url(./assets/images/header-image-shop.webp);
}
&.usces-member{
	background-image: url(./assets/images/header-image-shop.webp);
}
&.news{
	background-image: url(./assets/images/header-image-guide.webp);
}
/* &.background-image: url(./assets/images/header-image-shop.webp);
} */
&.works,
&.column{
	background-image: url(./assets/images/header-image-works.webp);
}
}
.for-mb{display: none;}

/* 会社案内のメニュー下のサブメニュー位置調整＞PC用 */
.header-nav-container .menu-item-98 .sub-menu {
	margin-inline-start: -0.25em;
}

/* タッチ操作が主であるデバイスに適用 */
@media (pointer: coarse) {
	.for-mb{display: block;}
}

.site-content{
	overflow-x: hidden;
}