@charset "UTF-8";

body {
	color: #403100;
	font-family: 'Noto Serif JP', serif;
	background-image: url(img/bg.png);
	background-repeat: repeat;
}

a {
	color: #403100;
	text-decoration: none;
	cursor: pointer;
}

img {
	max-width: 100%;
	vertical-align: bottom;
}

li {
	list-style: none;
}

p {
	line-height: 1.4;
	font-size: 1.125em;
	font-weight: 300;
	letter-spacing: 0.1em;
}


.wrapper {
	width: 100%;
	max-width: 1480px;
	padding: 0 13%;
	margin: 0 auto;
}


.title {
	font-size: 1.875em;
	letter-spacing: 0.1em;
}

/*-------------------------------------------
ローディング
-------------------------------------------*/

.loading {
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	background-color: #EAE7DC;
}

.loading.hide {
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms;
}

.loading .circles-to-rhombuses-spinner {
	position: relative;
	margin: 0 auto;
	top: calc(50% - 20px);
}

@keyframes loading {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


.circles-to-rhombuses-spinner, .circles-to-rhombuses-spinner * {
	box-sizing: border-box;
}

.circles-to-rhombuses-spinner {
	height: 15px;
	width: calc((15px + 15px * 1.125) * 3);
	display: flex;
	align-items: center;
	justify-content: center
}

.circles-to-rhombuses-spinner .circle {
	height: 15px;
	width: 15px;
	margin-left: calc(15px * 1.125);
	transform: rotate(45deg);
	border-radius: 10%;
	border: 3px solid #5F4800;
	overflow: hidden;
	background: transparent;

	animation: circles-to-rhombuses-animation 1200ms linear infinite;
}

.circles-to-rhombuses-spinner .circle:nth-child(1) {
	animation-delay: calc(150ms * 1);
	margin-left: 0
}

.circles-to-rhombuses-spinner .circle:nth-child(2) {
	animation-delay: calc(150ms * 2);
}

.circles-to-rhombuses-spinner .circle:nth-child(3) {
	animation-delay: calc(150ms * 3);
}

@keyframes circles-to-rhombuses-animation {
	0% {
		border-radius: 10%;
	}

	17.5% {
		border-radius: 10%;
	}

	50% {
		border-radius: 100%;
	}


	93.5% {
		border-radius: 10%;
	}

	100% {
		border-radius: 10%;
	}
}

@keyframes circles-to-rhombuses-background-animation {
	50% {
		opacity: 0.4;
	}
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 80px;
	padding-top: 40px;
}

.logo {
	width: 218px;
	line-height: 1px;
	margin-left: 100px;
}

.logo a {
	display: block;
}

#nav {
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	/* Chrome、Safari用 */
	-moz-writing-mode: vertical-rl;
	/* Firefox用 */
	-ms-writing-mode: tb-rl;
	/* IE用 */
	margin-right: 100px;
}

#nav li {
	margin-left: 55px;
	line-height: 1.4;
	font-size: 1.125em;
	font-weight: 600;
	letter-spacing: 0.2em;
}

#nav li:hover {
	opacity: 0.7;
}

.hamburger, .globalMenuSp {
	display: none;
}



/*-------------------------------------------
Mainvisual
-------------------------------------------*/

.catch {
	position: absolute;
	top: 30%;
	font-size: 1.5em;
	line-height: 1.7;
	background-color: rgba(234, 231, 220, 0.4);
	padding: 2% 4% 2% 13%;
	letter-spacing: 0.1em;
}

.mainvisual {
	text-align: right;
}

#first-view {
	position: relative;
	margin-bottom: 150px;
}

.main-v {
	width: 73%;
	height: 70vh;
	object-fit: cover;
	zoom: 1.3;
}

.load-fade {
	opacity: 0;
	visibility: hidden;
	transition: all 3s;
}

.load-fade.is-show {
	opacity: 1;
	visibility: visible;
}



/*-------------------------------------------
お知らせ
-------------------------------------------*/

#topics {
	padding-top: 25px;
}

.information {
	margin-bottom: 150px;
	position: relative;
}

.t-hai {
	background-color: #EAE7DC;
	height: 180px;
	width: 87vw;
	z-index: 1;
}

.t-naka {
	z-index: 2;
	position: absolute;
	top: -28px;
	width: 74vw;
	left: 50%;
	transform: translateX(-50%);
}

#topics .title {
	color: #FFFFFF;
	margin-right: 25px;
}

.topic-kazari {
	width: 550px;
	height: 55px;
}

.oshirase-t {
	position: relative;
}

.oshirase {
	position: absolute;
	z-index: 3;
	top: 5px;
	left: 135px;
	display: flex;
	align-items: center;
}

.ichiran2 {
	display: none;
}


.ichiran {
	/*矢印の基点とするためrelativeを指定*/
	position: relative;
	/*ボタンの形状*/
	padding: 4px 15px 4px 25px;
	display: inline-block;
	text-align: center;
	color: #fff;
	border-left: 1px solid #FFF;
	font-size: 1.125em;
	font-weight: 600;
	letter-spacing: 0.1em;
}

/*矢印と下線の形状*/
.ichiran::before {
	content: "";
	/*絶対配置で下線の位置を決める*/
	position: absolute;
	top: 55%;
	right: -26px;
	/*下線の形状*/
	width: 32px;
	height: 1px;
	background: #fff;
	/*アニメーションの指定*/
	transition: all .2s linear;
}

.ichiran::after {
	content: "";
	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	top: 32%;
	right: -22px;
	/*矢印の形状*/
	width: 1px;
	height: 8px;
	background: #FFF;
	transform: skewX(45deg);
	/*アニメーションの指定*/
	transition: all .2s linear;
}

/*hoverした際の移動*/
.ichiran:hover::before {
	right: -29px;
}

.ichiran:hover::after {
	right: -25px;
}



.topics-contents {
	display: flex;
	margin-top: 3%;
}

.left {
	display: flex;
	width: 50%;
	padding-right: 1%;

}

.right {
	display: flex;
	width: 50%;
	padding-left: 3%;
	padding-right: 3%;

}

.date {
	margin-right: 40px;
}

.gappi {
	font-size: 3.75em;
	letter-spacing: 0.08em;
	line-height: 80%;
	font-weight: 600;
}

.gappi span {
	font-size: 25px;
	vertical-align: 10%;
}

.nen {
	margin-bottom: 15px;
	font-weight: 600;
	font-size: 1.25;
	letter-spacing: 0.1em;
}

.cont-t {
	padding-bottom: 20px;
	border-bottom: 1px solid #403100;
	max-width: 150px;
}

.cont-c {
	padding-top: 20px;
	font-size: 1.125em;
	letter-spacing: 0.1em;
}

.topic-kazari-y {
	width: 7px;
	height: 12px;
	margin-left: 16px;
	vertical-align: 1%;
}

.cont-c:hover {
	opacity: 0.7;
}



/*-------------------------------------------
くろさき茶豆とは
-------------------------------------------*/
#About {
	margin-bottom: 100px;
	position: relative;
}

.decoration {
	width: 40%;
	height: 1188px;
	background-color: rgba(234, 231, 220, 0.3);
	position: absolute;
	top: 300px;
	right: 0;
	z-index: -1;
}

#tyamame {
	margin-bottom: 80px;
}

#huudo {
	margin-bottom: 80px;
}



.about-container {
	display: flex;
	justify-content: space-between;
	margin-right: 13%;
}

.about-img {
	height: 500px;
	object-fit: cover;
	width: 50%;
}

.about-c {
	display: flex;
	justify-content: space-between;
	width: 43%;
}

#About .title {
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	/* Chrome、Safari用 */
	-moz-writing-mode: vertical-rl;
	/* Firefox用 */
	-ms-writing-mode: tb-rl;
	/* IE用 */
	letter-spacing: 0.5em;
}

.a-left {
	max-width: 450px;
	text-align: center;
	height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	padding-right: 3%;
	margin: 0 auto;
}

.a-left p {
	line-height: 2.2;
	text-align: left;
}


.sub-button {
	/*矢印の基点とするためrelativeを指定*/
	position: relative;
	/*ボタンの形状*/
	border: 1px solid #403100;
	padding: 8px 30px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	color: #403100;
	outline: none;
	/*アニメーションの指定*/
	transition: all .2s linear;
	position: absolute;
	bottom: 0px;
	line-height: 1.4;
	font-size: 1.125em;
	font-weight: 300;
	letter-spacing: 0.1em;
}

.sub-button:hover {
	background: #403100;
	color: #fff;
}

/*矢印と下線の形状*/
.sub-button::before {
	content: "";
	/*絶対配置で下線の位置を決める*/
	position: absolute;
	top: 50%;
	right: -26px;
	/*下線の形状*/
	width: 40px;
	height: 1px;
	background: #403100;
	/*アニメーションの指定*/
	transition: all .2s linear;
}

.sub-button::after {
	content: "";
	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	top: 22%;
	right: -21px;
	/*矢印の形状*/
	width: 1px;
	height: 12px;
	background: #403100;
	transform: skewX(45deg);
	/*アニメーションの指定*/
	transition: all .2s linear;
}

/*hoverした際の移動*/
.sub-button:hover::before {
	right: -30px;
}

.sub-button:hover::after {
	right: -25px;
}


.about-reverse {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin-left: 13%;
}

#huudo .about-c {
	flex-direction: row-reverse;
}

#huudo .a-left {
	padding-right: 0;
	padding-left: 3%;
}

.about-t {
	margin-bottom: 10px;
}

/*-------------------------------------------
コラム
-------------------------------------------*/


#column {
	height: 680px;
	background-image: url(img/column.png);
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	padding: 0 13%;
	position: relative;
}

.column-text {
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	/* Chrome、Safari用 */
	-moz-writing-mode: vertical-rl;
	/* Firefox用 */
	-ms-writing-mode: tb-rl;
	/* IE用 */
	text-orientation: upright;
	color: #FFF;
	height: 550px;
}

.inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

.column-text p {
	margin-left: 8%;
	letter-spacing: 0.2em;
}

.column-text p:first-child {
	margin-left: 20%;
}

.column-text p:last-child {
	margin-left: 0;
}


/*-------------------------------------------
how-to
-------------------------------------------*/


#howto {
	margin-top: 100px;
}

#howto p {
	line-height: 2.2;
	font-size: 1.125em;
}

.section-title {
	width: 656px;
	position: relative;
	margin: 0 auto;
	padding-bottom: 100px;
}

.title-deco {
	width: 656px;
}

.sub-title {
	font-size: 1.875em;
	letter-spacing: 0.1em;
	position: absolute;
	top: 10%;
	left: 20%;
}

.flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}


#step2, #step3, #step4 {
	margin-top: 50px;
}

