/*
	Theme Name:Signifi 採用サイト
	Description:Signifi 採用サイト用オリジナルテーマです。
	Version:1.0
    Author:Signifi Web Team
    Theme URL:https://recruit.signifi.co.jp/
*/


/**************************************************************************************

    General Setting

		@charset （外部スタイルシートの文字コード指定）
		@import	 （外部スタイルシートのインポート）
		@media	 （メディアタイプを指定してスタイルを適用）
		@supports（ブラウザがCSSの属性や値をサポートしているかどうかで処理を振り分ける）

				@supports(display:flexbox){
					//ブラウザがdisplay:flexboxをサポートしている場合
				}

				@supports not(display:flexbox){
					//ブラウザがdisplay:flexboxをサポートしていない場合
				}

		//他の@規則内にネスト
		@supports(display:flexbox){
			@media(min-width:600px){
				//
			}
		}

***************************************************************************************/
@charset "UTF-8";
@import url("css/style_Typography.css");
@import url("css/style_GeneralSetting.css");


/*････････････････････････････････････････････････････････････
Webフォント、オリジナルフォントの記述
（必ずstyle.cssなど、直接読み込むcssファイルに記述。@import先のcssに記述しても適用されない）
････････････････････････････････････････････････････････････*/
/*Webフォント：Adobe Brandon Grotesque*/
.adobe_brandon_bold{
	font-family:brandon-grotesque, sans-serif;
	font-weight:700;
	font-style:normal;
}

/*オリジナルフォント：PC･デバイス内の「游ゴシックMedium」を直接指定*/
@font-face {
    font-family:'MyYuGothic';
    src:local('YuGothic-Medium'),  /*PostScript Name = localの正式な指定方法*/
        local('Yu Gothic Medium'), /*PostScript Nameを認識できないChrome用にFull Nameを指定*/
        local('YuGothic-Regular'); /*游ゴシックMediumが存在しないWindows8.1用*/
    font-weight:100;
}
@font-face {
    font-family:'MyYuGothic';
    src:local('YuGothic-Medium'),
        local('Yu Gothic Medium'),
        local('YuGothic-Regular');
    font-weight:200;
}
@font-face {
    font-family:'MyYuGothic';
    src:local('YuGothic-Medium'),
        local('Yu Gothic Medium'),
        local('YuGothic-Regular');
    font-weight:300;
}
@font-face {
    font-family:'MyYuGothic';
    src:local('YuGothic-Medium'),
        local('Yu Gothic Medium'),
        local('YuGothic-Regular');
    font-weight:400;
}
@font-face {
    font-family:'MyYuGothic';
    src:local('YuGothic-Bold'),
        local('Yu Gothic');
    font-weight:bold;
}

/*body･･････････････････････････････････････････････････････*/
body{
	color:#000;
	background-color:#fff;

                                            /*background:url(images/@top_y.png) center 602px no-repeat;
                                            height:12350px;*/

}

/*検証用･････････････････････････････････････････････････････*/
.red{
	background-color:rgba(255, 0, 0, 0.3);
}
.red2{
	color:red;
	background-color:rgba(255, 0, 0, 0.3);
	border:solid 1px red;
	box-sizing:border-box;
}
.green{
	background-color:rgba(0, 255, 0, 0.3);
}
.green2{
	color:green;
	background-color:rgba(0, 255, 0, 0.3);
	border:solid 1px green;
	box-sizing:border-box;
}
.opacity00{opacity:0;}
.opacity01{opacity:0.1;}
.opacity02{opacity:0.2;}
.opacity03{opacity:0.3;}
.opacity04{opacity:0.4;}
.opacity05{opacity:0.5;}
.opacity06{opacity:0.6;}
.opacity07{opacity:0.7;}
.opacity08{opacity:0.8;}
.opacity09{opacity:0.9;}
.opacity10{opacity:1;}



