@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

:root {
	--swl-font_family: "Zen Old Mincho", serif; /* サイトのベースフォント */
	--kaku-gothic: "Zen Kaku Gothic New", sans-serif;
	--alex-brush: "Alex Brush", cursive; /* 英数字用フォント */
}

.kaku-gothic {
	font-family: var(--kaku-gothic);
}

.kurenaido {
	font-family: "Zen Kurenaido", sans-serif;
}

.alex {
	font-family: var(--alex-brush);
}

/* ------------------------------------------------------------
 * コンテンツ幅を画面端まで広げる計算
 * --viewport-width: スクロールバーを除いた画面幅
 * --container-width: コンテンツ幅 + 左右padding
 * --container-offset: コンテンツ外側のmargin（片側）
 * --edge-offset: コンテンツ端から画面端までの距離
------------------------------------------------------------ */
.edge-to-viewport {
	--layout-width: var(--article_size, 0px);
	--viewport-width: calc(100vw - var(--swl-scrollbar_width, 0px));
	--container-width: calc(var(--layout-width) + var(--swl-pad_container, 0px) * 2);
	--container-offset: calc((var(--viewport-width) - var(--container-width)) / 2);
	--edge-offset: calc(var(--container-offset) + var(--swl-pad_container, 0px));
}

.edge-to-viewport--container {
	--layout-width: var(--container_size, 0px);
}

/* ------------------------------ コンポーネント ------------------------------ */
/* ------------------------------ 見出し ------------------------------ */
.wp-block-heading.heading-divider {
	font-size: 1em;
}

.heading-divider__main {
	font-size: 2.5em;
}

@media not (min-width: 600px) {
	.heading-divider__main {
		font-size: 2em;
	}
}

.heading-divider__sub {
	display: block;
	width: min(100%, 320px);
	margin-inline: auto;
/* 	margin-bottom: 0.5em; */ /* 実際に見てみたら無くても良さそうなので一旦コメントアウト */
	border-bottom: 1px solid #554141;
	font-size: 15px;
}

.has-text-align-left .heading-divider__sub {
	margin-left: 0;
}

@media not (min-width: 600px) {
	.heading-divider__sub {
		font-size: 12px;
	}
}

.wp-block-heading.heading-accent {
	padding-bottom: 12px;
}

.wp-block-heading.heading-accent::before {
	position: absolute;
	inset: auto;
	bottom: 0;
	left: 0;
	width: 40px;
	border-bottom: 4px solid var(--color_main);
	content: "";
}

.heading-line-right {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.wp-block-heading.heading-line-right::after {
	flex: 1;
	border-bottom: 1px solid #554141;
	content: "";
}

.wp-block-heading.heading-vline {
	padding-left: 10px;
	border-left: 4px solid var(--color_main);
}

.wp-block-heading.heading-underline {
	padding-bottom: 8px;
}

.wp-block-heading.heading-underline::before {
	position: absolute;
	inset: auto;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 50%;
	border-bottom: 1px solid #554141;
	background: none;
	content: "";
}

.wp-block-heading.heading-underline--full::before {
	width: 100%;
}

.has-text-align-left.heading-underline::before {
	left: 0;
	transform: none;
}

.wp-block-heading.heading-scale-01 {
	font-size: 2em;
}

@media not (min-width: 600px) {
	.wp-block-heading.heading-scale-01 {
		font-size: 1.4em;
	}
}

.wp-block-heading.heading-scale-02 {
	font-size: 2em;
}

@media not (min-width: 600px) {
	.wp-block-heading.heading-scale-02 {
		font-size: 1.5em;
	}
}

.wp-block-heading.heading-scale-03 {
	font-size: 1.5em;
}

@media not (min-width: 600px) {
	.wp-block-heading.heading-scale-03 {
		font-size: 1.25em;
	}
}
/* ------------------------------ セクション　ラベル ------------------------------ */
.section-label {
	position: absolute;
	top: 0;
	left: calc(var(--swl-pad_container) / 2);
	margin-bottom: 0;
	color: #fff;
	font-size: 4em;
	writing-mode: vertical-lr;
	line-height: 1;
	pointer-events: none;
	z-index: -1;
}

/* ------------------------------ セクション　リード文 ------------------------------ */
.section-lead {
	font-size: 1.5em;
}

@media not (min-width: 600px) {
	.section-lead {
		font-size: 1.2em;
	}
}

/* ------------------------------ 見出し ------------------------------ */
.line-dot {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1em;
}

.line-dot::before {
	position: absolute;
	top: 50%;
	right: var(--line-dot-offset, 0);
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--color_text);
	content: "";
}

