@charset "utf-8";

html {
  
}
/*-----------------------------------
共通css
-----------------------------------*/
/*link.txt-------------------*/
a {text-decoration: none;}
a:link { color: #911b42; } /* リンクの色 */
a:visited { color: #911b42; } /* 済みリンク */
a:hover { 
	color: #911b42;
	text-decoration: underline;
}/* リンク上 */
a:active { color: #911b42; }/* onclick */
h1 a:link {
	color:#333333;
	text-decoration:none;
}
/*#gnavi li a:link {
	color:#5B5B5B;
	text-decoration:none;
}
#gnavi li a:hover {
	color:#AF4142;
	text-decoration:none;
}*/


header {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
}

main{

}

section{
	padding: 20px 20px; 
	background: url("../images/background.png");
	background-size:100% auto;
	max-width: 1040px;
  margin: 0 auto;
}

.title {
  margin-right: auto;
}
 
/*.menu-item {
  list-style: none;
  display: inline-block;
  padding: 10px;
}*/
/*--------------------------
float,txt装飾
--------------------------*/
.left{float:left;}
.right{float:right;}
.center{	text-align:center;}
.small{
	font-size:77%;
	font-family: 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3','ＭＳ Ｐ明朝','MS PMincho','Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R',  Georgia, Times, Baskerville, Palatino, serif;
}
.bold{
	font-weight:bold;
	color:#3a698c;
}
.clear{clear:both;}
.red{color:#911b42}
.display{display:inline;}
/*--------------------------
h,box,txt
--------------------------*/
h1{
	float:left;
	padding:5px 0;
	font-size:35px;
	
}
h2{
	font-size:1.1rem;
	padding:3px 0 3px 10px;
	margin:13px 0;
	color:#838282;
}
p{
	font-size: 0.9rem;
	word-wrap:break-word;
}

/*グローバルナビ--------*/
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

:root {
     --nav-height: 10vh;
     /*--nav-background: #ccc;*/
}

nav {
     display: flex;
     padding: 0 50px;
     align-items: center;
     width: 100%;
     height: var(--nav-height);
     background: var(--nav-background);
}

.logo h1 {
     font-size: 20px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 3px;
}

/* nav-links */

.nav-links {
     display: flex;
     height: var(--nav-height);
     align-items: center;
     margin-left: auto;
}

.nav-links li {
     list-style: none;
     margin: 0px;
     height: var(--nav-height);
     line-height: var(--nav-height);
     text-align: center;
     text-align:center;
}

.nav-links li a {
     text-decoration: none;
     color: rgb(99, 99, 99);
     position: relative;
     width:100px;
     border-right:1px dotted #CCC;
     padding: 0px 20px 0px 20px;
}

/* menu */

.menu {
     cursor: pointer;
     background: var(--nav-background);
     border: none;
     outline: none;
     display: none;
}

.menu .bar {
     width: 20px;
     height: 2px;
     background: #000;
     border-radius: 5px;
     opacity: 1;
     visibility: visible;
     transition: 0.5s ease;
     transform-origin: left;
}

.menu .bar1 {
     margin-bottom: 5px;
}

.menu .bar3 {
     margin-top: 5px;
}

.menu.toggle .bar1 {
     transform-origin: left;
     transform: rotate(45deg);
}

.menu.toggle .bar2 {
     opacity: 0;
     visibility: hidden;
}

.menu.toggle .bar3 {
     transform-origin: left;
     transform: rotate(-45deg);
     
}

/* responsive */

@media screen and (max-width: 780px) {
     .nav-links {
          flex-direction: column;
          position: fixed;
          top: 0;
          left: 100%;
          width: 200px;
          height: 100%;
          background: var(--nav-background);
          margin-top: var(--nav-height);
          transition: 0.5s ease-out;
          z-index: 100;
          background: #9cc7e0;
     }
     .nav-links li {
          height: var(--nav-height);
          line-height: var(--nav-height);
          text-align: center;
          width: 100%;
          display: block;
     }
     .menu {
          display: block;
          margin-left: auto;
     }

     .menu.toggle + .nav-links {
          transform: translateX(-100%);
     }
}




/*コンテンツ--------*/
#contents{
	width: 100%;
	padding-bottom: 50px;
	margin: 0 auto;
	overflow:hidden;
	position: relative;
}
#contensimag
#main{	
	margin-top:23px;
	overflow:hidden;
}
#left_box{
	width:200px;
	overflow:hidden;
	float:left;
}
#right_box{
	width:680px;
	overflow:hidden;
	float:right;
}
#tel_box{
	position: relative;
	height: 10px;
}
#tel_box > a{
	position: absolute;
	right: 10px;
	top: -25px;
}

