@charset "UTF-8";

/* =========================================================
   Layout Base (Mobile First)
========================================================= */
.l-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.l-container--small { max-width: 900px; }
.l-section { padding: 5rem 0; position: relative; }
.l-grid { display: grid; gap: 1.5rem; }
.l-grid-cols-2, .l-grid-cols-3 { grid-template-columns: repeat(1, 1fr); }
.l-grid-cols-4, .l-grid-cols-5, .l-grid-cols-6 { grid-template-columns: repeat(2, 1fr); }
.l-flex { display: flex; flex-direction: column; gap: 2rem; }

/* =========================================================
   Components (共通パーツ)
========================================================= */
/* Section Titles */
.c-section-header { text-align: center; margin-bottom: 3rem; }
.c-section-label { color: var(--color-ocean); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 0.5rem; }
.c-section-title { font-family: var(--font-serif); font-size: 1.875rem; font-weight: 700; color: var(--color-text-main); line-height: 1.3; }
.c-section-desc { color: var(--color-text-light); line-height: 1.8; max-width: 850px; margin: 1.5rem auto 0; text-align: left; padding-bottom: 30px; }

/* English Background Text */
.c-bg-text { position: absolute; font-size: clamp(4rem, 10vw, 10rem); font-weight: 700; color: rgba(2, 62, 138, 0.03); white-space: nowrap; z-index: 0; top: -20px; left: 0; pointer-events: none; font-family: var(--font-sans); }
.c-bg-text--right { left: auto; right: 0; }

/* Buttons */
.c-btn { display: inline-flex; justify-content: center; align-items: center; padding: 1rem 2rem; border-radius: 9999px; font-weight: 700; font-size: 1rem; text-align: center; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.c-btn--ocean { background-color: var(--color-ocean); color: var(--color-white); }
.c-btn--ocean:hover { background-color: var(--color-ocean-dark); transform: translateY(-2px); }
.c-btn--coral { background-color: var(--color-coral); color: var(--color-white); }
.c-btn--coral:hover { background-color: var(--color-coral-dark); transform: translateY(-2px); }
.c-btn--outline { background-color: transparent; border: 2px solid var(--color-ocean); color: var(--color-ocean); }
.c-btn--outline:hover { background-color: var(--color-ocean); color: var(--color-white); }
.c-btn--white { background-color: var(--color-white); color: var(--color-ocean); }
.c-btn--white:hover { background-color: #f3f4f6; transform: translateY(-2px); }
.c-btn--block { display: flex; width: 100%; }

/* Cards */
.c-card { background-color: var(--color-white); border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.c-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.c-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.c-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.c-card:hover .c-card__img { transform: scale(1.05); }
.c-card__body { padding: 1.5rem; }
.c-card__title { font-size: 1.25rem; font-weight: 700; color: var(--color-text-main); margin-bottom: 0.5rem; }
.c-card__text { font-size: 0.875rem; color: var(--color-text-light); line-height: 1.6; }

/* Featured Image Full Width */
.c-hero-image { width: 100%; height: 300px; object-fit: cover; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; }

/* =========================================================
   Project (各セクションごとのスタイル)
========================================================= */
/* Breadcrumbs */
.p-breadcrumbs { background-color: #f3f4f6; padding: 0.75rem 0; font-size: 0.75rem; color: #6b7280; }
.p-breadcrumbs__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.p-breadcrumbs a:hover { color: var(--color-ocean); }

/* Hero Section */
.p-hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--color-ocean-dark); }
.p-hero__slideshow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.p-hero__slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-size: cover; background-position: center; animation: heroSlideshow 24s infinite linear; }
.p-hero__slide:nth-child(1) { background-image: url("../images/top001.jpg"); animation-delay: 0s; }
.p-hero__slide:nth-child(2) { background-image: url("../images/top002.jpg"); animation-delay: 6s; }
.p-hero__slide:nth-child(3) { background-image: url("../images/top003.jpg"); animation-delay: 12s; }
.p-hero__slide:nth-child(4) { background-image: url("../images/top004.jpg"); animation-delay: 18s; }
@keyframes heroSlideshow { 0% { opacity: 0; transform: scale(1.05); } 10% { opacity: 1; } 25% { opacity: 1; transform: scale(1); } 35% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; } }
.p-hero__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.2), rgba(3,4,94,0.8)); z-index: 1; }
.p-hero__content { position: relative; z-index: 2; text-align: center; color: var(--color-white); padding: 0 1rem; }
.p-hero__en { font-size: 1rem; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem; }
.p-hero__title { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.75rem; }
.p-hero__subtitle { display: block; font-size: 1.125rem; font-weight: 400; font-family: var(--font-sans); margin-bottom: 2rem; line-height: 1.5; }
.p-hero__desc { font-size: 0.875rem; font-weight: 300; max-width: 800px; margin: 0 auto; line-height: 1.8; }

