@charset "utf-8";

/*
Theme Name: minato-monodukuri2026
Theme URI:
Description: 第11回 港区ものづくり・商業観光フェア「みつかるみらい MINATO」
Version: 1.0.0
Author: 港区ものづくり・商業観光フェア実行委員会
Text Domain: monodukuri2026
*/

/* ==========================================================================
   Base
   ========================================================================== */
:root {
	--green: #18ae67;
	--green2: #1cae66;
	--green-dark: #016935;
	--green-light: #e3f9e9;
	--orange: #eaa242;
	--gray: #707070;
	--label: #5f5e5e;
	--header-h: 60px;
}

html {
	scroll-behavior: auto;
}

body {
	position: relative;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-feature-settings: "palt";
	color: #000;
	background: #fff;
	padding-top: var(--header-h);
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: opacity .3s;
}

a:hover {
	opacity: .75;
}

button {
	font: inherit;
	cursor: pointer;
}

.center {
	text-align: center;
}

.hide {
	display: none;
}

.container {
	width: 90%;
	max-width: 946px;
	margin: 0 auto;
}

.title_img {
	text-align: center;
	line-height: 1;
}

.title_txt {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	color: #1a1311;
}

/* 共通ボタン（緑・影付き） */
.btn {
	text-align: center;
}

.btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	max-width: 100%;
	height: 56px;
	border-radius: 34px;
	background: var(--green);
	box-shadow: 4px 6px 0 var(--green-dark);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .05em;
}

.btn a:hover {
	opacity: 1;
	transform: translate(2px, 3px);
	box-shadow: 2px 3px 0 var(--green-dark);
}

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

	:root {
		--header-h: 76px;
	}

	.title_txt {
		font-size: 20px;
		margin-top: 20px;
	}

	.btn a {
		width: 378px;
		height: 67px;
		font-size: 21px;
	}

}

/* ==========================================================================
   Header
   ========================================================================== */
#top-head {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: var(--header-h);
	background: #fff;
	border-bottom: 1px solid var(--green2);
}

.admin-bar #top-head {
	top: 46px;
}

#top-head .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 0 16px;
}

#top-head .logo {
	width: 220px;
	line-height: 1;
}

#top-head .logo img {
	width: 100%;
}

#nav-toggle {
	position: relative;
	z-index: 110;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: none;
}

#nav-toggle span {
	position: absolute;
	left: 8px;
	width: 24px;
	height: 2px;
	background: var(--green-dark);
	transition: .3s;
}

#nav-toggle span:nth-child(1) { top: 12px; }
#nav-toggle span:nth-child(2) { top: 19px; }
#nav-toggle span:nth-child(3) { top: 26px; }

.nav-open #nav-toggle span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-open #nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open #nav-toggle span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

#global-nav {
	position: fixed;
	top: var(--header-h);
	right: 0;
	width: 100%;
	height: calc(100vh - var(--header-h));
	height: calc(100dvh - var(--header-h));
	background: rgba(255, 255, 255, .97);
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	transition: .3s;
}

.nav-open #global-nav {
	visibility: visible;
	opacity: 1;
}

#global-nav ul {
	padding: 24px 8%;
}

#global-nav li {
	border-bottom: 1px solid #d9efe2;
}

#global-nav li a {
	display: block;
	padding: 18px 8px;
	color: var(--green-dark);
	font-size: 15px;
	font-weight: 700;
}

@media screen and (min-width: 1024px) {

	#top-head .inner {
		padding: 0 5.35%;
	}

	#top-head .logo {
		width: 293px;
	}

	#nav-toggle {
		display: none;
	}

	#global-nav {
		position: static;
		width: auto;
		height: auto;
		background: none;
		overflow: visible;
		visibility: visible;
		opacity: 1;
	}

	#global-nav ul {
		display: flex;
		gap: 0 min(2.2vw, 30px);
		padding: 0;
	}

	#global-nav li {
		border: none;
	}

	#global-nav li a {
		padding: 8px 0;
		font-size: 15px;
		font-weight: 500;
		letter-spacing: .02em;
		white-space: nowrap;
	}

	#global-nav li.current-menu-item a {
		color: var(--green);
	}

}

@media screen and (min-width: 1024px) and (max-width: 1180px) {

	#top-head .logo {
		width: 230px;
	}

	#global-nav li a {
		font-size: 14px;
	}

}

@media screen and (min-width: 783px) {

	.admin-bar #top-head {
		top: 32px;
	}

}

/* ==========================================================================
   Top : Main visual
   ========================================================================== */
