@charset "utf-8";
/* 参考サイト(shinjiro.info)の実装構造を踏襲:
   全画面固定の写真(.bgbox) + 幅 400px の白いスクロール列(#site-content) + 右端 130px の固定メニュー(#menubox)。
   色は :root の変数で一括管理。テーマカラーの黄は依頼主指定の Y100 M10 を sRGB に近似した #FFE600、
   文字は依頼主指定の炭黒。写真の背景の空色は tools/prepare_photos.py の SKY。 */

:root{
	--basecolor: #FFE600;
	--basecolor-rgb: 255, 230, 0;
	--basedark: #E6CF00;
	--inkcolor: #2B2B2B;
	--textcolor: #333333;
	--linecolor: #333333;
	--tint: rgba(255, 230, 0, 0.16);
	/* 本文列の幅。参考サイトは 400px 固定だが、読みやすさのため画面幅に応じて 400〜560px に伸縮させる */
	--colw: clamp(400px, 40vw, 560px);
	--menuw: 130px;
}

html,body{
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	overscroll-behavior: none;
}
@media (prefers-reduced-motion: reduce){
	html,body{ scroll-behavior: auto; }
	a, summary::after, #ocbt span, #ocbt span::before, #ocbt span::after{ transition: none !important; }
}

ul li::marker{
	color: var(--basedark);
}
ul,ol{
	padding: 0;
	padding-left: 1.5rem;
}

#container{
	width: 100%;
	font-family: "Noto Sans JP", sans-serif;
	color: var(--textcolor);
	background-color: #fff;
	line-height: 1.9;              /* 本文の行間。見出しなどは個別に詰める */
	overflow-wrap: anywhere;       /* 長い URL だけ折り、英単語は途中で切らない */
	line-break: strict;            /* 行頭の句読点・小書き文字を許さない */
	-webkit-text-size-adjust: 100%;
	display: flex;
	flex-wrap: nowrap;
}
body *{
	box-sizing: border-box;
	position: relative;
}
a{
	transition: 0.3s;
	color: var(--textcolor);
	text-decoration: underline;
	text-decoration-color: var(--basecolor);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}
a:hover{
	text-decoration-color: var(--basedark);
}
img,
iframe,
figure{
	max-width: 100%;
	display: block;
}
img{
	height: auto;
	border: none;
}

/* container */
#container > *{
	display: block;
	height: 100%;
}
#container > .bgbox{
	z-index: 0;
	width: 100%;
	height: 100dvh;
	max-height: 65vw;
	position: fixed;
	background: #fff;
}
.bgbox img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}
/* キャッチコピー。参考サイトは画像に焼き込んでいるが、差し替えやすいよう HTML で重ねる */
.bgbox .slogan{
	position: absolute;
	top: 9%;
	left: 3.5%;
	margin: 0;
	writing-mode: vertical-rl;
	font-size: clamp(2.2rem, 3.2vw, 3.6rem);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0.06em;
	color: var(--inkcolor);
	z-index: 1;
}
.bgbox .slogan span{
	display: block;
	inline-size: max-content;
	line-height: inherit;
	padding: 0.15em 0.08em;
	background: linear-gradient(to right, transparent 58%, rgba(var(--basecolor-rgb), 0.7) 0);
}
.bgbox .slogan span + span{
	margin-block-start: 0.35em;
}

#container > #site-header{
	width: calc(100% - var(--menuw) - var(--colw));
	order: 1;
	height: 100dvh;
}
#container > #menubox{
	width: var(--menuw);
	position: fixed;
	right: 0;
	z-index: 10;
}
#container > #site-content{
	background: #fff;
	width: var(--colw);
	order: 2;
	font-size: 1.0625rem;
	box-shadow: 5px 0 10px rgba(0, 0, 0, 0.05), -5px 0 10px rgba(0, 0, 0, 0.05);
	min-height: calc(100vh + 20px);
	margin: -10px 0;
}
header,
#mainmenu{
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;
}

/* SNS ボタン */
.snsbt{
	margin: 0 auto;
	width: fit-content;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column-reverse;
	gap: 1rem 25px;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
}
header .snsbt{
	position: fixed;
	bottom: 2rem;
	left: 4vw;
	background: #fff;
	padding: 1rem;
}
.snsbt span{
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem 20px;
}
.snsbt a{
	display: block;
	line-height: 0;
	text-decoration: none;
}
.snsbt a:hover{
	opacity: 0.6;
}
.snsbt svg,
.snsbt img{
	height: 36px;
	width: auto;
	display: block;
}
#site-header .snsbt svg,
#site-header .snsbt img{
	height: 30px;
}
.snsbt .yt{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--inkcolor);
}


/* 右端の固定メニュー */
#mainmenu{
	height: 100%;
	padding: 2rem 0 0;
}
#mainmenu h1{
	font-size: 1.6rem;
	margin: 2rem auto;
	flex-shrink: 0;
}
@media all and (max-height: 700px){
	#mainmenu h1{
		margin-top: 0;
	}
}
#mainmenu h1 a{
	display: block;
	writing-mode: vertical-rl;
	height: 200px;
	text-decoration: none;
	color: var(--inkcolor);
	line-height: 1;
}
#mainmenu .logo-pos{
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	padding-top: 0.2em;
}
#mainmenu .logo-name{
	display: block;
	font-size: 1.75rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	line-height: 1;
	margin-block-start: 0.2em;
}
#mainmenu ul{
	list-style: none;
	margin: 0;
	padding: 0 0 2rem;
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
#mainmenu ul li{
	display: block;
	margin-top: 0.5rem;
}
#mainmenu ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 100px;
	color: var(--inkcolor);
	text-decoration: none;
	background: rgba(var(--basecolor-rgb), 0.9);
	width: 6rem;
	height: 6rem;
	padding: 0 0.6em;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.45;
}
#mainmenu ul li a:hover{
	background: var(--basedark);
}

/* 本文列 */
section,
footer{
	padding: 2rem;
}
/* 見出し類は詰め組み(palt)で行間 1.4 */
section h1,
section h2,
section .catch,
.fields dt,
.message .sig b,
#mainmenu .logo-name,
#menubox2 .logo-name,
footer h2{
	font-feature-settings: "palt";
	line-height: 1.4;
}
section h1{
	border-bottom: 3px solid var(--basecolor);
	display: block;
	width: fit-content;
	font-size: 1.2rem;
	margin: 3rem auto;
	padding: 0 0 0.5rem;
	text-align: center;
	font-weight: 900;
	letter-spacing: 0.08em;
	color: var(--inkcolor);
}
section .catch{
	text-align: center;
	color: var(--inkcolor);
	font-size: 1.9rem;
	margin: 3rem auto;
	font-weight: 900;
}
section .catch .pos{
	font-size: 1.3rem;
	color: var(--textcolor);
	display: block;
	margin-top: -0.5rem;
}
section .catch .pos .pos2{
	display: inline-block;
	font-size: 1.1rem;
}
section .catch .pos + .pos{
	margin-top: 0;
	font-size: 1.1rem;
}
section .catch .pos + .pos .pos2{
	font-size: 0.95rem;
}
section h2{
	font-size: 1.6rem;
	text-align: center;
	color: var(--inkcolor);
	margin: 3rem auto;
	font-weight: 900;
	letter-spacing: 0.04em;
}

details{
	margin: 0 auto 1rem;
}
summary{
	display: flex;
	text-decoration: none;
	padding: 1rem 2rem;
	border-radius: 2rem;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	color: var(--inkcolor);
	background: var(--tint);
	cursor: pointer;
	list-style: none;
}
summary::-webkit-details-marker{
	display: none;
}
summary::after{
	content: '';
	flex-shrink: 0;
	width: 15px;
	height: 9px;
	margin-left: 1rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9'%3E%3Cpath d='M1.5 1.5l6 6 6-6' fill='none' stroke='%232B2B2B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: 0.3s;
}
details[open] summary::after{
	transform: rotate(180deg);
}
details li b{
	display: block;
	color: var(--inkcolor);
}

