﻿@charset "utf-8";

/*************************************************
CSS
/cmn_jp_v1/css/component.css

15.02.01
update:15.02.25
*************************************************/

/* ------------------------- TOC
Contents Layout
Data
Form
Contactgrd
------------------------- */



/* ============================================================ Contents Layout */
/* ============================== Thumb Text */
.jp_thumb_txt { overflow: hidden; }

.jp_thumb_txt .img_l { float: left; width: 50%; margin-right: 16px; }
.jp_thumb_txt .img_r { float: right; width: 50%; margin-left: 16px; }
.jp_thumb_txt .img_l img,
.jp_thumb_txt .img_r img { display: block; width: 100%; height: auto; }
.jp_thumb_txt .dtl { overflow: hidden; }
.jp_thumb_txt .dtl .ttl { font-size: 18px; font-weight: bold; }
.jp_thumb_txt .dtl .txt {}

/* @media */
@media (max-width: 640px) {
	.jp_thumb_txt .img_l,
	.jp_thumb_txt .img_r { float: none; width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 8px; }
}


/* ============================== Thumb Text (RWD) Vertical */
.jp_thumb_mn_v { display: block; overflow: hidden; background: url(/-/Media/Ricoh/Common/cmn_v1/img/icon_s_right_01.png) 100% 50% no-repeat #ffffff; }

.jp_thumb_mn_v .inner { overflow: hidden; padding: 16px 24px 16px 16px; }
.jp_thumb_mn_v .img { float: left; width: 50%; margin-right: 16px; }
.jp_thumb_mn_v .img img { display: block; width: 100%; height: auto; vertical-align: bottom; }
.jp_thumb_mn_v .dtl { overflow: hidden; }
.jp_thumb_mn_v .dtl .ttl { font-size: 18px; font-weight: bold; }
.jp_thumb_mn_v .dtl .txt {}
a.jp_thumb_mn_v:hover { text-decoration: none; }
a.jp_thumb_mn_v:hover .dtl .ttl { text-decoration: underline; }

/* @media */
@media (max-width: 640px) {
	.jp_thumb_mn_v { background-image: none; }
	.jp_thumb_mn_v .inner { padding: 0; }
	.jp_thumb_mn_v .img { float: none; width: 100%; margin-right: 0; }
	.jp_thumb_mn_v .dtl { padding: 16px 24px 16px 16px; background: url(/-/Media/Ricoh/Common/cmn_v1/img/icon_m_right_01.png) 100% 50% no-repeat #ffffff;
		-webkit-background-size: 24px 24px;
		background-size: 24px 24px;
	}
}


/* ============================== Image List */
.jp_img_lst { overflow: hidden; }
.jp_img_lst li { float: left; margin-top: 8px; margin-right: 8px; }
.jp_img_lst li img { vertical-align: bottom; }


/* ============================== News Section */
.jp_news_sct { margin-top: 16px; border-top: 1px solid #c9c9c9; }
.jp_news_sct .jp_news_lst { display: block; padding: 8px 0; border-bottom: 1px solid #c9c9c9; }
.jp_news_sct .jp_news_lst:hover { text-decoration: none; }
.jp_news_sct a.jp_news_lst { padding: 8px 32px 8px 0; background: url(/-/Media/Ricoh/Common/cmn_v1/img/icon_s_right_01.png) 100% 50% no-repeat; }
.jp_news_sct dl { overflow: hidden; }
.jp_news_sct dl dt { float: left; }
.jp_news_sct dl dt .day { display: inline-block; width: 10em; font-weight: bold; }
.jp_news_sct dl dt .lb_ico { display: inline-block; margin-right: 16px; }
.jp_news_sct dl dd { overflow: hidden; }
.jp_news_sct a.jp_news_lst:hover dl dd { text-decoration: underline; }
.jp_news_sct dl dd p { display: inline; }
.jp_news_sct .jp_more_lnk { display: block; padding: 8px 0; border-bottom: 1px solid #c9c9c9; }

/* @media */
@media (max-width: 640px) {
	.jp_news_sct a.jp_news_lst { background-image: url(/-/Media/Ricoh/Common/cmn_v1/img/icon_m_right_01.png);
		-webkit-background-size: 24px 24px;
		background-size: 24px 24px;
	}
	.jp_news_sct dl dt,
	.jp_news_sct dl dd { display: block; float: none; }
}

/* Category Top */
.jp_news_sct.jp_news_top dl dt { min-width: 18em; }

/* @media */
@media (max-width: 640px) {
	.jp_news_sct.jp_news_top dl dt { min-width: auto; }
}


/* ============================== Share Section */
.share_sct { height: 32px; }



/* ============================================================ Data */
/* ============================== DataList */
.jp_data_lst { overflow: hidden; zoom: 1; }
.jp_data_lst .jp_data_lst_ttl { float: left; clear: both; }
.jp_data_lst .jp_data_lst_dtl {}

/* @media */
@media (max-width: 640px) {
	.jp_data_lst .jp_data_lst_ttl { float: none; }
	.jp_data_lst .jp_data_lst_dtl { padding-left: 0 !important; }
}



/* ============================================================ Form */
/* fm_tbl */
.jp_fm_tbl_sct { border-style: solid; border-width: 2px 0; border-color: #c9c9c9; }
.jp_fm_tbl { display: table; width: 100%; }
.jp_fm_tbl .jp_fm_tbl_ttl { display: table-cell; width: 33.333%; padding-top: 8px; padding-right: 16px; padding-bottom: 8px; vertical-align: middle; font-size: 16px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.jp_fm_tbl .jp_fm_tbl_ttl .lb_ic { float: right; }
.jp_fm_tbl .jp_fm_tbl_dtl { display: table-cell; width: 66.666%; padding-top: 8px; padding-bottom: 8px; vertical-align: top; font-size: 16px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* jp_req */
ul.jp_req { background-color: #fef5f4;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
/* jp_err */
ul.jp_err { background-color: #fbe5e4;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

/* @media */
@media (max-width: 640px) {
	/* fm_tbl */
	.jp_fm_tbl { display: block; }
	.jp_fm_tbl .jp_fm_tbl_ttl,
	.jp_fm_tbl .jp_fm_tbl_dtl { display: block; width: 100%; padding-right: 0; }
	.jp_fm_tbl .jp_fm_tbl_ttl .lb_ic { float: none;}

	.jp_fm_tbl .jp_fm_tbl_dtl { padding-top: 0; }
}



/* ============================================================ Contactgrd */
/*  clearfix */
.jp_contactgrd:before,
.jp_contactgrd:after { content: ""; display: table; }
.jp_contactgrd:after { clear: both; }
.jp_contactgrd { zoom: 1; }

/* contactgrd */
.jp_contactgrd { width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.jp_contactgrd .jp_mainclm,
.jp_contactgrd .jp_subclm {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.jp_contactgrd .jp_mainclm { width: 75%; float: left; }
.jp_contactgrd .jp_subclm { width: 25%; float: right; padding-left: 16px; }

@media (max-width: 640px) {
	.jp_contactgrd .jp_mainclm { width: 100%; }
	.jp_contactgrd .jp_subclm { width: 100%; padding-left: 0; padding-bottom: 24px;}
}

