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

@layer base {
  html {
    @apply text-dark;
  }

  [x-cloak] {
    display: none !important;
  }
}

@layer components {
  .mypage-heading {
    @apply text-xl sm:text-2xl md:text-3xl font-shippori mb-8 sm:mb-12 md:mb-16;
  }

  .content-area {
    @apply mb-20 sm:mb-32 md:mb-40 lg:mb-44;
  }

  .btn-primary {
    @apply bg-primary text-white font-sans py-2 px-4 rounded hover:bg-opacity-50;
  }

  .btn-secondary {
    @apply bg-secondary text-white font-sans py-2 px-4 rounded hover:bg-opacity-50;
  }

  .btn-accent {
    @apply bg-accent text-white font-sans py-2 px-4 rounded hover:bg-opacity-50;
  }

  .btn-white {
    @apply text-center px-4 py-4 text-secondary font-sans border border-secondary rounded;
  }

  .field-container {
    @apply flex flex-col w-full max-w-[800px] space-y-8;
  }

  .field {
    @apply px-2 w-full sm:px-0 mx-auto;
  }

  .field-label {
    @apply block text-sm font-sans mb-2;
  }

  .required-label::after {
    content: "（必須）";
    @apply text-gray-400 text-xs ml-1;
  }

  .optional-label::after {
    content: "（任意）";
    @apply text-gray-400 text-xs ml-1;
  }

  .field .label-note {
    @apply text-gray-400 text-xs ml-1;
  }

  .field-input {
    @apply w-full px-3 py-2 bg-primary bg-opacity-50 border-none rounded-lg shadow-none font-sans text-sm;
  }

  .field-textarea {
    @apply w-full px-3 py-2 bg-primary bg-opacity-50 border-none rounded-lg shadow-none font-sans text-sm resize-none;
  }

  /* プレースホルダーの色を #C1C1C1 に設定 */
  .field-input::placeholder,
  .field-textarea::placeholder {
    color: #c1c1c1;
  }

  .checkbox-label {
    @apply block text-sm font-sans;
  }

  .checkbox-input {
    @apply mr-2 leading-tight;
  }

  .radio-group {
    @apply mt-2 space-y-2;
  }

  .radio-input {
    @apply mr-2 leading-tight;
  }

  .form-submit {
    @apply w-full h-16 text-white tracking-widest bg-secondary hover:bg-opacity-50 font-sans rounded;
  }

  .error-message {
    @apply text-alert text-xs mt-1;
  }

  /* テーブル全体のスタイル */
  .mp-table {
    @apply w-full border-collapse text-sm font-normal;
  }

  /* テーブルヘッダー (th) の共通スタイル */
  .mp-table tbody tr th {
    @apply bg-primary text-left border border-[#c8c8c8] p-4 sm:p-6 font-normal w-32 sm:w-64;
  }

  /* テーブルセル (td) の共通スタイル */
  .mp-table tbody tr td {
    @apply border border-[#c8c8c8] p-4 sm:p-6 w-auto min-w-32;
  }

  .font-sans-el {
    @apply font-sans font-extralight;
  }

  .tag-container {
    @apply flex flex-wrap gap-2 font-roboto;
    .tag-primary {
      @apply bg-primary py-2 px-4 rounded-full text-sm;
    }
    .tag-white {
      @apply bg-white py-2 px-4 rounded-full text-sm;
    }
  }

  .dotted01 {
    background-image: linear-gradient(to right, #000 1px, transparent 1px);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
  }

  .heading-with-icon::before {
    content: "●";
    margin-right: 0.5rem;
    display: inline-block;
  }

  .heading-with-icon {
    @apply text-secondary font-sans-el;
  }

  .pre-signup-heading {
    @apply font-marcellus text-accent text-center mb-4;
  }

  .pre-signup-heading-jp {
    @apply font-shippori bg-accent tracking-widest text-white text-xl py-2 mb-12 w-64 text-center;
  }

  .fade-out {
    width: 100%;
    height: 20rem;
    background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
    pointer-events: none;
  }
}
.logo img {
    display: block;
    height: 3rem; /* 具体的な高さを設定 */
}

.logo h1 {
    line-height: 3rem; /* 画像の高さに合わせる */
}
/*
 * 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.
 *


 */