@charset "utf-8";

/*
Theme Name: nousan-sh
Version: 1.1
Author: OWNDMEDIA.LAB
*/

/*--------------------------------------------------------------
## common
--------------------------------------------------------------*/
/* animation */
.scroll.fadeIn {
  opacity: 0;
  transition: all 1000ms;
}
.scroll.fadeIn2 {
  opacity: 0;
  transition: all 3000ms;
}
.scroll.fadeInUp {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 2000ms;
}
.scroll.fadeInLeft {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 2000ms;
}
.scroll.fadeInRight {
  opacity: 0;
  transform: translateX(50px);
  transition: all 2000ms;
}
.scroll.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
.scroll.delay {
  transition-delay: 200ms;
}
.scroll.delay2 {
  transition-delay: 400ms;
}

/* pc-nav（PCのみ） */
.pc-menu,
.sp-menu {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  position: fixed;
  padding: 2rem 5rem 1rem;
  z-index: var(--z-overlay);
}
.pc-menu::before,
.sp-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(50px);
  transform: translateY(-100%);
  transition: transform .6s;
  z-index: -1;
}
.pc-menu.is-scrolled::before,
.sp-menu.is-scrolled::before {
  transform: translateY(0);
}
.pc-menu.is-scrolled .pc-nav__menu-list a {
  color: var(--text-b);
  font-weight: var(--fw-semibold);
}
.header-logo__link {
  display: block;
  line-height: 0;
}
.header-logo__link img {
  max-width: 195px;
}

.pc-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pc-nav__menu {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-2);
}
.pc-nav__menu-list a {
  color: var(--white);
  font-weight: var(--fw-semibold);
  padding: .5rem var(--space-2);
  transition: var(--transition-base);
}
.pc-nav__menu-list a:hover {
  opacity: .7;
  transition: var(--transition-base);
}

/* sp-nav（SPのみ） */
.sp-menu {
  display: none;
  padding: 2rem 2rem 1rem;
}
.sp-menu--inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu {
  height: 20px;
  position: fixed;
  right: 3rem;
  top: 3rem;
  width: 40px;
  z-index: var(--z-toast);
  cursor: pointer;
  backface-visibility: hidden;
}
.menu__line {
  background-color: var(--accent-color);
  border-radius: var(--radius-sm);
  display: block;
  height: 4px;
  position: absolute;
  transition: transform .3s;
  width: 100%;
}
.menu__line--center { top: 8px; }
.menu__line--bottom { bottom: 0; }
.menu__line--top.active {
  top: 4px;
  transform: rotate(45deg);
}
.menu__line--center.active {
  transform: scaleX(0);
}
.menu__line--bottom.active {
  bottom: 12px;
  transform: rotate(135deg);
}

.sp-nav {
  background-color: var(--white);
  display: block;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--z-modal);
  right: 0;
  padding: 3rem 0 0;
  backface-visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.4s ease;
}
.sp-nav.is-open {
  transform: translateX(0);
}
.sp-nav .sp-nav__wrap {
  display: flex;
  justify-content: space-between;
  margin: 5rem 5rem 0;
}
.sp-nav__menu {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.header__ttl {
  margin-left: var(--space-4);
  margin-top: -1rem;
}
.header__ttl a {
  display: inline-block;
}
.sp-nav__menu-list {
  border-bottom: 1px solid var(--main-color);
}
.sp-nav__menu-list:first-child {
  border-top: 1px solid var(--main-color);
}
.sp-nav__menu-list a {
  display: block;
  font-size: var(--fs-lg);
  padding: var(--space-2) .5rem;
}
.sp-nav__menu-list > a::before,
.sp-nav__menu-list--child a::before {
  content: "";
  background-color: var(--accent-color);
  display: inline-block;
  margin-right: var(--space-2);
  margin-bottom: .15rem;
  vertical-align: middle;
}
.sp-nav__menu-list > a::before {
  border-radius: 2px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}
.sp-nav__menu-list--child {
  margin-bottom: var(--space-4);
}
.sp-nav__menu-list--child ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sp-nav__menu-list--child li {
  margin-bottom: .5rem;
}
.sp-nav__menu-list--child a {
  font-size: var(--fs-base);
  margin: 0;
  padding: 0;
}
.sp-nav__menu-list--child a::before {
  width: 2rem;
  height: 1px;
  margin-bottom: .25rem;
}

/* loading */
.loader-wrap {
  position: fixed;
  display: grid;
  place-items: center;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--main-color);
  overflow: hidden;
  z-index: 1000;
}
.loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--white) 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  animation: load3 1.4s infinite linear;
  transform: translateZ(0);
}
.loader::before {
  width: 50%;
  height: 50%;
  background-color: var(--white);
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.loader::after {
  background-color: var(--main-color);
  width: 75%;
  height: 75%;
  border-radius: var(--radius-full);
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@keyframes load3 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*--------------------------------------------------------------
## front-page.php
--------------------------------------------------------------*/
/* slideshow mv */
.topslider {
  width: 100%;
  height: calc(100vh + 1px);
  position: relative;
  overflow: hidden;
  min-width: 100%;
  max-height: 100vh;
  margin: 0 auto 20vh;
  z-index: 1;
}
.topslider::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-raised);
}
.slide {
  position: relative;
  margin: 0;
  padding: 0;
  min-width: 1260px;
}
.slide .item {
  position: relative;
  height: 100vh;
}
.slide .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  height: calc(100vh + 1px);
  margin: 0 auto !important;
  object-fit: cover;
}
.slide-animation {
  animation: fadezoom 6s 0s forwards;
}
@keyframes fadezoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.1); }
}
.topslider .overlay {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  max-height: 100vh;
  z-index: var(--z-raised);
}
.topslider .overlay .overlay_ttl,
.topslider .overlay .overlay_txt {
  margin: 0 4vw;
  letter-spacing: 0.4rem;
  font-family: var(--font-mincho);
  font-weight: var(--fw-semibold);
  color: var(--white);
  display: block;
}
.topslider .overlay .overlay_ttl {
  font-size: 3rem;
  margin-bottom: var(--space-2);
}
.topslider .overlay .overlay_txt {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.2rem;
  font-weight: var(--fw-medium);
}

