@charset "utf-8";
:root {
  --colorG: #c59d62;
  --colorG99: #c59d6299;
  --colorT: #95cac5;
  --colorT99: #95cac599;
}
html {
	scroll-behavior: smooth;
}
*,*::before,*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: 1;
}
body {
	font-family: 'Shippori Mincho', serif;
	color: #444;
}
img {
	max-width: 100%;
	vertical-align: bottom;
}



/*	opening	***********************************************************************************************************************************************************************************************************************************************/
.opening {
		/* display: none; */
	background: #fff;
	position: fixed;
	width: 100%;
	top: 0;
	bottom: 0;
	z-index: 99999;
	opacity: 1;
	animation: Opening 2s 1.5s forwards;
}
@keyframes Opening {
	100% {
		opacity: 0;
		z-index: -1;
	}
}
.opening img {
	display: block;
	width: 30%;
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%,50%);
	transform-origin: bottom;
	opacity: 0;
	animation: OpenImg 1.5s .75s linear forwards;
}
@keyframes OpenImg {
	0% {
		transform: translate(-50%,50%) scale(1.5,.3);
		animation-timing-function: ease-out;
	}
	22% {
		transform: translate(-50%,50%) scale(1,1);
	}
	33% {
		opacity: .5;
		bottom: 70%;
		animation-timing-function: ease-in;
	}
	55% {
		transform: translate(-50%,50%) scale(1,1);
	}
	66% {
		opacity: 1;
		bottom: 50%;
		transform: translate(-50%,50%) scale(1.5,.3);
		animation-timing-function: ease-out;
	}
	80% {
		transform: translate(-50%,50%) scale(1,1);
	}
	100% {
		opacity: 1;
		bottom: 150%;
	}
}



