@charset "UTF-8";

/*============================================================================
  Style for [Page - VOLTA]
============================================================================*/

/*------------------------------------
  common
------------------------------------*/
.sv-container {
  width: 100%;
  height: 280px;
  margin-top: -60px;
  background: #f2f5fa;
  text-align: center;
}
  .sv-container h1 {
    margin: 0 16% 2.4rem;
    padding-top: 120px;
    text-align: center;
  }
    .sv-container h1 .h1head {
      font-family: din-2014, YakuHanJP, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
    	color: #004098;
    	font-size: 5.6rem;
    	font-weight: 700;
      line-height: 1.0;
      letter-spacing: 0.2rem;
    }
        .sv-container h1 .h1head.ja {
          font-size: 5.2rem;
        }
    .sv-container h1 .h1sub {
      margin-top: 1.6rem;
      font-family: din-2014, YakuHanJP, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
    	color: #2a85e8;
    	font-size: 2.0rem;
    	font-weight: 700;
    }

.stripe {
  padding: 5.0rem 0;
}

/*
------------------------------------*/
.p-volta h2 .h2sub {
  color: #61aa31;
}
.p-volta .sv-container {
  height: 20vw;
  margin-top: 0;
  text-align: left;
  background: url(../images/volta/volta_mv_bg.jpg) right 50%  no-repeat #111;
  background-size: auto 23vw;
  position: relative;
}
  .p-volta .sv-container .textBox {
    width: 50%;
    height: 20vw;
    margin: 0;
    padding: 5.4vw 0 0 16%;
    color: #fff;

    background: #111;
  }
  .p-volta .sv-container .textBox::after {
    content: '';
    width: 7vw;
    height: 20vw;
    background: url(../images/volta/volta_mv_gz.svg) left top/contain no-repeat;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 100;
  }
  .p-volta .sv-container h1 {
    width: 100%;
    min-width: auto;
    margin: 0;
    padding: 0 0 2.4rem;
    text-align: left;
  }
    .p-volta .sv-container h1 .h1head {
      font-family: din-2014, YakuHanJP, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
    	color: #004098;
    	font-size: 4.0rem;
    	font-weight: 700;
      line-height: 1.0;
      letter-spacing: 0.2rem;
    }
        .p-volta .sv-container h1 .h1head.ja {
          font-size: 3.2rem;
        }
    .p-volta .sv-container h1 .h1sub {
      margin-top: 0;
      font-family: YakuHanJP, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
    	color: #fff;
    	font-size: 1.6vw;
    	font-weight: 700;
    }
    .p-volta .sv-container h1 .h1head {
      height: 4.8vw;
      margin-top: 1.6vw;
      color: #fff;
    }
      .p-volta .sv-container h1 .h1head img {
        height: 100%;
      }
      .p-volta .sv-container h1 .h1head span {
        font-size: 2.0vw;
        margin-left: 1.0em;
        vertical-align: middle;
      }

  .p-volta main .inner {
    min-width: auto;
    max-width: auto;
    margin: 0 16%;
  }
  .p-volta main h3 {
    margin: 4.0rem 0 2.0rem;
    color: #004098;
  }
    .p-volta main h4 {
      margin: 1.2rem 0;
    }

.p-volta .stripe.intro {
}
  .p-volta .stripe.intro .inner {
    display: flex;
    align-items: center;
    justify-content: center;
  }
    .stripe.intro .intro_box.textBox {
      width: 42%;
      margin-right: 8%;
    }
    .stripe.intro .intro_box.imgBox {
      width: 50%;
      vertical-align: middle;
    }
    .stripe.intro .intro_box.imgBox img {
      width: 100%;
    }
  .p-volta .stripe.intro h2 {
    margin: 0 0 4.2rem;
    text-align: left;
  }

  .p-volta .stripe.intro h3 {
    margin: 0 0 2.4rem;
    color: #111;
    text-align: left;
  }

