@charset "UTF-8";
/*------------------------------------------------
	[med] 共通モジュール
------------------------------------------------*/
/*------------------------------------------------
	[med] Base
------------------------------------------------*/
html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

@media only screen and (max-width: 768px) {
	html {
		scroll-padding-top: 15px;
	}
}

body {
	font-feature-settings: normal;
	letter-spacing: 0.04em;
}

.container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

@media only screen and (max-width: 768px) {
	.container {
		max-width: none;
	}
}

.main {
	clear: both;
	font-size: 1.6rem;
	line-height: 1.6;
	letter-spacing: 0.03em;
	font-feature-settings: normal;
}

@media only screen and (max-width: 768px) {
	.main {
		font-size: 1.5rem;
	}
}

.main *, .main *::before, .main *::after {
	box-sizing: border-box;
}

.main :is(::before, ::after) {
	pointer-events: none;
}

.main :is(a, summary, button, select) {
	cursor: pointer;
}

.main :is(a, summary, button, select, input, textarea) {
	transition: opacity 0.5s ease-out;
	transition-property: opacity, color, background-color, border-color, outline-color, transform;
}

@media (max-width: 1199px) {
	.main :is(img, video) {
		max-width: 100%;
		height: auto;
	}
}

.main :is(em, strong, b) {
	font-weight: bold;
	font-style: normal;
}

.main small {
	font-size: 0.875em;
}

.main :is(i, dfn) {
	font-style: normal;
}

.main .en {
	font-family: Arial, "Helvetica Neue", Helvetica, Verdana, Roboto, sans-serif;
}

.main .en-heading {
	font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, sans-serif;
}

.main .disabled {
	pointer-events: none;
	cursor: default;
}

.main summary.disabled {
	color: inherit;
	list-style: none;
}

.main summary.disabled::-webkit-details-marker {
	display: none;
}

/*------------------------------------------------
	PC、タブレット、スマートフォン表示切替用
------------------------------------------------*/
@media (min-width: 544px) {
	.on-mini {
		display: none !important;
	}
}

@media (min-width: 769px) {
	.on-sp {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	.on-small {
		display: none !important;
	}
}

@media (min-width: 1200px) {
	.on-tablet {
		display: none !important;
	}
}

@media (min-width: 1200px) {
	.on-not-pc {
		display: none !important;
	}
}

@media (min-width: 1920px) {
	.on-not-full {
		display: none !important;
	}
}

@media (min-width: 1280px) {
	.on-design {
		display: none !important;
	}
}

@media (min-width: 375px) {
	.on-spdesign {
		display: none !important;
	}
}

@media (max-width: 543px) {
	.on-not-mini {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.on-not-sp {
		display: none !important;
	}
}

@media (max-width: 1024px) {
	.on-not-small {
		display: none !important;
	}
}

@media (max-width: 1199px) {
	.on-not-tablet {
		display: none !important;
	}
}

@media (max-width: 1199px) {
	.on-pc {
		display: none !important;
	}
}

@media (max-width: 1919px) {
	.on-full {
		display: none !important;
	}
}

@media (max-width: 1279px) {
	.on-not-design {
		display: none !important;
	}
}

@media (max-width: 374px) {
	.on-not-spdesign {
		display: none !important;
	}
}

/*------------------------------------------------
	[med] Common
------------------------------------------------*/
:where(.main) :is(h1, h2, h3, h4, h5, h6), :where(.main) .h {
	margin-bottom: 1.6rem;
	line-height: 1.4;
	font-weight: bold;
}

:where(.main) :is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol, dl), :where(.main) .h + :is(p, ul, ol, dl) {
	margin-top: 0;
}

:where(.main) h2 {
	margin-bottom: 2.4rem;
	font-size: 3.2rem;
	color: #00913C;
}

@media only screen and (max-width: 768px) {
	:where(.main) h2 {
		margin-bottom: 1.6rem;
		font-size: 3rem;
	}
}

:where(.main) h3 {
	font-size: 2rem;
}

@media only screen and (max-width: 768px) {
	:where(.main) h3 {
		font-size: 1.8rem;
	}
}

:where(.main) a {
	text-decoration: underline;
	transition-property: opacity, color, background-color, border-color;
}

:where(.main) a:link:where(:hover, :focus) {
	opacity: 0.7;
	text-decoration: none;
}

.main :is(.lh-p, .lh-wide) {
	line-height: 1.8;
}

.main :is(.lh-h, .lh-narrow) {
	line-height: 1.4;
}

.main .list {
	margin-top: 1.2rem;
}

.main .list > li {
	position: relative;
	margin-top: 1.2rem;
	padding-left: 34px;
}

@media only screen and (max-width: 768px) {
	.main .list > li {
		margin-top: 0.8rem;
	}
}

.main .list > li:first-child {
	margin-top: 0;
}

.main .list > li::before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 8px;
	top: calc(0.8em - 5px);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #005C26;
	color: #fff;
}

