@charset "UTF-8"; html { font-size: 16px; } html, body { height: 100%; } body *, ::before, ::after { box-sizing: border-box; } body { margin: 0; font-family: 'M PLUS 1p', sans-serif; font-weight: 400; background-color: #fff; color: #000; } .container { max-width: 1000px; margin: 0 auto; padding: 16px; } @media (min-width: 768px) { .container { max-width: 1000px; margin: 0 auto; padding: 30px; } } header { background-color: #1aaedb; border-bottom: #ead963 6px solid; } header .container { min-height: 60px; padding-top: 0; padding-bottom: 0; padding-left: 76px; background-image: url(../images/logo.svg); background-repeat: no-repeat; background-size: 53px; background-position: 16px 10px; } @media (min-width: 768px) { header .container { min-height: 100px; padding-left: 120px; background-size: 80px; background-position: 30px 20px; } } header .container h1, header .container h2 { margin: 0; color: #fff; line-height: 1; } header .container h1 { padding: 15px 0 4px 0; border-bottom: 1px dotted #fff; font-size: 16px; font-weight: 500; } header .container h2 { padding: 5px 0 0 0; font-size: 10px; font-weight: 400; } @media (min-width: 768px) { header .container h1 { padding: 30px 0 5px 0; font-size: 24px; } header .container h2 { padding: 6px 0 0 0; font-size: 14px; } } main { min-height: calc(100% - 156px); } main .container { margin: 0 auto; background-color: #fff; } footer { background-color: #1aaedb; } footer .container { min-height: 50px; padding-top:10px; padding-bottom:10px; color: #fff; font-size: 12px; text-align: right; } @media (min-width: 768px) { footer .container { min-height: 50px; padding-top: 15px; padding-bottom: 15px; } } footer .container p { margin: 0; } a { color: #ed8a29; text-decoration: none; } a:hover { color: #ffb974; text-decoration: underline; }