/* ========================================
   SCHOOL専用CSS（ページID：5441）
   デザインクリニックアカデミー
======================================== */


/* ========================================
   SCHOOL：ヘッダーロゴ切り替え
======================================== */

/* 通常ヘッダー・PC追従ヘッダー */
#body_wrap.page-id-5441 #header .c-headLogo__img,
#body_wrap.page-id-5441 #fix_header .c-headLogo__img {
  content: url("https://lulu-artmake.com/wp-content/uploads/common_header-school-logo_01.png");
}





/* ========================================
   SCHOOL専用CSS（ページID：5441）
   ヘッダー・ナビゲーション関連
   ※パープル配色への変更
======================================== */


/* ========================================
   SCHOOL：共通カラー・ホバー背景
======================================== */

#body_wrap.page-id-5441 {
  --swl-color_hov_gray: #F7F3F6;
  --color_header_bg: #FFFFFF;
}


/* ========================================
   SCHOOL：PCヘッダー
======================================== */

/* ----------------------------------------
   ヘッダー背景
---------------------------------------- */

#body_wrap.page-id-5441 #header,
#body_wrap.page-id-5441 .l-header,
#body_wrap.page-id-5441 .l-header__inner {
  background-color: #FFFFFF;
}

/* ----------------------------------------
   グローバルメニュー文字
---------------------------------------- */

/* メインタイトル */
#body_wrap.page-id-5441 #header .c-gnav .ttl {
  color: #7E5475 !important;
}

/* サブタイトル */
#body_wrap.page-id-5441 #header .c-gnav .c-smallNavTitle.desc {
  color: #A98AA2;
}

/* ----------------------------------------
   PC：ホバー・ドロップダウン
---------------------------------------- */

@media (min-width: 960px) {

  /* グローバルメニューのホバー */
  #body_wrap.page-id-5441 .c-gnav > li:hover > a,
  #body_wrap.page-id-5441 .c-gnav > .-current > a,
  #body_wrap.page-id-5441 #header .c-gnav .sub-menu li > a:hover {
    background-color: #F7F3F6;
    color: #7E5475;
  }

  /* ドロップダウンの文字 */
  #body_wrap.page-id-5441 #header .c-gnav .sub-menu a {
    color: #7E5475;
  }

  /* ドロップダウンの補足説明 */
  #body_wrap.page-id-5441 #header .c-gnav .sub-menu .c-smallNavTitle.desc {
    color: #A98AA2;
  }

  /* ドロップダウンの矢印 */
  #body_wrap.page-id-5441 #header .c-gnav .sub-menu a::before {
    color: #A98AA2;
  }

}


/* ========================================
   SCHOOL：PC追従ヘッダー
======================================== */

@media (min-width: 960px) {

  /* ----------------------------------------
     背景色
  ---------------------------------------- */

  #body_wrap.page-id-5441 #fix_header,
  #body_wrap.page-id-5441 #fix_header .l-fixHeader__inner {
    background-color: #FFFFFF !important;
  }

  /* 背景レイヤー */
  #body_wrap.page-id-5441 #fix_header::before {
    background-color: #FFFFFF;
  }

  /* ----------------------------------------
     メインタイトル
  ---------------------------------------- */

  #body_wrap.page-id-5441 #fix_header .c-gnav .ttl {
    color: #7E5475 !important;
  }

  /* ----------------------------------------
     サブタイトル
  ---------------------------------------- */

  #body_wrap.page-id-5441 #fix_header .c-gnav .c-smallNavTitle.desc {
    color: #A98AA2;
  }

  /* ----------------------------------------
     ホバー背景
  ---------------------------------------- */

  #body_wrap.page-id-5441 #fix_header .c-gnav > li:hover > a,
  #body_wrap.page-id-5441 #fix_header .c-gnav > .-current > a {
    background-color: #F7F3F6;
  }

  /* ----------------------------------------
     ドロップダウンメニュー
  ---------------------------------------- */

  /* メニュー文字 */
  #body_wrap.page-id-5441 #fix_header .c-gnav .sub-menu a {
    color: #7E5475;
  }

  /* サブタイトル */
  #body_wrap.page-id-5441 #fix_header .c-gnav .sub-menu .c-smallNavTitle.desc {
    color: #A98AA2;
  }

  /* 矢印 */
  #body_wrap.page-id-5441 #fix_header .c-gnav .sub-menu a::before {
    color: #A98AA2;
  }

  /* ホバー背景 */
  #body_wrap.page-id-5441 #fix_header .c-gnav .sub-menu li > a:hover {
    background-color: #F7F3F6;
  }

}


