@charset "utf-8";

/*--------------------------------------------------------------------
	general
--------------------------------------------------------------------*/

html {
  scroll-behavior: smooth;
}

body {
  -webkit-text-size-adjust: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  position: relative;
}

img {
  max-width: 100%;
  box-sizing: border-box;
  height: auto;
}

iframe {
  vertical-align: bottom;
}

.fontArialBlack {
  font-family: 'arial black', sans-serif;
}

.mincho {
  /* 見出し・アクセント文字はゴシックと差をつけ、明朝体で上品な印象に */
  font-family: 'Shippori Mincho', serif;
}

@media screen and (max-width: 1250px) {
  body {
    -webkit-text-size-adjust: 100%;
    letter-spacing: 0;
  }

  input,
  select,
  textarea {
    font-size: 1.0em;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

ul {
  list-style: none;
}

a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: inherit;
}

header,
footer,
div,
p,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  box-sizing: border-box;
}

a,
span {
  position: relative;
}

.maxWidthFree img {
  max-width: 9999px;
}

@media screen and (min-width: 1251px) {

  a,
  .mouseHover {
    transition-property: all;
    transition: 0.1s linear;
    cursor: pointer;
  }

  a:hover,
  .mouseHover:hover,
  .mouseHoverImg:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    transition-property: all;
    transition: 0.1s linear;
    cursor: pointer;
  }

  a.noHover:hover,
  a.noHover:hover img {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha(opacity=100)";
    -moz-opacity: 1;
    -khtml-opacity: 1;
  }
}

@media screen and (max-width: 1250px) {
  a,
  a:hover {
    text-decoration: none !important;
  }
}


/*----------------
	container
----------------*/

#container01 {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  line-height: 1.6;
  overflow: hidden;
}

@media screen and (min-width: 1251px) {
  #container01 { font-size: 1.0rem; }
}

@media screen and (max-width: 1250px) {
  #container01 { font-size: 1.0rem; }
}


/*--------------------------------------------------------------------
	contents
--------------------------------------------------------------------*/

.contents01,
.contents02,
.contents04,
.contents06,
.contents08,
.contents10 {
  padding: 0 15px;
}

@media screen and (min-width: 1251px) {
  .contents01 {
    padding: 0 15px;
  }

  .contents02,
  .contents03 {
    max-width: 1900px;
    margin-left: auto;
    margin-right: auto;
  }

  .contents04,
  .contents05 {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  .contents06,
  .contents07 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .contents08,
  .contents09 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .contents10,
  .contents11 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}


/*==============================================================================
	header
==============================================================================*/

#header01 {
  width: 100%;
  display: block;
  z-index: 101;
  position: fixed;
  background-color: transparent;
  transition: background-color 0.3s ease;
  box-shadow: none;
}

#header01.scrolled {
  background-color: #FFF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* 透過ヘッダー時：白文字のグロナビを読みやすくするため、上から下へ薄くなる半透明グラデーションを敷く */
#header01::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.3s ease;
}

#header01.scrolled::before {
  opacity: 0;
}

.headerLogo01 {
  z-index: 102;
}

/* 左上ロゴ上のキャッチ「たてやま温泉」（透過時は白、スクロール後は濃色） */
.headerLogoCatch {
  display: block;
  position: relative;
  z-index: 1;
  /* logo03.png は文字の上に約1/3の透明余白があるため、負のマージンで文字に寄せる */
  margin-bottom: -20px;
  padding-left: 104px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.2em;
  color: #FFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

#header01.scrolled .headerLogoCatch {
  color: #0B4F6C;
  text-shadow: none;
}

/* サブページ・透過ヘッダー時の左上ロゴ（左：エンブレム logo04、右：ロゴタイプ logo03）。
   どちらも白色の絵柄のため、スクロール後の白背景ヘッダーでは既存の.logo-scrolledに切り替わる。 */
.headerLogoDual {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.headerLogoDual .headerLogoIcon {
  height: 84px;
  width: auto;
}

.headerLogoDual .headerLogoText {
  height: 84px;
  width: auto;
}

.logo-scrolled {
  display: none;
}

#header01.scrolled .logo-default {
  display: none;
}

#header01.scrolled .logo-scrolled {
  display: inline-block;
}

#header01.scrolled .logo-scrolled.headerLogoDual {
  display: inline-flex;
}

/* スクロール後：透過ヘッダー用の白文字を、白背景ヘッダーでも読める色に切替 */
#header01.scrolled .headerPC .fcWhite,
#header01.scrolled .headerPC .fcWhite a {
  color: #333;
}

/*==============================================================================
	language switch（ヘッダーの言語切替プルダウン）
==============================================================================*/

.langSwitch {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.8rem;
  letter-spacing: .02em;
}

.langSwitchArrow {
  margin-left: 5px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.langSwitch.isOpen .langSwitchArrow {
  transform: rotate(180deg);
}

.langSwitchBox {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 12px;
  background-color: #FFF;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  min-width: 150px;
  overflow: hidden;
  z-index: 120;
}

.langSwitchBox.isOpen {
  display: block;
}

/* .fcWhite a:link 等（ヘッダーの白文字用ルール）は疑似クラス込みで詳細度が高く、
   何もしないとこのプルダウン内のリンクにも白文字が適用されてしまうため、
   :link/:visited/:hover/:active を明示して確実に上書きする。 */
.langSwitchBox li a,
.langSwitchBox li a:link,
.langSwitchBox li a:visited {
  display: block;
  padding: 12px 18px;
  color: #333;
  font-size: 0.85rem;
  white-space: nowrap;
  text-decoration: none;
}

.langSwitchBox li a:hover,
.langSwitchBox li a:active {
  color: #333;
  text-decoration: none;
  background-color: #F5F5F5;
}

.langSwitchBox li + li {
  border-top: 1px solid #EEE;
}

.langSwitchBox li a[aria-current="page"],
.langSwitchBox li a[aria-current="page"]:link,
.langSwitchBox li a[aria-current="page"]:visited {
  color: var(--brand-navy);
  font-weight: bold;
  background-color: #F5F8FA;
}

.naviSPBox .langSwitchSPTitle {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #DDD;
}

/* ファーストビュー（スクロール前）もハンバーガーメニューではなく、常にサブページ名をテキストで展開表示 */
.headerGnaviPC {
  display: block;
}

.naviPC,
.naviPCBox {
  display: none !important;
}

.headerMenuEn {
  font-size: 0.7em;
  letter-spacing: .05em;
  opacity: .7;
}

.naviPCBox .headerMenuEn,
.naviSPBox .headerMenuEn {
  font-size: 0.75em;
  opacity: .6;
}

.headerMenu>ul li {
  line-height: 1em;
  letter-spacing: .1em;
}

.naviPC {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .6);
  position: relative;
  cursor: pointer;
}

