@charset "UTF-8";

.structure {
	margin-top: 0;
	padding-left: 0;
	padding-right: 0;
}

.structure .structure-container {
	padding-bottom: 0;
}

/*
	ページ内共通　common
--------------------------------------- */

/* br */
.br-sp {
	display: none;
}

.br-sptab {
	display: none;
}

.br-pctab {
	display: block;
}

.br-pc {
	display: block;
}

@media only screen and (max-width: 1023px) {
	.br-sptab {
		display: block;
	}

	.br-pctab {
		display: block;
	}

	.br-pc {
		display: none;
	}
}

@media only screen and (max-width: 735px) {
	.br-sp {
		display: block;
	}

	.br-pctab {
		display: none;
	}
}

/* subtitle 共通 */
.subtitle {
	color: #78DC39;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 1.6rem;
	line-height: 1.1;
}

/* imageset 共通 */
.imageset {
	display: flex;
	flex-direction: row-reverse;
}

/*
	movie 共通
*/
.movie {
	max-width: 800px;
	margin: 0 auto;
}

.movie-contents {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.movie iframe,
.movie video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.movie-text {
	margin-top: 40px;
	font-size: 1.6rem;
	line-height: 1.8;
}

/* フェードイン animation */
.js-showIn,
.js-fade {
	opacity: 0;
}

.is-fadeUp {
	animation: fadeUpItem 1s forwards;
}

@keyframes fadeUpItem {
	from {
		opacity: 0;
		transform: translateY(50px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media only screen and (max-width: 735px) {
	.subtitle {
		font-size: 1.4rem;
	}
}


/*
	レイアウト　layout
--------------------------------------- */

/*
	billboard
*/

.billboard {
	position: relative;
	width: 100%;
}

.billboard .billboard-heading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 31.25%;
	max-width: 450px;
	margin: 0 auto;
	z-index: 1;
	opacity: 0;
	transition: opacity 1.5s ease-in;
	transition-delay: 1s;
}

.billboard .billboard-heading.is-show {
	opacity: 1;
}

.billboard .billboard-heading span {
	position: relative;
	display: block;
	width: 100%;
	padding: 0 0 100%;
	z-index: 1;
}

.billboard .billboard-heading span img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 66.67%;
}

.billboard .billboard-heading::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-bottom: 100%;
	background-color: rgba(255,255,255,.5);
	border-radius: 50%;
}

.billboard .billboard-bg {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
	width: 100%;
	height: 0;
	z-index: -1;
}

.billboard .billboard-video {
    position: absolute;
    top: 0;
    left: 0%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -1;
}

@media only screen and (min-width: 1024px) {
	.billboard {
		height: 782px;
	}

	.billboard .billboard-bg {
		padding-bottom: 54.3055%;
	}
}

@media only screen and (min-width: 736px) and (max-width: 1023px) {
	.billboard {
		padding-bottom: 91.7073%;
	}

	.billboard .billboard-heading {
		width: 48.78%;
		max-width: 400px;
	}

	.billboard .billboard-heading span img {
		width: 66.5%;
	}

	.billboard .billboard-bg {
		padding-bottom: 91.7073%;
	}
}

@media only screen and (max-width: 735px) {
	.billboard {
		padding-bottom: 132.2666%;
	}

	.billboard .billboard-heading {
		width: 66.67%;
		max-width: 250px;
	}

	.billboard .billboard-bg {
		padding-bottom: 132.2666%;
	}
}

/*
	anniversary
*/
.anniversary {
	background-color: #F7F7F7;
}

.anniversary-inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 120px 2.08% 120px;
}

.anniversary-detail {
	text-align: center;
}

.anniversary .subtitle {
	margin-bottom: 35px;
}

.anniversary-lead {
	margin-bottom: 50px;
	font-family: "Noto Serif JP", sans-serif;
	font-size: 3.2rem;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: -1px;
}

.anniversary-lead strong {
	color: #0D50A5;
}

.anniversary-lead .br {
	display: none;
}

.anniversary .mod-button-01 {
	max-width: 280px;
	margin: 0 auto;
}

.anniversary .mod-button-01 span {
	min-height: 56px;
}

@media only screen and (min-width: 736px) and (max-width: 1199px) {
	.anniversary-inner {
		padding: 80px 40px;
	}

	.anniversary .counter-count span {
		font-size: 14rem;
	}

	.anniversary-lead {
		text-align: left;
		margin-bottom: 40px;
	}

	.anniversary-lead .br {
		display: block;
	}

	.anniversary .imageset {
		flex-direction: column-reverse;
		justify-content: center;
	}

	.anniversary .imageset-image {
		flex: 1 auto;
		max-width: 414px;
		margin-right: 0;
	}

	.anniversary .imageset-detail {
		flex: 1 auto;
		max-width: 100%;
		text-align: center;
	}

	.anniversary-lead {
		text-align: center;
	}

	.anniversary .mod-button-01 {
		margin:  0 auto;
	}
}

