@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* 変数 */
:root {

	/* 色 */
	--okm-red: #e60039; 
	--dark-red: #D60025;

	/* フォント系 */
	--japanese-fonts: "Noto Sans JP", sans-serif;
	--western-fonts: "Poppins", sans-serif; 


	@media only screen and (min-width: 768px) {
		--okm-red: #999; 
	}

	@media only screen and (min-width: 1024px) {
		--okm-red: #000; 
	}

}


/* 打ち消し */
em, strong {
	font-weight: normal; 
	font-family: var(--japanese-fonts)
}


#wrapper {
	overflow: visible; 

}

.main article p:has(+p) {
	margin: unset;
}

.main p a { text-decoration: none;}
.main p a:link { color: #000;}
.main p a:visited { color: #000;}
.main p a:hover { color: #000;}
.main p a:focus { outline: none;}
.main p a:active { outline: none;}

.main p a[target="_blank"]:after {
	display: none; 
}

.main article ol {
	list-style: none; 
	margin: 0;
}

.main article ol li {
	margin: 0;
}


/* ==================================================
= コンテンツ共通
================================================== */
.showroom--article {
	font-family: "Noto Sans JP", sans-serif; 
	font-weight: 400; 
	letter-spacing: 0.04em; 
	position: relative; 
	font-feature-settings: normal;
	-moz-font-feature-settings: normal;
	padding-bottom: 0; 
}


.showroom--article:not(:has(.index-backdrop)) {
	padding-bottom: 120px; 
}

.western-fonts {
	font-family: var(--western-fonts);
}

a.arrow-style {
	border: 1px solid #000;
	display: block; 
	width: fit-content; 
	font-weight: 500; 
	font-size:clamp(12px, calc(100vw * 14 / 1200) , 14px); 
	line-height: 1; 
	display: flex;
	align-items: center; 
	gap: 16px; 
	background: rgba(255,255,255,0.5); 
}

a.arrow-style span {
	display: block; 
}

a.arrow-style i {

}

a.arrow-style > i.arrow {
	display: block; 
	width: 24px; 
	height: 13px; 
	background: rgba(0,0,0,0.5); 
	background: #808080; 

	mask-image: url("../images/arrow.svg");
	mask-repeat: no-repeat;
	mask-position: 0 0;
	mask-size: 24px 13px;
	-webkit-mask-image: url("../images/arrow.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
	-webkit-mask-size: 24px 13px;

	background-size: 200% 100%;
	background-image: linear-gradient(90deg, var(--okm-red), var(--okm-red) 50%, #808080 50%, #808080);
	background-position: 100% 0;
	transition: background-position 0.4s cubic-bezier(0.25, 1, 0.5, 1);

	margin-left: auto;
	flex: 0 0 auto;
}

.floating-cta-button a.arrow-style {
	border: none;
}

.floating-cta-button a > i.arrow {
	width: 36px; 
	height: 20px; 
	mask-image: url("../images/arrow_large.svg");
	-webkit-mask-image: url("../images/arrow_large.svg");
	mask-size: 36px 20px;
	-webkit-mask-size: 36px 20px;
	animation: arrow-animation 4s infinite;
	animation-delay: 3s;
}

a:hover > i.arrow {
	background-position: 0% 0%;
}

@keyframes arrow-animation {
  0% {
    background-position: 100% 0;
  }
  25% {
    background-position: 0% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

a > span:has( + i ) {
	flex-grow: 1; 
}

i.link-arrow {
	width: 7px; 
	height: 12px; 
	display: block; 
	background-color: #000; 

	mask-image: url('../images/link.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 7px 12px;

	-webkit-mask-image: url('../images/link.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 7px 12px;

	transition: background-color .4s ease;
}

a:hover > i.link-arrow {
	background-color: var(--okm-red); 
}


.floating-cta {
	position: fixed; 
	right: 0px; 
	bottom: 66px; 
	background: #fff; 
	width: 100%; 
	z-index: 100; 
}

.floating-cta-button {
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
}


.floating-cta-button > a {
	display: block; 
	width: 100%; 
	padding: 20px; 
	border-top: 1px solid #d9d9d9;

	justify-content: center;
	display: flex;
	align-items: center; 
	gap: 16px; 
}

.floating-cta-button > a span {
	font-weight: 500; 
	display: block; 
	font-size:clamp(14px, calc(100vw * 18 / 1200) , 18px); 
	line-height: 1; 
}


/* local-nav-bar */
.local-nav-bar {
	width: 100%; 
	height: 45px; 
	background: #000; 
	position: sticky; 
	top: 65px; 
	left: 0px; 
	padding: 0 clamp(12px, calc(100vw * 30 / 1200) , 30px); 
	z-index: 10; 
}

.local-nav-inner {
	justify-content: space-between;
	width: 100%;
	height: inherit; 
	display: flex;
	align-items: center; 
	gap: 20px; 
}

.local-nav-links {
	height: inherit; 
}

.local-nav-list {
	display: flex;
	align-items: center; 
	gap: 12px; 
	height: inherit; 
}

.local-nav-item {
	height: inherit; 
	position: relative; 
}

.local-nav-item.selected:after,
.local-nav-item:hover:after {
	content: ""; 
	position: absolute; 
	background: #fff; 
}

.local-nav-item.selected:after {
	width: 1px; 
	height: 13px; 
	left: 50%; 
	bottom: 0; 
	transform: translateX(-50%);
}

.local-nav-item.top {
	display: none; 
}

.local-nav-item a {
	display: block; 
	color: #fff; 
	font-size:clamp(10px, calc(100vw * 13 / 1200) , 13px); 
	font-weight: 600; 
	letter-spacing: 0; 
	height: inherit; 
	display: grid;
	place-items: center;
}

.local-nav-item a span {
	display: block; 
	line-height: 1; 
}

.local-nav-item.home a span {
	display: block; 
	padding-left: 13px; 
	position: relative; 
}

.local-nav-item.home a span:before {
	content: ""; 
	position: absolute; 
	left:0; 
	top: -3px; 
	width: 1px;
	height: 100%; 
	background: #666; 
	height: calc(100% + 6px); 
}

.local-nav-action {

}

.local-nav-button {
	display: flex;
	align-items: center; 
}

.local-nav-button a {
	display: block; 
	background: #fff; 
	color: #fff; 
	font-size:clamp(9px, calc(100vw * 12 / 1200) , 12px); 

	line-height: 1; 
	color: #000; 
	border-radius: 30px;

	padding: 6px 12px; 

	display: flex;
	align-items: center; 
	gap: 5px; 
}

.local-nav-button a span {

}

.local-nav-button a i {
	display: block; 
	width: 5px; 
	height: 10px; 
	position: relative; 
}

.local-nav-button a i:after {
	content: ""; 
	display: block; 
	width: 6px; 
	height: 6px; 
	position: absolute; 
	transform-origin: center; 
	transform: translate(-50%, -50%) rotate(45deg);
	border-top: 1px solid var(--dark-red);
	border-right: 1px solid var(--dark-red);
	top: 50%; 
	height: 50%; 
}

/* showroom-title-section */
.showroom-title-section {
	aspect-ratio: 375 / 380;
}

.showroom-title-inner {
	height: 100%; 
	aspect-ratio: 330 / 380;
	margin-left: auto;
	position: relative; 
}

.showroom-title-block {
	position: absolute; 
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding:clamp(4.5px, calc(100vw * 10 / 1200) , 10px); 
	padding-top: 0; 
	padding-left: 0; 


	bottom:clamp(34px, calc(100vw * 90 / 1024) , 90px); 
	left: -30px;

}

.showroom-title-block:after {
	content: ""; 
	position: absolute; 
	left: 0px; 
	bottom: -1px; 
	height: 1px; 
	width: 50px; 
	background: var(--okm-red); 
}


.showroom-title-shoulder {
	display: block; 
	width: 100%; 
	background: #fff; 
	line-height: 1; 
	padding: clamp(4px, calc(100vw * 8 / 1200) , 8px) 0; 
	font-size:clamp(8px, calc(100vw * 14 / 1200) , 14px); 
	font-weight: 700; 
	margin-bottom: clamp(8px, calc(100vw * 16 / 1200) , 16px);
}

.showroom-title-lines {
	display: block; 
	background: #fff; 
	padding: clamp(4px, calc(100vw * 8 / 1200) , 8px);
	padding-right: clamp(12px, calc(100vw * 24 / 1200) , 24px); 
	padding-left: 0; 
}

.showroom-title-label {
	display: block; 
	line-height: 1; 
	font-size:clamp(28px, calc(100vw * 56 / 1280) , 56px); 
	font-weight: 400; 
}

.showroom-title-image-block {
	height: 100%; 
	aspect-ratio: 330 / 380;
	margin: 0 0 0 auto;
}

.showroom-title-image-inner img,
.showroom-title-image-inner source {
	height: 100%; 
	aspect-ratio: 330 / 380;
	object-fit: cover; 
	border-radius: 0 0 0 12px;
}



/* 背景 */
.index-backdrop {
	background-image: url('../images/backgroung-sp.svg'); 
	background-repeat: repeat; 
	background-size: 100% auto; 
	background-position: 0 20px; 
	background-position: 0 140px; 
	padding-bottom: 120px; 
}


/* 導入文 */
.showroom-lead-section {
	width: min(calc(100% - 30px), 1200px); 
	margin:  clamp(96px, calc(100vw * 200 / 1200) , 200px) auto;
	padding: 0;
	text-align: center; 
}

.showroom-lead-inner {
	margin: auto;
	width: 100%;
	position: relative; 
	padding: 32px 0;
}

.showroom-lead-inner:before,
.showroom-lead-inner:after {
	content: ""; 
	display: block; 
	width: 64px; 
	height: 64px; 
	position: absolute; 
}

.showroom-lead-inner:before {
	top: 0px; 
	left: 0px; 
	border-top: 1px solid var(--okm-red);
	border-left: 1px solid var(--okm-red);
}

.showroom-lead-inner:after {
	right: 0px; 
	bottom: 0px; 
	border-bottom: 1px solid var(--okm-red);
	border-right: 1px solid var(--okm-red);
}

.showroom-lead-block {
	justify-content: space-between;
	width: fit-content;
	display: flex;
	align-items: center; 
	flex-direction: column; 
	gap: 24px; 
	margin: auto;
	font-weight: 500; 
}

.showroom-lead-title {
	font-size:clamp(18px, calc(100vw * 24 / 1200) , 24px); 
	letter-spacing:0.2em; 
}

.showroom-lead-text {
	text-align: center; 
	line-height: 2.5; 
	font-size:clamp(11px, calc(100vw * 14 / 1200) , 14px); 
}

/* 製品に触れて体験したい */
/* リアルなオフィスで働く様子を見学したい */
.showroom-intro-section {
	width: min(calc(100% - 30px), 1064px); 
	margin: auto;
	display: grid; 
	gap:120px; 
	margin-bottom: clamp(120px, calc(100vw * 160 / 1200) , 160px); 
}

.intro-block {
	justify-content: space-between;
	width: 100%;
	display: flex;
	flex-direction: column; 
	
	column-gap: clamp( calc(100% * 80 / 1064), calc(100% * 80 / 1064), 80px ); 
	row-gap: 80px; 
}

.intro-text-block, 
.intro-image {

}

.intro-lead {
	margin-bottom: clamp(32px, calc(100vw * 40 / 1200) , 40px); 
}

.intro-purpose {
	font-size:clamp(13px, calc(100vw * 16 / 1200) , 16px); 
	letter-spacing:0.4em; 
	font-weight: 500; 
	padding-bottom: 32px; 
	position: relative; 

	margin-bottom:clamp(48px, calc(100vw * 64 / 1200) , 64px); 
}

.intro-block--labo .intro-purpose {
	letter-spacing:0.2em; 
}

.intro-purpose:after {
	content: ""; 
	position: absolute; 
	left: 0px; 
	bottom: 0px; 
	height: 1px; 
	width: clamp(32px, calc(100vw * 48 / 1200) , 48px); 
	background: var(--okm-red); 
}

.intro-title-e {
	font-size:clamp(28px, calc(100vw * 32 / 1200) , 32px); 
	display: block; 
	line-height: 1; 
	margin-bottom: 0.4em !important;
}

.intro-title-j {
	font-size:clamp(10px, calc(100vw * 11 / 1200) , 11px); 
	display: block; 
	line-height: 1; 
}

.intro-summary {
	font-weight: 500; 
	line-height: 1.8; 
	margin-bottom: 16px;
	font-size:clamp(13px, calc(100vw * 14 / 1200) , 14px); 
}

.intro-body {
	display: block; 
	font-size:clamp(11px, calc(100vw * 13 / 1200) , 13px); 
	line-height: 2; 
	word-break: break-all; 
}

.intro-note {
	display: block; 
	font-size: clamp(9px, calc(100vw * 10 / 1200) , 10px); 
	line-height: 1.6; 
	margin-top: 16px; 
}

.intro-link {
	margin-top: clamp(48px, calc(100vw * 64 / 1200) , 64px); 
}

.intro-link a.arrow-style {
	padding: 16px 20px 16px 36px; 
}



.intro-image {
	padding-right: clamp(10px, calc(100vw * 16 / 1200) , 16px); 
	padding-bottom: clamp(10px, calc(100vw * 16 / 1200) , 16px); 
}

.intro-image-inner {
	aspect-ratio: 500 / 500;
	width: 100%; 
	position: relative; 
}

.intro-image-inner:after {
	content: ""; 
	display: block; 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	border-right: 1px solid var(--okm-red); 
	border-bottom: 1px solid var(--okm-red); 
	right: clamp(-16px, calc(100vw * -16 / 1200) , -10px); 
	bottom: clamp(-16px, calc(100vw * -16 / 1200) , -10px); 
}

.intro-image-inner img {
	aspect-ratio: 500 / 500;
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	border-radius:  clamp(12px, calc(100vw * 20 / 1200) , 20px); 
}

/* FAQセクション */
.slo-faq-section {

}

.slo-faq-section__wrapper {
	width: min(calc(100% - 30px), 1178px); 
	max-width: 1178px; 
	margin: auto;
	padding: 80px 0 160px; 
}

.slo-faq-section__title {
	font-size:clamp(20px, calc(100vw * 24 / 1200) , 24px); 
	font-weight: 500; 
	margin: 0 auto 80px; 
	letter-spacing: 0.2em; 
	text-align: center; 
}

.slo-faq-section__inner {
	background: rgba(255,255,255,0.5); 
}

.slo-faq-item {
	padding: clamp(20px, calc(100vw * 32 / 1200) , 32px) clamp(24px, calc(100vw * 32 / 1200) , 32px); 
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; 
	flex-direction: column; 
	gap: 0;
	border: 1px solid #000;
	border-bottom: none;
}

.slo-faq-item:last-child {
	border-bottom: 1px solid #000;;
}

.slo-faq-item__question,
.slo-faq-item__answer {
	font-size: 13px; 
	line-height: 2; 
	letter-spacing: 0.02em; 

	justify-content: space-between;
	width: 100%;
	display: flex;
	align-items: center; 
	gap: clamp(16px, calc(100vw * 24 / 1200) , 24px); 
}

.slo-faq-item__question {
	cursor: pointer; 
}

.slo-faq-item .slo-faq-item__answer {
	display: none; 
}

.slo-faq-item__question i {
	display: block; 
	width:  clamp(20px, calc(100vw * 24 / 1200) , 24px); 
	height: clamp(20px, calc(100vw * 24 / 1200) , 24px); 
	position: relative; 
}

.slo-faq-item__question i:before,
.slo-faq-item__question i:after {
	content: ""; 
	width: 100%; 
	height: 1px; 
	position: absolute; 
	background: var(--dark-red); 
	transform-origin: center; 
	left: 0px; 
	top: 50%; 
	transform: translateY(-50%);
	transition: transform .2s ease;
}

.slo-faq-item.close .slo-faq-item__question i:after {
	transform: translateY(-50%) rotate(90deg);
}

.slo-faq-item p {
	display: block; 
}

.slo-faq-item__answer {
	padding: 0 0 0 40px; 
	margin-top: 16px;
	position: relative; 
}

.slo-faq-item__answer:before {
	content: ""; 
	position: absolute; 
	width: 40px; 
	width: 24px; 
	height: 100%; 
	top: 0px; 
	left: 0px;
}

.slo-faq-item__answer:after {
	content: ""; 
	position: absolute; 
	border-left: 1px solid var(--dark-red);
	border-bottom: 1px solid var(--dark-red);
	top: 0px; 
	left: 0px;
	width: 16px; 
	height: 24px; 

}

.slo-faq-item__answer-content {
	display: block; 
	margin-top: 10px; 
}

.slo-faq-item__answer-content strong {
	color: var(--dark-red); 
}

.slo-faq-item__answer-content em {
	font-weight: 700; 
}

.slo-faq-item__answer-content a {
	text-decoration: underline; 
}

.slo-faq-item__answer-heading {
	font-weight: 700; 
}

.slo-faq-item__answer-body {
	margin-bottom: 1em;
}

.slo-faq-item__answer-note {
	padding: 0 0 0 1em; 
	text-indent: -1em; 
}

/* 体験拠点の一覧 */
.labooffice-locations-section {
	width: min(calc(100% - 30px), 1144px); 
	margin: auto;
	text-align: center; 
}

.labooffice-locations-title {
	display: block; 
}

.labooffice-locations-title {
	font-size:clamp(20px, calc(100vw * 24 / 1200) , 24px); 
	font-weight: 500; 
	margin: clamp(55px, calc(100vw * 80 / 1200) , 80px) auto; 
	letter-spacing: 0.2em;
}


/* 体験拠点フィルター */
.locations-filter {
	border: 1px solid #000;
	padding:  clamp(22px, calc(100vw * 40 / 1200) , 40px); 
	margin-bottom:  clamp(55px, calc(100vw * 80 / 1200) , 80px); 
	background: rgba(255,255,255,0.5); 
}


.locations-filter-header {
	justify-content: space-between;
	width: 100%;
	display: flex;
	align-items: center; 
	margin-bottom:  24px; 
	line-height: 1.4; 
}

.locations-filter-title-label {
	display: block; 
	width: 100%;
	display: flex;
	align-items: center; 
	gap: 16px; 
}

.locations-filter-title-label:before {
	content: ""; 
	display: block; 
	width: 48px; 
	height: 1px; 
	background: var(--okm-red); 
}

.locations-filter-title-label span {
	display: block; 
	font-size:16px; 
	font-weight: 500; 
	letter-spacing: 0.08em; 
}

.locations-filter-reset-label {
	display: flex;
	align-items: center; 
	gap: 4px; 
}

.locations-filter-reset-label i {
	display: block; 
	width: 10px; 
	height: 10px; 
	position: relative; 
}

.locations-filter-reset-label i:before,
.locations-filter-reset-label i:after {
	content: ""; 
	display: block; 
	position: absolute; 
	width: 1px; 
	height: 14px; 
	background: #000; 
	transform-origin: center; 
	top: 50%; 
	left: 50%; 
}

.locations-filter-reset-label i:before {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.locations-filter-reset-label i:after {
	transform: translate(-50%, -50%) rotate(45deg);
}

.locations-filter-reset-label span {
	display: block; 
	font-size: 11px; 
	line-height: 1; 
}

.locations-filter-block {
	justify-content: space-between;
	width: 100%;
	display: flex;
	flex-direction: column; 
	gap: 24px; 
}

.locations-filter-group {
	flex: 1 1 auto; 
}

.locations-filter-group-title {
	display: block; 
	text-align: left; 
	margin-bottom: clamp(8px, calc(100vw * 16 / 1200) , 16px);
	font-size: 14px; 
	font-weight: 500; 
	letter-spacing: 0.07em; 
}

.locations-filter-list {
	display: grid; 
	gap: 8px; 
}

.locations-filter-group--area .locations-filter-list {
	grid-template-columns: repeat(2, 1fr); 
}

.locations-filter-group--industry .locations-filter-list {
	grid-template-columns: repeat(3, 1fr); 
}

.locations-filter-group--purpose .locations-filter-list {
	grid-template-columns: repeat(1, 1fr); 
}

.locations-filter-item {
	border: 1px solid #000;
	border-radius: 30px;
	width: auto; 
	cursor: pointer; 
	transition: border .4s ease;
}

.locations-filter-item:hover,
.locations-filter-item.selected {
	border: 1px solid var(--dark-red); 
}

.locations-filter-group--purpose .locations-filter-list .locations-filter-item {
	max-width: 100%; 
}

.locations-filter-item span { 
	display: block; 
	font-size:clamp(11px, calc(100vw * 13 / 1200) , 13px); 
	letter-spacing: 0.02em; 
	line-height: 2; 
	padding: 6px 0; 
	transition: color .4s ease;
	font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
}

.locations-filter-item span.tighter {
	letter-spacing: -0.1em; 
}

.locations-filter-item:hover span,
.locations-filter-item.selected span {
	color: var(--dark-red); 
}

/* 各拠点 */
.location-card-group {
	padding: 0; 
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(317px, 1fr));
	grid-template-rows: subgrid; 
	gap: 0; 
	column-gap:  clamp(20px, calc(100vw * 64 / 1200) , 64px); 
}

.location-card {
	display: grid; 
	grid-template-columns: 130px 1fr;
	margin-bottom: 64px;
	column-gap: 16px; 
}

/* タイプ */
.location-type {
	display: flex;
	align-items: center; 
	gap: 11px; 
	font-size: 12px; 
	grid-column: span 2;
	margin-bottom:clamp(24px, calc(100vw * 40 / 1200) , 40px); 
}

.location-type:before {
	content: ""; 
	display: block; 
	width: clamp(16px, calc(100vw * 24 / 1200) , 24px); 
	height: 1px; 
	background: var(--okm-red); 
}

.location-type span {
	font-family: var(--western-fonts);
	font-size: 12px; 
	font-weight: 400; 
	letter-spacing: 0.1em; 
	line-height: 1; 
}


/* 写真領域 */
.location-photo-group {
	width: 100%; 
	grid-row: span 2;
}

.location-photo-wrapper {
	width: 100%; 
	padding-right:clamp(4px, calc(100vw * 8 / 1200) , 8px); 
	padding-bottom:clamp(4px, calc(100vw * 8 / 1200) , 8px); 

}

.location-photo {
	width: 100%; 
	aspect-ratio: 309 / 309;
	position: relative; 
}

.location-photo:after {
	content: ""; 
	display: block; 
	width: 100%; 
	height: 100%; 
	border-right: 1px solid var(--okm-red);
	border-bottom: 1px solid var(--okm-red);
	position: absolute; 
	right: clamp(-8px, calc(100vw * -8 / 1200) , -4px); 
	bottom: clamp(-8px, calc(100vw * -8 / 1200) , -4px); 

}

.location-photo img {
	aspect-ratio: 309 / 309;
	width: 100%; 
	height: 100%; 
	object-fit: cover; 
	border-radius:  clamp(12px, calc(100vw * 20 / 1200) , 20px); 
}

/* ロケーションテキスト */
.location-text-group {
	display: grid; 
	grid-template-rows: subgrid; 
	/* grid-row: span 5;  */
	grid-row: span 2; 
	gap: 0; 
	align-items: start;
	text-align: left; 
	gap: 32px; 
	gap: 0px; 

	align-items: start;
}

.location-name {
	font-weight: 500; 
	font-size:clamp(14px, calc(100vw * 16 / 1200) , 16px); 
	line-height: 1.4; 
	letter-spacing: 0.08em; 
	margin-bottom:clamp(22px, calc(100vw * 32 / 1200) , 32px); 
	word-break: keep-all; 

/* 
	font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
 */
}

.location-name span {
	font-size: 12px; 
}

.location-info-list {
	display: grid; 
/* 
	grid-template-rows: subgrid; 
	grid-row: span 3; 
 */
	gap: 12px; 
	align-items: start;
}

.location-info-list li {
	font-size: 10px; 
	font-size:clamp(10px, calc(100vw * 11 / 1200) , 11px); 
	line-height: 1.6; 
}

.location-info-list li.location-note {
	font-size: 9px; 
}

.location-info-list li p,
.location-info-list li.location-address a {
	display: block; 
	padding-left: 23px; 
	position: relative; 
}

.location-info-list li .icon {
	display: block; 
	width: 18px; 
	height: 18px; 
	position: absolute; 
	left: 0px; 
	top: 1px; 

	background-image: url('../images/icon.svg'); 
	background-repeat: no-repeat; 
	background-size: 72px 18px;
}

.location-address .icon {
	background-position: 0 0; 
}

.location-map-link {
	display: block; 
	margin-top: 8px;
}

.location-map-link .icon {
	background-position: -18px 0; 
}

.location-hours .icon {
	background-position: -36px 0; 
}

.location-tel .icon {
	background-position: -54px 0; 
}

.location-reservation {
	grid-column: span 2;
	margin-top: 24px;
	align-self: end; 
}

.location-reservation-note {
	display: block; 
	font-size: 12px; 
	transform: translateY(-0.5em);
	font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
}

.location-reservation-group {
	width: 100%;
	display: flex;
	align-items: stretch; 
	flex-direction: row; 
	gap: 16px; 
}

.location-reservation-group .location-reservation-corporate,
.location-reservation-group .location-reservation-personal {
	flex: 1; 
}

.location-reservation-group a.arrow-style {
	width: 100%;
	gap: 0; 
	padding: 17px 13px 17px 20px; 
	justify-content: center;
}

.location-reservation-group a.arrow-style span {
	display: block; 
	font-size:clamp(11px, calc(100vw * 12 / 1200) , 12px); 
}

.location-reservation-group a.arrow-style span > i {
	display: inline-block; 
}

/* サブページ */
.page-background {
	background-image: url('../images/backgroung-sp.svg'); 
	background-repeat: repeat-y; 
	background-position: center 697px;
}

/* ヘッダー */
.page-header {
	width: 100%; 
	padding: 64px 0; 
}

.page-header__inner {
	width: min(calc(100% - 30px), 1160px); 
	margin: auto;
	display: flex;
	justify-content: flex-start;
	gap: 64px; 
	flex-wrap: wrap;
	flex-direction: column; 
}

.page-header__title {

}

.page-header__title h1 {
	font-size:clamp(14px, calc(100vw * 14 / 1200) , 14px); 
	font-weight: 700; 
	margin-bottom: 18px;
}

.page-header__title em {
	font-size:clamp(40px, calc(100vw * 40 / 1200) , 40px); 
	font-weight: 400; 
	display: inline-block; 
	padding-bottom: 18px; 
	border-bottom: 1px solid var(--dark-red);
}

.page-header__title em span {
	display: block; 
}

.page-header__lead {

}

.page-header__lead h2 {
	font-weight: 500; 
	font-size: 16px; 
	letter-spacing: 0.2em; 
	margin-bottom: 1em;
}

.page-header__lead-text {
	font-size: 13px; 
	line-height: 2.5; 
}

/* メインカルーセル */
.main-carousel-section {
	width: calc(100% - 30px); 
	margin: auto;
}

.main-carousel {
	aspect-ratio: 1352 / 761;
}

.main-carousel__item img {
	aspect-ratio: 1352 / 761;
	object-fit: cover; 
	border-radius: 20px;
}

.main-carousel__item-name {
	display: block; 
	text-align: right; 
	margin-top: clamp(8px, calc(100vw * 12 / 1200) , 12px); 
	font-size: 11px; 
	line-height: 1; 
}

.main-carousel__nav {
	display: block; 
	max-width: calc(1040px + 60px); 
	
	padding: 0 11px; 
	margin:  clamp(8px, calc(100vw * 32 / 1200) , 32px) auto 0; 
}

.main-carousel__nav-item {
	margin: 0  clamp(4px, calc(100vw * 8 / 1200) , 8px);
	aspect-ratio: 160 / 100;
	aspect-ratio: 100 / 65;
	position: relative; 
	cursor: pointer; 
}

.main-carousel__nav-item:after {
	content: ""; 
	display: block; 
	width: 100%; 
	height: 1px; 
	position: absolute; 
	bottom: 0; 
	left: 0; 
	background-color: transparent; 
	transition: background-color .5s ease;
}

.main-carousel__nav-item.slick-current:after {
	background-color: var(--dark-red); 
}

.main-carousel__nav-item img {
	aspect-ratio: 160 / 90;
	object-fit: cover; 
	border-radius: 10px;
}


.slick-arrow {
	aspect-ratio: 11 / 56;
	
	width: clamp(11px, calc(100vw * 30 / 1200) , 30px); 
	height: calc(100% - 10px); 
	position: absolute; 
}

.slick-prev {
	left: 0; 
	top: 0; 
}

.slick-next {
	right: 0; 
	top: 0; 
}

.slick-prev:before,
.slick-next:before {
	content: ""; 
	font-size: 0; 
	display: block; 
	width: 8px; 
	height: 8px; 
	border: 1px solid var(--dark-red);
	transform: rotate(45deg);
	position: absolute; 
	top: 50%; 
	transform-origin: center; 
}

.slick-prev:before {
	
	left: 3px; 
	top: 50%; 
	border-right: none; 
	border-top: none; 
	transform: translate(-20%, -50%) rotate(45deg);
}

.slick-prev:hover:before {
	animation: slickPrevArrowSlide 0.4s ease-out forwards;
}

/* アニメーション定義 */
@keyframes slickPrevArrowSlide {
	0% {
		transform: translate(-20%, -50%) rotate(45deg);
		opacity: 1;
	}
	45% {
		transform: translate(-100%, -50%) rotate(45deg); /* 左へ抜ける */
		opacity: 0;
	}
	50% {
		transform: translate(100%, -50%) rotate(45deg); /* 右側の外へ瞬間移動（見えない状態） */
		opacity: 0;
	}
	100% {
		transform: translate(-20%, -50%) rotate(45deg); /* 元の位置に戻って停止 */
		opacity: 1;
	}
}

.slick-next:before {
	
	right: 3px; 
	top: 50%; 
	border-left: none; 
	border-bottom: none; 
	transform: translate(20%, -50%) rotate(45deg);
}

.slick-next:hover:before {
    animation: slickNextArrowSlide 0.4s ease-out forwards;
}

@keyframes slickNextArrowSlide {
    0% {
	  transform: translate(20%, -50%) rotate(45deg);
	  opacity: 1;
    }
    45% {
	  transform: translate(100%, -50%) rotate(45deg); /* 右へ抜ける */
	  opacity: 0;
    }
    50% {
	  transform: translate(-100%, -50%) rotate(45deg); /* 左側の外へ瞬間移動（見えない状態） */
	  opacity: 0;
    }
    100% {
	  transform: translate(20%, -50%) rotate(45deg); /* 元の位置に戻って停止 */
	  opacity: 1;
    }
}

/* イントロダクション */
.page-intro {
	padding: clamp(96px, calc(100vw * 120 / 1200) , 120px) 0; 

}

.page-intro__inner {
	width: min(calc(100% - 30px), 1000px); 
	margin: auto;
	text-align: center; 
	padding: 44px 16px 35px; 
	position: relative; 
}

.page-intro__inner:before,
.page-intro__inner:after {
	content: ""; 
	display: block; 
	position: absolute; 
	width: 64px; 
	height: 64px; 
}

.page-intro__inner:before {
	top: 0px; 
	left: 0px; 
	border-top: 1px solid var(--dark-red);
	border-left: 1px solid var(--dark-red);
}

.page-intro__inner:after {
	right: 0px; 
	bottom: 0px; 
	border-bottom: 1px solid var(--dark-red);
	border-right: 1px solid var(--dark-red);
}

.page-intro__headline {
	font-size:clamp(18px, calc(100vw * 24 / 1200) , 24px); 
	letter-spacing: 0.1em; 
	font-weight: 500; 
	margin-bottom:clamp(24px, calc(100vw * 80 / 1200) , 80px); 
	word-break: keep-all; 
}

.page-intro__lead p {
	font-size:clamp(11px, calc(100vw * 14 / 1200) , 14px); 
	display: block; 
	text-align: center; 
	font-weight: 500; 
	line-height: 2.5; 
}

.page-intro__lead p span {
	display: block; 
	word-break: keep-all; 
}

/* facility-block */
.facility-block-wrapper {

}


.facility-block {
	width: min(calc(100% - 30px), 1080px); 
	margin: auto;
	display: flex;
	flex-direction: column; 
	gap: 96px; 
}

.facility-block {

}

.facility {
	display: grid; 
	gap: 0; 
	grid-template-areas:
	"facility__location"
	"facility__name"
	"facility__photo"
	"facility__tagline"
	"facility__lead"
	"facility__point-heading"
	"facility__point-list"
	"facility__cta"
	"facility__categories"
	"facility__details";

	align-items: start; 
}

.facility__text,
.facility__photo,
.details {
	min-width: 0;
}

.facility__text {
	display: contents; 
}


.facility__location {
	display: flex;
	align-items: center; 
	gap: 16px; 
	margin-bottom:clamp(24px, calc(100vw * 40 / 1200) , 40px); 
	grid-area: facility__location
}

.facility__location-label {
	font-size:clamp(12px, calc(100vw * 12 / 1200) , 12px); 
	letter-spacing: 0; 
}

.facility__location-map-link {
	font-size:clamp(9px, calc(100vw * 9 / 1200) , 9px); 
	background: #e9e7e6; 
	line-height: 1.8; 
	padding: 4px 8px; 
}

.facility__location-map-link i {
	display: inline-block; 
	width: 15px; 
	height: 15px; 
	margin-right: 4px;
	background-image: url('../images/map_pin.svg'); 
	background-repeat: no-repeat; 
	background-size: 15px 15px;
	transform: translateY(-1px);
}

.facility__name {
	line-height: 1.4; 
	font-weight: 500; 
	letter-spacing: 0.1em; 
	margin-bottom:clamp(24px, calc(100vw * 40 / 1200) , 40px); 
	grid-area: facility__name; 
}

.facility__name h3 {
	font-size: 24px; 
	letter-spacing: 0.1em; 
	word-break: keep-all; 
	display: inline; 
}

.facility__name em {
	font-weight: inherit; 
	font-size: 12px; 
	display: inline-block; 
	transform: translateY(-0.3em);
}

.facility__tagline {
	font-weight: 500; 
	line-height: 1.8; 
	font-size: 14px; 
	letter-spacing: 0.07em; 
	margin-top: 42px; 
	margin-bottom: 16px; 
	grid-area: facility__tagline;
}

.facility__lead {
	line-height: 2; 
	font-size: 13px; 
	letter-spacing: 0.02em; 
	grid-area: facility__lead;
	margin-top: 44px;
}


.facility__lead:has( + .facility__point-heading) {
	margin-bottom: clamp(24px, calc(100vw * 40 / 1200) , 40px); 
}

.facility__lead:has( + .facility__cta) {
	margin-bottom: clamp(32px, calc(100vw * 56 / 1200) , 56px); 
}

.facility__point-heading {
	font-weight: 500; 
	font-size: 14px; 
	line-height: 1.8; 
	color: var(--dark-red); 
	letter-spacing: 0.07em; 
	margin-bottom: 16px;
	grid-area: facility__point-heading;
}

.facility__point-list {
	font-size: 13px; 
	line-height: 1.6; 
	list-style-type: disc; 
	padding-left: 2em; 
	margin-bottom:  clamp(24px, calc(100vw * 56 / 1200) , 56px); ;
	grid-area: facility__point-list; 
}

.facility__point-list li {
	margin-bottom: 0.5em;
}

.facility__point-list li:last-child {
	margin-bottom: 0;
}

.facility__cta {
	display: flex;
	width: 100%; 
	align-items: flex-start; 
	gap: 24px; 
	flex-direction: column; 
	grid-area:facility__cta;
}

.facility__cta-group {
	display: flex;
	width: 100%; 
	gap: 16px; 
}

.facility__cta-primary {
	flex: 1 1 auto; 
}

.facility__cta-primary a.arrow-style {
	justify-content: space-between;
	width: 100%;
	gap: 0; 
	padding: 20px 16px 20px 20px; 
	font-size: 12px; 
}

.facility__cta:has(.personal) .facility__cta-primary a.arrow-style {
	gap: 0; 
}

.facility__cta-primary a.arrow-style span {
	flex: 1 1 auto; 
	width: 100%; 
	text-align: center; 
}

.facility__cta-primary a.arrow-style .arrow {
	flex: 0 0 24px; 
}

.facility__cta-secondary {
	flex-shrink: 0; 
	display: flex;
	align-items: center; 
	gap: 7px; 
}

.facility__cta-secondary span {
	display: block; 
	font-size: 12px; 
}

.facility__cta-secondary > i {

}

.facility__note {
	font-size: 12px; 
}

.facility__categories {
	grid-area: facility__categories;
	margin-top: 42px;
}

.facility__categories-title {
	font-weight: 500;
	font-size: 12px;
	line-height: 1; 
	margin-bottom: 11px;
}

.facility__categories-list {
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	gap: 2px 10px; 
}

.facility__categories-item {
	display: flex;
	align-items: center; 
	gap: 8px; 
	padding: 8px 0; 
	font-size:clamp(11px, calc(100vw * 12 / 1200) , 12px); 
	line-height: 1; 
}

.facility__categories-item.item--mhs {
	grid-column: span 2;
}

.facility__categories-item i {
	width: 24px; 
	height: 24px; 
	background-image: url('../images/details__extra-item_icon.svg'); 
	background-repeat: no-repeat; 
	background-size: 240px 96px;
	flex-shrink: 0; 
	flex-grow: 0;
}

.facility__categories-item.item--office i {background-position: 0 -48px;}
.facility__categories-item.item--public i {background-position: -24px -48px;}
.facility__categories-item.item--healthcare i {background-position: -48px -48px;}
.facility__categories-item.item--laboratory i {background-position: -72px -48px;}
.facility__categories-item.item--building-materials i {background-position: -96px -48px;}
.facility__categories-item.item--security i {background-position: -120px -48px;}
.facility__categories-item.item--finance i {background-position: -144px -48px;}
.facility__categories-item.item--municipality i {background-position: -168px -48px;}
.facility__categories-item.item--home i {background-position: -192px -48px;}
.facility__categories-item.item--mhs i {background-position: -216px -48px;}

.facility__categories-item.item--work_chair i {background-position: 0 -72px;}
.facility__categories-item.item--work_desk i {background-position: -24px -72px;}
.facility__categories-item.item--work_shelf i {background-position: -48px -72px;}

.facility__photo {
	grid-area: facility__photo;
}

.facility__photo,
.facility__photo-wrapper,
.facility__carousel-wrapper {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.facility__photo-wrapper {
	aspect-ratio: 500 / 500;
	width: 100%; 
	position: relative; 
	padding: 0 8px 8px 0; 
}

.facility__carousel-wrapper {
	aspect-ratio: 500 / 500;
	width: 100%; 
	position: relative; 
}

.facility__carousel-wrapper:after {
	content: ""; 
	aspect-ratio: 500 / 500;
	width: 100%; 
	border-right: 1px solid var(--dark-red);
	border-bottom: 1px solid var(--dark-red);
	position: absolute; 
	right: -8px; 
	bottom: -8px; 
}

.facility__carousel {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 500 / 500;
}

.facility__carousel-item {
	border-radius: 20px;
	overflow: hidden; 
}

.facility__carousel-wrapper .slick-dots {
	bottom: -27px; 
	right: -8px; 
	text-align: right; 
	height: 11px; 
	line-height: 0; 
}

.facility__carousel-wrapper .slick-dots li {
	width: 11px; 
	height:11px; 
	margin: 0 0 0 7.5px;
}

.facility__carousel-wrapper .slick-dots li button {
	width: 11px; 
	height:11px; 
	border-radius: 50%;
	transition: all .2s ease;
}

.facility__carousel-wrapper .slick-dots li button {
	background: #fff; 
	border: 1px solid #b4afab;
}

.facility__carousel-wrapper .slick-dots li button:hover {
	background: #eee;
}

.facility__carousel-wrapper .slick-dots li.slick-active button {
	border: 1px solid var(--dark-red); 
	background: var(--dark-red); 
}

.facility__details {
	width: 100%; 
	display: flex;
	gap: 0; 
	grid-area:facility__details;
	margin-top: 0;
	flex-direction: column; 
	margin-top: 64px;
}

.details__metrics {
	margin-bottom: 40px;
}

.details__metric-list {
	justify-content: space-between;
	width: 100%;
	display: flex;
	gap: 38px; 
}

.details__metric {
	font-size: 12px; 
	font-weight: 500; 
	line-height: 1.2; 
	flex: 1; 
	text-align: center; 
}

.details__label,
.details__icon,
.details__value {
	display: block; 
	text-align: center; 
	white-space: nowrap; 
	margin: 0 auto;
}

.details__label {
	display: block; 
	font-weight: 500; 
	margin-bottom: 20px;
}

.details__icon {
	aspect-ratio: 65 / 58;
	height: 55px; 
	background-size: contain; 
	margin-bottom: 5px;
}

.details__metric.area .details__icon {
	background-image: url('../images/details__icon__area.svg'); 
}

.details__metric.headcount .details__icon {
	background-image: url('../images/details__icon__headcount.svg'); 
}

.details__metric.workpoints .details__icon {
	background-image: url('../images/details__icon__workpoints.svg'); 
}

.details__value {
	font-size: 24px; 
	letter-spacing: 0.1em; 
	vertical-align: baseline; 
}

.details__unit {
	font-size: 12px; 
	display: inline-block; 
	transform: translateY(-0.15em);
}

.details__extra {
	flex-grow: 0; 
	flex-shrink: 1; 
}

.details__extra.details__extra--primary {
	margin-bottom: 32px; 
}

.details__extra-title {
	font-size: 12px; 
	font-weight: 500; 
	line-height: 1.2; 
	display: block; 
	margin-bottom: 8px;
}

.details__extra-list {
	display: grid; 
	font-size: 12px; 
	font-size: 11px; 
	gap: 2px 16px; 
}

.details__extra-list.details__extra-list--roles {
	grid-template-columns: repeat(3, 1fr); 
}

.details__extra-list.details__extra-list--workstyle {
	grid-template-columns: repeat(2, 1fr); 
}

.details__extra-item {
	line-height: 1.2; 
	padding: 8px 0; 
	display: flex;
	align-items: center; 
	gap: 8px; 
}

.details__extra-item span {
	word-break: keep-all; 
}

.details__extra-item i {
	width: 24px; 
	height: 24px; 
	background-image: url('../images/details__extra-item_icon.svg'); 
	background-repeat: no-repeat; 
	background-size: 240px 96px;
	flex-shrink: 0; 
	flex-grow: 0;
}

.item--sales i { background-position: 0 0; }
.item--design-tech i { background-position: -24px 0; }
.item--creative i { background-position: -48px 0; }
.item--executive i { background-position: -72px 0; }
.item--planning-dev i { background-position: -96px 0; }
.item--corporate i { background-position: -120px 0; }
.item--staff i { background-position: -144px 0; }
.item--other i { background-position: -168px 0; }

.item--fixed-seat i {background-position: 0 -24px;}
.item--free-address i {background-position: -24px -24px;}
.item--group-address i {background-position: -48px -24px;}
.item--abw i {background-position: -72px -24px;}
.item--satellite i {background-position: -96px -24px;}
.item--executive-room i {background-position: -120px -24px;}
.item--co-creation i {background-position: -144px -24px;}
.item--department-owned i {background-position: -168px -24px;}
.item--seat-reservation i {background-position: -192px -24px;}


/* 個人のお客様へ */

.personal-intro {
	padding:  clamp(96px, calc(100vw * 160 / 1200) , 160px) 0 clamp(64px, calc(100vw * 120 / 1200) , 120px);
}

.personal-intro__points {
	width: min(calc(100% - 30px), 1080px); 
	margin: auto;
	display: flex;
	flex-direction: column; 
	gap: 20px; 
}

.personal-intro__point {
	display: grid; 
	grid-template-columns: 115px 1fr;
	gap: 12px 24px; 
	align-items: stretch; 
	grid-template-areas:
	"personal-intro__icon personal-intro__header"
	"personal-intro__icon personal-intro__text";
	position: relative; 
}

.personal-intro__icon {
	aspect-ratio: 115 / 130;
	width: 115px; 
	position: relative; 
	grid-area: personal-intro__icon;
}

.personal-intro__icon:after {
	content: ""; 
	position: absolute; 
	top: 0px; 
	right: 0px; 
	width: 1px; 
	height: 100%; 
	background: var(--dark-red); 
}

.personal-intro__icon img {
	aspect-ratio: 1;
	width: 50px !important; 
	height: 50px !important; 
	position: absolute; 
	margin: auto;
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);
}

.personal-intro__header {
	grid-area: personal-intro__header;
	align-self: end; 
}

.personal-intro__header em {
	font-weight: 500; 
	font-size:clamp(14px, calc(100vw * 16 / 1200) , 16px); 
	line-height: 1.8; 
	letter-spacing: 0.08em; 
	word-break: keep-all; 
}

.personal-intro__header em span {
	display: block; 
}

.personal-intro__text {
	font-size:clamp(11px, calc(100vw * 13 / 1200) , 13px); 
	line-height: 2;
	letter-spacing: 0.02em;
	grid-area: personal-intro__text; 
	align-self: start; 
}

.personal-intro__text p {
	display: block; 
	text-align: left; 
}

.personal-intro__text p span {
	display: block; 
}

/* セクション センター ヘッダー */

.section__header {
	width: min(calc(100% - 30px), 1080px); 
	margin: auto;
	margin-bottom: clamp(56px, calc(100vw * 64 / 1200) , 64px); 
	text-align: center; 
}

.section__title {
	margin-bottom:  clamp(24px, calc(100vw * 40 / 1200) , 40px);
	font-weight: 500;
	font-size:clamp(20px, calc(100vw * 24 / 1200) , 24px); 
	line-height: 1;
	letter-spacing: 0.2em;
}

.section__lead p {
	text-align: center; 
	font-size: 13px;
	line-height: 2;
	letter-spacing: 0.02em;
	display: block; 
}

/* 体験の流れ */
.experience-flow {
	padding:  clamp(56px, calc(100vw * 80 / 1200) , 80px) 0 clamp(120px, calc(100vw * 240 / 1200) , 240px);
	text-align: center; 
}

.experience-flow__steps {
	width: min(calc(100% - 30px), 1080px); 
	border-left: 1px solid #000;
	border-top: 1px solid #000;
	margin: auto !important;

	justify-content: space-between;
	display: flex;
	flex-direction: column; 
	gap: 0; 
}

.experience-flow__step {
	flex: 1; 
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 24px; 
	text-align: left; 
	background: rgba(255,255,255,0.5); 
}

.experience-flow__step-header {
	display: flex;
	align-items: center; 
	flex-direction: row; 
	gap: 16px; 
	vertical-align: middle; 
	margin-bottom:  clamp(8px, calc(100vw * 24 / 1200) , 24px); 
}

.experience-flow__step-number {
	display: block; 
	font-family: var(--western-fonts);
	font-style: Italic;
	font-weight: 275;
	font-size: 40px;
	height: 40px; 
	overflow: hidden; 
	line-height: 1;
	letter-spacing: 0.08em;
	color: var(--dark-red); 
}


.experience-flow__step-title {
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.08em;
}

.experience-flow__step-text {

}

.experience-flow__step-text p {
	display: block; 
	line-height: 2; 
}

/* その他の取扱い販売店 */
.retail-section {
	width: min(calc(100% - 30px), 1200px); 
	margin: 160px auto 80px;
	text-align: center; 
}

.retail-section .section__header {
	margin-bottom: clamp(40px, calc(100vw * 56 / 1200) , 56px); 
}

.retail-section__link {
}

.retail-section__link-btn.arrow-style {
	margin: auto;
	gap: 32px; 
	padding: 20px 16px 20px 48px; 
}

.retail-section__link-btn span {
	font-size: 12px; 
}

.retail-section__link-btn i {

}

/* ==================================================
= Media Queries
================================================== */

/* 480px未満 */
@media only screen and (max-width: 479px) {


}

/* 480px以上 */
/* スマホ */
@media only screen and (min-width: 480px) {

	.personal-intro__text p span {
		display: inline-block; 
	}

	.personal-intro__header em span {
		display: inline-block; 
	}

	.locations-filter-item span { 
		font-feature-settings: normal;
		-moz-font-feature-settings: normal;
	}

	.locations-filter-item span.tighter {
		letter-spacing: 0.02em; 
	}

}

/* 568px以上 */
/* タブレット */
@media only screen and (min-width: 568px) {

	.location-reservation-group a span > i {
		display: none; 
	}



}

/* 667px以上 */
/* タブレット */
@media only screen and (min-width: 667px) {


}

/* 768px以上 */
/* タブレット */
@media only screen and (min-width: 768px) {

	/* 製品に触れて体験したい */
	/* リアルなオフィスで働く様子を見学したい */
	.intro-block {
		flex-direction: row; 
	}

	/* facility-block */
	.facility-block {
		width: min(calc(100% - 30px), 1080px); 
		margin: auto;
		gap: 160px; 
	}

	.facility {

		--gap-val: clamp(15px, calc(100vw * 80 / 1200) , 80px); 
		--thumbnail-size:  clamp(calc(30%), calc(100vw * 515 / 1200) , 515px); 

		gap: var(--gap-val); 
		grid-template-columns: minmax(0, 1fr) var(--thumbnail-size);
		grid-template-areas: none; 
	}

	.facility__text {
		display: block; 
		grid-column: 1 / 2; 
		grid-row: 1 / 2; 
	}

	.facility__lead {
		margin-top: 0;
	}

	.facility__cta {
		flex-wrap: nowrap; 
		align-items: center; 
		gap: 32px; 
		flex-direction: row; 
	}

	.facility__cta-secondary span {

	}

	.facility__categories {
		margin-top: 56px;
	}

	.facility__photo {
		grid-column: 2 / 3; 
		grid-row: 1 / 2; 
	}

	.facility__photo-wrapper {
		padding: 0 15px 15px 0; 
	}

	.facility__carousel-wrapper:after {
		right: -15px; 
		bottom: -15px; 
	}

	.facility__carousel-item {
		border-radius: 16px;
	}

	.facility__carousel-wrapper .slick-dots {
		bottom: -42px; 
		right: -15px; 
	}

	.facility__details {
		grid-column: 1 / 3; 
		grid-row: 2 / 3; 
		width: fit-content; 
		flex-direction: row; 
		margin-top: 0;
	}


	.details__metrics {
		margin-right: 38px;
	}

	.details__metric-list {

	}


	.details__metric.area {
		min-width: 86px; 
	}

	.details__metric.headcount {
		min-width: 109px; 
	}

	.details__metric.workpoints {
		min-width: 135px; 
	}

	.details__extra-title {
		margin-bottom: 20px;
	}

	.details__extra-list {
		font-size: 12px; 
	}

	.details__extra-list.details__extra-list--roles,
	.details__extra-list.details__extra-list--workstyle {
		grid-template-columns: repeat(2, 1fr); 
	}


	.details__extra.details__extra--primary {
		margin-right: 50px; 
	}

	.details__extra.details__extra--secondary {

	}

	.details__extra-list.details__extra-list--roles .details__extra-item {
		min-width: 120px; 
	}

	.details__extra-list.details__extra-list--workstyle .details__extra-item {
		min-width: 132px; 
	}


}

/* 1024px以上 */
/* PC */
@media only screen and (min-width: 1024px) {

	.showroom--article {
		/* padding-bottom: 120px;  */
		/* margin-bottom: 40px;  */
	}

	.floating-cta {
		right: 15px; 
		bottom: 15px; 
		background: #fff; 
		width: fit-content; 
		border: none; 
		transform: translateX(110%);
		transition: transform .5s ease;
	}

	.floating-cta.fixed {
		position: fixed; 
	}

	.floating-cta.absolute {
		position: absolute;  
		bottom: 55px; 
		right: 15px; 
	}

	.floating-cta.in {
		transform: translateX(0);
	}


	.floating-cta-button > a {
		padding: 28px 28px 28px 42px; 
	}

	/* local-nav-bar */
	.local-nav-bar {
		height: 60px; 
		top: 101px; 
		transition: top .5s ease;
	}

	.local-nav-list {
		gap: 24px; 
	}

	.local-nav-item.home a span {
		padding-left: 25px; 
	}

	.local-nav-item.top {
		display: block; 
	}


	.local-nav-button a {
		padding: 8px 16px; 
	}


	.showroom-title-section {
		aspect-ratio: 1400 / 550;
	}

	.showroom-title-inner {
		aspect-ratio: 1070 / 550;
	}

	.showroom-title-image-block {
		aspect-ratio: 1070 / 550;
	}

	.showroom-title-image-inner img {
		height: 100%; 
		aspect-ratio: 1070 / 550;
		object-fit: cover; 
		border-radius: 0 0 0 20px;
	}

	.showroom-title-block {
		left: clamp( -210px, calc(100vw * -210 / 1024), -30px);
	}


	.showroom-title-block:after  {
		width: clamp( 210px, calc(100vw * 210 / 1024), 108px);
	}


	/* 背景 */
	.index-backdrop {
		background-image: url('../images/backgroung-pc.svg'); 
		background-position: 0 20px; 
	}

	.page-background {
		background-image: url('../images/backgroung-pc.svg'); 
		background-position: center 151px;
	}

	/* 導入文 */
	.showroom-lead-section {

	}


	.showroom-lead-block {
		flex-direction: row; 
		gap: 80px; 
	}


	.showroom-lead-inner {
		width: fit-content; 
		padding: 16px 80px;
	}




	.showroom-lead-text {
		text-align: left; 
	}


	.showroom-intro-section {
		gap:200px; 
	}

	.intro-block {
		flex-direction: row; 
	}

	.intro-block.intro-block--labo {
		flex-direction: row-reverse; 
	}


	.intro-text-block  {
		width: clamp( calc(100% * 484 / 1064), calc(100% * 484 / 1064), 484px );
	}

	.intro-image {
		width: clamp( calc(100% * 516 / 1064), calc(100% * 516 / 1064), 516px );
	}

	/* 体験拠点の一覧 */

	.locations-filter-block {
		flex-direction: row; 
		gap: 40px; 
	}

	.locations-filter-group--industry .locations-filter-list {
		grid-template-columns: repeat(3, 1fr); 
	}




	/* 各拠点 */
	.location-card-group {
		padding: 0 32px; 
		gap: 0 64px; 
	}


	.location-card {
		display: grid;
		grid-template-columns: 1fr; 
		grid-template-rows: subgrid; 
		grid-row: span 5; 
		gap: 0; 
		align-items: start;
		gap:clamp(24px, calc(100vw * 40 / 1200) , 40px); 
		gap: 0; 
		margin-bottom: 120px;
	}

	/* タイプ */
	.location-type {
		grid-column: span 1;
	}

	.location-info-list {
		margin-bottom: 0; 
	}

	.location-info-list li {
		line-height: 1.8; 
	}

	.location-reservation {
		grid-column: span 1;
		margin-top: 40px;
	}

	/* 写真領域 */
	.location-photo-group {
		grid-row: span 1;
		margin-bottom: 40px;
	}

/* サブページ */

/* ヘッダー */
.page-header {
	padding: 96px 0; 
}


.page-header__inner {
	flex-direction: row; 
	align-items: center; 
	gap: 160px; 
}


.page-intro__headline {
	letter-spacing: 0.2em; 
}


/* メインカルーセル */

.main-carousel-section {
	width: calc(100% - 48px); 
}

.main-carousel__nav-item:after {
	width: calc(100% - 16px);
	left: 8px; 
}

.main-carousel__nav {
	padding: 0 30px; 
}

.main-carousel__nav-item {
	aspect-ratio: 160 / 100;
}

.slick-arrow {
	aspect-ratio: 30 / 90;
}

.slick-prev:before,
.slick-next:before {
	width: 16px; 
	height: 16px; 
}

.slick-prev:before {
	left: 50%; 
}

.slick-next:before {
	right: 50%; 
}

/* イントロダクション */
	.page-intro {

	}

	.page-intro__inner {
		padding: 34px 0 32px; 
	}

	.page-intro__inner:before,
	.page-intro__inner:after {
		width: 68px; 
		height: 64px; 
	}

	/* バックドロップ */
	.page-background {

	}


	/* facility-block */

	.facility {
		gap: 80px; 
	}


	/* FAQセクション */
	.slo-faq-section {

	}

	.slo-faq-item__answer {
		margin-top: 24px;
	}

	.slo-faq-item__answer-content {
		margin-top: 20px; 
	}

	.slo-faq-item__answer:after {
		width: 24px; 
		height: 34px; 

	}


	/* 個人のお客様へ */
	.personal-intro__points {
		flex-direction: row; 
		gap: 64px; 

	}

	.personal-intro__point {
		flex: 1; 
		text-align: center; 
		grid-template-columns: 1fr;
		grid-template-areas:
		"personal-intro__icon"
		"personal-intro__header"
		"personal-intro__text";

	}

	.personal-intro__icon {
		aspect-ratio: 317 / 120;
		margin-bottom: 80px;
		width: 317px; 
	}

	.personal-intro__icon img {
		width: 100px !important; 
		height: 100px !important; 
		margin: auto;
	}

	.personal-intro__icon:after {
		top: auto; 
		right: auto; 
		bottom: 0;
		left: 50%; 
		transform: translate(-50%, 40px);

		width: 48px; 
		height: 1px; 
		background: var(--dark-red); 
	}

	.personal-intro__header em span {
			display: inline-block; 
	}

	.personal-intro__text p {
		text-align: center; 
	}

	.personal-intro__text p span {
		display: block; 
	}

	.experience-flow__steps {
		flex-direction: row; 
	}


	.experience-flow__step {
		padding: 32px 40px; 
	}


}

/* 1280px以上 */
/* PC */
@media only screen and (min-width: 1280px) {

	.facility__categories-list {
		grid-template-columns: repeat(4, 1fr); 
		gap: 2px 14px; 
	}





}