.naviPC rect {
  fill: #FFF;
  transition: fill 0.3s ease;
}

.naviPCBox {
  background-color: #FFF;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  width: 220px;
  line-height: 1.2em;
  border-radius: 5px;
  font-size: 0.86rem;
  overflow: hidden;
  border: 1px solid #DDD;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  display: none;
  z-index: 101;
}

.naviPCBox li a {
  display: block;
  padding: 12px 5px 12px 15px;
  color: #333;
}

.naviPCBox li:nth-child(n+2) a {
  border-top: 1px dotted #DDD;
}

.naviPCBox.isOpen {
  display: block;
}

@media screen and (min-width: 1251px) {
  #header01 {
    height: 90px;
  }

  .headerMenu {
    padding: 35px 0;
  }

  .headerMenu>ul {
    display: flex;
    margin: 0;
  }

  .headerMenu>ul li {
    padding: 0 20px;
    position: relative;
  }

  .headerMenu>ul li span {
    line-height: 1em !important;
  }

  .headerMenu>ul li a {
    font-size: 1.2em;
    text-align: center;
  }

  .headerSP,
  .naviSP,
  .naviSPBox {
    display: none;
  }
}

@media screen and (max-width: 1250px) {
  #header01 {
    height: 55px;
    top: 0;
    left: 0;
  }

  .headerLogo01 {
    position: absolute;
    top: 5px;
    left: 10px;
  }

  .headerPC {
    display: none;
  }

  .fixNavi01 {
    display: none !important;
  }

  .headerSP {
    width: 100%;
    height: 55px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
  }

  .naviSP {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 102;
    cursor: pointer;
  }

  .naviSPBox {
    background-color: #FFF;
    position: absolute;
    line-height: 1.2em;
    border-radius: 5px;
    font-size: 0.86rem;
    overflow: hidden;
    border: 1px solid #DDD;
    display: none;
    z-index: 101;
  }

  .naviSPBox li a {
    display: block;
    padding: 12px 5px 12px 15px;
    color: #333;
  }

  .naviSPBox li:nth-child(n+2) a {
    border-top: 1px dotted #DDD;
  }

  .naviSPBoxTop {
    padding: 10px;
    border-bottom: 1px solid #DDD;
  }

  .naviSPBox.isOpen {
    display: block;
  }
}

@media screen and (min-width: 768px) and (max-width: 1250px) {
  .naviSPBox {
    width: 300px;
    top: 60px;
    right: 10px;
  }
}

@media screen and (max-width: 767px) {
  .naviSPBox {
    width: calc(100vw - 20px);
    top: 60px;
    right: 10px;
  }
}


/*==============================================================================
	popular dates（直近でご予約可能な人気日程）
==============================================================================*/

.popularDatesRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.popularDateCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc((100% - 60px) / 7);
  min-width: 78px;
  height: 90px;
  background-color: var(--brand-navy);
  color: #FFF !important;
  border-radius: 8px;
  transition: opacity 0.2s ease;
}

.popularDateCard:hover {
  opacity: .8;
}

.popularDateMonth {
  font-size: 0.75rem;
}

.popularDateDay {
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.3;
}

.popularDateUnit {
  font-size: 0.95rem;
  margin-left: 1px;
}

.popularDateWeek {
  font-size: 0.75rem;
}

@media screen and (max-width: 767px) {
  .popularDateCard {
    width: calc((100% - 20px) / 3);
  }
}

.weatherForecast {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
}

.weatherForecastTable {
  border-collapse: collapse;
  font-size: 0.85rem;
}

.weatherForecastTable th,
.weatherForecastTable td {
  border: 1px solid #E5DDD0;
  padding: 10px 18px;
  text-align: center;
  white-space: nowrap;
}

.weatherForecastTable thead th {
  /* セクション背景（半透明の水色）に負けないよう、はっきりした背景色に */
  background-color: var(--brand-navy, #0B4F6C);
  color: #FFF;
  font-weight: normal;
}

.weatherForecastLabel {
  background-color: var(--brand-navy, #0B4F6C);
  color: #FFF;
  font-weight: bold;
  letter-spacing: .05em;
}

.weatherForecastTable tbody td:not(.weatherForecastLabel) {
  /* 天気アイコン・気温のセルも、セクション背景に負けないよう白背景に */
  background-color: #FFF;
}

.weatherForecastIcon {
  display: block;
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 4px;
}

.weatherForecastTemp {
  display: block;
}

.tempHigh {
  color: #D9534F;
  margin-right: 6px;
}

.tempLow {
  color: #337AB7;
}

.busInfoWrap {
  gap: 30px;
}

.busInfo {
  max-width: 440px;
  padding: 20px 24px;
}

.busInfo .sizeCommon03 {
  white-space: nowrap;
}

.busIcon {
  color: var(--brand-navy);
  margin-right: 8px;
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  .busInfoWrap {
    flex-direction: column;
    gap: 20px;
  }

  .busInfo {
    max-width: 100%;
  }
}

/*==============================================================================
	room compare（お部屋タイプ比較表）
==============================================================================*/

.roomCompareGroup:not(:first-child) {
  margin-top: 40px;
}

.roomCompareImg {
  max-width: 360px;
}

/* 各項目名をアコーディオンの開閉ボタンに。押すと該当の比較表だけが開く */
.roomCompareToggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.roomCompareToggleThumb {
  flex-shrink: 0;
  display: block;
  width: 44px;
  height: 44px;
}

.roomCompareToggleTitle {
  flex: 1;
  font-size: 1.05rem;
  font-weight: bold;
  margin-bottom: 0;
}

.roomCompareToggleIcon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.roomCompareToggleIcon::before,
.roomCompareToggleIcon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #333;
  transition: transform .25s ease;
}

.roomCompareToggleIcon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.roomCompareToggleIcon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.roomCompareToggle[aria-expanded="true"] .roomCompareToggleIcon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.roomCompareWrap {
  display: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 15px;
}

.roomCompareWrap.isOpen {
  display: block;
}

@media screen and (min-width: 768px) {
  .roomCompareToggleThumb {
    width: 56px;
    height: 56px;
  }

  .roomCompareToggleTitle {
    font-size: 1.15rem;
  }
}

.roomCompareTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 760px;
}