/* ========================================
   SCHOOL：ヘッダーロゴ切り替え
======================================== */

/* 通常ヘッダー・PC追従ヘッダー */
#body_wrap.page-id-5441 #header .c-headLogo__img,
#body_wrap.page-id-5441 #fix_header .c-headLogo__img {
  content: url("https://lulu-artmake.com/wp-content/uploads/common_header-school-logo_01.png");
}


/* ========================================
   SCHOOL：スマホヘッダーボタン
======================================== */

@media (max-width: 959px) {

  /* ----------------------------------------
     MENUアイコン・文字
  ---------------------------------------- */

  #body_wrap.page-id-5441 .c-iconBtn.-menuBtn,
  #body_wrap.page-id-5441 .c-iconBtn.-menuBtn::before {
    color: #7E5475;
  }

  /* ----------------------------------------
     SCHOOL・MENSボタン
  ---------------------------------------- */

  /* 通常ヘッダー・ドロワーヘッダー共通 */
  #body_wrap.page-id-5441 #header .lulu-header-link,
  #body_wrap.page-id-5441 #sp_menu .lulu-header-link {
    color: #7E5475;
  }

}


/* ========================================
   SCHOOL：スマホドロワーメニュー
======================================== */

@media (max-width: 959px) {

  /* ----------------------------------------
     ドロワー背景
  ---------------------------------------- */

  #body_wrap.page-id-5441 #sp_menu .p-spMenu__inner,
  #body_wrap.page-id-5441 #sp_menu .p-spMenu__body {
    background-color: #FFFFFF !important;
  }

  /* SWELL標準の背景レイヤー */
  #body_wrap.page-id-5441 #sp_menu .p-spMenu__inner::before {
    background-color: #FFFFFF;
  }

  /* ----------------------------------------
     ドロワー上部背景
  ---------------------------------------- */

  #body_wrap.page-id-5441 #sp_menu .lulu-drawer-header,
  #body_wrap.page-id-5441 #sp_menu .lulu-drawer-reservation,
  #body_wrap.page-id-5441 #sp_menu .p-spMenu__closeBtn {
    background-color: #FFFFFF;
  }

  /* ----------------------------------------
     CLOSEボタン
  ---------------------------------------- */

  #body_wrap.page-id-5441 #sp_menu .p-spMenu__closeBtn .c-iconBtn,
  #body_wrap.page-id-5441 #sp_menu .p-spMenu__closeBtn .c-iconBtn::after {
    color: #7E5475;
  }

  /* ----------------------------------------
     メニュー文字
  ---------------------------------------- */

  #body_wrap.page-id-5441 #sp_menu .c-spnav a {
    color: #7E5475;
  }

  /* サブタイトル */
  #body_wrap.page-id-5441 #sp_menu .c-smallNavTitle.desc {
    color: #A98AA2;
  }

  /* ----------------------------------------
     予約ボタン
  ---------------------------------------- */

  #body_wrap.page-id-5441 #sp_menu .lulu-drawer-reservation__btn {
    background: #7E5475;
    color: #FFFFFF;
  }

  /* ----------------------------------------
     ＋／−ボタン
  ---------------------------------------- */

  #body_wrap.page-id-5441 #sp_menu .lulu-submenu-toggle {
    color: #A98AA2;
  }

  /* ----------------------------------------
     右矢印
  ---------------------------------------- */

  #body_wrap.page-id-5441 #sp_menu .c-spnav li:not(.menu-item-has-children) > a::after {
    border-top-color: #A98AA2;
    border-right-color: #A98AA2;
  }

  /* ----------------------------------------
     区切り線
  ---------------------------------------- */

  #body_wrap.page-id-5441 #sp_menu .c-spnav > li > a,
  #body_wrap.page-id-5441 #sp_menu .c-spnav .sub-menu > li > a {
    border-bottom-color: #E8E0E7;
  }

  /* ----------------------------------------
     下層メニュー背景
  ---------------------------------------- */

  #body_wrap.page-id-5441 #sp_menu .c-spnav > li.is-open > .sub-menu {
    background-color: #F7F3F6;
  }

  /* ----------------------------------------
     SNSエリア
  ---------------------------------------- */

  #body_wrap.page-id-5441 #sp_menu .lulu-drawer-sns {
    background-color: #F7F3F6;
  }

  /* SNS見出し・コピーライト */
  #body_wrap.page-id-5441 #sp_menu .lulu-sns-heading,
  #body_wrap.page-id-5441 #sp_menu .lulu-sns-copyright {
    color: #7E5475;
  }

  /* SNSアイコンの枠 */
  #body_wrap.page-id-5441 #sp_menu .lulu-sns-icons a {
    border-color: #E8E0E7;
    color: #7E5475;
  }

  /* SNSアイコン */
  #body_wrap.page-id-5441 #sp_menu .lulu-sns-icons i {
    color: #A98AA2;
  }

}


