/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 27 2026 | 12:36:50 */
/* =========================================
   WordPress Gallery & Instagram Section CSS
   Scope: .lp-gallery-wrapper
   ========================================= */

/* ラッパー（スコープ化） */
.lp-gallery-wrapper {
  font-family: "Cormorant Garamond", "Shippori Mincho", "Yu Mincho", "YuMincho", serif;
  color: #5e4b40; /* 落ち着いたブラウン */
  background-color: #fcfcf8; /* ごく淡いベージュ（白に近い） */
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* 横スクロール対策 */
  line-height: 1.8;
  padding-bottom: 60px;
}

.lp-gallery-wrapper *,
.lp-gallery-wrapper *::before,
.lp-gallery-wrapper *::after {
  box-sizing: border-box;
}

@media (max-width: 767px) {
	.lp-gallery-wrapper .lp-hero-container	{
		margin-bottom: 200px;
	}
}

/* --- 共通見出しデザイン（重ね文字スタイル） --- */

.lp-gallery-header {
  text-align: center;
  margin-bottom: 50px;
}

.lp-gallery-title {
  margin: 0;
  font-weight: normal;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 重ねるための高さ確保 */
  height: 80px; 
  border: none;
}

/* 英語タイトル（背景装飾として配置） */
.lp-gallery-title-en {
  font-family: "Cormorant Garamond", serif;
  font-size: 100px;
  line-height: 1;
  color: #8c7b6c;
  opacity: 0.12; /* 日本語を邪魔しないようさらに薄く */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完全中央配置 */
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 0;
  font-style: italic;
  pointer-events: none; /* 選択不可にする */
}

/* 日本語タイトル（メイン） */
.lp-gallery-title-ja {
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 32px; /* 大きく変更 */
  letter-spacing: 0.1em;
  color: #5e4b40;
  position: relative;
  z-index: 1;
  display: block;
  font-weight: 600;
  /* 背景の英語と重なっても読めるように強めの光彩を入れる */
  text-shadow: 0 0 20px rgba(252, 252, 248, 1), 0 0 10px rgba(252, 252, 248, 0.8);
}

/* 下線は削除 */
.lp-gallery-title-ja::after {
  display: none;
}

@media (max-width: 768px) {
  .lp-gallery-title {
    height: 60px;
  }
  .lp-gallery-title-en {
    font-size: 60px;
  }
  .lp-gallery-title-ja {
    font-size: 24px; /* スマホでも十分な大きさを確保 */
  }
}

/* --- Section 1: Photo Gallery --- */
.lp-gallery-photos {
  background-color: #fcfcf8;
  margin-top: 60px;
}

/* 外枠コンテナ */
.lp-gallery-container {
  width: 100%;
  min-height: 350px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* --- Section 2: Instagram CTA --- */
.lp-gallery-instagram {
}

.lp-gallery-content-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* インスタグラム 案内テキスト */
.lp-insta-message {
  font-size: 24px;
  line-height: 2;
  margin-bottom: 30px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #5e4b40;
}

/* CTAボタンエリア */
.lp-gallery-btn-area {
  margin-top: 0;
}

.lp-gallery-btn {
  display: inline-block;
  background-color: #8c7b6c; /* 上品なトープ/ブラウン */
  color: #fff;
  text-decoration: none;
  padding: 18px 50px;
  font-size: 16px;
  letter-spacing: 0.15em;
  transition: all 0.3s ease;
  font-family: "Shippori Mincho", serif;
  min-width: 260px;
  border: 1px solid #8c7b6c;
  position: relative;
  overflow: hidden;
}

.lp-gallery-btn:hover {
  background-color: #fff;
  color: #8c7b6c;
  opacity: 1;
  box-shadow: 0 5px 15px rgba(140, 123, 108, 0.2);
}

/* モバイル調整 */
@media (max-width: 767px) {
  .lp-insta-message {
    font-size: 16px;
  }
  .lp-gallery-btn {
    width: 100%;
    padding: 16px 20px;
  }
}
/* --- ギャラリー --- */
.lp-gallery-wrapper .ats-section {
  width: 100%;
  padding: 0;
}

.lp-gallery {
  overflow: hidden;
}

.lp-gallery-row {
  display: flex;
  margin-bottom: 24px;
  overflow: hidden;
  width: 100%;
}

.lp-gallery-row:last-child {
  margin-bottom: 0;
}

.lp-gallery-track {
  display: flex;
  gap: 24px;
  animation: lp-scroll-left 60s linear infinite;
  /* 画像の幅 + gap を考慮して幅を調整 */
}

/* 逆方向のアニメーション */
.lp-gallery-row--reverse .lp-gallery-track {
  animation-direction: reverse;
}

/* 画像スタイル */
.lp-gallery-track img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  flex-shrink: 0; /* 縮小させない */
}

/* PCサイズでの画像拡大 */
@media (min-width: 768px) {
  .lp-gallery-track img {
    width: 300px;
    height: 300px;
  }
}

/* アニメーション定義 */
@keyframes lp-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 
      画像セット数に応じて調整が必要。
      ここでは画像セットが2回繰り返されている前提で、
      全体の半分の幅だけ移動させる。
      微調整は実際の画像枚数と幅に依存するが、
      -50% で概ねシームレスなループになる（トラック内の要素が均等な場合）。
    */
    transform: translateX(-50%);
  }
}