/*	header	***********************************************************************************************************************************************************************************************************************************************/
header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	border-top: 0 solid #fff0;
	border-left: 0 solid #fff0;
	transition: 1s;
}
header h1 {
	/* width: 60%; */
  height: 20vh;
	margin: 0 auto;
	padding: 5vh 0 0;
	transition: 1s;
}
header h1 a {
  display: block;
  height: 100%;
}
header h1 a img {
  min-width: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
	filter: drop-shadow(0 0 .2em #fff) drop-shadow(0 0 .2em #fff);
}
header .produced {
	color: var(--colorT);
	position: absolute;
	top: 1em;
	right: 1em;
	width: 35%;
	text-align: center;
	font-size: 2.5vw;
	text-shadow: 0 0 .2em #fff, 0 0 .2em #fff;
}
header .produced a {
	display: block;
	margin-top: .5em;
	filter: drop-shadow(0 0 .2em #fff) drop-shadow(0 0 .2em #fff);
}
header.min {
	left: auto;
	right: 0;
	width: 0;
	height: 0;
	border-top: 18vh solid #fffd;
	border-left: 18vh solid #fff0;
}
header.min h1 {
	padding: 0;
	position: absolute;
	top: -16vh;
	right: 2vh;
	width: 8vh;
	height: auto;
	background: url(../_img/fpmark_t.png) no-repeat center/contain;
	aspect-ratio: 800 / 728;
}
header.min h1 a {
  display: inline;
}
header.min h1 a img {
	display: none;
}
header.min .produced {
	display: none;
}
/*	min600	*****************************************************************/
@media (min-width: 600px) {
	header h1 {
		height: 18vh;
		padding: 7vh 0 0;
	}
}
/*	landscape	*****************************************************************/
@media (orientation: landscape) {
	header h1 {
		width: 27.5%;
		height: auto;
		margin: 0 5%;
		padding: 3% 0 0;
	}
	header .produced {
		width: 20%;
		font-size: 1em;
		top: 2em;
		right: 5%;
	}
}



/*	scroll	***********************************************************************************************************************************************************************************************************************************************/
.scroll {
	display: block;
	text-align: center;
	font-size: 3vw;
	width: 100%;
	background: #fffc;
	position: absolute;
	bottom: 0;
	backdrop-filter: blur(.25em);
	border-bottom: 0 solid #fff0;
	border-right: 0 solid #fff0;
	animation: startButton 1s infinite alternate;
}
.scroll a {
	color: var(--colorT);
	text-decoration: none;
	display: block;
	margin: 0 auto;
	padding: .5em 0;
}
.scroll a::after {
	content: "\025BC";
	display: block;
	margin: .05em auto 0;
	font-size: 2em;
	position: relative;
	top: 0;
	animation: startArrow 1s infinite alternate;
}
@keyframes startButton {
	50% {
		opacity: 1;
		animation-timing-function: ease-in;
	}
	100% {
		opacity: 0;
	}
}
@keyframes startArrow {
	50% {
		top: 0;
		animation-timing-function: ease-in;
	}
	100% {
		top: 1em;
	}
}
/*	landscape	*****************************************************************/
@media (orientation: landscape) {
	.scroll {
		width: 0;
		height: 0;
		border-bottom: 25vh solid #fffd;
		border-right: 25vh solid #fff0;
		background: #fff0;
		font-size: 1.75vw;
		backdrop-filter: none;
	}
	.scroll a {
		width: 12.5vh;
		margin-top: 12.5vh;
	}
}



/*	pageTop	***********************************************************************************************************************************************************************************************************************************************/
.pageTop {
	position: fixed;
	right: 0;
	bottom: 1em;
	z-index: 9999;
	list-style: none;
	font-size: 6vw;
}
.pageTop li {
	margin-top: .5em;
	transform: translateX(100%);
	transition: .5s;
}
.pageTop li.inPage {
	transform: translateX(-25%);
}
.pageTop li a {
	display: block;
	color: var(--colorT);
	background: #fff;
	text-decoration: none;
	text-align: center;
	line-height: 2;
	width: 2em;
	border-radius: 2em;
	box-shadow: 0 0.1em 0.3em #0006;
}
/*	landscape	*****************************************************************/
@media (orientation: landscape) {
	.pageTop {
		font-size: 3vw;
	}
	.pageTop li a {
		transition: .5s;
	}
	.pageTop li a:hover {
		color: #fff;
		background: var(--colorT);
	}
	.pageTop li a:active {
		transform: translateY(.1em);
		box-shadow: none;
	}
}



/*	price	***********************************************************************************************************************************************************************************************************************************************/
.price {
	text-align: center;
	background: var(--colorT99);
	width: 50%;
	margin: 0 5%;
	padding: 1.5% 2% 2%;
}
.price dt {
	font-size: .8em;
	margin-bottom: .5em;
}
.price dd {
	font-size: 1.2em;
	background: var(--colorG);
	color: #fff;
	padding: .15em 0 .25em;
}
.price dd span:nth-of-type(1),
.price dd span:nth-of-type(3) {
	font-size: .75em;
}
.price dd span:nth-of-type(2) {
	font-size: .6em;
}
/*	landscape	*****************************************************************/
@media (orientation: landscape) {
	.price {
		width: 20%;
		margin: 0;
		padding: .75% 1% 1%;
		position: absolute;
		top: 20%;
		right: 5%;
		font-size: 2vw;
	}
}



/*	tel	***********************************************************************************************************************************************************************************************************************************************/
.tel {
	width: 90%;
	border-radius: 1em;
	backdrop-filter: blur(.25em);
	text-shadow: 0 .1em .3em #333;
}
#First .tel {
	background: var(--colorT99);
	color: #fff;
	padding: 2.5%;
	position: absolute;
	left: 5%;
	bottom: 10%;
}
#Contact .tel {
	background: var(--colorG99);
	padding: 5% 2.5% 2.5%;
	position: static;
}
.tel dt {
	font-size: .7em;
	margin-bottom: .5em;
	text-align: center;
}
.tel dd {
	text-align: center;
}
.tel dd:nth-of-type(1) {
	margin-bottom: .5em;
}
.tel dd:nth-of-type(1) a {
	text-decoration: none;
	color: #fff;
	font-size: 1.5em;
	font-weight: 900;
}
.tel dd:nth-of-type(1) a::before {
	content: "\f095";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: .25em;
	font-size: .6em;
}
.tel dd:nth-of-type(2) {
	font-size: .7em;
	margin-bottom: .75em;
}
.tel dd:nth-of-type(3) a {
	color: #fff;
	background: var(--colorG);
	text-decoration: none;
	border-radius: .5em;
	font-weight: 700;
	text-align: center;
	text-shadow: none;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .5em;
	width: auto;
}
.tel dd:nth-of-type(3) a::before {
	content: "\f0e0";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: .25em;
}
.tel dd:nth-of-type(3) a span:nth-child(2) {
	background: #fff;
	color: var(--colorG);
	font-size: .8em;
	padding: .1em .35em;
	margin-left: .5em;
}
/*	min600	*****************************************************************/
@media (min-width: 600px) {
	#First .tel {
		bottom: 15%;
	}
}
/*	landscape	*****************************************************************/
@media (orientation: landscape) {
	#First .tel {
		width: 20%;
		padding: 1%;
		left: auto;
		bottom: auto;
		right: 5%;
		top: 35%;
		color: #000;
		text-shadow: none;
	}
	#First .tel dt {
		font-size: 1.1vw;
		line-height: 1.4;
	}
	.tel dd:nth-of-type(1) a {
		text-decoration: none;
		font-size: 1.5em;
		font-weight: 900;
	}
	.tel dd:nth-of-type(2) {
		font-size: .9vw;
		margin-bottom: .75em;
	}
	.tel dd:nth-of-type(3) a {
		font-size: 1.05vw;
		color: var(--colorG);
		border: 1px solid var(--colorG);
		background: #fff;
		box-shadow: 0 .2em .4em #0009;
		transition: .5s;
	}
	.tel dd:nth-of-type(3) a:hover {
		color: #fff;
		background: var(--colorG);
	}
	.tel dd:nth-of-type(3) a:active {
		box-shadow: none;
		transform: translateY(.3em);
	}
	.tel dd:nth-of-type(3) a span:nth-child(2) {
		font-size: .6em;
		padding: .25em .35em;
		margin-left: .25em;
	}
}



