.br_sp {
  display: none;
}

.sauna .sub-img {
    background-image: url(../img/sauna/FV.jpg);
    background-size: cover;
}

.p-sauna-greeting-content1__heading small {
  line-height: calc(24 / 16);
}

.p-sauna-greting-video {
    width: 652px;
    max-width: 100%;
    margin: auto;
    display: block;
    height: auto;
}

.p-sauna-greeting-content1__text {
    width: 538px;
    margin: auto;
    max-width: 100%;
    margin-top: min(calc(38 / 1200 * 100vw), calc(38 * 1px));
}

.sauna-type-finland{
  background-image: url(../img/sauna/finland_bg.png);
  background-size: cover;
}

.p-sauna-type-content1 {
  padding-right: min(calc(50 / 1200 * 100vw), calc(50 * 1px));
  padding-left: min(calc(50 / 1200 * 100vw), calc(50 * 1px));
  background-color: rgba(255, 255, 255, 0.95);
}

.p-sauna-type-content1__container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 25px;
}

.p-sauna-type-content1__thumbnail {
  width: min(calc(465 / 1200 * 100vw), calc(465 * 1px));
  height: auto;
}

.p-sauna-type-content1__text {
  display: block;
  width: min(calc(538 / 1200 * 100vw), calc(538 * 1px));
}

.p-sauna-type-content1__list {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  margin-top: min(calc(70 / 1200 * 100vw), calc(70 * 1px));
}

.p-sauna-type-content1__list li img {
  width: min(calc(333 / 1200 * 100vw), calc(333 * 1px));
  height: auto;
}

.sauna-type-dry{
  background-image: url(../img/sauna/dry_bg.png);
  background-size: cover;
}

.p-sauna-type-content2 {
  padding-right: min(calc(50 / 1200 * 100vw), calc(50 * 1px));
  padding-left: min(calc(50 / 1200 * 100vw), calc(50 * 1px));
  background-color: rgba(255, 255, 255, 0.95);
}

.p-sauna-type-content2__container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 25px;
  flex-direction: row-reverse;
}

.p-sauna-type-content2__thumbnail {
  width: min(calc(465 / 1200 * 100vw), calc(465 * 1px));
  height: auto;
}

.p-sauna-type-content2__text {
  display: block;
  width: min(calc(538 / 1200 * 100vw), calc(538 * 1px));
}

.p-sauna-type-content2__list {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  margin-top: min(calc(70 / 1200 * 100vw), calc(70 * 1px));
}

.p-sauna-type-content2__list li img {
  width: min(calc(333 / 1200 * 100vw), calc(333 * 1px));
  height: auto;
}

.p-sauna-space {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: min(calc(80 / 1200 * 100vw), calc(80 * 1px));
}

.p-sauna-space-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.p-sauna-space-content:nth-of-type(even) {
  flex-direction: row-reverse;
}

.p-sauna-space__kv {
  width: min(calc(600 / 1200 * 100vw), calc(600 * 1px));
  height: auto;
}

.p-sauna-space__card {
  padding: min(calc(50 / 1200 * 100vw), calc(50 * 1px)) min(calc(32 / 1200 * 100vw), calc(32 * 1px));
  background-color: rgba(255, 255, 255, 0.8);
  margin-left: min(calc(-100 / 1200 * 100vw), calc(-100 * 1px));
    width: min(calc(660 / 1200 * 100vw), calc(660 * 1px));
  height: min(calc(316 / 1200 * 100vw), calc(316 * 1px));

}

.p-sauna-space-content:nth-of-type(even) .p-sauna-space__card  {
  margin-left: 0;
  margin-right: min(calc(-100 / 1200 * 100vw), calc(-100 * 1px));
  position: relative;
  z-index: 10;
}

.p-sauna-space__heading {
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 1px solid #333;
}

.p-sauna-space__text {
  padding-top: min(calc(28 / 1200 * 100vw), calc(28 * 1px));
}

.sauna-comfortable {
  background-color: #f7f7f7;
}

.p-sauna-comfortable-content__container {
  display: flex;
  width: min(calc(1000 / 1200 * 100vw), calc(1000 * 1px));
  gap : min(calc(14 / 1200 * 100vw), calc(14 * 1px))  min(calc(20 / 1200 * 100vw), calc(20 * 1px));
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: auto;
}

.p-sauna-comfortable-content__container img {
  width: min(calc(320 / 1200 * 100vw), calc(320 * 1px));
  height: auto;
}

.p-sauna-voice-content1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: min(calc(50 / 1200 * 100vw), calc(50 * 1px));
}

.p-sauna-voice-content1__image {
  width: min(calc(464 / 1200 * 100vw), calc(464 * 1px));
  height: auto;
}

