@charset "utf-8";

.page-title-bg .page-title-area .page-title{
	padding: 230px 0 0;
	text-align: left;
	color: #fff;
}
.page-title-area .catch{
	font-size: 2.1rem;
	padding: 20px 0 0;
}

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

@media screen and (max-width: 768px){
	.page-title-bg .page-title-area{
		height: 340px;
	}
	.page-title-bg .page-title-area .page-title{
		padding: 100px 0 0;
	}
	.page-title-bg .page-title-area .jp img{
		width: 170px;
	}
    #shin-hakodate-ichiba .page-title-area .jp img {
        width: 60vw;
        max-width: 300px;
    }
    #sushi-mitsuya .page-title-area .jp img {
        width: 60vw;
        max-width: 300px;
    }
	.page-title-area .catch{
		font-size: 1.8rem;
	}
}

/* -----------------------------
	news-area
-------------------------------- */
.news-area.under{
	padding: 0;
	margin: 80px 0 0;
}
.news-area .news-block{

}

.news-area.under .inner{
	justify-content: space-between;
}
.news-area .news-block a:nth-child(n + 3){
	display: none;
}

.news-area .news-block .news-txt-wrap{
	justify-content: flex-end;
}
.news-area .news-block .news-txt{
	width: 600px;
}
.news-area .news-block .news-cate{
	min-width: 100px;
	text-align: center;
	margin: 0 14px 0 0;
	line-height: 1.5;
}
.news-area.under .news-txt-wrap .news-date{
	line-height: 2;
	margin: 0 14px 0 0;
}
@media screen and (max-width: 768px){
	.news-area.under{
		margin: 40px 0 0;
		background: none;
	}
	.news-area .news-block{

	}
	.news-area.under .ttl-block{
		position: relative;
	}
	.news-area.under .ttl-block .news-more{
		position: absolute;
		top: 5px;
		right: 0;
		margin: 0;
	}
	.news-area.under .inner{
		display: block;
	}
	.news-area .news-block a:nth-child(n + 2){
		display: none;
	}

	.news-area .news-block .news-txt-wrap{
		display: block;
	}
	.news-area .news-block.simple .news-txt{
		width: 100%;
	}
	.news-area .news-block.simple .news-cate{
		display: inline-block;
        padding: 5px;
        line-height: 1.5;
	}
	.news-area.under .news-txt-wrap .news-date{
		display: inline-block;
        width: auto;
        margin-bottom: 5px;
	}
    
    .news-area.under .news-txt-wrap .news-cate-wrap {
        margin-bottom: 5px;
    }
}


/* -----------------------------
	intro-area
-------------------------------- */
.intro-area{
	padding: 120px 0 0;
	position: relative;
}
#shin-hakodate-ichiba .intro-area {
    padding: 120px 0;
}

.intro-area .red{
	color: #FF4520;
}
.intro-area::before{
	content: '';
	position: absolute;
	width: 700px;
	height: 198px;
	top: 50px;
    left: 70px;
	background: url("../img/brush-deco01.png") no-repeat top center / contain;
}
.intro-area::after{
	content: '';
	position: absolute;
	width: 415px;
	height: 104px;
	top: 860px;
    right: 20px;
	background: url("../img/brush-deco02.png") no-repeat top center / contain;
}
.intro-area .inner1400{
	position: relative;
}

.intro-area .catch{
	font-size: 4rem;
	padding: 0 0 0 100px;
    letter-spacing: 0;
    line-height: 1.9;
}

.intro-area .img-wrap{
	position: absolute;
}
.intro-area .img-wrap img {
    width: auto;
    height: auto;
}
.intro-area .img01{
	right: 0;
	top: -70px;
}
.intro-area .img02{
    left: 0px;
    top: 440px;
}
.intro-area .img03{
	margin: 200px 0 0;
	position: initial;
	display: block;
	height: 40vw;
    overflow: hidden;
}
.intro-area .img03 img{
	width: 100%;
}

