html {
	scroll-behavior: smooth;
}

body {
    height: 100%;
    margin: 0;
    font-feature-settings: 'palt';
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-family: "source-han-sans-cjk-ja", sans-serif;
	font-weight: 300;
	font-style: normal;
	background: #ece4d8;
	color: #231815;
}
a{
	color: #000;
	text-decoration: none;
}
img{
	width: 100%;
	display: block;
	line-height: 0;
	padding: 0;
	margin: 0;
	-webkit-user-drag: none;
	user-select: none;
}


/* FONT

Kozuka Gothic Pr6N R
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 300;
font-style: normal;

Kozuka Gothic Pr6N B
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 700;
font-style: normal;

Garamond Premier Pro Medium Caption
font-family: "garamond-premier-pro-caption", serif;
font-weight: 200;
font-style: normal;

Futura PT Demi
font-family: "futura-pt", sans-serif;
font-weight: 600;
font-style: normal;

Source Han Sans JP Normal
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 300;
font-style: normal;

Source Han Sans JP Medium
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 300;
font-style: normal;

Source Han Sans JP Bold
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 700;
font-style: normal;

Source Han Sans JP Light
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 300;
font-style: normal;

Source Han Sans JP Normal
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 300;
font-style: normal;

*/

/* PC ------------------------------------------------------*/
@media screen and (min-width: 1281px) {
	.sp-on{
		display: none !important;
	}
	.hedear{
		width: 100%;
		height: 100vh;
		position: relative;
	}
	.hedear .line{
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 5%;
		background: #fff;
	}
	.hedear .mv-img{
		width: 30%;
        position: absolute;
        top: 54%;
        left: 54%;
        transform: translate(-50%, -50%);
	}
	.hedear .mv-title{
		width: 40%;
        position: absolute;
        right: 5%;
        bottom: 7%;
	}
	.hedear .mv-sub-title{
		width: max-content;
        position: absolute;
        top: 10%;
		left: 5%;
	}
	.hedear .mv-sub-title li:nth-child(1){
		font-size: 19px;
		letter-spacing: 6px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 15%;
		white-space: nowrap;
	}
	.hedear .mv-sub-title li:nth-child(1) span{
		letter-spacing: 1px;
	}
	.hedear .mv-sub-title li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 5% 0;
	}
	.hedear .mv-sub-title li:nth-child(3){
		font-size: 15px;
		letter-spacing: 4px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		padding: 0 0 0 15%;
		white-space: nowrap;
	}
	.hedear .mv-nav{
		position: absolute;
		left: 9%;
		bottom: 7%;
	}
	.hedear .mv-nav li{
		margin: 0 0 10% 0;
	}
	.hedear .mv-nav li a{
		font-size: 15px;
		line-height: 0;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
	}
	.hedear .mv-nav li a .h-txt{
		display: inline-block;
		transition: transform 0.4s ease;
	}
	.hedear .mv-nav li a:hover .h-txt{
		transform: translateX(18px);
	}
	.hedear .mv-nav li a span:not(.h-txt){
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 50%;
		left: 0;
		opacity: 0;
		transform: translateY(-50%) translateX(-12px) rotate(-360deg);
		transition: opacity 0.4s ease, transform 0.4s ease;
	}
	.hedear .mv-nav li a:hover span:not(.h-txt){
		opacity: 1;
		transform: translateY(-50%) translateX(0) rotate(0deg);
	}

	/* wrap */
	.wrap{
		width: 100%;
		position: relative;
		margin: 0 auto 0% auto;
	}
	.wrap .line00{
		width: 90%;
		height: 1px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: #fff;
	}
	.wrap .line01{
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 5%;
		background: #fff;
	}
	.wrap .line02{
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 5%;
		background: #fff;
	}

	/* shop */
	.shop{
		width: 90%;
		margin: 0 auto;
		padding: 5% 0 5% 0;
		border-bottom: 1px solid #fff;
	}
	.shop .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 3% 5%;
	}
	.shop .index span:first-child{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.shop .data{
		width: 100%;
		margin: 0 auto 5% auto;
	}
	.shop .data li:nth-child(1){
		font-size: 17px;
		letter-spacing: 6px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 5%;
	}
	.shop .data li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 1.5% 0;
	}
	.shop .data li:nth-child(3){
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		padding: 0 0 0 5%;
	}
	.shop-index{
		width: 90%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto 2% auto;
	}
	.shop-index li{
		width: 47%;
		border: 1px solid #fff;
		box-sizing: border-box;
		padding: 2% 0 0 0;
	}
	.shop-index li .img{
		width: 70%;
		margin: 0 auto;
	}
	.shop-index li .name{
		width: 75%;
		font-size: 19px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		margin: 0 auto 4% auto;
	}
	.shop-index li .title{
		width: 75%;
		font-size: 17px;
        letter-spacing: 6px;
        line-height: 1;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		margin: 0 auto 2% auto;
	}
	.shop-index li .txt{
		width: 75%;
		margin: 0 auto;
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
	}
	.shop-index li .btn::after{
		content: "";
		display: inline-block;
		width: 10px;
		height: 10px;
		background-image: url('../coffee_img/plus.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		vertical-align: middle;
		margin: 0 0 0 10px;
		position: relative;
		top: -2px;
	}
	.shop-index li .btn{
		width: 100%;
		display: block;
		font-size: 15px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "futura-pt", sans-serif;
		font-weight: 600;
		font-style: normal;
		color: #fff;
		text-align: center;
		background: #231815;
		padding: 10px 0;
		margin: 5% 0 0 0;
	}
	.shop .cou{
		font-size: 11px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: center;
	}

	/* modal */
	.modal-overlay{
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.1);
		z-index: 1000;
		align-items: center;
		justify-content: center;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
		backdrop-filter: blur(5px);
		-ms-backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}
	.modal-overlay.is-open{
		opacity: 1;
		pointer-events: auto;
	}
	.modal-inner{
		width: 80%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.modal-window{
		width: 100%;
		height: 80vh;
		background: #ece4d8;
		box-sizing: border-box;
		border: 1px solid #fff;
	}
	.modal-close{
		background: none;
		border: none;
		font-size: 13px;
		letter-spacing: 1px;
		line-height: 1;
		font-family: "futura-pt", sans-serif;
		font-weight: 600;
		font-style: normal;
		color: #fff;
		text-align: center;
		background: #231815;
		cursor: pointer;
		padding: 1% 3%;
	}
	.modal-close::after{
		content: "";
		display: inline-block;
		width: 10px;
		height: 10px;
		background-image: url('../coffee_img/minus.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		vertical-align: middle;
		margin: 0 0 0 10px;
		position: relative;
		top: -1px;
	}
	.modal-wrap{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
	}
	.modal-l{
		width: 50%;
		height: 100%;
		border-right: 1px solid #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.modal-l .img{
		width: 70%;
		margin: 0 auto;
	}
	.modal-l .name{
		width: 75%;
		font-size: 19px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		margin: 0 auto 4% auto;
	}
	.modal-l .title{
		width: 75%;
		font-size: 17px;
        letter-spacing: 6px;
        line-height: 1;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		margin: 0 auto 2% auto;
	}
	.modal-l .txt{
		width: 75%;
		margin: 0 auto;
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding-bottom: 5%;
	}
	.modal-r{
		width: 50%;
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		position: relative;
	}
	.scroll-hint{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 26px;
		height: 40px;
		border: 1px solid #231815;
		border-radius: 13px;
		opacity: 0;
		pointer-events: none;
		z-index: 1;
	}
	.scroll-hint span{
		display: block;
		width: 4px;
		height: 4px;
		background: #231815;
		border-radius: 50%;
		margin: 6px auto 0;
		animation: scrollDot 1s ease-in-out infinite;
	}
	.modal-overlay.is-open .scroll-hint{
		animation: scrollHintFade 4s ease forwards;
	}
	@keyframes scrollDot {
		0%   { transform: translateY(0); opacity: 1; }
		100% { transform: translateY(12px); opacity: 0; }
	}
	@keyframes scrollHintFade {
		0%   { opacity: 0; }
		20%  { opacity: 1; }
		70%  { opacity: 1; }
		100% { opacity: 0; }
	}
	.shop-list{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.shop-list li{
		width: 50%;
		box-sizing: border-box;
		padding: 9% 0;
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
	}
	.shop-list li:nth-child(2n){
		border-right: 1px solid #fff;
	}
	.shop-list li:last-child,
	.shop-list li:nth-last-child(2):nth-child(odd){
		border-bottom: 1px solid #fff;
	}
	.shop-list .shopname{
		width: max-content;
        font-size: 14px;
        letter-spacing: 6px;
        line-height: 1;
        font-family: "kozuka-gothic-pr6n", sans-serif;
        font-weight: 600;
        font-style: normal;
		margin: 0 auto 10% auto;
	}
	.shop-list .shopname span{
        letter-spacing: 2px;
	}
	.shop-list li .sns-box{
		width: 70%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}
	.shop-list li .sns-box a{
		width: 49%;
		display: block;
		box-sizing: border-box;
		padding: 0 18%;
	}
	.shop-list li .sns-box .line{
		width: 1px;
		align-self: stretch;
		background: #fff;
	}

	/* Coffee_Beans */
	.coffee_beans{
		width: 90%;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto;
		padding: 0 0 3% 0;
        border-bottom: 1px solid #fff;
	}
	.coffee_beans .img{
		width: 50%;
		background: #d8cdb8;
		box-sizing: border-box;
	}
	.coffee_beans .data{
		width: 50%;
		padding: 5% 0 0 0;
		position: relative;
	}
	.coffee_beans .data .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 7% 10%;
	}
	.coffee_beans .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.coffee_beans .data .data-txt{
		width: 85%;
		margin: 0 0 5% 0;
	}
	.coffee_beans .data .data-txt li:nth-child(1){
		font-size: 17px;
		letter-spacing: 6px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 12%;
	}
	.coffee_beans .data .data-txt li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 4% 0;
	}
	.coffee_beans .data .data-txt li:nth-child(3){
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 12%;
	}
	.coffee_data{
		width: 100%;
		background: #d8cdb8;
		position: absolute;
		left: 1px;
		bottom: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 2% 0;
	}
	.coffee_data::after{
		content: "";
		position: absolute;
		left: 55%;
		top: 0;
		height: 100%;
		width: 1px;
		background: #fff;
	}
	.coffee_data-l{
		width: 55%;
	}
	.coffee_data-l .type{
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #fff;
		font-size: 12px;
        letter-spacing: 1px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		padding: 3% 0;
	}
	.coffee_data-l .type li:nth-child(1){
		width: 35%;
		box-sizing: border-box;
		padding: 0 0 0 10%;
		display: flex;
		justify-content: space-between;
	}
	.coffee_data-l .type li:nth-child(1) span{
		margin-left: auto;
	}
	.coffee_data-l .type li:nth-child(2){
		width: 55%;
	}
	.coffee_data-l .type-list{
		width: 80%;
		margin: 0 auto;
		padding: 5% 0 5% 0;
	}
	.coffee_data-l .type-list li{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 0 5% 0;
	}
	.coffee_data-l .type-list li:last-child{
		margin: 0 0 0 0;
	}
	.coffee_data-l .type-list li .title{
		width: 30%;
		background: #fff;
		font-size: 10px;
        letter-spacing: 1px;
        line-height: 3em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		border-radius: 100px;
		text-align: center;
	}
	.coffee_data-l .type-list li .graph{
		width: 60%;
		line-height: 0;
		position: relative;
	}
	.coffee_data-l .type-list li .graph span{
		width: 10px;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%) rotate(-720deg);
		transition: left 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.coffee_data-l .type-list li.active .graph span{
		left: 50%;
		transform: translate(-50%, -50%) rotate(0deg);
	}
	.coffee_data-l .type-list li:nth-child(2) .graph span{ transition-delay: 0.1s; }
	.coffee_data-l .type-list li:nth-child(3) .graph span{ transition-delay: 0.2s; }
	.coffee_data-l .type-list li:nth-child(4) .graph span{ transition-delay: 0.3s; }
	.coffee_data-l .type-list li:nth-child(5) .graph span{ transition-delay: 0.4s; }
	.coffee_data-r{
		width: 45%;
	}
	.coffee_data-r .txt{
		width: 85%;
		font-size: 13px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		text-align: justify;
		margin: 0 0 0 15%;
	}
	.coffee_data-r .line{
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 5% 0 5% 15%;
	}

	/* Our_Initiatives */
	.our_initiatives{
		width: 90%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 0 auto 3% auto;
		padding: 0 0 0% 0;
		border-bottom: 1px solid #fff;
		position: relative;
	}
	.our_initiatives::after{
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		height: 100%;
		width: 1px;
		background: #fff;
	}
	.our_initiatives .img{
		width: 50%;
		box-sizing: border-box;
		padding: 3% 3%;
	}
	.our_initiatives .data{
		width: 50%;
		padding: 5% 0 0 0;
	}
	.our_initiatives .data .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 10% 10%;
	}
	.our_initiatives .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.our_initiatives .data .main-title{
		width: 100%;
		font-size: 17px;
        letter-spacing: 6px;
		line-height: 1;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		padding: 3% 0 3% 10%;
		margin: 0 0 5% 0;
		box-sizing: border-box;
	}
	.our_initiatives .data .main-title span{
		letter-spacing: 1px;
	}
	.our_initiatives .data .slide-box{
		width: 90%;
		margin: 0 0 7% 0;
		overflow: hidden;
	}
	.our_initiatives .data .slide-box .slick{
		width: 82%;
		margin-left: 18%;
	}
	.our_initiatives .data .slide-box .slick-list{
		overflow: visible;
		margin-right: -40px;
	}
	.our_initiatives .data .slide-box .slick-slide{
		margin-right: 40px;
	}
	.our_initiatives .data .data-txt{
		width: 85%;
		margin: 0 0 5% 0;
	}
	.our_initiatives .data .data-txt li:nth-child(1){
		font-size: 17px;
		letter-spacing: 6px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 12%;
	}
	.our_initiatives .data .data-txt li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 4% 0;
	}
	.our_initiatives .data .data-txt li:nth-child(3){
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 12%;
	}
	.our_initiatives .data .data-txt li:nth-child(3) span{
		width: max-content;
		border-bottom: 1px solid #fff;
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		margin: 5% 0 3% 0;
		display: block;
	}

	/* Event_top */
	.event_top{
		width: 100%;
		padding: 5% 0;
        border-bottom: 1px solid #fff;
		position: relative;
		overflow: hidden;
		z-index: 10;
	}
	.event_top .bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../coffee_img/event_top-img01.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		z-index: 0;
	}
	.event_top_con{
		width: 80%;
		position: relative;
		display: flex;
		justify-content: flex-start;
		z-index: 80;
		background: #ece4d8;
		margin: 0 auto;
	}
	.event_top_con .img{
		width: 50%;
		overflow: hidden;
	}
	.event_top_con .data{
		width: 50%;
		position: relative;
	}
	.event_top_con .data-in{
		width: 70%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.event_top_con .data-in .title{
		font-size: 17px;
        letter-spacing: 4px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
		white-space: nowrap;
		margin: 0 0 7% 0;
	}
	.event_top_con .data-in .txt{
		font-size: 13px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
        text-align: justify;
	}
	.event_top_con .btn{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
        display: block;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 2.5em;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: #231815;
        padding: 10px 0;
        margin: 5% 0 0 0;
	}
	.event_top_con .btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/plus.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }

	/* event */
	.event{
		width: 90%;
		margin: 0 auto;
		padding: 0 0 5% 0;
	}
	.event-box{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		position: relative;
	}
	.event-box .img{
		width: 66.67%;
		box-sizing: border-box;
        padding: 3% 3%;
	}
	.event-box::after {
        content: "";
        position: absolute;
        left: 33.33%;
        top: 0;
        height: 100%;
        width: 1px;
        background: #fff;
    }
	.event-box .data{
		width: 33.33%;
		padding: 3% 0 0 0;
	}
	.event-box .data .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 7% 10%;
	}
	.event-box .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.event-box .data .num{
		width: 15%;
		margin: 0 0 15% 10%;
	}
	.event-box .data .data-txt{
		width: 90%;
		margin: 0 0 5% 0;
	}
	.event-box .data .data-txt li:nth-child(1){
		font-size: 17px;
		letter-spacing: 6px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 12%;
	}
	.event-box .data .data-txt li:nth-child(1) span{
		letter-spacing: 2px;
	}
	.event-box .data .data-txt li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 4% 0;
	}
	.event-box .data .data-txt li:nth-child(3){
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 12%;
	}
	.event-box .data .data-txt li:nth-child(3) span{
		font-size: 13px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		display: block;
	}
	.event-box .data .data-txt li:nth-child(3) .name{
		text-align: right;
		margin: 5% 0 0 0;
	}
	.event-data{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	.event-data li{
		width: 33.33%;
	}
	.event-data li:nth-child(2){
		border-left: 1px solid #fff;
		border-right: 1px solid #fff;
	}
	.event-data li{
		width: 33.33%;
		display: flex;
		justify-content: flex-start;
	}
	.event-data li .title-box{
		width: 35%;
		border-right: 1px solid #fff;
		font-size: 13px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
		box-sizing: border-box;
		text-align: center;
		padding: 5% 5%;
	}
	.event-data li .event-data-box{
		width: 65%;
		box-sizing: border-box;
		padding: 5% 5%;
	}
	.event-data li .event-data-box .title{
		font-size: 16px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
	}
	.event-data li .event-data-box .title span{
        font-size: 11px;
        letter-spacing: 2px;
        line-height: 2.5em;
	}
	.event-data li .event-data-box .txt{
		font-size: 12px;
        letter-spacing: 1px;
        line-height: 2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
	}
	.event .btn{
		width: 40%;
        display: block;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 2.5em;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: #231815;
        padding: 10px 0;
        margin: 3% auto 1% auto;
	}
	.event .btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/target_blank.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }
	.event .cou{
		font-size: 12px;
        letter-spacing: 1px;
        line-height: 2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		text-align: center;
	}

	/* brand */
	.brand{
		width: 100%;
		margin: 0 auto;
		padding: 5% 0 10% 0;
		background: #fff;
		display: flex;
		justify-content: flex-start;
	}
	.brand .img{
		width: 60%;
		box-sizing: border-box;
		padding: 0 5% 0 0;
	}
	.brand .data{
		width: 40%;
	}
	.brand .data .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 7% 15%;
	}
	.brand .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.brand .data .main-title {
        width: 100%;
        font-size: 17px;
        letter-spacing: 6px;
        line-height: 1;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        padding: 3% 0 3% 15%;
        margin: 0 0 5% 0;
        box-sizing: border-box;
    }
	.brand .data .txt{
		width: 70%;
        font-size: 13px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
        text-align: justify;
        margin: 0 0 10% 15%;
	}
	.brand .data .btn{
		width: 50%;
        display: block;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 2.5em;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: #231815;
        padding: 10px 0;
		margin: 0 0 0 15%;
	}
	.brand .data .btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/target_blank.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }

	.footer{
		width: 100%;
        padding: 0 0 3% 0;
		background: #fff;
	}
	.footer .logo{
		width: 15%;
        margin: 0 auto 2% auto;
	}
	.footer .icon{
		display: block;
        width: 30px;
        line-height: 0;
        margin: 0 auto 2% auto;
	}
	.footer .copy{
		width: 100%;
        text-align: center;
        font-size: 11px;
        letter-spacing: 1px;
	}

	/* fix-btn */
	.fix-btn{
		width: max-content;
        display: block;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 2.5em;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #231815;
        text-align: center;
        background: #fff;
		border: 1px solid #231815;
        padding: 10px 3%;
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 999;
		transform: translateY(100%);
		transition: transform 0.4s ease;
	}
	.fix-btn.is-visible{
		transform: translateY(0);
	}
	.fix-btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/plus2.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }

}
/* ノート ------------------------------------------------------*/
@media screen and (min-width: 1025px) and (max-width: 1280px) {
	.sp-on{
		display: none !important;
	}
	.hedear{
		width: 100%;
		height: 100vh;
		position: relative;
	}
	.hedear .line{
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 5%;
		background: #fff;
	}
	.hedear .mv-img{
		width: 35%;
        position: absolute;
        top: 54%;
        left: 54%;
        transform: translate(-50%, -50%);
	}
	.hedear .mv-title{
		width: 40%;
        position: absolute;
        right: 5%;
        bottom: 7%;
	}
	.hedear .mv-sub-title{
		width: max-content;
        position: absolute;
        top: 10%;
		left: 5%;
	}
	.hedear .mv-sub-title li:nth-child(1){
		font-size: 17px;
		letter-spacing: 6px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 15%;
		white-space: nowrap;
	}
	.hedear .mv-sub-title li:nth-child(1) span{
		letter-spacing: 1px;
	}
	.hedear .mv-sub-title li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 5% 0;
	}
	.hedear .mv-sub-title li:nth-child(3){
		font-size: 13px;
		letter-spacing: 4px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		padding: 0 0 0 15%;
		white-space: nowrap;
	}
	.hedear .mv-nav{
		position: absolute;
		left: 9%;
		bottom: 7%;
	}
	.hedear .mv-nav li{
		margin: 0 0 10% 0;
	}
	.hedear .mv-nav li a{
		font-size: 13px;
		line-height: 0;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
	}
	.hedear .mv-nav li a .h-txt{
		display: inline-block;
		transition: transform 0.4s ease;
	}
	.hedear .mv-nav li a:hover .h-txt{
		transform: translateX(18px);
	}
	.hedear .mv-nav li a span:not(.h-txt){
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 50%;
		left: 0;
		opacity: 0;
		transform: translateY(-50%) translateX(-12px) rotate(-360deg);
		transition: opacity 0.4s ease, transform 0.4s ease;
	}
	.hedear .mv-nav li a:hover span:not(.h-txt){
		opacity: 1;
		transform: translateY(-50%) translateX(0) rotate(0deg);
	}

	/* wrap */
	.wrap{
		width: 100%;
		position: relative;
		margin: 0 auto 0% auto;
	}
	.wrap .line00{
		width: 90%;
		height: 1px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: #fff;
	}
	.wrap .line01{
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 5%;
		background: #fff;
	}
	.wrap .line02{
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 5%;
		background: #fff;
	}

	/* shop */
	.shop{
		width: 90%;
		margin: 0 auto;
		padding: 5% 0 5% 0;
		border-bottom: 1px solid #fff;
	}
	.shop .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 3% 5%;
	}
	.shop .index span:first-child{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.shop .data{
		width: 100%;
		margin: 0 auto 5% auto;
	}
	.shop .data li:nth-child(1){
		font-size: 15px;
		letter-spacing: 4px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 5%;
	}
	.shop .data li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 1.5% 0;
	}
	.shop .data li:nth-child(3){
		font-size: 12px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		padding: 0 0 0 5%;
	}
	.shop-index{
		width: 90%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto 2% auto;
	}
	.shop-index li{
		width: 47%;
		border: 1px solid #fff;
		box-sizing: border-box;
		padding: 2% 0 0 0;
	}
	.shop-index li .img{
		width: 70%;
		margin: 0 auto;
	}
	.shop-index li .name{
		width: 75%;
		font-size: 17px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		margin: 0 auto 4% auto;
	}
	.shop-index li .title{
		width: 75%;
		font-size: 15px;
        letter-spacing: 4px;
        line-height: 1;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		margin: 0 auto 2% auto;
	}
	.shop-index li .txt{
		width: 75%;
		margin: 0 auto;
		font-size: 12px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
	}
	.shop-index li .btn::after{
		content: "";
		display: inline-block;
		width: 10px;
		height: 10px;
		background-image: url('../coffee_img/plus.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		vertical-align: middle;
		margin: 0 0 0 10px;
		position: relative;
		top: -2px;
	}
	.shop-index li .btn{
		width: 100%;
		display: block;
		font-size: 15px;
		letter-spacing: 1px;
		line-height: 1;
		font-family: "futura-pt", sans-serif;
		font-weight: 600;
		font-style: normal;
		color: #fff;
		text-align: center;
		background: #231815;
		padding: 15px 0;
		margin: 5% 0 0 0;
	}
	.shop .cou{
		font-size: 11px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: center;
	}

	/* modal */
	.modal-overlay{
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.1);
		z-index: 1000;
		align-items: center;
		justify-content: center;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
		backdrop-filter: blur(5px);
		-ms-backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}
	.modal-overlay.is-open{
		opacity: 1;
		pointer-events: auto;
	}
	.modal-inner{
		width: 80%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.modal-window{
		width: 100%;
		height: 80vh;
		background: #ece4d8;
		box-sizing: border-box;
		border: 1px solid #fff;
	}
	.modal-close{
		background: none;
		border: none;
		font-size: 13px;
		letter-spacing: 1px;
		line-height: 1;
		font-family: "futura-pt", sans-serif;
		font-weight: 600;
		font-style: normal;
		color: #fff;
		text-align: center;
		background: #231815;
		cursor: pointer;
		padding: 1% 3%;
	}
	.modal-close::after{
		content: "";
		display: inline-block;
		width: 10px;
		height: 10px;
		background-image: url('../coffee_img/minus.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		vertical-align: middle;
		margin: 0 0 0 10px;
		position: relative;
		top: -1px;
	}
	.modal-wrap{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
	}
	.modal-l{
		width: 50%;
		height: 100%;
		border-right: 1px solid #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.modal-l .img{
		width: 60%;
		margin: 0 auto;
	}
	.modal-l .name{
		width: 75%;
		font-size: 19px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		margin: 0 auto 4% auto;
	}
	.modal-l .title{
		width: 75%;
		font-size: 17px;
        letter-spacing: 6px;
        line-height: 1;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		margin: 0 auto 2% auto;
	}
	.modal-l .txt{
		width: 75%;
		margin: 0 auto;
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding-bottom: 5%;
	}
	.modal-r{
		width: 50%;
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		position: relative;
	}
	.scroll-hint{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 26px;
		height: 40px;
		border: 1px solid #231815;
		border-radius: 13px;
		opacity: 0;
		pointer-events: none;
		z-index: 1;
	}
	.scroll-hint span{
		display: block;
		width: 4px;
		height: 4px;
		background: #231815;
		border-radius: 50%;
		margin: 6px auto 0;
		animation: scrollDot 1s ease-in-out infinite;
	}
	.modal-overlay.is-open .scroll-hint{
		animation: scrollHintFade 4s ease forwards;
	}
	@keyframes scrollDot {
		0%   { transform: translateY(0); opacity: 1; }
		100% { transform: translateY(12px); opacity: 0; }
	}
	@keyframes scrollHintFade {
		0%   { opacity: 0; }
		20%  { opacity: 1; }
		70%  { opacity: 1; }
		100% { opacity: 0; }
	}
	.shop-list{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.shop-list li{
		width: 50%;
		box-sizing: border-box;
		padding: 9% 0;
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
	}
	.shop-list li:nth-child(2n){
		border-right: 1px solid #fff;
	}
	.shop-list li:last-child,
	.shop-list li:nth-last-child(2):nth-child(odd){
		border-bottom: 1px solid #fff;
	}
	.shop-list .shopname{
		width: max-content;
        font-size: 13px;
        letter-spacing: 3px;
        line-height: 1;
        font-family: "kozuka-gothic-pr6n", sans-serif;
        font-weight: 600;
        font-style: normal;
		margin: 0 auto 10% auto;
	}
	.shop-list .shopname span{
        letter-spacing: 1px;
	}
	.shop-list li .sns-box{
		width: 70%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}
	.shop-list li .sns-box a{
		width: 49%;
		display: block;
		box-sizing: border-box;
		padding: 0 18%;
	}
	.shop-list li .sns-box .line{
		width: 1px;
		align-self: stretch;
		background: #fff;
	}

	/* Coffee_Beans */
	.coffee_beans{
		width: 90%;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto;
		padding: 0 0 3% 0;
        border-bottom: 1px solid #fff;
	}
	.coffee_beans .img{
		width: 50%;
		background: #d8cdb8;
		box-sizing: border-box;
	}
	.coffee_beans .data{
		width: 50%;
		padding: 5% 0 0 0;
		position: relative;
	}
	.coffee_beans .data .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 7% 10%;
	}
	.coffee_beans .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.coffee_beans .data .data-txt{
		width: 85%;
		margin: 0 0 5% 0;
	}
	.coffee_beans .data .data-txt li:nth-child(1){
		font-size: 15px;
		letter-spacing: 4px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 12%;
	}
	.coffee_beans .data .data-txt li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 4% 0;
	}
	.coffee_beans .data .data-txt li:nth-child(3){
		font-size: 12px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 12%;
	}
	.coffee_data{
		width: 100%;
		background: #d8cdb8;
		position: absolute;
		left: 1px;
		bottom: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 2% 0;
	}
	.coffee_data::after{
		content: "";
		position: absolute;
		left: 55%;
		top: 0;
		height: 100%;
		width: 1px;
		background: #fff;
	}
	.coffee_data-l{
		width: 55%;
	}
	.coffee_data-l .type{
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #fff;
		font-size: 12px;
        letter-spacing: 1px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		padding: 3% 0;
	}
	.coffee_data-l .type li:nth-child(1){
		width: 40%;
		box-sizing: border-box;
		padding: 0 0 0 10%;
		display: flex;
		justify-content: space-between;
	}
	.coffee_data-l .type li:nth-child(1) span{
		margin-left: auto;
	}
	.coffee_data-l .type li:nth-child(2){
		width: 55%;
	}
	.coffee_data-l .type-list{
		width: 80%;
		margin: 0 auto;
		padding: 5% 0 5% 0;
	}
	.coffee_data-l .type-list li{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 0 5% 0;
	}
	.coffee_data-l .type-list li:last-child{
		margin: 0 0 0 0;
	}
	.coffee_data-l .type-list li .title{
		width: 30%;
		background: #fff;
		font-size: 10px;
        letter-spacing: 1px;
        line-height: 3em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		border-radius: 100px;
		text-align: center;
	}
	.coffee_data-l .type-list li .graph{
		width: 60%;
		line-height: 0;
		position: relative;
	}
	.coffee_data-l .type-list li .graph span{
		width: 10px;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%) rotate(-720deg);
		transition: left 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.coffee_data-l .type-list li.active .graph span{
		left: 50%;
		transform: translate(-50%, -50%) rotate(0deg);
	}
	.coffee_data-l .type-list li:nth-child(2) .graph span{ transition-delay: 0.1s; }
	.coffee_data-l .type-list li:nth-child(3) .graph span{ transition-delay: 0.2s; }
	.coffee_data-l .type-list li:nth-child(4) .graph span{ transition-delay: 0.3s; }
	.coffee_data-l .type-list li:nth-child(5) .graph span{ transition-delay: 0.4s; }
	.coffee_data-r{
		width: 45%;
	}
	.coffee_data-r .txt{
		width: 85%;
		font-size: 12px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		text-align: justify;
		margin: 0 0 0 15%;
	}
	.coffee_data-r .line{
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 5% 0 5% 15%;
	}

	/* Our_Initiatives */
	.our_initiatives{
		width: 90%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 0 auto 3% auto;
		padding: 0 0 0% 0;
		border-bottom: 1px solid #fff;
		position: relative;
	}
	.our_initiatives::after{
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		height: 100%;
		width: 1px;
		background: #fff;
	}
	.our_initiatives .img{
		width: 50%;
		box-sizing: border-box;
		padding: 3% 3%;
	}
	.our_initiatives .data{
		width: 50%;
		padding: 5% 0 0 0;
	}
	.our_initiatives .data .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 10% 10%;
	}
	.our_initiatives .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.our_initiatives .data .main-title{
		width: 100%;
		font-size: 15px;
        letter-spacing: 4px;
		line-height: 1;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		padding: 3% 0 3% 10%;
		margin: 0 0 5% 0;
		box-sizing: border-box;
	}
	.our_initiatives .data .main-title span{
		letter-spacing: 1px;
	}
	.our_initiatives .data .slide-box{
		width: 90%;
		margin: 0 0 7% 0;
		overflow: hidden;
	}
	.our_initiatives .data .slide-box .slick{
		width: 82%;
		margin-left: 18%;
	}
	.our_initiatives .data .slide-box .slick-list{
		overflow: visible;
		margin-right: -40px;
	}
	.our_initiatives .data .slide-box .slick-slide{
		margin-right: 40px;
	}
	.our_initiatives .data .data-txt{
		width: 85%;
		margin: 0 0 5% 0;
	}
	.our_initiatives .data .data-txt li:nth-child(1){
		font-size: 15px;
		letter-spacing: 4px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 12%;
	}
	.our_initiatives .data .data-txt li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 4% 0;
	}
	.our_initiatives .data .data-txt li:nth-child(3){
		font-size: 12px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 12%;
	}
	.our_initiatives .data .data-txt li:nth-child(3) span{
		width: max-content;
		border-bottom: 1px solid #fff;
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		margin: 5% 0 3% 0;
		display: block;
	}

	/* Event_top */
	.event_top{
		width: 100%;
		padding: 5% 0;
        border-bottom: 1px solid #fff;
		position: relative;
		overflow: hidden;
		z-index: 10;
	}
	.event_top .bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../coffee_img/event_top-img01.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		z-index: 0;
	}
	.event_top_con{
		width: 80%;
		position: relative;
		display: flex;
		justify-content: flex-start;
		z-index: 80;
		background: #ece4d8;
		margin: 0 auto;
	}
	.event_top_con .img{
		width: 50%;
		overflow: hidden;
	}
	.event_top_con .data{
		width: 50%;
		position: relative;
	}
	.event_top_con .data-in{
		width: 70%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.event_top_con .data-in .title{
		font-size: 15px;
        letter-spacing: 4px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
		white-space: nowrap;
		margin: 0 0 7% 0;
	}
	.event_top_con .data-in .txt{
		font-size: 12px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
        text-align: justify;
	}
	.event_top_con .btn{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
        display: block;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 1;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: #231815;
        padding: 15px 0;
        margin: 5% 0 0 0;
	}
	.event_top_con .btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/plus.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }

	/* event */
	.event{
		width: 90%;
		margin: 0 auto;
		padding: 0 0 5% 0;
	}
	.event-box{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		position: relative;
	}
	.event-box .img{
		width: 66.67%;
		box-sizing: border-box;
        padding: 3% 3%;
	}
	.event-box::after {
        content: "";
        position: absolute;
        left: 33.33%;
        top: 0;
        height: 100%;
        width: 1px;
        background: #fff;
    }
	.event-box .data{
		width: 33.33%;
		padding: 3% 0 0 0;
	}
	.event-box .data .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 7% 10%;
	}
	.event-box .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.event-box .data .num{
		width: 15%;
		margin: 0 0 15% 10%;
	}
	.event-box .data .data-txt{
		width: 90%;
		margin: 0 0 5% 0;
	}
	.event-box .data .data-txt li:nth-child(1){
		font-size: 15px;
		letter-spacing: 4px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 12%;
	}
	.event-box .data .data-txt li:nth-child(1) span{
		letter-spacing: 2px;
	}
	.event-box .data .data-txt li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 4% 0;
	}
	.event-box .data .data-txt li:nth-child(3){
		font-size: 12px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 12%;
	}
	.event-box .data .data-txt li:nth-child(3) span{
		font-size: 13px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		display: block;
	}
	.event-box .data .data-txt li:nth-child(3) .name{
		text-align: right;
		margin: 5% 0 0 0;
	}
	.event-data{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	.event-data li{
		width: 33.33%;
	}
	.event-data li:nth-child(2){
		border-left: 1px solid #fff;
		border-right: 1px solid #fff;
	}
	.event-data li{
		width: 33.33%;
		display: flex;
		justify-content: flex-start;
	}
	.event-data li .title-box{
		width: 35%;
		border-right: 1px solid #fff;
		font-size: 12px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
		box-sizing: border-box;
		text-align: center;
		padding: 5% 5%;
	}
	.event-data li .event-data-box{
		width: 65%;
		box-sizing: border-box;
		padding: 5% 5%;
	}
	.event-data li .event-data-box .title{
		font-size: 13px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
	}
	.event-data li .event-data-box .title span{
        font-size: 9px;
        letter-spacing: 2px;
        line-height: 2.5em;
	}
	.event-data li .event-data-box .txt{
		font-size: 11px;
        letter-spacing: 1px;
        line-height: 2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
	}
	.event .btn{
		width: 40%;
        display: block;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 1;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: #231815;
        padding: 15px 0;
        margin: 3% auto 1% auto;
	}
	.event .btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/target_blank.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }
	.event .cou{
		font-size: 11px;
        letter-spacing: 1px;
        line-height: 2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		text-align: center;
	}

	/* brand */
	.brand{
		width: 100%;
		margin: 0 auto;
		padding: 5% 0 10% 0;
		background: #fff;
		display: flex;
		justify-content: flex-start;
	}
	.brand .img{
		width: 60%;
		box-sizing: border-box;
		padding: 0 5% 0 0;
	}
	.brand .data{
		width: 40%;
	}
	.brand .data .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 7% 15%;
	}
	.brand .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.brand .data .main-title {
        width: 100%;
        font-size: 15px;
        letter-spacing: 4px;
        line-height: 1;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        padding: 3% 0 3% 15%;
        margin: 0 0 5% 0;
        box-sizing: border-box;
    }
	.brand .data .txt{
		width: 70%;
        font-size: 12px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
        text-align: justify;
        margin: 0 0 10% 15%;
	}
	.brand .data .btn{
		width: 50%;
        display: block;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 1;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: #231815;
        padding: 15px 0;
		margin: 0 0 0 15%;
	}
	.brand .data .btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/target_blank.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }

	.footer{
		width: 100%;
        padding: 0 0 3% 0;
		background: #fff;
	}
	.footer .logo{
		width: 15%;
        margin: 0 auto 2% auto;
	}
	.footer .icon{
		display: block;
        width: 30px;
        line-height: 0;
        margin: 0 auto 2% auto;
	}
	.footer .copy{
		width: 100%;
        text-align: center;
        font-size: 11px;
        letter-spacing: 1px;
	}

	/* fix-btn */
	.fix-btn{
		width: max-content;
        display: block;
        font-size: 12px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #231815;
        text-align: center;
        background: #fff;
		border: 1px solid #231815;
        padding: 10px 3%;
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 999;
		transform: translateY(100%);
		transition: transform 0.4s ease;
	}
	.fix-btn.is-visible{
		transform: translateY(0);
	}
	.fix-btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/plus2.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }

}
/* タブレット ------------------------------------------------------*/
@media screen and (min-width: 768px)  and (max-width: 1024px) {
	.sp-on{
		display: none !important;
	}
	.hedear{
		width: 100%;
		height: 60vh;
		position: relative;
	}
	.hedear .line{
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 2%;
		background: #fff;
	}
	.hedear .mv-img{
		width: 45%;
        position: absolute;
        top: 57%;
        left: 57%;
        transform: translate(-50%, -50%);
	}
	.hedear .mv-title{
		width: 50%;
        position: absolute;
        right: 5%;
        bottom: 7%;
	}
	.hedear .mv-sub-title{
		width: max-content;
        position: absolute;
        top: 10%;
		left: 2%;
	}
	.hedear .mv-sub-title li:nth-child(1){
		font-size: 17px;
		letter-spacing: 6px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 15%;
		white-space: nowrap;
	}
	.hedear .mv-sub-title li:nth-child(1) span{
		letter-spacing: 1px;
	}
	.hedear .mv-sub-title li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 5% 0;
	}
	.hedear .mv-sub-title li:nth-child(3){
		font-size: 13px;
		letter-spacing: 4px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		padding: 0 0 0 15%;
		white-space: nowrap;
	}
	.hedear .mv-nav{
		position: absolute;
		left: 8%;
		bottom: 7%;
	}
	.hedear .mv-nav li{
		margin: 0 0 10% 0;
	}
	.hedear .mv-nav li a{
		font-size: 13px;
		line-height: 0;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
	}
	.hedear .mv-nav li a .h-txt{
		display: inline-block;
		transition: transform 0.4s ease;
	}
	.hedear .mv-nav li a:hover .h-txt{
		transform: translateX(18px);
	}
	.hedear .mv-nav li a span:not(.h-txt){
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 50%;
		left: 0;
		opacity: 0;
		transform: translateY(-50%) translateX(-12px) rotate(-360deg);
		transition: opacity 0.4s ease, transform 0.4s ease;
	}
	.hedear .mv-nav li a:hover span:not(.h-txt){
		opacity: 1;
		transform: translateY(-50%) translateX(0) rotate(0deg);
	}

	/* wrap */
	.wrap{
		width: 100%;
		position: relative;
		margin: 0 auto 0% auto;
	}
	.wrap .line00{
		width: 96%;
		height: 1px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: #fff;
	}
	.wrap .line01{
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 2%;
		background: #fff;
	}
	.wrap .line02{
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 2%;
		background: #fff;
	}

	/* shop */
	.shop{
		width: 96%;
		margin: 0 auto;
		padding: 5% 0 5% 0;
		border-bottom: 1px solid #fff;
	}
	.shop .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 3% 5%;
	}
	.shop .index span:first-child{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.shop .data{
		width: 96%;
		margin: 0 0 5% 0;
	}
	.shop .data li:nth-child(1){
		font-size: 15px;
		letter-spacing: 4px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 5%;
	}
	.shop .data li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 1.5% 0;
	}
	.shop .data li:nth-child(3){
		font-size: 12px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		padding: 0 0 0 5%;
	}
	.shop-index{
		width: 95%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto 2% auto;
	}
	.shop-index li{
		width: 49%;
		border: 1px solid #fff;
		box-sizing: border-box;
		padding: 2% 0 0 0;
	}
	.shop-index li .img{
		width: 70%;
		margin: 0 auto;
	}
	.shop-index li .name{
		width: 80%;
		font-size: 17px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		margin: 0 auto 4% auto;
	}
	.shop-index li .title{
		width: 80%;
		font-size: 15px;
        letter-spacing: 4px;
        line-height: 1;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		margin: 0 auto 2% auto;
	}
	.shop-index li .txt{
		width: 80%;
		margin: 0 auto;
		font-size: 12px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
	}
	.shop-index li .btn::after{
		content: "";
		display: inline-block;
		width: 10px;
		height: 10px;
		background-image: url('../coffee_img/plus.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		vertical-align: middle;
		margin: 0 0 0 10px;
		position: relative;
		top: -2px;
	}
	.shop-index li .btn{
		width: 100%;
		display: block;
		font-size: 15px;
		letter-spacing: 1px;
		line-height: 1;
		font-family: "futura-pt", sans-serif;
		font-weight: 600;
		font-style: normal;
		color: #fff;
		text-align: center;
		background: #231815;
		padding: 20px 0;
		margin: 5% 0 0 0;
	}
	.shop .cou{
		font-size: 11px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: center;
	}

	/* modal */
	.modal-overlay{
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.1);
		z-index: 1000;
		align-items: center;
		justify-content: center;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
		backdrop-filter: blur(5px);
		-ms-backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}
	.modal-overlay.is-open{
		opacity: 1;
		pointer-events: auto;
	}
	.modal-inner{
		width: 90%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.modal-window{
		width: 100%;
		height: 45vh;
		background: #ece4d8;
		box-sizing: border-box;
		border: 1px solid #fff;
	}
	.modal-close{
		background: none;
		border: none;
		font-size: 13px;
		letter-spacing: 1px;
		line-height: 1;
		font-family: "futura-pt", sans-serif;
		font-weight: 600;
		font-style: normal;
		color: #fff;
		text-align: center;
		background: #231815;
		cursor: pointer;
		padding: 1.5% 5%;
	}
	.modal-close::after{
		content: "";
		display: inline-block;
		width: 10px;
		height: 10px;
		background-image: url('../coffee_img/minus.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		vertical-align: middle;
		margin: 0 0 0 10px;
		position: relative;
		top: -1px;
	}
	.modal-wrap{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
	}
	.modal-l{
		width: 50%;
		height: 100%;
		border-right: 1px solid #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.modal-l .img{
		width: 60%;
		margin: 0 auto;
	}
	.modal-l .name{
		width: 75%;
		font-size: 19px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		margin: 0 auto 4% auto;
	}
	.modal-l .title{
		width: 75%;
		font-size: 17px;
        letter-spacing: 6px;
        line-height: 1;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		margin: 0 auto 2% auto;
	}
	.modal-l .txt{
		width: 75%;
		margin: 0 auto;
		font-size: 12px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding-bottom: 5%;
	}
	.modal-r{
		width: 50%;
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		position: relative;
	}
	.scroll-hint{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 26px;
		height: 40px;
		border: 1px solid #231815;
		border-radius: 13px;
		opacity: 0;
		pointer-events: none;
		z-index: 1;
	}
	.scroll-hint span{
		display: block;
		width: 4px;
		height: 4px;
		background: #231815;
		border-radius: 50%;
		margin: 6px auto 0;
		animation: scrollDot 1s ease-in-out infinite;
	}
	.modal-overlay.is-open .scroll-hint{
		animation: scrollHintFade 4s ease forwards;
	}
	@keyframes scrollDot {
		0%   { transform: translateY(0); opacity: 1; }
		100% { transform: translateY(12px); opacity: 0; }
	}
	@keyframes scrollHintFade {
		0%   { opacity: 0; }
		20%  { opacity: 1; }
		70%  { opacity: 1; }
		100% { opacity: 0; }
	}
	.shop-list{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.shop-list li{
		width: 50%;
		box-sizing: border-box;
		padding: 9% 0;
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
	}
	.shop-list li:nth-child(2n){
		border-right: 1px solid #fff;
	}
	.shop-list li:last-child,
	.shop-list li:nth-last-child(2):nth-child(odd){
		border-bottom: 1px solid #fff;
	}
	.shop-list .shopname{
		width: max-content;
        font-size: 13px;
        letter-spacing: 3px;
        line-height: 1;
        font-family: "kozuka-gothic-pr6n", sans-serif;
        font-weight: 600;
        font-style: normal;
		margin: 0 auto 10% auto;
	}
	.shop-list .shopname span{
        letter-spacing: 1px;
	}
	.shop-list li .sns-box{
		width: 70%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}
	.shop-list li .sns-box a{
		width: 49%;
		display: block;
		box-sizing: border-box;
		padding: 0 18%;
	}
	.shop-list li .sns-box .line{
		width: 1px;
		align-self: stretch;
		background: #fff;
	}

	/* Coffee_Beans */
	.coffee_beans{
		width: 96%;
		display: flex;
		justify-content: flex-start;
		margin: 0 auto;
		padding: 0 0 3% 0;
        border-bottom: 1px solid #fff;
	}
	.coffee_beans .img{
		width: 45%;
		background: #d8cdb8;
		box-sizing: border-box;
		padding: 7% 0;
	}
	.coffee_beans .data{
		width: 55%;
		padding: 5% 0 0 0;
		position: relative;
	}
	.coffee_beans .data .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 7% 10%;
	}
	.coffee_beans .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.coffee_beans .data .data-txt{
		width: 90%;
		margin: 0 0 5% 0;
	}
	.coffee_beans .data .data-txt li:nth-child(1){
		font-size: 15px;
		letter-spacing: 4px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 12%;
	}
	.coffee_beans .data .data-txt li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 4% 0;
	}
	.coffee_beans .data .data-txt li:nth-child(3){
		font-size: 12px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 12%;
	}
	.coffee_data{
		width: 100%;
		background: #d8cdb8;
		position: absolute;
		left: 1px;
		bottom: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 2% 0;
	}
	.coffee_data::after{
		content: "";
		position: absolute;
		left: 55%;
		top: 0;
		height: 100%;
		width: 1px;
		background: #fff;
	}
	.coffee_data-l{
		width: 55%;
	}
	.coffee_data-l .type{
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #fff;
		font-size: 12px;
        letter-spacing: 1px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		padding: 3% 0;
	}
	.coffee_data-l .type li:nth-child(1){
		width: 40%;
		box-sizing: border-box;
		padding: 0 0 0 10%;
		display: flex;
		justify-content: space-between;
	}
	.coffee_data-l .type li:nth-child(1) span{
		margin-left: auto;
	}
	.coffee_data-l .type li:nth-child(2){
		width: 55%;
	}
	.coffee_data-l .type-list{
		width: 80%;
		margin: 0 auto;
		padding: 5% 0 5% 0;
	}
	.coffee_data-l .type-list li{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 0 5% 0;
	}
	.coffee_data-l .type-list li:last-child{
		margin: 0 0 0 0;
	}
	.coffee_data-l .type-list li .title{
		width: 30%;
		background: #fff;
		font-size: 10px;
        letter-spacing: 1px;
        line-height: 3em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		border-radius: 100px;
		text-align: center;
	}
	.coffee_data-l .type-list li .graph{
		width: 60%;
		line-height: 0;
		position: relative;
	}
	.coffee_data-l .type-list li .graph span{
		width: 10px;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%) rotate(-720deg);
		transition: left 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.coffee_data-l .type-list li.active .graph span{
		left: 50%;
		transform: translate(-50%, -50%) rotate(0deg);
	}
	.coffee_data-l .type-list li:nth-child(2) .graph span{ transition-delay: 0.1s; }
	.coffee_data-l .type-list li:nth-child(3) .graph span{ transition-delay: 0.2s; }
	.coffee_data-l .type-list li:nth-child(4) .graph span{ transition-delay: 0.3s; }
	.coffee_data-l .type-list li:nth-child(5) .graph span{ transition-delay: 0.4s; }
	.coffee_data-r{
		width: 45%;
	}
	.coffee_data-r .txt{
		width: 85%;
		font-size: 12px;
        letter-spacing: 1px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		text-align: justify;
		margin: 0 0 0 15%;
	}
	.coffee_data-r .line{
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 5% 0 5% 15%;
	}

	/* Our_Initiatives */
	.our_initiatives{
		width: 96%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 0 auto 3% auto;
		padding: 0 0 0% 0;
		border-bottom: 1px solid #fff;
		position: relative;
	}
	.our_initiatives::after{
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		height: 100%;
		width: 1px;
		background: #fff;
	}
	.our_initiatives .img{
		width: 50%;
		box-sizing: border-box;
		padding: 3% 3%;
	}
	.our_initiatives .data{
		width: 50%;
		padding: 5% 0 0 0;
	}
	.our_initiatives .data .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 10% 10%;
	}
	.our_initiatives .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.our_initiatives .data .main-title{
		width: 100%;
		font-size: 15px;
        letter-spacing: 4px;
		line-height: 1;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		padding: 3% 0 3% 10%;
		margin: 0 0 5% 0;
		box-sizing: border-box;
	}
	.our_initiatives .data .main-title span{
		letter-spacing: 1px;
	}
	.our_initiatives .data .slide-box{
		width: 90%;
		margin: 0 0 7% 0;
		overflow: hidden;
	}
	.our_initiatives .data .slide-box .slick{
		width: 82%;
		margin-left: 18%;
	}
	.our_initiatives .data .slide-box .slick-list{
		overflow: visible;
		margin-right: -40px;
	}
	.our_initiatives .data .slide-box .slick-slide{
		margin-right: 40px;
	}
	.our_initiatives .data .data-txt{
		width: 90%;
		margin: 0 0 5% 0;
	}
	.our_initiatives .data .data-txt li:nth-child(1){
		font-size: 15px;
		letter-spacing: 4px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 12%;
	}
	.our_initiatives .data .data-txt li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 4% 0;
	}
	.our_initiatives .data .data-txt li:nth-child(3){
		font-size: 12px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 12%;
	}
	.our_initiatives .data .data-txt li:nth-child(3) span{
		width: max-content;
		border-bottom: 1px solid #fff;
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		margin: 5% 0 3% 0;
		display: block;
	}

	/* Event_top */
	.event_top{
		width: 100%;
		padding: 5% 0;
        border-bottom: 1px solid #fff;
		position: relative;
		overflow: hidden;
		z-index: 10;
	}
	.event_top .bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../coffee_img/event_top-img01.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		z-index: 0;
	}
	.event_top_con{
		width: 95%;
		position: relative;
		display: flex;
		justify-content: flex-start;
		z-index: 80;
		background: #ece4d8;
		margin: 0 auto;
	}
	.event_top_con .img{
		width: 50%;
		overflow: hidden;
	}
	.event_top_con .data{
		width: 50%;
		position: relative;
	}
	.event_top_con .data-in{
		width: 70%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.event_top_con .data-in .title{
		font-size: 15px;
        letter-spacing: 4px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
		white-space: nowrap;
		margin: 0 0 7% 0;
	}
	.event_top_con .data-in .txt{
		font-size: 12px;
        letter-spacing: 1px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
        text-align: justify;
	}
	.event_top_con .btn{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
        display: block;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 1;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: #231815;
        padding: 20px 0;
        margin: 5% 0 0 0;
	}
	.event_top_con .btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/plus.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }

	/* event */
	.event{
		width: 96%;
		margin: 0 auto;
		padding: 0 0 5% 0;
	}
	.event-box{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		position: relative;
	}
	.event-box .img{
		width: 66.67%;
		box-sizing: border-box;
        padding: 3% 3%;
	}
	.event-box::after {
        content: "";
        position: absolute;
        left: 33.33%;
        top: 0;
        height: 100%;
        width: 1px;
        background: #fff;
    }
	.event-box .data{
		width: 33.33%;
		padding: 3% 0 0 0;
	}
	.event-box .data .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 7% 10%;
	}
	.event-box .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.event-box .data .num{
		width: 15%;
		margin: 0 0 15% 10%;
	}
	.event-box .data .data-txt{
		width: 90%;
		margin: 0 0 5% 0;
	}
	.event-box .data .data-txt li:nth-child(1){
		font-size: 15px;
		letter-spacing: 4px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 12%;
	}
	.event-box .data .data-txt li:nth-child(1) span{
		letter-spacing: 2px;
	}
	.event-box .data .data-txt li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 4% 0;
	}
	.event-box .data .data-txt li:nth-child(3){
		font-size: 12px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 12%;
	}
	.event-box .data .data-txt li:nth-child(3) span{
		font-size: 12px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		display: block;
	}
	.event-box .data .data-txt li:nth-child(3) .name{
		text-align: right;
		margin: 5% 0 0 0;
	}
	.event-data{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	.event-data li{
		width: 33.33%;
	}
	.event-data li:nth-child(2){
		border-left: 1px solid #fff;
		border-right: 1px solid #fff;
	}
	.event-data li{
		width: 33.33%;
		display: flex;
		justify-content: flex-start;
	}
	.event-data li .title-box{
		width: 35%;
		border-right: 1px solid #fff;
		font-size: 12px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
		box-sizing: border-box;
		text-align: center;
		padding: 5% 5%;
	}
	.event-data li .event-data-box{
		width: 65%;
		box-sizing: border-box;
		padding: 5% 5%;
	}
	.event-data li .event-data-box .title{
		font-size: 13px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
	}
	.event-data li .event-data-box .title span{
        font-size: 9px;
        letter-spacing: 2px;
        line-height: 2.5em;
	}
	.event-data li .event-data-box .txt{
		font-size: 11px;
        letter-spacing: 1px;
        line-height: 2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
	}
	.event .btn{
		width: 40%;
        display: block;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 1;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: #231815;
        padding: 20px 0;
        margin: 3% auto 1% auto;
	}
	.event .btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/target_blank.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }
	.event .cou{
		font-size: 11px;
        letter-spacing: 1px;
        line-height: 2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		text-align: center;
	}

	/* brand */
	.brand{
		width: 100%;
		margin: 0 auto;
		padding: 5% 0 10% 0;
		background: #fff;
		display: flex;
		justify-content: flex-start;
	}
	.brand .img{
		width: 60%;
		box-sizing: border-box;
		padding: 0 2% 0 0;
	}
	.brand .data{
		width: 40%;
	}
	.brand .data .index{
		font-size: 15px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 7% 10%;
	}
	.brand .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 4px;
		left: 0;
	}
	.brand .data .main-title {
        width: 100%;
        font-size: 15px;
        letter-spacing: 4px;
        line-height: 1;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        padding: 3% 0 3% 10%;
        margin: 0 0 5% 0;
        box-sizing: border-box;
    }
	.brand .data .txt{
		width: 70%;
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
        text-align: justify;
        margin: 0 0 10% 10%;
	}
	.brand .data .btn{
		width: 70%;
        display: block;
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 1;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: #231815;
        padding: 20px 0;
		margin: 0 0 0 10%;
	}
	.brand .data .btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/target_blank.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }

	.footer{
		width: 100%;
        padding: 0 0 3% 0;
		background: #fff;
	}
	.footer .logo{
		width: 15%;
        margin: 0 auto 2% auto;
	}
	.footer .icon{
		display: block;
        width: 30px;
        line-height: 0;
        margin: 0 auto 2% auto;
	}
	.footer .copy{
		width: 100%;
        text-align: center;
        font-size: 11px;
        letter-spacing: 1px;
	}

	/* fix-btn */
	.fix-btn{
		width: max-content;
        display: block;
        font-size: 14px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #231815;
        text-align: center;
        background: #fff;
		border: 1px solid #231815;
        padding: 10px 5%;
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 999;
		transform: translateY(100%);
		transition: transform 0.4s ease;
	}
	.fix-btn.is-visible{
		transform: translateY(0);
	}
	.fix-btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/plus2.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }

}
/* スマホ ------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.pc-on{
		display: none !important;
	}
	.hedear{
		width: 100%;
		height: 90vh;
		overflow: hidden;
		position: relative;
	}
	.hedear .line{
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 2%;
		background: #fff;
	}
	.hedear .mv-img{
		width: 100%;
        position: absolute;
        top: 64%;
        left: 69%;
        transform: translate(-50%, -50%);
	}
	.hedear .mv-title{
		width: 80%;
        position: absolute;
        right: 0;
		left: 0;
		margin: 0 auto;
        bottom: 7%;
	}
	.hedear .mv-sub-title{
		width: 96%;
        position: absolute;
        top: 10%;
		left: 2%;
		overflow: hidden;
	}
	.hedear .mv-sub-title li:nth-child(1){
		font-size: 18px;
		letter-spacing: 4px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 7.5%;
		white-space: nowrap;
	}
	.hedear .mv-sub-title li:nth-child(1) span{
		letter-spacing: 1px;
	}
	.hedear .mv-sub-title li:nth-child(2){
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 5% 0;
	}
	.hedear .mv-sub-title li:nth-child(3){
		font-size: 12px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		padding: 0 0 0 7.5%;
		white-space: nowrap;
	}
	.hedear .mv-nav{
		position: absolute;
		left: 8%;
		bottom: 7%;
	}
	.hedear .mv-nav li{
		margin: 0 0 10% 0;
	}
	.hedear .mv-nav li a{
		font-size: 12px;
		line-height: 0;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
	}
	.hedear .mv-nav li a .h-txt{
		display: inline-block;
		transition: transform 0.4s ease;
	}
	.hedear .mv-nav li a:hover .h-txt{
		transform: translateX(18px);
	}
	.hedear .mv-nav li a span:not(.h-txt){
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 50%;
		left: 0;
		opacity: 0;
		transform: translateY(-50%) translateX(-12px) rotate(-360deg);
		transition: opacity 0.4s ease, transform 0.4s ease;
	}
	.hedear .mv-nav li a:hover span:not(.h-txt){
		opacity: 1;
		transform: translateY(-50%) translateX(0) rotate(0deg);
	}

	/* wrap */
	.wrap{
		width: 100%;
		position: relative;
		margin: 0 auto 0% auto;
	}
	.wrap .line00{
		width: 96%;
		height: 1px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		background: #fff;
	}
	.wrap .line01{
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 2%;
		background: #fff;
	}
	.wrap .line02{
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 2%;
		background: #fff;
	}

	/* shop */
	.shop{
		width: 96%;
		margin: 0 auto;
		padding: 15% 0 15% 0;
		border-bottom: 1px solid #fff;
	}
	.shop .index{
		font-size: 13px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		position: relative;
		padding: 0 0 0 18px;
		margin: 0 0 5% 7.5%;
	}
	.shop .index span:first-child{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 2px;
		left: 0;
	}
	.shop .data{
		width: 92.5%;
		margin: 0 0 7% 0;
	}
	.shop .data li:nth-child(1){
		font-size: 16px;
		letter-spacing: 3px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 7.5%;
	}
	.shop .data li:nth-child(2){
		width: 80px;
		height: 1px;
		background: #fff;
		margin: 5% 0;
	}
	.shop .data li:nth-child(3){
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 7.5%;
	}
	.shop .data li:nth-child(3) br{
		display: none;
	}
	.shop-index{
		width: 90%;
		margin: 0 auto 2% auto;
	}
	.shop-index li{
		width: 100%;
		border: 1px solid #fff;
		box-sizing: border-box;
		padding: 2% 0 0 0;
	}
	.shop-index li:first-child{
		margin: 0 0 5% 0;
	}
	.shop-index li .img{
		width: 70%;
		margin: 0 auto;
	}
	.shop-index li .name{
		width: 85%;
		font-size: 16px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		margin: 0 auto 7% auto;
	}
	.shop-index li .title{
		width: 85%;
		font-size: 16px;
        letter-spacing: 3px;
        line-height: 1;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		margin: 0 auto 5% auto;
	}
	.shop-index li .txt{
		width: 85%;
		margin: 0 auto;
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
	}
	.shop-index li .btn::after{
		content: "";
		display: inline-block;
		width: 10px;
		height: 10px;
		background-image: url('../coffee_img/plus.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		vertical-align: middle;
		margin: 0 0 0 10px;
		position: relative;
		top: -2px;
	}
	.shop-index li .btn{
		width: 100%;
		display: block;
		font-size: 12px;
		letter-spacing: 1px;
		line-height: 1;
		font-family: "futura-pt", sans-serif;
		font-weight: 600;
		font-style: normal;
		color: #fff;
		text-align: center;
		background: #231815;
		padding: 15px 0;
		margin: 7% 0 0 0;
	}
	.shop .cou{
		font-size: 10px;
		letter-spacing: 1px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: center;
	}

	/* modal */
	.modal-overlay{
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.1);
		z-index: 1000;
		align-items: center;
		justify-content: center;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
		backdrop-filter: blur(5px);
		-ms-backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}
	.modal-overlay.is-open{
		opacity: 1;
		pointer-events: auto;
	}
	.modal-inner{
		width: 90%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.modal-window{
		width: 100%;
		height: 80vh;
		background: #ece4d8;
		box-sizing: border-box;
		border: 1px solid #fff;
	}
	.modal-close{
		background: none;
		border: none;
		font-size: 12px;
		letter-spacing: 1px;
		line-height: 1;
		font-family: "futura-pt", sans-serif;
		font-weight: 600;
		font-style: normal;
		color: #fff;
		text-align: center;
		background: #231815;
		cursor: pointer;
		padding: 15px 0;
		width: 100%;
	}
	.modal-close::after{
		content: "";
		display: inline-block;
		width: 10px;
		height: 10px;
		background-image: url('../coffee_img/minus.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		vertical-align: middle;
		margin: 0 0 0 10px;
		position: relative;
		top: -1px;
	}
	.modal-wrap{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.modal-l{
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 0 10% 0;
		flex-shrink: 0;
	}
	.modal-l .img{
		width: 55%;
		margin: 0 auto;
		padding: 10% 0 0 0;
	}
	.modal-l .name{
		width: 85%;
		font-size: 18px;
		line-height: 1;
		font-family: "garamond-premier-pro-caption", serif;
		font-weight: 200;
		font-style: normal;
		margin: 0 auto 7% auto;
	}
	.modal-l .title{
		width: 85%;
		font-size: 16px;
        letter-spacing: 4px;
        line-height: 1;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		margin: 0 auto 5% auto;
	}
	.modal-l .txt{
		width: 85%;
		margin: 0 auto;
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
	}
	.modal-r{
		width: 100%;
		position: relative;
	}
	.scroll-hint{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 26px;
		height: 40px;
		background: #ece4d8;
		border: 1px solid #231815;
		border-radius: 13px;
		opacity: 0;
		pointer-events: none;
		z-index: 1001;
	}
	.scroll-hint span{
		display: block;
		width: 4px;
		height: 4px;
		background: #231815;
		border-radius: 50%;
		margin: 6px auto 0;
		animation: scrollDot 1s ease-in-out infinite;
	}
	.modal-overlay.is-open .scroll-hint{
		animation: scrollHintFade 2s ease forwards;
	}
	@keyframes scrollDot {
		0%   { transform: translateY(0); opacity: 1; }
		100% { transform: translateY(12px); opacity: 0; }
	}
	@keyframes scrollHintFade {
		0%   { opacity: 0; }
		20%  { opacity: 1; }
		70%  { opacity: 1; }
		100% { opacity: 0; }
	}
	.shop-list{
		width: 100%;
	}
	.shop-list li{
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 9% 0;
		border-bottom: 1px solid #fff;
	}
	.shop-list li:last-child{
		border-bottom: none;
	}
	.shop-list .shopname{
		width: 60%;
        font-size: 11px;
        letter-spacing: 2px;
        line-height: 1;
        font-family: "kozuka-gothic-pr6n", sans-serif;
        font-weight: 600;
        font-style: normal;
		box-sizing: border-box;
		padding: 0 0 0 7.5%;
	}
	.shop-list .shopname span{
        letter-spacing: 1px;
	}
	.shop-list li .sns-box{
		width: 40%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}
	.shop-list li .sns-box a{
		width: 49%;
		display: block;
		box-sizing: border-box;
		padding: 0 18%;
	}
	.shop-list li .sns-box .line{
		width: 1px;
		align-self: stretch;
		background: #fff;
	}

	/* Coffee_Beans */
	.coffee_beans{
		width: 96%;
		margin: 0 auto;
		padding: 0 0 10% 0;
        border-bottom: 1px solid #fff;
	}
	.coffee_beans .img{
		width: 100%;
		background: #d8cdb8;
		box-sizing: border-box;
		margin: 0 0 10% 0;
		padding: 10% 0;
		overflow: hidden;
	}
	.coffee_beans .data{
		width: 100%;
		padding: 15% 0 0 0;
		position: relative;
	}
	.coffee_beans .data .index{
		font-size: 13px;
        line-height: 1;
        font-family: "garamond-premier-pro-caption", serif;
        font-weight: 200;
        font-style: normal;
        position: relative;
        padding: 0 0 0 18px;
        margin: 0 0 7% 5%;
	}
	.coffee_beans .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 2px;
		left: 0;
	}
	.coffee_beans .data .data-txt{
		width: 92.5%;
		margin: 0 0 7% 0;
	}
	.coffee_beans .data .data-txt li:nth-child(1){
		font-size: 16px;
        letter-spacing: 3px;
        line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 7.5%;
	}
	.coffee_beans .data .data-txt li:nth-child(2){
		width: 80px;
		height: 1px;
		background: #fff;
		margin: 5% 0;
	}
	.coffee_beans .data .data-txt li:nth-child(3){
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 7.5%;
	}
	.coffee_data{
		width: 100%;
		background: #d8cdb8;
		padding: 2% 0;
	}
	.coffee_data-l{
		width: 100%;
	}
	.coffee_data-l .type{
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #fff;
		font-size: 11px;
        letter-spacing: 1px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		padding: 3% 0;
	}
	.coffee_data-l .type li:nth-child(1){
		width: 38%;
		box-sizing: border-box;
		padding: 0 0 0 7.5%;
		display: flex;
		justify-content: space-between;
	}
	.coffee_data-l .type li:nth-child(1) span{
		margin-left: auto;
	}
	.coffee_data-l .type li:nth-child(2){
		width: 55%;
	}
	.coffee_data-l .type-list{
		width: 85%;
		margin: 0 auto;
		padding: 5% 0 5% 0;
	}
	.coffee_data-l .type-list li{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 0 5% 0;
	}
	.coffee_data-l .type-list li:last-child{
		margin: 0 0 0 0;
	}
	.coffee_data-l .type-list li .title{
		width: 30%;
		background: #fff;
		font-size: 9px;
        letter-spacing: 1px;
        line-height: 2.2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		border-radius: 100px;
		text-align: center;
	}
	.coffee_data-l .type-list li .graph{
		width: 60%;
		line-height: 0;
		position: relative;
	}
	.coffee_data-l .type-list li .graph span{
		width: 10px;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%) rotate(-720deg);
		transition: left 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.coffee_data-l .type-list li.active .graph span{
		left: 50%;
		transform: translate(-50%, -50%) rotate(0deg);
	}
	.coffee_data-l .type-list li:nth-child(2) .graph span{ transition-delay: 0.1s; }
	.coffee_data-l .type-list li:nth-child(3) .graph span{ transition-delay: 0.2s; }
	.coffee_data-l .type-list li:nth-child(4) .graph span{ transition-delay: 0.3s; }
	.coffee_data-l .type-list li:nth-child(5) .graph span{ transition-delay: 0.4s; }
	.coffee_data-r{
		width: 100%;
		border-top: 1px solid #fff;
		padding: 5% 0;
	}
	.coffee_data-r .txt{
		width: 85%;
		font-size: 13px;
        letter-spacing: 2px;
        line-height: 2.2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		text-align: justify;
		margin: 0 auto 0 auto;
	}
	.coffee_data-r .line{
		width: 120px;
		height: 1px;
		background: #fff;
		margin: 5% 0 5% 7.5%;
	}

	/* Our_Initiatives */
	.our_initiatives{
		width: 96%;
		margin: 0 auto 10% auto;
		padding: 0 0 0% 0;
		border-bottom: 1px solid #fff;
		position: relative;
	}
	.our_initiatives .img{
		width: 100%;
		box-sizing: border-box;
		padding: 0% 5% 5% 5%;
	}
	.our_initiatives .data{
		width: 100%;
		padding: 15% 0 0 0;
	}
	.our_initiatives .data .index{
		font-size: 13px;
        line-height: 1;
        font-family: "garamond-premier-pro-caption", serif;
        font-weight: 200;
        font-style: normal;
        position: relative;
        padding: 0 0 0 18px;
        margin: 0 0 7% 5%;
	}
	.our_initiatives .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 2px;
		left: 0;
	}
	.our_initiatives .data .main-title{
		width: 100%;
		font-size: 16px;
        letter-spacing: 3px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		padding: 5% 0 5% 7.5%;
		margin: 0 0 7% 0;
		box-sizing: border-box;
	}
	.our_initiatives .data .main-title span{
		letter-spacing: 1px;
	}
	.our_initiatives .data .slide-box{
		width: 99.5%;
		margin: 0 0 5% 0;
		overflow: hidden;
	}
	.our_initiatives .data .slide-box .slick{
		width: 91%;
		margin-left: 9%;
	}
	.our_initiatives .data .slide-box .slick-list{
		overflow: visible;
		margin-right: -20px;
	}
	.our_initiatives .data .slide-box .slick-slide{
		margin-right: 20px;
	}
	.our_initiatives .data .data-txt{
		width: 92.5%;
        margin: 0 0 7% 0;
	}
	.our_initiatives .data .data-txt li:nth-child(1){
		font-size: 16px;
		letter-spacing: 3px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 7.5%;
	}
	.our_initiatives .data .data-txt li:nth-child(2){
		width: 80px;
		height: 1px;
		background: #fff;
		margin: 5% 0;
	}
	.our_initiatives .data .data-txt li:nth-child(3){
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 7.5%;
	}
	.our_initiatives .data .data-txt li:nth-child(3) span{
		width: max-content;
		border-bottom: 1px solid #fff;
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		margin: 5% 0 3% 0;
		display: block;
	}

	/* Event_top */
	.event_top{
		width: 100%;
		padding: 10% 0;
        border-bottom: 1px solid #fff;
		position: relative;
		overflow: hidden;
		z-index: 10;
	}
	.event_top .bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../coffee_img/event_top-img01.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-attachment: scroll;
		z-index: 0;
	}
	.event_top_con{
		width: 95%;
		position: relative;
		z-index: 80;
		background: #ece4d8;
		margin: 0 auto;
	}
	.event_top_con .img{
		width: 100%;
		overflow: hidden;
		margin: 0 0 7% 0;
	}
	.event_top_con .data{
		width: 100%;
		position: relative;
	}
	.event_top_con .data-in{
		width: 85%;
		margin: 0 auto;
	}
	.event_top_con .data-in .title{
		font-size: 16px;
        letter-spacing: 3px;
        line-height: 2.2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
		white-space: nowrap;
		margin: 0 0 4% 0;
	}
	.event_top_con .data-in .txt{
		font-size: 13px;
        letter-spacing: 2px;
        line-height: 2.2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
        text-align: justify;
	}
	.event_top_con .data-in .txt br{
		display: none;
	}
	.event_top_con .btn{
		width: 100%;
        display: block;
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 1;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: #231815;
        padding: 15px 0;
        margin: 8% 0 0 0;
	}
	.event_top_con .btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/plus.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }

	/* event */
	.event{
		width: 96%;
		margin: 0 auto;
		padding: 0 0 15% 0;
	}
	.event-box{
		width: 100%;
		position: relative;
	}
	.event-box .img{
		width: 100%;
        box-sizing: border-box;
        padding: 0% 7.5% 7.5% 7.5%;
	}
	.event-box .data{
		width: 100%;
		padding: 15% 0 0 0;
	}
	.event-box .data .index{
		font-size: 13px;
        line-height: 1;
        font-family: "garamond-premier-pro-caption", serif;
        font-weight: 200;
        font-style: normal;
        position: relative;
        padding: 0 0 0 18px;
        margin: 0 0 7% 5%;
	}
	.event-box .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 2px;
		left: 0;
	}
	.event-box .data .num{
		width: 15%;
		margin: 0 0 7% 7%;
	}
	.event-box .data .data-txt{
		width: 92.5%;
		margin: 0 0 5% 0;
	}
	.event-box .data .data-txt li:nth-child(1){
		font-size: 16px;
		letter-spacing: 3px;
		line-height: 2.5em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		padding: 0 0 0 7.5%;
	}
	.event-box .data .data-txt li:nth-child(1) span{
		letter-spacing: 2px;
	}
	.event-box .data .data-txt li:nth-child(2){
		width: 80px;
		height: 1px;
		background: #fff;
		margin: 5% 0;
	}
	.event-box .data .data-txt li:nth-child(3){
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 300;
		font-style: normal;
		text-align: justify;
		padding: 0 0 0 7.5%;
	}
	.event-box .data .data-txt li:nth-child(3) span{
		font-size: 13px;
		letter-spacing: 1px;
		line-height: 2.2em;
		font-family: "source-han-sans-japanese", sans-serif;
		font-weight: 700;
		font-style: normal;
		display: block;
	}
	.event-box .data .data-txt li:nth-child(3) .name{
		text-align: right;
		margin: 5% 0 0 0;
	}
	.event-data{
		width: 100%;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	.event-data li{
		width: 100%;
	}
	.event-data li:nth-child(2){
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	.event-data li{
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}
	.event-data li .title-box{
		width: 33%;
		border-right: 1px solid #fff;
		font-size: 11px;
        letter-spacing: 1px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
		box-sizing: border-box;
		text-align: center;
		padding: 5% 3%;
	}
	.event-data li .event-data-box{
		width: 67%;
		box-sizing: border-box;
		padding: 5% 5%;
	}
	.event-data li .event-data-box .title{
		font-size: 12px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
	}
	.event-data li .event-data-box .title span{
        font-size: 8px;
        letter-spacing: 2px;
        line-height: 2.5em;
	}
	.event-data li .event-data-box .txt{
		font-size: 10px;
        letter-spacing: 1px;
        line-height: 2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
	}
	.event .btn{
		width: 85%;
        display: block;
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 1;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: #231815;
        padding: 15px 0;
        margin: 8% auto 5% auto;
	}
	.event .btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/target_blank.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }
	.event .cou{
		font-size: 9px;
        letter-spacing: 1px;
        line-height: 2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
		text-align: center;
	}

	/* brand */
	.brand{
		width: 100%;
		margin: 0 auto;
		padding: 15% 0 10% 0;
		background: #fff;
		display: flex;
		justify-content: flex-start;
	}
	.brand .img{
		width: 100%;
		margin: 0 auto 5% auto;
	}
	.brand .data{
		width: 100%;
	}
	.brand .data .index{
		font-size: 13px;
        line-height: 1;
        font-family: "garamond-premier-pro-caption", serif;
        font-weight: 200;
        font-style: normal;
        position: relative;
        padding: 0 0 0 18px;
        margin: 0 0 7% 5%;
	}
	.brand .data .index span{
		position: absolute;
		width: 7px;
		line-height: 0;
		top: 2px;
		left: 0;
	}
	.brand .data .main-title {
        width: 100%;
        font-size: 16px;
        letter-spacing: 3px;
        line-height: 1;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 700;
        font-style: normal;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        padding: 5% 0 5% 7.5%;
        margin: 0 0 7% 0;
        box-sizing: border-box;
    }
	.brand .data .txt{
		width: 85%;
        font-size: 13px;
        letter-spacing: 2px;
        line-height: 2.2em;
        font-family: "source-han-sans-japanese", sans-serif;
        font-weight: 300;
        font-style: normal;
        text-align: justify;
        margin: 0 auto 10% auto;
	}
	.brand .data .btn{
		width: 85%;
        display: block;
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 1;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #fff;
        text-align: center;
        background: #231815;
        padding: 15px 0;
        margin: 8% auto 5% auto;
	}
	.brand .data .btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/target_blank.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }

	.footer{
		width: 100%;
        padding: 0 0 20% 0;
		background: #fff;
	}
	.footer .logo{
		width: 50%;
        line-height: 0;
        margin: 0 auto 5% auto;
	}
	.footer .icon{
		display: block;
        width: 30px;
        line-height: 0;
        margin: 0 auto 5% auto;
	}
	.footer .copy{
		width: 100%;
        text-align: center;
        font-size: 7px;
        letter-spacing: 1px;
	}

	/* fix-btn */
	.fix-btn{
		width: 100%;
        display: block;
        font-size: 12px;
        letter-spacing: 2px;
        line-height: 2.5em;
        font-family: "futura-pt", sans-serif;
        font-weight: 600;
        font-style: normal;
        color: #231815;
        text-align: center;
        background: #fff;
		border: 1px solid #231815;
        padding: 10px 0;
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 999;
		transform: translateY(100%);
		transition: transform 0.4s ease;
	}
	.fix-btn.is-visible{
		transform: translateY(0);
	}
	.fix-btn::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(../coffee_img/plus2.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        vertical-align: middle;
        margin: 0 0 0 10px;
        position: relative;
        top: -2px;
    }
}