@charset "UTF-8";

/* smartstore.html 専用 */
/* トップページ用 */

#selfregi .container {
  padding-left: 60px;
  padding-right: 60px;
}

/* メインビジュアル */
/* ===================================================
 * 5. メインビジュアルの設定（PC）
 * =================================================== */
.main-visual {
  background-image: url('../img/main-visual.jpg');
  background-size: cover;
  background-position: center;
  color: #000;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 450px;
  padding-top: 0 !important;
}

.main-visual-content {
  position: relative;
  width: 100%;
}

#selfregi .fig05 .index-fig05-illust {
  display: block;
  height: auto;
  flex-shrink: 0;
  align-self: flex-end;
  align-self: last baseline;
}

@media (min-width: 769px) {
  /*
   * common.css: .image { max-width: 640px } を上書きし、
   * .container 幅いっぱいに広げる
   */
  #selfregi .section01-3 .image,
  #selfregi .section02 .image,
  #selfregi .section03 .image,
  #selfregi .section04 .image,
  #selfregi .section05 .room-container {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch;
  }

  #selfregi .section01-3 .image__wrap img,
  #selfregi .section02 .image__wrap img,
  #selfregi .section03 .image__wrap img,
  #selfregi .section04 .image__wrap img,
  #selfregi .section05 .room-container .base-plan {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    object-fit: contain !important;
  }
}

/*
 * 縦が短い PC（Mac 1512×890〜930 等）：fig03 / fig06 だけ縦上限
 * 930px より高い viewport では大サイズ表示（max-height なし）
 */
@media (min-width: 769px) and (max-height: 930px) {
  #selfregi .section01-3 .image__wrap img {
    width: auto !important;
    max-width: 100% !important;
    /* 38vh は 890px 高で約338pxになり小さすぎる → 下段分を除いた残り高さを使う */
    max-height: calc(100vh - 50px - 280px) !important;
    margin-inline: auto;
  }

  #selfregi .section03 .image__wrap img {
    width: auto !important;
    max-width: 100% !important;
    max-height: calc(100vh - 50px - 300px) !important;
    margin-inline: auto;
  }
}

/* イラスト個別サイズ（index-fig03 / 04 / 05 / 06 / 07）1200px 以上 */
@media (min-width: 1200px) {
  #selfregi .section01-3 .image__wrap {
    width: 100% !important;
    max-width: 90% !important;
    margin-inline: auto;
  }

  #selfregi .section02 .image__wrap {
    max-width: 85%;
    margin-inline: auto;
  }

  #selfregi .section03 .image__wrap {
    max-width: 90%;
    margin-inline: auto;
  }

  #selfregi .section04 .image__wrap {
    width: 100% !important;
    max-width: 88% !important;
    margin-inline: auto;
  }

  #selfregi .fig05 .index-fig05-illust {
    width: 150px;
    margin-left: 0;
    transform: translate(0, 0);
  }
}

/* 769px〜1199px：イラスト縮小（約75%） */
@media (min-width: 769px) and (max-width: 1199.98px) {
  #selfregi .section01-3 .image__wrap {
    width: 100% !important;
    max-width: 68% !important;
    margin-inline: auto;
  }

  #selfregi .section02 .image__wrap {
    max-width: 64%;
    margin-inline: auto;
  }

  #selfregi .section03 .image__wrap {
    max-width: 68%;
    margin-inline: auto;
  }

  #selfregi .section04 .image__wrap {
    width: 100% !important;
    max-width: 66% !important;
    margin-inline: auto;
  }

  #selfregi .fig05 .index-fig05-illust {
    width: 112px;
    margin-left: 0;
    transform: translate(0, 0);
  }
}

/* コンテンツ */
/* ===================================================
 * コンテンツ共通
 * =================================================== */

.fig-graph {
  text-align: center;
}

.fig-graph p:first-of-type {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
}

.fig-graph p:nth-of-type(2) {
  font-size: 2.7rem;
  font-weight: 700;
  color: #FFF;
  background-color: #ff0000;
  text-align: center;
  padding: 3px;
  width: 70%;
  display: inline-block;
  margin-top: 10px;
}



.current-situation00 {
  gap: 0;
  border: #000 1px solid;
  display: grid;
  grid-template-rows: auto auto;
  margin: 0 auto;
  width: 100%;

}

.current-situation00 div:first-of-type {
  background-color: #000;
  color: #FFF;
  font-size: 2rem;
  text-align: center;

}

