@charset "UTF-8";

/**
 *
 * CSSリセット、再定義
 *
**/


/**
 * CSSリセット
 * 参照元：http: //meyerweb.com/eric/tools/css/reset/
**/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote: before, blockquote: after,
q: before, q: after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/**
 * 再定義
**/

/*rootのfontsize　62.5%で　1rem=10px*/
html { font-size: 62.5%; }


@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body {
	margin: 0;
	padding: 0;
	text-align: justify;
	min-width: 1100px;
	color: #1d1312;
	font: 1.6rem -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		-webkit-font-smoothing: antialiased;
	line-height: 2.4rem;
	letter-spacing: 0px;
	z-index: 1;
}

table {
	letter-spacing: 0px;
	empty-cells:  show;
}

table td, table td {
	empty-cells: show;
}

a:link { color: #2581c4; }

a:hover {
	opacity: .5;
	-webkit-opacity: .5;
	-moz-opacity: .5;
	filter: alpha(opacity=50);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	text-decoration: none;
}

a:visited { color: #2581c4; }

a {
	-webkit-transition: opacity 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;

}

img {
	border: none;
}


/**
 * SP表示
**/
.sp_disp { display: none !important; }


/**
 * フォントカラー
**/

.txt_center{
	text-align: center;
}

.red_b{
	color: #FF0000;
	font-weight: bold;
	font-size: 1.2em;
}

.txt_red{
	color: #FF0000;
	font-weight: bold;
}

.mk_yellow_s{
	background: #ffff09;
	font-weight: bold;
}

.txt_b{
	font-weight: bold;
	font-size: 1.2em;
}
.mk_yellow{
	background: #ffff09;
	font-size: 1.2em;
}


/**
 * テキストアライン
**/

.txt_right { text-align: right !important; }
.txt_left { text-align: left !important; }
.txt_center { text-align: center !important; }
.txt_center img {
	margin-left: auto !important;
	margin-right: auto !important;
}
.kerning {font-feature-settings: "palt";	
}

.mt80 {
	margin: 80px 0 0 0 !important;
}

/**
 * clearfix
**/

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}



/* レイアウト・共通デザイン
   ================================================================ */


/**
 * ラップ
**/
.wrap {
	width: 100%;
	position: relative;
	background: #efefef;
}

/**
 * コンテンツ
**/
.content {
	width: 800px;
	margin: 20px auto 0 auto;
	padding: 0 20px 0 20px;
}


/**
 * フッター
**/
footer {
	clear: both;
	background: #369001;
	margin: 120px 0 0 0;
	position: relative;
}

footer a:link,
footer a:hover,
footer a:visited {
	color: #fff;
	font-size: 1.6rem;
	line-height: 2.6rem;
}


.copyright {
	background: #333;
	text-align: center;
	color: #fff;
	font-size: 1.4rem;
	padding: 15px 0;
}

.copyright a {
	font-size: 1.4rem !important;
}

/*footer-ページトップ（PC用）*/
#pageTop {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
	background: url(images/common/f_pagetop.png) no-repeat;
	background-size: 100%;
	cursor: pointer;
	z-index: 100;
	-webkit-transition: opacity 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	transition: opacity 0.5s ease-out;
 }

#pageTop a {
   	display: block;
}

#pageTop:hover {
	opacity: .5;
	-webkit-opacity: .5;
	-moz-opacity: .5;
	filter: alpha(opacity=50);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	text-decoration: none;
}

/**
 *　ページタイトル
**/

.pagetitle {
	width: 100%;
	padding: 30px 0 30px 0;
	background: #fff;
	border-top: 15px  solid #333;
}

.pagetitle h1 {
	margin: 0 auto 20px auto;
	width: 800px;
	font-size: 4.6rem;
	line-height: 5.6rem;
	color: #000;
	font-weight: bold;
}

.pagetitle p {
	margin: 0 auto 0 auto;
	width: 800px;
	color: #999;
}

/*　パンクズ*/
.pankuzu {
	margin: 0 auto 20px auto;
	width: 800px;
	font-size: 1.4rem;
	line-height: 1.6rem;
	color: #666;
	z-index: 50;
}

/*　公式サイトへ */
.bt_hp {
	margin: 50px 7% 0 7% !important;
	animation: prun 2.2s ease-in infinite;
	-webkit-animation: prun 2.2s ease-in infinite;
	-moz-animation: prun 2.2s ease-in infinite;
	-o-animation: prun 2.2s ease-in infinite;
	-ms-animation: prun 2.2s ease-in infinite;
}

@keyframes prun {
48%, 62% {transform: scale(1.0, 1.0)}
50% {transform: scale(1.1, 0.9)}
56% {transform: scale(0.9, 1.1) translate(0, -5px)}
59% {transform: scale(1.0, 1.0) translate(0, -3px)}
}

@-webkit-keyframes prun{
48%, 62% {-webkit-transform: scale(1.0, 1.0)}
50% {-webkit-transform: scale(1.1, 0.9)}
56% {-webkit-transform: scale(0.9, 1.1) translate(0, -5px)}
59% {-webkit-transform: scale(1.0, 1.0) translate(0, -3px)}
}

.bt_hp a {
	display: block;
	height: 96px;
	background: url(images/common/bt_hp.png) top center no-repeat;
	text-align: center;
	padding: 30px 0 0 0;
	font-size: 3.8rem;
	font-weight: bold;
	line-height: 3.0rem;
}

.bt_hp a:link,
.bt_hp a:hover,
.bt_hp a:visited {
	color: #fff;
	text-decoration: none;
}

/* 記事一覧
   ================================================================ */
