@charset "utf-8";


@media screen and (max-width: 768px) {
	.sp-none {
		display: none !important;
	}
	.pc-none {
		display: block !important;
	}
}
@media screen and (min-width: 769px) {
	
	.sp-none {
		display: block !important;
	}
	.pc-none {
		display: none !important;
	}
	
}

a {
	-webkit-transition: 280ms ease-in-out;
	    transition: 280ms ease-in-out;
}
a:hover {
	opacity: .7;
}



html {
    height: 100%;
}


body {
	 font-size: 14px; 
	/*font-family:"FOT-筑紫明朝 Pr6 D","TsukuMinPr6-D","游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo","Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; */
	font-family:"游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo","Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; 
	margin: 0;
	padding: 0;
	color: #333333;
	background-image: url(../img/common/bgimage.gif);
}

ul, ol, dl { 
	padding: 0;
	margin: 0;
	list-style: none;

}

h1,h2,h3,h4,h5 {
		font-weight:nomal;
}



a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}



/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}



a:link {
	color:#333333;
	text-decoration: none !important; 
}
a:visited {
	color: #333333;
	text-decoration: none !important;
}
a:hover, a:active, a:focus { 
	text-decoration: none  !important;
	opacity:0.8;
}

img {
    border: medium none;
    margin: 0;
}

p {
	font-size:14px;
	line-height:24px;
}

.clear {
    clear: both;
}


.

/* ヘッダー
-----------------------------------------------------------------------------*/
#submenu {
}

#submenu ul {
    float:right;
    margin-top:5px;
    list-style-type: none;
    margin: 0 10px 0 0;
    padding: 0;
}

#submenu ul li {
    float: left;
    margin-left: 20px;
    padding: 0;
    display:inline-block;
    font-size:12px;
    height: 20px;
    display: block;
}		

header {
    margin:0 auto;
    padding: 5px 5px;
    height:230px;
    overflow:hidden;
    /*max-width:1024px;*/
    box-shadow: 1px 1px 3px #ccc;
}


.pc_header{
    max-width:1024px;
    margin:0 auto;
}

header #logo {
    width: 300px;
    margin-left:20px;
}

header #logo a img {
    border: medium none;
    margin: 0;
	position: relative;
    top: 20px;
}

header .order_info{
	float: right;
	position: relative;
	top:-40px;
}

header .order_info dl{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 15px;
}

header .order_info dt{
	font-size:12px;
	margin-left:10px;
	line-height: 26px;
}
header .order_info dd{
	font-family: "FOT-筑紫明朝 Pr6 D","tsukuMinPr6-D";
	font-size:24px;
	margin-left:10px;
}

header .order_info .faxdl {
	display: flex;
	justify-content: flex-end;
}

header .order_info .faxdl p{
	font-size:12px;
	margin-right: 10px;
	line-height: 30px;
}

header .order_info .faxdl ul li{
	display: inline-block;
	margin-left: 10px;
	box-shadow: 1px 1px 3px #ccc;
}

header .order_info .faxdl ul li a{
	font-size:13px;
	text-align: center;
	color:#ffffff;
	padding: 5px 35px;
	border-radius: 3px;
	text-decoration: none;

}
	
header .order_info .faxdl ul .pdf-file a{
	background-color:#C70000;

}

header .order_info .faxdl ul .excel-file a{
	background-color:#008000;

}

header .order_info .faxdl ul .catalog a{
	background-color:#4680AE;

}

header .order_info .faxdl ul .catalog {
	margin-right: 0;

}

#top .mainmenu {
	clear:both;
	display:block;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	top:-16px;
	/*left:40px;*/
	max-width:1024px;
	}
	

.mainmenu ul {
    list-style-type: none;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.mainmenu li a {
    display: block;
    height: 68px;
}
.mainmenu li {
    font-size:17px;
    font-family: "FOT-筑紫明朝 Pr6 D","TsukuMinPr6-D";
    display: block;
    float: left;
    height: 68px;
    margin: 0;
    padding: 0;
}
.mainmenu li a {
	/*margin-left: 30px;*/
	/*margin-right:30px;*/
	background: url(../img/common/circle_gray.svg);
	background-repeat: no-repeat;
	background-position: left 5px;
	background-size:15px;
	padding-left: 20px;
	
}


.mainmenu li a:hover,
.mainmenu li a:active,
.mainmenu li.current a{
	background: url(../img/common/circle_red.svg);
	background-repeat: no-repeat;
	background-position: left 5px;
	background-size:15px;
	padding-left: 20px;
}


.slider{
	width:100%;

}
.slider img{
  	width: 100%;
    margin: 0 auto;
}
	

	
	
.maincontents {
    margin: 20px auto 40px;
    width: 1024px;
    padding:0 5px;
     /*padding: 0;
    width: 1040px;*/
}


.maincontents .caption{
	font-size:14px;
	text-align: left;
	}


.category_ban_blk{
	display:flex;
	justify-content:space-between;
	flex-wrap: wrap;
	margin:20px 0;
}


.category_ban_blk li{
	width:332px;
	margin: 10px 0 0 0;
}

.category_ban_blk li img{
	box-shadow: 1px 1px 3px #ccc;
}

/* サイドバー
-----------------------------------------------------------------------------*/
.maincontents .sidebar {
	width:194px;
	float:left;
	padding:0;
	margin-top:30px;
	}


.sidebar h3 {
	font-size:16px;
	font-weight:normal;
	color:#ffffff;
	background-color: #333333;
	padding-left:20px;
	margin-bottom:0px;
}


	
.sidebar h4 {
	font-size:16px;
	font-weight:normal;
	margin:20px 0 10px 0;
	background: url(../img/common/circle_red.svg);
	background-repeat: no-repeat;
	background-position: left 5px;
	background-size:8%;
	padding-left: 25px;
	border-bottom:solid 1px #cccccc;
	} 

.sidebar  ul li {
	list-style-position:outside;
	list-style:none;
	margin-top:5px;
	}

.sidebar  ul li a {
	line-height:10px;
	text-decoration:none;
	color:#333333;
	font-size:16px;
	font-weight: bold;
	}



.sidebar ul li ul{
	margin-bottom:20px;
}

.sidebar ul li ul li{
	line-height: 20px;
	
}

.sidebar ul li ul li a{
	font-size:14px;
	font-weight: normal;
	}



.sidebar .lanking{
	margin-bottom: 20px;
	
}

.sidebar .lanking_box img {
	margin:10px 0 10px 0 ;
	}

.sidebar .lanking_box h5{
	font-size:16px;
	font-weight: normal;
}



.sidebar .lanking_box a{
	color:#E13828;
	font-size:16px;
	font-weight:normal;
	text-decoration:none;
	line-height:13px;
	}

.sidebar .banner_blk{
	margin: 20px 0;
}


/* 右カラム
-----------------------------------------------------------------------------*/

.maincontents .rightcontents{
	width:800px;
	float:right;
	}

.rightcontents #news_area{
	margin-bottom: 40px;
}


