@charset "UTF-8"; /* コード文字化け防止 */ /* GENERAL STYLING memo (ゼネラルスタイリング)表示の差異をなくす場所 ・font-size: 100%; ユーザーが設定した文字サイズを正しく反映 ・scroll-behavior: smooth; スムーズスクロール アニメーションをスムーズにする ================================================ */ html { font-size: 100%; /* ユーザーが設定した文字サイズを正しく反映 */ scroll-behavior: smooth; /* スムーズスクロール アニメーションをスムーズにする */ } body { font-family: "Noto Sans JP", "Mochiy Pop One", "M PLUS 1p", "Manrope", sans-serif ; color: var(--grey); background-color: var(--brey); background-size: cover;/* 背景画像が要素の全体を比率保持のまま隙間なく覆う */ background-position: center; /*min-height: 100vh;*/ background-image: url(../images/back-fot.png); } /* COLORS memo （カラーズ） rootは、CSS変数（カスタムプロパティ）を定義するための特別なセレクタで、 HTML文書の最上位要素（要素）を指します。サイト全体のテーマカラーや フォントサイズなどをここでまとめて定義することで、 コードの再利用性が高まり、保守・管理が非常にしやすくなるため、 CSSの設計（プログラム）で広く使われています。 ================================================ */ :root { --brey: #e3fcff; --white: #fff; --menu: #12688a; --grey: #432; --yellow:#ffdd00; } /* COMMON(共通） ================================================ */ p { line-height: 1.7; font-size: 20px; } img { max-width: 100%; } nav { font-family: "Manrope"; font-weight: bold; font-size: 20px; } h3 { font-size: 18px; } /* Layout */ .wrapper { max-width: 1000px; width: 100%; margin: 0 auto; padding: 0 1rem; } a { text-decoration: none; } /* HEADER ================================================ */ header { background: var(--white); padding: .3rem 0; position: fixed; width: 100%; z-index: 1; } header .wrapper { display: flex; align-items: center; justify-content: space-between; } .rogo { width: 250px; } nav a { text-decoration: none; color: var(--menu); font-size: 25px; font-family: "M PLUS 1p"; } .btn-menu { border: 1px solid var(--menu); color: var(--menu); padding: .5rem 1rem; } /* .main-nav の absolute の基準にする */ /* nav.page-nav { position: relative;} */ .main-nav { background: var(--white); width: 0; position: absolute; z-index: 2; top: 100%; right: 0; overflow: hidden; transition: .5s; list-style: none; } .main-nav.open-menu { width: 100%; } .main-nav li { text-align: center; margin: 2rem 0; } .main-nav a { display: block; } /* DESIGN ================================================ */ /* background section */ .cover { background-size: contain; /* 👈 修正点1: containに変更。画像を歪ませず、要素内に全体が収まるようにする */ background-position: center top; /* 👈 修正点2: 背景画像を上端中央に配置する */ background-repeat: no-repeat; /* 👈 追加点3: 画像が繰り返されるのを防ぐ */ /* min-heightを適切な値に戻す（コンテンツが表示される空間を確保） */ min-height: 80vh; /* 👈 修正点4: 少なくとも画面の高さの80%を確保 */ } .cover-home { background-image: url(../images/backfot-sp.png); /* 3分割の背景画像は維持 */ } .about { margin: 0 auto; padding-top: 45vw; text-align: center; } .top-title img { /* ✨ 修正：画像全体を小さくする */ width: 90vw; /* 縮小したいサイズを設定 */ /* display: block; と margin: 0 auto; は、レイアウト崩れの原因になるため削除または修正 */ display: block; margin: 0 auto; } .titlelogo-sp {display: block !important;} .titlelogo-pc {display: none !important;} .top-tel { font-family: "Manrope"; font-size: 2.5rem; padding: 1px 2px; background-color: var(--menu); /*display: inline-block;*/ /* ブロック要素なのでバックグラウンドのサイズを変更したいときはインライン要素に */ } .about h3 a { color: var(--brey); } /* botn /............................................... */ .botan-3 {display: none !important;} .botan { display: flex; justify-content: space-around; margin-top: 5vw; padding: 0 2rem 0; } .botan-2 { display: flex; flex-direction: column; width: 10rem; } .botan-3 { display: flex; flex-direction: column; width: 10rem; } .waku { display: inline-block; font-size: 1.2rem; font-weight: 500; background-color: #12688a; color: #fff; border-radius: 8px; padding: .6rem; } .botan-s { padding: 1rem 2rem 0 ; font-size: 1.2rem; font-weight: bold; line-height: 1.7; color: #12688a; } .botan-s { padding-bottom: 10vw; border-bottom: thin dashed #12688a; text-align: center; margin: 0 2rem 0; } /* 紹介 ................................................ */ .syoukai{ position: relative; text-align: center; margin: 5rem 2rem 5rem 2rem; padding-bottom: 5rem; border-bottom: thin dashed #12688a; } .syoukai h3 { font-size: 7vw; /* 　vw　文字の比率を反映させてブラウザサイズに合わせる */ font-family: "Mochiy Pop One"; color: #12688a; margin-bottom: 2rem; } .syoukai p { text-align: left; margin: 2rem 0 2rem 0; } .syoukai-1 { width: 100%; object-fit: cover; display: block; } /* 害虫害獣について ........................................ */ .section-setumei {display: block !important;} .section-setumei2 {display: none !important;} .sectionpot1 {display: block !important;} .sectionpot2 {display: none !important;} .section { /* 1. 子要素(.section-bak)の絶対配置の基準点を設定 */ /*position: relative;*/ /* 既存の余白は維持 */ margin: 0 2rem 5rem 2rem; border-bottom: thin dashed #12688a; } .section h3 { font-family: "Noto Sans JP"; font-weight: bold; font-size: 7vw; color: #12688a; text-align: center; margin-bottom: 1rem; } .section-bak { display: block; /* 2. 絶対配置で親要素の余白を無視 */ position: absolute; /* 3. 幅をブラウザ全体 (100vw) に設定 */ width: 100vw; /* 4. 画像を画面中央に配置し、横スクロールを防ぐ */ left: 50%; transform: translateX(-50%); /* 既存のmargin-bottomを維持 */ margin-bottom: -40vw; } .section-setumei { margin-top: 18vw; } /* ★★★害虫について★★★ */ .mushi { margin: 2rem 0 5rem ; text-align: center; } .mushi h4 { font-family: "Noto Sans JP"; font-weight: bold; font-size: 6vw; margin-bottom: .5rem; text-align: left; } .mushi p { font-family: "Noto Sans JP"; line-height: 1.7; text-align: justify; margin-bottom: 2rem; } .mushi img { margin-bottom: 1rem; } .waku2 { display: inline-block; font-size: 1,5vw; background-color: #12688a; color: #fff; border-radius: 8px; padding: .75rem 1.5rem; } /* ★★★害獣について★★★ */ .doubutu { margin: 2rem 0 5rem ; text-align: center; } .doubutu h4 { font-family: "Noto Sans JP"; font-weight: bold; font-size: 6vw; margin-bottom: .5rem; text-align: left; } .doubutu p { font-family: "Noto Sans JP"; line-height: 1.7; text-align: justify; margin-bottom: 2rem; } .doubutu img { margin-bottom: 1rem; } .waku2 { display: inline-block; font-size: 25px; background-color: #12688a; color: #fff; border-radius: 8px; padding: .75rem 1.5rem; } /* ★★★メンテナンス★★★ */ .mente { margin: 2rem 0 5rem ; text-align: center; } .mente h4 { font-family: "Noto Sans JP"; font-weight: bold; font-size: 6vw; text-align: left; } .kome { font-size: 4vw; } .mente p { font-family: "Noto Sans JP"; line-height: 1.7; text-align: justify; margin-bottom: 2rem; } .mente img { margin-bottom: 1rem; } .waku2 { display: inline-block; font-size: 1,5vw; background-color: #12688a; color: #fff; border-radius: 8px; padding: .75rem 1.5rem; } /* 募集 ........................................ */ .bosyu { text-align: center; margin: 0 2rem 8rem ; margin-bottom: 5rem; } .bosyu img { margin-bottom: 2rem; } /* FOOTER ================================================ */ footer { padding-top: 100px; border-top: 1px dashed var(--menu); } .footer-renraku{ text-align: center; margin-left: 2rem; margin-right: 2rem; } .footer-renraku h3 { margin: 0 1rem .5rem; color: var(--menu); } .footer-renraku img { width: 300px; } .footer-line { margin-top: 2rem; } .footer-renraku p { margin: 1.5rem auto 3rem; text-align: left; max-width: 700px; } .footer-sns { text-align: center; } .footer-sns img { width: 300px; } .footer-pesuto { margin-top: 2rem; } .copyright { background-color: var(--menu); text-align: center; padding: 2rem 0; margin-top: 3rem; color: var(--white); } /* DESKTOP SIZE ================================================ */ @media(min-width: 750px){ /* common --------------------------------------------*/ /* Layout */ .wrapper { padding: 0 2rem; } /* Header --------------------------------------------*/ .btn-menu { display: none; } .main-nav { width: 100%; position: static; display: flex; } .main-nav li { margin: 0 0 0 1.5rem; } nav a { font-size: 1rem; } /* Footer------------------------------------------- */ .footer-tel { margin-right: 5rem; } .footer-renraku h3 { font-size: 23px; } .footer-sns { margin-top: -30px; } .footer-inst { margin-right: 5rem; } /* Design */ /* background article -------------------------------------------------- */ .titlelogo-sp {display: none !important;} .titlelogo-pc {display: block !important;} .cover { min-height: auto; /* 高さをコンテンツに合わせて最低限の高さに */ padding-bottom: 5rem; /* 背景画像の下端とコンテンツの下端の間に適切な余白を追加 */ } .cover-home { background-image: url(../images/backfot-pc.png); /* 3分割の背景画像は維持 */ background-size: 90% auto; } .about { padding-top: 20vw; max-width: 800px; } .top-title img { width: 70vw; } /* botn -------------------------------------------------------------- */ .botan-3 {display: block !important;} .botan { display: flex; justify-content: center; margin-top: 5vw; padding: 0 2rem 0; } .botan-2 { margin-right: 5vw; width: 12rem; } .botan-3 { width: 12rem; } .back-fot3 { margin-top: -1rem; margin-bottom: -25vw; } .title-rogo2 { margin: 0 10vw 0; } .waku { font-size: 1.5rem; } .botan-s { font-size: 2rem; } /* 紹介 ------------------------------------------------------------------- */ .syoukai-1{ max-width: 800px; margin-left: auto; /* 中央寄せ */ margin-right: auto; /* 中央寄せ */ } .syoukai p { max-width: 800px; /* PCで広がりすぎないように最大幅を設定 */ width: 90%; /* 親要素の90%の幅に設定 */ margin-left: auto; /* 中央寄せ */ margin-right: auto; /* 中央寄せ */ padding: 1rem; /* テキストと枠線の間に余白を追加 */ background-color: #f7e658; /* ★ 黄色系の背景色 */ border-radius: 8px; /* 角を丸くする */ font-size: 17px; } .syoukai h3 { font-size: 60px; } /* 害虫害獣について -------------------------------------------------------- */ .section-bak {display: none !important;} .section-setumei {display: none !important;} .section-setumei2 {display: block !important;} .sectionpot1 {display: none !important;} .sectionpot2 {display: block !important;} .section { margin-left: 2rem; margin-right: 2rem; } .section-yohaku { max-width: 800px; margin: 0 auto 0; } .section h3 { font-size: 3rem; } /* ここは害虫~定期までのレスポンシブ */ .mushi h4 { font-size: 3vw; } .doubutu h4{ font-size: 3vw; } .mente h4 { font-size: 3vw; } .mente p { font-size: 20px; } /* ★ 画像とテキストを横並びにする Flexbox 設定 */ .mushi-content, .doubutu-content, .mente-content { display: flex; /* 横並びにする */ gap: 30px; /* 画像とテキストの間の隙間 */ align-items: center; /* 垂直方向の配置を上端に揃える */ } /* 画像の幅設定 */ .mushi-content img, .doubutu-content img, .mente-content img { width: 50%; /* 画像を左側40%に固定 */ height: 35rem; /* ★ 追加: Flexコンテナの高さに合わせる */ object-fit: cover; /* ★ 追加: 画像が引き延ばされて歪むのを防ぎ、枠いっぱいに表示 */ /*max-height: 320px;*/ /* ★ 画像が高くなりすぎないように制限 (任意) */ } /* テキストグループの設定 (横並びの右側) */ .text-group { width: 50%; height: 35rem; background-color: #f7e658; padding: 1.5rem;/* 上下のパディングを増やしてバランスを取る */ border-radius: 8px; display: flex; flex-direction: column; justify-content: center; /* 垂直方向の中央寄せは維持 */ /* ★ 修正: 水平方向のコンテンツを左端に揃える */ align-items: flex-start; /* ★ center から flex-start に変更 */ } /* テキストへの黄色背景の設定 */ .text-group p { font-size: 17px; line-height: 2; margin-bottom: 1.5rem; text-align: left; /* ★ 左揃えに修正 */ } /* ボタンの配置調整 (text-group 内で中央寄せにならないように) */ .text-group .waku2 { display: inline-block; /* インラインブロックに戻し */ margin-top: 0; /* ボタン自体は中央寄せ(align-items: center;)で寄るため、align-selfは削除 */ } /* 募集 -------------------------------------------------------- */ .bosyu { max-width: 800px; margin: 0 auto 5rem; } }