@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Noto+Sans+JP:wght@100..900&display=swap');

body {
	position:relative;
	background:#4B9BCE;
	margin:0;
	padding:0;
	color:#FFFFFF;
	font-size:16px;
	line-height:120%;
	width: 100%;
	font-family: "Figtree", "Noto Sans JP", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-weight:400;
	font-optical-sizing: auto;
}
div,ul,p,ul,ol,li,dl,dt,dd,h1,h2,img {
	margin:0;
	padding:0;
}
li {
	list-style-type: none;
	list-style-position: outside;
}
a {
	text-decoration:none;
}
.blockclear:after{
	content: "";
	clear:both;
	height: 0;
	display: block;
	visibility: hidden;
}

img{
	max-width:100%;
}

main {
	position: relative;
  background-image: url('../images/pc_back.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

#contents {
	position: relative;
	margin:0 auto;
	display:block;
	width:375px;
}
#contents .inner{

  background-image: url('../images/sp_back.jpg');
	background-size: 100%;
	background-position: bottom;
	background-repeat: no-repeat;
	background-color: #48b4d8;
	width:100%;
}

footer {
	background:#ffffff;
	text-align:center;
	padding: 40px 0;
}
footer p{
	margin:25px 0;
}
footer .copy{
	color:#000000;
	font-size:10px;
}


#left-column {
	position:fixed;
	left:calc((100% - 375px) / 2 / 2 - 105px);
	top:calc(50% - 22px);
}


#head-band {
	position:fixed;
	top:0;
	left:calc(50% - 187.5px);
	width:375px;
	height:50px;
	background-color: rgba(255,255,255,0.8);
	border-radius: 0 0 15px 15px;
}
#head-band .logo{
	display:block;
	position:absolute;
	top:16px;
	left:25px;
}

.hamburger_btn {
  display: none;
  cursor: pointer;
	position:absolute;
	top:10px;
	right:25px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  z-index: 3;
}
.hamburger_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  border-radius: 4px;
  background-color: #525557;
  transition: all .7s;
}

.hamburger_btn span:nth-child(1) {top: 4px;}
.hamburger_btn span:nth-child(2) {top: 14px;}
.hamburger_btn span:nth-child(3) {bottom: 4px;}

.hamburger_btn.open span:nth-child(1) {
	-webkit-transform: translateY(10px) rotate(-315deg);
	transform: translateY(10px) rotate(-315deg);
}
.hamburger_btn.open span:nth-child(2) {
	opacity: 0;
}
.hamburger_btn.open span:nth-child(3) {
	-webkit-transform: translateY(-10px) rotate(315deg);
	transform: translateY(-10px) rotate(315deg);
}

#main-visual {
	width:100%;
	position:relative;
	text-align:center;
}

#main-visual .fv{
	width:100%;
}
#main-visual .fv img{
	width:100%;
}

#main-visual .head{
	position:absolute;
	top:75px;
	left:25px;
	width:55%;
	opacity:0;
}
#main-visual .head img{
	width:100%;
}

#main-visual .logo{
	position:absolute;
	bottom:40px;
	right:20px;
	width:33%;
	min-width:126px;
	opacity:0;
}
#main-visual .logo img{
	width:100%;
}

#top-message .head{
	margin:0 auto;
	width:77%;/* 291px */
	padding:58px 0 0 0;
	opacity:0;
}

#top-message .head img{
	width:100%;
}
#top-message .text{
	margin:0 auto;
	width:291px;
	padding:48px 0 0 0;
	line-height:2.0;
	opacity:0;
}
.text sup{
	font-size: 10px;
}
#top-message .text_att{
	font-size: 12px;
}

@media screen and (max-width:300px) {

	#top-message .text{
		width:90%;
		padding:48px 0 0 0;
		line-height:2.0;
	}

}

#top-message .package{
	margin:0 auto;
	width:74%;/* 278px */
	padding:28px 0 0 0;
	opacity:0;
}
#top-message .package img{
	width:100%;
}
.block-event{
	background-color: rgba(255,255,255,0.9);
	border-radius: 15px;
	color:#000000;
	font-size:15px;
	line-height:1.8;
	margin:80px 25px 0 25px;
	box-sizing:border-box;
	padding:0 20px 40px 20px;
	opacity:0;
}

.block-event {
	position:relative;
	text-align:center;
}
.block-event .head-ribbon{
	position:relative;
	top:-10px;
}
.block-event .line-bluedot {
	border-top: 2.5px dotted #4B9BCE;
	margin:40px 0;
}

