@charset "UTF-8";
* {-webkit-box-sizing: border-box; box-sizing: border-box;}
html {font-size: 62.5%;}
body {
	font-size: 1.0rem;
	font-family: "Helvetica Neue","Noto Sans JP","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #333;
	background: #ECEBDF;
}

a:link { text-decoration:none;}
/*
a:visited { color: #000080; }
a:hover { color: #ff0000; }
a:active { color: #ff8000; }
*/
a img {
	-webkit-transition: all 0.3s ease;
	-webkit-transition: all	0.3s ease;
	transition: all	0.3s ease;
}
a img:hover {opacity: .7;}
main {display: block;}
span.bold {font-weight: bold;}

.loading {
	width: 100%;
	height: 100%;
	background: #ECEBDF;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20000;
}
.loading figure {
	width: 360px;
	height: autox;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.loading figure figcaption {
	text-align: center;
	padding: 10px 0;
	font-size: 1.4rem;
	color: #988575;
	font-weight: bold;
}

.fbox_center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.fbox_left {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}
.fbox_justify {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.fbox_middle {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.header {
	height: 300px;
	background-image: url(../images/header_bg.jpg);
	background-position: top center;
	background-size: auto 100%;
}
.header .inner {
	margin: 0 auto;
	width: 1024px;
	height: 100%;
}
.header__logo {
	margin: 0 auto;
	padding: 40px 0;
	width: auto;
	text-align:center;
}
#topblock .sp,
#topblock nav {display: none;}
#deptblock .header {height: 150px; background-size: 100% auto;}
#deptblock .header__logo {padding: 0;}
#deptblock .header img {max-height: 150px;}

.navigation {
	padding: 15px 0;
	width: 100%;
	height: 150px;
	background: #fff;
}
.navigation__list {
	margin: 0 auto;
	width: 1024px;
}
.navigation__list-item {
	width: 23.4%;
	margin-top: 8px;
	margin-bottom: 7px;
}
.navigation__list-item p{
	width: 100%;
	height: 46px;
	padding: 0;
	font-size: 1.8rem;
	line-height: 44px;
	text-align: center;
	font-weight: bold;
	border-radius: 23px;
	border: 1px solid #988575;
	color: #fff;
	background: #988575;
	filter: drop-shadow(3px 3px 0 rgba(220,221,214,1));
	}
.navigation__list-item a.current p,
.navigation__list-item a:hover p{
	background: #006441;
	filter: drop-shadow(1px 1px 0 rgba(220,221,214,1));
}
.navigation__list-item a.current p.gp,
.navigation__list-item a:hover p.gp{
	background: #C0272D;
}

.content {
	width: 1024px;
	margin: 0 auto 200px;
}
#deptblock .content {
	margin: 80px auto 200px;
	padding-bottom: 100px;
	border-radius: 10px;
	background: #fff;
	background-image: url(../images/bg_ttl_dept.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
#deptblock .content.gp {
	background-image: url(../images/bg_ttl_gp.jpg);
}

#topblock .wrap {
	width: 100%;
	margin: 0 auto;
}
#deptblock .wrap {
	width: 780px;
	margin: 0 auto;
/*
	border:1px solid #c00;
*/
}
.wrap:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}

#pageTop {
	position: relative;
	display: inline-block;
	position: fixed;
	width: 42px;
	hight: 42px;
	bottom: 30px;
	right: 50%;
	margin-right: -510px;
	z-index: 1000;
}
#pageTop:hover {opacity: 1;}

.footer {
	width: 100%;
	margin: 0 auto;
	padding: 90px 0 2em 0;
	font-size: 1.2rem;
	border-top: 1px solid #cdcbbc;
	text-align: center;
	background:#4D4D4D;
}
.footer .menu, 
.footer .ascii_cont {
	width: 1024px;
	margin: 0 auto 60px;
}
.footer .menu li { width: 24%; }
.footer .menu li p{
	width: 100%;
	height: 46px;
	margin-bottom: 15px;
	padding: 0;
	font-size: 1.8rem;
	line-height: 42px;
	text-align: center;
	font-weight: bold;
	border-radius: 23px;
	border: 2px solid #989898;
	color: #989898;
}
.footer .menu li a:hover p{
	border: 2px solid #006441;
	background: #006441;
	color: #fff;
}
.footer .menu li a:hover p.gp{
	border: 2px solid #C0272D;
	background: #C0272D;
}

