@charset "utf-8";

/* -----------------------------
	蟹　ページタイトル
-------------------------------- */
#crab .page-title-area {
	height: 700px;
	background: url("../img/bg-washi02.png"), var(--black);
	position: relative;
	z-index: -1;
}

#crab .page-title-area::before,
#crab .page-title-area::after {
	display: none;
}

#crab .page-title-area .page-title {
	position: absolute;
	top: 32%;
	right: calc( ( 100% - 1200px ) / 2 );
	padding: 0;
}

#crab .page-title-area .page-title .jp {
	font-size: 12rem;
	font-family: var(--fude);
	position: relative;
}

#crab .page-title-area .page-title .jp::before {
	content: "";
	display: inline-block;
	background: url("../img/red-circle.svg") center/cover, no-repeat;
	width: 210px;
	height: initial;
	aspect-ratio: 212 / 215;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-55%);
	z-index: -1;
}

#crab .h1-area {
    top: 600px;
}

#crab .breadcrumbs {
	margin-top: -110px;
	padding-top: 0;
}

#crab .page-title-area .page-title-img {
	position: absolute;
	top: 0;
	left: calc( ( ( 100% - 1200px ) / 2 ) + 100px );
	background: url("../img/kani-hand.png") center/cover, no-repeat;
	width: 600px;
	height: initial;
	aspect-ratio: 600 / 574;
}

#crab .page-title-area .catch-wrap {
	display: flex;
	position: absolute;
	top: 55%;
	left: calc( ( 100% - 1200px ) / 2 );
	gap: 0 130px;
}

#crab .page-title-area .catch {
	font-size: 4.0rem;
	font-weight: bold;
	color: #fff;
	letter-spacing: 0;
	line-height: 1;
	display: flex;
	align-items: center;
}

#crab .page-title-area .catch span {
	display: inline-block;
	line-height: 1;
}

#crab .page-title-area .catch .default {
	margin-left: -5px;
}

#crab .page-title-area .left .gi {
	font-size: 8.8rem;
}

#crab .page-title-area .left .tsu {
	font-size: 5.0rem;
	margin-left: -20px;
	padding-top: 30px;
}

#crab .page-title-area .left .shi {
	font-size: 8.2rem;
	margin-left: -20px;
	padding-bottom: 10px;
}

#crab .page-title-area .left .ri {
	font-size: 8.8rem;
	margin-left: -28px;
	padding-top: 10px;
}

#crab .page-title-area .right .pu {
	font-size: 8.8rem;
}

#crab .page-title-area .right .ri {
	font-size: 8.2rem;
	margin-left: -20px;
	padding-bottom: 20px;
}

#crab .page-title-area .right .tsu {
	font-size: 5.0rem;
	margin-left: -20px;
	padding-top: 20px;
}

#crab .page-title-area .deco-circle {
	position: absolute;
	top: 17%;
	left: 37%;
	background: url("../img/text-circle.png") center/cover, no-repeat;
	width: 580px;
	height: initial;
	aspect-ratio: 1/1;
	display: block;
	z-index: -1;
	animation: text-circle 60s linear infinite;
}

@keyframes text-circle {
	0% {
		transform: rotate(0);
	}
	
	100% {
		transform: rotate(360deg);
	}
}


@media screen and (max-width: 768px){
	#crab .h1-area {
		top: 70px;
	}
	
	#crab .page-title-area {
		height: 130vw;
	}
	
	#crab .page-title-area .page-title-img {
		left: -20vw;
		width: 80vw;
	}
	
	#crab .page-title-area .page-title {
		top: 25%;
		/*right: initial;*/
		right: 10vw;
	}
	
	#crab .page-title-area .page-title .jp {
		font-size: 6.0rem;
	}
	
	#crab .page-title-area .page-title .jp::before {
		width: 120px;
	}
	
	#crab .page-title-area .deco-circle {
		top: 17%;
		left: 18vw;
		width: 70vw;
	}
	
	#crab .page-title-area .catch-wrap {
		flex-wrap: wrap;
		top: 78vw;
		left: 5%;
		gap: 0;
		container-type: inline-size;
		width: 95%;
	}
	
	#crab .page-title-area .catch {
		font-size: 6cqw;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}
	
	/*#crab .page-title-area .catch.right {
		justify-content: flex-end;
	}*/
	
	#crab .page-title-area .catch span {
		line-height: 1.1;
	}
	
	#crab .page-title-area .catch .default {
		text-align: left;
		margin-left: 0;
		
	}
	
	#crab .page-title-area .catch .default.sp-full {
		width: 100%;
		margin-left: 10px;
	}
	
	/*catch調整*/
	#crab .page-title-area .left .gi {
		font-size: 18cqw;
	}
	
	#crab .page-title-area .left .tsu {
		font-size: 10cqw;
		margin-left: -20px;
		padding-top: 30px;
	}
	
	#crab .page-title-area .left .shi {
		font-size: 15cqw;
		margin-left: -15px;
		padding-bottom: 10px;
	}
	
	#crab .page-title-area .left .ri {
		font-size: 15cqw;
		margin-left: -18px;
		padding-top: 10px;
	}
	
	#crab .page-title-area .right .pu {
		font-size: 17cqw;
	}
	
	#crab .page-title-area .right .ri {
		font-size: 15cqw;
		margin-left: -10px;
		padding-bottom: 5px;
	}
	
	#crab .page-title-area .right .tsu {
		font-size: 8cqw;
		margin-left: -15px;
		padding-top: 20px;
	}
}

/* -----------------------------
	活イカ　ページタイトル
-------------------------------- */
#squid .page-title-area {
	height: 50vw;
	min-height: 700px;
	background: url("../img/bg-washi02.png"), var(--black);
	position: relative;
	z-index: -1;
}

#squid .page-title-area::before,
#squid .page-title-area::after {
	display: none;
}

