@charset "UTF-8";
/* CSS Document */
/*------h1見出し------*/
h1 {
  font-size: 10px;
  line-height: 1.1;
}
/*------h2見出し------*/
/*h2見出し（共通）*/
main h2 {
  margin-bottom: 2vw; /*下にスペースを空ける*/
  color: #696057;
}
/*h2見出しのサブテキスト（sub-text）*/
main h2 span.sub-text {
  opacity: 0.8; /*透明度。色が60%出た状態。*/
}
@media screen and (max-width: 700px) {
  main h2 {
    font-size: 1.6rem;
    line-height: 140%;
  }
}
/*h3見出し（共通）*/
main h3 {
  font-weight: 600;
  font-size: 1.2rem; /*文字サイズ140%*/
}
/*------セクション------*/

.sec-slope-pattern1 {
  position: relative;
  background: #F5F4EC; /*背景色*/
  padding-top: 5vw; /*ボックス内の上に空ける余白。お好みで調整して下さい。*/
  padding-bottom: 5vw; /*ボックス内の下に空ける余白。お好みで調整して下さい。*/
  margin-top: 10vw; /*ボックス外の上に空ける余白。お好みで調整して下さい。*/
  margin-bottom: 10vw; /*ボックス外の下に空ける余白。お好みで調整して下さい。*/
}
.sec-slope-pattern1 a {
  color: inherit;
}
.sec-slope-pattern1::before, .sec-slope-pattern1::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(5vw + 1px);
  background: #F5F4EC; /*背景色。上の.background6-partsのbackgroundと揃える。*/
}
.sec-slope-pattern1::before {
  top: -5vw; /*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
  clip-path: polygon(0 100%, 100% 0, 100% 100%); /*三角形の形を作っています*/
}
.sec-slope-pattern1::after {
  bottom: -5vw; /*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
  clip-path: polygon(0 0, 100% 0, 0 100%); /*三角形の形を作っています*/
}
/* 上だけ傾斜 */
.sec-slope-top1 {
  position: relative;
  background: #F5F4EC;
  padding-top: 5vw;
  padding-bottom: 50px;
  margin-top: 10vw;
  margin-bottom: 0;
}
.sec-slope-top1::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(5vw + 1px);
  top: -5vw;
  background: #F5F4EC;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.sec-slope-pattern2 {
  position: relative;
  background: #e4e4dd; /*背景色*/
  padding-top: 5vw; /*ボックス内の上に空ける余白。お好みで調整して下さい。*/
  padding-bottom: 5vw; /*ボックス内の下に空ける余白。お好みで調整して下さい。*/
  margin-top: 10vw; /*ボックス外の上に空ける余白。お好みで調整して下さい。*/
  margin-bottom: 10vw; /*ボックス外の下に空ける余白。お好みで調整して下さい。*/
}
.sec-slope-pattern2 a {
  color: inherit;
}
.sec-slope-pattern2::before, .sec-slope-pattern2::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(5vw + 1px);
  background: #e4e4dd; /*背景色。上の.background6-partsのbackgroundと揃える。*/
}
.sec-slope-pattern2::before {
  top: -5vw; /*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
  clip-path: polygon(0 100%, 100% 0, 100% 100%); /*三角形の形を作っています*/
}
.sec-slope-pattern2::after {
  bottom: -5vw; /*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
  clip-path: polygon(0 0, 100% 0, 0 100%); /*三角形の形を作っています*/
}
/* 上だけ傾斜 */
.sec-slope-top2 {
  position: relative;
  background: #e4e4dd;
  padding-top: 5vw;
  padding-bottom: 50px;
  margin-top: 10vw;
  margin-bottom: 0;
}
.sec-slope-top2::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(5vw + 1px);
  top: -5vw;
  background: #e4e4dd;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/*見出しのあしらい　上下破線*/