.p-sauna-voice-content__heading {
  display: block;
  padding-bottom: 2em;
}

/* .sauna-advisor {
  background-color: #f7f7f7;
} */

.p-sauna-advisor-content1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: min(calc(50 / 1200 * 100vw), calc(50 * 1px));
}

.p-sauna-advisor-content__sign {
  display: block;
  text-align: right;
  padding-top: 1em;
}

.p-sauna-advisor-content__image {
  width: min(calc(448 / 1200 * 100vw), calc(448 * 1px));
  height: auto;
}

.p-sauna-advisor-content2 {
  margin-top: min(calc(90 / 1200 * 100vw), calc(90 * 1px));
}

.p-sauna-advisor-content2__heading {
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 1px solid #000;
}

.p-sauna-advisor-post {
  padding-top: min(calc(35 / 1200 * 100vw), calc(35 * 1px));
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: min(calc(30 / 1200 * 100vw), calc(30 * 1px));
}

.p-sauna-advisor-post__item {
  width: min(calc(380 / 1200 * 100vw), calc(380 * 1px));
}

.p-sauna-advisor-post__figure {
  width: 100%;
  aspect-ratio: 380 / 214;
  object-fit: cover;
}

.p-sauna-advisor-post__figure img {
  aspect-ratio: 380 / 214;
  object-fit: cover;
  width: 100%;
}


.p-sauna-advisor-post__date {
      color: #999;
    font-size: 14px;
    display: block;
    margin-top: 10px;
}

.p-sauna-adviser-more {
  display: block;
  font-size: 16px;
  width: min(calc(310 / 1200 * 100vw), calc(310 * 1px));
  text-align: center;
  margin: auto;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ccc;
  margin-top: min(calc(50 / 1200 * 100vw), calc(50 * 1px));
  padding: min(calc(18 / 1200 * 100vw), calc(18 * 1px));
}

:root{
  --badge: 88px;               /* 黒丸の直径 */
  --gap:  40px;                /* 黒丸と本文の間隔 */
  --line: #BFBFBF;             /* 点線の色 */
  --dot-on: 3px;               /* 点線の線の長さ */
  --dot-off: 2px;             /* 点線の隙間の長さ */
}

/* .flow{
  max-width: 960px;
  margin: 40px auto;
  padding: 0 16px;
  color: #333;
  font-family: "Noto Sans JP", system-ui, sans-serif;
} */

#flow {
  background-color: #f7f7f7;
}

.p-sauna-flow__list{
  list-style: none;
  margin: 0;
  padding-left: calc(var(--badge) + var(--gap));
  position: relative;
  counter-reset: step; /* STEPの番号を初期化 */
  width: min(calc(780 / 1200 * 100vw), calc(780 * 1px));
  margin: auto;
  font-size: 16px;
  transform: translateX(12%);
}

/* 縦の点線 */
.p-sauna-flow__list::before{
  content: "";
  position: absolute;
  left: calc((var(--badge) / 2));
  top: 10px;
  bottom: 0;
  width: 2px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--line) 0 var(--dot-on),
    transparent var(--dot-on) calc(var(--dot-on) + var(--dot-off))
  );
  font-weight: normal;
  height: 90%;
}

.p-sauna-flow__item{
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--badge);
  padding: 18px 0;
}

.p-sauna-flow__item:not(:first-of-type) {
  margin-top: min(calc(32 / 1200 * 100vw), calc(32 * 1px));
}

/* 黒丸（バッジ） */
.p-sauna-flow__badge{
  position: absolute;
  left: calc(-1 * (var(--badge) + var(--gap)));
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  background: #222;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}

/* STEP01, STEP02... を自動表示 */
.p-sauna-flow__badge::before{
  counter-increment: step;
  content: "STEP" counter(step, decimal-leading-zero);
  font-size: 12px;
  line-height: 1;
}

/* 右側の本文 */
.p-sauna-flow__text{
  margin: 0;
  line-height: 1.9;
}

/* スマホ対応 */
@media (max-width: 560px){
  :root{ --badge: 60px; --gap: 16px; }
  .flow__text{ font-size: 13px; line-height: 1.8; }
  .flow__list::before{ transform: translateX(8px); }
}

/* ========== Accordion styles ========== */
:root{
  --fg: #222;
  --muted: #333;
  --border: #cfcfcf;
  --spacing-y: 14px; /* 行の上下余白 */
}

/* .sauna-faq {
  background-color: #f7f7f7;
} */

.p-sauna-faq__list{
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  width: min(calc(652 / 1200 * 100vw), calc(652 * 1px));
  margin: auto;
}
.p-sauna-faq__heading{
  border-bottom: 1px solid var(--border);
  margin: 0;
}

.p-sauna-faq__trigger{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: calc(var(--spacing-y) + 6px) 44px calc(var(--spacing-y) + 6px) 1em;
  font-size: 16px;
  line-height: 1.7;
  cursor: pointer;
  position: relative;
  color: #333;
}

.p-sauna-faq__trigger:hover,
.p-sauna-faq__trigger:focus-visible{
  outline: none;
  background: #fafafa;
}

.p-sauna-faq__icon{
  position: absolute;
  top: 50%;
  right: 0;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
}

/* ＋ / － 記号（CSSで描画） */
.p-sauna-faq__icon::before,
.p-sauna-faq__icon::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 1px;
  background: var(--muted);
  transition: transform .2s ease;
}
.p-sauna-faq__icon::after{
  transform: rotate(90deg); /* 縦棒＝＋ */
}

