/* ============================================================
   sp.css — モバイルファースト ベーススタイル
   奥の細道のおと｜合同会社奥の細道企画

   このファイルが全画面幅の既定値（ベース）。
   768px以上の上書きは pc.css 側の単一の @media (min-width:768px) にまとめる。
   ブレイクポイントは 768px に統一。

   クラス命名: c-（共通コンポーネント）/ p-（ページ固有）のプレフィックス、
   区切りは常にハイフン1つ（BEMの __ / -- は使わない）。
   見た目のバリエーションは1要素1クラスで完結させ、修飾子クラスの重ね掛けはしない。
   再利用のない子要素にはクラスを付けず、親の単一クラスからの子孫セレクタでスタイルする。

   注意: c-container / c-eyebrow / c-badge / c-tag / c-photo-frame / c-field /
   c-table / c-prose / c-icon / c-card / c-divider は、固定ページ本文（DB保存のHTML）
   側でも同名クラスが使われている可能性があるため、このリファクタリングでは
   c-container・c-eyebrow・c-badge・c-tag は安全確認の上でフラット化。
   c-photo-frame・c-field・c-table・c-prose・c-icon・c-card・c-divider は旧名のまま維持している。

   構成:
   1. レイアウト共通（コンテナ）
   2. 共通コンポーネント（c-*）
   3. ページ固有（p-*）/ パンくず
   4. お問い合わせフォーム / GOTOTOP / バナー
   5. SP向け微調整（幅・余白・フォントサイズにvwを使用した既定値）
   ============================================================ */

/* ---------- 1. レイアウト共通 ---------- */
.c-container {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.c-container-narrow {
  max-width: var(--content-narrow);
}

.c-container-medium {
  max-width: var(--content-medium);
}

/* ---------- 2. 共通コンポーネント ---------- */

/* c-header：サイトヘッダー */
.c-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-ink-300);
}

.c-header-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c-header-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  text-decoration: none;
}

.c-header-logo {
  display: flex;
  flex-shrink: 0;
}

.c-header-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.c-header-brand-ja {
  font-family: var(--font-mincho-display);
  letter-spacing: 0.08em;
  color: var(--color-ink-900);
}

.c-header-brand-en {
  letter-spacing: 0.04em;
  font-family: var(--font-mincho);
  color: var(--color-ink-700);
}

.c-header-tagline {
  font-family: var(--font-mincho);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-ink-700);
}

.c-header-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.c-header-menu-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.c-header-menu-bar-top,
.c-header-menu-bar-mid,
.c-header-menu-bar-bottom {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-ink-900);
  transition: transform var(--dur-base) var(--ease-soft), opacity var(--dur-base) var(--ease-soft);
}

.c-header-menu-btn[aria-expanded="true"] .c-header-menu-bar-mid {
  opacity: 0;
}

.c-header-menu-btn[aria-expanded="true"] .c-header-menu-bar-top {
  transform: translateY(6.5px) rotate(45deg);
}

.c-header-menu-btn[aria-expanded="true"] .c-header-menu-bar-bottom {
  transform: translateY(-6.5px) rotate(-45deg);
}

.c-nav-list {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.c-nav-link {
  display: inline-block;
  font-family: var(--font-ui);
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--color-ink-500);
  border-bottom: 1.5px solid transparent;
}

.c-nav-link:hover {
  color: var(--color-ink-900);
}

.c-nav-link-active {
  color: var(--color-ink-500);
  border-bottom-color: var(--color-ink-500);
}

.c-nav-link-dropdown {
  font-family: var(--font-ui);
  letter-spacing: 0.08em;
  color: var(--color-ink-500);
  border-bottom: 1.5px solid transparent;
}

.c-nav-link-dropdown:hover {
  color: var(--color-ink-900);
}

/* c-nav-cta：ヘッダーナビのお問い合わせボタン（アウトライン + 左側にパンチ穴ドット） */
/* ホバー時の見た目(:hover)はPCのみ意味を持つため pc.css 側にまとめる */
.c-nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-ink-400);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  color: var(--color-ink-500);
  transition: border-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
}

.c-nav-cta::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--color-ink-500);
  transform: translateY(-50%) scale(1);
  transition: transform var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
}

/* c-footer：サイトフッター */
.c-footer {
  background: linear-gradient(170deg, var(--color-wood-800), #595959, #797979);
}

.c-footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.c-footer-brand-row {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.c-footer-brand-text-col {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.c-footer-brand-text {
  font-family: var(--font-mincho-display);
  letter-spacing: 0.08em;
  color: var(--color-text-on-dark);
}

.c-footer-brand-sub-en {
  letter-spacing: 0.04em;
  font-family: var(--font-mincho);
  color: var(--color-text-on-dark-mut);
}

.c-footer-tagline {
  font-family: var(--font-mincho);
  letter-spacing: 0.04em;
  line-height: var(--lh-body);
  color: var(--color-text-on-dark-mut);
  margin: 0;
}

.c-footer-address {
  font-family: var(--font-mincho);
  line-height: 1.5;
  color: var(--color-text-on-dark-mut);
  margin: 0;
}

.c-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-12) var(--sp-24);
  font-weight: 500;
}

.c-footer-link {
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
  color: var(--color-text-on-dark-mut);
  text-decoration: none;
}

.c-footer-link:hover {
  color: var(--color-text-on-dark);
}

.c-footer-bottom {
  max-width: var(--content-max);
  margin: 0 auto;
  border-top: 1px solid var(--color-border-on-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.c-footer-copyright {
  letter-spacing: 0.14em;
  color: var(--color-text-on-dark-mut);
  margin: 0;
}

.c-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.c-footer-legal-link {
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
  color: var(--color-text-on-dark-mut);
  text-decoration: none;
}

.c-footer-legal-link:hover {
  color: var(--color-text-on-dark);
}

/* c-eyebrow：小さなラベル見出し（左寄せが既定。中央寄せは c-eyebrow-center） */
.c-eyebrow,
.c-eyebrow-center {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-gold-700);
}

.c-eyebrow-center {
  justify-content: center;
}

.c-eyebrow-tick {
  width: 22px;
  height: 1.5px;
  background: var(--color-gold-500);
  display: inline-block;
  flex-shrink: 0;
}

/* c-card（固定ページ本文でも使われるため旧名のまま維持） */
.c-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-line-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.c-card--interactive {
  text-decoration: none;
  display: block;
  transition: box-shadow var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
}

/* c-divider（固定ページ本文でも使われるため旧名のまま維持） */
.c-divider {
  border: 0;
  height: 1px;
  background: var(--color-line-hair);
}

.c-divider--gold {
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold-600), transparent);
  opacity: 0.7;
  width: 120px;
}

/* c-photo-frame：画像プレースホルダー（固定ページ本文でも使われるため旧名のまま維持） */
.c-photo-frame {
  display: block;
  position: relative;
  width: 100%;
  background: var(--color-bg-recessed);
  overflow: hidden;
}

.c-photo-frame__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
  color: var(--color-ink-400);
  background: linear-gradient(135deg, var(--color-paper-2), var(--color-paper-3));
  padding: var(--sp-12);
}

.c-photo-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-photo-frame--matted {
  padding: var(--sp-8);
  background: var(--color-paper-0);
  box-shadow: var(--shadow-frame);
}

.c-photo-frame--matted .c-photo-frame__placeholder {
  position: static;
  aspect-ratio: inherit;
}

.c-photo-frame--ratio-4-5 { aspect-ratio: 4 / 5; }
.c-photo-frame--ratio-4-3 { aspect-ratio: 4 / 3; }
.c-photo-frame--ratio-3-4 { aspect-ratio: 3 / 4; }
.c-photo-frame--ratio-2-1 { aspect-ratio: 2 / 1; }
.c-photo-frame--ratio-16-9 { aspect-ratio: 16 / 9; }
.c-photo-frame--ratio-1-1 { aspect-ratio: 1 / 1; }

.c-photo-frame--round {
  border-radius: var(--radius-circle);
}

.c-photo-frame__caption {
  font-family: var(--font-mincho);
  color: var(--color-ink-500);
  text-align: center;
}

