/*
Theme Name: Arisaka Stone Child
File: common.css
Description: 全ページ共通レイアウト以外のコンポーネントなどのスタイル設定
*/
@charset "UTF-8";
/* ========================================
   背景動画のスタイル
   ======================================== */
/* 背景動画用のコンテナ */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow-x: clip;
}
/* 動画要素の基本スタイル */
.backscreen-video {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: 100vw;
	height: auto;
	z-index: -1;
	object-fit: cover;
	opacity: 0;
	overflow-x: hidden;
	transition: opacity 0.8s ease-in-out;
}
/* front-page：bodyの背景動画を表示 */
body.is-front-page .body-bg-video {
	opacity: 1;
}
/* それ以外のページ：footerの背景動画を表示 */
body.is-other-page footer.footer-colophon {
	position: relative;
	overflow: hidden;
}
/* footerの動画を背景画像のように配置 */
body.is-other-page .footer-bg-video {
	opacity: 1 !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	transform: none;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}
/* footer-inner-blockを動画の上に重ねる */
body.is-other-page footer.footer-colophon .footer-inner-block {
	position: relative;
	z-index: 1;
}
/* セッション確立後、動画を表示 */
body.session-established .body-bg-video,
body.session-established .footer-bg-video {
	opacity: 1;
}
/* ページコンテンツのフェードイン */
body.session-established {
	animation: fadeInPage 0.5s ease-out forwards;
}
/* 初期状態でもbody-contentを表示（ローディング完了前でも表示されるように） */
#body-content {
	opacity: 1;
}
/* TOPページ以外では即座に表示（アニメーションなし） */
body.is-other-page #body-content {
	opacity: 1 !important;
	animation: none !important;
}
/* TOPページのみ、セッション確立後にフェードイン */
body.is-front-page.session-established #body-content {
	animation: fadeInPage 0.5s ease-out forwards;
}
@keyframes fadeInPage {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* ========================================
   ローディングアニメーション
   ======================================== */
/* TOPページ以外ではローディングアニメーションを非表示 */
body.is-other-page .loading-animation {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}
.loading-animation {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 9999;
	opacity: 1;
	visibility: visible;
	transition: opacity 2.1s ease-out, visibility 2.1s ease-out;
}
.loading-animation.hidden {
	opacity: 0;
	visibility: hidden;
}
.loading-animation #loading {
	font-size: 16px;
	color: #1F304E;
	display: grid;
	row-gap: clamp(1.5rem, 0.903rem + 1.59vw, 2.813rem);
	place-items: center;
	align-content: center;
	justify-content: center;
	height: 100dvh;
}
.loading-animation #loading h1,
.loading-animation #loading h2,
.loading-animation #loading p {
	font-weight: normal;
	line-height: 1;
	margin-block: 0;
	text-align: center;
}
.loading-animation #loading h1 {
	font-size: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.025em;
	width: fit-content;
	margin-inline: auto;
}
.loading-animation #loading h2,
.loading-animation #loading p {
	font-size: clamp(1em, 0.643em + 0.95vw, 1.5em);
	line-height: 1.6;
	font-weight: 700;
	letter-spacing: 0.05em;
}
.loading-animation #loading svg {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 1;
}
.loading-animation #loading svg.logomark {
	aspect-ratio: 1/1;
	width: clamp(3.125rem, 1.071rem + 5.48vw, 6rem);
	color: #1F304E;
}
.loading-animation #loading svg.logotitle {
	aspect-ratio: 1/0.148;
	height: clamp(2.5rem, 0.714rem + 4.76vw, 5rem);
	color: #1F304E;
}
/* アニメーション定義 */
@keyframes fadeInScale {
	0% {
		opacity: 0;
		transform: scale(0.98) translateY(0.25em);
	}
	10% {
		opacity: 0.09;
	}
	90% {
		opacity: 0.94;
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}
/* フェードアウトアニメーション */
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.loading-animation .company-logo,
.loading-animation .loading-inner {
	opacity: 0;
	animation: fadeInScale 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
	transition: opacity 2.1s ease-out;
	/* フェードアウトは親要素のtransitionと同期 */
}
/* 親要素がhiddenになったら子要素のアニメーションを無効化し、フェードアウト */
.loading-animation.hidden .company-logo,
.loading-animation.hidden .loading-inner {
	animation: none;
	opacity: 0;
}
.loading-animation .loading-inner {
	display: grid;
	row-gap: 0.7em;
}
.loading-animation .loading-inner p {
	grid-template-rows: 1/2;
}
.loading-animation .loading-inner h2 {
	grid-template-rows: 2/3;
}
@media (width > 1920px) {
	.loading-animation #loading svg.logomark {
		width: calc(5vw + 1.8em);
	}
	.loading-animation #loading svg.logotitle {
		height: calc(4vw + 1.8em);
	}
	.loading-animation #loading h2,
	.loading-animation #loading p {
		font-size: calc(1vw + 0.7em);
	}
}
/* 動画の上にオーバーレイを配置（オプション）
body::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	z-index: -1;
}
  */
