@charset "UTF-8";

.christmas-banner{
	width:1000px;
	margin:auto;
	margin-top:50px;	
	display:block;
}
.christmas-banner img{
	display:block;
	width:100%;
}

#main-visual{
	width:100%;
	min-width:1080px;
	margin:auto;
	text-align:center;
	height:680px;
}
#main-visual ul li{
	height:680px;
	min-width:1080px;
	margin:auto;
	position:relative;
}
.jam-visual{
	background:url(../images/main-visual01.jpg) no-repeat;
	background-size:cover;
	background-position:left bottom;
}
.jam-visual .txt01{
	position:absolute;
	left:80px;
	padding:20px 40px;
	text-align:left;
	height:400px;
	top:0;
	bottom:0;
	margin:auto;
	background:rgba(255,255,255,0.7);
}
.cake-visual{
	background:url(../images/main-visual02.jpg) no-repeat;
	background-size:cover;
	background-position:left bottom;
}
.coffee-visual{
	background:url(../images/main-visual03.jpg) no-repeat;
	background-size:cover;
	background-position:left bottom;
}
.cafe-visual{
	background:url(../images/main-visual04.jpg) no-repeat;
	background-size:cover;
	background-position:right bottom;
}

.content{
	min-width:1000px;
	margin:auto;
	position:relative;
}
.content h2{
	text-align:center;
	font-size:24px;
	font-weight:500;
	line-height:1.8;
	padding-bottom:40px;
	width:1000px;
	margin:auto;
}
.concept{
	padding-top:60px;
	padding-bottom:80px;
}
.concept .txt{
	text-align:center;
	width:1000px;
	margin:auto;
}

.btn a:hover,.cafe a.btn:hover{
	opacity:0.7;
	filter:alpha(opacity=70);
}

#news.content{
	height: 552px;
	padding:0;
	margin:auto;
	border-top:3px solid #722d80;
}
#news .left{
	float:left;
	min-width:500px;
	width:50%;
	overflow:hidden;
}
#news h2{
	width:500px;
	float:right;
	padding-bottom:30px;
	line-height:1;
	padding-top:30px;
}
#news a{
	text-decoration:underline;
}
#news a:hover{
	text-decoration:none;
}
#news dl{
	overflow:hidden;
	height:300px;
	width:480px;
	float:right;
	margin-right:20px;
	overflow-y:scroll;
}
#news dl:last-child{
	//border-bottom:1px solid #dfdfdf;
}
#news dt{
	clear:both;
	width:100px;
	padding:20px 0 5px;
}
#news dd.first,#news dt.first{
	border-top:none;
}
#news dd{
	width:500px;
	border-bottom:1px solid #dfdfdf;
	padding:0 0 15px;
}
#news dd a{
	color: #410908;
}
#news .right{
	float:right;
	display:block;
	min-width:480px;
	width:48%;
	height:100%;
	background:url(../images/index-blog-bg.jpg) no-repeat;
	background-size:auto 100%;
	background-position:left top;
}
.blog-btn-area{
	clear: both;
	width: 480px;
	float: right;
	margin-right: 20px;
}
.blog-btn-area a{
	text-decoration: none !important;
}


.jam{
	height:700px;
}
.jam h2{
	letter-spacing:0.1em;
	line-height:1.4;
}
.jam .pic{
	display:block;
	width:52%;
	background:url(../images/index-jam-pic.jpg) no-repeat;
	background-position:center top;
	background-size:cover;
	height:700px;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}