.main .list .list > li::before {
	left: 10px;
	top: calc(0.8em - 3px);
	width: 6px;
	height: 6px;
}

.main .message {
	margin-top: 40px;
	padding: 40px 40px;
	background: #F1F7F3;
}

.main .message .h {
	margin-bottom: 1.6rem;
	font-size: 1.8rem;
}

.main .message:has(details.more:last-child) {
	padding-bottom: 12px;
}

.main details.more {
	display: flex;
	flex-direction: column;
}

.main details.more > summary {
	order: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-top: 1.2rem;
	padding: 12px 24px;
	font-weight: bold;
	color: #00913C;
	background-color: rgba(255, 255, 255, 0);
	list-style: none;
}

.main details.more > summary::-webkit-details-marker {
	display: none;
}

.main details.more > summary:is(:hover, :focus) {
	opacity: 0.7;
}

.main details.more[open] > summary::after {
	transform: rotate(180deg);
}

.main .image figcaption {
	font-weight: bold;
}

.main .image figcaption:first-child {
	margin-bottom: 12px;
}

.main .image figcaption:last-child {
	margin-top: 24px;
}

/* ナビゲーションボタン領域 */
.navi {
	margin-top: 2.4rem;
}

@media only screen and (max-width: 768px) {
	.navi {
		margin-top: 1.6rem;
	}
}

.navi--narrow {
	margin-top: 1.6rem;
}

.navi.cols-auto > p {
	margin-top: 0;
}

@media (min-width: 544px) {
	.navi:is(.cols-sm-auto, .cols-sp-auto) > p {
		margin-top: 0;
	}
}

@media (min-width: 769px) {
	.navi:is(.cols-md-auto, .cols-tab-auto) > p {
		margin-top: 0;
	}
}

@media (min-width: 1200px) {
	.navi:is(.cols-xl-auto, .cols-pc-auto) > p {
		margin-top: 0;
	}
}

/*
	main 内の nav タグのスタイルのリセット
	※グロナビの style 設定が nav に効いてしまう
	※ハンバーガーメニュー開閉時にもインライン style に指定される値もリセット
*/
:where(.main) nav {
	display: block    !important;
	overflow: visible !important;
	height: auto      !important;
	margin-top: 0     !important;
	margin-bottom: 0  !important;
	padding-top: 0    !important;
	padding-bottom: 0 !important;
	background: none;
	color: inherit;
	z-index: auto;
}

@media only screen and (max-width: 768px) {
	:where(.main) nav {
		position: static;
		inset: auto;
		box-shadow: none;
	}
}

