@charset "utf-8";
/*-----------------------------------------------------------
カスタム用CSS

 |px|%|
 |10|77|
 |11|85|
 |12|93|
 |13|100|
 |14|108|
 |15|116|
 |16|123.1|
 |17|131|
 |18|138.5|
 |19|146.5|
 |20|153.9|
 |21|161.6|
 |22|167|
 |23|174|
 |24|182|
 |25|189|
 |26|197|
 ------------------------------------------------------------*/
  /* ================================================================
		ロゴの位置設定　
================================================================ */
 #head_sitelogo{
	margin-top:-27px;/*ロゴの高さの半分を指定*/
 }
 /* ================================================================
		フォントカラー　
================================================================ */
/* デフォルト#333 */
body{}
/* ================================================================
		背景
================================================================ */
/* デフォルト#FFF */
body{}

/* ================================================================
		リンク色
================================================================ */
/*ベースリンク色*/
a:link		{  }
a:visited	{  }
a:hover		{  text-decoration: none; }
a:active	{  }

/*ヘッダートップリンク色*/
.htop_nav a:link 		{ text-decoration: none; }
.htop_nav a:visited 	{ text-decoration: none; }
.htop_nav a:hover 		{ text-decoration: none; }
.htop_nav a:active		{ text-decoration: none; }

/* ================================================================
		サイトキャッチ
================================================================ */
#htop_container{}
/* ================================================================
		上部　強調する通知
================================================================ */
#notice_container{}

/* ================================================================
		トップページ
================================================================ */
/* スライド静止 */
.slide{
	width:1000px;
	height:366px !important;
	overflow:hidden;
	position:relative;
}
.slide_area {
	width: 1000px;
	margin: 10px auto 0;
}
.slide #slidenavi{
	position:absolute;
	right:0;
	bottom:0;
	
}
.slide #slidenavi li{
	float:left;
}
.slide #slidenavi li a,
.slide #slidenavi li a:hover{
	padding:0 4px;
	text-decoration:none;
	color:#666;
	background:#EEE;
	margin-right:2px;
}
.slide #slidenavi li a:hover{
	background:#CCC;
}
.slide #slidenavi li a.current{
	background:#CCC;
}

/* Cardbox関連サイト 上部*/
.bnr_mutual{ /zoom : 1; }
.bnr_mutual:after{ content : ''; display : block; clear : both; }

.bnr_mutual li {
	float:left;
	margin-right:13px;
}

.bnr_mutual li.last {
	margin-right:0px;
}

/* キャンペーン＆割引き情報 */
.m_campaign li {
	float:left;
	margin-right:20px;
}

/* 右側のバナー部分 */
.blog_list {
	border-top:1px dotted #CCC;
}

.blog_list li {
	border-bottom:1px dotted #CCC;
	padding:10px 10px 10px 15px;
	background:url(../images/_top/icon_blog_list.gif) 4px 15px no-repeat;
}

.pack_nenga {
	background:url(../images/_top/bg_pack.gif) 4px 4px no-repeat;
	padding-left:18px;
	margin-bottom:10px;
	font-weight:bold;
}
/* ダウンロードサイトへのリンク */
.link_dl {
	background:#FDE9E8;
	font-size:123%;
	margin-bottom:15px;
}

.link_dl .news {
	background:#E21303;
	color:#FFF;
	font-weight:bold;
	margin-right:10px;
	text-decoration:none;
	width:70px;
	text-align:center;
}
.link_dl .attention {
	color:#DC0000;
	font-weight:bold;
}
/* 特集エリア */
.special_area .m_section .special_ttl_l2 {
	font-size:185%;
	background:url(../images/_top/bg_tt_h2.gif) ;
	border-left:5px solid #F14300;
	/* padding:12px 0 12px 20px; */
	padding-left:20px;
	height:52px;
	line-height: 52px;
	clear: both;
	position:relative;
	margin-bottom:30px;
	/* margin-bottom:0.5em; */
}

.special_area .m_section .betsu{
	font-size: x-large;
}


.special_area .m_section .ttl_l3 {
	font-size:150%;
	background: url(../images/_product/pd_s_menu_icon_right.gif) 0 50% no-repeat;
	padding-left:20px;
	font-weight:bold;
}

