/*
*	Last Update 2016-08-27
*
*	1-0.Clearfix
*	1-1.General
*	1-2.Structure
*	1-3.Cotnents
*
*/


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

1-0.Clearfix

=======================================*/
header:after,nav:after,nav ul:after,article:after,section:after,footer:after,
.container:after,.section:after {
display:block;
clear:both;
content:"";
}

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

1-1.General

=======================================*/
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
*:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html {
font-size:62.5%;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
overflow-x:hidden;
}
body {
padding-top:40px;
color:#111;
background-color:#fff;
font-size:14px;
font-size:1.4rem;
font-family:Avenir , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto ,"Noto Sans Japanese", "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
line-height:1.8;
}

img{
max-width:100%;
height:auto;
width /***/:auto;
border:none;
border-style:none;
vertical-align: middle;
}
.img-full {
display:block;
width:100%;
margin:auto;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 6px;
}
.img-thumbnail {
padding: 4px;
line-height: 1.42857143;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
display: inline-block;
max-width: 100%;
height: auto;
}
.img-circle {
border-radius: 50%;
}

a {
color:#333;
text-decoration:none;
}
a:hover,
a:focus {
color:rgba(51,51,51,.7);
text-decoration:underline;
}
a:focus {
outline:thin dotted;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px;
}

a:hover img {
opacity:0.6;
filter:alpha(opacity=60);
}

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

1-2.Structure

=======================================*/
/*----------------
STRUCTURE
----------------*/
/*.container,
.container-slim {
width:94%;
margin-left:auto;
margin-right:auto;
}
.container-fluid {
width:100%;
padding-left:0;
padding-right:0;
}

@media screen and (min-width:768px) {
.container-slim {width:710px;}
}


@media screen and (min-width:1120px) {
.container {width:1080px;}
}*/


/*----------------
HEADER
----------------*/
#Header {margin-bottom:40px;}
#Header h1 {
font-size:30px;
font-size:3.0rem;
font-weight:700;
line-height:1;
}
#Header h1 span {/*color:#E2138C*/color:#43d5eb;}

#gNavi {
display:none;
font-family: 'Raleway', sans-serif;
}

.drawer--right.drawer-open .drawer-hamburger {right:20em;}
.drawer--right .drawer-nav {right:-20em;}
.drawer-nav {
padding-top:1em;
width:20em;
text-align:center;
}
.drawer-nav li {
border-bottom:1px solid #999;
margin-bottom:4px;
padding-bottom:4px;
}
@media screen and (min-width:768px) {
#Header h1 {
 float:left;
 width:30%;
}
#gNavi {
display:block;
float:right;
width:68%;
margin:4px auto 0;
font-size:0;
text-align:right;
}
#gNavi li {
display:inline-block;
font-size:18px;
font-size:1.8rem;
font-weight:300;
}
#gNavi li+li {margin-left:3em;}
.drawer-hamburger {display:none;}
}

/*----------------
FOOTER
----------------*/
footer {
padding:20px 0;
color:#fff;
background-color:#000;
text-align:center;
}


@media screen and (min-width:768px) {
footer {padding:50px 0;}
}

/*----------------
TITLE
----------------*/
h1,
h2,
h3 {font-family: 'Raleway', sans-serif;}

h2 {
margin-bottom:30px;
font-size:40px;
font-size:4.0rem;
font-weight:200;
text-align:center;
}
h3 {
font-size:24px;
font-size:2.4rem;
font-weight:300;
}


hr {
clear:both;
border:0;
height:1px;
margin:0 0 14px;
padding:0;
color:#fff;
}
hr.hr-sepa {
clear:both;
border:0;
height:30px;
margin:0;
padding:0;
color:#fff;
}

.font4L {
font-size:24px;
font-size:2.4rem;
}
.font3L {
font-size:20px;
font-size:2.0rem;
}
.font2L {
font-size:18px;
font-size:1.8rem;
}
.fontL {
font-size:16px;
font-size:1.6rem;
}
.fontM {
font-size:13px;
font-size:1.3rem;
}
.fontS {
font-size:12px;
font-size:1.2rem;
}
.font2S {
font-size:10px;
font-size:1.0rem;
}

.txt-left { text-align:left; }
.txt-right { text-align:right; }
.txt-center { text-align:center; }
.tet-justify {text-align: justify;}

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

1-3.Contents

=======================================*/
/*===  VISUAL  ===*/
#Visual-block.container-fluid {margin:0;padding:0;}


/*===  ABOUT  ===*/
#About-block {margin:80px auto;}
#About-block h3,
#About-block p {
 text-align:center;
}
#About-block h3 {
margin-bottom:30px;
font-family:"Noto Sans Japanese", "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
#About-block p+p {margin-top:1.4em;}

