/*// SDK ///*/
.movie{
	position: relative;
	width: 100%;
	padding-top: 56.25% ;
}
.movie iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
html,body{
	width: 100%;
	height: 100%;
}
#keyvisual{
	background:url(../../img/keyvisual.jpg) no-repeat center center;
	background-size: cover;
	width:100%;
	height: 100%;
	position: relative;
}
#keyvisual .cont{
	position: absolute;
	max-width:480px;
	top:50%;
	left:33%;
	transform:translate(-50%,-50%);
	color: white;
}
#keyvisual .cont .textarea{
	margin-top:3em;
	font-size:1.1em;
}
#keyvisual .cont .textarea .ti{
	font-size:3em;
	font-weight: 700;
	color:#B1A53B;
	text-align: left;
	font-family: 'Kiwi Maru', serif;
}
#keyvisual .scroll{
  position: absolute;
  bottom:8%;
  left:50%;
  transform:translateX(-50%);
  text-align: center;
  color:white;
  animation-name: hu__hu__mini ;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  max-width: 40px;
}
@-webkit-keyframes hu__hu__mini {
 50% {
  -webkit-transform:translateY(10px) translateX(-50%);
  transform:translateY(10px) translateX(-50%);
 }
}
@keyframes hu__hu__mini {
 50% {
  -webkit-transform:translateY(10px) translateX(-50%);
  transform:translateY(10px) translateX(-50%);
 }
}
#keyvisual .scr{
  height: 5vh;
}

/*/////// contents /////////*/
.greybox{
	background:#D4D4D4;
}
.centerimg{
	padding:4%;
}
.title {
	margin:20% 0 5% 0;
}
.title h3 {
	font-size:2.375rem;
	font-family: 'Kiwi Maru';
	font-weight: normal;
	letter-spacing: 0.15em;
}
.title .sub{
	display: block;
	font-size:2em;
	color:#B1A53B;
	font-family: 'Kiwi Maru', serif;
	letter-spacing: 0.2em;
}
#point{
	margin-bottom: calc(200px + 4%);
}
#point .point-elem{
	background:#F7F7F7;
	position: relative;
	padding:3rem 0 3rem 0;
}

#point .point-elem:after{
	content: '';
  position: absolute;
  bottom: 0;
	left:0;
  width: 100%;
	height: 200px;
	background:url(../../img/shadow01.png) no-repeat top center;
	background-size:100% 100%;
	transform: translateY(100%);
	z-index: 2;
}
#point .point-elem:nth-child(2n-1):after{
	background:url(../../img/shadow02.png) no-repeat top center;
	background-size: 100% 100%;
}
#point .point-elem .inner{
	display: flex;
	align-items: center;
	position: relative;
	z-index: 20;
	padding-top:130px;
}
#point .point-elem:nth-child(1) .inner{
	padding-top:0;
}
#point .point-elem .photoarea{
	width:50%;
	order:1;
	padding:1rem;
}
#point .point-elem .textarea{
	width:50%;
	padding:2rem 3rem 0 ;
	order:2
}
#point .point-elem:nth-child(2n-1) .photoarea{
	order:2;
}
#point .point-elem:nth-child(2n-1) .textarea{
	order:1;
}
#point .point-elem:nth-child(2n-1){
	background:#F3F2E4;
}
#point .point-elem .ti{
	display: none;
}
#point .point-elem .textarea dl dt,
#point .point-elem .ti{
	font-size:2.5rem;
	position: relative;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	line-height: 1.6;
}
#point .point-elem .textarea dl dt .sub,
#point .point-elem .ti .sub{
	display: block;
	font-family: 'Shippori Mincho B1', serif;
	font-size:.8em;
}
#point .point-elem .textarea dl dt:after,
#point .point-elem .ti:after{
	content:"";
	display: block;
	width:3rem;
	height: 1px;
	background:black;
	position: absolute;
	bottom:0;
	left:50%;
	transform: translateX(-50%);
}
#plan,#flow {
	position: relative;
}
#plan:before,
#flow:before {
	content:"";
	display: block;
	width:100%;
	height: 50vh;
	background:#F3F2E4;
	transform: skewY(-18deg);
	z-index: 1;
	position: absolute;
	top:-15%;
	left:0;
}
#plan:after,
#flow:after {
	content:"";
	display: block;
	width:100%;
	height: 50vh;
	background:#F7F7F7;
	transform: skewY(12deg);
	z-index: 0;
	position: absolute;
	top:-25%;
	left:0;
}

