@charset "utf-8";

/* CSS Document */
/*==================================================
 posts common
==================================================*/
#postbox {
	margin: var(--space-sm) 0 var(--space-lg);
}

.archivePage img,
.singlePage img {
	max-width: 100%;
	height: auto;
}

.singlePage iframe {
	max-width: 100%;
}

/*************** セクション見出し（先頭にメインカラーの縦罫） ****************/
.secTtl01 {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	margin-bottom: 30px;
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
}

.secTtl01::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 1em;
	border-radius: var(--rad-sm);
	background: var(--color-main);
	margin-top: 0.25em;
}

/* 大サイズ（スタッフ一覧の店舗名など） */
.secTtl01--lg {
	font-size: var(--fs-xl);
	margin-bottom: 20px;
}

/*************** 店舗アンカーナビ（店舗一覧・スタッフ一覧で共通） ****************/
.shopNav {
	margin-bottom: var(--space-md);
}

.shopNav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

.shopNav__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 360px;
	padding: 1em 2.5em;
	border: 1px solid var(--color-main);
	border-radius: 2em;
	background: var(--color-white);
	color: var(--color-main);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	transition: .3s;
}

/* 共通の矢印アイコンを90度回転させ、下方向（ページ内リンク）を示す。位置は右端固定 */
.shopNav__linkArrow {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 16px;
	height: 16px;
	background: currentColor;
	transform: translateY(-50%) rotate(90deg);
	transition: transform .3s;
	-webkit-mask: url(/share/img/common/ico_arrow_01.svg) no-repeat center / contain;
	mask: url(/share/img/common/ico_arrow_01.svg) no-repeat center / contain;
}

@media (any-hover:hover) {

	.shopNav__link:hover {
		background: var(--color-main);
		color: var(--color-white);
		opacity: 1;
	}

	.shopNav__link:hover .shopNav__linkArrow {
		transform: translateY(-50%) rotate(90deg) translateX(3px);
	}
}


/*************** 投稿タイトル ****************/
.singlePage .ttlBox {
	border-bottom: 1px solid var(--color-black);
	margin-bottom: var(--space-sm);
}

.singlePage .ttlBox__ttl {
	font-size: var(--fs-xl);
	font-weight: bold;
	padding: 0.5em 0;
}

.singlePage .ttlBox__header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 10px;
}

.singlePage .ttlBox__date {
	font-size: var(--fs-base);
}

/*************** 投稿サムネイル画像 ****************/
.singleNews .mainimgBox {
	margin-bottom: var(--space-sm);
	text-align: center;
}

.singleNews .mainimgBox img {
	width: auto;
	max-width: 100%;
	height: auto;
}

/* 目次(TOC)用CSS */
.singlePage #toc_container {
	min-width: 30%;
	padding: 1em 1.5em .5em;
	border: 1px solid var(--color-gray);
}

.singlePage #toc_container .toc_title {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 1.4em;
	position: relative;
	margin-bottom: .5em;
}

.singlePage #toc_container .toc_title .toc_toggle {
	font-size: 1.2rem;
}

.singlePage .contentBox #toc_container .toc_list {
	padding: 0;
}

.singlePage .contentBox #toc_container .toc_list li {
	list-style: none;
	border-bottom: 1px dotted var(--color-lightgray);
	padding-bottom: .5em;
	margin-bottom: .5em;
	position: relative;
}

.singlePage .contentBox #toc_container .toc_list li:last-child {
	border: 0;
	padding-bottom: 0;
}

.singlePage .contentBox #toc_container .toc_list li ul {
	border-top: 1px dotted var(--color-lightgray);
	padding: 1em 0 0 0;
	margin: 0;
}

.singlePage .contentBox #toc_container .toc_list li ul li {
	margin-left: 1.5em;
}

.singlePage .contentBox #toc_container .toc_list li .toc_number {
	color: var(--color-gray);
}

/* ビジュアルエディタ用CSS */
.singlePage .contentBox p {
	margin-bottom: 10px;
	margin-bottom: 1em;
}

.singlePage .contentBox h1,
.singlePage .contentBox h2,
.singlePage .contentBox h3,
.singlePage .contentBox h4,
.singlePage .contentBox h5,
.singlePage .contentBox h6 {
	font-weight: bold;
	margin: 1em 0;
}

