/* =========================================================
   夜送舟艇のプリン艇団
   あとがきページ
========================================================= */


/* =========================================================
   基本設定
========================================================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  padding: 0;

  min-width: 320px;

  color: #25293a;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  line-height: 1.9;

  background-color: #07122f;

  background-image:
    linear-gradient(
      rgba(4, 10, 35, 0.10),
      rgba(4, 10, 35, 0.23)
    ),
    url("yasou-novel-bg.png");

  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;

  overflow-x: hidden;
}


/* =========================================================
   ページ全体
========================================================= */

.site-wrapper {
  width: 100%;
  min-height: 100vh;

  padding:
    60px
    20px
    50px;
}


/* =========================================================
   作品ヘッダー
========================================================= */

.novel-header {
  width: 100%;
  max-width: 920px;

  margin:
    0 auto
    30px;

  text-align: center;

  color: #f7f8ff;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.75),
    0 0 20px rgba(125, 145, 255, 0.25);
}


.novel-header__label {
  margin:
    0 0
    12px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 0.72rem;

  letter-spacing: 0.24em;

  color: #c9d3ff;
}


.novel-header__title {
  margin: 0;

  font-size:
    clamp(
      1.85rem,
      5vw,
      3rem
    );

  font-weight: 500;

  letter-spacing: 0.12em;
}


.novel-header__author {
  margin:
    18px 0
    0;

  color: #e5e8fa;

  font-size: 0.95rem;

  letter-spacing: 0.2em;
}


/* =========================================================
   上部ナビゲーション
========================================================= */

.site-nav {
  display: flex;

  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  width: 100%;
  max-width: 900px;

  margin:
    0 auto
    26px;
}


.site-nav a {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 110px;

  padding:
    8px
    18px;

  border:
    1px solid
    rgba(218, 225, 255, 0.65);

  border-radius: 999px;

  background:
    rgba(13, 25, 69, 0.78);

  color: #f4f6ff;

  font-size: 0.78rem;

  letter-spacing: 0.12em;

  text-decoration: none;

  box-shadow:
    0 4px 16px
    rgba(0, 0, 0, 0.25);

  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}


.site-nav a:hover {
  background:
    rgba(50, 63, 125, 0.92);

  border-color:
    rgba(255, 255, 255, 0.9);

  transform:
    translateY(-2px);
}


/* =========================================================
   あとがき用紙
========================================================= */

.afterword-paper {
  position: relative;

  width: 100%;
  max-width: 880px;

  margin:
    0 auto;

  padding:
    clamp(38px, 7vw, 75px)
    clamp(22px, 7vw, 85px);

  background:
    rgba(247, 248, 252, 0.97);

  border:
    1px solid
    rgba(220, 225, 241, 0.95);

  border-radius: 10px;

  box-shadow:
    0 18px 55px
    rgba(0, 0, 25, 0.52),
    inset
    0 0 40px
    rgba(120, 135, 175, 0.06);

  overflow: hidden;
}


.afterword-paper::before {
  content: "";

  position: absolute;

  inset: 12px;

  pointer-events: none;

  border:
    1px solid
    rgba(104, 116, 158, 0.16);

  border-radius: 6px;
}


/* =========================================================
   あとがきヘッダー
========================================================= */

.afterword-header {
  position: relative;

  margin:
    0 auto
    50px;

  padding-bottom: 28px;

  text-align: center;
}


.afterword-header::after {
  content: "";

  display: block;

  width: 120px;
  height: 1px;

  margin:
    25px auto
    0;

  background:
    linear-gradient(
      to right,
      transparent,
      #7882ad,
      transparent
    );
}


.afterword-header__english {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  color: #69759d;

  font-size: 0.72rem;

  letter-spacing: 0.32em;
}


.afterword-header__title {
  margin:
    12px 0
    0;

  color: #252e55;

  font-size:
    clamp(
      1.8rem,
      5vw,
      2.55rem
    );

  font-weight: 500;

  letter-spacing: 0.16em;
}


.afterword-header__subtitle {
  margin:
    14px 0
    0;

  color: #687394;

  font-size: 0.88rem;

  letter-spacing: 0.12em;
}


.afterword-header__ornament {
  margin-top: 20px;

  color: #848eb5;

  font-size: 0.8rem;

  letter-spacing: 0.6em;
}


/* =========================================================
   冒頭コラージュ
========================================================= */

.afterword-opening-art {
  position: relative;

  width: 100%;
  max-width: 760px;

  margin:
    0 auto
    70px;

  padding:
    30px 0
    34px;

  text-align: center;

  border-top:
    1px solid
    rgba(100, 112, 160, 0.22);

  border-bottom:
    1px solid
    rgba(100, 112, 160, 0.22);
}


