/* =========================================
   Page Common
========================================= */

/* ---------- Titlebar ---------- */
.page-titlebar {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.page-titlebar__bg {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
}

.page-titlebar__bg--pc {
  background-image: url("../img/titlebar/titlebar_pc.webp");
}

.page-titlebar__bg--sp {
  display: none;
  background-image: url("../img/titlebar/titlebar_sp.webp");
}

.page-titlebar__inner {
  position: relative;
  width: min(1080px, calc(100% - 20px));
  height: 100%;
  margin: 0 auto;
}

.page-titlebar__title {
  position: absolute;
  left: 0;
  bottom: 55px;

  width: 100%;
  margin: 0;

  font-size: 48px;
  line-height: 1.3;
  color: #45A230;
  text-align: center;
}

/* ---------- Container spacing ---------- */
.page .l-container {
  padding-top: 80px;
  padding-bottom: 120px;
}

/* ---------- Page contents ---------- */
.page .entry__content h2 {
  margin: 0 0 30px;
  font-size: 40px;
  line-height: 1.4;
}

/* ---------- List marker color ---------- */
.page .entry__content ul {
  margin-bottom: 40px;
}

.page .entry__content ul li::marker {
  color: #45A230;
}


/* =========================================
   404 Page
========================================= */
.page--404 .error-404 {
  max-width: 720px;
  margin: 0 auto;
}

.error-404__text {
  margin-bottom: 32px;
  font-size: 16px;
  text-align: center;
}

.error-404__button {
  text-align: center;
}

.btn {
  display: inline-block;
  padding: 14px 32px;
  font-weight: 500;
  text-decoration: none;
}

.btn--primary {
  background-color: #45A230;
  color: #fff;
}


/* =========================================
   About Haircut Ticket Page
========================================= */
.page--ticket .entry {
  max-width: 1080px;
  margin: 0 auto;
}

/* h2 */
.page--ticket h2 {
  margin: 0;
  font-size: 40px;
  text-align: center;
}

/* 英語サブ見出し（任意） */
.page--ticket .ticket-en {
  display: block;
  margin: 0;

  font-size: 14px;
  font-weight: 300;
  line-height: 1.2;
  color: #333333;
  text-align: center;
}

/* リード文 */
.page--ticket p {
  text-align: center;
}

/* h3（指定：26px / bold / シンプル） */
.page--ticket h3 {
  margin: 60px 0 20px;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}

/* リスト背景（重要） */
.ticket-list {
  max-width: 100%;
  margin: 0 auto;
  padding: 15px;

  background: #F7FFE3;
  border-radius: 8px;
}

.page--ticket ol,
.page--ticket ul {
  line-height: 2;
}

.page--ticket ul li,
.page--ticket ol li {
  margin-bottom: 10px;
}

/* リストの丸ポチ・番号色 */
.page--ticket ul li::marker,
.page--ticket ol li::marker {
  color: #45A230;
}

/* 注意文（赤文字） */
.page--ticket .ticket-note,
.page--ticket .is-note {
  margin: 20px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #FF2902;
  text-align: center;
}

/* CTAボタン */
.page--ticket .ticket-cta {
  margin-top: 40px;
  text-align: center;
}

.page--ticket .ticket-btn {
  display: inline-block;
  padding: 14px 32px;

  background: #45A230;
  border-radius: 999px;

  color: #fff;
  font-weight: 700;
  text-decoration: none;
}


/* =========================================
   Recruit Page
========================================= */
.page--recruit .entry--recruit {
  max-width: 900px;
  margin: 0 auto;
}

/* Lead */
.recruit-lead {
  margin: 0 0 50px;
  text-align: center;
}

/* Hero image */
.recruit-hero {
  margin: 0 auto;
}

.recruit-hero__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Block */
.recruit-block {
  margin-top: 56px;
}

.recruit-h3 {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}

.recruit-text {
  margin: 0 0 20px;
  text-align: center;
}

/* Marker */
.recruit-text .is-marker {
  background: linear-gradient(transparent 60%, #F7FFE3 60%, #F7FFE3 100%);
}

/* Points */
.recruit-points {
  margin-top: 24px;
  text-align: center;
}

.recruit-point {
  margin-bottom: 15px;
}

.recruit-point__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  color: #FF2902;
}

.recruit-point__text {
  margin: 0;
}

/* Inline title */
.recruit-point__title--inline {
  margin: 24px 0 12px;
  text-align: center;
  color: #333333;
}

/* List box */
.recruit-listbox {
  margin: 0 auto 24px;
  padding: 18px 20px;

  background: #EFF8D8;
  border-radius: 8px;
}

.recruit-list {
  margin: 0;
  padding-left: 1.2em;

  font-size: 14px;
  line-height: 2;
}

.recruit-list li::marker {
  color: #45A230;
}

.recruit-list li span {
  color: #FF0000;
}

/* DL */
.recruit-dl {
  max-width: 900px;
  margin: 0 auto;
}

.recruit-dl__row {
  padding: 14px 0;
  border-bottom: 1px solid #DDDDDD;
}

.recruit-dl__row dt {
  margin-bottom: 6px;
  font-weight: 700;
}

.recruit-dl__row dd {
  margin: 0;
}

.recruit-dl__row dd span {
  color: #FF0000;
}

/* Contact */
.recruit-contact {
  margin: 56px auto 0;
  padding: 28px 20px;

  background: #F4FBE7;
  border-radius: 10px;

  text-align: center;
}

.recruit-contact__title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: #45A230;
}