.number {
	width: 80px;
	vertical-align: top;
}


#step1 .illust {
	width: 73%;
	position: absolute;
	top: 50px;
}

#step2 .illust {
	width: 68%;
	position: absolute;
	right: 0px;
}

#step3 .illust {
	width: 61%;
	position: absolute;
	top: 14%;
}

#step4 .illust {
	width: 78%;
	margin-top: 7px;
	position: absolute;
	right: 0px;
}


.step-r {
	width: 70%;
}

.step-l {
	position: relative;
	width: 50%;
	height: 220px;
}

.step-l-2 {
	position: relative;
	width: 310px;
	height: 220px;

}

.step-l-3 {
	position: relative;
	width: 50%;
	height: 220px;
}

.step-l-4 {
	position: relative;
	width: 410px;
	height: 220px;
}




/*-------------------------------------------
recipi
-------------------------------------------*/


#recipi {
	margin-top: 150px;
}

.recipi-img1, .recipi-img2, .recipi-img3 {
	width: 420px;
	transition: transform .6s ease;
	/* ゆっくり変化させる */
}

.recipi-img1:hover, .recipi-img2:hover, .recipi-img3:hover {
	transform: scale(1.1);
	/* 拡大 */
}


.recipis {
	display: flex;
}

.down {
	margin-top: 150px;
}

.tate p {
	margin-left: 20px;
	letter-spacing: 0.4em;
}

.tate p:last-child {
	margin-left: 0px;
}

.tate span {
	background-color: #E5E0D2;
	padding: 10px 5px;
}

.p-down {
	margin-top: 70px;
}


.tate {
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	/* Chrome、Safari用 */
	-moz-writing-mode: vertical-rl;
	/* Firefox用 */
	-ms-writing-mode: tb-rl;
	/* IE用 */
	text-orientation: upright;
}

.recipi1, .recipi2, .recipi3 {
	position: relative;
}

.tate1 {
	position: absolute;
	top: 0;
	left: 10%;
}

.tate2 {
	position: absolute;
	top: 27%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.tate3 {
	position: absolute;
	top: 0px;
	right: 10%;
	text-align: right;
}

.p-up {
	margin-bottom: 20px;
}

.recipi-b {
	text-align: center;
	margin-top: 75px;
}

.sub-button2 {
	/*矢印の基点とするためrelativeを指定*/
	position: relative;
	/*ボタンの形状*/
	border: 1px solid #403100;
	padding: 8px 30px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	color: #403100;
	outline: none;
	/*アニメーションの指定*/
	transition: all .2s linear;
	bottom: 0px;
	line-height: 1.4;
	font-size: 1.125em;
	font-weight: 300;
	letter-spacing: 0.1em;
}


.sub-button2:hover {
	background: #403100;
	color: #fff;
}

/*矢印と下線の形状*/
.sub-button2::before {
	content: "";
	/*絶対配置で下線の位置を決める*/
	position: absolute;
	top: 50%;
	right: -26px;
	/*下線の形状*/
	width: 40px;
	height: 1px;
	background: #403100;
	/*アニメーションの指定*/
	transition: all .2s linear;
}

.sub-button2::after {
	content: "";
	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	top: 22%;
	right: -21px;
	/*矢印の形状*/
	width: 1px;
	height: 12px;
	background: #403100;
	transform: skewX(45deg);
	/*アニメーションの指定*/
	transition: all .2s linear;
}

/*hoverした際の移動*/
.sub-button2:hover::before {
	right: -30px;
}

.sub-button2:hover::after {
	right: -25px;
}



/*-------------------------------------------
brand
-------------------------------------------*/
#brand {
	margin-top: 150px;
	background-color: #EAE7DC;
	display: flex;
	padding: 55px 0;
	width: 100vw;
	padding-left: 13%;
}

.title-area {
	min-width: 290px;
	padding: 65px 5px 65px 0;
	margin-right: 80px;
	text-align: left;
}


.item-b {
	margin-right: 50px;
}

.slide {
	width: 75%;
	display: flex;
	overflow: hidden;
}

.brand-img {
	max-width: 250px;
	height: 300px;
	object-fit: cover;
	margin-bottom: 15px;
}

.title-area p {
	line-height: 2.2;
	text-align: center;
	margin-bottom: 130px;
}

.title-area h2 {
	text-align: center;
	margin-bottom: 60px;
}

.brand-no {
	padding-bottom: 15px;
	margin-bottom: 25px;
	border-bottom: 1px solid #403100;
	max-width: 100%;
	font-weight: 600;
}

.b-flex {
	display: flex;
}

.brand-name {
	margin-right: 35px;
	font-weight: 600;
	letter-spacing: 0.4em;
}

.detail {
	line-height: 2.2;
}

.b-detail {
	text-align: center;
}

.shop-button {
	border: 1px solid #403100;
	border-radius: 0;
	background: #fff;
	padding: 10px 60px;
	display: inline-block;
	margin-top: 15px;
}


.shop-button:hover {
	color: #fff;
	background: #403100;
}



/*スライドボタン*/

.button {
	display: flex;
}

.button a {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	width: 80px;
	height: 80px;
	background-color: #fff;
	border-radius: 50vh;
	transition: 0.3s;
}

.r-slide-button, .l-slide-button {
	position: relative;
}

.l-slide-button::after {
	content: '';
	position: absolute;
	top: 35%;
	left: 32%;
	/*矢印の形状*/
	width: 3px;
	height: 12px;
	background: #403100;
	transform: skew(-45deg);
	transition: 0.3s;
}

