:root { --bg: #FFF5F5; --main: #EF8F35; --txt: #444; }
body { background:var(--bg); color:var(--txt); margin:0; padding-bottom:90px; font-family:sans-serif; -webkit-text-size-adjust: 100%; }
body.modal-open { overflow: hidden; }
.container { max-width:600px; margin:0 auto; background:#fff; min-height:100vh; position:relative; }

/* ヘッダー・フッター */
.app-header { position:fixed; top:0; left:0; width:100%; height:50px; background:rgba(255,255,255,0.95); z-index:100; display:flex; justify-content:space-between; align-items:center; padding:0 10px; box-sizing:border-box; border-bottom:1px solid #eee; }
.header-logo img { height:30px; }
.icon-btn { background:none; border:none; font-size:1.5rem; cursor:pointer; }
.spacer { height:50px; }

#footer-menu { position:fixed; bottom:0; left:0; width:100%; height:70px; background:rgba(255,255,255,0.95); border-top:1px solid #eee; display:flex; justify-content:space-around; align-items:center; z-index:100; }
.footer-btn { background:none; border:none; font-size:2rem; opacity:0.5; }
.footer-btn.active { opacity:1; color:var(--main); }
.footer-camera-btn { background:var(--main); color:#fff; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; margin-top:-30px; box-shadow:0 4px 10px rgba(239,143,53,0.5); cursor:pointer; }

/* 写真カード */
.photo-card { border-bottom:1px solid #eee; padding:10px; }
.p-head { font-size:0.8rem; color:#888; display:flex; justify-content:space-between; margin-bottom:5px; }
.p-img-wrap { position:relative; width:100%; height:0; padding-bottom:100%; background:#eee; border-radius:8px; overflow:hidden; }
.p-img-wrap img { position:absolute; width:100%; height:100%; object-fit:cover; }
.zoom-icon { 
    position:absolute; 
    bottom:8px; 
    right:8px; 
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    pointer-events:none; 
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* LINE風チャット */
.chat-row { display: flex; margin-top: 10px; align-items: flex-start; }
.chat-row.me { flex-direction: row-reverse; }

.user-icon {
    width: 36px; height: 36px; border-radius: 50%; color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin: 0 8px 0 0; font-size: 1rem; flex-shrink: 0;
    background-size: cover; background-position: center; font-weight: bold;
}
.chat-row.me .user-icon { margin: 0 0 0 8px; display: none; }

.chat-content { display: flex; flex-direction: column; max-width: 75%; }
.chat-row.me .chat-content { align-items: flex-end; }

.user-name-label { font-size: 0.7rem; color: #666; margin-bottom: 2px; }
.chat-row.me .user-name-label { display: none; }

.msg {
    background: #f0f0f0; padding: 8px 12px; border-radius: 15px;
    font-size: 0.95rem; word-break: break-all; line-height: 1.4;
    border-top-left-radius: 2px;
}
.chat-row.me .msg {
    background: #DCF8C6;
    border-top-left-radius: 15px;
    border-top-right-radius: 2px;
}

.p-foot { text-align:right; margin-top:5px; }
.btn-comment {
    background: none;
    border: none;
    padding: 5px;
    font-size: 28px; /* アイコンのサイズ */
    color: #aaa; /* アイコンの色 */
    cursor: pointer;
    line-height: 1; /* ボタンの縦幅をアイコンに合わせる */
}
.btn-comment:hover {
    color: #666;
}

/* モーダル */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:200; align-items:center; justify-content:center; }
.modal.show { display:flex; }
.modal-content { background:#fff; width:90%; max-width:350px; padding:20px; border-radius:10px; box-sizing:border-box; }

.modal.modal-bottom { align-items: flex-end; }
.modal.modal-bottom.show .modal-content { width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; padding-bottom: 40px; margin: 0; animation: slideUp 0.3s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* フォーム & ボタン */
.btn { 
    background: var(--main); 
    color: #fff; 
    border: none; 
    padding: 12px; 
    width: 100%; 
    border-radius: 25px;
    font-weight: bold; 
    margin-top: 10px; 
    font-size: 1rem; 
    cursor: pointer;
    transition: background 0.3s;
}
.btn:hover { opacity: 0.9; }

.btn-sub { background:#ccc; color:#444; } 
.btn-danger { background:#ff4757; } 
.btn-sm { padding:8px 20px; border-radius:20px; border:none;}

.btn-disabled { 
    background-color: #999 !important;
    color: #fff !important; 
    cursor: not-allowed; 
    opacity: 1;
}

input, textarea, select { width:100%; padding:10px; border:1px solid #ccc; border-radius:5px; margin-bottom:10px; box-sizing:border-box; font-size:16px; }
.hidden { display:none !important; }

.center-box { text-align:center; padding:40px 20px; } .logo-lg { width:200px; margin-bottom:20px; }

/* FS Viewer */
#fs-viewer { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:300; }
#fs-viewer.show { display:block !important; }

#fs-frame {
    width: 100%;
    height: 100%;
    border: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.fs-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 40px;
    z-index: 302;
    pointer-events: none; /* アイコンがクリックを妨げないように */
}

.fs-loader .fa-spinner {
    animation: fa-spin 1.5s linear infinite;
}

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

#fs-close {
    position:absolute;
    top:20px;
    right:20px;
    width:50px;
    height:50px;
    background:rgba(255,255,255,0.3);
    border:none;
    color:#fff;
    font-size:2rem;
    border-radius:50%;
    z-index:301;
    cursor:pointer;
}

/* Map Pin */
.map-pin { width:50px; height:50px; background-size:cover; background-position:center; border-radius:50%; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.4); position:absolute; cursor:pointer; animation:popIn 0.3s ease; }
.map-pin::after { display: none; }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }

/* Misc */
.tos-box { height:40vh; overflow-y:scroll; background:#fff; border:1px solid #ccc; padding:15px; font-size:0.8rem; text-align:left; margin-bottom:15px; border-radius:8px; box-shadow:inset 0 2px 5px rgba(0,0,0,0.05); }
.tos-box h4 { margin-top:0; color:#555; } .tos-box h5 { margin:10px 0 5px; color:#EF8F35; } .tos-box p { margin:0 0 10px; line-height:1.4; color:#666; }
.intro-text { font-size:0.9rem; line-height:1.6; color:#666; margin-bottom:20px; text-align:left; background:#fff; padding:15px; border-radius:10px; }
.checkbox-label { display:flex; align-items:center; justify-content:center; margin-bottom:15px; font-size:0.9rem; font-weight:bold; }
.checkbox-label input { width:auto; margin-right:10px; transform:scale(1.2); }
.empty-state { text-align:center; padding:50px 20px; color:#aaa; } .empty-state h3 { color:#EF8F35; margin-bottom:10px; }
.cmt-link { color: #007bff; text-decoration: underline; word-break: break-all; }

.section-title { margin: 20px 0 10px; color: #555; font-size: 0.9rem; font-weight: bold; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.icon-upload-label { display: inline-block; padding: 10px; background: #f0f0f0; border-radius: 8px; font-size: 0.9rem; cursor: pointer; margin-top: 5px; text-align:center; width: 100%; box-sizing: border-box; color: #555; }
.nick-area { margin-bottom: 10px; }
.nick-display { font-weight: bold; font-size: 0.9rem; color: #EF8F35; margin-bottom: 5px; }
.icon-preview { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block; margin: 10px auto; border: 2px solid #EF8F35; }

/* Pastel Colors */
.c-0{background:#FF9AA2}.c-1{background:#FFB7B2}.c-2{background:#FFDAC1}.c-3{background:#E2F0CB}
.c-4{background:#B5EAD7}.c-5{background:#C7CEEA}.c-6{background:#90CCF4}.c-7{background:#F3D250}
.c-8{background:#F78888}.c-9{background:#93E4C1}.c-10{background:#F18D9E}.c-11{background:#5BC0EB}
.c-12{background:#FDE74C}.c-13{background:#9BC53D}.c-14{background:#E55934}.c-15{background:#FA7921}

/* PC (タッチ非対応) では非表示にする */
@media (hover: hover) and (pointer: fine) {
    .mobile-only {
        display: none !important;
    }
}

/* ヘッダーアイコンのサイズ調整 */
.icon-btn .fa-regular,
.icon-btn .fa-solid {
    font-size: 24px; /* お好みのサイズに調整 */
    color: #888; /* アイコンの色を指定 */
}

/* フッターアイコンのサイズ調整 */
.footer-btn .fa-solid {
    font-size: 28px; /* お好みのサイズに調整 */
}

/* フッター中央のプラスアイコンのサイズ調整 */
.footer-camera-btn .fa-solid {
    font-size: 32px;
}
.footer-camera-btn .fa-camera {
    font-size: 36px;
}