@charset "UTF-8";
/* ===== カラー変数・フォント設定 ===== */
:root {
  --sun-orange: #FC5F00;
  --sun-orange-hover: #e14f00;
  --navy: #2E2D59;
  --text: #222;
  --white: #fff;
  --line: #e8e8ee;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
}

html,body {
  margin: 0;
  padding: 0;
  font: 16px/1.7 "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  color: var(--text);
}

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

/* ===== トップバー・ロゴ・メニュー・SNS ===== */
.topbar{
  background:var(--white);
  padding:18px 16px;
  border-bottom:1px solid var(--line);
  position:relative; z-index:1000;
}
.topbar .inner{
  max-width:1200px;
  margin:0 auto;
  display:block;
}
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
}
.logo img{
  height:56px;
  max-width:70vw;
  display:block;
}

.menu-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:2px solid var(--navy);
  border-radius:12px;
  color:var(--navy);
  font-weight:700;
  background:#fff;
  box-shadow:var(--shadow);
  position:relative; z-index:1001;
}
.menu-btn svg{
  width:22px;height:22px;
  stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* スマホでメニューボタンを右寄せ＆小さく */
@media (max-width: 480px) {
  .topbar .inner .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .logo {
    flex: 1;
    min-width: 0;
  }

  .logo img {
    height: auto;
    max-height: 40px;
    max-width: 65vw;
    object-fit: contain;
  }

  .menu-btn {
    flex-shrink: 0;
    margin-right: 8px;
    padding: 8px 10px;
    gap: 8px;
    font-size: 12px;
  }

  .menu-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* さらに小さくしたい場合（380px以下の極小画面） */
@media (max-width: 380px) {
  .menu-btn {
    padding: 6px 10px;
    font-size: 10px;
  }

  .menu-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* タブレット（768px以下）でも少し調整 */
@media (max-width: 768px) and (min-width: 481px) {
  .menu-btn {
    margin-right: 12px;
  }
}

.sns {
  display: flex;
  gap: 16px;
  align-items: center;
}
.sns a { color: var(--navy); }
.sns .ico {
  width: 35px;
  height: 35px;
  display: block;
  transition: transform .2s;
}
.sns a:hover .ico { transform: scale(1.1); }
.sns .ico circle:first-child { fill: currentColor; }

@media (max-width:768px){
  .sns {
    margin-top: 12px;
    justify-content: center;
  }
}

@media (min-width:769px){
  .topbar .inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .menu-btn{display:none}
  .sns{margin-top:0;justify-content:flex-end}
}

nav.global {
  background:var(--sun-orange);
  box-shadow:0 2px 5px rgba(0,0,0,.15);
  overflow:hidden;
  max-height:0;
  transition:max-height .35s ease;
  position:relative; z-index:10;
}
nav.global.open {
  max-height:90vh;
}

nav.global ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
}
nav.global li { position:relative; }
nav.global a {
  position: relative;
  display: block;
  padding: 16px 40px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: var(--sun-orange);
  border-right: 1px solid #fff;
  overflow: hidden;
  z-index: 1;
}
nav.global li:first-child > a {
  border-left: 1px solid #fff;
}

nav.global a::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.18) 0 2px,
      rgba(255,255,255,0)  2px 5px);
  transform:scaleX(0) translateY(4px);
  transform-origin:center;
  opacity:0;
  transition:transform .32s ease, opacity .32s ease;
  pointer-events:none;
  z-index:0;
}
nav.global a:hover::before{
  transform:scaleX(1) translateY(0);
  opacity:1;
}

nav.global li.active > a{
  background:var(--sun-orange);
}

nav.global ul.sub {
  display:none;
}

