@charset "utf-8";
/* Copyright 2017 FSField All Rights Reserved. */

/* ------------------------------------------------------------

HOME ホーム

------------------------------------------------------------ */
/*--サイドのボタン--*/
#btn_side_contact_home{
	position:fixed;
    left:50%;
	top:80px;
	margin:0 0 0 540px;
	z-index:200;
}

/*--土浦駅西口ビジョンについてのボタン--*/
#btn_side_vision_home{
    position: absolute;
    left: 40px;
    bottom: 40px;
    z-index: 200;
    box-shadow: 8px 8px 20px rgb(22,60,98,0.5);
}

#btn_side_vision img, #btn_side_vision_home img {
    animation-name: on;
    animation-duration: 0.2s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    width: clamp(250px,17.8vw,350px);
}

/*--プロモーション--*/
#bg_promotion{
    background: #0083B5 url(../img/home/img_promotion01.jpg) no-repeat center 0;
    width: 100%;
    min-width: 980px;
    height: 680px;
    margin: 0 auto;
    position: relative;
}

#promotion{
	width:980px;
	margin:0 auto;
	position:relative;
}

/*--制作実績--*/
#works{
	background:#EEF5F9;
	min-width:980px;
	padding:130px 0 80px;
/*	height: 70px;*/
}

/*--FS fieldには営業マンがいません。--*/
#about{
	background:url(../img/home/bg_about01.gif), linear-gradient(90deg, #0083B5 50%, #006388 50%, #006388);
	background-repeat:no-repeat;
	background-position:center center;
	padding:80px 0;
	color:#FFF;
	font-size:15px !important;
}

/*--サービス紹介--*/
#service{padding:80px 0;}

#ani-figure{
	position:relative;
	width:764px;
	height:400px;
	margin:0 auto 60px;
}

#ani-right{
	position:absolute;
	top:0;
	right:0;
	width:533px;
	height:400px;
}

#ani_item02,
#ani_item03,
#ani_item04,
#ani_item05,
#ani_item06,
#ani_item07{
	position:absolute;
	opacity: 0;
	transition: 0s;
	transition-delay:0s;
}

#ani_item02{
	top:0;
	left:0;
}

#ani_item03{
	top:70px;
	left:70px;
}

#ani_item04{
	top:140px;
	left:140px;
}

#ani_item05{
	left:140px;
	bottom:140px;
}

#ani_item06{
	left:70px;
	bottom:70px;
}

#ani_item07{
	left:0;
	bottom:0;
}

#ani_item02.anim,
#ani_item03.anim,
#ani_item04.anim,
#ani_item05.anim,
#ani_item06.anim,
#ani_item07.anim{
	opacity: 1;
	transition: .8s;
}

#ani_item02.anim{transition-delay:0.5s;}
#ani_item03.anim{transition-delay:1.0s;}
#ani_item04.anim{transition-delay:1.5s;}
#ani_item05.anim{transition-delay:1.5s;}
#ani_item06.anim{transition-delay:1.0s;}
#ani_item07.anim{transition-delay:0.5s;}

/*--制作までの流れ--*/
#flow{
	background:#EEF5F9;
	padding:80px 0;
}

.flex_container_home{
    display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
}

.f_items_home{
	width:220px;
	opacity: 0;
	transition: 0s;
	transition-delay:0s;
	margin-bottom:60px;
}

.anim02{
	opacity: 1;
	transition: .8s;
}

.anim02:nth-child(1){transition-delay:0.3s;}
.anim02:nth-child(2){transition-delay:0.6s;}
.anim02:nth-child(3){transition-delay:0.9s;}
.anim02:nth-child(4){transition-delay:1.2s;}
.anim02:nth-child(5){transition-delay:1.5s;}
.anim02:nth-child(6){transition-delay:1.8s;}
.anim02:nth-child(7){transition-delay:2.1s;}

.f_items_home:nth-child(1){padding-bottom:40px;}
.f_items_home:nth-child(2){padding-bottom:40px;}
.f_items_home:nth-child(3){padding-bottom:40px;}
.f_items_home:nth-child(4){padding-bottom:40px;}
.f_items_home:nth-child(5){margin-left:130px;}
.f_items_home:nth-child(7){margin-right:130px;}

.f_items_home figure{
	width:100%;
	height:120px;
	overflow:hidden;
	text-align:center;
	margin-bottom:15px;
}

.f_items_home figure img{
	width:120px;
	height:auto;
}

/*--最新情報--*/
#news{padding:80px 0 100px;}

#news_inner{
	width:980px;
	margin:0 auto;
	overflow:hidden;
}

.article_news{
	background-image: linear-gradient(to right, #A5BDC9, #A5BDC9 1px, transparent 1px, transparent 3px);
	background-size: 5px 1px;
	background-position: bottom;
	background-repeat: repeat-x;
	padding:15px 0;
}

.article_news:first-child{padding-top:0;}
.article_news:last-child{margin-bottom:30px;}

.date{
	font-size:1.3rem;
	color:#666666;
	margin-bottom:7px;
}

/* ホーム画面ヘッダー
---------------------------------------------- */
header#header{
    top:-100px;
    position:absolute;
    width:100%;
    margin:100px auto 0;
    z-index:100;
	background:#FFF;
}

