/* styles.css - LPスタイル */
:root{
  --color-ice:#00D4FF;
  --color-steel:#0066CC;
  --color-navy:#003D82;
  --color-surface:#F0F8FF;
  --color-line:#B3E5FF;
  --color-text:#1D1D1F;
  --color-muted:#4A4A4A;
  --color-impact:#ec8a3a;
  --color-primary:#00CC66;    /* メインアクション色：鮮やかなグリーン */
  --color-primary-hover:#00A352; /* ホバー時：少し深いグリーン */
  --color-primary-light:#E8F7F0;  /* 薄いグリーン（背景用） */
  --color-success:#4CAF50;    /* 成功メッセージ用 */
  --radius:12px;
  --container:1200px;
  --gap:10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Noto Sans JP", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--color-text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background:#fff;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:8px;
  top:8px;
  width:auto;
  height:auto;
  padding:8px 12px;
  background:#000;
  color:#fff;
  z-index:9999;
}

/* Header */
.site-header{
  background:transparent;
  /* position:sticky; */
  top:0;
  z-index:90;
  border-bottom:1px solid rgba(0,0,0,0.04);
  backdrop-filter: blur(4px);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 0;
}
.logo img{width: 230px; display:block;}
.global-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:16px;
  align-items:center;
}
.global-nav a{
  color:var(--color-text);
  text-decoration:none;
  font-weight:600;
  font-size:15px;
}
.header-cta .btn{white-space:nowrap;}

/* Buttons */
.btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  border:0;
  cursor:pointer;
}
.btn-primary{
  background:var(--color-impact);
  color:#fff;
}
.btn-outline{
  background:transparent;
  color:var(--color-steel);
  border:1px solid var(--color-steel);
}
.hero .btn-outline{
  background:rgba(255,255,255,0.95);
  color:var(--color-steel);
  border:1px solid rgba(255,255,255,0.8);
  backdrop-filter: blur(4px);
}
.form-actions .btn{
  width:50%;
  max-width:200px;
  text-align: center;
}

/* Hero */
.bg-ice-blue{
  background: linear-gradient(rgba(65, 110, 136, 0.55), rgba(65, 110, 136, 0.55)),
              url('./img/bg01.JPG'); 
  background-size: cover;
  /* background-position: center right; */
  background-position: center right;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}
.hero{
  max-width:var(--container);
  height: 500px;
  /* display: flex; */
  display: block; 
  align-items: center;
  margin: 0 auto;
}
.hero-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
  min-height: 100%; /* 高さを親要素に合わせる */
}
.hero-copy h1{
  margin:0 0 12px;
  font-size: clamp(24px, 4.8vw, 36px);
  color:#ffffff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  line-height:1.12;
  max-width:60ch; /* 行長をほどよく制御（可読性向上） */
  word-break:keep-all; /* 日本語の語中改行を抑制 */
}
@media (max-width:450px) {
  .hero-copy h1 {
    max-width: 90vw; /* ビューポート幅の90% */
    word-break: break-word; /* 必要に応じて改行を許可 */
  }
}
.hero .lead{
  font-size:18px;
  color:#f0f7fa;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
  margin-bottom:20px;
}
.cta-group{display:flex; gap:12px; align-items:center;}
.hero-image img{
  width:100%;
  height:360px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

/* Sections */
.section{padding:60px 0;}
.section h2{
  font-size: clamp(20px, 2.5vw, 28px);
  margin:0 0 12px;
  color:var(--color-steel);
  line-height:1.2;
  max-width:60ch; /* 行長をほどよく制御（可読性向上） */
  word-break:keep-all; /* 日本語の語中改行を抑制 */
}
.section .muted{color:var(--color-muted); margin-bottom:20px;}

.two-col{display:flex; gap:32px; align-items:center;}
.two-col .col{flex:1;}
.two-col .image-col img{width:100%; height:320px; object-fit:cover; border-radius:12px;}

.two-col-reverse .col{flex:1;}
.two-col-reverse .image-col img{width:100%; height:320px; object-fit:cover; border-radius:12px;}

.two-col-reverse{display:flex; gap:32px; align-items:center;}
@media(min-width:900px){ .two-col-reverse{flex-direction:row-reverse} }

/* Cards grid */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px;}
.card{background:var(--color-surface); padding:20px; border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,0.06);}
.card img{width:100%; height:180px; object-fit:cover; border-radius:8px; margin-bottom:12px;}
.card h3{margin:0 0 8px; color:var(--color-navy);}

