/*フォントファミリー指定*/
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
    font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/*上部メニュー中央寄せにして幅を等分に変更する方法*/
@media print, screen and (min-width: 960px) {
header .smanone ul.menu {
	display: table;
	table-layout: fixed;
	text-align: center;
	margin: 0 auto;
}
header .smanone ul.menu li {
	display: table-cell;
	float: none;
}}


/*上部メニュー５つに均等割り*/
header .smanone ul.menu li{
        width: 150px !important;
}


/*上部メニューのカラー変更*/
header .smanone ul.menu li{
transition: 0.5s}/*ゆっくりと色を変える*/
 
header .smanone ul.menu li:hover{
  	color:#FFFFFF;
  	-moz-opacity: 0.8;
	opacity: 0.8;
}
 
header .smanone ul.menu li a:hover{
color: #003a7c !important;/*マウスオーバー時の文字色*/
}



/*h2をboldからノーマルに
------------------------------------*/
h2 {
font-weight:normal!important;
border-radius: 5px;/*見出しの縁を丸く*/
/*-- ここまで --*/
}






/*記事一覧ページのフォントサイズ*/
dd h3 a {
font-size:22px;
line-height: 28px;
}


/*段落のフォントサイズ
------------------------------------*/
p {
font-size: 16px;
line-height: 28px;
margin-bottom: 24px;

/*-- ここまで --*/
}

/*サイドメニュー*/
#side aside h4 {
background-color: #fff;
padding: 10px;
margin-bottom: 1px;
border-radius: 3px 3px 0px 0px;
border-left: 15px solid #003a7c;
}
 
aside .kanren {
padding: 15px 5px 5px 7px;
background-color: #fcfcfc;
border-radius: 0px 2px 3px 2px;}


/*--------------------------------------
  TOC+
--------------------------------------*/
#toc_container {
	display: block !important;
	width: 100% !important;
	background: #fff;
	border: 1px solid #ccc;
	font-size: 95%;
	box-sizing: border-box;
	line-height: 1.4;
	margin: 36px auto;
	padding: 1em 2em;
}
 
#toc_container .toc_title {
	text-align: center;
	background: #eee;
	border-bottom: 2px solid #ddd;
	padding: 0.4em 0;
}
 
#toc_container ul {
    list-style: none;
    margin-bottom: 0;
}
 
#toc_container ul li {
    margin: 0;
    padding-left: 0;
    text-indent: 0;
}
 
#toc_container ul a {
	display: block;
	text-decoration: none;
	color: #444;
	border-bottom: 1px dotted #ccc;
}
 
#toc_container .toc_list > li > a {
	border-bottom: 2px solid #ccc;
	font-size: 110%;
}
 
#toc_container ul ul {
	padding: 1em 0 1em 1em;
}
 
#toc_container li {
	margin-bottom: 0.8em;
	padding-bottom: 0.2em;
}


