@charset "UTF-8";
/* CSS Document */
.header {
  height: 44px;
  background-color: #cfddb2;
  position: relative;
}
.header h1 {
  font-size: 1.3rem; /*モバイル版をベースにして作っているのでこれで良い*/
  padding-left: 24px;
  align-self: flex-end;
}
.header__navigation {
  display: none; /*ハンバーガーにまとめるのでいらない*/
}
.header__inner {
  display: flex;
  justify-content: space-between;
}
@media(max-width:780px) { /*ハンバーガーボタン*/
  #nav-drawer {
    padding: 10px 24px 0 0; /*上10px、右24px　下と左0px*/
    text-align: right; /*テキストを右によせる*/
    position: relative; /*絶対座標*/
  }
  #nav-open {
    display: inline-block; /*行を右に寄せるためにこれを書いた*/
    vertical-align: middle; /*上下の揃えは、真ん中に。*/
    width: 30px;
    height: 22px;
  }
  #nav-open span, #nav-open span:before, #nav-open span:after /*#nav-open spanの部分と、そこの前の部分と、後ろの部分*/ {
    position: absolute; /*絶対座標*/
    height: 3px;
    width: 25px;
    background-color: #777;
    display: block;
    content: ""; /*これがないとbeforとafterの部分に要素がないので、とりあえず入れておく*/
  } /*これだと、同じ場所に同じものが3つある状態なので、以下の指定でずらす。この指定がないと、同じ場所に3つが重なってしまう状態になる。*/
  #nav-open span:before {
    bottom: -8px; /*もとの部分(一番上の線)から数えて-8px（8px分下に）ずらす*/
  }
  #nav-open span:after {
    bottom: -16px; /*もとの部分（一番上の線）から数えて-16px（16px分下に）ずらす*/
  }
  #nav-close {
    z-index: 999; /*要素の重ね合わせの順番。値が大きいほど上に表示する。999に意味は特にない。大きな数字なら何でもいい。*/
    position: fixed; /*ウィンドウ全体に対してどの位置に表示するかを決める*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*ここまでの4つで、画面の左上端から、縦横100%の大きさで表示してください。になる。*/
    background-color: #000;
    opacity: 0.5; /*不透明度は50%に（不透明度は数字を大きくするほど色が濃くなる）*/
  }
  #nav-content {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999; /*ドロワーメニューの下地より上に表示させたいため「999」より大きくする*/
    width: 70%;
    height: 100%;
    background-color: #fffdf3;
    text-align: left; /*文字は左よせに*/
    padding: 15px 0 0 24px; /*上と左の端から文字までの余白。上15、左24、右と下0*/
    transform: translateX(-105%); /*場所を動かす。X軸を動かします。-105%（つまり、左に105%なので画面の範囲から飛び出る）*/
    transition: 0.3s ease-in-out; /*transitionは動きがあったときにどのように動くかを指定するもの。訳：変化する。0.3秒かけて。スムーズな動きで。*/
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.25) /*rgbaの「a」は不透明度*/
  }
  .nav-drawer__title {
    display: block; /*ソースコードでclass="none"にしたので、スマホ版の場合のみblockを入れることで表示させる*/
    font-size: 1.6rem;
    font-weight: 600; /*このサイトの場合、500が普通の文字、600が太字で設定している*/
    color: #cfddb2;
    margin-top: 36px;
    margin-bottom: 36px; /*Kaoriの下端からTOPの上端までの間*/
  }
  .nav-drawer__link-top {
    display: block; /*ソースコードでclass="none"にしたので、スマホ版の場合のみblockを入れることで表示させる*/
  }
  #nav-content ul li {
    /*モバイルのTopとかAboutの文字*/
    margin-bottom: 36px; /*各文字の下端から、その下にある文字の上端までの余白*/
  }
  #nav-content ul li a {
    text-decoration: none; /*テキストの装飾はなし（下線など）*/
    font-site: 1.6rem;
    font-weight: 600;
    color: #333;
  }
  #nav-input:checked ~ #nav-close {
    display: block;
  } /*#nav-inputにチェックが入っている時、#nav-close（この2つは同じ階層にあるので「~」が必要になる。子要素の場合はスペースだけで良かったのにね。）はディスプレイが表示されるように。(ハンバーガーボタンをクリックすると画面が薄黒くなる)ハンバーガー以外の場所はチェックボックスではない場所なのでそこをクリックすると、チェックボックス解除＝画面の薄黒くなるのが元に戻る*/
  #nav-input:checked ~ #nav-content { /*#nav-inputにチェックが入っている時、#nav-content（この2つは同じ階層にあるので「~」が必要になる）は*/
    transform: translateX(0%); /*普段はコンテントを-105%にして隠しているので、チェックが入っている時は0%にして元の位置に戻す。よって隠れている部分が表示される*/
  }
}
@media(min-width:780px) {
  .header {
    margin: 0 auto; /*上下は0、左右は自動にすると中央に寄る*/
    min-height: 50px;
    padding: 14px;
    box-sizing: border-box;
  }
  .header__inner {
    display: flex;
    justify-content: space-between;
    max-width: 1040px;
    margin: 0 auto;
  }
  .header h1 {
    font-size: 2.1rem;
  }
  .header__navigation {
    display: block; /*block_表示する*/
    text-align: right; /*右側に配置したいので、右揃えにする*/
  }
  .header__navigation ul li {
    display: inline-block; /*インラインブロックにすることで、縦1行ではなく横一列に並べることができる*/
    margin-left: 35px; /*Top,About,Work、それぞれの間の余白*/
  }
  .header__navigation ul li a { /*リンクなので勝手に下線のついた紫になる。それを修正する。*/
    text-decoration: none; /*テキストの装飾(今回は下線)はなしでお願いします。*/
    font-size: 2.1rem;
    font-weight: 600;
    color: #333333;
  }
}