#main_img {
	position: relative;
	z-index: 1;
}

#main_img .main_col {
	position: relative;
	max-width: 1366px;
	margin: 0 auto;
	padding: 5% 0 7%;
}

#main_img .badge {
	position: absolute;
	top: 3%;
	left: 3%;
	z-index: 2;
	width: 21%;
	max-width: 211px;
}

#main_img .visual {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	transform: translateX(-50%);
	background: url(img/top/fv_bg.png) no-repeat 51.8% 43.6% / 153.7% auto;
	opacity: .49;
	pointer-events: none;
}

#main_img .logo {
	position: relative;
	z-index: 1;
	width: 76%;
	margin: 12% auto 0;
}

#main_img .info {
	position: relative;
	z-index: 1;
	width: 96%;
	margin: 6% auto 0;
}

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

	#main_img .main_col {
		aspect-ratio: 1366 / 689;
		padding: 0;
	}

	#main_img .badge {
		top: 2.32%;
		left: 12.74%;
		width: 15.45%;
	}

	#main_img .visual {
		top: 2.6%;
		left: 20.5%;
		width: 61.05%;
		transform: none;
	}

	#main_img .logo {
		position: absolute;
		top: 7.55%;
		left: 28.18%;
		width: 43.63%;
		margin: 0;
	}

	#main_img .info {
		position: absolute;
		top: 59.94%;
		left: 21.08%;
		width: 57.9%;
		margin: 0;
	}

}

/* ==========================================================================
   Top : NEWS
   ========================================================================== */
#news {
	position: relative;
	z-index: 2;
	padding: 48px 0 56px;
	background: rgba(24, 174, 103, .7);
}

#news .container {
	max-width: 1046px;
}

#news .news_head .title_en {
	color: #fff;
}

#news .news_head .title_txt {
	color: #fff;
}

#news .news_col {
	margin-top: 28px;
	background: #fff;
	border: 1px solid var(--green2);
	border-radius: 3px;
	padding: 6px 12px 6px 20px;
}

#news .news_list {
	max-height: 229px;
	overflow-y: auto;
	padding-right: 16px;
	scrollbar-width: thin;
	scrollbar-color: var(--green2) #e0ffd8;
}

#news .news_list::-webkit-scrollbar {
	width: 6px;
}

#news .news_list::-webkit-scrollbar-track {
	background: #e0ffd8;
}

#news .news_list::-webkit-scrollbar-thumb {
	background: var(--green2);
}

.news_set a,
.news_archive a {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 4px 0;
	padding: 16px 0;
	color: var(--gray);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}

.news_set + .news_set,
.news_archive li + li {
	border-top: 1px solid #eaeaea;
}

.news_date {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	letter-spacing: .02em;
}

.news_title {
	flex: 0 0 100%;
	min-width: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.news_none {
	padding: 24px 0;
	color: var(--gray);
	text-align: center;
}

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

	.news_set a,
	.news_archive a {
		flex-wrap: nowrap;
		font-size: 16px;
		line-height: 1.5;
	}

	.news_title {
		flex: 1;
	}

	.news_date {
		width: 139px;
		padding-right: 24px;
		line-height: 1.5;
	}

	.news_date::after {
		content: "";
		position: absolute;
		top: .8em;
		right: 4px;
		width: 15px;
		border-top: 1px dotted #0283d6;
	}

}

@media screen and (min-width: 1024px) {

	#news {
		padding: 101px 0 88px;
	}

	#news .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	#news .news_head {
		width: 267px;
		margin-top: 20px;
	}


	#news .news_head .title_txt {
		margin-top: 8px;
	}

	#news .news_col {
		width: 705px;
		margin-top: 0;
		padding: 6px 8px 6px 28px;
	}

}

/* ==========================================================================
   Top : CONTENTS
   ========================================================================== */
#contents {
	position: relative;
	z-index: 2;
	padding: 48px 0 44px;
	background: #fff;
}

#contents .container {
	max-width: 1126px;
}


#contents .contents_col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	gap: 16px 12px;
	margin: 24px 0 28px;
}

#contents .contents_col a {
	display: block;
	transition: transform .3s, opacity .3s;
}

#contents .contents_col a:hover {
	opacity: 1;
	transform: translateY(-4px);
}

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

	#contents {
		padding: 59px 0 44px;
	}


	#contents .contents_col {
		grid-template-columns: repeat(4, 1fr);
		gap: 0 2.4%;
		margin: 28px 0 32px;
	}

}

/* ==========================================================================
   Top : EVENT
   ========================================================================== */
