/* Header専用CSS - LPページ用 */
/* header.blade.phpで使用されているTailwindクラスのみを抽出 */

/* 基本リセット（headerに必要な部分のみ） */
.app-header * {
  box-sizing: border-box;
}

/* Container */
.app-header .container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .app-header .container {
    max-width: 1280px;
  }
}

/* Flexbox utilities */
.app-header .flex {
  display: flex;
}

.app-header .flex-wrap {
  flex-wrap: wrap;
}

.app-header .flex-row {
  flex-direction: row;
}

.app-header .flex-col {
  flex-direction: column;
}

.app-header .items-center {
  align-items: center;
}

.app-header .items-start {
  align-items: flex-start;
}

.app-header .items-end {
  align-items: flex-end;
}

.app-header .justify-between {
  justify-content: space-between;
}

.app-header .justify-center {
  justify-content: center;
}

.app-header .justify-start {
  justify-content: flex-start;
}

.app-header .justify-end {
  justify-content: flex-end;
}

.app-header .justify-around {
  justify-content: space-around;
}

.app-header .shrink-0 {
  flex-shrink: 0;
}

/* Spacing */
.app-header .mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.app-header .mr-auto {
  margin-right: auto;
}

.app-header .ml-2 {
  margin-left: 0.5rem;
}

.app-header .ml-3 {
  margin-left: 0.75rem;
}

.app-header .mr-1 {
  margin-right: 0.25rem !important;
}

.app-header span.mr-1 {
  margin-right: 0.25rem;
}

.app-header .mr-5 {
  margin-right: 1.25rem;
}

.app-header .mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.app-header span.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.app-header .m-0 {
  margin: 0;
}

.app-header .p-0 {
  padding: 0;
}

.app-header .pl-2 {
  padding-left: 0.5rem;
}

.app-header .pl-10 {
  padding-left: 2.5rem !important;
}

.app-header p.pl-10 {
  padding-left: 2.5rem;
}

.app-header .px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.app-header .px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.app-header .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.app-header .pt-1 {
  padding-top: 0.25rem;
}

.app-header .mt-1 {
  margin-top: 0.25rem;
}

.app-header .mt-2 {
  margin-top: 0.5rem;
}

.app-header .mb-1 {
  margin-bottom: 0.25rem;
}

.app-header .mb-2 {
  margin-bottom: 0.5rem;
}

.app-header .py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.app-header .py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.app-header .py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.app-header .py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.app-header .p-2 {
  padding: 0.5rem;
}

.app-header .pb-14 {
  padding-bottom: 3.5rem !important;
}

.app-header div.pb-14 {
  padding-bottom: 3.5rem;
}

.app-header .pb-24 {
  padding-bottom: 6rem !important;
}

.app-header div.pb-24 {
  padding-bottom: 6rem;
}

@media (min-width: 768px) {
  .app-header .md\:px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .app-header div.md\:px-2,
  .app-header a.md\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .app-header .md\:py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .app-header div.md\:py-2,
  .app-header button.md\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .app-header .md\:py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .app-header div.md\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .app-header .md\:text-sm {
    font-size: 14px !important;
  }

  .app-header .md\:px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .app-header a.md\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .app-header .md\:pt-0 {
    padding-top: 0 !important;
  }

  .app-header span.md\:pt-0 {
    padding-top: 0;
  }
}

/* Typography - px単位で固定サイズ（ウィンドウ幅に依存しない） */
/* rem単位はindex-B8to1TP0.cssのhtml要素のfont-size変更の影響を受けるため、px単位で固定 */
.app-header .text-2xs {
  font-size: 10.4px !important;
  /* 0.65rem = 10.4px (16px基準) */
}

.app-header .text-xs {
  font-size: 12px !important;
  /* 0.75rem = 12px */
}

.app-header .text-sm {
  font-size: 14px !important;
  /* 0.875rem = 14px */
}

.app-header .text-base {
  font-size: 16px !important;
  /* 1rem = 16px */
}