.jam .inner{
	z-index:2;
	position:relative;
	height:100%;
}
.jam .txt{
	background:rgba(255,255,255,0.8);
	padding:30px 0 30px 30px;
	padding-top:20px;
	width:600px;
	text-align:left;
	margin-left:360px;
	margin-top:40px;
}
.jam .inner img{
	position: absolute;
    bottom: 10px;
    right: 0;
    display: block;
    width: 190px;
}
.jam .inner ul{
	overflow:hidden;
	padding-top:30px;
	max-width: 400px;
}
.jam .inner li{
	margin-left: auto;
	margin-right:auto;
	max-width: 100%;
}
.jam .inner li.first{
	margin-bottom:20px;
}
.jam .inner li.first a{
	display:block;
	color:#fff;
	background:#722d80;
	line-height:60px;
	text-align:center;
	font-size:16px;
	transition:ease 0.3s all;
}




.jam .inner li a{
	display:block;
	color:#fff;
	background:#adcb6e;
	background:#ef8397;
	line-height:54px;
	text-align:center;
	font-size:14px;
	transition:ease 0.3s all;
}
.jam .inner li a:hover{
	opacity:0.7;
	filter:alpha(opacity=70);
}
.content.jam h2{
	width:100%;
	letter-spacing:0;
	font-size:22px;
	text-align:left;
	padding-bottom:20px;
	padding-left:45px;
}
.jam .point{
    border-radius: 1000px;
    text-align: center;
    width: 110px;
    height: 110px;
    line-height: 1.4;
    color: #fff;
    background: #ef8397;
    position: absolute;
    right: 615px;
    top: 23px;
    font-size: 26px;
    padding-top: 18px;
    transform: rotate(-15deg);
}

.menu h2:after,#news h2:after,.cafe h2:after{
	content:"";
	display:block;
	width:30px;
	height:3px;
	margin:auto;
	background:#410908;
	margin-top:10px;	
}


.menu{
	padding:40px 0 40px;
	position:relative;
}
.menu:before{
	content:"";	
	display:block;
	background:#f9f1f3;
	height:240px;
	width:100%;
	position:absolute;
	left:0;
	top:0;
}
.menu .inner{
	z-index:99;
	position:relative;
}
.menu ul{
	overflow:hidden;
	
}
.menu ul li{
	float:left;
	width:250px;
	padding:0 8px 30px;
}
.menu ul li a{
	display:block;
	background:#fff;
	padding:5px;
	transition:ease 0.3s all;
}
.menu ul li a:hover{
	background:#722d80;
}
.menu ul li img{
	display:block;
	width:100%;
}
.link-btn{
	width:190px;
	line-height:47px;
	background:#722d80;
	text-align:center;
	font-size:14px;
	display:block;
	margin:25px auto;
	color:#fff;
	transition:ease 0.3s all;	
}
.link-btn:hover{
	opacity:0.7;
	filter:alpha(opacity=70);
}


.cafe{
	min-width:1080px;
	margin:auto;
	position:relative;
}
.cafe:before{
	content:"";
	width:100%;
	position:absolute;
	left:0;
	top:0;
	height:350px;
	background:url(../images/index-cafe-bg.jpg) no-repeat;
	background-size:cover;
	background-position:center top;
}
.cafe h2{
	width: 190px;
    margin: auto;
    background: #fff;
    padding: 15px 0;
	letter-spacing:0.1em;
	line-height:1.4;
	margin-bottom:40px;
	position:relative;
	z-index:99;
	margin-top:-76px;
}
.cafe .inner{
	overflow:hidden;
	padding-top:350px;
}
.cafe h3{
	font-size:20px;
	line-height:1.8;
	text-align:center;
	padding-bottom:30px;	
	clear:both;
}
.cafe p{
	width:550px;
	padding-bottom:80px;
}
.cafe img.pic{
	width:400px;
	padding-bottom:80px;
	display:block;
}
.cafe .left{
	float:left;
}
.cafe .right{
	float:right;
}