#event {
	position: relative;
	z-index: 1;
	margin-top: -5px;
	padding: 48px 0 56px;
	background: #e8fceb url(img/top/bg_event.png) no-repeat center top / cover;
}

#event .event_frame {
	position: relative;
	padding: 56px 5% 48px;
	border: 3px solid #1cae65;
	border-top: none;
}

/* 上辺の罫線（タイトル部分を空ける） */
#event .event_frame::before,
#event .event_frame::after {
	content: "";
	position: absolute;
	top: 0;
	width: calc(50% - 115px);
	border-top: 3px solid #1cae65;
}

#event .event_frame::before {
	left: 0;
}

#event .event_frame::after {
	right: 0;
}

#event .title_en {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

#event .title_txt {
	margin-top: 0;
	color: var(--green);
}

/* 四隅の歯車 */
#event .event_frame {
	background:
		url(img/top/ico_event-bg.svg) no-repeat left 2px top 5px / 34px auto,
		url(img/top/ico_event-bg.svg) no-repeat right 2px top 5px / 34px auto,
		url(img/top/ico_event-bg.svg) no-repeat left 2px bottom 2px / 34px auto,
		url(img/top/ico_event-bg.svg) no-repeat right 2px bottom 2px / 34px auto;
}

#event .event_col {
	margin-top: 32px;
}

#event .event_txt_col {
	display: flex;
	min-height: 37px;
}

#event .event_txt_col + .event_txt_col {
	margin-top: 16px;
}

#event .event_txt_col dt {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 104px;
	padding: 0 4px 0 22px;
	border-radius: 10px 0 0 10px;
	background: var(--green) url(img/top/ico_event-white.svg) no-repeat left 4px center / 18px auto;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

#event .event_txt_col dd {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 6px 12px 6px 14px;
	border-radius: 0 19px 19px 0;
	background: #fff;
	color: var(--green-dark);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

#event .map {
	margin-top: 32px;
	border-radius: 0 0 20px 20px;
	background: #fff;
	overflow: hidden;
}

#event .map iframe {
	display: block;
	width: 100%;
	height: 236px;
}

#event .map_col {
	padding: 20px 6%;
	color: var(--green-dark);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

#event .map_col p + p {
	margin-top: 8px;
}

#event .contact {
	margin-top: 22px;
	padding: 22px 16px;
	border-radius: 20px;
	background: #fff;
	color: var(--green-dark);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
}

#event .btn {
	margin-top: 32px;
}

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

	#event {
		padding: 77px 0 66px;
	}

	#event .container {
		max-width: 893px;
	}

	#event .event_frame {
		padding: 70px 89px 57px;
		background-size: 51px auto, 51px auto, 51px auto, 51px auto;
		background-position: left 2px top 2px, right 2px top 2px, left 2px bottom 0, right 2px bottom 0;
	}

	#event .event_frame::before,
	#event .event_frame::after {
		width: calc(50% - 208px);
	}


	#event .event_col {
		margin-top: 40px;
	}

	#event .event_txt_col + .event_txt_col {
		margin-top: 33px;
	}

	#event .event_txt_col dt {
		width: 157px;
		padding: 0 0 0 6px;
		background-size: 22px auto;
		background-position: left 8px center;
		font-size: 19px;
		letter-spacing: .02em;
	}

	#event .event_txt_col dd {
		padding: 4px 16px 4px 36px;
		font-size: 17px;
	}

	#event .map {
		margin-top: 34px;
	}

	#event .map_col {
		padding: 23px 40px 27px 94px;
		font-size: 16px;
		line-height: 1.5;
	}

	#event .map_col p + p {
		margin-top: 8px;
	}

	#event .contact {
		padding: 21px 16px;
		font-size: 16px;
	}

	#event .btn {
		margin-top: 34px;
	}

}

/* ==========================================================================
   Top : Instagram
   ========================================================================== */
#instagram {
	position: relative;
	z-index: 1;
	padding: 40px 0 48px;
	background: #fff;
}

#instagram .container {
	max-width: 822px;
}

#instagram .title_img img {
	width: 180px;
}

#instagram .insta_col {
	margin-top: 24px;
}

#instagram .insta_col:empty {
	display: none;
}

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

	#instagram {
		padding: 33px 0 48px;
	}

	#instagram .title_img img {
		width: 210px;
	}

	#instagram .insta_col {
		margin-top: 30px;
	}

}

/* ==========================================================================
   Footer
   ========================================================================== */
/* ※z-indexを付けると固定ボタン（.side__btn / .scroll__btn）がNEWS等の下に隠れるため付けない */
#footer {
	position: relative;
}

#footer_cont {
	padding: 30px 5% 38px;
	background: var(--green-light);
	border-bottom: 5px solid var(--green2);
	color: var(--green);
	font-weight: 700;
	text-align: center;
}

#f_logo {
	width: 160px;
	margin: 0 auto;
}

#footer .f_title {
	margin-top: 32px;
	font-size: 16px;
	line-height: 1.5;
}

#footer .f_txt_col {
	max-width: 886px;
	margin: 12px auto 0;
	padding: 14px 16px;
	border-radius: 20px;
	background: #fff;
	font-size: 13px;
	line-height: 1.8;
}

#footer .f_title + .f_txt_col {
	margin-top: 16px;
}

#copy {
	padding: 22px 16px 26px;
	color: var(--green2);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	background: #fff;
}

.side__btn {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 90;
	width: 40px;
	transform: translateY(-50%);
}

.scroll__btn {
	display: none;
	position: fixed;
	right: 16px;
	bottom: 20px;
	z-index: 90;
	width: 56px;
}

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

	#f_logo {
		width: 195px;
	}

	#footer .f_title {
		margin-top: 44px;
		font-size: 22px;
	}

	#footer .f_txt_col {
		padding: 16px;
		font-size: 18px;
		line-height: 33px;
	}

	#footer .f_title + .f_txt_col {
		margin-top: 21px;
	}

	#copy {
		padding: 26px 16px 28px;
		font-size: 14px;
	}

	.side__btn {
		top: 370px;
		width: 54px;
		transform: none;
	}

	.scroll__btn {
		right: 53px;
		bottom: 40px;
		width: 74px;
	}

}

/* ==========================================================================
   下層ページ共通
   ========================================================================== */
.page_head {
	padding: 40px 5% 0;
	text-align: center;
}

.page_head .title_en + .title_txt {
	margin-top: 8px;
}

.page_title {
	color: var(--green);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
}

.page_body {
	padding: 40px 0 80px;
}

.page_body .container {
	max-width: 880px;
}

.news_archive {
	border-top: 1px solid #eaeaea;
	border-bottom: 1px solid #eaeaea;
}

.news_archive a {
	padding: 20px 8px;
}

.news_archive .news_title {
	-webkit-line-clamp: unset;
}

.pager {
	margin-top: 40px;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--green2);
	border-radius: 20px;
	color: var(--green2);
	font-size: 14px;
	font-weight: 700;
}

.pagination .current {
	background: var(--green2);
	color: #fff;
}

.pagination .dots {
	border: none;
}

.post_head {
	padding-bottom: 16px;
	border-bottom: 2px solid var(--green2);
}

.post_head .news_date {
	color: var(--gray);
	font-size: 14px;
	font-weight: 500;
}

.post_title {
	margin-top: 6px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.post_thumb {
	margin-top: 32px;
	text-align: center;
}

.post_content {
	margin-top: 32px;
	font-size: 15px;
	line-height: 1.9;
	word-break: break-word;
}

.post_content > * + * {
	margin-top: 1.2em;
}

.post_content h2 {
	padding: 8px 14px;
	border-left: 5px solid var(--green2);
	background: var(--green-light);
	font-size: 19px;
	font-weight: 700;
}

.post_content h3 {
	padding-bottom: 6px;
	border-bottom: 1px solid var(--green2);
	font-size: 17px;
	font-weight: 700;
}

.post_content a {
	color: #0283d6;
	text-decoration: underline;
}

.post_content ul {
	padding-left: 1.5em;
	list-style: disc;
}

.post_content ol {
	padding-left: 1.5em;
	list-style: decimal;
}

.post_content strong {
	font-weight: 700;
}

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

.post_content .alignright {
	float: right;
	margin-left: 1em;
}

.post_content .alignleft {
	float: left;
	margin-right: 1em;
}

.post_content::after {
	content: "";
	display: block;
	clear: both;
}

.post_nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	margin-top: 56px;
	font-size: 14px;
	font-weight: 700;
}

.post_nav .prev a::before { content: "‹ "; }
.post_nav .next { text-align: right; }
.post_nav .next a::after { content: " ›"; }

.post_nav a {
	color: var(--green2);
}

.post_nav .list a {
	display: inline-block;
	padding: 10px 28px;
	border: 1px solid var(--green2);
	border-radius: 20px;
}

.btn_back {
	max-width: 381px;
	margin: 40px auto 0;
}

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

	.page_head {
		padding-top: 49px;
	}

	.post_title {
		font-size: 24px;
	}

	.post_content {
		font-size: 16px;
	}

}

