@charset "utf-8";

/* メインビジュアル【topMv】
-------------------------------------------*/
.topMvBl {
  position: relative;
  margin: 150px auto 0;
  padding-bottom: 35px;
}

.header.fixed+.topMvBl {
  margin-top: 90px;
}

.slide {
  position: relative;
}

.slide img {
  width: 100%;
  display: block;
}

/* 初期状態 */
.slide-title {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -40%) scale(.9);
  opacity: 0;
  filter: blur(10px);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s ease,
    filter 0.8s ease;
}

.slide-title.is-visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  filter: blur(0);
}


.splide__slide>a {
  display: block;
  outline-offset: -3px;
}

.splide__pagination__page:hover,
.splide__pagination__page:focus {
  outline: none;
}

.slide__btn {
  position: absolute;
  left: 7.8%;
  bottom: 14.5%;
  width: 36.3%;
  border-radius: min(calc((30 / 1700) * 100vw), 30px);
  box-shadow: 0px 5px #314728;
  cursor: pointer;
  overflow: hidden;
}

.slide__btn:hover {
  bottom: calc(14.5% - 5px);
  box-shadow: none;
  opacity: 1;
}


@media screen and (max-width: 1200px) {
  .topMvBl {
    margin-top: 90px;
  }
}


@media screen and (max-width: 767px) {

  .topMvBl,
  .header.fixed+.topMvBl {
    margin-top: 50px;
    padding-bottom: 25px;
  }

  .slide__btn {
    left: calc((376 / 750) * 100vw);
    width: calc((334 / 750) * 100vw);
    border-radius: calc((24 / 750) * 100vw);
  }

  .slide__btn,
  .slide__btn:hover {
    bottom: calc((77 / 750) * 100vw);
    box-shadow: 0px 5px #314728;
  }
}


/* アイコンリンクエリア
-------------------------------------------*/
.topIcnBl {
  padding: 30px 0;
  background: rgb(173, 211, 230);
}

.topIcn_ul {
  display: flex;
  justify-content: space-between;
}

.topIcn_ul>li {
  width: 18.1%;
  margin-right: 2.375%;
}

.topIcn_ul>li:last-child {
  margin-right: 0;
}

.topIcn_ul>li>a {
  display: block;
  background: #fff;
  border-radius: 15px;
  padding: 10% 5%;
  min-height: 188px;
  box-sizing: border-box;
}

