@charset "UTF-8";
/* =============================================================
   Funky Pine Lite — スマホ対応（追加専用）  v1.2.4  2026-07-09
   ・全ルールを @media (max-width:820px) 内に閉じ込め → PC(821px以上)は無改変
   ・既存 styles.css / 原本HTML は一切書き換えず、本ファイルを後読みで追記
   ・装飾ブロック=見た目優先（背景画像は縮小して維持）／ナビ=ハンバーガー
   ・☰トグルとナビパネルの markup / JS は functions.php が配信時に注入
   ============================================================= */

/* フッター帯画像と同じ手書きフォント（Zen Kurenaido）を見出し用にサブセット自前ホスト */
@font-face {
  font-family: "FunkyHand";
  src: url(../font/zenkurenaido_head.woff2?v=1) format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ☰トグル と ナビパネルは PC では常に非表示（>820px） */
#fp-sp-toggle,
#fp-sp-nav { display: none; }

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

  /* ===== 全体：固定幅キャンバスの解除（横スクロール撲滅） ===== */
  html { -webkit-text-size-adjust: 100%; }
  body {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
  }
  img { max-width: 100%; height: auto; }
  table { max-width: 100%; }

  /* 主要コンテナを流動化 */
  #header_menu,
  #contents,
  #top_contents,
  #sub_container,
  #sub_container_L,
  #sub_container_R,
  #sub_contents,
  #sub_contents_s,
  #sub_contents_top,
  #sub_contents_sub,
  #footer_contentsA,
  #footer_contentsB,
  #footer_contentsC .footer_copy {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }
  #contents { padding: 0 12px; }

  /* ===== ヘッダー：PCの複雑floatを畳み、ロゴ中央＋☰ ===== */
  #header_contents {
    height: auto !important;
    background: #f5a759 !important;   /* headerBK.gifは中央オレンジ帯＋上下白。cover表示で上の白帯が余白に見えるため単色オレンジに */
    padding: 8px 0;
    position: relative;
  }
  #header_logo {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 6px 58px 6px 12px;   /* 右にハンバーガー分の余白 */
    text-align: left;             /* 左寄せ */
  }
  #header_logo img { width: 168px; height: auto; }
  /* ヘッダーロゴを白背景透過＋白フチ版に差し替え（オレンジヘッダーで文字が映える）。content でsrcを差替、余白分だけ幅を補正 */
  #header_logo a img {
    content: url(../img/FunkyPine_ol.png?v=1);
    width: 150px !important; height: auto !important;   /* 少し小さく */
  }
  #header_logo h1 { font-size: 10px; line-height: 14px; }
  /* PCナビ(画像ボタン)・電話画像・イラスト・法人バナーはスマホでは隠す（ナビは☰へ集約） */
  .matsu_illu,
  .header-tel,
  .header-houjin { display: none !important; }

  /* ☰ トグルボタン（注入要素） */
  #fp-sp-toggle {
    display: block;
    position: fixed;   /* スクロールしても常に画面右上に固定 */
    top: 12px; right: 12px;
    width: 46px; height: 40px;
    padding: 0; margin: 0;
    background: rgba(0,0,0,.4);
    border: 0; border-radius: 6px;
    cursor: pointer; z-index: 1002;
    -webkit-appearance: none; appearance: none;
  }
  #fp-sp-toggle span {
    display: block; width: 24px; height: 2px; margin: 5px auto;
    background: #fff; transition: transform .25s, opacity .25s;
  }
  body.fp-nav-open #fp-sp-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.fp-nav-open #fp-sp-toggle span:nth-child(2) { opacity: 0; }
  body.fp-nav-open #fp-sp-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* スライドダウン ナビパネル（注入要素） */
  #fp-sp-nav {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    transform: translateY(-110%);
    transition: transform .28s ease;
    z-index: 1001;
    padding: 58px 0 10px;
    max-height: 100vh; overflow-y: auto;
  }
  body.fp-nav-open #fp-sp-nav { transform: translateY(0); }
  #fp-sp-nav ul { margin: 0; padding: 0; list-style: none; }
  #fp-sp-nav li { border-top: 1px solid #eee; }
  #fp-sp-nav a {
    display: block; padding: 15px 20px;
    font-size: 15px; line-height: 1.4;
    color: #333; text-decoration: none;
  }
  #fp-sp-nav a:active { background: #f6f6f6; }
  /* メニュー下部の問い合わせブロック（左＝リード文入り電話番号ボタン／右＝キャラ の横並び） */
  #fp-sp-nav .fp-nav-contact {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 12px;
    padding: 14px 16px 18px;
    background: #fff6f2; border-top: 1px solid #f0d8ce;
  }
  #fp-sp-nav .fp-nav-char {
    flex: 0 0 auto; width: 64px; height: auto; display: block;
  }
  /* リード文＋電話番号を1つの枠内にまとめる */
  #fp-sp-nav a.fp-tel {
    display: inline-block; padding: 8px 16px;
    background: #fff; border: 2px solid #e35012; border-radius: 9px;
    text-align: center; text-decoration: none; line-height: 1.2;
  }
  #fp-sp-nav a.fp-tel:active { background: #ffece3; }
  #fp-sp-nav .fp-tel-lead {
    display: block; font-size: 11px; font-weight: bold; color: #555; margin-bottom: 4px;
  }
  #fp-sp-nav .fp-tel-num {
    display: block; font-size: 21px; font-weight: bold; color: #e35012;
    letter-spacing: 1px; white-space: nowrap;
  }
  /* パネル背後のスクロールロック用オーバーレイ（注入要素） */
  #fp-sp-ovl {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000;
  }
  body.fp-nav-open #fp-sp-ovl { display: block; }

  /* ===== TOP ===== */
  /* レイアウト（社長方針）：PC版の[店主写真＋タイトル]を1枚に合成したヒーロー画像を全幅表示→本文(全幅)→丸写真3枚(横並び)。
     個別の位置調整は廃止（画像に焼込済み）。説明文はテキストのまま維持（可読性・SEO）。 */
  #top_contents {
    padding: 0 12px;
    display: flex; flex-direction: column;
    align-items: center;
  }
  /* ①合成ヒーロー画像＝全幅（top_hero_sp.jpg 897x335＝店主写真＋世界に１つだけのプロデュース） */
  #top_contents::before {
    content: "";
    order: 0;
    display: block;
    width: calc(100% + 36px); max-width: 640px;   /* 左右余白を詰めて一回り大きく */
    margin: 4px -18px 8px;
    aspect-ratio: 897 / 335;
    background: url(../img/top_hero_sp.jpg) center center / contain no-repeat;
  }
  /* 店主写真の個別要素は合成画像に含むため非表示 */
  #top_contents .top_matsuimg { display: none !important; }
  /* ③本文＝全幅 */
  #top_contents .top_main {
    order: 2;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 6px 4px 12px !important;
    background: none !important;   /* 装飾背景は外し本文を読みやすく（テキストが主役） */
    text-align: left;
    font-size: 15px; line-height: 1.9;
  }
  /* ④丸写真3枚＝本文の下に横並び（元の並び） */
  #top_mainIMG {
    order: 3;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 6px 0 4px !important;
    background: none !important;
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 10px;
  }
  #top_mainIMG .mainIMG01,
  #top_mainIMG .mainIMG02,
  #top_mainIMG .mainIMG03 {
    position: static !important;
    top: auto !important; left: auto !important;
    width: auto !important; height: auto !important;
    padding: 0 !important; margin: 0 !important;
    background: none !important;
  }
  #top_mainIMG .img01,
  #top_mainIMG .img02,
  #top_mainIMG .img03 {
    width: 96px !important; height: 96px !important;
    border-radius: 50%; object-fit: cover;
  }
  #top_contents .clears { display: none !important; }

  /* ===== サブページ共通の帯・本文ウェル ===== */
  #sub_contents_top,
  #sub_contents_sub {
    height: auto !important;
    padding: 16px 14px 6px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
    word-break: break-word;
  }
  #sub_contents {
    padding: 0 14px !important;
    background: #fff !important;   /* 779px幅のrepeat-y側面テクスチャは狭幅で破綻→白ベタに */
  }
  #sub_contents_s { padding: 0 12px !important; background: #fff !important; }

  /* ===== プロデュースについて(178)：sekai_* ===== */
  .sekai_L, .sekai_R { float: none !important; }
  .sekai_R {                     /* 固定サイズ背景写真→比率維持で縮小 */
    width: 80% !important; max-width: 314px;
    height: auto !important; aspect-ratio: 314 / 370;
    margin: 12px auto !important;
    background-size: contain !important; background-repeat: no-repeat;
  }
  .sekai_L .sekai_contents {
    width: auto !important;
    /* sekai_title 406x118(比率29.1%)。padding-topは幅基準の%なのでcontain全幅の画像高さを正確にクリア */
    padding: 32% 0 0 0 !important;
    background-size: contain !important; background-repeat: no-repeat;
    background-position: left top !important;
    font-size: 15px; line-height: 1.8;
  }
  .sekai_L .sekai_add {
    width: auto !important; max-width: 450px; height: auto !important;
    background-size: contain !important; background-repeat: no-repeat;
    background-position: center top !important;
    padding: 60px 8px 8px !important;
  }
  .sekai_price {                 /* 見出し帯画像(779x18=低解像度で極小)はやめ、本物テキスト見出しに */
    width: auto !important;
    background: none !important;
    padding: 0 6px 6px !important;
    overflow-x: auto;
  }
  .sekai_price::before {
    content: "料金の目安";
    display: block; font-family: "FunkyHand", sans-serif;
    font-size: 21px; font-weight: normal; color: #e25011; letter-spacing: 1px;
    border-bottom: 2px solid #e25011; padding-bottom: 7px; margin-bottom: 12px;
  }
  /* 価格(th)と注意書き(td)を横並び→縦積み（注意書きを価格の下へ） */
  .sekai_price table, .sekai_price tbody, .sekai_price tr,
  .sekai_price th, .sekai_price td { display: block; width: auto !important; }
  .sekai_price th { font-size: 14px !important; line-height: 1.7 !important; padding: 0 !important; }
  .sekai_price td {
    font-size: 12px !important; line-height: 1.7 !important; color: #5c5a5a;
    padding: 10px 0 0 0 !important; margin-top: 10px; border-top: 1px dashed #e0c9bf;
  }
  .sekai_flow {                  /* 横並びフロー図：背景は割愛し縦積みリストに ===== */
    width: auto !important;
    background: none !important;
    padding: 10px 0 !important;
  }
  .sekai_flow li {
    float: none !important; width: auto !important;
    text-align: center !important;   /* イラスト・説明を中央寄せ */
    border-bottom: 1px dashed #ddd; padding: 10px 4px !important;
    font-size: 13px !important; line-height: 1.6 !important;
  }
  .sekai_flow li img { display: block; margin: 0 auto 6px; }   /* ステップ画像を中央に */
  .sekai_flow li.ico { display: none !important; }   /* 矢印アイコンは縦積みでは不要 */
  .flowbar { display: none !important; }
  .sekai_spepro {                /* 背景の手帳写真が本文と重なる→背景を外し、写真は本文下に別置き */
    width: auto !important; height: auto !important;
    background: none !important;
    padding: 14px 8px !important;
  }
  .sekai_spepro::after {         /* 手帳写真(sekai_spepro.pngから切出し)を本文下に中央配置 */
    content: ""; display: block;
    width: 229px; max-width: 78%; aspect-ratio: 229 / 131;
    margin: 14px auto 0;
    background: url(../img/sekai_note_sp.jpg) center center / contain no-repeat;
    border-radius: 4px;
  }
  .sekai_other, .houjin_other { margin: 12px 0 20px 0 !important; }

  /* ===== 会社概要(173)：company_* / part_pro ===== */
  .company_L, .company_R {
    float: none !important; width: auto !important; margin: 12px 0 0 0 !important;
  }
  .company_R .company_contents { font-size: 15px !important; line-height: 1.8 !important; }
  .company_R .company_concept {
    width: auto !important; height: auto !important;
    background-size: contain !important; background-repeat: no-repeat;
    background-position: top center !important;
    padding: 16px 14px !important;
  }
  .company_R .company_concept .part {
    width: auto !important; height: auto !important;
    background: none !important; padding: 0 !important;   /* 右上の装飾画像は割愛 */
  }
  .company_R .company_concept .part_yurai {
    height: auto !important; margin: 24px 0 0 0 !important;
    /* com_img03 は正方形ロゴ(148x152)。全幅containは巨大化するため小さく中央上に固定し本文を下へ */
    background-size: 110px auto !important; background-repeat: no-repeat;
    background-position: center top !important;
    padding: 125px 8px 0 8px !important;
    text-align: center;
  }
  .company_R .company_concept .part_yurai * { text-align: left; }
  .part_pro { width: auto !important; padding: 20px 0 !important; }
  .part_pro .history {
    background: none !important;   /* 右上グラフィックは割愛し、沿革表を全幅に */
    padding: 0 !important; min-height: 0 !important;
  }
  .part_pro .history th, .part_pro .history td { display: block; padding: 0 0 4px 0 !important; }
  .part_pro .history th { color: #e35012; padding-top: 8px !important; }

  /* ===== OEM(182)：houjin_* ===== */
  .houjin_L, .houjin_R { float: none !important; }
  .houjin_R {
    width: 80% !important; max-width: 329px;
    height: auto !important; aspect-ratio: 329 / 210;
    margin: 12px auto !important;
    background-size: contain !important; background-repeat: no-repeat;
  }
  .houjin_L .houjin_contents {
    width: auto !important;
    /* houjin_title 256x93(比率36.3%)。%padding で contain全幅の画像高さをクリア */
    padding: 40% 0 0 0 !important;
    background-size: contain !important; background-repeat: no-repeat;
    background-position: left top !important;
    font-size: 15px; line-height: 1.8;
  }
  .houjin_img { width: auto !important; }
  .houjin_img ul {
    width: auto !important;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  }
  .houjin_img li {
    float: none !important; width: 44% !important; max-width: 192px;
    margin: 8px 0 !important; line-height: 1.6;
  }

  /* ===== 軌跡ギャラリー(180) / お知らせ一覧(184) の album ===== */
  .album { padding: 12px 0 30px !important; }
  .album h3 { background-size: contain; font-size: 14px; }
  .album ul {
    padding: 0 !important;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  }
  .album li {
    float: none !important; width: 44% !important; max-width: 150px;
    margin: 10px 0 !important; text-align: center;
  }
  .album li img { width: 100% !important; height: auto !important; }
  .album_page, .info_page { margin: 24px 0 0 0 !important; }

  /* ===== 記事本文＋サイドバー（posts / 184） ===== */
  #sub_container_L, #sub_container_R { font-size: 14px !important; }
  .info { padding: 14px 0 !important; }
  .info h3 { background-size: contain; font-size: 14px; }
  .info th { padding: 0 0 3px 0 !important; }
  .info td { padding: 0 0 8px 0 !important; }
  .info_content, .info_content p {
    padding: 0 4px !important; font-size: 15px !important; line-height: 1.8 !important;
  }
  .info_days { padding: 0 0 0 4px !important; }
  .sub_matsu { background: none !important; padding: 0 0 12px 0 !important; }
  .infolistbar { width: auto !important; margin: 24px auto 12px !important; text-align: center; }
  .sub_sekai {
    width: auto !important;
    background: none !important;   /* サイドバーの装飾背景は割愛 */
    padding: 10px 0 0 0 !important;
  }
  .sub_sekai td { width: auto !important; }

  /* ===== お問い合わせフォーム(205/207) ===== */
  .contact { padding: 14px 12px 40px !important; }
  .contact h3 { background-size: contain; margin: 0 0 20px 0 !important; }
  .contact table { width: 100%; }
  .contact th, .contact td {
    display: block; width: auto !important;
    padding: 4px 0 !important; text-align: left !important;
  }
  .contact th { padding-top: 12px !important; }
  .inp200, .inp400, .contact input[type="text"], .contact input[type="email"], .contact textarea {
    width: 100% !important; max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;   /* iOSのフォーカス時ズームを防止 */
    padding: 8px;
  }
  .contact .botton { text-align: center; margin-top: 16px; }
  .contact .botton input[type="submit"],
  .contact .botton input[type="button"] {
    font-size: 16px; padding: 12px 20px; margin: 6px 4px;
    -webkit-appearance: none; appearance: none;
  }

  /* ===== ページャ：タップしやすく ===== */
  .info_page a, .info_page span,
  .album_page a, .album_page span,
  .wp-pagenavi a, .wp-pagenavi span {
    display: inline-block; padding: 8px 12px; margin: 3px; font-size: 14px;
  }

  /* ===== フッター ===== */
  #footer { margin-top: 8px; }
  #footer_contentsA { padding: 30px 12px 0 !important; }
  #footer_contentsA #footer_top_L,
  #footer_contentsA #footer_top_R { float: none !important; width: auto !important; }
  #footer_contentsA #footer_top_L .footerinfo {
    width: auto !important; height: auto !important;
    background: none !important;   /* 432x17の帯bgと内側imgが重なり文字化け→bgを外し内側「お知らせ」画像のみ表示 */
    padding: 0 0 8px 0 !important;
  }
  #footer_contentsA #footer_top_L .bottom { display: none !important; }
  #footer_contentsA #footer_top_L table { width: 100%; }
  #footer_contentsA #footer_top_L th { padding: 5px 10px 5px 0 !important; }
  #footer_contentsA #footer_top_R { margin-top: 20px; }
  #footer_contentsA #footer_top_R .footercolum {
    width: auto !important; background: none !important; padding: 0 !important;
    font-size: 14px !important; line-height: 1.8 !important;
  }
  /* 「軌跡を見る」(img_A)とfacebookバナー(img_B)を横並び。
     img_Aは_offロールオーバー画像で smoothRollOver.js が absolute化＋アンカーを width:0/display:block に
     するため、そのインラインスタイルを!importantで打ち消して通常フローの inline-block に戻す */
  #footer_contentsA #footer_top_R .footercolum a {
    display: inline-block !important; position: static !important;
    width: auto !important; height: auto !important;
    vertical-align: middle; margin: 10px 14px 0 0 !important;
  }
  #footer_contentsA #footer_top_R .footercolum a img { position: static !important; }
  #footer_contentsA #footer_top_R .footercolum a img.on { display: none !important; } /* フェード用の複製(_on)を非表示 */
  #footer_contentsA #footer_top_R .footercolum .img_A,
  #footer_contentsA #footer_top_R .footercolum .img_B {
    display: inline-block !important; margin: 0 !important;
  }
  #footer_contentsB {
    width: auto !important; padding: 34px 12px 0 !important;
    /* 元foot_menutitle.png(516x17)は低解像度で極小→スマホのみ高解像度版(ZenKurenaido)に差替。PCは元画像のまま */
    background-image: url(../img/foot_menutitle_sp.png) !important;
    background-position: center 8px !important; background-size: 86% auto !important;
  }
  #footer_contentsB #footer_bo_L { float: none !important; width: auto !important; }
  #footer_contentsB #footer_bo_L img { width: 100% !important; max-width: 100% !important; height: auto !important; }
  #footer_contentsB #footer_bo_L address {
    font-size: 14px !important; line-height: 1.7 !important; margin-top: 8px;
  }
  #footer_contentsB #footer_bo_L address a { font-size: 14px !important; }
  /* フッターのメニュー画像はハンバーガーと重複するためスマホ非表示 */
  #footer_contentsB #footer_bo_R { display: none !important; }
  #footer_contentsC { height: auto !important; margin-top: 24px !important; padding: 10px 0; }
  #footer_contentsC .footer_copy {
    width: auto !important; padding: 6px 12px !important; font-size: 10px; line-height: 1.6;
  }
  #footer_contentsC .footer_copy img {
    position: static !important; top: auto !important; right: auto !important;
    display: block; max-width: 180px; margin: 10px auto 0;
  }

  /* リンク/タップ領域の下限確保 */
  #fp-sp-nav a, .contact .botton input { min-height: 44px; }
}

/* 小さめスマホ(360px前後)の微調整 */
@media screen and (max-width: 380px) {
  #header_logo img { width: 150px; }
  #top_mainIMG .img01,
  #top_mainIMG .img02,
  #top_mainIMG .img03 { width: 84px !important; height: 84px !important; }
  .album li, .houjin_img li { width: 46% !important; }
}