@charset "UTF-8";

#case {
   max-width: 1920px;
   margin-inline: auto;
   width: 100%;
}

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),
print {

   /* case -------------------------------------*/
   .main-ttl-box {
      background: url(../images/case/main-ttl-bg.jpg) no-repeat center;
      background-size: cover;
      height: calc(772 / 1920 * 100vw);
  }
   #case main {
      /* width: min(95%, 1200px); */
      /* margin: 0 auto; */
      width: 100%;
   }
   #case .system-contents {
      width: 100%;
   }

   #case .system-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 60px 10px;
      margin-top: 45px;
      width: min(95%, 1200px);
      margin-inline: auto;
   }

   #case .system-list .system-pic {
      height: 200px;
      margin: 0 0 17px;
      overflow: hidden;
   }

   #case .system-list .system-pic img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.5s ease-in-out;
   }

   #case .system-list li:hover img {
      transform: scale(1.1);
   }

   #case .system-list .system-area {
      color: #666666;
      font-size: 14px;
      line-height: 2;
      letter-spacing: 0.05em;
      margin: 0 0 5px;
   }

   #case .system-list .system-ttl-01 {
      font-size: 16px;
      line-height: 1.75;
      letter-spacing: 0.05em;
   }


   #case .system-date {
      font-size: 14px;
      margin-bottom: 10px;
      line-height: 1.4;
   }

   #case .system-date::before {}

   #case .system-coment {
      font-size: 14px;
      margin-bottom: 5px;
      line-height: 1.4;
   }

   #case .system-ttl-01 {
      font-size: 16px;
      margin-bottom: 10px;
      line-height: 1.4;
   }

   #case .system-category-set {
      margin-bottom: 15px;
      margin-top: -15px;
   }

   #case .serchcategory {
      margin-bottom: 100px;
   }

   #case .serchcategory .icon {
      display: inline-block;
      margin-bottom: 15px;
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      text-align: center;
      padding: 10px 20px;
   }

   #case .system-category1 {
      margin-bottom: 1px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      text-align: center;
      padding: 10px 20px;
      background-color: #ccc;
      position: relative;
   }

   #case .system-contents {
      /* background: #fff; */
      /* padding: 40px; */
      /* margin-bottom: 30px; */
      /* border: solid #ccc 1px; */
   }

   #case .system-contents .system-category-set {
      margin-top: 0px;
      margin-bottom: 0;
   }

   #case .system-contents-inner {
      background: #fff;
      padding: 40px 20px;
   }

   #case .system-contents .system-date {
      font-size: 16px;
      margin-bottom: 15px;
      display: block;
   }

   #case .system-contents .system-ttl {
      font-size: 25px;
      font-weight: bold;
      margin-bottom: 30px;
      padding-bottom: 25px;
      border-bottom: 1px #ccc solid;
      line-height: 1.4;
      letter-spacing: 0.9px;
   }

   #case .system-contents .system-i-pic {
      text-align: center;
      margin-bottom: 50px;
   }

   #case .system-contents .system-i-pic img {
      max-width: 100%;
      width: auto;
      height: auto;
   }

   #case .system-gallery {
      background: #eeefef;
      padding: 30px 20px;
   }

   #case .system-gallery h2 {
      text-transform: uppercase;
   }

   /* 詳細ページ */
   main section.main {
      margin: 24px 0 0;
      width: 100%;
      padding: 0;
   }

   main section.main .image-box {
      width: 100%;
   }

   main section.main .image-box .image {
      width: 100%;
   }

   main section.main .image-box .image img {
      width: 100%;
      height: auto;
   }

   main section.main .image-box .caption {
      width: 100%;
      font-size: 10px;
      text-align: right;
      margin: 14px 0 0;
      padding-right: 20px;
      box-sizing: border-box;
      letter-spacing: 0.1em;
   }

   main section.main .image-box .caption b {
      display: inline-block;
      margin-right: 4px;
      font-weight: bold;
   }

   main section.main .text-box {
      padding: 68px 0 0px;
      /* display: -webkit-flex; */
      display: -ms-flexbox;
      /* display: flex; */
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%;
      display: grid;
      grid-template-columns: 82% 18.2%;
      width: min(95%, 916px);
      margin-inline: auto;
   }

   main section.main .text-box h2 {
      font-weight: bold;
      font-size: clamp(2.188rem, 2.146rem + 0.09vw, 2.25rem);
      -webkit-order: 2;
      -ms-flex-order: 2;
      order: 2;
      margin-left: 44px;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      text-orientation: upright;
      text-align: left;
      letter-spacing: 0.1em;
      line-height: 1.7;
   }

   main section.main .text-box p {
      font-size: 12px;
      -webkit-order: 1;
      -ms-flex-order: 1;
      order: 1;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      text-orientation: upright;
      text-align: left;
      height: 300px;
      line-height: 2.5;
      letter-spacing: 0.06em;
   }

   main section.main .text-box.case-access {
      padding: 0;
   }
   main section.main .text-box .case-access {
      font-size: 12px;
      -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
      writing-mode: horizontal-tb;
      text-orientation: mixed;
      text-align: left;
      height: auto;
   }

   main .works-image {
      position: relative;
   }

   main .works-image.yoko-l {
      max-width: 1240px;
      width: 90%;
      margin: 168px auto 0;
   }

   main .works-image.yoko-m-l {
      width: 750px;
      margin: 168px auto 0 10%;
   }

   main .works-image.yoko-m-r {
      width: 750px;
      margin: 168px 10% 0 auto;
   }

   main .works-image.set-tate-yoko-l {
      width: 90%;
      max-width: 1240px;
      margin: 168px auto 0;
   }

   main .works-image.set-tate-yoko-l .image-tate {
      position: relative;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
   }

   main .works-image.set-tate-yoko-l .image-tate .image {
      width: 51%;
      margin: 0 auto 0 0;
   }

   main .works-image.set-tate-yoko-l .image-tate .text {
      position: relative;
      width: 49%;
      text-align: center;
   }

   main .works-image.set-tate-yoko-l .image-tate .text p {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      text-orientation: upright;
      text-align: left;
      font-size: 22px;
      line-height: 2.5;
      letter-spacing: 0.1em;
   }

   main .works-image.set-tate-yoko-l .image-yoko {
      width: 38%;
      margin: -120px 4% 0 auto;
   }

   main .works-image.set-tate-yoko-r {
      width: 90%;
      max-width: 1240px;
      margin: 168px auto 0;
   }

   main .works-image.set-tate-yoko-r .image-tate {
      position: relative;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
   }

   main .works-image.set-tate-yoko-r .image-tate .image {
      width: 51%;
      margin: 0 auto 0 0;
   }

   main .works-image.set-tate-yoko-r .image-tate .text {
      position: relative;
      width: 49%;
      text-align: center;
   }

   main .works-image.set-tate-yoko-r .image-tate .text p {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      text-orientation: upright;
      text-align: left;
      font-size: 22px;
      line-height: 2.5;
      letter-spacing: 0.1em;
   }

   main .works-image.set-tate-yoko-r .image-yoko {
      width: 38%;
      margin: -120px auto 0 4%;
   }

   main .works-image img {
      width: 100%;
      height: auto;
   }

   main .works-image.yoko-wide {
      width: 100%;
      margin: 168px auto 0;
   }

   main .works-movie {
      position: relative;
      margin: 168px auto 0;
      width: 100%;
      cursor: pointer;
   }

   main .works-movie .bg-box {
      background: #000;
      width: 100%;
      overflow: hidden;
   }

   main .works-movie .bg-box img {
      width: 100%;
      height: auto;
      opacity: 0.8;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      transition: 0.2s all ease;
   }

   main .works-movie p.btn {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
   }

   main .works-copy {
      position: relative;
      width: 100%;
      height: 520px;
      margin: 168px auto 0;
      text-align: center;
   }

   main .works-copy .text {
      display: inline-block;
      height: 100%;
   }

   main .works-copy .text p {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      text-orientation: upright;
      text-align: left;
      font-size: 22px;
      line-height: 2.5;
      letter-spacing: 0.1em;
   }

   main .googlemaps {
      width: 1048px;
      margin: 150px auto 0;
   }

   main .googlemaps .map-container {
      width: 1048px;
      height: 600px;
      margin: 0 auto;
   }

   main .googlemaps .map-container iframe {
      width: 100%;
      height: 100%;
   }

   main .googlemaps .map-container:first-child {
      margin-top: 0px;
   }

   main .googlemaps p.caption {
      font-size: 10px;
      margin: 16px 0 0;
   }

   main .googlemaps p.caption span {
      font-weight: bold;
   }

   main .btn-showhome {
      position: relative;
      width: 380px;
      height: 60px;
      line-height: 59px;
      border-radius: 3px;
      border: #e3e7ea 1px solid;
      box-sizing: border-box;
      text-align: center;
      margin: 90px auto 0;
      letter-spacing: 0.1em;
   }

   main section.works-box {
      margin: 140px auto 0;
   }

   main section.works-box .text-box {
      text-align: center;
      display: block;
   }

   main section.works-box .text-box h2 {
      width: auto;
      font-size: 34px;
      font-weight: bold;
      letter-spacing: 0.12em;
   }

   main section.works-box .works-box {
      margin: 54px auto 0;
   }


   #case .pagen {
      width: min(95%, 1100px);
      margin: 0 auto;
   }
}