.singlePage .contentBox h1,
.singlePage .contentBox h2 {
	font-size: clamp(2rem, 2vw, 2.6rem);
	border-left: 10px solid var(--color-main);
	padding: 0 0 0 .5em;
}

.singlePage .contentBox h3 {
	font-size: clamp(1.8rem, 2vw, 2.4rem);
	border-bottom: 3px solid var(--color-main);
	padding: 0 0 .5em .5em;
}

.singlePage .contentBox h4 {
	font-size: clamp(1.8rem, 2vw, 2.2rem);
	background: var(--color-palemain);
	padding: .5em;
}

.singlePage .contentBox h5 {
	font-size: clamp(1.8rem, 2vw, 2rem);
	border-top: 1px solid var(--color-lightgray);
	border-bottom: 1px solid var(--color-lightgray);
	padding: .5em;
}

.singlePage .contentBox h6 {
	font-size: clamp(1.6rem, 2vw, 1.8rem);
	border-bottom: 1px dashed var(--color-lightgray);
	padding: 0 0 .5em .5em;
}

.singlePage .contentBox blockquote {
	padding: 1em;
	background: var(--color-palegray);
	margin: 1em 0;
}

.singlePage .contentBox blockquote p {
	margin-bottom: 0;
}

.singlePage .contentBox ul,
.singlePage .contentBox ol {
	padding-left: 1.5em;
}

.singlePage .contentBox ul li {
	list-style: disc;
	line-height: 1.6;
	margin-bottom: 1em;
}

.singlePage .contentBox ol li {
	list-style: decimal;
	line-height: 1.6;
	margin-bottom: 1em;
}

.singlePage .contentBox table {
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
	border-top: 1px solid var(--color-lightgray);
	border-left: 1px solid var(--color-lightgray);
}

.singlePage .contentBox table th {
	border-right: 1px solid var(--color-lightgray);
	border-bottom: 1px solid var(--color-lightgray);
}

.singlePage .contentBox table td {
	border-right: 1px solid var(--color-lightgray);
	border-bottom: 1px solid var(--color-lightgray);
}

.singlePage .contentBox table th,
.singlePage .contentBox table td {
	padding: .5em;
}

.singlePage .contentBox a {
	text-decoration: underline;
	color: var(--color-main);
}

/* lightbox（rel="lightbox[グループ名]" のグループ指定も含める） */
.singlePage a[rel^="lightbox"] {
	text-decoration: none;
}

.singlePage .contentBox .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.singlePage .contentBox .alignright {
	float: right;
	margin-left: 1.5em;
}

.singlePage .contentBox .alignleft {
	float: left;
	margin-right: 1.5em;
}

.singlePage .contentBox {
	display: flow-root;
	/* float の解除 */
}

.singlePage .contentBox pre {
	white-space: pre-wrap;
	word-wrap: break-word;
}

