@charset "euc-jp";

#main .bge-contents ul li {
	background: none;
}

#main .bge-contents p {
		font-size: 1.15rem;
		line-height: 1.8em;
}

#main h3 {
	margin-top: 2rem;
}

#main h4 {
	margin-top: 2rem;
	line-height: 1.4;
}

#main #columnBody h4{
		border-bottom: 2px solid #d4788f;
}

/* CSS Document */
#breadcrumb ul li {
    font-size: 12px;
    font-family: noto-sans-cjk-jp, sans-serif;
    line-height: 1.8;
}


#breadcrumb ul li a {
    color: #aaaaaa;
}

.dateBlock {
	font-size: 0.75rem;
	color: #999;
}

.dateBlock.new::before {
	content: "NEW";
	color: #FFF;
	font-size: 9px;
	border: 1px solid #d4788f;
	padding: 0 2px;
	margin: 0 3px 0 0;
	background-color: #d4788f;
}



/*************************
	個別ページ
*************************/
/*.columnWrap {
	display: flex;
} */

#columnBody {
		margin: auto 1%;
}

.columnCatTag {
	background-color: #d4788f;
	color: #FFF;
	font-weight: bold;
	padding: 0.5rem;
	margin: 0 0 1.25rem;
}

#columnBody h4 {
	font-size: 1.25em;
	font-weight: bold;
	margin: 2.0rem 0 1.5rem;
	padding: 0 0 0.3125rem;
	line-height: 1.25em;
	border-bottom: 2px solid #d4788f;
}

#columnBody p {
	font-size: 1.25rem;
}

.columnKV,
.columnImg {
	margin: 1.25rem 0;
	text-align: center;
}

.columnImg img {
	max-width: 640px;
        width: 100%;
}

#columnBody p {
	line-height: 1.8em;
	margin: 0 0 1.0em 0;
}

#columnTopBtn {
	text-align: center;
}

/***** 目次エリア *****/
.indexBlock {
	width: 90%;
	max-width: 460px;
	margin: 3.125rem auto;
	border: 2px solid #d4788f;
	border-radius: 10px;
	padding: 1.25rem;
	font-size: 1.25rem;
}

@media screen and (max-width: 767px) {
/* スマホ用 */
	.indexBlock {
		font-size: 1.142857142857143em;
	}
}

.indexBlock .ttl {
	color: #d4788f;
	text-align: center;
	font-weight: bold;
	margin: 0 0 1.25rem 0;
	letter-spacing: 0.02em;
	border-bottom: none;
	line-height: 1.0em;
}

.indexBlock ul li {
	border-bottom: 1px dashed #999;
	margin-bottom: 0.625rem;
	position: relative;
}

.indexBlock ul li::before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-right: solid 2px #d4788f;
  border-bottom: solid 2px #d4788f;
  -ms-transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  position: absolute;
  top: 40%;
  left: 0;
}

.indexBlock ul li a {
	display: block;
	padding: 0.3125rem 0 0.3125rem 1.25rem;
}

/***** 汎用 *****/
.txtB {
	font-weight: bold;
}

.txtC {
	text-align: center;
}

.txtMiddle {
	font-size: 1.0em;
}

.txtLarge {
	font-size: 1.25em;
}

.textColorRedPurple {
	color: #d4788f;
}

#columnBody ol.listOl li {
	list-style: decimal;
	list-style-position: inside;
}

.lineH15 {
	line-height: 1.5em;
}

.lineH20 {
	line-height: 2.0em;
}

.marT10 {margin-top: 0.625rem;}
.marT20 {margin-top: 1.25rem;}
.marT30 {margin-top: 1.875rem;}
.marT40 {margin-top: 2.5rem;}
.marT50 {margin-top: 3.125rem;}

.marR10 {margin-right: 0.625rem;}
.marR20 {margin-right: 1.25rem;}
.marR30 {margin-right: 1.875rem;}
.marR40 {margin-right: 2.5rem;}
.marR50 {margin-right: 3.125rem;}

.marB10 {margin-bottom: 0.625rem;}
.marB20 {margin-bottom: 1.25rem;}
.marB30 {margin-bottom: 1.875rem;}
.marB40 {margin-bottom: 2.5rem;}
.marB50 {margin-bottom: 3.125rem;}

.marL10 {margin-left: 0.625rem;}
.marL20 {margin-left: 1.25rem;}
.marL30 {margin-left: 1.875rem;}
.marL40 {margin-left: 2.5rem;}
.marL50 {margin-left: 3.125rem;}

sup.asterisk {
	font-size: 0.75rem;
	vertical-align: super;
	color: #555;
}

.attTxtBlock {
	font-size: 0.75rem;
	text-align: right;
	color: #555;
}



/*************************
	コラム一覧に戻るボタン
	レコメント 詳しくはこちらボタン
*************************/
.columnTopBtn a,
.recommendBtn a {
	width: 50%;
	background-color: #d4788f;
	color: #FFF;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
	margin: 1.25rem auto;
	padding: 1.0rem 0;
	display: block;
    border-radius:10px;
	position: relative;
}

