@charset "UTF-8";
/*
Theme Name: SANGO Child
Theme URI: https://saruwakakun.design
Author: SARUWAKA
Author URI: https://saruwakakun.com
Template: sango-theme
Version: 3.10.1
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/


/*****************************************
  共通
******************************************/
.font-default {
  font-family: Zen Old Mincho, sans-serif;
}
#content {
  font-family: Zen Old Mincho, sans-serif !important;
}

/*****************************************
  SP
******************************************/
@media screen and (max-width: 1023px) {

  /* ↓↓↓SP↓↓↓ */

  /* header */
  .n-header {
    z-index: 20;
    top: 0;
    position: sticky;
  }
  .n-header .header {
    width: 100%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 4px #0000000f, 0 4px 4px #00000040;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    display: flex;
  }
  .n-header .header__logo {
    width: 125px;
  }
  .n-header .header__logo img {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    transition-property: opacity;
  }
  .n-header .header__nav-area {
    display: none;
  }
  .n-header .header__hamburger-icon {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    transition-property: opacity;
    display: block;
    cursor: pointer;
  }
  .n-header .header__menu-area {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .n-header .menu {
    box-shadow: -4px 4px 4px #00000040;
    overflow-y: auto;
    padding: 1.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    width: 16rem;
    height: 100vh;
    top: 0;
    right: 0; 
    position: absolute; 
  }
  .n-header .menu__close {
    cursor: pointer;
    margin-left: auto;
    margin-bottom: 2.25rem;
    display: block;
  }
  .n-header .menu__list {
    font-size: 1.3125rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(94 127 160 / var(--tw-text-opacity));
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .n-header .menu__list li {
    line-height: 31.5px;
    cursor: pointer;
    margin-bottom: 1.5rem;
  }
  .n-header .menu__link {
  font-size: 21px;
  color: rgb(94 127 160);
  }
  .n-header .menu__btn {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    color: rgb(255 255 255 / var(--tw-text-opacity));
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: rgb(94 127 160 / var(--tw-bg-opacity));
    border-radius: 30px;
    cursor: pointer;
    background-image: none;
    text-transform: none;
  }
  .n-header .header__menu-area.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  /* footer */
  #footer {
    box-shadow: 0 -4px 6px #0000001a, 0 -2px 4px #0000000f;
    --tw-bg-opacity: 1;
    background-color: rgb(94 127 160 / var(--tw-bg-opacity));
    gap: .5rem;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 380px;
    display: inline-flex;
  }
  .footer-inner {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 100%;
    display: inline-flex;
  }
  .footer-top-section {
    align-self: stretch;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
  }
  .footer-logo-bar {
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #fff;
    align-self: stretch;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }
  .footer-logo-link {
    padding-top: 15px;
    padding-bottom: 15px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }
  .footer-logo-link:hover {
    opacity: 0.7;
  }
  .footer-separator {
    width: 3px;
    height: 40px;
    background: #d4d4d8;
    margin: 0 10px;
  }
  .footer-links-group {
    gap: 1.5rem;
    justify-content: center;
    display: flex;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .footer-link {
    color: #fff;
  }
  .footer-link-text {
    color: #fff;
    line-height: 21px;
    text-align: center;
    margin: 0;
    font-size: 16px;
  }
  .footer-copyright {
    color: #fff;
    line-height: 21px;
    text-align: center;
    margin: 0;
    font-size: 16px;
  }
  .floating-buttons-wrapper {
    gap: 1rem;
    justify-content: center;
    display: flex;
    z-index: 10;
    right: 0;
    left: 0;
    bottom: 1rem;
    position: fixed;
  }
  .floating-button-link {
    width: 45%;
    max-width: 500px;
  }
  .floating-button-img {
    margin-left: auto;
    margin-right: auto;
  }





  /* ↑↑↑SP↑↑↑ */
}


/*****************************************
  PC
******************************************/
@media screen and (min-width: 1024px) {
  /* ↓↓↓PC↓↓↓ */

  /* header */
  .n-header {
    z-index: 20;
    top: 0;
    position: sticky;
  }
  .n-header .header {
    width: 100%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 4px #0000000f, 0 4px 4px #00000040;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    display: flex;
  }
  .n-header .header__logo {
    width: 125px;
  }
  .n-header .header__logo img {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    transition-property: opacity;
  }
  .n-header .header__nav-area {
    display: block;
  }
  .n-header .header__nav-inner {
    gap: 84px;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  .n-header .header__nav-links {
    --tw-text-opacity: 1;
    color: rgb(94 127 160 / var(--tw-text-opacity));
    text-align: center;
    gap: 2.5rem;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  .n-header .header__link {
    padding: .5rem;
    font-size: 1.25rem;
      line-height: 1.75rem;
      text-align: center;
      color: rgb(94 127 160);
  }
  .n-header .header__btn {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    color: rgb(255 255 255 / var(--tw-text-opacity));
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: rgb(94 127 160 / var(--tw-bg-opacity));
    border-radius: 30px;
    text-transform: none;
  }
  .n-header .header__hamburger-icon {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    transition-property: opacity;
    display: block;
    cursor: pointer;
  }
  .n-header .header__menu-area {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .n-header .menu {
    box-shadow: -4px 4px 4px #00000040;
    overflow-y: auto;
    padding: 1.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    width: 16rem;
    height: 100vh;
    top: 0;
    right: 0; 
    position: absolute; 
  }
  .n-header .menu__close {
    cursor: pointer;
    margin-left: auto;
    margin-bottom: 2.25rem;
    display: block;
  }
  .n-header .menu__list {
    font-size: 1.3125rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(94 127 160 / var(--tw-text-opacity));
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .n-header .menu__list li {
    line-height: 31.5px;
    cursor: pointer;
    margin-bottom: 1.5rem;
  }
  .n-header .menu__link {
  font-size: 21px;
  color: rgb(94 127 160);
  }
  .n-header .menu__btn {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    color: rgb(255 255 255 / var(--tw-text-opacity));
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: rgb(94 127 160 / var(--tw-bg-opacity));
    border-radius: 30px;
    cursor: pointer;
    background-image: none;
    text-transform: none;
  }
  .n-header .header__menu-area.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }



  /* footer */
  #footer {
    box-shadow: 0 -4px 6px #0000001a, 0 -2px 4px #0000000f;
    --tw-bg-opacity: 1;
    background-color: rgb(94 127 160 / var(--tw-bg-opacity));
    gap: .5rem;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 380px;
    display: inline-flex;
  }
  .footer-inner {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 100%;
    display: inline-flex;
  }
  .footer-top-section {
    align-self: stretch;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
  }
  .footer-logo-bar {
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #fff;
    align-self: stretch;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }
  .footer-logo-link {
    padding-top: 15px;
    padding-bottom: 15px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }
  .footer-logo-link:hover {
    opacity: 0.7;
  }
  .footer-separator {
    width: 2px;
    height: 70px;
    background: #d4d4d8;
  }
  .footer-links-group {
    gap: 1.5rem;
    justify-content: center;
    display: flex;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .footer-link {
    color: #fff;
  }
  .footer-link-text {
    color: #fff;
    line-height: 21px;
    text-align: center;
    margin: 0;
    font-size: 20px;
  }
  .footer-copyright {
    color: #fff;
    line-height: 21px;
    text-align: center;
    margin: 0;
    font-size: 20px;
  }
  .floating-buttons-wrapper {
    gap: 1rem;
    justify-content: center;
    display: flex;
    z-index: 10;
    right: 0;
    left: 0;
    bottom: 1rem;
    position: fixed;
  }
  .floating-button-link {
    width: 100%;
    max-width: 500px;
  }
  .floating-button-img {
    margin-left: auto;
    margin-right: auto;
  }

  /* ↑↑↑PC↑↑↑ */
}