#plan .plan-content{
	display: flex;
	justify-content: space-between;
	margin:4% 20px;
}
#plan .plan-content .item{
	width:31%;
}
.waku{
	position: relative;
	background:white;
	border:.5px solid #707070;
	padding:2em;
	box-shadow:0 3px 6px rgba(0,0,0,0.16);
}
.waku:before,
.waku:after,
.waku div:before,
.waku div:after{
	content:"";
	display: block;
	width:4rem;
	height: 4rem;
	border:1px solid #000000;
	position: absolute;
}
.waku:before{
	top:0;
	left:0;
	border-right:0;
	border-bottom:0;
}
.waku:after{
	top:0;
	right:0;
	border-left:0;
	border-bottom:0;
}
.waku div:before{
	bottom:0;
	right:0;
	border-left:0;
	border-top:0;
}
.waku div:after{
	bottom:0;
	left:0;
	border-right:0;
	border-top:0;
}

#option p.large{
	margin:2em auto 1em;
	font-size:1.6rem;
}
#option .row{
	margin: 0 20px;
}
#option .waku {
	padding-top:4rem;
}

#flow .flow-content{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	counter-reset: num;
	padding-left:4%;
}
#flow .flow-content .elem{
	position: relative;
	width:29%;
	background:white;
	border:1px solid #707070;
	padding:1rem;
	margin:3% 4% 3% 0%;
	box-shadow:0 3px 6px rgba(0,0,0,.16);
	counter-increment: num;
}
#flow .flow-content .elem:nth-child(3n){
	margin-right:0;
}
#flow .flow-content .elem:after{
	content:"";
	display: block;
	width:15%;
	height: 15%;
	background:url(../../img/arrow.png) no-repeat center right;
	background-size:contain;
	position: absolute;
	right:0;
	top:50%;
	transform: translate(100%,-50%);
	}
#flow .flow-content .elem:before{
	content:"";
	width:clamp(80px,8vw,100px);
	height:clamp(80px,8vw,100px);
	border-radius:50vw;
	border:1px solid #000;
	background:white;
	position: absolute;
	left:0;
	top:0;
	transform: translate(-50%,-50%);
}
#flow .flow-content .elem:nth-child(3n):after{
	display: none;
}
#flow .flow-content .elem dl dt{
	color:#B1A53B;
	font-size:1.75rem;
	width:100%;
}
#flow .flow-content .elem dl dt:before{
	content:counter(num);
	font-size:clamp(28px,3vw,32px);
	position: absolute;
	left:0;
	top:12px;
	transform: translate(-50%,-50%);
}
#flow .flow-content .elem dl dt:after{
	content:"Step";
	color:#000000;
	font-size:clamp(16px,1.8vw,23px);
	text-transform: uppercase;
	position: absolute;
	left:0;
	top:-17px;
		transform: translate(-50%,-50%);
}

#flow .flow-content .elem dl dd{
	padding:1rem .3rem 0 .3rem;
}
#flow .flow-content .elem dl dd .imgs{
	width:100%;
	min-height: 160px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 26%;
}
.contact_btn{
	margin:10% 4%;
}
.contact_btn a {
	display: block;
	background:#314158;
	color:white;
	font-size:1.5rem;
	padding:1.3em 1em;
	max-width: 480px;
	margin:auto;
	border-radius:6px;
}
.contact_btn a:hover{
	background:#25579f;
}


