@charset "UTF-8";


/*PC*/
@media print, screen and (min-width: 768px) {

#case {
margin: 0 auto 220px;
}
/* cont01 */
#case .cont01 {
position: relative;
margin: 0 auto 160px;
background: url("../images/case/bg.jpg") center center no-repeat;
background-size: cover;
}

#case .cont01::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(59, 87, 117, 0.6);
}

#case .cont01 .txtbox {
position: relative;
padding:15% 5%;
box-sizing: border-box;
color: #fff;
z-index: 1;
}

#case .cont01 .txtbox h2 {
width: 100%;
font-size: 2.2rem;
font-weight: 900;
text-align: center;
}

/* cont03 */
#case .cont03 {
position: relative;
margin: 0 auto;
}
#case .cont03 .box {
margin: 100px auto 100px 0;
padding: 100px 0 0 5%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
border-top: 1px solid #ddd;
}
#case .cont03 .box:nth-of-type(2) {
padding: 100px 5% 0 0;
flex-direction: row;
}
#case .cont03 .box .imgbox {
width: 45%;
position: relative;
overflow: hidden;
}
#case .cont03 .box .imgbox::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(59, 87, 117, 0.3);
z-index: 1;
}
#case .cont03 .box .imgbox img {
object-fit: cover;
}
#case .cont03 .box .txtbox {
width: 55%;
padding:3% 5%;
box-sizing: border-box;
}
#case .cont03 .box .txtbox .ttl_en {
display: block;
font-size: .8rem;
font-weight: 800;
}

#case .cont03 .box .txtbox h3 {
font-size:2rem;
font-weight: 600;
line-height: 1.4;
margin: 0 0 30px -5px;
background:linear-gradient(0deg, #0061A7, #002E80);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

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

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

#case .cont03 .case_box1 dd{
}

#case .cont03 .case_box1 dd ul{
}

#case .cont03 .case_box1 dd ul li{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
margin-bottom: 10px;
}

#case .cont03 .case_box1 dd ul li .icon{
width: 30px;
}

#case .cont03 .case_box1 dd ul li .txt{
width:calc(100% - 40px);
}

#case .cont03 .case_box2{
border: 2px solid #0061A7;
padding: 15px;
box-sizing: border-box;
margin: 0 0 30px;
}

#case .cont03 .case_box2 dt{
background:-webkit-linear-gradient(0deg, #0061A7, #002E80);
font-size: 1.1rem;
font-weight: 600;
color: #FFF;
line-height:1;
padding: 10px;
box-sizing: border-box;
margin: 0 0 20px;
}

#case .cont03 .case_box2 dd{
font-weight: 700;
line-height: 2;
}

#case .cont03 .case_box2 dd span{
display: block;
border-bottom: 1px solid #111;
margin: 10px 0;
background:linear-gradient(0deg, #0061A7, #002E80);
background-clip: border-box;
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


#case .red_txt{
font-size: 1.6rem;
font-weight: 600;
text-align: center;
background:linear-gradient(0deg, #0061A7, #002E80);
background-clip: border-box;
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

}
/*sp*/
@media only screen and (max-width: 767px) {

#case {
margin: 0 auto 60px;
}
/* cont01 */
#case .cont01 {
position: relative;
margin: 0 auto 30px;
background: url("../images/case/bg.jpg") center center no-repeat;
background-size: cover;
}

#case .cont01::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(59, 87, 117, 0.6);
}

#case .cont01 .txtbox {
position: relative;
padding:6% 5%;
box-sizing: border-box;
color: #fff;
z-index: 1;
}

#case .cont01 .txtbox h2 {
width: 100%;
font-size: .9rem;
font-weight: 900;
text-align: center;
}

/* cont03 */
#case .cont03 {
position: relative;
margin: 0 auto;
}
#case .cont03 .box {
margin:auto;
padding: 30px 5%;
box-sizing: border-box;
border-top: 1px solid #ddd;
}

#case .cont03 .box .imgbox {
width: 100%;
position: relative;
overflow: hidden;
}
#case .cont03 .box .imgbox::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(59, 87, 117, 0.3);
z-index: 1;
}
#case .cont03 .box .imgbox img {
object-fit: cover;
}
#case .cont03 .box .txtbox {
width: 100%;
padding:3%;
box-sizing: border-box;
}
#case .cont03 .box .txtbox .ttl_en {
display: block;
font-size: .6rem;
font-weight: 800;
}

#case .cont03 .box .txtbox h3 {
font-size:1rem;
font-weight: 600;
line-height: 1.4;
margin: 0 0 20px -5px;
background:linear-gradient(0deg, #0061A7, #002E80);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#case .cont03 .case_box1{
border: 1px solid rgba(0,0,0,.5);
padding: 10px;
box-sizing: border-box;
margin: 0 0 30px;
}

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

#case .cont03 .case_box1 dd{
}

#case .cont03 .case_box1 dd ul{
}

#case .cont03 .case_box1 dd ul li{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
margin-bottom: 10px;
}

#case .cont03 .case_box1 dd ul li .icon{
width: 20px;
}

#case .cont03 .case_box1 dd ul li .txt{
width:calc(100% - 30px);
}

#case .cont03 .case_box2{
border: 2px solid #0061A7;
padding: 10px;
box-sizing: border-box;
margin: 0;
}

#case .cont03 .case_box2 dt{
background:-webkit-linear-gradient(0deg, #0061A7, #002E80);
font-size: 1rem;
font-weight: 600;
color: #FFF;
line-height:1;
padding: 10px;
box-sizing: border-box;
margin: 0 0 20px;
}

#case .cont03 .case_box2 dd{
font-weight: 700;
line-height: 2;
}

#case .cont03 .case_box2 dd span{
display: block;
border-bottom: 1px solid #111;
margin: 10px 0;
background:linear-gradient(0deg, #0061A7, #002E80);
background-clip: border-box;
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


#case .red_txt{
width: 90%;
margin: auto;
font-size: .9rem;
font-weight: 600;
background:linear-gradient(0deg, #0061A7, #002E80);
background-clip: border-box;
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


}