@charset "UTF-8";
/* CSS Document */
body{font-size:14px;}
/*basecolor*/
.bg-blue{background-color:#126489;}
.bg-orange{background-color:#e78c2e;}
.bg-green{background-color:#3fa449;}

.txt-blue{color:#126489;}
.txt-orange{color:#e78c2e;}
.txt-green{color:#3fa449;}

.border-blue{border:#126489 1px solid;}
.border-orange{border:#e78c2e 1px solid;}
.border-green{border:#3fa449 1px solid;}

button.btn-blue {color: #ffffff; background-color: #126489; border-color: #126489;}
button.btn-orange {color: #ffffff; background-color: #e78c2e; border-color: #e78c2e;}
button.btn-green {color: #ffffff; background-color: #3fa449; border-color: #3fa449;}

/*basecolor*/

.txt-3s{font-size:70%;}
.txt-xs{font-size:80%;}
.txt-s{font-size:90%;}
.txt-l{font-size:110%;}
.txt-xl{font-size:120%;}
.txt-3l{font-size:130%;}

.lh-s{line-height:100%;}
.lh-l{line-height:200%;}
.lh-xl{line-height:300%;}

.flexbox{display:flexbox}

section{margin-bottom: 4rem;}

#page-title {margin-top:50px;}

.breadcrumb {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
list-style: none;
background-color: #eeeeee;
border-radius: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
color: #6c757d;
content: " > ";
}
h2 {
color:#126489;
font-size:1.4rem;
text-align: center;
margin: 2rem auto 2rem;
}
h2.page-title{
position:absolute;
margin: 0;
height:100px;
z-index: 100;
display: block;
text-align: center;
color:#ffffff;
font-size:1.4rem;
}

h3{
color:#222222;
font-size:1.2rem;
margin-bottom: 1.4rem;
}
h3:before{
 content:"■ ";
 color:#126489;
 }
h3.for-cus:before{
 content:"■ ";
 color:#e78c2e;
 }
h3.for-com:before{
 content:"■ ";
 color:#3fa449;
 }

h4{
color:#222222;
font-size:1.1rem;
margin-bottom: 1.4rem;
}
 h4:before{
 content:"◆ ";
 color:#126489;
 }
 h4.for-cus:before{
 content:"◆ ";
 color:#e78c2e;
 }
 h4.for-com:before{
 content:"◆ ";
 color:#3fa449;
 }
.catch{
font-size:1.1rem;
text-align: center;
margin: 2rem auto 2rem;
}

.lead{
font-size:1.1rem;
line-height: 2rem;
}

.page-title-area{
width:100%;
height:100px;
background-image: url("../images/title_bg.png");
background-position: center;
}

/* table */
table.summarytable {
width:96%;
margin: 0 auto;
}
table.summarytable tr{
border-top:#126489 1px solid;
}
table.summarytable tr:last-child{
border-bottom:#126489 1px solid;
}
table.summarytable th{
width:30%;
background-color: #cadee5;
padding:1rem 1rem;
text-align: center;
}

table.summarytable td{
display: block;
padding:1rem 1rem;
text-align: left;
}

@media (min-width: 576px) {

}

@media (min-width: 768px) {

section{margin-bottom: 8rem;}

#page-title {margin-top:0;}

h2 {
font-size:1.8rem;
}
h2.page-title{
margin:0 0 0 20px;
height:80px;
font-size:1.8rem;
text-align: left;
text-shadow: #000000 2px 2px 10px;
}

h3{
font-size:1.4rem;
margin-bottom: 1.6rem;
}
h4{
font-size:1.3rem;
margin-bottom: 1.4rem;
}
.catch{
font-size:1.2rem;
}

table.summarytable {
width:80%;
margin: 0 auto;
}

}
@media (min-width: 992px) {
h2 {
font-size:2rem;
}
h2.page-title{
font-size:2rem;
height:100px;
}

h3{
font-size:1.6rem;
margin-bottom: 3rem;
}
h4{
font-size:1.4rem;
margin-bottom: 1.4rem;
}

.catch{
font-size:1.3rem;
margin-bottom:2rem;
}
}

@media (min-width: 1200px) {

}

/*======== 各ページ ========*/

/*switch jobs*/
#cus-flow dt,
#com-flow dt{
display: block;
font-size: 1.4rem;
font-weight: normal;
margin-bottom: 1rem;
}

#cus-flow dt{
border-bottom: #e78c2e 2px solid;
}
#com-flow dt{
border-bottom: #3fa449 2px solid;
}

#cus-flow dt >.dt-no,
#com-flow dt >.dt-no{
display: block;
color: #ffffff;
width:3rem;
font-size: 1.3rem;
font-weight: bold;
padding: 1.5rem auto;
margin-right: 1rem;
text-align: center;
float: left;
}

#cus-flow dt >.dt-no{
background-color: #e78c2e;
}
#com-flow dt >.dt-no{
background-color: #3fa449;
}

#cus-flow dd,
#com-flow dd{
font-size: 1.2rem;
line-height: 2rem;
margin: 0 0 0 0;
}
#cus-flow dd ul,
#com-flow dd ul{
margin-block-start:0;
}

@media (min-width: 768px) {
#cus-flow dt,
#com-flow dt{
font-size: 1.4rem;
}
#cus-flow dd,
#com-flow dd{
font-size: 1.2rem;
line-height: 2rem;
margin: 0 0 3rem 3rem;
}

#cus-flow dt > .dt-no,
#com-flow dt > .dt-no{
font-size: 1.4rem;
}
}

@media (min-width: 992px) {
#cus-flow dt,
#com-flow dt{
font-size: 1.5rem;
}
#cus-flow dt > .dt-no,
#com-flow dt > .dt-no{
font-size: 1.5rem;
}
}