.intro-area .basic-txt{
	position: relative;
}
.intro-area .basic-txt:nth-child(n + 2){
	margin: 15px 0 0;
}
.intro-area .txt-box{
	padding: 180px 0 0;
	width: 650px;
	margin: 0 50px 0 auto;
}
.intro-area .txt-box.left{
	padding: 0;
	width: 500px;
	margin: 50px auto 0 100px;
}

@media screen and (max-width: 768px){
	.intro-area{
		padding: 30px 0 0;
	}
    
    #shin-hakodate-ichiba .intro-area {
        padding: 30px 0;
    }
    
	.intro-area .red{
	}
	.intro-area::before{
		width: 300px;
	}
	.intro-area::after{       
		width: 250px;
	}
	.intro-area .inner1400{
	}
	.intro-area .inner1400::before{
		width: 300px;
		bottom: auto;
		top: 200px;
	}
	.intro-area .catch{
		font-size: 2.4rem;
		padding: 68vw 0 0;
		position: relative;
        z-index: 1;
	}

	.intro-area .img-wrap{
	}
	.intro-area .img-wrap img {
		width: 100%;
		height: 100%;
        object-fit: cover;
	}
	.intro-area .img01{
		width: 100%;
		height: 60vw;
		top: 0;
		right: 0;
	}
	.intro-area .img02{
		width: calc( 100% - 40px );
        height: 50vw;
        top: 120vw;
        left: initial;
        right: 20px;
	}
    #sushi-mitsuya .intro-area .img02 {
        top: 137vw;
    }
	.intro-area .simpleParallax {
        height: 60vw;
		margin: 20px 0 0;
	}
	
	.intro-area .img03{
		margin: 0 auto;
		height: 50vw;
        width: calc( 100% - 40px );
	}

	.intro-area .txt-box{
		padding: 60vw 0 0;
        width: 100%;
		margin: 0;
	}
    
    .intro-area .txt-box.left {
        padding: 0;
        width: 100%;
        margin: 10px 0 0;
    }
    
	.intro-area .basic-txt:nth-child(n + 2){
		margin: 10px 0 0;
	}
    
}

/* -----------------------------
	dish-area
-------------------------------- */
.dish-area{
	background: url(../img/top-dish-bg.jpg) center / cover no-repeat;
	padding: 90px 0 100px;
	position: relative;
}
.dish-area::after{
	content: '';
	position: absolute;
	width: 492px;
	height: 501px;
	top: -130px;
    right: 490px;
	background: url(../img/bg-deco07.png) center / contain no-repeat;
}

#hokutobo .dish-area::before{
	content: '';
	position: absolute;
	width: 771px;
	height: 660px;
	top: 0;
	right: 0;
	background: url("../img/hokutobo-dish.png") top right / contain no-repeat;
}

#shin-hakodate-ichiba .dish-area::before{
	content: '';
	position: absolute;
	width: 738px;
	height: 660px;
	top: 0;
	right: 0;
	background: url("../img/shin-hakodate-ichiba-dish.png") top right / contain no-repeat;
}

#sushi-mitsuya .dish-area::before{
	content: '';
	position: absolute;
	width: initial;
	height: 100%;
	aspect-ratio: 770 / 660;
	top: 0;
	right: 0;
	background: url("../img/sushi-mitsuya-dish.jpg") top right / contain no-repeat;
}

.dish-area .ttl-block .jp{
	font-family: var(--fude);
	font-size: 8rem;
}
.dish-area .sub-catch{
	padding: 15px 0 0;
	font-family: var(--mincho);
	font-size: 2.4rem;
}
.dish-area .catch{
	font-size: 3.4rem;
	letter-spacing: 0.1rem;
	padding: 15px 0 0;
	line-height: 1.9;
}
.dish-area .btn-more{
	margin: 50px 0 0;
	text-align: left;
}

