@charset "UTF-8";
body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; -webkit-text-size-adjust: 100%; margin: 0; padding: 0; line-height: 1.75; overflow-y: scroll; color: #333; }

div, p, pre, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 { box-sizing: border-box; }

img { border: 0; }

p { margin: 1em 0 0 0; padding: 0; }

a { color: #e70; }

a:hover { color: #fb4; }

.memo-article > a { color: #333; }

.memo-article > a:hover { color: #fb4; }

.center { text-align: center; margin: 1em 0; }

.right { text-align: right; margin: 1em 0; }

ul { list-style-type: disc; margin: 2em 0; padding: 0 0 0 2.5em; }

li > p { margin: 0; }

.widelist { margin: 2em 0; }

.widelist > ul > li { margin: 1.5em 0; }

#box-bg { min-height: 100vh; padding: 0 16px; background: #f90 url("../common/bg.png"); }

#box-base { width: 988px; min-height: 100vh; padding: 0; margin: 0 auto; background-color: white; border-top: solid 16px #444; }

#box-base:after { content: "."; visibility: hidden; display: block; clear: both; }

#box-header { width: 100%; padding: 8px 48px 8px 48px; color: #aaa; font-size: 75%; }

#box-main { width: 760px; float: left; margin: 0 0 0 16px; }

#box-side { width: 180px; float: right; margin: 0 16px 0 0; }

#box-single { width: 760px; margin: 3em auto; }

#header-icons { float: right; }

#header-icons > a:hover { opacity: 0.6; }

#side-frame { border: none; width: 100%; }

#main-content { border: solid 4px #f90; border-radius: 32px; }

#main-footer { padding: 4px; text-align: center; font-size: 60%; color: #aaa; }

h1 { clear: both; position: relative; margin: 0.3em 0 0.3em 1.3em; border-bottom: solid 4px #444; line-height: 1.1; font-size: 2.2em; font-weight: normal; }

h1:before { content: ""; position: absolute; top: 0; left: -1.3em; width: 1.2em; height: 1.2em; border-radius: 0.65em; background-color: #444; }

h2 { margin: 4em 0 1.5em 0; border-bottom: solid 4px #444; line-height: 1.4; font-size: 130%; font-weight: bold; }

.topic-list { margin: 3em 0 3em 1.5em; }

.topic-list > h3 { margin: 3em 0 1em -1.5em; padding: 0.1em 0 0 0.4em; border-left: solid #f90 0.7em; line-height: 1.1; font-size: 100%; font-weight: bold; }

.topic-list > p { margin: 0; }

em { display: inline-block; background-color: #f0f0f8; border: solid 1px #ccd; padding: 0.2em 0.5em; margin: 0; line-height: 1; border-radius: 4px; font-style: normal; }

strong { font-weight: bold; font-style: normal; color: #e44; }

.shout { margin: 1em 0; text-align: center; font-weight: bold; font-size: 160%; ling-height: 1.1; color: #e44; }

ol { margin: 2em 0; padding: 0 0 0 1em; list-style: none; counter-reset: count; }

ol > li { position: relative; margin: 1em 0 0 0; padding: 0 0 0 2em; }

ol > li:before { counter-increment: count; content: counter(count) "."; position: absolute; left: 0; top: -0.1em; font-size: 110%; font-weight: bold; color: #f90; }

.continue { counter-reset: none; }

table { padding: 0; margin: 2em 1em; border-collapse: collapse; border-spacing: 3px; border: none; line-height: 1.2; }

th, td { margin: 0; padding: 0.4em; border: solid 1px #fc8; background-color: #fc8; text-align: left; font-size: 90%; }

td { background-color: #fff8ec; }

code, kbd { font-family: Consolas, "Courier New", Courier, Monaco, monospace; font-size: 100%; }

kbd { background-color: #fff8ec; border: dashed 1px #fc8; border-radius: 4px; display: inline-block; line-height: 1; padding: 0.1em 0.2em; margin: 0px 0.2em; }

pre { background-color: #fff8ec; border: dashed 1px #fc8; border-radius: 4px; margin: 1em 0; padding: 0.5em; }

pre > code, pre > kbd { display: block; padding: 0; margin: 0; line-height: 1.2; font-size: 14px; }

pre > code[name], pre > kbd[name] { padding: 1.2em 0 0 0; position: relative; }

pre > code[name]:before, pre > kbd[name]:before { content: attr(name); position: absolute; top: -0.5em; left: -0.5em; padding: 0.1em 1em; background-color: white; border: solid 1px #fc8; border-radius: 4px; font-size: 80%; line-height: 1; color: #f90; }

.code-comment { color: #9b7; }

.image { margin: 2em 0 2em 0; text-align: center; }

.image img { max-width: 480px; max-height: 480px; }

.topic-box { padding: 16px; border: solid 1px #888; border-radius: 16px; margin: 2em 0; }

.topic-box > h3 { margin: 0.5em 0; line-height: 1.2; font-size: 130%; font-weight: bold; border-bottom: solid 1px #444; }

.refer { position: relative; margin: 2em 0 3em 0; padding: 1em 0 0 0; }

.refer:before { content: "参考サイト"; position: absolute; top: 0; left: 0; padding: 0.2em 0.5em; background-color: #444; border-radius: 4px; font-size: 80%; line-height: 1; color: #fff; }

.refer > ul { font-size: 90%; margin: 1em 0; }

.target { position: relative; width: 90%; margin: 2em auto; padding: 2.5em 0.5em 1em 0.5em; background-color: #fc8; border-radius: 24px; }

.target:before { position: absolute; top: 0; left: 0; right: 0; width: 70%; margin: auto; padding: 0.3em 2em; content: "やりたいこと"; color: white; font-size: 120%; font-weight: bold; line-height: 2em; letter-spacing: 0.5em; text-align: center; }

.target > ul { margin: 1em 0; }

.target > .image { margin: 1em 0; }

.note { display: inline-block; position: relative; margin: 0.2em 0 0 2em; padding: 0.3em 1em; font-size: 80%; line-height: 1.5; background-color: #f0f0f0; border-radius: 8px; }

.note:before { content: ""; position: absolute; top: -1.2em; left: 12px; border: 0.6em solid transparent; border-bottom: 1em solid #f0f0f0; }

.note > p { margin: 0; }

.category-list { margin: 0; padding: 0 0 0 1.5em; }

.category-list > .memo-category { list-style-type: none; margin: 2.5em 0 0 0; }

.category-list > .memo-category:first-child { margin: 0.5em 0 0 0; }

.category-list > .memo-category > a { display: inline-block; padding: 0.5em; border-radius: 8px; background-color: #444; line-height: 1; text-decoration: none; color: #fff; margin: 0 0 0.5em -1.2em; padding: 0.4em 1em; min-width: 12em; }

.category-list > .memo-category > a:hover { background-color: #888; }

.newslist { list-style-type: none; margin: 1em 0; padding: 0 0 0 1em; }

.newslist > .memo-article { line-height: 1.5; margin: 0.7em 0; }

.newslist > .memo-article > .date { font-size: 0.8em; }

.memo-new:before { content: "New"; display: inline-block; width: 5em; margin: 0 0.5em 0 0; border-radius: 4px; background-color: #f56; line-height: 1.1; text-align: center; font-size: 0.8em; color: white; }

.memo-update:before { content: "Update"; display: inline-block; width: 5em; margin: 0 0.5em 0 0; border-radius: 4px; background-color: #888; line-height: 1.1; text-align: center; font-size: 0.8em; color: white; }

#content-main { width: 680px; margin: 3em 36px 5em 36px; }

#content-main > h2 { margin: 5em -20px 1.5em -20px; }

#content-header { width: 720px; margin: 16px; }

#category { color: #333; font-size: 90%; }

#category a { color: #333; }

#category a:hover { color: #fb4; }

#date { font-size: 80%; line-height: 1.1; text-align: right; }

#content-footer { padding: 16px; background-color: #f0f0f0; border-radius: 16px; width: 720px; margin: 16px; }

#tags { font-size: 90%; }

#tags a { color: #333; }

#tags a:hover { color: #fb4; }

#relations ul { position: relative; margin: 0.5em 0 0 0; padding: 1.5em 0 0 3em; }

#relations ul:before { content: "関連記事"; position: absolute; top: 0; left: 0; padding: 0.2em 0.5em; background-color: #444; border-radius: 4px; font-size: 80%; line-height: 1; color: #fff; }