@charset "utf-8";
/* https://jigsaw.w3.org/css-validator/ */
/* var */
:root {
	--color_white: #FFFFFF;
	--color_black: #393532;
	--color_main: var(--color_black);
	--color_main_rgb: 57, 53, 50;
	--color_main_dark_rgb: 57, 53, 50;
	--color_sub: #C67450;
	--color_sub_rgb: 198, 116, 80;
	--color_neutral: #C1BFBE;
	--color_neutral_rgb: 193, 191, 190;
	--color_neutral_light: #F8F8F8;
	--color_neutral_pale: rgb( var(--color_neutral_rgb), .13 );
	--color_neutral_dark: #707070;
	--color_link: #0000EE;

	--color_bg: var(--color_white);
	--color_txt: var(--color_black);
	--color_main_txt: var(--color_white);
	--color_border: var(--color_neutral);
	--color_border_light: #CCCCCC;
	--color_border_dark: var(--color_neutral_dark);
	--color_ctrl: var(--color_main);
	--color_ctrl_txt: var(--color_main_txt);
	--color_ctrl_border: var(--color_ctrl);
	--color_ctrl_hover: var(--color_neutral_light);
	--color_ctrl_border_hover: var(--color_ctrl_border);
	--color_ctrl_txt_hover: var(--color_main);
	--color_ctrl_border: var(--color_ctrl);

	--content_width: calc( 20rem + 1000px );/*＠＠ + 730px 1050 */
	--content_padding: 40px;
	--font_theme: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	--base_margin: 30px;
	--base_margin_txt: max(calc(var(--base_margin) - (1lh - 1em)/2), calc(var(--base_margin))/2);
	--base_margin_large: calc( var(--base_margin)*2 );
	--base_margin_large_txt: calc( var(--base_margin_txt) + var( --base_margin ) );
	--base_margin_small: calc( var(--base_margin)/3*2 );
	--base_margin_small_txt: calc( var(--base_margin_txt)/3*2 );
	--radius: 5px;
  --leading_trim: calc((1em - 1lh) / 2);

	--icon_size: 24px;
	--icon_arrow_url: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8.59%2C16.59%2C13.17%2C12%2C8.59%2C7.41%2C10%2C6l6%2C6-6%2C6Z%22%20fill%3D%22%23393532%22%2F%3E%3Cpath%20d%3D%22M0%2C0H24V24H0Z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E');;
	--icon_arrow_color_url: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8.59%2C16.59%2C13.17%2C12%2C8.59%2C7.41%2C10%2C6l6%2C6-6%2C6Z%22%20fill%3D%22%23c67450%22%2F%3E%3Cpath%20d%3D%22M0%2C0H24V24H0Z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E');;
	--icon_arrow_white_url: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8.59%2C16.59%2C13.17%2C12%2C8.59%2C7.41%2C10%2C6l6%2C6-6%2C6Z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M0%2C0H24V24H0Z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E');
}

/* body */
html {
	background-color: var(--color_main);
	color: var(--color_main_txt);
}
body {
	font-family: var(--font_theme);
	word-break: break-word;
	-webkit-text-size-adjust: 100%;
	container: body/inline-size;
	margin: 4px 0 0;
	line-height: 1.75;
	--content_padding:  max(calc( (100vw - var(--content_width))/2 ), 40px);
	--content_padding:  max(calc( (100cqw - var(--content_width))/2 ), 40px);
}
body *,
::before,
::after {
	box-sizing: border-box;
}

/* font-size */
header .logo,
section.gate .subtitle {
	font-size: 1.75rem;
}
.section-heading {
	font-size: 1.3125rem;
}
.section-subheading {
	font-size: 1.125rem;
}
.section-toppage-information h2,
.card-list .title,
.sub-column .border-list h3 {
	font-size: 1rem;
}
.sub-column {
	font-size: .875rem;
}

/* elements */
strong,
em {
	color: #e00;
	font-style: normal;
}
img,
iframe,
figure {
	max-width: 100%;
}
img {
	height: auto;
	border: none;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
}