.p-volta .stripe.point {
  background: #f7f9fc;
}
  .stripe.point .v-p_list ul {
    display: flex;
    margin-top: 6.0rem;
  }
    .stripe.point .v-p_list ul li {
      width: 25%;
      padding: 10.0rem 2% 0;
      background-position: top center;
      background-repeat: no-repeat;
      background-size: auto 8.0rem;
    }
    .stripe.point .v-p_list ul li.v-p_li1 { background-image: url(../images/volta/volta_pt1.png); }
    .stripe.point .v-p_list ul li.v-p_li2 { background-image: url(../images/volta/volta_pt2.png); }
    .stripe.point .v-p_list ul li.v-p_li3 { background-image: url(../images/volta/volta_pt3.png); }
    .stripe.point .v-p_list ul li.v-p_li4 { background-image: url(../images/volta/volta_pt4.png); }

    .stripe.point .v-p_list ul li h3 {
      margin-top: 0;
      color: #61aa31;
      text-align: center;
      font-size: 1.4rem;
    }
    .stripe.point .v-p_list ul li .v-p_text {
      font-size: 1.2rem;
      line-height: 1.8;
    }

  .stripe.point .v-p_list .cap {
    margin: 0.6rem 0 0 0;
    color: #666;
    font-size: 1.0rem;
  }

.p-volta .stripe.usecase {
}
.stripe.usecase .textBox {
  line-height: 1.8;
}
  .stripe.usecase h3 {
    padding: 2.0rem;
    color: #61aa31;
    font-size: 2.0rem;
    border: 1px solid #61aa31;
  }
    .stripe.usecase h3 + .textBox {
      padding: 1.0rem 2.0rem;
    }
    .stripe.usecase h4 {
      font-size: 1.8rem;
    }


  .stripe.usecase .note {
    padding: 1.8rem;
    color: #666;
    font-size: 1.4rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f5f5f5;
  }
    .stripe.usecase .note ul {
      margin-top: 0.8rem;
    }
      .stripe.usecase .note ul li {
        margin: 0.3rem 0 0 2.0rem;
        list-style-type: disc;
        list-style-position: outside;
      }
  .stripe.usecase .v-uc_taxi1 {
    margin: 0 0 6.0rem;
  }
    .stripe.usecase .v-uc_taxi1 .imgBox {
      width: 680px;
      margin: 5.0rem 0;
    }
      .stripe.usecase .v-uc_taxi1 .imgBox img { width:100%; }
  .stripe.usecase .v-uc_taxi2 {
    margin: 3.0rem 0;
  }
    .stripe.usecase .v-uc_taxi2 dl dt {
      margin: 1.8rem 0 0.8rem;
      font-size: 1.4rem;
      font-weight: 600;
    }
  .stripe.usecase .v-uc_app {
  }
    .stripe.usecase .v-uc_app .cap {
      margin-top: 1.6rem;
      color: #666;
      font-size: 1.4rem;
    }
  .stripe.usecase .textBox.v-uc_bike {
    margin-bottom: 6.0rem;
  }
  .stripe.usecase .v-uc_hst {
  }
    .stripe.usecase .v-uc_hst table {
      border-collapse: collapse;
      border: 3px solid #e6e6e6;
    }
      .stripe.usecase .v-uc_hst table th,
      .stripe.usecase .v-uc_hst table td {
        padding: 1.0em;
        font-size: 1.4rem;
        text-align: center;
        white-space: nowrap;
        border: 1px solid #e6e6e6;
      }
        .stripe.usecase .v-uc_hst table th {
          background: #f7f7f7;
        }
        .stripe.usecase .v-uc_hst table td.cl {
          width: 6.0em;
        }
        .stripe.usecase .v-uc_hst table td.sj {
          text-align: left;
          white-space: normal;
        }
          .stripe.usecase .v-uc_hst table td.sj hr {
            margin: 1.0em 0;
            border: 0 none;
            height: 1px;
            background: #e6e6e6;
          }
    .stripe.usecase .v-uc_hst dl {
      margin: 3.0rem 0;
      font-size: 1.4rem;
    }
      .stripe.usecase .v-uc_hst dd {
        margin: 0.4rem 0 1.8rem;
      }

  .p-volta .stripe.info {
    background: #f7f9fc;
  }
    .stripe.info .v-i_feat {
      display: flex;
      flex-wrap: wrap;
    }
    .v-i_feat .feat_box {
      width: 48%;
      margin: 0 2% 2% 0;
      padding: 2.4rem;
      background: #fff;
      border-radius: 8px;
    }
      .v-i_feat .feat_box h3 {
        margin-top: 0;
      }

    .stripe.info .textBox {
      margin: 2.0rem auto 6.0rem;
    }
    .stripe.info .textBox ul li {
     margin: 0.4rem 0 0.4rem 2.0rem;
     list-style-type: disc;
     list-style-position: outside;
    }
    .stripe.info .v-i_pat {
      margin: inherit 24%;
    }


