/*  #mv
-------------------------------------------------------------------------------*/
.mv {
  position: relative;
  z-index: 1;
}

.mv-image {
  position: relative;
}
.mv-image:after {
  content: "";
  position: absolute;
  left: -2.6666666667vw;
  bottom: 0.9333333333vw;
  display: inline-block;
  width: 109.0666666667vw;
  height: 33.6vw;
  background-image: url(../img/mv/staff_sp.png);
  background-size: contain;
  z-index: 1;
}

.mv-obi {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ff6000;
  height: 28vw;
}

.mv-btn {
  width: 85.3333333333vw;
}

@media screen and (min-width: 751px) {
  .mv {
    padding-top: 2.0833333333vw;
  }
  .mv-image {
    padding-bottom: 6.25vw;
  }
  .mv-image:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6.25vw;
    background-color: #babbbb;
  }
  .mv-image:after {
    left: -2.2222222222vw;
    bottom: -0.6944444444vw;
    width: 53.6805555556vw;
    height: 16.5277777778vw;
    background-image: url(../img/mv/staff.png);
    background-image: image-set(url(../img/mv/staff.png) 1x, url(../img/mv/staff-2x.png) 2x);
    background-image: -webkit-image-set(url(../img/mv/staff.png) 1x, url(../img/mv/staff-2x.png) 2x);
  }
  .mv-obi {
    height: 11.5972222222vw;
  }
  .mv-btn {
    width: 38.8888888889vw;
  }
}
@media screen and (min-width: 1501px) {
  .mv {
    padding-top: 30px;
  }
  .mv-image {
    padding-bottom: 90px;
  }
  .mv-image:before {
    height: 90px;
  }
  .mv-image:after {
    left: -32px;
    bottom: -10px;
    width: 773px;
    height: 238px;
  }
  .mv-obi {
    height: 167px;
  }
  .mv-btn {
    width: 560px;
  }
}
/*  #slider
-------------------------------------------------------------------------------*/
.slider {
  position: relative;
  padding: 6.6666666667vw 0;
  background-color: #ffffff;
  overflow: hidden;
}

.slider-slide {
  position: relative;
}

.slider-slide .swiper-slide {
  left: 2.6666666667vw;
  margin-right: 5.3333333333vw;
  width: 89.3333333333vw;
}

.slider-slide .swiper-slide:last-child {
  margin-right: 0;
}

#slider-prev {
  left: -3.0666666667vw;
}

#slider-next {
  right: -3.0666666667vw;
}

@media screen and (max-width: 750px) {
  .slider-slide {
    margin: 0 auto;
    width: 89.3333333333vw;
  }
}
@media screen and (min-width: 751px) {
  .slider {
    padding: 2.0833333333vw 0;
  }
  .slider-slide .swiper-slide {
    left: 1.7361111111vw;
    margin-right: 3.4722222222vw;
    width: 44.4444444444vw;
  }
  #slider-prev {
    left: -0.8333333333vw;
  }
  #slider-next {
    right: -0.8333333333vw;
  }
}
@media screen and (min-width: 1501px) {
  .slider {
    padding: 30px 0;
  }
  .slider-slide .swiper-slide {
    left: 25px;
    margin-right: 50px;
    width: 640px;
  }
  #slider-prev {
    left: -12px;
  }
  #slider-next {
    right: -12px;
  }
}
/*  #news
-------------------------------------------------------------------------------*/
.news {
  position: relative;
  padding: 9.3333333333vw 0;
  background-image: url(../img/news/bg_sp.png);
  background-size: cover;
  background-position: center;
}

.news-box {
  position: relative;
  padding: 6.6666666667vw 5.3333333333vw 9.3333333333vw 8vw;
  background-color: #ffffff;
  border-color: #ff6511;
  border-style: solid;
  border-width: 0.8vw;
  border-radius: 2.1333333333vw;
  overflow: hidden;
}
.news-box:before, .news-box:after {
  content: "";
  position: absolute;
  width: 80.1333333333vw;
  height: 56.6666666667vw;
  background-image: url(../img/news/pattern.png);
  background-size: contain;
}
.news-box:before {
  top: -50.6666666667vw;
  right: -44vw;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.news-box:after {
  left: -44vw;
  bottom: -50.6666666667vw;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.news-heading {
  position: relative;
  margin-bottom: 2.6666666667vw;
  text-align: center;
}
.news-heading:after {
  content: "";
  position: absolute;
  top: 4vw;
  right: 4vw;
  display: inline-block;
  width: 17.0666666667vw;
  height: 9.0666666667vw;
  background-image: url(../img/news/bugle.png);
  background-size: contain;
  -webkit-transform: rotate(25.07deg);
          transform: rotate(25.07deg);
}

.news-en {
  position: relative;
  display: inline-block;
  margin-bottom: 2.6666666667vw;
  color: #ff5400;
  font-family: "ZenKakuGothicNew", sans-serif;
  font-size: 9.6vw;
  font-weight: 900;
  line-height: 1em;
}
.news-en:before {
  content: "";
  position: absolute;
  top: -2vw;
  left: -3.3333333333vw;
  display: inline-block;
  width: 3.2vw;
  height: 3.4666666667vw;
  background-image: url(../img/news/deco.svg);
  background-size: contain;
}

.news-ttl {
  font-size: 4.2666666667vw;
  font-weight: 700;
  line-height: 1.2em;
}

.news-scroll {
  position: relative;
  padding-right: 4.6666666667vw;
  height: 50vw;
  overflow-y: auto;
  z-index: 1;
}

.news-scroll::-webkit-scrollbar {
  width: 1.6vw;
}

.news-scroll::-webkit-scrollbar-track {
  background-color: #e8e8e8;
  border-radius: 0.8vw;
}

.news-scroll::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 0.8vw;
}

@media screen and (min-width: 751px) {
  .news {
    padding: 3.4722222222vw 0;
    background-image: url(../img/news/bg.png);
    background-image: image-set(url(../img/news/bg.png) 1x, url(../img/news/bg-2x.png) 2x);
    background-image: -webkit-image-set(url(../img/news/bg.png) 1x, url(../img/news/bg-2x.png) 2x);
  }
  .news-box {
    padding: 2.4305555556vw 2.7777777778vw 3.4722222222vw 2.7777777778vw;
    border-width: 0.2777777778vw;
    border-radius: 1.1111111111vw;
  }
  .news-box:before, .news-box:after {
    width: 41.7361111111vw;
    height: 29.5138888889vw;
    background-image: url(../img/news/pattern.png);
    background-image: image-set(url(../img/news/pattern.png) 1x, url(../img/news/pattern-2x.png) 2x);
    background-image: -webkit-image-set(url(../img/news/pattern.png) 1x, url(../img/news/pattern-2x.png) 2x);
  }
  .news-box:before {
    top: -24.6527777778vw;
    right: -24.3055555556vw;
  }
  .news-box:after {
    left: -24.3055555556vw;
    bottom: -24.6527777778vw;
  }
  .news-heading {
    margin-bottom: 1.0416666667vw;
  }
  .news-heading:after {
    top: 1.3888888889vw;
    right: 2.7777777778vw;
    width: 7.4305555556vw;
    height: 3.9583333333vw;
  }
  .news-en {
    margin-bottom: 0.6944444444vw;
    font-size: 5vw;
  }
  .news-en:before {
    top: -0.6944444444vw;
    left: -1.7361111111vw;
    width: 1.6666666667vw;
    height: 1.8055555556vw;
  }
  .news-ttl {
    font-size: 1.9444444444vw;
  }
  .news-scroll {
    padding-right: 2.4305555556vw;
    height: 12.5vw;
  }
  .news-scroll::-webkit-scrollbar {
    width: 0.5555555556vw;
  }
  .news-scroll::-webkit-scrollbar-track {
    border-radius: 0.2777777778vw;
  }
  .news-scroll::-webkit-scrollbar-thumb {
    border-radius: 0.2777777778vw;
  }
}
@media screen and (min-width: 1501px) {
  .news {
    padding: 50px 0;
  }
  .news-box {
    padding: 35px 40px 50px 40px;
    border-width: 4px;
    border-radius: 16px;
  }
  .news-box:before, .news-box:after {
    width: 601px;
    height: 425px;
  }
  .news-box:before {
    top: -355px;
    right: -350px;
  }
  .news-box:after {
    left: -350px;
    bottom: -355px;
  }
  .news-heading {
    margin-bottom: 15px;
  }
  .news-heading:after {
    top: 20px;
    right: 40px;
    width: 107px;
    height: 57px;
  }
  .news-en {
    margin-bottom: 10px;
    font-size: 7.2rem;
  }
  .news-en:before {
    top: -10px;
    left: -25px;
    width: 24px;
    height: 26px;
  }
  .news-ttl {
    font-size: 2.8rem;
  }
  .news-scroll {
    padding-right: 35px;
    height: 180px;
  }
  .news-scroll::-webkit-scrollbar {
    width: 8px;
  }
  .news-scroll::-webkit-scrollbar-track {
    border-radius: 4px;
  }
  .news-scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
  }
}
/*  #event
-------------------------------------------------------------------------------*/
.event {
  position: relative;
  padding: 16vw 0 12vw 0;
  background-image: url(../img/common/check_sp.jpg);
  background-repeat: repeat;
  overflow: hidden;
}
.event:before, .event:after {
  content: "";
  position: absolute;
  top: 0;
  display: inline-block;
  width: 31.3333333333vw;
  height: 13.4666666667vw;
  background-image: url(../img/event/flag.svg);
  background-size: contain;
}
.event:before {
  left: 0;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.event:after {
  right: 0;
}

.event-heading {
  position: relative;
  margin-bottom: 6.6666666667vw;
}

.event-catch {
  position: relative;
  margin: 0 auto 2vw auto;
  width: 64vw;
  color: #00508e;
  font-family: "ZenKakuGothicNew", sans-serif;
  font-size: 4.2666666667vw;
  font-weight: 900;
  text-align: center;
  line-height: 1.33em;
  letter-spacing: 0.1em;
}
.event-catch:before, .event-catch:after {
  content: "";
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 4.1333333333vw;
  height: 5.8666666667vw;
  background-size: contain;
  background-image: url(../img/common/deco.svg);
}
.event-catch:before {
  left: 0;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.event-catch:after {
  right: 0;
}

.event-ttl {
  font-size: 8.5333333333vw;
  font-weight: 900;
  text-align: center;
  line-height: 1.2em;
}

@media screen and (min-width: 751px) {
  .event {
    padding: 5.9027777778vw 0 4.1666666667vw 0;
    background-image: url(../img/common/check.jpg);
    background-image: image-set(url(../img/common/check.jpg) 1x, url(../img/common/check-2x.jpg) 2x);
    background-image: -webkit-image-set(url(../img/common/check.jpg) 1x, url(../img/common/check-2x.jpg) 2x);
  }
  .event:before, .event:after {
    top: -1.25vw;
    width: 16.3194444444vw;
    height: 7.0138888889vw;
  }
  .event-heading {
    margin-bottom: 3.4722222222vw;
  }
  .event-catch {
    margin-bottom: 1.0416666667vw;
    width: 30.5555555556vw;
    font-size: 2.0833333333vw;
  }
  .event-catch:before, .event-catch:after {
    width: 1.9444444444vw;
    height: 2.8472222222vw;
  }
  .event-ttl {
    font-size: 4.4444444444vw;
  }
}
@media screen and (min-width: 1501px) {
  .event {
    padding: 85px 0 60px 0;
  }
  .event:before, .event:after {
    top: -18px;
    width: 235px;
    height: 101px;
  }
  .event-heading {
    margin-bottom: 50px;
  }
  .event-catch {
    margin-bottom: 15px;
    width: 440px;
    font-size: 3rem;
  }
  .event-catch:before, .event-catch:after {
    width: 28px;
    height: 41px;
  }
  .event-ttl {
    font-size: 6.4rem;
  }
}
/* ------------------------------------------- slide - */
.event-slide {
  position: relative;
}

.event-slide .p-event {
  left: 3.6666666667vw;
  margin-right: 7.3333333333vw;
  width: 85.3333333333vw;
}

.event-slide .p-event:last-child {
  margin-right: 0;
}

@media screen and (min-width: 751px) {
  .event-slide .p-event {
    left: 3.4722222222vw;
    margin-right: 6.9444444444vw;
    width: 37.5vw;
  }
}
@media screen and (min-width: 1501px) {
  .event-slide .p-event {
    left: 50px;
    margin-right: 100px;
    width: 540px;
  }
}
/*  #plan
-------------------------------------------------------------------------------*/
.plan {
  position: relative;
  padding: 10.6666666667vw 0 13.3333333333vw 0;
  background-color: #fde7d6;
}
.plan:before, .plan:after {
  content: "";
  position: absolute;
  top: 0;
  display: inline-block;
  width: 22vw;
  height: 22vw;
  background-image: url(../img/plan/triangle_sp.png);
  background-size: contain;
}
.plan:before {
  left: 0;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.plan:after {
  right: 0;
}

.plan-heading {
  margin-bottom: 9.3333333333vw;
}

.plan-logo {
  margin: 0 auto 2vw auto;
  width: 31.7333333333vw;
}

.plan-ttl {
  margin: 0 auto 2.6666666667vw auto;
  width: 60.2666666667vw;
}

.plan-catch {
  margin: 0 auto;
  width: 46.4vw;
}

@media screen and (max-width: 750px) {
  .plan-lead {
    width: 80.6666666667vw;
  }
}
@media screen and (min-width: 751px) {
  .plan {
    padding: 5.5555555556vw 0 6.9444444444vw 0;
  }
  .plan:before, .plan:after {
    width: 9.0277777778vw;
    height: 9.0277777778vw;
    background-image: url(../img/plan/triangle.png);
    background-image: image-set(url(../img/plan/triangle.png) 1x, url(../img/plan/triangle-2x.png) 2x);
    background-image: -webkit-image-set(url(../img/plan/triangle.png) 1x, url(../img/plan/triangle-2x.png) 2x);
  }
  .plan-heading {
    margin-bottom: 3.4722222222vw;
  }
  .plan-logo {
    margin: 0 auto 1.0416666667vw auto;
    width: 16.5277777778vw;
  }
  .plan-ttl {
    margin: 0 auto 1.3888888889vw auto;
    width: 31.3888888889vw;
  }
  .plan-catch {
    margin: 0 auto 1.3888888889vw auto;
    width: 24.1666666667vw;
  }
}
@media screen and (min-width: 1501px) {
  .plan {
    padding: 80px 0 100px 0;
  }
  .plan:before, .plan:after {
    width: 130px;
    height: 130px;
  }
  .plan-heading {
    margin-bottom: 50px;
  }
  .plan-logo {
    margin: 0 auto 15px auto;
    width: 238px;
  }
  .plan-ttl {
    margin: 0 auto 20px auto;
    width: 452px;
  }
  .plan-catch {
    margin: 0 auto 20px auto;
    width: 348px;
  }
}
/*  #reform
-------------------------------------------------------------------------------*/
.reform {
  position: relative;
  padding: 13.3333333333vw 0;
  background: repeating-linear-gradient(90deg, #cff2ff, #cff2ff 4vw, #daf6ff 3.3333333333vw, #daf6ff 7.3333333333vw);
}

.reform-label {
  position: relative;
  margin: 0 auto 4vw auto;
  width: 52.4vw;
}
.reform-label:before, .reform-label:after {
  content: "";
  position: absolute;
  display: inline-block;
  background-image: url(../img/reform/kirakira.svg);
  background-size: contain;
}
.reform-label:before {
  top: 5.3333333333vw;
  left: -8.6666666667vw;
  width: 7.2vw;
  height: 7.2vw;
}
.reform-label:after {
  top: -2.6666666667vw;
  right: -7.3333333333vw;
  width: 9.7333333333vw;
  height: 9.7333333333vw;
}

.reform-catch {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto 4vw auto;
  width: 85.3333333333vw;
  height: 10.6666666667vw;
  background-color: #ffffff;
  border-radius: 0.5333333333vw;
}
.reform-catch:after {
  content: "";
  position: absolute;
  top: -6vw;
  right: -4.6666666667vw;
  display: inline-block;
  width: 11.8666666667vw;
  height: 18vw;
  background-image: url(../img/reform/pickup.svg);
  background-size: contain;
  z-index: 1;
}
.reform-catch p {
  position: relative;
  color: #00508e;
  font-family: "ZenKakuGothicNew", sans-serif;
  font-size: 4.2666666667vw;
  font-weight: 900;
  line-height: 10.6666666667vw;
  letter-spacing: 0.1em;
  overflow: hidden;
}
.reform-catch p:before, .reform-catch p:after {
  content: "";
  position: absolute;
  left: 50%;
  display: inline-block;
  width: 86.2666666667vw;
  height: 3.0666666667vw;
  background-image: url(../img/reform/line.svg);
  background-size: contain;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.reform-catch p:before {
  top: -2.1333333333vw;
}
.reform-catch p:after {
  bottom: -2.1333333333vw;
}

.reform-ttl {
  margin: 0 auto;
  width: 75.8666666667vw;
}

.reform-lead {
  width: 80vw;
}

@media screen and (min-width: 751px) {
  .reform {
    background: repeating-linear-gradient(90deg, #cff2ff, #cff2ff 2.0833333333vw, #daf6ff 1.7361111111vw, #daf6ff 3.8194444444vw);
    padding: 6.9444444444vw 0;
  }
  .reform-label {
    margin: 0 auto 1.0416666667vw auto;
    width: 25.625vw;
  }
  .reform-label:before {
    top: 1.7361111111vw;
    left: -4.8611111111vw;
    width: 2.9166666667vw;
    height: 3.0555555556vw;
  }
  .reform-label:after {
    top: -1.25vw;
    right: -3.4722222222vw;
    width: 4.1666666667vw;
    height: 4.3055555556vw;
  }
  .reform-catch {
    margin: 0 auto 2.0833333333vw auto;
    width: 36.1111111111vw;
    height: 5.5555555556vw;
    border-radius: 0.2777777778vw;
  }
  .reform-catch:after {
    top: -2.0833333333vw;
    right: -3.6111111111vw;
    width: 5.4861111111vw;
    height: 8.2638888889vw;
  }
  .reform-catch p {
    font-size: 2.0833333333vw;
    line-height: 5.5555555556vw;
  }
  .reform-catch p:before, .reform-catch p:after {
    width: 33.6111111111vw;
    height: 1.1111111111vw;
  }
  .reform-catch p:before {
    top: -0.5555555556vw;
  }
  .reform-catch p:after {
    bottom: -0.5555555556vw;
  }
  .reform-ttl {
    width: 39.5138888889vw;
  }
  .reform-lead {
    width: 38.8888888889vw;
  }
}
@media screen and (min-width: 1501px) {
  .reform {
    background: repeating-linear-gradient(90deg, #cff2ff, #cff2ff 30px, #daf6ff 25px, #daf6ff 55px);
    padding: 100px 0;
  }
  .reform-label {
    margin: 0 auto 15px auto;
    width: 369px;
  }
  .reform-label:before {
    top: 25px;
    left: -70px;
    width: 42px;
    height: 44px;
  }
  .reform-label:after {
    top: -18px;
    right: -50px;
    width: 60px;
    height: 62px;
  }
  .reform-catch {
    margin: 0 auto 30px auto;
    width: 520px;
    height: 80px;
    border-radius: 4px;
  }
  .reform-catch:after {
    top: -30px;
    right: -52px;
    width: 79px;
    height: 119px;
  }
  .reform-catch p {
    font-size: 3rem;
    line-height: 80px;
  }
  .reform-catch p:before, .reform-catch p:after {
    width: 484px;
    height: 16px;
  }
  .reform-catch p:before {
    top: -8px;
  }
  .reform-catch p:after {
    bottom: -8px;
  }
  .reform-ttl {
    width: 569px;
  }
  .reform-lead {
    width: 560px;
  }
}
/*  #works
-------------------------------------------------------------------------------*/
.works {
  position: relative;
  padding: 10vw 0 13.3333333333vw 0;
  background-color: #fde7d6;
  overflow: hidden;
}
.works:before {
  content: "";
  position: absolute;
  top: -10.6666666667vw;
  left: 0;
  display: inline-block;
  width: 100vw;
  height: 41.0666666667vw;
  background-image: url(../img/works/confetti_sp.png);
  background-size: contain;
}

.works-heading {
  position: relative;
  margin-bottom: 6.6666666667vw;
}
.works-heading:before, .works-heading:after {
  content: "";
  position: absolute;
  display: inline-block;
  background-size: contain;
}
.works-heading:before {
  top: 14.4vw;
  left: 16vw;
  width: 5.8666666667vw;
  height: 14.9333333333vw;
  background-image: url(../img/works/hammer.svg);
  -webkit-transform: rotate(-21.85deg);
          transform: rotate(-21.85deg);
}
.works-heading:after {
  top: 14.4vw;
  right: 16vw;
  width: 4.6666666667vw;
  height: 15.0666666667vw;
  background-image: url(../img/works/wrench.svg);
  -webkit-transform: rotate(18.25deg);
          transform: rotate(18.25deg);
}

.works-catch {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto 4vw auto;
  width: 78.6666666667vw;
  height: 14.9333333333vw;
  color: #ff5400;
  font-family: "ZenKakuGothicNew", sans-serif;
  font-size: 7.4666666667vw;
  font-weight: 900;
  line-height: 1em;
}
.works-catch span.num {
  position: relative;
  top: -0.1em;
  display: inline-block;
  margin: 0 0.1em;
  font-size: 11.2vw;
}
.works-catch:before, .works-catch:after {
  content: "";
  position: absolute;
  top: 0;
  display: inline-block;
  width: 6vw;
  height: 14.9333333333vw;
  background-image: url(../img/works/frame.svg);
  background-size: contain;
}
.works-catch:before {
  left: 0;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.works-catch:after {
  right: 0;
}

.works-ttl {
  margin: 0 auto;
  width: 34.9333333333vw;
}

.works-lead {
  width: 80vw;
}

@media screen and (min-width: 751px) {
  .works {
    padding: 4.1666666667vw 0;
  }
  .works:before {
    top: -3.4722222222vw;
    left: 0.4861111111vw;
    width: 52.3611111111vw;
    height: 17.9166666667vw;
    background-image: url(../img/works/confetti.png);
    background-image: image-set(url(../img/works/confetti.png) 1x, url(../img/works/confetti-2x.png) 2x);
    background-image: -webkit-image-set(url(../img/works/confetti.png) 1x, url(../img/works/confetti-2x.png) 2x);
  }
  .works-heading {
    margin-bottom: 3.4722222222vw;
  }
  .works-heading:before {
    top: 3.4722222222vw;
    left: 3.4722222222vw;
    width: 3.3333333333vw;
    height: 8.5416666667vw;
  }
  .works-heading:after {
    top: 4.8611111111vw;
    right: 4.1666666667vw;
    width: 2.0833333333vw;
    height: 6.5277777778vw;
  }
  .works-catch {
    margin-bottom: 0.3472222222vw;
    width: 29.1666666667vw;
    height: 5.5555555556vw;
    font-size: 2.7777777778vw;
  }
  .works-catch span.num {
    font-size: 4.1666666667vw;
  }
  .works-catch:before, .works-catch:after {
    width: 2.2222222222vw;
    height: 5.5555555556vw;
  }
  .works-ttl {
    width: 18.1944444444vw;
  }
  .works-lead {
    width: 38.8888888889vw;
  }
}
@media screen and (min-width: 1501px) {
  .works {
    padding: 60px 0;
  }
  .works:before {
    top: -50px;
    left: 7px;
    width: 754px;
    height: 258px;
  }
  .works-heading {
    margin-bottom: 50px;
  }
  .works-heading:before {
    top: 50px;
    left: 50px;
    width: 48px;
    height: 123px;
  }
  .works-heading:after {
    top: 70px;
    right: 60px;
    width: 30px;
    height: 94px;
  }
  .works-catch {
    margin-bottom: 5px;
    width: 420px;
    height: 80px;
    font-size: 4rem;
  }
  .works-catch span.num {
    font-size: 6rem;
  }
  .works-catch:before, .works-catch:after {
    width: 32px;
    height: 80px;
  }
  .works-ttl {
    width: 262px;
  }
  .works-lead {
    width: 560px;
  }
}
/*  #tips
-------------------------------------------------------------------------------*/
.tips {
  position: relative;
  padding: 10.6666666667vw 0 13.3333333333vw 0;
  background-image: url(../img/common/dot_sp.jpg);
  background-repeat: repeat;
}
.tips:before, .tips:after {
  content: "";
  position: absolute;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 4.1333333333vw;
  background-size: contain;
  background-image: url(../img/tips/line_sp.png);
  background-size: auto 4.1333333333vw;
  background-repeat: repeat-x;
}
.tips:before {
  top: 0;
}
.tips:after {
  bottom: 0;
}

.tips-heading {
  position: relative;
  margin-bottom: 6vw;
  padding-top: 16.6666666667vw;
}
.tips-heading:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-block;
  width: 13.4666666667vw;
  height: 12.1333333333vw;
  background-image: url(../img/common/mark.svg);
  background-size: contain;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.tips-catch {
  position: relative;
  margin: 0 auto 2vw auto;
  width: 70vw;
  color: #00508e;
  font-family: "ZenKakuGothicNew", sans-serif;
  font-size: 4.2666666667vw;
  font-weight: 900;
  text-align: center;
  line-height: 1.33em;
  letter-spacing: 0.1em;
}
.tips-catch:before, .tips-catch:after {
  content: "";
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 4.1333333333vw;
  height: 5.8666666667vw;
  background-size: contain;
  background-image: url(../img/common/deco.svg);
}
.tips-catch:before {
  left: 0;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.tips-catch:after {
  right: 0;
}

.tips-ttl {
  color: #ff6511;
  font-size: 8.5333333333vw;
  font-weight: 900;
  text-align: center;
  line-height: 1.2em;
}
.tips-ttl span.logo {
  position: relative;
  top: -0.1em;
  display: inline-block;
  margin-right: 1.2vw;
}
.tips-ttl span.logo img {
  width: auto;
  height: 7.7333333333vw;
}

@media screen and (min-width: 751px) {
  .tips {
    padding: 4.1666666667vw 0 5.5555555556vw 0;
    background-image: url(../img/common/dot.jpg);
    background-image: image-set(url(../img/common/dot.jpg) 1x, url(../img/common/dot-2x.jpg) 2x);
    background-image: -webkit-image-set(url(../img/common/dot.jpg) 1x, url(../img/common/dot-2x.jpg) 2x);
  }
  .tips:before, .tips:after {
    height: 2.0833333333vw;
    background-image: url(../img/tips/line.png);
    background-image: image-set(url(../img/tips/line.png) 1x, url(../img/tips/line-2x.png) 2x);
    background-image: -webkit-image-set(url(../img/tips/line.png) 1x, url(../img/tips/line-2x.png) 2x);
    background-size: auto 2.0833333333vw;
  }
  .tips-heading {
    margin-bottom: 3.4722222222vw;
    padding-top: 6.3888888889vw;
  }
  .tips-heading:before {
    width: 5.4861111111vw;
    height: 5vw;
  }
  .tips-catch {
    margin-bottom: 1.0416666667vw;
    width: 34.7222222222vw;
    font-size: 2.0833333333vw;
  }
  .tips-catch:before, .tips-catch:after {
    width: 1.9444444444vw;
    height: 2.8472222222vw;
  }
  .tips-ttl {
    font-size: 4.4444444444vw;
  }
  .tips-ttl span.logo {
    margin-right: 0.625vw;
  }
  .tips-ttl span.logo img {
    height: 4.0277777778vw;
  }
}
@media screen and (min-width: 1501px) {
  .tips {
    padding: 60px 0 80px 0;
  }
  .tips:before, .tips:after {
    height: 30px;
    background-size: auto 30px;
  }
  .tips-heading {
    margin-bottom: 50px;
    padding-top: 92px;
  }
  .tips-heading:before {
    width: 79px;
    height: 72px;
  }
  .tips-catch {
    margin-bottom: 15px;
    width: 500px;
    font-size: 3rem;
  }
  .tips-catch:before, .tips-catch:after {
    width: 28px;
    height: 41px;
  }
  .tips-ttl {
    font-size: 6.4rem;
  }
  .tips-ttl span.logo {
    margin-right: 9px;
  }
  .tips-ttl span.logo img {
    height: 58px;
  }
}
/*  #gas
-------------------------------------------------------------------------------*/
.gas {
  padding: 13.3333333333vw 0;
  background-color: #ededed;
}

.gas-heading {
  position: relative;
  margin-bottom: 8.6666666667vw;
}
.gas-heading:before, .gas-heading:after {
  content: "";
  position: absolute;
  bottom: -1.8666666667vw;
  display: inline-block;
  background-size: contain;
}
.gas-heading:before {
  left: 1.3333333333vw;
  width: 15.2vw;
  height: 12.1333333333vw;
  background-image: url(../img/gas/pump.svg);
}
.gas-heading:after {
  right: 1.3333333333vw;
  width: 11.4666666667vw;
  height: 23.3333333333vw;
  background-image: url(../img/gas/tank.svg);
}

.gas-catch {
  position: relative;
  margin: 0 auto 2vw auto;
  width: 61.3333333333vw;
  color: #00508e;
  font-family: "ZenKakuGothicNew", sans-serif;
  font-size: 4.2666666667vw;
  font-weight: 900;
  text-align: center;
  line-height: 1.33em;
  letter-spacing: 0.1em;
}
.gas-catch:before, .gas-catch:after {
  content: "";
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 4.1333333333vw;
  height: 5.8666666667vw;
  background-size: contain;
  background-image: url(../img/common/deco.svg);
}
.gas-catch:before {
  left: 0;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.gas-catch:after {
  right: 0;
}

.gas-ttl {
  margin-left: auto;
  margin-right: auto;
  width: 52.1333333333vw;
}

@media screen and (min-width: 751px) {
  .gas {
    padding: 5.5555555556vw 0;
  }
  .gas-heading {
    margin-bottom: 3.4722222222vw;
  }
  .gas-heading:before, .gas-heading:after {
    bottom: -0.8333333333vw;
  }
  .gas-heading:before {
    left: -1.0416666667vw;
    width: 7.9166666667vw;
    height: 6.3194444444vw;
  }
  .gas-heading:after {
    right: -1.0416666667vw;
    width: 5.9722222222vw;
    height: 12.1527777778vw;
  }
  .gas-catch {
    margin-bottom: 1.0416666667vw;
    width: 33.3333333333vw;
    font-size: 2.0833333333vw;
  }
  .gas-catch:before, .gas-catch:after {
    width: 1.9444444444vw;
    height: 2.8472222222vw;
  }
  .gas-ttl {
    width: 27.1527777778vw;
  }
}
@media screen and (min-width: 1501px) {
  .gas {
    padding: 80px 0;
  }
  .gas-heading {
    margin-bottom: 50px;
  }
  .gas-heading:before, .gas-heading:after {
    bottom: -12px;
  }
  .gas-heading:before {
    left: -15px;
    width: 114px;
    height: 91px;
  }
  .gas-heading:after {
    right: -15px;
    width: 86px;
    height: 175px;
  }
  .gas-catch {
    margin-bottom: 15px;
    width: 480px;
    font-size: 3rem;
  }
  .gas-catch:before, .gas-catch:after {
    width: 28px;
    height: 41px;
  }
  .gas-ttl {
    width: 391px;
  }
}
/* ------------------------------------------- box - */
.gas-box {
  position: relative;
}

.gas-box:nth-of-type(n + 2) {
  margin-top: 6.6666666667vw;
}

.gas-box-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 13.3333333333vw;
  border-radius: 5.3333333333vw 5.3333333333vw 0 0;
}

.gas-box--useful .gas-box-heading {
  background-color: #116cb0;
}

.gas-box--service .gas-box-heading {
  background-color: #5fb071;
}

.gas-box--information .gas-box-heading {
  background-color: #ff5400;
}

.gas-box-ttl {
  color: #ffffff;
  font-size: 3.2vw;
  font-weight: 900;
  text-align: center;
  line-height: 1.5em;
}
.gas-box-ttl span {
  display: inline-block;
  font-size: 4.8vw;
}

.gas-box-content {
  position: relative;
  padding: 5.3333333333vw 4.6666666667vw 6.6666666667vw 4.6666666667vw;
  background-color: #ffffff;
  border-radius: 0 0 5.3333333333vw 5.3333333333vw;
}

.gas-box-slide {
  position: relative;
}
.gas-box-slide .slide-prev {
  left: -9.3333333333vw;
}
.gas-box-slide .slide-next {
  right: -9.3333333333vw;
}

.gas-slide {
  position: relative;
  overflow: hidden;
}

.p-gas {
  margin-right: 4.6666666667vw;
  width: 100%;
  height: auto;
}

.p-gas a {
  display: block !important;
}

@media screen and (max-width: 750px) {
  .gas-box {
    margin-left: auto;
    margin-right: auto;
    width: 85.3333333333vw;
  }
  .gas-slide {
    margin-left: auto;
    margin-right: auto;
    width: 70.6666666667vw;
  }
}
@media screen and (min-width: 751px) {
  .gas-box:nth-of-type(n + 2) {
    margin-top: 2.7777777778vw;
  }
  .gas-box-heading {
    height: 6.9444444444vw;
    border-radius: 2.7777777778vw 2.7777777778vw 0 0;
  }
  .gas-box-ttl {
    font-size: 1.6666666667vw;
  }
  .gas-box-ttl span {
    font-size: 2.5vw;
  }
  .gas-box-content {
    padding: 2.7777777778vw;
    border-radius: 0 0 2.7777777778vw 2.7777777778vw;
  }
  .gas-box-slide .slide-prev {
    left: -3.6805555556vw;
  }
  .gas-box-slide .slide-next {
    right: -3.6805555556vw;
  }
  .p-gas {
    margin-right: 1.3888888889vw;
    width: 18.75vw;
  }
}
@media screen and (min-width: 1501px) {
  .gas-box:nth-of-type(n + 2) {
    margin-top: 40px;
  }
  .gas-box-heading {
    height: 100px;
    border-radius: 40px 40px 0 0;
  }
  .gas-box-ttl {
    font-size: 2.4rem;
  }
  .gas-box-ttl span {
    font-size: 3.6rem;
  }
  .gas-box-content {
    padding: 40px;
    border-radius: 0 0 40px 40px;
  }
  .gas-box-slide .slide-prev {
    left: -53px;
  }
  .gas-box-slide .slide-next {
    right: -53px;
  }
  .p-gas {
    margin-right: 20px;
    width: 270px;
  }
}