/*
 * Theme Name: Tkplus4
 * Theme URI: http://skrollr.1nterval.com
 * Author: Tomohiro Nakajo
 * Author URI: http://joelabo.xyz
 * Description: sample Skrollr.
 * Version: 4
 * License: GNU General Public License v2 or later
 * Tags: one-column, light, responsive-layout, custom-colors, custom-menu, post-formats, translation-ready
 * Text Domain: Tkplus
 */
 
/*
 * This theme follows SMACSS guideline http://smacss.com/book/categorizing
 * All CSS rules are located into the following files :
 *  # css/base.css : the defaults
 *  # css/layout.css : major components
 *  # css/module.css : discrete components
 *  # css/state.css : augments and overrides all other styles
 *  # css/theme.css : specific look and feel
 */

/**
 * Address margins set differently in IE 6/7.
 */

html,body{height:100%;}

body > #side-area{height:auto;}

body, .block, .one-column, footer {
    background-color: #fff;
    color: #000;
font-family: 'Apple TP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:16px;
line-height:1.2;
letter-spacing:0.2em;
  word-wrap : break-word;
  overflow-wrap : break-word;
    word-break: break-all;
height:100%;
}

p{    line-height: 1.8;
    letter-spacing: 0.1em;
}

br.spbr{display:none;}

.mb60{margin-bottom:60px;}

p.pnkz{
color:#818181;
}


a{
text-decoration: none;
color:#000;
}
dl,
menu,
ol,
ul {
    margin: 1em 0;
list-syle:none;
}

li {
    list-style: none;
}

dd {
    margin:0px;
}

.widget{
padding-top:20px;
margin-bottom:30px;
}


.post-title h2{
font-family: 'Apple TP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    margin: 0.5em 0;
}

h2{
font-family: 'Roboto Slab', serif;
}

.solution_box h2{margin: 0.83em 0 4em 0;
font-family: 'Roboto Slab', serif;
}

h3{margin: 0.83em 0;
font-family: 'Roboto Slab', serif;
}

.solution_box p{
font-size:90%;
    line-height:2;
    letter-spacing: 0.1em;
}

.workflow_contents p.workflow_head{
    margin: 0.3em 0;
}

.workflow_contents p{
    line-height:2;
    letter-spacing: 0.1em;
}

.workflow_contents p.workflow_num{

    line-height: 1;
}
.f_left{float:left;}

.bold{font-weight:bold;}

.small{font-size:80%;}


.head-read {
    color: #fff;
    position: absolute;
    line-height: 2;
    letter-spacing: 0.2em;	
    padding-left: 30px;
    font-size: 16px;
    bottom:-40px;
	font-weight:bold;
	z-index:499;
}

/*
.head-read {
    color: #fff;
    line-height: 2;
    letter-spacing: 0.2em;
    bottom: 60%; 
    padding-top: 400px;
    padding-left: 30px;
    font-size: 14px;
    padding-bottom: 20px; */
}
*/
header .block{
    margin-bottom: 50px;
min-height:550px;
display:none;
}

.slabtexted .slabtext{
display:none;
}

.post_area{
overflow:hidden;
width:100%;
margin:auto;
}

.post_news .information_post_area{
text-align:left;
}

.post_box{
text-align:center;
padding-bottom:20px;
margin-bottom:20px;
}

.post_box h2{
font-family: 'Roboto Slab', serif;
}
.works_box{
border-right:1px solid #000;
}
.works_box2{
	border-top:1px solid #000;
}
.works_box2 h2{
	padding:30px 0 0 0;
}
.works_box2 .information_post_box img{
	height:100% !important;	
}
.works_box2 .information_post_box_list {
	margin:0 5px;
}

@media only screen and ( max-width: 1670px){
.works_box2 .information_post_box_list {
	margin:0 4px;
}
}
@media only screen and ( max-width: 1470px){
.works_box2 .information_post_box_list {
	margin:0 3px;
}
}
@media only screen and ( max-width: 1270px){
.works_box2 .information_post_box_list {
	margin:0 2px;
}
}
@media only screen and ( max-width: 1070px){
.works_box2 .information_post_box_list {
	margin:0 1px;
	
}
.works_box2 .information_post_box img{
	height:auto !important;	
}
}
@media only screen and ( max-width: 870px){
.works_box2 .information_post_box_list {
	margin:0;
}
}

