/*!
Theme Name: XWRITE
Theme URI: https://xwrite.jp/
Author: XServer Inc.
Author URI: https://www.xserver.co.jp/
Description: エックスサーバー株式会社が提供するWordPressテーマ「XWRITE」
Version: 3.0.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.txt
Text Domain: xwrite
*/

.type-post{
max-width:850px;
margin:0 auto;
}

.cn-header-top {
  background: #1e5fa8;
  color: white;
  padding: 8px 0;
  font-size: 13px;
}

.cn-header-top-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cn-header-links {
  display: flex;
  gap: 20px;
}

.cn-header-links a {
  color: white;
  text-decoration: none;
}

.cn-main-header {
  background: white;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}
gecko-coin-price-marquee-widget {
    margin-top: 37px;
}
.cn-main-header .cn-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cn-logo {
  font-size: 24px;
  font-weight: bold;
  color: #1e5fa8;
}

.cn-nav {
  display: flex;
  gap: 30px;
}

.cn-nav a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  padding: 10px 0;
}

/* Hero Section - exactly like reference but simplified */
.cn-hero-section {
  background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
  padding: 60px 0 80px;
  position: relative;
  overflow: hidden;
}

.cn-hero-section .cn-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  min-height: 400px;
}

.cn-hero-content {
  flex: 1;
  padding-right: 40px;
}

.cn-hero-tagline {
  color: white!important;
text-align: left !important;
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: normal;
}

.cn-hero-section h1 {
margin-top: 0px!important;
  font-size: 48px !important;
  color: white !important;
  font-weight: bold !important;
  line-height: 1.2 !important;
  margin-bottom: 30px !important;
}

.cn-hero-subtitle {
  font-size: 16px;
  color: white!important;
  line-height: 1.6;
  margin-bottom: 20px;
}

.cn-hero-visual {
  flex: 1;
  height: 400px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e5fa8;
  font-size: 18px;
}

/* Blue banner section */
.cn-blue-banner {
  background: #1e5fa8;
  color: white;
  padding: 20px 0;
  text-align: center;
}

.cn-blue-banner .cn-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.cn-banner-icon {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Section styles matching reference */
.cn-section {
  padding: 60px 0;
}

.cn-section:nth-child(even) {
  background: #f8f9fa;
}

.cn-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.cn-section-header {
  text-align: left;
  margin-bottom: 40px;
}

.cn-section-category {
  color: #666;
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 10px;
}

.cn-section h2 {
  font-size: 32px !important;
  color: #333 !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
  margin-top: 0px !important;
padding: 0 !important;
background-color: transparent !important;
border-radius: 0 !important;

}

.cn-section-description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.cn-btn-more {
  display: inline-block;
  background: #1e5fa8;
  color: white;
  padding: 12px 30px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  margin-top: 20px;
}

.cn-btn-outline {
  display: inline-block;
  border: 1px solid #1e5fa8;
  color: #1e5fa8;
  padding: 12px 30px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  margin-left: 10px;
}

/* News section */
.cn-news-list {
  margin-top: 30px;
}

.cn-news-item {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  gap: 20px;
}

.cn-news-icon {
  width: 40px;
  height: 40px;
  background: #e3f2fd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e5fa8;
  flex-shrink: 0;
}

.cn-news-content {
  flex: 1;
}

.cn-news-category {
  background: #1e5fa8;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 10px;
}

.cn-news-date {
  color: #666;
  font-size: 12px;
}

.cn-news-title {
  margin-top: 5px;
  font-size: 14px;
  color: #333;
}

/* Service grid */
.cn-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.cn-service-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cn-service-image {
  height: 200px;
  background: #f0f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #1e5fa8;
  border-radius: 8px 8px 0 0;
}

.cn-service-content {
  padding: 20px;
}

.cn-service-content h3 {
  font-size: 18px !important;
  color: #333 !important;
  margin-bottom: 10px !important;
}

.cn-service-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.cn-service-btn {
  display: inline-block;
  background: #1e5fa8;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
}

/* FAQ Section */
.cn-faq-list {
  margin-top: 30px;
}

.cn-faq-item {
  border-bottom: 1px solid #eee;
}

.cn-faq-question {
  padding: 20px !important;
  font-size: 16px !important;
  color: #333 !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.cn-faq-question p {
  font-size: 16px !important;
  color: #333 !important;
  margin: 0 !important;
  font-weight: normal !important;
}

.cn-faq-question::after {
  content: '+';
  font-size: 20px;
  color: #1e5fa8;
}

.cn-faq-question.cn-active::after {
  content: '−';
}

.cn-faq-answer {
  padding: 20px;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  display: none;
}

/* Company info section */
.cn-company-info-grid {
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: center;
  margin-top: 40px;
}

.cn-company-info-list h3 {
  font-size: 16px !important;
  color: #333 !important;
  margin-bottom: 15px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #eee !important;
}


/* Agency section - like reference */
.cn-agency-section {
  position: relative;
}

.cn-agency-content {
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: center;
}

.cn-agency-visual {
  height: 400px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><rect fill="%23f5f5f5" width="400" height="400"/><rect x="50" y="50" width="300" height="200" fill="%23e0e0e0" rx="10"/><rect x="80" y="80" width="240" height="10" fill="%23bdbdbd" rx="5"/><rect x="80" y="110" width="180" height="10" fill="%23bdbdbd" rx="5"/><rect x="80" y="140" width="200" height="10" fill="%23bdbdbd" rx="5"/><circle cx="300" cy="320" r="60" fill="%231e5fa8" opacity="0.8"/><circle cx="320" cy="300" r="40" fill="%2342a5f5" opacity="0.6"/></svg>') no-repeat center;
  background-size: contain;
}

/* Footer - exactly like reference */
.cn-footer {
  background: #1e5fa8;
  color: white;
  padding: 40px 0 20px;
}

.cn-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 30px;
}

.cn-footer-section h4 {
  font-size: 16px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.cn-footer-icon {
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
}

.cn-footer-section ul {
  list-style: none;
}

.cn-footer-section li {
  margin-bottom: 8px;
}

.cn-footer-section a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 14px;
}

.cn-footer-section a:hover {
  color: white;
}

.cn-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 20px;
  text-align: center;
  font-size: 12px;
  color: #cbd5e1;
}

/* Responsive */
@media (max-width: 768px) {
  .cn-hero-section .cn-container {
      flex-direction: column;
      text-align: center;
  }

  .cn-hero-content {
      padding-right: 0;
      margin-bottom: 30px;
  }

  .cn-hero-section h1 {
      font-size: 36px !important;
  }

  .cn-service-grid {
      grid-template-columns: 1fr;
  }

  .cn-company-info-grid,
  .cn-agency-content {
      grid-template-columns: 1fr;
  }

  .cn-footer-grid {
      grid-template-columns: repeat(2, 1fr);
  }
}




/* N-SSIライクなクリーンデザイン追加CSS */

/* 基本のアニメーション定義 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

/* ヘッダーの洗練 */
.cn-header-top {
background: linear-gradient(135deg, #1e5fa8 0%, #1976d2 100%);
box-shadow: 0 1px 3px rgba(30, 95, 168, 0.2);
}

.cn-main-header {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(8px);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}

.cn-logo {
background: linear-gradient(135deg, #1e5fa8, #1976d2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}

.cn-nav a {
position: relative;
transition: all 0.3s ease;
font-weight: 500;
}

.cn-nav a:hover {
color: #1e5fa8;
}

.cn-nav a::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 2px;
background: #1e5fa8;
transition: all 0.3s ease;
transform: translateX(-50%);
}

.cn-nav a:hover::after {
width: 80%;
}

/* ヒーローセクションの洗練 */
.cn-hero-section {
background: white!important;
position: relative;
}

.cn-hero-content {
animation: fadeInLeft 0.8s ease-out;
}

.cn-hero-tagline {
color: #1e5fa8;
font-weight: 600;
position: relative;
padding-left: 12px;
}

.cn-hero-tagline::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 16px;
background: white;
border-radius: 2px;
transform: translateY(-50%);
}

.cn-hero-section h1 {
background: linear-gradient(135deg, white 0%, white 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}


.cn-hero-visual img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
transition: transform 0.4s ease;
}

.cn-hero-visual:hover img {
transform: scale(1.02);
}

/* セクションの洗練 */
.cn-section {
position: relative;
}

.cn-section-header {
animation: fadeInUp 0.6s ease-out;
}

.cn-section-category {
color: #1e5fa8;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 13px;
}

.cn-section h2 {
position: relative;
color: #333;
}

.cn-section h2::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: #1e5fa8;
border-radius: 2px;
}

.cn-btn-more {
background: #1e5fa8;
box-shadow: 0 4px 12px rgba(30, 95, 168, 0.3);
transition: all 0.3s ease;
border-radius: 6px;
font-weight: 500;
}

.cn-btn-more:hover {
background: #1976d2;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(30, 95, 168, 0.4);
}

.cn-btn-outline {
border: 2px solid #1e5fa8;
color: #1e5fa8;
transition: all 0.3s ease;
border-radius: 6px;
font-weight: 500;
}

.cn-btn-outline:hover {
background: #1e5fa8;
color: white;
transform: translateY(-1px);
}

/* ニュースセクションの洗練 */
.cn-news-item {
transition: all 0.3s ease;
padding: 24px 20px;
border-radius: 8px;
margin-bottom: 8px;
background: #ffffff;
border: 1px solid #f0f0f0;
}

.cn-news-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(30, 95, 168, 0.1);
border-color: rgba(30, 95, 168, 0.2);
}

.cn-news-icon {
background: linear-gradient(135deg, #f0f7ff, #e3f2fd);
box-shadow: 0 2px 8px rgba(30, 95, 168, 0.15);
transition: all 0.3s ease;
border: 1px solid rgba(30, 95, 168, 0.1);
}

.cn-news-item:hover .cn-news-icon {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
transform: scale(1.05);
}

.cn-news-category {
background: #1e5fa8;
font-weight: 500;
border-radius: 4px;
}

.cn-news-title {
transition: color 0.3s ease;
font-weight: 500;
}

.cn-news-item:hover .cn-news-title {
color: #1e5fa8;
}

/* サービスグリッドの洗練 */
.cn-service-card {
background: #ffffff;
border: 1px solid #f0f0f0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border-radius: 12px;
overflow: hidden;
}

.cn-service-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(30, 95, 168, 0.15);
border-color: rgba(30, 95, 168, 0.2);
}

