/*  -----------------------------
	変数
 -----------------------------  */
:root {

	--green-1: #B4E650;
	--green-1_2: #8CB33E;
	--green-2: #123801;
	--blue-1: #1F65AA;
	--yellow-1: #EEF200;

	--glay-1: hsl(0,0%,97%);
	--glay-2: hsl(0,0%,92%);
	--glay-3: hsl(0,0%,85%);
	--glay-4: hsl(0,0%,60%);
	--glay-5: hsl(0,0%,20%);

	--link: #002BFF;

	--chapter-1: #DFED47;
	--chapter-1-2: #AFBA38;
	--chapter-2: #CDED64;
	--chapter-2-2: #A1BA4E;
	--chapter-3: #B4E650;
	--chapter-3-2: #8CB33E;
	--chapter-4: #6BDB65;
	--chapter-4-2: #52A84D;
	--chapter-5:#57D998;
	--chapter-5-2:#42A674;
	--column: #57C1D9;
	--column-2: #4494A6;

	/*--width: max(1080px, 68vw);*/
	--width: max(912px, 68vw);

	--mt-l: 160px;
	--mt-m: 88px;
	--mt-s: 48px;

	--hover-1: all 0.3s;

	--opacity: 0.7;
}

@media only screen and (max-width: 960px) {
	:root {
		--width: 90%;

		--mt-l: 144px;
		--mt-m: 72px;
		--mt-s: 40px;
	}
}

@media only screen and (max-width: 767px) {
	:root {
		--width: 95%;

		--mt-l: 120px;
		--mt-m: 64px;
		--mt-s: 32px;
	}
}

/*  -----------------------------
	全体共通
 -----------------------------  */
@font-face {
	font-family: OpenSans-Regular;
	src: url(../fonts/OpenSans-Regular.woff2);
}

@font-face {
	font-family: OpenSans-Italic;
	src: url(../fonts/OpenSans-Italic.woff2);
}

@font-face {
	font-family: OpenSans-Medium;
	src: url(../fonts/OpenSans-Medium.woff2);
}

@font-face {
	font-family: OpenSans-MediumItalic;
	src: url(../fonts/OpenSans-MediumItalic.woff2);
}

@font-face {
	font-family: OpenSans-SemiBold;
	src: url(../fonts/OpenSans-SemiBold.woff2);
}

@font-face {
	font-family: OpenSans-SemiBoldItalic;
	src: url(../fonts/OpenSans-SemiBoldItalic.woff2);
}

.only-pc {
	display: block;
}

.only-sp {
	display: none;
}

@media only screen and (max-width: 960px) {
	.only-pc {
		display: none;
	}

	.only-sp {
		display: block;
	}

	.only-sp--2 {
		display: none;
	}
}

@media only screen and (max-width: 767px) {
	.only-pc {
		display: none;
	}

	.only-sp,
	.only-sp--2 {
		display: block;
	}
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	width: 100vw;
	overflow-x: hidden;
}

body {
	position: relative;
	font-size: 1.6rem;
	font-family: 
		"Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
	width: 100vw;
	overflow-x: hidden;
	transition: font-size 1s;
}

body.fix {
	position: fixed;
	left: 0;
	overflow: hidden;
}

main {
	width: 100%;
	overflow-x: hidden;
	text-align: center;
	margin-top: 80px;
}

main .block {
	max-width: var(--width);
	margin: auto;
}

h1,h2,h3,h4,h5,h6,p,a,li,td {
	font-feature-settings: "palt";
}

a {
	display: inline-block;
}

