@charset 'UTF-8';
/* --共通-- */

body {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	font-size: 15.5px;
	line-height:150%;
	color:#333333;
	margin: 0;
}
#header{
	width:100%;
	height:78px;
	margin:0px auto 0 auto;	
	background-color:#ffffff;
	border-bottom:1px solid #CCCCCC;
	position: fixed;
	z-index:9998;
}
#logo{
	display: block;
	position: absolute;
	top: 0;
	width:365px;
	height:77px;	
	margin-left:0px;
}
#logo_idea{
	display: block;
	height: 77px;
	background: url(../img/logo.png) 0px 0px no-repeat;
	background-size: contain;
	margin: 0px;
}
#nav{
	display: block;
	position: absolute;
	top: 0px;
	right:0px;
	width: 590px; 
	height:77px;
	background-color:#ffffff;
	margin-right:50px;
	margin-left:auto;
	vertical-align:middle;

}
#nav_list {
	list-style: none;
	margin: 0px;
	padding-bottom: 78px;
}

#nav_list-item {
	width: 80px;
	Line-height: 26px;
	margin-top: 27px;
	margin-left: 0px;
	padding-left: 12px;
	border-left: 1px solid #a3a3a3;
	text-align: center;
	font-size: 1.2rem;
	transform: scale(0.85, 1);
	font-weight: bold;
	color: #666666;
	display: block;
	float: right;
	padding-bottom: 0px;
	padding-right: 5px;
}
#nav_list-item a{
	color: #bdbdbd;
	text-decoration: none;
}
#nav_list-item a:hover {
	color: #ffcc99;
}
#nav_list-item a:focus {
	color: #EF7F2F;
}

#image{
	top: 0px;
	position: relative;
	padding-top: 77px;
}
#image_box{
	width: 1280px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

#image img {
	animation: show 20s infinite;
	-webkit-animation: show 20s infinite;
	height: auto;
	width: 100%;
	min-width: 900px;
	max-width: 1300px;
	opacity: 0;
	position: absolute; /*画像を全て重ねる*/
}

/*アニメーション*/

@keyframes show {
    5% {opacity:0}
    15% {opacity:1}
    25% {opacity:1}
    40% {opacity:0}
 }

@-webkit-keyframes show {
    5% {opacity:0}
    10% {opacity:1}
    30% {opacity:1}
    50% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/

#image img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: -1s;
}

#image img:nth-of-type(2) {
    animation-delay: 5s;
    -webkit-animation-delay: 4s;
}

#image img:nth-of-type(3) {
    animation-delay: 10s;
    -webkit-animation-delay: 9s;
}

#image img:nth-of-type(4) {
    animation-delay: 15s;
    -webkit-animation-delay: 14s;
}

/* --about--  */   

#about{
	width: 100%;
	height: 930px;
	padding-top: 520px;
	background-color: #ffffff;
}

h2{
	width: 900px;
	height: 155px;
}

#about_title{
	margin:0px auto 0 auto;
	background:url(../img/about.png) 0px 0px no-repeat;
	background-position: center;
}

#chart{
	width: 900px;
	height: 340px;
	margin: 30px auto 0 auto;
	background:url(../img/idea_chart.png) 0px 0px no-repeat;
}

#intro{
	width: 900px;
	height: 77x;
	margin: 20px auto 30px auto;
	Line-height: 30px;
	text-align:center;
}

#strong_point{
	display: block;
	width: 432px;
	height: 34px;
	margin: 45px auto 0px auto;
	border: 1px solid #004890;
	color: #004890;
	text-align: center;
	font-family: 'Noto Sans JP';
	font-weight: 700;
	Line-height: 30px;
}
#strong_point a{
	display: block;
	width: 432px;
	height: 34px;
}
#strong_point a:hover{
	display: block;
	width: 432px;
	height: 34px;
	background-color:#e9ebf5;
}
/* --works--  */   

#works{
	width: 100%;
	height:1064px;
	padding-top:0px;
	background-color:rgb(247,245,242);
}

#works_title{
	margin:0px auto 0 auto;
	background:url(../img/works.png) 0px 0px no-repeat;
	background-position: center;
}