/* ==========================================================================
   Contents page
   ========================================================================== */
.page_contents .page_head {
	padding-bottom: 0;
}

.contents_sec {
	position: relative;
	padding: 1px 0 140px;
}

.contents_sec .container {
	max-width: 946px;
}

/* 背景：淡い緑（#ecf5eb）と白を交互に配置。
   各セクションの見出しイラストは上端から-93px（SPは-70px）ずらし、境界線上に乗せる */
.sec_stage {
	margin-top: 100px;
	background: #ecf5eb;
}

.sec_workshop {
	padding-top: 1px;
	background: #fff;
}

.sec_kikaku {
	padding-top: 1px;
	background: #ecf5eb;
}

.sec_doji {
	padding-top: 1px;
	background: #fff;
}

/* 同時開催企画（白）の後に続くため、トップページに戻るボタンの帯は淡い緑に */
.page_contents .back_top {
	background: #ecf5eb;
}

.contents_sec_title {
	width: 220px;
	margin: 0 auto;
	line-height: 1;
}

.contents_sec_title img {
	display: block;
	width: 100%;
}

.sec_stage .contents_sec_title,
.sec_workshop .contents_sec_title,
.sec_kikaku .contents_sec_title,
.sec_doji .contents_sec_title {
	margin-top: -70px;
}

.contents_sec_lead {
	margin-top: 24px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.8;
	text-align: center;
}

.lead_slash {
	font-size: 15px;
	font-weight: 700;
}

.lead_slash span {
	display: inline-block;
	position: relative;
	padding: 0 28px;
}

.lead_slash span::before,
.lead_slash span::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 18px;
	border-top: 1px solid currentColor;
}

.lead_slash span::before {
	left: 0;
	transform: rotate(55deg);
}

.lead_slash span::after {
	right: 0;
	transform: rotate(-55deg);
}

.contents_col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-top: 32px;
}

.contents_set {
	display: flex;
	flex-direction: column;
	padding: 20px 18px 13px;
	border: 1px solid var(--green2);
	border-radius: 20px;
	background: #fff;
}

.sec_workshop .contents_set {
	border-color: var(--orange);
}

.contents_set_image img {
	display: block;
	width: 100%;
	aspect-ratio: 262 / 178;
	object-fit: cover;
}

.contents_set_ico {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 6px;
	margin-top: 10px;
}