.flexBox {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.gridBox {
	display: grid;
}

.prohibited {
	pointer-events: none;
	user-select:none;
}


/*  -----------------------------
	リンクボタン
 -----------------------------  */
.linkBtnCnt {
	display: flex;
	place-content: center;
	gap: 5%;
	width: 100%;
	margin-top: var(--mt-l);
}

.linkBtnCnt .linkBtn {
	position: relative;
}

.linkBtnCnt .linkBtn .linkBtn__btn {
	display: flex;
	place-content: center;
	gap: 1em;
	color: var(--green-2);
	font-size: 3.2rem;
	font-weight: 700;
	padding: 1em 2em;
	background-color: var(--green-1);
	border-radius: 32px;
	transform: translateY(0);
	transition: transform 0.2s;
}

.linkBtnCnt .linkBtn .linkBtn__shadow {
	display: block;
	position: absolute;
	left: 0;
	bottom: -12px;
	width: 100%;
	height: 100%;
	background-color: var(--green-1_2);
	border-radius: 32px;
	z-index: -5;
}

@media (hover: hover) {
	.linkBtnCnt .linkBtn .linkBtn__btn:hover {
		transform: translateY(3px);
	}
}

.linkBtnCnt .linkBtn .linkBtn__btn:active {
	transform: translateY(12px);
}

@media only screen and (max-width: 767px) {
	.linkBtnCnt {
		flex-direction: column;
		gap: var(--mt-s);
	}

	.linkBtnCnt .linkBtn {
		width: 90%;
		margin: auto;
	}

	.linkBtnCnt .linkBtn .linkBtn__btn {
		gap: 1em;
		font-size: 2.8rem;
		padding: 1.25em;
	}
}


/*  -----------------------------
	関連項目
 -----------------------------  */
.relation {
	margin-top: var(--mt-l);
}


.relation .title {
	display: flex;
	align-items: center;
	gap: 0.5%;
}

.relation .title__icon {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	background-image: url(../img/common/relation-icon.svg);
	background-repeat: no-repeat;
	background-size: cover;
}

.relation .title__text {
	font-size: 3.2rem;
	font-weight: bold;
	flex: 0 0 4em;
}

@media only screen and (max-width: 767px) {
	.relation .title__text {
		font-size: 2.8rem;
	}
}

.relation .title__line {
	display: block;
	width: 100%;
	height: 4px;
	background-image: linear-gradient(to right, var(--green-2), var(--green-2) 12px, transparent 12px, transparent 24px);
	background-repeat: repeat-x;
	background-size: 24px 4px;
	border: 0;
	flex: 0 1 auto;
}

.relationBtnWrapper {
	display: block;
	width: 100%;
}

.relationBtn {
	display: inline-flex;
	align-items: stretch;
	border: 4px solid var(--green-2);
	border-radius: 24px;
	overflow: hidden;
	margin-top: var(--mt-s);
	transform: translateX(0);
	transition: var(--hover-1);
}

@media (hover: hover) {
	.relationBtn:hover {
		transform: translateX(8px);
	}	
}

.relationBtn__title,
.relationBtn__subtitle {
	display: grid;
	place-content: center;
	font-size: 2.8rem;
	padding: 1.5em;
}

.relationBtn__title {
	flex: 0 0 auto;
	color: white;
	background-color: var(--green-2);
}

.relationBtn__subtitle {
	color: var(--green-2);
}

@media only screen and (max-width: 767px) {
	.relationBtnWrapper {
		width: 90%;
		margin: auto;
	}

	.relationBtn {
		display: flex;
		flex-direction: column;
	}

	.relationBtn__title,
	.relationBtn__subtitle {
		font-size: 2.0rem;
		padding: 0.5em 2em;
	}

	.relationBtn__title {
		width: 100%;
	}
}


/*  -----------------------------
	モーダル
 -----------------------------  */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: block;
	width: 100vw;
	height: 100vh;
	transition: 0.3s ease-out;
}

.modal__image {
	position: absolute;
	max-width: 80%;
	max-height: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	visibility: hidden;
	opacity: 0;
	transition: 0.5s ease-out;
}

.modal[aria-hidden= "true"],
.modal__image[aria-hidden= "true"] {
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	background-color: transparent;
}

.modal[aria-hidden= "false"],
.modal__image[aria-hidden= "false"] {
	visibility: visible;
	opacity: 1;
	background-color: hsla(0, 0%, 0%, 0.7);
}

.modal[aria-hidden= "false"] {
	pointer-events: all;
}

.imgWrapper {
	cursor: pointer;
	opacity: 1;
	transition: var(--hover-1);
}

@media (hover: hover) {
	.imgWrapper:hover {
		opacity: var(--opacity);
	}
}



/*  -----------------------------
	ヘッダー
 -----------------------------  */
header .header--sp {
	display: none;
}

header .header--pc {
	display: block;
	position: relative;
	color: white;
	font-size: 1.4rem;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	border-bottom: 1px solid white;
	z-index: 10;
}

header .header--pc .headerNavBox {
	flex: 1 auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	background-color: var(--green-2);
	padding: 0 clamp(24px,3vw,36px)
}

header .header--pc .headerNavBox .leftItem {

}

header .header--pc .headerNavBox .leftItem > .siteLogo {
	display: inline-block;
	width: clamp(176px, 15vw, 240px);
}

header .header--pc .headerNavBox .leftItem > .siteLogo > img {
	width: 100%;
}

header .header--pc .headerNavBox .rightItem {
	height: 100%;
}

