﻿#title {
background-image: url("image/title.jpg");
}
#page .service_bg1 {
background-image: url("image/01.jpg");
background-size: cover;
}
#page .service_bg2 {
background-image: url("image/02.jpg");
background-size: cover;
}
#page .service_bg3 {
background-image: url("image/03.jpg");
background-size: cover;
}
#page .service_bg4 {
background-image: url("image/04.jpg");
background-size: cover;
}
#page .service_bg5 {
background-image: url("image/05.jpg");
background-size: cover;
}
#page .service_bg6 {
background-image: url("image/06.jpg");
background-size: cover;
}
#page .service_bg7 {
background-image: url("image/07.jpg");
background-size: cover;
}
#page .service_bg8 {
background-image: url("image/08.jpg");
background-size: cover;
}
#page .service_bg9 {
background-image: url("image/09.jpg");
background-size: cover;
background-position: bottom;
}
#page .service h3 {
color: #008ed1;
font-size: 23px;
font-weight: bold;
}
#page .service h3::before {
content: '';
display: inline-block;
width: 80px;
height: 60px;
background-size: contain;
vertical-align: middle;
margin-right: 10px;
}
#page .service h3.icon_01::before {
 background-image:url("../image/top/icon1.png");
}
#page .service h3.icon_02::before {
 background-image:url("../image/top/icon2.png");
}
#page .service h3.icon_03::before {
 background-image:url("../image/top/icon3.png");
}
#page .service h3.icon_04::before {
 background-image:url("../image/top/icon4.png");
}
#page .service h3.icon_05::before {
 background-image:url("../image/top/icon5.png");
}
#page .service h3.icon_06::before {
 background-image:url("../image/top/icon6.png");
}
#page .service h3.icon_07::before {
 background-image:url("../image/top/icon7.png");
}
#page .service h3.icon_08::before {
 background-image:url("../image/top/icon8.png");
}
#page .service h3.icon_09::before {
 background-image:url("../image/top/icon9.png");
}


@media screen and (min-width: 641px),print {
#page {

}
#page {
width: 100%;
margin: 0px auto 0 auto;
padding: 80px 0 20px 0;
}
#page .service {
width: 1100px;
margin: 0 auto;
}
#page .service h2 {
font-size: 22px;
line-height: 1.8em;
text-align: left;
margin-bottom: 20px;
}
#page .service p {
text-align: left;
}
#page ul.service_list li {
margin: 60px 0;
padding: 50px 0;
text-align: left;
}
#page ul.service_list li:last-child{
margin-bottom:0;
}
#page ul.service_list li .service_box {
background:rgba(255,255,255,0.8);
padding: 50px;
width: 750px;
}
#page ul.service_list li:nth-child(even) .service_box {
margin-right: 0;
margin-left: auto;
}
#page .service h3 {
margin-bottom: 30px
}
#page #contents{
background:rgba(255,255,255,0.8);
width: 1000px;
margin: 50px auto;
padding: 30px 0;
}

}
@media screen and (min-width: 0px) and (max-width: 640px) {
#page {
width: 100%;
}
#page .service {
width: 92%;
margin: 0 auto;
}
#page .service h2 {
font-size: 18px;
line-height: 1.8em;
text-align: left;
margin-bottom: 20px;
}
#page .service p {
text-align: left;
}
#page ul.service_list li {
margin: 50px 0;
padding: 30px 0;
text-align: left;
}
#page ul.service_list li:last-child{
margin-bottom:0;
}
#page ul.service_list li .service_box {
background:rgba(255,255,255,0.8);
padding: 20px;
width: 82%;
}
#page ul.service_list li:nth-child(even) .service_box {
margin-right: 0;
margin-left: auto;
}
#page .service h3 {
font-size: 18px;
margin-bottom: 20px;
}
#page .service h3::before {
width: 40px;
height: 30px;
}
#page #contents{
background:rgba(255,255,255,0.8);
width: 82%;
margin: 30px auto;
padding: 10px 4%;
}
#page #company {
width: 92%;
margin: 0 auto;
}	
}
