/* CSSの書き方のコツby ChatGPT. 絶対ルールはないが機能的にまとめるのが標準的
1. 配置(position, top, right, z-index)
2. ボックス(display, width, height, margin, padding)
3. 文字(font, line-height, color, text-align)
4. 見た目(background, border, border-radius, box-shadow)
5. 動きなど(transition, animation) */

/*tag*/
html,
body { /*HTMLファイル全体を包み込む、一番大きな枠組みに対する指定*/
    height: 100%; /*Webページは通常、中に入っている文字や画像の分だけしか高さを持たない(=何も書いていない状態だと高さは「0」)*/
    margin: 0; /*html外側とブラウザ画面の間隔*/
    padding: 0; /*html内側から、コンテンツ（主にbody）までの距離。上下左右0 pt*/
} 

/* 画面全体をスマホの動的viewportに追従させる */
body {/* body で「見た目」全体を調整.これがないとbody がスクロールするかどうかがブラウザ任せ */
    display: flex;
    flex-direction: column;
    width: 100%; /*html画面の横幅を、ブラウザ画面いっぱいに広げる*/
    min-height: 100vh;   /*vh=Viewport Height: html画面の高さを、最低でもブラウザ画面に表示されている100%の高さにする*/
    min-height: 100dvh;  /*dvh=Dynamic VH：URLのバーが出たり消えたりしても、常に今の本当の画面の高さ100%に自動調整する*/
    /* 100vhとすると、スマホのブラウザ（Safariなど）では上下にあるURLのバー（メニュー）の分を計算に入れずに、
    画面を突き抜けてしまう。dvhはその問題を解決する。dvhは最近できたルールなので古いスマホではエラーになってしまうので
    「古いスマホは 100vh を読んでね、新しいスマホはそれを上書きして 100dvh を読んでね」*/
    margin: 0;
    padding: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);  
    /* 「iPhoneの『カメラの切り欠き』や、画面下の『ホームバー』にチャットの文字やボタンが被らないように、
    安全な余白（クッション）を自動で作って！」(ノッチ・ホームバー対策)*/    
    /*overflow: hidden;*//* スクロールは中身に任せる */
    
    font-family: Arial, sans-serif; /*フォントの指定。第一選択Arial、第二選択sans-serif（ゴシック体）*/
}

/* =====idセレクタ（idはそのページ内で1つだけの要素を指定する）======= */
/*＊＊出現順＊＊*/
/* 例：全体ラッパ */
#chat-app { /*.htmlで id="c-app" と定義した箱に対して、以下のルールを適用する*/
    display: flex; /*c_appを『フレックスボックス(=中身の並べ替えを自由にできる箱)』に変える宣言。*/
    flex-direction: column; /*c_appの中身を縦に並べる。デフォはrow*/
    /*height: 100%;*/
    height: 100vh; /*「body」参照*/
    height: 100dvh; /*「body」参照*/
    min-height: 100vh; /*「body」参照*/
    min-height: 100dvh; /*「body」参照*/

    overflow: hidden; /*要素の外にはみ出した中身を表示もスクロールもさせない指定*/
    /*「ボックス（親要素）の枠内に入りきらないコンテンツ（テキストや画像）のときにどう表示するか」を指定する
    visible :default. 何も指定しないと、はみ出たコンテンツはそのままボックスを突き抜けて表示されます。
    hidden	:非表示にする（切り取る）。はみ出た部分は見えなくなりスクロールもできません。チャットの外枠（角丸の親要素）からはみ出た部分を綺麗にカットしたい時などに使います。
    scroll	:強制的にスクロールバーを表示する。コンテンツがはみ出していなくても、常にスクロールバーの領域が確保されます。画面のガタつきを防ぐためにあえて常にバーを出したい時に使います。
    auto	:はみ出していない時は綺麗に収まり、はみ出た時だけスクロールできるようになります。チャットのメッセージエリアに最もおすすめ。
    */
    }
