@charset "utf-8";

@media (min-width: 768px) and (max-width: 1199px) {
	html {
		font-size: calc(10 / 1199 * 100vw);
	}
}

@media (max-width: 767px) {
	html {
		font-size: calc(10 / 375 * 100vw);
	}
}

body {
	background-color: #c1e8f8;
	font-family: dnp-shuei-gothic-gin-std, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-feature-settings: "palt";
	line-height: 1.5;
	height: auto;
	position: relative;
}

body::before {
	background: url(../images/common/bg_main.webp) repeat-y top center;
	background-size: 100% auto;
	mix-blend-mode: overlay;
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

body * {
	box-sizing: border-box;
}

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

div,p,li,span{
	margin: 0;
	font-size: 100%;
}

a {
	color: #000000;
	transition: 0.3s;
}

a:hover {
	text-decoration: none;
	opacity: 0.7;
}

a:link { color: #000000; }
a:visited { color: #000000; }
a:active { color: #000000; }

.ls-1 {
	letter-spacing: -0.1em;
}

.grecaptcha-badge {
	display: none!important;
}

img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* header
-------------------------------------------------------------- */
header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	padding: 30px;
	z-index: 999;
}

header img {
	width: 100%;
}

header #headerLogo {
	max-width: 268px;
}

header #headerMenuButton {
	color: #000000;
	position: absolute;
	top: 30px;
	right: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-family: sictake-karami, sans-serif;
	font-weight: 400;
	font-style: normal;
	cursor: pointer;
	z-index: 3;
}

header #headerMenuButton::before {
	background-color: #000000;
	mask-image: url(../images/common/icon_menu.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: auto 100%;
	content: "";
	position: relative;
	width: 54px;
	height: 44px;
}

html:has(header.open) {
	overflow: hidden;
}

header.open #headerMenuButton {
	color: #ffffff;
}

header.open #headerMenuButton::before {
	background-color: #ffffff;
	mask-image: url(../images/common/icon_menu_close.svg);
}

header #headerMenu {
	background-color: #cedebd;
	width: 100%;
	height: 100vh;
	padding-top: 60px;
	position: fixed;
	top: 100vh;
	left: 0;
	z-index: -1;
	transition: all 0.3s;
	overflow-y: auto;
}

header.open #headerMenu {
	top: 0;
	z-index: 2;
}

header #headerMenu #headerMenuLogo {
	max-width: 268px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	position: relative;
}

header #headerMenu #headerMenuLogo::after {
	background: url(../images/common/bg_wave.svg) no-repeat center center;
	background-size: 100% auto;
	content: "";
	width: 200px;
	aspect-ratio: 200 / 26;
	position: relative;
}

header #headerMenu #headerMenuNav {
	margin-top: 32px;
}

header #headerMenu .headerMenuNavList > li {
	font-size: 1.8rem;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 400;
	line-height: calc(42 / 18);
	text-align: center;
}

@media (min-width: 768px) and (max-width: 1199px) {
	header {
		padding: calc(30 / 1199 * 100vw);
	}

	header #headerLogo {
		max-width: calc(268 / 1199 * 100vw);
	}

	header #headerMenuButton {
		top: calc(30 / 1199 * 100vw);
		right: calc(30 / 1199 * 100vw);
		gap: calc(6 / 1199 * 100vw);
	}

	header #headerMenuButton::before {
		width: calc(54 / 1199 * 100vw);
		height: calc(44 / 1199 * 100vw);
	}

	header #headerMenu {
		padding-top: calc(60 / 1199 * 100vw);
	}

	header #headerMenu #headerMenuLogo {
		max-width: calc(268 / 1199 * 100vw);
		gap: calc(30 / 1199 * 100vw);
	}

	header #headerMenu #headerMenuLogo::after {
		width: calc(200 / 1199 * 100vw);
	}

	header #headerMenu #headerMenuNav {
		margin-top: calc(32 / 1199 * 100vw);
	}
}

@media (max-width: 767px) {
	header {
		padding: calc(15 / 375 * 100vw) calc(13 / 375 * 100vw);
	}

	header.scrolled {
		background-color: #c1e8f8;
	}

	header.scrolled::after {
		background-color: #c1e8f8;
		mask-image: url(../images/top/bg_section.svg);
		mask-repeat: no-repeat;
		mask-position: center bottom;
		mask-size: 100% auto;
		content: "";
		width: 100%;
		aspect-ratio: 1200 / 88;
		position: absolute;
		top: calc(40 / 375 * 100vw);
		left: 0;
		transform: scaleY(-1);
		z-index: -1;
	}

	header #headerLogo {
		max-width: calc(150 / 375 * 100vw);
	}

	header #headerMenuButton {
		top: calc(18 / 375 * 100vw);
		right: calc(15 / 375 * 100vw);
		gap: calc(6 / 375 * 100vw);
		font-size: 1.6rem;
	}

	header #headerMenuButton::before {
		width: calc(33 / 375 * 100vw);
		height: calc(27 / 375 * 100vw);
	}

	header #headerMenu {
		padding-top: calc(30 / 375 * 100vw);
	}

	header #headerMenu #headerMenuLogo {
		max-width: calc(150 / 375 * 100vw);
		gap: calc(25 / 375 * 100vw);
	}

	header #headerMenu #headerMenuLogo::after {
		width: calc(120 / 375 * 100vw);
	}

	header #headerMenu #headerMenuNav {
		margin-top: calc(32 / 375 * 100vw);
	}

	header #headerMenu .headerMenuNavList > li {
		font-size: 1.8rem;
		line-height: calc(32 / 18);
	}
}

