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

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500&family=Nothing+You+Could+Do&family=Noto+Serif+JP:wght@500;600&display=swap');
/*
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Nothing You Could Do', cursive;
font-family: 'Noto Serif JP', serif;
*/
body{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 14px;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Noto Serif JP', serif;
font-weight: 500;
}
a:hover{
color: #000;
text-decoration: none;
}
.subtitle{
font-family: 'Nothing You Could Do', cursive;
text-align: center;
}
.subtitle span{
     position: relative;
     display: inline-block;
     padding: 0 0.5em;
} 
.subtitle span::before, .subtitle span::after{
     position: absolute;
     top: 50%;
     content: '';
     width: 1.5em;
     height: 1px;
     background-color: #d6241c;
}
.subtitle span::before {left: 100%;}
.subtitle span::after {right: 100%;}

hr{
background-image: url("/img/line.png");
background-size: 47px;
height: 30px;
margin: 0;
}
h2{
text-align: center;
font-size: 1.7rem;
letter-spacing: 0.1em;
}
h2 p{
font-family: 'Nothing You Could Do', cursive;
font-size: 1.1rem;
margin-top: 0.7rem;
}
h2 font{
display: inline-block;
margin-left: 0.3rem;
font-family: 'M PLUS Rounded 1c', sans-serif;
letter-spacing: -0.1em;
color: #d6241c;
}

.carousel-caption {
bottom:  35%;
padding-top: 20px;
padding-bottom: 20px;
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}
.carousel-caption p{
font-family: 'Nothing You Could Do', cursive;
font-size: 1.1rem;
margin-bottom: 0.2rem;
}
.carousel-caption h5{
font-size: 2rem;
}
.carousel-control-prev,
.carousel-control-next {
top:auto;
bottom:40%;
}
.scroll {
position: absolute;
bottom: 5%;
left: 0;
right: 0;
margin: auto;
z-index: 15;
width: 37px;
}
@media (max-width: 768px) {
.scroll{bottom: 8%;width: 29px;}
}

header .container-fluid{
padding: 0;
position: relative;
}
header .main-header{
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
padding-top: 10px;
}
header h1{
z-index: 999;
font-size: 1.5rem;
letter-spacing: 0.1em;
}
header h1 img{
max-width: 77px;
vertical-align: middle;
}
header h1 a{
color: #000;
}
header h1 span{
vertical-align:middle;
}
header .head-contact{
text-align: center;
z-index: 999;
}
@media (max-width: 768px) {
.head-contact{display: none;}
}
header .subtitle{
margin-bottom: 5px;
}
header .tel-no img{
max-width: 216px;
}
header .sns-icon img{
max-height: 24px;
margin:0 0.5em;
}
header .head-contact p{
margin: 0 0 5px;
}
header nav{
z-index: 999;
}
header nav .container{
max-width: 100%;
margin: 0;
}
header .navbar{
width: 100%;
}
header .navbar a{
color: #000!important;
}
header ul{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
header li{
text-align: center;
width:14%;
}
header li:hover{
text-decoration: underline;
}
@media (max-width: 768px) {
.carousel-indicators{margin-bottom: 0.3rem;}
header h1{font-size: 1.2rem;}
header h1 img{max-width: 3rem;}
.navbar{padding:0;}
.navbar-toggler{position:absolute;top:-3rem;right:10px;}
.navbar-nav{background-color:rgba(255,255,255,0.8);padding:0.5rem 0;}
.nav-item{width: 100%;}
nav .container{padding: 0;}
}
@media (max-width: 373px) {
.navbar-toggler{position: absolute;top:-2.5rem;right:10px;}
header h1{font-size: 1rem;}
header h1 img{max-width: 2rem;}
}

/*---道南綜合土建について---*/
.gray-back{
background: #f9f9f8;
padding-top: 3rem;
padding-bottom: 3rem;
}
.donan-box{
position: relative;
background: url(/img/donan_back.jpg) top right/cover;
padding: 2rem;
}
.donan-box h2{
position: absolute;
top:2rem;
right:2rem;
}
.donan-box h2 img{
width: 5rem;
}
.donan-text{
background: #fff;
padding: 2rem 2.5rem;
width : 40% ; /* IE8以下とAndroid4.3以下用フォールバック */
width : -webkit-calc(100% - 40rem) ;
width : calc(100% - 40rem) ;
font-size: 1rem;
}
.donan-text h3{
font-size: 2rem;
letter-spacing: 0.2em;
}
.donan-text h3 p{
font-size: 1.3rem;
letter-spacing: 0.2em;
margin-top: 1rem;
}
.donan-text img{
width : 100% ;
display: block;
margin-top: 1rem;
}
@media (max-width: 1200px) {
.donan-text{
width : 50% ; /* IE8以下とAndroid4.3以下用フォールバック */
width : -webkit-calc(100% - 30rem) ;
width : calc(100% - 30rem) ;
}
.donan-text h3 p{font-size: 1.2rem;}
}
@media (max-width: 992px) {
.donan-box{background-position: center;}
.donan-box h2{position: relative;top:0;}
.donan-box h2 img{width: 95%;max-width: 411px;}
.donan-text{width:100%;padding: 1.5rem 2rem;margin-top: 1rem;background:rgba(255,255,255,0.8);}
.donan-text h3{font-size: 1.5rem;}
}
@media (max-width: 768px) {
.donan-text h3 p{font-size: 1rem;letter-spacing: 0;}
}
/*---道南綜合土建について（道南綜合土建の強み）---*/
#Strengths{
margin-top: 3rem;
}
#Strengths h2{
margin-bottom: 1.5rem;
}
#Strengths h2 font{
color: #418c38;
}
#Dounan .container:nth-child(2){
padding-left: 0;
padding-right: 0;
}
#Strengths h4{
font-size: 1.1rem;
letter-spacing: 0.1em;
text-align: center;
margin: 1rem 0 1.5rem;
}
#Strengths .card{
border: 0;
width: 100%;
margin-top: 1.5rem;
}
#Strengths .card-body{
position: relative;
}
#Strengths .box-line{
transform: rotate(-40deg);
position: absolute;
top:15px;
left: -15px;
display: block;
background:#aaaaaa;
padding: 1px 35px 0;
}
#Strengths .card-text{
font-size: 1rem;
}
@media (max-width: 576px) {
#Dounan .container:nth-child(2){
padding-left: 15px;
padding-right: 15px;
}
#Strengths h4{margin: 0.5rem 0 1.0rem;}
}

