@charset "UTF-8";
/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* ============================================================
   デザイントークン
============================================================ */
/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* ============================================================
   fluid ヘルパー
   ・ルートフォントを画面幅に応じて可変（全要素同一係数でスケール）
   ・1rem = 10px（各デザイン幅基準）
   ・rem() はデザイン上のpx値をそのまま渡す
============================================================ */
/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* ============================================================
   リセット & ベース
============================================================ */
*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 62.5%;
}
@media screen and (max-width: 1280px) and (min-width: 768px) {
  html {
    font-size: 0.78125vw;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 2.5vw;
  }
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
:target,
[id^=floor-],
#news, #event, #floor, #nearby, #parking, #parking-info {
  scroll-margin-top: 2.4rem;
}
@media screen and (max-width: 767px) {
  :target,
  [id^=floor-],
  #news, #event, #floor, #nearby, #parking, #parking-info {
    scroll-margin-top: 8rem;
  }
}

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  color: #2b2b2b;
  background: #ffffff;
  line-height: 1.8;
  font-weight: 500;
  font-size: max(1.6rem, 20px);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, p, dl, dd, dt, figure {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}

svg {
  display: block;
}

/* ============================================================
   レイアウト土台
   PC = 左に固定サイドバー、本文は右へオフセット
   SP = サイドバーはドロワー化、本文は全幅
============================================================ */
@media screen and (min-width: 768px) {
  .l-main {
    margin-left: 172px;
  }
}
@media screen and (max-width: 767px) {
  .l-main {
    padding-top: 6.4rem;
  }
}

.l-container {
  width: 100%;
  max-width: 1104px;
  margin: 0 auto;
  padding: 0 4rem;
}
@media screen and (max-width: 767px) {
  .l-container {
    padding: 0 2.4rem;
  }
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* ============================================================
   PC：左固定サイドバー
============================================================ */
@media screen and (min-width: 768px) {
  .l-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 172px;
    height: 100vh;
    background: #ffffff;
    z-index: 100;
    overflow-y: auto;
    -webkit-box-shadow: 0 0 2rem rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 2rem rgba(0, 0, 0, 0.05);
    border-right: 1px solid #000;
  }
}
.l-sidebar__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 1.8rem;
  padding: 2rem 3rem 2.4rem;
  min-height: 100%;
}
.l-sidebar__head {
  text-align: center;
}
.l-sidebar__logo {
  text-align: center;
}
.l-sidebar__logo img {
  width: 10rem;
  height: auto;
  margin: 0 auto;
}
.l-sidebar__logo:hover {
  opacity: 0.7;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.l-sidebar__logo-text {
  display: block;
  color: #036EB8;
  font-weight: 700;
  font-size: max(1.4rem, 20px);
  line-height: 1.35;
  margin-top: 0.6rem;
}
.l-sidebar__nav {
  width: 100%;
}
.l-sidebar__nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.4rem;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.l-sidebar__nav a {
  display: block;
  text-align: left;
  color: #036EB8;
  font-weight: 700;
  font-size: max(1.5rem, 20px);
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.l-sidebar__nav a:hover {
  opacity: 0.82;
}
.l-sidebar__insta {
  -ms-flex-item-align: start;
      align-self: flex-start;
  color: #2b2b2b;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.l-sidebar__insta:hover {
  opacity: 0.82;
}
.l-sidebar__insta svg {
  width: 2.6rem;
  height: 2.6rem;
}
.l-sidebar__actions {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  margin-top: auto;
}
.l-sidebar__actions .c-action {
  width: 100%;
}
.l-sidebar {
  /* ------------------------------------------------------------
     PC：画面の縦幅に収める
     各要素の縦寸法を vh 連動の clamp にして、画面が低いほど
     自動で詰まる（＝スクロールせず 100vh に収まる）ようにする。
     clamp(最小, vh連動, デザイン値) — 高い画面ではデザイン通り。
  ------------------------------------------------------------ */
}
@media screen and (min-width: 768px) {
  .l-sidebar {
    overflow-y: auto;
  }
  .l-sidebar .l-sidebar__inner {
    gap: clamp(6px, 1.5vh, 18px);
    padding-top: clamp(10px, 2vh, 20px);
    padding-bottom: clamp(12px, 2vh, 24px);
  }
  .l-sidebar .l-sidebar__logo img {
    width: clamp(56px, 9vh, 100px);
  }
  .l-sidebar .l-sidebar__logo-text {
    margin-top: clamp(2px, 0.6vh, 6px);
    font-size: 18px;
  }
  .l-sidebar .l-sidebar__nav ul {
    gap: clamp(6px, 1.4vh, 14px);
  }
  .l-sidebar .l-sidebar__nav a {
    font-size: max(18px, 1.7vh);
  }
  .l-sidebar .l-sidebar__insta svg {
    width: clamp(20px, 2.6vh, 26px);
    height: auto;
  }
  .l-sidebar .l-sidebar__actions {
    gap: clamp(6px, 1vh, 10px);
  }
  .l-sidebar .l-sidebar__actions .c-action {
    padding: clamp(8px, 1.5vh, 16px) 0.8rem;
    gap: clamp(2px, 0.5vh, 6px);
  }
  .l-sidebar .l-sidebar__actions .c-action__icon svg {
    width: clamp(20px, 3vh, 30px);
    height: auto;
  }
}
@media screen and (min-width: 768px) {
  .l-sidebar .l-sidebar__close,
  .l-sidebar .l-sidebar__chev,
  .l-sidebar .l-sidebar__insta-label {
    display: none;
  }
}
.l-sidebar {
  /* ============================================================
     SP：ハンバーガーで開くドロワー（デザイン 46-14017）
  ============================================================ */
}
@media screen and (max-width: 767px) {
  .l-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100dvh;
    background: #f9f3e7;
    z-index: 200;
    overflow-y: auto;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.32s ease;
    transition: -webkit-transform 0.32s ease;
    transition: transform 0.32s ease;
    transition: transform 0.32s ease, -webkit-transform 0.32s ease;
    -webkit-box-shadow: -0.8rem 0 2.8rem rgba(0, 0, 0, 0.18);
            box-shadow: -0.8rem 0 2.8rem rgba(0, 0, 0, 0.18);
    border-right: none;
  }
  .is-drawer-open .l-sidebar {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  .l-sidebar .l-sidebar__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 0;
    padding: 0;
    min-height: 0;
  }
  .l-sidebar .l-sidebar__head {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 1rem;
    background: #ffffff;
    padding: 1.2rem 1.8rem;
  }
  .l-sidebar .l-sidebar__logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    text-align: left;
  }
  .l-sidebar .l-sidebar__logo img {
    width: 4.6rem;
    margin: 0;
  }
  .l-sidebar .l-sidebar__logo-text {
    margin-top: 0;
    font-size: max(1.5rem, 20px);
  }
  .l-sidebar .l-sidebar__close {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 3rem;
    height: 3rem;
    color: #2b2b2b;
  }
  .l-sidebar .l-sidebar__close svg {
    width: 100%;
    height: 100%;
  }
  .l-sidebar .l-sidebar__actions {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 1.2rem;
    margin-top: 0;
    padding: 2rem 1.8rem 0.8rem;
  }
  .l-sidebar .l-sidebar__actions .c-action {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    aspect-ratio: 1/1;
    border-radius: 1.2rem;
  }
  .l-sidebar .l-sidebar__nav {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    padding: 0.8rem 1.8rem;
  }
  .l-sidebar .l-sidebar__nav ul {
    gap: 1.2rem;
  }
  .l-sidebar .l-sidebar__nav a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background: #ffffff;
    color: #036EB8;
    border-radius: 12px;
    padding: 1.5rem 2.2rem;
    font-weight: 700;
    font-size: max(1.8rem, 18px);
    -webkit-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.06);
            box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.06);
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .l-sidebar .l-sidebar__nav a:hover, .l-sidebar .l-sidebar__nav a:active {
    background: #036EB8;
    color: #ffffff;
  }
  .l-sidebar .l-sidebar__chev {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  .l-sidebar .l-sidebar__chev svg {
    width: 1.6rem;
    height: 1.6rem;
  }
  .l-sidebar .l-sidebar__insta {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    -ms-flex-item-align: stretch;
        align-self: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 0.8rem 1.8rem 3rem;
    background: #036EB8;
    color: #ffffff;
    border-radius: 12px;
    padding: 1.5rem 2.2rem;
    font-weight: 700;
    font-size: max(1.6rem, 20px);
    -webkit-box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.06);
            box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.06);
  }
  .l-sidebar .l-sidebar__insta .l-sidebar__insta-icon {
    display: none;
  }
}