/*------------------------------------------------
	スクリーンリーダー用 (テキストの読み上げ専用)
------------------------------------------------*/
.sr-only,
.visually-hidden {
	overflow: hidden !important;
	position: absolute !important;
	clip: rect(0, 0, 0, 0) !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/* テキストの折り返し設定 */
.wrap,
.wrap2,
.wrap3 {
	white-space: normal;
	word-break: keep-all !important;
}

.wrap .nowrap,
.wrap2 .nowrap,
.wrap3 .nowrap {
	display: inline-block;
}

.wrap wbr + .nowrap, .wrap .wbr + .nowrap, .wrap .nowrap:first-child,
.wrap2 wbr + .nowrap,
.wrap2 .wbr + .nowrap,
.wrap2 .nowrap:first-child,
.wrap3 wbr + .nowrap,
.wrap3 .wbr + .nowrap,
.wrap3 .nowrap:first-child {
	display: inline;
}

.wrap wbr, .wrap .wbr,
.wrap2 wbr,
.wrap2 .wbr,
.wrap3 wbr,
.wrap3 .wbr {
	display: inline-block;
}

a.wrap {
	display: inline-block;
}

.nowrap {
	white-space: nowrap;
}

.unwrap {
	word-break: normal !important;
	white-space: normal !important;
}

@media only screen and (max-width: 768px) {
	.wrap2,
	.unwrap_sp,
	html[lang="en"] .wrap {
		word-break: normal !important;
		white-space: normal !important;
	}
	.wrap2 .nowrap,
	.unwrap_sp .nowrap,
	html[lang="en"] .wrap .nowrap {
		display: inline !important;
		white-space: normal !important;
	}
}

@media only screen and (max-width: 543px) {
	.wrap3,
	.unwrap_mini {
		word-break: normal !important;
		white-space: normal !important;
	}
	.wrap3 .nowrap,
	.unwrap_mini .nowrap {
		display: inline !important;
		white-space: normal !important;
	}
}

@media (max-width: 1199px) {
	.unwrap_tab {
		word-break: normal !important;
		white-space: normal !important;
	}
	.unwrap_tab .nowrap {
		display: inline !important;
		white-space: normal !important;
	}
}

/*------------------------------------------------
	[med] ico .. ::after にアイコンを入れる
------------------------------------------------*/
.in-ico::after, :where(.main) a:where([target="_blank"])::after {
	content: "";
	display: inline-block;
	position: relative;
	background: none no-repeat center;
	background-size: contain;
	width: 16px;
	height: 16px;
	margin-left: 1rem;
	vertical-align: -4%;
	transform: translateY(6%);
}

.in-ico--left::after {
	order: -1;
	margin-left: 0;
	margin-right: 1rem;
}

.ab-ico::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	background: none no-repeat center;
	background-size: contain;
	width: 16px;
	height: 16px;
	margin-top: -8px;
}

/* アイコンのリスト */
.ico-blank::after, :where(.main) a:where([target="_blank"])::after {
	background-image: url(../img/ico/ico-blank.svg);
}

.ico-blank-white::after {
	background-image: url(../img/ico/ico-blank-white.svg);
}

.ico-arrow-down::after {
	background-image: url(../img/ico/ico-arrow-down.svg);
}

.ico-arrow-down-white::after {
	background-image: url(../img/ico/ico-arrow-down-white.svg);
}

.ico-arrow-right::after {
	background-image: url(../img/ico/ico-arrow-right.svg);
}

.ico-arrow-right-white::after {
	background-image: url(../img/ico/ico-arrow-right-white.svg);
}

.ico-arrow::after {
	background-image: url(../img/ico/ico-arrow.svg);
}

.ico-arrow-white::after {
	background-image: url(../img/ico/ico-arrow-white.svg);
}

.ico-chevron-down::after {
	background-image: url(../img/ico/ico-chevron-down.svg);
}

.ico-chevron-down-white::after {
	background-image: url(../img/ico/ico-chevron-down-white.svg);
}

.ico-chevron-right::after {
	background-image: url(../img/ico/ico-chevron-right.svg);
}

.ico-chevron-right-white::after {
	background-image: url(../img/ico/ico-chevron-right-white.svg);
}

.ico-download-white::after {
	background-image: url(../img/ico/ico-download-white.svg);
}

.ico-download::after {
	background-image: url(../img/ico/ico-download.svg);
}

.ico-minus::after {
	background-image: url(../img/ico/ico-minus.svg);
}

.ico-plus::after {
	background-image: url(../img/ico/ico-plus.svg);
}

/*------------------------------------------------
	[med] ボタン
------------------------------------------------*/
:is(.main, .navi, .lower) .btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 252px;
	min-height: 3.25em;
	border-radius: 3.25em;
	border: 1px solid #CCC;
	padding: 0.5em 1em;
	line-height: 1.5;
	font-weight: bold;
	text-decoration: none;
	background: #fff;
	color: #222;
}

:is(.main, .navi, .lower) .btn:is(:hover, :focus) {
	opacity: 0.7;
}

