﻿
/*================================================
 *   新着情報
 ================================================*/
#index .contents {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 96px;
  padding-bottom: 200px;
}
/* サイド */
#index #sidebar {
  width: 220px;
}
#index #sidebar .categorys + .archives {
  margin-top: 75px;
}
#index #sidebar h2 {
  font-size: 18px;
  line-height: 1.75;
  font-weight: bold;
  margin-bottom: 5px;
}
#index #sidebar .all-archives a, #index #sidebar .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 56px;
  background-color: #67B944;
  color: #fff;
  padding: 5px 15px 5px 10px;
  cursor: pointer;
  transition: .3s all ease;
  font-size: 18px;
  border-bottom: 1px solid #C8C8C8;
}
#index #sidebar .all-archives a, #index #sidebar .parent:nth-of-type(1) {
  border-top: 1px solid #C8C8C8;
}
#index #sidebar .all-archives a:after, #index #sidebar .parent:after {
  content: "";
  display: block;
  width: 8px;
  height: 14px;
  background: url(../image/side-bar-arrow01.svg) no-repeat;
  background-position: center center;
  background-size: 100% auto;
}
#index #sidebar .parent:after {
  transform: rotate(90deg);
}
#index #sidebar .parent.active:after {
  transform: rotate(-90deg);
}
#index #sidebar .child {
  display: none;
}
#index #sidebar .cat-list li:not(.all-archives) a, #index #sidebar .child a {
  font-size: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 10px 10px 24px;
  height: 56px;
  border-bottom: 1px solid #C8C8C8;
  background: url(../image/side-bar-arrow02.svg) no-repeat left 10px center/8px auto;
}
/* メイン */
#index #main_column {
  width: 780px;
}
#index #main_column ul.news_list {
  border-top: 2px solid #C8C8C8;
  border-bottom: 2px solid #C8C8C8;
  margin-top: 38px;
}
#index #main_column ul.news_list li {
  padding: 31px 90px 28px 25px;
}
#index #main_column ul.news_list li.parent_link:hover {
  opacity: .7;
}
#index #main_column ul.news_list li + li {
  border-top: 1px solid #C8C8C8;
}
#index #main_column ul.news_list li .meta {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#index #main_column ul.news_list li .meta .date {
  letter-spacing: .1em;
}
#index #main_column ul.news_list li .meta .cat {
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: .12em;
  border: 1px solid;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
  padding: 2px 10px;
  margin-left: 15px;
  min-width: 90px;
  height: 26px;
}
#index #main_column ul.news_list li h3 {
  line-height: 2;
  font-size: 20px;
}
/* メイン > ページナビ */
#pager {
  padding-top: 60px;
}
#pager, .wp-pagenavi {
  display: flex;
  justify-content: center;
}
#pager a, #pager .dot, #pager .extend, #pager .current {
  width: 30px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  border: 1px solid #B3B3B3;
  color: #808080;
  margin: 0 4px;
}
#pager a:hover {
  opacity: .7;
}
#pager #current, #pager .current {
  color: #fff;
  border: none;
  background: #67B944;
}
#pager .previous_link, #pager .previouspostslink {
  margin-right: 40px;
}
#pager .next_link, #pager .nextpostslink {
  margin-left: 40px;
}
/* メイン > single */
#index.single #main_column .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
}
#index.single #main_column .meta .date {
  letter-spacing: .1em;
}
#index.single #main_column .meta .cat {
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: .12em;
  border: 1px solid;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  padding: 2px 10px;
  margin-left: 15px;
  min-width: 70px;
  height: 20px;
}
#index.single #main_column h1 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  margin-bottom: 20px;
}
/* メイン > single > slick */
.slider-container {
  margin-top: 50px;
}
.slick-prev, .slick-next {
  position: absolute; /*絶対配置にする*/
  z-index: 3;
  top: calc(50% - 50px - 0.5em);
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border: none;
  background-color: transparent;
  padding: 50px 5px;
  font-size: 40px;
}
.slick-prev { /*戻る矢印の位置と形状*/
  left: 2%;
  transform: rotate(180deg);
}
.slick-next { /*次へ矢印の位置と形状*/
  right: 2%;
}
.slick-prev span, .slick-next span {
  color: #d4d4d4;
}
.slide .item {
  width: 780px;
  height: 500px;
  transition: opacity 500ms ease 0s;
}
.slide .item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* メイン > single > slick > ナビ */
.slide-navigation {
  position: relative;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  margin: 20px -13.3333px -13.3333px 0;
}
.slide-navigation .item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  width: 100px;
  height: 100%;
  margin: 0 13.3333px 13.3333px 0;
  padding: 0;
}
.slide-navigation .item::before {
  display: block;
  padding-top: 100%;
  content: "";
}
.slide-navigation .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* メイン > single > 戻るボタン */
#index.single #main_column .return {
  display: flex;
  justify-content: center;
  margin-top: 90px;
}
#index.single #main_column .return a {
  display: block;
  font-size: 20px;
  letter-spacing: .06em;
  border: 1px solid #67B944;
  width: 260px;
  padding: 19px 30px;
  text-align: center;
}
#index.single #main_column .return a:hover {
  color: #fff;
  background-color: #67B944;
  opacity: 1;
}
/*================================================================================================
 *  スマートフォン向けデザイン
 ================================================================================================*/
