html {
  height: 100%; }

.warning {
  font-weight: bold; }

.ggskin_image {
  cursor: pointer;
  width: 145px; }

@media screen and (max-width: 900px) {
  .only_pc {
    display: none; } }

@media screen and (min-width: 901px) {
  .only_sp {
    display: none; } }

/*------------------------------------------------------------

------------------------------------------------------------*/
body {
  height: 100%;
  margin: 0px;
  font-family: "Yu Gothic", YuGothic, "HiraginoKaku Gothic ProN", "HiraginoKaku Gothic Pro", Meiryo, sans-serif;
  color: #2d2d2f;
  background-color: #E8E7E4; }

#bath-wrap {
  position: absolute;
  width: 100%;
  min-height: 660px;
  top: 0; }
  @media screen and (max-width: 900px) {
    #bath-wrap {
      min-width: 350px;
      height: 100%; } }

/*------------------------------------------------------------
header
------------------------------------------------------------*/
.bath360-header {
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 5555; }
  @media screen and (max-width: 900px) {
    .bath360-header {
      height: 50px; } }

.bath360-header img.bath360-logo {
  position: relative;
  width: 158px;
  height: 50px;
  float: left; }

.bath360-header img.bath360-link-showroom {
  position: relative;
  width: 140px;
  height: 50px;
  float: left;
  margin-left: 30px; }
  @media screen and (max-width: 900px) {
    .bath360-header img.bath360-link-showroom {
      float: right;
      margin-left: 0;
      margin-right: 15px; } }

.bath360-header img:hover {
  opacity: 0.8;
  filter: brightness(105%); }

/*------------------------------------------------------------
icon
------------------------------------------------------------*/
.bath360-icon360 {
  position: absolute;
  top: 25px;
  right: 40px;
  width: 60px;
  height: 32px;
  background: url("../img/icon360.png") center/cover;
  background-repeat: no-repeat; }
  @media screen and (max-width: 900px) {
    .bath360-icon360 {
      top: 15px;
      right: 10px;
      width: calc(60px * 0.6);
      height: calc(32px * 0.6); } }

