@charset "UTF-8";

/* ---------- sp-br class for desktop (visible) ---------- */
.sp-br {
	display: inline;
}

/* ---------- top ---------------------------------------- */
.mv {
	position: relative;
	width: 100%;
	height: 100vh;
}

.mv .photo {
	width: 100%;
	height: 100vh;
	background-image: url(../images/mv.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.scroll-line {
	position: absolute;
	right: 45px;
	bottom: 60px;
	width: 1px;
	height: 90px;
	background-color: rgba(255, 255, 255, 50%);
	transition: all 1.4s;
}

.scroll-line::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 1px;
	background-color: #fff;
	-webkit-animation: lineMove 3.4s ease-in-out infinite;
	animation: lineMove 3.4s ease-in-out infinite;
	z-index: 10;
}

@keyframes lineMove {
	0% {
		bottom: 100%;
		height: 0;
	}

	20% {
		bottom: 0;
		height: 100%;
	}

	40% {
		bottom: 0;
		height: 0;
	}

	100% {
		bottom: 0;
		height: 0;
	}
}

#concept {
	position: relative;
	width: 100%;
	margin: 135px auto 0px;
}

#concept .copy {
	text-align: center;
	margin-top: 81px;
	font-size: 24px;
	letter-spacing: 0.05em;
}

#concept .text {
	margin-top: 42px;
	font-size: 15px;
	line-height: 200%;
}

#concept .name {
	text-align: right;
	margin-top: 42px;
	font-size: 16px;
}

.section-separate {
	position: relative;
	text-align: center;
	margin-top: 10%;
	margin-bottom: 10%;
}

.section-separate-bottom-up {
	position: relative;
	text-align: center;
	margin-top: 10%;
	margin-bottom: -12%;
}

.section-separate .photo {
	width: 100%;
}

.section-separate-bottom-up .photo {
	width: 100%;
}

#menu {
	position: relative;
}

#menu .inner {
	text-align: center;
}

#menu .course {
	display: flex;
	justify-content: space-between;
	margin-top: 90px;
}

#menu .course .title {
	padding: 12px 45px 33px;
	border-bottom: solid 1px #212121;
	border-left: solid 1px #212121;
	font-size: 27px;
	line-height: 150%;
}

#menu .course h3.title {
	position: relative;
	display: inline-block; /* 必要に応じて */
}

#menu .course h3.title .badge {
	position: absolute;
	top: -15px;   /* 必要に応じて調整 */
	right: -20px; /* 必要に応じて調整 */
	width: 60px;  /* バッジの大きさに合わせて調整 */
	height: auto;
	z-index: 1;
}

#menu .course .title .price {
	display: block;
	font-size: 24px;
}

#menu .course .title .price small {
	margin-left: 3px;
	font-size: 15px;
}

#menu .course .caution {
	width: 672px;
	margin-top: 36px;
	text-align: left;
	font-size: 16px;
}

#menu .course .caution .emphasis {
	color: #f00;
	font-size: 15px;
}

#sushi-kappo {
	width: 100%;
}

#menu .course-menu {
	display: flex;
	justify-content: center;
	margin-top: 102px;
}

#menu .course-menu .photos {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 600px;
}

#menu .course-menu .photo:first-child {
	width: 100%;
}

#menu .course-menu .photo {
	width: 297px;
	margin-top: 6px;
}

#menu .course-menu .info {
	width: 325px;
	text-align: left;
}

#menu .course-menu .info .title {
	font-size: 36px;
}

#menu .course-menu .info .description {
	margin-top: 12px;
	font-size: 17px;
	line-height: 160%;
}

#menu .course-menu .info .text {
	margin-top: 45px;
	font-size: 15px;
	line-height: 225%;
}

#menu .course-menu.last {
	flex-direction: row-reverse;
	margin-top: 105px;
}

#menu .other {
	margin-top: 42px;
}

#menu .other .title {
	font-size: 18px;
	line-height: 200%;
}

#menu .other .text {
	font-size: 14px;
	margin-top: 15px;
	line-height: 200%;
}