@media (min-width:769px) {
  .site-footer{ padding:56px 16px 28px; }
  .foot-sns{ gap:28px; }
  .foot-nav ul{ grid-template-columns:repeat(6,1fr); gap:24px 48px; }
  .sub-toggle {
    display: none !important;
  }
  .menu-btn { display:none; }
  .nav-close { display:none !important; }
  nav.global{
    max-height:none;
    overflow:visible;
    position:relative;
    z-index:100;
  }
  nav.global ul{ flex-wrap:nowrap; }
  nav.global ul.sub { display:block; }
  nav.global li.has-sub{ position:relative; }
  nav.global a{
    padding:16px 40px;
    font-size:16px;
  }
  nav.global li:first-child > a{
    border-left:1px solid #fff;
  }
  nav.global li:last-child > a{
    border-right:1px solid #fff;
  }
  nav.global li.has-sub > ul.sub{
    position:absolute;
    left:0;
    top:calc(100% + 6px);
    min-width:260px;
    padding:12px;
    background:#fff;
    border:1px solid rgba(252,95,0,.35);
    box-shadow:0 18px 32px rgba(0,0,0,.12);
    border-radius:6px;
    z-index:1000;
    visibility:hidden;
    opacity:0;
    transform:translateY(-18px) scale(.96);
    transform-origin:top;
    transition:
      opacity .55s cubic-bezier(0.23,1,0.32,1),
      transform .55s cubic-bezier(0.23,1,0.32,1);
    pointer-events:none;
  }
  nav.global li.has-sub::after{
    content:"";
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    height:8px;
  }
  nav.global li.has-sub:hover > ul.sub,
  nav.global li.has-sub.hovering > ul.sub,
  nav.global li.has-sub:hover > ul.sub,
  nav.global li.has-sub:focus-within > ul.sub{
    visibility:visible;
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  nav.global li.has-sub > ul.sub li + li{ margin-top:8px; }
  nav.global li.has-sub > ul.sub a{
    display:block;
    padding:12px 18px;
    border:1px solid rgba(252,95,0,.6);
    border-radius:6px;
    background:#fff;
    color:var(--sun-orange);
    font-weight:700;
    white-space:nowrap;
    transition:background .25s ease, color .25s ease, transform .2s ease;
  }
  nav.global li.has-sub > ul.sub a:hover{
    background:var(--sun-orange);
    color:#fff;
    transform:translateY(-1px);
  }
  .foot-nav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:nowrap;
    grid-template-columns:repeat(2,1fr);
    gap:0 56px;
    justify-content:center;
  }
  .foot-nav li{ margin:0; }
  .foot-nav a, .copyright{
    display:inline-block;
    padding:8px 0;
    font-weight:700;
    font-size: 14px;
  }
}

/* スマホ用 */
@media (max-width: 768px) {
  .foot-nav a, .copyright {
    font-size: 12px;
  }
}

.site-footer{
  background:#0a1340;
  color:#fff;
  padding:40px 16px 24px;
}
.site-footer .footer-inner{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}
.foot-brand a {
  display: inline-block;
}
.foot-brand img{
  height:clamp(120px,10vw,160px);
  width:auto;
  display:inline-block;
}
.foot-sns{
  display:flex;
  justify-content:center;
  gap:22px;
  margin:25px 0 24px;
}
.foot-sns a{ line-height:0; }
.foot-sns .ico{
  width:clamp(28px,4.2vw,36px);
  height:clamp(28px,4.2vw,36px);
  display:block;
}

@media (max-width:768px){
  .foot-nav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:16px 0;
    justify-items:center;
  }
  .sns {
    margin-top: 12px;
    justify-content: center;
  }
  nav.global{ background:var(--sun-orange); }
  nav.global ul{ flex-direction:column; }
  nav.global li{ position:relative; }
  
  /* 通常項目 */
  nav.global li > a {
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,.3);
  }
  
  /* サブメニュー親要素 */
  nav.global li .sub-menu-parent {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.3);
  }
  
  nav.global li .sub-menu-parent a {
    flex-grow: 1;
    padding: 16px 0;
    border: none;
    background: transparent !important;
  }
  
  /* +ボタンを小さくして目立たなくする */
  .sub-toggle{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  
  .sub-toggle::before{ 
    content: "+"; 
    font-size: 18px;
    line-height: 1;
  }
  
  nav.global li.has-sub.open-sub > .sub-menu-parent > .sub-toggle::before{ 
    content: "−"; 
  }
  
  nav.global > ul > li.has-sub > ul.sub{
    display:block;
    max-height:0; 
    overflow:hidden; 
    opacity:0;
    padding:0 0 0 24px; 
    background:#ff6b18;
    transition:max-height .28s ease, opacity .2s ease, padding .2s ease;
  }
  
  nav.global > ul > li.has-sub.open-sub > ul.sub{
    max-height:700px; 
    opacity:1; 
    padding:8px 0 12px 24px;
  }
  
  nav.global > ul > li.has-sub > ul.sub a {
    border: none;
  }
  
  .nav-close{
    display:none;
    width:100%; 
    text-align:left;
    background:#fff; 
    color:var(--sun-orange);
    font-weight:700; 
    border:none;
    padding:14px 16px; 
    border-bottom:1px solid #ffd1b3;
    position:sticky; 
    top:0; 
    z-index:11;
  }
  
  nav.global.open .nav-close{ 
    display:block; 
  }
}

