@charset "UTF-8";
/* ===========================================================
   template-13-split — PC（769px以上）
   数値はすべて参考サイトの実測値。根拠は同フォルダの README.md を参照
   =========================================================== */

:root {
  /* ---- 色（案件で差し替える。既定値は実測hexそのまま） ---- */
  --c-main:        #126a74;   /* 主色。面・文字・枠線・ボタン */
  --c-sub:         #2da8b5;   /* 副色。細線・小枠・日付 */
  --c-panel:       #2da8b5;   /* ABOUTの大面・pagetop hover */
  --c-tint:        #eaf8fa;   /* 淡地（寒色寄り） */
  --c-tint-warm:   #f4f8f9;   /* 淡地（暖色寄り）※上と1文字違い。使い分けている */
  --c-shadow:      #cfe9ec;   /* 影の色（ぼかし0） */
  --c-hairline:    #b9dde1;   /* 枠線 */
  --c-rule:        #e9e9e9;   /* 罫線 */
  --c-text:        #222222;   /* 本文 */
  --c-heading:     #142d3c;   /* 見出し（本文よりわずかに茶色い） */
  --c-footer-bg:   #0f545c;   /* フッター左24%の濃い帯 */
  --c-footer-rule: #5aa9b1;   /* フッター内の縦罫 */
  --c-navline:     #e3f2f4;   /* 固定ナビの下線 */
  --c-attention:   #c7674d;   /* 必須バッジ・エラー専用。デザイン面には出さない */

  /* ---- 書体 ---- */
  --font-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-en: 'Josefin Sans', 'Futura', 'Century Gothic', sans-serif;
  --font-num: 'Oswald', 'Roboto Condensed', sans-serif;

  /* ---- 寸法 ---- */
  --container: 1200px;    /* コンテナ幅。固定px（15箇所で使用） */
  --measure: 600px;       /* 本文の折り返し上限 */

  /* ---- FVの分割（§4-1）---- */
  --mv-col: 72%;          /* 写真カラムの幅 */
  --mv-h: 880px;          /* FVの高さ */
  --mv-gutter: 60px;      /* 写真の右に残す白 */
  --mv-copy-offset: 356px;/* 写真カラム左端から、さらに左へ何px出すか */
  --mv-split: 295px;      /* 和文コピーの色替え位置（＝継ぎ目まで。ビューポート非依存） */
  --mv-split-en: 294px;   /* 欧文の色替え位置 */
  --mv-split-h: 30px;     /* 和文クリップの高さ（1行ぶん） */
  --mv-split-en-h: 200px; /* 欧文クリップの高さ（2行ぶん = 85 × 1.2 × 2） */

  /* ---- 動き（§7）---- */
  --ease-mask: .25s ease-in-out .2s;  /* 緑マスクが右へ抜ける */
  --dur-hover: .3s;
}

html, body { width: 100%; }
#wrapper { width: auto; margin: 0 auto; }

@media screen and (min-width: 769px) {
  .sp { display: none; }
}
@media screen and (min-width: 768px) {
  a[href^="tel:"] { pointer-events: none; }
}

/* -----------------------------------------------------------
   ボタン（全セクション共通）
   ★高さは height ではなく line-height。枠線は外側の .btn 側
   ----------------------------------------------------------- */
.btn {
  display: block;
  line-height: 1.0;
  border: 1px solid var(--c-main);
}
.btn a {
  background: #fff;
  color: var(--c-main);
  display: block;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
  line-height: 56px;
  outline: none;
  margin: 0 auto;
  transition: all var(--dur-hover);
  position: relative;
  z-index: 1;
}
.btn a:hover { background: var(--c-main); color: #fff; text-decoration: none; }
.btn a::before {
  content: "";
  position: absolute;
  top: 43%;
  left: -22px;          /* ★枠の外へ22pxはみ出す */
  width: 49px;
  height: 6px;
  background: url(../images/icon-arrow.svg) no-repeat;
  z-index: 999;
}

/* 小さいMOREボタン（お知らせ／ギャラリー） */
.more {
  width: 100px;
  display: block;
  margin: 30px auto 0;
  line-height: 1.0;
  border: 1px solid var(--c-sub);
}
.more a {
  display: block;
  font-family: var(--font-en);
  font-size: 11px;
  font-size: 1.1rem;
  text-align: center;
  line-height: 28px;
  outline: none;
  margin: 0 auto;
  padding-top: 3px;
  transition: all var(--dur-hover);
  position: relative;
}
.more a::before {   /* ★枠の外へ横線を22px突き出す。サイト全体の統一言語 */
  content: "";
  position: absolute;
  top: 15px; left: -11px;
  width: 22px; height: 1px;
  background: var(--c-sub);
}

/* ★リンク内の画像は全部 hover で半透明（元サイトの site-wide ルール） */
a img { transition: opacity var(--dur-hover); }
a:hover img { opacity: 0.5; }

/* 英字見出し */
.ttl-en {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.05em;   /* ★欧文は0.05em。日本語の0.1emと別 */
}

/* セクション共通の日本語小見出し（左に横線） */
.ttl-ja {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: url(../images/icon-line.svg) no-repeat left center;
  margin-bottom: 40px;
  padding: 18px 0 18px 40px;
}
/* 中央寄せの小見出し（★実績とCONTACTでは線アイコンを付けない。元サイトと同じ） */
.ttl-ja-c {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}
.lead-ja {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--c-main);
  line-height: 1.6;
  margin-bottom: 40px;
}

/* -----------------------------------------------------------
   header / nav
   ----------------------------------------------------------- */
#top-head { width: 100%; clear: both; margin: 0 auto; padding: 0; line-height: 1; z-index: 999; }
.top-head-inner { position: relative; z-index: 999; }
#logo-head { position: absolute; top: 60px; left: 48px; }
#logo-head .logo { width: 199px; }

#global-nav { position: relative; z-index: 999; }
#global-nav .nav-wrapper { position: absolute; top: 80px; right: 130px; }
#global-nav .home img { display: none; }
#global-nav .menu { width: 100%; text-align: center; display: flex; justify-content: space-between; }
#global-nav .menu > li { display: inline-block; margin-left: 20px; transition: all var(--dur-hover); }
#global-nav .menu > li a {
  color: #fff;
  display: block;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.1em;
  font-size: 16px;
  font-size: 1.6rem;
  position: relative;
}
#global-nav .menu > li a:hover { text-decoration: none; }
#global-nav .menu > li a span { display: block; font-family: var(--font-en); font-size: 10px; font-size: 1rem; }
#global-nav .menu > li a::after {   /* 下線は右→左に origin を入れ替える */
  position: absolute; bottom: -4px; left: 0;
  content: ''; width: 100%; height: 1px; background: #fff;
  transform: scale(0, 1); transform-origin: right top;
  transition: transform var(--dur-hover);
}
#global-nav .menu > li a:hover::after { transform-origin: left top; transform: scale(1, 1); }
#global-nav .menu > li.opt { display: none; }   /* 固定時だけ出す項目 */

@media screen and (min-width: 1379px) {
  #global-nav .menu > li { margin-left: 40px; }   /* ★唯一の上側ブレークポイント */
}
@media screen and (min-width: 769px) {
  #global-nav { display: block !important; }
  #global-nav.fixed {
    position: fixed; top: 0; height: auto; width: 100%; z-index: 9999;
    border-bottom: 1px solid var(--c-navline);
  }
  #global-nav.fixed .nav-wrapper { position: static; }
  #global-nav.fixed .home img { width: 150px; position: absolute; top: 15px; left: 3%; display: block; }
  #global-nav.fixed .menu {
    width: 100%; padding: 0 3% 0 170px;
    justify-content: flex-end; background: #fff;
  }
  #global-nav.fixed .menu > li a { color: var(--c-main); font-size: 14px; font-size: 1.4rem; padding: 22px 0; }
  #global-nav.fixed .menu > li a span { display: none; }   /* 英字ラベルを消す */
  #global-nav.fixed .menu > li a::after { bottom: -1px; background: var(--c-main); }
  #global-nav.fixed .menu > li.opt { display: block; }      /* 隠していた項目を出す */
}