.line-dot::after {
	flex: 1;
	border-bottom: 2px solid var(--color_text);
	content: "";
}

/* ------------------------------ ボタン ------------------------------ */
.salon-button a {
	--the-btn-radius: 8px;
}

.salon-button--secondary a {
	--the-btn-bg: #efeae7;
	color: var(--color_text);
}

/* ------------------------------ カバーブロック調整 ------------------------------ */
.cover-custom {
	padding: 0;
	min-height: auto;
}

.cover-custom .wp-block-cover__image-background {
	position: relative;
}

.cover-custom--image-auto .wp-block-cover__image-background {
	width: auto;
}

.cover-custom .wp-block-cover__inner-container {
	position: absolute;
}

/* ------------------------------ 装飾画像　クローバー ------------------------------ */
.deco-clover-base {
	position: relative;
}

.deco-clover {
	position: absolute;
	top: var(--deco-clover-y, 0);
	right: calc(50% - 50vw + var(--swl-scrollbar_width, 0px)/2); /* 画面右端に設置 */
	z-index: -1; /* コンテンツに被るので後ろへ回したい。コンテンツ側をグループで囲って1にして、ここを0にする案もある。後で検討 */
}

.deco-clover--center-y {
	--deco-clover-y: 50%;
	transform: translateY(-50%);
}

@media not (min-width: 960px) {
	.deco-clover {
		text-align: right;
	}

	.deco-clover img {
		width: 70%;
	}
}

@media not (min-width: 600px) {
	.deco-clover img {
		width: 35%;
	}
}

/* ------------------------------ 当社の取り組み ------------------------------ */
.company-initiatives .swell-block-columns__inner {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

@media not (min-width: 960px) {
	.company-initiatives .swell-block-columns__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

.company-initiatives .swell-block-column {
	--clmn-w: 100%;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	row-gap: 0;
}

.company-initiatives figure {
	align-self: center;
}

/* ------------------------------ 企業理念 ------------------------------ */
.philosophy-copy {
	font-size: 2em;
}

@media not (min-width: 600px) {
	.philosophy-copy {
		font-size: 1.3em;
	}
}

/* ------------------------------ お問い合わせフォーム ------------------------------ */
.form__row {
	display: grid;
	grid-template-columns: auto 600px;
	justify-content: flex-end;
	align-items: center;
	column-gap: 1em;
	margin-bottom: 1em;
}

@media not (min-width: 960px) {
	.form__row {
		grid-template-columns: 1fr;
	}
}

.form__label {
	display: flex;
	align-items: center;
	grid-column: 1;
	grid-row: 1;
/* 	margin-right: 1em; */
}

@media not (min-width: 960px) {
	.form__label {
		grid-column: auto;
		grid-row: auto;
	}
}

.required {
	padding-inline: 5px;
	margin-right: 0.5em;
	background-color: var(--color_main);
	color: #fff;
	font-size: 0.8em;
	font-family: var(--kaku-gothic);
}

.form__field {
	grid-column: 2;
	grid-row: 1;
}

@media not (min-width: 960px) {
	.form__field {
		grid-column: auto;
		grid-row: auto;
	}
}

.form__control {
	width: 100%;
	border-radius: 8px;
	border-color: #c1b6af;
	background-color: #fff;
}

.form__group-item {
	display: grid;
	grid-template-columns: 6em 1fr;
	align-items: center;
	margin-bottom: 1em;
}

.form__group-label {
	margin-inline: 1em;
	text-align: center;
}

.form__group-field {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 1em;
}

@media not (min-width: 960px) {
	.form__group-field {
		grid-template-columns: 1fr;
	}
}

.form__group-control {
/* 	margin-right: 1em; */
	border-radius: 8px;
	border-color: #c1b6af;
	background-color: #fff;
}

/* @media not (min-width: 960px) {
	.form__group-control {
		margin-bottom: 1em;
	}
} */

.form__notes {
	grid-column: 2;
	grid-row: 2;
	font-size: 0.8em;
}

@media not (min-width: 960px) {
	.form__notes {
		grid-column: auto;
		grid-row: auto;
	}
}

.submit-wrap {
	position: relative;
	text-align: center;
}

.submit-wrap .wpcf7-spinner {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.submit {
	width: min(100%, 350px);
	padding: 0.5em 0.75em;
	border: none;
	background-color: var(--color_main);
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
}

/* ------------------------------ タブメニュー　（ジャーナル・よくあるご質問） ------------------------------ */
#content .faq-tab .c-tabList {
	--the-tab-margin: 0 0 2em;
	justify-content: flex-start;
	column-gap: 1em;
	row-gap: 0.5em;
	padding: 0.5em 2em;
	border-radius: 30px;
	background-color: #efeae7;
}

@media not (min-width: 960px) {
	#content .faq-tab .c-tabList {
		flex-wrap: nowrap;
		overflow-x: auto;
	}
}

.faq-tab .c-tabList .c-tabList__item {
	position: relative;
	flex: 0 0 auto;
	min-width: 115px;
	margin: 0;
}

.faq-tab .c-tabList__item:not(:last-child)::after {
	position: absolute;
	top: 50%;
	right: -0.5em;
	transform: translateY(-50%);
	height: 50%;
	border-left: 1px solid var(--color_text);
	content: "";
}

.faq-tab .c-tabList .c-tabList__button {
	padding: var(--the-tab-btn-padding);
	border: none;
	border-radius: 60px;
	opacity: 1;
}

.faq-tab .c-tabList .c-tabList__button[aria-selected=true] {
	background-color: var(--color_main);
	color: #efeae7;
}

.faq-tab .c-tabList .c-tabList__button:not([aria-selected=true]):hover {
	background-color: #ddd;
	color: #333;
}

.faq-tab .c-tabBody {
	padding: 0;
	border: none;
}

/* ------------------------------ アコーディオン　よくあるご質問 ------------------------------ */
.faq-accordion .swell-block-accordion__item {
	border-bottom: 1px solid var(--color_main);
}

.faq-accordion .swell-block-accordion__title {
	padding-left: 3em;
	background: none;
}

.faq-accordion .swell-block-accordion__body {
	position: relative;
	padding-left: 3em;
}

.faq-accordion :is(.swell-block-accordion__title, .swell-block-accordion__body)::before {
	position: absolute;
	top: 1em;
	left: 1em;
}

.faq-accordion .swell-block-accordion__title::before {
	content: "Q.";
}

.faq-accordion .swell-block-accordion__body::before {
	content: "A.";
}

/* ------------------------------ ベーススタイル ------------------------------ */
@media (min-width: 960px) {
	#body_wrap {
		padding-top: 4em!important; /* ヘッダーとメインビジュアルをずらして重ねる為 */
	}
}

