body {
  font-family: zen-kaku-gothic-new, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 1.8;
  background: url(./img/bg_pattern.png)repeat;
  background-size: 10%;
}
figure {
  margin: 0;
}
figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ----------------
commom
---------------- */
.tac {text-align: center!important;}
.tal {text-align: left!important;}
.tar {text-align: right!important;}

.mb100 {margin-bottom: 100px!important;}
.mb80 {margin-bottom: 80px!important;}
.mb60 {margin-bottom: 60px!important;}
.mb40 {margin-bottom: 40px!important;}
.mb50 {margin-bottom: 50px!important;}
.mb30 {margin-bottom: 30px!important;}
.mb20 {margin-bottom: 20px!important;}

.bl {color: #3c627f;}
.wh {color: #fff;}
.small {font-size: 12px;}
.main_content section h2 {
  font-size: 70px;
  font-family: cofo-raffine, sans-serif;
  font-weight: 900;
  font-style: normal;
}
.main_content section h3 {
  font-size: 40px;
  font-family: cofo-raffine, sans-serif;
  font-weight: 900;
  font-style: normal;
}

.main_content {
  background: #fff;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0px 0px 15px 5px rgba(39, 59, 69, 0.8);
}
@media (max-width: 480px) {
  .main_content {
  box-shadow: none;
}
}

/* ----------------
scroll animation
---------------- */
.scroll-reveal {
  max-width: 480px;
  margin: 50px auto;
}
.scroll-reveal img {
  width: 100%;
  display: block;
  filter: blur(10px);
  opacity: 0;
  transition: filter 1.5s ease-out, opacity 1.5s ease-out;
}
/* 表示状態 */
.scroll-reveal.visible img {
  filter: blur(0);
  opacity: 1;
}
.fadeIn {
  transition: 1s;
  opacity: 0;
}
.fadeIn.animated {
  opacity: 1;
}


/* ----------------
main visual
---------------- */
/* オープニングアニメ */
.opening {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  overflow: hidden;
}
.opening-left,
.opening-right {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
  transition: transform 1.5s cubic-bezier(0.77,0,0.175,1);
}
.opening.hide .opening-left {
  transform: translateX(-50vw);
}
.opening.hide .opening-right {
  transform: translateX(50vw);
}
.opening.fadeout .opening-left,
.opening.fadeout .opening-right {
  transition: opacity 0.8s ease-in-out;
  opacity: 0;
}
@media (max-width: 480px) {
  .opening-left,
  .opening-right {
    transform: none; /* 必要なら調整 */
  }
}



/* メインビジュアル */
.main_content .main_visual {
  background: url(./img/mv_base.png)no-repeat center center;
  background-size: cover;
  height: 100vh;
  position: relative;
}
.main_content .main_visual::after {
  position: absolute;
  content: "";
  background: url(./img/mv_bottom.png)no-repeat center bottom;
  background-size: contain;
  width: 100%;
  height: 313px;
  bottom: -2px;
  left: 0;
}
.main_content .main_visual .mv_top img {
  width: 100%;
  height: auto;
}

/* ハンバーガーボタン */
.main_content {
  position: relative;
}
.menu-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1001;
  cursor: pointer;
  text-align: center;
  color: #fff;
}
.menu-btn .line {
  width: 30px;
  height: 2px;
  background: #fff;
  margin: 6px auto;
  transition: 0.4s ease;
  transform-origin: center;
  position: relative;
}

/* テキスト部分 */
.menu-btn span {
  font-size: 12px;
  letter-spacing: 2px;
  display: block;
  margin-top: 10px;
  transition: 0.3s ease;
}

/* CLOSEは最初非表示 */
.menu-btn .close-text {
  position: absolute;
  top: 20px; /* MENUと同じ位置 */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  color: #fff;
}

/* アクティブ時のハンバーガー → バッテン */
.menu-btn.active .top {
  transform: rotate(45deg);
  position: absolute;
  top: 12px; /* 中央寄せ */
  left: 0;
  right: 0;
  margin: auto;
  background: #fff; /* 白に変化 */
}
.menu-btn.active .bottom {
  transform: rotate(-45deg);
  position: absolute;
  top: 12px; /* 中央寄せ */
  left: 0;
  right: 0;
  margin: auto;
  background: #fff; /* 白に変化 */
}

/* MENU → CLOSE 切り替え */
.menu-btn.active .menu-text {
  opacity: 0;
}
.menu-btn.active .close-text {
  opacity: 1;
}

/* メニュー全体 */
.menu-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: #7eb3c3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: circle(0% at 100% 0%);
  transition: clip-path 0.8s ease-in-out;
  z-index: 1000;
  flex-direction: column;
  gap: 40px;
  font-family: cofo-raffine, sans-serif;
  font-weight: 500;
  font-style: normal;
}
.menu-overlay.open {
  clip-path: circle(150% at 100% 0%);
}
.menu-overlay a {
  color: #fff;
  text-decoration: none;
  font-size: 3rem;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.4s ease;
  line-height: 1.4;
}
.menu-overlay a span {
  font-size: 12px;
  display: block;
}
.menu-overlay.open a {
  opacity: 1;
  transform: translateY(0);
}
.menu-overlay.open a:nth-child(1) { transition-delay: 0.3s; }
.menu-overlay.open a:nth-child(2) { transition-delay: 0.4s; }
.menu-overlay.open a:nth-child(3) { transition-delay: 0.5s; }
.menu-overlay.open a:nth-child(4) { transition-delay: 0.6s; }

