/*
Theme Name: DemBox.Inc (Simple)
Theme URI:  https://example.com/
Author:     DemBox.Inc
Author URI: https://example.com/
Description: A clean, minimal WordPress theme with 4 pages (Top, Service, About, Contact).
Version:    1.0
License:    GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dembox
*/
:root{
  --brand: #00167a;
  --bg: #ffffff;
  --muted: #6b7280;
}
/* Reset & Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--brand);line-height:1.6}
a{color:var(--brand);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:fixed;left:0;right:0;top:0;background:rgba(255,255,255,0.96);backdrop-filter:blur(6px);border-bottom:1px solid rgba(0,22,122,0.12);z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.site-brand{font-weight:700;font-size:18px;letter-spacing:0.2px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;align-items:center}
.site-nav a{font-weight:600;padding:6px 0;border-bottom:2px solid transparent;transition:all .18s ease}
.site-nav a:hover{border-bottom-color:var(--brand)}

/* Hero */
.hero{min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	background:linear-gradient(135deg,#ffffff 35%,#eef5ff);
	padding:120px 20px;
	padding-top: 40px;}
.hero h1{font-size:44px;
	margin:0 0 14px}
.hero p{max-width:720px;
	margin:0 auto;
	color:var(--muted);
	font-size:18px}

/* Sections */
.section{padding:80px 20px}
.section h2{font-size:28px;margin:0 0 18px;border-left:6px solid var(--brand);padding-left:12px}

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PC：2列 */
  gap: 20px;
  margin-top: 20px;
}

/* スマホ（〜768px）の場合は1列にする */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr; /* ← ここがポイント */
  }
}

.card{
  background:#fff;
  border:1px solid rgba(0,22,122,0.08);
  border-radius:10px;
  padding:22px;
  box-shadow:0 6px 18px rgba(13,38,77,0.04);
  transition:transform .22s ease,box-shadow .22s ease;}
.card h3{  margin:0 0 8px;  font-size:18px;}
.card p{  margin:0;  color:var(--muted);}.card:hover{  transform:translateY(-6px);  box-shadow:0 12px 30px rgba(13,38,77,0.06);}
/* Coming soon の説明文デザイン */
.coming-soon {
  color: var(--muted); /* 今あるグレーと同じ色 */
  margin-bottom: 4px;
}

.coming-desc {
  color: var(--muted);   /* 同じ薄グレー */
  font-size: 14px;       /* h4 より少し小さめ */
  margin-bottom: 20px;   /* 下に少し余白 */
  line-height: 1.6;
}

/* About */
.about-section {
  max-width: 720px;       /* Service と同じ横幅感 */
  margin-top: 20px;
}

.about-title {
  font-size: 22px;
  font-weight: bold;
  margin: 32px 0 12px;
}
/* Company Overview の h3 だけ margin-bottom を縮める */
.about-title.company-overview-title {
  margin-bottom: 6px; /* ← Purpose・Valueと同じ見た目に調整 */
}


.about-text {
  line-height: 1.8;
  color: var(--muted);
}

.about-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.7;
}

.company-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 15px;
}

.company-table th {
  width: 150px;
  padding: 10px 20px 10px 0; /* ← 右側に20pxの余白を追加（ここがポイント） */
  text-align: left;
  color: #000;
}

.company-table td {
  padding: 10px 0;
  color: var(--muted);
}

.company-table tr + tr {
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Contact */
.contact-form{max-width:640px}
.form-row{display:flex;flex-direction:column;margin-bottom:12px}
label{font-size:13px;margin-bottom:6px;color:var(--brand)}
input[type="text"],input[type="email"],textarea{padding:12px;border:1px solid rgba(0,22,122,0.12);border-radius:8px;font-size:15px}
textarea{min-height:140px;resize:vertical}

/* Footer */
.site-footer{padding:36px 20px;text-align:center;border-top:1px solid rgba(0,22,122,0.08);color:var(--muted)}

/* Responsive */
@media (max-width:700px){
  .hero{padding:140px 20px;height:auto}
  .site-nav ul{gap:12px}
  .hero h1{font-size:32px}
}