.cn-service-image {
background: linear-gradient(135deg, #f0f7ff, #e3f2fd);
transition: all 0.3s ease;
border-bottom: 1px solid #f0f0f0;
}

.cn-service-card:hover .cn-service-image {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
}

.cn-service-content h3 {
color: #333;
font-weight: 600;
}

.cn-service-content p {
color: #666;
line-height: 1.7;
}

.cn-service-btn {
background: #1e5fa8;
transition: all 0.3s ease;
border-radius: 4px;
font-weight: 500;
}

.cn-service-btn:hover {
background: #1976d2;
transform: translateY(-1px);
}


.cn-faq-item:hover {
box-shadow: 0 4px 16px rgba(30, 95, 168, 0.1);
border-color: rgba(30, 95, 168, 0.2);
}

.cn-faq-question {
background: white;
transition: all 0.3s ease;
font-weight: 500;
}

.cn-faq-question:hover {
background: rgba(240, 247, 255, 0.9);
}

.cn-faq-question::after {
color: #1e5fa8;
font-weight: bold;
transition: all 0.3s ease;
}

.cn-faq-answer {
background: #ffffff;
line-height: 1.7;
}

/* 会社情報セクションの洗練 */
.cn-company-info-list h3 {
position: relative;
padding-left: 16px;
transition: all 0.3s ease;
font-weight: 500;
}

.cn-company-info-list h3::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 16px;
background: #1e5fa8;
border-radius: 2px;
transform: translateY(-50%);
}

.cn-company-info-list h3:hover {
color: #1e5fa8;
transform: translateX(4px);
}


/* エージェンシーセクションの洗練 */
.cn-agency-section {
position: relative;
}

.cn-agency-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(30, 95, 168, 0.05) 0%, transparent 50%);
pointer-events: none;
}

/* N-SSIライクなクリーンデザイン追加CSS */

/* 基本のアニメーション定義 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

/* ヘッダーの洗練 */
.cn-header-top {
background: linear-gradient(135deg, #1e5fa8 0%, #1976d2 100%);
box-shadow: 0 1px 3px rgba(30, 95, 168, 0.2);
}

.cn-main-header {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(8px);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}

.cn-logo {
background: linear-gradient(135deg, #1e5fa8, #1976d2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}

.cn-nav a {
position: relative;
transition: all 0.3s ease;
font-weight: 500;
}

.cn-nav a:hover {
color: #1e5fa8;
}

.cn-nav a::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 2px;
background: #1e5fa8;
transition: all 0.3s ease;
transform: translateX(-50%);
}

.cn-nav a:hover::after {
width: 80%;
}

/* ヒーローセクションの洗練 */
.cn-hero-section {
background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
position: relative;
}

.cn-hero-content {
animation: fadeInLeft 0.8s ease-out;
}

.cn-hero-tagline {
color: #1e5fa8;
font-weight: 600;
position: relative;
padding-left: 12px;
}

.cn-hero-tagline::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 16px;
background: white;
border-radius: 2px;
transform: translateY(-50%);
}

.cn-hero-section h1 {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.cn-hero-visual img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
transition: transform 0.4s ease;
}

.cn-hero-visual:hover img {
transform: scale(1.02);
}

/* セクションの洗練 */
.cn-section {
position: relative;
}

.cn-section-header {
animation: fadeInUp 0.6s ease-out;
}

.cn-section-category {
color: #1e5fa8;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 13px;
}

.cn-section h2 {
position: relative;
color: #333;
}

.cn-section h2::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: #1e5fa8;
border-radius: 2px;
}

.cn-btn-more {
background: #1e5fa8;
box-shadow: 0 4px 12px rgba(30, 95, 168, 0.3);
transition: all 0.3s ease;
border-radius: 6px;
font-weight: 500;
}

.cn-btn-more:hover {
background: #1976d2;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(30, 95, 168, 0.4);
}

.cn-btn-outline {
border: 2px solid #1e5fa8;
color: #1e5fa8;
transition: all 0.3s ease;
border-radius: 6px;
font-weight: 500;
}

.cn-btn-outline:hover {
background: #1e5fa8;
color: white;
transform: translateY(-1px);
}

/* ニュースセクションの洗練 */
.cn-news-item {
transition: all 0.3s ease;
padding: 24px 20px;
border-radius: 8px;
margin-bottom: 8px;
background: #ffffff;
border: 1px solid #f0f0f0;
}

.cn-news-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(30, 95, 168, 0.1);
border-color: rgba(30, 95, 168, 0.2);
}

.cn-news-icon {
background: linear-gradient(135deg, #f0f7ff, #e3f2fd);
box-shadow: 0 2px 8px rgba(30, 95, 168, 0.15);
transition: all 0.3s ease;
border: 1px solid rgba(30, 95, 168, 0.1);
}

.cn-news-item:hover .cn-news-icon {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
transform: scale(1.05);
}

.cn-news-category {
background: #1e5fa8;
font-weight: 500;
border-radius: 4px;
}

.cn-news-title {
transition: color 0.3s ease;
font-weight: 500;
}

.cn-news-item:hover .cn-news-title {
color: #1e5fa8;
}

/* サービスグリッドの洗練 */
.cn-service-card {
background: #ffffff;
border: 1px solid #f0f0f0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border-radius: 12px;
overflow: hidden;
}

.cn-service-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(30, 95, 168, 0.15);
border-color: rgba(30, 95, 168, 0.2);
}

.cn-service-image {
background: linear-gradient(135deg, #f0f7ff, #e3f2fd);
transition: all 0.3s ease;
border-bottom: 1px solid #f0f0f0;
}

.cn-service-card:hover .cn-service-image {
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
}

.cn-service-content h3 {
color: #333;
font-weight: 600;
}

.cn-service-content p {
color: #666;
line-height: 1.7;
}

.cn-service-btn {
background: #1e5fa8;
transition: all 0.3s ease;
border-radius: 4px;
font-weight: 500;
}

.cn-service-btn:hover {
background: #1976d2;
transform: translateY(-1px);
}



.cn-faq-item:hover {
box-shadow: 0 4px 16px rgba(30, 95, 168, 0.1);
border-color: rgba(30, 95, 168, 0.2);
}

.cn-faq-question {
background: white;
transition: all 0.3s ease;
font-weight: 500;
}

.cn-faq-question:hover {
background: rgba(240, 247, 255, 0.9);
}

.cn-faq-question::after {
color: #1e5fa8;
font-weight: bold;
transition: all 0.3s ease;
}

.cn-faq-answer {
background: #ffffff;
line-height: 1.7;
}

/* 会社情報セクションの洗練 */
.cn-company-info-list h3 {
position: relative;
padding-left: 16px;
transition: all 0.3s ease;
font-weight: 500;
}

.cn-company-info-list h3::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 16px;
background: #1e5fa8;
border-radius: 2px;
transform: translateY(-50%);
}

.cn-company-info-list h3:hover {
color: #1e5fa8;
transform: translateX(4px);
}

/* エージェンシーセクションの洗練 */
.cn-agency-section {
background: linear-gradient(135deg, #f0f4ff 0%, #e6f1ff 50%, #ffffff 100%);
position: relative;
}

.cn-agency-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(30, 95, 168, 0.05) 0%, transparent 50%);
pointer-events: none;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
.cn-hero-section h1 {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.cn-service-grid {
gap: 16px;
}

.cn-service-card {
margin-bottom: 16px;
}

.cn-news-item,
.cn-faq-item {
margin-bottom: 8px;
padding: 20px 16px;
}
}

/* 微細なアニメーション */
.cn-section-header,
.cn-news-item,
.cn-service-card,
.cn-faq-item {
animation: fadeInUp 0.6s ease-out;
}

.cn-service-card:nth-child(2) { animation-delay: 0.1s; }
.cn-service-card:nth-child(3) { animation-delay: 0.2s; }
.cn-service-card:nth-child(4) { animation-delay: 0.3s; }
.cn-service-card:nth-child(5) { animation-delay: 0.4s; }

.cn-news-item:nth-child(2) { animation-delay: 0.1s; }
.cn-news-item:nth-child(3) { animation-delay: 0.2s; }
.cn-news-item:nth-child(4) { animation-delay: 0.3s; }

.cn-faq-item:nth-child(2) { animation-delay: 0.1s; }
.cn-faq-item:nth-child(3) { animation-delay: 0.2s; }

.cn-service-content h3 {
position: static!important;
padding: 0!important;;
border-bottom: none!important;
}

.company-container{
display:flex;
justify-content: space-between;
}


.cn-company-info-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
font-size: 16px;
}

.cn-company-info-table th,
.cn-company-info-table td {
border: 1px solid #ccc;
padding: 10px 12px;
text-align: left;
}

.cn-company-info-table th {
background-color: #f9f9f9;
font-weight: bold;
width: 30%;
}



.cn-company-info-grid {
justify-content: space-between;
align-items: flex-start;
gap: 2rem; /* 任意の余白調整 */
}
.cn-company-info-table {
width: 100%;
max-width: 500px; /* 表の最大幅 */
}


@media (max-width: 768px) {
.company-container {
display:block;
}

..cn-company-info-grid {
display:block;
}

.cn-company-visual {
display: none;
}

}


.cn-company-visual {
width: 50%;
}



table {
border-collapse: collapse;
border: 1px solid #000;
}

th, td {
border: 1px solid #000;
padding: 8px;
}



/* MVセクション全幅化 - 上書きCSS */

/* MVセクションを全幅にする */
.cn-hero-section {
width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
background: white !important;
}

/* MVセクション内のコンテナを全幅に */
.cn-hero-section .cn-container {
max-width: none !important;
width: 100% !important;
padding: 60px 0 80px !important;
margin: 0 !important;
}

/* MVセクションの内部コンテンツは中央寄せで適切な幅に */
.cn-hero-section .cn-container > * {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* フレックスレイアウトの調整 */
.cn-hero-section .cn-container {
display: flex !important;
align-items: center !important;
min-height: 400px !important;
justify-content: center !important;
}

/* コンテンツエリアの調整 */
.cn-hero-content {
flex: 1 !important;
padding-right: 40px !important;
max-width: 600px !important;
}

.cn-hero-visual {
flex: 1 !important;
height: 400px !important;
max-width: 600px !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
.cn-hero-section .cn-container {
flex-direction: column !important;
text-align: center !important;
padding: 40px 20px 60px !important;
}

.cn-hero-content {
padding-right: 0 !important;
margin-bottom: 30px !important;
max-width: 100% !important;
}

.cn-hero-visual {
max-width: 100% !important;
}
}



.cn-hero-section {
position: relative;
overflow: hidden;
}

.cn-hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}

.cn-hero-section * {
z-index: 1;
}