/* ============================================================
   SP：トップバー & ハンバーガー
============================================================ */
.l-topbar {
  display: none;
}
@media screen and (max-width: 767px) {
  .l-topbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6.4rem;
    padding: 0 1.8rem;
    background: #ffffff;
    z-index: 150;
    -webkit-box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.08);
            box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.08);
  }
}
.l-topbar__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}
.l-topbar__logo img {
  width: 4rem;
  height: auto;
}
.l-topbar__logo span {
  color: #036EB8;
  font-weight: 700;
  font-size: max(1.4rem, 20px);
  line-height: 1.25;
}
.l-topbar__toggle {
  width: 4rem;
  height: 3rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.6rem;
  z-index: 210;
}
.l-topbar__toggle span {
  display: block;
  height: 0.3rem;
  width: 100%;
  background: #036EB8;
  border-radius: 2px;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
}
.l-topbar__toggle[aria-expanded=true] span:nth-child(1) {
  -webkit-transform: translateY(0.9rem) rotate(45deg);
          transform: translateY(0.9rem) rotate(45deg);
}
.l-topbar__toggle[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
}
.l-topbar__toggle[aria-expanded=true] span:nth-child(3) {
  -webkit-transform: translateY(-0.9rem) rotate(-45deg);
          transform: translateY(-0.9rem) rotate(-45deg);
}

@media screen and (max-width: 767px) {
  .l-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 190;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }
  .l-drawer-overlay[hidden] {
    display: block;
  }
  .is-drawer-open .l-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}
@media screen and (min-width: 768px) {
  .l-drawer-overlay {
    display: none;
  }
}

/* 即時初期化（bfcache 復帰時の状態崩れ対策）：
   JS が body に .is-drawer-noanim を一瞬付与し、アニメ無しで閉状態に確定させる */
