@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.4
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
:root {
  --bland-sage: #093a32;
  --bland-dark-grean: #081f1b;
  --bland-background: #FAFAFA;
  --bland-accent: #B79C68;
  --bland-link: #1A365D;
  --bland-link-hover: #4a5b73;
  --bland-text: #222222;
  --montserrat: 'Montserrat', sans-serif !important;
  --bland-gray: #eeedec;
}

a:hover {
  color: var(--bland-link-hover);
}

body {
  margin: 0;
}

.home .header-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: rgb(255 255 255 / .3) !important;
  filter: blur(2);
  text-shadow: 0 0 5px rgb(0 0 0 / .5);
}

.home .content .main {
  border: none !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.logo,
.logo-header,
.logo-text {
  padding: 0;

}

.site-name-text,
.site-logo-text,
.site-title {
  font-family: var(--montserrat) !important;
  letter-spacing: 0.15em;
  height: 114px;
}

.custom-search-container {
  padding: 32px;
  background: var(--bland-gray);
}

.header-in {
  flex-direction: row !important;
  align-items: center;
  line-height: 1;
  height: 80px;

  .tagline {
    margin: 0;
  }
}

.section-header {
  margin-bottom: 32px;
  line-height: 1.4;

  .section-header-sub-title {
    font-family: var(--montserrat);
    letter-spacing: 0.08em;
    font-weight: normal;
    color: var(--bland-accent);
  }

  .section-header-title {}
}

/*1023px以下*/
.top-hero {
  position: relative;
  max-width: 1344px;
  margin-left: auto;
  margin-right: auto;
  position: relative;

  @media screen and (min-width: 1344px) {
    &::before {
      left: 0;
      top: 0;
      height: 100%;
      content: '';
      width: 80px;
      display: block;
      position: absolute;
      background: linear-gradient(to right, #F8FAFC 0%, transparent 100%);
    }

    &::after {
      right: 0;
      top: 0;
      height: 100%;
      content: '';
      width: 80px;
      display: block;
      position: absolute;
      background: linear-gradient(to left, #F8FAFC 0%, transparent 100%);
    }
  }

  /*834px以下*/
  @media screen and (max-width: 834px) {
    /*必要ならばここにコードを書く*/
  }

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.hero-genre {
  position: absolute;
  left: 4%;
  top: calc(56% + 60px);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 480px;
  gap: 8px;

  @media screen and (max-width: 1023px) {
    width: 400px;
    font-size: 10px;
    top: calc(56% + 55px);
  }

  @media screen and (max-width: 834px) {
    position: inherit;
    background: #e4e3e2;
    width: 100%;
    padding: 0 36px 24px;
  }

  li {
    flex-grow: 1;
  }

  a {
    background: #fff;
    font-size: 12px;
    border-radius: 50px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-family: var(--montserrat);
    color: var(--bland-sage);
    border: 1px solid #ccc;
    letter-spacing: .1em;
    gap: 6px;
    transition: .3s;

    &:hover {
      opacity: 0.7;
    }

    &::before {
      content: '';
      width: 12px;
      height: 12px;
      display: block;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26.028' height='30.849' viewBox='0 0 26.028 30.849'%3E%3Cpath id='Icon_metro-spoon-fork' data-name='Icon metro-spoon-fork' fill='%23093a32' d='M9.319,1.928c-3.195,0-5.784,3.021-5.784,6.748a6.621,6.621,0,0,0,4.45,6.567L7.027,30.852a1.8,1.8,0,0,0,1.81,1.924H9.8a1.8,1.8,0,0,0,1.81-1.924l-.958-15.609A6.621,6.621,0,0,0,15.1,8.676c0-3.727-2.59-6.748-5.784-6.748Zm19.441,0-1.607,9.64H25.948l-.8-9.64h-.8l-.8,9.64H22.333l-1.607-9.64h-.8V14.46a.964.964,0,0,0,.964.964H23.4l-.947,15.428a1.8,1.8,0,0,0,1.81,1.924h.964a1.8,1.8,0,0,0,1.81-1.924l-.947-15.428H28.6a.964.964,0,0,0,.964-.964V1.928Z' transform='translate(-3.535 -1.928)'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    &.hero-ganre-beauty {
      color: #BF8D8C;

      &::before {
        content: '';
        width: 12px;
        height: 12px;
        display: block;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='29.121' viewBox='0 0 30 29.121'%3E%3Cg id='Icon_feather-scissors' data-name='Icon feather-scissors' transform='translate(-3 32.121) rotate(-90)'%3E%3Cpath id='Path_1' data-name='Path 1' d='M13.5,9A4.5,4.5,0,1,1,9,4.5,4.5,4.5,0,0,1,13.5,9Z' fill='none' stroke='%23BF8D8C' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3Cpath id='Path_2' data-name='Path 2' d='M13.5,27A4.5,4.5,0,1,1,9,22.5,4.5,4.5,0,0,1,13.5,27Z' fill='none' stroke='%23BF8D8C' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M30,6,12.18,23.82' fill='none' stroke='%23BF8D8C' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3Cpath id='Path_4' data-name='Path 4' d='M21.7,21.72,30,30' fill='none' stroke='%23BF8D8C' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3Cpath id='Path_5' data-name='Path 5' d='M12.18,12.18,18,18' fill='none' stroke='%23BF8D8C' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
      }
    }

    &.hero-ganre-medical {
      color: #436B9A;

      &::before {
        content: '';
        width: 8px;
        height: 8px;
        display: block;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.026' height='22.919' viewBox='0 0 21.026 22.919'%3E%3Cpath id='Icon_open-medical-cross' data-name='Icon open-medical-cross' fill='%23436B9A' d='M5.257,0V5.73H0V17.189H5.257v5.73H15.77v-5.73h5.257V5.73H15.77V0Z'/%3E%3C/svg%3E");
      }
    }

    &.hero-ganre-nursing {
      color: #739176;

      &::before {
        content: '';
        width: 12px;
        height: 12px;
        display: block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='18.375' viewBox='0 0 21 18.375'%3E%3Cpath id='Icon_awesome-heart' data-name='Icon awesome-heart' fill='%23739176' d='M18.961,3.5a5.609,5.609,0,0,0-7.653.558l-.808.833-.808-.833A5.608,5.608,0,0,0,2.038,3.5a5.889,5.889,0,0,0-.406,8.527l7.936,8.195a1.286,1.286,0,0,0,1.858,0l7.936-8.195a5.886,5.886,0,0,0-.4-8.527Z' transform='translate(0.001 -2.248)'/%3E%3C/svg%3E");
      }
    }

    &.hero-ganre-shopping {
      color: #D9A787;

      &::before {
        content: '';
        width: 12px;
        height: 12px;
        display: block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31.5' height='36' viewBox='0 0 31.5 36'%3E%3Cpath id='Icon_awesome-shopping-bag' data-name='Icon awesome-shopping-bag' fill='%23D9A787' d='M24.75,11.25V9a9,9,0,0,0-18,0v2.25H0V30.375A5.625,5.625,0,0,0,5.625,36h20.25A5.625,5.625,0,0,0,31.5,30.375V11.25ZM11.25,9a4.5,4.5,0,0,1,9,0v2.25h-9ZM22.5,17.438a1.688,1.688,0,1,1,1.688-1.687A1.687,1.687,0,0,1,22.5,17.438Zm-13.5,0a1.688,1.688,0,1,1,1.688-1.687A1.687,1.687,0,0,1,9,17.438Z'/%3E%3C/svg%3E");
      }
    }
    &.hero-ganre-education {
      color: #655865;

      &::before {
        content: '';
        width: 12px;
        height: 12px;
        display: block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40.5' height='36' viewBox='0 0 40.5 36'%3E%3Cpath id='Icon_awesome-hotel' data-name='Icon awesome-hotel' fill='%23655865' d='M39.375,4.5A1.125,1.125,0,0,0,40.5,3.375V1.125A1.125,1.125,0,0,0,39.375,0H1.125A1.125,1.125,0,0,0,0,1.125v2.25A1.125,1.125,0,0,0,1.125,4.5H2.249v27H1.125A1.125,1.125,0,0,0,0,32.625v2.25A1.125,1.125,0,0,0,1.125,36H18V30.375a1.128,1.128,0,0,1,1.125-1.125h2.25A1.128,1.128,0,0,1,22.5,30.375V36H39.375A1.125,1.125,0,0,0,40.5,34.875v-2.25A1.125,1.125,0,0,0,39.375,31.5H38.25V4.5ZM18,7.65a.968.968,0,0,1,.9-.9h2.7a.968.968,0,0,1,.9.9v2.7a.968.968,0,0,1-.9.9H18.9a.968.968,0,0,1-.9-.9V7.65Zm0,6.75a.968.968,0,0,1,.9-.9h2.7a.968.968,0,0,1,.9.9v2.7a.968.968,0,0,1-.9.9H18.9a.968.968,0,0,1-.9-.9V14.4ZM9,7.65a.968.968,0,0,1,.9-.9h2.7a.968.968,0,0,1,.9.9v2.7a.968.968,0,0,1-.9.9H9.9a.968.968,0,0,1-.9-.9ZM12.6,18H9.9a.968.968,0,0,1-.9-.9V14.4a.968.968,0,0,1,.9-.9h2.7a.968.968,0,0,1,.9.9v2.7A.968.968,0,0,1,12.6,18Zm.9,9A6.75,6.75,0,0,1,27,27Zm18-9.9a.968.968,0,0,1-.9.9H27.9a.968.968,0,0,1-.9-.9V14.4a.968.968,0,0,1,.9-.9h2.7a.968.968,0,0,1,.9.9Zm0-6.75a.968.968,0,0,1-.9.9H27.9a.968.968,0,0,1-.9-.9V7.65a.968.968,0,0,1,.9-.9h2.7a.968.968,0,0,1,.9.9Z'/%3E%3C/svg%3E");
      }
    }
    
      &.hero-ganre-travel {
        color: #706CA7;
  
        &::before {
          content: '';
          width: 12px;
          height: 12px;
          display: block;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40.5' height='36' viewBox='0 0 40.5 36'%3E%3Cpath id='Icon_awesome-hotel' data-name='Icon awesome-hotel' fill='%23706CA7' d='M39.375,4.5A1.125,1.125,0,0,0,40.5,3.375V1.125A1.125,1.125,0,0,0,39.375,0H1.125A1.125,1.125,0,0,0,0,1.125v2.25A1.125,1.125,0,0,0,1.125,4.5H2.249v27H1.125A1.125,1.125,0,0,0,0,32.625v2.25A1.125,1.125,0,0,0,1.125,36H18V30.375a1.128,1.128,0,0,1,1.125-1.125h2.25A1.128,1.128,0,0,1,22.5,30.375V36H39.375A1.125,1.125,0,0,0,40.5,34.875v-2.25A1.125,1.125,0,0,0,39.375,31.5H38.25V4.5ZM18,7.65a.968.968,0,0,1,.9-.9h2.7a.968.968,0,0,1,.9.9v2.7a.968.968,0,0,1-.9.9H18.9a.968.968,0,0,1-.9-.9V7.65Zm0,6.75a.968.968,0,0,1,.9-.9h2.7a.968.968,0,0,1,.9.9v2.7a.968.968,0,0,1-.9.9H18.9a.968.968,0,0,1-.9-.9V14.4ZM9,7.65a.968.968,0,0,1,.9-.9h2.7a.968.968,0,0,1,.9.9v2.7a.968.968,0,0,1-.9.9H9.9a.968.968,0,0,1-.9-.9ZM12.6,18H9.9a.968.968,0,0,1-.9-.9V14.4a.968.968,0,0,1,.9-.9h2.7a.968.968,0,0,1,.9.9v2.7A.968.968,0,0,1,12.6,18Zm.9,9A6.75,6.75,0,0,1,27,27Zm18-9.9a.968.968,0,0,1-.9.9H27.9a.968.968,0,0,1-.9-.9V14.4a.968.968,0,0,1,.9-.9h2.7a.968.968,0,0,1,.9.9Zm0-6.75a.968.968,0,0,1-.9.9H27.9a.968.968,0,0,1-.9-.9V7.65a.968.968,0,0,1,.9-.9h2.7a.968.968,0,0,1,.9.9Z'/%3E%3C/svg%3E");
        }
      }

    &.hero-ganre-life {
      color: #A6854A;

      &::before {
        content: '';
        width: 12px;
        height: 12px;
        display: block;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='33' viewBox='0 0 30 33'%3E%3Cg id='Icon_feather-home' data-name='Icon feather-home' transform='translate(-3 -1.5)'%3E%3Cpath id='Path_1' data-name='Path 1' d='M4.5,13.5,18,3,31.5,13.5V30a3,3,0,0,1-3,3H7.5a3,3,0,0,1-3-3Z' fill='none' stroke='%23A6854A' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3Cpath id='Path_2' data-name='Path 2' d='M13.5,33V18h9V33' fill='none' stroke='%23A6854A' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");

      }
    }
  }
}

.go-to-top-button {
  background: var(--bland-accent);

  @media screen and (max-width: 1023px) {
    display: block !important;
  }
}

.section-header {
  text-align: center;
}

.card-grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;

  .grid-card-item {
    display: grid;
    width: calc(25% - 18px);

    @media screen and (max-width: 1023px) {
      width: calc(33.333% - 16px);
    }

    /*834px以下*/
    @media screen and (max-width: 834px) {
      width: calc(50% - 12px);
    }

    /*480px以下*/
    @media screen and (max-width: 480px) {
      width: 100%;
    }

    a {
      text-decoration: none;
      display: block;
    }

    .grid-card-thumb {
      margin-bottom: 8px;
      aspect-ratio: 16/9;

      img {
        height: 100%;
        object-fit: cover;
        width: 100%;
      }
    }

    .grid-card-title {
      font-weight: normal;
      font-size: 16px;
      line-height: 1.4;
    }
  }
}

.grid-card-categories {
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.card-cat-badge {
  display: flex;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}

.cat-genre {
  background: var(--bland-accent);
  color: #fff;
}

.cat-area {
  border: 1px solid var(--bland-sage);
  color: var(--bland-sage);
}

.card-grid-container {
  @media screen and (max-width: 834px) {}
}

/* POPULAR カルーセルスタイリング */
.custom-popular-carousel-wrapper {
  margin: 0 36px 2em;

  @media screen and (max-width: 834px) {
    margin: 0 0 2em;
  }
}

.popular-slick-carousel {
  margin: 0 -10px;
}

.popular-slick-carousel .carousel-item {
  padding: 0 10px;
  box-sizing: border-box;
}


.carousel-item-link:hover {
  transform: translateY(-4px);
}

.carousel-item-thumb {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f5f5f5;

  img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.carousel-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-item-title {
  padding: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  height: 3em;
  overflow: hidden;
}

/* Slick矢印・ドットのGold表示カスタマイズ */
.popular-slick-carousel .slick-prev:before,
.popular-slick-carousel .slick-next:before {
  color: #C5A059;
}

.genre-grid-wrapper,
.top-section-wrapper {
  margin-bottom: 56px;
  margin-top: 56px;

  @media screen and (max-width: 834px) {
    margin-bottom: 32px;
    margin-top: 32px;
  }

}

main {
  overflow: hidden;
  width: 100vw;

}

.custom-popular-carousel-wrapper {
  padding-bottom: 56px;
  padding-top: 56px;
  border-image: linear-gradient(0deg, var(--bland-gray) 100%) fill 0 // 0 100vw 0 100vw;

    @media screen and (max-width: 834px) {
    padding-bottom: 32px;
    padding-top: 32px;
  }

  .slick-dots {
    list-style: none;
    justify-content: center;
    display: flex;
    margin-top: 40px;
    margin-left: 0;
    padding-left: 0;
    gap: 16px;

    li {
      &.slick-active {
        button {
          background: var(--bland-accent);

        }
      }

      bottom: none;

      button {
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-weight: bold;
        font-size: 10px;
        font-family: var(--montserrat);
        background: var(--bland-sage);
        color: var(--bland-background);

      }
    }

  }

  /*834px以下*/
  @media screen and (max-width: 834px) {
    margin-left: -20px;
    margin-right: -20px;
  }

  a {
    text-decoration: none;
  }

  .carousel-item-title {
    height: auto;
    padding: 8px 0;
  }

  .slick-arrow {
    position: absolute;
    top: calc(50% - 25px);
    font-size: 0;
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    &::before {
      content: '';
      width: 25px;
      height: 25px;
      display: block;
      rotate: 45deg;

      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
    }
  }

  .slick-prev {
    left: 0px;
    transition: .3s;
    rotate: 180deg;

    &:hover {
      left: -5px;
    }
  }

  .slick-next {
    transition: .3s;
    left: calc(100% - 50px);

    &:hover {
      left: calc(100% - 45px);
    }
  }

}

.genre-section {
  padding-bottom: 56px;
  padding-top: 56px;
  border-image: linear-gradient(0deg, var(--bland-gray) 100%) fill 0 / / 0 100vw 0 100vw;

}

.genre-grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;

  /*834px以下*/
  .genre-card {
    width: calc(50% - 16px);
    position: relative;

    @media screen and (max-width: 834px) {
      width: 100%;
    }

    .genre-card-thumb {
      aspect-ratio: 16/ 6;

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }

    .genre-card-content {
      text-shadow: 0 0 4px rgb(0 0 0 / .4);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 16px;
      color: #fff;
      background: linear-gradient(to top, rgb(0 0 0 / .6) 0%, rgb(0 0 0 / 0) 100%);
    }
  }

}

.grid-card-thumb {
  aspect-ratio: 16/9;

  img {
    display: block;
    ;
    width: 100%;
    object-fit: cover;
  }
}

.area {
  margin-top: 56px;

  @media screen and (max-width: 834px) {
    margin-top: 32px;
  }

  &+* {
    margin-top: 0 !important;
  }

  padding: 36px 29px;
  background: var(--bland-gray);

  h2 {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .area-list-title {
    font-size: 15px;
    line-height: 1;
  }

  font-size: 15px;

  a {
    text-decoration: none;


    &:hover {
      text-decoration: underline;
    }
  }

  .area-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 16px;

    ul {
      display: flex;
      list-style: none;
      padding: 0;
      gap: 8px 0;
      line-height: 1;

      li+li {
        &::before {
          content: '|';
          margin-left: 6px;
          margin-right: 6px;
        }
      }
    }
  }

  .area-grid-wrapper {
    display: grid;
    gap: 16px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1256px;
    padding-left: 36px;
    padding-right: 36px;

  }
}

.news-list {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  border-top: 1px solid #ccc;

  li {
    list-style: none;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ccc;

    a {
      text-decoration: none;
    }
  }
}
.common-btn {
    background: var(--bland-sage);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: max-content;
      height: 50px;
      gap: 16px;
      text-decoration: none;
      gap: #fff;
      border-radius: 50px;
      margin: 50px auto 0 auto;
      transition: .3s;
      padding: 0 32px;
      box-shadow: 0 1px 2px rgb(0 0 0 / .6);
    
      &:hover {
        color: #fff;
        opacity: 0.7;
      }
    
      &::after {
        content: '';
        width: 6px;
        height: 6px;
        display: block;
        rotate: 45deg;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
      }
}
.news-btn {
  background: var(--bland-sage);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 200px;
  height: 50px;
  gap: 16px;
  text-decoration: none;
  gap: #fff;
  border-radius: 50px;
  margin: 50px auto 0 auto;
  transition: .3s;

  &:hover {
    color: #fff;
    opacity: 0.7;
  }

  &::after {
    content: '';
    width: 6px;
    height: 6px;
    display: block;
    rotate: 45deg;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }
}

.news-date {
  font-size: 0.85rem;
  font-family: var(--montserrat);
  font-weight: bold;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.news-title {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home .custom-search {
  position: absolute;
  top: 55%;
  left: 4%;

  @media screen and (max-width: 1023px) {
    .custom-search-form {
      grid-template-columns: 320px 80px;
    }
  }

  /*834px以下*/
  @media screen and (max-width: 834px) {
    position: inherit;
    background: #e4e3e2;
    padding: 24px 36px 16px;
  }
}

.custom-search-wrapper {
  max-width: 1256px;
  margin-left: auto;
  margin-right: auto;

  .custom-search form {
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    @media screen and (max-width: 834px) {
      width: inherit;
    }
  }
}

.custom-search {
  form {
    max-width: 100% !important;
    display: grid;
    grid-template-columns: 400px 80px;
    overflow: hidden;

    /*834px以下*/
    @media screen and (max-width: 834px) {
      grid-template-columns: 1fr 50px !important;
    }
  }

  button,
  input[type=text] {
    border: none;
    font-size: 16px;
    height: 50px;
  }

  input[type=text] {

    padding: 0 50px 0 20px;
    padding-right: 50px;
    border: 1px solid var(--bland-sage);
    border-right: none;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;

    &::placeholder {
      font-size: 14px;
    }
  }

  button {
    @media screen and (max-width: 834px) {
      font-size: 12px;
    }
  }
}

.search-submit-btn {
  border: none;
  color: #fff;
  border-radius: 50px;
  background: var(--bland-sage);
  height: 50px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-left: -50px;
  border: 1px solid var(--bland-sage);
  transition: .3s;

  &:hover {
    opacity: 0.7;
  }

  &::after {
    display: block;
    content: '';
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    width: 6px;
    height: 6px;
    rotate: 45deg;
  }
}

.sidebar {
  padding: 0;
}

.sidebar-tab-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sidebar-tab-btn {
  height: 50px;
  border: none;
  background: none;
  font-size: 16px;
  border-bottom: 1px solid #ccc;
  background: #eee;
  color: #999;

  &:first-child {
    border-right: 1px solid #ccc;

  }

  &.active {
    background: none;
    border-bottom: none;
    color: var(--bland-text);
  }
}

.sidebar {
  background: none;

  .sidebar-tab-content {
    padding: 16px;
  }

  .widget_tabbed_entries {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;

  }

  .new-entry-cards {
    display: grid;
  }

  .entry-card {
    display: grid;
    grid-template-columns: 40% 1fr;
    padding: 0;
  }

  .entry-card-title.card-title.e-card-title {
    background: none;
    color: var(--bland-text);
    margin: 0;
    font-size: 16px;
    height: 112px;
  }

  .widget-entry-cards figure {
    width: auto;

    img {
      aspect-ratio: 1/1;
      object-fit: cover;
    }
  }

  .sidebar-tab-content {
    display: none;

    &.active {
      display: block;
    }
  }

  .entry-card-content {
    margin-left: 0;
  }
}

.breadcrumb {
  background: none !important;
}

.eye-catch-wrap {
  justify-content: center;
}

.custom-author-card {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 16px;
}

.author-card-main {
  display: grid;
  grid-template-columns: 100px 1fr;
  font-size: 14px;
  gap: 16px;

  p {
    margin-bottom: 0;
  }

  .author-card-thumb {
    justify-content: center;
    align-items: center;
    display: flex;

    img {
      border-radius: 50%;
    }
  }

  .author-card-name {
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 16px;
  }
}

.author-card-sns {
  display: flex;
  margin-top: 12px;
  gap: 8px;
  justify-content: center;

  a {
    text-decoration: none;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: var(--bland-text);
    border: 1px solid var(--bland-text);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: .3s;

    &:hover {
      color: var(--bland-text);
      background: #fff;
    }
  }
}

.widget_tabbed_entries {
  &>h2 {
    text-align: center;
    color: var(--bland-accent);
    background: none;
    margin-top: 0px;
    font-size: 18px;
    margin-bottom: 0;
  }

  .author-card-name {
    text-align: center;
    margin-bottom: 8px;
  }
}

.genre-list {
  list-style: none;
  margin-left: -40px;
  border-top: 1px solid #ccc;

}
.genre-item+.genre-item {
  border-top: 1px solid #ccc;

}
.genre-item-link {
  text-decoration: none;
  display: flex;
  height: 50px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  color: var(--bland-text);
  font-size: 16px;
  transition: .3s;
  
  &:hover {
    color: var(--bland-text);
    background: var(--bland-accent);
  }
}

.widget_tabbed_entries .custom-author-card {
  border: none;

  .author-card-main {
    grid-template-columns: 1fr;
  }
}

.article h2 {
  background: none;
  color: var(--bland-text);
  padding: 0;

  &::after {
    margin-top: 16px;
    content: '';
    height: 2px;
    width: 100%;
    display: block;
    background: linear-gradient(to right, var(--bland-sage) 10%, var(--bland-accent) 10%);
  }
}

.article h3 {
  border: none;
  color: var(--bland-dark-grean);
  padding: 0;
}
.article-header.category-header {
  position: relative;
  padding-bottom: 0;
}
.category-header .eye-catch-wrap {
  margin: -36px -30px 0;
  .eye-catch {
    margin-bottom: 0;
    aspect-ratio: 10/4;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
}
.hero-genre.archive {
  position: inherit;
  left: inherit;
  top: inherit;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 16px;

  li {
    flex-grow: initial;
  }
  a {
    height: 32px;
    padding: 0 12px;
  }
    /*834px以下*/
  @media screen and (max-width: 834px) {
   background: none;
   padding: 0;
  }
}
.article-header-innner {
  
  position: absolute;
  z-index: 1;
  height: 50%;
  padding: 24px 36px;
  left: -30px;
  width: calc(100% + 60px);
  bottom: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / 0) 100%);
  color: var(--bland-background);
  text-shadow: 0 0 4px rgb(0 0 0 / .8);
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 8px;
  p {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
}