@media only screen and (max-width: 735px) {
	.anniversary-inner {
		padding: 70px 30px 82px;
	}

	.anniversary .imageset {
		flex-direction: column-reverse;
		justify-content: center;
	}

	.anniversary .imageset-detail {
		flex: 1 1 auto;
		max-width: 100%;
		padding-top: 0;
		text-align: center;
	}

	.anniversary .subtitle {
		margin-bottom: 15px;
	}

	.anniversary-lead {
		margin-bottom: 30px;
		font-size: 2.2rem;
		line-height: 1.63;
	}

	.anniversary-lead .br {
		display: block;
	}

	.anniversary .mod-button-01 {
		max-width: 280px;
		margin: 0 auto;
	}

	.anniversary .imageset-image {
		flex: 1 auto;
		max-width: 283px;
		margin-right: 0;
		margin-bottom: 55px;
	}

}


/*
	topmessage
*/
.topmessage {
	position: relative;
	padding: 165px 40px 160px;
}

.topmessage-inner {
	position: relative;
	width: 100%;
	max-width: 1340px;
	margin: 0 auto;
	z-index: 1;
}

.topmessage .imageset-detail {
	flex: 1 1 48.66%;
	max-width: 652px;
}

.topmessage .imageset-image {
	flex: 1 1 44.78%;
	min-width: 315px;
	max-width: 600px;
	margin-right: 6.49%;
}

.topmessage .subtitle {
	margin-bottom: 22px;
}

.topmessage .mod-secondaryHeader {
	margin-top: 0;
	margin-bottom: 40px;
	font-family: "Noto Serif JP", sans-serif;
}

.topmessage .mod-secondaryHeader span {
	font-size: 4rem;
}

.topmessage .mod-regularText + .mod-regularText {
	margin-top: 20px;
}

.topmessage .topmessage-sign {
	margin-top: 30px;
	text-align: right;
}

.topmessage .topmessage-job {
	font-weight: 500;
}

.topmessage .topmessage-name {
	font-family: "Noto Serif JP", sans-serif;
	font-weight: 500;
	font-size: 2.4rem;
	line-height: 1.66;
}

.topmessage .bg1 {
	position: absolute;
	bottom: 72.45%;
	left: 88.75%;
	width: 41.67%;
	max-width: 600px;
}

.topmessage .bg1::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 94.3333%;
	background: url(/assets/img/20th/bg_topmessage_1.png) no-repeat 0 0;
	background-size: cover;
}

.topmessage .bg2 {
	position: absolute;
	top: 31.91%;
	right: 88.75%;
	width: 41.67%;
	max-width: 600px;
}

.topmessage .bg2::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 94.3333%;
	background: url(/assets/img/20th/bg_topmessage_2.png) no-repeat 100% 0;
	background-size: cover;
}

@media only screen and (max-width: 1199px) {
	.topmessage .imageset {
		flex-direction: column-reverse;
	}

	.topmessage .imageset-detail {
		flex: 1 1 auto;
		max-width: 100%;
	}

	.topmessage .subtitle {
		text-align: center;
	}

	.topmessage .mod-secondaryHeader {
		text-align: center;
		margin-bottom: 30px;
	}

	.topmessage .mod-secondaryHeader:after {
		left: 50%;
		transform: translateX(-50%);
	}
}

@media only screen and (min-width: 736px) and (max-width: 1199px) {
	.topmessage {
		padding: 60px 40px 55px;
	}

	.topmessage .imageset-image {
		flex: 1 1 315px;
		max-width: 315px;
		margin: 0 auto 60px;
	}

	.topmessage .bg1 {
		bottom: 79.76%;
		left: 80.73%;
		width: 41.67%;
		max-width: 337px;
	}

	.topmessage .bg2 {
		top: 11.5%;
		right: 81.1%;
		width: 41.67%;
		max-width: 337px;
	}
}

@media only screen and (max-width: 735px) {
	.topmessage {
		padding: 60px 20px;
	}

	.topmessage .mod-secondaryHeader span {
		font-size: 2.2rem;
	}

	.topmessage .imageset-image {
		flex: 1 1 auto;
		max-width: 315px;
		margin: 0 auto 30px;
		padding: 0 15px;
	}

	.topmessage .bg1 {
		bottom: 81.6%;
		left: 86.67%;
		width: 89.87%;
		max-width: 337px;
	}

	.topmessage .bg2 {
		position: absolute;
		top: 9.57%;
		right: 87.6%;
		width: 89.87%;
		max-width: 337px;
	}
}

/*
	slogan
*/
.slogan {
	position: relative;
	color: #fff;
	background-color: #0D50A5;
}

.slogan .slogan-inner {
	padding: 100px 40px 180px 30px;
}

.slogan .slogan-header {
	margin-bottom: 87px;
	text-align: center;
}

.slogan .subtitle {
	color: #fff;
	margin-bottom: 38px;
}

.slogan .slogan-title {
	position: relative;
	max-width: 908px;
	margin: 0 auto 48px;
	padding-bottom: 40px;
}

.slogan .slogan-title::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 3px;
	background-color: #fff;
}

.slogan .slogan-body {
	max-width: 1340px;
	margin: 0 auto;
}

.slogan .imageset {
	align-items: center;
}