.more_box p{
    border: solid 1px #818181;
    border-radius: 0.5em;
    color: #818181;
    display: inline-block;
    padding: 5px 15px;
    cursor: pointer;
    font-family: 'Roboto Slab', serif;
    font-weight:bold;
}

.solution_box .more_box p{
 font-family: 'Apple TP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}



.more_box p a{
    color: #818181;
}

.sns_icon{
color:#fff;
}

.sns_icon a{
color:#fff;
font-size:300%;
}

.plus_bg{
background-image: url(http://tokyokplus.com/wp-content/uploads/2015/10/plus_bg.png);
    position: absolute;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
	z-index:499;	
}

.solution_box .more_box p{
margin-bottom:0px;
}

.more_box_arrow p{
margin-top:0px;
}

.solution_box{
width:95%;
margin:auto;
margin-bottom:30px;
font-weight:bold;
}

.solution_box_img{
margin-bottom:50px;
}

.solution_box_img img{
width:100%;
}

.company_box{
margin-bottom:20px;

}

.company_box_img{
margin-bottom:50px;
}
.company_box_img img{
width:100%;
}


.contents_box{
text-align:center;
}

.p_header{
font-size:120%;
}

.comany_text_box{
width: 80%;
    margin: auto;
    overflow: hidden;
}

.comapny_img{
 width: 30%;
    float: left;
}
.comapny_img img{
margin:1em 0;
}

.comapny_text{
width:530px;
    float: left;
text-align:left;
line-height:2;
font-weight:bold;
padding-left: 20px;
}


.comapny_text p{
    line-height: 2;
    letter-spacing: 0em;
}




.comapny_text .company_info{
padding-top:30px;
font-size:90%;
font-weight:normal;
}

.company_info dl{overflow:hidden;
}

.company_info dt,dd{float:left;
margin-bottom:10px;
font-weight:nomal;
}

.company_info dt{width:20%;
}

.company_info dd{width:75%;
text-indent: -16px;
}

.map_area{
text-align: center;
/* padding-right:80px; */
}

.fotter_area{overflow:hidden; padding-top:10px;padding-bottom:10px;}

.fotter_logo{float:left;}

.fotter_copy{float:right; font-size:12px; color:#818181; letter-spacing: 0.1em;}

.post_entry{
padding:50px 0;
}

.workflow_area{
text-align:left;
background-color:#EAEAE4;
}


.workflow_contents{
background-image: url(http://tokyokplus.com/wp-content/uploads/2015/10/workflow_bg.png);
    background-repeat: no-repeat;
    min-height:300px;
padding-left: 100px;
margin-bottom:50px;
}


.workflow_num{
    color: #90969A;
    font-size: 61px;
    margin-bottom: 40px;
    margin-top: 0;
font-family: 'Roboto', serif;
}


.contact_box{
text-align:left;
margin-bottom:30px;
}

p.header{font-size:160%; margin-bottom: 0em;}


.title-header{
text-align:center;

}

.title-header h2{
font-family: 'Roboto Slab', serif;
font-size: 1.5em;
}

/*
#side-area{
padding-left:20px;
border-left:1px solid #000;
height:100%; for IE6 
	min-height:100%;
}
*/
.post_contents{
	/*
padding-right:30px;
border-right:1px solid #000;
	*/
}




.side-area-contents{
padding-left:30px;
}

.side-area-contents .post-cat{
font-size:85%;
letter-spacing:0.1em;
}

html{
    height:100%;
}
body{
    height:100%;
}

body > #side-area{
    height:auto;
}
.mainnavi{
background-color:#fff;
/*font-family: 'Roboto', serif;*/
	letter-spacing: 1px;
	
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
position: fixed;width: 100%;z-index: 500;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, .mainnavi {
    font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
}
.mainnavi ul {
    padding: 10px;
    margin: 0;
    margin-left: 40px;
}
.mainnavi li{
display:inline-block;
margin-right:50px;
    font-size: 13px;
}
.menuTel{
	display: block;
	position: absolute;
	top: 12px;
	right: 10px;
	font-size: 13px;
}
.menuTel span{
	letter-spacing: 1px;
}
@media screen and (max-width:1160px){
	.menuTel{
		display: none;
	}
}

#main-box{
	position:relative;
}
#main-box img{
	width:auto !important;	
}

.block{
position:static;
}

header#accueil {
	z-index:1;
}

@media screen and (min-width:460px){
header.block-0{
height:100%;
min-height:720px;
}
}

header.block-0 {
z-index:99999;
}
article#skrollr-body{/* padding-left:80px; */ overflow:hidden;}

.top_head{font-size:24px; margin-left:-10px;}

.head-read p{
line-height:2;
}

/* ==========================================================================
Navigation
========================================================================== */
/* MENU CONF*/

/* スライドインメニューに必要なところ */

#slide_menu{
	position: fixed;
	right: -180px;
	width: 180px;
	height: 100%;
    background: #FFF;
	padding: 25px 0 0 0;
	z-index:1000;
	font-family:  "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 12px;
}
/* 以下装飾など */
#slide_menu ul{
    margin: 0;
    padding: 0;
}
#slide_menu li + li{
    /*border-top: solid 1px #CCCCC8; */
}
#slide_menu li{
   /*border-bottom: solid 1px #B5B5B1; */
    list-style: none;
}
#slide_menu li a{
    display: block;
    padding: 18px 0 18px 20px;
    color: #000;
    text-decoration: none;
}
#slide_menu .batu{
	position: absolute;
	top: 10px;
	right: 10px;
}
#button{
	top: 20px;
	right: 20px;
    position: fixed;
    outline: none;
    border: none;
    /*background: #C2C2BF;*/
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index:302;
    width: 80px;
    height: 80px;
	text-align: center;
}

