@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Shippori+Mincho+B1:wght@400;500;600;700;800&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");

/*================================================================
# reset
================================================================*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td,
figure {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: 200;
  font-size: 100%;
  vertical-align: baseline;
  line-height: 1;
}

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

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
  list-style-type: none;
}

img {
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

table {
  background: #fff;
}

/*================================================================
# 変数
================================================================*/
:root {
  /* フォント */
  --font-ja-mincho: "Noto Serif JP", serif;
  --font-ja-gothic: "Noto Sans JP", sans-serif;
  --font-marugothic: "Zen Maru Gothic", serif;
  --font-shippori: "Shippori Mincho B1", serif;

  /* レイアウト */
  --header-width: 162px;

  /* カラー */
  --color-blue01: #57b7c3;
  --color-blue02: #6aa0a7;
  --color-khaki01: #807b4e;
  --color-khaki02: rgba(191, 184, 121, 0.92);
  --color-dark-red01: rgba(102, 17, 37, 0.92);
  --color-navy01: #566784;
  --color-text: #707070;
}

/*================================================================
# 基本設定
================================================================*/
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ja-mincho);
  line-height: 1.6875;
  color: #000;
  position: relative;
  z-index: 0;
}

img {
  width: 100%;
}

a {
  &:hover {
    opacity: 0.5;
    cursor: pointer;
  }

  &:active {
    opacity: 0.5;
    cursor: pointer;
  }
}

/* 表示・非表示
====================================================*/
@media (min-width: 960px) {
  .is_tab {
    display: none;
  }

  .is_sp {
    display: none;
  }

  .is_tab-sp {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 959px) {
  .is_pc {
    display: none;
  }

  .is_sp {
    display: none;
  }
}

@media (max-width: 767px) {
  .is_pc {
    display: none;
  }

  .is_tab {
    display: none;
  }

  .is_pc-tab {
    display: none;
  }
}

/*================================================================
# 全体共通パーツ
================================================================*/

/*--------------------------------------------
## ly-All
--------------------------------------------*/
.ly_wrapper {
  overflow: hidden;
}

.ly_main-width {
  width: clamp(300px, 92%, 1920px);
  margin: 0 auto;
}

/*--------------------------------------------
## font-size
--------------------------------------------*/
.size15 {
  font-size: 15px;
}

.size18 {
  font-size: clamp(11.5px, calc(10px + 0.4166666666666667vw), 18px);
}

.size20 {
  font-size: clamp(13px, calc(11.384615384615385px + 0.4487179487179487vw), 20px);
}

.size25 {
  font-size: clamp(12.5px, calc(9.615384615384617px + 0.8012820512820512vw), 25px);
}

.size30 {
  font-size: clamp(15px, calc(11.538461538461538px + 0.9615384615384616vw), 30px);
}

.size35 {
  font-size: clamp(16px, calc(11.615384615384615px + 1.217948717948718vw), 35px);
}

.size40 {
  font-size: clamp(17px, calc(14.153846153846153px + 1.3461538461538463vw), 40px);
}

.size50 {
  font-size: clamp(18px, calc(10.615384615384615px + 2.051282051282051vw), 50px);
}

/*--------------------------------------------
## header
--------------------------------------------*/
.header {
  position: fixed;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 3;

  @media (max-width: 767px) {
    display: none;
  }

  .header__logo {
    width: 85px;
    margin-inline: auto;
  }
}

.btn_drawer {
  position: absolute;
  display: block;
  width: 60px;
  top: 140px;
  left: auto;
  right: 50%;
  transform: translateX(-35%);

  @media (max-width: 767px) {
    width: 42px;
    top: 15%;
    right: 0;
  }
}

.header__menu {
  display: none;
}

.header__btn-group {
  position: fixed;
  width: var(--header-width);
  bottom: 0;

  .header__btn {
    width: 100%;
    display: table;
    text-align: center;

    a {
      display: table-cell;
      vertical-align: middle;
      font-size: 18px;
      color: #fff;
      width: 100%;
      height: 82px;
      text-align: center;
    }

    &.header__btn--lang {
      background: #fff;

      a {
        color: #707070;
      }
    }

    &.header__btn--news {
      background: #bababa;

      a {
        font-family: var(--font-marugothic);
        line-height: 1.1;
      }

      @media (max-width: 767px) {
        display: none;
      }
    }

    &.header__btn--reserve {
      background: var(--color-blue01);

      a {
        font-family: var(--font-marugothic);
        line-height: 1.1;
      }

      @media (max-width: 767px) {
        display: none;
      }
    }
  }
}

.gtranslate_wrapper {
  width: 100%;
  display: table;
  text-align: center;

  a {
    display: table-cell;
    vertical-align: middle;
    font-size: 18px;
    color: #707070;
    width: 100%;
    height: 82px;
    text-align: center;
  }

  a.glink img {
    width: 21px;
    margin-right: 6px;
  }

  a.glink span {
    margin-right: 6px !important;
    font-size: 18px !important;
  }

  a.glink.gt-current-lang {
    display: none;
  }
}

/* drawerカスタマイズ */
.drawer-nav {
  width: var(--header-width);
}

.drawer--right .drawer-nav {
  right: 0;
  -webkit-transition: right 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transition: right 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.drawer--right.drawer-open {
  .drawer-nav {
    width: 16.25rem;
  }

  .drawer-hamburger {
    right: 3.05rem;
    z-index: 20;

    @media (max-width: 767px) {
      right: 0;
    }
  }

  .header__menu {
    display: block;
    margin: 150px 0 0;

    @media (max-width: 767px) {
      margin: 70px 0 0;
    }

    li {
      a {
        display: block;
        padding: 0 1.5em;
        line-height: 2.5em;
      }
    }
  }

  .header__btn-group {
    width: 16.25rem;
  }
}

@media (max-width: 767px) {
  .drawer--right.drawer-open {
    .header {
      display: block;
    }
  }
}

/*--------------------------------------------
## main
--------------------------------------------*/
main {
  padding-right: var(--header-width);
  position: relative;

  @media (max-width: 767px) {
    padding-right: 0;
  }
}

/*--------------------------------------------
## headLine
--------------------------------------------*/

/*--------------------------------------------
## footer
--------------------------------------------*/
/* id="footer" はCSSで参照しているため残存、スタイルは .footer に移行 */
.footer {
  color: #fff;
  padding: clamp(40px, calc(30.076923076923077px + 2.7564102564102564vw), 83px) 0;
  background: url(../img/bg_footer.webp) no-repeat top center / cover;
  width: 100%;
  height: auto;
  text-align: center;
  position: relative;
  z-index: 0;
  padding-right: var(--header-width);

  @media (max-width: 767px) {
    padding-right: 0;
    padding-bottom: 135px;
  }

  &::before {
    position: absolute;
    content: "";
    background: #807b4e;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.92;
    z-index: -1;
  }
}

.footer__inner {
  width: min(100% - 4rem, 1040px);
  margin-inline: auto;
}

.footer__nav--pc {
  display: flex;
  justify-content: space-between;

  @media (max-width: 970px) {
    display: none;
  }

  .tit {
    text-align-last: left;
    margin-bottom: 1em;
  }

  .footer__sub-menu {
    text-align-last: left;
    padding: 2em 0;
    margin-left: 1em;
    border-left: 1px solid #fff;

    li {
      font-size: 13px;
      padding-left: 1em;

      &:nth-of-type(n + 2) {
        margin-top: 1em;
      }
    }
  }
}

.footer__nav--sp {
  display: none;

  @media (max-width: 970px) {
    display: block;
  }

  ul {
    text-align: center;

    li {
      a {
        display: block;
        font-size: clamp(15px, calc(1.7647058823529402px + 3.6764705882352944vw), 30px);
        line-height: 2.5em;
      }
    }
  }
}

.footer__logo {
  width: min(100%, 538px);
  margin-inline: auto;
  margin-top: clamp(45px, calc(26.53846153846154px + 5.128205128205128vw), 125px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.footer__logo-img {
  width: min(20%, 100px);
}

.footer__catchcopy {
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.footer__info {
  margin-top: clamp(45px, calc(38.07692307692308px + 1.9230769230769231vw), 75px);
  margin-inline: auto;

  dl {
    display: flex;
    justify-content: center;
    font-family: var(--font-ja-gothic);

    &:nth-of-type(n + 2) {
      margin-top: 1em;
    }

    dt {
      margin-right: 1em;
    }
  }
}

/* 追従ボタン - spのみ
=============================================*/
.footer__sp-cta {
  display: none;

  @media (max-width: 767px) {
    display: flex;
    position: fixed;
    bottom: clamp(48.2px, calc(0.6127764127764124px + 13.218673218673219vw), 102px);
    left: 0;
    z-index: 1;
    width: 100%;
  }
}

.footer__sp-btn {
  width: 50%;
  display: table;
  text-align: center;

  a {
    display: table-cell;
    vertical-align: middle;
    font-size: 18px;
    color: #fff;
    width: 100%;
    height: 72px;
    text-align: center;
  }

  &.footer__sp-btn--news {
    background: #bababa;

    a {
      font-family: var(--font-marugothic);
      line-height: 1.1;
    }
  }

  &.footer__sp-btn--reserve {
    background: var(--color-blue01);

    a {
      font-family: var(--font-marugothic);
      line-height: 1.1;
    }
  }
}

/* 追従　新ロゴお知らせ - spのみ
=============================================*/
.footer__sp-logo {
  display: none;

  @media (max-width: 767px) {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
  }
}

/*================================================================
# top-page
================================================================*/

/*--------------------------------------------
## page-hero
--------------------------------------------*/
.page-hero {
  .mv-inner {
    position: relative;

    &::before {
      position: absolute;
      content: "";
      background: url(../img/logo-born.webp) no-repeat center/ contain;
      width: min(102%, 762px);
      height: 80px;
      top: clamp(0px, calc(-20px + 2.604166666666667vw), 30px);
      left: -2px;
    }

    @media (max-width: 767px) {
      &::before {
        background: none;
      }
    }
  }

  h2 {
    position: absolute;
    line-height: 1.4;
  }

  /* ブライダル（和） */
  .mv-bridal-wa {
    top: 62.4%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: clamp(18px, calc(10.615384615384615px + 2.051282051282051vw), 50px);
    white-space: nowrap;
  }

  /* 七五三 */
  .mv-shichigosan {
    top: 50%;
    transform: translateY(-50%);
    left: auto;
    right: 5%;
    color: #fff;
    font-size: clamp(18px, calc(10.615384615384615px + 2.051282051282051vw), 50px);

    @media (max-width: 767px) {
      top: 30%;
    }
  }

  /* 成人 */
  .mv-seijin {
    top: 50%;
    transform: translateY(-50%);
    left: 9%;
    color: var(--color-text);
    font-size: clamp(18px, calc(10.615384615384615px + 2.051282051282051vw), 50px);
  }

  /* ブライダル（洋） */
  .mv-bridal-yo {
    top: 38%;
    transform: translateY(-50%);
    left: auto;
    right: 2%;
    color: var(--color-text);
    font-size: clamp(18px, calc(10.615384615384615px + 2.051282051282051vw), 50px);
  }

  /* ニューボーン */
  .mv-newborn {
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    color: var(--color-text);
    font-size: clamp(18px, calc(10.615384615384615px + 2.051282051282051vw), 50px);

    @media (max-width: 767px) {
      left: 8%;
    }
  }

  /* 入学 */
  .mv-nyugaku {
    top: 45%;
    transform: translateY(-50%);
    left: 16%;
    color: var(--color-text);
    font-size: clamp(18px, calc(10.615384615384615px + 2.051282051282051vw), 50px);

    @media (max-width: 767px) {
      left: 10%;
    }
  }

  /*
/* 派生ページ sub-page
========================= */
  .mv-inner-sub {
    position: relative;

    &::before {
      position: absolute;
      content: "";
      background: url(../img/logo-new01_BLU.webp) no-repeat center/ contain;
      width: clamp(120px, calc(105px + 4.166666666666666vw), 185px);
      height: clamp(32px, calc(15.615384615384617px + 4.551282051282051vw), 103px);
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
    }

    &.guide {
      &::before {
        position: absolute;
        content: "";
        background: url(../img/logo-new01_WHT.webp) no-repeat center/ contain;
        width: clamp(120px, calc(108px + 3.3333333333333335vw), 172px);
        height: clamp(23.6px, calc(13.584615384615386px + 2.782051282051282vw), 67px);
        top: 3%;
        left: 2%;
        transform: none;
      }
    }

    .page-hero__title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      text-align: center;

      &.guide {
        top: 50%;
        font-size: clamp(24px, calc(13.384615384615385px + 2.9487179487179485vw), 70px);
        color: #fff;
        text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
      }

      &.reserve {
        top: auto;
        bottom: 1.5em;
        font-size: clamp(20px, calc(13.076923076923077px + 1.9230769230769231vw), 50px);
        font-weight: 300;
        color: var(--color-blue01);
        text-shadow: 0 3px 6px rgba(255, 255, 255, 1);

        @media (max-width: 767px) {
          bottom: 23%;
        }
      }

      &.shopInfo {
        top: 55%;
        font-size: clamp(20px, calc(13.076923076923077px + 1.9230769230769231vw), 50px);
        color: #4b4b4b;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

        @media (max-width: 767px) {
          bottom: 23%;
        }
      }

      &.service-qa {
        top: 55%;
        font-size: clamp(20px, calc(13.076923076923077px + 1.9230769230769231vw), 50px);
        color: #626262;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

        @media (max-width: 767px) {
          bottom: 23%;
        }
      }

      &.shichi-go-san {
        top: 39%;
        left: 37%;
        font-size: clamp(24px, calc(13.384615384615385px + 2.9487179487179485vw), 70px);
        color: #626262;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

        span {
          display: block;
          font-size: clamp(13px, calc(6.769230769230769px + 1.7307692307692308vw), 40px);
          padding-bottom: 0.1em;
        }
      }

      &.age-ceremony {
        top: 32%;
        left: auto;
        right: -68%;
        font-size: clamp(24px, calc(13.384615384615385px + 2.9487179487179485vw), 70px);
        color: #fff;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

        span {
          display: block;
          font-size: clamp(13px, calc(6.769230769230769px + 1.7307692307692308vw), 40px);
          padding-bottom: 0.1em;
        }
      }

      &.fresh-start {
        top: 50%;
        left: 50%;
        transform: translate(-70%, -50%);
        font-size: clamp(21px, calc(9.692307692307693px + 3.141025641025641vw), 70px);
        color: #626262;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

        @media (max-width: 1158px) {
          transform: translate(-65%, -50%);
        }

        span {
          display: block;
          font-size: clamp(13px, calc(6.769230769230769px + 1.7307692307692308vw), 40px);
          padding-bottom: 0.4em;

          font {
            font-size: clamp(11px, calc(5.461538461538462px + 1.5384615384615385vw), 35px);
          }
        }

        font {
          font-size: clamp(15px, calc(8.076923076923077px + 1.9230769230769231vw), 50px);
        }
      }

      &.baby-ceremony {
        top: 52%;
        left: 41%;
        font-size: clamp(24px, calc(13.384615384615385px + 2.9487179487179485vw), 70px);
        color: #626262;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

        span {
          display: block;
          font-size: clamp(13px, calc(6.769230769230769px + 1.7307692307692308vw), 40px);
          padding-bottom: 0.4em;

          font {
            font-size: clamp(11px, calc(5.461538461538462px + 1.5384615384615385vw), 35px);
          }
        }

        font {
          font-size: clamp(15px, calc(6.923076923076923px + 2.2435897435897436vw), 50px);
        }
      }

      &.first-celebration {
        top: 31%;
        left: 36%;
        font-size: clamp(24px, calc(13.384615384615385px + 2.9487179487179485vw), 70px);
        color: #fff;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

        span {
          display: block;
          font-size: clamp(13px, calc(6.769230769230769px + 1.7307692307692308vw), 40px);
          padding-bottom: 0.4em;
        }
      }

      &.birthday {
        top: 31%;
        left: 32%;
        font-size: clamp(24px, calc(13.384615384615385px + 2.9487179487179485vw), 70px);
        color: #fff;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

        span {
          display: block;
          font-size: clamp(13px, calc(6.769230769230769px + 1.7307692307692308vw), 40px);
          padding-bottom: 0.4em;
        }
      }

      &.maternity {
        top: 31%;
        left: 32%;
        font-size: clamp(24px, calc(13.384615384615385px + 2.9487179487179485vw), 70px);
        color: #626262;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

        span {
          display: block;
          font-size: clamp(13px, calc(6.769230769230769px + 1.7307692307692308vw), 40px);
          padding-bottom: 0.4em;
        }
      }

      &.family-memorial {
        top: 31%;
        left: 50%;
        font-size: clamp(24px, calc(13.384615384615385px + 2.9487179487179485vw), 70px);
        color: #fff;
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

        span {
          display: block;
          font-size: clamp(13px, calc(6.769230769230769px + 1.7307692307692308vw), 40px);
          padding-bottom: 0.4em;
        }
      }

      &.bridal {
        top: 56%;
        left: 68%;
        font-size: clamp(24px, calc(13.384615384615385px + 2.9487179487179485vw), 70px);
        color: rgba(191, 184, 121, 0.92);
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

        span {
          display: block;
          font-size: clamp(13px, calc(6.769230769230769px + 1.7307692307692308vw), 40px);
          padding-bottom: 0.4em;
        }
      }

      &.bridal-plans {
        /* top: 15%;
                left: 70%; */
        top: 50%;
        left: 50%;

        transform: translate(5%, -61%);
        text-align: left;
        font-size: clamp( 21px, calc( 9.692307692307693px + 3.141025641025641vw ), 70px );
        color: rgba(191, 184, 121, 0.92);
        text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16);

        @media (max-width: 1620px) {
            transform: translate(-6%, -42%);
        }

        @media (max-width: 560px) {
            transform: translate(-20%, -29%);
        }

        span {
          display: block;
          font-size: clamp(13px, calc(6.769230769230769px + 1.7307692307692308vw), 40px);
          padding-bottom: 0.4em;

          &.sub-tit {
            font-size: clamp(10px, calc(6.538461538461538px + 0.9615384615384616vw), 25px);
            margin-top: clamp(10px, calc(0.76923076923077px + 2.564102564102564vw), 50px);
          }
        }
      }
    }
  }
}

/*--------------------------------------------
## key-contents
--------------------------------------------*/
#key-contents {
  color: var(--color-text);
  text-align: center;
  padding-top: 46px;

  .read_container {
    width: min(100% - 2rem, 1049px);
    margin-inline: auto;

    .lead {
      font-family: var(--font-shippori);
      font-weight: 500;
      line-height: 1.7em;
      padding-bottom: 1.4em;
      position: relative;

      &::before {
        position: absolute;
        content: "";
        background: rgba(191, 184, 121, 0.92);
        width: 900px;
        height: 5px;
        top: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .txt {
      margin-top: 1.5em;
      line-height: 1.66;
    }
  }

  .reborn_container {
    width: min(100% - 2rem);
    margin-inline: auto;

    .tit-box {
      margin-top: 1.5em;
      line-height: 1.66;

      .old-logo {
        width: min(82%, 400px);
        margin: clamp(45px, calc(34.61538461538461px + 2.8846153846153846vw), 90px) auto clamp(25px, calc(19.230769230769234px + 1.6025641025641024vw), 50px);
      }

      .new-logo {
        width: min(59%, 288px);
        margin: clamp(35px, calc(32.69230769230769px + 0.641025641025641vw), 45px) auto clamp(55px, calc(52.69230769230769px + 0.641025641025641vw), 65px);
      }
    }

    .txt {
      font-size: clamp(14px, calc(13.076923076923077px + 0.2564102564102564vw), 18px);
      margin-top: clamp(57px, calc(48.92307692307692px + 2.2435897435897436vw), 92px);
      line-height: 1.66;
    }
  }

  .img_container {
    width: min(100% - 2rem, 1500px);
    margin-inline: auto;
    margin-top: clamp(50px, calc(18.384615384615387px + 8.782051282051281vw), 187px);
    text-align: left;
    position: relative;

    @media (max-width: 1228px) {
      text-align: center;
    }

    .heading_block {
      background: rgba(191, 184, 121, 0.92);
      padding: 0.3em 0;
      display: flex;
      margin: 0 calc(50% - 50vw);
      width: 100vw;

      @media (max-width: 1228px) {
        padding: 7px 0 1em 0;
      }
    }

    .heading {
      display: block;
      width: min(100% - 8.3em, 1311px);
      margin-inline: auto;
      color: #fff;
      font-family: var(--font-shippori);
      font-weight: 500;
      line-height: 1.75;

      @media (max-width: 1228px) {
        width: min(100% - 2rem, 1311px);
      }
    }

    .inner {
      width: min(100% - 6em, 1311px);
      margin-inline: auto;

      @media (max-width: 767px) {
        width: 100%;
      }

      .txt {
        width: min(100%, 720px);
        text-align: left;
        margin-top: 1.5em;
        line-height: 1.66;

        @media (max-width: 1228px) {
          width: 100%;
          text-align: center;
        }

        font {
          font-size: clamp(18px, calc(-2.0445062586926284px + 1.6689847009735743vw), 30px);
        }
      }

      .img {
        width: clamp(25.813rem, 7.792rem + 24.03vw, 36.625rem);
        width: clamp( 416px, calc( 114.32369942196533px + 24.566473988439306vw ), 586px );
        position: absolute;
        top: -50px;
        right: 0;

        @media (max-width: 1228px) {
          position: static;
          margin-top: clamp(26px, calc(20.46153846153846px + 1.5384615384615385vw), 50px);
          margin-inline: auto;
          width: min(100%, 586px);
        }
      }
    }

    .bottom_img {
      margin: 0 calc(50% - 50vw);
      width: 100vw;
      margin-top: clamp(63px, calc(43.15384615384615px + 5.512820512820513vw), 149px);
      position: relative;

      .inner {
        width: min(94% - 2rem, 1620px);
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);

        @media (max-width: 767px) {
          width: min(97%, 767px);
        }
      }

      .txt_container {
        position: absolute;
        content: "";
        top: 50%;
        right: 6.6%;
        transform: translateY(-50%);
        color: #fff;
        text-align-last: left;

        @media (max-width: 767px) {
          right: 0;
        }

        .img_heading {
          font-family: var(--font-shippori);
          font-size: clamp(22px, calc(7.333333333333332px + 1.9097222222222223vw), 44px);
          font-weight: 600;
          line-height: 1.3;
          text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);

          @media (max-width: 767px) {
            font-size: clamp(17px, calc(2.2431077694235597px + 4.010025062656641vw), 33px);
          }

          font {
            font-size: clamp(17px, calc(-6.385257301808068px + 1.9471488178025034vw), 31px);
          }
        }

        .img_txt {
          font-size: clamp(14px, calc(3.333333333333334px + 1.3888888888888888vw), 30px);
          line-height: 1.66;
          margin-top: 2em;
          text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);

          @media (max-width: 767px) {
            font-size: clamp(10.8px, calc(2.6823529411764717px + 2.2549019607843137vw), 20px);
          }

          font {
            font-size: clamp(15px, calc(4.977746870653686px + 0.8344923504867872vw), 21px);
          }
        }
      }
    }
  }
}

/*--------------------------------------------
## plan
--------------------------------------------*/
#plan {
  text-align: center;
  position: relative;

  .heading_block {
    background: var(--color-khaki02);
    padding: clamp(44px, calc(25.53846153846154px + 5.128205128205128vw), 124px) 0 clamp(72px, calc(28.153846153846153px + 12.179487179487179vw), 262px);
    margin-bottom: clamp(295px, calc(258.53846153846155px + 10.128205128205128vw), 453px);
    color: #fff;

    .heading {
      width: min(100%, 1169px);
      margin-inline: auto;
      font-family: var(--font-ja-gothic);
      font-weight: 600;
      letter-spacing: 0.05em;
      padding-bottom: 14px;
      border-bottom: 1px solid #fff;
    }

    .txt {
      margin-top: 14px;
      line-height: 1.25;
    }
  }

  .img_container {
    width: min(100% - 1rem, 1363px);
    position: absolute;
    top: clamp(150px, calc(113.07692307692308px + 10.256410256410255vw), 310px);
    left: 50%;
    transform: translateX(-50%);

    ul {
      display: flex;
      justify-content: center;

      @media (max-width: 1150px) {
        justify-content: flex-start;
      }
    }

    li {
      &.swiper-slide {
        width: clamp(225px, calc(178.84615384615387px + 12.82051282051282vw), 425px);
      }

      a {
        display: block;
        position: relative;

        /* &::before {
                    width: 100%;
                    position: absolute;
                    font-size: clamp(19px, calc(14.153846153846153px + 1.3461538461538463vw), 40px);
                    font-weight: lighter;
                    color: #fff;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                } */

        p {
          width: 100%;
          position: absolute;
          font-size: clamp(19px, calc(14.153846153846153px + 1.3461538461538463vw), 40px);
          font-weight: lighter;
          color: #fff;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      /* a {
                &.shichigosan {
                    &::before {
                        content: "七五三フォト";
                    }
                }

                &.seijinshiki {
                    &::before {
                        content: "成人フォト";
                    }
                }

                &.bridal {
                    &::before {
                        content: "ブライダルフォト";
                    }
                }
            } */
    }

    .txt {
      color: #777245;
      line-height: 1.28;
      margin-top: 2.6em;
    }
  }
}

/*--------------------------------------------
## menu
--------------------------------------------*/
#menu {
  text-align: center;

  .heading_box {
    background: var(--color-dark-red01);
  }

  .heading {
    color: #fff;
    font-family: var(--font-ja-gothic);
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.3em 0 0.4em;
  }

  .txt {
    padding: 37px 0;
    color: var(--color-text);

    &.sub {
      color: #fff;
    }
  }

  .menu_wrap {
    padding: clamp(33px, calc(24.923076923076923px + 2.2435897435897436vw), 68px) 0 clamp(41px, calc(31.76923076923077px + 2.564102564102564vw), 81px);
    position: relative;

    &::before {
      position: absolute;
      content: "";
      background: var(--color-dark-red01);
      width: 100%;
      height: 134px;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      z-index: -1;
    }

    .menu_items {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2% 0;

      li {
        width: min(46%, 249px);
      }

      a {
        display: block;
        position: relative;

        p {
          width: 100%;
          position: absolute;
          font-size: clamp(19px, calc(16.46153846153846px + 0.7051282051282052vw), 30px);
          font-weight: lighter;
          color: #fff;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          line-height: 1.3;
          white-space: pre;

          font {
            font-size: 18px;
          }
        }

        /* &::before {
                    width: 100%;
                    position: absolute;
                    font-size: clamp(19px, calc(16.46153846153846px + 0.7051282051282052vw), 30px);
                    font-weight: lighter;
                    color: #fff;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    text-align: center;
                    line-height: 1.3;
                    white-space: pre;
                } */
      }

      /* a {
                &.item01 {
                    &::before {
                        content: "お宮参り\A百日記念";
                    }
                }

                &.item02 {
                    &::before {
                        content: "初節句";
                    }
                }

                &.item03 {
                    &::before {
                        content: "七五三";
                    }
                }

                &.item04 {
                    &::before {
                        content: "バースデー";
                    }
                }

                &.item05 {
                    &::before {
                        content: "卒入園\A卒入学";
                    }
                }

                &.item06 {
                    &::before {
                        content: "成人";
                    }
                }

                &.item07 {
                    &::before {
                        content: "ブライダル";
                    }
                }

                &.item08 {
                    &::before {
                        content: "マタニティ";
                    }
                }

                &.item09 {
                    &::before {
                        content: "ファミリー";
                    }
                }

                &.item10 {
                    &::before {
                        content: "メモリアル\A（シニア）";
                    }
                }
            } */
    }
  }
}

/*--------------------------------------------
## basic-menu
--------------------------------------------*/
.basicMenu_wrap {
  margin-inline: auto;
  padding: clamp(37px, calc(30.076923076923077px + 1.9230769230769231vw), 67px) 0;
  background: rgba(61, 153, 165, 0.45);
  margin-bottom: clamp(49px, calc(35.15384615384615px + 3.8461538461538463vw), 109px);

  .btn {
    width: min(100% - 2rem, 692px);
    margin-inline: auto;
    position: relative;

    a {
      .btn_txt {
        text-align: center;
        color: #fff;
        line-height: 1.3;
        text-align: center;
        position: absolute;
        content: "";
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
        z-index: 1;
      }
    }
  }

  > .txt {
    text-align: center;
    color: #fff;
    margin-top: 25px;
    line-height: 2;
  }
}

/*--------------------------------------------
## for school
--------------------------------------------*/
#school {
  padding: clamp(69px, calc(52.84615384615385px + 4.487179487179487vw), 139px) 0 clamp(38px, calc(28.76923076923077px + 2.564102564102564vw), 78px);
  text-align: center;

  .img {
    width: min(100% - 2rem, 844px);
    margin-inline: auto;
  }

  .heading {
    width: min(100% - 2rem, 1169px);
    margin-inline: auto;
    font-family: var(--font-ja-gothic);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(106, 160, 167, 0.28);
    margin-top: 1.4em;
    padding-bottom: 37px;
    border-bottom: 1px solid #707070;
  }

  .sub-heading {
    width: min(100% - 2rem);
    margin-inline: auto;
    color: var(--color-blue02);
    line-height: 1.3;
    margin-top: 47px;
  }

  .txt {
    width: min(100% - 2rem);
    color: var(--color-text);
    margin-inline: auto;
    margin-top: 1.5em;
    line-height: 1.33;
  }

  .btn {
    width: min(100% - 2rem, 711px);
    margin-inline: auto;
    margin-top: clamp(68px, calc(56.92307692307692px + 3.076923076923077vw), 116px);

    a {
      display: block;
      color: #fff;
      background: var(--color-blue02);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
      padding: 1em;
      border-radius: 60px;
      line-height: 1.5;
    }
  }
}

