@charset "utf-8";

/* ============================================================
	共通CSS
============================================================ */
/* ----------------------------------------------------------
	＠media＿小：～480
		@media screen and (max-width:480px)
	＠media＿中大：481～
		@media screen and (min-width:481px)
	＠media＿小中：～960
		@media screen and (max-width:960px)
	＠media＿中：481～960
		@media screen and (max-width:960px) and (min-width:481px)
	＠media＿大：961～
		@media screen and (min-width:961px)
	＠media＿jQuery_acNav：800
		@media only screen and (max-width: 800px)
	＠media_IEのみ
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)

---------------------------------------------------------- */

/*--------------------------------------------

	Main color
		green＿#69aa29	rgba(105,170,41,1.0)
	Sub color
		pink＿#db6aa4	rgba(219,106,164,1.0)
		blue＿#5eb7e8	rgba(94,183,232,1.0)
		gray＿#898989	rgba(137,137,137,1.0)
	Text color
		#444

--------------------------------------------*/

/* =========================================================
	初期設定
========================================================= */
/* --------------------------------------
	ページ
-------------------------------------- */
/*
	フォント：16px x 0.625 = 10px(=1rem)
	基準：16px
*/
html { font-size: 62.5%; }
body {
	font-family: "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, sans-serif;
	word-wrap: break-word; text-align: left;
	font-size: 1.6rem; line-height: 1.7;
	color: #444; background: #FFF;
}
/* ＠media＿小：～480 */
@media screen and (max-width:480px){
	body { font-size: 1.4rem; line-height: 1.5; }
}

/* --------------------------------------
	文字装飾
-------------------------------------- */
/* 文字選択 */
::selection { background: rgba(0,0,0,0.1); }
::-moz-selection { background: rgba(0,0,0,0.1); }

/* テキスト装飾 */
b, em,strong, .bold { font-style: normal; font-weight: bold; }
.fw_normal { font-weight: normal; }

.del, s { text-decoration: line-through; }
sub, sup { font-size: 50%; vertical-align: baseline; }

.marker { background: linear-gradient(transparent 60%, #FDD 60%); }

/* フォントサイズ */
/* ＠media＿小：～480 */
@media screen and (max-width:480px){
	.fs10, .fs11 { font-size: 0.9rem; }
	.fs12, .fs13 { font-size: 1.0rem; }
	.fs14, .fs15 { font-size: 1.2rem; }
	.fs16, .fs17 { font-size: 1.3rem; }
	.fs18, .fs19 { font-size: 1.4rem; }
	.fs20, .fs21 { font-size: 1.5rem; }
	.fs22, .fs23 { font-size: 1.6rem; }
	.fs24, .fs25 { font-size: 1.7rem; }
	.fs26, .fs27 { font-size: 1.8rem; }
	.fs28, .fs29 { font-size: 1.9rem; }
	.fs30 { font-size: 2.0rem; }
}
/* ＠media＿中大：481～ */
@media screen and (min-width:481px) {
	.fs10 { font-size: 1.0rem; }
	.fs11 { font-size: 1.1rem; }
	.fs12 { font-size: 1.2rem; }
	.fs13 { font-size: 1.3rem; }
	.fs14 { font-size: 1.4rem; }
	.fs15 { font-size: 1.5rem; }
	.fs16 { font-size: 1.6rem; }
	.fs17 { font-size: 1.7rem; }
	.fs18 { font-size: 1.8rem; }
	.fs19 { font-size: 1.9rem; }
	.fs20 { font-size: 2.0rem; }
	.fs21 { font-size: 2.1rem; }
	.fs22 { font-size: 2.2rem; }
	.fs23 { font-size: 2.3rem; }
	.fs24 { font-size: 2.4rem; }
	.fs25 { font-size: 2.5rem; }
	.fs26 { font-size: 2.6rem; }
	.fs27 { font-size: 2.7rem; }
	.fs28 { font-size: 2.8rem; }
	.fs29 { font-size: 2.9rem; }
	.fs30 { font-size: 3.0rem; }
}

/* フォントカラー */
.fc_white { color: #FFF; }
.fc_red { color: #C00; }
.fc_pink { color: #F69; }
.fc_orange { color: #F74; }
.fc_green { color: #396; }
.fc_blue { color: #55C; }
.fc_gray { color: #BBB; }
.fc_black { color: #444; }

/* --------------------------------------
	段落・文字揃え
-------------------------------------- */
.txt_c { text-align: center !important; }
.txt_r { text-align: right !important; }
.txt_l { text-align: left !important; }

.ver_t { vertical-align: top !important; }
.ver_m { vertical-align: middle !important; }
.ver_b { vertical-align: bottom !important; }

/* --------------------------------------
	リンク
-------------------------------------- */
a {
	color: #5eb7e8; text-decoration: underline;
	cursor: pointer; outline: none !important;
	transition: all 0.3s;
}
a:hover { color: #db6aa4; }

/* --------------------------------------
	画像リンク
-------------------------------------- */
/* ＠media＿大：961～ */
@media screen and (min-width:961px) {
	a:not(.img_anime):not([class*="lightbox_img"]) img { transition: opacity 0.2s; }
	a:not(.img_anime):not([class*="lightbox_img"]) img:hover { opacity: 0.7; }
	/* 画像リンク(border) */
	a.lightbox_img,
	a.img_anime {
		display: block; width: 100%; height: 100%;
		overflow: hidden;
		box-sizing: border-box;
		position: relative;
	}
	a.lightbox_img::before,
	a.img_anime::before {
		content: ""; display: block; width: 100%; height: 100%;
		position: absolute; left: 0; top: 0; z-index: 1;
		box-sizing: border-box;
		border: 0px solid rgba(0, 0, 0, 0);
		transition: all 0.2s ease-in-out;
	}
	a.lightbox_img:hover::before,
	a.img_anime:hover::before {
		border: 5px solid rgba(255, 255, 255, 0.5);
	}
}

/* ---------------------
	画像
--------------------- */
img { max-width: 100%; }
object { pointer-events: none; }

/* ---------------------
	区切り線
--------------------- */
/* 通常 */
hr {
	height: 0; margin: 1.0rem 0; font-size: 0; line-height: 0;
	border: 0; border-bottom: 1px dashed #CCC;
}

/* --------------------------------------
	リスト
-------------------------------------- */
/* ---------------------
	通常
--------------------- */
ul { list-style: square outside; }
ul > li > ul { list-style: circle; }
/* ---------------------
	アイコンマーカー
--------------------- */
/* 共通 */
ul[class*="ul_icon_"] { list-style: none; padding-left: 0; }
ul[class*="ul_icon_"] > li { text-indent: -1.5em; padding-left: 1.5em; }
ul[class*="ul_icon_"] > li::before { padding-right: 0.5em; }

/* ※印 */
ul.ul_icon_kome > li::before  { content: "\00203b"; }

/* ---------------------
	インライン
--------------------- */
/* 共通 */
ul[class*="ul_inline"] { padding: 0; margin: 0; list-style: none; }
ul[class*="ul_inline"] > li { display: inline; }

/* 仕切り(｜)付き */
ul[class*="ul_inline"].split > li::before  { content: "\00ff5c"; padding-right: 0.5em; }
ul[class*="ul_inline"].split > li:first-child::before  { content: ""; padding-right: 0; }

/* ---------------------
	バナーボックス
--------------------- */
ul[class*="ul_bnbox"] { padding: 0; margin: 0; list-style: none; text-align: center; }
ul[class*="ul_bnbox"] > li { display: inline-block; margin: 0; }
ul[class*="ul_bnbox"] > li + li { margin-top: 5px; }
ul[class*="ul_bnbox"] > li a { display: block; }

/* ---------------------
	マーカー削除
--------------------- */
ul.ul_none,
ul.ul_none > li,
ul:not([class*="icon_"]) li.ul_none {
	list-style: none; padding-left: 0;
}

ul[class*="icon_"] > li.ul_none { text-indent: 0; padding-left: 0; }
ul[class*="icon_"] > li.ul_none::before  { content: ""; padding-right: 0; }

/* --------------------------------------
	数字リスト
-------------------------------------- */
ol:not([class*="brackets"]):not(.ol_none) {
	list-style-type: decimal-leading-zero;
	padding-left: 2em;
}

/* 括弧[]付き */
ol.brackets { padding-left: 0; }
ol.brackets::after { counter-reset: cnt; }

ol.brackets > li {
	list-style-type: none;
	padding-left: 1.8em; text-indent: -1.8em;
	counter-increment: cnt;
}
ol.brackets > li::before  {
	content: "\005b" counter(cnt) "\005d";
	padding-right: 0.5em;
}

ol.brackets > li ul { text-indent: 0; }
/* ---------------------
	マーカー削除
--------------------- */
ol.ol_none { list-style: none; padding-left: 0; }

/* --------------------------------------
	定義リスト
-------------------------------------- */
/* ---------------------
	共通
--------------------- */
dl,
dl dt,
dl dd { margin: 0; padding: 0; }
dl dt:not([class*="dl_"]) { font-weight: bold; }

/* ---------------------
	2カラム
--------------------- */
dl.dl_col2 { overflow: hidden; }

/* ＠media＿中大：481～ */
@media screen and (min-width:481px) {
	dl.dl_col2 > dt { clear: both; }
	dl.dl_col2 > dt,
	dl.dl_col2 > dd { float: left; padding: 0 0 10px; }
	dl.dl_col2 > dt:nth-of-type(n+2),
	dl.dl_col2 > dd:nth-of-type(n+2) { border-top: #CCC 1px dashed; padding-top: 10px; }
	dl.dl_col2 > dt { width: 20%; }
	dl.dl_col2 > dd { width: 80%; padding-left: 1%; }
}

/* ＠media＿小：～480 */
@media screen and (max-width:480px) {
	dl.dl_col2 > dd + dt {
		margin-top: 0.5em; padding-top: 0.5em;
		border-top: 1px dashed #CCC;
	}
}

/* --------------------------------------
	テーブル
-------------------------------------- */
/* ---------------------
	共通
--------------------- */
table {
	width: 100%; margin: 0 auto; table-layout: auto;
	border-collapse: collapse;
}
table caption,
table th,
table td { padding: 5px; }

table:not(.table_none) > tbody > tr > caption,
table:not(.table_none) > tbody > tr > th { background: rgba(105,170,41,0.2); }
table:not(.table_none) > tbody > tr > td { background: #FFF; }


/* ---------------------
	枠付き
--------------------- */
/* ＠media＿中大：481～ */
@media screen and (min-width:481px) {
	table:not(.table_none) > tbody > tr > th,
	table:not(.table_none) > tbody > tr > caption,
	table:not(.table_none) > tbody > tr > td { border: 1px solid #BBB; }
}

/* ---------------------
	縦置き
--------------------- */
/* ＠media＿小：～480 */
@media screen and (max-width:480px) {
	table { display: block; }
	table:not(.table_none) { border: 1px solid #EEE; }
	table:not(.table_none) > caption,
	table:not(.table_none) > tbody,
	table:not(.table_none) > tbody > tr,
	table:not(.table_none) > tbody > tr > th,
	table:not(.table_none) > tbody > tr > td {
		display: block; width: 100%;
	}
}

/* --------------------------------------
	フォーム関連
-------------------------------------- */
/* ---------------------
	IMEモード
--------------------- */
form .ime_active { ime-mode: active; }
form .ime_disabled { ime-mode: disabled; }
/* ---------------------
	プレースホルダー
--------------------- */
::-webkit-input-placeholder { color: #CCC; }
::-moz-input-placeholder { color: #CCC; }

/* ---------------------
	選択
--------------------- */
form input::selection,
form textarea::selection { background: rgba(51,136,221,0.5); }
form input::selection,
form textarea::-moz-selection { background: rgba(51,136,221,0.5); }

/* ---------------------
	テキストエリア
--------------------- */
form input.txtbox,
form textarea {
	width: 100%; margin: 0; padding: 0.5em;
	border: 1px solid #999;
	font-family: inherit;
}
form input.txtbox:focus,
form textarea:focus {
	background: #FFD; border: 1px solid #C00;
	outline: none;
}
form textarea { width: 100%; resize: vertical; }

/* ---------------------
	チェック・ラジオ
--------------------- */
input[type="radio"],
input[type="checkbox"] { visibility: hidden; width: 1px; }

input[type="radio"] + label::before ,
input[type="checkbox"] + label::before  {
	font-family: 'icomoon';
	speak: none; text-transform: none;
	font-style: normal; font-weight: normal; font-variant: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-right: 0.3em;
	font-size: 2.5rem; vertical-align: middle;
}
input[type="radio"]:not(:disabled) + label:hover,
input[type="checkbox"]:not(:disabled) + label:hover { cursor: pointer; }

/* アニメーション */
input[type="radio"] + label::before ,
input[type="checkbox"] + label::before  { transition: color 0.2s; }

/* 色 */
input[type="radio"] + label::before ,
input[type="checkbox"] + label::before  { color: #AAA; }

input[type="radio"]:checked + label::before ,
input[type="checkbox"]:checked + label::before  { color: #C00; }

input[type="radio"]:disabled + label::before ,
input[type="checkbox"]:disabled + label::before  { color: #DDD; }

/* チェックボックス */
input[type="checkbox"] + label::before  { content: "\e90f"; }
input[type="checkbox"]:checked + label::before  { content: "\e910"; }

/* ラジオボタン */
input[type="radio"] + label::before  { content: "\e90d"; }
input[type="radio"]:checked + label::before  { content: "\e90e"; }

/* ---------------------
	ボタン
--------------------- */
/* 共通
--------------- */
a[class*="btn_"] { text-decoration: none; }

a[class*="btn_"],
button,
input[type="button"],
input[type="submit"] {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: all 0.3s;
	margin: 0 0.5em; padding: 0.5em 1em;
	outline: none; display: inline-block;
	vertical-align: middle;
	border-radius: 5px;
}
a[class*="btn_"]:not(:active),
button:not(:focus),
input[type="button"]:not(:focus),
input[type="submit"]:not(:focus) {
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

/* デザイン
--------------- */
/* basic */
a.btn_basic,
input.btn_basic,
button.btn_basic {
	background: #CCC; border: solid 1px #CCC;
	color: #444; 
}
a.btn_basic:hover,
input.btn_basic:hover,
button.btn_basic:hover {
	background: #AAA; border: solid 1px #AAA;
	color: #444;
}
a.btn_basic:active,
input.btn_basic:focus,
button.btn_basic:focus {
	background: #666; border: solid 1px #666;
	color: rgba(255,255,255,0.5);
}

/* submit */
a.btn_submit,
input.btn_submit,
button.btn_submit {
	background: #C00; border: solid 1px #C00;
	color: #FFF;
}
a.btn_submit:hover,
input.btn_submit:hover,
button.btn_submit:hover {
	background: #A00; border: solid 1px #A00;
	color: #FFF;
}
a.btn_submit:active,
input.btn_submit:focus,
button.btn_submit:focus {
	background: #600; border: solid 1px #600;
	color: rgba(255,255,255,0.5);
}

/* --------------------------------------
	アイフレーム
-------------------------------------- */
iframe { border: 0; display: block; width: 100%; }

/* --------------------------------------
	フロート
-------------------------------------- */
.flo_l { float: left; }
.flo_r { float: right; }
.clear { clear: both; }
.clearfix::after {
	content: ""; display: block; clear: both;
	height: 0; visibility: hidden;
}

/* --------------------------------------
	ブロック
-------------------------------------- */
/* 表示 */
.dis_block { display: block; }
.dis_none { display: none; }
.vis_none { visibility: hidden; }

/* 余白 */
.pt { padding-top: 1em; }
.pb { padding-bottom: 1em; }
.mt { margin-top: 1em; }
.mb { margin-bottom: 1em; }


/* --------------------------------------
	段落
-------------------------------------- */
p + p { margin-top: 0.5rem; }

/* --------------------------------------
	ボタン
-------------------------------------- */
/* 共通 */
.btn {
	display: inline-block; padding: 0.5em 1em; margin-bottom: 0.5em;
	text-align: center; text-decoration: none;
	border-radius: 5px;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
	transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
/* 動作ごと */
.btn {
	color: rgba(255,255,255,0.9); background-color: #999;
	box-shadow: 0 5px 0 #666, 0 10px 0 rgba(0,0,0,0.2);
}
.btn:hover {
	color: rgba(255,255,255,0.5); background-color: #666;
	box-shadow: 0 3px 0 #000, 0 6px 0px rgba(0,0,0,0.2);
	-webkit-transform: translateY(3px);
	transform: translateY(3px);
}
.btn:active {
	color: rgba(255,255,255,0.3); background-color: #000;
	box-shadow: 0 0 0 #000, 0 0 0px rgba(0,0,0,0.2);
	-webkit-transform: translateY(6px);
	transform: translateY(6px);
	transition-duration: 0.1s;
}

/* --------------------------------------
	枠線・背景ボックス
-------------------------------------- */
[class*="box_bd"],
[class*="box_bg"] { padding: 10px; }

/* 枠線 */
[class*="box_bd"] { border: 2px solid #CCC; }
[class*="box_bd_c01"] { border-color: #C00; }

/* 背景色 */
[class*="box_bg"] { background: #EEE; }
[class*="box_bg_c01"] { background-color: #FDD; } /* ピンク */
[class*="box_bg_c02"] { background-color: #FFC; } /* 黄色 */
[class*="box_bg_c03"] { background-color: #CEF; } /* 青 */
[class*="box_bg_c04"] { background-color: #DEC; } /* 緑 */
[class*="box_bg_img"] {
	background-image: linear-gradient(
		-45deg,
		transparent 25%,
		rgba(0,0,0,0.1) 25%, rgba(0,0,0,0.1) 50%,
		transparent 50%, transparent 75%,
		rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1)
	);
	background-size: 8px 8px;
}

/* --------------------------------------
	横並びブロック
-------------------------------------- */
/* ---------------------
	各共通
--------------------- */
[class*="block_c"] { overflow: hidden; }
[class*="block_c"] .itembox .phbox { border: 1px solid #CCC; }

/* ＠media＿小：～480 */
@media screen and (max-width:480px) {
	/* 各共通 */
	[class*="block_c"] > .itembox { margin-top: 1em; }
}

/* ---------------------
	1～2カラム
--------------------- */
/* ＠media＿中大：481～ */
@media screen and (min-width:481px) {
	/* 各共通 */
	.block_c1 > .itembox:nth-child(n+2),
	.block_c2 > .itembox:nth-child(n+3){ margin-top: 1em; }
	/* 1カラム */
	.block_c1 > .itembox { width: 100%; }
	.block_c1 > .itembox > .phbox { width: 35%; float: left; }
	.block_c1 > .itembox > .txtbox { width: 64%; float: right; }
	/* 2カラム */
	.block_c2 > .itembox { width: 49%; }
	.block_c2 > .itembox:nth-of-type(2n+1) { float: left; clear: both; }
	.block_c2 > .itembox:nth-of-type(2n) { float: right; }
}
/* ---------------------
	3カラム
--------------------- */
/* ＠media＿中：481～980 */
@media screen and (max-width:980px) and (min-width:481px){
	.block_c3 > .itembox:nth-child(n+3) { margin-top: 1em; }
	.block_c3 > .itembox { width: 49%; }
	.block_c3 > .itembox:nth-of-type(2n+1) { float: left; clear: both; }
	.block_c3 > .itembox:nth-of-type(2n) { float: right; }
}
/* ＠media＿大：981～ */
@media screen and (min-width:981px){
	.block_c3 > .itembox:nth-child(n+4) { margin-top: 1em; }
	.block_c3 > .itembox { width: 32%; }
	.block_c3 > .itembox:nth-of-type(3n+1),
	.block_c3 > .itembox:nth-of-type(3n+2) { float: left; margin-right: 2%; }
	.block_c3 > .itembox:nth-of-type(3n) { float: right; }
	.block_c3 > .itembox:nth-of-type(3n+1) { clear: both; }
}