.topIcn_ul_fig {
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.topIcn_ul>li:nth-child(1) .topIcn_ul_fig>img {
  width: 90px;
}

.topIcn_ul>li:nth-child(2) .topIcn_ul_fig>img {
  width: 54px;
}

.topIcn_ul>li:nth-child(3) .topIcn_ul_fig>img {
  width: 84px;
}

.topIcn_ul>li:nth-child(4) .topIcn_ul_fig>img {
  width: 76px;
}

.topIcn_ul>li:nth-child(5) .topIcn_ul_fig>img {
  width: 54px;
}

.topIcn_ul_tit {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-align: center;
  line-height: 1.2;
  margin-top: 12px;
}


@media screen and (max-width: 1200px) {
  .topIcn_ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .topIcn_ul>li {
    width: calc((100% - 60px) /3);
    margin-right: 30px;
  }

  .topIcn_ul>li:nth-child(3),
  .topIcn_ul>li:nth-child(5) {
    margin-right: 0;
  }

  .topIcn_ul>li:nth-child(n+4) {
    margin-top: 30px;
  }

  .topIcn_ul>li>a {
    padding: 7% 5%;
    min-height: auto;
  }

  .topIcn_ul_fig {
    transform: scale(.9);
  }

  .topIcn_ul_tit {
    font-size: 1.6rem;
    margin-top: 15px;
  }
}


@media screen and (max-width: 767px) {
  .topIcnBl {
    padding: 15px 0;
  }

  .topIcn_ul>li {
    width: calc((100% - 26px) / 3);
    margin-right: 13px;
  }

  .topIcn_ul>li:nth-child(n+4) {
    margin-top: 13px;
  }

  .topIcn_ul>li>a {
    padding: 7px 1%;
    min-height: 83.5px;
    border-radius: 7.5px;
    display: flex;
    flex-direction: column;
  }

  .topIcn_ul_fig {
    width: 44px;
    height: 44px;
    margin-top: auto;
    min-height: 0%;
  }

  .topIcn_ul>li:nth-child(1) .topIcn_ul_fig>img {
    width: 42.5px;
  }

  .topIcn_ul>li:nth-child(2) .topIcn_ul_fig>img {
    width: 27px;
  }

  .topIcn_ul>li:nth-child(3) .topIcn_ul_fig>img {
    width: 39px;
  }

  .topIcn_ul>li:nth-child(4) .topIcn_ul_fig>img {
    width: 35.5px;
  }

  .topIcn_ul>li:nth-child(5) .topIcn_ul_fig>img {
    width: 23.5px;
  }

  .topIcn_ul_tit {
    font-size: min(calc((20 / 750) * 100vw), 20px);
    margin-top: min(calc((3 / 750) * 100vw), 3px);
  }

  .topIcn_ul>li:nth-child(5) .topIcn_ul_tit {
    letter-spacing: 0;
  }
}


/* 「My 松栄ガス」
-------------------------------------------*/
.topMyGasBl {
  padding: 120px 0;
  background: rgb(232, 237, 240);
}

.topMyGas_btns {
  display: flex;
  justify-content: space-between;
  max-width: 1100px;
  margin: 58px auto 0;
}

.topMyGas_btns>a {
  width: 47.3%;
}


@media screen and (max-width: 767px) {
  .topMyGasBl {
    padding: 50px 0;
  }

  .topMyGas_btns {
    display: block;
    margin: 20px auto 0;
    max-width: 295px;
  }

  .topMyGas_btns>a {
    width: auto;
    padding: 1.45em .5em;
  }

  .topMyGas_btns>a+a {
    margin-top: 20px;
  }
}


/* 「緊急・お困りのときは…」
-------------------------------------------*/
.topEmergBl {
  padding: 120px 0 116px;
  background: rgb(254, 238, 238);
}

.topEmerg_ul {
  display: flex;
  justify-content: space-between;
  margin: 55px auto 0;
}

.topEmerg_ul>li {
  width: 21.3%;
  margin-right: 4.933%;
}

.topEmerg_ul>li:last-child {
  margin-right: 0;
}

.topEmerg_ul>li>a {
  display: block;
}

.topEmerg_ul_fig {
  position: relative;
  display: block;
}

.topEmerg_ul_fig::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: min(calc((8 / 1200)* 100vw), 8px) solid rgba(230, 44, 33, .7);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
}