.contents_set_ico .ico {
	min-width: 35px;
	padding: 3px 7px 2px;
	border-radius: 2px;
	background: var(--green2);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.contents_set_ico .ico.gray {
	background: var(--gray);
}

.contents_set_title {
	margin-top: 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.sec_kikaku .contents_set_title,
.sec_doji .contents_set_title {
	color: var(--green2);
}

.contents_set_time {
	margin-top: 8px;
	padding: 3px 8px;
	border-radius: 15px;
	background: var(--green);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	text-align: center;
}

.contents_set_about {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: .02em;
}

.contents_set_infos {
	margin: 12px 0 0;
}

.contents_set_info {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
}

.contents_set_info + .contents_set_info {
	margin-top: 2px;
}

.contents_set_info .ico {
	flex-shrink: 0;
	width: 25px;
	margin-top: .45em;
	padding: 1px 0;
	background: var(--label);
	color: #fff;
	font-size: 8px;
	line-height: 1.1;
	text-align: center;
}

.contents_set_link {
	margin-top: auto;
	padding-top: 16px;
	text-align: center;
}

.contents_set_link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 159px;
	height: 39px;
	border: 1px solid var(--green2);
	border-radius: 20px;
	background: #fff;
	color: var(--green2);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .06em;
	transition: .3s;
}

.contents_set_link a:hover {
	opacity: 1;
	background: var(--green2);
	color: #fff;
}

/* スペシャルコンテンツ：丸写真 */
.sec_stage .contents_set {
	margin-top: 200px;
	padding-top: 0;
}

.sec_stage .contents_set_image {
	width: 220px;
	margin: -200px auto 0;
}

.sec_stage .contents_set_image img {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

.sec_stage .contents_set_title {
	font-size: 17px;
	line-height: 22px;
}

.sec_stage .contents_set_about {
	font-size: 14px;
	line-height: 24px;
}

.sec_stage .contents_col {
	margin-top: 8px;
}

.back_top {
	padding: 80px 5% 80px;
	background: #fff;
	text-align: center;
}

.back_top a {
	display: inline-block;
	width: 300px;
}

@media screen and (min-width: 600px) {

	.contents_col {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
	}

}

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

	.contents_sec {
		padding-bottom: 160px;
	}

	.sec_stage {
		margin-top: 130px;
	}


	.contents_sec_title {
		width: 280px;
	}

	.sec_stage .contents_sec_title,
	.sec_workshop .contents_sec_title,
	.sec_kikaku .contents_sec_title,
	.sec_doji .contents_sec_title {
		margin-top: -93px;
	}

	.contents_sec_lead {
		margin-top: 32px;
		font-size: 14px;
	}

	.lead_slash {
		margin-top: 36px;
		font-size: 18px;
	}

	.lead_slash span {
		padding: 0 36px;
	}

	.sec_stage .contents_set_image {
		width: 244px;
		margin-top: -225px;
	}

	.sec_stage .contents_set {
		margin-top: 225px;
	}

	.sec_stage .contents_col {
		margin-top: 8px;
		row-gap: 0;
	}

	.back_top {
		padding: 100px 5% 100px;
	}

	.back_top a {
		width: 381px;
	}

}

@media screen and (min-width: 1024px) {

	.contents_col {
		grid-template-columns: repeat(3, 299px);
		justify-content: space-between;
		gap: 34px 0;
	}

	.sec_stage .contents_col {
		row-gap: 35px;
	}

	.sec_stage .contents_set {
		margin-top: 225px;
	}

	.sec_stage .contents_col .contents_set:nth-child(n+4) {
		margin-top: 225px;
	}

	.contents_set_about {
		font-size: 15px;
		line-height: 26px;
	}

	.sec_stage .contents_set_about {
		font-size: 14px;
		line-height: 24px;
	}

}

/* ==========================================================================
   Popup（modaal）
   ========================================================================== */
.modaal-overlay {
	background: #000 !important;
}

.modaal-inner-wrapper {
	padding: 60px 12px;
}

.modaal-container {
	max-width: 908px;
	border-radius: 0;
	box-shadow: none;
}

.modaal-content-container {
	padding: 40px 5% 40px;
}

.modaal-close {
	position: fixed;
	top: 12px;
	right: 12px;
	background: transparent;
}

.modaal-close::before,
.modaal-close::after {
	width: 5px;
	height: 36px;
	top: 8px;
	left: 22px;
	border-radius: 2px;
	background: #fff;
}

.modaal-close:hover,
.modaal-close:focus {
	background: transparent;
}

.modaal-close:hover::before,
.modaal-close:hover::after,
.modaal-close:focus::before,
.modaal-close:focus::after {
	background: #fff;
	opacity: .7;
}

.popup_col {
	max-width: 682px;
	margin: 0 auto;
	color: #000;
}

.popup_photo {
	text-align: center;
}

.popup_photo img {
	width: 100%;
	max-width: 660px;
	aspect-ratio: 660 / 379;
	object-fit: cover;
}

.popup_title {
	margin-top: 16px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.popup_txt {
	margin-top: 24px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.75;
}

.popup_info {
	margin-top: 32px;
}

.contents_set_btn {
	margin: 32px 0 0;
	text-align: center;
}

.contents_set_btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	max-width: 100%;
	height: 56px;
	border-radius: 34px;
	background: var(--green);
	box-shadow: 4px 6px 0 var(--green-dark);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .05em;
}

.popup_table {
	margin-top: 56px;
	border-top: 2px solid #c9c9c9;
}

.popup_table + .contents_set_btn {
	margin-top: 40px;
}

.popup_table > div {
	display: flex;
	border-bottom: 2px solid #c9c9c9;
}

.popup_table dt {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	width: 96px;
	padding: 12px 12px;
	background: #e2f8ed;
	font-size: 13px;
	font-weight: 500;
}

.popup_table dd {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 48px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

/* dd の中身を1つにまとめる（文章・改行・リンクが flex で横並びにならないように） */
.popup_table_val {
	min-width: 0;
	width: 100%;
}

.popup_table_val a {
	color: #0283d6;
	text-decoration: underline;
	overflow-wrap: anywhere;
}

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

	.modaal-inner-wrapper {
		padding: 80px 25px;
	}

	.modaal-content-container {
		padding: 57px 30px 57px;
	}

	.modaal-close {
		top: 20px;
		right: 20px;
	}

	.popup_title {
		font-size: 24px;
	}

	.popup_txt {
		margin-top: 32px;
	}

	.popup_info {
		margin-top: 40px;
	}

	.contents_set_btn {
		margin-top: 30px;
	}

	.contents_set_btn a {
		width: 378px;
		height: 67px;
		font-size: 21px;
	}

	.popup_table {
		margin-top: 60px;
	}

	.popup_table dt {
		width: 134px;
		padding: 0 0 0 31px;
		font-size: 14px;
	}

	.popup_table dd {
		padding: 12px 20px 12px 38px;
		font-size: 14px;
	}

}

/* デザインに合わせNEWSブロックをやや右寄せ */
@media screen and (min-width: 1200px) {

	#news .container {
		position: relative;
		left: 34px;
	}

}