/* c-badge（カテゴリーラベル。色ごとに1クラスで完結。左側のドットのみ色を持つ） */
/* ホバー時の見た目(:hover)はPCのみ意味を持つため pc.css 側にまとめる */
.c-badge-gold,
.c-badge-green,
.c-badge-red,
.c-badge-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--sp-12) 0 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: none;
  color: var(--color-ink-500);
  border: 1.5px solid var(--color-ink-400);
}

.c-badge-gold::before,
.c-badge-green::before,
.c-badge-red::before,
.c-badge-outline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--color-ink-500);
  transform: translateY(-50%) scale(1);
  transition: transform var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
}

.c-badge-gold::before {
  background: var(--color-gold-700);
}

.c-badge-green::before {
  background: var(--color-green-700);
}

.c-badge-red::before {
  background: var(--color-red-700);
}

/* c-tag（背景なし、#付きのテキストのみ。リンク（<a>）の場合のみホバー色を付ける） */
.c-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-ink-500);
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
}

a.c-tag:hover {
  color: var(--color-wood-700);
}

/* c-icon（インラインSVGアイコンの共通リセット） */
.c-icon {
  display: inline-block;
  flex-shrink: 0;
  stroke: var(--color-ink-500);
  fill: none;
}

/* c-field（固定ページ本文でも使われる可能性があるため旧名のまま維持） */
.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
margin-bottom:var(--sp-16);
}

.c-field__label {
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
  color: var(--color-ink-700);
}

.c-field__control {
  width: 100%;
  font-family: var(--font-ui);
  color: var(--color-ink-900);
  background: var(--color-paper-0);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-sm);
  padding: var(--sp-12);
  transition: border-color var(--dur-base) var(--ease-soft);
}

.c-field__control:focus {
  outline: none;
  border-color: var(--color-gold-500);
}

textarea.c-field__control {
  resize: vertical;
  min-height: 120px;
}

/* c-form-submit：お問い合わせフォームの送信・確認ボタン（枠線・背景なし、通常テキスト色。アイコンはCSSで生成しMW WP Formの本文編集で消えないようにする） */
.c-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  border: none;
  background: none;
  padding: 0;
  color: var(--color-ink-700);
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: 0.06em;
  font-size: 3.8vw;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-soft);
}

.c-form-submit::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* c-form-back：お問い合わせフォームの戻るボタン（枠線・背景なし。アイコンはCSSで生成） */
.c-form-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  border: none;
  background: none;
  padding: 0;
  color: var(--color-ink-700);
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-size: 4vw;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-soft);
}

.c-form-back::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* c-table（固定ページ本文でも使われるため旧名のまま維持） */
.c-table {
  width: 100%;
  font-family: var(--font-ui);
}

.c-table__row {
  border-bottom: 1px solid var(--color-line-hair);
}

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

.c-table__label {
  text-align: left;
  font-weight: 500;
  color: var(--color-ink-500);
  letter-spacing: 0.06em;
  vertical-align: top;
  white-space: nowrap;
}

.c-table__value {
  line-height: 1.8;
  color: var(--color-ink-900);
}

/* c-accordion（FAQ等のQ&A表示） */
.c-accordion-item,
.c-accordion-item-plain {
  border-bottom: 1px solid var(--color-line-hair);
}

.c-accordion-item:first-child {
  border-top: 1px solid var(--color-line-hair);
}

.c-accordion-question {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

.c-accordion-question::-webkit-details-marker {
  display: none;
}

.c-accordion-label-q,
.c-accordion-label-a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  font-weight: 700;
}

.c-accordion-label-q {
  background: var(--color-gold-200);
  color: var(--color-gold-700);
}

.c-accordion-label-a {
  background: var(--color-ink-900);
  color: #FFFFFF;
}

.c-accordion-question-text {
  flex: 1;
  font-family: var(--font-mincho);
  color: var(--color-ink-900);
}

.c-accordion-caret {
  flex-shrink: 0;
  color: var(--color-ink-400);
  transition: transform var(--dur-base) var(--ease-soft);
}

.c-accordion-item[open] .c-accordion-caret {
  transform: rotate(180deg);
}

.c-accordion-answer {
  display: flex;
  align-items: flex-start;
}

.c-accordion-answer-text {
  flex: 1;
  color: var(--color-ink-500);
  line-height: var(--lh-relaxed);
}

