@charset "utf-8";
/*
Theme Name: Harmony Theme
Author: harmony
Description: original theme
Version： 3.0.0
*/

html { opacity: 1; }

html.is-leaving{
	opacity: 0;
	transition: opacity 220ms ease-out;
}

html.is-entering{
	opacity: 0;
}

html.is-entering.is-entered{
	opacity: 1;
	transition: opacity 320ms ease-in;
}


/* 既存の “タイトル画像用” の高さ固定を無効化（2段構成に必須） */
#header .site-title a{
	height: auto !important;
}

/* ロゴ＋文字の並び */
#header .site-title__link{
	display: inline-flex !important;  /* flexでもOKやけど横伸びしにくい */
	align-items: center;
	gap: 12px;
}

/* ロゴサイズはここで固定（競合に勝つ） */
#header .site-title__logo img{
	width: 33px !important;
	height: 33px !important;
	max-width: none !important;
	display: block;
}

/* 文字ブロックは伸ばさない（flex:1 をやめる） */
#header .site-title__texts{
	flex: 0 0 auto !important;
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

/* ここ重要：fixedは禁止。absoluteでヘッダー内に置く（スクロールで消える） */
#header{
	position: relative;
}
#header .site-title{
	position: absolute !important;
	left: 4rem !important;
	top: 3rem !important;
	z-index: 20 !important;
	margin: 0 !important;
}

#header .site-title__sub{
	font-size: 12px;
	letter-spacing: .08em;
	color:#555;
	font-weight: 500;
	line-height: 1.2;
}

#header .site-title__main{
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.15;
	color:#333;
}

.header {
	border-bottom: none;
}

html{
	scroll-behavior: smooth;
}

.css-br::after {
	content: "A" ;
	white-space: pre;
}

.vertical {
	writing-mode: vertical-rl;
	letter-spacing: 0.5em;
}

/*cssのリセット*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	border: 0;
	outline: 0;
	background: transparent;
}

body {
	line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}


nav ul {
	list-style: none;
}

.u1{
			list-style: none;
			padding: 30px;
			margin: 0 0 2em;
		}

		.u1 > li{
			position: relative;
			padding-left: 1.6em;  /* マーカー分 */
			margin: .55em 0;
			line-height: 1.8;
		}

		/* ✅ 文字の中央にくる青丸 */
		.u1 > li::before{
			content:"";
			position: absolute;
			left: 0;
			top: 0.9em;            /* 行の中央寄せ */
			transform: translateY(-50%);
			width: 8px;
			height: 8px;
			border-radius: 2px;
			background: #00C1D6;
		}

		/* ===== 入れ子（u1の中のul）も同系統で ===== */
		.u1 ul{
			list-style: none;
			padding-left: 0;
			margin: .6em 0 .8em;
		}

.u1 ul > li{
			position: relative;
			padding-left: 1.5em;
			margin: .45em 0;
			line-height: 1.8;
		}

		/* 2段目は丸抜き */
		.u1 ul > li::before{
			content:"";
			position: absolute;
			left: 0;
			top: 0.9em;
			transform: translateY(-50%);
			width: 7px;
			height: 7px;
			border-radius: 999px;
			background: transparent;
			border: 2px solid #00C1D6;
		}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

a {
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	background: transparent;
}

ins {
	text-decoration: none;
	color: #000;
	background-color: #ff9;
}

mark {
	font-weight: bold;
	font-style: italic;
	color: #000;
	background-color: #ff9;
}

del {
	text-decoration: line-through;
}

abbr[title],
dfn[title] {
	cursor: help;
	border-bottom: 1px dotted;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
}

hr {
	display: block;
	height: 1px;
	margin: 1em 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #ccc;
}

/*サイト全体の基準となるCSSを記述*/
html {
	font-size: 16px;
}

body {
	font-family: "fot-tsukuardgothic-std", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;/*行間の指定*/
	margin: 0;
	padding: 0;
	color: #333;/*サイトのデフォルトとなる文字の色を指定*/
}

/*見出しを全て太字で表示 + 文字色を黒に*/
h1,
h2,
h3,
h4,
h5,
h6 {
	/* font-weight: bold; */
	/* color: #000; */
	font-family: "fot-tsukuardgothic-std", sans-serif;
	font-weight: 400;
	font-style: normal;
}

h2 {
			position: relative;
			box-shadow: 6px 6px #333;
			outline: 5px solid #FBF2EB;
			border: 1px solid #333;
			color:#333;
			padding: 0 20px;
		}

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


/*コンテンツのサイズ指定*/
.header-inner,
.footer-inner,
.container {
	max-width: 1080px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
}

.container {
	padding-top: 2rem;
	padding-bottom: 4rem;
}

/*PCレイアウト*/
@media (min-width: 821px) {
	.two-columns {
		display: flex;
		flex-direction: row;

		gap: 2.5rem;
	}

	.two-columns .contents {
		flex: 1 1 auto;
	}

	.two-columns .sidebar {
		flex: 0 0 15.625rem;
	}
}

/*タブレットレイアウト*/
@media (max-width: 820px) {
	.two-columns .contents {
		margin-bottom: 4rem;
	}
}

/*スマホレイアウト*/
@media (max-width: 480px) {
	html {
		font-size: 15px;
	}
	.container {
		padding-top: 1.4rem;
	}
	#header .site-title{
		left: 2rem !important;
		top: 3rem !important;
	}
	#navbutton.navbutton {
		top: 2rem !important;
		right: 2rem !important;
	}


}
@media (max-width: 500px) {
	#header .site-title {
		position: absolute !important;
		left: 1rem !important;
		top: 3rem !important;
		z-index: 20 !important;
		margin: 0 !important;
	}
	#navbutton.navbutton {
		position: fixed;
		top: 2rem !important;
		right:1rem !important;
	}
}



.site-title a img {
	height: 3rem;
}

/*ヘッダー*/
.header {
	border-bottom: 1px solid #ddd;
}

