@charset "UTF-8";
/* CSS Document */
/*PC*/
@media print, screen and (min-width: 768px) {
/* hed
---------------------------------------------*/
#hed {
background: url("../images/solution/mv_img.jpg") no-repeat center;
}

/* solution
---------------------------------------------*/
#solution {
position: relative;
margin: 0 auto 180px;
overflow: hidden;
}

#solution .section_wrap {
width: 1000px;
margin: 0 auto;
}

#solution .section_wrap .solution_list{
width: 100%;
}

#solution .section_wrap .solution_list .box{
margin-bottom: 4%;
border: 1px solid #121212;
padding: 35px;
box-sizing: border-box;
border-radius: 1rem;
}

#solution .section_wrap .solution_list .box .ttl_en {
display: block;
font-size: 1.6rem;
font-weight: 800;
}

#solution .section_wrap .solution_list .box h3 {
font-size:2.6rem;
font-weight: 600;
line-height: 1.4;
margin: 0 0 30px -5px;
}

#solution .solution_box1{
border: 1px solid rgba(0,0,0,.5);
padding: 15px;
box-sizing: border-box;
margin: 0 0 30px;
}

#solution .solution_box1 dt{
background: #121212;
font-size: 1.6rem;
color: #FFF;
line-height:1;
padding: 10px;
box-sizing: border-box;
margin: 0 0 20px;
}

#solution .solution_box1 dd{
}

#solution .solution_box1 dd ul{
display: block;
}

#solution .solution_box1 dd ul li{
width:100% !important;
margin:0 0 10px;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}

#solution .solution_box1 dd ul li .icon{
width: 30px;
}

#solution .solution_box1 dd ul li .txt{
width:calc(100% - 40px);
}

#solution .solution_box2{
border: 2px solid #f4901b;
padding: 15px;
box-sizing: border-box;
margin: 0 0 30px;
}

#solution .solution_box2 dt{
background:-webkit-linear-gradient(0deg, #f4901b, #ffaf00);
font-size: 1.8rem;
font-weight: 600;
color: #FFF;
line-height:1;
padding: 10px;
box-sizing: border-box;
margin: 0 0 20px;
}

#solution .solution_box2 dd{
font-weight: 700;
line-height: 2;
}

#solution .solution_box2 dd span{
display: block;
border-bottom: 1px solid #f4901b;
margin: 10px 0;
background:linear-gradient(0deg, #f4901b, #ffaf00);
background-clip: border-box;
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#solution .solution_box2 dd .kouka_box{
background: -webkit-linear-gradient(0deg, #f4901b, #ffaf00);
padding: 25px;
box-sizing: border-box;
border-radius: .6rem;
margin: 20px 0 0;
color: #FFF;
}

#solution .solution_box2 dd .kouka_box h4{
border: 1px solid #FFF;
padding: 5px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1;
color: #FFF;
margin-bottom: 20px;
}

#solution .ph_img{
width: 100%;
margin: 0 0 30px;
}

#solution .ph_img img{
border-radius: .6rem;
}

}
/*sp*/
@media only screen and (max-width: 767px) {
/* hed
---------------------------------------------*/
#hed {
background: url("../images/solution/mv_img.jpg") no-repeat center;
}

/* solution
---------------------------------------------*/
#solution {
position: relative;
margin: 0 auto 60px;
overflow: hidden;
}

#solution .section_wrap {
width: 90%;
margin: 0 auto;
}

#solution .section_wrap .solution_list{
width: 100%;
}

#solution .section_wrap .solution_list .box{
margin-bottom: 4%;
border: 1px solid #121212;
padding: 15px;
box-sizing: border-box;
border-radius: .8rem;
}

#solution .section_wrap .solution_list .box .ttl_en {
display: block;
font-size: 1.4rem;
font-weight: 800;
}

#solution .section_wrap .solution_list .box h3 {
font-size:2rem;
font-weight: 600;
line-height: 1.4;
margin: 0 0 20px -5px;
}

#solution .solution_box1{
border: 1px solid rgba(0,0,0,.5);
padding: 10px;
box-sizing: border-box;
margin: 0 0 20px;
}

#solution .solution_box1 dt{
background: #121212;
font-size: 1.4rem;
color: #FFF;
line-height:1;
padding: 5px;
box-sizing: border-box;
margin: 0 0 20px;
}

#solution .solution_box1 dd{
}

#solution .solution_box1 dd ul{
display: block;
}

#solution .solution_box1 dd ul li{
width:100% !important;
margin:0 0 10px;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}

#solution .solution_box1 dd ul li .icon{
width: 20px;
}

#solution .solution_box1 dd ul li .txt{
width:calc(100% - 30px);
}

#solution .solution_box2{
border: 2px solid #f4901b;
padding: 10px;
box-sizing: border-box;
margin:0;
}

#solution .solution_box2 dt{
background:-webkit-linear-gradient(0deg, #f4901b, #ffaf00);
font-size: 1.6rem;
font-weight: 600;
color: #FFF;
line-height:1;
padding: 10px;
box-sizing: border-box;
margin: 0 0 20px;
}

#solution .solution_box2 dd{
font-weight: 700;
line-height: 2;
}

#solution .solution_box2 dd span{
display: block;
border-bottom: 1px solid #f4901b;
margin: 10px 0;
background:linear-gradient(0deg, #f4901b, #ffaf00);
background-clip: border-box;
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#solution .solution_box2 dd .kouka_box{
background: -webkit-linear-gradient(0deg, #f4901b, #ffaf00);
padding: 15px;
box-sizing: border-box;
border-radius: .6rem;
margin: 20px 0 0;
color: #FFF;
}

#solution .solution_box2 dd .kouka_box h4{
border: 1px solid #FFF;
padding: 5px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1;
color: #FFF;
margin-bottom: 20px;
}

#solution .ph_img{
width: 100%;
margin: 0 0 20px;
}

#solution .ph_img img{
border-radius: .6rem;
}

}