@charset "UTF-8";
@import url("fontawesome.css");
@import url("aller_display.css");
@import url("exo_black.css");
@import url("open_sans_light.css");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/****************************************
 	mixin								*
*****************************************/
/****************************************
 	基本設定							*
*****************************************/
* {
  box-sizing: border-box;
}

html {
  font-size: 13px;
}

body {
  background-color: #fff;
  font-family: "Kiwi Maru","Noto Serif JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Lucida Grande",Verdana,"ＭＳ Ｐゴシック",sans-serif;
  font-size: 1rem;
  color: #777;
}

input, select, textarea, button, option {
  font-family: "Kiwi Maru","Noto Serif JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Lucida Grande",Verdana,"ＭＳ Ｐゴシック",sans-serif;
  font-size: 1rem;
  color: #495057;
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #C7000A;
}
a:hover {
  opacity: 0.75;
}

img {
  max-width: 100%;
  height: auto;
}

/****************************************
 	レイアウト							*
*****************************************/
main {
  max-width: 800px;
  min-height: 100vh;
  margin: auto;
  -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3);
}

/****************************************
 	セクション							*
*****************************************/
main section {
  text-align: center;
  font-size: clamp(0.9em, 3.75vw, 1.75em);
  line-height: 2em;
  font-weight: 500;
}
main section:not(.mv):not(.countdown) {
  background: url("../images/background.jpg") repeat-y;
}
main section h3 {
  margin-bottom: 20px;
  opacity: 0;
  transform: translate(0, 25%);
  transition: 1s;
}
main section h3.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
main section h3 img {
  width: 300px;
  max-width: 50%;
}
main section .button {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}
main section .button a,
main section .button input[type='submit'],
main section .button button {
  display: block;
  width: 80%;
  max-width: 500px;
  margin: auto;
  padding: 1rem 0;
  background-color: #fff;
  border: 1px solid #666;
  -moz-border-radius: 50vw;
  -webkit-border-radius: 50vw;
  border-radius: 50vw;
  -moz-box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  -webkit-box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  font-weight: normal;
  color: #666;
}
main section .button a.back,
main section .button input[type='submit'].back,
main section .button button.back {
  width: 100px;
  padding: 0.5rem;
}
main section .button button {
  font-size: 1em;
}

/****************************************
 	セクション（メインビュー）			*
*****************************************/
section.mv {
  color: #fff;
  font-family: "Exo Black";
}
section.mv .bg-slider {
  position: relative;
  display: flex;
  padding-top: 25%;
  padding-bottom: 25%;
  background-size: cover;
  background-position: center center;
}
section.mv .bg-slider:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(51, 51, 51, 0.24);
  z-index: -1;
}
section.mv .bg-slider .text {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
section.mv .bg-slider .text h1, section.mv .bg-slider .text p, section.mv .bg-slider .text h2 {
  opacity: 0;
  transition: 2s;
}
section.mv .bg-slider .text.is-show h1, section.mv .bg-slider .text.is-show p, section.mv .bg-slider .text.is-show h2 {
  opacity: 1;
}
section.mv .bg-slider .text h1 img {
  width: 75%;
}
section.mv .bg-slider .text h2 {
  transition-delay: 1s;
  font-size: clamp(3em, 3.75vw, 3.5em);
  line-height: 1.15em;
}
section.mv .bg-slider .text h2 span {
  display: block;
  margin-top: 2%;
}
section.mv .bg-slider .text p {
  transition-delay: .5s;
  width: 80%;
  margin: auto;
  line-height: 1.40em;
  font-family: "Open Sans Light";
  font-size: 0.9em;
}

/****************************************
 	セクション（メッセージ）			*
*****************************************/
section.message {
  padding-top: 60px;
  padding-bottom: 60px;
}
section.message p + p {
  margin-top: 30px;
}

/****************************************
 	セクション（カウントダウン）		*
*****************************************/
section.countdown {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding-top: 60px;
  padding-bottom: 60px;
  background: url("../images/countdown.jpg");
  background-size: cover;
  background-position: center;
  font-family: "Exo Black";
  color: #fff;
}
section.countdown:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(51, 51, 51, 0.24);
  z-index: 0;
}
section.countdown .title,
section.countdown .days,
section.countdown .time {
  z-index: 1;
}
section.countdown .title {
  font-weight: 300;
  font-size: 2em;
}
section.countdown .days p {
  font-size: 5em;
  line-height: 1em;
}
section.countdown .days span {
  font-weight: 300;
}
section.countdown .time {
  display: flex;
  gap: 20px;
}
section.countdown .time p {
  font-size: 4em;
  line-height: 1em;
}
section.countdown .time span {
  font-weight: 300;
}

