@charset "UTF-8";
:root {
  --color-white: #fff;
  --color-black: #292931;
  --font-base: "Noto Sans JP", sans-serif;
  --font-base-en: "Google Sans Flex", sans-serif;
  --font-mincho: "Shippori Mincho", serif;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  overflow: auto;
  font-size: 10px;
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%; }

body {
  overflow-x: clip;
  font-size: 15px;
  color: var(--color-black);
  font-family: var(--font-base);
  font-weight: 500;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  width: 100%; }

a {
  color: var(--color-black);
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  transition: .3s; }

a:hover {
  color: var(--color-black);
  text-decoration: none;
  opacity: 0.65; }

a:active, a:hover {
  outline-width: 0; }

iframe{
  border: none;
}

li{
  margin: 0;
  list-style: none; }

ul,ol{
  margin: 0;
  padding: 0; }

h1,h2,h3,h4,h5,h6, p, figure, dd, dt, dl { margin:0; }

figcaption, figure, main,
article, aside, footer,
header, nav, section { display: block; }

b, strong { font-weight: bolder; }

small { font-size: 80%; }

img {
  border-style: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  height: auto;
  max-width: 100%;
  vertical-align: middle; }

button, input, optgroup, select, textarea {
  font-family: var(--font-base);
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button, input {
  overflow: visible; }

button, select {
  text-transform: none; }

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  border: none;
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button{
  color: #000;
}

textarea { overflow: auto; }

[type="checkbox"], [type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0; }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  outline-offset: -2px; }

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -moz-appearance: none;
  -webkit-appearance: none;}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #ddd;
}

::-webkit-scrollbar-thumb {
  background: var(--color-black);
  border-radius: 5px;
}

/******** Grid System width Flex ********/
.flexbox {
  display: flex !important; }

.flex-wrap {
  flex-wrap: wrap; }

.flex-wrap-reverse {
  flex-wrap: wrap-reverse; }

.flex-justify-start {
  justify-content: flex-start; }

.flex-justify-end {
  justify-content: flex-end; }

.flex-justify-center {
  justify-content: center; }

.flex-justify-between {
  justify-content: space-between; }

.flex-align-start {
  align-items: flex-start; }

.flex-align-end {
  align-items: flex-end; }

.flex-align-center {
  align-items: center; }

.flex-dir-reverse {
  flex-direction: row-reverse; }

@media screen and (max-width: 48em) {
  .flexbox.-is-tab-wrap {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 36.667em) {
  .flexbox.-is-sp-wrap {
    flex-wrap: wrap;
  }
}

/******** margin ********/
.m-auto {
  margin: auto; }

.mt-5 {
  margin-top: 5px; }

.mt-10 {
  margin-top: 10px; }

.mt-20 {
  margin-top: 20px; }

.mt-30 {
  margin-top: 30px; }

.mt-40 {
  margin-top: 40px; }

.mt-50 {
  margin-top: 50px; }

.mt-60 {
  margin-top: 60px; }

.mt-70 {
  margin-top: 70px; }

.mt-80 {
  margin-top: 80px; }

.mt-90 {
  margin-top: 90px; }

.mt-100 {
  margin-top: 100px; }

.mt-120 {
  margin-top: clamp(70px, 10vw, 120px); }

.mt-180 {
  margin-top: clamp(100px, 10vw, 180px); }

.mt-200 {
  margin-top: clamp(150px, 10vw, 200px); }

.mb-5 {
  margin-bottom: 5px; }

.mb-10 {
  margin-bottom: 10px; }

.mb-20 {
  margin-bottom: 20px; }

.mb-30 {
  margin-bottom: 30px; }

.mb-40 {
  margin-bottom: 40px; }

.mb-50 {
  margin-bottom: 50px; }

.mb-60 {
  margin-bottom: 60px; }

.mb-70 {
  margin-bottom: 70px; }

.mb-80 {
  margin-bottom: 80px; }

.mb-90 {
  margin-bottom: 90px; }

.mb-100 {
  margin-bottom: 100px; }

/******** form input ********/
table {
  border-collapse: collapse;
  border-spacing: 0;
  max-width: 100%;
  width: 100%; }

input[type=date],
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
input[type=number],
select {
  font-size: 16px;
  font-size: 1.6rem;
  background: var(--color-white);
  border: 1px solid #E8E8E8;
  margin: 2px;
  padding: 15px;
  width: 100%; }

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=number]:focus,
select:focus {
  outline: none;
  border-color: var(--color-black); }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0; }