/* Contents (TOC) */
.p-toc__grid {margin-top: -50px; display: grid; gap: 0.5rem; grid-template-columns: repeat(2, 1fr);}
.p-toc__link { display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.625rem; font-size: 0.875rem; font-weight: 700; background-color: var(--color-white); color: var(--color-ocean); }
.p-toc__link:hover { background-color: var(--color-ocean); color: var(--color-white); border-color: var(--color-ocean); }

/* Introduction */
.p-intro__box { background-color: var(--color-white); padding: 2rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); border-top: 4px solid var(--color-ocean); }
.p-intro__box--light { border-top-color: var(--color-ocean-light); }

/* World Heritage Pattern Bg */
.p-heritage { background-image: url("../images/top002.jpg"); background-attachment: fixed; background-size: cover; background-position: center; position: relative; }
.p-heritage::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); }
.p-heritage__box { position: relative; background-color: var(--color-white); padding: 2rem; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }
.p-heritage__item { display: flex; align-items: flex-start; background-color: var(--color-bg-gray); border: 1px solid var(--color-border); padding: 1rem; border-radius: 0.75rem; }
.p-heritage__item-img { width: 5rem; height: 5rem; object-fit: cover; border-radius: 0.5rem; margin-right: 1rem; flex-shrink: 0; }

