/* =========================================
   MARUSHIN GROUP SNS Section (Final Merged)
   ========================================= */

/* ベーススタイル */
.ms-sns-section {
  width: 100%;
  padding: 100px 0;
  background-color: #f4f4f4;
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
  color: #333;
  box-sizing: border-box;
}

.ms-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px;
}

/* ヘッダーエリア */
.ms-section-header {
  text-align: left;
  margin-bottom: 50px;
}

.ms-title-en {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 56px;
  font-weight: 700;
  color: #b89d56;
  letter-spacing: 0.15em;
  margin: 0 0 15px 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.ms-title-jp {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin: 0 0 30px 0;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.ms-description {
  font-size: 14px;
  line-height: 2.0;
  color: #333;
  margin-bottom: 0;
  letter-spacing: 0.05em;
}

/* SNSカラムレイアウト */
.ms-sns-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.ms-sns-col {
  width: 49%;
  display: flex;
  flex-direction: column; 
}

/* --- 見出しラベル設定 (共通) --- */
.ms-sns-label {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  /* border-bottom は各色設定で制御します */
  padding-bottom: 15px;
}

.ms-sns-label h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  padding-left: 12px;
  letter-spacing: 0.05em;
  font-family: "Montserrat", sans-serif;
}

/* --- ★ブランドカラー別設定 --- */

/* 1. Instagram (Gradient Style) */
.color-insta {
  position: relative; /* 擬似要素の基準 */
  border-bottom: none; /* 共通の線を消す */
}

/* インスタ用：下線グラデーション */
.color-insta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* インスタ用：文字グラデーション */
.color-insta h3 {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

/* インスタ用：アイコン単色 (グラデーションの中間色) */
.instagram-icon {
  background-color: #dc2743;
}


/* 2. TikTok (Black Style) */
.color-tiktok {
  border-bottom: 2px solid #000000;
}
.color-tiktok h3 {
  color: #000000;
}
.tiktok-icon {
  background-color: #000000;
}


/* アイコン共通設定 (SVG Mask) */
.ms-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Icons Masks */
.instagram-icon {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>');
}
.tiktok-icon {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.49-3.35-3.98-5.6-.54-2.25-.24-4.71 1.05-6.66 1.21-1.87 3.27-3.14 5.51-3.23.63-.04 1.27.01 1.89.13l.03 4.17c-.57-.15-1.17-.18-1.75-.03-.78.17-1.48.59-1.99 1.18-.55.65-.85 1.49-.85 2.34s.3 1.69.85 2.34c.51.59 1.21 1.01 1.99 1.18.91.22 1.88.11 2.74-.28.98-.44 1.62-1.41 1.7-2.48.07-2.02.04-4.04.04-6.06V.02z"/></svg>');
}


/* --- 画像グリッド設定 --- */
.ms-img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px; 
  margin-bottom: 25px;
  flex-grow: 1; 
}

.ms-img-link {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.grid-square .ms-img-link { aspect-ratio: 1 / 1; }
.grid-vertical .ms-img-link { aspect-ratio: 9 / 16; }

.ms-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ms-img-link:hover img {
  transform: scale(1.08);
}

/* ボタン設定 */
.ms-sns-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 16px 0;
  background-color: transparent;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  border: 1px solid #333;
  transition: all 0.3s;
  margin-top: auto; 
}

/* ホバー時の色設定 */

/* Instagramのホバー：グラデーションの中間色(#dc2743)を使用 */
.ms-sns-col:has(.color-insta) .ms-sns-btn:hover {
  background-color: #dc2743;
  border-color: #dc2743;
  color: #fff;
}

/* TikTokのホバー：黒 */
.ms-sns-col:has(.color-tiktok) .ms-sns-btn:hover {
  background-color: #000000;
  border-color: #000000;
  color: #fff;
}


/* ===========================
   Breakpoints
=========================== */

@media screen and (max-width: 1024px) {
  .ms-container { padding: 0 40px; }
  .ms-sns-section { padding: 60px 0; }
  .ms-title-en { font-size: 40px; }
  .ms-sns-wrapper { gap: 30px; }
  .ms-img-grid { gap: 10px; }
}

@media screen and (max-width: 599px) {
  .ms-container { padding: 0 20px; }
  .ms-section-header { margin-bottom: 40px; }
  .ms-title-en { font-size: 32px; }
  .ms-sns-wrapper { flex-direction: column; gap: 60px; }
  .ms-sns-col { width: 100%; display: block; }
  .ms-sns-btn { margin-top: 0; }
  .ms-img-grid { gap: 8px; }
}

/* --- フッターエリア（ボタンとQRの横並び） --- */
.ms-sns-footer {
  margin-top: auto; /* カラムの最下部に配置 */
  display: flex;
  gap: 15px;      /* ボタンとQRの間隔 */
  align-items: stretch; /* 高さを揃える */
}

/* ボタンのスタイル調整 */
.ms-sns-btn {
  flex-grow: 1; /* 余ったスペースをボタンが埋める */
  margin-top: 0; /* 以前のマージン設定をリセット */
  /* paddingなどは以前のまま維持されます */
}

/* QRコードボックス */
.ms-qr-box {
  width: 80px;  /* QRコードの表示幅 */
  height: auto;
  flex-shrink: 0; /* 縮まないように固定 */
  background: #fff;
  border: 1px solid #ddd;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ===========================
   Breakpoints (レスポンシブ)
=========================== */

/* スマホ (599px以下) ではQRコードを隠す */
/* 理由: スマホで見ている人はボタンをタップすれば良いため */
@media screen and (max-width: 599px) {
  .ms-qr-box {
    display: none;
  }
}