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


  --color-h2:        #ecebe8;
  --color-h3:        #444444;

  --color-spoit1:    #F2EBDB;
  --color-spoit2:    #6D777E;
  --color-spoit3:    #DEC699;

  /* Links */
  --link:            #634c2f;
  --link-hover:      #1D1F27;
  --link-active:     #CBAF81;

  /* Links(2) */
  --series-link:            #a5c9d6;
  --series-link-hover:      #cde6f2;
  --series-link-active:     #8bb0be;
  
  /* frame */
  --frame-outline:         #e6e5e3;
  
  /* 中長編背景色start */
  --long-bg-start:         #c1c2bc;
  
  /* 短編見出し(h3) */
  --other-h3:              #a7906b;

  /* scrollbar */
  --scrollbar-bg:          #DABF8B;
  --scrollbar-bar:         #000000;

  /* update */
  --update-bg:             #cfd0c9;
  --update-scrollbar-track:#cfd0c9;
  --update-scrollbar-thumb:#777777;

  /* footer */
  --footer-bg:             #cfd0ca;

}



/* ============ここからリセット============  */
*, *::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;
}
/* ============ここまでリセット============ */



/*------------------ ◆全体の総括設定 ------------------*/
html, body { height: 100%; }

body {
  font-size: .9rem;
  background-color: var(--color-black);
  padding: 20px;
}

small {
  font-size: .85rem;
}

.smallmute {
  color: var(--color-muted);
}

/* ページの大枠構成 */
.frame{
  outline: 1px solid var(--frame-outline);
  background-color: var(--color-bg);
}
.layout{
  min-height: calc(100dvh - 40px);
  display:grid;
  grid-template-columns: 500px 1fr;
  gap:10px;
}

/* 見出し関係(h2) */
h2 {
  font-size: 1.1rem;
  border-bottom: solid 1px var(--color-h2);
  position: relative;
  margin:2rem 0 .6rem 0;
}
h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 1px var(--color-black);
  bottom: -1px;
  width: 10%;
}


/*------------------ ◆ページ全体へのリンク設定 ------------------*/
/* ベース */
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);
}


/* seriesボックスのみの配色 */
.series h3 a{
  font-weight: 400;
  color: var(--series-link);
  text-decoration: none;
  text-underline-offset: 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-bottom-color .2s ease;
}
.series h3 a:hover,
.series h3 a:focus{
  color: var(--series-link-hover);
  border-bottom: 1px solid currentColor;
  outline: none;
}
.series h3 a:active{
  color: var(--series-link-active);
}



/* -------------------更新履歴の設定------------------- */

/* スクロールバーの出る更新履歴 */
.update {
  margin: 1rem 0 0 0;
}

.update-log {
  max-height: 120px;
  overflow-y: auto;
  padding: .5rem 1rem;
  border: 1px solid var(--frame-outline);
  border-radius: 6px;
  background: var(--update-bg);
  line-height: 1.4;
}

.update-log li {
  font-size: .9rem;
  padding: .2rem 0;
}

.update-log time {
  font-weight: 600;
  margin-right: .6em;
  color: var(--color-muted);
}




/* スクロールバーの配色(更新履歴のとこだけ) */
.update-log::-webkit-scrollbar {
  width: 12px;
}
.update-log::-webkit-scrollbar-track {
  background: var(--update-scrollbar-track);
}
.update-log::-webkit-scrollbar-thumb {
  background: var(--update-scrollbar-thumb);
  border-radius: 999px;
}


/* -------------------詳細設定(2カラム)------------------- */

/* 左カラム（PCでは固定） */
.left {
  position: sticky;
  top: 13px;
  height: calc(100vh - 40px);
  background-image: image-set(
    url("images/cacyn-main@1x.webp") 1x,  /* 450px幅 */
    url("images/cacyn-main@2x.webp") 2x   /* 900px幅 */
  );
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right;
  background-size: contain;
}



/*------------------ ◆右カラム main > right (詳細) ------------------*/
/* 基本の全体幅管理(親ボックス) */
.right {
  max-width: 880px;
  margin-right: auto;
  
}

