@charset "utf-8";
@layer reset,icon,base, design,main,pinpoint;

@import url("https://fonts.googleapis.com/css2?family=Reggae+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Stick&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Joti+One&display=swap");
@import url("design.css") layer(design);
@import url("pinpoint.css") layer(pinpoint);
@import url("mainstyle.css") layer(main);
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined") layer(icon);
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&display=swap");

@layer reset {
  /**********************/
  :root {
    --reggae-one: "Reggae One", system-ui;
    --bruno-ace-regular: "Bruno Ace", sans-serif;
    --joti-One: "Joti One", system-ui;
    --zen-kaku-gothic-new-regular: "Zen Kaku Gothic New", sans-serif;
    --material-symbols-outlined: "Material Symbols Outlined";
    --M-PLUS-1-Code: "M PLUS 1 Code", monospace;
    --stick: "Stick", sans-serif;
    --yamMainColor: #1f5f5f;
    --yamSubColor: #fafaf6;
    --yamSub2Color: #2b211f;
    --yamSubGColor: #dcecec;
  }

  .material-symbols-outlined {
    font-size: 1rem;
  }
  /**********************/

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 1rem;
  }

  li {
    list-style: none;
  }
}

@layer base {
  html,
  body {
    height: 100%;
  }

  body {
    position: relative;
    font-family: var(--M-PLUS-1-Code);
    line-height: 2rem;
    color: var(--yamSub2Color);
    background-color: var(--yamSubColor);
  }

  /* wrapper はボタン表示位置確保のために使う */
  .caption {
    margin: 0.5em 0;
  }

  /* 内側のテキストをクリップして高さアニメーション */
  .caption-inner {
    overflow: hidden;
    word-break: break-word;
  }

  /* ボタン（リンク風） */
  .caption-toggle {
    display: inline-block; /* JSで必要時だけ表示 */
    margin-top: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    color: #0366d6;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
  }

  .para {
    margin-bottom: 1.5rem;
  }

  /*** Rating ******/

  .rating-icon {
    display: inline-block;
    width: 1rem; /* アイコンサイズ調整 */
    height: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 0.5rem;
    background-position: center;
    cursor: help;
    transition: transform 0.2s, filter 0.2s;
    position: relative;
    @media (min-width: 700px) {
      width: 20px; /* アイコンサイズ調整 */
      height: 20px;
    }
  }

  /* ホバー時に少し浮き上がる */
  .rating-icon:hover {
    transform: translateY(-2px) scale(1.1);
    filter: brightness(1.1);
  }

  /* アイコンの対応表 */
  .rating-F {
    background-image: url("/img/icons/fantasy.png");
  }
  .rating-H {
    background-image: url("/img/icons/horror.png");
  }
  .rating-S {
    background-image: url("/img/icons/battle.png");
  }
  .rating-R {
    background-image: url("/img/icons/creepy.png");
  }
  .rating-A {
    background-image: url("/img/icons/allages.png");
  }
  .rating-B {
    background-image: url("/img/icons/rating-b.png");
  }
  .rating-C {
    background-image: url("/img/icons/rating-c.png");
  }
  .rating-D {
    background-image: url("/img/icons/rating-d.png");
  }
  .rating-E {
    background-image: url("/img/icons/rating-e.png");
  }

  /*** Rating ******/
  /* カスタムツールチップ */
  .rating-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 80%;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    padding: 0.5rem 0.75rem;
    background: #c06012;
    color: white;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1000;
  }

  /* 三角形の吹き出し */
  .rating-icon::before {
    content: "";
    position: absolute;
    bottom: 80%;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
  }

  /* ホバー時にツールチップ表示 */
  .rating-icon:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
  }

  .rating-icon:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(1px);
  }

  /* フォーカス時（キーボード操作）*/
  .rating-icon:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
  }

  .rating-icon:focus::after,
  .rating-icon:focus::before {
    opacity: 1;
  }

  .rating-icon:focus::after {
    transform: translateX(-50%) translateY(-4px);
  }

  /* アニメーション遅延（複数アイコン時） */
  .rating .rating-icon:nth-child(1):hover::after,
  .rating .rating-icon:nth-child(1):hover::before {
    transition-delay: 0s;
  }

  .rating .rating-icon:nth-child(2):hover::after,
  .rating .rating-icon:nth-child(2):hover::before {
    transition-delay: 0.05s;
  }

  .rating .rating-icon:nth-child(3):hover::after,
  .rating .rating-icon:nth-child(3):hover::before {
    transition-delay: 0.1s;
  }
}