@charset "utf-8";
/* 参考サイト(shinjiro.info)の実装構造を踏襲:
   全画面固定の写真(.bgbox) + 幅 400px の白いスクロール列(#site-content) + 右端 130px の固定メニュー(#menubox)。
   色は :root の変数で一括管理。テーマカラー(黄)は CMYK 確定後に --basecolor を差し替える。
   文字は墨色ではなく濃紺(配色案B)。写真の背景の空色は tools/prepare_photos.py の SKY。 */

:root{
	--basecolor: #F2C300;
	--basecolor-rgb: 242, 195, 0;
	--basedark: #D9A900;
	--inkcolor: #16305F;
	--textcolor: #16305F;
	--linecolor: #333333;
	--tint: rgba(242, 195, 0, 0.12);
}

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;
	word-break: break-all;
	-webkit-text-size-adjust: 100%;
	display: flex;
	flex-wrap: nowrap;
}
body *{
	box-sizing: border-box;
	position: relative;
	line-height: 1.8;
}
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: 6%;
	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% - 530px);
	order: 1;
	height: 100dvh;
}
#container > #menubox{
	width: 130px;
	position: fixed;
	right: 0;
	z-index: 10;
}
#container > #site-content{
	background: #fff;
	width: 400px;
	order: 2;
	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{
	height: 36px;
	width: auto;
	display: block;
}
#site-header .snsbt svg{
	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);
}
/* 公式ロゴ素材が届くまでの文字ボタン(LINE・ブログ) */
.snsbt .txt{
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 0.9em;
	border: 2px solid var(--inkcolor);
	border-radius: 2rem;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	color: var(--inkcolor);
	white-space: nowrap;
}
#site-header .snsbt .txt{
	height: 30px;
}

/* 右端の固定メニュー */
#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;
}
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;
	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 h2{
	font-size: 1.6rem;
	text-align: center;
	color: var(--inkcolor);
	margin: 3rem auto;
	font-weight: 900;
}

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='%2316305F' 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;
	font-size: 1.1rem;
	line-height: 2rem;
	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);
}

/* 主要政策 */
#policy .coming{
	font-family: "Barlow Condensed", "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-size: clamp(2.4rem, 12vw, 3.6rem);
	letter-spacing: 0.04em;
	line-height: 1.1;
	margin: 2rem auto 1.5rem;
}
#policy .coming .line{
	display: inline-block;
	white-space: nowrap;
	padding: 0 0.1em;
	background: linear-gradient(transparent 60%, rgba(var(--basecolor-rgb), 0.6) 0);
}
#policy .coming .sub{
	display: block;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-top: 1rem;
	color: var(--textcolor);
}

/* 分野ごとの番号つきリスト(透かし番号) */
.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'; }

/* プロフィール */
#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(22, 48, 95, 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{
	height: 60px;
}
#sns .snsbt .txt{
	height: 44px;
	font-size: 1rem;
}
#sns .snsbt .yt{
	font-size: 1.2rem;
}

/* 後援会 */
#koenkai{
	background: var(--tint);
	margin-bottom: -6rem;
	padding-bottom: 6rem;
}
#koenkai .catch{
	font-size: 1.8rem;
}

/* ページ先頭へ */
#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='%2316305F' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11 2h6v6M17 2l-8 8' fill='none' stroke='%2316305F' 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;
	white-space: nowrap;
}

/* footer */
footer{
	text-align: left;
}
footer h2{
	font-size: 3rem;
	margin-bottom: 0;
	display: flex;
	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;
	}
	.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);
	}
}

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