@charset "UTF-8"; /* Farm/buy デザイントークン -----------------------------------------------------------------*/ /* イージング -----------------------------------------------------------------*/ /* デュレーション -----------------------------------------------------------------*/ /* Farm/buy デザイントークン -----------------------------------------------------------------*/ /* イージング -----------------------------------------------------------------*/ /* デュレーション -----------------------------------------------------------------*/ /*============================================= About（体感型ファーム）ブロック インナー（中央寄せ・最大1440px・左右123px）＋ 見出し / 本文 / ボタン / 装飾画像 ※ section 側の余白・背景・波フレーム等はページ固有で持つ ==============================================*/ /*============================================= c-col系カード 共通: タイトル / 説明文 （色はセクションから継承＝白/ゴールド背景の両対応） ==============================================*/ /*============================================= ボタン 共通ベース（pill / 高さ80px） 引数: $bg 背景色 ==============================================*/ /*============================================= タブ外枠 共通ベース（画面下部固定のフローティングピル） 引数: $gap / $height / $padding（左右） / $radius / $bottom is-hidden でフェードアウト（JS が footer 検知で付与） 子要素（リンク・current装飾）は各ページ側で定義 ==============================================*/ /*============================================= テーマ別テクスチャ背景（data-theme で出し分け） 適用したい要素のルール内で @include themeTexture ==============================================*/ /*============================================= カテゴリ別カラー（body[data-theme] で切替） themeTexture（背景テクスチャ）の色版。見出し・ラベルなどの文字色に使う 使い方: .c-spot_infoLabel { @include themeColor(color, $color-gold); } 第1引数=適用プロパティ / 第2引数=どのカテゴリでもない時の既定値 ==============================================*/ /*============================================= 画像の縁ゆらぎ（ストップモーション風 boiling line） 手描きのちぎり縁の形を変位させて、縁を揺らす Pug: +cBoilFrameDefs でフィルター定義を1回出力し、画像ラッパーに .c-boilFrame.js-boil を付ける JS : common.js が画面内の間だけ .is-boiling を付与（画面外は paused で負荷軽減） 形の持たせ方: 透過PNGを直接置く / 角版写真＋マスク（common/masks/）で形を付ける。 ラッパーに --mask（PC）/ --maskSp（SP・省略時 --mask）を渡すと img にマスクが掛かる。 マスクは箱いっぱいに伸ばす（mask-size:100% 100%）ため、SVGは preserveAspectRatio="none" が要る。 フィルターは img でなくラッパーに掛けるため、マスク後の絵が変位＝縁が揺れる。 ==============================================*/ /*============================================= 記事のSNSシェアボタン（X / LINE / Facebook / Threads / リンクコピー） Pug: +cShareBtns JS: common.js の initShareBtns ==============================================*/ /*============================================= スライダー矢印（40px円 + chevron） 位置（top / left / right）と prev の反転は呼び出し側で指定 prev は rotate: 180deg、矢印は基準で「次へ（右）」向き 再調整#109/#424: サイズを 48px → 40px に統一（丸を小さくしたぶんシェブロンも細め小さめに）。 施設詳細ギャラリー・記事ギャラリー・TOP・Farm Guide などスライダー矢印すべてがこの値で揃う ==============================================*/ /*============================================= スライダーのページャー（ドット） バー（swiper-scrollbar）ではなく「現在位置がわかるドット」で揃えるための共通パーツ Pug: 空の器を置くだけ（ドットは JS が snapGrid の数だけ生成する） .c-sliderDots.js-sliderDots JS : common.js の buildSliderDots(swiper, pagerEl) を呼ぶ スクロール不要なときは器に is-lock が付いて非表示になる アクティブ色はページのキーカラー（--slider-accent）。 カテゴリ別に変えたい箇所は --cat-accent / --fg-accent を親で指定すれば優先される ==============================================*/ /*============================================= 記事内 画像ギャラリー（Swiper：中央寄せ・前後peek・全幅ブレイクアウト） 前後矢印は sliderArrow、下部ドット。news/single・howto/single で共用 JS: common.js の initArticleGallery（専用フックで発火） ==============================================*/ /*============================================= ギャラリーブロック（画像2枚並び） コアCSSはキャプションを画像へ重ねる（白文字＋グラデーション背景）が、 下が明るい写真では読めないため、単独画像と同じく画像の外・下へ出す。 記事本文（牧場の楽しみ方 / お知らせ・ブログ / イベント・アクティビティ）で共用。 並び（列レイアウト）もここで完結させる。 コアの wp-block-library は ark_dequeue_default_block_styles() でページによって 外れるため（イベント・アクティビティ詳細、固定ページ等）、is-layout-flex の定義を コアに任せるとそのページだけ縦1列に崩れる。 列数指定（columns-2 等）は使わない運用のため columns-default のみ、 既存記事の見た目を変えないようコアと同じ幅計算・同じ 600px 境界で再現する。 SP(<600px) … 常に2列 PC(>=600px) … 1枚=100% / 2枚=2列 / 3枚以上=3列 ※ コアCSSが残るページ（レガシー記事・お知らせ詳細・牧場の楽しみ方）では コア側の擬似クラス付きセレクタの方が詳細度が高く、そちらが採用される。同値。 ==============================================*/ /*============================================= 休止中の施設カード（サムネイルへ理由ラベルを重ねる） 塗りつぶしグレーではなく写真を出したまま、薄いグレーを重ねてラベルを見せる 本日の牧場（/farm/today/）・営業時間（/farm/hours/）で共用 使い方: カードに .is-closed を付け、サムネイル内へ .todayFacility_status > .todayFacility_statusLabel を置く ==============================================*/ /*============================================= 記事本文（Gutenberg 出力）のタイポグラフィ base の記事本文はクラス依存（.article_text / .article_h1 / .article_h2）だが、 WPの本文は Gutenberg ブロック（p / h2 / h3）で出力されるため要素セレクタに読み替える。 p ← .article_text（段落） h2 ← .article_h1（大見出し） h3 ← .article_h2（子見出し） お知らせ・ブログ（.article_content）／イベント・アクティビティ（.eventBlock）で共用 ==============================================*/ /*============================================= セクション見出し（英ラベル + 明朝タイトル / 中央寄せ） 任意要素: _label（英ラベル） ==============================================*/ /*============================================= 円弧ドーム付きセクション見出し（サブ + 明朝タイトル / 中央寄せ） 見出し上辺に clip-path の白ドーム（円弧）を配置 ==============================================*/ /*============================================= FV（カテゴリ見出し + メインビジュアル） ==============================================*/ /*============================================= 名物紹介（見出し + 画像/テキストを左右交互に並べる alternate） ==============================================*/ /*============================================= 2カラムカード（画像 + キャッチ + タイトル） ==============================================*/ /*============================================= 4カラム グリッド（共通コンテナ） コンテナは c-col4。子カードは c-col4Rect_* / c-col4Square_* を併用する ==============================================*/ /*============================================= 4カラム（矩形画像 + タイトル + 本文）の子要素 ※コンテナは c-col4 ==============================================*/ /*============================================= 4カラム（正方形画像 + タイトル） 任意要素: _rank（順位メダル） / _text（説明） 文字色はセクションから継承（白背景/ゴールド背景の両対応） ==============================================*/ /*============================================= Farm Guide（買い物ガイド スライダー） ==============================================*/ /*============================================= 牧場散策のすすめ（白カード + 風景スライダー） 独立した白カード。幅は親（各ページの inner）に合わせるため指定しない Pug: +cFarmWalk（内容固定） JS : common.js の initFarmWalkGallery（.js-farmWalkGallery） ==============================================*/ /*============================================= お知らせ（ニュース一覧） ==============================================*/ /*============================================= オンラインショップ バナー ==============================================*/ /*============================================= ショップ枠（テクスチャ背景 + 白パネル + 紹介 + 営業情報） ==============================================*/ /*============================================= TOPへ戻るボタン（右下固定） ==============================================*/ /*============================================= Topics（左見出し + サムネ付きリスト） ==============================================*/ /*============================================= 下層ページFV（テクスチャ背景 + 見出し + 横スクロールギャラリー + リード） 引数: $bg 背景色 / 任意要素: _label ==============================================*/ /*============================================= 詳細情報テーブル（ラベル/値 + 右に画像） 引数: $accent ラベル色 / $accentDark 画像背面オフセット色 ==============================================*/ /*============================================= 見頃（見出し + カード + アクションボタン） 引数: $accent ボタン色 ==============================================*/ /*============================================= 他の◯◯（テクスチャ背景 + 見出し + 4カラム） 引数: $bg 背景色 ==============================================*/ /*============================================= Pick up（リード文 + 商品スライダー） セクション枠（.pickup）はページ側。当 mixin はブロック以下 スライダーは Swiper（センター寄せ・無限ループ・自動再生なし・gap48px / common.js） ==============================================*/ /*============================================= イベント/アクティビティ カード（4カラム・幅274px固定） c-col系とは幅が異なる別系統。日付は markup の並び順で上下どちらにも対応。 任意要素: _date / _badge SP(375): 縦積み1カラム。カードは「左=正方形画像 / 右=バッジ→日付→タイトル」の横並び。 ==============================================*/ /*============================================= ページ見出し（タイトル48px + 英語32px / 中央寄せ） 任意要素: _en ==============================================*/ /*============================================= ページネーション（番号 + … / 現在ページは黒丸） ==============================================*/ /*============================================= お知らせカード（日付 + カテゴリ + タイトル + サムネ / 横並び） ==============================================*/ /*============================================= グレー背景パネル（上下端に波フレーム）。汎用で各所に流用可 ==============================================*/ /*============================================= 情報ボックス（見出し + 定義リスト + 予約ボックス） 任意要素: _icon / _reserve 一式 ==============================================*/ /*============================================= 予約カレンダー（開催日を選ぶ月グリッド） c-infoBox_reserve の中に置いて使う想定 セルは JS（farm_activity_single.js）が今日基準で描画する 配色: グレー文字 = 選べない / えんじ文字＋淡いえんじ塗り = 選べる / えんじべた塗り = 選択中 ※ 淡い塗りだけでは白カードとの差が 1.09:1 しかなく面として識別できないため、 文字色（えんじ #ab0033 = 白に対して 7.56:1）でも可否が分かるようにしている ==============================================*/ /*============================================= Ark館ヶ森の楽しみ方バナー（画像 + 中央テキスト重ね） 内容固定の共通パーツ（テキスト・画像とも全ページ共通） ==============================================*/ /*============================================= ガイド内タブナビ（画面下部固定のフローティングピル） カレントはページごとに +cGuideTab(current) で切り替える 外枠は c-tabBase。is-current は下線 ==============================================*/ /*============================================= WEBチケット バナー（画像 + 案内） 本文は c-infoBox の reserve を流用するため、使用ページは @include c-infoBox; も必要 ==============================================*/ /*============================================= ガイド系セクション見出し（アイコン + タイトル） 引数: $iconW アイコン幅（ページごとに異なる） 下マージンは文脈差のため各ページで .c-guideHead に付与 ==============================================*/ /*============================================= 情報テーブル（ラベル / 値の2カラム行を縦に積む） 任意要素: _rowNote（値の下の注記） ==============================================*/ /*============================================= 見出し行（c-guideHead + 任意ジャンプナビ） 見出しは c-guideHead を内包。使用ページは @include c-guideHead も必要 ナビ有り＝space-between、ナビ無し＝見出しのみ ==============================================*/ /*============================================= 白カードブロック（見出し + 中身） 上マージン / 見出し下マージンは文脈差のため各ページで上書き access のように内側不要なら _inner は省略可 ==============================================*/ /*============================================= ダウンロードボタン（黒・小・アイコン付き） アイコン位置（前/後）は markup の並び順で自由 上マージンは文脈差のため各ページで上書き ==============================================*/ /*============================================= 下線付きサブ見出し（-plain で罫線なし） ==============================================*/ /*============================================= 注意事項リスト（ラベル + 説明のペア／ラベル先頭にクリムゾンの丸） ==============================================*/ /*============================================= 場内ガイドマップ（背景テクスチャ + 円形DLボタン） farm_map / howto で共用 ==============================================*/ /*============================================= お問い合わせフォーム（ステップ表示 + フォーム本体） 例:
    … 1入力 / 2ご確認 / 3完了 …
…
… 2カラム …
… 同意チェック …
==============================================*/ /*================================================================ Farm / buy / 精肉（ページエントリ） - PC style only - 命名: module_element（モジュール=キャメル / 要素=_キャメル / 修飾子=-ハイフン） - クラスセレクタはフラット。img等の要素・擬似要素・状態(&)は親にネスト - header / footer / totop は common 側、共通コンポーネント(c-)を再利用 =================================================================*/ .c-pageHead { text-align: center; line-height: 1.4; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { main:has(.news_filter) .c-pageHead { padding-bottom: min(17.0666666667vw, 83.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { main:has(.news_filter) .c-pageHead { padding-bottom: 4.4444444444vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-pageHead { padding-top: min(64vw, 312px); padding-bottom: min(25.6vw, 124.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-pageHead { padding-top: 16.6666666667vw; padding-bottom: 6.6666666667vw; } } .c-pageHead_title { margin: 0; font-family: "Zen Old Mincho", serif; font-weight: 500; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-pageHead_title { font-size: min(12.8vw, 62.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-pageHead_title { font-size: clamp(45.6px, 3.3333333333vw, 72px); } } .c-pageHead_en { font-family: "Special Gothic Condensed One", sans-serif; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-pageHead_en { font-size: min(8.5333333333vw, 41.6px); margin: min(3.2vw, 15.6px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-pageHead_en { font-size: clamp(30.4px, 2.2222222222vw, 48px); margin: 0.8333333333vw 0 0; } } .c-pageHead_lead { line-height: 2; text-align: left; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-pageHead_lead { font-size: min(4.2666666667vw, 20.8px); margin: min(17.0666666667vw, 83.2px) auto 0; max-width: min(219.7333333333vw, 1071.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-pageHead_lead { font-size: clamp(15.2px, 1.1111111111vw, 24px); margin: 4.4444444444vw auto 0; max-width: 57.2222222222vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-pageHead { padding-top: min(42.6666666667vw, 208px); padding-bottom: min(17.0666666667vw, 83.2px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-pageHead_title { font-size: min(8.5333333333vw, 41.6px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-pageHead_en { margin-top: min(3.2vw, 15.6px); font-size: min(3.7333333333vw, 18.2px); letter-spacing: 0.14em; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-pageHead_lead { margin-top: min(10.6666666667vw, 52px); padding: 0 min(6.4vw, 31.2px); font-size: min(4vw, 19.5px); line-height: 2; } } .c-col4 { display: flex; flex-wrap: wrap; justify-content: center; gap: 46px 1.6666666667vw; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4 { justify-content: flex-start; } } .c-col4-left { justify-content: flex-start; } .c-col4 > li, .c-col4Rect_card { width: calc((100% - 1.6666666667vw * 3) / 4); } .c-col4Slider { display: contents; } .c-col4Slider_ctrl { display: none; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4 { gap: min(8.5333333333vw, 41.6px) min(3.7333333333vw, 18.2px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4 > li, .c-col4Rect_card { width: calc((100% - min(3.7333333333vw, 18.2px)) / 2); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider { display: block; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider.swiper { width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider > .c-col4, .c-col4.c-col4Slider_list { display: flex; flex-flow: row nowrap; justify-content: flex-start; gap: min(6.4vw, 31.2px); width: 100vw; margin-left: calc(50% - 50vw); overflow-x: auto; scrollbar-width: none; } .c-col4Slider > .c-col4::-webkit-scrollbar, .c-col4.c-col4Slider_list::-webkit-scrollbar { display: none; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider.swiper .c-col4 { gap: 0; width: auto; margin-left: 0; overflow: visible; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider > .c-col4 > *, .c-col4.c-col4Slider_list > * { flex: 0 0 auto; width: 72vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider > .c-col4 > *:first-child, .c-col4.c-col4Slider_list > *:first-child { margin-left: min(6.4vw, 31.2px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider > .c-col4 > *:last-child, .c-col4.c-col4Slider_list > *:last-child { margin-right: min(6.4vw, 31.2px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider.swiper .c-col4 > *:first-child, .c-col4Slider.swiper .c-col4 > *:last-child { margin-left: 0; margin-right: 0; } } .c-col4Slider_ctrl { display: none; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider.swiper .c-col4Slider_ctrl { width: calc(100% - 48px); margin-right: auto; margin-left: auto; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider.is-noScroll .c-col4Slider_ctrl { display: none; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider_bar { position: relative; flex: 1; height: 3px; background-color: #e5e5e5; border-radius: 2px; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider_bar.swiper-scrollbar-lock { display: none; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider_barThumb { position: absolute; top: 0; left: 0; width: 30%; height: 3px; background-color: var(--slider-accent, #ab0033); border-radius: 2px; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider_arrows { display: flex; flex-shrink: 0; gap: min(3.7333333333vw, 18.2px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Slider_arrow { position: relative; width: min(12.8vw, 62.4px); height: min(12.8vw, 62.4px); border-radius: 50%; background-color: #f2f2f2; cursor: pointer; } .c-col4Slider_arrow::after { content: ""; display: block; width: 14px; aspect-ratio: 1; border-top: 2px solid #050403; border-right: 2px solid #050403; rotate: 45deg; position: absolute; top: min(4.5333333333vw, 22.1px); left: min(4vw, 19.5px); } .c-col4Slider_arrow.c-col4Slider_arrow-prev { rotate: 180deg; } .c-col4Slider_arrow.is-disabled { opacity: 0.3; pointer-events: none; } .c-col4Slider_arrow.swiper-button-disabled { opacity: 0.3; pointer-events: none; } .c-col4Slider_arrow.swiper-button-lock { display: none; } } .c-col4Square_card { position: relative; display: block; color: inherit; } .c-col4Square_rank { position: absolute; z-index: 3; display: grid; place-items: center; aspect-ratio: 1; width: 4.5138888889vw; background-image: url(../images/common/decorations/thumb-icon-bg.svg); background-size: contain; background-position: center; background-repeat: no-repeat; color: #fff; font-family: "Special Gothic Condensed One", sans-serif; line-height: 1; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Square_rank { width: min(8.5333333333vw, 41.6px); top: min(2.1333333333vw, 10.4px); left: min(2.1333333333vw, 10.4px); font-size: min(5.3333333333vw, 26px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-col4Square_rank { font-size: clamp(24.7px, 1.8055555556vw, 39px); top: -0.8333333333vw; left: -0.8333333333vw; } } .c-col4Square_thumb { aspect-ratio: 1; overflow: hidden; position: relative; overflow: hidden; background-color: #838383; } .c-col4Square_thumb > img, .c-col4Square_thumb > svg, .c-col4Square_thumb > iframe, .c-col4Square_thumb > video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Square_thumb { border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-col4Square_thumb { border-radius: 0.6944444444vw; } } .c-col4Square_card.is-ec .c-col4Square_thumb::after { content: ""; position: absolute; inset: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.4); background-image: url(../images/common/icons/icon-cart.svg); background-repeat: no-repeat; background-position: center; background-size: 40px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Square_card.is-ec .c-col4Square_thumb::after { content: none; border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-col4Square_card.is-ec .c-col4Square_thumb::after { border-radius: 0.6944444444vw; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-col4Square_card.is-ec:hover .c-col4Square_thumb::after { opacity: 1; } } .c-col4Square_card.is-feeding::after { content: "餌やり\a体験"; white-space: pre; text-align: center; position: absolute; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; width: 4.5138888889vw; background-image: url(../images/common/decorations/thumb-icon-bg.svg); background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 2; color: #fff; line-height: 1.4; font-weight: 500; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Square_card.is-feeding::after { content: "餌やり体験"; writing-mode: horizontal-tb; white-space: nowrap; top: min(2.1333333333vw, 10.4px); left: min(2.1333333333vw, 10.4px); right: auto; width: auto; height: auto; aspect-ratio: auto; padding: min(1.0666666667vw, 5.2px) min(1.6vw, 7.8px); background-image: none; background-color: #ab0033; border-radius: min(1.0666666667vw, 5.2px); font-size: min(2.6666666667vw, 13px); line-height: 1.4; letter-spacing: 0.04em; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-col4Square_card.is-feeding::after { font-size: clamp(11.4px, 0.8333333333vw, 18px); top: 1.3888888889vw; right: 1.3888888889vw; } } .c-col4Square_title { font-weight: 500; line-height: 1.6; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Square_title { font-size: min(4.8vw, 23.4px); margin: min(4.2666666667vw, 20.8px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-col4Square_title { font-size: clamp(17.1px, 1.25vw, 27px); margin: 1.1111111111vw 0 0; } } .c-col4Square_text { color: #838383; line-height: 2; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Square_text { font-size: min(4.2666666667vw, 20.8px); margin: min(2.1333333333vw, 10.4px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-col4Square_text { font-size: clamp(15.2px, 1.1111111111vw, 24px); margin: 0.5555555556vw 0 0; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Square_title { margin-top: min(5.3333333333vw, 26px); font-size: min(4vw, 19.5px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-col4Square_thumb > img { transition: transform 0.6s ease; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { a.c-col4Square_card:hover .c-col4Square_thumb > img { transform: scale(1.05); } } div.c-col4Square_card .c-col4Square_thumb > img { transition: none; } .c-eventCard { display: grid; grid-template-columns: repeat(4, calc((100% - 3.3333333333vw * 3) / 4)); justify-content: space-between; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-eventCard { grid-template-columns: 1fr; row-gap: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-eventCard { gap: 5.0694444444vw 3.3333333333vw; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-eventCard_item { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; } } .c-eventCard_card { display: block; color: inherit; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-eventCard_card { position: relative; display: grid; grid-template-columns: min(38.1333333333vw, 185.9px) 1fr; grid-template-rows: auto auto; -moz-column-gap: min(4.2666666667vw, 20.8px); column-gap: min(4.2666666667vw, 20.8px); align-items: start; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-eventCard_card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; } } .c-eventCard_date { min-height: 1.2em; font-weight: 500; line-height: 1.2; letter-spacing: 0.04em; } .c-eventCard_date span { font-family: "Zen Kaku Gothic Antique", MyYuGothicM, "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-weight: normal; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-eventCard_date span { font-size: min(2.9333333333vw, 14.3px); padding: 0 2px; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-eventCard_date span { font-size: clamp(15.2px, 1.1111111111vw, 24px); padding: 0 0.2777777778vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-eventCard_date { grid-column: 2; grid-row: 1; align-self: start; min-width: 0; min-height: 0; margin: 0 0 min(2.1333333333vw, 10.4px); font-size: min(3.7333333333vw, 18.2px); white-space: nowrap; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-eventCard_date { font-size: clamp(19px, 1.3888888889vw, 30px); margin: 0 0 0.8333333333vw; } } .c-eventCard_thumb { position: relative; aspect-ratio: 1; overflow: hidden; background-color: #838383; } .c-eventCard_thumb > img, .c-eventCard_thumb > svg, .c-eventCard_thumb > iframe, .c-eventCard_thumb > video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-eventCard_thumb { grid-column: 1; grid-row: 1/span 2; align-self: start; position: static; width: min(38.1333333333vw, 185.9px); height: min(38.1333333333vw, 185.9px); aspect-ratio: auto; overflow: hidden; border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-eventCard_thumb { border-radius: 0.6944444444vw; } } .c-eventCard_badge { position: absolute; background-color: #ab0033; color: #fff; font-weight: 500; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-eventCard_badge { top: 0; left: min(42.4vw, 206.7px); font-size: min(3.4666666667vw, 16.9px); padding: min(1.6vw, 7.8px) min(3.2vw, 15.6px); border-radius: min(1.6vw, 7.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-eventCard_badge { bottom: 0.5555555556vw; left: 0.5555555556vw; font-size: clamp(11.4px, 0.8333333333vw, 18px); padding: 0.3472222222vw 0.8333333333vw; border-radius: 0.3472222222vw; } } .c-eventCard_title { font-weight: 500; line-height: 1.6; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-eventCard_title { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: min(4vw, 19.5px); word-break: break-all; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-eventCard_title { font-size: clamp(15.2px, 1.1111111111vw, 24px); margin: 1.1111111111vw 0 0; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-eventCard_card:has(.c-eventCard_badge) .c-eventCard_date { margin-top: min(11.2vw, 54.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-eventCard_thumb > img { transition: transform 0.6s ease; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-eventCard_card:hover .c-eventCard_thumb > img { transform: scale(1.05); } } .c-infoBox { background-color: #f5f5f4; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox { padding: min(10.6666666667vw, 52px) min(6.4vw, 31.2px); margin-top: min(17.0666666667vw, 83.2px); border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox { padding: 4.4444444444vw; margin-top: 6.6666666667vw; border-radius: 0.6944444444vw; } } .c-infoBox_head { text-align: center; } .c-infoBox_icon { width: 5.4861111111vw; height: auto; } .c-infoBox_title { color: #050403; font-weight: 500; line-height: 1.6; letter-spacing: 0.04em; text-align: center; } [data-theme=eat] .c-infoBox_title { color: #e87777; } [data-theme=shop] .c-infoBox_title { color: #c09060; } [data-theme=garden] .c-infoBox_title { color: #57ac91; } [data-theme=animals] .c-infoBox_title { color: #f88c6b; } [data-theme=experience] .c-infoBox_title, [data-theme=activity] .c-infoBox_title, [data-theme=event] .c-infoBox_title { color: #6ea8d6; } [data-theme=howto] .c-infoBox_title { color: #57ac91; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_title { font-size: min(5.8666666667vw, 28.6px); line-height: 1.6; margin: min(2.1333333333vw, 10.4px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_title { font-size: clamp(20.9px, 1.5277777778vw, 33px); margin: 0.5555555556vw 0 0; } } .c-infoBox_lead { line-height: 1.8; font-weight: 500; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_lead { margin: min(12.8vw, 62.4px) 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_lead { margin: 3.3333333333vw 0; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_table { margin-top: min(12.8vw, 62.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_table { margin-top: 3.3333333333vw; } } .c-infoBox_row { display: flex; border-top: 1px solid #d9d9d9; } .c-infoBox_row:last-child { border-bottom: 1px solid #d9d9d9; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_row { flex-direction: column; gap: 0; padding: min(5.3333333333vw, 26px) 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_row { gap: 1.6666666667vw 1.6666666667vw; padding: 1.3888888889vw 0; } } .c-infoBox_label { flex: 0 0 220px; margin: 0; font-weight: bold; line-height: 2; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_label { font-size: min(4.2666666667vw, 20.8px); flex: 0 0 auto; margin-bottom: min(3.2vw, 15.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_label { font-size: clamp(15.2px, 1.1111111111vw, 24px); } } .c-infoBox_value { word-break: break-all; margin: 0; font-weight: 500; line-height: 2; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_value { font-size: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_value { font-size: clamp(15.2px, 1.1111111111vw, 24px); } } .c-infoBox_reserve { background-color: #fff; text-align: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_reserve { padding: min(8.5333333333vw, 41.6px) min(6.4vw, 31.2px); margin-top: min(12.8vw, 62.4px); border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_reserve { margin-top: 3.3333333333vw; padding: 2.7777777778vw; border-radius: 0.6944444444vw; } } .c-infoBox_reserveLabel { font-family: "Special Gothic Condensed One", sans-serif; text-transform: uppercase; color: #ab0033; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_reserveLabel { font-size: min(4.8vw, 23.4px); margin-bottom: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_reserveLabel { font-size: clamp(17.1px, 1.25vw, 27px); margin-bottom: 1.6666666667vw; } } .c-infoBox_reserveTitle { font-weight: 500; line-height: 1.6; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_reserveTitle { line-height: 1.6; font-size: min(4.8vw, 23.4px); margin-bottom: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_reserveTitle { font-size: clamp(20.9px, 1.5277777778vw, 33px); margin-bottom: 1.6666666667vw; } } .c-infoBox_reserveText { line-height: 2; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_reserveText { font-size: min(4.2666666667vw, 20.8px); text-align: left; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_reserveText { font-size: clamp(15.2px, 1.1111111111vw, 24px); } } .c-infoBox_reserveNote { line-height: 2; } .c-infoBox_reserveNote p { margin: 0; } .c-infoBox_reserveNote p + p { margin-top: 1em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_reserveNote { font-size: min(4.2666666667vw, 20.8px); text-align: left; margin-top: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_reserveNote { font-size: clamp(15.2px, 1.1111111111vw, 24px); margin-top: 1.6666666667vw; } } .c-infoBox_reserveBtn { display: inline-flex; align-items: center; justify-content: center; width: -moz-fit-content; width: fit-content; min-width: min(312px, 100%); background-color: #ab0033; color: #fff; font-weight: 500; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; transition: background-color 0.3s ease; } @media (hover: hover) { .c-infoBox_reserveBtn:hover { background-color: #050403; border-color: #050403; color: #fff; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_reserveBtn { height: min(21.3333333333vw, 104px); padding: 0 min(16vw, 78px); border-radius: min(12.2666666667vw, 59.8px); font-size: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_reserveBtn { height: 5.5555555556vw; padding: 0 4.1666666667vw; border-radius: 3.1944444444vw; font-size: clamp(15.2px, 1.1111111111vw, 24px); } } .c-infoBox_reserveBtn:hover { background-color: #050403; } .c-infoBox_reserveBtn::after { content: ""; display: block; width: 12px; aspect-ratio: 1; border-top: 2px solid #fff; border-right: 2px solid #fff; rotate: 45deg; } .c-infoBox_reserveBtn.is-disabled { opacity: 0.3; pointer-events: none; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_reserveBtn { max-width: min(100vw, 487.5px); height: min(18.6666666667vw, 91px); padding: min(2.1333333333vw, 10.4px); gap: min(4.8vw, 23.4px) 1.25vw; margin-top: min(10.6666666667vw, 52px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_reserveBtn { gap: 1.25vw 1.25vw; min-width: 21.6666666667vw; height: 5vw; margin-top: 2.7777777778vw; } } .c-infoBox_reserveBtn-ext::after { display: none; } .c-infoBox_reserveBtnExt { flex: none; fill: currentColor; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-infoBox_reserveBtnExt { width: min(4vw, 19.5px); height: min(4vw, 19.5px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-infoBox_reserveBtnExt { width: 1.0416666667vw; height: 1.0416666667vw; } } .c-toTop { position: fixed; z-index: 50; transform: translateX(calc(100% + 24px)); visibility: hidden; pointer-events: none; transition: transform 0.4s ease, visibility 0.4s; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-toTop { right: min(6.4vw, 31.2px); bottom: 0; } } .c-toTop.is-show { transform: translateX(0); visibility: visible; pointer-events: auto; } .c-toTop.is-hidden { transform: translateX(calc(100% + 24px)); visibility: hidden; pointer-events: none; } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-toTop { right: 1.6666666667vw; bottom: 2.7777777778vw; } } .c-toTop_link { display: flex; flex-direction: column; align-items: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-toTop_link { gap: min(1.0666666667vw, 5.2px); width: min(25.6vw, 124.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-toTop_link { gap: 0.2777777778vw; width: 6.6666666667vw; } } .c-toTop_image { aspect-ratio: 1; overflow: hidden; } .c-toTop_image > img, .c-toTop_image > svg, .c-toTop_image > iframe, .c-toTop_image > video { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-toTop_image { width: min(23.4666666667vw, 114.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-toTop_image { width: 6.1111111111vw; } } .c-toTop_text { color: #050403; font-weight: 700; letter-spacing: 0.08em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-toTop_text { font-size: min(3.7333333333vw, 18.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-toTop_text { font-size: clamp(13.3px, 0.9722222222vw, 21px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-toTop { right: min(4.2666666667vw, 20.8px); bottom: min(8.5333333333vw, 41.6px); transform: translateX(calc(100% + 16px)); } body:has(.c-guideTab_list) .c-toTop { bottom: min(27.7333333333vw, 135.2px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-toTop.is-show { transform: translateX(0); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-toTop.is-hidden { transform: translateX(calc(100% + 16px)); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-toTop_link { width: min(19.2vw, 93.6px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-toTop_image { width: min(25.6vw, 124.8px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-toTop_text { font-size: min(4vw, 19.5px); } } .c-ticket { overflow: hidden; width: 57.2222222222vw; background-color: #f5f5f4; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-ticket { margin: min(6.4vw, 31.2px) auto 0; width: 100%; border-radius: min(4vw, 19.5px); } } .c-ticket .c-infoBox_reserve { margin-top: 0; background-color: transparent; } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-ticket { margin: 6.6666666667vw auto 0; border-radius: 1.0416666667vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-ticket_img { overflow: hidden; aspect-ratio: 3/2; } } .c-ticket_img img { display: block; width: 100%; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-ticket_img img { height: 100%; -o-object-fit: cover; object-fit: cover; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-ticket_img img { height: auto; } } .c-circleArrow { position: relative; top: 0; left: 0; flex-shrink: 0; background-color: #f2f2f2; border-radius: 50%; cursor: pointer; z-index: 11; transition: background-color 0.3s ease; } .c-circleArrow::after { content: ""; display: block; position: absolute; border-top: 1.5px solid #050403; border-right: 1.5px solid #050403; rotate: 45deg; transition: border-color 0.3s ease; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-circleArrow::after { top: min(2.1333333333vw, 10.4px); left: min(2.1333333333vw, 10.4px); width: min(1.8666666667vw, 9.1px); height: min(1.8666666667vw, 9.1px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-circleArrow::after { top: clamp(7.6px, 0.5555555556vw, 12px); left: clamp(7.6px, 0.5555555556vw, 12px); width: clamp(6.65px, 0.4861111111vw, 10.5px); height: clamp(6.65px, 0.4861111111vw, 10.5px); } } .c-circleArrow.swiper-button-disabled { opacity: 0.3; cursor: default; } .c-circleArrow.swiper-button-lock { display: none; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-circleArrow { width: min(6.4vw, 31.2px); height: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-circleArrow { width: clamp(22.8px, 1.6666666667vw, 36px); height: clamp(22.8px, 1.6666666667vw, 36px); } } .c-circleArrow:hover, a:hover > .c-circleArrow, button:hover > .c-circleArrow { background-color: #050403; } .c-circleArrow:hover::after, a:hover > .c-circleArrow::after, button:hover > .c-circleArrow::after { border-color: #fff; } .c-sectionHead { display: flex; flex-direction: column; text-align: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-sectionHead { margin-bottom: min(8.5333333333vw, 41.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-sectionHead { margin-bottom: 3.3333333333vw; } } .c-sectionHead_label { order: 1; font-family: "Special Gothic Condensed One", sans-serif; text-transform: uppercase; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-sectionHead_label { margin-top: min(2.1333333333vw, 10.4px); font-size: min(4vw, 19.5px); margin: min(3.2vw, 15.6px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-sectionHead_label { font-size: clamp(19px, 1.3888888889vw, 30px); margin: 0.8333333333vw 0 0; } } .c-sectionHead_title { margin: 0; font-family: "Zen Old Mincho", serif; font-weight: 400; line-height: 1.4; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-sectionHead_title { font-size: min(7.4666666667vw, 36.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-sectionHead_title { font-size: clamp(34.2px, 2.5vw, 54px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-sectionHead_title { font-size: min(8.5333333333vw, 41.6px); } } .c-sectionHead_char { display: inline-block; } .c-sectionHead.is-inview .c-sectionHead_char { animation: cSectionHeadWave 0.7s ease forwards; } @media (prefers-reduced-motion: reduce) { .c-sectionHead.is-inview .c-sectionHead_char { animation: none; } } @keyframes cSectionHeadWave { 0% { transform: translateY(0); } 50% { transform: translateY(-14px); } 100% { transform: translateY(0); } } .c-pageHead { position: relative; overflow: hidden; background-color: #f5f5f4; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-pageHead { padding: min(58.6666666667vw, 286px) 0 min(8.5333333333vw, 41.6px); aspect-ratio: 750/767; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-pageHead { padding: 16.6666666667vw 0 6.6666666667vw; aspect-ratio: 1348/600; } } .c-col4 { justify-content: flex-start; } .c-sectionHead_label { text-transform: uppercase; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-sectionHead_title { font-size: min(6.6666666667vw, 32.5px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-col4Square_title { font-size: min(4vw, 19.5px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .footer { margin-top: min(19.2vw, 93.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .footer { margin-top: 11.1111111111vw; } } .today_fv { position: absolute; inset: 0; z-index: 0; overflow: hidden; margin: 0; } .today_fv img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-pageHead_title, .c-pageHead_en { position: relative; z-index: 1; color: #fff; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayHero { margin-top: min(8.5333333333vw, 41.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayHero { margin-top: 3.1944444444vw; } } .todayHero_inner { margin: 0 auto; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayHero_inner { width: auto; max-width: calc(100% - 48px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayHero_inner { width: calc(100% - 6.6666666667vw * 2); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayHero_inner { padding-top: min(6.4vw, 31.2px); } } .todayDate { display: flex; align-items: center; justify-content: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayDate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: center; -moz-column-gap: min(3.2vw, 15.6px); column-gap: min(3.2vw, 15.6px); row-gap: min(1.0666666667vw, 5.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayDate { gap: 5.2777777778vw 5.2777777778vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayDate_arrow { grid-row: 1/span 3; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayDate_arrow-next { grid-column: 3; } } .todayDate_arrow-prev { rotate: 180deg; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayDate_side { display: flex; align-items: baseline; gap: min(2.1333333333vw, 10.4px); text-align: center; grid-column: 2; grid-row: 1; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayDate_side { width: 12.5vw; text-align: right; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayDate_side-right { display: flex; align-items: baseline; gap: min(2.1333333333vw, 10.4px); text-align: center; grid-column: 2; grid-row: 3; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayDate_side-right { width: 12.5vw; text-align: left; } } .todayDate_year { margin: 0; font-family: "Special Gothic Condensed One", sans-serif; letter-spacing: 0; line-height: 1.56; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayDate_year { font-size: min(4.8vw, 23.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayDate_year { font-size: clamp(20.9px, 1.5277777778vw, 33px); } } .todayDate_en { font-family: "Special Gothic Condensed One", sans-serif; letter-spacing: 0; line-height: 1.56; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayDate_en { margin: 0; font-size: min(4.8vw, 23.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayDate_en { font-size: clamp(23.75px, 1.7361111111vw, 37.5px); } } .todayDate_jp { font-weight: bold; letter-spacing: 0.04em; line-height: 1.56; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayDate_jp { margin: 0; font-size: min(3.7333333333vw, 18.2px); text-align: center; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayDate_jp { margin: 0 0 0.4861111111vw; font-size: clamp(15.2px, 1.1111111111vw, 24px); text-align: left; } } .todayDate_big { margin: 0; font-family: "Zen Old Mincho", serif; font-weight: 400; line-height: 1; text-align: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayDate_big { font-size: min(19.2vw, 93.6px); grid-column: 2; grid-row: 2; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayDate_big { font-size: clamp(95px, 6.9444444444vw, 150px); } } .todayDate_full { color: #838383; text-align: center; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayDate_full { margin: min(6.4vw, 31.2px) 0 0; padding: min(4.2666666667vw, 20.8px) 0; font-size: min(3.7333333333vw, 18.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayDate_full { padding: 1.6666666667vw 0; margin: 3.1944444444vw 0 0; font-size: clamp(15.2px, 1.1111111111vw, 24px); } } .todayStatus { display: flex; align-items: center; justify-content: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayStatus { flex-direction: column; gap: min(6.4vw, 31.2px); margin-top: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayStatus { gap: 9.0277777778vw 9.0277777778vw; margin-top: 3.3333333333vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayHours { width: 100%; border-bottom: 1px solid #d9d9d9; padding-bottom: min(6.4vw, 31.2px); } } .todayHours_row { display: flex; align-items: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayHours_row { max-width: min(87.4666666667vw, 426.4px); margin: 0 auto; justify-content: space-between; gap: min(8.5333333333vw, 41.6px) 2.2222222222vw; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayHours_row { gap: 2.2222222222vw 2.2222222222vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayHours_row + .todayHours_row { margin-top: min(2.1333333333vw, 10.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayHours_row + .todayHours_row { margin-top: 0.5555555556vw; } } .todayHours_label { display: flex; align-items: normal; font-weight: 500; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayHours_label { font-size: min(5.8666666667vw, 28.6px); gap: 1.833333vw; margin-top: min(1.0666666667vw, 5.2px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayHours_label small { font-size: min(4.8vw, 23.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayHours_label small { font-size: clamp(17.1px, 1.25vw, 27px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayHours_label { font-size: clamp(20.9px, 1.5277777778vw, 33px); gap: 0.8333333333vw 0.8333333333vw; margin-top: 0.2777777778vw; } } .todayHours_time { font-family: "Special Gothic Condensed One", sans-serif; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayHours_time { font-size: min(7.4666666667vw, 36.4px); min-width: min(34.9333333333vw, 170.3px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayHours_time small { font-size: min(5.8666666667vw, 28.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayHours_time small { font-size: clamp(20.9px, 1.5277777778vw, 33px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayHours_time { font-size: clamp(26.6px, 1.9444444444vw, 42px); } } .todayHours_labelIcon { aspect-ratio: 1.0014662757; overflow: hidden; display: flex; justify-content: center; align-items: center; } .todayHours_labelIcon > img, .todayHours_labelIcon > svg, .todayHours_labelIcon > iframe, .todayHours_labelIcon > video { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayHours_labelIcon { width: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayHours_labelIcon { width: clamp(25.954px, 1.8972222222vw, 40.98px); } } .todayWeather { display: flex; align-items: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayWeather { margin-bottom: min(17.0666666667vw, 83.2px); } } .todayWeather_state { display: flex; align-items: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayWeather_state { gap: min(2.1333333333vw, 10.4px) 0.5555555556vw; margin-left: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayWeather_state { gap: 0.5555555556vw 0.5555555556vw; margin-left: 1.6666666667vw; } } .todayWeather_stateIcon { aspect-ratio: 1; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 2.7777777778vw; } .todayWeather_stateIcon > img, .todayWeather_stateIcon > svg, .todayWeather_stateIcon > iframe, .todayWeather_stateIcon > video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayWeather_stateIcon { width: min(8vw, 39px); } } .todayWeather_stateText { letter-spacing: 0.04em; margin-bottom: 3px; } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayWeather_stateText { font-size: clamp(20.9px, 1.5277777778vw, 33px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayWeather_stateText { font-size: min(4.2666666667vw, 20.8px); } } .todayWeather_temp { display: flex; justify-content: center; align-items: center; font-family: "Special Gothic Condensed One", sans-serif; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayWeather_temp { margin-left: min(6.4vw, 31.2px); font-size: min(6.9333333333vw, 33.8px); gap: min(4.2666666667vw, 20.8px) 1.1111111111vw; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayWeather_temp { font-size: clamp(28.5px, 2.0833333333vw, 45px); gap: 1.1111111111vw 1.1111111111vw; margin-left: 2.7777777778vw; } } .todayWeather_high { color: #e87777; } .todayWeather_low { color: #6ea8d6; } .todayWeather_loc { background-color: #f5f5f4; margin: 0; font-weight: 500; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayWeather_loc { padding: min(1.3333333333vw, 6.5px) min(3.7333333333vw, 18.2px); font-size: min(3.7333333333vw, 18.2px); border-radius: min(4.8vw, 23.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayWeather_loc { font-size: clamp(15.2px, 1.1111111111vw, 24px); padding: 0.4166666667vw 1.1111111111vw; border-radius: 1.25vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayFacilities { margin-top: min(19.2vw, 93.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayFacilities { margin-top: 11.1111111111vw; } } .todayFacilities_inner { margin: 0 auto; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayFacilities_inner { width: auto; max-width: calc(100% - 48px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayFacilities_inner { width: calc(100% - 6.6666666667vw * 2); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayCat + .todayCat { margin-top: min(14.9333333333vw, 72.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayCat + .todayCat { margin-top: 6.6666666667vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopicsSection { margin-top: min(19.2vw, 93.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayTopicsSection { margin-top: 6.6666666667vw; } } .todayTopicsSection .todayTopics { margin-top: 0; } .todayCat_head { display: flex; align-items: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayCat_head { gap: min(3.2vw, 15.6px); margin-bottom: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayCat_head { gap: 1.1111111111vw 1.1111111111vw; margin-bottom: 3.3333333333vw; } } .todayCat_icon { height: auto; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayCat_icon { width: min(17.0666666667vw, 83.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayCat_icon { width: 7.3611111111vw; } } .todayCat_name { margin: 0; font-weight: 500; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayCat_name { font-size: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayCat_name { font-size: clamp(34.2px, 2.5vw, 54px); } } .todayFacility_status { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background-color: rgba(245, 245, 244, 0.76); } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayFacility_status { border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayFacility_status { border-radius: 0.6944444444vw; } } .todayFacility_statusLabel { display: inline-flex; align-items: center; background-color: #fff; color: #050403; font-weight: 500; letter-spacing: 0.04em; text-align: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayFacility_statusLabel { height: min(7.4666666667vw, 36.4px); padding: 0 min(3.2vw, 15.6px); font-size: min(3.2vw, 15.6px); border-radius: min(4.8vw, 23.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayFacility_statusLabel { height: 2.2222222222vw; padding: 0 0.9722222222vw; font-size: clamp(13.3px, 0.9722222222vw, 21px); border-radius: 1.25vw; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-col4Square_card.is-closed:hover .c-col4Square_thumb > img { transform: none; } } .c-col4Square_card.is-closed .c-col4Square_title { color: #838383; } .todayFacility_hours { display: inline-flex; align-items: center; background-color: #f5f5f4; font-family: "Special Gothic Condensed One", sans-serif; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayFacility_hours { height: min(8.5333333333vw, 41.6px); font-size: min(3.7333333333vw, 18.2px); gap: min(2.1333333333vw, 10.4px) min(1.6vw, 7.8px); margin-top: min(2.1333333333vw, 10.4px); padding: 0 min(4.2666666667vw, 20.8px); border-radius: min(4.8vw, 23.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayFacility_hours { height: 2.5694444444vw; font-size: clamp(17.1px, 1.25vw, 27px); gap: 0.5555555556vw 0.5555555556vw; margin-top: 0.5555555556vw; padding: 0 1.1111111111vw; border-radius: 1.25vw; } } .todayFacility_hoursIcon { aspect-ratio: 1.0015416238; overflow: hidden; display: flex; justify-content: center; align-items: center; } .todayFacility_hoursIcon > img, .todayFacility_hoursIcon > svg, .todayFacility_hoursIcon > iframe, .todayFacility_hoursIcon > video { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayFacility_hoursIcon { width: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayFacility_hoursIcon { width: clamp(18.5155px, 1.3534722222vw, 29.235px); } } .todayCat_action { text-align: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayCat_action { margin-top: min(8.5333333333vw, 41.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayCat_action { margin-top: 3.3333333333vw; } } .todayCat_btn { display: inline-flex; align-items: center; justify-content: center; width: -moz-fit-content; width: fit-content; min-width: min(312px, 100%); background-color: transparent; color: #fff; font-weight: 500; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } @media (hover: hover) { .todayCat_btn:hover { background-color: #050403; border-color: #050403; color: #fff; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayCat_btn { height: min(21.3333333333vw, 104px); padding: 0 min(16vw, 78px); border-radius: min(12.2666666667vw, 59.8px); font-size: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayCat_btn { height: 5.5555555556vw; padding: 0 4.1666666667vw; border-radius: 3.1944444444vw; font-size: clamp(15.2px, 1.1111111111vw, 24px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayCat_btn { min-width: 0; width: 100%; padding: 0 min(6.4vw, 31.2px); gap: min(4.8vw, 23.4px) 1.25vw; } } .todayCat_btn::after { content: ""; display: block; width: 12px; aspect-ratio: 1; border-top: 2px solid #fff; border-right: 2px solid #fff; rotate: 45deg; } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayCat_btn { gap: 1.25vw 1.25vw; } } .todayTopics { background-color: #f5f5f4; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics { margin-top: min(14.9333333333vw, 72.8px); padding: min(8.5333333333vw, 41.6px) 24px; border-radius: min(5.3333333333vw, 26px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayTopics { margin-top: 6.6666666667vw; padding: 3.3333333333vw; border-radius: 1.3888888889vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics .c-sectionHead { margin-bottom: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayTopics .c-sectionHead { margin-bottom: 2.2222222222vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics .c-sectionHead_title { font-size: min(5.8666666667vw, 28.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayTopics .c-sectionHead_title { font-size: clamp(26.6px, 1.9444444444vw, 42px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics .c-sectionHead_label { font-size: min(3.4666666667vw, 16.9px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayTopics .c-sectionHead_label { font-size: clamp(15.2px, 1.1111111111vw, 24px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_list { margin-right: -24px; margin-left: -24px; display: flex; flex-flow: row nowrap; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 38px; scrollbar-width: none; } .todayTopics_list::-webkit-scrollbar { display: none; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayTopics_list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.3333333333vw 2.2222222222vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_item { flex: 0 0 auto; width: calc(100% - 38px - 40px); scroll-snap-align: start; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_item:first-child { margin-left: 24px; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_item:last-child { margin-right: 40px; } } .todayTopics_pager { display: none; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_pager { display: flex; align-items: center; justify-content: center; gap: min(2.1333333333vw, 10.4px); margin-top: min(6.4vw, 31.2px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_dot { width: min(2.1333333333vw, 10.4px); height: min(2.1333333333vw, 10.4px); padding: 0; background: #d9d9d9; border: 0; border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; } .todayTopics_dot.is-active { background: #050403; transform: scale(1.4); } } .todayTopics_thumb { display: block; aspect-ratio: 1.5027027027; overflow: hidden; background-color: #838383; } .todayTopics_thumb > img, .todayTopics_thumb > svg, .todayTopics_thumb > iframe, .todayTopics_thumb > video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_thumb { border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayTopics_thumb { border-radius: 0.6944444444vw; } } .todayTopics_places { display: flex; flex-wrap: wrap; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_places { gap: min(1.6vw, 7.8px) min(2.1333333333vw, 10.4px); margin-top: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayTopics_places { gap: 0.4166666667vw 0.5555555556vw; margin-top: 1.1111111111vw; } } .todayTopics_place { display: inline-flex; align-items: center; background-color: #d9d9d9; color: #050403; font-weight: 500; letter-spacing: 0.04em; line-height: 1.4; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_place { padding: min(1.3333333333vw, 6.5px) min(2.6666666667vw, 13px); font-size: min(2.9333333333vw, 14.3px); border-radius: min(1.3333333333vw, 6.5px); } } .todayTopics_place a { color: inherit; text-decoration: none; } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayTopics_place { font-size: clamp(11.4px, 0.8333333333vw, 18px); padding: 0.4166666667vw 0.8333333333vw; border-radius: 0.3472222222vw; } } .todayTopics_title { font-weight: 500; line-height: 1.6; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_title { font-size: min(4.8vw, 23.4px); margin: min(4.2666666667vw, 20.8px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayTopics_title { font-size: clamp(17.1px, 1.25vw, 27px); margin: 1.1111111111vw 0 0; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_title { font-size: min(4.2666666667vw, 20.8px); margin-top: min(3.2vw, 15.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayTopics_title { margin-top: 0.8333333333vw; } } .todayTopics_text { color: #838383; line-height: 2; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_text { font-size: min(4.2666666667vw, 20.8px); margin: min(2.1333333333vw, 10.4px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayTopics_text { font-size: clamp(15.2px, 1.1111111111vw, 24px); margin: 0.5555555556vw 0 0; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayTopics_text { font-size: min(3.7333333333vw, 18.2px); line-height: 1.8; } } .todaySection_action { text-align: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todaySection_action { margin-top: min(8.5333333333vw, 41.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todaySection_action { margin-top: 3.3333333333vw; } } .todayListBtn { display: inline-flex; align-items: center; justify-content: center; width: -moz-fit-content; width: fit-content; min-width: min(312px, 100%); background-color: #272727; color: #fff; font-weight: 500; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } @media (hover: hover) { .todayListBtn:hover { background-color: #050403; border-color: #050403; color: #fff; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayListBtn { height: min(21.3333333333vw, 104px); padding: 0 min(16vw, 78px); border-radius: min(12.2666666667vw, 59.8px); font-size: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayListBtn { height: 5.5555555556vw; padding: 0 4.1666666667vw; border-radius: 3.1944444444vw; font-size: clamp(15.2px, 1.1111111111vw, 24px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayListBtn { max-width: min(100vw, 487.5px); width: 100%; padding: 0 min(6.4vw, 31.2px); gap: min(4.8vw, 23.4px) 1.25vw; height: min(19.2vw, 93.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayListBtn { min-width: 21.6666666667vw; gap: 1.25vw 1.25vw; height: 5vw; } } .todayListBtn::after { content: ""; display: block; width: 12px; aspect-ratio: 1; border-top: 2px solid #fff; border-right: 2px solid #fff; rotate: 45deg; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus { margin-top: min(19.2vw, 93.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus { margin-top: 6.6666666667vw; } } .todayBus_inner { margin: 0 auto; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_inner { width: auto; max-width: calc(100% - 48px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_inner { width: calc(100% - 6.6666666667vw * 2); } } .todayBus_head { display: flex; align-items: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_head { flex-wrap: wrap; gap: min(3.2vw, 15.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_head { gap: 1.1111111111vw 1.1111111111vw; } } .todayBus_icon { height: auto; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_icon { width: min(17.0666666667vw, 83.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_icon { width: 7.3611111111vw; } } .todayBus_title { margin: 0; font-weight: 500; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_title { font-size: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_title { font-size: clamp(34.2px, 2.5vw, 54px); } } .todayBus_status { display: inline-flex; align-items: center; background-color: #ab0033; color: #fff; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_status { font-size: min(4.2666666667vw, 20.8px); gap: min(2.1333333333vw, 10.4px) 0.5555555556vw; height: min(9.8666666667vw, 48.1px); padding: 0 min(4.2666666667vw, 20.8px); border-radius: min(4.8vw, 23.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_status { font-size: clamp(15.2px, 1.1111111111vw, 24px); gap: 0.5555555556vw 0.5555555556vw; height: 2.5694444444vw; padding: 0 1.1111111111vw; border-radius: 1.25vw; } } .todayBus_statusIcon { aspect-ratio: 1.0015416238; overflow: hidden; display: flex; justify-content: center; align-items: center; } .todayBus_statusIcon > img, .todayBus_statusIcon > svg, .todayBus_statusIcon > iframe, .todayBus_statusIcon > video { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_statusIcon { width: min(5.1973333333vw, 25.337px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_statusIcon { width: clamp(18.5155px, 1.3534722222vw, 29.235px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_body { display: block; margin-top: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3.3333333333vw 3.3333333333vw; margin-top: 2.2222222222vw; } } .todayBus_text { grid-column: 1/2; grid-row: 1/2; } .todayBus_lead { margin: 0; line-height: 2; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_lead { font-size: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_lead { font-size: clamp(15.2px, 1.1111111111vw, 24px); } } .todayBus_note { color: #838383; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_note { font-size: min(3.2vw, 15.6px); margin-left: min(2.1333333333vw, 10.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_note { font-size: clamp(11.4px, 0.8333333333vw, 18px); margin-left: 0.5555555556vw; } } .todayBus_desc { line-height: 2; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_desc { font-size: min(4.2666666667vw, 20.8px); margin: min(2.1333333333vw, 10.4px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_desc { font-size: clamp(15.2px, 1.1111111111vw, 24px); margin: 0.5555555556vw 0 0; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_info { margin-top: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_info { margin-top: 3.0555555556vw; } } .todayBus_infoRow { display: flex; border-top: 1px solid #d9d9d9; } .todayBus_infoRow:last-child { border-bottom: 1px solid #d9d9d9; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_infoRow { gap: min(6.4vw, 31.2px) 1.6666666667vw; padding: min(5.8666666667vw, 28.6px) 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_infoRow { gap: 1.6666666667vw 1.6666666667vw; padding: 1.5277777778vw 0; } } .todayBus_infoLabel { margin: 0; line-height: 2; font-weight: 500; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_infoLabel { font-size: min(4.2666666667vw, 20.8px); flex-basis: min(26.6666666667vw, 130px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_infoLabel { font-size: clamp(15.2px, 1.1111111111vw, 24px); flex: 0 0 140px; } } .todayBus_infoValue { margin: 0; line-height: 2; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_infoValue { font-size: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_infoValue { font-size: clamp(15.2px, 1.1111111111vw, 24px); } } .todayBus_btn { grid-column: 1/-1; grid-row: 2/3; display: inline-flex; align-items: center; justify-content: center; width: -moz-fit-content; width: fit-content; min-width: min(312px, 100%); background-color: #272727; color: #fff; font-weight: 500; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } @media (hover: hover) { .todayBus_btn:hover { background-color: #050403; border-color: #050403; color: #fff; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_btn { height: min(21.3333333333vw, 104px); padding: 0 min(16vw, 78px); border-radius: min(12.2666666667vw, 59.8px); font-size: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_btn { height: 5.5555555556vw; padding: 0 4.1666666667vw; border-radius: 3.1944444444vw; font-size: clamp(15.2px, 1.1111111111vw, 24px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_btn { display: flex; max-width: min(100vw, 487.5px); width: 100%; margin: min(6.4vw, 31.2px) auto 0; gap: min(4.8vw, 23.4px) 1.25vw; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_btn { margin: auto; gap: 1.25vw 1.25vw; } } .todayBus_btn::after { content: ""; display: block; width: 12px; aspect-ratio: 1; border-top: 2px solid #fff; border-right: 2px solid #fff; rotate: 45deg; } .todayBus_img { grid-column: 2/3; grid-row: 1/2; aspect-ratio: 1.3351060883; overflow: hidden; overflow: hidden; height: auto; } .todayBus_img > img, .todayBus_img > svg, .todayBus_img > iframe, .todayBus_img > video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayBus_img { width: 100%; margin-top: min(6.4vw, 31.2px); border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayBus_img { width: 33.4722222222vw; border-radius: clamp(9.5px, 0.6944444444vw, 15px); } } .todayBus_img img { width: 100%; height: auto; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .todayEvent, .todayBloom { margin-top: min(19.2vw, 93.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .todayEvent, .todayBloom { margin-top: 11.1111111111vw; } }