@media not (min-width: 960px) {
	#body_wrap {
		margin-top: -4em;
	}
}

/* ------------------------------ ヘッダー ------------------------------ */
.l-header {
	position: absolute; /* フロントページ以外で必要 */
	background: none; /* フロントページ以外で必要 */
	background-image: linear-gradient(180deg, #f7f7f7 55%, transparent);
}

.l-header .l-header__inner {
	padding-top: 1em;
	padding-bottom: 4em;
	color: var(--color_text);
}

/* ------------------------------ ヘッダー　ナビゲーションメニュー ------------------------------ */
.c-gnav {
	font-family: var(--kaku-gothic);
}

.c-gnav .ttl {
	font-weight: bold;
}

.sub-menu .ttl {
	font-weight: normal;
}

/* ------------------------------ ヘッダー　SNSアイコン ------------------------------ */
@media (min-width: 960px) {
	.head-sns {
		display: none;
	}
}

.l-header__customBtn {
	display: none;
}

/* ------------------------------ メインビジュアル ------------------------------ */
.p-mainVisual__textLayer {
/* 	justify-content: flex-start; */
	padding-top: 6em;
}

.mv-copy {
	--copy-border-size: 2rem;
	position: relative;
	font-size: 2em;
}

@media not (min-width: 600px) {
	.mv-copy {
		font-size: 1.4em;
	}
}

.mv-copy::before, .mv-copy::after {
	position: absolute;
	bottom: 0;
	width: var(--copy-border-size);
	border-bottom: 2px solid var(--copy-border-color);
	content: "";
}

.mv-copy::before {
	--copy-border-color: #998e84;
	left: 0;
}

.mv-copy::after {
	--copy-border-color: #efeae7;
	left: var(--copy-border-size);
}

.mv-copy__catch {
	font-size: 1.5em;
}

@media not (min-width: 600px) {
	.mv-copy__catch {
		font-size: 1.3em;
	}
}

.mv-copy__sub {
	font-size: 0.8em;
}

/* ------------------------------ タイトルエリア ------------------------------ */
.l-topTitleArea {
	height: 300px;
}

.l-topTitleArea__body {
	color: #554141;
}

/* 
 * page-title-image, c-pageTitle, c-pageExcerpt は仮
 * クラス名はそのまま使用可。c-pageExcerpt のみ設置方法を変更予定なので注意。
 */
.page-title-image {
	text-align: center;
}

.c-pageTitle {
	text-align: center;
	font-size: 2em;
}

@media not (min-width: 600px) {
	.c-pageTitle {
		font-size: 2.5em;
	}
}

.c-pageExcerpt {
	margin-top: 0;
	text-align: center;
}

/* ------------------------------ ウィジェット　フッター直前 ------------------------------ */
.contact-cta__button a {
	padding-block: 1.2em;
}

/* ------------------------------ フッター ------------------------------ */
.swell-block-linkList.footer-nav {
	--the-gap: 3em;
	font-family: var(--kaku-gothic);
}

.swell-block-linkList__link {
	cursor: pointer;
}

.footer-nav__caption {
	display: block;
	font-size: 0.6em;
}

/* ------------------------------ ページ専用 ------------------------------ */
/* ------------------------------ フロントページ　導入 ------------------------------ */
@media not (min-width: 600px) {
	.front-lead p {
		font-size: 1.1em; /* スマホ時に文字が小さいと指摘があったので、仮の調整。 */
	}

	.front-lead__opening .deco-clover {
		--deco-clover-y: 50%;
		transform: translateY(-50%);
	}
}

.front-lead__closing .deco-clover {
	--deco-clover-y: 50%;
	transform: translateY(-50%);
}

@media not (min-width: 600px) {
	.front-lead__closing .deco-clover {
		--deco-clover-y: 30%;
	}
}

/* ------------------------------ フロントページ　アニバーサリー ------------------------------ */
.front-anniversary .deco-clover {
	--deco-clover-y: 50%;
	transform: translateY(-50%);
}

/* ------------------------------ フロントページ　仲間 ------------------------------ */
.front-people .deco-clover {
	--deco-clover-y: 50%;
	transform: translateY(-50%);
}

.people-copy .wp-block-cover__inner-container {
	top: 45%;
	transform: translateY(-50%);
	width: auto;
}

.people-copy__main {
	font-size: min(8.5vw, 90px);
}

.people-copy__sub {
	font-size: min(5vw, 35px);
}

/* ------------------------------ フロントページ　サロン ------------------------------ */
.front-salon .swell-block-columns__inner {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

@media not (min-width: 960px) {
	.front-salon .swell-block-columns__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media not (min-width: 600px) {
	.front-salon .swell-block-columns__inner {
		grid-template-columns: 1fr;
	}
}

.front-salon .swell-block-column {
	--clmn-w: 100%;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
}

.front-salon .deco-clover {
	--deco-clover-y: 50%;
	transform: translateY(-50%);
}

/* ------------------------------ フロントページ　サービス ------------------------------ */
.service-slide .service-slide__item {
	position: relative;
	transform: scale(0.8);
	border-radius: 32px;
	overflow: hidden;
	transition: transform 0.3s;
}

.service-slide .swiper-slide-active {
	transform: scale(1);
	z-index: 1;
}

/* .service-card__image {
	vertical-align: middle;
} */

.service-card__body {
	position: absolute;
	top: 0;
	left: 0;
	padding: 2em;
	color: var(--color_text);
}

.service-card__body .service-card__title {
	margin-bottom: 0.5em;
}

.service-slide-pagination.swiper-pagination {
	--swiper-pagination-color: var(--color_main);
	position: relative;
}

/* ------------------------------ フロントページ　お知らせ ------------------------------ */
.front-news .deco-clover {
	--deco-clover-y: 100%;
	transform: translateY(-100%);
}

@media (min-width: 600px) {
	.front-news .deco-clover {
		--deco-clover-y: 50%;
		transform: translateY(-50%);
	}
}

/* ------------------------------ フロントページ　採用情報 ------------------------------ */
.recruit-link {
	margin-inline: auto;
	width: fit-content;
}

.recruit-link .wp-block-cover__inner-container {
	right: 0;
	bottom: 2em;
	width: min(100%, 520px);
	background-color: var(--color_bg);
}

.recruit-link__text {
	--line-dot-offset: 1.5em;
	position: relative;
	padding: 0.5em var(--line-dot-offset);
	container-type: inline-size;
}

.front-recruit .deco-clover {
	--deco-clover-y: 50%;
	transform: translateY(-50%);
}

/* ------------------------------ フロントページ　会社情報 ------------------------------ */
.front-about .deco-clover {
	--deco-clover-y: 50%;
	transform: translateY(-50%);
}

/* ------------------------------ 私たちについてページ　沿革 ------------------------------ */
.swiper.history-slide {
	padding-top: 8px;
	padding-left: 8px;
	margin-right: calc(var(--edge-offset) * -1);
	margin-bottom: 1em;
/* 	margin-left: calc(var(--edge-offset) * -1); */
/* 	margin-left: 0; */
/* 	width: calc(100vw - var(--swl-scrollbar_width, 0px)); */
	width: 100%;
	cursor: pointer;
}

/* .history-slide .swiper-wrapper {
	margin-left: var(--edge-offset);
} */

.swiper-slide.history-slide__item {
	padding: 3em 3em 1em 0;
	width: auto;
	height: auto;
/* 	max-height: 400px; */
}

/* @media not (min-width: 600px) {
	.swiper-slide.history-slide__item {
		max-height: 450px;
	}
} */

.history-slide__item::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2.5em;
	border-top: 1px solid var(--color_text);
	border-left: 1px dashed var(--color_text);
	content: "";
}

.history-slide__item::after {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	background: url(https://user.conpasllc.com/zeroplan/lw/wp/02/wp-content/uploads/2026/10/history_slide_pointer.png) no-repeat center/contain;
	content: "";
}

.history-date {
	margin-bottom: 1em;
	font-size: 1.5em;
	font-weight: bold;
}

.history-content {
/* 	display: flex;
	gap: 1em; */
	width: 300px;
}

.history-content>:not(:last-child) {
	margin-bottom: 1em;
}

/* .history-content__item {
	width: 300px;
}

.history-content__item>* {
	margin-bottom: 1em;
}

.history-media {
	display: flex;
	gap: 1em;
}

.history-media__figure {
	max-width: 300px;
} */

.history-slide-scrollbar {
	margin-inline: auto;
	max-width: 60%;
	height: 20px;
	border-radius: 20px;
	background-color: #a8a8a8;
}

.history-slide-scrollbar .swiper-scrollbar-drag {
	position: relative;
	height: 100%;
	border-radius: 20px;
	background-color: var(--color_main);
	cursor: pointer;
}

.history-slide-scrollbar .swiper-scrollbar-drag::before, .history-slide-scrollbar .swiper-scrollbar-drag::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	font-size: 0.85em;
	font-weight: bold;
	font-family: "Font Awesome 6 Free";
}

.history-slide-scrollbar .swiper-scrollbar-drag::before {
	left: 10%;
	content: "\f060";
}

.history-slide-scrollbar .swiper-scrollbar-drag::after {
	right: 10%;
	content: "\f061";
}

/* ------------------------------ 私たちについてページ　会社概要 ------------------------------ */
.company-profile :is(th, td) {
	padding: 0.75em 1em;
	border-top: none;
	border-bottom-width: 2px;
}

.company-profile th {
	border-bottom-color: var(--color_text);
	white-space: nowrap;
}

.company-profile__email {
	height: 1em;
	vertical-align: middle;
}

/* ------------------------------ サービスページ　コースラインナップ ------------------------------ */
.course-list__link {
	border-radius: 32px;
	overflow: hidden;
}

.course-list .wp-block-cover__inner-container {
	bottom: 2em;
	left: 2em;
	width: 75%;
}

/* ------------------------------ サービスページ　ご利用の流れ ------------------------------ */
.usage-flow .swell-block-step__item::before {
	top: auto;
	bottom: 8px;
	height: calc(100% - 64px); /* step number の高さが 48px。それプラス bottom の2倍の数値。number のサイズが変わるので後で調整 */
}

.usage-flow .swell-block-step__number {
	background: none!important;
	color: inherit!important;
	font-family: var(--alex-brush);
}

.usage-flow .swell-block-step__number::after {
	font-size: 2.5em;
	content: counter(step) ".";
}

/* ------------------------------ サービス　下層ページ　内外心 ------------------------------ */
.concept-item {
	--symbol-size: 150px;
}

@media not (min-width: 600px) {
	.concept-item {
		--symbol-size: 70px;
	}
}

.concept-item .swell-block-column:nth-of-type(odd) {
	width: var(--symbol-size);
}

.concept-item .swell-block-column:nth-of-type(even) {
	width: calc(100% - var(--symbol-size) - var(--swl-clmn-mrgn--x) * 2);
	font-size: 1.7em;
}

@media not (min-width: 600px) {
	.concept-item .swell-block-column:nth-of-type(even) {
		font-size: 1.1em;
	}
}

/* ------------------------------ サービス　下層ページ　店舗情報 ------------------------------ */
.salon-info {
	max-width: min(100%, 600px);
}

/* ------------------------------ 店舗紹介ページ　タブ ------------------------------ */
.salon-tab__tabs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.25em;
	list-style: none;
}

@media not (min-width: 600px) {
	.salon-tab__tabs {
		grid-template-columns: repeat(3, 1fr);
	}
}

.salon-tab__tab {
	position: relative;
	transition: 0.3s;
	cursor: pointer;
}

.salon-tab__tab::after {
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / 0%);
	content: "";
}