/* c-prose（規約・方針などの長文コンテンツ。既にフラットな単一クラスなので変更なし） */
.c-prose h2 {
  color: var(--color-ink-900);
}

.c-prose h2:not(:first-child) {
  margin-top: var(--sp-48);
}

.c-prose p {
  color: var(--color-ink-700);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--sp-16);
}

.c-prose p:last-child {
  margin-bottom: 0;
}

.c-prose ol,
.c-prose ul {
  color: var(--color-ink-700);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--sp-16);
  padding-left: 1.4em;
}

.c-prose ol {
  list-style: decimal;
}

.c-prose ul {
  list-style: disc;
}

.c-prose li + li {
  margin-top: var(--sp-8);
}

.c-prose a {
  text-decoration: underline;
}

/* p-hero：トップのフェードスライダー */
.p-hero {
  position: relative;
  overflow: hidden;
}

.p-hero-slider,
.p-hero-slider .slick-list,
.p-hero-slider .slick-track,
.p-hero-slide {
  height: 100%;
}

.p-hero-slider {
  position: absolute;
  inset: 0;
}

.p-hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.p-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.p-hero-content .c-eyebrow-center,
.p-hero-title,
.p-hero-lead {
  color: #FFFFFF;
  text-shadow: 0 0 10px #000;
}

/* p-hero-actions のCTAボタン（1箇所限りの見た目のため単一クラスの子孫セレクタで完結） */
.p-hero-actions {
  display: flex;
  justify-content: center;
  gap: 4.3vw;
  flex-wrap: wrap;
}

.p-hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-wood-700);
  white-space: nowrap;
  cursor: pointer;
  background: var(--color-wood-700);
  color: #FFFFFF;
  transition: background var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft);
}

.p-hero-actions a:hover {
  background: var(--color-wood-600);
  border-color: var(--color-wood-600);
}

/* パンくずリスト */
#pankuzu {
  font-family: var(--font-ui);
  color: var(--color-ink-400);
}

#pankuzu a {
  color: var(--color-ink-400);
}

#pankuzu a:hover {
  color: var(--color-gold-700);
}

#pankuzu .current {
  color: var(--color-ink-500);
}


/*------------------------------------------------------------
CONTACT MW WP FORM
------------------------------------------------------------*/

.form{
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--color-border);
margin: 0;
}

.form dt{
padding: 4.8vw 3.2vw 1.6vw 0;
font-weight: bold;
display: flex;
align-items: center;
gap: 2.4vw;
}

.form dd{
padding: 0 0 4.8vw 0;
margin: 0;
border-bottom: 1px solid #E5E7EB;
}
.form dt span.req{
background-color: #DC2626;
color: #fff;
font-size: 3vw;
font-weight: bold;
padding: .8vw 1.6vw;
border-radius: .8vw;
line-height: 1;
}

input[type="text"],
input[type="email"]{
width: 100%;
padding: 2.4vw 3.2vw;
border: 1px solid #E5E7EB;
border-radius: 1.6vw;
background-color: #F9FAFB;
font-size: 3.5vw;
}
.form-note{
font-size: 3vw;
color: #4B5563;
margin: 1.6vw 0 0;
}

.mw_wp_form .error{
font-size: 3vw !important;
margin: 1.6vw 0 0;
}


textarea{
width: 100%;
padding: 2.4vw 3.2vw;
border: 1px solid  #E5E7EB;
border-radius: 1.6vw;
background-color:  #F9FAFB;
font-size: 3.5vw;
}


.pp-chk{
text-align: center;
margin: 9.6vw 0;
padding: 6.4vw 3.2vw;
background-color: #F9FAFB;
border-radius: 1.6vw;
}
.pp-info{
font-size: 3.5vw;
margin-bottom: 3.2vw;
}

.pp-chk label {
display: inline-flex;
align-items: center;
cursor: pointer;
font-size: 3.2vw;
}

.pp-chk input[type="checkbox"] {
width: 3.6vw;
height: 3.6vw;
margin-right: 1.6vw;
cursor: pointer;
}

.pp-info a{
color:#F08300;
}

.form-submit {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 6.4vw;
align-items: center;
justify-content: center;
}

