/* ==========================
   COMPANY SITE - CONSOLIDATED CSS
   - 推奨レスポンシブ設定適用
   - 重複統合・命名修正・スペース統一
   ========================== */

/* ---- Variables & Reset ---- */
:root{
  --max-width: 1220px;
  --container-padding: 20px;
  --section-vertical: 100px; /* PC default vertical padding for sections */
  --section-gap: 80px;
  --brand-blue-1: #0088FF;
  --brand-blue-2: #132D8A;
  --accent-gold: #C7BE7C;
  --muted-bg: #F5F5F8;
  --text-dark: #0d0d0d;
  --title-shadow: 0 4px 20px rgba(0,0,0,0.35);
  --card-radius: 20px;
  --border-radius-pill: 66px;
  --base-font-sans: "Noto Sans JP", sans-serif;
  --base-font-serif: "Shippori Mincho", serif;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background-color:#fff;
  color:var(--text-dark);
  font-family:var(--base-font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Container utilities */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-padding);
}

/* Section baseline spacing (PC), responsive override later */
section{
  padding-top:var(--section-vertical);
  padding-bottom:var(--section-vertical);
}

/* ---- HERO SECTION ---- */
.company-hero {
  position: relative;
  overflow: hidden;
  min-height: 650px;
  padding: 40px 0 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80px;
}

/* main-content pseudo (keeps decorative stripe centered) */
.main-content{
  position:relative;
}
.main-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 95px;
    background: linear-gradient(180deg, rgba(0, 136, 255, 1) 0%, rgba(19, 45, 138, 1) 100%);
    border-radius: 60px;
    z-index: 2;
}

/* background image + overlay */
.hero-background{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}
.hero-bg-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  /* slightly dark overlay to improve contrast */
  background: linear-gradient(180deg, rgba(51, 158, 234, 0.8) 0%, rgba(0, 157, 255, 0.2) 100%);
  mix-blend-mode:normal;
}

/* hero content */
.hero-content{
  position:relative;
  z-index:3;
  text-align:center;
  color:#fff;
  max-width:1026px;
  padding:0 20px;
}

/* titles: responsive via clamp */
.hero-title{
  font-family:var(--base-font-serif);
  font-weight:700;
  color:#ffffff; /* ensure readable on overlay */
  font-size: clamp(30px, 6.5vw, 48px);
  line-height:1.2;
  letter-spacing:-0.02em;
  margin:0 0 40px;
  text-shadow: var(--title-shadow);
}
.hero-description{
  font-family:var(--base-font-serif);
  font-weight:400;
  font-size: clamp(16px, 2.8vw, 24px);
  line-height:1.9;
  color:#fff;
  margin:0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* ---- PHILOSOPHY SECTION ---- */
.philosophy-section{
  background-color:#FFFFFF;
}
.section-content{ max-width: 1220px; margin:0 auto; padding:0 var(--container-padding); }

/* headers */
.section-header{ text-align:center; margin-bottom:var(--section-gap); }
.section-subtitle{
  font-family:var(--base-font-sans);
  font-weight:700;
  font-size:clamp(20px,2.7vw,36px);
  color:var(--accent-gold);
  margin-bottom:12px;
}
.section-title{
  font-family:var(--base-font-sans);
  font-weight:700;
  font-size:clamp(18px,1.8vw,24px);
  color:#999;
}

/* philosophy cards grid */
.philosophy-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  margin-bottom:80px;
}
.philosophy-card{
  position:relative;
  height:451px;
  border-radius:var(--card-radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  transition:transform .3s ease, box-shadow .3s ease;
}
.philosophy-card:hover{ transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,0.15); }

