@charset "UTF-8";
/* placeholder color */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@300;400;700&family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&family=Shippori+Mincho&display=swap");

/**********************************************************************************************

　common

**********************************************************************************************/
#site-wrpper {
  font-size: 1.6rem;
  font-family: 'Shippori Mincho', sans-serif;
  font-weight: 400;
  overflow: hidden;
  background: #f2e9f2;
  letter-spacing: .1em; }
  @media (min-width: 751px) {
    /*#site-wrpper {
      min-width: 1280px; } */}
  @media (max-width: 750px) {
    #site-wrpper {
      font-size: 3.43vw; } }


/* common */
.inner {
  max-width: 1100px;
  margin: auto;
  position: relative;
  width: 90%; }
@media (max-width: 750px) {
    .inner {
      max-width: 90vw; } }

@media (min-width: 751px) {
  .fadelink {
    transition: .4s opacity; }
    .fadelink:hover {
      opacity: 0.6; } }



.BG-1nori{
	background-image: url("../images/top/nori.jpg"); 
	background-repeat: no-repeat;
	background-color: #fbf9fc;
	background-position: left bottom;}
@media (max-width: 1200px){
	.BG-1nori{background-position: -200px bottom;}}
@media (max-width: 750px){
	.BG-1nori{background-image:none;}}
.BG-purple{background-image: url("../images/common/bg_wabe-purple.gif");}
.BG-white{background-image: url("../images/common/bg_wabe-white.gif");}





.h3-title {font-size: 2.5rem;
	padding: 50px 0 15px;}
.h3-title span{font-size:60%; vertical-align: bottom; }

.l-text {}
.l-text p {
	width: 70%;
	margin-right: 4%;
	display: inline-block;
}
@media (max-width: 750px) {
	.l-text p {width: 100%;display:block;}}
.l-text .r-img {width: 25%;
	display: inline-block;
	padding-bottom: 50px;}
@media (max-width: 750px) {
	.l-text .r-img {width: 100%;display:block;}}
.r-img {text-align: center;}



/* フェードイン */
.is-fadeIn {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 1.0s, transform 1.0s; }

.is-fadeIn.is-scrollIn {
  opacity: 1;
  transform: translate(0, 0); }

@media (min-width: 751px) {
  .u-sp {
	  display: none !important; }

  a[href^="tel:"] {
    pointer-events: none; } }
@media (max-width: 750px) {
  .u-pc {
    display: none !important; }}
/**********************************************************************************************

　header

**********************************************************************************************/
.site-header {
  height: 90px;
  background-image:url("../img/menu/bg.png") ;
  background-repeat: repeat-x;}
  @media (max-width: 900px) {
    .site-header {
      padding: 15px 0 0 0; } }
  @media (max-width: 750px) {
    .site-header {
      padding: 20px 0; } }



#header-wrpper {
	width: 100%;
	height: 70vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
	min-height: 600px;
	overflow: hidden;
	background: black;
	z-index: 1;
}

#PageID_Top #header-wrpper {
	width: 100%;
	height: 100vh; /* カスタムプロパティ未対応ブラウザ用のフォールバック */
	height: calc(var(--vh, 1vh) * 100);
	min-height: 600px;
	overflow: hidden;
	background: black;
}
/*@media (max-width: 1900px) {
    #header-wrpper {
       height: 100vh;
		min-height: 300px; } }
@media (max-width: 1500px) {
    #header-wrpper {
       height: 100vh;
		min-height: 300px; } }
@media (max-width: 1100px) {
    #header-wrpper {
       height: 100vh;
		min-height: 300px; } }
@media (max-width: 750px) {
    #header-wrpper {
       height: 100vh;
		min-height: 300px; } }*/
#header-inner {
	position: relative;
	width: 95%;
	padding: 2.5%;
	z-index: 1000;
	
}
#header-wrpper h1 { 
	width: 130px;
	text-align: center;
	float: left;
	z-index: 1001;
}
#header-wrpper h1 img {width: 80%;display: block;filter: drop-shadow(3px 3px 5px #555);}