.main {
  background-color: #fad0c4;
  padding-bottom: 60px;
}
@media(min-width : 1040px) { /*画面サイズが大きくなったときに、下の余白も大きくなるように1040pxバージョンも設定する*/
  .main {
    padding-bottom: 120px;
  }
}


.section-top {
  margin-bottom: 60px; /*topの写真〜Aboutまでの余白*/
}
@media(min-width:1040px){
  .section-top {
    margin-bottom: 80px;
  }
}


.section-top__image {
  height: 388px;
  background-image: url("../images/top/top_image.jpg");
  background-position: top; /*背景の写真の場所は上から表示する*/
  background-size: cover;
  background-repeat: no-repeat; /*背景の画像が閲覧している画面より小さい時に、背景を繰り返して表示しない*/
}
@media(min-width:1200px){
  .section-top__image {
    height: 600px;
    margin-bottom: 80px; /*画像の下端から、Aboutの囲っている部分上端までの余白*/
  }
}
@media(min-width:1530px) {
  .section-top__image {
    background-position: 50% 20%; /*横は50%,上は20%のところに配置する*/
  }
}


.section-top__image-inner {
  max-width: 415px;
  position: relative;
  display: flex;
  margin: 0 auto;
}
.section-top__image h2 {
  font-size: 2.2rem;
  color: #333;
  position: absolute; /*絶対座標。親要素はsection-top__image-inner*/
  left: 15px;
  top: 15px;
  line-height: 3.8rem;
}
@media(min-width:900px) {
  .section-top__image-inner {
    max-width: 1040px;
    position: relative;
    margin: 0 auto;
    display: block;
  }
.section-top__image h2 {
  font-size: 3.2rem;
  color: #333;
  position: absolute; /*絶対座標。親要素はsection-top__image-inner*/
  left: 200px;
  top: 30px;
  line-height: 4.8rem;
}
}
@media(min-width:1200px) {
  .section-top__image-inner {
    max-width: 1040px;
    position: relative;
    margin: 0 auto;
    display: block;
  }
  .section-top__image h2 {
    font-size: 4.6rem;
    color: #fff;
    position: absolute; /*絶対座標。親要素はsection-top__image-inner*/
    text-align: right;
    right: 160px;
    top: 380px;
    line-height: 6.9rem;
    letter-spacing: 0.1em;
  }
}

.section-about {
  max-width: 327px;
  margin: 0 auto;
  background-color: #fffdf3;
  border-radius: 15px;
  margin-bottom: 60px; /* AboutとWorkのセクションの間*/
  padding: 40px 0px;
}
.section-about__inner {
  display: flex;
  flex-direction: column;
}
.section-about h2 {
  text-align: center;
}
.section-about img {
  padding: 40px;
  border-radius: 50%; /*丸くする。正方形の画像なら、これで正円になるけど、長方形の写真では楕円形になる*/
  height: 247px;
  width: 247px;
  object-fit: cover; /*画像の縦横比を保ったまま領域をカバーする*/
  /*小さいデバイスだと、画像がはみ出る。はみ出ずに、画像を小さくしていく方法はあるのか。*/
}
.section-about p {
  padding: 10px 20px;
}
.section-about span {
  display: block; /*spanタグはデフォルトがインライン要素なので、改行してtext-alignをセンターにするにはブロック要素にする必要がある*/
  text-align: center;
}
@media(min-width:1040px) {
  .section-about {
    box-sizing: border-box;
    max-width: 1040px;
    margin: 80px auto;
    /*top-imageからaboutの白い箱まで。あと、下端Work の文字の部分まで。基本的に各sectionのmarginは下だけとるけど、ここだけ、上もとる。なお、左右はautoにすることで中央よりになる*/
    padding: 60px;
  }
  .section-about h2 {
    display: block;
    margin: 40px;
  }
  .section-about img {
    display: flex;
    border-radius: 50%; /*丸くする。正方形の画像なら、これで正円になるけど、長方形の写真では楕円形になる*/
    padding: 0px;
    height: 360px;
    width: 360px;
    object-fit: cover; /*画像の縦横比を保ったまま領域をカバーする*/
    /*小さいデバイスだと、画像がはみ出る。はみ出ずに、画像を小さくしていく方法はあるのか。*/
    padding-right: 60px;
  }
  .section-about__inner {
    flex-direction: row;
  }
  .section-about p {
    display: flex;
  }
}
.section-work {
  margin-bottom: 60px; /*アクセスとの境目*/
}
.section-work h2 {
  margin-bottom: 40px; /*Workと献立作成の写真の間*/
  text-align: center;
}
.section-work ul {
  margin: 0 24px;
  list-style: none; /*箇条書きの点を消す*/
}
.section-work ul li {
  max-width: 327px; /*最大でも327pxに。幅が小さいスマホなら、自動で小さい幅にしていいよ。(単なるwidthだと幅が小さいスマホだと、横のスクロールが発生してしまう)*/
  margin: 0 auto; /*上下を0に、左右をautoにすることで中央揃えにする*/
  background-color: #fffdf3;
  margin-bottom: 40px; /*各項目間の余白*/
  border-radius: 15px; /*角丸の半径は15px*/
  text-align: left; /*テキストは左揃え*/
  min-height: 340px; /*白い部分の大きさ揃えた写真156+文章184px合計340px*/
}
.section-work__picture { /*3つの写真*/
  width: 100%;
  height: 156px;
  background-position: center;
  object-fit: cover; /*画像サイズに関わらず、アスペクト比を維持したまま、幅いっぱいに画像を埋め込んでくれる*/
  border-radius: 15px 15px 0 0; /*角丸_左上→右上→右下→左下の順*/
}
.section-work__title { /*献立作成、調理、webデザインの文字*/
  padding: 20px;
}
.section-work__description { /*各メニューの説明文*/
  padding: 0 20px 20px 20px; /*上以外は20px（上は「section-work__title」の部分で指定してる）*/
}
@media (min-width : 1040px) { /*メニューが3つ横並びになるようにする*/
  .section-work {
    margin-bottom: 20px; /*3つのメニューはmobile版で60pxのマージンがすでに取られている。アクセスセクションまでの余白を60pxにしたいので、60+20=80pxで、margin-bottomは20pxになる*/
  }
  .section-work ul {
    max-width: 1040px;
    padding: 0;
    margin: 0 auto; /*上下は0、大きな画面になっても、左右を自動にしておくと中央に寄る*/
  }
  .section-work ul li {
    display: inline-block;
    width: 320px; /*320px x 3=960px それと余白2つ分(40px x2)を足すと1040pxになる*/
    margin-right: 40px; /*各メニューのブロックの右側に40px(これだだけと、いらないのにWebデザインの右にも余白が作られる.
    なので、下の部分で調節する)*/
  }
  .section-work ul li:last-child { /*:last-child_この要素の最後の部分（つまり、今回はWebデザインの部分）*/
    margin-right: 0px; /*右のいらない余白を消す。実際はHTMLの改行による半角スペースができてしまい、うまくいかなかったので、HTMLの改行をコメントアウトによってなかったことにして解消した。*/
  }
}
.section-access { /*アクセスセクション全体*/
  padding-top: 40px; /*白い部分〜Accessまでの余白（白なのでパディング）*/
  max-width: 327px; /*最大でも327pxに。幅が小さいスマホなら、自動で小さい幅にしていいよ。(単なるwidthだと幅が小さいスマホだと、横のスクロールが発生してしまう)*/
  margin: 0 auto; /*上下を0に、左右をautoにすることで中央揃えにする*/
  background-color: #fffdf3;
  border-radius: 15px; /*角丸の半径は15px*/
  text-align: center; /*テキストは中央揃え*/
  margin-bottom: 60px; /*Access〜Newsまでの余白*/
}
.section-access h2 {
  margin-bottom: 40px; /*Accessと実際の住所までの間の余白*/
}
.section-access address {
  font-style: normal; /*italicなども選択できる*/
  padding: 0px 20px;
  margin-bottom: 40px; /*Emailと地図の間*/
}
/*この辺の住所の改行はした方がいいのか…*/
.section-access__break:after { /*擬似要素。このclassの後の部分に次の指示を出してください*/
  content: "\A"; /*"\A"で改行という意味。option+¥でバックスラッシュを出せる*/
  white-space: pre /*改行そそのまま出します*/
}
.section-access__map {
  height: 330px;
  padding-bottom: 40px;
}
.section-access__map iframe {
  width: 92%; /*白い部分の全幅は327px、地図の部分はそこ(327px)から左右12pz空いている。なお、地図エリアは正方形*/
  height: 92%; /*301(327-12-12)÷327＝0.92*/
  border: solid 1px #333333; /*枠線　solidは実線という意味*/
  border-radius: 6px;
}
@media(min-width : 1040px) { /*1040pxより大きい画面になったらpc用に切り替える*/
  .section-access {
    padding: 60px 80px; /*アクセスセクション内の余白。上下60、左右80*/
    margin: 0 auto 80px; /*上は0、大きな画面になっても、左右を自動にしておくと中央に寄る、下はアクセスとNewsの間のピンクの部分*/
    max-width: 1040px; /*1040pxよりは大きくならないで、止まってね*/
    box-sizing: border-box;
  }
  .section-access h2 {
    padding-bottom: 60px; /*Accessから住所部分まで*/
    margin-bottom: 0px;
  }
  .section-access address {
    font-size: 1.8rem;
    line-height: 2.7rem; /*font-sizeの約1.5倍*/
    padding: 0px;
  }
  .section-access__map {
    max-width: 840px;
    margin: 0 auto;
    height: 340px;
    padding-bottom: 0px;
  }
  .section-access__break:after { /*擬似要素。このclassの後の部分に次の指示を出してください*/
    content: "none"; /*画面が大きい時(@media(min-width:1040px))は改行を無し（このクラスはなかったこと）にしてください*/
    /* そもそもこれが必要なのか問題   */
  }
}
.section-news {
  box-sizing: border-box;
  max-width: 327px; /*最大でも327pxに。幅が小さいスマホなら、自動で小さい幅にしていいよ。(単なるwidthだと幅が小さいスマホだと、横のスクロールが発生してしまう)*/
  background-color: #FFFDF3;
  border-radius: 15px;
  padding: 40px 20px 10px; /* 上下40px,左右20pxにしたい。ニュース内容の下に30pxのパディングをとるので、下はニュースのパディング30+10pxで40pxになるように計算した */
  margin: 0px auto; /*上下を0に、左右をautoにすることで中央揃えにする。Newsより下の部分の余白はメインセクションでとってる。そうしないと、ピンクの色がつかない。*/
}
.section-news__break:after { /*擬似要素。このclassの後の部分に次の指示を出してください*/
  content: "\A"; /*"\A"で改行という意味。option+¥でバックスラッシュを出せる*/
  white-space: pre /*改行そそのまま出します*/
}
.section-news h2 {
  text-align: center;
  margin-bottom: 40px;
}
.section-news ol {
  list-style-type: none /*箇条書きの番号を消す*/
}
.section-news ol li {
  margin-bottom: 30px; /*各ニュースの下部の余白*/
}
.section-news li time {
  font-weight: 600;
}
.section-news li time::after {
  content: ":";
} /*「::after」擬似要素_この要素のあとに。みたいな意味（擬似クラス(〜した時〜)と似ている）*/ /*この文章の後に「：」をつけてください*/
.section-news h3 { /*ニュースの見出し部分*/
  display: inline; /*インライン要素にすることで、日時の隣に見出しを入れることができる*/
}
@media(min-width : 1040px) {
  .section-news {
    padding: 60px 80px 20px; /*上下60px,左右80pxにしたい。ニュース内容の下に40pxのパディングをとるので、下はニュースのパディング40+20pxで60pxになるように計算した*/
    max-width: 1040px;
    margin: 0 auto; /*上下を0、左右をautoにすることで要素を中央に揃える*/
    box-sizing: border-box;
  }
  .section-news__break:after { /*擬似要素。このclassの後の部分に次の指示を出してください*/
    content: "none"; /*画面が大きい時(@media(min-width:1040px))は改行を無し（このクラスはなかったこと）にしてください*/
  }
  .section-news ol {
    /* これ、何？（元からあるから置いてあるけど。） */
    max-width: 840px;
    margin: 0 auto;
  }
}
.footer {
  text-align: center;
  min-height: 228px; /*後から要素が増えた時のために、最低限の高さだけ指定しておく*/
  /* この「228」の根拠は？これのせいで、Kaori Nomuraから最下端までがすごく空くから必要ないなら消したい.
  でもPC版と何か絡んでそう*/
  background-color: #cfddb2;
  padding-top: 40px; /*緑の上部余白から、TOP、NEWSとかの文字部分の上端まで*/
  padding-bottom: 60px; /*©Kaori Nomura から緑の余白下端まで*/
  font-weight: 600; /*通常は300~400くらい*/
}
.footer__site-map {
  margin-bottom: 40px; /*TOP、NEWSとかの文字部分の下端から、SNSアイコンの上端まで*/
}
.footer__site-map h2 { /* スマホ版は表示しない(PC版のみ) */
  display: none;
}
.footer__site-map li {
  margin: 0 10px; /*上下は0px、左右はTOPとMENUとかの間を空けるため20px取りたい。各要素10pxにすればその間は足して20pxになる*/
  display: inline-block; /*要素(TopとかAboutとか)を横向きに並べられるようにインラインブロックにする*/
}
.footer__site-map li a {
  text-decoration: none; /*装飾が消える＝アクセス済みのリンクが紫色にならないようにする*/
  color: #333333;
}
.footer__site-map li a:visited { /*visited_このリンクに訪問したことがある場合*/
  color: #333333;
}
.footer__sns_links {
  margin-bottom: 40px; /*SNSマークの下端から、©Kaori Nomuraの上端まで*/
}
.footer__sns_links li {
  display: inline-block; /*要素(SNSアイコン)を横向きに並べられるようにインラインブロックにする*/
  width: 20px; /*要素(アイコン)の幅を20pxにする*/
  margin: 0 25px; /*上下は0px、左右はSNSアイコンの間をそれぞれ空けるため50px。インスタとツイッターの間は25+25で50。みたいな感じで25で設定してる*/
}
.footer__sns_links li img {
  width: 100%; /*幅は親要素(li要素)と同じ(=20px)にしてください*/
}
.footer small {
  color: #333333;
  padding-bottom: 0px;
}
@media(min-width : 1040px) {
  .footer {
    margin: 0;
    padding: 0;
    /* これ、なんのためにあるの？ */
  }
  .footer__container {
    max-width: 1040px;
    margin: 0 auto; /*  これも、何のためにあるの？ 中央寄せにする対策？*/
    padding-top: 40px; /*緑の上端から、文字の上端まで*/
    text-align: left; /*文字は左揃え*/
  }
  .footer__site-map {
    float: left; /*浮かんだ状態で左に詰める*/
  }
  .footer__site-map h2 {
    display: inline-block;
    width: 195px; /*文字＋右の部分(Topとか)までの余白*/
    vertical-align: top; /*文字は上に揃えてください*/
    color: #333333;
    margin-bottom: 0px; /* 何でmarginが消えてくれないのか… */
  }
  .footer__site-map ul {
    display: inline-block; /*このままだと横並びになるので下の部分(li)で縦並びに変更する*/
    margin-left: 10px; /* これは何のためにあるの？ */
  }
  .footer__site-map ul li {
    display: block;
  }
  .footer__sns_links li {
    margin: 0 14px; /*上下は0px、左右はSNSアイコンの間をそれぞれ空けるため28px。インスタとツイッターの間は14+14で28。みたいな感じで25で設定してる*/
  }
  .footer__sns_links {
    float: right; /*浮かべて右に寄せてください*/
  }
  .footer small {
    clear: both; /*右にも左にも浮かばなくていいです*/
    display: block; /*inlineではないから幅が足りないので、文字が空いている部分の下方にいく*/
    text-align: center; /*文字は中央揃えにしてください*/
    padding-bottom: 40px;
  }
}