/* ==================================== */
/* 新規追加：スライドショーのスタイル */
/* ==================================== */
.slideshow {
  position: relative;
  width: 100%;
  padding-top: 44.23%;
  overflow: hidden;
  margin: 0;
  line-height: 0;
}
 
.slideshow img {
  display: block;
}

.slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fade-in-out 10s infinite;
}

.slideshow .slide:nth-child(1) {
  animation-delay: 0s;
}

.slideshow .slide:nth-child(2) {
  animation-delay: 5s;
}

.slideshow .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes fade-in-out {
  0% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 0; }
}

/* index.html コンテナの背景画像設定 */
.haikei-img {
  background: url("../images/background-002.jpg") repeat-y center top fixed;
  padding-top: 60px;
  padding-bottom: 60px;
}

.container {
  margin: 0;
  padding: 0;
}

/* ===== ニュース一覧（グリッドレイアウト） ===== */
#newsTop {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  padding: 60px 16px 120px;
}

/* スマホ用（768px以下）は上下30pxに縮める */
@media (max-width: 768px) {
  #newsTop {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;  
    padding: 30px 16px 60px;
  }
}

/* ===== ニュースカード ===== */
.news-card {
  background-image: url("../images/background-01.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
}

.news-card a {
  color: #F0F0F0;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ===== 記事を読むボタン ===== */
.news-footer {
  text-align: center;
  margin-bottom: 0px;
}

.read-more-btn {
  display: inline-block;
  padding: 10px 20px;
  line-height: 1;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: #2E2D59;
  border: none;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.read-more-btn:hover {
  background: #e14f00;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* ===== カード内の画像（正方形） ===== */
.news-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* ===== メタ情報部分 ===== */
.news-meta {
  padding: 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-meta time {
  font-size: 0.85rem;
  color: #F0F0F0;
  margin-bottom: 6px;
  display: block;
}

.news-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px;
}

.news-excerpt {
  font-size: 0.9rem;
  color: #F0F0F0;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

/* ===== スマホ対応（768px以下） ===== */
@media (max-width: 768px) {
  #newsTop {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* ===== 超小さい画面（480px以下）は1列 ===== */
@media (max-width: 480px) {
  #newsTop {
    grid-template-columns: 1fr;
  }
}

.news-main {
  background: url("../images/background-002.jpg") repeat-y center top fixed;
  background-size: cover;
}

.news-thumb { position:relative; display:block; }
.news-badges {
  position:absolute; top:8px; left:8px;
  display:flex; gap:6px;
  z-index:2;
}
.news-badge {
  font-size:11px; font-weight:700;
  color:#fff; background:#111;
  padding:4px 8px; border-radius:999px;
}
.news-badge--new { background:#FC5F00; }

/* ===== NEWS一覧レイアウト安定化（最小差分・上書き） ===== */

/* グリッド（PC4 / SP2） */
.news-main #newsTop{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 959px){
  .news-main #newsTop{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:10px;
  }
}

/* カードを縦フレックス → ボタンを最下部に固定 */
.news-main #newsTop .news-card{
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:12px;
  overflow:hidden;
  background-image: url("../images/background-01.jpg");
  background-size:100% 100%;
  background-repeat:no-repeat;
}

/* サムネ（正方形。横長がよければ 16/9 に変更） */
.news-main #newsTop .news-thumb{ position:relative; display:block; }
.news-main #newsTop .news-thumb img{
  display:block; width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  position: relative; z-index:1;
}
/* NEW/カテゴリのバッジが前に出るように */
.news-main #newsTop .news-badges{
  position:absolute; left:8px; top:8px;
  display:flex; gap:6px; z-index:2;
}

/* ここが肝：.news-meta の nowrap を無効化してタイトルを折返し可に */
.news-main #newsTop .news-meta{
  white-space: normal !important;
  padding:12px;
  display:flex; flex-direction:column; gap:6px;
}
/* 日付は1行固定で省略。高さを1行ぶん確保 */
.news-main #newsTop .news-meta time{
  color:#bbb; font-size:.9rem; line-height:1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 1.2em; display:block;
}
/* タイトルは2行で切って高さも2行ぶん確保（ズレ防止） */
.news-main #newsTop .news-meta .news-title{
  margin:0; color:#fff; font-weight:700; line-height:1.3; font-size:1rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; max-height: calc(1.3em * 2);
}
.news-main #newsTop .news-meta .news-title a{ color:inherit; text-decoration:none; }

