@charset "UTF-8";
/*!
 * Project:     Assembly
 * File:        nookaxis/resource/css/nookaxis_style.css
 * Author:      MOMOWORK
 * Author URI:  https://momowork.com
 * Created:     2025-11-1
 * Updated:     2025-11-4
 * Version:     1.0
 * Description: NAVI/ITEM
 */

/* ===== 全体設定 ===== */
html,body{margin:0;padding:0;height:100%;background:#f5f5f5;color:#333;display:flex;flex-direction:column;}
::selection{color:#fff;background:#00afcc;}
html{scroll-behavior:smooth;}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
img{max-width:100%;height:auto;}
a:hover img{opacity:0.6;transition:opacity 0.3s ease;}
hr{border:none;border-top:1px dashed rgba(0,0,0,0.3);margin:10px auto;width:100%;}
blockquote{width:90%;max-width:800px;margin:1em auto;padding:1em;background:#ffe6e6;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.1);}
blockquote ul{padding:0px 20px;margin:0;text-align:left;}
blockquote li{margin:0.5em 0;font-size:1em;line-height:1.5em;}

/* ========== Base Typography ========== */
html { font-size: 16px; line-height: 1.6; }
body { font-family: 'Helvetica Neue','Hiragino Kaku Gothic ProN',Meiryo,sans-serif; font-size: 1rem; line-height: 1.8; }
p, li { font-size: clamp(0.9rem, 2.5vw, 1.05rem); line-height: 1.8; margin-bottom: 1em; }
small, footer { font-size: clamp(0.8rem, 2vw, 0.9rem); line-height: 1.5; }
ul, ol { margin: 1em 0 1em 1.5em; }
ul li, ol li { margin-bottom: 0.4em; }
a { text-decoration: none; }
input, textarea, button { font-size: 1rem; line-height: 1.6; }
button { font-weight: bold; padding: 0.6em 1.2em; }
h1,h2,h3,h4,h5,h6 { clear: both; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 2.5rem); line-height: 1.3; margin: 1em 0; }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.35; margin: 0.8em 0; }
h3 { font-size: clamp(1.25rem, 3.5vw, 1.5rem); line-height: 1.4; margin: 0.6em 0; }
h4 { font-size: clamp(1.125rem, 3vw, 1.25rem); line-height: 1.45; margin: 0.5em 0; }
h5 { font-size: clamp(1rem, 2.5vw, 1.125rem); line-height: 1.5; margin: 0.5em 0; }
h6 { font-size: clamp(0.875rem, 2vw, 1rem); line-height: 1.5; margin: 0.4em 0; }

header h1{font-size:clamp(1.5rem,4vw,2rem);line-height:1.2;}

/* ===== ヘッダー ===== */
header{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;z-index:300;padding:8px 0;background:linear-gradient(to bottom,#1B2735,#19324B);box-shadow:0 2px 4px rgba(0,0,0,0.3);margin-bottom:10px;}
header h1{margin:0;letter-spacing:1px;}
header h1 a{color:#F8F8F8;text-decoration:none;transition:color 0.3s,text-shadow 0.3s;}
header h1 a:hover{color:#D0D0D0;text-shadow:0 0 6px rgba(255,255,255,0.7);}

/* ===== フッター ===== */
footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px;background:linear-gradient(to bottom,#19324B,#1B2735);color:#F8F8F8;text-align:center;z-index:200;box-shadow:0 -2px 6px rgba(0,0,0,0.2);flex-shrink:0;}
#logo_footer{display:block;width:auto;height:30px;margin:0 auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.3));}
footer small{display:block;margin-top:3px;}

/* ===== コンテナ ===== */
#container{text-align: center;display:flex;flex-direction:column;align-items:stretch;width:90%;max-width:800px;margin:0 auto;padding:10px;gap:20px;box-sizing:border-box;flex:1 0 auto;}

/* ===== 共通フォームデザイン ===== */
.form-box,#loginForm,#passChangeForm{display:block;width:min(90%,400px);padding:20px;margin:0 auto;box-sizing:border-box;border:1px solid #e5e5e5;border-radius:10px;background:#fafafa;box-shadow:0 3px 10px rgba(0,0,0,0.06);text-align:center;transition:transform 0.2s ease,box-shadow 0.2s ease;}

.form-box input[type="text"],.form-box input[type="password"],#loginForm input[type="text"],#loginForm input[type="password"],#passChangeForm input[type="password"]{display:block;width:100%;padding:10px;margin:6px 0;box-sizing:border-box;border:1px solid #ccc;border-radius:6px;background:#fff;color:#333;font-size:0.95rem;text-align:left;transition:border-color 0.3s,box-shadow 0.3s;}
.form-box input:focus,#loginForm input:focus,#passChangeForm input:focus{border-color:#00afcc;box-shadow:0 0 4px rgba(65,105,225,0.3);outline:none;}
.form-box button,#loginForm button,#passChangeForm button{display:block;width:100%;padding:10px;margin-top:12px;border:none;border-radius:6px;background:#00afcc;box-shadow:none;color:#fff;font-size:0.95rem;font-weight:bold;text-align:center;transition:background 0.3s,transform 0.2s,box-shadow 0.2s;cursor:pointer;}
.form-box button:hover,#loginForm button:hover,#passChangeForm button:hover{background:#008cb4;box-shadow:0 4px 8px rgba(0,0,0,0.2);transform:translateY(-1px);}

/* ===== 操作ボタンエリア ===== */
.entry_config { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:8px; width:100%; margin:0 0 10px auto; box-sizing:border-box; }
.entry_config input[type="submit"] { display:inline-block; padding:8px 12px; border:1px solid #ccc; border-radius:6px; background:#eceff4; box-shadow:none; color:#333; font-size:0.9rem; font-weight:500; text-align:center; cursor:pointer; transition:all 0.2s ease; flex:0 0 auto; }
.entry_config input[type="submit"]:hover { background:#f7f9fc; color:#000; box-shadow:0 1px 3px rgba(0,0,0,0.15); }
.entry_config input[value="ログアウト"] { background:#f4e5e5; border:1px solid #d8b5b5; color:#8b1c1c; }
.entry_config input[value="ログアウト"]:hover { background:#f9dcdc; color:#a31818; }

/* ===== 閉じるボタン（パス変更・利用規約共通） ===== */
#closePassForm, #closeRulesForm { margin-top: -10px; text-align: center; }
#closePassForm input[type="submit"], #closeRulesForm input[type="submit"] { display: inline-block; padding: 5px 10px; border: none; border-radius: 12px; text-decoration: none; text-align: center; cursor: pointer; background: #ddd; color: #333; transition: background 0.3s ease, color 0.3s ease; }
#closePassForm input[type="submit"]:hover, #closeRulesForm input[type="submit"]:hover { background: #bbb; color: #fff; }

/* ===== 公開・ログリンクボタン (nomal-button) ===== */
.nomal-button { display: inline-block; padding: 5px 10px; border: none; border-radius: 12px; text-decoration: none; text-align: center; cursor: pointer; background: #19324B; color: #fff; font-size: 0.9em; font-weight: bold; transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; margin: 5px 4px 15px 4px; }
.nomal-button:hover { background: #2b4561; color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: scale(1.05); }
.nomal-button:active { background: #0d1e33; transform: scale(0.98); }
.button_area { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

/* ===== ログダウンロードボタン ===== */
.download-button { display:inline-block; padding:5px 10px; border:none; border-radius:12px; text-decoration:none; text-align:center; cursor:pointer; background:#ddd; color:#333; font-size:0.9em; transition:background 0.3s ease, color 0.3s ease, transform 0.2s ease; margin:5px 0 15px 0; }
.download-button:hover { background:#bbb; color:#fff; transform:scale(1.05); }
.download-button:active { background:#aaa; transform:scale(0.98); }

/* ===== 投稿カウント ===== */
#post-count { text-align:right; color:#666; font-size:0.9em; margin:5px 0 10px 0; }

/* ===== 投稿更新ストップボタン（危険操作用・赤ベース） ===== */
#stopUpdateButton { display:inline-block; padding:5px 10px; border:none; border-radius:12px; text-decoration:none; text-align:center; cursor:pointer; background:#e57373; color:#fff; font-size:0.9em; transition:background 0.3s ease, color 0.3s ease, transform 0.2s ease; margin:5px 0 15px 0; }
#stopUpdateButton:hover { background:#ef5350; color:#fff; transform:scale(1.05); }
#stopUpdateButton:active { background:#d32f2f; transform:scale(0.98); }

/* ===== 投稿フォーム ===== */
#postForm { width:100%; max-width:800px; display:flex; flex-direction:column; padding:15px; box-sizing:border-box; background:fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
#postForm textarea { margin:0 0 8px 0; width:100%; height:180px; padding:0.8em; font-size:clamp(1em,3.5vw,1.2em); line-height:1.6em; white-space:pre-wrap; border:1px solid #ccc; border-radius:10px; resize:none; box-sizing:border-box; transition:border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
#postForm textarea:focus { outline:none; border-color:#f5d76e; box-shadow:0 0 0 3px rgba(245,215,110,0.3); background-color:#fffbea; }
#postForm button { display:block; width:100%; padding:0.5em; font-size:1.1em; font-weight:bold; color:#fff; background:#00afcc; border:none; border-radius:10px; cursor:pointer; box-shadow:0 4px 8px rgba(0,0,0,0.1); transition:background 0.2s, transform 0.1s, box-shadow 0.2s; }
#postForm button:hover { background:#008cb4; box-shadow:0 6px 12px rgba(0,0,0,0.15); }
#postForm button:active { transform:scale(0.98); box-shadow:0 3px 6px rgba(0,0,0,0.1); }

/* ===== 管理画面 投稿一覧 ===== */
.post-item { border: 1px solid #ccc; border-radius: 8px; padding: 15px; background-color: #f9f9f9; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); margin-bottom: 20px; }
.post-item .post-meta { text-align: left; font-size: 0.9em; color: #666; margin-bottom: 5px; padding-bottom: 5px; }
.post-item .post-message { text-align: left; font-size: 1.1em; line-height: 1.6; margin-bottom: 10px; }
.post-item .post-controls { text-align: right; }
.post-item .post-controls button { margin-left: 10px; padding: 5px 10px; border: none; border-radius: 4px; cursor: pointer; }
.post-item .post-controls button[type="submit"] { background-color: #00afcc; color: white; }
.post-item .post-controls button[type="submit"]:hover { background-color: #008cb4; }

/* プロフィール */
#img_profile{display:block;width:80%;max-width:300px;height:auto;margin:0.5em auto;border-radius:50%;cursor:pointer;transition:all 0.4s ease;box-shadow:0 4px 12px rgba(0,0,0,0.2);}
#img_profile:hover{transform:scale(1.03);box-shadow:0 6px 20px rgba(0,0,0,0.25);}

/* ===== ボタン共通 ===== */
.ex_btn,.sp_btn,.wa_btn,.btn,.as_btn{display:block;width:90%;max-width:600px;margin:0 auto 12px auto;padding:12px;color:#fff;text-decoration:none;border-radius:10px;font-weight:bold;text-align:center;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.2);}
.ex_btn:hover,.sp_btn:hover,.wa_btn:hover,.btn:hover,.as_btn:hover{color:#fff;transform:translateY(-2px);}
.ex_btn{background:linear-gradient(145deg,#008fa3,#005f7f);}
.ex_btn:hover{background:linear-gradient(145deg,#005f7f,#008fa3);box-shadow:0 6px 16px rgba(0,0,0,0.3);}
.sp_btn{background:#B0B0B0;color:#222;box-shadow:0 3px 10px rgba(0,0,0,0.15);}
.sp_btn:hover{background:#8A8A8A;color:#fff;box-shadow:0 5px 14px rgba(0,0,0,0.25);}
.wa_btn{background:linear-gradient(145deg,#A12A2A,#7F1F1F);}
.wa_btn:hover{background:linear-gradient(145deg,#7F1F1F,#A12A2A);box-shadow:0 6px 16px rgba(0,0,0,0.3);}
.btn{background:linear-gradient(145deg,#3a7ca5,#2a5c7f);}
.btn:hover{background:linear-gradient(145deg,#2a5c7f,#3a7ca5);box-shadow:0 6px 16px rgba(0,0,0,0.3);}
.as_btn{background:linear-gradient(145deg,#2A4D72,#1F3755);}
.as_btn:hover{background:linear-gradient(145deg,#1F3755,#2A4D72);box-shadow:0 6px 16px rgba(0,0,0,0.3);}

/* ===== 終端メッセージ ===== */
#end-message{margin:2em 0;text-align:center;color:#666;font-weight:500;cursor:pointer;transition:color 0.3s;}
#end-message:hover{color:#333;text-decoration:underline;}

/* ===== エラーメッセージ ===== */
#error-message{min-height:1.2em;color:#B22222;font-weight:600;transition:opacity 0.5s ease;}

/* ===== log.html 投稿一覧 ===== */
.nookaxis{width:100%;max-width:800px;margin:1.5em auto;padding:1em;background:#fff;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,0.08);overflow-wrap:break-word;box-sizing:border-box;opacity:0;transform:translateY(10px);transition:opacity 0.5s,transform 0.5s;text-align:left;}
.fade-in{animation:fadeIn 0.6s forwards;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.date{margin-bottom:0.3em;color:#888;font-size:clamp(0.75em,2vw,0.9em);}
.msg{font-size:clamp(1em,3vw,1.2em);line-height:1.5em;}
@media (max-width:768px){.msg{font-size:clamp(1.1em,4vw,1.3em);}}

/* ===== 下矢印 ===== */
#scroll-down{position:fixed;bottom:140px;left:50%;transform:translateX(-50%);font-size:2.2em;color:#888;cursor:pointer;animation:bounce 1s infinite;z-index:250;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color 0.3s, transform 0.3s;}
#scroll-down:hover{color:#555;transform:translateX(-50%) translateY(-4px);}
#scroll-down.hidden{opacity:0;pointer-events:none;transition:0.3s;}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0);}40%{transform:translateX(-50%) translateY(-8px);}60%{transform:translateX(-50%) translateY(-4px);}}

/* =====  index.html NOOKBBS 投稿カード ===== */
.nookaxis-post-entry{position:relative;width:90%;max-width:600px;margin:20px auto;padding:24px;background:#FDFDFD;border-radius:16px;box-sizing:border-box;text-align:left;box-shadow:0 6px 18px rgba(0,0,0,0.15);transition:all 0.3s ease;}
.nookaxis-post-entry::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);border-width:0 8px 8px 8px;border-style:solid;border-color:transparent transparent #FDFDFD transparent;}
.nookaxis-date{display:block;margin-bottom:6px;font-size:0.8em;color:#888;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.nookaxis-text{display:block;color:#333;font-size:1em;line-height:1.6;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.nookaxis-post-link{display:block;cursor:pointer;color:inherit;text-decoration:none;font-weight:normal;transition:all 0.2s ease;}
.nookaxis-post-link:hover{transform:translateY(-2px);}

/* ===== Loading Overlay ===== */
#loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.6s ease, visibility 0.6s ease; }
#loading-overlay.loaded { opacity: 0; visibility: hidden; }
#loading-logo { width: 100px; height: 100px; margin-bottom: 20px; animation: fadeIn 1s ease-in-out; }
.spinner { width: 40px; height: 40px; border: 4px solid #ccc; border-top-color: #333; border-radius: 50%; animation: spin 1s linear infinite; }

/* ===== Animation Keyframes ===== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }