/* 共通 */

.cmn-inner,
.dtl-inner {
  width: 1100px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  main {
    padding: 96px 0 0;
  }
  .cmn-inner {
    width: 100%;
  }
  .dtl-inner {
    width: 90.66%;
  }
}


/*--------------------------
  kv
--------------------------*/

.uc-kv {
  position: relative;
  height: 372px;
  padding: 196px 0 0;
  margin: 0 0 120px;
}

.uc-kv-dtl {
  height: auto;
  padding: 196px 0 0;
  margin: 0 0 80px;
}

.uc-kv::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  background: #2980C4;
  z-index: -5;
}

.uc-kv-dtl::before {
  height: 55.8%;
}

.uc-kv-inner {
  position: relative;
  width: 1100px;
  margin: 0 auto;
}

.uc-kv-ttl {
  font-size: 50px;
  font-weight: 700;
  color: #FFF;
  line-height: 1.2;
  margin: 0 0 16px;
}

.uc-kv-catch {
  font-size: 16px;
  font-weight: 400;
  color: #FFF;
  line-height: 1.3;
}

.uc-kv-ttl-en {
  display: block;
  margin: 0 0 8px;
  color: #FFF;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}

.uc-kv-ttl-dtl {
  margin: 0 0 65px;
  color: #FFF;
  font-size: 36px;
  font-weight: 700;
}

.uc-kv-illust {
  position: absolute;
  top: -44px;
  right: 0;
  width: 285px;
  z-index: 5;
}

.uc-kv-data {
  padding: 45px 5% 59px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}

.uc-kv-data-ttl {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 700;
}

.uc-kv-data-txt {
  margin: 0 0 34px;
  font-size: 16px;
  line-height: 1.75;
}

.uc-kv-data .dtl-lead-card-02 {
  margin-top: 0;
}

.uc-kv-data .dtl-lead-card-body {
  width: 846px;
}

.uc-kv-data .dtl-lead-card-list-item {
  font-size: 20px;
  line-height: 1.5;
}

.uc-kv-data .dtl-lead-card-list-item + .dtl-lead-card-list-item {
  margin-top: 12px;
}

/*--------------------------
  index
--------------------------*/

.uc-index-sec {
  padding: 42px 0 0;
  background: rgba(239, 239, 239, .3);
}

.uc-index-sec + .uc-index-sec {
  margin-top: 80px;
}

.uc-index-sec + .pickup {
  margin-top: 120px;
}

.uc-index-ttl {
  margin: 0 auto 5px;
  text-align: center;
  font-size: 36px;
  font-weight: 700;
}

.uc-index-subttl {
  margin: 0 auto 27px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}

.uc-index-icon {
  margin: 0 auto;
  text-align: center;
}

.uc-index-list {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  padding: 32px 3.65%;
}

.uc-index-item {
  width: 31.76%;
  margin-left: 2.3%;
  border-radius: 6px;
  box-shadow: 0 0 30px rgb(0 0 0 / 10%);
}

.uc-index-item:nth-child(3n+1) {
  margin-left: 0;
}

.uc-index-item:nth-child(n+4) {
  margin-top: 32px;
}

.uc-index-item a {
  position: relative;
  display: block;
  height: 100%;
  padding: 25px 10% 30px;
  border-radius: 6px;
  text-decoration: none;
}

.uc-index-item a::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  background: #fff;
  content: "";
  border-radius: 10px;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
}

.case-slider-data-inner {
  margin: 0 0 30px;
}

.uc-index-item-ttl,
.uc-index-item-txt,
.case-slider-btn {
  position: relative;
  z-index: 2;
}