/* ----------------------------------------
   SCHOOL：スマホ予約ボタンのホバー
---------------------------------------- */

@media (max-width: 959px) and (hover: hover) {

  #body_wrap.page-id-5441 #sp_menu .lulu-drawer-reservation__btn:hover {
    background: #694461;
  }

}


/* ========================================
   SCHOOL：パンくずリスト
======================================== */

/* ----------------------------------------
   背景色・影
---------------------------------------- */

#body_wrap.page-id-5441 #breadcrumb.p-breadcrumb.-bg-on {
  background-color: #FFFFFF;
  box-shadow: none;
}

/* ----------------------------------------
   テキスト・リンクカラー
---------------------------------------- */

#body_wrap.page-id-5441 #breadcrumb,
#body_wrap.page-id-5441 #breadcrumb a {
  color: #7E5475;
}













/* ========================================
   SCHOOL：ページ全体の背景色
======================================== */

#body_wrap.page-id-5441 {
  background-color: #FAF8FA;
}

#body_wrap.page-id-5441 #content {
  background-color: #FAF8FA;
}


/* ========================================
   01. SCHOOL：H1文字色
======================================== */

#body_wrap.page-id-5441 .c-pageTitle__inner {
  color: #7E5475 !important;
}


























/* ========================================
   SCHOOL：フッター直前 ブログパーツ
======================================== */

/* ========================================
   SCHOOL：CLINIC
======================================== */

/* ----------------------------------------
   H2見出し
---------------------------------------- */

#body_wrap.page-id-5441 #before_footer_widget .title-wrap h2.anime-title {
  color: #7E5475;
}


/* ----------------------------------------
   タブボタン
---------------------------------------- */

/* 通常時 */
#body_wrap.page-id-5441 .clinic-tabs [role="tab"] {
  background: #F7F3F6;
  color: #7E5475;
}

/* 選択中 */
#body_wrap.page-id-5441 .clinic-tabs [role="tab"][aria-selected="true"] {
  background: #A98AA2;
  color: #FFFFFF;
}


/* ----------------------------------------
   クリニックカード
---------------------------------------- */

/* カード外枠 */
#body_wrap.page-id-5441 .clinic-card {
  border-color: #E8E0E7;
}

/* カード情報エリア */
#body_wrap.page-id-5441 .clinic-card__info {
  background: #F7F3F6;
  color: #7E5475;
}

/* クリニック名 */
#body_wrap.page-id-5441 .clinic-card__name {
  color: #7E5475;
}

/* 公式HP・Google MAPボタン */
#body_wrap.page-id-5441 .clinic-card__info a {
  border-color: #A98AA2;
  color: #7E5475;
}






























/* ========================================
page.php
functions.php
======================================== */

/* ========================================
   SCHOOL：メインビジュアル
======================================== */

#body_wrap.page-id-5441 #content {
    padding-top: 0;
}

#body_wrap.page-id-5441 .school-mainvisual {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-bottom: 40px;
}

#body_wrap.page-id-5441 .school-mainvisual picture {
    display: block;
}

#body_wrap.page-id-5441 .school-mainvisual img {
    display: block;
    width: 100%;
    height: 800px;
    object-fit: cover;
    object-position: center;
}

/* ========================================
   SCHOOL：メインビジュアル SP
======================================== */

@media (max-width: 767px) {

    #body_wrap.page-id-5441 .school-mainvisual {
        margin-bottom: 30px;
    }

    #body_wrap.page-id-5441 .school-mainvisual img {
        height: 400px;
        object-position: center;
    }

}