@charset "UTF-8";

html {
	margin: 0;
	height: 100%;
}

body {
	margin: 0;
	height: 100%;
}

.delighter {
	transition: all .5s ease-out;
	transform: translateY(5vh);
	opacity: 0;
}

.delighter.started {
	transform: none;
	opacity: 1;
}

.foo.delighter.started.ended {
}

#loader-bg {
	background-color: #0129d4;
	height: 100%;
	left: 0px;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 100;
}

#loader-bg img {
	width: 70%;
	left: 50%;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
}

.uk-navbar-container{
	min-height: 15%;
}

.top {
	margin: 0;
	height: 85%;
	background-image: url("img/title.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 70%;
}

.logo{
	position: absolute;
	top: 40%;
	left: 50%;
	width: 80%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.subtitle{
	margin-top: 20px;
	color: white;
	text-align: center;

	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
}

.top-date{
	color: white;
	text-align: center;
	
	margin-top: 5%;
	
	font-family: garamond-premier-pro-subhead, serif !important;
	font-weight: 700 !important;
	font-style: italic !important;
}

.uk-navbar-container{
	background-color: #333333 !important;
	font-family: "Times New Roman", Times, "serif" !important;
}

.menu-item{
	color: #cccccc;
	
	font-size: x-large;
	font-family: ten-mincho, serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
}

body.background1::before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url("img/greeting.jpg") 10% 50% no-repeat;
  background-size:cover;
}

body.background2::before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url("img/rsvp.jpg") center no-repeat;
  background-size:cover;
}

li.menu-item-wrap{
	padding: 0 1vw !important;
}

a.menu-item{
	font-size: 16pt !important;
}

.greeting{
	margin: 0;
	min-height: 100%;
	width: 100%;
	
	background: rgba(0,0,0,0);
}

.greeting-inner{
	margin: 0 auto;
	padding: 30px;
	text-align: center;
	color: #333333;
	
	/*background-color:rgba(0,0,0,0.50);*/
}

.greeting-title{
	text-align: center;
	
	color: #333333 !important;
	
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 42pt;
	
	padding-bottom: 10px;
	border-bottom: solid 1px #333333;
}

.greeting section{	
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
}

.introduction{
	margin:0 auto;
	text-align: center;
	
	width: 100%;
}

.introduction-inner{
	margin-top: 30px !important;
}

.introduction-inner *{
	margin: 0 auto;
}

.introduction-head{
	font-size: 28pt;
	
	font-family: ten-mincho, serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	color: #333333 !important;
	
    margin-block-start: 0px;
    margin-block-end: 0px;
}

.introduction-name{
	font-size: 24pt;
	font-family: ten-mincho, serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	color: #333333 !important;
	
    margin-block-start: 0px;
    margin-block-end: 0px;
}

.introduction-inner img{
    border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
	max-width: 300px;
    width:  80%;       /* ※縦横を同値に */
	
	margin-block-start: 10px;
	margin-block-end: 10px;
}

#reception{
	margin: 0;
	min-height: 100%;
	width: 100%;
	
	color: #333333 !important;
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	
	background-image: url(img/ring.jpg);
	background-repeat: no-repeat;
	background-size: auto 30%;
	background-attachment: fixed;
	background-position-X: right;
	background-Position-Y: 150%;
	background-color: white;	
}

.reception section{
	margin-block-start: 20px;
}

.reception-inner h2{
	font-size: 42pt;
	
	font-family: ten-mincho, serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	color: #333333 !important;
	
    margin-block-start: 0px;
    margin-block-end: 10px;
}

.event{
	margin:0 auto;
	text-align: center;
	color: #333333 !important;
	
	width: 100%;
	
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
}

.event-inner h3{
	color: #333333 !important;
	font-size: 24pt;
	
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
}

.event-inner h4{
	color: #333333 !important;
	width: 80%;
	
	font-family: garamond-premier-pro-subhead, serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	
	border-bottom: solid 1px #cccccc;
}

.event-inner{
	margin-top: 40px !important;
}

.event-inner *{
	margin: 0 auto;
}

.event-inner .eg{
	margin-top: 10px;
	font-size: 20pt !important;
	
	font-family: garamond-premier-pro-subhead, serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
}

.event-inner section .big{
	font-family: garamond-premier-pro-subhead, serif !important;
	font-weight: 700 !important;
	font-style: normal !important;
	font-size: 32pt !important;
}

.venue{
	color: #333333 !important;
	
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	
	margin-block-start: 40px !important;
}

.venue h3{
	color: #333333 !important;
	font-size: 24pt;
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	
	margin-block-end: 0;
}

.venue section{
	margin-block-start: 5px !important;
}

.venue section a{
	color: #3362ee !important;
}


#reception{
	margin: 0;
	min-height: 100%;
	width: 100%;
	
	color: #333333 !important;
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	
	background-image: url(img/ring.jpg);
	background-repeat: no-repeat;
	background-size: auto 30%;
	background-attachment: fixed;
	background-position-X: right;
	background-Position-Y: 150%;
	background-color: white;	
}

.rsvp{
	margin: 0;
	min-height: 100%;
	width: 100%;
	
	color: #cccccc !important;
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	
	background: rgba(0,0,0,0);
}

.rsvp-inner{
	padding-top: 30pt;
	padding-bottom: 30pt;
	background-color: rgba(0,0,0,0.7)
}

.rsvp-inner *{
	text-aling: center;
}

.rsvp-inner section{
	margin-left: auto;
	margin-right: auto;
	margin-block-start: 20px;
	margin-block-end: 20px;
	max-width: 640px;
}

.rsvp-inner section .date{
	color: #cc7373;
	font-size: 24px;
	font-weight: 700;
}

.rsvp-title{
	color: #cccccc !important;
	text-align: center;
	
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	
	margin-block-start: 20px !important;
}
.rsvp-form{
	margin-top: 20px;
}

.rsvp-check{
	transition-duration: 200ms;
	transition-property: color;
	
	padding: 40px 0;
	text-align: center;
	
	color: rgba(255,255,255, 0.3);
	font-size: 24pt;
	font-weight: 400;
}

.rsvp-check:hover{
	transition-duration: 200ms;
	transition-property: color;
	
	cursor: pointer;
	color: #ffffff;
}

.rsvp-checked{
	transition: all 200ms ease-in;
	
	color: #ffffff;
	font-weight: 700;
	
	background-image: url(img/check.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

div.form-title{
	text-align: center;
	line-height: 40px;
	height: 40px;
	margin-block-start: 5px;
	margin-block-end: 5px;
}

div.form-div{
	height: 40px;
	margin-block-start: 5px;
	margin-block-end: 5px;
}

div.form-div-mes{
	margin-block-start: 5px;
	margin-block-end: 5px;
}