.btn-accent {
background-color: #F08300;
color: #fff;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: bold;
border-radius: 9999px;
transition: all .2s;
text-align: center;
box-shadow: 0 .8vw 1.2vw -.2vw rgba(0, 0, 0, 0.1);
}


/*------------------------------------------------------------
GOTOTOP
------------------------------------------------------------*/
.gototop a{
position:fixed;
bottom:20px;
right:10px;
cursor:pointer;
z-index:999;
display:block;
color:#666;
padding-top:20px;
width:39px;
font-size:10px;
line-height:12px;
text-align:center;
}

.gototop a::before{
content:'';
width:26px;
height:26px;
border-right:1px solid #666;
border-bottom:1px solid #666;
transform:rotate(-135deg);
position:absolute;
top:0;
left:6px;
}


/* ---------- 5. SP向け微調整 ---------- */

/* 共通コンポーネント */
:root {
  --header-height: 60px;
}

/* PCのみで改行させたい<br class="pc-br">はSPで非表示 */
.pc-br {
  display: none;
}

.c-container {
  padding-left: 0;
  padding-right: 0;
}

.c-header-inner {
  padding: 0 5.3vw;
  gap: 4vw;
}

/* ---------- パンくずリスト ---------- */
#pankuzu {
  width: 100%;
  padding: 3.2vw 5.3vw;
  font-size: 2.25vw;
}

.c-header-logo img {
  width: 32px;
  height: 32px;
}

.c-header-brand-ja {
  font-size: 4.4vw;
}

.c-header-brand-en {
  font-size: 2.7vw;
}

/* ヘッダーは高さ・横幅が狭いため、サブタイトルはフッターとキャッチフレーズに任せる */
.c-header-tagline {
  display: none;
}

.c-header-menu-btn {
  display: flex;
}

/* モバイルナビ：初期状態は非表示、ハンバーガーでトグル */
.c-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4vw;
  background: var(--color-paper-0);
  border-bottom: 1px solid var(--color-line-hair);
  padding: 6.4vw 5.3vw 8.5vw;
  box-shadow: var(--shadow-md);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft), visibility var(--dur-base);
}

.c-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.c-nav-list {
  flex-direction: column;
  align-items: flex-start;
  gap: 5.3vw;
}

.c-nav-link {
  font-size: 4.3vw;
  padding-bottom: 1vw;
}

.c-nav-cta {
  height: 12vw;
  padding: 0 6.4vw 0 40px;
  font-size: 3.7vw;
  align-self: flex-start;
}

.c-footer-inner {
  padding: 12.8vw 5.3vw 8.5vw;
  gap: 8.5vw;
}

.c-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 2.7vw;
}

.c-footer-brand-text {
  font-size: 4.3vw;
}

.c-footer-brand-sub-en {
  font-size: 2.7vw;
}

.c-footer-tagline {
  font-size: 3.6vw;
}

.c-footer-address {
  font-size: 3vw;
}

.c-footer-nav {
  padding-top: 1vw;
}

.c-footer-link {
  font-size: 3.6vw;
}

.c-footer-bottom {
  padding: 4.3vw 5.3vw;
  gap: 2.1vw;
}

.c-footer-copyright {
  font-size: 2.5vw;
}

.c-footer-legal-links {
  gap: 3.2vw;
}

.c-footer-legal-link {
  font-size: 3.2vw;
}

.c-eyebrow,
.c-eyebrow-center {
  font-size: 3.1vw;
  gap: 2.1vw;
}

.c-eyebrow-tick {
  width: 5.9vw;
}

.c-photo-frame__caption {
  margin-top: 3.2vw;
  font-size: 3.5vw;
}

.c-badge-gold,
.c-badge-green,
.c-badge-red,
.c-badge-outline {
  height: 5.9vw;
  padding: 0 3.2vw 0 18px;
  font-size: 3.1vw;
}

.c-tag {
  height: 6.9vw;
  font-size: 3.3vw;
}

.p-hero-actions a {
  height: 14.4vw;
  padding: 0 8.5vw;
  font-size: 4vw;
}

.c-field {
  gap: 2.1vw;
}

.c-field__label {
  font-size: 3.5vw;
}