/* main
-------------------------------------------------------------- */
main {
	position: relative;
	overflow: hidden;
	z-index: 2;
}

main p {
	transform: scaleX(0.88);
	transform-origin: left;
	width: 113.6%;
	letter-spacing: 0.025em;
}

main > *:last-child {
	padding-bottom: 140px!important;
	position: relative;
}

@media (min-width: 1201px) {
	main > *:last-child {
		padding-bottom: calc(140 / 1201 * 100vw)!important;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	main > *:last-child {
		padding-bottom: calc(140 / 1199 * 100vw)!important;
	}
}

@media (max-width: 767px) {
	main > *:last-child {
		padding-bottom: calc(80 / 375 * 100vw)!important;
	}
}

/* mainvisual
-------------------------------------------------------------- */
#mainvisual {
/*    aspect-ratio: 1200 / 754;*/
	height: 754px;
    padding-block: 120px 132px;
    position: relative;
}

#mainvisual::before {
    background: url(../images/common/bg_mainvisual.svg) no-repeat center top;
    background-size: 100% auto;
    content: "";
    width: 100%;
    aspect-ratio: 1200 / 754;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

#mainvisual::after {
    background-color: #c3e5e4;
    content: "";
    width: 100%;
    aspect-ratio: 1200 / 620;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

#mainvisual + * {
    margin-top: -132px;
	z-index: 3;
}

/*#mainvisual .mainHeading {
	margin-top: 150px;
	padding-bottom: 25px;
	position: relative;
	z-index: 1;
}

#mainvisual .mainHeading::after {
	background-color: #000000;
	content: "";
	width: 45px;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

#mainvisual .mainHeading > .mainTitle {
	transform: scaleX(0.88);
	transform-origin: left;
	width: 113.6%;
	font-size: 100px;
	font-family: sictake-karami, sans-serif;
	font-weight: 400;
	line-height: calc(120 / 100);
	text-align: center;
	letter-spacing: 0.05em;
}

#mainvisual .mainHeading > .subText {
	font-size: 21px;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	line-height: calc(36 / 21);
	text-align: center;
}*/
#mainvisual .mainHeading {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: fit-content;
	height: 100%;
	padding-bottom: 110px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

#mainvisual .mainHeading::after {
	background-color: #000000;
	content: "";
	width: 45px;
	height: 1px;
	margin-top: 25px;
	position: relative;
}

#mainvisual .mainHeading > .mainTitle {
	transform: scaleX(0.88);
	transform-origin: center;
	width: 113.6%;
	font-size: 100px;
	font-family: sictake-karami, sans-serif;
	font-weight: 400;
	line-height: calc(120 / 100);
	text-align: center;
	letter-spacing: 0.05em;
}

#mainvisual .mainHeading > .subText {
	transform-origin: center;
	font-size: 21px;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	line-height: calc(36 / 21);
	text-align: center;
}

@media (min-width: 1201px) {
    #mainvisual {
		height: calc(754 / 1201 * 100vw);
        padding-block: calc(120 / 1201 * 100vw) calc(132 / 1201 * 100vw);
    }

	#mainvisual + * {
        margin-top: calc(-132 / 1201 * 100vw);
    }

/*	#mainvisual .mainHeading {
		margin-top: calc(150 / 1201 * 100vw);
		padding-bottom: calc(25 / 1201 * 100vw);
	}

	#mainvisual .mainHeading::after {
		width: calc(45 / 1201 * 100vw);
		height: calc(1 / 1201 * 100vw);
	}

	#mainvisual .mainHeading > .mainTitle {
		font-size: calc(100 / 1201 * 100vw);
	}

	#mainvisual .mainHeading > .subText {
		font-size: calc(21 / 1201 * 100vw);
	}*/

	#mainvisual .mainHeading {
		padding-bottom: calc(110 / 1201 * 100vw);
	}

	#mainvisual .mainHeading::after {
		width: calc(45 / 1201 * 100vw);
		height: calc(1 / 1201 * 100vw);
		margin-top: calc(25 / 1201 * 100vw);
	}

	#mainvisual .mainHeading > .mainTitle {
		font-size: calc(100 / 1201 * 100vw);
	}

	#mainvisual .mainHeading > .subText {
		font-size: calc(21 / 1201 * 100vw);
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
    #mainvisual {
		height: calc(754 / 1199 * 100vw);
        padding-block: calc(120 / 1199 * 100vw) calc(132 / 1199 * 100vw);
    }

	#mainvisual + * {
        margin-top: calc(-132 / 1199 * 100vw);
    }

