@charset "UTF-8";
/*  Share */

/* 制作中 */
.uc {
	padding: 60px 0 160px;
}
.uc br {
	display: inline-block;
}


.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}


/* headline */
#headline {
	height: 145px;
	background-image: url(../img/reason/bg_headline.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
#headline .inner {
	text-align: center;
	color: #fff;
	line-height: 1.3;
	padding-top: 60px;
}
#headline .eng {
	font-size: 35px;
}
#headline .hl {
	font-size: 16px;
}
#headline.nomenu .inner {
	padding-top: 40px;
}

/* 縦2本線の背景 */
.bg_2line {
	background-image: none;
}

/* 縦3本線の背景 */
.bg_3line {
	background-image: none;
}

/* グレー背景 */
.bg_gray {
	background-color: #f6f6f6;
}

/*  com_service */
#com_service {
	background: -moz-linear-gradient(-45deg, rgba(245,245,245,1) 0%, rgba(232,232,232,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(245,245,245,1) 0%,rgba(232,232,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(245,245,245,1) 0%,rgba(232,232,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#pageService #com_service {
	/*background: #fff;*/
}

/* バナー */
#bnav {
}

#bnav li {
	margin-bottom: 20px;
	border: 0px solid;
}
#bnav li a {
	display: block;
	position: relative;
	overflow: hidden;
}
#bnav li a span {
	display: block;
}
#bnav li a span.ph {
	position: relative;
}
#bnav li a span.ph::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,1.0);
	opacity: 0.4;
	-webkit-transition: opacity 0.65s;
	transition: opacity 0.65s;
}
#bnav li a:hover span.ph::after {
	opacity: 0.7;
}


#bnav li a span.ph img {
	width: 100%;
	-webkit-transition:  -webkit-transform 0.75s;
	transition: transform 0.75s;
}
#bnav li a:hover span.ph img {
	-webkit-transform: scale3d(1.2,1.2,1);
	transform: scale3d(1.2,1.2,1);
}

#bnav li a span.txt {
	display: block;
	z-index: 100;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	box-sizing: border-box;
	/*border: 3px solid red;*/
}
#bnav li a span.txt img {
	display: block;
	/*width: 100%;*/
	margin: 0 auto;
}



/* 無料診断 */
#com_shindan {}
#com_shindan .bg_3line {
	padding-top: 30px;
}
#com_shindan .bg_shindan {
	background-image: url(../img/share/bg_com_shindan_sp.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100%;
	height: 300px;
	border: 0px solid;
}
#com_shindan .bg_shindan .inner {
	position: relative;
}
#com_shindan .bg_shindan .inner .txt {
	position: absolute;
	left: 10px;
	top: 116px;
	max-width: 316px;
	padding-right: 20px;
}
#com_shindan .bg_shindan .inner .tcenter {
	position: absolute;
	top: 235px;
	left: 0;
	right: 0;
	margin: 0 auto;		
}

/* snsbox */
.snsbox {
	display: table;
}
.snsbox div {
	display: table-cell;
}
.snsbox div:nth-of-type(1) {
	padding-right: 14px;
}

p.dot {
	position: relative;
	padding-left: 1em;
	margin-bottom: 0;
}
p.dot:before {
	content: '・';
	position: absolute;
	left: 0;
	top: 0;
}

/* ホームページ制作実績 */
#rworks .wbox {
	background-color: #eaeaea;
}

#rworks .wbox .before_after .before {
	width: auto;
	clear: both;
	float: none;
}
#rworks .wbox .before_after .arrow {
	width: auto;
	padding-top: 20px;
	padding-bottom: 20px;
	clear: both;
	float: none;
}
#rworks .wbox .before_after .arrow img {
	display: block;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	-webkit-transform: rotate(96deg);
	transform: rotate(96deg);
}
#rworks .wbox .before_after .after {
	width: auto;
	clear: both;
	float: none;
}
#rworks .wbox .before_after .ttl {
	display: table;
}
#rworks .wbox .before_after .icn {
	display: table-cell;
	vertical-align: middle;
}
#rworks .wbox .before_after .icn.mae {
	width: 63px;
}
#rworks .wbox .before_after .icn.go {
	width: 79px;
}
#rworks .wbox .before_after .txt {
	display: table-cell;
	font-size: 18px;
	font-weight: bold;
	padding-left: 0.5em;
	vertical-align: middle;
}
#rworks .wbox .before_after .txt p {
	clear: both;
}

/*お客様の声*/
#cvoices .vbox {
	background-color: #f6f6f6;
	margin-top: 30px;
	position: relative;
}
#cvoices .vbox .bg_3line {
	position: relative;
	padding-bottom: 40px;
}
#cvoices .vbox .ph {
	margin-top: 20px;
}
#cvoices .vbox .ph figure {
	max-width: 460px;
	margin: 0 auto;
}
#cvoices .vbox .txt {
	padding-top: 40px;
	padding-left: 5%;
	padding-right: 5%;
}
#cvoices .vbox .txt .name {
	position: relative;
	padding-left: 1.8em;
}
#cvoices .vbox .txt .name:before {
	content: '';
	border-top: 1px solid #000;
	width: 1.4em;
	position: absolute;
	left: 0;
	top: 0.7em; 
}

	@media (-webkit-min-device-pixel-ratio: 2){

		#headline {
			background-image: url(../img/reason/bg_headline@2x.jpg);
		}



	/* end of media query(retina) */	
	}



.pc_only { display:none; }
.sp_only { display:block; }


.zoom {
	display: table;	
}
.zoom .icn {
	display: table-cell;
	width: 20px;
	vertical-align: middle;

}
.zoom .txt {
	display: table-cell;
	vertical-align: middle;
	padding-left: 3px;
}












@media handheld, print, screen and (min-width: 374px) {
/* iphone6 */

/* 無料診断 */
#com_shindan .bg_shindan {
	height: 350px;
}
#com_shindan .bg_shindan .inner {
	position: relative;
}
#com_shindan .bg_shindan .inner .txt {
	left: 10px;
	top: 134px;
	max-width: 316px;
	padding-right: 0px;
}
#com_shindan .bg_shindan .inner .tcenter {
	top: 260px;	
}

/* end of media query(iphone6) */	
}



@media handheld, print, screen and (min-width: 413px) {
/*  iPhone6 Plus */

/* 無料診断 */
/* 無料診断 */
#com_shindan .bg_shindan {
	height: 380px;
}
#com_shindan .bg_shindan .inner {
	position: relative;
}
#com_shindan .bg_shindan .inner .txt {
	left: 10px;
	top: 150px;
	max-width: 316px;
	padding-right: 0px;
}
#com_shindan .bg_shindan .inner .tcenter {
	top: 280px;	
}

/* end of media query(iPhone6 Plus) */	
}








@media handheld, print, screen and (min-width: 481px) {
/* tablet */

/* 制作中 */
.uc {
	padding: 60px 0 160px;
}
.uc br {
	display: none;
}

/* headline */
#headline {
	height: 200px;
}
#headline .inner {
	padding-top: 82px;
}
#headline .eng {
	font-size: 50px;
}
#headline .hl {
	font-size: 18px;
}
#headline.nomenu .inner {
	padding-top: 50px;
}
	
/* 無料診断 */
#com_shindan .bg_3line {
	padding-top: 60px;
}
#com_shindan .bg_shindan {
	background-image: url(../img/share/bg_com_shindan_tb.png);
	background-repeat: no-repeat;
	background-position: 0 0;

	background-size: 100%;
	height: 300px;
}
#com_shindan .bg_shindan .inner .txt {
	position: absolute;
	left: 48px;
	top: 105px;
	max-width: 909px;
	padding-right: 50px;
}
#com_shindan .bg_shindan .inner .tcenter {
	top: 200px;	
}

/*お客様の声*/
#cvoices .vbox {
	margin-top: 30px;
}
#cvoices .vbox .bg_3line {
	padding-bottom: 40px;
}
#cvoices .vbox .ph {
	margin-top: 20px;
}
#cvoices .vbox .txt {
	padding-top: 40px;
	padding-left: 3%;
	padding-right: 3%;
}

.pc_only { display:block; }
.sp_only { display:none; }

/* end of media query(tablet) */	
}