.snsBox{
	position: absolute;
	bottom: 100px;
	width: 100%;
	padding: 0 15%;
	display: table;
	table-layout: fixed;
	box-sizing: border-box;
}
.snsBox div{
	display: table-cell;
	text-align: center;
}
.snsBox div img{
	width: 50px;
	height: 50px;
}


.btn_box {
    position: fixed;
    bottom: 2%;
    width: 80px;
    text-align: center;
display:none;
}

footer.container-fluid {
    margin-left: 80px;
    margin-right: 80px;
    padding-bottom: 5px;
    z-index: 500;
    position: relative;
    top: 0%;
    bottom: 0;
}

.post_area{
text-align:center;
    text-align: center;
    padding-top: 70px;
}
.top_news{
	/*background-color:#ECECEC;*/
	padding: 70px 0 70px !important;
}
.topcontainer{
	padding: 0 !important;
}
@media screen and (max-width:600px){
	.top_news{
		padding: 0 0 70px !important;
	}
    .top_news .col-md-12{
        padding-left: 0px;
        padding-right: 0px;
    }
}
@media screen and (max-width:420px){
	.post_area{
		padding-top: 0px;
	}
}

/*
.post_area span.post-cat::after {
    content: " ";
    border: solid 1px #080808;
    display: block;
    width: 35px;
    margin: auto;
    margin: 10px auto;
}
-*/

.post-cat{    font-size: 16px;
font-family: 'Roboto', serif;
font-weight:bold;
}

div#side {
    padding-top: 4em;
}

.side_bar h3 {
    margin:0em 0 2.5em 0;
}


.side_bar ul{
padding-left:0;
}

.side_bar li{
padding-bottom:20px;
}

.side_box{overflow:hidden;}

.side_box h4 {
    margin-top: 0;
    margin-bottom: 1em;
}


.thumbnail_box{
margin-right: 15px;
} 


.side_text_box{}

#map{width:100%; height:400px;}


.scrolldown {
    bottom: 14%;
display:none;
}

.layer{
    position: fixed;
    top: 0;
    z-index: 301;
    display: none;
    width: 100%;
    height: 100%;
   /* background-color: #000;
    opacity:0.5; 
*/
}
body.open{

}


.solution_text_box{
padding-bottom:20px;
}

.solution_text_box p{
letter-spacing:0.2em;
line-height:2;

}


#content{
padding-top:50px;
}

.information_post_box_list{

padding-bottom:0px;
}

.information_post_area{
text-align:center;
}



