/* ================= 基本トンマナroot ================= */
:root{
    /* Base tones */
  --color-bg:        #d9d9d9;      /* 背景色 */
  --color-ink:       #475156;      /* フォント色 */
  --color-muted:     #5b7c90;      /* 低コントラストで補助用 */
  --color-accent:    #0d94bd;      /* アクセント用 */
  --color-white:     #ffffff;
  --color-black:     #1a1b1f;

  --h2-bg:           #cfcfcf;
  --h2-fontcolor:    #000000;
  --h2-accentcolor:  #119eb1;

  --color-work-meta: #333333;

  /* Links */
  --link:            #0d7199;
  --link-hover:      #1D1F27;
  --link-active:     #81cbca;

  /* scrollbar */
  --scrollbar-bg:    #0d94bd;
  --scrollbar-bar:   #d9d9d9;

  /* main内の最大幅 */
  --max: 980px;

}



/* ============ここからリセット============  */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
}
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ============ここまでリセット============ */




/* ベース */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  font-size: .93rem;
  margin:0;
  background-color: var(--color-accent);
  padding: 0 20px;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-ink);
  line-height:1.6;
}

/* 全体骨組み(2カラム) */
.layout{
  display:grid;
  grid-template-columns: 300px 1fr;
  min-height:100vh;
}



/*------------------ ◆ページ全体へのリンク設定 ------------------*/
/* ベース */
a{
  position: relative;
  display: inline-block;              /* ← 横幅用※必須 */
  font-weight: 550;
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 2px;
  border-bottom: 1px solid transparent;     /* 高さ確保用 */
  transition: color .2s ease;
}

a[target="_blank"]::after {
  content: "\00A0↗";                  /* NBSP＋矢印で改行しにくく */
  margin-left: 0;                      /* NBSP入れたのでここは0で */
  font-size: 0.85em;
  display: inline;                     /* テキストと同列 */
  vertical-align: baseline;
}

/* 下線アニメーション */
a::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;                         /* 線の太さ */
  background: currentColor;            /* 文字色と連動 */
  transform: scaleX(0);
  transform-origin: left center;       /* 左から伸びる */
  transition: transform .25s ease;
}

/* ホバー／フォーカス */
a:hover,
a:focus{
  color: var(--link-hover);
  outline: none;
}
a:hover::before,
a:focus::before{
  transform: scaleX(1);
}

a:active{
  color: var(--link-active);
}




/* ============ここから左カラム============  */
.sidebar{
  background: var(--color-bg);
}
.sidebar-inner{
  position: sticky;
  top: 0;
  padding: 1rem;
  text-align: center;
  height: 100dvh;
  overflow: auto;
}
.side-title{
  margin: .25rem 0 .75rem;
  font-size: 1rem;
  font-weight: 700;
}




/* ============ここから右カラム============  */
.main{
  background-color: var(--color-bg);
  padding: 1rem;
}
.main-inner{
  margin: .5rem auto;
  max-width: var(--max);
  padding: 1.25rem;
}



/* ========== h1見出し(筆記体を薄く重ねる) ========== */
.page-title{
  position: relative;
  margin: 1.4rem 0 .9rem;
  font-size: clamp(1.6rem, 3.8vw, 2.4rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: .02em;
}

/* 筆記体を後ろに重ねる */
.page-title::after{
  content: attr(data-accent);
  position: absolute;
  inset: -0.25rem 0 auto 0;    /* 上に少しはみ出す */
  transform: rotate(-5deg);
  transform-origin: left bottom;
  pointer-events: none;
  font-size: clamp(2.8rem, 10vw, 6rem);
  line-height: 1;
  font-weight: 400;
  font-style: italic;
  /* 筆記体：環境依存。なければセリフ体のイタリックで代替される */
  font-family: "Dancing Script", "Allura", "Great Vibes",
               "Yu Mincho", "Hiragino Mincho ProN", serif, cursive;
  color: rgba(0,0,0,.07);      /* 超うす黒で邪魔しない */
}




/* ========== h2見出し（線つける） ========== */
.section-title{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1.2rem 0 .6rem;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  font-weight: 700;
  letter-spacing: .01em;
  background-color: var(--h2-bg);
  color: var(--h2-fontcolor);
}
.section-title::before{
  content:"";
  width: 1.2rem;
  height: 12px;
  background: var(--color-bg);
}

/* articleカード */
.card{
  padding: 0;
  margin-left: 1rem;
}
.card-body{
  padding: 1.2rem 1rem;
  text-align: left;
}



/* ============ 小説リスト(ul,li) =========== */
/* リスト全体 */
.work-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.work-list li {
  display: grid;
  grid-template-columns: 1fr 2.5fr;
  gap: 0rem;
  padding: .2rem 0;
}

.work-title {
  margin: 0;
  padding: 0;
  font-weight: 600;
}

.work-title2 {
  margin: 0;
  padding: 0 2rem 0 0;
  font-weight: 400;
  text-align: right;
}

.work-desc {
  margin: 0 0 0 1rem;
  padding: 0;
  font-weight: 400;
}

.s{ font-size: .85em; color: var(--color-muted); }

/* あらすじとか */
.work-meta {
  font-size: .9em;
  color: var(--color-work-meta);
}



/* footer */
footer {
  margin-top: 2rem;
  text-align: center;
}


/*------------------ ◆スクロールバーの設定 ------------------*/
/* スクロールバーの幅 */
::-webkit-scrollbar {
    width: 14px;
}

/* スクロールバー全体の背景 */
::-webkit-scrollbar-track {
    background-color: var(--scrollbar-bg);
}

/* スクロールバーの動く部分 */
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-bar);
    border-radius: 999px;
}











/* レスポンシブ設定 */
@media (max-width: 900px){
  body {
    padding: 0 8px;
  }
  .layout{ grid-template-columns: 1fr; }
  .sidebar{  
    position: static;
    border-right: none;
    border-bottom: 2px solid #d0d0d0;
  }
  .sidebar-inner{
    position: static;
    height: auto;
  }
  .main{ padding: 1rem; }
  .main-inner{ padding: 0; }
}

/* モバイル：1カラム */
@media (max-width: 720px) {
  .work-list li {
    grid-template-columns: 1fr;
  }
  .work-title2 {
    margin: 0;
    padding: 0;
    font-weight: 400;
    text-align: left;
  }
}