.uc-index-item-ttl {
  margin: 0 0 3px;
  color: #2980C4;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

.uc-index-item-txt {
  font-size: 16px;
  line-height: 1.75;
}

.uc-index-open {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 67px;
  border: none;
  border-top: 1px solid rgba(51, 51, 51, .1);
  background: none;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
}

.uc-index-open::after {
  content: "";
  display: block;
  width: 23px;
  height: 23px;
  margin: 0 0 0 10px;
  background: url(/sp/usize/assets/img/usecase/index-acdn-open.svg) left top / cover no-repeat;
}

/*--------------------------
  detail
--------------------------*/

/* dtl-lead-01 */
.dtl-lead-01 {
  margin: 0 auto 47px;
  padding: 33px 3.5% 32px;
  border: 1px solid #2980C4;
}

.dtl-lead-01-item {
  display: flex;
  color: #2980C4;
  font-size: 22px;
  line-height: 1.476;
}

.dtl-lead-01-item::before {
  display: block;
  flex-shrink: 0;
  content: "";
  width: 8px;
  height: 8px;
  margin: 14px 18px 0 0;
  border-radius: 4px;
  background: #2980C4;
}

.dtl-lead-01-item + .dtl-lead-01-item {
  margin-top: 4px;
}

/* dtl-lead-02 */

.dtl-lead-02 {
  margin: 0 auto 117px;
}

.dtl-lead-02-ttl {
  margin: 0 0 32px;
  padding: 0 0 13px;
  border-bottom: 1px solid #2980C4;
  color: #2980C4;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
}

/* dtl-soln */

.dtl-soln {
  margin: 0 auto 152px;
}

.dtl-soln .dtl-sec-ttl {
  margin-bottom: 35px;
}

.dtl-sug-list {
  padding: 51px 5% 48px;
  background: #FFF;
  border-radius: 6px;
  box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}

.dtl-sug-item {
  display: flex;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.dtl-sug-item + .dtl-sug-item {
  margin-top: 11px;
}

.dtl-sug-item::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin: 11px 25px 0 0;
  background: #1A2792;
  border-radius: 4px;
}

/* dtl-efct-01 */

.dtl-efct-01 {
  margin: 0 auto 152px;
}

.dtl-efct .dtl-soln-ttl-outer {
  padding: 0;
}

.dtl-efct .dtl-sug-list {
  padding: 107px 5% 48px;
}

.dtl-efct .dtl-sug-item {
  color: #E03657;
}

.dtl-efct .dtl-sug-item::before {
  background: #E03657;
}

/* dtl-efct-02 */

.dtl-efct-02 {
  margin: 0 auto 117px;
}

.dtl-efct-list {
  display: flex;
  flex-wrap: wrap;
  padding: 110px 5% 52px;
  background: #FFF;
  border-radius: 6px;
  box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}

.dtl-efct-item {
  width: 29.5%;
  margin-left: 5.2%;
}

.dtl-efct-item:nth-child(3n+1) {
  margin-left: 0;
}

.dtl-efct-item:nth-child(n+4) {
  margin-top: 40px;
}

.dtl-efct-item-ttl {
  margin: 0 0 10px;
  color: #E03657;
  font-size: 26px;
  line-height: 1.38;
}

.dtl-efct-item-txt {
  line-height: 1.8;
}

/* dtl-achv */

.dtl-achv {
  margin: 0 auto 120px;
}

.dtl-achv-wrapper {
  overflow: visible;
}

.dtl-achv-list {
  display: flex;
  flex-wrap: wrap;
}

.dtl-achv-item {
  overflow: inherit;
  display: block;
  position: relative;
  width: 31%;
  margin-left: 3.5%;
  padding: 36px 3% 39px;
  border-radius: 6px;
  box-shadow: 0 0 30px rgb(0 0 0 / 10%);
  text-decoration: none;
}

.dtl-achv-item:nth-child(3n+1) {
  margin-left: 0;
}

.dtl-achv-item:nth-child(n+4) {
  margin-top: 40px;
}

.dtl-achv-item::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  background: #fff;
  content: "";
  border-radius: 10px;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
}

.dtl-achv-item-inner {
  position: relative;
  z-index: 2;
  margin: 0 0 30px;
}

.dtl-achv-item-ttl {
  margin: 0 0 15px;
  font-size: 24px;
  font-weight: 700;
}

.dtl-achv-item .case-cat {
  margin: 0 0 14px;
}