.information_post_area ol, ul{
padding:0px;
}

.information_post_box_list{
display:inline-block;
vertical-align:top;
float:none;
text-align:center;

}
@media (max-width: 768px){
    .information_post_box_list{
        padding-left: 0px;
        padding-right: 0px;
    }
}

.information_post_box .imgBox{
	width:100%;
	height: 230px;
    overflow: hidden;
	position: relative;
}
@media (max-width: 768px){
	
    .information_post_box h3{
        display: none;
    }
    .information_post_box p{
        margin: 0.5em 0 1.5em;
    }
    .information_post_box .imgBox{
		height: 250px;
        margin: 0;
	}
}
.information_post_box .imgBox .enBox{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	/*background: url(img/w_l1.png) no-repeat left top,url(img/w_l2.png) no-repeat left bottom,url(img/w_r1.png) no-repeat right top,url(img/w_r2.png) no-repeat right bottom;*/
	z-index: 999;
}
.top_three .information_post_box .imgBox .enBox{
	/*background: url(img/w_l1.png) no-repeat left top,url(img/w_l2.png) no-repeat left bottom,url(img/w_r1.png) no-repeat right top,url(img/w_r2.png) no-repeat right bottom;*/
}
.information_post_box .imgBox .enBox img{
	width: 100%;
	height: 100%;
	/*border-radius: 10px;
	-moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
	*/
}
.information_post_box .imgBox .enBox img:hover{
	/*border-radius: 10px !important;
	-webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
	*/
}
@media (min-width: 768px){
.top_three .information_post_box_list {
    width: 48%;
	}
}
@media (min-width: 992px){
.information_post_box_list {
    width: 24%;
}
.top_three{
	padding: 0 13%;
}
.top_three .information_post_box_list {
    width: 32.33%;
	background-color: #FFFFFF;
	margin: 0;
}
.post_box .information_post_box_list {
    width: 49%;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;

}
}



@media only screen and (max-width: 1380px) {
	.top_three{
		padding: 0 0%;
	}
}

@media (min-width: 992px){
.information_post_box img{
width:110%;
height:auto;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
}
}

@media (max-width: 992px){

.information_post_box img{
width:100%;
	height:auto;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
	
}
}
.information_post_box p{
font-size:8pt;
}
.information_post_box p a{
color: #888888;
}


#logo-header img{width:90%;　padding-left:30px;}

@media screen and (max-height: 720px) {
   /* 高さ720px以下の場合 */

#logo-header img {width:85%;
}

.top_head {
    margin-bottom: 0;
}

.head-read p {
    margin-bottom: 0;
}

}

@media screen and (max-width:460px){
.solution_text br{display:none;}
.solution_text br.spbr{display:block;}

p.header{font-size:120%;}
}

@media screen and (max-width: 1000px){
.mainnavi{
    display:none;
}

article#skrollr-body {
margin:auto;
}

#logo-header img{width:75%; padding-top:38px; padding-left:25px; display:block;}


.plus_bg {
/*width: 40%;
    height: 20%;
    top: 35%;
    left: 40%;
*/
top: 10%;
    background-size: 50%;
}

.head-read p{font-size:80%;}

.head-read {
    padding-top: 160px;
display: none;

}
.comapny_img{
 width: 80%;
    float: none;
text-align-center
}

.comapny_img{
 width: 100%;
}
.comapny_text {
    width: 100%;
    float: none;
font-weight:bold;
}

.company_info dt,dd {
    width: 100%; 
font-weight:nomal;
}
.company_info dt, dd {
     float: none; 
    margin-bottom: 10px;
}

.company_info dd {
    width: 100%; 

}
.fotter_logo{margin-bottom:20px;}
.fotter_copy{font-size:90%;}

#side-area{border:none;}

#side-area{padding-top:100px;}

.post_contents{
border:none;
padding-right:0px;
}

.side-area-contents{
padding-left:0px;
}

.btn_box{display:none;}

#button {
    opacity: 0.8;
display:block;
}
.works_box {padding-bottom:100px;}

.works_box {
    border-right:none;
}

footer.container-fluid{
    margin-left: 20px;
margin-right:0px;
width:90%;
text-align:left;
}

.fotter_area{overflow:hidden; padding-top:10px;padding-bottom:10px;}

