/*
Theme Name: 株式会社コミュニケーションサポート
Theme URI: http://www.communic.jp/communic
Description: 株式会社コミュニケーションサポート
Version: 1.0
Author: 株式会社コミュニケーションサポート
Author URL: http://www.communic.jp
*/

/* トップイメージ */
#top_image {
width: 100%;
height: 800px;
margin: 0 auto; 
padding: 0px 0 0 0;
display: block;
background-repeat: no-repeat;
position: relative;
}
#top_image:after {
clear: both;
content: "";
display: block;
height: 0;
visibility: hidden;
}
#top_image img {
width: 100%;
height: auto;
display: block;
position: relative;
}
.shadow{ 
-moz-box-shadow: 0px 4px 3px 1px #CCC; 
-webkit-box-shadow: 0px 4px 3px 1px #CCC; 
box-shadow: 0px 4px 3px 1px #CCC; 
background-color: #EEE; 
padding: 10px; 
margin: 20px; 
} 

/* サービスメニュー */
#serviceMenu {
width: 100%;
height: 100%;
display: block;
margin: 0px auto;
}
#serviceMenu:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#servicetitle {
width: 100%;
height: 140px;
margin: 0 auto;
background-color: #f8f8f8;
}
#servicetitle h2{
width: 1120px;
height: auto;
display: block;
margin: 0 auto;
padding: 70px 0 20px;
font-size: 200%;
}
#servicetitle h2 span{
width: auto;
height: auto;
margin: -12px 0 0 225px;
padding: 0px 0 0px;
display: block;
font-size: 60%;
}
#servicetitle span.back1{
width: 50px;
height: 1px;
margin: -25px 0 0 150px;
padding: 0px 0px 0px;
display: block;
border-top: 1px solid #c7c7c7;
}
#servicetitle span.back2{
width: 50px;
height: 1px;
margin: -11px 0 0 345px;
padding: 0px 0 0px;
display: block;
border-top: 1px solid #c7c7c7;
}
#servicetitle span.link{
width: auto;
height: auto;
margin: -25px 0 0 0px;
padding: 10px 45px;
display: block;
border: 1px solid #8e8e8e;
float:right;
color: #333;
font-size: 60%;
}
#serviceimage {
width: 100%;
height: 100%;
display: block;
}
#serviceimage img{
width: 100%;
height: 100%;
display: block;
}
#serviceMenu ul{
width: 1120px;
height: auto;
margin: 50px auto 0;
}
#serviceMenu ul:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#serviceMenu ul li.l1 {
width: 330px;
height: auto;
float: left;
margin: 0 auto;
}
#serviceMenu ul li.l2 {
width: 330px;
height: auto;
float: left;
margin: 0 65px;
}
#serviceMenu ul li.l3 {
width: 330px;
height: auto;
float: left;
margin: 0 auto;
}
#serviceMenu ul li.l1 h3{
width: 100%;
height: 35px;
margin: 10px auto 0;
font-size: 180%;
color: #000;
text-align: center;
}
#serviceMenu ul li.l2 h3{
width: 100%;
height: 35px;
margin: 10px auto 0;
font-size: 180%;
color: #000;
text-align: center;
}
#serviceMenu ul li.l3 h3{
width: 100%;
height: 35px;
margin: 10px auto 0;
font-size: 180%;
color: #000;
text-align: center;
}
#serviceMenu ul li img{
width: 330px;
height: 190px;
}
#serviceMenu ul li p{
width: 100%;
height: auto;
margin: 0px auto;
font-size: 140%;
}
#serviceMenu span.btn{
border: 1px solid #8e8e8e;
display: block;
font-size: 140%;
height: auto;
margin: 20px auto 0;
padding: 8px 45px;
text-align: center;
float: none;
width: 120px;
}

/* ノーティス */
#notice {
width: 100%;
height: 100%;
margin: 60px auto 0px; 
background-color: #f8f8f8;
}
#notice:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#noticetitle {
width: 100%;
height: 110px;
margin: 0 auto 20px;
}
#noticetitle h2{
width: 1120px;
height: auto;
margin: 0 auto;
padding: 70px 0 0px;
display: block;
font-size: 200%;
}
#noticetitle h2 span{
width: auto;
height: auto;
margin: -12px 0 0 305px;
padding: 0px 0 0px;
display: block;
font-size: 60%;
}
#noticetitle span.back1{
width: 50px;
height: 1px;
margin: -27px 0 0 230px;
padding: 0px 0px 0px;
display: block;
border-top: 1px solid #c7c7c7;
}
#noticetitle span.back2{
width: 50px;
height: 1px;
margin: -10px 0 0 450px;
padding: 0px 0 0px;
display: block;
border-top: 1px solid #c7c7c7;
}
#notice ul {
width: 1020px;
height: auto;
margin: 0px auto;
padding: 0 0 70px;
}
#notice ul:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#notice ul li.left {
float: left;
width: 100%;
height: 140px;
padding: 0px 0 30px;
margin: 15px auto;
border-bottom: solid 1px #c7c7c7;
background-position: center bottom;
background-repeat: repeat-x;
}
.clearfix::after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: block;
height: 0;
clear: both;
}
.notice_img {
width: 260px;
height: 140px;
float:left;
}
.notice_img img {
width: 260px;
height: 140px;
}
.notice_text {
width: 720px;
height: 100%;
margin: 0 0 0 35px;
display: block;
float:left;
}
.notice_text h3 {
font-size: 160%; 
margin: 0 0 5px;
}
.notice_text h3 a{
color: #000;
text-decoration: none;
}
.notice_text h3 a:hover{
color: #0e63af;
text-decoration: underline;
filter: alpha(opacity=100); -moz-opacity:1; opacity:1;
}
.notice_text time {
font-size: 140%; 
margin: 0 0 5px;
}
.notice_text p {
font-size: 140%; 
}

@media screen and (max-width: 1024px) {
/* 1024px以下用（タブレット用）の記述 */
}


@media screen and (max-width: 800px) {
/* 800px以下用（タブレット／スマートフォン用）の記述 */
}

@media screen and (max-width: 740px) {
/* 640pxpx以下用（スマートフォン用）の記述 */
}

@media screen and (max-width: 414px) {
/* 414pxpx以下用（スマートフォン用）の記述 */

}

@media screen and (max-width: 320px) {
/* 320pxpx以下用（スマートフォン用）の記述 */

}