/*#c-appと#c_w_cは、シンプルなアプリなら1つにすることも可能。
「高さを確保する箱（app）」と「中身を並べる箱（container）」を分ける理由は、役割を分けたほうが、後でカスタマイズしやすいから。
例えば将来「チャット画面の横に会社のロゴや別のおしらせバナーを置きたい」と思った時、箱が分かれていれば 
#c_app（土台）の中に新しい箱を追加するだけで済み、チャット本体のレイアウト（container）を壊さずに安全に拡張できる
*/
#consent-screen { /*同意書画面*/
    width: 100%; /*100vwにするとスクロールバーの下にコンテンツが潜る（「body」参照）*/  
    height: 100vh; /*「body」参照*/
    height: 100dvh; /*「body」参照*/
    border: none;/*1px solid #ccc;*//*border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);*/
        
    display: flex; /*c_appを『フレックスボックス(=中身の並べ替えを自由にできる箱)』に変える宣言。*/
    flex-direction: column; /*「c_app」参照*/
    background-color: #fff;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
    
    padding-top: env(safe-area-inset-top); /*「body」参照*/
    padding-bottom: env(safe-area-inset-bottom);
    /*box-sizing: border-box;*/
}

#agree-btn { /*.HTMLで id="agree-btn" という名札がつけられた部品に対して、以下のルールを適用する*/
    display: block; /*ボタンを「ブロック要素」にする。これがないと、幅の指定が効かない*/
    width: 60%; /*ボタンの横幅をブラウザ画面の60%にする*/
    max-width: 320px; /*ボタンの横幅の最大値を320pxにする。これがないとPCでやたら大きくなる*/
    margin: 16px auto 0; /*ボタンの外側の余白。16pxは上、autoは左右（＝自動で均等にする）、0は下の余白*/
    padding: 16px 0; /*ボタンの内側の余白（＝ボタンの文字と枠線の距離）。16pxは上下の余白、0は左右の余白*/
    
    font-size: 1rem; /*文字の大きさを基準値（=ブラウザのデフォルト）と同じにする。これがないとスマホでやたら大きくなる*/
    font-weight: bold; /*文字の太さを太字にする*/
    color: #fff; /*文字の色。#fffは白色（=#ffffffの省略形）*/
    
    background-color: #4a90e2; /*ボタンの背景色。#4a90e2はさわやかな青色*/
    border: none; /*ブラウザが勝手につけるダサい枠線を消して、今風のフラットなデザインにする*/
    border-radius: 10px; /*角を丸くする。数値が大きいほど丸くなる。10pxくらいが今風のデザイン*/
    
    cursor: pointer; /*マウスポインタを「手の形」にして、クリックできることを示す*/
}

#agree-btn:active { /*active= ボタンを押し込(=マウス/指でクリック)んでいる瞬間だけ。マウスを離すと自動で元に戻る*/
    transform: scale(0.97); /*transform は部品を変形させる命令。scale(x)で拡大・縮小幅を指定*/
} /*ボタンを押した瞬間に少し縮んで『物理的なボタンが沈み込んだような動き』をつける。これはスマホユーザ向け*/

#agree-btn:hover { /*hover= マウスポインタがボタンの上に乗っているときだけ*/
    opacity: 0.9; /*opacity=不透明度(1=不透明、0=透明)。マウスポインタを乗せたときに色が薄くなってクリックできることを示す*/
} /*これはパソコンユーザ向け*/

#chat-widget-container { /*.htmlで id="c-w-c" と定義された大枠（外箱）に対して、以下のルールを適用する*/
    position: relative; /*子要素の「#chat-header」を「position: sticky; top: 0;」で画面上部に固定するために必要。これがないと#chat-headerはc_w_cの中でしか固定されない（＝スクロールすると一緒に流れていってしまう）*/
    /*overflow: hidden;*//*親で指定済*/
    
    width: 100%; /*100vwにするとスクロールバーの下にコンテンツが潜る（「body」参照）*/  
    /*height: 100vh; /*「body」参照*//*これは突き抜けリスク。wrapperに一回設定するだけで充分。*/
    /*height: 100dvh; /*「body」参照*//*これは突き抜けリスク*/
    min-height: 0;
    border: none;/*1px solid #ccc;*//*border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);*/
        
    display: flex; /*c_appを『フレックスボックス(=中身の並べ替えを自由にできる箱)』に変える宣言。*/
    flex-direction: column; /*「c_app」参照*/
    flex: 1 1 auto;
    background-color: #fff;
    
    padding-top: env(safe-area-inset-top); /*「body」参照*/
    padding-bottom: env(safe-area-inset-bottom);
    /*box-sizing: border-box;*/
} /*チャットのヘッダー,会話履歴,入力欄などすべてを包む一番外側の大きなコンテナ（箱）に対する指定*/