.fotter_logo{float:none;}

.fotter_copy{float:none; font-size:10px; color:#818181; letter-spacing: 0.1em;}

.map_area {
    /* text-align: center; */
    padding-right: 0px;
    width: 90%;
    margin: auto;
}

.thumbnail_box {
width:100px;
margin-right:15px;
}

.thumbnail_box img{
width:100%;
height:100%;
}
.side_text_box {
width:55%;
float:left;
font-size:80%;
}

.block-0 {
background-attachment: inherit;
    background-repeat: no-repeat;
    background-position:right bottom;
  z-index: -1;
}
}

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






}
#solution{
margin-top:-100px;
padding-top:100px;
}

#company{
margin-top:-100px;
padding-top:100px;
}


/************************************
** レスポンシブページネーション
************************************/
.pagination{
  list-style-type: none;
  padding-left: 0;
  margin: 30px 0;
}
 
.pagination,
.pagination li a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
 
.pagination a {
  font-weight: 300;
  padding-top: 1px;
  text-decoration:none;
  border: 1px solid #ddd;
  border-left-width: 0;
  min-width:36px;
  min-height:36px;
  color: #333;
}
 
.pagination li:not([class*="current"]) a:hover {
  background-color: #eee;
}
 
.pagination li:first-of-type a {
  border-left-width: 1px;
}
 
.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next2 span {
  /* screen readers only */
  position: absolute;
  top: -9999px;
  left: -9999px;
}
 
.pagination li.first a::before,
.pagination li.last a::after,
.pagination li.previous a::before,
.pagination li.next2 a::after {
  display: inline-block;
  font-family: Fontawesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}
 
.pagination li.first a::before { content: "\f100"; }
.pagination li.last a::after { content: "\f101"; }
 
.pagination li.previous a::before { content: "\f104"; }
.pagination li.next2 a::after { content: "\f105"; }
 
.pagination li.current a {
 background-color: #ddd;
 cursor: default;
 pointer-events: none;
}
 
.pagination > li:first-child > a {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
 
.pagination > li:last-child > a {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
 
@media only screen and ( max-width: 680px ) {
  .pagination li.first,
  .pagination li.last {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
 
  .pagination li.previous a { border-left-width: 1px; }
}
 
@media only screen and ( max-width: 500px ) {
  .pagination li {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
 
  .pagination li.current,
  .pagination li.first,
  .pagination li.last,
  .pagination li.previous,
  .pagination li.next2{
    position: initial;
    top: initial;
    left: initial;
  }
 
  .pagination li.previous a { border-left-width: 0; }
}
 
@media only screen and ( max-width: 400px ) {
  .pagination li.first,
  .pagination li.last {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
 
  .pagination li.previous a { border-left-width: 1px; }
}
 
@media only screen and ( max-width: 240px ) { /* For watches? */
  .pagination li { width: 50%;}
 
  .pagination li.current {
    order: 2;
    width: 100%;
    border-left-width: 1px;
  }
}





/* メインビジュアル */
#main-box,
#carousel li{
	height: 100vh;
}
#carousel{
	position:absolute;
	display:none;
	width:100% !important;
}

#carousel li {
	float:left;
	width:100% !important;
}
#carousel li{
	background-size: cover !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, #carousel li{
    background-attachment:local !important;
	  background-size: 100% !important;
  }
}


#carousel li img{
	width:120% !important;
	height:auto !important;
}
#logo-header{
	top:0% !important
}






#main_movie {
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 1;
  width: 100%;
  overflow: hidden;
}
  #main_movie video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
	height: auto;
    margin: -20px 0 0 0;
}
@media screen and (max-width: 1500px) {
	#main_movie video {
		width: auto;
		height: 100%;
	}
}
@media screen and (max-width: 600px) {
      #main_movie video {
        width: auto;
        height: 100%;
		  /*
        -webkit-transform: translate(-53%, -50%);
        -moz-transform: translate(-53%, -50%);
        -ms-transform: translate(-53%, -50%);
        -o-transform: translate(-53%, -50%);
        transform: translate(-53%, -50%);
		  */
	}
}