#works_box{
	width: 960px;
	height:696px;
	margin:20px auto 0 auto;
	padding:0px;
	overflow:hidden;
}
.works-list_item{

	width: 222px;
	height:204px;
	margin:14px 9px 14px 9px;
	overflow:hidden;
	float:left;
}

#ad-1{
	background:url(../img/advertising-1.png) 0px 0px no-repeat;
}
#ad-1 a{
	display: block;
	width: 222px;
	height:204px;
}
#ad-1 a:hover {
	width: 222px;
	height:204px;
	background:url(../img/advertising-1_ro.png) 0px 0px no-repeat;
}

#ad-2{
	background:url(../img/advertising-2.png) 0px 0px no-repeat;
}
#ad-2 a{
	display: block;
	width: 222px;
	height:204px;
}
#ad-2 a:hover {
	width: 222px;
	height:204px;
	background:url(../img/advertising-2_ro.png) 0px 0px no-repeat;
}

#cat-1{
	background:url(../img/catalog_1.png) 0px 0px no-repeat;
}
#cat-1 a{
	display: block;
	width: 222px;
	height:204px;
}
#cat-1 a:hover{
	width: 222px;
	height:204px;
	background:url(../img/catalog_1_ro.png) 0px 0px no-repeat;
}

#cat-2{
	background:url(../img/catalog_2.png) 0px 0px no-repeat;
}
#cat-2 a{
	display: block;
	width: 222px;
	height:204px;
}
#cat-2 a:hover{
	width: 222px;
	height:204px;
	background:url(../img/catalog_2_ro.png) 0px 0px no-repeat;
}

#cat-3{
	background:url(../img/catalog_3.png) 0px 0px no-repeat;
}
#cat-3 a{
	display: block;
	width: 222px;
	height:204px;
}
#cat-3 a:hover{
	width: 222px;
	height:204px;
	background:url(../img/catalog_3_ro.png) 0px 0px no-repeat;
}

#dm{
	background:url(../img/direct_mail.png) 0px 0px no-repeat;
}
#dm a{
	display: block;
	width: 222px;
	height:204px;
}
#dm a:hover{
	width: 222px;
	height:204px;
	background:url(../img/direct_mail_ro.png) 0px 0px no-repeat;
}

#poster{
	background:url(../img/poster.png) 0px 0px no-repeat;
}
#poster a{
	display: block;
	width: 222px;
	height:204px;
}
#poster a:hover{
	width: 222px;
	height:204px;
	background:url(../img/poster_ro.png) 0px 0px no-repeat;
}

#book{
	background:url(../img/book.png) 0px 0px no-repeat;
}
#book a{
	display: block;
	width: 222px;
	height:204px;
}
#book a:hover{
	width: 222px;
	height:204px;
	background:url(../img/book_ro.png) 0px 0px no-repeat;
}

#pac{
	background:url(../img/package.png) 0px 0px no-repeat;
}
#pac a{
	display: block;
	width: 222px;
	height:204px;
}
#pac a:hover{
	width: 222px;
	height:204px;
	background:url(../img/package_ro.png) 0px 0px no-repeat;
}

#sp-1{
	background:url(../img/sp_tools_1.png) 0px 0px no-repeat;
}
#sp-1 a{
	display: block;
	width: 222px;
	height:204px;
}
#sp-1 a:hover{
	width: 222px;
	height:204px;
	background:url(../img/sp_tools_1_ro.png) 0px 0px no-repeat;
}

#sp-2{
	background:url(../img/sp_tools_2.png) 0px 0px no-repeat;
}
#sp-2 a{
	display: block;
	width: 222px;
	height:204px;
}
#sp-2 a:hover{
	width: 222px;
	height:204px;
	background:url(../img/sp_tools_2_ro.png) 0px 0px no-repeat;
}

#web{
	background:url(../img/web.png) 0px 0px no-repeat;
}
#web a{
	display: block;
	width: 222px;
	height:204px;
}
#web a:hover{
	width: 222px;
	height:204px;
	background:url(../img/web_ro.png) 0px 0px no-repeat;
}