#about {
position: relative;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
width: 100vw;
background-image: url('https://coinage.co.jp/wp-content/uploads/2025/06/coinnage-companyimg-scaled.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}

#about .cn-container {
max-width: 1200px; /* または元のコンテンツ幅 */
margin: 0 auto;
padding: 0 20px; /* 左右の余白 */
}


.cn-agency-section {
position: relative;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
width: 100vw;
}

.cn-agency-section .cn-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}


.cn-hero-subtitle {
font-weight: bold;
}



/* ここからニュースセクション */
.news-item {
display: flex;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #eee;
}

.news-date {
font-size: 14px;
color: #666;
margin-right: 15px;
}

.news-category {
display: inline-block;
padding: 4px 12px;
font-size: 12px;
color: #fff;
border-radius: 4px;
background-color: #1b3d7c;
min-width: 100px;
text-align: center;
}



.news-text {
margin-left: 20px;
}

.btn_wrap {
text-align: center;
font-weight: 700;
font-size: 1em;
}

.btn-square {
display: inline-block;
text-decoration: none;
background: #4bb739;
color: #FFF !important;
border-bottom: solid 4px #2f8a0a;
border-radius: 3px;
margin: 0 auto;
text-align: center;
display: block;
font-size: 16px;
line-height: 1.5;
padding: 1.1em;
position: relative;
width: 100%;
}



/* ここから装飾レギュレーション用CSS */






.stitch-blue ul {
margin: 10px 10px 2em 10px;
border: none;
border-radius: 0px;
background: white;
box-shadow: 0 0 0 2px #5393e7;
   color: #5393e7;
padding: 1em 1em 1em 3.5em;
}
.stitch-blue li {
list-style-type: none !important;
padding: 8px 0;
position: relative;
}
.stitch-blue li:before {
position: absolute;
left: -41px;
color: #5393e7;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f2bd";
font-size: 30px;
top: -8px;
}

.scroll-table {
/* max-width: 100%; */
white-space: nowrap;
}

.scroll-table table {
border-collapse: collapse;
}
.js-scrollable td, .js-scrollable th {
background-color: transparent;
white-space: normal;
min-width: 166px;
max-width: 330px;
}
.scroll-table th {
background-color: #ddd;
}
table.tate .fixed01 {
position: sticky;
left: 0;
color: #fff;
background: #333 !important;
font-weight: bold;
text-align: center;
z-index: 9999;
}
.tate th,td{
text-align:center;
}
.button_solid004 a {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
max-width: 240px;
padding: 10px 25px;
margin: 0 10px;
color: #FFF;
text-decoration:none;
transition: 0.3s ease-in-out;
font-weight: 600;
background: #6bb6ff;
border-radius: 8px;
border-bottom: solid 5px #1d7fde;
}
.button_solid004 a:after {
position: absolute;
top: 50%;
right: 10px;
font-size: 20px;
transition: 0.2s ease-in-out;
content: "\f0da";
font-family: "Font Awesome 5 Free";
font-weight: 900;
transform: translateY(-50%);
}
@media(max-width:768px){
.scroll-table table th, td {
padding: 10px 5px;
font-size: 13px;
}
.js-scrollable td, .js-scrollable th {
min-width: 126px;
max-width: 330px;
}
}
@media (max-width : 580px){
.author-area{
font-size: .9em;
}
.author-image{
width: 35px;
}
}

@media (max-width: 767px) {
.custom-table th {
width: 25%;
font-size: 12px;
}

.custom-table td {
width: 75%;
font-size: 12px;
}
}

@media (max-width: 767px) {
.table-center th {
font-size: 12px;
}
}

/* FV3業者 */
@media (max-width: 767px) {
.wp-block-table.is-style-simple.is-all-centered--va th,
.wp-block-table.is-style-simple.is-all-centered--va td {
font-size: 11px;
}

.swell-block-linkList__text {
font-size: 12px;
}
}
/* 目次ボタンの表示結果から目次広告を削除 */
.hidden-ad {
display: none !important;
}

/* 画像サイズ小さくする */

.small-img {
display: block;
margin: 0 auto;
max-width: 400px;
height: auto;
}

@media only screen and (max-width: 768px) {
.small-img {
max-width: 200px;
height: auto;
}
}

/* メリデメボックスの修正*/

@media (min-width: 768px) {
.slider-container {
display: flex;
justify-content: space-between; /* スペースを均等に配置 */
gap: 5%; /* メリットとデメリットの間に余白を調整 */
width: 700px;
overflow-x: visible; /* スライドを無効に */
}
.slider-container > .slide-item {
flex: 0 0 48%; /* 各アイテムの幅を48%に設定（幅を広げる） */
box-sizing: border-box;
}
}

/* スマホサイズ：スライド式にして、各コンテンツが100％の幅を占める */
@media (max-width: 767px) {
.slider-container {
display: flex;
overflow-x: auto; /* スクロール可能に */
scroll-snap-type: x mandatory; /* スライド式を有効に */
gap: 20px; /* 各アイテム間の余白を追加 */
width: 100%;
}
.slider-container > .slide-item {
flex: 0 0 100%; /* 各アイテムを100%の幅に設定 */
scroll-snap-align: start;
box-sizing: border-box;
}
}



/* 口コミボックスの修正 */

.c-tabList {
display: flex;
justify-content: center; /* 要素を中央揃えに */
gap: 10px; /* 要素間の余白を10pxに設定 */
}

.c-tabList__item {
flex: 0 1 auto;
text-align: center; /* テキストを中央に配置 */
padding: 10px; /* 余白を追加 */
box-sizing: border-box;
}

/* スマホサイズでも横並び */
@media (max-width: 768px) {
.c-tabList {
flex-direction: row; /* 横並びに設定 */
justify-content: center; /* 要素を中央揃えに */
}

.c-tabList__item {
width: auto; /* 幅を自動に */
max-width: none; /* 幅制限を解除 */
margin-bottom: 0; /* 縦方向の余白を削除 */
}
}

/* スマホサイズの文字サイズ変更 */

@media (max-width: 767px) {
p,
li {
font-size: 14px;
}
}

/* コンテンツの枠表示 */

.content-box {
padding: 30px 30px; /* 上下 30px、左右 30px */
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 40px !important;
}

.content-box > *:not(:last-child) {
margin-bottom: 0; /* ここでのマージンは不要になるのでリセット */
}

/* ◯×表示 */

.maru {
position: relative;
width: 1.25em;
height: 1.25em;
text-align: center; /* 水平中央揃え */
vertical-align: middle; /* テキストを縦方向中央揃え */
}

.maru:before {
content: "\f111";
font-weight: 300;
font-family: "Font Awesome 5 Free";
position: absolute;
left: 50%; /* 水平方向に中央揃え */
top: 50%; /* 垂直方向に中央揃え */
transform: translate(-50%, -50%); /* 要素を中央に配置 */
color: #175491;
display: block;
}


.batsu {
position: relative;
width: 1.25em;
height: 1.25em;
text-align: center; /* 水平中央揃え */
vertical-align: middle; /* テキストを縦方向中央揃え */
}

.batsu:before {
content: "\f00d";
font-weight: 900;
font-family: "Font Awesome 5 Free";
position: absolute;
left: 50%; /* 水平方向に中央揃え */
top: 50%; /* 垂直方向に中央揃え */
transform: translate(-50%, -50%); /* 要素を中央に配置 */
color: #cf2e2e;
display: block;
}

/* 目次ul */

ul.is-style-index li:before {
background-color: none !important;

}


common-page_wrap table {
border: none;
border-collapse: collapse;
border-spacing: 0;
line-height: 1.6;
max-width: 100%;
text-align: left;
width: 100%;
}


.mv-columntext {
font-size: 160px !important;
}


.swell-block-column figure.wp-block-image {
height: 95px;
display: flex;
align-items: center;
justify-content: center;
margin: 1em auto;
}


a {
color:#1176d4;
text-decoration: underline;

}


.elementor-widget__width-auto.elementor-absolute.elementor-widget-text-editor .elementor-widget-container p {
background-color: #27A1D5;
color: #ffffff;
font-weight: bold;
text-align: center;
margin: 0;
padding: 4px 12px;
display: inline-block;
border-radius: 4px;
}

.elementor-row {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 20px;
}

.elementor-column.elementor-col-33 {
width: 33.333%;
padding: 10px;
}

@media (max-width: 767px) {
.elementor-column.elementor-col-33 {
width: 100%;
}
}

.is-style-check_list li:before {
color: #5393e7 !important;
content: "\f00c" !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
}


/* 比較表はここから */

/* 転職エージェント比較表 - 独自のプレフィックス付きCSS */
.agent-comparison {
width: 100%;
max-width: 1000px;
margin: 0 auto;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.agent-tabs {
display: flex;
margin: 0;
padding: 0;
}

.agent-tab {
background-color: #f5f5f5;
color: #333;
padding: 15px 0;
text-align: center;
flex-grow: 1;
cursor: pointer;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-weight: bold;
letter-spacing: 3px;
}

.agent-tab.active {
background-color: #004b8d;
color: white;
}

.agent-content {
display: none;
border: 1px solid #ccc;
border-top: none;
}

.agent-content.active {
display: block;
}

.agent-table-wrap {
/* スクロールは1つだけに統一 */
max-height: 700px; 
overflow-y: auto;
width: 100%;
}

.agent-table {
width: 100%;
border-collapse: collapse;
margin: 0 auto;
font-size: 14px;
min-width: 800px;
}

.agent-th {
background-color: #f5f5f5;
text-align: center;
padding: 10px;
border: 1px solid #ccc;
position: sticky;
top: 0;
z-index: 10;
color: #333; /* テキストの色を明確に指定 */
font-weight: bold;
}

/* 下向き三角形の表示を削除 */
.agent-th:after {
display: none;
}

.agent-td {
padding: 10px;
border: 1px solid #ccc;
vertical-align: middle;
background-color: #fff;
}

.agent-company {
text-align: center;
font-weight: bold;
color: #004b8d;
margin-bottom: 5px;
font-size: 12px;
}

.agent-subname {
text-align: center;
font-size: 12px;
color: #0066cc;
}

.agent-rating {
text-align: center;
color: #FF9900;
font-weight: bold;
font-size: 16px;
}

.agent-job-title {
font-size: 12px;
margin-bottom: 5px;
}

.agent-job-count {
font-weight: bold;
color: #FF6666;
font-size: 14px;
margin-bottom: 10px;
}

.agent-undisclosed {
color: #FF6666;
}

.agent-highlight {
color: #FF6666;
font-weight: bold;
margin-bottom: 5px;
font-size: 13px;
}

.agent-review {
margin-bottom: 10px;
line-height: 1.5;
}

.agent-review:before {
content: '・';
display: inline-block;
margin-right: 5px;
}

.agent-button {
background-color: #4CAF50;
color: white;
padding: 8px 15px;
border: none;
border-radius: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
font-size: 14px;
width: 80px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
transform: translateY(0);
transition: all 0.2s ease;
position: relative;
border-bottom: 3px solid #2E8B57;
}

.agent-button:hover {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
transform: translateY(2px);
background-color: #46a049;
border-bottom: 1px solid #2E8B57;
}

.agent-button:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 
    inset 0 1px 3px rgba(0, 0, 0, 0.2);
transform: translateY(3px);
background-color: #3d8b3d;
border-bottom: 0px solid #2E8B57;
}