/* 各コンテンツ(0.タグライン) */
.tagline {
  font-size: .8rem;
  line-height: 1.5;
  padding: 5rem .7rem 1rem 2rem;
  font-style: italic;
  letter-spacing: 0.05em;
  opacity: 0.8;
}
    img[src="images/yureruflower.png"] {
      width: 80px;
      height: auto;
      margin:0 0 .5rem .6rem;
    }

/* 各コンテンツ(1.アバウト) */
.about {
  line-height: 1.7;
  padding: 1rem .7rem;
}
.about h2 {
  margin-bottom:1rem;
}
.about p {
  margin: .7rem;
}

/* 各コンテンツ(2.シリーズリスト) */
.long-story {
  line-height: 1.5;
  padding: 1rem .7rem;
  position: relative;
}

/* 各コンテンツ(3.その他リスト) */
.other-story {
  line-height: 1.5;
  padding: 1rem .7rem;
}


/*------------------ ☆リスト詳細(シリーズ) ------------------*/

.series{  /* 右寄せブロック */
  width: min(96%, 830px);     /* ふだん96%、最大830px */
  margin-left: auto;          /* 右寄せ（左余白を自動で広げる） */
  margin-top: 1.7rem;
  padding: 1.2rem .6rem 1.5rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--frame-outline);
  background-size: 150px auto;        /* 横幅固定（縦は比率維持） */
  background: 
  url("images/list-uten.png") no-repeat right bottom / 150px auto,
  linear-gradient(90deg, var(--color-black), #686868);
}
.series h3 {
  border-bottom:1px solid #444444;
  padding-bottom: .3rem;
  letter-spacing: 1.6px;
}
    img[src="images/list-point.png"] {
      display: inline; 
      width: 30px;
      height: auto;
      margin: 0 .3rem 6px 0;
      vertical-align: middle;
    }

p.series-summary {
  font-size: .85rem;
  color: var(--color-white);
  font-weight: 350;
  margin: .7rem 0 0 1rem;
}



/*------------------ ☆リスト詳細(中編～長編) ------------------*/

.long{  /* 右寄せブロック */
  width: min(96%, 830px);     /* ふだん96%、上限830px */
  margin-left: auto;          /* 右寄せ（左余白を自動で広げる） */
  margin-top: 1.7rem;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--frame-outline);
}
.long h4 {
  border-bottom:1px solid #444444;
  padding-bottom: .2rem;
  margin-bottom: .3rem;
  font-size: 1rem;
  letter-spacing: 1px;
  font-weight: 580;
}
.long li {
  padding:0 0 0 .5rem;
}
.long li.title {
  font-size: .85rem;
  color: var(--color-muted);
  font-weight: 430;
}
.long li.each {
  padding-left: 1.5rem;
  padding-top: .7rem;
}
.long-summary{
  color: var(--color-black);
}