.link-wrapper {
	position: relative;
	a {
		position: relative;
		display: block;
		/* padding: 1.5em 2em;
		color: #333; */
		/* text-decoration: none; */
		/* font-size: 1rem;
		font-weight: 600; */
		transition: color 0.2s;
		&::before,
		&::after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			transition: all 0.2s ease;
		}
		/* 上辺（左→右） */
		&::before {
			top: 0;
			left: 0;
			border-top: 1px solid transparent;
		}
		/* 右辺（上→下） */
		&::after {
			top: 0;
			right: 0;
			border-right: 1px solid transparent;
		}
		/* ホバー時のアニメーション */
		&:hover {
			&::before {
				width: 100%;
				border-top-color: red;
				transition-delay: 0s;
			}
			&::after {
				height: 100%;
				border-right-color: red;
				transition-delay: 0.2s;
			}
		}
	}
	/* 追加の疑似要素用のspan */
	&::before,
	&::after {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		transition: all 0.2s ease;
	}
	/* 下辺（右→左） */
	&::before {
		bottom: 0;
		right: 0;
		border-bottom: 1px solid transparent;
	}
	/* 左辺（下→上） */
	&::after {
		bottom: 0;
		left: 0;
		border-left: 1px solid transparent;
	}
	&:hover::before {
		width: 100%;
		border-bottom-color: red;
		transition-delay: 0.4s;
	}
	&:hover::after {
		height: 100%;
		border-left-color: red;
		transition-delay: 0.6s;
	}
	a:hover {
		color: red;
	}
}
/* ========================================
   モバイル用スクロールボタン（600px以下のみ表示）
   ======================================== */
/* スクロール中に非表示になる下部ボタン */
.mobile-scroll-button {
	/* デフォルト：非表示（PC用） */
	display: none;
	/* モバイル（600px以下）のみ表示 */
	@media (max-width: 600px) {
		background-color: var(--wp--preset--color--arisaka-lightgray-color);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: fit-content;
		border: none;
		cursor: pointer;
		transition: 1s ease;
		z-index: 900;
		font-size: 14px;
		font-weight: 600;
		display: flex;
		justify-content: center;
		column-gap: 1px;
		a {
			padding-block: 0.8em 1.1em;
			font-weight: 700;
			display: block;
			width: 100%;
			text-align: center;
			margin-top: 0;
			height: auto;
			align-content: center;
			background-color: #26519D;
			color: var(--wp--preset--color--white);
			transition: background-color 0.6s ease, color 0.6s ease;
			/* 修正 */
			&:hover,
			&:active,
			&:focus,
			&:focus-visible {
				background-color: #142a4f;
				color: var(--wp--preset--color--arisaka-lightgray-color);
			}
			&:nth-of-type(1)>span:nth-child(1) {
				font-size: 11px;
			}
		}
		.telcallnumber {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.6em;
			font-size: 1.1em;
			svg {
				width: 1.2em;
				height: auto;
				line-height: 1;
			}
		}
	}
}
/* スクロール中にボタンを非表示にするクラス */
.mobile-scroll-button.scrolling {
	transform: translateY(100%);
}
/* ========================================
   ページトップボタン：スクロール制御とモバイル対応
   ======================================== */
