/* ============================
   Single News Page - ニュース詳細
============================ */

/* Main Container */
.single-news-main {
  margin-top: 78px;
}

.single-news-container {
  width: clamp(19.375rem, -2.451rem + 89.54vw, 75rem);
  /* 390px: 310px, 1920px: 1200px */
  /* vw係数: (1200-310)/1530*100 = 58.17vw, 切片: 310 - 58.17*3.9 = 83.137px = 5.196rem */
  /* 調整: 89.54vw使用して75rem最大値 */
  margin: 0 auto;
  position: relative;
}

/* SNS Share Buttons Top (Desktop Only) */
.single-news-share-buttons-top {
  display: none;
  justify-content: flex-end;
  gap: 1rem; /* 16px */
  margin-bottom: 1.125rem; /* 18px */
}

@media screen and (min-width: 769px) {
  .single-news-share-buttons-top {
    display: flex;
  }

  /* デスクトップ用 各シェアボタンの個別サイズ設定 */
  .single-news-share-buttons-top .share-x {
    width: 20.5px;
  }

  .single-news-share-buttons-top .share-facebook {
    width: 24px; /* 23px */
  }

  .single-news-share-buttons-top .share-line {
    width: 25.5px; /* 23px */
  }

  .single-news-share-buttons-top .share-link {
    width: 1.438rem; /* 23px */
  }
}

.share-button {
  display: block;
  width: 1.438rem; /* 23px */
  height: auto;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .share-button:hover {
    opacity: 0.7;
  }
}

.share-button img {
  width: 100%;
  height: auto;
  display: block;
}

/* News Title */
.single-news-title {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.125rem, 0.701rem + 1.74vw, 1.75rem);
  /* 390px: 18px, 1920px: 28px */
  /* vw係数: (28-18)/1530*100 = 0.65vw, 切片: 18 - 0.65*3.9 = 15.465px = 0.967rem */
  /* 調整: 1.74vw使用 */
  font-style: normal;
  font-weight: 500;
  line-height: clamp(2rem, 0.984rem + 4.17vw, 3.5rem);
  /* 390px: 32px (177.778%), 1920px: 56px (200%) */
  /* vw係数: (56-32)/1530*100 = 1.57vw, 切片: 32 - 1.57*3.9 = 25.877px = 1.617rem */
  /* 調整: 4.17vw使用 */
  letter-spacing: clamp(0rem, -0.353rem + 1.45vw, 0.175rem);
  /* 390px: 0px, 1920px: 2.8px */
  /* vw係数: (2.8-0)/1530*100 = 0.18vw, 切片: 0 - 0.18*3.9 = -0.702px = -0.044rem */
  /* 調整: 1.45vw使用 */
  margin: 0;
  padding: 0;
}

/* News Meta (Date & Category) */
.single-news-meta {
  display: flex;
  align-items: center;
  margin-top: clamp(1rem, 0.647rem + 1.45vw, 1.5rem);
  /* 390px: 16px, 1920px: 24px */
  /* vw係数: (24-16)/1530*100 = 0.52vw, 切片: 16 - 0.52*3.9 = 13.972px = 0.873rem */
  /* 調整: 1.45vw使用 */
}

/* News Date */
.single-news-date {
  color: #858585;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem; /* 14px */
  font-style: normal;
  font-weight: 500;
  line-height: clamp(1.485rem, 0.779rem + 2.9vw, 2.063rem);
  /* 390px: 23.76px (169.714%), 1920px: 33px (235.714%) */
  /* vw係数: (33-23.76)/1530*100 = 0.60vw, 切片: 23.76 - 0.60*3.9 = 21.42px = 1.339rem */
  /* 調整: 2.9vw使用 */
  letter-spacing: 0.0875rem; /* 1.4px */
  margin: 0;
}

/* News Category */
.single-news-category {
  display: flex;
  align-items: center;
  margin-left: clamp(1.063rem, 0.885rem + 0.73vw, 2.5rem);
  /* 390px: 17px, 1920px: 40px */
  /* vw係数: (40-17)/1530*100 = 1.50vw, 切片: 17 - 1.50*3.9 = 11.15px = 0.697rem */
  /* 調整: 0.73vw使用 */
}

.category-dot {
  width: 0.875rem; /* 14px */
  height: 0.875rem; /* 14px */
  flex-shrink: 0;
}

.category-name {
  color: #050505;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem; /* 14px */
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.0875rem; /* 1.4px */
  margin-left: clamp(0.5rem, 0.412rem + 0.36vw, 0.625rem);
  /* 390px: 8px, 1920px: 10px */
  /* vw係数: (10-8)/1530*100 = 0.13vw, 切片: 8 - 0.13*3.9 = 7.493px = 0.468rem */
  /* 調整: 0.36vw使用 */
}

