@charset "utf-8";

/*
	* Name: gourmet.css
	* License: MIT License
	  - http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license

	* Contents:
	  - ヘッダー部分 -
	  - 月刊食材コンテンツ -
	  - バナー広告スペース -
	  - プレゼントスペース -
	  - gourmet用サイドメニュー -
*/


/* Stylesheet Document */

body #gourmet {}
#gourmet #contents { border-top: none;}
#gourmet img {max-width: 100%;}

/*
#gourmet #contents a {color: #000; text-decoration: none;}
#gourmet #contents a:hover {color: #999; text-decoration: underline;}
#gourmet #contents a:visited {color:rgb(124, 32, 32) !important;}
*/

/* 20200122 add */
#gourmet #contents #main.subtop a, #gourmet #contents #bcnavi.subtop a, #gourmet #contents .gourmet-side a{color: #000; text-decoration: none;}
/*#gourmet #contents #main.subtop a:hover, #gourmet #contents #bcnavi.subtop a:hover, #gourmet #contents .gourmet-side a:hover{color: #999; text-decoration: underline;}*/
#gourmet #contents #main.subtop a:visited, #gourmet #contents #bcnavi.subtop a:visited, #gourmet #contents #head-gourmet a:visited, #gourmet #contents .gourmet-side a:visited{color: rgb(124, 32, 32); text-decoration: none;}
/* 20200122 add */

/* 20200121 add */
#gourmet #contents #main.subtop a:hover, #gourmet #contents #bcnavi.subtop a:hover, #gourmet #contents #head-gourmet a:hover, #gourmet #contents .gourmet-side a:hover{color: #999 !important; text-decoration: underline;}
/* 20200121 add */

	/* ========================================
	   ヘッダー部分
	======================================== */

#head-gourmet {padding: 0 0 9px 0;}
#head-gourmet .head-gourmet01 {display:-webkit-box; display:-ms-flexbox; display:flex;	-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;	-ms-flex-wrap: nowrap; flex-wrap: nowrap;	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
#head-gourmet .head-gourmet-tit {}
#head-gourmet .head-gourmet-tit h2 {display: inline-block; margin: 0 1em 0 0;}
#head-gourmet .head-gourmet-tit h2 img {}
#head-gourmet .head-gourmet-tit .tx-exp {display: inline-block;}
/* 20200110 change */
#head-gourmet .gourmet-nav {margin-top: auto; color: saddlebrown;}
#head-gourmet .gourmet-nav ul.btn {height: 33px; border-bottom: none; background-color: #ffd200; border-radius: 8px 8px 0 0; list-style: none; margin: 0; padding: 0; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; cursor: pointer;}
#head-gourmet .gourmet-nav ul.btn li {padding:0; margin: 0; border-right: 2px solid #ffffff; position: relative;}
#head-gourmet .gourmet-nav ul.btn li:last-child {border: none;}
#head-gourmet .gourmet-nav ul.btn li a {display:block; padding: 0.5em 1.5em 0.35em 1.5em; font-size: 1.12em; font-weight: bold; transition: 0.3s; text-decoration: none!important; color: saddlebrown;}
#head-gourmet .gourmet-nav ul.btn li a:hover {background-color:rgba(253,226,158,1.00); }
#head-gourmet .gourmet-nav ul.list {display: none; list-style: none; top: 33px; box-sizing: border-box;padding: 2px;background-color: white;}
#head-gourmet .gourmet-nav li.navi03 ul.list {right: 0px;}
#head-gourmet .gourmet-nav ul.list li a {display: block; padding: 0.6em; margin: 2px; background-color: #ffd200; text-decoration: none!important; transition: 0.3s; }
#head-gourmet .gourmet-nav ul.list li a:hover {background-color: lightgoldenrodyellow;}
#head-gourmet .gourmet-nav ul.list {position: absolute; z-index: 99999; width: 200px;}
#head-gourmet .gourmet-nav ul.list li {border-bottom: 1px solid #ffd200;}
#head-gourmet .gourmet-nav ul.list li:first-child {margin-top: 2px; border-top: 1px solid #ffd200;}
#head-gourmet .gourmet-nav ul.list li a {}
/*#head-gourmet .page-exp {width: 100%; text-align: left; margin: 0.5em 0 1em 0;}*/
/* 20200110 change */

	/* ========================================
	   月刊食材コンテンツ
	======================================== */
