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

:root {
  --master-color: #fc8700;
  --daytime-color: #c36996;
  --u29-color: #49addc;
  --family-color: #3ec77f;
  --highschool-color: #fe7e8d;
  --company-color: #737db5;
  --platium-color: #8b8268;
}

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

@media (max-width: 575px) {
  #about > section {
    background-image: url(../img/about-back_pc.webp);
  }
  #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.webp);
}
#reason div.reason2 {
  background-image: url(../img/reason02.webp);
}
#reason div.reason3 {
  background-image: url(../img/reason03.webp);
}
#reason div.reason4 {
  background-image: url(../img/reason04.webp);
}
@media (max-width: 767px) {
  #reason div.reason1 {
    background-image: url(../img/reason_sp1.webp);
  }
  #reason div.reason2 {
    background-image: url(../img/reason_sp2.webp);
  }
  #reason div.reason3 {
    background-image: url(../img/reason_sp3.webp);
  }
  #reason div.reason4 {
    background-image: url(../img/reason_sp4.webp);
  }
}

/*------------------------
料金表
------------------------*/
/* プラン別カラー */
#price div.plan section.master {
  background-color: var(--master-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.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.master .color {
  color: var(--master-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.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.master p.expand a {
  background-color: var(--master-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.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.master div.detail {
  border-color: var(--master-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.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);
}