@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*
 * Front page header behavior:
 * - Header backgrounds stay transparent.
 * - Logo and menu are white while the first view is visible.
 * - Logo and menu switch to black after passing the first-view bottom edge.
 */

body.home #header,
body.home .l-header,
body.home #fix_header,
body.home #fix_header .l-fixHeader,
body.front-page #header,
body.front-page .l-header,
body.front-page #fix_header,
body.front-page #fix_header .l-fixHeader,
body.has-fv-header-control #header,
body.has-fv-header-control .l-header,
body.has-fv-header-control #fix_header,
body.has-fv-header-control #fix_header .l-fixHeader {
  background: transparent !important;
  box-shadow: none !important;
}

body.home:not(.is-past-fv) #header a,
body.home:not(.is-past-fv) #fix_header a,
body.home:not(.is-past-fv) .l-header .c-gnav > li > a,
body.home:not(.is-past-fv) #fix_header .c-gnav > li > a,
body.home:not(.is-past-fv) .l-header .c-gnav .ttl,
body.home:not(.is-past-fv) #fix_header .c-gnav .ttl,
body.front-page:not(.is-past-fv) #header a,
body.front-page:not(.is-past-fv) #fix_header a,
body.front-page:not(.is-past-fv) .l-header .c-gnav > li > a,
body.front-page:not(.is-past-fv) #fix_header .c-gnav > li > a,
body.front-page:not(.is-past-fv) .l-header .c-gnav .ttl,
body.front-page:not(.is-past-fv) #fix_header .c-gnav .ttl,
body.has-fv-header-control:not(.is-past-fv) #header a,
body.has-fv-header-control:not(.is-past-fv) #fix_header a,
body.has-fv-header-control:not(.is-past-fv) .l-header .c-gnav > li > a,
body.has-fv-header-control:not(.is-past-fv) #fix_header .c-gnav > li > a,
body.has-fv-header-control:not(.is-past-fv) .l-header .c-gnav .ttl,
body.has-fv-header-control:not(.is-past-fv) #fix_header .c-gnav .ttl {
  color: #fff !important;
}

body.home:not(.is-past-fv) .c-headLogo img,
body.home:not(.is-past-fv) #fix_header .c-headLogo img,
body.front-page:not(.is-past-fv) .c-headLogo img,
body.front-page:not(.is-past-fv) #fix_header .c-headLogo img,
body.has-fv-header-control:not(.is-past-fv) .c-headLogo img,
body.has-fv-header-control:not(.is-past-fv) #fix_header .c-headLogo img {
  filter: brightness(0) invert(1) !important;
}

body.is-past-fv.has-fv-header-control #header a,
body.is-past-fv.has-fv-header-control #fix_header a,
body.is-past-fv.has-fv-header-control .l-header .c-gnav > li > a,
body.is-past-fv.has-fv-header-control #fix_header .c-gnav > li > a,
body.is-past-fv.has-fv-header-control .l-header .c-gnav .ttl,
body.is-past-fv.has-fv-header-control #fix_header .c-gnav .ttl {
  color: #111 !important;
}

body.is-past-fv.has-fv-header-control .c-headLogo img,
body.is-past-fv.has-fv-header-control #fix_header .c-headLogo img {
  filter: brightness(0) !important;
}

body.home:not(.is-past-fv) .l-header svg,
body.home:not(.is-past-fv) #fix_header svg,
body.front-page:not(.is-past-fv) .l-header svg,
body.front-page:not(.is-past-fv) #fix_header svg,
body.has-fv-header-control:not(.is-past-fv) .l-header svg,
body.has-fv-header-control:not(.is-past-fv) #fix_header svg {
  color: #fff !important;
  fill: #fff !important;
}

body.is-past-fv.has-fv-header-control .l-header svg,
body.is-past-fv.has-fv-header-control #fix_header svg {
  color: #111 !important;
  fill: #111 !important;
}

/*
 * Front page first-view height.
 * PC: max(1200px, 100vh)
 * SP: max(1200px, 120vh)
 */

#main_visual.p-mainVisual.-height-set {
  height: 100vh !important;
  min-height: 1200px !important;
  position: relative;
  z-index: 2;
}

#main_visual.p-mainVisual.-height-set .p-mainVisual__inner,
#main_visual.p-mainVisual.-height-set .swiper-wrapper,
#main_visual.p-mainVisual.-height-set .p-mainVisual__slide,
#main_visual.p-mainVisual.-height-set .p-mainVisual__imgLayer {
  height: 100% !important;
  min-height: inherit !important;
}

#main_visual.p-mainVisual.-height-set .p-mainVisual__imgLayer {
  display: block;
}

#main_visual.p-mainVisual.-height-set .p-mainVisual__imgLayer > img {
  width: 100%;
  height: 100% !important;
  min-height: inherit !important;
  object-fit: cover;
}

#main_visual.p-mainVisual.-height-set .p-mainVisual__textLayer {
  min-height: inherit !important;
}

@media (max-width: 959px) {
  #main_visual.p-mainVisual.-height-set {
    height: 120vh !important;
    min-height: 1200px !important;
  }
}

/*
 * Fixed content background decoration.
 */

#content {
  position: relative;
  background: none !important;
  background-image: none !important;
}

body::before,
body::after,
#content::before,
#content::after {
  position: fixed;
  z-index: 1;
  display: block;
  width: 190px;
  height: 190px;
  pointer-events: none;
  background-image: url("https://isshiki-yakumo-jinja.com/wp-content/uploads/2026/06/background-waku.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  opacity: 0.30;
}

body::before {
  top: 18vh;
  left: 5vw;
  transform: rotate(-12deg);
}

body::after {
  top: 58vh;
  right: 6vw;
  transform: rotate(10deg);
}

#content::before {
  top: 38vh;
  left: 18vw;
  width: 140px;
  height: 140px;
  opacity: 0.20;
  transform: rotate(18deg);
}

#content::after {
  right: 22vw;
  bottom: 18vh;
  width: 150px;
  height: 150px;
  opacity: 0.21;
  transform: rotate(-18deg);
}

#body_wrap,
#content,
#main_content {
  position: relative;
}

#body_wrap {
  z-index: 0;
}

#content,
#main_content {
  z-index: 2;
}

@media (max-width: 959px) {
  body::before,
  body::after,
  #content::before {
    top: 20vh;
    width: 120px;
    height: 120px;
    opacity: 0.20;
  }

  body::before {
    left: -24px;
  }

  body::after {
    right: -20px;
    top: 58vh;
    display: block;
    transform: rotate(14deg);
  }

  #content::before {
    top: 38vh;
    left: 42vw;
    opacity: 0.15;
  }

  #content::after {
    display: none;
  }
}

/*
 * Front page first-view entrance:
 * - Shows a plain white screen briefly.
 * - The white screen slowly fades out to reveal the first view.
 * - Image switching inside the first view remains controlled by SWELL.
 */

html:has(body.is-fv-loading)::before,
html:has(body.is-fv-visible)::before {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: block;
  pointer-events: none;
  background: #fff;
  content: "";
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.8s ease,
    visibility 0s linear 1.8s;
}

html:has(body.is-fv-visible)::before {
  opacity: 0;
  visibility: hidden;
}

body.is-fv-loading .p-mainVisual,
body.is-fv-visible .p-mainVisual {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.is-fv-loading)::before,
  html:has(body.is-fv-visible)::before {
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  body.is-fv-loading .p-mainVisual,
  body.is-fv-visible .p-mainVisual {
    opacity: 1;
  }
}