@charset 'UTF-8';

/*---最後に非表示に-----*/
.resize{
	position:fixed;
	left:0;
	bottom:0;
	color:#555;
	z-index:1;
}

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

共通

-----------------------------------------------------------------------------*/
*{
	box-sizing: border-box;
	transition: all .2s;
}

body{
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	color: #333;
	background: #fff;
	font-size: 100%;
	line-height: 1.7;
	font-family: "Yu Gothic", "游ゴシック体", "游ゴシック", YuGothic,
	"Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック",
	"MS PGothic", sans-serif, sans-serif;
}
/*---装飾マーカー----*/
.marker_y{background: linear-gradient(transparent 65%, #ffff66 65%);}

/*---画像のサイズ----*/
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
/*	pointer-events: none;ダウンロード禁止*/
}

a:hover{
	transition: all .3s;
	opacity:.8;
}

/*---改行指定----*/
.spbreak{
	display:block;
}
.pcbreak{
	display:none;
}
@media screen and (min-width:768px){
.spbreak{
	display:none;
	}
.pcbreak{
	display:block;
	}
}

/*---中央揃えの指定---*/
.centerPosition{
	text-align:center;
}

#wrapper{
	max-width:100%;
	margin: 0 auto;
}

/*--文字のサイズ指定--------------------------------*/
.font_common{
	font-size:.95rem;
	margin: 0 auto;
	line-height:1.8;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.font_common{
	font-size:1.12rem;
	max-width:900px;

	}
}
@media screen and (min-width:1281px){
.font_common{
	font-size:1.18rem;
	max-width:950px;
	margin: 0 auto;
	}
}

/*--ワイド指定共通--------------------------------*/
.main_contents{
	box-sizing: border-box;
	max-width:90%;
	margin: 0 auto;
	position:relative;
	/*background:rgba(200,200,200,.6);*/
}
/*--タブレット--*/
@media all and (min-width: 769px) and (max-width: 1280px) {
.main_contents{
	max-width:95%;
	}
}
/*--PC--*/
@media screen and (min-width:1281px){
.main_contents{
	max-width:1080px;

	}
}


/*--見出しの設定---------------------------------*/
.main_title{
	text-align:center;
	font-size:1.35rem;
	font-weight:700;
	margin: 0 auto;
	line-height:1.2;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.main_title{
	font-size:1.7rem;
	}
}
@media screen and (min-width:1281px){
.main_title{
	font-size:2.2rem;
	}
}

/*--小見出しの設定-------------------------------*/

.arr_left:before{
	content:"＼";
	padding-right:5px;
}
.arr_right:after{
	content:"／";
	padding-left:5px;
}
/*--スクロール促す-------------------------------*/
.scrolldown{
	position:absolute;
	bottom:1%;
	right:50%;
	animation: arrowmove 1s ease-in-out infinite;
}
@keyframes arrowmove{
	0%{bottom:1%;}
	50%{bottom:3%;}
	100%{bottom:1%;}
}

.scrolldown span{
	position: absolute;
	left:-20px;
	bottom:10px;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;

/*----個別設定箇所---*/
	color: #333;
}

.scrolldown:before {
	content: "";
	position: absolute;
	bottom: 0;
	right: -6px;
	width: 1px;
	height: 20px;
	transform: skewX(-31deg);
/*----個別設定箇所---*/
	background: #333;
}

.scrolldown:after{
	content:"";
	position: absolute;
	bottom:0;
	right:0;
	width:1px;
	height: 50px;
/*----個別設定箇所---*/
	background: #333;
}

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

ボタンの指定

-----------------------------------------------------------------------------*/
.btn_master{
}

.btn{
	position: relative;
	text-decoration: none;
	display: inline-block;
	padding: 10px 40px 10px 30px;
	border-radius:7px;
	text-align: center;
	outline: none;
	transition: ease .2s;
	font-weight:700;
/*-----設定より差し替え（色味）-----*/
	border:1px solid #ccc;
	color:#333;
	font-size:.95rem;
}

@media screen and (min-width:1281px){
.btn{
	font-size:1rem;
	}
}

.btn:hover{
/*-----設定より差し替え（色味）-----*/
	background:#ccc;
}

.btnarrow::after{
	content: '';
	position: absolute;
	top:40%;
	right: 13px;
	width: 7px;
	height: 7px;
	transform: rotate(45deg);
	transition: all .3s;
/*-----設定より差し替え（色味）-----*/
	border-top: 1px solid #333;
	border-right: 1px solid #333;
}

.btnarrow:hover::after{
	right: 18px;
}

/*--外部リンクアイコン表示の設定-----------------*/

/*---テキスト用----*/
a.blank_for_text[target="_blank"] {
		display: inline-block;
		padding-right: 6%;
		background: url(../images/arrow_blank.png) no-repeat 95% center ;
		background-size:10px;
		color:#333;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
a.blank_for_text[target="_blank"] {
	padding-right: 4%;
	}
}
@media screen and (min-width:1281px){
a.blank_for_text[target="_blank"] {
	padding-right: 2%;
	}
}

/*---ボタン用----*/
a.blank_for_btn[target="_blank"] {
		display: inline-block;
		padding-left: 6%;
		background: url(../images/arrow_blank.png) no-repeat 5% center ;
		background-size:10px;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
a.blank_for_btn[target="_blank"] {
		padding-left: 4%;
	}
}
@media screen and (min-width:1281px){
a.blank_for_btn[target="_blank"] {
	padding-left: 2%;
	}
}	
/*----------------------------------------------------------------------------

アンカーリンクの指定

-----------------------------------------------------------------------------*/
.ancLink{
	background:#fff;
}
a.jump_point {
	height: 1px;
	display: block;
	padding-top: 40px;
	margin-top: -40px;
}
/*----------------------------------------------------------------------------

TOPへ戻るの指定

-----------------------------------------------------------------------------*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#333;
	padding:0px 8px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:1.4rem;
	transition:all 0.3s;
	border-radius: 5px;
	}
/*iphone・ipad(サファリ)*/
_::-webkit-full-page-media, _:future, :root #page-top a{
		padding:0px 18px 8px;
	}

#page-top a:hover{
	background: #777;
	color:#fff;
}

#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	opacity: 0;
	transform: translateX(100px);
}

/*　左の動き　*/
#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}
@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/
#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}
/*----------------------------------------------------------------------------

ヘッダー・グロナビ

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

#header{
	background:#fff;
	padding:1em;
	box-sizing: border-box;

	margin: 0 auto;
	max-width: calc(100vw - 0px);
}
#header h1{
	position:relative;
	z-index:3;
}
@media screen and (min-width:980px){
#header{
	padding:1.5em 1em;
	}
}

#header h1 img{
	zoom:0.6;
	-moz-transform: scale(0.6);
	min-height: 50px;
}

#header h1 a:hover{
	opacity:.5;

}

@media screen and (min-width:980px){

#header h1{
	max-width:350px;
}

#header h1 img{
	zoom:0.7;
	-moz-transform: scale(0.7);
/*	min-height: 65px;*/
	}
}
@media all and (min-width: 981px) and (max-width: 1280px) {
#header h1{
	max-width:220px;
	}
}

#g-nav{
	position:fixed;
	z-index: 999;
	/*ナビのスタート位置と形状*/
	top:-120%;
	left:0;
	width:100%;
	height: 100vh;/*ナビの高さ*/
	background:#f3f3f3;
	/*動き*/
	transition: all 0.3s;
}
@media screen and (min-width:980px){
#g-nav{
	/*ナビのスタート位置と形状*/
	position:relative;
	top:0%;
	left:0%;
	height: auto;
	background:none;
	z-index:0;
	}
}


/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
	top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
	/*ナビの数が増えた場合縦スクロール*/
	position: fixed;
	z-index: 999; 
	width: 100%;
	height: 100vh;/*表示する高さ*/
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}


