@charset "UTF-8";
/*
Theme Name: xeory_extension_child
Theme URI: https://maruman-test.local/
Description: Child theme for the Xeory
Author: バズ部
Author URI: http://bazubu.com/
Template: xeory_extension
Version: 0.1.0
*/

/* ----------------------------------------
* トップページ全般設定
---------------------------------------- */
.home #content {
	font-family: "Zen Kaku Gothic New", sans-serif;
	padding: 0;
}
.home #main {
	font-family: "Zen Kaku Gothic New", sans-serif;
}

/* ----------------------------------------
* ファーストビュー部分
---------------------------------------- */
#fv-wrapper {
	background-image: url('../images/top_020.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	backdrop-filter: blur(4px) brightness(0.6);
	/*padding-bottom: 10vh;*/
}
#fv-wrapper .header-wrap {
	width: 95%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
#fv-wrapper #logo {
	width: auto;
}
.home #main_visual {
	background-color: transparent;
	background-image: none;
	background-image: none;
	padding-top: 0;
	padding-bottom: 5vh;
	border-bottom: 1px solid #ffffff;
	min-height: calc(100vh - 315px);
	transform: translateY(-70px);
}
.main-visual-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.catchcopy {
	flex: 1 1 39%;
	text-align: left;
	align-self: end;
}
.home #main_visual h2 {
	font-size: 20px;
	line-height: unset;
	margin: 0;
}
.main-image {
	flex: 0 0 auto;
	margin: 0 auto;
	align-self: flex-start;
}
.facebook-link {
	flex: 1 1 39%;
	text-align: right;
	align-self: end;
}
.facebook-link a {
	margin-right: -6.7%;
	background-color: #1877f2;
	display: inline-block;
	padding: 10px 10px 10px 15px;
	border-radius: 6px 0px 0 6px;
}
.facebook-link img {
	width: 40px;
}
.home #front-service {
	background: transparent;
}

/* ファーストビュースライダー */
.slider-outer{
	display:flex;
	justify-content:center;
}
.slider {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	flex: 1 1 22%;
	transform: translateY(-60px);
}
#mainSlider .slide-track {
	display: flex;
	transition: none;
}
#mainSlider.is-ready .slide-track {
	transition: transform 0.8s ease-in-out;
}
.slide {
	flex: 0 0 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.slide picture,
.slide img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	display: block;
	object-fit: contain;
}

/* ----------------------------------------
* トップページの各コンテンツ　ここから
---------------------------------------- */

/* ----------------------------------------
* 家具ができるまで
---------------------------------------- */
.create-process {
	background-color: #dfdbd0;
	margin: 50px 15px 200px;
	border-radius: 6px;
}
.create-process-inner {
	display: flex;
	justify-content: center;
	gap: 100px;
	padding: 50px 20px;
}
.create-process-intro {
	width: 40%;
}
.create-process-intro-blk {
	display: flex;
	gap: 50px;
	margin: 0 0 2em;
}
.create-process-title {
	font-size: 22px;
	margin: 0;
	font-weight: bold;
	font-weight: 600;
	grid-column: span 2;
}
.create-process-description {
	margin: 0;
}
.create-process-more-link {
	align-self: flex-end;
	color: #000000;
}
.create-process-link-list {
	margin: 0;
	padding: 0;
}
/*.create-process-link-item {
border-top: 1px solid #000000;
}*/
.create-process-link-item:not(:first-child) {
	border-top: 1px solid #000000;
}
.create-process-link-item:last-child {
	border-bottom: 1px solid #000000;
}
.create-process-link-item a {
	color: #000000;
	padding: 20px 5px;
	display: inline-grid;
	grid-template-columns: 1fr auto;
	gap: 0px 50px;
	font-size: 15px;
}
.create-process-gallery {
	display: flex;
	gap: 10px;
	text-align: center;
	width: 60%;
}
.create-process-card a {
	color: #000000;
}
.create-process-card span {
	display: inline-block;
	margin-top: 10px;
}