/*	section	***********************************************************************************************************************************************************************************************************************************************/
section {
	/* min-height: 100vh; */
	position: relative;
}
section h2 {
	font-weight: 400;
	font-size: 1em;
	line-height: 1.6;
	width: 90%;
	margin: 0 auto;
}
section .pBox {
	width: 90%;
	margin: 0 auto 2em;
	background: #fffd;
	backdrop-filter: blur(.25em);
	padding: 5%;
	font-size: .85em;
}
section .pBox p {
	margin-bottom: 1em;
	line-height: 1.6;
}
section .pBox p:last-child {
	margin-bottom: 0;
}
section figure {
	width: 90%;
	margin: 0 auto;
	font-size: .85em;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	color: #fff;
}
section figure picture {
	aspect-ratio: 3 / 1.5;
	border: 1px solid var(--colorG);
	margin-bottom: 1%;
}
section figure picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section figure figcaption {
	margin-top: .5em;
}

#First {
	/* background: url(../_img/kv_s.webp) no-repeat center bottom/cover; */
	background: url(../_img/kvsub_s.webp) no-repeat center bottom/cover;
	padding-top: 22.5vh;
}
#Second {
	background: url(../_img/place_s.webp) no-repeat center bottom/cover;
}
#Third {
	background: url(../_img/surprise_s.webp) no-repeat center bottom/cover;
}
#Fourth {
	background: url(../_img/ship_s.webp) no-repeat center bottom/cover;
}
#Fifth {
	/* background: url(../_img/tenson_s.webp) no-repeat center bottom/cover; */
	background: url(../_img/season1_s.webp) no-repeat center bottom/cover;
	/* background: var(--colorT); */
}
#Contact {
	background: url(../_img/kvsub_s.webp) no-repeat center bottom/cover;
}