#menu .drink {
	margin-top: 42px;
}

#menu .drink .title {
	font-size: 18px;
	line-height: 200%;
}

#menu .drink .desktop-text {
	font-size: 14px;
	margin-top: 15px;
	line-height: 200%;
	display: block;
}

#menu .drink .mobile-text {
	font-size: 14px;
	margin-top: 15px;
	line-height: 200%;
	display: none;
}

#seat {
	position: relative;
}

#seat .section-title {
	position: absolute;
	top: 0;
	right: 0;
}

#seat .seat-counter,
#seat .seat-room {
	position: relative;
	width: 660px;
}

#seat .seat-counter,
#seat .seat-room {
	margin: 90px 0 0 170px;
}

#seat .seat-counter .text,
#seat .seat-room .text {
	position: absolute;
	bottom: 33px;
	left: 36px;
	color: #fff;
	font-size: 17px;
	line-height: 150%;
}

#seat .seat-counter .text span,
#seat .seat-room .text span {
	display: block;
	font-size: 14px;
}

#owner {
	position: relative;
}

#owner .section-title {
	position: absolute;
	top: 0;
	left: 0;
}

#owner .profile {
	position: relative;
	margin-left: 170px;
	padding-top: 30px;
}

#owner .profile .photo {
	width: 270px;
}

#owner .profile .info {
	position: absolute;
	width: 485px;
	right: 0;
	bottom: 0;
}

#owner .profile .info .name {
	font-size: 21px;
	margin-bottom: 24px;
}

#owner .profile .info .text {
	font-size: 15px;
	line-height: 200%;
}

#owner .awards {
	display: flex;
	justify-content: center;
	width: 600px;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
}
#owner .awards .desktop-awards {
	display: block;
}

#owner .awards .mobile-awards {
	display: none;
}

#reserve {
	position: relative;
}

#reserve .calendar {
	width: 80%;
	position: relative;
}

#reserve .section-title {
	position: absolute;
	top: 0;
	right: 0;
}

#reserve .text {
	font-size: 15px;
	line-height: 200%;
}

#reserve .inner .text {
	font-size: 15px;
	line-height: 200%;
}

#reserve .inner .text .desktop-text {
	display: block;
}

#reserve .inner .text .mobile-text {
	display: none;
}

#reserve .tel {
	font-size: 25px;
	letter-spacing: 0.06em;
}

#reserve .tel .phone-link {
    color: blue; /* 希望の色に変更 */
    text-decoration: none;
}

#reserve .tel .phone-link:hover {
    text-decoration: underline; /* ホバー時に下線を付ける */
}

#reserve .inbound {
	border: 3px solid rgba(0, 0, 170, 0.1);
	padding: 20px;
	border-radius: 5px;
	display: inline-block;
	margin-top: 20px;
}

#reserve .inbound .title {
	margin-top: 5px;
	margin-bottom: 10px;
	font-size: 17px;
	line-height: 200%;
	font-weight: bold;
}

#reserve .inbound .text {
	font-size: 14px;
}

#reserve .inbound ul {
	margin-left: 24px;
	font-size: 14px;
}

#reserve .inbound ul li {
	line-height: 200%;
	list-style-type: disc;
}

#reserve .inbound .jpneazy-link {
	margin-top: 5px;
    margin-left: 5px; /* 左側の空白を追加 */
    color: blue; /* 希望の文字色に変更 */
    text-decoration: none; /* 通常時は下線を消す */
}

#reserve .inbound .jpneazy-link:hover {
    text-decoration: underline; /* ホバー時に下線を付ける */
}

#reserve .schedule {
	padding: 20px;
	border-radius: 5px;
	display: inline-block;
	margin-top: 20px;
}

#reserve .schedule .title {
	margin-top: 28px;
	margin-bottom: 10px;
}

#reserve .schedule .text {
	font-size: 14px;
}

#reserve .schedule ul {
	margin-left: 24px;
	font-size: 14px;
}

#reserve .schedule ul li {
	line-height: 200%;
	list-style-type: disc;
}