/* 開いたら「－」にする（縦棒を消す） */
.p-sauna-faq__trigger[aria-expanded="true"] .p-sauna-faq__icon::after{
  transform: rotate(90deg) scaleX(0);
}

/* パネル（スムース開閉） */
.p-sauna-faq__panel{
  padding: 0;
  overflow: hidden;
  transition: grid-template-rows .25s ease, opacity .25s ease;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
}
.p-sauna-faq__panel > *{
  /* gridの中身の高さをスムーズにする */
  min-height: 0;
}

.p-sauna-faq__item.is-open .p-sauna-faq__panel{
  padding: 14px 0 14px 0;
  grid-template-rows: 1fr;
  opacity: 1;
}

.p-sauna-faq__panel p{
  margin: 0;
  /* padding: 2px 0 6px 0; */
  color: #444;
  line-height: 1.9;
  font-size: 14px;
  padding-left: 1em;
}

@media screen and (max-width: 1024px) {
.p-sauna-type-content1,
.p-sauna-type-content2 {
    padding-right: 5%;
    padding-left: 5%;
}
.p-sauna-type-content1__container,
.p-sauna-type-content2__container {
  flex-direction: column;
  gap: 1em;
}

.p-sauna-type-content1__thumbnail,
.p-sauna-type-content2__thumbnail {
width: 100%;
}

.p-sauna-type-content1__text,
.p-sauna-type-content2__text {
  width: 100%;
}

.p-sauna-type-content1__list,
.p-sauna-type-content2__list {
  gap: 3%;
}

.p-sauna-space-content {
  display: grid;
  align-items: initial;
}

.p-sauna-space__card {
  z-index: 2;
  grid-area: 1 / 1;
  height: fit-content;
  background-color: rgba(255, 255, 255, .8);
  width: 90%;
  margin-top: 150px;
  padding: 32px 10px;
  margin-left: 0;
  margin-right: auto;
}
.p-sauna-space__kv {
  z-index: 1;
    grid-area: 1 / 1;
    width: 80%;
    margin-left: auto;
    margin-right: 0;
}

.p-sauna-space__kv img {
  width: 100%;
}

.p-sauna-space-content:nth-of-type(odd) .p-sauna-space__kv {
  margin-right: auto;
  margin-left: 0;
}

.p-sauna-space-content:nth-of-type(odd) .p-sauna-space__card {
  margin-left: auto;
  margin-right: 0;
}

.p-sauna-comfortable-content__container {
  width: 100%;
}

.p-sauna-comfortable-content__container img {
  width: 48%;
}

.p-sauna-voice-content1 {
  flex-direction: column;
  width: 100%;
}

.p-sauna-voice-content__heading {
  padding-bottom: 1em;
}

.p-sauna-voice-content1__image {
  width: 100%;
}

.p-sauna-advisor-content1 {
  flex-direction: column;
  width: 100%;
}

.p-sauna-advisor-content__image {
  width: 100%;
}

.p-sauna-advisor-post {
  padding-top: calc(60 / 750 * 100vw);
}

.p-sauna-adviser-more {
  margin-top: calc(60 / 750 * 100vw);
}

.p-sauna-flow__list {
  width: 100%;
  transform: initial;
  font-size: clamp(12px, calc(16 / 750 * 100vw), 16px);
}

.p-sauna-flow__list::before {
  height: 80%;
}

.p-sauna-faq__list {
  width: 100%;
}

}

@media (max-width: 768px) {
  .p-sauna-advisor-post {
    flex-direction: column;
  }
  .p-sauna-advisor-post__item {
    width: 100%;
  }
  .p-sauna-adviser-more {
    width: 80%;
    font-size: 14px;
  }
  .br_sp {
    display: block;
  }
}