#squid .page-title-area .page-title {
	position: absolute;
	top: 30%;
	left: calc( ( 100% - 1200px ) / 2 );
	padding: 0;
}

#squid .page-title-area .page-title .jp {
	font-size: 12rem;
	font-family: var(--fude);
	position: relative;
}

#squid .page-title-area .page-title .jp::before {
	content: "";
	display: inline-block;
	background: url("../img/red-circle.svg") center/cover, no-repeat;
	width: 210px;
	height: initial;
	aspect-ratio: 212 / 215;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-55%);
	z-index: -1;
}

#squid .h1-area {
    top: max(43.5vw,600px);
}

#squid .breadcrumbs {
	margin-top: -110px;
	padding-top: 0;
}

#squid .page-title-area .page-title-img {
	position: absolute;
	top: 170px;
	right: 0;
	background: url("../img/ika-hashi.png") center/cover, no-repeat;
	width: 40%;
	height: initial;
	min-width: 600px;
	aspect-ratio: 1050 / 927;
}

#squid .page-title-area .catch-wrap {
	display: flex;
	position: absolute;
	top: 55%;
	left: calc( ( 100% - 1200px ) / 2 );
	gap: 0;
	flex-wrap: wrap;
}

#squid .page-title-area .catch {
	font-size: 4.0rem;
	font-weight: bold;
	color: #fff;
	letter-spacing: 0;
	line-height: 1;
	display: flex;
	align-items: center;
	width: 100%;
}

#squid .page-title-area .catch span {
	display: inline-block;
	line-height: 1;
}

#squid .page-title-area .catch .default {
	margin-left: -5px;
}

#squid .page-title-area .catch .ko {
	font-size: 8.8rem;
}

#squid .page-title-area .catch .ri {
	font-size: 7.0rem;
	margin-left: -15px;
	padding-top: 30px;
}

#squid .page-title-area .catch .ko02 {
	font-size: 8.8rem;
	margin-left: -15px;
}

#squid .page-title-area .catch .ri02 {
	font-size: 7.0rem;
	margin-left: -18px;
	padding-top: 30px;
}


#squid .page-title-area .deco-circle {
	position: absolute;
	top: 8%;
	right: 14%;
	background: url("../img/text-circle.png") center/cover, no-repeat;
	width: 35%;
	min-width: 550px;
	height: initial;
	aspect-ratio: 1/1;
	display: block;
	z-index: -1;
	animation: text-circle 60s linear infinite;
}

@keyframes text-circle {
	0% {
		transform: rotate(0);
	}
	
	100% {
		transform: rotate(360deg);
	}
}


@media screen and (max-width: 768px){
	#squid .h1-area {
		top: 70px;
	}
	
	#squid .page-title-area {
		height: 130vw;
		min-height: initial;
	}
	
	#squid .page-title-area .page-title-img {
		right: -30vw;
		width: 80vw;
		min-width: initial;
		top: 20vw;
	}
	
	#squid .page-title-area .page-title {
		top: 35vw;
		left: 5%;
	}
	
	#squid .page-title-area .page-title .jp {
		font-size: 6.0rem;
	}
	
	#squid .page-title-area .page-title .jp::before {
		width: 120px;
	}
	
	#squid .page-title-area .deco-circle {
		top: 5%;
		right: -8vw;
		width: 80vw;
		min-width: initial;
	}
	
	#squid .page-title-area .catch-wrap {
		flex-wrap: wrap;
		top: 70vw;
		left: 5%;
		gap: 0;
		container-type: inline-size;
		width: 95%;
	}
	
	#squid .page-title-area .catch {
		font-size: 6cqw;
		flex-wrap: wrap;
		width: 100%;
		justify-content: flex-start;
	}
	
	#squid .page-title-area .catch span {
		line-height: 1.1;
	}
	
	#squid .page-title-area .catch .default {
		text-align: left;
		margin-left: 0;
		
	}
	
	#squid .page-title-area .catch .default.sp-full {
		width: 100%;
		margin-left: 10px;
	}
	
	/*catch調整*/
	#squid .page-title-area .catch .ko {
		font-size: 16cqw;
	}
	
	#squid .page-title-area .catch .ri {
		font-size: 14cqw;
		margin-left: -10px;
		padding-top: 20px;
	}
	
	#squid .page-title-area .catch .ko02 {
		font-size: 16cqw;
		margin-left: -10px;
	}
	
	#squid .page-title-area .catch .ri02 {
		font-size: 14cqw;
		margin-left: -10px;
		padding-top: 15px;
	}
	
}


/* -----------------------------
	intro-area
-------------------------------- */
.intro-area {
	padding: 120px 0 800px;
	background: url("../img/bg-washi02.png"), var(--black);
	position: relative;
}

.intro-area .txt-wrap {
	width: 700px;
	text-align: center;
	margin: 0 auto;
	color: #fff;
}

.intro-area .txt-wrap .catch {
	font-size: 3.6rem;
	word-break: keep-all;
}

.intro-area .txt-wrap .catch .deco {
	position: relative;
	z-index: 1;
}

.intro-area .txt-wrap .catch .deco::before {
	content:"";
	background: url("../img/red-marker.png") center/cover, no-repeat;
	width: 300px;
	height: initial;
	aspect-ratio: 368 / 102;
	position: absolute;
	display: inline-block;
	z-index: -1;
	top: 0;
	left: -10px;
}



.intro-area .basic-txt {
	font-family: var(--mincho);
}

.intro-area .img01 {
	position: absolute;
	top: -50px;
	left: 7%;
	width: 20%;
	height: initial;
}

.intro-area .img02 {
	position: absolute;
	top: 300px;
	right: 0;
	width: 24%;
}

.intro-area .img03 {
	position: absolute;
	top: 50%;
	left: 20%;
	width: 45%;
	height: initial;
}

