/*------------------------------------------
 *	Reset
------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,header,hgroup,footer,menu,nav,section,summary,time,mark,audio,video {
	font-size: 100%;
	vertical-align: baseline;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
}

body {
	line-height: 1;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}

nav,ul,ol {
	list-style: none;
}

blockquote,q {
	quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
	content: "";
	content: none;
}

a {
	font-size: 100%;
	vertical-align: baseline;
	text-decoration: none;
	margin: 0;
	padding: 0;
	background: transparent;
	outline: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	max-width: 100%;
	border: 0;
	vertical-align: top;
}

input,select,textarea {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

/*------------------------------------------
 *	html.body
------------------------------------------*/
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-size: 1.6rem;
	font-family: "Noto Sans JP", sans-serif;
	color: #101010;
	position: relative;
}

/*------------------------------------------
 *	メニュー
------------------------------------------*/
.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: 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: #FFF;
	color: #EB4300;
}

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

.nav-global ul {
	display: flex;
	flex-wrap: wrap;
	gap: 80px 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: #FFF;
	color: #EB4300;
	border-color: #EB4300;
}

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

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

.header-lower {
	background: #502411;
}

.header-lower .logo-area {
	padding: 10px 40px;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.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: #FFF;
	color: #EB4300;
}

/*------------------------------------------
 *	フッター
------------------------------------------*/
.footer-inner {
	max-width: 1280px;
	margin: 0 auto 40px;
	padding: 0 40px;
	display: flex;
	justify-content: space-between;
	gap: 60px 40px;
	flex-wrap: wrap;
}

.footer-global .footer-info {
	max-width: 520px;
	width: 100%;
	display: flex;
	gap: 0 24px;
}

.footer-global .footer-logo img {
	width: 140px;
	height: auto;
}

.footer-global .address {
	line-height: 2.2;
}

.footer-global .address a {
	color: #101010;
	text-decoration: underline;
}

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

.footer-nav {
	max-width: 480px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 36px 0;
}

.footer-nav li {
	width: calc(100%/3);
	word-break: break-all;
}

.footer-nav a {
	font-size: 2rem;
	font-weight: bold;
	color: #101010;
	transition: color ease .5s;
}

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

.copyright {
	background: #502411;
	text-align: center;
	font-size: 1.1rem;
	padding: 6px 0;
	color: #FFF;
}

/*------------------------------------------
 *	メインビュー
------------------------------------------*/
.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: 40px 40px 80px;
	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: #FFF;
	color: #EB4300;
}

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

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

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

/*------------------------------------------
 *	TOPページ
------------------------------------------*/
.contents-wrapper {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
}

.contents-wrapper h2 {
	font-size: 8rem;
	font-weight: bold;
	line-height: 1;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.info {
	margin: 180px 0;
}

.info .inner {
	display: flex;
	align-items: center;
	gap: 0 50px;
}

.info .business-time {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 2.2;
}

.info .access {
	display: flex;
	align-items: flex-end;
	gap: 0 30px;
	margin: 0;
}

.info .access p {
	line-height: 1.6;
	word-break: break-all;
}

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

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

.info .btn a {
	display: block;
	cursor: pointer;
	font-weight: bold;
	color: #FFF;
	font-size: 1.6rem;
	background: #EB4300;
	width: 152px;
	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;
}

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

.info-contents {
	max-width: 1172px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 160px 0 0;
	gap: 0 40px;
}

.info-contents .txt {
	font-size: 4rem;
	font-weight: bold;
	line-height: 2;
	flex-shrink: 0;
}

@media (768px <= width <= 1000px) {
	.info-contents .txt {
		font-size: 3rem;
	}
}

.concept {
	margin: 0 0 160px;
}

.concept h2 {
	text-align: center;
}

.concept .inner {
	margin: 80px 0 0;
	display: flex;
	justify-content: space-between;
	gap: 0 30px;
}

.concept .img {
	width: 49.0625%;
}

.concept .txt {
	width: 40.625%;
}

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

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

.concept p {
	line-height: 1.9;
}

.beans {
	margin: 0 0 160px;
}

.beans h2 {
	text-align: center;
}

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

.beans .kind {
	display: flex;
	max-width: 1062px;
	width: 100%;
	flex-wrap: wrap;
	gap: 40px 24px;
	margin: 80px auto 0;
}

.beans .item {
	width: 23.258003%;
}

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

.beans .item a {
	transition: opacity ease .5s;
}

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

.beans .btn {
	width: 168px;
	margin: 80px auto 0;
}

.beans .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;
}

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

.beans .inner {
	margin: 80px 0 0;
	display: flex;
	justify-content: space-between;
	gap: 0 30px;
}

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

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

.beans .inner h3 {
	font-size: 2.8rem;
	font-weight: bold;
	margin: 0 0 56px;
	line-height: 1.4;
}

.beans p {
	line-height: 1.9;
}