#reserve .cancelpolicy {
	margin-top: 42px;
}

#reserve .cancelpolicy .title {
	font-size: 17px;
	line-height: 200%;
	font-weight: bold;
}

#reserve .cancelpolicy ul li {
	list-style-type: disc;
}

#reserve .cancelpolicy p {
	font-size: 14px;
	margin-top: 15px;
	line-height: 200%;
}

#access {
	position: relative;
}

#access .section-title {
	position: relative;
	top: 0;
	left: 0;
}

#access .map {
	width: 495px;
	margin-left: 170px;
}

#access .map .google-map {
	width: 600px;
	height: 450px;
	border: none;
}

#access .map .parking-map {
	width: 600px;
}

#access .info {
	text-align: center;
	margin-top: 30px;
	margin-left: 170px;
	width: 600px;
	right: 0;
	bottom: 0;
}

#access .info .address {
	font-size: 15px;
	margin-bottom: 18px;
}

#access .info .link a {
	font-size: 14px;
	border-bottom: solid 1px #212121;
	transition: 0.3s;
}

#access .info .link a:hover {
	opacity: 0.5;
}

#sister-stores {
	position: relative;
}

#sister-stores .inner {
	text-align: center;
}

#sister-stores .store {
	margin-top: 90px;
	text-align: left;
	align-items: center;

	display: block;
	justify-content: center;
	width: 100%;
}

#sister-stores .store .photo {
	width: 297px;
	margin-top: 6px;
	margin-right: 100px;

	display: flex;
	justify-content: center;
	align-items: center;
}

#sister-stores .store .photo img {
	width: 100%;
}

#sister-stores .store .details {
	width: 100%;
	padding: 12px 45px 20px;
	border-bottom: solid 1px #212121;
	border-left: solid 1px #212121;
	justify-content: start;

	margin-top: 20px;
}

#sister-stores .store .details .title {
	font-size: 27px;
	line-height: 150%;
}

#sister-stores .store .details .title small {
	margin-left: 3px;
	font-size: 15px;
}

#sister-stores .store .details .link {
	display: flex;
	align-items: end;
	gap: 10px;
	width: 100%;
	margin-top: 13px;
}

#sister-stores .store .details .link .image {
	width: 64px;
	display: inline-block;
}

#sister-stores .store .details .link .image a {
	position: relative;
}

#sister-stores .store .details .link .remarks {
	width: calc(100% - 120px);
	display: inline-block;
	margin-left: -10px;
}

#sister-stores .store .details .link .remarks a p {
	margin: 0;
	font-size: 14px;
	color: #810000;
}

#sister-stores .store .details .link .remarks a p:hover {
	color: #ff0000;
}

#sister-stores .store .details .link .remarks a p:active {
	color: #0000ff;
}

#last-photo {
	position: relative;
	/*padding: 500px 0 100px;*/
	text-align: center;
}

#last-photo .photo {
	width: 100%;
}

#last-photo .copy {
	text-align: center;
	margin-top: 81px;
	font-size: 24px;
	letter-spacing: 0.05em;
}