.slogan .imageset-detail {
	flex: 1 1 48.66%;
	/* max-width: 652px; */
}

.slogan .imageset-detailInner {
	max-width: 500px;
}

.slogan .imageset-image {
	flex: 1 1 44.78%;
	/* min-width: 315px;
	max-width: 600px; */
	margin-right: 6.57%;
	background-color: #fff;
	border-radius: 10px;
}

.slogan .imageset-image strong {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 76px 0 78px;
}

.slogan .imageset-image strong img {
	width: 41.67%;
	max-width: 250px;
}

.slogan .bg1 {
	position: absolute;
	top: -12%;
	right: 80.24%;
	width: 40.69%;
	max-width: 586px;
}

.slogan .bg1::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #fff;
	border-radius: 50%;
}

.slogan .bg2 {
	position: absolute;
	top: 26.91%;
	right: 78.71%;
	width: 16.81%;
	max-width: 242px;
}

.slogan .bg2::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #fff;
	border-radius: 50%;
}

.slogan .bg3 {
	position: absolute;
	top: 40.73%;
	left: 94.72%;
	width: 16.81%;
	max-width: 242px;
}

.slogan .bg3::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #fff;
	border-radius: 50%;
}

.slogan .bg4 {
	position: absolute;
	top: 80.45%;
	left: 61.53%;
	width: 41.67%;
	max-width: 586px;
}

.slogan .bg4::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #fff;
	border-radius: 50%;
}

@media only screen and (min-width: 736px) and (max-width: 1199px) {
	.slogan .slogan-inner {
		padding-bottom: 109px;
	}

	.slogan .slogan-header {
		margin-bottom: 50px;
	}

	.slogan .slogan-title {
		margin-bottom: 50px;
	}

	.slogan .imageset {
		align-items: flex-start;
	}

	.slogan .imageset-detail {
		flex: 1 1 46.95%;
		max-width: 652px;
	}

	.slogan .imageset-image {
		flex: 1 1 40.85%;
		margin-right: 3.66%;
	}

	.slogan .imageset-image strong {
		padding: 42px 0;
	}

	.slogan .bg1 {
		top: -13.4%;
		right: 85.24%;
		width: 50.37%;
		max-width: 413px;
	}

	.slogan .bg2 {
		top: 18.11%;
		right: 82.8%;
		width: 20.73%;
		max-width: 170px;
	}

	.slogan .bg3 {
		top: 48.23%;
		left: 93.78%;
		width: 20.73%;
		max-width: 170px;
	}

	.slogan .bg4 {
		top: 91.43%;
		left: 68.54%;
		width: 50.37%;
		max-width: 413px;
	}
}

