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

@layer components {

  /* ホバー */
  .hover {
    @apply duration-200 hover:opacity-70
  }

  .green-hover {
    @apply px-3 py-2 rounded-lg duration-200 hover:bg-wfocus
  }

  .wide-gray-hover {
    @apply block w-full py-3 px-3 hover:bg-worangishlightgray hover:rounded-xl
  }

  .narrow-gray-hover {
    @apply wide-gray-hover py-1 px-6
  }

  .card-hover {
    @apply z-[-1] absolute top-0 left-0 w-full h-full p-3 transition duration-100 group-hover:z-[1] group-hover:block group-hover:bg-black group-hover:bg-opacity-[70%]
  }

  .card-hover-scale {
    @apply group-hover:scale-110 transition duration-700 ease-in-out
  }

  /* ボタン */
  .btn {
    @apply bg-white rounded-full text-waccent font-bold px-6 py-1 border-2 border-waccent cursor-pointer disabled:text-white disabled:bg-wgray disabled:border-wgray hover
  }

  .btn-primary {
    @apply btn font-normal text-white bg-waccent border-waccent disabled:text-white disabled:bg-wgray disabled:border-wgray hover
  }

  .btn-disabled {
    @apply btn text-white bg-wgray border-wgray
  }

  .btn-border-disabled {
    @apply border-b-2 border-wgray text-wgray h-max cursor-pointer hover
  }

  .btn-danger {
    @apply btn-primary w-max bg-red-600 border-red-600 hover:text-white
  }

  .btn-cancel {
    @apply btn hover:bg-gray-200 hover:text-black shrink w-full mr-4 whitespace-nowrap
  }

  .btn-back {
    @apply hidden lg:flex items-center rounded-full px-5 bg-worangishlightgray inline-block font-medium hover
  }

  .select-color-btn {
    @apply flex justify-center items-center border border-[#bfd9c1] bg-[#e4ede4] w-[30px] h-[30px] rounded-[50px] duration-200 p-0 hover:bg-[#bfd9c1] ml-4
  }

  .btn-border {
    @apply relative text-[#333] border-b-2 border-waccent duration-200 hover:opacity-70
    /* after:absolute after:left-0 after:-bottom-3 after:w-full after:h-[2px] after:bg-waccent after:opacity-0 after:invisible after:duration-300 after:hover:visible after:hover:-bottom-1 after:hover:opacity-100 */
  }

  .cms-btn-primary {
    @apply bg-cmsblue px-5 py-3 rounded-lg text-white inline-block cursor-pointer duration-200 hover:opacity-70
  }

  .cms-btn {
    @apply border-2 border-cmsblue px-5 py-3 rounded-lg text-cmsblue inline-block cursor-pointer duration-200 hover:opacity-70
  }

  .cms-btn-back {
    @apply cms-btn-primary hidden lg:flex items-center bg-worangishlightgray text-[#333]
  }

  .btn-google {
    @apply flex w-[260px] bg-white px-6 py-[8px] border border-gray-200 shadow-md hover hover:shadow-sm
  }

  .link {
    @apply text-blue-600 underline hover:opacity-70
  }

  /* タイトル */
  .site-title {
    @apply text-2xl md:text-3xl font-bold
  }

  .title-block {
    @apply flex flex-col items-center
  }

  .title {
    @apply text-2xl font-bold mb-6
  }

  .title-h2 {
    @apply text-[24px] lg:text-2xl font-bold mb-1 tracking-[4px]
  }

  .title-h3 {
    @apply text-sm text-waccent
  }

  /* フォーム */
  .form {
    @apply w-full rounded-lg py-2 px-4 border-none ring-2 ring-[#B5D3B8] focus:ring-2 focus:ring-waccent
  }

  .row-label {
    @apply flex-shrink-0 w-[200px]
  }

  .select-label {
    @apply w-[200px] md:w-[320px] pb-4 shadow-lg rounded-lg shadow-gray-400/40 cursor-pointer border-2
  }

  .select-label-3cards {
    @apply select-label w-[200px] md:w-[228px] xl:w-[320px]
  }

  .select-box {
    @apply w-full h-full flex flex-col items-center duration-300 hover:scale-[1.05]
  }

  /* モーダル */
  .open {
    @apply flex
  }

  .close {
    @apply hidden
  }

  /* フッター */
  .footer-text {
    @apply text-white px-4 hover text-center lg:text-start my-2 md:my-0
  }

  /* フォーカス */
  .focus {
    @apply bg-waccent text-white
  }

  .focus-narrow {
    @apply block w-full py-1 px-6 bg-wfocus rounded-xl
  }

  .focus-wide {
    @apply block w-full py-3 px-3 bg-wfocus rounded-xl
  }

  /* スマホ向けフッター : ツールバー */
  .toolbar {
    @apply fixed bottom-0 left-0 flex justify-around items-center h-[68px] w-screen border-t bg-white pb-[12px]
  }

  /* その他 */
  .main-style {
    @apply w-full mx-auto overflow-y-auto
  }

  .content-style {
    @apply mx-auto md:w-[90%] xl:w-[1024px] py-3 md:py-5 px-4 md:px-0
  }

  .sidebar-style {
    @apply h-full flex flex-col justify-between
  }

  .sidebar-summary {
    @apply wide-gray-hover cursor-pointer flex justify-between items-center
  }

  .sidebar-lists {
    @apply whitespace-nowrap text-[14px]
  }

  .sidebar-link {
    @apply cursor-pointer duration-200 flex justify-between items-center pl-[22px]
  }

  .sidebar-plus-button {
    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-black text-[#a0a0a0] duration-200 hover:scale-125 hover:text-[#333]
  }

  .card-list {
    @apply flex justify-center flex-wrap gap-[20px] mx-auto max-w-[280px] lg:max-w-[calc(280_*_2_+_20)px] xl:max-w-[calc(280_*_3_+_20_*_2)px] 2xl:max-w-[calc(280_*_4_+_20_*_3)px] py-5
  }

  .card-style {
    @apply relative shadow-lg w-[280px] h-[210px] overflow-hidden md:last:mr-auto
  }

  .question-box {
    @apply absolute hidden group-hover:block w-[224px] min-h-[140px] h-max z-20 bottom-[-200%] top-[20px] -left-[60px] md:-left-1/2 bg-white border-2 border-wgray px-3 py-2 text-sm font-medium rounded-lg shadow-xl
  }

  .question-box-down {
    @apply absolute hidden group-hover/question:block w-[224px] min-h-[140px] h-max z-10 bg-white border-2 top-6 left-[50%] translate-x-[-50%] border-wgray px-3 py-2 text-sm font-medium rounded-lg shadow-xl
  }

  .question-box-title {
    @apply text-sm font-bold text-center mb-2
  }

  .question-box-text {
    @apply text-xs leading-5 w-full whitespace-pre-line text-left
  }

  /* メニュー */
  .menu-text {
    @apply text-sm green-hover text-start w-full h-full
  }

  /* トップページ：サービス紹介の背景 */
  .border-radius {
    border-radius: 30% 60% 35% 65% / 50% 50% 50% 50%;
  }

  /* トップページ：さあ、作ってみようの画像の暗めのカバー */
  .image-cover::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 1;
  }

  /* shop機能 */
  .shipped {
    @apply bg-[#00ac97] text-white text-sm md:text-[1rem] font-bold px-2 md:px-4 py-1 tracking-widest rounded
  }

  .no-shipped {
    @apply bg-[#ea5550] text-white text-sm md:text-[1rem] font-bold px-2 md:px-4 py-1 tracking-widest rounded
  }

  @media screen and (min-width: 1024px) {
    .image-cover::before {
      left: 50%;
    }
  }

  /*
  hoverColor: '#a0a0a0',           // サイドバー項目のhover色
  whover: 'rgba(0, 0, 0, 0.8)',    // サイトのベースのhover色
  */

  /*
  formFocusColor: '#B5D3B8',
  previewBgColor: '#e4e4e4'
   */

  .nav-number {
    @apply w-[32px] md:w-[36px] h-[32px] md:h-[36px] rounded-full bg-worangishlightgray flex justify-center items-center text-worangishgray
  }

  .nav-number-primary {
    @apply w-[32px] md:w-[36px] h-[32px] md:h-[36px] rounded-full bg-wfocus flex justify-center items-center
  }

  .arrow {
    @apply text-[10px] mx-4 text-worangishgray
  }
}

* {
  font-family: "Noto Sans JP"
}

.cm-editor :not(*) {
  color: #333;
}

#editorjs h1 {
  font-size: 2.4rem;
}

#editorjs h2 {
  font-size: 2.2rem;
}

#editorjs h3 {
  font-size: 2rem;
}

#editorjs h4 {
  font-size: 1.8rem;
}

#editorjs h5 {
  font-size: 1.6rem;
}

#editorjs h6 {
  font-size: 1.4rem;
}