header .header--pc .headerNavBox .rightItem .headerNav {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

header .header--pc .headerNavBox .rightItem .headerNav .headerNav__item ~ .headerNav__item {
	margin-left: clamp(8px,2.5em,80px);
}

header .header--pc .headerNav .headerNav__item {
	display: flex;
	flex-direction: column;
	place-content: center;
	height: 100%;
}

header .header--pc .headerNav .headerNav__item > a {
	position: relative;
	display: flex;
	flex-direction: column;
	place-content: center;
	height: 100%;
	opacity: 1;
	transition: var(--hover-1);
}

header .header--pc .headerNav .headerNav__item > a,
header .header--pc .headerNav .headerNav__item > span,
header .header--pc .utilitiesNav .utilitiesNav__item > span {
	font-size: clamp(10px,0.9vw,1.6rem);
}

@media (hover: hover) {
	header .header--pc .headerNav .headerNav__item > a:hover,
	header .header--pc .headerNav .headerNav__item:nth-of-type(7):hover > span,
	header .header--pc .headerNav .subNav__item:hover > a,
	header .header--pc .utilitiesNav .subNav__item:hover > button {
		opacity: var(--opacity);
	}	
}

header .header--pc .headerNav .subNav__item {
	position: relative;
	display: flex;
	flex-direction: column;
	place-content: center;
	height: 100%;
}

header .header--pc .headerNav .subNav__item > a {
	opacity: 1;
	transition: var(--hover-1);	
}

header .header--pc .headerNav .headerNav__item > a.current::after,
header .header--pc .headerNav .subNav__item > a.current::after,
header .header--pc .utilitiesNav .subNav__item > button.current::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 0px;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 4px;
	background-color: var(--green-1);
}

header .header--pc .headerNav .headerNav__item > span {
	position: relative;
}

header .header--pc .headerNav .headerNav__item > span,
header .header--pc .utilitiesNav .utilitiesNav__item > span {
	cursor: pointer;
}

header .header--pc .headerNav .headerNav__item:nth-of-type(2) > span::after,
header .header--pc .utilitiesNav .utilitiesNav__item:first-of-type > span::after {
	content: "\025bc";
	display: inline-block;
	font-size: .65em;
	width: .65em;
	height: .65em;
	margin-left: .5em;
	transform: translateY(-37.5%);
	transform-origin: right;
	transition: var(--hover-1);
}

header .header--pc .headerNav .headerNav__item:nth-of-type(7) {
	position: relative;
}

header .header--pc .headerNav .headerNav__item:nth-of-type(7) > a {
	margin-right: 1.2em;
}

header .header--pc .headerNav .headerNav__item:nth-of-type(7) > span {
	position: absolute;
	top: 50%;
	right: 0;
	display: inline-block;
	width: 0.8em;
	height: 0.7em;
	background-image: url(../img/common/link-icon-w.svg);
	background-size: cover;
	background-repeat: no-repeat;
	transform: translateY(-45%);
	opacity: 1;
	transition: var(--hover-1);
}

header .header--pc .utilitiesNav .utilitiesNav__item:first-of-type > span::before {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	background-image: url(../img/common/fs-icon-w.svg);
	background-size: cover;
	background-repeat: no-repeat;
	transform: translateY(10%);
	margin-right: .5em;
}

header .header--pc .subNav {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 56px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 5em;
	background-color: var(--green-2);
	border-top: 1px solid white;
	transform: translateY(100%);
}

@media (hover: hover) {
	header .header--pc .headerNav .headerNav__item:hover .subNav,
	header .header--pc .headerNav .headerNav__item .subNav:hover {
		opacity: 1;
		visibility: visible;
		transition: all .3s;
	}

	header .header--pc .headerNav .headerNav__item:nth-of-type(2):hover > span::after,
	header .header--pc .utilitiesNav .utilitiesNav__item:first-of-type:hover > span::after {
		transform: translateY(37.5%) rotate(-180deg);
	}
}

header .header--pc .subNav[aria-hidden= "true"] {
	opacity: 0;
	visibility: hidden;
	transition: all .3s .15s;
}

header .header--pc .subNav[aria-hidden= "false"] {
	opacity: 1;
	visibility: visible;
	transition: all .3s;
}