#chat-header { /*userが画面をスクロールしても常に画面の一番上にタイトルが見えている状態を作る*/
    position: sticky; /*もしくは fixed */
    top: 0; /*posi:stkyと組み合わせて、画面の一番上に固定する指定。これがないとスクロールするとヘッダーも一緒に流れてしまう*/
    z-index: 900; /*重なった要素の前後関係を指定。数値が大きいほど前。これがないとスマホでホームバーを上げたときにヘッダーの上にホームバーが出てきてしまうことがある*/

    display: flex;
    flex-direction: column; /* 要素を縦並び（2段）にする */
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px; /*ヘッダーの内側の余白。上下左右すべてに10pxの余白をつける指定*/
    padding-top: env(safe-area-inset-top); /*「body」参照*/

    font-weight: bold; /*3.文字*/
    color: white; /*文字の色を白にする*/
    text-align: center; /*文字を中央に寄せる指定。これがないと左寄せになる*/   
    
    background-color: #007bff; /*4. 見た目*/
}

#clear-chat-history {
  font-size: 0.8rem;
  padding: 4px 4px;
  cursor: pointer;
  flex-shrink: 0;
}

#chat-history-notice { /**/
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 6px 10px;
  border-bottom: 1px solid #ddd;
}

#chat-history-notice summary {
  cursor: pointer;
}

#chat-body { /*会話が表示されるボディ部分*/
    display: flex; /*c-app参照*/
    flex-direction: column; /*メッセージを縦並びに*/
    flex: 1 1 auto; /*ブラウザ幅をすべて使う。f:f_grow f_shrink f_basis.
    flex-grow: ブラウザ幅＞コンテンツ幅のとき、コンテンツ幅が伸びる割合。0-1（デフォ=0）。拮抗したら率になる
    flex-shrink: ブラウザ幅＜コンテンツ幅のとき、コンテンツ幅が縮む割合。0-1（デフォ=1）。拮抗したら率になる。
    flex-basis: 最初のコンテンツ幅。autoはコンテンツの幅（文字量や）に合わせる。0は最初は幅ゼロで、flex-growで伸びるのを待つ（デフォ=auto） */
    overflow-y: auto; /*メッセージが増えてブラウザ幅を超えた時に自動=autoで縦=y軸にスクロールできるようにする設定*/
    max-width: 100%;
    min-height: 0; /*body参照。これがないとコンテンツ幅が増えた時に画面外に突き抜けてしまう*/
    padding: 10px;  /*c_bの内側の余白。上下左右すべてに10pxの余白をつける指定*/
    padding-bottom: calc(120px + env(safe-area-inset-bottom)); /*入力欄の高さ+s_a分の余白。calc(xxx): CSSの中で計算する*/
    
    gap: 10px; /*メッセージの吹き出しと吹き出しの間に10pxの隙間を空ける*/
    border: none; /*ブラウザが勝手につけるダサい枠線を消して、今風のフラットなデザインにする*/
    /*border-bottom: 1px solid #ccc;*/        
    box-shadow: none; /*影削除*/
    outline: none; /*アウトライン削除*/
}

#predict-questions {
     flex: 0 0 auto;
}