.roomCompareTable th,
.roomCompareTable td {
  padding: 10px 12px;
  border: 1px solid #DDD;
  vertical-align: middle;
  font-weight: normal;
  text-align: center;
  font-size: 0.85rem;
  white-space: nowrap;
  background-color: #FFF;
}

.roomCompareTable thead th {
  background-color: #F7F5F1;
  font-weight: bold;
}

.roomCompareTable tbody td:first-child {
  text-align: left;
  font-weight: bold;
  white-space: normal;
}

.roomCompareBtn {
  display: inline-block;
  height: 34px;
  line-height: 34px;
  padding: 0 16px;
  font-size: 0.8rem;
}

.sectionTitleWrap {
  display: block;
}

.bestRateBadge {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  background-color: #D9534F;
  color: #FFF !important;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: .03em;
  border-radius: 20px;
  white-space: nowrap;
  animation: bestRateBadgePulse 1.8s ease-in-out infinite;
}

@keyframes bestRateBadgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .bestRateBadge {
    animation: none;
  }
}


/*==============================================================================
	news
==============================================================================*/

.newsListMore {
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 1px solid #333;
}

.newsListItem {
  padding: 20px 0;
  border-bottom: 1px solid #E5E5E5;
}

.newsListItem:first-child {
  border-top: 1px solid #E5E5E5;
}

.newsListDate {
  width: 110px;
  flex-shrink: 0;
}

.newsListTag {
  width: 140px;
  flex-shrink: 0;
}

.newsListTitle {
  flex: 1;
  min-width: 0;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .newsListDate,
  .newsListTag {
    width: auto;
    margin-right: 15px;
  }

  .newsListTitle {
    width: 100%;
    margin-top: 8px;
  }
}

.newsBannerRow {
  gap: 16px;
}

.newsBannerImg {
  width: calc(60% - 8px);
}

@media screen and (min-width: 768px) {
  .newsBannerImg {
    width: calc(30% - 8px);
  }
}

/* 新着情報一覧（news.html）のページ送り */
.newsPager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* aタグ共通の color: inherit より優先させるため、.newsPager を付けて詳細度を上げている */
.newsPager .newsPagerItem {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--brand-navy);
  border-radius: 4px;
  color: var(--brand-navy);
  transition: opacity 0.2s ease;
}

.newsPager a.newsPagerItem:hover {
  opacity: .7;
}

.newsPager .newsPagerItem.isCurrent {
  background-color: var(--brand-navy);
  color: #FFF;
}

/* 新着情報詳細（news-detail.html）：本文はmicroCMSのリッチエディタのHTMLがそのまま入る */
.newsDetailTitle {
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: .05em;
  padding-bottom: 20px;
  border-bottom: 1px solid #E5E5E5;
}

.newsDetailImg img {
  display: block;
  width: 100%;
  height: auto;
}

.newsDetailBody > * + * {
  margin-top: 1.2em;
}

.newsDetailBody h2 {
  font-size: 1.35rem;
  font-weight: bold;
  letter-spacing: .05em;
  margin-top: 2em;
  padding-left: 12px;
  border-left: 4px solid var(--brand-navy);
}

.newsDetailBody h3 {
  font-size: 1.15rem;
  margin-top: 1.8em;
  padding-bottom: 6px;
}

.newsDetailBody h4 {
  font-weight: bold;
  margin-top: 1.5em;
}

.newsDetailBody ul {
  list-style: disc;
  padding-left: 1.5em;
}

.newsDetailBody ol {
  list-style: decimal;
  padding-left: 1.5em;
}

.newsDetailBody a {
  color: var(--brand-navy);
  text-decoration: underline;
}

.newsDetailBody img {
  max-width: 100%;
  height: auto;
}

.newsDetailBody blockquote {
  padding: 15px 20px;
  border-left: 4px solid #E5E5E5;
  background-color: #F7F7F7;
}

.newsDetailBody table {
  width: 100%;
  border-collapse: collapse;
}

.newsDetailBody th,
.newsDetailBody td {
  padding: 10px;
  border: 1px solid #E5E5E5;
  text-align: left;
}

.newsDetailBody th {
  background-color: #F7F7F7;
}

@media screen and (max-width: 767px) {
  .newsDetailTitle {
    font-size: 1.3rem;
  }

  .newsDetailBody h2 {
    font-size: 1.2rem;
  }
}


/*==============================================================================
	daily day&night（館山リゾートホテルで過ごす一日：Day time / Night time）
==============================================================================*/

.dailyDayNight {
  position: relative;
  margin-top: 40px;
  overflow: hidden;
}

/* 上段：Day/Nightそれぞれ全面に写真、下段：円形写真＋白背景 */
.dailyDayNightTop {
  position: relative;
  display: flex;
  height: 440px;
}

.dailyDayNightTopImg {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.dailyDayNightLabel {
  position: absolute;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #FFF;
  background-color: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 8px 22px;
  border-radius: 999px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.dailyDayNightLabelIcon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.dailyDayNightLabelIcon svg {
  width: 100%;
  height: 100%;
}

.dailyDayNightLabel--day {
  left: 20px;
}

.dailyDayNightLabel--night {
  right: 20px;
  flex-direction: row-reverse;
}

/* 波：写真の下端に白い波形を重ね、そのまま下の白背景へつながるように見せる */
.dailyDayNightWave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 45px;
  z-index: 2;
  line-height: 0;
}

@media screen and (min-width: 768px) {
  .dailyDayNightWave {
    height: 60px;
  }
}

.dailyDayNightWaveSvg {
  display: block;
  width: 100%;
  height: 100%;
}

.dailyDayNightTitle {
  position: absolute;
  left: 50%;
  bottom: -55px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  background-color: #FFF;
  border-radius: 0;
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
  color: #333;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.dailyDayNightBody {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 65px 20px 0;
  background-color: #FFF;
}

.dailyBubbleCol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px 12px;
}

/* Daytimeの紹介文：バブルの並びの下に、常に全幅で改行して入る */
.dailyDayIntro {
  flex: 1 0 100%;
  margin-top: 14px;
  text-align: center;
}