#sub-nav { position: relative; }
#sub-nav ul { position: absolute; top: 20px; right: 85px; z-index: 9999; display: flex; justify-content: space-between; }
#sub-nav li { margin-left: 30px; padding-top: 14px; }
#sub-nav .head-cta { margin-left: 40px; padding: 0; }
#sub-nav .head-cta.is-second { margin-left: 10px; }
#sub-nav .head-cta a {
  font-weight: 700;
  font-size: 14px; font-size: 1.4rem;
  color: #fff; display: block;
  padding: 0.9em 1.4em 1em 3.5em;
  border: 2px solid #fff;
  transition: all var(--dur-hover);
  background: url(../images/icon-cart.svg) no-repeat 11% 50%;
}
#sub-nav .head-cta a:hover { text-decoration: none; background: url(../images/icon-cart.svg) no-repeat 11% 50% #222; }

/* -----------------------------------------------------------
   FV — 非対称スプリット＋文字色スイッチ（このテンプレの署名）
   ----------------------------------------------------------- */
#mv {
  width: var(--mv-col);
  height: var(--mv-h);
  position: relative;
  z-index: 1;
  float: right;              /* ★フロート。Flexに直すと .news の clear が効かなくなる */
}
#mv .mv-photo-wrap {
  position: absolute; top: 0; right: var(--mv-gutter);
  width: 100%; height: 100%; overflow: hidden;
}
#mv .mv-photo {
  background-size: cover;
  width: 100%; height: var(--mv-h);
}
/* ★継ぎ目までの距離 = --mv-copy-offset − --mv-gutter = 296px。
   両方とも写真カラムの左端からのオフセットなので、この296pxは
   ビューポート幅に依存しない定数になる。だから下のクリップ幅を固定pxで書ける */
#mv .mv-copy {
  position: absolute;
  top: 290px;
  left: calc(var(--mv-copy-offset) * -1);   /* = -356px（既定） */
}

/* 和文コピー：同じ文字列を2枚重ね、上の1枚だけをクリップして色を変える */
#mv .mv-lead { font-size: 24px; font-size: 2.4rem; letter-spacing: 0.1em; position: relative; }
#mv .mv-lead .layer-base,
#mv .mv-lead .layer-clip { position: absolute; left: 0; top: 0; margin: 0; padding: 0; color: #fff; }
#mv .mv-lead .layer-base span,
#mv .mv-lead .layer-clip span { font-weight: 700; }
#mv .mv-lead .layer-clip { width: var(--mv-split); height: var(--mv-split-h); overflow: hidden; }
#mv .mv-lead .layer-clip span { z-index: 1; position: absolute; width: 500px; color: var(--c-heading); }

/* 欧文ディスプレイ：同じ手を2行ぶんの窓で */
#mv .mv-display {
  color: var(--c-heading);
  font-size: 85px; font-size: 8.5rem;
  font-family: var(--font-en);
  line-height: 1.2;
  letter-spacing: 0.05em;
  position: relative;
  margin-top: 80px;
}
#mv .mv-display .layer-base,
#mv .mv-display .layer-clip { position: absolute; left: 0; top: 0; width: 1200px; margin: 0; padding: 0; color: #fff; }
#mv .mv-display .layer-base .t,
#mv .mv-display .layer-clip .t { font-weight: 700; }
#mv .mv-display .layer-base .t .regu,
#mv .mv-display .layer-clip .t .regu { font-weight: 400 !important; }   /* 語ごとに太さを変える */
#mv .mv-display .layer-clip { width: var(--mv-split-en); height: var(--mv-split-en-h); overflow: hidden; }
#mv .mv-display .layer-clip .t { z-index: 1; position: absolute; width: 1200px; color: var(--c-text); }

/* ★.mv-lead と .mv-display は子が全部 absolute なので高さ0。
   縦位置は top:290 → margin-top:80 → padding-top:250 の積み上げで作る */
#mv .mv-sub {
  font-size: 18px; font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding-top: 250px;
}

.scroll { position: relative; display: block; }
.scroll span { position: absolute; top: 400px; right: 24px; display: block; }

