@charset "UTF-8";

html {
    margin: 0;
    padding: 0;
    font-size: 62.5%
}

body {
      
    .roboto-light { /*googleフォント*/
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-style: normal;
      }
    .roboto-bold { /*googleフォント*/
        font-family: "Roboto", sans-serif;
        font-weight: 700;
        font-style: normal;
      }
    font-size: 1.6rem;
    line-height: 1.8;
    color: #797e81;
    margin: 0;/*body 要素、h1～h6要素、ul要素のマージンをリセット。(デフォルトの余白があるため)*/
    padding: 0;/*body 要素、h1～h6要素、ul要素のパディングをリセット。(デフォルトの余白があるため)*/
    text-align: center;/*文字揃え：body 要素の内容をすべて左右中央に配置*/
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin: 0;/*h1～h6要素のマージンをリセット。(デフォルトの余白があるため)*/
    padding: 0;/*h1～h6要素のパディングをリセット。(デフォルトの余白があるため)*/
}

h1 {
    font-size: 4.0rem;
}

h2 {
    margin: 10px auto;
    font-size: 3.2rem;
}

h3{
    font-size: 2.6rem;
}

ul {
    margin: 0;/*ul要素のマージンをリセット。(デフォルトの余白があるため)*/
    padding: 0;/*ul要素のパディングをリセット。(デフォルトの余白があるため)*/
}

ul li { /*リストの前にある黒丸を非表示に*/
    list-style: none;
}

header {
    width: 100%;
    position: fixed;/*ポジションを固定する*/
    top: 0;
    z-index: 10;/*レイヤーを前面にするもの。ヘッダーはどのコンテンツよりも前面に配置したいため、あらかじめ大きめの値を設定*/
    background-color: white;
    box-shadow: 0 6px 3px -3px rgba(0,0,0,0.1);/*右方向に:0px・下方向に:6px・ぼかし 3:px・影の大きさ:-3px・カラー:黒で 10％の透明度。全体6pxが色付3pxぼかし3px合計6px*/
}

header .inner { /*ヘッダー全体の配置を設定する*/
    width: 1024px;
    height: 70px;
    margin: 0 auto;
    display: flex;/*横並びにする*/
    justify-content: space-between;/*ここで、ロゴとヘッダーのメニューを両端に設定*/
    align-items: center;/*ロゴとヘッダーのメニューを合わせて上下中央揃え*/
}

header ul { /*ヘッダーのナビゲーションの全体を設定する*/
    display: flex;/*ここで、ヘッダーのメニューのみを等間隔揃えに設定*/
}

header li { /*ヘッダーのナビゲーションの各項目を設定する*/
    margin: 0 0 0 20px;/*左に20px*/
    letter-spacing: 0.2em;/*文字同士の間隔は、文字の高さの0.2倍*/
    font-size: 1.3rem;
}

header img {
    width: 80%;
}

.kv { /*画像の配置を設定する*/
    display: flex; /*画像を変えるための要素*/
    justify-content: center;/*画像を中央寄せにする*/
    margin: 90px auto 20px;
}

.kv img { /*画像のサイズを変える*/
    width: 1024px;
    height: 500px;
    object-fit: cover;
}

.inner p{
    margin: 10px auto;
    letter-spacing: 0.1em;
    font-size: 2.2rem;
    line-height: 1.3;
}

.parent,
.parent2 {
    width: 1024px;
    margin:0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);/*縦に線を3本、均等に引きます*/
    grid-template-rows: 1fr;/*横に線を1本、均等に引きます*/
    grid-column-gap: 12px;/*縦のボックスの間隔を12px空けます*/
    grid-row-gap: 0px;/*横のボックスの間隔を0px空けます(今回はないので0*/
    }
    
    .div1 { grid-area: 1 / 1 / 2 / 2; 
            background-color: oldlace;
            padding: 15px;
    }
    .div2 { grid-area: 1 / 2 / 2 / 3; 
        background-color: oldlace;
        padding: 15px;
    }
    .div3 { grid-area: 1 / 3 / 2 / 4; 
        background-color: oldlace;
        padding: 15px;
    }

.parent img,
.parent2 img {
    width:200px;
    height:auto;
}

.parent p,
.parent2 p {
    margin: 10px auto;
    font-size: 2.0rem;
    line-height: 1.4;
}