:is(.main, .navi, .lower) .btn-primary {
	border-color: transparent;
	background: #00913C;
	color: #fff;
}

.debug :is(.main, .navi, .lower) .btn-primary:is(:hover, :focus) {
	opacity: 1;
	background-color: #005C26;
}

:is(.main, .navi, .lower) .btn-white {
	border-color: transparent;
	box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.16);
}

/*------------------------------------------------
	[med] flex cols
------------------------------------------------*/
.cols {
	gap: 24px;
}

.cols-wrap {
	flex-wrap: wrap;
}

.cols-auto, .cols:is(.cols-1, .cols-2, .cols-3, .cols-4, .cols-5, .cols-6) {
	display: flex;
}

.cols.cols-1 > * {
	width: calc((100% - 24px * 0) / 1);
}

.cols.cols-2 > * {
	width: calc((100% - 24px * 1) / 2);
}

.cols.cols-3 > * {
	width: calc((100% - 24px * 2) / 3);
}

.cols.cols-4 > * {
	width: calc((100% - 24px * 3) / 4);
}

.cols.cols-5 > * {
	width: calc((100% - 24px * 4) / 5);
}

.cols.cols-6 > * {
	width: calc((100% - 24px * 5) / 6);
}

@media only screen and (max-width: 543px) {
	.cols:is([class*="cols-xs-"], [class*="cols-min-"]) {
		display: flex;
	}
	.cols.cols-xs-1 > *,
	.cols.cols-min-1 > * {
		width: calc((100% - 24px * 0) / 1);
	}
	.cols.cols-xs-2 > *,
	.cols.cols-min-2 > * {
		width: calc((100% - 24px * 1) / 2);
	}
	.cols.cols-xs-3 > *,
	.cols.cols-min-3 > * {
		width: calc((100% - 24px * 2) / 3);
	}
	.cols.cols-xs-4 > *,
	.cols.cols-min-4 > * {
		width: calc((100% - 24px * 3) / 4);
	}
	.cols.cols-xs-5 > *,
	.cols.cols-min-5 > * {
		width: calc((100% - 24px * 4) / 5);
	}
	.cols.cols-xs-6 > *,
	.cols.cols-min-6 > * {
		width: calc((100% - 24px * 5) / 6);
	}
}

@media (min-width: 544px) {
	.cols:is([class*="cols-sm-"], [class*="cols-sp-"]) {
		display: flex;
	}
	.cols.cols-sm-1 > *,
	.cols.cols-sp-1 > * {
		width: calc((100% - 24px * 0) / 1);
	}
	.cols.cols-sm-2 > *,
	.cols.cols-sp-2 > * {
		width: calc((100% - 24px * 1) / 2);
	}
	.cols.cols-sm-3 > *,
	.cols.cols-sp-3 > * {
		width: calc((100% - 24px * 2) / 3);
	}
	.cols.cols-sm-4 > *,
	.cols.cols-sp-4 > * {
		width: calc((100% - 24px * 3) / 4);
	}
	.cols.cols-sm-5 > *,
	.cols.cols-sp-5 > * {
		width: calc((100% - 24px * 4) / 5);
	}
	.cols.cols-sm-6 > *,
	.cols.cols-sp-6 > * {
		width: calc((100% - 24px * 5) / 6);
	}
}

@media (min-width: 769px) {
	.cols:is([class*="cols-md-"], [class*="cols-tab-"]) {
		display: flex;
	}
	.cols.cols-md-1 > *,
	.cols.cols-tab-1 > * {
		width: calc((100% - 24px * 0) / 1);
	}
	.cols.cols-md-2 > *,
	.cols.cols-tab-2 > * {
		width: calc((100% - 24px * 1) / 2);
	}
	.cols.cols-md-3 > *,
	.cols.cols-tab-3 > * {
		width: calc((100% - 24px * 2) / 3);
	}
	.cols.cols-md-4 > *,
	.cols.cols-tab-4 > * {
		width: calc((100% - 24px * 3) / 4);
	}
	.cols.cols-md-5 > *,
	.cols.cols-tab-5 > * {
		width: calc((100% - 24px * 4) / 5);
	}
	.cols.cols-md-6 > *,
	.cols.cols-tab-6 > * {
		width: calc((100% - 24px * 5) / 6);
	}
}