/* visually-hidden */
.visually-hidden,
.forscreenreader,
.skip {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

.visually-hidden:focus,
.forscreenreader:focus,
.skip:focus {
	line-height: 1.5;
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	overflow: visible;
	padding: 5px 10px;
	display: inline-block;
	background-color: #fff;
	color: #333;
	text-decoration: none;
	z-index: 99999;
}


/* link */
header a,
footer a,
section.gate a,
.card-list a,
.border-list a,
a .post-date {
	color: inherit;
}
header a,
footer a,
.archive-link a,
.card-list a,
.border-list a,
.information-list a {
	text-decoration: none;
}
header .additional-menu a:hover,
footer a:hover,
.archive-link a:hover,
.information-list a:not(:hover) .title {
	text-decoration: underline;
}
header a,
footer a {
	text-underline-offset: .2em;
}
.archive-link a,
.card-list a .title {
	padding-right: calc(var(--icon_size) + 4px);
	background: var(--icon_arrow_color_url) right center/var(--icon_size) var(--icon_size) no-repeat ;
}

/* bttn */
.bttn {
	--el_padding: 14px;
	-webkit-appearance: none;
	box-sizing: border-box;
	padding: 5px var(--el_padding);
	margin: 0 5px 0 0;
	background-color: var(--color_ctrl);
	border: 1px solid var(--color_ctrl_border);
	color: var(--color_ctrl_txt);
	line-height: 1.5;
	text-decoration: none;
	font-weight: normal;
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
	border-radius: var(--radius);
	font-size: 1rem;
}
.bttn:hover,
.bttn:focus {
	--color_ctrl: var(--color_ctrl_hover);
	--color_ctrl_border: var(--color_ctrl_border_hover);
	--color_ctrl_txt: var(--color_ctrl_txt_hover);
}
a.bttn {
	--el_icon: var(--icon_arrow_white_url);
	padding-left: calc( var(--el_padding) + var(--icon_size) + 2px );
	background: var(--el_icon) left var(--el_padding) center/var(--icon_size) var(--icon_size) no-repeat var(--color_ctrl);
}
a.bttn:hover,
a.bttn:focus {
	--el_icon: var(--icon_arrow_url);
}
.sub-column .bttn {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: var(--base_margin_txt) auto;
}

/* container */
.wrapper,
div.main {
	padding-inline: var(--content_padding);
}

/* header */
header {
	background-color: var(--color_bg);
	color: var(--color_txt);
	padding: var(--base_margin_txt) var(--content_padding) calc(var(--base_margin_txt)/2);
	display: grid;
	grid-template-areas: "left center right"
											 "bottom bottom bottom";
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var(--base_margin);
	row-gap: calc( var(--base_margin_txt) );
}
header a.logo {
	grid-area: left;
	align-self: start;
}
header h1.logo {
	grid-area: center;
	margin-block: 0;
}
header .additional-menu {
	grid-area: right;
	align-self: start;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	column-gap: calc(var(--base_margin)/2);
	margin-block: 0;
}
header .additional-menu a {
	font-weight: normal;
}
header .nav-global-navigation {
	grid-area: bottom;
}
.main-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	column-gap: calc(var(--base_margin)*2);
	font-weight: bold;
	margin-block: 0;
}

/* main */
div.main {
	--el_margin: calc( var(--base_margin)/3*5 );
	background: url(../images/bg_paper.webp) #f2f1f0;
	color: var(--color_txt);
	padding-bottom: var(--base_margin_large_txt);
	display: flex;
	column-gap: var(--el_margin);
	align-items: stretch;
}

/* footer */
footer {
	margin-top: 0;
	padding: var(--base_margin) var(--content_padding) var(--base_margin);
	height: auto;
	background: var(--color_main);
	text-align: initial;
}
footer h2 {
	margin-block: 0 calc(var(--base_margin_txt)/2);
	color: inherit;
}
footer .menu {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 1em var(--base_margin);
	border-top: 1px solid var(--color_border_dark);
	margin-block: var(--base_margin_large_txt) 0;
	padding-block: var(--base_margin_txt) 0;
}
footer .menu a::before {
	content: none;
}

/* content */
.box {
	display: block;
	background: var(--color_bg);
	box-shadow: 0px 0px 5px rgb(0, 0, 0, .16);
	margin-block: var(--base_margin_small);
	padding: var(--base_margin_txt) var(--base_margin);
	padding: var(--base_margin);
}
.box > :first-child {
	margin-top: var(--leading_trim);
}
.box > :last-child {
	margin-bottom: var(--leading_trim);
}

