@charset "UTF-8";
/*===================================
page --- 浮気調査事例詳細
===================================*/
/*----------------------------------
 記事タイトルエリア
----------------------------------*/
.article-area {
  margin-top: 18px;
}
@media screen and (min-width: 600px) {
  .article-area {
    margin-top: 40px;
  }
}
.article-area .l-inner {
  padding: 0 15px;
}
@media screen and (min-width: 600px) {
  .article-area .l-inner {
    max-width: calc(1000px + (40px * 2));
    padding: 0 40px;
  }
}

.article__header {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr auto;
  grid-template-columns: 1fr auto;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
      grid-template-areas: "area-01 area-02" "area-03 area-03";
}
@media screen and (min-width: 600px) {
  .article__header {
    -ms-grid-columns: 1fr 26.4%;
    grid-template-columns: 1fr 26.4%;
    -ms-grid-rows: 60px auto;
    grid-template-rows: 60px auto;
  }
  .article__header > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .article__header > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .article__header > *:nth-child(3) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .article__header > *:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
}

.article__status {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: area-01;
  border-bottom: 1px solid #b9b9b9;
  color: #595757;
  font-family: "main-font", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.3333333333;
  margin-bottom: 14px;
  padding: 5px 10px 8px;
}
@media screen and (min-width: 600px) {
  .article__status {
    line-height: 0.8333333333;
    margin-bottom: 14px;
    padding: 15px 15px 10px;
  }
}

.article__header-img {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: area-02;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 600px) {
  .article__header-img img {
    width: 100%;
  }
}

.article__header-content {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: area-03;
  margin-top: 6px;
}
@media screen and (min-width: 600px) {
  .article__header-content {
    width: 70%;
    margin-top: 3px;
  }
}

.article__title {
  color: #595757;
  font-family: "Noto Serif JP", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.225;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  padding: 0 10px 10px;
}
@media screen and (min-width: 600px) {
  .article__title {
    font-size: 4rem;
    line-height: 1.225;
    padding: 0 10px 0;
  }
}

