@import url(/inc/css/common-sc.css);

:root {
  --regular-color: #fc8700;
  --daytime-color: #c36996;
  --u29-color: #49addc;
  --family-color: #3ec77f;
  --yoga4-color: #d96691;
  --yogafree-color: #cd9674;
  --highschool-color: #fe7e8d;
  --pilates4-color: #2dbb85;
  --company-color: #737db5;
  --platium-color: #8b8268;
}

/*------------------------
ABOUT
------------------------*/
#about > section {
  background-image: url(../img/about-back_pc.jpeg);
}

@media (max-width: 575px) {
  #about > section {
    background-image: url(../img/about-back_sp.jpeg);
  }
  #about iframe{
    width: 100%;
    height:80vw;
  }
}

/*------------------------
施設のご案内
------------------------*/
/* スマホ用フロアアイコン */
@media (max-width: 767px) {
  #guidance div.floor1 ul.link {
    width: 60%;
    left: 0;
  }
  #guidance div#floor2 ul.link {
    width: 40%;
    right: 0;
  }
}

/*------------------------
選ばれる理由
------------------------*/
/* REASON01～04 */
#reason div.reason1 {
  background-image: url(../img/reason01.jpeg);
}
#reason div.reason2 {
  background-image: url(../img/reason02.jpeg);
}
#reason div.reason3 {
  background-image: url(../img/reason03.jpeg);
}
#reason div.reason4 {
  background-image: url(../img/reason04.jpeg);
}
@media (max-width: 767px) {
  #reason div.reason1 {
    background-image: url(../img/reason_sp1.jpeg);
  }
  #reason div.reason2 {
    background-image: url(../img/reason_sp2.jpeg);
  }
  #reason div.reason3 {
    background-image: url(../img/reason_sp3.jpeg);
  }
  #reason div.reason4 {
    background-image: url(../img/reason_sp4.jpeg);
  }
}

/*------------------------
料金表
------------------------*/
/* プラン別カラー */
#price div.plan section.regular {
  background-color: var(--regular-color);
}
#price div.plan section.daytime {
  background-color: var(--daytime-color);
}
#price div.plan section.u29 {
  background-color: var(--u29-color);
}
#price div.plan section.family {
  background-color: var(--family-color);
}
#price div.plan section.yoga4 {
  background-color: var(--yoga4-color);
}
#price div.plan section.pilates4 {
  background-color: var(--pilates4-color);
}
#price div.plan section.yogafree {
  background-color: var(--yogafree-color);
}
#price div.plan section.highschool {
  background-color: var(--highschool-color);
}
#price div.plan section.company {
  background-color: var(--company-color);
}
#price div.plan section.platium {
  background-color: var(--platium-color);
}
#price div.plan section.regular .color {
  color: var(--regular-color);
}
#price div.plan section.daytime .color {
  color: var(--daytime-color);
}
#price div.plan section.u29 .color {
  color: var(--u29-color);
}
#price div.plan section.family .color {
  color: var(--family-color);
}
#price div.plan section.yoga4 .color {
  color: var(--yoga4-color);
}
#price div.plan section.pilates4 .color {
  color: var(--pilates4-color);
}
#price div.plan section.yogafree .color {
  color: var(--yogafree-color);
}
#price div.plan section.highschool .color {
  color: var(--highschool-color);
}
#price div.plan section.company .color {
  color: var(--company-color);
}
#price div.plan section.platium .color {
  color: var(--platium-color);
}

/* モバイル用（展開）矢印 */
#price section.regular p.expand a {
  background-color: var(--regular-color);
}
#price section.daytime p.expand a {
  background-color: var(--daytime-color);
}
#price section.u29 p.expand a {
  background-color: var(--u29-color);
}
#price section.family p.expand a {
  background-color: var(--family-color);
}
#price section.yoga4 p.expand a {
  background-color: var(--yoga4-color);
}
#price section.pilates4 p.expand a {
  background-color: var(--pilates4-color);
}
#price section.yogafree p.expand a {
  background-color: var(--yogafree-color);
}
#price section.highschool p.expand a {
  background-color: var(--highschool-color);
}
#price section.company p.expand a {
  background-color: var(--company-color);
}
#price section.platium p.expand a {
  background-color: var(--platium-color);
}

/* 詳細テキスト */
#price section.regular div.detail {
  border-color: var(--regular-color);
}
#price section.daytime div.detail {
  border-color: var(--daytime-color);
}
#price section.u29 div.detail {
  border-color: var(--u29-color);
}
#price section.family div.detail {
  border-color: var(--family-color);
}
#price section.yoga4 div.detail {
  border-color: var(--yoga4-color);
}
#price section.pilates4 div.detail {
  border-color: var(--pilates4-color);
}
#price section.yogafree div.detail {
  border-color: var(--yogafree-color);
}
#price section.highschool div.detail {
  border-color: var(--highschool-color);
}
#price section.company div.detail {
  border-color: var(--company-color);
}
#price section.platium div.detail {
  border-color: var(--platium-color);
}