@media screen and (min-width:768px) and (max-width:1000px) {
   main section.main .text-box {
      display: grid;
      grid-template-columns: 88% 11.2%;
      width: min(95%, 916px);
      margin-inline: auto;
      justify-content: space-between;
   }
   main section.main .text-box h3 {
      margin-left: 2.4vw;
   }
   main section.main .text-box p {
      font-size: 11px;
   }
}

/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {

   /* case  -------------------------------------*/
   .main-ttl-box {
      background: url(../images/case/main-ttl-bg_sp.jpg) no-repeat center;
      background-size: cover;
      height: 66.43vw;
  }

   #case .system-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9.4vw 2.5vw;
      margin-top: 7vw;
      width: min(95%, 94.3vw);
      margin-inline: auto;
   }

   #case .system-list .system-pic {
      height: 32.1vw;
      margin: 0 0 1vw;
      overflow: hidden;
   }

   #case .system-list .system-pic img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.5s ease-in-out;
   }

   #case .system-list li:hover img {
      transform: scale(1.1);
   }

   #case .system-list .system-area {
      color: #666666;
      font-size: 2.898vw;
      line-height: 2.3333;
      letter-spacing: 0.05em;
      margin: 0 0 0;
   }

   #case .system-list .system-ttl-01 {
      font-size: 3.623vw;
      line-height: 1.866666;
      letter-spacing: 0.05em;
   }

   #case .system-date {
      font-size: 3.2vw;
      margin-bottom: 5vw;
   }

   #case .system-date::before {
      content: "■";
   }

   #case .system-ttl-01 {
      font-size: 3.6vw;
      margin-bottom: 1vw;
      line-height: 1.6;
   }

   #case .system-category-set {
      margin-bottom: 8vw;
      margin-top: -8vw;
   }

   #case .serchcategory {
      margin: 0 3vw 10vw;
   }

   #case .serchcategory .icon {
      display: inline-block;
      margin-right: 1vw;
      margin-bottom: 3vw;
      font-size: 3.2vw;
      color: #fff;
      text-align: center;
      padding: 4.5vw 3vw;
   }

   #case .system-category1 {
      margin-bottom: 10vw;
      font-size: 3.6vw;
      font-weight: bold;
      color: #fff;
      text-align: center;
      padding: 1vw 3vw;
      background-color: #ccc;
      position: relative;
   }

   #case .system-coment {
      margin-bottom: 5vw;
   }

   #case .system-contents .system-category-set {
      margin-top: 0;
   }

   #case .system-contents {
      background: #fff;
      padding: 3vw;
      margin-bottom: 10vw;
   }

   #case .system-contents-inner {
      background: #fff;
      padding: 5vw 3vw;
   }

   #case .system-contents .system-date {
      font-size: 3.2vw;
      margin-bottom: 5vw;
      display: block;
      line-height: 1.4;
   }

   #case .system-contents .system-category {
      margin-bottom: 0.1vw;
      font-size: 3.2vw;
      color: #fff;
      text-align: center;
      padding: 4vw 3vw;
      width: 100%;
   }

   #case .system-contents .system-category-set {
      margin-bottom: 5vw;
      margin-top: 0;
   }

   #case .system-contents .system-ttl {
      font-size: 4.2vw;
      font-weight: bold;
      margin-bottom: 4.5vw;
      padding-bottom: 1vw;
      border-bottom: 1px #ccc solid;
      line-height: 1.6;
   }

   #case .system-contents .system-i-pic {
      text-align: center;
      margin-bottom: 8vw;
   }

   #case .system-contents .system-i-pic img {
      width: 100%;
      height: auto;
   }

   /* 詳細ページ */

   main section.main .image-box .caption {
      text-align: center;
      padding-right: 0px;
      margin: 16px 0 0;
      line-height: 1.9;
      font-size: 2.898vw;
   }

   main section.main .text-box {
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 5px 0 20px;
   }

   main section.main .text-box h2 {
      -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
      writing-mode: horizontal-tb;
      margin: 22px auto 0;
      text-align: center;
      -webkit-order: 1;
      -ms-flex-order: 1;
      order: 1;
      font-size: 5.072vw;
      font-weight: bold;
   }

   main section.main .text-box p {
      -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
      writing-mode: horizontal-tb;
      margin: 20px auto 0;
      text-align: justify;
      -webkit-order: 2;
      -ms-flex-order: 2;
      order: 2;
      padding: 0 22px;
      box-sizing: border-box;
      height: auto;
      font-size: 2.898vw;
   }

   main .works-image.yoko-l {
      width: 100%;
      margin: 26px auto 0;
      padding: 0 22px;
      box-sizing: border-box;
   }

   main .works-image.yoko-m-l {
      width: 100%;
      margin: 26px auto 0;
      padding: 0 22px;
      box-sizing: border-box;
   }

   main .works-image.yoko-m-r {
      width: 100%;
      margin: 26px auto 0;
      padding: 0 22px;
      box-sizing: border-box;
   }

   main .works-image.set-tate-yoko-l {
      width: 100%;
      margin: 26px auto 0;
      padding: 0 22px;
      box-sizing: border-box;
   }

   main .works-image.set-tate-yoko-l .image-tate {
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
   }

   main .works-image.set-tate-yoko-l .image-tate .image {
      width: 100%;
   }

   main .works-image.set-tate-yoko-l .image-tate .text {
      width: 100%;
   }

   main .works-image.set-tate-yoko-l .image-tate .text p {
      position: relative;
      -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
      writing-mode: horizontal-tb;
      margin: 14px auto 0;
      text-align: center;
      -webkit-order: 2;
      -ms-flex-order: 2;
      order: 2;
      box-sizing: border-box;
      font-size: 12px;
      line-height: 1.9;
      padding-bottom: 28px;
   }

   main .works-image.set-tate-yoko-l .image-yoko {
      width: 100%;
      margin: 26px auto 0;
   }

   main .works-image.set-tate-yoko-r {
      width: 100%;
      margin: 26px auto 0;
      padding: 0 22px;
      box-sizing: border-box;
   }

   main .works-image.set-tate-yoko-r .image-tate {
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
   }

   main .works-image.set-tate-yoko-r .image-tate .image {
      width: 100%;
      -webkit-order: 1;
      -ms-flex-order: 1;
      order: 1;
   }

   main .works-image.set-tate-yoko-r .image-tate .text {
      width: 100%;
      -webkit-order: 2;
      -ms-flex-order: 2;
      order: 2;
   }

   main .works-image.set-tate-yoko-r .image-tate .text p {
      position: relative;
      -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
      writing-mode: horizontal-tb;
      margin: 14px auto 0;
      text-align: center;
      box-sizing: border-box;
      font-size: 12px;
      line-height: 1.9;
      padding-bottom: 28px;
   }

   main .works-image.set-tate-yoko-r .image-yoko {
      width: 100%;
      margin: 26px auto 0;
   }

   main .works-image.yoko-wide {
      width: 100%;
      margin: 26px auto 0;
   }

   main .works-movie {
      margin: 40px auto 0;
      height: auto;
   }

   main .works-movie p.btn img {
      width: 50px;
      height: 50px;
   }

   main .works-copy {
      margin: 0px auto 0;
      height: auto;
   }

   main .works-copy .text {
      display: block;
      height: auto;
   }

   main .works-copy .text p {
      top: 0px;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      position: relative;
      -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
      writing-mode: horizontal-tb;
      margin: 130px auto;
      text-align: center;
      font-size: 12px;
      line-height: 1.9;
   }

   main .googlemaps {
      width: 100%;
      margin: 40px auto 0;
   }

   main .googlemaps .map-container {
      width: 100%;
      height: 250px;
   }

   main .googlemaps p.caption {
      text-align: center;
   }

   main .btn-showhome {
      width: 88%;
      height: 48px;
      line-height: 45px;
      font-size: 12px;
      margin: 40px auto 0;
   }

   main section.works-box {
      margin: 40px auto 0;
   }

   main section.works-box .text-box h2 {
      font-size: 21px;
   }

   main section.works-box .works-box {
      margin: 26px auto 0;
   }

   #youtube .box {
      width: 100%;
      height: 240px;
      margin-left: -50%;
      margin-top: -120px;
   }

   #youtube .box .player {
      width: 100%;
      height: 100%;
   }

   #youtube .btn-close {
      width: 32px;
      height: 32px;
      top: 10px;
      right: 10px;
   }

   #loading .image {
      width: 44px;
   }

   #case .pagen {
      width: min(95%, 94.3vw);
      margin: 0 auto;
   }
}