.title-double-dashed {
  padding: 1rem 1rem;
  border-top: 1px dashed #a7a4a1;
  border-bottom: 1px dashed #a7a4a1;
  margin-bottom: 1.5em;
}
/*見出しのあしらい　バイカラー*/
.title-bicolor {
  position: relative;
  text-align: left;
  line-height: 150%;
  border-bottom: 6px solid #a7a4a1;
  padding-left: 10px;
  padding-bottom: 10px;
  margin-bottom: 1.5em;
}
.title-bicolor:before {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 20%;
  height: 6px;
  content: '';
  background: #6f6e6c;
}
/*見出しのあしらい　吹き出し風*/
.title-speech-bubble {
  border: 1px solid #a7a4a1;
  padding: 0.5em 1em;
  border-radius: 10px;
  margin-bottom: 10px;
  position: relative;
  background-color: #fff;
  margin-bottom: 1.5em;
}
/* 見出しのあしらい　吹き出し風-下の棒（白背景と同じ色） */
.title-speech-bubble::before {
  content: '';
  background-color: #fafaf6;
  width: 20px;
  height: 3px;
  position: absolute;
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%);
}
/* 見出しのあしらい　吹き出し風-下の斜め線（三角の一部） */
.title-speech-bubble::after {
  content: '';
  background-color: #a7a4a1;
  width: 20px;
  height: 3px;
  transform: translateX(-50%) rotate(50deg);
  position: absolute;
  left: 50%;
  bottom: -10px;
}
/*h2見出しのあしらい　枠の上に影がある*/
.title-box-shadow-top {
  padding: 0.5em 1em;
  box-shadow: 2px -2px #dedbd7;
  outline: 1px solid #fff;
  border: 1px solid #dedbd7;
  position: relative;
  background-color: #fff;
  margin-bottom: 1.5em;
}
/*見出しのあしらい　枠と背景がズレている*/
.title-offset-border {
  position: relative;
  display: inline-block; /* ← テキスト幅のみにする */
  padding: 0.2rem 1rem calc(0.7rem + 8px);
  background: #ffffff;
  margin-bottom: 1.5em;
}
.title-offset-border:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 1px solid #a7a4a1;
  box-sizing: content-box;
}
/*見出しのあしらい　斜めストライプ*/
.title-skew-line {
  display: inline-block;
  position: relative;
  padding: 1rem 0.5rem;
  margin-bottom: 1.5em;
}
.title-skew-line::after {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 10px;
  width: 100%; /* inline-blockの幅（＝文字幅）に合わせて伸びる */
  content: '';
  background-image: repeating-linear-gradient(-45deg, #a7a4a1, #a7a4a1 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/*見出しのあしらい　白背景枠*/
.title-white-box {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 0.6em 1em;
  display: inline-block;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin: 1em 0 1.5em;
}
@media screen and (max-width: 768px) {
  .title-white-box {
    padding: 0.4em 0.8em;
  }
}
/*見出しのあしらい　左右に線*/
.title-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  font-weight: bold;
  margin: 1.5em 0;
  text-align: center;
}
/* 疑似要素で左右の線 */
.title-divider::before, .title-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #c7a385;
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .title-divider {
    gap: 0.5em;
    margin: 2em 0;
  }
}


/*------余白------*/
.mt-sm {
  margin-top: 0.5em;
}
.mt-md {
  margin-top: 1em;
}
.mt-lg {
  margin-top: 2em;
}
.mb-sm {
  margin-bottom: 0.5em;
}
.mb-md {
  margin-bottom: 1em;
}
.mb-lg {
  margin-bottom: 2em;
}
/*------中央寄せ　wrapper幅別------*/

