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

/*
Theme Name: 株式会社タカスイ
Theme URI: http://www.takasui.co.jp/contents/wp-content/themes/takasui
Author: 株式会社タカスイ
Author URI: http://www.takasui.co.jp/
Description: 2016.09.28 - 
Version: 1.0
*/

/*==============================
基本レイアウト
================================*/

/*--リセット--*/

*{margin:0;padding:0;}


span{
	margin:0;padding:0;
}

body{
	font-size: 95%;
	font-family: "メイリオ", Meiryo, arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	color:#000000;
}

table{
	padding:0;
	margin:0;
	border-collapse: collapse;
}

img{
	margin:0;
	padding:0;
	vertical-align:bottom; 
}

a{
	text-decoration:none;
	color:#4d95c5;
	transition:0.3s;
}

a:hover{
	color:#0066b5
}

/*--リンク色他--*/

/*==============================
基本ブロック（クリア・画像・リスト他）
パンくず・ページング・ページトップ含む
================================*/

.clear{
	clear:both;
}

.inner{
	width:1000px;
	margin:0 auto;
	box-sizing:border-box;
}


/*---ページトップ---*/

#page-top {
    position: fixed;
    bottom: 20px;
    right: 40px;
    font-size: 77%;
}

#page-top a {
    background-image:url(images/pagetop.png);
	background-repeat:no-repeat;
	display:block;
	text-indent:-9999px;
    text-decoration: none;
    color: #fff;
    width:90px;
	margin: 40px 0;
    text-align: center;
	height:80px;
}

/*==============================
ヘッダー
================================*/

#header{
	zoom:1;
	background-color:#0066b5;
	position: relative;
	z-index: 10;
}

#header .inner{
	height:80px;
	position: relative;
}


#header h1 a img{
	display:block;
	float:left;
	width:287px;
	height:143px;
	position: absolute;
	top:7px;
	z-index: 20;
}

/*--メニュー--*/

#header ul{
float:right;

}

#header ul li {
	float:left;
	list-style:none;
/*	border-left:solid 1px #81cbfc;	*/
}

#header ul li:last-child{
/*	border-right:solid 1px #81cbfc;	*/
}

#header ul li a{
	display:block;
	color:#ffffff;
	padding:25px 20px 0 20px;
	transition: 0.3s;
	background:url(images/navi.png) no-repeat 50% 75%;
	height:80px;
	box-sizing:border-box;
}

#header ul li a:hover,
#header ul li.active a{
	background-color:#3894dc;
	background-position:50% 80%;
}

/*==============================
メイン画像
================================*/

/*#mainarea{
	background:#0066b5 url(images/mainimage.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
	background-position: 50% 0; 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
	min-height:100%;
    height: 530px;
	width:100%;
}*/

.main_imagearea{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	height: 610px;
}

.main_image li {
    width: 100%;
    height: 610px;
    background-size: cover;
}

#mainarea .inner{
	position:relative;
    height:490px;
}

/*--採用情報バナー--*/
.rec_banner{margin-top:10px;}
.rec_banner a img{transition:0.3s;}
.rec_banner a:hover img{opacity:0.6;}

/*--タカスイトピックス--*/

#mainarea .topics_box{
	background: rgba(40, 40, 40, 0.5);
	position:absolute;
	bottom:20px;
	right:0;
	float:right;
	padding:10px;
	white-space: normal;
	text-indent: 0px;
	color:#ffffff;
}

#mainarea .topics_box .title{
	background-color:#24567b;
	padding:5px;
	font-size:70%;
	display:inline-block;
	margin-bottom:5px;
}

#mainarea .topics_box .comment{
	float:left;
	margin-right:20px;
}

#mainarea .topics_box .images{
	float:left;
	border:solid 1px #ffffff;
}

/*--メッセージ--*/

#mainarea .inner .message{
    position: absolute;
    top: 15%;
    left: 50%;
    margin-left: -181.5px;
	white-space: normal;
	text-indent: 0px;
}

#mainarea .inner .message img{
    opacity:0;
    width: auto;
    transition: all 3s;
}

#mainarea .inner .message img.img-fade{
    opacity: 1;
}

/*==============================
トップページ：基本コンテンツ枠
================================*/

#top_contents{
	background-color:#ddeef8;
	overflow:hidden;
	padding-top:40px;
}

.top_left{
	float:left;
	width:485px;
	box-sizing:border-box;
	margin-bottom:40px;
}

.top_right{
	background: rgba(255, 255, 255, 0.6);
	float:right;
	width:485px;
	box-sizing:border-box;
	padding:10px;
	margin-bottom:40px;
}

/*==============================
トップページ：タカスイチャンネル
================================*/

.top_left .top_youtube{
	background: rgba(255, 255, 255, 0.6);
	width:485px;
	padding:10px 5px;
	box-sizing:border-box;
}

.top_left .top_youtube .yt_video{

	margin:0 auto;
	margin-top:20px;
}

.top_left .top_youtube iframe{
	width:465px;

}
/*==============================
トップページ：新着情報
================================*/

.top_right .top_news h2,
.top_left .top_youtube h2{
	position: relative;
	padding: .75em 0 .75em 1.5em;
	border-bottom: 2px solid #ccc;
	font-size:120%;
}

.top_right .top_news h2::after,
.top_left .top_youtube h2::after{
	position: absolute;
	top: .5em;
	left: .5em;
	content: '';
	width: 6px;
	height: -webkit-calc(100% - 1em);
	height: calc(100% - 1em);
	background-color: #0066b5;
	border-radius: 4px;
}

ul#news{
	padding:20px 5px;
}

ul#news li{
	list-style:none;
	padding:10px;
	border-bottom: 1px dotted #bbb;
	transition: 0.3s;
}

ul#news li a{
	display:block;
	color:#000000;
}

ul#news li:hover{
	background-color:#cce3fa;
}

ul#news li a span.data{
	margin-right:10px;
	color:#0066b5;
}

/*--もっとみる・編集ボタン--*/

.top_youtube h2 p.more,
.top_news h2 p.more,
.edit{
	background-color:#034fa1;
	border-radius:5px;
	width:80px;
	font-size:70%;
	text-align:center;
	padding:5px;
	float:right;
	margin:0 0 10px 0;
	transition: 0.3s;
}

.edit{
	font-size:100%;
}

.top_youtube h2 p.more a,
.top_news p.more a,
.edit a{
	color:#ffffff;
}

.top_youtube h2 p.more a:hover,
.top_news p.more a:hover
.edit a:hover{
	color:#d9ebfe;
}

/*==============================
トップページ：スライド部分
================================*/

#slide_space{
	background:#0066b5 url(images/subimage.jpg) no-repeat fixed;
	background-size: cover;
	padding: 50px 20px;

}

#slide_space .inner{
	position:relative;
}

.banner_slide li{
	background-color:#ffffff;
	box-sizing:border-box;
}

.banner_slide li a .banner_area {
	width:280px;
	height:210px;
	margin:0 auto;
	position:relative;
	overflow: hidden;
	margin-top:10px;
	margin-bottom:20px;
}

/*--画像設定--*/

.banner_slide li a .banner_area img{
	display: block;	
	transition: opacity 0.35s, transform 0.35s;
}

.banner_slide li a:hover .banner_area img{
	opacity: 0.7;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}

/*--テキスト--*/

.banner_slide li a .text{
	color:#0066b5;
	font-size:120%;
	width:280px;
	margin:0 auto;
	margin-bottom:10px;
	border-top:solid 1px #0066b5;
	border-bottom:solid 1px #0066b5;
	padding:5px;
	box-sizing:border-box;
	transition: 0.3s;
}

.banner_slide li a:hover .text{
	background-color:#dcf1ff;
}

/*--次へ前へボタン--*/

.banner_next a,
.banner_prev a{
	display:block;
    height: 42px;
    width: 42px;
	position: absolute;
    top: 50%;
    border-radius: 50%;
	transition: 0.3s;
	border:solid 3px #cccccc;
    margin-top: -21px;
}

.banner_next a{
	right: -80px;
	background:#0066b5 url(images/next.png) no-repeat 50% center;
}

.banner_prev a{
    left: -80px;
	background:#0066b5 url(images/pre.png) no-repeat 50% center;
}

/*==============================
フッター画像
================================*/

.foot_bg{
	background:#c1ddeb;
	padding-top:50px;
	z-index: 10;
}

