@charset "utf-8";

header .sitename {
	margin: 0 auto;
	width: 1100px;
	height: 100px;
	background-image: url(../images/pc/sitename.png);
	background-position: left bottom;
	background-repeat: no-repeat;
	text-indent: -10000em;
}

.mainview {
	position: relative;
	width: 100%;
	overflow: hidden;
}

#news {
	position: absolute;
	left: 50%;
	top: 0;
	width: 50%;
	height: 480px;
	z-index: 300;
}
#news .news_topics {
	background-image: url(../../images/bg_news_topics.png);
}
#news .news_topics .box {
	padding: 20px 0 30px 30px;
	width: 520px;
	height: 250px;
}
#news .news_topics .box h2 {
	margin-bottom: 10px;
	width: 486px;
	height: 40px;
	background-image: url(../../images/hl_news_topics.png);
	text-indent: -10000em;
}
#news .news_topics .box ul {
	overflow-y: scroll;
	width: 520px;
	height: 230px;
}
#news .news_topics .box ul li {
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 10px 10px 10px 110px;
	float: left;
	position: relative;
	width: 120px;
	height: 80px;
	line-height: 1.3;
	background-color: #fff;
}
#news .news_topics .box ul li:nth-child(2n) { margin-right: 0; }
#news .news_topics .box ul li a { display: block; }
#news .news_topics .box ul li img {
	position: absolute;
	left: 0;
	top: 0;
}
#news .news_official {
	background-image: url(../../images/bg_news_official.jpg);
}
#news .news_official .box {
	padding: 20px 0 30px 30px;
	width: 520px;
	color: #fff;
}
#news .news_official .box h2 {
	margin-bottom: 5px;
	font-size: 1.1em;
}
#news .news_official .box dl {
	border-bottom: solid 2px #B18080;
	overflow-y: scroll;
	height: 128px;
}
#news .news_official .box dl dt {
	padding: 5px 10px;
	border-top: solid 2px #B18080;
	float: left;
	clear: left;
	width: 80px;
}
#news .news_official .box dl dd {
	padding: 5px 10px;
	border-top: solid 2px #B18080;
	float: left;
	width: 370px;
}
#news .news_official .box dl dd a {
	color: #fff !important;
}

#topics h2 {
	margin-bottom: 30px;
	height: 92px;
	background-image: url(../../images/pc/topics_hl.png);
	background-position: center top;
	background-repeat: no-repeat;
	text-indent: -10000em;
}

#topics ul li {
	margin-bottom: 20px;
	background-color: rgba(255,255,255,0.9);
}

#topics ul li dl {
	padding-top: 171px;
	position: relative;
	min-height: 120px;
}

#topics ul li dl dt {
	padding: 20px 20px;
}

#topics ul li dl dt .date {
	display: block;
}

#topics ul li dl dd.image {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	height: 171px;
}

/*
#categories h2 {
	margin: 0 auto 30px auto;
	height: 132px;
	background-image: url(../../images/pc/categories_hl.png);
	background-position: center top;
	background-repeat: no-repeat;
	text-indent: -10000em;
}*/

.contents section#categories .container {
	padding-top: 30px;
}

#categories h2 {
	margin-bottom: 30px;
	width: 100%;
	height: 97px;
	background-image: url(../images/pc/concept_hl.png);
	background-position: center top;
	background-repeat: no-repeat;
	text-indent: -10000em;
}

#categories p.intro {
	margin-bottom: 30px;
	text-align: center;
}

#categories ul { margin-bottom: 20px; }

#categories ul li {
	margin: 0 25px 20px 0;
	float: left;
	width: 340px;
}
#categories ul li:nth-child(3n){
	margin-right: 0;
}

#categories ul li a {
	padding: 10px 20px 15px 20px;
	border: solid 2px #fff;
	display: block;
	width: 340px;
	color: #323232;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: 0 0 5px #ccc;
}
#categories ul li a dl {
	background-image: url(../../about/images/pc/categories_icons_daigomi.png);
}
#categories ul li a dl dt {
	margin-bottom: 0;
	padding-left: 70px;
	height: 45px;
	line-height: 45px;
	text-align: left;
	font-family: 'Noto Serif Japanese', serif;
	font-size: 1.3em;
	font-weight: 700;
	letter-spacing: 0.1em;
}
#categories ul li a dl dd { padding-left: 70px; }

#categories ul li.rice a { background-color: rgba(207,157,0,0.2); }
#categories ul li.rice a:hover { background-color: rgba(207,157,0,0.4); }
#categories ul li.rice dl { background-position: -130px -10px; }

#categories ul li.greentea a { background-color: rgba(131,172,0,0.2); }
#categories ul li.greentea a:hover { background-color: rgba(131,172,0,0.4); }
#categories ul li.greentea dl { background-position: -130px -110px; }

#categories ul li.apple a { background-color: rgba(206,0,0,0.2); }
#categories ul li.apple a:hover { background-color: rgba(206,0,0,0.4); }
#categories ul li.apple dl { background-position: -130px -210px; }

#categories ul li.konnyaku a { background-color: rgba(61,0,0,0.2); }
#categories ul li.konnyaku a:hover { background-color: rgba(61,0,0,0.4); }
#categories ul li.konnyaku dl { background-position: -130px -310px; }

#categories ul li.hitachioguro a { background-color: rgba(46,0,64,0.2); }
#categories ul li.hitachioguro a:hover { background-color: rgba(46,0,64,0.4); }
#categories ul li.hitachioguro dl { background-position: -130px -410px; }