@media handheld, print, screen and (min-width: 621px) {
/* iPad */

/* 無料診断 */
#com_shindan .bg_shindan {
	height: 400px;
}
#com_shindan .bg_shindan .inner .txt {
	position: absolute;
	left: 48px;
	top: 130px;
}
#com_shindan .bg_shindan .inner .tcenter {
	top: 260px;	
}

/* ホームページ制作実績 */
#rworks .wbox {
	background-color: #eaeaea;
}

#rworks .wbox .before_after .before {
	width: 41.67%;
	clear: none;
	float: left;
}
#rworks .wbox .before_after .arrow {
	width: 6.2500%;
	padding-top: 6%;
	padding-bottom: 0px;
	clear: none;
	float: left;
}
#rworks .wbox .before_after .arrow img {
	display: block;
	width: 73%;
	margin-left: auto;
	margin-right: auto;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
#rworks .wbox .before_after .after {
	width: 52.08%;
	clear: none;
	float: left;
}
#rworks .wbox .before_after .ttl {
	display: table;
}
#rworks .wbox .before_after .icn {
	display: table-cell;
	vertical-align: middle;
}
#rworks .wbox .before_after .icn.mae {
	width: 63px;
}
#rworks .wbox .before_after .icn.go {
	width: 79px;
}
#rworks .wbox .before_after .txt {
	display: table-cell;
	font-size: 18px;
	font-weight: bold;
	padding-left: 0.5em;
	vertical-align: middle;
}
#rworks .wbox .before_after .txt p {
	clear: both;
}

/*お客様の声*/
#cvoices .vbox {
	margin-top: 80px;
}
#cvoices .vbox .bg_3line {
	padding-bottom: 50px;
}
#cvoices .vbox .ph {
	margin-top: -30px;
}
#cvoices .vbox .txt {
	padding-top: 60px;
	padding-left: 3%;
	padding-right: 3%;
}

/* end of media query(iPad) */	
}



@media handheld, print, screen and (min-width: 801px) {
/* pc */

/* headline */
#headline {
	height: 250px;
}
#headline .inner {
	padding-top: 110px;
}
#headline .eng {
	font-size: 60px;
}
#headline .hl {
	font-size: 18px;
}
#headline.nomenu .inner {
	padding-top: 70px;
}
	
/* 縦2本線の背景 */
.bg_2line {
	background-image: url(../img/share/bg_2line.png);
	background-position: 50% 50%;
	background-repeat: repeat-y;
}

/* 縦2本線の背景(濃いめ) */
.bg_2line_b {
	background-image: url(../img/share/bg_2line_b.png);
	background-position: 50% 50%;
	background-repeat: repeat-y;
}

/* 縦3本線の背景 */
.bg_3line {
	background-image: url(../img/share/bg_3line.png);
	background-position: 50% 50%;
	background-repeat: repeat-y;
}

.bg_3line_b {
	background-image: url(../img/share/bg_3line_b.png);
	background-position: 50% 50%;
	background-repeat: repeat-y;
}



/* 無料診断 */
#com_shindan .bg_3line {
	padding-top: 80px;
	padding-bottom: 40px;
}
#com_shindan .bg_shindan {
	background-image: url(../img/share/bg_com_shindan.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;

	background-size: 1200px;
	height: 547px;
}
#com_shindan .bg_shindan .inner .txt {
	position: absolute;
	left: 48px;
	top: 244px;
	max-width: 899px;
	padding-right: 40px;

}
#com_shindan .bg_shindan .inner .tcenter {
	top: 410px;	
}

#f_snsbox {
	display: none;		
}

/*お客様の声*/
#cvoices .vbox {
	margin-top: 90px;
}
#cvoices .vbox .bg_3line {
	padding-bottom: 80px;	
}
#cvoices .vbox .ph {
	margin-top: -40px;
}
#cvoices .vbox .txt {
	padding-top: 80px;
	padding-left: 5%;
	padding-right: 5%;
}


	@media (-webkit-min-device-pixel-ratio: 2){

		#com_shindan .bg_shindan {
			background-image: url(../img/share/bg_com_shindan@2x.png);
			background-size: 1200px;
		}



	/* end of media query(retina) */	
	}

/* end of media query(pc) */
}