@charset "UTF-8";
/* CSS Document */

/* ヘッダー */
header .container{
	width: 100%;
	padding:16px 16px 12px 16px;
}

header h1{
	font-size:85%;
	margin:0 0 7px 0;}

.navbar {
	padding: 0px;
	padding: 0;
	border:none;
}
.navbar-default {
	background-color: #FFF;
}
.navbar .logo {
	padding: 0;
	margin:0;
	text-align:left;
}
.navbar .logo img {
	width: 120px;
}

.navbar-collapse ul{	
margin:-10px 0 0 0;
	}
.navbar-collapse ul a{	
/* border:solid 1px #FF0000;*/
	padding-bottom: 0;
	}
	

@media screen and (max-width:767px) {
header .container{
	width: 100%;
	padding:0;
}

header .container{
	text-align:center;
	padding:16px 16px 12px 16px;
}
header h1{
	font-size:85%;
	margin:0 0 8px 0;}

.navbar .logo  {
	text-align:center;
	margin-top:8px;
	margin-left:60px;
}

.navbar-collapse ul{	
margin:0.5em; 0 0 0;
	}

.navbar-collapse li{	

	border-bottom: dashed 1px #CCCCCC;
	}
.navbar-collapse ul a{	
/* border:solid 1px #FF0000;*/
	padding:0.5em;
	}
}

/* ---------------------------------------
メインイメージ
--------------------------------------- */

.main-v {
	background-color: #000;
}
.main-v h2 {
	text-align: center;
	font-size: 1.6em;
	line-height: 1.6em;
	margin: 0;
	padding: 1em;
	color: #fff;
}

@media screen and (max-width:767px) {
.main-v {
	padding-top:34px;
}

.main-v h2 {
	font-size: 1.2em;
}
}


section {
	padding: 0 0 48px 0;
}

/* ---------------------------------------
各コンテンツタイトル
--------------------------------------- */
section h3 {
	text-align: center;
	margin: 16px 0 16px 0;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
}

section h3 .bl{
	position: relative;
	display: inline-block;
	padding: 0.2em;
	width:20em;
	min-width: 115px;
	color: #fff;
	line-height: 40px;
	text-align: center;
	background: #1dbfc8;
	z-index: 0;
	font-size: 70%;
	margin: 24px auto 0;
	display: block;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4p;
	border-radius: 4px;
}
section h3 .bl:after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #1dbfc8 transparent transparent transparent;
}



section h3 .bl-en{
	width:100%;
	padding: 1.5em;
	font-size:200%;text-align:center;
	}
section h3 .bl-en-ill{
	width:100%;
	padding: 1.5em;
	font-size:100%;}
	

section p {
	text-align: center;
}
section .arrow {
	text-align: center;
}
.inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
}
.inner .row {
	margin: 2em 0 0 0;
	padding: 0;
}


@media screen and (max-width:767px) {
	
 section h3 {
	width:100%!important;
margin:0 ;
padding:0 0 0.5em 0;
text-align:center;}

section h3 .bl {
	width:16em;
}
section h3 .bl-en{
	width:100%;
	padding: 1.5em;
	font-size:120%;text-align:center;
	}
}
		
	

@media screen and (max-width: 991px){


section h3 {
	width:100%;
}

section h3 .bl {
	width:20em;
}


}


/* ---------------------------------------
ページ内リンク
--------------------------------------- */

#top, #worksArea, #profileArea, #workflowArea, #contactArea, #illustArea, #blogArea, #portfolioArea {
	margin-top: -74px;
	padding-top: 74px;
}

@media screen and (max-width:767px) {
	
#top, #worksArea, #profileArea, #workflowArea, #contactArea, #illustArea, #blogArea, #portfolioArea{
	margin-top: -98px;
	padding-top: 98px;
}

}

/* ---------------------------------------
イラスト制作
--------------------------------------- */
.illustration {
	background: #eee;
	color: #333;
	padding: 1em 1.5em 2em 1.5em;
	margin: 0;
}
.illustration p {
	font-size: 1.4em;
	line-height: 1.6em;
}