.header-inner {
	position: relative;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.site-title {
	line-height: 1;
	display: inline-block;
}

.site-title a {
	display: block;
	text-decoration: none;
}

/*タイトルを画像にする場合*/
.site-title a img {
	display: block;
	width: auto;
	height: 3rem;
}

/*タイトルを文字列にする場合*/
.site-title a {
	font-weight: bold;
	height: 1.75rem;
	color: #000;
}

.header-nav li a {
	display: block;
	text-decoration: none;
}

/* 全体のサイズ */
		.background-container {
			position: relative;
			width: 100%;
			height: 1089px;
			margin-top:100px;
			/*overflow: hidden;*/   /* ← これが必須 */
		}
		/* 背景画像とサイズの指定 */
		.background-container:before {
			content: "";
			display: block;
			/* 背景画像の表示 */
			background-image: url('https://selp-harmony.com/main/wp-content/themes/harmony/images/Harmony_top.jpg');
			background-size: cover;
			/*background-position:70% center;*/
			/* 背景画像のサイズ */
			width: 90%;
			height: 100%;
			margin-left: auto;
		}

.overlay-text {
			/* テキストと背景のスタイル */
			color: #000;
			font-size: 24px;
			/* text-align: center; */
			padding: 20px;
			background-color: rgba(0, 0, 0, 0);
		}
		/* 4の位置 */
		.position-4 {
			position: absolute;
			top: 58%;
			left: 14%;
			transform: translateY(-160%);
		}

		.expand {
			margin-right: calc(50% - 50vw);
			margin-left: calc(50% - 50vw);
			padding-right: calc(50vw - 50%);
			padding-right: calc(50vw - 50%);
		}

/*フッター*/
.footer {
	background-color: #F6F2EF;
}

.footer-nav-wrap {
	/* padding: .75rem 1rem; */
	background-color: #f5f5f5;
}

.footer-nav ul {
	font-size: 0;
	text-align: center;
}

.footer-nav ul li {
	font-size: .875rem;
	display: inline-block;
	margin-right: 1rem;
	padding: .25rem 0;
}

.footer-nav ul li:last-child {
	margin-right: 0;
}

.footer-nav ul li a {
	text-decoration: none;
	color: #333;
}

.copyright {
	padding: 1rem;
	text-align: left;
}

.copyright p {
	font-size: .875rem;
	color: #333;
}


/*投稿*/
.article-head .article-info {
	margin-bottom: .5rem;
}

.article-head .article-info .article-cat {
	display: inline-block;
	vertical-align: middle;
}

.article-head .article-info .article-cat a {
	font-size: .875rem;
	line-height: 1;
	display: inline-block;
	margin-right: .5rem;
	padding: .375rem .5rem;
	text-decoration: none;
	color: #fff;
	background-color: #03162f;
}

.article-head .article-info .article-date {
	font-size: 1rem;
	display: inline-block;
	vertical-align: middle;
	color: #888;
}

.article-head .article-info .article-date i {
	font-size: 1.25rem;
	position: relative;
	top: .25rem;
}

.article-head h1 {
	font-size: 2.125rem;
	margin: 0 0 2rem;
	letter-spacing: 1px;
}

.article-head .article-img {
	margin-bottom: 2rem;
}

.article-head .article-img img {
	display: block;
}

.article-foot .article-tag {
	margin-bottom: 1rem;
	text-align: right;
}

.article-foot .article-tag ul {
	list-style: none;
}

.article-foot .article-tag ul li {
	font-size: .9rem;
	display: inline-block;
	margin-right: .5rem;
	vertical-align: middle;
}

.article-foot .article-tag ul li:last-child {
	margin-right: 0;
}

.article-foot .article-tag ul li a {
	line-height: 1;
	display: block;
	padding: .25rem .5rem;
	text-decoration: none;
	color: #000;
	border: 1px solid #000;
}

.article-foot .article-tag ul li a:hover {
	opacity: .6;
}

.article-foot .article-author {
	font-weight: 500;
	line-height: 1;
	text-align: right;
	vertical-align: middle;
}

.article-foot .article-author i {
	font-size: 1.25rem;
	position: relative;
	top: .25rem;
}

@media(max-width: 480px) {
	.article-head h1 {
		font-size: 1.75rem;
	}
}

/*エディタコンテンツ*/
.editor-content p code,
.editor-content p img,
.editor-content p iframe,
.editor-content p object,
.editor-content figure img,
.editor-content figure iframe,
.editor-content figure video,
.editor-content figure audio,
.editor-content pre code {
	margin-bottom: 0;
}

.editor-content th,
.editor-content td {
	border-color: #ddd;
}

.editor-content p,
.editor-content ul,
.editor-content ol,
.editor-content table,
.editor-content dl,
.editor-content blockquote,
.editor-content pre,
.editor-content code,
.editor-content img,
.editor-content picture img,
.editor-content figure,
.editor-content iframe,
.editor-content object,
.editor-content hr,
.editor-content video,
.editor-content audio {
	margin-bottom: 2.5em;
	letter-spacing: 1px;
}

.editor-content b,
.editor-content strong {
	font-weight: bold;
}

.editor-content a {
	text-decoration: underline;
}

.editor-content ul:not([class]) {
	padding-left: 1.25em;
	list-style: disc;
}

.editor-content ol:not([class]) {
	padding-left: 1.875em;
	list-style: decimal;
}

.editor-content table {
	width: 100%;
}
.editor-content table thead {
	border: none;
}
.editor-content table th,
.editor-content table td {
	box-sizing: border-box;
	padding: .625em;
	text-align: left;
	vertical-align: middle;
	border: 1px solid #ddd;
}
.editor-content img,
.editor-content iframe,
.editor-content object,
.editor-content video,
.editor-content audio {
	line-height: 1;
}
.editor-content figure {
	max-width: 100%;
}

.editor-content iframe,
.editor-content object {
	width: 100%;
}

.editor-content blockquote {
	line-height: 1.5;
	position: relative;
	padding: 3.125em 1.875em .625em;
	color: #555;
	background-color: #f1f4f4;
}

.editor-content blockquote::before {
	font-family: "Material Symbols Outlined";
	font-size: 1.875em;
	font-weight: 900;
	position: absolute;
	top: .3125em;
	left: .9375em;
	content: "\e244";
	color: #ccc;
}

.editor-content blockquote p,
.editor-content blockquote cite {
	margin-bottom: 1em;
}

.editor-content blockquote p cite {
	margin-bottom: 0;
}
.editor-content blockquote cite {
	font-size: .6125em;
	display: block;
	text-align: right;
}

.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5 {
	line-height: 1.4;
	margin: 3rem 0 2rem;
	letter-spacing: 1px;
}

.editor-content h2 {
	font-size: 1.875rem;
	padding: .75rem 0;
	border-bottom: solid 5px #03162f;
}

.editor-content h3 {
	font-size: 1.5rem;
	padding: 0 1rem;
	border-left: solid .375rem #415671;
	background: transparent;
}

.editor-content h4 {
	font-size: 1.25rem;
}

.editor-content h5 {
	font-size: 1.125rem;
}

@media (max-width: 480px) {
	.editor-content p,
	.editor-content ul,
	.editor-content ol,
	.editor-content table,
	.editor-content dl,
	.editor-content blockquote,
	.editor-content pre,
	.editor-content code,
	.editor-content img,
	.editor-content picture img,
	.editor-content figure,
	.editor-content iframe,
	.editor-content object,
	.editor-content hr,
	.editor-content video,
	.editor-content audio {
		margin-bottom: 1.5em;
	}

	.editor-content th,
	.editor-content td {
		padding: .625em;
	}

	.editor-content blockquote {
		padding: 2.5em 1.875em 1.875em;
	}

	.editor-content blockquote::before
	.editor-content blockquote::after {
		font-size: 1.25em;
	}

	.editor-content blockquote p,
	.editor-content blockquote cite {
		margin-bottom: .625em;
	}

	.editor-content h2,
	.editor-content h3,
	.editor-content h4,
	.editor-content h5 {
		margin: 2rem 0;
	}

	.editor-content h2 {
		font-size: 1.5rem;
	}
	.editor-content h3 {
		font-size: 1.375rem;
	}
	.editor-content h4 {
		font-size: 1.25rem;
	}
	.editor-content h5 {
		font-size: 1rem;
	}
	.editor-content h6 {
		font-size: .9375rem;
	}
}


@media (max-width: 332px) {
	.editor-content h2 {
		font-size: 1.25rem;
	}
	.editor-content h3 {
		font-size: 1.125rem;
	}
	.editor-content h4 {
		font-size: 1rem;
	}
	.editor-content h5 {
		font-size: .9375rem;
	}
	.editor-content h6 {
		font-size: .875rem;
	}
}

/*サイドバーウィジェット*/
.sidebar-wrapper {
	margin-bottom: 2rem;
}

.sidebar .sidebar-title,
.sidebar .wp-block-heading {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 1rem;
	padding: .375rem;
	letter-spacing: 1px;
	border: 0;
	border-bottom: .1875rem solid #1d2d43;
}

.sidebar a {
	text-decoration: none;
	color: #333;
}

.sidebar ul {
	list-style: none;
}

.sidebar li {
	border-bottom: 1px solid #ddd;
}

.sidebar li a {
	display: block;
	padding: .5rem;
}

.sidebar select {
	display: block;
	width: 100%;
	padding: .5rem;
	border: 1px solid #ddd;
}

/*ページタイトル*/
.page-title-wrap {
	background-color: #1d2d43;
}

.page-title-wrap .page-title {
	position: relative;
	max-width: 1080px;
	height: 22rem;
	margin: 0 auto 2rem;
	padding: 0 1.5rem;
}

.page-title-wrap .page-title .text-warp {
	position: absolute;
	top: 50%;
	left: 1.5rem;
	width: calc(100% - 3rem);
	transform: translateY(-50%);
	text-align: center;
}

.page-title-wrap .page-title .text-warp h1 {
	font-size: 3rem;
	font-weight: 400;
	letter-spacing: 1px;
	color: #fff;
}

@media(max-width: 820px) {
	.page-title-wrap .page-title {
		height: 20rem;
		margin-bottom: 1rem;
	}

	.page-title-wrap .page-title .text-warp h1 {
		font-size: 2.75rem;
	}
}

@media(max-width: 480px) {
	.page-title-wrap .page-title {
		height: 12rem;
		margin-bottom: 0;
	}

	.page-title-wrap .page-title .text-warp h1 {
		font-size: 2rem;
	}
}

/*記事アーカイブ*/
.article-list {
	display: grid;

	gap: 2rem;
	grid-template-columns: repeat(2, 1fr);
}

.article-list .article-item {
	position: relative;
	z-index: 1;
	border: 1px solid #ddd;
}

.article-list .article-item a {
	display: block;
	text-decoration: none;
	color: #333;
}

.article-list .article-item img {
	display: block;
	width: 100%;

	aspect-ratio: 3/2;
	object-fit: cover;
}

.article-list .article-item .text-wrap {
	padding: 1rem;
}

.article-list .article-item .article-cat {
	font-size: .875rem;
	line-height: 1;
	display: inline-block;
	margin-right: .5rem;
	padding: .25rem .5rem;
	vertical-align: middle;
	text-decoration: none;
	color: #fff;
	background-color: #03162f;
}

.article-list .article-item .article-date {
	font-size: .875rem;
	display: inline-block;
	vertical-align: middle;
	color: #888;
}

.article-list .article-item .article-date i {
	font-size: 1rem;
	position: relative;
	top: .1875rem;
	margin-right: .125rem;
}

.article-list .article-item .text-wrap h2 {
	font-size: 1rem;
	font-weight: 500;
	margin-top: .5rem;
}

@media(max-width: 480px) {
	.article-list {
		display: block;

		gap: none;
		grid-template-columns: none;
	}

	.article-list .article-item {
		margin-bottom: 2rem;
	}
}


/*ページネーション*/
.pagination {
	margin: 4rem 0;
	text-align: center;
}

.pagination ul {
	font-size: 0;
}

.pagination ul li {
	font-size: 1rem;
	display: inline-block;
	margin-right: .75rem;
}

.pagination ul li:last-child {
	margin-right: 0;
	border: 0;
}

.pagination ul li a,
.pagination ul li .current {
	font-weight: 600;
	line-height: 1;
	display: block;
	padding: .75rem .875rem;
	border: 1px solid #ddd;
}

.pagination ul li a {
	text-decoration: none;
	color: #555;
}

.pagination ul li .current {
	color: #fff;
	background-color: #1d2d43;
}

.pagination ul li .prev,
.pagination ul li .next {
	padding: .75rem .5rem;
	border: 0;
}

.pagination ul li i {
	font-size: 1rem;
	color: #1d2d43;
}

@media(max-width: 480px) {
	.pagination {
		margin: 3rem 0;
	}

	.pagination ul li a {
		padding: .5rem;
	}
}

/*home*/
.home-fv-wrap {
	margin-bottom: 2rem;
}

.home-fv-wrap img {
	display: block;
	width: 80%;
	/* height: min(31.25rem, 46.5vw); */
	height: auto;
	object-fit: cover;
}

@media(min-width: 1921px) {
	.home-fv-wrap img {
		height: auto;
	}
}

@media(min-width: 821px) {
	.home-article-list {
		grid-template-columns: repeat(3, 1fr);
	}
}






/* Hamburger minimal (no JS) */
#navbutton.navbutton {
	position: fixed;
	top: 2rem !important;
	right: 4rem;
	z-index: 10020;
	width: 56px;
	height: 56px;
	padding: 12px;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	color: #000;
}