/*===  SERVICE  ===*/
#Service-block {
margin:80px auto;
padding:40px 0;
background-color:#eee;
}
#Service-block li {margin-bottom:30px;}
#Service-block li .icon {
 float:left;
 width:30px;
 min-height:40px;
 margin-top:14px;
 text-indent:-9999em;
}
#Service-block li .icon.type-cre {background:url(img/ic_creative.png) no-repeat;}
#Service-block li .icon.type-con {background:url(img/ic_contents.png) no-repeat;}
#Service-block li .icon.type-seo {background:url(img/ic_seo.png) no-repeat;}
#Service-block li .icon.type-ga {background:url(img/ic_ga.png) no-repeat;}
#Service-block li .icon.type-mak {background:url(img/ic_marketing.png) no-repeat;}
#Service-block li .icon.type-med {background:url(img/ic_media.png) no-repeat;}
#Service-block li .icon.type-vr {background:url(img/ic_vr.png) no-repeat;}
#Service-block li .icon.type-cre,
#Service-block li .icon.type-con,
#Service-block li .icon.type-seo,
#Service-block li .icon.type-ga,
#Service-block li .icon.type-mak,
#Service-block li .icon.type-med,
#Service-block li .icon.type-vr {background-size:contain;}

#Service-block li h3,
#Service-block li p {margin-left:40px;}

/*===  WORKS  ===*/
#Works-block {margin:80px auto;}
#Works-block .row{
 margin-left:-5%;
 margin-right:-5%;
}
#Works-block li {margin-bottom:20px;}
#Works-block li > .wkbox {
border:1px solid #ddd;
margin:0 10%;
padding:10px;
text-align:center;
}
#Works-block li .thumbnail {
 display:block;
 margin:-10px -10px 10px;
 background-color:#eee;
}
#Works-block h3 {
 margin-bottom:10px;
 font-size:18px;
 font-size:1.8rem;
 font-weight:500;
}
#Works-block h3.coming,
#Works-block p {color:#666;}


/*===  CONTACT  ===*/
#Contact-block {
margin:80px auto 0;
padding:40px 0;
background-color:#eee;
}
#Contact-block #c-info {text-align:center;}
#Contact-block h3 {margin-bottom:10px;}
address {
margin-bottom:20px;
font-style:normal;
}
.req {
display:inline-block;
border-radius:3px;
padding:2px 4px 0;
color:#fff;
background-color:#43d5eb;
font-size:11px;
font-size:1.1rem;
}

@media screen and (min-width:768px) {
.span-break {display:block;}

/*===  WORKS  ===*/
#Works-block .row{
 margin-left:0;
 margin-right:0;
}
#Works-block li+li {margin-top:0px;}
#Works-block li > .wkbox {
border:1px solid #ddd;
margin:0;
padding:10px;
text-align:center;
}

/*===  CONTACT  ===*/
#Contact-block #c-info {text-align:left;}
.form {margin-top:0;}
}

@media screen and (min-width:992px) {
}


/*===  FORM  ===*/
.form {margin-top:30px;}
#Form-Section {margin:20px auto 0;}
#Form-Section table,
#Form-Section table th,
#Form-Section table td {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#Form-Section table {
border-collapse:collapse;
width:100%;
}
#Form-Section table th,
#Form-Section table td {
border-bottom:1px solid #999;
padding:12px 0;
}
#Form-Section table th {
width:30%;
vertical-align:top;
text-align:left;
}
#Form-Section table th .req {
display:inline-block;
border-radius:3px;
margin-left:.6em;
padding:2px 4px 0;
color:#fff;
background-color:#43d5eb;
font-size:11px;
font-size:1.1rem;
}

/*#Form-Section label {display:block;}
#Form-Section label + label {margin-top:4px;}*/
#Form-Section label + label {margin-left:4px;}
#Form-Section input[type='radio'] {
position:relative;
top:2px;
margin-right:6px;
vertical-align:top;
}
#Form-Section input[type='text'],
#Form-Section textarea {
border:1px solid #999;
width:100%;
background-color:#eee;
font-size:16px;
font-size:1.6rem;
line-height:26px;
}
#Form-Section textarea {
height:80px;
margin-top:10px;
line-height:1.4;
resize:none;
}

#Form-Section .btn-submit {
display:block;
border:none;
border-radius:3px;
width:200px;
height:40px;
margin:20px auto 0;
color:#fff;
background-color:rgba(101,101,101,1);
font-size:16px;
font-size:1.6rem;
text-align:center;
-webkit-box-shadow: 2px 2px 0 0 rgba(151,151,151,1);
box-shadow: 2px 2px 0 0 rgba(151,151,151,1);
}
#Form-Section .btn-submit:hover {
-webkit-box-shadow: 2px 2px 0 0 rgba(180,180,180,1);
box-shadow: 2px 2px 0 0 rgba(180,180,180,1);
}

@media screen and (max-width: 767px) {
#Form-Section table th,
#Form-Section table td {
display:block;
padding:0;
border-bottom:none;
}
#Form-Section table th {
width:100%;
padding:16px 0 4px;
text-align:center;
}
/*#Form-Section label {
display:inline-block;
width:49%;
}*/
#Form-Section label {display:block;}
#Form-Section label+label {margin:0;}
}