img {
	width:100%;
	max-width: 100%;
	height: 100%;
}
/*mainのwave--------*/
.main-img{
	width: 100%;
	position: absolute;
	z-index: 1;
}
.wave1{
	position: absolute;
	top:-20px;
	left:-100px;
}
.wave2{
	position: absolute;
	top:150px;
	left:50px;
}
.wave3{
	position: absolute;
	top:310px;
	left:-150px;
}
.wave4{
	position: absolute;
	top:470px;
	left:100px;
}
.onlineshop{
	position: relative;
}
.onlineshop-link{
	/*background-image: url("../images/yellow.png");*/
	color: #928606;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.onlineshop>img{
	width:150px;
}

.contact{
	/*position: relative;*/
	background: url("../images/blue.png");
	background-repeat: no-repeat;
}
.contact-link{
	color: #2e56d9;
	/*position: absolute;*/
	/*top: 50%;*/
	/*left: 50%;*/
	/*-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;*/

}

.contact>img{
	width:150px;
}

.box{
	width:100%;
	display: flex;
	margin-top: 20px;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}

.box50{
	width:50%;
}

.howabout-image{
	width:80%;
	height: auto;
	z-index: 50;
	margin: 20px 20px;
}


/* Hoeabout */
#howabout{
	width: 100%;
	padding-bottom: 50px;
	margin: 0 auto;
	overflow:hidden;
	position: relative;
}

.mess{
	width: 80%;
	margin: auto;
}
p.mess{
	margin-bottom: 30px;
}

/* season */

.season-fish{
	padding: 0 120px;
}

.spring{
	position: relative;
}
.summer{
	position: relative;
	margin-top: 100px;
}
.autumn{
	position: relative;
}
.winter{
	position: relative;
	margin-top: 100px;
}

/*  漢字文字共通 */
.season-letter{
    width: 50%;
    height: auto;
}
/* 季節背景共通 */
.season-back{
	width: 100%;
}
/* 季節の魚共通 */
.fish{
	width: 60%;
	height: auto;
	position: absolute;
}
.rotation{
	transform: scale(-1, 1);
}

.description-right{
	top: 15%;
    left: 5%;
}

.description-left{
	top: 55%;
    left: 70%;
}
 /* 春ゾーン */
.spring-letter{
	position: absolute;
	top: 5%;
    right: -15%;
}
.fish1{
	top: 15%;
    left: 0%;
}
.fish2{
	top: 50%;
    left: 30%;
}
.description1{
	top: 15%;
    left: 5%;
}
.description2{
	top: 70%;
    left: 65%;
}

/* 夏ゾーン */
.summer-letter{
	position: absolute;
	top: 35%;
    right: 70%;
    width: 40%;
}
.fish3{
	top: 10%;
    left: 25%;
}
.fish4{
	top: 60%;
    left: 30%;
}
/* 秋ゾーン */
.autumn-letter{
	position: absolute;
	top: -5%;
    right: -5%;
    width: 40%;
}
.fish5{
	top: 15%;
    left: 10%;
}
.fish6{
	top: 38%;
    left: 30%;
}
/* 冬ゾーン */
.winter-letter{
	position: absolute;
	top: 10%;
    right: 65%;
}
.fish7{
	top: 5%;
    left: 10%;
}
.fish8{
	top: 35%;
    left: 45%;
}
.fish9{
	top: 70%;
    left: 20%;
}
.description7{
	top: 0%;
    left: 50%;
}
.description8{
	top: 30%;
    left: 80%;
}
.description9{
	top: 70%;
    left: 70%;
}


/* Shop Info */
#shop-info{
	width: 100%;
	background-size:cover;
  	background-position:50%;
	background: url("../images/beanstalk.png");
	position: relative;
	padding: 25px;
}
.shop-letter{
	position: relative;
	z-index: 100;
	color: #fff;
}
.shop-infomation{
	position: relative;
	z-index: 100;
	color: #fff;
	text-align: center;
	font-weight: normal;
    margin: 25px auto;
    font-size: 1.2rem;
}
.shop{
	position: relative;
	text-align: center;
	margin: 0 auto;
	z-index: 100;
	width: 80%;
	height: auto;
}

#shop-info::after{
	content: '';
	background-color: rgb(0 105 255 / 53%);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

}
@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
}

@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
	.box50{
		width: 100%;
	}

	/* season */
	.season-fish{
		padding: 0 50px;
	}
	.spring{
	}
	.summer{
		margin-top: 0px;
	}
	.autumn{
	}
	.winter{
		margin-top: 0px;
	}

}