/* 「作品名1」 */
.long1 {
  background-size: 150px auto;
  background: 
  url("images/novel-01.webp") no-repeat right bottom / 150px auto,
  linear-gradient(90deg, var(--long-bg-start), #dde3da);
}


/* 「作品名2」 */
.long2 {
  background-size: 150px auto;
  background: 
  url("images/novel-02.webp") no-repeat right bottom / 150px auto,
  linear-gradient(90deg, var(--long-bg-start), #dbe4ea);
}





/*------------------ ☆リスト詳細(短編) ------------------*/
.other{  /* 右寄せブロック */
  width: min(96%, 830px);     /* ふだん96%、上限830px */
  margin-left: auto;          /* 右寄せ（左余白を自動で広げる） */
  margin-top: 1rem;
  padding: .6rem ;
  border-radius: 8px;
}
.other h3 {
  font-size: .95rem;
  font-weight: 500;
  padding-bottom:.2rem;
  margin-bottom:.6rem;
  color: var(--color-h3);
  border-bottom: 1px solid var(--other-h3);
  letter-spacing: .7px;
}
.other-summary {
  color: var(--color-black);
  font-weight: 410;
}
.other-novel-item{
  display:flex;
  align-items:baseline;
  column-gap:.5em;
  flex-wrap:wrap;
}

/* リスト装飾 */
.other-list {
    list-style-type: none;
}

.other-list li {
    display: flex;
    align-items: center;
    gap: 0 10px;
    padding: .3em;
}

.other-list li::before {
    transform: rotate(-45deg);
    width: .4em;
    height: .4em;
    border-bottom: 3px solid var(--color-accent);
    border-right: 3px solid var(--color-accent);
    content: '';
}


/*------------------ ◆フッターの設定 ------------------*/

.footer{
  border-top: 2px dotted var(--color-spoit2);
  padding: 1.5rem 0 .4rem 0;
  margin-top: 6rem;
  color: var(--color-ink);
  background: var(--footer-bg);
}

/* 中央寄せ＆幅制限 */
.footer-inner{
  max-width: 890px;
  margin-inline: auto;
  padding-inline: 1rem;
  font-size: .9rem;
  line-height: 1.6;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% - 50% */
  gap: 3rem;
}
.footer-title{
  font-size: .9rem;
  font-weight: 350;
  margin-bottom: .4rem;
  letter-spacing: .07rem;
  background-color: var(--color-bg);
  text-align: center;
  border-bottom: 1px dotted var(--color-spoit2);
}
.footer-text{
  margin: .3rem 0;
  padding-left: .8rem;
}

.footer-links li {
  display: inline;
  padding-left: 1rem;
}

.footer-contact{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .25rem;
}

/* コピーライト用 */
.copyright{
  display: block;
  text-align: center;
  margin-top: 2.5rem;
  color: var(--color-black);
}




/*------------------ ◆メールフォーム関係の設定 ------------------*/

/* 視覚的に隠す（アクセシビリティ用ラベル） */
.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;
}

/* フォーム一括 */
.mailform{
  display: grid;
  gap: 8px;
  padding: 7px 0;
}

/* 全体トンマナ */
.mailform input,
.mailform textarea{
  width: 100%;
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-bg) 85%, #fff 45%);
  border: 1px solid var(--frame-outline);
  padding: 6px 8px;
  font-size: .95rem;
  line-height: 1.6;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* プレースホルダーは控えめに */
.mailform ::placeholder{
  color: color-mix(in srgb, var(--color-ink) 40%, transparent);
}

/* フォーカス */
.mailform input:focus,
.mailform textarea:focus{
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
  outline: none;
}

/* ボタン */
.mailform .btn{
  justify-self: center;
  display: inline-block;
  padding: 4px 20px;
  margin-top: 3px;
  font-size: .85rem;
  font-weight: 350;
  letter-spacing: .03em;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

/* hover */
.mailform .btn:hover,
.mailform .btn:focus-visible{
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--color-accent) 30%, transparent);
  outline: none;
}

/* active */
.mailform .btn:active{
  transform: translateY(1px);
}



/*------------------ ◆スクロールバーの設定 ------------------*/
/* スクロールバーの幅 */
::-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){   /* モバイル時 */
  .layout{ grid-template-columns: 1fr }

  body {
    font-size: .92rem;
    padding: 0;
  }

  small {
    font-size: .85rem;
  }

  h2 {
    margin-bottom:1rem;
  }

  .left{
    position: static;                    /* sticky解除 */
    height: auto;
    aspect-ratio: 3 / 5.1;                 /* 画像比率に合わせて調整 */
    background-position: center top;
    background-size: contain;
  }

  .right {
    max-width: 100%;
  }

  .tagline {
    font-size: .85rem;
    padding: .5rem 0 5rem 0;
    text-align: center;
  }
        img[src="images/yureruflower.png"] {
        margin-left: auto;
        margin-right: auto;
      }

  .series{
    width: 100%;
    margin-left: 0;
  }

  .other{
    width: 100%;
    margin-left: 0;
  }
  .other-novel-item .other-summary{
    flex-basis:100%; margin-left:1.2em;
  }

  .footer-grid{
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
  }
  .footer-contact{
    margin: 2rem 0;
  }
  .mailform {
    gap: 8px;
  }
  .mailform .btn {
    width: auto;
  }
}

@media (min-width: 901px) {   /* PC時 */
  .layout {
    gap: 32px;
  }
}