.roaster {
	margin: 0 0 160px;
}

.roaster h2 {
	text-align: center;
}

.roaster .inner {
	margin: 90px 0 0;
	display: flex;
	justify-content: space-between;
	gap: 0 30px;
}

.roaster .inner .img {
	width: 49.0625%;
}

.roaster .txt {
	width: 40.625%;
}

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

.roaster p {
	line-height: 1.9;
}

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

.roaster-desc h3 {
	text-align: center;
}

.roaster-desc .img {
	text-align: center;
}

.roaster-desc .caption {
	max-width: 846px;
	margin: 40px auto 0;
	line-height: 2.2;
}

.ordersystem {
	max-width: 1062px;
	width: 100%;
	margin: 0 auto 160px;
	padding: 60px 40px 40px;
	background: #F5F5F5;
	box-sizing: border-box;
}

.ordersystem h2 {
	text-align: center;
}

.ordersystem .inner {
	max-width: 940px;
	margin: 90px auto 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0 40px;
}

.ordersystem .process {
	width: 39.361702%;
	display: flex;
	align-items: center;
	gap: 0 9.729729%;
}

.ordersystem .num {
	font-size: 6rem;
	font-weight: bold;
	line-height: 1;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

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

.ordersystem .txt {
	width: 56%;
}

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

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

.ordersystem .btn {
	width: 152px;
	margin: 0 auto;
}

.ordersystem .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;
}

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

.coffeeguide {
	margin: 0 0 160px;
}

.coffeeguide h2 {
	text-align: center;
}

.coffeeguide .copy {
	margin: 100px 0 50px;
	text-align: center;
	font-weight: bold;
	font-size: 2.8rem;
	line-height: 1.4;
}

.coffeeguide .inner {
	margin: 90px 0 0;
	display: flex;
	justify-content: space-between;
	gap: 0 30px;
}

.coffeeguide .inner .img {
	width: 49.0625%;
}

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

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

.coffeeguide p {
	line-height: 1.9;
}

.coffeeguide .howto {
	padding: 40px;
	background: #F5F5F5;
	margin: 80px 0 0;
}

.coffeeguide .howto .item {
	max-width: 1062px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 0 40px;
}

.coffeeguide .item .img {
	width: 48.964218%;
}

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

.coffeeguide .link {
	max-width: 1062px;
	margin: 80px auto 0;
	display: flex;
	justify-content: space-between;
	gap: 0 24px;
}

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

.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 {
	color: #101010;
	transition: opacity ease .5s;
}

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

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

.coffeeguide .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;
}

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

.faq {
	margin: 0 0 160px;
}

.faq h2 {
	text-align: center;
}

.faq .item {
	margin: 46px auto 0;
	padding: 0 0 40px;
	border-bottom: 1px solid #101010;
	max-width: 843px;
}

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

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

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

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

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

.access {
	margin: 0 0 160px;
}

.access h2 {
	text-align: center;
}

.access .address {
	margin: 100px 0 45px;
	text-align: center;
	font-size: 2rem;
	line-height: 1.4;
}

.google-map {
	width: 100%;
	max-width: 1062px;
	margin: 0 auto;
	aspect-ratio: 1062 / 494;
}

.google-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.access .inner {
	max-width: 1062px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px 100px;
	margin: 50px auto 0;
}

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

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

.access .place {
	display: flex;
	gap: 0 50px;
	margin: 32px 0 0;
}

.access .txt {
	max-width: 160px;
	width: 100%;
	flex-shrink: 0;
	font-weight: bold;
}

.shopinfo {
	margin: 0 0 160px;
}

.shopinfo h2 {
	text-align: center;
}

.shopinfo .inner {
	margin: 90px 0 0;
	display: flex;
	justify-content: space-between;
	gap: 0 30px;
}

.shopinfo .img {
	width: 57.65625%;
}

.shopinfo .txt {
	width: 32.109375%;
}

.shopinfo h3 {
	font-size: 2.8rem;
	font-weight: bold;
	margin: 10px 0 48px;
	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.9;
}

.shopinfo p {
	margin: 24px 0 0;
	line-height: 1.9;
}

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

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

.shopinfo .btn {
	max-width: 216px;
	width: 100%;
	margin: 30px 0 0;
}

.shopinfo .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;
}

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

.instagram {
	margin: 0 0 160px;
}

.instagram h2 {
	text-align: center;
}

.instagram-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 80px 0 0;
}

.instagram-gallery li {
	width: calc(25% - 18px);
}

.instagram-gallery li a {
	transition: opacity ease .5s;
	display: block;
	position: relative;
}

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

.instagram-gallery img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	object-position: center center;
}

.instagram-gallery svg {
	width: 30px;
	height: 30px;
	position: absolute;
	right: 10px;
	top: 10px;
}

.instagram-gallery path {
	fill: #ddd;
}

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

.instagram .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;
}

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