.singlePage .contentBox iframe {
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.singlePage .contentBox .wp-caption {
	max-width: 100%;
}

/* ビジュアルエディタ用CSSここまで */


/*************** 一覧ページャー ****************/
.archivePager {
	padding: 20px;
	text-align: center;
	width: min(90%, 1200px);
	margin: var(--space-sm) auto;
	font-family: var(--font-en);
	font-weight: bold;
}

.wp-pagenavi {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.wp-pagenavi span.extend {
	color: var(--color-main);
	font-weight: bold;
	font-family: var(--font-en);
	border: none;
}

.wp-pagenavi a,
.wp-pagenavi span.current {
	text-decoration: none;
	border: 1px solid var(--color-main);
	color: var(--color-main);
	border-radius: 1000px;
	aspect-ratio: 1 / 1;
	width: auto;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.wp-pagenavi span.current {
	background-color: var(--color-main);
	color: #fff;
	border-color: var(--color-main);
	font-weight: bold;
}

.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
	aspect-ratio: 3 / 2;
	font-family: var(--font-ja);
	font-size: var(--fs-sm);
}

.wp-pagenavi a:hover {
	opacity: 1;
	background-color: var(--color-main);
	color: #fff;
	border-color: var(--color-main);
}

@media screen and (max-width: 768px) {

	/* 最初・最後・省略記号を非表示 */
	.wp-pagenavi .extend {
		display: none;
	}
}

/*************** 詳細ページ.shopBox__itemPhotoャー ****************/
.singlePager {
	margin-top: var(--space-md);
}

.singlePager .pagerList {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.9em;
}

.singlePager li.archive:before,
.singlePager li.archive:after {
	content: "｜";
}

.singlePager li.prev {
	min-width: 5em;
	text-align: right;
}

.singlePager li.prev :before {
	content: "\ff1C \a0";
	font-size: 0.6em;
}

.singlePager li.next {
	min-width: 5em;
	text-align: left;
}

.singlePager li.next :after {
	content: "\a0 \FF1E";
	font-size: 0.6em;
}

/*==================================================
 newsPage
==================================================*/
/* カテゴリー絞り込み */
.newsPage .newsNav {
	margin-bottom: 20px;
}

.newsPage .newsNav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 5px;
}

.newsPage .newsNav__link {
	display: block;
	padding: .4em 1.2em;
	border: 1px solid var(--color-main);
	border-radius: 2em;
	color: var(--color-main);
	font-size: var(--fs-sm);
	line-height: 1.4;
	transition: .3s;
}

.newsPage .newsNav__item--current .newsNav__link {
	border-color: var(--color-main);
	background: var(--color-main);
	color: var(--color-white);
}

/* 施工事例の絞り込みと同じホバー（背景を主色で塗りつぶす） */
@media (any-hover:hover) {
	.newsPage .newsNav__link:hover {
		border-color: var(--color-main);
		background: var(--color-main);
		color: var(--color-white);
		opacity: 1;
	}
}

/* 一覧 */
.newsPage .newsBox__body {
	align-items: flex-start;
}


@media screen and (max-width: 768px) {
	.newsPage .newsBox__item {
		align-items: flex-start;
	}
}

/*==================================================
 staffPage
==================================================*/
/*---------- 所属店舗ごとのグループ（店舗一覧からのアンカー先） ----------*/
.staffBox__group+.staffBox__group {
	margin-top: var(--space-md);
}

/*---------- 所属先ごとのグループ ----------*/
.staffBox__dept+.staffBox__dept {
	margin-top: var(--space-sm);
}

/* 所属先の見出し */
.staffBox__deptTtl {
	margin-bottom: 20px;
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
}

/*---------- スタッフ一覧 ----------*/
.staffBox__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-sm) 3.5%;
}

.staffBox__link {
	display: block;
}

.staffBox__photo {
	margin-bottom: 1em;
	border-radius: var(--rad-lg);
	background: var(--color-white);
	overflow: hidden;
	border: 1px solid var(--color-palegray);
}

.staffBox__photo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.staffBox__info {
	text-align: center;
}

.staffBox__depart {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .2em 1em;
	margin-bottom: .5em;
	color: var(--color-main);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .05em;
}

.staffBox__name {
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.5;
	transition: color .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.staffBox__phonetic {
	display: block;
	margin-top: .3em;
	color: var(--color-darkgray);
	font-size: var(--fs-xs);
	letter-spacing: .05em;
	font-family: var(--font-en);
}

@media (any-hover:hover) {

	.staffBox__link:hover {
		opacity: 1;
	}

	.staffBox__link:hover .staffBox__photo img {
		transform: scale(1.08);
	}

	.staffBox__link:hover .staffBox__name {
		color: var(--color-main);
	}
}

/*---------- 詳細：スタッフ写真＋名前＋コメント ----------*/
.staffPage-single .mainimgBox__inner {
	display: flex;
	align-items: flex-start;
	gap: 5%;
}

.staffPage-single .mainimgBox__photo {
	flex: 0 0 auto;
	width: 38%;
	max-width: 400px;
	border-radius: var(--rad-lg);
	background: var(--color-palegray);
	overflow: hidden;
}

.staffPage-single .mainimgBox__photo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}

.staffPage-single .mainimgBox__info {
	flex: 1 1 auto;
	min-width: 0;
}

.staffPage-single .mainimgBox__depart {
	display: flex;
	flex-wrap: wrap;
	gap: .2em 1em;
	margin-bottom: .8em;
	color: var(--color-main);
	font-size: var(--fs-base);
	font-weight: 700;
	letter-spacing: .05em;
}

.staffPage-single .mainimgBox__name {
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
}

.staffPage-single .mainimgBox__phonetic {
	display: block;
	margin-top: .4em;
	color: var(--color-darkgray);
	font-family: var(--font-en);
	font-size: var(--fs-sm);
	letter-spacing: .05em;
}

.staffPage-single .mainimgBox__message {
	margin-top: var(--space-sm);
	padding: 1.5em 2em;
	border-radius: var(--rad-md);
	background: var(--color-palemain);
	font-size: var(--fs-sm);
	line-height: 1.8;
}

.staffPage-single .mainimgBox__messageTtl {
	margin-bottom: .3em;
	color: var(--color-main);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.5;
}

/*---------- 詳細：見出し ----------*/
/*---------- 詳細：プロフィール ----------*/
.staffPage-single .infoBox__profile,
.staffPage-single .infoBox__qa,
.staffPage-single .infoBox__gallery {
	margin-top: var(--space-md);
}

.staffPage-single .infoBox__profileList {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1em 5%;
}

.staffPage-single .infoBox__profileItem {
	display: flex;
	align-items: flex-start;
	gap: 1.2em;
	padding-bottom: 1.2em;
	border-bottom: 1px dotted var(--color-dullmain);
}

.staffPage-single .infoBox__profileTerm {
	flex: 0 0 auto;
	width: 9em;
	padding: .3em .8em;
	background: var(--color-palemain);
	color: var(--color-main);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
}

.staffPage-single .infoBox__profileDesc {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.6;
}

.staffPage-single .infoBox__profileDesc a {
	color: var(--color-main);
	text-decoration: underline;
}

/*---------- 詳細：Q&A ----------*/
.staffPage-single .infoBox__qaQ,
.staffPage-single .infoBox__qaA {
	display: flex;
	align-items: flex-start;
	gap: .8em;
	line-height: 1.8;
}

.staffPage-single .infoBox__qaQ {
	font-weight: 700;
}

.staffPage-single .infoBox__qaQ+.infoBox__qaA {
	margin: .8em 0 1.8em;
}

.staffPage-single .infoBox__qaA:last-child {
	margin-bottom: 0;
}

.staffPage-single .infoBox__qaQ::before,
.staffPage-single .infoBox__qaA::before {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	font-family: var(--font-en);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1;
}

.staffPage-single .infoBox__qaQ::before {
	content: "Q";
	background: var(--color-main);
	color: var(--color-white);
}

.staffPage-single .infoBox__qaA::before {
	content: "A";
	background: var(--color-palemain);
	color: var(--color-main);
}

/*---------- 詳細：フォトギャラリー ----------*/
.staffPage-single .infoBox__galleryList {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 2.5%;
}

/* 枠を正方形に固定し、リンクと画像をその高さいっぱいに広げる */
.staffPage-single .infoBox__galleryItem {
	aspect-ratio: 1 / 1;
	border-radius: var(--rad-md);
	background: var(--color-palegray);
	overflow: hidden;
}

.staffPage-single .infoBox__galleryLink {
	display: block;
	height: 100%;
}

.staffPage-single .infoBox__galleryItem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (any-hover:hover) {

	.staffPage-single .infoBox__galleryLink:hover {
		opacity: 1;
	}

	.staffPage-single .infoBox__galleryLink:hover img {
		transform: scale(1.08);
	}
}

/*==================================================
 shopPage
==================================================*/
/*---------- 店舗ごとの詳細 ----------*/
.shopBox__item {
	padding-top: var(--space-sm);
}

.shopBox__item+.shopBox__item {
	margin-top: var(--space-lg);
}

/*---------- 店名 ----------*/
.shopBox__itemName {
	display: flex;
	align-items: center;
	gap: .5em;
	margin-bottom: 15px;
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
}

.shopBox__itemName::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 1em;
	border-radius: var(--rad-sm);
	background: var(--color-main);
}

/*---------- 写真（左）＋情報（右） ----------*/
.shopBox__itemInner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 80px;
}

.shopBox__itemInfo {
	flex: 1 1 auto;
	min-width: 0;
}

.shopBox__itemPhoto {
	flex: 0 0 auto;
	width: min(550px, 50%);
}

.shopBox__itemPhoto .slick-list {
	overflow: hidden;
	border-radius: var(--rad-md);
}

.shopBox__itemPhoto img {
	border: 1px solid var(--color-palegray);
	border-radius: var(--rad-md);
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	background: var(--color-palegray);
	object-fit: contain;
	font-family: 'object-fit: contain;';
}

