html { font-size: 100%; /* 16px */ } body{ color: #24292e; font-family: "M PLUS 1p"; } a { text-decoration: none; } p { font-size: 1.3rem; } img{ max-width: 100%; } li{ list-style: none; font-size: 1.1rem; } .wrapper { max-width: 960px; margin: 0 auto 130px auto; font-size: 0.9rem; padding: 0 4% ; } .site-title { line-height: 1px; font-weight: 600; font-size: 2.4rem; font-family: 'Monoton', serif; } .site-title a { color:#404546; } .sec-title { font-size: 2rem; text-align:center; margin-bottom: 65px; font-family: 'Kanit', sans-serif; } /* header欄のCSS */ #header { max-width: 960px; display: flex; /* 親要素に対してflexを当てると子要素が横並びになる */ align-items: center; justify-content: space-between; margin: 0 auto; padding: 0 4%; height: 170px; } #header ul { display: flex; padding: 10px 0; align-items: center; } #header ul li { font-size: 0.9rem; margin-left: 30px; } #header ul li a { color: #24292a; transition: all 0.3s; } #header ul li a:hover{ opacity: 0.5; } #header li img.icon{ width: 30px; } /* iframe(map)欄のCSS */ iframe{ width: 100%; } /* 写真とテキストの横並び設定のCSS */ div.flexbox{ display: flex; } /* 携帯用 */ @media screen and (max-width: 680px){ .site-title { margin-top: 20px; } /* header */ #header { flex-direction: column; height: auto; line-height: 40px; margin-top: 20px; } #header li { font-size: 0.8rem; margin-left: 20px; margin-top: 10px; } }