/* -----------------------------------------------------------
   お知らせバー（FVに50px食い込む）
   ----------------------------------------------------------- */
.news {
  clear: both;
  width: var(--container);
  margin: 0 auto;
  padding-bottom: 100px;
  top: -50px;
  position: relative;
  z-index: 999;
  display: flex;
}
.news .news-ttl { width: 260px; background: var(--c-main); text-align: center; padding: 42px 0 38px; }
.news .news-ttl h2 {
  color: #fff; font-family: var(--font-en);
  font-size: 20px; font-size: 2rem;
  letter-spacing: 0.1em;
}
.news .news-ttl .more a { background: var(--c-main); color: #fff; }
.news .news-ttl .more a:hover { background: #fff; color: var(--c-main); text-decoration: none; }
/* ★260 + 640 = 900。コンテナ1200pxの右に300pxの空きを意図的に残す */
.news .news-list { width: 640px; background: #fff; padding: 30px 48px 0; }
.news .news-list li { padding: 0.8em 0; }
.news .news-list li span { font-family: var(--font-en); padding-right: 2.4em; }
.news .news-list li a { color: var(--c-text); }
.news .news-list li a:hover { color: var(--c-main); }

/* -----------------------------------------------------------
   メッセージ
   ----------------------------------------------------------- */
#message {
  width: 100%; clear: both; display: flex; position: relative;
  background: url(../images/bgtxt.svg) no-repeat 100% 0;
}
.message-img {
  background: #000;
  width: 60%;
  margin-top: 50px;
  padding-top: 600px;      /* ★高さは padding で作る */
  position: relative; overflow: hidden; z-index: 2;
}
.message-img span {
  display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: url(../images/message.webp) 100% 50% no-repeat;
  background-size: cover;
}
.message-inner {
  width: 40%; z-index: 3; position: absolute;
  top: 180px; left: 55.8%;   /* ★写真に4.2%（約60px）重ねる */
}
.message-inner h2 {
  font-size: 28px; font-size: 2.8rem;
  font-weight: 500; letter-spacing: 0.1em; line-height: 1.8;
  margin-bottom: 2em;
}

/* -----------------------------------------------------------
   目的別メニュー
   ----------------------------------------------------------- */
#purpose {
  width: 100%; clear: both;
  background: var(--c-tint);
  padding: 240px 0 64px;
  margin-top: -164px;      /* ★上のセクションに食い込ませる */
  position: relative; z-index: 1;
}
#purpose ul { width: 880px; margin: 0 auto; font-size: 0; }   /* 880 = 420×2 + 10×4 */
#purpose li { width: 420px; display: inline-block; margin: 0 10px 20px; }
#purpose li a {
  border: 1px solid var(--c-sub);
  background: #fff;
  box-shadow: 5px 5px 0px 1px var(--c-shadow);   /* ★ぼかし0の版画的な影。ここだけの意匠 */
  padding: 30px 30px 30px 95px;
  color: var(--c-main);
  font-weight: 500;
  font-size: 16px; font-size: 1.6rem;
  letter-spacing: 0.1em;
  display: block;
  transition: all .2s;
}
#purpose li a:hover {
  text-decoration: none;
  transform: translateY(0.1875em);
  box-shadow: 2px 0 0 1px var(--c-shadow);
}
#purpose .p01 a { background: url(../images/icon-purpose-01.svg) no-repeat 12% 50% #fff; background-size: 30px; }
#purpose .p02 a { background: url(../images/icon-purpose-02.svg) no-repeat 12% 50% #fff; background-size: 32px; }
#purpose .p03 a { background: url(../images/icon-purpose-03.svg) no-repeat 12% 50% #fff; background-size: 32px; }
#purpose .p04 a { background: url(../images/icon-purpose-04.svg) no-repeat 12% 50% #fff; background-size: 32px; }

/* -----------------------------------------------------------
   スクロールで緑の幕が右へ抜ける（このサイト唯一のスクロール演出）
   ★初期状態は「幕が全部かかっている」。JSが .is-revealed を足して開く
   ----------------------------------------------------------- */
