/* ==== clearfix ==== */
.clearfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { min-height: 1px;}


/*共通HTML*/
body { font-size: 14px; font-family:Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; color: #5D5D5D; background-color: #FFFFFF; margin:0; padding:0; line-height:1.6em;}

a{ color: #8685B4;}
a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:active { text-decoration: none;}
a:hover { text-decoration: underline;}

a img{ border:0;}

span.reserve{ background:#8685B4; padding:3px 5px; color:white; margin-left:10px}
span.check{ background:yellow; padding:2px}
p{ margin:3px 0 10px 0; padding:0;}

.notice{ color:#FF0000;}
.attention{ color:#DA538E;}
.big{ font-size:110%;}
.clear{ clear:both;}
.anno{ line-height:1.5em; padding:10px; float:left; margin:5px 0 10px 0; font-size:90%; background:#eee; width:90%; display:none}

.fl_left{ float:left; padding-right:10px}
.fl_right{ float:right; padding-left:10px}

/*共通*/
#wrapper{ max-width:1200px; margin:0 auto; padding:0;}

#contents{ margin:10px 0;}

/*共通ヘッダ*/
#head{ padding-top:10px;}
.logo{ padding:5px 0; float:left;}
.cart_ic{ float:right; padding-top:10px;}

/*共通メニュー*/
#menu{ padding:15px 0; background:url(https://www.loule.net/shop_images/menu_line.gif) repeat-x left bottom; clear:both;}
#menu a{ font-size:13px; margin-right:20px; color:#5D5D5D;}
#menu a:hover,
#menu a.current{ color:#da538e; text-decoration:none}

#nav_toggle{
	display: none;
}

@media(max-width:768px){
	#head{ border-bottom:1px solid #ccc; padding-bottom:5px}
  .logo{ padding-left:5px;}
  .logo img{ width:70px}
  .cart_ic{ 
	position: absolute;
	top: 0px;
	right: 50px;
  }
	#menu{ display:none}

	#nav_toggle{
		display: block;
		width: 30px;
		height: 30px;
		position: fixed;
		right: 10px;
		top: 10px;
		z-index: 100;
	}
	#nav_toggle div {
		position: relative;
	}
	#nav_toggle span{
		display: block;
		height: 2px;
		background: #ff74b1;
		position:absolute;
		width: 100%;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
	}
	#nav_toggle span:nth-child(1){
		top:0px;
	}
	#nav_toggle span:nth-child(2){
		top:12px;
	}
	#nav_toggle span:nth-child(3){
		top:24px;
	}
	
	.open #nav_toggle span:nth-child(1) {
		top: 12px;
	   -webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.open #nav_toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.open #nav_toggle span:nth-child(3) {
		top: 12px;
		-webkit-transform: rotate(-135deg);
		-moz-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}
}

/*共通レフト*/
#left{width:20%; float:left; margin:20px 0;box-sizing:border-box}
#left a{ color: #5D5D5D;}

#left ul{ margin:0; padding:0 0 10px 0; /*background:url(https://www.loule.net/shop_images/leftnav_back.gif) repeat;*/ border-bottom:1px solid #ccc;}
#left ul.group{ border-bottom:1px dotted #ccc}
#left h2{ margin:10px 0 5px 5px; padding:0; font-size:15px; font-weight:bold;}
#left h3{ margin:0; padding: 10px 10px 5px 5px; font-size:13px; font-weight:normal}
#left ul li{ list-style:none;}
#left ul li a{ display:block; padding:6px 10px 6px 13px; /*background:url(https://www.loule.net/shop_images/leftnav_li.gif) no-repeat 10px 3px;*/ border:none;line-height:1.2em;}
#left ul li a:hover{ background:#efefef; text-decoration:none}
#left ul li.space{ padding:0 10px 20px 23px}
.exp{ margin:10px 0 10px 0; padding-bottom:5px; font-size:12px}
#left .exp ul{ margin-left:0; padding:0; list-style-type:disc; background:none; border:none}
#left .exp ul li{ background:none; padding:0 0 10px 0}
#left .exp img{ padding-bottom:5px;}

#left ul.other li{ margin:0 ; padding:0}
#left ul.other li a{ display:block; padding:15px 5px;}

.border{ border-bottom:1px solid #ccc;}


@media(max-width:768px){
	/*#left{ border-top:1px solid #ccc}*/
	#left{
		display: none;
		position: fixed;
		padding-top: 30px;
		top:0;
		width: 100%;
		height: 100%;
		left: 0;
		background: white;
		overflow-y: scroll;
	}
	#left ul { display: flex; justify-content: flex-start; flex-wrap: wrap;}
	#left ul li{ padding: 0 20px 0 0;}
  .exp{ padding:10px}
  .exp br{ display:none}
}

