@charset "UTF-8";

/* parts */
.about {
	padding-top: 44px;
	background: url(../images/lineparts.png) top center repeat-x;
}

.about .container > * {
	margin-bottom: var(--content-box-padding);
}

.about .container > *:last-child {
	margin-bottom: 0;
}

.details {
	background: url(../images/top/details_bg.jpg) bottom center no-repeat;
	background-size: cover;
}

.details ul {
	display: grid;
	padding: 0 var(--content-box-padding);
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.details ul img {
	width: 100%;
}

.event {
	background: linear-gradient(to right, #fff2f2 0%, #fff2f2 50%, #fff1f1 50%, #fff1f1 100%);
	overflow: hidden;
}

.event .container {
	width: 100%;
	max-width: var(--base-width);
	padding: 0 calc((var(--base-width) - var(--base-width) * var(--content-width-rate)) / 1.25);
	background: url(../images/top/event_bg.jpg) top center no-repeat;
	background-size: 100% auto;
}

.event .box > *:first-child {
	padding-bottom: 5vw;
}

.event .box > *:last-child {
	width: 125%;
	background: url(../images/top/event_photos1.webp) top left no-repeat;
	background-size: cover;
	aspect-ratio: 674 / 555;
	overflow: hidden;
}
html.no-webp .event .box > *:last-child {
	background-image: url(../images/top/event_photos1.png);
}

.event .container h2 {
	color: var(--color-red);
	font-weight: 600;
}

.event .aboutme {
	font-size: 120%;
	font-weight: bold;
}

.event .btn2 {
	width: 16em;
	margin-top: calc(var(--content-box-padding) / 2 / 2);
}

.event .container2 {
	position: relative;
	background: url(../images/top/event_bg2.jpg) top left no-repeat;
	background-size: cover;
}

.event .container2 h2 {
	color: #fff;
	font-weight: bold;
	text-align: center;
}

.event .container2 .img {
	width: calc(100% * var(--content-width-rate));
	max-width: calc(var(--base-width) * var(--content-width-rate));
	margin: calc(var(--content-box-padding) * -1) auto 0 auto;
}

.greeting,
.greeting .container2 {
	padding-top: 44px;
	background: url(../images/lineparts.png) top center repeat-x;
}

.greeting p {
	margin-bottom: 1em;
}

.greeting .talk {
	max-width: calc(100% * var(--content-width-rate));
	margin: var(--content-box-padding) auto 0 auto;
	text-align: center;
}
.greeting .text {
	max-width: calc(100% * var(--content-width-rate));
	margin: var(--content-box-padding) auto 0 auto;
	text-align: center;
}
@media screen and (min-width: 1280px){
	.event .box > :first-child {
		padding-bottom: 7em;
	}
}

@media screen and (min-width: 751px){

	.event h2 {
		text-align: left;
	}

	.event .box {
		gap: 1em;
	}

	.event .box > *:first-child {
		display: flex;
		flex-direction: column;
		justify-content: end;
	}

	.greeting .container {
		padding: calc(var(--content-box-padding) * 2) 0 var(--content-box-padding) 0;
	}

	.greeting h2 {
		margin-bottom: var(--content-box-padding);
	}

	.greeting p {
		line-height: 2;
	}
}

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

	.details ul {
		padding: 0 calc(var(--content-box-padding) / 2);
		grid-template-columns: 1fr 1fr;
	}

	.event {
		background: #fbf6f7;
	}
	.event .container {
		padding: 0 10%;
		background-image: url(../images/top/event_bg_sp.jpg);
	}
	.event .box > *:first-child {
		padding: 30vw 0 1em 0;
	}
	.event .box > *:last-child {
		width: 138%;
		margin-top: calc(var(--content-box-padding) / 2);
		margin-left: -22%;
		margin-bottom: calc(var(--content-box-padding) * 2 * -1);
		aspect-ratio: 384 / 341;
	}

	.event .aboutme {
		text-align: center;
	}

	.event .btn2 {
		margin-left: auto;
		margin-right: auto;
	}

	.event .container2 {
		margin-top: var(--content-box-padding);
		background-image: url(../images/top/event_bg2_sp.jpg);
	}

	.event .container2 .img {
		margin-top: 0;
	}
}