#navbutton .navbutton__line {
	display: block;
	width: 34px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
}

#navbutton .navbutton__label {
	font-size: 0.7rem;
	letter-spacing: .12em;
}

/* === navbutton lines force (no !important) === */
#navbutton .navbutton__line{
	display:block;
	width:34px;
	height:2px;
	background: currentColor;
	border-radius:2px;
}

#navbutton{
	color:#000; /* 念のため */
}

#navbutton .navbutton__label{
	display: none;
}

/* ===== Header overlay menu ===== */
.header-nav-wrap{
	position: fixed;
	inset: 0;
	z-index: 10010;          /* navbutton(10020)より下でOK */
	background: rgba(255,255,255,0.96);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease;
}

.header-nav-wrap__inner{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px 24px 24px; /* 上はボタン避け */
}

/* メニュー開いた状態（bodyにクラス付ける） */
.is-nav-open .header-nav-wrap{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* メニューの見た目は適当に（必要なら調整） */
.header-nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
.header-nav li{
	margin: 14px 0;
}
.header-nav a{
	font-size: 1.2rem;
	text-decoration: none;
	color: #000;
}



/* ===== cards ===== */
.works-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 900px){
	.works-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
	.works-grid{ grid-template-columns: 1fr; }
}

.work-card{
	width: 100%;
	border: 1px solid #ddd;
	background: #fff;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.work-card__img{
	display:block;
}
.work-card__img img{
	width: 100%;
	height: auto;
	display:block;
}

.work-card__meta{
	display:block;
	text-align:center;
	padding: 22px 12px;
}

.work-card__title{
	display:block;
	font-size: 1.2em;
	color:#000;
}

.work-card__sub{
	display:block;
	margin-top: 6px;
	color:#aaa;
	font-size: .95em;
}

/* hover */
.work-card:hover{
	transform: translateY(-2px);
	transition: transform .15s ease;
}










/* ===== modal with fade ===== */
.work-modal{
	position: fixed;
	inset: 0;
	z-index: 99999;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition: opacity .22s ease, visibility .22s ease;
}

.work-modal.is-open{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.work-modal__overlay{
	position:absolute;
	inset:0;
	background: rgba(0,0,0,.45);
	opacity: 0;
	transition: opacity .22s ease;
}

.work-modal.is-open .work-modal__overlay{
	opacity: 1;
}

.work-modal__panel{
	position: relative;
	max-width: 720px;
	width: calc(100% - 32px);
	margin: 10vh auto;
	background: #fff;
	border-radius: 14px;
	padding: 22px 18px;

	transform: translateY(12px);
	opacity: 0;
	transition: transform .22s ease, opacity .22s ease;
}

.work-modal.is-open .work-modal__panel{
	transform: translateY(0);
	opacity: 1;
}







.work-modal__body{
	padding: 6px 6px 2px;
}

#workModal .work-modal__title{
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: .02em;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 1.2;
	text-align: center;
	box-shadow:none;
	outline:none;
}

.work-modal__section{
	margin: 18px 0;
}

.work-modal__heading{
	font-size: 1.05rem;
	margin: 0 0 10px;
	font-weight: 600;
}

.work-modal__list{
	margin: 0;
	padding: 0 0 0 12.2em;
	line-height: 1.7;
}

.work-modal__list li{
	margin: 6px 0;
}

.work-modal__badge{
	border: none;
	padding: 0;
	border-radius: 0;
}

.work-modal__footerline{
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding-top: 14px;
	border-top: 1px solid #eee;
}

.work-modal__metaLabel{
	color: #777;
	font-size: .9rem;
	min-width: 4em;
}

.work-modal__metaValue{
	font-size: 1rem;
}

/* モーダル本文：基本は中央揃え */
.work-modal__body{
	text-align: center;
}

/* 箇条書きだけ：中央に置きつつ左揃え */
.work-modal__list{
	display: inline-block;   /* 重要：横幅が中身にフィットする */
	text-align: left;
	margin: 0 auto;
	padding-left: 1.2em;     /* ポチの位置 */
}

/* リストの余白調整（見た目） */
.work-modal__list li{
	margin: 6px 0;
}


.work-modal__list{
	display: block;
	max-width: 520px;
	margin: 0 auto;
	text-align: left;
	padding-left: 12em; /* PCはこれでOK */
}

@media (max-width: 480px){
	.work-modal__list{
		padding-left: 4.0em; /* スマホは控えめに */
		max-width: 92%;      /* ついでに幅も柔軟に */
	}
}


.work-modal__days{
	margin: 18px auto 0;
	padding: 10px 14px;
	border-radius: 10px;

	background: #fff3a0; /* 黄色 */

	text-align: center;
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.work-modal__daysLabel{
	font-size: .95rem;
	font-weight: 600;
}

.work-modal__daysValue{
	font-size: 1rem;
}


.work-modal__actions{
	margin-top: 30px;
	display: flex;
	justify-content: center;
}

.work-modal__closeBtn{
	min-width: 160px;
	padding: 8px 10px;
	border-radius: 999px;
	border: 1px solid #ddd;
	background: #fff;
	cursor: pointer;
	font-size: 0.8rem;
}

.work-modal__closeBtn:hover{
	opacity: .8;
}










/* ===== Overlay menu : big circle expand ===== */
.header-nav-wrap{
	position: fixed;
	inset: 0;
	z-index: 10010;

	/* 背景：白+ちょい透過 */
	background: rgba(255,255,255,0.78);
	backdrop-filter: blur(10px);

	/* 右上(ボタン中心)からスタート */
	clip-path: circle(0 at calc(100% - 28px) 28px);
	-webkit-clip-path: circle(0 at calc(100% - 28px) 28px);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		clip-path .55s ease,
		opacity .25s ease,
		visibility .25s ease;
}

/* 開いた時：円を大きく（ここを増やす） */
.is-nav-open .header-nav-wrap{
	clip-path: circle(160vmax at calc(100% - 28px) 28px);
	-webkit-clip-path: circle(160vmax at calc(100% - 28px) 28px);
}


/* メニュー自体の見た目（必要なら） */
.header-nav-wrap .header-nav{
	text-align: center;
}

.header-nav-wrap .header-nav a{
	font-size: 1.2rem;
	letter-spacing: .06em;
	color: #111;
	text-decoration: none;
	display: inline-block;
	padding: 10px 14px;
}

/* 初期：見えない＆下にいる */
.header-nav-wrap .header-nav li{
	opacity: 0;
	transform: translateY(18px);
}

/* 円が広がった “あと” に出す：0.45s後から開始（円の時間に合わせる） */
.is-nav-open .header-nav-wrap .header-nav li{
	animation: menuPop .45s ease forwards;
	animation-delay: .45s; /* ←円の展開後に開始 */
}

/* ふぁんふぁん（順番に遅らせる） */
.is-nav-open .header-nav-wrap .header-nav li:nth-child(1){ animation-delay: .48s; }
.is-nav-open .header-nav-wrap .header-nav li:nth-child(2){ animation-delay: .54s; }
.is-nav-open .header-nav-wrap .header-nav li:nth-child(3){ animation-delay: .60s; }
.is-nav-open .header-nav-wrap .header-nav li:nth-child(4){ animation-delay: .66s; }
.is-nav-open .header-nav-wrap .header-nav li:nth-child(5){ animation-delay: .72s; }
.is-nav-open .header-nav-wrap .header-nav li:nth-child(6){ animation-delay: .78s; }
/* 足りん分は追加 */

@keyframes menuPop{
	0%   { opacity: 0; transform: translateY(18px); }
	70%  { opacity: 1; transform: translateY(-2px); } /* ちょい跳ね */
	100% { opacity: 1; transform: translateY(0); }
}

/* 閉じた時にアニメ残りでチラつかないように */
.header-nav-wrap{
	will-change: clip-path, opacity;
}





/* 線のアニメ用 */
#navbutton .navbutton__line{
	transform-origin: center;
	transition: transform .28s ease, opacity .18s ease;
}

/* 真ん中の線は消す */
.is-nav-open #navbutton .navbutton__line:nth-child(2){
	opacity: 0;
}

/* 上下を同じ位置で交差させる */
.is-nav-open #navbutton .navbutton__line:nth-child(1){
	transform: translateY(10px) rotate(45deg);
}

