@charset "utf-8";

/* --------------------------------------------------------------------------------
inner
-------------------------------------------------------------------------------- */
#howtoeat {
	font-size: 16px;	
}
#howtoeat {
	font-size: clamp(14px, 12.793px + 0.345vw, 16px);
}
#howtoeat .howtoeat-inner {
	max-width: 1000px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------------
babkacadabraメイン画像
-------------------------------------------------------------------------------- */
#howtoeat .img-main {
	padding:0;
	margin: 5vw 0 13vw;
	position: relative;
}
#howtoeat .img-main .bg1{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#howtoeat .img-main .bg1 img{
	display: block;
	height: 29vw;
	object-fit: cover;
}
#howtoeat .img-main .img img{
	display: block;
	height: 130vw;
	object-fit: cover;
}
#howtoeat .img-main .bg2{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
#howtoeat .img-main .bg2 img{
	display: block;
	height: 22vw;
	object-fit: cover;
}

/* --------------------------------------------------------------------------------
バブカ
-------------------------------------------------------------------------------- */
#howtoeat .about-babka{
	text-align: center;
	margin: 0 0 25vw;
}
#howtoeat .about-babka .txt-about-babka .txt1{
	font-size: 4.5vw;
	font-weight: 600;
	margin: 0 0 5px;
}
#howtoeat .about-babka .txt-about-babka .txt2{
	font-size: 5vw;
	font-weight: 600;
	margin: 0 0 6vw;
}
#howtoeat .about-babka .txt-about-babka .txt3{
	font-size: 3.3vw;
	line-height: 2.4;
	letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------------
美味しいお召し上がり方
-------------------------------------------------------------------------------- */
#howtoeat .howto-babka{
	font-family: "Zen Kaku Gothic New", sans-serif;
}

#howtoeat .howto-babka .howto-babka-list ul{
}
#howtoeat .howto-babka .howto-babka-list ul li{
	text-align: center;
	margin: 0 0 12vw;
}

#howtoeat .howto-babka .howto-babka-list ul li h4{
	background: #000;
	color: #fff;
	border-radius: 10px;
	padding: 2vw;
	margin: 0 0 2vw;
	font-size: 4.5vw;
	font-weight: 600;
	display: inline-block;
}
#howtoeat .howto-babka .howto-babka-list ul li .txt1{
	font-size: 4.5vw;
	font-weight: 600;
}
#howtoeat .howto-babka .howto-babka-list ul li:nth-child(1) .txt1{
	margin: 0 0 6vw;
}
#howtoeat .howto-babka .howto-babka-list ul li:nth-child(3) .txt1{
	margin: 0 0 2vw;
}
#howtoeat .howto-babka .howto-babka-list ul li .txt2{
	border-bottom: 1px solid #000;
	display: inline-block;
	padding: 0 0 1vw;
	font-size: 3.6vw;
}

#howtoeat .howto-babka .howto-babka-list-item{
	margin: 0 0 20px;
}
#howtoeat .howto-babka .howto-babka-list-item ul{
}
#howtoeat .howto-babka .howto-babka-list-item ul li{
	position: relative;
}
#howtoeat .howto-babka .howto-babka-list-item ul li h3{
	font-size: 4vw;
	letter-spacing: 0.3em;
}
#howtoeat .howto-babka .howto-babka-list-item ul li h4{
	color: #fff;
	font-size: 5vw;
	font-weight: 600;
	text-align: center;
	margin: 0 0 2vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li .cool{
	width: 41vw;
	height: 41vw;
	border-radius: 50%;
	padding: 6vw 3vw 0;
}
#howtoeat .howto-babka .howto-babka-list-item ul li .cool p{
	font-size: 3.6vw;
	line-height: 1.68;
	text-align: center;
	letter-spacing: -0.1em;
}
#howtoeat .howto-babka .howto-babka-list-item ul li .warm{
	width: 41vw;
	height: 41vw;
	border-radius: 50%;
	padding: 6vw 0 0;
}
#howtoeat .howto-babka .howto-babka-list-item ul li .warm p{
	font-size: 3.6vw;
	line-height: 1.68;
	text-align: center;
	letter-spacing: -0.1em;
}
/*オリジナル*/
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-1{
	height: 97vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-1 h3{
	position: absolute;
	top: 0;
	left: 8%;
	color: #4f3723;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-1 .thumb{
	position: absolute;
	top: 7.3vw;
	left: 12.6%;
	width: 34vw;
	height: 28vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-1 .st{
	position: absolute;
	top: 39vw;
	left: 11%;
	width: 37vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-1 .cool{
	position: absolute;
	top: 45.6vw;
	left: 17.1%;
	background: #b3ab9b;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-1 .warm{
	position: absolute;
	top: 8vw;
	right: 3.3%;
	background: #b3ab9b;
}

/*エルビスバブカ*/
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-2{
	height: 100vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-2 h3{
	position: absolute;
	top: 0;
	right: 8.6%;
	color: #F08C85;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-2 .thumb{
	position: absolute;
	top: 9vw;
	right: 7.3%;
	width: 34vw;
	height: 2.8%;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-2 .st{
	position: absolute;
	top: 41.1vw;
	right: 8.4%;
	width: 43vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-2 .cool{
	position: absolute;
	top: 46.5vw;
	left: 18.2%;
	background: #e4c2c2;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-2 .warm{
	position: absolute;
	top: 3.2vw;
	left: 2.4%;
	background: #e4c2c2;
}

/*アップルシナモン*/
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-3{
	height: 98vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-3 h3{
	position: absolute;
	top: 10vw;
	left: 6.2%;
	color: #d81829;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-3 .thumb{
	position: absolute;
	top: 16.8vw;
	left: 12.6%;
	width: 34vw;
	height: 28vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-3 .st{
	position: absolute;
	top: 48.6vw;
	left: 6%;
	width: 43vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-3 .cool{
	position: absolute;
	top: 47.7vw;
	right: 13.9%;
	background: #c75664;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-3 .warm{
	position: absolute;
	top: 0;
	right: 1.7%;
	background: #c75664;
}

/*レモン*/
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-4{
	height: 98vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-4 h3{
	position: absolute;
	top: 0;
	right: 6.6%;
	color: #ffdb00;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-4 .thumb{
	position: absolute;
	top: 7.6vw;
	right: 7.2%;
	width: 34vw;
	height: 28vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-4 .st{
	position: absolute;
	top: 39vw;
	right: 8.6%;
	width: 43vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-4 .cool{
	position: absolute;
	top: 49.5vw;
	left: 35.7%;
	background: #e6e0c6;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-4 .warm{
	position: absolute;
	top: 14.5vw;
	left: 2.4%;
	background: #e6e0c6;
}

/*抹茶あずき*/
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-5{
	height: 96vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-5 h3{
	position: absolute;
	top: 2.7vw;
	left: 7.3%;
	color: #4f7945;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-5 .thumb{
	position: absolute;
	top: 12.3vw;
	left: 12.8%;
	width: 34vw;
	height: 28vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-5 .st{
	position: absolute;
	top: 43vw;
	left: 12.6%;
	width: 41.8vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-5 .cool{
	position: absolute;
	top: 45.7vw;
	right: 12.1%;
	background: #9fa89d;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-5 .warm{
	position: absolute;
	top: 0;
	right: 1.7%;
	background: #9fa89d;
}

/*ジャバチップ*/
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-6{
	height: 98vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-6 h3{
	position: absolute;
	top: 5.7vw;
	right: 5%;
	color: #61c5e7;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-6 .thumb{
	position: absolute;
	top: 12.3vw;
	right: 7.5%;
	width: 34vw;
	height: 28vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-6 .st{
	position: absolute;
	top: 43.2vw;
	right: 4%;
	width: 37vw;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-6 .cool{
	position: absolute;
	top: 47.5vw;
	left: 15.8%;
	background: #bcd0d5;
}
#howtoeat .howto-babka .howto-babka-list-item ul li.list-item-6 .warm{
	position: absolute;
	top: 0;
	left: 5.2%;
	background: #bcd0d5;
}


/*食べきれないときの保存方法*/
#howtoeat .howto-babka .howto-save{
	text-align: center;
	margin: 0 2vw;
}
#howtoeat .howto-babka .howto-save .howto-save-box{
	border: 1px solid #000;
	border-radius: 10px;
	padding: 4vw 2vw;
	display: inline-block;
}
#howtoeat .howto-babka .howto-save h3{
	font-size: 5vw;
	font-weight: 600;
	margin: 0 0 4vw;
}
#howtoeat .howto-babka .howto-save .txt{
	font-size: 3.4vw;
	line-height: 1.88;
	letter-spacing: 0.05em;
}



/* --------------------------------------------------------------------------------
INFORMATION
-------------------------------------------------------------------------------- */
#howtoeat .infomation-area {
	background: #fff;
	padding:0;
	margin: 45vw 0 30vw;
	position: relative;
}
#howtoeat .infomation-area .infomation-area-box {
	padding: 0 0 8vw;
}
#howtoeat .infomation-area img {
	display: block;
	width: 100%;
	height: auto;
}
#howtoeat .infomation-area .bg1{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#howtoeat .infomation-area .bg2{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}