@charset "utf-8";

/** ***************************************************************************
 * 共用
 * ************************************************************************* */

#main {
  overflow: hidden;
}

/** ***************************************************************************
 * 一覧ページ
 * ************************************************************************* */

body.page-archive
#main div.article {
  margin-bottom: -30px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}

body.page-archive
#main div.article div.item {
  width: 48%;
  margin-bottom: 30px;
}

body.page-archive
#main div.article div.item a {
  height: 100%;
  color: inherit;
  text-decoration: none;
  display: block;
}

@media screen and (min-width:1001px) {

  body.page-archive
  #main div.article {
    margin-bottom: -40px;
    justify-content: flex-start;
  }

  body.page-archive
  #main div.article div.item {
    width: calc(100% / 3 - 10px);
    margin-bottom: 40px;
  }

  body.page-archive
  #main div.article div.item:nth-child(3n+2) {
    margin-left: 15px;
    margin-right: 15px;
  }

}

/**
 * 画像
 */

body.page-archive
#main div.article div.item div.image {
  padding-bottom: 66.7%;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: filter 0.3s ease-in-out 0.0s;
  filter: brightness(100%) contrast(100%);
}

body.page-archive
#main div.article div.item a:hover div.image {
  filter: brightness(105%) contrast(110%);
}

@media screen and (min-width:1001px) {

  body.page-archive
  #main div.article div.item div.image {
    border-radius: 8px;
  }

}

/**
 * 内容
 */

body.page-archive
#main div.article div.item div.content div.name {
  color: #40681f;
  font-size: 0.875em;
}

/** ***************************************************************************
 * 記事ページ
 * ************************************************************************* */

/** ---------------------------------------------------------------------------
 * タイトルなど
 */

body.page-single
#main div.article header.header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

@media screen and (min-width:1001px) {

  body.page-single
  #main div.article header.header {
    flex-direction: row;
  }

}

/**
 * 内容
 */

@media screen and (min-width:1001px) {

  body.page-single
  #main div.article header.header div.content {
    padding-left: 60%;
    flex-shrink: 0;
  }

}

/* タイトル */

body.page-single
#main div.article header.header [class*="header-title"] {
  margin-bottom: 20px;
}

body.page-single
#main div.article header.header [class*="header-title"] small {
  color: #40681f;
  font-size: 0.875em;
  display: block;
}

@media screen and (min-width:1001px) {

  body.page-single
  #main div.article header.header [class*="header-title"] {
    margin-bottom: 30px;
  }

  body.page-single
  #main div.article header.header [class*="header-title"] small {
    margin-top: 10px;
    font-size: 0.625em;
  }

}

/* 仕様 */

body.page-single
#main div.article header.header table.spec {
  margin-bottom: 20px;
  border-collapse: collapse;
}

body.page-single
#main div.article header.header table.spec caption {
  color: #62af23;
  font-size: 1.125em;
  font-weight: 700;
  text-align: left;
}

body.page-single
#main div.article header.header table.spec th {
  padding-right: 0.5em;
}

body.page-single
#main div.article header.header table.spec td {
  padding-left: 0.5em;
}

@media screen and (min-width:1001px) {

  body.page-single
  #main div.article header.header table.spec {
    margin-bottom: 30px;
  }

}

/**
 * 画像
 */

body.page-single
#main div.article header.header div.image {
  max-width: none;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 20px;
  padding-bottom: 50vw;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  order: -1;
}

@media screen and (min-width:1001px) {

  body.page-single
  #main div.article header.header div.image {
    width: calc(var(--innerWidth) / 2 + 5%);
    min-height: 400px;
    margin: unset;
    padding-bottom: unset;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    order: unset;
    position: relative;
    z-index: 1;
    right: calc(50% + (var(--innerWidth) / 2));
  }

}

/** ---------------------------------------------------------------------------
 * Q&A
 */

body.page-single
#main div.article div.qa {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

body.page-single
#main div.article div.qa div.item ~ div.item {
  margin-top: 40px;
}

@media screen and (min-width:1001px) {

  body.page-single
  #main div.article div.qa div.item ~ div.item {
    margin-top: 80px;
  }

}

/**
 * 質問
 */

body.page-single
#main div.article div.qa div.question {
  margin-bottom: 20px;
  padding: 10px 50px 10px 15px;
  cursor: pointer;
  line-height: 1.4;
  font-weight: 600;
  border-radius: 8px;
  background-color: #e5f2e8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 0;
}

body.page-single
#main div.article div.qa div.question::before {
  content: '';
  width: 2.25em;
  height: 2.25em;
  margin-right: 10px;
  background: url("../_image/lineup/reform/faq-icon-question.png") 0 0 / 100% no-repeat;
  flex-shrink: 0;
}

@media screen and (min-width:1001px) {

  body.page-single
  #main div.article div.qa div.question {
    margin-bottom: 30px;
    padding: 15px 50px 15px 15px;
    font-size: 1.125em;
  }

  body.page-single
  #main div.article div.qa div.question::before {
    margin-right: 15px;
    width: 2em;
    height: 2em;
    align-self: flex-start;
  }

}

/**
 * 回答
 */

body.page-single
#main div.article div.qa div.answer {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

/**
 * 画像
 */

body.page-single
#main div.article div.qa div.image {
  max-width: 750px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

body.page-single
#main div.article div.qa div.image img {
  margin: auto;
  border-radius: 8px;
  display: block;
}

body.page-single
#main div.article div.qa div.image img ~ img {
  margin-top: 20px;
}

/** ---------------------------------------------------------------------------
 * ページャー
 */

body.page-single
#main div.pager {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

body.page-single
#main div.pager ul.list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/**
 * 前へ / 次へ
 */

body.page-single
#main div.pager ul.list li.item {
  flex-shrink: 0;
}

body.page-single
#main div.pager ul.list li.item a {
  padding: 0.5em;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0.3;
  transition: color 0.3s ease-in-out 0.0s;
  color: inherit;
}

body.page-single
#main div.pager ul.list li.item a[href] {
  opacity: 1;
}

body.page-single
#main div.pager ul.list li.item a[href]:hover {
  color: #62af23;
}

/* 前へ */

body.page-single
#main div.pager ul.list li.prev {
  margin-right: 1em;
}

body.page-single
#main div.pager ul.list li.prev a::before {
  content: '';
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  background: url("../_image/_common/icon-arrow-3.png") 0 0 / 100% 100% no-repeat;
  transform: scale(-1);
}

/* 次へ */

body.page-single
#main div.pager ul.list li.next {
  margin-left: 1em;
}

body.page-single
#main div.pager ul.list li.next a::after {
  content: '';
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  background: url("../_image/_common/icon-arrow-3.png") 0 0 / 100% 100% no-repeat;
}

/**
 * 戻る
 */

body.page-single
#main div.pager ul.list li.back {
  width: 100%;
  margin-top: 20px;
  text-align: center;
  order: +1;
}

body.page-single
#main div.pager ul.list li.back a {
  min-width: 250px;
}

@media screen and (min-width:1001px) {

  body.page-single
  #main div.pager ul.list li.back {
    width: unset;
    margin-top: unset;
    text-align: unset;
    order: unset;
  }

  body.page-single
  #main div.pager ul.list li.back a {
    min-width: 300px;
  }

}