@charset "UTF-8";

/* ===============================================### 
可変設定
###=============================================== */
.lp_container {
  /*デザインの値*/
  --pc-width: 1400;/*PCデザイン幅*/
  --sp-width: 750;/*SPデザイン幅*/
  --pc-artboard-width: 1060;/*SP共通デザイン幅*/
  --sp-artboard-width: 750;/*PC共通デザイン幅*/
  /*可変率の計算式*/
  --formula: calc(var(--variable) * var(--ratio));/*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1);/*PCデザインの可変割合の計算式*/
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  .lp_container {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比 */
  --variable: 1px; /* 固定値（可変しない） */
  }
}

/* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  .lp_container {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比 */
  --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .lp_container {
  --ratio: 1; /* 比率は1（変わらない） */
  --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}


/* ===============================================### 
初期設定
###=============================================== */
.ceremony_0220{
	font-family: "hiragino-kaku-gothic-pron", sans-serif;
	--font-credit: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
	font-weight: 300;
	font-style: normal;
	color: #000;
	--color-black: #000;
	--color-white: #fff;
	--color-gray: #cbc9c5;
	background-color: rgba(203, 201, 197, 0.3);
	overflow: clip;
}

.ceremony_0220 img{
	width: 100%;
	height: auto;
}

button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

/* ===========### PCのみ表示 ###=========== */
@media screen and (min-width: 768px) {
	.ceremony_0220 .pc-visible{
		display: block;
	}

	.ceremony_0220 .sp-visible{
		display: none;
	}

	.ceremony_0220 .image-bg{
		background-color: #fff;
	}

	.ceremony_0220 .image-bg a:hover{
		opacity: 0.7;
	}

	.ceremony_0220 .inner{
		padding-top: 20px;
	}

	.ceremony_0220 .inner-bd{
		max-width: 1000px;
    margin: 0 auto;
	}

	.breadcrumbs{
		width: 106rem;
		max-width: 120rem;
		margin: 0 auto;
		padding: 2rem 0;
	}
}

/* ===========### SPのみ表示 ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .pc-visible{
		display: none;
	}

	.ceremony_0220 .sp-visible{
		display: block;
	}
}


/* ===============================================### 
モーダル設定
###=============================================== */
.ceremony_0220 .modal-wrap{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 1000;
	visibility: hidden;
	pointer-events: none;
}

.ceremony_0220 .modal-wrap.is-open{
	visibility: visible;
  pointer-events: auto;
}

.ceremony_0220 .modal-layer {
	position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s linear;
  z-index: -1;
	cursor: pointer;
}

.ceremony_0220 .modal-wrap.is-open .modal-layer {
	z-index: 999;
	opacity: 1;
	visibility: visible;
}

.ceremony_0220 .modal-wrap.is-open .modal{
	opacity: 1;
	visibility: visible;
	z-index: 10000;
  transition: opacity 0.3s linear;
}

.ceremony_0220 .modal__button-wrap {
	position: absolute;
	display: inline-flex;
	bottom: calc(-20 * var(--formula));
	left: 50%;
	transform: translateX(-50%);
}

/*** button ***/
.ceremony_0220 .modal-button {
	position: absolute;
	bottom: calc(15 * var(--formula));
	right: calc(15 * var(--formula));
	width: calc(35 * var(--formula));
	height: calc(35 * var(--formula));
	z-index: 1;
	cursor: pointer;
}

.ceremony_0220 .modal-button:hover{
	opacity: 0.6;
}

.ceremony_0220 .modal-button span {
	width: calc(34 * var(--formula));
	height: 1px;
	background: var(--color-white);
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0;
}

.ceremony_0220 .modal-button span:nth-child(1) {
}

.ceremony_0220 .modal-button span:nth-child(2) {
	transform: rotate(90deg) translate(1px, -1px);
}

.ceremony_0220 .close-button {
	position: relative;
	padding: 0;
	cursor: pointer;
}

.ceremony_0220 .close-button span {
	width: calc(25 * var(--formula));
	height: 2px;
	background: var(--color-white);
	display: inline-block;
	position: absolute;
	left: calc(50% - 12px);
	top: 50%;
}

.ceremony_0220 .close-button span:nth-child(1) {
	transform: rotate(45deg) translate(-1px, -1px);
}

.ceremony_0220 .close-button span:nth-child(2) {
	transform: rotate(-45deg) translate(1px, -1px);
}

