@charset "utf-8";
/*
 * 記事ページのスタイルシート
 * ======= ====== ||    \\    ====
 * ||        ||   ||  \\    ||    ||
 * ||=====   ||   ||\\     ||      ||
 * ||        ||   ||  \\    ||    ||
 * ======= ====== ||    \\    ====
 *
 * モバイルファースト
 * => 基本の CSS は、モバイル用のデザインとする
 * => PC対応 (768px以上) は、スマートフォン、タブレット用と異なる部分だけを下部に記述する
 *
 * できるだけシンプルに分かりやすくする
 * => 複雑にしない
 */
/*--------------------------------------------------
>>> 見出し
--------------------------------------------------*/
h1 {
    font-size: 1.4em;
    font-weight: normal;
    margin: 0;
    padding: 0.5em 0 0 0;
}
h2 {
    margin: 1rem 0 0 0;
    padding: 0.5rem 0 0.3rem 0.5rem;
    font-size: 1.2em;
    color: antiquewhite;
    /* border-bottom: double 5px green; */
    background-color: green;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
}
h3 {
    font-size: 1.1em;
    padding: 0 0 1px 0;
    border-bottom: solid 2px green;
}
/*--------------------------------------------------
>>> 画像
--------------------------------------------------*/
.img {
    display: block;
    margin: 0 auto 1rem auto;
    width: 98%;
}
/*--------------------------------------------------
>>> 「次のページへ」のリンク
--------------------------------------------------*/
.next-page a {
    width: 10rem;
    margin: 2rem auto 2rem auto;
	padding: 1rem 4rem;
	display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    /*color: green;*/
    color: antiquewhite;
	background: green;
    font-weight: bold;
	border: solid 2px green;
	transition: 0.5s;
}
.next-page a:hover {
    /*color: antiquewhite;*/
    color: green;
    /*background: green;*/
    background: none;
}
/*--------------------------------------------------
>>> 「ホームへ」のリンク
--------------------------------------------------*/
.to-home a {
    width: 10rem;
    margin: 2rem auto 2rem auto;
	padding: 1rem 4rem;
	display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    color: grey;
	font-weight: bold;
	border: solid 2px grey;
	transition: 0.5s;
}
.to-home a:hover {
    color: antiquewhite;
	background: grey;
}
/*==========           ===========           ===========           ===========           ===========
>>> PC対応 (768px以上) => スマートフォン、タブレット用と異なる部分だけ記述する
=========           ===========           ===========           ===========           ===========*/
@media screen and (min-device-width: 768px) {
/*--------------------------------------------------
>>> 画像
--------------------------------------------------*/
.img {
    display: block;
    margin: 0 auto 1rem 2rem;
    width: 50%;
}
}  /* @media screen and (max-device-width: 768px) */