/* ==================================================
   base.css（整理済み・引き継ぎやすい版）
   ================================================== */

/* =====================================
   1. 基本設定
===================================== */

:root {
   /* SP固定ヘッダー高さ */
   --header-height: 60px;
}

html {
   font-size: 100%; /* 16px */
}

body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   line-height: 1.6;
   color: #333;
   background-color: #fff;
}

/* ===== box-sizing を全要素に適用 ===== */
/* *,
*::before,
*::after {
   box-sizing: border-box;
} */

/* =====================================
   2. 見出し
===================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: bold;
   line-height: 1.3;
   margin-bottom: 0.5em;
}

h1 {
   font-size: 1.8rem;
}

h2 {
   font-size: 1.4rem;
}

h3 {
   font-size: 1.2rem;
}

.small-text {
   font-size: small;
   font-weight: normal;
}
/* =====================================
   3. テキスト
===================================== */

p {
   margin-bottom: 1em;
}

small {
   font-size: 0.85em;
}

body.is-fixed {
   overflow: hidden;
}

.wbr {
   display: inline-block;
   /* display: block; */
   /* display: inline; */
}

/* =====================================
   NEWラベル（is-newがある時だけ）
===================================== */

.sitemap-list .album p.is-new {
   padding-left: 3em;
}
.sitemap-list .album p.is-new::before {
   content: 'New';
   position: absolute;
   left: 0;
   /* top: 2.6em; */
   height: 1.6em;
   display: flex;
   align-items: center;
   font-size: 0.75rem;
   color: #fff;
   background: #ff4b4b;
   padding: 0 5px;
   border-radius: 5px;
}

/* =====================================
   紫の矢印
===================================== */
.arrow-right::before {
   content: '▶︎';
   color: #b4b4f0;
   padding-right: 0.3em;
}

/* =====================================
   4. リンク
===================================== */

a {
   color: #0066cc;
   /* text-decoration: underline; */
   text-decoration: none;
   transition: opacity 0.2s ease;
}

a:hover {
   opacity: 0.7;
}

a.linkcolor-none {
   color: #333;
}

/* =====================================
   5. セマンティック要素
===================================== */

header,
main,
section,
nav,
footer,
article {
   display: block;
}

/* =====================================
   6. 画像
===================================== */

img {
   max-width: 100%;
   height: auto;
   vertical-align: bottom; /* 画像下のスペース削除 */
}

/* =====================================
   7. リスト
===================================== */

ul,
ol {
   padding-left: 1.5em;
   margin-bottom: 1em;
}

li {
   margin-bottom: 0.3em;
}

/* =====================================
   8. フォーム
===================================== */

input,
textarea,
select {
   padding: 0.4em 0.6em;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-family: inherit;
   font-size: 1rem;
}

button {
   padding: 0.4em 1em;
   border-radius: 4px;
   border: 1px solid #ccc;
   background-color: #f5f5f5;
   cursor: pointer;
   font-family: inherit;
}

button:hover {
   opacity: 0.8;
}

/* =====================================
   9. テーブル
===================================== */

table {
   width: 100%;
   border-collapse: collapse;
}

th,
td {
   padding: 0.5em;
   border: 1px solid #ccc;
   text-align: left;
}

/* =====================================
   10. ユーティリティ
===================================== */

.text-center {
   text-align: center;
}

.text-right {
   text-align: right;
}

.hidden {
   display: none;
}

/* =====================================
   11. レスポンシブ文字サイズ（任意）
===================================== */

@media (max-width: 768px) {
   body {
      font-size: 0.95rem;
   }

   h1 {
      font-size: 1.5rem;
   }

   h2 {
      font-size: 1.2rem;
   }
   /* body.is-fixed {
      overflow: hidden;
   } */
}