.afterword-opening-art__label {
  margin:
    0 0
    22px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  color: #69759d;

  font-size: 0.68rem;

  letter-spacing: 0.28em;
}


.afterword-opening-art__image {
  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;

  margin:
    0 auto;

  border-radius: 6px;

  box-shadow:
    0 16px 40px
    rgba(20, 24, 49, 0.25);
}


.afterword-opening-art__caption {
  margin:
    22px 10px
    0;

  color: #586184;

  font-size: 0.84rem;

  letter-spacing: 0.08em;

  line-height: 1.9;
}


/* =========================================================
   あとがき本文
========================================================= */

.afterword-text {
  position: relative;

  width: 100%;
  max-width: 720px;

  margin:
    0 auto;

  color: #292d3a;

  font-size:
    clamp(
      1rem,
      1.5vw,
      1.08rem
    );

  line-height: 2.15;

  letter-spacing: 0.035em;

  text-align: justify;

  text-justify: inter-ideograph;

  word-break: normal;

  overflow-wrap: anywhere;
}


.afterword-text p {
  margin:
    0 0
    1.85em;
}


/* =========================================================
   あとがき小見出し
========================================================= */

.afterword-section-title {
  position: relative;

  margin:
    70px 0
    35px;

  padding-bottom: 15px;

  color: #38436f;

  font-size:
    clamp(
      1.15rem,
      3vw,
      1.35rem
    );

  font-weight: 500;

  letter-spacing: 0.1em;

  text-align: center;
}


.afterword-section-title::after {
  content: "";

  display: block;

  width: 70px;
  height: 1px;

  margin:
    15px auto
    0;

  background:
    linear-gradient(
      to right,
      transparent,
      #a6aec9,
      transparent
    );
}


/* =========================================================
   作者署名
========================================================= */

.afterword-signature {
  width: 100%;
  max-width: 520px;

  margin:
    80px auto
    0;

  text-align: center;
}


.afterword-signature__thanks {
  margin:
    0 0
    22px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  color: #7781a5;

  font-size: 0.72rem;

  font-style: italic;

  letter-spacing: 0.12em;
}


.afterword-signature__line {
  width: 80px;
  height: 1px;

  margin:
    0 auto
    22px;

  background:
    linear-gradient(
      to right,
      transparent,
      #929bb9,
      transparent
    );
}


.afterword-signature__name {
  margin: 0;

  color: #3f496e;

  font-size: 1rem;

  letter-spacing: 0.22em;
}


/* =========================================================
   区切り
========================================================= */

.afterword-divider {
  display: flex;

  justify-content: center;

  gap: 18px;

  margin:
    75px auto
    55px;

  color: #7c86ad;

  font-size: 0.82rem;
}


/* =========================================================
   読了ご褒美
   夜送舟艇・特別乗船便
========================================================= */

.afterword-reward {
  position: relative;

  width: 100%;
  max-width: 760px;

  margin:
    0 auto
    65px;

  padding:
    32px 0
    36px;

  text-align: center;

  border-top:
    1px solid
    rgba(100, 112, 160, 0.24);

  border-bottom:
    1px solid
    rgba(100, 112, 160, 0.24);
}


.afterword-reward__eyebrow {
  margin:
    0 0
    13px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  color: #6a759b;

  font-size: 0.67rem;

  letter-spacing: 0.28em;
}


.afterword-reward__title {
  margin:
    0 0
    15px;

  color: #354168;

  font-size:
    clamp(
      1.15rem,
      3vw,
      1.45rem
    );

  font-weight: 500;

  letter-spacing: 0.1em;
}


.afterword-reward__stars {
  margin:
    0 0
    24px;

  color: #8993b9;

  font-size: 0.82rem;

  letter-spacing: 0.6em;
}


.afterword-reward__image {
  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;

  margin:
    0 auto;

  border-radius: 6px;

  box-shadow:
    0 18px 42px
    rgba(16, 22, 52, 0.29);
}


.afterword-reward__caption {
  margin:
    24px 10px
    0;

  color: #596384;

  font-size: 0.86rem;

  letter-spacing: 0.08em;

  line-height: 1.9;
}


/* =========================================================
   最後のメッセージ
========================================================= */

.afterword-finale {
  width: 100%;
  max-width: 600px;

  margin:
    65px auto
    50px;

  text-align: center;
}


.afterword-finale__ornament {
  margin-bottom: 18px;

  color: #8790b2;

  font-size: 0.88rem;
}


.afterword-finale__message {
  margin:
    0 0
    12px;

  color: #39446d;

  font-size:
    clamp(
      1.05rem,
      3vw,
      1.25rem
    );

  letter-spacing: 0.12em;
}