.mov { position: relative; }
.mov::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--c-main);
  z-index: 1;
}
.mov.is-revealed::before { width: 0; transition: all var(--ease-mask); }

/* 下から100px上げながらフェードイン（CONTACTの1箇所だけ） */
.inview-up { opacity: 0; transform: translate(0, 100px); transition: .5s; }
.inview-up.is-in { opacity: 1.0; transform: translate(0, 0); }

/* -----------------------------------------------------------
   特集A（写真右）／特集B（写真左）— 左右の鏡像
   ----------------------------------------------------------- */
#feature-a {
  width: 100%; clear: both; position: relative;
  background: url(../images/num-01.svg) no-repeat 4% 80px;
  padding: 160px 0 80px;
}
#feature-a::after {
  content: ""; position: absolute; top: 420px; right: 0;
  width: 280px; height: 280px; background: var(--c-tint); display: block; z-index: -1;
}
.feature-a-img {
  position: absolute; top: 160px; left: 60%; width: 40%;
  margin-left: -64px; z-index: 2; vertical-align: middle;
}
.feature-a-img img { width: 100%; }
.feature-a-txt { max-width: var(--container); margin: 0 auto; padding: 64px 10px; z-index: 3; position: relative; }
.feature-a-txt .ttl-en { font-size: 50px; font-size: 5rem; white-space: nowrap; line-height: 1.0; }
.feature-a-txt .txt { max-width: var(--measure); }
.feature-a-txt .btn { width: 360px; font-family: var(--font-en); margin-top: 40px; }
.feature-a-txt .btn a { padding-top: 5px; }

#feature-b {
  width: 100%; clear: both; position: relative;
  background: url(../images/num-02.svg) no-repeat 96% 50px;
  padding: 160px 0 120px;
}
#feature-b::after {
  content: ""; position: absolute; top: 420px; left: 0;
  width: 280px; height: 280px; background: var(--c-tint); display: block; z-index: -1;
}
.feature-b-img {
  position: absolute; top: 160px; right: 60%; width: 40%;
  margin-right: -64px; z-index: 2; vertical-align: middle;
}
.feature-b-img img { width: 100%; }
.feature-b-txt {
  max-width: var(--container); margin: 0 auto;
  padding: 64px 10px 0 580px;    /* ★写真を避ける逃げ幅 */
  z-index: 3; position: relative;
}
.feature-b-txt .ttl-en { font-size: 50px; font-size: 5rem; white-space: nowrap; line-height: 1.0; }
.feature-b-txt .txt { max-width: var(--measure); }
.feature-b-txt .btn { width: 360px; font-family: var(--font-en); margin-top: 40px; }
.feature-b-txt .btn a { padding-top: 5px; }

/* -----------------------------------------------------------
   実績カード（画面幅95%の帯＋角を三角で落とす）
   ----------------------------------------------------------- */
#works {
  width: 95%; margin: 0 auto;
  padding: 0 0 100px 0;
  background: var(--c-tint-warm);
  position: relative;
}
#works::before {
  content: ""; position: absolute; top: 0; left: 0;
  background: url(../images/shape-tri-l.svg) no-repeat; width: 150px; height: 148px;
}
#works::after {
  content: ""; position: absolute; bottom: 0; right: 0;
  background: url(../images/shape-tri-r.svg) no-repeat; width: 150px; height: 148px;
}
.works-inner { width: var(--container); margin: 0 auto; clear: both; text-align: center; }
.works-inner .ttl-en { font-size: 40px; font-size: 4rem; line-height: 1.0; position: relative; top: -16px; }
.works-inner .ttl-en span { font-weight: 400 !important; }
.works-inner ul { margin: 40px 0 80px; display: flex; justify-content: space-between; text-align: left; }
.works-inner li { width: 299px; }
.works-inner .w-img { position: relative; }
.works-inner .w-img img { width: 100%; height: 220px; object-fit: cover; }
.works-inner .w-place {   /* ★写真の下辺を-20pxでまたぐラベル */
  display: inline-block; background: #fff; color: var(--c-main);
  font-size: 12px; font-size: 1.2rem;
  padding: 0.4em 1.2em;
  position: absolute; bottom: -20px; left: 0;
}
.works-inner h3 {
  font-weight: 500; color: var(--c-heading); line-height: 1.4;
  margin-top: 32px; padding: 0 22px; position: relative;
}
.works-inner h3::before {
  content: ""; position: absolute; top: 12px; left: 0;
  width: 12px; height: 1px; background: var(--c-text);
}
.works-inner a:hover { text-decoration: none; }
.works-inner a:hover h3 { color: var(--c-main); opacity: 0.5; }
.works-inner a:hover img { opacity: 0.5; }
.works-inner .btn { width: 360px; font-family: var(--font-en); margin: 0 auto; }
.works-inner .btn a { padding-top: 5px; }