/* History */
.p-history__list { background-color: var(--color-white); padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.p-history__list li { border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem; margin-bottom: 0.75rem; }
.p-history__list li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.p-history__list strong { color: var(--color-ocean); display: inline-block; margin-bottom: 0.25rem; }
.p-history__list span { display: block; font-size: 0.875rem; color: var(--color-text-light); }

/* Wildlife */
.p-wildlife { background-color: var(--color-ocean-dark); color: var(--color-white); }
.p-wildlife .c-section-title { color: var(--color-white); }
.p-wildlife .c-section-label { color: var(--color-ocean-light); }
.p-wildlife .c-section-desc { color: #e5e7eb; }
.p-wildlife__item { text-align: center; }
.p-wildlife__img { width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; border: 4px solid var(--color-ocean-light); }
.p-wildlife__title { font-weight: 700; font-size: 1.125rem; color: var(--color-coral); }
.p-wildlife__text { font-size: 0.875rem; color: #d1d5db; margin-top: 0.25rem; }

/* Ranking */
.p-ranking__item { display: flex; align-items: center; background-color: var(--color-bg-gray); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.75rem; position: relative; overflow: hidden; margin-bottom: 1rem; }
.p-ranking__rank { position: absolute; left: 0; top: 0; bottom: 0; width: 3rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--color-white); box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06); }
.p-ranking__rank--1 { background: linear-gradient(to bottom, #fde047, #eab308); }
.p-ranking__rank--2 { background: linear-gradient(to bottom, #d1d5db, #9ca3af); }
.p-ranking__rank--3 { background: linear-gradient(to bottom, #d97706, #b45309); }
.p-ranking__rank--other { background-color: #e5e7eb; color: #6b7280; font-size: 1.25rem; }
.p-ranking__img { margin-left: 3.5rem; width: 5rem; height: 5rem; object-fit: cover; border-radius: 0.25rem; margin-right: 1rem; flex-shrink: 0; }
.p-ranking__title { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.25rem; }
.p-ranking__text { font-size: 0.875rem; color: var(--color-text-light); }

/* Recommended For Pills */
.p-recommend__pill { display: inline-block; border: 1px solid rgba(255,255,255,0.5); border-radius: 9999px; padding: 0.5rem 1rem; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(4px); margin: 0.25rem; }

/* Optional Tours */
.p-optional__card { background-color: var(--color-white); border: 1px solid #e5e7eb; display: flex; flex-direction: column; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.p-optional__header { background-color: #00a8e8; color: var(--color-white); text-align: center; padding: 0.75rem; font-weight: 700; font-size: 1.125rem; }
.p-optional__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.p-optional__info-wrap { padding: 0.5rem; }
.p-optional__info { border: 1px solid #d32f2f; padding: 0.5rem; font-size: 0.8125rem; margin-bottom: 0.5rem; line-height: 1.4; }
.p-optional__info:last-child { margin-bottom: 0; }
.p-optional__info-title { color: #d32f2f; font-weight: 700; }
.p-optional__desc { padding: 0.5rem 1rem 1rem; font-size: 0.875rem; line-height: 1.6; flex-grow: 1; color: var(--color-text-light); }
.p-optional__note { background-color: var(--color-white); border: 1px solid #e5e7eb; padding: 1.5rem; margin-top: 2rem; font-size: 0.875rem; line-height: 1.6; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.p-optional__note-title { color: #d32f2f; font-weight: 700; text-align: center; margin-bottom: 1rem; font-size: 1rem; }

/* Model Course */
.p-course__card { background-color: var(--color-white); border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; flex-direction: column; border-top: 8px solid var(--color-ocean); }
.p-course__card--alt { border-top-color: var(--color-ocean-light); }
.p-course__img { width: 100%; height: 12rem; object-fit: cover; }
.p-course__body { padding: 2rem; flex-grow: 1; display: flex; flex-direction: column; }
.p-course__title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; text-align: left;; color: var(--color-ocean); margin-bottom: 1.5rem; }
.p-course__card--alt .p-course__title { color: var(--color-ocean-light); }
.p-course__list li { display: flex; margin-bottom: 0.75rem; font-size: 0.9375rem; }
.p-course__day { font-weight: 700; color: var(--color-coral); width: 4rem; flex-shrink: 0; }
.p-course__btn-wrap { margin-top: auto; padding-top: 2rem; text-align: center; }

/* Local Food */
.p-food__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.p-food__box { background-color: var(--color-sand); padding: 1rem; border-radius: 0.5rem; border-left: 4px solid var(--color-coral); }
.p-food__item { text-align: center; }
.p-food__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin-bottom: 0.5rem; transition: opacity 0.3s ease; }
.p-food__item:hover .p-food__img { opacity: 0.8; }
.p-food__name { font-size: 0.875rem; font-weight: 700; color: var(--color-ocean); }

/* Budget */
.p-budget__table { width: 100%; border-collapse: collapse; background-color: var(--color-white); border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.p-budget__table th, .p-budget__table td { padding: 1rem; border-bottom: 1px solid var(--color-border); text-align: left; }
.p-budget__table tr:hover { background-color: var(--color-sand); }
.p-budget__table th { font-weight: 700; color: var(--color-ocean); width: 33%; }
.p-budget__table td { color: var(--color-text-main); font-size: 0.875rem; }
.p-budget__note { display: block; color: var(--color-coral); font-size: 0.75rem; margin-top: 0.25rem; }

/* Voice */
.p-voice__card { background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; flex-direction: column; }
.p-voice__img { width: 100%; height: 12rem; object-fit: cover; }
.p-voice__body { padding: 1.5rem; position: relative; flex-grow: 1; }
.p-voice__icon { position: absolute; top: 1rem; right: 1rem; width: 2rem; height: 2rem; color: #f3f4f6; }
.p-voice__title { font-weight: 700; color: var(--color-ocean); font-size: 1.125rem; margin-bottom: 0.75rem; }
.p-voice__text { font-size: 0.875rem; color: var(--color-text-light); line-height: 1.6; }

/* Related Articles */
.p-article__card { display: flex; flex-direction: column; height: 100%; background-color: var(--color-white); border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); overflow: hidden; transition: box-shadow 0.3s ease; }
.p-article__card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.p-article__img-wrap { aspect-ratio: 3 / 2; overflow: hidden; }
.p-article__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.p-article__card:hover .p-article__img { transform: scale(1.05); }
.p-article__body { padding: 1.25rem; flex-grow: 1; display: flex; flex-direction: column; }
.p-article__title { font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; line-height: 1.4; color: var(--color-text-main); }
.p-article__desc { font-size: 0.8125rem; color: var(--color-text-light); margin-bottom: 1rem; flex-grow: 1; }
.p-article__link { color: var(--color-ocean); font-weight: 700; font-size: 0.875rem; text-align: right; display: inline-block; }
.p-article__link:hover { color: var(--color-ocean-light); }

/* Safety Guide / Basic Info */
.p-info__item { background-color: var(--color-bg-gray); border: 1px solid var(--color-border); padding: 1.5rem; border-radius: 0.5rem; transition: box-shadow 0.3s ease; }
.p-info__item:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.p-info__title { font-weight: 700; color: var(--color-ocean); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; margin-bottom: 0.5rem; display: block; }
.p-safety__item { background-color: var(--color-bg-gray); padding: 1rem; border-radius: 0.5rem; border-left: 4px solid var(--color-ocean); }
.p-safety__item--warn { border-left-color: var(--color-coral); }
.p-safety__title { display: block; font-weight: 700; color: var(--color-ocean); margin-bottom: 0.25rem; }
.p-safety__item--warn .p-safety__title { color: var(--color-coral); }
.p-safety__text { font-size: 0.875rem; color: var(--color-text-light); }

/* Access Steps */
.p-access__step { display: flex; align-items: flex-start; margin-bottom: 1.5rem; }
.p-access__step:last-child { margin-bottom: 0; }
.p-access__number { flex-shrink: 0; width: 2rem; height: 2rem; background-color: var(--color-coral); color: var(--color-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-right: 1rem; margin-top: 0.25rem; }
.p-access__content h4 { color: var(--color-ocean); font-weight: 700; font-size: 1.125rem; }
.p-access__content p { font-size: 0.875rem; color: var(--color-text-light); margin-top: 0.25rem; }

/* FAQ Accordion */
.p-faq__item { background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: 0.5rem; margin-bottom: 1rem; overflow: hidden; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.p-faq__btn { width: 100%; text-align: left; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.p-faq__q { font-weight: 700; color: var(--color-ocean); padding-right: 1rem; line-height: 1.4; }
.p-faq__icon { width: 1.25rem; height: 1.25rem; color: #9ca3af; transition: transform 0.3s ease; flex-shrink: 0; }
.p-faq__btn.is-active .p-faq__icon { transform: rotate(180deg); }
.p-faq__content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; background-color: var(--color-bg-gray); border-top: 1px solid transparent; }
.p-faq__btn.is-active + .p-faq__content { border-top-color: var(--color-border); }
.p-faq__a { padding: 1rem 1.5rem; font-size: 0.875rem; color: var(--color-text-main); line-height: 1.6; }

/* Map and Contact */
.p-map__area { background-color: #e5e7eb; width: 100%; height: 400px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06); }
.p-map__placeholder-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.p-map__label { position: relative; z-index: 1; background-color: rgba(255,255,255,0.8); padding: 0.5rem 1rem; border-radius: 0.25rem; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); color: var(--color-text-light); font-size: 0.875rem; }
.p-map__links { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }

/* Final CTA (Special Journey) */
.p-cta { background-color: var(--color-ocean-dark); color: var(--color-white); text-align: center; padding: 6rem 1rem; position: relative; overflow: hidden; }
.p-cta__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/top001.jpg"); background-size: cover; background-position: center; opacity: 0.3; transform: scale(1.05); }
.p-cta__content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.p-cta__title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.p-cta__desc { font-size: 1.125rem; font-weight: 300; letter-spacing: 0.1em; margin-bottom: 3rem; }
.p-cta__actions { display: flex; flex-direction: column; gap: 1.5rem; justify-content: center; align-items: center; }
.p-cta__btn-primary { background-color: var(--color-coral); color: var(--color-white); padding: 1rem 2.5rem; font-size: 1.125rem; }
.p-cta__btn-primary:hover { background-color: var(--color-coral-dark); transform: scale(1.05); }
.p-cta__btn-secondary { background-color: var(--color-white); color: var(--color-ocean); padding: 1rem 2.5rem; font-size: 1.125rem; }
.p-cta__btn-secondary:hover { background-color: #f3f4f6; transform: scale(1.05); }