.block-event .top-gohoubi .eng{
	color:#4B9BCE;
	letter-spacing:0.2em;
	font-weight:400;
}
.block-event .top-gohoubi .title{
	margin-top:20px;
	color:#4B9BCE;
	font-size:36px;
	font-weight:600;
	line-height:125%;
}
.block-event .top-gohoubi .text{
	margin-top:20px;
	font-size:15px;
	line-height:180%;
}

.block-event .location.next {
	margin-top:40px;
}
.block-event .location .title{
	position:relative;
}
.block-event .location .title .ttl{
	background:#A60036;
	font-size:15px;
	line-height:200%;
	border-radius: 20px;
	color:#ffffff;
	width:126px;
}

.block-event .location .title .eng{
	font-size:32px;
	color:#b5d8eb;
	letter-spacing:0.1em;
	position:absolute;
	right:0px;
	top:0px;
	line-height:100%;
}

.block-event .location .detail {
	margin:25px 0;
}
.block-event .location .detail dl{
	display:flex;
	width:100%;
	margin:10px 0;
}
.block-event .location .detail dl dt{
	font-size:14px;
	color:#4B9BCE;
	text-align:left;
	width:50px;
}
.block-event .location .detail dl dd{
	font-size:14px;
	color:#000000;
	text-align:left;
	flex: 1;
}
.block-event .location .detail dl dd.place{
	font-size:15px;
}
.block-event .location .detail p.att{
	font-size:12px;
	text-align: left;
	padding-left: 1em;
	text-indent: -1em;
}

.report-comment {
	margin-top:40px;
}
.report-comment .list{
	background:#d1e8f2;
	border-radius: 10px 0 0 10px;
	padding:10px 20px;
	height:390px;
	overflow-y:auto;
}
.report-comment .list li:not(:last-child){
	border-bottom: 1px solid #add4e8;
}
.report-comment .text{
	font-size:13px;
	color:#000000;
	text-align:left;
	padding:20px 0 10px 0;
}
.report-comment .prof{
	font-size:12px;
	color:#000000;
	text-align:left;
	padding:0 0 10px 0;
	position:relative;
}
.report-comment .prof span{
	position:absolute;
	left:50px;
	top:10px;
}

.slide-photo {
	margin:35px 0 0 0;
}
.slide-arrow {
	width: 30px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	cursor: pointer;
	z-index: 100;
}
.prev-arrow {
  left:-15px;
}
.next-arrow {
  right:-15px;
}

#comingsoon {
	padding:80px 0 240px 0;
	opacity:0;
}
#comingsoon .top{
	width:66%;
	margin:0 auto 15px auto;
}
#comingsoon .tamago{
	width:46%;
	margin:0 auto;
}
#comingsoon .top img,
#comingsoon .tamago img {
	width:100%;
}

#anniversary {
	padding:80px 0 200px 0;
}
#anniversary .kusudama {
	padding:0 0 40px 0;
}
#anniversary .kusudama .top {
	width:66%;
	margin:0 auto 15px auto;
	opacity:0;
}
#anniversary .kusudama .effect{
	position:relative;
}
#anniversary .kusudama .effect .kara{
	position:absolute;
	top:0;
  right: 0;
  left: 0;
  margin: 0 auto;
	width:61%;
	opacity: 0;
}
#anniversary .kusudama .effect .tamago{
  margin: 0 auto;
	width:61%;
	opacity: 0;
}
#anniversary .kusudama .effect .text{
	position:absolute;
	top:32%;
  right: 0;
  left: 0;
  margin: 0 auto;
	width:80%;
	opacity: 0;
}
#anniversary .kusudama .effect .before{
	position:absolute;
	top:20px;
  right: 0;
  left: 0;
  margin: 0 auto;
	width:35%;
	opacity: 1;
}

#anniversary .kusudama .top img{
	width:100%;
}
#anniversary .kusudama .effect .kara img{
	width:100%;
}
#anniversary .kusudama .effect .tamago img{
	width:100%;
}
#anniversary .kusudama .effect .text img{
	width:100%;
}
#anniversary .kusudama .effect .before img{
	width:100%;
}



#anniversary .message .top{
	width:81%;
	margin:0 auto;
}
#anniversary .message .top img{
	width:100%;
}
#anniversary .message .text{
	text-align:center;
	font-size:16px;
	color:#000000;
	line-height:1.8;
	padding:20px 0 0 0;
}
#anniversary .message .note{
	text-align:center;
	font-size:11px;
	color:#000000;
	line-height:1.8;
	padding:20px 0 0 0;
}

nav.sp_menu {
	position:fixed;
	right:calc((100% - 375px) / 2 / 2 - 90px);
	top:calc(50% - 200px);
	width:180px;
}