.l-slide-button::before {
	content: "";
	/*下線の形状*/
	width: 40px;
	height: 2px;
	background: #403100;
	/*アニメーションの指定*/
	transition: all .2s linear;
}

.r-slide-button::after {
	content: '';
	position: absolute;
	top: 35%;
	right: 32%;
	/*矢印の形状*/
	width: 3px;
	height: 12px;
	background: #403100;
	transform: skew(45deg);
	transition: 0.3s;
}

.r-slide-button::before {
	content: "";
	/*下線の形状*/
	width: 40px;
	height: 2px;
	background: #403100;
	/*アニメーションの指定*/
	transition: all .2s linear;
}



.button a:hover {
	background-color: #403100;
}

.r-slide-button:hover::after, .l-slide-button:hover::after {
	width: 3px;
	height: 12px;
	background: #fff;
}

.r-slide-button:hover::before, .l-slide-button:hover::before {
	width: 40px;
	height: 2px;
	background: #fff;
}









/*-------------------------------------------
問い合わせ
-------------------------------------------*/

#access {
	display: flex;
	justify-content: space-between;
	margin-bottom: 200px;
	margin-top: 150px;
}

iframe {
	width: 100%;
	height: 600px;

}

.map {
	width: 50%;
}

.contact-contents {
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	/* Chrome、Safari用 */
	-moz-writing-mode: vertical-rl;
	/* Firefox用 */
	-ms-writing-mode: tb-rl;
	/* IE用 */
	text-orientation: upright;
	text-align: initial;
	display: inline-block;
}

.contents-center {
	width: 30%;
	text-align: center;
	margin-top: 50px;

}

.a-title {
	width: 20%;
	background-color: #EAE7DC;
	height: 300px;
	margin-top: -40px;
	padding-right: 3%;
	display: inline-block;
	line-height: 300px;
	text-align: center;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	/* Chrome、Safari用 */
	-moz-writing-mode: vertical-rl;
	/* Firefox用 */
	-ms-writing-mode: tb-rl;
	/* IE用 */
	text-orientation: upright;
}

.adress, .tell, .mail, .hoka {
	letter-spacing: 0.2em;
}

.adress {
	position: relative;
	margin-left: 60px;
}

.adress:after {
	content: '';
	position: absolute;
	left: -30px;
	top: 0px;
	display: inline-block;
	width: 1px;
	height: 100px;
	background-color: #403100;
}

.tell, .mail {
	margin-left: 20px;
}

.adress-p {
	display: none;
}


/* メールボタン */

.mail {
	border: 1px solid #403100;
	border-radius: 0;
	background: #fff;
	padding: 15px 13px;
	display: flex;
	align-items: center;
	height: fit-content;
}

.mail p {
	margin: 0 auto;
}

.mail:hover {
	color: #fff;
	background: #403100;
}

.mail img {
	width: 24px;
	margin-top: 7px;
}

.mail img:nth-of-type(2) {
	margin-top: -24px;
	opacity: 0;
}

/*hoverするとアイコンが入れ替わる設定*/
.mail:hover img:nth-of-type(1) {
	opacity: 0;
}

.mail:hover img:nth-of-type(2) {
	opacity: 1;
}





/*-------------------------------------------
footer
-------------------------------------------*/
#footer {
	text-align: center;
}

.insta img {
	width: 84px;
}

.insta a:hover {
	opacity: 0.6;
}

.insta_i {
	display: flex;
	margin-top: 55px;
}

.insta_i img {
	height: 245px;
	width: 100%;
	object-fit: cover;
}


#footer .copyright {
	font-size: 0.625rem;
}

.adress2 p {
	line-height: 1.6;
	font-size: 1rem;
	letter-spacing: 0.08em;
}

.adress2 {
	text-align: center;
	margin-top: 15px;
}

.logo2 {
	width: 218px;
	line-height: 1px;
	margin: 0 auto;
}

.logo2 a {
	display: block;
}

.f_menu {
	display: flex;
	justify-content: center;
	margin-top: 95px;
	margin-bottom: 35px;
}

.f_menu li {
	margin-right: 40px;
}

.f_menu li:last-child {
	margin-right: 0;
}

.f_menu a:hover {
	opacity: 0.6;
}

.copy {
	font-size: 0.9rem;
}

.foot {
	background-color: #EAE7DC;
	padding: 70px 0 15px 0;
	text-align: center;
}

/*-------------------------------------------
ふわっと表示
-------------------------------------------*/

.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}

.fade.active {
	opacity: 1;
	transform: translateY(0px);
}

/*-------------------------------------------
SP
------------------------------------------ */