.columnTopBtn a::after,
.recommendBtn a::after {
    content: "";
	position: absolute;
	top: 50%;
	right: 1.25rem;
    width: 12px;
    height: 12px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}


/*************************************
	art003用スタイル
*************************************/
h4 .ngcare,
h4 .poreless {
	margin: 0 12px 0 0;
	padding: .125rem .5rem;
	border-radius: 3px;
	color: #FFF;
	font-size: 1.0rem;
	position: relative;
	font-weight: normal;
}

h4 .ngcare:before,
h4 .poreless:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
  border: 5px solid transparent;
}

h4 .ngcare:before {
  border-left: 8px solid #E44941;
}

h4 .poreless:before {
  border-left: 8px solid #773198;
}


h4 .ngcare {
	background-color: #E44941;
}

h4 .poreless {
	background-color: #773198;
	border-radius: 3px;
}


/*************************
	一覧
*************************/
.columnIndexBox {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#columnBody p.columnSummary {
	font-size: 1.125rem;
	text-align: center;
	margin: 1.875rem 0;
}

@media screen and (max-width: 767px) {
/* スマホ用 */
	#columnBody p.columnSummary {
	font-size: 1.0em;
	text-align: left;
	margin: 1.5rem 0;
	}
}

.columnIndexBoxItem {
    width: 32%;
	max-width: 32%;
    display: flex;
    flex-direction: column;
    margin: 0 2% 2% 0;
}

.columnIndexBoxItem:nth-child(3n) {
	margin-right: 0;
}

@media screen and (max-width: 767px) {
/* スマホ用 */
	.columnIndexBox {
		/*justify-content: center;*/
	}

	.columnIndexBoxItem {
		width: 49%;
		max-width: 49%;
	}

	.columnIndexBoxItem:nth-child(odd) {
		margin-right: 2%;
	}

	.columnIndexBoxItem:nth-child(even) {
		margin-right: 0;
	}
}

 .columnIndexBoxItem .innerBox {
    flex-grow: 1;
    padding: 2% 0;
  }

.columnIndexBoxItem .innerBox .columnTitle {
	line-height: 1.4em;
}

.columnIndexBoxItem .innerBox .columnTitle.new::before {
	content: "NEW";
	color: #FFF;
	font-size: 9px;
	border: 1px solid #d4788f;
	padding: 0 2px;
	margin: 0 5px 0 0;
	background-color: #d4788f;
}

.columnIndexBoxItem img {
	margin: 0 0 0.625rem 0;
}

#columnBody h2.categoryTtl {
	background: #a59b53;
	padding: 0.3125em 0.75em;
	color: #FFF;
	font-size: 1.5rem;
	margin: 0 0 1.875rem;
}

@media screen and (max-width: 767px) {
/* スマホ用 */
	#columnBody h2.categoryTtl {
	font-size: 1.142857142857143rem;
	}
}

#columnBody p.columnTitle {
	line-height: 1.25em;
	margin:  0 0 3% 0;
}

@media screen and (max-width: 767px) {
/* スマホ用 */
	.columnIndexBox {
		/*justify-content: center;*/
	}

	.columnIndexBoxItem {
		width: 49%;
	}

	.columnIndexBoxItem:nth-child(odd) {
		margin-right: 2%;
	}

	.columnIndexBoxItem:nth-child(even) {
		margin-right: 0;
	}
}

.recommendArea {
	margin: 3.125rem auto 0;
	display: flex;
	align-items: center;
	border: 1px solid #d4788f;
}

.recommendArea .imageBlock {
	width: 45%;
}

.recommendArea .productName {
	font-weight: bold;
	display: block;
}

.recommendArea .textBlock {
    line-height: 1.8em;
}

@media screen and (max-width: 767px) {
/* スマホ用 */
	.recommendArea {
		flex-flow: column;
		}

	.recommendArea .textBlock {
		font-size: 1.4em;
		text-align: center;
	}
}



/*************************************
	art004用スタイル
*************************************/
.imp3pointArea,
.dryfacArea,
.stretchArea,
.foodArea {
    font-weight: bold;
    font-size: 1.125em;
}

.mag {
    padding-left: 30px !important;
}


@media screen and (max-width: 767px) {
/* スマホ用 */
    .imp3pointArea,
    .dryfacArea,
    .stretchArea,
    .foodArea {
        font-size: 1.0em; 
    }
}

.imp3pointArea,
.dryfacArea,
.stretchArea {
    margin: 1.25rem;
    padding: 1.25rem;
}

@media screen and (max-width: 767px) {
/* スマホ用 */
    .imp3pointArea,
    .dryfacArea,
    .stretchArea {
        margin: 1.0rem 0.3125rem;
        padding: 0.625rem 0.9375rem;
    }
}