#categories ul li.shamo a { background-color: rgba(135,69,0,0.2); }
#categories ul li.shamo a:hover { background-color: rgba(135,69,0,0.4); }
#categories ul li.shamo dl { background-position: -130px -500px; }

#categories ul li.kozo a { background-color: rgba(72,133,51,0.2); }
#categories ul li.kozo a:hover { background-color: rgba(72,133,51,0.4); }
#categories ul li.kozo dl { background-position: -130px -600px; }

#categories ul li.suzuri a { background-color: rgba(51,51,51,0.2); }
#categories ul li.suzuri a:hover { background-color: rgba(51,51,51,0.4); }
#categories ul li.suzuri dl { background-position: -130px -700px; }

#categories ul li.urushi a { background-color: rgba(178,0,0,0.2); }
#categories ul li.urushi a:hover { background-color: rgba(178,0,0,0.4); }
#categories ul li.urushi dl { background-position: -130px -800px; }

#lineup { margin-bottom: 0; }
.contents section#lineup .container {
	padding-top: 20px;
}

#lineup h2 {
	margin-bottom: 20px;
	width: 100%;
	height: 120px;
	background-image: url(../../images/pc/lineup_hl.png);
	background-position: center top;
	background-repeat: no-repeat;
	text-indent: -10000em;
}

#lineup .link {
	margin-top: 0 !important;
}

#lineup .link a {
	display: block;
	width: 100%;
	height: 80px;
	background-image: url(../../images/pc/lineup_btn.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	text-indent: -10000em;
	border-radius: 5px;
	box-shadow: 0 0 5px #aaaaaa;
}

#concept h2 {
	margin-bottom: 30px;
	width: 100%;
	height: 97px;
	background-image: url(../images/pc/concept_hl.png);
	background-position: center top;
	background-repeat: no-repeat;
	text-indent: -10000em;
}

#concept p.intro {
	text-align: center;
}

#concept ul.sns {
	margin: 0 auto;
	width: 740px;
}

#concept ul.sns li {
	margin-top: 10px;
	margin: 10px;
	float: left;
}

#concept ul.sns li img {
	border: solid 5px #fff;
	width: auto;
}

#information .container {
	padding-top: 25px;
	position: relative;
	min-height: 180px;
}

#information .container ul {
	margin-bottom: 30px;
}

#information .container ul li img {
	width: 100%;
}

#information h2 {
	margin-bottom: 10px;
	text-align: left;
}

#information dl {
	border-bottom: solid 2px #E5DCD5;
	width: 725px;
}

#information dl dt {
	padding: 10px 20px;
	border-top: solid 2px #E5DCD5;
	float: left;
	clear: left;
	width: 90px;
}

#information dl dd {
	padding: 10px 20px 10px 0;
	border-top: solid 2px #E5DCD5;
	float: left;
	width: 575px;
}

#information ul.sns {
	margin-bottom: 0;
	position: absolute;
	right: 0;
	bottom: 0;
}

#information ul.sns li {
	margin-top: 10px;
}

#information ul.sns li img {
	border: solid 5px #fff;
	width: auto;
}


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

header .sitename {
	margin-left: 15px;
	display: block;
	height: 100px;
	line-height: 100px;
	background-image: url(../images/sp/sitename.png);
}

#news {
	position: relative;
	left: inherit;
	top: inherit;
	width: 100%;
	height: 480px;
	z-index: 300;
}

#lineup h2 {
	width: 100%;
	height: 60px;
	background-image: url(../../images/sp/lineup_hl.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: -10000em;
}

#lineup .link {
	margin: 0 15px !important;
}

#lineup .link a {
	display: block;
	width: 100%;
	height: 95px;
	background-image: url(../../images/sp/lineup_btn.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	text-indent: -10000em;
	border-radius: 5px;
}

#topics .container {
	margin: 0 20px;
}

#topics .container ul li {
	margin-bottom: 20px;
	box-shadow: 0 0 5px #ccc;
}

#topics ul li dl {
	padding-top: 300px;
}

#topics ul li dl dd.image {
	height: 300px;
}

#categories ul {
	margin: 0 20px 30px 20px;
}

#categories ul li {
	margin-bottom: 10px;
	width: 100%;
}
#categories ul li:nth-child(2n) { margin-right: 0; }
#categories ul li a {
	width: 100%;
}
#categories ul li dl {
	background-repeat: no-repeat;
}
#categories .btn_onlineshop img {
	margin: 0 auto;
}

#concept .container {
	margin: 0 20px;
}

#concept h2 {
	margin-bottom: 30px;
	width: 100%;
	height: 110px;
	background-image: url(../../images/sp/concept_hl.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: -10000em;
}

#concept .container ul li {
	margin-bottom: 20px;
}

#concept ul.sns {
	margin: 0 auto;
	width: 360px;
}
#concept ul.sns li { margin: 10px 0 0 0; }

#information .container {
	margin: 0 20px;
	padding: 0;
	width: auto;
}

#information dl {
	border-bottom: solid 2px #E5DCD5;
}

#information dl dt {
	padding: 10px 20px 0 20px;
	border-top: solid 2px #E5DCD5;
	float: none;
	width: 100%;
	box-sizing: border-box;
}

#information dl dd {
	padding: 10px 20px 10px 20px;
	border-top: none;
	float: none;
	width: 100%;
	box-sizing: border-box;
}

#information ul {
	margin-bottom: 50px;
	position: relative;
	right: inherit;
	bottom: inherit;
	width: 100%;
}

#information ul li img {
	width: 100%;
	box-sizing: border-box;
}

}