@charset "UTF-8";
/*
Theme Name:EXIS web
Theme URI:
Description:
Author:shimkystudio
Author URI:https://www.shimkystudio.com
Version:1.0beat
*/


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

dl.table {
    overflow: hidden;
}
dl.table dt {
    clear: both;
    float: left;
    margin-right: 4px;
}
dl.table dd {
    margin: 0;
}




body {
line-height: 1.6;
background-image: url(/images/business/bene/bene_narita_03.jpg);
background-position: center;
background-repeat: no-repeat;
background-size:cover;
}

body.works,
body.works_detail,
body.about,
body.media,
body.contact,
body.page,
body.work {
  background: #fff;
}

/*  Header  */
.header_fix {
padding: 0;
background: none;
border: none;
}
.about div.header_fix,.works div.header_fix,.works_detail div.header_fix,.contact div.header_fix,.media div.header_fix {
  background: #fff;
}
.header_fix .logo {
color: #007c36;
font-size: 160%;
margin: 16px 0 0 48px;
}
.header_fix .logo img,
.footer .logo img{
width: 120px;
}
.header_fix .navi {
margin: 0 48px 0 0;
line-height: 4;
}
.header_fix .navi li {
/*float: none;*/
margin-left: 0;
}
.header_fix .navi a {
/*font-family: 'Josefin Sans', sans-serif;
font-family: 'Maven Pro', sans-serif;
font-family: 'Karla', sans-serif;
font-family: 'Carme', sans-serif;*/
font-family: 'Julius Sans One', sans-serif;
text-decoration: none;
color: #333;
padding: 8px;
}

.header_fix .navi a:hover {
background: #ccc;
border-radius: 8px;
position: relative;
color: #fff;
text-decoration: underline;
}

.Slider {
overflow: hidden;

/*height:600px;*/
}
.Slider_in img{
}

.Slider_navi {
position: relative;
top: -20px;
}
.Slider_navi li {
border: 2px solid #8ec31f;
border-radius: 24px;
width: 24px;
height: 24px;
}
.Slider_navi li.active {
background: #8ec31f;
}


/*  Contents  */
div.contents {
/*display: table;*/
padding: 64px 48px;
padding: 0 48px 64px;
}

.top div.contents {
display: table;
padding: 0;
}

div.contents .box {
display: table-cell;
vertical-align: middle;
height: 480px;
color: #efefef;
font-size: 24px;
text-align: center;
}
.box p {
/*width: 80%;*/
margin: 0 auto;
font-size: 150%;
font-weight: bold;
}
.contents .al,
.contents .ar{
  content: "";
  font-size: 100px;
  position: fixed;
  /*background: #333;*/
  color: #333;
  width: 40px;
  height: 40px;
}
.contents .al{
  content: "<";
  left: 16px;
}
.contents .ar{
  content: ">";
  right: 16px;
}

.top .contents ul {
  list-style-type: none;;
position: absolute;
bottom: 80px;
overflow: hidden;
right: 5%;
}
.top .contents ul li{
  margin-right: 4px;
  float: left;
  border: 2px solid #eee;
}

.top .contents ul li img {
float: left;
width: 24px;
height: 24px;
}


.contents .all {
margin: 32px auto 24px;
width: 100%;
text-align: center;
position: relative;
}
.contents .all img {
max-width: 100%;
height: auto;
}

.full {
  min-height:100%;
min-width:1024px;
width:100%;
height:auto;
position:fixed;
top:0;
left:0;
  height:480px;
}
.half {
text-align: center;
position: relative;
}
.half li {
width: 46%;
margin: 0 auto;
}
.half li a {
position: relative;
}
div.gl {
width: 80%;
/*width: 90%;*/
margin: 0 auto;
text-align: center;
position: relative;
}
.gl ul img,
div.pic_1_2 img {
width: 640px;
}
div.pic_1_2 {
margin: 0 auto;
text-align: center;
width: 100%;
overflow: hidden;
height: 348px;
position: relative;
}
div.pic_1_2 div {
text-align: left;
/*position: relative;*/
}