/* ---------------------------------------
イラストスライダー
--------------------------------------- */
.carousel {
	max-width: 960px;
	margin: 32px auto;
	border: solid #FFF 6px;/*box-shadow: rgba(212, 212, 212, 0.65098) 0px 0px 6px 3px;
	-webkit-box-shadow: rgba(212, 212, 212, 0.65098) 0px 0px 6px 3px;
	-moz-box-shadow: rgba(212, 212, 212, 0.65098) 0px 0px 6px 3px;*/
}
.carousel-inner img {
}
.carousel-indicators {
	position: absolute;
	bottom: -50px;
	color: #000;
}
.carousel-indicators li {
	border: 1px solid #999;
}
.carousel-indicators .active {
	background-color: #999;
}
.carousel-control {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 15%;
	font-size: 20px;
	color: #999;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
	filter: alpha(opacity=50);
	opacity: .5
}
.carousel-control.left {
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,.5) 0, rgba(0,0,0,.0001) 100%);
	background-image: -o-linear-gradient(left, rgba(0,0,0,.5) 0, rgba(0,0,0,.0001) 100%);
	background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,.5)), to(rgba(0,0,0,.0001)));
	background-image: linear-gradient(to right, rgba(0,0,0,.5) 0, rgba(0,0,0,.0001) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
	background-repeat: repeat-x
}


@media screen and (max-width:767px) {
.illustration p {
	font-size: 1.2em;
	text-align:left;
}

.carousel-indicators{
	white-space: nowrap;}
}
/* ---------------------------------------
Webサイト制作
--------------------------------------- */
.webdesign {
	background: #eee;
	margin: 0;
	padding: 1em 1.5em 4em 1.5em;
}
.webdesign .col-md-6 {
	text-align: left;
}
.webdesign .col-md-6 p {
	text-align: left;
	font-size: 1.4em;
	line-height: 1.6em;
}

.webdesign .col-xs-12 img{
	display:block;
	margin:0 auto 2em;}

@media screen and (max-width:767px) {
.webdesign .col-md-6  p {
	margin-top:1.5em;
	font-size: 1.2em;
}
}
/* ---------------------------------------
ワークフロー
--------------------------------------- */
.workflow {
	background: #fff;
	padding: 0 1.5em 2em 1.5em;
}
.workflow .col-md-3 img {
	display: block;
	margin: 0 auto 1em;
}
.workflow .col-md-3 h4 {
	text-align: center;
	line-height: 1.6em;
	font-size: 1em;
	font-weight: bold;
}
.workflow .col-md-3 p {
	text-align: left;
	line-height: 1.6em;
	font-size: 1.2em;
}
body section .workflow .col-md-3 small {
	text-align: left;
	line-height: 1.2em;
	font-size: 0.8em;
}
.workflow p {
	font-size: 1.4em;
	line-height: 1.6em;
	margin-bottom:2em;
}
/* ---------------------------------------
ワークフローフキダシ
--------------------------------------- */

.col-md-3 .balloon-bottom {
	position: relative;
	display: inline-block;
	padding: 8px 16px;
	width: 100%;
	display:block;
	margin:0 auto 2em;
	line-height: 34px;
	color: #19283C;
	text-align: center;
	background: #fff;
	border: 3px solid #1dbfc8;
	z-index: 0;
}
.col-md-3 .balloon-bottom:before {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 50%;
	margin-left: -9px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 9px 0 9px;
	border-color: #fff transparent transparent transparent;
	z-index: 0;
}
.col-md-3 .balloon-bottom:after {
	content: "";
	position: absolute;
	bottom: -12px;
	left: 50%;
	margin-left: -10px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #1dbfc8 transparent transparent transparent;
	z-index: -1;
}
@media screen and (max-width:767px) {
.col-md-3 .balloon-bottom {
	width: 16em;
}


}

@media screen and (max-width: 991px){


.col-md-3 .balloon-bottom {
	width: 100%;
	font-size:1em;
}

}

/* ----------------------------------------------------
   Contact
----------------------------------------------------*/

.contact {
	background: #f8f8f8;
	padding: 0 1.5em 4em 1.5em;
}

.contact p{
	font-size: 1.2em;
}
.contactform {
	width: 100%;
}