/*------------------------------------------
 *	ストーリー
------------------------------------------*/
.page-story {
	padding: 70px 40px 60px;
	margin: 0 auto;
	max-width: 1280px;
}

.page-story h1 {
	font-size: 8rem;
	font-weight: bold;
	line-height: 1;
	margin: 0 0 60px;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.page-story .inner {
	margin: 0 0 80px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0 40px;
}

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

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

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

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

.page-story .inner .img {
	width: 40.625%;
}

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

/*------------------------------------------
 *	コーヒー豆
------------------------------------------*/
.page-beans {
	padding: 70px 40px 0;
	margin: 0 auto;
	max-width: 1280px;
}

.page-beans h1 {
	font-size: 8rem;
	font-weight: bold;
	line-height: 1;
	margin: 0 0 60px;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

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

.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 24px;
	margin: 40px auto 0;
}

.page-beans .beans .item {
	width: 18.4375%;
}

.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: 70px 40px 120px;
	margin: 0 auto;
	max-width: 1280px;
}

.page-beans-item h1 {
	font-size: 8rem;
	font-weight: bold;
	line-height: 1;
	margin: 0 0 60px;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.page-beans-item .inner {
	margin: 0 auto;
	max-width: 846px;
}

.page-beans-item h2 {
	font-size: 2.8rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 50px;
	line-height: 1.4;
}

.page-beans-item .txt+h2 {
	margin: 80px 0 50px;
}

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

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

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

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

.page-beans-item .detail dt {
	padding: 24px 20px;
	font-weight: bold;
	width: 23%;
	box-sizing: border-box;
	line-height: 1.6;
	border-bottom: 1px solid #502411;
}

.page-beans-item .detail dd {
	padding: 24px 20px;
	width: 77%;
	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 80px;
}

.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: #FFF;
	color: #EB4300;
}

/*------------------------------------------
 *	コーヒーの淹れ方
------------------------------------------*/
.page-howto {
	padding: 70px 40px 120px;
	margin: 0 auto;
	max-width: 1280px;
}

.page-howto h1 {
	font-size: 8rem;
	font-weight: bold;
	line-height: 1;
	margin: 0 0 60px;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.page-howto .inner {
	max-width: 846px;
	margin: 0 auto;
}

.page-howto h2 {
	margin: 80px 0 50px;
	font-size: 2.8rem;
	font-weight: bold;
}

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

.page-howto .step {
	display: flex;
	gap: 0 25px;
	margin: 0 0 40px;
}

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

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

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

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

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

.page-howto .btn {
	max-width: 168px;
	width: 100%;
	margin: 80px 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: #FFF;
	color: #EB4300;
}

/*------------------------------------------
 *	スペシャルティコーヒーとは
------------------------------------------*/
.page-specialty {
	padding: 70px 40px 120px;
	margin: 0 auto;
	max-width: 1280px;
}

.page-specialty h1 {
	font-size: 8rem;
	font-weight: bold;
	line-height: 1;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.page-specialty .inner {
	max-width: 846px;
	margin: 0 auto;
}

.page-specialty h2 {
	margin: 80px 0 50px;
	font-size: 2.8rem;
	font-weight: bold;
}

.page-specialty p {
	line-height: 1.9;
	margin: 0 0 30px;
}

.page-specialty p span {
	font-weight: bold;
}

.page-specialty .specialty {
	display: flex;
	gap: 0 25px;
}

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

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

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

.page-specialty .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-specialty .btn a:hover {
	background: #FFF;
	color: #EB4300;
}

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

.page-refining h1 {
	font-size: 8rem;
	font-weight: bold;
	line-height: 1;
	margin: 0 0 60px;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.page-refining .inner {
	max-width: 846px;
	margin: 0 auto;
}

.page-refining h2 {
	margin: 60px 0 40px;
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.4;
}

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

.page-refining .link {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 2.836879%;
	margin: 80px 0 120px;
}

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

.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: .6;
}

.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-wrap: wrap;
	margin: 0 0 120px;
}

.page-refining .detail dt {
	padding: 24px 20px;
	font-weight: bold;
	width: 23%;
	box-sizing: border-box;
	line-height: 1.6;
	border-bottom: 1px solid #502411;
	display: flex;
	align-items: center;
}

.page-refining .detail dd {
	padding: 24px 20px;
	width: 77%;
	box-sizing: border-box;
	line-height: 1.6;
	border-bottom: 1px solid #502411;
	word-break: break-all;
	display: flex;
	align-items: center;
}

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

.page-refining .detail dd p {
	line-height: 1.6;
}

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

.page-refining .list-honey {
	display: flex;
	flex-wrap: wrap;
}

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

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

.page-refining .honey .white {
	background: #F5F5F5;
}

.page-refining .honey .yellow {
	background: #FFFBCC;
}

.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;
	border-top: 1px solid #502411;
}

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

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

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