@charset "UTF-8";

/* message-section */
@media all {
	.message-text {line-height: 2.733;}
	.message-text p + p {margin-top: 1.367em;}
	.message-date {margin-top: 2em;}
	.message-sign {text-align: right;}

	.message-officer {
		line-height: 1;
		text-align: center;
	}
	.officer-img {border-radius: 50%;}
	.officer {
		margin-top: 15rem;
		font-size: 14rem;
		font-weight: normal;
		color: var(--gray);
	}
	.officer-name {
		margin-top: 15rem;
		font-size: 32rem;
	}
	.name-kana {
		margin-top: 10rem;
		font-family: "Zen Kaku Gothic New", sans-serif;
		font-weight: normal;
		color: var(--light-blue);
	}
	.profile {margin-top: 15rem;}
	.prof-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 2px 1.25em 0;
		min-height: 1.5em;
		border-radius: 1em;
		background-color: var(--light-blue);
		font-size: 14rem;
		font-weight: normal;
		color: #fff;
		line-height: 0;
		transition: opacity .3s;
	}
	.prof-btn:hover {
		cursor: pointer;
		opacity: .7;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.bg-webp {padding-bottom: 60rem;}
		.message-section-inner {
			margin: 80rem auto 0;
			max-width: 1000rem;
		}
		.message-content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 40rem;
		}
		.message-sign {line-height: 1;}
		.message-sign img {width: 215rem;}
		.message-officer {
			margin: 50rem auto 0;
			width: 240rem;
		}
		.officer-name {
			margin-top: 12rem;
			font-size: 22rem;
		}
		.name-kana {
			margin-top: 6rem;
			font-size: 14rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.bg-webp {padding-bottom: 100rem;}
		.message-section-inner {
			margin: 80rem auto 0;
			max-width: 1000rem;
		}
		.message-content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 40rem;
		}
		.message-text {width: 610rem;}
		.message-sign img {width: 301rem;}
		.message-officer {width: 360rem;}

		/* tab */
		@media (max-width: 1024px) {
			.message-section-inner,
			.message-text {
				width: 620rem;
				text-align: center;
			}
			.message-content {justify-content: center;}
			.message-sign {text-align: center;}
			.message-officer {margin-top: 40rem;}
		}
	}
}

/* member-sectin */
@media all {
	.member-list {
		display: flex;
		flex-wrap: wrap;
	}
	.member-item {
		text-align: center;
		line-height: 1;
	}
	.member-img img {
		width: 100%;
		border-radius: 50%;
	}
	.member-pos {
		font-weight: normal;
		color: var(--gray);
	}
	.member-name span {display: inline-block;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.member-section {
			margin-top: 80rem;
			padding-bottom: 312rem;
		}
		.member-list {
			justify-content: space-between;
			row-gap: 40rem;
		}
		.member-item {width: 160rem;}
		.member-name {
			margin-top: 1em;
			font-size: 16rem;
		}
		.member-content .name-kana {
			margin-top: 5rem;
			font-size: 14rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.member-section {
			margin-top: 100rem;
			padding-bottom: 480rem;
		}
		.member-section-header {text-align: center;}
		.member-content {margin-top: 60rem;}
		.member-list {
			margin: 0 auto;
			max-width: 995rem;
			gap: 50rem 25rem;
		}
		.member-item {width: 230rem;}
		.member-img {transition: .3s;}
		.member-img:hover {
			opacity: .7;
			cursor: pointer;
		}
		.member-pos {font-size: 13rem;}
		.member-name {
			margin-top: 1em;
			font-size: 18rem;
		}
		.member-content .name-kana {margin-top: 5rem;}

		/* pc */
		@media (min-width: 1025px) {
			.member-item:nth-child(4n+2) {transition-delay: .2s;}
			.member-item:nth-child(4n+3) {transition-delay: .4s;}
			.member-item:nth-child(4n+4) {transition-delay: .6s;}
		}
		/* tab */
		@media (max-width: 1024px) {
			.member-list {width: 765px;}
			.member-item:nth-child(3n+2) {transition-delay: .2s;}
			.member-item:nth-child(3n+3) {transition-delay: .4s;}
		}
	}
}

/* deco */
@media all {

	/* sp */
	@media only screen and (max-width: 767px) {
		.deco-c-2 {display: none;}
		.deco-c-3 {
			bottom: 80rem;
			left: -90rem;
		}
		.deco-9 {
			width: 201.6rem;
			bottom: 110rem;
			right: 0rem;
		}
	}

	/* tab */
	@media (min-width: 768px) and (max-width: 1024px) {
		.deco-c-2 {
			top: 450rem;
			left: calc(50% - 560rem);
			transform: scale(-1, 1);
		}
		.deco-c-3 {
			bottom: 180rem;
			left: calc(50% - 540rem);
		}
		.deco-9 {
			width: 336rem;
			right: 20rem;
			bottom: 100rem;
		}
	}

	/* pc */
	@media print,
	(min-width: 1025px) {
		.deco-c-2 {
			bottom: -50rem;
			left: calc(50% - 800rem);
			transform: scale(-1, 1);
		}
		.deco-c-3 {
			bottom: 180rem;
			left: calc(50% - 800rem);
		}
		.deco-9 {
			width: 420rem;
			right: calc(50% - 620rem);
			bottom: 25rem;
		}
	}
}



/* modal-content */
@media all {
	.slick-btn {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255,255,255,0);
		transition: .3s;
		/* border-radius: 0 .25em .25em 0; */
		line-height: 1;
	}
	.slick-prev-btn {transform: scale(-1, 1);}
	.slick-btn::before {
		content: '';
		width: 1em;
		height: 1em;
		border-bottom: var(--max1px) solid #fff;
		border-left: var(--max1px) solid #fff;
		transition: .3s;
		transform: translateX(-.3em) rotate(225deg);
		transform-origin: center;
	}

	.modal-slider-text-inner {overflow: auto;}
	
	.modal-slider-text {position: relative;}
	.modal-slider-text::after {bottom: 0;}

	.blue-badge {
		display: inline-block;
		padding: 4rem 1em 2rem;
		border-radius: 1em;
		background-color: var(--light-blue);
		font-weight: normal;
		color: #fff;
		line-height: 1;
	}
	.modal-pos {
		font-weight: normal;
		color: var(--gray);
		line-height: 1;
	}
	.modal-name,
	.modal-kana {
		line-height: 1.5;
	}
	.modal-kana {
		display: flex;
		align-items: center;
	}
	.modal-kana .modal-flag {
		margin-left: .5em;
		width: auto;
		height: 1em;
	}

	.content-block .kome {
		position: relative;
		display: inline-block;
		margin-top: .5em;
		padding-left: 1em;
	}
	.content-block .kome::before {
		content: '*';
		position: absolute;
		left: 0;
	}
	.content-block small {
		color: var(--gray);
		font-size: 80%;
		line-height: 1.333;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.modal-slider,
		.slick-track,
		.slick-list,
		.modal-content-inner,
		.modal-slider-item {height: 100%;}
		
		.modal-viewer-wrap::before,
		.modal-viewer-wrap::after {
			content: '';
			position: absolute;
			z-index: 1;
			left: 15rem;
			display: block;
			width: calc(100% - 30rem);
			height: 2em;
			background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
		}
		.modal-viewer-wrap::before {
			top: 0;
			transform: scale(1, -1);
		}
		.modal-viewer-wrap::after {
			bottom: 0;
		}

		.slick-btn {
			top: calc(50% - 50rem);
			width: 55rem;
			height: 100rem;
			font-size: 15rem;
		}
		.slick-next-btn {right: -50rem;}
		.slick-prev-btn {left: -50rem;}

		.modal-slider-item {overflow: auto;}
		.modal-slider-img {
			padding: 20rem 20rem 0;
			height: 305rem;
		}
		.modal-slider-img img {border-radius: 20rem;}

		.modal-slider-text {
			padding: 0 6rem;
		}
		.modal-slider-text-inner {padding: 30rem 10rem 35rem;}

		.content-block {margin-top: 20rem;}
		.modal-pos {font-size: 13rem;}
		.modal-name {
			margin-top: 10rem;
			font-size: 24rem;
		}
		.content-block .blue-badge {margin-bottom: 10rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.modal-slider,
		.slick-track,
		.slick-list,
		.modal-content-inner,
		.modal-slider-item,
		.modal-slider-text,
		.modal-slider-text-inner {height: 100%;}

		.slick-btn {
			top: calc(50% - 50rem);
			width: 50rem;
			height: 100rem;
			font-size: 30rem;
		}
		.slick-next-btn {right: -60rem;}
		.slick-prev-btn {left: -60rem;}
		.slick-btn:hover {
			background-color: rgba(255,255,255,.9);
			cursor: pointer;
		}
		.slick-btn:hover::before {
			border-color: rgba(7,35,81,1);
		}

		.modal-slider-item {
			display: flex!important;
			justify-content: space-between;
		}
		.modal-slider-img {
			margin-top: 50rem;
			width: 260rem;
		}
		.modal-member-img {border-radius: 24rem;}

		.modal-slider-text {width: calc(100% - 310rem);}
		.modal-slider-text::before,
		.modal-slider-text::after {
			content: '';
			position: absolute;
			z-index: 1;
			left: 0;
			display: block;
			width: calc(100% - 25rem);
			height: 2em;
			background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
		}
		.modal-slider-text::before {
			top: 0;
			transform: scale(1, -1);
		}
		
		.modal-slider-text-inner {padding: 50rem 25rem 20rem 0;}
		.modal-pos {font-size: 13rem;}
		.modal-name {
			margin-top: 20rem;
			font-size: 32rem;
		}
		.modal-kana {margin-top: -4rem;}
		.content-block {margin-top: 20rem;}
		.content-block .blue-badge {margin-bottom: 10rem;}

		/* tab */
		@media (max-width: 979px) {
			.slick-btn {scale: .75;}
			.slick-next-btn { right: -50rem;}
			.slick-prev-btn { left: -50rem;}
		}
	}
}

/* modal */
@media all {
	.modal-content {display: none;}
	.modal-base {
		position: fixed;
		z-index: 1111;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background: rgba(7,35,81,.7);
		backdrop-filter: blur(2rem);
		opacity: 1;
		transition: visibility .5s linear, opacity .5s linear;
		pointer-events: all;
	}
	.modal-base.hide {
		visibility: hidden;
		opacity: 0;
	}
	.modal-base-closer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}
	.modal-viewer-wrap {
		position: relative;
		background-color: #fff;
	}

	.modal-viewer {
		position: relative;
		overflow: auto;
		width: 100%;
		height: 100%;
	}


	.modal-closer {
		position: absolute;
		display: block;
		padding: 4rem 0 2rem;
		background-color: var(--main-color);
		border-radius: 1em;
		font-size: 14rem;
		color: #fff;
		line-height: 1;
		text-align: center;
		cursor: pointer;
		transition: background .3s, color .3s;
		line-height: 1;
	}
	.modal-closer:hover {
		background: #fff;
		color: var(--main-color);
	}

	/* sp */
	@media (max-width:767px) {
		.modal-closer {
			bottom: -40rem;
			left: calc(50% - 45rem);
			width: 90rem;
		}
		.modal-viewer-wrap {
			width: calc(100% - 80rem);
			height: calc(100dvh - 140rem);
			border-radius: 15rem;
		}
	}

	/* tab & pc */
	@media (min-width: 768px) {
		.modal-closer {
			bottom: -70rem;
			left: calc(50% - 45rem);
			width: 90rem;
		}
		.modal-viewer-wrap {
			padding: 0 25rem 0 50rem;
			width: calc(100% - 100rem);
			max-width: 870rem;
			height: calc(100vh - 20rem);
			max-height: 440rem;
			border-radius: 30rem;
		}
	}
}






/* template-section */
@media all {

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

	/* pc & tab */
	@media print,
	(min-width: 768px) {}
}