@charset "UTF-8";

/*--------------------------------------
HOME用のレイアウト
--------------------------------------*/


/* Main visual ====================== */

#mainVis {
width: 100%;
height: 393px;
background: url(../images/main_vis_bg.jpg) left top repeat-x;
}

#mainVis h3 {
width: 100%;
height: 393px;
background: url(../images/main_vis.jpg) center top no-repeat;
text-indent: -9999px;
}


/* Campaign ========================= */

#campaign {
position: relative;
width: 970px;
height: 72px;
margin-top: 34px;
}

#campaign h3 {
position: absolute;
left: 0;
top: 0;
width: 328px;
height: 72px;
background: url(../images/hm_campaign_title.gif) left top no-repeat;
text-indent: -9999px;
}

#campaign ol {
width: 642px;
height: 72px;
}

#campaign ol li {
position: absolute;
top: 0;
height: 72px;
list-style: none;
text-indent: -9999px;
}

#campaign ol li.tok01 {
left: 328px;
width: 262px;
background: url(../images/hm_campaign_01.gif) left top no-repeat;
}

#campaign ol li.tok02 {
left: 590px;
width: 380px;
background: url(../images/hm_campaign_02.gif) left top no-repeat;
}

#campaign p {
position: absolute;
right: 15px;
bottom: 8px;
text-align: right;
font-size: 10px;
color: #4A4A4A;
}


/* Service guide ==================== */

#serviceGuide {
position: relative;
width: 970px;
height: 864px;
margin-top: 28px;
background: url(../images/hm_sg_bg.jpg) left top no-repeat;
}

/* Flipsの特徴 */
#serviceGuide .basic {
position: absolute;
right: 0;
top: 22px;
width: 545px;
height: 454px;
}

#serviceGuide .basic h3 {
width: 348px;
height: 70px;
margin-left: 197px;
background: url(../images/hm_sg_basic_title.gif) left top no-repeat;
text-indent: -9999px;
}

#serviceGuide .basic p {
width: 342px;
margin: 4px 0 0 203px;
line-height: 170%;
}

#serviceGuide .basic ul {
width: 545px;
margin: 30px 0 0;
}

#serviceGuide .basic ul li {
float: left;
width: 168px;
margin: 0;
padding: 0 0 0 20px;
}

#serviceGuide .basic ul li.first {
padding-left: 0;
}

#serviceGuide .basic ul li h4 {
width: 168px;
height: 156px;
margin: 0;
padding: 0;
text-indent: -9999px;
}

#serviceGuide .basic ul li.b01 h4 {
background: url(../images/hm_sg_basic_01.gif) center top no-repeat;
}

#serviceGuide .basic ul li.b02 h4 {
background: url(../images/hm_sg_basic_02.gif) center top no-repeat;
}

#serviceGuide .basic ul li.b03 h4 {
background: url(../images/hm_sg_basic_03.gif) center top no-repeat;
}

#serviceGuide .basic ul li p {
width: 168px;
margin: 0;
padding: 0;
}

/* 無料会員登録 */
#serviceGuide .entry {
position: absolute;
left: 0;
top: 0;
width: 392px;
height: 302px;
}

#serviceGuide .entry h3 {
width: 392px;
height: 57px;
background: url(../images/hm_sg_entry_title.jpg) left top no-repeat;
text-indent: -9999px;
}

#serviceGuide .entry table.formSet {
width: 352px;
margin: 12px 20px 0;
border: 0;
}

#serviceGuide .entry table.formSet tr th {
width: 112px;
height: 32px;
}

#serviceGuide .entry table.formSet tr th.e01 {
background:url(../images/hm_sg_entry_01.gif) left top no-repeat;
text-indent: -9999px;
}

#serviceGuide .entry table.formSet tr th.e02 {
background:url(../images/hm_sg_entry_02.gif) left top no-repeat;
text-indent: -9999px;
}