/* ホバーアクション */
.create-process-link-list .create-process-description,
.create-process-link-list .create-process-more-link {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition:
		opacity .7s ease,
		max-height .7s ease;
	padding-top: 0;
}
.create-process-link-list .create-process-link-item:first-child .create-process-description,
.create-process-link-list .create-process-link-item:first-child .create-process-more-link {
	opacity: 1;
	max-height: 300px;
	transition:
		opacity .7s ease,
		max-height .7s ease;
	padding: 20px 0 0;
}
.create-process-link-list:has(.create-process-link-item:nth-child(n+2):hover) 
.create-process-description,
.create-process-link-list:has(.create-process-link-item:nth-child(n+2):hover) 
.create-process-more-link {
	opacity: 0;
	max-height: 0;
	transition:
		opacity .7s ease,
		max-height .7s ease;
	padding-top: 0;
}
.create-process-link-list:has(.create-process-link-item:nth-child(n+2):hover) .create-process-link-item:first-child .create-process-description,
.create-process-link-list:has(.create-process-link-item:nth-child(n+2):hover) .create-process-link-item:first-child .create-process-more-link {
	opacity: 0;
	max-height: 0;
	transition:
		opacity .7s ease,
		max-height .7s ease;
	padding-top: 0;
}
.create-process-link-list:has(.create-process-link-item:nth-child(n+2):hover) .create-process-link-item:nth-child(n+2):hover .create-process-description,
.create-process-link-list:has(.create-process-link-item:nth-child(n+2):hover) .create-process-link-item:nth-child(n+2):hover .create-process-more-link {
	opacity: 1;
	max-height: 300px;
	transition:
		opacity .7s ease,
		max-height .7s ease;
	padding: 20px 0 0;
}
.create-process-link-list .create-process-link-item:first-child:hover .create-process-description,
.create-process-link-list .create-process-link-item:first-child:hover .create-process-more-link {
	opacity: 1;
	max-height: 300px;
	transition:
		opacity .7s ease,
		max-height .7s ease;
	padding: 20px 0 0;

}
.create-process-link-list:has(.create-process-link-item:nth-child(n+2):focus-within)
.create-process-description,
.create-process-link-list:has(.create-process-link-item:nth-child(n+2):focus-within)
.create-process-more {
	opacity: 1;
	max-height: 300px;
	padding: 20px 0 0;
}


/* ----------------------------------------
* 無垢板の魅力
---------------------------------------- */
.strengths {
	padding: 50px 0 200px;
}
.ancient-wood-title {
	font-size: 30px;
	font-weight: bold;
	font-weight: 600;
	line-height: 1;
	color: #ffffff;
	margin: 0 50px 40px;
}
.ancient-wood-title-description {
	color: #ffffff;
	margin: 0 40px;
}
.ancient-wood {
	background-image: url('../images/top_018.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 50px 0 150px;
	margin-top: -250px;
}
.ancient-wood-process {
	display: flex;
	gap: 2px;
	justify-content: space-around;
	align-items: stretch;
	margin: 100px 0 0;
}
.ancient-wood-process span {
	color: #ffffffff;
	display: flex;
	align-items: center;
	font-size: 20px;
}
.ancient-wood-card {
	background-color: #cdc7b5;
	padding: 15px;
	width: 15%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.ancient-wood-card p {
	margin: 0;
}
.wood-aging {
	padding: 60px 0px 0px;
}
.wood-aging-inner {
	display: flex;
	justify-content: space-between;
	padding: 0px 100px 100px;
	gap: 200px;
}
.wood-aging-img-blk {
	position: relative;
	width: 100%;
	max-width: 450px;
	aspect-ratio: 3 / 4;
	margin-top: -110px;
}
.wood-aging-img-container {
	position: absolute;
}
.wood-aging-img-container img {
	width: 70%;
	object-fit: cover;
}
.wood-aging-img-container.back {
	z-index: 1;
}
.wood-aging-img-container.front {
	z-index: 2;
	bottom: -15%;
	right: -25%;
}
.wood-aging-title {
	font-size: 30px;
	font-weight: bold;
	font-weight: 600;
	line-height: 1;
	margin: 0 0px 50px;
}
.wood-aging-title-description {
	margin: 0;
}


/* ----------------------------------------
* 丸萬だからできること
---------------------------------------- */
.unique-values {
	padding: 50px 0 300px;	
}
.unique-values-ask {
	background-image: url(../images/top_029.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 250px 0px 0px;
	margin-top: -120px;
}
.unique-values-ask-inner {
	margin: 0 50px;
}
.unique-values-q {
	display: flex;
	gap: 10px;
	justify-content: space-around;
	align-items: stretch;
}
.unique-values-card {
	background-color: #dfdbd0;
	flex: 1;
	border-radius: 6px;
	margin-bottom: -100px;
}
.unique-values-card-title {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	font-size: 20px;
	line-height: 1.3;
}
.unique-values-card-description {
	padding: 20px;
	margin: 0;
}
.unique-values-card-link {
	border-top: 1px solid #000000;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #000000;
}


/* ----------------------------------------
* 制作フロー
---------------------------------------- */
.order-flow {
	padding: 50px 0 220px;
	border-bottom: 1px solid #000000;
}
.order-flow-step {
	margin-top: -100px;
}
.order-flow-step-inner {
	margin: 0px 50px;
	padding: 0px 0px 100px;
}
.order-flow-step-completion {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	padding: 0 60px;
	width: 60%;
}
.arrow-line-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	align-self: stretch;
}
.arrow-line {
	width: 1px;
	flex: 1;
	background-color: #000000; 
}
.arrow-head {
	width: 7px;
	height: 7px;
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	transform: rotate(-45deg);
	margin-top: -7px;
}
.order-flow-step-main {
	flex: 1;
}
.order-flow-step-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
}
.order-flow-step-steps li {
	counter-increment: step;
	padding: 12px 16px;
	margin-bottom: 6px;
	position: relative;
	border-radius: 6px;
	border: 1px solid #231815;
}
.order-flow-step-steps li::before {
	content: counter(step, decimal-leading-zero);
	font-weight: bold;
	margin-right: 10px;
}
.order-flow-step-note {
	display: inline-block;
	font-size: 12px;
	color: #831a20;
	float: right;
	text-align: center;
	line-height: 1.2;
}
.order-flow-step-completed {
	background: #dfdbd0;
	padding: 12px 16px;
	margin-top: 10px;
	font-weight: bold;
	text-align: center;
	border-radius: 6px;
}
.order-flow-step-labels {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	margin-bottom: 60px;
}
.order-flow-step-label {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	background-color: #aca488;
	padding: 8px;
	font-weight: bold;
	text-align: center;
	border-radius: 6px;
	color: #ffffff;
}
.order-flow-step-label.produce {
	align-self: flex-end;
	height: 168px;
}
.order-flow-step-label.discuss {
	align-self: stretch;
}


/* ----------------------------------------
* 丸萬まで是非一度お越しください
---------------------------------------- */
.access {
	padding: 50px 0 120px;
}
.access-vt {
	border-bottom: 1px solid #000000;
	padding-bottom: 30px;
	font-size: 36px;
	font-weight: bold;
	font-weight: 600;
	line-height: 1;
}
.access-vt-description {
	margin: 1em 0 0;
}
.access-vt-img-blk {
	max-width: 500px;
	aspect-ratio: 1 / 1;
	width: 45%;
}
.access-info {
	background-image: url(../images/top_001.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 70px 0;
	margin-top: -350px;
}
.access-info-company {
	font-size: 24px;
}
.access-info address {
	margin:0 0 2em;
}
.access-info address p {
	margin: 0;
}
.access-info-inner {
	margin: 0px 50px;
	color: #ffffff;
	width: 45%;
}
.access-info-parking {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 1em;
}
.access-info-parking img {
	width: 35px;
}
.access-info-direction {
	margin: 0 0 2em;
}
.access-info-links ul {
	display: flex;
	gap: 20px;
	align-items: stretch;
	padding: 0;
	margin: 0;
}
.access-info-links li {
	border: 1px solid #ffffff;
	display: flex;
	align-items: stretch;
	justify-content: center;
	border-radius: 3px;
}
.access-info-links li a {
	padding: 3px 30px;
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1;
	border-radius: 3px;
}
.access-info-links img {
	width: 25px;
}
.contact-info-inner {
	display: flex;
	justify-content: space-between;
	margin: 0 50px;
	padding: 20px 0;
}
.contact-info-links {
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10px;
}
.contact-info-links li {
	display: flex;
	align-items: stretch;
}
.contact-info-links a {
	color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3px 20px;
	gap: 10px;
	border: 1px solid #000000;
	line-height: 1;
	border-radius: 3px;
}
.contact-info-links .contact-tel {
	font-weight: bold;
	font-weight: 600;
	font-size: 20px;
}
.contact-info-links img {
	width: 30px;
}
.contact-info-present {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.contact-info-present img {
	width: 120px;
	margin-top: -50px;
}


/* ----------------------------------------
* トップページ下部　メニュー
---------------------------------------- */
.top-btm-menu {
	padding: 50px 0 220px;
}
.top-btm-menu-inner {
	width: 85%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}
.top-btm-menu-body {
	display: flex;
	gap: 20px;
	align-items: stretch;
	width: 50%;
	padding: 30px 60px;
}
.top-btm-menu-body:first-child {
	border-right: 1px solid #000000;
}
.top-btm-menu-img {
	width: 50%;
}
.top-btm-menu-txt {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 50%;
	gap: 10px;
}
.top-btm-menu-txt h3 {
	font-size: 20px;
	font-weight: bold;
}
.top-btm-menu-txt p {
	flex-grow: 1;
	margin: 0;
}
.top-btm-menu-txt a {
	width: 100%;
	padding: 12px 40px;
	border: 1px solid #000000;
	color: #000000;
	text-decoration: none;
	border-radius: 6px;
	align-self: flex-start;
	margin-top: auto;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	line-height: 1;
	font-size: 14px;
}
.top-btm-menu-body {
	width: 48%;
	padding: 20px 60px;
}


/* ----------------------------------------
* オイル塗装用モーダル　TOPページ下部
---------------------------------------- */
.mmodal {
	position: fixed; 
	inset: 0;
	z-index: 9999;
	display: none;
}
.mmodal.is-open,
.mmodal[aria-hidden="false"] { display: block; }
.mmodal__backdrop {
	position: absolute; inset: 0;
	background: rgba(0,0,0,.65);
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
}
.mmodal__layer {
	position: relative;
	min-height: 100%;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	overflow: visible;
}
.mm-modal__container {
	position: relative;
	display: grid; gap: 20px;
	width: min(960px, 92vw);
	padding: 35px 45px;
	background: #cdc7b5;
	border-radius: 6px;
	overflow: visible;
}
.mm-modal__close {
	position: absolute;
	right: 0; top: 0;
	transform: translate(50%, -50%);
	width: 40px; height: 40px; border-radius: 999px;
	background: #000; color: #fff; border: 0; cursor: pointer;
	font-size: 26px; text-align: center; line-height: 40px;
	z-index: 2;
}
.mm-modal__header h2 { 
	font-size: clamp(18px, 1.4rem, 24px); 
	font-weight: 700; 
	text-align: center; 
	margin: 0 40px 8px; 
}
.mm-modal__lead { margin: 0 auto; }
.mm-modal__grid { 
	display: grid; 
	gap: 0; 
	grid-template-columns: 1fr 1fr; 
	padding-top: 20px;
}
.mm-card-left  { 
	display: grid; 
	gap: 10px;
	padding: 15px 30px 15px 0; 
	border-right: 1px solid #000; 
}
.mm-card-right { 
	display: grid;
	gap: 10px; 
	padding: 15px 0 15px 30px;
}
.mm-card__thumb { 
	width: 100%; 
	aspect-ratio: 2/1; 
	overflow: hidden; 
	display: grid; 
	align-items: center; 
}
.mm-card__title { 
	font-size: 22px; 
	margin: 0; 
	font-weight: 700; 
	text-align: center; 
}
.mm-card__text  { margin: 0; }
.mm-note { 
	border: 1px solid #000; 
	padding: 8px 10px; 
}

.mm-modal__footer { 
	text-align: center;
	margin-top: 20px; 
}
.mm-modal__footer p { 
	width: 70%; 
	margin: 0 auto; 
	font-size: 22px; 
	font-weight: 700; 
	text-align: left; 
}
.mm-cta { 
	display: inline-flex; 
	padding: 10px 30px; 
	text-decoration: none;
	background: #000; 
	color: #fff; 
	font-weight: 700; 
	margin-top: 20px; 
	align-items: center; 
	gap: 30px;
	border-radius: 3px;
}
.mm-cta img { width: 30px; }
html.mm-scroll-lock, body.mm-scroll-lock { overflow: hidden !important; }


/* ----------------------------------------
* レスポンシブ
* ~ / 1200px / 991px / 767px
* desctop / laptop / tablet / phone
---------------------------------------- */
@media screen and (max-width: 1299px) {
	/* laptop */
	.order-flow-step-completion{
		padding: 0px
	}
	/* ----------------------------------------
	*  ページ下部メニュー
	---------------------------------------- */
	.top-btm-menu-inner{
	    width: 95%;
	}
	.top-btm-menu-body{
		padding: 20px 30px;
	}
	/* laptop end */
}
@media screen and (max-width: 1200px) {
	/* laptop */
	body {
		overflow: hidden;
	}
	/* ----------------------------------------
	*  丸萬まで是非一度お越しください
	---------------------------------------- */
	.access-info{
	   margin-top: -250px;
	}
	.access-info-links li a{
		padding: 3px 20px;
	}
	/* laptop end */
}
@media screen and (max-width: 1024px) {
	/* tablet */

	/* ----------------------------------------
	* 全体設定
	---------------------------------------- */
	body.home .wrap {
		margin: 0 3%;
	}


	/* ----------------------------------------
	* ファーストビュー
	---------------------------------------- */
	.home #main_visual {
		transform: translateY(-50px);
		min-height: auto;
		margin-top: 50px;
	}
	#fv-wrapper #main_visual .header-wrap {
		flex-direction: column-reverse;
		position: relative;
	}
	.home #main_visual h2 {
		font-size: 16px;
		line-height: 1;
	}
	.catchcopy {
		align-self: flex-start;
		flex: none;
	}
	.slider {
		transform: translateY(0px);
		flex: 1;
		width: 50%;
		margin: 0 auto 30px;
	}
	.facebook-link {
		position: absolute;
		flex: none;
	}
	.facebook-link a{
		margin-right: -35%;
	}

	/* ----------------------------------------
	*  無垢板の魅力
	---------------------------------------- */
	.ancient-wood{
		padding: 90px 0 150px;
		margin-top: -150px;
	}
	.ancient-wood-process{
		margin: 60px 0 0;
		display: grid;
		grid-template-columns: 1fr 0.15fr 1fr 0.15fr 1fr 0.15fr;
		gap: 10px 0px;
		justify-content: flex-start;
	}
	.ancient-wood-card{
		width: 100%;
	}
	.ancient-wood-process span .arrow-sv{
		width: 20px;
	}
	.wood-aging-inner{
		padding: 0px 20px 100px;
		gap: 10px;
	}
	/* ----------------------------------------
	*  丸萬だからできること
	---------------------------------------- */
	.unique-values-ask-inner{
		margin: 0;
	}
	.unique-values-ask{
		padding: 60px 0px 0px;
		margin-top: 20px;
	}

	/* ----------------------------------------
	*  制作フロー
	---------------------------------------- */
	.order-flow-step-completion{
		padding: 0 20px;
		width: 100%;
	}
	.order-flow-step{
		margin-top: 40px;
	}

	/* ----------------------------------------
	*  丸萬まで是非一度お越しください
	---------------------------------------- */
	.access-info{
	    margin-top: -120px;
	}
	/* ----------------------------------------
	*  ページ下部メニュー
	---------------------------------------- */
	.top-btm-menu-inner{
	    width: 95%;
	}
	.top-btm-menu-body {
	    width: 48%;
	    padding: 20px 15px;
	}
	.top-btm-menu-txt a{
		padding: 12px 10px;
	}
	/* tablet end */
}
@media screen and (max-width: 991px){
	/* ----------------------------------------
	* オーダー家具ができるまで
	---------------------------------------- */
	.create-process {
		margin: 30px 10px 100px;
	}
	.create-process-inner {
		padding: 5% 0;
		gap: 10px;
	}
	.create-process-intro {
		width: 100%;
	}
	.create-process-title {
		color: #000000;
		padding: 0px 0px 5px;
		display: block;
		margin: 0;
	}
	.create-process-link-item {
		display: flex !important;
		gap: 10px;
		border-top: none;
		margin-top: 5px;
		height: 170px;
	}
	.create-process-link-item:first-child {
		margin-top: 0px;
	}
	.create-process-link-item div:nth-of-type(1) {
		border-bottom: 1px solid #000000;
		flex: 1 1 60%;
	}
	.create-process-link-item div:nth-of-type(2) {
		align-self: flex-end;
		flex: 1 1 40%;
	}
	.create-process-link-item a {
		color: #000000;
		padding: 10px 0px 0px;
		display: block;
	}
	.create-process-link-item a.frist {
		padding: 0px;
	}
	span.create-process-more-link {
		color: #000000;
		padding: 5px 0px;
		display: block;
		text-align: right;
	}
	.create-process-gallery {
		flex-direction: column;
		gap: 5px;
		max-width: 125px;
	}
	.create-process-figure {
		position: relative;
	}
	.create-process-figure img {
		height: 170px;
		width: 125px;
	}
	.create-process-caption {
		position:absolute!important;
		clip:rect(1px,1px,1px,1px)!important;
		width:1px!important;
		height:1px!important;
		overflow:hidden!important;
		white-space:nowrap!important;
	}
	/* ----------------------------------------
	* 丸萬だからできること
	---------------------------------------- */
	.unique-values-card br{
		display: none;
	}
	/* ----------------------------------------
	*  丸萬まで是非一度お越しください
	---------------------------------------- */
	.access-info-inner{
		margin: 0px 0 0 20px;
		width: 100%;
	}
}
@media screen and (max-width: 768px){
	/* ----------------------------------------
	*  丸萬まで是非一度お越しください
	---------------------------------------- */
	.access-info{
	    margin-top: -80px;
	}
}

@media screen and (max-width: 767px) {
	/* phone */
	.facebook-link a{
		margin-right: -15%;
	}
	/* ----------------------------------------
	* オーダー家具ができるまで
	---------------------------------------- */
	.create-process-title {
		font-size: 16px;
	}
	.create-process-description {
		font-size: 12px;
	}
	.create-process-link-item a {
		font-size: 16px;
	}


	/* ----------------------------------------
	*  無垢板の魅力
	---------------------------------------- */
	.strengths {
		padding: 50px 0 100px;
	}
	.ancient-wood {
		padding: 200px 0 0px;
		margin-top: -220px;
	}
	.ancient-wood-inner {
		transform: translateY(50px);
	}
	.ancient-wood-title {
		margin: 0 0px 20px;
		font-size: 22px;
	}
	.ancient-wood-title-description {
		margin: 0;
		width: 80%;
	}
	.ancient-wood-process {
		margin: 40px 0 0;
		display: grid;
		grid-template-columns: 1fr 0.15fr 1fr 0.15fr;
		gap: 10px 0px;
		justify-content: flex-start;
	}
	.ancient-wood-card {
		padding: 10px;
		width: 100%;
	}
	.ancient-wood-card p {
        font-size: 12px;
        line-height: 1.2;
	}
	.wood-aging {
		padding: 110px 0px 0px;
	}
	.wood-aging-inner {
		flex-direction: column;
		gap: 30px;
		padding: 0;
	}
	.wood-aging-img-blk {
		margin: 0 auto;
		max-width: 250px;
		aspect-ratio: auto;
	}
	.wood-aging-img-container {
		position: static;
	}
	.wood-aging-img-container img{
	    width: 100%;
	}
	.wood-aging-title-blk{
		margin: 0 3%;
	}
	.wood-aging-title {
		margin: 0 0px 20px;
		font-size: 22px;
	}


	/* ----------------------------------------
	*  丸萬だからできること
	---------------------------------------- */
    .unique-values-card br {
        display: block;
    }
	.unique-values {
		padding: 50px 0 250px;
	}
	.unique-values-ask {
		width: 94%;
		margin-left: 3%;
		margin-right: 3%;
		border-radius: 6px;
		padding: 0px;
		margin-top: -110px;
	}
	.unique-values-ask-inner {
        margin: 0 10px;
		transform: translateY(150px);
	}
	.unique-values-q {
		flex-direction: column;
	}
	.unique-values-card {
		margin-bottom: 0;
	}
	.unique-values-card-title {
		padding: 15px;
	}
	.unique-values-card-title h3 {
		margin: 0;
	}
	.unique-values-card-title span {
		line-height: 1;
	}
	.unique-values-card-description {
		padding: 15px;
		margin: 0;
		width: 100%;
	}
	.unique-values-card-link {
		padding: 15px;
	}


	/* ----------------------------------------
	*  制作フロー
	---------------------------------------- */
	.order-flow {
		padding: 50px 0 100px;
	}
	.order-flow-step {
		margin-top: 50px;
	}
	.order-flow-step-inner {
		margin: 0;
		padding: 0px 0px 50px;
	}
	.order-flow-step-completion {
		gap: 5px;
		padding: 0;
		width: 100%;
	}
	.order-flow-step-steps li {
		padding: 6px;
		font-size: 12px;
	}
	.order-flow-step-steps li::before {
		margin-right: 5px;
	}
	.order-flow-step-completed {
		padding: 6px;
	}
	.order-flow-step-labels {
		gap: 5px;
		margin-bottom: 45px;
	}
	.order-flow-step-label {
		padding: 5px;
	}
	.order-flow-step-note {
		font-size: 10px;
		line-height: 1;
	}
	.order-flow-step-label.produce {
		height: 110px;
	}

	/* ----------------------------------------
	*  よくある質問
	---------------------------------------- */
	.faqs {
		margin: 50px 15px 100px;
	}
	.faqs-inner {
		padding: 20px 0;
	}
	.faqs-title {
		font-size: 18px;
	}
	.faqs-list {
		padding: 0;
	}
	.faqs-q-title {
		margin-right: 15px;
	}
	.faqs-a {
		padding: 15px 0 15px 15px;
		gap: 15px;
		flex-direction: column;
	}
	.faqs-a-links {
		flex-direction: column;
		gap: 20px;
	}
	.faqs-a-mailform {
		gap: 15px;
		font-size: 12px;
		padding: 3px 20px;
	}
	.faqs-a-tel {
		gap: 5px;
		font-size: 28px;
	}
	.faqs-a-img{
		width: 60%;
		max-width: 200px;
		margin: 0 auto;
	}

	/* ----------------------------------------
	*  丸萬まで是非一度お越しください
	---------------------------------------- */
	.access {
		padding: 50px 0 100px;
	}
	.access-vt-blk {
		text-align: center;
		margin-bottom: 50px;
	}
	.access-vt {
		font-size: 22px;
		margin: 0;
		padding-bottom: 15px;
	}
	.access-vt-description {
		font-size: 14px;
		margin: 0.5em 0 0;
	}
	.access-vt-img-blk {
		width: 80%;
		margin-left: auto;
	}
	.access-info {
		padding: 230px 0 50px;
		margin-top: -230px;
	}
	.access-info-inner {
		margin: 0;
	}
	.access-info-company {
		margin: 2em 0 0em;
	}
	.access-info address {
		margin: 0 0 1em;
	}
	.access-info-links ul {
		gap: 10px;
	}
	.access-info-links li {
		flex: 1;
	}
	.access-info-links li a {
        padding: 3px 5px;
        gap: 3px;
	}
	.contact-info-inner {
		margin: 0;
	}
	.contact-info-links li {
		flex: 1;
	}
	.contact-info-links a {
		padding: 3px 10px;
		gap: 5px;
		width: 100%;
	}
	.contact-info-links .contact-tel {
		font-size: 16px;
	}


	/* ----------------------------------------
	*  ページ下部メニュー
	---------------------------------------- */
	.top-btm-menu-inner {
		width: 100%;
		flex-direction: column;
	}
	.top-btm-menu-body:first-child {
		border-right: none;
		border-bottom: 1px solid #000000;
	}
	.top-btm-menu-body {
		width: 100%;
		padding: 20px 0;
		gap: 10px;
	}
	.top-btm-menu-txt h3 {
		font-size: 18px;
		margin: 0em 0 1em;
	}
	.top-btm-menu-txt a {
		padding: 8px 20px;
		border-radius: 3px;
	}


	/* ----------------------------------------
	*  オイル塗装用モーダル　TOPページ下部
	---------------------------------------- */
	.mmodal__layer {
		display: block;
		max-height: 100dvh;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: calc(12px + env(safe-area-inset-top))
			10px
			calc(12px + env(safe-area-inset-bottom));
	}
	.mm-modal__container {
		width: 100%;
		padding: 30px 20px;
		gap: 10px;
		overflow: visible;
		border-radius: 10px;
		margin: 0 auto;
	}
	.mm-modal__header h2 {
		margin: 0 20px 8px;
		font-size: 18px;
	}
	.mm-modal__grid { 
		grid-template-columns: 1fr;
		padding-top: 10px;
	}
	.mm-card-left {
		padding: 10px 0;
		border-right: none;
		border-bottom: 1px solid #000; 
	}
	.mm-card-right {
		padding: 10px 0;
	}
	.mm-card__thumb {
		width: 70%;
		margin: 0 auto;
	}
	.mm-modal__close {
		transform: translate(25%, -25%);
	}
	.mm-modal__footer p {
		width: 100%;
		font-size: 16px;
	}

	/* phone end */
}

