@charset "UTF-8";
/*------------------------------------------------------

	/card/guide/improvement/
	「お客さまの声」からの改善事例

-------------------------------------------------------- */
/* カテゴリーヘッダー
------------------------------- */
.categoryHeader {
  padding: 0;
  margin: min(6.93vw, 70px) auto min(5.94vw, 60px);
}

/* リード文 */
.categoryHeader_lead {
  padding: 0 3.8461538462vw;
  font-size: 1.23em;
}
@media screen and (min-width: 751px) {
  .categoryHeader_lead {
    font-size: 1.67em;
  }
}

/* mv */
.categoryHeader_mv {
  margin-top: min(9.33vw, 70px);
}
@media screen and (min-width: 751px) {
  .categoryHeader_mv {
    margin-top: min(6.93vw, 70px);
  }
}
.categoryHeader_mv > img {
  width: 100%;
  max-width: 980px;
}

/* コンテンツ
------------------------------- */
/* タブ */
.improvementYearTabWrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 1.86vw;
  padding: 0 4vw;
  position: relative;
}
@media screen and (min-width: 751px) {
  .improvementYearTabWrap {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: min(1.78vw, 18px);
    padding: 0 min(4.95vw, 50px);
  }
}
.improvementYearTabWrap::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #e8e8e8;
  position: absolute;
  left: 0;
  bottom: 0;
}

.improvementYearTab {
  cursor: pointer;
  min-height: 54px;
  padding: 2.66vw 1.33vw;
  font-size: clamp(0.88rem, 0.61rem + 1.1vw, 1.13rem);
  font-weight: bold;
  color: #ffffff;
  background-color: rgba(0, 117, 194, 0.6);
  border: 2px solid #e8e8e8;
  border-radius: 6px 6px 0 0;
  position: relative;
  z-index: 1;
  transition: 0.3s;
}
@media screen and (min-width: 751px) {
  .improvementYearTab {
    padding: min(1.58vw, 16px) min(0.99vw, 10px);
    font-size: 1.13em;
  }
}
.improvementYearTab:hover {
  background-color: #0075c2;
}
.improvementYearTab.is-active {
  cursor: inherit;
  pointer-events: none;
  color: #222222;
  background-color: #ffffff;
  border-bottom-color: #ffffff;
}

.improvementTabPanel {
  display: none;
}
.improvementTabPanel.is-active {
  display: block;
}

/* アコーディオン */
.improvementToggleWrap {
  margin: min(2.97vw, 30px) auto 0;
}

