@charset "UTF-8";
/* ============================

    reset

============================*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated:2010-09-17
Author:Richard Clark - http://richclarkdesign.com 
Twitter:@rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video,
button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  line-height: 1;
}

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

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

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

/* add */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  width: auto;
  border: 0;
  border-style: none;
  vertical-align: bottom;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

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

/*color*/
/* セクションの背景に敷くベージュ（ACCESS など） */
/* セクションの背景に敷くグリーン（LOCATION など） */
/* guideline */
/*font-family*/
/*text-shadow*/
/*box-shadow*/
/*media query break point*/
/*gHeader用*/
/* SP下部の固定ナビ（.sp-nav-bar）の高さ。768px以上では非表示 */
/* 背景固定ブロック（.c-fixbg）の高さ ＝ MVの高さ
   .s-mv / .s-park内 / .s-cg で共通。変えるときは _base.scss の --fixbg-h を修正。
   $extra … その分だけ窓を下に伸ばす（MV→CONCEPTのフェード用）
   $mult  … 画面◯個ぶんの高さにする（次のセクションを重ねたい時に使う） */
/* MV → CONCEPT のフェード帯の高さ
   ・MVの窓（.s-mv）をこの分だけ下に伸ばす
   ・s-concept をこの分だけ上に引き上げて、グラデーションで映像を消す
   ※fl_size() を使うので、関数定義より後で宣言すること */
/* ページタイトル欄（.p-pagettl）の高さ
   ・下に続く画像（.p-pagettl-image）が、画面に貼りつける画像の高さを
     計算するのに使う。高さを変えるときはここだけ直せばよい
   ※fl_size() を使うので、関数定義より後で宣言すること */
/* media query */
/* 背景固定ブロック（.c-fixbg）1つぶんの高さ。
   セクションを重ねるときの計算（s-cg × s-cta など）でも使うのでCSS変数にしている。 */
:root {
  --fixbg-h: calc(100vh - 70px);
  --fixbg-h: calc(100svh - 70px); /* iOS */
}
@media only screen and (min-width: 768px) {
  :root {
    --fixbg-h: 100vh;
  }
}
:root {
  /* ▼ 画面に貼りつけた画像（.c-fixbg__media）の高さと位置 ────────────
     iPhoneはスクロールでアドレスバーが出入りし、そのぶん画面の高さが変わる。
     ・100lvh ＝ バーが隠れた時の（大きい方の）画面高さ ※スクロールしても変わらない
     ・100dvh ＝ 今見えている画面の高さ      ※バーの出入りで変わる

     【現在の設定】画像の高さは 100lvh 基準で固定。スクロール中に画像がリサイズ
     されないので違和感が出ない。そのかわり、アドレスバー表示中は画像の下端が
     少しメニューの下に潜る。

     【メニュー上端にぴったり揃えたい場合】下の2行を差し替える
       --fixbg-media-h  : calc(100dvh - 70px);
       --fixbg-media-gap: 0px;
     ただしバーの出入りのたびに画像の高さが変わり、上下スクロールを繰り返すと
     画像が動いて見える（2026-08-21 実機確認で不採用） */
  /* 画像の高さ。
     --fixbg-media-h-base ＝「画面いっぱいに出すときの高さ」。
     MVだけは top.scss でこの値を“上限”として使い、縦長スマホのときに
     縦横比（375:597）で止めている。 */
  --fixbg-media-h-base: calc(100lvh - 70px);
  --fixbg-media-h: var(--fixbg-media-h-base);
  /* 画像の下端と「今見えている画面の下」とのズレ。
     キャプションやボタンは、このぶん上げて常に見えるようにする */
  --fixbg-media-gap: calc(100lvh - 100dvh);
}
@media only screen and (min-width: 768px) {
  :root {
    --fixbg-media-h-base: 100lvh; /* PCは下部固定メニューが無いので画面いっぱい */
  }
}
:root {
  /* ▲ ──────────────────────────────────── */
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover, a:focus {
  color: inherit;
}

html {
  font-size: 62.5%;
}

body {
  color: #222222;
  background-color: #F5F5F5;
  font-family: "TsukuAOldMinPr6N-M", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
}
@media only screen and (min-width: 768px) {
  body {
    font-size: 1.6rem;
  }
}

button {
  font-family: "TsukuAOldMinPr6N-M", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
}

/* ------------------------------------------------------------
    loading
------------------------------------------------------------ */
#loading,
#loading-middle {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  background-color: #F5F5F5;
  overflow: hidden;
  left: 0;
  top: 0;
  pointer-events: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#loading .loading_logo,
#loading-middle .loading_logo {
  width: 108px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -150%);
          transform: translate(-50%, -150%);
}
@media only screen and (min-width: 768px) {
  #loading .loading_logo,
  #loading-middle .loading_logo {
    width: 140px;
  }
}
#loading #loadingbar,
#loading #loadingbar-middle,
#loading-middle #loadingbar,
#loading-middle #loadingbar-middle {
  width: 100%;
  height: 1px;
}
#loading #loadingbar svg,
#loading #loadingbar-middle svg,
#loading-middle #loadingbar svg,
#loading-middle #loadingbar-middle svg {
  vertical-align: top;
}

@-webkit-keyframes anime_scroll {
  0% {
    height: 0;
    top: 0;
  }
  40% {
    height: 100%;
    top: 0;
  }
  80% {
    height: 0;
    top: 100%;
  }
}

@keyframes anime_scroll {
  0% {
    height: 0;
    top: 0;
  }
  40% {
    height: 100%;
    top: 0;
  }
  80% {
    height: 0;
    top: 100%;
  }
}
/* ------------------------------------------------------------
    display
------------------------------------------------------------ */
.c-show--pc {
  display: none;
}
@media only screen and (min-width: 1200px) {
  .c-show--pc {
    display: block;
  }
}

.c-show--tab {
  display: none;
}
@media only screen and (min-width: 768px) {
  .c-show--tab {
    display: block;
  }
}

@media only screen and (min-width: 768px) {
  .c-show--sp {
    display: none;
  }
}

.c-show--semiwide {
  display: none;
}
@media only screen and (min-width: 1000px) {
  .c-show--semiwide {
    display: block;
  }
}

/* 改行の出し分け（<br> 専用）
   ※ 上の .c-show--◯◯ は display:block を使うので <br> には向かない。
     <br> の出し分けはこちらを使うこと。 */
@media only screen and (min-width: 768px) {
  .c-br--sp {
    display: none;
  }
}

.c-br--pc {
  display: none;
}
@media only screen and (min-width: 768px) {
  .c-br--pc {
    display: inline;
  }
}

/* ------------------------------------------------------------
    txt
------------------------------------------------------------ */
.c-txt--notes {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: #666666;
}
@media only screen and (min-width: 768px) {
  .c-txt--notes {
    font-size: 1.1rem;
  }
}

.c-txt--sup {
  vertical-align: text-top;
}

/* 本文（リード文）。見出しの下に置く説明文。
   デザイン実寸：18px・行間1.8・字間0.08em・最大幅768px
   ・左右の余白は親（.c-block--90 など）に任せる
   ・PCは中央寄せ。SPは中央寄せにすると行頭がそろわず読みにくいので左寄せにしている。
     SPでも中央にしたいときは、使う側で text-align: center を足す。 */
.c-txt--lead {
  width: 100%;
  max-width: 768px;
  margin-inline: auto;
  font-size: clamp(1.4rem, 1.2514285714rem + 0.380952381vw, 1.8rem);
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-align: center;
}
/* 装飾の縦線（見出しの下などに置く1pxのライン）
   ※.js-scrollani .js-scrollani-extend を一緒に付けると上から下へ伸びる */
.c-line--v {
  display: block;
  width: 1px;
  height: clamp(60px, 37.7142857143px + 5.7142857143vw, 120px);
  background-color: #B59A5B;
}

/* 画面全体を背景色で覆う「幕」。セクションの切り替え演出に使う。
   ふだんは透明（opacity:0）で、JSから opacity を動かして出し入れする。
   ※JSが動かない環境では最初から見えないので、表示を邪魔しない */
.c-veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: #F5F5F5;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------
    c-fixbg ／ 背景固定ブロック
------------------------------------------------------------
  背景（画像・動画）を画面に貼りつけたまま、ブロックが「窓」のように
  通り過ぎていく見せ方。スクロールに合わせた“ズレ”動きはしない。

  ・background-attachment: fixed は iOS で効かないため、
    「画像を position: fixed で画面に貼りつけ、窓側を clip-path で切り抜く」
    という組み合わせで再現している（g_nijo と同じ方式・iPhone実機確認済み）。
  ・【注意】.c-fixbg の親要素に transform / filter / will-change を付けると
    固定表示が崩れます（GSAPのアニメを親に当てるときは要注意）。
    .c-fixbg 自身にも付けないこと（中の position:fixed が効かなくなる）。

  ・キャプションも __media の中に入れること。外に置くと画像だけが画面に貼りつき、
    文字だけスクロールしていくのでズレて見えます。

  使い方：
  <div class="c-fixbg">
    <div class="c-fixbg__media">
      <img src="..." alt="">
      <p class="c-cap--w-sh">キャプション</p>
    </div>
  </div>
------------------------------------------------------------ */
.c-fixbg {
  position: relative;
  width: 100%;
  height: calc(var(--fixbg-h) * 1 + 0px);
  /* 窓の形に切り抜く。中の画像は position: fixed で画面に貼りつく。
     ※iOS Safariで滑らかに動く組み合わせ。overflow:clip＋sticky だと
       慣性スクロール中に切り抜き位置の更新が追いつかずカクつく。 */
  clip-path: inset(0); /* 未対応ブラウザ向けの一般形 */
  clip-path: border-box; /* Safariが単純な矩形クリップとして高速処理できる指定 */
  background-color: #F5F5F5;
}
.c-fixbg__media {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* SPは画面下部の固定メニュー（.sp-nav-bar）に下端が隠れないよう、
     メニューの高さぶん縮めている。数値の中身と切り替え方は _base.scss を参照 */
  height: var(--fixbg-media-h);
  pointer-events: none; /* 窓の外のクリックを邪魔しない */
  /* 中の画像をGSAP等で拡大した時に、この枠からはみ出して見えないようにする。
     ※この要素は画面に固定されていて動かないので、切り抜き位置の再計算が起きず
       iOSでもカクつかない（3-4の「✕」パターンとは別物） */
  overflow: hidden;
  /* PC/SP出し分けで <picture> を使う場合の受け皿 */
}
.c-fixbg__media > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.c-fixbg__media {
  /* 直下の画像・動画だけを対象にする（中に置いたボタン類のimgに効かせない）。
     display は指定しない（.s-mv のSP/PC出し分けを上書きしないため） */
}
.c-fixbg__media > img,
.c-fixbg__media > video,
.c-fixbg__media > picture > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  vertical-align: bottom;
}
.c-fixbg__media {
  /* キャプション
     ・画像の高さは固定（アドレスバー表示中は下端がメニューの下に潜る）ので、
       文字は --fixbg-media-gap のぶん上げて、常に見える位置に置く
     ・SPは右下のまま。PCは画面右下の追従ボタン（.fix-cv-btn）と近すぎて
       窮屈になるので、左下に置く（s-usp のキャプションと同じ考え方） */
}
.c-fixbg__media > .c-cap,
.c-fixbg__media > .c-cap--w,
.c-fixbg__media > .c-cap--w-sh {
  bottom: calc(var(--fixbg-media-gap) + 8px);
}
@media only screen and (min-width: 768px) {
  .c-fixbg__media > .c-cap,
  .c-fixbg__media > .c-cap--w,
  .c-fixbg__media > .c-cap--w-sh {
    text-align: left;
  }
}
.c-fixbg__media {
  /* SPは高さを縮めたぶん、写真の「上側」を切り取って下端を必ず見せる。
     （指定しないと cover が上下を均等に切り取り、見せたい下端が切れる）
     動画は上下中央のまま＝構図を変えたくないので対象に入れていない */
}
.c-fixbg__media > img,
.c-fixbg__media > picture > img {
  -o-object-position: center bottom;
     object-position: center bottom;
}
@media only screen and (min-width: 768px) {
  .c-fixbg__media > img,
  .c-fixbg__media > picture > img {
    -o-object-position: center;
       object-position: center;
  }
}

/* ------------------------------------------------------------
    c-fixbg--band ／ 背景固定ブロック（高さ低めの帯タイプ）
------------------------------------------------------------
  セクションの途中に置く、高さが1画面ぶんない固定表示の画像エリア。
  .c-fixbg と同じしくみ（画像を画面に貼りつけ、枠を窓として通り過ぎさせる）で、
  窓の高さだけを低くしたもの。ページ冒頭用の .p-pagettl-image とは別物。

  ・窓の高さ：SP デザイン実寸768px幅での400px（＝画面幅の52%。390px幅で約203px）
            PC 480px
    高さを変えたいページでは --fixbg-band-h を上書きする
  ・画像は上下左右とも中央に合わせる（＝どこを見せるか迷わない既定値）。
    個別に上や下を見せたい時は、使う側で object-position を上書きする。
  ・キャプションは .c-fixbg とちがって「窓の直下」に置くこと。
    __media の中に入れると画面下端に貼りついて、窓から見えなくなる。

  使い方：
  <div class="c-fixbg c-fixbg--band">
    <div class="c-fixbg__media">
      <picture class="js-img-switch">
        <source data-media="tabpc" srcset="○○--pc.webp">
        <img src="○○--sp.webp" alt="">
      </picture>
    </div>
    <p class="c-cap--w-sh">image</p>
  </div>
------------------------------------------------------------ */
.c-fixbg--band {
  /* 窓の高さ。ページ側で上書きできるようCSS変数にしている */
  --fixbg-band-h: 52.0833vw; /* SP：デザイン実寸 768 × 400 */
  height: var(--fixbg-band-h);
}
@media only screen and (min-width: 768px) {
  .c-fixbg--band {
    --fixbg-band-h: 480px;
  }
}
.c-fixbg--band {
  /* 画像の見せる位置は中央（.c-fixbg のSP下揃えを打ち消す） */
}
.c-fixbg--band .c-fixbg__media > img,
.c-fixbg--band .c-fixbg__media > picture > img {
  -o-object-position: center;
     object-position: center;
}

