@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);


.marche #container {
	padding:0 0 50px;
}


/*-------------------------------------------------------------------
	mctitle
-------------------------------------------------------------------*/

#mctitle {
	position:relative;
	margin:0 0 50px;
}

#mctitle .maimg img {
	width:100%;
}

#mctitle .malogo {
	position:absolute;
	top:220px;
	left:50%;
	transform:translateX(-50%);
}


#mctitle .mctext {
	position:relative;
	width:94%;
	margin:-100px auto 0;
}

#mctitle .mctext dl {
		text-align:center;
}

#mctitle .mctext dl dd {
	margin:30px 0 0;
	line-height:2.0;
}

/*-------------------------------------------------------------------
	marche
-------------------------------------------------------------------*/

#marche {
	font-family: 'Noto Sans Japanese', sans-serif;/* notosansを使わない場合は消す */
	font-weight:300;
	color:#231815;
}

#marche .yellow {
	background:#f9f7e5;
	padding:60px 0;
	position:relative;
}

#marche .yellow .inner {
	width:650px;
	margin:0 auto;
	text-align:center;
	line-height:2.0;
}

#marche .yellow .inner h2 {
	text-align:center;
	margin:0 0 10px;
}

#container #marche h3 {
	text-align:center;
	line-height:1.0;
	padding:0;
	position:relative;
	margin:0 0 50px;
	border-bottom:none;
	font-weight:600;
	letter-spacing: 0;
}

#container #marche h3:before {
	display:none;
}

#container #marche h3:after {
	display:none;
}

#marche .yellow .inner dl {
	background:url(../image/information/marche_ttl04s.png) bottom center no-repeat;
	padding:0 0 40px;
	margin:0 auto 60px;
	width:500px;
}

#marche .yellow .inner dl dt {
	margin:0 0 20px;
}

#marche .yellow .inner dl dd {
	padding:0 0 0 40px;
	text-align:left;
}

#marche .yellow .inner dl dd.num {
	text-align:center;
	margin-top:20px;
}

#marche .yellow .inner dl dd.num ul {
	display:inline-block;
	vertical-align:top;
}

#marche .yellow .inner dl dd.num ul li {
	overflow:hidden;
	zoom:1;
	text-align:left;
}

#marche .yellow .inner dl dd.num ul li span {
	font-weight:600;
	padding-right:10px;
}

#marche .yellow .inner dl dd.num ul li span.lft {
	float:left;
}

#marche .yellow .inner dl dd.num ul li .rgt {
	margin-left:20px;
}

#marche .yellow .inner dl dd.num ul.sec {
	margin-left:30px;
}

#marche .yellow .inner .w500 {
	width:620px;
	margin:0 auto;
}

#marche .yellow .inner .txt01 {
	padding:0 0 0 100px;
	text-align:left;
	margin:0 auto 30px;
}

#marche .yellow .inner .txt02 {
	padding:0 0 0 100px;
	text-align:left;
}


/* イラスト */


#marche .yellow .ill01 {
	position:absolute;
	right:10%;
	top:-120px;
}

#marche .yellow .ill02 {
	position:absolute;
	left:10%;
	top:330px;
}

#marche .yellow .ill03 {
	position:absolute;
	right:20%;
	top:490px;
}

#marche .yellow .ill04 {
	position:absolute;
	right:10%;
	bottom:130px;
}

#marche .yellow .ill05 {
	position:absolute;
	left:15%;
	bottom:60px;
}

/* blue */

#marche .blue {
	background:#e2f2f5;
	padding:40px 0;
}

#marche .blue .inner {
	width:900px;
	margin:0 auto;
}

#marche .blue .inner dl dt,
#marche .blue .inner dl dd {
	border-top:1px solid#c5b776;
}

#marche .blue .inner dl dt {
	background:#f3f9fb;
	cursor:pointer;
	text-align:center;
	padding:20px 0;
}

#marche .blue .inner dl dt span {
	display:inline-block;
	text-align:center;
	width:350px;
	background:url(../image/information/marche_icon01.png) right center no-repeat;
}

#marche .blue .inner dl dt.open span {
	background:url(../image/information/marche_icon02.png) right center no-repeat;
}

#marche .blue .inner dl dd {
	display:none;
	padding:70px;
	background:#FFF;
}

#marche .blue .inner dl dd .time {
	font-size:1.85em;
	line-height:1.0;
	margin:0 0 40px;
	font-weight:400;
	font-family: source-han-serif-japanese, serif;
}