input[type=number] {
  -moz-appearance: textfield; }

select {
  height: 2.5em;
  padding: .5em;
  width: auto;
  min-width: 7em; }

textarea {
  font-size: 16px;
  font-size: 1.6rem;
  background: var(--color-white);
  border: 1px solid #E8E8E8;
  padding: 15px;
  resize: vertical;
  width: 100%; }

textarea:focus {
  outline: none;
  border-color: var(--color-black); }

input[type=checkbox],
input[type=radio] {
  background: var(--color-white);
  cursor: pointer;
  margin-right: .5em; }

textarea::placeholder,
input::placeholder {
  font-size: 1.4rem;
  color: #C5C5C5; }

/*////////////////////////

Animations

////////////////////////*/
.fadein {
  animation: fadein 2s ease 0s 1 normal;
}

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

[class*='js-fadein-']{
  animation-fill-mode: both;
  animation-duration: 1s;
  visibility: visible !important;
}

.js-fadein-top {
  animation-name: js-fadein-top;
}

@keyframes js-fadein-top {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.js-fadein-bottom {
  animation-name: js-fadein-bottom;
}

@keyframes js-fadein-bottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.js-fadein-left {
  animation-name: js-fadein-left;
}

@keyframes js-fadein-left {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.js-fadein-right {
  animation-name: js-fadein-right;
}

@keyframes js-fadein-right {
  0% {
     opacity: 0;
     transform: translateX(20px);
  }
  100% {
     opacity: 1;
     transform: translateX(0);
  }
}

.js-fadein-scale {
  visibility: visible !important;
  animation: js-fadein-scale .75s ease-in-out forwards
}

@keyframes js-fadein-scale {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*////////////////////////

Fonts

////////////////////////*/
.f-mincho{
  font-family: var(--font-mincho);
}

.f-en{
  font-family: var(--font-base-en);
}

.fw-light{
  font-weight: 300;
}

.fw-med{
  font-weight: 500;
}

.fw-semib{
  font-weight: 600;
}

.fw-bold{
  font-weight: 700;
}

/*////////////////////////

 Common parts

////////////////////////*/
.main{
  position: relative;
  z-index: 2;
}

[class*="container_"]{
  margin: 0 auto;
  padding-right: 15px;
  padding-left: 15px;
}

.container_xl{
  width: min(100%, 1850px);
}

.container_l{
  width: min(100%, 1750px);
}

.container_m{
  width: min(100%, 1650px);
}

.pc,
.d-block {
  display: block;
}

.sp,
.sp-550 {
  display: none;
}

.d-inlineb{
  display: inline-block;
}

.t-center {
  text-align: center;
}

.t-right {
  text-align: right;
}

.t-underline{
  text-decoration: underline;
}

.align-top {
  vertical-align: top;
}

.wd-100 {
  width: 100%;
}

.ht-100 {
  height: 100%;
}

.relative{
  position: relative;
}

.zindex-1{
  z-index: 1;
}

.l-height-220{
  line-height: 2.2;
}

.img-radius{
  border-radius: 5px;
  overflow: hidden;
}

.img-overlay{
  display: block;
  position: relative;

  &::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
}

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

.grid{
  display: grid;
}

.grid-repeat{
  display: grid !important;
  --grid_column_repeat: 2;
  grid-template-columns: repeat(var(--grid_column_repeat), 1fr);

  &.-is-repeat-three{
  --grid_column_repeat: 3;
  }
}

.grid-column-two{
  display: grid;
  --grid-size-left: 1fr;
  --grid-size-right: 1fr;
  grid-template-columns: var(--grid-size-left) var(--grid-size-right);
  --gap-x-value: clamp(20px, 5vw, 80px);
  --gap-y-value: 30px;
  gap: var(--gap-y-value) var(--gap-x-value);
}

.gap-custom{
  --gap-x-value: 0;
  --gap-y-value: 0;
  gap: var(--gap-y-value) var(--gap-x-value);
}

.gap-30{
  gap: 30px;
}

.gap-25{
  gap: 25px;
}

.bkg-black{
  background-color: #000;
}

.fs-12{
  font-size: 1.2rem;
}

.fs-14{
  font-size: 1.4rem;
}

.fs-20{
  font-size: clamp(1.8rem, 3vw, 2rem);
}

.fs-24{
  font-size: clamp(2rem, 3vw, 2.4rem);
}

.hdg-size28{
  font-size: clamp(2.2rem, 3vw, 2.8rem);
}

.hdg-size40{
  font-size: clamp(3rem, 3vw, 4rem);
}

.hdg-size50{
  font-size: clamp(4rem, 3vw, 5rem);
}

.hdg-size100{
  font-size: clamp(5rem, 7vw, 10rem);
  line-height: 1.3;
}

.hdg-size180{
  font-size: clamp(6rem, 10vw, 18rem);
  font-weight: 600;
  line-height: 1;
}

.icn-insta{
  display: block;
  padding-left: 25px;
  background: url('../img/common/icn_instagram.svg') no-repeat left center;
}

.arrow-right{
  display: block;
  padding-right: 25px;
  background: url('../img/common/arrow_long_right.svg') no-repeat right center;
}

.btn-rectangle{
  text-align: center;
  display: block;
  padding: clamp(20px, 3vw, 30px) 25px;
  border-radius: 5px;
  color: var(--color-white);
  background-color: #292931;
}

.btn-border{
  border: 1px solid var(--color-black);
  text-align: center;
  display: block;
  padding: 30px 25px;
  border-radius: 5px;
  font-family: var(--font-mincho);
  width: min(100%, 450px);

  &.-is-white{
    border-color: var(--color-white);
    color: var(--color-white);
  }
}

@media screen and (max-width: 67.5em) {
  [data-large-tab-grid="1"]{
    grid-template-columns: 1fr !important;
  }
  [data-large-tab-grid="2"]{
    grid-template-columns: 2fr !important;
  }
  [data-large-tab-grid-repeat="1"]{
    --grid_column_repeat: 1 !important;
  }
  [data-large-tab-grid-repeat="2"]{
    --grid_column_repeat: 2 !important;
  }
}

@media screen and (min-width: 48.063em) {
  .grid-column-two{
    &.-is-reverse{
      .grid-column-right{
        order: 1;
      }
      .grid-column-left{
        order: 2;
      }
    }
  }
}

@media screen and (max-width: 48em) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
  .t-center-sp{
    text-align: center;
  }
  [data-tab-grid="1"]{
    grid-template-columns: 1fr !important;
  }
  [data-tab-grid="2"]{
    grid-template-columns: 2fr !important;
  }
  [data-tab-grid-repeat="1"]{
    --grid_column_repeat: 1 !important;
  }
  [data-tab-grid-repeat="2"]{
    --grid_column_repeat: 2 !important;
  }
}

@media screen and (min-width: 43.4em) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

@media screen and (max-width: 43.333em) {
  a[href^="tel:"] {
    text-decoration: underline;
    display: inline-block;
  }
}

@media screen and (min-width: 36.733em) {
  .t-center_pc{
    text-align: center;
  }
}

@media screen and (max-width: 36.667em) {
  .pc-550 {
    display: none;
  }
  .sp-550 {
    display: block;
  }
  [data-sp-grid="1"]{
    grid-template-columns: 1fr !important;
  }
  [data-sp-grid="2"]{
    grid-template-columns: 2fr !important;
  }
  [data-sp-grid-repeat="1"]{
    --grid_column_repeat: 1 !important;
  }
  [data-sp-grid-repeat="2"]{
    --grid_column_repeat: 2 !important;
  }
}

/*////////////////////////

 Header

////////////////////////*/
.header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  padding: clamp(15px, 3vw, 65px) 0 clamp(15px, 3vw, 45px);
  transition: .3s;
  font-family: var(--font-mincho);

  &.-is-fixed{
    background-color: var(--color-white);
    padding: clamp(15px, 3vw, 20px) 0;

    .header__nav_toggle::after {
      transform: scaleX(1);
      transform-origin: right center;
    }
  }
  &.-is-open{
    .header__nav_toggle_bar {
      background-color: transparent;

      &::before {
        transform: translateY(8px) rotate(135deg);
      }
      &::after {
        transform: translateY(-8px) rotate(-135deg);
        width: 30px;
      }
    }
    .header__nav_toggle_title:before {
      content: "とじる";
    }
  }
  &.-is-fixed,
  &.-is-open{
    .header__logo{
      img {
        filter: invert(1);
      }
    }
  }
}

.header__container{
  padding: 0 clamp(15px, 3vw, 30px);
}

.header__nav_toggle {
  cursor: pointer;
  display: inline-block;
  background: none;
  border: none;
  outline: none;
  position: relative;
  text-align: center;
  z-index: 7;
}

.header__nav_toggle_bar {
  position: relative;
  margin: 8px 6px;
  user-select: none;
  width: 20px;

  &::before,
  &::after {
    position: absolute;
    content: "";
  }
  &::before {
    top: -8px;
  }
  &::after {
    width: 15px;
    top: 8px;
  }
}

.header__nav_toggle_bar,
.header__nav_toggle_bar::before,
.header__nav_toggle_bar::after {
  display: block;
  width: 30px;
  height: 2px;
  background-color: #231815;
  outline: 1px solid transparent;
  transition-property: background-color, -webkit-transform;
  transition-property: background-color, transform;
  transition-property: background-color, transform, -webkit-transform;
  transition-duration: 0.5s;
}

.header__nav_toggle_title {
  font-size: 10px;
  font-size: 1rem;
  display: block;
  padding-top: 5px;
  width: 4em;
  white-space: nowrap;

  &::before {
    content: "メニュー";
  }
}

@media screen and (min-width: 48.063em) {
  .header{
    &:not(.-is-fixed) a{
      color: var(--color-white);
    }
  }
  .header__nav_toggle{
    display: none;
  }
  .header__nav_list{
    gap: 0 clamp(20px, 3vw, 40px);
  }
}

@media screen and (max-width: 48em) {
  .header{
    &:not(.-is-fixed):not(.-is-open){
      .header__nav_toggle_bar,
      .header__nav_toggle_bar::before,
      .header__nav_toggle_bar::after {
        background-color: var(--color-white);
      }
      .header__nav_toggle_title{
        color: var(--color-white);
      }
    }
    &.-is-open{
      .header__nav {
        height: 100vh;
        position: absolute;
        overflow: hidden;
        transition-property: height, visibility;
        transition-duration: 0.35s;
        transition-timing-function: ease;
      }
      .header__nav_list{
        opacity: 1;
      }
    }
  }
  .header__logo {
    padding: 10px 0;
    z-index: 10;
  }
  .header__nav {
    max-width: min(100%, 1000px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--color-white);
    z-index: 6;
    transition: .5s;
  }
  .header__nav_list{
    display: block !important;
    margin: 5px 0 0 0;
    padding: 0;
    text-align: center;
    position: relative;
    top: 35%;
    transform: translateY(-35%);
    opacity: 0;
  }
  .header__nav_item a{
    display: block;
    padding: 15px 0;
  }
}

/*////////////////////////

Footer

////////////////////////*/
.footer{
  position: relative;
  z-index: 10;
  background: #0000DC;
  color: var(--color-white);
  padding-top: clamp(50px, 5vw, 100px);

  a, a:hover {
    color: var(--color-white);
  }
  .btn-rectangle:has(.flexbox){
    line-height: 1.3;
    padding: clamp(30px, 10vw, 100px) clamp(20px, 10vw, 100px);
    position: relative;
    z-index: 1;

    .flexbox{
      --gap-x-value: 30px;
      --gap-y-value: 0;
    }
    .arrow-right{
      background-size: 30px auto;
    }
  }
  .bkg-black{
    margin-top: -70px;
    padding-top: clamp(120px, 15vw, 170px);
    padding-bottom: clamp(50px, 7vw, 120px);
    border-radius: 7px 7px 0px 0px;

    .grid-column-two{
      width: min(100%, 1620px);
      margin: auto;
      --grid-size-left: min(100%, 400px);
      --gap-x-value: 30px;
      --gap-y-value: 70px;
    }
  }
}

/*////////////////////////

Top page

////////////////////////*/
.zindex-content-wrapper{
  position: relative;
  z-index: 10;
  background-color: var(--color-white);
}

.top-mv{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  .img-overlay{
    background-color: rgba(0, 0, 0, 0.6);
  }
}

.top__mv_content_block{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  color: var(--color-white);
}

.top__mv_hdg{
  white-space: nowrap;
  animation-delay: .5s;
}

.top__mv_text{
  animation-delay: 1s;
}

.top-about{
  color: var(--color-white);
  background: url('../img/top/about_img01.jpg') no-repeat center / cover;
  margin-top: 100vh;
  min-height: 100vh;
  height: 100vh;
}

.top__about_txt_block{
  padding: clamp(70px, 5vw, 100px) 0 clamp(50px, 5vw, 100px);
  width: min(100%, 415px);
}

.top-space{
  padding: clamp(100px, 15vw, 220px) 0 0;

  .grid-column-two{
    margin-bottom: clamp(70px, 10vw, 220px);
    --gap-y-value: 50px;
  }
}

.js-space_gallery_wrap {
  position: relative;
  width: calc(100% - 100px);
  margin-left: auto;
  z-index: 1;
  height: min(35vw, 600px);
}

.js-space_gallery_block {
  width: 100%;
  position: sticky;
  top: 150px;
  height: min(35vw, 420px);
}

.js-space_gallery_list {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  width: max-content;
}

.js-space_gallery_item {
  width: 680px;
}

.top-ceremony{
  color: var(--color-white);
  padding: clamp(100px, 10vw, 300px) 0 50px;
  position: relative;
  background: linear-gradient(rgba(4, 38, 73,1), rgba(0, 0, 220, 1));

  &::before{
    content: '';
    display: block;
    width: 100%;
    height: 159px;
    background: url('../img/top/caremony_bkg_wave_parts.png') no-repeat top center / cover;
    position: absolute;
    bottom: 100%;
    left: 0;
  }
  &::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url('../img/top/caremony_bkg_deco_parts.png') no-repeat top center;
    position: absolute;
    top: 0;
    left: 0;
  }
  [data-img-block="2"]{
    margin-left: auto;
    margin-right: 0;
    margin-top: -30px;
    padding: 0;
  }
}

.top__ceremony_hdg{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  z-index: 1;
  margin: auto;
}

.v-trigger{
  margin: auto;
  background-color: transparent;
  position: relative;
  color: var(--color-white);

  &:hover{
    opacity: 0.7;
  }
}

.v-trigger-mask{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 2;
  transform: translateY(-50%);
  width: min(30%, 280px);
  margin: auto;
}

.v-popup-block {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);

  &.-is-active {
    opacity: 1;
    visibility: visible;

    .v-popup-content {
      transform: translateY(0);
    }
  }
}

.v-popup-content {
  position: relative;
  margin: 10% auto;
  width: min(calc(100% - 30px), 700px);
  padding: 50px 0 0;
  transform: translateY(-20px);
  transition: transform 0.6s ease;
}

#js-popup-body {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
}

#js-popup-body iframe,
#js-popup-body video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#js-popup-close {
  position: absolute;
  top: 5px;
  right: 15px;
  color: var(--color-white);
  font-size: 30px;
  cursor: pointer;
  z-index: 10;
}

@media screen and (max-width: 64em) {
  .js-space_gallery_item {
    width: 50vw;
  }
}

@media screen and (min-width: 48.063em) {
  .top__mv_text{
    width: min(100%, 230px);
    margin-left: auto;
  }
  .top__mv_content_block{
    padding-right: clamp(20px, 5vw, 100px);
  }
  .top-space{
    .grid-column-two.-is-reverse{
      .grid-column-right{
        width: min(100%, 500px);
        margin: auto;
      }
    }
  }
}

@media screen and (max-width: 48em) {
  .top__mv_content_block{
    bottom: 50px;
    padding: 0 15px;
  }
  .js-space_gallery_wrap {
    width: calc(100% - 30px);
  }
}