:root{
  --brand:#0b9cdf;
  --brand-dark:#0987b5;
  --accent:#4a80f6;
  --danger:#e53935;
  --danger-dark:#b71c1c;
  --text:#333;
  --muted:#ccc;
  --bg:#fff;
  --bg-soft:#f5f9ff;
  --shadow:0 0 15px rgba(0,0,0,0.1);
}

/* ---------- Base ---------- */
body{
  margin:0;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  background:#fff;
}

a,
a:visited,
a:hover,
a:focus,
button,
button:visited,
button:hover,
button:focus{
  text-decoration:none;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

footer{
  margin-top:auto;
  padding:1.2rem;
  font-size:.8rem;
  text-align:center;
}

/* ---------- Tabs ---------- */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:1rem;
}
.tab-btn{
  padding:6px 12px;
  background:#eee;
  border:1px solid var(--muted);
  border-radius:4px;
  cursor:pointer;
}
.tab-btn.active{ background:var(--brand); color:#fff; }

/* モバイル用プルダウン（共通） */
.mobile-tab-select{ display:none; margin:10px; font-size:1rem; }
.custom-select{
  appearance:none;
  background:url('../images/icon-arrow-down.svg') no-repeat right .7em center/ .65em auto;
  padding-right:2em;
}

/* ---------- Fixed Download Button ---------- */
.fixed-download-button{
  position:fixed; bottom:20px; right:20px; z-index:10000;
  padding:.8rem 1.5rem; background:var(--brand); color:#fff; font-weight:bold;
  border:none; border-radius:5px; cursor:pointer;
}

/* ---------- Pagination (共通) ---------- */
.pagination{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:4px; margin-top:1.5rem;
}
.page-btn{
  display:flex; justify-content:center; align-items:center;
  width:32px; height:32px;
  border:1px solid var(--muted); border-radius:4px;
  text-decoration:none; color:var(--text); font-size:14px;
}
.page-btn:hover{ background:#eee; }
.page-btn.active{ background:var(--accent); color:#fff; }

/* ---------- Notice / Message ---------- */
.login-error{
  margin-bottom:1rem; padding:.75rem 1rem;
  background:#ffebee; border-left:4px solid var(--danger);
  color:var(--danger-dark); font-weight:600; text-align:left; border-radius:6px;
}

.maintenance-notice{
  margin-bottom:1.5rem; padding:1rem 1.25rem; border-radius:8px;
  border-left:4px solid var(--brand); background:var(--bg-soft);
  color:#0a3d62; text-align:left;
}
.maintenance-notice--active{
  border-left-color:#d32f2f; background:#fff4f4; color:#8a1c1c;
}
.maintenance-notice__title{ margin:0 0 .5rem; font-size:1rem; font-weight:700; }
.maintenance-notice__body{ line-height:1.6; word-break:break-word; }

.login-disabled-message{ margin-top:1rem; color:var(--danger-dark); font-weight:600; }
.client-login-logo{ max-height:80px; }

/* ---------- Login Page ---------- */
body.login-page{
  align-items:center; justify-content:center;
}
.login-container{
  background:rgba(255,255,255,.95);
  padding:40px; border-radius:10px; width:300px; box-shadow:var(--shadow);
  text-align:center;
}
.login-container input[type="text"],
.login-container input[type="password"]{
  width:100%; padding:10px; margin:10px 0 20px;
  border:none; border-bottom:1px solid var(--muted);
  background:transparent; outline:none; font-size:16px;
}
.login-container label{
  display:flex; align-items:center; font-size:14px; margin-bottom:20px;
}
.login-container input[type="checkbox"]{ margin-right:10px; }
.login-container button{
  width:100%; padding:10px; background:var(--brand); color:#fff;
  border:none; border-radius:5px; font-size:16px; cursor:pointer;
}
.login-container button:hover{ background:var(--brand-dark); }

.preview-notice{
  font-size:.9rem; color:#fff; background:#e74c3c;
  padding:.2rem .5rem; border-radius:4px; margin-left:auto; margin-right:1rem;
}

/* ---------- Gallery Page (差分だけ) ---------- */
.gallery-page .fixed-download-button{ z-index:9998; }
.gallery-page .mobile-tab-select{ margin:10px auto; }
.gallery-page .tabs{ margin:1rem 0 0 1rem; }
.gallery-page .tab-content{ display:none; }
.gallery-page .tab-content.is-active{ display:block; }

.gallery-page .footer-pagination{ /* 768px以下の下部余白はメディアクエリ側で調整 */ }

.gallery-page .site-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:.5rem 1rem; background:#fff;
}
.gallery-page .menu-toggle{ font-size:3rem; cursor:pointer; position:relative; }
.gallery-page #client-menu{
  font-size:1rem; font-family:sans-serif; display:none; position:absolute; right:0; top:100%;
  background:#333; color:#fff; border:1px solid #555; padding:5px 10px; min-width:160px; z-index:1000;
}
.gallery-page #client-menu a{
  display:block; color:#fff; text-decoration:none; padding:6px 10px;
}
.gallery-page #client-menu a:hover{ background:#444; }

.gallery-page .page-limit-select{
  padding:.3rem .6rem; border:1px solid var(--muted); border-radius:4px; min-width:80px;
}
.gallery-page .page-limit-select:focus{ width:120px; }

.gallery-page .page-limit-form{ display:flex; align-items:center; gap:.25rem; }
.gallery-page .header{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:0 1rem; gap:1rem; flex-wrap:wrap;
}
.gallery-page .header-left{ display:flex; flex-direction:column; gap:.25rem; flex:1; min-width:0; }
.gallery-page .header-left h2{ margin:0; font-size:1.6rem; line-height:1.4; word-break:break-word; }
.gallery-page .corner-message{ font-size:.95rem; color:var(--text); line-height:1.5; word-break:break-word; overflow-wrap:anywhere; }
.corner-detail{
  margin-top:1rem;
  padding:1rem;
  background-color:#fff;
  border:1px solid #e0e0e0;
  border-radius:8px;
}
.corner-detail__heading{
  margin:0 0 .75rem;
  font-size:1rem;
  font-weight:600;
  color:#333;
}
.corner-detail__list{
  margin:0;
  padding:0;
}
.corner-detail__item{
  display:flex;
  flex-wrap:wrap;
  padding:.5rem 0;
  border-top:1px solid #eee;
}
.corner-detail__item:first-child{ border-top:none; }
.corner-detail__term{
  flex:0 0 140px;
  margin:0;
  font-weight:600;
  color:#555;
}
.corner-detail__description{
  flex:1 1 auto;
  margin:0;
  color:#333;
  word-break:break-word;
}
@media (max-width:600px){
  .corner-detail{ padding:.75rem; }
  .corner-detail__item{ flex-direction:column; }
  .corner-detail__term{ flex:0 0 auto; margin-bottom:.25rem; }
}
.gallery-page .header-right{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }

.corner-comment-section{
  margin:1.5rem 1rem; padding:1rem 1.25rem; border:1px solid #e0e0e0; border-radius:8px; background:#fafafa;
}
.corner-comment-accordion{ margin:0; padding:0; border:none; }
.corner-comment-summary{
  display:flex; align-items:center; justify-content:space-between; margin:0;
  font-size:1.1rem; font-weight:600; cursor:pointer; list-style:none;
}
.corner-comment-summary::-webkit-details-marker{ display:none; }
.corner-comment-summary::after{
  content:''; width:.75rem; height:.75rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .2s ease; margin-left:.5rem;
}
.corner-comment-accordion[open] .corner-comment-summary::after{ transform:rotate(-135deg); }
.corner-comment-summary:focus{ outline:3px solid rgba(76,159,254,.35); outline-offset:4px; }
.corner-comment-summary:focus-visible{ outline:3px solid rgba(76,159,254,.9); outline-offset:4px; }
.corner-comment-summary-text{ flex:1 1 auto; }
.corner-comment-panel{ margin-top:.75rem; }
.corner-comment-form{ display:flex; flex-direction:column; gap:.75rem; }
.corner-comment-textarea{
  width:100%; min-height:140px; padding:.75rem; border:1px solid #c7c7c7; border-radius:6px;
  font-size:1rem; line-height:1.6; resize:vertical; box-sizing:border-box;
}
.corner-comment-textarea[readonly]{ background:#f5f5f5; color:#555; }
.corner-comment-actions{ display:flex; gap:.5rem; }
.corner-comment-message{ margin:0; font-size:.9rem; }
.corner-comment-message.is-success{ color:#2e7d32; }
.corner-comment-message.is-error{ color:#c0392b; }

.gallery-page .expire-info{ font-size:.9rem; }

.gallery-page .c-btn.grad-blue{
  background:linear-gradient(to right, rgba(24,125,221,1) 0%, rgba(0,195,193,1) 100%);
  background-size:200% 100%;
  border:1px solid var(--brand);
  color:#fff; font-family:"Yu Gothic","游ゴシック","Meiryo","MS PGothic",sans-serif;
  font-weight:bold; padding:.5em 1em; margin:0 10px .8rem 10px !important;
  border-radius:5px; box-shadow:0 4px 10px -8px #36a3f7; cursor:pointer; font-size:.8em;
  outline:none; transition:all .1s ease-in-out; text-decoration:none; text-align:center; display:inline-block;
}
.gallery-page .c-btn.grad-blue:hover{ box-shadow:1px 3px 10px rgba(0,0,0,.3); }
.gallery-page .c-btn.grad-blue:active{ transform:translate(1px,1px); box-shadow:0 2px 4px rgba(0,0,0,.2); }
.gallery-page .icon-inline{ vertical-align:middle; }

/* Gallery card 内ボタンのレイアウト差分のみ */
.gallery-page .image-gallery .image-card .c-btn.grad-blue{
  width:80%; margin:0 auto .8rem !important; box-sizing:border-box; display:block;
}

.gallery-page .modal{ background:rgba(0,0,0,.85); z-index:9999; }
.gallery-page #modal-img{ max-width:90%; max-height:80%; padding-bottom:20px; }
.gallery-page .nav-btn{ background:rgba(255,255,255,.3); font-size:2rem; padding:.5rem; z-index:10001; }
.gallery-page #download-btn{ bottom:20px; margin:0 !important; }
.gallery-page .close-modal-btn{
  background:#808080; color:#fff; border:none; padding:.5rem 1rem; border-radius:4px; cursor:pointer;
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 768px){
  .tabs{ display:none; }
  .mobile-tab-select{ display:block; }

  .gallery-page .footer-pagination{ margin-bottom:4rem; }
  .gallery-page .header{
    flex-direction:column; align-items:stretch; gap:.75rem; padding:0 1rem;
  }
  .gallery-page .header-left{ width:100%; }
  .gallery-page .header-left h2{ font-size:1.3rem; }
  .gallery-page .corner-message{ font-size:.9rem; }
  .gallery-page .header-right{
    width:100%; margin-left:0; align-items:flex-start; flex-direction:column; gap:.3rem;
  }
  .gallery-page .header-right .preview-notice{ margin-left:0; margin-right:0; }
  .gallery-page .expire-info{ font-size:.85rem; }
}

@media (max-width: 600px){
  .corner-comment-section{ margin:1rem .5rem; padding:.75rem; }
  .corner-comment-summary{ font-size:1rem; }
  .corner-comment-textarea{ min-height:120px; }

  /* Pagination のモバイル表現 */
  .pagination .page-btn{ display:none; }
  .pagination a.page-btn:nth-of-type(2),
  .pagination a.page-btn:nth-last-of-type(2){
    display:flex; justify-content:center; align-items:center;
    width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; border:none;
  }
  .pagination a.page-btn:nth-of-type(2):hover,
  .pagination a.page-btn:nth-last-of-type(2):hover{ background:#3a6edc; }
  .pagination .page-btn.active{
    display:flex; align-items:center; justify-content:center;
    border:none; background:none; pointer-events:none; color:transparent; padding:0 8px; width:auto; height:auto;
  }
  .pagination .page-btn.active::before{
    content: attr(data-page) " / " attr(data-total);
    color:var(--text);
  }
}