﻿@charset "UTF-8";
/* ======================================================== */
/*  ALL */
/* ======================================================== */
/* ----------------------------------------
   base
---------------------------------------- */

html,body {
}

img{
	
	max-width:100%;}
	
	
/** PC版 **/
@media screen and (min-width: 769px) {
body {
	background:url(../../img/left_bg.png) 0 0 no-repeat;
}

#wrapper{
    margin: 0 auto;
position:relative;	
	}
	
	

#wrapper #left_area h1{
	width:90%;
	position:relative;
	z-index:100;
}
#wrapper #left_area nav li:nth-child(5){
	background:url(../../img/navi_arrow.png) 0 0 no-repeat;
	background-size:12%;
}

#wrapper #main_area{
	
		
	float:right;
	padding-top:66px;
	padding-bottom:50px;
	background:url(../img/main_bg.jpg) 0 0 no-repeat;
	background-size:cover;
	width:78%;
	/*margin-right:-5%;*/
height:100%;
	position:relative;
	overflow:hidden;
	}
	
#main_area .content{
	max-width:760px;
	width:70%;
	padding-left:5%;
	padding-right:5%;
	margin:0 auto;
	padding-top:65px;
	background:url(../../img/top_bg.gif) 0 0 repeat-x;
	background-color:#FBF8EF;
	position:relative;
	padding-bottom:50px;
}
#main_area .content h2{
	text-align:center;
	
}
#main_area .content h2 img{
	max-width:100%;
	width:auto;
	position:relative;
	z-index:2;
}
#main_area .content .leaf{
	position:absolute;
	top:-40px;
	right:100px;
	width:50%;
	z-index:1;
}

#main_area .content h3{
	border-top:1px solid #7d7c77;
	position:relative;
	margin-top:30px;
}
#main_area .content h3 p{
	position:absolute;
	top:-20px;
	left:0px;
	width:100%;
	text-align:center;
}


#main_area .content h3 span{
	position:absolute;
	top:25px;
	left:0;
	width:100%;
	text-align:center;
	display:block;
font-size:110%;
}


#main_area .content .logo{
	width:40%;
	margin: 1% auto;
	}


#main_area .content h3 p img{
	width:auto;
}
#main_area .content .broad{

	background:url(../img/broad_bg.gif) 0 26% no-repeat;
	background-zize:contain;
	padding-bottom:30px;
}

#main_area .content .broad ul{
padding-top:60px;

}

#main_area .content .broad li{
	float:left;
	width:92%;
	padding-left:4%;
	padding-right:4%;
	text-align:left;
	margin-bottom:20px;
font-size:18px;	
}


#main_area .content .broad li.midashi{

padding-bottom:3em;

}


#main_area .content .broad li .notice{
font-size:80%;
text-align:right;
}


#main_area .content .broad li .bold{
font-weight:bold;
color:#993399;
}

#main_area .content .broad li.left{
	float:left;
	width:42%;
	padding-left:4%;
	padding-right:4%;
	text-align:center;
	margin-bottom:20px;
}

#main_area .content .broad li.right{
	float:right;
	width:42%;
	padding-left:4%;
	padding-right:4%;
	text-align:center;
	margin-bottom:20px;
}




#main_area .content .music img{
	width:auto;
}
#main_area .content .music p:nth-child(2){
	margin-top:50px;
	margin-left:15px;
}

#main_area .content .delivery .inner{
	padding-left:10px;
	padding-right:10px;
}

#main_area .content .delivery .title{
	font-size:18px;
	margin-top:30px;
	margin-bottom:20px;
}
#main_area .content .delivery a{
	color:#1c8bce;
	text-decoration:underline;
}
#main_area .content .delivery a:hover{
	text-decoration:none;
}
#main_area .content .delivery ul{
    display: flex;
    -webkit-justify-content:;
    justify-content:;
    flex-wrap: wrap;
    align-items: center;
}
#main_area .content .delivery li{
	width:23%;
	text-align:center;
	margin-bottom:30px;
	margin-right:2%;
}
#main_area .content .delivery li:last-child{
}
#main_area .content .delivery li img{
	max-width:100%;
	width:100%;
}
#main_area .content .delivery li p{
	height:50px;
	display:table-cell;
	vertical-align:middle;
}