.improvementToggle {
  border-top: 1px solid #e8e8e8;
}
.improvementToggle:last-of-type {
  border-bottom: 1px solid #e8e8e8;
}
.improvementToggleBtn {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 80px;
  padding: min(2.97vw, 30px) min(4.95vw, 60px);
  cursor: pointer;
  color: inherit;
  background-color: #ffffff;
  border: 2px solid #ffffff;
  font-size: inherit;
}
@media screen and (min-width: 751px) {
  .improvementToggleBtn {
    min-height: min(15.84vw, 160px);
    padding: min(2.97vw, 30px) min(4.95vw, 60px);
    border-width: 4px;
  }
}
.improvementToggleBtnExample {
  display: block;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding-right: 6.66vw;
  font-size: clamp(0.94rem, -0.3rem + 5.3vw, 2.19rem);
  font-weight: bold;
  text-align: left;
  word-break: break-word;
  pointer-events: none;
  position: relative;
}
@media screen and (min-width: 751px) {
  .improvementToggleBtnExample {
    padding-right: min(5.94vw, 60px);
    font-size: 1.63em;
  }
}
.improvementToggleBtnExample::after {
  content: "";
  width: 5.33vw;
  height: 5.33vw;
  background: url(/card/shared/img/icon_circle_plus_black.svg) no-repeat center/contain;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (min-width: 751px) {
  .improvementToggleBtnExample::after {
    width: min(3.96vw, 40px);
    height: min(3.96vw, 40px);
  }
}
.improvementToggleBtn.is-open {
  background-color: #edeff0;
}
.improvementToggleBtn.is-open .improvementToggleBtnExample::after {
  background-image: url(/card/shared/img/icon_circle_minus_black.svg);
}
.improvementToggleBody {
  padding: min(7.92vw, 80px) 0;
  background-color: #f5f6f7;
}

/* お客さまの声 */
.improvementBubble {
  max-width: 800px;
  background-color: #ffffff;
  padding: min(4vw, 30px) min(5.33vw, 40px);
  border-radius: 15px;
  box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.09);
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 751px) {
  .improvementBubble {
    padding: min(2.97vw, 30px) min(3.96vw, 40px);
  }
}
.improvementBubble:not(:first-of-type) {
  margin-top: min(6.66vw, 50px);
}
@media screen and (min-width: 751px) {
  .improvementBubble:not(:first-of-type) {
    margin-top: min(4.95vw, 50px);
  }
}
.improvementBubble._customer {
  margin-left: min(16vw, 120px);
}
@media screen and (min-width: 751px) {
  .improvementBubble._customer {
    margin-left: min(7.92vw, 80px);
  }
}
.improvementBubble._improved {
  margin-left: auto;
}
.improvementBubbleTitle {
  color: #0075C2;
  font-size: 1.13em;
  font-weight: bold;
  margin-bottom: 0.6em;
}
@media screen and (min-width: 751px) {
  .improvementBubbleTitle {
    font-size: 1.13em;
  }
}
.improvementBubbleBody p:not(:first-of-type) {
  margin-top: 0.4em;
}
.improvementBubbleFlow > *:not(:first-of-type) {
  position: relative;
}
.improvementBubbleFlow > *:not(:first-of-type)::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #a7effd;
  border-width: min(2.4vw, 18px) 0 min(2.4vw, 18px) min(2.66vw, 20px);
  position: absolute;
  left: calc(min(3.46vw, 26px) * -1);
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (min-width: 751px) {
  .improvementBubbleFlow > *:not(:first-of-type)::before {
    border-width: min(1.78vw, 18px) 0 min(1.78vw, 18px) min(1.98vw, 20px);
    left: calc(min(2.57vw, 26px) * -1);
  }
}
.improvementBubbleFlow_img {
  box-shadow: 0 0 0 1px #e8e8e8 inset;
}
.improvementBubbleFlow_img img {
  position: relative;
  z-index: -1;
}
.improvementBubbleFlow figcaption {
  font-size: 0.88em;
  margin-top: 0.4em;
}
.improvementBubbleChange > *:not(:first-of-type) {
  position: relative;
}
.improvementBubbleChange > *:not(:first-of-type)::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #eaedc5;
  border-width: min(2.4vw, 18px) 0 min(2.4vw, 18px) min(2.66vw, 20px);
  position: absolute;
  left: calc(min(3.46vw, 26px) * -1);
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (min-width: 751px) {
  .improvementBubbleChange > *:not(:first-of-type)::before {
    border-width: min(1.78vw, 18px) 0 min(1.78vw, 18px) min(1.98vw, 20px);
    left: calc(min(2.57vw, 26px) * -1);
  }
}
.improvementBubbleChange_img {
  box-shadow: 0 0 0 1px #e8e8e8 inset;
}
.improvementBubbleChange_img img {
  position: relative;
  z-index: -1;
}
.improvementBubbleChange figcaption {
  font-size: 0.88em;
  margin-top: 0.4em;
}
.improvementBubbleImage > img {
  width: 100%;
}
._customer .improvementBubbleImage {
  width: min(18.66vw, 140px);
  height: min(18.66vw, 140px);
  position: absolute;
  left: max(-16vw, -120px);
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (min-width: 751px) {
  ._customer .improvementBubbleImage {
    width: min(9.9vw, 100px);
    height: min(9.9vw, 100px);
    left: max(-7.93vw, -80px);
  }
}

._improved .improvementBubbleImage {
  width: min(10.66vw, 80px);
  height: min(10.66vw, 80px);
  position: absolute;
  top: max(-2.67vw, -20px);
  right: min(2.66vw, 20px);
}
@media screen and (min-width: 751px) {
  ._improved .improvementBubbleImage {
    width: min(5.94vw, 60px);
    height: min(5.94vw, 60px);
    top: -20px;
    right: 20px;
  }
}/*# sourceMappingURL=style.css.map */