#header-wrpper h2#main-img {}


.main-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 600px;
	background-image: url("../images/common/main.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center; }

/*@media (max-width: 1900px) {
    .top_kv {
       top:-505px; } }
@media (max-width: 1500px) {
    .top_kv {
       top:-480px; } }
@media (max-width: 1100px) {
    .top_kv {
       top:-480px; } }*/

.main-img .top_kv_logo {
	position: relative;
	top: 48%;
	left: 68%;
	width: 30%;
	z-index: 500;
	font-size: 5vw;
	font-family: 'Shippori Mincho', sans-serif;
	color: #333;
	filter: drop-shadow(3px 3px 5px #333);
	letter-spacing: 0.3em;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
@media (max-width: 750px){
	.main-img .top_kv_logo {
		top: 35vh;
		left: 55%;
		font-size: 4.7rem;
		filter: drop-shadow(3px 3px 5px #333);
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;}}
/*
@media (max-width: 2100px) {
    .top_kv_logo {
     font-size: 9.5rem; } }
@media (max-width: 1500px) {
    .top_kv_logo {
     font-size: 6rem; } }
@media (max-width: 1100px) {
    .top_kv_logo {
     font-size: 4.5rem; } }
@media (max-width: 750px) {
    .top_kv_logo {
     font-size: 3.2rem; } }
@media (max-width: 500px) {
    .top_kv_logo {
     font-size: 1.5rem; } }*/

.top_kv_list {
  width: 100%;
  height: 100%;
  overflow: hidden; }
.top_kv_list li {
    width: 100%;
    height: 100%; }

.slideItem {
  height: 100%;}

.top_kv_item .slideItem {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; }

.top_kv_item01 .slideItem {
  background-image: url("../images/top/top-01.jpg");
	background-position: right center;}

.top_kv_item02 .slideItem {
  background-image: url("../images/top/top-02.jpg"); }

.top_kv_item03 .slideItem {
  background-image: url("../images/top/top-03.jpg"); 
	background-position: left center;}





.head_logo {
	width: 300px;
	user-select: none;
	float: left;
	line-height: 1;
	padding-top: 33px;
	margin-right: 30px;}
	@media (max-width: 1280px) {
		.head_logo {
			width: 25%; } }
	@media (max-width: 900px) {
		.head_logo {
			width: 45vw; 
			padding-top: 15px;} }
.head_logo img {
    display: block;}

.site-header navi {
	width: 770px;
	float: left;}
	@media (max-width: 1280px) {
	.site-header navi {
		width: 70%;
	}}
	@media (max-width: 900px) {
	.site-header navi {
		 display: none;
	}}
/**********************************************************************************************

　global_navi 

**********************************************************************************************/
#globalNavi {
	font-size: 1.2vmax;
	padding: 75px 0;
	width: 20vw;
	float: right;
	z-index: 5002;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
@media (max-width: 1400px) {
	#globalNavi {
		width: 25vw;
		font-size: 1.4vmax;
	}}
@media (max-width: 1100px) {
	#globalNavi {
		width: 27vw;
		font-size: 1.6vmax;
	}}
@media (max-width: 750px) {
	#globalNavi {display: none;}}


#globalNavi ol {
	text-align: center;
	margin: auto;
	width: 100%;
	
}
#globalNavi ol li {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	width: 12.5%;
	float: left;
	letter-spacing: 0.2em;
}
#globalNavi ol li a {}


#globalNavi ol li > a {
  padding: 0 5px;
  box-shadow: inset 0 0 0 0 white;
  transition: all 0.5s ease-in-out 0s;
	color: #a182a1;
	filter: drop-shadow(3px 3px 5px #bbb);
}
#globalNavi ol li > a:hover{
    box-shadow: inset 0 300px 0 0 #a182a1;
    color: white;
  }