.is-drawer-noanim .l-sidebar,
.is-drawer-noanim .l-drawer-overlay,
.is-drawer-noanim .l-topbar__toggle span {
  -webkit-transition: none !important;
  transition: none !important;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
.l-footer {
  background: #ffffff;
  color: #036EB8;
}
@media screen and (min-width: 768px) {
  .l-footer {
    margin-left: 172px;
  }
}
.l-footer__main {
  background-color: #f2f8fb;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.5))), url("../img/common/footer_bg.jpg");
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../img/common/footer_bg.jpg");
  background-size: cover;
  background-position: center;
}
.l-footer__inner {
  max-width: 1224px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin: 0 auto;
  padding: 5.6rem 4.8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.8rem;
}
@media screen and (max-width: 767px) {
  .l-footer__inner {
    grid-template-columns: 1fr;
    padding: 4rem 2.4rem;
    gap: 3.2rem;
  }
}
.l-footer {
  /* 左：会社情報 */
}
.l-footer__logo {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
}
.l-footer__logo img {
  width: 13rem;
  height: auto;
}
.l-footer__logo span {
  color: #036EB8;
  font-weight: 700;
  font-size: max(2.6rem, 20px);
  line-height: 1.3;
}
.l-footer__logo:hover {
  opacity: 0.7;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.l-footer__address {
  margin-top: 1.8rem;
  font-size: max(1.8rem, 18px);
  line-height: 1.9;
  color: #036EB8;
}
.l-footer__address a {
  color: #036EB8;
  text-decoration: underline;
}
.l-footer__map {
  margin-top: 1.8rem;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 2/1;
}
.l-footer__map iframe {
  width: 100%;
  display: block;
}
.l-footer {
  /* 右：ボタン・ナビ */
}
.l-footer__side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.4rem;
}
.l-footer__ext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
@media screen and (max-width: 767px) {
  .l-footer__ext {
    grid-template-columns: 1fr;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
.l-footer__nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem 2.2rem;
}
.l-footer__nav ul a {
  color: #036EB8;
  font-weight: 700;
  font-size: max(1.8rem, 18px);
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.l-footer__nav ul a:hover {
  opacity: 0.82;
}
.l-footer__nav-sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.2rem 2.2rem;
  margin-top: 1.4rem;
}
.l-footer__legal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem 2.2rem;
}
.l-footer__legal a {
  color: #036EB8;
  font-weight: 700;
  font-size: max(1.8rem, 18px);
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.l-footer__legal a:hover {
  opacity: 0.82;
}
.l-footer__insta a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.l-footer__insta a svg {
  width: 2.4rem;
  height: 2.4rem;
}
.l-footer__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.2rem;
}
.l-footer__actions .c-action {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 12rem;
}
@media screen and (max-width: 767px) {
  .l-footer__actions .c-action {
    max-width: none;
  }
}
.l-footer__copy {
  text-align: center;
  font-size: max(1.4rem, 20px);
  letter-spacing: 0.08em;
  padding: 2.4rem 2rem 3rem;
  color: #555;
}

/* 外部リンクバナーボタン（共通の車写真＋各色ティント） */
.c-extbtn {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 9.2rem;
  padding: 1.6rem 3.8rem 1.6rem 2.2rem;
  border-radius: 1.4rem;
  overflow: hidden;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.c-extbtn:hover {
  opacity: 0.82;
}
.c-extbtn {
  background-image: url("../img/common/footer-btn-bg.jpg");
  background-size: cover;
  background-position: center;
}
.c-extbtn__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.2rem;
  min-width: 0;
}
.c-extbtn__sub {
  font-size: max(1.3rem, 12px);
  opacity: 0.95;
  white-space: nowrap;
}
.c-extbtn__label {
  font-size: max(1.6rem, 13px);
  white-space: nowrap;
}
.c-extbtn__ext {
  position: absolute;
  right: 1.4rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.c-extbtn__ext svg {
  width: 1.8rem;
  height: 1.8rem;
}
.c-extbtn--ev {
  background-image: url("../img/common/footer-btn-bg_1.png");
}
.c-extbtn--lost {
  background-image: url("../img/common/footer-btn-bg_2.png");
}
.c-extbtn--room {
  background-image: url("../img/common/footer-btn-bg_3.png");
}
.c-extbtn--kariteco {
  background-color: #E21F26;
  background-image: none;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 1.4rem;
}
.c-extbtn--kariteco .c-extbtn__body {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  text-align: left;
  gap: 0.4rem;
}
.c-extbtn--kariteco .c-extbtn__label {
  font-size: max(2.6rem, 20px);
  line-height: 1.05;
  letter-spacing: 0.04em;
}
.c-extbtn--kariteco .c-extbtn__sub {
  font-size: max(1.3rem, 12px);
}
.c-extbtn__logo {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 5.4rem;
}
.c-extbtn__logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* 見出し（英字ラベル + 日本語） */
.c-heading {
  margin-bottom: 4.8rem;
}
.c-heading__en {
  display: block;
  color: #036EB8;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: max(1.5rem, 20px);
  line-height: 1.4;
}
.c-heading__ja {
  color: #036EB8;
  font-weight: 700;
  font-size: max(3.4rem, 20px);
  line-height: 1.3;
  margin-top: 0.6rem;
}
.c-heading--light .c-heading__en, .c-heading--light .c-heading__ja {
  color: #ffffff;
}
.c-heading--row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1.6rem;
}
@media screen and (max-width: 767px) {
  .c-heading {
    margin-bottom: 2.8rem;
  }
  .c-heading__ja {
    font-size: max(2.4rem, 20px);
  }
  .c-heading__en {
    font-size: max(1.3rem, 20px);
  }
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* 汎用ボタン（ピル型） */
.c-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 3rem;
  border-radius: 999px;
  color: #ffffff;
  font-weight: 700;
  font-size: max(1.7rem, 20px);
  line-height: 1.4;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.c-btn:hover {
  opacity: 0.82;
}
.c-btn svg {
  width: 2.2rem;
  height: 2.2rem;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}
.c-btn__ic {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.c-btn__ic svg {
  width: 2.6rem;
  height: 2.6rem;
}
.c-btn > svg:last-child {
  margin-left: 0.4rem;
}
.c-btn--gold {
  background: #C3904C;
  -webkit-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.25);
}
.c-btn--white {
  background: #ffffff;
  color: #C3904C;
}
.c-btn--white svg {
  color: #C3904C;
}
.c-btn--navy {
  background: #02435E;
}
@media screen and (max-width: 767px) {
  .c-btn {
    font-size: max(1.5rem, 20px);
    padding: 1.4rem 2.4rem;
  }
}

/* 「詳しく見る」等の中央寄せラッパ */
.c-more {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .c-more {
    margin-top: 2.4rem;
  }
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* サイドバー / フッター共通のアクションボタン（P・バス・船） */
.c-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.6rem;
  border-radius: 1.2rem;
  color: #ffffff;
  text-align: center;
  padding: 1.6rem 0.8rem;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.c-action:hover {
  opacity: 0.82;
}
.c-action {
  -webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.16);
          box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.16);
}
.c-action__icon svg {
  width: 3rem;
  height: 3rem;
  color: #ffffff;
}
.c-action__label {
  font-weight: 700;
  font-size: max(1.3rem, 13px);
  line-height: 1.3;
  position: relative;
}
.c-action__ext {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.3rem;
}
.c-action__ext svg {
  width: 1.1rem;
  height: 1.1rem;
  display: inline;
}
.c-action--parking {
  background: #C3904C;
}
.c-action--bus {
  background: #DB552B;
}
.c-action--boat {
  background: #63B0EF;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* 満空ステータスカード */
.p-parking-card {
  background: #ffffff;
  border-radius: 1.6rem;
  -webkit-box-shadow: 0 0.6rem 2.4rem rgba(0, 0, 0, 0.08);
          box-shadow: 0 0.6rem 2.4rem rgba(0, 0, 0, 0.08);
  padding: 2.4rem 2.8rem 3.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}
.p-parking-card--link {
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.p-parking-card--link:hover {
  opacity: 0.7;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.p-parking-card__head {
  width: 100%;
  max-width: 23rem;
  background: #036EB8;
  color: #ffffff;
  border-radius: 16px;
  text-align: center;
  padding: 1rem 1.2rem 0.8rem;
  line-height: 1.2;
}
.p-parking-card__name {
  display: block;
  font-weight: 700;
  font-size: max(2rem, 20px);
}
.p-parking-card__map {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  font-size: max(1.1rem, 20px);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-parking-card__map:hover {
  opacity: 0.82;
}
.p-parking-card__ext {
  width: 1rem;
  height: 1rem;
  border: 0.15rem solid currentColor;
  border-radius: 0.2rem;
  position: relative;
}
.p-parking-card__ext::after {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 0.15rem solid currentColor;
  border-right: 0.15rem solid currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background: #036EB8;
}
.p-parking-card__status {
  width: 15rem;
  height: 15rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.p-parking-card__status.has-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.p-parking-card__status:not(.has-img) {
  border: 0.6rem solid currentColor;
  border-radius: 0.6rem;
}
.p-parking-card__status:not(.has-img) span {
  font-weight: 900;
  font-size: max(4rem, 20px);
  letter-spacing: 0.08em;
}
.p-parking-card__status.is-reserved {
  color: #8a8a8a;
}
.p-parking-card__status.is-unknown {
  color: #c9c9c9;
}
.p-parking-card__status.is-unknown span {
  font-size: max(2.8rem, 20px);
}
.p-parking-card__status.is-adjusting {
  color: #C3904C;
}
.p-parking-card__status.is-adjusting span {
  font-size: max(2.8rem, 20px);
}
@media screen and (max-width: 767px) {
  .p-parking-card {
    padding: 2.2rem 2.4rem 2.8rem;
  }
  .p-parking-card__status {
    width: 15rem;
    height: 15rem;
  }
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* ニュースのカテゴリーバッジ（配色モディファイア付き） */
.c-newscat {
  display: inline-block;
  color: #ffffff;
  background: #036EB8;
  font-size: max(1.3rem, 20px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 0.5rem 1.4rem;
  border-radius: 0.4rem;
}
.c-newscat.is-topics {
  background: #036EB8;
}
.c-newscat.is-media {
  background: #DB552B;
}
.c-newscat.is-other {
  background: #9aa0a6;
}
.c-newscat.is-c1 {
  background: #036EB8;
}
.c-newscat.is-c2 {
  background: #DB552B;
}
.c-newscat.is-c3 {
  background: #9aa0a6;
}
.c-newscat.is-c4 {
  background: #C3904C;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* 下層ページのヘッダー（写真バナー＋タイトルボックス） */
.p-pagehead {
  position: relative;
  aspect-ratio: 2/1;
  background-image: var(--head-pc);
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 767px) {
  .p-pagehead {
    aspect-ratio: 1/1;
    background-image: var(--head-sp);
  }
}
.p-pagehead__inner {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-pagehead__titlebox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.p-pagehead__en {
  display: inline-block;
  background: #ffffff;
  color: #036EB8;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  font-size: max(1.8rem, 20px);
  padding: 0.6rem 1.6rem;
}
@media screen and (max-width: 767px) {
  .p-pagehead__en {
    font-size: max(1.4rem, 20px);
    padding: 0.4rem 1.2rem;
  }
}
.p-pagehead__ja {
  display: inline-block;
  background: #ffffff;
  color: #036EB8;
  font-weight: 900;
  line-height: 1.1;
  font-size: max(4rem, 20px);
  padding: 1rem 2.4rem;
}
@media screen and (max-width: 767px) {
  .p-pagehead__ja {
    font-size: max(2.8rem, 20px);
    padding: 0.6rem 1.6rem;
  }
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* ニュースのカテゴリー絞り込みタブ */
.p-newsfilter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
  margin: 4.4rem 0 3rem;
}
@media screen and (max-width: 767px) {
  .p-newsfilter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin: 2.8rem 0 2rem;
  }
}
.p-newsfilter__tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 13.6rem;
  padding: 1.2rem 2rem;
  border: 0.15rem solid currentColor;
  border-radius: 0.4rem;
  background: #ffffff;
  font-weight: 700;
  font-size: max(1.6rem, 20px);
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-newsfilter__tab:hover {
  opacity: 0.82;
}
@media screen and (max-width: 767px) {
  .p-newsfilter__tab {
    min-width: 0;
    padding: 0.9rem 1.2rem;
  }
}
.p-newsfilter__tab.is-topics {
  color: #036EB8;
}
.p-newsfilter__tab.is-topics:hover {
  background: #036EB8;
  color: #ffffff;
}
.p-newsfilter__tab.is-media {
  color: #DB552B;
}
.p-newsfilter__tab.is-media:hover {
  background: #DB552B;
  color: #ffffff;
}
.p-newsfilter__tab.is-other {
  color: #9aa0a6;
}
.p-newsfilter__tab.is-other:hover {
  background: #9aa0a6;
  color: #ffffff;
}
.p-newsfilter__tab.is-c1 {
  color: #036EB8;
}
.p-newsfilter__tab.is-c1:hover {
  background: #036EB8;
  color: #ffffff;
}
.p-newsfilter__tab.is-c2 {
  color: #DB552B;
}
.p-newsfilter__tab.is-c2:hover {
  background: #DB552B;
  color: #ffffff;
}
.p-newsfilter__tab.is-c3 {
  color: #9aa0a6;
}
.p-newsfilter__tab.is-c3:hover {
  background: #9aa0a6;
  color: #ffffff;
}
.p-newsfilter__tab.is-c4 {
  color: #C3904C;
}
.p-newsfilter__tab.is-c4:hover {
  background: #C3904C;
  color: #ffffff;
}
.p-newsfilter__tab.is-all {
  color: #ffffff;
  background: #622816;
  border-color: #622816;
}
.p-newsfilter__tab.is-current:not(.is-all) {
  color: #ffffff;
}
.p-newsfilter__tab.is-current:not(.is-all).is-topics {
  background: #036EB8;
}
.p-newsfilter__tab.is-current:not(.is-all).is-media {
  background: #DB552B;
}
.p-newsfilter__tab.is-current:not(.is-all).is-other {
  background: #9aa0a6;
}
.p-newsfilter__tab.is-current:not(.is-all).is-c1 {
  background: #036EB8;
}
.p-newsfilter__tab.is-current:not(.is-all).is-c2 {
  background: #DB552B;
}
.p-newsfilter__tab.is-current:not(.is-all).is-c3 {
  background: #9aa0a6;
}
.p-newsfilter__tab.is-current:not(.is-all).is-c4 {
  background: #C3904C;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* ページネーション（< 1 2 3 4 5… >） */
.p-pager {
  margin: 4rem 0 1rem;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .p-pager {
    text-align: center;
  }
}
.p-pager ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .p-pager ul {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1.4rem;
  }
}
.p-pager .page-numbers {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #9aa0a6;
  font-size: max(2rem, 20px);
  font-weight: 700;
  line-height: 1;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-pager .page-numbers:hover {
  opacity: 0.82;
}
.p-pager .page-numbers.current {
  color: #2b2b2b;
  font-size: max(2.2rem, 20px);
}
.p-pager .page-numbers.prev, .p-pager .page-numbers.next {
  color: #9aa0a6;
}
.p-pager .page-numbers.prev svg, .p-pager .page-numbers.next svg {
  width: 2rem;
  height: 2rem;
}
.p-pager .page-numbers.prev:hover, .p-pager .page-numbers.next:hover {
  color: #036EB8;
}
.p-pager .page-numbers.prev svg {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.p-pager .page-numbers.dots {
  color: #9aa0a6;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* パンくず */
.c-breadcrumb {
  margin: 2.8rem 0 3rem;
  font-size: max(1.5rem, 20px);
  color: #2b2b2b;
}
@media screen and (max-width: 767px) {
  .c-breadcrumb {
    font-size: max(1.3rem, 20px);
    margin: 1.8rem 0 2rem;
  }
}
.c-breadcrumb ol {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.c-breadcrumb li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.c-breadcrumb li:not(:last-child)::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 1.2rem;
  border-top: 0.15rem solid #9aa0a6;
  border-right: 0.15rem solid #9aa0a6;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.c-breadcrumb a {
  color: #7a7f85;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.c-breadcrumb a:hover {
  opacity: 0.82;
}
.c-breadcrumb span[aria-current] {
  color: #2b2b2b;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* ============================================================
   共通：セクション間の余白
============================================================ */
.p-parking, .p-news {
  padding: 8rem 0;
}

.p-event {
  padding: 8rem 0;
}

.p-parking {
  padding-top: 5.6rem;
}

.p-news {
  background: #f4f3f1;
}

@media screen and (max-width: 767px) {
  .p-parking, .p-news, .p-event {
    padding: 4.8rem 0;
  }
}
/* ============================================================
   HERO
============================================================ */
.p-hero {
  padding-top: 2.8rem;
}
@media screen and (min-width: 768px) {
  .p-hero {
    padding: 4rem 0 0;
  }
}
.p-hero__lead {
  margin-bottom: 2rem;
  padding: 0 2.4rem;
}
@media screen and (min-width: 768px) {
  .p-hero__lead {
    padding: 0 4rem;
  }
}
.p-hero__sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  color: #036EB8;
  font-weight: 600;
  font-size: max(1.8rem, 20px);
}
@media screen and (max-width: 767px) {
  .p-hero__sub {
    font-size: max(1.5rem, 20px);
  }
}
.p-hero__line {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 12rem;
          flex: 0 0 12rem;
  height: 0.2rem;
  background: #036EB8;
}
@media screen and (max-width: 767px) {
  .p-hero__line {
    -ms-flex-preferred-size: 6rem;
        flex-basis: 6rem;
  }
}
.p-hero__title {
  color: #036EB8;
  font-weight: 900;
  font-style: italic;
  font-size: max(5.2rem, 20px);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
  .p-hero__title {
    font-size: max(3.2rem, 20px);
  }
}
.p-hero__slider {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1109/577;
}
@media screen and (max-width: 767px) {
  .p-hero__slider {
    aspect-ratio: 4/3;
  }
}
.p-hero__slider .swiper-wrapper, .p-hero__slider .swiper-slide {
  height: 100%;
}
.p-hero__slider .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.p-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.4rem;
  z-index: 2;
  text-align: center;
}
.p-hero__dots .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.7);
  opacity: 1;
  width: 1rem;
  height: 1rem;
  margin: 0 0.5rem;
}
.p-hero__dots .swiper-pagination-bullet-active {
  background: #ffffff;
}

/* ============================================================
   満空情報
============================================================ */
.p-parking__notice {
  text-align: center;
  color: #e5211a;
  font-size: max(1.6rem, 16px);
  font-weight: 700;
  margin-bottom: 2.8rem;
}
.p-parking__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.8rem;
}
@media screen and (max-width: 767px) {
  .p-parking__grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
}
.p-parking__updated {
  margin-top: 2rem;
  text-align: right;
  font-size: max(1.3rem, 20px);
  color: #777;
}

/* ============================================================
   新着情報
============================================================ */
.p-news__list {
  margin-top: 0.8rem;
}
.p-news__item {
  display: block;
  padding: 2rem 0.2rem;
  border-bottom: 0.1rem solid #d8d8d3;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-news__item:hover {
  opacity: 0.82;
}
.p-news__date {
  display: inline-block;
  vertical-align: middle;
  color: #909090;
  font-size: max(1.8rem, 18px);
  font-weight: 500;
  margin-right: 1.4rem;
}
.p-news .c-newscat {
  vertical-align: middle;
  font-size: max(1.4rem, 14px);
}
.p-news__text {
  display: block;
  margin-top: 1.6rem;
  color: #242424;
  font-size: max(1.6rem, 20px);
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 767px) {
  .p-news__text {
    white-space: normal;
    margin-top: 1rem;
  }
}
.p-news {
  /* アーカイブも同じ2段レイアウト（余白だけ広め） */
}
.p-news__list--archive {
  margin-top: 0.6rem;
}
.p-news__list--archive .p-news__item {
  padding: 2.4rem 0.2rem 2.6rem;
}
.p-news__empty {
  font-size: max(1.6rem, 20px);
  color: #666;
  padding: 2rem 0;
}

/* ============================================================
   イベント情報
============================================================ */
.p-event__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
.p-event__prev, .p-event__next {
  width: 4rem;
  height: 4rem;
  color: #036EB8;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-event__prev:hover, .p-event__next:hover {
  opacity: 0.82;
}
.p-event__prev svg, .p-event__next svg {
  width: 100%;
  height: 100%;
}
.p-event__prev.swiper-button-disabled, .p-event__next.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.p-event__next {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.p-event__slider {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .p-event__slider {
    padding-left: max(4rem, (100% - 1104px) / 2 + 4rem);
  }
}
@media screen and (max-width: 767px) {
  .p-event__slider {
    padding-left: 2.4rem;
  }
}
.p-event__card {
  display: block;
  position: relative;
  border-radius: 1.4rem;
  overflow: hidden;
  -webkit-box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.12);
          box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.12);
  border: 1px solid #000;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-event__card:hover {
  opacity: 0.82;
}
.p-event__thumb {
  display: block;
  position: relative;
  aspect-ratio: 657/400;
  background-size: cover;
  background-position: center;
  background-color: #eef0f2;
}
.p-event__badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  background: #036EB8;
  color: #ffffff;
  font-size: max(1.4rem, 20px);
  font-weight: 700;
  line-height: 1;
  padding: 1.4rem 2.6rem;
}
.p-event__badge.is-c1 {
  background: #036EB8;
}
.p-event__badge.is-c2 {
  background: #DB552B;
}
.p-event__badge.is-c3 {
  background: #9aa0a6;
}
.p-event__badge.is-c4 {
  background: #C3904C;
}
.p-event__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  padding: 4.6rem 2.2rem 2rem;
  color: #ffffff;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), color-stop(45%, rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 100%);
}
.p-event__date {
  display: block;
  font-size: max(1.3rem, 20px);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.p-event__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: max(1.5rem, 20px);
  line-height: 1.65;
}
.p-event__scrollbar.swiper-scrollbar {
  position: static;
  width: 100%;
  height: 0.4rem;
  margin-top: 2.4rem;
  background: #e5e5e5;
  border-radius: 999px;
}
.p-event__scrollbar.swiper-scrollbar .swiper-scrollbar-drag {
  background: #9a9a9a;
  border-radius: 999px;
}
.p-event .swiper-slide {
  width: 65rem;
  max-width: 84%;
  height: auto;
}
@media screen and (max-width: 767px) {
  .p-event .swiper-slide {
    width: 30rem;
    max-width: 88%;
  }
}

/* ============================================================
   施設案内 FLOOR（フルブリード・ブルー）
============================================================ */
.p-floor {
  background: #036EB8;
  color: #ffffff;
  padding: 9rem 0;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-floor {
    margin-left: -172px;
    width: calc(100% + 172px);
    padding-left: 172px;
  }
}
.p-floor {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .p-floor {
    padding: 5.6rem 0;
  }
}
.p-floor::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1323/227;
  -webkit-transform: translateY(-99%);
          transform: translateY(-99%);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1323 227' fill='none'><path d='M428.5 170.228C201.3 199.428 49.5001 95.7284 2.00011 40.2284L-47 226.728L1497 226.728C1546.83 207.895 1593 144.228 1379 40.2283C1111.5 -89.7717 712.5 133.728 428.5 170.228Z' fill='%23036EB8'/></svg>") no-repeat left bottom;
  background-size: 100% 100%;
  pointer-events: none;
}
.p-floor__inner {
  display: grid;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  grid-template-columns: 1fr 41rem;
  gap: 5rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media screen and (max-width: 767px) {
  .p-floor__inner {
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }
}
@media screen and (min-width: 768px) {
  .p-floor__text {
    position: -webkit-sticky;
    position: sticky;
    top: 9rem;
    -ms-flex-item-align: start;
        align-self: start;
  }
}
.p-floor__catch {
  font-weight: 700;
  font-size: max(2.4rem, 20px);
  line-height: 1.6;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .p-floor__catch {
    font-size: max(1.9rem, 20px);
  }
}
.p-floor__lead {
  font-size: max(1.6rem, 20px);
  line-height: 2;
  margin-bottom: 3.4rem;
}
.p-floor__photos {
  display: grid;
  gap: 2.4rem;
}
.p-floor__photos img {
  width: 100%;
  border-radius: 3.1rem;
  display: block;
  -webkit-box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 767px) {
  .p-floor__photos {
    gap: 1.6rem;
  }
}

/* ============================================================
   観光案内 NEARBY（フルブリード・濃紺）
============================================================ */
.p-nearby {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  padding: 7rem 0 8rem;
}
@media screen and (min-width: 768px) {
  .p-nearby {
    margin-left: -172px;
    width: calc(100% + 172px);
    padding-left: 172px;
  }
}
.p-nearby {
  background-color: #02435E;
  background-image: url("../img/top/nearby_bg.jpg");
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 767px) {
  .p-nearby {
    padding: 0rem 0 5.6rem;
  }
}
.p-nearby__map {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 64%;
  max-width: 76rem;
  pointer-events: none;
}
.p-nearby__map img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  .p-nearby__map img {
    aspect-ratio: 500/300;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: bottom;
       object-position: bottom;
  }
}
@media screen and (max-width: 767px) {
  .p-nearby__map {
    position: static;
    width: 100%;
    margin: 0 0 1rem;
  }
}
.p-nearby__inner {
  position: relative;
  z-index: 2;
}
.p-nearby__lead {
  font-size: max(1.6rem, 20px);
  line-height: 1.95;
  margin-bottom: 3rem;
}
.p-nearby__spots-wrap {
  position: relative;
  z-index: 2;
  margin-top: 6rem;
  margin-left: -4rem;
  margin-right: -4rem;
  padding: 0 4rem 0.8rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 767px) {
  .p-nearby__spots-wrap {
    margin-top: 3.6rem;
  }
}
.p-nearby__spots {
  min-width: 110rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2.4rem;
}
.p-nearby__spot {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 24rem;
  max-width: 23%;
  text-align: center;
}
.p-nearby__spot:nth-child(even) {
  margin-top: 7.2rem;
}
.p-nearby__cap {
  position: relative;
  display: inline-block;
  color: #E3B737;
  font-weight: 700;
  font-size: max(1.6rem, 16px);
  line-height: 1.6;
  margin-bottom: 2.4rem;
  padding: 0 0.8rem;
}
.p-nearby__cap::before, .p-nearby__cap::after {
  content: "";
  position: absolute;
  bottom: -0.2rem;
  width: 0.2rem;
  height: 3.4rem;
  background: #C3904C;
  border-radius: 0.1rem;
}
.p-nearby__cap::before {
  left: 0;
  -webkit-transform: rotate(-28deg);
          transform: rotate(-28deg);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.p-nearby__cap::after {
  right: 0;
  -webkit-transform: rotate(28deg);
          transform: rotate(28deg);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.p-nearby__circle {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #2b4d60;
  background-size: cover;
  background-position: center;
  -webkit-box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.3);
          box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.3);
}

/* ============================================================
   駐車場情報 PARKING INFORMATION（フルブリード・ゴールド）
============================================================ */
.p-pinfo {
  background: #C3904C;
  color: #ffffff;
  padding: 8rem 0;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .p-pinfo {
    margin-left: -172px;
    width: calc(100% + 172px);
    padding-left: 172px;
  }
}
@media screen and (max-width: 767px) {
  .p-pinfo {
    padding: 5.2rem 0;
  }
}
.p-pinfo::after {
  content: "";
  position: absolute;
  right: -1rem;
  bottom: 2rem;
  width: 46rem;
  height: 43.6rem;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 472 447' fill='none'><g opacity='0.3'><path d='M459.189 196.872L429.237 64.873C423.103 27.2039 391.013 0 352.443 0H138.99C100.42 0 68.3304 27.1994 62.1961 64.873L32.1601 196.921C13.1977 207.489 0 229.903 0 255.771V339.007C0 374.941 25.4096 404.348 56.463 404.348H72.5872V445.454C72.5872 462.518 84.54 476.346 99.282 476.346H121.637C136.38 476.346 148.331 462.518 148.331 445.454V404.348H343.102V445.454C343.102 462.518 355.053 476.346 369.798 476.346H392.151C406.894 476.346 418.847 462.518 418.847 445.454V404.348H434.971C466.027 404.348 491.434 374.94 491.434 339.007V255.771C491.433 229.869 478.194 207.419 459.189 196.872ZM98.6562 335.561C80.7832 335.561 66.2955 318.796 66.2955 298.113C66.2955 277.43 80.7832 260.665 98.6562 260.665C116.529 260.665 131.017 277.43 131.017 298.113C131.017 318.796 116.529 335.561 98.6562 335.561ZM289.299 335.561H202.134V283.388H289.299V335.561ZM80.2563 190.434L106.024 77.1532L106.45 74.8629C108.279 62.3539 122.878 52.1752 138.99 52.1752H352.443C368.556 52.1752 383.154 62.3539 384.981 74.8629L411.204 190.435L80.2563 190.434ZM392.777 335.561C374.904 335.561 360.417 318.796 360.417 298.113C360.417 277.43 374.904 260.665 392.777 260.665C410.65 260.665 425.14 277.43 425.14 298.113C425.14 318.796 410.65 335.561 392.777 335.561Z' fill='white'/></g></svg>") no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .p-pinfo::after {
    display: none;
  }
}
.p-pinfo__lead {
  position: relative;
  z-index: 2;
  font-size: max(1.6rem, 20px);
  line-height: 2;
  margin-bottom: 3.2rem;
}
.p-pinfo__lead strong {
  font-size: max(2.1rem, 20px);
  font-weight: 700;
}
.p-pinfo__tel {
  text-decoration: underline;
}
.p-pinfo__cards {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2.8rem;
  margin-bottom: 3.6rem;
}
@media screen and (max-width: 767px) {
  .p-pinfo__cards {
    gap: 1.6rem;
  }
}
.p-pinfo__card {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 41rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  border: 0.4rem solid #ffffff;
  border-radius: 1rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .p-pinfo__card {
    width: 100%;
  }
}
.p-pinfo__card dt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 12.8rem;
          flex: 0 0 12.8rem;
  color: #ffffff;
  font-weight: 700;
  font-size: max(1.9rem, 20px);
  padding: 2rem 1.6rem;
}
@media screen and (max-width: 767px) {
  .p-pinfo__card dt {
    -ms-flex-preferred-size: 10.4rem;
        flex-basis: 10.4rem;
  }
}
.p-pinfo__card dd {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #ffffff;
  color: #C3904C;
  padding: 1.6rem 2.6rem;
  line-height: 1.4;
}
.p-pinfo__card dd strong {
  font-size: max(3rem, 20px);
  font-weight: 900;
}
.p-pinfo__card dd span {
  font-size: max(1.8rem, 20px);
  font-weight: 700;
}
.p-pinfo__card dd small {
  font-size: max(1.4rem, 14px);
}
.p-pinfo__card .p-pinfo__hours {
  gap: 0.6rem;
}
.p-pinfo__card .p-pinfo__hours-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 1.4rem;
}
.p-pinfo__card .p-pinfo__hours-label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: max(1.5rem, 20px);
  font-weight: 700;
}
.p-pinfo__card .p-pinfo__hours-val {
  font-size: max(2rem, 20px);
  font-weight: 700;
}
.p-pinfo__btn {
  position: relative;
  z-index: 2;
  color: #ffffff;
  -webkit-box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.18);
          box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.18);
}
.p-pinfo__btn svg {
  color: #ffffff;
}

