@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

*, h1, h2, h3, h4, h5, p {
  padding: 0;
  margin: 0;
}

html {
  font-size: 10px;
  overflow-y: scroll;
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  html {
    overflow-x: hidden;
    width: 100%;
  }
}

body {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  body {
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  body {
    overflow-x: hidden;
    width: 100%;
  }
}

a {
  text-decoration: none;
}

ul, li {
  list-style: none;
}

*:focus {
  outline: none;
}

img {
  vertical-align: bottom;
  border: 0px;
  width: 100%;
  height: 100%;
}

section {
  position: relative;
}

.pc-none {
  display: none;
}
@media screen and (min-width: 1501px) {
  .pc-none {
    display: none;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1500px) {
  .pc-none {
    display: none;
  }
}
@media screen and (min-width: 961px) and (max-width: 1280px) {
  .pc-none {
    display: none;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .pc-none {
    display: block;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .pc-none {
    display: block;
  }
}
@media screen and (max-width: 375px) {
  .pc-none {
    display: block;
  }
}

.sp-none {
  display: block;
}
@media screen and (min-width: 1501px) {
  .sp-none {
    display: block;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1500px) {
  .sp-none {
    display: block;
  }
}
@media screen and (min-width: 961px) and (max-width: 1280px) {
  .sp-none {
    display: block;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .sp-none {
    display: none;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .sp-none {
    display: none;
  }
}
@media screen and (max-width: 375px) {
  .sp-none {
    display: none;
  }
}

/****************************************
		1. General Setting
*****************************************/
html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption,
tbody, tfoot, thead, table, label, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  list-style: none;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

html {
  background-color: #fff;
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  html {
    width: 99%;
    margin: 0 auto;
  }
}

body {
  font-family: "Noto Sans JP", "Inconsolata", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ms pgothic", "osaka", sans-serif;
  font-size: 14px;
  color: #000;
}

img {
  vertical-align: text-bottom;
}

iframe {
  width: 100% !important;
}

.clear {
  clear: both;
  line-height: 0;
}

/****************************************
costomize_propety
*****************************************/
header {
  background-color: #000 !important;
}

main {
  background-color: #fff !important;
  top: 0 !important;
}
h1 {
  display: block;
  width: 100%;
}
h1 img {
  display: block;
  width: 100%;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  h1 img {
    width: 120%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    right: 12%;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  h1 img {
    width: 120%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    right: 12%;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  h1 img {
    width: 120%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    right: 12%;
  }
}
@media screen and (max-width: 375px) {
  h1 img {
    width: 120%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    right: 12%;
  }
}

.second_view {
  width: 85%;
  margin: 70px auto 0;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .second_view {
    width: 90%;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .second_view {
    width: 90%;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .second_view {
    width: 95%;
  }
}
@media screen and (max-width: 375px) {
  .second_view {
    width: 95%;
  }
}
.second_view h2 {
  color: #fff;
  font-weight: bold;
  font-size: 46px;
  letter-spacing: 2.5px;
  margin: 120px 0 20px 0;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .second_view h2 {
    text-align: center;
    font-size: 6.4vw;
    padding: 15px 0;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .second_view h2 {
    text-align: center;
    font-size: 6.4vw;
    padding: 15px 0;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .second_view h2 {
    text-align: center;
    font-size: 6.4vw;
    padding: 15px 0;
  }
}
@media screen and (max-width: 375px) {
  .second_view h2 {
    text-align: center;
    font-size: 6.4vw;
    padding: 15px 0;
  }
}
.second_view .product-text {
  margin: 26px 0 0 0;
  font-size: 34px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 2px;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .second_view .product-text {
    margin: 26px 0 0 0;
    font-size: 4.8vw;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 2px;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .second_view .product-text {
    margin: 26px 0 0 0;
    font-size: 4.8vw;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 2px;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .second_view .product-text {
    margin: 26px 0 0 0;
    font-size: 4.8vw;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 2px;
  }
}
@media screen and (max-width: 375px) {
  .second_view .product-text {
    margin: 26px 0 0 0;
    font-size: 4.8vw;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 2px;
  }
}
.second_view .product-text p {
  margin: 0 0 38px 0;
}
.second_view .product-text p .green {
  color: #028b5f;
  font-weight: 600;
}

.product_list li {
  list-style: disc;
  margin: 0 0 0 45px;
  font-size: 34px;
  color: #028b5f;
  font-weight: 600;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .product_list li {
    font-size: 8vw;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .product_list li {
    font-size: 8vw;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .product_list li {
    font-size: 8vw;
    margin: 14px 0 0 30px;
    line-height: 1;
  }
}
@media screen and (max-width: 375px) {
  .product_list li {
    font-size: 8vw;
    margin: 14px 0 0 30px;
  }
}
.product_list li .sub {
  color: #222;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .product_list li .sub {
    font-size: 5vw;
    margin: 0;
    line-height: 0;
    padding: 0;
    position: relative;
    top: -5px;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .product_list li .sub {
    font-size: 5vw;
    margin: 0;
    line-height: 0;
    padding: 0;
    position: relative;
    top: -5px;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .product_list li .sub {
    font-size: 5vw;
    margin: 0;
    line-height: 0;
    padding: 0;
    position: relative;
    top: -5px;
  }
}
@media screen and (max-width: 375px) {
  .product_list li .sub {
    font-size: 5vw;
    margin: 0;
    line-height: 0;
    padding: 0;
    position: relative;
    top: -5px;
  }
}

h4 {
  display: block;
  width: 100%;
  margin: 120px 0 30px 0;
  font-size: 40px;
  letter-spacing: 2px;
  text-align: left;
  color: #028b5f;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  h4 {
    font-size: 7.2vw;
    margin: 120px 0 12px 0;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  h4 {
    font-size: 7.2vw;
    margin: 120px 0 12px 0;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  h4 {
    font-size: 7.2vw;
    margin: 120px 0 12px 0;
  }
}
@media screen and (max-width: 375px) {
  h4 {
    font-size: 7.2vw;
    margin: 120px 0 12px 0;
  }
}

.info-text {
  margin: 26px 0 0 0;
}
.info-text p {
  margin: 26px 0 0 0;
  font-size: 23px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 2px;
}

.spec_info {
  width: 75%;
  display: block;
  margin: 24px 0 0 0;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .spec_info {
    width: 100%;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .spec_info {
    width: 100%;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .spec_info {
    width: 100%;
  }
}
@media screen and (max-width: 375px) {
  .spec_info {
    width: 100%;
  }
}
.spec_info dt {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  font-size: 18px;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .spec_info dt {
    display: block;
    width: 100%;
    font-weight: bold;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .spec_info dt {
    display: block;
    width: 100%;
    font-weight: bold;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .spec_info dt {
    display: block;
    width: 100%;
    font-weight: bold;
  }
}
@media screen and (max-width: 375px) {
  .spec_info dt {
    display: block;
    width: 100%;
    font-weight: bold;
  }
}
.spec_info dd {
  display: inline-block;
  vertical-align: top;
  width: 69%;
  font-size: 18px;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .spec_info dd {
    display: block;
    margin: 0 0 22px 0px;
    width: 100%;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .spec_info dd {
    display: block;
    margin: 0 0 22px 0px;
    width: 100%;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .spec_info dd {
    display: block;
    margin: 0 0 22px 0px;
    width: 100%;
  }
}
@media screen and (max-width: 375px) {
  .spec_info dd {
    display: block;
    margin: 0 0 22px 0px;
    width: 100%;
  }
}

.img-box {
  margin: 0;
}
.img-box img {
  width: 60%;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .img-box img {
    width: 85%;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .img-box img {
    width: 85%;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .img-box img {
    width: 85%;
  }
}
@media screen and (max-width: 375px) {
  .img-box img {
    width: 85%;
  }
}

.third_view {
  width: 85%;
  margin: 150px auto 0;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .third_view {
    width: 90%;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .third_view {
    width: 90%;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .third_view {
    width: 95%;
  }
}
@media screen and (max-width: 375px) {
  .third_view {
    width: 95%;
  }
}
.third_view h2 {
  color: #fff;
  font-weight: bold;
  font-size: 46px;
  letter-spacing: 2.5px;
  margin: 120px 0 20px 0;
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .third_view h2 {
    text-align: center;
    font-size: 6.3vw;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .third_view h2 {
    text-align: center;
    font-size: 6.3vw;
  }
}
@media screen and (max-width: 375px) {
  .third_view h2 {
    text-align: center;
    font-size: 6.3vw;
  }
}
.third_view .product-text {
  margin: 26px 0 0 0;
  font-size: 34px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 2px;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .third_view .product-text {
    margin: 26px 0 0 0;
    font-size: 4.8vw;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 2px;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .third_view .product-text {
    margin: 26px 0 0 0;
    font-size: 4.8vw;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 2px;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .third_view .product-text {
    margin: 26px 0 0 0;
    font-size: 4.8vw;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 2px;
  }
}
@media screen and (max-width: 375px) {
  .third_view .product-text {
    margin: 26px 0 0 0;
    font-size: 4.8vw;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 2px;
  }
}
.third_view .product-text p {
  margin: 0 0 38px 0;
}
.third_view .product-text p .green {
  color: #028b5f;
  font-weight: 600;
}
.third_view .img-box {
  margin: 0;
}
.third_view .img-box .box01 {
  display: inline-block;
  width: 48%;
  margin: 0;
  vertical-align: top;
}
.third_view .img-box .box01 img {
  width: 100%;
  position: relative;
  margin: 0;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .third_view .img-box .box01 {
    display: block;
    width: 100%;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .third_view .img-box .box01 {
    display: block;
    width: 100%;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .third_view .img-box .box01 {
    display: block;
    width: 100%;
  }
}
@media screen and (max-width: 375px) {
  .third_view .img-box .box01 {
    display: block;
    width: 100%;
  }
}
.third_view .img-box .box02 {
  display: inline-block;
  width: 33%;
  margin: 0 0 0 50px;
  vertical-align: top;
}
.third_view .img-box .box02 img {
  width: 100%;
  position: relative;
  margin: 0;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .third_view .img-box .box02 {
    display: block;
    width: 100%;
    margin: 50px 0 0 0;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .third_view .img-box .box02 {
    display: block;
    width: 100%;
    margin: 50px 0 0 0;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .third_view .img-box .box02 {
    display: block;
    width: 100%;
    margin: 50px 0 0 0;
  }
}
@media screen and (max-width: 375px) {
  .third_view .img-box .box02 {
    display: block;
    width: 100%;
    margin: 50px 0 0 0;
  }
}
.third_view h3 {
  display: block;
  width: 100%;
  margin: 120px 0 30px 0;
  font-size: 50px;
  letter-spacing: 3px;
  text-align: left;
  color: #028b5f;
  border-bottom: 3px solid #028b5f;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .third_view h3 {
    font-size: 8.8vw;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .third_view h3 {
    font-size: 8.8vw;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .third_view h3 {
    font-size: 8.8vw;
  }
}
@media screen and (max-width: 375px) {
  .third_view h3 {
    font-size: 8.8vw;
  }
}
.third_view h3 .sub {
  color: #222;
  margin: 0px 0 0 23px;
  font-size: 32px;
  letter-spacing: 0px;
  font-weight: 500;
  position: relative;
  top: -5px;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .third_view h3 .sub {
    font-size: 4.5vw;
    margin: 0 0 0 3vw;
    top: -3px;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .third_view h3 .sub {
    font-size: 4.5vw;
    margin: 0 0 0 3vw;
    top: -3px;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .third_view h3 .sub {
    font-size: 4.5vw;
    margin: 0 0 0 3vw;
    top: -3px;
  }
}
@media screen and (max-width: 375px) {
  .third_view h3 .sub {
    font-size: 4.5vw;
    margin: 0 0 0 3vw;
    top: -3px;
  }
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .third_view h3 {
    font-size: 7vw;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .third_view h3 {
    font-size: 7vw;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .third_view h3 {
    font-size: 7vw;
  }
}
@media screen and (max-width: 375px) {
  .third_view h3 {
    font-size: 7vw;
  }
}
.third_view .img-balance {
  margin: 0;
}
.third_view .img-balance .box01 {
  display: inline-block;
  width: 42%;
  margin: 0;
  vertical-align: bottom;
}
.third_view .img-balance .box01 img {
  width: 100%;
  position: relative;
  margin: 0;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .third_view .img-balance .box01 {
    display: block;
    width: 100%;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .third_view .img-balance .box01 {
    display: block;
    width: 100%;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .third_view .img-balance .box01 {
    display: block;
    width: 100%;
  }
}
@media screen and (max-width: 375px) {
  .third_view .img-balance .box01 {
    display: block;
    width: 100%;
  }
}
.third_view .img-balance .box02 {
  display: inline-block;
  width: 8%;
  margin: 20% 0 0 30px;
  position: relative;
  vertical-align: top;
  z-index: 99;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .third_view .img-balance .box02 {
    width: 17%;
    margin: 40px 0 40px;
    display: block;
    position: relative;
    left: 41%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .third_view .img-balance .box02 {
    width: 17%;
    margin: 40px 0 40px;
    display: block;
    position: relative;
    left: 41%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .third_view .img-balance .box02 {
    width: 17%;
    margin: 40px 0 40px;
    display: block;
    position: relative;
    left: 41%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}
@media screen and (max-width: 375px) {
  .third_view .img-balance .box02 {
    width: 17%;
    margin: 40px 0 40px;
    display: block;
    position: relative;
    left: 41%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}
.third_view .img-balance .box02 img {
  width: 100%;
  position: relative;
  margin: 0;
}
.third_view .img-balance .box03 {
  display: inline-block;
  width: 42%;
  margin: 0 0 0 30px;
  vertical-align: bottom;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .third_view .img-balance .box03 {
    width: 100%;
    margin: 0;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .third_view .img-balance .box03 {
    width: 100%;
    margin: 0;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .third_view .img-balance .box03 {
    width: 100%;
    margin: 0;
  }
}
@media screen and (max-width: 375px) {
  .third_view .img-balance .box03 {
    width: 100%;
    margin: 0;
  }
}
.third_view .img-balance .box03 img {
  width: 100%;
  position: relative;
  margin: 0;
}

.four_view {
  width: 85%;
  margin: 150px auto 0;
  padding: 0 0 250px 0;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .four_view {
    width: 90%;
    padding: 0 0 150px 0;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .four_view {
    width: 90%;
    padding: 0 0 150px 0;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .four_view {
    width: 95%;
    padding: 0 0 150px 0;
  }
}
@media screen and (max-width: 375px) {
  .four_view {
    width: 95%;
    padding: 0 0 150px 0;
  }
}
.four_view h2 {
  color: #fff;
  font-weight: bold;
  font-size: 46px;
  letter-spacing: 2.5px;
  margin: 0 0 20px 0;
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .four_view h2 {
    text-align: center;
    font-size: 6.3vw;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .four_view h2 {
    text-align: center;
    font-size: 6.3vw;
  }
}
@media screen and (max-width: 375px) {
  .four_view h2 {
    text-align: center;
    font-size: 6.3vw;
  }
}
.four_view .img-box {
  margin: 0;
}
.four_view .img-box .spec_pc {
  display: block;
  width: 100%;
  margin: 0;
}
.four_view .img-box .spec_pc img {
  width: 62%;
  position: relative;
  margin: 75px 0 75px;
  display: block;
}
@media screen and (min-width: 696px) and (max-width: 960px) {
  .four_view .img-box .spec_pc img {
    width: 85%;
  }
}
@media screen and (min-width: 431px) and (max-width: 695px) {
  .four_view .img-box .spec_pc img {
    width: 85%;
  }
}
@media screen and (min-width: 376px) and (max-width: 430px) {
  .four_view .img-box .spec_pc img {
    width: 85%;
  }
}
@media screen and (max-width: 375px) {
  .four_view .img-box .spec_pc img {
    width: 85%;
  }
}
/*# sourceMappingURL=gate.css.map */