@charset "utf-8";
/* CSS Document */
.mt20{margin-top: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb160{margin-bottom: 160px;}

.pc{display: block;}
.sp{display: none;}
ul {list-style: none;}
figure{line-height: 0;}
a img:hover{opacity: 0.9;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}

/*----fonttype----*/
nav ul li a p,
#prologue .main .txt .catch,#prologue .main .txt .catch span ,#prologue .main .txt h3,#prologue .main .txt h3 span,#point .main .box dt,#target .main-item .main-item-inner .txt h3,#target .main-item .main-item-inner .txt h3 span,#target .main-item .g-btn .btn006-btn,#target .main-item .g-btn .btn009-btn,#target .gallery-thumb li p,#recipe h3,#recipe h3 span,#all-item .main .item h3,#all-item .main .item .price{
font-family: "irohamaru-mikami", sans-serif;
font-weight: 400;
font-style: normal;}

#prologue .main .txt .leed,#prologue .main .txt .disclaimer,#recipe .center p span,#recipe .center ul li span,#recipe .top dd,#recipe .bottom .fish-group dt,#recipe .bottom .fish-group dd,#recipe .detail a,#all-item .main .quantity,#map .swipe{
font-family: source-han-sans-japanese, sans-serif;
font-style: normal;}

#recipe h3{font-family: "maru-maru-gothic-asr-stdn", sans-serif;
font-weight: 400;
font-style: normal;}

#recipe .center h4,#recipe .top dt,#recipe .bottom h5,#recipe h4,#recipe h4 span,#recipe .other-inner p,#all-item .inner .size-select a,#all-item h3
{font-family: "fot-tsukuardgothic-std", sans-serif;
font-weight: 700;
font-style: normal;}

.thum-title{
font-family: ab-kirigirisu, sans-serif;
font-style: normal;
font-weight: 400;}




h1{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;}




.mainbnr{
	text-align: center;
	background-color: #f7f7f7;
	line-height: 0;}
.mainbnr img{max-width: 70%;margin: 0 auto;}



.inner{width: 1080px;margin: 0 auto;}




nav{
	background-color: #00abbd;
	position: relative;
	margin-bottom: 150px;}
nav ul{display: flex; flex-wrap: wrap; padding: 60px 0 0;}
nav ul li{width: 20%; text-align: center; border-left: dotted 2.5px #fff;}
nav ul li:last-child{border-right: dotted 2.5px #fff;}
nav ul li a{width: 90%; font-size: 21px;}
nav ul li a figure{height: 64px; margin-bottom: 20px; align-content: center;}
nav ul li a p{color: #fff;}
nav:after{
	content: "";
	background: url("../img/wave-01.svg") no-repeat;
	width: 100%;
	height: 200px;
	position: absolute;
	left: 0;
	top: 77%;
	z-index: -1;}




#prologue{margin: 0 0 150px;}
#prologue .inner{padding: 60px 0 0;}
#prologue h2{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;}
#prologue .title-img{text-align: center;}
#prologue .main{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 60px 0;}
#prologue .main .txt{width: 50%; display: flex; flex-direction: column;}
#prologue .main .txt h3{font-size: 40px; margin-bottom: 30px; line-height: 1; color: #00abbd;}
#prologue .main .txt h3 span{font-size: 50%;}
#prologue .main .txt .catch{font-size: 25px; order: -1; margin-bottom: 15px;}
#prologue .main .txt .catch .dots {
  background-image: radial-gradient(circle at center, #00abbd 20%, transparent 20%); /* 点の色とサイズ調整 */
  background-position: top right; /* 点の位置 */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
  padding-top: .4em; /* 縦方向の位置調整 */}
#prologue .main .txt .leed{font-size: 16px; margin-bottom: 20px;}
#prologue .main .txt .disclaimer{font-size: 13px;}




#point{background-color: #fdf1ef; position: relative;}
#point:before{
	content: "";
	background: url("../img/wave-02.svg") no-repeat;
	width: 100%;
	height: 200px;
	position: absolute;
	left: 0;
	bottom: 80%;
	z-index: -1;}
#point .inner{padding: 80px 0;}
#point h2{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;}
#point .title-img{text-align: center;}
#point .main{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 60px;}
#point .main .box{width: 22%;}
#point .main .box dl{display: flex; flex-direction: column;}
#point .main .box dt{font-size: 18px; color: #00abbd; text-align: center; padding-bottom: 10px; font-weight: 500;}
#point .main .box dd{font-size: 16px; flex-grow: 1;}




#target h2{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;}
#target .inner{padding: 70px 0;}
#target .title-img{text-align: center;}
#target .gallery{margin-top: 100px;}
#target .gallery .gallery-main{margin-bottom: 100px;}
#target .main-item .main-item-inner{
	margin-bottom: 60px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;}
#target .main-item .main-item-inner figure{width: 60%;}
#target .main-item .main-item-inner figure{position: relative;}
#target .main-item .main-item-inner figure:before{
	content: "";
	background: url("../img/nami-01.webp")no-repeat;
	width: 76px;
	height: 72px;
	position: absolute;
	left: 0;
	top: -30px}
