@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Noto+Serif+JP:wght@400;500&family=Cinzel:wght@400&family=Roboto:wght@400;500&display=swap");
@import url("lib/ress.min.css");
:root {
  /* neutral */
  --white: #ffffff;
  --black: #000000;
  --black-rgb: 0, 0, 0;
  --gray: #5a5a5a; /* ナビオーバーレイ VOICE セクション背景 */
  --gray-dark: #363636; /* FEATURE / STEP UP FLOW セクション背景 */
  --gray-light: #e5e5e5; /* 地図エリア背景 */
  /* accent */
  --red: #eb1818; /* Google MAP ボタン */
  /* font */
  /* main sans-serif Japanese (Noto Sans JP) */
  --font-1: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  /* serif Japanese (Noto Serif JP) — 見出し・電話番号・本文 */
  --font-2: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "ヒラギノ明朝 ProN", serif;
  /* decorative Latin (Cinzel) — セクション英字見出し・コピーライト */
  --font-3: "Cinzel", serif;
  /* Latin sans-serif (Roboto) */
  --font-4: "Roboto", sans-serif;
  /* transition */
  --hover-transition: .2s ease;
}

.p-intro {
  padding: 16.5rem 0 19rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-intro {
    padding: 5.6rem 0 6.3rem;
  }
}
.p-intro .ttl {
  font-size: 3.4rem;
  font-weight: 500;
  letter-spacing: 0.408rem;
}
@media screen and (max-width: 767px) {
  .p-intro .ttl {
    font-size: 2.4rem;
  }
}
.p-intro .txt {
  line-height: 231.25%;
  letter-spacing: 0.192rem;
  padding: 5.6rem 0 0;
}
@media screen and (max-width: 767px) {
  .p-intro .txt {
    font-size: 1.6rem;
    letter-spacing: 0.192rem;
    line-height: 225%;
    padding: 3.1rem 0 0;
  }
}

.p-flow {
  padding-bottom: 14.5rem;
  padding-top: 12.9rem;
}
@media screen and (max-width: 767px) {
  .p-flow {
    padding-top: 3.6rem;
    padding-bottom: 5.2rem;
  }
}
.p-flow-ttl {
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.36rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-flow-ttl {
    font-size: 2.2rem;
    letter-spacing: 0.264rem;
  }
}
.p-flow-items {
  display: flex;
  justify-content: space-between;
  padding: 6.8rem 0 0;
}
@media screen and (max-width: 767px) {
  .p-flow-items {
    flex-direction: column;
    gap: 4rem;
    padding: 2rem 0 0;
  }
}
.p-flow-items li {
  width: 23.97rem;
}
@media screen and (max-width: 767px) {
  .p-flow-items li {
    width: auto;
  }
}
.p-flow-items li .txt {
  display: block;
  font-family: var(--font-1);
  font-size: 2rem;
  padding: 2.1rem 0 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-flow-items li .txt {
    font-size: 1.8rem;
    padding: 1.3rem 0 0;
  }
}
.p-flow-items li:after {
  aspect-ratio: 14/19;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="19" viewBox="0 0 14 19" fill="none"><path d="M0.485352 17.5815V0.908691L12.957 9.24463L0.485352 17.5815Z" fill="white" stroke="%23707070" stroke-width="0.97046"/></svg>') no-repeat 0 0/contain;
  content: " ";
  display: block;
  height: auto;
  position: absolute;
  right: -3.5rem;
  top: 10.9rem;
  width: 1.4rem;
}
@media screen and (max-width: 767px) {
  .p-flow-items li:after {
    aspect-ratio: 13/10;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10" fill="none"><path d="M6.49512 9.75L-7.34329e-05 0H12.9903L6.49512 9.75Z" fill="white"/></svg>') no-repeat 0 0/contain;
    bottom: -1.8rem;
    left: calc(50% - 0.75rem);
    right: unset;
    top: unset;
    width: 1.3rem;
  }
}
.p-flow-items li:last-child:after {
  display: none;
}