.dailyDayIntroTitle {
  font-size: 1.1rem;
  letter-spacing: .05em;
  color: #333;
  margin-bottom: 10px;
}

.dailyDayIntroText {
  font-size: 0.8rem;
  line-height: 1.9;
  color: #555;
}

/* Nighttimeの紹介文：バブルの並びの上に、常に全幅で改行して入る */
.dailyNightIntro {
  flex: 1 0 100%;
  margin-bottom: 14px;
  text-align: center;
}

.dailyNightIntroTitle {
  font-size: 1.1rem;
  letter-spacing: .05em;
  color: #333;
  margin-bottom: 10px;
}

.dailyNightIntroText {
  font-size: 0.8rem;
  line-height: 1.9;
  color: #555;
}

.dailyBubbleItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.dailyBubbleItem--sm { width: 90px; }
.dailyBubbleItem--md { width: 110px; }
.dailyBubbleItem--lg { width: 140px; }

.dailyBubbleCol--day .dailyBubbleItem:nth-child(2n) {
  margin-top: 18px;
}

.dailyBubbleCol--night .dailyBubbleItem:nth-child(2n+1) {
  margin-top: 18px;
}

.dailyBubble {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #FFF;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
  background-color: #EEE;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 写真の周りにキャプションを円弧状に添わせる。写真は少し内側に縮め、
   外側にできたリング状のスペースにSVGのtextPathで文字を沿わせる。
   viewBox基準（％相当）で組んでいるので、sm/md/lgどのサイズでも同じ比率で自動的にスケールする。 */
.dailyBubbleArcWrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* flexのレイアウト上の占有幅(sm/md/lg)は変えずに、見た目だけ拡大表示する。
   transform:scaleはレイアウトの計算に影響しないため、隣の円と重なっても他のバブルの配置は崩れない。 */
.dailyBubbleArcWrap--enlarge {
  transform: scale(1.4);
  z-index: 2;
}

.dailyBubbleArcSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dailyBubbleArcSvg path {
  fill: none;
}

.dailyBubbleArcSvg text {
  font-family: 'Shippori Mincho', serif;
  font-size: 6.4px;
  letter-spacing: .02em;
  fill: #333;
}

.dailyBubbleArcWrap .dailyBubble {
  position: absolute;
  top: 13%;
  left: 13%;
  width: 74%;
  height: 74%;
}

.dailyBubble--placeholder {
  background-color: rgba(150, 150, 150, .12);
}

.dailyBubbleEmoji {
  font-size: 2rem;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .dailyDayNight {
    padding: 50px 0 50px;
  }

  .dailyDayNightTop {
    height: 600px;
  }

  .dailyDayNightLabel {
    font-size: 1.1rem;
    padding: 8px 20px;
  }

  .dailyDayNightLabelIcon {
    width: 17px;
    height: 17px;
  }

  .dailyDayNightBody {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    padding-top: 85px;
  }

  .dailyBubbleCol {
    flex: 1;
  }

  .dailyBubbleItem--sm { width: 120px; }
  .dailyBubbleItem--md { width: 155px; }
  .dailyBubbleItem--lg { width: 195px; }

  .dailyDayIntro {
    margin-top: 24px;
    padding: 0 10px;
  }

  .dailyDayIntroTitle {
    font-size: 1.3rem;
  }

  .dailyDayIntroText {
    font-size: 0.85rem;
  }

  .dailyNightIntro {
    margin-bottom: 24px;
    padding: 0 10px;
  }

  .dailyNightIntroTitle {
    font-size: 1.3rem;
  }

  .dailyNightIntroText {
    font-size: 0.85rem;
  }

  .dailyDayNightTitle {
    bottom: -70px;
    width: 200px;
    height: 200px;
    font-size: 1.3rem;
  }

}

@media screen and (min-width: 1251px) {
  .dailyDayNightTop {
    height: 760px;
  }

  .dailyDayNightTitle {
    bottom: -85px;
    width: 240px;
    height: 240px;
    font-size: 1.5rem;
  }

  .dailyDayNightBody {
    padding-top: 105px;
  }

  .dailyBubbleItem--sm { width: 145px; }
  .dailyBubbleItem--md { width: 180px; }
  .dailyBubbleItem--lg { width: 230px; }
}


/*==============================================================================
	access & reservation（全画面幅）
==============================================================================*/

.accessReserveFull {
  padding-left: 15px;
  padding-right: 15px;
}

.gmapGray iframe {
  filter: grayscale(100%);
}

@media screen and (min-width: 768px) {
  .accessReserveFull {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media screen and (min-width: 1251px) {
  .accessReserveFull {
    padding-left: 60px;
    padding-right: 60px;
  }
}


/*==============================================================================
	reason card（選ばれる理由：写真＋テキストオーバーレイ）
==============================================================================*/

/* セクション背景を波（.waveDivider）と完全に同じ色に */
#reasons,
#pool {
  background-color: #7DBFFF;
}

/* WHY CHOOSE US：背景が水色のため白文字に */
#reasons .fcBrandSub01 {
  color: #FFF !important;
}

/* 「直近でご予約可能な人気日程」：水彩テクスチャ画像をそのまま背景に表示（半透明なし） */
#popular-dates {
  background-image: url("../../f-index/photo_img01.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.reasonGrid {
  display: flex;
  flex-wrap: wrap;
}

.reasonGrid > * {
  width: 50%;
}

@media screen and (min-width: 768px) {
  .reasonGrid > * {
    width: 25%;
  }
}

.reasonCard {
  position: relative;
  display: block;
}

.reasonCardScrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.reasonCardHoverBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.reasonCard:hover .reasonCardHoverBg {
  opacity: 1;
}

.reasonCardTxt {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  color: #FFF;
}

.reasonCardEn {
  font-size: 1.2rem;
  line-height: 1.2;
  margin-bottom: 4px;
}

.reasonCardJa {
  font-size: 0.75rem;
  letter-spacing: .05em;
}

.reasonCardDesc {
  margin-top: 12px;
  font-size: 0.8rem;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}

.reasonCard:hover .reasonCardDesc {
  opacity: 1;
  transform: translateY(0);
}

.reasonCardArrow {
  position: absolute;
  right: 15px;
  bottom: 15px;
  width: 36px;
  height: 36px;
  border: 1px solid #FFF;
  border-radius: 50%;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}


/*==============================================================================
	facility split（温泉・料理など：写真スライダー＋テキストの左右分割）
==============================================================================*/

.facilitySplitWrap {
  align-items: stretch;
  padding: 0 15px;
}

.facilitySplitVisual {
  position: relative;
  width: 80%;
  flex-shrink: 0;
  height: 316px;
}

.facilitySplitGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  width: 100%;
  height: 100%;
}

