/* TABLE OF CONTENTS:
 * 
 * 00 どのサイズでも共通で適用されるスタイル
 *    - ギャラリー
 *    - 施工データ
 *    - その他施工実績
 *    - cta
 * 01 幅 768 未満
 * 02 幅 480px 以上
 * 03 幅 768px 以上
 *    - cta
 * 04 幅 880px 以上
 * 05 幅 1072px 以上
 * 06 幅 1264px 以上
 */

/* --------------------------------------------------------------------------------------------------------
   00
 *
 * どのサイズでも共通で適用されるスタイル
 */

    /* ギャラリー */
    #main .swiper-container.gallery {
      padding: 0;
    }
    #main .swiper-container.gallery .swiper-slide img {
      width: 100%;
      aspect-ratio: 5 / 3;
      object-fit: contain;
      object-position: center;
    }
    #main .thumblist {
      display: grid;
      grid-gap: 0.5rem;
      grid-template-columns: repeat( auto-fill, minmax(70px, 1fr) );
    }
    #main .thumblist .thumblist-item:not(.current) {
      filter: grayscale( 100% );
    }
    #main .thumblist .thumblist-item img {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 0.25rem;
      object-fit: cover;
      object-position: center;
      cursor: pointer;
    }


    /* 施工データ */
    h2#data-head {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
    h2#data-head:after {
      content: "DATA";
      color: #999;
      border-bottom: 1px #999 solid;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      font-size: 12px;
      font-weight: normal;
      margin-left: 20px;
    }
    #data table {
      border: 1px #dddddd solid;
    }
    #data table th {
      background-color: #ebebf0;
      border: 1px #dddddd solid;
      font-weight: normal;
      padding: 0.5em;
    }
    #data table td {
      border: 1px #dddddd solid;
      padding: 0.5em;
      max-width: 500px;
    }

    h3#suggest-head {
      background-color: #002870;
      color: #FFF;
      padding: 0.5em;
    }
    h3#suggest-head:after {
      content: "SUGGEST";
      display: inline-block;
      font-size: 12px;
      margin-left: 20px;
      opacity: 0.8;
      vertical-align: middle;
    }

    h3#relation-head {
      text-align: center;
    }
    .example-post ul.col-1-2 li.more {
      list-style: none;
    }


    /* その他施工実績 */
    h2#works-head {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
    h2#works-head:after {
      content: "WORKS";
      color: #999;
      border-bottom: 1px #999 solid;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      font-size: 12px;
      font-weight: normal;
      margin-left: 20px;
    }
    .box.works ul li {
      border-bottom: 1px #CCC solid;
      list-style: none;
      padding: 20px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .box.works ul li .pict {
      padding-right: 20px;
      width: 170px;
    }
    .box.works ul li .pict + div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }
    .box.works ul li .title {
      padding-bottom: 10px;
    }
    .box.works ul li .status {
      font-size: 0.8em;
      margin-top: auto;
    }

    /* cta */
    .order-bnr {
      background-color: #313753;
      color: #FFF;
      margin-top: 0 !important;
      padding: 1rem 1rem 2rem;
    }
    .order-bnr p:first-child {
      font-weight: bold;
      text-align: center;
      margin-top: 0;
      margin-bottom: 1rem;
    }
    .order-bnr ul {
      border-bottom: 1px #FFF solid;
      padding-bottom: 1rem;
    }


/* --------------------------------------------------------------------------------------------------------
   01
 *
 * 幅 768px 未満
 */
@media (max-width: 767px) {

    /* ここにスタイル */

}/* End max 767px */



/* --------------------------------------------------------------------------------------------------------
   02
 *
 * 幅 480px 以上
 */
@media (min-width: 30em) {

    /* ここにスタイル */

}/* End min 480px */



/* --------------------------------------------------------------------------------------------------------
   03
 *
 * 幅 768px 以上
 */
@media (min-width: 48em) {

    /* cta */
    .order-bnr p:first-child {
      font-size: 1.25rem;
    }

}/* End min 768px */



/* --------------------------------------------------------------------------------------------------------
   04
 *
 * 幅 880px 以上
 */
@media (min-width: 55em) {

    /* ここにスタイル */

}/* End min 880px */



/* --------------------------------------------------------------------------------------------------------
   05
 *
 * 幅 1072px 以上
 */
@media (min-width: 67em) {

    /* ここにスタイル */

}/* End min 1072px */



/* --------------------------------------------------------------------------------------------------------
   06
 *
 * 幅 1264px 以上
 */
@media (min-width: 79em) {

    /* ここにスタイル */

}/* End min 1264px */