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

html {
  scroll-behavior: smooth;
}

/*
  固定ヘッダーやハンバーガーボタンと重なる場合、
  スクロール先を少し下へずらす
*/
.comic-section {
  scroll-margin-top: 30px;
}


/* =========================================
   通常ヒーロー
========================================= */

.hero {
  position: relative;
  min-height: 330px;
  padding: 16px 20px 40px;
  text-align: center;

  background:
    radial-gradient(
      #ffcf85 18%,
      transparent 19%
    ) 0 0 / 18px 18px,
    #ffad5c;
}

.hero::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -1px;

  width: 100%;
  height: 90px;

  background: #fff88a;

  clip-path: polygon(
    0 45%,
    25% 65%,
    50% 40%,
    75% 65%,
    100% 45%,
    100% 100%,
    0 100%
  );
}


/* =========================================
   四コマページ上部
========================================= */

.fourcomic-hero {
  position: relative;

  height: 350px;

  margin-bottom: -3px;

  overflow: hidden;
  background: transparent;
}

.fourcomic-wave {
  position: absolute;
  left: 0;
  bottom: -3px;

  display: block;

  width: 100%;
  height: 96px;
}

main {
  margin-top: -3px;
}


/* =========================================
   四コマ選択一覧
========================================= */

.comic-index {
  position: relative;

  padding: 70px 20px 90px;

  text-align: center;

  background:
    #fff88a;
}

.comic-index-heading {
  position: relative;
  z-index: 2;

  display: inline-block;

  margin: 0 auto 18px;
  padding: 8px 32px;

  color: #9a3c22;

  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.06em;

  border-top: 3px dotted #c97b3f;
  border-bottom: 3px dotted #c97b3f;
}

.comic-index-description {
  margin: 0 auto 45px;

  color: #9a3c22;

  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
}

.comic-index-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;

  gap: 42px;
}

.comic-index-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 200px;

  color: #9a3c22;
  text-decoration: none;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.comic-index-item:hover {
  transform: translateY(-9px) rotate(-2deg);
  filter: brightness(1.04);
}

.comic-index-item:focus-visible {
  outline: 4px solid #9a3c22;
  outline-offset: 8px;
  border-radius: 24px;
}


/* =========================================
   1コマ切り抜きアイコン
========================================= */

.comic-icon {
  position: relative;

  display: block;

  width: 190px;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #fff;

  border: 7px solid #fff;
  border-radius: 50%;

  box-shadow:
    0 8px 0 #d4773f,
    0 16px 28px rgba(111, 54, 27, 0.22);
}

/*
  元の4コマ画像を丸い枠の中へ配置する
*/
.comic-icon-img {
  position: absolute;
  left: 50%;

  display: block;

  width: 105%;
  height: auto;
  max-width: none;

  transform: translateX(-50%);

  transition:
    width 0.3s ease,
    filter 0.3s ease;
}

.comic-index-item:hover .comic-icon-img {
  width: 112%;
  filter: saturate(1.05);
}


/* =========================================
   アイコン内で見せる位置
========================================= */

/*
  4コマ漫画画像の上側を見せる設定。

  topの数値を変更すると、
  アイコン内で表示される場所を調整できます。

  例：
  top: 0%;
  top: -20%;
  top: -40%;
  top: -70%;
*/

/* その1 */
.comic-icon-img01 {
  top: 0;
}

/* その2 */
.comic-icon-img02 {
  top: 0;
}

/* その3 */
.comic-icon-img03 {
  top: 0;
}

/* その4 */
.comic-icon-img04 {
  top: 0;
}

/* その5 */
.comic-icon-img05 {
  top: 0;
}


/* =========================================
   アイコン下のラベル
========================================= */

.comic-index-label {
  display: inline-block;

  margin-top: 19px;
  padding: 7px 26px;

  color: #9a3c22;

  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;

  background: #fff;

  border: 3px solid #f2a159;
  border-radius: 999px;

  box-shadow: 0 5px 0 #d4773f;
}


/* =========================================
   上部共通
========================================= */

.topbar {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  color: white;

  font-size: 12px;
  font-weight: bold;
}

h1 {
  position: relative;
  z-index: 2;

  margin-top: 130px;

  font-size: clamp(22px, 6vw, 34px);
  letter-spacing: 0.08em;
}

.thumbs {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: center;

  gap: 10px;

  margin-top: 22px;
}

.thumbs div {
  width: 70px;
  height: 64px;

  background: #d9d9d9;
}


/* =========================================
   四コマセクション
========================================= */

.comic-section {
  position: relative;

  min-height: 760px;
  padding: 90px 20px 100px;

  text-align: center;
}

.yellow {
  background: #fff88a;
}