/* スクロール10%未満では非表示（デスクトップ・モバイル共通） */
.pageTop {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* スクロール10%以上で表示（デスクトップ・モバイル共通） */
.pageTop.show {
	opacity: 1;
	visibility: visible;
}
/* モバイル（600px以下）での表示調整 */
@media (max-width: 600px) {
	.pageTop {
		bottom: 120px;
		/* 下部ボタンの上に配置 */
		right: 20px;
		/* 右側の余白を調整 */
	}
}
p:has(a).link-page {
	margin-block-start: 0.5em;
	a {
		border: 1px solid var(--wp--preset--color--arisaka-lightgray-color);
		width: fit-content;
		margin-inline: auto;
		display: grid;
		text-align: center;
		padding: 0.7em 3.25em;
		color: var(--wp--preset--color--arisaka-lightgray-color);
		min-width: 18em;
		font-size: 1em;
		transition: 0.8s ease-in;
		&:hover {
			background-color: var(--wp--preset--color--arisaka-lightgray-color);
			color: var(--wp--preset--color--arisaka-main-color);
		}
	}
	&.dark {
		a {
			border-color: var(--wp--preset--color--arisaka-main-color);
			color: var(--wp--preset--color--arisaka-main-color);
			&:hover {
				background-color: var(--wp--preset--color--arisaka-main-color);
				color: var(--wp--preset--color--white);
			}
		}
	}
}
p:has(a).link-other-page {
	margin-block: 1.5em 2.3em;
	a {
		display: block;
		width: fit-content;
		border-bottom: 1px solid transparent;
		padding-block-end: 0.7em;
		margin-inline: auto 0;
		font-size: 1.05em;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 99%;
			height: 1px;
			background-color: var(--wp--preset--color--arisaka-main-color);
			transition: width 0.3s ease;
		}
		&:hover::after {
			width: 110%;
		}
	}
	&.dark {
		color: var(--wp--preset--color--white);
		a {
			&::after {
				background-color: var(--wp--preset--color--white);
			}
		}
	}
}
.width-wide-block_front-page img {
	object-position: center top;
	width: 100%;
	min-height: 420px;
	object-fit: cover;
	object-position: center top;
}
img[src$="no-image.webp"] {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
	/* border: 1px solid var(--wp--preset--color--arisaka-lightgray-color); */
}
.post-thumbnail:has(img[src$="no-image.webp"]),
figure:has(img[src$="no-image.webp"]){
	border: 1px solid var(--wp--preset--color--arisaka-lightgray-color);
}
.faq {
	counter-reset: qa 0;
	dl {
		margin-inline: auto;
		dt, dd {
			margin-inline: 0;
			padding-block: 1em;
			padding-inline-start: 1em;
			display: inline-flex;
			text-align: justify;
		}
		dt {
			counter-increment: qa;
			background: var(--wp--preset--color--arisaka-lightgray-color);
			color: var(--wp--preset--color--arisaka-main-color);
			letter-spacing: 0.1125rem;
			font-weight: 700;
			width: 100%;
			padding-inline-end: 1em;
		}
		dd {
			padding-block: 1.5em 2.4em;
			letter-spacing: 0.1em;
		}
		dt::before,
		dd::before {
			font-weight: normal;
			font-family: 'EB Garamond', serif;
			font-size: 20px;
			margin-inline-end: 0.85em;
		}
		dt::before {
			content: "Q" counter(qa) ".";
		}
		dd::before {
			content: "A" counter(qa) ".";
			font-weight: normal;
			letter-spacing: 0.15rem;
		}
	}
}