.is-nav-open #navbutton .navbutton__line:nth-child(3){
	transform: translateY(-10px) rotate(-45deg);
}



/* 固定＆回転はこっち */
.pagetop-wrap{
	position: fixed;
	right: calc(45px + env(safe-area-inset-right));
	bottom: calc(10% + env(safe-area-inset-bottom)); /* もっと上 */

	z-index: 10030;

	transform: rotate(90deg);
	transform-origin: right bottom;

	display: inline-flex;
	align-items: center;
	gap: 12px;

	color: #111;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, visibility .25s ease;
}

/* 追加：最初は隠す */
.pagetop-wrap{

}

/* 追加：表示状態 */
.pagetop-wrap.is-show{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* リンク部分（文字だけ押せる） */
.pagetop{
	text-decoration: none;
	color: inherit;
	padding: 10px 12px;
}

/* 線（押せない） */
.pagetop__line{
	display: block;
	width: 64px;
	height: 1px;
	background: currentColor;
	opacity: .7;

	pointer-events: none; /* 念のため */
}

.pagetop__text{
	font-size: 12px;
	letter-spacing: .12em;
	white-space: nowrap;
}




/*
* 1日の流れ
* */

.dayflow{
	display:flex;
	align-items:center;
	justify-content:center;           /* ✅中央寄せ */
	gap:0;
	flex-wrap: nowrap;                /* ✅基本は1列で */
	position:relative;

	width: min(100%, 980px);          /* ✅PCは中央に収まる */
	margin: 0 auto;                   /* ✅中央寄せ */
	padding: 0 16px;                  /* ✅スマホで端から端(少し余白) */
	box-sizing: border-box;
}

/* スマホは端から端で見せたい（必要なら高さが厳しいときだけ折り返し） */
@media (max-width: 640px){
	.dayflow{
		width: 100%;
		justify-content: center; /* ✅端から端に配置 */
		flex-wrap: nowrap;              /* ✅折り返さない */
	}
}

/* 点＋ラベルのブロック */
.flow-item{
	display:flex;
	align-items:center;
	position:relative;
	flex: 0 0 auto;
}

/* 線（右へ伸びる） */
.flow-item::after{
	content:"";
	height:3px;
	width: 140px;                     /* ✅基本の線の長さ */
	background:#53c0d5;
	opacity:.7;
	margin-left: 0px;                /* ✅点と線の間（少し） */

	transform-origin:left center;
	transform: scaleX(0);
	transition: transform .45s ease;
}

/* ✅スマホは幅に合わせて線を伸縮（端から端っぽくなる） */
@media (max-width: 640px){
	.flow-item::after{
		width: clamp(24px, 8vw, 72px);  /* 画面幅に応じて可変 */
		margin-left: 0px;
	}
}

/* ✅最初の間だけ狭くする（9:00→9:10） */
.flow-item.is-short::after{
	width: 70px;
}
@media (max-width: 640px){
	.flow-item.is-short::after{
		width: clamp(16px, 4vw, 40px);
	}
}

/* 最後は線なし */
.flow-item.is-end::after{
	display:none;
}

/* ●（○） */
.dot{
	--dot-size: 16px;
	width: var(--dot-size);
	height: var(--dot-size);
	border-radius: 999px;
	border: 2px solid #776656;
	background: transparent;
	flex: 0 0 auto;

	opacity: 0;
	transform: translateX(-10px);
	transition: opacity .35s ease, transform .35s ease;

	width: var(--dot-size);
	height: var(--dot-size); 
}
.dot--filled{ background:#776656; }

/* ラベル */
.label{
	position:absolute;
	font-size: 20px;
	letter-spacing:.06em;
	white-space:nowrap;
	line-height:1.2;

	left: calc(var(--dot-size) / 2);
	transform: translate(-50%, -10px);

	opacity:0;
	transition: opacity .35s ease, transform .35s ease;

	left: calc(var(--dot-size)/2);
}

/* 上下位置 */
.label--top{ bottom: 30px; }
.label--bottom{ top: 30px; }

/* スマホはさらに読みやすく */
@media (max-width: 640px){
	.label{
		font-size: 14px;
	}
	.label--top{ bottom: 28px; }
	.label--bottom{ top: 28px; }
}

/* 表示 */

.flow-item{ --dot-size: 16px; }

.flow-item.is-show .dot{
	opacity:1;
	transform: translateX(0);
}
.flow-item.is-show .label{
	opacity:1;
	transform: translate(-50%, 0);
	text-align:center;
}
.flow-item.is-show::after{
	transform: scaleX(1);
}

/* motion配慮 */
@media (prefers-reduced-motion: reduce){
	.dot, .label, .flow-item::after{ transition:none; transform:none; }
}


/*
*　支援体制
* */
.checklist{
	list-style: none;
	padding: 0;
	margin: 0 auto;          /* ✅中央寄せ */
	max-width: 700px;        /* ✅中央にまとまる幅（好みで調整） */
	width: 100%;
}

/* 文字 */
.checklist li{
	position: relative;
	padding-left: 42px;      /* ✅□ぶん余白ちょい増やす */
	margin: 14px 0;

	font-size: 18px;         /* ✅文字大きく */
	line-height: 1.6;

	opacity: 0;
	list-style:none;
	transform: translateY(10px);
	transition: opacity .35s ease, transform .35s ease;
}

/* ✅□（色：#53c0d5） */
.checklist li::before{
	content: "";
	position: absolute;
	left: 0;
	top: .25em;

	width: 22px;
	height: 22px;
	border: 3px solid #53c0d5;  /* ✅色 */
	border-radius: 4px;
	background: transparent;

	box-sizing: border-box;
}

/* ✅チェック（色：#53c0d5） */
.checklist li::after{
	content: "✓";
	position: absolute;
	left: 4px;
	top: .10em;

	font-size: 22px;
	line-height: 1;
	color: #756556;           /* ✅色 */

	opacity: 0;
	transform: scale(.6);
	transition: opacity .2s ease, transform .2s ease;
}

/* 表示 */
.checklist li.is-show{
	opacity: 1;
	transform: translateY(0);
}

/* チェック入る */
.checklist li.is-check::after{
	opacity: 1;
	transform: scale(1);
}

/* スマホ調整（端に寄りすぎんように） */
@media (max-width: 640px){
	.checklist{
		padding: 0 16px;
		max-width: 100%;
	}

	.checklist li{
		font-size: 17px;
	}
}




/*flowボタン*/
.button{
	display: flex;
	justify-content: center;
}

.bgleft{
	position: relative;
	display: inline-block;
	padding: 0px 22px;
	text-decoration: none;

	border: 1px solid #333;     /* ✅普段は灰色 */
	color: #fff;                /* ✅文字も灰色 */
	border-radius: 3px;
	background:#333;

	overflow: hidden;
	transition: color .25s ease, border-color .25s ease;
}

.bgleft span{
	position: relative;
	z-index: 3;
}

/* 背景（ホバーで青になる） */
.bgleft::before{
	content:'';
	position: absolute;
	inset: 0;
	z-index: 2;

	transform: scaleX(0);
	transform-origin: right center;
	background:#53c0d5;
	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1);
}

.bgleft:hover{
	color: #fff;
	border-color: #53c0d5;
}

.bgleft:hover::before{
	transform-origin: left center;
	transform: scaleX(1);
}

























/* =========================================================
Sub page editor blocks (scope: fixed-page + subeditor-content)
方向性：白/細線/余白しっかり/主張しすぎない
========================================================= */
.title_area {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 50px 0px 30px 0px;
}
.title_wrap {
	position: relative;
	display: inline-block; /* 中身サイズにフィット */
}
/* 背景（tltANim2：枠・背景のみ） */
.title_bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-top: none; /* 上の線を消す */
	border-left: none; /* 左の線を消す */
	background-color: #fff;
	z-index: 1;
	opacity: 0;
	animation: tltANim2 0.8s 0.7s ease-in-out forwards;
}
/* 前面（tltANim1：文字あり・枠あり） */
.title_front {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20px 10px 20px 10px; /* 上下10px / 左右15px */
	border: 1px solid #000;
	background-color: #fff;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	z-index: 2;
	opacity: 0;
	animation: tltANim1 0.5s 0.2s ease-in-out forwards;
}
.vertical_text {
	font-size: 1.2em;
}
/* アニメーション */
@keyframes tltANim1 {
	0% { opacity: 0; transform: translate(7px, 7px); }
	100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes tltANim2 {
	0% { opacity: 0; transform: translate(0, 0); }
	100% { opacity: 1; transform: translate(5px, 1px); }
}















/* メインコンテンツ プライバシーポリシー */
/*ページタイトル*/
.mainpage-title-wrap {
	background-color: #fff;
}

.mainpage-title-wrap .mainpage-title {
	position: relative;
	max-width: 1080px;
	height: 0rem;
	margin: 0 auto 6rem;
	padding: 0 1.5rem;
}

.mainpage-title-wrap .mainpage-title .text-warp {
	position: absolute;
	top: 50%;
	left: 1.5rem;
	width: calc(100% - 3rem);
	transform: translateY(-150%);
	text-align: left;
}

.mainpage-title-wrap .mainpage-title .text-warp h1 {
	font-size: 2rem;
	font-weight:bold;
	color: #000;
}

@media(max-width: 820px) {
	.mainpage-title-wrap .mainpage-title {
		height: 20rem;
		margin-bottom: 1rem;
	}

	.mainpage-title-wrap .mainpage-title .text-warp h1 {
		font-size: 2.75rem;
	}
}

@media(max-width: 480px) {
	.mainpage-title-wrap .mainpage-title {
		height: 12rem;
		margin-bottom: 0;
	}

	.mainpage-title-wrap .mainpage-title .text-warp h1 {
		font-size: 2rem;
	}
}

/*エディタコンテンツ*/
.maineditor-content p code,
.maineditor-content p img,
.maineditor-content p iframe,
.maineditor-content p object,
.maineditor-content figure img,
.maineditor-content figure iframe,
.maineditor-content figure video,
.maineditor-content figure audio,
.maineditor-content pre code {
	margin-bottom: 0px;
}
.maineditor-content p {
	padding-left:1.0rem;
	padding-top:0rem
}
.maineditor-content th,
.maineditor-content td {
	/*border-color: #ddd;
	border-bottom: 1px solid;*/
}

.maineditor-content p,
.maineditor-content ul,
.maineditor-content ol,
.maineditor-content table,
.maineditor-content dl,
.maineditor-content blockquote,
.maineditor-content pre,
.maineditor-content code,
.maineditor-content img,
.maineditor-content picture img,
.maineditor-content figure,
.maineditor-content iframe,
.maineditor-content object,
.maineditor-content hr,
.maineditor-content video,
.maineditor-content audio {
	margin-bottom: 2.5em;
	letter-spacing: 0px;
}

.maineditor-content b,
.maineditor-content strong {
	font-weight: bold;
}

.maineditor-content a {
	text-decoration: underline;
}

.maineditor-content ul:not([class]) {
	padding-left: 1.25em;
	list-style: disc;
}

.maineditor-content ol:not([class]) {
	padding-left: 1.875em;
	list-style: decimal;
}

.maineditor-content table {
	width: 100%;
	background-color:#fff;
	/*border:none;*/
	/*border-bottom: 1px solid;*/
}
.maineditor-content table thead {
	/*border:none;*/
}
.maineditor-content table th,
.maineditor-content table tr,
.maineditor-content table td {
	box-sizing: border-box;
	padding: .625em;
	text-align: left;
	vertical-align: middle;
	/*border:none;*/
	/*border-bottom: 1px solid;*/
}
.maineditor-content img,
.maineditor-content iframe,
.maineditor-content object,
.maineditor-content video,
.maineditor-content audio {
	line-height: 1;
}
.maineditor-content figure {
	max-width: 100%;
}

.maineditor-content iframe,
.maineditor-content object {
	width: 100%;
}

.maineditor-content blockquote {
	line-height: 1.5;
	position: relative;
	padding: 3.125em 1.875em .625em;
	color: #555;
	background-color: #f1f4f4;
}

.maineditor-content blockquote::before {
	font-family: "Material Symbols Outlined";
	font-size: 1.875em;
	font-weight: 900;
	position: absolute;
	top: .3125em;
	left: .9375em;
	content: "\e244";
	color: #ccc;
}

.maineditor-content blockquote p,
.maineditor-content blockquote cite {
	margin-bottom: 1em;
}

.maineditor-content blockquote p cite {
	margin-bottom: 0;
}
.maineditor-content blockquote cite {
	font-size: .6125em;
	display: block;
	text-align: right;
}

.maineditor-content h2,
.maineditor-content h3,
.maineditor-content h4,
.maineditor-content h5 {
	line-height: 1.4;
	margin: 3rem 0 2rem;
	letter-spacing: 1px;
}

.maineditor-content h2 {
	font-size: 1.2rem;
	padding: .75rem 0;
	color: #000;
	font-weight: bold;
	margin: 0px;
	padding: 0px 0px 20px 0px;
}

.maineditor-content h3 {
	font-size: 1.5rem;
	padding: 0 1rem;
	border-left: solid .375rem #415671;
	background: transparent;
}

.maineditor-content h4 {
	font-size: 1.25rem;
}

.maineditor-content h5 {
	font-size: 1.125rem;
}

@media (max-width: 480px) {
	.maineditor-content p,
	.maineditor-content ul,
	.maineditor-content ol,
	.maineditor-content table,
	.maineditor-content dl,
	.maineditor-content blockquote,
	.maineditor-content pre,
	.maineditor-content code,
	.maineditor-content img,
	.maineditor-content picture img,
	.maineditor-content figure,
	.maineditor-content iframe,
	.maineditor-content object,
	.maineditor-content hr,
	.maineditor-content video,
	.maineditor-content audio {
		margin-bottom: 1.5em;
	}

	.maineditor-content th,
	.maineditor-content td {
		padding: .625em;
	}

	.maineditor-content blockquote {
		padding: 2.5em 1.875em 1.875em;
	}

	.maineditor-content blockquote::before
	.maineditor-content blockquote::after {
		font-size: 1.25em;
	}

	.maineditor-content blockquote p,
	.maineditor-content blockquote cite {
		margin-bottom: .625em;
	}

	.maineditor-content h2,
	.maineditor-content h3,
	.maineditor-content h4,
	.maineditor-content h5 {
		margin: 2rem 0;
	}

	.maineditor-content h2 {
		font-size: 1.5rem;
	}
	.maineditor-content h3 {
		font-size: 1.375rem;
	}
	.maineditor-content h4 {
		font-size: 1.25rem;
	}
	.maineditor-content h5 {
		font-size: 1rem;
	}
	.maineditor-content h6 {
		font-size: .9375rem;
	}
}


@media (max-width: 332px) {
	.maineditor-content h2 {
		font-size: 1.25rem;
	}
	.maineditor-content h3 {
		font-size: 1.125rem;
	}
	.maineditor-content h4 {
		font-size: 1rem;
	}
	.maineditor-content h5 {
		font-size: .9375rem;
	}
	.maineditor-content h6 {
		font-size: .875rem;
	}
}



/*全体に関係する系*/

.wp-block-list{
	padding:0.1rem 0 2rem 3.0rem;
}


/* ===== Footer ===== */

.site-footer {
	margin-top: 0;
}

/* 上の写真：全面 */
.footer-hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* 白背景エリア */
.footer-main {
	background: #fff;
}

.footer-main__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 44px 20px;
	display: flex;
	gap: 40px;
	justify-content: space-between;
}