.salon-tab__tab.active::after {
	background-color: rgb(0 0 0 / 50%);
}

.salon-tab__name {
	position: absolute;
	bottom: 0.5em;
	left: 0.5em;
	font-family: var(--kaku-gothic);
	font-weight: bold;
	font-size: 0.9em;
	z-index: 1;
}

.active .salon-tab__name {
	color: #fff;
}

.salon-tab__content {
	display: none;
}

.salon-tab__content.show {
	display: block;
}

.salon-tab__content>* {
	margin-bottom: 2em;
}

/* ------------------------------ 店舗紹介ページ　スライダー ------------------------------ */
.salon-slide {
	margin-bottom: 2em;
}

.salon-thumbs .swiper-slide {
	cursor: pointer;
}

.salon-slide-image__img, .salon-thumbs-image__img {
	aspect-ratio: 16 / 9;
	object-fit: contain;
}

/* ------------------------------ 店舗紹介ページ　スタッフインタビュー ------------------------------ */
.salon-voice .swell-block-dl__dt {
	display: inline-block;
	padding-bottom: 0.5em;
}

.salon-voice .swell-block-dl__dt::before {
	margin-right: 0.5em;
	content: "Q.";
}

.salon-voice .swell-block-dl__dt::after {
	margin-left: 1em;
	content: "▼";
}

