@charset "UTF-8";

/* =========================================================
   ILCHI / HIROSHIMA C2
   File: 12-c2-hiroshima.css
   Site: イルチブレインヨガ広島スタジオ
   Updated: 2026-08-22

   方針：
   - 広島固有の調整だけを置く
   - 固定ページ・投稿・アーカイブ・イベント共通
   - C2 TOP本文のデザインは 07-c2.css
   - 直営共通は 01-common-direct.css
========================================================= */


/* =========================================================
   1. PC通常ヘッダー FINAL
   左：地域名＋スタジオ名
   右：グローバルメニュー
   全体を中央寄せ
========================================================= */

@media screen and (min-width: 1200px) {

  /* -----------------------------------------
     ヘッダー全体
  ----------------------------------------- */

  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled) {
    background: #ffffff !important;
  }

  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled)
  > .container.siteHeadContainer {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: fit-content !important;
    max-width: calc(100% - 40px) !important;
    min-height: 88px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }


  /* -----------------------------------------
     左：サイト名
  ----------------------------------------- */

  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled)
  .navbar-header {
    flex: 0 0 auto !important;
    float: none !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled)
  .siteHeader_logo {
    float: none !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.25 !important;
  }


  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled)
  .siteHeader_logo > a {
    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #17352c !important;
    text-decoration: none !important;

    white-space: nowrap !important;
  }


  /* 地域名 */
  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled)
  .siteHeader_logo > a > span::before {
    content: "［広島市中区］" !important;

    display: block !important;

    margin: 0 0 3px !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    letter-spacing: 0.02em !important;
  }


  /* スタジオ名 */
  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled)
  .siteHeader_logo > a > span {
    display: block !important;

    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    letter-spacing: 0.01em !important;

    white-space: nowrap !important;
  }


  /* -----------------------------------------
     右：グローバルメニュー
  ----------------------------------------- */

  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled)
  #gMenu_outer {
    flex: 0 1 auto !important;
    float: none !important;

    display: flex !important;
    align-items: center !important;

    width: auto !important;

    margin: 0 0 0 38px !important;
    padding: 0 !important;
  }


  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled)
  #gMenu_outer > nav {
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled)
  #gMenu_outer ul.gMenu {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled)
  #gMenu_outer ul.gMenu > li {
    flex: 0 0 auto !important;
    float: none !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* メニュー同士を詰める */
  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled)
  #gMenu_outer ul.gMenu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;

    padding-left: 5px !important;
    padding-right: 5px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    white-space: nowrap !important;
  }


  /* -----------------------------------------
     最後の「体験のご予約」
  ----------------------------------------- */

  html body:not(.header_scrolled)
  header.siteHeader:not(.header_scrolled)
  #gMenu_outer ul.gMenu > li:last-child > a {
    min-height: 44px !important;

    margin-left: 10px !important;

    padding-left: 20px !important;
    padding-right: 20px !important;

    background: #739565 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;

    white-space: nowrap !important;
  }

}


/* =========================================================
   2. PC追従ヘッダー
   「体験のご予約」だけグリーンボタン
========================================================= */

@media screen and (min-width: 1200px) {

  html body.header_scrolled
  header.siteHeader
  #gMenu_outer li:last-child > a,

  html body
  header.siteHeader.header_scrolled
  #gMenu_outer li:last-child > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 40px !important;

    margin-left: 8px !important;
    padding: 0 20px !important;

    background: #739565 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;

    white-space: nowrap !important;
  }

}