/* ローダー */
.loader {
  width: 64px;
  height: 64px;
  position: relative;
  background-image:
    linear-gradient(#FFF 16px, transparent 0),
    linear-gradient(#18CE00 16px, transparent 0),
    linear-gradient(#18CE00 16px, transparent 0),
    linear-gradient(#FFF 16px, transparent 0);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: left top, left bottom, right top, right bottom;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    width: 64px;
    height: 64px;
    transform: rotate(0deg)
  }

  50% {
    width: 30px;
    height: 30px;
    transform: rotate(180deg)
  }

  100% {
    width: 64px;
    height: 64px;
    transform: rotate(360deg)
  }
}

/* サイト作成直後のモーダル */
.modal__circle-pink {
  width: 90%;
  color: #f2c4d9;
  font-size: 40px;
  position: fixed;
  top: -5%;
  text-shadow:
    9vw -200px 2px,
    15vw -400px 3px,
    20vw -500px 4px,
    25vw -540px 6px,
    30vw -580px 1px,
    39vw -250px 2px,
    42vw -340px 5px,
    56vw -150px 2px,
    63vw -180px 3px,
    78vw -220px 4px,
    81vw -320px 9px,
    88vw -170px 7px;
  animation: anim-1 9s linear infinite;
}

@keyframes anim-1 {
  100% {
    color: transparent;
    top: 150%;
  }
}

.modal__circle-pink-small {
  width: 90%;
  color: #f2c4d9;
  font-size: 32px;
  position: fixed;
  top: -5%;
  text-shadow:
    10vw -350px 4px,
    17vw -350px 2px,
    23vw -430px 7px,
    28vw -480px 3px,
    35vw -530px 6px,
    44vw -200px 3px,
    48vw -310px 5px,
    59vw -120px 2px,
    67vw -140px 3px,
    75vw -190px 4px,
    82vw -270px 5px,
    88vw -160px 7px;
  animation: anim-2 6s linear infinite;
}

@keyframes anim-2 {
  100% {
    color: transparent;
    top: 120%;
  }
}

.modal__circle-yellow {
  width: 90%;
  color: #efeca7;
  font-size: 40px;
  position: fixed;
  top: -10%;
  text-shadow:
    5vw -250px 3px,
    8vw -400px 7px,
    18vw -500px 5px,
    28vw -580px 4px,
    37vw -250px 2px,
    40vw -340px 3px,
    55vw -150px 4px,
    60vw -180px 7px,
    75vw -220px 3px,
    82vw -320px 6px,
    88vw -170px 4px;
  animation: anim-3 6s linear infinite;
}

@keyframes anim-3 {
  100% {
    color: transparent;
    top: 60%;
  }
}

.modal__circle-yellow-small {
  width: 90%;
  color: #efeca7;
  font-size: 28px;
  position: fixed;
  top: -10%;
  text-shadow:
    6vw -180px 3px,
    8vw -240px 2px,
    18vw -360px 5px,
    32vw -450px 4px,
    37vw -570px 2px,
    40vw -480px 3px,
    55vw -330px 4px,
    60vw -270px 7px,
    75vw -210px 3px,
    81vw -170px 6px,
    88vw -90px 4px;
  animation: anim-4 4s linear infinite;
}

@keyframes anim-4 {
  100% {
    color: transparent;
    top: 100%;
  }
}

.modal__circle-blue {
  width: 90%;
  color: #b6d8ed;
  font-size: 40px;
  position: fixed;
  top: -7%;
  text-shadow:
    6vw -200px 3px,
    11vw -400px 4px,
    16vw -500px 5px,
    24vw -580px 2px,
    35vw -250px 7px,
    42vw -340px 3px,
    53vw -150px 4px,
    61vw -180px 7px,
    71vw -220px 3px,
    83vw -320px 6px,
    88vw -170px 4px;
  animation: anim-5 6s linear infinite;
}

@keyframes anim-5 {
  100% {
    color: transparent;
    top: 200%;
  }
}

.modal__circle-blue-small {
  width: 90%;
  color: #b6d8ed;
  font-size: 32px;
  position: fixed;
  top: -7%;
  text-shadow:
    7vw -180px 3px,
    13vw -240px 7px,
    19vw -360px 5px,
    27vw -450px 2px,
    35vw -570px 6px,
    46vw -480px 3px,
    51vw -330px 4px,
    69vw -270px 7px,
    73vw -210px 3px,
    80vw -170px 6px,
    88vw -90px 4px;
  animation: anim-6 7s linear infinite;
}

@keyframes anim-6 {
  100% {
    color: transparent;
    top: 100%;
  }
}

.modal__title {
  font-family: 'Prata', serif;
}
/*
 * 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.
 *


 */


summary::-webkit-details-marker {
  display: none;
}

/* Editor.jsのスマホ表示でメニューがツールバーに隠れる問題の対応 */
.ce-popover {
  margin-bottom: 68px;
}

/* Editor.jsの区切り線の表示をデフォルトから変更する */
#editorjs .ce-delimiter::before {
  display: block;
  content: '';
  width: 100%;
  border-bottom: 1px solid #333;
  transform: translateY(-50%);
}

/* バリデーションのエラー発生時などに、フォームのサイズが小さくなるのを防ぐ */
.field_with_errors {
  display: contents;
}