@media screen and (min-width: 769px) and (max-width: 1500px) {
	.intro-area {
		padding: 100px 0 700px;
	}
	
	.intro-area .img01 {
		left: 2%;
		width: 18%;
	}
	
	.intro-area .img02 {
		top: 200px;
		width: 20%;
	}

	.intro-area .img03 {
		top: 48%;
		left: 10%;
		width: 54%;
	}
}

@media screen and (max-width: 768px){
	.intro-area {
		padding: 60vw 0 60vw;
	}
	
	.intro-area .txt-wrap {
		width: 100%;
		padding: 0 20px;
	}
	
	.intro-area .txt-wrap .basic-txt {
		text-align: left;
	}
	
	.intro-area .txt-wrap .catch {
		font-size: 5.8cqw;
	}
	
	.intro-area .txt-wrap .catch .deco::before {
		width: 45vw;
	}
	
	.intro-area .img01 {
		top: -5vw;
		left: 0;
		height: 40vw;
		width: 55vw;
	}
	
	.intro-area .img02 {
		top: 10vw;
		width: 35vw;
		right: 0;
	}

	.intro-area .img03 {
		top: initial;
		bottom: 10vw;
		left: 5%;
		width: 90%;
		height: 45vw;
	}
}

/* -----------------------------
	.appela-area
-------------------------------- */
.appeal-area {
	padding: 0 0 120px;
	background: url("../img/bg-washi02.png"), var(--black);
	position: relative;
	z-index: 1;
}

.appeal-area .appeal-bg {
	background: url("../img/crab-appeal-bg.jpg") center/cover, no-repeat;
	width: 100%;
	height: 550px;
	position: relative;
}

#squid .appeal-area .appeal-bg {
	background: url("../img/squid-appeal-bg.jpg") center/cover, no-repeat;
}

.appeal-area .sec-ttl {
	color: #fff;
	font-size: 6.0rem;
	font-family: var(--mincho);
	writing-mode: vertical-rl;
	position: absolute;
	right: calc( ( 100% - 1200px ) / 2 );
	top: -40px;
	transform: scale(1.2, 1);
}

.appeal-area .appeal-block {
	padding: 200px 0;
	position: relative;
}

.appeal-area .txt-wrap {
	width: 630px;
	color: #fff;
}

.appeal-area .txt-wrap .catch {
	font-size: 3.6rem;
	word-break: keep-all;
	letter-spacing: .1rem;
}

.appeal-area .txt-wrap .sub-catch {
	font-size: 2.1rem;
	word-break: keep-all;
	letter-spacing: .1rem;
	font-family: var(--mincho);
	margin: 0 0 20px;
}

.appeal-area .basic-txt {
	font-family: var(--mincho);
}

.appeal-area .img01 {
	position: absolute;
	top: 50px;
	right: -8%;
	display: inline-block;
	width: 50%;
	max-width: 850px;
}

#squid .appeal-area .img01 {
	right: -3%;
	top: 200px;
}

.appeal-area .img-wrap.img01::after{
	-webkit-mask-image: url("../img/dish-zuwai.png") ;
	-webkit-mask-size: contain;
	mask-image:url("../img/dish-zuwai.png") ;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position:  center;
}

#squid .appeal-area .img-wrap.img01::after{
	-webkit-mask-image: url("../img/dish-ika-sashi.png") ;
	-webkit-mask-size: contain;
	mask-image:url("../img/dish-ika-sashi.png") ;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position:  center;
}

.appeal-area .img02 {
	position: absolute;
	top: 48%;
	left: 7%;
	/*display: inline-block;*/
	width: 32%;
}

#squid .appeal-area .img02 {
	width: 30%;
	top: 55%;
}

.appeal-area .img-wrap.img02::after{
	-webkit-mask-image: url("../img/dish-kegani.png") ;
	-webkit-mask-size: contain;
	mask-image:url("../img/dish-kegani.png") ;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position:  center;
}

#squid .appeal-area .img-wrap.img02::after{
	-webkit-mask-image: url("../img/dish-ika-age.png") ;
	-webkit-mask-size: contain;
	mask-image:url("../img/dish-ika-age.png") ;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position:  center;
}

.appeal-area .deco01 {
	position: absolute;
	top: -100px;
	left: 45%;
	background: url("../img/bg-deco02.png") center/cover, no-repeat;
	width: 586px;
	height: initial;
	aspect-ratio: 586 / 622;
	display: inline-block;
}

.appeal-area .deco02 {
	position: absolute;
	bottom: -100px;
	left: -5%;
	background: url("../img/wide-deco01.png") center/cover, no-repeat;
	width: 110%;
	height: initial;
	aspect-ratio: 2039 / 357;
	display: inline-block;
	z-index: -1;
}

.appeal-area div:nth-child( 2 of .txt-wrap ) {
	margin-top: 15%!important;
}

#squid .appeal-area div:nth-child( 2 of .txt-wrap ) {
	margin-top: 5%!important;
}

/*PCのみ*/
@media screen and (min-width: 769px){
	.appeal-area div:nth-child( odd of .txt-wrap) {
		margin: 0 auto 0 calc( ( 100% - 1200px ) / 2 );
	}
	
	.appeal-area div:nth-child( even of .txt-wrap) {
		margin: 0 calc( ( 100% - 1200px ) / 2 ) 0 auto;
	}
	
	/*.appeal-area div:nth-child( 2 of .txt-wrap ) {
		margin-top: 20%;
	}*/
}

@media screen and (min-width: 769px) and (max-width: 1500px) {
	.appeal-area div:nth-child( 2 of .txt-wrap ) {
		margin-top: 10%!important;
	}
	
	.appeal-area .img02 {
		top: 55%;
		left: 5%;
		width: 35%;
	}
}