.post_head .news_date::after {
	display: none;
}

/* ==========================================================================
   Contents page : 追加分
   ========================================================================== */
.contents_sec_tt {
	margin-top: 20px;
	text-align: center;
}

.contents_sec_tt a {
	display: inline-block;
	padding: 8px 24px;
	border: 1px solid var(--green2);
	border-radius: 20px;
	background: #fff;
	color: var(--green2);
	font-size: 14px;
	font-weight: 700;
}

.contents_sec_tt a::after {
	content: " ›";
}

.contents_set_btn.is-disabled span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	max-width: 100%;
	height: 56px;
	border-radius: 34px;
	background: #c9c9c9;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

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

	.contents_set_btn.is-disabled span {
		width: 378px;
		height: 67px;
		font-size: 18px;
	}

}

/* ==========================================================================
   Timetable
   ========================================================================== */
.title_en {
	color: var(--green);
	font-family: "Josefin Sans", sans-serif;
	text-align: center;
	font-size: 44px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
}

.page_timetable .page_head {
	padding-bottom: 0;
}

.tt_sec {
	padding: 32px 0 60px;
}

.tt_container {
	width: 94%;
	max-width: 1240px;
	margin: 0 auto;
}

.tt_lead {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.8;
	text-align: center;
}

.tt_legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 500;
}

.tt_legend li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.tt_legend li::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: var(--c);
}

.tt_scroll_note {
	margin-top: 16px;
	color: var(--gray);
	font-size: 12px;
	text-align: right;
}

.tt_scroll_note::after {
	content: " →";
}

.tt_scroll {
	margin-top: 6px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #ddd;
	background: #fff;
}

