@charset "utf-8";

section{
margin:0;
padding-top:80px;
}

img{
vertical-align:bottom;
}

h2{
margin:0 0 40px;
font-size:1em;
line-height:2.25;
}

h2:before{
content:attr(data-title);
display:inline-block;
margin:0 30px 0 0;
padding:0 30px 0 0;
border-right:1px solid #222;
font-size:2.25em;
line-height:1;
font-family:'Lato';
/*text-transform:uppercase;*/
vertical-align:middle;
letter-spacing:5px;
}

@media screen and (max-width:988px){
h2:before{
margin:0 15px 0 0;
padding:0 15px 0 0;
}
}

@media screen and (max-width:620px){
h2:before{
display:none;
}
h2{
font-size:2.25em;
}
}

.col3:after,
.col4:after,
.col5:after{
content:"";
height:0;
display:block;
clear:both;
}

.col3>li,
.col4>li,
.col5>li{
float:left;
}

.col3>li{
width:32.7%;
margin-right:.9%;
}

.col4>li{
width:23.5%;
margin-right:2%;
}

.col5>li{
width:19.2%;
margin-right:1%;
}

.col3>li:nth-child(3n),
.col4>li:nth-child(4n),
.col5>li:nth-child(5n){
margin-right:0;
}

@media screen and (max-width:720px){
.col3>li,
.col3>li:nth-child(3n){
width:48%;
margin-right:4%;
}
.col3>li:nth-child(2n){
margin-right:0;
}
}

@media screen and (max-width:696px){
.col5>li,
.col5>li:nth-child(5n){
width:32%;
margin-right:2%;
}
.col5>li:nth-child(3n){
margin-right:0;
}
}

@media screen and (max-width:578px){
.col4>li,
.col4>li:nth-child(4n){
width:48%;
margin-right:4%;
}
.col4>li:nth-child(2n){
margin-right:0;
}
}

@media screen and (max-width:402px){
.col3>li,
.col3>li:nth-child(3n),
.col3>li:nth-child(2n){
float:none;
width:auto;
margin-right:0;
height:auto !important;
}
}

@media screen and (max-width:460px){
.col5>li,
.col5>li:nth-child(5n),
.col5>li:nth-child(3n){
width:48%;
margin-right:4%;
}
.col5>li:nth-child(2n){
margin-right:0;
}
}

@media screen and (max-width:400px){
.col4>li,
.col4>li:nth-child(4n),
.col4>li:nth-child(2n){
float:none;
width:auto;
margin-right:0;
height:auto !important;
}
}

/* @group masthead */

#masthead{
background:#000 url("../img/index/masthead.jpg") 50% 50% no-repeat;
background-size:cover;
}

.masthead_content{
position:relative;
z-index:10;
padding:22vw 0;
color:#fff;
background-color:rgba(71,73,84,.42);
text-align:center;
}

@media screen and (min-width:1281px){
.masthead_content{
padding:276px 0;
}
}

h1{
padding:0 10px;
color:#fff;
font-size:3.125em;
font-weight:bold;
text-align:center;
/*line-height:.96;*/
line-height:1.5;
}

.slogan{
display:block;
margin:0 0 20px;
font-size:.52em;
font-weight:normal;
line-height:2.077;
}

h1:after{
display:none;
}

@media screen and (max-width:767px){
.slogan{
line-height:1.5;
}
h1 br{
display:none;
}
}

.masthead_content p{
margin:0 0 10px;
line-height:1.625;
}

.masthead_content .button{
color:#fff;
background:#333;
border-color:#fff;
font-size:1.25em;
line-height:1.2;
}

.masthead_content .button:hover,
.masthead_content .button:focus{
color:#333;
background:#fff;
border-color:#333;
}

/* @end */

/* @group problem */

#problem p{
margin-bottom:40px;
}

#problem li{
position:relative;
min-height:110px;
margin-bottom:20px;
padding-left:110px
}

#problem .title{
color:#222;
font-weight:bold;
}

#problem .image{
position:absolute;
top:0;
left:0
}

/* @end */

/* @group strong_points */

#strong_points ul{
margin-bottom:20px;
}

#strong_points li{
text-align:center;
}

#strong_points .title{
margin:30px 0 10px;
font-size:1.125em;
line-height:1.2222;
color:#000;
}

#strong_points .description{
margin:0 0 40px;
padding:0 10px 40px;
font-size:.875em;
}

@media screen and (max-width:578px){
#strong_points li:nth-child(n+3){
margin-top:30px;
}
}

@media screen and (max-width:400px){
#strong_points .title{
margin:15px 0;
}
#strong_points li{
margin-top:30px;
}
#strong_points li:first-child{
margin-top:0;
}
}

/* @end */

/* @group solution */

#solution ul{
margin:0;
padding:0 0 40px;
}

#solution li{
margin-bottom:40px;
}

#solution li a{
display:block;
position:relative;
border-radius:3px;
color:#222;
background:#fff;
text-decoration:none;
text-align:center;
height:100%;
}

#solution .case_num{
position:absolute;
top:0;
left:0;
padding:10px 25px;
color:#fff;
background:#333;
font-size:.75em;
font-family:'Lato';
line-height:1;
border-radius:3px 0 0 0;
z-index:10;
}

#solution img{
vertical-align:bottom;
}

#solution .image{
background:#000;
}

#solution .title{
margin:40px 0 35px;
padding:0 10px;
font-size:1.375em;
line-height:1;
font-family:'Lato';
color:#000;
letter-spacing:2px;
}

#solution .description{
padding:0 20px 30px;
font-size:.875em;
line-height:2;
color:#555;
}

#solution .description ul{
padding:25px 0 0 0;
}

#solution .description li{
margin:0 0 0 1.5em;
padding:0;
text-align:left;
list-style:disc;
}

#solution .view_case{
position:absolute;
z-index:10;
bottom:-1.5em;
left:calc( 50% - 6em );
display:block;
width:12em;
color:#fff;
font-size:.875em;
line-height:3;
}

#solution .view_case:before{
content:'';
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
background-color:#333;
transform:skew(-15deg);
z-index:-1;
}

#solution .view_case:after{
content:'';
position:absolute;
top:calc( 50% - 3px );
right:20px;
display:block;
width:15px;
height:6px;
background:url("../img/index/case/arrow.png") 0 0 no-repeat;
}

#solution li a:hover,
#solution li a:focus{
color:#fff;
background:#333;
}

#solution li a:hover *,
#solution li a:focus *{
color:#fff;
}

#solution li a:hover .view_case:before,
#solution li a:focus .view_case:before{
background-color:#0cf;
}

#solution li a:hover img,
#solution li a:focus img{
opacity:.5;
}

/* @end */

/* @group case */

#case .category{
color:#222;
font-weight:bold;
}

#case > ul li ul{
margin-bottom:0;
padding-right:1em;
}

#case > ul li ul li{
margin-left:2em;
list-style:disc;
}

#case .etc{
margin:0 1em 0 0;
text-align:right;
}

/* @end */

/* @group user_test_studio */

@media screen and (max-width:767px){
#user_test_studio li{
float:none;
margin:0 0 40px;
width:100%;
text-align:center;
}
}

/* @end */

/* @group activities */

#activities .title{
font-weight:bold;
}

#activities p img{
display:block;
margin-top:20px;
}

@media screen and (max-width:767px){
#activities li > div{
margin-bottom:40px;
}
#activities li:not( :first-child ){
padding-top:40px;
border-top:1px dotted #222;
}
}

/* @end */