/*------------------------------------------------------------
main Layout
------------------------------------------------------------*/
.bath360-main {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: calc(100% - 50px);
  overflow: hidden;
  background-color: #E2E1DD; }
  @media screen and (max-width: 900px) {
    .bath360-main {
      top: 50px;
      height: calc(100% - 50px); } }

.bath360-main .bath360-main-box1 {
  background: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 37.18%;
  height: 100%;
  overflow: hidden; }
  @media screen and (max-width: 900px) {
    .bath360-main .bath360-main-box1 {
      width: 100%;
      height: 186px; } }

.bath360-main .bath360-main-box2 {
  position: absolute;
  top: 40px;
  right: 0;
  width: calc(100% - 37.18%);
  height: 100%;
  overflow: hidden; }
  @media screen and (max-width: 900px) {
    .bath360-main .bath360-main-box2 {
      left: 0;
      top: 186px;
      width: 100%; } }

.bath360-main-box1-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.bath360-main-box1-h2 {
  position: absolute;
  top: calc(25px + 25px);
  left: 0;
  width: 100%;
  font-size: 17px;
  padding-left: 34px;
  font-weight: 600;
  line-height: 32px; }
  @media screen and (max-width: 900px) {
    .bath360-main-box1-h2 {
      font-size: 16px;
      padding-left: 25px;
      top: 5px; } }

.bath360-main-box1-wrapper h1 {
  position: absolute;
  top: calc(64px + 25px);
  left: 0;
  width: 100%;
  font-size: 26px;
  padding-left: 34px;
  font-weight: 600;
  line-height: 32px; }
  @media screen and (max-width: 900px) {
    .bath360-main-box1-wrapper h1 {
      font-size: 22px;
      padding-left: 25px;
      top: 36px; } }

.bath360-main-box1-h1-bar {
  background-color: white;
  position: absolute;
  top: calc(87px + 25px);
  left: 32px;
  width: 296px;
  height: 8px;
  padding-left: 34px; }
  @media screen and (max-width: 900px) {
    .bath360-main-box1-h1-bar {
      width: 225px;
      height: 6px;
      left: 25px;
      top: 59px; } }

.bath360-main-box1-lead {
  position: absolute;
  top: 150px;
  left: 0;
  width: 100%;
  font-size: 19px;
  padding-left: 34px;
  font-weight: 600;
  line-height: 32px; }
  @media screen and (max-width: 900px) {
    .bath360-main-box1-lead {
      font-size: 14px;
      line-height: 1.5;
      padding-left: 25px;
      top: 84px; } }

.bath360-main-box1-chou {
  position: absolute;
  top: 257px;
  left: 0;
  width: 100%;
  font-size: 14px;
  padding-left: 34px; }
  @media screen and (max-width: 900px) {
    .bath360-main-box1-chou {
      font-size: 10px;
      top: 140px;
      padding-left: 24px; } }

div.bath360-sp-chou {
  position: fixed;
  widows: 100%;
  height: 38px;
  bottom: 0;
  padding: 0 5% 8px 5%;
  font-size: 10px;
  display: none; }

.bath360-main-box2-wrapper {
  position: absolute;
  top: -5%;
  left: 0;
  width: 100%;
  height: 100%; }
  @media screen and (max-width: 900px) {
    .bath360-main-box2-wrapper {
      top: -20%;
      left: -5%; } }
  @media screen and (min-width: 500px) {
    .bath360-main-box2-wrapper {
      top: -12%;
      left: -5%; } }
  @media screen and (min-width: 600px) {
    .bath360-main-box2-wrapper {
      top: -10%;
      left: -5%; } }
  @media screen and (min-width: 720px) {
    .bath360-main-box2-wrapper {
      top: -12%;
      left: -5%; } }
  @media screen and (min-width: 901px) {
    .bath360-main-box2-wrapper {
      top: -5%;
      left: 0; } }

/*------------------------------------------------------------

------------------------------------------------------------*/
#bath360-maku {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: white;
  opacity: 1;
  z-index: 5554;
  display: block; }

/*------------------------------------------------------------

------------------------------------------------------------*/
#bath360-maku-modal {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.4;
  z-index: 5560;
  cursor: pointer;
  display: none; }

#bath360-modals {
  position: absolute;
  left: -556px;
  top: 0;
  width: 556px;
  height: 100%;
  z-index: 5561;
  background-color: #E2E1DD; }
  @media screen and (max-width: 900px) {
    #bath360-modals {
      left: -100%;
      width: 100%; } }

.bath360-modal-close {
  position: absolute;
  right: 15px;
  top: 0;
  cursor: pointer;
  width: 53px;
  height: 53px; }
  @media screen and (max-width: 900px) {
    .bath360-modal-close {
      right: 5px; } }

@media screen and (max-width: 900px) {
  #bath360-modal1 .bath360-modal-close,
  #bath360-modal2 .bath360-modal-close {
    top: 0; } }

.bath360-modal-close-under {
  position: absolute;
  left: 210px;
  bottom: 20px;
  width: 120px;
  height: 53px;
  cursor: pointer; }
  @media screen and (max-width: 900px) {
    .bath360-modal-close-under {
      display: none; } }
  @media screen and (max-width: 380px) {
    .bath360-modal-close-under {
      display: none; } }

.bath360-modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 556px;
  height: 100%;
  text-align: left;
  z-index: 5562;
  overflow: hidden;
  display: none; }
  @media screen and (max-width: 900px) {
    .bath360-modal {
      width: 100%; } }

.bath360-modal-header {
  position: relative;
  width: 100%;
  text-align: left;
  line-height: 26px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 17px 0 13px 25px; }

.bath360-modal-header-wide {
  height: 78px;
  line-height: 26px;
  padding: 15px 0 15px 25px; }