.p-casestudy {
  padding-bottom: 23.5rem;
}
@media screen and (max-width: 767px) {
  .p-casestudy {
    padding-bottom: 6.8rem;
  }
}
.p-casestudy-head {
  padding: 0 0 10.8rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-casestudy-head {
    padding: 0 0 2.8rem;
  }
}
.p-casestudy-head .ttl {
  font-size: 3rem;
  font-weight: 500;
  margin: 0 0 3.9rem;
}
@media screen and (max-width: 767px) {
  .p-casestudy-head .ttl {
    font-size: 2.2rem;
    letter-spacing: 0.264rem;
    margin: 0 0 1.9rem;
  }
}
.p-casestudy-head .txt {
  line-height: 231.25%;
}
@media screen and (max-width: 767px) {
  .p-casestudy-head .txt {
    font-size: 1.6rem;
    line-height: 225%;
  }
}
.p-casestudy-body {
  display: flex;
  flex-direction: column;
  gap: 11.6rem;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body {
    gap: 4.6rem;
  }
}
.p-casestudy-body .detail-num {
  font-size: 3.1rem;
  font-family: var(--font-3);
  letter-spacing: 0.248rem;
  margin: 0 0 2.2rem;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-num {
    font-size: 2.2rem;
    letter-spacing: 0.176rem;
    margin: 0 0 2rem;
  }
}
.p-casestudy-body .detail-num span {
  background: var(--gray-dark);
  display: inline-block;
  line-height: 1;
  padding: 0 2.35rem 0 0;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-num span {
    padding: 0 2rem 0 0;
  }
}
.p-casestudy-body .detail-num:after {
  background: white;
  content: " ";
  display: inline-block;
  height: 1px;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
}
.p-casestudy-body .detail-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-meta {
    padding: 3.3rem 0 0;
  }
}
.p-casestudy-body .detail-meta .ttl {
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.36rem;
  margin: -1.1rem 0 1.8rem;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-meta .ttl {
    font-size: 2rem;
    margin: -1.1rem 0 0.8rem;
  }
}
.p-casestudy-body .detail-meta .desc {
  line-height: 175%;
  margin: 0 0 4.5rem;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-meta .desc {
    font-size: 1.6rem;
    letter-spacing: 0.192rem;
    margin: 0 0 2.5rem;
  }
}
.p-casestudy-body .detail-meta .ex {
  background: white;
  border-radius: 0.8rem;
  font-family: var(--font-1);
  min-height: 19.5rem;
  padding: 2.2rem 2.8rem 1.8rem;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-meta .ex {
    padding: 1.5rem 2.4rem 2.1rem;
    min-height: unset;
  }
}
.p-casestudy-body .detail-meta .ex-ttl {
  color: black;
  font-size: 1.8rem;
  font-weight: 500;
  margin: 0 0 0.7rem;
}
.p-casestudy-body .detail-meta .ex ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(5, auto);
  padding: 0 3rem 0 0;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-meta .ex ul {
    display: flex;
    flex-direction: column;
  }
}
.p-casestudy-body .detail-meta .ex ul li {
  color: black;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-meta .ex ul li {
    font-size: 1.6rem;
  }
}
.p-casestudy-body .detail-meta .ex ul li:before {
  content: "● ";
  color: #B2B2B2;
}
.p-casestudy-body .detail-slider {
  margin: 0 3.8rem 0 0;
  width: 53rem;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-slider {
    width: 100%;
  }
}
.p-casestudy-body .detail-slider .slider-for {
  display: flex;
  overflow: hidden;
  margin: 0 0 1.5rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-slider .slider-for {
    margin: 0 0 0.95rem;
  }
}
.p-casestudy-body .detail-slider .slider-for img {
  position: absolute !important;
  width: 53rem;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-slider .slider-for img {
    width: 34rem;
  }
}
.p-casestudy-body .detail-slider .slider-for img:first-child {
  position: relative !important;
}
.p-casestudy-body .detail-slider .slider-nav {
  display: flex;
  gap: 0.7rem;
  overflow: hidden;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-slider .slider-nav {
    gap: 0.45rem;
  }
}
.p-casestudy-body .detail-slider .slider-nav.is-animating {
  pointer-events: none;
}
.p-casestudy-body .detail-slider .slider-nav li {
  width: 12.7rem;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-slider .slider-nav li {
    width: 8.1rem;
  }
}
.p-casestudy-body .detail-slider .slider-nav li img {
  cursor: pointer;
  width: 100%;
}
.p-casestudy-body .detail-slider .slider-nav .slick-track {
  display: flex;
  gap: 0.7rem;
}
@media screen and (max-width: 767px) {
  .p-casestudy-body .detail-slider .slider-nav .slick-track {
    gap: 0.45rem;
  }
}