@media only screen and (min-width: 600px) {
    /*--------------------------------
    各フォント設定 (タブレット・PC)　読みやすさアップ
    ---------------------------------*/
    p {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 959px) {
    /*--------------------------------
    各フォント設定 (スマホ)　読みやすさアップ
    ---------------------------------*/
    p {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 26px;
    }
}


/*--------------------------------------
赤ボタン（エリアチェックボタン）
--------------------------------------*/
.btn-area-check {
  	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
    width:80%;
    font-size:18px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:10px;
    color:#ffffff;
    background-color:#01DF01;
    border-radius:5px;
  }
.btn-area-check:hover{
	color:#FFFFFF;
  	-moz-opacity: 0.8;
	opacity: 0.8;
}

/*--------------------------------------
緑ボタン
--------------------------------------*/
.btn-green {
    margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
    width:94%;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:20px 10px 20px 10px;
    color:#ffffff;
    background-color:#23c41b;
    border-radius:5px;
  }
.btn-green:hover{
	color:#FFFFFF;
  	-moz-opacity: 0.8;
	opacity: 0.8;
}


/*--------------------------------------
青ボタン
--------------------------------------*/
.btn-blue {
    margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
    width:94%;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:20px 10px 20px 10px;
    color:#ffffff;
    background-color:#33a1e0;
    border-radius:5px;
  }
.btn-blue:hover{
	color:#FFFFFF;
  	-moz-opacity: 0.8;
	opacity: 0.8;
}

















/* 参考リンクhttps://luelue.com/blog-entry-style/ */
a.ref {
display:block;
margin:1em 0;
}
a.ref:before {
content:"参考";
background:#666;
color:#fff;
border-radius:6px;
padding:5px 10px;
margin-right:8px;
display:inline-block;
vertical-align:middle;
line-height:100%;
font-size:92%;
}

/* 参考リンクボックスhttps://luelue.com/blog-entry-style/ */
.refBox {
background:#efefef;
border-radius:6px;
padding:1em;
}
.refBox:before {
content:"参考：";
}


/* ポイント枠thttps://luelue.com/blog-entry-style/ */
.pointwaku {
border:5px solid #01DF01;
padding:30px 20px 15px 20px;
border-radius:10px;
position:relative;
font-size:16px;
margin-bottom:2.2em;
}
.pointwaku:before {
content:"ポイント！";
position:absolute;
left:15px;
top:-22px;
font-weight:bold;
color:#01DF01;
background:#fff;
font-size:25px;
padding:0 5px;
}


/*--------------------------------------
 テーブルを横スクロールhttp://tamasaburo.com/entry/table-spsite-scroll
--------------------------------------*/
/* テーブルを横スクロール */
table {
 width: 100%;
}

/*tableをスクロールさせる*/
/*tableのセル内にある文字の折り返しを禁止*/
.scroll {
 overflow: auto;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar {
 height: 5px;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-track {
 background: #F1F1F1;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}



/* ===============消しちゃダメ============== */
/* kaereba*/
/* jam-note.com/kaereba-yomereba-design参考 */
/* ======================================== */

.kaerebalink-box,
.booklink-box {
	border-radius: 4px;
	box-shadow: 1px 1px 3px 1px #ddd;
	padding: 15px;
	overflow: hidden;
	margin: 50px 0;
}
@media screen and ( min-width: 640px ){
.kaerebalink-box,
.booklink-box {
	margin: 50px 15px;
}
}
.kaerebalink-image,
.booklink-image {
	margin-right: 20px;
	float:left;
}
.kaerebalink-info,
.booklink-info {
	overflow: hidden;
}
.kaerebalink-name a,
.booklink-name a{
	font-size: 18px;
	text-decoration: none;
}
.kaerebalink-powered-date a,
.kaerebalink-powered-date,
.booklink-powered-date a,
.booklink-powered-date {
	font-size: 12px;
	margin-top: 5px;
	color:#444;
	margin-bottom:10px;
}
.kaerebalink-link1,
.booklink-link2 {
	font-size: 18px;
	margin-top:30px;
}
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkyahoo {
	width: 75%;
	text-align: center;
	margin: 15px 0;
}
.shoplinkamazon {
	background-color:#ff9900;
	border: 1px solid #ff9900;
	border-radius: 6px;
}
.shoplinkrakuten {
	background-color:#bf0000;
	border: 1px solid #bf0000;
	border-radius: 6px;
}
.shoplinkyahoo {
	background-color:#4070ff;
	border: 1px solid #4070ff;
	border-radius: 6px;
}
.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkyahoo a {
	text-decoration: none;
	display: block;
	padding: 5px 0;
	color:#fff;
}
.shoplinkamazon a:hover{
	background-color:#ffad33;
}
.shoplinkrakuten a:hover{
	background-color:#cc3333;
}
.shoplinkyahoo a:hover{
	background-color:#668dff;
}

/* iPhone6 Plus以下のスマホを想定 */
@media only screen and (min-width: 300px) {
.kaerebalink-image,
.booklink-image {
	margin: 0 auto;
	margin-bottom: 20px;
	float: none;
}
.kaerebalink-image img,
.booklink-image img {
	display: block;
}
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkyahoo {
	width: 95%;
	margin: 10px auto;
}
.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkyahoo a {
	padding: 10px 0;
}
}

/* 非表示設定 */
.kaerebalink-detail {display:none;}
.booklink-detail {display:none;}

.shoplinkrakuten img,
.shoplinkamazon img {
	display: none;
}