.recruit-contact__info a {
  text-decoration: none;
}

.recruit-contact__tel,
.recruit-contact__mail {
  margin: 8px 0;
  font-weight: 700;
}

.recruit-contact__note {
  margin: 10px 0 0;
}

.recruit-contact__small {
  margin: 16px 0 0;
}
/* =========================================
   Greeting Page
========================================= */
.page--greeting .entry--greeting {
  max-width: 1080px;
  margin: 0 auto;
}

/* --- Section 01: 画像左 / テキスト右 --- */
.greet-hero {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 30px;
  align-items: start;
  padding: 0 0 60px;
}

.greet-hero__img {
  width: 100%;
  height: auto;
  display: block;
}

.greet-hero__body p {
  margin: 0 0 16px;
}

.greet-sign {
  margin-top: 24px;
}

/* 太くするテキスト */
.greet-sign__em {
  margin: 0 0 12px;
  font-weight: 700; /* ★太字 */
}

/* 署名画像 */
.greet-sign__img {
  display: block;
  max-width: 220px; /* 署名なので控えめ */
  height: auto;
}

/* --- Section 02: Profile table --- */
.greet-profile {
  padding: 0 0 60px;
}

.profile-table {
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
}

.profile-table__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid #DDDDDD;
}

.profile-table__row:last-child {
  border-bottom: 0;
}

.profile-table__th {
  font-weight: 700;
  color: #45A230;
  font-size: 18px;
  text-align: center;
    display: flex;
  align-items: center;
  margin: 0 auto;
}

.profile-table__td {
  margin: 0;
  color: #333;
  font-size: 18px;
  line-height: 2;
}

/* プロフィール内リスト */
.profile-table__td .profile-list {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
  line-height: 2;
}

.profile-table__td .profile-list li::marker {
  color: #45A230;
}

/* --- Section 03: Column cards (aタグで全部クリック) --- */
.greet-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.column-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.column-card__img {
  width: 100%;
  height: auto;
  display: block;
}

.column-card__body {
  padding-top: 20px;
}

.column-card__title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
}

.column-card__meta {
  margin: 0 0 25px;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  opacity: 0.85;
}

/* ボタン見た目（aの中の span） */
.column-card__btn {
  text-align: center;
  min-width: 240px;
  display: inline-block;
  padding: 12px 24px;
  background: #45A230;
  color: #fff;
  font-size: 16px;
}

/* hover */
.column-card:hover .column-card__btn {
  filter: brightness(0.95);
}

.column-card:hover .column-card__img {
  filter: brightness(0.98);
}

/* =========================================
   Contact Thanks Page Button
   page-id-8547
========================================= */
.page-id-8547 .entry__content a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 240px;
  padding: 14px 32px;

  background: #45A230; /* ブランドグリーン */
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;

  border-radius: 9999px;
  text-decoration: none;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;

  margin: 40px auto 0;
}

/* hover / focus */
.page-id-8547 .entry__content a:hover,
.page-id-8547 .entry__content a:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  opacity: 0.9;
}

/* active */
.page-id-8547 .entry__content a:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}


/* =========================================
   Responsive
========================================= */
@media (max-width: 767px) {
  /* Titlebar */
  .page-titlebar {
    height: 220px;
  }

  .page-titlebar__bg--pc {
    display: none;
  }

  .page-titlebar__bg--sp {
    display: block;
  }

  .page-titlebar__title {
    font-size: 30px;
  }

  /* Container spacing */
  .page .l-container {
    padding-top: 40px;
    padding-bottom: 80px;
  }

  /* Page contents */
  .page .entry__content h2 {
    margin-bottom: 20px;
    font-size: 24px;
  }

  /* Ticket */
  .page--ticket h2 {
    margin-bottom: 18px;
    font-size: 24px;
    text-align: left;
  }

  .page--ticket h3 {
    margin-top: 36px;
    font-size: 20px;
    text-align: left;
  }

  .page--ticket p {
    text-align: left;
  }

  .page--ticket ol,
  .page--ticket ul {
    padding: 0 0 0 14px;
  }

  .page--ticket .ticket-note,
  .page--ticket .is-note {
    text-align: left;
  }

  /* Recruit */
  .recruit-lead {
    margin: 0 0 30px;
    text-align: left;
  }

  .recruit-block {
    margin-top: 44px;
  }

  .recruit-h3 {
    font-size: 20px;
    text-align: left;
  }

  .recruit-text {
    text-align: left;
  }

  .recruit-points {
    text-align: left;
  }

  .recruit-point__title {
    font-size: 18px;
    text-align: left;
  }

  .recruit-contact__small {
    text-align: left;
  }
    .greet-hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .greet-columns {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .column-card__title{
    font-size: 16px;
  }
  .column-card__meta{
    margin: 0 0 18px;
    font-size: 14px;
  }

  .profile-table__row {
    grid-template-columns: 80px 1fr;
    gap: 10px;
  }
  .profile-table__th,
  .profile-table__td{
    font-size: 16px;
  }
}