/*---事業内容---*/
.service{
margin-top: 4rem;
}
.service .container{
margin-top: 3rem;
}
.service img{
width: 100%;
}
.service .service-img{
background: url("/img/service.jpg") center center/cover;
min-height: 400px;
border-left: 15px solid #fff;
}
.service .service-box{
background: #f9f9f8;
text-align: center;
padding: 2rem;
}
.service .service-box p{
margin: 1rem 0 0;
line-height: 1.8rem;
}
.service .service-text{
margin-top: 2rem;
font-size: 1.1rem;
font-family: 'Noto Serif JP', serif;
letter-spacing: 0.1rem;
padding: 0 1rem;
}
.service .service-text p{
margin-top: 2rem;
font-size: 1rem;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
#transport{
margin-top: 5rem;
}
.service .transport-box{
text-align: center;
padding: 2rem 0;
}
.service .transport-box h3{
font-size: 1.3rem;
letter-spacing: 0.1rem;
}
.service .transport-box hr{
border-top: 1px solid #8c8b8b;
background: none;
height: 1px;
margin: 1rem 0;
}
.service .transport-box p{
font-size: 1rem;
font-family: 'Noto Serif JP', serif;
letter-spacing: 0.1rem;
line-height: 1.8rem;
}
.service .transport-img{
background: url("/img/transport02.jpg") center center/cover;
min-height: 380px;
border-right: 15px solid #fff;
}
@media (max-width: 768px) {
.service .transport-box h3,.service .transport-box p{text-align: left;}
.service .service-img{border-right: 15px solid #fff;min-height: 250px;}
.service .transport-img{border-left: 15px solid #fff;min-height: 250px;}
}
.service .transport-box02 table{
background: #f9f9f8;
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
}
.service .transport-box02 th{
padding: 0.5rem;
text-align: center;
border-right: 1px solid #aaa;
width: 5rem;
}
.service .transport-box02 td{
padding: 0.5rem 1rem;
}
.service .transport-box02 p{
margin: 0.5rem 0;
}

/*---施工実績---*/
#Works{
margin-top: 4rem;
padding: 3rem 0;
background: #f9f9f8;
}
#Works h4{
display: flex;
align-items: center;
font-family: 'Nothing You Could Do', cursive;
font-size: 1.1rem;
margin-top: 0.7rem;
}
#Works h4:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
color: #418c38;
}
#Works h4:after {
margin-left: 1rem;
}
#Works h3{
text-align: right;
font-size: 1.5rem;
letter-spacing: 0.1rem;
margin-bottom: 0.6rem;
}
#Works h3 p{
margin-top: 0.4rem;
font-size: 1rem;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 300;
}
#Works img{
width: 100%;
}
#Works .works-box{
margin-top: 1rem;
}
@media (max-width: 992px) {
#Works h3{font-size: 1rem;}
}