@media screen and (min-width: 769px) and (max-width: 1600px) {
	.dish-area::before{
		right: 0;
	}
}

@media screen and (max-width: 768px){
	.dish-area{
		padding: 50px 0 50px;
	}
	.dish-area::after {
        width: 60vw;
        height: initial;
        top: -20vw;
        right: -10vw;
        aspect-ratio: 492 / 501;
    }
	.dish-area::before{
		width: 160px;
        height: 160px;
	}
	.dish-area .ttl-block{
		margin: 0 0 20px;
	}

	.dish-area .ttl-block .jp{
		font-size: 4rem;
        text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
	}
	.dish-area .sub-catch{
		padding: 0;
		width: 100%;
        text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
        font-size: 1.8rem;
        font-weight: bold;
	}
	.dish-area .catch{
		font-size: 5.5cqw;
		padding: 0;
        text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
        font-weight: bold;
	}
	.dish-area .btn-more{
		margin: 20px 0 0;
	}
    
    #hokutobo .dish-area::before {
        width: initial;
        height: 100%;
        aspect-ratio: 771 / 660;
        top: 0;
        right: -25vw;
    }
    
    #shin-hakodate-ichiba .dish-area::before {
        width: initial;
        height: 100%;
        top: 0;
        right: -40vw;
        aspect-ratio: 738 / 660;
    }
    
    #sushi-mitsuya .dish-area::before{
        content: '';
        position: absolute;
        width: initial;
        height: 75vw;
        top: 30px;
        right: -28vw;
        background: url("../img/sushi-mitsuya-dish.jpg") top right / contain no-repeat;
    }
}

/* -----------------------------
	inside-area
-------------------------------- */
.inside-area{
	background: var(--brown);
	color: #fff;
	position: relative;
	padding: 200px 0 120px;
}

#hokutobo .inside-area {
	padding: 200px 0 930px;
}

.inside-area .txt-box{
	position: relative;
	padding: 0 0 0 500px;
}
.inside-area .txt-box::before{
	content: '';
	position: absolute;
	width: 415px;
	height: 104px;
	top: -30px;
	right: 0;
	background: url("../img/brush-deco05.png") no-repeat top center / contain;
	mix-blend-mode:screen;
	opacity: .5;
}

.inside-area .ttl-block .jp{
	font-family: var(--fude);
	font-size: 8rem;
}
.inside-area .catch{
	font-size: 3rem;
	line-height: 2;
	letter-spacing: .2rem;
	position: relative;
}
.inside-area .txt-box .basic-txt{
	margin: 15px 0 0;
	position: relative;
}
.inside-area .txt-box .basic-txt.txt01{

	margin: 40px 0 0;
}

.inside-area .img-wrap {
	position: absolute;
}
.inside-area .img-wrap img{
	width: auto;
	height: auto;
}
.inside-area .img01{
	left: 0;
	top: 140px;
}
.inside-area .img02{
	bottom: 325px;
    right: 100px;
}
.inside-area .img03{
	bottom: 180px;
    left: 100px;
}

@media screen and (min-width: 769px) and (max-width: 1600px) {
	.inside-area .img01{
		left: -70px;
	}
	.inside-area .img02{
		right: 0;
	}
	.inside-area .img03{
		left: 0;
	}
}