@media screen and (max-width: 768px){
	.appeal-area {
		padding: 40px 0 60px;
	}
	
	.appeal-area .appeal-bg {
		height: 60vw;
	}
	
	.appeal-area .sec-ttl {
		font-size: 3.0rem;
		right: 5%;
		top: -20px;
	}
	
	.appeal-area .appeal-block {
		padding: 40px 0 0;
	}
	
	.appeal-area .txt-wrap {
		width: 100%;
		padding: 0 20px;
	}
	
	.appeal-area .txt-wrap .sub-catch {
		font-size: 1.8rem;
		margin: 0 0 10px;
	}
	
	.appeal-area .txt-wrap .catch {
		font-size: 6cqw;
		margin: 0 0 60vw;
	}
	
	.appeal-area .img01 {
		top: 20vw;
		right: -25vw;
		width: 65vw;
	}
	
	#crab .appeal-area .img02 {
		position: absolute;
		top: 78vw;
		left: 7%;
		display: inline-block;
		width: 60vw;
	}
	
	.appeal-area .deco01 {
		top: 70vw;
		left: 45vw;
		width: 70vw;
	}
	
	.appeal-area .deco02 {
		bottom: -60px;
		left: -5%;
		width: 150%;
	}
	
	.appeal-area div:nth-child( 2 of .txt-wrap ) {
		margin-top: 20px!important;
	}
	
	#squid .appeal-area .img01 {
		right: -3%;
		top: 63vw;
		width: 90vw;
	}
	
	#squid .appeal-area .img02 {
		width: 60vw;
		top: initial;
		left: initial;
		position: relative;
		margin: 20px auto;
	}
}

/* -----------------------------
	order-area
-------------------------------- */
.order-area {
	padding: 0 0 150px;
	background: url("../img/bg-washi02.png"), var(--black);
	position: relative;
	z-index: 1;
}

#squid .order-area {
	padding: 0 0 180px;
}

.order-area .order-bg {
	background: url("../img/crab-order-bg.jpg") center/cover, no-repeat;
	width: 100%;
	height: 550px;
	position: relative;
}

#squid .order-area .order-bg {
	background: url("../img/squid-order-bg.jpg") center/cover, no-repeat;
}

.order-area .sec-ttl {
	color: #fff;
	font-size: 6.0rem;
	font-family: var(--mincho);
	writing-mode: vertical-rl;
	position: absolute;
	right: calc( ( 100% - 1200px ) / 2 );
	top: -30px;
	transform: scale(1.2, 1);
}
.order-area .sec-ttl.beside {
	writing-mode: unset;
	right: auto;
	left: calc( ( 100% - 1200px ) / 2 );
	top: auto;
	bottom: -30px;
	font-size: 3.8rem;
	transform: scale(1, 1);
	color: #000;
	padding: 15px 20px;
	background: url("../img/top-dish-bg.jpg") center/cover, no-repeat;
}

.order-area .basic-txt {
	font-family: var(--mincho);
}

.order-area .order-block {
	padding: 100px 0;
	position: relative;
	display: flex;
	width: 1200px;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
}

.order-area .txt-wrap {
	width: 630px;
	color: #fff;
}

/*.order-area .order-block .ukiyo-wrapper {
	width: 500px!important;
}*/

.order-area .order-block .img-wrap {
	width: 500px;
	overflow: hidden;
}

.order-area .order-block .txt-wrap .catch {
	font-size: 3.6rem;
	word-break: keep-all;
	letter-spacing: .1rem;
	margin: 0 0 30px;
}

.order-area .order-block .txt-wrap .sub-catch {
	font-size: 2.1rem;
	word-break: keep-all;
	letter-spacing: .1rem;
	font-family: var(--mincho);
	margin: 0 0 20px;
}

.order-area .flow-block {
	
}

.order-area .flow-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
}

.order-area .flow-box > .ukiyo-wrapper {
	/*width: 45%!important;*/
    height: 100%;
}

.order-area .flow-box > .img-wrap {
	width: 45%;
	height: 30vw;
}

.order-area .flow-box > .txt-wrap {
	width: 55%;
	position: relative;
	z-index: 2;
}

.order-area .flow-box .flow-ttl {
	font-size: 5.0rem;
	font-family: var(--fude);
	margin: 0 0 40px;
	position: relative;
	z-index: 1;
	word-break: keep-all;
	line-height: 1.4;
}

.order-area .flow-box .flow-ttl::before {
	font-family: var(--fude);
	content: "1.";
	display: inline-block;
	position: absolute;
	left: -55px;
	z-index: -1;
}
.order-area .flow-box:nth-child(2) .flow-ttl::before {
	content: "2.";
}
.order-area .flow-box:nth-child(3) .flow-ttl::before {
	content: "3.";
}
#crab .order-area .flow-box:nth-child(2) .txt-wrap.last .flow-ttl::before {
	content: "3.";
}
/*.order-area .flow-box .flow-ttl::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -120px;
	left: -20px;
	background: url("../img/num01.png") center/cover, no-repeat;
	width: 113px;
	height: initial;
	aspect-ratio: 113 / 205;
	z-index: -1;
}
.order-area .flow-box:nth-child(2) .flow-ttl::before {
	background: url("../img/num02.png") center/cover, no-repeat;
	width: 155px;
	height: initial;
	aspect-ratio: 155 / 196;
}*/

#squid .order-area .flow-box:nth-child(2) .img-wrap {
	position: absolute;
	top: 50px;
	right: 5%;
	width: 40%;
	height: initial;
	min-width: 630px;
}

#squid .order-area .flow-box:nth-child(2) .img-wrap::after{
	-webkit-mask-image: url("../img/dish-ika-sashi.png") ;
	-webkit-mask-size: contain;
	mask-image:url("../img/dish-ika-sashi.png") ;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position:  center;
}