.facilitySplitGrid img {
  min-height: 0;
}

.facilitySplitTxt {
  flex: 1;
  width: auto;
}

.facilitySwiper,
.facilitySwiper .swiper-slide {
  height: 100%;
}

.facilityArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  color: #FFF;
  text-shadow: 0 0 6px rgba(0, 0, 0, .5);
  cursor: pointer;
  z-index: 3;
}

.facilityArrowPrev { left: 10px; }
.facilityArrowNext { right: 10px; }

.facilityPagination {
  position: absolute;
  top: 15px;
  right: 15px;
  left: auto;
  width: auto;
  z-index: 3;
}

.facilitySplitTxt {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/*==============================================================================
	room detail split（客室詳細ページ：左側全画面の写真＋右側テキスト）
==============================================================================*/

.roomHeroSplit {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
}

.roomHeroSplitVisual {
  position: relative;
  width: 100%;
  height: 60vh;
}

.roomHeroSplitTxt {
  width: 100%;
  display: flex;
  align-items: center;
}

.roomHeroSplitTxtInner {
  width: 100%;
  padding: 40px 20px;
}

@media screen and (min-width: 768px) {
  .roomHeroSplitVisual {
    width: 60%;
    height: 100vh;
  }

  .roomHeroSplitTxt {
    width: 40%;
  }

  .roomHeroSplitTxtInner {
    max-width: 420px;
    margin: 0;
    padding: 40px 40px 40px 30px;
  }
}

.facilitySplitEn {
  font-size: 2rem;
  margin-bottom: 15px;
  /* まずは通常の単色（フォールバック）。background-clip:textに対応したブラウザでのみ
     下のグラデーションに置き換える。対応状況に関わらず文字が消えないようにするため。 */
  color: #17B8B0;
}

/* 添付イメージ（海の日）のような、水色〜濃紺のグラデーション文字。
   background-clip:textで文字の形にグラデーションを塗り込む。 */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .facilitySplitEn {
    background-image: linear-gradient(135deg, #6FE3D9 0%, #17B8B0 45%, #0B4F6C 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Poolは背景が水色のため、通常のグラデーションだと同化してしまう。白〜薄い水色のグラデーションにする */
.facilitySplitEn--light {
  color: #FFF;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .facilitySplitEn--light {
    background-image: linear-gradient(135deg, #FFFFFF 0%, #EAF8FF 55%, #BEEAFB 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.facilitySplitJa {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.8rem;
  font-weight: normal;
  letter-spacing: .1em;
  color: #777;
  margin-top: 6px;
}

.facilitySplitLink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.facilitySplitLinkArrow {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}

.facilitySplitLink:hover .facilitySplitLinkArrow {
  background-color: #333;
  color: #FFF;
}

@media screen and (min-width: 768px) {
  .facilitySplitWrap {
    padding: 0 30px;
  }

  .facilitySplitVisual {
    width: 62%;
    height: 446px;
  }

  .facilitySplitEn {
    font-size: 2.6rem;
  }

  .facilitySplitJa {
    font-size: 0.9rem;
  }
}

@media screen and (min-width: 1251px) {
  .facilitySplitWrap {
    padding: 0 60px;
  }

  .facilitySplitVisual {
    width: 68%;
    height: 628px;
  }

  .facilityArrow {
    width: 40px;
    height: 40px;
    font-size: 2.2rem;
  }

  .facilityArrowPrev { left: 20px; }
  .facilityArrowNext { right: 20px; }

  .facilitySplitEn {
    font-size: 3.2rem;
  }

  .facilitySplitJa {
    font-size: 1rem;
  }
}

/* Pool：スライダーではなく、デイプール／ナイトプールの2枚を静止画カードで並べる */
.poolCards {
  display: flex;
  gap: 8px;
  width: 100%;
  height: 100%;
}

.poolCard {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.poolCardScrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
}

.poolCardLabel {
  position: absolute;
  top: 14px;
  left: 14px;
  color: #FFF;
  font-size: 0.85rem;
  letter-spacing: .05em;
}

.poolCardLabelEn {
  font-size: 0.65rem;
  letter-spacing: .1em;
  opacity: .85;
  margin-bottom: 2px;
}

@media screen and (min-width: 768px) {
  .poolCards {
    gap: 10px;
  }

  .poolCardLabel {
    top: 20px;
    left: 20px;
    font-size: 1rem;
  }

  .poolCardLabelEn {
    font-size: 0.75rem;
  }
}

@media screen and (min-width: 1251px) {
  .poolCards {
    gap: 12px;
  }

  .poolCardLabel {
    top: 24px;
    left: 24px;
    font-size: 1.1rem;
  }

  .poolCardLabelEn {
    font-size: 0.8rem;
  }
}

/* Pool：デイプール／ナイトプールの営業期間・時間 */
.poolSchedule {
  border-top: 1px solid #E3E3E3;
}

.poolScheduleRow {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #E3E3E3;
}

.poolScheduleLabel {
  flex-shrink: 0;
  width: 6.5em;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: .03em;
}

.poolScheduleLabel.typeDay {
  /* 通常のターコイズ(#17B8B0)は白背景でコントラストが弱いため、視認性のため濃く調整 */
  color: #0B6E64;
}

.poolScheduleLabel.typeNight {
  color: var(--brand-navy, #0B4F6C);
}

.poolScheduleLabelEn {
  display: block;
  font-size: 0.65rem;
  letter-spacing: .1em;
  margin-bottom: 2px;
}

.poolScheduleDetail {
  flex: 1;
  font-size: 0.85rem;
  color: #333;
  line-height: 1.8;
}

.poolScheduleTime {
  color: #777;
  font-size: 0.8rem;
}

.poolScheduleNote {
  font-size: 0.75rem;
  color: #999;
  margin-top: -8px;
}

@media screen and (min-width: 768px) {
  .poolScheduleLabel {
    width: 7.5em;
    font-size: 1rem;
  }

  .poolScheduleLabelEn {
    font-size: 0.7rem;
  }

  .poolScheduleDetail {
    font-size: 0.9rem;
  }
}

/* Pool：バルオルカ／プールサイド ツインベッドルームなど、写真付き・小さめの補足カード
   セクション背景（水色）に埋もれないよう、白背景の枠で囲って画像の下に配置する。 */
.poolExtraWrap {
  background-color: #FFF;
  padding: 20px;
}

.poolExtra {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.poolExtraItem {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.poolExtraImg {
  position: relative;
  flex-shrink: 0;
  width: 84px;
  height: 84px;
}

.poolExtraTitle {
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 4px;
}

.poolExtraDesc {
  font-size: 0.78rem;
  line-height: 1.7;
  color: #666;
}

.poolExtraLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.75rem;
  font-weight: bold;
  color: #333;
}

.poolExtraLinkArrow {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: background-color .2s ease, color .2s ease;
}

.poolExtraLink:hover .poolExtraLinkArrow {
  background-color: #333;
  color: #FFF;
}

@media screen and (min-width: 768px) {
  .poolExtraWrap {
    padding: 30px;
  }

  .poolExtra {
    flex-direction: row;
    gap: 30px;
  }

  .poolExtraItem {
    flex: 1;
  }

  .poolExtraImg {
    width: 108px;
    height: 108px;
  }

  .poolExtraTitle {
    font-size: 1rem;
  }

  .poolExtraDesc {
    font-size: 0.85rem;
  }

  .poolExtraLink {
    font-size: 0.8rem;
  }

  .poolExtraLinkArrow {
    width: 26px;
    height: 26px;
  }
}


/*==============================================================================
	wave divider（セクション境目の波アニメーション）
==============================================================================*/

.waveDivider {
  display: block;
  position: relative;
  width: 100%;
  height: 30px;
  overflow: hidden;
  line-height: 0;
  /* 波の上側（凹み部分）は、前のセクションと同じ白地に */
  background-color: #FFF;
}

/* 奥に不透明の波、手前に半透明の波を重ねて奥行きを出す。揺れ方（速さ・開始タイミング）をずらして
   2枚が常に同じ位置で重ならないようにする。ページ内すべての波（ヒーロー波も含む）で共通の動き。 */
.waveDivider__svg {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
  animation: waveDividerScroll 16s linear infinite;
}

.waveDivider__svg--back {
  color: #7DBFFF;
  animation-duration: 30s;
  animation-delay: -15s;
}

.waveDivider__svg--front {
  color: rgba(125, 191, 255, 0.75);
  animation-duration: 16s;
}

/* ヒーローと「直近でご予約可能な人気日程」の間の波。#visual01（固定表示のヒーロー）内に配置し、
   背景を透明にすることで写真の上に直接波が重なるようにする。#mainScroll側に置くと手前の
   白背景が写真を覆ってしまい境目に不要な帯が見えてしまうため。
   スクロールすると本文がヒーローを覆っていくので、ロゴ等と同じタイミングでフェードアウトさせる。 */
.waveDivider--hero {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  background-color: transparent;
  transition: opacity 0.3s ease;
}

.waveDivider--hero.isHidden {
  opacity: 0;
  pointer-events: none;
}

/* サブページの#visual02（ヒーロー）用。#visual01と違い固定表示ではなく、スクロールで
   ヒーローごと流れていくだけなので、.waveDivider--heroのようなscroll連動のフェードは不要。
   写真の上に直接重ねるため背景を透明にし、overlayCommon01（暗幕オーバーレイ）より
   手前に表示されるようDOM順で最後に置く。 */
.waveDivider--heroSub {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  background-color: transparent;
}

@keyframes waveDividerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media screen and (min-width: 768px) {
  .waveDivider {
    height: 45px;
  }
}

@media screen and (min-width: 1251px) {
  .waveDivider {
    height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .waveDivider__svg {
    animation: none;
  }
}


/*==============================================================================
	visual
==============================================================================*/

#visual01 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

.heroVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* スクロール時、#visual01（ヒーロー）を固定したまま本文が上に重なってスクロールする */
#mainScroll {
  position: relative;
  z-index: 2;
  background-color: #FFF;
}

.swiperSlideCommon01 {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.swiperSlideCommon03 {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#visual02 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.visual02Box01 {
  text-align: center;
  position: absolute;
}

.scrollCue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #FFF;
  transition: opacity 0.3s ease;
}

.scrollCue.isHidden {
  opacity: 0;
  pointer-events: none;
}

.scrollCueText {
  font-size: 0.7rem;
  letter-spacing: .2em;
  margin-bottom: 8px;
  text-shadow: 0 0 6px rgba(0, 0, 0, .5);
}

.scrollCueBar {
  position: relative;
  width: 1px;
  height: 36px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, .4);
}

.scrollCueDot {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  animation: scrollCueMove 1.8s ease-in-out infinite;
}

@keyframes scrollCueMove {
  0%   { top: -100%; }
  100% { top: 100%; }
}


/*==============================================================================
	scroll reveal（スクロールで見出し・画像・テキストをアニメーション表示）
==============================================================================*/

.charReveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

h1.isInView .charReveal,
h2.isInView .charReveal {
  opacity: 1;
  transform: translateY(0);
}

.scrollReveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.scrollReveal.isInView {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .charReveal,
  .scrollReveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.visual01Txt {
  /* 原因判明：読み込んでいるswiper-bundle.min.cssは新しいバージョンのSwiperのもので、
     コンテナ側のクラス名が .swiper-container ではなく .swiper に変更されている。
     そのためHTML側の class="heroSwiper swiper-container" にはコンテナ用のCSS
     （position/overflow/z-index）が当たらないが、.swiper-wrapper（クラス名は変更前と同じ）
     には z-index:1; position:relative; がそのまま適用される。
     .heroSwiper自身がスタッキングコンテキストを作らないため、.swiper-wrapperのz-index:1が
     そのまま親の#visual01（position:fixed）のスタッキングコンテキストまで繰り上がり、
     z-indexを指定していない.visual01Txt（auto=0扱い）より手前（上）に表示されてしまい、
     結果としてスライダー画像の下に文字が隠れて見えなくなっていた。
     このz-indexで.swiper-wrapperより手前に出すことで解消する。 */
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 縦中央からもう少し上に寄せる */
.visual01Txt .textShadow01 {
  transform: translateY(-90px);
}

@media screen and (min-width: 768px) {
  .visual01Txt .textShadow01 {
    transform: translateY(-130px);
  }
}

@media screen and (min-width: 1251px) {
  .visual01Txt .textShadow01 {
    transform: translateY(-170px);
  }
}

/* 参考イメージ（心とからだをほどく。━忍冬香る古蔵にて）と同じ、見出しに準じた太字・同系フォントの2行目 */
.visual01SubText {
  font-size: 0.98rem;
  font-weight: bold;
}

.visual01SubTextEn {
  font-size: 0.56rem;
  font-style: italic;
  letter-spacing: .02em;
  opacity: .85;
}

/* ヒーロー文言一式（CHIBA/TATEYAMA BAY RESORT・見出し・2行目・英文）は、
   共有ユーティリティクラス（sizeCommon05/06）を使っているためここで個別に0.7倍へ縮小する */
.visual01Txt .sizeCommon06 {
  font-size: 0.56rem;
}

.visual01Txt h1.sizeCommon05 {
  font-size: 1.68rem;
}

@media screen and (min-width: 768px) {
  .visual01Txt .sizeCommon06 {
    font-size: 0.6rem;
  }

  .visual01Txt h1.sizeCommon05 {
    font-size: 2.1rem;
  }

  .visual01SubText {
    font-size: 1.26rem;
  }

  .visual01SubTextEn {
    font-size: 0.63rem;
  }
}

@media screen and (min-width: 1251px) {
  .visual01Txt .sizeCommon06 {
    font-size: 0.63rem;
  }

  .visual01Txt h1.sizeCommon05 {
    font-size: 2.8rem;
  }

  .visual01SubText {
    font-size: 1.54rem;
  }

  .visual01SubTextEn {
    font-size: 0.7rem;
  }
}

#visual01 .swiper-container {
  overflow: hidden;
}

.visual-overlay-image {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none;
  line-height: 0;
}

.visual-overlay-image img {
  width: 100%;
  height: auto;
  display: block;
}

.swiper-pagination-v {
  bottom: 15px !important;
  left: 50%;
  -webkit-transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-pagination-r,
.swiper-pagination-re,
.swiper-pagination-c,
.swiper-pagination-c2,
.swiper-pagination-c3 {
  bottom: 10px !important;
  left: 50% !important;
  -webkit-transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-pagination-v.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-r.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-re.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-c.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-c2.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-c3.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px !important;
}

.swiper-container2 .swiper-pagination {
  bottom: -40px !important;
}

@media screen and (min-width: 768px) {
  .swiperContents .swiper-container,
  .swiperContents .swiper-wrapper,
  .swiperContents .swiper-slide {
    height: 100%;
  }
}

@media screen and (min-width: 1251px) {

  #visual01,
  .swiperSlideCommon01 {
    height: 850px;
  }

  #mainScroll {
    margin-top: 850px;
  }

  #visual02 {
    height: 500px;
  }

  #visual02.visualCompact {
    height: 333px;
  }

  .swiper-button-prev-m { left: -70px !important; }
  .swiper-button-next-m { right: -70px !important; }

  .swiper-button-prev-m::before { content: "<"; font-size: 50px; margin-right: 4px; vertical-align: middle; }
  .swiper-button-prev-m::after  { content: "Prev"; font-size: 14px; vertical-align: middle; }
  .swiper-button-next-m::before { content: "Next"; font-size: 14px; vertical-align: middle; }
  .swiper-button-next-m::after  { content: ">"; font-size: 50px; margin-left: 4px; vertical-align: middle; }

  .swiper-container2 .swiper-slide { width: 750px !important; }
}

@media screen and (min-width: 768px) and (max-width: 1250px) {

  #visual01,
  .swiperSlideCommon01 {
    height: 600px;
  }

  #mainScroll {
    margin-top: 600px;
  }

  #visual02 {
    height: 300px;
    margin-top: 55px;
  }

  #visual02.visualCompact {
    height: 200px;
  }

  .swiper-button-prev-m { left: -5px !important; }
  .swiper-button-next-m { right: -5px !important; }

  .swiper-button-prev-m::before { content: "<"; font-size: 30px; margin-right: 4px; vertical-align: middle; }
  .swiper-button-prev-m::after  { content: "Prev"; font-size: 12px; vertical-align: middle; }
  .swiper-button-next-m::before { content: "Next"; font-size: 12px; vertical-align: middle; }
  .swiper-button-next-m::after  { content: ">"; font-size: 30px; margin-left: 4px; vertical-align: middle; }

  .swiper-container2 .swiper-slide { width: 600px !important; }
}

@media screen and (max-width: 767px) {

  #visual01,
  .swiperSlideCommon01 {
    height: 50vh;
  }

  #mainScroll {
    margin-top: 50vh;
  }

  #visual02 {
    height: 250px;
    margin-top: 55px;
  }

  .swiper-container2 .swiper-slide { width: 100% !important; }
}