.app-header .text-lg {
  font-size: 18px !important;
  /* 1.125rem = 18px */
}

/* より具体的なセレクタで固定 */
.app-header p.text-sm,
.app-header a.text-sm,
.app-header span.text-sm {
  font-size: 14px !important;
}

.app-header p.text-2xs,
.app-header a.text-2xs,
.app-header span.text-2xs {
  font-size: 10.4px !important;
}

.app-header span.text-lg,
.app-header a.text-lg {
  font-size: 18px !important;
}

.app-header .text-center {
  text-align: center;
}

.app-header .whitespace-nowrap {
  white-space: nowrap;
}

.app-header .no-underline {
  text-decoration: none;
}

.app-header .list-none {
  list-style: none;
}

.app-header .font-medium {
  font-weight: 500;
}

.app-header .font-semibold {
  font-weight: 600;
}

.app-header .font-bold {
  font-weight: 700;
}

.app-header .leading-4 {
  line-height: 1rem;
}

/* Colors */
.app-header .bg-white {
  background-color: #FFFFFF;
}

.app-header .bg-gray-50 {
  background-color: #F9FAFB;
}

.app-header .bg-gray-100 {
  background-color: #F0F2F4;
}

.app-header .bg-main-500 {
  background-color: #FF882F;
}

.app-header .bg-main-600 {
  background-color: #F56800;
}

.app-header .bg-main-200 {
  background-color: #FFE7D6;
}

.app-header .text-gray-500 {
  color: #66758F !important;
}

.app-header span.text-gray-500 {
  color: #66758F;
}

.app-header .text-gray-600 {
  color: #556277 !important;
}

.app-header span.text-gray-600,
.app-header p.text-gray-600 {
  color: #556277;
}

.app-header .text-gray-900 {
  color: #222222;
}

.app-header .text-white {
  color: #FFFFFF;
}

.app-header .text-main-500 {
  color: #FF882F;
}

/* Borders */
.app-header .border {
  border-width: 1px;
  border-style: solid;
}

.app-header .border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.app-header .border-2 {
  border-width: 2px;
  border-style: solid;
}

.app-header .border-gray-50 {
  border-color: #F9FAFB;
}

.app-header .border-main-500 {
  border-color: #FF882F;
}

/* Border radius */
.app-header .rounded-full {
  border-radius: 9999px;
}

.app-header .rounded-lg {
  border-radius: 0.5rem;
}

.app-header .rounded-sm {
  border-radius: 0.125rem;
}

/* Shadows */
.app-header .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.app-header .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Position */
.app-header .sticky {
  position: sticky;
}

.app-header .fixed {
  position: fixed;
}

.app-header .absolute {
  position: absolute;
}

.app-header .relative {
  position: relative;
}

.app-header .top-0 {
  top: 0;
}

.app-header .top-14 {
  top: 3.5rem;
}

.app-header .right-0 {
  right: 0;
}

.app-header .right-1 {
  right: 0.25rem;
}

.app-header .right-4 {
  right: 1rem;
}

.app-header .-top-1 {
  top: -0.25rem;
}

/* Z-index */
.app-header .z-40 {
  z-index: 40;
}

.app-header .z-50 {
  z-index: 50;
}

/* Display */
.app-header .block {
  display: block;
}

.app-header .hidden {
  display: none;
}

.app-header .inline-flex {
  display: inline-flex;
}

/* Size */
.app-header .w-full {
  width: 100%;
}

.app-header .w-auto {
  width: auto;
}

.app-header .w-4 {
  width: 1rem;
}

.app-header .h-4 {
  height: 1rem;
}

.app-header .w-6 {
  width: 1.5rem;
}

.app-header .h-6 {
  height: 1.5rem;
}

.app-header .h-8 {
  height: 2rem;
}

.app-header .h-9 {
  height: 2.25rem;
}

.app-header .h-screen {
  height: 100vh;
}