.imp3pointArea ul li,
.dryfacArea ul li,
.stretchArea ul li {
    padding: 1.0rem 1.0rem 1.0rem 2.375rem;
    position: relative;
    width: auto;
    line-height: 1.25em;
}

@media screen and (max-width: 767px) {
/* スマホ用 */
    .imp3pointArea ul li,
    .dryfacArea ul li {
        padding: 1.0rem 0 1.0rem 2.375rem;
    }
    
    .stretchArea ul li {
        padding: 1.0rem 0 1.0rem 1.3125rem;
    }
}

.imp3pointArea ul li::before,
.dryfacArea ul li::before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}

.imp3pointArea ul li::after,
.dryfacArea ul li::after {
    content: '';
    display: block;
    height: 20px;
    left: 7px;
    margin-top: -16px;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 9px;
}

.imp3pointArea {
    background-color: #e2e4fb;
}

.imp3pointArea ul li::after {
    border-right: 6px solid #d66ea5;
    border-bottom: 3px solid #d66ea5;
}

.dryfacArea {
    background-color: #f0cbdf;
}

.dryfacArea ul li::after {
    border-right: 6px solid #6a77eb;
    border-bottom: 3px solid #6a77eb;
}

.stretchArea {
    background-color: #f8e5ef;
    border: 4px solid #d66ea5;
}

.stretchArea li {
    text-indent: -1.375rem;
}

.foodAreaOuter {
    display: block;
    max-width: 700px;
    margin: 0 auto;
}

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

@media screen and (max-width: 767px) {
/* スマホ用 */
    .foodArea {
        display: block;
    }
}

.coolfoodBlock,
.hotfoodBlock {
    margin: 2.0rem 0;
    padding: 1.25rem;
    width: 48%;
}

@media screen and (max-width: 767px) {
/* スマホ用 */
    .coolfoodBlock,
    .hotfoodBlock {
        margin: 1.25rem auto;
        padding: 1.25rem;
        width: 96%;
    }
}

.coolfoodBlock .ttl,
.hotfoodBlock .ttl {
    border-bottom: 2px solid #333;
    text-align: center;
    font-size: 1.25em;
}

.coolfoodBlock {
    background-color: #e2e4fb; 
}

.coolfoodBlock .ttl {
    color: #1f32e1;
}

.hotfoodBlock {
    background-color: #f0cbdf;
}

.hotfoodBlock .ttl {
    color: #ba357c;
}

/*************************************
	art007用スタイル
*************************************/
.marker_blue{
	background:linear-gradient(transparent 60%, #d1f0ff 60%);	
}

.waku{
	margin: 1% 1% 2%;
	border: 2px dotted #CBCBCB;
	border-radius: 10px;
	padding: 2% 2% 0 2%;
}


/*************************************
	art008用スタイル
*************************************/

.label_red{
	padding: 0.5em;/*文字周りの余白*/
	color: #c10047;/*文字色*/
	background: #ffeefd;/*背景色*/
	border-left: solid 5px #d40002;/*左線（実線 太さ 色）*/
	display: block;
	margin: 3% 0 0;
	font-weight: bold;
}

.star_rnk{
	color: #ff9800;
	padding: 1% 2%;
}

.star_rnk::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: url(https://ecwa.jp/Page/column/img/art008/star_rnk.png) no-repeat;
	background-size: contain;
	margin-right: 0.2em;
}

/*************************************
	art009用スタイル
*************************************/

.art09{
  padding: 2% 1% 0%;
}

.art09 span {
  background: linear-gradient(transparent 70%, #fff389 70%);
  font-weight: bold;
}

/*************************************
	art010用スタイル
*************************************/

.marker_yellow {
 background: linear-gradient(transparent 60%, #ffe50070 60%);
}

/*************************************
	art011用スタイル
*************************************/

.topic_art011  {
  position: relative;
  padding: 1em;
  background: #6bc8eb;
  font-size: 1.375em;
  font-weight: bold;
  text-align: center;
  color: #fff;
}

.topic_art011:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 320px;
  border: 15px solid transparent;
  border-top: 15px solid #6bc8eb;
  width: 0;
  height: 0;
}

@media screen and (max-width: 767px) {
/* スマホ用 */
.topic_art011:after {
  left: 46%;

    }
}


/*************************************
	art012用スタイル
*************************************/

.label_blue{
	padding: 0.5em;/*文字周りの余白*/
	color: #004952;/*文字色*/
	background: #eefaff;/*背景色*/
	border-left: solid 5px #00bcd4;/*左線（実線 太さ 色）*/
	display: block;
	margin: 3% 0 0;
	font-weight: bold;
}


.back_blue {
	background-color: #f0faff;
	margin: 0 0 2%;
	font-weight: bold;
	padding: 2% 6%;
}

.back_blue li {
    padding: 2% 0 0 !important;
    font-size: 1.2rem !important;
}