/* パンくずリストのスタイル */
.breadcrumbs{
	/* width: clamp(21.25rem, 9.721rem + 49.19vw, 68.75rem); */
	max-width: var(--arisaka-narrow-width);
	margin-inline: auto;
	text-align: right;
	line-height: 2;
	font-size: 0.8125rem;
	letter-spacing: 0.08125em;
	margin-block-end: 4em;
	a{
		display: inline-block;
		height: 4em;
		align-content: center;
		width: fit-content;
		padding-inline: 0.5em;
	}
}




.width-wide-block_other-page{
	position: relative;
	width: 100dvw;
	left:50%;
	transform: translateX(-50%);
	overflow: hidden;
	img{
		width:100%;
		height:100%;
		object-fit: cover;
	}
}


.signature{
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-inline: auto 0;
	width: fit-content;
	margin-block-start: 2em;;
}

.carousel-home {
 margin-block-start: 5.5em;
 width: 100%;
 display: flex;
 overflow-x: auto;
 gap: 1em;
 scrollbar-width: none;

 &::-webkit-scrollbar {
  display: none;
 }
 .group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5em;
  animation: spin 80s linear infinite;
 }
 .card {
  width: clamp(18.75em, 13.973em + 12.74vw, 25.438em);
  aspect-ratio: 4 / 2.7;
  align-content: center;

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


/* pagenavigation */
.pagination_wrapper{
	ul{
		display: flex;
		align-items: center;
		justify-content: center;
		gap:0.25em;
		a{display: block}
		.page-numbers{
			width:2em;
			display: grid;
			place-content: center;
			transition: 0.3s ease;
		}
		.page-numbers.prev,
		.next.page-numbers{
			width:4.5em;
			display:flex;
			align-items: center;
			column-gap: 0.5em;
		}
		.page-numbers.prev{
			justify-self: start;
			&::before{
				content: '◀';
				font-size:12px;
			}
		}
		.next.page-numbers{
			justify-self: end;
			&::after{
				content: '▶';
				font-size:12px;
			}
		}
		.page-numbers:not(.dots):not(.prev):not(.next){
			width:2em;
			height:2.5em;
			display: grid;
			place-content: center;
			background-color: var(--wp--preset--color--white);
			color: var(--wp--preset--color--arisaka-main-color);
			border:1px solid var(--wp--preset--color--arisaka-main-color);
			
			&:hover{
				background-color: var(--wp--preset--color--arisaka-main-color);
				color: var(--wp--preset--color--white);
				border-color:var(--wp--preset--color--arisaka-main-color);
			}
			&.current{
				background-color: var(--wp--preset--color--arisaka-main-color);
				color: var(--wp--preset--color--white);
			}
		}
		.page-numbers.dots{
			height:fit-content;
				height:100%;
		}
	}

}

@keyframes spin {
 from {
  transform: translateX(0);
 }

 to {
  transform: translateX(-100%);
 }
}

/* キーフレームアニメーション */
@keyframes dashFlow {
 to {
  stroke-dashoffset: -1;
 }
}

/* 投稿ナビゲーション */
.works-content-list{
	margin-block-start: 7.5em;
	a{
		display: block;
		height: 3.5rem;
		position: relative;
		border-radius: 28px;
		background-color: var(--wp--preset--color--arisaka-accent-color);
		font-size: 1.125em;
		letter-spacing: 0.1em;
		color:var(--wp--preset--color--white);
		width: fit-content;
		align-content: center;
		padding-inline: clamp(5em, 3em + 5.82vw, 8em);
		margin-inline: auto;
		transition: 0.3s ease;
		&:hover{
			background-color: var(--wp--preset--color--arisaka-main-color);
			color:var(--wp--preset--color--arisaka-background-light);
			opacity: 1 !important;
		}
	}
}
nav.post-navigation{
	width: 100%;
	max-width: var(--arisaka-narrow-width);
	margin-inline: auto;
	padding-inline: 1rem;
>.nav-links{
margin-block: 3.5em;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1em;
a{
	display: block;
	width: fit-content;
}
}
}

/* 投稿用 */
/* .inner-archive,
.post-li.post-category{
    margin-block-end: 10em;
} */
.storycontent{
	display:block flow-root;
}
.site-content:has(header.entry-header.news),
.site-content:has(header.page-header.news),
.site-content:has(header.entry-header.column),
.site-content:has(header.page-header.column),
.site-content:has(header.entry-header.works),
.site-content:has(header.page-header.works),
.site-content:has(header.page-header.item),
.entry-content.guide,
.entry-content.contact,
.storycontent,
.entry-content.pure_memorial,
article#wc_ordercompletion,
div.member-page,
main.cart-page,
div.cart-page,
section.error-404.not-found .page-content{
	margin-block-end: 10em;
}

.site-content:has(header.page-header.works) .works-archive{
	margin-block-end: 5em;
}


article#wc_ordercompletion,
div.member-page,
main.cart-page,
div.cart-page,
section.error-404.not-found .page-content{
	margin-block-start: clamp(5.5em, 3.625em + 5vw, 8em);
	max-width: var(--arisaka-narrow-width);
	margin-inline: auto;
	padding-inline: 1rem;
}

body:has(article#wc_ordercompletion,
div.member-page,
main.cart-page,
div.cart-page){
	header#masthead{
		background-color: var(--wp--preset--color--arisaka-main-color);
	}
}


