@charset "UTF-8";

/*
 * 03_itsystemy.css
 *
 */

/* #mirai.03_itsystemy
---------------------------------------------------------- */
#mirai .bg-gray02 {
background-color: #efefef !important;
}
.arw01{
display: inline-block;
padding-right: 20px;
}
#mirai.itsystem #categoryVisual-story {
background-image: url(../img/03_itsystem-visual.jpg);
background-position: center center;
background-repeat: no-repeat;
}
#mirai.itsystem #categoryVisual-story h1 img.pc {
max-width: 100%;
height: 320px;
margin-left: auto;
margin-right: auto;
}
#mirai.itsystem .copy {
background-color: #e0e0e7;
font-size: 20px;
color: #1d2088;
}
#mirai.itsystem h2.ttl {
color: #0048ff;
font-size: 30px;
border-bottom: 2px solid #0D48FF;
display: inline-block;
line-height: normal;
margin-bottom: 1em;
padding-bottom: 0.4em;
margin-top: 0.5em;
}

#mirai.itsystem ol.step .txt-block {
width: 640px;
float: right;
margin-bottom: 1em;
}
#mirai.itsystem ol.step .photo {
width: 320px;
float: left;
}
#mirai.itsystem ol.step .txt-block h3{
font-size: 28px;
line-height: 1em;
margin-bottom: 0.5em;
}
#mirai.itsystem ol.step .txt-block h3 span.step{
background-color: #5d6a8b;
color: #FFFFFF;
border-radius: 5px;
font-size: 16px;
padding: 0.2em 0.5em;
margin-right: 0.6em;
display: inline-block;
float: left;
}
#mirai.itsystem ol.step .txt-block h3 span.txt{
margin-top: 0.15em;
display: block;
float: left;
}
#mirai.itsystem ol.step li{
background-image: url(../img/03_itsystem-arw.png);
background-repeat: no-repeat;
background-position: 138px bottom;
display: block;
margin-bottom: 10px;
padding-bottom: 28px;
background-size: 50px auto;
}
#mirai.itsystem ol.step li:last-child,
#mirai.itsystem ol.step li:last-child {
background-image: none;
margin-bottom: 0px;
padding-bottom: 1.5em; 
 }

#mirai.itsystem ul.system .txt-block{
width: 600px;
float: left;
margin-bottom: 2em;
}
#mirai.itsystem ul.system .img-block{
width: 320px;
border: 1px solid #E8E8E8;
float: right;
margin-bottom: 2em;
}
#mirai.itsystem ul.system .img-block img{
margin: 1px auto;
width: 80%;
display: block;
}
#mirai.itsystem ul.system .img-block h3{
background-color: #e8e8e8;
text-align: center;
padding-top: 0.8em;
padding-bottom: 0.8em;
line-height: 1.3em;
}
#mirai.itsystem span.sup{
 font-size: 75.5%;
vertical-align: top;
position: relative;
top: -0.2em;
}


@media screen and (max-width:767px) and (min-width:1px) {
#mirai.itsystem .w320,
#mirai.itsystem ol.step .txt-block,
#mirai.itsystem ol.step .photo,
#mirai.itsystem ul.system .txt-block,
#mirai.itsystem ul.system .img-block {
width: 100% !important;
float: none;
}
#mirai.itsystem ol.step li{
background-position: center bottom;
background-size: 50px auto;
padding-bottom: 35px;
margin-bottom: 15px;
}
}