#First h2 {
	font-size: .9em;
	margin-bottom: 1em;
}
#First h2 br:nth-of-type(1),
#First h2 br:nth-of-type(2) {
	display: none;
}
#First h2>span {
	color: var(--colorG);
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.4;
}
#First h2>span>span {
	font-size: .75em;
}

main>section:not(#First) {
	padding-top: 7.5vh;
}

/* main>section:not(#First)::before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	z-index: -1;
	background-repeat: no-repeat;
	background-position: center bottom;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
} */
/* main>section:not(#First) {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
} */

main>section:not(#First) h2 {
	font-size: 1.2em;
	margin-bottom: 2.5em;
}
main>section:not(#First):not(#Second):not(#Contact) h2 {
	color: #fff;
}


#Third figure picture,
#Fifth figure picture {
	width: 49.5%;
}
#Third figure figcaption,
#Fifth figure figcaption {
	text-shadow: 0 .1em .3em #000;
}

#Fourth figure {
	width: 70%;
}
#Fourth figure {
	position: absolute;
	left: 5%;
	bottom: 10%;
}
/* #Fifth figure {
	margin-right: 5%;
} */
#Fourth figure img {
	margin-bottom: 0;
}
#Fourth figure figcaption {
	background: #0009;
	display: block;
	width: 100%;
	margin-top: 0;
	padding: .5em;
}


