@charset "utf-8";

/* CSS Document */
.sec-stock caption {
  display: none;
}

.sec-stock {
  margin-top: 80px;
}

.sec-stock-time time {
  display: block;
  padding-left: 20px;
  text-align: left;
  font-size: 1.8rem;
}

.sec-stock table {
  margin: 30px 0;
}

.tablepress tfoot th,
.tablepress thead th {
  -moz-writing-mode: vertical-rl;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

_::-webkit-full-page-media,
_:future,
:root .tablepress tfoot th,
.tablepress thead th {
  writing-mode: horizontal-tb;
}

@media (min-width:800px) {
  .sec-stock {
    width: 95%;
    margin-top: 100px;
    margin: 100px auto 0;
  }

  .tablepress tfoot th,
  .tablepress thead th {
    writing-mode: horizontal-tb;
  }
}

@media (min-width:1020px) {
  .sec-stock {
    margin: 180px auto 0;
  }
}


/*single-item*/
.sec-item-nav {
  padding: 60px 0;
}

.sec-nav-header {
  max-width: 1200px;
  margin: 0 auto;
}

.sec-item-h1 {
  padding-left: 16px;
  text-align: left;
  font-size: 24px;
  border-left: solid 5px #578B53;
  line-height: 1.5;
}

@media (min-width:1020px) {
  .sec-item-nav {
    padding: 116px 0 80px;
  }

  .sec-item-h1 {
    font-size: 32px;
  }
}

.yarpp-related .yarpp-thumbnail-title {
  color: #333;
}

.sec-item-content p {
  margin-top: 20px;
  font-size: 1.8rem;
  line-height: 38px;
  text-align: left;
  padding: 0 20px;
  text-indent: -1em;
  padding-left: 1.5em;
  font-feature-settings: "palt";
}

.sec-item-content img {
  widows: 100%;
  margin: 0 auto;
}

.sec-item-table td {
  border: solid 1px #333;
}

@media (min-width:1020px) {
  .sec-item {
    margin-bottom: 60px;
    padding: 0 30px;
  }

  .sec-item-h1 {
    font-size: 3.4rem;
  }

  .sec-item-content p {
    font-size: 2.0rem;
  }
}

/*pickup*/
.sec-single-body {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 20px;

  h1, h2, h3, p, ul, div {
    line-height: 1.6;
    font-size: 18px;
  }

  h2 {
    margin: 40px 0 20px;
    padding: 0 16px;
    font-size: 24px;
    border-left: solid 4px #578B53;
  }

  h3 {
    font-size: 20px;
    margin: 30px 0 10px;
    font-weight: bold;
  }

  p {
    margin: 20px 0;
  }

  ul, ol {
    margin: 20px 0;
    padding: 0 24px;

    li {
      margin: 8px 0;
    }

    ul {
      margin: 8px 0;
    }
  }
}

.sec-pickup {
  padding: 0 20px;
  margin: 60px 20px;
}

.bogo-language-switcher {
  width: 110px;
  margin: 0 0 0 auto;
}

.bogo-language-switcher .current {
  display: none;
}

.bogo-language-switcher li {
  text-align: right;
  background-color: #578B53;
  box-shadow: 1px 1px 3px grey;
}

.bogo-language-switcher li a {
  padding: 5px 10px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.bogo-language-switcher a:before {
  content: "■";
  font-family: FontAwesome;
  padding-right: 8px;
}

.related-items {
  padding: 40px 20px;

  .related-items-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .related-items-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;
  }

  .related-item {
    a {
      display: block;
      text-decoration: none;
      text-align: left;

      .related-item-thumbnail {
        position: relative;
        padding-top: 100%;
        overflow: hidden;
        margin-bottom: 4px;

        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      h3 {
        color: #333;
        font-size: 14px;
      }
    }
  }
}

@media (min-width:1020px) {
  .related-items {
    padding: 40px;
    .related-items-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 16px;
    }
  }
}

.related-blogs {
  padding: 40px 20px;
  max-width: 1200px;
  margin: auto;

  .related-blogs-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .related-blogs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 8px;
  }

  .related-blog {
    a {
      display: block;
      text-decoration: none;
      text-align: left;

      .related-blog-thumbnail {
        position: relative;
        padding-top: 41.2%;
        overflow: hidden;
        margin-bottom: 4px;

        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      h3 {
        color: #333;
        font-size: 14px;
      }
    }
  }
}

@media (min-width:1020px) {
  .related-blogs {
    padding: 40px;
    .related-blogs-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }
  }
}