@media screen and (max-width: 900px) {
  #index .contents {
    padding: 10.667vw 10vw 26.667vw 10vw;
  }
  /* サイド */
  #index #sidebar {
    width: 100%;
    height: 10.667vw;
    margin-bottom: 8vw;
  }
  #index.single #sidebar {
    display: none;
  }
  #index #sidebar .cat_select select {
    display: flex;
    align-items: center;
    border: 1px solid #C8C8C8;
    background: url(../image/select_arrow.svg) no-repeat;
    background-position: right 4vw center;
    background-size: 3.2vw auto;
    background-color: #fff;
    font-size: 4.267vw;
    padding: 0 12vw 0 5.333vw;
    width: 100%;
    height: 10.667vw;
    border-radius: 0.8vw;
  }
  /* メイン */
  #index #main_column {
    width: 100%;
    padding-top: 0;
  }
  #index #main_column ul.news_list {
    margin-top: 0;
    margin-bottom: 8vw;
  }
  #index #main_column ul.news_list li {
    padding: 4.8vw 0 4vw;
  }
  #index #main_column ul.news_list li .meta {
    margin-bottom: 3.2vw;
  }
  #index #main_column ul.news_list li .meta .date {
    font-size: 3.733vw;
  }
  #index #main_column ul.news_list li .meta .cat {
    font-size: 2.933vw;
    padding: 0.533vw 2.667vw;
    margin-left: 4vw;
    min-width: 18.667vw;
    height: 5.333vw;
  }
  #index #main_column ul.news_list li h3 {
    font-size: 4vw;
  }
  /* メイン > ページナビ */
  #pager_sp .page_number {
    text-align: center;
    font-size: 3.467vw;
    margin-bottom: 3.2vw;
  }
  #pager_sp .pager_nav {
    display: flex;
    border: 1px solid #6ec832;
    border-right: none;
    width: 100%;
    height: 13.333vw;
  }
  #pager_sp .pager_nav li, #pager_sp .pager_nav li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-shrink: 0;
    font-size: 3.467vw;
    color: #6ec832;
  }
  #pager_sp .pager_nav li {
    width: 34%;
    border-right: 1px solid #6ec832;
  }
  #pager_sp .pager_nav li:nth-of-type(1), #pager_sp .pager_nav li:nth-of-type(4) {
    width: 16%;
  }
  /* メイン > single */
  #index.single #main_column .meta {
    margin-bottom: 5.333vw;
  }
  #index.single #main_column .meta .date {
    font-size: 3.733vw;
  }
  #index.single #main_column .meta .cat {
    font-size: 3.2vw;
    padding: 0px 2.667vw 0.533vw;
    margin-left: 4.8vw;
    min-width: 18.667vw;
    height: 5.867vw;
  }
  #index.single #main_column h1 {
    font-size: 5.333vw;
    line-height: 1.5;
    margin-bottom: 6.667vw;
  }
  /* メイン > single > slick */
  .slider-container {
    margin-top: 8vw;
  }
  .slick-prev, .slick-next {
    top: calc(50% - 13.333vw - 0.5em);
    padding: 13.333vw 1.333vw;
    font-size: 6.667vw;
  }
  .slide .item {
    width: 100%;
    height: 51.2vw;
  }
  /* メイン > single > slick > ナビ */
  .slide-navigation {
    margin: 4vw -5px -10px;
  }
  .slide-navigation .item {
    width: calc(25% - 10px);
    margin: 0 5px 10px;
  }
  /* メイン > single > 戻るボタン */
  #index.single #main_column .return {
    margin-top: 16vw;
  }
  #index.single #main_column .return a {
    font-size: 4.8vw;
    width: 69.333vw;
    padding: 5vw 8vw;
  }
}