@charset "utf-8";
.mfp-bg {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1042;
		overflow: hidden;
		position: fixed;
		background: none;
		box-sizing: border-box;
}
.mfp-bg::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: none;
		transition: background 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mfp-bg.mfp-ready::before {
		background: rgba(0, 0, 0, 0.3);
}
.mfp-wrap {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1043;
		position: fixed;
		outline: none !important;
		-webkit-backface-visibility: hidden;
		transition: all 1s;
}
.mfp-container {
		text-align: center;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		padding: 0;
}
.mfp-container:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
}
.mfp-align-top .mfp-container:before {
		display: none;
}
.mfp-content {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin: 0 auto;
		text-align: left;
		z-index: 1045;
}
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
		width: 100%;
		cursor: auto;
}
.mfp-ajax-cur {
		cursor: progress;
}
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
		cursor: zoom-out;
}
.mfp-zoom {
		cursor: pointer;
		cursor: -webkit-zoom-in;
		cursor: -moz-zoom-in;
		cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
		cursor: auto;
}
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
		user-select: none;
}
.mfp-loading.mfp-figure {
		display: none;
}
.mfp-hide {
		display: none !important;
}
.mfp-preloader {
		color: #CCC;
		position: absolute;
		top: 50%;
		width: auto;
		text-align: center;
		margin-top: -0.8em;
		left: 8px;
		right: 8px;
		z-index: 1044;
}
.mfp-preloader a {
		color: #CCC;
}
.mfp-preloader a:hover {
		color: #FFF;
}
.mfp-s-ready .mfp-preloader {
		display: none;
}
.mfp-s-error .mfp-content {
		display: none;
}
button.mfp-close, button.mfp-arrow {
		overflow: visible;
		cursor: pointer;
		border: 0;
		-webkit-appearance: none;
		display: block;
		outline: none;
		padding: 0;
		z-index: 1046;
		box-shadow: none;
		touch-action: manipulation;
		width: 38px;
		height: 38px;
		background: #fff;
		border-radius: 50%;
		opacity: 1;
}
button.mfp-close {
		width: 50px;
		height: 50px;
		line-height: 50px;
		position: absolute;
		right: -23px;
		top: -23px;
		opacity: 1;
		padding: 0;
		background: #003d72;
		border-radius: 25px;
}
button.mfp-close::before, button.mfp-close::after {
		content: '';
		display: block;
		position: absolute;
		top: 23.5px;
		left: 12px;
		width: 26px;
		height: 3px;
		background: #fff;
		border-radius: 20px;
}
button.mfp-close::before {
		transform: rotate(45deg);
}
button.mfp-close::after {
		transform: rotate(-45deg);
}
.red button.mfp-close {
		background: #e5003f;
}
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
		color: #FFF;
		right: -6px;
		text-align: right;
		padding-right: 6px;
		width: 100%;
}
.mfp-counter {
		position: absolute;
		top: 0;
		right: 0;
		color: #CCC;
		font-size: 12px;
		line-height: 18px;
		white-space: nowrap;
}
.mfp-arrow {
		position: absolute;
		opacity: 1;
		margin-left: calc(50vw - 307px);
		margin-right: calc(50vw - 307px);
		bottom: calc(50% - 18px);
		padding: 0;
		width: 38px;
		height: 38px;
		-webkit-tap-highlight-color: transparent;
}
.mfp-arrow:after {
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		position: absolute;
		top: 12px;
		margin: 0;
}
.mfp-arrow-left {
		left: 0;
}
.mfp-arrow-right {
		right: 0;
}
.mfp-arrow-left::after {
		border-top: 2px solid #333;
		border-left: 2px solid #333;
		transform: rotate(-45deg);
		left: 15px;
}
.mfp-arrow-right::after {
		border-top: 2px solid #333;
		border-right: 2px solid #333;
		transform: rotate(45deg);
		left: 11px;
}
.mfp-iframe-holder {
		padding-top: 40px;
		padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
		line-height: 0;
		width: 100%;
		max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
		top: -40px;
}
.mfp-iframe-scaler {
		width: 100%;
		height: 0;
		overflow: hidden;
		padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
		background: #000;
}
/* Main image in popup */
img.mfp-img {
		width: auto;
		max-width: 100%;
		height: auto;
		display: block;
		line-height: 0;
		box-sizing: border-box;
		padding: 40px 0 40px;
		margin: 0 auto;
}
/* The shadow behind the image */
.mfp-figure {
		line-height: 0;
}
.mfp-figure:after {
		content: '';
		position: absolute;
		left: 0;
		top: 40px;
		bottom: 40px;
		display: block;
		right: 0;
		width: auto;
		height: auto;
		z-index: -1;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
		background: #444;
}
.mfp-bottom-bar {
		margin-top: -36px;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		cursor: auto;
}
.mfp-title {
		text-align: left;
		line-height: 18px;
		color: #F3F3F3;
		word-wrap: break-word;
		padding-right: 36px;
}
.mfp-image-holder .mfp-content {
		max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
		cursor: pointer;
}
.modalBox {
		position: relative;
		background: #FFF;
		width: inherit;
		max-width: 496px;
		min-height: 400px;
		margin: 20px auto;
		transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
		opacity: 0;
		transform: scale(1.4);
		border: 6px solid #003d72;
		border-radius: 20px;
		box-sizing: border-box;
}
.modalBox::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
}
.modalBox.red {
		border: 6px solid #e5003f;
}
.mfp-ready .modalBox {
		opacity: 1;
		transform: scale(1);
}
/* ============ */
.modalBox_inner {
		padding: 25px 30px;
		position: relative;
		z-index: 5;
		overflow: hidden;
		border-radius: 0 0 0 14px;
}
.modalBox_hdr {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		font-family: 'Outfit', sans-serif;
		color: #003d72;
}
.red .modalBox_hdr {
		color: #e5003f;
}
.modalBox_hdr_hd {
		margin-right: 10px;
		font-size: 13px;
}
.modalBox_hdr_year {
		padding-left: 10px;
		font-size: 20px;
		font-weight: 600;
		border-left: 1px solid #003d72;
		line-height: 1;
}
.red .modalBox_hdr_year {
		border-left: 1px solid #e5003f;
}
.modalBox_figure {
		margin: 0 0 15px;
		position: relative;
		z-index: 5;
}
.modalBox_figure img {
		width: 100%;
		height: auto;
}
.modalBox_caption_inner {
		position: relative;
		z-index: 5;
}
.modalBox_caption_inner h5 {
		font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.6;
		text-align: center;
		margin: 0 0 10px;
		color: #003d72;
}
.red .modalBox_caption_inner h5 {
		color: #e5003f;
}
.modalBox_inner .modalBox_bg {
		position: absolute;
		bottom: -85px;
		left: -14px;
		font-family: 'Outfit', sans-serif;
		font-weight: 600;
		font-size: 80px;
		line-height: 1;
		color: #f5f7f9;
		transform-origin: left top;
		transform: rotate(-90deg);
}
.red .modalBox_bg {
		color: #fef5f7;
}
.modalBox_caption {
		/* height: 150px; */
		overflow: auto;
}
.modalBox_caption.large {
		height: 300px;
}
@media(max-width: 767px) {
		.modalBox_caption.large {
				height: calc(100vh - 400px);
		}
}
.modalBox_caption::-webkit-scrollbar {
		width: 7px;
}
.modalBox_caption::-webkit-scrollbar-track {
		background-color: #ccd8e3;
}
.modalBox_caption::-webkit-scrollbar-thumb {
		background-color: #003d72;
}
.red .modalBox_caption::-webkit-scrollbar-track {
		background-color: #fef5f7;
}
.red .modalBox_caption::-webkit-scrollbar-thumb {
		background-color: #e5003f;
}
.modalBox_caption_inner {
		padding-right: 15px;
}
.modalBox_caption p {
		line-height: 1.8;
		font-size: 14px;
}
@media(max-width: 640px) {
		.mfp-container {
				overflow: hidden;
				position: fixed;
		}
		main {
				overflow: hidden;
		}
		.modalBox {
				max-width: inherit;
				width: 100%;
				height: 100vh;
				margin: 0;
				box-sizing: border-box;
				transform: scale(1) translateY(50vh);
				transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.3s linear, opacity 0.2s linear;
		}
		.mfp-ready .modalBox {
				opacity: 1;
				transform: scale(1) translateY(0);
				border-radius: 0;
		}
		button.mfp-close {
				width: 40px;
				height: 40px;
				line-height: 40px;
				right: 10px;
				top: 10px;
				border-radius: 20px;
		}
		button.mfp-close::before, button.mfp-close::after {
				top: 18.5px;
				left: 8px;
				width: 24px;
				height: 3px;
		}
		.modalBox_inner {
				padding: 25px 15px;
				box-sizing: border-box;
				height: 100vh;
				height: -webkit-fill-available;
		}
		.modalBox {
				border: none !important;
		}
		.modalBox_hdr {
				margin-bottom: 25px;
		}
		.modalBox_caption_inner h5 {
				font-size: 4.2vw;
				text-align: left;
		}
		.modalBox_caption p {
				font-size: 14px;
				text-align: justify;
		}
		.modalBox_caption_inner {
				padding-right: 10px;
		}
		.modalBox_caption {
				height: calc(100vh - 200px);
				box-sizing: border-box;
				overflow: scroll;
				-webkit-overflow-scrolling: touch;
				position: relative;
				z-index: 50;
		}
		.mfp-arrow {
				margin-left: 0;
				margin-right: 0;
				bottom: 25px !important;
				padding: 0;
				border: 1px solid #333 !important;
				transition: all 0.3s;
		}
		.mfp-arrow-left {
				left: 20px;
		}
		.mfp-arrow-right {
				right: 20px;
		}
		.mfp-arrow-left::after {
				border-top: 2px solid #333;
				border-left: 2px solid #333;
				transform: rotate(-45deg);
				left: 15px;
		}
		.mfp-arrow-right::after {
				border-top: 2px solid #333;
				border-right: 2px solid #333;
				transform: rotate(45deg);
				left: 11px;
		}
}
@media (max-width: 374px) {
		.modalBox_caption_inner h5 {
				font-size: 4.6vw;
		}
}