@charset "euc-jp";
/*************
　共通
**************/
body {
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Hiragino Maru Gothic W4 JIS2004", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  line-height: 1;
  color: #000;
}

h2{margin:10px 0}

#Contents a {
  display: block;
  color: #000;
}

a:hover {
  opacity: .8;
}

img {
  width: auto;
  max-width: 100%;
}

ul {
  list-style: none;
}

/*************
　アイキャッチ
**************/
.eyecatchLink {
  position: relative;
}

.main .eyecatch {
  margin-bottom: 15px;
}
/*************
　アイキャッチ
**************/

/* 一覧記事コンポーネント */
.contentListComponent {
  border-bottom: 1px solid #adadad;
  padding: 0 3%;
  margin-bottom: 20px;
}
.content .contentListComponent:last-of-type,
.main .contentListComponent:last-of-type,
.sideBox .contentListComponent:last-of-type {
  border-bottom: none;
}
.contentListComponentLink {
  padding: 0 0 20px;
  display: block;
  position: relative;
}
.contentListComponentBox .contentListComponentBoxLeft {
  float: left;
  width: 35%;
}

.contentListComponentBox .contentListComponentBoxRight {
  float: right;
  width: 65%;
  box-sizing: border-box;
  padding: 0 0 2% 5%;
}

.contentListComponentBoxTxt {
  margin-bottom: 10px;
  line-height: 1.6;
  font-size: 13px;
}

.newColumnWrap h2.contentListComponentBoxTxt {
  font-size: 20px;
}
.newColumnWrap .contentListComponentBoxCateWrapLists a{
 padding:2px;
}
.newColumnWrap .dispPc{margin-bottom:10px}

.contentListComponentBoxTagWrap {
  margin-bottom: 10px;
}

.contentListComponentBoxCateWrapLists li {
  display: inline-block;
  margin: 0 3px 8px 0;
}

.contentListComponentBoxCateWrapLists span {
  display: block;
    background: #e3e3e3 !important;
    color: #333;
    border: 1px solid #adadad;
}

.contentListComponentBoxCateWrapLists a {
  color: #333 !important;
  padding: 5px;
  font-size: 10px;
}
#Contents .main .contentListComponentBoxCateWrapLists a {
  text-decoration: none;
    color: #333 !important;
	}

@media all and (-ms-high-contrast:none){
	.contentListComponentBoxCateWrapLists a{
	padding-top: 7px;
	}
}


.contentListComponentBoxDate {
  position: absolute;
  bottom: 5px;
  right: 0;
  font-size: .65em;
}
/* 一覧記事コンポーネント */

/* 画像トリミング（正方形） */

.trimImg {
  position: relative;
  overflow: hidden;
  padding-top: 100%;
  width: 100%;
}
.trimImg > img {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 180px;
    height: 100%;
    /* width: auto; */
    object-fit: cover;
}
/* ↑240306heightを150から100に修正*/

.editorBox .trimImg > img  {
  max-width: 100%;
  max-height: 100%;
  border-radius:20px;
}


.sideEditorBox .contentListComponentBox .contentListComponentBoxLeft{
width: 20%;
}

.sideEditorBox .contentListComponentBox .contentListComponentBoxRight{
width: 80%;
}
.sideEditorBox .contentListComponentBoxDetail p{
font-size:13px;
line-height:1.6;
}

.categoryDescript,
.featureWrap,
.mainInner {
  padding: 0 3%;
}

/* 画像トリミング（正方形） */
/* 画像トリミング（横長） */
.trimWide .trimImg {
  padding-top: 30%;
}
.trimWide .trimImg > img {
  max-width: initial;
  max-height: initial;
  width: 100%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* 画像トリミング（横長） */
/* 「▲」表記 */
.ico-triangle {
  position: relative;
}

.ico-triangle::before {
  position: absolute;
  content: '';
  display: block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #000;
  top: 50%;
  left: 10px;
  margin-top: -5.5px;
}
/* 「▲」表記 */
/* キャプション */
.caption {
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 5px;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
}
.caption h1 {
  font-size: 16px;
}
/* キャプション */

.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

.clearFix::after {
  display: block;
  clear: both;
  content: "";
}

.dispPc {
  display: none;
}


.main a {
  text-decoration: underline;
}
/*************
　共通
**************/

/*************
　ヘッダー
**************/
/* ここからヘッダー */
#Header {
  padding-top: 0;
}
.hd,.hd-nav {
  position: static;
}
div.hd-nav.column-nav {
  background: #fff;
  padding-bottom: 20px;
  border-top: 3px solid #777;
  width: 100%;
}

div.hd-nav.column-nav ul {
  padding: 0 2px;
}

div.hd-nav.column-nav img {
  width: calc(100% - 40px);
  margin: 5px 20px 10px 20px;
}

div.hd-nav.column-nav li {
  border: 1px solid #c6c6c6;
  font-size: 14px;
  padding: 6px 2px;
  text-align: center;
}

div.hd-nav.column-nav li:not(:last-child) {
  margin-right: 4px;
}

div.hd-nav.column-nav li:first-child {
  flex-grow: 3;
}

