@charset "UTF-8";
/* CSS Document */
.none_text {
  display: none !important; }

@media screen and (min-width: 768px) {
  .pcNone {
    display: none !important; } }
@media screen and (max-width: 767px) {
  .spNone {
    display: none !important; }

  .tabNone {
    display: none !important; } }
@media screen and (min-width: 768px) and (max-width: 961px) {
  .tabNone {
    display: none !important; } }
@media screen and (min-width: 1025px) {
  .tabNone {
    display: none !important; } }
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .tabNone {
    display: block !important; }

  .pcNone01 {
    display: none !important; } }
body {
  --color-black: #2f332f;
  /*ベースの黒*/
  --color-grey: #f7f7f7;
  /*薄いグレー*/
  --color-grey-02: #7f7f7f;
  /*濃いグレー*/
  --color-grey-03: #3a3a3a;
  /*黒に近いグレー*/
  --color-pink-01: #faeaf7;
  /*薄いピンク*/
  --color-pink-02: #f2cfee;
  /*濃いピンク*/
  --color-pink-03: #ff2766;
  /*ビビットなピンク*/
  --color-blue: #4a90e2;
  /*リンクの青*/
  --color-yellow: #fdfced;
  /*薄いイエロー*/ }

@font-face {
  font-family: "bodoni-mt";
  src: url("../fonts/bodoni-mt-black-2.ttf") format("truetype"); }
@font-face {
  font-family: "copperplate-gothic";
  src: url("../fonts/copperplate-gothic.otf") format("truetype"); }
.font-01 {
  font-family: "Zen Kaku Gothic New", sans-serif; }

.font-02 {
  font-family: "bodoni-mt"; }

.font-03 {
  font-family: "Playfair Display", serif; }

.font-04 {
  font-family: "Anton", sans-serif; }

.font-05 {
  font-family: "Noto Serif JP", serif; }

.font-06 {
  font-family: "copperplate-gothic"; }

.bg-01 {
  background: var(--color-grey); }

.bg-02 {
  background: var(--color-pink-01); }

.bg-03 {
  background: var(--color-yellow); }

.bg-04 {
  background: var(--color-grey-03); }

.color-01 {
  color: #fff; }

.color-02 {
  color: var(--color-pink-02); }

.color-03 {
  color: var(--color-pink-03); }

.color-04 {
  color: var(--color-grey-02); }

.padding-t-50 {
  padding-top: 50px !important; }

/*flexbox 共通*/
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center; }

/*リンクテキスト*/
.text-button a {
  font-size: min(1.8vw, 20px);
  border-bottom: 1px solid var(--color-black);
  font-weight: 300; }
  @media screen and (max-width: 767px) {
    .text-button a {
      font-size: 14px; } }

/*header ハンバーガーメニュー str*/
header .sns_list {
  display: flex;
  justify-content: flex-start;
  gap: 25px;
  margin: 0 0 40px;
  padding-left: 60px; }
  @media screen and (max-width: 767px) {
    header .sns_list {
      padding-left: 40px; } }
  @media screen and (min-width: 768px) and (max-width: 961px) {
    header .sns_list {
      gap: 20px;
      padding-left: 40px; } }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    header .sns_list {
      gap: 20px;
      padding-left: 60px; } }
  header .sns_list li {
    width: 12%;
    max-width: 25px; }
    @media screen and (max-width: 767px) {
      header .sns_list li {
        width: 9%; } }