@media screen and (max-width: 767px), (hover: none), (any-hover: none) {

	/* ----------------------------------------
	*  オーダー家具ができるまで ホバーアクション無効化
	---------------------------------------- */
	.create-process-link-list .create-process-description {
		opacity: 1 !important;
		max-height: none !important;
		padding: 10px 0 0 !important;
	}
	.create-process-link-list .create-process-more-link {
		opacity: 1 !important;
		max-height: none !important;
		padding: 0 !important;
	}
	.create-process-link-list:has(.create-process-link-item:nth-child(n+2):hover) 
	.create-process-description {
		opacity: 1 !important;
		max-height: none !important;
		padding: 10px 0 0 !important;
	}
	.create-process-link-list:has(.create-process-link-item:nth-child(n+2):hover) 
	.create-process-more-link {
		opacity: 1 !important;
		max-height: none !important;
		padding: 0 !important;
	}
	.create-process-link-list:has(.create-process-link-item:nth-child(n+2):hover) .create-process-link-item:first-child .create-process-description {
		opacity: 1 !important;
		max-height: none !important;
		padding: 10px 0 0 !important;
	}
	.create-process-link-list:has(.create-process-link-item:nth-child(n+2):hover) .create-process-link-item:first-child .create-process-more-link {
		opacity: 1 !important;
		max-height: none !important;
		padding: 0 !important;
	}
	.create-process-link-list .create-process-link-item:hover .create-process-description,
	.create-process-link-list .create-process-link-item:focus-within .create-process-description {
		opacity: 1 !important;
		max-height: none !important;
		padding: 10px 0 0 !important;
	}
	.create-process-link-list .create-process-link-item:hover .create-process-more-link,
	.create-process-link-list .create-process-link-item:focus-within .create-process-more-link {
		opacity: 1 !important;
		max-height: none !important;
		padding: 0 !important;
	}
	.create-process-link-list:has(.create-process-link-item:nth-child(n+2):focus-within)
	.create-process-description {
		opacity: 1 !important;
		max-height: none !important;
		padding: 10px 0 0 !important;
	}
	.create-process-link-list:has(.create-process-link-item:nth-child(n+2):focus-within)
	.create-process-more-link {
		opacity: 1 !important;
		max-height: none !important;
		padding: 0 !important;
	}
}