.footer .logo {width:180px;}
.footer .footMenu {
	width: auto;
	max-width: 750px;
}
.footer .footMenu:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}
.footer .footMenu ul {width:100%;}
.footer .footMenu li{
	float:right;
	margin: 0 0 1em 1em;
	padding: 0 0 0 1em;
	font-size: 1.4rem;
	color: #989898;
	border-left:1px solid #989898;
}
.footer .footMenu li:first-child {
	padding-right: 1em;
	border-right:1px solid #989898;
}
.footer .footMenu li a{color: #989898;}
.footer .footMenu li a:hover {color: #fff;}
.footer address {
	font-size: 1.2rem;
	color: #989898;
	text-align:right;
}
.navigation__ttl, 
#toggle {display: none;}


/* ===== トップページ ===== */
#topblock .thumbs h2 {
	padding: 80px 0;
	text-align:center;
}
#topblock .thumbs ul {
	width: 100%;
}
#topblock .thumbs li {
	width: 23.4%;
	margin-bottom: 45px;
}
#topblock .thumbs li p{
	width: 100%;
	height: 46px;
	margin-bottom: 15px;
	padding: 0;
	font-size: 1.8rem;
	line-height: 46px;
	text-align: center;
	font-weight: bold;
	border-radius: 23px;
	border: 1px solid #aa965c;
	color: #fff;
	background: #988575;
	filter: drop-shadow(3px 3px 0 rgba(220,221,214,1));
}
#topblock .thumbs li a:hover p{
	border: none;
	color: #8B6239;
	background: none;
	background-image: url(../images/bg_btn.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

#topblock figure {text-align: center;}

.banner {
	margin: 70px auto;
	padding: 70px 0;
	position: relative;
}
.banner:before, 
.banner:after {
	content: '';
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 2px;
	background-image: url(../images/dotline.png);
	background-size: contain;
	background-repeat: repeat-x;
	vertical-align: middle;
}
.banner:before {top:0;}
.banner:after {bottom:0;}
.banner a {text-align: center;display: block;}


.newslist {width: 100%;}
.newslist h3.arrow {
	font-size: 2.2rem;
	line-height: 120%;
	font-weight: bold;
	color: #988575;
	padding-left: 30px;
	margin-bottom: 1.4em;
	position: relative;
}
.newslist h3.arrow:before {
	content: '';
	display: inline-block;
	width: 25px;
	height: 24px;
	background-image: url(../images/arrow.png);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	top:0.1em;
	left:0;
}

.newslist .roundbox{
	width: 100%;
	height: auto;
	margin-bottom: 0;
	padding: 80px 0;
	border-radius: 10px;
	border: 1px solid #fff;
	background: #fff;
	filter: drop-shadow(3px 3px 0 rgba(220,221,214,1));
	}

.newslist ul {margin:0 auto; width: 88%;}
.newslist ul:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}
.newslist li {
	min-height: 140px;
	padding: 0 0 2em 0;
	margin: 0 0 2em 0;
	border-bottom: 1px solid #989898;
}

.newslist .square {
	height: 110px;
	width: 110px;
	z-index: 1;
	position: relative;
	overflow: hidden;
	float:left;
}
.newslist .square img {
	position: absolute;
	width: 100%;
	height: auto;
}
_:-ms-lang(x)::-ms-backdrop, .newslist .square img {max-width:100% !important;} 

