@charset "utf-8";


#content{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: 968px;
	margin: 0 auto;
}

html #content{
	font-size: 62.5%;
}
body #content{
	color: #333333 ;
	font-size: 16px;
	line-height: 1.5;
}
#content img{
	height: auto;
	vertical-align: bottom;
}

#content .flexbox{
	display: flex;
	justify-content: space-between;
}

ul,ol,li{
	list-style: none;
	padding: 0;
}


/* ------------------------------------------------------
	Reset
 ------------------------------------------------------- */
.is-coffee a {
	text-decoration: underline;
	-webkit-transition: all .35s cubic-bezier(.75, 0, .35, 1);
	transition: all .35s cubic-bezier(.75, 0, .35, 1);
}

.is-coffee a:hover,
.is-coffee a:hover img {
 text-decoration:none;
 opacity:.8;
 }

.is-coffee a:before,
.is-coffee a:after,
.is-coffee a img {
	-webkit-transition: all .35s cubic-bezier(.75, 0, .35, 1);
	transition: all .35s cubic-bezier(.75, 0, .35, 1);
}

DIV#pankuzu_r {
	width:967px;
	margin:-20px auto 10px;
}


/*-----------------------------
          layout-common
-----------------------------*/

#content h1{
	font-size: 36px;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	margin: 20px 70px;
	padding: 20px 0;
	border-top: solid 4px #a46827;
	border-bottom: solid 4px #a46827;
	color: #5d370d;
}

#content .l-key_visual p{
	text-align: center;
}

#content .l-key_visual-image{
	margin: 30px 0;
}

#content #btn{
	padding: 0 50px;
}

#content #btn img{
	transition: all 0.3s;
}
	
#content #btn img:hover{
	opacity: 0.7;
	transition: all 0.3s;
}

#content h2{
	padding: 10px 0 0 20px;
	border-bottom: solid 2px #dddddd;
	border-left: solid 10px #a46827;
	background: none;
	font-size: 30px;
	font-weight: bold;
	color: #5d370d;
}

#content h3{
	margin: 30px 0 5px;
	padding: 10px 50px;
	border-bottom: solid 2px #967f5f;
	font-size: 24px;
	color: #5d370d;
}



#content .l-layout{
	padding-top: 40px;
}

#content .l-layout-read{
	padding: 5px 10px 5px 15px;
}

#content .visible-sp{
	display: none;
}


/* -------------------------
        	  sns
-----------------------------*/

#l-coffee-main  .u-inner{
	width: 967px;
	margin: 0 auto;
	text-align: right;

}

#l-coffee-main  .is-item_fb{
	display: inline-block;
}

#l-coffee-main  .is-item_twitter{
	display: inline-block;
}

#l-coffee-main  .l-mainSns_items{
	width: 967px;
}

#wrapper .is-coffee{
	position: relative;
}
	
#wrapper .l-mainSns_items .is-item_fb{
	position: absolute;
	top: 0;
	right: 200px;
}

#wrapper .l-mainSns_items .is-item_tw{
	position: absolute;
	top: 0;
	right: 117px;
}


DIV#pankuzu_r{
	width: 967px;
	margin: 20px auto 0;
}




#content .l-content-desc-read{
	font-size: 11px;
}
#content .bold{
	font-weight: bold;
}
#content .red{
	color: #E00003;
}

/*-----------------------------
          content01
-----------------------------*/



.maintenance_bg_area{
	background-image: url(../img/coffee_bg01.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

#maintenance_area{
	width: 968px;
	height: 455px;
	padding: 30px 0 0 0;
	background-position:  top right;
	background-repeat:  no-repeat;
	transition: all 0.2s;
}

#maintenance_area ol{
	margin: 30px 0 0 60px;
	font-size: 22px;
	font-weight: bold;
	color: #5d370d;	
}

#maintenance_area ol li{
	padding: 13px 0;
}

#maintenance_area ol a{
	padding-left: 30px;
	border-bottom: dotted 2px #5d370d;
	background-image: url(../img/coffee_ic00off.png);
	background-repeat: no-repeat;
	background-position: left top;
	font-size: 18px;
	font-weight: bold;
	color: #5d370d;	
	text-decoration: none;
	transition: all 0.2s;
}

#maintenance_area ol a:hover{
	background-image: url(../img/coffee_ic00.png);
	background-repeat: no-repeat;
	background-position: left top;
	color: #e6a22c;
	text-decoration: none;
	transition: all 0.2s;
}


#h3-01 h3{
	background: url(../img/coffee_ic01.png)no-repeat left 12px center;
}
#h3-02 h3{
	background: url(../img/coffee_ic02.png)no-repeat left 12px center;
}
#h3-03 h3{
	background: url(../img/coffee_ic03.png)no-repeat left 12px center;
}
#h3-04 h3{
	background: url(../img/coffee_ic04.png)no-repeat left 12px center;
}
#h3-05 h3{
	background: url(../img/coffee_ic05.png)no-repeat left 12px center;
}
#h3-06 h3{
	background: url(../img/coffee_ic06.png)no-repeat left 12px center;
}




