/*
Theme Name: Carsten Child
Theme URI: https://carsten.qodeinteractive.com
Description: A child theme of Carsten
Author: Elated Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: carsten
Template: carsten
*/

.qodef-h1, h1, .qodef-h2, h2, .qodef-h3, h3, .qodef-h4, h4, .qodef-h5, h5, .qodef-h6, h6 {
    font-family: "A1 Mincho", 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.qodef-pricing-slider .qodef-m-item.qodef-has-image .qodef-m-item-content .qodef-m-price-value {
    font-family: "A1 Mincho", 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
	font-size: 22px !important;
}
.qodef-interactive-link-showcase .qodef-m-item .qodef-e-title {
    font-family: "A1 Mincho", 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.qodef-pricing-table .qodef-m-price .qodef-m-price-currency {
    font-size: 18px !important;
}

.qodef-restaurant-menu-list .qodef-e-heading-price {
    font-size: 40px;
}
.qodef-grid.qodef-layout--template>.qodef-grid-inner>.qodef-grid-item.qodef-col--sidebar {
    display: none;
}
.qodef-room .qodef-m-image .qodef-e-room-info .qodef-e-read-more .qodef-button {
    display: none;
}
/* 全スライドのボタンを表示（opacity:0 を上書き） */
.qodef-room-list.qodef-swiper-container.qodef-appear-content .qodef-e .qodef-e-button {
  opacity: 1 !important;
}
/* IDで非表示にされているボタンも表示 */
#swiper-wrapper-c1714ce136c56a47 .qodef-button.qodef-layout--outlined {
  display: inline-flex !important;
}
.section-pricing {
  padding: 110px 0;
  background: #F7F8F9;
}

.pricing-header {
  text-align: center;
  margin-bottom: 64px;
}

.pricing-header .section-label {
  color: #8e8577;
}

.pricing-header h2 {
  font-size: clamp(24px, 3vw, 34px);
  color: #1e2a39;
  margin-bottom: 14px;
}

.pricing-header p {
  font-size: 14px;
  color: #6f6a63;
  font-weight: 300;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
  align-items: start;
}

.pricing-card {
  background: #ffffff;
  border: 1px solid #ddd5c8;
  overflow: hidden;
  box-shadow: none;
}

.pricing-card--featured {
  transform: none;
}

.pricing-card-head {
  padding: 32px 36px 26px;
  border-bottom: 1px solid #ddd5c8;
}

.pricing-card-type {
  font-size: 10px;
  letter-spacing: 0.25em;
  display: block;
  margin-bottom: 10px;
}

.pricing-card-name {
  font-size: 28px;
  color: #1e2a39;
  display: block;
  margin-bottom: 6px;
}

.pricing-card-sub {
  font-size: 12px;
  color: #6f6a63;
  font-weight: 300;
}

.pricing-rows {
  padding: 30px 36px 34px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pricing-row {
  font-size: 13px;
}

.pricing-row + .pricing-row {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #e1d9cd;
}

.pricing-row-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.pricing-row-head .day-type {
  color: #6f6a63;
  font-weight: 300;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.pricing-row-head .line {
  width: 100%;
  height: 1px;
  background: #d8d0c4;
}

.pricing-row .prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.pricing-row .price-main {
  font-size: 34px;
  color: #1e2a39;
  line-height: 1;
}

.pricing-row .price-stay {
  font-size: 11px;
  color: #7d766c;
  font-weight: 300;
  letter-spacing: 0.08em;
}

.pricing-row .price-multi {
  display: block;
  font-size: 12px;
  margin-top: 0;
}

.pricing-note {
  max-width: 920px;
  margin: 28px auto 0;
  padding: 22px 28px;
  background: #ffffff;
  border: 1px solid #ddd5c8;
  font-size: 13px;
  color: #6f6a63;
  font-weight: 300;
  line-height: 1.8;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.pricing-note .note-icon {
  font-size: 10px;
  flex-shrink: 0;
  line-height: 1.8;
  letter-spacing: 0.22em;
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card--featured {
    transform: none;
  }
}


.section-coupon {
  padding: 80px 20px;
  background: #16233a;
}

.coupon-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.coupon-badge {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.28);
  color: #ffffff;
  font-size: 10px;
  letter-spacing: 0.25em;
  padding: 5px 14px;
  margin-bottom: 20px;
}

.coupon-title {
  font-size: clamp(22px, 3vw, 32px);
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.5;
}

.coupon-body {
  font-size: 14px;
  color: rgba(255,255,255,0.74);
  font-weight: 300;
  line-height: 1.9;
}

.coupon-detail {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 36px 44px;
  text-align: center;
  min-width: 240px;
}

.coupon-off {
  font-size: 52px;
  color: #fff;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}

.coupon-off-label {
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  font-weight: 300;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 16px;
}

.coupon-condition {
  font-size: 11px;
  color: #fff;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .section-coupon {
    padding: 64px 16px;
  }

  .coupon-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .coupon-detail {
    min-width: 0;
    width: 100%;
  }
}



/* ── リセット（WordPress テーマの干渉を防ぐ） ── */
.urara-seasons *,
.urara-seasons *::before,
.urara-seasons *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── セクション全体 ── */
.urara-seasons {
  padding: 100px 0;
  overflow: hidden;
}

.urara-seasons__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── ヘッダー ── */
.urara-seasons__header {
  max-width: 500px;
  margin-bottom: 64px;
}

.urara-seasons__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.urara-seasons__title {
  font-size: clamp(22px, 2.8vw, 30px);
  color: #5C4A32;
  line-height: 1.5;
  margin-bottom: 14px;
}

.urara-seasons__lead {
  font-size: 14px;
  line-height: 1.9;
}

/* ── グリッド ── */
.urara-seasons__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #DDD8CE;
}

/* ── 各カード ── */
.urara-season-card {
  padding: 40px 32px 48px;
  border-right: 1px solid #DDD8CE;

  /* 背景漢字のための基準点 */
  position: relative;
  overflow: hidden;
}
.urara-season-card:last-child {
  border-right: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   背景の大きな漢字
   ::before で描画することで
   WordPress の position リセットに強い
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.urara-season-card::before {
  content: attr(data-kanji);           /* data-kanji 属性から文字を取得 */
  font-family: 'Shippori Mincho', 'Noto Serif JP', 'Georgia', serif;
  font-size: 120px;
  font-weight: 500;
  line-height: 1;
  color: #DDD8CE;                      /* ボーダーと同系のごく薄い色 */
  opacity: 0.6;

  /* 右下に絶対配置 */
  position: absolute;
  bottom: -10px;
  right: -8px;

  /* テキストが前面コンテンツに重ならないよう */
  pointer-events: none;
  user-select: none;
  z-index: 0;

  /* WordPress 側の line-height / font-size リセット対策 */
  display: block;
}

/* ── カード内のコンテンツは z-index で前面に ── */
.urara-season-card__content {
  position: relative;
  z-index: 1;
}

/* ── 季節名（表示用・小さいほう） ── */
.urara-season-card__name {
  font-family: 'Shippori Mincho', 'Noto Serif JP', 'Georgia', serif;
  font-size: 38px;
  color: #5C4A32;
  display: block;
  margin-bottom: 4px;
  line-height: 1.2;
}

.urara-season-card__name-en {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: #B09A7A;
  text-transform: uppercase;
  display: block;
  margin-bottom: 24px;
  font-weight: 300;
}

/* ── アクティビティリスト ── */
.urara-season-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.urara-season-card__list li {
  font-size: 13px;
  line-height: 1.7;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* リストの点マーク */
.urara-season-card__list li::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #B09A7A;
  flex-shrink: 0;
  margin-top: 7px;
}

/* ── レスポンシブ ── */
@media (max-width: 768px) {
  .urara-seasons__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .urara-season-card {
    border-right: 1px solid #DDD8CE;
    border-bottom: 1px solid #DDD8CE;
  }
  .urara-season-card:nth-child(2n) {
    border-right: none;
  }
  .urara-season-card:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .urara-seasons {
    padding: 72px 0;
  }
  .urara-seasons__grid {
    grid-template-columns: 1fr;
  }
  .urara-season-card {
    border-right: none;
    border-bottom: 1px solid #DDD8CE;
  }
  .urara-season-card:last-child {
    border-bottom: none;
  }
  .urara-season-card::before {
    font-size: 96px;
  }
}


/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  うらら高島 / Carsten テーマ
  「Our Services & Activities」カルーセル
  画像へのネイビー半透明マスク
 
  貼り付け場所:
  WordPress 管理画面 > 外観 > カスタマイズ
  > 追加CSS  または
  子テーマの style.css
 
  ネイビーの濃さは --mask-opacity で調整
  0.0 = 透明  /  1.0 = 完全ネイビー
  推奨値: 0.35〜0.50
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
 
:root {
  --mask-color:   17, 35, 75;   /* ネイビー RGB */
  --mask-opacity: 0.42;         /* 濃さ: 0.0〜1.0 */
}
 
 
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   【パターン A】
   Qode Cards Slider（最も一般的）
   .qodef-cards-slider 内の画像ラッパー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
 
.qodef-cards-slider .qodef-e-media-image,
.qodef-cards-slider .qodef-e-image,
.qodef-cards-slider .swiper-slide .qodef-e-media {
  position: relative;
  overflow: hidden;
}
 
.qodef-cards-slider .qodef-e-media-image::after,
.qodef-cards-slider .qodef-e-image::after,
.qodef-cards-slider .swiper-slide .qodef-e-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--mask-color), var(--mask-opacity));
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}
 