#serviceGuide .entry table.formSet tr th.e03 {
background:url(../images/hm_sg_entry_03.gif) left top no-repeat;
text-indent: -9999px;
}

#serviceGuide .entry table.formSet tr th.e04 {
background:url(../images/hm_sg_entry_04.gif) left top no-repeat;
text-indent: -9999px;
}

#serviceGuide .entry table.formSet tr td label {
font-weight: bold;
line-height: 110%;
}

#serviceGuide .entry table.formSet tr td label span{
font-size: 10px;
font-weight: normal;
}

#serviceGuide .entry table.formSet tr td.inputNavi {
padding: 0px 0 5px 5px;
font-size: 10px;
color: #2d2d2d;
}

#serviceGuide .entry table.formSet tr td.inputGuide {
padding: 2px 0 10px 30px;
font-size: 10px;
color: #2d2d2d;
}

#serviceGuide .entry table.formSet tr td.submit {
padding: 17px 0 0;
text-align: center;
}

#serviceGuide .entry table.formSet tr td.textBox input {
width: 218px;
height: 16px;
padding: 1px;
}

#serviceGuide .entry table.formSet tr td.listBox select {
width: 222px;
height: 22px;
}

#serviceGuide .entry p {
float: right;
font-size: 10px;
padding: 5px 10px 0 0;
}

#serviceGuide .entry p a {
display: block;
width: 170px;
padding: 0 0 0 8px;
background: url(../images/hm_sg_entry_arrow.gif) left 5px no-repeat;
}

#serviceGuide .entry p a:link,
#serviceGuide .entry p a:visited {
color: #6d3a07;
}

#serviceGuide .entry p a:hover,
#serviceGuide .entry p a:focus,
#serviceGuide .entry p a:active {
color: #a65200;
}

/* テストサイト */
#serviceGuide .testSite {
position: absolute;
left: 0;
top: 314px;
width: 394px;
height: 163px;
}

#serviceGuide .testSite h3 {
width: 394px;
height: 52px;
background: url(../images/hm_sg_testsite_title.jpg) left top no-repeat;
text-indent: -9999px;
}

#serviceGuide .testSite p {
width: 394px;
height: 48px;
background: url(../images/hm_sg_testsite_text.jpg) center top no-repeat;
text-indent: -9999px;
}

#serviceGuide .testSite table {
width: 360px;
margin: 5px 0 0 17px;
}

#serviceGuide .testSite table tr th.url {
width: 56px;
height: 40px;
background: url(../images/hm_sg_testsite_url.gif) left top no-repeat;
text-indent: -9999px;
}

#serviceGuide .testSite table tr th.pass {
width: 86px;
height: 40px;
background: url(../images/hm_sg_testsite_pass.gif) 10px top no-repeat;
text-indent: -9999px;
}

#serviceGuide .testSite table tr td.url,
#serviceGuide .testSite table tr td.pass {
padding: 0 0 0 5px;
vertical-align: middle;
font-size: 14px;
}

#serviceGuide .testSite table tr td.url a:link,
#serviceGuide .testSite table tr td.url a:visited {
color: #001bc1;
}

#serviceGuide .testSite table tr td.url a:hover,
#serviceGuide .testSite table tr td.url a:focus,
#serviceGuide .testSite table tr td.url a:active {
color: #495fdf;
}

/* 3分でわかるMovie */
#serviceGuide .movie {
position: absolute;
left: 0;
top: 506px;
width: 396px;
height: 358px;
background: url(../images/hm_sg_movie_bg.jpg) left bottom no-repeat;
}

#serviceGuide .movie h3 {
width: 396px;
height: 54px;
background: url(../images/hm_sg_movie_title.gif) left top no-repeat;
text-indent: -9999px;
}

#serviceGuide .movie .yt {
width: 347px;
padding: 15px 0 0 25px;
}

/* 機能紹介 */
#serviceGuide .function {
position: absolute;
right: 0;
top: 506px;
width: 550px;
height: 358px;
background: url(../images/hm_sg_function_bg.jpg) left bottom no-repeat;
}