.postloop li {
	clear: both;
	margin: 0 0 20px 0;
	padding: 20px;
	background: #fff;
}

.postloop li a {
	display: block;
}

.postloop li img {
	float: left;
	margin: 0 20px 0 0;
	width: 17%;
    height: auto;
}

.post_infobox {
	float: left;
	width: 80%;
}

.post_infobox h2 {
	font-size: 2.4rem;
	line-height: 3.4rem;
	width: 100%;
}

.post_infobox p {
	color: #333;
	width: 100%;
}




/* 記事装飾
   ================================================================ */
.post_pic img {
	width: 100%;
	margin: 0 0 20px 0;
}

.post {
	border: 1px solid #ddd;
	padding: 0 0 30px 0;
	background: #fff;
}

.post img :first-child{
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
}

.post img{
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
}



.post h2{
	position: relative;
	color: #000;
	background-position: 12px auto;
	display: block;
	padding: 10px 10px 10px 10px;
	font-size: 3.8rem;
	font-weight: bold;
	line-height: 4.8rem;
	margin: 60px 20px 0 20px;
	border-bottom: 2px solid #2581c4;
}

.post h3{
	border-left: 7px solid #2581c4;
	color: #000;
	font-size: 3.0rem;
	line-height: 3.2rem;
	font-weight: bold;
	padding: 0 0 0 20px;
	margin: 60px 20px 0 20px;
}

.post h4{
	padding: 0 0 0 10px;
	font-size: 2.8rem;
	line-height: 3.0rem;
	font-weight: bold;
	color: #000;
	margin: 60px 20px 0 20px;
}


.post p{
	font-size: 1.8rem;
	line-height: 3.0rem;
	margin: 30px 4% 0 4%;
}

/* リストスタイル */
.post ul{
	margin: 30px 4% 0 4%;
}

.post li{
	margin: 20px 0 0 0;
	padding: 0 0 0 35px;
	background: url(images/common/ico_list.png) no-repeat;
	background-position: 0 50%;
	font-size: 1.8rem;
	line-height: 2.6rem;
}

.post li:first-child{
	margin: 0 0 0 0;
}

.post .osusume li{
	margin: 20px 0 0 0;
	padding: 0 0 0 0;
	background: none;
	background-position: 0 50%;
	font-size: 2.2rem;
	line-height: 2.8rem;
}

/* post-waku */
.waku{
	margin: 30px 3% 0 3%;
	background: #edf6ff;
	padding: 30px;
}

.waku h3{
	margin: 0 20px 20px 0;
}

.waku p{
	margin: 20px 0 0 0;
}

.post blockquote {
	background: #efefef url(images/common/bg_blockquote.png) top center no-repeat;
	background-size: 98% auto;
	background-position: 50% 10px;
	padding: 30px 30px 0 30px;
	margin: 30px 3% 0 3%;
	font-size: 1.8rem;
	line-height: 2.8rem;
	color: #666;
}

.post blockquote p {
	margin: 0 0 20px 0;
}

.post blockquote:before,
.post blockquote:after {
    content: " ";
    display: table;
}
.post blockquote:after {
    clear: both;
}
.post blockquote {
    *zoom: 1;
}

.post blockquote .caption {
	margin: 0 0 30px 0 !important;
}

.caption{
	font-size: 1.4rem !important;
	line-height: 1.8rem !important;
	color: #999;
	margin: 0 4% 30px 4% !important;
}

.caption a:link,
.caption a:hover,
.caption a:visited {
	color: #999;
}

.date {
	color: #999;
	text-align: right;
	font-size: 1.4rem;
	line-height: 1.8rem;
	margin: 30px 0 0 0;
}

/* post-目次（jquery利用） */

#toc:before {
  	content: "目次";
  	padding-left: 3%;
  	font-weight: bold;
  	font-size: 1.8rem;
  	line-height: 2.4rem;
}

#toc {
	background:#edf6ff;
	border: 1px solid #ddd;
	font-size: 1.6rem;
	line-height: 2.4rem;
	width: 91%;
	margin: 20px 3% 0 3%;
	padding: 20px 3% 20px 0;
}

#toc ol {
  	margin: 3px 0 0 3%;
  	padding: 0;
  	background: none;
  	list-style-type: decimal-leading-zero;
  	color: #2581c4;
  	list-style-position: inside;
}

#toc ol li {
  	margin: 3px 0 0 0;
  	padding: 0;
  	background: none;
}

#toc ol ol {
  	margin: 3px 0 0 7%;
  	padding: 0;
  	background: none;
  	list-style: circle;
}

#toc ol ol ol,
#toc ol ol ol ol {
  	margin: 3px 0 0 0;
  	padding: 0;
  	background: none;
  	list-style: circle;
}

#toc a:hover {
  	text-decoration: underline;
}



/* テーブル
   ================================================================ */

/*テーブル*/
table{
	border-collapse: collapse;
	width: 96%;
	margin: 30px 3% 30px 3%;
	padding: 10px;
	clear: both;
}
table th{
	padding: 10px;
	text-align: left;
	color: #2581c4;
	background-color: #edf6ff;
	border: 1px solid #2581c4;
	font-weight: bold;
	font-size: 1.6rem;
	line-height: 2.0rem;
	vertical-align: middle;
}

.tbl_th20 th {
	width: 20%;
}

table .txt_small {
	font-size: 1.4rem;
	line-height: 1.6rem;
}

table .th_top th{
	background: #76b644;
	color: #fff;
}
table td{
	padding: 15px;
	background-color: #fff;
	border: 1px solid #2581c4;
	vertical-align: middle;
}