/*---------- 写真スライダー（写真2枚以上でslickを適用） ----------*/
.shopBox__itemSlider .slick-next,
.shopBox__itemSlider .slick-prev {
	width: 54px !important;
	height: 54px !important;
}

.shopBox__itemSlider .slick-arrow.slick-prev {
	left: -27px !important;
}

.shopBox__itemSlider .slick-arrow.slick-next {
	right: -27px !important;
}

/*---------- 店舗データ ----------*/
.shopBox__itemData {
	font-size: var(--fs-sm);
}

.shopBox__itemRow {
	display: flex;
	align-items: flex-start;
	padding: 1.2em .5em;
	border-bottom: 1px dotted var(--color-gray);
	line-height: 1.7;
}

.shopBox__itemTerm {
	flex: 0 0 auto;
	width: 8em;
	font-weight: 700;
}

.shopBox__itemDesc {
	flex: 1 1 auto;
	min-width: 0;
}

/* 営業時間に続けて表示する店休日（折り返しても括弧の途中で切れないようにする） */
.shopBox__itemHoliday {
	display: inline-block;
	margin-left: .5em;
}

.shopBox__itemBtnWrap {
	margin-top: 30px;
}

/*---------- コメント（横幅100%） ----------*/
.shopBox__itemNote {
	margin-top: 30px;
	font-size: var(--fs-sm);
	padding: 1.5em 2em;
	border-radius: var(--rad-md);
	background: var(--color-palemain);
	line-height: 1.9;
}

.shopBox__itemNoteTtl {
	margin-bottom: .3em;
	color: var(--color-main);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.5;
}

/*---------- 地図（横幅100%） ----------*/
.shopBox__itemMap {
	margin-top: 30px;
}

.shopBox__itemMap iframe {
	display: block;
	width: 100%;
	height: 400px;
	border-radius: var(--rad-md);
}

/*==================================================
 galleryPage
==================================================*/
/*---------- カテゴリー・タグ絞り込み ----------*/
.galleryPage .galleryNav {
	margin-bottom: var(--space-sm);
}

.galleryPage .galleryNav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 5px;
}

.galleryPage .galleryNav__list--tag {
	gap: 5px 1.2em;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px dotted var(--color-gray);
}

.galleryPage .galleryNav__link {
	display: block;
	padding: .4em 1.2em;
	border: 1px solid var(--color-main);
	border-radius: 2em;
	color: var(--color-main);
	font-size: var(--fs-sm);
	line-height: 1.4;
	transition: .3s;
}

.galleryPage .galleryNav__item--current .galleryNav__link {
	background: var(--color-main);
	color: var(--color-white);
}

/* タグは囲いなし・アンダーラインのみのテキストリンクにしてカテゴリーと区別する */
.galleryPage .galleryNav__item--tag .galleryNav__link {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--color-black);
	font-size: var(--fs-sm);
	text-decoration: underline;
	text-underline-offset: .3em;
}

.galleryPage .galleryNav__item--tag.galleryNav__item--current .galleryNav__link {
	background: none;
	color: var(--color-black);
}

@media (any-hover:hover) {
	.galleryPage .galleryNav__link:hover {
		border-color: var(--color-main);
		background: var(--color-main);
		color: var(--color-white);
		opacity: 1;
	}

	.galleryPage .galleryNav__item--tag .galleryNav__link:hover {
		background: none;
		color: var(--color-main);
	}
}

/*---------- 一覧カード（Figma: gallery__list / galleryItem） ----------*/
.galleryBox__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 45px 30px;
}

.galleryBox__item {
	border-radius: var(--rad-md);
	background: var(--color-white);
	overflow: hidden;
	border: 1px solid var(--color-gray);
}

.galleryBox__link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.galleryBox__itemPhoto {
	position: relative;
	background: var(--color-palegray);
	overflow: hidden;
}

.galleryBox__itemPhoto img {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* カテゴリー・NEWアイコン（新着情報と共通の .icon）は写真の左上に重ねる */
.galleryBox__itemIcon {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
}

/* カードに重ねるアイコンは共通の .icon より一段小さく表示する */
.galleryBox__itemIcon .icon {
	padding: .3em .6em;
	font-size: var(--fs-2xs);
}

.galleryBox__itemInner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 15px;
}