/**************************************************************************************

    フレーム,
    ヘッダー（グローバルナビ）
    ページトップへ移動ボタン
    フッター

***************************************************************************************/
/*フレーム･･･････････････････････････････････････････････････*/
#gNavi,
footer{
	position:relative;
	height:auto;
	width:100%;
}
    #gNavi>div,
    #gBtnPageTop>div,
    main,
	article,
    section,
    footer>div{
        width:600px;
        min-width:600px;
        max-width:600px;
    }

/*ヘッダー（グローバルナビ）･････････････････････････････････*/
#gNavi{
	z-index:960;
	position:fixed;
	top:0;
	width:100%;
	pointer-events:none;/*ヘッダー背景は#gShieldクリック時に反応*/
}
	#gNavi>div{
		position:relative;
		height:80px;
		margin:0 auto;
		border-bottom:solid 1px #ddd;
	}
		/*カーソル反応範囲･････････････*/
		#gNavi>div a,
		#gNavi>div p,
		.gNaviIcon{
			pointer-events:auto;
			cursor:pointer;
		}
		#gNavi>div a:hover,
		.gNaviIcon:hover{
			opacity:1.0;
		}
		/*･････････････････････････････*/

		#gNavi>div>h1{/*ロゴ*/
			float:left;
			margin:0 auto auto 0;
		}
		.gNaviIcon{/*アイコン*/
			float:right;
		}
		#gNaviIconMenu{/*アイコンメニュー*/
			display:none;
			position:absolute;
			top:10.5rem;/*gNavi直下だと80px;*/
			right:0;
			width:100%;
		}
			#gNaviIconMenu>li{
				width:100%;
			}
				#gNaviIconMenu>li>a{
					display:table-cell;
					height:10vh;
					width:600px;
					vertical-align:middle;
					background-color:#fff105;
				}
					#gNaviIconMenu>li>a>p{
						width:100%;
						font-size:4.0rem;
						text-align:center;
						text-align-last:center;
					}
						#gNaviIconMenu>li>a>p>span{/*あさがくナビへ*/
							font-size:2.2rem;
						}
						#gNaviIconMenu>li>a>p>img{/*HPアイコン*/
							margin:3.5rem auto auto 1.0rem;
						}
				#gNaviIconMenu>li>a:hover{
					background-color:#ff9;
				}

				/*お問い合わせはこちら・吹き出し*/
				#gNaviIconMenu>li:last-of-type>a{
				}
					#gNaviIconMenu>li:last-of-type>a>p{
						position:relative;
						width:97%;
						text-align:right;
						text-align-last:right;
					}
						#gNaviIconMenu>li:last-of-type>a>p>span:first-of-type{/*お問い合わせはこちら*/
							margin-right:76px;
						}
						#gNaviIconMenu>li:last-of-type>a>p>img{/*HPアイコン*/
							height:56px;
							width:61px;
							position:absolute;
							top:0;
							left:auto;
							right:0;
							bottom:0;
							margin:auto;
						}

		#gNaviMenu{/*ナビメニュー*/
			width:174px;
			margin:0 0 auto auto;
			float:right;
			overflow:hidden;
		}
			#gNaviMenu>li{/*ナビメニュー・ボタン*/
			}
				#gNaviMenu>li>a,
				#gNaviMenu>li>p{
					padding:0;
				}
				#gNaviMenu>li>a:hover,
				#gNaviMenu>li>p:hover{
					background-color:white;
				}
				#gNaviMenu>li>ul{/*ナビメニュー（スライド下部）*/
					position:relative;
					background-color:lightgray;
				}
					.gNaviMenuBtn + ul>li{
						background-color:lightgray;
					}
						.gNaviMenu2+ul:last-of-type{/*ナビ・サブメニュー下の余白*/
							padding-bottom:1.0em;
						}
						#gNaviMenu>li>ul>li>a,
						.gNaviMenu2+ul>li>a{
							width:100%;
						}
						#gNaviMenu>li>ul>li>a:hover,
						.gNaviMenu2+ul>li>a:hover{
							background-color:white;
						}

		/*ヘッダーの背景色･･････････････*/
		#gNavi_bg{
			z-index:940;
			position:fixed;
			top:0;
			left:0;
			height:80px;
			width:100%;
			background-color:white;
		}

		/*▲････････････････････････････*/
		.gArrow{
			display:inline-block;
			font-size:1.0rem;
			color:blue;
			transform:rotate(90deg);			/*角度*/
			transition:'0.2s linear';			/*秒*/
			transform-origin:'center center';	/*軸（%指定あり）*/
		}

		/*テキストを選択不可に･･････････*/
		#gNavi *{
			user-select:none;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
		}

		/*シールド･･････････････････････*/
		#gShield{
			z-index:930;
			display:none;
			height:120%;/*スマホ対策*/
			width:600px;
			position:fixed;
			left:0;
			right:0;
			margin:auto;
			background-color:#fff105;
		}

/*固定メニュー･･･････････････････････････････････････････････*/
#fixNavi{
	z-index:920;
	display:none;
	position:fixed;
	bottom:0;
	width:100%;
}
	#fixNavi>ul{
		display:block;
		width:600px;
		margin:0 auto;
	}
		#fixNavi>ul>li{
			width:200px;
			float:left;
		}
			#fixNavi>ul>li>a{
				display:block;
				height:77px;/*合計で84px*/
				width:100%;
				padding-top:7px;
				text-align:center;
				text-align-last:center;
				font-weight:bold;
				border-top:solid 4px black;
				box-sizing:border-box;
				background-color:white;
			}
			#fixNavi>ul>li>a:hover{/*マウスオーバー時*/
				color:white;
				background-color:#666;
				opacity:1;
			}
			#fixNavi>ul>li>a.active{/*activeクラス*/
				color:white;
				background-color:black;
				opacity:1;
			}
			#fixNavi>ul>li>a,
			#fixNavi>ul>li>a *{
				line-height:1.2em;
			}
				#fixNavi>ul>li:first-of-type>a{
					border-right:solid 2px black;
				}
				#fixNavi>ul>li:nth-child(2)>a{
					border-left:solid 2px black;
					border-right:solid 2px black;
				}
				#fixNavi>ul>li:last-of-type>a{
					border-left:solid 2px black;
				}
				#fixNavi>ul>li>a>span{
					font-size:2.0rem;
				}

/*ページトップへボタン･･･････････････････････････････････････*/
#gBtnPageTop{
	z-index:910;
	position:fixed;
    right:0;
    bottom:0;/*btnPageTop()使用時は、bottom値はbtnPageTop()関数内で設定*/
    height:auto;
	width:100%;
	pointer-events:none;
}
	#gBtnPageTop>div{
	}
		#gBtnPageTop>div p{
			float:right;
            margin-right:30px;
		}
			#gBtnPageTop>div p a{
				pointer-events:auto;
                /*アイコンサイズはここで指定*/
                  height:64px;
                  width:64px;
			}

/*フッター･･･････････････････････････････････････････････････*/
footer{
	position:relative;
	z-index:900;
	width:100%;
	padding-top:10.0rem;
	background-color:white;
	clear:both;
}
	footer>address,
	footer>address div,
	footer>nav{
		width:600px;
		min-width:600px;
		max-width:600px;
	}
	footer>address{
		padding-top:1.1rem;
	}
		footer>address>p:last-of-type{/*(c) signifi all right reserved.*/
			margin-top:0.4rem;
			padding-bottom:4.7rem;
		}


/**************************************************************************************

    Main

***************************************************************************************/
#packageCore{
	overflow:hidden;
}

main{
	position:relative;
	z-index:1;
	overflow:hidden;
}

/*コンテンツ･････････････････････････････････････････････････*/
#contents{
	position:relative;
	height:auto;
}
	#contents article,
	#contents section{
		position:relative;
		height:auto;
		width:100%;
		margin:0 auto;
		overflow:hidden;
	}
		#contents article .baseArea,
		#contents section .baseArea{
			width:88%;
			margin:10.0rem auto 12.0rem auto;
		}

/*サブタイトル（Work、3つの事業など）･･･････････････････････*/
h2.subTitle{
	display:flex;
	justify-content:center;
	width:auto;
	margin-top:14.0rem;
	margin-bottom:4.0rem;
}
	h2.subTitle>div{
	}
		h2.subTitle>div p{
			text-align:center;
			text-align-last:center;
			font-weight:bold;
			letter-spacing:0.1em;
		}
		h2.subTitle>div p:first-of-type{/*Work*/
			padding:0 0.6em;/*左右に～～用追加スペース*/
			margin-bottom:0.1em;
			font-size:5.0rem;
			line-height:1.8em;/*～～までの距離*/
			background:url(images/line_nami.png) center bottom repeat-x;/*～～*/
		}

/*緑色のボタン（MOREなど）･･････････････････････････････････*/
.btn_more{
	display:block;
	width:82%;
	margin:7.0rem auto 5.6rem auto;
	padding:0.8em 0;
	color:#8fc31f !important;
	font-size:2.6rem;
	font-weight:bold;
	text-align:center;
	text-align-last:center;
	border-radius:12.0rem;
	border:solid 6px black;
	box-sizing:border-box;
	background-color:white;
}
	#section01 .btn_more,
	#section02 .btn_more,
	#section03 .btn_more{
		margin:2.8rem auto 5.6rem auto;
	}
	#top #section04 .btn_more,
	#top #section07 .btn_more{/*黄色いボタン*/
		color:black !important;
		background-color:#fff105;
	}
		.btn_more>img.hp{/*HPアイコン*/
			margin:1.2rem auto auto 0.8rem;
		}


/**************************************************************************************

    ページネーション

***************************************************************************************/
.pagenation{
    margin:0 auto;
}
	.pagenation:after,.pagenation ul:after{
		clear:both;
		content:".";
		display:block;
		height:0;
		visibility:hidden;
	}
	.pagenation ul{
		margin:0;
	}
		.pagenation li{
			float:left;
			list-style:none outside none;
			margin-left:3px;/*アイコン間の余白*/
		}
		.pagenation li:first-child{
			margin-left:0;
		}
	.pagenation li.active,
	.pagenation li a{/*アクティブ＆他ページのアイコン（共通）*/
		border-radius:3px;
		color:#fff;
		font-size:2.3rem;
		font-weight:bold;
		padding:1.0rem 2.0rem;
	}
	.pagenation li.active{/*アクティブ・アイコン*/
		background-color:#999;
		cursor:not-allowed;
	}
		.pagenation li a{/*他ページ・アイコン*/
			display:block;
			background:none repeat scroll 0 0 #ccc;
			text-decoration:none;
			text-shadow:0 -1px 0 rgba(0,0,0,0.2);
		}
		.pagenation li a:hover{/*他ページ・アイコン（マウスオーバー時）*/
			background-color:#444;
			opacity:0.8;
			transition-duration:500ms;
			transition-property:all;
			transition-timing-function:ease;
		}



/*******************************************

    pc・mobileの切り替え

********************************************/
.pc{
	display:block;
}
	.pc_flex{
		display:flex;
	}
.mobile{
	display:none;
}



/**************************************************************************************

    メディアクエリ

***************************************************************************************/
/*画面幅1001px以上*/
@media(min-width:1001px){
}

/*501以上 ～ 1000px以下*/
@media(min-width:501px) and (max-width:1000px){
}

/*500px以下（モバイル対応）*/
@media(max-width:500px){





	/*******************************************

		pc・mobileの切り替え

	********************************************/

	/*マウスオーバー････････････････*/
	a:hover,
	.pointer:hover{
		opacity:1.0;
	}

	/*pc・mobileの切り替え･････････*/
	.pc,
	.pc_flex{
		display:none;
	}
	.mobile{
		display:block;
	}
}