/* 各色 */
.c_stage    { --c: #18ae67; }
.c_workshop { --c: #e8952d; }
.c_kikaku   { --c: #52c18d; }
.c_doji     { --c: #e88aa3; }
.c_library  { --c: #4a9fd8; }

.tt_grid {
	--time-w: 52px;
	--slot-h: 9px;
	display: grid;
	grid-template-columns: var(--time-w) repeat(var(--cols), minmax(104px, 1fr));
	grid-template-rows: auto auto repeat(var(--slots), var(--slot-h)) 12px;
	min-width: calc(var(--time-w) + var(--cols) * 104px);
	position: relative;
}

.tt_corner {
	grid-column: 1;
	position: sticky;
	left: 0;
	z-index: 5;
	background: #fff;
	border-bottom: 2px solid #ccc;
}

.tt_head {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 10px 4px;
	border-left: 1px solid #fff;
	background: var(--c);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

.tt_head span {
	font-size: 10px;
	font-weight: 500;
	opacity: .9;
}

.tt_head_group {
	padding: 8px 4px;
	border-bottom: 1px solid rgba(255, 255, 255, .6);
}

.tt_head_sub {
	padding: 8px 4px;
	background: color-mix(in srgb, var(--c) 18%, #fff);
	color: #6a3d00;
	font-size: 12px;
	border-left: 1px solid #fff;
	border-bottom: 2px solid var(--c);
}

.tt_colbg {
	border-left: 1px solid #e6e6e6;
}

.tt_colbg.is-even {
	background: #fafafa;
}

.tt_line {
	grid-column: 2 / -1;
	border-top: 1px dashed #e3e3e3;
	pointer-events: none;
	z-index: 1;
}

.tt_line.is-hour {
	border-top: 1px solid #cfcfcf;
}

.tt_time {
	grid-column: 1;
	position: sticky;
	left: 0;
	z-index: 4;
	padding-right: 6px;
	background: #fff;
	border-top: 1px solid #cfcfcf;
	color: #555;
	font-size: 12px;
	font-weight: 700;
	text-align: right;
	line-height: 1;
	padding-top: 3px;
}

.tt_block {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 1px 4px;
	padding: 4px 6px;
	border-radius: 4px;
	background: var(--c);
	color: #fff;
	overflow: hidden;
	line-height: 1.3;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
	transition: transform .2s, box-shadow .2s;
}

a.tt_block:hover {
	opacity: 1;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

.tt_block_time {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}

.tt_block_title {
	font-size: 12px;
	font-weight: 700;
}

.tt_block_note {
	font-size: 11px;
	font-weight: 500;
}

.tt_block.is-short {
	justify-content: center;
	padding: 1px 6px;
}

.tt_block.is-allday {
	justify-content: flex-start;
	align-items: center;
	padding-top: 16px;
	text-align: center;
	background: color-mix(in srgb, var(--c) 22%, #fff);
	border: 2px solid var(--c);
	color: #333;
}

.tt_block.is-allday .tt_block_title {
	order: -1;
	margin-bottom: 4px;
	font-size: 12px;
}

.tt_note {
	margin-top: 12px;
	color: var(--gray);
	font-size: 12px;
}

.page_timetable .back_top {
	margin-top: 0;
	padding-top: 60px;
}

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

	.title_en {
		font-size: 64px;
	}

	.tt_lead {
		font-size: 15px;
	}

	.tt_grid {
		--time-w: 60px;
		--slot-h: 10px;
	}

}

@media screen and (min-width: 1240px) {

	.tt_scroll_note {
		display: none;
	}

}

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

	/* 横スクロール時も体験コーナーの見出しが見えるよう左寄せ */
	.tt_head_group {
		align-items: flex-start;
		padding-left: 16px;
	}

	.tt_block.is-allday .tt_block_title {
		font-size: 12px;
	}

}

/* ヘッダー：Instagramアイコン */
.nav_insta img {
	width: 36px;
	vertical-align: middle;
}

.nav_insta_txt {
	margin-left: 10px;
	vertical-align: middle;
}

@media screen and (min-width: 1024px) {

	#global-nav ul {
		align-items: center;
	}

	#global-nav li.nav_insta a {
		display: block;
		padding: 0;
		line-height: 1;
	}

	.nav_insta img {
		width: 36px;
	}

	.nav_insta_txt {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

}

/* TOP：英字見出し（Josefin Sans）直下の日本語サブ見出しの間隔 */
#news .title_en + .title_txt,
#contents .title_en + .title_txt {
	margin-top: 8px;
}

#event .title_txt {
	margin-top: 4px;
}

/* SPのみ改行 */
.sp_only {
	display: inline;
}

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

	.sp_only {
		display: none;
	}

}

/* ==========================================================================
   コンテンツ・タイムテーブル非公開中の表示（functions.php の MM26_CONTENTS_OPEN）
   ========================================================================== */
.nav_coming {
	display: block;
	padding: 14px 8px;
	color: var(--green-dark);
	font-size: 15px;
	font-weight: 700;
	cursor: default;
}

.nav_coming_txt {
	display: block;
	margin-top: 2px;
	color: #9a9a9a;
	font-family: "Josefin Sans", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
}

#contents .contents_col.is-closed img {
	pointer-events: none;
}

.btn.is-coming span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	max-width: 100%;
	height: 56px;
	border-radius: 34px;
	background: #c9c9c9;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .04em;
}

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

	.btn.is-coming span {
		width: 378px;
		height: 67px;
		font-size: 18px;
	}

}

@media screen and (min-width: 1024px) {

	.nav_coming {
		position: relative;
		padding: 8px 0;
		font-weight: 500;
		letter-spacing: .02em;
		white-space: nowrap;
		text-align: center;
	}

	/* 他のメニュー項目と文字の高さをそろえるため、coming soon は下にはみ出させる */
	.nav_coming_txt {
		position: absolute;
		top: 100%;
		left: 50%;
		margin-top: -4px;
		transform: translateX(-50%);
		font-size: 10px;
	}

}

/* 非公開ページのプレビュー表示（管理者のみ） */
.mm26_preview_notice {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	padding: 8px 16px;
	background: rgba(51, 51, 51, .92);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

/* タイムテーブル：同じ列で時間が重なる回は横に並べる */
.tt_block[style*="--lanes"] {
	justify-self: start;
	width: calc((100% - 8px) / var(--lanes) - 2px);
	margin-left: calc(4px + (100% - 8px) / var(--lanes) * var(--lane));
	margin-right: 0;
	padding-left: 4px;
	padding-right: 4px;
}

.tt_block[style*="--lanes"] .tt_block_time {
	white-space: normal;
}

/* タイムテーブル非公開中の表示（コンテンツページ） */
.contents_sec_tt.is-coming span {
	display: inline-block;
	padding: 8px 24px;
	border: 1px solid #c9c9c9;
	border-radius: 20px;
	background: #fff;
	color: #9a9a9a;
	font-size: 14px;
	font-weight: 700;
	cursor: default;
}