div.hd-nav.column-nav li:nth-child(2) {
  flex-grow: 1;
}

div.hd-nav.column-nav li:nth-child(3) {
  flex-grow: 4;
}

div.hd-nav.column-nav li:nth-child(4) {
  flex-grow: 2;
}

div.hd-nav.column-nav li a {
  display: block;
}

.columnMenuLogoWrap {
  margin-bottom: 15px;
}
/* ここまでヘッダー */
/*************
　ヘッダー
**************/

/*************
　サイド
**************/
.sideBox {
  margin-bottom: 35px;
}
/* sidearea */
.sideItemList {
  padding: 0;
}


.boxTitle {
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  height: 50px;
  line-height: 1;
  box-sizing: border-box;
  padding: 15px 0;
  margin-bottom: 25px;
  background: #c6c6c6;
  color: #000;
}

.sideCategoryBoxLists .listItem {
  padding-left: 30px;
  font-size: 15px;
}

.sideCategoryBoxLists .listItem:not(:last-child) {
  margin-bottom: 16px;
}

.sideRecommendBoxLists .caption > p {
  font-weight: bold;
}

.sideRecommendBoxLists .trimWide {
  position: relative;
}

.side .contentListComponentBox {
  display: flex;
}

.side .contentListComponentBox > div {
  float: none;
}

.side .contentListComponentBoxDetail {
  line-height: 1.7;
}
.sideBox .sideRecommendBoxListSp {
  display: flex;
  flex-wrap: wrap;
  padding: 1.5%;
}

.sideBox .sideRecommendBoxListSp li {
  flex-basis: 50%;
  box-sizing: border-box;
  padding: 1.5%;
}
.sideRecommendBoxListSp .recipe_desc {
    font-weight: 600;
    font-size: 14px;
    margin: 5px 0 10px 10px;
    line-height: 1.7;
}

.sidePopularBoxLists > li {
  counter-increment: rank;
}


.sidePopularBoxLists li .trimImg::before {
  display: block;
  width: 20%;
  position: absolute;
  content: counter(rank);
  background: rgba(255, 255, 255 , .6);
  z-index: 1;
  padding: 3.5% 0;
  text-align: center;
  font-weight: bold;
  font-size: 5vw;
  box-sizing: border-box;
  bottom: 0;
}


.side .sidePopularBoxLists .contentListComponentBox {
  align-items: flex-start;
}

.side .sidePopularBoxLists .contentListComponentBoxTxt {
  margin-bottom: 0;
}
.sideEditorBoxLists a {
  text-decoration: none;
}
.sideEditorBoxLists .contentListComponentBoxTxt {
  font-weight: bold;
}

.side .contentListComponentBox .contentListComponentBoxRight {
    padding: 0 0 0 3.5%;
    box-sizing: border-box;
}

.side .sideEditorBoxLists .contentListComponentBoxRight {
  padding-top: 0;
}

.toEditorList {
  text-align: right;
  font-weight: bold;
  margin-top: 20px;
}

.toEditorList a {
  padding-right: 35px;
}

.toEditorList.ico-triangle::before {
  right: 3%;
  left: auto;
}

.cateListBox .boxTitle + div {
  padding: 0 13px;
}

.cateListBoxList li {
  display: inline-block;
}

.cateListBoxList li {
  margin:0  4px 10px 0;
  min-height: 28px;
}

.cateListBoxList li a {
  border: 1px solid #adadad;
  background: #e3e3e3;
  padding: 3px 7px 6px 5px;
  font-size: 13px;
}

.cateListBoxList img {
  width: 17px;
  position: relative;
  top: 3px;
  margin-right: 5px;
}


/*************
　サイド
**************/

/*************
　メイン
**************/
.main,
.content {
  margin-bottom: 35px;
}

.contents {
  margin-top: 20px;
}

/*pager pc */
.pagerWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 35px;
  margin-bottom: 35px;
}

.pagerWrap .pagerList {
  list-style-type: none;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.pagerWrap .pagerList a {
  display: block;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 7px;
  font-size: 14px;
  border: solid 1px #ccc;
  border-right: none;
  text-align: center;
}
.pagerWrap .pagerList li:last-child a {
  border-right: solid 1px #ccc;
}


#Contents .pagerWrap a {
  color: #000;
  text-decoration: none;
}

.pagerWrap .pagerList a:hover,
.pagerWrap .pagerList .current a {
  background: #000;
  color: #fff !important;
}


/*pager sp */
.paginationNB {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 10px 0;
  padding: 10px 0;
  border-top: solid 1px #adadad;
  border-bottom: solid 1px #adadad;
}
.paginationNB li:nth-child(odd) {
  text-indent: -9999px;
  width: 25px;
  height: 25px;
}
.paginationNB .page_list {
  text-decoration: none;
}
.paginationNB li a.page_back,
.paginationNB li a.page_next {
  display: block;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-size: 25px;
  position: absolute;
}
.paginationNB li a.page_back {
  background-image: url(../../../SmartPhone/Page/images/img_column/icon-arrow-prev.png);
  left: 10px;
}
.paginationNB li a.page_next {
  background-image: url(../../../SmartPhone/Page/images/img_column/icon-arrow-next.png);
  right: 10px;
}