/*--------------------------------------------
## information
--------------------------------------------*/
#info {
  color: var(--color-text);
  margin: clamp(86.6px, calc(75.06153846153846px + 3.205128205128205vw), 136.6px) 0;
  position: relative;

  &::before {
    position: absolute;
    content: "";
    background: rgba(191, 184, 121, 0.92);
    width: 100%;
    height: 1px;
    top: 38px;
    left: 0;
    z-index: -1;
  }

  @media (max-width: 1000px) {
    &::before {
      top: 3%;
    }
  }

  .inner {
    width: min(100% - 2rem, 1104px);
    margin-inline: auto;
  }

  .heading {
    width: min(100%, 437px);
    background: rgba(191, 184, 121, 0.92);
    padding: 1em;
    border-radius: 27px;
    color: #fff;
  }

  .sub-heading {
    margin-top: 1.9em;
    line-height: 2.3;
  }

  .img_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3em 3%;
    margin-top: clamp(31.2px, calc(17.353846153846153px + 3.8461538461538463vw), 91.2px);

    .items {
      display: block;
      width: min(47%, 237px);

      .thumbnail {
        img {
          width: 100%;
          height: auto;
          aspect-ratio: 1/1;
          object-fit: cover;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
          border-radius: 35px;
        }
      }

      .date {
        display: block;
        margin-top: 14.3px;
        padding-bottom: 22.3px;
        border-bottom: 1px solid var(--color-text);

        .new {
          display: inline-block;
          margin-left: 0.5em;
          color: var(--color-blue01);
          font-size: 12px;
          font-weight: 600;
        }
      }

      .caption {
        margin-top: 10.6px;
        font-family: var(--font-marugothic);
        width: 100%;
        overflow: hidden;

        span {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          font-weight: 300;
          -webkit-line-clamp: 2;
          line-height: 1.66;
        }
      }
    }
  }

  .btn {
    text-align: center;
    margin-top: 3em;

    a {
      line-height: 2.3;
    }
  }
}