.c-field__control {
  font-size: 3.5vw;
  padding: 3.2vw 4.3vw;
}

.c-table__row {
  display: grid;
  grid-template-columns:4em 1fr;
  padding: 2.5vw 0;
gap:4vw;
}

.c-table__label {
  padding: 0 0 1.6vw;
  width: fit-content;
  font-size: 3.5vw;
}

.c-table__value {
  padding: 0;
  font-size: 3.5vw;
}

/* ---------- p-hero（トップ） ---------- */
.p-hero {
  height: 40vw;
}

.p-hero-content {
}

.p-hero-content .c-eyebrow-center {
}

.p-hero-title {
  font-size: 5vw;
  line-height: 1.35;
}

.p-hero-lead {
  font-size: 3.5vw;
  margin: 0 auto 5vw;
}

/* ---------- p-about（トップ：About） ---------- */
.p-about {
  background: linear-gradient(135deg, var(--color-bg-recessed), #fdfdfa);
  padding: 6vw 5.3vw;
  scroll-margin-top: var(--header-height);
}

.p-about-grid {
  display: block;
}

.p-about-media-pc {
  display: none;
}

.p-about-media-sp {
  float: right;
  width: 26vw;
  margin: 0 0 4.8vw 4.3vw;
}

.top-links{
margin:5vw 0 0;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:2.5vw 5vw;
}


.p-about-actions {
  clear: both;
  text-align: center;
}

.p-about-actions a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-ink-400);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  color: var(--color-ink-500);
  transition: border-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
  height: 9vw;
  padding: 0 9.6vw 0 40px;
  font-size: 3.7vw;
}

.p-about-actions a::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--color-wood-700);
  transform: translateY(-50%) scale(1);
  transition: transform var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
}




.anchor-bnrs {
  clear: both;
  text-align: center;
margin:0 0 6vw;
}

.anchor-bnrs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-ink-400);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  color: var(--color-ink-500);
  transition: border-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
  height: 9vw;
  padding: 0 6vw 0 8vw;
  font-size: 3.7vw;
}

.anchor-bnrs a::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--color-wood-700);
  transform: translateY(-50%) scale(1);
  transition: transform var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
}



.p-about-media img {
  display: block;
  width: 100%;
  height: auto;
}

.p-about-title {
  font-size: 5vw;
  margin: 0 0 3vw;
}

.p-about-text {
  font-size: 3.5vw;
  margin: 0 0 4.3vw;
}

.p-about-text:last-child {
  margin-bottom: 0;
}

/* ---------- p-posts（トップ：投稿一覧） ---------- */
.p-posts {
  padding:0 5.3vw 4vw;
  scroll-margin-top: var(--header-height);
}

.p-posts-head {
  margin:6vw 0 3vw;
  text-align: center;
}

.p-posts-title {
  font-size:5vw;
}

.p-posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4.8vw;
}

.p-post-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
}

.p-post-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.p-post-card-body {
  padding: 3.6vw 4.8vw
}

.p-post-card-meta {
  display: flex;
  align-items: center;
  gap: 2.7vw;
  margin-bottom: 3.2vw;
}

.p-post-card-date {
  font-size: 3.3vw;
  letter-spacing: 0.06em;
  color: var(--color-ink-400);
}

.p-post-card-title {
  font-family: var(--font-mincho);
  font-size: 4.5vw;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-ink-900);
  margin: 0 0 3vw;
}

.p-post-card-title a {
  color: inherit;
  text-decoration: none;
}

.p-post-card-title a:hover{
color:var(--color-wood-700);
}


.p-post-card-excerpt {
  font-size: 3.6vw;
  line-height: 1.5;
  color: var(--color-ink-500);
  margin: 0 0 2.5vw;
}

.p-post-card-more {
  text-align: right;
}

.p-post-card-more a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1vw;
  font-size: 3.4vw;
  letter-spacing: 0.04em;
  margin-bottom:1vw;
  border: 1px solid var(--color-ink-300);
  background: #fff;
  border-radius: 10vw;
  padding: 2vw 4vw;
}

.p-post-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2.1vw;
}

.p-posts-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-ink-500);
}