.rightcontents h2{
	font-size:20px;
	font-weight:normal;
	background: url(../img/common/circle_red.svg);
	background-repeat: no-repeat;
	background-position:top 12px left 5px;
	background-size:2%;
	padding-left: 25px;
	}

#news_area .news_contents {
    padding: 0px;
    max-height: 200px;
    /* height: auto !important; hack? */
    /* height: 260px; hack? */
    overflow: auto;
    overflow-y: scroll;
}
#news_area .news_contents .news_post {
    overflow: hidden;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
	}
#news_area .news_contents .news_post .date {
    float:left;
    font-size: 13px;
    width: 15%;
}


#news_area .news_contents .news_post .news_textblk {
	float:left;
    width: 85%;
}


#news_area .news_contents .news_post .title {
    color: #E13828;
    font-size: 14px;
    font-weight: bold;
    margin:0 0 5px 0;
}

#news_area .news_contents .news_post .title a{
   color: #E13828;
    font-size: 15px;
    font-weight: bold;
}

#news_area .news_contents .news_post .text {
	font-size: 14px;
	
}




/* おすすめ商品
-----------------------------------------------------------------------------*/

#recommend_area .product_flexbox {
	display:flex;
	justify-content:space-between;
	flex-wrap: wrap;	
}




#recommend_area .product_item {
	width:185px;
	margin-top: 20px;
}

#recommend_area .product_item img{
box-shadow: 1px 1px 5px #ccc;
}




#recommend_area .product_item .product_name{
	margin-top: 10px;
	font-size:16px;
	line-height: 24px;
}



#recommend_area .product_item .sale_price{
	color:#E13828;
	font-size:bold;
}


#recommend_area .product_item .comment{
	font-size:13px;
	line-height: 18px;
}



/* マルイチ商店について
-----------------------------------------------------------------------------*/
#about_area {
	margin-top:40px;
	border-bottom: 1px solid #ccc;
}



#about_area h2{
	background-image: none;
	padding: 0!important;
	border: none;
		
}

#about_area h3{
	font-family: "FOT-筑紫明朝 Pr6 M","TsukuMinPr6-M";
	font-size: 24px;
	color: #4680AE;
	line-height: 30px;
	font-weight: normal;
}

#about_area .lede{
	margin-top: 20px;
}

#about_area .text_blk p{
	margin-top: 20px;
}


#about_area .l-photo_blk{
	margin:50px 0;
	display: flex;
	flex-direction :row;
}

#about_area .l-photo_blk .img_blk{
	width:400px;
	padding:0;
}
#about_area .l-photo_blk .text_blk{
	width:400px;
	padding:0 0 0 20px;
} 

#about_area .r-photo_blk{
	margin:50px 0;
	display: flex;
	flex-direction :row-reverse;
}


#about_area .r-photo_blk .img_blk{
	width:400px;
	padding:0 0 0 20px;
}


#about_area .r-photo_blk .text_blk{
	width:400px;
	padding:0;
} 


.facebook_banner{
	margin:30px 0;
}
.facebook_banner iframe{
  width: 100%;
}

#back-top {
    bottom: 100px;
    position: fixed;
    right: 30px;
    display: none;

}
#back-top a {
   background: none repeat scroll 0 0 #000;
    border-radius: 50%;
    color: #fff;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 60px;
    padding-top: 5px;
    text-align: center;
    width: 60px;
    opacity: 0.9;
    line-height: 3;
}

#back-top a:hover {
transform: translateY(-1px);
}

footer {
	clear: both;
	margin-top: 20px;
	 padding-top: 50px;
	background-color:rgba(249,249,241,0.5);
	border-top:1px solid #ccc;
	width:100%
}

.footer_inner{
	width:1024px;
	margin: 0 auto;
	padding:0 10px;
}


.footer_menu {
    text-align: left;
	margin-bottom:30px;
}

.footer_menu ul li {
	display: inline-block;
    list-style-type: none;
	list-style-position:inside;
}

.footer_menu ul li a {
    text-decoration: none;
}

.footer_logo img{
	width:20%;
}

.profile {
    clear: both;
    color: #333333;
    font-size: 14px;
    margin:10px 0 50px 0;
}

.profile ul li{
	display:inline-block;
}

.profile ul .fax{
	margin-left:20px;
}


.copyright {
	background-color:#000000;
    color: #ffffff;
    font-size: 11px;
	text-align: center;
}