#Contact {
	padding-bottom: 4vh;
}
#Contact h2 {
	font-size: 1.2em;
	margin-bottom: 2.5em;
}
#Contact>p,
#Contact>dl {
	width: 90%;
	margin: 0 auto 1em;
	font-size: .85em;
  line-height: 1.4;
  color: #000;
}
#Contact>dl {
	margin: 0 auto 2em;
}
#Contact>p:last-of-type {
	margin: 0 auto .5em;
}
#Contact .formGroup {
	width: 90%;
	margin: 0 auto;
	background: var(--colorG99);
  backdrop-filter: blur(.25em);
	padding: 5%;
  color: #000;
}
#Contact .formGroup dl {
	margin-bottom: 1em;
}
#Contact .formGroup dl dt {
	margin-bottom: .5em;
}
.pageConfirm #Contact .formGroup dl dd {
	background: #ff9;
	border-radius: .3em;
	padding: .5em;
}
#Contact .formGroup dl.agree {
  display: flex;
}
#Contact .formGroup dl.agree dd {
  order: -1;
  margin: 0 3% 0 2%;
}
#Contact .formGroup dl.agree dd input {
  transform: scale(2);
}
#Contact .formGroup label {
	text-shadow: 0 .1em .3em #333;
}
#Contact .formGroup input,
#Contact .formGroup textarea {
	border: none;
	outline: none;
	padding: .5em;
	font-size: 1rem;
	width: 100%;
	background: #fffc;
  font-family: sans-serif;
}
#Contact .formGroup input:focus,
#Contact .formGroup textarea:focus {
	background: #fff;
}
#Contact .formGroup textarea {
	height: 25vh;
	resize: vertical;
	padding: 1em .5em;
}
#Contact .formGroup iframe {
  width: 100%;
  height: 30vh;
  min-height: auto;
  overflow-y: scroll;
  margin: 0 auto 1em;
  border: 1px solid #444;
  background: #fff;
  /* padding: 0 5% 5%; */
  font-size: .9em;
}
.policy {
  padding: 0 5%;
}
.policy div {
  margin-bottom: 1.5em;
}
.policy div h3,
.policy div h4 {
  background: #fffd;
  position: sticky;
  top: 0;
}
.policy div h3 {
  font-size: 1.25em;
  padding: 1em 0 .5em;
}
.policy div h4 {
  font-size: 1em;
  padding: .5em 0;
}
.policy div p,
.policy div ul li {
  line-height: 1.4;
  font-size: .85em;
}
.policy div p,
.policy div ul li {
  margin-bottom: .5em;
}
.policy div ul {
  padding-left: 1em;
  list-style: decimal;
}
.policy div:last-of-type ul {
  padding-left: 0;
  list-style: none;
}
.policy div:last-of-type ul li span::after {
  content: "@";
}
.policy div ul li ul {
  margin-top: .5em;
}
.policy div ul li ul li {
  font-size: 1em;
}
#Contact .formGroup .send {
	display: flex;
	justify-content: space-between;
}
#Contact .formGroup .send input {
	padding: 1em 0;
	border: 1px solid #fff;
  font-size: .9em;
  letter-spacing: .1em;
}
#Contact .formGroup .send input:first-of-type {
	width: 57.5%;
	background: var(--colorG);
	color: #fff;
	font-weight: bold;
}
#Contact .formGroup .send input:last-of-type {
	width: 37.5%;
	background: var(--colorT);
}
/*	min600	*****************************************************************/
@media (min-width: 600px) {
	#First {
		/* background: url(../_img/kv.webp) no-repeat center bottom/cover; */
		background: url(../_img/kvsub.webp) no-repeat center bottom/cover;
	}
	#Second {
		background: url(../_img/place.webp) no-repeat center bottom/cover;
	}
	#Third {
		background: url(../_img/surprise.webp) no-repeat center bottom/cover;
	}
	#Fourth {
		background: url(../_img/ship.webp) no-repeat center bottom/cover;
	}
	#Fifth {
		/* background: url(../_img/tenson.webp) no-repeat center bottom/cover; */
		background: url(../_img/season1.webp) no-repeat center bottom/cover;
		/* background: var(--colorT); */
	}
	#Contact {
		background: url(../_img/kvsub.webp) no-repeat center bottom/cover;
	}
	#First h2 br:nth-last-of-type(1),
	#First h2 br:nth-last-of-type(2) {
		display: none;
	}
	main>section:not(#First) h2 {
		font-size: 2em;
		margin-bottom: 1.5em;
	}
	#Third figure picture,
	#Fifth figure picture {
		width: 49.5%;
	}
	#Fourth figure {
		bottom: 15%;
	}
	#Fourth figure {
		width: 50%;
	}
}
/*	landscape	*****************************************************************/
@media (orientation: landscape) {
	section .pBox {
		background: none;
    backdrop-filter: none;
		padding: 0;
		font-size: 1.45vw;
		position: relative;
		display: flex;
		flex-flow: wrap column;
		align-items: flex-start;
	}
	section .pBox p {
		margin-bottom: 0;
		line-height: 1.8;
		background: #fffd;
    backdrop-filter: blur(.25em);
		display: inline;
		padding: 0 5% 3%;
	}
	section .pBox p:first-child {
		padding: 3% 5%;
		border-radius: 0 3em 0 0;
	}
	section .pBox p:last-child {
		border-radius: 0 0 0 3em;
	}
	section .pBox p:only-child {
		padding: 3% 5%;
		border-radius: 0 3em 0 3em;
	}
	section .pBox p br {
		display: inline;
	}
	section figure {
		position: relative;
	}
	#First {
		padding-top: 20%;
	}
	#First h2 {
		font-size: 1.25vw;
		line-height: 2;
		text-align: center;
		position: absolute;
		top: 3em;
		left: 50%;
		transform: translateX(-50%);
	}
	#First h2>span {
		font-size: 2.25em;
		line-height: 1.5;
	}
	#First h2 br:nth-of-type(1),
	#First h2 br:nth-of-type(2) {
		display: inline;
	}
	#First h2 br:nth-last-of-type(1),
	#First h2 br:nth-last-of-type(2) {
		display: inline;
	}
	
	main>section:not(#First) h2 br {
		display: none;
	}
	#Second h2,
	#Contact h2 {
		text-shadow: 0 .05em .2em #fff, 0 .05em .2em #fff, 0 .05em .2em #fff;
	}
	#Third h2,
	#Fourth h2,
	#Fifth h2 {
		text-shadow: 0 .05em .2em #000;
	}
	#Third figure,
	#Fifth figure {
		width: 52.5%;
		margin: -10vw 5% 0 42.5%;
	}
	#Third figure picture,
	#Fifth figure picture {
		width: 50%;
		height: 27.5vh;
		margin-bottom: 0;
	}
	section figure figcaption {
		text-align: right;
		position: absolute;
		right: 101%;
		bottom: 0;
		width: 75%;
	}
	#Fourth figure {
		position: relative;
		left: 0;
		bottom: 0;
		width: 55%;
		margin: -10vw 5% 0 40%;
	}
	#Fourth figure picture img {
		width: 100%;
		height: 55vh;
		margin-bottom: 0;
	}
	#Contact>p {
	font-size: 1em;
	}
	#Contact>dl.tel {
	font-size: 1.75em;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: baseline;
	padding: 2.5% 3% 3%;
	}
	#Contact>dl.tel>* {
	margin: 0 .5em;
	}
	#Contact .formGroup dl:not(.agree) {
	display: flex;
	}
	#Contact .formGroup dl:not(.agree) dt {
	margin-bottom: 0;
	width: 30%;
	display: flex;
	}
	#Contact .formGroup dl:not(.agree) dt label {
	width: 100%;
	text-align: center;
	padding-top: .75em;
	}
	#Contact .formGroup dl:not(.agree) dd {
	width: 70%;
	}
	#Contact .formGroup dl.agree {
	justify-content: center;
	}
	#Contact .formGroup dl.agree dd {
	margin: 0 1% 0 0;
	}
	#Contact .formGroup .send input {
	padding: 1.5em 0;
	cursor: pointer;
	border-radius: 1em;
	box-shadow: 0 .2em .4em #0009;
	transition: .5s;
	}
	#Contact .formGroup .send input:first-of-type {
	border: 2px solid var(--colorG);
	background: #fff;
	color: var(--colorG);
	}
	#Contact .formGroup .send input:first-of-type:hover {
	background: var(--colorG);
	color: #fff;
	}
	#Contact .formGroup .send input:last-of-type {
	border: 2px solid #fff;
	}
	#Contact .formGroup .send input:active {
	transform: translateY(.25em);
	box-shadow: none;
	}
}