/*--------------------------------------------------------------------
	pageTop
--------------------------------------------------------------------*/

#pageTop a {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #555;
  border-radius: 50%;
  color: #FFF !important;
  text-decoration: none !important;
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0.5;
  z-index: 90;
}

@media screen and (max-width: 767px) {
  #pageTop a { bottom: 50px; }
}


/*--------------------------------------------------------------------
	fixedBtn
--------------------------------------------------------------------*/

.fixedBtn { position: fixed; z-index: 500; text-align: center; }
.fixedBtn li a { display: block; color: #FFF; }

@media screen and (min-width: 768px) {
  .fixedBtn { top: 115px; right: 0; width: 50px; }
  .fixedBtn .rv a {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    width: 50px;
    height: 180px !important;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
    font-size: 0.9em;
    letter-spacing: .2em;
    line-height: 50px;
  }
}

@media screen and (max-width: 767px) {
  .fixedBtn { bottom: 0; left: 0; width: 100%; }
  .fixedBtn .rv a {
    width: 120px;
    height: 50px !important;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
    font-size: 0.9em;
    letter-spacing: .1em;
    line-height: 50px;
  }
}


/*--------------------------------------------------------------------
	footer
--------------------------------------------------------------------*/

#footer01 {
  position: relative;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
}

.footerInfo {
  margin-bottom: 40px;
}