/*--------------------------------------------
## about
--------------------------------------------*/
#about {
  text-align: center;
  color: var(--color-text);

  .heading_wrap {
    .heading_block {
      background: #bababa;
      overflow: hidden;
      height: clamp(52px, calc(48.53846153846154px + 0.9615384615384616vw), 67px);

      .heading {
        font-family: var(--font-ja-gothic);
        font-size: clamp(70px, calc(63.07692307692308px + 1.9230769230769231vw), 100px);
        font-weight: 600;
        color: rgba(255, 255, 255, 0.28);
        margin-top: clamp(-13px, calc(-10.692307692307693px + -0.641025641025641vw), -23px);
      }
    }

    .sub-heading {
      width: min(100% - 2rem, 888px);
      margin-inline: auto;
      margin-top: 1.38em;
      font-family: var(--font-ja-gothic);
      font-weight: 600;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--color-text);
    }

    .txt {
      width: min(100% - 2rem);
      margin-inline: auto;
      margin-top: 1.2em;
      line-height: 2;
    }
  }

  .shop-section {
    margin-top: clamp(40px, calc(31px + 2.5vw), 79px);
    text-align: left;
    position: relative;

    &.shop-section--minatomachi {
      .img {
        left: 2rem;
      }

      .sp_bgcl {

          background: var(--color-khaki02);
        
      }

      .info_container {
        background: var(--color-khaki02);

        @media (max-width: 1100px) {
          background: none;
        }
      }

      .info {
        margin-left: auto;
      }

      .staff {
        margin-left: auto;
        padding-right: 2rem;

        @media (max-width: 767px) {
          margin-left: auto;
          padding-right: 0;
        }
      }
    }

    &.shop-section--oroshihonmachi {
      .img {
        right: 2rem;
      }

      .sp_bgcl {
          background: var(--color-navy01);
      
      }

      .info_container {
        background: var(--color-navy01);

        @media (max-width: 1100px) {
          background: none;
        }
      }

      .staff {
        margin-left: 2rem;

        @media (max-width: 767px) {
          margin-left: auto;
        }
      }
    }

    .sp_bgcl {
      @media (max-width: 1100px) {
        padding: 2rem 0;
      }
    }

    .sp_inner {
      @media (max-width: 1100px) {
        width: min(100% - 2rem, 500px);
        margin-inline: auto;
      }
    }

    .img {
      width: 43%;
      position: absolute;
      top: 48.25%;
      transform: translateY(-50%);

      @media (max-width: 1100px) {
        position: static;
        width: 100%;
        transform: translateY(0);
      }
    }

    .info_container {
      width: 100%;
    }

    .inner {
      width: min(100% - 4rem);
      margin-inline: auto;
      color: #fff;
      position: relative;

      @media (max-width: 767px) {
        width: 100%;
      }
    }

    .info {
      width: 48%;
      color: #fff;
      padding: 2rem 0;

      @media (max-width: 1100px) {
        width: 100%;
        margin-top: 1em;
        padding: 0;
      }

      .add {
        margin-top: 1em;
      }

      .tel {
        text-align: right;
        margin-top: 0.5em;
        padding-bottom: clamp(16px, calc(11.384615384615385px + 1.282051282051282vw), 36px);
        border-bottom: 1px solid #fff;

        span {
          padding-left: 0.5em;
        }
      }

      .txt {
        margin-top: 0.5em;
        line-height: 1.66;
      }
    }

    .staff {
      color: var(--color-text);
      width: 48%;
      margin-top: 36px;

      @media (max-width: 1100px) {
        display: block;
        width: min(100% - 2rem);
        margin-inline: auto;
      }

      .col {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        @media (max-width: 767px) {
          display: block;
        }
      }

      figure {
        flex: 1;

        img {
          border-radius: 9px;
        }

        @media (max-width: 767px) {
          width: 65%;
          margin-inline: auto;
        }
      }

      figcaption {
        flex: 2;
        padding-left: 2em;

        @media (max-width: 767px) {
          width: 100%;
          padding-left: 0;
          margin-top: 1em;
        }

        .intro {
          font-size: clamp(13px, calc(12.307692307692308px + 0.19230769230769232vw), 16px);
        }

        .name {
          margin-top: 14.6px;
          font-size: clamp(16px, calc(15.076923076923077px + 0.2564102564102564vw), 20px);
        }

        .comment {
          font-size: clamp(13px, calc(12.538461538461538px + 0.1282051282051282vw), 15px);
          margin-top: 25px;
          line-height: 2;
        }
      }

      .shop-section__btn {
        width: min(100%, 374px);
        margin-top: 30px;
        text-align: center;

        @media (max-width: 1100px) {
          margin-inline: auto;
        }

        &.shop-section__btn--minatomachi {
          margin-left: auto;
          padding-right: 5%;

          a {
            background: var(--color-khaki02);
          }
        }

        &.shop-section__btn--oroshihonmachi {
          margin-right: auto;
          padding-left: 5%;

          a {
            background: var(--color-navy01);
          }
        }

        a {
          color: #fff;
          display: block;
          padding: 1em;
          border-radius: 27px;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
        }
      }
    }
  }

  .bottom-txt {
    color: #777245;
    line-height: 1.3;
    margin-top: clamp(25px, calc(16.23076923076923px + 2.435897435897436vw), 63px);

    &.sub {
      color: var(--color-text);
    }
  }
}