.newslist p {
	color: #333;
	font-size: 1.4rem;
	padding-left: 130px;
}
.newslist p.sub {
	color: #333;
	font-weight: bold;
	font-size: 1.4rem;
	padding-bottom: .2em;
	word-wrap: break-word;
}
.newslist p.lead {
	color: #47A7F4;
	font-weight: bold;
	font-size: 1.8rem;
	padding-bottom: 1em;
}
.newslist p.date {
	font-size: 1.2rem;
	text-align: right;
}


/* ===== 部門ページ = 受賞製品 ===== */
#deptblock h1.dept {
	font-size: 3rem;
	line-height: 115px;
	font-weight: bold;
	color: #fff;
	text-align:center;
	margin-bottom: 50px;
}

#deptblock .award {width: 100%;}
#deptblock .product {margin: 0 auto 15px; width: 100%; height: 110px;}
#deptblock .product .prize {
	margin-right: 35px;
	height: 110px;
	width: 110px;
	z-index: 1;
	position: relative;
	overflow: hidden;
}
#deptblock .product .medal, 
#deptblock .product h2 {
	font-size: 2.4rem;
	line-height: 120%;
	font-weight: bold;
	color: #333;
}
#deptblock .product .medal {color: #D3145A;}
#deptblock .product h2 span {font-size: 2.0rem;}

#deptblock figure.item {
	width: 100%;
	text-align:center;
	margin-bottom:90px;
}


/* ===== 部門ページ = ポイント＆コメント ===== */
#deptblock .department {width: 100%;}
#deptblock .department .portrait {
	height: 200px;
	width: 200px;
	z-index: 1;
	position: relative;
	overflow: hidden;
	float:left;
}
/*
#deptblock .department .portrait img {
	position: absolute;
	width: 200%;
	height: auto;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: initial;
}
_:-ms-lang(x)::-ms-backdrop, #deptblock .department .portrait img {max-width:200% !important;} 
*/

#deptblock .box {
	margin-bottom: 80px;
	padding-bottom: 80px;
	width: 100%;
	background-image: url(../images/bar.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
}
#deptblock .department .judge p {
	color: #333;
	font-size: 1.6rem;
	line-height: 160%;
	margin-left: 230px;
	word-wrap: break-word;
}
#deptblock .department .judge .commenter {
	font-size: 1.8rem;
	line-height: 160%;
	font-weight: bold;
	color: #333;
	text-align:left;
	padding-bottom: .4em;
	margin-bottom: 1em;
	border-bottom:2px solid #ddd;
	margin-left: 230px;
}
#deptblock .department .judge .commenter span {font-size: 2.1rem;}

/* 部門ページ = ポイント＆コメント */
#deptblock .txtblock {margin: 0 0 2em; width: 100%;}
#deptblock .txtblock h3 {
	padding-left: 60px;
	height: 45px;
	font-size: 2.1rem;
	line-height: 45px;
	font-weight: bold;
	color: #fff;
	margin-bottom: 1em;
	background-image: url(../images/bg_subttl_dept.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
#deptblock .gp .txtblock h3 {background-image: url(../images/bg_subttl_gp.jpg);}
#deptblock .txtblock .wrap {padding-bottom: 80px;}

#deptblock .txtblock .portrait {
	height: 200px;
	width: 200px;
	z-index: 1;
	position: relative;
	overflow: hidden;
	float:left;
}
/*
#deptblock .txtblock .portrait img {
	position: absolute;
	width: 200%;
	height: auto;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: initial;
}
_:-ms-lang(x)::-ms-backdrop, #deptblock .txtblock .portrait img {max-width:200% !important;} 
*/

#deptblock .txtblock p {
	color: #333;
	font-size: 1.6rem;
	line-height: 160%;
	word-wrap: break-word;
}
#deptblock .txtblock p a{
	color:#988575;
	text-decoration:underline;
}
#deptblock .txtblock p.point {
	font-size: 2.0rem;
  font-weight: bold;
}
#deptblock .txtblock .judge p {margin-left: 230px;}