.orange {
  background: #ffb65f;
}

.diagonal-orange {
  background:
    linear-gradient(
      28deg,
      #ffb65f 0 42%,
      transparent 42%
    ),
    #fff88a;
}

.diagonal-yellow {
  background:
    linear-gradient(
      155deg,
      #fff88a 0 36%,
      transparent 36%
    ),
    #ffb65f;
}


/* =========================================
   四コマタイトル
========================================= */

.comic-section h2 {
  position: relative;
  z-index: 5;

  display: inline-block;

  margin: 0 auto 30px;
  padding: 4px 30px;

  color: #9a3c22;

  font-size: 35px;
  font-weight: bold;
  line-height: 1.5;

  border-top: 2px dotted #c97b3f;
  border-bottom: 2px dotted #c97b3f;
}


/* =========================================
   四コマ画像
========================================= */

.comic-box {
  position: relative;
  z-index: 3;

  width: min(700px, 92%);

  margin: 40px auto 0;

  overflow: hidden;

  background: #fff;

  border-radius: 24px;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.12);
}

.comic-img {
  display: block;

  width: 100%;
  height: auto;

  cursor: pointer;

  transition: transform 0.3s ease;
}


/* =========================================
   モーダル
========================================= */

.comic-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

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

  background: rgba(0, 0, 0, 0.7);
}

.comic-modal.is-open {
  display: flex;
}

