/* 共通の文字サイズをベースに設定（PC/スマホ共通） */ 
body, input, button, .question-box p, .answer-box p {
    font-size: 1rem;   /* 常に同じ大きさ */
}
/* 全体レイアウト */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 2em;
    max-width: 1000px;
    margin: auto;
    background: linear-gradient(135deg, #f0f4ff, #e0f7fa);
    color: #333;
}

/* タイトル */
h1 {
    text-align: center;
    font-size: 2rem;
    background: linear-gradient(90deg, #4f46e5, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    margin-bottom: 1.5em;
}

/* フォーム */
form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* 入力欄 */
input[type="text"] {
    flex: 1 1 70%;
    padding: 12px 14px;
    border: 1px solid #fff;
    border-radius: 8px;
    font-size: 1rem;
    transition: 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

input[type="text"]:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 8px rgba(79,70,229,0.3);
    outline: none;
}

/* ボタン */
button, .btn {
    flex: 0 1 auto;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(79,70,229,0.25);
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(79,70,229,0.3);
}

footer {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      text-align: center;
      padding: 8px 12px;
      color: #aaa;               /* 文字色 */
      font-size: 8px;
      z-index: 9999;             /* 手前に出す */
    }
footer a{
    color: #aaa;
}

/* フィードバックエリア */
.feedback {
    margin-top: 2em;
    padding: 1em;
}

/* 参考記事リスト */
.references {
    margin-top: 2em;
    padding: 1.5em;
    background: #ffffffc9;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.references ul {
    list-style-type: disc;
    padding-left: 1.5em;
}

/* スマホ対応 */
@media (max-width: 600px) {
    body {
        padding: 1em;
    }

    h1 {
        font-size: 1.5rem;
    }

    form {
        flex-direction: column;
        align-items: stretch;
    }

    input[type="text"] {
        flex: 1 1 100%;
    }

    button {
        width: 100%;
    }
}
/* ===== AI回答ボックス ===== */
.answer-box {
    margin-top: 2em;
    padding: 1.5em 2em;
    background: #ffffffee;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-left: 6px solid #4f46e5;
    animation: fadeIn 0.4s ease-in-out;
}

/* 回答タイトル */
.answer-box h2 {
    font-size: 1.3rem;
    margin-bottom: 1em;
    background: linear-gradient(90deg, #06b6d4, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

/* 回答本文 */
.answer-box p {
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: 1em;
    color: #444;
}

/* 強調表示 */
.answer-box strong {
    color: #4f46e5;
}

/* フェードインアニメーション */
@keyframes fadeInSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.answer-box {
  animation: fadeInSlide 0.4s ease-in-out;
}
/* ===== 質問ボックス（ユーザー側） ===== */
.question-box {
    margin: 1.5em 0;
    padding: 1em 1.2em;
    background: linear-gradient(135deg, #e0f7fa, #c3f0ff);
    border-radius: 12px;
    max-width: 85%;
    margin-left: auto; /* 右寄せ */
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    animation: fadeInRight 0.4s ease-in-out;
}

.question-box p {
    margin: 0;
    font-size: 1rem;
    color: #055a73;
    line-height: 1.6;
    font-weight: 500;
}

/* ===== 回答ボックス（AI側） ===== */
.answer-box {
    margin: 1.5em 0;
    padding: 1.2em 1.5em;
    background: #ffffff;
    border-radius: 12px;
    max-width: 85%;
    margin-right: auto; /* 左寄せ */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-left: 6px solid #4f46e5;
    animation: fadeInLeft 0.4s ease-in-out;
}

.answer-box h2 {
    font-size: 1.2rem;
    margin-bottom: 0.8em;
    background: linear-gradient(90deg, #06b6d4, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.answer-box p {
    margin: 0.5em 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
}

/* 強調 */
.answer-box strong {
    color: #4f46e5;
}

/* アニメーション */
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* スマホ対応 */
@media (max-width: 600px) {
    .question-box, .answer-box {
        max-width: 100%;
    }
}
/* ===== チャットウィンドウ全体 ===== */
.chat-window {
    display: flex;
    flex-direction: column;
    height: 75vh;
    max-height: 800px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    background: linear-gradient(135deg, #f9fbff, #eef7fa);
    margin: 1em auto;
}

/* チャット内容 */
.chat-content {
    flex: 1;
    padding: 1.2em;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1em;
    scroll-behavior: smooth;
}

/* 質問（右側吹き出し） */
.question-box {
    align-self: flex-end;
    background: linear-gradient(135deg, #e0f7fa, #c3f0ff);
    padding: 0.9em 1.2em;
    border-radius: 16px 16px 0 16px;
    max-width: 70%;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    animation: fadeInRight 0.3s ease-in-out;
}

.question-box p {
    margin: 0;
    font-size: 1rem;
    color: #055a73;
    line-height: 1.6;
    font-weight: 500;
}

/* 回答（左側吹き出し） */
.answer-box {
    align-self: flex-start;
    background: #ffffff;
    padding: 1em 1.3em;
    border-radius: 16px 16px 16px 0;
    max-width: 70%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-left: 6px solid #4f46e5;
    animation: fadeInLeft 0.3s ease-in-out;
}

.answer-box h2 {
    font-size: 1.1rem;
    margin-bottom: 0.5em;
    background: linear-gradient(90deg, #06b6d4, #4f46e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.answer-box p {
    margin: 0.4em 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
}

/* 入力フォーム */
.chat-input {
    display: flex;
    padding: 0.8em;
    background: #fff;
    border-top: 1px solid #ddd;
    gap: 0.5em;
}

.chat-input input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: 0.3s;
}

.chat-input input[type="text"]:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 8px rgba(79,70,229,0.3);
    outline: none;
}

.chat-input button {
    padding: 10px 16px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(79,70,229,0.25);
    white-space: nowrap;
}

.chat-input button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(79,70,229,0.3);
}

#reference-feedback-form{
    display: block;
}

/* ===== スマホ用調整 ===== */
@media (max-width: 768px) {
    .chat-window {
        height: 85vh;
        border-radius: 0; /* スマホでは全幅でフラットに */
    }
    .chat-content {
        padding: 1em;
        gap: 0.8em;
    }
    .question-box, .answer-box {
        max-width: 90%; /* スマホでは吹き出し幅を広げる */
        font-size: 0.95rem;
    }
    .chat-input {
        padding: 0.6em;
        gap: 0.4em;
    }
    .chat-input input[type="text"] {
        font-size: 0.95rem;
        padding: 8px 12px;
    }
    .chat-input button {
        font-size: 0.9rem;
        padding: 8px 12px;
    }
}

/* ===== 極小画面用 (iPhone SEなど) ===== */
@media (max-width: 400px) {
    .chat-content {
        padding: 0.6em;
    }
    .question-box, .answer-box {
        max-width: 100%;
        font-size: 0.9rem;
    }
    .chat-input {
        flex-direction: column;
    }
    .chat-input button {
        width: 100%;
    }
}
/* ===== スマホ用調整 ===== */
@media (max-width: 768px) {
    .chat-window {
        height: 85vh;
        border-radius: 0; /* スマホでは全幅でフラットに */
    }
    .chat-content {
        padding: 1em;
        gap: 0.8em;
    }
    .question-box, .answer-box {
        max-width: 90%; /* 吹き出し幅を広げる */
        font-size: 0.95rem;
    }
    .chat-input {
        padding: 0.6em;
        gap: 0.6em;
        align-items: center;
    }
    /* 入力欄を短めに */
    .chat-input input[type="text"] {
        flex: 0 1 65%;
        font-size: 0.95rem;
        padding: 8px 10px;
    }
    /* 送信ボタンを大きめに */
    .chat-input button {
        flex: 0 1 30%;
        font-size: 1rem;
        font-weight: bold;
        padding: 12px;
        text-align: center;
    }
}

/* ===== 極小画面用 (iPhone SEなど) ===== */
@media (max-width: 400px) {
    .chat-content {
        padding: 0.6em;
    }
    .question-box, .answer-box {
        max-width: 100%;
        font-size: 0.9rem;
    }
    .chat-input {
        flex-direction: row; /* 横並びのまま */
    }
    .chat-input input[type="text"] {
        flex: 0 1 60%;
        font-size: 0.9rem;
        padding: 7px 8px;
    }
    .chat-input button {
        flex: 0 1 35%;
        font-size: 0.95rem;
        padding: 10px;
    }
}
/* ===== フッター注意文言 ===== */
.footer-note {
    text-align: center;
    padding: 1em;
    margin-top: 1em;
    font-size: 0.6rem;          /* 小さめ文字 */
    color: #aaa;         /* 目立ちすぎないグレー */
}
.footer-note p {
    margin: 0;
    line-height: 1.4;
}

/* アコーディオンボタン */
.accordion-toggle {
    width: 100%;
    text-align: left;
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
    color: #fff;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    margin-bottom: 0.5em;
}
.accordion-toggle:hover {
    background: linear-gradient(135deg, #4338ca, #0891b2);
}

/* アコーディオン中身（アニメーション対応） */
.accordion-content {
    max-height: 0;               /* 初期は閉じる */
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    background: #ffffffc9;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    padding: 0 1em;              /* 初期は上下の余白なし */
}

/* 開いた時の状態 */
.accordion-content.open {
    max-height: 800px;          /* 十分大きい値を指定 */
    padding: 1em;
}


/* アコーディオンの初期状態 */
.accordion-content {
  display: none;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #fafafa;
  border-radius: 5px;
}

/* 開いたとき */
.accordion-content.open {
  display: block;
}

.accordion-content h3{
  font-size: 1em;
}

.accordion-content p, .accordion-content a, .accordion-content li{
  font-size: 0.8em;
}
.references p {
    margin: 0;
}
.reference-feedback-form p{
    margin-left: 20px;  
}
p.any{
    margin: 0 0 10px;
}

/* ローディングスピナー */
#loading-inline {
  display: none;               /* 初期は非表示 */
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 14px;
  color: #555;
}

.loader-inline {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rareFlash {
  0%   { box-shadow: 0 0 0px gold; }
  50%  { box-shadow: 0 0 20px gold; }
  100% { box-shadow: 0 0 0px gold; }
}

/* ====== Chat layout fix (追加CSS) ====== */

/* ページを中央寄せ（インラインのbody指定を上書き） */
body {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding-left: 1.5em !important;
  padding-right: 1.5em !important;
}

/* 回答エリアを縦積みのフレックスに */
#answer-area {
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: stretch; /* バブルは左右寄せで制御 */
}

/* 共通：バブル幅を揃える */
.question-box,
.answer-box {
  max-width: 85% !important;      /* 画面幅に応じて調整 */
  box-sizing: border-box !important;
}

/* 質問（右寄せ） */
.question-box {
  margin-left: auto !important;    /* 右側へ */
  margin-right: 0 !important;
  align-self: flex-end !important; /* 親がflexなので確実に右へ */
  border-radius: 16px 16px 0 16px !important;
}

/* 回答（左寄せ） */
.answer-box {
  margin-right: auto !important;   /* 左側へ */
  margin-left: 0 !important;
  align-self: flex-start !important;
  border-radius: 16px 16px 16px 0 !important;
  border-left: 6px solid #4f46e5 !important;
}

/* 見出し・タイトルは中央寄せ */
h1 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* スマホ最適化：幅を広げて読みやすく */
@media (max-width: 600px) {
  .question-box,
  .answer-box {
    max-width: 100% !important;
  }
}


form.reference-feedback-form{
    display: block;
}

.reference-feedback-form input{
    font-size: 0.8em;
}

.feedback button{
    width: auto;
}

/* カード本体 */
.answer-box {
  position: relative;
}

@keyframes fadeInOpacity {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.answer-box{
    position: relative;
}

.curated-hit h2{
    background: linear-gradient(90deg, #d36767, #4f46e5);   
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.curated-hit {
  position: relative;
  animation: rareFlash 1s ease-out;
  background: url(img/crated_back.png);
  border-color: #d36767 !important;
}

.answer-box::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 80px;
    height: 120px;
    background: url(img/robo.png) no-repeat center / contain;
    opacity: 0;
    animation: fadeInOpacity 1s ease forwards 0.5s;
}

.curated-hit::after {
    background: url(img/satohitoshi.png) no-repeat center / contain;
}

/* タイトル画像 */
.brand-title { display:flex; justify-content:center; margin: 24px 0 12px; }
.brand-title img { display:block; height:auto; max-width: 420px; width: 90%; }
@media (min-width: 768px) {
  .brand-title img { max-width: 520px; width: auto; }
}
.brand-sub-title {
    text-align: center;
    color: #00a0e9;
    font-weight: bold;
    font-size: 0.8em;
    margin-bottom: 24px;
    font-feature-settings: "palt";
    letter-spacing: 2px;
}

/* 極小の注意書き */
.micro-note {
  margin: 12px 0 12px;
  font-size: 11px;       /* かなり小さく */
  line-height: 1.4;
  color: #999;
  text-align: center;
}

/* ==== about page ==== */
.about-page .site-header { padding: 16px 20px; border-bottom: 1px solid #eee; }
.nav { display:flex; align-items:center; justify-content:space-between; max-width:960px; margin:0 auto; }
.nav .brand img { display:block; }
.nav-links { list-style:none; display:flex; gap:16px; margin:0; padding:0; }
.nav-links a { text-decoration:none; color:#333; font-weight:600; }
.nav-links a.active { color:#0b6bf2; }

.hero { max-width:960px; margin:40px auto 24px; padding:0 20px; text-align:center; }
.hero .brand-title { font-size:28px; margin:0 0 8px; }
.hero .brand-sub-title { color:#666; margin:0 0 12px; }
.hero .lede { color:#444; line-height:1.9; margin:0 auto 16px; max-width:760px; }
.cta-row { display:flex; gap:12px; justify-content:center; margin-top:12px; }
.btn.primary { background:#0b6bf2; border-color:#0b6bf2; color:#fff; text-decoration:none; }
.btn.ghost { background:#fff; color:#aaa; text-decoration:none;}

.about-block, .features, .howto, .faq, .cta-bottom { max-width:960px; margin:28px auto; padding:0 20px; }
.about-block p { line-height:1.9; color:#333; }

.features .feature-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.features li { display:flex; gap:12px; padding:14px; border:1px solid #eee; border-radius:12px; background:#fff; }
.features h3 { margin:2px 0 6px; font-size:16px; }
.features i { font-size:22px; color:#0b6bf2; margin-top:4px; }

.howto .steps { padding-left:20px; line-height:1.9; }
.howto strong { font-weight:700; }

.faq details { border:1px solid #eee; border-radius:10px; padding:12px 14px; background:#fff; margin-bottom:10px; }
.faq summary { cursor:pointer; font-weight:600; }
.faq p { margin:8px 0 0; color:#444; line-height:1.8; }

.breadcrumbs { max-width:960px; margin:8px auto 0; padding:0 20px; }
.breadcrumbs ol { list-style:none; display:flex; gap:8px; padding:0; margin:0; color:#666; font-size:14px; }
.breadcrumbs a { color:#555; text-decoration:none; }
.breadcrumbs li::after { content:"›"; margin-left:8px; color:#aaa; }
.breadcrumbs li[aria-current="page"]::after { content:""; }

.cta-bottom { text-align:center; margin:36px auto 60px; }
.cta-bottom p { margin-bottom:12px; color:#333; }

/* 小画面 */
@media (max-width:560px){
  .hero .brand-title { font-size:22px; }
  .cta-row { flex-direction:column; align-items:center; }
}

.home .nav{
    justify-content: end;
}

.nav-links a {
    color: #aaa;
    font-weight: normal;
    font-size: 0.8em;
}