#contents01 .necessary{
	width: 60%;
	margin: 30px auto 60px;
	padding: 0 0 20px 0;
	border: solid 2px #967f5f;
	text-align: center;
}

#contents01 .necessary .title{
	margin: 0 0 30px 0;
	padding: 5px;
	font-weight: bold;
	background-color: #967f5f;
	color: #ffffff;
	font-size: 20px;
}


#contents01 .point{
	width: 65%;
	margin: 20px auto;
	padding: 20px;
	border: dashed 2px #cccccc;
	box-sizing: content-box;
}

#contents01 .point .bold{
	text-align: center;
	font-size: 20px;
}

#contents01 .point .textbox{
	padding-right: 200px;
	background-image: url(../img/coffee_img06.jpg);
	background-repeat: no-repeat;
	background-position: right -5px center;
}

#contents01 .point ol{
	padding-left:  15px; 
}

#contents01 .point .red{
	padding: 40px 200px 40px 15px;
	background-image: url(../img/coffee_img07.jpg);
	background-repeat: no-repeat;
	background-position: right -5px center;
}






/*-----------------------------
          content02
-----------------------------*/

#consumables-area{
	height: 880px;
	margin: 30px 0 90px 0;
	background: url(../img/coffee_bg02.png)no-repeat 50%;
	position: relative;
}

#consumables-area li a{
	display: block;
	text-align: center;
	width: 200px;
	height: 200px;
	margin: 8px;
	border: dotted 2px #905b38;
	border-radius: 50%;
	background: #fffcf5;
	box-shadow: 3px 3px 3px #cccccc;
	color: #905b38;
	font-size: 14px;
	text-decoration: none;
	transition: all .25s;
}

#consumables-area li a:hover{
	box-shadow: none;
	-webkit-transition: all .25s cubic-bezier(.75, 0, .35, 1);
	transition: all .25s cubic-bezier(.75, 0, .35, 1);
}


#consumables-area li a img{
	max-width: 100%;
	margin-top: 15px;
	border-radius: 60px;
}

#consumables-area li a span{
	display: block;
}

#consumables_link01{
	position: absolute;
	top: -15px;
	left: 380px;
}
#consumables_link02{
	position: absolute;
	top: 80px;
	left: 95px;
}

#consumables_link03{
	position: absolute;
	top: 345px;
	left: 0;	
}

#consumables_link04{
	position: absolute;
	bottom: 80px;
	left: 95px;	
}

#consumables_link05{
	position: absolute;
	bottom: -25px;
	left: 380px;	
}

#consumables_link06{
	position: absolute;
	bottom: 80px;
	right: 95px;		
}

#consumables_link07{
	position: absolute;
	top: 345px;
	right: 0px;	
}

#consumables_link08{
	position: absolute;
	top: 80px;
	right: 95px;	
}