.comic-modal-img {
  max-width: 80vw;
  max-height: 85vh;

  background: #fff;

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.comic-modal-img.is-changing {
  opacity: 0;

  transform:
    translateX(24px)
    scale(0.96);
}

.comic-modal-close,
.comic-modal-arrow {
  position: absolute;

  color: #9f4826;

  font-weight: 800;

  cursor: pointer;

  background: #fff;

  border: none;
}

.comic-modal-close {
  top: 30px;
  right: 40px;

  width: 54px;
  height: 54px;

  font-size: 34px;

  border-radius: 50%;
}

.comic-modal-arrow {
  width: 60px;
  height: 60px;

  font-size: 30px;

  border-radius: 50%;
}

.comic-modal-prev {
  left: 40px;
}

.comic-modal-next {
  right: 40px;
}


/* =========================================
   装飾画像
========================================= */

.deco {
  position: absolute;
  z-index: 1;

  width: 200px;

  pointer-events: none;
}

.comic-deco01 {
  top: 120px;
  left: 1%;

  width: 330px;

  transform: rotate(-18deg);
}

.comic-deco02 {
  top: 360px;
  right: 8%;
  left: auto;

  width: 180px;

  transform: rotate(10deg);
}

.comic-deco03 {
  top: 720px;
  left: 8%;

  width: 220px;

  transform: rotate(18deg);
}

.comic-deco04 {
  top: 760px;
  right: 8%;
  left: auto;

  width: 230px;

  transform: rotate(10deg);
}

.rabbit-car {
  top: 70px;
  left: 35px;

  width: 145px;
}

.crab-top {
  top: 120px;
  right: 35px;

  width: 95px;
}

.left {
  left: 6%;
}

.right {
  right: 6%;
}

.small {
  top: 35%;

  width: 85px;
}

.big {
  top: 18%;

  width: 150px;
}

.bottom {
  top: auto;
  bottom: 12%;
}

.comic-section:nth-child(even) .left {
  transform: rotate(-10deg);
}

.comic-section:nth-child(odd) .right {
  transform: rotate(12deg);
}


/* =========================================
   タブレット
========================================= */

@media (max-width: 900px) {

  .comic-index {
    padding: 60px 18px 80px;
  }

  .comic-index-list {
    gap: 35px 25px;
  }

  .comic-index-item {
    width: 180px;
  }

  .comic-icon {
    width: 170px;
  }

  .comic-section {
    min-height: auto;
    padding: 80px 18px 95px;
  }
}


/* =========================================
   スマホレイアウト
========================================= */

@media (max-width: 600px) {

  /* =========================
     ヒーロー
  ========================= */

  .hero {
    min-height: 260px;
    padding: 14px 12px 34px;

    overflow: hidden;
  }

  .hero::after {
    height: 55px;

    clip-path: polygon(
      0 45%,
      25% 65%,
      50% 38%,
      75% 65%,
      100% 45%,
      100% 100%,
      0 100%
    );
  }

  .fourcomic-hero {
    height: 280px;

    margin-bottom: -2px;
  }

  .fourcomic-wave {
    bottom: -2px;

    height: 65px;
  }

  main {
    margin-top: -2px;
  }


  /* =========================
     四コマ選択一覧
  ========================= */

  .comic-index {
    padding: 45px 12px 70px;
  }

  .comic-index-heading {
    max-width: calc(100% - 20px);

    margin-bottom: 14px;
    padding: 6px 14px;

    font-size: clamp(22px, 7vw, 29px);
  }

  .comic-index-description {
    margin-bottom: 32px;

    font-size: 16px;
  }

  .comic-index-list {
    gap: 28px 14px;
  }

  .comic-index-item {
    width: calc(50% - 12px);
    max-width: 155px;
  }

  .comic-icon {
    width: min(38vw, 145px);

    border-width: 5px;

    box-shadow:
      0 6px 0 #d4773f,
      0 11px 18px rgba(111, 54, 27, 0.18);
  }

  .comic-index-label {
    margin-top: 15px;
    padding: 5px 18px;

    font-size: 17px;

    border-width: 2px;

    box-shadow: 0 4px 0 #d4773f;
  }


  /* =========================
     上部共通
  ========================= */

  .topbar {
    align-items: flex-start;
  }

  .logo {
    font-size: 10px;
  }

  h1 {
    margin-top: 105px;
    padding: 0 12px;

    font-size: clamp(21px, 7vw, 28px);
    line-height: 1.4;
    letter-spacing: 0.06em;
  }

  .thumbs {
    gap: 7px;

    margin-top: 18px;
  }

  .thumbs div {
    width: 52px;
    height: 48px;
  }


  /* =========================
     四コマセクション
  ========================= */

  .comic-section {
    min-height: auto;
    padding: 70px 12px 100px;

    overflow: hidden;

    scroll-margin-top: 20px;
  }

  .comic-section h2 {
    max-width: calc(100% - 24px);

    margin: 0 auto 20px;
    padding: 5px 16px;

    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.4;

    border-top-width: 2px;
    border-bottom-width: 2px;
  }


  /* =========================
     四コマ画像
  ========================= */

  .comic-box {
    width: min(94vw, 520px);

    margin: 24px auto 0;

    overflow: hidden;

    border-radius: 16px;

    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.12);
  }

  .comic-img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
  }


  /* =========================
     背景切り替え
  ========================= */

  .diagonal-orange {
    background:
      linear-gradient(
        28deg,
        #ffb65f 0 35%,
        transparent 35%
      ),
      #fff88a;
  }

  .diagonal-yellow {
    background:
      linear-gradient(
        155deg,
        #fff88a 0 30%,
        transparent 30%
      ),
      #ffb65f;
  }


  /* =========================
     装飾画像
  ========================= */

  .deco {
    z-index: 2;

    width: 70px;
    height: auto;

    opacity: 0.9;
  }

  .comic-deco01 {
    top: 105px;
    left: -30px;

    width: 105px;

    transform: rotate(-15deg);
  }

  .comic-deco02 {
    top: 310px;
    right: -8px;
    left: auto;

    width: 72px;

    transform: rotate(10deg);
  }

  .comic-deco03 {
    top: auto;
    bottom: 42px;
    left: -5px;

    width: 82px;

    transform: rotate(14deg);
  }

  .comic-deco04 {
    top: auto;
    right: -4px;
    bottom: 25px;
    left: auto;

    width: 90px;

    transform: rotate(8deg);
  }

  .rabbit-car {
    top: 65px;
    left: -8px;

    width: 90px;
  }

  .crab-top {
    top: 95px;
    right: -4px;

    width: 65px;
  }

  .left {
    left: -10px;
  }

  .right {
    right: -10px;
  }

  .small {
    top: 32%;

    width: 58px;
  }

  .big {
    top: 16%;

    width: 90px;
  }

  .bottom {
    top: auto;
    bottom: 6%;
  }


  /* =========================
     モーダル
  ========================= */

  .comic-modal {
    padding: 64px 10px 24px;
  }

  .comic-modal-img {
    width: auto;
    max-width: 94vw;
    height: auto;
    max-height: 80vh;

    object-fit: contain;

    border-radius: 10px;
  }

  .comic-modal-close {
    top: 12px;
    right: 12px;

    width: 42px;
    height: 42px;

    font-size: 26px;
  }

  .comic-modal-arrow {
    width: 44px;
    height: 44px;

    font-size: 22px;

    background: rgba(255, 255, 255, 0.92);
  }

  .comic-modal-prev {
    left: 8px;
  }

  .comic-modal-next {
    right: 8px;
  }
}


/* =========================================
   かなり小さいスマホ
========================================= */

@media (max-width: 380px) {

  .comic-index-list {
    gap: 25px 10px;
  }

  .comic-index-item {
    width: calc(50% - 8px);
  }

  .comic-icon {
    width: min(39vw, 135px);
  }

  .comic-index-label {
    padding: 5px 15px;

    font-size: 16px;
  }
}