.contactform p {
	line-height: 1.5em;
	margin: 0 0 15px 0 ;
	text-align: left;/*border:solid 1px  #ff0000;*/
}
.clear {
	clear: both;
}
.contactform input, .contactform button, .contactform textarea, .contactform select {
	margin: 0;
	padding: 0;
	background: #fff;
	border: none;
	border-radius: 0;
	outline: solid 1px #CCCCCC;
	appearance: none;-webkit-border-radius: 4px;
	-moz-border-radius: 4p;
	border-radius: 4px;
}
.contactform input {
	margin: 0;
	padding: 0.5em;
}
.screen-reader-response, .wpcf7-response-output {
	color: #F00;
	font-weight: bold;
	margin: 20px 0px 20px 0px;
	border: none;
	padding: 0px;
	clear: both;
}
.acceptance-message {
	font-weight: bold;
}
.your-subject input {
	width: 44em;
	clear: both;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4p;
	border-radius: 4px;
}
.your-message textarea {
	clear: both;
	width: 900px;
	height: 500px;
	padding:0.5em;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4p;
	border-radius: 4px;
}
.contactform .wpcf7-submit {
	border: none;
	background: url(../images/message.svg) no-repeat;
	background-size: 30px 23px;
	background-position: 16px 50%;
	background-color: #fff;
	padding: 16px 64px;
	margin: 0px;
	font-family: Arial, sans-serif;
	font-size: 1.3em;
	text-transform: uppercase;
	font-weight: bold;
	color: #1dbfc8;
	cursor: pointer;
	border-top: 4px solid #1dbfc8;
	border-left: 4px solid #1dbfc8;
	border-right: 4px solid #1dbfc8;
	border-bottom: 4px solid #1dbfc8;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5p;
	border-radius: 5px;
	outline: none;
}
.contactform .wpcf7-submit:hover {
	background-color: #e0f6f7;
}

@media screen and (max-width:767px) {
	.contact p{
		text-align:left;
}
	.contactform{
		width: 100%;
		padding:0;
		margin:0 auto;}
.your-message textarea,.your-name input,.your-email input,.your-subject input {
	width: 100%;
		margin:0 auto;
}
.contactform .wpcf7-submit {
	width: 100%;
	padding: 1em 3em;
	font-size: 1.1em;}

.acceptance-message{
	padding-left:1em;
text-indent:-1em;
	}
}

@media screen and (max-width:991px) {
	.contact p{
		text-align:left;
}
	.contactform{
		width: 100%;
		padding:0;
		margin:0 auto;}
.your-message textarea,.your-name input,.your-email input,.your-subject input {
	width: 100%;
		margin:0 auto;
}
.contactform .wpcf7-submit {
	width: 100%;
	padding: 1em 3em;
	font-size: 1.1em;}

.acceptance-message{
	padding-left:1em;
text-indent:-1em;
	}
}




/* 画面幅が1170px以上になった場合に背景色をつける */
.main-v {
	margin: 51px 0 0 0;
}
.main-v img {
	width: 100%;
}
/* メインcontainerを最大1170pxに指定 */
/* Bootstrapのコンテンツエリアが最大1170pxのため */
.main-container {
	position: relative;
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	border-bottom: solid 1px #CCCCCC;
}
img {
	max-width: 100%;
	height: auto;
}


/* ----------------------------------------------------
   Gallery
----------------------------------------------------*/
.gallery {
	background: #000;
	color: #FFF;
	padding: 0;
	margin: 0 auto;
}
.gallery-inner {
	padding: 0em 1.5em 1em 1.5em;
}


.gallery-main img {
	width: 100%;
	margin: 0 0 24px 0;
	border-top: solid 2px #000000;
}
.gallery_illust {
	max-width: 960px;
	clear: both;
	line-height: 1;
	text-align: left;
	margin: 0 auto 0;
}
.gallery_illust img {
	width: 8.66490909091%;
	margin: 0 0.426% 0.426% 0;
}