.scroll-down {
  position: relative;
  z-index: var(--z-raised);
}
.scroll-down__link {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--white);
  font-size: 14px;
  text-decoration: none;
}
.scroll-down__txt span {
  position: relative;
  display: inline-block;
  animation: wave 2s infinite;
  animation-delay: calc(0.1s * var(--i));
}
.scroll-down__arrow {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-left: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
  transform: translate(-50%, -50%) rotate(-45deg);
  animation: float 2s infinite;
}
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes float {
  0%, 100% { transform: translateY(-20%) rotate(-45deg); }
  50%       { transform: translateY(20%)  rotate(-45deg); }
}

/* slide products */
.products-slider .slick-track {
  left: -18rem !important;
}
.products-slider__item a,
.products-slider__img {
  transition: var(--transition-base);
}
.products-slider__img {
  overflow: hidden;
  border-radius: var(--radius-sm);
  position: relative;
  margin: 0 .5rem;
}
.products-slider__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.4s ease;
  pointer-events: none;
  border-radius: var(--radius-sm);
}
.products-slider__item a:hover .products-slider__img::after {
  background-color: rgba(0, 0, 0, 0.3);
}
.products-slider__img img {
  border-radius: var(--radius-sm);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.products-slider__item a:hover .products-slider__img img {
  transform: scale(1.05);
}
.products-slider__ttl {
  color: var(--main-color);
  font-size: var(--fs-xl);
  font-family: var(--font-mincho);
  text-align: center;
  margin-top: var(--space-2);
}


/*--------------------------------------------------------------
## page-〇〇.php
--------------------------------------------------------------*/
.header-sub {
  width: 100%;
  height: 70vh;
  color: var(--white);
}
#header-sub__contents {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.header-sub__bg {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.header-sub__bg::before {
  animation: img-bg 1.5s var(--easing-default) forwards;
  background-color: var(--white);
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: var(--z-raised);
}
@keyframes img-bg {
  100% { transform: translateX(100%); }
}
.header-sub__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header-sub__bg--pc {
  display: block;
}
.header-sub__overlay {
  width: 100%;
  height: 70vh;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  align-items: center;
  justify-content: center;
}
.header-sub__ttl {
  text-align: left;
  margin: auto;
  position: absolute;
  top: auto;
  bottom: auto;
  left: 4vw;
}
.header-sub__ttl h2 {
  font-size: 1.6rem;
  text-transform: capitalize;
}
.header-sub__ttl h2 span {
  font-size: 3.2rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  display: block;
}


/*--------------------------------------------------------------
## responsive
--------------------------------------------------------------*/
/* 1280px */
@media screen and (max-width: 1280px) {
  .pc-menu { padding: 2rem 2rem 1rem; }
  .topslider { margin: 0 auto 15vh; }
  .products-slider .slick-track { left: -10rem !important; }
}

/* 1024px */
@media screen and (max-width: 1024px) {
  .header-sub__ttl h2      { font-size: 1.2rem; }
  .header-sub__ttl h2 span { font-size: 2.8rem; }
}

/* 959px */
@media screen and (max-width: 959px) {
  .pc-menu { display: none; }
  .sp-menu { display: block; }
}

/* 780px */
@media screen and (max-width: 780px) {
  .menu {
    top: 2.75rem;
    right: var(--space-4);
  }
  .sp-nav .sp-nav__wrap { margin: 5rem 2.5rem 0; }
  .scroll-down__link { bottom: 150px; }
}

/* 560px */
@media screen and (max-width: 560px) {
  .header-logo__link img { max-width: 125px; }
  .menu {
    right: var(--space-2);
    top: 1.5rem;
    width: 30px;
  }
  .sp-menu { padding: var(--space-2); }

  .sp-nav { padding: var(--space-4) 0 0; }
  .sp-nav .sp-nav__wrap { margin: 2.5rem 2.5rem 0; }
  .sp-nav__menu-list a { font-size: var(--fs-base); }
  .header__ttl { margin-left: var(--space-2); }
  .header__ttl a img { max-width: 120px; }

  .topslider { margin: 0 auto 10vh; }
  .topslider .overlay .overlay_ttl { font-size: 2.2rem; }
  .topslider .overlay .overlay_txt { font-size: var(--fs-base); }
  .topslider .overlay .overlay_ttl,
  .topslider .overlay .overlay_txt {
    margin: 0 auto;
    width: 90%;
    letter-spacing: 0.2rem;
    line-height: 1.8;
  }
  li.item.slick-slide { filter: brightness(80%); }

  .scroll-down__link  { font-size: 12px; }
  .scroll-down__arrow { top: 35px; }

  .products-slider .slick-track { left: 0 !important; }

  .header-sub,
  .header-sub__overlay { height: 50vh; }
  .header-sub__ttl h2      { font-size: var(--fs-base); }
  .header-sub__ttl h2 span { font-size: 1.8rem; }

  .loader {font-size: 8px;}
}