.agent-area {
display: inline-block;
background-color: #e8f4f8;
color: #0066cc;
border: 1px solid #0066cc;
border-radius: 4px;
padding: 3px 8px;
margin: 2px;
font-size: 12px;
}

.agent-age {
display: inline-block;
background-color: #fff5e6;
color: #ff9900;
border: 1px solid #ff9900;
border-radius: 4px;
padding: 3px 8px;
margin: 2px;
font-size: 12px;
}

.agent-tags {
display: flex;
flex-wrap: wrap;
}

/* もっと見るボタン - 位置を調整して確実に表示されるようにする */
.agent-more {
background-color: #eeeeee;
color: #333;
border: 1px solid #333;
padding: 10px 20px;
margin: 15px auto;
display: block !important; /* 強制的に表示 */
width: 200px;
text-align: center;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
position: relative;
z-index: 5;
}

.agent-more:hover {
background-color: #dddddd;
}

/* 追加の行を初期状態で非表示 */
.agent-additional {
display: none;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
.agent-comparison {
width: 100%;
}
}

/* ヘッダー部分の見た目改善 */
.agent-tab {
background-color: #0055a4; /* より濃い青色で目立たせる */
color: white;
padding: 15px 20px;
text-align: center;
font-weight: bold;
font-size: 16px;
border-radius: 5px 5px 0 0;
}

.agent-tab.active {
background-color: #004b8d; /* アクティブタブの色を少し暗く */
}

/* 非アクティブタブのスタイル調整 */
.agent-tab:not(.active) {
background-color: #f2f2f2;
color: #333;
border: 1px solid #ccc;
border-bottom: none;
}

/* テーブルヘッダーを見やすく */
.agent-th {
background-color: #e6e6e6; /* より見やすい灰色 */
color: #333;
font-weight: bold;
padding: 12px 8px;
border: 1px solid #ccc;
text-align: center;
}

/* もっと見るボタンをより目立たせる */
.agent-more {
background-color: #e0e0e0;
color: #333;
font-weight: bold;
border: 1px solid #999;
border-radius: 4px;
padding: 12px 24px;
margin: 20px auto;
cursor: pointer;
transition: all 0.3s;
}

.agent-more:hover {
background-color: #d0d0d0;
}