/*	footer	***********************************************************************************************************************************************************************************************************************************************/
footer {
	background: var(--colorT);
	padding: 10% 20%;
	text-align: center;
	color: #fff;
}
footer h2 {
	margin-bottom: 10%;
}
footer .produced {
	font-weight: bold;
	margin-bottom: 10%;
}
footer .produced a {
	display: block;
	margin-top: .5em;
}
/*	min600	*****************************************************************/
@media (min-width: 600px) {
	footer {
		padding: 5% 20% 5% 5%;
		display: flex;
		flex-flow: wrap;
		justify-content: space-between;
		align-items: flex-end;
	}
	footer h2 {
		width: 50%;
		margin-bottom: 3%;
	}
	footer .produced {
		width: 40%;
		margin-bottom: 3%;
	}
	footer .copyright {
		width: 100%;
	}
}
/*	landscape	*****************************************************************/
@media (orientation: landscape) {
	footer {
		padding: 5% 10% 5% 5%;
	}
	footer h2,
	footer .produced {
    margin: 0;
  }
	footer h2 {
    width: 25%;
  }
	footer .produced {
    width: 50%;
  }
  footer .produced a {
    display: inline;
    margin: 0 0 0 .5em;
  }
  footer .produced a img {
    width: 70%;
  }
	footer .copyright {
    width: auto;
  }
}