/*ナビゲーション*/
#g-nav ul {
	/*ナビゲーション天地中央揃え*/
	position: absolute;
	z-index: 999;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}
@media screen and (min-width:980px){
#g-nav ul {
	/*ナビゲーション天地中央揃え*/
	position: static;
	top:-0%;
	right:0%;
	transform: translate(0%,-0%);
	display:flex;
	background:none;
	margin: -40px 0 0 auto;
	justify-content:space-between;
	max-width:930px;
	}
}
@media all and (min-width: 981px) and (max-width: 1280px) {
#g-nav ul {
	max-width:75%;

	}
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
	text-align: center;
	margin:10px 0 ;
	
}
@media screen and (min-width:980px){
#g-nav li{
	margin:0px 0px 0 0;
	}
}

#g-nav li a{
	color: #333;
	text-decoration: none;
	padding:10px ;
	font-size:.85em;
	display: block;
	letter-spacing:2px;
}
#g-nav li:last-child a{
	background:#3296FF;
	color:#fff;
	padding:8px 50px;
	text-align:center;
	border-radius:100px;
	margin:0px 0px 0 0px;
}
@media all and (min-width: 981px) and (max-width: 1280px) {
#g-nav li a{
	padding:10px 15px;
	}
#g-nav li:last-child a{
	padding:5px 20px;
	}
}

#g-nav li a:hover{
	color:#3296FF;
}
#g-nav li:last-child a:hover{
	background:#FF007F;
	border-bottom:none;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
	width: 50px;
	height:50px;
}
@media screen and (min-width:980px){
.openbtn{
	display:none;
	}
}

/*×に変化*/	
.openbtn span{
	display: inline-block;
	transition: all .3s;
	position: absolute;
	left: 14px;
	height: 1px;
	border-radius: 2px;
	background-color: #666;
	width: 45%;
}

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	 width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}


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

キャリアパス

-----------------------------------------------------------------------------*/
.recruit_div{
	background:#f4f4f4;
	padding:10em 0 ;
}
@media screen and (max-width:768px){
.recruit_div{
	padding:8em 0 ;
	}
}

.recruit_text{
	text-align:center;
	font-size:3.6rem;
	color:#333;
	line-height:1.1;
	font-weight:700;
}
@media screen and (max-width:768px){
.recruit_text{
	font-size:2.2rem;
	}
}
.recruit_btn{
	color:#fff;
	max-width:400px;
	font-size:1.3rem;
	text-align:center;
	margin: 60px auto 0;
}
@media screen and (max-width:768px){
.recruit_btn{
	max-width:250px;
	font-size:1rem;
	}
}

.recruit_btn span{
	display:block;
	font-size:.7rem;
	margin:-7px 0 0;
}

.recruit_btn a{
	text-decoration:none;
	text-align:center;
	color:#fff;
	font-weight:500;
	display:block;
	background:#3296FF;
	border-radius:100px;
	padding:.6em 0em;
}
.recruit_btn a:hover{
	background:#FF007F;
}

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

フッター

-----------------------------------------------------------------------------*/
#footer{
	background:#fff;
	padding:5em 0 ;
	font-weight:700;
}
@media screen and (max-width:768px){
#footer{
	padding:3em 0 1em;
	}
}
.main_contents_ft{
	margin: 0 auto;
	width: 1240px;
	max-width: calc(100vw - 20px);
}

@media all and (min-width: 769px) and (max-width: 1280px) {
.main_contents_ft{
	width: 95%;
	max-width: calc(100vw - 20px);
	}
}

.footerFlex{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin:0 0 40px;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.footerFlex{
	flex-wrap:wrap;
	margin:0 0 40px;
	}
}


.footerFlex ul{
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	width:100%;
	justify-content:flex-end;
}
@media all and (min-width: 769px) and (max-width: 1280px) {
.footerFlex ul{
	width:100%;
	justify-content:space-between;
	margin:30px 0 ;
	}

}


