@charset "UTF-8";
body {
    margin: 0;
    font-family: sans-serif;/*フォントを系統ゴシック系統に統一する*/
}

header {
    padding: 20px 15px;/*縦25,横15pxの余白を作る*/
    color: #eec5c5;/*#29abe2;*/
    font-size: 40px;
    font-weight: bold;/*ヘッダーの文字を太字にする*/
    text-align: center;/*文字を中央に配置する*/
}

/*リンク*/
a {
    color: inherit;/*リンクを指定してトップページに戻れるようにした時に、色が変わってしまう現象が起きたため、それをもとに戻すためにinheritで親要素と同じ値に指定することによって元の色に戻す*/
    text-decoration: none;/*リンクを指定してトップページに戻れるようにした時に、下線が付いてしまったので、それをなくす処理*/
}

a:hover {
    opacity: 0.7;/*リンクにカーソルを重ねたときに少しだけ色が薄くなるようにする処理(0に近づくほど透明になる)*/
}

/*ナビゲーション*/
nav ul {/*navをつけることで、下のtopicsのボックスの並びが影響を受けないようにする(縦並びになるようにする)*/
    list-style-type: none;/*ナビゲーションメニューの(・)をなくす*/
    color: #666666;
    font-size: 20px;/*ナビゲーションメニューの文字の大きさ*/
    display: flex;/*リンクを縦並びだったのを横並びにするための指示(空白を開けずに文字を横並びにする*/
    justify-content: center;/*flexで指定した横並びの文字列の位置を指定することができる*/
}
nav li {
    margin-right: 30px;/*リンクの間に余白を入れる作業(右側)*/
}

/*トップメニューの設定*/
.topmenu {
    padding: 25px 300px;/*縦25px,横200px*/
    background-color: #d9d2d2;
    
}
.topmenu h2 {
    background-color: #ffffff;
    padding: 0;
    padding-top: 50px;
    padding-bottom: 30px;
    margin: 0;
}
.topmenu p {
    text-align: center;
}

/*コンテンツブロック*/
.contents {
    background-color: #d9d2d2;/*#29abe2;*/
    padding: 20px 200px;
}

/*記事*/
article {
    background-color: #ffffff;/*記事ボックスの背景を白にする*/
    padding:100px;
    padding-top: 15px;
}

h1 {
    font-size: 30px;
}

p {
    line-height: 2;/*行の間隔を調整する。marginが2倍?になる*/
}

/*画像*/
img {
    width: 100%;/*横幅を親要素に合わせたサイズにする*/
    height: auto;/*横幅に合わせて縦幅を自動で調節*/
}
figure {
    margin: 0;/*画像の周りの余計な余白を消去する*/
}

/*サブメニュー*/
aside {
    background-color: #ffffff;/*カード型に縁取ったデザインにするための設定*/
    padding: 20px;
    margin-top: 40px;
}
h2 {/*サブメニューの見出し*/
    color: #eec5c5;
    text-align: center;/*文字を中央に配置する*/
}

/*サブメニュー：記事メニュー*/
aside ul {
    list-style-type: none;/*liの(・)をなくす*/
    display: flex;
}
aside figure {/*トピックの写真の調整*/
    width: 215px;
    height: auto;
    padding: 10px;
    padding-right: 5px;
}
aside h3 {/*topicsの横の文字の位置を余白を整えて調節する*/
    font-size: 14px;
    margin-top: 0;
    margin-left: 10px;
}

/*フッターブロック*/
footer {
    background-color: #d9d2d2;/*#6ac4eb;*/
    padding: 25px 15px;/*縦25,横15pxの余白を作る*/
    color: #ffffff;
    font-size: 14px;
    text-align: center;/*文字位置を中央に配置する*/
}
footer p {
    margin: 0;
}

/*トップページ：ヒーローイメージ*/
section {
    background-image: url(./img/laptop-5987093.jpg);
    background-size: cover;/*背景画像を自動的にちょうど良いに合わせた大きさにして切り出す*/
    height: 450px;/*写真の高さを初めの画面が埋まるように設定*/
    color: #ffffff;/*ヒーローイメージのテキストの色を調整*/
    padding-top: 50px;
    text-align: center;/*フッターの文字位置を中央に配置する*/
}
section h1 {/*キャッチコピー*/
    font-size: 48px;
    text-shadow: 0 0 10px #444444;/*文字に影をつける*/
    text-align: center;/*文字の中央揃え*/
}