body {
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

* {
margin: 0;
padding: 0;
}

.clearfix:after {/* clearfix */
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.clearfix{/* clearfix for ie7 */
display: inline-block;
}

.clearfix {
display: block;
}

h1 {
font-size: 0.8em;
}

h2 {
position: relative;
font-size: 1.6em;
background-color: #A3CAD3;
text-align: center;
padding: 1rem 2rem;
color: #19489B;
margin-bottom: 50px;
}

h2:before {
content: '';
position: absolute;
top: -7px;
left: -7px;
border: 2px solid #19489B;
width: 100%;
height: 100%;
}

h3 {
font-size: 1.3em;
position: relative;
overflow: hidden;
padding: 1.5rem 2rem 1.5rem 150px;
border-top: 3px solid #19489B;
margin-top: 50px;
margin-bottom: 30px;
}

h3:before {
position: absolute;
top: -150%;
left: -100px;
width: 200px;
height: 300%;
content: '';
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #19489B;
}

h3:after {
content: '';
position: absolute;
bottom: 0;
left:0;
border-bottom: 3px solid #19489B;
width: 80%;
height: 100%;
}

h3 span {
font-size: 3em;
position: absolute;
top: 0;
left: 0px;
display: block;
padding-top: -3px;
padding-left: 16px;
color: #ffffff;
z-index: 1;
}

span.point {
position: relative;
color: #D30F0F;
font-size: 1.2em;
font-weight: bold;
background: repeating-linear-gradient(-45deg, #C8E3ED, #C8E3ED 3px, #ffffff 3px, #ffffff 6px);
}

span.more {
color: #000000;
}

span.more:before {
content: "\A";
white-space: pre;
}

span.more:after {
content: "";
display: inline-block;
width: 100px;
height: 8px;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
transform: skew(45deg);
}

/*基礎工事ページ　カラー設定*/
#contents.kiso h2 {
background-color: #D1D199;
}
#contents.kiso h2:before {
border: 2px solid #8E8E09;
}
#contents.kiso h3{
border-top-color:#8E8E09;
}
#contents.kiso h3:before {
background-color:#8E8E09;
}
#contents.kiso h3:after {
border-bottom-color: #8E8E09;
}
#contents.kiso span.point {
background: repeating-linear-gradient(-45deg, #D1D199, #D1D199 3px, #ffffff 3px, #ffffff 6px);
}

/*外構工事ページ　カラー設定*/
#contents.gaikou h2 {
background-color: #DFF7D7;
}
#contents.gaikou h2:before {
border: 2px solid #2B6D15;
}
#contents.gaikou h3{
border-top-color:#2B6D15;
}
#contents.gaikou h3:before {
background-color:#2B6D15;
}
#contents.gaikou h3:after {
border-bottom-color: #2B6D15;
}
#contents.gaikou span.point {
background: repeating-linear-gradient(-45deg, #DFF7D7, #DFF7D7 3px, #ffffff 3px, #ffffff 6px);
}

/*フェードイン*/
.fadein {
opacity: 0;
transition: 1.5s;
margin-top: 60px;
}

.fadein.show {
opacity: 1;
margin-top: 0;
}


/*ヘッダー*/
#header {
position: fixed;
top: 0;
left: 0;
background-image: url(img/fp-bg.jpg);
background-position: center;
background-size: cover;
width: 100%;
min-width: 1024px;
z-index: 1001;
}

#header-inner {
color: #ffffff;
background-image: url(img/logo-mini.png);
background-repeat: no-repeat;
background-position: 20px 0px;
background-size: 120px;
height: 140px;
margin-top: 10px;
}

#header-menu {
width: calc(100% - 200px);
margin: 20px 0 20px 150px;
}

#header-message{
width: 100%;
text-align: center;
}

#header-message {
font-size: 1.6em;
padding: 3px 0px 0px 0px;
}

#header-menu ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
padding: 0;
}

#header-menu ul li {
width: 10%;
list-style: none;
border: 1px solid #ffffff;
text-align: center;
cursor:pointer;
}

#header-menu ul li#sp-menu-label,
#header-menu ul li a {
text-decoration: none;
color: #ffffff;
width: 100%;
display: block;
height: calc(100% - 20px);
padding-top: 10px;
padding-bottom: 10px;
}