.itemlink {
	color: #333;
	font-size: 1.6rem;
	line-height: 160%;
	font-weight: bold;
	text-align:right;
	word-wrap: break-word;
}
.itemlink a:link{
	color:#988575;
	text-decoration:underline;
}




@media screen and (max-width: 1023px) {
	.wrap {
		width: 100%;
		max-width: 959px;
		padding: 0;
	}
	.header, 
	#deptblock .header {
		height: 200px;
		background-size: auto 100%;
	}
	.header .inner {width: 100%;}
	.header__logo {padding: 0;}
	.header__logo img, 
	#deptblock .header img {
		max-height: 200px;
	}

	#toggle {
		position: absolute;
		top: 1em;
		left: 1em;
		display: block;
		z-index: 100;
		cursor: pointer;
		width: 50px;
		height: 50px;
		background: #f1f1f1;
	}
	#toggle .txt {
		text-align: center;
		font-weight: bold;
		color: #1d2b53;
		position: absolute;
		left: 50%;
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		bottom: 0;
	}
	#toggle div {
		position: relative;
	}
	#toggle div span {
		display: block;
		height: 2px;
		background: #1d2b53;
		position: absolute;
		width: 25px;
		left: 13px;
		-webkit-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;
	}
	#toggle div span:nth-child(1) {
		top: 10px;
	}
	.open #toggle div span:nth-child(1) {
		background: #1d2b53;
		top: 16px;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	#toggle div span:nth-child(2) {
		top: 18px;
	}
	.open #toggle div span:nth-child(2) {
		opacity: 0;
	}
	#toggle div span:nth-child(3) {
		top: 26px;
	}
	.open #toggle div span:nth-child(3) {
		background: #1d2b53;
		top: 16px;
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}

	.navigation {
		width: auto;
		height: auto;
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		border-top: none;
		border-bottom: none;
		background-color: rgba(59,57,57,0.9);
		z-index: 99;
		padding: 25px 3em 20px 3em;
	}
	.navigation__list {
		width: 100%;
	}
	.navigation__ttl {
		margin-bottom: 10px;
		text-align: center;
		font-size: 2.4rem;
		color: #fff;
		font-weight: bold;
		display: block;
	} 

	.navigation__list-item {
		width: 48%;
		height: auto;
		font-size: 2.4rem;
		margin-top: 0;
		margin-bottom: 15px;
	}
	.navigation__list-item p{
		width: 100%;
		height: 46px;
		padding: 0;
		font-size: 1.8rem;
		line-height: 44px;
		text-align: center;
		font-weight: bold;
		border-radius: 23px;
		border: 2px solid #fff;
		color: #fff;
		background: none;
		filter: none;
		filter: inherit;
		filter: initial;
		filter: unset;
		}
	.navigation__list-item a:hover p, 
	.navigation__list-item a:hover p.gp{
		background: none;
		filter: none;
		filter: inherit;
		filter: initial;
		filter: unset;
	}

	.content {
		margin: 0 auto 3em;
		padding: 0;
		width: 96%;
	}
	#deptblock .content {
		margin: 40px auto;
		padding-bottom: 40px;
	}

	#topblock .thumbs h2 {
		padding: 50px 0;
		text-align:center;
	}

	#topblock .thumbs li {
		width: 48%;
		margin-bottom: 45px;
	}
	#topblock .thumbs li p{
		width: 100%;
		height: 40px;
		margin-bottom: 15px;
		padding: 0;
		font-size: 1.6rem;
		line-height: 38px;
		text-align: center;
		font-weight: bold;
		border-radius: 20px;
		border: 1px solid #aa965c;
		color: #fff;
		background: #988575;
		filter: drop-shadow(3px 3px 0 rgba(220,221,214,1));
	}
	.banner {
		margin: 0 auto 40px;
		padding: 40px 0;
		position: relative;
	}

	.newslist .roundbox{padding: 30px 0;}
	.newslist ul {margin:0 auto; width: 90%;}