/* Fixed */
header#header.fixed{
	margin:0;
	top:0;
	position:fixed;
    background:#FFF;
    background:rgba(255,255,255,0.9);
    transition:top 0.65s ease-in;
	z-index:100;
	border-bottom:1px solid #EEF5F9;
}

div#header_inner:after {
    content: "";
    clear: both;
    display: block;
}

h1#h1_top{
	color:#FFFFFF;
	font-size:11px !important;
	font-weight:normal;
	text-align:left;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

/* 見出し
---------------------------------------------- */
h3#h3_works01{
	background:url(../img/home/h3_works01.jpg) no-repeat center 0;
	height:76px;
	margin-bottom:40px;
}

h3#h3_about01{
	background:url(../img/home/h3_about01.png) no-repeat center 0;
	height:29px;
	margin-bottom:30px;
}

h3#h3_service01{
	background:url(../img/home/h3_service01.jpg) no-repeat center 0;
	height:74px;
	margin-bottom:30px;
}

h3#h3_flow01{
	background:url(../img/home/h3_flow01.jpg) no-repeat center 0;
	height:75px;
	margin-bottom:40px;
}

h3#h3_news01{
	background:url(../img/home/h3_news01.jpg) no-repeat center 0;
	height:77px;
	margin-bottom:40px;
}

h3#h3_works01 span,
h3#h3_about01 span,
h3#h3_service01 span,
h3#h3_flow01 span,
h3#h3_news01 span{visibility:hidden;}

h4#h4_flow01{background:url(../img/home/h4_flow01.gif) no-repeat center 0;}
h4#h4_flow02{background:url(../img/home/h4_flow02.gif) no-repeat center 0;}
h4#h4_flow03{background:url(../img/home/h4_flow03.gif) no-repeat center 0;}
h4#h4_flow04{background:url(../img/home/h4_flow04.gif) no-repeat center 0;}
h4#h4_flow05{background:url(../img/home/h4_flow05.gif) no-repeat center 0;}
h4#h4_flow06{background:url(../img/home/h4_flow06.gif) no-repeat center 0;}
h4#h4_flow07{background:url(../img/home/h4_flow07.gif) no-repeat center 0;}

h4#h4_flow01,
h4#h4_flow02,
h4#h4_flow03,
h4#h4_flow04,
h4#h4_flow05,
h4#h4_flow06,
h4#h4_flow07{
	height:46px;
	margin-bottom:17px;
}

h4.works{
	background:url(../img/ico_works01.gif) no-repeat 0 2px;
	padding:0 0 0 90px;
	font-weight:normal;
}

h4.news{
	background:url(../img/ico_news01.gif) no-repeat 0 2px;
	padding:0 0 0 90px;
	font-weight:normal;
}

h4.works a,
h4.news a{
	display:block;
	font-size:1.5rem;
	color:#0083B5;
	transition:color .2s;
}

h4.works a:hover,
h4.news a:hover{color:#78BCDA;}

h4#h4_flow01 span,
h4#h4_flow02 span,
h4#h4_flow03 span,
h4#h4_flow04 span,
h4#h4_flow05 span,
h4#h4_flow06 span,
h4#h4_flow07 span{visibility:hidden;}

/* スライダー
---------------------------------------------- */
div#loopSlide{margin-bottom:60px;}

.simply-scroll-container{position:relative;}

.simply-scroll-clip{
    position:relative;
    overflow:hidden;
}

.simply-scroll-list{
    overflow:hidden;
    margin:0;
    padding:0;
}

.simply-scroll-list li{
    float:left; /* Horizontal scroll only */
    padding:0;
    margin:0;
	margin-right:30px;
    width:230px;
    height:200px;
}

.simply-scroll-list li a img{display:block;}

li.thumnail a{display:block;}

div.inner{
    margin:0;
    overflow:hidden;
    position:relative;
}

div.inner img{
    -webkit-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    /*width:100%;*/
}

div.caption{
    background:rgba(0,88,121,0.65);
    color:#FFF;
    opacity:0;
    position:absolute;
    text-align:center;
    transition:all 0.25s ease-in-out;
    top:0;
    left:0;
    right:0;
    bottom:0;
	display:table;
	width:100%;
	height:200px;
}

div.caption_inner{
	display:table-cell;
	padding:0 20px;
	vertical-align:middle;
}

div.caption_inner h4{margin-bottom:3px;}
 
/*li.thumnail:hover a div.inner img{transform:scale();}*/
 
li.thumnail:hover a div.caption{opacity:1;}

.thumbnail01,
.thumbnail02{
	overflow: hidden;
    width: 260px;
    height: 226px;
    position: relative;
	margin-bottom:20px;
	transition:opacity .2s;
}

.thumbnail01 img{
  position: absolute;
  top: 83%;
  left: 44%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width:230px;
  height: auto;
}

.thumbnail02 img {
  position: absolute;
  top: 50%;
  left: 45%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 400px ;
  height: auto;
}