#serviceGuide .function h3 {
width: 550px;
height: 54px;
background: url(../images/hm_sg_function_title.gif) left top no-repeat;
text-indent: -9999px;
}

#serviceGuide .function p {
position: absolute;
right: 0;
top: 0;
width: 100px;
padding: 26px 28px 0 0;
text-align: right;
background: url(../images/hm_sg_function_title.gif) right top no-repeat;
color: #0073a9;
}

#serviceGuide .function ul {
width: 502px;
padding: 10px 0 0 24px;
}

#serviceGuide .function ul li {
float: left;
width: 244px;
height: 127px;
text-indent: -9999px;
}

#serviceGuide .function ul li.f01 {
background: url(../images/hm_sg_function_01.jpg) left top no-repeat;
}

#serviceGuide .function ul li.f02 {
background: url(../images/hm_sg_function_02.jpg) 14px top no-repeat;
padding-left: 14px;
}

#serviceGuide .function ul li.f03 {
background: url(../images/hm_sg_function_03.jpg) left 14px no-repeat;
padding-top: 14px;
}

#serviceGuide .function ul li.f04 {
background: url(../images/hm_sg_function_04.jpg) 14px 14px no-repeat;
padding: 14px 0 0 14px;
}


/* 事例 ============================= */

#cases {
position: relative;
width: 970px;
height: 310px;
margin: 40px 0 0;
background: url(../images/hm_case_bg.jpg) left bottom no-repeat;
}

#cases h3 {
position: absolute;
left: 0;
top: 0;
width: 970px;
height: 54px;
background: url(../images/hm_case_title.gif) left top no-repeat;
text-indent: -9999px;
}

#cases p.voice {
position: absolute;
right: 15px;
top: 13px;
width: 200px;
height: 32px;
}

#cases p.voice a {
display: block;
width: 200px;
height: 32px;
text-indent: -9999px;
}

#cases p.voice a:link,
#cases p.voice a:visited {
background: url(../images/hm_case_voice_bt_up.jpg) left top no-repeat;
}

#cases p.voice a:hover,
#cases p.voice a:focus,
#cases p.voice a:active {
background: url(../images/hm_case_voice_bt_ov.jpg) left top no-repeat;
}

#cases ul {
position: absolute;
left: 25px;
top: 64px;
width: 925px;
height: 240px;
}

#cases ul li {
float: left;
width: 165px;
padding-left: 25px;
}

#cases ul li.first {
padding-left: 0;
}

#cases ul li p {
font-size: 10px;
margin: 5px 0 0;
padding: 0 0 0 10px;
background: url(../images/hm_case_arrow.gif) left 5px no-repeat;
}


/* News ============================= */

#news {
float: left;
width: 643px;
height: 165px;
margin: 40px 0;
background: url(../images/hm_news_bg.gif) left bottom no-repeat;
}

#news h3 {
width: 643px;
height: 45px;
background: url(../images/hm_news_title.gif) left top no-repeat;
text-indent: -9999px;
}

#news ul {
width: 603px;
margin: 0 20px;
}

#news ul li {
width: 603px;
height: 25px;
padding: 10px 0 0;
background: url(../images/hm_news_dotline.gif) left top repeat-x;
}

#news ul li.first {
background: none;
}

#news ul li span.newsDate {
	float: left;
	display: block;
	width: 80px;
	font-weight: bold;
}

#news ul li a.newsBody {
	float: right;
	display: block;
	width: 520px;
}


/* マンガ =========================== */

#manga {
float: right;
width: 293px;
height: 165px;
margin: 40px 0;
background: url(../images/hm_manga_bg.gif) right bottom no-repeat;
}

#manga h3 {
width: 293px;
height: 60px;
background: url(../images/hm_manga_title.gif) left top no-repeat;
text-indent: -9999px;
}