.wrap-90p {
  width: 90%;
  display: block;
  margin: 0 auto;
}
.wrap-80p {
  width: 80%;
  display: block;
  margin: 0 auto;
}
.wrap-70p {
  width: 70%;
  display: block;
  margin: 0 auto;
}
.wrap-60p {
  width: 60%;
  display: block;
  margin: 0 auto;
}
.wrap-50p {
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wrap-40p {
  width: 40%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wrap-30p {
  width: 30%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wrap-20p {
  width: 20%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.width-40 img {
  max-width: 100%; /* 親の幅を超えないように */
  height: auto; /* アスペクト比を保つ */
}
/*------写真の配置------*/

.img-100 {
  width: 100%;
  display: block;
}
/*　横3列　*/
.parts-3img-yoko {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
.parts-garage-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s;
  display: block;
  text-decoration: none;
  color: inherit;
}
.parts-garage-thumb:hover {
  transform: scale(1.02);
}
.parts-garage-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.parts-garage-thumb-label {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.3em 0.6em;
  font-size: 0.7em;
  letter-spacing: 0.05em;
}
/*　横3列カード風（スマホは縦並び）　*/
.section--compact {
  padding-top: 80px;
  padding-bottom: 80px;
}
.parts-3-feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, 280px); /* 各カード幅を固定（280px） */ justify-content: center; /* 中央寄せ */ gap: 2em;
  margin: 0 auto;
}
.parts-3-feature-card {
  width: 280px; /* 固定幅 */ background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}
.parts-3-feature-card:hover {
  transform: translateY(-4px);
}
.parts-3-feature-card img {
  width: 100%;
  aspect-ratio: 3 / 2; /* ← ここで3:2に固定 */ object-fit: cover; /* はみ出す部分はトリミング */ display: block; /* 余計な隙間防止 */
}
.parts-3-feature-text {
  padding: 1.5em;
  flex: 1; /* ← テキスト部分が余白を埋めて高さ調整される */
}
.parts-3-feature-text h3 {
  font-size: 1.1em;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  text-align: center;
  line-height: 140%;
}
.parts-3-feature-text p {
  font-size: 0.95em;
  line-height: 140%;
} /* スマホ対応：1列に */ @media screen and (max-width: 768px) {
  .parts-3-feature-cards {
    grid-template-columns: 1fr;
  }
  .parts-3-feature-card {
    width: 100%; /* 画面幅いっぱいに */
  }
}
/*　横4列（スマホも4）　*/
.photo-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PCで4列 */
  gap: 0.5em;
  padding: 0;
  margin-top: 10px;
}
.photo-grid-4 img {
  border-radius: 3px;
}
.photo-grid-4-item {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.photo-grid-4-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を枠いっぱいに切り抜き */
  display: block;
  transition: transform 0.3s ease;
}
.photo-grid-4-item:hover img {
  transform: scale(1.05);
}
/* スマホ（768px以下）では2列 */
@media screen and (max-width: 768px) {
  .photo-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
/*　横5列（スマホは2.2.1）　*/
.parts-5img-yoko {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap;
}
.parts-5img-yoko img {
  width: 100%;
  border-radius: 3px;
  object-fit: cover;
}
/*　横2列（スマホも2）　*/
.parts-2img-yoko {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  flex: 1 1 48%;
}
.parts-2img-yoko img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/*　横3列（スマホも3）正方形　*/
.parts-3img-yoko-square {
  flex: 1 1 50%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
.parts-3img-yoko-square img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.parts-3img-yoko-square img {
  aspect-ratio: 1 / 1;
}
/*　ポラロイド風　*/
.polaroid {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  background: white;
  padding: 15px;
  border: 1px solid #c4bfb9;
  text-align: center;
  margin: 10px auto;
  box-shadow: 2px 2px #c4bfb9; /* ← Y方向をプラスに */
}
.polaroid img {
  aspect-ratio: 4 / 3; /* ← 比率を指定（例：4:3） */
  object-fit: cover; /* はみ出しても見栄えよくトリミング */
  display: block; /* 下の隙間をなくす */
}
.polaroid .caption {
  padding-top: 20px;
  padding-bottom: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  letter-spacing: 0.1em; /* 文字間を広げる */
}
.img-rounded-shadow {
  display: block;
  max-width: 100%; /* レスポンシブ対応 */
  height: auto;
  border-radius: 12px; /* 角丸の半径。数値を変えると丸みが変わる */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* 横方向 縦方向 ぼかし 広がり 色 */
}
/*　画像が自動でスライド　*/
.img-slider img {
  margin-right: 10px;
  width: 40%;
}
/*------テキストあしらい------*/
/* 元より少し大きく */
.text-l1 {
  font-size: 1.2em;
}
/* さらに大きく */
.text-l2 {
  font-size: 1.5em;
}
/* さらにさらに大きく */
.text-32 {
  font-size: 32px;
}
/* 元より少し小さく */
.text-s1 {
  font-size: 0.9em;
}
/* 元より少し小さく */
.text-s2 {
  font-size: 0.85em;
}
/* さらに小さく */
.text-s3 {
  font-size: 0.7em;
  line-height: 130%;
}
/* 破線（下線） */
.text-underline-dashed {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: #b4845c;
  text-underline-offset: 5px;
  padding-left: 0.2em; /* 左の余白 */
  padding-right: 0.2em; /* 右の余白 */
}
/* 太字 */
.text-bold {
  font-weight: bold;
}
/*テキスト 中央寄せ左揃え*/
.text-outer {
  text-align: center;
  padding: 0 20px;
}
.text-outer p {
  display: inline-block; /* インラインブロックで中央に寄る */
  text-align: left; /* テキストは左揃え */
}
/*------ポイント------*/
.point-title {
  margin-bottom: 0.3em;
  text-align: center;
}
.point-label {
  display: inline-block;
  color: #6b8b8d;
  font-size: 0.9rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.3em;
  padding-left: 2em;
  padding-right: 2em;
  margin-bottom: 2em;
  font-weight: bold;
}
.point-label-number {
  font-size: 2em;
  margin-left: 0.3em;
  color: #b4845c;
}
/*------Font Awesomeのリスト表示------*/
ul.fa-check-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: table; /* ulを中央寄せ */
}
ul.fa-check-list li {
  position: relative;
  padding-left: 1.5em; /* アイコン幅＋余白 */
  margin-bottom: 0.8em;
  line-height: 1.6;
  text-align: left;
}
ul.fa-check-list li i {
  position: absolute;
  top: 0.15em; /* アイコン縦位置調整 */
  left: 0;
  color: #b4845c;
  font-size: 1em;
  /* margin-right は不要、padding-leftで調整済み */
}
.li-dotted {
  border-bottom: 2px dotted #ccc;
  padding-bottom: 8px;
}

/*------フレーム------*/
/*枠（親要素）を文字に合わせる*/
.parts_fit-to-text {
  display: inline-block;
}
/* ページ 白背景枠 */
.frame-white {
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  margin: 0 auto; /* ← 左右を自動（中央寄せ） */
  padding: 0.5em 1.5em;
  width: 100%; /* ← コンテンツに合わせて幅を調整（必要に応じて） */
}
.frame-white-fit {
  display: inline-block; /* ← コンテンツ幅に自動調整 */
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  margin: 0 auto 1em;
  padding: 0.5em 2em;
}
/* スマホ対応（768px以下） */
@media (max-width: 768px) {
  .frame-white {
    padding: 10px 20px;
  }
}
/* 幅1000px */
.wrap-1000 {
  max-width: 1000px;
  margin: 0 auto;
}
/* 幅1000px */
.wrap-1200 {
  max-width: 1200px;
  margin: 0 auto;
}
/* 横2カラム */
.cols-5-5 {
  display: flex;
  flex-wrap: wrap;
  gap: 2em; /* 各.box間の左右余白 */
  margin-bottom: 3em; /* ← 各photo-pairの縦の余白を追加 */
}
.cols-5-5-box {
  flex: 1 1 45%;
}
.cols-5-5-box img {
  width: 100%;
  border-radius: 3px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .cols-5-5-box {
    flex: 1 1 100%; /* 縦並び */
  }
}
/* 横2カラム 6:4 */
.cols-6-4 {
  display: flex;
  align-items: flex-end; /* 下揃え */
  gap: 2em; /* カラム間の余白 */
}
.cols-6-4-image {
  flex: 0 0 40%; /* 画像側：4割 */
}
.cols-6-4-image img {
  width: 100%;
  border-radius: 3px;
  object-fit: cover;
}
.cols-6-4-text {
  flex: 0 0 60%; /* テキスト側：6割 */
}
/* スマホで縦並びにする */
@media (max-width: 768px) {
  .cols-6-4 {
    flex-direction: column;
  }
  .cols-6-4-image, .cols-6-4-text {
    flex: 1 1 100%;
  }
}
/* 横2カラム 3:7 */
.cols-3-7 {
  display: flex;
  align-items: flex-end; /* 下揃え */
  gap: 2em; /* カラム間の余白 */
}
.cols-3-7-image {
  flex: 0 0 40%; /* 画像側：4割 */
}
.cols-3-7-image img {
  width: 100%;
  border-radius: 3px;
  object-fit: cover;
}
.cols-3-7-text {
  flex: 0 0 60%; /* テキスト側：6割 */
}
/* スマホで縦並びにする */
@media (max-width: 768px) {
  .cols-3-7 {
    flex-direction: column;
  }
  .cols-3-7-image, .cols-6-4-text {
    flex: 1 1 100%;
  }
}
/* 横3カラム */
.pages-three-columns-columns {
  display: flex;
  gap: 2em;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pages-three-columns-box {
  flex: 1 1 calc(33.333% - 2em); /* 3カラム */
  background: #f9f9f9;
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.pages-three-columns-box h4 {
  margin-bottom: 1em;
  font-size: 1.2em;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5em;
}
.pages-three-columns-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pages-three-columns-box li {
  margin: 0.5em 0;
}
/* スマホ対応（768px以下） */
@media (max-width: 768px) {
  .pages-three-columns-box {
    flex: 1 1 100%; /* 縦並び */
  }
}
/* 仕切り線　*/
.hr-dotted {
  border: none; /* デフォルトの線を消す */
  border-top: 1px dotted #827c75; /* 上に点線を指定 */
  margin: 4em auto; /* 上下の余白 */
  width: 98%;
}
.hr-separator-dots {
  text-align: center;
  margin: 2em 0;
}
.hr-separator-dots::before {
  content: "● ● ●";
  font-size: 0.4em;
  letter-spacing: 1em;
}
/*ボタンアニメーション*/
.btn-anim1 {
  text-align: right; /*テキストを右寄せ*/
  letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/
  margin-top: 50px;
}
.btn-anim1 a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  position: relative;
  padding-right: 5rem; /*矢印のアイコンと重ならないように余白をとる*/
}
/*btn1の矢印のアイコン設定*/
.btn-anim1 a::after {
  content: "";
  background: url("../images/arrow1.svg") no-repeat right center / 100px; /*アイコン画像の指定。画像の右側を読み込みます。最後の100pxの数字は、widthの２倍で指定すればOK。*/
  display: block;
  position: absolute;
  right: 0px;
  bottom: -1rem; /*下からの配置場所*/
  width: 50px; /*アイコンの幅。ここを変更する場合は、上と下にあるbackgroundの100pxの数値も調整します。*/
  height: 50px; /*アイコンの高さ*/
  border-radius: 50%; /*円形にする指定。この１行を削除すれば正方形になります。*/
  text-align: center;
  transition: 0.3s; /*hover時に切り替えをなめらかにする*/
  border: 1px solid var(--primary-color); /*枠線の幅、線種、色*/
}
/*btn1の矢印のマウスオン時*/
.btn-anim1 a:hover::after {
  background-color: var(--primary-color); /*背景色を冒頭のprimary-colorにする*/
  background-position: left center; /*矢印画像の入れ替え。画像の左側を読み込みます。*/
}
/*背景色が暗い所で使う場合*/
.btn-anim1.white {
  color: #fff; /*文字色*/
}
.btn-anim1.white a::after {
  background: url("../images/arrow1_white.svg") no-repeat right center / 100px; /*アイコン画像の指定。画像の右側を読み込みます。最後の100pxの数字は、widthの２倍で指定すればOK。*/
  border: 1px solid #fff; /*枠線の幅、線種、色*/
}
.btn-anim1.white a:hover::after {
  background-color: #fff; /*背景色を白に*/
  background-position: left center; /*矢印画像の入れ替え。画像の左側を読み込みます。*/
}
/* ボタンアニメーション　*/
.btn-anim2 {
  position: relative;
  display: inline-block;
  box-shadow: 0px 0px 0px 1px #e0dedd inset;
  background-color: #fff;
}
/*上のbtn-anim2の内側にあるボックス*/
.btn-anim2-inner {
  display: block;
  text-decoration: none;
  padding: 1em 2.5em;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
/*ボタン内でiタグを使う場合の設定*/
.btn-anim2-inner i {
  display: inline-block;
  transition: 0.3s;
  padding-left: 1em;
}
.btn-anim2-inner:hover i {
  transform: translateX(5px);
}
/*枠線共通*/
.btn-anim2::before, .btn-anim2::after, .btn-anim2-inner::before, .btn-anim2-inner::after {
  content: "";
  position: absolute;
  background-color: #a19d98; /*background(背景)スタイルですが、hover時の枠線の色になります。*/
  animation-duration: 0.2s; /*アニメーションにかける時間。１辺あたり0.2秒。*/
  animation-fill-mode: forwards;
  animation-timing-function: linear; /*アニメーションの速度のタイプ。同じ速度にする。*/
}
/*ラインアニメーション１（左上→右上）*/
.btn-anim2:hover::before {
  left: 0px; /*開始地点の指示*/
  top: 0px; /*開始地点の指示*/
  height: 1px; /*線の幅の代わりになります*/
  animation-name: w; /*上の「@keyframes」で使うアニメーション名の指定。*/
}
/*ラインアニメーション２（右上→右下）*/
.btn-anim2:hover::after {
  right: 0px; /*開始地点の指示*/
  top: 0px; /*開始地点の指示*/
  width: 1px; /*線の幅の代わりになります*/
  animation-name: h; /*上の「@keyframes」で使うアニメーション名の指定。*/
  animation-delay: 0.2s; /*アニメーションを0.2秒遅れてスタートさせる。*/
}
/*ラインアニメーション３（右下→左下）*/
.btn-anim2-inner:hover::before {
  right: 0px; /*開始地点の指示*/
  bottom: 0px; /*開始地点の指示*/
  height: 1px; /*線の幅の代わりになります*/
  animation-name: w; /*上の「@keyframes」で使うアニメーション名の指定。*/
  animation-delay: 0.4s; /*アニメーションを0.4秒遅れてスタートさせる。*/
}
/*ラインアニメーション４（左下→左上）*/
.btn-anim2-inner:hover::after {
  left: 0px; /*開始地点の指示*/
  bottom: 0px; /*開始地点の指示*/
  width: 1px; /*線の幅の代わりになります*/
  animation-name: h; /*上の「@keyframes」で使うアニメーション名の指定。*/
  animation-delay: 0.6s; /*アニメーションを0.6秒遅れてスタートさせる。*/
}
.photo-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* PCで5列 */
  gap: 1em;
  padding: 0;
}
.photo-grid-5-item {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.photo-grid-5-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  border-radius: 3px;
}
.photo-grid-5-item:hover img {
  transform: scale(1.05);
}
.photo-grid-5-item:hover .photo-grid-5-item-caption {
  background: rgba(0, 0, 0, 0.75);
}
.photo-grid-5-item-caption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  width: 100%;
  padding: 0.5em;
  font-size: 0.6em;
  box-sizing: border-box;
  text-align: center;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
/* スマホ（768px以下）では2列 */
@media screen and (max-width: 768px) {
  .photo-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* CSS */
.sphoto-row {
  --photo-size: 150px; /* 必要に応じて変更してください */
  display: flex;
  flex-wrap: wrap; /* 枚数が多ければ折り返す */
  gap: 10px; /* 画像間の余白（お好みで調整） */
  justify-content: center; /* 中央揃え */
  align-items: center;
  padding: 8px 0;
  box-sizing: border-box;
}
/* 画像自体のスタイル */
.sphoto-row img {
  width: var(--photo-size);
  aspect-ratio: 4 / 3; /* 4:3比率を保持（モダンブラウザ） */
  height: auto; /* aspect-ratioで高さが決まる */
  object-fit: cover; /* 中央トリミングして比率を維持 */
  display: block;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  user-select: none;
  -webkit-user-drag: none;
}
/* 画像をクリックで拡大表示したい場合などのアクセシビリティを考慮 */
.sphoto-row img[role="button"] {
  cursor: pointer;
}
/* 小さい画面向けに自動縮小（必要なら調整） */
@media (max-width: 768px) {
  .sphoto-row {
    gap: 8px;
  }
  .sphoto-row img {
    width: calc(var(--photo-size) * 0.6);
  } /* 例：75%に縮小 */
}
/* 古いブラウザで aspect-ratio 未対応の際のフォールバック（必要なら有効化）
.photo-row img {
  height: calc(var(--photo-size) * 3 / 4);  // width 150 => height 112.5 (4:3)
}
*/
/* telリンクの下線を消す */
a[href^="tel"] {
  text-decoration: none;
  color: inherit; /* 必要に応じて文字色も調整 */
}