/* ------------------------------------------------------------------------------------------------------------
	media
 ------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:640px) {

	/* -------- common -------- */
	DIV#pankuzu_r {
		line-height:1.5;
		width:auto;
		margin:0;
		font-size: 12px;
	}
	
	#wrapper .l-mainSns_items .is-item_fb{
		position: absolute;
		top: -30px;
		right: 85px;
	}

	#wrapper .l-mainSns_items .is-item_tw{
		position: absolute;
		top: -30px;
		right: 5px;
	}

	
	
	#content{
		width: 100%;
		margin-top: 30px;
	}
	
	#content img{
		max-width: 100%;
	}
	
	#content a:hover{
		opacity: 1;
	}
	
	#content .visible-sp{
		display: block;
	}
	#content .visible_pc{
		display: none;
	}
	
	
	#content .l-layout-read,
	p,li{
		font-size: 15px;
	}
	
	#content .l-content-main-inner p{
		font-size: 15px;
		line-height: 1.6;
	}
	
	#content .flexbox{
		display: block;
	}
	
	#content .l-key_visual-image img {
		max-width:100%;
		height:auto;
	}
	
	#content .l-coffee-main {
		padding:15px;
		background: #fff;
	}
	
	#content ul,
	#content ol,
	#content li,
	p{
		list-style: none;
		padding: 0;
		font-size: 15px;
	}
	
	
	
	/* -------- content -------- */
	
	#content h1{
		font-size: 22.5px;
		margin: 10px;	
	}
	
	#content .l-layout-read{
		margin: 20px 0;
	}
	
	#content #btn{
		margin: 5px;
		padding: 0;
	}

	#content #btn ul{
		list-style: none;
		padding: 0;
	}
	
	#content #btn li:first-child{
		margin: 0 0 10px;
	}
	
	#content .l-contentbox_01,
	#content .l-layout{
		margin: 5px;
	}
	
	
	#content .l-layout-title{
		font-size: 20px;
	}
	
	
	.maintenance_bg_area{
		background: none;
	}
	
	
	
	#maintenance_area{
		width: 100%;
		height: auto;
		background: none;
	}
	
	#maintenance_area ol{
		margin: 0 auto;
		padding: 0 30px;
		list-style: none;
	}
	
	#maintenance_area ol li{
		float: left;
		width: 50%;
		margin: 10px 0;
		padding: 0;
		text-align: center;
	}
	
	
	#maintenance_area ol a{
		display: block;
		height: 65px;
		margin-right: 10px;
		padding: 5px;
		border: dotted 2px #5d370d;
		border-radius: 10px;
		box-shadow: 0 0 2px #fffcf5;
		background-color: #fffcf5;
		background-image: url(http://ec-club.panasonic.jp/layout/store/consumables/common/img/arr-w-a.png);
		background-repeat: no-repeat;
		background-position: bottom 10px center;
		font-size: 14px;
	}
	
	#maintenance_area ol a:nth-of-type(2n){
		margin: 0;
	}
	
	#maintenance_area ol a:hover{
		background-color: #fffcf5;
		background-image: url(http://ec-club.panasonic.jp/layout/store/consumables/common/img/arr-w-a.png);
		background-repeat: no-repeat;
		background-position: bottom 10px center;
	}
	
	
	
	
	#content h3{
		padding-right: 0;
		background-color: #ffffff;
		font-size: 16px;
	}

	#contents01 .necessary{
		width: auto;
		margin: 20px 10px;
	}
	
	#contents01 .necessary .title{
		font-size: 17px;
	}
	
	
	
	
	
	#contents01 .point {
		width: auto;
		margin: 10px;
		padding: 10px;
	}
	
	#contents01 .point .textbox{
		padding: 0;
		background: none;
	}
	
	#contents01 .point .red{
		padding: 0;
		background: none;
	}
	
	#contents01 .point img{
		margin: 0 auto;
	}
	
	
	
	
	
	/* -------- content02 -------- */
	
	#consumables-area{
		height: auto;
		margin: 15px;
		background: none;
	}
	
	
	#consumables-area li a{
		width: auto;
		height: auto;
		margin: 0;
		border-radius: 6%;
		vertical-align: middle;
	}
	
	
	#consumables-area li{
		float: left;
		width: 48%;
		height: auto;
		margin: 10px 0;
		border-radius: 6%;
		vertical-align: middle;
	}
	
	#consumables-area li:nth-child(odd){
		margin-right: 4%;
	}
	
	#consumables_link01,#consumables_link02,
	#consumables_link03,#consumables_link04,
	#consumables_link05,#consumables_link06,
	#consumables_link07,#consumables_link08,
	#consumables_link09{
		margin: 0;
		padding: 0;
		position:static;
		
	}
	
	
	#float-btn-backtotop .bttbtn a{
	display: none;
}
	
	
	
	
#content .u-inner{
	position: relative;
	top: 5px;
	right: -10px;
}

#content .is-item_tw{
	position: relative;
	top: 5px;
	right: 0;
}


	
	
	
	
	/*-----clearfix sp-----*/
	#maintenance_area ol:after,
	#consumables-area:after{
	display: block;
	clear: both;
	content: "";}
	
	
	
	
	
	
	
	
}
	




	/*-----clearfix pc -----*/
	.l-sns-list:after{
	display: block;
	clear: both;
	content: "";}


#main .l-mainSns_items {
	width: auto;
	max-width: 100%;
}
strong {
	font-weight: bold;
}
#l-coffee-main {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 968px;
  margin: 0 auto;
}
@media screen and (min-width: 641px) {
	DIV#pankuzu_r {
		width: auto;
		max-width: 810px;
		margin: 0 !important;
		height: auto;
	}

	#l-coffee-main {
		position: relative;
	}

	#l-coffee-main .u-inner {
		width: auto;
	}
	#l-coffee-main .is-item_fb {
		position: absolute;
		right: 80px;
		top: 15px;
	}
	#l-coffee-main .is-item_tw {
		position: absolute;
		right: 0;
		top: 19px;
	}

	#content .l-key_visual-image {
		margin-top: 0;
	}

}
@media screen and (max-width: 640px) {
	DIV#pankuzu_r {
		padding: 0;
	}
	#content {
		margin-top: 15px;
	}
	#l-coffee-main {
		width: auto;
	}
	#l-coffee-main .u-inner {
		position: static;
		top: 0;
		width: auto;
		margin: 0 10px;
	}
	#l-coffee-main .is-item_fb {
		position: relative;
		top: 0;
	  right: 0;
	}
	#l-coffee-main .is-item_tw {
		top: 6px;
		display: inline-block;
	}
	#l-layout-box01 strong {
		font-weight: normal;
	}
	#maintenance_area ol a {
		height: 80px;
	}
	.l-contentbox_01 h3 {
		font-weight: bold;
	}
}