.article__tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-family: "NotoSans-Medium", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-family: "NotoSans-Bold", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.7407407407;
  margin-top: 3px;
  padding: 0 10px;
}
@media screen and (min-width: 600px) {
  .article__tag {
    font-size: 1.4rem;
    line-height: 1.7857142857;
    margin-top: 24px;
  }
}
.article__tag li {
  display: inline-block;
  background-color: #b3b0b3;
  border: 2px solid #f0eded;
  border-radius: 30px;
  color: #fff;
  text-align: center;
  min-width: 60px;
  margin-right: 4px;
  margin-bottom: 3px;
  padding: 0 10px;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
@media screen and (min-width: 600px) {
  .article__tag li {
    border-width: 2px;
    min-width: 65px;
    margin-right: 9px;
    margin-bottom: 4px;
    padding: 0 10px;
  }
}

/*----------------------------------
 文章エリア
----------------------------------*/
.article__body {
  margin-top: 29px;
}
@media screen and (min-width: 600px) {
  .article__body {
    margin-top: 29px;
  }
}
.article__body strong {
  color: #e89289;
  font-family: "NotoSans-Bold", sans-serif;
  font-style: normal;
  font-weight: 700;
}
.article__body .l-inner {
  padding: 0;
}
@media screen and (min-width: 600px) {
  .article__body .l-inner {
    padding: 0 40px;
  }
}

.article-situation,
.article-point-content {
  line-height: 1.5;
  padding: 18px 7% 21px;
}
@media screen and (min-width: 600px) {
  .article-situation,
.article-point-content {
    font-size: 1.7rem;
    line-height: 1.7647058824;
    padding: 37px 5% 38px;
  }
}
.article-situation p:nth-child(n+2),
.article-point-content p:nth-child(n+2) {
  margin-top: 21px;
}
@media screen and (min-width: 600px) {
  .article-situation p:nth-child(n+2),
.article-point-content p:nth-child(n+2) {
    margin-top: 31px;
  }
}

/* ------ 状況説明 ------ */
.article-situation {
  color: #595757;
  background-color: #f7f6f6;
  width: 95.83%;
}
@media screen and (min-width: 600px) {
  .article-situation {
    width: 84.4%;
    max-width: 844px;
  }
}
.article-situation:nth-of-type(n + 2) {
  margin-top: 35px;
}
@media screen and (min-width: 600px) {
  .article-situation:nth-of-type(n + 2) {
    margin-top: 57px;
  }
}

/* ------ 調査ポイント ------ */
.article-point {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin-top: 59px;
}
@media screen and (min-width: 600px) {
  .article-point {
    margin-top: 59px;
  }
}
.article-point:nth-of-type(n + 2) {
  margin-top: 26px;
}
@media screen and (min-width: 600px) {
  .article-point:nth-of-type(n + 2) {
    margin-top: 63px;
  }
}

/* 矢印 */
.article-point__arw {
  position: relative;
  left: 6%;
  width: 18px;
  height: auto;
  /* 棒 */
  /* 三角形 */
}
@media screen and (min-width: 600px) {
  .article-point__arw {
    left: 9.2%;
    width: 33px;
  }
}
.article-point__arw::before, .article-point__arw::after {
  position: absolute;
  content: "";
  display: block;
}
.article-point__arw::before {
  top: 0;
  left: 50%;
  -webkit-transform: translateY(0) translateX(-50%);
          transform: translateY(0) translateX(-50%);
  width: 6px;
  height: 100%;
  background-color: #cfcae1;
}
@media screen and (min-width: 600px) {
  .article-point__arw::before {
    left: 53.4%;
    width: 10px;
  }
}
.article-point__arw::after {
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 9px 0 9px;
  border-color: #cfcae1 #fff #fff #fff;
}
@media screen and (min-width: 600px) {
  .article-point__arw::after {
    border-width: 29px 17px 0 17px;
  }
}

.article-point-content {
  background-color: #aca5ce;
  color: #fff;
  width: 83.06%;
  margin-left: auto;
}
@media screen and (min-width: 600px) {
  .article-point-content {
    width: 78.1%;
    max-width: 781px;
  }
}

.article-point__head {
  border-bottom: 1px solid #fff;
  font-family: "Noto Serif JP", serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.675;
  margin-bottom: 8px;
  padding-bottom: 10px;
}
@media screen and (min-width: 600px) {
  .article-point__head {
    font-size: 2.5rem;
    line-height: 1.32;
    margin-bottom: 8px;
    padding-bottom: 10px;
  }
}

.article-point__txt {
  padding: 0 6px;
}
@media screen and (min-width: 600px) {
  .article-point__txt {
    padding: 0 6px;
  }
}

/* ------ 一覧へ戻るボタン ------ */
.btn-article {
  border-radius: 0;
  background-color: #9fa0a0;
  max-width: 136px;
  margin-top: 19px;
}
@media screen and (min-width: 600px) {
  .btn-article {
    max-width: 151px;
    margin-top: 50px;
  }
}
.btn-article .c-btn-base__link {
  font-family: "main-font", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.5185185185;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  padding-top: 7px;
  padding-bottom: 7px;
}
@media screen and (min-width: 600px) {
  .btn-article .c-btn-base__link {
    font-size: 1.5rem;
    line-height: 1.5333333333;
    padding-top: 9px;
    padding-bottom: 9px;
  }
}
.btn-article .c-btn-base__link::after {
  display: none;
}
.btn-article:hover {
  background-color: #231815;
}

/*----------------------------------
 関連する浮気調査事例
----------------------------------*/
.relation {
  background-color: #ebeaf4;
  margin-top: 65px;
  padding: 32px 27px 45px;
}
@media screen and (min-width: 600px) {
  .relation {
    margin-top: 106px;
    padding: 53px 40px 77px;
  }
}
.relation .l-inner {
  padding: 0 15px;
}
@media screen and (min-width: 600px) {
  .relation .l-inner {
    max-width: calc(1024px + (40px * 2));
    padding: 0 40px;
  }
}
.relation .c-sec__title {
  color: #000;
  font-size: 2.5rem;
  /* SP：装飾用の横線線 */
}
@media screen and (min-width: 600px) {
  .relation .c-sec__title {
    font-size: 3.3rem;
  }
}
.relation .c-sec__title::after {
  bottom: -18px;
  content: "";
  background-color: #aca5ce;
  width: 23px;
  height: 2px;
}
@media screen and (min-width: 600px) {
  .relation .c-sec__title::after {
    display: block;
    bottom: -30px;
    width: 46px;
    height: 4px;
  }
}

@media screen and (max-width: 599px) {
  .c-example__item {
    display: block;
    max-width: 230px;
    margin: 0 auto;
  }
  .c-example__img {
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }
  .c-example__img img {
    display: block;
    width: 100%;
  }
  .c-example-content {
    margin-top: 14px;
    margin-left: 0;
  }
  .c-example__title {
    margin-top: 2px;
  }
}
/* ------ Swiperの設定 ------ */
.swiper {
  margin-top: 55px;
}
@media screen and (min-width: 600px) {
  .swiper {
    margin-top: 70px;
  }
}

/* デフォルトの矢印を消す */
.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: 56% !important;
  width: 13px !important;
  height: 24px !important;
}
@media screen and (min-width: 600px) {
  .swiper-button-prev,
.swiper-button-next {
    top: 62.1% !important;
    width: 15px !important;
    height: 27px !important;
  }
}

.swiper-button-prev {
  left: -6px !important;
  background: url("../../images/example/slider_prev.svg") no-repeat center center/contain;
}
@media screen and (min-width: 600px) {
  .swiper-button-prev {
    left: -20px !important;
  }
}

.swiper-button-next {
  right: 3px !important;
  background: url("../../images/example/slider_next.svg") no-repeat center center/contain;
}
@media screen and (min-width: 600px) {
  .swiper-button-next {
    right: -17px !important;
  }
}
/*# sourceMappingURL=example_detail.css.map */