/* テーブル全体のスタイル改善 */
.agent-table {
border-collapse: collapse;
width: 100%;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

/* 奇数行と偶数行で色を変える（読みやすさの向上） */
.agent-table tr:nth-child(even) {
background-color: #f9f9f9;
}

/* 詳細ボタンをさらに目立たせる */
.agent-button {
background-color: #4CAF50;
padding: 10px 16px;
font-weight: bold;
}

/* 転職エージェント比較表のヘッダーテキストのみを修正 */
.agent-comparison th,
.agent-comparison .agent-th,
.agent-table th {
color: #000 !important; /* 黒色を強制適用 */
background-color: #f5f5f5 !important; /* 背景色を灰色に強制適用 */
font-weight: bold !important; /* 太字を強制適用 */
}

/* 比較表内の三角形のみ削除 */
.agent-comparison th:after,
.agent-comparison .agent-th:after,
.agent-table th:after {
display: none !important;
}

.agent-table-wrap p {
display: none;
margin: 0;
padding: 0;
}


/* 修正後：より具体的なセレクタ */
.agent-table-wrap > p:empty,
.agent-content > p:empty,
p:empty,
br {
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
}


/* ブレークポイントの削除 */
.agent-table-wrap br,
.agent-content br {
display: none !important;
}

/* テーブルラップの調整 */
.agent-table-wrap {
margin-top: 0 !important;
padding-top: 0 !important;
}

.recommendation-box {
  background-color: #e6f0ff; /* 青色の背景に変更 */
  border-radius: 5px;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.heading {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}

.heading::before {
  content: "—";
  margin-right: 10px;
}

.check-item {
  display: flex;
  align-items: baseline;
  margin-bottom: 15px;
  border-left: 4px solid transparent;
  padding-left: 10px;
}

.check-mark {
  color: #4CAF50;
  margin-right: 10px;
  font-size: 20px;
}

.review-tab-system-2025 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.review-tab-system-2025 {
  background-color: #f5f5f5;
  padding: 20px;
  width: 100%;
}

.rts2025-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #f0f4f8;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.rts2025-tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}

.rts2025-tab {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background-color: #e6eef5;
  margin-right: 5px;
  font-weight: bold;
  color: #666;
  transition: all 0.3s ease;
}

.rts2025-tab.rts2025-active {
  background-color: #fff;
  border-color: #ddd;
  color: #4a86e8;
  position: relative;
}

.rts2025-tab.rts2025-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #fff;
}

.rts2025-tab-content {
  display: none;
}

.rts2025-tab-content.rts2025-active {
  display: block;
}

.rts2025-review-scroll {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

.rts2025-review-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.rts2025-review-card:last-child {
  margin-bottom: 0;
}

.rts2025-reviewer {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.rts2025-reviewer-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
  background-color: #e6eef5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rts2025-reviewer-img img {
  width: 100%;
  height: auto;
}

.rts2025-reviewer-info h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.rts2025-reviewer-info p {
  font-size: 14px;
  color: #666;
}

.rts2025-review-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

.rts2025-review-source {
  font-size: 12px;
  color: #999;
  text-align: right;
}

/* スクロールバーのスタイル */
.rts2025-review-scroll::-webkit-scrollbar {
  width: 8px;
}

.rts2025-review-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.rts2025-review-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.rts2025-review-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

@media (max-width: 768px) {
  .rts2025-container {
      padding: 15px;
  }
  
  .rts2025-tab {
      padding: 8px 15px;
      font-size: 14px;
  }
  
  .rts2025-review-card {
      padding: 15px;
  }
}


.comparison-container {
display: flex;
max-width: 800px;
margin: 0 auto;
font-family: sans-serif;
gap: 20px;
flex-wrap: wrap;
}

@media (max-width: 768px) {
.comparison-container {
  flex-direction: column;
  gap: 30px;
  padding: 0 15px;
}
}

.comparison-card {
flex: 1;
border-radius: 10px;
border: 1px solid #ddd;
margin:20px auto;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.list-under-border.is-style-check {
    padding: 20px 0;
}
.comparison-header {
color: white;
text-align: center;
padding: 12px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}

.merit-header {
background-color: #7FC4F5;
}

.demerit-header {
background-color: #FF99AA;
}

.comparison-content {
padding: 0 15px;
}

.comparison-content ul {
padding-left: 30px;
}

.comparison-content li {
padding: 10px 0;
border-bottom: 1px dotted #ddd;
}

.comparison-content li:last-child {
border-bottom: none;
}

.circle-icon {
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
margin-right: 10px;
text-align: center;
line-height: 18px;
}

.button-container {
max-width: 400px;
margin: 20px auto!important;
}

.register-button {
display: block;
background-color: #4CAF50; /* 緑色 */
color: white;
text-align: center;
padding: 15px 20px;
border-radius: 10px;
text-decoration: none;
font-weight: bold;
font-size: 18px;
position: relative;
box-shadow: 
  0 0 0 4px #4CAF50, /* 緑色の外枠 */
  0 6px 0 #388E3C, /* 下部の影で奥行き感を出す */
  0 8px 10px rgba(0,0,0,0.2); /* 全体に影をつける */
transform: translateY(0);
transition: all 0.3s ease; /* アニメーション効果 */
}

.register-button::after {
content: "›";
position: absolute;
right: 20px;
font-size: 24px;
font-weight: bold;
}

.register-button:hover {
transform: translateY(-4px); /* 上に浮き上がる */
box-shadow: 
  0 0 0 4px #4CAF50, /* 緑色の外枠 */
  0 10px 0 #388E3C, /* 下部の影を増やして浮いているように見せる */
  0 12px 15px rgba(0,0,0,0.25); /* 影を強くする */
}

.ltc-caution-container {
background-color: #ffeeee;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
font-family: sans-serif;
}

.ltc-caution-title {
display: flex;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #ffcccc;
font-size: 18px;
font-weight: bold;
color: #333;
}

.ltc-caution-title-icon {
margin-right: 8px;
color: #e74c3c;
}

.ltc-caution-list {
list-style-type: none;
padding: 0;
margin: 0;
}

.ltc-caution-item {
position: relative;
padding-left: 30px;
margin-bottom: 15px;
font-size: 16px;
line-height: 1.5;
color: #444;
}

.ltc-caution-item:last-child {
margin-bottom: 0;
}

.ltc-caution-check {
position: absolute;
left: 0;
top: 2px;
color: #e74c3c;
}

@media (max-width: 768px) {
.ltc-caution-container {
  padding: 15px;
}

.ltc-caution-title {
  font-size: 16px;
}

.ltc-caution-item {
  font-size: 14px;
  padding-left: 25px;
}
}



.itra-container {
max-width: 900px;
margin: 0 auto;
font-family: sans-serif;
}

.itra-title {
text-align: center;
margin-bottom: 30px;
position: relative;
padding-bottom: 15px;
}

.itra-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(to right, #daa520, #a9a9a9, #cd7f32);
}

.itra-title-main {
font-size: 26px;
font-weight: bold;
color: #333;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
position: relative;
display: inline-block;
}

.itra-title-main::before,
.itra-title-main::after {
content: '★';
color: #daa520;
font-size: 18px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}

.itra-title-main::before {
left: -25px;
}

.itra-title-main::after {
right: -25px;
}
.itra-list {
border: 1px solid #ddd;
border-radius: 5px;
}

.itra-item {
display: flex;
align-items: center;
padding: 20px;
border-bottom: 1px solid #ddd;
}

.itra-item:last-child {
border-bottom: none;
}

.itra-rank {
flex: 0 0 80px;
text-align: center;
}

.itra-crown {
font-size: 24px;
margin-bottom: 5px;
}

.itra-rank-number {
font-size: 14px;
font-weight: bold;
}

.itra-crown-1 {
color: #daa520;
}

.itra-crown-2 {
color: #a9a9a9;
}

.itra-crown-3 {
color: #cd7f32;
}

.itra-logo {
flex: 0 0 120px;
text-align: center;
}

.itra-logo img {
max-width: 100%;
height: auto;
}

.itra-info {
flex: 1;
margin: 0 20px;
}

.itra-name {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}

.itra-highlight {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
position: relative;
display: inline-block;
}

/* 指定されたマーカークラスのスタイル */
.strong.mark_yellow {
background: linear-gradient(transparent 60%, #ffff66 60%);
padding: 0 2px;
font-weight: bold;
}

.itra-exclamation {
color: #ff9900;
margin-left: 5px;
}

.itra-description {
font-size: 14px;
line-height: 1.5;
color: #333;
}

.itra-button-wrapper {
flex: 0 0 160px;
text-align: center;
}

.itra-button {
display: inline-block;
background-color: #4CAF50;
color: white;
text-align: center;
padding: 12px 15px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
border-radius: 5px;
width: 140px;
position: relative;
box-shadow: 0 5px 0 #3d8b40;
transform: translateY(0);
transition: all 0.2s ease;
}

.itra-button:hover {
box-shadow: 0 2px 0 #3d8b40;
transform: translateY(3px);
}

.itra-button-arrow {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}

@media (max-width: 768px) {
.itra-item {
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.itra-rank {
  flex: 0 0 50px;
  order: 1;
}

.itra-logo {
  flex: 0 0 100px;
  order: 2;
  margin: 0 10px;
}

.itra-info {
  order: 4;
  margin: 15px 0;
  text-align: left;
}

.itra-button-wrapper {
  order: 5;
  text-align: center;
  margin-top: 15px;
}
}

@media (max-width: 480px) {
.itra-container {
  padding: 0 10px;
}

.itra-title-main {
  font-size: 20px;
}

.itra-title-sub {
  font-size: 18px;
}

.itra-item {
  padding: 15px 10px;
}

.itra-name {
  font-size: 16px;
}

.itra-highlight {
  font-size: 14px;
}

.itra-description {
  font-size: 13px;
}
}


.app-review-container {
font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 0;
}

@media (max-width: 576px) {
.app-review-wrapper {
padding: 10px 15px;
}
}

.app-review-wrapper {
display: flex;
align-items: flex-start;
padding: 15px 20px;
margin-bottom: 20px;
}


@media (max-width: 576px) {
.app-review-user {
width: 60px;
margin-right: 10px;
}
}

.app-review-user {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 15px;
width: 70px;
flex-shrink: 0;
}

@media screen and (max-width: 768px) {
.app-review-avatar {
width: 80px;
height: 80px;
}
}

.app-review-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.app-review-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

@media (max-width: 576px) {
.app-review-username {
font-size: 11px;
}
}

.app-review-username {
font-size: 12px;
color: #666;
text-align: center;
}

@media screen and (max-width: 768px) {
.app-review-bubble {
max-width: 80%;
}
}

.app-review-bubble {
max-width: 60%;
background-color: #e8e8e8;
padding: 12px 16px;
border-radius: 12px;
display: inline-block;
margin-left: 10px;
}

.app-review-bubble {
position: relative;
flex-grow: 1;
background-color: #e8e8e8;
padding: 15px;
border-radius: 5px;
}

@media (max-width: 576px) {
.app-review-text {
font-size: 13px;
}
}

.app-review-text {
font-size: 14px;
line-height: 1.6;
}


.app-review-bubble:before {
content: "";
position: absolute;
left: -8px;
top: 15px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #e8e8e8;
}



.advisor-section {
  background-color: #f8f9fa;
  border-left: 4px solid #3498db;
  padding: 15px 20px;
  margin: 20px 0;
  box-sizing: border-box;
  width: 100%;
}

.advisor-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.advisor-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  overflow: hidden;
  flex-shrink: 0;
}

.advisor-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.advisor-title {
  font-weight: bold;
  color: #2c3e50;
}

.advisor-comment {
  color: #444;
  font-size: 15px;
  width: 100%;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
  .advisor-section {
      padding: 12px 15px;
  }
  
  .advisor-icon {
      width: 50px;
      height: 50px;
      margin-right: 10px;
  }
  
  .advisor-title {
      font-size: 14px;
  }
  
  .advisor-comment {
      font-size: 14px;
  }
}

/* さらに小さい画面サイズ用 */
@media (max-width: 400px) {
  .advisor-icon {
      width: 40px;
      height: 40px;
      margin-right: 8px;
  }
}


.articleBody>* {
clear: both;
margin-bottom:2em;
}

.example-header {
background-color: #3498db;
color: white;
width: 200px;
padding: 5px 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 14px;
text-align: center;

}	

.example-content {
border: 1px solid #3498db;
border-radius: 5px;
padding: 15px;
font-size: 14px;
line-height: 1.5;
}


.post_meta_line {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.post_category {
margin-right: 15px; /* カテゴリと日付の間のスペース */
}

.time {
margin: 0; /* 日付のデフォルトマージンをリセット */
}

.post_category a {
display: inline-block;
background-color: #27A1D5;
color: white; /* テキストを白色に */
padding: 3px 10px; /* 内側の余白 */
text-decoration: none; /* 下線を消す */
font-size: 14px; /* フォントサイズ調整 */
font-weight: 500; /* やや太字に */
border-radius: 100px;
}

/* 複数カテゴリがある場合のスタイル */
.post_category a + a {
margin-left: 5px; /* カテゴリ間の余白 */
}


.post_archive_shukatu li {
list-style: none;
}


.post_archive_shukatu{
margin:auto;
}


.common-page_main .title_box::before {
content: "";
display: block;
height: 120px; /* 必要な高さに調整 */
}


.breadcrumb {
padding: 10px;
}

@media screen and (max-width: 767px) {
.breadcrumb {
padding: 0!important;
}

.breadcrumb ul {
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 0!important;
}

.breadcrumb ul li {
display: inline-block;
white-space: normal;
float: none;
margin-right: 3px;
}

.breadcrumb ul li a {
word-break: break-word;
}

/* 必要に応じて改行を許可 */
.breadcrumb ul li:last-child {
margin-top: 3px;
}
}

.custom-category-label a {
display: inline-block;
background-color: #27A1D5;
color: white;
padding: 3px 10px;
text-decoration: none;
font-size: 14px;
font-weight: 500;
margin-bottom: 5px;
}


.category-description {
font-size: 16px;
color: white;
}



.title_box {
display: flex;
flex-direction: column; /* 縦並びにする */
justify-content: center; /* 上下中央 */
align-items: center;     /* 左右中央（必要なら） */
height: 200px;           /* 必要に応じて高さ指定 */
text-align: center;      /* テキスト中央揃え */
}


@media screen and (max-width: 768px) {
.mv-columntext {
font-size: 80px !important;
}
}


@media screen and (max-width: 768px) {
.container h1 {
font-size: 1.2em;
}
}



.post_meta_line {
margin-top: 10px;
}


@media screen and (max-width: 768px) {
.breadcrumb ul li {
font-size: 10px;
}

.breadcrumb ul li a {
font-size: 10px;
}
}


/* アンダーラインを無効化 */
.post_archive_shukatu ul li a {
text-decoration: none;
}

.post_archive_shukatu ul li a .text_box .cat_box p.tensyoku-agent a {
text-decoration: none;
}


.post_archive_shukatu ul li a .text_box h2 {
margin: 0 !important;
}


.post_archive_shukatu ul li a .text_box .cat_box p.tensyoku-agent {
background-color: 
#27A1D5;
color: #fff;
font-weight: 500;
letter-spacing: 0.03em;
display: inline-block;
border-radius: 100px;
margin-right: 6px;
margin-bottom: 6px;
padding: 6px 10px;
text-align: center;
}
@media (max-width: 750px) {
.post_archive_shukatu ul li a .text_box .cat_box p.tensyoku-agent {
font-size: 13px;
}
}


/* カテゴリーセクションのスタイル */
.category_tags_section {
margin: 20px 0;

}

.category_tags_section .cat_box a {
background-color: #27A1D5; /* デフォルトの背景色 */
color: #fff;
font-weight: 500;
letter-spacing: 0.03em;
display: inline-block;
border-radius: 100px;
margin-right: 6px;
margin-bottom: 6px;
padding: 6px 10px;
text-align: center;
text-decoration: none;
}

/* 特定のカテゴリスタイル - 必要に応じて追加 */
.category_tags_section .cat_box a.tensyoku-agent {
background-color: #27A1D5;
}

@media (max-width: 750px) {
.category_tags_section .cat_box a {
font-size: 13px;
}
}


/* テーブルコンテナの設定 */
.agent-table-wrap {
overflow: auto;
position: relative;
}

/* ヘッダー行を固定 */
.agent-table thead th {
position: sticky;
top: 0;
z-index: 2;
background-color: #fff;
}

/* 左列（メーカー列）を固定 */
.agent-table td:first-child {
position: sticky;
left: 0;
z-index: 1;
background-color: #fff;
}

/* 左上のセル（ヘッダーと左列の交差部分）を固定 */
.agent-table th:first-child {
position: sticky;
left: 0;
z-index: 3;
}

.temporary-work{
background-color: #27A1D5;
color: #fff;
}

.post_archive_shukatu {
width: 70%;
margin: 0 auto;
}

@media screen and (max-width: 768px) {
.post_archive_shukatu {
width: 90%;
}
}


.category_tags_section{
margin: 0 auto;
}

.kikankou{
background-color:#27A1D5;
color:white;
}



.kousiki-btn{
background-color: #fca300!important;
border-bottom: 3px solid #d67300!important;
}

.hikaku{
background-color: #0055a4!important;
color:white!important;
}


@media screen and (max-width: 767px) {
.register-button {
font-size: 12px;
}
.agent-button{
font-size: 12px;
}
.button-container {
max-width: 300px;
}
}

.register-button::after {
top: 10px; /* PC用（デフォルト） */
}

@media screen and (max-width: 768px) {
.register-button::after {
top: 2px; /* スマホサイズ用 */
}
}


.hr-agent-body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.hr-agent-header {
  background-color: #0a1a2a;
  color: white;
  padding: 15px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

.hr-agent-table {
  width: 100%;
  border-collapse: collapse;
}

.hr-agent-th {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
  vertical-align: middle;
}

.hr-agent-td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
  vertical-align: middle;
}

.hr-agent-logo-cell {
  text-align: center;
  width: 25%;
}

.hr-agent-feature-cell {
  width: 50%;
}

.hr-agent-site-cell {
  text-align: center;
  width: 25%;
}

.hr-agent-site-button {
  background-color: #20b2aa;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.hr-agent-crown-gold {
  background-color: #f1c40f;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hr-agent-crown-silver {
  background-color: #bdc3c7;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hr-agent-crown-bronze {
  background-color: #cd7f32;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hr-agent-logo {
  max-width: 100%;
  height: auto;
}

.hr-agent-feature-title {
  color: #e74c3c;
  font-weight: bold;
  margin-bottom: 5px;
}

.hr-agent-logo {
width: 180px;         /* 幅を固定 */
height: 80px;         /* 高さを固定 */
object-fit: contain;  /* 画像の比率を保ちながら指定サイズに収める */
display: block;       /* ブロック要素として表示 */
margin: 0 auto;       /* 左右中央揃え */
}


.color-red-1 {
background-color: #fdf3f3 !important;
}

.color-red-2 {
background-color: #e85c5c !important;
}

.color-red-3 {
background-color: #fbeaea !important;
}



.color-red .rts2025-container {
background-color: #fdf3f3 !important; /* color-red-1 */
}

.color-red .rts2025-tab.rts2025-active {
color: #e85c5c !important; /* color-red-2 */
}

.color-red .rts2025-reviewer-img {
background-color: #fbeaea !important; /* color-red-3 */
}



.ct-timeline-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  background-color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.ct-timeline-container {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 60px;
}

.ct-timeline-container::-webkit-scrollbar {
  height: 8px;
}

.ct-timeline-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.ct-timeline-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.ct-timeline-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.ct-timeline-track {
  display: flex;
  gap: 20px;
  padding-bottom: 20px;
}

.ct-timeline-item {
  flex: 0 0 280px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 20px;
  border: 1px solid #e5e7eb;
}

.ct-step-number {
  font-size: 48px;
  font-weight: bold;
  color: #d1d5db;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: -2px;
}

.ct-date-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.ct-event-description {
  font-size: 13px;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 0;
}

/* ステップインジケーター */
.ct-step-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 12px;
}

.ct-step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #d1d5db;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ct-step-dot.ct-active {
  background-color: #3b82f6;
  transform: scale(1.2);
}

.ct-step-dot:hover {
  background-color: #6b7280;
}

/* ナビゲーションボタンを削除 */

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .ct-timeline-wrapper {
      padding: 20px 10px;
  }

  .ct-timeline-item {
      flex: 0 0 260px;
      padding: 16px;
  }

  .ct-step-number {
      font-size: 36px;
      margin-bottom: 16px;
  }

  .ct-date-label {
      font-size: 13px;
  }

  .ct-event-description {
      font-size: 12px;
  }

  .ct-nav-button {
      width: 36px;
      height: 36px;
      font-size: 16px;
  }

  .ct-nav-prev {
      left: -18px;
  }

  .ct-nav-next {
      right: -18px;
  }
}

@media (max-width: 480px) {
  .ct-timeline-item {
      flex: 0 0 240px;
      padding: 14px;
  }

  .ct-step-number {
      font-size: 32px;
  }

  .ct-timeline-track {
      gap: 15px;
  }
}



.info-card {
  background-color: #ffffff;
  border: 2px dashed #b8d4f0;
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  padding: 24px 20px 20px 20px;
}

.info-card__header {
  position: absolute;
  top: -2px;
  left: -2px;
  background-color: #7bb3e8;
  color: white;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px 6px 0 0;
  z-index: 1;
}

.info-card__content {
  margin-top: 8px;
}

.info-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-card__item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  line-height: 1.6;
}

.info-card__item:last-child {
  margin-bottom: 0;
}

.info-card__bullet {
  width: 12px;
  height: 12px;
  background-color: #7bb3e8;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 6px;
  flex-shrink: 0;
}

.info-card__text {
  font-size: 14px;
  color: #333;
  flex: 1;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  body {
      padding: 10px;
  }
  
  .info-card {
      padding: 20px 16px 16px 16px;
  }
  
  .info-card__header {
      left: -2px;
      top: -2px;
      font-size: 15px;
      padding: 7px 18px;
  }
  
  .info-card__text {
      font-size: 13px;
  }
  
  .info-card__bullet {
      width: 10px;
      height: 10px;
      margin-right: 10px;
      margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .info-card {
      padding: 18px 12px 14px 12px;
  }
  
  .info-card__header {
      left: -2px;
      top: -2px;
      font-size: 14px;
      padding: 6px 16px;
  }
  
  .info-card__text {
      font-size: 12px;
  }
  
  .info-card__item {
      margin-bottom: 14px;
  }
}


.info-card__item:first-child {
margin-top: 30px;
}


.jh-card-container {
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.jh-header-section {
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  color: white;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: bold;
}

.jh-main-content {
  padding: 24px 20px;
  background-color: #f8f9fa;
}

.jh-company-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}

.jh-company-left {
  flex: 0 0 40%;
}

.jh-company-right {
  flex: 1;
}

.jh-company-logo {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.jh-company-info .jh-company-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 8px;
  font-weight: bold;
}

.jh-company-subtitle {
  font-size: 18px;
  color: #666;
  font-weight: 500;
}

.jh-highlight-badge {
  background-color: #ff4757;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  margin-top: 12px;
}

.jh-info-table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  background-color: white;
  overflow: hidden;
}

.jh-table-header {
  background: linear-gradient(135deg, #5b9bd5 0%, #4a90e2 100%);
  color: white;
}

.jh-table-header th {
  padding: 16px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.jh-table-header th:first-child {
  width: 30%;
}

.jh-table-header th:last-child {
  width: 70%;
}

.jh-table-row td {
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
  font-size: 14px;
}

.jh-table-row:nth-child(even) {
  background-color: #f8f9fa;
}

.jh-table-label {
  font-weight: bold;
  color: #333;
  text-align: center;
  background-color: #f1f3f4;
}

.jh-table-content {
  color: #555;
  line-height: 1.6;
}



/* レスポンシブ対応 */
@media (max-width: 768px) {
  body {
      padding: 10px;
  }
  
  .jh-card-container {
      max-width: 100%;
  }
  
  .jh-main-content {
      padding: 20px 16px;
  }
  
  .jh-company-header {
      flex-direction: column;
      text-align: center;
      gap: 16px;
  }
  
  .jh-company-left {
      flex: none;
      width: 60%;
      margin: 0 auto;
  }
  
  .jh-company-right {
      text-align: center;
  }
  
  .jh-company-info .jh-company-title {
      font-size: 20px;
  }
  
  .jh-company-subtitle {
      font-size: 16px;
  }
  
  .jh-table-header th,
  .jh-table-row td {
      padding: 12px 8px;
      font-size: 13px;
  }
  
  .jh-cta-button {
      font-size: 14px;
      padding: 14px 20px;
  }
  
  .register-button {
      font-size: 14px;
      padding: 14px 20px;
  }
}

@media (max-width: 480px) {
  .jh-header-section {
      font-size: 16px;
      padding: 14px 16px;
  }
  
  .jh-main-content {
      padding: 16px 12px;
  }
  
  .jh-company-logo {
      width: 80px;
      height: 80px;
      object-fit: contain;
  }
  
  .jh-company-left {
      flex: none;
      width: auto;
      margin: 0 auto;
  }
  
  .jh-company-info .jh-company-title {
      font-size: 18px;
  }
  
  .jh-company-subtitle {
      font-size: 14px;
  }
  
  .jh-highlight-badge {
      font-size: 12px;
      padding: 6px 12px;
  }
  
  .jh-table-header th,
  .jh-table-row td {
      padding: 10px 6px;
      font-size: 12px;
  }
}



.highlight-red {
color: #b22222;
font-size: 1.2em;
}

@media (max-width: 768px) {
.outline-table {
overflow-x: scroll;
width: 100%;
}

.outline-table table {
min-width: 500px;
white-space: nowrap;
}

.outline-table td {
white-space: normal;
}
}


/* スマホサイズで3つ目のageタグだけ改行 */
@media (max-width: 768px) {
.age:nth-child(2) {
margin-right: 0;
}

.age:nth-child(3) {
display: inline-block;
margin-top: 5px;
}
}

/* スマホサイズでロゴ画像を小さく */
@media (max-width: 768px) {
.outline-table img {
max-width: 120px;
height: auto;
}
}



.info-card{
margin-bottom: 20px;
}

.recommendation-box {
background-color: #e6f0ff;
border-radius: 5px;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}


.articleBody>* {
clear: both;
margin-bottom: 2em;
}

.cap_box_ttl, .container h2 {
z-index: 0;
}


.cap_box_ttl {
align-items: center;
background-color: #5393e7;
color: #fff;
display: flex
;
gap: .5em;
justify-content: center;
line-height: 1.5;
margin-bottom: 0 !important;
padding: .5em;
position: relative;
text-align: center;
z-index: 1;
}




.cap_box_content {
background-color: white;
border: 1px solid #5393e7;
clear: both;
margin-top: -2px;
padding: 1.25em;
position: relative;
z-index: 0;
}


.-list-under-dashed>li, .border_bottom>li {
border-bottom: 1px dashed var(--color_border);
margin-bottom: .75em;
padding-bottom: .75em;
}


.articleBody img {
display: block;
margin: auto;
}

img {
border-style: none;
height: auto;
max-width: 100%;
}


.container table {
border: none;
border-collapse: collapse;
border-spacing: 0;
line-height: 1.6;
max-width: 100%;
text-align: left;
width: 100%;
}

.container th {
background: #5393e7;
color: #fff;
vertical-align: middle;
text-align: center;
width: 25%;
	    border: 0.5px solid #dcdcdc;
    padding: 8px;
}

.container td {
	    border: 0.5px solid #dcdcdc;
    padding: 8px;
}

.wp-block-table td, .wp-block-table th {
background-clip: padding-box;
    border: 0.5px solid #dcdcdc;
min-width: var(--swl-minwidth-cell, 0) !important;
padding: .5em .75em;
position: relative;
vertical-align: top;
z-index: 0;
}


.wp-block-table {
    --table-border: 1px solid #dcdcdc;
}



@media screen and (min-width: 2000px) {
  .container,
  .contents > .adsArea,
  .mainVisual.image.autowidth,
  .mainVisual.slider.autowidth {
    width: 45% !important;
  }
}


/* 横スクロール機能のためのCSS */
.crypto_table_wrapper {
  overflow-x: auto;
  width: 100%;
}

.crypto_table {
  min-width: 800px;
  width: 100%;
}

        /* 基本スタイル */
        .crypto_merged_table_wrapper {
            position: relative;
            overflow-x: auto;
            width: 100%;
            max-width: 100%;
            border: 1px solid #ddd;
            border-radius: 8px;
        }

        .crypto_merged_table {
            min-width: 1200px;
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
            background: white;
        }

        /* 一列目固定のスタイル */
        .crypto_merged_table th:first-child,
        .crypto_merged_table td:first-child {
            position: sticky;
            left: 0;
            z-index: 10;
            background: white;
            border-right: 2px solid #ddd;
            min-width: 120px;
        }

        .crypto_merged_table thead th:first-child {
            z-index: 11;
            background: #f8f9fa;
        }

        /* ヘッダースタイル */
        .crypto_merged_table thead th {
            background: #5393e7!important;
            color: white!important;
            font-weight: bold;
            padding: 12px 8px;
            text-align: center;
            border: 1px solid #ddd;
            white-space: nowrap;
            position: sticky;
            top: 0;
            z-index: 5;
        }

        /* セルスタイル */
        .crypto_merged_table td {
            padding: 10px 8px;
            text-align: center;
            border: 1px solid #ddd;
            vertical-align: middle;
            line-height: 1.4;
        }

        /* 取引所名のスタイル */
        .crypto_merged_table td:first-child {
            text-align: center!important;
            font-weight: bold;
            background: #fff;
			
        }

        .crypto_merged_table td:first-child img {
            display: block;
            margin: 0 auto 5px auto;
            max-width: 60px;
            height: auto;
        }

        /* 偶数行の背景色 */
        .crypto_merged_table tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .crypto_merged_table tbody tr:nth-child(even) td:first-child {
            background-color: #f9f9f9;
        }

        /* 星評価のスタイル */
        .star-rating {
            color: #ffd700;
            font-size: 14px;
            letter-spacing: 1px;
        }

        .star-rating .empty {
            color: #ddd;
        }

        /* スコアのスタイル */
        .score-high {
            color: #28a745;
            font-weight: bold;
        }

        .score-medium {
            color: #ffc107;
            font-weight: bold;
        }

        .score-low {
            color: #dc3545;
            font-weight: bold;
        }

        /* ボーナス金額のスタイル */
        .bonus-amount {
            color: #007bff;
            font-weight: bold;
        }

        /* レバレッジのスタイル */
        .leverage-high {
            color: #dc3545;
            font-weight: bold;
        }

        .leverage-medium {
            color: #ffc107;
            font-weight: bold;
        }

        /* 日本語対応のスタイル */
        .jp-support {
            color: #28a745;
            font-weight: bold;
        }

        .jp-not-support {
            color: #dc3545;
            font-weight: bold;
        }

        /* レスポンシブ対応 */
        @media (max-width: 768px) {
            .crypto_merged_table {
                min-width: 1000px;
                font-size: 11px;
            }
            
            .crypto_merged_table th,
            .crypto_merged_table td {
                padding: 8px 6px;
            }
        }






/* 海外仮想通貨取引所比較表専用CSS（独自クラス） */

/* スライド機能付きテーブルラッパー */
.crypto_merged_table_wrapper {
    position: relative;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* メインテーブル */
.crypto_merged_table {
    min-width: 1200px;
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: white;
}

/* 一列目固定スタイル */
.crypto_merged_table th:first-child,
.crypto_merged_table td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background: white;
    border-right: 2px solid #ddd;
    min-width: 120px;
}

.crypto_merged_table thead th:first-child {
    z-index: 11;
    background: #f8f9fa;
}

/* ヘッダースタイル */
.crypto_merged_table thead th {
    background: #f8f9fa;
    color: #333;
    font-weight: bold;
    padding: 12px 8px;
    text-align: center;
    border: 1px solid #ddd;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* セルスタイル */
.crypto_merged_table td {
    padding: 10px 8px;
    text-align: center;
    border: 1px solid #ddd;
    vertical-align: middle;
    line-height: 1.4;
}

/* 取引所名のスタイル */
.crypto_merged_table td:first-child {
    text-align: left;
    font-weight: bold;
    background: #fff;
}

.crypto_merged_table td:first-child img {
    display: block;
    margin: 0 auto 5px auto;
    max-width: 60px;
    height: auto;
}

/* 偶数行の背景色 */
.crypto_merged_table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.crypto_merged_table tbody tr:nth-child(even) td:first-child {
    background-color: #f9f9f9;
}

/* 星評価のスタイル */
.star-rating {
    color: #ffd700;
    font-size: 14px;
    letter-spacing: 1px;
}

.star-rating .empty {
    color: #ddd;
}

/* スコアのスタイル */
.score-high {
    color: #28a745;
    font-weight: bold;
}

.score-medium {
    color: #ffc107;
    font-weight: bold;
}

.score-low {
    color: #dc3545;
    font-weight: bold;
}

/* ボーナス金額のスタイル */
.bonus-amount {
    color: #007bff;
    font-weight: bold;
}

/* レバレッジのスタイル */
.leverage-high {
    color: #dc3545;
    font-weight: bold;
}

.leverage-medium {
    color: #ffc107;
    font-weight: bold;
}

/* 日本語対応のスタイル */
.jp-support {
    color: #28a745;
    font-weight: bold;
}

.jp-not-support {
    color: #dc3545;
    font-weight: bold;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .crypto_merged_table {
        min-width: 1000px;
        font-size: 11px;
    }
    
    .crypto_merged_table th,
    .crypto_merged_table td {
        padding: 8px 6px;
    }
}

.red{
	color: #b22222;
    font-weight: 500;
}



.cap_box .cap_box_content ul.-list-under-dashed.is-style-check_list {
  list-style: none;
  padding-left: 0;
}

.cap_box .cap_box_content ul.-list-under-dashed.is-style-check_list li::marker {
  display: none;
}

.cap_box .cap_box_content ul.-list-under-dashed.is-style-check_list li::before {
  margin-right: 0.4em; /* ← チェックとテキストの余白 */
}



.strong{
	font-weight:bold;
}



        .proc-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f8fafc;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .proc-steps-list {
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
        }

        /* メインの縦線 */
        .proc-steps-list::before {
            content: '';
            position: absolute;
            left: 30px;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(to bottom, #3b82f6, #1e40af);
            border-radius: 2px;
        }

        .proc-step-item {
            position: relative;
            margin-bottom: 40px;
            padding-left: 80px;
            opacity: 0;
            transform: translateX(-30px);
            animation: slideIn 0.6s ease-out forwards;
        }

        .proc-step-item:nth-child(1) { animation-delay: 0.2s; }
        .proc-step-item:nth-child(2) { animation-delay: 0.4s; }
        .proc-step-item:nth-child(3) { animation-delay: 0.6s; }
        .proc-step-item:nth-child(4) { animation-delay: 0.8s; }

        /* 番号の円 */
        .proc-step-item::before {
            content: counter(step-counter);
            counter-increment: step-counter;
            position: absolute;
            left: 12px;
            top: 0;
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #3b82f6, #1e40af);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
            box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
            transition: all 0.3s ease;
            z-index: 2;
        }

        .proc-steps-list {
            counter-reset: step-counter;
        }

        .proc-step-item:hover::before {
            transform: scale(1.1);
            box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
        }

        .proc-step-content {
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border-left: 4px solid #3b82f6;
            transition: all 0.3s ease;
            position: relative;
        }

        .proc-step-content::before {
            content: '';
            position: absolute;
            left: -12px;
            top: 20px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid white;
        }

        .proc-step-item:hover .proc-step-content {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
            border-left-color: #1e40af;
        }

        .proc-step-title {
            font-size: 18px;
            font-weight: bold;
            color: #1e40af;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }

        .proc-step-title::before {
            content: '✓';
            background: #10b981;
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            margin-right: 8px;
            font-weight: bold;
        }

        .proc-step-description {
            color: #475569;
            line-height: 1.6;
            margin: 0;
            font-size: 14px;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* レスポンシブ対応 */
        @media (max-width: 768px) {
            .proc-container {
                padding: 16px;
                margin: 0 16px;
            }

            .proc-step-item {
                padding-left: 60px;
                margin-bottom: 32px;
            }

            .proc-steps-list::before {
                left: 22px;
            }

            .proc-step-item::before {
                left: 4px;
                width: 32px;
                height: 32px;
                font-size: 12px;
            }

            .proc-step-content {
                padding: 20px;
            }

            .proc-step-content::before {
                left: -10px;
                top: 16px;
                border-right: 6px solid white;
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;
            }

            .proc-step-title {
                font-size: 16px;
                margin-bottom: 10px;
            }

            .proc-step-description {
                font-size: 13px;
            }
        }

        @media (max-width: 480px) {
            .proc-container {
                padding: 12px;
                margin: 0 12px;
            }

            .proc-step-item {
                padding-left: 50px;
                margin-bottom: 28px;
            }

            .proc-steps-list::before {
                left: 18px;
            }

            .proc-step-item::before {
                left: 2px;
                width: 28px;
                height: 28px;
                font-size: 11px;
            }

            .proc-step-content {
                padding: 16px;
            }

            .proc-step-title {
                font-size: 15px;
            }

            .proc-step-title::before {
                width: 18px;
                height: 18px;
                font-size: 11px;
            }
        }

/* ===== Coinage /sidechain/ ライク TOC+ ===== */
:root{
  --toc-bg:        #ffffff;  /* 背景 */
  --toc-surface:   #f8f9fb;  /* 内側の面 (微妙な区切り) */
  --toc-border:    #e5e7eb;  /* 枠線 (slate‑200) */
  --toc-text:      #111827;  /* 文字 (slate‑900) */
  --toc-accent:    #1e3a8a;  /* ブルーアクセント (indigo‑800) */
  --toc-active:    #f0b90b;  /* Binance Gold */
  --toc-shadow:    0 2px 8px rgba(0,0,0,.06);
}

/* コンテナ */
#toc_container{
  background-color: var(--toc-bg);
  border: 1px solid var(--toc-border);
  border-radius: 12px;
  box-shadow: var(--toc-shadow);
  padding: 24px 28px;         /* 絶対値指定 */
  margin: 32px 0;
  font-size: 16px;            /* 絶対値指定 */
  line-height: 1.6;
  color: var(--toc-text);
}

/* タイトル */
#toc_container .toc_title{
  margin: 0 0 16px;
  font-size: 18px;            /* 絶対値指定 */
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--toc-accent);
  border-bottom: 1px solid var(--toc-border);
  padding-bottom: 8px;
}

/* リストリセット */
#toc_container ul.toc_list,
#toc_container ul.toc_list ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 階層線 (サイドライン) */
#toc_container ul.toc_list ul{
  border-left: 1px solid var(--toc-border);
  margin-left: 0px;
  padding-left: 16px;
}

/* リンク */
#toc_container ul.toc_list li a{
  display: block;
  padding: 4px 15px;
  font-size: 14px;            /* 絶対値指定 */
  text-decoration: none;
  color: var(--toc-accent);
  border-radius: 4px;
  transition: background-color .15s, color .15s;
}

/* ホバー */
#toc_container ul.toc_list li a:hover,
#toc_container ul.toc_list li a:focus{
  background-color: rgba(30,58,138,.08); /* indigo‑800 を 8% */
  color: var(--toc-accent);
}

/* スクロール連動で現在位置 (.is-active) */
#toc_container ul.toc_list li a.is-active{
  background-color: var(--toc-active);
  color: #000;
}