/* ホバー時に少し薄くする（任意） */
.qodef-cards-slider .qodef-e-media-image:hover::after,
.qodef-cards-slider .qodef-e-image:hover::after,
.qodef-cards-slider .swiper-slide .qodef-e-media:hover::after {
  opacity: 0.65;
}
 
 
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   【パターン B】
   Qode Pricing Cards Slider
   .qodef-pricing-cards-slider
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
 
.qodef-pricing-cards-slider .qodef-e-media,
.qodef-pricing-cards-slider .qodef-e-media-image {
  position: relative;
  overflow: hidden;
}
 
.qodef-pricing-cards-slider .qodef-e-media::after,
.qodef-pricing-cards-slider .qodef-e-media-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--mask-color), var(--mask-opacity));
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}
 
.qodef-pricing-cards-slider .qodef-e-media:hover::after,
.qodef-pricing-cards-slider .qodef-e-media-image:hover::after {
  opacity: 0.65;
}
 
 
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   【パターン C】
   Elementor Image Carousel / Swiper
   .elementor-image-carousel 内の画像
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
 
.elementor-image-carousel .swiper-slide {
  position: relative;
  overflow: hidden;
}
 
.elementor-image-carousel .swiper-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--mask-color), var(--mask-opacity));
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}
 
.elementor-image-carousel .swiper-slide:hover::after {
  opacity: 0.65;
}
 
 
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   【パターン D】
   汎用 Swiper スライド内の img タグに直接
   上記すべてが効かなかった場合の最終手段
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
 