.topIcon{
	opacity:0;
	z-index: 111;
	position: absolute; 
}
.txS{text-shadow: -2px -2px 10px #888, 2px -2px 10px #888, -2px 2px 10px #888, 2px 2px 10px #888;}

.topLogo{
	top:50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.topLogo h1{
	margin: 0;
	padding: 0;
}


#main-box .topLogo img{width: 100% !important;height: auto;}
.topLogoPlus{top: 200px; left: 253px;width: 60px;}
#main-box .topLogoPlus img{width: 100% !important;height: auto;}
.topTel{top: 80px; right: 50px;background: url(img/telBg.png);border-radius: 10px;padding:0px 10px 5px;color: #FFFFFF; font-size: 11px;font-weight: bold;letter-spacing: -0.5px;text-align: center; }
.topTel p span{display: block;text-align: left;}
.topTel p{display: block;text-align: left;}
/*
.topTel .left{float: left; width: 40% !important;}
.topTel .right{float: right;  width: 40% !important;}
*/
/*
#main-box .topTel .left{width: 80% !important;}
#main-box .topTel .right{width: 85% !important;}
*/

.topTx1{top: 330px; text-align: center; color: #FFFFFF; font-size: 26px;font-weight: bold; width: 100%; padding: 0 10px;box-sizing:border-box;opacity: 0.85 !important;}
.topBox{top: 460px;width: 100%;opacity: 0.85 !important;}
#main-box .topBox .inBox .imgBox img{width: 170px !important;}


#main-box .topSns img{width:55px !important;}

.topBox .in{padding: 0 5%;}
.topBox .inBox{
	text-align: center;
	float: left;
	width: 29%;
	margin: 0 2%;
	color: #FFFFFF;
}
.topBox .inBox .title{font-size: 16px;font-weight: bold; padding: 20px 0 30px;}
.topBox .inBox .tx{font-size: 13px;line-height: 160%;}
.topBox .inBox .tx span{display: block;}

.spmail{
	display: none;
}


@media only screen and ( max-width: 1490px ) {	
	.topBox .inBox .tx span{display:inline;}
}
@media only screen and ( max-width: 1000px ) {	
	#main-box,
	#carousel li{
		height: 110vh;
		/*background-color: #ECECEC;*/
	}
	.caroufredsel_wrapper{
		margin: 0 !important;
		top: -50px !important;
	}
	
	.topLogoPlus{top: 200px; left: 293px;}
	.topTel{right: 20px;}
	.topSns{bottom: 60px; left: 50px;}
	#main-box .topBox .inBox .imgBox img{
		width: 80% !important;
	}
}

@media only screen and ( max-width: 800px ) {
	#main-box,
	#carousel li{
		height:110vh;
	}
	
	#main-box .topTXArea img{
		width: 100% !important;
		height: auto;
	}	

	.topTel{display: none;}	

	.topTx1{top: 45%; text-align: center; color: #FFFFFF; font-size: 18px;font-weight: bold; width: 100%;padding: 0 10px;box-sizing: border-box;}
	.topBox{top: 48%;width: 100%;}
	.topSns{width:100%; bottom: 60px; left: 0px;text-align: center;}
	
	#main-box .topTXArea .topSns img{
		width: 50px !important;
		height: auto;
	}
	.spmail{
		display: inline;
	}
	.topBox .in{padding: 0 5%;}
	.topBox .inBox{
		float: left;
		text-align: center;
		width: 29%;
		margin: 0 2% 20px;
		color: #FFFFFF;
	}
	.topBox .inBox .imgBox{
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}
	#main-box .topBox .inBox .imgBox img{
		width: 100% !important;
	}
	.topBox .inBox .title{font-size: 18px;font-weight: bold; padding: 0;}
	.topBox .inBox .tx{display: none;}
}
@media only screen and ( max-width: 700px ) {
	#main-box,
	#carousel li{
		height: 100vh;
	}
	.topLogoPlus{width:30px;top: 100px; left: 60%;}
	.topTx1{top: 45%; text-align: center; color: #FFFFFF; font-size: 18px;font-weight: bold; width: 100%;padding: 0 10px;box-sizing: border-box;}
	.topBox{top:48%;width: 100%;}
	.topBox .inBox{
		float: left;
		text-align: center;
		width: 31%;
		margin: 0 1% 20px;
		color: #FFFFFF;
	}
	.topBox .inBox .imgBox{
		width: 40%;
		margin: 0 auto;
		text-align: center;
	}
	.topBox .inBox .title{font-size: 15px;font-weight: bold; padding: 20px 0 0 0;}
	.topBox .inBox .tx{display: none;}
	
}
@media only screen and ( max-width: 600px ) {
	#main-box,
	#carousel li{
		height: 100vh;
	}
	.topTx1{top: 25%; text-align: center; color: #FFFFFF; font-size: 18px;font-weight: bold; width: 100%;padding: 0 10px;box-sizing: border-box;}
	.topBox{top: 28%;width: 100%;}
	.topBox .inBox{
		display: none;
		text-align: center;
		width: 96%;
		margin: 0 2% 20px;
		color: #FFFFFF;
	}
	.topBox .inBox .imgBox{
		width: 40%;
		margin: 0 auto;
		text-align: center;
	}
	.topBox .inBox .title{font-size: 18px;font-weight: bold; padding: 0;display: none;}
	.topBox .inBox .tx{display: none;}
	.topSns{width:100%; bottom: 80px; left: 0px;text-align: center;}
}