/* タイトルは1行で省略表示 */
.galleryBox__itemTtl {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--color-black);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.2;
	transition: color .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* タグ（左）＋矢印（右） */
.galleryBox__itemFoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}

/* タグはテキストのみ */
.galleryBox__itemTagList {
	display: flex;
	flex-wrap: wrap;
	gap: 0 .8em;
	min-width: 0;
}

.galleryBox__itemTag {
	color: var(--color-darkgray);
	font-size: var(--fs-2xs);
	letter-spacing: .05em;
	line-height: 1.5;
}

.galleryBox__itemArrow {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-left: auto;
	line-height: 0;
	transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* インライン画像のままだと行ボックスの下端に揃って下へずれるため block にする */
.galleryBox__item .galleryBox__itemArrow img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (any-hover:hover) {

	.galleryBox__link:hover {
		opacity: 1;
	}

	.galleryBox__link:hover .galleryBox__itemPhoto img {
		transform: scale(1.08);
	}

	.galleryBox__link:hover .galleryBox__itemTtl {
		color: var(--color-main);
	}

	.galleryBox__link:hover .galleryBox__itemArrow {
		transform: translateX(3px);
	}
}

/*---------- 詳細：カテゴリー・タグ ----------*/
.galleryPage-single .galleryBox__tagList {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px 1.2em;
}

/* タグは囲いなし・アンダーラインのみ（一覧の絞り込みタグと同じ見た目） */
.galleryPage-single .galleryBox__tag {
	display: inline-block;
	color: var(--color-black);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.6;
	text-decoration: underline;
	text-underline-offset: .3em;
	transition: .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (any-hover:hover) {
	.galleryPage-single .galleryBox__tag:hover {
		color: var(--color-main);
		opacity: 1;
	}
}

/*---------- 詳細：スライドショー ----------*/
.galleryPage-single .galleryBox__slider {
	width: min(100%, 900px);
	margin: 0 auto var(--space-md);
}

.galleryPage-single .galleryBox__slider .slick-list {
	border-radius: var(--rad-lg);
}

.galleryPage-single .galleryBox__slider .slick-next, 
.galleryPage-single .galleryBox__slider .slick-prev {
	top: 50% !important;
}

.galleryPage-single .galleryBox__sliderItem {
	border-radius: var(--rad-lg);
	background: var(--color-palegray);
	overflow: hidden;
}

.galleryPage-single .galleryBox__sliderLink {
	display: block;
	position: relative;
}

/* 拡大表示（lightbox）できることを示すアイコンを画像の右下に置く */
.galleryPage-single .galleryBox__sliderLink::after {
	content: "";
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 32px;
	height: 32px;
	border-radius: var(--rad-sm);
	background: rgba(0, 0, 0, .3) url(../img/page/gallery/icon_zoom.webp) no-repeat center / contain;
}

.galleryPage-single .galleryBox__sliderItem img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	font-family: 'object-fit: contain;';
}

/*---------- 詳細：ページャーサムネイル ----------*/
.galleryPage-single .galleryBox__thumbList {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.galleryPage-single .galleryBox__thumbItem {
	flex: 0 0 auto;
	width: 120px;
}

.galleryPage-single .galleryBox__thumb {
	display: block;
	width: 100%;
	border: 2px solid var(--color-gray);
	border-radius: var(--rad-sm);
	background: var(--color-palegray);
	overflow: hidden;
	opacity: .5;
	transition: border-color .3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.galleryPage-single .galleryBox__thumb--current {
	border-color: var(--color-main);
	opacity: 1;
}

.galleryPage-single .galleryBox__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}

@media (any-hover:hover) {
	.galleryPage-single .galleryBox__thumb:hover {
		opacity: 1;
	}
}

/*---------- 詳細：施工データ ----------*/
.galleryPage-single .galleryBox__data {
	margin-bottom: var(--space-md);
}

.galleryPage-single .galleryBox__dataList {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em 5%;
}

/* 項目名の見た目はスタッフ紹介詳細のプロフィール（.infoBox__profileTerm）と共通 */
.galleryPage-single .galleryBox__dataItem {
	display: flex;
	align-items: flex-start;
	gap: 1.2em;
	padding-bottom: 1em;
	border-bottom: 1px dotted var(--color-dullmain);
}

.galleryPage-single .galleryBox__dataTerm {
	flex: 0 0 auto;
	width: 9em;
	padding: .3em .8em;
	background: var(--color-palemain);
	color: var(--color-main);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: .05em;
}

.galleryPage-single .galleryBox__dataDesc {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.8;
}

/*---------- 詳細：紹介コメント ----------*/
.galleryPage-single .galleryBox__comment {
	margin-bottom: var(--space-md);
}

/*---------- 詳細：他の事例 ----------*/
.galleryPage-single .otherBox {
	margin-top: var(--space-md);
}

/*///////////////////////////////////////////////////////////

タブレット版（768px～1079px）

///////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1079px) {

	/*==================================================
	 タブレット版 staffPage
	==================================================*/
	.staffBox__list {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-sm) 3.3%;
	}

	/*==================================================
	 タブレット版 galleryPage
	==================================================*/
	/* 3カラムでは項目名＋内容が窮屈になるため2カラムにする */
	.galleryPage-single .galleryBox__dataList {
		grid-template-columns: repeat(2, 1fr);
	}
}


