@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-)を再利用 =================================================================*/ .article_gallery { width: 100vw; margin-left: calc(50% - 50vw); } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .article_gallery { margin-top: min(25.6vw, 124.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .article_gallery { margin-top: 6.6666666667vw; } } .article_gallery_item { overflow: hidden; width: 57.2222222222vw; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .article_gallery_item { width: 80vw; max-width: 80vw; } } .article_gallery_item img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; -o-object-fit: cover; object-fit: cover; } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .article_gallery_item img { width: calc(100% - 48px); max-width: calc(100% - 48px); margin: 0 clamp(22.8px, 1.6666666667vw, 36px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .article_gallery_item { max-width: 57.2222222222vw; } } .article_gallery_caption { color: #838383; line-height: 1.8; text-align: left; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .article_gallery_caption { width: 100%; max-width: 100%; margin: min(3.2vw, 15.6px) 0 0; font-size: min(2.9333333333vw, 14.3px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .article_gallery_caption { font-size: clamp(11.4px, 0.8333333333vw, 18px); width: calc(100% - 48px); max-width: calc(100% - 48px); margin: 0.8333333333vw 1.6666666667vw 0; } } .article_galleryCtrl { 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) { .article_galleryCtrl { gap: min(6.4vw, 31.2px); margin-top: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .article_galleryCtrl { gap: 1.6666666667vw 1.6666666667vw; margin-top: 1.1111111111vw; } } .article_galleryArrow { aspect-ratio: 1; position: absolute; background-color: #f2f2f2; border-radius: 50%; cursor: pointer; z-index: 11; position: relative; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .article_galleryArrow { width: min(10.6666666667vw, 52px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .article_galleryArrow { width: 2.7777777778vw; } } .article_galleryArrow::after { content: ""; display: block; width: 11px; aspect-ratio: 1; border-top: 1.5px solid #050403; border-right: 1.5px solid #050403; rotate: 45deg; position: absolute; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .article_galleryArrow::after { top: min(3.7333333333vw, 18.2px); left: min(3.4666666667vw, 16.9px); width: min(2.9333333333vw, 14.3px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .article_galleryArrow::after { top: 0.9722222222vw; left: 0.9027777778vw; width: 0.7638888889vw; } } .article_galleryArrow.swiper-button-disabled { opacity: 0.3; cursor: default; } .article_galleryArrow.swiper-button-lock { display: none; } .article_galleryArrow-prev { rotate: 180deg; } .article_galleryPager { display: flex; align-items: center; } .article_galleryPager .swiper-pagination-bullet { margin: 0; border-radius: 50%; background-color: #e5e5e5; opacity: 1; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .article_galleryPager .swiper-pagination-bullet { width: min(2.1333333333vw, 10.4px); height: min(2.1333333333vw, 10.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .article_galleryPager .swiper-pagination-bullet { width: 0.5555555556vw; height: 0.5555555556vw; } } .article_galleryPager .swiper-pagination-bullet-active { background-color: #050403; transform: scale(1.4); } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .article_galleryPager { gap: min(2.1333333333vw, 10.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .article_galleryPager { gap: 0.5555555556vw; } } .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); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide { margin-top: min(42.6666666667vw, 208px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide { margin-top: 11.1111111111vw; } } .c-farmGuide_inner { position: relative; margin: 0 auto; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_inner { width: auto; max-width: calc(100% - 48px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_inner { width: calc(100% - 6.6666666667vw * 2); } } .c-farmGuide_head { text-align: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_head { margin-bottom: min(12.8vw, 62.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_head { margin-bottom: 3.3333333333vw; } } .c-farmGuide_headTitle { margin: 0; font-family: "Zen Old Mincho", serif; line-height: 1.4; font-weight: 400; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_headTitle { font-size: min(12.8vw, 62.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_headTitle { font-size: clamp(45.6px, 3.3333333333vw, 72px); } } .c-farmGuide_headSub { color: var(--fg-accent, var(--slider-accent, #ab0033)); font-family: "Zen Old Mincho", serif; font-weight: 700; line-height: 1.6; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_headSub { font-size: min(5.8666666667vw, 28.6px); margin: min(2.1333333333vw, 10.4px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_headSub { font-size: clamp(20.9px, 1.5277777778vw, 33px); margin: 0.5555555556vw 0 0; } } .c-farmGuide_slider { position: static; } .c-farmGuide_sliderList { align-items: flex-start; } .c-farmGuide_cardLink { display: block; color: inherit; text-decoration: none; } .c-farmGuide_cardImg { aspect-ratio: 1; overflow: hidden; } .c-farmGuide_cardImg > img, .c-farmGuide_cardImg > svg, .c-farmGuide_cardImg > iframe, .c-farmGuide_cardImg > 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-farmGuide_cardImg { border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_cardImg { border-radius: clamp(9.5px, 0.6944444444vw, 15px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_cardBody { margin-top: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_cardBody { margin-top: 1.6666666667vw; } } .c-farmGuide_cardMeta { display: flex; align-items: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_cardMeta { gap: min(4.2666666667vw, 20.8px) 1.1111111111vw; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_cardMeta { gap: 1.1111111111vw 1.1111111111vw; } } .c-farmGuide_cardLabel { margin: 0; font-family: "Zen Old Mincho", serif; line-height: 1.6; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_cardLabel { font-size: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_cardLabel { font-size: clamp(15.2px, 1.1111111111vw, 24px); } } .c-farmGuide_cardTitle { 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-farmGuide_cardTitle { font-size: min(5.8666666667vw, 28.6px); margin: min(2.6666666667vw, 13px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_cardTitle { font-size: clamp(20.9px, 1.5277777778vw, 33px); margin: 0.6944444444vw 0 0; } } .c-farmGuide_sliderArrow { aspect-ratio: 1; position: absolute; background-color: #f2f2f2; border-radius: 50%; cursor: pointer; z-index: 11; top: 42%; transition: background-color 0.3s ease; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_sliderArrow { width: min(10.6666666667vw, 52px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_sliderArrow { width: 2.7777777778vw; } } .c-farmGuide_sliderArrow::after { content: ""; display: block; width: 11px; aspect-ratio: 1; border-top: 1.5px solid #050403; border-right: 1.5px solid #050403; rotate: 45deg; position: absolute; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_sliderArrow::after { top: min(3.7333333333vw, 18.2px); left: min(3.4666666667vw, 16.9px); width: min(2.9333333333vw, 14.3px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_sliderArrow::after { top: 0.9722222222vw; left: 0.9027777778vw; width: 0.7638888889vw; } } .c-farmGuide_sliderArrow.swiper-button-disabled { opacity: 0.3; cursor: default; } .c-farmGuide_sliderArrow.swiper-button-lock { display: none; } .c-farmGuide_sliderArrow::after { transition: border-color 0.3s ease; } .c-farmGuide_sliderArrow:hover { background-color: var(--fg-accent, var(--slider-accent, #ab0033)); } .c-farmGuide_sliderArrow:hover::after { border-color: #fff; } .c-farmGuide_sliderArrow-prev { left: -4.4444444444vw; rotate: 180deg; } .c-farmGuide_sliderArrow-next { right: -4.4444444444vw; } .c-farmGuide_pager { justify-content: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_pager { margin-top: min(17.0666666667vw, 83.2px); padding-bottom: min(3.2vw, 15.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_pager { margin-top: 4.4444444444vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide { overflow-x: clip; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide { margin-top: min(21.3333333333vw, 104px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_head { margin-bottom: 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-farmGuide_cardMeta { gap: 3.111111vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_headTitle { font-size: min(10.4vw, 50.7px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_headSub { font-size: min(4.8vw, 23.4px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_cardLabel { font-size: 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-farmGuide_cardTitle { font-size: min(4.8vw, 23.4px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_pager { justify-content: flex-start; margin-top: 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-farmGuide_sliderArrow { display: block; position: absolute; top: auto; bottom: 0; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_sliderArrow-prev { left: auto; right: min(14.4vw, 70.2px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_sliderArrow-next { left: auto; right: 0; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_inner { width: 100%; max-width: calc(100vw - 48px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-farmGuide_slider { width: 100vw; margin-left: calc(50% - 50vw); } .c-farmGuide_slider .swiper { padding: 0 min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_cardImg > img { transition: transform 0.6s ease; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-farmGuide_cardLink:hover .c-farmGuide_cardImg > img { transform: scale(1.05); } } .c-shareBtns { display: flex; align-items: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-shareBtns { gap: min(3.2vw, 15.6px); margin-top: min(5.3333333333vw, 26px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-shareBtns { gap: 1.1111111111vw 1.1111111111vw; margin-top: 1.6666666667vw; } } .c-shareBtns_label { margin: 0; color: #838383; font-family: "Special Gothic Condensed One", sans-serif; letter-spacing: 0.06em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-shareBtns_label { font-size: min(3.7333333333vw, 18.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-shareBtns_label { font-size: clamp(13.3px, 0.9722222222vw, 21px); } } .c-shareBtns_list { display: flex; align-items: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-shareBtns_list { gap: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-shareBtns_list { gap: 0.8333333333vw; } } .c-shareBtns_item { position: relative; } .c-shareBtns_link { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background-color: #f2f2f2; border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-shareBtns_link { width: min(9.6vw, 46.8px); } } .c-shareBtns_link:hover { background-color: #d9d9d9; } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-shareBtns_link { width: 2.7777777778vw; } } .c-shareBtns_icon { fill: #050403; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-shareBtns_icon { width: min(4.2666666667vw, 20.8px); height: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-shareBtns_icon { width: clamp(17.1px, 1.25vw, 27px); height: clamp(17.1px, 1.25vw, 27px); } } .c-shareBtns_toast { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; background-color: #050403; color: #fff; line-height: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-shareBtns_toast { font-size: min(2.9333333333vw, 14.3px); padding: min(1.6vw, 7.8px) min(2.6666666667vw, 13px); border-radius: min(1.0666666667vw, 5.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-shareBtns_toast { font-size: clamp(10.45px, 0.7638888889vw, 16.5px); padding: 0.4166666667vw 0.6944444444vw; border-radius: 0.2777777778vw; } } .c-shareBtns_item.is-copied .c-shareBtns_toast { opacity: 1; visibility: visible; } .c-sliderDots { display: flex; align-items: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-sliderDots { gap: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-sliderDots { gap: 0.6944444444vw; } } .c-sliderDots.is-lock { display: none; } .c-sliderDots_dot { aspect-ratio: 1; padding: 0; background-color: #e5e5e5; border: 0; border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; } .c-sliderDots_dot.is-active { background-color: var(--cat-accent, var(--fg-accent, var(--slider-accent, #ab0033))); transform: scale(1.4); } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-sliderDots_dot { width: min(2.1333333333vw, 10.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .c-sliderDots_dot { width: 0.5555555556vw; } } .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; } } .guide_band { position: relative; background-size: 125px 125px; background-repeat: repeat; background-position: center; } [data-theme=shop] .guide_band { background-image: url("../images/common/textures/texture_brown.png"); } [data-theme=garden] .guide_band { background-image: url("../images/common/textures/texture_green.png"); } [data-theme=animals] .guide_band { background-image: url("../images/common/textures/texture_orange.png"); } [data-theme=experience] .guide_band { background-image: url("../images/common/textures/texture_blue.png"); } [data-theme=howto] .guide_band { background-image: url("../images/common/textures/texture_green.png"); } [data-theme=eat] .guide_band { background-image: url("../images/common/textures/texture_red.png"); } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_band { padding: min(34.6666666667vw, 169px) 0 min(16vw, 78px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_band { padding: 12.2222222222vw 0 6.25vw; } } .guide_band::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; aspect-ratio: 1440/48; background-image: url(../images/common/decorations/frame_wave_bottom.svg); background-size: 100% 100%; background-repeat: no-repeat; z-index: 2; pointer-events: none; } .guide_band_inner { display: flex; align-items: baseline; justify-content: space-between; width: 1248px; margin: 0 auto; color: #fff; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_band_inner { max-width: calc(100% - 48px); gap: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_band_inner { width: 86.6666666667vw; max-width: calc(100% - 64px); gap: 1.6666666667vw; } } .guide_band_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) { .guide_band_title { font-size: min(6.9333333333vw, 33.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_band_title { font-size: clamp(34.2px, 2.5vw, 54px); } } .guide_band_en { margin: 0; font-family: "Zen Old Mincho", serif; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_band_en { font-size: min(3.7333333333vw, 18.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_band_en { 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) { .guide { padding: min(12.8vw, 62.4px) 0 min(17.0666666667vw, 83.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide { padding: 4.4444444444vw 0 5.5555555556vw; } } .guide_head { margin: 0 auto; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_head { width: auto; max-width: calc(100% - 48px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_head { 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) { .guide_head { display: flex; flex-direction: column; max-width: calc(100% - 48px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_head { display: grid; grid-template-columns: 1fr auto; gap: 0 6.6666666667vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_headInfo { display: contents; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .c-shareBtns { order: 4; } } .guide_headMv { aspect-ratio: 0.7497089639; overflow: hidden; } .guide_headMv > img, .guide_headMv > svg, .guide_headMv > iframe, .guide_headMv > 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) { .guide_headMv { order: 5; width: 100%; margin-top: min(8.5333333333vw, 41.6px); border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_headMv { width: 44.7222222222vw; border-radius: 0.6944444444vw; } } .guide_num { display: flex; align-items: flex-start; margin: 0; font-family: "Special Gothic Condensed One", sans-serif; line-height: 1; color: #57ac91; } [data-theme=eat] .guide_num { color: #e87777; } [data-theme=shop] .guide_num { color: #c09060; } [data-theme=garden] .guide_num { color: #57ac91; } [data-theme=animals] .guide_num { color: #f88c6b; } [data-theme=experience] .guide_num, [data-theme=activity] .guide_num, [data-theme=event] .guide_num { color: #6ea8d6; } [data-theme=howto] .guide_num { color: #57ac91; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_num { order: 1; font-size: min(11.7333333333vw, 57.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_num { font-size: clamp(53.2px, 3.8888888889vw, 84px); } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_hash { font-size: min(6.9333333333vw, 33.8px); margin-right: min(2.1333333333vw, 10.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_hash { font-size: clamp(31.35px, 2.2916666667vw, 49.5px); margin-right: 0.5555555556vw; } } .guide_sub { font-family: "Zen Old Mincho", serif; letter-spacing: 0.04em; line-height: 1.6; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_sub { order: 2; font-size: min(4.8vw, 23.4px); margin: min(6.4vw, 31.2px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_sub { font-size: clamp(20.9px, 1.5277777778vw, 33px); margin: 1.6666666667vw 0 0; } } .guide_title { font-weight: 500; line-height: 1.4; letter-spacing: 0.04em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_title { order: 3; font-size: min(6.9333333333vw, 33.8px); margin: min(4.2666666667vw, 20.8px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_title { font-size: clamp(34.2px, 2.5vw, 54px); margin: 1.1111111111vw 0 0; } } .guide_lead { font-weight: 500; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_lead { order: 6; margin: min(8.5333333333vw, 41.6px) 0 0; font-size: min(4vw, 19.5px); line-height: 2; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_lead { margin: 4.4444444444vw 0 0; font-size: clamp(17.1px, 1.25vw, 27px); line-height: 2; } } .guide_contents { 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) { .guide_contents { width: auto; max-width: calc(100% - 48px); margin-top: min(17.0666666667vw, 83.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_contents { width: 57.2222222222vw; margin-top: 8.0555555556vw; } } .guide_toc { background-color: #f5f5f4; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_toc { padding: 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) { .guide_toc { padding: 2.2222222222vw; border-radius: 0.6944444444vw; } } .guide_toc_title { font-family: "Zen Old Mincho", serif; font-weight: 500; letter-spacing: 0.08em; text-align: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_toc_title { font-size: min(4.8vw, 23.4px); margin: 0 0 min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_toc_title { font-size: clamp(17.1px, 1.25vw, 27px); margin: 0 0 1.1111111111vw; } } .guide_toc_list { margin: 0; padding: 0; list-style: none; } .guide_toc_item { border-bottom: 1px solid #d9d9d9; } .guide_toc_link { display: flex; align-items: center; justify-content: space-between; color: #050403; line-height: 1.6; letter-spacing: 0.04em; } .guide_toc_link::after { flex-shrink: 0; content: ""; display: block; width: 8px; aspect-ratio: 1; border-top: 1.5px solid #050403; border-right: 1.5px solid #050403; rotate: 135deg; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_toc_link { font-size: min(4vw, 19.5px); gap: min(3.2vw, 15.6px); padding: min(5.3333333333vw, 26px) 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_toc_link { font-size: clamp(14.25px, 1.0416666667vw, 22.5px); gap: 0.8333333333vw; padding: 1.3888888889vw 0; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_section { margin-top: min(14.9333333333vw, 72.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_section { margin-top: 5.7638888889vw; } } .guide_h2 { border-left: 4px solid; border-left-color: #57ac91; font-weight: 500; line-height: 1.4; letter-spacing: 0.04em; } [data-theme=eat] .guide_h2 { border-left-color: #e87777; } [data-theme=shop] .guide_h2 { border-left-color: #c09060; } [data-theme=garden] .guide_h2 { border-left-color: #57ac91; } [data-theme=animals] .guide_h2 { border-left-color: #f88c6b; } [data-theme=experience] .guide_h2, [data-theme=activity] .guide_h2, [data-theme=event] .guide_h2 { border-left-color: #6ea8d6; } [data-theme=howto] .guide_h2 { border-left-color: #57ac91; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_h2 { margin: 0 0 min(6.4vw, 31.2px); font-size: min(5.8666666667vw, 28.6px); padding-left: min(5.3333333333vw, 26px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_h2 { margin: 0 0 2.2222222222vw; font-size: clamp(26.6px, 1.9444444444vw, 42px); padding-left: 1.3888888889vw; } } .guide_h3 { width: -moz-fit-content; width: fit-content; font-weight: 500; letter-spacing: 0.04em; line-height: 1.6; border-bottom: 2px solid #050403; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_h3 { margin: min(14.9333333333vw, 72.8px) 0 min(8.5333333333vw, 41.6px); font-size: min(4.8vw, 23.4px); padding-bottom: min(1.3333333333vw, 6.5px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_h3 { margin: 5.7638888889vw 0 3.3333333333vw; font-size: clamp(20.9px, 1.5277777778vw, 33px); padding-bottom: 0.3472222222vw; } } .guide_h4 { display: flex; line-height: 2; align-items: flex-start; font-weight: bold; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_h4 { margin-bottom: min(8.5333333333vw, 41.6px); font-size: min(4vw, 19.5px); gap: min(2.1333333333vw, 10.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_h4 { margin-bottom: 3.3333333333vw; font-size: clamp(15.2px, 1.1111111111vw, 24px); gap: 0.5555555556vw; } } .guide_h4::before { content: ""; translate: 0 12px; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; background-color: #050403; border-radius: 2px; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_h4::before { width: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_h4::before { width: 1.1111111111vw; } } .guide_text { margin: 0; font-weight: 500; line-height: 2; letter-spacing: 0.06em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_text { font-size: min(4vw, 19.5px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_text { font-size: clamp(15.2px, 1.1111111111vw, 24px); } } .guide_figure img { width: 100%; } .guide_body-wp p.wp-block-paragraph { font-weight: 500; line-height: 2; letter-spacing: 0.06em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_body-wp p.wp-block-paragraph { font-size: min(4vw, 19.5px); margin: min(6.4vw, 31.2px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_body-wp p.wp-block-paragraph { font-size: clamp(15.2px, 1.1111111111vw, 24px); margin: 1.6666666667vw 0 0; } } .guide_body-wp h2.wp-block-heading { border-left: 4px solid; border-left-color: #57ac91; font-weight: 500; line-height: 1.4; letter-spacing: 0.04em; } [data-theme=eat] .guide_body-wp h2.wp-block-heading { border-left-color: #e87777; } [data-theme=shop] .guide_body-wp h2.wp-block-heading { border-left-color: #c09060; } [data-theme=garden] .guide_body-wp h2.wp-block-heading { border-left-color: #57ac91; } [data-theme=animals] .guide_body-wp h2.wp-block-heading { border-left-color: #f88c6b; } [data-theme=experience] .guide_body-wp h2.wp-block-heading, [data-theme=activity] .guide_body-wp h2.wp-block-heading, [data-theme=event] .guide_body-wp h2.wp-block-heading { border-left-color: #6ea8d6; } [data-theme=howto] .guide_body-wp h2.wp-block-heading { border-left-color: #57ac91; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_body-wp h2.wp-block-heading { margin: min(14.9333333333vw, 72.8px) 0 min(6.4vw, 31.2px); font-size: min(5.8666666667vw, 28.6px); padding-left: min(5.3333333333vw, 26px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_body-wp h2.wp-block-heading { margin: 5.7638888889vw 0 2.2222222222vw; font-size: clamp(26.6px, 1.9444444444vw, 42px); padding-left: 1.3888888889vw; } } .guide_body-wp h3.wp-block-heading { width: -moz-fit-content; width: fit-content; font-weight: 500; letter-spacing: 0.04em; line-height: 1.6; border-bottom: 2px solid #050403; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_body-wp h3.wp-block-heading { margin: min(14.9333333333vw, 72.8px) 0 min(8.5333333333vw, 41.6px); font-size: min(4.8vw, 23.4px); padding-bottom: min(1.3333333333vw, 6.5px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_body-wp h3.wp-block-heading { margin: 5.7638888889vw 0 3.3333333333vw; font-size: clamp(20.9px, 1.5277777778vw, 33px); padding-bottom: 0.3472222222vw; } } .guide_body-wp h4.wp-block-heading { display: flex; line-height: 2; align-items: flex-start; font-weight: bold; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_body-wp h4.wp-block-heading { margin: min(8.5333333333vw, 41.6px) 0; font-size: min(4vw, 19.5px); gap: min(2.1333333333vw, 10.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_body-wp h4.wp-block-heading { margin: 3.3333333333vw 0; font-size: clamp(15.2px, 1.1111111111vw, 24px); gap: 0.5555555556vw; } } .guide_body-wp h4.wp-block-heading::before { content: ""; translate: 0 12px; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; background-color: #050403; border-radius: 2px; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_body-wp h4.wp-block-heading::before { width: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_body-wp h4.wp-block-heading::before { width: 1.1111111111vw; } } .guide_body-wp figure.wp-block-image img { width: 100%; } .guide_body-wp figure.wp-block-image figcaption { color: #838383; line-height: 1.8; text-align: left; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_body-wp figure.wp-block-image figcaption { font-size: min(3.2vw, 15.6px); margin: min(3.2vw, 15.6px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_body-wp figure.wp-block-image figcaption { font-size: clamp(11.4px, 0.8333333333vw, 18px); margin: 0.8333333333vw 0 0; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_body-wp figure.wp-block-image { margin: min(8.5333333333vw, 41.6px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_body-wp figure.wp-block-image { margin: 2.2222222222vw 0 0; } } .guide_body-wp .arkBlockCaption { color: #838383; line-height: 1.8; text-align: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_body-wp .arkBlockCaption { font-size: min(3.2vw, 15.6px); margin: min(3.2vw, 15.6px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_body-wp .arkBlockCaption { font-size: clamp(11.4px, 0.8333333333vw, 18px); margin: 0.8333333333vw 0 0; } } .guide_body-wp figure.wp-block-gallery.has-nested-images { display: flex; flex-wrap: wrap; gap: var(--wp--style--unstable-gallery-gap, 16px); align-items: flex-start; } .guide_body-wp figure.wp-block-gallery.has-nested-images figure.wp-block-image { display: flex; position: relative; flex-direction: column; flex-grow: 1; justify-content: flex-start; width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5); max-width: 100%; margin: 0; } .guide_body-wp figure.wp-block-gallery.has-nested-images figure.wp-block-image img { flex: none; width: 100%; height: auto; } @media screen and (min-width: 600px) { .guide_body-wp figure.wp-block-gallery.has-nested-images figure.wp-block-image { width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.66667); } .guide_body-wp figure.wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(2), .guide_body-wp figure.wp-block-gallery.has-nested-images figure.wp-block-image:first-child:nth-last-child(2) ~ figure.wp-block-image { width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5); } .guide_body-wp figure.wp-block-gallery.has-nested-images figure.wp-block-image:first-child:last-child { width: 100%; } } .guide_body-wp figure.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { content: none; } .guide_body-wp figure.wp-block-gallery.has-nested-images figure.wp-block-image figcaption { position: relative; flex: initial; padding: 0; overflow: visible; background: none; color: #838383; line-height: 1.8; text-align: left; text-shadow: none; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_body-wp figure.wp-block-gallery.has-nested-images figure.wp-block-image figcaption { font-size: min(3.2vw, 15.6px); margin: min(3.2vw, 15.6px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_body-wp figure.wp-block-gallery.has-nested-images figure.wp-block-image figcaption { font-size: clamp(11.4px, 0.8333333333vw, 18px); margin: 0.8333333333vw 0 0; } } .guide_body-wp figure.wp-block-gallery.has-nested-images > figcaption { color: #838383; line-height: 1.8; text-align: left; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_body-wp figure.wp-block-gallery.has-nested-images > figcaption { font-size: min(3.2vw, 15.6px); margin: min(3.2vw, 15.6px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_body-wp figure.wp-block-gallery.has-nested-images > figcaption { font-size: clamp(11.4px, 0.8333333333vw, 18px); margin: 0.8333333333vw 0 0; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_body-wp figure.wp-block-gallery.has-nested-images { margin: min(8.5333333333vw, 41.6px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_body-wp figure.wp-block-gallery.has-nested-images { margin: 2.2222222222vw 0 0; } } .guide_caption { color: #838383; line-height: 1.8; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_caption { font-size: min(3.2vw, 15.6px); margin: min(3.2vw, 15.6px) 0 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_caption { font-size: clamp(11.4px, 0.8333333333vw, 18px); margin: 0.8333333333vw 0 0; } } .guide_gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_gallery { gap: min(3.2vw, 15.6px); margin-top: min(12.8vw, 62.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_gallery { gap: 1.6666666667vw; margin-top: 3.3333333333vw; } } .guide_gallery_item { margin: 0; } .guide_gallery_item img { display: block; width: 100%; height: auto; } .guide_person { border: 1px solid #d9d9d9; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_person { width: 100%; padding: min(6.4vw, 31.2px); margin: min(22.1333333333vw, 107.9px) auto 0; border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_person { width: 32.2222222222vw; padding: 2.2222222222vw; margin: 5.7638888889vw auto 0; border-radius: 0.6944444444vw; } } .guide_person_icon img { width: 100%; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_person_icon { width: min(17.0666666667vw, 83.2px); margin: 0 auto min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_person_icon { width: clamp(60.8px, 4.4444444444vw, 96px); margin: 0 auto clamp(22.8px, 1.6666666667vw, 36px); } } .guide_person_title { font-family: "Zen Old Mincho", serif; font-weight: 500; text-align: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_person_title { 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) { .guide_person_title { font-size: clamp(17.1px, 1.25vw, 27px); margin-bottom: 1.6666666667vw; } } .guide_person_photo { aspect-ratio: 1; overflow: hidden; margin: 0 auto; border-radius: 50%; } .guide_person_photo > img, .guide_person_photo > svg, .guide_person_photo > iframe, .guide_person_photo > 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) { .guide_person_photo { width: min(48vw, 234px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_person_photo { width: 12.5vw; } } .guide_person_name { font-weight: 500; text-align: center; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_person_name { 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) { .guide_person_name { font-size: clamp(15.2px, 1.1111111111vw, 24px); margin-top: 0.8333333333vw; } } .guide_person_bio { font-weight: 400; line-height: 2; letter-spacing: 0.06em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_person_bio { font-size: min(4.2666666667vw, 20.8px); margin-top: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_person_bio { font-size: clamp(15.2px, 1.1111111111vw, 24px); margin-top: 1.6666666667vw; } } .guide_trivia { background-color: #57ac91; color: #fff; } [data-theme=eat] .guide_trivia { background-color: #e87777; } [data-theme=shop] .guide_trivia { background-color: #c09060; } [data-theme=garden] .guide_trivia { background-color: #57ac91; } [data-theme=animals] .guide_trivia { background-color: #f88c6b; } [data-theme=experience] .guide_trivia, [data-theme=activity] .guide_trivia, [data-theme=event] .guide_trivia { background-color: #6ea8d6; } [data-theme=howto] .guide_trivia { background-color: #57ac91; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_trivia { padding: min(6.4vw, 31.2px); margin: min(12.8vw, 62.4px) 0; border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_trivia { padding: 2.2222222222vw 2.7777777778vw; margin: 3.3333333333vw 0; border-radius: 0.6944444444vw; } } .guide_trivia_tag { 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) { .guide_trivia_tag { font-size: min(3.7333333333vw, 18.2px); margin-bottom: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_trivia_tag { font-size: clamp(13.3px, 0.9722222222vw, 21px); margin-bottom: 1.1111111111vw; } } .guide_trivia_head { border-bottom: 1px solid rgba(255, 255, 255, 0.4); } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_trivia_head { padding-bottom: min(6.4vw, 31.2px); margin-bottom: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_trivia_head { padding-bottom: 1.6666666667vw; margin-bottom: 1.6666666667vw; } } .guide_trivia_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) { .guide_trivia_title { font-size: min(4.8vw, 23.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_trivia_title { font-size: clamp(17.1px, 1.25vw, 27px); } } .guide_trivia_bodyText { line-height: 2; letter-spacing: 0.06em; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_trivia_bodyText { font-size: min(4vw, 19.5px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_trivia_bodyText { font-size: clamp(14.25px, 1.0416666667vw, 22.5px); } } .guide_trivia_bodyTitle { line-height: 1.6; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_trivia_bodyTitle { font-size: min(4.8vw, 23.4px); margin-bottom: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_trivia_bodyTitle { font-size: clamp(17.1px, 1.25vw, 27px); margin-bottom: 1.1111111111vw; } } .guide_trivia_bodyImg { aspect-ratio: 1.7777777778; overflow: hidden; } .guide_trivia_bodyImg > img, .guide_trivia_bodyImg > svg, .guide_trivia_bodyImg > iframe, .guide_trivia_bodyImg > 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) { .guide_trivia_bodyImg { margin-top: min(6.4vw, 31.2px); border-radius: min(2.1333333333vw, 10.4px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_trivia_bodyImg { margin-top: clamp(22.8px, 1.6666666667vw, 36px); border-radius: clamp(7.6px, 0.5555555556vw, 12px); } } .guide_talk { display: flex; flex-direction: column; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_talk { gap: min(8.5333333333vw, 41.6px); margin-top: min(14.9333333333vw, 72.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_talk { gap: 3.3333333333vw; margin-top: 6.6666666667vw; } } .guide_talk_row { display: flex; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_talk_row { flex-direction: column; align-items: center; gap: min(3.2vw, 15.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_talk_row { align-items: flex-start; gap: 4.1666666667vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_talk_row:nth-child(even) { flex-direction: column; align-items: center; gap: min(3.2vw, 15.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_talk_row:nth-child(even) { flex-direction: row-reverse; } } .guide_talk_person { flex-shrink: 0; text-align: center; } .guide_talk_avatar { aspect-ratio: 1; overflow: hidden; background-color: #838383; border-radius: 50%; overflow: hidden; } .guide_talk_avatar > img, .guide_talk_avatar > svg, .guide_talk_avatar > iframe, .guide_talk_avatar > 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) { .guide_talk_avatar { width: min(21.3333333333vw, 104px); margin: 0 0 min(3.2vw, 15.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_talk_avatar { width: 8.3333333333vw; margin: 0 0 0.8333333333vw; } } .guide_talk_role { color: #838383; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_talk_role { font-size: min(3.2vw, 15.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_talk_role { font-size: clamp(11.4px, 0.8333333333vw, 18px); } } .guide_talk_name { margin: 2px 0 0; font-weight: 500; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_talk_name { font-size: min(3.7333333333vw, 18.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_talk_name { font-size: clamp(13.3px, 0.9722222222vw, 21px); } } .guide_talk_bubble { word-break: break-all; position: relative; flex: 1; background-color: #f5f5f4; line-height: 2; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_talk_bubble { font-size: min(4.2666666667vw, 20.8px); width: 100%; padding: min(5.3333333333vw, 26px); border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_talk_bubble { font-size: clamp(15.2px, 1.1111111111vw, 24px); padding: 2.2222222222vw; border-radius: 0.6944444444vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_talk_bubble::before { display: none; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_talk_bubble::before { content: ""; position: absolute; top: 2.7777777778vw; left: -2.5694444444vw; border-style: solid; border-width: 1.1805555556vw 3.1944444444vw 1.1805555556vw 0; border-color: transparent #f5f5f4 transparent transparent; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_talk_row:nth-child(even) .guide_talk_bubble::before { left: auto; right: -2.5694444444vw; border-width: 1.1805555556vw 0 1.1805555556vw 3.1944444444vw; border-color: transparent transparent transparent #f5f5f4; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_qa { margin-top: min(14.9333333333vw, 72.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_qa { margin-top: 5.7638888889vw; } } .guide_qa_q { display: flex; font-weight: bold; line-height: 2; letter-spacing: 0.04em; } .guide_qa_q::before { content: ""; display: block; height: 1px; translate: 0 16px 0; background-color: #050403; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_qa_q::before { width: min(8.5333333333vw, 41.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_qa_q::before { width: 2.2222222222vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_qa_q { font-size: min(4.2666666667vw, 20.8px); gap: min(2.6666666667vw, 13px); margin: 0 0 min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_qa_q { font-size: clamp(15.2px, 1.1111111111vw, 24px); gap: 0.6944444444vw; margin: 0 0 1.6666666667vw; } } .guide_qa_a { margin: 0; line-height: 2; letter-spacing: 0.06em; font-weight: 300; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_qa_a + .guide_qa_a { margin-top: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_qa_a + .guide_qa_a { margin-top: 1.6666666667vw; } } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_qa_a { font-size: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_qa_a { 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) { .guide_rec { margin-top: min(14.9333333333vw, 72.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_rec { margin-top: 5.5555555556vw; } } .guide_rec_title { 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) { .guide_rec_title { font-size: min(6.4vw, 31.2px); margin: 0 0 min(8.5333333333vw, 41.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_rec_title { font-size: clamp(22.8px, 1.6666666667vw, 36px); margin: 0 0 2.2222222222vw; } } .guide_rec_list { display: grid; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_rec_list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_rec_list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6666666667vw 2.2222222222vw; } } .guide_rec_card { display: flex; flex-direction: column; color: inherit; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_rec_card { gap: min(3.2vw, 15.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_rec_card { gap: 1.1111111111vw; } } .guide_rec_thumb { aspect-ratio: 1; overflow: hidden; width: 100%; border: 1px solid #d9d9d9; } .guide_rec_thumb > img, .guide_rec_thumb > svg, .guide_rec_thumb > iframe, .guide_rec_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) { .guide_rec_thumb { border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_rec_thumb { border-radius: 0.6944444444vw; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_rec_thumb > img { transition: transform 0.6s ease; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_rec_card:hover .guide_rec_thumb > img { transform: scale(1.05); } } .guide_rec_name { margin: 0; font-weight: 500; line-height: 1.6; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_rec_name { font-size: min(4vw, 19.5px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_rec_name { font-size: clamp(17.1px, 1.25vw, 27px); } } .guide_rec_desc { display: none; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_spot { margin-top: min(14.9333333333vw, 72.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_spot { margin-top: 6.6666666667vw; } } .guide_spot_title { 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) { .guide_spot_title { font-size: min(5.8666666667vw, 28.6px); margin: 0 0 min(8.5333333333vw, 41.6px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_spot_title { font-size: clamp(20.9px, 1.5277777778vw, 33px); margin: 0 0 2.2222222222vw; } } .guide_spot_list { display: grid; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_spot_list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: min(4.2666666667vw, 20.8px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_spot_list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2222222222vw; } } .guide_spot_card { display: block; color: inherit; } .guide_spot_thumb { overflow: hidden; aspect-ratio: 1/1; background-color: #838383; } .guide_spot_thumb img { 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) { .guide_spot_thumb { border-radius: min(2.6666666667vw, 13px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_spot_thumb { border-radius: 0.6944444444vw; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_spot_thumb > img { transition: transform 0.6s ease; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_spot_card:hover .guide_spot_thumb > img { transform: scale(1.05); } } .guide_spot_name { 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) { .guide_spot_name { 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) { .guide_spot_name { font-size: clamp(17.1px, 1.25vw, 27px); margin: 0.8333333333vw 0 0; } } .guide_rec_name-external::after, .guide_spot_name-external::after { content: ""; display: inline-block; flex: none; width: 0.75em; height: 0.75em; margin-left: 0.4em; vertical-align: -0.02em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016.117%2016.117'%3E%3Cpath%20d='M16.117,2.015v4.7a.672.672,0,0,1-1.343,0V2.293l-7.92,7.92a.671.671,0,0,1-.95-.95l7.92-7.92H9.4A.672.672,0,0,1,9.4,0h4.7a2.017,2.017,0,0,1,2.015,2.015m-.672,8.741a.671.671,0,0,0-.672.672V12.76a2.017,2.017,0,0,1-2.015,2.015h-9.4A2.017,2.017,0,0,1,1.343,12.76v-9.4A2.017,2.017,0,0,1,3.358,1.343H4.691A.672.672,0,0,0,4.691,0H3.358A3.362,3.362,0,0,0,0,3.358v9.4a3.362,3.362,0,0,0,3.358,3.358h9.4a3.362,3.362,0,0,0,3.358-3.358V11.427a.671.671,0,0,0-.672-.672'/%3E%3C/svg%3E") no-repeat center/contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016.117%2016.117'%3E%3Cpath%20d='M16.117,2.015v4.7a.672.672,0,0,1-1.343,0V2.293l-7.92,7.92a.671.671,0,0,1-.95-.95l7.92-7.92H9.4A.672.672,0,0,1,9.4,0h4.7a2.017,2.017,0,0,1,2.015,2.015m-.672,8.741a.671.671,0,0,0-.672.672V12.76a2.017,2.017,0,0,1-2.015,2.015h-9.4A2.017,2.017,0,0,1,1.343,12.76v-9.4A2.017,2.017,0,0,1,3.358,1.343H4.691A.672.672,0,0,0,4.691,0H3.358A3.362,3.362,0,0,0,0,3.358v9.4a3.362,3.362,0,0,0,3.358,3.358h9.4a3.362,3.362,0,0,0,3.358-3.358V11.427a.671.671,0,0,0-.672-.672'/%3E%3C/svg%3E") no-repeat center/contain; } .guide_other { background-color: #f5f5f4; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_other { padding: min(14.9333333333vw, 72.8px) 0; } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_other { padding: 5.5555555556vw 0; } } .guide_other .c-farmGuide { margin-top: 0; } .guide_other .c-farmGuide_headSub { font-family: "Special Gothic Condensed One", sans-serif; color: #050403; } @media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) { .guide_other .c-farmGuide_headTitle { font-size: min(6.4vw, 31.2px); } } @media print, screen and (min-width:1024px) and (orientation: landscape), screen and (min-width:1025px) { .guide_other .c-farmGuide_headTitle { font-size: clamp(30.4px, 2.2222222222vw, 48px); } }