/*---会社概要---*/
#Company{
margin-top: 4rem;
margin-bottom: 4rem;
}
#Company p{
margin: 0;
}
#Company h2 p{
margin-top: 0.7rem;
}
#Company img{
width: 100%;
margin-top: 1rem;
}
.company-box01{
margin-top: 4rem;
background-color: #f9f9f8;
padding: 3rem 0;
}
.company-box02{
margin-top: 0;
padding: 3rem 0;
}
.company-box03{
background-color: #f9f9f8;
padding: 3rem 0;
}
#Company h3{
width: 100%;
text-align: center;
padding: 3rem 1rem 2.3rem;
font-size: 1rem;
letter-spacing: 0.1em;
background-color: #fff;
}
#Company .company-box02 h3{
background-color: #f9f9f8;
}
#Company h3 p{
font-family: 'Nothing You Could Do', cursive;
font-size: 0.5rem;
margin-top: 0.7rem;
margin-bottom: 0.7rem;
}
#Company h3 font{
display: inline-block;
margin-left: 0.3rem;
font-family: 'M PLUS Rounded 1c', sans-serif;
letter-spacing: -0.1em;
color: #418c38;
}
@media (max-width: 768px) {
#Company h3{padding: 1rem 1rem 0.3rem;margin-bottom: 1rem;width: 8rem;}
.company-box01{margin-top: 2rem;}
.company-box01,.company-box02,.company-box03{padding: 2rem 0;}
}
#Company .container{
padding-left: 0;
padding-right: 0;
}
@media (max-width: 576px) {
#Company .container{
padding-left: 15px;
padding-right: 15px;}
}
#Company table{
vertical-align: top;
width: 100%;
line-height: 1.8rem;
margin-bottom: 0.5rem;
}
#Company table th{
vertical-align: top;
font-weight: 300;
padding: 0.5rem 1rem 0.5rem 0;
border-bottom: 1px solid #bebebe;
white-space: nowrap;
}
#Company table td{
padding: 0.5rem;
border-bottom: 1px solid #bebebe;
}
#Company h4{
font-size: 1.1rem;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 300;
}
#Company .company-box03 table th{
padding: 0;
border-bottom: none;
}
#Company .company-box03 table td{
padding: 0;
border-bottom: none;
}
#Company .company-box03 ol{
padding: 0;
}
#Company .company-box03 li{
list-style: none;
display: inline-block;
}
#Company .company-box03 li:nth-of-type(odd){
display: block;
}
#Company .officer th{
width: 8rem;
}

#Event{
margin-top: 4rem;
margin-bottom: 4rem;
}
#Event h2 img{
width: 39px;
margin-bottom: 1.3rem;
}
#Event h3{
text-align: center;
color: #418c38;
font-size: 1.2rem;
letter-spacing: 0.1rem;
margin: 1.5rem 0;
line-height: 1.8rem;
}
#Event p{
text-align: center;
font-size: 1rem;
}
#Event .event-img img{
width: 100%;
}

#Recruit{
margin-top: 4rem;
margin-bottom: 4rem;
}
#Recruit h3{
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.1rem;
margin: 1.5rem 0;
line-height: 1.8rem;
vertical-align: middle;
}
#Recruit h3 img{
width: 27px;
vertical-align: middle;
margin: 0 0.8rem 0.2rem 0;
}
#Recruit p{
text-align: center;
font-size: 1rem;
}
#Recruit .recruit-img{
margin-top: 30px;
}
#Recruit .recruit-img img{
width: 100%;
}

#Info{
margin: 4rem auto 3rem;
max-width: 700px;
}
#Info h2 font{
margin-left: 0.3rem;
margin-right: 0.3rem;
}

address {
margin-top: 4rem;
text-align: center;
}
address p{
margin: 0;
}
address .tel{
margin-bottom: 0.5rem;
}
address .tel img{
width: 100%;
max-width: 366px;
}
address .sns-icon{
margin-top: 1.5rem;
}
address .sns-icon img{
max-height: 30px;
margin:0 0.5em;
}
map{
display: block;
margin-top: 4rem;
}
footer{
width: 100%;
background-color: #000;
color: #fff;
padding: 2rem 0 1rem;
text-align: center;
}
footer .container{
padding: 0 auto;
}
footer ul{
list-style: none;
padding: 0;
}
footer li{
display: inline-block;
margin: 0 1rem;
line-height: 2rem;
letter-spacing: 0.1rem;
}
footer li:hover{
border-bottom: 1px solid #fff;
}
footer a{
color: #fff;
}
footer a:hover{
color: #fff;
}
footer .logo-f{
display:block;
width: 300px;
margin: 3rem auto 1rem;
}
















@media (max-width: 992px) {
.max992-dn{display: block;}
.min992-dn{display: none;}
}
@media (min-width: 992px) {
.max992-dn{display: none;}
.min992-dn{display: block;}
}
@media (max-width: 768px) {
.max768-dn{display: block;}
.min768-dn{display: none;}
}
@media (min-width: 768px) {
.max768-dn{display: none;}
.min768-dn{display: block;}
}