/* 全景イラストはページ幅いっぱいの全面表示、その下にサイトマップを配置 */
.footerMain {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footerZenkei {
  /* 親（.contents04等）の余白・中央寄せを無視して、ビューポート幅いっぱいに広げる */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 16 / 7;
}

.footerNavi {
  width: 100%;
  min-width: 0;
}

.footerNaviGrid {
  text-align: left;
}

@media screen and (min-width: 768px) {
  .footerZenkei {
    aspect-ratio: 16 / 5;
  }
}

@media screen and (min-width: 1251px) {
  .footerZenkei {
    aspect-ratio: 16 / 4;
  }
}

@media screen and (min-width: 960px) {
  #footer01 {
    padding: 80px 20px;
  }

  #footer01 ul li {
    padding: 6px 0;
    letter-spacing: 0.1em;
  }
}

@media screen and (max-width: 959px) {
  #footer01 {
    padding: 50px 20px;
  }

  #footer01 ul li {
    padding: 6px 0;
    letter-spacing: 0.1em;
  }
}

/* 予約バーが画面最下部に固定表示されるため、フッターが隠れないよう余白を確保 */
@media screen and (min-width: 768px) {
  #footer01 {
    padding-bottom: 160px;
  }
}


/*--------------------------------------------------------------------
	photo text overlay
--------------------------------------------------------------------*/

