@CHARSET "UTF-8";

/* ===================================================================
フォントの指定
=================================================================== */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium");
}

@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

/* ゴシック体 */
html body {
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 明朝体
html body{
  font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}*/
/* ================================================================ */

html body {
  color: #555;
  background-color: #ffffff;
}

html body #container {
  line-height: 1;
}

html body #container article,
html body #container section,
html body #container footer {
  line-height: 1.5;
}

img {
  display: block;
}

header a,
nav a,
footer a {
  color: #fff;
  text-decoration: none;
}

a:not(.button):hover {
  color: red ! important;
}

/* フォントサイズ設定 */
@media screen and (max-width: 480px) {
  html {
    font-size: 13px !important;
  }
}

@media screen and (min-width: 481px) and (max-width: 640px) {
  html {
    font-size: 14px !important;
  }
}

@media screen and (min-width: 641px) {
  html {
    font-size: 16px !important;
  }
}

/* ===================================================================
ベース
=================================================================== */
article {
  margin: 1rem auto 0;
}

#container .size {
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}

#container>#wrapper {}

#wrapper #banner_area img {
  margin-top: 2rem;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

#wrapper #link-banner_area {
  margin-top: 2.5rem;
}

#wrapper #footer {
  text-align: center;
  /*  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
*/
}

/* copyright */
#bsc-copyright {
  font-size: .7rem;
}

#contract li {
  margin-top: 1rem;
  border: 4.5px solid #fff;
}

#parking {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

#parking img {
  width: 80%;
}

#ozone {
  text-align: center;
}

#ozone ul li .ozone-img {
  width: 65%;
  margin-right: auto;
  margin-left: auto;
}

#app {
  margin-top: 4.5rem;
  margin-bottom: 3rem;
  background-color: #c6e7f9;
  padding: 1rem 0 !important;
  border: 3px dotted #fff;
  box-shadow: 0 0 0 10px #c6e7f9;
}

#app ul li>div>div+div {
  margin-top: .8rem;
}

#app ul li.app_sp img {
  padding: 0;
  margin-right: 2.5rem;
}

#app ul li.app_banner {
  position: relative;
}

#app ul li.app_banner img {
  padding: 1rem;
  margin-bottom: 10rem;
}

#app ul li.app_banner .qr {
  padding-top: 1rem;
  width: 100%;
  position: absolute;
  top: 50px;
  bottom: 50px;
}


/* ===================================================================
section
=================================================================== */
/* #wrapper *+section{ margin-top: 2rem; } */
section {
  padding: 0 !important;
}


/* ===================================================================
media screen
=================================================================== */
/* スマホ */
@media screen and (max-width: 640px) {
  .logo_area img {
    width: 100%;
  }

  #banner_area ul,
  #link-banner_area ul {
    display: inline;
  }

  #banner_area ul li {}

  #banner_area ul li+li,
  #link-banner_area ul li+li {
    margin-top: 2rem;
  }

  #banner_area ul li img,
  #link-banner_area ul img {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
  }

  #contract li {
    border: none;
  }

  #parking img {
    width: 100%;
  }

  #app ul li {
    width: 50%;
  }

  #app ul li img {
    width: 85%;
    margin: .2rem auto;
  }

  #app ul li.app_sp img {
    margin-right: 0;
    padding: 1rem;
  }

  #app ul li.app_banner {
    margin-bottom: 1rem;
  }

}

/* タブレット1 */
@media screen and (min-width: 641px) {
  .logo_area img {
    /* margin-top: 8rem; */
    margin-top: 3rem;
  }

  #app ul li>div+div {
    margin-top: 1rem;
  }

}

/* タブレット2以下 */
@media screen and (max-width: 800px) {}


/* タブレット2以上 */
@media screen and (min-width: 801px) {}

/* ipad */
@media screen and (min-width: 801px) and (max-width: 1024px) {}

/* ipad以下 */
@media screen and (max-width: 1024px) {
  .size {
    padding-left: .8rem;
    padding-right: .8rem;
    width: 100%;
  }
}

/* PC */
@media screen and (min-width: 1025px) {
  .size {
    width: 1000px;
  }

  #bsc-copyright {
    margin: .25rem .25rem 0;
  }
}