header .hamburger-fade {
  position: fixed;
  top: 5%;
  left: 5%;
  z-index: 999;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: 1s; }
  @media screen and (max-width: 767px) {
    header .hamburger-fade {
      width: 30px;
      height: 60px;
      top: 0%;
      left: 5%; } }
  header .hamburger-fade__wrapper {
    position: relative;
    width: 60px;
    height: 45px;
    margin: 20px auto;
    transition: 1s; }
    @media screen and (max-width: 767px) {
      header .hamburger-fade__wrapper {
        width: 30px;
        height: 30px; } }
  header .hamburger-fade__line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-black);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
    header .hamburger-fade__line:nth-child(1) {
      top: 0; }
    header .hamburger-fade__line:nth-child(2) {
      top: 0;
      bottom: 0;
      margin: auto; }
    header .hamburger-fade__line:nth-child(3) {
      bottom: 0; }
  header .hamburger-fade.active .hamburger-fade__line {
    background-color: #fff; }
    header .hamburger-fade.active .hamburger-fade__line:nth-child(1) {
      transform: translateY(35px) rotate(45deg); }
      @media screen and (max-width: 767px) {
        header .hamburger-fade.active .hamburger-fade__line:nth-child(1) {
          transform: translateY(19px) rotate(45deg); } }
    header .hamburger-fade.active .hamburger-fade__line:nth-child(2) {
      opacity: 0;
      transform: translateX(20px); }
    header .hamburger-fade.active .hamburger-fade__line:nth-child(3) {
      transform: translateY(-9px) rotate(-45deg); }
header .nav-fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  visibility: hidden;
  z-index: 900; }
  header .nav-fade__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
  header .nav-fade__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 5vh 10vw; }
  header .nav-fade__list {
    margin: 0 0 25px;
    padding: 0;
    list-style: none; }
  header .nav-fade__item {
    position: relative;
    margin-bottom: 2vh;
    padding-left: 60px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
  header .nav-fade.active {
    visibility: visible; }
    header .nav-fade.active .nav-fade__bg {
      opacity: 1; }
    header .nav-fade.active .nav-fade__item {
      opacity: 1;
      transform: translateY(0); }
      header .nav-fade.active .nav-fade__item:nth-child(1) {
        transition-delay: 0.2s; }
      header .nav-fade.active .nav-fade__item:nth-child(2) {
        transition-delay: 0.3s; }
      header .nav-fade.active .nav-fade__item:nth-child(3) {
        transition-delay: 0.4s; }
      header .nav-fade.active .nav-fade__item:nth-child(4) {
        transition-delay: 0.5s; }
      header .nav-fade.active .nav-fade__item .sub-link {
        margin: 0 0 0 10px;
        color: #fff;
        font-weight: 600;
        font-size: 20px; }
        @media screen and (max-width: 767px) {
          header .nav-fade.active .nav-fade__item .sub-link {
            font-size: 16px; } }
        header .nav-fade.active .nav-fade__item .sub-link a {
          font-size: 20px; }
          @media screen and (max-width: 767px) {
            header .nav-fade.active .nav-fade__item .sub-link a {
              font-size: 16px; } }
  header .nav-fade__link {
    display: inline-block;
    color: #fff;
    font-size: 32px;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 900;
    letter-spacing: .05em; }
    header .nav-fade__link:hover {
      color: var(--color-blue); }
  header .nav-fade__address, header .nav-fade__tel {
    margin: 5px 0; }
  @media (max-width: 768px) {
    header .nav-fade__link {
      font-size: 24px; }
    header .nav-fade__item {
      padding-left: 40px;
      margin-bottom: 1.5vh; } }
header.fixed .hamburger-fade {
  top: 2%;
  left: 2%;
  width: 30px;
  height: 25px;
  transition: 1s; }
  @media screen and (max-width: 767px) {
    header.fixed .hamburger-fade {
      width: 30px;
      height: 60px;
      top: 0%;
      left: 5%; } }
header.fixed .hamburger-fade__wrapper {
  width: 30px;
  height: 25px;
  margin: 20px auto;
  transition: 1s; }
  @media screen and (max-width: 767px) {
    header.fixed .hamburger-fade__wrapper {
      width: 30px;
      height: 30px; } }
header.fixed .hamburger-fade.active .hamburger-fade__line:nth-child(1) {
  transform: translateY(14px) rotate(45deg); }
  @media screen and (max-width: 767px) {
    header.fixed .hamburger-fade.active .hamburger-fade__line:nth-child(1) {
      transform: translateY(19px) rotate(45deg); } }

/*header ハンバーガーメニュー end*/
.logo_loop {
  width: 10%;
  position: fixed;
  right: 7%;
  top: 7%;
  z-index: 99; }
  @media screen and (max-width: 767px) {
    .logo_loop {
      width: 22%;
      right: 4%;
      top: 3%; } }
  .logo_loop p.logo {
    animation: 10s linear infinite kaiten01; }
@keyframes kaiten01 {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
/*footer*/
footer {
  background: var(--color-black);
  position: sticky;
  bottom: 0;
  padding: 140px 0 120px;
  font-weight: 500;
  letter-spacing: .05em; }
  @media screen and (max-width: 767px) {
    footer {
      padding: 100px 20px; } }
  footer .flex-box {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: flex-end; }
    @media screen and (min-width: 768px) and (max-width: 961px) {
      footer .flex-box {
        padding: 0 20px; } }
    footer .flex-box .left-box .f_logo {
      width: 40%;
      max-width: 130px;
      margin: 0 0 40px; }
    footer .flex-box .left-box .f_text {
      font-size: 14px;
      margin: 0 0 20px; }
    footer .flex-box .left-box .sns_list {
      display: flex;
      justify-content: flex-start;
      gap: 18px;
      margin: 0 0 40px; }
      footer .flex-box .left-box .sns_list li {
        width: 8%;
        max-width: 30px; }
    footer .flex-box .left-box nav ul.footer_nav {
      display: flex;
      justify-content: flex-start;
      gap: 25px; }
      @media screen and (max-width: 767px) {
        footer .flex-box .left-box nav ul.footer_nav {
          flex-flow: column; } }
      footer .flex-box .left-box nav ul.footer_nav li {
        font-size: 14px; }
        footer .flex-box .left-box nav ul.footer_nav li .sub-link {
          margin: 0 0 0 5px;
          font-size: 12px;
          font-weight: 400; }
        footer .flex-box .left-box nav ul.footer_nav li a {
          color: #fff; }
    footer .flex-box .right-box p {
      font-size: 14px;
      padding: 0;
      margin: 0;
      letter-spacing: 0.1em; }
      @media screen and (max-width: 767px) {
        footer .flex-box .right-box p {
          font-size: 11px; } }

/*footer end*/
.matrix-move01 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom; }

.matrix-move02 {
  transform: translateY(19.8937px);
  will-change: transform; }

.matrix-move03 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom; }

.matrix-move04 {
  transform: translateY(150px);
  will-change: transform; }

.matrix-move05 {
  transform: translateY(50px);
  will-change: transform; }

/*スクロールで文字表示*/
.sc_trigger.t_ani001 {
  transform: translateY(100px);
  transition: 0.8s;
  display: block;
  opacity: 0; }
  .sc_trigger.t_ani001.move_ani {
    transform: translateY(0);
    transition: 0.8s;
    opacity: 1; }

/*----------------------------
背景動き
----------------------------*/
@keyframes bg-up {
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-40px); } }
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(40px);
  opacity: 0; }