.footerFlex ul li a{
	margin:0px 0px;
	color:#333;
	text-decoration:none;
	font-size:.85rem;
	padding:5px 15px;
	text-align:center;
	font-weight:700;
	display:block;
}
.footerFlex ul li a:hover{
	/*background:rgba(50,50,50,.1);*/
		color:#3296FF;
}

.footerFlex ul li:last-child a{
	background:#3296FF;
	color:#fff;
	padding:8px 50px;
	text-align:center;
	border-radius:100px;
	margin:0px 0px 0 10px;
	border-bottom:none;
}

.footerFlex ul li:last-child a:hover{
	background:#FF007F;
}

@media all and (min-width: 769px) and (max-width: 1280px) {
.footerFlex ul li a{
	font-size:.8rem;
	}
}


@media screen and (max-width:768px){
.main_contents_ft{
	max-width:93%;
}
.footerFlex{
	display:block;

}

.footerFlex p{
	text-align:center;
	padding:20px 0 ;
}

.footerFlex ul{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:start;

}
.footerFlex ul li{
	width:calc(90% / 2);
	margin:0 0px;


}
.footerFlex ul li:last-child {
	width:calc(100% / 1);

}
.footerFlex ul li a{
	margin:5px 0 ;
	color:#333;
	text-decoration:none;
	font-size:.9rem;
	text-align:left;
	font-weight:700;
	display:block;
}

.footerFlex ul li:last-child a{
	padding:20px 0px;
	margin: 20px auto 0;
	max-width:50%;

	}
}

/*----------アクセス--------------------*/
.footer_access{
	display:flex;
	font-size:.9rem;

}
.footer_access dt{
	margin:0 40px 0px 0;
}
@media screen and (max-width:768px){
.footer_access dt{
	margin:0 0px 0px 0;
	padding:0 55px 0 0;
	font-size:.8rem;
	letter-spacing:2px;
	}
.footer_access dd{
	font-size:.8rem;
	}
}

.footer_access a{
	color:#333
}

.footer_access dd span{
	display:inline-block;
	background:url(../images/pin.png) no-repeat 7% 50%;
	padding:0 0px 0 15px;
	margin:0 5px;
}
.end_access{
	margin:20px 0 0;
}


/*----------SNSアイコン---------------*/
.follow_icon{
	display:flex;
	justify-content:flex-end;
	margin:30px 0 0;
	align-items:center;
}
.follow_icon li:first-child{
	margin:0 20px 0 0;
	line-height:1;
}
.follow_icon li{
	margin:0 10px 0 0;
}
.follow_icon li:last-child{
	margin:0 0px 0 0;
}


/*---------コピーライト＆リンク-----------*/

.copyRIght{
	margin:30px 0 0;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
@media screen and (max-width:768px){
.copyRIght{

	display:block;
	text-align:center;
	}
}

.copyRIght a{
	font-size:.8rem;
	color:#333;
	text-decoration:none;
}
.copyRIght ul{
	display:flex;
}
.copyRIght ul li{
	margin:0 30px 0 0;
}
.copyright{
	font-size:.75rem;
}
@media screen and (max-width:768px){
.copyright{
	font-size:.75rem;
	margin:30px 0 0;
	}
}

@media screen and (max-width:768px){
.copyRIght ul{
	text-align:left;
	max-width:80%;
	margin:-15px 0 0;
}
.copyRIght ul li{
	margin:0px 10px 0 0;
	}
.copyRIght ul li:last-child{
	margin:0px 0px 0 0px;
	}
}


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

スクロールで表示

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

.scroll_up {
  transition: 0.5s ease-in-out;
  transform: translateY(60px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}
.scroll_left {
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

.scroll_right {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(30px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}

.scroll_right.on {
  opacity: 1;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  transform: translateX(0);
}

.timing02 {transition-delay: .1s;}
.timing03 {transition-delay: .2s;}
.timing04 {transition-delay: .3s;}
.timing05 {transition-delay: .4s;}
.timing06 {transition-delay: .5s;}
.timing07 {transition-delay: .6s;}
.timing08 {transition-delay: .7s;}