header .header--pc .headerNav .leftItem {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

header .header--pc .headerNav .rightItem {
}

header .header--pc .utilities {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	column-gap: 2.5rem;
	padding: calc(clamp(18px,2.8vw,20px) / 4) clamp(18px,2.8vw,20px);
	background-color: var(--blue-1);
}

header .header--pc .utilitiesNav {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

header .header--pc .utilitiesNav .subNav {
	background-color: var(--blue-1);
}

header .header--pc .utilitiesNav .subNav__item {
	position: relative;
	display: flex;
	flex-direction: column;
	place-content: center;
	height: 100%;
}

header .header--pc .utilitiesNav .subNav__item > button {
	opacity: 1;
	transition: var(--hover-1);	
}

header .header--pc .utilitiesNav .subNav .subNav__item--l {
	font-size: 2rem;
}

@media (hover: hover) {

	header .header--pc .utilitiesNav .utilitiesNav__item:hover .subNav,
	header .header--pc .utilitiesNav .utilitiesNav__item .subNav:hover {
		opacity: 1;
		visibility: visible;
		transition: all .3s;
	}
}

header .header--sp {
	position: relative;
	display: block;
	visibility: hidden;
}

header .header--sp #menuBtnCheck {
	display: none;
}

header .header--sp .menuBtn {
	position: fixed;
	top: 10px;
	right: 10px;
	display: flex;
	height: 40px;
	width: 40px;
	justify-content: center;
	align-items: center;
	z-index: 100;
	background-color: transparent;
}

header .header--sp .menuBtn > span,
header .header--sp .menuBtn > span::before,
header .header--sp .menuBtn > span::after {
	content: '';
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background-color: var(--green-2);
	position: absolute;
}

header .header--sp .menuBtn > span {
	transition: all 0.2s 0.1s ease-out;
}

header .header--sp .menuBtn > span::before {
	bottom: 8px;
	transition: all 0.2s ease-out;
}

header .header--sp .menuBtn > span::after {
	top: 8px;
	transition: all 0.2s ease-out;
}

header .header--sp .menuBtn.is-active span {
	background-color: transparent;
	transition-delay: 0s;
}

header .header--sp .menuBtn.is-active span::before {
	bottom: 0;
	transform: rotate(45deg);
	background-color: var(--green-2);
	transition-delay: 0.1s;
}

header .header--sp .menuBtn.is-active span::after {
	top: 0;
	transform: rotate(-45deg);
	background-color: var(--green-2);
	transition-delay: 0.1s;
}

header .header--sp .headerNavCnt {
	width: 100%;
	height: 100%;
	color: var(--green-2);
	background: var(--glay-3);
	z-index: 20;
	text-align: left;
	color: var(--green-2);
	font-size: 2.4rem;
	padding: 9vh 5vw;
	position: fixed;
	top: 0;
	left: 100%;
	opacity: 0;
	overflow: auto;
	transition:
		left 0.5s 0.125s,
		opacity 0.325s 0.3s;
}

header .header--sp .menuBtn.is-active ~ .headerNavCnt {
	left: 0;
	opacity: 1;
	transition:
		left 0.5s 0.125s,
		opacity 0.625s;
}

header .header--sp .headerNav {
	margin-top: var(--mt-m);
	padding: 0 5vw;
}

header .header--sp .headerNav__item a,
header .header--sp .subNav__item a {
	position: relative;
	opacity: 1;
	transition: var(--hover-1);
}

@media (hover: hover) {
	header .header--sp .headerNav__item a:hover,
	header .header--sp .subNav__item a:hover,
	header .header--sp .headerNav .headerNav__item:nth-of-type(7):hover span,
	header .header--sp .utilitiesNav .subNav__item {
		opacity: var(--opacity);
	}
}

header .header--sp .headerNav .headerNav__item > a.current::after,
header .header--sp .headerNav .subNav__item > a.current::after,
header .header--sp .utilitiesNav .subNav__item > button.current::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -6px;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 3px;
	background-color: var(--green-2);
}

header .header--sp .headerNav .headerNav__item ~ .headerNav__item {
	margin-top: 1.5em;
}

header .header--sp .headerNav .headerNav__item:nth-of-type(7) > span {
	display: inline-block;
	width: 0.55em;
	height: 0.475em;
	background-image: url(../img/common/link-icon-g.svg);
	background-size: cover;
	background-repeat: no-repeat;
	transform: translateY(15%);
	margin-left: .25em;
	opacity: 1;
	transition: var(--hover-1);
}

header .header--sp .headerNav .headerNav__item:nth-of-type(2) {
	position: relative;	
}

header .header--sp .headerNav .headerNav__item:nth-of-type(2)::before {
	content: "";
	display: block;
	position: absolute;
	top: 36px;
	left: 9px;
	bottom: 0;
	width: 0;
	border-left: 2px solid var(--green-2);
}

header .header--sp .subNav {
	margin-top: 1em;
}

header .header--sp .subNav__item {
	position: relative;
	font-size: 2.0rem;
	margin-left: 1.5em;
	opacity: 1;
	transition: var(--hover-1);
}