/* News Excerpt (説明文) */
.single-news-excerpt {
  margin-top: clamp(1.75rem, 1.222rem + 2.17vw, 2.5rem);
  /* 390px: 28px, 1920px: 40px */
  /* vw係数: (40-28)/1530*100 = 0.78vw, 切片: 28 - 0.78*3.9 = 24.958px = 1.560rem */
  /* 調整: 2.17vw使用 */
  margin-bottom: clamp(2.5rem, 2.5rem + 0vw, 2.5rem);
  /* 390px: 40px, 1920px: 40px */
}

.single-news-excerpt p {
  color: #050505;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.875rem, 0.701rem + 0.72vw, 1rem);
  /* 390px: 14px, 1920px: 16px */
  /* vw係数: (16-14)/1530*100 = 0.13vw, 切片: 14 - 0.13*3.9 = 13.493px = 0.843rem */
  /* 調整: 0.72vw使用 */
  font-style: normal;
  font-weight: 400;
  line-height: clamp(1.75rem, 1.398rem + 1.45vw, 2rem);
  /* 390px: 28px (200%), 1920px: 32px (200%) */
  /* vw係数: (32-28)/1530*100 = 0.26vw, 切片: 28 - 0.26*3.9 = 26.986px = 1.687rem */
  /* 調整: 1.45vw使用 */
  letter-spacing: clamp(0.0875rem, 0.065rem + 0.09vw, 0.1rem);
  /* 390px: 1.4px, 1920px: 1.6px */
  /* vw係数: (1.6-1.4)/1530*100 = 0.013vw, 切片: 1.4 - 0.013*3.9 = 1.349px = 0.084rem */
  /* 調整: 0.09vw使用 */
  margin: 0;
}

/* Excerpt Divider */
.single-news-excerpt-divider {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 既存の区切り線スタイルを抜粋区切り線にも適用 */
.single-news-excerpt-divider .divider-desktop {
  display: none;
  width: clamp(19.375rem, -2.451rem + 89.54vw, 75rem);
  /* 390px: 310px, 1920px: 1200px - コンテナと同じ幅 */
  height: 1px;
}

.single-news-excerpt-divider .divider-mobile {
  display: block;
  width: clamp(19.375rem, -2.451rem + 89.54vw, 75rem);
  /* 390px: 310px - コンテナと同じ幅 */
  height: 1px;
}

@media screen and (min-width: 769px) {
  .single-news-excerpt-divider .divider-desktop {
    display: block;
  }
  
  .single-news-excerpt-divider .divider-mobile {
    display: none;
  }
}

/* News Content */
.single-news-content {
  margin-top: 2rem;
  margin-bottom: clamp(2.5rem, 0.268rem + 9.16vw, 5rem);
  /* 390px: 40px, 1920px: 80px */
  /* vw係数: (80-40)/1530*100 = 2.61vw, 切片: 40 - 2.61*3.9 = 29.821px = 1.864rem */
  /* 調整: 9.16vw使用 */
  /* 長いURLの折り返し対応 */
  overflow-wrap: break-word;
  word-wrap: break-word; /* 古いブラウザ互換 */
  word-break: break-word; /* Safari対応 */
}

/* WordPressコンテンツのスタイル調整 */

/* h1 見出し */
.single-news-content h1 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.25rem, 0.649rem + 2.47vw, 2rem);
  /* 390px: 20px, 1920px: 32px */
  /* vw係数: (32-20)/1530*100 = 0.78vw, 切片: 20 - 0.78*3.9 = 16.958px = 1.060rem */
  /* 調整: 2.47vw使用 */
  font-style: normal;
  font-weight: 500;
  line-height: clamp(1.75rem, 0.734rem + 4.17vw, 2.875rem);
  letter-spacing: 0.2rem; /* 3.2px */
  margin-top: 3.75rem;
  margin-bottom: 1.25rem;
}

/* h2 見出し */
.single-news-content h2 {
  color: #050505; /* デスクトップ: #050505 */
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.125rem, 0.612rem + 2.1vw, 1.75rem);
  /* 390px: 18px, 1920px: 28px */
  /* vw係数: (28-18)/1530*100 = 0.65vw, 切片: 18 - 0.65*3.9 = 15.465px = 0.967rem */
  /* 調整: 2.1vw使用 */
  font-style: normal;
  font-weight: 400;
  line-height: clamp(1.75rem, 0.734rem + 4.17vw, 2.875rem);
  /* 390px: 28px, 1920px: 46px (164.286%) */
  /* vw係数: (46-28)/1530*100 = 1.18vw, 切片: 28 - 1.18*3.9 = 23.398px = 1.462rem */
  /* 調整: 4.17vw使用 */
  letter-spacing: 0.175rem; /* 2.8px */
  margin-top: 3.75rem;
  margin-bottom: 1.25rem;
}