.ceremony_0220 .modal {
	/* position: relative; */
	margin-right: auto;
	margin-left: auto;
	width: calc(716 * var(--formula));
	/* opacity: 0; */
	visibility: hidden;
	/* transition:  visibility 0.3s linear, opacity 0.3s linear; */


	position: relative;
  margin: 0 auto;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s linear;
}

.ceremony_0220 .modal__inner {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background: var(--color-white);
	display: block;
	/* padding: calc(48 * var(--formula)) calc(40 * var(--formula)) calc(178 * var(--formula)); */
	padding: calc(48 * var(--formula)) calc(40 * var(--formula));
	height: auto;
}

.ceremony_0220 .modal__content {
	padding-top: 15px;
	padding-bottom: 23px;
}

.ceremony_0220 .js-modal-button{
	cursor: pointer;
}

.ceremony_0220 .modal-contents--list{
	width: calc(602 * var(--formula))!important;
	margin-top: calc(55 * var(--formula));
	margin-inline: auto;
	gap: calc(36 * var(--formula));
}

/************** text **************/
.ceremony_0220 .modal__contents--title{
	font-size: calc(18 * var(--formula));
	letter-spacing: 0.12em;
}

.ceremony_0220 .credit{
	margin-top: calc(6 * var(--formula));
	font-size: calc(8 * var(--formula));
	line-height: 1.74;
}