.salon-voice .swell-block-dl__dd {
	margin-left: 0;
	border-top: 1px solid var(--color_text);
}

/* ------------------------------ 店舗紹介ページ　お客様からいただいた声 ------------------------------ */
/* カスタム投稿を使う。SWELLの投稿一覧では再現難しいのでコードを書くことになる。後で対応 */
.review-item.has-background {
	padding: 1em 2em;
	border-radius: 20px;
}

.review-item__text {
	margin-bottom: 0.5em;
}

/* ------------------------------ 店舗紹介ページ　スタッフ紹介 ------------------------------ */
.staff-photo {
	aspect-ratio: 1;
}

.staff-details__term {
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--color_text);
}

.staff-details__desc {
	padding: 0;
	margin: 0;
}

/* ------------------------------ 内外心ページ ------------------------------ */
.concept-links {
	--marker-height: 80px;
	margin-top: calc(2em + var(--marker-height) / 2);
}

.concept-link {
	position: relative;
}

.concept-link::before {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	height: var(--marker-height);
	border-left: 1px solid var(--color_text);
	z-index: 1;
	pointer-events: none;
	content: "";
}

.concept-link .wp-block-cover {
	min-height: auto;
	aspect-ratio: 1;
}

.concept-link .wp-block-cover__background {
	transition: opacity 0.3s;
}

.concept-link:hover .wp-block-cover .wp-block-cover__background {
	opacity: 0;
}

.concept-lead .deco-clover {
	--deco-clover-y: 50%;
	transform: translateY(-70%);
}
@media (min-width: 600px) {
	.concept-lead .deco-clover {
		--deco-clover-y: 50%;
		transform: translateY(-50%);
	}
}

/* ------------------------------ ユーティリティ ------------------------------ */
.under600 {
	display: none;
}

@media not (min-width: 600px) {
	.under600 {
		display: block;
	}

	.over600 {
		display: none;
	}
}

.keep-all {
	word-break: keep-all;
	overflow-wrap: break-word;
/* 	line-break: strict; */
}