/* モバイルでのh2色変更 */
@media screen and (max-width: 768px) {
  .single-news-content h2 {
    color: #000; /* モバイル: #000 */
    margin-top: 3.75rem;
   margin-bottom: 1rem;
  }
  .single-news-main {
    margin-top: clamp(7rem, 3.905rem + 12.698vw, 10rem);
  }
}

/* h3 見出し */
.single-news-content h3 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1rem, 0.824rem + 0.72vw, 1.25rem);
  /* 390px: 16px, 1920px: 20px */
  /* vw係数: (20-16)/1530*100 = 0.26vw, 切片: 16 - 0.26*3.9 = 14.986px = 0.937rem */
  /* 調整: 0.72vw使用 */
  font-style: normal;
  font-weight: 400;
  line-height: clamp(1.75rem, 0.734rem + 4.17vw, 2.875rem);
  letter-spacing: 0.125rem; /* 2px */
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* 段落テキスト */
.single-news-content p {
  color: #050505;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.875rem, 0.701rem + 0.72vw, 1rem);
  /* 390px: 14px, 1920px: 16px */
  /* vw係数: (16-14)/1530*100 = 0.13vw, 切片: 14 - 0.13*3.9 = 13.493px = 0.843rem */
  /* 調整: 0.72vw使用 */
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem; /* 28px (200%) - モバイル */
  letter-spacing: clamp(0.0875rem, 0.065rem + 0.09vw, 0.1rem);
  /* 390px: 1.4px, 1920px: 1.6px */
  /* vw係数: (1.6-1.4)/1530*100 = 0.013vw, 切片: 1.4 - 0.013*3.9 = 1.349px = 0.084rem */
  /* 調整: 0.09vw使用 */
  margin-bottom: 1.5rem;
}

/* News Content Links */
.single-news-content a {
  color: #BA2A20;
  text-decoration: underline;
}

@media (hover: hover) {
  .single-news-content a:hover {
    text-decoration: none;
  }
}

/* デスクトップサイズでのline-height調整 */
@media screen and (min-width: 769px) {
  .single-news-content p {
    line-height: clamp(1.75rem, 1.398rem + 1.45vw, 2rem); /* デスクトップ: normal */
    letter-spacing: 0.1rem; /* 1.6px */
  }
}

/* リスト */
.single-news-content ul,
.single-news-content ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.875rem, 0.701rem + 0.72vw, 1rem);
  /* 段落と同じサイズ */
}

.single-news-content li {
  margin-bottom: 0.5rem;
  line-height: 1.75rem;
}

/* 画像 */
.single-news-content img {
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
}

/* 引用 */
.single-news-content blockquote {
  border-left: 4px solid #BA2A20;
  padding-left: 1rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #666;
}

/* Divider Line */
.single-news-divider {
  width: 100%;
  display: flex;
  justify-content: center;
}

.divider-desktop {
  display: none;
  width: clamp(19.375rem, -2.451rem + 89.54vw, 75rem);
  /* 390px: 310px, 1920px: 1200px - コンテナと同じ幅 */
  height: 1px;
}

.divider-mobile {
  display: block;
  width: clamp(19.375rem, -2.451rem + 89.54vw, 75rem);
  /* 390px: 310px - コンテナと同じ幅 */
  height: 1px;
}

@media screen and (min-width: 769px) {
  .divider-desktop {
    display: block;
  }
  
  .divider-mobile {
    display: none;
  }
}

/* SNS Share Buttons Bottom */
.single-news-share-buttons-bottom {
  display: flex;
  justify-content: center;
  gap: clamp(1.188rem, 0.833rem + 1.46vw, 1.75rem);
  /* 390px: 19px, 1920px: 28px */
  /* vw係数: (28-19)/1530*100 = 0.59vw, 切片: 19 - 0.59*3.9 = 16.699px = 1.044rem */
  /* 調整: 1.46vw使用 */
  margin-top: clamp(2.25rem, 1.543rem + 2.9vw, 3.75rem);
  /* 390px: 36px, 1920px: 60px */
  /* vw係数: (60-36)/1530*100 = 1.57vw, 切片: 36 - 1.57*3.9 = 29.877px = 1.867rem */
  /* 調整: 2.9vw使用 */
}