#service h4 {
	font-size: 1.3rem;
	color: #25579f;
}
.service-content {
	display: flex;
	flex-wrap: wrap;
}
.service-item {
	width:50%;
	padding:50px;
}
.service-img {
	margin-bottom:1rem;
}
.p-center {
	text-align: center;
}

#plan .light-plan-head,
#plan .light-plan-btn-bk a
 {
	background-color:#CC894F;
}
#plan .standard-plan-head,
#plan .standard-plan-btn-bk a {
	background-color:#2864F0;
}
#plan .premium-plan-head,
#plan .premium-plan-btn-bk a{
	background-color:#C9B46E;
}

.plan-title,
.plan-sub {
	color:#fff;
	text-align: center;
	padding-top:25px;
	margin:0px auto;
}
.plan-sub {
	padding-bottom:25px;
}

.plan-title {
	font-size: 1.5rem;
}
.plan-body {
	background-color:#fff;
	box-shadow:0 3px 6px rgba(0,0,0,0.16);
	padding:1rem;
}
table {
	border-collapse: collapse;
}
.plan-body th,
.plan-body td {
	padding:10px 30px;
	text-align: left;
}
.plan-body th {
	height:80px;
	width:70%
}
/* #plan .btn a {
	background-color: black;
} */

.option-flex {
	display:flex;
	justify-content: center;
	margin: 0 auto;
}

.option-1 {
	padding: 1rem;
}

.option-1 th,
.option-1 td {
	padding:10px 30px;
	text-align: left;
}
.option-1 th {
	height:80px;
	width:280px;
}

.sns-flex {
	display:flex;
	justify-content: center;
}

#product , #news { width : 50% ; }
.product-waku,
.news-waku {
	background:white;
	padding:2rem 1em;
	margin:0 2rem;
	box-shadow:0 3px 6px rgba(0,0,0,0.16);
	height: 500px;
}
.product-content p,
.news-content p {
	padding:1rem;
}
.onayami-area {
	position: relative;
	padding:4%;
}
.onayami-img {
	position: absolute;
	top: 70%;
	transform: translate(-50%, -50%);
}
p.onayami {
	font-size: 3vw;
	padding:4%;
	background-image: url(../../img/onayami_ander.png);
    background-size: contain;
    background-position: center 80%;
    background-repeat: no-repeat;
}
span.strong {
	font-size: 2em;
}

.omakase-area{
	position: relative;
}
p.omakase {
	font-size:3vw;
    line-height: 1.3;
}
span.wo {
	font-size:clamp(50px, 3vw, 80px);
	color:#B1A53B;
}

.omakase-img {
	position: absolute;
	top: 60%;
	transform: translate(-50%, -50%);
}

.tw-follow {
	padding: 2rem;
}

/* .btn-waku {
	padding: 1rem;
}
.sns-button {
	display: inline-block;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	color: #ffffff;
	font-size: 1.3em;
	border-radius: 50px;
	width: 100%;
	font-weight: bold;
	transition: 0.3s;
	padding:1em 2em;
	margin:auto;
} */


.sns_btn{
	padding-top: 2rem;
}
.sns_btn a {
	display: inline-block;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	color: #ffffff;
	font-size: 1.3em;
	border-radius: 15px;
	width: 100%;
	font-weight: bold;
	transition: 0.3s;
	padding:2em 2em;
	margin:auto;
}

.instagram_btn a{
	background-image: linear-gradient(21deg, rgba(247, 238, 12, 1) 5%, rgba(255, 151, 29, 1) 23%, rgba(233, 94, 52, 1) 39%, rgba(154, 39, 238, 1) 64%, rgba(35, 102, 247, 1) 81%, rgba(88, 139, 250, 1) 95%);
}

.youtube_btn a{
	background-color: #DA1725;
}
.youtube_btn i.icon-youtube,
.instagram_btn i.icon-instagram {
	padding-right: 1rem;
}

.light-plan-btn-bk a:hover,
.standard-plan-btn-bk a:hover,
.premium-plan-btn-bk a:hover,
.sns_btn a:hover{
	opacity: .5;
}