@media only screen and (max-width: 735px) {
	.slogan .slogan-inner {
		padding: 60px 20px 50px;
	}

	.slogan .imageset {
		flex-direction: column-reverse;
	}

	.slogan .slogan-header {
		margin-bottom: 50px;
	}

	.slogan .slogan-header br {
		display: none;
	}

	.slogan .imageset-detail {
		flex: 1 1 auto;
		max-width: 100%;
	}

	.slogan .imageset-image {
		flex: 1 1 100%;
		min-width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.slogan .imageset-image strong {
		padding: 42px 0;
	}

	.slogan .bg1 {
		top: -24.82%;
		right: 80.8%;
		width: 107.2%;
		max-width: 402px;
	}

	.slogan .bg2 {
		top: 6.31%;
		right: 75.73%;
		width: 44.27%;
		max-width: 166px;
	}

	.slogan .bg3 {
		top: 40.59%;
		left: 87.47%;
		width: 44.27%;
		max-width: 166px;
	}

	.slogan .bg4 {
		top: 96.74%;
		left: 33.87%;
		width: 107.2%;
		max-width: 402px;
	}
}

/*
	closing
*/
.closing {
	position: relative;
	min-height: 750px;
	padding: 320px 0 280px;
	background: rgb(199,255,254);
	background: -moz-linear-gradient(0deg, rgba(199,255,254,1) 0%, rgba(199,255,254,0) 49%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(0deg, rgba(199,255,254,1) 0%, rgba(199,255,254,0) 49%, rgba(255,255,255,0) 100%);
	background: linear-gradient(0deg, rgba(199,255,254,1) 0%, rgba(199,255,254,0) 49%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c7fffe",endColorstr="#ffffff",GradientType=1);
	overflow: hidden;
}

.closing .closing-inner {
	position: relative;
	z-index: 1;
}

.closing .closing-body {
	text-align: center;
}

.closing .closing-text {
	color: #444;
	font-family: "Noto Serif JP", sans-serif;
	font-size: 4.5rem;
}

/* red */
.closing .circle1 {
	position: absolute;
	top: -12%;
	left: calc(50% - 334px);
	width: 15.28%;
	max-width: 220px;
}

.closing .circle1::before {
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: #EA5959;
	border-radius: 50%;
}

/* blue */
.closing .circle2 {
	position: absolute;
	top: 4.53%;
	right: 4.17%;
	width: 51.11%;
	max-width: 368px;
}

.closing .circle2::before {
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: #0D50A5;
	border-radius: 50%;
}

/* orange */
.closing .circle3 {
	position: absolute;
	top: 80%;
	right: calc(50% - 475px);
	width: 51.11%;
	max-width: 220px;
}

.closing .circle3::before {
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: #EF9600;
	border-radius: 50%;
}

/* green */
.closing .circle4 {
	position: absolute;
	top: 33.07%;
	left: calc(50% - 652px);
	width: 51.11%;
	max-width: 220px;
}

.closing .circle4::before {
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: #78DC39;
	border-radius: 50%;
}

@media only screen and (min-width: 736px) and (max-width: 1199px) {
	.closing {
		min-height: 540px;
		padding: 184px 0 180px;
	}

	.closing .closing-text {
		font-size: 3.8rem;
	}

	/* red */
	.closing .circle1 {
		top: -6.85%;
		left: calc(50% - 245px);
		width: 16.83%;
		max-width: 138px;
	}

	/* blue */
	.closing .circle2 {
		top: 3.33%;
		right: 1.34%;
		width: 28.05%;
		min-width: 200px;
	}

	/* orange */
	.closing .circle3 {
		top: 81.48%;
		right: calc(50% - 265px);
		width: 16.83%;
		max-width: 138px;
	}

	/* green */
	.closing .circle4 {
		top: 31.48%;
		left: -3.66%;
		width: 16.83%;
		max-width: 138px;
	}
}

@media only screen and (max-width: 735px) {
	.closing {
		min-height: 400px;
		padding: 140px 0 150px;
	}

	.closing .closing-logo {
		width: 53.33%;
	}

	.closing .closing-logo img {
		max-width: 100%;
	}

	.closing .closing-text {
		padding: 0 20px;
		margin-top: 20px;
		font-family: "Noto Serif JP", sans-serif;
		font-size: 2.6rem;
	}

	/* red */
	.closing .circle1 {
		top: -7.5%;
		left: calc(50% - 100px);
		width: 15.73%;
		max-width: 118px;
	}

	/* blue */
	.closing .circle2 {
		top: 7%;
		right: 2.13%;
		width: 26.4%;
		max-width: 198px;
	}

	/* orange */
	.closing .circle3 {
		top: 80%;
		right: calc(50% - 129px);
		width: 15.73%;
		max-width: 118px;
	}

	/* green */
	.closing .circle4 {
		top: 16%;
		left: 3.2%;
		width: 15.73%;
		max-width: 118px;
	}
}

/*
	media
*/
.media {
	position: relative;
	overflow: hidden;
}

.media .media-inner {
	position: relative;
	padding: 80px 40px 0 30px;
	z-index: 1;
}

.media .media-header {
	margin-bottom: 40px;
	text-align: center;
}

.media .subtitle {
	margin-bottom: 20px;
}

.media .media-title {
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 40px;
	font-family: "Noto Serif JP", sans-serif;
}

.media .media-title span {
	font-size: 4rem;
	font-weight: 500;
	line-height: 1.6;
}

.media .media-title::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	right: 0;
	transform: translateX(-50%);
	width: 80px;
	padding-top: 3px;
	margin: auto auto auto 0;
	background: linear-gradient(to right, #0D50A5 0%, #0D50A5 55px, #78DC39 55px, #78DC39 80px) no-repeat left top;
	background-size: 100% 100%;
	border-radius: 100px;
}

.media .media-text {
	font-family: "Noto Serif JP", sans-serif;
	font-size: 2.4rem;
	line-height: 1.83;
}

.media .mediainfo {
	position: relative;
	max-width: 1342px;
	padding: 55px 11.18%;
	margin: 60px auto 0;
	background-color: #F7F7F7;
	border-radius: 20px;
	z-index: 2;
}

.media .imageset-detail .mod-regularText + .mod-regularText {
	margin-top: 30px;
}

.media .imageset-detail .mod-button-01 {
	max-width: 280px;
	margin-top: 30px;
}

.media .imageset-image {
	flex: 0 0 400px;
	margin-right: 13.37%;
}

.media .bg1 {
	position: absolute;
	top: -1.7%;
	left: 21.1%;
	width: 7.38%;
	max-width: 107px;
}

.media .bg1::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #EEA900;
	border-radius: 50%;
}

.media .bg2 {
	position: absolute;
	top: 24.19%;
	left: 6.41%;
	width: 14.48%;
	max-width: 210px;
}

.media .bg2::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #0D50A5;
	border-radius: 50%;
}

.media .bg3 {
	position: absolute;
	top: 22.13%;
	left: 4.14%;
	width: 6.14%;
	max-width: 89px;
}

.media .bg3::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #78DC39;
	border-radius: 50%;
}

.media .bg4 {
	position: absolute;
	top: 8.68%;
	right: 8.62%;
	width: 14.48%;
	max-width: 215px;
}

.media .bg4::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #0D50A5;
	border-radius: 50%;
}

.media .bg5 {
	position: absolute;
	top: 17.77%;
	right: 4.14%;
	width: 8.83%;
	max-width: 128px;
}