/*共通内容*/
#main{ width:75%; margin:20px 0 20px 5%; padding:0; float:right; box-sizing:border-box}
#main_img{ padding-bottom:10px; background:url(https://www.loule.net/shop_test/images/mainImg.jpg) no-repeat center; background-size:100%; height:300px; padding:40px 30px; box-sizing:border-box}

#main h1,h2,h3{ padding:5px 0 10px 0; margin:0;}

#main ul.info{ margin:0; padding:0 10px 20px 10px;}
#main ul.info li{ list-style:none; padding-bottom:5px; line-height:1.6em;}
.date{ color:#DA538E; padding-right:10px;}
#main ul.info li a{ color:#8685B4;}

@media(max-width:768px){
	#left,
	#main{ width:auto; margin:0; float:none; font-size:13px}
	#main_img{ height:9em;}
}


/*商品一覧*/
.flex{display:flex; justify-content:flex-start; flex-wrap:wrap}
.product_list{ /*float:left;*/ width:30%; padding:10px 1.5% 10px 1.5%; margin-bottom:40px;}
.product_list a{ color:#555;}
.product_img{ text-align:center; margin-bottom:15px; height:220px; overflow:hidden}
.product_img img{ height:220px}
.product_title{ font-size:110%; padding-bottom:5px; line-height:1.6em; width:220px; margin:0 auto}

.breadclumb{}

@media(max-width:768px){
	.product_list{ float:none; width:47%}
  .breadclumb{ padding-left:10px}
  .product_title{width:auto}
  .product_img{aspect-ratio:1/1; overflow:hidden; height:auto}
  .product_img img{aspect-ratio:1/1; object-fit:cover; height:auto; width:100%}
  
}

#main h1{ padding:20px 0; font-size:24px}

#main h2{ padding:20px 0 3px 10px; margin-bottom:20px; border-bottom:1px solid #ccc; font-size:20px; width:100%}

@media(max-width:768px){
	#main h1{ font-size:18px}
	#main h2{ font-size:16px;}
}

/*商品個別*/
#product{ padding:0; margin:0;}
#product h1{ /*background:url(https://www.loule.net/shop_images/h1_pr.jpg) no-repeat;*/ padding:15px 5px 15px 0px; font-size:24px; font-weight:bold;margin:0 0 10px 0; font-family:"Times New Roman", Times, serif; color:#555;}
#product h2{ /*background:url(https://www.loule.net/shop_images/h2_pr.jpg) no-repeat;*/ padding:12px 5px 3px 0px; font-size:18px; font-weight:bold; font-family:"Times New Roman", Times, serif; margin:15px 0 7px 0; clear:both;}
#product h3{ font-size:110%; font-weight:bold; font-family:"Times New Roman", Times, serif; margin:10px 0 0 3px; color:#8685B4;}
.productmimg{ float:left; padding:0 15px 10px 0;}
.productmimg img{}
.writer{ font-size:100%; font-weight:bold}
.price{ color:#8685B4; font-size:120%; font-weight:bold;}
.intocart{ padding:0 0 0 20px;}
.lead{ color:#8685B4; font-weight:bold; font-size:110%;}
.productinfo{ width:385px; float:right}

p.br{clear:both;}

.capImg{ float:left;margin-right:20px; margin-bottom:20px}

.sampleBox{ clear:both; padding:0 10px 10px;}
.sampleBox h4{ font-size:11px; font-weight:normal; padding-bottom:2px; border-bottom:1px solid #e6e6e6; margin-bottom:10px}
.sampleBox a img{ border:1px solid #ddd;}
.sampleBox a:hover img{ opacity:0.7}

iframe{ width:100%!important; height:650px!important;}

@media(max-width:768px){
	#product{ padding:10px}
	.productmimg{ padding:10px; text-align:center}
	#product img{ width:100%;}
}

/*共通フッタ*/
#footCont{ border-top:1px solid #CCCCE4; padding:10px 0; clear:both; font-size:90%; margin-top:20px}
#footCont .box{ float:left; width:48%; margin-right:2%;}
#footCont .box.nomargin{ margin-right:0;}
#footCont .box h4{ border-bottom:1px dotted #CCC; font-weight:bold; font-size:110%; padding-bottom:2px; margin-bottom:5px; }
#footCont .box p{ line-height:1.6em; padding-bottom:5px;}

@media(max-width:768px){
#footCont .box{ float:none; width:auto; margin-right:0; padding:10px;}
}

/*共通フッタ*/
#foot{ border-top:1px solid #CCC; padding:10px 0; clear:both;}


/*追加*/
img.sm{width:400px}
@media(max-width:768px){
img.sm{width:100%}
}