@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(--white); background-size: cover;/* 背景画像が要素の全体を比率保持のまま隙間なく覆う */ background-position: center; } /* 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; } /* DESIGN ================================================ */ #siroari-setumei{ margin: 3rem 2rem 5rem; text-align: center; } #gokiburi, #kuroari-03, #hachi-04, #mukade-05, #hae-06, #nezumi-01, #hakubi-02, #itachi-03, #bad-04, #araiguma-05, #tyourui-06 { margin-top: 300px; } section { max-width: 900px; margin-left: auto; margin-right: auto; } .batu { text-align: right; } .batu a img { width: 50px; opacity: 1.0; transition: opacity 0.3s ease; margin-bottom: 20px; } .batu a img:hover { opacity: 0.5; } /* ★★★ スマートフォン側のレイアウト（重ね合わせ）★★★ */ .matome { /* 重ね合わせの基準点 */ position: relative; /* スマホではFlexboxのルールを適用しない（position優先） */ display: block; } .gazou { width: 100%; max-width: 600px; border-radius: 20px; filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4)); margin: 0 auto; } .aikon { /* 絶対配置で画像に重ねる設定を復活 */ display: flex; align-items: center; position: absolute; top: 65%; left: 5%; } .aikon img { width: 30vw; margin-right: 15px; /* アイコンと文字の横並びを維持 */ filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4)); } .aikon h1 { color: var(--white); /* 画像に重ねるため白色に戻す */ } .p-setumei { text-align: justify; margin-top: 25px; } .tel { font-family: "Manrope"; font-size: 30px; font-weight: 700; background-color: var(--menu); display: inline-block; margin: 30px auto 0; padding: 2px 20px; border-radius: 10px; } .tel a { color: var(--white); } /* DESKTOP SIZE ================================================ */ @media(min-width: 750px){ /* Design */ #siroari-setumei{ margin: 5rem auto 5rem; text-align: center; max-width: 900px; } .batu { margin-left: 2rem; margin-right: 2rem; } /* ★★★ PC側のレイアウト（画像と説明文の下にPタグ）★★★ */ .matome { /* 横並びを強制 */ display: flex; align-items: flex-start; gap: 50px; margin-bottom: 50px; margin-left: 2rem; margin-right: 2rem; /* position: absolute の設定を解除 */ position: static; } .gazou { width: 350px; flex-shrink: 0; margin: 0; } .aikon { /* 画像に重ねないため、絶対配置を解除 */ position: static; flex-grow: 1; /* 残りの幅を使う */ /* PCではアイコンとH1の縦並び */ flex-direction: column; align-items: center; } .aikon img { width: 300px; /* 固定サイズに戻す */ margin-right: 0; } .aikon h1 { color: var(--grey); /* PCでは背景が白なので文字色を濃くする */ margin-top: 10px; font-size: 30px; } .p-setumei { /* matomeの外にあるため、matomeの次の行から表示される（これが求めている配置） */ text-align: justify; margin: 25px 2rem 0; } } #fade-overlay { /* 常に画面全体を覆い、最前面に表示 */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; /* ページ遷移中の色（白など） */ z-index: 9999; /* 他の要素より手前に表示 */ /* アニメーション設定 */ transition: opacity 1s ease; /* 0.5秒かけて不透明度が変化 */ /* 初期状態: 完全に見えている状態（これからフェードアウトさせるため） */ opacity: 1; } /* ページ読み込み完了後、bodyタグに追加されるクラス */ .loaded #fade-overlay { opacity: 0; /* 透明になり、コンテンツが見えるようになる（フェードイン） */ pointer-events: none; /* 透明になったらクリックを妨げないようにする */ }