#target .main-item .main-item-inner .txt{width: 40%; align-content: center;}
#target .main-item .main-item-inner .txt h3{font-size: 45px; color: #00abbd; line-height: 1; margin-bottom: 40px;}
#target .main-item .main-item-inner .txt h3 span{font-size: 60%; color: #108a95;}
#target .main-item .main-item-inner .txt p{font-size: 16px; margin-bottom: 40px;}
#target .main-item .main-item-inner .txt figure{width: 100%;}
#target .main-item .main-item-inner .txt figure:before{content: none;}
#target .gallery-main .main-item {display: none;}
#target .gallery-main .main-item.is-active {display: block;}
#target .thum-title{font-size: 35px; color: #00abbd; text-align: center; margin-bottom: 40px;}
/* サムネ */
#target .gallery-thumb {display: flex; flex-wrap: wrap; position: relative;}
#target .gallery-thumb:after{
	content: "";
	background: url("../img/nami-03.webp")no-repeat;
	width: 130px;
	height: 63px;
	position: absolute;
	right: -10px;
	bottom: -50px;}
#target .gallery-thumb li{width: 23%; margin-right: 2.6%; margin-bottom: 30px;}
#target .gallery-thumb li:nth-child(4n){margin-right: 0%;}
#target .gallery-thumb li img{width: 100%;}
#target .gallery-thumb li p{font-size: 18px; text-align: center; color: #00abbd;}
#target .thumb {
	position: relative;
	border: 3px solid transparent;
	padding: 0;
	background: none;
	cursor: pointer;
	line-height: 1;}
#target .thumb.is-active {border-color: #00abbd;}
/* 表示中ラベル */
#target .thumb .status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.6);
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	opacity: 0;}
#target .thumb.is-active .status {opacity: 1;}
/*-グラム選択button-*/
#target .main-item .g-btn{display: flex; flex-wrap: wrap; justify-content: center; position: relative;}
#target .main-item .g-btn:after{
	content: "";
	background: url("../img/nami-02.webp")no-repeat;
	width: 185px;
	height: 63px;
	position: absolute;
	right: -50px;
	bottom: -100px;}
#target .main-item .g-btn .btn006{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	border-radius: 100px;
	width: 430px;
	gap: 10px;}
#target .main-item .g-btn .btn009 {
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 3px #000;
	width: 430px;
	margin-left: 50px;
	border-radius: 100px;
	gap: 10px;}
#target .main-item .g-btn .btn006-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	font-size: 24px;
	padding: 10px 0;
	width: 100%;
	color: #fff;}
#target .main-item .g-btn .btn009-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	font-size: 24px;
	padding: 10px 0;
	width: 100%;
	color: #000;}
/* 丸みのある矢印 */
#target .main-item .g-btn .btn006-arrow {
	position: relative;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #000;
	background-color: #fff;
	border-radius: 50%;
	overflow: hidden;}
#target .main-item .g-btn .btn009-arrow {
	position: relative;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #000;
	background-color: #000;
	border-radius: 50%;
	overflow: hidden;}
#target .main-item .g-btn .btn006-arrow span {
	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - 12px);
	width: 16px;
	height: 3px;
	border-radius: 10px;
	display: inline-block;
	background-color: #000;}