/*.order-area .flow-box:nth-child(3) .flow-ttl::before {
	background: url("../img/num03.png") center/cover, no-repeat;
	width: 164px;
	height: initial;
	aspect-ratio: 164 / 207;
	left: -50px;
}*/

.order-area .flow-box:nth-child(3) .img-wrap {
	position: absolute;
	top: -50px;
	right: 5%;
	width: 40%;
	height: initial;
	min-width: 630px;
}

.order-area .flow-box:nth-child(3) .img-wrap::after{
	-webkit-mask-image: url("../img/dish-intro-img01.png") ;
	-webkit-mask-size: contain;
	mask-image:url("../img/dish-intro-img01.png") ;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position:  center;
}

.order-area .feature-block {
	background: #202020;
	width: 100%;
	padding: 120px 0;
	margin: 120px 0 0;
	position: relative;
}

.order-area .feature-block .feature-ttl {
	color: #fff;
	font-family: var(--mincho);
	font-size: 6.0rem;
	letter-spacing: .2rem;
	position: absolute;
	white-space: nowrap;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
}

.order-area .feature-block .feature-ttl .min {
	font-size: 4.0rem;
}

.order-area .feature-block .feature-box-wrap {
	display: flex;
	align-items: flex-start;
	gap: 3%;
	width: 90%;
	margin: 0 auto;
}

.order-area .feature-box {
	width: calc( 94% / 3);
}

.order-area .feature-box .img-wrap {
}

.order-area .feature-box .feature-txt-wrap {
	color: #fff;
	font-family: var(--mincho);
	margin: -50px 0 0;
}

.order-area .feature-box .feature-name {
	font-size: 6.0rem;
	font-family: var(--fude);
	line-height: 1.5;
	position: relative;
	z-index: 1;
	margin: 0 0 20px 20px;
}

.order-area .feature-box .feature-name::before {
	content: "";
	display: inline-block;
	position: absolute;
	background: url("../img/red-circle.svg") center/cover, no-repeat;
	width: 120px;
	height: initial;
	aspect-ratio: 212 / 215;
	z-index: -1;
	top: -20px;
	left: -10%;
}

.order-area .how-to-box-wrap {
	display: flex;
	width: 80%;
	gap: 3%;
	margin: 100px auto 0;
	flex-wrap: wrap;
}

.order-area .how-to-box {
	/*display: flex;
	width: 100%;
	align-items: center;
	position: relative;*/
	width: calc( 94% / 3);
}

.order-area .how-to-box .img-wrap {
	width: 100%;
	height: 30vw!important;
	position: relative;
	/*min-width: 500px;
	position: relative;*/
	container-type: inline-size;
}

.order-area .how-to-box .img-wrap .ukiyo-wrapper {
	height: 100%!important;
}

/*.order-area .how-to-box .img-wrap img {
	height: 100%!important;
}*/

.order-area .how-to-box .img-wrap .how {
	position: absolute;
	top: -50px;
	right: 0;
	font-family: var(--fude);
	writing-mode: vertical-rl;
	font-size: min(20cqw,12.0rem);
	color: #fff;
}

.order-area .how-to-box .txt-wrap {
	width: 80%;
	position: relative;
	z-index: 1;
	container-type: inline-size;
	margin: 10% auto 0;
}

.order-area .how-to-box .txt-wrap::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -20px;
	left: -10%;
	background: url("../img/red-circle.svg") center/cover, no-repeat;
	width: 30%;
	height: initial;
	aspect-ratio: 348/354;
	z-index: -1;
}

.order-area .how-to-box .catch {
	font-size: 10cqw;
	line-height: 1.2;
	display: flex;
	align-items: center;
	letter-spacing: .1rem;
}

#squid .order-area .how-to-box .catch {
	font-size: 8.0cqw;
}

.order-area .how-to-box-wrap .kome {
	color: #fff;
	font-size: 1.4rem;
	width: 100%;
	padding-left: 1.4rem;
	text-indent: -1.4rem;
	margin-top: 40px;
}

/*catch文字調整*/
.order-area .catch .default:not(:first-child) {
	margin-left: -5px;
}

#squid .order-area .how-to-box .txt-wrap {
	width: 90%;
}

#squid .order-area .how-to-box .catch .default {
	letter-spacing: 0;
}

/*活イカ　刺し*/
#squid .order-area .sashi .catch .ko {
	font-size: 15.0cqw;
	padding-bottom: 10px;
}

#squid .order-area .sashi .catch .ri {
	font-size: 14.0cqw;
	margin-left: -20px;
}

#squid .order-area .sashi .catch .ko02 {
	font-size: 15.0cqw;
	padding-bottom: 10px;
	margin-left: -15px;
}

#squid .order-area .sashi .catch .ri02 {
	font-size: 14.0cqw;
	margin-left: -20px;
}

#squid .order-area .sashi .catch .syoku {
	font-size: 14.0cqw;
}
#squid .order-area .sashi .catch .kan {
	font-size: 13.0cqw;
	margin-right: 6px;
	padding-bottom: 5px;
}

/*活イカ　炙り*/
#squid .order-area .grill .catch .kou {
	font-size: 15.0cqw;
	padding-bottom: 10px;
	line-height: .5;
}

#squid .order-area .grill .catch .ji {
	font-size: 14cqw;
}

#squid .order-area .grill .catch .yu {
	margin-left: -15px;
	font-size: 10cqw;
}

#squid .order-area .grill .catch .uu {
	margin-left: -5px;
	font-size: 8cqw;
}

#squid .order-area .grill .catch .shi {
	margin-left: -10px;
	font-size: 12cqw;
}

#squid .order-area .grill .catch .ii {
	margin-left: -5px;
	font-size: 8cqw;
	padding-bottom: 10px;
}

/*活イカ　揚げ*/
#squid .order-area .fried .catch .sa {
	font-size: 13.0cqw;
}