/*	#mainvisual .mainHeading {
		margin-top: calc(150 / 1199 * 100vw);
		padding-bottom: calc(25 / 1199 * 100vw);
	}

	#mainvisual .mainHeading::after {
		width: calc(45 / 1199 * 100vw);
		height: calc(1 / 1199 * 100vw);
	}

	#mainvisual .mainHeading > .mainTitle {
		font-size: calc(100 / 1199 * 100vw);
	}

	#mainvisual .mainHeading > .subText {
		font-size: calc(21 / 1199 * 100vw);
	}*/

	#mainvisual .mainHeading {
		padding-bottom: calc(110 / 1199 * 100vw);
	}

	#mainvisual .mainHeading::after {
		width: calc(45 / 1199 * 100vw);
		height: calc(1 / 1199 * 100vw);
		margin-top: calc(25 / 1199 * 100vw);
	}

	#mainvisual .mainHeading > .mainTitle {
		font-size: calc(100 / 1199 * 100vw);
	}

	#mainvisual .mainHeading > .subText {
		font-size: calc(21 / 1199 * 100vw);
	}
}

@media (max-width: 767px) {
    #mainvisual {
/*        aspect-ratio: 375 / 320;*/
		height: calc(320 / 375 * 100vw);
        padding-block: calc(64 / 375 * 100vw) calc(41 / 375 * 100vw);
    }

    #mainvisual::before {
        background-image: url(../images/common/bg_mainvisual_sp.svg);
        aspect-ratio: 375 / 320;
    }

    #mainvisual::after {
        aspect-ratio: 375 / 278;
    }

	#mainvisual + * {
        margin-top: calc(-41 / 375 * 100vw);
    }
/*	#mainvisual .mainHeading {
		margin-top: calc(40 / 375 * 100vw);
		padding-bottom: calc(16 / 375 * 100vw);
	}

	#mainvisual .mainHeading::after {
		width: calc(45 / 375 * 100vw);
		height: calc(1 / 375 * 100vw);
	}

	#mainvisual .mainHeading > .mainTitle {
		font-size: calc(45 / 375 * 100vw);
		line-height: calc(54 / 45);
	}

	#mainvisual .mainHeading > .subText {
		font-size: calc(21 / 375 * 100vw);
	}*/

	#mainvisual .mainHeading {
		padding-bottom: calc(34 / 375 * 100vw);
	}

	#mainvisual .mainHeading::after {
		width: calc(45 / 375 * 100vw);
		height: calc(1 / 375 * 100vw);
		margin-top: calc(10 / 375 * 100vw);
	}

	#mainvisual .mainHeading > .mainTitle {
		font-size: calc(45 / 375 * 100vw);
		line-height: calc(54 / 45);
	}

	#mainvisual .mainHeading > .subText {
		font-size: calc(21 / 375 * 100vw);
	}
}

/* section
-------------------------------------------------------------- */
section {
    padding-block: 108px 130px;
    position: relative;
}

section > .sectionInner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 50px;
}

@media (min-width: 1201px) {
    section {
        padding-block: calc(108 / 1201 * 100vw) calc(130 / 1201 * 100vw);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    section {
        padding-block: calc(108 / 1199 * 100vw) calc(130 / 1199 * 100vw);
    }

    section > .sectionInner {
        padding-inline: calc(50 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
	section {
		padding-block: calc(70 / 375 * 100vw) calc(78 / 375 * 100vw);
	}

    section > .sectionInner {
        padding-inline: calc(10 / 375 * 100vw);
    }
}

/* footer
-------------------------------------------------------------- */
footer {
	background: #c3e5e4 url(../images/common/bg_footer.svg) no-repeat center bottom;
	background-size: 100% auto;
	width: 100%;
/*	aspect-ratio: 1200 / 535;*/
	padding-top: 20px;
	padding-bottom: 553px;
	position: relative;
	z-index: 2;
}

footer::before {
    background-color: #c3e5e4;
	mask-image: url(../images/top/bg_section.svg);
	mask-repeat: no-repeat;
	mask-position: center bottom;
	mask-size: 100% auto;
	content: "";
	width: 100%;
	aspect-ratio: 1200 / 88;
	position: absolute;
	top: -84px;
	left: 0;
}

footer #copyright {
	font-size: 1.6rem;
	text-align: center;
	letter-spacing: 0.025em;
	width: 113.6%;
	position: absolute;
	left: 0;
	bottom: 35px;
	transform: scaleX(0.88);
	transform-origin: left;
}

@media (min-width: 1201px) {
	footer {
		padding-top: calc(20 / 1201 * 100vw);
		padding-bottom: calc(553 / 1201 * 100vw);
	}

	footer::before {
		top: calc(-84 / 1201 * 100vw);
	}

	footer #copyright {
		bottom: calc(35 / 1201 * 100vw);
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	footer {
		padding-top: calc(20 / 1199 * 100vw);
		padding-bottom: calc(553 / 1199 * 100vw);
	}

	footer::before {
		top: calc(-84 / 1199 * 100vw);
	}

	footer #copyright {
		bottom: calc(35 / 1199 * 100vw);
	}
}

@media (max-width: 767px) {
	footer {
		background-image: url(../images/common/bg_footer_sp.svg);
/*		aspect-ratio: 277 / 150;*/
		padding-top: calc(20 / 375 * 100vw);
		padding-bottom: calc(203 / 375 * 100vw);
        padding-inline: calc(20 / 375 * 100vw);
	}
	
	footer::before {
        top: calc(-26 / 375 * 100vw);
	}

	footer #copyright {
		font-size: 1.4rem;
		bottom: calc(30 / 375 * 100vw);
	}
}