@media (min-width: 1025px) {
	.cols:is([class*="cols-lg-"]) {
		display: flex;
	}
	.cols.cols-lg-1 > * {
		width: calc((100% - 24px * 0) / 1);
	}
	.cols.cols-lg-2 > * {
		width: calc((100% - 24px * 1) / 2);
	}
	.cols.cols-lg-3 > * {
		width: calc((100% - 24px * 2) / 3);
	}
	.cols.cols-lg-4 > * {
		width: calc((100% - 24px * 3) / 4);
	}
	.cols.cols-lg-5 > * {
		width: calc((100% - 24px * 4) / 5);
	}
	.cols.cols-lg-6 > * {
		width: calc((100% - 24px * 5) / 6);
	}
}

@media (min-width: 1200px) {
	.cols:is([class*="cols-xl-"], [class*="cols-pc-"]) {
		display: flex;
	}
	.cols.cols-xl-1 > *,
	.cols.cols-pc-1 > * {
		width: calc((100% - 24px * 0) / 1);
	}
	.cols.cols-xl-2 > *,
	.cols.cols-pc-2 > * {
		width: calc((100% - 24px * 1) / 2);
	}
	.cols.cols-xl-3 > *,
	.cols.cols-pc-3 > * {
		width: calc((100% - 24px * 2) / 3);
	}
	.cols.cols-xl-4 > *,
	.cols.cols-pc-4 > * {
		width: calc((100% - 24px * 3) / 4);
	}
	.cols.cols-xl-5 > *,
	.cols.cols-pc-5 > * {
		width: calc((100% - 24px * 4) / 5);
	}
	.cols.cols-xl-6 > *,
	.cols.cols-pc-6 > * {
		width: calc((100% - 24px * 5) / 6);
	}
}

.align-center {
	justify-content: center;
}

.align-start {
	justify-content: flex-start;
}

.align-end {
	justify-content: flex-end;
}

.align-between {
	justify-content: space-between;
}

.align-around {
	justify-content: space-around;
}

.align-evenly {
	justify-content: space-evenly;
}

.align-stretch {
	justify-content: stretch;
}

.valign-center {
	align-items: center;
}

.valign-start {
	align-items: flex-start;
}

.valign-end {
	align-items: flex-end;
}

.valign-baseline {
	align-items: baseline;
}

.valign-stretch {
	align-items: stretch;
}

/*------------------------------------------------
	[med] grid
------------------------------------------------*/
.grid {
	display: grid;
	gap: 24px;
}

.grid.cols-2 {
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
}

.grid.cols-3 {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
}

.grid.cols-4 {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

.grid.cols-5 {
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto;
}

.grid.cols-6 {
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: auto;
}

@media only screen and (max-width: 543px) {
	.grid.cols-xs-2, .grid.cols-min-2 {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-xs-3, .grid.cols-min-3 {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-xs-4, .grid.cols-min-4 {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-xs-5, .grid.cols-min-5 {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-xs-6, .grid.cols-min-6 {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto;
	}
}

@media (min-width: 544px) {
	.grid.cols-sm-2, .grid.cols-sp-2 {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-sm-3, .grid.cols-sp-3 {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-sm-4, .grid.cols-sp-4 {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-sm-5, .grid.cols-sp-5 {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-sm-6, .grid.cols-sp-6 {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto;
	}
}

@media (min-width: 769px) {
	.grid.cols-md-2, .grid.cols-tab-2 {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-md-3, .grid.cols-tab-3 {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-md-4, .grid.cols-tab-4 {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-md-5, .grid.cols-tab-5 {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-md-6, .grid.cols-tab-6 {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto;
	}
}

@media (min-width: 1025px) {
	.grid.cols-lg-2 {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-lg-3 {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-lg-4 {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-lg-5 {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-lg-6 {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto;
	}
}

@media (min-width: 1200px) {
	.grid.cols-xl-2, .grid.cols-pc-2 {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-xl-3, .grid.cols-pc-3 {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-xl-4, .grid.cols-pc-4 {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-xl-5, .grid.cols-pc-5 {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: auto;
	}
	.grid.cols-xl-6, .grid.cols-pc-6 {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto;
	}
}

/*------------------------------------------------
	[med] card (bootstrap風)
------------------------------------------------*/
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px 24px;
	min-width: 0;
	overflow-wrap: anywhere;
	background-color: #fff;
	color: inherit;
}

.card-body {
	flex: 1 1 auto;
}

.card-title, .card-subtitle {
	margin-bottom: 1.6rem;
}

@media only screen and (max-width: 768px) {
	.card-title, .card-subtitle {
		margin-bottom: 0.8rem;
	}
}

.card-subtitle {
	margin-top: -0.8rem;
}

.card-text:last-child {
	margin-bottom: 0;
}

.card-link + .card-link {
	margin-left: 16px;
}

.card-header {
	margin-bottom: 0;
}

.card-image {
	flex-shrink: 0;
}

.card-img-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.card-img, .card-img-top, .card-img-bottom {
	width: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.card-border {
	border: 1px solid #CCC;
	border-radius: 8px;
}

.card-border.card-body {
	padding: 1.6rem 16px;
}

.card-border.card-header {
	margin-bottom: 0;
	padding: 1.6rem 16px;
	border-bottom: 1px solid #CCC;
}

.card-border.card-header:first-child {
	border-radius: 8px 8px 0 0;
}

.card-border.card-footer {
	padding: 1.6rem 16px;
	border-top: 1px solid #CCC;
}

.card-border.card-footer:last-child {
	border-radius: 0 0 8px 8px;
}

.card-border.card-img-overlay {
	padding: var(--bs-card-img-overlay-padding);
	border-radius: 8px;
}

.card-border.card-img, .card-border.card-img-top {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.card-border.card-img, .card-border.card-img-bottom {
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}

@media (min-width: 1200px) {
	.card-pc-right,
	.card-pc-left {
		display: flex;
		flex-direction: row;
	}
	.card-pc-right .card-body,
	.card-pc-left .card-body {
		padding-top: 0;
	}
	.card-pc-right {
		flex-direction: row-reverse;
	}
}

/*------------------------------------------------
	[med] section
------------------------------------------------*/
.section {
	margin-top: 48px;
	padding: 16px 0;
}

@media only screen and (max-width: 768px) {
	.section {
		margin-top: 24px;
	}
}

.subsection {
	margin-top: 40px;
}

.subsection:first-child {
	margin-top: 0;
}

/* [section] 左寄り/右寄り 背景付きセクション */
.section-bg {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	text-align: left;
	background: no-repeat center center;
	background-size: cover;
}

.section-bg .container {
	flex-grow: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.section-bg .container-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media only screen and (max-width: 768px) {
	.section-bg .container-inner {
		max-width: 510px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 769px) {
	.section-bg .container {
		display: flex;
	}
	.section-bg--left .container-inner {
		padding-left: 50%;
	}
	.section-bg--right .container-inner {
		padding-right: 50%;
	}
	.section-bg .container-inner--full {
		width: auto;
		padding-right: 0;
		padding-left: 0;
	}
	.section-bg .container-inner--auto {
		width: -moz-fit-content;
		width: fit-content;
		min-width: 50%;
		padding-right: 0;
		padding-left: 0;
	}
	.section-bg--left .container-inner--auto {
		margin-left: auto;
	}
	.section-bg--right .container-inner--auto {
		margin-right: auto;
	}
}

.section-bg .bg {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	width: 50%;
	height: 100%;
	margin: 0;
	padding: 15px;
	background: none no-repeat center center;
	background-size: cover;
}

@media only screen and (max-width: 768px) {
	.section-bg .bg {
		position: static;
		width: auto;
		height: auto;
		margin: 0 -15px;
	}
}

.section-bg .bg img {
	max-width: 100%;
	height: auto;
}

.section-bg .bg--cover {
	justify-content: stretch;
	align-items: stretch;
	padding: 0;
}

.section-bg .bg--cover > picture {
	flex-grow: 1;
}

.section-bg .bg--cover img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.section-bg--left .bg {
	left: 0;
}

.section-bg--right .bg {
	right: 0;
}

/*------------------------------------------------
	[med] FAQボックス部分
------------------------------------------------*/
.faqbox {
	position: relative;
	margin-bottom: 24px;
	padding: 5px 0;
	border-radius: 8px;
	border: 1px solid #CCC;
	background: #fff;
	text-align: left;
}

@media only screen and (max-width: 768px) {
	.faqbox {
		margin-bottom: 20px;
		padding: 10px 0;
	}
}

.faqbox:last-child {
	margin-bottom: 0 !important;
}

.faqbox-question, .faqbox-answer {
	padding: 16px 24px;
}

@media only screen and (max-width: 768px) {
	.faqbox-question, .faqbox-answer {
		padding: 8px 20px;
	}
}

.faqbox-question {
	position: relative;
	margin: 0;
	margin-bottom: 0 !important;
	padding-right: 60px;
	font-weight: bold;
	font-size: 2rem;
	line-height: 1.4;
}

@media only screen and (max-width: 768px) {
	.faqbox-question {
		padding-right: 54px;
		font-size: 1.8rem;
	}
}

.faqbox.js-faqbox .faqbox-question {
	cursor: pointer;
	transition: opacity 0.2s ease-out;
}

.faqbox.js-faqbox .faqbox-question:hover {
	opacity: 0.7;
}

.faqbox-details[open] .on-close {
	display: none;
}

.faqbox-details:not([open]) .on-open {
	display: none;
}

.faqbox-answer {
	padding-top: 0;
	line-height: 1.8;
}

.faqbox-answer > :first-child,
.faqbox-answer > .text > :first-child {
	margin-top: 0;
}

.faqbox summary {
	position: absolute;
	top: 17px;
	top: calc(1.4rem + 3px);
	right: 16px;
	padding: 8px;
	border-radius: 6px;
	line-height: 1;
	background: none;
	z-index: 2;
	list-style: none;
}

@media only screen and (max-width: 768px) {
	.faqbox summary {
		top: 12px;
		top: calc(1.26rem + 0px);
		right: 10px;
	}
}

.js .faqbox summary {
	z-index: 0;
}

.faqbox summary::-webkit-details-marker {
	display: none;
}

.faqbox summary img {
	max-width: none;
	width: 20px;
	height: 20px;
	vertical-align: bottom;
}

/*------------------------------------------------
	[med][nav] ヘッダー/グロナビのスクロール固定
------------------------------------------------*/
#header {
	position: sticky;
	z-index: 10;
	top: -75px;
	background: #fff;
}

@media only screen and (max-width: 768px) {
	#header {
		top: 0;
		box-shadow: 0 1px 1px #CCC;
	}
}

@media only screen and (max-width: 768px) {
	#header-nav {
		overflow-y: auto;
		max-height: calc(100vh - 56px);
		max-height: calc(100svh - 56px);
	}
}

/*------------------------------------------------
	[med][nav] IIR 研究者主導研究の助成について
------------------------------------------------*/
.nav-iir {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: 408px;
	padding: 70px 0;
	line-height: 1.6;
	background: #222 url("../img/nav/bg-nav-iir.jpg") no-repeat 80% center;
	background-size: cover;
	color: #fff;
}

@media only screen and (max-width: 768px) {
	.nav-iir {
		justify-content: flex-start;
		min-height: 580px;
		background-image: url("../img/nav/bg-nav-iir-sp.jpg");
		background-position: 50% center;
	}
}

.nav-iir h2 {
	margin-bottom: 1.6rem;
	line-height: 1.4;
	font-size: 3.6rem;
	font-weight: bold;
	letter-spacing: 0;
}

@media only screen and (max-width: 768px) {
	.nav-iir h2 {
		font-size: 3.2rem;
	}
}

.nav-iir .subtitle {
	margin-bottom: 0.8rem;
	line-height: 1.4;
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: 0.03em;
	color: #80BA2D;
}

@media only screen and (max-width: 768px) {
	.nav-iir .subtitle {
		font-size: 1.6rem;
	}
}

.nav-iir .summary {
	max-width: 39.6em;
	font-size: 1.8rem;
}

@media only screen and (max-width: 768px) {
	.nav-iir .summary {
		max-width: none;
		font-size: 1.6rem;
	}
}

.nav-iir .btn {
	min-width: 240px;
	min-height: calc(2em + 20px);
	font-size: 1.3rem;
}