#main_area .content .delivery .one li{
	width:100%;
	text-align:left;
	margin-bottom:0px;
	padding-top:15px;
}
#main_area .content .delivery .one li p{
	height:50px;
	display:block;
	float:left;
	margin-right:30px;
	width:25%;
}
#main_area .content .delivery .one li img{
	max-width:100%;
	margin-top:-15px;
}
}
	

@media screen and (max-width: 768px) {
	html,body {
	height:auto;
}
#wrapper{
	height:auto;
	position:relative;
	background-color:#faf6e9;
}
#wrapper #main_area{
	
		
	padding-top:30px;
	padding-bottom:150px;
	background:url(../img/main_bg.jpg) 0 0 no-repeat;
	background-size:cover;
	width:100%;
	position:relative;
	}
	
#main_area .content{
	width:80%;
	padding-left:5%;
	padding-right:5%;
	margin:0 auto;
	padding-top:40px;
	background:url(../../img/top_bg.gif) 0 0 repeat-x;
	background-size:2em;
	background-color:#FBF8EF;
	position:relative;
	padding-bottom:30px;
}
#main_area .content h2{
	text-align:center;
	width:70%;
	margin:0 auto;
}
#main_area .content h2 img{
	max-width:100%;
	width:auto;
	position:relative;
	z-index:2;
}
#main_area .content .leaf{
	position:absolute;
	top:-20px;
	right:30px;
	width:50%;
	z-index:1;
}

#main_area .content .logo{
	text-align:center;
	width:70%;
	margin:1% auto;
}

#main_area .content h3{
	border-top:1px solid #7d7c77;
	position:relative;
	margin-top:30px;
}
#main_area .content h3 p{
	position:absolute;
	top:-15px;
	left:0px;
	width:100%;
	text-align:center;
}
#main_area .content h3 p img{
	width:50%!important;
}


#main_area .content h3 span{
	position:absolute;
	top:15px;
	left:0;
	width:100%;
	text-align:left;
	display:block;
font-size:105%;
}



#main_area .content .broad ul{
	padding-top:15%;
}
#main_area .content .broad li{
	width:88%;
	padding-left:3%;
	padding-right:8%;
	text-align:left;
	margin-bottom:30px;
	font-size:1.3em;
}


#main_area .content .broad li.midashi{

padding-bottom:2em;

}


#main_area .content .broad .notice{
	text-align:right;
	float:right;
	font-size:0.7em;
}


#main_area .content .broad li .bold{
font-weight:bold;
color:#993399;
}

#main_area .content .delivery{
	margin-top:50px;
}
#main_area .content .delivery .inner{
	padding-left:10px;
	padding-right:10px;
	margin-top:50px;
}
#main_area .content .delivery .title{
	width:100%;
	margin-left:1em;
	font-size:16px;
	margin-top:30px;
	margin-bottom:20px;
}
#main_area .content .delivery .title span{
	display:block;
	text-indent:-1em;
}

#main_area .content .delivery a{
	color:#1c8bce;
	text-decoration:underline;
}
#main_area .content .delivery a:hover{
	text-decoration:none;
}
#main_area .content .delivery ul{
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
#main_area .content .delivery li{
	width:46%;
	text-align:center;
	margin-bottom:30px;
}
#main_area .content .delivery li img{
	max-width:100%;
	width:100%;
}
#main_area .content .delivery li p{
	height:50px;
	display:table-cell;
	vertical-align:middle;
	width:100em;
}

#main_area .content .delivery .one li{
	width:100%;
	text-align:left;
	margin-bottom:0px;
	padding-top:10px;
}
#main_area .content .delivery .one li p{
	height:50px;
	display:block;
	float:left;
	margin-right:15px;
	width:46%;
}
#main_area .content .delivery .one li img{
	max-width:100%;
	margin-top:-10px;
}



}