/****************************************
 	セクション（インフォメーション）	*
*****************************************/
section.information {
  padding-top: 70px;
  padding-bottom: 70px;
}
section.information dl {
  display: flex;
  gap: 5%;
  width: 70%;
  max-width: 450px;
  margin: auto;
  line-height: 1.5em;
}
section.information dl + dl {
  margin-top: 10px;
}
section.information dl dt {
  width: 25%;
  text-align: left;
}
section.information dl dd {
  flex: 1;
  text-align: left;
}
section.information dl dd a {
  font-size: 0.8em;
}

/****************************************
 	セクション（マップ）				*
*****************************************/
section.map iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

/****************************************
 	セクション（返信案内）				*
*****************************************/
section.reply {
  padding-top: 60px;
  padding-bottom: 80px;
}

/****************************************
 	セクション（メニュー）				*
*****************************************/
section.menu {
  padding-top: 40px;
  padding-bottom: 80px;
}
section.menu.comingsoon .button a {
  position: relative;
  pointer-events: none;
}
section.menu.comingsoon .button a:before {
  content: "Coming Soon";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  -moz-border-radius: 50vw;
  -webkit-border-radius: 50vw;
  border-radius: 50vw;
  font-size: 0.6em;
  color: #fff;
}
section.menu .button a {
  padding: 1.3rem 0;
  line-height: 1em;
}
section.menu .button a i {
  display: block;
  margin-bottom: 5px;
  font-size: 2em;
}
section.menu .button a p {
  font-size: 0.7em;
  color: #999;
}

/****************************************
 	セクション（思い出）				*
*****************************************/
section.memory {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 40px;
  overflow: hidden;
}
section.memory .sliderArea {
  max-width: 100%;
  margin: 0 auto 60px;
  padding: 0 25px;
}
section.memory .slick-slide {
  margin: 0 5px;
}
section.memory .slick-slide img {
  width: 100%;
  height: auto;
}
section.memory .slick-prev, section.memory .slick-next {
  z-index: 1;
}
section.memory .slick-prev:before, section.memory .slick-next:before {
  color: #000;
}
section.memory .slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
section.memory .slick-active {
  opacity: 1;
}
section.memory .slick-current {
  opacity: 1;
}
section.memory .slick-dots {
  bottom: -33px;
}
section.memory .thumb {
  margin: 20px 0 0;
}
section.memory .thumb .slick-slide {
  cursor: pointer;
}
section.memory .thumb .slick-slide:hover {
  opacity: .7;
}
section.memory .full-screen .slick-list {
  overflow: visible;
}
section.memory .full-screen.slider {
  max-width: 95%;
  margin: 0 auto;
}

/****************************************
 	セクション（招待状回答）			*
*****************************************/
section.answer {
  padding-top: 60px;
  padding-bottom: 60px;
}
section.answer dl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 80%;
  max-width: 550px;
  margin: 30px auto;
}
section.answer dl dd .flex {
  display: flex;
  gap: 20px;
}
section.answer dl dd .flex.vertical {
  flex-direction: column;
}
section.answer dl dd .flex > * {
  flex: 1;
}
section.answer dl dd p {
  font-size: 0.75em;
  line-height: 1.5em;
  margin-bottom: 20px;
}
section.answer dl dd input[type='text'],
section.answer dl dd textarea {
  width: 100%;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.6) !important;
  color: #666;
  outline: none !important;
}
section.answer dl dd input[type='text'] {
  border: none !important;
  border-bottom: 1px solid #666 !important;
  font-size: 0.9em;
  text-align: center;
}
section.answer dl dd textarea {
  max-width: 100%;
  height: 20vh;
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.16);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.16);
  border: 1px solid #ccc;
  font-size: 0.8em;
}
section.answer dl dd .radio {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  background-color: #fff;
  border: 1px solid #999;
  -moz-border-radius: 50vw;
  -webkit-border-radius: 50vw;
  border-radius: 50vw;
  -moz-box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  -webkit-box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  color: #666;
  font-size: 0.8em;
  transition: all .3s ease;
}
section.answer dl dd .radio.checked {
  border-color: #f99d8c;
  color: #f99d8c;
}
section.answer dl dd .radio.checked span:before {
  opacity: 1;
}
section.answer dl dd .radio input {
  width: 0;
  height: 0;
}
section.answer dl dd .radio span:before {
  opacity: 0;
  content: "\f00c";
  position: absolute;
  left: 10%;
  font-family: "Font Awesome 5 Solid";
  color: #f99d8c;
  transition: all .3s ease;
}
section.answer .button {
  margin-top: 80px;
}

