@import 'tailwindcss';
@import './_theme.css';
@import './editor.css';

@utility container {
  max-width: 64rem;
  padding-inline: 1rem;
  margin-inline: auto;
}

/* ------------------------------
  独自カスタマイズ
 ------------------------------ */

/* グローバルナビゲーション - PC
=============================== */

/* 親階層 */
.pc-nav-list {
  @apply flex flex-wrap items-center list-none leading-6 font-bold;
}

.pc-nav-item {
  @apply relative mx-4 text-center;
}

.pc-nav-link {
  @apply flex items-center gap-2 h-14 px-1 hover:opacity-70;
}

.pc-nav-link.stay {
  @apply border-b-2 border-solid border-indigo-600;
}

.pc-nav-icon {
  @apply hidden text-gray-400 transition-transform;
}

.pc-nav-item:has(.pc-nav-list) > .pc-nav-link .pc-nav-icon {
  @apply block transition-transform;
}

.pc-nav-item:has(.pc-nav-list):hover > .pc-nav-link .pc-nav-icon {
  @apply rotate-180;
}

/* 子階層 */
.pc-nav-list .pc-nav-list {
  @apply absolute top-full right-0 z-10 opacity-0 w-52 rounded-md bg-white shadow-sm transition-opacity pointer-events-none;
}

.pc-nav-item:has(.pc-nav-list):hover > .pc-nav-list {
  @apply opacity-100 pointer-events-auto;
}

.pc-nav-list .pc-nav-list .pc-nav-item {
  @apply w-full m-0;
}

.pc-nav-list .pc-nav-list .pc-nav-item + .pc-nav-item {
  @apply border-t border-gray-200;
}

.pc-nav-list .pc-nav-list .pc-nav-link {
  @apply px-6;
}

/* グローバルナビゲーション - スマホ
=============================== */

/* 親階層 */
.sp-nav-item {
  @apply box-border w-full border-b border-gray-200;
}

.sp-nav-link {
  @apply flex items-center gap-x-2 px-5 py-4;
}

.sp-nav-icon {
  @apply hidden text-gray-400 transition-transform;
}

.sp-nav-link:has(+ .sp-nav-wrap) .sp-nav-icon {
  @apply block transition-transform;
}

.sp-nav-link.is-active .sp-nav-icon {
  @apply rotate-180;
}

/* 子階層 */
.sp-nav-list .sp-nav-list {
  @apply py-3 border-t border-gray-200 font-normal;
}

.sp-nav-list .sp-nav-list .sp-nav-item {
  @apply py-2 pr-4 pl-6 border-0;
}

.sp-nav-list .sp-nav-list .sp-nav-link {
  @apply gap-x-4 p-0 before:w-1.5 before:h-1.5 before:rounded-full before:bg-gray-400 before:content-[''];
}

.sp-nav-link + .sp-nav-wrap {
  @apply overflow-hidden grid grid-rows-[0] transition-all;
}

.sp-nav-link.is-active + .sp-nav-wrap {
  @apply grid-rows-1;
}

/* フォームバリデーター
=============================== */

/* フォームバリデーター */
/* stylelint-disable selector-class-pattern */
.validator-result-,
.validator-result-1,
.v-result-,
.v-result-1 {
  @apply hidden;
}
/* stylelint-enable selector-class-pattern */

.validator-result-error,
.validator-result-0,
.v-result-error,
.v-result-0 {
  @apply block;
}