.dtl-achv-item-subttl {
  margin: 0 auto 4px;
  color: #1A2792;
  font-size: 16px;
  font-weight: 700;
}

.dtl-achv-item-list + .dtl-achv-item-subttl {
  margin-top: 12px;
}

.dtl-achv-item-list {
  padding: 0 0 0 22px;
}

.dtl-achv-item-list li {
  display: flex;
}

.dtl-achv-item-list li::before {
  content: "・";
}

.dtl-achv-item[href$=".pdf"] .case-slider-btn::before {
  width: 16px;
  height: 14px;
  background-image: url(/sp/usize/assets/img/common/icon-pdf-red.svg);
}


@media screen and (min-width: 768px) {
  .uc-index-item a:hover::before,
  .dtl-achv-item:hover::before {
    opacity: 1;
    transform: scale(1.05);
  }
  .uc-index-open:hover {
    filter: alpha(opacity=80);
    opacity: 0.8;
  }
}

@media screen and (max-width: 767px) {
  .uc-kv {
    height: 198px;
    padding: 45px 0 0;
    margin: 0 0 40px;
  }
  .uc-kv-dtl {
    height: auto;
    padding: 44px 0 0;
    margin: 0 0 40px;
  }
  .uc-kv-dtl::before {
    height: 28.5%;
  }
  .uc-kv-inner {
    width: 91.6%;
  }
  .uc-kv-ttl-box {
    position: relative;
    width: auto;
    padding: 0 0 72px;
  }
  .uc-kv-dtl .uc-kv-ttl-box {
    padding: 0px 0 36px;
  }
  .uc-kv-ttl-en {
    margin: 0 0 13px;
    font-size: 16px;
    line-height: 1.3;
  }
  .uc-kv-ttl-dtl {
    position: relative;
    z-index: 6;
    margin: 0;
    font-size: 28px;
    line-height: 1.3;
  }
  .uc-kv-ttl {
    font-size: 30px;
    margin: 0 0 11px;
  }
  .uc-kv-catch {
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
  }
  .uc-kv-dtl .uc-kv-catch {
    margin: 0 0 0;
  }
  .uc-kv-illust {
    top: auto;
    bottom: 20px;
    width: 130px;
  }
  .uc-kv-dtl .uc-kv-illust {
    bottom: -3px;
  }
  .uc-kv-data {
    padding: 34px 5% 38px;
  }
  .uc-kv-data-ttl {
    margin: 0 0 5px;
    font-size: 26px;
    line-height: 1.4;
  }
  .uc-kv-data-txt {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.8;
  }
  .uc-kv-data .dtl-lead-card-body {
    width: 100%;
  }
  .uc-kv-data .dtl-lead-card-list-item {
    font-size: 14px;
    line-height: 1.8;
  }
  .uc-kv-data .dtl-lead-card-list-item + .dtl-lead-card-list-item {
    margin-top: 5px;
  }

  .uc-index-sec {
    padding: 29px 0 0;
  }
  .uc-index-sec + .uc-index-sec {
    margin-top: 40px;
  }
  .uc-index-sec + .pickup {
    margin-top: 74px;
  }
  .uc-index-ttl {
    margin: 0 auto 0px;
    font-size: 28px;
  }
  .uc-index-subttl {
    margin: 0 auto 20px;
    font-size: 14px;
  }

  .uc-index-list {
    padding: 24px 4.5%;
  }
  .uc-index-item {
    width: 100%;
    margin-left: 0;
  }
  .uc-index-item:nth-child(n+2),
  .uc-index-item:nth-child(n+4) {
    margin-top: 16px;
  }
  .uc-index-item a {
    padding: 22px 4.6% 23px;
  }
  .case-slider-data-inner {
    margin: 0 0 22px;
  }
  .uc-index-item-ttl {
    margin: 0 0 9px;
    font-size: 20px;
    line-height: 1.2;
  }
  .uc-index-item-txt {
    font-size: 14px;
    line-height: 1.75;
  }

  .dtl-lead-01 {
    margin: 0 auto 36px;
    padding: 19px 4% 21px;
  }
  .dtl-lead-01-item {
    font-size: 20px;
    line-height: 1.4;
  }
  .dtl-lead-01-item::before {
    margin: 11px 9px 0 0;
  }
  .dtl-lead-01-item + .dtl-lead-01-item {
    margin-top: 6px;
  }

  .dtl-lead-02 {
    margin: 0 auto 81px;
  }
  .dtl-lead-02-ttl {
    margin: 0 0 16px;
    padding: 0 0 12px;
    font-size: 20px;
    line-height: 1.4;
  }

  .dtl-soln {
    margin: 0 auto 102px;
  }
  .dtl-soln .dtl-sec-ttl {
    margin-bottom: 24px;
  }
  .dtl-sug-list {
    padding: 35px 4% 35px;
  }
  .dtl-sug-item {
    font-size: 18px;
    line-height: 1.4;
  }
  .dtl-sug-item + .dtl-sug-item {
    margin-top: 17px;
  }
  .dtl-sug-item::before {
    margin: 11px 16px 0 0;
  }

  .dtl-efct-01 {
    margin: 0 auto 105px;
  }
  .dtl-efct .dtl-soln-ttl-outer {
    padding: 0;
  }
  .dtl-efct .dtl-sug-list {
    padding: 79px 4% 36px;
  }
  .dtl-efct .dtl-sug-item {
    color: #E03657;
  }
  .dtl-efct .dtl-sug-item::before {
    background: #E03657;
  }

  .dtl-efct-02 {
    margin: 0 auto 78px;
  }

  .dtl-efct-list {
    display: block;
    padding: 78px 4% 33px;
  }
  .dtl-efct-item {
    width: 100%;
    margin-left: 0;
  }
  .dtl-efct-item:nth-child(n+2),
  .dtl-efct-item:nth-child(n+4) {
    margin-top: 31px;
  }
  .dtl-efct-item-ttl {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.2;
  }
  .dtl-efct-item-txt {
    line-height: 1.8;
  }

  .dtl-achv {
    margin: 0 auto 80px;
  }
  .dtl-achv-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform,-webkit-transform;
    -webkit-box-sizing: content-box;
    flex-wrap: nowrap;
  }
  .dtl-achv-item {
    width: 100%;
    margin-left: 0;
    padding: 36px 9% 39px;
  }
  .dtl-achv-item:nth-child(n+2),
  .dtl-achv-item:nth-child(n+4) {
    margin-top: 0;
  }
  .dtl-achv-item-inner {
    margin: 0 0 30px;
  }
  .dtl-achv-item-ttl {
    margin: 0 0 15px;
  }
  .dtl-achv-item .case-cat {
    margin: 0 0 14px;
  }
  .dtl-achv-item-subttl {
    margin: 0 auto 4px;
    font-size: 16px;
    font-weight: 700;
  }
  .dtl-achv-item-list + .dtl-achv-item-subttl {
    margin-top: 12px;
  }
  .dtl-achv-item-list {
    padding: 0 0 0 22px;
  }
  .dtl-achv-item[href$=".pdf"] .case-slider-btn::before {
    width: 16px;
    height: 14px;
  }
  .dtl-achv-util {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px auto 0;
  }
  .dtl-achv-util-prev,
  .dtl-achv-util-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #fff;
    border: 1px solid #1A2792;
    box-sizing: border-box;
    margin: 0;
    top: 0;
    left: auto;
    cursor: pointer;
    transition: .3s;
  }
  .dtl-achv-util-next {
    margin: 0 0 0 16px;
  }
  .dtl-achv-util-prev:after,
  .dtl-achv-util-next:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    transition: .3s;
  }
  .dtl-achv-util-prev:after {
    border-bottom: 1px solid #1A2792;
    border-left: 1px solid #1A2792;
    margin: 0 0 0 3px;
  }
  .dtl-achv-util-next:after {
    border-top: 1px solid #1A2792;
    border-right: 1px solid #1A2792;
    margin: 0 3px 0 0;
  }
}