#target .main-item .g-btn .btn009-arrow span {
	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - 12px);
	width: 16px;
	height: 3px;
	border-radius: 10px;
	display: inline-block;
	background-color: #fff;}
#target .main-item .g-btn .btn006-arrow span::before {
	content: '';
	position: absolute;
	top: calc(50% - 6px);
	right: -8px;
	width: 10px;
	height: 10px;
	display: inline-block;
	border-top: 3px solid #000;
	border-right: 3px solid #000;
	border-radius: 0 5px 0 0;
	transform: rotate(45deg);}
#target .main-item .g-btn .btn009-arrow span::before {
	content: '';
	position: absolute;
	top: calc(50% - 6px);
	right: -8px;
	width: 10px;
	height: 10px;
	display: inline-block;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	border-radius: 0 5px 0 0;
	transform: rotate(45deg);}
/* ホバーアニメーション */
#target .main-item .g-btn .btn006-btn:hover .btn006-arrow span {
animation: arrow-loop 0.6s ease-in-out forwards;}
#target .main-item .g-btn .btn009-btn:hover .btn009-arrow span {
animation: arrow-loop 0.6s ease-in-out forwards;}
@keyframes arrow-loop {
0% {transform: translateX(0); opacity: 1;}
40% {transform: translateX(110%); opacity: 0;}
41% {transform: translateX(-110%); opacity: 0;}
100% {transform: translateX(0); opacity: 1;}}




#map{background-color: #fdf1ef; position: relative;}
#map:before{
	content: "";
	background: url("../img/wave-02.svg") no-repeat;
	width: 100%;
	height: 200px;
	position: absolute;
	left: 0;
	bottom: 83%;
	z-index: -1;}
#map .inner{padding: 80px 0; position: relative;}
#map .inner:after{
	content: "";
	background: url("../img/nami-04.webp")no-repeat;
	width: 104px;
	height: 62px;
	position: absolute;
	left: 0;
	bottom: -30px;}
#map h2{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;}
#map .title-img{text-align: center;}
#map .main{margin-top: 60px; text-align: center;}




#recipe{margin-bottom: 100px;}
#recipe .inner{padding: 70px 0;}
#recipe h2{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;}
#recipe .title-img{text-align: center;}
#recipe .main{margin-top: 60px; text-align: center;}
#recipe h3{font-size: 50px; margin-bottom: 40px;}
#recipe h3 .mini{font-size: 80%;}
#recipe h3 .nami{
	display: inline-block;
	text-decoration: none;
	padding-bottom: 0px;
	/* 元のイラレのパスの比率（約13.9pxで1周期）をベースに修正 */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.78 10'%3E%3Cpath d='M0 3.35 c 6.94 0 6.94 3.55 13.89 3.55 s 6.94 -3.55 13.89 -3.55' fill='none' stroke='%2300abbd' stroke-width='2.66' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: bottom;
	/* 1周期13.89pxを2つ分並べた27.78pxを横幅に指定 */
	background-size: 27.78px 10px;}
#recipe .top{background-color: #fdf1ef; border-radius: 10px; box-sizing: border-box; padding: 30px; margin-bottom: 50px;}
#recipe .top dt{font-size: 23px; text-align: left; text-indent: 2em; position: relative;}
#recipe .top dt:before{
	content: "";
	background: url("../img/good.webp")no-repeat;
	width: 29px;
	height: 35px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);}