#pageTop {
	position: relative;
	display: inline-block;
	position: fixed;
	width: 42px;
	hight: 42px;
	bottom: 30px;
	right: 2em;
	margin-right: auto;
	z-index: 1000;
}

	.footer {
		padding: 3em 0;
	}
	.footer .menu {display:none;}
	.footer .ascii_cont {
		width: 96%;
		margin: 0 auto;
	}
	.footer .logo {
		margin: 0 auto 20px;
		width:30%;
	}

	.footer .footMenu {width:100%;}
	.footMenu ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	.footer .footMenu li{float:none;}
	.footer .footMenu li:first-child {
		padding-right: 0;
		border-right:none;
	}
	.footer .footMenu li:last-child {
		padding-right: 1em;
		border-right:1px solid #989898;
	}
	.footer address {text-align:center;}


	#deptblock .wrap {width: 96%;}
	/* ===== 部門ページ = 受賞製品 ===== */
	#deptblock h1.dept {
		font-size: 2.4rem;
		line-height: 110px;
		margin-bottom: 30px;
	}
	#deptblock .wrap.product_sp {
		padding-top: 5px;
		padding-bottom: 20px;
		width: 100%;
		background-color: #fff;
	}
	#deptblock .product {margin: 0 auto 15px; width: 100%; height: 110px;}
	#deptblock .product .prize {
		margin-right: 20px;
		width: 110px;
		height: 110px;
		z-index: 1;
		position: relative;
		overflow: hidden;
	}
	#deptblock .product h2 {
		width: calc(96% - 140px);
	}
	#deptblock figure.item {margin-bottom:0;}
	#deptblock .txtblock .wrap {padding-bottom: 40px;}
	#deptblock .box {
		margin-bottom: 50px;
		padding-bottom: 50px;
	}
	#deptblock .txtblock h3 {
		padding-left: 2%;
		height: 40px;
		font-size: 1.6rem;
		line-height: 40px;
	}
	#deptblock .department .portrait, 
	#deptblock .txtblock .portrait {
		margin: 20px auto;
		float:none;
	}
	#deptblock .department .judge p, 
	#deptblock .txtblock .judge p, 
	#deptblock .department .judge .commenter {
		margin-left: 0;
	}

}



@media screen and (max-width: 767px) {
	html {
		font-size: 57.5%;
	}
	.wrap {
		width: 100%;
		max-width: 767px;
	}
	.header, 
	#deptblock .header {
		height: auto;
		height: initial;
	}
	.header__logo {width: 70%;}
	#topblock .header__logo {padding-top: 10px; width: 100%;}
	.header__logo img {
		max-height: initial;
	}
	#topblock .pc {display: none;}
	#topblock .sp {display: block;}
	.navigation__list-item {
		width: 100%;
	}
	.navigation__list-item p{
		width: 100%;
		height: 40px;
		padding: 0;
		font-size: 1.8rem;
		line-height: 38px;
		border-radius: 20px;
	}
	.content {
		padding: 1em;
	}
	#deptblock .content {
		background-position: center -50px;
	}
	#topblock .thumbs h2 {
		padding: 20px 0;
		text-align:center;
	}
	#topblock .thumbs li p{font-size: 1.2rem;}
	.newslist .roundbox{padding: 10px 0;}
	#deptblock .product .prize {
		margin-right: 20px;
		width: 80px;
		height: 80px;
		z-index: 1;
		position: relative;
		overflow: hidden;
	}
	#deptblock h1.dept {
		font-size: 2.1rem;
		line-height: 50px;
		margin-bottom: 30px;
	}

	#deptblock .product h2 {
		width: calc(96% - 100px);
		font-size: 2rem;
	}
	#deptblock .product h2 span {font-size: 1.6rem;}
  
  .newslist p {
    line-height: 1.2;
  }
  #deptblock .txtblock h3{
    height: auto;
    line-height: 1.3;
    padding: 5px 10px 8px;
  }
  #deptblock .gp .txtblock h3 {background-size: cover;}
}