@charset "utf-8";

/* CSS Document */
.casestudypage .contentheader{background-image: url(../images/casestudy-bg-01.jpg);}

/* index */

.casestudylist{
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: rgba(246,247,249,1);
  }
  .casestudypage .secintro{margin-bottom: 100px;}
  .casestudylist .cardlist-fig{border-bottom: 1px solid rgba(200,200,200,1);}

/* detail */
.casestudyintro{margin-bottom: 100px;}
  .casestudyintro-ttl{margin-bottom: 40px;}
    .casestudyintro-ttl-txt{
      font-size: 30px;
      font-weight: 500;
      text-align: center;
      letter-spacing: 0.05em;
      }
  .casestudyintro-detail{
    /* max-width: 800px; */
    margin: 0 auto;
    padding: 40px;
    border: 2px solid rgba(51,51,51,1);
    border-radius: 5px;
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.2);
    /* border: 1px solid rgba(200,200,200,1); */
    /* box-shadow: 0px 25px 35px 0px rgba(0,0,0,0.2), 0px 30px 25px 0px rgba(0,0,0,0.1); */
    /* box-shadow: 0px 0px 10px -6px rgba(0,0,0,0.6); */
    }
    .casestudyintro-detail-item{}
    .casestudyintro-detail-item:not(:last-of-type){margin-bottom: 50px;}
      .casestudyintro-detail-ttl{
        margin-bottom: 30px;
        position: relative;
        }
        .casestudyintro-detail-ttl::before,
        .casestudyintro-detail-ttl::after{
          content: "";
          width: 60px;
          height: 3px;
          background-color:rgba(255,216,19,1);
          position: absolute;
          bottom: -13px;
          left: 50%;
          transform: translateX(-50%);
          }
        .casestudyintro-detail-ttl-txt{
          font-size: 20px;
          font-weight: 500;
          text-align: center;
          }
      .casestudyintro-summary{}
        .casestudyintro-summary-txt{
          text-align: center;
          font-weight: 500;
          }

.suggestion{
  padding-top: 170px;
  padding-bottom: 100px;
  background-color: rgba(246,247,249,1);
  position: relative;
  } 
  .suggestion::before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 80px 150px 0 150px;
    border-color: rgba(255,255,255) transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    }
  .suggestion-ttl{margin-bottom: 50px;}
    .suggestion-ttl-txt{
      font-size: 30px;
      font-weight: 500;
      text-align: center;
      letter-spacing: 0.05em;
      position: relative;
      }
      .suggestion-ttl-txt::before{
        content: "リンクウィズからのご提案！";
        margin-bottom: 20px;
        padding-left: 2px;
        font-size: 20px;
        font-weight: 500;
        color: rgba(51,51,51,1);
        background: linear-gradient(transparent 60%, rgba(255,216,19,.7) 60%);
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        }
        .suggestion-ttl-emp{
          display: inline-block;
          font-weight: 500;
          position: relative;
          }
          .suggestion-ttl-emp::before{
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(235,220,33,1);
            position: absolute;
            top: -3px;
            left: 50%;
            transform: translateX(-50%);
            }

.suggestion-detail{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  }
  .suggestion-fig{
    width: calc(50% - 50px);
    margin-left: 50px;
    padding: 30px;
    border: 1px solid rgba(200,200,200,1);
    background-color: rgba(255,255,255,1);
    }
  .suggestion-summary{width: 50%;}
    .suggestion-summary-txt{
      line-height: 2;
      text-align: justify
      }

.comparison{
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
  } 
  .comparison::before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 80px 150px 0 150px;
    border-color: rgba(246,247,249,1) transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    }
    .comparison-main{
      display: flex;
      /* flex-wrap: wrap; */
      align-items: center;
      margin-bottom: 100px;
      }
      .comparison-item{
        border-radius: 5px;
        border: 2px solid rgba(51,51,51,1);
        box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.2);
        position: relative;
        }
        .before.comparison-item{
          width: 42%;
          margin-right: 100px;
          padding: 25px;
          }
        .after.comparison-item{
          width: 58%;
          padding: 30px;
          background-color: rgba(255,216,19,.7);
          }
        .comparison-item-ttl{margin-bottom: 20px;}
          .comparison-item-ttl-txt{font-weight: 500;}
          .before .comparison-item-ttl-txt{font-size: 18px;}
          .after .comparison-item-ttl-txt{font-size: 22px;}
        .comparison-list{
          margin-left: 20px;
          list-style: disc;
          }
          .comparison-list-item{margin-bottom: 10px;}
          .before .comparison-list-item-txt{font-size: 14px;}
          .after .comparison-list-item-txt{
            font-size: 16px;
            font-weight: 500;
            }
        .comparison-arrow{
          width: 80px;
          fill: rgba(100,100,100,1);
          position: absolute;
          top: 50%;
          right: -90px;
          transform: translateY(-50%);
          }