.afterword-finale__sub {
  margin: 0;

  color: #747c98;

  font-size: 0.8rem;

  letter-spacing: 0.06em;
}


/* =========================================================
   戻るリンク
========================================================= */

.return-links {
  display: flex;

  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;

  width: 100%;

  margin-top: 45px;
}


.return-links a {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 155px;

  padding:
    10px
    18px;

  border:
    1px solid
    #bcc4de;

  border-radius: 999px;

  background:
    #f2f4fa;

  color: #46517c;

  font-size: 0.78rem;

  text-decoration: none;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}


.return-links a:hover {
  background:
    #e6eafa;

  transform:
    translateY(-1px);
}


/* =========================================================
   フッター
========================================================= */

.site-footer {
  width: 100%;
  max-width: 900px;

  margin:
    35px auto
    0;

  text-align: center;

  color:
    rgba(242, 245, 255, 0.82);

  font-size: 0.72rem;

  letter-spacing: 0.09em;

  text-shadow:
    0 2px 6px
    rgba(0, 0, 0, 0.8);
}


.site-footer p {
  margin:
    5px 0;
}


/* =========================================================
   タブレット・スマートフォン
========================================================= */

@media screen and (max-width: 700px) {

  body {
    background-attachment: scroll;
    background-position: center top;
  }


  .site-wrapper {
    padding:
      28px
      10px
      35px;
  }


  .novel-header {
    margin-bottom: 22px;
  }


  .novel-header__title {
    letter-spacing: 0.07em;
  }


  .novel-header__label {
    letter-spacing: 0.16em;
  }


  .afterword-paper {
    width: 100%;

    padding:
      35px
      20px
      45px;

    border-radius: 6px;
  }


  .afterword-paper::before {
    inset: 7px;
  }


  .afterword-header {
    margin-bottom: 40px;
  }


  /* -----------------------------------------
     冒頭コラージュ
  ----------------------------------------- */

  .afterword-opening-art {
    width: 100%;
    max-width: 100%;

    margin:
      0 auto
      55px;

    padding:
      24px 0
      28px;
  }


  .afterword-opening-art__image {
    width: 100%;
    max-width: 100%;
    height: auto;

    border-radius: 4px;
  }


  .afterword-opening-art__caption {
    margin-top: 18px;

    padding:
      0 5px;

    font-size: 0.78rem;
  }


  /* -----------------------------------------
     本文
  ----------------------------------------- */

  .afterword-text {
    width: 100%;
    max-width: 100%;

    font-size: 1rem;

    line-height: 2.05;

    letter-spacing: 0.02em;

    text-align: left;
  }


  .afterword-text p {
    margin-bottom: 1.7em;
  }


  .afterword-section-title {
    margin-top: 55px;
  }


  /* -----------------------------------------
     作者署名
  ----------------------------------------- */

  .afterword-signature {
    margin-top: 65px;
  }


  /* -----------------------------------------
     特別乗船便
  ----------------------------------------- */

  .afterword-reward {
    width: 100%;
    max-width: 100%;

    margin:
      0 auto
      55px;

    padding:
      26px 0
      30px;
  }


  .afterword-reward__title {
    padding:
      0 5px;
  }


  .afterword-reward__image {
    width: 100%;
    max-width: 100%;
    height: auto;

    border-radius: 4px;
  }


  .afterword-reward__caption {
    margin-top: 18px;

    padding:
      0 5px;

    font-size: 0.78rem;
  }


  /* -----------------------------------------
     最終メッセージ
  ----------------------------------------- */

  .afterword-finale {
    margin:
      55px auto
      40px;
  }


  /* -----------------------------------------
     戻るリンク
  ----------------------------------------- */

  .return-links {
    flex-direction: column;

    align-items: stretch;

    gap: 10px;
  }


  .return-links a {
    width: 100%;
  }

}


/* =========================================================
   小さいスマートフォン
========================================================= */

@media screen and (max-width: 390px) {

  .site-wrapper {
    padding-left: 8px;
    padding-right: 8px;
  }


  .afterword-paper {
    padding:
      32px
      16px
      40px;
  }


  .afterword-text {
    font-size: 0.97rem;
  }


  .afterword-header__title {
    letter-spacing: 0.1em;
  }


  .afterword-opening-art__label,
  .afterword-reward__eyebrow {
    font-size: 0.61rem;

    letter-spacing: 0.16em;
  }


  .afterword-reward__title {
    font-size: 1.05rem;
  }


  .afterword-opening-art__caption,
  .afterword-reward__caption {
    font-size: 0.76rem;
  }

}