/*
 Theme Name: Order.OnsenCosme
 Theme URI: （テーマのURLを入力)
 Author: （製作者名を入力）
 Author URI: 
 Description: 日本メディカル温泉コスメ カスタム化粧水専用テーマ
 License:　GPL v2 or later
 */
@import url('https://fonts.googleapis.com/css?family=Montserrat|Noto+Sans+JP:300,400,500&display=swap&subset=japanese');
@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  background: transparent;
  text-decoration: none;
  font-style: normal; }

img {
  vertical-align: bottom;
  border: none; }

html {
  font-size: 10px;
  color: #595858; }
@media (max-width:639px) {
  html {
    font-size: 2vw; } }
html * {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300; }
html body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  position: relative;
  left: 0px;
  background-color: #fff;
  color: #595858; }
@media (max-width:959px) {
  html body {
    -webkit-transition: 0.5s;
    transition: 0.5s; }
    html body::-webkit-scrollbar {
      display: none; }
    html body.open {
      left: -80vw; } }
html body::after {
  content: '　';
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 10000;
  background-color: #000;
  background-image: url('images/spin.gif');
  background-position: 50% 50%;
  background-size: 40px 40px;
  background-repeat: no-repeat;
  pointer-events: none;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  opacity: 0; }
html body.busy_mode::after {
  pointer-events: auto;
  opacity: 0.4; }

header.site_header {
  position: fixed;
  width: 100%;
  left: 0px;
  box-sizing: border-box;
  z-index: 3000;
  background-color: #fff; }
  header.site_header > .contents {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between; }
    header.site_header > .contents h1.logo {
      -webkit-box-flex: 1;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 20rem;
      padding: 1rem;
      box-sizing: border-box;
      text-align: left;
      font-size: 1.5rem;
      line-height: 1em; }
      header.site_header > .contents h1.logo a.custom-logo-link img {
        width: auto;
        height: 5rem;
        vertical-align: middle; }
      header.site_header > .contents h1.logo a {
        color: #595858; }
      header.site_header > .contents h1.logo small {
        display: block;
        font-size: 1rem; }
    header.site_header > .contents ul.menus {
      -webkit-box-flex: 0;
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 12rem;
      position: relative;
      padding: 1rem;
      list-style: none;
      text-align: right; }
      header.site_header > .contents ul.menus li.menu_button {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 3rem;
        height: 3rem; }
        header.site_header > .contents ul.menus li.menu_button .icon {
          position: absolute;
          top: 1.5rem;
          left: 0px;
          right: 0px;
          width: 3rem;
          height: 1px;
          background-color: #595858;
          -webkit-transition: 0.5s;
          transition: 0.5s; }
          header.site_header > .contents ul.menus li.menu_button .icon::before, header.site_header > .contents ul.menus li.menu_button .icon::after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            width: 100%;
            height: 1px;
            background-color: #595858;
            -webkit-transition: 0.5s 0.5s;
            transition: 0.5s 0.5s; }
          header.site_header > .contents ul.menus li.menu_button .icon::before {
            transform: -webkit- translateY(-1rem);
            transform: translateY(-1rem); }
          header.site_header > .contents ul.menus li.menu_button .icon::after {
            transform: -webkit- translateY(1rem);
            transform: translateY(1rem); }
        header.site_header > .contents ul.menus li.menu_button.open .icon {
          transform: -webkit- rotateZ(45deg);
          transform: rotateZ(45deg);
          -webkit-transition: 0.5s 0.5s;
          transition: 0.5s 0.5s; }
          header.site_header > .contents ul.menus li.menu_button.open .icon::before {
            -webkit-transition: 0.5s;
            transition: 0.5s;
            transform: -webkit- translateY(0px) rotateZ(-90deg);
            transform: translateY(0px) rotateZ(-90deg); }
          header.site_header > .contents ul.menus li.menu_button.open .icon::after {
            -webkit-transition: 0.5s;
            transition: 0.5s;
            transform: -webkit- translateY(0px) rotateZ(90deg);
            transform: translateY(0px) rotateZ(90deg); }
      header.site_header > .contents ul.menus li.me, header.site_header > .contents ul.menus li.cart {
        display: inline-block;
        padding: 0.5rem;
        margin: 0px; }
        header.site_header > .contents ul.menus li.me img, header.site_header > .contents ul.menus li.cart img {
          display: block;
          width: 4rem;
          height: auto; }
  header.site_header div.back_to_top {
    display: block;
    position: fixed;
    width: 1.2rem;
    height: 1.2rem;
    padding: 2rem;
    bottom: 0px;
    right: 0px;
    background-color: rgba(89, 88, 88, 0.3);
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.2rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: normal;
    color: #fff;
    -webkit-transition: 0.5s;
    transition: 0.5s; }
    header.site_header div.back_to_top::before {
      content: "\f077";
      font-family: 'Font Awesome 5 Free';
      font-weight: 900; }
    header.site_header div.back_to_top:hover {
      background-color: #1B3468; }
  @media (max-width:959px) {
    header.site_header div.menu_button {
      display: block;
      position: absolute;
      top: 0px;
      right: 0px;
      width: 5rem;
      height: 5rem;
      z-index: 2;
      text-align: center;
      -webkit-transition: 0.5s;
      transition: 0.5s; }
      header.site_header div.menu_button .line1, header.site_header div.menu_button .line2, header.site_header div.menu_button .line3 {
        width: 3rem;
        height: 2px;
        position: absolute;
        left: 1rem;
        top: 2.5rem;
        background-color: #595858; }
      header.site_header div.menu_button .line1 {
        -webkit-transition: 1s;
        transition: 1s;
        transform: -webkit- translateY(-1rem) rotateZ(0deg);
        transform: translateY(-1rem) rotateZ(0deg); }
      header.site_header div.menu_button .line2 {
        -webkit-transition: 1s;
        transition: 1s;
        transform: -webkit- rotateZ(0deg);
        transform: rotateZ(0deg); }
      header.site_header div.menu_button .line3 {
        -webkit-transition: 1s;
        transition: 1s;
        transform: -webkit- translateY(1rem) rotateZ(0deg);
        transform: translateY(1rem) rotateZ(0deg); }
    header.site_header div.menu-header-container {
      display: block;
      position: fixed;
      right: -80vw;
      width: 80vw;
      height: 100vh;
      z-index: 1;
      background-color: #fff;
      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3) inset;
      -webkit-transition: 0.5s;
      transition: 0.5s; }
      header.site_header div.menu-header-container ul.menu {
        width: 100%;
        list-style: none;
        text-align: center;
        -webkit-transition: 0.5s;
        transition: 0.5s; }
        header.site_header div.menu-header-container ul.menu > li {
          padding: 1rem;
          border-top-style: solid;
          border-top-width: 1px;
          border-top-color: #cdcdcd; }
          header.site_header div.menu-header-container ul.menu > li a {
            display: block;
            padding: 10px 5px;
            text-align: center;
            font-size: 16px;
            line-height: 16px;
            color: #595858;
            -webkit-transition: 0.5s;
            transition: 0.5s; }
            header.site_header div.menu-header-container ul.menu > li a span.icon {
              display: inline-block;
              margin: 0px 0.5rem;
              vertical-align: middle; }
              header.site_header div.menu-header-container ul.menu > li a span.icon img {
                width: 3rem;
                height: auto; }
            header.site_header div.menu-header-container ul.menu > li a h3 {
              margin: 0px 0.5rem;
              text-align: center;
              font-size: 1.8rem;
              line-height: 1em;
              font-weight: 300;
              font-family: 'Noto Sans JP', sans-serif;
              vertical-align: middle; }
          header.site_header div.menu-header-container ul.menu > li.active a, header.site_header div.menu-header-container ul.menu > li.current-menu-ancestor a {
            color: #1B3468; }
      header.site_header div.menu-header-container ul.menu, header.site_header div.menu-header-container ul.sub-menu {
        -webkit-transition: 0.5s;
        transition: 0.5s; }
        header.site_header div.menu-header-container ul.menu li.menu-item-has-children > .link, header.site_header div.menu-header-container ul.sub-menu li.menu-item-has-children > .link {
          position: relative; }
          header.site_header div.menu-header-container ul.menu li.menu-item-has-children > .link .next, header.site_header div.menu-header-container ul.sub-menu li.menu-item-has-children > .link .next {
            display: block;
            position: absolute;
            margin: auto;
            padding: 1rem 2rem;
            top: 0px;
            bottom: 0px;
            right: 0px;
            z-index: 10;
            font-size: 2rem;
            line-height: 1em;
            color: #fff;
            cursor: pointer; }
            header.site_header div.menu-header-container ul.menu li.menu-item-has-children > .link .next::after, header.site_header div.menu-header-container ul.sub-menu li.menu-item-has-children > .link .next::after {
              content: "\f138";
              font-family: 'Font Awesome 5 Free';
              font-weight: 900; }
    header.site_header::after {
      content: ' ';
      display: block;
      position: absolute;
      width: 100vw;
      height: 100vh;
      left: 0px;
      z-index: 0;
      -webkit-transition: 1s;
      transition: 1s;
      opacity: 0;
      background-color: #000;
      pointer-events: none; }
      header.site_header.open div.menu-header-container {
        right: 0px; } }
@media (min-width:960px) {
  header.site_header {
    -webkit-transition: 0.5s;
    transition: 0.5s; }
    header.site_header > .contents {
      -webkit-box-flex: 0;
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: auto;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-lines: multiple;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap; }
      header.site_header > .contents h1.logo {
        -webkit-box-flex: 2;
        flex-grow: 2;
        flex-shrink: 2;
        flex-basis: 30rem; }
      header.site_header > .contents ul.menus {
        padding-top: 1rem; }
        header.site_header > .contents ul.menus li.menu_button {
          display: none; }
    header.site_header div.menu-header-container {
      -webkit-box-flex: 1;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;
      padding: 1rem;
      text-align: center; }
      header.site_header div.menu-header-container ul.menu {
        position: relative;
        margin: 0px auto;
        list-style: none;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-lines: single;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: center;
        justify-content: center; }
        header.site_header div.menu-header-container ul.menu > li {
          padding: 0px;
          -webkit-transition: 0.5s;
          transition: 0.5s; }
          header.site_header div.menu-header-container ul.menu > li a {
            display: block;
            box-sizing: border-box;
            padding: 1rem 0px;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-lines: single;
            -webkit-flex-wrap: nowrap;
            flex-wrap: nowrap;
            -webkit-align-items: center;
            align-items: center;
            text-align: center;
            font-size: 1.1rem;
            line-height: 1.5em;
            font-family: 'Noto Sans JP', sans-serif;
            color: #595858; }
            header.site_header div.menu-header-container ul.menu > li a h3 {
              padding: 0px 2rem;
              text-align: center;
              font-size: 1.4rem;
              line-height: 1.25em;
              font-weight: 300;
              word-break: keep-all;
              -webkit-transition: 0.5s;
              transition: 0.5s; }
          header.site_header div.menu-header-container ul.menu > li:hover > .link a h3, header.site_header div.menu-header-container ul.menu > li.active > .link a h3 {
            color: #1B3468; }
          header.site_header div.menu-header-container ul.menu > li > ul.sub-menu {
            position: absolute;
            width: 100%;
            left: 0px;
            background-color: #1B3468;
            list-style: none;
            text-align: center;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-lines: single;
            -webkit-flex-wrap: nowrap;
            flex-wrap: nowrap;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-transition: 0.5s;
            transition: 0.5s;
            opacity: 0;
            transform: -webkit- translateY(-10px);
            transform: translateY(-10px);
            pointer-events: none; }
            header.site_header div.menu-header-container ul.menu > li > ul.sub-menu > li .link a h3 {
              text-align: center;
              font-size: 12px;
              line-height: 12px;
              font-family: 'Noto Sans JP', sans-serif;
              font-weight: normal;
              color: #fff; }
            header.site_header div.menu-header-container ul.menu > li > ul.sub-menu > li:hover, header.site_header div.menu-header-container ul.menu > li > ul.sub-menu > li.active {
              background-color: #C164B6; }
            header.site_header div.menu-header-container ul.menu > li > ul.sub-menu > li > ul.sub-menu {
              position: absolute;
              width: 100%;
              left: 0px;
              background-color: #1B3468;
              list-style: none;
              text-align: center;
              display: -webkit-box;
              display: -webkit-flex;
              display: flex;
              -webkit-box-lines: single;
              -webkit-flex-wrap: nowrap;
              flex-wrap: nowrap;
              -webkit-justify-content: center;
              justify-content: center;
              -webkit-transition: 0.5s;
              transition: 0.5s;
              opacity: 0;
              transform: -webkit- translateY(-10px);
              transform: translateY(-10px);
              pointer-events: none; }
              header.site_header div.menu-header-container ul.menu > li > ul.sub-menu > li > ul.sub-menu li:hover > .link a h3, header.site_header div.menu-header-container ul.menu > li > ul.sub-menu > li > ul.sub-menu li.active > .link a h3 {
                color: #C164B6; }
          header.site_header div.menu-header-container ul.menu > li:hover > ul.sub-menu {
            opacity: 1;
            transform: -webkit- translateY(0px);
            transform: translateY(0px);
            pointer-events: auto; }
            header.site_header div.menu-header-container ul.menu > li:hover > ul.sub-menu li:hover > ul.sub-menu {
              opacity: 1;
              transform: -webkit- translateY(0px);
              transform: translateY(0px);
              pointer-events: auto; }
    header.site_header.compact {
      background-color: rgba(255, 255, 255, 0.8); } }

main.site_main {
  display: block;
  overflow: hidden;
  padding-top: 8rem; }
  main.site_main .page_header {
    padding: 0px;
    margin: 0px; }
    main.site_main .page_header .title {
      position: relative;
      overflow: hidden;
      height: 44rem;
      text-align: center; }
      main.site_main .page_header .title .text {
        display: inline-block;
        position: relative;
        min-width: 20rem;
        width: auto;
        height: 20rem;
        margin: 0px auto;
        padding: 0px 2rem;
        top: 50%;
        z-index: 2;
        transform: -webkit- translateY(-50%);
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.4);
        border-style: solid;
        border-width: 1px;
        border-color: #fff; }
        main.site_main .page_header .title .text h1 {
          position: relative;
          top: 50%;
          transform: -webkit- translateY(-50%);
          transform: translateY(-50%);
          font-size: 2.8rem;
          color: #fff;
          font-family: 'Noto Serif JP', serif;
          font-weight: 300;
          text-align: center;
          letter-spacing: 0.1em; }
      main.site_main .page_header .title .image {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        overflow: hidden;
        z-index: 1; }
        main.site_main .page_header .title .image img, main.site_main .page_header .title .image video {
          left: 0px;
          width: 100%;
          max-height: 110vh;
          height: 110%;
          object-fit: cover;
          object-position: center; }
    main.site_main .page_header .breadcrumb-container {
      display: block;
      width: 100%;
      margin: 0px auto;
      box-sizing: border-box;
      background-color: rgba(255, 255, 255, 0.8); }
      main.site_main .page_header .breadcrumb-container ul {
        display: block;
        max-width: 96rem;
        width: 100%;
        margin: 0px auto;
        padding: 4rem 1rem;
        box-sizing: border-box;
        list-style: none; }
        main.site_main .page_header .breadcrumb-container ul li {
          display: inline-block;
          -webkit-box-flex: 1;
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: auto; }
          main.site_main .page_header .breadcrumb-container ul li:not(:last-child) {
            border-right-style: solid;
            border-right-width: 1px;
            border-right-color: #595858; }
          main.site_main .page_header .breadcrumb-container ul li a {
            display: block;
            padding: 0px 1rem;
            color: #595858;
            font-size: 1.3rem;
            line-height: 1em;
            font-weight: 300; }
  main.site_main .page_main {
    width: 100%;
    height: auto;
    padding: 0px;
    box-sizing: border-box; }
    main.site_main .page_main > .page_sidebar {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 24rem;
      height: 100vh;
      z-index: 2500;
      background-color: #fff;
      box-shadow: 0 5px 11px rgba(0, 0, 0, 0.3);
      -webkit-transition: 0.5s;
      transition: 0.5s;
      transform: -webkit- translateX(-24rem);
      transform: translateX(-24rem); }
      main.site_main .page_main > .page_sidebar.open {
        transform: -webkit- translateX(0px);
        transform: translateX(0px); }
        main.site_main .page_main > .page_sidebar .sidebar_button::after {
          display: block;
          position: absolute;
          bottom: 6rem;
          right: -2.5rem;
          padding: 3rem 0.5rem;
          height: 1.5rem;
          width: 1.5rem;
          text-align: center;
          font-size: 1.5rem;
          line-height: 1em;
          color: #fff;
          border-radius: 0px 10px 10px 0px;
          background-color: #C164B6;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
          content: "\f054";
          font-family: 'Font Awesome 5 Free';
          font-weight: 900; }
      main.site_main .page_main > .page_sidebar .article_nav_container {
        padding: 2rem; }
        main.site_main .page_main > .page_sidebar .article_nav_container ul.article_nav {
          list-style: none; }
          main.site_main .page_main > .page_sidebar .article_nav_container ul.article_nav li h3 {
            position: relative;
            padding: 0.5rem;
            padding-left: 2rem;
            text-align: left;
            font-size: 1.3rem;
            cursor: pointer; }
          main.site_main .page_main > .page_sidebar .article_nav_container ul.article_nav li ul {
            display: none;
            padding: 0.5rem;
            list-style: none; }
            main.site_main .page_main > .page_sidebar .article_nav_container ul.article_nav li.active > h3 {
              color: #C164B6; }
              main.site_main .page_main > .page_sidebar .article_nav_container ul.article_nav li.active > h3::before {
                position: absolute;
                top: 0.8rem;
                left: 0px;
                content: "\f054";
                font-family: 'Font Awesome 5 Free';
                font-weight: 900; }
            main.site_main .page_main > .page_sidebar .article_nav_container ul.article_nav li.active ul {
              display: block; }
        main.site_main .page_main > .page_sidebar .article_nav_container ul.article_nav > li > h3 {
          font-size: 1.5rem; }
  main.site_main .page_footer .caption {
    text-align: center;
    font-size: 10px;
    color: #acacac;
    font-family: 'Noto Sans JP', sans-serif; }
main.site_main.front .page_header .title .text, main.site_main.home .page_header .title .text {
  height: 20rem; }
@media (min-width:960px) {
  main.site_main.front .page_header .title .text h1, main.site_main.home .page_header .title .text h1 {
    font-size: 2rem; } }
main.site_main.front .page_header .title .text h1 a.custom-logo-link, main.site_main.home .page_header .title .text h1 a.custom-logo-link {
  display: block;
  margin: 0px auto 2rem; }
  main.site_main.front .page_header .title .text h1 a.custom-logo-link img, main.site_main.home .page_header .title .text h1 a.custom-logo-link img {
    max-width: 30rem;
    width: 80%;
    height: auto; }
main.site_main.front .page_header .title .image, main.site_main.home .page_header .title .image {
  height: calc(100vh - 5rem); }

footer.site_footer div.footer_menu ul.menu {
  padding: 2rem;
  list-style: none;
  text-align: center; }
  footer.site_footer div.footer_menu ul.menu li {
    display: inline-block; }
    footer.site_footer div.footer_menu ul.menu li a {
      display: block;
      padding: 1rem;
      color: #595858;
      font-size: 1.3rem;
      line-height: 1em;
      font-weight: 300;
      -webkit-transition: 0.5s;
      transition: 0.5s; }
      footer.site_footer div.footer_menu ul.menu li a:hover {
        color: #C164B6; }
footer.site_footer p.copyright {
  -webkit-box-flex: 1;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100%;
  padding: 1rem;
  max-width: 100%;
  width: auto;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1em;
  color: #595858;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300; }

#wpadminbar.mobile {
  position: fixed; }