.photoTxt01 {
  background-color: rgba(0, 0, 0, 0.7);
  color: #FFF;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px;
  text-align: center;
  width: 100%;
}


/*--------------------------------------------------------------------
	gmap
--------------------------------------------------------------------*/

.gmap iframe,
.gmap2 iframe {
  width: 100%;
  vertical-align: bottom;
}

.gmap2 iframe {
  height: 200px;
}

@media screen and (min-width: 1251px) {
  .gmap iframe { height: 600px; }
  .gmap.typeA iframe { height: 200px; }
}

@media screen and (min-width: 768px) and (max-width: 1250px) {
  .gmap iframe { height: 450px; }
  .gmap.typeA iframe { height: 200px; }
}

@media screen and (max-width: 767px) {
  .gmap iframe { height: 300px; }
  .gmap.typeA iframe { height: 200px; }
}


/*--------------------------------------------------------------------
	予約バー（.reserveBar）
	構造（余白・flex配置・sticky・SP折り返し）は固定。
	見た目（色・枠線・フォント）は :root の --reserve-* 変数の値のみ
	サイトごとに上書きすること。この行より下の構造そのものは変更しない。
--------------------------------------------------------------------*/

:root {
  --brand-main:       #0B4F6C;
  --brand-turquoise:  #17B8B0;
  --brand-navy:        #0B4F6C;
  --brand-navy-deep:   #073349;
  --reserve-bg:            #FFF;
  --reserve-border-bottom: 1px solid #E3EFEE;
  --reserve-font:          inherit;
  --reserve-btn-bg:        var(--brand-main, #333);
  --reserve-btn-fg:        #FFF;
}

.reserveBar {
  background-color: var(--reserve-bg);
  border-bottom: var(--reserve-border-bottom);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
  font-family: var(--reserve-font);
}
.reserveBar .sectionTitle { display: flex; align-items: baseline; flex-wrap: wrap; }
.reserveBarInner { display: flex; flex-wrap: wrap; align-items: flex-end; }
.reserveItem { display: flex; flex-direction: column; }
.reserveDateGroup { display: flex; flex-wrap: wrap; align-items: center; }
.nodateLabel { display: inline-flex; align-items: center; white-space: nowrap; }
.reserveItem select,
.reserveItemTitle input { border: 1px solid #DDD; background-color: #FFF; }
.btnSearch { background-color: var(--reserve-btn-bg); color: var(--reserve-btn-fg); text-align: center; }
.btnSearchSub { background-color: #FFF; color: var(--reserve-btn-bg); border: 1px solid var(--reserve-btn-bg); }

@media screen and (min-width: 768px) {
  .reserveBar {
    padding-top: 14px; padding-bottom: 14px; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 90;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  .reserveBar.isVisible {
    transform: translateY(0);
  }
  /* タイトルを左、検索フォーム＋ボタンを右に並べて縦幅を圧縮 */
  .reserveBar .textLayout15 {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .reserveBar .textLayout15 > *:nth-child(n+2) {
    margin-top: 0;
  }
  .reserveBar .sectionTitleWrap {
    flex-shrink: 0;
  }
  .reserveBarInner { flex: 1; gap: 14px; }
  .reserveItem select { height: 44px; padding: 0 8px; }
  .reserveItemTitle { flex: 1 1 160px; }
  .reserveItemTitle input { height: 44px; padding: 0 10px; width: 100%; }
  .btnSearch { height: 44px; line-height: 44px; padding: 0 18px; white-space: nowrap; }
}
@media screen and (max-width: 767px) {
  .reserveBar { padding-top: 16px; padding-bottom: 16px; margin-top: 55px; }
  .reserveItem { width: 100%; }
  .reserveItem select { height: 42px; padding: 0 8px; }
  .reserveItemTitle input { height: 42px; padding: 0 10px; width: 100%; }
  .btnSearch, .btnSearchSub { display: block; width: 100%; height: 46px; line-height: 46px; }
}

/* 「直近でご予約可能な人気日程」内に埋め込む検索窓（常時表示・固定表示ではない通常のカード）。
   フィールド類（.reserveBarInner/.reserveItem等）は.reserveBarと共通のクラスを流用し、
   外枠だけ position:fixed を持たない別クラスにしてある。 */
.reserveBarInline {
  background-color: var(--reserve-bg);
  border: 1px solid #E3EFEE;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  padding: 20px;
  margin-top: 30px;
  font-family: var(--reserve-font);
}
.reserveBarInline .sectionTitle { display: flex; align-items: baseline; flex-wrap: wrap; }

@media screen and (min-width: 768px) {
  .reserveBarInline {
    padding: 24px;
  }
  .reserveBarInline .textLayout15 {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .reserveBarInline .textLayout15 > *:nth-child(n+2) {
    margin-top: 0;
  }
  .reserveBarInline .sectionTitleWrap {
    flex-shrink: 0;
  }
}

/* 周辺観光：レンタサイクル案内 */
.rentalCycleBox {
  padding: 30px 24px;
}

.rentalCycleList > div {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid #E5E5E5;
}

.rentalCycleList dt {
  flex-shrink: 0;
  width: 7em;
}

@media screen and (max-width: 767px) {
  .rentalCycleList > div {
    flex-direction: column;
    gap: 2px;
  }
}