.special_area .special_ttl_l2 .ttl_sub {
	float:right;
	font-size:18px;
	padding-right:50px;
	background: url(../images/_product/pd_s_menu_icon_right02.png) 92% 50% no-repeat;
	
}

.special_area .m_section .ttl_l3 a,
.special_area .special_ttl_l2 .ttl_sub a {
	text-decoration:none;
	color:#333;
}

.special_area .m_section .ttl_l3 a:hover,
.special_area .special_ttl_l2 .ttl_sub a:hover {
	text-decoration:none;
	color:#AAA;
}

/* 2列の並び */
.special_area .m_section .m_banner_2col .odd {
	margin-right:20px;
}

.special_area .m_section .m_banner_2col li {
	width:350px;
	float:left;
	margin-bottom:30px;
}

.special_area .m_section .image {
	margin-bottom:5px;
}

.special_area .m_section .product_link p {
	float:left;
	font-size:100%;
	text-align:center;
	font-weight:bold;
}

.special_area .m_section .product_link p a {
	display:block;
	background: url(../images/bg_gray.gif);
	border:#EEEEEE;
	width:170px;
	color:#333;
	padding:6px 0;
	text-decoration:none;
}

.special_area .m_section .product_link p a:hover {
	background:#555;
	color:#FFF;
}

.special_area .m_section .product_link p.left {
	margin-right:10px;
}

/* 4列の並び */
.special_area .m_banner_4col li {
	width:167px;
	float:left;
	margin:0 17px 17px 0;
}

.special_area .m_banner_4col li.last {
	margin-right:0px;
}

.m_section .image a:hover img,
.special_area .m_banner_4col li a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: “alpha( opacity=50 )”;
}

/* ================================================================

		abroad

================================================================ */
#abroad .col_gray {
	padding-bottom: 15px;
}

#abroad .ttl_h2 {
	background: url(../images/_abroad/bg_abroad_icon.jpg) 3px .1em no-repeat, url(../images/_abroad/bg_abroad_border.jpg) 0 bottom repeat-x;
	padding-bottom: 15px;
	padding-left: 40px;
	border-bottom: none;
}

/* カテゴリレイアウト */

