@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", "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: 17px; } 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 ================================================ */ .teiki-gokisp { display: block !important; } .teiki-gokipc { display: none !important; } .total { max-width: 900px; margin: 0 auto; /* 箱を中央に */ padding-top: 100px; /* ヘッダーと重ならないよう広めに設定 */ overflow: hidden; /* ★追加：はみ出しを強制カット */ } .title { width: 100%; } /* 画像を900pxいっぱいに広げる設定 */ .title img { display: block; width: 100%; height: auto; } .taisaku-t { font-family: "Noto Sans JP"; color: var(--menu); text-align: left; margin: 30px 2rem 100px; } .virus { text-align: center; } .virus img { width: 200px; } .virus h3 { font-weight: 700; font-size: 30px; color: var(--menu); } .virus p { font-weight: 500; font-size: 20px; color: var(--grey); } .kin { text-align: center; margin: 100px 0 0; } .kin img { width: 200px; } .kin h3 { font-weight: 700; font-size: 30px; color: var(--menu); } .kin p { font-weight: 500; font-size: 20px; color: var(--grey); } .shikaku { text-align: center; margin: 100px 0 0; } .shikaku img { width: 200px; } .shikaku h3 { font-weight: 700; font-size: 30px; color: var(--menu); } .shikaku p { font-weight: 500; font-size: 20px; color: var(--grey); } .pr-hukuro { text-align: center; width: 100%; margin-top: 5px; } .pr-ue { max-width: 80vw; margin: 50px 2rem 50px; font-size: 30px; padding: 15px 20px 15px 20px; display: inline-block; border: 2px solid var(--menu); border-radius: 10px; color: var(--menu); text-align: left; box-sizing: border-box; } .purasu { width: 80px; } .pr-shita { max-width: 80vw; margin: 50px 2rem 50px; font-size: 30px; padding: 15px 20px 15px 20px; display: inline-block; background-color: var(--menu); border-radius: 10px; color: var(--white); text-align: left; box-sizing: border-box; } .purasu { display: block; margin-left: auto; margin-right: auto; } .pr-hukuro p { font-size: 17px; margin: -20px 2rem 40px; font-weight: 500; } /* FOOTER ================================================ */ footer { margin-top: 50px; padding-top: 0; } .footer-renraku{ text-align: center; margin-left: 2rem; margin-right: 2rem; } .footer-renraku h3 { font-size: 20px; margin: 0 1rem 2rem; 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 ------------------------------------------ */ .teiki-gokisp {display: none !important;} .teiki-gokipc {display: block !important;} .aikon-hukuro { display: flex; justify-content: space-between; margin: 0 2rem 0; } .kin { margin: 0 0 0; } .shikaku { margin: 0 0 0; } .pr-ue { font-size: 35px; /* PCでは大きく */ max-width: 800px; /* 広がりすぎないように制限 */ padding: 20px 40px; } }