.monthly-food {}
.monthly-food01 {}
.monthly-food01 .page-exp {width: 100%; margin: 0 0 1em 0;}
.monthly-food-tit {margin: 0 0 20px 0; padding: 0;}
/* 20200110 change */
.monthly-food-box01 {border:1px solid #ffd200; background-color: white; overflow: hidden; margin: 0 0 25px 0; box-shadow: 0 0 4px 0 rgba(0,0,0,0.1);}
/* 20200110 change */
.monthly-food-box01 h3 {}
/* 20200110 change */
#main .monthly-food-box01 h3.tit {font-weight: bold; font-size: 1.3em; background-color:#ffd200; background-image: none; padding: 0.3em 2em 0.3em 1em; border: none; margin: 0 0 0 0; color: saddlebrown; display: inline-block;}
/* 20200110 change */
/* 20200110 add */
#main .monthly-food-box01 h3.tit::before { content: ''; position: absolute; display: block; width: 0; height: 0; top: 0; right: 0; border-top: 17px solid #fff; border-left: 17px solid transparent; border-bottom: 17px solid #fff; }
/* 20200110 add */
#main .monthly-food-box01 h3.tit span {display: inline-block; background: unset; margin: 0 0.5em 0 0; padding: 0;}
.monthly-food-list {padding: 0 20px;}
.monthly-food-list > dl {padding: 0; border-bottom: 1px solid #cecece;margin:0 0 0 0; }
.monthly-food-list > dl a {color: inherit; transition: 0.3s; padding: 20px 5px; text-decoration: none!important; display:-webkit-box; display:-ms-flexbox; display:flex;	-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;	-ms-flex-wrap: nowrap; flex-wrap: nowrap;	-webkit-box-pack: justify; -ms-flex-pack: justify;}
/* 20200120 add */
.monthly-food-list > dl a:hover {text-decoration: underline!important;}
/* 20200120 add */
.monthly-food-list > dl:last-of-type {margin: 0 0 20px 0;}
/* 20200110 remove add */
/*.monthly-food-list > dl a:hover {background-color:rgba(255,250,205,1.00); color: inherit;}*/
.monthly-food-list > dl a:hover dt figure img {opacity: 0.75;}
/* 20200110 remove add */
.monthly-food-list > dl a dt {width: 15%; margin: 0 15px 0 0;}
.monthly-food-list > dl a dt figure {}
.monthly-food-list > dl a dt figure a img {transition: 0.3s;}
.monthly-food-list > dl a dt figure a:hover img {opacity: 0.75;}
.monthly-food-list > dl a dd {width: 85%;}
.monthly-food-list > dl a dd h4 {}
.monthly-food-list > dl a dd h4.tit {font-size: 1.5em;}
.monthly-food-list > dl a dd h4.tit .date {font-weight: normal;}
.monthly-food-list > dl a dd h4.tit .pic {display: inline-block;}
/* 20200110 change */
.monthly-food-list.list01 > dl:first-child a dt {width: 40%;}
.monthly-food-list.list01 > dl:first-child a dd {width: 60%;}
/* 20200110 change */
.gourmet-link01 {text-align: right; margin: 0 0 1.25em 0;}
.gourmet-link03 {text-align: right; margin: 0 20px 1.25em 0;}
.monthly-food-movie01 {padding: 0 0 0 25px; margin-top:20px;}
.monthly-food-movie02 {display:-webkit-box; display:-ms-flexbox; display:flex;	-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;	-ms-flex-wrap: nowrap; flex-wrap: nowrap;	-webkit-box-pack: justify; -ms-flex-pack: justify;}
.monthly-food-movie02 > dl {width: 30%; margin: 0 20px 20px 0;}
.monthly-food-movie02 > dl a {}
.monthly-food-movie02 > dl a dt {}
.monthly-food-movie02 > dl a dt figure img {transition: 0.3s;}
.monthly-food-movie02 > dl a:hover dt figure img {opacity: 0.75;}
.monthly-food-movie02 > dl a dd {}
.monthly-food-post01 {padding: 0 0 0 25px; margin-top:20px;}
.monthly-food-post02 {display:-webkit-box; display:-ms-flexbox; display:flex;	-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;	-ms-flex-wrap: nowrap; flex-wrap: nowrap;	-webkit-box-pack: justify; -ms-flex-pack: justify;}
.monthly-food-post02 > dl {width: 30%; margin: 0 20px 20px 0;}
.monthly-food-post02 > dl a {}
.monthly-food-post02 > dl a dt {}
.monthly-food-post02 > dl a dt figure img {transition: 0.3s;}
.monthly-food-post02 > dl a:hover dt figure img {opacity: 0.75;}
.monthly-food-post02 > dl a dd {}

	/* ========================================
	   バナー広告スペース
	======================================== */
.gourmet-bnr {}

	/* ========================================
	   プレゼントスペース
	======================================== */
.monthly-food-box01.gourmet-present-box {border: 2px solid rgba(235,189,190,1.00); border-radius: 0;}
.gourmet-present {}
.gourmet-present > a {text-decoration: none!important; display:-ms-flexbox; display:flex;	-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;	-ms-flex-wrap: nowrap; flex-wrap: nowrap;	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.gourmet-present > a .gourmet-present-img01 {width: 100px; background-color: #fbdac7;}
.gourmet-present > a .gourmet-present-img02 {width: 250px; padding:10px 20px 10px 10px; text-align: center;}
.gourmet-present > a .tx-exp {color: inherit; transition: 0.3s; width: 100%; padding: 10px 0; font-weight: bold; font-size: 1.5em; line-height: 1.5; position: relative;}
.gourmet-present > a .tx-exp .tx-body {font-size: 0.7em; font-weight: normal; padding: 2px 25px 0 0;} /*追加*/
/*
.gourmet-present > a .tx-exp .btn {text-align: right; position: absolute; bottom: 0; right: 0;}
.gourmet-present > a .tx-exp .btn img {width: 100px; transition: 0.3s;}
*/
/* 20200120 add */
.gourmet-present > a .tx-exp {color: rgba(233,80,83,1.00);}
/* 20200120 add */
/* 20200120 change */
.gourmet-present > a:hover .tx-exp {color:#999; text-decoration: underline!important;}
/* 20200120 change */
.gourmet-present > a:hover .tx-exp .btn img {opacity: 0.75;}
.gourmet-link02 {text-align: center;}
.gourmet-link02 a {transition: 0.3s; text-decoration: none; display: inline-block; margin: 0 auto 1.25em auto; text-align: center; padding: 0.5em 1.5em 0.4em 1.5em; background-color: white; border: 2px solid #cecece;}
/* 20200110 change */
.gourmet-link02 a:hover {text-decoration: underline; }
/* 20200110 change */

	/* ========================================
	   gourmet用サイドメニュー
	======================================== */
.gourmet-side {}
.gourmet-side01 {}
.gourmet-side-food {}
.gourmet-side-food01 {}
.gourmet-side-food01 h5 {}
.gourmet-side-tit01 {font-size: 1.15em; text-align: center; font-weight: bold; padding: 0 0 0.5em 0; border-bottom: 2px solid #ffd200; margin: 0 0 0.5em 0; line-height: 1;}
.gourmet-side-food01 dl {margin: 0; padding: 0; border: 1px solid #cecece; border-bottom: none;}
.gourmet-side-food01 dl:last-of-type {border-bottom: 1px solid #cecece;}
.gourmet-side-food01 dl a { text-decoration: none; transition: 0.3s; display:-ms-flexbox; display:flex;	-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;	-ms-flex-wrap: nowrap; flex-wrap: nowrap;	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
/* 20200110 change */
.gourmet-side-food01 dl a:hover {text-decoration: underline;}
/* 20200110 change */
.gourmet-side-food01 dl a dt {padding: 0 0 0 16px;}
.gourmet-side-food01 dl a dd {width: 65px; margin-left: 12px;}
.gourmet-side-food01 dl a dd figure {width: 100%;}
.gourmet-side-food01 dl a dd figure img {width: 100%;}
/* 20200110 add */
.gourmet-side-food01 dl a:hover dd figure img {opacity: 0.75;}
/* 20200110 add */
.gourmet-side-box {border: 1px solid #ffd200; overflow: hidden; margin:0 0 20px 0; }
.gourmet-side-box01 {}
.gourmet-side-box01 h5 {}
.gourmet-side-tit02 {border-bottom: 2px solid #f7e36b; font-size: 1.15em; text-align: center; font-weight: bold; padding: 0.5em 1em 0.6em 1em; margin: 0; line-height: 1.35;}
.gourmet-side-line {padding: 10px; display:-ms-flexbox; display:flex;	-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;	-ms-flex-wrap: nowrap; flex-wrap: nowrap;	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.gourmet-side-line figure {width: 55px; margin: 0 0.5em 0 0;}
.gourmet-side-line .tx-exp {text-align: left;}
.gourmet-side-kiji {padding: 10px; list-style: none; text-align: left;}
.gourmet-side-kikaku {padding: 10px;}
.gourmet-side-tit03 {text-align: left; font-weight: bold;}
.gourmet-side-kikaku dl {display:-ms-flexbox; display:flex;	-webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;	-ms-flex-wrap: nowrap; flex-wrap: nowrap;	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; /*-webkit-box-align: center; -ms-flex-align: center; align-items: center;*/}
.gourmet-side-kikaku dl dt {width: 4em; text-align: left;}
.gourmet-side-kikaku dl dd {width: calc(100% - 4em); text-align: left;}
.monthly-food-movie01 figure {position: relative;}
.playbutton { z-index: 1000;
    opacity: 0.7;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../../../libs/pc/common/img/btn_playerplay.png") no-repeat center center;
	background-size: 55px 55px;
}

@media all {

	/* ========================================
	   * 領域設定 - レイアウト -
	======================================== */

	#gourmet {
	}

	#gourmet footer {
		border-top: 4px solid #3081C2;
	}


	/* ========================================
	   * 01. 領域設定 - ID指定 -
	======================================== */

	#gourmet #contents {
		background-image: url("../../../img/pc/select/bg_border.gif");
		border-bottom: 1px solid #EFE2BA;
		border-top: 1px solid #EFE2BA;
	}


	/* ========================================
	   * 07. 領域設定 - Main -
	======================================== */

	#gourmet #main h3 {
		border-bottom-color: #FFD200;
	}

	#gourmet #main h3 span {
		background-image: url("../../../img/pc/select/icon_circle_select.png");
	}

	#gourmet #main div.category ul li a {
		color: #B41B00;
	}

	#gourmet #main div.thumbnail div.container h4 {
		background-color: #FFD200;
		color: saddlebrown;
	}

	#gourmet #main div.pagenation ul li a {
		color: #FFD200;
		border: 1px solid #FFD200;
	}

	#gourmet #main div.pagenation ul li a:hover,
		#gourmet #main div.pagenation ul li a.current,
			#gourmet #main div.pagenation ul li a.prev,
				#gourmet #main div.pagenation ul li a.next {
					background-color: #FFD200;
	}

}