@charset "utf-8";

/*========================= CONTENTS ==========================

    1:  XXXXXXXXXX

============================================================*/

/* ━━━━━━━━━━━━━━━━━━━━
XXXXXXXXXX
━━━━━━━━━━━━━━━━━━━━ */

#header {
	width: 100%;
	height: 100px;
	background: #fff;
	border-top: solid 5px #91c231 ;
	border-bottom: solid 1px #e1e1e1 ;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, .20);
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	z-index: 50;
	position: fixed; /* 固定 */
	top: 0px; /* メインエリア重なり回避のため0px指定 */
	display: flex; /* 子要素2列  */
	justify-content: space-between;
	align-items: center;　/* 子要素　縦中央揃え  */
}

#header.small {　/* スクロールしたら変更  */
	width: 100%;
	height: 65px;
	background-color:	rgba(255,255,255,0.95);
}

/* ヘッダー　+　ナビ
─────────────────────────────────── */

.header_logo {
	margin: 0px 20px 0px 20px;
}

.gnavi {
}
.gnavi li {
	font-size: 16px;
	display: inline-block;
	margin-right: 30px;
}


#main-wrapper {
	margin: 0 auto;
	width: 1120px;
	display: block;
}


/* メインビジュアル
───────────────────────────────────
swiper.css内で指定してます */




/* 制作実績
─────────────────────────────────── */

.portfolio-wrapper {
	display: flex;
	flex-wrap: wrap;　/* 折り返し方法  */
}

.ttl_set {
	width: 400px;
	border-bottom: solid 4px #91c231 ;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 40px;
	margin-top: 40px;
	font-size: 65px;
	line-height: 1;
	font-family: 'Nothing You Could Do', sans-serif;
}


/* 制作実績個別ブロック
─────────────────────────────────── */
.pf_box {
	width: 240px;
	margin: 20px;
}

.pf_box dd {
	font-weight: bold;
}

.pf_box dt {
	font-size: 13px;
	margin-bottom: 3px;
}

.pf_imgmask {
	width:			240px;
	height:			240px;
	margin: 0 auto;
	overflow:		hidden;
	position:		relative;
	margin-bottom: 10px;
}
.pf_imgmask .pf_caption {
	font-size:		300%;
	color:			#fff;
	opacity: 0.7;
}

.pf_imgmask .pf_caption i {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	width: 200px;
	text-align: center;/*一応BOX内の文字も中央寄せ*/
}

.pf_imgmask .pf_mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,57,20,0.7);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.pf_imgmask:hover .pf_mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		15px;	/* 上からずらす */
}

.pf_attention {
	margin-bottom: 20px;
}
.pf_attention dt, .pf_attention dd  {
	font-size: 10px;
}
.pf_attention dd a {
	text-decoration: underline;
}


/* サービス
─────────────────────────────────── */
#service-wrapper p {
	margin-bottom: 40px;
}

.sblock {
	width: 1060px;
	border-top: solid 1px #e1e1e1 ;
	padding: 30px;
	display: flex;
	position: relative;
}
.sblock:last-child { /* 最後のsblockだけ下線追加 */
	border-bottom: solid 1px #e1e1e1 ;
}

.sblock-left {
}

.sblock-right {
	position: absolute;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
	margin-left: 250px;
}

.sblock-right dt {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 15px;
}

.sblock_img img {
	position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}



/*会社案内
─────────────────────────────────── */
#company-wrapper {
}

#company-wrapper li{
	width: 1090px;
	border-top: solid 1px #e1e1e1 ;
	padding: 15px;
}
#company-wrapper li:last-child {
	border-bottom: solid 1px #e1e1e1 ;
}





/* フッター
─────────────────────────────────── */
footer {
	width: 100%;
	font-size: 12px;
	color: #8c8c8c;
	padding: 20px 0px 20px 0px;
	margin-top: 100px;
	text-align: center;
	background: #ffffff;
	border-top: solid 1px #e1e1e1 ;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .20);
}



/*404
─────────────────────────────────── */
 .nf_txtbox {
	margin: 0 auto;
	width: 70%;
	margin-top: 250px;
	text-align: center;
	line-height: 2;
}













/* 要素をスクロールに応じてフェードで表示するCSS　https://noze.space/archives/415
─────────────────────────────────── */
.sa {/* アニメーションさせる要素に付けるクラス名  */
  opacity: 0;
  transition: all .5s ease;
}
.sa.show {
  opacity: 1;
  transform: none;
}
.sa--fd {/* フェードイン  */
  transform: translate(0, 0);
}
.sa--lr {/* 左から右にフェードイン  */
  transform: translate(-50px, 0);
}
.sa--rl {/* 右から左にフェードイン  */
  transform: translate(50px, 0);
}
.sa--up {/* 下から上にフェードイン  */
  transform: translate(0, 50px);
}
.sa--down {/* 上から下にフェードイン  */
  transform: translate(0, -50px);
}
.sa--scaleUp {/* 縮小した状態から拡大しながらフェードイン  */
  transform: scale(.5);
}
.sa--scaleDown {/* 拡大した状態から縮小しながらフェードイン  */
  transform: scale(1.5);
}
.sa--rotateL {/* 左に回転しながらフェードイン  */
  transform: rotate(180deg);
}
.sa--rotateR {/* 右に回転しながらフェードイン  */
  transform: rotate(-180deg);
}
/*
<div class="AAA sa sa--up" data-sa_delay="100">
<div class="AAA sa sa--up" data-sa_delay="200">
のようにdata-sa_delay属性にミリ秒を入れるとずらして表示ができる。
*/

/* ページトップへボタン
─────────────────────────────────── */
    #pageTop {
      position: fixed;
      bottom: 30px;
      right: 30px;
    }

    #pageTop i {
      padding-top: 6px
    }

    #pageTop a {
			font-size: 22px;
      display: block;
      z-index: 999;
      border-radius: 80px;
      width: 80px;
      height: 80px;
      background-color: #003914;
      color: #ffffff;
			box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, .20);
      text-decoration: none;
      text-align: center;
			line-height: 80px;/*heightと同じ値にして縦中央寄せ*/
    }

    #pageTop a:hover {
      text-decoration: none;
      opacity: 0.7;
    }



/* 選択範囲色替え
─────────────────────────────────── */
::selection {
    background: #91c231;
    color: #fff;
}
//Firefox
::-moz-selection {
    background: #91c231;
    color: #fff;
}