@charset "UTF-8"; /* Template & Designed by Towako. */ /* https://ninawas.me */ /* ウェブフォントの読み込み */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Spectral&display=swap'); /* 全体に適用する */ * { margin: 0; padding: 0; box-sizing: border-box; font-weight: normal; font-family: 'Noto Serif JP', serif; } :root { --main-color: #888; --sub-color: #043c78; --font: 'Spectral', serif; } /* 基本設定 */ body { background-color: #fff; text-align: center; line-height: 1.7; letter-spacing: 0.1em; font-size: 12px; color: var(--main-color); } /* リンク */ a { text-decoration: none; color: var(--sub-color); } /* ホバー */ a:hover { transition: .5s color; color: #f4f3f4; } /* ヘッダー */ header { position: relative; margin: 3em auto 1.5em; width: 80%; max-width: 500px; animation: FadeIn 4s; } /* ヘッダー画像 */ header img { display: block; width: 100%; height: auto; } /* ヘッダー見出し */ header h1 { display: inline-block; position: absolute; top: 28%; left: 20%; transform: translate(-50%, -50%); writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; border-left: thin solid var(--main-color); border-right: thin solid var(--main-color); text-indent: 0.5em; letter-spacing: 0.5em; font-size: 1.2em; } /* ナビゲーション */ nav { margin: 0 auto 1.5em; animation: FadeIn 1s; } nav ul li { margin: 0 1em; display: inline-block; } nav ul li a { font-family: var(--font); font-size: 14px; } /* フッター */ footer { margin: 1em auto 1.5em; } /* 線 */ div.line { margin: 1em auto; width: 1px; height: 30px; background-color: var(--main-color); } /* アニメーション */ @keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* フォーム系 */ textarea, input[type] { -webkit-appearance: none; padding: 0.2em 0.5em; background-color: #fff; border: thin solid var(--main-color); border-radius: 0; color: var(--main-color); } textarea { width: 200px; height: 70px; } input[type=text] { width: 80px; } input[type=submit] { width: auto; } /* 横幅768px以上で読み込む */ @media screen and (min-width:768px) { /* フォントサイズ */ body { font-size: 13px; } } /* 横幅1024px以上で読み込む */ @media screen and (min-width:1024px) { /* フォントサイズ */ body { font-size: 14px; } }