@charset "UTF-8";
/* Scss Document */
/* ------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////
記事ストック
/////////////////////////////////////////////////////////////////////
------------------------------------------------------------------ */
/* 一覧 */
.cnts {
  width: 100%;
  margin: 100px auto 0;
  padding: 70px calc((100% - 1060px)/2) 100px;
  background-color: #f7f6eb;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .cnts__title {
    margin: 0 0 60px;
    font-size: 2rem;
    font-weight: normal;
    line-height: 1.0;
    letter-spacing: 0.2em; }
  .cnts__cate {
    margin: 20px 0 0;
    padding: 20px;
    background-color: #FFF;
    border: 1px solid #000; }
    .cnts__cate--dt {
      margin: 0;
      padding: 0;
      font-family: "Maven Pro", sans-serif;
      font-weight: 700;
      position: relative; }
      .cnts__cate--dt::before {
        content: '▼'; }
    .cnts__cate--dd {
      margin: 0;
      padding: 0; }
  .cnts__cateList {
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap; }
    .cnts__cateList--item {
      margin: 15px 30px 0 0;
      padding: 0; }
      .cnts__cateList--item a {
        color: #000 !important;
        position: relative;
        transition: 0.1s linear; }
        .cnts__cateList--item a::after {
          content: '';
          width: 100%;
          height: 1px;
          position: absolute;
          bottom: -5px;
          left: 0;
          background-color: #000;
          transform: scaleX(0);
          transform-origin: center right;
          transition: transform 0.2s ease; }
        .cnts__cateList--item a:hover {
          text-decoration: none;
          top: 1px; }
          .cnts__cateList--item a:hover::after {
            transform-origin: center left;
            -moz-transform: scaleX(1);
            -webkit-transform: scaleX(1);
            transform: scaleX(1); }
  .cnts__list {
    margin: 0;
    padding: 30px 0 0;
    list-style: none;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap; }
  .cnts__item {
    width: 250px;
    margin-top: 30px;
    margin-right: 20px;
    padding: 0; }
    .cnts__item:nth-of-type(4n) {
      margin-right: 0; }
  .cnts__anchor {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: block; }
    .cnts__anchor--image {
      width: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      position: relative;
      background-color: #000; }
      .cnts__anchor--image::before {
        content: '';
        display: block;
        padding-top: 100%; }
      .cnts__anchor--image span {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; }
        .cnts__anchor--image span img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: 0.1s linear; }
      .cnts__anchor--image p {
        padding: 5px 20px;
        color: #FFF;
        font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
        line-height: 1.0;
        background-color: #003c6d;
        position: absolute;
        top: 0;
        left: 0; }
    .cnts__anchor--name {
      margin: 15px 0 0;
      padding: 0;
      font-size: 18px; }
    .cnts__anchor:hover {
      text-decoration: none; }
      .cnts__anchor:hover .cnts__anchor--image img {
        -moz-transform: scale(1.05);
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: alpha(opacity=70); }

@media (max-width: 1200px) {
  .cnts {
    margin: 100px 0 0;
    padding: 70px 40px 100px; }
    .cnts__item {
      width: calc((100% - 60px)/4); } }
@media (max-width: 900px) {
  .cnts__item {
    width: calc((100% - 40px)/3); }
    .cnts__item:nth-of-type(4n) {
      margin-right: 20px; }
    .cnts__item:nth-of-type(3n) {
      margin-right: 0; } }
@media (max-width: 760px) {
  .cnts__anchor--date, .cnts__anchor--txt {
    width: 100%; } }
@media (max-width: 700px) {
  .cnts {
    margin: 0; } }
@media (max-width: 600px) {
  .cnts {
    padding: 70px 20px 100px; }
    .cnts__title {
      font-size: 1.5rem; }
    .cnts__item {
      width: calc((100% - 20px)/2); }
      .cnts__item:nth-of-type(3n) {
        margin-right: 20px; }
      .cnts__item:nth-of-type(2n) {
        margin-right: 0; }
    .cnts__anchor--name {
      margin: 10px 0 0;
      font-size: 16px; } }
/* 詳細 */
.atcl {
  width: 100%;
  margin: 100px auto 0;
  padding: 70px calc((100% - 1060px)/2) 100px;
  background-color: #f7f6eb;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .atcl__title {
    margin: 0 0 60px;
    font-size: 2rem;
    font-weight: normal; }
    .atcl__title--cate {
      padding: 3px 10px;
      color: #FFF;
      font-size: 14px;
      font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
      line-height: 1.0;
      background-color: #003c6d; }
    .atcl__title--txt {
      width: 100%;
      margin: 20px 0 0;
      display: block; }
  .atcl__btn {
    margin: 40px 0 0;
    text-align: center;
    font-size: 1rem; }
    .atcl__btn a {
      color: #000 !important;
      display: inline-block;
      position: relative;
      transition: 0.1s linear; }
      .atcl__btn a::after {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: -5px;
        left: 0;
        background-color: #000;
        transform: scaleX(0);
        transform-origin: center right;
        transition: transform 0.2s ease; }
      .atcl__btn a span {
        padding: 0 15px 0 0;
        background-image: url("../img/common/ar04.svg");
        background-position: right center;
        background-repeat: no-repeat;
        background-size: 10px; }
      .atcl__btn a:hover {
        text-decoration: none;
        top: 1px; }
        .atcl__btn a:hover::after {
          transform-origin: center left;
          -moz-transform: scaleX(1);
          -webkit-transform: scaleX(1);
          transform: scaleX(1); }

@media (max-width: 1160px) {
  .atcl {
    padding: 70px 40px 100px; } }
@media (max-width: 1000px) {
  .atcl__title {
    text-align: center; } }
@media (max-width: 980px) {
  .atcl {
    margin: 100px 0 0; } }
@media (max-width: 700px) {
  .atcl {
    margin: 0; } }
@media (max-width: 600px) {
  .atcl {
    padding: 70px 20px 100px; }
    .atcl__title {
      font-size: 1.5rem; } }
.imageArea {
  margin: 0 0 50px;
  padding: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: flex-start; }
  .imageArea__main {
    width: 600px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: relative;
    background-color: #000; }
    .imageArea__main::before {
      content: '';
      display: block;
      padding-top: 100%; }
    .imageArea__main--anchor {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0; }
      .imageArea__main--anchor img.photo {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: 0.1s linear; }
      .imageArea__main--anchor img.zoom {
        padding: 7px;
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.2); }
      .imageArea__main--anchor:hover img.photo {
        -moz-transform: scale(1.05);
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: alpha(opacity=70); }
  .imageArea__sub {
    width: calc(100% - 600px);
    margin: 0; }
  .imageArea__list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start; }
  .imageArea__item {
    width: 130px;
    overflow: hidden;
    margin: 0 0 20px 20px;
    padding: 0;
    position: relative; }
    .imageArea__item::before {
      content: '';
      display: block;
      padding-top: 100%; }
    .imageArea__item--anchor {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: #000; }
      .imageArea__item--anchor img.photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.1s linear; }
      .imageArea__item--anchor img.zoom {
        padding: 4px;
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.2); }
      .imageArea__item--anchor:hover img.photo {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1); }

@media (max-width: 1000px) {
  .imageArea {
    flex-direction: column; }
    .imageArea__main {
      margin: 0 auto; }
    .imageArea__sub {
      width: 600px;
      margin: 0 auto; }
    .imageArea__item {
      width: 112px;
      margin: 10px 10px 0 0; }
      .imageArea__item:nth-of-type(5n) {
        margin: 10px 0 0; } }
@media (max-width: 700px) {
  .imageArea__main {
    width: 100%; }
  .imageArea__sub {
    width: 100%; }
  .imageArea__item {
    width: calc((100% - 40px)/5); } }
@media (max-width: 500px) {
  .imageArea__item {
    width: calc((100% - 30px)/4); }
    .imageArea__item:nth-of-type(5n) {
      margin: 10px 10px 0 0; }
    .imageArea__item:nth-of-type(4n) {
      margin: 10px 0 0; } }