/* Overflow */
.app-header .overflow-auto {
  overflow: auto;
}

.app-header .overflow-y-auto {
  overflow-y: auto;
}

/* Focus states */
.app-header .focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.app-header .focus\:ring-2:focus {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.app-header .focus\:ring-gray-200:focus {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

/* Hover states */
.app-header .hover\:text-main-500:hover {
  color: #FF882F;
}

.app-header .hover\:bg-gray-100:hover {
  background-color: #F0F2F4;
}

.app-header .hover\:bg-main-200:hover {
  background-color: #FFE7D6;
}

.app-header .hover\:bg-main-600:hover {
  background-color: #F56800;
}

.app-header .hover\:border-main-600:hover {
  border-color: #F56800;
}

.app-header .hover\:opacity-80:hover {
  opacity: 0.8;
}

/* Screen reader only */
.app-header .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* SVG fill */
.app-header .fill-current {
  fill: currentColor;
}

/* Flex utilities */
.app-header .flex-none {
  flex: none;
}

.app-header .flex-1 {
  flex: 1 1 0%;
}

.app-header .self-center {
  align-self: center;
}

/* Line height */
.app-header [style*="line-height: 0"] {
  line-height: 0;
}

/* Responsive utilities */
@media (min-width: 768px) {
  .app-header .md\:block {
    display: block;
  }

  .app-header .md\:flex {
    display: flex;
  }

  .app-header .md\:hidden {
    display: none;
  }

  .app-header .md\:mr-auto {
    margin-right: auto;
  }

  .app-header .md\:pt-0 {
    padding-top: 0;
  }

  .app-header .md\:right-4 {
    right: 1rem;
  }

  .app-header .md\:w-auto {
    width: auto;
  }
}

/* Header specific styles */
.app-header header {
  font-family: 'Noto Sans JP', sans-serif, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, 'YuGothic', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic';
}

.app-header .body-font {
  font-family: 'Noto Sans JP', sans-serif, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, 'YuGothic', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic';
}

.app-header .title-font {
  font-family: 'Noto Serif JP', serif;
}

/* Mobile menu toggle button SVG */
.app-header button[data-collapse-toggle="mobile-menu"] svg.hidden {
  display: none;
}

.app-header button[data-collapse-toggle="mobile-menu"]:not([aria-expanded="true"]) svg:last-child {
  display: none;
}

.app-header button[data-collapse-toggle="mobile-menu"][aria-expanded="true"] svg:first-child {
  display: none;
}

/* PC版のheaderの高さ調整 */
@media (min-width: 768px) {
  .app-header header {
    height: 80px;
    min-height: 80px;
  }

  .app-header .container {
    display: flex;
    align-items: center;
    height: 80px;
    min-height: 80px;
  }

  /* PC版のロゴサイズ調整 */
  .app-header .md\:h-9 {
    height: auto;
    width: 130px;
    max-width: 130px;
  }

  .app-header svg.md\:h-9 {
    width: 130px;
    height: auto;
  }

  /* PC版の文字サイズ調整 - px単位で固定（ウィンドウ幅に依存しない） */
  .app-header .text-sm {
    font-size: 14px !important;
  }

  .app-header .md\:text-sm {
    font-size: 14px !important;
  }

  .app-header p.text-sm,
  .app-header a.text-sm,
  .app-header span.text-sm {
    font-size: 14px !important;
  }
}

/* SVG styles */
.app-header svg {
  display: block;
}

.app-header svg[fill="currentColor"] {
  fill: currentColor;
}

/* Form and button reset */
.app-header form {
  margin: 0;
}

.app-header button {
  cursor: pointer;
  background: none;
  border: none;
}

.app-header button[type="submit"] {
  cursor: pointer;
}

/* Link styles */
.app-header a {
  text-decoration: none;
  color: inherit;
}

.app-header a:hover {
  text-decoration: none;
}

/* List styles */
.app-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-header li {
  list-style: none;
}