:root {
	--main-color: #2F2A25;
	--pale-color: #F4EFE9;
	--pale-color-rgb: 244, 239, 233;
	--point-color: #B84C46;
	--sub-color: #8B6E4E;
	--sub-color-rgb: 139, 110, 78;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 50px;
}
body {
	font-family: 'Noto Sans JP';
	position: relative;
	line-height: 1.7;
	font-size: 15px;
}
a, a:hover {
	transition: 1s;
}
@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	src: local("Noto Sans CJK JP Regular"),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
.jost {
	font-family: "Jost", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
.zen-maru-gothic-bold {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.poppins-regular-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: italic;
}
.poppins-medium-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: italic;
}
.poppins-bold-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-style: italic;
}
@media (max-width: 767px) {
	.sp_off {
		display: none !important;
	}
}
@media (min-width: 768px) {
	.pc_off {
		display: none !important;
	}
}
/* ----------------------------------------
common
---------------------------------------- */
/* header
---------------------------------------- */
header {
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.7);
}
.h__logo {
	a {
		display: block;
		padding: 5px 10px;
		&:hover {
			opacity: 0.8;
		}
	}
}
.h__btn {
	display: flex;
	align-items: center;
	height: 50px;
}
.h__btn__reserve, .h__btn__menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 50px;
	border-left: 1px solid var(--main-color);
	svg {
		width: 24px;
		height: 24px;
	}
	span {
		font-size: 11px;
		color: var(--main-color);
	}
}
.h__btn__reserve {
	svg {
		fill: var(--point-color);
	}
}
.h__btn__menu {
	svg {
		fill: var(--main-color);
	}
}
/* overlay
---------------------------------------- */
#menu-toggle {
	display: none;
}
.overlay {
	position: fixed;
	inset: 0;
	background: var(--main-color);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}
