@charset "utf-8";

/* トークン・共通UI — design_review.md + top-section/*.png 準拠 */

:root {
  /* WordPress テーマ／スキル共通のエイリアス */
  --color-primary: var(--color-brand-purple);
  --color-accent: var(--color-clinic-green);

  --color-text: #1a1a1a;
  --color-text-muted: #4e505d;
  --color-text-sub: #505050;
  --color-text-dim: #333333;
  --color-brand-navy: #3c4175;
  --color-brand-purple: #825daa;
  --color-teal: #32504a;
  --color-clinic-green: #277e64;
  --color-clinic-green-soft: #5e9b94;
  --color-section-mint: #e8f3f0;
  --color-section-mint-2: #e0ece8;
  --color-button-clinic: #324e49;
  --color-text-accent: #68383c;
  --color-white: #ffffff;
  --color-line: #e5e5e5;
  --color-header-lavender: #ede8f4;
  --color-header-lavender-deep: #e4daf0;
  --color-medical-lavender: #c4b8dc;
  --color-tag-border: #825daa;
  --color-info-badge: #7d556f;
  --color-access-lavender: #f2f4fb;
  --color-footer-bg: #f0f2f7;

  --color-blob-1: #f7f6fc;
  --color-blob-2: #fde8e4;
  --color-blob-3: #d3e8ee;

  --font-sans: "IBM Plex Sans JP", "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", "Yu Mincho", serif;
  --font-en: "Cormorant Garamond", "Times New Roman", serif;
  --font-tel: "Poppins", sans-serif;

  --lh-44-77: 77px;
  --lh-26-45: 45.5px;
  --lh-20-35: 35px;
  --lh-18-32: 32.2px;
  --lh-16-32: 32px;
  --lh-16-28: 28px;
  --lh-16-24: 24px;
  --lh-14-25: 25.2px;
  --lh-13-22: 22.75px;

  --container-max: 980px;
  /* ヘッダー内ナビを1行に収めるため本文より広い */
  --container-max-header: 1200px;
  --gutter: 40px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  line-height: var(--lh-16-28);
  color: var(--color-text);
  background-color: var(--color-white);
  position: relative;
}

#container{
  position: relative;
  overflow: hidden;
}


.font-en {
  font-family: var(--font-en);
}

.font-serif {
  font-family: var(--font-serif);
}

.font-tel {
  font-family: var(--font-tel);
  font-weight: 500;
}

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header > .container {
  max-width: calc(var(--container-max-header) + var(--gutter) * 2);
}

/* ----- 01 HEADER ----- */
.site-header {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 110px;
  transition: .3s all ease;
}

.small_header .site-header {
  background: rgba(230, 226, 243, 0.95);
}

.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-block: 16px 18px;
}

.site-header__brand-block {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-shrink: 0;
  min-width: 0;
}

/* トップへの導線（div の代わりに a.site-header__brand-block を使う場合） */
a.site-header__brand-block {
  text-decoration: none;
  color: inherit;
}

a.site-header__brand-block:hover .site-header__title-img {
  opacity: 0.92;
}

a.site-header__brand-block:focus-visible {
  outline: 2px solid var(--color-brand-navy);
  outline-offset: 4px;
}

.site-header__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 4.5rem;
}

.site-header__mark-caption {
  font-size: 9px;
  line-height: 1.2;
  color: #e891a8;
  text-align: center;
  max-width: 72px;
}

.site-header__titles {
  flex-shrink: 0;
  align-self: flex-end;
  width: 15rem;
}

.site-header__nav-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.site-header__upper {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 20px;
  width: 100%;
}

.site-header__utils {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 18px;
  flex-shrink: 0;
}

.site-header__utils li {
  position: relative;
  padding-left: 1rem;
}

.site-header__utils li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--color-brand-navy);
}

.site-header__utils a {
  font-size: 16px;
  line-height: var(--lh-16-28);
  color: var(--color-brand-navy);
}

.site-header__utils a:hover {
  text-decoration: underline;
}

.site-header__tel {
  font-size: 24px;
  line-height: 42px;
  color: var(--color-brand-navy);
  white-space: nowrap;
}

.site-header__tel a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-header__tel-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.site-header__lower {
  width: 100%;
}

.site-header__lower .nav-list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0 1rem;
  margin-left: auto;
  width: max-content;
  max-width: 100%;
}

.site-header__lower a {
  font-size: 1.125rem;
  line-height: var(--lh-18-32);
  color: var(--color-text);
  font-weight: 500;
  transition: .3s all ease;
  position: relative;
  padding: 0 0.2em;
}