div.gl img{
padding: 0 4px;
}
div.pic_1_2 ul {
list-style-type: none;
text-align: left;
overflow: hidden;
}
div.pic_1_2 ul li {
  height: 150px;
}
div.pic_1_2 ul li,
.genre ul li {
position: relative;
}
div.pic_1_2 .meta {
bottom: 34px;
}
/*div.pic_1_2 div img {
width: 460px;
margin-right: 8px;
}*/

/*div.pic_1_2 ul img {
width: 224px;
}*/
.pure-g-r.thums {
/*width: 90%;*/
}
.thums .pure-u-2-3 {
text-align: left;
}
.thums ul.pure-u-1-3 {
list-style-type: none;
}
.pure-g-r.thums li,
.pure-g-r.thums li {
position: relative;
}

.pure-u-2-3.tt {
position: relative;
}

.genre  {
margin: 24px auto;
}
div.genre h2 {
margin: 24px auto;
padding-bottom: 4px;
font-size: 120%;
color: #464646;
border-bottom: 2px solid #ccc;
}

.contents .tbar {
border-bottom: none;
border-left: 8px solid #8ec31f;
margin: 32px 0 16px;
padding: 4px 16px;
font-weight: normal;
font-size: 132%;
/*font-family: 'Josefin Sans', sans-serif;
font-family: 'Maven Pro', sans-serif;*/
font-family: 'Karla', sans-serif;
/*font-family: 'Carme', sans-serif;
font-family: 'Julius Sans One', sans-serif;*/
}
.contents h3 {
font-size: 150%;
font-weight: normal;
/*font-family: 'Josefin Sans', sans-serif;
font-family: 'Maven Pro', sans-serif;
font-family: 'Karla', sans-serif;
font-family: 'Carme', sans-serif;*/
font-family: 'Julius Sans One', sans-serif;
}
div.meta {
position: absolute;
bottom: 4%;
left: 6%;
text-align: left;
color: #fff;
/*font-family: 'Josefin Sans', sans-serif;
font-family: 'Maven Pro', sans-serif;
font-family: 'Karla', sans-serif;
font-family: 'Julius Sans One', sans-serif;*/
font-family: 'Carme', sans-serif;
}
iv.meta_c {
bottom: 16px;
left: auto;
width: 100%;
top: 16px;
text-align: center;
}
.meta p {
font-size: 80%;
}
.mw_contents div.meta {
display: none;
}

/*  Footer  */
div.footer {
background: #007c36;
background: #464646;
//margin-top: 4%;
padding: 8px 0;
color: #fff;
position: fixed;
bottom: 0;
width: 100%;
opacity: 0.7;
}
.footer div.logo {
padding-left: 48px;
}
div.footer ul {
margin: 0 auto;
padding: 0;
text-align: center;
list-style-type: none;
}

div.footer ul li{
display: inline;
}
.about div.footer,.works div.footer,.works_detail div.footer,.contact div.footer,.media div.footer {
position: static;
position: fixed;
}

div.footer.min {
position:static;
}

.copyright{
text-align: center;
}

/*  index  */
.top .contents h2 {
text-indent: -999px;
}

/*  WORKS  */
/*.works .contents {
padding-top: 64px;
}*/
.works .contents ul{
margin: 48px 0;
}
.works .contents ul li{
padding: 4px 8px;
position: relative;
}
.works .contents ul li:hover{
opacity: 0.7;
}

.works h2 {
position: absolute;
top: 40%;
display: table;
width: 100%;
text-align: center;
font-size: 150%;
font-weight: normal;
color: #fff;
}
.works .contents .box_middle {
display: table;
width: 100%;
height: 235px;
text-align: center;
font-size: 150%;
font-weight: normal;
color: #fff;
background: url('./images/bg_w.png') no-repeat 0 0;
padding: 16px;
}
.works .photocatalyst{
background: #5dc1cf !important;
}

.works li a{
width: 640px;
overflow: hidden;
}

/*  Works detail  */
div.detail {
margin: 0 auto;
/* margin-bottom: 16px; */
/* width: 900px; */
position: relative;
overflow: hidden;
}

div.detail .image_l {
/*float: left;*/
height: 680px;
overflow: hidden;
/*margin-bottom: 20px;*/
border: 2px solid #fff;
}

div.detail .image_l img {
width: 100%;
margin-top: -160px;
}
/*.works_detail ul.thumb {
width: 45%;
}*/
div.detail  ul.thumb {
position: absolute;
top:24px;
/*bottom: 32px;*/
right: 8px;
}
.works_detail ul.thumb li {
padding: 0 8px;
float: left;
list-style-type: none;
/*width: 120px;*/
}
.thumb img {
width: 48px;
border: 2px solid #fff;
}

.works_detail .desc {
margin: 16px auto;
}
.works_detail .desc h3 {
border-bottom: 4px solid #8ec31f;
margin-bottom: 8px;
}
.works_detail .desc .data{
padding-right: 16px;
}
.works_detail .desc ul {
list-style-type: square;
}
.works_detail .desc li {
line-height: 1.4;
margin: 0 0 8px 16px;
}
.works_detail .desc dl.table {
padding-left: 0;
width: 100%;
}
.works_detail .desc dt:after {
content: "：";
}
/*div.detail {
margin:0 auto;
margin-bottom: 16px;
overflow: hidden;
}

div.detail .image_l {
float: left;
}

div.detail .image_l img {
width: 640px;
}
.works_detail ul.thumb {
width: 45%;
}
.works_detail ul.thumb li {
padding: 0 8px;
position: relative;
width: 120px;
}
.thumb img {
width: 100px;
}

.works_detail .desc {
margin: 16px auto;
}
.works_detail .desc h3 {
border-bottom: 4px solid #8ec31f;
margin-bottom: 8px;
}
.works_detail .desc .data{
padding-right: 16px;
}
.works_detail .desc ul {
list-style-type: square;
}
.works_detail .desc li {
line-height: 1.4;
margin: 0 0 8px 16px;
}

works_detail .desc dl.table {
padding-left: 0;
width: 100%;
}
.works_detail .desc dt:after {
content: "：";
}*/
.works .overlay {
background: #000;
content: "";
width: 100%;
height: 40px;
opacity: 0;
display: block;
position: absolute;
bottom: -20px;
z-index: 1;
}

/*  光触媒 */
.photocatalyst .tbar {
border-bottom: none;
border-left: 8px solid #5dc1cf;
margin: 48px 0 16px;
font-size: 150%;
}
.photocatalyst p {
margin: 32px 0;
/*padding-left: 48px;*/
}

.photocatalyst h3 {
background: #5dc1cf;
margin: 48px 0;
padding: 0 48px;
color: #fff;
width: 100%;
position: relative;
line-height: 2.5;
border: none;
}
.photocatalyst h3:before {
content: "";
border-left: 8px solid #fff;
height: 100%;
position: absolute;
left: 16px;
top: 0;
}
.photocatalyst .img_both span  {
float: right;
padding: 16px 48px;
background: url('/images/icon_pdf.png') no-repeat right center;
font-size: 70%;
line-height: 1.5;
}
.photocatalyst .img_both a {
color: #333;
text-decoration: none;
position: relative;
top: 8px;
}
.photocatalyst .img_both a:hover {
text-decoration: underline;
}

.photocatalyst .link a{
color:#333;
padding-left: 25px;
}

.photocatalyst .none{
display:none;
}

/*  about  */
/*.about div.contents {
padding-top: 64px;
margin: 0 48px;
}
.about dt, .about dd {
padding: 16px 0;
border-bottom: 1px solid #8ec31f;
text-align: left;
}
.about dl dt {
margin-right: 0;
color: #8ec31f;
}*/

.about dt, .about dd {
padding: 16px 0;
border-bottom: 1px solid #8ec31f;
text-align: left;
float: left;
}
.about dl dt {
margin-right: 0;
color: #8ec31f;
width: 160px;
}
.about dl dd {
width: 77%;
}
.business ul {
margin: 0 16px;
padding: 0;
list-style-type: square;
text-align: left;
}

div.map {
margin: 0 auto;
text-align: center;
width: 100%;
}


/*  media  */

div.wrap {
margin-bottom: 64px;
}
.wrap h3 {
border-bottom: 4px solid #8ec31f;
float: right;
width: 75%;
}
.wrap_in {
clear: both;
}
.wrap p {
margin: 24px 0;
}
.wrap ul.thumb li {
padding: 0 8px;
position: relative;
}
div.photo {
margin-top: -35px;
}