#squid .order-area .fried .catch .ku {
	font-size: 11.0cqw;
	margin-left: -10px;
	padding-bottom: 10px;
}

#squid .order-area .fried .catch .tsu {
	font-size: 8.0cqw;
	margin-left: -10px;
	padding-bottom: 10px;
}

#squid .order-area .fried .catch .pu {
	font-size: 13.0cqw;
}

#squid .order-area .fried .catch .ri {
	font-size: 11.0cqw;
	margin-left: -10px;
}

#squid .order-area .fried .catch .tsu02 {
	margin-left: -10px;
	font-size: 8.0cqw;
}

#squid .order-area .fried .catch .zei {
	font-size: 12.0cqw;
}

#squid .order-area .fried .catch .taku {
	font-size: 11.0cqw;
	padding-bottom: 5px;
}



/*蟹　刺し*/
#crab .order-area .sashi .catch .ama {
	font-size: 15.0cqw;
	padding-bottom: 20px;
	margin-left: -10px;
}

#crab .order-area .sashi .catch .mi {
	font-size: 12.0cqw;
	margin-left: -10px;
	padding-top: 10px;
}

#crab .order-area .sashi .catch .pu {
	font-size: 15.0cqw;
	padding-bottom: 15px;
}

#crab .order-area .sashi .catch .ri {
	font-size: 14.0cqw;
	margin-left: -20px;
	padding-top: 15px;
}

#crab .order-area .sashi .catch .pu02 {
	font-size: 15.0cqw;
	padding-bottom: 15px;
	margin-left: -20px;
}

#crab .order-area .sashi .catch .ri02 {
	font-size: 14.0cqw;
	margin-left: -20px;
	padding-top: 15px;
}

#crab .order-area .sashi .catch .syoku {
	font-size: 15.0cqw;
}

#crab .order-area .sashi .catch .kan {
	font-size: 15.0cqw;
	padding-bottom: 20px;
}

/*蟹 茹で*/
#crab .order-area .boil .catch.right {
	justify-content: flex-end;
}

#crab .order-area .boil .catch .so {
	font-size: 13cqw;
}

#crab .order-area .boil .catch .zai {
	font-size: 13cqw;
	padding-top: 10px;
}

#crab .order-area .boil .catch .uma {
	font-size: 15cqw;
	margin-left: -10px;
}

#crab .order-area .boil .catch .mi {
	font-size: 10cqw;
	margin-left: -10px;
	padding-top: 20px;
}

#crab .order-area .boil .catch .ou {
	font-size: 14cqw;
}

#crab .order-area .boil .catch .dou {
	font-size: 14cqw;
	padding-top: 15px;
}

#crab .order-area .boil .catch .aji {
	font-size: 15cqw;
	padding-bottom: 20px;
}

#crab .order-area .boil .catch .wa {
	font-size: 12cqw;
}

#crab .order-area .boil .catch .i {
	font-size: 12cqw;
	margin-left: -5px;
	padding-bottom: 10px;
}

/*蟹　炙り*/
#crab .order-area .grill .catch {
	line-height: 1;
}

#crab .order-area .grill .catch.right {
	justify-content: flex-end;
}

#crab .order-area .grill .catch .kou {
	font-size: 16cqw;
	padding-bottom: 20px;
}

#crab .order-area .grill .catch .ji {
	font-size: 14cqw;
	padding-bottom: 10px;
}

#crab .order-area .grill .catch .yu {
	margin-left: -15px;
	font-size: 10cqw;
}

#crab .order-area .grill .catch .uu {
	margin-left: -5px;
	font-size: 8cqw;
}

#crab .order-area .grill .catch .shi {
	margin-left: -10px;
	font-size: 12cqw;
}

#crab .order-area .grill .catch .ii {
	margin-left: -5px;
	font-size: 8cqw;
	padding-bottom: 10px;
}

#crab .order-area .grill .catch .zei {
	font-size: 15cqw;
	padding-bottom: 15px;
}

#crab .order-area .grill .catch .taku {
	font-size: 13cqw;
	margin-left: -5px;
}

.order-area .reccomend-box {
	/*background: #202020;*/
	width: 100%;
	padding: 100px 0 0;
	position: relative;
	margin: 100px 0 0;
}

.order-area .reccomend-box .reccomend-ttl {
	font-size: 4.0rem;
	font-family: var(--fude);
	color: #fff;
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
}

.order-area .reccomend-box .reccomend-list {
	display: flex;
	gap:30px;
	max-width: 80%;
	min-width: 1200px;
	margin: 0 auto;
	justify-content: center;
}

.order-area .reccomend-box .reccomend-list li {
	width: calc( ( 100% - 60px ) / 3 );
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
}

.order-area .reccomend-box .reccomend-list .img-wrap {
	flex-grow: 1;
	height: 300px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.order-area .reccomend-box .reccomend-list .img-wrap img  {
	width: initial;
	max-height: 300px;
	max-width: 100%;
	height: initial;
}

.order-area .reccomend-box .reccomend-list .list-name {
	width: 100%;
	font-size: 5.0rem;
	color: #fff;
	font-family: var(--fude);
	text-align: center;
}

.order-area .reccomend-box .reccomend-list .list-txt {
	color: #fff;
	font-family: var(--mincho);
	width: 100%;
	text-align: center;
}

.order-area .reccomend-box .reccomend-list .kome {
	font-size: 1.4rem;
	color: #fff;
	width: 100%;
	text-align: center;
}


/*PCのみ*/
@media screen and (min-width: 769px){
	.order-area .flow-box:first-child .txt-wrap {
		padding-right: calc( ( 100% - 1200px ) / 2 );
		padding-left: 8%;
	}
	
	.order-area .flow-box:nth-child(2) > .txt-wrap {
		margin-top: 100px;
		margin-left: calc( ( 100% - 1200px ) / 2 );
		/*padding-right: 5%;*/
		width: 1200px;
	}
	
	#crab .order-area .flow-box:nth-child(2) > .txt-wrap {
		display: flex;
		align-items: flex-end;
	}
	
	#crab .order-area .flow-box:nth-child(2) > .txt-wrap .flow-ttl {
		margin: 0;
	}
	
	.order-area .flow-box:nth-child(2) > .txt-wrap .basic-txt {
		flex-shrink: 0;
	}
	
	#crab .order-area .flow-box:nth-child(2) > .txt-wrap.last {
		gap: 0 50px;
	}
	
	.order-area .flow-box:nth-child(3) > .txt-wrap {
		margin-top: 100px;
		margin-left: calc( ( 100% - 1200px ) / 2 );
		padding-right: 5%;
	}
}

@media screen and (max-width: 768px){
	.order-area {
		padding: 0 0 50px;
	}
	
	#squid .order-area {
		padding: 0 0 50px;
	}
	
	.order-area .order-bg {
		height: 60vw;
	}
	
	.order-area .sec-ttl {
		font-size: 3.0rem;
		right: 5%;
		top: -13px;
	}
	.order-area .sec-ttl.beside {
		right: auto;
		left: 20px;
		top: auto;
		bottom: -20px;
		font-size: 2.4rem;
		padding: 7px 10px 5px 10px;
	}
	
	.order-area .order-block {
		padding: 50px 20px 0;
		width: 100%;
		flex-wrap: wrap;
	}
	
	.order-area .order-block .txt-wrap .catch {
		font-size: 6.8cqw;
	}
	
	.order-area .txt-wrap {
		width: 100%;
	}
	
	.order-area .order-block .img-wrap {
		width: 100%;
		height: 60vw;
		margin: 20px 0;
	}
	
	.order-area .flow-box {
		margin: 40px 0 0;
	}
	
	#squid .order-area .flow-box:nth-child(2) {
		margin-top: 20px;
	}
	
	.order-area .flow-box .img-wrap {
		width: 100%;
		height: 50vw;
	}
	
	.order-area .flow-box > .txt-wrap {
		width: 100%;
		padding: 40px 20px 0;
	}
	
	.order-area .flow-box .flow-ttl {
		font-size: 8cqw;
		margin: 0 0 20px;
		padding: 0 0 0 30px;
	}
	
	.order-area .flow-box .flow-ttl::before {
		/*top: -60px;
		left: -10px;
		width: 60px;*/
		left: -5px;
	}
	
	.order-area .flow-box:nth-child(2) .flow-ttl::before {
		width: 70px;
	}
	
	.order-area .flow-box:nth-child(3) .flow-ttl::before {
		width: 70px;
		left: -10px;
	}
	
	#squid .order-area .flow-box:nth-child(2) .img-wrap {
		top: initial;
		right: initial;
		position: relative;
		margin: 20px auto 0;
		width: 90vw;
		min-width: initial;
	}
	
	.order-area .flow-box:nth-child(3) .img-wrap {
		top: -50px;
		right: -15vw;
		width: 80vw;
		height: initial;
		min-width: initial;
	}
	
	.order-area .flow-box:nth-child(3) .txt-wrap {
		padding-top: 60px;
	}
	
	.order-area .flow-box:nth-child(3) .txt-wrap .flow-ttl {
		margin: 0 0 20vw;
	}
	
	.order-area .feature-block {
		padding: 40px 0;
		margin: 50px 0 0;
	}
	
	.order-area .feature-block .feature-ttl {
		font-size: 3.0rem;
		top: -20px;
	}
	
	.order-area .feature-block .feature-ttl .min {
		font-size: 2.4rem;
	}
	
	.order-area .feature-block .feature-box-wrap {
		gap: 30px;
		width: 100%;
		padding: 0 20px;
		flex-wrap: wrap;
	}
	
	.order-area .feature-box {
		width: 100%;
		position: relative;
	}
	
	.order-area .feature-box .img-wrap {
		width: 30vw;
		height: 30vw;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.order-area .feature-box .feature-name {
		font-size: 3.6rem;
		margin: 0 0 40px;
		padding-left: 40vw;
	}
	
	.order-area .feature-box .feature-name::before {
		width: 70px;
		z-index: -1;
		top: -10px;
		left: 35vw;
	}
	
	.order-area .feature-box .feature-txt-wrap {
		margin: 30px 0 0;
	}
	
	.order-area .how-to-box-wrap {
		flex-wrap: wrap;
		width: 100%;
		gap: 50px;
		margin: 50px 0 0;
		padding: 0 20px;
	}
	
	.order-area .how-to-box {
		width: 100%;
	}
	
	.order-area .how-to-box:nth-child(even) .img-wrap {
		margin: 0 0 0 auto;
	}
	
	.order-area .how-to-box .img-wrap {
		height: 50vw!important;
		width: 50vw;
		margin: 0;
	}
	
	.order-area .how-to-box .img-wrap .how {
		top: -20px;
		right: -10px;
		/*font-size: min(15cqw,8.0rem);*/
		font-size: min(25cqw,8.0rem);
	}
	
	.order-area .how-to-box .txt-wrap {
		width: 80%;
		margin: -20px 0 0 40px;
	}
	
	#squid .order-area .how-to-box .txt-wrap {
		width: 90%;
		margin: -10px 0 0 40px;
	}
	
	.order-area .how-to-box-wrap .kome {
		margin-top: -20px;
	}
	
	/*catch調整*/
	#crab .order-area .sashi .catch .ama {
		padding-bottom: 10px;
		margin-left: -5px;
	}
	
	#crab .order-area .sashi .catch .mi {
		margin-left: -5px;
	}
	
	#crab .order-area .sashi .catch .ri {
		margin-left: -10px;
	}
	
	#crab .order-area .sashi .catch .pu02 {
		margin-left: -10px;
	}
	
	#crab .order-area .sashi .catch .ri02 {
		margin-left: -10px;
	}
	
	.order-area .reccomend-box {
		padding: 40px 0;
		margin: 50px 0 0;
	}
	
	.order-area .reccomend-box .reccomend-ttl {
		font-size: 2.6rem;
		top: -20px;
	}
	
	.order-area .reccomend-box .reccomend-ttl img {
		width: 40vw;
		margin: 0 10px;
	}
	
	.order-area .reccomend-box .reccomend-list {
		max-width: 100%;
		min-width: initial;
		flex-wrap: wrap;
		padding: 20px 20px 0;
		gap: 40px;
	}
	
	.order-area .reccomend-box .reccomend-list li {
		width: 100%;
	}
	
	.order-area .reccomend-box .reccomend-list .img-wrap {
		height: initial;
	}
	
	.order-area .reccomend-box .reccomend-list .img-wrap img {
		max-height: 200px;
	}
	
	.order-area .reccomend-box .reccomend-list .list-name {
		font-size: 3.6rem;
	}

}

/* -----------------------------
	.souvenior-area
-------------------------------- */
.souvenior-area  {
	position: relative;
	padding: 200px 0 1000px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.souvenior-area .marquee-wrap {
	position: absolute;
    top: 100px;
    left: 0;
	z-index: 0;
}

.souvenior-area .marquee {
    font-size: 16.0rem;
    /*overflow: hidden;*/
    white-space: nowrap;
    font-family: var(--en);
    animation: marquee 240s linear infinite;
    letter-spacing: 1.5rem;
    color: #EAEFF1;
    display: inline-block;
	line-height: 1;
}

.souvenior-area .img-wrap img {
	height: 100%;
	width: 100%;
}

.souvenior-area .img01 {
	width: 40%;
	aspect-ratio: 1/1;
}

.souvenior-area .img02 {
	width: 40%;
	margin-right: 5%;
	aspect-ratio: 600 / 450;
}

.souvenior-area .img03 {
	width: 18%;
	position: absolute;
	bottom: 30%;
	right: 30%;
	min-width: 300px;
}

.souvenior-area .img04 {
	width: 28%;
	position: absolute;
	bottom: 400px;
	min-width: 480px;
	aspect-ratio: 48 / 50;
	left: 0;
}

.souvenior-area .img05 {
	width: 45%;
	position: absolute;
	bottom: 200px;
	right: 10%;
	min-width: 600px;
	aspect-ratio: 8 / 5;
}

.souvenior-area .txt-wrap {
	position: relative;
}

.souvenior-area .txt01 {
	width: 60%;
	padding-left: 5%;
	padding-right: calc( ( 100% - 1200px ) / 2 );
}

.souvenior-area .txt01::before {
	content: "";
	display: inline-block;
	position: absolute;
	background: url("../img/brush-deco07.png") center/cover, no-repeat;
	width: 590px;
	height: initial;
	aspect-ratio: 698 / 254;
	bottom: -80px;
	right: -3%;
}

.souvenior-area .txt02 {
	width: 55%;
	padding-right: 5%;
	padding-left: calc( ( 100% - 1200px ) / 2 );
}

.souvenior-area .catch {
	font-size: 3.6rem;
	letter-spacing: .1rem;
}

@keyframes marquee {
  0% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -moz-transform: translateX(-75%);
    -webkit-transform: translateX(-75%);
    transform: translateX(-75%);
  }
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
	.souvenior-area .img03 {
		width: 15%;
		bottom: 35%;
		right: 20%;
	}

}

@media screen and (max-width: 768px){
	.souvenior-area {
		padding: 0 0 550px;
	}
	
	.souvenior-area .img01 {
		width: 100%;
		height: 60vw;
	}
	
	.souvenior-area .img02 {
		width: 100%;
		height: 50vw;
		margin: 20px 0 20px;
	}
	
	.souvenior-area .img03 {
		width: 50vw;
		margin: 20px auto 0;
		position: relative;
		bottom: initial;
		right: initial;
		min-width: initial;
	}
	
	.souvenior-area .img04 {
		width: 40vw;
		bottom: 360px;
		min-width: initial;
		left: 5%;
	}
	
	.souvenior-area .img05 {
		width: 80vw;
		bottom: 150px;
		right: 3%;
		min-width: initial;
	}
	
	.souvenior-area .txt01 {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 40px;
	}
	
	.souvenior-area .txt02 {
		width: 100%;
		padding-right: 20px;
		padding-left: 20px;
		padding-top: 0;
	}
	
	.souvenior-area .marquee-wrap {
		top: 46vw;
	}
	
	.souvenior-area .marquee {
		font-size: 8.0rem;
		letter-spacing: 0.8rem;
	}
	
	.souvenior-area .catch {
		font-size: 2.8rem;
	}
	
	.souvenior-area .txt01::before {
		width: 80vw;
		bottom: initial;
		top: 10vw;
		right: -10vw;
	}
	
	.souvenior-area::before {
		content: "";
		display: inline-block;
		position: absolute;
		background: url("../img/brush-deco07.png") center/cover, no-repeat;
		width: 80vw;
		height: initial;
		aspect-ratio: 698 / 254;
		bottom: 130vw;
		right: -15vw;
	}
}


/* -----------------------------
	summary
-------------------------------- */
.cmn-summary-access-bg .shop-bg {
	background: url("../img/shop-img-l.jpg") center/cover, no-repeat;
	width: 100%;
	height: 450px;
	position: relative;
}

@media screen and (max-width: 768px){
	
	.cmn-summary-access-bg .shop-bg {
		height: 60vw;
	}
	
}



/* -----------------------------
	〇〇〇
-------------------------------- */

@media screen and (max-width: 768px){
	
}