/*--------------------------------------------
## our media
--------------------------------------------*/
#media {
  text-align: center;
  margin: clamp(80px, calc(56.92307692307693px + 6.41025641025641vw), 180px) 0;

  .heading {
    font-family: var(--font-ja-gothic);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-khaki02);
    padding-bottom: clamp(23px, calc(18.615384615384613px + 1.217948717948718vw), 42px);
    border-bottom: 4px solid var(--color-khaki02);
  }

  .txt {
    margin-top: clamp(26px, calc(22.76923076923077px + 0.8974358974358974vw), 40px);
    line-height: 2;
    color: var(--color-khaki02);
  }

  .media_wrap {
    margin-top: clamp(46px, calc(28.69230769230769px + 4.807692307692308vw), 121px);

    .icon {
      width: clamp(38px, calc(32.92307692307692px + 1.4102564102564104vw), 60px);
      margin-inline: auto;
    }

    .account_container {
      margin-top: 23px;

      &:nth-child(n + 3) {
        margin-top: clamp(62px, calc(48.15384615384615px + 3.8461538461538463vw), 122px);
      }
    }

    .link {
      display: block;
      color: var(--color-text);

      .account {
        margin-top: 0.3em;
      }
    }

    .swiper {
      width: min(100%, 1400px);
      margin-inline: auto;
      margin-top: clamp(25px, calc(15.307692307692307px + 2.6923076923076925vw), 67px);
      display: flex;

      .swiper-slide {
        width: 255px !important;
        position: relative;
        overflow: hidden;
        padding-top: 255px;

        img {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
          object-fit: cover;
          height: 100%;
        }
      }
    }

    .swiper > .swiper-wrapper {
      -webkit-transition-timing-function: linear !important;
      -o-transition-timing-function: linear !important;
      transition-timing-function: linear !important;
    }
  }
}