#marche .blue .inner dl dd h4 {
	font-size:1.3em;
	line-height:1.0;
	margin:0 0 10px;
	font-family: source-han-serif-japanese, serif;
}

#marche .blue .inner dl dd h4:before {
	content:'○';
}

#marche .blue .inner dl dd .price {
	overflow:hidden;
	zoom:1;
	width:460px;
	margin:0 0 10px;
}

#marche .blue .inner dl dd .price.end {
	margin:0 0 30px;
}


#marche .blue .inner dl dd .price .item {
	width:84%;
	float:left;
	position:relative;
}

#marche .blue .inner dl dd .price .item span {
	display:inline-block;
	padding:0 10px 0 0;
	background:#FFF;
	z-index:5;
	position:relative;
}

#marche .blue .inner dl dd .price .item:before {
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
	content:'';
	border-top:1px dotted #231815;
	width:100%;
	height:1px;
}

#marche .blue .inner dl dd .price .money {
	width:15%;
	float:right;
	text-align:right;
}

#marche .blue .inner dl dd .red {
	margin:0 0 10px;
	color:#9e005d;
}

#marche .blue .inner dl dd .gray {
	margin:40px 0 0;
	color:#999999;
}


#marche .blue .inner dl dd .hdnbox {
	overflow:hidden;
	zoom:1;
}

#marche .blue .inner dl dd .hdnbox.sec {
	margin-top:40px;
}

#marche .blue .inner dl dd .hdnbox .left {
	width:49%;
	float:left;
}

#marche .blue .inner dl dd .hdnbox .right {
	width:49%;
	float:right;
}

#marche .blue .inner dl dd .hdnbox span {
	color:#999999;
	font-size:0.85em;
}

#marche .blue .inner .caution {
	text-align:center;
	margin:30px 0 0;
	color:#999999;
}

/* inqarea */

#marche .inqarea {
	padding:30px 0 0;
}

#marche .inqarea .inner {
	max-width:94%;
	margin:0 auto;
	text-align:center;
}

#marche .inqarea .inner h2 {
	margin:0 0 20px;
}

#marche .inqarea .inner p {
	color:#999999;
}

#marche .inqarea .inner table {
	width:300px;
	margin:20px auto 0;
	color:#4a4645;
	line-height:1.6;
}


#marche .inqarea .inner table th {
	width:30%;
	font-weight:300;
	text-align:right;
}

#marche .inqarea .inner table td {
	padding-left:10px;
	text-align:left;
}

/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
		.marche #container {
		padding:0 0 30px;
	}
	
	#mctitle .mctext {
		margin:10px auto 0;
	}
	
	#mctitle .malogo {
		top:17%;
	}
	

	/* marche */



	#marche .yellow {
		background:#f9f7e5;
		padding:30px 0;
		position:relative;
	}

	#marche .yellow .inner {
		width:90%;
	}	


	#marche .yellow .inner dl {
		background-size:100% auto;
		padding:0 0 40px;
		margin:0 auto 40px;
		width:auto;
	}


	#marche .yellow .inner dl dd {
		padding:0;
	}


	#marche .yellow .inner .w500 {
		width:auto;
		margin:0 auto;
	}

	#marche .yellow .inner .txt01 {
	padding:0;
	margin:0 auto 30px;
	}

	#marche .yellow .inner .txt02 {
		padding:0;
	}


	/* イラスト */


	#marche .yellow .ill01,
	#marche .yellow .ill02,
	#marche .yellow .ill03,
	#marche .yellow .ill04,
	#marche .yellow .ill05 {
		display:none;	
	}

	/* blue */

	#marche .blue {
		padding:30px 0;
	}

	#marche .blue .inner {
		width:94%;
	}

	#marche .blue .inner dl dt span {
		width:90%;
	}


	#marche .blue .inner dl dd {
		padding:5%;
	}

	#marche .blue .inner dl dd .price {
		width:auto;
	}


	#marche .blue .inner dl dd .hdnbox {
		overflow:hidden;
		zoom:1;
	}

	#marche .blue .inner dl dd .hdnbox.sec {
		margin-top:30px;
	}

	#marche .blue .inner dl dd .hdnbox .left {
		width:auto;
		float:none;
		margin:0 0 20px;
	}

	#marche .blue .inner dl dd .hdnbox .right {
		width:auto;
		float:none;
	}


	/* inqarea */

	#marche .inqarea .inner table {
		width:60%;
	}	
}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
	
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	

	

}

/*===============================================
  画面の横幅が380px以下に適用
===============================================*/
@media screen and (max-width: 380px){
	
}