.qodef-cards-slider .swiper-slide img,
.qodef-pricing-cards-slider .swiper-slide img {
  position: relative;
  display: block;
}
 
/* img タグには ::after が使えないため
   親要素をラッパーにして対応 */
.qodef-cards-slider .swiper-slide figure,
.qodef-pricing-cards-slider .swiper-slide figure {
  position: relative;
  overflow: hidden;
  margin: 0;
}
 
.qodef-cards-slider .swiper-slide figure::after,
.qodef-pricing-cards-slider .swiper-slide figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--mask-color), var(--mask-opacity));
  pointer-events: none;
  z-index: 2;
}



@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */

	.qodef-item-showcase .qodef-m-image {
        padding-right: 0px;
        padding-top: 20px;
    }

}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	
#qodef-top-area {
        height: 54px;
}
#qodef-top-area .qodef-widget-holder.qodef--right {
    margin-left: 0;
}
#qodef-top-area .qodef-widget-holder.qodef--left {
    margin-right: 0;
}
/* ── 画像の重なりを解消・センタリング ── */
.qodef-m-image {
  position:    relative !important;
  z-index:     1 !important;
  display:     block !important;
  width:       100% !important;
  text-align:  center !important;
  margin-top:  16px !important;
}

.qodef-m-image img {
  display:      block !important;
  width:        auto !important;  /* 元の横幅を維持 */
  max-width:    100% !important;
  margin-left:  auto !important;
  margin-right: auto !important;
}


}
@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */

}
@media screen and (max-width: 320px) {
/* 320pxまでの幅の場合に適応される */

}