@charset "utf-8";

/*
-----------------------------------------------------
使用したwebフォントとwebアイコンのライセンスについて
-----------------------------------------------------
*/

/*
 * "Droid Serif" is lisenced under the Apache License, version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0.html
 * by https://www.google.com/fonts(Steve Matteson)
 */

/*
 * "font-awesome" is lisenced under the SIL Open Font License 1.1
 * http://scripts.sil.org/OFL
 * by http://fontawesome.io/
 */

/*共通*/
*{
box-sizing:border-box;
word-break:break-all;
}

/*ベース*/
html,body{
color:#4D4946;
font-family: "メイリオ", Meiryo, sans-serif;
font-size:14px;
letter-spacing:0.02em;/*文字間隔*/
margin:0;
padding:0;
width: 100%;
line-height:200%;
background:url("bg01.png") repeat #FAFCFB;
}

header,main,nav,section,footer{
display:block;
}

/*枠組み*/
header,main,footer{
text-align:left;
margin:0;
padding:0;
width: 100%;
}

main{
background:url(bg02.png) repeat #F7F4F2;
}

/*インナーボックス*/
#harea,#mainbox,#farea{
padding:60px 0;
margin:0 auto;
width:800px;
}

/*セクション*/
section{
margin-bottom:40px;
}
section:last-of-type{
margin-bottom:0px;
}

/*リンク*/
a{
color:#9fa09e;
}
a:hover{
color:#F7D720;
}

/*重要*/
strong{
border-radius:4px;
padding:0 6px;
color:white;
background:#5CBBCC;
font-weight:normal;
}

/*強調*/
em{
border-radius:4px;
padding:0 6px;
font-style:normal;
color:#248C9E;
background:#F2FAFA;
}

/*googlefontsの一括指定*/
#harea>h1,section>h1,#navmenu,h2,h3{
font-family: 'Noto Serif JP', serif;
/*font-family: 'Droid Serif', serif;*/
font-weight:normal;
}

/*FontAwesome*/
section>h1:before,
nav li a:before{
color:#2E8D9E;
margin-right:0.5em;
content: "\f13d";
font-family: FontAwesome;
}

/*行間*/
header,section>h1,.pagetop{
line-height:1;
}
section,footer{
line-height:2;
}

/*見出し*/
#harea>h1{
font-size:95px;
letter-spacing:0.04em;/*文字間隔*/
margin:0 0 40px;
padding:0;
}
#harea>h1 a{
color:#4D4946;
text-decoration:none;
}
#harea>h1 a:hover{
color:#F7D720;
}
section>h1 {
border-bottom:2px dotted #7C7670;
text-align:left;
color:#4D4946;
font-size:20px;
margin:0 0 20px;
padding-bottom:15px;
}

/***********************オリジナルここから**********************************/

h2,h3{
    position: relative;
    font-size: 18px;
    font-weight: normal;
    margin: 0 0 1.5em;
    padding: 0.5em 0.5em 0.5em 3.0em;
border-bottom:1.8px dotted #7C7670;
}
 
h2:before{
    content: "□";
    font-size: 200%;
    position: absolute;
    color: #40E0D0;
    top: -0.8em;
    left: 0.3em;
    height: 12px;
    width: 12px;
}
 
h2:after{
    content: "□";
    font-size: 200%;
    position: absolute;
    color: #4169E1;
    top: -0.5em;
    left: 0;
    height: 12px;
    width: 12px;
}
 /* ナマエ登録ボタン       */
.button {
  display       : inline-block;
  border-radius : 10%;          /* 角丸       */
  font-size     : 10pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : auto;   /* 余白       */
  background    : #ffffff;     /* 背景色     */
  color         : #2E8D9E;     /* 文字色     */
  line-height   : 1.3em;         /* 1行の高さ  */
  opacity       : 1;           /* 透明度     */
  transition    : .3s;         /* なめらか変化 */
}
.button:hover {
  opacity       : 0.8;         /* カーソル時透明度 */
}
/****************************オリジナルここまで*********************************/
/*ナビ*/
#navmenu{
margin:0;
padding:0;
font-size:20px;
}
#navmenu ul{
margin:0;
padding:0;
list-style-type: none;
}
#navmenu ul li{
display:inline-block;
margin:0 10px;
}
#navmenu ul li:first-child{
margin-left:0;
}
#navmenu ul li:last-child{
margin-right:0;
}
#navmenu ul li a{
display:block;
color:#4D4946;
text-decoration:none;
}
#navmenu ul li a:hover{
color:#F7D720;
}

/*リスト*/
.list1{
}

/*ページトップリンク*/
.pagetop{
margin:0;
margin-top:5px;
text-align:right;
}
.pagetop a{
text-decoration:none;
}

/*配布元表示*/
#pfooter{
margin:0;
}
small{
font-size:90%;
}

/*画像*/
img{
margin:0;
padding:0;
border:0;
}
a img:hover{
opacity: 0.6;
}

/*画像の伸縮設定*/
img { 
max-width: 100%; 
height: auto; 
}

/*フェードインアニメーション*/
/*@keyframes fadein {
    0% {opacity: 0}
    100% {opacity: 1}
}
#mainbox {
    animation: fadein 2s ease 0s 1 normal;
}*/

/*狭いブラウザとタブレット向け*/
@media (max-width: 1020px) and (min-width: 768px){

body{
font-size:12px;
}

#harea,#mainbox,#farea{
width:600px;
padding:60px 0;
}

#harea>h1{
font-size:90px;
}
#navmenu{
font-size:15px;
}
#navmenu ul li{
margin-right:3px;
}
section>h1 {
font-size:15px;
}

}

/*スマホ向け*/
@media (max-width: 767px) {

body{
font-size:12px;
}

#harea,#mainbox,#farea{
padding:50px 0;
width:76%;
}

#harea>h1{
font-size:46px;
}

section>h1 {
font-size:15px;
}

#navmenu{
font-size:15px;
}
#navmenu ul li{
display:block;
margin:0 0 25px;
}
#navmenu ul li:last-child{
margin-bottom:0;
}

}