header .header--sp .subNav__item ~ .subNav__item {
	margin-top: 1em;
}

header .header--sp .subNav__item::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: -21px;
	width: 16px;
	height: 2px;
	background-color: var(--green-2);
}

header .header--sp .subNav__item:last-of-type::after {
	content: "";
	display: block;
	position: absolute;
	top: calc(0.5em + 3px);
	left: -21px;
	height: 100%;
	width: 2px;
	background-color: var(--glay-3);
}

header .header--sp .utilities {
	text-align: center;
	margin-top: var(--mt-m);
	border-top: 2px dashed var(--green-2);
	padding: var(--mt-m) 5vw 0;
}

header .header--sp .utilitiesNav .utilitiesNav__item:first-of-type > span::before {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	background-image: url(../img/common/fs-icon-g.svg);
	background-size: cover;
	background-repeat: no-repeat;
	transform: translateY(10%);
	margin-right: .75em;
}

header .header--sp .utilitiesNav .subNav {
	display: flex;
	place-content: center;
	align-items: baseline;
	gap: 2em;
	margin-top: var(--mt-s);
}

header .header--sp .utilitiesNav .subNav__item {
	font-size: 1.6rem;
}

header .header--sp .utilitiesNav .subNav__item ~ .subNav__item {
	font-size: 2.0rem;
	/*font-size: 1.8rem;*/
	margin-top: 0;
}

header .header--sp .utilitiesNav .subNav__item::before {
	display: none;
}

header .header--sp .logoCnt {
	margin-top: var(--mt-m);
	text-align: center;
}

header .header--sp .logoCnt .logo {
	display: inline-block;
	width: 50%;
}

header .searchForm {
}

header .searchForm .gsc-control-cse {
	border: none;
	transition: background-color 0.1s 0.3s; 
}

header .searchForm .gsc-input-box {
	padding-top: 5px;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}

header .searchForm form.gsc-search-box {
	margin: 0;
}

header .searchForm form.gsc-search-box .gsib_a {
	color: black;
}

header .gsc-search-button {
	margin-left: 0;
}

header .gsc-search-button-v2 {
	padding: 10px 15px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

header input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
	border-color: white !important;
}

header table.gsc-search-box td.gsc-input {
	padding-right: 0;
}

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

	header .header--pc .headerNavBox .rightItem .headerNav .headerNav__item ~ .headerNav__item {
		margin-left: clamp(5px,1.5em,80px);
	}

	header .header--pc .utilities {
		/*flex-direction: column;*/
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
		gap: 1.25rem;
	}

	header .header--pc .utilitiesNav__item {
	/*	padding-bottom: 1em;*/
	}

	header .header--pc .searchForm {
	/*	order: -1;*/
	}

	header .searchForm .gsc-control-cse {
		padding: 0.75em;
	}

	table.gsc-search-box {
		margin-bottom: -2px;
	}

}

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

	header .header--pc {
		display: none;
	}

	header .js-arrowTrigger {
		position: absolute;
		top: 100vh;
		left: 0;
		display: block;
		width: 100vw;
		height: 100vh;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	header .header--sp {
		visibility: visible;
	}

	header .searchForm .gsc-control-cse {
		background-color: var(--glay-4);
	}
}

@media only screen and (max-width: 767px) {
	
}


/*  -----------------------------
	フッター
 -----------------------------  */
footer {
	position: relative;
	width: 100%;
	font-weight: 500;
	margin-top: calc(var(--mt-l) * 2);
}

footer::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: 753px;
	height: 480px;
	transform: translate(10%, -50%);
	background-image: url(../img/common/footer-road.svg);
	background-repeat: no-repeat;
	background-size: cover;
}

footer > .footer--pc .upperCnt {
	gap: min(16px, 3vw);
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	color: var(--green-2);
	background-color: var(--green-1);
	/*padding: 80px;*/
	padding: max(40px, 4vw);
}

footer > .footer--pc .upperCnt .leftItem {
	flex: 0 1 max(400px,41vw);
}

footer > .footer--pc .upperCnt .txtCnt-u .txtCnt-u--l {
	/*font-size: 1.6rem;*/
	font-size: clamp(12px,1.3vw,1.6rem);
}

footer > .footer--pc .upperCnt .txtCnt-u .txtCnt-u--s {
	/*font-size: 1.4rem;*/
	font-size: clamp(12px,1.2vw ,1.4rem);
	font-family: OpenSans-SemiBoldItalic;
	margin-top: 1.0em;
}

footer > .footer--pc .upperCnt .txtCnt-m {
	margin-top: var(--mt-s);
}