#recipe .top dd{font-size: 17px; text-align: left;}
#recipe .center{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px;}
#recipe .center .txt{width: 48%;}
#recipe .center h4{font-size: 30px; text-align: left; margin-bottom: 30px; color: #00abbd; line-height: 1;}
#recipe .center p{font-size: 18px; text-align: left; position: relative; line-height: 1; margin-bottom: 10px;}
#recipe .center p:after{content: ""; width: 100%; height: 1px; background-color: #000; position: absolute; right: 0; top: 40%; transform: translateY(50%); z-index: -1;}
#recipe .center p span{background-color: #fff;}
#recipe .center ul li{display: flex; justify-content: space-between;}
#recipe .center ul li span{font-size: 16px;}
#recipe .bottom{text-align: left; margin-bottom: 40px;}
#recipe .bottom h5{font-size: 23px; color: #fff; background-color: #00abbd; display: inline-block; padding: 0 30px 0 10px; clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%); line-height: normal;}
#recipe .bottom .fish-group{border: solid 2px #00abbd; padding: 25px;}
#recipe .bottom .fish-group dl{display: flex; justify-content: space-between; border-bottom: dashed 1px #00abbd; padding: 10px 0;}
#recipe .bottom .fish-group dl:last-child{border-bottom: none; padding-bottom: 0;}
#recipe .bottom .fish-group dl:first-child dt{color: #ddba83;}
#recipe .bottom .fish-group dl:nth-child(2) dt{color: #0099b8;}
#recipe .bottom .fish-group dl:nth-child(3) dt{color: #ff974c;}
#recipe .bottom .fish-group dl dt{width: 7%; font-size: 18px; text-align: left; font-weight: 500;}
#recipe .bottom .fish-group dl dd{width: 90%; font-size: 16px; text-align: left; font-weight: 500;}
#recipe .detail{margin-bottom: 60px;}
#recipe .detail a{font-size: 20px; color: #fff; background-color: #00abbd; padding: 15px 70px; border-radius: 5px; display: inline-block; font-weight: 500;}
#recipe h4{font-size: 30px; margin-bottom: 40px;}
#recipe h4 span{color: #00abbd;}
#recipe .other-inner{display: flex; flex-wrap: wrap; justify-content: space-between;}
#recipe .other-inner a{position: relative;}
#recipe .other-inner p{
	font-size: 30px;
	color: #fff;
	background-color: rgba(0, 171, 189, 0.85);
	padding: 0 20px;
	position: absolute;
	left: -10px;
	bottom: -10px;
	z-index: 5;}
#recipe .cooking:nth-child(n+2){margin-top: 200px;}




#all-item{background-color: #fdf1ef; position: relative;}
#all-item:before{
	content: "";
	background: url("../img/wave-02.svg") no-repeat;
	width: 100%;
	height: 200px;
	position: absolute;
	left: 0;
	bottom: 83%;
	z-index: -1;}
#all-item .inner{padding: 80px 0; position: relative;}
#all-item .title-img{text-align: center;}
#all-item .inner .size-select{display: flex; flex-wrap: wrap; margin: 70px 0;}
#all-item .inner .size-select a{width: 32%; margin-right: 2%; font-size: 30px; box-sizing: border-box; padding: 5px 0; text-align: center; background-color: #fff; position: relative;}
#all-item .inner .size-select .size60{color: #00abbd; border: solid 3px #00abbd; border-radius: 5px;}
#all-item .inner .size-select .size60:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 19px 19px;
	border-color: transparent transparent #00abbd transparent;
	position: absolute;
	right: 0;
	bottom: 0;}
#all-item .inner .size-select .size80{color: #84c719; border: solid 3px #84c719; border-radius: 5px;}
#all-item .inner .size-select .size80:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 19px 19px;
	border-color: transparent transparent #84c719 transparent;
	position: absolute;
	right: 0;
	bottom: 0;}
#all-item .inner .size-select .other{color: #ff974c; border: solid 3px #ff974c; border-radius: 5px; margin-right: 0;}
#all-item .inner .size-select .other:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 19px 19px;
	border-color: transparent transparent #ff974c transparent;
	position: absolute;
	right: 0;
	bottom: 0;}
#all-item h2{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;}
#all-item h3{font-size: 25px;}
#all-item #blue{color: #00abbd; border-bottom: solid 1px #00abbd;}
#all-item #green{color: #84c719; border-bottom: solid 1px #84c719; margin-top: 65px;}
#all-item #orage{color: #ff974c; border-bottom: solid 1px #ff974c; margin-top: 65px;}
#all-item .main{margin-top: 30px; display: flex; flex-wrap: wrap;}
#all-item .main .item{width: 32%; margin-right: 2%; text-align: left; display: flex; flex-direction: column;}
#all-item .main .item:nth-child(3n){margin-right: 0;}
#all-item .main .item:nth-child(n+4){margin-top: 50px;}
#all-item .main .item .txt{display: flex; flex-direction: column; flex-grow: 1;}
#all-item .main .item h4{font-size: 18px; margin-top: 15px; flex-grow: 1;}
#all-item .main .quantity{font-size: 16px; padding-bottom: 10px;}
#all-item .main .item .price{font-size: 20px; color: #00abbd;}