.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0; }

/*op*/
#logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  opacity: 1;
  transition: opacity 0.8s ease-in-out;
  width: 10%; }

body {
  margin: 0; }

/* wrapper全体を初期で透明 */
#wrapper {
  opacity: 0;
  transition: opacity 0.8s ease; }

/* visibleクラスでフェードイン */
#wrapper.visible {
  opacity: 1; }

/* ===== 共通カーテン（白） ===== */
.topCurtainbg, .bottomCurtainbg, .leftCurtainbg, .rightCurtainbg {
  position: fixed;
  z-index: 1000;
  background-color: #fff;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards; }

/* 上下カーテン */
.topCurtainbg, .bottomCurtainbg {
  width: 100%;
  height: 50%;
  left: 0; }

.topCurtainbg {
  top: 0;
  transform: scaleY(1);
  transform-origin: top; }

.bottomCurtainbg {
  bottom: 0;
  transform: scaleY(1);
  transform-origin: bottom; }

/* 左右カーテン */
.leftCurtainbg, .rightCurtainbg {
  width: 50%;
  height: 100%;
  top: 0; }

.leftCurtainbg {
  left: 0;
  transform: scaleX(1);
  transform-origin: left; }

.rightCurtainbg {
  right: 0;
  transform: scaleX(1);
  transform-origin: right; }

/* ===== カーテンアニメーション ===== */
@keyframes curtainTop {
  0% {
    transform: scaleY(1); }
  100% {
    transform: scaleY(0); } }
@keyframes curtainBottom {
  0% {
    transform: scaleY(1); }
  100% {
    transform: scaleY(0); } }
@keyframes curtainLeft {
  0% {
    transform: scaleX(1); }
  100% {
    transform: scaleX(0); } }
@keyframes curtainRight {
  0% {
    transform: scaleX(1); }
  100% {
    transform: scaleX(0); } }
/* ===== コンテンツフェードイン ===== */
body.pageOn #container {
  animation: PageAnimeOn 1s forwards;
  opacity: 0; }

@keyframes PageAnimeOn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }