@charset "UTF-8";

/*--------------------------------------------------
共通設定
-----------------------------------------------------*/
/* PCの設定ここから */
/*body全体の初期スタイル調整*/
body {
	font-size: 62.5%; /*emの計算をしやすくするための定番設定*/
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: normal;
	color: #374047;
	line-height: 1.6;
	/* overflow: hidden; */
}
/*リンク文字の設定*/
a {
	text-decoration: underline;
}
a:link,
a:visited {
	color: #39f;
}
a:hover,
a:active {
	color: #f60;
}
/*セクションエリアの共通設定*/
section {
	clear: both;
	overflow: auto;
}
/* PCの設定ここまで */

/* spの設定ここから */
@media only screen and (max-width: 768px) {
	body {
		width: 100%;
	}
}
/* spの設定ここまで */

/*--------------------------------------------------
全体レイアウト／背景設定
-----------------------------------------------------*/
/* PCの設定ここから */
/*全体エリア（全体背景を設定するにはここ）*/
.main_container {
	background-image: url(../images/bg.webp);
	background-size: cover;
	background-attachment: fixed;
	background-position: center bottom 100%;
	background-repeat: no-repeat;
	background-color: #eee;
	font-size: 1.6em; /*=16px*/
}
/*記事(ボディ)エリア*/
.main_wrapper {
	background-color: #fff;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;

}
/*カラム全体の幅を変更する*/
.main_wrapper{
	width: 750px;
	max-width: 100%;
	margin: 0 auto; /*真ん中に要素を置きたいときに使う*/
}
.inner {
	padding: 1em 1.5em; /* サイドの共通余白(PC) */
}
/* PCの設定ここまで */

/* spの設定ここから */
@media only screen and (max-width: 768px) {
	.main_wrapper {
		border-left: none;
		border-right: none;
	}
	.main_wrapper {
		width: 100%;
	}
	.inner {
		padding: 1em 1em;/* サイドの共通余白(SP) */
	}
}
/* spの設定ここまで */

/*--------------------------------------------------
見出しタグ設定
-----------------------------------------------------*/
/* PCの設定ここから */
h2 {
	font-family: serif;
	text-align: center;
	font-weight: normal;
	font-size: 2.4em;
	color: #343434;
}
h3 {
	font-family: serif;
	text-align: center;
	font-weight: normal;
	font-size: 1.8em;
	color: #343434;
}
h4 {
	font-size: 1.6em;
	text-align: center;
	font-weight: bold;
}
h5 {
	margin: 0.5em 0em;
	padding: 0.1em;
	font-size: 1.2em;
	font-weight: bold;
	border-bottom: 1px dotted #ccc;
}
/* PCの設定ここまで */

/* spの設定ここから */
@media only screen and (max-width: 768px) {
	h2 {
		font-weight: normal;
		font-size: 1.6em;
		text-align: center;
	}
	h3 {
		font-weight: normal;
		font-size: 1.2em;
		font-weight: bold;
	}
	h4 {
		margin: 0.5em 0em;
		padding: 0.3em 0.6em;
		font-size: 1.2em;
		border: 1px solid #ccc;
		font-weight: bold;
	}
	h5 {
		margin: 0.5em 0em;
		padding: 0.1em;
		font-size: 1em;
		font-weight: bold;
		border-bottom: 1px dotted #ccc;
	}
}
/* spの設定ここまで */

/*------------------------------------------------------------
hover・・・ボタンホバー効果
-------------------------------------------------------------*/
.btn:hover {
	opacity: 0.8;
}

/*------------------------------------------------------------
clear・・・クリアフィックス解除
-------------------------------------------------------------*/
.clearfix {
	clear: both;
}

/*------------------------------------------------------------
蛍光ペンのようなボックスの設定
-------------------------------------------------------------*/
.box-yellow {
	padding: 5px 10px;
	background-color: #eaf174 !important;
} /*黄色*/
.box-yellow02 {
	padding: 5px 3px;
	background: linear-gradient(transparent 70%, #eaf174 70%);
} /*黄色*/

/*------------------------------------------------------------
入力フォームをハイライトする
-------------------------------------------------------------*/
input:focus,
textarea:focus,
input.focus,
textarea.focus {
	background-color: #ffffe4 !important;
}

/*------------------------------------------------------------
画像を簡単に回り込ませる（スマホでは解除ver.）
-------------------------------------------------------------*/
/*左に画像、右に文章*/
.left_01,
.left_02 {
	float: left;
	margin: 0.2em 0.4em 0.4em 0;
}

/*右に画像、左に文章*/
.right_01,
.right_02 {
	float: right;
	margin: 0.2em 0em 0.4em 0.4em;
}

@media only screen and (max-width: 768px) {
	.left_01,
	.right_01 {
		float: none;
		margin: 0 0 0.5em;
	}
	.imgcenter_01 {
		width: 100%;
		text-align: center;
	}
	.imgcenter_01 img {
		width: 50%;
		height: auto;
	}
}

/*------------------------------------------------------------
スマホ改行コード(スマホ時のみ改行される)
-------------------------------------------------------------*/
.sp_br {
	display: none;
}
@media only screen and (max-width: 768px) {
	.sp_br {
		display: block;
	}
}

/*------------------------------------------------------------
PCのみ改行コード(PC時のみ改行される)
-------------------------------------------------------------*/
.pc_br {
	display: block;
}
@media only screen and (max-width: 768px) {
	.pc_br {
		display: none;
	}
}


/*------------------------------------------------------------
強調デザイン
-------------------------------------------------------------*/
.red {
	color: #B39088;
}
.yellow {
	color: #f2fb60;
}
.bold {
	font-weight: bold;
}