@charset "utf-8";
/* CSS Document */

#service { margin: 0 auto; padding-top: 60px; }
#service>.title { text-align: center; margin: 0 auto; padding: 50px 0; }
#service>.title>h3 { font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto; }

#service>.content { margin: 0 auto; padding: 50px 0 100px 0; }
#service>.content .box { width: 55%; box-sizing: border-box; padding: 30px 100px 30px 0; }
#service>.content .box>.tit { padding: 30px 0; font-size: 3rem; color: rgba(50,150,212,1); }
#service>.content .box>.txt { font-size: 1.6rem; color: #333; line-height: 2; }
#service>.content .box>.txt>p { margin-bottom: 20px; }
#service>.content .img { width: 45%; text-align: left; }
#service>.content .img>img { width: 100%; height: auto; }

#service>.idea { background: url("../img/service_bg.jpg") no-repeat; background-size: cover; margin: 0 auto; padding: 80px 0; }
#service>.idea>.title { text-align: center; margin: 0 auto; padding-top: 50px; }
#service>.idea>.title>h3 { font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto; }
#service>.idea>.box { margin: 0 auto; max-width: 1300px; padding: 80px 0; }
#service>.idea>.box>.item { float: left; width: 48%; padding: 50px 0; text-align: left; transition: all .5s; }
#service>.idea>.box>.item:nth-child(even) { float: right; }
#service>.idea>.box>.item>.icon { width: 100px; }
#service>.idea>.box>.item>.icon>img { width: 100%; height: auto; }
#service>.idea>.box>.item>.con { width: 80%; padding: 10px 30px; box-sizing: border-box; }
#service>.idea>.box>.item>.con>.tit { font-size: 2rem; color: rgba(50,150,212,1); }
#service>.idea>.box>.item>.con>.txt { margin: 10px 0; font-size: 2.4rem; color: #999; }

@media only screen and (max-width: 1480px) {
#service>.content .box { padding: 10px 100px 10px 0; }
#service>.content .box>.tit { padding: 20px 0; font-size: 2.4rem; }
}

@media only screen and (max-width: 1360px) {
#service>.content .box>.txt { font-size: 1.4rem; line-height: 2.4rem; }
#service>.idea>.box>.item>.con>.txt { font-size: 2.2rem; }
}

@media only screen and (max-width: 1280px) {
#service>.content .box>.tit { font-size: 2rem; }

#service>.idea>.box>.item { text-align: center; }
#service>.idea>.box>.item>.icon { float: none; margin: 0 auto; }
#service>.idea>.box>.item>.con { float: none; width: 100%; padding: 10px 0; }
#service>.idea>.box>.item>.con>.txt { font-size: 2rem; }
}

@media only screen and (max-width: 1080px) {
#service>.content .box { width: 100%; float: none; padding: 0; }
#service>.content .img { width: 100%; float: none; }
}

@media only screen and (max-width: 980px) {
#service { padding-top: 30px; }
#service>.title { padding: 10px 0; }
#service>.title>h3 { font-size: 3.2rem; }
#service>.idea>.title { padding-top: 30px; }
#service>.idea>.title>h3 { font-size: 3.2rem; }
#service>.idea { padding: 30px 0; }
}

@media only screen and (max-width: 860px) {
#service>.idea>.box { padding: 30px 0; }
#service>.idea>.box>.item>.icon { width: 80px; }
#service>.idea>.box>.item>.con>.tit { font-size: 1.8rem; }
#service>.idea>.box>.item>.con>.txt { height: 56px; font-size: 1.8rem; }
}

@media only screen and (max-width: 640px) {
#service>.title>h3 { font-size: 2.8rem; }

#service>.idea>.title>h3 { font-size: 2.8rem; }

#service>.idea>.box>.item { padding: 30px 0; }
#service>.idea>.box>.item>.con>.tit { font-size: 1.6rem; }
#service>.idea>.box>.item>.con>.txt { height: 46px; font-size: 1.6rem; }
}

@media only screen and (max-width: 520px) {
#service>.title>h3 { font-size: 2.4rem; }
#service>.content { padding: 30px 0; }

#service>.idea>.title>h3 { font-size: 2.4rem; }
}