@media screen and (max-width: 768px){
	.inside-area{
		/*padding: 220px 0 360px;*/
        padding: 50vw 0 40px;
	}
    
    #hokutobo .inside-area {
        padding: 50vw 0 40px;
    }
    
	.seat-block{
	}
	.inside-area .txt-box{
		padding: 30px 20px 0;
	}
	.inside-area .txt-box::before{
		width: 200px;
		height: initial;
		left: 50vw;
		top: 20px;
        aspect-ratio: 415 / 104;
	}
	.inside-area .ttl-block .jp{
		font-size: 4rem;
	}
	.seat-name{
		font-size: 2.3rem;
	}
	.inside-area .catch{
		font-size: 2.4rem;
		margin: 10px 0 0;
	}
	.inside-area .txt-box .basic-txt{
		margin: 20px 0 0;
	}
	.inside-area .txt-box .basic-txt.txt01{
		margin: 20px 0 0;
	}

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

	.inside-area .img01{
		width: 100vw;
        height: 50vw;
		right: 0;
		top: 0;
	}
	.inside-area .img02{
		width: 95%;
        height: 50vw;
		left: initial;
		bottom: initial;
        position: relative;
        margin: 30px 0 0;
        right: initial;
	}
	.inside-area .img03{
		width: 95%;
        height: 40vw;
		right: initial;
		bottom: initial;
        left: initial;
        position: relative;
        margin: 30px 0 0 auto;
	}

}
/* -----------------------------
	.faq-area
-------------------------------- */
.faq-area{
	margin: 80px 0 0;
}
.faq-area .ttl-block{
	text-align: center;
}
.faq-area .ttl-block .en{
	font-size: 7.5rem;
	color: #F3F1EE;
}
.faq-area .ttl-block .jp{
	margin: -25px 0 0;
}
.faq-area .faq-list{
	margin: 35px 0 0;
}

.faq-area .tel-num {
	font-size: 2.2rem;
}

.faq-area .tel {
	font-weight: bold;
}

.faq-area .tel i {
	font-size: 1.8rem;
	margin-right: 5px;
}

@media screen and (max-width: 768px){
	.faq-area{
		margin: 40px 0 0;
	}
	.faq-area .ttl-block{
	}
	.faq-area .ttl-block .en{
        font-size: 5.0rem;
        margin: 0;
	}
	.faq-area .ttl-block .jp{
	}
	.faq-area .faq-list{
        margin: 20px 0 0;
	}
}

/* -----------------------------
	info-area
-------------------------------- */
.info-area{
	padding: 90px 0 200px;
	background: #050607;
	margin: 100px 0 0;
}

.info-area .ttl-block{
	text-align: center;
}
.info-area .ttl-block .en{
	font-size: 7.5rem;
	color: #2D2D2D;
	white-space: nowrap;
}
.info-area .ttl-block .jp{
	margin: -25px 0 0;
	color: #fff;
}

/* テーブル */
.info-area table{
	width: 100%;
	border-collapse: collapse;
	line-height: 1.6;
	font-family: var(--mincho);
	font-weight: 500;
	color: #fff;
}

.info-area table tr{
	border-bottom:1px solid #333;
}

.info-area table th{
	text-align: left;
	vertical-align: top;
	
	padding: 25px 0 25px 30px;
	width: 180px;
}

.info-area table td{
	padding: 30px 25px;
}

.info-area a {
	color: #fff;
}

.info-area .tel {
	font-size: 2.0rem;
}

.info-area .tel i {
	font-size: 1.8rem;
	margin-right: 5px;
}

.info-area .disc-list {
	margin: 0;
}

.info-area .disc-list li::before {
	background: var(--gold);
}

.info-area iframe {
    width: 100%;
    height: 25vw;
    min-height: 400px;
    margin: 60px 0 0;
    filter: saturate(.5);
    transition: all .3s;
}

.info-area iframe:hover {
    filter: none;
}

@media screen and (max-width: 768px){
	.info-area{
		padding: 40px 0 150px;
        margin: 40px 0 0;
	}
    
    .info-area .ttl-block .en {
        font-size: 10.5cqw;
        letter-spacing: .1rem;
        margin: 0;
    }
    
    .info-area .ttl-block .jp {
        margin: -15px 0 0;
    }
	
	.info-area table th{
		padding: 15px 0 8px 0;
		display: block;
		width: auto;
        font-size: 1.8rem;
	}
	
	.info-area table td{
		padding: 15px;
		padding: 0 0 15px;
		display: block;
	}
    
    .info-area iframe {
        height: 60vw;
        min-height: initial;
        margin: 30px 0 0;
    }
}