/* SIJAM BTB static website - external stylesheet */

:root {
  --ink:#071d2c;
  --accent:#168ee5;
  --muted:#607581;
  --line:#dce8ee;
}
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  color:var(--ink);
  background:#ffffff;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,Arial,sans-serif;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
}
a { text-decoration:none; }
a:hover { opacity:.84; }
a:focus-visible { outline:3px solid #00a4f0;outline-offset:3px; }
p { margin:0 0 1em; }
h1,h2,h3 { margin:0 0 16px;font-weight:800;line-height:1.4; }
img { display:block;max-width:100%;height:auto; }
figure { margin:0; }
.site-section { width:100%; }
/* Gutenberg の「コンテンツ幅 1160px」に相当 */
.site-section > * { width:100%;max-width:1160px;margin-left:auto;margin-right:auto; }
.columns { display:flex;align-items:stretch;gap:24px; }
.column { flex:1 1 0;min-width:0; }
.align-middle { align-items:center; }
.self-middle { align-self:center; }
.buttons { display:flex;flex-wrap:wrap;align-items:center;gap:12px; }
.button-wrapper { display:inline-flex; }
.button-link { display:inline-block;font-weight:700;line-height:1.45;transition:opacity .2s ease,transform .2s ease; }
.button-link:hover { transform:translateY(-2px); }
.text-center { text-align:center; }
.text-right { text-align:right; }
.image img { width:100%;object-fit:cover; }
/* 特定の領域の列間はWordPress作成時の指定を再現 */
#top > .columns { gap:54px; }
#about > .columns { gap:65px; }
#contact > .group > .columns { gap:55px; }
/* 生成AIの説明ブロック（#strengthの次にある濃紺セクション） */
#strength + .site-section > .columns { gap:60px; }
#automation > .columns { gap:20px; }
.site-header > .columns { gap:20px; }
.site-header p.text-right a,.site-footer p.text-right a { display:inline-block; }
#services .columns > .column > .group,
#strength .columns > .column > .group { height:100%; }
#automation .columns > .column { min-width:0; }
#contact ul { padding-left:1.4em; }
#contact li { margin:5px 0; }
.contact-action { margin:20px 0 8px; }
.contact-mail-button {
  display:inline-block;
  border-radius:8px;
  padding:12px 18px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  font-weight:750;
}
.contact-address { font-size:12px;line-height:1.6;color:#607581;margin-bottom:0; }
.contact-address a { color:#0877c8;overflow-wrap:anywhere; }

/* HTML由来の見た目の設定（元WordPressの装飾指定） */
.inline-001 { background-color:#071d2c;padding-top:18px;padding-right:24px;padding-bottom:18px;padding-left:24px; }
.inline-002 { flex-basis:48%; }
.inline-003 { color:#ffffff;margin-top:0;margin-bottom:0;font-size:17px;font-weight:800;letter-spacing:0.04em; }
.inline-004 { color:#9bb0bd;margin-top:2px;margin-bottom:0;font-size:10px; }
.inline-005 { flex-basis:52%; }
.inline-006 { margin-top:0;margin-bottom:0;font-size:13px;font-weight:700; }
.inline-007 { color:#dbe8ef; }
.inline-008 { color:#42d7e9; }
.inline-009 { background-color:#eff9ff;padding-top:72px;padding-right:24px;padding-bottom:92px;padding-left:24px; }
.inline-010 { flex-basis:50%; }
.inline-011 { color:#0877c8;margin-bottom:14px;font-size:12px;font-weight:800;letter-spacing:0.08em; }
.inline-012 { color:#071d2c;margin-top:0;margin-bottom:22px;font-size:58px;font-weight:800;letter-spacing:-0.04em;line-height:1.16; }
.inline-013 { color:#168ee5; }
.inline-014 { color:#47616f;margin-bottom:28px;font-size:17px;line-height:1.9; }
.inline-015 { border-radius:8px;color:#ffffff;background-color:#168ee5;padding-top:12px;padding-right:24px;padding-bottom:12px;padding-left:24px; }
.inline-016 { border-color:#c9d9e2;border-width:1px;border-radius:8px;color:#071d2c;background-color:#ffffff;padding-top:12px;padding-right:24px;padding-bottom:12px;padding-left:24px;border-style:solid; }
.inline-017 { color:#54707e;margin-top:28px;margin-bottom:0;font-size:12px;font-weight:700; }
.inline-018 { border-radius:26px; }
.inline-019 { margin-top:12px; }
.inline-020 { border-color:#dbe8ee;border-width:1px;border-radius:10px;background-color:#ffffff;padding-top:12px;padding-right:14px;padding-bottom:12px;padding-left:14px;border-style:solid; }
.inline-021 { color:#071d2c;margin-top:0;margin-bottom:0;font-size:13px;font-weight:800; }
.inline-022 { color:#657985;margin-top:2px;margin-bottom:0;font-size:10px; }
.inline-023 { background-color:#ffffff;padding-top:34px;padding-right:24px;padding-bottom:34px;padding-left:24px; }
.inline-024 { border-color:#dce8ee;border-width:1px;border-radius:14px;border-style:solid; }
.inline-025 { padding-top:21px;padding-right:19px;padding-bottom:21px;padding-left:19px; }
.inline-026 { color:#168ee5;margin-bottom:2px;font-size:10px;font-weight:800; }
.inline-027 { margin-top:0;margin-bottom:4px;font-size:18px; }
.inline-028 { color:#657985;margin-top:0;margin-bottom:0;font-size:11px; }
.inline-029 { background-color:#ffffff;padding-top:88px;padding-right:24px;padding-bottom:88px;padding-left:24px; }
.inline-030 { color:#168ee5;margin-bottom:5px;font-size:11px;font-weight:800;letter-spacing:0.15em; }
.inline-031 { margin-top:0;margin-bottom:13px;font-size:40px;line-height:1.35; }
.inline-032 { color:#607581;margin-bottom:42px; }
.inline-033 { border-color:#dce8ee;border-width:1px;border-radius:16px;padding-top:29px;padding-right:28px;padding-bottom:29px;padding-left:28px;border-style:solid; }
.inline-034 { color:#168ee5;margin-bottom:5px;font-size:11px;font-weight:800;letter-spacing:0.12em; }
.inline-035 { margin-top:0;margin-bottom:13px;font-size:25px; }
.inline-036 { color:#607581;font-size:14px; }
.inline-037 { background-color:#f3f8fb;padding-top:88px;padding-right:24px;padding-bottom:88px;padding-left:24px; }
.inline-038 { color:#607581;margin-bottom:40px; }
.inline-039 { border-color:#dce8ee;border-width:1px;border-radius:15px;background-color:#ffffff;padding-top:26px;padding-right:25px;padding-bottom:26px;padding-left:25px;border-style:solid; }
.inline-040 { color:#168ee5;font-size:10px;font-weight:800;letter-spacing:0.12em; }
.inline-041 { font-size:21px; }
.inline-042 { color:#607581;font-size:13px; }
.inline-043 { flex-basis:7%; }
.inline-044 { color:#168ee5;font-size:30px; }
.inline-045 { border-color:#9ed8f2;border-width:1px;border-radius:15px;background-color:#eaf8ff;padding-top:26px;padding-right:25px;padding-bottom:26px;padding-left:25px;border-style:solid; }
.inline-046 { margin-top:0;margin-bottom:40px;font-size:40px; }
.inline-047 { border-color:#dce8ee;border-width:1px;border-radius:14px;padding-top:24px;padding-right:22px;padding-bottom:24px;padding-left:22px;border-style:solid; }
.inline-048 { color:#168ee5;margin-bottom:10px;font-size:26px;font-weight:800; }
.inline-049 { font-size:17px; }
.inline-050 { color:#607581;font-size:12px; }
.inline-051 { color:#ffffff;background-color:#071d2c;padding-top:88px;padding-right:24px;padding-bottom:88px;padding-left:24px; }
.inline-052 { color:#42d7e9;margin-bottom:7px;font-size:11px;font-weight:800;letter-spacing:0.15em; }
.inline-053 { color:#ffffff;margin-top:0;margin-bottom:17px;font-size:43px;line-height:1.35; }
.inline-054 { color:#a9bac4; }
.inline-055 { border-color:#23475b;border-width:1px;border-radius:12px;background-color:#0d2a3d;margin-bottom:11px;padding-top:17px;padding-right:19px;padding-bottom:17px;padding-left:19px;border-style:solid; }
.inline-056 { color:#ffffff;margin-top:0;margin-bottom:2px;font-weight:700; }
.inline-057 { color:#9fb3bf;margin-top:0;margin-bottom:0;font-size:12px; }
.inline-058 { border-color:#23475b;border-width:1px;border-radius:12px;background-color:#0d2a3d;padding-top:17px;padding-right:19px;padding-bottom:17px;padding-left:19px;border-style:solid; }
.inline-059 { flex-basis:34%; }
.inline-060 { color:#168ee5;font-size:11px;font-weight:800;letter-spacing:0.15em; }
.inline-061 { font-size:46px;line-height:1.2; }
.inline-062 { color:#607581; }
.inline-063 { flex-basis:66%; }
.inline-064 { border-color:#dce8ee;border-width:1px;border-radius:15px;background-color:#ffffff;padding-top:8px;padding-right:22px;padding-bottom:8px;padding-left:22px;border-style:solid; }
.inline-065 { border-bottom-color:#e2ebef;border-bottom-width:1px;margin-top:0;margin-bottom:0;padding-top:13px;padding-bottom:13px;font-size:13px;border-bottom-style:solid; }
.inline-066 { margin-top:0;margin-bottom:0;padding-top:13px;padding-bottom:13px;font-size:13px; }
.inline-067 { border-radius:22px;color:#ffffff;background-color:#071d2c;padding-top:48px;padding-right:48px;padding-bottom:48px;padding-left:48px; }
.inline-068 { color:#42d7e9;font-size:11px;font-weight:800;letter-spacing:0.15em; }
.inline-069 { color:#ffffff;font-size:36px;line-height:1.35; }
.inline-070 { color:#a7bac5;font-size:14px; }
.inline-071 { border-radius:14px;color:#071d2c;background-color:#ffffff;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px; }
.inline-072 { margin-top:0;margin-bottom:10px;font-size:21px; }
.inline-073 { color:#425b68;font-size:12px; }
.inline-074 { background-color:#ffffff;padding-top:72px;padding-right:24px;padding-bottom:72px;padding-left:24px; }
.inline-075 { margin-top:0;margin-bottom:36px;font-size:36px; }
.inline-076 { border-color:#dce8ee;border-width:1px;border-radius:16px;background-color:#f8fbfd;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px;border-style:solid; }
.inline-077 { border-bottom-color:#e2ebef;border-bottom-width:1px;padding-top:18px;padding-bottom:18px;border-bottom-style:solid; }
.inline-078 { flex-basis:22%; }
.inline-079 { flex-basis:78%; }
.inline-080 { color:#425b68;margin-top:0;margin-bottom:0;font-size:13px; }
.inline-081 { padding-top:18px;padding-bottom:18px; }
.inline-082 { color:#9aadb7;background-color:#04141f;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px; }
.inline-083 { margin-top:0;margin-bottom:0;font-size:11px; }
.inline-084 { color:#9aadb7; }

/* Responsive layout */
@media(max-width:1050px) {
  #top h1 { font-size:48px !important; }
  #services h2,#automation h2,#strength h2 { font-size:34px !important; }
  .site-header > .columns { gap:12px; }
  .site-header p.text-right { font-size:11px !important; }
}
@media(max-width:767px) {
  .site-section { padding-top:54px !important;padding-bottom:54px !important;padding-left:18px !important;padding-right:18px !important; }
  .site-header,.site-footer { padding-top:18px !important;padding-bottom:18px !important; }
  .columns { flex-direction:column;gap:20px !important; }
  .column { flex-basis:auto !important;width:100%; }
  .site-header > .columns { align-items:stretch; }
  .site-header p.text-right { text-align:left;font-size:12px !important;line-height:2.2; }
  .site-header p.text-right a { margin-right:8px; }
  .site-header p.text-right { overflow-wrap:normal; }
  #top { padding-top:54px !important;padding-bottom:60px !important; }
  #top h1 { font-size:38px !important;line-height:1.27 !important; }
  #top .column > p { line-height:1.75; }
  #services h2,#automation h2,#strength h2 { font-size:28px !important; }
  #about h2 { font-size:38px !important; }
  #contact h2 { font-size:30px !important; }
  #strength + .site-section h2 { font-size:30px !important; }
  #company h2 { font-size:31px !important; }
  #contact > .group { padding:27px 20px !important; }
  #contact > .group > .columns > .column > .group { padding:23px 19px !important; }
  #automation .columns > .column:has(> p:first-child) { text-align:center; }
  #automation .columns > .column:has(> p:first-child) p { font-size:23px !important;margin:0; }
  #automation .columns > .column:has(> p:first-child) p { transform:rotate(90deg); }
  /* 元の小さなバッジは横２列を維持 */
  #top .columns.keep-columns { flex-direction:row;gap:10px !important; }
  #top .columns.keep-columns > .column { flex-basis:50% !important;width:50%; }
  #top .columns.keep-columns .group { padding:12px 9px !important; }
  #company .columns { flex-direction:row;gap:14px !important; }
  #company .columns > .column:first-child { flex-basis:30% !important;width:30%; }
  #company .columns > .column:last-child { flex-basis:70% !important;width:70%; }
  #company > .group { padding-left:16px !important;padding-right:16px !important; }
  .site-footer p.text-right { text-align:left;line-height:2; }
}
@media(max-width:390px) {
  #top h1 { font-size:32px !important; }
  .buttons { gap:9px; }
  .button-link { padding-left:15px !important;padding-right:15px !important; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .button-link { transition:none; }
}

/* SERVICES: 製品公式サイトへのリンク */
#services .inline-033 {
  display: flex;
  flex-direction: column;
}
#services .inline-036 {
  margin-bottom: 20px;
}
#services .official-site-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 9px 14px;
  border: 1px solid #bad9ed;
  border-radius: 8px;
  background-color: #f2f9fe;
  color: #0877c8;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color .2s ease;
}
#services .official-site-link:hover {
  background-color: #e4f3fd;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  #services .official-site-link { transition: none; }
}


/* CONTACT: 投稿型お問い合わせフォーム */
.sijam-contact-form { display:grid; gap:15px; margin-top:17px; }
.sijam-contact-form .form-field { display:flex; flex-direction:column; gap:5px; }
.sijam-contact-form .form-field > label { font-size:13px; font-weight:700; color:#183b50; }
.sijam-contact-form input[type="text"],
.sijam-contact-form input[type="email"],
.sijam-contact-form textarea {
  display:block;width:100%; padding:11px 12px; border:1px solid #bacbd7;
  border-radius:8px;background-color:#fff;color:#071d2c;
  font:inherit;font-size:14px;line-height:1.5;
}
.sijam-contact-form textarea {resize:vertical; min-height:130px;}
.sijam-contact-form input:focus-visible,
.sijam-contact-form textarea:focus-visible,
.sijam-contact-form button:focus-visible {outline:3px solid #89d8ef;outline-offset:2px;}
.sijam-contact-form .required-tag,
.sijam-contact-form .optional-tag {font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;white-space:nowrap;}
.sijam-contact-form .required-tag {background:#ffe8e6;color:#a43d38;}
.sijam-contact-form .optional-tag {background:#ecf1f5;color:#546d7a;}
.sijam-contact-form .contact-consent {display:flex;align-items:flex-start;gap:10px;color:#324e5f;font-size:12px;line-height:1.65;cursor:pointer;}
.sijam-contact-form .contact-consent > input {margin-top:4px;flex:0 0 auto;width:17px;height:17px;accent-color:#168ee5;}
.sijam-contact-form .contact-consent a {color:#0877c8;text-decoration:underline;text-underline-offset:2px;}
.contact-submit-button {display:block;width:100%;padding:12px 16px;border:0;border-radius:8px;background:#168ee5;color:white;font:inherit;font-size:15px;font-weight:800;cursor:pointer;}
.contact-submit-button:hover:not(:disabled) {background:#0877c8;}
.contact-submit-button:disabled {background:#8fa9bb;cursor:wait;}
.contact-notice {color:#647c88;font-size:11px;line-height:1.65;margin:0;}
.contact-form-status {font-size:13px;line-height:1.65;margin:0;}
.contact-form-status.is-error {color:#ad2f2f;}
.contact-form-status.is-success {color:#176c3b;}
.contact-hidden-field {position:absolute;left:-99999px;width:1px;height:1px;overflow:hidden;}
@media(max-width:767px){ .sijam-contact-form {gap:13px;} }
