@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 ================================================ */ .cover { background-size: contain; /* 👈 修正点1: containに変更。画像を歪ませず、要素内に全体が収まるようにする */ background-position: center top; /* 👈 修正点2: 背景画像を上端中央に配置する */ background-repeat: no-repeat; /* 👈 追加点3: 画像が繰り返されるのを防ぐ */ min-height: 80rem; } .cover-home { background-image: url(../images/access-sp.png); } .title { padding-top: 50vw; margin: 0 2rem 0; } .title h2 { font-family: "Noto Sans JP"; font-size: 40px; color: var(--menu); } .title p { font-family: "Manrope"; color: var(--menu); } .title-koumoku { margin: 70px 2rem 0; font-size: 20px; color: var(--menu); } /* FOOTER ================================================ */ footer { padding-top: 50px; } .footer-renraku{ text-align: center; margin-left: 2rem; margin-right: 2rem; } .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 */ .arti { max-width: 1000px; margin: 0 auto 0; } .cover-home { background-image: url(../images/access-pc.png); background-size: 1500px; } .title { padding-top: 25rem; margin: 0 2rem 0 2rem; } .title h2 { font-size: 5vw; font-size: 5rem; } }