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

.sp {display: block;}
@media (min-width: 769px)  {
.sp {display: none !important;}}

.pc {display: none;}
@media (min-width: 769px)  {
.pc {display: block !important;}}

h1 {
text-align: center;
font-size: 24px;
margin: 48px auto;
}

h1 span {display: block;
font-size: 14px;}

h2 {margin-bottom: 8px;}

.inner {width: 1024px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 768px)  {
.inner {
padding: 0 16px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}}
@media (width: 768px)  {
.inner {padding: 0 16px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}}

header {
border-bottom: #CCC solid 1px;
padding: 0 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 80px;
position: fixed;
background: rgba(255,255,255,1);
width: 100%;
z-index: 10;
}
@media (max-width: 768px)  {
header {height: 60px;
z-index: 12;
width: 85%;
background: none;
border-bottom: none;}}
@media (width: 768px)  {
header {
border-bottom: #CCC solid 1px;
padding: 0 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 80px;
position: fixed;
background: rgba(255,255,255,1);
width: 100%;
z-index: 10;
}}

#header_content {
    display: flex;
    -webkit-display: flex;
    align-items: center;
    -webkit-align-items: center;
    width: 1024px;
    margin: 0 auto;
    height: 80px;
}
@media (max-width: 768px)  {
#header_content {width: 100%;
height: 60px;}}
@media (width: 768px)  {
#header_content {width: 100%;
height: 80px;}}


#header_content nav {margin-left: auto;}

#header_content nav ul {
display: flex;
-webkit-display: flex;
align-items: center;
-webkit-align-items: center;
}

#header_content nav ul li {
margin-right: 16px;
}

header a {color:#333;}

@media (max-width: 767px)  {
#logo {position: fixed;
z-index: 12;
top: 16px;
left: 16px;}}

#logo img {width: auto;
height: 40px;
max-width: none;}
@media (max-width: 767px)  {
#logo img {height: 30px;
}}

#main_img {
height: 600px;
position: relative;
display: flex;
-webkit-display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
}
@media (max-width: 768px)  {
#main_img {
height: 400px;
}}

#main_img::before {
content: '';
display: block;
position: absolute;
left: 0;
top:0;
width: 100%;
height: 600px;
background: rgba(0,0,0,0.5);
padding-top: 33.75%;
z-index: 1;
}
@media (max-width: 768px)  {
#main_img::before {height: 400px;}}

#main_img h1 {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
text-shadow:-weebkit- 2px 2px 4px rgba(0,0,0,0.3);
font-size: 54px;
color: #FFF;
border: none;
position: relative;
z-index: 2;
text-align: center;
}
@media (max-width: 768px)  {
#main_img h1 {
font-size: 36px;
padding: 0 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}}

.bg {background-repeat: no-repeat;
width: 50%;
height: 788px;
background-size: cover;
-webkit-background-size: cover;
position: relative;
}
@media (max-width: 768px)  {
.bg {
width: 100%;
height: 300px;
}}

#construction .bg {
background-image: url("../images/cnstruction_bg@2x.jpg");
}

#development .bg {
background-image: url("../images/development_bg@2x.jpg");
}

#greeting .bg {
background-image: url("../images/president_1.png");
background-position: center;
}

#construction .bg::after {
content: '';
position: absolute;
width: 100%;
height: 788px;
display: block;
background: rgba(0,0,0,0.5);
}
@media (max-width: 768px)  {
#construction .bg::after {
height: 300px;
}}

.w_column {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}

.w_column h1 {width: 100%;}

#access iframe {
padding-left: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media (max-width: 768px)  {
#access iframe {padding-left: 0;}}

#access dl, #access iframe {width: 50%;}
@media (max-width: 768px)  {
#access dl, #access iframe {width: 100%;}}

#access dl {
display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 0;
}
@media (max-width: 768px)  {
#access dl {padding-right: 0;
margin-bottom: 24px;}}

#access dl dl {padding-right: 0;
margin-bottom: 0;
width: 100%;}

#access dt {
width: 9rem;
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#access dd {width: calc(100% - 9rem);
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

#access dt:nth-of-type(2n+1), #access dd:nth-of-type(2n+1)  {background: #EEE}

#access dd dt, #access dd dd {background: none !important;
padding: 0;
margin-bottom: 8px;}

#zip dd {width: 100%;}

#company {
margin-bottom: 16px;
}

#company h1 {margin-bottom: 0;}

.btn {margin: auto;
width: 100%;}

.btn a {
background: #d57255;
border-radius: 5rem;
color: #FFF;
height: 60px;
line-height: 60px;
display: block;
width: 330px;
text-align: center;
font-weight: bold;
margin: 48px auto;
letter-spacing: 8px;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
position: relative;
}
@media (max-width: 768px)  {
.btn a {width: 90%;}}