nav.sp_menu .inner .logo{
	display:none;
}
nav.sp_menu .inner .menu{
	margin-top:30px;
}
nav.sp_menu .inner .menu li{
	width:100%;
	height:64px;
	border-bottom: 1.5px solid #ffffff;
}
nav.sp_menu .inner .menu li a{
	display:block;
	width:100%;
	height:64px;
	color:#1d292e;
  text-align:center;
  padding:22px 0;
	box-sizing:border-box;
}
nav.sp_menu .inner .menu li a:hover{
	background-color: rgba(255,255,255,0.3);
}
nav.sp_menu .inner .icons {
	margin-top:30px;
	display:flex;
	justify-content: space-around;
}
nav.sp_menu .inner .icons li:nth-child(3) {
	padding:5px 0 0 0;
	box-sizing:border-box;
}

@media screen and (max-width:840px) {

	main {
		background:#ffffff;
	}
	#contents {
		width:100%;
	}

	#left-column {
		display:none;
	}
	.hamburger_btn {
		display:block;
	}

	nav.sp_menu{
		display:none;
	}
	nav.sp_menu.open{
		display:block;
		position:fixed;
		right:0;
		top:0;
		width:100%;
		height:100%;
		background:#ffffff;
		text-align:center;
		opacity: 0;
	  animation: spMenuOpen 0.5s ease forwards;
	}

	nav.sp_menu.open .inner{
		margin:60px auto 0 auto;
		width:80%; /* 180px */
	}
	nav.sp_menu .inner .menu li{
		border-bottom: 1.5px solid #92c5e0;
	}
	nav.sp_menu .inner .logo{
		display:block;
	}
	nav.sp_menu .inner .menu li a:hover{
		background-color: rgba(146,197,224,0.3);
	}

	#head-band {
		left:0;
		width:100%;
	}
	#head-band .logo{
		display:block;
	}
	#head-band.open .logo{
		display:none;
	}

}

/* animation ----------- */

/* tamago coming */
#comingsoon .tamago{
	animation: floating-tamago 1.5s ease-in-out infinite alternate-reverse;
}
@keyframes floating-tamago {
	0% {
		transform: translateX(-5%);
	}
	100% {
		transform: translateX(5%);
	}
}



@keyframes spMenuOpen {
  0% {
    opacity: 0;
		transform: translateX(50px);
  }
  100% {
    opacity: 1;
		transform: translateX(0);
  }
}

#main-visual .head.anim {
  animation: fadeInSlideX 1.0s ease 0s forwards;
}
#main-visual .logo.anim {
  animation: fadeInSlideY 1.0s ease 0.5s forwards;
}

#top-message .head.anim {
  animation: fadeInSlideX 1.0s ease 0s forwards;
}
#top-message .text.anim {
  animation: fadeInSlideY 1.0s ease 0s forwards;
}

#top-message .package.anim {
  animation: fadeInSlideY 1.0s ease 0s forwards;
}
.block-event.anim {
  animation: fadeInSlideY 1.0s ease 0s forwards;
}
#comingsoon.anim {
  animation: fadeInSlideY 1.0s ease 0s forwards;
}

@keyframes fadeInSlideX {
  0% {
    opacity: 0;
		transform: translateX(+40px);
  }
  100% {
    opacity: 1;
		transform: translateX(0);
  }
}
@keyframes fadeInSlideY {
  0% {
    opacity: 0;
		transform: translateY(+40px);
  }
  100% {
    opacity: 1;
		transform: translateY(0);
  }
}

/* kusudama */
#anniversary .kusudama.anim .top {
  animation: kusudama_fadeIn 0.2s ease 2.0s forwards;
}
#anniversary .kusudama.anim .effect .kara {
  animation: kusudama_fadeIn 0.2s ease 2.0s forwards;
}
#anniversary .kusudama.anim .effect .tamago {
  animation: kusudama_fadeInSlideDown 3.0s ease 2.0s forwards;
}
#anniversary .kusudama.anim .effect .text {
  animation: kusudama_fadeIn 1.5s ease 4.0s forwards;
}
#anniversary .kusudama.anim .effect .before {
  animation: kusudama_before 1.0s ease 1.0s forwards;
}

@keyframes kusudama_before {
  0% {
		transform: translateX(20px);
  }
  10% {
		transform: translateX(-15px);
  }
  20% {
		transform: translateX(10px);
  }
  30% {
		transform: translateX(-5px);
  }
  40% {
		transform: translateX(5px);
  }
  50% {
 		transform: translateX(0);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes kusudama_fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes kusudama_fadeInSlideDown {
  0% {
    opacity: 0;
		transform: translateY(-50px);
  }
  20% {
    opacity: 1;
		transform: translateY(-10px);
  }
  100% {
    opacity: 1;
		transform: translateY(0);
  }
}