@charset "utf-8";
@import url("root.css");


/* CSS Document */
/* ==========================================================================
   テキスト装飾
   ========================================================================== */

.sec_title{
width: 100%;
height: 50vh;
background: url("../img/sec_title_def.jpg") bottom left no-repeat;
background-size:cover;
margin: 0 auto;

display: flex;
justify-content:center;
align-items: center;
padding: 60px 0 0 0;
}

.sec_title h2{
width: 1000px;
color:var(--base-color_w);
font-size:60px;
font-weight: 700;
margin: 0 0;

}

#pan{
margin: 20px auto;
width:1000px;
font-size: 14px;
}

#pan i{
padding: 0 10px;
}

@media screen and (max-width: 1024px) {

.sec_title{
width: 100%;
height:150px;
background: url("../img/sec_title_def.jpg")top center no-repeat;
background-size:cover;
margin:59px auto 0;
display: flex;
justify-content:center;
align-items: center;
padding:0 0 0 0;
}

.sec_title h2{
color: #ffffff;
font-size:28px;
font-weight: 700;
margin: 0 auto 0;
width: 90%;
}

#pan{
margin: 10px auto;
width:90%;
font-size: 12px;
}

#pan i{
padding: 0 10px;
}

}


/* ==========================================================================
   レイアウト
   ========================================================================== */


#sec_page{
width:100%;
}

#sec_page p{
font-size: 16px;
}



@media screen and (max-width: 979px) {
#sec_page{

}


}

/* ==========================================================================
   ABOUT US
   ========================================================================== */
#about_02 {
position: relative;
width: 100%;
height:95vh;
display: flex;
margin: 200px auto 0;
}

#about_02 .image-wrap {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40%;
overflow: hidden;
z-index: 1;
}

#about_02 .image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

#about_02 .about_box {
position: relative;
z-index: 2;
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;

padding:0;
box-sizing: border-box;
}

#about_02 .about_txt {
width:54%;
padding:0 0 0 0;
}

#about_02 .about_txt p{
line-height: 1.8;
}



#about_02 .title_h2{
margin: 0 auto 60px;
}


@media (max-width: 1024px) {
#about_02 {
position: static !important;
width: 100%;
height:auto;
display: flex;
margin:80px auto 0;
flex-wrap: wrap;
}

#about_02 .image-wrap {
position: static !important;
left: 0;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
z-index: 1;
}

#about_02 .image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

#about_02 .about_box {
position: relative;
z-index: 2;
width: 90%;
max-width:100%;
margin: 40px auto 0;
display: flex;
justify-content:space-between;
align-items: center;
padding:0;
box-sizing: border-box;
flex-wrap: wrap;
}

#about_02 .about_txt {
width:100%;
padding:0;
}

}
@media screen and (max-width: 767px) {

}


#business .col .img-wrap {
position: relative;
overflow: hidden;
}

#business .row{
margin:40px auto 0;
}


#business .col{
width:40%;
margin: 0 0 60px 0;
box-sizing: border-box;
}
#business .col:nth-child(2){
width:60%;
margin: 0 0 60px 0;
padding: 0 0 0 100px;

}


#business .col .number {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: var(--base-color_bl);
    color: var(--base-color_w);
    font-size: 20px;
    font-weight:500;
    display: flex;
    align-items: center;
    justify-content: center;
}

#business .col .txt {
    position: absolute;
    bottom: 0;
    left: 0;
	width: 100%;
	background-color: hsla(0, 0%, 0%, 0.5);
	color: var(--base-color_w);
    font-size: 16px;
    font-weight:500;
	text-align: center;
	padding: 10px 0;
}

#business .col h3 {
    margin: 0 auto 0;
    color: var(--base-color_bl);
    font-size: 30px;
    line-height: 1;
    display: block;
    width: 100%;
    padding: 0 0 40px 0;
}


@media (max-width: 1024px) {
#business .col .img-wrap {
position: relative;
overflow: hidden;
}

#business .col{
width:100%;
margin: 0 0 40px 0;
padding: 0;
}
#business .col:nth-child(2){
width:100%;
margin: 0 0 0 0;
padding: 0;
}

#business .col .number {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: var(--base-color_bl);
    color: var(--base-color_w);
    font-size: 20px;
    font-weight:500;
    display: flex;
    align-items: center;
    justify-content: center;
}

#business .col .txt {
    position: absolute;
    bottom: 0;
    left: 0;
	width: 100%;
	background-color: hsla(0, 0%, 0%, 0.5);
	color: var(--base-color_w);
    font-size: 16px;
    font-weight:500;
	text-align: center;
	padding: 10px 0;
}

#business .col h3 {
    margin: 0 auto 0;
    color: var(--base-color_bl);
    font-size:24px;
    line-height: 1;
    display: block;
    width: 100%;
    padding: 0 0 20px 0;
}

}
@media screen and (max-width: 767px) {
}

#service{
margin: 0 auto;
padding: 100px 0;
}

#service .row {
margin: 100px auto;
}

#service .col {
padding: 0 0 0 0;
margin: 0 40px 60px 0;
}
#service .col:nth-child(2n) {
padding: 0 0 0 0;
margin: 0 40px 60px 0;
}

#service .business-item {
display: flex;
align-items: center;
padding: 0 0 20px 0;
border-radius: 5px;
}

#service dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 10px auto 0;
}

#service dt{
width: 100%;
border-bottom: 2px solid var(--base-color_bl);
text-align:center;
box-sizing: border-box;
padding:0 0 10px 0;
line-height: 1.4;
display: flex;
justify-content: left;
align-items: center;
margin: 0 auto 10px;
font-weight: 600;
color: var(--base-color_bl);

}
@media (max-width: 1024px) {

#service{
margin: 0 auto;
padding:60px 0 0 0;
}

#service .row {
margin: 100px auto;
}

#service .col {
padding: 0 0 0 0;
margin: 0 0 20px 0;
}
#service .col:nth-child(2n) {
padding: 0 0 0 0;
margin: 0 0 20px 0;
}

#service .business-item {
display: flex;
align-items: center;
padding: 0 0 20px 0;
border-radius: 5px;
}

#service dd{

justify-content: left;
text-align: left;


}

}

#company {
background-color: var(--bg-color_w);
margin: 0 auto 0;
background: url(../img/) repeat-x top center;
padding: 100px 0 200px;
}
@media (max-width: 1024px) {
#company {
background-color: var(--bg-color_w);
margin: 0 auto 0;
background: url(../img/) repeat-x top center;
padding: 80px 0 100px;
}
}

#contact {
margin: 0 auto 0;

padding: 100px 0 100px;
}
@media (max-width: 1024px) {
#contact {
padding: 80px 0 0;
}
}