body {

margin: 0;
padding: 0;

font-family:
"Hiragino Sans",
"Yu Gothic",
sans-serif;

background-color: #f5f7fb;

color: #222;

}

/* ヘッダー */

.header {

background: linear-gradient(
135deg,
#0b3d91,
#1456c5
);

color: white;

padding: 20px;

box-shadow:
0 2px 10px rgba(0,0,0,0.15);

}

.logo-area {

display: flex;

align-items: center;

gap: 20px;

max-width: 1000px;

margin: 0 auto;

}

.logo {

width: 80px;

height: 80px;

object-fit: contain;

background: white;

border-radius: 12px;

padding: 6px;

}

.title-area h1 {

margin: 0;

font-size: 2rem;

}

.title-area p {

margin-top: 6px;

font-size: 1rem;

opacity: 0.95;

}

/* ナビゲーション */

.menu {

display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 10px;

background: white;

padding: 12px;

box-shadow:
0 2px 6px rgba(0,0,0,0.08);

}

.menu a {

text-decoration: none;

color: #0b3d91;

font-weight: bold;

padding: 10px 18px;

border-radius: 8px;

transition: 0.2s;

}

.menu a:hover {

background-color: #e7eefc;

}

/* メイン */

.container {

max-width: 900px;

margin: 20px auto;

padding: 15px;

}

/* おすすめ質問 */

.quick-area {

background: white;

padding: 18px;

border-radius: 12px;

margin-bottom: 20px;

box-shadow:
0 2px 8px rgba(0,0,0,0.08);

}

.quick-area h2 {

margin-top: 0;

font-size: 1.1rem;

}

.quick-buttons {

display: flex;

flex-wrap: wrap;

gap: 10px;

}

.quick-buttons button {

background-color: #edf3ff;

border: none;

padding: 12px 16px;

border-radius: 8px;

cursor: pointer;

font-size: 0.95rem;

transition: 0.2s;

}

.quick-buttons button:hover {

background-color: #dbe8ff;

}

/* チャット */

.chat-box {

margin-top:20px;

background: white;

border-radius: 12px;

padding: 18px;

min-height: 450px;

max-height: 650px;

overflow-y: auto;

box-shadow:
0 2px 10px rgba(0,0,0,0.08);

margin-bottom: 20px;

}

.welcome-message {

text-align: center;

color: #555;

}

/* メッセージ */

.user-message {

margin-bottom: 15px;

display: flex;

flex-direction: column;

align-items: flex-end;

}

.ai-message {

margin-bottom: 15px;

display: flex;

flex-direction: column;

align-items: flex-start;

}

.message-label {

font-size: 0.8rem;

margin-bottom: 4px;

color: #666;

}

.user-message .message-body {

background: #0b3d91;

color: white;

padding: 12px;

border-radius: 12px 12px 0 12px;

max-width: 80%;

white-space: pre-wrap;

}

.ai-message .message-body {

background: #eef2f8;

padding: 12px;

border-radius: 12px 12px 12px 0;

max-width: 80%;

white-space: pre-wrap;

}

/* ローディング */

.loading-message {

font-style: italic;

color: #666;

margin-bottom: 15px;

}

/* エラー */

.error-message {

color: #c62828;

font-weight: bold;

margin-bottom: 15px;

}

/* 入力欄 */

.input-area {

display: flex;

gap: 10px;

}

#messageInput {

flex: 1;

padding: 14px;

font-size: 16px;

border-radius: 10px;

border: 1px solid #cfd8dc;

}

#messageInput:focus {

outline: none;

border-color: #0b3d91;

}

#sendButton {

background-color: #0b3d91;

color: white;

border: none;

padding: 14px 24px;

border-radius: 10px;

font-size: 16px;

cursor: pointer;

transition: 0.2s;

}

#sendButton:hover {

opacity: 0.92;

}

/* フッター */

.footer {

margin-top: 30px;

padding: 20px;

text-align: center;

color: #666;

font-size: 0.9rem;

}

/* スマホ */

@media (max-width: 768px) {

.logo-area {

flex-direction: column;

text-align: center;

}

.logo {

width: 70px;

height: 70px;

}

.title-area h1 {

font-size: 1.5rem;

}

.chat-box {

min-height: 350px;

}

.input-area {

flex-direction: column;

}

#sendButton {

width: 100%;

}

.quick-buttons {

flex-direction: column;

}

.quick-buttons button {

width: 100%;

}

}

@media (max-width:768px){

  .input-area{
    flex-direction:column;
  }

  #sendButton{
    width:100%;
  }

}