/* list */
ul,
ol {
	line-height: 1.5;
}
ul.menu,
ul.card-list,
ul.information-list,
ul.border-list {
	padding-left: 0;
	list-style: none;
}
.border-list,
.card-list {
	line-height: 1.75;
}
.card-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--base_margin);
	align-items: stretch;
	justify-content: space-between;
	container: col2_container/inline-size;
}
.card-list a {
	display: flex;
	flex-direction: column;
}
.card-list .thumb {
	order: -1;
	width: 100%;
	height: auto;
	aspect-ratio: 309/120;
}
.card-list .thumb img {
	width: 100%;
	height: 100%;
	max-width: initial;
	object-fit: cover;
}
.card-list .title {
	margin-block: 14px 4px;
}
.border-list > li {
	border-bottom: 1px solid var(--color_border_light) ;
	padding-bottom: var(--base_margin_small_txt);
}
.border-list > li:has(+li) {
	margin-bottom: var(--base_margin_small);
}
.border-list a {
	display: grid;
	grid-template-areas: "thumb title"
											 "thumb content";
	grid-template-columns: 100px auto;
	column-gap: 12px;
}
.border-list a > * {
	margin: 0;
}
.border-list h3 {
	margin-top: var(--leading_trim);
}
.border-list .thumb {
	grid-area: thumb;
	width: 100px;
	height: auto;
	aspect-ratio: 100/80;
}
.border-list .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.information-list a {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
}
section.gate:has(.toppage-text) {
	background: url(../images/heroimage_bg.webp) no-repeat rgb( 64, 50, 6, .5 );
	color: var(--color_white);
	position: relative;
	display: grid;
	grid-template-areas: "text image"
											 "bar image";
	grid-template-columns: 1fr auto;
	align-items: end;
	z-index: 0;
	overflow-y: hidden;
}
section.gate:has(.toppage-text)::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background:  rgb( 64, 50, 6, .5 );
	z-index: -1;
}
section.gate .toppage-text {
	grid-area: text;
	align-self: start;
	padding: 0;
	padding-left: var(--content_padding);
	margin-block: var(--base_margin_txt) var(--base_margin);
	display: flex;
	flex-direction: column;
	row-gap: .75rem;
	height: auto;
	background: none;
}
.toppage-text > * {
	margin: 0;
}
.toppage-text *:has(wbr) {
	white-space: pre-wrap;
	word-break: keep-all;
}
.toppage-text .subtitle {
	white-space: normal;
}
.toppage-text .description {
	line-height: 1.875;
	padding: 0;
	font-size: inherit;
	height: auto;
}
.toppage-image {
	grid-area: image;
	z-index: -1;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	padding-right: var(--content_padding);
	margin-bottom: -10px;
	transform: translateY( -10px );
}
.toppage-image img {
	display: block;
	margin-left: auto;
	margin-top: auto;
}
section.gate .bar {
	grid-column: 1/-1;
	grid-row: 2/3;
	margin-top: auto;
	background-color: rgb(0, 0, 0, .4);
	padding-block: 9px;
	padding-inline: var(--content_padding);
}
.toppage-text .subtitle,
section.gate .bar h2 {
	position: static;
	background: none;
	color: inherit;
	padding: 0;
}
.toppage-text .subtitle::before,
section.gate .bar h2::before {
	content: none;
}
section.gate .bar > * {
	margin: 0;
}
section.gate .bar .archive-link {
	margin-left: auto;
}
section.gate .post-date {
	display: inline-block;
}
.section-heading {
	padding: 0;
	padding-left: 20px;
	position: relative;
	margin-block: var(--base_margin) var(--base_margin_txt);
	color: inherit;
}
.section-heading::before {
	content: '';
	display: block;
	width: 0;
	height: calc( 100% - .2em );
	border-left: 4px solid var(--color_sub);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin-block: auto;
}
.section-subheading {
	border-bottom: 1px solid var(--color_border_light);
	padding-left: 16px;
	padding-bottom: .4em;
	position: relative;
}
.section-subheading::before {
	content: '';
	display: block;
	width: 0;
	height: calc( 100% - .8em );
	border-left: 4px solid;
	position: absolute;
	left: 0;
	top: .2em;
}

@container col2_container ( min-width: 34em) {
	.card-list > * {
		width: calc( (100% - var(--base_margin))/2 );
	}
}


/* メディアクエリ */
@media all and ( max-width: 1000px ) {
	body {
		--content_padding:  min(5.3vw, 20px);
		--base_margin: var(--content_padding);
	}
}
@media all and ( min-width: 841px ) {
	.sp {
			display: none !important;
	}
	section.gate .bar {
		display: flex;
		align-items: stretch;
		column-gap: 24px;
	}
	section.gate .bar::before {
		content: '';
		display: block;
		width: 0;
		border-left: 1px solid #fff;
	}
	section.gate .bar > :first-child {
		order: -1;
	}
	.main-column {
		width: calc( 100% - 27.8% );
	}
	.sub-column {
		width: 18.25rem;
		max-width: 33%;
		flex-shrink: 0;
	}
}
@media all and ( max-width: 840px ) {
	.pc {
			display: none !important;
	}
	section.gate:has(.toppage-text) {
		grid-template-areas: "text image"
												 "bar bar";
	}
	.toppage-image {
		max-width: 40vw;
		overflow: hidden;
		padding-right: 0;
	}
	.toppage-image img {
		max-width: initial;
		width: 110%; /* sp向けimg待ち */
	}
	section.gate .bar {
		display: grid;
		grid-template-areas: "heading link"
												 "information information";
	}
	section.gate .bar h2 {
		grid-area: heading;
	}
	section.gate .bar ul {
		grid-area: information;
		border-top: 1px solid #fff;
		margin-top: 10px;
		padding-top: 10px;
	}
	section.gate .archive_link {
		grid-area: link;
	}
	div.main {
		flex-direction: column;
	}
	.main-column,
	.sub-column {
		width: 100%;
		max-width: initial;
	}
}
@media all and ( max-width: 520px ) {
}