/*  BASE
-------------------------------------*/
body {
  counter-reset: number 0;
}


:root {
  --black: #111;
  --orange: #ff7f00;
}

a {
  text-decoration: none !important;
}


article h1,
h1,
h2,
#fftop_recomDetail h2,
h3,
article p,
p,
figure {
  background: none;
  color: unset;
  height: unset;
  margin: unset;
  padding: unset;
}


/*  ページ横幅設定
-------------------------------------*/
#fftop_recomDetail section {
  padding: 0;
}


/*  FONT
-------------------------------------*/
@font-face {
  font-family: 'koburina-normal';
  src: local('こぶりなゴシック Std W3.otf'), url("../../../../../topics/common/font/こぶりなゴシック Std W3.otf");
  font-display: swap;
  font-weight: 500;
}


@font-face {
  font-family: 'koburina-bold';
  src: local('こぶりなゴシック Std W6.otf'), url("../../../../../topics/common/font/こぶりなゴシック Std W6.otf");
  font-display: swap;
  font-weight: 700;
}


/*  izimodal/モーダル設定
-------------------------------------*/
.iziModal {
  border-radius: 10px !important;
  max-width: 940px !important;
  height: 500px !important;
  width: 100%;
}


.iziModal .iziModal-content {
  height: 100% !important;
}


/*  コンテンツ
-------------------------------------*/
#gourmet_column {
  color: var(--black);
  font-family: 'koburina-normal', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-feature-settings: "palt";
  font-size: 18px;
  text-align: justify;
}


.head {
  align-items: center;
  display: flex;
  justify-content: space-evenly;
  margin: 3em 0 4em 0;
}


.head .logo {
  width: 45%;
}


.head .logo img {
  width: 100%;
}


.head .catch {
  letter-spacing: .1em;
  line-height: 2;
  text-align: center;
}


.contents h1 {
  border-bottom: 2px solid #111;
  font-size: x-large;
  font-weight: bold;
  line-height: 2;
  margin: 1em 0 1.5em 0;
  text-align: center;
}

/*  新着コラム */

.flex-new img {
  width: 30vw;
  margin: 0 50px;
}

.article-new {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0px 70px;
}

.article-new .inner {
  width: 45%;
}

.article-new .inner .article {
  width: 100%;
}

.flex-new_img {
  position: relative
}

.flex-new_img::before {
  content: "";
  top: 0;
  left: 0;
  border-bottom: 60px solid transparent;
  border-left: 60px solid var(--orange);
  /* ラベルの色はここで変更 */
  position: absolute;
  z-index: 100;
}

.flex-new_img::after {
  content: "New";
  display: block;
  top: 7px;
  transform: rotate(-45deg);
  color: #fff;
  left: 5px;
  position: absolute;
  z-index: 101;
  font-size: 16px;
}


.flex-new_img img {
  width: 100%;
}


/*  新着コラムここまで */


.contents .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.contents .inner::after {
  display: block;
  content: "";
  width: 300px;
}


.contents .inner .article {
  margin: 0 0px 30px 0px;
  position: relative;
  width: calc(940px / 3 - 20px);
}


.article-new a {
  color: var(--black);
  text-decoration: none;
}


.article-new a:hover {
  opacity: .5;
  transition: 1s;
}


.article a {
  color: var(--black);
  text-decoration: none;
}


.contents .inner .article a:hover {
  opacity: .5;
  transition: 1s;
}

.contents .inner .img,
.contents .inner .img img {
  width: 100%;
}


.contents .inner .text {
  font-weight: bold;
  line-height: 1.8;
  padding: 1em 0;
  position: relative;
  width: 100%;
}

.contents .inner .text .text-date {
  position: absolute;
  bottom: 5%;
  right: 0;
  font-size: 12px;
  color: #999;
}

.text-right-blue {
  color: #92d1ec;
  font-size: 14px;
}

.text-blue {
  color: #93b2dd;
  font-size: 14px;
}

.text-navy {
  color: #23244f;
  font-size: 14px;
}

.text-green {
  color: #369b4e;
  font-size: 14px;
}

.text-red {
  color: #e03d11;
  font-size: 14px;
}

.text-yellow {
  color: #e8bd21;
  font-size: 14px;
}



.contents .inner h2 {
  font-size: 1.2rem;
  letter-spacing: .03em;
  line-height: 1.3;
  margin: 10px 0;
}


.contents .inner h3 {
  font-size: medium;
  color: #333;
}


.contents .inner span {
  border-right: 3px solid var(--orange);
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: large;
  margin-right: 0.5em;
  padding-right: 0.5em;
}


/*  アイコン
-------------------------------------*/
.icn {
  border-radius: 50px;
  color: #fff;
  font-size: small;
  font-weight: normal;
  padding: 0.1em 1em;
  margin: 0.5em 0 0 0;
  width: fit-content;
}


.blue {
  background: #93b2dd;
}

.navy {
  background: #23244f;
}

.green {
  background: #369b4e;
}

.yellow {
  background: #e8bd21;
}

.red {
  background: #e03d11;
}

.black {
  background: #333f;
}

.right-blue {
  background: #92d1ec;
}

p.new {
  /* NEWアイコン */
  background: var(--black);
  border-radius: 0 0 16px 0;
  color: #fff;
  font-size: small;
  padding: 0.3em 1em 0.1em 0.8em;
  position: absolute;
}

/* =======================================================

                        SP SETTING

========================================================= */
@media screen and (max-width: 768px) {

  /*  izimodal/モーダル設定
-------------------------------------*/
  .iziModal {
    height: 78% !important;
    max-width: 95% !important;
    width: 100%;
  }


  .head {
    flex-direction: column;
    text-align: center;
    margin: 2em 0 0 0;
  }


  .head .logo {
    margin: 0 0 1em 0;
    width: 90%;
  }


  .head .catch p {
    font-size: medium;
  }

  /*  新着コラム */


  .flex-new img {
    width: 30vw;
    margin: 0 50px;
  }

  .article-new {
    margin: 0;
  }

  .article-new .inner {
    width: 100%;
    margin-bottom: 3em;
  }

  .flex-new_img {
    position: relative
  }

  .flex-new_img::before {
    border-bottom: 4em solid transparent;
    border-left: 4em solid var(--orange);
  }


  .flex-new_img::after {
    top: 0.8em;
    left: 0.5em;

  }


  .flex-new_img img {
    width: 100%;
  }


  /*  新着コラムここまで */


  .contents .inner {
    padding: 0 1.5em;
    display: block;
  }


  .contents .inner .article {
    margin: 0 auto 3em 0;
    width: 100%;
  }

  .contents .inner .text .text-date {
    bottom: -5%;
  }
}