footer > .footer--pc .upperCnt .txtCnt-m .txtCnt-m--l {
	width: clamp(360px, 30vw, 520px);
}

footer > .footer--pc .upperCnt .txtCnt-m .txtCnt-m--s {
	font-size: clamp(2.6rem, 2.5vw, 4.0rem);
	margin-top: 0.5em;
}

footer > .footer--pc .upperCnt .txtCnt-l {
	margin-top: var(--mt-m);
}

footer > .footer--pc .upperCnt .txtCnt-l .txtCnt-l--l {
	font-family: OpenSans-SemiBoldItalic;
	font-size: clamp(2.6rem, 2.5vw, 4.0rem);
}

footer > .footer--pc .upperCnt .txtCnt-l .txtCnt-l--s {
	font-family: OpenSans-SemiBoldItalic;
	font-size: clamp(1.8rem, 2vw, 2.4rem);
	margin-top: 0.5em;
}

footer > .footer--pc .upperCnt .footerNavBox {

}

footer > .footer--pc .upperCnt .footerNavBox > .footerNav {
	display: grid;
	grid-template:
		clamp(3.2rem, 2.5vw, 4.8rem) 1fr /
		50% 50%;
	grid-template-areas:
		"left-1 right-1"
		"left-2 right-2"
		"left-2 right-3"
		"left-2 right-4"
		"left-2 right-5";
	gap: clamp(3.2rem, 2.5vw, 4.8rem);
}

.footer--pc .footerNav__item {
	position: relative;
}

.footer--pc .footerNav__item:nth-of-type(1) {
	grid-area: left-1;
}

.footer--pc .footerNav__item:nth-of-type(2) {
	grid-area: left-2;
}

.footer--pc .footerNav__item:nth-of-type(3) {
	grid-area: right-1;
}

.footer--pc .footerNav__item:nth-of-type(4) {
	grid-area: right-2;
}

.footer--pc .footerNav__item:nth-of-type(5) {
	grid-area: right-3;
}

.footer--pc .footerNav__item:nth-of-type(6) {
	grid-area: right-4;
}

.footer--pc .footerNav__item:nth-of-type(7) {
	grid-area: right-5;
}

footer > .footer--pc .upperCnt .footerNav__item > p,
footer > .footer--pc .upperCnt .footerNav__item > a {
	font-size: clamp(2.5rem, 2.5vw, 4.8rem);
	opacity: 1;
	transition: var(--hover-1);
}

.footer--pc .footerNav__item:nth-of-type(7) {
	position: relative;
}

@media (hover: hover) {
	footer > .footer--pc .upperCnt .footerNav__item > a:hover,
	footer > .footer--pc .upperCnt .footerNav__item:nth-of-type(7):hover > span,
	footer > .footer--pc .upperCnt .footerNavBox .subNav .subNav__item > a:hover {
		opacity: var(--opacity);
	}	
}

footer > .footer--pc .upperCnt .footerNav__item:nth-of-type(7) > span {
	position: absolute;
	bottom: 0%;
	right: 0%;
	display: inline-block;
	width: 1.1em;
	height: 1.0em;
	background-image: url(../img/common/link-icon-g.svg);
	background-size: cover;
	background-repeat: no-repeat;
	transform: translateY(-35%);
	opacity: 1;
	transition: var(--hover-1);
}

footer > .footer--pc .upperCnt .footerNavBox .subNav {
	height: 100%;
	display: grid;
	margin-top: clamp(2.4rem, 2vw, 3.2rem);
	padding-left: 2em;
}

footer > .footer--pc .upperCnt .footerNavBox .subNav .subNav__item > a {
	position: relative;
	font-size: calc(clamp(2.4rem, 2vw, 3.2rem) * 0.8);
	opacity: 1;
	transition: var(--hover-1);
}

footer > .footer--pc .upperCnt .footerNavBox .subNav .subNav__item > a::before {
	content: "\2212";
	position: absolute;
	top: -0.125em;
	left: -0.75em;
	width: 1em;
	height: 1em;
}

footer > .footer--pc .upperCnt .scrollBtn {
	text-align: center;
}

footer > .footer--pc .upperCnt .scrollBtn__icon {
	display: grid;
	place-content: center;
	width: max(80px,7vw);
	height: max(80px,7vw);
	border: 3px solid var(--green-2);
	border-radius: 50%;
	padding: 8px;
}

footer > .footer--pc .upperCnt .scrollBtn__icon > img {
	height: 32px;
	transform: translateX(10%);
	transition: var(--hover-1);
}

@media (hover: hover) {

	footer > .footer--pc .upperCnt .scrollBtn__icon:hover > img {
		transform: translate(10%, -10%);
		transition: var(--hover-1);
	}
}

footer > .footer--pc .upperCnt .scrollBtn__text {
	font-family: OpenSans-SemiBold;
	font-size: 1rem;
	margin-top: 1em;
}

footer > .footer--pc .lowerCnt {
	color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	background-color: var(--green-2);
	padding: 40px 80px;
}

footer > .footer--pc .lowerCnt > .leftItem {
	display: flex;
	gap: 48px;
}

footer > .footer--pc .lowerCnt > .leftItem .logo {
	display: inline-block;
	width: 280px;
}

footer > .footer--pc .lowerCnt > .leftItem .logo img {
	width: 100%;
}

footer > .footer--pc .lowerCnt .flexBox {
	gap: 16px;
}

footer > .footer--pc .lowerCnt .flexBox__copy {
	font-size: 1.8rem;
	font-family: OpenSans-SemiBold;
	font-weight: 700;
}

footer > .footer--pc .lowerCnt .flexBox__icon--x {
	width: 38px;
	height: 32px;
}

footer > .footer--pc .lowerCnt .flexBox__icon--youtube {
	width: 48px;
	height: 32px;
}

footer > .footer--pc .lowerCnt .flexBox__icon > img {
	width: 100%;
	height: 100%;
}

footer > .footer--pc .lowerCnt > .rightItem > .rights {
	font-size: 1.3rem;
}

footer > .footer--sp {
	display: none;
}

@media only screen and (max-width: 959px) {
	footer > .footer--pc .upperCnt {
		flex-direction: column;
	}

	footer > .footer--pc .upperCnt .footerNavBox > .footerNav {
		grid-template-rows: repeat(7, auto);
	}

	footer > .footer--pc .upperCnt .middleItem {
		order: -1;
		margin-top: -12.5%;
	}

	footer > .footer--pc .upperCnt .leftItem {
		margin-top: var(--mt-m);
	}

	footer > .footer--pc .upperCnt .rightItem {
		order: -2;
		place-self: end;
	}

	footer > .footer--pc .upperCnt .footerNav__item:nth-of-type(7) > span {
		right: auto;
		left: 7.5em;
	}
}

@media only screen and (max-width: 767px) {
	footer {
		margin-top: var(--mt-m);
	}

	footer > .footer--pc {
		display: none;
	}

	footer > .footer--sp {
		display: block;
		color: white;
		text-align: center;
		padding: 2.0rem 0;
		background-color: var(--green-2);
	}

	footer {
		margin-top: var(--mt-s);
	}

	footer::before {
		display: none;
	}

	footer > .footer--sp > .rights {
		font-size: 1.2rem;
	}
}


/*  -----------------------------
	セカンドページ見出し
 -----------------------------  */
#heading {
	position: relative;
	display: grid;
	place-content: center;
	width: 100vw;
	aspect-ratio: 6 / 1;
	min-height: 280px;
	background-color: var(--glay-1);
}

#heading::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#chapter1_body #heading::after {
	background-image: url(../img/heading/heading-1.svg);
}

#chapter2_body #heading::after {
	background-image: url(../img/heading/heading-2.svg);
}

#chapter3_body #heading::after {
	background-image: url(../img/heading/heading-3.svg);
}

#chapter4_body #heading::after {
	background-image: url(../img/heading/heading-4.svg);
}

#chapter5_body #heading::after {
	background-image: url(../img/heading/heading-5.svg?00);
}
#columnList_body #heading::after {
	background-image: url(../img/heading/heading-6.svg);
}

body[data-category="column"] #heading::after {
	background-image: url(../img/heading/heading-7.svg);
}

#chronology_body #heading::after {
	background-image: url(../img/heading/heading-8.svg);
}

#references_body #heading::after {
	background-image: url(../img/heading/heading-9.svg);
}

#sitemap_body #heading::after {
	background-image: url(../img/heading/heading-10.svg);
}

#heading .heading__title {
	position: relative;
	z-index: 5;
	font-size: 6.4rem;
	font-weight: 700;
	letter-spacing: 0.015em;
	text-align: center;
	padding: 0 1em;
}

#heading .heading__title--s {
	font-size: 4.0rem;
	letter-spacing: 0.015em;
	margin-bottom: 0.2em;
}

@media only screen and (max-width: 960px) {
	#heading {
		min-height: 240px;
	}

	#heading .heading__title {
		font-size: 4.8rem;
	}

	#heading .heading__title--s {
		font-size: 2.8rem;
	}
}