.job-cards{display:flex; flex-direction:column; gap:16px; margin-top:16px;}
.job-card{
  background:var(--color-surface);
  padding:20px;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
  display:flex;
  align-items:flex-start;
  gap:20px;
}
.job-icon{
  flex-shrink:0;
  width:60px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.job-icon i{
  font-size:28px;
  color:var(--color-steel);
}
.job-content{
  flex:1;
}
.job-content h4{
  margin:0 0 8px 0;
  color:var(--color-navy);
  font-size:18px;
  font-weight:700;
}
.job-content p{
  margin:0;
  line-height:1.6;
  color:var(--color-text);
}

.schedule-wrap{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;}
.schedule-wrap-reverse{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
  grid-template-areas:"schedule-table schedule-image";
}
.schedule-wrap-reverse .schedule-table{grid-area:schedule-table;}
.schedule-wrap-reverse .schedule-image{grid-area:schedule-image;}
.schedule-image img{width:100%; height:320px; object-fit:cover; border-radius:12px;}
/* Schedule: center single-column + floating point images (左右のフローティング画像をスケジュールブロックを挟むように配置) */
.section.schedule{
  /* schedule の中央幅とポイント画像幅を調整できます（横幅は現状と変わらないように調整） */
  --schedule-w:560px; /* スケジュールの固定幅（必要に応じて調整） */
  --point-w:160px;    /* point*.png の表示幅 */
  position:relative;  /* フローティング画像の基準にする */
}

/* スケジュール本体をコンテナ中央に1カラムで配置 */
.schedule-center{
  display:flex;
  justify-content:center;
  padding:24px 0;
}
.schedule-center .schedule-table{
  width:var(--schedule-w);
  max-width:100%;
  background:var(--color-surface);
  padding:20px;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  text-align:left;
}

/* フローティングポイント画像（左右に挟む） */
.schedule-point{
  position:absolute;
  top:80%;
  transform:translateY(-50%);
  width:var(--point-w);
  pointer-events:none;
  z-index:500;
}
.schedule-point img{
  width: auto;
  height: 120%;
  display:block;
}

/* 左右の位置を schedule の幅に合わせて計算して配置（container 内で中央の schedule を挟む） */
.schedule-point--left{
  left:calc((100% - var(--schedule-w))/2 - var(--point-w) - 40px);
}
.schedule-point--right{
  left:calc((100% + var(--schedule-w))/2 - 90px);
}
.schedule-point--right-design{
  top:85%;
  left:calc((100% + var(--schedule-w))/2 - 200px);
}
.schedule-point--right-design img{
  width: auto;
  height: 70%;
  display:block;
}

/* 小さい画面ではフローティング画像を非表示にして、スケジュールをフル幅に */
@media (max-width:900px){
  .schedule-point{display:none;}
  .schedule-center .schedule-table{
    width:100%;
    padding:0;
    background:transparent;
    box-shadow:none;
  }
}

/* 既存の schedule-image 関連スタイルと競合しないように、不要になった .schedule-image を完全に無効化 */
.schedule-image{display:none;}
.timeline{list-style:none; margin:0; padding:0;}
.timeline li{
  padding:16px 0;
  /* border-bottom:1px dashed var(--color-line); */
  position:relative;
}
.timeline li:not(:last-child)::after{
  content:"\f063";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-24px;
  color:var(--color-steel);
  font-size:24px;
}
.timeline time{
  display:block;
  font-weight:700;
  color:var(--color-steel);
  font-size:16px;
  margin-bottom:6px;
}

.voices-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.voice-card img{width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:8px;}

.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.gallery-grid img{width:100%; height:120px; object-fit:cover; border-radius:8px;}

/* Job table (dl)
   幅の狭い要素群が左寄りに見えるため、コンテナ内で程よく中央寄せします。
   内部の dl は最大幅を持たせて中央に揃え、CTA ボタンも中央配置にします。 */
.job-table{
  max-width:1070px;
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gap);
  padding-right:var(--gap);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:left;
}
.job-table dl{
  display:grid;
  grid-template-columns:minmax(140px,180px) 1fr;
  gap:12px;
  align-items:start;
  max-width:720px;
  width:100%;
}
.job-table dt{font-weight:700; color:var(--color-navy); padding-right:8px;}
.job-table dd{margin:0; color:var(--color-text);}
.jobs-cta{
  margin-top:18px;
  display:flex;
  gap:12px;
  justify-content:center;
  width:100%;
  max-width:720px;
}

/* Floating point image for jobs section */
.jobs {
  position: relative;
}

.floating-point {
  position: absolute;
  bottom: 40px;
  right: 240px;
  z-index: 9999;
  pointer-events: none;
}

.floating-point img {
  width: 240px;
  height: auto;
  display: block;
}

/* マップを中央配置・レスポンシブ化 */
.map{display:flex; justify-content:center; margin-top:12px; padding-left:var(--gap); padding-right:var(--gap);}
.map iframe{max-width:100%; width:1070px; height:300px; border:0; border-radius:8px;}