/* ================================================================

		atena

================================================================ */
#atena .addressimg, #atena .privacyimg {
	float: left;
}
#atena .btn_atena {
	clear: both;
}
#atena .border {
    border: 1px #ccc solid;
}
#atena .addressinfo, #atena .privacyinfo {
	float: right;
    width: 490px;
	margin-bottom: 35px;
}
#atena .addressinfo .btn_guide {
	margin-top: 10px;
}
#atena .addressinfo .btn_guide li {
	background: url(../../../special/common/images/_atena/atena_btn_gradient.gif) left no-repeat;
	padding-left: 30px;
}
#atena .addressinfo .btn_guide li a {
	color: #00228C;
	text-decoration: underline;
}
#atena .addressinfo .btn_guide li a:hover {
	text-decoration: none;
	background: none;
}
#atena .btn_atena {
	background: url(../../../special/common/images/_atena/atena_bg_gradient.gif) repeat;
	background-size: 100% 100%;
	text-align: center;
	border-radius: 3px;
	display: inline-block;
}
#atena .btn_atena a {
	color: #FFF;
	font-weight: bold;
	padding: 5px 40px;
	display: block;
}
#atena .btn_atena a:hover {
	background: url(../../../special/common/images/_atena/atena_bg_gradient_o.gif) repeat;
	border-radius: 3px;
}
#atena .atena_btn {
	text-align: center;
	clear: both;
}
#atena .group {
	width: 650px;
    margin: 0 auto;
	overflow: auto;
	margin-bottom: -5px;
}
#atena .group li {
	float: left;
	width: 210px;
	margin-right: 10px;
}
#atena .group li a:hover {
	opacity: 0.5;
	background: none !important;
}
#atena .group li:nth-of-type(3n+0) {
	margin-right: 0;
}
#atena .ttl_step {
	padding-left: 60px;
	margin-bottom: 5px;
	font-weight: bold;
}
#atena .step01 {
	background: url(../../../special/common/images/_atena/atena_ttl_step01.gif) left no-repeat;
}
#atena .step02 {
	background: url(../../../special/common/images/_atena/atena_ttl_step02.gif) left no-repeat;
}
#atena .step03 {
	background: url(../../../special/common/images/_atena/atena_ttl_step03.gif) left no-repeat;
}
#atena .step04 {
	background: url(../../../special/common/images/_atena/atena_ttl_step04.gif) left no-repeat;
}
#atena .step05 {
	background: url(../../../special/common/images/_atena/atena_ttl_step05.gif) left no-repeat;
}
#atena .step06 {
	background: url(../../../special/common/images/_atena/atena_ttl_step06.gif) left no-repeat;
}
#atena .step {
	width: 210px;
	float: left;
	margin-bottom: 20px;
	margin-right: 15px;
}
#atena .last {
	margin-right: 0 !important;
}
#atena .clear {
	clear: both;
}
#atena .type {
	width: 150px;
	float: left;
	margin-right: 20px;
}
#atena .choice {
	width: 303px;
	float: left;
	margin-right: 54px;
}
#atena .typeinfo {
	background-color: #777;
	color: #FFF;
	border-radius: 3px;
	display: inline-block;
	padding: 3px 10px;
	margin-bottom: 10px;
	font-size: 14px;
}
#atena .type:last-child {
	margin-right: 0;
}
#atena .privacyinfo {
    width: 540px;
}
#atena .privacydesc {
    font-weight: bold;
	font-size: 20px;
	margin-bottom: 10px;
}
#atena .col_gray {
	font-size: 19px;
	padding: 10px 10px 5px 15px;
}
#atena .specialblock {
	margin-bottom: 50px;
}
#atena .sectionblock {
	margin-bottom: 50px;
}
/* ================================================================

		サンプル請求

================================================================ */
.sample_section {
  	padding: 30px;
	border-radius: 3px;
	margin: 10px 0;
}
.sample_section .sample_image img {
  width: 100%;
  height: auto;
}
.sample_section .block_title {
    margin-bottom: 30px;
    text-align: center;
    font-size: 1.8rem;
}
#gold .sample_section {
	background:#fbf8e7;
}
#gold .sample_section .block_title {
    color: #E45C1A;
}
.special .main_area .sample_section .btn_common a {
    display: block;
    width: 240px;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    background-color: #444;
    padding: 15px 15px 12px;
    margin: auto;
    text-decoration: none;
    border-radius: 3px;
    box-sizing: border-box;
    transition: all .2s ease;
	text-align: center;
}
.special .main_area .sample_section .btn_common a:hover {
  background-color: #666;
}
/* サンプル請求 */
.sample_section .sample_text {
	text-align: center;
}
@media screen and (max-width:768px) {
.sample_section .sample_text {
	text-align: left;
}	
}
/* ================================================================
   文例集一覧
================================================================ */
#text_example.special .ttl_h2{
	padding-top: 30px;
	margin-top: -30px;
}
.tbl_text_ex, .tbl_text_ex th, .tbl_text_ex td {
    border-collapse: collapse;
    border-spacing: 0;
}

.tbl_text_ex{
	width: 100%;
}
.tbl_text_ex td{
	padding: 15px 0;
	border-bottom: 1px #ccc dashed;
}
.tbl_text_ex .cell_copy{
	width: 18%;
	text-align: center;
}
.tbl_text_ex .cell_text{
	width: 60%;
	padding: 15px;
	box-sizing: border-box;
}
.tbl_text_ex .cell_num{
	width: 18%;
	font-size: .9rem;
}
.tbl_text_ex tr:hover{
	background: #f4f4f4;
	transition: all .2s ease;
}
/*コピーボタン*/
.tbl_text_ex .cell_copy .btn_copy{
	font-weight: bold;
	color: #fff;
	background: #D90000;
	transition: all .2s ease;
	padding: 5px 15px;
	border-radius: 4px;
	cursor: pointer;
}
.tbl_text_ex .cell_copy .btn_copy:hover{
	background: #b20000;
	transition: all .2s ease;
}

/*カテゴリーボタン*/
.category_btn a{
  background: #FFFFFF;
  display: block;
  text-decoration: none;
  box-shadow: 0px 0px 10px -6px #aaa;
  font-size: 1.1rem;
  color: #1f1715;
  text-align: center;
  padding: 10px 0;
  transition: .3s;
  width: 400px;
  margin: 0 auto 30px auto;
  border: #FFFFFF 1px solid;
  color: #333333;
}
.category_btn a:hover{
  box-shadow: none;
  border: #cccccc 1px solid;
}