.bath360-modal h1 {
  font-size: 20px;
  color: #005BAC; }
  @media screen and (max-width: 900px) {
    .bath360-modal h1 {
      font-size: 18px; } }

.bath360-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  line-height: 1.75;
  padding: 15px 0 15px 25px;
  font-size: 17px;
  color: #333;
  overflow: auto;
  font-weight: 600; }
  @media screen and (max-width: 900px) {
    .bath360-modal-content {
      font-size: 18px;
      line-height: 1.5; } }
  @media screen and (max-width: 380px) {
    .bath360-modal-content {
      font-size: 18px;
      line-height: 1.5; } }

.bath360-modal-content img {
  margin-bottom: 30px;
  margin-top: 10px;
  margin-left: 22px; }
  @media screen and (max-width: 900px) {
    .bath360-modal-content img {
      margin-left: calc(50% - 190px); } }
  @media screen and (max-width: 380px) {
    .bath360-modal-content img {
      margin-left: 0; } }

.bath360-modal-content.bath360_img1 img {
  width: 456px;
  height: 115px; }
  @media screen and (max-width: 900px) {
    .bath360-modal-content.bath360_img1 img {
      width: calc(456px * 0.75);
      height: calc(115px * 0.75); } }
  @media screen and (max-width: 380px) {
    .bath360-modal-content.bath360_img1 img {
      width: calc(456px * 0.7);
      height: calc(115px * 0.7); } }

.bath360-modal-content.bath360_img2 img {
  width: 456px;
  height: 190px; }
  @media screen and (max-width: 900px) {
    .bath360-modal-content.bath360_img2 img {
      width: calc(456px * 0.75);
      height: calc(190px * 0.75); } }
  @media screen and (max-width: 380px) {
    .bath360-modal-content.bath360_img2 img {
      width: calc(456px * 0.7);
      height: calc(190px * 0.7); } }

.bath360-modal-content.bath360_img3 img {
  width: 456px;
  height: 200px; }
  @media screen and (max-width: 900px) {
    .bath360-modal-content.bath360_img3 img {
      width: calc(456px * 0.75);
      height: calc(200px * 0.75); } }
  @media screen and (max-width: 380px) {
    .bath360-modal-content.bath360_img3 img {
      width: calc(456px * 0.7);
      height: calc(200px * 0.7); } }

.bath360-modal-content.bath360_img4 img {
  width: 456px;
  height: 210px; }
  @media screen and (max-width: 900px) {
    .bath360-modal-content.bath360_img4 img {
      width: calc(456px * 0.75);
      height: calc(210px * 0.75); } }
  @media screen and (max-width: 380px) {
    .bath360-modal-content.bath360_img4 img {
      width: calc(456px * 0.7);
      height: calc(210px * 0.7); } }

.bath360-modal-content.bath360_img5 img {
  width: 456px;
  height: 240px; }
  @media screen and (max-width: 900px) {
    .bath360-modal-content.bath360_img5 img {
      width: calc(456px * 0.75);
      height: calc(240px * 0.75); } }
  @media screen and (max-width: 380px) {
    .bath360-modal-content.bath360_img5 img {
      width: calc(456px * 0.7);
      height: calc(240px * 0.7); } }

.bath360-modal-content.bath360_img6 img {
  width: 456px;
  height: 192px; }
  @media screen and (max-width: 900px) {
    .bath360-modal-content.bath360_img6 img {
      width: calc(456px * 0.75);
      height: calc(192px * 0.75); } }
  @media screen and (max-width: 380px) {
    .bath360-modal-content.bath360_img6 img {
      width: calc(456px * 0.7);
      height: calc(192px * 0.7); } }

.bath360-modal-content-txt {
  width: 95%;
  height: auto; }
  @media screen and (max-width: 900px) {
    .bath360-modal-content-txt {
      width: 92%; } }
  @media screen and (max-width: 380px) {
    .bath360-modal-content-txt {
      width: 92%; } }

.bath360-modal-content-txt span {
  font-size: 14px; }

.bath360-modal-content p {
  height: auto;
  padding-bottom: 75px; }

/*# sourceMappingURL=main.css.map */