/* 挨拶文 */
#message .catch{
	font-size: 2rem;
	letter-spacing: 0.04em;
	line-height: 1.5;
}
#message .catch .line{
	display: inline-block;
	padding: 0 0.15em;
	background: linear-gradient(transparent 62%, rgba(var(--basecolor-rgb), 0.6) 0);
}
.message{
	font-weight: bold;             /* 依頼主の指定で全文太字(2026-11-02) */
	font-size: 1.0625rem;
	line-height: 2;
	margin: 0 auto 3rem;
}
.message .sig{
	text-align: right;
	font-size: 1rem;
	margin: 2.5rem 0 0;
}
.message .sig b{
	display: block;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	color: var(--inkcolor);
}

/* 動画(Instagram のリール埋め込み)。1 本ずつ縦に並べる(横並びだと埋め込みの幅が 300px を切り、Instagram 側の組みが崩れる)。
   埋め込みの高さは Instagram 側の組み(上 54px + 4:5 の映像 + 下 154px)に合わせて幅から決める */
.reels{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	margin-top: 1.5rem;
}
.reel{
	width: 100%;
	max-width: 420px;
	margin: 0;
}
.reel .frame{
	position: relative;
	padding-top: calc(125% + 208px);
	background: #f3f3f3;
}
.reel iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.reel figcaption{
	margin-top: 0.6rem;
	font-size: 0.85rem;
	font-weight: 700;
	text-align: center;
}
.reel figcaption a{
	color: var(--inkcolor);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 準備中の板(主要政策・後援会・お問い合わせ)。墨の板に白文字、色は黄の線だけ。
   .veil は下にフォームの完成予想(押せない)を敷き、板を半透明で重ねる。黄の線は画面に入ったとき左から引かれる(js/script.js) */
.soon{
	position: relative;
	margin: 1.5rem 0 2rem;
}
.soon-plate{
	background: rgba(43, 43, 43, 0.85);
	color: #fff;
	padding: 1.75rem 1.5rem 1.5rem;
}
.soon-plate .label{
	display: block;
	font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.3em;
	opacity: 0.75;
}
.soon-plate .when{
	display: block;
	font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-size: clamp(3rem, 14vw, 4.4rem);
	line-height: 1;
	letter-spacing: 0.02em;
	margin: 0.5rem 0 0.25rem;
}
.soon-plate .when.jp{
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 900;
	font-size: clamp(1.8rem, 8vw, 2.3rem);
	line-height: 1.3;
	letter-spacing: 0.08em;
}
.soon-plate .state{
	display: block;
	font-weight: 700;
	letter-spacing: 0.12em;
}
.soon-plate .rule{
	display: block;
	width: 3.5rem;
	height: 2px;
	margin: 1rem 0;
	background: var(--basecolor);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}
.soon.in .soon-plate .rule{
	transform: scaleX(1);
}
.soon-plate p{
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.9;
}
.soon.veil .soon-plate{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* フォームの完成予想。欄と送信ボタンの形だけで、文字は無く押せない(板越しに薄く見える) */
.soon-form{
	display: block;
	padding: 1.25rem 0.5rem 1rem;
}
.soon-form .box{
	display: block;
	height: 2.6rem;
	margin-bottom: 1.1rem;
	border: 1px solid #aaa;
}
.soon-form .box.tall{
	height: 5.5rem;
}
.soon-form .btn{
	display: block;
	width: 55%;
	height: 2.8rem;
	margin: 0 auto;
	background: #555;
}
/* 公開日を過ぎて中身が入ったら、板が持ち上がって消える(js/script.js が .open を付ける) */
.soon.open .soon-plate{
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s;
	transform: translateY(-10%);
	opacity: 0;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
	.soon-plate .rule,
	.soon.open .soon-plate{
		transition: none;
	}
	.soon-plate .rule{
		transform: none;
	}
}

/* 分野ごとの番号つきリスト(透かし番号) */
.fields dt,
.fields dd{
	margin: 0 auto;
	padding: 0;
}
.fields dt{
	font-weight: bold;
	color: var(--inkcolor);
	font-size: 1.4rem;
	z-index: 2;
	padding-right: 3rem;
}
.fields dd{
	margin-bottom: 1rem;
	padding: 0.5rem 0 1rem;
	border-bottom: 1px solid #ccc;
	z-index: 3;
}
.fields dt::before{
	content: '';
	position: absolute;
	font-size: 4.5rem;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	line-height: 1;
	color: rgba(var(--basecolor-rgb), 0.5);
	right: 0;
	top: -0.5rem;
	z-index: 1;
}
.fields dt:nth-of-type(1)::before{ content: '1'; }
.fields dt:nth-of-type(2)::before{ content: '2'; }
.fields dt:nth-of-type(3)::before{ content: '3'; }
.fields dt:nth-of-type(4)::before{ content: '4'; }
.fields dt:nth-of-type(5)::before{ content: '5'; }
.fields dt:nth-of-type(6)::before{ content: '6'; }
.fields dt:nth-of-type(7)::before{ content: '7'; }

/* プロフィール */
#profile .catch{
	font-size: 2.1rem;
	letter-spacing: 0.08em;
}
#profile .catch + p{
	font-weight: bold;
}
#profile table{
	margin: 2rem auto;
	width: 100%;
	border-collapse: collapse;
	border-bottom: 1px solid var(--linecolor);
}
#profile th,
#profile td{
	padding: 0.5rem;
	border-top: 1px solid var(--linecolor);
	vertical-align: top;
}
#profile th{
	padding: 0.5rem 0.75rem;
	background: var(--tint);
	text-align: left;
	white-space: nowrap;
	color: var(--inkcolor);
}
#profile dl.history{
	margin: 0 auto;
}
#profile .history dt,
#profile .history dd{
	padding: 0 0 0 1.25em;
	margin: 0 auto;
}
#profile .history dt{
	font-weight: bold;
	color: var(--inkcolor);
}
#profile .history dd{
	padding-bottom: 0.5rem;
}
#profile .history dt::before{
	content: '●';
	position: absolute;
	color: var(--basecolor);
	left: 0;
	top: 0;
	z-index: 5;
}
#profile .history dt::after,
#profile .history dd::after{
	content: '';
	position: absolute;
	left: 0.5em;
	top: 0.5em;
	width: 1px;
	height: 100%;
	z-index: 2;
	background: rgba(0, 0, 0, 0.2);
}
#profile .history dt:last-of-type::after,
#profile .history dd:last-of-type::after{
	display: none;
}
#activity > p{
	font-size: 0.95rem;
}
#sns .snsbt span{
	flex-wrap: wrap;
	gap: 3rem;
	margin-bottom: 3rem;
	justify-content: center;
	max-width: 300px;
}
#sns .snsbt svg,
#sns .snsbt img{
	height: 60px;
}
#sns .snsbt .yt{
	font-size: 1.2rem;
}

/* 後援会・お問い合わせ(最後のセクションは薄い黄の帯でフッターまで続ける) */
#koenkai .catch{
	font-size: 1.8rem;
}
#koenkai .coming,
#contact .coming{
	margin-top: 1rem;
}
#contact{
	background: var(--tint);
	margin-bottom: -6rem;
	padding-bottom: 6rem;
}

/* 下層ページ(サイトポリシー・個人情報保護方針)の条文 */
.policy h2{
	text-align: left;
	font-size: 1.15rem;
	margin: 2.25rem 0 0.5rem;
	padding-left: 0.6rem;
	border-left: 4px solid var(--basecolor);
	line-height: 1.4;
}
.policy p,
.policy ul{
	margin: 0 0 1rem;
}
.policy .date{
	text-align: right;
	font-size: 0.9rem;
	margin-top: 2.5rem;
}

/* ページ先頭へ */
#pagetop{
	z-index: 10;
	position: sticky;
	bottom: 2rem;
	padding: 0 2rem;
	margin: 0 auto;
	text-align: right;
}
#pagetop a{
	width: 4rem;
	height: 4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--basecolor-rgb), 0.9);
	border-radius: 4rem;
	text-decoration: none;
}
#pagetop a:hover{
	background: var(--basedark);
}
#pagetop svg{
	width: 100%;
	height: 100%;
	display: block;
}

.fullimg{
	display: block;
	margin: 5rem auto -2rem;
	z-index: 5;
}
.out{
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: flex-start;
}
.out::after{
	content: '';
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Cpath d='M8 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4' fill='none' stroke='%232B2B2B' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11 2h6v6M17 2l-8 8' fill='none' stroke='%232B2B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transform: translateY(1px);
}

/* デモ用: 本人確認が必要な箇所の印。公開時に削除する */
.todo{
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	color: #b3261e;
	border: 1px solid #b3261e;
	border-radius: 3px;
	padding: 0 0.4em;
	margin: 0 0.2em;
	vertical-align: middle;
}

/* footer */
footer{
	text-align: left;
}
footer h2{
	font-size: 3rem;
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 0.75rem;
	line-height: 1.2;
	font-weight: 900;
	letter-spacing: 0.06em;
	color: var(--inkcolor);
}
footer h2 .office{
	font-size: 1.2rem;
	line-height: 1.2;
	padding-bottom: 0.55rem;
	letter-spacing: 0;
}
@media all and (max-width: 560px){
	footer h2{
		font-size: 2.1rem;
		white-space: nowrap;
	}
}
footer p{
	margin: 1rem 0;
}
.copyright{
	font-size: 0.8rem;
}
#footmenu{
	margin-left: -0.75rem;
}
#footmenu ul{
	list-style: none;
	margin: 1rem auto;
	padding: 0;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
#footmenu li{
	padding: 0 0.75rem;
}
#footmenu a{
	padding: 0;
}
#footmenu li:first-child{
	border-right: 1px solid #ccc;
}
#footmenu .todo{
	margin-left: 0.75rem;
}

/* メディアクエリ */
@media all and (max-width: 860px){
	#container > .bgbox{
		width: 100%;
		height: auto;
		min-height: 90px;
		position: relative;
		left: auto;
		top: auto;
	}
	#container > #site-header{
		height: auto;
		position: absolute;
		top: 0;
	}
	header .snsbt{
		position: absolute;
		left: 2rem;
	}
	#container{
		flex-wrap: wrap;
	}
	#container > #site-header{
		width: 100%;
		max-height: 80vw;
	}
	#container > #site-content{
		width: calc(100vw - 170px);
		max-width: calc(100vw - 170px);
		margin: 0 auto 0 0;
	}
	#container > #menubox{
		width: 170px;
		margin-left: auto;
	}
}

