@media all and (width < 768px) {
/*------------------------------------------
 *	メニュー
------------------------------------------*/
.is-show-menu {
	overflow: hidden;
}

.header-global {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #502411;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility 0.3s ease;
}

.header-global.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.header-content {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 20px 40px;
	z-index: 1;
}

.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.header-inner .logo {
	width: 140px;
}

.header-inner .logo img {
	width: 100%;
	height: auto;
}

.header-inner .close-btn {
	cursor: pointer;
	font-weight: bold;
	color: #FFF;
	font-size: 2rem;
	background: #EB4300;
	width: 100px;
	padding: 8px 0 9px;
	text-align: center;
	border-radius: 4px;
	box-sizing: border-box;
	border: 2px solid #EB4300;
	transition: background-color ease .5s;
	user-select: none;
}

.header-inner .close-btn:hover {
	background: #EB4300;
	color: #FFF;
}

.nav-global-wrapper {
	overflow-y: scroll;
	height: calc(100vh - 200px);
}

.nav-global {
	max-width: 848px;
	margin: 0 auto;
	padding: 0 0 100px;
}

.nav-global-inner {
	overflow-y: scroll;
}

.nav-global ul {
	display: flex;
	flex-wrap: wrap;
	gap: 30px 24px;
	padding: 40px 0 0;
}

.nav-global li {
	max-width: 194px;
	width: 100%;
}

.nav-global a {
	font-weight: bold;
	color: #FFF;
	font-size: 2.4rem;
	display: block;
	padding: 8px 15px 11px;
	border-bottom: 1px solid #9C7373;
	transition: background-color ease .5s;
}

.nav-global a:hover {
	background: transparent;
	color: #FFF;
	border-color: #9C7373;
}

.nav-global span {
	display: block;
	font-size: 1rem;
	color: #9C7373;
	font-weight: bold;
	margin: 0 0 16px;
}

.nav-global a:hover span {
	color: #9C7373;
}

.header-lower .logo-area {
	padding: 10px 20px;
	max-width: inherit;
}

.header-lower .logo img {
	width: 70px;
	height: auto;
}

.header-lower .menu-btn {
	cursor: pointer;
	font-weight: bold;
	color: #FFF;
	font-size: 2rem;
	background: #EB4300;
	width: 100px;
	padding: 8px 0 9px;
	text-align: center;
	border-radius: 4px;
	box-sizing: border-box;
	border: 2px solid #EB4300;
	transition: background-color ease .5s;
	user-select: none;
}

.header-lower .menu-btn:hover {
	background: #EB4300;
	color: #FFF;
}

/*------------------------------------------
 *	フッター
------------------------------------------*/
.footer-inner {
	max-width: inherit;
	padding: 0 20px;
	flex-direction: column;
	gap: 50px 0;
}

.footer-global .footer-info {
	flex-direction: column;
	gap: 24px 0;
}

.footer-global .address a:hover {
	text-decoration: underline;
}

.footer-nav li {
	width: calc(100%/2);
}

.footer-nav a:hover {
	color: #101010;
}

/*------------------------------------------
 *	メインビュー
------------------------------------------*/
.main-view {
	width: 100%;
	position: relative;
	overflow: hidden;
	height: 100vh;
}

.main-view .img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.main-view .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

.main-view-inner {
	max-width: 1360px;
	width: 100%;
	padding: 20px 20px 40px;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
}

.main-view .logo-area {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.main-view .logo img {
	width: 140px;
	height: auto;
}

.main-view .menu-btn {
	cursor: pointer;
	font-weight: bold;
	color: #FFF;
	font-size: 2rem;
	background: #EB4300;
	width: 100px;
	padding: 8px 0 9px;
	text-align: center;
	border-radius: 4px;
	box-sizing: border-box;
	border: 2px solid #EB4300;
	transition: background-color ease .5s;
	user-select: none;
}

.main-view .menu-btn:hover {
	background: #EB4300;
	color: #FFF;
}

.main-view .copy {
	max-width: 694px;
	width: 100%;
	margin: 0 auto;
}

.main-view .start-date {
	font-size: 3.8rem;
	font-weight: bold;
	color: #FFF;
	text-align: center;
}

.main-view .place {
	font-size: 2.8rem;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	margin: 24px 0 0;
	line-height: 1.4;
}

/*------------------------------------------
 *	コンテンツ
------------------------------------------*/
.contents-wrapper {
	max-width: inherit;
	padding: 0 20px;
}

.contents-wrapper h2 {
	font-size: 4.8rem;
}

.info {
	margin: 100px 0;
}

.info .inner {
	display: flex;
	flex-direction: column;
	gap: 60px 0;
	align-items: flex-start;
}

.info .access {
	flex-direction: column;
	align-items: flex-start;
	gap: 40px 0;
	margin: 36px 0 0;
}

.info .access p a:hover {
	text-decoration: underline;
}

.info .btn a:hover {
	background: #EB4300;
	color: #FFF;
}

.info-contents {
	max-width: inherit;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	margin: 80px 0 0;
	gap: 40px 0;
}

.info-contents .img {
	width: 100%;
	text-align: center;
}

.info-contents .txt {
	font-size: 3rem;
}

.concept {
	margin: 0 0 100px;
}

.concept .inner {
	margin: 40px 0 0;
	flex-direction: column;
	gap: 24px 0;
}

.concept .img {
	width: 100%;
	text-align: center;
}

.concept .txt {
	width: 100%;
}

.concept .inner:nth-of-type(2) .img {
	width: 100%;
	order: 1;
}

.concept h3 {
	margin: 24px 0 30px;
}

.concept p {
	line-height: 1.8;
}

.beans {
	margin: 0 0 100px;
}

.beans .copy {
	text-align: center;
	line-height: 1.8;
	margin: 44px 0 0;
}

.beans .kind {
	gap: 24px 20px;
	margin: 40px 0 0;
}

.beans .item {
	width: calc(50% - 12px);
}

.beans .item .img {
	width: 100%;
}

.beans .item .img img {
	width: 100%;
	height: auto;
}

.beans .item .txt {
	width: 100%;
}

.beans .item h3 {
	margin: 10px 0 0;
}

.beans .item a:hover {
	opacity: 1;
}

.beans .btn {
	margin: 40px auto 0;
}

.beans .btn a:hover {
	background: #EB4300;
	color: #FFF;
}

.beans .inner {
	flex-direction: column;
	margin: 60px 0 0;
	gap: 24px 0;
}

.beans .inner .img {
	width: 100%;
}

.beans .inner .txt {
	width: 100%;
}

.beans .inner h3 {
	margin: 0 0 32px;
}

.beans p {
	line-height: 1.8;
}

.roaster {
	margin: 0 0 80px;
}

.roaster .inner {
	margin: 50px 0 0;
	flex-direction: column;
	gap: 24px 0;
}

.roaster .inner .img {
	order: 1;
	width: 100%;
	text-align: center;
}

.roaster .txt {
	width: 100%
}

.roaster h3 {
	margin: 0 0 30px;
}

.roaster p {
	line-height: 1.8;
}

.roaster-desc {
	margin: 60px 0 0;
}

.roaster-desc h3 {
	line-height: 1.6;
}

.roaster-desc .caption {
	margin: 30px auto 0;
	line-height: 1.8;
}

.ordersystem {
	margin: 0 0 100px;
	max-width: inherit;
	padding: 30px 20px;
}

.ordersystem .inner {
	max-width: inherit;
	margin: 60px auto 0;
	flex-direction: column;
	gap: 40px 0;
}

.ordersystem .process {
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px 0;
}

.ordersystem .num {
	font-size: 4.8rem;
}

.ordersystem .ttl {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.4;
}

.ordersystem .txt {
	width: 100%;
}

.ordersystem .txt p {
	line-height: 1.8;
}

.ordersystem .copy {
	text-align: center;
	line-height: 1.8;
	margin: 60px 0 40px;
}

.ordersystem .btn a:hover {
	background: #EB4300;
	color: #FFF;
}

.coffeeguide {
	margin: 0 0 100px;
}

.coffeeguide .copy {
	line-height: 1.6;
	margin: 60px 0 40px;
}

.coffeeguide .inner {
	flex-direction: column;
	gap: 30px 0;
	margin: 40px 0 0;
}

.coffeeguide .inner .img {
	width: 100%;
	order: 1;
}

.coffeeguide .inner .txt {
	width: 100%;
}

.coffeeguide .inner .item {
	width: 100%;
	max-width: inherit;
}

.coffeeguide .item .img {
	text-align: center;
}

.coffeeguide .item .img img {
	width: 100%;
	height: auto;
}

.coffeeguide h3 {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.6;
	text-align: left;
	margin: 0 0 20px;
}

.coffeeguide p {
	line-height: 1.8;
}

.coffeeguide .howto {
	padding: 30px 20px;
	background: #F5F5F5;
	margin: 60px 0 0;
}

.coffeeguide .howto .item {
	max-width: inherit;
	margin: 0 auto;
	flex-direction: column;
	gap: 30px 0;
}

.coffeeguide .item .img {
	width: 100%;
	order: -1;
}

.coffeeguide .item .txt {
	width: 100%;
}

.coffeeguide .link {
	max-width: inherit;
	margin: 60px auto 0;
	flex-direction: column;
	gap: 40px 0;
}

.coffeeguide .link .item {
	max-width: inherit;
	width: 100%;
}

.coffeeguide .link .img {
	width: 100%;
}

.coffeeguide .link .txt {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.4;
	margin: 15px 0 0;
	width: 100%;
	text-align: center;
}

.coffeeguide .link a:hover {
	opacity: 1;
}

.coffeeguide .btn {
	margin: 30px 0 0 auto;
}

.coffeeguide .btn a:hover {
	background: #EB4300;
	color: #FFF;
}

.faq {
	margin: 0 0 100px;
}

.faq .item {
	margin: 40px auto 0;
	padding: 0 0 36px;
}

.faq .item:nth-of-type(1) {
	margin: 50px auto 0;
}

.faq .question {
	font-weight: bold;
	font-size: 2rem;
	line-height: 1.6;
	margin: 0 0 24px;
}

.faq .answer {
	line-height: 1.8;
}

.faq p a:hover {
	text-decoration: underline;
}

.access {
	margin: 0 0 100px;
}

.access .address {
	margin: 60px 0 30px;
}

.access .inner {
	display: flex;
	flex-wrap: wrap;
	gap: 60px 0;
	margin: 40px auto 0;
}

.access .howto {
	max-width: inherit;
	width: 100%;
}

.access h3 {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.4;
	margin: 0 0 36px;
}

.access .place {
	flex-direction: column;
	gap: 30px 0;
	margin: 32px 0 0;
}

.access .txt {
	max-width: inherit;
}

.shopinfo {
	margin: 0 0 100px;
}

.shopinfo .inner {
	margin: 60px 0 0;
	flex-direction: column;
	gap: 40px 0;
}

.shopinfo .img {
	width: 100%;
	text-align: center;
	order: -1;
}

.shopinfo .txt {
	width: 100%;
}

.shopinfo h3 {
	font-size: 2.8rem;
	font-weight: bold;
	margin: 0 0 24px;
	line-height: 1.4;
}

.shopinfo .txt-shop {
	font-weight: bold;
	font-size: 2rem;
	line-height: 2;
	margin: 0 0 24px;
}

.shopinfo .note {
	margin: 0 0 50px;
	line-height: 1.8;
}

.shopinfo p {
	line-height: 1.9;
}

.shopinfo p a {
	color: #101010;
	text-decoration: underline;
}

.shopinfo p a:hover {
	text-decoration: underline;
}

.shopinfo .btn a:hover {
	background: #EB4300;
	color: #FFF;
}

.instagram {
	margin: 0 0 100px;
}

.instagram-gallery {
	gap: 12px;
	margin: 60px 0 0;
}

.instagram-gallery li {
	width: calc(50% - 6px);
}

.instagram-gallery li a:hover {
	opacity: 1;
}

.instagram-gallery svg {
	width: 24px;
	height: 24px;
}

.instagram h2 {
	text-align: center;
}

.instagram .btn {
	max-width: 348px;
	width: 100%;
	margin: 40px auto 0;
}

.instagram .btn a:hover {
	background: #EB4300;
	color: #FFF;
}

/*------------------------------------------
 *	ストーリー
------------------------------------------*/
.page-story {
	padding: 60px 20px 0px;
	max-width: inherit;
}

.page-story h1 {
	font-size: 4.8rem;
	margin: 0 0 60px;
}

.page-story .inner {
	margin: 0 0 80px;
	flex-direction: column;
	gap: 30px 0;
}

.page-story .inner:last-child {
	align-items: flex-start;
}

.page-story .inner .txt {
	width: 100%;
}

.page-story .inner:last-child .txt {
	width: 100%;
}

.page-story .inner p {
	font-size: 1.6rem;
	line-height: 1.8;
	margin: 0 0 24px;
}

.page-story .inner .img {
	width: 100%;
	order: 1;
}

.page-story .inner:last-child .img {
	width: 100%;
}

/*------------------------------------------
 *	コーヒー豆
------------------------------------------*/
.page-beans {
	padding: 60px 20px 0;
	margin: 0 auto;
	max-width: inherit;
}

.page-beans h1 {
	font-size: 4.8rem;
	margin: 0 0 60px;
}

.page-beans .inner {
	margin: 0 0 60px;
}

.page-beans h2 {
	font-size: 2.8rem;
	font-weight: bold;
	text-align: center;
}

.page-beans h2 span {
	display: inline-block;
	padding: 0 0 14px;
	border-bottom: 1px solid #502411;
}

.page-beans .beans {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 20px;
	margin: 30px auto 0;
}

.page-beans .beans .item {
	width: calc(50% - 12px);
}

.page-beans .beans img {
	aspect-ratio: 236/172;
}

.page-beans .beans h3 {
	font-size: 1.6rem;
	font-weight: bold;
	margin: 16px 0 0;
	line-height: 1.4;
	color: #502411;
}

.page-beans-item {
	padding: 60px 20px 80px;
	margin: 0 auto;
	max-width: inherit;
}

.page-beans-item h1 {
	font-size: 4.8rem;
	margin: 0 0 60px;
}

.page-beans-item h2 {
	line-height: 1.4;
	margin: 0 0 30px;
}

.page-beans-item .txt+h2 {
	margin: 60px 0 30px;
}

.page-beans-item .img {
	max-width: 410px;
	text-align: center;
	margin: 0 auto 30px;
}

.page-beans-item .caption {
	font-size: 1.8rem;
	line-height: 1.4;
	text-align: center;
	font-weight: bold;
}

.page-beans-item .txt {
	margin: 20px 0 0;
	line-height: 1.6;
}

.page-beans-item .detail {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin: 0 0 60px;
}

.page-beans-item .detail dt {
	padding: 20px 0 16px;
	font-weight: bold;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.6;
	border-bottom: none;
}

.page-beans-item .detail dd {
	padding: 0 0 20px;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.6;
	border-bottom: 1px solid #502411;
	word-break: break-all;
}

.page-beans-item .roast {
	display: flex;
	justify-content: center;
	gap: 0 30px;
	margin: 0 0 40px;
}

.page-beans-item .roast .roast-level {
	max-width: 126px;
	width: 100%;
}

.page-beans-item .roast .img {
	max-width: inherit;
	margin: 0 0 10px;
}

.page-beans-item .roast p {
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
}

.page-beans-item .btn {
	max-width: 184px;
	width: 100%;
	margin: 0 auto;
}

.page-beans-item .btn a {
	display: block;
	cursor: pointer;
	font-weight: bold;
	color: #FFF;
	font-size: 1.6rem;
	background: #EB4300;
	width: 100%;
	padding: 8px 0;
	text-align: center;
	border-radius: 4px;
	box-sizing: border-box;
	border: 2px solid #EB4300;
	transition: background-color ease .5s;
	user-select: none;
}

.page-beans-item .btn a:hover {
	background: #EB4300;
	color: #FFF;
}

/*------------------------------------------
 *	コーヒーの淹れ方
------------------------------------------*/
.page-howto {
	padding: 60px 20px 80px;
	max-width: inherit;
}

.page-howto h1 {
	font-size: 4.8rem;
	margin: 0 0 60px;
}

.page-howto h2 {
	margin: 60px 0 30px;
	line-height: 1.4;
}

.page-howto p {
	line-height: 1.8;
}

.page-howto .step {
	flex-direction: column;
	gap: 30px 0;
	margin: 0 0 40px;
}

.page-howto .step .img {
	width: 100%;
}

.page-howto .step .txt {
	width: 100%;
}

.page-howto h3 {
	font-weight: bold;
	font-size: 2.4rem;
	margin: 0 0 24px;
	color: #502411;
}

.page-howto .point {
	font-size: 1.6rem;
	margin: 0 0 24px;
	color: #502411;
}

.page-howto p+.point {
	margin: 40px 0 24px;
}

.page-howto .btn {
	max-width: 168px;
	width: 100%;
	margin: 40px auto 0;
}

.page-howto .btn a {
	display: block;
	cursor: pointer;
	font-weight: bold;
	color: #FFF;
	font-size: 1.6rem;
	background: #EB4300;
	width: 100%;
	padding: 8px 0;
	text-align: center;
	border-radius: 4px;
	box-sizing: border-box;
	border: 2px solid #EB4300;
	transition: background-color ease .5s;
	user-select: none;
}

.page-howto .btn a:hover {
	background: #EB4300;
	color: #FFF;
}

/*------------------------------------------
 *	スペシャルティコーヒーとは
------------------------------------------*/
.page-specialty {
	padding: 60px 20px 80px;
}

.page-specialty h1 {
	font-size: 4.8rem;
	margin: 0 0 60px;
}

.page-specialty h2 {
	margin: 60px 0 30px;
	line-height: 1.4;
}

.page-specialty p {
	line-height: 1.8;
	margin: 0 0 24px;
}

.page-specialty .specialty {
	flex-direction: column;
	gap: 0;
}

.page-specialty .specialty .img {
	width: 100%;
}

.page-specialty .specialty .txt {
	width: 100%;
}

.page-specialty .btn {
	margin: 30px auto 0;
}

.page-specialty .btn a:hover {
	background: #EB4300;
	color: #FFF;
}

/*------------------------------------------
 *	コーヒー豆の精製方法について
------------------------------------------*/
.page-refining {
	padding: 60px 20px 0;
	margin: 0 auto;
	max-width: 1280px;
}

.page-refining h1 {
	font-size: 4.8rem;
	margin: 0 0 60px;
}

.page-refining h2 {
	margin: 60px 0 30px;
}

.page-refining p {
	line-height: 1.8;
}

.page-refining .link {
	flex-direction: column;
	gap: 14px 0;
	margin: 40px 0 80px;
}

.page-refining .link .btn {
	width: 100%;
}

.page-refining .link .btn a {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-weight: bold;
	color: #502411;
	width: 100%;
	border: 2px solid #502411;
	border-radius: 8px;
	padding: 10px 24px;
	box-sizing: border-box;
	line-height: 1.6;
	transition: opacity ease .5s;
	position: relative;
}

.page-refining .link .btn a:hover {
	opacity: 1;
}

.page-refining .link .btn a::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	border-top: 14px solid #502411;
	border-bottom: 0;
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
}

.page-refining .detail {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin: 0 0 80px;
}

.page-refining .detail dt {
	padding: 20px 0 16px;
	font-weight: bold;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.6;
	border-bottom: none;
}

.page-refining .detail dd {
	padding: 0 0 20px;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.6;
	border-bottom: 1px solid #502411;
	word-break: break-all;
}

.page-refining .detail dd:has(.list-honey) {
	padding: 0;
}

.page-refining .note {
	margin: -80px 0 80px;
}

.page-refining .list-honey {
	flex-direction: column;
	width: 100%;
}

.page-refining .honey {
	width: 100%;
}

.page-refining .honey .ttl {
	font-size: 1.6rem;
	font-weight: bold;
	padding: 16px;
	line-height: 1.6;
}

.page-refining .honey .white {
	background: #F5F5F5;
	border-top: 1px solid #502411;
}

.page-refining .honey .yellow {
	background: #FFFBCC;
	border-top: 1px solid #502411;
}

.page-refining .honey .red {
	background: #FFE6E6;
	border-top: 1px solid #502411;
}

.page-refining .honey .black {
	background: #CACCCF;
	border-top: 1px solid #502411;
}

.page-refining .honey .contents {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #502411;
}

.page-refining .honey .contents p {
	width: 100%;
	padding: 12px 16px;
	line-height: 1.6;
	box-sizing: border-box;
	font-size: 1.4rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	display: block;
}

.page-refining .honey .contents .txt {
	font-weight: normal;
	padding: 0 16px 12px;
}

.page-refining .tips {
	line-height: 1.6;
	margin: 20px 0 0;
}

}