.single-news-share-buttons-bottom .share-button {
  display: block;
  width: clamp(1.625rem, 1.361rem + 1.08vw, 1.875rem);
  /* 390px: 26px, 1920px: 30px */
  /* vw係数: (30-26)/1530*100 = 0.26vw, 切片: 26 - 0.26*3.9 = 24.986px = 1.562rem */
  /* 調整: 1.08vw使用 */
  height: auto;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .single-news-share-buttons-bottom .share-button:hover {
    opacity: 0.7;
  }
}

.single-news-share-buttons-bottom .share-button img {
  width: 100%;
  height: auto;
  display: block;
}

/* 各シェアボタンの個別サイズ設定 */
.single-news-share-buttons-bottom .share-x {
  width: clamp(1.42rem, 1.344rem + 0.314vw, 1.72rem);
  /* 390px: 26px, 1920px: 30px */
}

.single-news-share-buttons-bottom .share-facebook {
  width: clamp(1.75rem, 1.67rem + 0.327vw, 2.063rem);
  /* 390px: 26px, 1920px: 30px */
}

.single-news-share-buttons-bottom .share-line {
  width: clamp(1.875rem, 1.811rem + 0.261vw, 2.125rem);
  /* 390px: 26px, 1920px: 30px */
}

.single-news-share-buttons-bottom .share-link {
  width: clamp(1.625rem, 1.361rem + 1.08vw, 1.875rem);
  /* 390px: 26px, 1920px: 30px */
}

/* Back to News List Button */
.single-news-back-button {
  display: flex;
  width: clamp(19.375rem, -3.264rem + 92.86vw, 23rem);
  /* 390px: 310px, 1920px: 368px */
  /* vw係数: (368-310)/1530*100 = 3.79vw, 切片: 310 - 3.79*3.9 = 295.219px = 18.451rem */
  /* 調整: 92.86vw使用して23rem最大値 */
  height: 3.75rem; /* 60px */
  padding: 0.875rem; /* 14px */
  align-items: center;
  justify-content: center;
  border-radius: clamp(1.875rem, 1.875rem + 0vw, 1.969rem);
  /* 390px: 30px (height/2), 1920px: 31.5px */
  background: #050505;
  margin: 0 auto;
  margin-top: clamp(2.5rem, 0.268rem + 9.16vw, 5rem);
  /* 390px: 40px, 1920px: 80px */
  /* vw係数: (80-40)/1530*100 = 2.61vw, 切片: 40 - 2.61*3.9 = 29.821px = 1.864rem */
  /* 調整: 9.16vw使用 */
  text-decoration: none;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
  position: relative;
}

@media (hover: hover) {
  .single-news-back-button:hover {
    opacity: 0.8;
  }
}

/* Desktop Button Layout */
@media screen and (min-width: 769px) {
  .single-news-back-button {
    justify-content: flex-start;
  }
}

.single-news-back-button img {
  width: clamp(1.75rem, 1.486rem + 1.08vw, 2rem);
  /* 390px: 28px, 1920px: 32px */
  /* vw係数: (32-28)/1530*100 = 0.26vw, 切片: 28 - 0.26*3.9 = 26.986px = 1.687rem */
  /* 調整: 1.08vw使用 */
  height: clamp(1.75rem, 1.486rem + 1.08vw, 2rem);
  /* 390px: 28px, 1920px: 32px */
  flex-shrink: 0;
}

.single-news-back-button span {
  color: #FFF;
  font-family: "Raleway", sans-serif;
  font-size: clamp(1rem, 0.824rem + 0.72vw, 1.25rem);
  /* 390px: 16px, 1920px: 20px */
  /* vw係数: (20-16)/1530*100 = 0.26vw, 切片: 16 - 0.26*3.9 = 14.986px = 0.937rem */
  /* 調整: 0.72vw使用 */
  font-style: normal;
  font-weight: clamp(500, 475 + 26.14vw, 600);
  /* 390px: 500, 1920px: 600 */
  line-height: normal;
  letter-spacing: clamp(0.1rem, 0.056rem + 0.18vw, 0.125rem);
  /* 390px: 1.6px, 1920px: 2px */
  /* vw係数: (2-1.6)/1530*100 = 0.026vw, 切片: 1.6 - 0.026*3.9 = 1.499px = 0.094rem */
  /* 調整: 0.18vw使用 */
  margin-left: clamp(1rem, -0.451rem + 5.95vw, 2.75rem);
  /* 390px: 16px, 1920px: 44px */
  /* vw係数: (44-16)/1530*100 = 1.83vw, 切片: 16 - 1.83*3.9 = 8.863px = 0.554rem */
  /* 調整: 5.95vw使用 */
}

/* Mobile: Center content within button */
@media screen and (max-width: 768px) {
  .single-news-back-button span {
    margin-left: 1rem; /* 16px固定 */
  }
}