@charset "utf-8";
/* font */
p{
	font-family: 'Cantarell', sans-serif;
	color:rgba(67,67,67,1.00);
}

/* title */

html body h2{
	margin: 0 0 5% 0;
	font-family: 'EB Garamond', serif;
	color:rgba(67,67,67,1.00);
	font-size: 3em;
}
@media only screen and (max-width: 800px) {
html body h2{
		font-size: 2.5em;
	}
}
@media only screen and (max-width: 450px) {
html body h2{
		font-size: 2em;
	}
}
	
#wrap {
	width: 100%;
	margin: 0 auto;
	padding:0 0 200px 0;
	min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 120px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
	background-image: url(../images/common/bg.jpg);
	background-color: rgba(247,243,233,0.8);
	background-size: 50%;
	background-blend-mode:lighten;
	background-repeat: repeat;
}
	

	
/* main */
	
#main {
	width: 100%;
	margin: 0 auto;
	height: 900px;
	text-align: center;
	background-image: url(../images/common/bb_main_2000.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
}
.main_bg {
	background:rgba(0,0,0,0.6);
	height: 900px;
}
.main_bg p {
	font-family: kinuta-maruminold-stdn,serif;
	font-weight: 400;
	font-style: normal;
	line-height: 2.0em;
	color:rgba(255,255,255,1.00);
	font-size: 1.5em;
	margin: 3% auto;
}
.rogo {
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	margin: auto;
}
.rogo img {
	width: 100%;
}
#main .item_pc {
	display: block;
}
#main .item_sp {
	display: none;
}
	
@media only screen and (max-width: 1200px) {
	#main {
	background-size: cover;
	background-repeat: no-repeat;
	background-position:top;
	height: 600px;
}
	.main_bg {
	height: 600px;
}
	.rogo {
	margin: auto;
	width: 80%;
	}
.main_bg p {
	line-height: 1.8em;
	font-size: 1.5em;	
}
}
@media only screen and (max-width: 800px) {
	#main {
	background-image: url(../images/common/bb_main_1440.jpg);
	height: 450px;
}
	.main_bg {
	height: 450px;
}
	.rogo {
	width: 80%;
	}
.main_bg p {
	line-height: 1.5em;
	font-size: 1.2em;	
}
}
@media only screen and (max-width: 600px) {
	#main {
	height: 500px;
	}
	.main_bg {
	height: 500px;
	}
	.rogo {
	width: 80%;
	}

#main .item_pc {
	display: none;
}
#main .item_sp {
	display: block;
}
}
@media only screen and (max-width: 500px) {
	.rogo {
	width: 80%;
	}
}
	
	
	
	
/* concept */
	
#concept {
	width:80%;
	margin: 8% auto;
	text-align: center;
}
#concept p {
	font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.8em;
	color:rgba(67,67,67,1.00);
	font-size: 1.3em;
}
#concept .item img {
	width:1000px;
	margin-bottom: 8%;
}

#concept .item_pc {
	margin-bottom: 8%;
	display: block;
}
#concept .item_sp {
	margin-bottom: 8%;
	display: none;
}

@media only screen and (max-width: 1000px) {
	#concept .item img {
	width:100%;
	}
	#concept p {
		font-size: 1.2em;
	}
}
@media only screen and (max-width: 800px) {
#concept .item_pc {
	display: none;
}
#concept .item_sp {
	display: block;
}
}
@media only screen and (max-width: 600px) {
	#concept p {
		font-size: 0.95em;
	}
}


/* news */
#news {
	width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.news{
	width: 1000px;
	margin: auto;
    text-align: center;
    padding: 100px 0 100px 0;
    overflow: hidden;
    z-index: 1;
    left: 0;
    top: 0;
}
.news ul{
    width: 100%;
	margin-top: 8%;
}
.news ul li{
    margin: 0 0 2% 0;
}
.news ul p{
    font-style: nomal;
    letter-spacing: 1px;
}
.news ul p a{
	color: #000;
}
.news ul p a:hover{
	opacity: 0.5;
}
.time{
    font-size: 12px;
    float: left;
    width: 12%;
    margin: 0 4% 0 0;
    padding: 2px 0;
    background-color: #FFF;
}
.news_title{
    font-size: 14px;
    text-align: left;
}
@media only screen and (max-width: 1000px){
	#news {
        width:100%;
    }
	.news {
        width:80%;
    }
	.news ul{
        width: 100%;
		margin: auto;
		margin-top: 8%;
    }
	.news ul li{
        margin: 0 0 4% 0;
    }
}
@media only screen and (max-width: 600px){
	#news {
        width:100%;
    }
	.news {
        width:80%;
    }
	.news ul{
        width: 100%;
		margin: auto;
		margin-top: 8%;
    }
	.news ul li{
        margin: 0 0 4% 0;
    }
	.time{
        font-size: 11px;
        width: 20%;
        background-color: #FFF;
    }
    .news_title{
        font-size: 12px;
        text-align: left;
    }
}


	
/* sweets */
	