/* 小さなフェードイン */
@keyframes tocFade{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}
#toc_container{animation:tocFade .4s ease;}
/* === TOC+ 普通の「・」で絶対値指定 === */
#toc_container ul.toc_list li{
  position: relative;
  padding-left: 10px;      /* アイコン分の余白 (px で絶対指定) */
  font-size: 16px;         /* リスト文字サイズを px で絶対指定 */
}

#toc_container ul.toc_list li::before{
  content: "・";
  position: absolute;
left: -18px;
top: -21px;
font-size: 73px;
  line-height: 1;
  color: var(--toc-accent);/* アクセントカラーを流用 */
}

#toc_container ul.toc_list ul li::before{
    font-size: 44px;
    top: -6px;
    left: -6px;
}
.tabwrap {
width: 100%;
max-width: 1200px;
}

.tablist {
display: flex;
gap: 6px;
margin-bottom: -2px;
width: 100%;
}

.tabbtn {
flex: 1;
padding: 20px 30px;
background: #d1d5db;
border: 2px solid #9ca3af;
border-bottom: none;
border-radius: 16px 16px 0 0;
font-size: 18px;
font-weight: 700;
color: #4b5563;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}

.tabbtn:hover:not(.active) {
background: #e5e7eb;
transform: translateY(-2px);
}

.active {
background: #1e78d4;
color: #fff;
border-bottom: 2px solid white;
z-index: 2;
}

.tabcontent {
background: white;
border: 2px solid #9ca3af;
border-radius: 0 0 16px 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
width: 100%;
}

.tabpanel {
padding: 20px;
display: none;
animation: showpanel 0.3s ease;
}

.visible {
display: block;
}

@keyframes showpanel {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.tab-title {
font-size: 28px;
color: #1f2937;
margin-bottom: 24px;
font-weight: 700;
}

.tabpanel p {
font-size: 17px;
line-height: 1.7;
color: #6b7280;
margin-bottom: 18px;
}

.featurelist {
list-style: none;
margin-top: 28px;
}

.featureitem {
padding: 16px 0;
border-bottom: 1px solid #e5e7eb;
color: #374151;
display: flex;
align-items: center;
gap: 16px;
font-size: 16px;
}

.featureitem:last-child {
border-bottom: none;
}

@media (max-width: 600px) {
.tabbtn {
padding: 16px 20px;
font-size: 16px;
}

.tabpanel {
padding: 32px;
}

.tab-title {
font-size: 24px;
}
}
/* --- デザイン設定 --- */
.cm-marquee-wrapper {
margin-top:30px;
width: 100%;
background-color: #1e1e1e !important; /* 背景色 */
color: #ffffff !important;/* 文字色 */
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
padding: 12px 0 !important;
border-bottom: 1px solid #333;
box-sizing: border-box;
line-height: 1.5;
position: relative;
z-index: 10;
}

.cm-marquee {
width: 100%;
    margin-top: 40px;
	overflow: hidden;
}

.cm-marquee-content {
display: flex !important;
/* ここが修正のキモです：中身の幅に合わせて横に伸びるように強制 */
width: max-content !important; 
align-items: center;
animation: marquee-scroll 60s linear infinite; /* 速度を少しゆっくりに */
}

.cm-marquee-wrapper:hover .cm-marquee-content {
animation-play-state: paused;
}

/* --- アイテムのスタイル（縮小防止） --- */
.cm-item {
display: inline-flex !important;
align-items: center !important;
/* フレックスボックスで押しつぶされないように設定 */
flex: 0 0 auto !important; 
margin-right: 60px !important; /* 間隔をしっかり確保 */
font-size: 14px !important;
text-decoration: none !important;
color: #ffffff !important;
}

.cm-icon {
width: 24px !important;
height: 24px !important;
margin-right: 10px !important;
border-radius: 50%;
/* 画像がテーマの影響で歪まないようにリセット */
max-width: none !important;
min-width: 24px !important;
object-fit: cover;
box-shadow: none !important;
border: none !important;
}

.cm-name {
font-weight: bold !important;
margin-right: 10px !important;
}

.cm-price {
font-weight: 500;
margin-right: 10px !important;
}

.cm-change {
font-weight: 500;
}

.cm-up { color: #4eaf0a !important; }
.cm-down { color: #e15241 !important; }
.loading-text { padding-left: 20px; font-size: 12px; opacity: 0.7; }

@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.cl-container {
background-color: #0b0e11; /* 画像に近い深い黒 */
color: #e6e8ea;
padding: 20px;
border-radius: 8px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
max-width: 1200px;
margin: 0 auto;
}

.cl-header h2 {
margin: 0 0 15px 0;
font-size: 18px;
color: #fff;
}

/* --- テーブル設定 --- */
.cl-table-responsive {
overflow-x: auto; /* スマホでの横スクロール */
width: 100%;
}

.cl-table {
width: 100%;
border-collapse: collapse;
white-space: nowrap; /* 折り返し防止 */
}

.cl-table th {
background-color: #0b0e11;
color: #848e9c; /* ヘッダーのグレー文字 */
font-weight: 600;
padding: 12px 8px;
font-size: 12px;
border-bottom: 1px solid #2b3139;
text-align: right; /* 基本右寄せ */
}

.cl-table td {
padding: 12px 8px;
border-bottom: 1px solid #1e2329;
vertical-align: middle;
text-align: right; /* 基本右寄せ */
}

/* --- 各列の調整 --- */
.cl-table th.text-left, .cl-table td.text-left { text-align: left; }
.cl-table th.text-center, .cl-table td.text-center { text-align: center; }

/* 通貨名列 */
.cl-coin-info {
display: flex;
align-items: center;
gap: 10px;
}
.cl-icon {
width: 24px;
height: 24px;
border-radius: 50%;
}
.cl-symbol {
color: #848e9c;
font-size: 12px;
margin-left: 5px;
}
.cl-name {
font-weight: bold;
color: #fff;
}

/* 色設定 */
.cl-up { color: #0ecb81; }  /* 上昇グリーン */
.cl-down { color: #f6465d; } /* 下落レッド */
.cl-neutral { color: #fff; }

/* チャート列 */
.cl-chart-svg {
width: 120px;
height: 40px;
display: block;
margin: 0 auto;
}

.loading-msg { text-align: center; padding: 20px; color: #848e9c; }
.cl-footer { margin-top: 10px; font-size: 10px; text-align: right; color: #555; }
.hbj-team {
background: #f7f9fc;
padding: 100px 0;
position: relative;
overflow: hidden;
}

.hbj-team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin-top: 60px;
}

.hbj-team-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: transform 0.3s, box-shadow 0.3s;
text-align: center;
border: 1px solid rgba(0,0,0,0.03);
}

.hbj-team-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(43, 107, 245, 0.1);
}

.hbj-team-img-wrapper {
width: 100%;
height: 280px;
overflow: hidden;
position: relative;
}

.hbj-team-photo {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.hbj-team-card:hover .hbj-team-photo {
transform: scale(1.05);
}

.hbj-team-info {
padding: 30px 24px;
}

.hbj-team-name {
font-size: 22px;
font-weight: 700;
color: var(--hbj-navy-base);
margin-bottom: 8px;
}

.hbj-team-role {
font-size: 14px;
font-weight: 600;
color: var(--hbj-blue-primary);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
display: block;
}

.hbj-team-desc {
font-size: 14px;
color: #707a8a;
line-height: 1.6;
}
.hb-page-header {
background-color: var(--hb-bg-white);
text-align: center;
border-bottom: 1px solid var(--hb-bg-gray);
}

.hb-page-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
color: var(--hb-text-main);
}

.hb-page-subtitle {
font-size: 14px;
color: var(--hb-text-sub);
text-transform: uppercase;
letter-spacing: 0.05em;
}

/* --- Security Intro Section --- */
.hb-sec-intro {
padding: 20px 0 20px;
text-align: center;
}

.hb-intro-text {
max-width: 720px;
margin: 0 auto;
font-size: 16px;
line-height: 1.8;
color: var(--hb-text-main);
}

/* --- Security Cards Section --- */
.hb-sec-section {
padding: 40px 0 80px;
background-color: var(--hb-bg-white);
}

.hb-sec-grid {
grid-template-columns: 1fr;
}

.hb-sec-card {
background: var(--hb-bg-white);
border: 1px solid var(--hb-border);
border-radius: 8px;
padding: 40px;
display: flex;
flex-direction: column; /* SP: 縦積み */
align-items: flex-start;
transition: box-shadow 0.2s;
margin:20px auto;
}

.hb-sec-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
border-color: var(--hb-primary);
}

.hb-sec-icon-box {
width: 60px;
height: 60px;
background-color: #FEF0F2; /* Red tint background */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
flex-shrink: 0;
}

.hb-sec-icon {
font-size: 28px;
color: var(--hb-primary);
}

.hb-sec-content {
margin:20px auto;
}

.hb-sec-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
color: var(--hb-text-main);
display: flex;
align-items: center;
}

.hb-sec-desc {
font-size: 14px;
color: var(--hb-text-sub);
line-height: 1.7;
}

/* --- Countermeasures List --- */
.hb-measures-list {
list-style: none;
margin-top: 16px;
border-top: 1px dotted var(--hb-border);
padding-top: 16px;
}
.hb-measures-list li {
font-size: 13px;
color: var(--hb-text-main);
margin-bottom: 8px;
padding-left: 20px;
position: relative;
}
.hb-measures-list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
background-color: var(--hb-primary);
border-radius: 50%;
}

/* --- User Request Section (Call to Action) --- */
.hb-user-req-section {
background-color: var(--hb-bg-gray);
padding: 60px 0;
text-align: center;
}
.hb-req-container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 8px;
border: 1px solid var(--hb-border);
}
.hb-req-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 16px;
}
.hb-req-list {
text-align: left;
display: inline-block;
color: var(--hb-text-sub);
font-size: 14px;
line-height: 1.8;
}

/* --- Responsive Desktop --- */
@media (min-width: 768px) {
.hb-page-title { font-size: 36px; }

.hb-sec-icon-box {
margin-bottom: 0;
margin-right: 24px;
}
}