@media screen and (max-width: 950px) {


	p {
		line-height: 2.5;
		font-size: 0.875em;
	}

	.title {
		font-size: 1.313em;
		letter-spacing: 0.1em;
	}

	/*-------------------------------------------
ヘッダーSP
-------------------------------------------*/
	#header {
		margin-bottom: 40px;
		padding-top: 25px;
		background-color: #FFF;
		height: 8%;
		width: 100%;
		top: 0;
		position: fixed;
		z-index: 999;
		box-shadow: 0 0 25px 0 rgba(0, 0, 0, .5);
	}

	/*　上に上がる動き　*/

	#header.UpMove {
		animation: UpAnime 0.5s forwards;
	}

	@keyframes UpAnime {
		from {
			opacity: 1;
			transform: translateY(0);
		}

		to {
			opacity: 0;
			transform: translateY(-100px);
		}
	}

	/*　下に下がる動き　*/

	#header.DownMove {
		animation: DownAnime 0.5s forwards;
	}

	@keyframes DownAnime {
		from {
			opacity: 0;
			transform: translateY(-100px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}


	.logo {
		width: 18%;
		max-width: 100px;
		min-width: 50px;
		line-height: 1px;
		margin-left: 4%;
		position: fixed;
		z-index: 3;
		top: 50%;
		left: 4%;
		transform: translateY(-50%);
		-webkit- transform: translateY(-50%);
	}

	#nav {
		display: none;
	}

	.wrapper {
		max-width: 950px;
		padding: 0 4%;
		margin: 0 auto;
	}



	/**************** 以下、ハンバーガーボタンのスタイリング ****************/
	/*　ハンバーガーボタン　*/
	.hamburger {
		display: block;
		position: fixed;
		z-index: 3;
		top: 50%;
		right: 4%;
		transform: translateY(-50%);
		-webkit- transform: translateY(-50%);
		width: 40px;
		height: 40px;
		cursor: pointer;
		text-align: center;
	}

	.hamburger span {
		display: block;
		position: absolute;
		width: 30px;
		height: 2px;
		left: 6px;
		background: #403100;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	.hamburger span:nth-child(1) {
		top: 10px;
	}

	.hamburger span:nth-child(2) {
		top: 20px;
	}

	.hamburger span:nth-child(3) {
		top: 30px;
	}

	/* ナビ開いてる時のボタン */
	.hamburger.active span:nth-child(1) {
		top: 16px;
		left: 6px;
		background: #403100;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.hamburger.active span:nth-child(2),
	.hamburger.active span:nth-child(3) {
		top: 16px;
		background: #403100;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	/* ハンバーガーメニューの中身 */
	.globalMenuSp {
		display: block;
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		background: rgba(255, 255, 255, 0.95);
		text-align: center;
		width: 100%;
		height: 100vh;
		opacity: 0;
		visibility: hidden;
		transition: opacity .6s ease, visibility .6s ease;
	}

	.logo3 {
		width: 18%;
		max-width: 100px;
		min-width: 50px;
		line-height: 1px;
		margin-left: 4%;
		position: fixed;
		z-index: 3;
		top: 50%;
		left: 4%;
		transform: translateY(-50%);
		-webkit- transform: translateY(-50%);
	}



	.header-nav {
		margin: 0 auto;
		padding: 0;
		width: 100%;
		min-height: 100vh;
	}

	.menu-list1 {
		display: flex;
		justify-content: space-between;
		padding: 0 12%;
		margin-top: 12vh;
	}

	.menu-list1 li {
		writing-mode: vertical-rl;
		-webkit-writing-mode: vertical-rl;
		/* Chrome、Safari用 */
		-moz-writing-mode: vertical-rl;
		/* Firefox用 */
		-ms-writing-mode: tb-rl;
		/* IE用 */
		text-orientation: upright;
		text-align: left;
		font-size: 0.875em;
		font-weight: 600;
	}

	.menu-list2 {
		display: flex;
		justify-content: space-between;
		padding: 0 8%;
	}

	.n-flex li {
		font-size: 0.75em;
	}


	.n-flex li:first-child {
		margin-bottom: 5vh;
	}

	.globalMenuSp ul li {
		transition: .4s all;
	}

	.menulist_under {
		margin: 10vh 4% 5vh 4%;
		border-top: 1px solid #403100;
		border-bottom: 1px solid #403100;
		padding-top: 5vh;
		padding-bottom: 5vh;
	}

	.menulist_bottom img {
		width: 52px;
		margin-bottom: 3vh;
	}

	.menulist_bottom p {
		font-size: 0.75em;
		line-height: 1.8;
	}


	/* このクラスを、jQueryで付与・削除する */
	.globalMenuSp.active {
		opacity: 100;
		visibility: visible;
	}

	.menulist_top a:hover {
		opacity: 0.7;
	}

	.menulist_under a:hover {
		opacity: 0.7;
	}

	.menulist_bottom a:hover {
		opacity: 0.7;
	}

	/* ハンバーガーメニュー展開時、背景を固定 */
	body.active {
		height: 100%;
		overflow: hidden;
	}


	/*-------------------------------------------
MAINVISUAL SP
------------------------------------------*/

	.catch {
		top: 30%;
		font-size: 0.875em;
		line-height: 2.18;
		padding: 2% 2% 2% 4%;
		letter-spacing: 0.1em;
	}

	#first-view {
		margin-bottom: 80px;
	}

	.main-v {
		width: 80%;
		height: 60vh;
	}

	/*-------------------------------------------
お知らせ SP
-------------------------------------------*/

	#topics {}

	.right div {
		display: none;
	}

	.right {
		display: none;
	}


	.information {
		margin-bottom: 100px;
	}

	.t-hai {
		width: 100%;
		z-index: 1;
	}

	.t-naka {
		z-index: 2;
		position: absolute;
		top: -26px;
		width: 100vw;
		left: 50%;
		transform: translateX(-50%);

	}

	#topics .title {
		color: #FFFFFF;
		margin-right: 0px;
	}

	.topic-kazari {
		height: 48px;
	}

	.oshirase-t {
		width: 80%;
		max-width: 400px;
	}

	.oshirase {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}


	.ichiran {
		display: none;
	}

	.ichiran2 {
		display: block;
		/*矢印の基点とするためrelativeを指定*/
		position: relative;
		/*ボタンの形状*/
		padding: 4px 15px 4px 25px;
		display: inline-block;
		text-align: center;
		color: #403100;
		font-size: 0.875em;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-align: right;
		position: absolute;
		right: 10%;
		margin-top: 25px;
	}

	/*矢印と下線の形状*/
	.ichiran2::before {
		content: "";
		/*絶対配置で下線の位置を決める*/
		position: absolute;
		top: 56%;
		right: -20px;
		/*下線の形状*/
		width: 25px;
		height: 1px;
		background: #403100;
		/*アニメーションの指定*/
		transition: all .2s linear;
	}

	.ichiran2::after {
		content: "";
		/*絶対配置で矢印の位置を決める*/
		position: absolute;
		top: 32%;
		right: -17px;
		/*矢印の形状*/
		width: 1px;
		height: 7px;
		background: #403100;
		transform: skewX(45deg);
		/*アニメーションの指定*/
		transition: all .2s linear;
	}

	/*hoverした際の移動*/
	.ichiran2:hover::before {
		right: -29px;
	}

	.ichiran2:hover::after {
		right: -25px;
	}



	.topics-contents {
		margin: 0 auto;
		padding-top: 32px;
		width: fit-content;
	}

	.left {
		width: 100%;
		padding-right: 0;
	}

	.date {
		margin-right: 20px;
	}

	.gappi {
		font-size: 1.75em;
	}

	.gappi span {
		font-size: 1.5;
	}

	.nen {
		margin-bottom: 12px;
		font-size: 0.875;
		line-height: 1.5;
	}

	.cont-t {
		padding-bottom: 10px;
		max-width: 60%;
		line-height: 1;
	}

	.cont-c {
		padding-top: 15px;
		font-size: 0.875em;
		letter-spacing: 0.1em;
	}

	.topic-kazari-y {
		width: 5px;
		height: 10px;
		margin-left: 8px;
		vertical-align: 1%;
	}




	/*-------------------------------------------
くろさき茶豆とはSP
-------------------------------------------*/
	#About {
		margin-bottom: 100px;
		position: relative;
	}

	.decoration {
		width: 40%;
		height: 1188px;
		background-color: rgba(234, 231, 220, 0.3);
		position: absolute;
		top: 300px;
		right: 0;
		z-index: -1;
	}

	#tyamame {
		margin-bottom: 60px;
	}

	#huudo {
		margin-bottom: 60px;
	}



	.about-container {
		flex-direction: column;
		justify-content: space-between;
		margin-right: 4%;
		position: relative;
	}

	.about-img {
		height: 240px;
		object-fit: cover;
		width: 87%;
	}

	.about-c {
		flex-direction: column;
		width: 100%;
		margin: 0 4%;
	}

	#About .title {
		writing-mode: vertical-rl;
		-webkit-writing-mode: vertical-rl;
		/* Chrome、Safari用 */
		-moz-writing-mode: vertical-rl;
		/* Firefox用 */
		-ms-writing-mode: tb-rl;
		/* IE用 */
		letter-spacing: 0.5em;
		position: absolute;
		top: 0;
		right: 1%;
	}

	.a-left {
		max-width: 100%;
		text-align: center;
		height: auto;
		display: flex;
		flex-direction: column;
		position: relative;
		margin-right: 4%;
		padding-right: 0;
	}

	.a-left p {
		line-height: 2.2;
		text-align: left;
		margin: 60px 0 70px 0;
		height: fit-content;
	}

	.sub-button {
		/*矢印の基点とするためrelativeを指定*/
		position: relative;
		/*ボタンの形状*/
		border: 1px solid #403100;
		padding: 8px 30px;
		display: block;
		text-align: center;
		text-decoration: none;
		color: #403100;
		outline: none;
		/*アニメーションの指定*/
		transition: all .2s linear;
		position: absolute;
		bottom: 0px;
		line-height: 1.4;
		font-size: 0.875em;
		font-weight: 300;
		letter-spacing: 0.1em;
	}

	.sub-button:hover {
		background: #403100;
		color: #fff;
	}

	/*矢印と下線の形状*/
	.sub-button::before {
		content: "";
		/*絶対配置で下線の位置を決める*/
		position: absolute;
		top: 50%;
		right: -26px;
		/*下線の形状*/
		width: 40px;
		height: 1px;
		background: #403100;
		/*アニメーションの指定*/
		transition: all .2s linear;
	}

	.sub-button::after {
		content: "";
		/*絶対配置で矢印の位置を決める*/
		position: absolute;
		top: 22%;
		right: -21px;
		/*矢印の形状*/
		width: 1px;
		height: 12px;
		background: #403100;
		transform: skewX(45deg);
		/*アニメーションの指定*/
		transition: all .2s linear;
	}

	/*hoverした際の移動*/
	.sub-button:hover::before {
		right: -30px;
	}

	.sub-button:hover::after {
		right: -25px;
	}

	.about-reverse {
		flex-direction: column;
		justify-content: space-between;
		margin-left: 4%;
		margin-right: 0;
		position: relative;
	}

	#huudo .about-c {
		flex-direction: row-reverse;
	}

	#huudo .a-left {
		padding-right: 0;
		padding-left: 0;
	}

	#huudo img {
		position: absolute;
		right: 0;
	}

	.huudo-title {
		width: fit-content;
		position: absolute;
		top: 0;
		left: 1%;
	}

	#huudo .title {
		right: 0;
	}

	#huudo .a-left {
		margin-top: 240px;
	}

	#huudo .about-c {
		margin: 0%;
	}

	/*-------------------------------------------
コラムSP
-------------------------------------------*/


	#column {
		height: 650px;
		padding: 0;
		position: relative;
	}

	.column-text {
		writing-mode: horizontal-tb;
		color: #FFF;
		height: fit-content;
	}

	.inner {

		position: absolute;
		width: 100%;
		padding: 0 4%;
		text-align: center;
		max-width: 600px;
	}



	.column-text p {
		margin-left: 0;
		display: inline;
	}

	.column-text p:first-child {
		margin-left: 0;
		margin-bottom: 55px;
		display: block;
	}

	/*-------------------------------------------
how-toSP
-------------------------------------------*/


	#howto {
		margin-top: 100px;
		padding: 0 4%;
	}

	#howto p {
		font-size: 0.875em;
	}

	.section-title {
		width: fit-content;
		position: relative;
		margin: 0 auto;
		padding-bottom: 60px;
	}

	.title-deco {
		width: 338px;
	}

	.sub-title {
		font-size: 1.313em;
		letter-spacing: 0.1em;
		position: absolute;
		top: 12%;
		left: 10%;
	}

	.flex {
		flex-direction: column;
		align-items: center;
	}

	.fl-sp {
		flex-direction: column-reverse;
	}

	#step2, #step3, #step4 {
		padding-top: 60px;
		position: relative;
		max-width: 400px;
		margin: 0 auto;
	}

	#step1 {
		position: relative;
		max-width: 400px;
		margin: 0 auto;
	}

	.number {
		width: 55px;
		margin-right: 5px;
		vertical-align: top;
		position: absolute;
		left: 2%;
	}


	#step1 .illust {
		width: 230px;
		position: static;
		margin-left: 5%;
	}

	#step2 .illust {
		width: 150px;
		position: static;
	}

	#step3 .illust {
		width: 220px;
		position: static;
		margin-left: 7%;
	}

	#step4 .illust {
		width: 224px;
		position: static;
		margin-top: 0;
	}


	.step-r, .step-r-2, .step-r-3, .step-r-4 {
		margin-top: 40px;
		width: 100%;
	}

	.nobr {
		display: none;
	}

	.step-l {
		position: static;
		width: fit-content;
		height: fit-content;
	}

	.step-l-2 {
		position: static;
		width: fit-content;
		height: fit-content;

	}

	.step-l-3 {
		position: static;
		width: fit-content;
		height: fit-content;
	}

	.step-l-4 {
		position: static;
		width: fit-content;
		height: fit-content;
	}


	/*-------------------------------------------
recipiSP
-------------------------------------------*/


	#recipi {
		margin-top: 100px;
	}

	.recipi-img1, .recipi-img2, .recipi-img3 {
		width: 300px;
	}

	.recipis {
		flex-direction: column;
		padding: 0 4%;
		max-width: 600px;
		margin: 0 auto;

	}

	.down {
		margin-top: 0px;
	}


	.recipi1, .recipi2 {
		margin-bottom: 30px;
	}

	.recipi1, .recipi3 {
		text-align: left;
	}

	.recipi2 {
		text-align: right;
	}

	.tate p {
		margin-left: 1px;
		letter-spacing: 0.4em;
	}

	.tate p:last-child {
		margin-left: 0px;
	}

	.tate span {
		background-color: #E5E0D2;
		padding: 8px 4px;
	}

	.p-down {
		margin-top: 50px;
	}


	.tate {
		writing-mode: vertical-rl;
		-webkit-writing-mode: vertical-rl;
		/* Chrome、Safari用 */
		-moz-writing-mode: vertical-rl;
		/* Firefox用 */
		-ms-writing-mode: tb-rl;
		/* IE用 */
		text-orientation: upright;
	}

	.recipi1, .recipi2, .recipi3 {
		position: relative;
	}

	.tate1 {
		position: absolute;
		top: 0;
		left: 5%;
	}

	.tate2 {
		position: absolute;
		top: -10%;
		left: auto;
		transform: translateX(auto);
		-webkit-transform: translateX(auto);
		-ms-transform: translateX(auto);
		right: 0%;
	}

	.tate2 p {
		white-space: nowrap;
	}

	.tate3 p {
		white-space: nowrap;
	}

	.tate3 {
		position: absolute;
		top: auto;
		right: auto;
		left: 0;
		bottom: 0;
		text-align: right;
	}

	.p-up {
		margin-bottom: 0px;
	}

	.recipi-b {
		text-align: center;
		margin-top: 60px;
	}

	.sub-button2 {
		font-size: 0.875em;
	}




	/*-------------------------------------------
brandSP
-------------------------------------------*/
	#brand {
		margin-top: 100px;
		background-color: #EAE7DC;
		flex-direction: column;
		padding: 45px 0;
		width: 100vw;
		padding-left: 4%;
		padding-right: 4%;
	}

	.title-area {
		min-width: fit-content;
		padding: 0;
		margin-right: 0;
		text-align: center;
	}


	.item-b {
		margin-right: 0px;
	}

	.slide {
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.brand-img {
		width: 85%;
		max-width: 300px;
		height: 300px;
		object-fit: cover;
		margin-bottom: 15px;
	}

	.title-area p {
		line-height: 1.7;
		text-align: center;
		margin-bottom: 40px;
	}

	.title-area h2 {
		text-align: center;
		margin-bottom: 30px;
	}

	.brand-no {
		padding-bottom: 15px;
		margin-bottom: 25px;
		margin-top: 40px;
		border-bottom: 1px solid #403100;
		max-width: 350px;
		width: 100%;
		font-weight: 600;
		text-align: left;
		padding-left: 4%;
	}

	.no-ce {
		margin: 0 auto;
		text-align: center;
		max-width: 350px;
		width: 100%;
	}

	.b-flex {
		display: flex;
		justify-content: space-between;
		max-width: 350px;
		margin: 0 auto;
	}

	.brand-name {
		margin-right: 0px;
		font-weight: 600;
		letter-spacing: 0.4em;
		width: fit-content;
		display: inline-block;
		padding-left: 1.5%;
	}

	.detail {
		line-height: 1.7;
	}

	.b-detail {
		text-align: center;
	}

	.shop-button {
		border: 1px solid #403100;
		border-radius: 0;
		background: #fff;
		padding: 10px 60px;
		display: inline-block;
		margin-top: 15px;
		font-size: 0.875em;
	}


	.shop-button:hover {
		color: #fff;
		background: #403100;
	}

	.unvisible {
		display: none;
	}


	/*スライドボタンSP*/

	.button a {
		width: 60px;
		height: 60px;
	}


	.l-slide-button::after {
		content: '';
		position: absolute;
		top: 33%;
		left: 33%;
		/*矢印の形状*/
		width: 3px;
		height: 10px;

	}

	.l-slide-button::before {
		content: "";
		/*下線の形状*/
		width: 30px;
		height: 2px;
		background: #403100;
		/*アニメーションの指定*/
		transition: all .2s linear;
	}

	.r-slide-button::after {
		content: '';
		position: absolute;
		top: 33%;
		right: 33%;
		/*矢印の形状*/
		width: 3px;
		height: 10px;
		background: #403100;
		transform: skew(45deg);
		transition: 0.3s;
	}

	.r-slide-button::before {
		content: "";
		/*下線の形状*/
		width: 30px;
		height: 2px;
		background: #403100;
		/*アニメーションの指定*/
		transition: all .2s linear;
	}



	.button a:hover {
		background-color: #403100;
	}

	.r-slide-button:hover::after, .l-slide-button:hover::after {
		width: 3px;
		height: 10px;
		background: #fff;
	}

	.r-slide-button:hover::before, .l-slide-button:hover::before {
		width: 30px;
		height: 2px;
		background: #fff;
	}


	.button {
		max-width: 350px;
		width: 100%;
		margin: 0 auto;
	}






	/*-------------------------------------------
問い合わせSP
-------------------------------------------*/

	#access {
		display: block;
		margin-bottom: 200px;
		margin-top: 100px;
	}

	iframe {
		width: 100%;
		height: 290px;
	}

	.map {
		width: 100%;
	}

	.contact-contents {
		writing-mode: vertical-rl;
		-webkit-writing-mode: vertical-rl;
		/* Chrome、Safari用 */
		-moz-writing-mode: vertical-rl;
		/* Firefox用 */
		-ms-writing-mode: tb-rl;
		/* IE用 */
		text-orientation: upright;
		text-align: initial;
		display: inline-block;
	}

	.contents-center {
		width: 100%;

	}

	.a-title {
		position: absolute;
		width: 18%;
		max-width: 100px;
		background-color: #EAE7DC;
		height: 185px;
		margin-top: 0;
		padding-right: 2;
		display: inline-block;
		line-height: 1;
		text-align: center;
		writing-mode: vertical-rl;
		-webkit-writing-mode: vertical-rl;
		/* Chrome、Safari用 */
		-moz-writing-mode: vertical-rl;
		/* Firefox用 */
		-ms-writing-mode: tb-rl;
		/* IE用 */
		text-orientation: upright;
		top: -20px;
		right: 0;
	}

	.adress, .tell, .mail, .hoka {
		letter-spacing: 0.2em;
	}

	.adress {
		position: relative;
		margin-left: 60px;
	}



	.tell, .mail {
		margin-left: 20px;
	}

	.adress-p {
		display: block;
	}

	/* メールボタン */

	.mail p {
		font-size: 0.875em;
	}

	.mail img {
		width: 21px;
		margin-top: 7px;
	}

	.mail img:nth-of-type(2) {
		margin-top: -20px;
	}





	/*-------------------------------------------
footerSP
-------------------------------------------*/
	#footer {
		text-align: center;
	}

	.insta img {
		width: 52px;
	}

	.insta a:hover {
		opacity: 0.6;
	}

	.insta_i {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		margin-top: 20px;
	}

	.insta_i img {
		height: 130px;
		width: 100%;
		object-fit: cover;
	}


	.copy {
		margin-top: 30px;
		font-size: 0.563rem;
	}

	.adress2 p {
		line-height: 1.818;
		font-size: 0.688rem;
		letter-spacing: 0.08em;
	}

	.adress2 {
		text-align: center;
		margin-top: 15px;
	}

	.logo2 {
		width: 102px;
		line-height: 1px;
		margin: 0 auto;
	}

	.logo2 a {
		display: block;
	}

	.f_menu {
		display: none;
	}


	.foot {
		background-color: #EAE7DC;
		padding: 30px 0 15px 0;
		text-align: center;
	}
}