@charset "utf-8";

/* Layout
-------------------------------------------------- */
/* ページタイトル */
.lower .page-title h2.case{
  background:#00007D;
  background:linear-gradient(90deg,
    rgba(0, 0, 125, 1) 0%,
    rgba(0, 0, 125, 1) 30%,
    rgba(0, 0, 125, 0) 30%,
    rgba(0, 0, 125, 0) 100%),
    url(../../img/bg_h2_case.jpg) no-repeat center center/cover;
}


@media(max-width:767px){
  #case .elementor-posts .elementor-post {
    flex-direction: column-reverse;
  }
  #case .elementor-posts .elementor-post a.elementor-post__thumbnail__link{
    margin-left: 0;
  }
  #case .elementor-posts div.elementor-post__text{
    margin-top: 10px;
  }
  .case-study-detail-main-img img{
		max-height:480px;
	}
}

/* フィルター */
#case .filter{
  display:flex;
  flex-wrap:wrap;
  border-top:2px solid #b3b7d1;
  border-left:2px solid #b3b7d1;
  margin:0 20px 50px;
}
#case .filter li{
  width:33.33%;
  box-sizing:border-box;
  text-align:center;
  border-right:2px solid #b3b7d1;
  border-bottom:2px solid #b3b7d1;
}
#case .filter a{
  display:block;
  padding:10px 0;
  text-decoration:none;
  color:#b3b7d1;
  font-weight:700;
}
#case .filter a.active{
  color:#fff;
  background:#00007D;
}

/* リスト */
#case .case-list{
  margin:100px 0;
  padding:0 20px;
}
#case .case-list .case-sec{
  box-sizing:border-box;
  border:3px solid #e8e9f1;
  padding:20px 20px 30px 20px;
  box-shadow:10px 10px 0 #d2d4e3;
  margin-bottom:30px;
}
#case .case-list .case-sec h4{
  font-size:1.8rem;
  font-weight:700;
  margin-bottom:20px;
}
#case .case-list .case-flex .thumb{
  text-align:center;
}
#case .case-list .case-flex p{
  line-height:150%;
}
#case .case-list .case-flex p.text{
  margin-top:20px;
}
#case .case-list .case-flex p.capacity{
  margin-top:20px;
  border-top:1px solid #d2d4e3;
  padding-top:20px;
}
#case .case-list .case-sec .btn{
  text-align:center;
  margin-top:30px;
}
#case .case-list .case-sec .btn a{
  display:inline-block;
  background:#00007d;
  color:#fff;
  text-decoration:none;
  padding:10px 40px;
  position:relative;
}
#case .case-list .case-sec .btn a::before,
#case .case-list .case-sec .btn a::after{
  content:"";
  position:absolute;
  top:calc(50%);
  right:15px;
  width:7px;
  height:2px;
  border-radius:9999px;
  transform-origin:100% 50%;
  background-color:#fff;
}
#case .case-list .case-sec .btn a::before{
  transform:rotate(45deg);
}
#case .case-list .case-sec .btn a::after{
  transform:rotate(-45deg);
}

/* ページャー */
#case .pager{
  margin-bottom:100px;
}
#case .pager .wp-pagenavi{
  text-align:center;
}
.wp-pagenavi a,
.wp-pagenavi span {
  color:#BFBFBF;
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
  background:#00007d;
  color:#fff;
}

/* 詳細ページ */
#study{
  padding:0 20px;
}
#study h3{
  font-size:3.6rem;
  line-height:150%;
  margin-bottom:50px;
}
#study .mv{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
}
#study .mv iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#study .section{
  margin-top:50px;
}
#study .section h4{
  font-size:1.8rem;
  border-left:5px solid #00007d;
  line-height:150%;
  padding:1px 0 2px 10px;
  margin-bottom:10px;
}
#study .section p{
  line-height:150%;
}
#study .point{
  margin:50px 0 70px 0;
  background:#d2d4e3;
  padding:20px;
}
#study .point h4{
  font-size:1.8rem;
  color:#00007d;
  font-weight:900;
  margin-bottom:10px;
}
#study .point p{
  line-height:150%;
}
#study .btn-back{
  text-align:center;
  margin:50px 0 100px 0;
}
#study .btn-back a{
  display:inline-block;
  background:#00007d;
  color:#fff;
  border: 1px solid #00007D;
  text-decoration:none;
  padding:20px 60px;
  transition: 0.3s;
}
#study .btn-back a:hover{
  background: #fff;
  color: #00007D;
}



/* タブレット
-------------------------------------------------- */
@media only screen and (min-width: 667px) {

  /* フィルター */
  #case .filter{
    max-width:500px;
    margin:0 auto 50px;
  }

  /* リスト */
  #case .case-list .case-flex{
    display:flex;
    flex-direction:row-reverse;
    gap:20px;
  }
  #case .case-list .case-flex .thumb{
    width:50%;
    max-width:355px;
  }
  #case .case-list .case-flex .case-box{
    width:50%;
  }
}

@media only screen and (min-width: 830px) {

  /* リスト */
  #case .case-list .case-flex .case-box{
    width:calc(100% - 355px);
  }
}



/* PC
-------------------------------------------------- */
@media only screen and (min-width: 1024px) {

  /* リスト */
  #case .case-list .case-sec{
    padding:40px 40px 50px 40px;
    box-shadow:20px 20px 0 #d2d4e3;
    max-width:1000px;
    margin:70px auto 0 auto;
  }
  #case .case-list .case-sec h4{
    font-size:3rem;
  }

  /* 詳細ページ */
  #study{
    padding:0 50px;
    max-width:1000px;
    margin:0 auto;
  }
  #study h3{
    font-size:5rem;
    text-align:center;
  }
  #study .section{
    margin-top:70px;
  }
  #study .section h4{
    font-size:3rem;
  }
  #study .section p{
    line-height:150%;
  }
  #study .point{
    margin:70px 0 100px 0;
    padding:50px;
  }
  #study .point h4{
    font-size:3rem;
  }
}