@charset "utf-8";

/* Home Css Last Up Date: 2018/12/20 */

/* =================================
scene
================================= */
.sec_read {
  margin-top: 40px;
  font-size: 1.6rem;
  line-height: 1.8;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .sec_read {
    margin-top: 30px;
    font-size: 1.3rem;
  }
}

/* top */
.sec-scene_top {
  padding: 50px 0 0;
}

.scene_lists_box {
  padding: 70px 0;
  background: #f4fbff;
}
.sec-scene_top_lists {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sec-scene_top_lists li {
  width: calc(100% / 4 - 21px);
  max-width: 269px;
  margin-top: 30px;
  background: #fff;
  border: 1px solid #e5e5e5;
  text-align: center;
}
.sec-scene_top_lists li+li {
  margin-left: 28px;
}
.sec-scene_top_lists li:nth-child(4n+1) {
  margin-left: 0;
}
.sec-scene_top_lists li a {
  display: block;
  height: 100%;
  padding: 30px 30px 40px;
  color: #262626;
}
.sec-scene_top_lists li a:hover {
  background: #f6f6f6;
  text-decoration: none;
}
.sec-scene_top_lists li a:hover img {
  opacity: 1;
}
.sec-scene_top_lists figure img {
  width: 56px;
}
.sec-scene_top_lists dl {
  margin-top: 20px;
}
.sec-scene_top_lists dt {
  font-size: 1.2rem;
  line-height: 1.9;
}
.sec-scene_top_lists .text_read {
  margin-top: 20px;
  font-weight: bold;
}
.sec-scene_top_lists .link {
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .sec-scene_top {
    padding: 30px 0 0;
  }
  .scene_lists_box {
    padding: 40px 0;
  }
  .sec-scene_top_lists li {
    width: calc(100% / 2 - 5px);
    max-width: none;
    margin-top: 10px;
  }
  .sec-scene_top_lists li+li {
    margin-left: 10px;
  }
  .sec-scene_top_lists li:nth-child(2n+1) {
    margin-left: 0;
  }
  .sec-scene_top_lists li a {
    padding: 20px 8px;
  }
  .sec-scene_top_lists dt {
    font-size: 1.1rem;
  }
  .sec-scene_top_lists .link {
    margin-top: 20px;
  }
}

/* detail */
.page-title_scene_detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0 0;
  border-top: 1px solid #e5e5e5;
}
.page-title_scene_detail .inner {
  max-width: 1160px;
  margin: 0 auto;
}
.page-title_scene_detail .eye-catch {
  margin-top: 50px;
}
.page-title_scene_detail .eye-catch img {
  width: 100%;
}
.sec-scene_detail {
  max-width: 720px;
  margin: 70px auto;
}
.sec-scene_detail .sec-scene-title_detail {
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}
.sec-scene_detail .sec-scene-sub-title {
  margin: 40px 0 0;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}
.sec-scene_detail img {
  display: block;
  max-width: 480px;
  margin: 40px auto;
}
.sec-scene_detail img+img {
  margin-top: -10px;
}
.sec-scene_detail h2 {
  margin: 70px 0 30px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
}
.sec-scene_detail h3 {
  margin: 30px 0 20px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
}
.sec-scene_detail p {
  margin: 20px 0 0;
}
.sec-scene_detail p+p {
  margin-top: 40px;
}
.sec-scene_detail ul,
.sec-scene_detail ol {
  margin: 30px 0 30px 25px;
}
.sec-scene_detail ul {
  list-style: disc;
}
.sec-scene_detail ol {
  list-style: decimal;
}
.sec-scene_detail p a {
  color: #2157bb;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .page-title_scene_detail {
    padding: 30px 0 0;
    border-top: none;
  }
  .page-title_scene_detail .inner {
    padding: 0 10px;
  }
  .page-title_scene_detail .eye-catch {
    margin-top: 30px;
  }
  .sec-scene_detail {
    margin: 40px auto;
    padding: 0 10px;
  }
  .sec-scene_detail .sec-scene-title_detail {
    font-size: 2rem;
  }
  .sec-scene_detail .sec-scene-sub-title {
    margin: 30px 0 0;
    font-size: 1.6rem;
    line-height: 1.8;
  }
  .sec-scene_detail img {
    margin: 30px auto;
  }
  .sec-scene_detail h2 {
    margin: 40px 0 20px;
    font-size: 1.6rem;
    line-height: 1.8;
  }
  .sec-scene_detail h3 {
    margin: 20px 0;
    font-size: 1.4rem;
    line-height: 1.9;
  }
  .sec-scene_detail p {
    margin: 20px 0 0;
  }
  .sec-scene_detail p+p {
    margin-top: 20px;
  }
  .sec-scene_detail ul,
  .sec-scene_detail ol {
    margin: 20px 0 20px 25px;
  }
}