#chat-input-container {
    /*position: fixed; /* c_i_cを画面特定の位置に固定する指定。スクロールしても位置キープ。逆にflexレイアウトから外れてしまう*/
    /*left: 0; /*c_i_cの位置。左端合わせ。posi:fixedの時はここが基準点になる。*/
    /*right: 0; /*c_i_cの位置。右端合わせ。posi:fixedの時はここが基準点になる。*/
    /*bottom: calc(20px + env(safe-area-inset-bottom)); /*c_i_cの位置。下端合わせ*/
    /*z-index: 1000; /*重なった要素の前後関係を指定。数値が大きいほど前。これがないとスマホでホームバーを上げたときにヘッダーの上にホームバーが出てきてしまうことがある*/

    display: flex; /*入力欄と送信ボタンを横並びにするために親要素をフレックスボックスにする。これがないと、送信ボタンが入力欄の下に行く*/
    flex: 0 0 auto;
    /*flex-shrink: 0; /*c_body参照。ブラウザ幅＜コンテンツ幅のとき、コンテンツ幅が縮む割合。0-1。*/
    justify-content: center; /* 中に入る画像とテキストの「グループ全体」を中央に寄せる！ */
    align-items: center;     /* 画像とテキストの「縦の高さ」を綺麗に揃える */
    width: min(720px, 95%); /*min(x,y): x,yの小さいほう。*/   
    height: auto; /*user入力に合わせて高さを調整*/
    min-height: 56px;
    box-sizing: border-box;
    margin: 0 auto; /*c_i_cの外側の余白。上下0、左右auto（＝自動で均等(left=0, right=0を基準として)にする）。これで画面中央に配置される*/
    padding: 10px; /*ヘッダーの内側の余白。上下左右すべてに10pxの余白をつける指定*/
    /* padding-bottom: 50px; *//* ここは削除推奨：paddingで下を伸ばすとレイアウトが崩れやすい */

    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.15); /*c_i_cの上端に1pxの実線を引く。rgbaは色の指定、最後の数値が透明度（0-1）。チャット履歴と入力欄を視覚的に分ける*/
}

#chat-input {
    flex-grow: 1; /*#c_body参照。ブラウザ幅＞コンテンツ幅のとき、コンテンツ幅が伸びる割合。0-1。拮抗したら率になる*/
    min-height: 40px;
    max-height: 160px;
    resize: none;
    overflow-y: auto;
    box-sizing: border-box;
    line-height: 1.5;
  
    padding: 10px; /*入力欄の内側の余白。入力した文字と枠線の距離。上下左右すべてに10pxの余白をつける指定*/    
    
    font-size: 1.1rem; /*入力欄の文字サイズ。1.1倍の大きさにする。これがないとスマホでやたら小さくなる*/

    border: 1px solid #ccc; /*入力欄の枠線。1pxの太さ、solid=実線、色は#ccc（薄いグレー）*/
    border-radius: 20px; /*角を丸くする。数値が大きいほど丸くなる。心理的な入力ハードルを下げる*/
    outline: none;
}

/*#chat-messages { /* メッセージ一覧 *//*
  flex: 1;
  overflow-y: auto;
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
  padding-top: 12px;
}*/

#chat-send-button { /*===IDセレクタ===*/
    display: flex;  /*中身を『フレックスボックス(=中身の並べ替えを自由にできる箱)』に変える宣言。#c_app参照*/
    margin-left: auto;   /* 左側の余白を自動にして右へ寄せる */
    padding: 10px 15px;
    
    color: white;
    
    background-color: #007bff;
    border: none;
    border-radius: 20px;
    
    cursor: pointer;
}