@media (max-width: 768px) {

	/* ---------- sp-br class for mobile line breaks ---------- */
	.sp-br {
		display: block;
	}

	/* ---------- top ---------------------------------------- */
	.mv {
		position: relative;
		height: 0;
		padding-bottom: 50%;
	}

	.mv .photo {
		width: 100%;
		background-image: url(../images/mv.jpg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: top, center;
	}

	.scroll-line {
		position: absolute;
		right: 7.2vw;
		bottom: 8vw;
		width: 0.267vw;
		height: 20vw;
	}

	#concept {
		width: 81.867vw;
		margin: 25vw auto 0;
	}

	#concept .copy {
		margin-top: 0;
		font-size: 3.733vw;
		line-height: 170%;
	}

	#concept .text {
		margin-top: 6.667vw;
		font-size: 3.733vw;
	}

	#concept .name {
		margin-top: 5.333vw;
		font-size: 4vw;
	}

	#menu .course {
		display: block;
		margin-top: 9.6vw;
	}

	#menu .course .title {
		width: 56vw;
		box-sizing: border-box;
		margin: 0 auto;
		padding: 2.4vw 5.6vw 5.6vw;
		font-size: 5.6vw;
		line-height: 140%;
	}

	#menu .course .title .price {
		font-size: 4.8vw;
	}

	#menu .course .title .price small {
		font-size: 3.2vw;
	}

	#menu .course .caution {
		width: 80vw;
		margin-top: 0;
		padding: 5.6vw 5vw 0 5vw;
		font-size: 3.7vw;
	}

	#menu .course-menu {
		display: block;
		margin-top: 12vw;
	}

	#menu .course-menu .photos {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}

	#menu .course-menu .photo {
		width: calc(50% - 0.533vw);
		margin-top: 1.067vw;
	}

	#menu .course-menu .info {
		width: 100%;
	}

	#menu .course-menu .info .title {
		margin-top: 9.6vw;
		font-size: 6.4vw;
	}

	#menu .course-menu .info .description {
		margin-top: 1.333vw;
		font-size: 4vw;
	}

	#menu .course-menu .info .text {
		margin-top: 5.333vw;
		font-size: 3.733vw;
		line-height: 210%;
	}

	#menu .course-menu.last {
		margin-top: 12vw;
	}

	#menu .other {
		margin-top: 5.6vw;
	}

	#menu .other .title {
		font-size: 5.0vw;
		line-height: 180%;
	}

	#menu .other .text {
		font-size: 3.467vw;
		margin-top: 4vw;
		line-height: 180%;
	}

	#menu .drink {
		margin-top: 5.6vw;
	}

	#menu .drink .title {
		font-size: 5.0vw;
		line-height: 180%;
	}

	#menu .drink .desktop-text {
		font-size: 3.467vw;
		margin-top: 4vw;
		line-height: 180%;
		display: none;
	}

	#menu .drink .mobile-text {
		font-size: 3.467vw;
		margin-top: 4vw;
		line-height: 180%;
		display: block;
	}

	#seat {
		text-align: center;
	}

	#seat .section-title {
		position: relative;
		margin: 0 auto;
	}

	#seat .copy {
		position: relative;
		top: 0;
		left: 0;
		margin-top: 8vw;
		writing-mode: horizontal-tb;
		text-align: center;
		font-size: 4vw;
		line-height: 180%;
	}

	#seat .seat-counter,
	#seat .seat-room {
		width: 100%;
	}

	#seat .seat-counter .photo {
		padding-top: 8vw;
	}

	#seat .seat-counter,
	#seat .seat-room {
		margin: 9.6vw 0 0 0;
	}

	#seat .seat-counter .text,
	#seat .seat-room .text {
		bottom: 4.8vw;
		left: 5.6vw;
		text-align: left;
		font-size: 4vw;
		line-height: 140%;
	}

	#seat .seat-counter .text span,
	#seat .seat-room .text span {
		font-size: 3.467vw;
	}

	#owner {
		text-align: left;
	}

	#owner .section-title {
		position: absolute;
	}

	#owner .profile {
		margin-left: 24vw;
		padding-top: 5.333vw;
	}

	#owner .profile .photo {
		width: 60vw;
	}

	#owner .profile .info {
		position: relative;
		width: 60vw;
		right: 0;
		bottom: 0;
	}

	#owner .profile .info .name {
		font-size: 4.533vw;
		margin: 7.2vw 0 3.2vw;
	}

	#owner .profile .info .text {
		font-size: 3.2vw;
		line-height: 180%;
	}

	#owner .awards {
		width: 100%;
		margin-top: 5vw;
	}

	#owner .awards .desktop-awards {
		display: none;
	}

	#owner .awards .mobile-awards {
		display: block;
	}

	#reserve {
		margin-top: -20vw;
	}

	#reserve .section-title {
		position: relative;
		float: right;
	}

	#reserve .calendar {
		padding-top: 4vw;
		width: 100%;
		/*z-index: 10;*/
	}

	#reserve .inner .text {
		/*width: 61.333vw;*/
		padding-top: 4vw;
		font-size: 3.733vw;
		line-height: 180%;
	}

	#reserve .inner .text .desktop-text {
		display: none;
	}

	#reserve .inner .text .mobile-text {
		display: block;
	}

	#reserve .tel {
		font-size: 5.867vw;
	}

	#reserve .inbound {
		border: 3px solid rgba(0, 0, 170, 0.1);
		padding: 4vw;
		border-radius: 5px;
		display: block;
		margin-top: 4vw;
		width: calc(100% - 8vw);
		box-sizing: border-box;
	}

	#reserve .inbound .title {
		margin-top: 1vw;
		margin-bottom: 2vw;
		font-size: 4vw;
		line-height: 150%;
		font-weight: bold;
	}

	#reserve .inbound .text {
		font-size: 3.2vw;
		line-height: 160%;
		margin-top: 2vw;
	}

	#reserve .inbound .jpneazy-link {
		margin-top: 1vw;
		margin-left: 1vw;
		color: blue;
		text-decoration: none;
	}

	#reserve .inbound .jpneazy-link:hover {
		text-decoration: underline;
	}

	#reserve .schedule {
		padding: 20px;
		border-radius: 5px;
		display: inline-block;
		margin-top: 20px;
	}

	#reserve .schedule .title {
		margin-top: 5vw;
		margin-bottom: 1vw;
	}

	#reserve .schedule .text {
		font-size: 2.5vw;
		line-height: 100%;
		margin-top: 0px;
		margin-bottom: 0px;
	}

	#reserve .schedule ul {
		margin-top: 2vw;
		margin-left: 24px;
		font-size: 3.733vw;
	}
	
	#reserve .schedule ul li {
		line-height: 180%;
		list-style-type: disc;
	}
	#reserve .cancelpolicy {
		margin-top: 5.6vw;
	}

	#reserve .cancelpolicy .title {
		font-size: 3.733vw;
		line-height: 180%;
		list-style-type: circle;
	}

	#reserve .cancelpolicy ul li {
		list-style-type: disc;
	}

	#access {
		text-align: center;
	}

	#access .section-title {
		position: relative;
	}

	#access .map {
		width: 100%;
		margin-top: 9.6vw;
		margin-left: 0;
	}

	#access .map .google-map {
		width: 100%;
		border: none;
	}

	#access .map .parking-map {
		width: 100%;
		margin-top: 9.6vw;
	}

	#access .info {
		position: relative;
		width: 100%;
		margin-top: 0;
		margin-left: 0;
		padding-top: 0;
	}

	#access .info .address {
		font-size: 3.733vw;
		margin-top: 0;
		margin-left: 0;
		margin-bottom: 3.2vw;
		padding-top: 0;
	}

	#sister-stores .store {
		display: block;
		justify-content: center;
		width: 100%;
	}

	#sister-stores .store .photo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 36vw;
		margin: 1.067vw 1.067vw 1.067vw;
	}

	#sister-stores .store .photo img {
		width: 40%;
	}

	#sister-stores .store .details {
		width: calc(100% - 9.6vw);
		margin: 3.2vw 1.067vw 0;
		padding: 2.4vw 4.8vw 2.4vw;
		justify-content: start;
	}

	#sister-stores .store .details .title {
		font-size: 3.7vw;
		line-height: 140%;
	}

	#sister-stores .store .details .title small {
		font-size: 2.4vw;
	}

	#sister-stores .store .details .link .remarks {
		width: calc(100% - 70px);
	}

	#sister-stores .store .details .link .remarks a p {
		font-size: 14px;
	}

	#last-photo {
		position: relative;
		margin: 0 0 9.6vw;
		padding: 0 0 2.4vw;
		text-align: center;
	}

	#last-photo .photo {
		width: 100%;
	}

	#last-photo .copy {
		margin-top: 2.4vw;
		font-size: 3.8vw;
		line-height: 170%;
	}
}