@charset "UTF-8";

/* Infomation 
---------------------------------------------------------------------
File Name :  ceremony.css
Create date :  2026/08/25

// Braek Points
// PC
@media screen and (max-width: 1099px) {
}
@media screen and (max-width: 979px) {
}
// Tablet
@media screen and (max-width: 767px) {
}
// Phone
@media screen and (max-width: 580px) {
}
---------------------------------------------------------------------
*/

:root {
	--content-width: 1920;
}
@media screen and (max-width: 767px) {
	:root {
		--content-width: 800;
	}
}
/*
calc(num / var(--content-width) * 100vw)
*/

/* --------------------------------
	contents.css
-------------------------------- */
.anni100th-iwid.ceremony .contentWrapper {
	margin-top: min(55px, 4.026vw);
	overflow: hidden;
}
.anni100th-iwid.ceremony {
	color: #222;
}
@media screen and (max-width: 767px) {
	.anni100th-iwid.ceremony .contentWrapper {
		margin-top: 0;
	}
}


/* --------------------------------
	header
-------------------------------- */


/* --------------------------------
	headline
-------------------------------- */
.anni100th-iwid.ceremony .headline {
	position: relative;
	aspect-ratio: 1920 / 1200;
}
.anni100th-iwid.ceremony .headline:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../../images/100th/ceremony/index/head_bg.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
}
.anni100th-iwid.ceremony .headline.active:before {
	animation-name: anim-fade-in-headbg;
	animation-duration: 1s;
	animation-delay: 3s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
@keyframes anim-fade-in-headbg {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.anni100th-iwid.ceremony .headline section {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.anni100th-iwid.ceremony .headline .hdl-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: calc(90 / var(--content-width) * 100vw);
	z-index: 1;
}
.anni100th-iwid.ceremony .headline .logo {
	width: calc(332.9201 / var(--content-width) * 100vw);
}
.anni100th-iwid.ceremony .headline .hdl {
	width: calc(1131.25 / var(--content-width) * 100vw);
}
.anni100th-iwid.ceremony .headline .text-01 {
	width: calc(1275.5903 / var(--content-width) * 100vw);
}
@media screen and (max-width: 767px) {
	.anni100th-iwid.ceremony .headline {
		aspect-ratio: 800 / 910;
	}
	.anni100th-iwid.ceremony .headline:before {
		background-image: url(../../images/100th/ceremony/index/head_bg@sp.svg);
	}
	.anni100th-iwid.ceremony .headline.active:before {
		animation-duration: 2s;
		animation-delay: .5s;
	}
	.anni100th-iwid.ceremony .headline .hdl-area {
		gap: calc(52 / var(--content-width) * 100vw);
	}
	.anni100th-iwid.ceremony .headline .logo {
		width: calc(200 / var(--content-width) * 100vw);
	}
	.anni100th-iwid.ceremony .headline .hdl {
		width: calc(676.0898 / var(--content-width) * 100vw);
	}
	.anni100th-iwid.ceremony .headline .text-01 {
		width: calc(609.6504 / var(--content-width) * 100vw);
	}
}

.anni100th-iwid.ceremony_registration .headline .hdl {
	width: calc(1454.5273 / var(--content-width) * 100vw);
}
.anni100th-iwid.ceremony_registration .headline .hdl.type-oct01 {
	width: calc(1454.5273 / var(--content-width) * 100vw);
}
@media screen and (max-width: 767px) {
	.anni100th-iwid.ceremony_registration .headline .hdl {
		width: calc(482.8838 / var(--content-width) * 100vw);
	}
	.anni100th-iwid.ceremony_registration .headline .hdl.type-oct01 {
		width: calc(698.6865 / var(--content-width) * 100vw);
	}
}

/* --------------------------------
	container
-------------------------------- */
.ceremony-container-01 {
	position: relative;
	--container-01-width: 1280;
}
.ceremony-container-01 p {
	font-size: calc(29 / var(--content-width) * 100vw);
	line-height: 180%;
}
.ceremony-container-01 [class^="inner-box-"] {
	width: calc(var(--container-01-width) / var(--content-width) * 100vw);
	padding: calc(160 / var(--content-width) * 100vw) 0;
	text-align: center;
	overflow: hidden;
}
.ceremony-container-01 .inner-box-01 {
	margin: 0 auto 0 auto;
}
.ceremony-container-01 .inner-box-02,
.ceremony-container-01 .inner-box-03,
.ceremony-container-01 .inner-box-04,
.ceremony-container-01 .inner-box-05,
.ceremony-container-01 .inner-box-06,
.ceremony-container-01 .inner-box-07 {
	margin: 0 auto;
	border-top: 2px solid #222;
}
.ceremony-container-01 .map-01 {
	width: 100%;
	margin: calc(40 / var(--content-width) * 100vw) auto 0 auto;
}
.ceremony-container-01 .map-01 .iframe-area {
	width: 100%;
	height: calc(640 / var(--content-width) * 100vw);
}
.ceremony-container-01 .map-01 iframe {
	width: 100%;
	height: 100%;
	border: none;
}
@media screen and (max-width: 767px) {
	.ceremony-container-01 {
		--container-01-width: 694;
	}
	.ceremony-container-01 p {
		font-size: calc(20 / var(--content-width) * 100vw);
	}
	.ceremony-container-01 [class^="inner-box-"] {
		width: calc(var(--container-01-width) / var(--content-width) * 100vw);
		padding: calc(80 / var(--content-width) * 100vw) 0;
	}
	.ceremony-container-01 .inner-box-01 {
		margin: 0 auto 0 auto;
		width: calc(740 / var(--content-width) * 100vw);
	}
	.ceremony-container-01 .inner-box-02 {
		border-top: none;
	}
	.ceremony-container-01 .inner-box-03,
	.ceremony-container-01 .inner-box-04,
	.ceremony-container-01 .inner-box-05,
	.ceremony-container-01 .inner-box-06,
	.ceremony-container-01 .inner-box-07 {
		border-width: 1px;
	}
	.ceremony-container-01 .map-01 {
	}
	.ceremony-container-01 .map-01 .iframe-area {
		height: auto;
		aspect-ratio: 800 / 600;
	}
}

.ceremony-container-01 .btn-01 {
	display: block;
	width: calc(1240 / var(--content-width) * 100vw);
	margin: calc(80 / var(--content-width) * 100vw) auto 0 auto;
	padding: calc(70 / var(--content-width) * 100vw) 0;
	background-color: var(--color-red);
	color: #fff;
	transition: .3s ease;
	background: linear-gradient(90deg, #fff000 0%, var(--color-red) 50%, var(--color-red) 100%);
	background-size: 200% 100%;
	background-position: 100% 0;
	clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0 0);
}
.ceremony-container-01 .btn-01 img {
	width: auto;
	height: calc(130 / var(--container-01-width) * 100vw);
}
.ceremony-container-01 .btn-02 {
	display: block;
	width: calc(510 / var(--content-width) * 100vw);
	margin: calc(80 / var(--content-width) * 100vw) auto 0 auto;
	padding: calc(20 / var(--content-width) * 100vw) 0;
	background-color: var(--color-red);
	color: #fff;
	transition: .3s ease;
	background: linear-gradient(90deg, #fff000 0%, var(--color-red) 50%, var(--color-red) 100%);
	background-size: 200% 100%;
	background-position: 100% 0;
	clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0 0);
}
.ceremony-container-01 .btn-02 img {
	width: 100%;
}
.ceremony-container-01 .btn-03 {
	position: relative;
	display: inline-block;
	width: auto;
	margin: calc(80 / var(--content-width) * 100vw) auto 0 auto;
}
.ceremony-container-01 .btn-03:before {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 7.5%;
	width: 0;
	height: 1px;
	background-color: #006fa2;
}
.ceremony-container-01 .btn-03:before,
.ceremony-container-01 .btn-03 * {
	transition: .3s ease;
}
.ceremony-container-01 .btn-03 svg {
	width: auto;
	height: calc(42.4504 / var(--content-width) * 100vw);
}
@media (hover: hover) {
	.ceremony-container-01 .btn-01:hover,
	.ceremony-container-01 .btn-02:hover {
		background-position: 0 0;
		text-decoration: none;
		clip-path: polygon(84.433% 0, 100% 50%, 84.433% 100%, 0 100%, 0 0);
	}
	.ceremony-container-01 .btn-03:hover:before {
		width: calc(100% - 7.5% - 10.5%);
	}
	.ceremony-container-01 .btn-03:hover svg#text_btn_03 .g {
		fill: #006fa2;
	}
}
@media screen and (max-width: 767px) {
	.ceremony-container-01 .btn-01 {
		width: 100%;
		margin: calc(40 / var(--content-width) * 100vw) auto 0 auto;
		padding: calc(45 / var(--content-width) * 100vw) 0;
	}
	.ceremony-container-01 .btn-01 img {
		width: calc(400 / var(--container-01-width) * 100vw);
		height: auto;
	}
	.ceremony-container-01 .btn-02 {
		width: calc(400 / var(--content-width) * 100vw);
		margin: calc(40 / var(--content-width) * 100vw) auto 0 auto;
	}
	.ceremony-container-01 .btn-03 {
		margin: calc(40 / var(--content-width) * 100vw) auto 0 auto;
	}
}

.ceremony_registration .ceremony-container-01 .btn-01 {
	position: absolute;
	top: calc(-500 / var(--content-width) * 100vw);
	left: calc(10 / var(--content-width) * 100vw);
}
.ceremony_registration .ceremony-container-01 .btn-01 img {
	height: calc(120 / var(--container-01-width) * 100vw);
}
.anni100th-iwid.ceremony_registration .btn-02 {
	display: block;
	width: calc(406 / var(--content-width) * 100vw);
	margin: calc(20 / var(--content-width) * 100vw) auto 0 auto;
	padding: calc(20 / var(--content-width) * 100vw) 0;
	background-color: var(--color-red);
	color: #fff;
	transition: .3s ease;
	background: linear-gradient(90deg, #fff000 0%, var(--color-red) 50%, var(--color-red) 100%);
	background-size: 200% 100%;
	background-position: 100% 0;
	clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0 0);
}
.anni100th-iwid.ceremony_registration .btn-02 img {
	width: 100%;
}
.anni100th-iwid.ceremony_registration .btn-03 {
	position: relative;
	display: inline-block;
	width: auto;
	margin: calc(20 / var(--content-width) * 100vw) auto calc(80 / var(--content-width) * 100vw) calc(-340 / var(--content-width) * 100vw);
}
@media (hover: hover) {
	.anni100th-iwid.ceremony_registration .btn-02:hover {
		background-position: 0 0;
		text-decoration: none;
		clip-path: polygon(84.433% 0, 100% 50%, 84.433% 100%, 0 100%, 0 0);
	}
}
@media screen and (max-width: 767px) {
	.ceremony_registration .ceremony-container-01 .btn-01 {
		left: 0;
		top: calc(-400 / var(--content-width) * 100vw);
	}
	.ceremony_registration .ceremony-container-01 .btn-01 img {
		width: calc(400 / var(--container-01-width) * 100vw);
		height: auto;
	}
	.anni100th-iwid.ceremony_registration .btn-02 {
		width: calc(400 / var(--content-width) * 100vw);
		margin: calc(20 / var(--content-width) * 100vw) auto 0 auto;
	}
	.anni100th-iwid.ceremony_registration .btn-03 {
		margin: calc(10 / var(--content-width) * 100vw) auto calc(80 / var(--content-width) * 100vw) auto;
	}
}

.ceremony-container-01 [class^="text-"] + [class^="text-"] {
	margin-top: calc(80 / var(--content-width) * 100vw);
}
.ceremony-container-01 [class^="text-"] img {
	width: auto;
}
.ceremony-container-01 .text-02 img {
	height: calc(858 / var(--content-width) * 100vw);
}
.ceremony-container-01 .text-03 img {
	height: calc(916 / var(--content-width) * 100vw);
}
.ceremony-container-01 .text-04 img {
	height: calc(968 / var(--content-width) * 100vw);
}
.ceremony-container-01 .text-05 img {
	height: calc(530 / var(--content-width) * 100vw);
}
.ceremony-container-01 .text-06 img {
	height: calc(314 / var(--content-width) * 100vw);
}
.ceremony-container-01 .text-07 img {
	height: calc(86 / var(--content-width) * 100vw);
}
.ceremony-container-01 .text-08 img {
	height: calc(474 / var(--content-width) * 100vw);
}
@media screen and (max-width: 767px) {
	.ceremony-container-01 [class^="text-"] img {
		width: calc(694 / var(--content-width) * 100vw);
		height: auto;
	}
	.ceremony-container-01 .text-02 img {
		width: calc(740 / var(--content-width) * 100vw);
		height: auto;
	}
}

.ceremony_registration .ceremony-container-01 .text-02 img {
	height: calc(968 / var(--content-width) * 100vw);
}
.ceremony_registration .ceremony-container-01 .text-02.type-oct01 img {
	height: calc(640 / var(--content-width) * 100vw);
}
.ceremony_registration .ceremony-container-01 .text-04 img {
	height: calc(924 / var(--content-width) * 100vw);
}
.ceremony_registration .ceremony-container-01 .text-04.type-oct01 img {
	height: calc(858 / var(--content-width) * 100vw);
}
.ceremony_registration .ceremony-container-01 .text-05.type-oct01 img {
	height: calc(364 / var(--content-width) * 100vw);
}
.ceremony_registration .ceremony-container-01 .text-91.type-oct01 img {
	height: calc(666 / var(--content-width) * 100vw);
}
.ceremony_registration .ceremony-container-01 .text-92.type-oct01 img {
	height: calc(112.9802 / var(--content-width) * 100vw);
}
.ceremony_registration .ceremony-container-01 .text-93.type-oct01 img {
	height: calc(112.9802 / var(--content-width) * 100vw);
}
.ceremony_registration .ceremony-container-01 .text-94.type-oct01 img {
	height: calc(112.9802 / var(--content-width) * 100vw);
}
@media screen and (max-width: 767px) {
	.ceremony_registration .ceremony-container-01 [class^="text-"] img,
	.ceremony_registration .ceremony-container-01 [class^="text-"].type-oct01 img {
		width: calc(694 / var(--content-width) * 100vw);
		height: auto;
	}
	.ceremony_registration .ceremony-container-01 .text-02 img,
	.ceremony_registration .ceremony-container-01 .text-02.type-oct01 img {
		width: calc(740 / var(--content-width) * 100vw);
		height: auto;
	}
}

.ceremony-container-01 [class^="photo-"] {
	position: absolute;
	z-index: 0;
}
.ceremony-container-01 .photo-box {
	width: 100%;
	height: 100%;
	top: 0;
}
.ceremony-container-01 .photo-box [class^="photo-"]:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	box-shadow: inset 0px 0px 5px 10px #fff;
}
.ceremony-container-01 .photo-box .photo-01 {
	width: calc(298 / var(--content-width) * 100vw);
	left: calc(146 / var(--content-width) * 100vw);
	top: calc(73 / var(--content-width) * 100vw);
}
.ceremony-container-01 .photo-box .photo-02 {
	width: calc(182 / var(--content-width) * 100vw);
	left: calc(0 / var(--content-width) * 100vw);
	top: calc(358 / var(--content-width) * 100vw);
}
.ceremony-container-01 .photo-box .photo-03 {
	width: calc(282 / var(--content-width) * 100vw);
	left: calc(105 / var(--content-width) * 100vw);
	top: calc(714 / var(--content-width) * 100vw);
}
.ceremony-container-01 .photo-box .photo-04 {
	width: calc(268 / var(--content-width) * 100vw);
	left: calc(0 / var(--content-width) * 100vw);
	top: calc(1454 / var(--content-width) * 100vw);
}
.ceremony-container-01 .photo-box .photo-05 {
	width: calc(276 / var(--content-width) * 100vw);
	right: calc(0 / var(--content-width) * 100vw);
	top: calc(24 / var(--content-width) * 100vw);
}
.ceremony-container-01 .photo-box .photo-06 {
	width: calc(214 / var(--content-width) * 100vw);
	right: calc(123 / var(--content-width) * 100vw);
	top: calc(359 / var(--content-width) * 100vw);
}
.ceremony-container-01 .photo-box .photo-07 {
	width: calc(298 / var(--content-width) * 100vw);
	right: calc(8 / var(--content-width) * 100vw);
	top: calc(741 / var(--content-width) * 100vw);
}
.ceremony-container-01 .photo-box .photo-08 {
	width: calc(246 / var(--content-width) * 100vw);
	right: calc(0 / var(--content-width) * 100vw);
	top: calc(1183 / var(--content-width) * 100vw);
}
.ceremony-container-01 .photo-box .photo-09 {
	width: calc(280 / var(--content-width) * 100vw);
	right: calc(0 / var(--content-width) * 100vw);
	top: calc(1768 / var(--content-width) * 100vw);
}
.ceremony-container-01 .photo-box .photo-10 {
	width: calc(66.401 / var(--content-width) * 100vw);
	right: calc(385.599 / var(--content-width) * 100vw);
	top: calc(880 / var(--content-width) * 100vw);
}
.ceremony-container-01 .photo-box .photo-10:before {
	content: none;
}
@media screen and (max-width: 767px) {
	.ceremony-container-01 .photo-box {
		position: relative;
		width: 100%;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.ceremony-container-01 .photo-box [class^="photo-"]:before {
		box-shadow: none;
	}
	.ceremony-container-01 .photo-box [class^="photo-"] {
		position: relative;
		width: auto;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
	}
	.ceremony-container-01 .photo-box [class^="photo-"] {
		width: auto;
		height: calc(67.21055948 / var(--content-width) * 100vw);
	}
	.ceremony-container-01 .photo-box [class^="photo-"] img {
		width: auto;
		height: 100%;
	}
	.ceremony-container-01 .photo-box .photo-08 { order: 1; }
	.ceremony-container-01 .photo-box .photo-05 { order: 2; }
	.ceremony-container-01 .photo-box .photo-03 { order: 3; }
	.ceremony-container-01 .photo-box .photo-06 { order: 4; }
	.ceremony-container-01 .photo-box .photo-07 { order: 5; }
	.ceremony-container-01 .photo-box .photo-02 { order: 6; }
	.ceremony-container-01 .photo-box .photo-01 { order: 7; }
	.ceremony-container-01 .photo-box .photo-04 { order: 8; }
	.ceremony-container-01 .photo-box .photo-09 { order: 9; }
	.ceremony-container-01 .photo-box .photo-10 {
		display: none;
	}
}

.ceremony_registration .ceremony-container-01 .photo-box.type-oct01 .photo-10 {
	top: calc(540 / var(--content-width) * 100vw);
}
@media screen and (max-width: 767px) {
	.ceremony_registration .ceremony-container-01 .photo-box [class^="photo-"] {
		top: auto;
	}
}

/* --------------------------------
	parts
-------------------------------- */
.anni100th-iwid.ceremony .body-end {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	position: relative;
	padding: 0 0 !important;
	background-color: transparent !important;
}
.anni100th-iwid.ceremony .body-end .body-end-image {
	position: absolute;
	z-index: 0;
	width: calc(323.1599 / var(--content-width) * 100vw);
	right: calc(138.8401 / var(--content-width) * 100vw);
	top: calc(-188 / var(--content-width) * 100vw);
}
.anni100th-iwid.ceremony .body-end .body-end-box {
	width: calc(691.5 / var(--content-width) * 100vw);
}
@media screen and (max-width: 767px) {
	.anni100th-iwid.ceremony .body-end .body-end-box {
		width: calc(472.0258 / var(--content-width) * 100vw);
	}
	.anni100th-iwid.ceremony .body-end .body-end-image {
		width: calc(132 / var(--content-width) * 100vw);
		right: calc(126 / var(--content-width) * 100vw);
		top: calc(-64 / var(--content-width) * 100vw);
	}
}


/* --------------------------------
	footer
-------------------------------- */