/* ボタンを最下部に固定 */
.news-main #newsTop .news-footer{
  margin-top:auto;
  padding:12px;
  border-top:1px solid rgba(255,255,255,.25);
}
.news-main #newsTop .read-more-btn{
  display:block; width:100%; text-align:center;
  padding:10px 0; border-radius:6px;
  background:#FC5F00; color:#fff; text-decoration:none; font-weight:700;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.news-main #newsTop .read-more-btn:hover{ background:#e14f00; }

/* 記事一覧：フッター上の線を消す */
.news-main #newsTop .news-footer {
  border-top: none !important;
}

/* 1) 100%幅 + padding を内側に収める（はみ出し防止） */
#newsTop,
#newsTop.nt-wrap{
  box-sizing: border-box;
}

/* 2) iPhone の安全域にも対応（ノッチ／丸角） */
@supports (padding: max(0px)) {
  #newsTop,
  #newsTop.nt-wrap{
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.breadcrumb { margin:0; padding:0; }
.breadcrumb ol:empty { display:none; }

/* ===== SNSセクション（Instagram & Facebook）===== */
.sns-section{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:40px 16px;
}

/* PCは2カラム、SPは1カラム */
.sns-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:32px;
  align-items:start;
}

@media (max-width:959px){
  .sns-grid{ grid-template-columns:1fr; gap:20px; }
  .sns-section{ padding:20px 16px; }
}

/* SNS列は縦並び＋中央基準 */
.sns-col{
  display: flex;
  flex-direction: column;
  align-items: center; /* タイトルも埋め込みも中央基準 */
  width: 100%;
}