/************** image **************/
.ceremony_0220 .modal-contents--list .list-image{
	width: calc(177 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .modal {
    width: calc(639 * var(--formula));
	}

	.ceremony_0220 .modal__inner {
		padding: calc(48 * var(--formula)) calc(42 * var(--formula)) calc(178 * var(--formula));
	}

	.ceremony_0220 .modal-contents--list {
    width: calc(537 * var(--formula))!important;
		margin-top: calc(48 * var(--formula));
	}

	.ceremony_0220 .modal__contents--title {
		font-size: calc(30 * var(--formula));
    letter-spacing: 0.05em;
	}

	.ceremony_0220 .credit{
		font-size: calc(20 * var(--formula));
	}

	.ceremony_0220 .modal-contents--list .list-image{
		width: calc(157 * var(--formula));
	}

	.ceremony_0220 .modal-button span:nth-child(2) {
		transform: rotate(90deg) translate(1px, 0);
	}
}


/* ===============================================### 
アニメーション設定
###=============================================== */
.ceremony_0220 .js-fade-in{
	-webkit-transition: 0.8s;
	transition: 0.8s;
	opacity: 0;
	-webkit-transform: translate(0, 60px);
	transform: translate(0, 60px);
}

.ceremony_0220 .js-fade-in.show{
	opacity: 1.0;
	-webkit-transform: translate(0, 0) !important;
	transform: translate(0, 0) !important;
}

.ceremony_0220 .js-fade-in.js-delay{
	transition-delay: 0.3s;
}


/* ===============================================### 
コンテンツ共通設定
###=============================================== */
.ceremony_0220 .content{
}

.ceremony_0220 .content .content__inner{
	width: calc(750 * var(--formula));
	margin-inline: auto;
}

.ceremony_0220 .flex-wrap{
	display: flex;
}

.ceremony_0220 .image-wrap{
	position: relative;
	width: fit-content;
}


/* ===============================================### 
MV
###=============================================== */
.ceremony_0220 .mv{
	width: calc(750 * var(--formula));
	margin-inline: auto;
	padding-top: calc(50 * var(--formula));
	padding-bottom: calc(147 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .mv{
		padding-bottom: calc(200 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ01
###=============================================== */
.ceremony_0220 .content01{
	margin-bottom: calc(155 * var(--formula));
}

.ceremony_0220 .content01 .content__inner{
}

.ceremony_0220 .content01 .content__item.item01{
	width: fit-content;
	margin-inline: auto;
}

.ceremony_0220 .content01 .content__item.item02{
	width: fit-content;
	margin-top: calc(152 * var(--formula));
	margin-inline: auto;
}

/************** image **************/
.ceremony_0220 .content01 .content__item.item01 .content__image{
	width: calc(327 * var(--formula));
}

.ceremony_0220 .content01 .content__item.item02 .content__image{
	width: calc(396 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .content01 .content__item.item02 {
    margin-top: calc(202 * var(--formula));
	}

	.ceremony_0220 .content01 .content__item.item01 .content__image{
		width: calc(375 * var(--formula));
	}

	.ceremony_0220 .content01 .content__item.item02 .content__image {
    width: calc(559 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ02
###=============================================== */
.ceremony_0220 .content02{
	background-color: var(--color-white);
}

.ceremony_0220 .content02 .content__inner{
}

.ceremony_0220 .content02 .content__item.item01{
	width: fit-content;
	margin-inline: auto;
}

/************** image **************/
.ceremony_0220 .content02 .content__item.item01 .content__image{
	width: calc(636 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .content01 {
    margin-bottom: calc(222 * var(--formula));
	}

	.ceremony_0220 .content02 .content__item.item01 .content__image {
    width: calc(750 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ03
###=============================================== */
.ceremony_0220 .content03{
	padding-top: calc(29 * var(--formula));
	background-color: var(--color-white);
}

.ceremony_0220 .content03 .content__inner{
	/* width: fit-content; */
	/* margin-inline: auto; */
}

.ceremony_0220 .content03 .content__item.item01{
	width: fit-content;
	margin-inline: auto;
}

/************** image **************/
.ceremony_0220 .content03 .content__item.item01 .content__image{
	width: calc(637 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .content03 {
    padding-top: calc(32 * var(--formula));
	}

	.ceremony_0220 .content03 .content__item.item01 .content__image {
    width: calc(750 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ04
###=============================================== */
.ceremony_0220 .content04{
	margin-top: calc(153 * var(--formula));
}

.ceremony_0220 .content04 .content__inner{
}

.ceremony_0220 .content04 .content__item.item01{
	width: fit-content;
	margin-inline: auto;
}

/************** image **************/
.ceremony_0220 .content04 .content__item.item01 .content__image{
	width: calc(397 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .content04 {
    margin-top: calc(186 * var(--formula));
	}

	.ceremony_0220 .content04 .content__item.item01 .content__image {
    width: calc(560 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ05
###=============================================== */
.ceremony_0220 .content05{
	margin-top: calc(186 * var(--formula));
}

.ceremony_0220 .content05 .content__inner{
	width: 100%;
}

.ceremony_0220 .content05 .content__item{
	width: calc(750 * var(--formula));
	background-color: var(--color-white);
}

.ceremony_0220 .content05 .content__item.item01{
	padding: calc(30 * var(--formula)) calc(44 * var(--formula)) calc(27 * var(--formula)) calc(69 * var(--formula));
}

.ceremony_0220 .content05 .content__item.item02{
	margin-top: calc(53 * var(--formula));
	margin-right: 0;
	margin-left: auto;
	padding: calc(29 * var(--formula)) calc(44 * var(--formula)) calc(28 * var(--formula)) calc(51 * var(--formula));
}

.ceremony_0220 .content05 .flex-wrap{
	width: fit-content;
	margin-inline: auto;
	gap: calc(40 * var(--formula));
}

/************** image **************/
.ceremony_0220 .content05 .content__item.item01 .content__image{
	width: calc(637 * var(--formula));
}

.ceremony_0220 .content05 .content__item.item02 .content__image{
	width: calc(283 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .content05 {
    margin-top: calc(246 * var(--formula));
	}

	.ceremony_0220 .content05 .content__item.item02 {
    margin-top: calc(83 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ06
###=============================================== */
.ceremony_0220 .content06{
	margin-top: calc(208 * var(--formula));
}

.ceremony_0220 .content06 .content__inner{
}

.ceremony_0220 .content06 .content__item{
}

.ceremony_0220 .content06 .content__item.item01{
	width: fit-content;
	margin-inline: auto;
}

.ceremony_0220 .content06 .content__item.item02{
	width: fit-content;
	margin-top: calc(43 * var(--formula));
	margin-inline: auto;
}

/************** image **************/
.ceremony_0220 .content06 .content__item.item01 .content__image{
	width: calc(638 * var(--formula));
}

.ceremony_0220 .content06 .content__item.item02 .content__image{
	width: calc(634 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .content06 {
    margin-top: calc(268 * var(--formula));
	}

	.ceremony_0220 .content06 .content__item.item01 .content__image {
    width: calc(750 * var(--formula));
	}

	.ceremony_0220 .content06 .content__item.item02 {
    margin-top: calc(32 * var(--formula));
	}

	.ceremony_0220 .content06 .content__item.item02 .content__image {
    width: calc(750 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ07
###=============================================== */
.ceremony_0220 .content07{
	margin-top: calc(230 * var(--formula));
}

.ceremony_0220 .content07 .content__inner{
}

.ceremony_0220 .content07 .content__item{
}

.ceremony_0220 .content07 .content__item.item01{
	width: fit-content;
	margin-inline: auto;
}

/************** image **************/
.ceremony_0220 .content07 .content__item.item01 .content__image{
	width: calc(396 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .content07{
		margin-top: calc(306 * var(--formula));
	}

	.ceremony_0220 .content07 .content__item.item01 .content__image {
    width: calc(559 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ08
###=============================================== */
.ceremony_0220 .content08{
	margin-top: calc(128 * var(--formula));
}

.ceremony_0220 .content08 .content__inner{
	width: 100%;
	background-color: var(--color-white);
}

.ceremony_0220 .content08 .content__item{
}

.ceremony_0220 .content08 .content__item.item01{
	width: fit-content;
	margin-inline: auto;
}

.ceremony_0220 .content08 .flex-wrap{
	width: fit-content;
	margin-inline: auto;
}

/************** image **************/
.ceremony_0220 .content08 .content__item.item01 .content__image{
	width: calc(319 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .content08 {
		margin-top: calc(247 * var(--formula));
	}

	.ceremony_0220 .content08 .content__item.item01 .content__image {
    width: calc(241 * var(--formula));
	}
}


/* ===============================================### 
コンテンツ09
###=============================================== */
.ceremony_0220 .content09{
	margin-top: calc(164 * var(--formula));
}

.ceremony_0220 .content09 .content__inner{
}

.ceremony_0220 .content09 .content__item{
}

.ceremony_0220 .content09 .content__item.item01{
	width: fit-content;
	margin-inline: auto;
}

/************** image **************/
.ceremony_0220 .content09 .content__item.item01 .content__image{
	width: calc(693 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .content09 {
    margin-top: calc(271 * var(--formula));
	}

	.ceremony_0220 .content09 .content__item.item01 .content__image {
    width: calc(750 * var(--formula));
	}
}


/* ===============================================### 
item-area
###=============================================== */
.ceremony_0220 .item-area {
	margin: 0 auto calc(70 * var(--formula)) auto;
}

.ceremony_0220 .item-area .box08 {
	margin: 0 auto;
	width: calc(119 * var(--formula));
	margin-top: calc(160 * var(--formula));
}

.ceremony_0220 .flex {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.box08 img {
	width: calc(32 * var(--formula));
}

.ceremony_0220 .item-area .box08_1 {
	margin: 0 auto;
	width: calc(164 * var(--formula));
	margin-top: calc(-63 * var(--formula));
	font-size: calc(9 * var(--formula));
}

.ceremony_0220 .item-area .box09 {
	display: flex;
	justify-content: center;
	margin-top: calc(-34 * var(--formula));
}

.ceremony_0220 .item-area .box09 figure {
	width: calc(170 * var(--formula));
	margin-top: calc(-27 * var(--formula));
	margin-left: 0;
}

.ceremony_0220 .item-area .box08_1 p {
	width: fit-content;
	text-align: center;
	letter-spacing: .1px;
}

.ceremony_0220 .btn-area {
	display: flex;
	margin: calc(134 * var(--formula)) auto 0;
	padding-bottom: calc(117 * var(--formula));
}

.ceremony_0220 .btn-area a {
	margin: 0 auto;
	padding: calc(9 * var(--formula)) calc(30 * var(--formula));
	letter-spacing: 0.1em;
	font-family: 'Nunito', sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: calc(10 * var(--formula));
	border: 1px solid #19191E;
	color: #19191E;
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
	.ceremony_0220 .item-area .box08 {
		width: calc(200 * var(--formula));
	}

	.box08 img {
    width: calc(55 * var(--formula));
	}

	.ceremony_0220 .item-area .box08_1 {
    width: calc(280 * var(--formula));
		margin-top: calc(-55 * var(--formula));
    font-size: calc(15 * var(--formula));
	}

	.ceremony_0220 .item-area .box09 figure {
    width: calc(270 * var(--formula));
		margin-top: calc(-21 * var(--formula));
	}

	.ceremony_0220 .btn-area {
    margin: calc(156 * var(--formula)) auto 0;
    padding-bottom: calc(157 * var(--formula));
	}

	.ceremony_0220 .btn-area a {
    padding: calc(21 * var(--formula)) calc(80 * var(--formula));
    font-size: calc(23 * var(--formula));
	}
}