/*--facebookページ--*/

.foot_bg .fb{
	padding-bottom:50px;
	float: left;
	width: 485px;
	box-sizing: border-box;
}

.foot_bg .foot_image{
	background:url(images/footer.jpg)repeat-x 50% center;
	height:400px;
	z-index: 10;
}

/*==============================
トップページ：事業所案内
================================*/

.foot_bg .top_jigyosyo{
	background: rgba(255, 255, 255, 0.6);
	float: right;
	width: 485px;
	box-sizing: border-box;
	padding: 15px 15px 25px 15px;
}

.foot_bg .top_jigyosyo .banner_area{
	margin-bottom:20px;
}

.foot_bg .top_jigyosyo .banner_area a img{
	transition:0.3s;
	float:left;
	margin-right:15px;
}

.foot_bg .top_jigyosyo .banner_area a.last img{
	margin-right:0;
}

.foot_bg .top_jigyosyo .banner_area a:hover img{
	opacity:0.6;
}

.foot_bg .top_jigyosyo p.honten{
	line-height:1.4em;
	margin-bottom:25px;
	margin-left:20px;
}

.foot_bg .top_jigyosyo h3{
	border-bottom:1px dotted #cccccc;
	font-size:110%;
	margin-bottom:10px;
	background:url(images/icon_jigyosho.png) no-repeat;
	background-position:2% 50%;
	padding-left:20px;
	color:#000000;
}

.foot_bg .top_jigyosyo dl{
	margin-bottom:10px;
}

.foot_bg .top_jigyosyo dt{
	padding-top:10px;
	padding-left:20px;
	font-weight:bold;
}

.foot_bg .top_jigyosyo dt:first-child{
	padding-top:0;
}

.foot_bg .top_jigyosyo dd{
	padding-left:20px;
	border-bottom:1px dashed #cccccc;
	padding-bottom:10px;
}

.foot_bg .top_jigyosyo .jigyo_link{
	margin-top:20px;
}

/*==============================
フッター
================================*/
#footer{
	background-color:#4d95c5;
	padding:20px;
	z-index: 10;
}

/*-- フッターメニュー --*/

.foot_menuarea{
	text-align:center;
}

#footer ul.foot_menu{
	list-style:none;
	text-align:center;
	margin-bottom:10px;
}

#footer ul.foot_menu li{
	display: inline;
	border-right:solid 1px #ffffff;
	padding:0 10px;	
}

#footer ul.foot_menu li:last-child{
	border-right:0;
}

#footer ul.foot_menu li a{
	color:#ffffff;
}



#footer ul.foot_menu li a:hover{
	color:#0066b5;
}

#footer ul.mb30{
	margin-bottom:30px
}

/*-- copyright --*/

#footer p.copy{
	color:#FFFFFF;
	font-weight:bold;
	text-align:center;
}

/*==============================
 PC<==>モバイル
================================*/

.pc-switcher {
	text-align: center;
	padding:20px 10px 130px;
  background : #4d95c5;
}
.pc-switcher a,
.pc-switcher span {
	padding:0;
	text-align: center;
	border: 1px solid #ccc;
	font-weight: bold;
	text-decoration: none;
	display:inline-block;
	line-height:40px;
	width:40%;
	margin-left:-1px
}
.pc-switcher a {
  color:#333;
	background: -moz-linear-gradient(top,#fff 40%,#f4f4f4 100%);
	background: -webkit-linear-gradient(top,#fff 40%,#f4f4f4 100%);
	background: linear-gradient(top,#fff 40%,#f4f4f4 100%);
}

.pc-switcher a:hover {
	background: -moz-linear-gradient(top,#eee 40%,#f4f4f4 100%);
	background: -webkit-linear-gradient(top,#eee 40%,#f4f4f4 100%);
	background: linear-gradient(top,#eee 40%,#f4f4f4 100%);
}
.pc-switcher span.active {
	color:#fff;
	background-color: #0066b5;
}
.pc-switcher a:first-child,
.pc-switcher span:first-child {
	border-radius:3px 0 0 3px;
}
.pc-switcher a:last-child,
.pc-switcher span:last-child {
	border-radius:0 3px 3px 0;
}