.media .bg5::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #EA5959;
	border-radius: 50%;
}

.media .bg6 {
	position: absolute;
	top: 54%;
	right: 12.97%;
	width: 7.38%;
	max-width: 107px;
}

.media .bg6::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #78DC39;
	border-radius: 50%;
}

@media only screen and (min-width: 736px) and (max-width: 1199px) {
	.media .mediainfo {
		margin-top: 40px;
	}

	.media .imageset {
		flex-direction: column-reverse;
	}

	.media .imageset-image {
		flex: 0 0 auto;
		max-width: 400px;
		margin: 0 auto 56px;
	}

	.media .imageset-detail .mod-button-01 {
		margin-left: auto;
		margin-right: auto;
	}

	.media .bg1 {
		left: 9.51%;
	}

	.media .bg2 {
		left: -78px;
	}

	.media .bg3 {
		display: none;
	}

	.media .bg4 {
		right: -40px;
	}

	.media .bg5 {
		right: -70px;
	}

	.media .bg6 {
		right: -5px;
	}
}

@media only screen and (max-width: 735px) {
	.media .mediainfo {
		margin-top: 40px;
	}

	.media .media-inner {
		padding: 60px 20px 0;
	}

	.media .media-header {
		margin-bottom: 26px;
	}

	.media .subtitle {
		margin-bottom: 15px;
	}

	.media .media-title {
		margin-bottom: 28px;
	}

	.media .media-title span {
		font-size: 2.2rem;
	}

	.media .media-title::before {
		width: 60px;
		background: linear-gradient(to right, #0D50A5 0%, #0D50A5 40px, #78DC39 40px, #78DC39 60px) no-repeat left top;
	}

	.media .media-text {
		font-size: 1.6rem;
	}

	.media .mediainfo {
		padding: 40px 30px;
		border-radius: 10px;
	}

	.media .imageset {
		flex-direction: column-reverse;
	}

	.media .imageset-image {
		flex: 0 0 auto;
		max-width: 275px;
		margin: 0 auto 22px;
	}

	.media .imageset-detail .mod-regularText + .mod-regularText {
		margin-top: 20px;
	}

	.media .imageset-detail .mod-button-01 {
		max-width: 100%;
		margin-top: 20px;
	}

	.media [class^=bg] {
		display: none;
	}
}

/*
	anniversarymovie
*/
.anniversarymovie {
	position: relative;
	overflow: hidden;
}

.anniversarymovie .anniversarymovie-inner {
	position: relative;
	padding: 80px 40px 0 30px;
	z-index: 1;
}

.anniversarymovie .anniversarymovie-header {
	margin-bottom: 40px;
	text-align: center;
}

.anniversarymovie .subtitle {
	margin-bottom: 20px;
}

.anniversarymovie .anniversarymovie-title {
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 40px;
	font-family: "Noto Serif JP", sans-serif;
}

.anniversarymovie .anniversarymovie-title span {
	font-size: 4rem;
	font-weight: 500;
	line-height: 1.6;
}

.anniversarymovie .anniversarymovie-title::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	right: 0;
	transform: translateX(-50%);
	width: 80px;
	padding-top: 3px;
	margin: auto auto auto 0;
	background: linear-gradient(to right, #0D50A5 0%, #0D50A5 55px, #78DC39 55px, #78DC39 80px) no-repeat left top;
	background-size: 100% 100%;
	border-radius: 100px;
}

.anniversarymovie .bg1 {
	position: absolute;
	top: -1.7%;
	left: 21.1%;
	width: 7.38%;
	max-width: 107px;
}

.anniversarymovie .bg1::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #EEA900;
	border-radius: 50%;
}

.anniversarymovie .bg2 {
	position: absolute;
	top: 24.19%;
	left: 6.41%;
	width: 14.48%;
	max-width: 210px;
}

.anniversarymovie .bg2::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #0D50A5;
	border-radius: 50%;
}

.anniversarymovie .bg3 {
	position: absolute;
	top: 22.13%;
	left: 4.14%;
	width: 6.14%;
	max-width: 89px;
}

.anniversarymovie .bg3::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #78DC39;
	border-radius: 50%;
}

.anniversarymovie .bg4 {
	position: absolute;
	top: 8.68%;
	right: 8.62%;
	width: 14.48%;
	max-width: 215px;
}

.anniversarymovie .bg4::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #0D50A5;
	border-radius: 50%;
}

.anniversarymovie .bg5 {
	position: absolute;
	top: 17.77%;
	right: 4.14%;
	width: 8.83%;
	max-width: 128px;
}

.anniversarymovie .bg5::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #EA5959;
	border-radius: 50%;
}

.anniversarymovie .bg6 {
	position: absolute;
	top: 54%;
	right: 12.97%;
	width: 7.38%;
	max-width: 107px;
}

.anniversarymovie .bg6::before {
	position: relative;
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
	background-color: transparent;
	border: 1px solid #78DC39;
	border-radius: 50%;
}

