.ai-hero{
    text-align:center;
    padding:35px 20px;
    border-radius:24px;
    background:linear-gradient(135deg,#0b3b67,#1976d2,#16a085);
    border:3px solid #b3e5fc;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
}

.ai-hero h1{
    color:#ffffff;
    font-size:38px;
    margin-bottom:12px;
    text-shadow:2px 2px 6px rgba(0,0,0,.7);
}

.ai-hero p{
    color:#ffffff;
    font-size:20px;
    font-weight:bold;
    line-height:1.8;
    text-shadow:1px 1px 5px rgba(0,0,0,.7);
}

.ai-section{
    background:#ffffff;
    margin:25px 0;
    padding:20px;
    border-radius:18px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
    border-left:8px solid #2196f3;
}

.ai-section h2{
    color:#0d47a1;
    margin-top:0;
}

.ai-box{
    background:#eef8ff;
    border-left:5px solid #2196f3;
    padding:15px;
    border-radius:12px;
}

.ai-cardgrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
}

.ai-card{
    background:#f8fcff;
    border:1px solid #cfe8ff;
    border-radius:16px;
    padding:16px;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.ai-card h3{
    color:#1565c0;
    margin-top:0;
}

.quote{
    background:#e3f2fd;
    border-left:6px solid #1976d2;
    padding:16px;
    margin-bottom:18px;
    border-radius:10px;
    font-style:italic;
    color:#0d47a1;
}

.ai-footer{
    text-align:center;
    margin-top:30px;
    padding:25px;
    background:linear-gradient(135deg,#0d47a1,#00897b);
    color:white;
    border-radius:20px;
}

.ai-footer h3{
    margin-top:0;
    color:white;
}





.enfa-chatgpt-page{
  font-family:"Meiryo","Yu Gothic",sans-serif;
  color:#1f2a33;
  background:linear-gradient(135deg,#f0f7ff,#fffaf0,#f7fff4);
  padding:18px;
  line-height:1.8;
}
.enfa-nav{
  position:sticky;
  top:0;
  z-index:10;
  background:linear-gradient(90deg,#123b63,#276c93,#2f8f6b);
  color:#fff;
  padding:10px;
  border-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  margin-bottom:20px;
}
.enfa-nav b{
  font-size:18px;
  margin-right:12px;
}
.enfa-nav a{
  color:#fff !important;
  text-decoration:none;
  font-weight:bold;
  display:inline-block;
  margin:4px 6px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
}
.hero{
  text-align:center;
  padding:28px 15px;
  border-radius:22px;
  background:linear-gradient(135deg,#ffffff,#e9f6ff);
  border:2px solid #c8e6ff;
}
.hero h1{
  color:#17527c;
  font-size:30px;
  margin:0 0 10px;
}
.catch{
  font-size:18px;
  color:#3c5f72;
}
.section{
  background:#fff;
  border-radius:18px;
  padding:18px;
  margin:18px 0;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  border-left:8px solid #59a8d8;
}
.section h2{
  color:#17628e;
  margin-top:0;
}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.card{
  background:#f7fbff;
  border:1px solid #cfe9ff;
  border-radius:16px;
  padding:14px;
}
.card h3{
  color:#1b6b8f;
  margin-top:0;
}
.prompt{
  background:#102a43;
  color:#fff;
  padding:12px;
  border-radius:12px;
  font-family:monospace;
  white-space:pre-wrap;
}
.note{
  background:#fff7d6;
  border:1px solid #f0d878;
  padding:12px;
  border-radius:14px;
}
.footer{
  text-align:center;
  color:#4b6675;
  padding:20px;
}



.hero{
  text-align:center;
  padding:34px 18px;
  border-radius:24px;
  background:linear-gradient(135deg,#082f49,#0f766e,#1d4ed8);
  border:3px solid #bae6fd;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.hero h1{
  color:#ffffff !important;
  font-size:34px;
  margin:0 0 12px;
  text-shadow:2px 2px 5px rgba(0,0,0,.65);
}

.hero p{
  color:#f0fdfa !important;
  font-size:18px;
  font-weight:bold;
  line-height:1.9;
  text-shadow:1px 1px 4px rgba(0,0,0,.65);
}

.navband{
  background:linear-gradient(90deg,#111827,#1e3a8a,#047857);
  padding:12px;
  border-radius:14px;
  text-align:center;
  margin:16px 0 22px;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
}

.navband a{
  color:#ffffff !important;
  background:rgba(255,255,255,.18);
  text-decoration:none;
  font-weight:bold;
  display:inline-block;
  margin:5px;
  padding:7px 13px;
  border-radius:999px;
  text-shadow:1px 1px 3px rgba(0,0,0,.7);
}

.navband a:hover{
  background:#ffffff;
  color:#0f3b63 !important;
  text-shadow:none;
}