/* エントリーフォームを container 内で適度に中央寄せ */
.entry-form{max-width:720px; margin-left:auto; margin-right:auto; padding-left:var(--gap); padding-right:var(--gap);}

/* FAQ */
/* FAQ リストも中央寄せして横の余白を整えます。完全中央揃えではなく自然な“中央への寄せ”を意図しています。 */
.faq-list{max-width:1070px; margin-left:auto; margin-right:auto; padding-left:var(--gap); padding-right:var(--gap);}
.faq-item{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding:14px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  cursor:pointer;
  border-bottom:1px solid var(--color-line);
}
.faq-item .fa-chevron-down{transition:transform .25s ease;}
.faq-item.open .fa-chevron-down{transform:rotate(180deg);}
.faq-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .32s ease, padding .2s ease;
  padding:0 12px;
}
.faq-panel.open{padding:12px 12px 20px;}

/* Form */
.entry-form{max-width:720px; display:grid; gap:12px;}
.entry-form label{display:block; font-weight:600;}
.entry-form input[type="text"], .entry-form input[type="email"], .entry-form input[type="tel"], .entry-form select, .entry-form input[type="file"]{
  width:100%; padding:10px 12px; border:1px solid var(--color-line); border-radius:8px; background:#fff;
}
.entry-form .checkbox{display:flex; align-items:center; gap:8px; font-weight:400;}
.form-actions{margin-top:8px; display:flex; justify-content:center;}
.field-error{color:#b00020; margin-top:6px; font-size:14px;}
.invalid{border-color:#b00020 !important;}
.entry-success{padding:20px; text-align:center;}

/* Footer */
.site-footer{background:#f8fafb; border-top:1px solid var(--color-line); padding:20px 0;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0;}
.footer-left p{margin:0; color:var(--color-muted);}
.footer-right .btn-outline{padding:8px 14px;}

/* Mobile CTA */
.mobile-cta{position:fixed; left:0; right:0; bottom:12px; display:flex; justify-content:center; z-index:120; pointer-events:none; opacity:0; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease;}
.mobile-cta.visible{opacity:1; transform:none; pointer-events:auto;}
.mobile-cta .btn{width:90%; max-width:420px;}

/* Responsive */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr; padding:40px 0;}
  .grid-3{grid-template-columns:1fr;}
  .voices-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .global-nav{display:none;}
  .header-cta{display:none;}
  .site-header{padding:8px 0;}
  .mobile-cta{display:block;}
}

/* スマートフォン向け (最大幅 450px): 画像とテキストを縦並びにし、画像の固定高さを解除して潰れを防止 */
@media (max-width:450px) {
  /* 2カラム系（about / work 等）を縦並びに */
  .two-col,
  .two-col-reverse {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
  }
  .two-col .col,
  .two-col-reverse .col {
    width:100%;
  }

  /* schedule のグリッドを1列に */
  .schedule-wrap,
  .schedule-wrap-reverse {
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    grid-template-areas:none;
  }
  .schedule-wrap-reverse .schedule-table,
  .schedule-wrap-reverse .schedule-image {
    grid-area:unset;
  }

  /* 画像の高さ固定を解除し、アスペクト比を維持 */
  .two-col .image-col img,
  .two-col-reverse .image-col img,
  .hero-image img,
  .schedule-image img,
  .card img,
  .voice-card img,
  .gallery-grid img {
    width:100%;
    height:auto !important;
    max-height:none;
    object-fit:cover;
    border-radius:12px;
  }

  /* ヒーローの余白調整 */
  .hero {
    padding:32px 0;
  }

  /* CTA / ヘッダーの余白微調整 */
  .header-inner {
    padding:12px 0;
  }

  /* マップ・iframe の横幅をコンテナに合わせる */
  .map iframe {
    width:100%;
    height:220px;
  }
}

/* Design page specific styles */
.design-hero {
  background: linear-gradient(rgba(65, 110, 136, 0.55), rgba(65, 110, 136, 0.55)),
              url('./img/img11.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}

/* Highlights section */
.bg-ice-blue-light {
  background: linear-gradient(rgba(65, 110, 136, 0.55), rgba(65, 110, 136, 0.55)),
              url('./img/img14.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply; 
}

.bg-ice-blue-light h2 {
  color:var(--color-surface);
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.highlight-card {
  text-align: center;
  padding: 24px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.highlight-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  background: var(--color-ice);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.highlight-icon i {
  font-size: 24px;
  color: var(--color-steel);
}

.highlight-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--color-navy);
}

.highlight-card p {
  margin: 0;
  color: var(--color-text);
  line-height: 1.6;
}

/* Persona section */
.persona-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin-top: 20px;
}

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

.persona-list li {
  padding: 12px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.persona-list i {
  color: var(--color-steel);
  margin-top: 4px;
  flex-shrink: 0;
}

.persona-main {
  flex: 1;
}

.persona-main h3 {
  margin: 0 0 16px;
  color: var(--color-navy);
  font-size: 20px;
  font-weight: 700;
}

.persona-welcome {
  background: var(--color-surface);
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  height: fit-content;
}

.persona-welcome h3 {
  margin: 0 0 16px;
  color: var(--color-navy);
  font-size: 18px;
}

.persona-welcome ul {
  margin: 0;
  padding-left: 20px;
}

.persona-welcome li {
  margin-bottom: 8px;
  color: var(--color-text);
}

/* Form enhancements */
.apply-form-container {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.entry-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
}

.entry-form .required {
  color: #b00020;
  font-weight: bold;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 14px;
}

/* Related jobs section */
.related-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.related-jobs a {
  margin-top: 12px;
}

.company-intro-link{
  margin-top: 40px;
}

.company-intro-link img{
  position: relative;
  width: 100%;
  object-fit: cover;         /* トリミングして表示 */
}


/* Responsive adjustments for design page */
@media (max-width: 900px) {
  .persona-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .highlights-grid {
    grid-template-columns: 1fr;
  }
  
  .related-jobs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 450px) {
  .highlight-card {
    padding: 20px 16px;
  }
  
  .persona-welcome {
    padding: 20px;
  }
}


/* 企業データ インフォグラフィック */
.bg-ice-blue-light {
  background-color: #f0f7fa;
}

.company-data {
  background: linear-gradient(135deg, #f0f7fa 0%, #e8f4f8 100%);
}

.company-data h2 {
  color: var(--color-steel);
}

.infographic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.data-card {
  text-align: center;
  padding: 32px 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border: 1px solid rgba(159, 201, 208, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.data-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.data-number {
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 700;
  color: var(--color-steel);
  line-height: 1;
  margin-bottom: 8px;
}

.data-unit {
  font-size: 0.6em;
  color: var(--color-ice);
  margin-left: 4px;
}

.data-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.data-desc {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.5;
}

/* 製品紹介セクション */
.products {
  background: #fff;
}

.section-intro {
  text-align: center;
  color: var(--color-muted);
  margin-bottom: 32px;
  font-size: 16px;
}

.product-uses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.use-card {
  padding: 28px 24px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.use-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.use-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-ice), var(--color-steel));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.use-icon i {
  font-size: 32px;
  color: #fff;
}

.use-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 16px;
}

.use-card p {
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}

/* related-jobs のスタイル調整 (既存のスタイルを利用) */
.related-jobs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.job-photo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
}

.job-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 14px;
  margin-top: 12px;
  display: inline-block;
}

/* apply-form-container */
.apply-form-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.apply-form-container iframe {
  max-width: 100%;
  border-radius: 8px;
}

/* Apply form styles */
.apply-form {
  max-width: 600px;
  width: 100%;
  background: var(--color-surface);
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 8px;
  font-size: 15px;
}

.form-group .required {
  color: #b00020;
  font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--color-line);
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-steel);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.form-submit {
  margin-top: 24px;
  text-align: center;
}

.form-submit .btn {
  padding: 14px 32px;
  font-size: 16px;
  min-width: 140px;
}

/* Name fields horizontal layout */
.form-group-name {
  display: flex;
  gap: 16px;
}

.name-field {
  flex: 1;
}

.name-field label {
  display: block;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 8px;
  font-size: 15px;
}

.name-field input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--color-line);
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.name-field input:focus {
  outline: none;
  border-color: var(--color-steel);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* Responsive: stack name fields on small screens */
@media (max-width: 450px) {
  .form-group-name {
    flex-direction: column;
    gap: 12px;
  }
}

/* company-intro-link */
.company-intro-link {
  margin-top: 32px;
}

.intro-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
}

.intro-photo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
}

.intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-logo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fdfeff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.intro-content h4 {
  margin: 0 0 12px 0;
  color: var(--color-navy);
  font-size: 18px;
  font-weight: 700;
}

.intro-content p {
  margin: 0 0 16px 0;
  color: var(--color-text);
  line-height: 1.6;
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
  .infographic-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .product-uses-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .data-card {
    padding: 24px 16px;
  }
  
  .use-card {
    padding: 24px 20px;
  }
  
  .intro-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .intro-photo {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 450px) {
  .infographic-grid {
    grid-template-columns: 1fr;
  }
  
  .data-number {
    font-size: 32px;
  }
  
  .use-icon {
    width: 60px;
    height: 60px;
  }
  
  .use-icon i {
    font-size: 24px;
  }
  
  .job-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .job-photo {
    width: 100%;
    height: 200px;
    max-width: 300px;
    margin: 0 auto;
  }
}