/* ul */
.marker-001{
	padding-inline-start: 1em;
	margin-block-end: 1em;
li::marker {
		content: '※';
		padding-inline-end: 1em;
	}
	li{
		line-height: 1.75;
		margin-block-end: 0.25em;
		text-align: justify;
	}

}

@media(width < 1120px) {
	.breadcrumbs{
	margin-inline:1.5em;
	
	}
}


/* 404 error page */
section.error-404.not-found .page-content{
	h2{
		font-size: 2em;
		font-weight: 700;
		letter-spacing: 0.2em;
		margin-block-end: 1em;
	}
	p{
		margin-block-end: 2em;
		font-size: 1em;
		line-height: 1.6;
	}
	.search-form-container{
		margin-block-start: 2em;
		.search-form{
			max-width: 600px;
			margin: 0 auto;
			.search-form-wrapper{
				display: flex;
				align-items: center;
				gap: 0.5em;
				margin-block-end: 1.5em;
				.search-field-label{
					flex: 1;
					.search-field{
						width: 100%;
						padding: 0.75em 1em;
						border: 1px solid var(--wp--preset--color--cyan-bluish-gray);
						border-radius: 0;
						font-size: 1em;
						outline: none;
						box-shadow: none;
						&:focus{
							border-color: var(--wp--preset--color--arisaka-main-color);
							box-shadow: 0 0 0 2px rgba(var(--wp--preset--color--arisaka-main-color-rgb), 0.1);
						}
					}
				}
				.search-submit{
					padding: 0.75em 1.5em;
					background-color: var(--wp--preset--color--arisaka-main-color);
					border: 2px solid var(--wp--preset--color--arisaka-main-color);
					color: var(--wp--preset--color--white);
					cursor: pointer;
					transition: all 0.3s ease;
					display: flex;
					align-items: center;
					justify-content: center;
					&:hover{
						opacity: 0.8;
					}
					.search-icon{
						width: 20px;
						height: 20px;
						fill: none;
						stroke: currentColor;
					}
				}
			}
			.search-type-selector{
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 1em;
				flex-wrap: wrap;
				.search-type-option{
					display: flex;
					align-items: center;
					gap: 0.5em;
					cursor: pointer;
					input[type="radio"]{
						margin: 0;
						accent-color: var(--wp--preset--color--arisaka-main-color);
					}
					span{
						font-size: 0.9em;
					}
				}
			}
		}
	}
}

:where(h1.move, h2.move ,h3.move, h4.move, .tree-promise.move) {
overflow: hidden;
span{display: block}
}
.move span{
	transform: translateY(4em);
	transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
}
.move.hightype span{transform: translateY(14em);}
.move.in-view span{
	transform: translateY(0);
}