.cafe .btn{
	line-height:60px;
	width:225px;
	display:block;
	margin:auto;
	border:2px solid #410908;
	font-size:22px;
	color:#410908;
	padding:0;
}
.red{
	color:#f36578;
}
#contents{
	padding-bottom:120px;
}
.cake{
	padding:50px 0;
	border-top:3px solid #722d80;
}
.cake .right{
	float:right;
	width:540px;
}
.cake img{
	vertical-align:bottom;
}
.cake .left{
	float:left;
	width:420px;
}
.cake h3{
	color:#de424f;
	padding-bottom:30px;
	font-size:19px;
	font-weight:bold;
}
.cake .red{
	padding-top:10px;
}
table {
    border-collapse: collapse;
    width: 1000px;
    margin: auto;
}
th {
    background: #f6f3ed;
    border: 1px solid #ddd;
    padding: 15px;
}
td {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
}
.cake .clear{
	padding-top:60px;
}
.cake .chui{
	padding-top:20px;
	padding-bttom:0;
}

.pound-cake-txt {
    width: 1000px;
    margin: 40px auto 0;
    text-align: center;
    padding: 20px;
    background: #722d80;
    color: #fff;

}
.pound-cake-txt h3{
	margin-bottom:30px;
}
.mb40{
	margin-bottom:40px;
}
.left-pic{
	width:230px;
	float:left;
	margin-bottom:40px;
}
.right-txt{
	width:730px;
	float:right;
}
.right-txt p:nth-of-type(1){
	margin-bottom:1em;
}


.summer-greeting{
	//background: linear-gradient(#f2f7ff94 20%,#fff);
    width: 1000px;
    margin: 40px auto 20px;
	padding: 20px 40px;
	overflow:hidden;
	border: 1px solid #eee;
}
.summer-greeting h3{
	line-height:1.1;
	padding-bottom:1em;
	font-size:24px;
}
.summer-greeting .f-left{
	float:left;
	width: 55%;
}
.summer-greeting .f-right{
	float:right;
	width: 40%;
}