/* ============================================================
   広告バナー群
============================================================ */
.p-banners {
  background: #f4f3f1;
  padding: 7rem 0 8rem;
}
@media screen and (max-width: 767px) {
  .p-banners {
    padding: 4.4rem 0 5.2rem;
  }
}
.p-banners__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .p-banners__grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}
.p-banners__item {
  display: block;
  aspect-ratio: 3/1;
  border-radius: 0.4rem;
  overflow: hidden;
  background: #eceae5;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-banners__item:hover {
  opacity: 0.82;
}
.p-banners__item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.p-banners__ad {
  background: #e7e5df;
  margin: 4rem 0;
  padding: 2.4rem 0;
}
.p-banners__ad-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2.4rem;
}
@media screen and (max-width: 767px) {
  .p-banners__ad-inner {
    gap: 1.6rem;
  }
}
.p-banners__ad-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.4rem;
  font-weight: 700;
  font-size: max(1.7rem, 20px);
}
.p-banners__ad-ic svg {
  width: 3rem;
  height: 3rem;
  color: #897136;
}
.p-banners__ad .c-btn--gold {
  background: #897136;
}
.p-banners__flatto {
  display: block;
  border-radius: 0.6rem;
  overflow: hidden;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-banners__flatto:hover {
  opacity: 0.82;
}
.p-banners__flatto picture {
  display: block;
}
.p-banners__flatto img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* ============================================================
   インスタグラム（Taggbox埋め込み）セクション
   ・見出し／金ボタン／左右ボタンはテーマ側で実装
   ・Taggboxのカスケード配置(絶対配置)を横スライダーにCSSで上書き
============================================================ */
#subtree-container {
  display: none !important;
}