/* スクロールアニメーション
-------------------------------------------------------------- */
*[data-scroll], *[data-load] {
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
    transition: opacity 0.8s, -webkit-transform 0.8s;
    transition: opacity 0.8s, transform 0.8s;
    transition: opacity 0.8s, transform 0.8s, -webkit-transform 0.8s;
    opacity: 0;
    -webkit-transform: translateY(6rem);
           transform: translateY(6rem);
    --gap: 250ms;
}
@media screen and (min-width: 768px) {
    *[data-scroll], *[data-load] {
        --gap: 250ms;
    }
}
*[data-scroll][data-scroll-delay="1"], *[data-load][data-scroll-delay="1"] {
    -webkit-transition-delay: calc(var(--gap) * 1);
            transition-delay: calc(var(--gap) * 1);
}
*[data-scroll][data-scroll-delay="2"], *[data-load][data-scroll-delay="2"] {
    -webkit-transition-delay: calc(var(--gap) * 2);
            transition-delay: calc(var(--gap) * 2);
}
*[data-scroll][data-scroll-delay="3"], *[data-load][data-scroll-delay="3"] {
    -webkit-transition-delay: calc(var(--gap) * 3);
            transition-delay: calc(var(--gap) * 3);
}
*[data-scroll][data-scroll-delay="4"], *[data-load][data-scroll-delay="4"] {
    -webkit-transition-delay: calc(var(--gap) * 4);
            transition-delay: calc(var(--gap) * 4);
}
*[data-scroll][data-scroll-delay="5"], *[data-load][data-scroll-delay="5"] {
    -webkit-transition-delay: calc(var(--gap) * 5);
            transition-delay: calc(var(--gap) * 5);
}
*[data-scroll][data-scroll-delay="6"], *[data-load][data-scroll-delay="6"] {
    -webkit-transition-delay: calc(var(--gap) * 6);
            transition-delay: calc(var(--gap) * 6);
}
*[data-scroll][data-scroll-delay="7"], *[data-load][data-scroll-delay="7"] {
    -webkit-transition-delay: calc(var(--gap) * 7);
            transition-delay: calc(var(--gap) * 7);
}
*[data-scroll][data-scroll-delay="8"], *[data-load][data-scroll-delay="8"] {
    -webkit-transition-delay: calc(var(--gap) * 8);
            transition-delay: calc(var(--gap) * 8);
}
*[data-scroll][data-scroll-delay="9"], *[data-load][data-scroll-delay="9"] {
    -webkit-transition-delay: calc(var(--gap) * 9);
            transition-delay: calc(var(--gap) * 9);
}
*[data-scroll][data-scroll-delay="10"], *[data-load][data-scroll-delay="10"] {
    -webkit-transition-delay: calc(var(--gap) * 10);
            transition-delay: calc(var(--gap) * 10);
}