@media only screen and ( max-width: 500px ) {
	#main-box,
	#carousel li{
		height: 100vh;
		background-size:auto !important;
		background-attachment:local !important;
	}
}
@media only screen and ( max-width: 400px ) {
	#main-box,
	#carousel li{
		height: 100vh;
	}
}





.works ul{
	margin: 0;
}
.works .photo{	
	position:relative;
}
.works .photo .loading{
	position: absolute;
	top: 50%;
	left: 50%;
	margin:-31px 0 0 -31px
}
.works .photo .workimg{
    width: 100%;
    margin: 0 0 20px;
}
.works .photo .workimg img{
    max-width: 100%;
    height: auto;
}

.works #photo{
	float:left;
	display:none;
	width:75%;
	height:580px !important;
	text-align:center !important;
	margin:0 0 5px;
	box-sizing:border-box;
	overflow: hidden;
	/*border: 1px solid #E5E5E5;*/
	position: relative;
}
.works #photo img{
	/*
	width:auto !important;
	height:100% !important;
	*/
}
.works #photonav{
	float:right;
	display:none;
	width:24%;
	margin:0;
	line-height:100%;
}
.works #photonav li{
	float:left;
	width:48%;
	height:114px;
	margin:0px 0 2px 1%;
	text-align:center;
	box-sizing:border-box;
	position:relative;
	overflow:hidden;
}
.works #photonav li img{
	position:absolute;
	top:0;
	left:0;
	width:120% !important;
	height:120%;
}
#photo .tx{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #000000;
	color: #FFFFFF;
	text-align: left;
	opacity: 0.8;
}
	
	
@media only screen and (max-width: 600px) {
	.works .photo .loading{
		margin:-31px 0 0 -12px
	}
	.works #photo{
		display:none;
		width:100%;
		height:auto !important;
	}
	.works #photo img{
		width:100% !important;
		height:auto !important;
	}
	.works #photonav{
		width:100%;
	}
	.works #photonav li{
		width:18% !important;
		height:55px !important;
		margin: 0 1% 5px;
	}
	#photo .tx{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #000000;
		color: #FFFFFF;
		text-align: left;
		opacity: 0.8;
		padding: 3px !important;
		font-size: 10px !important;
	}
}


.staffinfo{
	text-align: center;
}
.staffinfo .inBox{
	display: inline-block;
	margin: 0 0 10px;
}
.staffinfo .one{
}
.staffinfo .two{
	float: left;
	width: 48%;
}
.staffinfo .three{
	float: left;
	width: 33.333%;
}
.staffinfo .inBox .staffImg{
	position: relative;
	float: left;
	width: 35px;
	height: 35px;
	margin: 0 5px 0 0;
	line-height: 0;
	overflow: hidden;
}
.staffinfo .inBox .staffImg img{
	height: 100%;
	width: 100%;
	border-radius: 50%;

}
.staffinfo .inBox .staffTx{
	float: left;
	font-size: 11px;
	line-height: 100%;
}
.staffinfo .inBox .staffTx p{
	padding: 0 !important;
	margin: 0 !important;
	letter-spacing: -1px;
}