.business {
height: 105px;
}

/*  contact  */

.contact strong,
.contact p span {
font-weight: normal;
color: #8ec31f;
}
.contact .note {
font-size: 80%;
}
#fo {
margin: 48px auto;
}
#fo dt {
width: 14em;
color: #8ec31f;
}
#fo dt,
#fo dd {
margin: 8px 0;
}
#fo label {
margin-right: 8px;
margin-top: 2px;
float:none;
}
#fo input,
#fo textarea  {
border: 1px solid #8ec31f;
background: none;
}
#fo input[type="text"],
#fo input[type="tel"],
#fo input[type="email"],
#fo textarea  {
width: 100%;
}
#fo li {
margin-bottom: 8px;
}
#fo input[type="checkbox"] {
margin-right: 0;
display:inline;
}
#fo .cb  label {
border-radius: 4px;
border: 1px solid #8ec31f;
background: none;
}
#fo .cb:checked   label,
#fo .cb:checked  label:after  {
color: #8ec31f;
background: none;
}
#fo span {
color: #333;
margin-right: 8px
}
#fo .submit {
text-align: center;
margin: 48px auto;
}
#fo .btn {
background: #8ec31f;
border: none;
color: #fff;
width: 30%;
}
#fo .btn:hover {
background: #7ca81b;
}
#fo .btn input{
width:100%;
color: #fff;
padding: 5px 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-box-shadow: 1px 1px 2px #E7E7E7;
    -moz-box-shadow: 1px 1px 2px #E7E7E7;
}
.screen-reader-response,
.wpcf7-not-valid-tip {
  color: #e74c3c;
}


.page404 p {
  margin-top: 100px;
  text-align:center;
}

@media all and (max-width:768px) {

body {
line-height: 1.6;
//background-image: url(images/business/bene/.jpg);
background-size:cover;
}
.box {
padding-top: 24px;
}
.header_fix .logo {
float: none;
margin-left: 0;
text-align: center;
}

.header_fix .navi {
float: none;
list-style-type: none;
margin-right: 0;
margin: 0 5%;
font-size: 80%;
margin-top: -16px;
}
.header_fix .navi li {
margin: 0;
text-align: center;
}
.header_fix .navi a {
padding: 8px;
}
.footer ul {
margin: 0 5%;
}
.footer div.logo {
 padding-left: 0;
}
.footer .logo {
text-align: center;
}

div.contents,
.works div.contents,
.works_detail div.contents,
.photocatalyst div.contents,
.about div.contents,
.media div.contents,
.contact div.contents {
padding: 104px 5%;
}

div.contents {
padding-top: 0 !important;
}

.top .contents ul {
bottom: 30%;
}
.top .contents ul li img {
float: left;
width: 32px;
height: 32px;
}

.works h2 {
position: absolute;
top: 16%;
}

div.photo {
text-align: center;
}

.photocatalyst h3{
padding: 16px 16px 0 48px;
line-height: 1.4;
font-size: 125%;
}

div.detail .image_l {
float: none;
height: auto;
}

div.detail .image_l img {
width: 100%;
margin-top: 0;
}
.works .contents ul li:first-child {
height: 48px;
overflow: hidden;
margin-bottom: 20px;
}
.works_detail ul.thumb {
width: auto;
position: static !important;
}
.works_detail ul.thumb li {
padding: 0 4px;
}

.media ul.thumb li {
padding: 0 8px;
width: auto;
}
.thumb img {
width: 62px;
}
#fo {
margin: 24px auto;
}

#fo dt {
display: block;
width: 100%;
}
#fo dt, #fo dd {
margin: 8px 0 0;
}
#fo span {
display: inline;
padding-left: 0;
}
#fo .btn {
width: 100%;
}

div.gl {
width: 90%;
}
div.photo {
margin-top: 0;
}

.wrap h3 {
float: none;
margin-bottom: 16px;
width: 100%;
}

.about dl dt,.about dl dd  {
text-align: center;
width: 100%;
}
.business {
 height: 100%;
}

}
