<meta charset="UTF-8"><!-- 文字コードの指定 -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"><!-- リセットCSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web"><!-- GoogleFonts -->
<style type="text/css" media="screen and (min-width:600px)">

/* webフォント設定 */

@font-face
{
font-family:"ロゴたいぷゴシック-コンデンスド" ;
src: url('https://cdn.leafscape.be/LogoTypeGothicCondense/07LogoTypeGothic-Condense_web.woff2')
     format("woff2");
}

/* 共通設定 */

html {
 background: transparent;
 font-size: 62.5%;
}
body {
 color: #3c432b;
 font-size: 1.3rem;
 font-family: "ロゴたいぷゴシック-コンデンスド", 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
 letter-spacing: 0.2em;
 line-height: 180%;
}
a {
 text-decoration: none;
}
h1 {
 margin: 5rem 0%;
 color: #86877a;
 font-family: "ロゴたいぷゴシック-コンデンスド", 'Titillium Web', sans-serif;
 font-size: 3.0rem;
 text-align: center;
 position: relative;
}
h2,h3,h4 {
 font-family: 'Titillium Web', "ロゴたいぷゴシック-コンデンスド", sans-serif;
}
h2 {
 margin: 0.3em 0em;
 font-size: 1.3em;
}
h2::before {
 content: '●';
 padding-right: 0.3em;
 color: #cfee84;
}
h3 {
 margin: 0.5em;
 font-size: 1.1em;
}
em {
 font-style: normal;
 background: linear-gradient(#ffffff 50%, #fffe8b 50%);
}
input,textarea,button,select {
 font-family: inherit;
 font-size: 100%;
}
input,button,select {
 background: #d4dc58;
 border: none;
}
textarea,input[type="text"] {
 background: #ffffff;
 border: solid 1px #46562f;
}
textarea {
 padding: 0.5em;
}

/* 段落設定 */

p {
 padding: 0em 1em;
}
section {
 margin: 2em 0em;
}

/* メインコンテンツ設定 */

main {
 display: block;
 margin: 3rem auto 10rem;
  width: 50%;
  min-width: 500px;
}
main a {
 color: #365e15;
}

/* ヘッダー、ナビゲーション設定 */

header {
 min-height: 20vh;
 min-width: 500px;
 font-family: 'Titillium Web', sans-serif;
}
nav ul {
 display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
nav li {
 margin: 0em 1em;
 height: 10rem;
 width: 10rem;
 background: url('画像URL') 70% center / cover no-repeat #fffe8b;
 border-radius: 50%;
 position: relative;
}
nav li a {
 display: inline-block;
 height: 10rem;
 width: 10rem;
 background: transparent;
 border-radius: 50%;
 color: #86877a;
 font-size: 1.8rem;
 line-height: 10rem;
 text-align: center;
 transition: 0.4s;
}
nav li a:hover {
 background: rgba(0,0,0,0.2);
 color: #ffffff;
}
nav li a:hover::before {
 content: '';
 display: inline-block;
 padding: 1em;
 height: 1em;
 width: 1em;
 background: url('画像URL（ミント）') center / 70% no-repeat;
 position: absolute;
  top: 0em;
  left: 3em;
}

/* ブログ設定 */

article {
 margin: 3em 0em;
 background: #ffffff;
}
.time {
 display: inline-block;
 padding: 1em 2em;
 margin-bottom: 1em;
 background: url('画像URL') center / 120% #fbf967;
 border-radius: 2em;
}
.title {
 padding: 0.5em 3em;
}
.bg {
 padding-bottom: 1em;
 background: repeating-linear-gradient(to bottom, #d3e5a8 0rem, #d3e5a8 0.1rem, #ffffff 0.1rem, #ffffff 2.5rem);
 line-height: 2.5rem;
}

/* メールフォーム設定 */

form input {
 padding: 0.5em;
 margin-right: 1em;
}
form textarea {
 height: 6em;
 width: 60%;
}
</style>
<style type="text/css" media="screen and (max-width:599px)">

/* 共通設定 */

html {
 background: transparent;
 font-size: 62.5%;
}
body {
 color: #3c432b;
 font-size: 1.2rem;
 font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
 letter-spacing: 0.2em;
 line-height: 180%;
}
a {
 text-decoration: none;
}
h1 {
 margin: 2em 0em;
 font-size: 1.3em;
 text-align: center;
}
h2 {
 padding-bottom: 0.3em;
 margin: 0.5em 0em;
 font-size: 1.1em;
 transform: rotate(-3deg);
}
h3 {
 margin: 0.5em;
 color: #9b9b7e;
}
em {
 color: #9fbe0d;
 font-style: normal;
}
input,textarea,button,select {
 font-family: inherit;
 font-size: 100%;
}
input,button,select {
 background: #d4dc58;
 border: none;
}
textarea,input[type="text"] {
 background: #ffffff;
 border: solid 1px #46562f;
}
textarea {
 padding: 0.2em;
 width: 90%;
}

/* 段落設定 */

p {
 padding: 0em 1em;
}
section {
 margin: 1em 0em;
}

/* メインコンテンツ設定 */

main {
 display: block;
 margin: 1em auto;
  width: 90%;
}
main a {
 border-bottom: solid 1px #cfee84;
 color: #888888;
}

/* ヘッダー設定 */

header {
 padding: 3em 0em 1em;
 text-align: center;
}
nav ul {
 display: flex;
  justify-content: center;
}
nav li {
 margin: 0em 0.5em;
}
nav li a {
 padding: 0.5em 1em;
 background: url('画像URL') center / 140% #fbf967;
 color: #000000;
}

/* ブログ設定 */

article {
 margin: 3em 0em;
 background: #ffffff;
}
.time {
 display: inline-block;
 padding: 0.5em 1em;
 margin-bottom: 1em;
 background: url('画像URL') center / 120% #fbf967;
}
.title {
 padding: 0.5em;
 color: #3c432b;
}
.bg {
 padding-bottom: 1em;
 margin: 0em 1em;
 background: repeating-linear-gradient(to bottom, #d4dcc0 0rem, #d4dcc0 0.1rem, #ffffff 0.1rem, #ffffff 2.5rem);
 line-height: 2.5rem;
}

/* メールフォーム設定 */

form input {
 padding: 0.5em;
 margin-right: 1em;
}
form textarea {
 height: 6em;
 width: 95%;
}
</style>