#PageID_Top #globalNavi ol li > a,
#PageID_Mame #globalNavi ol li > a,
#PageID_Kodawari #globalNavi ol li > a,
#PageID_Recipe #globalNavi ol li > a{
	box-shadow: inset 0 0 0 0 white;
	transition: all 0.5s ease-in-out 0s;
	color: white;
	filter: drop-shadow(3px 3px 5px #000);
}
#PageID_Top #globalNavi ol li > a:hover,
#PageID_Mame #globalNavi ol li > a:hover,
#PageID_Kodawari #globalNavi ol li > a:hover,
#PageID_Recipe #globalNavi ol li > a:hover{
    box-shadow: inset 0 300px 0 0 white;
    color: black;
}


/*　ハンバーガーボタン　*/
.hamburger {
  display : none;
  position: fixed;
  z-index : 10000;
  right : 13px;
  top   : 12px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
@media (max-width: 750px) {
	.hamburger {display: block;}}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #555;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #000;
  background: #000;
  text-align: center;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 100%;
	opacity: 0.8;
}

nav.globalMenuSp ul {
 
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #333;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
nav.globalMenuSp ul li:hover{
  background :#333;
}

nav.globalMenuSp ul li a {
  display: block;
  color: white;
  padding: 1em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}


/**********************************************************************************************

　footer-Navi

**********************************************************************************************/
#footer-wrpper {
	background-image: url("../images/common/bg_wabe-white.gif");
}
#footerNavi {
	font-size: 1.7rem;
	padding: 75px 0;
}
#footerNavi ol {
	text-align: center;
	margin: auto;
	width: 300px;
	
}
#footerNavi ol li {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	width: 12.5%;
	float: left;
	user-select: none;
}
#footerNavi ol li a {}


#footerNavi ol li > a {
  padding: 0 5px;
  box-shadow: inset 0 0 0 0 black;
  transition: all 0.5s ease-in-out 0s;
}
#footerNavi ol li > a:hover{
    box-shadow: inset 0 300px 0 0 black;
    color: white;
  }

/**********************************************************************************************

　footer

**********************************************************************************************/
#foot-rogo {width: 10vw; margin: auto; padding-top: 100px;}
@media (max-width: 750px) {#foot-rogo {width: 20vw;}}
#foot-comp{
	background-color:#f2e9f2;
	color: black;
	text-align: center;
}
#foot-comp h2{
	font-size: 2.5rem;
	font-family: 'Sawarabi Mincho', serif;
	letter-spacing:0.35em;
}
#foot-comp address {
	font-size: 1.3rem;
	padding-bottom: 25px;
}
#foot-comp p {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 1.0rem;
	padding: 50px 0;
}
/**********************************************************************************************

　SHIP

**********************************************************************************************/
#ship {
	position: relative;
	 top: 120px;
	left: 35%;
	width: 120px;
	height:120px;
	z-index:2000;
}@media (max-width: 750px) {
	#ship {
	 top: 80px;
	left: 5%;
	width: 100px;
	height:100px;
	z-index:2000;
}}
#ship img {}
.target {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
}

/* Animation */
#ship {
  animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
}
#ship-r {
  animation: rotation 3s ease-in-out infinite alternate-reverse;
}
.target {
  animation: floating-y 2.3s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
  0% {
    transform: translateX(-15%);
  }
  100% {
    transform: translateX(15%);
  }
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}
@keyframes rotation{
  0%{ transform:rotateZ(-7deg);}
  100%{ transform:rotateZ(7deg); }
}

/**********************************************************************************************

　wave

**********************************************************************************************/
.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:100px;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}



/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 8s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 20s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 28s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 40s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}
/**********************************************************************************************

　Common

**********************************************************************************************/



/**********************************************************************************************

　main

**********************************************************************************************/