/*///////////////////////////////////////////////////////////

スマホ版（0px～767px）

///////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px) {

	/*==================================================
	 スマホ版 posts common
	==================================================*/
	/*************** 店舗アンカーナビ ****************/
	.shopNav__item {
		width: 100%;
	}

	/* 画面幅が360px未満でもはみ出さないよう、スマホでは横幅いっぱいにする */
	.shopNav__link {
		width: 100%;
	}

	/*==================================================
	 スマホ版 staffPage
	==================================================*/
	.staffBox__list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm) 5%;
	}

	/*single*/
	.staffPage-single .mainimgBox__inner {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.staffPage-single .mainimgBox__depart {
		justify-content: center;
	}

	.staffPage-single .mainimgBox__photo {
		width: 70%;
		max-width: 320px;
		margin: 0 auto;
	}

	.staffPage-single .mainimgBox__info {
		width: 100%;
		text-align: center;
	}

	.staffPage-single .mainimgBox__message {
		text-align: left;
	}

	.staffPage-single .infoBox__profileList {
		grid-template-columns: 1fr;
	}

	.staffPage-single .infoBox__profileItem {
		gap: 1em;
	}

	.staffPage-single .infoBox__profileTerm {
		width: 9em;
	}

	.staffPage-single .infoBox__galleryList {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 4%;
	}

	/*==================================================
	 スマホ版 shopPage
	==================================================*/

	.shopBox__itemName {
		margin-bottom: 10px;
		font-size: 24px;
	}

	.shopBox__itemInner {
		flex-direction: column;
		gap: 20px;
	}

	.shopBox__itemInfo,
	.shopBox__itemPhoto {
		width: 100%;
	}

	.shopBox__itemSlider .slick-next,
.shopBox__itemSlider .slick-prev {
	width: 46px !important;
	height: 46px !important;
}

.shopBox__itemSlider .slick-arrow.slick-prev {
	left: -15px !important;
}

.shopBox__itemSlider .slick-arrow.slick-next {
	right: -15px !important;
}

	.shopBox__itemTerm {
		width: 6.5em;
	}

	.shopBox__itemBtnWrap {
		margin-top: 20px;
		text-align: center;
	}
	
	.shopBox__itemNote {
		padding: 1.2em;
		margin-top: 20px;
	}
	
	.shopBox__itemMap {
		margin-top: 20px;
	}
	.shopBox__itemMap iframe {
		
		height: 260px;
	}

	/*==================================================
	 スマホ版 galleryPage
	==================================================*/
	/*archive*/
	/* カードは1列の縦並び */
	.galleryBox__list {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}

	/*single*/
	/* SPは縦に積み上がらないよう1行の横スクロールにする */
	.galleryPage-single .galleryBox__thumbList {
		flex-wrap: nowrap;
		justify-content: safe center;
		gap: 5px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 10px;
	}

	.galleryPage-single .galleryBox__thumbItem {
		width: 80px;
	}

	.galleryPage-single .galleryBox__dataList {
		grid-template-columns: 1fr;
	}

	.galleryPage-single .galleryBox__dataItem {
		gap: 1em;
	}

	.galleryPage-single .galleryBox__dataTerm {
		width: 7.5em;
	}

}