/* ---------- p-page-head（各下層ページ共通の見出し部・常に中央寄せ） ---------- */
.p-page-head {
  padding: 5vw 0;
  text-align: center;
}

.p-page-head-title {
  font-size: 5vw;
}

.p-page-head-lead {
  font-size: 3.7vw;
  color: var(--color-ink-500);
}

/* ---------- p-faq ---------- */
.p-faq {
  padding: 0 5.3vw 8vw;
}

.c-accordion-question {
  gap: 3.2vw;
  padding: 5.3vw 0;
}

.c-accordion-label-q,
.c-accordion-label-a {
  width: 7.5vw;
  height: 7.5vw;
  font-size: 3.7vw;
}

.c-accordion-question-text {
  font-size: 4.1vw;
}

.c-accordion-answer {
  gap: 3.2vw;
  padding: 0 0 5.3vw;
}

.c-accordion-answer-text {
  font-size: 3.7vw;
}

.c-accordion-item-plain {
  padding: 5.3vw 0;
}

/* ---------- p-legal ---------- */
.p-legal {
  padding: 2.1vw 5.3vw 12.8vw;
}

.c-prose h2 {
  font-size: 5.3vw;
  margin: 0 0 3.2vw;
}

/* ---------- p-company ---------- */
.p-company {
  padding: 0 5.3vw 8vw;
}

.p-company__card {
  padding: 1vw 5.3vw;
}

/* ---------- p-profile ---------- */
.p-profile {
  padding: 14.4vw 5.3vw 12.8vw;
}

.p-profile__grid {
  display: flex;
  flex-direction: column;
  gap: 8.5vw;
}

.p-profile__media {
  width: 60vw;
  margin: 0 auto;
}

.p-profile__media img {
  width: 100%;
}

.p-profile__eyebrow {
  margin-bottom: 4.3vw;
}

.p-profile__name {
  font-size: 8.5vw;
  margin: 4.3vw 0 6.4vw;
}

.p-profile__text {
  font-size: 3.5vw;
  margin: 0 0 4.3vw;
}

.p-profile__signature {
  margin-top: 6.4vw;
}

.p-profile__org {
  font-size: 3.7vw;
  margin: 0 0 1vw;
}

.p-profile__role {
  font-size: 4.3vw;
  margin: 0;
}

/* ---------- p-services ---------- */
.p-services__section {
  padding: 0 5.3vw 8vw;
}

.p-services__head {
  display: flex;
  align-items: baseline;
  gap: 4.3vw;
  margin-bottom: 3vw;
}

.p-services__number {
  font-size: 4.8vw;
  color: var(--color-gold-500);
}

.p-services__heading {
  font-size: 4.8vw;
}

.p-services__card {
  padding: 5.3vw;
}

.p-services__text {
  font-size: 3.75vw;
  margin: 0 0 3vw;
}

.p-services__text:last-of-type {
  margin-bottom: 0;
}

.p-services__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4vw;
  margin-top: 6vw;
line-height:1.5;
}

/* ---------- p-fee-table（旅行業務取扱料金） ---------- */
.p-fee-table {
  width: 100%;
  display: block;
  border-collapse: collapse;
}

.p-fee-table thead {
  display: none;
}

.p-fee-table tbody,
.p-fee-table tr,
.p-fee-table td {
  display: block;
  width: auto;
}

.p-fee-table tr {
  padding: 4.3vw 0;
  border-bottom: 1px solid var(--color-line-hair);
}

.p-fee-table tr:first-child {
  padding-top: 0;
}

.p-fee-table tr:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.p-fee-table td {
  padding: 0;
}

.p-fee-table td:first-child {
  margin-bottom: 1.6vw;
  color: var(--color-ink-900);
  font-weight: 500;
  font-size: 3.7vw;
  line-height: var(--lh-heading);
}

.p-fee-table td:last-child {
  color: var(--color-ink-700);
  font-size: 3.5vw;
  line-height: var(--lh-body);
}

.p-fee-table-note {
  display: block;
  margin-top: 1.1vw;
  color: var(--color-ink-500);
  font-size: 3.2vw;
}