@media only screen and (max-width: 767px) {
	#heading {
		min-height: 200px;
	}

	#heading .heading__title {
		font-size: 3.2rem;
	}

	#heading .heading__title--s {
		font-size: 2.0rem;
	}
}

/*  -----------------------------
	パンくずリスト
 -----------------------------  */
 .breadcrumbsCnt {
 	width: 100%;
 	background-color: var(--glay-3);
 }

.breadcrumbs {
	font-size: 1.6rem;
	line-height: 1.3;
	max-width: var(--width);
	margin: auto;
	padding: 0.5em;
}

.breadcrumbs li {
	display: inline;
}

.breadcrumbs li:not(:last-child)::after {
	content: " > ";
	margin-left: 0.5em;
}

.breadcrumbs li ~ li {
	margin-left: 0.5em;
}

.breadcrumbs li a {
	text-decoration: underline;
	opacity: 1;
	transition: var(--hover-1);
}

@media (hover: hover) {
	.breadcrumbs li a:hover {
		opacity: var(--opacity);
	}	
}

/*  -----------------------------
	SNS
 -----------------------------  */
#sns {
	color: black;
	text-align: center;
	width: 100%;
	padding: 40px 0 48px;
	background-color: var(--glay-3);
	margin-top: var(--mt-l);
}

#sns h2 {
	font-size: 3.2rem;
	font-weight: 700;
}

#sns .gridBox {
	grid-template-rows: 80px;
	grid-template-columns: repeat(3, 80px);
	place-content: center;
	column-gap: 64px;
	margin-top: var(--mt-s);
}

#sns .gridItem {
	
}

#sns .gridItem > img {
	width: 100%;
	height: 100%;
	transform: scale(1);
	transition: var(--hover-1);
}

@media (hover: hover) {
	#sns .gridItem:hover > img {
		transform: scale(1.1);
	}
}

@media only screen and (max-width: 767px) {
	#sns {
		padding: 32px 0 40px;
		margin-top: var(--mt-m);
	}

	#sns h2 {
		font-size: 2.6rem;
	}
	
	#sns .gridBox {
		grid-template-rows: 56px;
		grid-template-columns: repeat(3, 56px);
		column-gap: calc(56px * 0.75);
	}	
}


/*  -----------------------------
	ローダー
 -----------------------------  */
.loaderCnt {
	position: fixed;
	top: 0;
	left: 0;
	display: grid;
	place-content: center;
	width: 100vw;
	height: 100vh;
	background-color: var(--green-1);
	z-index: 500;
	opacity: 1;
	transform: translateX(0%);
	transform-origin: right;
}

.loaderCnt.loaded {
	animation: loaded 0.5s forwards;
}

@keyframes loaded {
	0%{
		transform: translateX(0%);
		opacity: 1;
	}
	100%{
		transform: translateX(100%);
		opacity: 0;
	}
}

#js-loader {
	display: grid;
	place-content: center;
	gap: 10%;
}

#js-loader progress {
	width: 100vw;
	block-size: 1.5vh;
	border-radius: 0;
}

#js-loader progress::-webkit-progress-bar {
	background-color: white;
}

#js-loader progress::-moz-progress-bar {
	background-color: white;
}

#js-loader progress::-webkit-progress-value {
	background-color: var(--green-2);
}

#js-loader progress::-ms-fill {
	background-color: var(--green-2);
}

#js-loader span {
	display: inline-block;
	color: var(--green-2);
	font-size: 2.4rem;
	font-weight: 500;
	text-align: center;
}


/*  -----------------------------
	スクロールアロー
 -----------------------------  */
.topScrollArrowWrapper {
	display: none;
}

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

	.topScrollArrowWrapper {
		display: flex;
		justify-content: flex-end;
		margin-top: var(--mt-s);
	}

	.topScrollArrow {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-right: var(--mt-s);
		transition: var(--hover-1);
	}

	.topScrollArrow__icon {
		display: grid;
		place-content: center;
		width: max(32px,14vw);
		height: max(32px,14vw);
		border: 3px solid var(--green-2);
		border-radius: 50%;
		padding: 8px;
	}

	.topScrollArrow__icon > img {
		height: 28px;
		transform: translateX(25%);
		transition: var(--hover-1);
	}

	@media (hover: hover) {
		.topScrollArrow__icon:hover > img {
			transform: translate(25%, -10%);
			transition: var(--hover-1);
		}
	}

	.topScrollArrow__text {
		font-family: OpenSans-SemiBold;
		font-size: 0.8rem;
		margin-top: 1em;
	}
}