#header-menu ul li a:hover{
background-color: rgb(255,255,255,.9);
color: blue;
}

#header-menu ul li#sp-menu-label {
display: none;
}

/*コンテナー・コンテンツ*/
#container {
width: 100%;
background-color: #ffffff;
text-align: center;
margin: 180px 0 40px 0;
}

#container.fp {
margin-top: 10px;
}

#container-inner {
min-width: 1024px;
margin: auto;
}

#contents {
width: 1024px;
margin: auto;
text-align: left;
}

.contents-inner {
width: 80%;
margin-left: 10%;
}

/*フッター*/
#footer {
width: 100%;
min-width: 1024px;
background-image: url(img/fp-bg.jpg);
background-size: cover;
color: #ffffff;
}

#footer-inner {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-top: 10px;
}

#footer-logo {
width: 100%;
background-image: url(img/logo-mini.png);
background-repeat: no-repeat;
background-position: 40% 0;
background-size: 80px auto;
padding-left: 48%;
padding-top: 20px;
height: 80px;
}

.footer-title {
font-size: 1.5em;
line-height: 1.5em;
}

#footer-menu {
width: 70%;
text-align: center;
}

#footer-menu ul {
margin-left: 60%;
padding: 0 20px;
border-left: 3px solid #ffffff;
list-style: none;
columns: 2;
column-gap: 2em;
column-rule: 3px solid #ffffff;
}

#footer-menu ul li {
font-size: 1.1em;
line-height: 1.8em;
text-align: left;
}

#footer-menu ul li a {
text-decoration: none;
color: #ffffff;
}

#footer #copyright {
width: 100%;
text-align: center;
}

#footer-map{
position: relative;
width: 100%;
height: 0;
padding-top: 350px;
margin: 20px 10px;
}

#footer-map iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 350px;
}

#to-home{
width: 40px;
height: 40px;
position: fixed;
right: 0;
bottom: 1px;
background: #595d5e;
opacity: 0.8;
border-radius: 3px;
}

#to-home a{
position: relative;
display: block;
width: 40px;
height: 40px;
text-decoration: none;
}

#to-home a::after{
content: '▲';
font-size: 14px;
font-weight: bold;
color: #ffffff;
position: absolute;
top: 10px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

/*モーダルウィンドウ*/
.overlay {
display:none;
position: fixed;
inset:0 auto 0 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, .9);
z-index: 1010;
}

.modal_content {
position: absolute;
inset:0;
margin: auto;
max-width: 60%;
max-height: 60%;
}

.is-active {
overflow:hidden;
}



/*------------------------------*/
/*トップページ                  */
/*------------------------------*/
#fp {
background-image: url(img/fp-bg.jpg);
position: relative;
width: 100%;
min-width: 1024px;
height: calc(100vh * 0.8);
background-position: center;
background-size: cover;
text-align: center;
}

#fp-inner {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
color: #ffffff;
width: 100%;
margin: auto;
padding-top: 50px;
}

#fp-logo {
width: 30%;
}

#fp-logo img {
width: 80%;
padding-left: 10%;
}

#fp-menu {
margin-left: -25%;
margin-right: 3%;
width: 40%;
}

#fp-menu ul li {
text-align: right;
font-size: 1.3em;
line-height: 3em;
list-style: none;
}

#fp-title{
width: 50%;
}

#fp-message{
width: 80%;
margin: 1% 10%;
}

#fp-title h2 {
position: static;
background-color: transparent;
padding: 0;
color: #ffffff;
margin-bottom :0;
}

#fp-title h2:before {
content: none;
}

#fp-title h3 {
font-size: 2em;
color: #333399;
font-weight: bold;
position: static;
overflow: hidden;
padding: 0;
border-top: none;
margin-top: 0;
text-align: center;
text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px;
}

#fp-title h3:before {
content: none;
}

#fp-title h3:after {
content: none;
}

#fp-title h3 span {
font-size: 3em;
position: absolute;
top: 0;
left: 0px;
display: block;
padding-top: 0px;
padding-left: 0px;
color: transparent;
z-index: 1;
}

#fp-message p.emphasis1 {
font-size: 1.4em;
text-align: left;
}