/* =======================================================

  MediaQueries

======================================================= */
/*------------------------------------
  for max:1279px
------------------------------------*/
@media screen and (max-width: 1279px) {

  .stripe.point .v-p_list ul {
    flex-wrap: wrap;
  }
  .stripe.point .v-p_list ul li {
    width: 50%;
    margin-bottom: 4.0rem;
  }

  .stripe.intro .intro_box.textBox {
    width: 36%;
    margin-right: 8%;
  }
  .stripe.intro .intro_box.imgBox {
    width: 56%;
  }


}

/*------------------------------------
  for Tab [max:９７９px]
------------------------------------*/
@media screen and (max-width: 979px) {

  .p-volta .sv-container .textBox {
    padding: 5.4vw 0 0 8%;
  }
  .p-volta .sv-container h1 .h1sub {
    font-size: 1.8vw;
  }
  .p-volta .sv-container h1 .h1head {
    margin-top: 1.0vw;
  }
    .p-volta .sv-container h1 .h1head span {
      vertical-align: baseline;
    }

  .p-volta main {
    font-size: 1.4rem;
  }
  .p-volta main .inner {
    margin: 0 8%;
  }
  .p-volta .stripe.intro .inner {
    display: block;
  }
  .p-volta .stripe.intro h3 {
    font-size: 1.6rem;
  }
  .stripe.intro .intro_box.textBox {
    width: 100%;
    margin-right: 0;
  }
  .stripe.intro .intro_box.imgBox {
    width: 100%;
  }

  .stripe.usecase .v-uc_taxi1 .imgBox {
    width: auto;
  }
  .stripe.usecase .v-uc_taxi2 dl dd img {
    width: 100%;
    max-width: 579px;
  }
  .stripe.usecase .v-uc_app img {
    width: 100%;
    max-width: 579px;
  }
  .stripe.usecase .v-uc_bike img {
    width: 100%;
    max-width: 545px;
  }

}

/*------------------------------------
  for Mobile [max:639px]
------------------------------------*/
@media screen and (max-width: 639px) {

  .p-volta .sv-container {
    height: 54vw;
    background: url(../images/volta/volta_mv_bg.jpg) 0 50%  no-repeat #111;
    background-size: cover;
  }

  .p-volta .sv-container .textBox {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 2.4rem 8%;
  }
  .p-volta .sv-container .textBox::after {
    display: none;
  }
  .p-volta .sv-container h1 {
    padding: 0;
  }
    .p-volta .sv-container h1 .h1sub {
      font-size: 1.4rem;
    }
    .p-volta .sv-container h1 .h1head {
      height: auto;
      margin-top: 0.4rem;
    }
      .p-volta .sv-container h1 .h1head img {
        height: 32px;
      }
      .p-volta .sv-container h1 .h1head span {
        font-size: 1.2rem;
      }

  .p-volta main .inner {
    margin: 0 4%;
  }

  .p-volta .stripe.usecase h3 {
    padding: 1.0em;
    font-size: 1.6rem;
  }
  .p-volta .stripe.usecase h4 {
      font-size: 1.4rem;
  }
  .stripe.usecase .v-uc_taxi1 .imgBox {
      margin: 2.0rem 0;
  }
  .stripe.usecase .v-uc_taxi2 {
    margin: 1.4rem 0;
  }
  .stripe.usecase .v-uc_taxi2 dl dt {
      font-size: 1.2rem;
  }

  .stripe.usecase .v-uc_hst {
  }
      .stripe.usecase .v-uc_hst table th,
      .stripe.usecase .v-uc_hst table td {
        padding: 0.4em;
        font-size: 1.2rem;
        letter-spacing: 0.05rem;
      }
        .stripe.usecase .v-uc_hst table td.cl {
          width: 5.0em;
        }
          .stripe.usecase .v-uc_hst table td.sj hr {
            margin: 0.6em 0;
          }
      .stripe.usecase .v-uc_hst dt,
      .stripe.usecase .v-uc_hst dd {
        font-size: 1.2rem;
      }

  .stripe.info .v-i_feat {
      display: block;
  }
  .v-i_feat .feat_box {
      width: 100%;
      margin: 0 0 1.0rem;
      padding: 2.0rem;
  }
  .stripe.info .v-i_feat h3 {
    margin: 0 0 1.0rem;
    font-size: 1.4rem;
  }
  .stripe.info .v-i_feat ul li {
    font-size: 1.2rem;
  }
  .stripe.info .v-i_pat {
    margin: 1.6rem 8%;
  }



}