「お客様事情」本番から反映

achievement-official.conohawing.com/common_previous/css/case.css

@@ -5,9 +5,6 @@
 case.css
 
 ======================================== */
-.p-case .c-mainvisual,
-.p-case-detail .c-mainvisual {
-  background-image: url(/assets/img/case/mv.jpg); }
 .p-case-detail .c-mainvisual {
   margin-bottom: 68px; }
   @media screen and (max-width: 767px) {
@@ -102,7 +99,126 @@ case.css
 /*
 
 ------------------------------------------------------------*/
+.p-case .c-search{
+  margin-bottom: 60px;
+}
+@media screen and (max-width: 767px) {
+  .p-case .c-search{
+    margin-bottom: 30px;
+  }
+}
+.p-case .c-search__box1{
+  display: flex;
+  justify-content: center;
+  border-bottom: 2px solid #001c35;
+}
+.p-case  .c-search__tab{
+  width: 49.5%;
+  text-align: center;
+  font-size: 1.8rem;
+  background: #fff;
+  color: #333333;
+  padding: 14px;
+  font-weight: bold;
+  cursor: pointer;
+  border: 1px solid #ececec;
+  border-bottom: none;
+}
+@media screen and (max-width: 767px) {
+  .p-case  .c-search__tab{
+    width: 49%;
+    font-size: 1.5rem;
+    padding: 10px;
+  }
+}
+.p-case  .c-search__tab.active{
+  background: #001c35;
+  border: 1px solid #001c35;
+  color: #fff;
+}
+.p-case  .c-search__tab:first-child{
+  margin-right: 1%;
+}
+@media screen and (max-width: 767px) {
+  .p-case  .c-search__tab:first-child{
+    margin-right: 2%;
+  }
+}
+.p-case  .c-search__list{
+  border:1px solid #ececec;
+  padding: 30px;
+  display: none;
+  background: #fff;
+}
+@media screen and (max-width: 767px) {
+  .p-case  .c-search__list{
+    padding: 15px;
+  }
+}
+.p-case  .c-search__list.active{
+  display: flex;
+  flex-wrap: wrap;
+}
+@media screen and (max-width: 767px) {
+  .p-case  .c-search__list.active{
+    display: block;
+  }
+}
+.p-case  .c-search__item{
+  font-size: 1.2rem;
+  color:#333;
+  padding: 10px 14px;
+  border:1px solid #ececec;
+  margin-right: 15px;
+  cursor: pointer;
+  background: #fff;
+  border-radius: 5px;
+  font-weight: bold;
+  margin-top: 5px;
   
+}
+@media screen and (max-width: 767px) {
+    .p-case  .c-search__item{
+      width: 100%;
+      padding: 8px 10px;
+    }
+    .p-case  .c-search__item:not(:last-child){
+        margin-bottom: 5px;
+    }
+}
+.p-case  .c-search__item.active{
+    background: #003b70;
+    color:#fff;
+    position: relative;
+}
+@media screen and (max-width: 767px) {
+  .p-case  .c-search__item.active:before{
+      content: "";
+      width:15px;
+      height: 2px;
+      background: #fff;
+      position:absolute;
+      right:10px;
+      top:50%;
+      transform: translateY(-50%) rotate(45deg);
+  }
+  .p-case  .c-search__item.active:after{
+    content: "";
+    width:15px;
+    height: 2px;
+    background: #fff;
+    position:absolute;
+    right:10px;
+    top:50%;
+    transform: translateY(-50%) rotate(-45deg);
+  }
+}
+.p-case .c-case__box{
+  display: none;
+}
+.p-case .c-case__box:first-child{
+  display: block;
+}
 .p-case-detail1 .c-title1 {
   margin-bottom: 30px; }
 
@@ -157,6 +273,11 @@ case.css
     @media screen and (max-width: 767px) {
       .p-case-detail1 .c-imgtext__text {
         font-size: 1.6rem; } }
+  .p-case-detail1 .c-imgtext__text + p {
+    font-size: 1.8rem; }
+    @media screen and (max-width: 767px) {
+      .p-case-detail1 .c-imgtext__text + p {
+        font-size: 1.6rem; } }
 
 .p-case-detail1 .c-info {
   margin-bottom: 33px; }
@@ -275,24 +396,39 @@ case.css
   @media screen and (max-width: 767px) {
     .p-case-detail2 {
       padding: 40px 0 0; } }
-  .p-case-detail2 .c-box {
+  .p-case-detail .c-box {
     margin: 36px 0 0; }
-    .p-case-detail2 .c-box img {
+    .p-case-detail .c-box img {
       width: auto; }
-    .p-case-detail2 .c-box p {
+      @media screen and (max-width: 767px) {
+        .p-case-detail .c-box img {
+          width: 100%; }
+      }
+    .p-case-detail .c-box p {
       margin: 7px 0 0;
       font-size: 1.2rem;
       color: #363636;
       line-height: 1.4; }
-    .p-case-detail2 .c-box__list {
+    .p-case-detail .c-box__list {
       display: flex;
       justify-content: flex-start;
+      flex-wrap: wrap;
       margin-bottom: 27px; }
-      .p-case-detail2 .c-box__list li {
+      .p-case-detail .c-box__list li {
         display: inline-block;
+        margin: 0 16px 10px 0; 
         max-width: 188px;
-        margin: 0 16px 10px 0; }
-
+      }
+      @media screen and (max-width: 767px) {
+        .p-case-detail .c-box__list li {
+          margin: 0 2% 10px 0; 
+          width: 49%;
+          max-width: inherit;
+        }
+      .p-case-detail .c-box__list li:nth-child(2n){
+        margin-right: 0;
+      }
+      }
 /*
 
 ------------------------------------------------------------*/