.tb_onsite_upload_btn_wrap,
.tb_see_more_btn_wrap {
  display: none !important;
}

.tb_app_wrapper {
  background-color: unset !important;
}

.p-insta {
  background: #eaf4fb;
  padding: 7rem 0 calc(8rem + 17.1579743008vw);
}
@media screen and (max-width: 767px) {
  .p-insta {
    padding: 4.8rem 0 calc(5.6rem + 17.1579743008vw);
  }
}
@media screen and (min-width: 768px) {
  .p-insta {
    margin-left: -172px;
    width: calc(100% + 172px);
    padding-left: 172px;
  }
}
.p-insta__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
.p-insta__prev, .p-insta__next {
  width: 4rem;
  height: 4rem;
  color: #036EB8;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-insta__prev:hover, .p-insta__next:hover {
  opacity: 0.82;
}
.p-insta__prev svg, .p-insta__next svg {
  width: 100%;
  height: 100%;
}
.p-insta__next {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.p-insta__feed {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-insta__feed {
    margin-top: 2.8rem;
  }
}
.p-insta__feed {
  /* --- Taggboxのカスケード(絶対配置)を横1列スクロールに上書き --- */
}
.p-insta__feed .tb_w_c_post_container {
  position: static !important;
  height: auto !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-scroll-snap-type: x proximity;
      -ms-scroll-snap-type: x proximity;
          scroll-snap-type: x proximity;
  padding-bottom: 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: #036EB8 #cfe0ee;
}
.p-insta__feed .tb_w_c_post_container::-webkit-scrollbar {
  height: 0.6rem;
}
.p-insta__feed .tb_w_c_post_container::-webkit-scrollbar-track {
  background: #cfe0ee;
  border-radius: 999px;
}
.p-insta__feed .tb_w_c_post_container::-webkit-scrollbar-thumb {
  background: #036EB8;
  border-radius: 999px;
}
.p-insta__feed .tb_w_c_post_wrapper {
  position: static !important;
  left: auto !important;
  top: auto !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: 0 0 30% !important;
          flex: 0 0 30% !important;
  width: 30% !important;
  padding: 0.8rem !important;
  scroll-snap-align: start;
}
@media screen and (max-width: 767px) {
  .p-insta__feed .tb_w_c_post_wrapper {
    -ms-flex-preferred-size: 64% !important;
        flex-basis: 64% !important;
    width: 64% !important;
  }
}
.p-insta__feed {
  /* --- カードを画像全面のクリーンな見た目に（Figma準拠） --- */
}
.p-insta__feed .tb_w_c_post_in {
  position: relative !important;
  padding: 0 !important;
  border-radius: 1.4rem;
  overflow: hidden;
  -webkit-box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.18);
          box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.18);
}
.p-insta__feed .tb_w_c_image {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
.p-insta__feed .tb_w_c_contant_wrapper {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 !important;
  padding: 1.2rem !important;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))) !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) !important;
  z-index: 2;
}
.p-insta__feed .tb_w_c_author {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
}
.p-insta__feed .tb_w_c_authorname {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: max(1.3rem, 11px);
  line-height: 1.3;
}
.p-insta__feed .tb_w_c_time {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: max(1.1rem, 10px);
}
.p-insta__feed .tb_w_c_username,
.p-insta__feed .tb_w_c_seprator,
.p-insta__feed .tb_w_c_social_,
.p-insta__feed .tb_w_c_content {
  display: none !important;
}
.p-insta__feed .tb_w_c_author_profile {
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}
.p-insta__feed .tb_w_c_author_profile img {
  display: block;
  border-radius: 50%;
  border: 2px solid #fff;
  width: 3.8rem;
  height: 3.8rem;
}
.p-insta__cta {
  margin-top: 3.6rem;
}
@media screen and (max-width: 767px) {
  .p-insta__cta {
    margin-top: 2.8rem;
  }
}
.p-insta__cta .c-btn__ic svg path {
  fill: #ffffff;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* 汎用ページ（固定ページ / アーカイブ / 404） */
.l-page {
  padding: 7rem 0 9rem;
}
@media screen and (max-width: 767px) {
  .l-page {
    padding: 4.4rem 0 5.6rem;
  }
}
.l-page__content {
  font-size: max(1.6rem, 20px);
  line-height: 2;
}
.l-page__content p {
  margin-bottom: 2rem;
}
.l-page__content img {
  border-radius: 0.8rem;
}
.l-page__list {
  border-top: 0.1rem solid #d8d8d3;
}
.l-page__empty {
  font-size: max(1.6rem, 20px);
  color: #666;
}
.l-page__pager {
  margin-top: 4rem;
}
.l-page__pager .page-numbers {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 4rem;
  height: 4rem;
  padding: 0 1rem;
  border: 0.1rem solid #ccc;
  border-radius: 0.4rem;
  margin: 0 0.3rem;
  font-weight: 700;
}
.l-page__pager .page-numbers.current {
  background: #036EB8;
  color: #ffffff;
  border-color: #036EB8;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* 記事詳細（single-news） */
.p-single {
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .p-single {
    padding-bottom: 4.8rem;
  }
}
.p-single__thumb {
  margin-bottom: 4rem;
}
.p-single__thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.4rem;
}
@media screen and (max-width: 767px) {
  .p-single__thumb {
    margin-bottom: 2.4rem;
  }
}
.p-single__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.6rem;
  margin-bottom: 1.4rem;
}
.p-single__date {
  color: #555;
  font-size: max(1.5rem, 20px);
  font-weight: 700;
}
.p-single__title {
  font-size: max(2.8rem, 20px);
  font-weight: 700;
  line-height: 1.5;
  color: #2b2b2b;
  margin-bottom: 3.4rem;
}
@media screen and (max-width: 767px) {
  .p-single__title {
    font-size: max(2.2rem, 20px);
    margin-bottom: 2.4rem;
  }
}
.p-single__body {
  font-size: max(1.6rem, 16px);
  line-height: 2.1;
  color: #2b2b2b;
}
.p-single__body > * + * {
  margin-top: 2.4rem;
}
.p-single__body h2 {
  font-size: max(2.2rem, 20px);
  font-weight: 700;
  margin: 4rem 0 1.6rem;
  padding-left: 1.4rem;
  border-left: 0.4rem solid #036EB8;
}
.p-single__body h3 {
  font-size: max(1.9rem, 20px);
  font-weight: 700;
  margin: 3.2rem 0 1.2rem;
}
.p-single__body a {
  color: #036EB8;
  text-decoration: underline;
}
.p-single__body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.4rem;
}
.p-single__body ul, .p-single__body ol {
  padding-left: 1.4em;
}
.p-single__body ul {
  list-style: disc;
}
.p-single__body ol {
  list-style: decimal;
}