#chat-footer { /*===IDセレクタ===*/
    position: static;  /* c_fを画面特定の位置に固定する指定。スクロールしても位置キープ*/
    /*posiは、HTMLの「上から下へ順番に並ぶ」という通常ルールを無視して、
    「指定した部品を、まるでシールのように画面の好きな場所にペタッと貼り付ける魔法。position を使うと部品が宙に浮く
    static: 通常の流れ。topやleftは無効(指定しても機能しない)。これがデフォルト
    relative: 本来自分がいるはずだった場所を基準にして、そこからどれくらいズレるかを指定する。topやleftで微調整する。top:10px;なら通常の位置から下に10pxずらす
    absolute: 一番近いposition:relativeの親要素を基準に、そこから縦横何ピクセルに配置するかtopやleftで位置指定。親要素がいなければhtml全体が基準
    fixed: 画面全体を基準に、topやleftで位置指定。スクロールしても位置キープ。※注※fixedにするとflexから外れる。
    sticky: fixedとrelativeのいいとこどり。通常はrelativeで、スクロールして画面の指定位置に来たらstickyになってそこに固定される。topやleftで位置指定。スクロールしても位置キープ
    **pitfall:①absoluteやfixedで宙に浮かせた部品は親の横幅（100%）に依存しなくなり、中身の文字の分だけクシャッと極小化してしまいます。
            対策: 宙に浮かせた部品には、必ず width: 100%; や width: fit-content;（最大〇〇%などの制限付き）を明示的に指定してあげる必要があります
            ②absolute は、「posi:relativeが設定されている一番近い親の箱」を基準点にする。もし親の箱にrelativeを付け忘れるとブラウザ画面全体の左上を基準にする。
            ③部品が他の部品の上に「被さる」。スマホ画面で、固定したはずのチャット起動ボタンが、サイトの別の画像やメニューの下に潜り込んでしまって押せなくなるトラブルが多発します。
            対策: position で浮かせたものには、必ず z-indexを指定する。チャット画面全体を覆うようなものは z-index: 9999; のように非常に強い数値を設定して、最前面を死守します。
    */
    left: 0; /*c_i_c参照*/
    right: 0;
    /*bottom: 0; /*posi:staticだと書いても機能しない*/
    z-index: auto; /*配置の前後関係。数字が大きい方が前*/
     
    width: 100%; /*はみ出し防止 */  /*transform: translateX(-50%);*/
    padding: 6px 9px; /*内側の余白。上下6px、左右9px。これがないと文字が端にくっついて読みにくい*/
    padding-bottom: calc(6px + env(safe-area-inset-bottom));/* スマホのホームバー対策 */
    
    font-size: 0.65rem;
    color: #777; /* 背景透明でも読める色 */
    text-align: center; /* 文字をセンターに */
    
    background: #f5f5f5;
    border: none; /*枠なし*/
    border-top: 1px solid #ccc;
    border-radius: 12px;
    box-sizing: border-box; /*はみ出し防止 */
    /*b-s: コンテンツの各部品のサイズの測り方（計算基準）を決めるルール。
    b-bは指定された横幅はpaddingもborderも全部コミコミのサイズとして計算して、というルール。
    段ボール箱の例え：横幅100cmの箱を作って！と発注すると、今回はpaddingも、borderも「外側から測った箱の最終径がピッタリ100cmになるように
    内側の空間をギュッと縮めて調整してくれる」という状態になります。*/
    box-shadow: none; /* 影なし*/
        
    pointer-events: none; /*操作を邪魔しない*/   
    flex: 0 0 auto;
}

/* ===== classセレクタ(一つのページに何度も繰り返し使える)====== */
.bot-message { /*これから生成されるbotの会話に適応される*/
    display: flex; /* アイコンとテキストを横並びに */
    align-items: flex-start;  /* 部品の横のずれをどうそろえるか。デフォは「stretch」。flex-startは上端そろえ*/
    /*要素を、htmlの配列方向（flex-direction。ここではrow）の交差軸(縦)に関してどう配置するか。cf.「justify-content」 */
    overflow-wrap: anywhere;   /* 長いURL等でも折り返す */
    /*デフォはnormal. 長文が改行されずページ幅を壊す。
    o-w:break-wordは「基本は単語の途中で切らないけど、もし枠からはみ出しそうになったら、単語の途中で改行して」
    o-w:anywhereは「単語の途中でも、どんな場所でも、問答無用で改行してヨシ」という指示。最新形*/
    /* word-break: break-word;*/  /* 古い環境向け保険 */
    max-width: 80%;
    margin: 10px 0;
    margin-bottom: 4px;
    padding: 8px 12px;
    
    background-color: #f1f1f1;
    border-radius: 15px;
    box-sizing: border-box;/* #c-footer参照。長文・URLでレイアウト崩れ防止 */
}

.bot-message.consent { /*交差セレクタ。.bot-messageクラスを持っていて、かつconsentクラスも持っている要素に対する指定*/
    margin-top: 4px;
    margin-bottom: 4px;
    
    display: flex;           /* 箱の中身を横並びのフレックスボックスにする */
    justify-content: center; /* 中に入る画像とテキストの「グループ全体」を中央に寄せる！ */
    align-items: center;     /* 画像とテキストの「縦の高さ」を綺麗に揃える */
    gap: 8px;                /* 画像とテキストがくっつきすぎないように隙間を空ける */
}