.summer-greeting p.mincho:last-of-type{
	padding-top:1em;
	font-size:18px;
}
.msg{
	position:relative;
	border:1px solid #444;
	padding:20px;
	line-height:2;
    width: 1000px;
    margin: 40px auto 20px;
}
.msg h3{
	position:absolute;
	left:20px;
	top:-0.5em;
	display:inline-block;
	background:#fff;
	line-height:1.1;
	padding:0 0.5em;
	font-size:18px;
}
.christmas-txt{
	font-weight: 600;
	font-size: 16px;
	line-height: 2;
	padding: 15px;
	color: #981f28;
	text-align: center;
	border: 3px solid #981f28;
	width: 1000px;
	margin: 20px auto;
}
@media screen and (max-width: 768px){
	.christmas-banner{
		width: calc(100% - 3rem);
		margin: 0 auto;
		margin-top:4rem;
	}
	.msg {
	    padding: 1.5rem !important;
	    line-height: 1.75 !important;
	    width: calc(100% - 3rem) !important;
	    margin: 3rem auto !important;
	}
	.msg h3{
		position: relative !important;
		left: auto !important;
		top: auto !important;
		font-size: 1.6rem !important;
		line-height: 1.4 !important;
		padding: 0 !important;
		margin-bottom: 1.5rem;
	}
	#main-visual{
		width:100%;
		min-width:100%;
		margin:auto;
		text-align:center;
		height: 24rem;
	}
	#main-visual ul li{
		height: 24rem;
		min-width:100%;
	}
	.jam-visual{
		background:url(../images/main-visual01.jpg) no-repeat;
		background-size:cover;
		background-position:left bottom;
	}
	.jam-visual .txt01{
		position:absolute;
		left:80px;
		padding:20px 40px;
		text-align:left;
		height:400px;
		top:0;
		bottom:0;
		margin:auto;
		background:rgba(255,255,255,0.7);
	}
	.cake-visual{
		background:url(../images/main-visual02.jpg) no-repeat;
		background-size:cover;
		background-position:left bottom;
	}
	.coffee-visual{
		background:url(../images/main-visual03.jpg) no-repeat;
		background-size:cover;
		background-position:left bottom;
	}
	.cafe-visual{
		background:url(../images/main-visual04.jpg) no-repeat;
		background-size:cover;
		background-position:right bottom;
	}

	.content{
		min-width: 100%;
		margin: 0 auto;
	}
	.content h2{
		padding-top: 0;
		text-align: center;
		font-size: 2rem;
		padding-bottom: 1.5rem;
		width: 100%;
	}
	.concept{
		padding: 4rem 1.5rem;
		width: 100%;
	}
	.concept .txt{
		text-align: left;
		width: 100%;
	}


	#news.content{
		height: auto;
		padding:0;
		margin:auto;
		display: flex;
		flex-direction: column-reverse;
	}
	#news .left{
		float: none;
		min-width: 100%;
		width: 100%;
		padding-bottom: 3rem;
	}
	#news h2{
		width: 100%;
		float: none;
		padding-bottom: 1.5rem;
		padding-top: 3rem;
	}
	#news dl{
		height: 30rem;
		width: 100%;
		float: none;
		margin-right: 0;
		padding: 1.5rem;
	}
	#news dt{
		clear:both;
		width: 100%;
		padding: 1.5rem 0 1rem;
	}
	#news dd{
		width: 100%;
		padding: 0 0 1.5rem;
	}

	.blog-btn-area{
		clear: both;
		width: calc(100% - 3rem);
		float: none;
		margin: 3rem auto 0;
	}
	.blog-btn-area a{
		width: 100%;
		line-height:1;
		height: 5rem;
		font-size:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 1.5rem auto;
	}
	#news .right{
		float:none;
		display:block;
		min-width: 100%;
		width: 100%;
		height: 24rem;
		background-size: cover;
	}
	.jam{
		height: auto;
		display: flex;
		flex-direction: column;
	}
	.jam .pic{
		display: block;
		width: 100%;
		height: 24rem;
		position: relative;
		left: auto;
		top: auto;
	}
	.jam .inner{
		height:auto;
		margin-top: -3rem;
		overflow: visible;
		padding-bottom: 3rem;
	}
	.jam .txt{
		padding: 1.5rem 0;
		width: 100%;
		text-align:left;
		margin-left: 0;
		margin-top: 0;
	}
	.jam .inner img{
		bottom: .5rem;
		right: 1.5rem;
		width: 9rem;
	}
	.jam .inner ul{
		overflow:hidden;
		padding-top:30px;
	}
	.jam .inner li{
		float: none;
		margin-right: 0;
		margin-bottom: 2rem;
	}
	.jam .inner li.first{
		margin-bottom: 2rem;
	}
	.jam .inner li.first a{
		width: 100%;
		line-height: 1;
		font-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 5rem;
	}

	.jam .inner li a{
		width: calc(100% - 11rem);
		line-height: 1;
		font-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 5rem;
	}

	.content.jam h2{
		width:100%;
		font-size: 1.5rem;
		padding-bottom: 1.5rem;
		padding-left: 0;
		margin-top: 4rem;
		line-height: 1.8;
	}
	.jam .point{
		border-radius: 100%;
		width: 8rem;
		height: 8rem;
		right: auto;
		left: 0;
		top: -3rem;
		font-size: 1.8rem;
		padding-top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.menu h2:after,#news h2:after,.cafe h2:after{
		content:"";
		display:block;
		width:30px;
		height:3px;
		margin:auto;
		background:#410908;
		margin-top:10px;	
	}


	.menu{
		padding: 4rem 0 0;
		position:relative;
	}
	.menu:before{
		content:"";	
		display:block;
		background:#f9f1f3;
		height:240px;
		width:100%;
		position:absolute;
		left:0;
		top:0;
	}
	.menu .inner{
		z-index:99;
		position:relative;
	}
	.menu ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
	}
	.menu ul li{
		float:none;
		width:calc(50% - .5rem);
		padding:0 0 2rem;
	}

	.link-btn{
		width: 100%;
		line-height:1;
		height: 5rem;
		font-size:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 1.5rem auto;	
	}


	.cafe{
		min-width: 100%;
		margin:auto;
		position:relative;
	}
	.cafe:before{
		height: 15rem;
	}
	.cafe h2{
		width: 118px;
		padding: 1rem 0;
		margin-bottom: 3rem;
		margin-top: -61px;
	}
	.cafe .inner{
		padding-top: 15rem;
	}
	.cafe h3{
		font-size: 2rem;
		padding-bottom: 1.5rem;
	}
	.cafe p{
		width: 100%;
		padding-bottom: 4rem;
	}
	.cafe img.pic{
		width: 100%;
		padding-bottom: 4rem;
		display:block;
	}
	.cafe .left{
		float: none;
	}
	.cafe .right{
		float: none;
	}

	.cafe .btn{
		line-height:60px;
		width:225px;
		display:block;
		margin:auto;
		border:2px solid #410908;
		font-size:22px;
		color:#410908;
		padding:0;
	}
	.red{
		color:#f36578;
	}
	#contents{
		padding-bottom: 6rem;
	}
	.cake{
		padding:50px 0;
		border-top:3px solid #722d80;
	}
	.cake .right{
		float: none;
		width: 100%;
		margin-top: 2rem;
	}
	.cake img{
		display: block;
		width: 100%;
	}
	.cake img.left-pic{
		width: 20rem;
		float: none;
		margin: 0 auto 2rem;
	}
	.cake .left{
		float: none;
		width: 100%;
	}
	.cake h3{
		padding-bottom: 1.5rem;
		font-size:1.7rem;
	}
	.cake .red{
		padding-top:10px;
	}
	table {
	    width: 100%;
		font-size: 1.2rem;
	}
	tr th:nth-of-type(1){
		width: 40%;
	}
	tr th:nth-of-type(2){
		width: 20%;
	}
	tr th:nth-of-type(3){
		width: 20%;
	}
	tr th:nth-of-type(4){
		width: 20%;
	}
	th {
	    padding: 1rem 0;
	}
	td {
	    padding: 1rem 0;
	}
	.cake .clear{
		padding-top:60px;
	}
	.cake .chui{
		padding-top:20px;
		padding-bttom:0;
	}

	.pound-cake-txt {
	    width: 100%;
	    margin: 3rem auto 0;
	    text-align: left;
	    padding: 1.5rem;

	}
	.pound-cake-txt h3{
		margin-bottom: 1.5rem;
	}
	.mb40{
		margin-bottom:40px;
	}
	.left-pic{
		width:230px;
		float:left;
		margin-bottom:40px;
	}
	.right-txt{
		width: 100%;
		float: none;
	}
	.right-txt p:nth-of-type(1){
		margin-bottom:1em;
	}


	.summer-greeting{
		width: calc(100% - 3rem);
		margin: 2rem auto;
		padding: 3rem 1.5rem;
	}
	.summer-greeting h3{
		font-size:1.8rem;
	}
	.summer-greeting .f-left{
		float: none;
		width: 100% !important;
	}
	.summer-greeting .f-right{
		float:none;
		width:100%;
		max-width: 400px;
		margin: 20px auto 0;
		display: block;
	}

	.summer-greeting p.mincho:last-of-type{
		padding-top:1em;
		font-size:1.4rem;
	}
.msg{
	position:relative;
	border:1px solid #444;
	padding:20px;
	line-height:2;
    width: 1000px;
    margin: 40px auto 20px;
}
.msg h3{
	position:absolute;
	left:20px;
	top:-0.5em;
	display:inline-block;
	background:#fff;
	line-height:1.1;
	padding:0 0.5em;
	font-size:18px;
}
	.christmas-txt{
		font-size: 1.4rem;
		text-align: left;
		width: calc(100% - 3rem);
		margin-left: auto;
		margin-right: auto;
		margin: 2rem auto;
	}
}