.c-cap--image {
  position: relative;
}

.c-cap, .c-cap--w-sh, .c-cap--w {
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: calc(100% - 8px);
  text-align: right;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: #666666;
}
@media only screen and (min-width: 768px) {
  .c-cap, .c-cap--w-sh, .c-cap--w {
    font-size: 1.1rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-cap, .c-cap--w-sh, .c-cap--w {
    left: 8px;
    bottom: 8px;
    width: calc(100% - 16px);
  }
}
.c-cap--w {
  color: #fff;
}
.c-cap--w-sh {
  color: #fff;
  text-shadow: 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 5px #000, 0px 0px 10px #000;
}

.c-cap--blw {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: #666666;
}
@media only screen and (min-width: 768px) {
  .c-cap--blw {
    font-size: 1.1rem;
  }
}
.c-cap--blw {
  text-align: right;
  padding: 5px 0 0;
}

.c-cap--out {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: #666666;
}
@media only screen and (min-width: 768px) {
  .c-cap--out {
    font-size: 1.1rem;
  }
}
.c-cap--out {
  padding-top: 8px;
}

.c-txt--mtmr {
  display: inline-block;
}

.c-txt--en--eq {
  font-family: "EB Garamond", serif;
  font-size: 125%;
  line-height: 1;
}

.c-txt--tate {
  -webkit-writing-mode: vertical-rl;
          writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  white-space: nowrap;
  letter-spacing: 0.2em;
  /* -webkit-text-orientation: upright;
  text-orientation: upright; */
  -ms-text-combine-horizontal: all; /* for IE Edge */
  line-height: 2.5;
}
.c-txt--tate .yoko {
  display: inline-block;
  -webkit-writing-mode: lr-tb;
          writing-mode: lr-tb;
  -ms-writing-mode: lr-tb;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.c-txt--tate .yoko.first {
  line-height: 1;
}

/* ------------------------------------------------------------
    block
------------------------------------------------------------ */
.c-block--90 {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.c-block--85 {
  width: 85%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.c-block--90--m {
  width: 90%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.c-block--90--s {
  width: 90%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------
    heading
------------------------------------------------------------ */
/* 行間1.5・字間0.08em はこの案件のデザイン基準（Figmaの見出し実測値） */
.c-heading--l {
  font-size: clamp(2.2rem, 1.68rem + 1.3333333333vw, 3.6rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: normal;
  text-align: center;
  margin-bottom: clamp(32px, 20.1142857143px + 3.0476190476vw, 64px);
}

.c-heading--m {
  font-size: clamp(2rem, 1.5542857143rem + 1.1428571429vw, 3.2rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: normal;
  text-align: center;
  margin-bottom: clamp(24px, 18.0571428571px + 1.5238095238vw, 40px);
}

.c-heading--s {
  font-size: clamp(1.7rem, 1.44rem + 0.6666666667vw, 2.4rem);
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: normal;
  text-align: center;
  margin-bottom: clamp(16px, 14.5142857143px + 0.380952381vw, 20px);
}

/* セクションの英字見出し（薄いゴールドの大きな文字・左寄せ）
   デザイン実寸：PC 56px・字間0.08em・色 #A48B52 の48%
   ・左右の余白はこの部品で持つ（画面端から少し内側に置く）
   ・色は opacity ではなく rgba で薄くしている（中の文字だけを薄くするため）
   ・表示アニメ（1文字ずつ出る）は common.js が自動で付けるので、
     HTML側に .js-scrollani などを足す必要はない。
     動きの速さを変えるときは common.js の「英字見出し（.c-heading--en）」の
     ▼調整用の設定 を修正する。 */
.c-heading--en {
  font-size: clamp(3.2rem, 2.3085714286rem + 2.2857142857vw, 5.6rem);
  font-family: "TsukuAOldMinPr6N-L", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(164, 139, 82, 0.48);
  padding-inline: clamp(20px, 9.6px + 2.6666666667vw, 48px);
  /* JSが1文字ずつに分け終わるまでのチラつきを防ぐため、最初は透明にしておく
     （分け終わった直後にJSが opacity: 1 に戻す） */
  opacity: 0;
  /* 1文字ずつ動かすための単位。JSが自動で付ける */
}
.c-heading--en__char {
  display: inline-block;
}
.c-heading--en {
  /* 単語のまとまり。JSが自動で付ける。
     1文字ずつに分けると単語の途中でも改行できてしまうため、
     単語ごとに inline-block でくるんで、改行は単語の間だけにしている */
}
.c-heading--en__word {
  display: inline-block;
}

/* .c-heading--en の中央寄せ・グレー版（セクションの中で使うとき用）
   ※HTMLには .c-heading--en と一緒に付ける
     例）<p class="c-heading--en c-heading--en--c">TRAIN ACCESS</p>
     （1文字ずつ出す common.js が .c-heading--en を探すため） */
.c-heading--en--c {
  font-size: clamp(2.8rem, 2.0571428571rem + 1.9047619048vw, 4.8rem);
  text-align: center;
  color: rgba(102, 102, 102, 0.48);
  padding-inline: 0;
}

/* ------------------------------------------------------------
    セクション見出し（CROSS VISION ＋ 斜め線 ＋ 日本語見出し）
------------------------------------------------------------
    <div class="c-seclead">
      <div class="c-seclead__in">
        <p class="c-seclead__catch"><img src="…/txt-catch.svg" alt="CROSS VISION" width="640" height="64"></p>
        <span class="c-seclead__cross" aria-hidden="true"></span>
        <p class="c-seclead__ttl">御堂筋線直通</p>
      </div>
    </div>

    ・中の配置はすべて日本語見出しの文字サイズ（__in の font-size）を
      基準にした em で指定しているので、画面幅が変わっても崩れない
    ・斜めの×印はCSSで引いた線（画像を用意しなくてよい）
------------------------------------------------------------ */
.c-seclead {
  padding-inline: clamp(20px, 9.6px + 2.6666666667vw, 48px);
}
.c-seclead__in {
  /* ここで決めた文字サイズが、中の余白すべての基準になる */
  font-size: clamp(2.8rem, 2.0571428571rem + 1.9047619048vw, 4.8rem);
  position: relative;
  display: inline-block;
}
.c-seclead {
  /* CROSS VISION のロゴ画像 */
}
.c-seclead__catch {
  width: 4.5em;
}
.c-seclead__catch img {
  display: block;
  width: 100%;
  height: auto;
}
.c-seclead {
  /* 日本語の見出し */
}
.c-seclead__ttl {
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #A48B52;
  margin-top: 0.56em;
  margin-left: 3.96em;
}
.c-seclead {
  /* 斜めの×印。正方形の対角線を2本引いている
     （対角線の長さ ＝ 一辺の約1.414倍なので width: 141.5%） */
}
.c-seclead__cross {
  position: absolute;
  left: 2.88em;
  top: 0;
  width: 2em;
  height: 2em;
  pointer-events: none;
}
.c-seclead__cross::before, .c-seclead__cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 141.5%;
  height: 1px;
  background-color: #B59A5B;
  opacity: 0.32;
}
.c-seclead__cross::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.c-seclead__cross::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

/* ------------------------------------------------------------
    写真リスト（写真＋キャプションを並べる）
------------------------------------------------------------
    PC（768px〜）：--photolist-col の列数（既定4列）
    SP（〜767px）：1枚目だけ横いっぱい、2枚目以降が2列
                  ※スマホでカルーセルにする場合は下の --carousel を併用

    <ul class="c-photolist">
      <li class="c-photolist__item">
        <picture class="c-photolist__media"><img src="…" alt="…"></picture>
        <p class="c-photolist__cap">ライフ 桃山台店<span class="c-photolist__cap--s">（徒歩9分・約680m）</span></p>
      </li>
      …
    </ul>

    ・PCの列数を変えたいときは、使う側で --photolist-col を上書きする
    ・キャプション全体を小さい文字にしたいときは __cap に __cap--s を重ねる
    ・写真の比率は 1120:720。別の比率にしたいときは --photolist-ratio で上書きできる
------------------------------------------------------------ */
.c-photolist {
  --photolist-col: 4; /* PCの列数 */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr clamp(12px, 4.5714285714px + 1.9047619048vw, 32px) 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 7.0857142857px + 2.2857142857vw, 40px) clamp(12px, 4.5714285714px + 1.9047619048vw, 32px);
  /* SPだけ1枚目を横いっぱいに */
}
.c-photolist > *:first-child {
  grid-column: 1/-1;
}
@media only screen and (min-width: 768px) {
  .c-photolist {
    -ms-grid-columns: (1fr)[var(--photolist-col)];
    grid-template-columns: repeat(var(--photolist-col), 1fr);
  }
  .c-photolist > *:first-child {
    grid-column: auto;
  }
}
.c-photolist__item {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(6px, 5.2571428571px + 0.1904761905vw, 8px);
}
.c-photolist__media {
  display: block;
}
.c-photolist__media img {
  display: block;
  width: 100%;
  height: auto;
  /* 読み込み前から高さを確保する（表示のガタつき対策） */
  aspect-ratio: var(--photolist-ratio, 1120/720);
  -o-object-fit: cover;
     object-fit: cover;
}
.c-photolist__cap {
  font-size: clamp(1.3rem, 1.1885714286rem + 0.2857142857vw, 1.6rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.c-photolist {
  /* 小さいほうの文字。使いどころは2つ。
       ① 施設名のうしろに続く（徒歩9分・約680m）→ __cap の中に <span> で入れる
       ② キャプション全体が小さい文字のとき → __cap に __cap--s を重ねる
     inline-block にして、折り返すときは（　）の途中ではなく手前で改行させる。 */
}
.c-photolist__cap--s {
  display: inline-block;
  font-size: clamp(1.1rem, 1.0257142857rem + 0.1904761905vw, 1.3rem);
  color: #666;
}

/* ------------------------------------------------------------
    写真リスト：スマホでカルーセルになる版
------------------------------------------------------------
    PC（768px〜）：.c-photolist と同じ列数で並ぶ
    SP（〜767px）：slickのカルーセル。1枚ずつ送り、右に次の写真が少し見える

    <ul class="c-photolist c-photolist--carousel js-photolist-carousel">
      <li class="c-photolist__item"> … </li>
    </ul>

    ・動かしているのは common.js の photolistCarousel()
    ・ドット（現在位置の点）の入れ物は common.js が自動で作るので、HTMLには不要
    ・ループしない設定。最後まで送ったら止まる
    ・1枚の幅は --photolist-slide で変えられる
------------------------------------------------------------ */
.c-photolist--carousel {
  /* 1枚の幅。デザイン実寸373px。画面が狭いときは76vwまで縮める。
     狭い場所に置くときは、使う側で --photolist-slide を小さく上書きする。 */
  --photolist-slide: min(373px, 76vw);
  /* slickが動いていないあいだ（PC・JS未実行）は .c-photolist のまま並ぶ */
}
.c-photolist--carousel.slick-initialized {
  display: block;
}
.c-photolist--carousel .slick-slide {
  width: var(--photolist-slide);
  margin-right: clamp(12px, 10.5142857143px + 0.380952381vw, 16px);
  /* 高さの違うキャプションで写真の上端がずれないように */
  height: auto;
}
.c-photolist--carousel {
  /* slickは中身を div で包む。その中の item を伸ばして高さをそろえる */
}
.c-photolist--carousel .slick-slide > div,
.c-photolist--carousel .slick-slide > div > .c-photolist__item {
  height: 100%;
}

/* 現在位置のドット */
.c-photolist__dots {
  margin-top: clamp(16px, 13.0285714286px + 0.7619047619vw, 24px);
}
.c-photolist__dots .slick-dots {
  /* slick標準は position:absolute ＋ width:100% で、
     基準になる親が無いと画面幅いっぱいに広がって横スクロールの原因になる。
     ここでは通常の要素として置き直す。 */
  position: static;
  bottom: auto;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  /* 大きさは _plugin.scss の slick標準（14×14）のまま。
     その中に8pxの丸を置くので、上下左右3pxずらして中央に合わせる */
}
.c-photolist__dots .slick-dots li {
  display: block;
  line-height: 0;
}
.c-photolist__dots .slick-dots button {
  display: block;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* 色はカテゴリの色（--cat-color）を引き継ぐ。無い場合はサイトの基本色 */
  background-color: var(--cat-color, #A48B52);
  opacity: 0.32;
  /* 数字が入っているので隠す（読み上げには残す） */
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.c-photolist__dots .slick-dots button::before {
  content: none;
}
.c-photolist__dots .slick-dots .slick-active button {
  opacity: 1;
}

/* ------------------------------------------------------------
    btn
------------------------------------------------------------ */
/* マウスオーバー */
@media only screen and (min-width: 1200px) {
  .c-link--hover {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }
  .c-link--hover:hover, .c-link--hover:focus-visible {
    opacity: 0.8;
  }
}

@media only screen and (min-width: 1200px) {
  .c-link--hover--sh {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }
  .c-link--hover--sh:hover, .c-link--hover--sh:focus-visible {
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  }
}

/* btn box
------------------------ */
/* アクション（例：エントリー） */
.c-btn--primary--action {
  padding: clamp(12px, 10.5142857143px + 0.380952381vw, 16px);
  background: #A48B52;
  border-radius: 100vh;
  width: 100%;
  margin-inline: auto;
  text-align: center;
}
.c-btn--primary--action .c-btn__label {
  font-size: clamp(1.8rem, 1.5771428571rem + 0.5714285714vw, 2.4rem);
  line-height: 1.2;
  color: #fff;
}

/* btn arrow
------------------------ */
.c-btn--arr--ghost, .c-btn--arr--more, .c-btn--arr--clr, .c-btn--arr--ghost--w {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(12px, 10.5142857143px + 0.380952381vw, 16px);
  padding-block: clamp(12px, 10.5142857143px + 0.380952381vw, 16px);
}
.c-btn--arr--ghost .c-btn__icn, .c-btn--arr--more .c-btn__icn, .c-btn--arr--clr .c-btn__icn, .c-btn--arr--ghost--w .c-btn__icn {
  display: inline-block;
  width: clamp(28px, 20.5714285714px + 1.9047619048vw, 48px);
  height: clamp(28px, 20.5714285714px + 1.9047619048vw, 48px);
  border-radius: 50%;
  border: solid 1px #222222;
  position: relative;
}
.c-btn--arr--ghost .c-btn__icn::after, .c-btn--arr--more .c-btn__icn::after, .c-btn--arr--clr .c-btn__icn::after, .c-btn--arr--ghost--w .c-btn__icn::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #222222;
  -webkit-mask: url(../img/common/i-arr-strong.svg) no-repeat 50% 50%;
          mask: url(../img/common/i-arr-strong.svg) no-repeat 50% 50%;
  -webkit-mask-size: clamp(10px, 8.5142857143px + 0.380952381vw, 14px);
          mask-size: clamp(10px, 8.5142857143px + 0.380952381vw, 14px);
}
.c-btn--arr--ghost .c-btn__label, .c-btn--arr--more .c-btn__label, .c-btn--arr--clr .c-btn__label, .c-btn--arr--ghost--w .c-btn__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: clamp(1.5rem, 1.3885714286rem + 0.2857142857vw, 1.8rem);
}
@media only screen and (min-width: 1200px) {
  .c-btn--arr--ghost .c-btn__icn, .c-btn--arr--more .c-btn__icn, .c-btn--arr--clr .c-btn__icn, .c-btn--arr--ghost--w .c-btn__icn {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }
  .c-btn--arr--ghost .c-btn__icn::after, .c-btn--arr--more .c-btn__icn::after, .c-btn--arr--clr .c-btn__icn::after, .c-btn--arr--ghost--w .c-btn__icn::after {
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
  }
  .c-btn--arr--ghost:hover .c-btn__icn, .c-btn--arr--more:hover .c-btn__icn, .c-btn--arr--clr:hover .c-btn__icn, .c-btn--arr--ghost--w:hover .c-btn__icn {
    background-color: #222222;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  .c-btn--arr--ghost:hover .c-btn__icn::after, .c-btn--arr--more:hover .c-btn__icn::after, .c-btn--arr--clr:hover .c-btn__icn::after, .c-btn--arr--ghost--w:hover .c-btn__icn::after {
    background-color: #fff;
  }
}

/* 濃い背景の上で使う白版（丸も大きめ）
   ※矢印SVG（i-arr-strong.svg）は mask で抜いて色を付けているので、
     background-color を変えるだけで好きな色にできる */
.c-btn--arr--ghost--w {
  gap: clamp(16px, 10.0571428571px + 1.5238095238vw, 32px);
  padding-block: 0;
}
.c-btn--arr--ghost--w .c-btn__icn {
  width: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  height: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  border-color: #fff;
}
.c-btn--arr--ghost--w .c-btn__icn::after {
  background-color: #fff;
  -webkit-mask-size: clamp(14px, 11.4px + 0.6666666667vw, 21px);
          mask-size: clamp(14px, 11.4px + 0.6666666667vw, 21px);
}
.c-btn--arr--ghost--w .c-btn__label {
  font-size: clamp(1.8rem, 1.5771428571rem + 0.5714285714vw, 2.4rem);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #fff;
}
@media only screen and (min-width: 1200px) {
  .c-btn--arr--ghost--w:hover .c-btn__icn {
    background-color: #fff;
  }
  .c-btn--arr--ghost--w:hover .c-btn__icn::after {
    background-color: #444444;
  }
}

.c-btn--arr--clr {
  gap: clamp(16px, 10.0571428571px + 1.5238095238vw, 32px);
  padding-block: 0;
}
.c-btn--arr--clr .c-btn__icn {
  width: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  height: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  border-color: #A48B52;
  background-color: #A48B52;
}
.c-btn--arr--clr .c-btn__icn::after {
  background-color: #fff;
  -webkit-mask-size: clamp(14px, 11.4px + 0.6666666667vw, 21px);
          mask-size: clamp(14px, 11.4px + 0.6666666667vw, 21px);
}
.c-btn--arr--clr .c-btn__label {
  font-size: clamp(1.8rem, 1.5771428571rem + 0.5714285714vw, 2.4rem);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #A48B52;
}
@media only screen and (min-width: 1200px) {
  .c-btn--arr--clr:hover .c-btn__icn {
    background-color: transparent;
  }
  .c-btn--arr--clr:hover .c-btn__icn::after {
    background-color: #A48B52;
  }
}

/* 下層ページへの誘導リンク（和文＋VIEW MORE の2行ラベル＋濃い丸ボタン）
   ※丸の中は最初から塗りつぶし。マウスを乗せると白抜きに反転する
   <a href="…" class="c-btn--arr--more">
     <span class="c-btn__label">
       <span class="c-btn__label-jp">交通アクセス</span>
       <span class="c-btn__label-en">VIEW MORE</span>
     </span>
     <span class="c-btn__icn" aria-hidden="true"></span>
   </a> */
.c-btn--arr--more {
  gap: clamp(16px, 10.0571428571px + 1.5238095238vw, 32px);
  padding-block: 0;
}
.c-btn--arr--more .c-btn__label {
  /* 基本形の flex:1 を打ち消す（文字幅ぶんだけの箱にして右に寄せられるように） */
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  line-height: 1.4;
  text-align: left;
}
.c-btn--arr--more .c-btn__label-jp {
  font-size: clamp(1.2rem, 1.1257142857rem + 0.1904761905vw, 1.4rem);
  letter-spacing: 0.08em;
  color: #666;
}
.c-btn--arr--more .c-btn__label-en {
  font-size: clamp(1.5rem, 1.3885714286rem + 0.2857142857vw, 1.8rem);
  letter-spacing: 0.08em;
  color: #222222;
}
.c-btn--arr--more .c-btn__icn {
  width: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  height: clamp(48px, 36.1142857143px + 3.0476190476vw, 80px);
  background-color: #222222;
}
.c-btn--arr--more .c-btn__icn::after {
  background-color: #fff;
  -webkit-mask-size: clamp(14px, 11.4px + 0.6666666667vw, 21px);
          mask-size: clamp(14px, 11.4px + 0.6666666667vw, 21px);
}
@media only screen and (min-width: 1200px) {
  .c-btn--arr--more:hover .c-btn__icn {
    background-color: transparent;
  }
  .c-btn--arr--more:hover .c-btn__icn::after {
    background-color: #222222;
  }
}

/* UA_PCのみ */
body:not(.ua_sp) .c-link--tel {
  cursor: default;
  pointer-events: none;
}

/* ------------------------------------------------------------
    wappen icon
------------------------------------------------------------ */
.c-icn--new {
  position: absolute;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background-color: #93284c;
  color: #fff;
  font-family: "EB Garamond", serif;
  font-size: 1.3rem;
  letter-spacing: 0.08rem;
  line-height: 1;
  padding: 3px 8px;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .c-icn--new {
    font-size: 1.6rem;
    padding: 5px 12px;
  }
}

/* ------------------------------------------------------------
    accordion
------------------------------------------------------------ */
.js-toggle-cont {
  display: none;
}

.c-acc__link {
  color: #A48B52;
  font-size: 115%;
  line-height: 1.4;
  display: block;
  padding: 12px 0;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-bottom: 1px solid #A48B52;
}
.c-acc__link:hover, .c-acc__link:focus {
  color: #A48B52;
}
@media only screen and (min-width: 768px) {
  .c-acc__link {
    padding: 20px 0;
    font-size: 120%;
  }
}
.c-acc__link__icn {
  position: absolute;
  width: 23px;
  height: 23px;
  right: 15px;
  top: calc(50% - 11px);
  border: 1px solid #A48B52;
  border-radius: 50%;
  padding: 6px;
}
.c-acc__link__icn__in {
  position: relative;
  width: 100%;
  height: 100%;
}
.c-acc__link__icn__in::before, .c-acc__link__icn__in::after {
  content: "";
  display: block;
  background-color: #A48B52;
  position: absolute;
}
.c-acc__link__icn__in::before {
  width: 100%;
  height: 1px;
  left: 0;
  top: 4px;
}
.c-acc__link__icn__in::after {
  width: 1px;
  height: 100%;
  left: 4px;
  top: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.c-acc__link.js-toggle-open .c-acc__link__icn__in::after {
  opacity: 0;
}
@media only screen and (min-width: 1200px) {
  .c-acc__link__icn {
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
  }
  .c-acc__link:hover .c-acc__link__icn {
    -webkit-transform: rotate(180deg) scale(1.15);
            transform: rotate(180deg) scale(1.15);
    background-color: #a48b52;
    -webkit-box-shadow: 0 0 10px rgba(34, 34, 34, 0.2);
            box-shadow: 0 0 10px rgba(34, 34, 34, 0.2);
  }
  .c-acc__link:hover .c-acc__link__icn__in::before, .c-acc__link:hover .c-acc__link__icn__in::after {
    background-color: #fff;
  }
}

.c-acc__cont {
  padding-top: 10px;
}

/* ------------------------------------------------------------
    modal
------------------------------------------------------------ */
.c-modal__cont {
  display: none;
}

/* ------------------------------------------------------------
    tab
------------------------------------------------------------ */
.c-tab__btn__in {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 4px 1fr 4px 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  gap: 4px;
}
.c-tab__btn__item {
  width: 100%;
  height: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "EB Garamond", serif;
  font-size: 1.4rem;
  line-height: 1;
  color: #fff;
  background-color: rgba(164, 139, 82, 0.5);
}
.c-tab__btn__item.is-active {
  background-color: #A48B52;
}
.c-tab__btn__item:not(.is-active) {
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .c-tab__btn__in {
    gap: 8px;
  }
  .c-tab__btn__item {
    height: 48px;
    font-size: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .c-tab__btn__item:not(.is-active) {
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
  }
  .c-tab__btn__item:not(.is-active):hover {
    background-color: #A48B52;
    color: #fff;
  }
}
.c-tab__cont {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
.c-tab__cont__item {
  display: none;
}
.c-tab__cont__item.is-active {
  display: block;
}

/* ------------------------------------------------------------
    anav
------------------------------------------------------------ */
.c-anav__in {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2px 1fr 2px 1fr;
  grid-template-columns: repeat(3, 1fr);
  width: 98%;
  max-width: 932px;
  margin: 0 auto;
  gap: 2px;
}
.c-anav__item {
  width: 100%;
  height: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "EB Garamond", serif;
  font-size: 1rem;
  letter-spacing: 0.03em;
  line-height: 1;
  background-color: #A48B52;
  text-align: center;
  padding: 5px;
  border-radius: 100vh;
}
@media only screen and (min-width: 768px) {
  .c-anav__in {
    gap: 6px;
    width: 90%;
  }
  .c-anav__item {
    font-size: 1.1rem;
  }
}
@media only screen and (min-width: 1000px) {
  .c-anav__in {
    -ms-grid-columns: (1fr)[5];
    grid-template-columns: repeat(5, 1fr);
  }
  .c-anav__item {
    height: 38px;
    font-size: 1.4rem;
  }
}

/* ------------------------------------------------------------
    GUIDELINE
    ※ ヘッダー専用のガイドラインパーツ
      （.c-menu-btn / .c-sp-cta-btn / .c-page-menu-btn / .c-badge--new）は
      _header.scss の冒頭に移動しました。
      ヘッダー以外でも使うようになったら、このファイルに戻してください。
------------------------------------------------------------ */
/* ヒントアイコン ※MAPページ（map/index.php）で使用 */
.c-icn--hint {
  position: relative;
}
.c-icn--hint__icn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media only screen and (min-width: 640px) {
  .c-icn--hint__icn {
    display: none;
  }
}

/* ------------------------------------------------------------
    ANIMATION
------------------------------------------------------------ */
/* ▼アニメーションの長さ。短くするほど「速くスクロールしても見終わる」
     （0.8秒＝1秒あたり約950pxのスクロール速度まで最後まで見える） */
:root {
  --sa-dur: .8s;
}

.js-scrollani-fadein {
  opacity: 0;
  -webkit-transition: all var(--sa-dur) ease var(--sa-delay, 0s);
  transition: all var(--sa-dur) ease var(--sa-delay, 0s);
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
}
.js-scrollani-fadein.is-show {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.js-scrollani-extend {
  -webkit-transition: all var(--sa-dur) ease var(--sa-delay, 0s);
  transition: all var(--sa-dur) ease var(--sa-delay, 0s);
  -webkit-transform: scaleY(0) translateY(10px);
          transform: scaleY(0) translateY(10px);
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
}
.js-scrollani-extend.is-show {
  opacity: 1;
  -webkit-transform: scaleY(1) translateY(0);
          transform: scaleY(1) translateY(0);
}

/* 写真などのマスク表示：クリップで幅0→100%（左→右へワイプ） */
.js-scrollani-mask {
  clip-path: inset(0 100% 0 0); /* 右側を100%クリップ＝幅0 */
  -webkit-transition: clip-path var(--sa-dur) ease var(--sa-delay, 0s);
  transition: clip-path var(--sa-dur) ease var(--sa-delay, 0s);
  will-change: clip-path;
}
.js-scrollani-mask.is-show {
  clip-path: inset(0 0 0 0); /* 幅100% */
}

/* ------------------------------------------------------------
    表示アニメの「時差（stagger）」のしくみ
    ・各 .js-scrollani-* は transition-delay を CSS変数 --sa-delay で受ける（既定0s）。
    ・グループに .js-sa-stagger を付けると、子の .js-scrollani が順に遅れて表示される。
    ・個別に付けたいときは要素へ .u-sa-delay-1〜5 を付与。
    ※ 新しいアニメを作るときも transition に var(--sa-delay, 0s) を入れれば時差対応になる。
------------------------------------------------------------ */
.js-sa-stagger > .js-scrollani:nth-child(2) {
  --sa-delay: 0.1s;
}
.js-sa-stagger > .js-scrollani:nth-child(3) {
  --sa-delay: 0.2s;
}
.js-sa-stagger > .js-scrollani:nth-child(4) {
  --sa-delay: 0.3s;
}
.js-sa-stagger > .js-scrollani:nth-child(5) {
  --sa-delay: 0.4s;
}
.js-sa-stagger > .js-scrollani:nth-child(6) {
  --sa-delay: 0.5s;
}

.u-sa-delay-1 {
  --sa-delay: 0.1s;
}

.u-sa-delay-2 {
  --sa-delay: 0.2s;
}

.u-sa-delay-3 {
  --sa-delay: 0.3s;
}

.u-sa-delay-4 {
  --sa-delay: 0.4s;
}

.u-sa-delay-5 {
  --sa-delay: 0.5s;
}

/* ------------------------------------------------------------
    まとめて表示（親ひとつの合図で、中の要素が順番に出る）
------------------------------------------------------------
  ・.js-sa-stagger … 子それぞれが画面に入ったときに動く（子に .js-scrollani が必要）
  ・.js-sa-group   … 親が画面に入ったら、中の要素が順番に動く（合図は親だけ）
    → 離れた場所にある要素どうしを同じタイミングで出したいときに使う

  使い方：
  <div class="js-scrollani js-sa-group">      ← 合図はここだけ
    <div class="js-sa-group__item">…</div>
    <div class="js-sa-group__item u-sa-delay-1">…</div>   ← 0.1秒遅れ
    <div class="js-sa-group__item u-sa-delay-2">…</div>   ← 0.2秒遅れ
  </div>
------------------------------------------------------------ */
.js-sa-group__item {
  opacity: 0;
  -webkit-transition: all var(--sa-dur) ease var(--sa-delay, 0s);
  transition: all var(--sa-dur) ease var(--sa-delay, 0s);
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
}

.js-sa-group.is-show .js-sa-group__item {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* -------------------------------------------------------------------------------------------------------------
  Slick
------------------------------------------------------------------------------------------------------------- */
/* Slider */
.slick-loading .slick-list {
  background: #fff url("../images/common/loader.svg") center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
  background-color: rgba(164, 139, 82, 0.8);
  border-radius: 50%;
  z-index: 1;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/common/i_arr_2_w.svg) no-repeat 55% center;
  background-size: 26px;
}
@media only screen and (min-width: 768px) {
  .slick-prev,
  .slick-next {
    height: 50px;
    width: 50px;
  }
  .slick-prev:before,
  .slick-next:before {
    background-size: 10px;
  }
}

.slick-prev {
  left: -15px;
}
@media only screen and (min-width: 768px) {
  .slick-prev {
    left: -25px;
  }
}
[dir=rtl] .slick-prev {
  left: auto;
  right: -10px;
}
.slick-prev:before {
  /* content: $slick-prev-character;
  [dir="rtl"] & {
      content: $slick-next-character;
  } */
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}

.slick-next {
  right: -15px;
}
@media only screen and (min-width: 768px) {
  .slick-next {
    right: -25px;
  }
}
[dir=rtl] .slick-next {
  left: -10px;
  right: auto;
}
.slick-next:before {
  /* content: $slick-next-character;
  [dir="rtl"] & {
      content: $slick-prev-character;
  } */
}

/* Dots */
.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 14px;
  width: 14px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  position: absolute; /* add */
  border: 0;
  background: transparent;
  display: block;
  height: 100%;
  width: 100%;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  /* font-family: $slick-font-family; */
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
}
.slick-dots li.slick-active button:before {
  color: black;
  opacity: 1;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* --------------------------------------------------------------------------------------------------------------------
scroll-hint
-------------------------------------------------------------------------------------------------------------------- */
@-webkit-keyframes scroll-hint-appear {
  0% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%, 100% {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
    opacity: 0;
  }
}
@keyframes scroll-hint-appear {
  0% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%, 100% {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
    opacity: 0;
  }
}
.scroll-hint.is-right-scrollable {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint.is-right-scrollable.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint-icon {
  position: absolute;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 120px;
  height: 120px;
  border-radius: 60px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 0;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  padding: 40px 10px 10px 10px;
}

.scroll-hint-icon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  pointer-events: none;
}

.scroll-hint-text {
  font-size: 12px;
  color: #FFF;
  font-family: "EB Garamond", serif;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
  opacity: 0.8;
}

.scroll-hint-icon:before {
  display: inline-block;
  width: 8px;
  height: 8px;
  color: #FFF;
  vertical-align: middle;
  text-align: center;
  content: "";
  background-color: #fff;
  border-radius: 50%;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
  opacity: 1;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
  -webkit-animation: scroll-hint-appear 2s linear;
          animation: scroll-hint-appear 2s linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

/*!
	Modaal - accessible modals - v0.4.4
	by Humaan, for all humans.
	http://humaan.com
 */
.modaal-noscroll {
  overflow: hidden;
}

.modaal-accessible-hide {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modaal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99998;
  opacity: 0;
}

.modaal-wrapper {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  overflow: auto;
  opacity: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.modaal-wrapper * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
}

.modaal-wrapper .modaal-close {
  border: none;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
}

.modaal-wrapper.modaal-start_none {
  display: none;
  opacity: 1;
}

.modaal-wrapper.modaal-start_fade {
  opacity: 0;
}

.modaal-wrapper *[tabindex="0"] {
  outline: none !important;
}

.modaal-wrapper.modaal-fullscreen {
  overflow: hidden;
}

.modaal-outer-wrapper {
  display: table;
  position: relative;
  width: 100%;
  height: 100%;
}

.modaal-fullscreen .modaal-outer-wrapper {
  display: block;
}

.modaal-inner-wrapper {
  display: table-cell;
  width: 100%;
  height: 100%;
  position: relative;
  vertical-align: middle;
  text-align: center;
  padding: 80px 25px;
}

.modaal-fullscreen .modaal-inner-wrapper {
  padding: 0;
  display: block;
  vertical-align: top;
}

.modaal-container {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: auto;
  text-align: left;
  color: #000;
  max-width: 1000px;
  border-radius: 0px;
  background: #fff;
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: auto;
}

.modaal-container.is_loading {
  height: 100px;
  width: 100px;
  overflow: hidden;
}

.modaal-fullscreen .modaal-container {
  max-width: none;
  height: 100%;
  overflow: auto;
}

.modaal-close {
  position: fixed;
  right: 20px;
  top: 20px;
  color: #fff;
  cursor: pointer;
  opacity: 1;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0);
  border-radius: 100%;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  z-index: 10000;
}

.modaal-close:focus,
.modaal-close:hover {
  outline: none;
  background: #fff;
}

.modaal-close:focus:before,
.modaal-close:focus:after,
.modaal-close:hover:before,
.modaal-close:hover:after {
  background: #000;
}

.modaal-close span {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modaal-close:before,
.modaal-close:after {
  display: block;
  content: " ";
  position: absolute;
  top: 14px;
  left: 23px;
  width: 2px;
  height: 22px;
  /* border-radius: 4px; */
  background: #fff;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}

.modaal-close:before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.modaal-close:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.modaal-fullscreen .modaal-close {
  background: #afb7bc;
  right: 10px;
  top: 10px;
}

.modaal-content-container {
  padding: 30px;
}

.modaal-confirm-wrap {
  padding: 30px 0 0;
  text-align: center;
  font-size: 0;
}

.modaal-confirm-btn {
  font-size: 14px;
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  background: transparent;
}

.modaal-confirm-btn.modaal-ok {
  padding: 10px 15px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}

.modaal-confirm-btn.modaal-ok:hover {
  background: #2f2f2f;
}

.modaal-confirm-btn.modaal-cancel {
  text-decoration: underline;
}

.modaal-confirm-btn.modaal-cancel:hover {
  text-decoration: none;
  color: #2f2f2f;
}

.modaal-instagram .modaal-container {
  width: auto;
  background: transparent;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.modaal-instagram .modaal-content-container {
  padding: 0;
  background: transparent;
}

.modaal-instagram .modaal-content-container > blockquote {
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.modaal-instagram iframe {
  opacity: 0;
  margin: -6px !important;
  border-radius: 0 !important;
  width: 1000px !important;
  max-width: 800px !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  -webkit-animation: instaReveal 1s linear forwards;
  animation: instaReveal 1s linear forwards;
}

.modaal-image .modaal-inner-wrapper {
  padding-left: 140px;
  padding-right: 140px;
}

.modaal-image .modaal-container {
  width: auto;
  max-width: 100%;
}

.modaal-gallery-wrap {
  position: relative;
  color: #fff;
}

.modaal-gallery-item {
  display: none;
}

.modaal-gallery-item img {
  display: block;
}

.modaal-gallery-item.is_active {
  display: block;
}

.modaal-gallery-label {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 20px 0 20px;
  font-size: 16px;
  text-align: left;
  color: #fff;
  line-height: 1.8;
}

.modaal-gallery-label:focus {
  outline: none;
}

.modaal-gallery-control {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
  cursor: pointer;
  color: #fff;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.modaal-gallery-control.is_hidden {
  opacity: 0;
  cursor: default;
}

.modaal-gallery-control:focus,
.modaal-gallery-control:hover {
  outline: none;
  background: #fff;
}

.modaal-gallery-control:focus:before,
.modaal-gallery-control:focus:after,
.modaal-gallery-control:hover:before,
.modaal-gallery-control:hover:after {
  background: #afb7bc;
}

.modaal-gallery-control span {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modaal-gallery-control:before,
.modaal-gallery-control:after {
  display: block;
  content: " ";
  position: absolute;
  top: 16px;
  left: 25px;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}

.modaal-gallery-control:before {
  margin: -5px 0 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.modaal-gallery-control:after {
  margin: 5px 0 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.modaal-gallery-next-inner {
  left: 100%;
  margin-left: 40px;
}

.modaal-gallery-next-outer {
  right: 45px;
}

.modaal-gallery-prev:before,
.modaal-gallery-prev:after {
  left: 22px;
}

.modaal-gallery-prev:before {
  margin: 5px 0 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.modaal-gallery-prev:after {
  margin: -5px 0 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.modaal-gallery-prev-inner {
  right: 100%;
  margin-right: 40px;
}

.modaal-gallery-prev-outer {
  left: 45px;
}

.modaal-video-wrap {
  margin: auto 50px;
  position: relative;
}

.modaal-video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  background: #000;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.modaal-video-container iframe,
.modaal-video-container object,
.modaal-video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modaal-iframe .modaal-content {
  width: 100%;
  height: 100%;
}

.modaal-iframe-elem {
  width: 100%;
  height: 100%;
  display: block;
}

.modaal-loading-spinner {
  background: none;
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  -webkit-transform: scale(0.25);
  transform: scale(0.25);
}

.modaal-loading-spinner > div {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  margin-top: 4px;
  position: absolute;
}

.modaal-loading-spinner > div > div {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #fff;
}

.modaal-loading-spinner > div:nth-of-type(1) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.modaal-loading-spinner > div:nth-of-type(2) > div,
.modaal-loading-spinner > div:nth-of-type(3) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner > div:nth-of-type(1) {
  -webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(2) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: 0.12s;
  animation-delay: 0.12s;
}

.modaal-loading-spinner > div:nth-of-type(2) {
  -webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(3) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.modaal-loading-spinner > div:nth-of-type(4) > div,
.modaal-loading-spinner > div:nth-of-type(5) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner > div:nth-of-type(3) {
  -webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(4) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: 0.37s;
  animation-delay: 0.37s;
}

.modaal-loading-spinner > div:nth-of-type(4) {
  -webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(5) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.modaal-loading-spinner > div:nth-of-type(6) > div,
.modaal-loading-spinner > div:nth-of-type(7) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner > div:nth-of-type(5) {
  -webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(6) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: 0.62s;
  animation-delay: 0.62s;
}

.modaal-loading-spinner > div:nth-of-type(6) {
  -webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(7) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}

.modaal-loading-spinner > div:nth-of-type(7) {
  -webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(8) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: 0.87s;
  animation-delay: 0.87s;
}

.modaal-loading-spinner > div:nth-of-type(8) {
  -webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
}

@media only screen and (min-width: 1400px) {
  .modaal-video-container {
    padding-bottom: 0;
    height: 731px;
  }
}
@media only screen and (max-width: 1140px) {
  .modaal-image .modaal-inner-wrapper {
    padding-left: 25px;
    padding-right: 25px;
  }
  .modaal-gallery-control {
    top: auto;
    bottom: 20px;
    -webkit-transform: none;
    transform: none;
    background: rgba(0, 0, 0, 0.7);
  }
  .modaal-gallery-control:before,
  .modaal-gallery-control:after {
    background: #fff;
  }
  .modaal-gallery-next {
    left: auto;
    right: 20px;
  }
  .modaal-gallery-prev {
    left: 20px;
    right: auto;
  }
}
@media screen and (max-width: 900px) {
  .modaal-instagram iframe {
    width: 500px !important;
  }
}
@media only screen and (max-width: 600px) {
  .modaal-instagram iframe {
    width: 280px !important;
  }
}
@media screen and (max-height: 1100px) {
  .modaal-instagram iframe {
    width: 700px !important;
  }
}
@media screen and (max-height: 1000px) {
  .modaal-inner-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .modaal-instagram iframe {
    width: 600px !important;
  }
}
@media screen and (max-height: 900px) {
  .modaal-instagram iframe {
    width: 500px !important;
  }
  .modaal-video-container {
    max-width: 900px;
    max-height: 510px;
  }
}
@media only screen and (max-height: 820px) {
  .modaal-gallery-label {
    /*display: none;*/
    font-size: 12px;
    width: 80%;
    margin: 20px 10% 20px;
  }
}
@keyframes instaReveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes instaReveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes modaal-loading-spinner {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0.1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes modaal-loading-spinner {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0.1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/* -------------------------------------------------------------------------------------------------------------
sweetalert
------------------------------------------------------------------------------------------------------------- */
body.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

.sweet-overlay {
  background-color: black;
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  /* IE8 */
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  z-index: 10000;
}

.sweet-alert {
  background-color: white;
  /*font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
  width: 478px;
  padding: 30px;
  border-radius: 5px;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -256px;
  margin-top: -200px;
  overflow: hidden;
  display: none;
  z-index: 99999;
}

@media all and (max-width: 540px) {
  .sweet-alert {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    left: 15px;
    right: 15px;
  }
}
.sweet-alert h2 {
  color: #575757;
  font-size: 30px;
  text-align: center;
  font-weight: 600;
  text-transform: none;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 40px;
  display: block;
}

.sweet-alert p {
  color: #222222;
  font-size: 16px;
  text-align: center;
  font-weight: 300;
  position: relative;
  text-align: inherit;
  float: none;
  margin: 0;
  padding: 0;
  line-height: normal;
}

.sweet-alert fieldset {
  border: none;
  position: relative;
}

.sweet-alert .sa-error-container {
  background-color: #f1f1f1;
  margin-left: -17px;
  margin-right: -17px;
  overflow: hidden;
  padding: 0 10px;
  max-height: 0;
  webkit-transition: padding 0.15s, max-height 0.15s;
  -webkit-transition: padding 0.15s, max-height 0.15s;
  transition: padding 0.15s, max-height 0.15s;
}

.sweet-alert .sa-error-container.show {
  padding: 10px 0;
  max-height: 100px;
  webkit-transition: padding 0.2s, max-height 0.2s;
  -webkit-transition: padding 0.25s, max-height 0.25s;
  transition: padding 0.25s, max-height 0.25s;
}

.sweet-alert .sa-error-container .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ea7d7d;
  color: white;
  line-height: 24px;
  text-align: center;
  margin-right: 3px;
}

.sweet-alert .sa-error-container p {
  display: inline-block;
}

.sweet-alert .sa-input-error {
  position: absolute;
  top: 29px;
  right: 26px;
  width: 20px;
  height: 20px;
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}

.sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after {
  content: "";
  width: 20px;
  height: 6px;
  background-color: #f06e57;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  left: 50%;
  margin-left: -9px;
}

.sweet-alert .sa-input-error::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.sweet-alert .sa-input-error::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.sweet-alert .sa-input-error.show {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.sweet-alert input {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid #d7d7d7;
  height: 43px;
  margin-top: 10px;
  margin-bottom: 17px;
  font-size: 18px;
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
          box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
  padding: 0 12px;
  display: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.sweet-alert input:focus {
  outline: none;
  -webkit-box-shadow: 0px 0px 3px #c4e6f5;
          box-shadow: 0px 0px 3px #c4e6f5;
  border: 1px solid #b4dbed;
}

.sweet-alert input:focus::-moz-placeholder {
  -moz-transition: opacity 0.3s 0.03s ease;
  transition: opacity 0.3s 0.03s ease;
  opacity: 0.5;
}

.sweet-alert input:focus:-ms-input-placeholder {
  -ms-transition: opacity 0.3s 0.03s ease;
  transition: opacity 0.3s 0.03s ease;
  opacity: 0.5;
}

.sweet-alert input:focus::-webkit-input-placeholder {
  -webkit-transition: opacity 0.3s 0.03s ease;
  transition: opacity 0.3s 0.03s ease;
  opacity: 0.5;
}

.sweet-alert input::-moz-placeholder {
  color: #bdbdbd;
}

.sweet-alert input:-ms-input-placeholder {
  color: #bdbdbd;
}

.sweet-alert input::-webkit-input-placeholder {
  color: #bdbdbd;
}

.sweet-alert.show-input input {
  display: block;
}

.sweet-alert .sa-confirm-button-container {
  display: inline-block;
  position: relative;
}

.sweet-alert .la-ball-fall {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -27px;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
}

.sweet-alert button {
  background-color: #000 !important;
  color: white;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  border-radius: 5px;
  padding: 10px 32px;
  margin: 15px 5px 0 5px;
  cursor: pointer;
}

.sweet-alert button:focus {
  outline: none;
  -webkit-box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.sweet-alert button:hover {
  background-color: #7ecff4;
}

.sweet-alert button:active {
  background-color: #5dc2f1;
}

.sweet-alert button.cancel {
  background-color: #C1C1C1;
}

.sweet-alert button.cancel:hover {
  background-color: #b9b9b9;
}

.sweet-alert button.cancel:active {
  background-color: #a8a8a8;
}

.sweet-alert button.cancel:focus {
  -webkit-box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important;
          box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important;
}

.sweet-alert button[disabled] {
  opacity: 0.6;
  cursor: default;
}

.sweet-alert button.confirm[disabled] {
  color: transparent;
}

.sweet-alert button.confirm[disabled] ~ .la-ball-fall {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.sweet-alert button::-moz-focus-inner {
  border: 0;
}

.sweet-alert[data-has-cancel-button=false] button {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
  padding-bottom: 40px;
}

.sweet-alert .sa-icon {
  width: 80px;
  height: 80px;
  border: 4px solid gray;
  border-radius: 40px;
  border-radius: 50%;
  margin: 20px auto;
  padding: 0;
  position: relative;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.sweet-alert .sa-icon.sa-error {
  /* border-color: #F27474;*/
}

.sweet-alert .sa-icon.sa-error .sa-x-mark {
  position: relative;
  display: block;
}

.sweet-alert .sa-icon.sa-error .sa-line {
  position: absolute;
  height: 5px;
  width: 47px;
  background-color: gray;
  display: block;
  top: 37px;
  border-radius: 2px;
}

.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 17px;
}

.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 16px;
}

.sweet-alert .sa-icon.sa-warning {
  border-color: #F8BB86;
}

.sweet-alert .sa-icon.sa-warning .sa-body {
  position: absolute;
  width: 5px;
  height: 47px;
  left: 50%;
  top: 10px;
  border-radius: 2px;
  margin-left: -2px;
  background-color: #F8BB86;
}

.sweet-alert .sa-icon.sa-warning .sa-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: -3px;
  left: 50%;
  bottom: 10px;
  background-color: #F8BB86;
}

.sweet-alert .sa-icon.sa-info {
  border-color: #C9DAE1;
}

.sweet-alert .sa-icon.sa-info::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 29px;
  left: 50%;
  bottom: 17px;
  border-radius: 2px;
  margin-left: -2px;
  background-color: #C9DAE1;
}

.sweet-alert .sa-icon.sa-info::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: -3px;
  top: 19px;
  background-color: #C9DAE1;
}

.sweet-alert .sa-icon.sa-success {
  border-color: #A5DC86;
}

.sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after {
  content: "";
  border-radius: 40px;
  border-radius: 50%;
  position: absolute;
  width: 60px;
  height: 120px;
  background: white;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.sweet-alert .sa-icon.sa-success::before {
  border-radius: 120px 0 0 120px;
  top: -7px;
  left: -33px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 60px 60px;
  transform-origin: 60px 60px;
}

.sweet-alert .sa-icon.sa-success::after {
  border-radius: 0 120px 120px 0;
  top: -11px;
  left: 30px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0px 60px;
  transform-origin: 0px 60px;
}

.sweet-alert .sa-icon.sa-success .sa-placeholder {
  width: 80px;
  height: 80px;
  border: 4px solid rgba(165, 220, 134, 0.2);
  border-radius: 40px;
  border-radius: 50%;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: 2;
}

.sweet-alert .sa-icon.sa-success .sa-fix {
  width: 5px;
  height: 90px;
  background-color: white;
  position: absolute;
  left: 28px;
  top: 8px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.sweet-alert .sa-icon.sa-success .sa-line {
  height: 5px;
  background-color: #A5DC86;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 2;
}

.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
  width: 25px;
  left: 14px;
  top: 46px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
  width: 47px;
  right: 8px;
  top: 38px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.sweet-alert .sa-icon.sa-custom {
  background-size: contain;
  border-radius: 0;
  border: none;
  background-position: center center;
  background-repeat: no-repeat;
}

/*
 * Animations
 */
@-webkit-keyframes showSweetAlert {
  0% {
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
  }
  45% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
@keyframes showSweetAlert {
  0% {
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
  }
  45% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes hideSweetAlert {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  100% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}
@keyframes hideSweetAlert {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  100% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}
@-webkit-keyframes slideFromTop {
  0% {
    top: 0%;
  }
  100% {
    top: 50%;
  }
}
@keyframes slideFromTop {
  0% {
    top: 0%;
  }
  100% {
    top: 50%;
  }
}
@-webkit-keyframes slideToTop {
  0% {
    top: 50%;
  }
  100% {
    top: 0%;
  }
}
@keyframes slideToTop {
  0% {
    top: 50%;
  }
  100% {
    top: 0%;
  }
}
@-webkit-keyframes slideFromBottom {
  0% {
    top: 70%;
  }
  100% {
    top: 50%;
  }
}
@keyframes slideFromBottom {
  0% {
    top: 70%;
  }
  100% {
    top: 50%;
  }
}
@-webkit-keyframes slideToBottom {
  0% {
    top: 50%;
  }
  100% {
    top: 70%;
  }
}
@keyframes slideToBottom {
  0% {
    top: 50%;
  }
  100% {
    top: 70%;
  }
}
.showSweetAlert[data-animation=pop] {
  -webkit-animation: showSweetAlert 0.3s;
  animation: showSweetAlert 0.3s;
}

.showSweetAlert[data-animation=none] {
  -webkit-animation: none;
  animation: none;
}

.showSweetAlert[data-animation=slide-from-top] {
  -webkit-animation: slideFromTop 0.3s;
  animation: slideFromTop 0.3s;
}

.showSweetAlert[data-animation=slide-from-bottom] {
  -webkit-animation: slideFromBottom 0.3s;
  animation: slideFromBottom 0.3s;
}

.hideSweetAlert[data-animation=pop] {
  -webkit-animation: hideSweetAlert 0.2s;
  animation: hideSweetAlert 0.2s;
}

.hideSweetAlert[data-animation=none] {
  -webkit-animation: none;
  animation: none;
}

.hideSweetAlert[data-animation=slide-from-top] {
  -webkit-animation: slideToTop 0.4s;
  animation: slideToTop 0.4s;
}

.hideSweetAlert[data-animation=slide-from-bottom] {
  -webkit-animation: slideToBottom 0.3s;
  animation: slideToBottom 0.3s;
}

@-webkit-keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@-webkit-keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
@keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
@-webkit-keyframes rotatePlaceholder {
  0% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg);
  }
}
@keyframes rotatePlaceholder {
  0% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg);
  }
}
.animateSuccessTip {
  -webkit-animation: animateSuccessTip 0.75s;
  animation: animateSuccessTip 0.75s;
}

.animateSuccessLong {
  -webkit-animation: animateSuccessLong 0.75s;
  animation: animateSuccessLong 0.75s;
}

.sa-icon.sa-success.animate::after {
  -webkit-animation: rotatePlaceholder 4.25s ease-in;
  animation: rotatePlaceholder 4.25s ease-in;
}

@-webkit-keyframes animateErrorIcon {
  0% {
    transform: rotateX(100deg);
    -webkit-transform: rotateX(100deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1;
  }
}
@keyframes animateErrorIcon {
  0% {
    transform: rotateX(100deg);
    -webkit-transform: rotateX(100deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1;
  }
}
.animateErrorIcon {
  -webkit-animation: animateErrorIcon 0.5s;
  animation: animateErrorIcon 0.5s;
}

@-webkit-keyframes animateXMark {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0;
  }
  50% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0;
  }
  80% {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    margin-top: -6px;
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    margin-top: 0;
    opacity: 1;
  }
}
@keyframes animateXMark {
  0% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0;
  }
  50% {
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    margin-top: 26px;
    opacity: 0;
  }
  80% {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    margin-top: -6px;
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    margin-top: 0;
    opacity: 1;
  }
}
.animateXMark {
  -webkit-animation: animateXMark 0.5s;
  animation: animateXMark 0.5s;
}

@-webkit-keyframes pulseWarning {
  0% {
    border-color: #F8D486;
  }
  100% {
    border-color: #F8BB86;
  }
}
@keyframes pulseWarning {
  0% {
    border-color: #F8D486;
  }
  100% {
    border-color: #F8BB86;
  }
}
.pulseWarning {
  -webkit-animation: pulseWarning 0.75s infinite alternate;
  animation: pulseWarning 0.75s infinite alternate;
}

@-webkit-keyframes pulseWarningIns {
  0% {
    background-color: #F8D486;
  }
  100% {
    background-color: #F8BB86;
  }
}
@keyframes pulseWarningIns {
  0% {
    background-color: #F8D486;
  }
  100% {
    background-color: #F8BB86;
  }
}
.pulseWarningIns {
  -webkit-animation: pulseWarningIns 0.75s infinite alternate;
  animation: pulseWarningIns 0.75s infinite alternate;
}

@-webkit-keyframes rotate-loading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-loading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* Internet Explorer 9 has some special quirks that are fixed here */
/* The icons are not animated. */
/* This file is automatically merged into sweet-alert.min.js through Gulp */
/* Error icon */
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
  -ms-transform: rotate(45deg) \9 ;
}

.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
  -ms-transform: rotate(-45deg) \9 ;
}

/* Success icon */
.sweet-alert .sa-icon.sa-success {
  border-color: transparent\9 ;
}

.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
  -ms-transform: rotate(45deg) \9 ;
}

.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
  -ms-transform: rotate(-45deg) \9 ;
}

/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */
.la-ball-fall,
.la-ball-fall > div {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.la-ball-fall {
  display: block;
  font-size: 0;
  color: #fff;
}

.la-ball-fall.la-dark {
  color: #333;
}

.la-ball-fall > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.la-ball-fall {
  width: 54px;
  height: 18px;
}

.la-ball-fall > div {
  width: 10px;
  height: 10px;
  margin: 4px;
  border-radius: 100%;
  opacity: 0;
  -webkit-animation: ball-fall 1s ease-in-out infinite;
  animation: ball-fall 1s ease-in-out infinite;
}

.la-ball-fall > div:nth-child(1) {
  -webkit-animation-delay: -200ms;
  animation-delay: -200ms;
}

.la-ball-fall > div:nth-child(2) {
  -webkit-animation-delay: -100ms;
  animation-delay: -100ms;
}

.la-ball-fall > div:nth-child(3) {
  -webkit-animation-delay: 0ms;
  animation-delay: 0ms;
}

.la-ball-fall.la-sm {
  width: 26px;
  height: 8px;
}

.la-ball-fall.la-sm > div {
  width: 4px;
  height: 4px;
  margin: 2px;
}

.la-ball-fall.la-2x {
  width: 108px;
  height: 36px;
}

.la-ball-fall.la-2x > div {
  width: 20px;
  height: 20px;
  margin: 8px;
}

.la-ball-fall.la-3x {
  width: 162px;
  height: 54px;
}

.la-ball-fall.la-3x > div {
  width: 30px;
  height: 30px;
  margin: 12px;
}

/*
 * Animation
 */
@-webkit-keyframes ball-fall {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-145%);
    transform: translateY(-145%);
  }
  10% {
    opacity: 0.5;
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(145%);
    transform: translateY(145%);
  }
}
@keyframes ball-fall {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-145%);
    transform: translateY(-145%);
  }
  10% {
    opacity: 0.5;
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(145%);
    transform: translateY(145%);
  }
}
/* ============================================================
    GUIDELINE 共通パーツ（ヘッダー内でのみ使用）
    ・ガイドライン支給の header.php でしか使われないため、_component.scss
      から移動。クラス名は支給マークアップに合わせて c- のままにしています。
    ・ヘッダー以外のページでも使うようになったら _component.scss に戻すこと。
    ・下の各セクション（info-menu / content-menu 等）で上書きしているので、
      この土台のスタイルは必ずファイル冒頭に置いてください。
============================================================ */
/* メニュー内の大ボタン（物件エントリー等） */
.c-menu-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
  max-width: 416px;
  height: 60px;
  background: #a48b52;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
}
.c-menu-btn:hover, .c-menu-btn:focus {
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .c-menu-btn {
    height: 44px;
  }
}

/* SP下部バーから開くシートのボタン（#spTelBtn / #spCtaBtn） */
.c-sp-cta-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
  width: 100%;
  height: 56px;
  background: #a48b52;
  color: #fff;
}
.c-sp-cta-btn:hover, .c-sp-cta-btn:focus {
  color: #fff;
}
.c-sp-cta-btn.btn-clr {
  background: #93284c;
}
.c-sp-cta-btn {
  font-size: 1.5rem;
  /* ボタン内の入れ子（旧 sp-content セクションから統合） */
}
.c-sp-cta-btn__notes {
  font-size: 1.1rem;
  margin-top: 0.5em;
}
.c-sp-cta-btn__in {
  text-align: center;
}

/* メニュー内のページリンクボタン（#contentMenu） */
.c-page-menu-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #A48B52;
  color: #fff;
  width: 100%;
  padding: 10px 7px;
  font-size: 1.4rem;
  text-align: center;
}
.c-page-menu-btn:hover, .c-page-menu-btn:focus {
  color: #fff;
}
.c-page-menu-btn--ghost {
  background: none;
  color: #333;
  border: solid 1px #aaa;
}
.c-page-menu-btn--ghost:hover, .c-page-menu-btn--ghost:focus {
  background: rgba(255, 255, 255, 0.6);
  color: #333;
}
.c-page-menu-btn--full {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}
@media only screen and (min-width: 1200px) {
  .c-page-menu-btn {
    width: calc((100% - 10px) / 2);
  }
}

/* 新着を示す赤い点 */
.c-badge--new {
  position: relative;
}
.c-badge--new::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #C44E73;
}

/* ============================================================
    HEADER 本体
============================================================ */
.header {
  position: relative;
  width: 100%;
  z-index: 600;
}
.header .logo-bukkenLogo {
  position: absolute;
  top: 30px;
  left: 30px;
  width: auto;
}
.header .logo-bukkenLogo a {
  display: inline-block;
  position: relative;
}
.header .logo-bukkenLogo img {
  height: 65px;
  width: auto;
  vertical-align: top;
}
@media only screen and (max-width: 767px) {
  .header .logo-bukkenLogo {
    top: 25px;
    left: 20px;
  }
  .header .logo-bukkenLogo img {
    height: 55px;
  }
}
.header .logo .logo-bukkenLogo {
  position: fixed;
}
.header .m-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
}
.header .m-content .menu__close,
.header .m-content .menu__inner {
  opacity: 0;
  visibility: hidden;
  -webkit-transition-timing-function: cubic-bezier(0.46, 0.1, 0.29, 1) !important;
          transition-timing-function: cubic-bezier(0.46, 0.1, 0.29, 1) !important;
}
.header .m-content .menu__bg {
  position: absolute;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 100%;
  background: #F4F4F4;
  opacity: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.46, 0.1, 0.29, 1) !important;
          transition-timing-function: cubic-bezier(0.46, 0.1, 0.29, 1) !important;
}
.header .m-content.is-visible {
  visibility: visible;
  pointer-events: auto;
}
.header .m-content.is-visible .menu__close,
.header .m-content.is-visible .menu__inner {
  opacity: 1;
  visibility: visible;
  -webkit-transition: 0.3s 0.24s;
  transition: 0.3s 0.24s;
}
.header .m-content.is-visible .menu__bg {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  bottom: 0;
}
.header .m-content.is-visible .logo-bukkenLogo a::after {
  opacity: 1;
}
.header .m-content.content-menu .menu__bg, .header .m-content.info-menu .menu__bg {
  top: -100%;
  bottom: auto;
}
@media only screen and (max-width: 767px) {
  .header .m-content.content-menu .menu__bg, .header .m-content.info-menu .menu__bg {
    top: auto;
    bottom: -100%;
  }
}
.header .m-content.content-menu.is-visible .menu__bg, .header .m-content.info-menu.is-visible .menu__bg {
  top: 0;
  bottom: auto;
}
@media only screen and (max-width: 767px) {
  .header .m-content.content-menu.is-visible .menu__bg, .header .m-content.info-menu.is-visible .menu__bg {
    top: auto;
    bottom: 0;
  }
}
.header .menu__close {
  position: fixed;
  top: 35px;
  right: 35px;
  z-index: 500;
}
@media only screen and (max-width: 767px) {
  .header .menu__close {
    top: 25px;
    right: 20px;
  }
}
.header .menu__close .menu__close-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.header .menu__close .menu__close-btn .icon-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.header .menu__close .menu__close-btn .icon-box:hover, .header .menu__close .menu__close-btn .icon-box:focus {
  background: white;
}
@media only screen and (max-width: 767px) {
  .header .menu__close .menu__close-btn .icon-box {
    width: 32px;
    height: 32px;
  }
}
.header .menu__close .menu__close-btn .icon-box img {
  width: 12px;
  height: 12px;
}
.header .menu__inner {
  position: relative;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}
.header .menu-content-area {
  color: #333;
  padding: 150px 0 60px;
  min-height: 520px;
}
@media only screen and (max-width: 767px) {
  .header .menu-content-area {
    padding: 130px 0 40px;
  }
}
@media only screen and (min-width: 768px) {
  .header .menu-content-area a {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .header .menu-content-area a:hover {
    opacity: 0.85;
  }
}
.header .menu-btn-area {
  margin-top: 16px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.header .menu-btn-area__item {
  -ms-flex-preferred-size: 47.4%;
      flex-basis: 47.4%;
  max-width: 416px;
  margin: 4px;
}
.header .menu-btn-area__item.col1 {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}
.header .menu-btn-area__item p {
  margin-bottom: 20px;
}
.header .menu-ft-info-area {
  background: #333;
  padding: 40px 0 50px;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .header .menu-ft-info-area {
    padding: 50px 0 60px;
  }
}
.header .menu-ft-info-area .contact {
  line-height: 1.6;
}
.header .menu-ft-info-area .contact__info {
  margin-top: 16px;
}
@media only screen and (min-width: 1000px) {
  .header .menu-ft-info-area .contact__info {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 24px 1.2fr;
    grid-template-columns: 1fr 1.2fr;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0 24px;
  }
}
.header .menu-ft-info-area .contact__info .tel a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  width: 100%;
  font-size: 2.4rem;
  line-height: 1;
  color: #333;
  background: #fff;
  height: 40px;
}
@media only screen and (min-width: 768px) {
  .header .menu-ft-info-area .contact__info .tel a {
    font-size: 3rem;
    height: 50px;
  }
}
.header .menu-ft-info-area .contact__info .tel a img {
  width: 30px;
  margin-right: 7px;
  -webkit-filter: invert(82%) sepia(0%) saturate(2%) hue-rotate(233deg) brightness(106%) contrast(101%);
          filter: invert(82%) sepia(0%) saturate(2%) hue-rotate(233deg) brightness(106%) contrast(101%);
  vertical-align: baseline;
}
@media only screen and (min-width: 768px) {
  .header .menu-ft-info-area .contact__info .tel a img {
    width: 40px;
  }
}
.header .menu-ft-info-area .contact__info .time {
  font-size: 1.2rem;
  margin-top: 16px;
}
@media only screen and (min-width: 1000px) {
  .header .menu-ft-info-area .contact__info .time {
    margin-top: 0;
  }
}
.header .menu-ft-info-area .contact__info .time .kkc {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  color: #8F7946;
}
.header .menu-ft-info-area .contact__info .time__notes {
  margin-top: 1.2em;
  font-size: 1.2rem;
  -ms-grid-column-span: 2;
  grid-column: span 2;
}

#gHeader.clr .logo-bukkenLogo a::after {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#gHeader.clr .logo-bukkenLogo img {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

/* ロゴ色を反転させる
---------------------------------------------- */
.b-logo-iv .header .logo-bukkenLogo img {
  -webkit-filter: invert(100%);
          filter: invert(100%);
}
.b-logo-iv .header .m-content .logo-bukkenLogo img {
  -webkit-filter: invert(0);
          filter: invert(0);
}

/* ------------------------------------------------------------
    header-menu-btn
------------------------------------------------------------ */
.header-menu-btn {
  position: fixed;
  width: 106px;
  top: 30px;
  right: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .header-menu-btn {
    display: none;
  }
}
.header-menu-btn a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.header-menu-btn a span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header-menu-btn__info span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.header-menu-btn__info span:hover, .header-menu-btn__info span:focus {
  background: #fff;
}
.header-menu-btn__menu {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  padding: 4px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.header-menu-btn__menu:hover, .header-menu-btn__menu:focus {
  padding: 2px;
  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}
.header-menu-btn__menu span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: -webkit-gradient(linear, left top, right top, from(#C9A227), to(#A47E1B));
  background: linear-gradient(to right, #C9A227, #A47E1B);
  font-size: 1.1rem;
  font-family: "EB Garamond", serif;
  color: #fff;
  letter-spacing: 0.04em;
}
.header-menu-btn .c-badge--new {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.header-menu-btn .c-badge--new:hover, .header-menu-btn .c-badge--new:focus {
  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}
.header-menu-btn .c-badge--new::after {
  top: 7px;
  right: 7px;
}

/* ------------------------------------------------------------
    info-menu
------------------------------------------------------------ */
.info-menu .menu__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.info-menu .menu__inner .menu-content-area {
  min-height: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.info-menu .info-title {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .info-menu .info-title {
    text-align: left;
    line-height: 1;
  }
}
.info-menu .info-title .info-title__01 {
  position: relative;
  color: #B3B3B3;
  font-size: 2rem;
}
@media only screen and (max-width: 767px) {
  .info-menu .info-title .info-title__01 {
    display: block;
    color: #333;
  }
}
.info-menu .info-title .info-title__01::before {
  content: "";
  width: 1px;
  height: 40px;
  background: #B3B3B3;
  position: absolute;
  top: -54px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media only screen and (max-width: 767px) {
  .info-menu .info-title .info-title__01::before {
    display: none;
  }
}
.info-menu .info-title .info-title__02 {
  color: #777;
  font-size: 1rem;
}
.info-menu .info-inner-box {
  text-align: center;
  margin: 32px 0 0;
}
@media only screen and (max-width: 767px) {
  .info-menu .info-inner-box {
    margin-top: 12px;
    padding-top: 20px;
    border-top: solid 1px #cdcdcd;
  }
}
.info-menu .info-inner-box .info-inner__in + .info-inner__in {
  margin-top: 25px;
  border-top: none;
}
.info-menu .info-inner-box .info-inner__ttl {
  margin: 0 auto 0.4em;
  font-size: min(5.8vw, 2.5rem);
  line-height: 1.5;
}
.info-menu .info-inner-box .info-inner__ttl .waku {
  display: inline-block;
  vertical-align: middle;
  font-size: min(3.7vw, 1.6rem);
  line-height: 1;
  border: solid 1px rgba(0, 0, 0, 0.25);
  padding: 7px 14px;
  margin: 0 10px 5px;
}
.info-menu .info-inner-box .info-inner__ttl .s_s {
  font-size: 80%;
}
@media only screen and (max-width: 767px) {
  .info-menu .info-inner-box .info-inner__ttl .waku {
    padding: 5px 10px;
  }
}
.info-menu .info-inner-box .info-inner__txt {
  line-height: 1.8;
}
.info-menu .info-inner-box .info-inner__txt .clr {
  color: #8F7946;
}
@media only screen and (max-width: 767px) {
  .info-menu .info-inner-box .menu-btn-area {
    margin-top: 10px;
  }
}
.info-menu .menu-bnr-area {
  background: #EBEBEB;
  padding: 50px 0;
}
.info-menu .menu-bnr-area__bnr {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
@media only screen and (max-width: 767px) {
  .info-menu .menu-bnr-area {
    padding: 40px 0;
  }
}
.info-menu .menu-bnr-area a {
  -ms-flex-preferred-size: 47.4%;
      flex-basis: 47.4%;
  max-width: 378px;
  text-align: center;
  margin: 4px;
}
.info-menu .menu-bnr-area a.col1 {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}
.info-menu .info-news {
  margin-top: 56px;
}
@media only screen and (max-width: 767px) {
  .info-menu .info-news {
    margin-top: 32px;
  }
}
.info-menu .info-news .news-detail {
  background: #fff;
  margin-bottom: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 20px;
  letter-spacing: 0.05em;
  font-size: 1.5rem;
}
@media only screen and (max-width: 767px) {
  .info-menu .info-news .news-detail {
    display: block;
    font-size: 1.3rem;
  }
}
.info-menu .info-news .news-detail .news-detail__term {
  padding-right: 30px;
  font-family: "EB Garamond", serif;
}
.info-menu .info-news .news-detail .news-detail__desc p + p {
  margin-top: 0.5em;
}
.info-menu .info-news .news-detail .news-detail__desc a {
  text-decoration: underline;
  color: #333;
}
.info-menu .info-news .news-pick {
  color: #93284c;
  border: solid 1px #93284c;
  font-size: 1.4rem;
  padding: 1em;
  margin-bottom: 32px;
  text-align: center;
}
.info-menu .info-news .news-pick > p {
  display: inline-block;
}
@media only screen and (max-width: 767px) {
  .info-menu .info-news .news-pick {
    font-size: 1.2rem;
    margin-bottom: 16px;
  }
  .info-menu .info-news .news-pick > p {
    text-align: left;
  }
}
.info-menu .info-news .bnr {
  max-width: 720px;
  margin: 0 auto 48px;
}
@media only screen and (max-width: 767px) {
  .info-menu .info-news .bnr {
    max-width: 416px;
    margin-bottom: 24px;
  }
}
.info-menu .info-news .bnr_notes {
  margin-top: 8px;
}

/* ------------------------------------------------------------
    content-menu
------------------------------------------------------------ */
.content-menu .menu-content-area {
  padding-bottom: 80px;
}
.content-menu .content-menu__page-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.content-menu .content-menu__page-menu .page-menu-box {
  width: 33.33%;
  max-width: 400px;
  padding: 0 18px;
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .page-menu-box {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
}
.content-menu .content-menu__page-menu .page-menu-box--top {
  width: 100%;
  max-width: 1200px;
  padding: 0 24px;
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .page-menu-box--top {
    padding: 0;
  }
}
.content-menu .content-menu__page-menu .page-menu-box--top .content-menu__page-link {
  width: 11rem;
  border-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .page-menu-box--top .content-menu__page-link {
    width: 100%;
    max-width: 100%;
  }
}
.content-menu .content-menu__page-menu .content-menu__page-link,
.content-menu .content-menu__page-menu .content-menu__page-title {
  position: relative;
  display: block;
  padding: 18px 30px 18px 8px;
}
.content-menu .content-menu__page-menu .content-menu__page-link::after,
.content-menu .content-menu__page-menu .content-menu__page-title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__page-link::after,
  .content-menu .content-menu__page-menu .content-menu__page-title::after {
    background-image: url(../img/common/i-arr.svg);
  }
}
@media only screen and (min-width: 768px) {
  .content-menu .content-menu__page-menu .content-menu__page-list-item + .content-menu__page-list-item {
    margin-top: 14px;
  }
}
.content-menu .content-menu__page-menu .content-menu__page-link {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 768px) {
  .content-menu .content-menu__page-menu .content-menu__page-link {
    border-bottom: solid 1px #aaa;
    padding: 14px 30px 14px 8px;
  }
  .content-menu .content-menu__page-menu .content-menu__page-link::after {
    background: url(../img/common/i-arr.svg) no-repeat center/contain;
  }
}
.content-menu .content-menu__page-menu .content-menu__page-title.no-link-toggle {
  opacity: 0.4;
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__page-title::after {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-transform: translateY(-50%) rotate(90deg);
            transform: translateY(-50%) rotate(90deg);
  }
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__page-title + .content-menu__page-menu-cont {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.3s;
    transition: max-height 0.3s;
  }
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__page-title.is-active::after {
    -webkit-transform: translateY(-50%) rotate(-90deg);
            transform: translateY(-50%) rotate(-90deg);
  }
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__page-title.is-active + .content-menu__page-menu-cont {
    max-height: 300px;
  }
}
.content-menu .content-menu__page-menu .content-menu__page-link-ttl,
.content-menu .content-menu__page-menu .content-menu__page-title-ttl,
.content-menu .content-menu__page-menu .content-menu__sub-link-ttl {
  position: relative;
  color: #333;
  font-size: 1.6rem;
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__page-link-ttl,
  .content-menu .content-menu__page-menu .content-menu__page-title-ttl,
  .content-menu .content-menu__page-menu .content-menu__sub-link-ttl {
    font-size: 1.6rem;
  }
}
.content-menu .content-menu__page-menu .content-menu__page-link-ttl .c-badge--new,
.content-menu .content-menu__page-menu .content-menu__page-title-ttl .c-badge--new,
.content-menu .content-menu__page-menu .content-menu__sub-link-ttl .c-badge--new {
  display: inline-block;
  padding-right: 12px;
}
.content-menu .content-menu__page-menu .content-menu__page-link-txt,
.content-menu .content-menu__page-menu .content-menu__page-title-txt,
.content-menu .content-menu__page-menu .content-menu__sub-link-txt {
  font-family: "EB Garamond", serif;
  display: block;
  color: #777;
  letter-spacing: 0;
  font-size: 1rem;
  margin: 3px 0;
}
.content-menu .content-menu__page-menu .content-menu__page-list > li:nth-child(even) {
  margin-top: 24px;
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__page-list > li:nth-child(even) {
    margin-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__sub-list {
    margin-bottom: 24px;
  }
}
.content-menu .content-menu__page-menu .content-menu__sub-list-item {
  background: #fff;
  margin-bottom: 4px;
  margin-left: 30px;
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__sub-list-item {
    margin-left: 10vw;
  }
}
.content-menu .content-menu__page-menu .content-menu__sub-list-item:last-child {
  margin-bottom: 0;
}
.content-menu .content-menu__page-menu .content-menu__sub-list-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  padding: 12px 10px 12px 12px;
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__sub-list-item a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 14px 10px 14px 12px;
  }
}
.content-menu .content-menu__page-menu .content-menu__sub-list-item a .content-menu__sub-link-ttl {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1.4rem;
}
.content-menu .content-menu__page-menu .content-menu__sub-list-item a .content-menu__sub-link-txt {
  width: 95px;
  margin-right: 10px;
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__sub-list-item a .content-menu__sub-link-txt {
    width: 100px;
    margin-top: 2px;
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__page-list-item {
    border-bottom: solid 1px #aaa;
  }
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__page-list-item.member {
    border-bottom: none;
  }
}
.content-menu .content-menu__page-menu .content-menu__page-list-item.member .content-menu__page-link {
  background-color: rgba(164, 139, 82, 0.1);
  border-top: solid 1px #aaa;
  border-bottom: solid 1px #aaa;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 24px 0 8px;
}
.content-menu .content-menu__page-menu .content-menu__page-list-item.member .content-menu__page-link:hover, .content-menu .content-menu__page-menu .content-menu__page-list-item.member .content-menu__page-link:focus {
  background-color: rgba(164, 139, 82, 0.2);
}
.content-menu .content-menu__page-menu .content-menu__page-list-item.member .content-menu__page-link::after {
  background-image: url(../img/common/i-login.svg);
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__page-list-item.member .content-menu__page-link {
    margin: 56px 0 24px;
    margin: 56px 0 8px;
  }
}
.content-menu .content-menu__page-menu .content-menu__page-list-item.member .content-menu__notes {
  font-size: clamp(1.1rem, 1.0628571429rem + 0.0952380952vw, 1.2rem);
  line-height: 1.4;
  color: #8F7946;
}
.content-menu .content-menu__page-menu .content-menu__sub-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px 10px;
  margin-top: 28px;
}
@media only screen and (max-width: 767px) {
  .content-menu .content-menu__page-menu .content-menu__sub-menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.content-menu .content-menu__page-menu .content-menu__cv-menu {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.content-menu .content-menu__page-menu .content-menu__cv-menu .c-page-menu-btn {
  padding: 15px 7px;
  font-size: 1.6rem;
}
.content-menu .content-menu__page-menu .content-menu__cv-menu .c-page-menu-btn:not(.c-page-menu-btn--full) {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}
@media only screen and (min-width: 1200px) {
  .content-menu .content-menu__page-menu .content-menu__cv-menu .c-page-menu-btn:not(.c-page-menu-btn--full) {
    -ms-flex-preferred-size: calc((100% - 10px) / 2);
        flex-basis: calc((100% - 10px) / 2);
  }
}
.content-menu .c-badge--new::after {
  width: 8px;
  height: 8px;
}

/* ------------------------------------------------------------
    fix-cv-btn
------------------------------------------------------------ */
.fix-cv-btn {
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 100;
}
@media only screen and (max-width: 767px) {
  .fix-cv-btn {
    display: none !important;
  }
}
.fix-cv-btn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  letter-spacing: 0.05em;
  font-size: 1.5rem;
  line-height: 1;
  background-color: #A48B52;
  color: #fff;
  padding: 0 32px;
  min-width: 230px;
  height: 42px;
  border-radius: 21px;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.fix-cv-btn a:hover, .fix-cv-btn a:focus {
  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  color: #fff;
}
.fix-cv-btn a small {
  font-size: 75%;
}

/* ------------------------------------------------------------
    cv-menu
------------------------------------------------------------ */
.cv-menu .menu__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.cv-menu .menu-content-area {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.cv-menu .menu-content-area .c-block--90 {
  max-width: 1000px;
}
.cv-menu .menu-btn-area {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin: 0;
  gap: 16px;
}
.cv-menu .menu-btn-area__item .txt {
  font-size: 1.4rem;
  line-height: 1.6;
  margin-bottom: 1.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.cv-menu .menu-btn-area__item .txt .clr {
  color: #8F7946;
}

/* ------------------------------------------------------------
    sp-nav-bar
------------------------------------------------------------ */
.sp-nav-bar {
  position: fixed;
  bottom: -1px;
  left: 0;
  width: 100%;
  border-radius: 10px 10px 0 0;
  background-color: #fff;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  padding: 4px 0 22px 0;
  height: 70px;
  z-index: 200;
}
@media only screen and (min-width: 768px) {
  .sp-nav-bar {
    display: none;
  }
}
.sp-nav-bar__item {
  width: 20%;
}
.sp-nav-bar__item--menu-btn {
  position: relative;
  top: -14px;
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  padding: 4px;
  background: #fff;
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
}
.sp-nav-bar__item--menu-btn .sp-nav-bar__circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: -webkit-gradient(linear, left top, right top, from(#C9A227), to(#A47E1B));
  background: linear-gradient(to right, #C9A227, #A47E1B);
}
.sp-nav-bar__item--menu-btn .sp-nav-bar__circle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  content: "MENU";
  font-size: 1.1rem;
  font-family: "EB Garamond", serif;
  color: #fff;
  letter-spacing: 0.04em;
}
.sp-nav-bar__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  height: 100%;
}
.sp-nav-bar__item a .sp-nav-bar__item-in {
  height: 46px;
}
.sp-nav-bar__item a .sp-nav-bar__item-in .sp-nav-bar__icon {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0 auto 4px;
}
.sp-nav-bar__item a .sp-nav-bar__item-in p {
  font-size: 9px;
  letter-spacing: -0.02em;
  color: #595757;
  white-space: nowrap;
  line-height: 1;
}
.sp-nav-bar .c-badge--new::after {
  top: 4px;
  right: -2px;
}

/* ------------------------------------------------------------
    sp-content
------------------------------------------------------------ */
.sp-content {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 600;
  opacity: 0;
  pointer-events: none;
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
}
.sp-content.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.sp-content.is-visible .sp-content__btn-box {
  bottom: -1px;
}

.sp-content__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.sp-content__btn-box {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 8px 8px 42px 8px;
  border-radius: 8px 8px 0 0;
  letter-spacing: 0.05em;
  -webkit-transition: bottom 0.3s;
  transition: bottom 0.3s;
}
.sp-content__btn-box li {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}
.sp-content__btn-box li:last-child {
  margin-bottom: 0;
}
.sp-content__btn-box li .tel__tel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  margin-bottom: 2px;
}
.sp-content__btn-box li .tel__tel span {
  font-size: 2.2rem;
}
.sp-content__btn-box li .tel__tel img {
  width: 26px;
  margin-right: 4px;
}
.sp-content__btn-box::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 60px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
}
.sp-content__btn-box .kkc {
  margin-top: 6px;
  font-size: 1.1rem;
  line-height: 1.4;
}
.sp-content__btn-box .time__notes {
  margin-top: 12px;
  font-size: 1.1rem;
  line-height: 1.4;
  color: #333;
  margin-bottom: 0.8em;
}
.sp-content__btn-box .name {
  font-size: 1.3rem;
  line-height: 1.5;
  padding-top: 15px;
  margin-bottom: 10px;
}
.sp-content__btn-box .time {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-top: 10px;
}

/* .c-sp-cta-btn__notes / __in の指定は、このファイル冒頭の
   「GUIDELINE 共通パーツ」の .c-sp-cta-btn に統合しました */
body.is-hidden,
html.is-hidden {
  overflow: hidden;
}

/* ------------------------------------------------------------
    sp alert
------------------------------------------------------------ */
.sp-alert {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  font-family: "TsukuAOldMinPr6N-M", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  height: 100vh;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  visibility: hidden;
  width: 100vw;
  z-index: 99999;
  /* &.landscape {
        display: flex;
        opacity: 1;
        visibility: visible;
    } */
}

.sp-alert__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  pointer-events: none;
  position: relative;
  z-index: 2;
}

.sp-alert__msg {
  color: #fff;
  font-size: 2.1vw;
  letter-spacing: 0.15em;
  line-height: 1;
  margin-top: 6.5vh;
}

.sp-alert .svg-icon {
  margin: 0 auto;
  width: 23%;
  min-width: 81.5px;
}

.sp-alert .svg-icon__path {
  fill: none;
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 17;
}

/* ------------------------------------------------------------
    link
------------------------------------------------------------ */
.no-link {
  pointer-events: none !important;
  opacity: 0.4;
}

/* ------------------------------------------------------------
    notes_last
------------------------------------------------------------ */
.s-notes-last {
  color: #666666;
  position: relative;
  z-index: 3;
}

.s-notes-last .c-txt--notes {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 32px;
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .s-notes-last .c-txt--notes {
    padding-top: 48px;
  }
}

/* ------------------------------------------------------------
    footer
------------------------------------------------------------ */
.footer-wrapper {
  position: relative;
  z-index: 3;
}

/* contact
---------------------------------------- */
footer {
  background-color: #444444;
  letter-spacing: 0.07em;
  line-height: 1.5;
  overflow: hidden;
}

.footer__contact {
  padding: 40px 0;
  color: #fff;
}
.footer__contact:hover, .footer__contact:focus {
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .footer__contact {
    padding: 48px 0;
  }
}
@media only screen and (min-width: 1200px) {
  .footer__contact__in {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 64px;
  }
}
.footer__contact__info {
  text-align: center;
}
@media only screen and (min-width: 1200px) {
  .footer__contact__info {
    text-align: left;
  }
}
@media only screen and (min-width: 1200px) {
  .footer__contact__info__cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 15px;
  }
}
.footer__contact__info__cont__tel {
  margin: 10px 0;
}
@media only screen and (min-width: 1200px) {
  .footer__contact__info__cont__tel {
    margin: 0 20px 0 0;
  }
}
.footer__contact__info__cont__tel a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  font-size: 2.8rem;
  color: #fff;
  border: solid 1px #fff;
  padding: 8px;
}
.footer__contact__info__cont__tel a:hover, .footer__contact__info__cont__tel a:focus {
  color: #fff;
}
@media only screen and (min-width: 1200px) {
  .footer__contact__info__cont__tel a {
    margin: 0;
    width: 324px;
  }
}
.footer__contact__info__cont__tel__icn {
  width: 34px;
  margin-right: 8px;
}
.footer__contact__info__cont__time {
  font-size: clamp(1.3rem, 1.2628571429rem + 0.0952380952vw, 1.4rem);
}
.footer__contact__info__cont__time__in {
  margin: 0 4px;
}
@media only screen and (min-width: 1200px) {
  .footer__contact__info__cont__time__in {
    margin: 0 16px 0 0;
  }
}
.footer__contact__info__cont__time .c-txt--notes {
  color: #fff;
}
.footer__contact__info__cont__time .kkc {
  display: inline-block;
  margin-top: 8px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  font-size: clamp(1.2rem, 1.1628571429rem + 0.0952380952vw, 1.3rem);
  color: #8F7946;
}
.footer__contact__staff {
  margin: 40px auto 0;
  max-width: 190px;
}
.footer__contact__staff__logo {
  display: -ms-grid;
  display: grid;
  gap: 24px;
}
.footer__contact__staff__logo__item__hd {
  font-size: clamp(1rem, 0.9628571429rem + 0.0952380952vw, 1.1rem);
  line-height: 1.3;
  margin-bottom: 8px;
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (min-width: 1200px) {
  .footer__contact__staff {
    margin: 0;
  }
}

.footer__cpbnr {
  padding: 32px 0;
}
@media only screen and (min-width: 768px) {
  .footer__cpbnr {
    padding: 40px 0;
  }
}
.footer__cpbnr__bnr {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
}
.footer__cpbnr__bnr__item {
  display: block;
}
.footer__cpbnr__bnr__item + .footer__cpbnr__bnr__item {
  margin-top: 16px;
}
@media only screen and (min-width: 768px) {
  .footer__cpbnr__bnr {
    max-width: 800px;
  }
}
.footer__cpbnr #geo--cpsys--banner .geo--cpsys--link + .geo--cpsys--link span {
  margin-top: 16px;
}

.footer__geo {
  padding: 12px 0;
  border: solid rgba(255, 255, 255, 0.24);
  border-width: 1px 0;
}
.footer__geo__list__item {
  border-bottom: solid 1px rgba(255, 255, 255, 0.16);
}
.footer__geo__list__item:last-child {
  border-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .footer__geo__list__item {
    border: none;
    display: inline-block;
    margin-right: 24px;
  }
  .footer__geo__list__item:last-child {
    margin-right: 0;
  }
}
.footer__geo__list__item a {
  display: block;
  padding: 12px 0;
  font-size: 1.2rem;
  color: #fff;
}
.footer__geo__list__item a:hover, .footer__geo__list__item a:focus {
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .footer__geo__list__item a {
    display: inline-block;
    padding: 5px 5px 5px 0;
    font-size: 1.3rem;
  }
}
.footer__geo__list__item a span {
  display: inline-block;
  background: url("../img/common/i-arr-w.svg") no-repeat left center;
  background-size: 6px;
  padding-left: 13px;
}
@media only screen and (min-width: 768px) {
  .footer__geo__list__item a span {
    background-size: 7px;
  }
}

.footer__copy small {
  display: block;
  padding: 16px 0 96px;
  font-family: "EB Garamond", serif;
  font-size: 1.2rem;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .footer__copy small {
    padding: 24px 0;
  }
}

/* ------------------------------------------------------------
    page top
------------------------------------------------------------ */
.footer__page-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  background: #6A6A6A;
  height: 44px;
  font-family: "EB Garamond", serif;
  color: #fff;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.footer__page-top:hover, .footer__page-top:focus {
  background: rgba(106, 106, 106, 0.9);
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .footer__page-top {
    height: 40px;
    font-size: 1.4rem;
  }
}
.footer__page-top__icn {
  margin-right: 12px;
  width: 16px;
}

/* ------------------------------------------------------------
    main
------------------------------------------------------------ */
main {
  display: block;
}

.l-contents {
  width: 100%;
}

/* ------------------------------------------------------------
    TTL
------------------------------------------------------------ */
.p-pagettl {
  height: clamp(200px, 179.2px + 5.3333333333vw, 256px);
  padding: 0 clamp(20px, 12.5714285714px + 1.9047619048vw, 40px);
  display: -ms-grid;
  display: grid;
  place-content: center;
  gap: clamp(8px, 6.5142857143px + 0.380952381vw, 12px);
  padding-top: 88px;
  text-align: center;
}
.p-pagettl .p-pagettl__label-en {
  font-size: clamp(2.8rem, 2.3542857143rem + 1.1428571429vw, 4rem);
  font-family: "TsukuAOldMinPr6N-L", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.1em;
}
.p-pagettl .p-pagettl__label-ja {
  font-size: clamp(1.4rem, 1.2514285714rem + 0.380952381vw, 1.8rem);
  font-family: "TsukuAOldMinPr6N-M", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  line-height: 1;
  letter-spacing: 0.08em;
}

/* ページタイトル直下の大きな写真（全ページ共通のページ冒頭パーツ）
   デザイン実寸：SP 768×480 / PC 1440×520

  ・画像は「画面に貼りつけたまま」にして、この枠が窓のように通り過ぎていく見せ方。
    仕組みは .c-fixbg と同じ（画像を position: fixed にして、窓側を clip-path で切り抜く）。
    高さが1画面ぶんではないので .c-fixbg とは別部品にしている。
  ・画面に貼りつける画像の高さは「ページタイトル欄＋この枠」ぶん。
    スクロールして窓の上端が画面の外に出ても画像が途切れないようにするため。
    書き出し画像もこの高さで用意している（例：ttl-access--pc.webp ＝ 1440×776相当）。
  ・画像は左右中央・上下は下に揃える（object-position: center bottom）。
  ・【注意】この要素や親要素に transform / filter / will-change を付けると
    固定表示が崩れる（中の position: fixed が効かなくなる）。
  ・キャプションも __media の中に入れること。外に置くと画像だけが画面に貼りつき、
    文字だけスクロールしていくのでズレて見える。

  使い方：
  <div class="p-pagettl-image">
    <div class="p-pagettl-image__media">
      <picture class="js-img-switch">
        <source data-media="tabpc" srcset="○○--pc.webp">
        <img src="○○--sp.webp" alt="">
      </picture>
      <p class="c-cap--w-sh">image</p>
    </div>
  </div>
------------------------------------------------------------ */
.p-pagettl-image {
  /* 枠（窓）の高さ。SPは画像の比率、PCは固定値 */
  --pagettl-image-h: 62.5vw; /* 768 : 480 */
  /* ▼ 表示アニメの調整（下の &__media 内で使用） ───────── */
  --pagettl-image-zoom: 1.08; /* 表示前の画像の大きさ（1.08＝8%大きい） */
  --pagettl-image-dur: 1.2s; /* 等倍に戻るまでの時間 */
  --pagettl-image-cap-dur: 1s; /* キャプションがフェードインする時間 */
  /* ▲ ────────────────────────── */
  position: relative;
  width: 100%;
  height: var(--pagettl-image-h);
  /* 窓の形に切り抜く。中の画像は position: fixed で画面に貼りつく。
     ※iOS Safariで滑らかに動く組み合わせ（.c-fixbg と同じ） */
  clip-path: inset(0); /* 未対応ブラウザ向けの一般形 */
  clip-path: border-box; /* Safariが単純な矩形クリップとして高速処理できる指定 */
  background-color: #F5F5F5;
}
@media only screen and (min-width: 768px) {
  .p-pagettl-image {
    --pagettl-image-h: 520px;
  }
}
.p-pagettl-image__media {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* ページタイトル欄のぶんも足した高さ（上のコメント参照） */
  height: calc(clamp(200px, 179.2px + 5.3333333333vw, 256px) + var(--pagettl-image-h));
  overflow: hidden;
  pointer-events: none; /* 窓の外のクリックを邪魔しない */
  /* PC/SP出し分けで <picture> を使う場合の受け皿 */
}
.p-pagettl-image__media > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.p-pagettl-image__media > img,
.p-pagettl-image__media > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center bottom;
     object-position: center bottom;
  vertical-align: bottom;
}
.p-pagettl-image__media {
  /* 表示アニメ：やや大きい状態＋透明 → 等倍＆不透明へ
     ・ページの一番上にあるので、スクロールではなく
       「ローディング画面が消え終わったら」を合図に動かす（body.b_loading_end）
     ・動かすのは中の画像だけ。枠や親に transform を付けると固定表示が崩れる */
}
.p-pagettl-image__media > picture,
.p-pagettl-image__media > img {
  opacity: 0;
  -webkit-transform: scale(var(--pagettl-image-zoom));
          transform: scale(var(--pagettl-image-zoom));
  -webkit-transition: opacity var(--pagettl-image-dur) ease, -webkit-transform var(--pagettl-image-dur) ease;
  transition: opacity var(--pagettl-image-dur) ease, -webkit-transform var(--pagettl-image-dur) ease;
  transition: opacity var(--pagettl-image-dur) ease, transform var(--pagettl-image-dur) ease;
  transition: opacity var(--pagettl-image-dur) ease, transform var(--pagettl-image-dur) ease, -webkit-transform var(--pagettl-image-dur) ease;
}
body.b_loading_end .p-pagettl-image__media > picture,
body.b_loading_end .p-pagettl-image__media > img {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.p-pagettl-image__media {
  /* キャプションは画像が出きってからフェードイン（画像と同じ合図＋待ち時間） */
}
.p-pagettl-image__media > .c-cap,
.p-pagettl-image__media > .c-cap--w,
.p-pagettl-image__media > .c-cap--w-sh {
  opacity: 0;
  -webkit-transition: opacity var(--pagettl-image-cap-dur) ease calc(var(--pagettl-image-dur) - var(--pagettl-image-cap-dur));
  transition: opacity var(--pagettl-image-cap-dur) ease calc(var(--pagettl-image-dur) - var(--pagettl-image-cap-dur));
}
body.b_loading_end .p-pagettl-image__media > .c-cap,
body.b_loading_end .p-pagettl-image__media > .c-cap--w,
body.b_loading_end .p-pagettl-image__media > .c-cap--w-sh {
  opacity: 1;
}
/*# sourceMappingURL=global.css.map */