@media only screen and (min-width: 736px) and (max-width: 1199px) {
	.anniversarymovie .bg1 {
		left: 9.51%;
	}

	.anniversarymovie .bg2 {
		left: -78px;
	}

	.anniversarymovie .bg3 {
		display: none;
	}

	.anniversarymovie .bg4 {
		right: -40px;
	}

	.anniversarymovie .bg5 {
		right: -70px;
	}

	.anniversarymovie .bg6 {
		right: -5px;
	}
}

@media only screen and (max-width: 735px) {
	.anniversarymovie .anniversarymovie-inner {
		padding: 60px 20px 0;
	}

	.anniversarymovie .anniversarymovie-header {
		margin-bottom: 26px;
	}

	.anniversarymovie .subtitle {
		margin-bottom: 15px;
	}

	.anniversarymovie .anniversarymovie-title {
		margin-bottom: 28px;
	}

	.anniversarymovie .anniversarymovie-title span {
		font-size: 2.2rem;
	}

	.anniversarymovie .anniversarymovie-title::before {
		width: 60px;
		background: linear-gradient(to right, #0D50A5 0%, #0D50A5 40px, #78DC39 40px, #78DC39 60px) no-repeat left top;
	}

	.anniversarymovie [class^=bg] {
		display: none;
	}
}

/*
	anniversarybooklet
*/
.anniversarybooklet {
	position: relative;
	overflow: hidden;
}

.anniversarybooklet .anniversarybooklet-inner {
	padding: 108px 3.47% 120px;
}

.anniversarybooklet .anniversarybooklet-contents {
	display: grid;
	grid-template-columns: 45.14% auto;
	grid-template-rows: auto;
	gap: 0 36px;
	grid-auto-flow: row;
	grid-template-areas:
	  "image header"
	  "image detail";
	max-width: 1215px;
	margin: 0 auto;
  }

.anniversarybooklet .anniversarybooklet-image {
	grid-area: image;
	max-width: 650px;
}

.anniversarybooklet .anniversarybooklet-header {
	grid-area: header;
}

.anniversarybooklet .anniversarybooklet-detail {
	grid-area: detail;
	padding-top: 30px;
}

.anniversarybooklet .subtitle {
	margin-bottom: 20px;
}

.anniversarybooklet .anniversarybooklet-title {
	position: relative;
	padding-bottom: 20px;
	font-family: "Noto Serif JP", sans-serif;
}

.anniversarybooklet .anniversarybooklet-title span {
	font-size: 4rem;
	font-weight: 500;
	line-height: 1.6;
}

.anniversarybooklet .anniversarybooklet-title::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 80px;
	padding-top: 3px;
	margin: auto auto auto 0;
	background: linear-gradient(to right, #0D50A5 0%, #0D50A5 55px, #78DC39 55px, #78DC39 80px) no-repeat left top;
	background-size: 100% 100%;
	border-radius: 100px;
}

.anniversarybooklet .mod-button-01 {
	max-width: 280px;
	margin-top: 40px;
}

@media only screen and (max-width: 1199px) {
	.anniversarybooklet .anniversarybooklet-inner {
		padding: 120px 20px;
	}

	.anniversarybooklet .anniversarybooklet-contents {
		display: block;
	}

	.anniversarybooklet .anniversarybooklet-header {
		margin-bottom: 37px;
		text-align: center;
	}

	.anniversarybooklet .anniversarybooklet-title::before {
		left: 50%;
		transform: translateX(-50%);
	}

	.anniversarybooklet .anniversarybooklet-image {
		margin: 0 auto 24px;
	}

	.anniversarybooklet .anniversarybooklet-detail {
		margin: 0 auto;
		text-align: center;
	}

	.anniversarybooklet .mod-button-01 {
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (max-width: 735px) {
	.anniversarybooklet .anniversarybooklet-inner {
		padding: 80px 20px;
	}

	.anniversarybooklet .anniversarybooklet-contents {
		display: block;
	}

	.anniversarybooklet .anniversarybooklet-header {
		margin-bottom: 20px;
	}

	.anniversarybooklet .subtitle {
		margin-bottom: 15px;
	}

	.anniversarybooklet .anniversarybooklet-title span {
		font-size: 2.2rem;
	}

	.anniversarybooklet .anniversarybooklet-title::before {
		width: 60px;
		background: linear-gradient(to right, #0D50A5 0%, #0D50A5 40px, #78DC39 40px, #78DC39 60px) no-repeat left top;
	}

	.anniversarybooklet .anniversarybooklet-detail {
		padding-top: 0;
		text-align: left;
	}

	.anniversarybooklet .imageset-detail .mod-button-01 {
		max-width: 100%;
		margin-top: 34px;
	}
}


/*
	anniversaryad
*/
.anniversaryad {
	position: relative;
	overflow: hidden;
}

.anniversaryad .anniversaryad-inner {
	padding: 108px 0 0;
}

.anniversaryad .anniversaryad-header {
	margin-bottom: 53px;
	text-align: center;
}

.anniversaryad .subtitle {
	margin-bottom: 20px;
}

.anniversaryad .anniversaryad-title {
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 44px;
	font-family: "Noto Serif JP", sans-serif;
}

.anniversaryad .anniversaryad-title span {
	font-size: 4rem;
	font-weight: 500;
	line-height: 1.6;
}

.anniversaryad .anniversaryad-title::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	right: 0;
	transform: translateX(-50%);
	width: 80px;
	padding-top: 3px;
	margin: auto auto auto 0;
	background: linear-gradient(to right, #0D50A5 0%, #0D50A5 55px, #78DC39 55px, #78DC39 80px) no-repeat left top;
	background-size: 100% 100%;
	border-radius: 100px;
}

.anniversaryad .anniversaryad-body {
	position: relative;
	padding: 0 3.47% 96px;
}

.anniversaryad .anniversaryad-body::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 60px);
	background-color: #F7F7F7;
	z-index: -1;
}

.anniversaryad .anniversaryad-images {
	display: flex;
	justify-content: center;
	gap: 0 36px;
	max-width: 1036px;
	margin: 0 auto 50px;
}

.anniversaryad .anniversaryad-image {
	flex: 1 auto;
	cursor: pointer;
}

.anniversaryad .anniversaryad-detail {
	display: flex;
	max-width: 1270px;
	justify-content: space-between;
	margin: 0 auto;
	transform: translateX(36px);
}

.anniversaryad .anniversaryad-map {
	position: relative;
	flex: 1 1 552px;
	max-width: 552px;
}

.anniversaryad p[class^='map'] {
	position: absolute;
	width: 30px;
	cursor: pointer;
}

/* 仙台市営地下鉄 */
.anniversaryad .map01 {
	top: 252px;
	right: 156px;
}
/* 東京メトロ */
.anniversaryad .map02 {
	top: 400px;
	right: 200px;
}
/* 名古屋市営地下鉄 */
.anniversaryad .map03 {
	top: 422px;
	right: 282px;
}
/* JR西日本/金沢 */
.anniversaryad .map04 {
	top: 358px;
	right: 290px;
}
/* 大阪メトロ */
.anniversaryad .map05 {
	top: 440px;
	right: 328px;
}
/* JR四国/高松 */
.anniversaryad .map06 {
	top: 469px;
	right: 390px;
}
/* アストラムライン/広島 */
.anniversaryad .map07 {
	top: 438px;
	right: 427px;
}
/* 福岡市営地下鉄 */
.anniversaryad .map08 {
	top: 465px;
	right: 488px;
}
/* ゆいレール/那覇 */
.anniversaryad .map09 {
	top: 232px;
	right: 435px;
}
/* JR東日本 */
.anniversaryad .map10 {
	top: 325px;
	right: 171px;
}
/* 札幌市営地下鉄 */
.anniversaryad .map11 {
	top: 75px;
	right: 135px;
}

.fukidashi {
	position: absolute;
	top: 102px;
	left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 288px;
	height: 99px;
	border: 1px solid #78DC39;
	background-color: #fff;
	border-radius: 20px;
}

.fukidashi::before {
	content: '';
	display: block;
	position: absolute;
	left: 79px;
	bottom: -18px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 17px 10px 0 10px;
	border-color: #78DC39 transparent transparent transparent;
}

.fukidashi::after {
	content: '';
	display: block;
	position: absolute;
	left: 80px;
	bottom: -17px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 17px 9px 0 9px;
	border-color: #fff transparent transparent transparent;
}

.hide {
	display: none;
}

.anniversaryad .anniversaryad-area {
	flex: 1 51.34%;
	max-width: 653px;
	margin-left: 5.12%;
}

.anniversaryad .anniversaryad-areatitle {
	width: 200px;
	height: 40px;
	margin-bottom: 20px;
	background-color: #6FBA2C;
	border-radius: 20px;
	color: #fff;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 40px;
	text-align: center;
}

.anniversaryad .anniversaryad-areaitems {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.anniversaryad .anniversaryad-areaitem {
	flex: 1 1 49.92%;
	max-width: 322px;
	padding-top: 32px;
	padding-bottom: 32px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	cursor: pointer;
	transition: all .2s;
}

.anniversaryad .anniversaryad-areaitem:hover {
	color: #004294;
	background-color: #BDD3EE;
}

.anniversaryad .anniversaryad-areaitem span {
	display: inline-block;
	position: relative;
	padding-right: 25px;
	padding-left: 25px;
	font-size: 1.6rem;
	font-weight: 700;
}

.anniversaryad .anniversaryad-areaitem span::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	display: block;
	width: 14px;
	height: 3px;
	background-color: #004294;
	border-radius: 0 2px 2px 0;
}

.anniversaryad .anniversaryad-areaitem span::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: block;
	width: 16px;
	height:16px;
	background: url(/assets/img/20th/icon_plus.png) no-repeat 0 0;
	background-size: cover;
}

/* モーダル */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s;
	pointer-events: none;
	opacity: 0;
	z-index: -10;
}

.modal.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 100;
}

.modal-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background-color: #000;
	opacity: .7;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 900px;
}

.modal-inner {
    width: 100%;
	height: auto;
    margin: 0 auto;
	padding: 53px 180px;
    border-radius: 20px;
    background: #FFF;
}

.modal-inner img {
	max-height: 100%;
}

.modal-close-btn {
    position: absolute;
    right: 36px;
    top: 36px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 20;
	background: url(/assets/img/20th/icon_close.png) no-repeat 0 0 !important;
	background-size: cover !important;
}

.modal-close-btn:hover {
    opacity: 0.8;
}

.modal-title {
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 30px;
	font-family: "Noto Serif JP", sans-serif;
	text-align: center;
}

.modal-title > span {
	font-size: 4rem;
	font-weight: 500;
	line-height: 1.5;
}

.modal-title span > span {
	display: block;
	font-size: 3rem;
}

.modal-title::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	right: 0;
	transform: translateX(-50%);
	width: 80px;
	padding-top: 3px;
	margin: auto auto auto 0;
	background: linear-gradient(to right, #0D50A5 0%, #0D50A5 55px, #78DC39 55px, #78DC39 80px) no-repeat left top;
	background-size: 100% 100%;
	border-radius: 100px;
}

.slide-image {
    margin: 0;
    text-align: center;
	height: 390px;
}

.swiper-slide img {
	object-fit: contain;
	width: 100%;
	height: 100%;
}

.slide-counter {
	color: #6FBA2C;
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	margin-top: 30px;
}

.swiper-button-prev {
	width: 28px !important;
	height: 40px !important;
	left: 60px !important;
	background: url(/assets/img/20th/arrow_prev.png) no-repeat 0 0 !important;
	background-size: cover !important;
	margin-top: 0 !important;
}

.swiper-button-next {
	width: 28px !important;
	height: 40px !important;
	right: 60px !important;
	background: url(/assets/img/20th/arrow_next.png) no-repeat 0 0 !important;
	background-size: cover !important;
	margin-top: 0 !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
	display: none !important;
}

#js-modal11 .swiper-button-prev,
#js-modal11 .swiper-button-next {
	display: none !important;
}

@media only screen and (max-width: 1199px) {
	.anniversaryad .anniversaryad-detail {
		display: block;
		transform: none;
	}

	.anniversaryad .anniversaryad-map {
		margin: 0 auto;
	}

	.anniversaryad .anniversaryad-area {
		margin: 0 auto;
	}

	.anniversaryad .anniversaryad-areatitle {
		margin-right: auto;
		margin-left: auto;
	}

}

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

	.anniversaryad .anniversaryad-header {
		margin-bottom: 34px;
	}

	.anniversaryad .subtitle {
		margin-bottom: 15px;
	}

	.anniversaryad .anniversaryad-title {
		margin-bottom: 30px;
	}

	.anniversaryad .anniversaryad-title span {
		font-size: 2.2rem;
	}

	.anniversaryad .anniversaryad-title::before {
		width: 60px;
		background: linear-gradient(to right, #0D50A5 0%, #0D50A5 40px, #78DC39 40px, #78DC39 60px) no-repeat left top;
	}

	.anniversaryad .anniversaryad-text {
		text-align: left;
	}

	.anniversaryad .anniversaryad-body {
		padding-bottom: 45px;
	}

	.anniversaryad .anniversaryad-inner {
		padding-top: 0;
	}

	.anniversaryad .anniversaryad-map {
		display: none;
	}

	.anniversaryad .anniversaryad-header,
	.anniversaryad .anniversaryad-body {
		padding-right: 20px;
		padding-left: 20px;
	}

	.anniversaryad .anniversaryad-images {
		display: block;
		min-width: auto;
	}

	.anniversaryad .anniversaryad-image:not(:first-child) {
		margin-top: 20px;
	}

	.anniversaryad .anniversaryad-area {
		max-width: 100%;
	}

	.anniversaryad .anniversaryad-areaitems {
		display: block;
	}

	.anniversaryad .anniversaryad-areaitem {
		max-width: 100%;
	}

	.anniversaryad .anniversaryad-areaitem:not(:first-child) {
		margin-top: 8px;
	}

	.modal-inner {
		padding: 50px 30px 60px;
	}

	.modal {
		padding: 140px 20px;
	}

	.slide-image {
		height: 240px;
	}

	.modal-title span {
		font-size: 2.2rem;
	}

	.modal-title span > span {
		font-size: 1.6rem;
	}

	.modal-close-btn {
		position: absolute;
		right: 24px;
		top: 24px;
		width: 17px;
		height: 17px;
		cursor: pointer;
		z-index: 20;
		background: url(/assets/img/20th/icon_close.png) no-repeat 0 0 !important;
		background-size: cover !important;
	}

	.swiper-button-prev {
		width: 15px !important;
		height: 21px !important;
		left: 12px !important;
		background: url(/assets/img/20th/arrow_prev.png) no-repeat 0 0 !important;
		background-size: cover !important;
		margin-top: 0 !important;
	}

	.swiper-button-next {
		width: 15px !important;
		height: 21px !important;
		right: 12px !important;
		background: url(/assets/img/20th/arrow_next.png) no-repeat 0 0 !important;
		background-size: cover !important;
		margin-top: 0 !important;
	}

	.slide-counter {
		font-size: 1.6rem;
	}
}