@media all and (max-width: 560px){
	#container > #site-content{
		box-shadow: none;
		font-size: 1rem;           /* 17px だと 1 行 18 字。16px と余白 1.5rem で 20 字に */
	}
	section,
	footer{
		padding: 1.5rem;
	}
	.pc{
		display: none !important;
	}
	.sp{
		display: block !important;
	}
	.home #site-header,
	.home .bgbox picture{
		display: block !important;
	}
	#site-header,
	.bgbox picture{
		display: none !important;
	}
	#container > .bgbox{
		width: 100%;
		height: 100dvh;
	}
	.home #container #site-content{
		margin: 0 auto;
	}
	#container #site-content{
		margin: calc(-100dvh + 100px) auto 0;
	}
	#container > *{
		min-height: auto;
	}

	/* SP ヘッダー(ロゴ + 開閉ボタン) */
	#menubox2{
		position: absolute;
		top: 0;
		width: 100%;
		height: auto;
		background: #fff;
		z-index: 400;
	}
	#menubox2 h1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 1rem;
		height: 90px;
		margin: 0 auto;
		font-size: 1rem;
	}
	#menubox2 h1 a{
		text-decoration: none;
		color: var(--inkcolor);
		line-height: 1.2;
	}
	#menubox2 .logo-pos{
		display: block;
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 0.06em;
	}
	#menubox2 .logo-name{
		display: block;
		font-size: 1.5rem;
		font-weight: 900;
		letter-spacing: 0.1em;
	}
	#ocbt{
		flex-direction: column;
		width: 70px;
		height: 70px;
		background: var(--basecolor);
		color: var(--inkcolor);
		text-decoration: none;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;
		font-size: 0.6rem;
		padding: 1.2rem 1rem 1rem;
		border-radius: 4rem;
	}
	#ocbt span.bar,
	#ocbt span::before,
	#ocbt span::after{
		content: '';
		display: block;
		background: var(--inkcolor);
		width: 30px;
		height: 4px;
		border-radius: 3px;
		transform-origin: center center;
		transition: 0.3s;
	}
	#ocbt em{
		font-style: normal;
		color: var(--inkcolor);
		margin: 0 -0.5rem;
		line-height: 1;
	}
	#ocbt em:nth-of-type(1){
		display: block;
	}
	#ocbt em:nth-of-type(2){
		display: none;
	}
	.menuopen #ocbt em:nth-of-type(1){
		display: none;
	}
	.menuopen #ocbt em:nth-of-type(2){
		display: block;
	}
	#ocbt span::before{
		margin-top: 11px;
	}
	#ocbt span::after{
		margin-top: 8px;
	}
	#mainmenu_sp{
		display: none;
		width: 100%;
	}
	.menuopen{
		position: fixed;
		top: 0;
	}
	.menuopen #ocbt span{
		background: transparent;
		transform: translateY(5px);
	}
	.menuopen #ocbt span::before{
		transform: rotate(45deg);
		margin-top: 4px;
	}
	.menuopen #ocbt span::after{
		transform: rotate(-45deg);
		margin-top: -4px;
	}
	.menuopen #menubox2{
		height: 100dvh;
		z-index: 300;
		background: #fff;
		position: fixed;
		top: 0;
	}
	.menuopen #mainmenu_sp{
		display: block;
	}
	#mainmenu_sp ul{
		list-style: none;
		margin: 2rem auto;
		padding: 0 1rem;
		background: var(--tint);
	}
	#mainmenu_sp ul li a{
		border-top: 1px solid #ccc;
		padding: 1rem 1rem 1rem 0;
		color: var(--textcolor);
		text-decoration: none;
		display: flex;
		width: 100%;
		gap: 0.5rem;
		justify-content: flex-start;
		align-items: center;
	}
	#mainmenu_sp ul li a::before{
		content: '';
		width: 9px;
		height: 15px;
		flex-shrink: 0;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15'%3E%3Cpath d='M1.5 1.5l6 6-6 6' fill='none' stroke='%23D9A900' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	}
	#mainmenu_sp ul li:first-child a{
		border-top: none;
	}
	#mainmenu_sp .snsbt{
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
		padding: 1rem;
		width: 100%;
	}

	#container > #site-content{
		max-width: 100%;
		width: 100%;
		min-width: inherit;
	}
	#container > #site-header{
		height: 167vw;
	}
}

/* 860px 以下のブロックにある height: auto を打ち消すため、メディアクエリの後に置く */
#container > #site-header{
	height: calc(100dvh);
}
@media all and (min-width: 1200px) and (aspect-ratio >= 23/10){
	header .snsbt{
		flex-direction: row-reverse;
	}
}
@media all and (min-width: 1500px){
	header .snsbt{
		bottom: -5px;
	}
}
@media all and (min-width: 860px) and (aspect-ratio > 2/1){
	header .snsbt{
		bottom: -5px;
	}
}
@media all and (max-width: 1200px){
	.bgbox img{
		object-fit: cover;
		object-position: top left;
	}
}
@media all and (max-width: 1040px) and (min-width: 980px){
	.bgbox{
		transform: translateX(calc(100vw - 1040px));
	}
}
@media all and (max-width: 980px) and (min-width: 860px){
	.bgbox{
		transform: translateX(-60px);
	}
}
@media all and (max-width: 860px){
	.bgbox{
		width: calc(100%);
		transform: translateX(0);
	}
	#container > .bgbox,
	#container > .bgbox picture{
		height: calc(100dvh);
		max-height: 80vw;
	}
	.bgbox .slogan{
		top: 7%;
		left: 4%;
		font-size: clamp(1.8rem, 4.6vw, 2.6rem);
	}
}
@media all and (max-width: 560px){
	.bgbox img{
		padding-top: 90px;
	}
	#container > #site-header,
	#container > .bgbox,
	#container > .bgbox picture{
		min-height: 640px;
		height: calc(100dvh);
		max-height: 180vw;
	}
	.bgbox img{
		object-fit: cover;
		object-position: top right;
	}
	header .snsbt{
		top: auto;
		bottom: 2rem;
		position: absolute;
		left: 2rem;
		width: calc(100% - 4rem);
	}
	.bgbox{
		transform: none;
	}
	.bgbox .slogan{
		top: calc(90px + 1.25rem);
		left: 1rem;
		font-size: clamp(1.8rem, 8.5vw, 2.4rem);
	}
}

