
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;background:#f5f7fa;color:#111}
header{height:58px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #e5e7eb;position:relative;z-index:1001}
.brand{font-weight:800;font-size:19px}
#map{
  height:52vh;
  min-height:320px;
  max-height:520px;
}
button,input,textarea,select{font:inherit}
.ghost{border:1px solid #ddd;background:#fff;border-radius:10px;padding:8px 12px}
.fab{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1200;border:0;border-radius:999px;padding:15px 22px;font-weight:800;background:#111;color:#fff;box-shadow:0 8px 26px rgba(0,0,0,.25)}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:1500;width:min(560px,100%);max-height:82vh;overflow:auto;background:#fff;border-radius:20px 20px 0 0;padding:18px;box-shadow:0 -8px 30px rgba(0,0,0,.2)}
.hidden{display:none}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:18px}
.x{border:0;background:#eee;border-radius:50%;width:34px;height:34px;font-size:20px}
label{display:block;font-weight:700;margin:13px 0 6px}
input,textarea,select{width:100%;border:1px solid #d6dae0;border-radius:10px;padding:12px;background:#fff}
textarea{resize:vertical}
.primary{width:100%;border:0;border-radius:12px;background:#111;color:#fff;padding:14px;font-weight:800;margin-top:16px}
.hint{font-size:12px;color:#667085;margin-top:5px}
.coord{margin-top:8px;padding:9px;background:#f1f3f5;border-radius:8px;font-size:13px}
.popup a{display:inline-block;margin-top:5px;font-weight:700}
.detail-page{min-height:100%;padding:20px}
.detail-card{max-width:680px;margin:auto;background:#fff;border-radius:18px;padding:22px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.back{text-decoration:none;color:#555}
h1{font-size:24px;margin:18px 0 8px}
.status{display:inline-block;background:#eef2ff;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;margin-bottom:16px}
.kv{display:flex;justify-content:space-between;border-bottom:1px solid #eee;padding:11px 0;gap:18px}
.kv span{color:#667085}
.kv strong{text-align:right}
.instruction{white-space:pre-wrap;background:#f7f8fa;border-radius:12px;padding:14px;line-height:1.65}
.map-link{margin:14px 0}
.accepted{margin-top:18px;background:#ecfdf3;padding:14px;border-radius:12px;font-weight:700}

@media(max-width:600px){
  .fab{
    left:auto;
    right:16px;
    bottom:18px;
    transform:none;
    padding:12px 16px;
    font-size:14px;
  }

  #nearJobsSection{
    padding-bottom:90px !important;
  }
}

.brand-wrap{
  display:flex;
  align-items:baseline;
  gap:10px;
}

.brand{
  font-weight:900;
  font-size:21px;
}

.brand-sub{
  font-size:12px;
  color:#667085;
  font-weight:600;
}

.ikanakute-intro{
  background:#fff;
  padding:14px 18px;
  border-bottom:1px solid #e5e7eb;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.ikanakute-intro strong{
  font-size:16px;
}

.ikanakute-intro span{
  font-size:13px;
  color:#667085;
}

@media(max-width:600px){
  .brand-wrap{
    display:block;
  }

  .brand{
    font-size:20px;
    line-height:1.1;
  }

  .brand-sub{
    font-size:10px;
    margin-top:2px;
  }

  .ikanakute-intro{
    padding:12px 14px;
  }
}

.usecase-section{
  max-width:960px;
  margin:10px auto 110px;
  padding:0 14px;
}

.usecase-head{
  margin-bottom:16px;
}

.usecase-head h2{
  margin:0 0 6px;
  font-size:22px;
}

.usecase-head p{
  margin:0;
  color:#667085;
  line-height:1.7;
  font-size:14px;
}

.usecase-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.usecase-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:16px;
  min-height:150px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
}

.usecase-icon{
  font-size:28px;
  margin-bottom:10px;
}

.usecase-card strong{
  display:block;
  font-size:15px;
  margin-bottom:7px;
}

.usecase-card span{
  display:block;
  color:#667085;
  font-size:13px;
  line-height:1.6;
}

@media(max-width:800px){
  .usecase-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:480px){
  .usecase-grid{
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .usecase-card{
    padding:13px;
    min-height:145px;
  }

  .usecase-icon{
    font-size:25px;
  }

  .usecase-card strong{
    font-size:14px;
  }

  .usecase-card span{
    font-size:12px;
  }
}

.role-entry{
  max-width:960px;
  margin:14px auto;
  padding:0 14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.role-card{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:16px;
  padding:16px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
}

.role-card strong{
  display:block;
  font-size:16px;
  margin:4px 0;
}

.role-card small{
  display:block;
  color:#667085;
  line-height:1.5;
}

.role-icon{
  font-size:26px;
}

@media(max-width:600px){
  .role-entry{
    grid-template-columns:1fr;
  }
}

.fab{
  left:auto;
  right:24px;
  bottom:24px;
  transform:none;
}

@media(max-width:600px){
  .fab{
    right:16px;
    bottom:18px;
  }
}

@media(max-width:600px){
  .fab{
    display:none;
  }
}

.howto-section{
  max-width:960px;
  margin:28px auto 34px;
  padding:0 14px;
}

.howto-head h2{
  margin:0 0 14px;
  font-size:22px;
}

.howto-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.howto-box{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:18px;
}

.howto-box h3{
  margin:0 0 14px;
  font-size:17px;
}

.howto-step{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:12px 0;
}

.howto-step b{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-size:13px;
}

.howto-step span{
  line-height:1.6;
  color:#475467;
  font-size:14px;
}

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

/* SEO H1: 既存ブランド表示の見た目を維持 */
h1.brand{
  margin:0;
}