/* -----------------------------------------------------------
   サービス2枠（80px段違い）
   ----------------------------------------------------------- */
#service { width: 100%; clear: both; position: relative; padding: 0 0 110px 0; }
#service::after {
  content: ""; position: absolute; top: 260px; left: 0;
  width: 100%; height: 510px; background: var(--c-tint); display: block; z-index: -1;
}
.service-inner { width: var(--container); margin: 0 auto; clear: both; display: flex; justify-content: space-between; }
.service-box { width: 50%; position: relative; background: url(../images/num-03.svg) no-repeat 85% 0; }
.service-box.is-second {
  background: url(../images/num-04.svg) no-repeat 85% 0;
  margin-top: 80px;      /* ★段違い */
  margin-left: 100px;
}
.service-img { position: absolute; top: 60px; left: 0; width: 360px; z-index: 2; }
.service-img img { width: 100%; }
.service-txt { padding: 160px 0 0 260px; z-index: 3; position: relative; }
.service-txt .ttl-en { font-size: 40px; font-size: 4rem; line-height: 1.0; }
.service-txt .ttl-ja { margin-bottom: 32px; }
.service-txt .btn { width: 280px; font-family: var(--font-en); margin-top: 110px; }
.service-txt .btn a { padding-top: 5px; }
.service-box.is-second .service-txt .btn { margin-top: 70px; }

/* -----------------------------------------------------------
   帯写真 → ABOUT
   ----------------------------------------------------------- */
.band {
  width: 100%; clear: both; height: 400px;
  background: url(../images/band.webp) no-repeat top center;
  background-size: cover;
}