.overlay__logo {
	height: 60px;
	display: flex;
	align-items: center;
	a {
		display: block;
		padding: 5px 10px;
	}
}
.overlay__contents {
	padding: 10vw;
}
.overlay__li {
	li {
		a {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 0;
			color: #fff;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
			span {
				font-weight: bold;
				font-size: 14px;
			}
			svg {
				fill: #fff;
			}
			&:hover span {
				color: var(--sub-color);
			}
			&:hover svg {
				fill: var(--sub-color);
			}
		}
	}
}
.overlay__sns {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 0;
	li {
		padding: 0 10px;
		a:hover {
			opacity: 0.8;
		}
	}
}
.overlay__cta {
	.cta__txt {
		text-align: center;
		color: #fff;
	}
}
#menu-toggle:checked~.overlay {
	opacity: 1;
	visibility: visible;
}
.close-btn {
	position: absolute;
	top: 0;
	right: 15px;
	font-size: 2rem;
	color: #fff;
	cursor: pointer;
	user-select: none;
}
#menu-toggle:checked~.overlay {
	opacity: 1;
	visibility: visible;
}
/* footer
---------------------------------------- */
footer {
	background: var(--main-color);
	padding: 30px 3%;
}
.f__logo {
	width: 100%;
	margin-bottom: 20px;
}
.f__info__li {
	margin-bottom: 20px;
	li {
		display: flex;
		align-items: center;
		color: #fff;
		margin-bottom: 5px;
		span {
			width: 65px;
			border-left: 1px solid #fff;
			border-right: 1px solid #fff;
			margin-right: 15px;
			font-size: 10px;
			text-align: center;
		}
		p {
			font-size: 12px;
		}
	}
}
.f__conts__li {
	li {
		a {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 0;
			color: #fff;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
			span {
				font-weight: bold;
				font-size: 14px;
			}
			svg {
				fill: #fff;
			}
			&:hover span {
				color: var(--sub-color);
			}
			&:hover svg {
				fill: var(--sub-color);
			}
		}
	}
}
.f__sns {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 0;
	li {
		padding: 0 10px;
		a:hover {
			opacity: 0.8;
		}
	}
}
.f__copy {
	width: 100%;
	font-size: 10px;
	border-top: 1px solid #fff;
	padding-top: 5px;
	color: #fff;
	text-align: center;
}
@media (min-width: 1025px) {
	footer {
		padding: 50px;
		display: flex;
		flex-wrap: wrap;
	}
	.f__info__li {
		margin-bottom: 0;
	}
	.f__conts__li {
		display: flex;
		margin-left: auto;
		li {
			margin-right: 15px;
			a {
				border-bottom: none;
			}
		}
	}
}
/* cta
---------------------------------------- */
.cta {
	width: 92%;
	margin: 0 auto 30px;
	background: var(--pale-color);
	border-radius: 20px;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.cta__ttl {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	width: 100%;
	span {
		padding: 0 15px;
		font-size: 18px;
	}
	&:before, &:after {
		content: "";
		width: 40px;
		height: 1px;
		border-bottom: 1px dashed #111;
	}
}
.cta__reserve {
	background: var(--point-color);
	font-size: 18px;
}
.cta__tel {
	background: var(--sub-color);
	font-size: 22px;
	letter-spacing: 2px;
}
.cta__txt {
	font-size: 12px;
}
.cta__wrap {
	background: url('/wp-content/themes/uri-web/images/sample-sunny-coffee/cta_bg.webp') 50% 50%;
	padding: 30px 0 1px;
	background-size: auto 100%;
}
@media (min-width: 1025px) {
	.cta {
		max-width: 1000px;
		margin-bottom: 60px;
		.basic__btn {
			width: 45%;
			margin: 0 1% 15px;
		}
	}
	.cta__ttl {
		margin-bottom: 15px;
		span {
			font-size: 22px;
		}
	}
}
/* other
---------------------------------------- */
.basic__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 50px;
	width: 100%;
	padding: 0 15px;
	margin-bottom: 10px;
	border-radius: 10px;
	svg {
		fill: #fff;
	}
	span {
		color: #fff;
	}
}
/* タブレット pc */
@media (min-width: 768px) {
	header {
		height: 70px;
		padding: 0 20px;
	}
	.h__logo {
		img {
			width: 200px;
		}
	}
	.h__menu {
		display: flex;
		align-items: center;
	}
	.h__menu__li {
		display: flex;
		align-items: center;
		margin-right: 20px;
		li {
			a {
				&:hover {
					color: var(--sub-color);
				}
			}
			&:not(:last-child):after {
				content: "/";
				padding: 0 10px;
			}
		}
	}
	.h__menu__reserve {
		a {
			background: var(--point-color);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 150px;
			height: 40px;
			border-radius: 10px;
		}
		svg {
			fill: #fff;
			margin-right: 10px;
		}
	}
}
/* ----------------------------------------
top
---------------------------------------- */
h2.t__ttl {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20px;
	img {
		width: 110px;
	}
	&>p {
		font-size: 22px;
		padding-bottom: 5px;
	}
	&>span {
		font-size: 11px;
		width: 60px;
		height: 18px;
		border-radius: 9px;
		background: var(--main-color);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
@media (min-width: 1025px) {
	h2.t__ttl {
		margin-bottom: 40px;
		img {
			width: 140px;
		}
		&>p {
			font-size: 26px;
			padding-bottom: 10px;
		}
	}
}
/* t__hero
---------------------------------------- */
.t__hero {
	margin-bottom: 30px;
}
.t__hero__main {
	img {
		object-fit: cover;
		object-position: 50% 80%;
		width: 100%;
		height: 70vh;
	}
}
.t_hero_scroll {
	display: flex;
	justify-content: center;
	margin-top: -50px;
	img {
		height: 70px;
	}
}
@media (min-width: 768px) {
	/* タブレット */
}
@media (min-width: 1025px) {
	.t__hero__main {
		img {
			height: 90vh;
		}
	}
	.t_hero_scroll {
		margin-top: -70px;
		img {
			height: 100px;
		}
	}
}
/* t__detail
---------------------------------------- */
.t__detail {
	margin-bottom: 40px;
}
.t__detail__li {
	background: rgba(var(--pale-color-rgb), 0.9);
	border-radius: 30px 0 0 30px;
	padding: 25px;
	width: 92%;
	margin-left: auto;
	position: relative;
	z-index: 1;
}
.t__detail__box {
	display: flex;
	align-items: center;
	&:not(:last-child) {
		margin-bottom: 10px;
	}
	img {
		width: 96px;
		margin-right: 10px;
	}
}
.t__detail__txt {
	.t__detail__txt__ttl {
		color: var(--sub-color);
		font-size: 18px;
		margin-bottom: 5px;
	}
	p {
		margin-left: 10px;
		font-size: 13px;
	}
}
.t__detail__bg {
	margin-top: -220px;
	width: 92%;
	img {
		border-radius: 0 20px 20px 0;
		width: 100%;
		height: 370px;
		object-fit: cover;
		object-position: 60% 50%;
	}
}
@media (min-width: 1025px) {
	.t__detail {
		max-width: 1200px;
		margin: 0 auto 60px;
	}
	.t__detail__li {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
		border-radius: 30px;
		padding: 25px 50px;
	}
	.t__detail__bg {
		margin-top: -60px;
		img {
			border-radius: 20px;
		}
	}
}
/* t__menu
---------------------------------------- */
.t__menu {
	margin-bottom: 40px;
}
.t__menu__box {
	width: 92%;
	margin: 0 auto 40px;
}
.t__menu__ttl {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 22px;
	background: var(--pale-color);
	height: 50px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	padding: 0 20px;
}
.t__menu__li {
	margin-left: 25px;
	margin-right: 5px;
	li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 13px;
		padding: 10px 0;
		border-bottom: 1px dashed #D9D9D9;
		.price {
			font-family: "Poppins", sans-serif;
			font-weight: 500;
			font-style: italic;
		}
	}
}
.t__menu__seasonal {
	margin-top: -40px;
	img {
		width: 100%;
	}
}
@media (min-width: 1025px) {
	.t__menu {
		margin-bottom: 60px;
	}
	.t__menu__wrap {
		display: flex;
		justify-content: space-between;
		max-width: 1200px;
		margin: 0 auto 100px;
	}
	.t__menu__box {
		width: 48%;
		margin-bottom: 0;
	}
	.t__menu__seasonal {
		background: var(--main-color);
		text-align: center;
		img {
			margin: -60px auto 0;
			width: 800px;
		}
	}
}
/* t__access
---------------------------------------- */
.t__access {
	margin-bottom: 40px;
}
.t__access__map {
	width: 92%;
	margin: 0 auto;
	img {
		width: 100%;
	}
}
.t__access__info {
	background: var(--main-color);
	margin-top: -150px;
	padding: 170px 0 30px;
}
.t__access__info__li {
	width: 92%;
	margin: 0 auto 20px;
	li {
		display: flex;
		align-items: center;
		color: #fff;
		margin-bottom: 5px;
		span {
			width: 65px;
			border-left: 1px solid #fff;
			border-right: 1px solid #fff;
			margin-right: 15px;
			font-size: 10px;
			text-align: center;
		}
		p {
			font-size: 12px;
		}
	}
}
.t__access__btn {
	width: 92%;
	margin: 0 auto;
	background: var(--sub-color);
}
@media (min-width: 1025px) {
	.t__flexwrap {
		max-width: 1200px;
		margin: 0 auto 60px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	.t__access {
		width: 48%;
	}
	.t__access__map {
		width: 88%;
	}
	.t__access__info {
		border-radius: 20px;
	}
	.t__access__info__li {
		width: 88%;
		li {
			span {
				width: 80px;
				font-size: 12px;
			}
			p {
				font-size: 15px;
			}
		}
	}
	.t__access__btn {
		width: 88%;
	}
}
/* t__sns
---------------------------------------- */
.t__sns {
	width: 92%;
	margin: 0 auto 40px;
	img {
		width: 100%;
	}
}
@media (min-width: 1025px) {
	.t__sns {
		width: 48%;
	}
}
/* t__faq
---------------------------------------- */
.t__faq {
	width: 92%;
	margin: 0 auto 30px;
}
.t__faq__box {
	background: var(--pale-color);
	border-radius: 20px;
	padding: 15px;
	margin-bottom: 15px;
	input {
		display: none;
	}
}
.t__faq__q, .t__faq__a {
	display: flex;
	align-items: flex-start;
	font-size: 15px;
	img {
		width: 25px;
		margin-right: 10px;
	}
}
.t__faq__q {
	svg {
		transform: rotate(90deg);
		transition: transform 0.3s ease;
		margin-left: auto;
	}
}
.t__faq__a {
	visibility: hidden;
	opacity: 0;
	height: 0;
	transition: .3s;
}
.t__faq__box input:checked~.t__faq__q {
	svg {
		transform: rotate(270deg);
		transition: transform 0.3s ease;
	}
}
.t__faq__box input:checked~.t__faq__a {
	visibility: visible;
	opacity: 1;
	height: auto;
	transition: .3s;
	padding-top: 15px;
	padding-left: 15px;
}
@media (min-width: 1025px) {
	.t__faq {
		max-width: 1000px;
		margin: 0 auto 60px;
	}
}