.csproduct{
  margin-bottom: 100px;
  padding: 30px;
  border-radius: 5px;
  background-color: rgba(240,240,240,1);
  }
  .csproduct-ttl{margin-bottom: 30px;}
    .csproduct-ttl-txt{
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      }
  .csproduct-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }
    .csproduct-item{width: calc((100% - 30px) / 3);}
      .csproduct-item:not(:last-of-type){margin-right: 15px;}
      .csproduct-link{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 45px;
        padding-left: 20px;
        padding-right: 20px;
        border: 1px solid rgba(50,50,50,1);
        background-color: rgba(255,255,255,1);
        }
        .csproduct-link-txt{
          font-size: 14px;
          font-weight: 500;
          position: relative;
          transition: .3s;
          }
          .csproduct-link:hover .csproduct-link-txt{opacity: .7;}
          .csproduct-link-txt::before{
            content: "";  
            width: 30px;
            height: 1px;
            background-color: rgba(183,0,49,1);
            position: absolute;
            top: 50%;
            right: -45px;
            transform: translateY(-50%);
            transition: .3s;
            }
            .csproduct-link:hover .csproduct-link-txt::before{
              width: 35px;
              right: -50px;
              }
          .csproduct-link-txt::after{
            content: "";  
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 3px 0 3px 6px;
            border-color: transparent transparent transparent rgba(183,0,49,1);
            position: absolute;
            top: 50%;
            right: -45px;
            transform: translateY(-50%);
            transition: .3s;
            }
            .csproduct-link:hover .csproduct-link-txt::after{right: -55px;}

.casestudyback{
  max-width: 300px;
  margin: 0 auto;
  }

@media screen and (max-width: 1199px) { }/* max-width: 1199px */

@media screen and (max-width: 991px) {

/* index */
.casestudylist{
  padding-top: 80px;
  padding-bottom: 100px;
  }
  .casestudypage .secintro{margin-bottom: 80px;}

/* detail */
.casestudyintro{margin-bottom: 80px;}
  .casestudyintro-ttl{margin-bottom: 30px;}
    .casestudyintro-ttl-txt{font-size: 26px;}
  .casestudyintro-detail{padding: 30px;}
  .casestudyintro-detail-item:not(:last-of-type){margin-bottom: 40px;}

.suggestion{
  padding-top: 120px;
  padding-bottom: 80px;
  } 
  .suggestion::before{border-width: 40px 120px 0 120px;}
  .suggestion-ttl{margin-bottom: 40px;}
    .suggestion-ttl-txt{font-size: 26px;}
      .suggestion-ttl-txt::before{
        margin-bottom: 15px;
        font-size: 18px;
        }
        .suggestion-ttl-emp::before{
          width: 6px;
          height: 6px;
          }
  .suggestion-detail{align-items: flex-start;}
    .suggestion-fig{
      width: calc(50% - 40px);
      margin-left: 40px;
      padding: 20px;
      }
    .suggestion-summary{width: 50%;}
      .suggestion-summary-txt{line-height: 1.8;}

.comparison{
  padding-top: 80px;
  padding-bottom: 80px;
  } 
  .comparison::before{border-width: 40px 120px 0 120px;}
  .comparison-main{margin-bottom: 80px;}
    .before.comparison-item{
      margin-right: 80px;
      padding: 20px;
      }
    .after.comparison-item{padding: 20px;}
    .comparison-item-ttl{margin-bottom: 10px;}
      .before .comparison-item-ttl-txt{font-size: 16px;}
      .after .comparison-item-ttl-txt{font-size: 18px;}
    .comparison-list{
      margin-left: 20px;
      list-style: disc;
      }
      .after .comparison-list-item-txt{
        font-size: 16px;
        font-weight: 500;
        }
    .comparison-arrow{
      width: 60px;
      right: -70px;
      }

}/* max-width: 991px */

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

/* index */
.casestudylist{
  padding-top: 50px;
  padding-bottom: 100px;
  }
  .casestudypage .secintro{margin-bottom: 50px;}

/* detail */
.casestudyintro{margin-bottom: 50px;}
  .casestudyintro-ttl{margin-bottom: 30px;}
    .casestudyintro-ttl-txt{font-size: 22px;}
  .casestudyintro-detail{padding: 25px;}
    .casestudyintro-detail-ttl-txt{font-size: 18px;}

    .suggestion{
      padding-top: 80px;
      padding-bottom: 50px;
      } 
      .suggestion::before{border-width: 40px 100px 0 100px;}
      .suggestion-ttl{margin-bottom: 30px;}
        .suggestion-ttl-txt{font-size: 22px;}
          .suggestion-ttl-txt::before{
            margin-bottom: 10px;
            font-size: 16px;
            top: -45px;
            }
            .suggestion-ttl-emp::before{
              width: 4px;
              height: 4px;
              top: -1px;
              }
        .suggestion-fig{
          width: calc(50% - 30px);
          margin-left: 30px;
          padding: 15px;
          }
        .suggestion-summary{width: 50%;}
          .suggestion-summary-txt{line-height: 1.8;}

.comparison{
  padding-top: 50px;
  padding-bottom: 80px;
  } 
  .suggestion::before{border-width: 40px 100px 0 100px;}
  .comparison-main{
    flex-wrap: wrap;
    margin-bottom: 50px;
    }
  .before.comparison-item{
    width: 80%;
    margin: 0 auto 80px;
    }
  .after.comparison-item{width: 100%;}
    .after.comparison-item{padding: 20px;}
    .comparison-item-ttl{margin-bottom: 10px;}
      .before .comparison-item-ttl-txt{font-size: 16px;}
      .after .comparison-item-ttl-txt{font-size: 18px;}
      .after .comparison-list-item-txt{font-size: 15px;}
    .comparison-arrow{
      width: 60px;
      top: auto;
      right: auto;
      left: 50%;
      bottom: -65px;
      transform: translate(-50% ,0) rotate(90deg);
      }
    .csproduct-item{width: calc((100% - 15px) / 2);}
    .csproduct-item:not(:last-of-type){margin-right: 0;}
    .csproduct-item:not(:nth-of-type(2n+2)){margin-right: 15px;}

    .csproduct{margin-bottom: 50px;}

    .csproduct-ttl{margin-bottom: 20px;}
      .csproduct-ttl-txt{font-size: 16px;}
      .csproduct{padding: 20px;}

.casestudyback{max-width: 250px;}

          
}/* max-width: 767px */

@media not screen and (max-width: 576px) {

.suggestion-ttl-txt br{display: none;}

}

@media screen and (max-width: 575px) {

/* detail */
.casestudyintro-ttl{margin-bottom: 20px;}
.suggestion-ttl{margin-bottom: 20px;}
.suggestion-ttl-txt::before{
  width: 200px;
  font-size: 14px;
  top: -35px;
  }
  .casestudyintro-ttl-txt{font-size: 18px;}
.casestudyintro-detail{padding: 25px;}
  .casestudyintro-summary-txt{text-align: left;}
  .casestudyintro-summary-txt br{display: none;}
  .suggestion-ttl-txt{font-size: 18px;}
  .suggestion-fig{
    width: 100%;
    margin-left: 0;
    padding: 15px;
    }
  .suggestion-summary{
    width: 100%;
    margin-bottom: 20px;
    }

.suggestion-ttl-txt{line-height: 2;}
  .suggestion-ttl-emp::before{top: 5px;}

  .csproduct-item{width: 100%;}
  .csproduct-item:not(:last-of-type){
    margin-right: 0;
    margin-bottom: 15px;
    }
  .csproduct-item:not(:nth-of-type(2n+2)){margin-right: 0;}

}/* max-width: 575px */