/* 前後記事ナビ */
.p-postnav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  margin-top: 5rem;
  color: #909090;
}
@media screen and (max-width: 767px) {
  .p-postnav {
    margin-top: 3.2rem;
  }
}
.p-postnav a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  color: #909090;
  font-size: max(1.6rem, 20px);
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-postnav a:hover {
  opacity: 0.82;
}
@media screen and (max-width: 767px) {
  .p-postnav a {
    font-size: max(1.4rem, 20px);
  }
}
.p-postnav svg {
  width: 1.8rem;
  height: 1.8rem;
  color: #9aa0a6;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}
.p-postnav__prev {
  margin-right: auto;
}
.p-postnav__prev svg {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.p-postnav__next {
  margin-left: auto;
}
.p-postnav__disabled {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  color: #c3c3c3;
  font-weight: 700;
  font-size: max(1.6rem, 20px);
  cursor: default;
}
@media screen and (max-width: 767px) {
  .p-postnav__disabled {
    font-size: max(1.4rem, 20px);
  }
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* イベント一覧（archive-event） */
.p-eventlist {
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .p-eventlist {
    padding-bottom: 4.8rem;
  }
}
.p-eventlist__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.8rem;
}
@media screen and (max-width: 767px) {
  .p-eventlist__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.p-eventlist__card {
  display: block;
  position: relative;
  border-radius: 1.2rem;
  overflow: hidden;
  -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 18px rgba(0, 0, 0, 0.3);
  border: 0.7px solid #000;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-eventlist__card:hover {
  opacity: 0.82;
}
.p-eventlist__thumb {
  position: relative;
  aspect-ratio: 8/5;
  background-size: cover;
  background-position: center;
  background-color: #eef0f2;
}
.p-eventlist__badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  color: #ffffff;
  background: #036EB8;
  font-weight: 700;
  font-size: max(1.4rem, 20px);
  line-height: 1;
  padding: 1.4rem 2.4rem;
}
@media screen and (max-width: 767px) {
  .p-eventlist__badge {
    font-size: max(1.3rem, 20px);
    padding: 1.1rem 1.8rem;
  }
}
.p-eventlist__badge.is-c1 {
  background: #036EB8;
}
.p-eventlist__badge.is-c2 {
  background: #DB552B;
}
.p-eventlist__badge.is-c3 {
  background: #9aa0a6;
}
.p-eventlist__badge.is-c4 {
  background: #C3904C;
}
.p-eventlist__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 4rem 2rem 1.6rem;
  color: #ffffff;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.78)), color-stop(45%, rgba(0, 0, 0, 0.45)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 100%);
}
.p-eventlist__date {
  display: block;
  font-size: max(1.35rem, 13.5px);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.p-eventlist__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: max(1.5rem, 15px);
  line-height: 1.65;
}
.p-eventlist__empty {
  font-size: max(1.6rem, 20px);
  color: #666;
  padding: 2rem 0;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* 施設案内ページ（FLOOR） */
.p-floorpage {
  background: #036EB8;
  color: #ffffff;
  padding: 6.4rem 0 8rem;
}
@media screen and (max-width: 767px) {
  .p-floorpage {
    padding: 4rem 0 5.2rem;
  }
}
.p-floorpage {
  /* 導入文 */
}
.p-floorpage__intro-text {
  font-size: max(2rem, 20px);
  line-height: 2;
  margin-bottom: 3.4rem;
}
.p-floorpage__intro-photo {
  margin-bottom: 5rem;
}
.p-floorpage__intro-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.4rem;
}
@media screen and (max-width: 767px) {
  .p-floorpage__intro-photo {
    margin-bottom: 3.2rem;
  }
}
.p-floorpage {
  /* フロア切替タブ（アンカー） */
}
.p-floorpage__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  margin-bottom: 4.4rem;
}
@media screen and (max-width: 767px) {
  .p-floorpage__tabs {
    gap: 1rem;
    margin-bottom: 2.8rem;
  }
}
.p-floorpage__tab {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20rem;
          flex: 0 0 20rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.4rem 1rem;
  border: 0.15rem solid rgba(255, 255, 255, 0.8);
  border-radius: 0.4rem;
  color: #ffffff;
  font-weight: 700;
  font-size: max(1.6rem, 20px);
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-floorpage__tab:hover {
  opacity: 0.82;
}
@media screen and (max-width: 767px) {
  .p-floorpage__tab {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    font-size: max(1.5rem, 20px);
    padding: 1.1rem 0.6rem;
  }
}
.p-floorpage__tab:hover, .p-floorpage__tab.is-current {
  background: #ffffff;
  color: #036EB8;
  border-color: #ffffff;
}

/* 各フロアブロック */
.p-floorblock {
  padding-top: 3rem;
}
.p-floorblock + .p-floorblock {
  margin-top: 2rem;
}
.p-floorblock__head {
  display: grid;
  grid-template-columns: 1fr 43.2rem;
  gap: 4rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .p-floorblock__head {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .p-floorblock__lead {
    display: contents;
  }
}
.p-floorblock__en {
  display: block;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: max(2.2rem, 22px);
  margin-bottom: 0.8rem;
}
.p-floorblock__title {
  font-size: max(2.8rem, 24px);
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .p-floorblock__title {
    font-size: max(2.4rem, 24px);
  }
}
.p-floorblock__desc {
  font-size: max(1.6rem, 20px);
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .p-floorblock__desc {
    font-size: max(1.5rem, 20px);
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
.p-floorblock__map img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.2rem;
}
@media screen and (max-width: 767px) {
  .p-floorblock__map {
    max-width: 42rem;
    margin: 0 auto;
  }
}

/* フロア内の施設アイテム */
.p-facility + .p-facility {
  margin-top: 4.6rem;
}
.p-facility {
  padding-top: 1.6rem;
}
.p-facility__name {
  font-size: max(2.2rem, 20px);
  font-weight: 700;
  margin-bottom: 1.4rem;
}
@media screen and (max-width: 767px) {
  .p-facility__name {
    font-size: max(1.9rem, 20px);
  }
}
.p-facility__desc {
  font-size: max(1.6rem, 20px);
  line-height: 1.9;
  margin-bottom: 2.2rem;
}
@media screen and (max-width: 767px) {
  .p-facility__desc {
    font-size: max(1.5rem, 20px);
  }
}
.p-facility__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.8rem;
}
@media screen and (max-width: 767px) {
  .p-facility__photos {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}
.p-facility__photos img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1rem;
  -webkit-box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.18);
          box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.18);
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* 観光案内ページ（NEARBY FACILITIES） */
.p-spotlist {
  padding: 5.6rem 0 8rem;
}
@media screen and (max-width: 767px) {
  .p-spotlist {
    padding: 3.6rem 0 4.8rem;
  }
}
.p-spotlist__intro {
  font-size: max(1.7rem, 20px);
  line-height: 2;
  margin-bottom: 4.4rem;
}
@media screen and (max-width: 767px) {
  .p-spotlist__intro {
    font-size: max(1.5rem, 20px);
    margin-bottom: 2.8rem;
  }
}
.p-spotlist__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 3.2rem;
}
@media screen and (max-width: 900px) and (min-width: 768px) {
  .p-spotlist__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .p-spotlist__grid {
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }
}
.p-spotlist__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #ffffff;
  border: 0.1rem solid #e6e6e2;
  border-radius: 1rem;
  overflow: hidden;
  -webkit-box-shadow: 0 0.3rem 1.4rem rgba(0, 0, 0, 0.06);
          box-shadow: 0 0.3rem 1.4rem rgba(0, 0, 0, 0.06);
}
.p-spotlist__thumb {
  position: relative;
  aspect-ratio: 318/237;
  background-size: cover;
  background-position: center;
  background-color: #eef0f2;
}
.p-spotlist__num {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 6.6rem;
  height: 7.2rem;
  background: #036EB8;
  color: #ffffff;
  font-weight: 700;
  font-size: max(2.6rem, 20px);
  line-height: 1;
  border-bottom-right-radius: 99.9rem;
}
@media screen and (max-width: 767px) {
  .p-spotlist__num {
    width: 5.6rem;
    height: 6.2rem;
    font-size: max(2.2rem, 20px);
  }
}
.p-spotlist__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 2rem 2.2rem 2.4rem;
}
.p-spotlist__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}
.p-spotlist__title {
  color: #036EB8;
  font-weight: 700;
  font-size: max(2.2rem, 20px);
}
@media screen and (max-width: 767px) {
  .p-spotlist__title {
    font-size: max(2rem, 20px);
  }
}
.p-spotlist__title {
  min-width: 0;
}
.p-spotlist__tag {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  display: inline-block;
  background: #ccad92;
  color: #ffffff;
  font-weight: 700;
  font-size: max(1.4rem, 14px);
  line-height: 1;
  white-space: nowrap;
  padding: 0.7rem 1.6rem;
  border-radius: 10px;
}
.p-spotlist__desc {
  font-size: max(1.5rem, 20px);
  line-height: 1.8;
  margin-bottom: 2rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.p-spotlist__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  background: #036EB8;
  color: #ffffff;
  font-weight: 700;
  font-size: max(1.6rem, 20px);
  padding: 1.4rem 1.6rem;
  border-radius: 0.6rem;
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-spotlist__btn:hover {
  opacity: 0.82;
}
.p-spotlist__btn svg {
  width: 1.8rem;
  height: 1.8rem;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* 施設概要 / 会社概要ページ */
.p-company {
  padding: 5.6rem 0 9rem;
}
@media screen and (max-width: 767px) {
  .p-company {
    padding: 3.6rem 0 5.2rem;
  }
}
.p-company__list {
  max-width: 56rem;
}
.p-company__row {
  padding-bottom: 0.8rem;
  margin-bottom: 3.6rem;
  border-bottom: 0.1rem solid #000;
}
@media screen and (max-width: 767px) {
  .p-company__row {
    margin-bottom: 2.6rem;
  }
}
.p-company__label {
  font-size: max(1.9rem, 20px);
  font-weight: 700;
  color: #2b2b2b;
  margin-bottom: 1.6rem;
}
@media screen and (max-width: 767px) {
  .p-company__label {
    font-size: max(1.7rem, 20px);
    margin-bottom: 1rem;
  }
}
.p-company__value {
  font-size: max(1.6rem, 20px);
  line-height: 1.8;
  color: #2b2b2b;
}
.p-company__value a {
  color: #036EB8;
  text-decoration: underline;
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* 駐車場案内ページ */
.p-parkpage__sec {
  padding: 6.4rem 0;
}
@media screen and (max-width: 767px) {
  .p-parkpage__sec {
    padding: 4.4rem 0;
  }
}
@media screen and (min-width: 768px) {
  .p-parkpage__sec--gray {
    margin-left: -172px;
    width: calc(100% + 172px);
    padding-left: 172px;
  }
}
.p-parkpage__sec--gray {
  background: #f4f3f1;
}
.p-parkpage {
  /* 満空カード内の時刻表示 */
}
.p-parkpage .p-parking-card__time {
  text-align: center;
  font-size: 10px;
  color: #888;
  margin: 0.6rem 0 1rem;
}
.p-parkpage {
  /* 駐車料金リスト */
}
.p-parkpage__fee {
  list-style: none;
  font-size: max(1.8rem, 20px);
  line-height: 1.9;
}
@media screen and (max-width: 767px) {
  .p-parkpage__fee {
    font-size: max(1.6rem, 20px);
  }
}
.p-parkpage__fee li {
  padding-left: 1.4em;
  text-indent: -1.4em;
  margin-bottom: 0.6rem;
}
.p-parkpage__fee li::before {
  content: "・";
}
.p-parkpage__note {
  margin-top: 1.6rem;
  font-size: max(1.5rem, 20px);
  color: #666;
}
.p-parkpage {
  /* 車両・台数（第1/第2駐車場） */
}
.p-parkpage__lot + .p-parkpage__lot {
  margin-top: 5.6rem;
}
.p-parkpage__lot-title {
  font-size: max(2.2rem, 20px);
  font-weight: 700;
  margin-bottom: 2.2rem;
}
@media screen and (max-width: 767px) {
  .p-parkpage__lot-title {
    font-size: max(1.9rem, 20px);
  }
}
.p-parkpage__lot-inner {
  display: grid;
  grid-template-columns: 56rem 1fr;
  gap: 4rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media screen and (max-width: 767px) {
  .p-parkpage__lot-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.p-parkpage__spec {
  max-width: 56rem;
}
.p-parkpage__photos {
  display: grid;
  gap: 2rem;
}
.p-parkpage__photos img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.8rem;
}
.p-parkpage {
  /* 注意事項 */
}
.p-parkpage__lead {
  font-size: max(1.7rem, 20px);
  line-height: 1.9;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .p-parkpage__lead {
    font-size: max(1.5rem, 20px);
  }
}
.p-parkpage__map {
  max-width: 69rem;
  margin-bottom: 2.4rem;
}
.p-parkpage__map img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.6rem;
}
.p-parkpage__cautions {
  font-size: max(1.6rem, 20px);
  line-height: 1.9;
}
.p-parkpage__cautions p {
  margin-bottom: 0.6rem;
}
@media screen and (max-width: 767px) {
  .p-parkpage__cautions {
    font-size: max(1.5rem, 20px);
  }
}

/* ============================================================
   師崎港観光センター 新テーマ  メインスタイル
   コンパイル例) sass scss/style.scss:css/style.css --style=expanded
============================================================ */
/* お問い合わせ（CF7フォーム） */
.p-contact {
  padding: 5.6rem 0 9rem;
}
@media screen and (max-width: 767px) {
  .p-contact {
    padding: 3.6rem 0 5.2rem;
  }
}
.p-contact__inner {
  max-width: 76rem;
  margin: 0 auto;
}
.p-contact p:not(.wpcf7 p) {
  font-size: max(1.6rem, 16px);
  line-height: 2;
}
.p-contact .wpcf7 {
  margin: 0;
}
.p-contact .wpcf7-form > p {
  margin-bottom: 2.4rem;
}
.p-contact .wpcf7-form label {
  display: block;
  font-weight: 700;
  font-size: max(1.6rem, 16px);
  color: #2b2b2b;
  line-height: 1.9;
}
.p-contact .wpcf7-form .required-mark {
  color: #F8211A;
  font-size: max(1.3rem, 13px);
  margin-left: 0.6rem;
}
.p-contact .wpcf7-form input[type=text],
.p-contact .wpcf7-form input[type=email],
.p-contact .wpcf7-form input[type=tel],
.p-contact .wpcf7-form input[type=number],
.p-contact .wpcf7-form input[type=url],
.p-contact .wpcf7-form input[type=date],
.p-contact .wpcf7-form select,
.p-contact .wpcf7-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 1.2rem 1.4rem;
  border: 0.1rem solid #cfcfcf;
  border-radius: 0.6rem;
  background: #ffffff;
  color: #2b2b2b;
  font-size: max(1.6rem, 16px);
  font-family: inherit;
  line-height: 1.6;
}
.p-contact .wpcf7-form input[type=text]:focus,
.p-contact .wpcf7-form input[type=email]:focus,
.p-contact .wpcf7-form input[type=tel]:focus,
.p-contact .wpcf7-form input[type=number]:focus,
.p-contact .wpcf7-form input[type=url]:focus,
.p-contact .wpcf7-form input[type=date]:focus,
.p-contact .wpcf7-form select:focus,
.p-contact .wpcf7-form textarea:focus {
  outline: none;
  border-color: #036EB8;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.15);
          box-shadow: 0 0 0 0.2rem rgba(3, 110, 184, 0.15);
}
.p-contact .wpcf7-form textarea {
  min-height: 17rem;
  resize: vertical;
}
.p-contact .wpcf7-form input[type=submit],
.p-contact .wpcf7-form button[type=submit],
.p-contact .wpcf7-form .wpcf7-submit {
  display: block;
  margin: 3.4rem auto 0;
  min-width: 24rem;
  padding: 1.6rem 4rem;
  background: #C3904C;
  color: #ffffff;
  font-weight: 700;
  font-size: max(1.7rem, 20px);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  -webkit-box-shadow: 0 0.4rem 2.4rem rgba(0, 0, 0, 0.25);
          box-shadow: 0 0.4rem 2.4rem rgba(0, 0, 0, 0.25);
  -webkit-transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, -webkit-transform 0.25s ease;
}
.p-contact .wpcf7-form input[type=submit]:hover,
.p-contact .wpcf7-form button[type=submit]:hover,
.p-contact .wpcf7-form .wpcf7-submit:hover {
  opacity: 0.82;
}
.p-contact .wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  color: #F8211A;
  font-size: max(1.3rem, 13px);
  margin-top: 0.6rem;
}
.p-contact .wpcf7-form .wpcf7-spinner {
  margin: 1rem auto 0;
  display: block;
}
.p-contact .wpcf7-response-output {
  margin: 2rem 0 0 !important;
  padding: 1.2rem 1.6rem;
  border-radius: 0.6rem;
  font-size: max(1.5rem, 15px);
  line-height: 1.7;
}/*# sourceMappingURL=style.css.map */