.pdf-link{
display:flex;
flex-wrap:wrap;
gap:2vw;
margin:6vw 0 0;
& li{
width:100%;
}
& li a{
position:relative;
border:1px solid #ccc;
display:flex;
justify-content:center;
align-items:center;
color:var(--color-ink-700);
padding:2vw;
border-radius:10vw;
width:100%;
}
& li a::before{
content:'';
width:4vw;
height:5.5vw;
background:url(img/icon-pdf.svg) no-repeat;
background-size:4vw;
position:absolute;
top:2.8vw;
left:8vw;
}
}



/* ---------- p-contact ---------- */
.p-contact__intro {
  text-align: center;
  padding: 5vw 5.3vw 0;
}

.p-contact__title {
  font-size:5vw;
margin:0 0 2vw;
}

.p-contact__lead {
  font-size: 3.5vw;
  margin: 0 0 5vw;
}

.p-contact__cards {
  padding: 0 5.3vw 8vw;
  display: flex;
  flex-direction: column;
  gap: 4.8vw;
}

.p-contact__mail-card {
  padding: 5.3vw;
}

.p-contact__mail-row {
  display: flex;
  align-items: center;
  gap: 4.3vw;
}

.p-contact__mail-label {
  font-size: 3.3vw;
  letter-spacing: 0.12em;
  color: var(--color-ink-400);
  margin: 0 0 1vw;
}

.p-contact__mail-link {
  font-size: 4.8vw;
  letter-spacing: 0.02em;
}

.p-contact__form-card {
  padding: 5.3vw;
}

.p-contact__form-label {
  font-size: 3.3vw;
  letter-spacing: 0.12em;
  color: var(--color-ink-400);
  margin: 0 0 6.4vw;
}

.p-contact__form {
  display: flex;
  flex-direction: column;
  gap: 6.4vw;
}

/* ---------- p-post-detail ---------- */
.p-post-detail {
  padding: 5vw 5.3vw 8vw;
}

.p-post-detail-back {
  font-size: 3.6vw;
  letter-spacing: 0.06em;
  margin-bottom: 6.4vw;
  gap: 2.1vw;
display:inline-block;
}

.p-post-detail-meta {
  gap: 3.2vw;
  margin-bottom: 4.3vw;
}

.p-post-detail-date {
  font-size: 3.5vw;
  letter-spacing: 0.06em;
  color: var(--color-ink-400);
}

.p-post-detail-title {
  font-size: 5.5vw;
  line-height: 1.5;
  margin: 0 0 6.4vw;
}

.p-post-detail-body {
  margin-top: 8.5vw;
  font-size: 3.75vw;
  line-height: 1.75;
  color: var(--color-ink-700);
}

.p-post-detail-body p {
  margin: 0 0 6.4vw;
}

.p-post-detail-body p:last-child {
  margin-bottom: 0;
}

.affi-link{
  margin-top: 6.4vw;
}



.p-post-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2.7vw;
  margin-top: 6.4vw;
}

.p-post-detail-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold-600), transparent);
  opacity: 0.7;
  width: 120px;
  margin-top: 8.5vw;
}

.p-post-detail-author {
  display: flex;
  align-items: flex-start;
  gap: 4.3vw;
  margin-top: 6.4vw;
}

.p-post-detail-author-media {
  width: 14.4vw;
  height: 14.4vw;
  flex-shrink: 0;
}

.p-post-detail-author-name {
  font-size: 3.7vw;
  margin: 0;
}

.p-post-detail-author-role {
  font-size: 3.2vw;
  color: var(--color-ink-400);
  margin: 1vw 0 0;
}

.p-post-detail-author-bio {
  font-size: 3.4vw;
  line-height: 1.75;
  color: var(--color-ink-500);
  margin: 2.1vw 0 0;
}

.p-post-detail-author-link {
  display: inline-flex;
  align-items: center;
  gap: 1vw;
  font-size: 3.4vw;
  letter-spacing: 0.04em;
  margin-top: 3.2vw;
}


/* COMMON BNRS */

.bnrs{
max-width:100%;
margin:0 auto;
padding:6.4vw 4.8vw;
box-sizing:border-box;
}

.affi-bnr{
margin:0 auto;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:4vw;
}

.affi-bnr li{
width:calc((100% - 8vw) / 3);
}