.bot-message img { /*class=b-mに含まれる<img>にのみ適用*/
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 50%; /* 丸いアイコン */
}

.bot-text { /*このクラスはindex.jsで定義される。*/
    max-width: 100%;
    padding: 10px;
    
    font-size: 1.0rem;   /*1remが基準で1.0は標準サイズ。remを使うと端末差を自動調整*/
    /*white-space: pre-wrap;*/ /*改行コードをそのまま反映して表示する。これがないと、HTMLは複数スペースや改行を1つのスペースにまとめて表示してしまう*/
    
    background: #f1f1f1;
    border-radius: 10px;    
}

/*.bot-text.consent { /*交差セレクタ。.b-tクラスを持っていて、かつconsentクラスも持っている要素に対する指定*/
/*    }*/

.chat-input-error {
    min-height: 1.2em;
    margin-top: 6px;
    font-size: 0.85rem;
    color: #c0392b;
    }

.chat-input-row {
    display: flex;
    flex-direction: row; /*c_i_rの中身を横に並べる。デフォはrow*/
    gap: 8px;
    align-items: flex-end; /*.bot-message参照。下ぞろえ*/
}

.hidden { 
    display: none !important;
} /*index.jsでhiddenをremoveすると、.html要素が表示される*/

.quick-replies { /* 予測質問部. このクラスはindex.jsで定義される。*/
    display: flex;
    flex-wrap: wrap; /* q-rのboxがブラウザ幅を超えたら次列に表示する。スマホ対応の重要コード！デフォは「nowrap」*/
    gap: 5px;               /* ボタン間の余白 */
    justify-content: flex-end;/* q-rのboxを右寄せする */
    /*要素を、htmlの配列方向（flex-direction）の主軸(今回はcolumn=縦)に関してどう配置するか。cf.「align-items」*/
    margin-top: 10px;
}

.quick-reply-btn { /*このクラスはindex.jsで定義される。*/
    padding: 10px 14px; /* ボタンの縦x横サイズ拡大 */
    
    font-size: 0.9rem;
    
    background-color: #e0e0e0;
    border: 2px solid #ccc; /* 枠を太く */
    border-radius: 12px; /* 角丸を強調 */
    
    cursor: pointer;
    transition: background-color 0.2s;
}

.quick-reply-btn:hover { /*q-r-bボタンの上にポインタが乗っている(=hover)とき*/
    background-color: #d0d0d0;
}

.user-message { /*このクラスはindex.jsで定義される。*/
    max-width: 80%;
    margin-bottom: 10px;
    margin-left: auto;
    padding: 8px 12px;

    background-color: #e6f3ff;
    border-radius: 15px;
    /*align-self: flex-end;*/
}

/* ===== classセレクタ*/
/*年齢リールの設定*/
.age-picker {
  margin: 8px 12px;
  padding: 12px;
  border-radius: 12px;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.age-picker-title {
  font-size: 0.9rem;
  font-weight: 600;
}

.age-picker-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.age-picker-number,
.age-picker-unit {
  font-size: 1rem;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
}

.age-picker-number {
  min-width: 80px;
}

.age-picker-unit {
  min-width: 70px;
}

.age-picker-submit {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background-color: #a3d7e7; /*背景色*/
  color: #fff;
}

/*体温リールの設定*/
.body-temp-picker {
  margin: 8px 12px;
  padding: 12px;
  border-radius: 12px;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.body-temp-picker-title {
  font-size: 0.9rem;
  font-weight: 600;
}

.body-temp-picker-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.body-temp-picker-number {
  font-size: 1rem;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
  min-width: 90px;
}

.body-temp-picker-unit {
  font-size: 1rem;
}

.body-temp-picker-submit {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background-color: #a3d7e7; /*背景色*/
  color: #fff;
}

/* Trend Micro等が注入する通知領域を無害化（表示を消す） */
/*#trend_notification_app,
#trend_notification,
.trend_notification_app_outer {
  display: none !important;
  border: 0 !important;
  height: 0 !important;
}*/

/*=====タイプセレクタ======*/
mark {
    color: red; font-weight: bold;
}