）を想定しているが、 HTML には
が無く直接テキストが入っているため未適用だった。 同じ指定を親要素そのものにも当てる。 ------------------------------------------------------------ */ .about-head-comment, .about-body-comment { font-size: 3.68vw; text-align: center; line-height: 1.8; } @media print, screen and (min-width: 768px) { .about-head-comment, .about-body-comment { font-size: 18px; text-align: left; } } /* ------------------------------------------------------------ [13] 「薄毛でまだ諦めたくないなら…」が見えない 背景 #2f2f2f（濃いグレー）に文字 #000（黒）で、 コントラスト比 1.3:1 とほぼ判読不能だった。文字を白にする。 ------------------------------------------------------------ */ .raised-foot { color: #fff; } /* ------------------------------------------------------------ 日本語の読みやすさ（案A＋B＋C） ・A ぶら下げ組み … 行末の「、」「。」を枠の外に逃がし、行末の凸凹を抑える ・B 約物のアキ詰め … 「、」「。」「（」が持つ余白を詰めて間延びを防ぐ ・C 文節での折り返し … 「頭皮環／境に」のような語の途中での改行をなくす いずれも対応していないブラウザでは無視されるだけで、崩れることはない。 このブロックを消せば元の組みに戻る。 ------------------------------------------------------------ */ body { /* ブラウザごとに対応がバラバラな指定は使わない。 使うと Chrome と Safari で改行位置が食い違うため。 hanging-punctuation … Safariのみ対応 text-spacing-trim … Chromeのみ対応 word-break:auto-phrase … Chromeのみ対応 text-wrap:pretty … Safariで不具合 折り返しは全ブラウザ共通で BudouX（inc/jp-linebreak.php）に任せる。 */ line-break: strict; overflow-wrap: break-word; } /* ------------------------------------------------------------ PC版：締めの文章の行間が詰まっている .about-foot に line-height の指定がなく、土台の 1.0（＝文字サイズと同じ） がそのまま効いて4行が窮屈になっていた。読みやすい行間にする。 SP版（767px以下）は現状のままにする。 ------------------------------------------------------------ */ @media print, screen and (min-width: 768px) { .about-foot { line-height: 1.9; } } /* ------------------------------------------------------------ タブレット（iPad縦など 768〜999px）で横スクロールが出る問題 このLPは幅1000px固定の設計で、700px超の固定幅要素が212個あるため 可変にするのは作り直しに近い。レイアウト全体を画面幅に合わせて 縮小し、はみ出しをなくす（PC版の見た目はそのまま保たれる）。 zoom は calc が使えないため、8px刻みの段階指定にしている。 固定ヘッダー・下部固定バーを巻き込むと位置がずれるので、 本文（.wrapper）だけを縮小する。1000px以上は元のまま。 ------------------------------------------------------------ */ @media screen and (min-width: 768px) and (max-width: 769px) { body > .wrapper { zoom: 0.768; } body { padding-top: 28px; } } @media screen and (min-width: 770px) and (max-width: 771px) { body > .wrapper { zoom: 0.770; } body { padding-top: 28px; } } @media screen and (min-width: 772px) and (max-width: 773px) { body > .wrapper { zoom: 0.772; } body { padding-top: 27px; } } @media screen and (min-width: 774px) and (max-width: 775px) { body > .wrapper { zoom: 0.774; } body { padding-top: 27px; } } @media screen and (min-width: 776px) and (max-width: 777px) { body > .wrapper { zoom: 0.776; } body { padding-top: 27px; } } @media screen and (min-width: 778px) and (max-width: 779px) { body > .wrapper { zoom: 0.778; } body { padding-top: 27px; } } @media screen and (min-width: 780px) and (max-width: 781px) { body > .wrapper { zoom: 0.780; } body { padding-top: 26px; } } @media screen and (min-width: 782px) and (max-width: 783px) { body > .wrapper { zoom: 0.782; } body { padding-top: 26px; } } @media screen and (min-width: 784px) and (max-width: 785px) { body > .wrapper { zoom: 0.784; } body { padding-top: 26px; } } @media screen and (min-width: 786px) and (max-width: 787px) { body > .wrapper { zoom: 0.786; } body { padding-top: 26px; } } @media screen and (min-width: 788px) and (max-width: 789px) { body > .wrapper { zoom: 0.788; } body { padding-top: 25px; } } @media screen and (min-width: 790px) and (max-width: 791px) { body > .wrapper { zoom: 0.790; } body { padding-top: 25px; } } @media screen and (min-width: 792px) and (max-width: 793px) { body > .wrapper { zoom: 0.792; } body { padding-top: 25px; } } @media screen and (min-width: 794px) and (max-width: 795px) { body > .wrapper { zoom: 0.794; } body { padding-top: 25px; } } @media screen and (min-width: 796px) and (max-width: 797px) { body > .wrapper { zoom: 0.796; } body { padding-top: 24px; } } @media screen and (min-width: 798px) and (max-width: 799px) { body > .wrapper { zoom: 0.798; } body { padding-top: 24px; } } @media screen and (min-width: 800px) and (max-width: 801px) { body > .wrapper { zoom: 0.800; } body { padding-top: 24px; } } @media screen and (min-width: 802px) and (max-width: 803px) { body > .wrapper { zoom: 0.802; } body { padding-top: 24px; } } @media screen and (min-width: 804px) and (max-width: 805px) { body > .wrapper { zoom: 0.804; } body { padding-top: 24px; } } @media screen and (min-width: 806px) and (max-width: 807px) { body > .wrapper { zoom: 0.806; } body { padding-top: 23px; } } @media screen and (min-width: 808px) and (max-width: 809px) { body > .wrapper { zoom: 0.808; } body { padding-top: 23px; } } @media screen and (min-width: 810px) and (max-width: 811px) { body > .wrapper { zoom: 0.810; } body { padding-top: 23px; } } @media screen and (min-width: 812px) and (max-width: 813px) { body > .wrapper { zoom: 0.812; } body { padding-top: 23px; } } @media screen and (min-width: 814px) and (max-width: 815px) { body > .wrapper { zoom: 0.814; } body { padding-top: 22px; } } @media screen and (min-width: 816px) and (max-width: 817px) { body > .wrapper { zoom: 0.816; } body { padding-top: 22px; } } @media screen and (min-width: 818px) and (max-width: 819px) { body > .wrapper { zoom: 0.818; } body { padding-top: 22px; } } @media screen and (min-width: 820px) and (max-width: 821px) { body > .wrapper { zoom: 0.820; } body { padding-top: 22px; } } @media screen and (min-width: 822px) and (max-width: 823px) { body > .wrapper { zoom: 0.822; } body { padding-top: 21px; } } @media screen and (min-width: 824px) and (max-width: 825px) { body > .wrapper { zoom: 0.824; } body { padding-top: 21px; } } @media screen and (min-width: 826px) and (max-width: 827px) { body > .wrapper { zoom: 0.826; } body { padding-top: 21px; } } @media screen and (min-width: 828px) and (max-width: 829px) { body > .wrapper { zoom: 0.828; } body { padding-top: 21px; } } @media screen and (min-width: 830px) and (max-width: 831px) { body > .wrapper { zoom: 0.830; } body { padding-top: 20px; } } @media screen and (min-width: 832px) and (max-width: 833px) { body > .wrapper { zoom: 0.832; } body { padding-top: 20px; } } @media screen and (min-width: 834px) and (max-width: 835px) { body > .wrapper { zoom: 0.834; } body { padding-top: 20px; } } @media screen and (min-width: 836px) and (max-width: 837px) { body > .wrapper { zoom: 0.836; } body { padding-top: 20px; } } @media screen and (min-width: 838px) and (max-width: 839px) { body > .wrapper { zoom: 0.838; } body { padding-top: 19px; } } @media screen and (min-width: 840px) and (max-width: 841px) { body > .wrapper { zoom: 0.840; } body { padding-top: 19px; } } @media screen and (min-width: 842px) and (max-width: 843px) { body > .wrapper { zoom: 0.842; } body { padding-top: 19px; } } @media screen and (min-width: 844px) and (max-width: 845px) { body > .wrapper { zoom: 0.844; } body { padding-top: 19px; } } @media screen and (min-width: 846px) and (max-width: 847px) { body > .wrapper { zoom: 0.846; } body { padding-top: 18px; } } @media screen and (min-width: 848px) and (max-width: 849px) { body > .wrapper { zoom: 0.848; } body { padding-top: 18px; } } @media screen and (min-width: 850px) and (max-width: 851px) { body > .wrapper { zoom: 0.850; } body { padding-top: 18px; } } @media screen and (min-width: 852px) and (max-width: 853px) { body > .wrapper { zoom: 0.852; } body { padding-top: 18px; } } @media screen and (min-width: 854px) and (max-width: 855px) { body > .wrapper { zoom: 0.854; } body { padding-top: 18px; } } @media screen and (min-width: 856px) and (max-width: 857px) { body > .wrapper { zoom: 0.856; } body { padding-top: 17px; } } @media screen and (min-width: 858px) and (max-width: 859px) { body > .wrapper { zoom: 0.858; } body { padding-top: 17px; } } @media screen and (min-width: 860px) and (max-width: 861px) { body > .wrapper { zoom: 0.860; } body { padding-top: 17px; } } @media screen and (min-width: 862px) and (max-width: 863px) { body > .wrapper { zoom: 0.862; } body { padding-top: 17px; } } @media screen and (min-width: 864px) and (max-width: 865px) { body > .wrapper { zoom: 0.864; } body { padding-top: 16px; } } @media screen and (min-width: 866px) and (max-width: 867px) { body > .wrapper { zoom: 0.866; } body { padding-top: 16px; } } @media screen and (min-width: 868px) and (max-width: 869px) { body > .wrapper { zoom: 0.868; } body { padding-top: 16px; } } @media screen and (min-width: 870px) and (max-width: 871px) { body > .wrapper { zoom: 0.870; } body { padding-top: 16px; } } @media screen and (min-width: 872px) and (max-width: 873px) { body > .wrapper { zoom: 0.872; } body { padding-top: 15px; } } @media screen and (min-width: 874px) and (max-width: 875px) { body > .wrapper { zoom: 0.874; } body { padding-top: 15px; } } @media screen and (min-width: 876px) and (max-width: 877px) { body > .wrapper { zoom: 0.876; } body { padding-top: 15px; } } @media screen and (min-width: 878px) and (max-width: 879px) { body > .wrapper { zoom: 0.878; } body { padding-top: 15px; } } @media screen and (min-width: 880px) and (max-width: 881px) { body > .wrapper { zoom: 0.880; } body { padding-top: 14px; } } @media screen and (min-width: 882px) and (max-width: 883px) { body > .wrapper { zoom: 0.882; } body { padding-top: 14px; } } @media screen and (min-width: 884px) and (max-width: 885px) { body > .wrapper { zoom: 0.884; } body { padding-top: 14px; } } @media screen and (min-width: 886px) and (max-width: 887px) { body > .wrapper { zoom: 0.886; } body { padding-top: 14px; } } @media screen and (min-width: 888px) and (max-width: 889px) { body > .wrapper { zoom: 0.888; } body { padding-top: 13px; } } @media screen and (min-width: 890px) and (max-width: 891px) { body > .wrapper { zoom: 0.890; } body { padding-top: 13px; } } @media screen and (min-width: 892px) and (max-width: 893px) { body > .wrapper { zoom: 0.892; } body { padding-top: 13px; } } @media screen and (min-width: 894px) and (max-width: 895px) { body > .wrapper { zoom: 0.894; } body { padding-top: 13px; } } @media screen and (min-width: 896px) and (max-width: 897px) { body > .wrapper { zoom: 0.896; } body { padding-top: 12px; } } @media screen and (min-width: 898px) and (max-width: 899px) { body > .wrapper { zoom: 0.898; } body { padding-top: 12px; } } @media screen and (min-width: 900px) and (max-width: 901px) { body > .wrapper { zoom: 0.900; } body { padding-top: 12px; } } @media screen and (min-width: 902px) and (max-width: 903px) { body > .wrapper { zoom: 0.902; } body { padding-top: 12px; } } @media screen and (min-width: 904px) and (max-width: 905px) { body > .wrapper { zoom: 0.904; } body { padding-top: 12px; } } @media screen and (min-width: 906px) and (max-width: 907px) { body > .wrapper { zoom: 0.906; } body { padding-top: 11px; } } @media screen and (min-width: 908px) and (max-width: 909px) { body > .wrapper { zoom: 0.908; } body { padding-top: 11px; } } @media screen and (min-width: 910px) and (max-width: 911px) { body > .wrapper { zoom: 0.910; } body { padding-top: 11px; } } @media screen and (min-width: 912px) and (max-width: 913px) { body > .wrapper { zoom: 0.912; } body { padding-top: 11px; } } @media screen and (min-width: 914px) and (max-width: 915px) { body > .wrapper { zoom: 0.914; } body { padding-top: 10px; } } @media screen and (min-width: 916px) and (max-width: 917px) { body > .wrapper { zoom: 0.916; } body { padding-top: 10px; } } @media screen and (min-width: 918px) and (max-width: 919px) { body > .wrapper { zoom: 0.918; } body { padding-top: 10px; } } @media screen and (min-width: 920px) and (max-width: 921px) { body > .wrapper { zoom: 0.920; } body { padding-top: 10px; } } @media screen and (min-width: 922px) and (max-width: 923px) { body > .wrapper { zoom: 0.922; } body { padding-top: 9px; } } @media screen and (min-width: 924px) and (max-width: 925px) { body > .wrapper { zoom: 0.924; } body { padding-top: 9px; } } @media screen and (min-width: 926px) and (max-width: 927px) { body > .wrapper { zoom: 0.926; } body { padding-top: 9px; } } @media screen and (min-width: 928px) and (max-width: 929px) { body > .wrapper { zoom: 0.928; } body { padding-top: 9px; } } @media screen and (min-width: 930px) and (max-width: 931px) { body > .wrapper { zoom: 0.930; } body { padding-top: 8px; } } @media screen and (min-width: 932px) and (max-width: 933px) { body > .wrapper { zoom: 0.932; } body { padding-top: 8px; } } @media screen and (min-width: 934px) and (max-width: 935px) { body > .wrapper { zoom: 0.934; } body { padding-top: 8px; } } @media screen and (min-width: 936px) and (max-width: 937px) { body > .wrapper { zoom: 0.936; } body { padding-top: 8px; } } @media screen and (min-width: 938px) and (max-width: 939px) { body > .wrapper { zoom: 0.938; } body { padding-top: 7px; } } @media screen and (min-width: 940px) and (max-width: 941px) { body > .wrapper { zoom: 0.940; } body { padding-top: 7px; } } @media screen and (min-width: 942px) and (max-width: 943px) { body > .wrapper { zoom: 0.942; } body { padding-top: 7px; } } @media screen and (min-width: 944px) and (max-width: 945px) { body > .wrapper { zoom: 0.944; } body { padding-top: 7px; } } @media screen and (min-width: 946px) and (max-width: 947px) { body > .wrapper { zoom: 0.946; } body { padding-top: 6px; } } @media screen and (min-width: 948px) and (max-width: 949px) { body > .wrapper { zoom: 0.948; } body { padding-top: 6px; } } @media screen and (min-width: 950px) and (max-width: 951px) { body > .wrapper { zoom: 0.950; } body { padding-top: 6px; } } @media screen and (min-width: 952px) and (max-width: 953px) { body > .wrapper { zoom: 0.952; } body { padding-top: 6px; } } @media screen and (min-width: 954px) and (max-width: 955px) { body > .wrapper { zoom: 0.954; } body { padding-top: 6px; } } @media screen and (min-width: 956px) and (max-width: 957px) { body > .wrapper { zoom: 0.956; } body { padding-top: 5px; } } @media screen and (min-width: 958px) and (max-width: 959px) { body > .wrapper { zoom: 0.958; } body { padding-top: 5px; } } @media screen and (min-width: 960px) and (max-width: 961px) { body > .wrapper { zoom: 0.960; } body { padding-top: 5px; } } @media screen and (min-width: 962px) and (max-width: 963px) { body > .wrapper { zoom: 0.962; } body { padding-top: 5px; } } @media screen and (min-width: 964px) and (max-width: 965px) { body > .wrapper { zoom: 0.964; } body { padding-top: 4px; } } @media screen and (min-width: 966px) and (max-width: 967px) { body > .wrapper { zoom: 0.966; } body { padding-top: 4px; } } @media screen and (min-width: 968px) and (max-width: 969px) { body > .wrapper { zoom: 0.968; } body { padding-top: 4px; } } @media screen and (min-width: 970px) and (max-width: 971px) { body > .wrapper { zoom: 0.970; } body { padding-top: 4px; } } @media screen and (min-width: 972px) and (max-width: 973px) { body > .wrapper { zoom: 0.972; } body { padding-top: 3px; } } @media screen and (min-width: 974px) and (max-width: 975px) { body > .wrapper { zoom: 0.974; } body { padding-top: 3px; } } @media screen and (min-width: 976px) and (max-width: 977px) { body > .wrapper { zoom: 0.976; } body { padding-top: 3px; } } @media screen and (min-width: 978px) and (max-width: 979px) { body > .wrapper { zoom: 0.978; } body { padding-top: 3px; } } @media screen and (min-width: 980px) and (max-width: 981px) { body > .wrapper { zoom: 0.980; } body { padding-top: 2px; } } @media screen and (min-width: 982px) and (max-width: 983px) { body > .wrapper { zoom: 0.982; } body { padding-top: 2px; } } @media screen and (min-width: 984px) and (max-width: 985px) { body > .wrapper { zoom: 0.984; } body { padding-top: 2px; } } @media screen and (min-width: 986px) and (max-width: 987px) { body > .wrapper { zoom: 0.986; } body { padding-top: 2px; } } @media screen and (min-width: 988px) and (max-width: 989px) { body > .wrapper { zoom: 0.988; } body { padding-top: 1px; } } @media screen and (min-width: 990px) and (max-width: 991px) { body > .wrapper { zoom: 0.990; } body { padding-top: 1px; } } @media screen and (min-width: 992px) and (max-width: 993px) { body > .wrapper { zoom: 0.992; } body { padding-top: 1px; } } @media screen and (min-width: 994px) and (max-width: 995px) { body > .wrapper { zoom: 0.994; } body { padding-top: 1px; } } @media screen and (min-width: 996px) and (max-width: 997px) { body > .wrapper { zoom: 0.996; } body { padding-top: 0px; } } @media screen and (min-width: 998px) and (max-width: 999px) { body > .wrapper { zoom: 0.998; } body { padding-top: 0px; } } /* ------------------------------------------------------------ タブレット（768〜999px）でヘッダーの予約ボタンが収まらない問題 このヘッダーは幅1000px前提で、その幅では2つの予約ボタンが どうしても右にはみ出す。スマホ版と同じ「下部固定バー」に逃がす。 ------------------------------------------------------------ */ @media screen and (min-width: 768px) and (max-width: 999px) { /* 元CSSが !important で表示しているので、こちらも同じ強さで消す */ .header .header-contact-items, .header .hdr-cta { display: none !important; } /* 下部固定バー：スマホ用の指定一式をそのまま持ってくる */ /* ========================================================================== スマホ：下部固定CTAバナー（ヘッダーからCTAを移設） ========================================================================== */ .sp-fixed-cta { display: none; } /* 固定バナー本体 */ .sp-fixed-cta { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 -2px 16px rgba(64, 56, 32, .14); } .sp-fixed-cta__btn { flex: 1 1 0; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 6px; border-radius: 8px; color: #fff; font-size: 3.5vw; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; background: linear-gradient(180deg, #79a03b 0%, #4f7212 100%); box-shadow: 0 2px 6px rgba(64, 56, 32, .18); } .sp-fixed-cta__btn svg { width: 4.4vw; height: 4.4vw; flex: none; } .sp-fixed-cta__btn:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(64, 56, 32, .18); } .sp-fixed-cta__btn--line { background: linear-gradient(180deg, #6cc24a 0%, #47922c 100%); } .sp-fixed-cta { display: flex !important; } .sp-fixed-cta__btn svg { width: 22px !important; height: 22px !important; } body { padding-bottom: 76px; /* 固定バーに最後の内容が隠れないように */ } } /* ------------------------------------------------------------ 1000px以上でもメインビジュアルを画面いっぱいに広げる このLPは幅1000px固定の設計で、MVの左右に余白ができていた。 MVだけを画面幅まで広げる（本文の1000pxはそのまま）。 縦スクロールバーぶんで横スクロールが出ないよう clip を併用する。 ------------------------------------------------------------ */ @media screen and (min-width: 1000px) { html { overflow-x: clip; } /* 親の .container が overflow:hidden で切り取っていたので、 MVを含むこの箇所だけ切り取りを解除する */ .hero .hero-image, .container:has(> .hero) { overflow: visible; } .hero-image { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .hero-image img { width: 100%; height: auto; } } /* ------------------------------------------------------------ iPad縦向きでもスマホ用の縦長メインビジュアルを出す このLPはPC用／SP用の2枚を display で切り替えているので、 縦画面のときだけSP用を表示する。 ------------------------------------------------------------ */ @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { /* このLPは JavaScript が幅736pxを境にSP用画像をDOMごと消してしまうため、 表示の切り替えではなく、PC用imgの中身を縦長画像に差し替える */ .hero-image img.pc { content: url("assets/img/hero-image.jpg?v=1786202113"); display: block !important; width: 100%; height: auto; } } /* ------------------------------------------------------------ 737〜767px のはみ出し対策 このLPは幅736pxを境にPCレイアウト（固定1000px）へ切り替わるため、 737〜767px では横に約260pxはみ出していた。既存の縮小調整は 768px以上しか無く、その直下が抜けていたので同じ方式で埋める。 ------------------------------------------------------------ */ @media screen and (min-width: 737px) and (max-width: 738px) { body > .wrapper { zoom: 0.737; } body { padding-top: 28px; } } @media screen and (min-width: 739px) and (max-width: 740px) { body > .wrapper { zoom: 0.739; } body { padding-top: 28px; } } @media screen and (min-width: 741px) and (max-width: 742px) { body > .wrapper { zoom: 0.741; } body { padding-top: 28px; } } @media screen and (min-width: 743px) and (max-width: 744px) { body > .wrapper { zoom: 0.743; } body { padding-top: 28px; } } @media screen and (min-width: 745px) and (max-width: 746px) { body > .wrapper { zoom: 0.745; } body { padding-top: 28px; } } @media screen and (min-width: 747px) and (max-width: 748px) { body > .wrapper { zoom: 0.747; } body { padding-top: 28px; } } @media screen and (min-width: 749px) and (max-width: 750px) { body > .wrapper { zoom: 0.749; } body { padding-top: 28px; } } @media screen and (min-width: 751px) and (max-width: 752px) { body > .wrapper { zoom: 0.751; } body { padding-top: 28px; } } @media screen and (min-width: 753px) and (max-width: 754px) { body > .wrapper { zoom: 0.753; } body { padding-top: 28px; } } @media screen and (min-width: 755px) and (max-width: 756px) { body > .wrapper { zoom: 0.755; } body { padding-top: 28px; } } @media screen and (min-width: 757px) and (max-width: 758px) { body > .wrapper { zoom: 0.757; } body { padding-top: 28px; } } @media screen and (min-width: 759px) and (max-width: 760px) { body > .wrapper { zoom: 0.759; } body { padding-top: 28px; } } @media screen and (min-width: 761px) and (max-width: 762px) { body > .wrapper { zoom: 0.761; } body { padding-top: 28px; } } @media screen and (min-width: 763px) and (max-width: 764px) { body > .wrapper { zoom: 0.763; } body { padding-top: 28px; } } @media screen and (min-width: 765px) and (max-width: 766px) { body > .wrapper { zoom: 0.765; } body { padding-top: 28px; } } @media screen and (min-width: 767px) and (max-width: 768px) { body > .wrapper { zoom: 0.767; } body { padding-top: 28px; } } /* ------------------------------------------------------------ ちょうど736pxのときのはみ出し対策 CSSは 736px以上でPCレイアウト（固定1000px）になるのに対し、 JavaScript は 736px「より大きい」ときにSP用imgを消すため、 736px だけPCレイアウトなのにPC画像が消えて崩れていた。 この1pxだけSPレイアウト側に寄せて回避する。 ------------------------------------------------------------ */ @media screen and (min-width: 736px) and (max-width: 736px) { body > .wrapper { zoom: 0.736; } body { padding-top: 28px; } } /* ============================================================ 2026-08-11 修正 ① メインビジュアル上の余白 ② 「ご存じでしょうか」1行化 ③ 見出し・ラベルの視認性 ④ 要因図のバランス ============================================================ */ /* ------------------------------------------------------------ ③-LP（男性LP）見出しの視認性 ------------------------------------------------------------ */ /* 濃緑地(#4f7212)に暗褐色(#403820)が乗っていて 2.08 しかなかった */ .closing-title .small { color: #fff !important; } /* 白地の上の淡い茶(#b8935f) */ .flow-item-batch { color: #8a6636 !important; } /* ------------------------------------------------------------ ヘッダーの幅（2026-08-12） ヘッダーだけ 1000px 固定の中央寄せで、その下のメインビジュアルは 画面いっぱいだったため、左右に地色が見えて浮いていた。 白い帯は画面いっぱいに広げ、中身はこれまでどおり 1000px に収める。 ------------------------------------------------------------ */ @media screen and (min-width: 769px) { body > header.header { width: 100% !important; max-width: none !important; left: 0 !important; right: 0 !important; transform: none !important; /* 元は translateX(-50%) で中央寄せしていた */ box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 6px 16px rgba(0, 0, 0, .05); } body > header.header .header-content { max-width: 1000px !important; width: 100% !important; margin: 0 auto !important; } } /* ============================================================ ヘッダーを男性TOPと同じものに差し替え（2026-08-12） HTMLは header-ym3.php の #siteheader をそのまま使い、 CSSはTOPのスタイルからヘッダー関連だけを抜き出して当てている。 LP本体のデザインには触れていない。 ============================================================ */ /* LP側の旧ヘッダーの名残を消す */ body > header.header { display: none !important; } /* ---- ym3_common_common.css ---- */ @media (min-width:769px){ .visible_pc{display: block;} .visible_sp{display: none;} } @media (max-width:768px){ .visible_sp{display: block;} .visible_pc{display: none;} } /* ---- ym3_common_common_pc.css ---- */ @media screen and (min-width: 769px) { header#siteheader{width: 100%; min-width: 800px; height: 90px; margin: 0 auto; background-color: #fff; position: fixed; top: 0; z-index: 9999;} header#siteheader div.inner{width: 96.0%; padding:8px 0 6px 0; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center;} header#siteheader div.inner div.header_right{width: 372px; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center;} header#siteheader div.inner div.header_right h1{width: 236px;} header#siteheader div.inner div.header_right a.blank_btn{width: 120px; height: 45px; display: block; margin:0 3% 0 4%; border-radius: 5px; background-color: #ff6565; position: relative;} header#siteheader div.inner div.header_right a.blank_btn::after{content: ''; border: 0; border-top: solid 2px #fff; border-right: solid 2px #fff; display: inline-block; width: 5px; height: 5px; position: absolute; top: 50%; right: 8px; transform: translateY(-50%) rotate(45deg);} header#siteheader div.inner div.header_right a.blank_btn span{width: auto; height: 45px; padding: 0 7px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; color: #fff; font-size:14px; letter-spacing: 0.05em; box-sizing: border-box;} header#siteheader div.inner div.nav_box{width: 569px; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center;} header#siteheader div.inner div.nav_box div.tel_btn{width: 248px;} header#siteheader div.inner div.nav_box div.tel_btn a{width: auto; cursor: pointer;} header#siteheader div.inner div.nav_box div.reserve_btns{width: 299px; margin-left: auto;} header#siteheader div.inner div.nav_box div.reserve_btns div.reserve_btn_wrap{width: auto; display: -webkit-box; display: -ms-flexbox; display: flex;} header#siteheader div.inner div.nav_box div.reserve_btns div.reserve_btn_wrap a{width: 146px; display: block;} header#siteheader div.inner div.nav_box div.reserve_btns div.reserve_btn_wrap a:nth-child(n+2){margin-left: auto;} } /* ---- ym3_common_common_sp.css ---- */ @media screen and (max-width: 768px) { header#siteheader{width: 100%; height: 55px; margin: 0 auto; background-color: #fff; position: fixed; top: 0; z-index: 9999;} header#siteheader div.inner{width: 100%; display: -webkit-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -moz-flex; display: flex; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;} header#siteheader div.inner div.header_right{width: 190px; margin: 0 0 0 2.0%; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center;} header#siteheader div.inner div.header_right h1{width: 36.4%; width: 130px;} header#siteheader div.inner div.header_right a.blank_btn{width: 48px; height: 35px; display: block; margin: 0 2.3% 0 3%; border-radius: 5px; background-color: #ff6565; position: relative; box-sizing: border-box;} header#siteheader div.inner div.header_right a.blank_btn::after{content: ''; border: 0; border-top: solid 1px #fff; border-right: solid 1px #fff; display: inline-block; width: 4px; height: 4px; position: absolute; top: 50%; right: 6px; transform: translateY(-50%) rotate(45deg);} header#siteheader div.inner div.header_right a.blank_btn span{width: auto; height: 35px; padding: 0px 7px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 10px; line-height: 1.3em; letter-spacing: 0.0em; box-sizing: border-box;} header#siteheader div.inner div.nav_box{width: 165px; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: flex-end;} header#siteheader div.inner div.nav_box div.tel_btn{width: 55px; width: 65px; order: 2;} header#siteheader div.inner div.nav_box div.tel_btn a{width: auto; cursor: pointer;} header#siteheader div.inner div.nav_box div.reserve_btns{width: 110px; display: -webkit-box; display: -ms-flexbox; display: flex; order: 1;} header#siteheader div.inner div.nav_box div.reserve_btns div.reserve_btn_wrap{display: contents;} header#siteheader div.inner div.nav_box div.reserve_btns div.reserve_btn_wrap a{width: 55px; width: 65px; display: block;} } /* ---- comp_ym3.css ---- */ @charset "UTF-8"; .gnav-wrap :where(div, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, span, em, strong, small, figure, section, a){color: inherit; font-family: inherit;} .gnav-wrap{position: relative; border-top: 1px solid #e5dcc0; background: #ffffff; font-family: "游ゴシック体", YuGothic, "Yu Gothic", "Noto Sans JP", sans-serif;} .gnav__chk, .gnav__burger{display: none;} .gnav__list{display: flex; justify-content: center; align-items: stretch; max-width: 1200px; height: 46px; margin: 0 auto; padding: 0; list-style: none;} .gnav__item{position: relative; display: flex; align-items: center;} .gnav__item + .gnav__item{border-left: 1px solid #e5dcc0;} .gnav__item:has(.gnav__sub) > .gnav__link::after{content: ""; display: inline-block; margin-left: 0.5em; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px);} .gnav__item:hover > .gnav__sub, .gnav__item:focus-within > .gnav__sub{visibility: visible; opacity: 1; transform: translateY(0);} .gnav__link{display: flex; align-items: center; height: 100%; padding: 0 1.15em; color: #3e341e; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; text-decoration: none; white-space: nowrap; transition: color 0.2s, background-color 0.2s;} .gnav__link:hover{background: #fcf7e1; color: #35a500;} .gnav__sub{position: absolute; left: 0; top: 100%; z-index: 60; min-width: 230px; margin: 0; padding: 6px 0; list-style: none; background: #ffffff; border: 1px solid #e5dcc0; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s;} .gnav__sub a{display: block; padding: 10px 18px; color: #3e341e; font-size: 13.5px; line-height: 1.5; text-decoration: none; white-space: nowrap;} .gnav__sub a:hover{background: #fcf7e1; color: #35a500;} @media screen and (max-width: 768px) { .gnav-wrap{border-top: 0;} .gnav-wrap{position: static; background: none;} .gnav__burger{display: block; position: fixed; right: 2px; top: 8px; z-index: 9999; width: 34px; height: 39px; background: none; cursor: pointer;} .gnav__burger span, .gnav__burger span::before, .gnav__burger span::after{content: ""; position: absolute; left: 6px; width: 23px; height: 2px; background: #3e341e; transition: transform 0.25s, opacity 0.25s;} .gnav__burger span{top: 18px;} .gnav__burger span::before{top: -8px; left: 0;} .gnav__burger span::after{top: 8px; left: 0;} .gnav{position: fixed; left: 0; top: 55px; z-index: 9998; width: 100%; max-height: calc(100vh - 55px); overflow-y: auto; background: #ffffff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); padding-bottom: 84px; transform: translateY(-120%); transition: transform 0.3s ease;} .gnav__chk:checked ~ .gnav{transform: translateY(0);} .gnav__chk:checked ~ .gnav__burger span{background: transparent;} .gnav__chk:checked ~ .gnav__burger span::before{transform: translateY(8px) rotate(45deg);} .gnav__chk:checked ~ .gnav__burger span::after{transform: translateY(-8px) rotate(-45deg);} .gnav__list{display: block; height: auto; border-top: 1px solid #e5dcc0;} .gnav__item{display: block; border-left: 0;} .gnav__item + .gnav__item{border-left: 0; border-top: 1px solid #e5dcc0;} .gnav__item:has(.gnav__sub) > .gnav__link::after{margin-left: auto;} .gnav__link{height: auto; padding: 14px 18px; font-size: 14.5px;} .gnav__sub{position: static; visibility: visible; opacity: 1; transform: none; min-width: 0; border: 0; box-shadow: none; background: #fcf7e1; padding: 0;} .gnav__sub a{padding: 11px 18px 11px 32px; font-size: 13px;} } header#siteheader{height: calc(90px + 47px);} @media screen and (max-width: 768px) { header#siteheader{height: 55px;} } .gnav__acc{display: none;} @media screen and (max-width: 768px) { .gnav__item{position: static;} .gnav__link--label{position: relative; cursor: pointer;} .gnav__link--label::after{content: ""; position: absolute; right: 18px; top: 50%; margin: 0; border: 5px solid transparent; border-top-color: currentColor; margin-top: -2px; transition: transform 0.2s;} .gnav__item:has(.gnav__sub) > .gnav__link--label::after{content: ""; display: block; position: absolute; right: 18px; top: 50%; margin: -2px 0 0; border: 5px solid transparent; border-top-color: currentColor;} .gnav__item:has(.gnav__sub) > .gnav__acc:checked + .gnav__link--label::after{margin-top: -8px; border-top-color: transparent; border-bottom-color: currentColor;} .gnav__sub{display: none;} .gnav__acc:checked ~ .gnav__sub{display: block;} .gnav__sub-head{display: none;} .gnav__sub a{text-align: left; padding: 12px 18px 12px 32px;} } @media screen and (min-width: 769px) { .gnav-wrap{border-top: 1px solid #e6ded0; background: #fff;} .gnav__item + .gnav__item{border-left: 1px solid #e6ded0;} .gnav__link{color: #5b4a35; font-size: 14px;} .gnav__link:hover{background: #faf5ed; color: #6c9048;} .gnav__link--label{cursor: default; color: #5b4a35;} .gnav__link--label:hover{background: transparent; color: #5b4a35;} .gnav__sub{z-index: 10; min-width: 100%; padding: 0; border: 1px solid #e6ded0; border-top: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); transform: translateY(-6px);} .gnav__item:hover > .gnav__sub, .gnav__item:focus-within > .gnav__sub{transform: translateY(0);} .gnav__sub li + li{border-top: 1px solid #e6ded0;} .gnav__sub a{display: block; padding: 0.85em 1.2em; color: #5b4a35; font-size: 13px; line-height: 1.4; white-space: nowrap;} .gnav__sub a:hover{background: #faf5ed; color: #6c9048;} .gnav__sub-head{display: list-item; padding: 0.8em 1.2em; background: #6c9048; color: #fff; font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", serif; font-size: 13px; letter-spacing: 0.12em; text-align: center; white-space: nowrap;} .gnav__sub-head + li{border-top: 0;} } .c-icon{display: block; flex: 0 0 auto; background: no-repeat center/contain;} .c-icon--calendar{background-image: url("data:image/svg+xml;utf8,");} .c-icon--chat{background-image: url("data:image/svg+xml;utf8,");} .c-icon--tel{background-image: url("data:image/svg+xml;utf8,");} .c-icon--freedial{background-image: url("data:image/svg+xml;utf8,");} .c-num,.c-rt,.c-ico{display:block} .c-hbtn--tel{position:relative;display:block;box-sizing:border-box;width:100%;aspect-ratio:496/144;container-type:inline-size;color:#3e341e;font-family:"Noto Sans JP","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","ヒラギノ角ゴ ProN W3",sans-serif;text-decoration:none} .c-hbtn--tel .c-hbtn__sp{display:none} .c-hbtn--tel .c-ico--free{position:absolute;left:3.2258cqw;top:4.6371cqw;width:5.58cqw} .c-hbtn--tel .c-num{position:absolute;left:21.7742cqw;top:1.6734cqw;font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;font-size:13.7298cqw;font-weight:500;line-height:1;white-space:nowrap;transform:scaleX(0.862);transform-origin:left center} .c-hbtn--tel .c-rt{position:absolute;font-family:"Noto Sans JP","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","ヒラギノ角ゴ ProN W3",sans-serif;font-weight:400;line-height:1;white-space:nowrap} .c-hbtn--tel .c-rt--1{left:56.25cqw;top:-0.1008cqw;font-size:3.8306cqw} .c-hbtn--tel .c-rt--2{left:77.0161cqw;top:-0.1815cqw;font-size:4.2339cqw} .c-hbtn--tel .c-hbtn__note{position:absolute;left:0;font-size:5.2419cqw;line-height:1;white-space:nowrap;transform-origin:left center} .c-hbtn--tel .c-hbtn__note b{font-weight:500} .c-hbtn--tel .c-hbtn__note b::before{content:"【"} .c-hbtn--tel .c-hbtn__note b::after{content:"】 "} .c-hbtn--tel .c-hbtn__note--1{top:17.2782cqw;transform:scaleX(0.822)} .c-hbtn--tel .c-hbtn__note--2{top:23.3266cqw;transform:scaleX(0.822)} @media only screen and (max-width: 768px){ .c-hbtn--tel{aspect-ratio:1/1;background:#9c9c9c;color:#fff} .c-hbtn--tel .c-hbtn__pc{display:none} .c-hbtn--tel .c-hbtn__sp{display:block} .c-hbtn--tel .c-ico--hand{position:absolute;left:30cqw;top:16.3636cqw;width:40cqw} .c-hbtn--tel .c-hbtn__splabel{position:absolute;left:50%;transform:translateX(-50%);top:67.4545cqw;font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;font-size:17.2727cqw;font-weight:500;line-height:1;letter-spacing:-0.2273cqw;white-space:nowrap} } .c-hbtn--mail,.c-hbtn--line{position:relative;display:block;box-sizing:border-box;width:100%;aspect-ratio:292/138;container-type:inline-size;border-radius:2.0548cqw;color:#fff;font-family:"Noto Sans JP","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","ヒラギノ角ゴ ProN W3",sans-serif;text-decoration:none} .c-hbtn--mail .c-hbtn__arrow,.c-hbtn--line .c-hbtn__arrow{position:absolute;left:88.6986cqw;top:18.1507cqw;width:5.4795cqw} .c-hbtn--mail .c-hbtn__label,.c-hbtn--line .c-hbtn__label{position:absolute;font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;font-size:11.3014cqw;font-weight:600;line-height:1;white-space:nowrap;top:16.4384cqw} @media only screen and (max-width: 768px){ .c-hbtn--mail,.c-hbtn--line{aspect-ratio:1/1;border-radius:0} .c-hbtn--mail .c-hbtn__arrow,.c-hbtn--line .c-hbtn__arrow{display:none} .c-hbtn--mail .c-hbtn__label,.c-hbtn--line .c-hbtn__label{left:50% !important;transform:translateX(-50%);font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;font-size:17.2727cqw;font-weight:500;top:67.4545cqw} } .c-hbtn--mail{background:linear-gradient(180deg,#f7a52a 0%,#ef7000 100%)} @media only screen and (max-width: 768px){ .c-hbtn--mail{background:#ef7000} } .c-hbtn--mail .c-hbtn__ico{position:absolute;left:7.5342cqw;top:15.7534cqw;width:14.3836cqw} .c-hbtn--mail .c-hbtn__label{left:28.0822cqw;letter-spacing:-0.137cqw} @media only screen and (max-width: 768px){ .c-hbtn--mail .c-hbtn__ico{left:30cqw;top:17.2727cqw;width:40.9091cqw} .c-hbtn--mail .c-hbtn__label{letter-spacing:-0.3636cqw} } .c-hbtn--line{background:linear-gradient(180deg,#6cc93a 0%,#35a500 100%)} @media only screen and (max-width: 768px){ .c-hbtn--line{background:#35a500} } .c-hbtn--line .c-hbtn__ico{position:absolute;left:7.5342cqw;top:15.0685cqw;width:16.4384cqw} .c-hbtn--line .c-hbtn__label{left:28.4247cqw} @media only screen and (max-width: 768px){ .c-hbtn--line .c-hbtn__ico{left:26.3636cqw;top:13.6364cqw;width:48.1818cqw} .c-hbtn--line .c-hbtn__label{letter-spacing:.8182cqw} } .c-ico--line .c-ico__t{font-family:"Noto Sans JP","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","ヒラギノ角ゴ ProN W3",sans-serif;font-weight:700;font-size:22px;letter-spacing:.5px} .c-hbtn--line .c-ico--line .c-ico__t{fill:#35a500} @media only screen and (max-width: 768px){ header#siteheader div.inner{box-sizing:border-box;height:100%;align-items:center;justify-content:center;padding-right:40px} header#siteheader div.inner div.header_right{width:auto;margin-left:0} header#siteheader div.inner div.header_right h1{width:100px} header#siteheader div.inner div.nav_box{position:fixed;left:0;bottom:0;z-index:9997;width:100%;padding:5px 6px calc(5px + env(safe-area-inset-bottom));box-sizing:border-box;background:rgba(255,255,255,.96);box-shadow:0 -2px 10px rgba(0,0,0,.12);justify-content:space-between;gap:6px} header#siteheader div.inner div.nav_box div.tel_btn{width:auto;flex:1} header#siteheader div.inner div.nav_box div.reserve_btns{width:auto;flex:2;gap:6px} header#siteheader div.inner div.nav_box div.reserve_btns div.reserve_btn_wrap a,header#siteheader div.inner div.nav_box div.tel_btn a{width:100%} header#siteheader div.inner div.nav_box .c-hbtn--tel,header#siteheader div.inner div.nav_box .c-hbtn--mail,header#siteheader div.inner div.nav_box .c-hbtn--line{display:flex;align-items:center;justify-content:center;gap:6px;height:52px;aspect-ratio:auto;border-radius:6px} header#siteheader div.inner div.nav_box .c-hbtn__sp{display:flex !important;align-items:center;justify-content:center;gap:6px} header#siteheader div.inner div.nav_box .c-hbtn__ico,header#siteheader div.inner div.nav_box .c-ico--hand{position:static !important;left:auto !important;top:auto !important;width:20px !important;transform:none !important} header#siteheader div.inner div.nav_box .c-hbtn__label,header#siteheader div.inner div.nav_box .c-hbtn__splabel{position:static !important;left:auto !important;top:auto !important;transform:none !important;font-size:13px !important;letter-spacing:0 !important} } @media only screen and (min-width: 769px){ header#siteheader{height:auto} } header#siteheader div.inner div.header_right{align-items:center} header#siteheader div.inner div.header_right h1{flex-shrink:0;width:200px} @media only screen and (max-width: 768px){ header#siteheader div.inner div.header_right h1{width:100px} } header#siteheader div.inner div.header_right a.blank_btn{width:auto;flex-shrink:0} @media only screen and (max-width: 768px){ header#siteheader div.inner div.header_right a.blank_btn{width:auto;height:29px;margin:0 4px 0 8px;border-radius:4px} } header#siteheader div.inner div.header_right a.blank_btn span{white-space:nowrap;padding:0 24px 0 14px} @media only screen and (max-width: 768px){ header#siteheader div.inner div.header_right a.blank_btn span{height:29px;white-space:nowrap;padding:0 13px 0 8px;font-size:10px;line-height:1.2} header#siteheader div.inner div.header_right a.blank_btn span br{display:none} } header#siteheader div.inner div.header_right a.blank_btn--more{margin-left:0;background-color:#35a500} /* ---- srv_assets-ym3__fixes.css ---- */ @media screen and (max-width: 768px) { .c-hbtn--tel .c-ico--hand{display: none !important;} .c-hbtn--tel .c-hbtn__sp::before{content: ""; display: block; width: 20px; height: 20px; flex: 0 0 auto; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center/contain; mask: url("data:image/svg+xml;utf8,") no-repeat center/contain;} } @media screen and (min-width: 769px) and (max-width: 936px) { header#siteheader div.inner div.nav_box{position:fixed;left:0;bottom:0;z-index:9997;width:100%;padding:5px 6px calc(5px + env(safe-area-inset-bottom));box-sizing:border-box;background:rgba(255,255,255,.96);box-shadow:0 -2px 10px rgba(0,0,0,.12);justify-content:space-between;gap:6px} header#siteheader div.inner div.nav_box div.tel_btn{width:auto;flex:1} header#siteheader div.inner div.nav_box div.reserve_btns{width:auto;flex:2;gap:6px} header#siteheader div.inner div.nav_box div.reserve_btns div.reserve_btn_wrap a,header#siteheader div.inner div.nav_box div.tel_btn a{width:100%} header#siteheader div.inner div.nav_box .c-hbtn--tel,header#siteheader div.inner div.nav_box .c-hbtn--mail,header#siteheader div.inner div.nav_box .c-hbtn--line{display:flex;align-items:center;justify-content:center;gap:6px;height:52px;aspect-ratio:auto;border-radius:6px} header#siteheader div.inner div.nav_box .c-hbtn__sp{display:flex !important;align-items:center;justify-content:center;gap:6px} header#siteheader div.inner div.nav_box .c-hbtn__ico,header#siteheader div.inner div.nav_box .c-ico--hand{position:static !important;left:auto !important;top:auto !important;width:20px !important;transform:none !important} header#siteheader div.inner div.nav_box .c-hbtn__label,header#siteheader div.inner div.nav_box .c-hbtn__splabel{position:static !important;left:auto !important;top:auto !important;transform:none !important;font-size:13px !important;letter-spacing:0 !important} header#siteheader div.inner div.nav_box{position:fixed;left:0;bottom:0;z-index:9997;width:100%;padding:5px 6px calc(5px + env(safe-area-inset-bottom));box-sizing:border-box;background:rgba(255,255,255,.96);box-shadow:0 -2px 10px rgba(0,0,0,.12);display:flex;justify-content:space-between;gap:6px} header#siteheader div.inner div.nav_box{align-items:stretch;gap:7px} header#siteheader div.inner div.nav_box .reserve_btns{flex:2 1 0;min-width:0} header#siteheader div.inner div.nav_box .reserve_btn_wrap{display:flex;gap:7px;height:100%} header#siteheader div.inner div.nav_box .reserve_btn_wrap>a{flex:1 1 0;min-width:0} header#siteheader div.inner div.nav_box .tel_btn{flex:1 1 0;min-width:0;order:2} header#siteheader div.inner div.nav_box .tel_btn>a{display:block;height:100%} header#siteheader div.inner div.nav_box a.mail_btn, header#siteheader div.inner div.nav_box a.line_btn, header#siteheader div.inner div.nav_box .tel_btn>a{height:57px;border-radius:4px;color:#fff;text-decoration:none;overflow:hidden} header#siteheader div.inner div.nav_box a.mail_btn{background:#b3523c} header#siteheader div.inner div.nav_box a.line_btn{background:#61ae5c} header#siteheader div.inner div.nav_box .tel_btn>a{background:#747171} header#siteheader div.inner div.nav_box .c-hbtn{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;aspect-ratio:auto;background:none;color:#fff} header#siteheader div.inner div.nav_box .c-hbtn__pc, header#siteheader div.inner div.nav_box .c-hbtn__arrow{display:none} header#siteheader div.inner div.nav_box .c-hbtn__sp{position:static;display:flex;align-items:center;gap:5px} header#siteheader div.inner div.nav_box .c-hbtn__ico, header#siteheader div.inner div.nav_box .c-ico{position:static;left:auto;top:auto;flex:0 0 auto;width:20px;height:20px;transform:none} header#siteheader div.inner div.nav_box .c-hbtn__label, header#siteheader div.inner div.nav_box .c-hbtn__splabel{position:static;left:auto;top:auto;font-size:14px;line-height:1;white-space:nowrap;transform:none;color:#fff} } @media screen and (min-width: 769px) and (max-width: 936px) { header#siteheader div.inner div.nav_box{max-width: 430px; left: 0; right: 0; margin-left: auto; margin-right: auto;} header#siteheader div.inner div.nav_box .c-hbtn--tel{aspect-ratio:1/1;background:#9c9c9c;color:#fff} header#siteheader div.inner div.nav_box .c-hbtn--tel .c-hbtn__pc{display:none} header#siteheader div.inner div.nav_box .c-hbtn--tel .c-hbtn__sp{display:block} header#siteheader div.inner div.nav_box .c-hbtn--tel .c-ico--hand{position:absolute;left:30cqw;top:16.3636cqw;width:40cqw} header#siteheader div.inner div.nav_box .c-hbtn--tel .c-hbtn__splabel{position:absolute;left:50%;transform:translateX(-50%);top:67.4545cqw;font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;font-size:17.2727cqw;font-weight:500;line-height:1;letter-spacing:-0.2273cqw;white-space:nowrap} header#siteheader div.inner div.nav_box .c-hbtn--mail, header#siteheader div.inner div.nav_box .c-hbtn--line{aspect-ratio:1/1;border-radius:0} header#siteheader div.inner div.nav_box .c-hbtn--mail .c-hbtn__arrow, header#siteheader div.inner div.nav_box .c-hbtn--line .c-hbtn__arrow{display:none} header#siteheader div.inner div.nav_box .c-hbtn--mail .c-hbtn__label, header#siteheader div.inner div.nav_box .c-hbtn--line .c-hbtn__label{left:50% !important;transform:translateX(-50%);font-family:"Noto Serif JP","Shippori Mincho","游明朝",YuMincho,"ヒラギノ明朝 ProN W3",serif;font-size:17.2727cqw;font-weight:500;top:67.4545cqw} header#siteheader div.inner div.nav_box .c-hbtn--mail{background:#ef7000} header#siteheader div.inner div.nav_box .c-hbtn--mail .c-hbtn__ico{left:30cqw;top:17.2727cqw;width:40.9091cqw} header#siteheader div.inner div.nav_box .c-hbtn--mail .c-hbtn__label{letter-spacing:-0.3636cqw} header#siteheader div.inner div.nav_box .c-hbtn--line{background:#35a500} header#siteheader div.inner div.nav_box .c-hbtn--line .c-hbtn__ico{left:26.3636cqw;top:13.6364cqw;width:48.1818cqw} header#siteheader div.inner div.nav_box .c-hbtn--line .c-hbtn__label{letter-spacing:.8182cqw} .gnav__list{flex-wrap: wrap; justify-content: center;} .gnav__link{padding: 0 12px; font-size: 13px;} } @media screen and (min-width: 769px) { .gnav-wrap{background: #f7f2e8; border-top-color: #d8cdb5; box-shadow: inset 0 -1px 0 #e6ded0;} .gnav__item + .gnav__item{border-left: none;} .gnav__item + .gnav__item::before{content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: #cbbb9c;} .gnav__link{position: relative;} .gnav__link::before{content: ""; position: absolute; left: 1.15em; right: 1.15em; bottom: 7px; height: 2px; background: currentColor; transform: scaleX(0); transition: transform .18s ease;} .gnav__link:hover::before{transform: scaleX(1);} } @media screen and (min-width: 783px) { body.admin-bar header#siteheader{top: 32px;} } header#siteheader .header_right a.blank_btn--lp, header#siteheader .header_right a.blank_btn--more, a.c-more__btn, .column__cat{background-color: #55743a !important;} .c-hbtn__label, .c-cta__label{font-weight: 700 !important;} header#siteheader .header_right a.blank_btn{background-color: #cc3838 !important;} @media screen and (min-width: 769px) { #siteheader .reserve_btns{display: none !important;} #siteheader .nav_box{justify-content: flex-end !important; gap: 0 !important;} #siteheader .tel_btn{margin-right: 0 !important;} } @media screen and (min-width: 769px) { header#siteheader .header_right a.blank_btn{border-radius: 999px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;} header#siteheader .header_right a.blank_btn:hover{transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0, 0, 0, .2); filter: brightness(1.06);} .gnav-wrap{border-top: 1px solid #e6ded0;} .gnav__list{align-items: stretch;} .gnav__item + .gnav__item{border-left: 1px solid #e0d7c4;} .gnav__link{position: relative; padding: 0 20px !important; display: flex; align-items: center; transition: color .2s ease, background-color .2s ease;} .gnav__item:hover > .gnav__link{background-color: rgba(0, 0, 0, .03);} } @media screen and (min-width: 769px) { .gnav__item:hover > .gnav__link{color: #2e8a06;} } @media screen and (min-width: 769px) { .gnav__link{padding: 0 20px !important;} .gnav__item{flex: 0 1 auto;} header#siteheader div.inner div.header_right{flex: 1 1 auto !important; justify-content: flex-start !important; padding-right: 56px !important;} header#siteheader div.inner div.header_right h1{margin-right: 0 !important;} header#siteheader div.inner div.header_right a.blank_btn:first-of-type{margin-left: auto !important;} header#siteheader div.inner div.header_right a.blank_btn + a.blank_btn{margin-left: 12px !important;} header#siteheader div.inner div.nav_box{flex: 0 0 auto !important;} } @media screen and (min-width: 769px) { header#siteheader{box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 6px 16px rgba(0, 0, 0, .045);} header#siteheader div.inner div.header_right h1 a{display: inline-block; transition: opacity .2s ease;} header#siteheader div.inner div.header_right h1 a:hover{opacity: .72;} header#siteheader .header_right a.blank_btn::after{transition: transform .22s ease;} header#siteheader .header_right a.blank_btn:hover::after{transform: translateX(3px);} header#siteheader .tel_btn .c-hbtn__note{letter-spacing: .01em; opacity: .82;} .gnav__item + .gnav__item{border-left: 1px solid rgba(0, 0, 0, .09);} .gnav__link{font-weight: 500;} .gnav__sub{border-radius: 0 0 10px 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, .16); overflow: hidden; border: none !important;} .gnav__sub li a{transition: background-color .18s ease, padding-left .18s ease;} .gnav__sub li a:hover{padding-left: 22px;} } @media screen and (min-width: 769px) { header#siteheader div.inner div.header_right h1{margin-right: 80px !important;} header#siteheader div.inner div.header_right a.blank_btn + a.blank_btn{margin-left: 18px !important;} } @media screen and (max-width: 782px) { body.admin-bar header#siteheader{top: 46px;} } /* 固定ヘッダーのぶん、LP本体を下げる（TOPと同じ考え方） */ body > section.wrapper { padding-top: 133px; } @media screen and (max-width: 768px) { body > section.wrapper { padding-top: 55px; } } /* ヘッダー内の画像を枠に収める（LP側のCSSには img のリセットが無いため） */ #siteheader img, #siteheader svg { max-width: 100%; height: auto; } #siteheader div.inner div.header_right h1 a { display: block; } #siteheader div.inner div.header_right h1 img { width: 100%; height: auto; } #siteheader .c-hbtn svg, #siteheader .c-ico { height: auto; } /* 旧ヘッダー（120px）のために .container に入っていた逃がしを外す。 固定ヘッダーぶんは上の section.wrapper 側で確保している。 */ @media screen and (min-width: 769px) { body > section.wrapper > div.container { padding-top: 0 !important; } }