.staffpost .left{
	float: left;
	width: 45%;
	padding: 0 20px 0 0;
	box-sizing: border-box;
	text-align: left !important;
}
.staffpost .right{
	float: right;
	width: 53%;
	padding: 0 0 0 2%;
	
}
.staffpost .right .staffinfo{
	text-align: left !important;
}
.staffpost .right .staffinfo .inBox{
	float: left;
	width: 20%;
	box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
	.staffpost .left{
		float: none;
		width: 100%;
		padding: 0 0px 0 0;
		box-sizing: border-box;
		text-align: left !important;
	}
	.staffpost .right{
		float: none;
		width: 100%;
		padding: 0;

	}
	.staffpost .right .staffinfo .inBox{
		float: left;
		width: 33.33%;
		box-sizing: border-box;
	}
}



.qa{
	padding: 0;
	margin: 0 15%;
	text-align: left;
	line-height: 180%;
}
.qa a{
	color: #1A8BE8;
	text-decoration: underline;
}
.qa dt{
	position: relative;
	font-weight: bold;
	font-size: 18px;
	padding: 5px 5px 5px 2.4em;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	float: none;
	border-bottom: 1px dotted #C9C9C9;
	background-color:#EFEFEF;
}
.qa dt:before{
	position: absolute;
	top: 3px;
	left: 5px;
	content: "Q.";
	font-size: 20px;
	padding: 0;
	margin: 0;
}
.qa dd{
	position: relative;
	font-size: 15px;
	padding: 14px 0 60px 2.8em;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	float: none;
}
.qa dd:before{
	position: absolute;
	top: 10px;
	left: 7px;
	content: "A.";
	font-size: 18px;
	padding: 0;
	margin: 0;
}
.qaBox{
padding:20px 0 0;
}
.qaBox .title{
	padding: 10px 0 10px;

}
.qaBox .title span{
	display: block;
	font-weight: bold;		
}
.qaBox2{
	width: 60%;
	margin: 30px 0 10px;
}
.qaBox2 .title{
	font-size: 18px;
	padding: 3px;
	background-color: #EBEBEB;
	text-align: center;
	margin: 0 0 20px;
}
.qaBox2 .inBox{
	text-align: center;
	margin: 0 0 20px;
	border: 1px solid #E9E9E9;
	padding: 20px;
}
.qaBox2 .inBox .inTitle{
	font-weight: bold;
	font-size: 18px;
}
.qaBox2 .inBox .arrow{
	font-size: 13px;
	padding: 10px 0;
}
@media only screen and (max-width: 800px) {
	.qa{
	margin: 0 5%;
	}
	.qaBox2{
	width: 100%;
	}
}
@media only screen and (max-width: 600px) {
	.qa{
	margin: 0;
	}
	.qaBox2{
	width: 100%;
	}
}

.caroufredsel_wrapper{
	margin: 0 !important;
}



.con{
    width: 550px;
    margin: 0 auto;
    font-family: 'ヒラギノ明朝 Pro W3' , 'Hiragino Mincho Pro' , 'HiraMinProN-W3' , 'HGS明朝E' , 'ＭＳ Ｐ明朝' , 'MS PMincho' , serif;
    line-height: 200%;
    text-align:justify;
    text-align: center;
}
@media screen and (max-width: 600px){
    .con{
        width: 95%;
        text-align: left;
    }
}
.con .tx1{
    text-align: center;
    padding: 50px 0;
}
.con .tx2{
    text-align: left;
}


.recruitBox{
    width: 550px;
    margin: 0 auto;
    line-height: 200%;
    text-align:justify;
    font-size: 10pt;
}
@media screen and (max-width: 600px){
    .recruitBox{
        width: 95%;
    }
}
.recruitBox .rec_title{
    float: left;
    width: 30%;
}
.recruitBox .rec_tx{
    float: right;
    width: 68%;
}
@media screen and (max-width: 600px){
    .recruitBox .rec_title{
        float: none;
        width: 100%;
        font-weight: bold;
        border-bottom: 1px solid #DDDDDD;
    }
    .recruitBox .rec_tx{
        float: none;
        width: 100%;
    }
}