/* CSS Document */
.company-img{background:url(../images/syadan_kun/company-main-img.jpg);background-repeat:no-repeat;background-size:cover;bacground-position:bottom;position:relative;min-height:230px;}
.contents-title h1{background:url(../images/syadan_kun/contents-service-character.png);background-repeat:no-repeat;text-indent:-9999px;height:200px;}
.inner{display:inline-block;width:710px;padding:5px 0 70px 100px;}
table{width:100%;line-height:1.8em;margin-bottom:30px;}
table td,th {border:1px solid #d1d1d8;}
table th{font-weight:bold;background-color:#4b4b4b;color:#fff;padding-left:4px;}
table td{padding:5px 20px;margin: 0;text-align:left;vertical-align:top;}
table ul li{text-indent:-1em;color:#4b4b4b;}
table .icon1:before{content: "◎ ";color:#ff0000;}
table .icon2:before{content: "○ ";color:#ff0000;}
table .icon3:before{content: "▲ ";color:#0000ff;}
table .icon4:before{content: "× ";color:#0000ff;}
table .leftside{background-color:#f0f0f6;font-weight:bold;text-align:center;vertical-align:middle;width:100px;}
table .syadankun-area-title{background-color:#ff2247;color:#fff;padding-left:4px;}
table .syadankun-area{background-color:#FFDEFF;}
.service-contents{display:inline-block;position:relative;margin:20px 8px;overflow:hidden;}
.service-contents font{font-size:30px;font-weight:bold;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;}
.service-contents .link{padding:5px;color: #4b4b4b;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;}
.service-contents .link:hover{color:#afafaf;}
.contents-link{display:block;width:310px;height:180px}
#content_area{margin-top:40px;}
.contents-list{display:block;background-image:url(../images/syadan_kun/contents_menu_arrow.jpg);background-repeat:no-repeat;background-position:left;}
.contents-list span{margin-left:25px;}
.service-contents .contents-link{width:310px;height:180px;webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;overflow: hidden;display:inline-block;*display: inline; /* ie6,7 */*zoom: 1; /* ie6,7 */}
.link div{display:none;}
.go_contact a{background-image:url(../images/syadan_kun/go_contact.png);display:block;width:300px;height:50px;text-align:left;text-indent:-9999px;margin:auto 10px auto auto;webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;}
.go_contact a:hover{background-color:#fff;opacity:0.7;}
/*攻撃遮断くん*/
#design-page-link-area{display:block;position:relative;width:1024px;height:100px;margin-left:auto;margin-right:auto;background-image:url(../images/syadan_kun/syadankun_list.png);}
section .flow-ill{width:878px;height:310px;text-indent:-9999px;margin-bottom:50px;margin-left:auto;margin-right:auto;}
section #syadankun-flow1{background-image:url(../images/syadan_kun/sub_image1.png);width:878px;height:358px;}
section #syadankun-flow2{background-image:url(../images/syadan_kun/sub_image2.png);width:878px;height:496px;}
section #syadankun-flow3{background-image:url(../images/syadan_kun/sub_image3.png);display:inline-block;background-repeat:no-repeat;position:relative;width:222px;height:234px;margin-bottom:10px;}
section #syadankun-flow4{background-image:url(../images/syadan_kun/sub_image4.png);width:878px;height:227px;}
section #syadankun-flow5{background-image:url(../images/syadan_kun/sub_image5.png);width:878px;height:105px;}
#syadankun-flow3-block{display:inline-block;margin-left:auto;padding-left:40px;}
#syadankun-flow3-block div{display:inline-block;vertical-align:top;margin-bottom:15px;width:320px;}
#syadankun-flow3-block div h4{display:inline-block;color:#060;font-weight:bold;}
#syadankun-flow3-block div span{display:inline-block;background-color:#060;color:#fff;padding:2px 12px;margin-right:8px;}
#syadankun-flow3-block div p{display:inline-block;padding-left:40px;}
.flow3-block{display:inline-block;position:relative;}
.service-syadankun h4{display:block;font-size:16px;padding:10px 0;font-weight:bold;}
.service-syadankun h5{display:block;font-size:16px;padding:10px 0;font-weight:bold;color:#060;}
.service-syadankun h3{display:block;}
.service-syadankun a{color:#ff7901;text-decoration:underline;padding-left:10px;}
.service-syadankun p{display:block;padding-bottom:10px;}
.contents h3{font-size: 18px;font-weight: bold;border-style: solid;border-color: #060;border-width: 0 0 0 8px;padding: 0 15px;margin: 50px 0 30px 0;}
.service-syadankun{display:block;position:relative;}
.anchor{position:absolute;top:-7.6em;}
.sp-link{display:none;}
@media only screen and (min-width: 769px){
#syadankun-page-link1{top:24px;left:0px;width:154px;height:65px;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;}
#syadankun-page-link1:hover{background-color:#fff;opacity:0.4;}
#syadankun-page-link2{top:24px;left:174px;width:154px;height:65px;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;}
#syadankun-page-link2:hover{background-color:#fff;opacity:0.4;}
#syadankun-page-link3{top:24px;left:348px;width:154px;height:65px;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;}
#syadankun-page-link3:hover{background-color:#fff;opacity:0.4;}
#syadankun-page-link4{top:24px;left:522px;width:154px;height:65px;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;}
#syadankun-page-link4:hover{background-color:#fff;opacity:0.4;}
#syadankun-page-link5{top:24px;left:696px;width:154px;height:65px;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;}
#syadankun-page-link5:hover{background-color:#fff;opacity:0.4;}
#syadankun-page-link6{top:24px;left:870px;width:154px;height:65px;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;}
#syadankun-page-link6:hover{background-color:#fff;opacity:0.4;}
#design-page-link-area a{display:block;position:absolute;text-indent:-9999px;background:none;}
}
/* スマホ */
@media only screen and (max-width: 768px){
.company-img{background:url(../images/syadan_kun/company-main-img-sp.jpg);background-repeat:no-repeat;background-size:cover;background-position: bottom;min-height:210px;}
.service-contents{display:block;width:310px;position:relative;margin-left:auto;margin-right:auto;margin-bottom:40px;overflow:hidden;}
.contents-title h1{background:url(../images/syadan_kun/contents-service-character-sp.png);background-repeat:no-repeat;text-indent:-9999px;background-position:50%;background-size:30%;}
.inner{display:inline-block;width:100%;padding:5px 0 30px 0;}
.service-inner{display:inline-block;width:310px;}
.go_contact a{background-image:url(../images/syadan_kun/go_contact.png);display:block;width:300px;height:50px;text-align:left;text-indent:-9999px;margin:10px auto;}
/*Webサイト制作*/
section .flow-ill{background-size:100%;text-indent:-9999px;margin-bottom:20px;}
#design-page-link-area{display:block;background:none;height:0;}
section #syadankun-flow1{background:url(../images/syadan_kun/sub_image1.png);background-repeat:no-repeat;background-size:contain;width:100%;height: 0;padding-bottom:40%;}
section #syadankun-flow2{background:url(../images/syadan_kun/sub_image2.png);background-repeat:no-repeat;background-size:contain;width:100%;height: 0;padding-bottom:56%;}
section #syadankun-flow3{background:url(../images/syadan_kun/sub_image3.png);background-repeat:no-repeat;}
section #syadankun-flow4{background:url(../images/syadan_kun/sub_image4.png);background-repeat:no-repeat;background-size:contain;width:100%;height: 0;padding-bottom:25%;}
section #syadankun-flow5{background:url(../images/syadan_kun/sub_image5.png);background-repeat:no-repeat;background-size:contain;width:100%;height: 0;padding-bottom:12%;}
#syadankun-flow3-block{display:block;width:100%;margin-left:auto;padding-left:10px;}
#syadankun-flow3-block div{display:inline-block;vertical-align:top;margin-bottom:5px;width:100%;}
#syadankun-flow3-block div h4{display:inline-block;color:#060;font-weight:bold;}
#syadankun-flow3-block div span{display:inline-block;background-color:#060;color:#fff;padding:2px 12px;margin-right:8px;}
#syadankun-flow3-block div p{display:block;padding-left:40px;}
table{font-size:10px;}
table .leftside{background-color:#f0f0f6;font-weight:bold;text-align:center;vertical-align:middle;width:50px;}
table td{padding:5px 10px;margin: 0;text-align:left;vertical-align:top;}
.sp-link{display:block;width:100%;height:180px;}
#design-page-link-area a{display:block;text-decoration:underline;color:#060;padding-left:10px;}
#design-page-link-area div{display:block;position:absolute;bottom:-180px;}
.anchor{position:absolute;top:-0.5em;}
}
/* スマホ縦 */
@media only screen and (max-width: 460px){
.company-img{background:url(../images/syadan_kun/company-main-img-sp.jpg);background-repeat:no-repeat;background-size:cover;background-position: bottom;min-height:210px;}
.contents-title h1{background:url(../images/syadan_kun/contents-service-character-sp.png);background-repeat:no-repeat;text-indent:-9999px;background-position:50%;background-size:50%;}
}