#Contents .main .contentListComponentBoxTxt {
  padding-top: 0;
  font-weight: 400;
}
/*************
　メイン
**************/

/*************
　PC表示
**************/
@media screen and (min-width: 861px) {
  body {
    font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Hiragino Maru Gothic W4 JIS2004", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 500;
  }
  .dispPc {
    display: block;
  }

  .dispSp {
    display: none;
  }

  .wrap {
    width: 100%;
    max-width: 1000px;
    margin: auto;
  }

  .main {
    float: left;
    width: calc(100% - 340px);
    max-width: 660px;
  }

  .side {
    float: right;
    width: 300px;
  }

  .header {
    margin-bottom: 20px;
  }
  .columnMenuLogoWrap > * {
    text-align: center;
  }
  #Contents .caption h1 {
    text-align: left!important;
  }
  /*************
  　メイン
  **************/
  .contentListComponent {
    border-bottom: none;
    margin-bottom: 40px;
  }

  .categoryDescript,
  .featureWrap {
    padding: 0;
  }
  .contentListComponentLink {
    padding: 0;
    margin: 0 0 3%;
  }

  .contentListComponentBoxDate {
    font-size: 12.6px;
    right: 0;
  }

  .contentListComponent:first-child .contentListComponentLink {
    padding-top: 0;
  }

  .main .contentListComponentBox .contentListComponentBoxLeft {
    width: 221px;
  }

  .main .contentListComponentBox .contentListComponentBoxRight {
    padding: 0 0 2% 2%;
    width: calc(100% - 221px);
  }
.trimImg > img {
    width: 221px;
  }

  #Contents .main .contentListComponentBoxTxt {
    font-weight: bold;
     font-size: 20px; }

  #Contents .main a:hover .contentListComponentBoxTxt {
    text-decoration: underline;
  }

  .main .contentListComponentBoxCateWrapLists li {
    margin: 0 3px 5px 0;
  }

  .main .contentListComponentBoxDetail {
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 14px;
  }

  .main .contentListComponentBoxCateWrapLists a {
    font-size: 12px;
    padding: 0 5px;
    line-height: 1.5;
  }

  .pagerWrap .pagerItem a {
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 7px 0;
    font-size: 14px;
  }

  .pagerWrap .ellipse:last-of-type {
    padding-left: 10px;
  }

  .pagerWrap .ellipse:first-of-type {
    padding-right: 10px;
  }

  /*************
  　メイン
  **************/

  /*************
  　サイド（PC）
  **************/
  .side .contentListComponentLink {
    padding: 0;
  }

  .sideRecommendBoxLists li:not(:last-child) {
    margin-bottom: 20px;
  }

  .side .sidePopularBoxLists .contentListComponentBox {
    align-items: center;
  }

  .side .sideEditorBoxLists .contentListComponentBoxTxt {
    margin-bottom: 3px;
  }

  .side .sideEditorBoxLists .contentListComponentBoxDetail {
    font-size: 14px;
  }
.contentListComponentBoxCateWrapLists a {
    color: #000 !important;
    padding: 5px;
    font-size: 12px;
}
  .side .contentListComponentBox .contentListComponentBoxLeft {
    width: 30%;
  }

  .side .contentListComponentBox .contentListComponentBoxRight {
    width: 70%;
  }

  .sidePopularBoxLists li .contentListComponentBox::before {
    bottom: 0;
    left: 0;
    width: 28px;
    height: 28px;
    padding-top: 7px;
    font-size: 17px;
  }

  .sidePopularBoxLists .contentListComponentBoxTxt {
    line-height: 1.5;
    font-size: 14px;
  }

  .side .sideEditorBoxLists .contentListComponentBoxRight {
    width: 78%;
  }

  .toEditorList a {
    padding-right: 20px;
  }

  .toEditorList.ico-triangle::before {
    right: 0;
  }

  .cateListBox .boxTitle + div {
    padding: 0;
  }

  .cateListBoxList li {
    margin:0 2px 8px 0;
  }

  .cateListBoxList li a {
    padding: 1px 6px 1px 5px;
    font-size: 12px;
  }

  .cateListBoxList img {
    width: 15px;
    top: 4px;
  }
  .boxTitle {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 0;
    border-right-width: 0;
    border-style: solid;
    border-color: #000;
    font-size: 18px;
    height: 35px;
    line-height: 1;
    box-sizing: border-box;
    padding: 8px 0;
    text-align: center;
    background: #fff;
  }
  .sidePopularBoxLists li .trimImg::before {
    width: 28px;
    height: 28px;
    font-size: 17px;
  }
  .editorBox .trimImg > img {
    max-width: 100%;
    max-height: 100%;
  }
  /*************
  　サイド（PC）
  **************/
}

@media all and (-ms-high-contrast:none) and (min-width: 861px){
  .sidePopularBoxLists li .contentListComponentBox::before {
    padding-top: 9px;
  }

}
/*************
　PC表示
**************/