.topEmerg_ul_tit {
  font-size: min(calc((20 / 1200)* 100vw), 20px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  color: #c95050;
  margin-top: min(calc((15 / 1200)* 100vw), 15px);
  white-space: nowrap;
}


@media screen and (max-width: 767px) {
  .topEmergBl {
    padding: 50px 0 48px;
  }

  .topEmerg_ul {
    flex-wrap: wrap;
    margin: 20px auto 0;
  }

  .topEmerg_ul>li {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
  }

  .topEmerg_ul>li:nth-child(2),
  .topEmerg_ul>li:nth-child(5) {
    margin-right: 0;
  }

  .topEmerg_ul>li:nth-child(n+3) {
    margin-top: 18px;
  }

  .topEmerg_ul_fig::before {
    border: 4px solid rgba(230, 44, 33, .7);
  }

  .topEmerg_ul_tit {
    font-size: 1.2rem;
    letter-spacing: .1em;
    margin-top: 8px;
    white-space: inherit;
  }

  .topEmerg_ul>li:nth-child(3) .topEmerg_ul_tit {
    letter-spacing: 0;
  }
}


/* 「ガス管の埋設状況に関するお問い合わせ」
-------------------------------------------*/
.topGasPipeBl {
  padding: 60px 0;
  background: #25398a;
}

.topGasPipe_btn {
  display: flex;
  justify-content: center;
  align-content: center;
  background: #fff;
  border-radius: 15px;
  width: 570px;
  margin: 0 auto;
  padding: 2.7em 1em;
  cursor: pointer;
}

.topGasPipe_btn_tit {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .1em;
  color: #263889;
  position: relative;
  padding-left: 130px;
  display: block;
}

.topGasPipe_btn_tit::before {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  background: url(../../img/common_v2/icn_gaspipe-contact.png) no-repeat center/contain;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}


@media screen and (max-width: 767px) {
  .topGasPipeBl {
    padding: 30px 0;
  }

  .topGasPipe_btn {
    border-radius: 7.5px;
    width: auto;
    max-width: 295px;
    padding: 1.7em 1em;
  }

  .topGasPipe_btn_tit {
    font-size: 1.4rem;
    line-height: 1.25;
    padding-left: 73px;
  }

  .topGasPipe_btn_tit::before {
    width: 55px;
    height: 55px;
  }
}


/* 「お知らせ・トピックス」
-------------------------------------------*/
.topInfoBl {
  padding: 120px 0 0;
}


@media screen and (max-width: 767px) {
  .topInfoBl {
    padding: 50px 0 0;
  }
}


/* 「お役立ちリンク集」
-------------------------------------------*/
.topUsefulBl {
  padding: 118px 0 60px;
}

.topUseful_ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 762px;
  margin: 55px auto 0;
}

.topUseful_ul>li {
  width: 30.8%;
  margin-right: 3.8%;
}

.topUseful_ul>li:nth-child(3),
.topUseful_ul>li:nth-child(5) {
  margin-right: 0;
}

.topUseful_ul>li:nth-child(n+4) {
  margin-top: 3.8%;
}

.topUseful_ul>li>a {
  display: block;
}

.topUseful_sub {
  margin: 60px auto 0;
  padding: 30px 0;
  background: #e9edef;
}

.topUseful_sub_ul {
  display: flex;
  justify-content: space-between;
}

.topUseful_sub_ul>li {
  width: 13.75%;
  margin-right: 3.5%;
}

.topUseful_sub_ul>li:last-child {
  margin-right: 0;
}

.topUseful_sub_ul>li>a {
  display: block;
}


@media screen and (max-width: 1200px) {
  .topUseful_sub_ul {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 555px;
    margin: 0 auto;
  }

  .topUseful_sub_ul>li {
    width: 165px;
    margin-right: 30px;
  }

  .topUseful_sub_ul>li:nth-child(3),
  .topUseful_sub_ul>li:nth-child(6) {
    margin-right: 0;
  }

  .topUseful_sub_ul>li:nth-child(n+4) {
    margin-top: 30px;
  }
}


@media screen and (max-width: 767px) {
  .topUsefulBl {
    padding: 45px 0 65px;
  }

  .topUseful_ul {
    max-width: 335px;
    margin: 20px auto 0;
  }

  .topUseful_ul>li {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
  }

  .topUseful_ul>li:nth-child(3) {
    width: 100%;
  }

  .topUseful_ul>li:nth-child(3) img {
    width: calc((100% - 20px) / 2);
    margin: 0 auto;
    display: block;
  }

  .topUseful_ul>li:nth-child(2),
  .topUseful_ul>li:nth-child(3),
  .topUseful_ul>li:nth-child(5) {
    margin-right: 0;
  }

  .topUseful_ul>li:nth-child(n+3) {
    margin-top: 20px;
  }

  .topUseful_sub {
    margin: 30px auto 0;
    padding: 30px 0;
  }

  .topUseful_sub_ul {
    max-width: 335px;
  }

  .topUseful_sub_ul>li,
  .topUseful_sub_ul>li:nth-child(3) {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
  }

  .topUseful_sub_ul>li:nth-child(even) {
    margin-right: 0;
  }

  .topUseful_sub_ul>li:nth-child(n+3) {
    margin-top: 20px;
  }
}