/*--------------------------------------------
## line-reserve
--------------------------------------------*/
#line-qa-reserve {
  width: min(100% - 2rem, 997px);
  margin-inline: auto;

  .btn {
    margin-top: clamp(51px, calc(25.615384615384617px + 7.051282051282051vw), 161px);

    a {
      display: block;
      text-align: center;
      font-family: var(--font-ja-gothic);
      color: #fff;
      font-weight: 400;
      padding: 1em;
      background: var(--color-blue01);
      border-radius: 31px;
    }
  }

  .page-bottom-note {
    text-align: center;
    font-family: var(--font-ja-gothic);
    font-size: clamp(15px, calc(12.692307692307693px + 0.641025641025641vw), 25px);
    font-weight: 400;
    color: var(--color-blue01);
    line-height: 1.6;
    margin-top: clamp(44px, calc(41.46153846153846px + 0.7051282051282052vw), 55px);
  }
}

/*--------------------------------------------
## reserve
--------------------------------------------*/
#reserve {
  text-align: center;
  margin-top: clamp(90px, calc(67.15384615384616px + 6.346153846153846vw), 189px);

  &.bridal-reserve {
    margin-top: 0;
  }

  .heading_block {
    background: var(--color-khaki01);
    color: #fff;
    padding: 1.3em 0 2.4em;

    .heading {
      padding-bottom: 26px;
      margin-bottom: 26px;
      letter-spacing: 0.03em;
      position: relative;

      &::before {
        position: absolute;
        content: "";
        background: #ccc;
        width: 435px;
        height: 1px;
        top: auto;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
      }
    }

    .txt {
      letter-spacing: 0.03em;
    }
  }

  .inner {
    width: min(100% - 2rem, 950px);
    margin-inline: auto;
    padding: clamp(55px, calc(34.663395485770366px + 2.2571148184494603vw), 78px) 0 clamp(80px, calc(74.23076923076923px + 1.6025641025641024vw), 105px);

    @media (max-width: 900px) {
      padding: 0 0 clamp(80px, calc(74.23076923076923px + 1.6025641025641024vw), 105px);
    }
  }

  .reserve__shops {
    color: var(--color-text);
    text-align: left;
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-top: clamp(42px, calc(23.43179587831207px + 2.060843964671246vw), 63px);

    &::before {
      position: absolute;
      content: "";
      background: var(--color-text);
      width: 1px;
      height: clamp(643px, calc(474.11776251226695px + 18.743866535819432vw), 834px);
      top: 0;
      left: 50%;
    }

    @media (max-width: 900px) {
      display: block;

      &::before {
        width: 100%;
        height: 1px;
        top: 50%;
        left: 0;
      }
    }

    .group {
      width: 47%;

      @media (max-width: 900px) {
        width: min(100%, 285px);
        margin-inline: auto;
        padding-bottom: 50px;

        &:nth-of-type(n + 2) {
          margin-top: 50px;
        }
      }

      .shop {
        white-space: nowrap;
      }

      .add {
        margin-top: 1em;
      }

      .tel {
        text-align: right;
        margin-top: 1em;

        span {
          padding-left: 0.5em;
        }
      }

      .e-mail {
        margin-top: 2em;

        span {
          padding-left: 1em;
        }
      }

      .holiday {
        display: flex;
        margin-top: 2.6em;

        dt {
          margin-right: 1em;
        }

        dd {
          line-height: 2;
          margin-top: -0.5em;
        }
      }

      .link {
        padding-left: 3em;
        position: relative;
        margin-top: 4em;

        &::before {
          position: absolute;
          content: "";
          background: url(../img/line_icon.webp) no-repeat center / contain;
          width: clamp(34px, calc(31.46153846153846px + 0.7051282051282052vw), 45px);
          height: clamp(33px, calc(30.46153846153846px + 0.7051282051282052vw), 44px);
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
      }
    }

  }

  .btn_container {
    font-family: var(--font-marugothic);
    color: var(--color-text);
    margin-top: clamp(25px, calc(-0.38461538461538325px + 7.051282051282051vw), 135px);
    line-height: 1.5;

    .btn {
      margin-top: 53px;

      a {
        display: block;
        width: min(90%, 693px);
        margin-inline: auto;
        padding: 1em;
        font-family: var(--font-marugothic);
        font-size: clamp(18px, calc(16.384615384615383px + 0.4487179487179487vw), 25px);
      }
    }
  }

  .bottom-txt {
    font-family: var(--font-marugothic);
    text-align: center;
    line-height: 1.5;
    margin-bottom: clamp(93px, calc(74.53846153846155px + 5.128205128205128vw), 173px);

    @media (max-width: 767px) {
      margin-top: -70px;
    }
  }

  /* その他のサービス・よくあるご質問ページ用ボタン */
  .btn {
    a {
      display: block;
      text-align: center;
      font-family: var(--font-shippori);
      color: #fff;
      padding: 0.3em;
      background: var(--color-blue02);
      border-radius: 22px;

      @media (max-width: 767px) {
        padding: 0.5em;
      }
    }
  }
}

/*--------------------------------------------
## for English  翻訳
--------------------------------------------*/
.gt_switcher_wrapper {
  bottom: 188px !important;
  right: 0 !important;

  .gt_switcher {
    width: var(--header-width) !important;
  }
}