/* 
    ・GIMPの画像サイズはデフォルトだと1920*1080。ディスプレイサイズから計算してどれくらいの大きさがあれば良いのかを計算し、縮小する。
    ・タイトル、見出し1（と見出し2)を適切に入れているか
    ・桁の揃った段落は罫線(border)のないtableで
    ・ウィンドウの大きさを変えても伝えたい内容が破綻しないか
    ・正しいHTML文法、CSSで記述しているか(C-uでソース表示したときに赤くならない)
*/

body{
    background-color: #ddd;
    margin-left: 20%;
    margin-right: 20%;
}

div.bg{
    background-color: #ffffff;
    padding: 0.8% 1.3%;
}
div.lightgreen{
    background-color: #f0f3e0;
    height: 1.5vh;
}
div.wrapper{
    background-color: #bcd57e;
    padding: 3%;
}

div.borderHeading{
    border: 2px solid #2b739f;
    border-radius: 40px;
    background-color: #eee80f;
    padding: 1em 2em;
    margin-bottom: 3%;
}

h1:nth-child(1){
    color: #ce3705;
    font-family: 'Zen Maru Gothic', sans-serif;
    text-align: center;
    margin-bottom: 0;
}

h1:nth-child(n+2){ /* 2個目以降のh1タグを指定  */
    color: #2b739f;
    font-family: 'Zen Maru Gothic', sans-serif;
    margin: 0;
}

h1:nth-child(3){
    text-align: center;
}

div.topContainer{
    display: flex;
}

div.topItem:nth-child(1){
    width: 70%;
}

div.topItem:nth-child(2){
    width: 30%;
    text-align: right;
}

div.topItem:nth-child(2) > div > img{
    width: 92%;
    margin-bottom: 5%;
}

div.topItem:nth-child(2) > div > div > img{
    width: 100%;
}

div.containerInItem  > div:nth-child(1){
    margin-right: 5%;
}



h2.subHeading{
    color: #745c73;
    margin-top: 0;
    margin-bottom: 0;
    padding-left:4%;
    font-weight: normal;
    text-decoration: underline double;
    position: relative;
}

h2.subHeading::before{
    content:"";
    width: 25px;
    height: 25px;
    position: absolute;
    background: url(../myHobby/img/star.svg);
    background-repeat: no-repeat;
    background-size: contain;
    top: 5px;
    left: 0;
}

p{
    font-size: 125%;
    margin-top: 2%;
}


td:nth-child(odd){
    width: 4em;
    vertical-align: top;
    justify-content: space-between;

}

div.containerInItem{
    display: flex;
    flex-direction: row;
    width: 92%;
    margin-right: 0;
    margin-left: auto;
}




@media screen and (max-width: 1078px) {
    body{
        margin-left:  20px;
        margin-right: 20px;

    }
}

@media screen and (max-width: 690px) {
    body{
        margin: 0;
    }
}

/* next→画像のmargin、flexbox内の高さ揃える、フォントファミリーこだわるなら指定。 */