/* オープニング(徳島県→阿南市→飛び込み)。表示の可否は head のスクリプト。
   時間割・不透明度・ズームはすべて js/opening.js が毎フレーム決める(CSS 側に時間は持たない)。
   変種: #opening.v-0 基本形 / .v-a 線画の測量図 / .v-c 一本のカメラワーク */
#opening{
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
}
html.op-run #opening{
	display: block;
}
html.op-run #opening svg{
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}
#op-sheet{
	fill: #fff;
}
#op-sheet-fine{
	fill: none;
	opacity: 0;
}
#op-cover{
	fill: #fff;
	opacity: 0;
}
#op-pref{
	fill: #dedede;
	opacity: 0;
}
#op-anan{
	fill: var(--basecolor);
	opacity: 0;
}
#op-muni{
	fill: none;
	stroke: none;
	opacity: 0;
}
/* 演出中はキャッチコピーを隠す。終わると帯(背景)は即、文字は 0.3s で現れる。黄の受け継ぎ(.op-fly)が帯の位置に着地した瞬間に切り替わる */
html.op-run .bgbox .slogan span{
	background: none;
	color: transparent;
}
html.op-done .bgbox .slogan span{
	transition: color calc(0.3s * var(--op-slow, 1));
}
.op-fly{
	position: fixed;
	z-index: 1001;
	background: var(--basecolor);
	transform-origin: 0 0;
	pointer-events: none;
}
/* 隅の英字ラベル(A 案・C 案)。不透明度は JS */
.op-ui{
	position: absolute;
	inset: 0;
	pointer-events: none;
	font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
	color: var(--inkcolor);
}
.op-label{
	position: absolute;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	line-height: 1.5;
	opacity: 0;
	white-space: nowrap;
}
.op-label-pref{
	left: 2rem;
	top: 1.6rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--inkcolor);
}
.op-label-anan{
	left: 2rem;
	bottom: 1.8rem;
}
.op-coord{
	display: block;
	font-weight: 500;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}
.op-sq{
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	background: var(--basecolor);
	margin-right: 0.6em;
	vertical-align: 0.05em;
}

/* A 案: 線画。県の輪郭は 1 本の線(stroke-dashoffset を JS で 1→0)、市町村境はヘアライン、阿南市は黄に墨の輪郭 */
#opening.v-a #op-pref{
	fill: none;
	stroke: var(--inkcolor);
	stroke-width: 1.5px;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 1;
}
#opening.v-a #op-muni{
	stroke: var(--inkcolor);
	stroke-width: 0.8px;
	stroke-opacity: 0.22;
}
#opening.v-a #op-anan{
	stroke: var(--inkcolor);
	stroke-width: 1.5px;
	stroke-linejoin: round;
}
#opening.v-a #op-cover{
	opacity: 1;   /* 阿南市が黄に染まる間、穴の下のサイトを隠す(以後も黄の下に残る) */
}

/* C 案: 方眼の上の平らな地図。最初から阿南市は黄 */
#opening.v-c #op-sheet{
	fill: url(#op-grid);
}
#opening.v-c #op-sheet-fine{
	fill: url(#op-grid-fine);
}
#opening.v-c #op-pref{
	fill: #e8e8e8;
	opacity: 1;
}
#opening.v-c #op-anan{
	opacity: 1;
}
#opening.v-c .op-label-pref{
	display: none;
}
#opening.v-c .op-label-anan{
	opacity: 1;
}

/* リンク先セクションへフォーカスを移したときの枠線を消す */
[tabindex="-1"]:focus{
	outline: none;
}