@media screen and (max-width:767px) {
.gallery-inner h2{
	font-size:2em;
}
.gallery_illust img {
	width: 24.574%;
}

}
/* ----------------------------------------------------
   LINEスタンプ
----------------------------------------------------*/	
.linesticker {
	background: #f8f8f8;
	padding: 1em 1.5em 1.5em 1.5em;
}
.linesticker h5 {
	font-size: 121%;
	margin: 16px 0 8px 0;
}
.linesticker p {
	text-align: center;
}
.linesticker .row p {
	text-align: left;
}
.linesticker .row img {
	display: block;
	margin: 0 auto 1em;
	border: solid 1px #e1e1e1;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4p;
	border-radius: 4px;
}
@media screen and (max-width:767px) {
.linesticker h3 {
	text-align:center;
}
}
/* ----------------------------------------------------
 プロフィール
----------------------------------------------------*/	
.profile {
	background: #fff;
	padding: 1em 1.5em 3em 1.5em;
}
.profile p {
	text-align: left;
}

.profile img {
	display:block;
	margin:0 auto;
}
.profile h4 {
	font-size: 130%;
}

.profile .row.col-md-3 img,.profile .row .col-xs-6 img ,.profile .row col-sm-3 img  {
		width: 100%;
	border: solid 1px #e1e1e1;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3p;
	border-radius: 3px;
}

/* ----------------------------------------------------
  ブログ
----------------------------------------------------*/	

.blog {
	background: #f8f8f8;
	padding: 1em 0em 1.5em 0em;
}
.blog li {	margin: 0 0 24px 0;
	vertical-align: top;
display: inline-block;
height: auto;
	list-style: none;
	text-align: left;
	height: 14em;
}


.blog li img {
		width: 100%;
	overflow: hidden;
	margin: 0 0 0.5em 0;
	border: solid 1px #e1e1e1;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3p;
	border-radius: 3px;
}
.blog ul {
	padding: 0;
}
.blog .blog-archive {
	text-align: center;
	padding: 8px 0 16px 0;
}
@media screen and (max-width:991px) {
.blog li {
	height: 16em;
}
}
@media screen and (max-width:767px) {
.blog li {
	height: 18em;/*border:solid 1px #FF0000;*/	
	text-align:center;
	float: none;
}
.blog li img{
	max-width: 300px;
	display:block;
	margin:0 auto 0.5em;
	
}
}

/* ----------------------------------------------------
 実績紹介
----------------------------------------------------*/	

.portfolio{
	margin-top:100px;
	}

.portfolio .entry-header h1{
	padding: 0.5em;
	font-size:140%;
	font-weight:bold;
	min-width: 115px;
	line-height: 1.6em;
	text-align: left;
	margin: 24px auto 24px;
	border-bottom: 3px solid #1dbfc8;
	text-align:center;
}
.portfolio p{
	text-align:center;
	margin:0 auto 1em;
	}

.portfolio img{
	margin:0 auto 0.5em;
	display:block;
	}


.portfolio-list {
	padding: 0 1.5em 2em 1.5em;
}

.portfolio-list .col-md-3 {
	margin-top:1em;
	height:17em;
}
.portfolio-list .col-md-3 img {
	display: block;
	margin: 0 auto 1em;
}
.portfolio-list .col-md-3 h4 {
	text-align: center;
	line-height: 1.6em;
	font-size: 1em;
	font-weight: bold;
}
.portfolio-list .col-md-3 p {
	text-align: left;
	line-height: 1.6em;
	font-size: 1.1em;
}
body section .portfolio-list .col-md-3 small {
	text-align: left;
	line-height: 1.2em;
	font-size: 0.8em;
}
.portfolio-list p {
	font-size: 1.4em;
	line-height: 1.6em;
	margin-bottom:2em;
}
@media screen and (max-width:767px) {

.portfolio .col-xs-12 {
	padding: 1em;
}

.portfolio p {
	padding:0 1em 1em;
}

.portfolio-list .col-xs-12 p a{
	text-align:center;
	display:block;
	padding:0 1em 1em;
}

.portfolio-list .col-md-3 {
	height:14em;
}

}
/* ----------------------------------------------------
  フッター
----------------------------------------------------*/	
footer {
	background: #f8f8f8;
	padding: 5em 1.5em 5em 1.5em;
}
footer .inner {
	text-align: center;
}
/*==== clear fix ====
------------------------------------*/

.blog ul:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}
.blog ul {
	zoom: 100%;
}
.clearfix {
	display: inline-block;
} /* Hides from IE-mac \*/
* html .clearfix, {
 height: 1%;
}
.clearfix {
	display: block;
} /* End hide from IE-mac */