.btn a::before {
content: '';
position: absolute;
right: 28px;
top: 26px;
width: 8px;
height: 8px;
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.btn a:hover::before {border-top: 1px solid #d57255;
border-right: 1px solid #d57255;}

.btn a:hover {
background: #FFF;
border:#d57255 solid 1px;
color: #d57255;
transition: background-color 1s;
-webkit-transition: background-color 1s;
}

.con_btn a:hover {
background: #FFF;
border:#406b59 solid 1px !important;
color: #406b59 !important;
transition: background-color 1s;
-webkit-transition: background-color 1s;
}

.w_column .text_box {width: 50%;
position: relative;}
@media (max-width: 768px)  {
.w_column .text_box {width: 100%;}}

.w_column .text_box p {
padding: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}

.w_column .text_box h1 {
text-align: left;
padding: 0 0 8px 32px;
margin-left: 16px;
font-size: 48px;
margin-bottom: 0;
margin-top: 16px;
}
@media (max-width: 768px)  {
.w_column .text_box h1 {
padding: 0 0 0 24px;
font-size: 24px;}}

.w_column .text_box h1 span {
font-weight: normal;
padding: 0;
font-size: 24px;
}
@media (max-width: 768px)  {
.w_column .text_box h1 span {
font-size: 16px;
}}

#construction h1, #greeting h1 {background: url("../images/cons_h1_bg.jpg");
background-repeat: no-repeat;
background-size: 14px auto;}

#construction h1 span {color: #406b59;}

#development h1 {background: url("../images/dev_h1_bg.jpg");
background-repeat: no-repeat;
background-size: 14px auto;}

#development h1 span {color: #d57255;}

.w_column .text_box img {position: absolute;
bottom: 0;
left: 0;}
@media (max-width: 768px)  {
.w_column .text_box img {position: static;}}

.deb_bg {background: #d57255;
color: #FFF;
padding: 4px 8px;
margin-bottom: 8px;
display: inline-block;}

.con_bg {background: #406b59;
color: #FFF;
padding: 4px 8px;
margin-bottom: 8px;
display: inline-block;}

.recruit {
width: 50%;
padding: 0 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media (max-width: 768px)  {
.recruit {width: 100%;
padding: 0;
}}

#row_page .recruit {width: 100%;}

.recruit dl {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
padding-right: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 16px;}

.recruit dt {
background: #EEE;
width: 9rem;
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 8px;
}
@media (max-width: 768px)  {
.recruit dt {width: 100%;}}

.recruit dd {
width: calc(100% - 9rem);
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 8px;
}
@media (max-width: 768px)  {
.recruit dd {width: 100%;}}

.recruit dl dl dt {background: none;}

.recruit dl dl dt, .recruit dl dl dd {padding: 0;
margin: 0;}

.dott_list {list-style: disc;
margin-left: 24px;}

.con_btn a {background: #406b59;}

footer {
background: #FFF;
padding: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#footer_content {display: flex;
-webkit-display: flex;}
@media (max-width: 768px)  {
#footer_content {display: block;
}}

footer a {color: #333;}

footer nav {margin-left: auto;}

footer nav ul {display: flex;
-webkit-display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin: 0;}
@media (max-width: 768px)  {
footer nav ul {margin: 32px 0;
display: block;}}

footer nav ul li {margin-right: 16px;}
@media (max-width: 768px)  {
footer nav ul li {margin-right: 0;
margin-top: 16px;}}

#tel {margin-top: 32px;
display: inline-block;}

#copyright {text-align: center;
font-size: 14px;
display: block;
margin: 16px auto 0 auto;}

.fade{
  opacity:0;
  transform: translateY(80px);
}
.fadein{
  transform: translateY(0);
  transition: all 0.5s ease-in;
  opacity: 1 !important;
}

#pagetop {position: fixed;
bottom: 24px;
right: 24px;
background:rgba(213,144,85,0.5);
width: 40px;
height: 40px;
border-radius: 100%;
z-index: 15;}

#pagetop::before {
content: '';
display: block;
position: relative;
width: 14px;
height: 14px;
border: 2px solid;
border-color: #FFF #FFF transparent transparent;
transform: rotate(-45deg);
margin: auto;
top: 16px;}

#row a {color: #333;}

#row_page {padding-top: 96px;}

.anker {
padding-top: 80px;
margin-top: -80px;
}
@media (max-width: 768px)  {
.anker {
    padding-top: 60px;
    margin-top: -60px;
}}

#recruit_text {text-align: center;
margin-bottom: 64px;
width: 100%;
}

#recruit_text .btn a {margin-top: 0;}

address strong {display: block;}

#address {display: flex;
-webkit-display: flex;
}
@media (max-width: 768px)  {
#address {display: block;}}

#address address {
width: 250px;
margin-bottom: 0;}
@media (max-width: 768px)  {
#address address {
width: 100%;
margin-bottom: 24px;}}

#address address:last-child {margin-bottom: 0;}

#mission h1 {color: #d57255;}