/* Reset & Base */
* { margin: 0;padding: 0; box-sizing: border-box;}
body {  font-family: 'Noto Sans SC', sans-serif;background-color: #ffffff;  color: #1e293b;overflow-x: hidden;   }
:root { --primary: #1a3a5c;  --primary-light: #2c5282; --accent: #c9a96e;  --text: #333333;  --text-light: #666666; --bg-light: #f8f9fa; --white: #ffffff;
 --border: #e2e8f0;}

/* Globe Visual */
.globe-container {  position: relative;  width: 100%; height: 400px;  display: flex; align-items: center;  justify-content: center;}
.globe { width: 320px; height: 320px; position: relative;}
.globe-inner {width: 100%;  height: 100%; background: linear-gradient(135deg, #1a3a5c 0%, #2c5282 50%, #1a3a5c 100%);   
border-radius: 50%; position: relative; box-shadow: 0 20px 60px rgba(26, 58, 92, 0.3);}
.globe-inner::before {  content: ''; position: absolute;  top: 10%;  left: 15%;  width: 30%; height: 20%;  background: rgba(255,255,255,0.1);
  border-radius: 50%;  filter: blur(10px);}
.connection-lines {  position: absolute;  top: 0;   left: 0;  width: 100%; height: 100%;}
.line {  position: absolute; display: flex; align-items: center; gap: 10px;}
.line::before {  content: '';  width: 8px;  height: 8px;  background: var(--accent);   border-radius: 50%;  box-shadow: 0 0 10px var(--accent);}
.line .label {   font-size: 11px;  color:#1e3a8a; background: rgba(255,255,255,0.9);  padding: 4px 8px;  border-radius: 4px;white-space: nowrap;}

.line-1 { top: 10%; right: -80px; }
.line-2 { top: 35%; left: -100px; }
.line-3 { bottom: 25%; left: -100px; }
.line-4 { top: 15%; right: -80px; }
.line-5 { bottom: 15%; right: -80px; }

.center-label { position: absolute;  top: 50%;   left: 50%;   transform: translate(-50%, -50%); background: var(--white);  padding: 8px 16px;
  border-radius: 20px;  font-size: 12px; font-weight: 600;  color:#1e3a8a;  box-shadow: 0 4px 15px rgba(0,0,0,0.1);  white-space: nowrap;}
.container{  width:88%}
/* Section Common */
section {padding: 80px 0;}
.section-title {   text-align: center; font-size: 38px; font-weight:bold;  color:#1e3a8a; margin-bottom: 10px; font-family:Noto Serif SC, serif}
.section-subtitle {  text-align: center;  color:#475569; font-size: 17px; margin-bottom: 50px;}
/* Partners Section */
.partners {  background: var(--white);}
.partners-grid { display: flex;  justify-content: space-between;margin: 0 auto;}
.partner-card {   background: var(--bg-light); padding:22px; width:35%; border-radius: 12px; text-align: center;}
.partner-card h3 { font-size:23px; color:#1e3a8a;margin-bottom: 20px;  font-weight: 600;}
.partner-card img { width: 100%; object-fit: cover;  border-radius: 5px;}
.partner-tags { display: flex; gap: 8px; justify-content: center;}
.partner-svg{ display:flex;align-items: center}
.partner-svg svg{ fill:rgba(30,58,138,0.3);}
.tag { background:#1e3a8a;   color: var(--white); padding: 4px 12px;  border-radius: 4px;  font-size: 12px;}
.partner-connector {  display: flex; width:18.5%;   align-items: center; background:#1e3a8a;border-radius: 12px;  }
.connector-box {color: var(--white); padding: 30px; border-radius: 12px; text-align: center;  font-size: 22px;
 line-height: 1.6;  width: 100%;}

/* Strengths Section */
.strengths {  background: var(--bg-light);}
.strengths-grid { display: grid;   grid-template-columns: repeat(5, 1fr); gap: 18px;}
.strength-card {  background: var(--white); padding: 40px 30px; border-left:4px #1e3a8a solid;  
  box-shadow: 0 4px 20px rgba(0,0,0,0.05); transition: transform 0.3s;}
.strength-card:hover {  transform: translateY(-5px);}
.strength-icon { width: 60px;height: 60px; margin-bottom: 20px; background: #ebf0fa; border-radius: 5px;display: flex; align-items: center;
  justify-content: center; color:#1e3a8a;}
.strength-card h3 { font-size:21px; line-height:32px;color:#1e3a8a;  margin-bottom: 10px; font-weight: 600;}
.strength-card p { font-size: 16px; color:#475569; line-height: 1.6;}

/* Business Section */
.business { background: var(--white);}
.business-grid { display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 25px; margin-bottom: 30px;}
.business-card { position: relative;  border-radius: 10px;  overflow: hidden; }
.business-card img { width: 100%; object-fit: cover;}
.business-overlay {  position: absolute; bottom: 0;left: 0;  right: 0;
  background: linear-gradient(to top, rgba(26, 58, 92, 0.9), transparent);  padding: 30px 20px 25px; color: var(--white);}
.business-overlay h3 {font-size: 22px; margin-bottom: 12px; font-weight:bold}
.business-overlay p { font-size:16px;  opacity: 0.9;}
.business-note {text-align: center; color:#1e3a8a; font-size: 20px; }

/* Products Section */
.products {  background: var(--bg-light); position:relative}
.products::after{ content:""; z-index:0; position:absolute; bottom:0; left:0; width:100%; height:260px; background:#1e3a8a;}
.product-tabs { display: flex;justify-content: center; gap: 10px;  margin-bottom:30px;  flex-wrap: wrap;}
.tab-btn {  padding: 12px 30px;  border: 1px solid var(--border);  background: var(--white);  border-radius: 25px; cursor: pointer;
  font-size: 16px;  color: var(--text);transition: all 0.3s;}
.tab-btn.active,.tab-btn:hover { background:#1e3a8a;   color: var(--white);  border-color:#1e3a8a;}
.product-grid {display: grid; grid-template-columns: repeat(3, 1fr);  gap: 30px;}
.product-card { border-radius: 12px;  overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;/* 初期状態は非表示 */display: none;opacity: 0;}
.product-card.active {display: block;animation: fadeIn 0.5s ease forwards;}
.product-card:hover {transform: translateY(-4px);}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

.product-image {position: relative; border:1px #c0cce9 solid; height:33vh; border-bottom:0;width: 100%;overflow: hidden;background:#ffffff;display: flex;align-items: center;justify-content: center;}
.product-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.product-card:hover .product-image img {transform: scale(1.05);}

.product-txt{ position:relative;}
.product-txt img{ display:block; width:100%}
.product-card h4 { position:absolute; top:50%; line-height:36px; margin-top:-18px;left:0; width:100%; text-align: center;  font-size:20px; color:#1e3a8a; font-weight:bold;}

/* 空状態 */
.empty-state {grid-column: 1 / -1;text-align: center;padding: 60px 20px;color: #999;font-size: 16px;display: none;}
.empty-state.active {display: block;}

/* Process Section */
/*.process { background: var(--bg-light);}*/
.process-steps { display: flex;    justify-content: space-between; gap: 10px; margin: 0 auto; padding:30px 0;}
.step {  flex: 1;  text-align: center;  position: relative;}
.step-number { width: 60px;   height: 60px; background:#1e3a8a; color: var(--white);border-radius: 50%;  display: flex; align-items: center;  
justify-content: center; font-weight: 700;   font-size:18px; margin: 0 auto 15px;}
.step h4 { font-size:20px;color:rgb(15,23,42); margin-bottom: 8px; font-weight:bold}
.step p { font-size: 15px; color:rgba(71,85,105,0.9); line-height: 1.5;}
.step-arrow {  color: var(--accent);  font-size: 24px;    font-weight: 700;}
.step-arrow svg{ fill:rgba(30,58,138,0.3);}
.step-arrow path{ fill:rgba(30,58,138,0.3);}
/* CTA Section */
.cta { position: relative; background:#ebf0fa;padding: 80px 0;overflow: hidden;}
/* Footer */
.footer {background:#1e3a8a; color: var(--white); padding: 60px 0 20px;}
.bottom{ border-top:1px rgba(255,255,255,0.1) solid}

/* 合作对象 */
.card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-8px);  box-shadow: 0 20px 40px -10px rgba(30, 58, 138, 0.15);}
 .scroll-indicator { animation: bounce 2s infinite; }
.arrow-flow { position: relative;}
.arrow-flow::after { content: '→';position: absolute; right: -1.6rem; top: 50%; transform: translateY(-50%); color: #3b82f6;font-size: 1.5rem; font-weight: bold; }
 
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-10px); }
	60% { transform: translateY(-5px); }
}     


/* ============================================
   Language Dropdown (New)
   ============================================ */

.language-dropdown { position: relative; display: inline-block;}
.lang-dropdown-btn { display: flex; align-items: center; gap: 0.5rem; background-color: #1e3a8a;  color: var(--white);  padding: 0.5rem 1rem;
 border-radius: 0.5rem;  font-size: 0.875rem;  font-weight: 500; transition: all var(--transition-normal);border: 1px solid transparent; white-space: nowrap;}
.lang-dropdown-btn:hover {  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);}
.lang-dropdown-btn.active { border-radius: 0.5rem 0.5rem 0 0;}
.lang-icon {  width: 1.25rem;  height: 1.25rem;   flex-shrink: 0;}
.lang-current { font-size: 0.875rem;}
.lang-arrow { width: 1rem; height: 1rem; transition: transform var(--transition-normal);  flex-shrink: 0;}
.lang-dropdown-btn.active .lang-arrow {  transform: rotate(180deg);}

/* Dropdown Menu */
.lang-dropdown-menu {  position: absolute;  top: calc(100% + 0.25rem);  right: 0;  width: 100%;  background-color: var(--white);
  border-radius: 0.75rem; box-shadow: var(--shadow-dropdown);   border: 1px solid var(--slate-100); opacity: 0;
 visibility: hidden; transform: translateY(-10px); transition: all var(--transition-normal);  z-index: 100;  overflow: hidden;}
.lang-dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0);}
.lang-dropdown-item {display: flex; align-items: center;   gap: 0.75rem;   padding: 0.75rem 1rem; color: var(--slate-700);
 font-size: 0.875rem; transition: all var(--transition-fast);  border-bottom: 1px solid var(--slate-50);}
.lang-dropdown-item:last-child { border-bottom: none;}
.lang-dropdown-item:hover { background-color: var(--blue-50); color:#1e3a8a;}
.lang-dropdown-item.active { background-color: var(--blue-50);  color:#1e3a8a;font-weight: 500;}
.lang-dropdown-item.active .lang-check { opacity: 1;  color:#1e3a8a;}
.lang-flag {  font-size: 1.125rem; line-height: 1;}
.lang-name {flex: 1;}
.lang-check { opacity: 0;  font-size: 0.875rem; transition: opacity var(--transition-fast);}
/* Mobile Language Selector */
.mobile-lang-selector {margin-top: 1rem;  padding-top: 1rem;  border-top: 1px solid var(--slate-100);}
.mobile-lang-label { font-size: 0.75rem;  color: var(--slate-400);  text-transform: uppercase; letter-spacing: 0.1em;  margin-bottom: 0.75rem;}
.mobile-lang-options {display: flex;  gap: 0.5rem;}
.mobile-lang-btn { display: flex; align-items: center;  gap: 0.5rem; padding: 0.5rem 0.75rem;  border-radius: 0.5rem;   font-size: 0.875rem;
 color: var(--slate-600); background-color: var(--slate-50);border: 1px solid var(--slate-200);  transition: all var(--transition-fast); flex: 1;
  justify-content: center;}
.mobile-lang-btn:hover {  background-color: var(--blue-50); border-color:#1e3a8a;  color:#1e3a8a;}
.mobile-lang-btn.active { background-color:#1e3a8a; color: var(--white); border-color:#1e3a8a; font-weight: 500;}

.hero-section {position: relative;min-height: 100vh;display: flex;align-items: center;overflow: hidden;padding-top: 80px;}
.hero-bg {position: absolute;inset: 0;z-index: 0;}
.hero-bg img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
.hero-overlay {position: absolute;inset: 0;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 58, 138, 0.78) 50%, rgba(30, 64, 175, 0.68) 100%);z-index: 1;}
.hero-pattern {position: absolute;inset: 0;
background-image: 	linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 50px 50px;z-index: 2;}
.card-hover {transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.card-hover:hover {transform: translateY(-8px);box-shadow: 0 20px 40px -10px rgba(30, 58, 138, 0.15);}
.fade-in {opacity: 0;transform: translateY(30px);transition: opacity 0.8s ease-out, transform 0.8s ease-out;}
.fade-in.visible {opacity: 1;transform: translateY(0);}
.blur-backdrop {backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);}
.scroll-indicator {animation: bounce 2s infinite;}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-10px); }
	60% { transform: translateY(-5px); }
}

.map-grid {
	background-image: 
		linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
	background-size: 40px 40px;
}

.timeline-line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(to bottom, #3b82f6, #1e3a8a);
	transform: translateX(-50%);
}

.he80{ height:80px; display:block; width:100%}
.value-card {   background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);   border: 1px solid #e2e8f0;transition: all 0.4s ease;}
.value-card:hover { border-color: #3b82f6; transform: translateY(-4px);  box-shadow: 0 12px 24px -8px rgba(30, 58, 138, 0.12); }
.category-tag {transition: all 0.3s ease; }
.category-tag:hover {background-color: #1e3a8a;color: white;  transform: scale(1.05); }
.category-tag:hover h3{ color: white;}

.ban{ display:block; width:100%; position:relative}
.ban_c{ position:absolute; top:46%; transform:translate(-50%,-50%); left:50%; z-index:9; color:#FFF; width:100%}
.ban_c h2{ font-size:50px; margin-bottom:15px; font-weight:660; font-family:Noto Serif SC, serif}
.ban_c p{ font-size:26px;}

.category-section {border-bottom: 1px solid #e2e8f0; }
.category-inner {padding:40px 0;}  
.category-list {display: flex;   gap: 12px; flex-wrap: wrap;  justify-content: center; }
.category-tag {padding: 10px 24px;border-radius: 8px;font-size: 16px;	font-weight: 500;color: var(--text-sub);background: var(--soft-gray);	
border: 1px solid var(--border);}
.category-tag.active {background-color: #1e3a8a;color: white;  transform: scale(1.05); }
.category-tag.active h3{ color: white;}

.products-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 32px;margin-bottom: 48px;}
.product-cards {background: var(--white);border-radius: 16px;overflow: hidden;border: 1px solid var(--border);transition: all 0.4s cubic-bezier(0.4,0,0.2,1);}
.product-cards:hover {transform: translateY(-8px);box-shadow: var(--shadow-xl);border-color: #bfdbfe;}
.product-image {aspect-ratio: 4/3;background: #f1f5f9;overflow: hidden;position: relative;}
.product-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.6s ease;}
.product-card:hover .product-image img {transform: scale(1.08);}
.product-body {padding: 24px;display: flex;align-items: center;justify-content: space-between;}
.product-name {font-size: 18px;font-weight: 700;color: var(--navy);margin-bottom: 8px;line-height: 1.4;}
.product-link {display: flex;align-items: center;gap: 4px;font-size: 16px;color:#1e3a8a;font-weight: 500;transition: gap 0.3s;}


/* ========================================
   ページネーション
   ======================================== */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
}

.pagination a, .pagination span {
	min-width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-sub);
	background: var(--white);
	border: 1px solid var(--border);
	transition: all 0.3s;
}

.pagination a:hover {
	border-color:#1e3a8a);
	color: var(--primary);
	background: #eff6ff;
}

.pagination a.active {
	background:#1e3a8a;
	color: white;
	border-color:#1e3a8a;
	box-shadow: var(--shadow-md);
}

.pagination .prev-next {
	padding: 0 16px;
	gap: 6px;
}

.pagination .dots {
	border: none;
	background: none;
	color: var(--text-sub);
}

.dangqian{ display:flex; margin-bottom:20px;}
.dangqian svg{ margin-right:7px;}
.post h1{ font-size:30px; font-weight:bold; margin-bottom:15px; text-align:center}

.chanpinshow{ padding-top:20px; font-size:16px; line-height:32px}
.chanpinshow img{ display:block; margin:5px auto;}

@media only screen and (max-width:1360px){
	.partner-card h3{ font-size:20px;}
	.connector-box{ font-size:20px;}
	.ban_c h2{ font-size:40px; margin-bottom:15px; }
.ban_c p{ font-size:22px;}
	}

/* Responsive */
@media (max-width: 968px) {
	.px-6{padding-left:1.3rem !important;padding-right:1.3rem !important}
	section{ padding:40px 0 !important}
	.section-title{ font-size:1.875rem;}
	.section-subtitle{ font-size:16px; margin-bottom:30px;}
    .globe-container {  height: 300px; }
    .partners-grid { display:block }
    .partner-card{ width:100%}
	.partner-svg{ display:none}
    .partner-connector { width:100%; margin:10px auto}
    .partner-card h3{ font-size:18px;}
    .strengths-grid { grid-template-columns: repeat(2, 1fr);}
    .business-grid,.product-grid {grid-template-columns: 1fr; }
    .process-steps {flex-direction: column;   align-items: center;  }
    .step-arrow {transform: rotate(90deg);    margin: 10px 0;  }
    .tab-btn{ padding:10px 20px;}
.products::after{ height:calc( 100% - 390px)}
    .arrow-flow::after {  content: '↓';right: 50%;   top: 100%;transform: translateX(50%);  }
		.ban_c h2{ font-size:30px; margin-bottom:15px; }
.ban_c p{ font-size:20px;}
.products-grid{grid-template-columns: repeat(2, 1fr);gap:20px}
.product-image{ height:auto}
.product-body{ display:block; padding:15px;} 
}



@media (max-width: 768px) {
	.timeline-line {left: 2rem;}
	.logo{ height:40px;}
	#navbar .h-20{ height:4rem}
	#navbar .px-6{ padding:0 0.6rem}
	.hero-section .text-5xl{ font-size:2.3rem;margin-bottom:0.3rem}
	.hero-section .text-2xl{ font-size:1.1rem; margin-top:0.6rem}
	.hero-section .text-lg{ font-size:0.8rem;margin-bottom:1rem}
	.he80{ height:65px;}
	.partner_an{ padding:10px !important;}
}

@media (max-width: 640px) {
.strengths-grid { grid-template-columns: 1fr; }
}