*[data-scroll].scroll-show, *[data-load].scroll-show {
    opacity: 1;
    scale: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

*[data-scroll=fadein-top], *[data-load=fadein-top] {
    -webkit-transform: translateY(-3rem);
            transform: translateY(-3rem);
}

*[data-scroll=fadein], *[data-load=fadein] {
    scale: 0;
    -webkit-transition: opacity 0.4s, -webkit-transform 0.4s, scale 0.4s;
    transition: opacity 0.4s, -webkit-transform 0.4s, scale 0.4s;
    transition: opacity 0.4s, transform 0.4s, scale 0.4s;
    transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s, scale 0.4s;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

/* 改行制御 スマホ
-------------------------------------------------------------- */
@media screen and (min-width: 768px){
	.onlySP { display: none; }
}
	
@media screen and (max-width: 767px) {
	.onlyPC { display: none; }	
}

/* アーカイブページ
-------------------------------------------------------------- */
.archive .cards {
    display: flex;
    justify-content: flex-start;
    gap: 30px 60px;
	flex-wrap: wrap;
	max-width: 810px;
	margin-inline: auto;
    position: relative;
}

.archive .cards .card {
    width: calc((100% - 60px * 2) / 3);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.archive .cards .card .cardImage {
    background-color: #ffffff;
    width: 100%;
    aspect-ratio: 220 / 153;
    border-radius: 10px;
    overflow: hidden;
}

.archive .cards .card .cardImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.archive .cards .card .cardTitle {
    font-size: 1.8rem;
    line-height: calc(22 / 18);
	letter-spacing: 0.05em;
}

.archive .cards .card .cardBottom {
    display: flex;
    gap: 30px;
    position: relative;
}

.archive .cards .card .cardBottom > * {
    width: fit-content;
}

.archive .cards .card .cardDate {
    font-size: 1.6rem;
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: calc(22 / 16);
	letter-spacing: 0.05em;
}

.archive .cards .card .cardCategory {
    font-size: 1.6rem;
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: calc(22 / 16);
	letter-spacing: 0.05em;
    position: relative;
}

.archive .cards .card .cardCategory::before {
    background-color: #040000;
    content: "";
    width: 1px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
}

.archive .pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	margin: 80px auto 0;
}

.archive .pager .pageCount {
	text-align: center;
	display: none;
	flex: 1;
}

.archive .pager .pageNumbers {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 45px;
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
}

.archive .pager .pageNumbers.first,
.archive .pager .pageNumbers.last,
.archive .pager .pageNumbers.prev,
.archive .pager .pageNumbers.next {
	color: #ffffff;
	background-color: #55ac6f;
	border-radius: 50%;
	text-indent: -9999px;
	position: relative;
	overflow: hidden;
}

.archive .pager .pageNumbers.first::before,
.archive .pager .pageNumbers.last::before,
.archive .pager .pageNumbers.prev::before,
.archive .pager .pageNumbers.next::before {
    background-color: #ffffff;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% auto;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}

.archive .pager .pageNumbers.prev::before,
.archive .pager .pageNumbers.next::before {
	mask-image: url(../images/common/icon_arrow.svg);
	width: 12px;
	height: 12px;
}

.archive .pager .pageNumbers.prev::before {
	transform: rotate(180deg);
}

.archive .pager .pageNumbers.first::before,
.archive .pager .pageNumbers.last::before {
	mask-image: url(../images/common/icon_arrow_d.svg);
	width: 10px;
	height: 12px;
}

.archive .pager .pageNumbers.first::before {
	transform: rotate(180deg);
}

.archive .pager .pageNumbers.deactive {
	background-color: #dddddd!important;
}

.archive .noPostMessage {
	font-size: 2.4rem;
	font-weight: 600;
	text-align: center;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .archive .cards {
        gap: calc(30 / 1199 * 100vw) calc(60 / 1199 * 100vw);
		max-width: calc(810 / 1199 * 100vw);
    }

	.archive .cards .card {
        width: calc((100% - (60 / 1199 * 100vw) * 2) / 3);
        gap: calc(18 / 1199 * 100vw);
    }

    .archive .cards .card .cardImage {
        border-radius: calc(10 / 1199 * 100vw);
    }

    .archive .cards .card .cardBottom {
        gap: calc(30 / 1199 * 100vw);
    }

    .archive .cards .card .cardCategory::before {
        width: calc(1 / 1199 * 100vw);
        height: calc(15 / 1199 * 100vw);
        left: calc(-15 / 1199 * 100vw);
    }

	.archive .pager {
		gap: calc(15 / 1199 * 100vw);
		margin-top: calc(80 / 1199 * 100vw);
	}

	.archive .pager .pageNumbers {
		width: calc(45 / 1199 * 100vw);
	}

	.archive .pager .pageNumbers.prev::before,
	.archive .pager .pageNumbers.next::before {
		width: calc(12 / 1199 * 100vw);
		height: calc(12 / 1199 * 100vw);
	}

	.archive .pager .pageNumbers.first::before,
	.archive .pager .pageNumbers.last::before {
		width: calc(10 / 1199 * 100vw);
		height: calc(12 / 1199 * 100vw);
	}
}

@media (max-width: 767px) {
	.archive {
		padding-top: calc(70 / 375 * 100vw);
	}

    .archive .cards {
        flex-direction: column;
        justify-content: flex-start;
        gap: calc(30 / 375 * 100vw);
		width: calc(300 / 375 * 100vw);
		max-width: none;
    }

    .archive .cards .card {
        width: 100%;
        gap: calc(16 / 375 * 100vw);
    }

    .archive .cards .card .cardTitle {
        font-size: 1.8rem;
        line-height: calc(22 / 18);
    }

    .archive .cards .card .cardBottom {
        display: flex;
        gap: calc((30 / 375 * 100vw) * 1.136);
        position: relative;
    }

    .archive .cards .card .cardCategory::before {
        width: calc(1 / 375 * 100vw);
        height: calc(15 / 375 * 100vw);
        left: calc(-15 / 375 * 100vw);
    }

	.archive .pager {
		gap: calc(12 / 375 * 100vw);
		width: calc(330 / 375 * 100vw);
		margin-top: calc(64 / 375 * 100vw);
	}

	.archive .pager .pageCount {
		display: block;
	}

	.archive .pager .pageNumbers {
		width: calc(35 / 375 * 100vw);
	}

	.archive .pager .pageNumbers.num,
	.archive .pager .pageNumbers.dots {
		display: none;
	}

	.archive .pager .pageNumbers.prev::before,
	.archive .pager .pageNumbers.next::before {
		width: calc(12 / 375 * 100vw);
		height: calc(12 / 375 * 100vw);
	}

	.archive .pager .pageNumbers.first::before,
	.archive .pager .pageNumbers.last::before {
		width: calc(10 / 375 * 100vw);
		height: calc(12 / 375 * 100vw);
	}

	.archive .noPostMessage {
		font-size: 1.8rem;
	}
}

/* 投稿ページ
-------------------------------------------------------------- */
.post article {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	max-width: 700px;
	margin-inline: auto;
}

.post .postImage {
	width: 100%;
	aspect-ratio: 700 / 486;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
}

.post .postImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.post .postHeading {
    display: flex;
    gap: 15px 30px;
	flex-wrap: wrap;
	width: 100%;
	padding: 0 20px 24px;
	border-bottom: 3px dotted #0a0305;
    position: relative;
}

.post .postHeading > * {
    width: fit-content;
}

.post .postHeading .postDate {
    font-size: 1.6rem;
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: calc(22 / 16);
	letter-spacing: 0.05em;
}

.post .postHeading .postCategory {
    font-size: 1.6rem;
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: calc(22 / 16);
	letter-spacing: 0.05em;
    position: relative;
}

.post .postHeading .postCategory::before {
    background-color: #040000;
    content: "";
    width: 1px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
}

.post .postHeading .postTitle {
    font-size: 2.4rem;
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
	font-weight: 600;
    font-style: normal;
    line-height: calc(22 / 24);
	letter-spacing: 0.05em;
    width: 100%;
}

.post .postBody {
	width: 100%;
	padding-inline: 5px;
}

.post .postBody > * {
	margin-top: 1.5em;
}

.post .postBody > *:first-child {
	margin-top: 0!important;
}

.post .postBody > *:last-child {
	margin-bottom: 0!important;
}

.post .postBody h2 {
    display: flex;
    align-items: baseline;
    gap: calc(6px * 1.136);
    width: 113.6%;
    transform: scaleX(0.88);
    transform-origin: left;
    margin-block: 2em 1.5em;
	font-size: 1.8rem;
    position: relative;
}

.post .postBody h2::before {
    background-color: #55ac6f;
    content: "";
    width: calc(10px * 1.136);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
    transform: scaleY(0.88);
    order: -1;
}

.post .postBody h2::after {
    background-color: #fff06c;
    content: "";
    width: calc(10px * 1.136);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
    transform: scaleY(0.88);
    order: -1;
}

.post .postBody img {
	border-radius: 10px;
}

.post .postBody ol {
	counter-reset: listnum;
	list-style: none;
}

.post .postBody ul > li,
.post .postBody ol > li {
    display: flex;
    align-items: baseline;
    gap: calc(6px * 1.136);
    width: 113.6%;
    transform: scaleX(0.88);
    transform-origin: left;
    position: relative;
}

.post .postBody ul > li::before {
    background-color: #55ac6f;
    content: "";
    width: calc(10px * 1.136);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
    transform: scaleY(0.88);
}

.post .postBody ol > li::before {
	counter-increment: listnum;
	content: counter(listnum)".";
/*	text-align: right;
	width: 1.5em;*/
	text-align: left;
	width: fit-content;
	min-width: calc(10px * 1.136);
    position: relative;
    flex: 0 0 auto;
    transform: scaleY(0.88);
}

.post .postBody table {
    width: fit-content;
    border-collapse: separate;
    border-spacing: 2px;
    transform: scaleX(0.88);
    transform-origin: left;
    letter-spacing: 0.05em;
}

.post .postBody table thead th {
    color: #ffffff;
    background-color: #55ac6f;
    padding: 12px calc(20px * 1.136);
    text-align: center;
    vertical-align: middle;
}

.post .postBody table tbody th,
.post .postBody table tbody td {
    background-color: #ffffff;
    padding: 12px calc(25px * 1.136);
    vertical-align: middle;
}

.post .postBody table tbody th {
    text-align: center;
}

.post .gallery {
	display: flex;
	gap: 30px 40px;
	flex-wrap: wrap;
	margin-inline: -5px;
}
.post .gallery > * {
	width: calc((100% - 40px) / 2);
}

.post figure {
	position: relative;
}

.post figure > .picture {
	width: 100%;
	aspect-ratio: 330 / 230;
	border-radius: 10px;
	overflow: hidden;
}

.post figure > .picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.post figure > figcaption {
	transform: scaleX(0.88);
	transform-origin: left;
	width: 113.6%;
	margin-top: 12px;
	padding-inline: calc(6px * 1.136);
	letter-spacing: 0.05em;
}

.post figure > .picture_link {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.post .linkButton {
    width: fit-content;
    margin: 40px auto 0;
    transform: scaleX(0.88);
    transform-origin: center;
}

.post .linkButton > a {
    color: #ffffff;
    background-color: #55ac6f;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(20px * 1.136);
    width: max-content;
    padding: 14px calc(32px * 1.136);
    border-radius: 30px;
    font-size: 1.4rem;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 700;
    position: relative;
}

.post .linkButton > a:hover {
    text-decoration: none;
}

.post .linkButton > a::after {
    background-color: #ffffff;
	mask-image: url(../images/common/icon_arrow.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% auto;
    content: "";
    width: calc(12px * 1.136);
    height: 12px;
    position: relative;
    flex: 0 0 auto;
}

@media (min-width: 768px) and (max-width: 1199px) {
	.post article {
		gap: calc(40 / 1199 * 100vw);
		max-width: calc(700 / 1199 * 100vw);
	}
	
	.post .postImage {
		border-radius: calc(10 / 1199 * 100vw);
	}

	.post .postHeading {
		gap: calc(15 / 1199 * 100vw) calc(30 / 1199 * 100vw);
		padding: 0 calc(20 / 1199 * 100vw) calc(24 / 1199 * 100vw);
		border-bottom-width: calc(3 / 1199 * 100vw);
	}

	.post .postHeading .postCategory::before {
		width: calc(1 / 1199 * 100vw);
		height: calc(15 / 1199 * 100vw);
		left: calc(-15 / 1199 * 100vw);
	}

	.post .postBody h2 {
		gap: calc((6 / 1199 * 100vw) * 1.136);
	}

	.post .postBody h2::before {
		width: calc((10 / 1199 * 100vw) * 1.136);
	}

	.post .postBody h2::after {
		width: calc((10 / 1199 * 100vw) * 1.136);
	}

	.post .postBody ul > li,
	.post .postBody ol > li {
		gap: calc((6 / 1199 * 100vw) * 1.136);
	}

	.post .postBody ul > li::before {
		width: calc((10 * 1.136) / 1199 * 100vw);
	}

	.post .postBody ol > li::before {
		min-width: calc((10 * 1.136) / 1199 * 100vw);
	}

	.post .postBody img {
		border-radius: calc(10 / 1199 * 100vw);
	}

	.post .postBody table {
		border-spacing: calc(2 / 1199 * 100vw);
	}

	.post .postBody table thead th {
		padding: calc(12 / 1199 * 100vw) calc((20 / 1199 * 100vw) * 1.136);
	}

	.post .postBody table tbody th,
	.post .postBody table tbody td {
		padding: calc(12 / 1199 * 100vw) calc((25 / 1199 * 100vw) * 1.136);
	}

	.post .gallery {
		gap: calc(30 / 1199 * 100vw) calc(40 / 1199 * 100vw);
		margin-inline: calc(-5 / 1199 * 100vw);
	}
	.post .gallery > * {
		width: calc((100% - (40 / 1199 * 100vw)) / 2);
	}

	.post figure > .picture {
		border-radius: calc(10 / 1199 * 100vw);
	}

	.post figure > figcaption {
		margin-top: calc(12 / 1199 * 100vw);
		padding-inline: calc((6 / 1199 * 100vw) * 1.136);
	}

	.post .linkButton {
        margin: calc(40 / 1199 * 100vw) auto 0;
    }

    .post .linkButton > a {
        gap: calc((20 * 1.136) / 1199 * 100vw);
        padding: calc(16 / 1199 * 100vw) calc((32 * 1.136) / 1199 * 100vw);
        border-radius: calc(30 / 1199 * 100vw);
    }

    .post .linkButton > a::after {
        width: calc((12 * 1.136) / 1199 * 100vw);
        height: calc(12 / 1199 * 100vw);
    }
}

@media (max-width: 767px) {
	.post article {
		gap: calc(24 / 375 * 100vw);
		width: calc(320 / 375 * 100vw);
		max-width: none;
	}

	.post .postImage {
		margin-inline: calc(10 / 375 * 100vw);
		border-radius: calc(14 / 375 * 100vw);
	}

	.post .postHeading {
		gap: calc(12 / 375 * 100vw) calc(30 / 375 * 100vw);
		padding: 0 calc(10 / 375 * 100vw) calc(24 / 375 * 100vw);
		border-bottom-width: calc(3 / 375 * 100vw);
	}

	.post .postHeading .postDate {
		order: 2;
	}

	.post .postHeading .postCategory {
		order: 3;
	}

	.post .postHeading .postCategory::before {
		width: calc(1 / 375 * 100vw);
		height: calc(15 / 375 * 100vw);
		left: calc(-15 / 375 * 100vw);
	}

	.post .postHeading .postTitle {
		font-size: 1.8rem;
		line-height: calc(22 / 18);
	}

	.post .postBody {
		padding-inline: calc(4 / 375 * 100vw);
	}

	.post .postBody > * {
		margin-top: 1.5em;
	}

	.post .postBody h2 {
        gap: calc((6 * 1.136) / 375 * 100vw);
    }

    .post .postBody h2::before {
        width: calc((10 * 1.136) / 375 * 100vw);
    }

    .post .postBody h2::after {
        width: calc((10 * 1.136) / 375 * 100vw);
    }

    .post .postBody ul > li,
	.post .postBody ol > li {
        gap: calc((6 * 1.136) / 375 * 100vw);
    }

    .post .postBody ul > li::before {
        width: calc((10 * 1.136) / 375 * 100vw);
    }

	.post .postBody ol > li::before {
        min-width: calc((10 * 1.136) / 375 * 100vw);
	}

	.post .postBody img {
		border-radius: calc(14 / 375 * 100vw);
	}

	.post .postBody table {
		width: 113.6%;
        border-spacing: calc(2 / 375 * 100vw);
    }

    .post .postBody table thead th {
        padding: calc(6 / 375 * 100vw) calc((10 * 1.136) / 375 * 100vw);
        width: auto;
    }

    .post .postBody table tbody th {
        padding: calc(6 / 375 * 100vw) calc((8 * 1.136) / 375 * 100vw);
    }

    .post .postBody table tbody td {
        padding: calc(6 / 375 * 100vw) calc((12 * 1.136) / 375 * 100vw);
    }

	.post .gallery {
		flex-direction: column;
		width: calc(300 / 375 * 100vw);
		gap: calc(28 / 375 * 100vw);
		margin-inline: auto;
	}

	.post .gallery > * {
		width: 100%;
	}

	.post figure > .picture {
		aspect-ratio: 300 / 208;
		border-radius: calc(14 / 375 * 100vw);
	}

	.post figure > figcaption {
		margin-top: calc(18 / 375 * 100vw);
		padding-inline: calc((4 / 375 * 100vw) * 1.136);
	}

	.post .linkButton {
        margin: calc(40 / 375 * 100vw) auto 0;
    }

    .post .linkButton > a {
        gap: calc((12 * 1.136) / 375 * 100vw);
        padding:  calc(14 / 375 * 100vw) calc((22 * 1.136) / 375 * 100vw);
        border-radius: calc(25 / 375 * 100vw);
        font-size: 1.4rem;
    }

    .post .linkButton > a::after {
        width: calc((12 * 1.136) / 375 * 100vw);
        height: calc(12 / 375 * 100vw);
    }
}

.modaal-image .modaal-container {
	padding: 20px;
}

.modaal-image .modaal-gallery-label {
	color: inherit;
	display: block;
	transform: scaleX(0.88);
	transform-origin: left;
	width: 113.6%;
	margin-top: 16px;
	font-size: 1.6rem;
	text-align: left;
	letter-spacing: 0.025em;
	position: relative;
}

.modaal-image .modaal-close {
    width: 50px;
    height: 50px;
}

.modaal-image .modaal-close:focus,.modaal-close:hover {
    background: transparent;
}

.modaal-image .modaal-close:focus:after,.modaal-close:focus:before,.modaal-close:hover:after,.modaal-close:hover:before {
    background: #000000;
}

.modaal-image .modaal-close span {
	display: none;
}

.modaal-image .modaal-close:before {
	background-color: #ffffff;
	mask-image: url(../images/common/icon_menu_close.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: auto 100%;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 0;
}

.modaal-image .modaal-close:after {
	display: none;
}

html:has(.modaal-noscroll) {
	overflow: hidden;
}

@media (max-width: 1140px) {
	.modaal-image .modaal-gallery-control {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}
}

@media (max-width: 767px) {
	.modaal-image .modaal-container {
		padding: calc(12 / 375 * 100vw);
	}
	
	.modaal-image .modaal-gallery-label {
		margin-top: calc(8 / 375 * 100vw);
	}

	.modaal-image .modaal-close {
		top: calc(20 / 375 * 100vw);
		right: calc(10 / 375 * 100vw);
	}

	.modaal-image .modaal-gallery-control {
		width: calc(25 / 375 * 100vw);
		height: calc(25 / 375 * 100vw);
	}

    .modaal-image .modaal-gallery-next {
        right: calc(20 / 375 * 100vw);
    }

	.modaal-image .modaal-gallery-prev {
        left: calc(20 / 375 * 100vw);
    }

	.modaal-image .modaal-gallery-control:after,
	.modaal-image .modaal-gallery-control:before {
		top: calc(8 / 375 * 100vw);
		left: calc(12.5 / 375 * 100vw);
		width: calc(2 / 375 * 100vw);
		height: calc(9 / 375 * 100vw);
		border-radius: calc(2 / 375 * 100vw);
	}
	
	.modaal-image .modaal-gallery-control:before {
		margin: calc(-2.5 / 375 * 100vw) 0 0;
	}
	
	.modaal-image .modaal-gallery-control:after {
		margin: calc(2.5 / 375 * 100vw) 0 0;
	}

	.modaal-image .modaal-gallery-prev:after,
	.modaal-image .modaal-gallery-prev:before {
		left: calc(11 / 375 * 100vw);
	}

	.modaal-image .modaal-gallery-prev:before {
		margin: calc(2.5 / 375 * 100vw) 0 0;
	}

	.modaal-image .modaal-gallery-prev:after {
		margin: calc(-2.5 / 375 * 100vw) 0 0;
	}
}