/****************************************
 	セクション（回答完了）				*
*****************************************/
section.thankyou {
  padding-top: 60px;
  padding-bottom: 80px;
}
section.thankyou p + p {
  margin-top: 20px;
}

/****************************************
 	セクション（駐車場）				*
*****************************************/
section.parking {
  padding-top: 60px;
  padding-bottom: 80px;
}
section.parking p.explain {
  font-size: 0.8em;
  line-height: 1.5em;
}
section.parking h4 {
  margin-top: 20px;
  font-weight: bold;
}
section.parking img {
  display: block;
  margin: 10px auto;
}
section.parking dl {
  width: 90%;
  max-width: 555px;
  margin: 10px auto;
  font-size: 0.9em;
  text-align: left;
}
section.parking dl dt span {
  display: inline-block;
  padding: 1% 2%;
  margin-right: 5px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #1a1819;
  font-size: 0.8em;
  line-height: 1.35em;
  text-align: center;
  color: #fff;
}
section.parking dl dd {
  font-size: 0.9em;
  line-height: 1.5em;
}
section.parking dl dd a {
  font-size: 0.9em;
}
section.parking .button {
  margin-top: 50px;
}

/****************************************
 	セクション（フォトギャラリー）		*
*****************************************/
section.gallery ul.list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 20px;
}
section.gallery ul.list li {
  overflow: hidden;
  width: calc((100% - 10px) / 3);
  border: 4px solid #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
section.gallery ul.list li a:hover img {
  transform: scale(1.1);
}
section.gallery ul.list li a img {
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
  transition: transform .6s ease;
}

/****************************************
 	手紙（ポップアップ）				*
*****************************************/
.popup {
  z-index: 1;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup:after {
  content: "";
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.popup .letter {
  z-index: 2;
  width: 90%;
  max-width: 700px;
  padding: 40px 15px;
  background: url("../images/background.jpg") repeat;
  border: 5px solid #333;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}
.popup .letter p {
  font-size: clamp(0.9em, 3.75vw, 1.75em);
  line-height: 1.8em;
  text-align: center;
}
.popup .letter .button {
  margin-top: 30px;
}
.popup .letter .button a {
  display: block;
  width: 50%;
  max-width: 300px;
  margin: auto;
  padding: 1rem 0;
  background-color: #fff;
  border: 1px solid #666;
  -moz-border-radius: 50vw;
  -webkit-border-radius: 50vw;
  border-radius: 50vw;
  -moz-box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  -webkit-box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  font-weight: normal;
  color: #666;
  text-align: center;
}
.popup .menu {
  z-index: 2;
  width: 90%;
  max-width: 700px;
  background: #fff;
  border: 5px solid #333;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}
.popup .menu img {
  -moz-border-radius: 20px 20px 0;
  -webkit-border-radius: 20px;
  border-radius: 20px 20px 0;
}
.popup .menu .button {
  margin-bottom: 15px;
}
.popup .menu .button a {
  display: block;
  width: 50%;
  max-width: 300px;
  margin: auto;
  padding: 1rem 0;
  background-color: #fff;
  border: 1px solid #666;
  -moz-border-radius: 50vw;
  -webkit-border-radius: 50vw;
  border-radius: 50vw;
  -moz-box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  -webkit-box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  font-weight: normal;
  color: #666;
  text-align: center;
}
.popup .seating {
  z-index: 2;
  width: 90%;
  max-width: 700px;
  background: #fff;
  border: 5px solid #333;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}
.popup .seating img {
  -moz-border-radius: 20px 20px 0;
  -webkit-border-radius: 20px;
  border-radius: 20px 20px 0;
}
.popup .seating .button {
  margin-top: 15px;
  margin-bottom: 15px;
}
.popup .seating .button a {
  display: block;
  width: 50%;
  max-width: 300px;
  margin: auto;
  padding: 1rem 0;
  background-color: #fff;
  border: 1px solid #666;
  -moz-border-radius: 50vw;
  -webkit-border-radius: 50vw;
  border-radius: 50vw;
  -moz-box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  -webkit-box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  box-shadow: 2px 2px 3px 0 rgba(100, 100, 100, 0.4);
  font-weight: normal;
  color: #666;
  text-align: center;
}

/****************************************
 	CakePHP error						*
*****************************************/
pre.cake-error {
  line-height: 1.5em;
  letter-spacing: .5px;
}
pre.cake-error a {
  text-decoration: underline;
}
pre.cake-error .cake-stack-trace {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
}

/****************************************
 	CakePHP SQLdump						*
*****************************************/
table.cake-sql-log {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #eee;
  font-size: 0.8em;
  line-height: 1.5em;
  letter-spacing: .5px;
}
table.cake-sql-log caption {
  padding: 10px;
  background-color: #eee;
  border-bottom: 1px solid #ddd;
}
table.cake-sql-log th, table.cake-sql-log td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
table.cake-sql-log th:first-child, table.cake-sql-log td:first-child {
  text-align: center;
}
table.cake-sql-log tbody tr td span.syntax {
  color: #e30;
}

/****************************************
 	width								*
*****************************************/
.w100p {
  width: 100% !important;
  max-width: 100% !important;
}

.w0 {
  width: 0px !important;
}

.w5 {
  width: 5px !important;
}

.w10 {
  width: 10px !important;
}

.w15 {
  width: 15px !important;
}

.w20 {
  width: 20px !important;
}

.w25 {
  width: 25px !important;
}

.w30 {
  width: 30px !important;
}

.w35 {
  width: 35px !important;
}

.w40 {
  width: 40px !important;
}

.w45 {
  width: 45px !important;
}

.w50 {
  width: 50px !important;
}

.w55 {
  width: 55px !important;
}

.w60 {
  width: 60px !important;
}

.w65 {
  width: 65px !important;
}

.w70 {
  width: 70px !important;
}

.w75 {
  width: 75px !important;
}

.w80 {
  width: 80px !important;
}

.w85 {
  width: 85px !important;
}

.w90 {
  width: 90px !important;
}

.w95 {
  width: 95px !important;
}

.w100 {
  width: 100px !important;
}

.w105 {
  width: 105px !important;
}

.w110 {
  width: 110px !important;
}

.w115 {
  width: 115px !important;
}

.w120 {
  width: 120px !important;
}

.w125 {
  width: 125px !important;
}

.w130 {
  width: 130px !important;
}

.w135 {
  width: 135px !important;
}

.w140 {
  width: 140px !important;
}

.w145 {
  width: 145px !important;
}

.w150 {
  width: 150px !important;
}

.w155 {
  width: 155px !important;
}

.w160 {
  width: 160px !important;
}

.w165 {
  width: 165px !important;
}

.w170 {
  width: 170px !important;
}

.w175 {
  width: 175px !important;
}

.w180 {
  width: 180px !important;
}

.w185 {
  width: 185px !important;
}

.w190 {
  width: 190px !important;
}

.w195 {
  width: 195px !important;
}

.w200 {
  width: 200px !important;
}

.w250 {
  width: 250px !important;
}

.w300 {
  width: 300px !important;
}

.w350 {
  width: 350px !important;
}

.w400 {
  width: 400px !important;
}

.w450 {
  width: 450px !important;
}

.w500 {
  width: 500px !important;
}

.w600 {
  width: 600px !important;
}

.w700 {
  width: 700px !important;
}

.w800 {
  width: 800px !important;
}

.w900 {
  width: 900px !important;
}

.w1000 {
  width: 1000px !important;
}

/****************************************
 	height								*
*****************************************/
.h0 {
  height: 0px !important;
}

.h10 {
  height: 10px !important;
}

.h20 {
  height: 20px !important;
}

.h30 {
  height: 30px !important;
}

.h40 {
  height: 40px !important;
}

.h50 {
  height: 50px !important;
}

.h60 {
  height: 60px !important;
}

.h70 {
  height: 70px !important;
}

.h80 {
  height: 80px !important;
}

.h90 {
  height: 90px !important;
}

.h100 {
  height: 100px !important;
}

.h110 {
  height: 110px !important;
}

.h120 {
  height: 120px !important;
}

.h130 {
  height: 130px !important;
}

.h140 {
  height: 140px !important;
}

.h150 {
  height: 150px !important;
}

.h160 {
  height: 160px !important;
}

.h170 {
  height: 170px !important;
}

.h180 {
  height: 180px !important;
}

.h190 {
  height: 190px !important;
}

.h200 {
  height: 200px !important;
}

.h250 {
  height: 250px !important;
}

.h300 {
  height: 300px !important;
}

.h350 {
  height: 350px !important;
}

.h400 {
  height: 400px !important;
}

.h450 {
  height: 450px !important;
}

.h500 {
  height: 500px !important;
}

.h600 {
  height: 600px !important;
}

.h700 {
  height: 700px !important;
}

.h800 {
  height: 800px !important;
}

.h900 {
  height: 900px !important;
}

.h1000 {
  height: 1000px !important;
}

/****************************************
 	レスポンシブル						*
*****************************************/
/* ノートパソコン -------------------------------------------------- */
/* タブレット -------------------------------------------------- */
/* スマホ -------------------------------------------------- */
@media only screen and (max-width: 766px) {
  /****************************************
  	セクション（カウントダウン）		*
  *****************************************/
  section.countdown {
    gap: 20px;
    padding-bottom: 50px;
  }
}