@import "pagy.tailwind.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-3xl font-bold;
  }
  h2 {
    @apply text-2xl font-bold;
  }
  h3 {
    @apply text-xl font-bold;
  }
  h4 {
    @apply text-lg font-bold;
  }
  /* h5, h6 は未設定 */

  p {
    @apply leading-relaxed md:leading-loose;
  }
  a:hover {
    /* @apply text-blue-700; */
    @apply underline;
  }
}

@layer components {
  table.admin-table {
    @apply w-full text-xs;
    th {
      @apply bg-gray-200 p-2;
    }
    td {
      @apply p-1;
    }
  }
  div.admin-form {
    .form-group{
      @apply mb-4;
    }
  }

  span.bold-black{
    @apply font-bold text-slate-800 text-lg;
  }
  span.bold-green{
    @apply font-bold text-green-600 text-lg;
  }
  span.bold{
    @apply font-bold;
  }

  trix-content .text-red-500 {
    color: #ef4444; /* Tailwind CSSの赤色 */
  }
  
  trix-content .text-blue-500 {
    color: #3b82f6; /* Tailwind CSSの青色 */
  }
  
  trix-content .text-green-500 {
    color: #10b981; /* Tailwind CSSの緑色 */
  }


  article{
    /* カスタムクラス（@layer内で定義した場合使用しないとbuildされないようなので、CMSと連動させる場合は以下に記述する必要がある） */
    /* v1 との互換性のためのclass定義 */
    h2, h2.headline-h2 {
      @apply text-xl md:text-2xl bg-manganista-pink text-white mb-4 pt-2 pb-2 pl-2;
    }

    h3, h3.headline-h3 {
      @apply text-xl md:text-2xl text-slate-800 font-bold my-4 pl-2;
      border-left: 12px solid #f46f6fe1;
    }

    h4, h4.headline-h4 {
      @apply text-lg md:text-xl text-slate-800 font-bold my-4;
    }

    .payload-text {
      h2 {
        @apply text-xl md:text-2xl bg-manganista-pink text-white mb-4 mt-8 pt-2 pb-2 pl-2;
      }
      h3 {
        @apply text-lg md:text-2xl text-slate-800 font-bold my-4 pl-2;
        border-left: 12px solid #f46f6fe1;
      }
      h4 {
        @apply text-base md:text-xl text-slate-800 font-bold my-4;
      }
    }

    iframe {
      @apply max-w-full;
    }

    /* テーブル */
    table {
      @apply table-auto border-collapse !border !border-gray-400 my-6 !w-full !overflow-x-auto;
      th,td {
        @apply bg-white !border !border-gray-300 p-1 leading-relaxed;
      }
      a {
        @apply text-blue-700;
      }
    }
    table.table-bordered{
      @apply !border !border-gray-400 border-collapse text-sm !max-w-full;
      tbody{
        @apply !border !border-gray-400 border-collapse;
      }
      th{
        @apply !border border-gray-400 border-collapse p-1 bg-yellow-50 text-slate-700;
      }
      td{
        @apply !border border-gray-400 border-collapse p-1 text-center whitespace-normal;
      }
    }

    /* 目次系 */
    div#contents-list, div#story-links {
      .fade-out {
        @apply relative max-h-96 overflow-hidden;
      }
      .fade-out::before {
        content: '';
        @apply absolute bottom-0 left-0 w-full h-32 pointer-events-none bg-gradient-to-b from-transparent to-white;
      }
      .fade-out-overlay-button {
        @apply absolute bottom-0 left-1/2 transform -translate-x-1/2 z-10 bg-white text-center w-full pt-2 pb-1 text-sm text-slate-700;
      }
    }

    table.cps-table03, table.tg {
      @apply text-sm block md:table overflow-x-scroll whitespace-nowrap md:whitespace-normal !border-gray-300 !h-full;
      th {
        @apply bg-yellow-50 border px-1 py-1;
      }
      td.tg-nrix{
        img {
          @apply items-center;
        }
      }
    }

    p {
      @apply mb-4;
      a {
        @apply text-blue-700;
      }
    }

    div.entry-talk-box{
      @apply flex items-center w-full my-4 mx-0;
      div.entry-talk-img {
        @apply flex-shrink-0 w-24 pr-4;
        img {
          @apply rounded-full;
        }
      }
      div.entry-talk-txt, div.entry-talk-txt-blue {
        @apply p-2 px-4 bg-blue-200 rounded-lg relative;
        p {
          @apply mb-0 p-2;
        }
      }
      div.entry-talk-txt-right{
        @apply mr-4
      }
      div.entry-talk-txt-left-blue{
        @apply ml-0 w-full
      }
    }

    div.entry-parts-item{
      ul {
        @apply mt-0 mb-2 px-4 pt-0 pb-2 list-inside list-disc bg-white;
        li {
          @apply my-2 leading-tight text-sm;
        }
      }

      table {
        @apply text-sm;
        th {
          @apply bg-yellow-100 border border-gray-100 p-2;
        }
        td {
          @apply py-2 px-4
        }
      }
    }


    p.list-danger-title {
      @apply w-2/5 bg-red-700 text-white p-0 text-sm mb-0 pl-2 font-bold;
      +ul {
        @apply bg-white border border-red-700 mt-0 mb-6 list-inside;
      }
    }
    p.list-notice-title {
      @apply w-2/5 bg-cyan-700 text-white p-0 text-sm mb-0 pl-2 font-bold;
      +ul {
        @apply bg-white border border-cyan-700 mt-0 mb-6 list-inside;
      }
    }


    ul {
      @apply my-2 px-4 py-4 list-inside list-disc border-yellow-400 bg-yellow-100;
      li {
        @apply my-0 leading-relaxed md:leading-relaxed;
      }
    }

    ul.entry-list-decimal {
      margin: 2em 0;
      padding-left: 40px;
      padding-top: 10px;
      padding-bottom: 10px;
      list-style-type: decimal;
      line-height: 1.6em;
      background-color: #fffbca;
      border: 1px solid #fff255;
    }

    /* 話数リンク */
    div#story-toc-box {
      div#story-toc {
        h2 {
          @apply text-base md:text-base md:mt-2;
        }
        table {
          @apply mt-2 text-sm;
          th,td {
            @apply p-1 text-sm;
          }
        }
      }
    }

    /* 引用 */
    blockquote.citation {
      @apply border border-l-4 border-gray-400 mb-4 p-4 pl-4 my-4 mx-0 rounded-sm overflow-hidden;
      border-left-color: #49d9d3;
    }

    /* CTAボタン */
    span.color-button01-big, .button-area, .color-button01, .color-button02, .entry-conversion-container, .red-button {
      @apply border rounded text-white bg-rose-500 px-4 py-2 m-auto block w-3/4 text-center my-2;
      a{
        @apply hover:text-white text-white;
      }
    }
    /* 空のpタグが古い記事に混入していることがあったので握りつぶし */
    .button-area {
      p {
        @apply mb-0;
      }
    }

    /* ハイライト系 */
    span.hilight-green{
      @apply underline underline-offset-[-4px] decoration-8 decoration-green-400/50 ;
      text-decoration-skip-ink: none;
    }
    span.hilight-yellow{
      @apply underline underline-offset-[-4px] decoration-8 decoration-yellow-400/50 ;
      text-decoration-skip-ink: none;
    }
    span.hilight-blue{
      @apply underline underline-offset-[-4px] decoration-8 decoration-sky-300/50 ;
      text-decoration-skip-ink: none;
    }

    /* 枠表現 */
    div.simple-box6{
      @apply block h-auto bg-yellow-100 p-4;
      p {
        @apply p-2 mb-1 text-center text-sm;
      }
      span.color-button01{
        @apply rounded text-white bg-rose-500 px-4 py-2 m-auto block w-3/4 text-center;
        a{
          @apply hover:text-white text-white;
        }
      }
      div.t-aligncenter{
        @apply text-center mt-2;
        a {
          @apply text-blue-700;
        }
      }
    }

    div.simple-box1,div.simple-box8, div.concept-box2{
      @apply border border-dashed border-manganista-pink p-2 my-4 mx-0 bg-gray-50;
      ul {
        @apply bg-gray-50 py-0;
        li {
          @apply my-1;
        }
      }
    }

    div.summary, p.summary {
      @apply bg-yellow-100 p-4 text-sm
    }

    #tag-page{
      h2 {
        @apply px-4 md:px-2 py-1 text-white text-base font-semibold text-left mb-2 rounded-2xl bg-manganista-pink;
      }
    }
}

  
/* EditorJS */
  div.codex-editor {
    div.ce-block{
      @apply border-b border-gray-100;
    }
    .ce-header{
      @apply p-1 mb-4 leading-loose ;
    }
  }

  body {
    /* color: rgb(var(--foreground-rgb)); */
    /* color: #4d5156; Googleと同じ色 */
    color: #1e293b;
    background-color: #ffffff; /* Next.js残骸のグラデーション削除（--background-start/end-rgb未定義で黒化していた） */
  }

}

nav.pagy.nav { 
  @apply flex justify-center list-none mt-8;
  a { 
    @apply px-2 py-1 mx-1 border border-gray-300 rounded text-gray-700;
    &.current { 
      @apply bg-manganista-pink text-white;
    }
  }
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */