全体に、左右の内側余白を指定 */ } .subBody footer { margin-top: 50px; /*background: url() no-repeat right top/200%; 画像の近くに画像を入れたいので、背景として指定。 */ /* margin-top: 60px; */ /* padding-top: 68px; */ /* 背景表示を考えて内側に余白を入れて、外側の上にも少し余白を指定する */ } footer p { background-color: #ffd1e6; text-align: center; padding: 3px; width: 100%; } /* conceptページ固有の指定　↓ --------------------------------- */ .conceptDetailSec p img { /* 各

の写真画像を調整。全て1920x2400 */ height: 180px; width: 100%; /* ★ 縦幅が大きいからと高さを小さくすると、比率を保って横幅も小さくなる。 widthを改めて元と同じ100％にする。画像が横に伸びて歪むので、以下で修正 */ object-fit: cover; /* ボックスに対する、画像等の表示方法を指定。 background-sizeに似た形、↑だと縦横比を保って領域いっぱいに表示される */ object-position: center 90%; /* ボックスに対する画像等の配置を、真ん中の下方に指定。 background-positionの様に、表示するX・Y軸の基準位置を指定 */ } .conceptDetailSec .text { /* テキストの大きさ、行の高さ（行間）を調整 */ font-size: 12px; line-height: 1.8; } .conceptDetailSec .photo { margin-bottom: 14px; /* 写真とテキストの間の余白をつける */ } .conceptDetailSec { margin-bottom: 50px; /* テキストと次の

の見出しの間の余白をつける */ } /* MENUページ固有の指定　↓ ---------------------------------- */ .menuList { display: flex; /* リストの画像が、blockのため縦に並んでいるので、横並びにするこれだとflexのあまり4つの

画像全て横並びなので、修正する↓ */ flex-wrap: wrap; /* ★ 折り返しできる様に指定。これだけだと、画像が元の大きさに戻ろうと画面いっぱいに広がってしまうため、↓.menuList li で要素の横幅を指定する。*/ justify-content: space-around; /* 「両端の余白＝子要素間の余白の半分」に指定 */ } .menuList li { flex-basis: 42%; /* ★ 個々の

の横幅を指定し、丁度2つだけ横並びになるようにする 50％で2つ並び、33％で3つ並ぶ。↑は8％の余白を引いた数。 */ margin-bottom: 28px; /* リストの画像同士、下の余白も調整 */ } .menuList li img { filter: drop-shadow(3px 4px 3px #dddddd); /* 画像の透過箇所に対応した影をつける。（X軸の位置　Y軸の位置　ぼかし　影の色） */ } .menuDetailSec { margin-bottom: 50px; margin-top: 50px; /* 各

の下の余白をつける。 */ } .menuDetailSec p { font-size: 12px; text-align: center; line-height: 1.8; letter-spacing: .05em; line-height: 2; margin-bottom: 30px; /* 他見出しと同様中央寄せにして、文字は小さめ、下の

との間に余白指定、文字の間隔を少し空け、行の高さ（行間）を少し大きめに指定。 */ } /* INFOページ固有の指定　↓ ---------------------------------- */ .map { margin-bottom: 100px; } .map iframe { /* Google mapsリンクを入れた

のclass */ width: 100%; height: 240px; margin-bottom: 10px; } .photoGarelly { /*

をグリッド化する */ display: grid; grid-template-rows: 50vw 40vw 30vw 30vw 40vw 50vw; /* Y軸。行（縦の連なり）の高さと、何個にするかをVWで指定デバイスの横幅に合わせて、セルの高さを比率で決める事で、縦横比を保ったままレスポンシブ設定にする */ grid-template-columns: 50% 50%; /* X軸。列（横の連なり）の幅と、何個にするかを％で指定 */ } .item1 { /*
- のリスト画像の表示を、gridで指定する為のclass */ /* 写真：複数種類のパスタ */ grid-column-start: 1; grid-column-end: 3; /* 列（X横の連なり）のitem1の範囲指定 */ grid-row-start: 1; grid-row-end: 2; /* 行（Y縦の連なり）のitem1の範囲指定 */ } .item2 { /* 写真：斜め上から見た苺ケーキ */ grid-column: 1/2; grid-row: 2/3; } .item3 { /* 写真：上から見たジェノベーゼ */ grid-column: 1/2; grid-row: 3/4; } .item4 { /* 写真：苺のミルクプリン6個*/ grid-column: 2/3; grid-row: 2/4; } .item5 { /* 写真：バジルを散らしたラザニア */ grid-column: 2/3; grid-row: 4/5; } .item6 { /* 写真：フルーツティーのガラスポットとカップ */ grid-column: 2/3; grid-row: 5/6; } .item7 { /* 写真：上から見た沢山のプチフルーツケーキ */ grid-column: 1/2; grid-row: 4/6; } .item8 { /* 写真：フルーツの大皿とシリアル、ラテ、アボカド */ grid-column: 1/3; grid-row: 6/7; } .photoGarelly li img { width: 100%; height: 100%; /* ★ grid内のセルと写真の縦横幅が合っていない所がある為、幅高さを100％に指定 */ object-fit: cover; /* ★ width・heightをgridセル100％にすると縦横比が変わり歪む為、縦横比を保ったまま、指定したwidth・height領域いっぱいに表示されるよう指定 */ } .item8 img { object-position: center 85%; /* ↑のcoverで拡大表示になっている写真の表示位置を変更 */ } .item5 img { object-position: center bottom; } .item1 img { object-position: center top; } .item6 img { object-position: center 35%; } .item3 img { object-position: right top; } /* PCビューのレスポンシブ設定↓ --------------------------------------- */ @media screen and (min-width: 920px) { /* 最低値が920px、つまり920px以上の場合の画面を設定 */ .topPage { display: flex; /* につけたclass。子要素の
  を横並びに指定 */ } /* ↓ flext指定した↑の子要素2つに、基準となる大きさを指定する ↓ */ .topPage header { flex-basis: 38%; } .topPage main { flex-basis: 62%; /* 横幅の比率を変えずに伸縮させる為に、％で指定する */ } /* ↓
  中の
  も横並びにし、更に折り返し表示にして、
  達の大きさを指定 */ .linkLi { display: flex; flex-wrap: wrap; /*
  に作成したclass。flexにして、子要素のはみ出し時の折り返しを指定 */ /* ↓
  と::before疑似要素の指定の後、
  の余白と位置を調整 ↓ */ max-width: 800px; margin: 0 auto; /* リンク全体の幅を決め、marginを左右均等、中央寄せに指定 */ justify-content: space-around; /* 両端の余白は、子要素間の余白の半分で、均等配置 */ } .linkLi li { flex-basis: 47%; /* 折り返した時に、横に2つだけ並ぶ位に大きさの基準を指定 */ margin-bottom: 20px; /* 下が空きすぎなので、少なめに指定 */ } .linkLi::before { content: ""; background: url() no-repeat center/80%; /* 疑似要素を
  のbeforeに表示させる。sizeはcover等ではなく％指定 */ } .topPage main { display: flex; align-items: center; /* ★ 天地中央寄せにする。
  をflexにし、縦方向の位置プロパティで指定 */ } .topPage header { height: 100vh; /* 元の高さ指定が90vhなので、100％に指定 */ margin-bottom: 0px; /* 元のスマホ向け指定の下余白も消しておく */ } /* index以下のページの共通箇所を調整。横幅が画面いっぱいに広がっているので、指定し直す ---------------------- */ .subBody { max-width: 1280px; margin: 0 auto; /* 最大幅を指定し、中央寄せにする */ } .subBody header h1 { font-size: 60px; /* 文字をスマホサイズより大きく指定 */ } .subBody .leadText { font-size: 16px; } .onlySP { /* PCページをCSS指定する時、元のCSSを解除する為のclass */ display: none; /* このclassのついている
  を非表示にして一行にする */ } /* ↓ 共通している見出しの体裁、文字の大きさと余白を調整する */ .subBody h2 { font-size: 34px; margin-bottom: 36px; } .subBody .leadText { font-weight: 18px; margin-bottom: 160px; } .subBody h3 { font-size: 50px; margin-bottom: 40px; } /* ↓ CONCEPTページの各
  を、それぞれgrid化。--------------------- ↓ 子要素（
  と
  のテキストと写真）を調整 ↓ */ .conceptDetailSec { display: grid; grid-template-columns: 40% 60%; grid-template-rows: 360px 360px; /* 指定したい子要素を踏まえ、大きさとセルの個数を設定 */ } .conceptDetailSec h3 { grid-column: 2/3; grid-row: 1/2; } .conceptDetailSec .photo { grid-column: 1/2; grid-row: 1/3; } .conceptDetailSec .text { grid-column: 2/3; grid-row: 2/3; } .conceptDetailSec .photo img { /* スマホ用設定で高さが180pxになっていて.photoが↑で指定したセル全体を覆えていないので、画像に改めて高さを指定 */ height: 720px; } .conceptDetailSec h3 { align-self: flex-end; /* ↑ はflexのプロパティだが、gridでも使える。アイテム自身の縦位置を末尾（下部）に指定。margin-bottomがある為、余白はあり */ } .conceptDetailSec .text { text-align: center; font-size: 16px; /* テキストを少し大きくして、中央寄せにする */ } /* ↓ 真ん中の
  だけレイアウトを逆にしたいので、.reverseを調整 */ .reverse { grid-template-columns: 60% 40%; /* .conceptDetailSecに指定したgridと列の幅を逆に指定 */ } .reverse h3 { grid-column: 1/2; grid-row: 1/2; } .reverse .photo { grid-column: 2/3; grid-row: 1/3; } .reverse .text { grid-column: 1/2; grid-row: 2/3; } /* ↓ MENUページ独自の箇所を調整 ------------------------------------ */ .menuList li { flex-basis: 22%; /* 横並びに2つ表示になるよう44％にしていた所を、4つ表示になるよう修正 */ margin-bottom: 0; } .menuDetailSec { margin-bottom: 160px; /*
  3つにつけたclass、それぞれの間に余白を指定。 */ } .menuDetailSec p { font-size: 16px; } /* ↓ INFOページ独自の箇所を調整 ------------------------------------ */ /*
  gridの
  セルを修正する。 */ .photoGarelly { grid-template-columns: 35% 30% 35%; grid-template-rows: 280px 280px 280px 280px; /* grid-template-columns: 15% 15% 20% 20% 15% 15%; */ /* grid-template-rows: 200px 200px; */ /* grid-template-columns: 30% 20% 30% 20%; */ /* grid-template-rows: 180px 180px 280px; */ } .item1 { /*
  子要素の
  のリスト画像の表示を、gridで指定する為のclass */ /* 写真：複数種類のパスタ */ grid-column: 1/3; /* 列（X横の連なり）のitem1の範囲指定 */ grid-row: 1/2; /* 行（Y縦の連なり）のitem1の範囲指定 */ } .item2 { /* 写真：斜め上から見た苺ケーキ */ grid-column: 1/2; grid-row: 2/3; } .item3 { /* 写真：上から見たジェノベーゼ */ grid-column: 2/3; grid-row: 2/3; } .item4 { /* 写真：苺のミルクプリン6個*/ grid-column: 3/4; grid-row: 1/3; } .item5 { /* 写真：バジルを散らしたラザニア */ grid-column: 2/3; grid-row: 3/4; /* grid-column: 5/6; */ /* grid-row: 1/2; */ } .item6 { /* 写真：フルーツティーのガラスポットとカップ */ grid-column: 3/4; grid-row: 3/4; /* grid-column: 6/7; */ /* grid-row: 1/2; */ } .item7 { /* 写真：上から見た沢山のプチフルーツケーキ */ grid-column: 1/2; grid-row: 3/5; /* grid-column: 4/5; */ /* grid-row: 1/3; */ } .item8 { /* 写真：フルーツの大皿とシリアル、ラテ、アボカド */ grid-column: 2/4; grid-row: 4/5; /* grid-column: 5/7; */ /* grid-row: 2/3; */ } } /* 参考サイトのハンバーガーメニュー
  を設定する。 1. メニューボタンを押すとチェックボックスのON/OFFが切り替わる 2. チェックボックスがONの時のCSSは「:checked」で指定可能 3. チェックボックスがONの時のメニューボタンやメニューのCSSは「:checked」と「~」の組み合わせで指定可能 4. チェックボックスがONの時 ⇒ メニューを表示。メニューボタンを✕に。 5. チェックボックスがOFFの時 ⇒ メニューを非表示。メニューボタンを三本線に。 */ .gMenu { /*
  class。position、位置と幅、レイヤーを指定してメニューを画面上部に固定表示 */ position: fixed; right: 0; top: 0; width: 100%; /* 横幅指定しないと、fixedにした為に『横幅いっぱいの性質』を失ったままになり、右に寄る */ z-index: 99; /* 前側に表示されるよう、レイヤーを上側の数に指定 */ } .gMenu .menu-icon { /* ここからメニューアイコンの設定。アイコンを画面右上に固定する。 labelタグのforの値をのidと同じにする事で、label要素をクリックした時に、 checkboxのON/OFFを切り替えられる。チェックボックスをCSSで非表示にしても動作する */ cursor: pointer; position: absolute; right: 10px; top: 12px; padding-top: 5px; height: 12px; } .gMenu .menu-icon .navicon { /* で囲んだのclass。メニューアイコン（三本線）の真ん中の線 */ background: #ffc107; /* 色は自由に変更可能 */ display: block; /* ★ は
  と違ってinlineなので、幅等を指定する為に変更 */ height: 2px; /* 太さ */ width: 31px; /* 長さ */ position: relative; transition: background .4s ease-out; /* 形が変わる時のアニメーション */ } .gMenu .menu-icon .navicon::before, .gMenu .menu-icon .navicon::after { /* で囲んだのclass。メニューアイコン（三本線）の上と下の線を疑似要素で追加 */ background: #ffc107; /* 色は自由に変更可能 */ content: ''; display: block; /* ★ は
  と違ってinlineなので、幅等を指定する為に変更 */ height: 100%; position: absolute; transition: all .4s ease-out; /* 形が変わる時のアニメーション */ width: 100%; } .gMenu .menu-icon .navicon::before { /* このままだと線が重なって見えないので、位置を上にずらす */ top: 10px; } .gMenu .menu-icon .navicon::after { /* このままだと線が重なって見えないので、位置を下にずらす */ top: -10px; } /* ▼▼▼ 以下、メニューの詳細指定 ▼▼▼
  
  HOME
  ~
  */ .gMenu .menu-btn:checked~.menu { /* ★★ まず、『チェックボックスがONの時の』メニュー
  、.menuの状態を指定この指定がないと、メニューが表示されないので注意！高さ338pxにして表示 */ max-height: 338px; transition: max-height .6s; /* アニメーションの対象プロパティと所要時間 -property、-durationを指定 */ } .gMenu .menu { /* 表示されるメニュー。後の
  のclass */ background-color: rgba(255, 255, 255, 0.9); overflow: hidden; max-height: 0; /* ★最初は高さを0にして非表示状態にしておく */ transition: max-height .6s; /* 表示される時のアニメーション */ text-align: center; } .gMenu .menu li:first-of-type { /* メニュー部分のデザイン */ padding-top: 25px; padding-top: 50px; } .gMenu .menu li a { display: block; /* 元がインラインなので、paddingつける為にブロックにする */ padding: 24px 20px; text-decoration: none; text-transform: uppercase; /* 小文字テキストを大文字に変更 */ } .gMenu .menu li a:hover { background-color: #f4f4f4; } .gMenu .menu-btn { /* ★ チェックボックスは常に非表示にする */ display: none; } /* ▼▼▼ 以下、チェックボックスONの時のアイコンの状態を指定 ▼▼▼ */ .gMenu .menu-btn:checked~.menu-icon .navicon { /* で囲んだのclass。メニューアイコンの中央の線。非表示にして、↓の疑似要素の動きと合わせて「×」に見えるよう指定 */ background: transparent; } .gMenu .menu-btn:checked~.menu-icon .navicon::before { /* メニューを開いた時、ボタンの上下の線を45度傾けて✕印を作る */ transform: rotate(-45deg); top: 0; } .gMenu .menu-btn:checked~.menu-icon .navicon::after { /* メニューを開いた時、ボタンの上下の線を45度傾けて✕印を作る */ transform: rotate(45deg); top: 0; }