@media screen and (max-width:768px) {
	.tbl_text_ex{
		font-size: .85rem;
	}
	.tbl_text_ex .cell_copy{
		text-align: left;
	}
	.tbl_text_ex .cell_num{
		text-align: right;
	}
	.tbl_text_ex tr, .tbl_text_ex .cell_copy, .tbl_text_ex .cell_text, .tbl_text_ex .cell_num{
		display: block;
		width: 100%;
	}
	.tbl_text_ex td{
		padding: 10px 0;
		border-bottom: 0;
	}
	.tbl_text_ex tr{
		padding: 15px;
		box-sizing: border-box;
		border-bottom: 1px #ccc dashed;
	}
}

/* ================================================================
   side
================================================================ */
/* 広告用バナー郡 */
.special .side_ad {
  text-align: center;
}
.special .side_ad img {
  vertical-align: middle;
}
.special .side_ad a {
  display: block;
  transition: all .2s ease;
  border-radius: 4px;
  text-decoration: none;
}
.special .side_ad a:hover {
  opacity: .6;
}
.special .side_explain {
  font-size: 17px;
  font-weight: bold;
}
.special .side_member {
  background-color: #F0F0E1;
  border-radius: 4px;
  padding: 15px 15px 10px;
}
.special .side_member .side_explain {
  font-size: 17px;
  color: #8A8A7B;
}
.special .btn_new a {
  background-color: #BCD042;
  color: #575748;
  font-size: 22px;
  font-weight: bold;
  padding: 10px 10px 8px;
}
.special .btn_new span {
  background: url(../images/icon_beginner.png) left 2px no-repeat;
  background-size: 20px auto;
  padding-left: 25px;
}
.special .btn_login a {
  background-color: #FFDA03;
  color: #575748;
  font-size: 18px;
  font-weight: bold;
  padding: 6px 6px 4px;
}
.special .side_campaign a {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff2b2a+0,ffbf00+100 */
  background: #ff2b2a; /* Old browsers */
  background: -moz-linear-gradient(top, #ff2b2a 0%, #ffbf00 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ff2b2a 0%,#ffbf00 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ff2b2a 0%,#ffbf00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff2b2a', endColorstr='#ffbf00',GradientType=0 ); /* IE6-9 */
}
.special .side_atena a {
  background-color: #FFEFBF;
}
.special .side_atena .side_explain {
  background-color: #FFE08F;
  border-radius: 0 0 4px 4px;
  color: #B25900;
  padding-top: 5px;
}
.special .side_service a {
  background-color: #F0F0E1;
}
.special .side_data a {
  background-color: #00B285;
}
.special .side_sample a {
  background-color: #D2BC3B;
}
.special .side_contact {
  border: 2px solid #FF4D4D;
  border-radius: 4px;
  font-size: 18px;
}
.special .side_contact .side_title {
  background-color: #FF4D4D;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  padding: 5px;
}
.special .side_contact_inner {
  padding: 10px;
  line-height: 1.2;
}
.special .side_contact_inner > *:not(:last-child) {
  margin-bottom: 10px;
}
.special .side_telnum img {
  width: 100%;
  height: auto;
}
.special .side_sitenum {
  background-color: #FF4D4D;
  border-radius: 50px;
  color: #FFFF00;
  font-weight: bold;
}
.special .side_sitenum span {
  font-size: 30px;
  font-weight: bold;
}
.special .side_time {
  font-weight: bold;
  color: #FF4D4D;
}
.special .side_mail a {
  background-color: #eee;
  font-size: 16px;
  padding: 10px;
  color: #575748;
  font-weight: bold;
}
.special .side_mail span {
  background: url(../images/icon_mail.png) left 1px no-repeat;
  background-size: 20px auto;
  padding-left: 25px;
}

/* ================================================================
   pagetop
================================================================ */
/* フッター干支 */
#footer .backtotop a,
#footer .backtotop a:hover {
	background:none;
}

/* ================================================================

		clearfix

================================================================ */
.m_banner_4col,
.product_link,
.m_banner_2col,
li.ableart,
.clearfix,
{ /zoom : 1;
}

.m_banner_4col:after,
.product_link:after,
.m_banner_2col:after,
.li.ableart:after,
.clearfix:after,
{
	content : '';
	display : block;
	clear : both;
}