.current-situation00 div:nth-of-type(2) {
  background-color: #f0f0f0;
  color: #000;
  font-size: 2rem;
  padding: 15px;
}

.current-situation00 div:nth-of-type(2) ul {
  list-style-type: disc;
  /* 黒丸 ● */
  padding-left: 20px;
  /* 左側の余白調整 */
}

.current-situation00 div:nth-of-type(2) ul li::before {
  content: "●";
  margin-right: 8px;

}


.current-situation {
  gap: 0;
  border: #000 1px solid;
  display: flex;
  margin: 0 auto;
  width: 100%;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
  background-color: #0e7a94;
}

.bg_fg {
  background-color: #564798;
}

.current-situation div:first-of-type {
  color: #FFF;
  font-size: 2rem;
  text-align: left;

}

.current-situation div:nth-of-type(2) {
  background-color: #f0f0f0;
  color: #000;
  font-size: 2rem;
  padding: 15px;
}

.current-situation div:nth-of-type(2) ul {
  list-style-type: disc;
  padding-left: 20px;
}

.current-situation div:nth-of-type(2) ul li::before {
  content: "●";
  margin-right: 8px;

}

.current-situation2 {
  border-bottom: #000 1px solid;
  border-left: #000 1px solid;
  border-right: #000 1px solid;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #FFF;
}

.current-situation2 p {
  color: #004e39;
  font-size: 2rem;
  text-align: left;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.current-situation2 img {
  width: auto;
  max-width: 100%;
  max-height: 16vh;
  height: auto;
  display: block;
  margin: 0;
  object-fit: contain;
}

.current-situation2 > img,
.current-situation2 > a {
  flex: 0 1 auto;
  display: block;
  min-width: 0;
  max-width: 180px;
  line-height: 0;
}

.current-situation2 > a img {
  max-height: 16vh;
}

.fig05 {
  display: inline-flex;
  align-items: flex-end;
  align-items: last baseline;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  margin-top: 50px;
}

.fig05 .text-larger2 {
  vertical-align: baseline;
}

/* 店内イラスト */
/* 店内イラストコンテナ */
.room-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* 2. ベースとなる見取り図画像 */
.base-plan {
  display: block;
  width: 100%;
  height: auto;
}

.sb-parts {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}

.sb-01 {
  top: 40%;
  left: 26%;
  width: 26.5%;
}

.sb-01:hover {
  content: url('../img/sb-01_on.png');
  cursor: pointer;
}

@media (min-width: 769px) {
  /* 大きなテキストブロック（840px 前後）用の下限 */
  .section04-3.area {
    min-height: max(calc(100vh - 50px), 840px) !important;
  }
}

@media (max-width: 768.98px) {
  .current-situation,
  .current-situation2 {
    flex-direction: row;
  }

  #selfregi .section01-2 h4 {
    font-size: 2.5rem;
  }

  #selfregi h4 {
    font-size: 1.3rem;
    text-align: center;
  }

  .section01-2 h4 .text-xlarge {
    font-size: 3rem;
  }

  .text-xlarge {
    font-size: 2em;
  }

  .text-large {
    font-size: 2rem;
  }

  .font-30 {
    font-size: 1.5rem;
  }

  .current-situation div:first-of-type {
    font-size: 1rem;
    margin-bottom: 0;
  }

  .current-situation {
    padding: 10px;
  }

  .current-situation2 {
    padding: 10px;
    gap: 6px;
  }

  .current-situation2 p {
    font-size: 1.2rem;
  }

  .current-situation2 > img,
  .current-situation2 > a {
    max-width: 28%;
  }

  .current-situation2 img,
  .current-situation2 > a img {
    max-height: 110px;
  }

  #selfregi h2 {
    font-size: 1.5rem;
  }

  .fig05 {
    display: block;
    text-align: center;
    width: auto;
    max-width: none;
    margin-top: 30px;
  }

  #selfregi .fig05 .index-fig05-illust {
    display: block;
    width: 156px;
    margin: 12px auto 0;
    align-self: auto;
    transform: translate(0, 0);
  }

  #selfregi p,
  #selfregi .section01-2 p {
    font-size: 1.2rem;
  }

  #selfregi .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  #selfregi h3 {
    font-size: 2.8rem;
    padding: 5px 16px;
    border-radius: 30px;
    margin: 20px 0px;
  }

  .fig-graph p:nth-of-type(2) {
    margin-bottom: 30px;
  }

  .current-situation00 div:first-of-type {
    font-size: 1.5rem;
  }

  .current-situation00 div:nth-of-type(2) {
    font-size: 1.5rem;
  }
}