#manga .mangaBt {
width: 258px;
padding: 10px 0 0 18px;
}

#manga .mangaBt a {
display: block;
width: 258px;
height: 79px;
text-indent: -9999px;
}

#manga .mangaBt a:link,
#manga .mangaBt a:visited {
background: url(../images/hm_manga_bt_up.gif) left top no-repeat;
}

#manga .mangaBt a:hover,
#manga .mangaBt a:focus,
#manga .mangaBt a:active {
background: url(../images/hm_manga_bt_ov.gif) left top no-repeat;
}


/* 関連サービス ===================== */

#relationServ {
position: relative;
width: 970px;
height: 60px;
/*background: url(../images/hm_relation_serv_bg.gif) left top no-repeat;*/
}

#relationServ h3 {
position: absolute;
left: 0;
top: 0;
width: 205px;
height: 60px;
background: url(../images/hm_relation_serv_title.gif) left top no-repeat;
text-indent: -9999px;
}

#relationServ ul {
position: absolute;
left: 223px;
top: 0;
width: 747px;
height: 60px;
}

#relationServ ul li {
float: left;
width: 239px;
height: 60px;
padding: 0 0 0 15px;
}

#relationServ ul li.first {
padding-left: 0;
}

#relationServ ul li a {
display: block;
width: 239px;
height: 60px;
text-indent: -9999px;
}

#relationServ ul li.bnSeo a:link,
#relationServ ul li.bnSeo a:visited {
background: url(../images/hm_relation_serv_seo_up.jpg) left top no-repeat;
}

#relationServ ul li.bnSeo a:hover,
#relationServ ul li.bnSeo a:focus,
#relationServ ul li.bnSeo a:active {
background: url(../images/hm_relation_serv_seo_ov.jpg) left top no-repeat;
}

#relationServ ul li.bnEmachi a:link,
#relationServ ul li.bnEmachi a:visited {
background: url(../images/hm_relation_serv_emachi_up.gif) left top no-repeat;
}

#relationServ ul li.bnEmachi a:hover,
#relationServ ul li.bnEmachi a:focus,
#relationServ ul li.bnEmachi a:active {
background: url(../images/hm_relation_serv_emachi_ov.gif) left top no-repeat;
}



/* デザイン一覧 ============================= */

#designs {
	position: relative;
	width: 970px;
	height: 310px;
	margin: 40px 0 0;
	background: url(../images/hm_case_bg.jpg) left bottom no-repeat;
}
#designs h3 {
	position: absolute;
	left: 0;
	top: 0;
	width: 970px;
	height: 54px;
	background: url(../images/hm_design_title.gif) left top no-repeat;
	text-indent: -9999px;
}
#designs p.more {
    position: absolute;
    right: 27px;
    top: 18px;
	color:#0073a9;
}
#designs .slick-slide .thumb_box {
	border: 5px solid #fff;
    box-shadow: 0 1px 1px 0 rgba(113, 135, 164, 0.4);
    max-height: 140px;
	box-sizing: border-box;
	height: 140px;
    overflow: hidden;
    position: relative;
    width: 178px;
}
#designs .slick-slide .thumb_box img {
	width: 170px;
}
#designs .slick-slide img.trial-button {
	width: 100%;
	margin: 10px 0 6px;
}
#designs .slick-slide img.trial-button:hover {
	opacity:0.8;
}
#designs .flips_design_comment{
	height: 55px;
    line-height: 1.5em;
    overflow: hidden;
}
#designs .slider {
	width: 90%;
	margin: 0 auto;
	top: 66px;
	height: 188px;
}
#designs .slick-slide {
	margin: 0px 20px;
}
#designs .slick-prev:before,
#designs .slick-next:before {
	color: black;
}
#designs .slick-next,
#designs .slick-prev {
	z-index: 1;
}
#designs .design_slide{
	visibility: hidden;
}
#designs .slick-prev, #designs .slick-next {
    width: 13px;
}