﻿/*-----------------------------------------
メニュー
/*-----------------------------------------*/
.fh5co-nav ul li {
	font-family: Didot,"Didot LT STD","Hoefler Text",Garamond,"Times New Roman",serif !important;
}
.fh5co-nav ul li a{
	letter-spacing: 0.2px;
}
.fh5co-nav ul li.active > a {
	color: #80bfb4 !important;
}
.fh5co-nav ul li.has-dropdown .dropdown li a {
	font-size:1.2rem;
}
/*-----------------------------------------
メニュー PCサイズ用
/*-----------------------------------------
.fh5co-nav ul.hidden-xs li a{
	padding:0 !important;
}
*/

/*-----------------------------------------
a
/*-----------------------------------------*/
a {
	color: #80bfb4;
}
a:hover, a:active, a:focus {
	color: #80bfb4;
}

.fh5co-logo img{
	width: 120px;
}

iframe{
	border:none;
}
.lightcolor{
	color:#e0e0e0;
}
/*-----------------------------------------
dl
/*-----------------------------------------*/
.about_dl, .process_dl{
	display: flex;
	margin: 0 0 30px 0;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}
.about_dl dt {
	text-transform: uppercase;
	width: 20%;
	font-weight: bold;
	line-height: 1.7142;
}
.about_dl dd {
	line-height: 1.7142;
	width: 80%;
}

.process_dl dt {
	text-transform: uppercase;
	width: 5%;
	font-weight: bold;
	line-height: 1.7142;
}
.process_dl dd {
	line-height: 1.7142;
	width: 95%;
	border-bottom:solid 1px #e0e0e0;
	padding-bottom:5px;
}
.work .work-grid {
	box-shadow: 0 6px 8px -2px rgba(82,91,108,.3);
}
h1, h2, h3, h4, h5, h6, figure {
	color: #333333;
}
/*-----------------------------------------
works .border_slide_btn
/*-----------------------------------------*/

.border_slide_btn{
  position: relative;
  display: inline-block;
  color: #555555;
  text-decoration: none;
  padding:0;
  margin-right:15px;
}
.border_slide_btn:hover {
  cursor: pointer;
  text-decoration: none;
}
.border_slide_btn::after{
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #555555;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
.border_slide_btn:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

.worksMenu .active{
	border-bottom:1px solid #555555;
	color: #80bfb4;
}


.worksMenu .border_slide_btn{
  font-size:1.7rem;
}




/*-----------------------------------------
works 
/*-----------------------------------------*/
.work .work-grid .inner .desc h2 {
    font-size: 14px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: bold;
    line-height: 24px;
}

@media screen and (max-width: 768px){
.work .work-grid .inner .desc .cat {
	color: #80bfb4;
}
}
/*-----------------------------------------
コンタクトボタン .square_btn
/*-----------------------------------------*/
.square_btn {
	display: block;
	position: relative;
	width: 100%;
	padding: 1.6rem;
	text-align: center;
	text-decoration: none;
	color: #202020;
	background: #fff;
	border:1px solid #555555;
	font-size:2rem;
	margin-bottom:2rem;
}
.square_btn:hover {
	border:1px solid #202020;
	background: #202020;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}

/*-----------------------------------------
service
/*-----------------------------------------*/
.work .work-grid .inner .desc {
	width: 100%;
}
/*-----------------------------------------
footer
/*-----------------------------------------*/
#fh5co-footer {
	padding: 1em 0;
	clear: both;
	background:#ffffff;
	border-top:1px solid #e0e0e0;
}

.w100{
	width:100% !important;
}
/*-----------------------------------------
TOPページ
/*-----------------------------------------*/
@media screen and (min-width: 769px){
#index .fh5co-nav {
	display: none;
}
}
@media screen and (max-width: 768px){
/*#index .fh5co-nav-toggle {
	display: none;
}*/
#index h1 img{
	display: block;
	width: 70%;
	margin: auto;
}
}


#index .container {
	margin-top:2%;
}
@media screen and (max-width: 768px){
#index .container {
	margin-top:3% !important;
}
}
#index .worksMenu .border_slide_btn {
	font-size: 1.6rem;
}
#index .indexAnimation {
	animation-name: fadein;
	animation-duration: 3s;
	animation-timing-function:ease-in-out;
	animation-fill-mode: both;
}
#index .indexAnimation2 {
	animation-name: fadein;
	animation-duration: 3s;
	animation-delay:1s;
	animation-timing-function:ease-in-out;
	animation-fill-mode: both;
}
#index .indexAnimation2 .link1{
	animation-delay:2s;
}
#index .indexAnimation2 .link2{
	animation-delay:3s;
}
#index .indexAnimation2 .link3{
	animation-delay:4s;
}
#index .indexAnimation3 {
	animation-name: fadein;
	animation-duration: 4s;
	animation-delay:2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode: both;
}
@keyframes fadein {
from {
	opacity: 0;
/*	transform: translateY(40px);*/
}
to {
	opacity: 1;
	transform: translateY(0);
}
}
/*-----------------------------------------
TOPページ center寄せ
-----------------------------------------
#index #fh5co-author {
	position: relative;
	height: 200px;
}
#index .container {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	width: 100px;
	text-align: center;
}*/

/*-----------------------------------------
TOPページ news
-----------------------------------------*/
.newsBox dl{
	width:70% !important;
	margin:0 auto !important;
	padding:1.5rem;
	border-left:1px solid #d8d8d8;
}
.newsBox dt{
	margin-bottom:0.6em;
}
.newsBox dd {
	margin-bottom:0.3em;
}
.newsBox dd span {
	font-size:0.8em;
}
/*
.newsBox .border_slide_btn {
	color: #80bfb4 !important;
}
.newsBox .border_slide_btn::after {
	background: #ffffff;
}
*/
@media screen and (min-width: 769px){
.pcNone{
	display:none;
}
}
@media screen and (max-width: 768px){
.newsBox dl{
	width:90% !important;
}
}
/*-----------------------------------------
NEWSページ
-----------------------------------------*/
#news .newsBox dl{
	width:100% !important;
}
#news .newsBox dd span {
	font-size:0.9em;
}
#news .newsBox dd {
	margin-bottom:0.5em;
}
/*
#news .newsBox .border_slide_btn::after {
	background: #d8d8d8;
}
*/
@media screen and (max-width: 768px){
.newsBox dl{
	width:100% !important;
}
}