《前編》しょーごさんの中級課題(蓼科ごとう農園) の備忘録　

<div id="loadingWrap"></div>
<header class="header"></header>
<div class="down-header__inner"></div>
<nav></nav>

<main class="main">

    <section id="about" class="about _cream-bg ">
    </section><!-- /.about -->

    <section id="product" class="product _cream-bg">
    </section><!-- /.product -->

    <section id="news" class="news element">
    </section><!-- /.news -->

    <div class="middle-pic"></div><!-- /.middle-pic -->


    <section id="faq" class="faq _cream-bg ">
    </section><!-- /.faq -->

    <div class="middle-pic"></div><!-- /.middle-pic -->

    <section id="access" class="access ">
    </section><!-- /.acces -->

    <div class="middle-pic"></div><!-- /.middle-pic -->

    <section id="contact" class="contact _cream-bg ">
    </section><!-- /.contact -->

</main><!-- /.main -->
<footer id="footer" class="footer "></footer><!-- /.footer -->

@media screen and (min-width: 768px),print{
.header__inner {
padding: 120px 10% 170px;
}
.header__ttl {　//キャッチコピー部分
position: static;
}

<div class="header__inner">
<div class="header__ttl">
<span>あなたは知ってる？</span><br class="blank">
<span>蓼科を丸ごと味わう</span><br class="blank">
<span>喜びを</span>
</div><!-- /.header__ttl -->
</div><!-- /.header-inner -->

<div class="down-header__inner">
<h1 class="header__logo"><img></h1>
</div>

.down-header__inner {
background: $c_bg;
border-radius: 50%;
width: 154px;
height: 154px;
padding: 30px;
position: relative;
top: -75px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}

<nav>
<div class="gnav__inner">
<ul class="gnav__list__container">
<li><a>この農園について</a></li>
<li><a>製品一覧</a></li>
<li><a>お知らせ</a></li>
<li><a><img class="logo"></a></li>
<li><a>FAQ</a></li> <li><a>アクセス</a></li>
<li><a>お問い合わせ</a></li>
</ul>
</div>
</nav>

.gnav__list__container {
display: flex;
justify-content: space-around;
}

.gnav__inner {
display: flex;
}
.gnav__list__container {
position: relative;
flex: 1 33%;
display: flex;
justify-content: space-between;
}
img {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

@media screen and (min-width: 768px),print{ 　
//ロゴとナビメニューを２行にするため高さを出す
nav { height: 300px;　　
}　　
//2つある<ul>のクラス名
.gnav__list__container {　
flex: 1 33%;
//ナビ、ロゴ、ナビの3等分に表示
display: flex;
justify-content: space-around;
//余白の関係でspace-betweenから変更
}
//3つ目の<li>でロゴとの間を余白調整
.gnav__item3 {
margin-right: 4%;
}
//4つ目の<li>でロゴとの間を余白調整
.gnav__item4 {　
margin-left: 4%;
}

font-size: clamp(30px, 2.8vw, 40px);

width: clamp(600px, 74%, 786px);

width: 74%;
min-width: 600px;
max-width: 786px;

<section>
<div class="about-inner">
<div class="about_body_catchphrase">
<h2 class="about__catchphrase">蓼科の生きた豊かな恵みを、そのままに</h2>
</div>
<div class="about_body_txt">
<p class="about__txt">
「蓼科ごとう農園」は、蓼科の新鮮な農産物を提供するだけでなく、<br class="blank">
蓼科の自然環境を大切に守り、後世に残すことを使命としています。<br class="blank">
私たちは、***</p>
</div>
<figure><img></figure>
<figure><img></figure>
</div>
</section>