.site-header__lower a:hover {
  color: var(--color-brand-navy);
}

.site-header__lower a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.125rem;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-accent);
  opacity: 0;
  transition: .3s all ease;
}

.site-header__lower .nav-list a[aria-current="page"]{
  color: var(--color-text-accent);
}

.site-header__lower .nav-list a[aria-current="page"]::before {
  opacity: 1;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main{
  position: relative;
  z-index: 1;
}

/* ----- サイトフッター（全ページ共通） ----- */
.site-footer {
  padding: 48px var(--gutter) 40px;
  background-color: var(--color-access-lavender);
  text-align: center;
  position: relative;
  z-index: 1;
}

.site-footer__copyright {
  margin: 0;
  font-size: 13px;
  line-height: var(--lh-13-22);
  color: var(--color-text-dim);
}

.nav_oc,
.side_nav{
  display: none;
}

/*ページトップ*/
.pagetop{
    width:4rem;
    height:4rem;
    position:fixed;
    bottom:3rem;
    right:1rem;
     transform:translateY(100px);
    transition:.3s all ease;
    opacity:0;
    z-index: 0;
}

.pagetop.show{
    transform:translateY(0);
    opacity:1;
    z-index:9;
}

    .pagetop a{
        box-sizing: border-box;
        display:flex;
        justify-content: center;
        align-items: center;
        transition:.5s all ease;
        width:100%;
        height:100%;
        text-decoration:none;
        border-radius: 50%;
        background: var(--color-brand-navy);
        padding-bottom: 0.2rem;
    }
    
    .pagetop a:hover{
        filter: brightness(1.1);
    }


    .pagetop a:before{
        font-family: FontAwesome;
        content:"\f106";
        color: #fff;
        font-size: 2.4rem;
    }

br.sp{
  display: none;
}

a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

/*1240px以下*/
@media screen and (min-width:1px) and (max-width:1240px){
  .site-header__inner{
    padding-inline: 40px 3vw;
  }

  .site-header__lower .nav-list{
    gap: 0 1vw;
  }

  .site-header__lower a{
    font-size: 1.45vw;
    white-space: nowrap;
  }
}


/*1180px以下*/
@media screen and (min-width:1px) and (max-width:1180px){

    
}

/*1080px以下*/
@media screen and (min-width:1px) and (max-width:1080px){

}

/*ipad*/
@media screen and (min-width:1px) and (max-width:1024px){
  html {
      font-size: 1.6vw;
  }

  .site-header{
    height: 6rem;
  }

  .container.site-header__inner{
    height: 100%;
    align-items: center;
    padding: 0 7rem 0 3vw;
  }

  .site-header__utils,
  .site-header__lower{
    display: none;
  }

  .nav_oc,
  .side_nav{
    display: block;
  }

  /*-----nav_oc-----*/
  .nav_oc{
      width: 6rem;
      height: 6rem;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 11;
      transition: .3s all ease;
  }

      .menu-trigger{
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          background: var(--base_color2);
          border: none;
          cursor: pointer;
          outline: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 0.25rem;
          transition: .3s all ease;
      }

      .menu-trigger:hover{
          filter: brightness(1.1);
      }

          .menu-trigger .lines{
              position: relative;
              display: block;
              width: 2rem;
              height: 1.375rem;
              margin-bottom: 0.5rem;
              transition: .3s all ease;
          }

              .menu-trigger .lines span {
                  display: inline-block;
                  transition: all .4s;
                  box-sizing: border-box;
                  background-color: var(--color-brand-navy);
                  position: absolute;
                  width: 2rem;
                  left: 0;
                  height: 2px;
              }

              .menu-trigger .lines span:nth-of-type(1) {
                  top: 0;
              }

              .menu-trigger .lines span:nth-of-type(2) {
                  top: calc(50% - 1px);
              }
              .menu-trigger .lines span:nth-of-type(3) {
                  bottom: 0;
              }

              .menu-trigger.active .lines span:nth-of-type(1) {
                  transform: rotate(35deg) scaleX(1.15);
                  transform-origin: left top;
              }

              .menu-trigger.active .lines span:nth-of-type(2) {
                  opacity: 0;
              }

              .menu-trigger.active .lines span:nth-of-type(3) {
                  transform: rotate(-35deg) scaleX(1.15);
                  transform-origin: left bottom;
              }

          .menu-trigger .lbl{
              color: var(--color-brand-navy);
              line-height: 1;
              margin-top: 0.5rem;
          }

  /*-----side_nav-----*/
  .side_nav{
      box-sizing: border-box;
      position: fixed;
      top: 0;
      right: 0;
      z-index: -1;
      opacity: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      transition: .3s all ease;
      background: rgba(0,0,0,0);
      transform: translateX(0.5rem);
  }

  .side_nav.active{
      z-index: 10;
      opacity: 1;
      transform: translateX(0);
      background: rgba(0,0,0,0.75);
      overflow-y: auto;
  }

      .side_nav_box_wrapper{
          box-sizing: border-box;
          width: 100%;
          height: 100vh;
          background: #fff;
      }

      .side_nav_box{
          box-sizing: border-box;
          background: #fff;
          padding: 8rem 5vw 5vw 5vw;
          width: 100%;
          height: 100%;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
      }

          .side_nav_box > .box_header{
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-bottom: 3rem;
              gap: 1.5rem;
          }

                  .side_nav_box > .box_header .logo_site_title a{
                      display: flex;
                      align-items: center;
                      gap: 1rem;
                  }

                  .side_nav_box > .box_header .logo_site_title a .sn_logo{
                      width: 7rem;
                  }

                  .side_nav_box > .box_header .logo_site_title a .sn_site_title{
                      width: 20rem;
                  }

                .snb__tel{
                  font-size: 2rem;
                  color: var(--color-brand-navy);
                }


          .side_nav_box > .box_inner{
          }

            .side_nav .side_global_nav1{
              margin-bottom: 3rem;
            }

              .side_nav .side_global_nav1 > ul{
                  display: flex;
                  flex-wrap: wrap;
                  gap: 2rem;
              }

                  .side_nav .side_global_nav1 > ul > li{
                      border-bottom: 1px solid rgba(0,0,0,0.1);
                      width: calc((100% - 6rem) / 4);
                  }

                      .side_nav .side_global_nav1 > ul > li > a{
                        display: block;
                        font-size: 1.3em;
                        font-weight: 500;
                        text-align: center;
                        padding: 0.5rem 0;
                        color: var(--color-brand-navy);
                      }

              .side_nav .side_global_nav2 > ul{
                  display: flex;
                  justify-content: center;
                  gap: 2em;
              }

                  .side_nav .side_global_nav2 > ul > li{
                      position: relative;
                      padding-left: 1em;
                  }

                      .side_nav .side_global_nav2 > ul > li::before{
                          font-family: FontAwesome;
                          content:"\f105";
                          color: #aaa;
                          position: absolute;
                          top: 0;
                          left: 0;
                      }

                      .side_nav .side_global_nav2 > ul > li a{
                        display: block;
                        font-size: 1.125rem; 
                      }

          .side_nav_box > .box_footer{
              color: #fff;
          }
}

/* ##########SP########## */
@media screen and (min-width:1px) and (max-width:575px) {
  html{
    font-size: 3.6vw;
  }

  .site-header{
    height: 16vw;
  }

  .container.site-header__inner{
    padding-right: 20vw;
  }

  .site-header__brand-block{
    gap: 0.5rem;
  }

  .site-header__mark{
    width: 3.5rem;
  }
  .site-header__titles{
    width: 11rem;
  }

  .site-header__nav-block{
    display: none;
  }

  .site-footer{
    padding: 1rem;
  }

  .nav_oc{
    width: 16vw;
    height: 16vw;
  }

  .menu-trigger .lbl{
    font-size: 0.8em;
    margin-top: 0.2em;
  }

  .side_nav_box{
    padding-top: 20vw;
  }

  .side_nav_box > .box_header .logo_site_title a{
    gap: 0.5rem;
  }

  .side_nav_box > .box_header .logo_site_title a .sn_logo{
    width: 4rem;
  }

  .side_nav_box > .box_header .logo_site_title a .sn_site_title{
    width: 14rem;
  }

  .snb__tel{
    font-size: 1.8rem;
  }

  .side_nav .side_global_nav1 > ul{
    gap: 1rem;
  }

  .side_nav .side_global_nav1 > ul > li{
    width: calc((100% - 1rem) / 2);
  }

  .side_nav .side_global_nav2 > ul{
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 1rem;
  }

  .side_nav .side_global_nav2 > ul > li{
    width: calc((100% - 1rem) / 2);
  }

  br.pc{
    display: none;
  }

  br.sp{
    display: inline;
  }

  a[href^="tel:"] {
    pointer-events: initial;
  }
}

/* ##########印刷用########## */
@media print{
    html{
        width: 1024px;
    }
    
    header{
        position:relative;
    }

    .site-header__brand-block{
      gap: 0.5rem;
    }
   
    
    .contents{
        padding-top: 0;
    }
    
    .pagetop{
        display: none;
    }
    
}