/* タイトル：Facebookは500px、Instagramは840pxを基準（PC時） */
.sns-title{
  position: relative;
  width: 100%;
  margin: 0 auto 18px;
  text-align: center;
}
.sns-title h3{
  margin: 0;
  /* 見出しの太さ/サイズ（お好みで調整可） */
  font: 700 clamp(18px, 2.6vw, 24px)/1.2 "Noto Sans JP", system-ui, sans-serif;
  color: #fff; /* 文字色はネイビー基調 */
}
/* 下線（デフォルト＝オレンジ） */
.sns-title::after{
  content: "";
  display: block;
  width: 86px;                 /* 線の長さ */
  height: 4px;                 /* 線の太さ */
  margin: 10px auto 0;
  background: var(--sun-orange, #FC5F00);
  border-radius: 2px;
}
/* Facebookは青ラインに */
.sns-title.facebook::after{
  background: #1877F2;
}

@media (max-width:959px){
  .sns-title.instagram,
  .sns-title.facebook{ max-width:100%; }
}

/* InstagramはPCで広め（最大840px） */
.ig-container{ width: 100%; max-width: 840px; margin: 0 auto; }
.ig-frame{
  display: block;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  border: 0;
}

/* Facebookは仕様上 最大500px */
.fb-container{ width: 100%; max-width: 500px; margin: 0 auto; }
.fb-frame{
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  border: 0;
}

/* スマホは両方 100% 幅でOK（中央基準は維持） */
@media (max-width: 959px){
  .ig-container, .ig-frame,
  .fb-container, .fb-frame{ max-width: 100%; }
}

/* === 競合していた一括指定を“安全に”打ち消し（あれば上書き） === */
.sns-section .fb-frame{ max-width: 500px !important; }
.sns-section .ig-frame{ max-width: 840px !important; }
.sns-section .fb-container{ margin: 0 auto !important; }

/* === SNS 最終オーバーライド（末尾に貼ってください）=== */

/* レイアウトの“中央軸”を復活 */
.sns-section .sns-col{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  width:100%;
}

/* タイトル：ライン復元（Instagram=オレンジ / Facebook=青） */
.sns-section .sns-title{
  position:relative;
  width:100%;
  margin:0 auto 18px !important;
  text-align:center;
  /* タイトル幅は各ウィジェットの箱に合わせて後述で制御 */
}
.sns-section .sns-title h3{ margin:0; }

/* デフォルト（Instagramのオレンジ） */
.sns-section .sns-title::after{
  content:"";
  display:block;
  height:4px;
  width: min(200px, 60%);       /* ← 要望より長めに */
  margin:10px auto 0;
  background:#FC5F00;           /* オレンジ */
  border-radius:2px;
}
/* Facebookは青ラインに切替 */
.sns-section .sns-title.facebook::after{ background:#1877F2; }

/* Instagramは“広め”に：PCで最大 840px */
.sns-section .ig-container,
.sns-section .ig-frame{
  display:block;
  width:100% !important;
  max-width:840px !important;   /* ← 小さくならない上限 */
  margin:0 auto !important;
  border:0;
}

/* Facebookは仕様上 最大 500px。センターの“箱”を固定 */
.sns-section .fb-container{
  width:100% !important;
  max-width:500px !important;
  margin:0 auto !important;     /* ← 左寄りになっていた原因を潰す */
  display:block !important;
}
.sns-section .fb-frame{
  display:block !important;
  width:100% !important;
  max-width:500px !important;
  margin:0 auto !important;
  border:0;
}

/* タイトルの基準幅を各箱に合わせる（センターライン一致） */
.sns-section .sns-title.instagram{ max-width:840px !important; }
.sns-section .sns-title.facebook { max-width:500px !important; }

/* 端末幅が狭いときは“画面幅いっぱい”でOK（中央基準は維持） */
@media (max-width: 959px){
  .sns-section .ig-container,
  .sns-section .ig-frame,
  .sns-section .fb-container,
  .sns-section .fb-frame,
  .sns-section .sns-title.instagram,
  .sns-section .sns-title.facebook{
    max-width:100% !important;
  }
  /* モバイルではライン長をやや短めに */
  .sns-section .sns-title::after{ width:min(140px, 50%); }
}

/* === SNS（Instagramを広げ、センター軸を復活）=== */

/* レイアウトの中央軸（古い display:block を無効化） */
.sns-section .sns-col{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  width:100%;
}

/* Instagram をPCで広く（最大 840px） */
.sns-section .ig-frame{
  display:block !important;
  width:100% !important;
  max-width:840px !important;   /* ← ここで500px縛りを解除 */
  margin:0 auto !important;
  border:0;
}

/* タイトルの箱も同じ幅に（センターライン一致） */
.sns-section .sns-title.instagram{
  max-width:840px !important;
  margin:0 auto 16px !important;
  text-align:center;
}

/* Facebook は従来どおり（最大500px）—参照のみ */
.sns-section .fb-frame{ max-width:500px !important; }
.sns-section .fb-container{ margin:0 auto !important; }

/* スマホでは“画面幅いっぱい”でOK（中央基準は維持） */
@media (max-width:959px){
  .sns-section .ig-frame,
  .sns-section .sns-title.instagram{
    max-width:100% !important;
  }
}

/* ===== SNSセクション最終修正 ===== */

/* PCレイアウト修正：Instagramを大きく表示 */
@media (min-width: 960px) {
  .sns-section {
    max-width: 1400px !important;
    padding: 40px 24px !important;
  }
  
  .sns-grid {
    display: grid !important;
    grid-template-columns: 1fr minmax(400px, 500px) !important;
    gap: 40px !important;
  }
  
  /* Instagram列（左）：制限を解除 */
  .sns-grid .sns-col:first-child .ig-container,
  .sns-grid .sns-col:first-child .ig-frame {
    max-width: none !important;
    width: 100% !important;
  }
  
  /* Facebook列（右）：500px固定 */
  .sns-grid .sns-col:last-child .fb-container {
    max-width: 500px !important;
    margin: 0 auto !important;
  }
}

/* モバイル・タブレット対応：横はみ出し防止 */
@media (max-width: 959px) {
  .sns-section {
    overflow-x: hidden !important;
    padding: 30px 12px !important;
    box-sizing: border-box !important;
  }
  
  .sns-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  
  /* すべてのコンテナを画面幅に収める */
  .ig-container,
  .fb-container {
    max-width: calc(100vw - 24px) !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  
  .ig-frame,
  .fb-frame {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* 極小画面対応 */
@media (max-width: 480px) {
  .sns-section {
    padding: 20px 8px !important;
  }
  
  .ig-container,
  .fb-container {
    max-width: calc(100vw - 16px) !important;
  }
}

/* Facebook埋め込みのモバイル最適化 */
@media (max-width: 959px) {
  .fb-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  .fb-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 800px !important;
  }
}

/* 特に小さい画面（スマホ）での調整 */
@media (max-width: 480px) {
  .fb-frame {
    transform: scale(0.95); /* 少し縮小 */
    transform-origin: top center;
  }
}

/* ===== モバイルSNS表示修正 ===== */
@media (max-width: 959px) {
  /* セクション全体 */
  .sns-section {
    padding: 20px 12px !important;  /* 上下パディングを減らす */
    overflow-x: hidden !important;
  }
  
  /* グリッドの間隔を大幅に減らす */
  .sns-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;  /* 15pxに減らす（Instagram/Facebook間） */
  }
  
  /* タイトルの余白調整 */
  .sns-title {
    margin: 0 auto 12px !important; /* 下の余白を減らす */
    padding-top: 0 !important;
  }
  
  .sns-title.facebook {
    margin-top: 0 !important; /* Facebookタイトル上の余白を削除 */
  }
  
  /* コンテナをフル幅に */
  .fb-container,
  .ig-container {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  .fb-frame,
  .ig-frame {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* 極小画面（480px以下）でさらに調整 */
@media (max-width: 480px) {
  .sns-section {
    padding: 20px 8px !important;
  }
  
  .sns-grid {
    gap: 20px !important; /* さらに間隔を狭める */
  }
  
  .fb-container,
  .ig-container {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* info-titleの下の余白も調整 */
@media (max-width: 959px) {
  .info-title + .sns-section {
    padding-top: 20px !important;
  }
}

/* ===== モバイルSNS表示修正（余白問題の解決） ===== */
@media (max-width: 959px) {
  /* セクション全体 */
  .sns-section {
    padding: 20px 12px !important;
    overflow-x: hidden !important;
  }
  
  /* グリッドの間隔を大幅に減らす */
  .sns-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  
  /* 各SNS列の余白をリセット */
  .sns-col {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* タイトル部分の余白を最小化 */
  .sns-title {
    margin: 0 auto 10px !important;
    padding: 0 !important;
  }
  
  /* Instagramタイトルの下余白 */
  .sns-title.instagram {
    margin-bottom: 10px !important;
  }
  
  /* Facebookタイトルの余白を完全にコントロール */
  .sns-title.facebook {
    margin: 0 auto 10px !important;
    padding-top: 0 !important;
  }
  
  /* コンテナの余白もリセット */
  .ig-container {
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  .fb-container {
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  /* フレームの幅調整 */
  .fb-container,
  .ig-container {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
  
  .fb-frame,
  .ig-frame {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* info-titleとSNSセクション間の余白も調整 */
@media (max-width: 959px) {
  .info-title + .sns-section {
    padding-top: 15px !important;
  }
}

/* 背景画像の影響を最小化 */
@media (max-width: 959px) {
  .bg-cont .sns-section {
    background: transparent !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* PCレイアウト修正：Instagramを大きく表示 */
@media (min-width: 960px) {
  .sns-section {
    max-width: 1400px !important;
    padding: 40px 24px !important;
  }
  
  .sns-grid {
    display: grid !important;
    grid-template-columns: 1fr minmax(400px, 500px) !important;
    gap: 40px !important;
  }
  
  /* Instagram列（左）：制限を解除 */
  .sns-grid .sns-col:first-child .ig-container,
  .sns-grid .sns-col:first-child .ig-frame {
    max-width: none !important;
    width: 100% !important;
  }
  
  /* Facebook列（右）：500px固定 */
  .sns-grid .sns-col:last-child .fb-container {
    max-width: 500px !important;
    margin: 0 auto !important;
  }
}

/* 極小画面（480px以下）でさらに調整 */
@media (max-width: 480px) {
  .sns-section {
    padding: 20px 8px !important;
  }
  
  .sns-grid {
    gap: 20px !important;
  }
  
  .fb-container,
  .ig-container {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
}
/* ===== モバイルSNS余白完全修正 ===== */
@media (max-width: 959px) {
  /* セクション全体の余白を最小化 */
  .sns-section {
    padding: 15px 12px !important;
    overflow-x: hidden !important;
    margin: 0 !important;
  }
  
  /* グリッドの間隔を極限まで減らす */
  .sns-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 各SNS列の余白完全リセット */
  .sns-col {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  
  /* Instagram列の下部余白を削除 */
  .sns-col:first-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Facebook列の上部余白を削除 */
  .sns-col:last-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* タイトルの余白を最小化 */
  .sns-title {
    margin: 0 auto 8px !important;
    padding: 0 !important;
    background: transparent !important;
  }
  
  .sns-title.instagram {
    margin-bottom: 8px !important;
  }
  
  .sns-title.facebook {
    margin: 0 auto 8px !important;
    padding-top: 0 !important;
  }
  
  /* コンテナの余白リセット */
  .ig-container,
  .fb-container {
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
  }
  
  /* Instagram埋め込みの後の余白を削除 */
  .ig-container::after,
  .ig-frame::after {
    display: none !important;
  }
  
  /* フレームの幅調整 */
  .fb-container,
  .ig-container {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
  
  .fb-frame,
  .ig-frame {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* 背景画像エリアの影響を完全に排除 */
@media (max-width: 959px) {
  .bg-cont .sns-section {
    background: transparent !important;
    margin: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  
  /* 背景画像の高さによる影響を防ぐ */
  .bg-cont .sns-section::before,
  .bg-cont .sns-section::after {
    display: none !important;
  }
}

/* info-titleとの間隔調整 */
@media (max-width: 959px) {
  .info-title + .sns-section {
    margin-top: -10px !important;
    padding-top: 10px !important;
  }
}

/* PCレイアウト（変更なし） */
@media (min-width: 960px) {
  .sns-section {
    max-width: 1400px !important;
    padding: 40px 24px !important;
  }
  
  .sns-grid {
    display: grid !important;
    grid-template-columns: 1fr minmax(400px, 500px) !important;
    gap: 40px !important;
  }
  
  .sns-grid .sns-col:first-child .ig-container,
  .sns-grid .sns-col:first-child .ig-frame {
    max-width: none !important;
    width: 100% !important;
  }
  
  .sns-grid .sns-col:last-child .fb-container {
    max-width: 500px !important;
    margin: 0 auto !important;
  }
}

/* 極小画面 */
@media (max-width: 480px) {
  .sns-section {
    padding: 15px 8px !important;
  }
  
  .sns-grid {
    gap: 10px !important;
  }
  
  .fb-container,
  .ig-container {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* ===== ページ背景（.page-bg）調整 ===== */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--bg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

/* 背景画像をスマホで小さく（全体を見せる） */
@media (max-width:768px){
  .page-bg{
    background-size: 100% auto !important; /* 横幅に合わせる */
    background-repeat: repeat-y !important; /* 縦に繰り返し */
    background-position: center top !important;
    background-attachment: scroll !important;
    background-color: transparent !important; /* 黒を消す */
  }
}