#sweets {
	width:60%;
	margin: 8% auto;
	position: relative;
	overflow: hidden;
	text-align: center;
}

@media only screen and (max-width: 1500px) {
	#sweets {
	width:80%;
	margin: 12% auto;
	}
}
@media only screen and (max-width: 1200px) {
	#sweets {
	width:100%;
	}
}
	
	
/* sweets_item */
	
.item {
	position: relative;
	overflow: hidden;
}
.item_image_pc {
	display: block;
}
.item_image_tb {
	display: none;
}
.item_image_sp {
	display: none;
}
.item img{
	width:1000px;
}	
	
@media only screen and (max-width: 800px) {
	.item {
		height:100%;
	}
}
.item img{
	width:100%;
}

@media only screen and (max-width: 800px) {
	.item_image_pc {
		display:none;
	}
	.item_image_tb {
		display:block;
	}
}

@media only screen and (max-width: 500px) {
	.item_image_tb {
		display: none;
	}
	.item_image_sp {
		display: block;
	}
}
@media only screen and (min-width: 800px) {	
	.layer_left {
		position: absolute;
		top: 0;
		left: -100%;
		z-index: 2;
		width: 40%;
		height: 100%;
		background: rgba(0,0,0,.5);
		-webkit-transition: 0.37s all ease-out 0s;
		opacity: 3;
	}
	.layer_right {
		position: absolute;
		top: 0;
		right: -100%;
		z-index: 2;
		width: 40%;
		height: 100%;
		background: rgba(0,0,0,.5);
		-webkit-transition: 0.37s all ease-out 0s;
		opacity: 3;
	}
}
@media only screen and (max-width: 800px) {	
	.layer_left {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.4);
	}
	.layer_right {
		position: absolute;
		right: 0%;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.4);
	}
}
@media only screen and (max-width: 800px) {
	.layer_left {
		width:100%;
	}
	.layer_right{
		width:100%;
	}
}
@media only screen and (max-width: 500px) {
	.layer_left {
		width:100%;
	}
	.layer_right{
		width:100%;
	}
}
.item:hover .layer_right{
	top: 0;
	right: 0;
}
.item:hover .layer_left{
	top: 0;
	left: 0;
}


.textbox{
	position: relative;
	height: 100%;
}
/*
.textbox p{
	font-family: 'dnp-shuei-mgothic-std', sans-serif;
}
*/
.item_textbox {
	width:85%;
	margin:0 10%;
	position: absolute;
	top: 50%;
	-webkit-transform : translateY(-50%);
	transform : translateY(-50%);
}
.textbox_name {
	width:100%;
	margin-bottom:6%;
	text-align: center;
}
.textbox_text {
	text-align: left;
	color: #FFF;
	font-size: 1em;
	letter-spacing: 0.1em;
	line-height: 2em;
}


@media only screen and (max-width: 800px) {
	.item_textbox {
		
	}
	.textbox_name {
		width:50%;
		margin-bottom:2%;
		margin: auto;
	}
	.item_textbox {
		position: absolute;
		-webkit-transform : translateY(-50%);
		transform : translateY(-50%);
	}
	.textbox_text{
		font-size: 1em;
	}
}
@media only screen and (max-width: 500px) {
	.textbox_name {
		width:80%;
		margin-bottom:2%;
		margin: auto;
	}
	.textbox_text{
		line-height: 1.6em;
		letter-spacing: 0.2em;
	}
}
@media only screen and (max-width: 400px) {
	.textbox_text{
		font-size: 0.9em;
	}
}


/* other sweets */
	
#other {
	width:1000px;
	margin: 8% auto;
	position: relative;
	overflow: hidden;
	text-align: center;
}
#other .item {
	float: left;
	width: 50%;
	margin-bottom: 3%;
}
#other img {
	width: 85%;
	margin: 0 auto;
}
#other p {
	margin: 3% 0;
	font-family: dnp-shuei-gothic-gin-std, sans-serif;
	font-weight: 600;
	font-style: normal;
	color: #736357;
	font-size: 1.5em;
}
@media only screen and (max-width: 1400px) {
#other {
	width:75%;
}
#other p {
	font-size: 1.35em;
}
}
@media only screen and (max-width: 1000px) {
#other {
	width:90%;
}
#other p {
	font-size: 1.2em;
}
}
@media only screen and (max-width: 800px) {
#other {
	width:70%;
}
#other .item {
	width: 100%;
	margin-bottom: 7%;
}
#other p {
	font-size: 1.3em;
}
}
@media only screen and (max-width: 400px) {
#other {
	width:90%;
}
#other p {
	font-size: 1.1em;
}
}


/* shop info */
	
#shop {
	width: 1000px;
	margin: 8% auto;
	position: relative;
	overflow: hidden;
	text-align: center;
}
#shop .item {
	width: 100%;
	margin-bottom: 8%;
}
#shop .item .left {
	width: 100%;
	margin-bottom: 3%;
}
#shop .item .right {
	width: 100%;
}
#shop img {
	width: 1000px;
	margin: 0 auto;
}
#shop .left .item_image_pc {
	display: block;
}
#shop .left .item_image_sp {
	display: none;
}
#shop .p_store {
	margin: 0 auto;
	font-family: dnp-shuei-gothic-gin-std, sans-serif;
	font-weight: 600;
	font-style: normal;
	color: #736357;
	font-size: 1.3em;
	line-height: 1.5em;
	text-align: left;
}
@media only screen and (max-width: 1400px) {
#shop {
	width:75%;
}
#shop img {
	width: 90%;
}
#shop .item .left {
	width: 50%;
	float: left;
}
#shop .item .right {
	width: 50%;
	float: left;
}
#shop .left .item_image_pc {
	display: none;
}
#shop .left .item_image_sp {
	display: block;
}
#shop .p_store {
	width: 90%;
	font-size: 1em;
	line-height: 1.5em;
}
}
@media only screen and (max-width: 1000px) {
#shop {
	width:90%;
}
}
@media only screen and (max-width: 800px) {
#shop {
	width:80%;
}
#shop .item {
	width: 100%;
	margin-bottom: 10%;
}
#shop .item .left {
	width: 100%;
	margin-bottom: 3%;
}
#shop .item .right {
	width: 100%;
}
#shop .left .item_image_pc {
	display: none;
}
#shop .left .item_image_sp {
	display: block;
}
#shop .p_store {
	font-size: 0.9em;
	line-height: 1.5em;
}
}

/* shopinfo&company */
	
#company,#popupstore,#recruit{
	font-size: 1em;
	width:100%;
	text-align: center;
	margin:0 auto 8% auto;
	line-height: 2em;
	letter-spacing: 0.3em;
}
#company{
	margin-bottom: 200px;
}
.p_store,.p_recruit {
	margin-bottom: 56px;
}

@media only screen and (max-width: 800px) {	
	#company{
		margin-bottom: 80px;
	}
	#shop p,#company p,.p_store,.p_recruit{
		letter-spacing: 0.1em;
		font-size: 0.8em;
		line-height: 1.8em;
	}
}
@media only screen and (max-width: 450px) {
	#shop p,#company p,.p_store,.p_recruit{
		margin:0 auto 10% auto;
		font-size: 0.7em;
	}
}


/* online */

#online {
    width:1000px;
	margin: 8% auto;
	text-align: center;
	margin: 0 auto;
}
#online img{
    width:1000px;
	margin: 0 auto 5%;
}
#online .item_image_pc {
	display: block;
}
#online .item_image_sp {
	display: none;
}
@media only screen and (max-width: 1200px) {
#online {
    width:80%;
}
#online img{
    width:100%;
}
}
@media only screen and (max-width: 800px) {
#online img{
    width:100%;
}
	#online .item_image_pc {
	display: none;
}
#online .item_image_sp {
	display: block;
}
}


/* footer */
.sns_icon {
	margin: 2% auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	flex-flow: row wrap;
}
.sns_icon ul{
	padding: 0;
}
.sns_icon ul li{
	float: left;
	margin: 0 10px;
}
.sns_icon ul li img{
    height: 28px;
}
#footer_content{
    width: 100%;
    background: rgba(67, 56, 48, 0.92);
    text-align: center;
    padding: 30px 0;
	position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}
.copyright {
	text-align: center;
	margin: auto;
}
.copyright p {
	color: white;
}

@media only screen and (max-width: 450px) {
	.copyright {
		font-size: 0.8em;
	}
}