/*
Theme Name: fantastic design works
Theme URI: none
Author: Tsukasa Kakubari
Author URI: none
Description: fantastic design works 専用テンプレートファイルです
Version: 1.0
*/

* {margin: 0; padding: 0;}

body {padding: 10px 0 0 0;margin: 0; font-family: 'Source Sans Pro', sans-serif;font-weight: 300; color:#000; background-color:#fff;}
h1,h2,h3,h4,h5 {font-size: 100%;font-weight:normal;}
ul, li {list-style-type: none;}
p {border: 0;}
img {vertical-align: bottom; border:0;}
table{border-collapse:collapse; vertical-align:top; border: 0; border-spacing:0;}

/* anchor */
a:link, a:visited {color: #000; text-decoration:none;}
a:active, a:hover {color: #cccccc; text-decoration:none;}

/* header */
#header{text-align:center;padding:45px 0 40px 0;}
#header h1{margin-bottom:30px;}
#header .navi{margin:0 auto;}
#header .navi li{padding:0 10px;display:inline;font-size:16px;font-weight:600;letter-spacing:1px;}
#header .navi .lower{font-size:14px;font-weight: 400;}
#header .navi .img_finish{padding-right:30px;}
#header .navi .nav_works{float:left;}
#header .navi .nav_other{float:left;}

#main_contents{padding:40px 0 50px;background:url(common/img/bg_kage_white.png) 0 0 repeat-x;width:100%;min-height:200px;}
#main_contents_inner{display: none;}
#main_contents02{padding:40px 0 50px;background:url(http://wptest.wgserv.com/wp-content/themes/f-fantastic/common/img/bg_kage.png) 0 0 repeat-x;}

#grid-content {list-style-type: none;margin:0 auto;}
#grid-content ul{padding-top:54px;}
#grid-content li {width: 270px;height: 260px;color: #666;margin: 10px 20px 10px 20px;padding: 3px;}
#grid-content li .img_thum {position:relative; margin:0 0 10px 0;height: 200px;text-align:center;cursor:pointer;}
#grid-content li h3{font-size:14px;letter-spacing:1px;}
#grid-content li .txt{font-weight:300;font-size:14px;letter-spacing:1px;}

.img_big_box{position:relative;width:612px;margin:0 auto;}
.img_big_box .arrow_left{position:absolute;left:0;top:220px;cursor:pointer;}
.img_big_box .arrow_right{position:absolute;right:0;top:220px;cursor:pointer;}
.img_big_box .btn_close{text-align:right;margin-right:60px;cursor:pointer;}

.img_big_box .slide_img {position:relative;width:492px;height:370px;margin-left:60px;overflow:hidden;}
.img_big_box .slide_img .slide_img_inner {position:absolute;}
.img_big_box .slide_img .slide_img_inner .photo{float:left;width:492px;height:370px;}
.img_big_box .slide_img .slide_img_inner .photo_01{position:absolute;top:0;left:0;}
.img_big_box .slide_img .slide_img_inner .photo_02{position:absolute;top:0;left:522px;}
.img_big_box .slide_img .slide_img_inner .photo_03{position:absolute;top:0;left:1044px;}
.img_big_box .slide_img .slide_img_inner .photo_04{position:absolute;top:0;left:1566px;}
.img_big_box .slide_img .slide_img_inner .photo_05{position:absolute;top:0;left:2088px;}
.img_big_box .slide_img .slide_img_inner .photo_06{position:absolute;top:0;left:2610px;}
.img_big_box .slide_img .slide_img_inner .photo_07{position:absolute;top:0;left:3132px;}
.img_big_box .slide_img .slide_img_inner .photo_08{position:absolute;top:0;left:3654px;}
.img_big_box .slide_img .slide_img_inner .photo_09{position:absolute;top:0;left:4176px;}
.img_big_box .slide_img .slide_img_inner .photo_10{position:absolute;top:0;left:4698px;}
.img_big_box .slide_img .slide_img_inner li img{border:1px solid #2e2d2b;}

.img_big_box .photo_dot{text-align:center;margin-top:10px;}
.img_big_box .photo_dot img{margin:0 2px;cursor:pointer;}

.url_box{margin:20px 0 0;font-size:12px;letter-spacing:1px;}
.url_box .btn_url{color:#fff;padding:5px;backgroudn-color:#000;}
.url_box .txt_url a{ color: #fff;}

.btn_more_top{display:none;}

.pagetop{right:50px; bottom:140px;position:fixed;}

#top_footer{padding:20px 2%;width:96%;background:url(common/img/bg_footer.png) repeat-x top left;letter-spacing:2px;}
#top_footer .copyright{font-size:12px;width:50%;float:left;}
#top_footer .address{width:50%;float:right;text-align:right;font-size:12px;}

#footer{display: none;padding:20px 2%;width:96%;background:url(common/img/bg_footer.png) repeat-x top left;letter-spacing:2px;}
#footer .copyright{font-size:12px;width:50%;float:left;}
#footer .address{width:50%;float:right;text-align:right;font-size:12px;}

/* info */
.info{text-align:left;width:60%;margin:0 auto;padding-bottom:50px;}
.info h2{font-size:20px;letter-spacing:2px;margin:30px 0 50px;}
.info .box_info{font-size:12px;letter-spacing:2px;}
.info .box_info dl{border-bottom:1px solid #282828;width:100%;margin-top:25px;}
.info .box_info dt{float:left;}
.info .box_info dd{margin-left:100px;padding-bottom:15px;}
.info .box_info dd h3{font-size:14px;letter-spacing:2px;margin-bottom:15px;}
.info .box_info dd p{margin-bottom:15px;}
.info .box_info dd p a.btn{padding:3px 10px;}
.info .box_info dd p a:link.btn,
.info .box_info dd p a:visited.btn {color: #fff;background:#3b3b3b;}
.info .box_info dd p a:active.btn,
.info .box_info dd p a:hover.btn {color: #fff;background:#565555;}





/* about */
.about{text-align:left;width:60%;margin:0 auto;}
.about h2{font-size:20px;letter-spacing:2px;margin:30px 0 20px;}
.about .txt{font-size:12px;letter-spacing:2px;margin-bottom:20px;float:left;}
.about .txt dl{}
.about .txt dt{float:left;}
.about .txt dd{margin-left:90px;padding-bottom:15px;}
.about .txt .btn_map{margin-top:20px;}
.about  a.btn{padding:3px 10px;}
.about  a:link.btn,
.about  a:visited.btn {color: #fff;background:#3b3b3b;}
.about  a:active.btn,
.about  a:hover.btn {color: #fff;background:#565555;}
.about .img_about{margin-bottom:20px;float:left;width:250px;margin-right:40px;}

/* Recruit */
.recruit{text-align:left;width:60%;margin:0 auto;}
.recruit h2{font-size:20px;letter-spacing:2px;margin:30px 0 20px;}

.recruit h3{font-size:15px;letter-spacing:2px;margin:30px 0 20px;}
.recruit .txt{font-size:12px;letter-spacing:2px;margin-bottom:100px;float:left;}
.recruit .txt dl{}
.recruit .txt dt{float:left;}
.recruit .txt dd{margin-left:70px;padding-bottom:15px;}

/* blog */
.fdw-blog{text-align:left;width:60%;margin:0 auto;}
#content{width:75%;float:left;font-size:14px;}
#sidebar{width:20%;float:right;}

/* blog content */
#content {margin-bottom: 50px;}
#content h1.entry-title {font-size: 18px;}
#content article {margin-bottom:30px;padding-bottom:10px;border-bottom:1px solid #282828;}
#content p {margin: 1em 0;}
#content .pagenavi {text-align:center;}
#content .pagenavi .page-numbers {padding:5px 8px; border:1px solid #282828;}
#content .pagenavi .current {background-color:#fff;color:#000;font-weight:bold;}
#sidebar{letter-spacing:1px;}
#sidebar .title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
}
#sidebar ul {
    margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
/* タブレット用のスタイル記述 */

/* header */
#header .navi .nav_works{float:none;}
#header .navi .nav_other{float:none;display:block;margin-top:20px;}

/* footer */
#footer .copyright{font-size:9px;float:none;text-align:center;width:96%;}

/* info */
.info{text-align:left;width:85%;margin:0 auto;padding-bottom:30px;}
.info h2{margin-bottom:20px;margin-top:0;}
.info .box_info dt{float:none;margin-bottom:10px;}
.info .box_info dd{margin-left:0;}


/* about */
.about{text-align:left;width:85%;margin:0 auto;}

/* Recruit */
.recruit{text-align:left;width:85%;margin:0 auto;}

}





@media screen and (max-width: 620px) {
#header{padding:20px 0 0 0 ;}
#header h1 img{zoom: 0.75;}
#header .navi{width:100%;}
#header .navi ul{width:100%;}
#header .navi li{padding:20px 0;font-size:16px;font-weight: 400;text-align:center;display:block;border-top:1px solid #333333;width:100%;}
#header .navi .img_finish{padding-right:0;}
#header .navi .nav_other{float:none;display:block;margin-top:0;}

.img_big_box{position:relative;width:310px;margin:0 auto;}
.img_big_box img{zoom:0.5;}
.img_big_box .arrow_left{position:absolute;left:0;top:110px;cursor:pointer;}
.img_big_box .arrow_right{position:absolute;right:0;top:110px;cursor:pointer;}
.img_big_box .btn_close{text-align:right;margin-right:28px;cursor:pointer;}
.img_big_box .slide_img {position:relative;width:260px;height:217px;margin-left:20px;}
.img_big_box .slide_img .photo_01{position:absolute;top:0;left:0;}
.img_big_box .slide_img .photo_02{position:absolute;top:0;left:260px;}
.img_big_box .slide_img li img{border:1px solid #2e2d2b; }
.img_big_box .photo_dot{text-align:center;}
.img_big_box .photo_dot img{margin:0 2px;cursor:pointer;zoom:1;}

.fdw-blog{text-align:left;width:80%;margin:0 auto;}
#content{width:75%;float:left;font-size:14px;}
#sidebar{width:20%;float:right;}
.gallery-item {float:none !important;}

.btn_more_top{display:block;width:90%;text-align:center;background: -moz-linear-gradient(#171717, #000000 ,#171717);background: -webkit-gradient(linear, left top, left bottom, from(#171717),color-stop(#000000) to(#171717));letter-spacing:2px;margin:30px auto;border:1px solid #272727;padding:10px 0; border-radius: 5px;-webkit-border-radius: 5px; -moz-border-radius: 5px; cursor:pointer;font-weight:600;}
.pagetop{display:none;}

#footer .copyright{font-size:9px;float:none;text-align:center;width:96%;}
#footer .address{float:none;text-align:center;width:96%;margin-bottom:20px;}
#footer .address h4{font-weight: 600; padding-bottom:5px;}

/* info */
.info{text-align:left;width:90%;margin:0 auto;padding-bottom:30px;}
.info h2{margin-bottom:20px;margin-top:0;}
.info .box_info dt{float:none;margin-bottom:10px;}
.info .box_info dd{margin-left:0;}


/* about */
.about{text-align:left;width:90%;margin:0 auto;}
.about img{zoom:0.5;}
.about .txt{}

/* Recruit */
.recruit{text-align:left;width:90%;margin:0 auto;}

/*blog*/
#content{float:none;width:100%;}
#content article{word-wrap:break-word;}
#content article img{zoom:0.7;}
#sidebar{float:none;width:100%;}

}




/* etc */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display:inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height:1%;
}

.clear{
	font-size:0px;
	height:0;
	line-height:0;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 270px;
    height: 200px;
    background: #fff;
}

#sprite {
    position: absolute;
    top: 203px;
    left: 0;
    text-align: center;
}

#sprite .screen {
    position: relative;
    margin: 0 auto;
    max-width: 1024px;
    width: 100%;
    height: 742px;
    overflow: hidden;
    cursor: pointer;
}

#sprite .screen .splash_img {
    margin-top: 5px;
}

#sprite .screen .top_slideshow {
    display: none;
}

#sprite .screen .top_slideshow img {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    max-width: 1024px;
}