#fp-message p.emphasis2 {
font-size: 1.8em;
letter-spacing: 0.5em;
color: #DA4114;
font-weight: bold;
text-align: center;
text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px;
}

#fp-message p.emphasis3 {
font-size: 1.4em;
text-align: right;
}

#fp-menu ul li a {
color: #ffffff;
position: relative;
transition: all 0.3s ease-in-out;
padding: 3px;
}

#fp-menu ul li a:hover {
color: #000000;
background-color: #ffffff;
}

#fp-menu ul li a:before,
#fp-menu ul li a:after {
content: '';
display: block;
position: absolute;
border-color: #ffffff;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
}

#fp-menu ul li a:before {
top: -4px;
left: -4px;
border-width: 0 0 0 0;
z-index: 5;
}

#fp-menu ul li a:after {
bottom: -4px;
right: -4px;
border-width: 0 0 0 0;
}

#fp-menu ul li a:hover:before,
#fp-menu ul li a:hover:after {
width: calc(100% + 8px);
height: calc(100% + 8px);
border-color: #ffffff;
}

#fp-menu ul li a:hover:before {
border-width: 1px 0 0 1px;
}

#fp-menu ul li a:hover:after {
border-width: 0 1px 1px 0;
}

#fp-menu ul li a {
text-decoration: none;
color: #ffffff;
}

#fp-menu ul li:nth-child(1) {
margin-right: 9em;
}
#fp-menu ul li:nth-child(2) {
margin-right: 4em;
}
#fp-menu ul li:nth-child(3) {
margin-right: 2em;
}
#fp-menu ul li:nth-child(4) {
margin-right: 0em;
}
#fp-menu ul li:nth-child(5) {
margin-right: 2em;
}
#fp-menu ul li:nth-child(6) {
margin-right: 4em;
}
#fp-menu ul li:nth-child(7) {
margin-right: 6em;
}
#fp-menu ul li:nth-child(8) {
margin-right: 12em;
}

#fp-scroll {
background-color: #ffffff;
border-radius: 50%;
width :100px;
height: 100px;
margin: -100px auto auto auto;
text-align: center;
}

#area1,
#area2,
#area3,
#area4 {
position: relative;
width: 100%;
height: calc(100vh * 0.7);
overflow: hidden;
margin: 10px 0;
}

#area1 a,
#area2 a,
#area3 a,
#area4 a {
text-decoration: none;
}

#toop-area {
margin-top: -150px;
}

#top-area img {
position: absolute;
width: 100%;
top: 30%;
left: 0;
transform: translateY(-30%) translateX(0%);
}

.comment-inner h4 {
font-size: 1.5em;
color: #245aab;
margin-top: 20px;
margin-bottom:10px;
}

.comment-inner p {
font-size: 1.3em;
color: #245aab;
}

#area1 .comment {
position: absolute;
width: 60%;
height: 300px;
top: 50%;
left: 50%;
transform-origin: center;
transform: translateY(-50%) translateX(-50%);
background-color: rgb(255,255,255,.6);
border: 3px solid #ffffff;
}

#area1 .comment:before {
content: '';
position: absolute;
width: calc(100vw * 0.6 + 15px);
height: 330px;
top: 50%;
left: 50%;
transform-origin: center;
transform: translateY(-50%) translateX(-50%) skewY(-10deg);
border: 3px solid #ffffff;
z-index:-1;
}

#area1 .comment-inner {
width: 80%;
height: 300px;
padding-left: 10%;
}

#area1 .comment-inner > * {
padding: 10px;
}

#area2 .comment {
position: absolute;
width: 300px;
height: 300px;
top: 50%;
left: 10%;
transform: translateY(-50%) translateX(-10%);
background-color: rgb(255,255,255,.6);
border: 2px solid #ffffff;
border-radius: 50%;
}

#area2 .comment:before {
content: '';
position: absolute;
width: 100%;
height: 300px;
top: 50%;
transform: translateY(-50%) translateX(-50%);
border: 2px solid #ffffff;
z-index: -1;
}

#area2 .comment-inner {
width: calc(100% - 14px);
height: 320px;
padding: 10px;
}

#area3 .comment {
position: absolute;
width: 300px;
height: 300px;
top: 50%;
right: 10%;
transform: translateY(-50%) translateX(-10%);
background-color: rgb(255,255,255,.6);
border: 2px solid #ffffff;
}