#about { width: 95%; margin: 0 auto; position: relative; padding: 0 0 100px 0; }
#about::before {   /* ★左65%だけ色面 */
  content: ""; position: absolute; top: 0; left: 0;
  width: 65%; height: 100%; background: var(--c-panel); display: block; z-index: -1;
}
#about::after {
  content: ""; position: absolute; top: 220px; right: 0;
  width: 400px; height: 380px; background: var(--c-tint); display: block; z-index: -1;
}
.about-inner { width: var(--container); margin: 0 auto; clear: both; }
.about-txt { width: 40%; padding: 0 0 0 10px; z-index: 3; position: relative; top: -25px; }
.about-txt .ttl-en { font-size: 50px; font-size: 5rem; white-space: nowrap; line-height: 1.0; }
.about-txt .lead-ja { color: #fff; margin-bottom: 48px; }
.about-txt .txt { color: #fff; line-height: 2.3; }
.about-img { position: absolute; top: 120px; left: 50%; width: 50%; z-index: 2; vertical-align: middle; }
.about-img img { width: 100%; max-width: 600px; }
.about-img .name-box {   /* ★写真の右下から外へ飛び出す。一番大胆な非対称 */
  background: #fff; width: 360px; padding: 24px 32px;
  position: relative; bottom: 100px; right: -40%;
  font-size: 16px; font-size: 1.6rem;
  display: block;
}
.about-img .name-box::before {
  content: ""; position: absolute; top: 40px; right: -20px;
  background: url(../images/kazari.svg) no-repeat; width: 122px; height: 132px;
}
.about-img .name-box .name { font-size: 22px; font-size: 2.2rem; font-weight: 500; line-height: 1.8; }
.about-img .name-box .name span { display: block; font-size: 10px; font-size: 1rem; font-family: var(--font-en); color: var(--c-sub); }

/* -----------------------------------------------------------
   ギャラリー
   ----------------------------------------------------------- */
#gallery { width: 100%; clear: both; padding: 140px 0 280px; }
.gallery-inner { width: var(--container); margin: 0 auto; clear: both; position: relative; }
.gallery-inner .ttl-en {
  font-size: 32px; font-size: 3.2rem;
  text-align: center;
  background: url(../images/icon-camera.svg) no-repeat top center;
  background-size: 34px;
  padding-top: 60px; margin-bottom: 40px;
  position: relative; line-height: 1.2;
}
.gallery-inner .ttl-en::before {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto;
  width: 210px; height: 1px; background: var(--c-text);
}
.gallery-inner .more { position: absolute; top: 40px; right: 0; margin: 0; }
.gallery-inner .more a { background: #fff; color: var(--c-main); }
.gallery-inner .more a:hover { background: var(--c-main); color: #fff; text-decoration: none; }
.gallery-grid { display: flex; justify-content: space-between; }
.gallery-grid li { width: 190px; }
.gallery-grid img { width: 100%; height: 190px; object-fit: cover; }

/* -----------------------------------------------------------
   CONTACT
   ----------------------------------------------------------- */
#contact {
  width: 100%; clear: both;
  background: url(../images/contact-bg.webp) no-repeat top center;
  background-size: cover;
  padding: 100px 0 160px;
  position: relative; text-align: center;
}
#contact::before {   /* ★セクションの上に突き出す縦矢印 */
  content: ""; position: absolute; top: -170px; left: 0; right: 0; margin: 0 auto;
  background: url(../images/icon-arrow-under.svg) no-repeat;
  width: 7px; height: 102px;
}
#contact .ttl-en { font-size: 60px; font-size: 6rem; line-height: 1.4; margin-top: -140px; }
#contact .ttl-ja-c { margin-bottom: 48px; }
#contact .txt {
  color: #fff; font-weight: 500;
  font-size: 16px; font-size: 1.6rem;
  margin-bottom: 48px;
}
.contact-inner { width: var(--container); margin: 0 auto; clear: both; display: flex; justify-content: space-between; text-align: center; }
.contact-inner .contact-box { width: 570px; background: rgba(255, 255, 255, 0.8); padding: 48px; }
.contact-inner .contact-box h3 {
  font-family: var(--font-en);
  font-size: 17px; font-size: 1.7rem;
  letter-spacing: 0.1em; margin-bottom: 32px;
}
.contact-inner .contact-box h3 span { padding: 0 1em; }
.tel-box .tel a {
  font-size: 40px; font-size: 4rem;
  font-family: var(--font-num);
  letter-spacing: 0.05em; line-height: 1.0;
  background: url(../images/icon-tel.svg) no-repeat 0 70%;
  background-size: 26px;
  padding-left: 40px; margin-right: 24px; margin-bottom: 24px;
  display: inline-block; color: var(--c-main);
}
.tel-box .time { line-height: 1.6; }
.tel-box .time span { font-size: 12px; font-size: 1.2rem; }
.mail-box .btn { width: 410px; margin: 0 auto; }
.mail-box .btn a {
  background: url(../images/icon-mail.svg) no-repeat 24% 50% var(--c-main);
  color: #fff;
  font-size: 20px; font-size: 2rem;
  line-height: 80px; padding-left: 48px;
}
.mail-box .btn a:hover {
  background: url(../images/icon-mail-g.svg) no-repeat 24% 50% var(--c-tint);
  color: var(--c-main);
}
.mail-box .btn a::before { position: inherit; }   /* ★矢印の突き出しを打ち消す */

/* -----------------------------------------------------------
   ACCESS
   ----------------------------------------------------------- */
#access { width: 100%; clear: both; display: flex; height: 560px; }
.gmap-inner { width: 50%; height: 560px; }
.gmap { width: 100%; height: 100%; overflow: hidden; }
.gmap img, .gmap iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.access-txt { width: 50%; height: 560px; background: var(--c-tint-warm); padding: 80px 100px 0; }
.access-txt .ttl-en { font-size: 40px; font-size: 4rem; line-height: 1.0; margin-bottom: 24px; }
.access-txt .ttl-en span {
  font-size: 16px; font-size: 1.6rem;
  font-weight: 700; letter-spacing: 0.1em;
  background: url(../images/icon-line.svg) no-repeat 0 50%;
  padding: 0 0 0 40px; margin-left: 20px; vertical-align: middle;
  font-family: var(--font-ja);
}
.access-txt dl { margin-top: 32px; }
.access-txt dl dt {
  font-size: 16px; font-size: 1.6rem;
  color: var(--c-main); margin-bottom: 10px; font-weight: 700;
  background: linear-gradient(transparent 50%, #fff 50%);   /* ★白のマーカー線。唯一のグラデ */
  display: inline-block; line-height: 2.0;
}
.access-txt dl dd { margin-bottom: 32px; }

/* -----------------------------------------------------------
   footer
   ----------------------------------------------------------- */
#pagetop { width: 100%; height: 80px; text-align: center; }
#pagetop a { display: block; background: #fff; height: 80px; text-align: center; padding-top: 36px; transition: all var(--dur-hover); }
#pagetop a span {   /* ★線2本を135度回して「^」を作る */
  display: block; width: 24px; height: 24px;
  border-bottom: 1px solid var(--c-main); border-left: 1px solid var(--c-main);
  transform: rotate(135deg); margin: 0 auto;
}
#pagetop a:hover { background: var(--c-panel); }
#pagetop a:hover span { border-bottom-color: #fff; border-left-color: #fff; }

footer { width: 100%; clear: both; background: var(--c-main); position: relative; padding: 100px 0; }
footer::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 24%; height: 100%; background: var(--c-footer-bg); display: block;
}
.f-inner { width: var(--container); margin: 0 auto; clear: both; position: relative; z-index: 1; display: flex; justify-content: space-between; }
.f-inner h1 { width: 320px; }
.f-info { color: #fff; margin-top: 24px; padding-left: 20px; border-left: 1px solid var(--c-footer-rule); }
.f-info h2 { font-family: var(--font-en); font-size: 18px; font-size: 1.8rem; font-weight: 700; margin-bottom: 24px; }
.f-info p { font-size: 13px; font-size: 1.3rem; line-height: 1.8; }
.f-info p span { font-size: 11px; font-size: 1.1rem; display: block; padding-top: 12px; }
.f-info a { color: #fff; text-decoration: underline; padding: 0 .4em; }
.f-info.f-a { width: 260px; padding-right: 3em; }
.f-info.f-b { width: 320px; }
.f-bnr { width: 270px; margin-top: 24px; }
.f-bnr li { margin-bottom: 20px; }
.f-sns { position: relative; z-index: 2; display: flex; justify-content: center; width: 100%; padding: 80px 0 0; }
.f-sns li { padding: 0 12px; }
.f-sns img { width: 30px; }
.f-copy {
  color: #fff; font-family: var(--font-en);
  font-size: 13px; font-size: 1.3rem;
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;    /* ★コピーライトだけ縦書き */
  position: absolute; top: 110px; left: 10px; z-index: 2;
}

.side-sns {
  height: 100vh; display: block; overflow: hidden;
  position: fixed; top: 50%; bottom: 50%; right: 10px;
  z-index: 10; margin-top: -20px;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-hover);
}
.side-sns.is-shown { opacity: 1; visibility: visible; }
.side-sns.is-hidden { display: none !important; }
.side-sns li { margin-bottom: 16px; }
.side-sns img { width: 24px; }

/* SPだけで使う要素をPCでは隠す */
.hamburger, #sp-global-nav { display: none; }

/* -----------------------------------------------------------
   アクセシビリティ（★元サイトには無い。テンプレでは必ず入れる）
   ★ .mov は初期状態が「幕あり」なので、幕を開いた状態を初期値にする。
     transition を切るだけだと緑一色で固まる
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mov::before { width: 0 !important; }
  .mov.is-revealed::before { transition: none !important; }
  .inview-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}