/* ----------------
main content
---------------- */
/* about */
.top_about {
  
}
.top_about .bg {
  position: relative;
}
.top_about .bg::before {
  position: absolute;
  content: "";
  background: url(./img/copy_img.png)no-repeat center bottom;
  background-size: contain;
  width: 100%;
  height: 815px;
  bottom: -30px;
  left: 0;
}
.top_about .bg img {
  width: 100%;
  height: auto;
}
.top_about .photo_gallery .img01 {
  margin: 0 16%;
  position: relative;
}
.top_about .photo_gallery .img01::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -23%;
  width: 150px;
  height: 150px;
  background: url(./img/photo_accent01.png) no-repeat left bottom / contain;
  z-index: 1;
}
.top_about .photo_gallery .img02 {
  margin: 0 0 0 16%;
  position: relative;
}
.top_about .photo_gallery .img02::after {
  content: "";
  position: absolute;
  bottom: -100px;
  right: 0;
  width: 150px;
  height: 150px;
  background: url(./img/photo_accent02.png) no-repeat left bottom / contain;
  z-index: 1;
}
.top_about .photo_gallery .img03 {
  margin: 0 16% 0 0;
  position: relative;
}
.top_about .photo_gallery .img03::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: 0;
  width: 150px;
  height: 150px;
  background: url(./img/photo_accent03.png) no-repeat left bottom / contain;
  z-index: 1;
}
.top_about .photo_gallery .img04 {
  margin: 0 16%;
}

/* greeting */
#greeting figure.img {
  width: 70%;
  margin: auto;
  padding-bottom: 120px;
}

/*#schedule */
#schedule {
  background: #7eb3c3;
  position: relative;
  color: #fff;
  padding-bottom: 50px;
}
#schedule::before {
  content: "";
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 750 / 147;
  background: url("./img/section_line_top.png") no-repeat top center;
  background-size: cover;
}
#schedule::after {
  content: "";
  position: absolute;
  bottom: -6%;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 750 / 147;
  background: url("./img/section_line_bottom.png") no-repeat bottom center;
  background-size: cover;
}
@media screen and (min-width: 481px) {
	/* 481px以上に適用されるCSS（タブレット用） */
  #schedule::before {
  content: "";
  position: absolute;
  top: -7%;
  left: 0;
  }
  #schedule::after {
  content: "";
  position: absolute;
  bottom: -7%;
  left: 0;
  }
}
#schedule p.point {
  background: #8abccc;
  padding: 20px;
  margin: 0 30px;
}
#schedule p > span {
  font-size: 16px;
}
#schedule .place p > a {
  text-decoration: none;
  color: #fff;
}
#schedule .map_btn {
  border: 1px solid #fff;
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  transition: all .5s;
}
#schedule .map_btn:hover {
  color: #7eb3c3;
  background: #fff;
  transition: all .5s;
}

/* rsvp */
#rsvp {
  padding: 130px 0 80px;
}
#rsvp .rsvt_btn {
  border: 1px solid #334c59;
  display: inline-block;
  padding: 16px 60px;
  color: #fff;
  background: #334c59;
  text-decoration: none;
  transition: all .5s;
}
#rsvp .rsvt_btn:hover {
  color: #334c59;
  background: #fff;
  transition: all .5s;
}

/* footer */
.fotter_bg {
  background: url(./img/bg_pattern.png)repeat;
  background-size: 30%;
  padding: 100px 0;
}
.fotter_bg .img {
  width: 80%;
  margin: -50px auto 0;
}
.fotter_bg .bl {
  font-size: 40px;
  font-family: cofo-raffine, sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;
  color: #334c59;
}
.fotter_bottom {
  background: #334c59;
}
.fotter_bottom small {
  font-size: 12px;
  background: #334c59;
  color: #fff;
}



/* ----------------
フォーム
---------------- */
.rsvp_form .bg {
  background: url(./img/bg_pattern.png)repeat;
  background-color: #334c59;
  background-size: 30%;
  padding: 40px 0 20px;
  margin-bottom: 40px;
}
.c-form {
	padding: 0px 20px 100px;
	margin: 0 auto;
}
.c-form__item {
	display: block;
	margin-bottom: 20px;
}
.c-form__label {
	padding: 10px 0 10px;
  width: 100%;
}
.c-form__input {
	padding: 10px 10px;
  width: 100%;
}
.c-form__input {
	font-size: 16px;
	border: solid 1px #3c627f;
	border-radius: 4px;
}
.c-form__input::placeholder {
	color: #c1cbd3;
  font-size: 14px;
}
.c-form__input:focus-visible {
	outline: #334c59 auto 1px;
}
.c-form__required {
	color: #b01e2a;
	margin: 0 0 0 10px;
  font-size: 12px;
}
textarea.c-form__input {
	height: 160px;
}
.c-form__submit {
	text-align: center;
}
.c-form__submit button {
	color: #fff;
	background-color: #334c59;
	border: 1px solid #334c59;
	padding: 16px 60px;
	transition: all .5s;
	cursor: pointer;
}
.c-form__submit button:hover {
	color: #334c59;
	background-color: transparent;
}
.radio_wrap {
  display: flex;
  justify-content: start;
  gap: 20px;
}
input[type="radio"] {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #3c627f;
  border-radius: 50%;
  vertical-align: -2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
input[type="radio"]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3c627f;
  content: '';
}
/* thanksページ */
.thanks_wrap {
  height: 100vh;
}
.thanks_wrap .bg {
  background: url(./img/bg_pattern.png)repeat;
  background-color: #334c59;
  background-size: 30%;
  padding: 40px 0 20px;
  margin-bottom: 40px;
}
.thanks_btn {
  border: 1px solid #334c59;
  display: inline-block;
  padding: 16px 60px;
  color: #fff;
  background: #334c59;
  text-decoration: none;
  transition: all .5s;
}
.thanks_btn:hover {
  color: #334c59;
  background: #fff;
  transition: all .5s;
}