.spotlist_back {
	margin-top: 60px;
	text-align: center;}
.spotlist_back a {
	font-size: 20px;
	border: solid 2px;
	padding: 15px 80px;
	border-radius: 10px;}


/*---RPA---*/
.rpa-product-name,.rpa-product-price{padding: 0; color: unset; line-height: inherit; font-size: inherit; font-weight: unset;}



@media only screen and (max-width: 768px) {}
@media (max-width: 1024px) {}
@media (max-width: 768px) {
	.pc{display: none;}
	.sp{display: block;}

	
	h1 img{max-width: 100%;}
	.inner{width: 95% !important;}
	
	.mainbnr img{max-width: 100%;}
	
	nav{margin-bottom: 80px;}
	nav ul{justify-content: space-between;}
	nav ul li{width: 49%; border-left: 0;}
	nav ul li:nth-child(odd){border-right: dotted 4px #fff;}
	nav ul li:nth-child(n+3){margin-top: 20px;}
	nav:after {content: ""; top: 100%;}
	
	
	#prologue{margin: 0 0 80px;}
	#prologue .main figure img{width: 100%;}
	#prologue .main .txt{width: 100%; padding-top: 30px;}
	#prologue .main .txt .catch{font-size: 21px;}
	#prologue .main .txt .disclaimer{font-size: 14px;}
	#prologue .main .txt h3{line-height: 1.2;}
	
	
	#point:before{bottom: 82%;}
	#point .main .box{width: 47%;}
	#point .main .box:nth-child(n+3){margin-top: 30px;}
	#point .main .box img{width: 100%;}
	#point .main .box dt{padding: 10px 0;}
	
	
	#target .main-item .main-item-inner figure{width: 100%;}
	#target .main-item .main-item-inner figure img{width: 100%;}
	#target .main-item .main-item-inner .txt{width: 100%;}
	#target .main-item .main-item-inner .txt img{width: 100%;}
	#target .main-item .g-btn .btn009{margin: 40px 0 0 0;}
	#target .gallery-thumb{justify-content: space-between;}
	#target .gallery-thumb li{width: 48%; margin-right: 2%;}
	#target .gallery-thumb li:nth-child(even){margin-right: 0%;}
	#target .main-item .main-item-inner .txt h3{font-size: 37px; margin: 25px 0;}
	#target .thum-title{font-size: 32px; letter-spacing: -2px;}
	
	
	#map:before{bottom: 82%;}
	#map .main figure{overflow: scroll;}
	#map .swipe{text-align: center; font-weight: bold; padding: 20px 0; font-size: 20px; color: #222;}
	
	
	#recipe h3{font-size: 40px;}
	#recipe .top{padding: 20px;}
	#recipe .top dd{padding-top: 10px; font-size: 16px;}
	#recipe .center h4{margin-top: 15px;}
	#recipe .bottom h5{font-size: 20px;}
	#recipe .main .cooking .center figure img{width: 100%;}
	#recipe .center .txt{width: 100%;}
	#recipe .bottom .fish-group dl{display: block;}
	#recipe .bottom .fish-group dl dt{width: 100%;}
	#recipe .bottom .fish-group dl dd{width: 100%;}
	#recipe .other-inner{justify-content: center;}
	#recipe .other-inner a:nth-child(n+2){margin-top: 40px;}
	#recipe .bottom .fish-group{padding: 20px;}
	#recipe .other-inner p{font-size: 25px;}
	
	
	#all-item .main .item h4{font-size: 16px;}
	#all-item .inner .size-select a{width: 100%; margin-right: 0;}
	#all-item .inner .size-select a:nth-child(n+2){margin-top: 30px;}
	#all-item .main .item{width: 48%; margin-right: 4%;}
	#all-item .main .item:nth-child(3n){margin-right: auto;}
	#all-item .main .item:nth-child(even){margin-right: 0;}
	#all-item .main .item figure img{width: 100%;}
	#all-item .main .item:nth-child(n+3){margin-top: 50px;}
	#all-item .main .item .price{font-weight: 500;}
	
}