#mov{
	background:url(../img/movie.png) 0px 0px no-repeat;
}
#mov a{
	display: block;
	width: 222px;
	height:204px;
}
#mov a:hover{
	width: 222px;
	height:204px;
	background:url(../img/movie_ro.png) 0px 0px no-repeat;
}
/* --profile--  */  

#profile_title{
	margin:0px auto 0 auto;
	background:url(../img/profile.png) 0px 0px no-repeat;
	background-position: center;
}
#profile{
	width: 100%;
	height:930px;
	padding-top:0px;
	background-color:#ffffff;
}

#profile_box {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}

#profile-list{
	width: 660px;
	height:490px;
	margin:60px auto 0 auto;
	font-size: 15.5px;
	Line-height: 32px;
	color:#333333;
}

#profile-list dt{
	padding-bottom:30px;
	width: 120px;
	float:left;
}


#profile-list dd{
	padding-bottom:30px;
	width: 550px;
	color:#333333;
	padding-left:120px;
}

/* --access--  */  

#access{
	width: 100%;
	height:970px;
	padding-top:0px;
	background-color:rgb(247,245,242);
}

#access_title{
	margin:0px auto 0 auto;
	background:url(../img/access.png) 0px 0px no-repeat;
	background-position: center;
}

#map_title{
	display: block;
	width: 900px;
	height:20px;
	padding:0px;
	margin:25px auto 0 auto;
}
#map{
	width: 900px;
	height:460px;
	padding-top:0px;
	margin:15px auto 0 auto;
	background:url(../img/map.png) 0px 0px no-repeat;
}

#near_station{
	width: 512px;
	height:73px;
	padding:0px;
	margin:45px auto 0 auto;
	font-size: 15px;
	Line-height: 25	px;


}

#near_station dt{
	width: 80px;
	border:1px solid #999999;
	text-align:center;
	color:#999999;
	Line-height: 20px;
	float:left;
}
#near_station dd{
	width: 445px;
	color:#333333;
	padding-left:100px;
}

/* --contact--  */  

#contact{
	width: 100%;
	padding-top:0px;
}

#contact_title{
	margin:0px auto 0 auto;
	background:url(../img/contact.png) 0px 0px no-repeat;
	background-position: center;
}

#contact-message{
	display: block;
	width: 900px;
	height:20px;
	padding:0px;
	margin:30px auto 0 auto;
	font-size: 16.5px;
	text-align:center;
}
form {
	margin: 40px auto 0 auto;
	width: 680px;
	padding: 1em;
	padding-left: 120px;
	padding-right: 120px;

}
form div + div {
	margin-top: 1.3em;
}
label {
	display: inline-block;

	width: 180px;
	height: 30px;
	vertical-align: top;
	padding-top: 10px;
	padding-left: 10px;
	border-left:1px solid #999999;
}
input, textarea {
	font: 1em sans-serif;
	width: 469px;
	height: 40px;
	padding:10px;
	box-sizing: border-box;
	border:1px solid #cccccc;
	background-color:#fffcf2;
}
textarea {
	width:469px;
	height:100px;
	resize: vertical;
	border:1px solid #cccccc;
	background-color:#fffcf2;
	padding:10px;
}
input:focus, textarea:focus{
	background-color:#ffffff;
}

.button {
	width:352px;
	height:42px;
	margin-left: 160px;
	margin-top: 10px;
	margin-bottom: 25px;
	background:url(../img/submit-button.png) 0px 0px no-repeat;
	text-indent:120%;
	white-space:nowrap;
	overflow:hidden;
}
.button:hover{
	filter: alpha(opacity=50);
	-ms-filter: alpha(opacity=50);
opacity: 0.5;
}
.small {
	font-size: 13px;
}
.red {
	color: #f15a24;
	font-size: 13px;
}
#footer{
	display: block;
	width: 100%;
	height:50px;
	margin:0px auto 0 auto;
	padding-top:20px;
	color:#999999;
	font-size: 15px;
	text-align:center;
	background-color:rgb(247,245,242);
}

/*　簡易版レスポンシブ用CSS　*/
@media screen and (max-width:1000px) {

#nav{
	width: 554px; 
	height:77px;
	margin-right:30px;
}
#nav_list-item {
	width: 78px;
	padding-left: 8px;
	font-size: 1.1rem;
}