.card-background{ position:absolute; inset:0; z-index:1; }
.card-background img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-background::after{
  content:'';
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.3);
  z-index:2;
}
.card-content{ position:relative; z-index:3; padding:60px 40px; text-align:center; color:#fff; }
.card-title{
  font-family:var(--base-font-serif);
  font-weight:800;
  font-size:clamp(20px,3vw,36px);
  margin-bottom:20px;
}
.card-text{ font-family:var(--base-font-sans); font-size:16px; line-height:2; }

/* ---- OVERVIEW SECTION ---- */
.overview-section{ background-color:var(--muted-bg); }
.overview-content{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:80px;
  align-items:start;
}
.overview-text .section-title{
  font-family:var(--base-font-sans);
  font-weight:700;
  font-size:36px;
  color:#000;
  text-align:center;
  margin-bottom:80px;
}
.company-info{ display:flex; flex-direction:column; gap:24px; }

.info-row{ display:flex; align-items:flex-start; gap:80px; }
.info-label{
  font-family:var(--base-font-sans);
  font-weight:700;
  font-size:15px;
  color:var(--brand-blue-1);
  min-width:90px;
  flex-shrink:0;
}
.info-value{ font-family:var(--base-font-sans); font-weight:400; font-size:15px; color:#000; flex:1; }

.overview-image{ border-radius:30px; overflow:hidden; height:464px; }
.overview-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- BOARD SECTION ---- */
.board-section{ background-color:#fff; }
#company .section-title{ font-size:32px; margin-bottom:80px; position:relative; text-align:center; color:#000; }
#company h2.section-title::before{
  position:absolute; bottom:-40px; left:50%; transform:translate(-50%,-50%);
  width:70px; height:10px; background:var(--accent-gold); border-radius:60px; content:""; z-index:2;
}
.company-stats{
  display:flex; justify-content:center; gap:140px; margin-bottom:80px; position:relative; align-items:center;margin-top: 20px;
}
.company-stat-item{ /* fixed naming */
  text-align:center; position:relative;
}
.company-stat-number{
  font-family:var(--base-font-serif);
  font-weight:700;
  font-size:clamp(40px,6vw,60px);
  line-height:1;
  color:#fff;
  text-shadow:0 4px 15px rgba(0,0,0,0.3);
  margin-bottom:10px;
}
.company-stat-label{
  font-family:var(--base-font-serif);
  font-weight:700;
  font-size:clamp(16px,1.8vw,21px);
  color:var(--brand-blue-2);
  background-color:#fff;
  padding:3px 15px;
  border-radius:5px;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

/* board members */
.board-members{ display:grid; grid-template-columns: repeat(3,1fr); gap:40px; margin-bottom:40px; }
.member-card{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.member-image{ width:313px; height:313px; border-radius:40px; overflow:hidden; margin-bottom:20px; position:relative; }
.member-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.member-image::after{ content:''; position:absolute; inset:0; }
.member-title{ font-family:var(--base-font-sans); font-weight:700; font-size:20px; margin-bottom:20px; color:#000; }
.member-title-link{ display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; color:#000; cursor:pointer; transition:opacity 0.3s ease; flex-wrap:wrap; line-height:1.4; }
.member-title-link br + .member-badge{ margin-left:8px; }
.member-title-link:hover{ opacity:0.7; }
.member-badge{ font-family:var(--base-font-sans); font-weight:600; font-size:14px; background-color:var(--brand-blue-2); color:#fff; padding:4px 12px; border-radius:12px; display:inline-block; white-space:nowrap; }
.chairman-card{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:313px 1fr;
  gap:60px;
  align-items:start;
  text-align:left;
  margin-bottom:60px;
}
.chairman-card .member-image{ width:313px; height:345px; }
.chairman-card .member-title{ margin-bottom:40px; }
.member-description{ font-size:16px; line-height:1.75; color:#000; }
.company-message{ background-color:var(--muted-bg); padding:60px; border-radius:20px; text-align:left; }
.company-message p{ font-size:16px; }

/* 顧問・アドバイザー（名前のみ表示） */
.advisors-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 40px;
    border-top: 2px solid #e2e8f0;
}

.advisor-item {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 15px 0;
    font-size: 18px;
}

.advisor-name {
    font-family: var(--base-font-sans);
    font-weight: 700;
    color: #000;
    min-width: 200px;
    flex-shrink: 0;
}

.advisor-affiliation {
    font-family: var(--base-font-sans);
    font-weight: 500;
    color: #555;
    line-height: 1.6;
}

/* ---- ORGANIZATION CHART SECTION ---- */
.org-chart-section {
    background: #fff;
    padding-top: 0;
}

.board-section + .org-chart-section {
    padding-top: 0;
    padding-bottom: 0;
}

/* ワランティグループ体制図セクションの余白を半分に */
.org-chart-group-section {
    padding-top: calc(var(--section-vertical) / 2) !important;
    padding-bottom: calc(var(--section-vertical) / 2) !important;
}

/* PC表示：画像 */
.org-chart-image {
    text-align: center;
    margin: 60px 0;
}

.org-chart-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--card-radius);
    /*box-shadow: 0 4px 15px rgba(0,0,0,0.1);*/
}

/* スマホ表示：HTML組織図 */
.org-chart-mobile-section {
    margin: 25px 0;
    padding: 20px 0;
    border-bottom: 2px solid #e0e0e0;
}

.org-chart-mobile-section:last-child {
    border-bottom: none;
}

.org-chart-mobile-title {
    color: var(--brand-blue-2);
    font-family: var(--base-font-sans);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--brand-blue-2);
}

.org-chart-mobile-box {
    background: var(--brand-blue-2);
    color: #fff;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.org-chart-mobile-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 組織図の3段階の色分け */
.org-chart-section-executive .org-chart-mobile-box {
    background: #0A1A5C;
}

.org-chart-section-sales .org-chart-mobile-box {
    background: var(--brand-blue-2);
}

.org-chart-section-admin .org-chart-mobile-box {
    background: #1E3A9E;
}

.org-chart-mobile-box-title {
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.org-chart-mobile-box-subtitle {
    font-size: 0.8rem;
    line-height: 1.4;
    opacity: 0.9;
    margin-top: 6px;
}

.org-chart-mobile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.org-chart-mobile-subsection {
    margin-top: 10px;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.org-chart-mobile-box-nested {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 12px;
    margin: 0;
    font-size: 0.85rem;
}

/* 各セクションのネストされたボックスも親の背景色に合わせる */
.org-chart-section-executive .org-chart-mobile-box-nested {
    background: rgba(255, 255, 255, 0.15);
}

.org-chart-section-sales .org-chart-mobile-box-nested {
    background: rgba(255, 255, 255, 0.2);
}

.org-chart-section-admin .org-chart-mobile-box-nested {
    background: rgba(255, 255, 255, 0.25);
}

/* PC表示：画像を表示、スマホHTML組織図を非表示 */
@media (min-width: 1025px) {
    .org-chart-section .org-chart-image {
        display: block;
    }
    
    .org-chart-section .org-chart-mobile {
        display: none;
    }
}

/* タブレット・スマホ表示：HTML組織図を表示 */
@media (max-width: 1024px) {
    .org-chart-section .org-chart-mobile {
        display: none !important;
        padding: 0;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /*.org-chart-section .org-chart-image {
        display: none !important;
    }*/
    
    .org-chart-mobile-section {
        margin: 20px 0;
        padding: 15px 0;
        display: block !important;
    }
    
    .org-chart-mobile-title {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }
    
    .org-chart-mobile-box {
        padding: 10px 14px;
        margin: 8px 0;
    }
    
    .org-chart-mobile-box-title {
        font-size: 0.9rem;
    }
    
    .org-chart-mobile-box-subtitle {
        font-size: 0.75rem;
    }
    
    .org-chart-mobile-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px;
    }
    
    .org-chart-mobile-subsection {
        margin-top: 8px;
        padding-left: 8px;
        gap: 6px;
    }
    
    .org-chart-mobile-box-nested {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
}

.cl-image{
  text-align: center;
}

.cl-image img{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* ---- ACCESS SECTION ---- */
.access-section{ background-color:var(--muted-bg); }
.offices-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:30px; }
.office-card{ background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.1); transition:transform .3s ease, box-shadow .3s ease; }
.office-card:hover{ transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,0.15); }
.office-card.flexitem {display: flex;}
.office-map{ height:250px; overflow:hidden; position:relative; }
.office-map.map01{ height: 100%;width: 440px; }
.office-map img{ width:110%; height:100%; object-fit:cover; display:block; }
.office-info{ padding:40px; }
.office-title{ font-weight:700; font-size:20px; margin-bottom:20px; }
.office-address{ font-size:16px; margin-bottom:20px; }
.office-contact{ font-weight:700; font-size:20px; margin-bottom:20px; }
.map-btn{
  background:#fff; border:3px solid var(--brand-blue-2); color:#1C2226;
  font-weight:700; font-size:15px; padding:9px 44px; border-radius:var(--border-radius-pill); cursor:pointer;
  transition:all .3s ease;
  text-decoration: none;
}
.map-btn:hover{ background:var(--brand-blue-2); color:#fff; }

/* ---- HISTORY / TIMELINE ---- */
.history-section{ background:#fff; }
.timeline{ position:relative; max-width:1200px; margin:0 auto; }
.timeline-line{
  position:absolute; left:239px; top:0; bottom:0; width:2px; background-color:var(--accent-gold); border-radius:10px;
}
.timeline-item{
  display:grid; grid-template-columns:200px 20px 1fr; gap:30px; align-items:center; margin-bottom:80px; position:relative;
}
.timeline-year{ font-weight:900; font-size:32px; text-align:right; padding-top:10px; }
.timeline-circle{ width:20px; height:20px; background:var(--brand-blue-2); border-radius:50%; margin-top:10px; z-index:2; }
.timeline-content{ background:var(--muted-bg); padding:40px; border-radius:8px; max-width:736px; }
.timeline-title{ font-weight:700; font-size:20px; margin-bottom:10px; }
.timeline-description{ font-size:16px; line-height:1.75; }

/* ---- AWARDS ---- */
.awards-section{ background:var(--muted-bg); }
.awards-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px; max-width:1200px; margin:0 auto; }
.award-card{ background:#fff; border-radius:8px; padding:40px; box-shadow:0 4px 4px rgba(0,0,0,0.25); display:flex; gap:40px; align-items:flex-start; transition:transform .3s; }
.award-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.15); }
.award-year{ background:var(--accent-gold); font-weight:700; font-size:32px; text-align:center; padding:20px; border-radius:10px; min-width:125px; height:125px; display:flex; align-items:center; justify-content:center; }
.award-title{ font-weight:700; font-size:24px; margin-bottom:20px; }
.award-description{ font-size:16px; line-height:2; }

/* ---- Footer / CTAなどの共通調整 ---- */
.cta-content{ padding:0 var(--container-padding); }

/* ---------------------------
   RESPONSIVE BREAKPOINTS
   - 1400 / 1200 / 1024 / 768 / 480
   --------------------------- */

/* 1400px 以下: 主にグリッドを1カラムに寄せる調整 */
@media (max-width:1400px){
  .philosophy-cards{ grid-template-columns:1fr; gap:30px; }
  .overview-content{ grid-template-columns:1fr; gap:40px; }
  .offices-grid{ grid-template-columns:1fr; gap:30px; }
  .awards-grid{ grid-template-columns:1fr; }
  .timeline-item{ grid-template-columns:200px 20px 1fr; }
  .cta-content{ padding:0 40px; }
}

/* 1200px 以下: hero の文字とstat の間隔を縮める / board-members 2カラム化 */
@media (max-width:1200px){
  .hero-title{ font-size: clamp(28px,5.5vw,48px); margin-bottom:30px; }
  .hero-description{ font-size: clamp(16px,3.2vw,24px); }
  .company-stats{ gap:80px; }
  .chairman-card{ grid-template-columns:1fr; text-align:left; gap:30px; }
  .chairman-card .member-image{ width:100%; max-width:285px; margin:0 auto; }
  .board-members{ grid-template-columns: repeat(2,1fr); gap:30px; }
  .overview-content{ grid-template-columns:1fr; }
  section{ padding-top:120px; padding-bottom:120px; }
}

/* 1024px 以下: tablet */
@media (max-width:1024px){
  .philosophy-cards{ gap:24px; }
  .company-stats{ gap:60px; }
  .overview-content{ grid-template-columns:1fr; }
  .offices-grid{ grid-template-columns:1fr; }
  section{ padding-top:100px; padding-bottom:100px; }
}

/* 768px 以下: スマホメイン調整 */
@media (max-width:768px){
  /* HERO: make vertical space tighter and min-height less aggressive */
  .company-hero{
    min-height: auto;
    padding: 86px 0 60px;
    align-items:flex-start;
  }
  .hero-title {
    font-size: 30px;
    margin-bottom: 20px;
    line-height: 1.5;
  }
  .hero-description{ font-size:18px; line-height:1.8; margin-bottom:12px; text-align: left;}

  /* layout -> single column */
  .overview-content, .board-members, .offices-grid, .awards-grid{ grid-template-columns:1fr; }
  .philosophy-card{ height:300px; }
  .card-content{ padding:30px 20px; }
  .card-title{ font-size:24px; margin-bottom:20px; }
  .card-text{ font-size:15px; text-align:left; }
  .office-card.flexitem {display: block;}
.office-map.map01 {
  height: 250px;
  width: initial;
}

  .info-row{ flex-direction:column; gap:10px; }
  .info-label{ min-width:auto; }

  .company-stats{ flex-direction:column; gap:40px; margin-top:40px; }
  .company-stat-number{ font-size:50px; }
  .company-stat-label{ font-size:18px; }

  .timeline-item{ grid-template-columns:1fr; gap:10px; text-align:center; }
  .timeline-line{ display:none; }
  .timeline-circle{ margin:0 auto; }
  .timeline-year{ text-align:center; margin-bottom:10px; }

  .member-image{ width:100%; max-width:313px; margin:0 auto; }
  
  /* 顧問・アドバイザーリストのレスポンシブ対応 */
  .advisor-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
  }
  
  .advisor-name {
      min-width: auto;
  }
  
  section{ padding-top:80px; padding-bottom:80px; }
  
  /* ワランティグループ体制図セクションの余白を半分に（スマホ） */
  .org-chart-group-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* スマホ表示時：section-titleのフォントサイズを2周り小さく */
  #company .section-title {
    font-size: 32px;
  }
}

/* 480px 以下: 最小表示調整（小型スマホ） */
@media (max-width:480px){
  :root{ --section-vertical:60px; }
  .hero-title{ font-size: clamp(22px,8vw,34px); }
  .hero-description{ font-size:14px; line-height:1.6; }
  .company-stat-number{ font-size:40px; }
  .company-stats{ gap:24px; margin-top:24px; }
  .card-content{ padding:20px; }
  .overview-image{ height:320px; }
  section{ padding-top:60px; padding-bottom:60px; }
}

/* ---- Minor helpers ---- */
.text-center{ text-align:center; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* Accessibility: ensure focus outlines */
a:focus, button:focus { outline:0px solid rgba(19,45,138,0.2); outline-offset:2px; }

/* ==========================
   WARRANTY CERTIFICATE PAGE
   - 保証書自動発行サービスページ専用スタイル
   - .warranty-certificate-pageでラップして既存スタイルと競合を回避
   ========================== */
.warranty-certificate-page {
  background-color: #f8f9fa;
}

.warranty-certificate-page .warranty-hero {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 80px 0 60px;
  text-align: center;
  margin-top: 100px;
}

.warranty-certificate-page .warranty-hero-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.warranty-certificate-page .warranty-hero-title {
  font-size: 2.5em;
  margin-bottom: 10px;
  font-weight: bold;
}

.warranty-certificate-page .warranty-subtitle {
  font-size: 1.2em;
  opacity: 0.9;
  margin-bottom: 20px;
}

.warranty-certificate-page .patent-info {
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
  font-size: 0.9em;
}

.warranty-certificate-page .patent-info p {
  margin: 5px 0;
}

.warranty-certificate-page .patent-title {
  font-weight: bold;
  margin-bottom: 8px;
}

/* Service Overview Section */
.warranty-certificate-page .service-overview {
  background: white;
  padding: 60px 0;
}

.warranty-certificate-page .flow-diagram {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 40px;
}

.warranty-certificate-page .workflow-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  min-height: 400px;
  position: relative;
}

.warranty-certificate-page .workflow-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
}

.warranty-certificate-page .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 150px;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.warranty-certificate-page .step-icon {
  width: 80px;
  height: 80px;
  background: #1e3c72;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  color: white;
  font-size: 2em;
}

.warranty-certificate-page .step-icon.shop {
  border-radius: 8px;
  background: #555;
}

.warranty-certificate-page .arrow {
  font-size: 2em;
  color: #1e3c72;
}

.warranty-certificate-page .cycle-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.warranty-certificate-page .cycle-icon {
  width: 40px;
  height: 40px;
  color: #1e3c72;
}

.warranty-certificate-page .patent-detail {
  background: #f0f7ff;
  border-left: 4px solid #1e3c72;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 40px;
}

.warranty-certificate-page .patent-detail p {
  margin: 8px 0;
  line-height: 1.8;
}

/* Features Section */
.warranty-certificate-page .features {
  padding: 60px 0;
  background: #f8f9fa;
}

.warranty-certificate-page .point-badge {
  display: inline-block;
  background: #1e3c72;
  color: white;
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 20px;
}

.warranty-certificate-page .feature-title {
  font-size: 2em;
  margin-bottom: 30px;
  color: #333;
}

.warranty-certificate-page .feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  align-items: start;
}

.warranty-certificate-page .feature-content {
  line-height: 1.8;
  font-size: 1.1em;
  margin-bottom: 30px;
}

.warranty-certificate-page .certificate-sample {
  background: white;
  border: 4px dashed #ef4444;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.warranty-certificate-page .logo-note {
  color: #ef4444;
  font-size: 0.85em;
  margin-bottom: 10px;
}

.warranty-certificate-page .certificate-inner {
  border: 2px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}

.warranty-certificate-page .certificate-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.warranty-certificate-page .certificate-logo {
  width: 50px;
  height: 50px;
  background: #1e3c72;
  border-radius: 50%;
}

.warranty-certificate-page .certificate-title {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.warranty-certificate-page .certificate-details {
  font-size: 0.9em;
  line-height: 2;
}

.warranty-certificate-page .certificate-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding: 8px 0;
}

.warranty-certificate-page .certificate-content {
  margin-top: 20px;
  font-size: 0.85em;
  color: #666;
  line-height: 1.6;
}

.warranty-certificate-page .system-screenshot {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.warranty-certificate-page .system-screenshot img {
  width: 100%;
  height: auto;
  display: block;
}

.warranty-certificate-page .benefit-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.warranty-certificate-page .benefit-item {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.warranty-certificate-page .benefit-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: #f0f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e3c72;
}

.warranty-certificate-page .benefit-text h4 {
  font-size: 1.3em;
  margin-bottom: 10px;
  color: #333;
}

.warranty-certificate-page .benefit-text p {
  color: #666;
  line-height: 1.8;
}

.warranty-certificate-page .email-highlight {
  background: #f0f7ff;
  padding: 25px;
  border-radius: 8px;
  margin-top: 30px;
}

.warranty-certificate-page .email-highlight-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.warranty-certificate-page .email-icon {
  width: 40px;
  height: 40px;
  color: #1e3c72;
}

/* CTA Section */
.warranty-certificate-page .cta {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
}

.warranty-certificate-page .cta h2 {
  font-size: 2em;
  margin-bottom: 15px;
}

.warranty-certificate-page .cta p {
  font-size: 1.2em;
  margin-bottom: 30px;
}

.warranty-certificate-page .cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.warranty-certificate-page .btn {
  padding: 15px 40px;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  text-decoration: none;
  display: inline-block;
}

.warranty-certificate-page .btn-primary {
  background: white;
  color: #1e3c72;
}

.warranty-certificate-page .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.warranty-certificate-page .btn-secondary {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.warranty-certificate-page .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .warranty-certificate-page .warranty-hero-title {
    font-size: 2em;
  }
  
  .warranty-certificate-page .warranty-subtitle {
    font-size: 1em;
  }
  
  .warranty-certificate-page .workflow-steps {
    flex-direction: column;
    gap: 20px;
  }
  
  .warranty-certificate-page .arrow {
    transform: rotate(90deg);
  }
  
  .warranty-certificate-page .feature-grid {
    grid-template-columns: 1fr;
  }
  
  .warranty-certificate-page .feature-title {
    font-size: 1.5em;
  }
  
  .warranty-certificate-page .benefit-item {
    flex-direction: column;
  }
}

/* End of stylesheet */