.footer-info {
	flex: 1 1 60%;
	line-height: 1.9;
	font-size: 14px;
	color: #222;
}

.footer-org {
	margin: 0 0 18px;
	font-weight: 600;
}

.footer-addr,
.footer-tel,
.footer-contact {
	margin: 0 0 16px;
}

.footer-info a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* サブメニュー：右側 横並び（footer.phpのクラスに合わせる） */
.footer-submenu{
	list-style: none;
	margin: 0;
	padding: 0;

	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.footer-submenu a{
	font-size: 12px;
	color: #333;
	text-decoration: none;
}

.footer-submenu a:hover{
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* 右側メニュー：縦並び */
.footer-nav {
	flex: 0 0 240px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 18px;
}

/* wp_nav_menu が吐く ul/li を右揃えに固定 */
.footer-nav .footer-menu {
	width: 100%;
	text-align: right;
}

.footer-nav .footer-menu li {
	width: 100%;
}

.footer-nav .footer-menu a {
	display: inline-block;
}



.footer-menu li {
	margin: 0 0 14px;
}

.footer-menu li:last-child {
	margin-bottom: 0;
}

.footer-menu a {
	color: #222;
	text-decoration: none;
	font-size: 13px;
	letter-spacing: 0.02em;
}

.footer-menu a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 下の薄ベージュ */
.footer-bottom {
	background: #f3ede3;
}

.footer-bottom__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.footer-copy {
	font-size: 12px;
	color: #333;
}

/* サブメニュー：右側 横並び */
.footer-mainmenu {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.footer-mainmenu a {
	font-size: 12px;
	color: #333;
	text-decoration: none;
}

.footer-mainmenu a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footer-menu,
.footer-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* レスポンシブ */
@media (max-width: 768px) {
	.footer-main__inner {
		flex-direction: column;
		gap: 24px;
	}

	.footer-nav {
		align-items: flex-start;
	}

	.footer-bottom__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}


/*エディタコンテンツ*/
.subeditor-content p{
	padding:10px 0px 15px 0px;
}
.subeditor-content th,
.subeditor-content td {
	border-color: #fff;
	border-bottom: 1px solid;
}














/* ==============================
固定ページ / ブロック共通（.maineditor-content 前提）
路線：白ベース / 黒1px / 余白多め / 角丸なし / 文字は黒
============================== */

/* 余白・線の共通変数っぽく（使わんでもOK） */
.maineditor-content{
	--line:#000;
	--soft:#f1f4f4;
	--paper:#fff;
	--gap:2.5em;
}

/* ==============================
画像（wp: image / gallery / cover）
============================== */

/* 画像の周りを「紙＋線」で統一 */
.maineditor-content .wp-block-image img,
.maineditor-content .wp-block-gallery img{
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 6px;
	box-sizing: border-box;
}

/* キャプション */
.maineditor-content figcaption{
	font-size: .85rem;
	color:#333;
	margin-top: .75em;
	letter-spacing: 0;
}

/* 画像の左右寄せが入っても崩れにくく */
.maineditor-content .wp-block-image{
	max-width: 100%;
}
.maineditor-content .wp-block-image .alignleft,
.maineditor-content .wp-block-image .alignright{
	margin-top: .5em;
}

/* cover：中の文字は黒ベースに（背景が画像なら白文字にしたくなるけど、路線優先） */
.maineditor-content .wp-block-cover{
	border: 1px solid var(--line);
	box-sizing: border-box;
}
.maineditor-content .wp-block-cover__inner-container{
	padding: 1.2rem 1.2rem;
}
.maineditor-content .wp-block-cover p{
	margin: 0;
	letter-spacing: 0;
}

/* ==============================
区切り線（wp:separator）
============================== */
.maineditor-content .wp-block-separator{
	border: none;
	border-top: 1px solid var(--line);
	margin: 3rem 0;
	opacity: 1;
}

/* ==============================
引用（wp:quote）※既存blockquoteと統一
============================== */
.maineditor-content .wp-block-quote{
	border-left: none;
	margin: 0 0 var(--gap);
	padding: 3.125em 1.875em .625em;
	background: var(--soft);
	position: relative;
}
.maineditor-content .wp-block-quote p{
	margin-bottom: 1em;
}
.maineditor-content .wp-block-quote cite{
	font-size: .6125em;
	display:block;
	text-align:right;
}

/* ==============================
ボタン（wp:buttons / wp:button）
「黒枠＋白背景」固定で、ホバーは少しだけ反応
============================== */
.maineditor-content .wp-block-buttons{
	gap: 12px;
}

.maineditor-content .wp-block-button__link{
	background: #fff !important;
	color: #000 !important;
	border: 1px solid var(--line);
	border-radius: 0; /* 角丸なし */
	padding: .85em 1.2em;
	text-decoration: none !important;
	line-height: 1.2;
	display: inline-block;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	box-shadow: none;
}

/* ちょい「ずれる」演出（タイトルのずれ感に合わせる） */
.maineditor-content .wp-block-button__link:hover{
	transform: translate(2px, 1px);
	background: #fff;
	box-shadow: 2px 1px 0 #000;
}

/* クリック時 */
.maineditor-content .wp-block-button__link:active{
	transform: translate(0,0);
	box-shadow: none;
}

/* ==============================
コード（wp:code / pre）
============================== */
.maineditor-content pre,
.maineditor-content .wp-block-code{
	border: 1px solid var(--line);
	background: #fff;
	padding: 1rem;
	overflow:auto;
	line-height: 1.6;
	letter-spacing: 0;
}

/* インラインコードは「薄い紙」 */
.maineditor-content :not(pre) > code{
	background: #f7f7f7;
	border: 1px solid #ddd;
	padding: .1em .35em;
	letter-spacing: 0;
}

/* ==============================
カラム（wp:columns / wp:column）
それぞれを「紙ブロック」化
============================== */
.maineditor-content .wp-block-columns{
	gap: 18px;
}
.maineditor-content .wp-block-column{
	background: #fff;
	border: 1px solid var(--line);
	padding: 1.1rem 1rem;
	box-sizing: border-box;
}

/* ==============================
メディア＆テキスト（wp:media-text）
============================== */
.maineditor-content .wp-block-media-text{
	border: 1px solid var(--line);
	background: #fff;
	padding: 12px;
	box-sizing: border-box;
}
.maineditor-content .wp-block-media-text__content{
	padding: 1rem 1rem;
}

/* ==============================
グループ / カバー以外の「囲い」系（wp:group）
何でも囲ったら同じ紙になるように
============================== */
.maineditor-content .wp-block-group{
	border: 1px solid var(--line);
	background: #fff;
	padding: 1.2rem 1.2rem;
	box-sizing: border-box;
}

/* グループの中の最初/最後の余白がダブらんように */
.maineditor-content .wp-block-group > *:first-child{
	margin-top: 0;
}
.maineditor-content .wp-block-group > *:last-child{
	margin-bottom: 0;
}

/* ==============================
目次（wp:table-of-contents / core/table-of-contents）
※WordPressバージョンでクラス差が出るので両対応
============================== */
.maineditor-content .wp-block-table-of-contents,
.maineditor-content nav.wp-block-table-of-contents{
	border: 1px solid var(--line);
	background: #fff;
	padding: 1rem 1.2rem;
}
.maineditor-content .wp-block-table-of-contents ol,
.maineditor-content nav.wp-block-table-of-contents ol{
	margin: 0;
	padding-left: 1.5em;
}

/* ==============================
埋め込み（YouTube等）/ iframe
============================== */
.maineditor-content .wp-block-embed{
	border: 1px solid var(--line);
	background: #fff;
	padding: 10px;
	box-sizing: border-box;
}
.maineditor-content .wp-block-embed__wrapper{
	margin: 0;
}

/* ==============================
見出し飾り（h2は既にあるので、h3を少し整える）
既存h3の「左線」路線は活かしつつ黒に寄せる案
============================== */
.maineditor-content h3{
	border-left-color: var(--line);
}

/* ==============================
レスポンシブ微調整
============================== */
@media (max-width: 768px){
	.maineditor-content .wp-block-column{
		padding: 1rem .9rem;
	}
	.maineditor-content .wp-block-group{
		padding: 1rem .9rem;
	}
}





.fixed-page .subeditor-content{
	color:#333;
	line-height:1.8;
}

/* 段落・リスト系（ベース） */
.fixed-page .subeditor-content p{
	padding: 10px 0 15px;
	margin: 0;
}

.fixed-page .subeditor-content ul,
.fixed-page .subeditor-content ol{
	margin: 0 0 1.8em;
	padding-left: 1.6em;
}

.fixed-page .subeditor-content li{
	margin: .4em 0;
}

/* 既に全体で .wp-block-list を触ってるので、
サブページは中だけ上書きして整える */
.fixed-page .subeditor-content .wp-block-list{
	padding: 0 0 0 1.6em;
}

/* リンク */
.fixed-page .subeditor-content a{
	text-decoration: underline;
	text-underline-offset: 3px;
	color: inherit;
}

/* =========================================================
Headings
※グローバルの h2 が強いのでサブ本文内は打ち消し
========================================================= */
.fixed-page .subeditor-content h2,
.fixed-page .subeditor-content h3,
.fixed-page .subeditor-content h4,
.fixed-page .subeditor-content h5,
.fixed-page .subeditor-content h6{
	margin: 2.2em 0 1em;
	letter-spacing: .04em;
}

.fixed-page .subeditor-content h2{
	padding: 0 0 .6em;
	font-size: 1.30rem;
	font-weight: 700;
	border-bottom: 1px solid #333;
	color:#333;
}

/* h3以降は“細線＋余白”で統一 */
.fixed-page .subeditor-content h3{
	font-size: 1.10rem;
	font-weight: 700;
	padding-left: .9em;
	border-left: 3px solid #333;
	color:#333;
}

.fixed-page .subeditor-content h4{
	font-size: 1.05rem;
	font-weight: 700;
	padding-left: .2em;
	border-left: 2px solid #ddd;
}

.fixed-page .subeditor-content h5{
	font-size: 1rem;
	font-weight: 700;
}

.fixed-page .subeditor-content h6{
	font-size: .95rem;
	font-weight: 700;
	color:#555;
}

/* =========================================================
Images / Figures
========================================================= */
.fixed-page .subeditor-content figure{
	margin: 0 0 2em;
}

.fixed-page .subeditor-content .wp-block-image img{
	display:block;
	width: 100%;
	height: auto;
}

.fixed-page .subeditor-content figcaption{
	margin-top: .6em;
	font-size: .85rem;
	color:#666;
	text-align: center;
}

/* 画像：角丸なしで“紙”っぽく。必要なら影だけ薄く */
.fixed-page .subeditor-content .wp-block-image,
.fixed-page .subeditor-content .wp-block-media-text__media{
	border: 1px solid #eee;
	background:#fff;
}

/* =========================================================
Gallery
========================================================= */
.fixed-page .subeditor-content .wp-block-gallery{
	margin: 0 0 2em;
	gap: 12px;
}

.fixed-page .subeditor-content .wp-block-gallery .blocks-gallery-item img{
	display:block;
	width:100%;
	height:auto;
}

/* =========================================================
Buttons
========================================================= */
.fixed-page .subeditor-content .wp-block-buttons{
	margin: 1.8em 0 2.2em;
}

.fixed-page .subeditor-content .wp-block-button__link{
	border: 1px solid #111;
	background:#111;
	color:#fff;
	padding: .8em 1.4em;
	border-radius: 0;          /* 今のテイストに合わせて角丸なし */
	font-size: .95rem;
	text-decoration: none;
}

.fixed-page .subeditor-content .wp-block-button__link:hover{
	opacity: .85;
}

/* アウトラインボタン */
.fixed-page .subeditor-content .is-style-outline .wp-block-button__link{
	background: transparent;
	color:#111;
}

.fixed-page .subeditor-content .is-style-outline .wp-block-button__link:hover{
	background:#111;
	color:#fff;
}

/* =========================================================
Quote / Pullquote
========================================================= */
.fixed-page .subeditor-content .wp-block-quote{
	margin: 2em 0;
	padding: 1.4em 1.2em;
	border-left: 3px solid #111;
	background: #fafafa;
}

.fixed-page .subeditor-content .wp-block-quote p{
	padding: 0;
}

.fixed-page .subeditor-content .wp-block-quote cite{
	display:block;
	margin-top: .8em;
	font-size: .85rem;
	color:#666;
	text-align: right;
}

.fixed-page .subeditor-content .wp-block-pullquote{
	margin: 2em 0;
	padding: 1.6em 1.2em;
	border: 1px solid #111;
	background:#fff;
}

.fixed-page .subeditor-content .wp-block-pullquote blockquote{
	margin: 0;
}

.fixed-page .subeditor-content .wp-block-pullquote p{
	padding: 0;
	font-size: 1.05rem;
}

/* =========================================================
Separator
========================================================= */
.fixed-page .subeditor-content .wp-block-separator{
	margin: 2.2em auto;
	border: 0;
	border-top: 1px solid #ddd;
	max-width: 320px;
}

/* =========================================================
Table
========================================================= */
.fixed-page .subeditor-content .wp-block-table{
	margin: 0 0 2.2em;
	overflow-x: auto;
}

.fixed-page .subeditor-content table{
	width:100%;
	background:#fff;
	border-collapse: collapse;
}

.fixed-page .subeditor-content th,
.fixed-page .subeditor-content td{
	border-bottom: 1px solid #eee; /* 既存の border-bottom を整理 */
	padding: .8em .9em;
	text-align: left;
	vertical-align: top;
}

.fixed-page .subeditor-content thead th{
	border-bottom: 1px solid #111;
	font-weight: 700;
}

/* =========================================================
Columns
========================================================= */
.fixed-page .subeditor-content .wp-block-columns{
	margin: 2em 0;
	gap: 24px;
}

@media (max-width: 781px){
	.fixed-page .subeditor-content .wp-block-columns{
		gap: 16px;
	}
}

/* =========================================================
Media & Text
========================================================= */
.fixed-page .subeditor-content .wp-block-media-text{
	margin: 2em 0;
	gap: 24px;
}

.fixed-page .subeditor-content .wp-block-media-text__content{
	padding: 0;
}

/* =========================================================
Group / Cover
========================================================= */
.fixed-page .subeditor-content .wp-block-group{
	margin: 2em 0;
}

.fixed-page .subeditor-content .wp-block-group.is-style-default{
	padding: 1.4em 1.2em;
	border: 1px solid #eee;
	background:#fff;
}

.fixed-page .subeditor-content .wp-block-cover{
	margin: 2em 0;
	border: 1px solid #eee;
}

/* カバー内の文字が読めるように最低限 */
.fixed-page .subeditor-content .wp-block-cover__inner-container{
	padding: 2em 1.2em;
}

.fixed-page .subeditor-content .wp-block-cover p{
	padding: 0;
}

/* =========================================================
File block
========================================================= */
.fixed-page .subeditor-content .wp-block-file{
	margin: 1.8em 0;
	padding: 1.2em;
	border: 1px solid #eee;
	background: #fff;
}

.fixed-page .subeditor-content .wp-block-file__button{
	border-radius: 0;
	border: 1px solid #111;
	background:#111;
	color:#fff;
	padding: .55em .9em;
}

/* =========================================================
Embed / iframe
========================================================= */
.fixed-page .subeditor-content .wp-block-embed{
	margin: 2em 0;
}

.fixed-page .subeditor-content iframe{
	max-width: 100%;
}

/* =========================================================
Spacing (last element)
========================================================= */
.fixed-page .subeditor-content > *:last-child{
	margin-bottom: 0;
}




/* =========================================================
Subpage List Style（中央揃え）
========================================================= */

/* ul ベース */
.fixed-page .subeditor-content ul{
	margin: 0 0 2em;
	padding-left: 0;         /* ← markerじゃないので0 */
	list-style: none;        /* ← marker消す */
}

/* li */
.fixed-page .subeditor-content ul > li{
	position: relative;
	margin: .55em 0;
	padding-left: 1.6em;     /* ← ●ぶんの余白 */
	line-height: 1.8;
}

/* ✅ 中央揃えの丸（疑似マーカー） */
.fixed-page .subeditor-content ul > li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0.9em;              /* ← ここがポイント */
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: #00C1D6;
}

/* ---------------------------------------------------------
✅ 箇条書き内の箇条書き（2段目）
--------------------------------------------------------- */
.fixed-page .subeditor-content ul ul{
	margin-top: .6em;
	margin-bottom: .8em;
	padding-left: 0;
}

.fixed-page .subeditor-content ul ul > li{
	padding-left: 1.5em;
}

.fixed-page .subeditor-content ul ul > li::before{
	width: 7px;
	height: 7px;
	background: transparent;
	border: 2px solid #00C1D6; /* 丸抜き */
	top: 0.9em;
	transform: translateY(-50%);
}




.flow-arrow--line{
	position: relative;
	height: 34px;
	width: 100%;
	max-width: 220px;
	margin: 26px auto;
}

/* ✅ 縦の●●● */
.flow-arrow--line::before{
	content:"";
	position:absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);

	width: 4px;                 /* ●の横幅 */
	height: 100%;

	background: radial-gradient(circle, #00C1D6 10%, transparent 56%)
		center top / 4px 10px repeat-y;

	opacity: .75;
}

/* ▼はそのまま */
.flow-arrow--line::after{
	content:"";
	position:absolute;
	left: 50%;
	bottom: -2px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 10px solid #00C1D6;
	opacity: .9;
}






/* =========================
Access layout
========================= */
.access-section{
	margin: 0 auto;
	padding: 1.5rem 0 3.5rem;
}

.access-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}

@media (max-width: 820px){
	.access-grid{
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* card */
.access-card{
	border: 1px solid #eee;
	background: #fff;
	padding: 22px 18px 18px;
}

.access-card__head{
	border-bottom: 1px solid #eee;
	padding-bottom: 14px;
	margin-bottom: 14px;
}

.access-card__label{
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: .12em;
	color: #aaa;
}

.access-card__title{
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.3;

	/* 既存のh2装飾が戻ってきても事故らんように最小限ガード */
	box-shadow: none;
	outline: none;
	border: 0;
	background: transparent;
	padding: 0;
}

.access-card__addr,
.access-card__tel{
	margin: 0;
	color: #555;
	font-size: .95rem;
	line-height: 1.7;
}

/* 段落1：営業時間 */
.access-card__info{
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #fafafa;
	border: 1px solid #eee;
	line-height: 1.8;
}

.access-card__infoTitle{
	font-weight: 700;
	color: #333;
}

/* 段落2：Map */
.access-card__map{
	margin: 0;
	border: 1px solid #eee;
	background: #fff;
	overflow: hidden; /* iframe角を揃える */
}

.access-card__map iframe{
	display: block;
	width: 100%;
	height: 320px;
}

@media (max-width: 480px){
	.access-card__map iframe{
		height: 280px;
	}
}

/* actions */
.access-card__actions{
	margin-top: 14px;
	display: flex;
	justify-content: center;
}

.access-btn{
	display: inline-block;
	padding: 10px 14px;
	border: 1px solid #111;
	background: #111;
	color: #fff;
	text-decoration: none;
	font-size: .9rem;
}

.access-btn:hover{
	opacity: .85;
}





/* 開いてない時もDOM上は存在させて、透明＆クリック不可にする */
.h-modal{
	position: fixed;
	inset: 0;
	z-index: 9999;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition: opacity .18s ease, visibility .18s ease;
}

/* overlayもふわっと */
.h-modal__overlay{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.6);
	opacity: 0;
	transition: opacity .18s ease;
}

/* パネルは少し下から上がってくる */
.h-modal__panel{
	position: relative;
	max-width: 900px;
	margin: 6vh auto;
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	max-height: 88vh;
	overflow: auto;

	transform: translateY(12px);
	opacity: 0;
	transition: transform .22s ease, opacity .22s ease;
}

/* OPEN時 */
.h-modal.is-open{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.h-modal.is-open .h-modal__overlay{
	opacity: 1;
}

.h-modal.is-open .h-modal__panel{
	transform: translateY(0);
	opacity: 1;
}

/* スクロールロック */
.h-modal--locked { overflow: hidden; }

/* 閉じるボタン位置はお好みで */
.h-modal__close{
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
}


.h-modal-link{
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;

	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.h-modal-link:hover{
	opacity: .75;
}








/*
*　名刺価格表
*/

.h-price__title{
	margin: 0 0 12px;
	font-size: 1.25rem;
	line-height: 1.3;
}

.h-price__note{
	margin: 0 0 16px;
	font-size: .95rem;
	opacity: .85;
}

.h-price__tableWrap{
	overflow:auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 12px;
}

.h-price__table{
	width: 100%;
	border-collapse: collapse;
	min-width: 720px; /* スマホで横スクロールできるように */
	background: #fff;
}

.h-price__table th,
.h-price__table td{
	padding: 12px 14px;
	border-bottom: 1px solid rgba(0,0,0,.08);
	text-align: center;
	white-space: nowrap;
}

.h-price__table thead th{
	position: sticky;
	top: 0;
	background: #fff;
	border-bottom: 1px solid rgba(0,0,0,.12);
}

.h-price__table tbody th{
	text-align: left;
}

.h-price__section th{
	text-align: left !important;
	font-weight: 700;
	background: rgba(0,0,0,.03);
}

.h-price__list{
	margin: 16px 0 0;
	padding: 0;
	border-top: 1px solid rgba(0,0,0,.12);
}

.h-price__row{
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0,0,0,.08);
}

.h-price__row dt{
	font-weight: 600;
}

.h-price__row dd{
	margin: 0;
}

.h-price__muted{
	display: inline-block;
	margin-left: .4em;
	opacity: .75;
}

@media (max-width: 520px){
	.h-price__row{
		grid-template-columns: 1fr;
		gap: 6px;
	}
}
.h-price__subTitle{
	margin: 22px 0 10px;
	font-size: 1.05rem;
	line-height: 1.3;
}

.h-price__table--simple{
	min-width: 0; /* こっちは横スクロール不要 */
}

.h-price__table--simple th{
	text-align: left;
	width: 38%;
	white-space: normal;
}

.h-price__table--simple td{
	text-align: left;
	white-space: normal;
}


/*
* 　404
* */
.error-404 {
	text-align: center;
	padding: 80px 20px;
	color: #333;
}

.error-404__image {
	max-width: 900px;
	width: 100%;
	height: auto;
	margin: 0 auto 100px;
	display: block;
}

.error-404__title {
	font-size: 1.1rem;
	margin-bottom: 8px;
	letter-spacing: 0.05em;
}

.error-404__text {
	font-size: 0.9rem;
	color: #666;
	margin-bottom: 32px;
}

.error-404__link {
	display: inline-block;
	font-size: 0.85rem;
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #333;
	padding-bottom: 2px;
	transition: opacity 0.2s;
	margin-bottom:100px;
}

.error-404__link:hover {
	opacity: 0.6;
}

		    /* トップページの2重の横長の浮き上がってくるタイトル。開始 */
    /* 親コンテナ：これがないとズレた枠が外にはみ出して見えなくなります */
		.fade-slide-wrapper {
			position: relative;
			display: inline-block;
			padding-right: 5px;
			padding-bottom: 0px;
			width: 100%;
		}

		/* 影の部分 */
		.fade-slide-shadow {
			position: absolute;
			top: 5px;
			left: 0px;
			width: 100%;
			height: 100%;
			border-right: 1px solid #333;
			border-bottom: 1px solid #333;
			z-index: 1;
			opacity: 0;
			pointer-events: none;
		}

		/* メインテキスト */
		.fade-slide-main {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 0px 15px;
			border: 1px solid #333;
			color: #333;
			writing-mode: horizontal-tb;
			z-index: 2;
			opacity: 0;
		}

		/* スクロールで表示されたときのアニメーション */
		.fade-slide-shadow.in-view {
			animation: fadeSlideShadowAnim 0.9s 0.7s ease-in-out forwards;
		}

		.fade-slide-main.in-view {
			animation: fadeSlideMainAnim 0.6s 0.2s ease-in-out forwards;
		}

		/* アニメーションキー */
		@keyframes fadeSlideShadowAnim {
			0% { opacity: 0; transform: translate(0,0); }
			100% { opacity: 1; transform: translate(0,0); }
		}

		@keyframes fadeSlideMainAnim {
			0% { opacity: 0; transform: translateY(20px); }
			100% { opacity: 1; transform: translateY(0); }
		}
    /* トップページの2重の横長の浮き上がってくるタイトル。終了 */
		
		/* ===== section heading ===== */
		.work-section{
			width: 100%;
			padding-bottom: 12rem;
			display: block;
		}

		.work-heading{
			margin: 0 auto;
			width: 56px;
			padding: 100px 15px;
		}
		.work-heading__sub{
			color:#aaa;
			margin: 0;
		}
		.work-heading__title{
			font-size: 1.5em;
			margin: 0;
		}

		/* ===== cards grid ===== */
		.box-parent{
			width: 100%;
			max-width: 1280px;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.box-child{
			width: 40%;
			height: auto;
			display: flex;
			flex-direction: column;
			border-radius: 20px;
			padding-bottom: 50px;
			cursor: pointer;
		}

		@media screen and (max-width: 1360px){
			.box-parent{ width: 90%; max-width: initial; }
		}
		@media screen and (max-width: 1280px){
			.box-child{ width: 49%; }
		}
		@media screen and (max-width: 680px){
			.box-child{ width: 100%; }
			.box-child:nth-of-type(n+2){ margin-top: 30px; }
		}

		/* image */
		.box-img{
			width: 100%;
			position: relative;
		}
		.box-img::after{
			content:"";
			display:block;
			width:100%;
			padding-top:100%;
		}
		.box-img img{
			position:absolute;
			inset:0;
			width:100%;
			height:100%;
			object-fit: cover;
			display:block;
		}

		/* caption (inline style削除) */
		.box-caption{
			text-align:center;
			padding: 30px;
		}
		.box-caption__jp{
			font-size: 1.2em;
			margin: 0;
		}
		.box-caption__en{
			color:#aaa;
		}

		/* ===== modal ===== */
		.work-modal{
			position: fixed;
			inset: 0;
			z-index: 99999;

			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition: opacity .22s ease, visibility .22s ease;
		}
		.work-modal.is-open{
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		.work-modal__overlay{
			position:absolute;
			inset:0;
			background: rgba(0,0,0,.45);
			opacity: 0;
			transition: opacity .22s ease;
		}
		.work-modal.is-open .work-modal__overlay{
			opacity: 1;
		}

		.work-modal__panel{
			position: relative;
			max-width: 720px;
			width: calc(100% - 32px);
			margin: 10vh auto;
			background: #fff;
			border-radius: 14px;
			padding: 22px 18px;
			box-sizing: border-box;

			transform: translateY(12px);
			opacity: 0;
			transition: transform .22s ease, opacity .22s ease;
		}
		.work-modal.is-open .work-modal__panel{
			transform: translateY(0);
			opacity: 1;
		}

		/* ✅ 右上の× */
		.work-modal__closeIcon{
			position: absolute;
			top: 8px;
			right: 8px;

			/* 当たり判定 */
			width: 64px;
			height: 64px;

			border: 0;
			background: transparent;
			cursor: pointer;

			display: flex;
			align-items: center;
			justify-content: center;

			font-size: 26px;
			line-height: 1;
			padding: 0;

			-webkit-tap-highlight-color: transparent;

			/* モーダル内で埋もれないように */
			z-index: 5;
		}

		/* 見た目の丸だけ描く */
		.work-modal__closeIcon::before{
			content:"";
			position: absolute;
			inset: 10px;                 /* 丸サイズ調整 */
			border-radius: 999px;
			border: 1px solid #eee;
			background: #fff;
		}

		/* ×を丸の上に出す */
		.work-modal__closeIcon{
			color: #111;
		}
		.work-modal__closeIcon > span{
			position: relative;
			z-index: 1;
		}

		.work-modal__closeIcon:hover{ opacity: .85; }
		.work-modal__closeIcon:active{ transform: scale(.97); }

		.work-modal__closeIcon::before{
			pointer-events: none;
		}

		.work-modal__closeIcon > span{
			pointer-events: none;
		}

		.work-modal__closeIcon::before{
			pointer-events: none;
		}


		.work-modal__closeIcon:hover{
			opacity: .8;
		}

		.work-modal__body{
			padding: 6px 6px 2px;
			text-align: center;
		}

		#workModal .work-modal__title{
			font-size: 1.8rem;
			font-weight: 700;
			letter-spacing: .02em;
			margin: 0 0 14px;
			padding: 0;
			border: 0;
			background: transparent;
			line-height: 1.2;
			text-align: center;
			box-shadow: none;
			outline: none;
		}

		.work-modal__section{
			margin: 18px 0;
		}
		.work-modal__heading{
			font-size: 1.05rem;
			margin: 0 0 10px;
			font-weight: 600;
		}

		/* list */
		.work-modal__list{
			display: block;
			max-width: 520px;
			margin: 0 auto;
			text-align: left;
			padding-left: 1.2em;
			line-height: 1.7;
		}
		.work-modal__list li{
			margin: 6px 0;
		}

		.work-modal__badge{
			border: none;
			padding: 0;
			border-radius: 0;
			margin: 0 0 10px;
		}

		.work-modal__days{
			margin: 18px auto 0;
			padding: 10px 14px;
			border-radius: 10px;
			background: #fff3a0;
			display: inline-flex;
			gap: 10px;
			align-items: center;
			justify-content: center;
		}
		.work-modal__daysLabel{
			font-size: .95rem;
			font-weight: 600;
		}
		.work-modal__daysValue{
			font-size: 1rem;
		}

		.work-modal__cta{
			margin-top: 18px;
			display: flex;
			justify-content: center;
		}

		.work-modal__ctaBtn{
			display: inline-block;
			min-width: 220px;
			padding: 10px 14px;
			border-radius: 999px;
			border: 1px solid #111;
			background: #111;
			color: #fff;
			text-decoration: none;
			font-size: .9rem;
			text-align: center;
		}

		.work-modal__ctaBtn:hover{
			opacity: .85;
		}
		
		#workModalCta[hidden] { display: none !important; }