#area3 .comment:after {
content: '';
position: absolute;
width: 100%;
height: 300px;
top: 50%;
transform: translateY(-50%) translateX(-50%) rotate(45deg);
border: 2px solid #ffffff;
z-index: -1;
}

#area3 .comment-inner {
width: calc(100% - 14px);
height: 320px;
padding: 10px;
}

#area4 .comment {
position: absolute;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
padding: 0.5em 1.5em;
}

#area4 .comment:before,
#area4 .comment:after {
content: '';
position: absolute;
width: 2px;
height: -webkit-calc(100% + 20px);
height: calc(100% + 20px);
top: -10px;
}

#area4 .comment:before {
left: calc(0% + 10px);
background-color: #ffffff;
}

#area4 .comment:after {
right: calc(0% + 10px);
background-color: #ffffff;
}

#area4 .comment-inner {
width: calc(100% - 20px);
height: 280px;
padding: 10px;
background-color: rgb(255,255,255,.6);
}

/*会社概要ページ*/
table.info {
width: 80%;
border-collapse: collapse;
}

table.info th {
color: #367782;
padding: 20px 2% 0px 5%;
border-bottom: 1px solid #98a9ac;
width: 30%;
vertical-align: bottom;
}

table.info td {
width: 58%;
padding: 20px 2% 3px 5%;
border-bottom: 1px solid #98a9ac;
vertical-align: bottom;
}

#info-photo {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 20px 0;
}

#info-photo img {
width: 45%;
height: auto;
margin: 0 2%;
}

.fai {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

.fai div {
width: 30%;
border: 1px solid #000000;
padding: 10px;
margin: 10px;
text-align: center;
}


/*サービス案内ページ*/
.case-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 120%;
margin-left: -10%;
}

.case-list div {
width: 31%;
margin: 3em 1%;
height: auto;
color: #000000;
font-size: 1.2em;
text-align: center;
}

.case-list button {
clear: both;
width: 30%;
height: 50px;
margin: 50px 33.5%;
font-size: 1.2em;
border-radius: 10px;
background-color: #19489B;
color: #ffffff;
}

.case-list img {
width: 100%;
max-width: 100%;
height: 100%;
object-fit:cover;
}

.gaikou img,
.kiso img {
max-width: 500px;
}


/*採用情報ページ*/
table.recruit {
width: 80%;
border-collapse: collapse;
}

table.recruit th {
color: #367782;
padding: 20px 2% 0px 5%;
border-bottom: 1px solid #98a9ac;
width: 20%;
vertical-align: top;
}

table.recruit td {
width: 68%;
padding: 20px 2% 3px 5%;
border-bottom: 1px solid #98a9ac;
vertical-align: bottom;
}


/*外構工事ページ*/
ul.check {
margin: 0 50px 30px 50px;
list-style: none;
}

ul.check li {
position: relative;
background-color: #578E66;
color: #ffffff;
padding: 10px 10px 10px 35px;
font-size: 1.3em;
border-bottom: 3px solid #ffffff;
}

ul.check li:before {
content: "";
position: absolute;
top: 0.5em;
left: 10px;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
width: 10px;
height: 20px;
border-right: 3px solid #ffffff;
border-bottom: 3px solid #ffffff;
}

ul.list {
margin :0 50px;
}

ul.list li {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 10px solid #487C16;
border-right: 1px solid #000000;
padding: 10px;
list-style: none;
margin-bottom: 10px;
}

ul.list li.etc {
border: none;
font-size: 1.3em;
text-align: right;
}

/*問い合わせフォーム*/
table#contactform  {
width: 80%;
border-collapse: collapse;
margin-left: 10%;
border: 1px solid #16488d;
}

table#contactform  th {
background-color: #98cfe8;
color: #16488d;
padding: 10px 2% 10px 5%;
border-bottom: 1px solid #16488d;
width: 30%;
vertical-align: middle;
}

table#contactform  td {
width: 58%;
padding: 10px 2% 10px 5%;
border-bottom: 1px solid #16488d;
vertical-align: middle;
}

table#contactform input {
height: 2em;
}

.contactform-buttom {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

.contactform-buttom input {
padding: 10px 20px;
font-size: 1.2em;
margin: 20px;
}