@charset "UTF-8";
/* CSS Document */

html{ background: #fff;}

body{
	color: #000;
/*	background: #f7f9f9;*/
	background: #002b62;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Noto Sans JP';
	font-weight: 500;
	font-size:14px;
	line-height: 2.2;
	margin: 0px;
	padding: 0px;
	position:relative;
	overflow-x: hidden;
	letter-spacing: 2px;
	font-feature-settings: "palt"
}



img {
	max-width: 100%;
	height: auto;
	vertical-align:bottom;
    -webkit-backface-visibility: hidden;
}

#symbol{
	display: none;
}

a:focus, *:focus { outline:none; }

::selection {
    background: #000;
    color: #fff;
}

::-moz-selection {
    background: #000;
    color: #fff;
}


.inview_anime{
	opacity: 0;
	transform: translateY(40px);
}

.astart .inview_anime_on{
	opacity: 0;
	transform: translateY(40px);
	animation: inview_animetion 1s forwards cubic-bezier(.07,.68,.41,1) .2s;
}

@keyframes inview_animetion {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);	
	}
}



#wrapper{
	position: relative;
	height: auto;
	width: 100%;
	overflow: clip;
	z-index: 10000;
	opacity: 0;
}

.load #wrapper{
	opacity: 1;
}

.flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

}

.anchor{
    display: block;
    padding-top: 100px; /* 調整したい高さ（固定ヘッダーの高さ） */
    margin-top: -100px; /* heightと同じ分のネガティブマージン */
}


/* ******************** fixedbg ******************** */

#fixedbg{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	background: #f7f9f9;
	opacity: 0;
}

.load #fixedbg{
	opacity: 1;
}

/* ******************** fixedbg ******************** */

/* ******************** loading ******************** */

#loading{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000000;
	top: 0;
	left: 0;
	overflow: hidden;
	
}




#loading div figure{
	animation: circlerote 15s infinite linear 0s;
}

#loading div figure i{
	display: block;
	animation: loadscale 3s infinite cubic-bezier(.07,.68,.41,1) 0s;
}

#loading div img{
	width: 100%;
	height: 100%;
}

#loading ul{
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	z-index: 1;
}

#loading ul li{
	position: relative;
	width: 25%;
	height: 100%;
}

#loading ul li::before{
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top:0;
	right: 0;
	background-color: #002b62;
}

.load #loading ul li:nth-child(1)::before{
	width: 100%;
	animation: width_0 .7s forwards cubic-bezier(.07,.68,.41,1) .4s;
}

.load #loading ul li:nth-child(2)::before{
	width: 100%;
	animation: width_0 .7s forwards cubic-bezier(.07,.68,.41,1) .5s;
}

.load #loading ul li:nth-child(3)::before{
	width: 100%;
	animation: width_0 .7s forwards cubic-bezier(.07,.68,.41,1) .6s;
}

.load #loading ul li:nth-child(4)::before{
	width: 100%;
	animation: width_0 .7s forwards cubic-bezier(.07,.68,.41,1) .7s;
}


.switching.load #loading ul li::before{
	width: 0%;
	animation: width_100 .7s forwards cubic-bezier(.07,.68,.41,1) 0s;
}

/*
#loading div{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 80px;
	height: 80px;
	transform-origin: 50% 50%;
	transform: translate(-50%,-50%);
	z-index: 100;
}

.load #loading div{
	opacity: 1;
	transform-origin: 50% 50%;
	animation: load_figure .4s forwards cubic-bezier(.07,.68,.41,1) 0s;
}

*/

.switching.load .spinner-box {
	display: none;
}

.spinner-box {
	position: absolute;
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	left: 50%;
	top: 50%;
	z-index: 100;
	transform: translate(-50%,-50%);
}

.load .spinner-box {
	opacity: 1;
	transform-origin: 50% 50%;
	animation: load_figure .4s forwards cubic-bezier(.07,.68,.41,1) 0s;
}


.circle-border {
  width: 100px;
  height: 100px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(63,249,220);
  background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);
  animation: spin .8s linear 0s infinite;
}

.circle-core {
  width: 100%;
  height: 100%;
  background-color: #002b62;
  border-radius: 50%;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to{
    transform: rotate(359deg);
  }
}

/* ******************** loading ******************** */



/* ******************** header ******************** */

header{
	position: fixed;
	background-color: #FFF;
	width: 100%;
	height: 72px;
	z-index: 100000;
}

header #logo{
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
	width: 250px;
	top: 26px;
	left: 35px;
	z-index: 500;
}

header #logo h1{
	width: 80px;
	line-height: 0;
	vertical-align: top;
}

header #logo h2{
	width: 160px;
	line-height: 1;
	padding-top: 3px;
	letter-spacing: 1px;
}

header #logo h2 a{
	color: #000;
	font-weight: 600;
}

/* ******************** header ******************** */


/* ******************** header menu ******************** */

header #bt_entry{
	position: absolute;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	width: 280px;
	height: 100%;
	top: 0;
	right: 0;
	z-index: 1000;
}

header #bt_entry a{
	transition: all 500ms 0s ease;
	position: relative;
	display: block;
	width: 50%;
	height: 100%;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 600;
	overflow: hidden;
}

header #bt_entry a::before,
header #bt_entry a::after{
	transition: all 500ms 0s ease;
	content: "";
	position: absolute;
	display: block;
	width: 50%;
	height: 100%;
	top:0;
}

header #bt_entry a.bte_new{
	color: #FFF;
	background-color: #419b91;
}

header #bt_entry a.bte_new::before,
header #bt_entry a.bte_new::after{
	background-color: #286ebe;
}

header #bt_entry a.bte_career{
	color: #FFF;
	background-color: #002b62;
}

header #bt_entry a.bte_career::before,
header #bt_entry a.bte_career::after{
	background-color: #000;
}


header #bt_entry a::before{
	left: 0;
	z-index: 10;
}

header #bt_entry a::after{
	right: 0;
	z-index: 20;
}



header #bt_entry a:hover::before{
	left: -100%;
}

header #bt_entry a:hover::after{
	right: -100%;
}

header #bt_entry a span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 100;
	white-space: nowrap;
	text-align: center;
}



header nav ul{
	position: absolute;
	display: block;
	right : 300px;
	bottom: 0;
}

header nav li{
	display: inline-block;
	padding: 7px 0px;
	cursor: pointer;
}

header nav li h2{
	transition: all 500ms 0s ease;
	position: relative;
	display: inline-block;
	padding: 8px 18px;
	white-space: nowrap;
	line-height: 1;
	letter-spacing: 0px;
}

header nav li h2 a{
	transition: all 500ms 0s ease;
	display: block;
	color: #000;
}

header nav li h2::before{
	transition: all 500ms 0s ease;
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 0%;
	background-color: #002b62;
	bottom: 0;
	left: 0;
	z-index: -1;
	opacity: .8;
}

.pc header nav li.active h2::before{
	height: 100%;
}

.pc header nav li.active h2,
.pc header nav li.active h2 a{
	color: #FFF;
}

body#BUSINESS header nav li#bt_business h2,
body#PERSON header nav li#bt_person h2,
body#CAREER header nav li#bt_careerpath h2,
body#INSTITUTION header nav li#bt_institution h2,
body#RECRUIT header nav li#bt_recruit h2{
	background-color: #002b62;
	color: #FFF;
}

body#BUSINESS header nav li#bt_business h2 a,
body#PERSON header nav li#bt_person h2 a,
body#CAREER header nav li#bt_careerpath h2 a{
	color: #FFF;
}



header nav li article{
	transition: all 500ms 0s ease;
	position: fixed;
	display: block;
	width: 100%;
	height: 0px;
	top: 72px;
	left: 0px;
	overflow: clip;
	background-color: #002b62;
}

header nav li.active article{
	height: 190px;
	z-index: 100;
}

header nav li article div.droparea{
	position: absolute;
	width: 430px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	left: 50%;
	top: 52%;
	transform: translate(-50%,-50%);
}


header nav li#bt_careerpath article div.droparea{
	width: 660px;
}

header nav li#bt_recruit article div.droparea{
	width: 890px;
}

header nav li article div.droparea div.dropinner{
	width: 200px;
	text-align: center;
}

header nav li article div.droparea div.dropinner a{
	color: #FFF;
	display: block;
	font-size: 15px;
}

header nav li article div.droparea div.dropinner figure{
	display: block;
	width: 100%;
	height: 70px;
	background-size: cover;
	overflow: hidden;
}

header nav li article div.droparea div.dropinner a figure div{
	transition: all 500ms 0s ease;
	width: 100%;
	height: 100%;
}

.pc header nav li article div.droparea div.dropinner a:hover figure div{
	transform: scale(1.1);
}

header nav li article div.droparea div.dropinner figure i{
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
}

header nav li article div.droparea div.dropinner span{
	display: inline-block;
	padding-top: 5px;
	line-height: 1.2;
}

/* 社員紹介 */
header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure div{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i{
	width: 25%;
	
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_1{
	background-image: url("../../person/img/index/p_index_1.webp");
	background-position: right top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_2{
	background-image: url("../../person/img/index/p_index_2.webp");
	background-position: left top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_3{
	background-image: url("../../person/img/index/p_index_3.webp");
	background-position: right top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_4{
	background-image: url("../../person/img/index/p_index_4.webp");
	background-position: left top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_5{
	background-image: url("../../person/img/index/p_index_5.webp");
	background-position: right top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_6{
	background-image: url("../../person/img/index/p_index_6.webp");
	background-position: right top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_7{
	background-image: url("../../person/img/index/p_index_7.webp");
	background-position: right top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_8{
	background-image: url("../../person/img/index/p_index_8.webp");
	background-position: left top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_9{
	background-image: url("../../person/img/index/p_index_9.webp");
	background-position: center top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_10{
	background-image: url("../../person/img/index/p_index_10.webp");
	background-position: left top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_11{
	background-image: url("../../person/img/index/p_index_11.webp");
	background-position: right top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_12{
	background-image: url("../../person/img/index/p_index_12.webp");
	background-position: right top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_13{
	background-image: url("../../person/img/index/p_index_13.webp");
	background-position: left top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_14{
	background-image: url("../../person/img/index/p_index_14.webp");
	background-position: right top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_15{
	background-image: url("../../person/img/index/p_index_15.webp");
	background-position: left top;
}

header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i.drop_person_16{
	background-image: url("../../person/img/index/p_index_16.webp");
	background-position: left top;
}



header nav li#bt_person article div.droparea div.dropinner:nth-of-type(2) figure i{
	background-image: url("../img/p_questionnaire.webp");
	background-position: center top;
}

/* キャリアパス */

header nav li#bt_careerpath article div.droparea div.dropinner:nth-of-type(1) figure i{
	background-image: url("../img/p_careerpath.webp");
	background-position: center top;
}

header nav li#bt_careerpath article div.droparea div.dropinner:nth-of-type(2) figure.p_m_1 i{
	background-image: url("../img/p_m_1.webp");
	background-position: center top;
}

header nav li#bt_careerpath article div.droparea div.dropinner:nth-of-type(2) figure.p_m_2 i{
	background-image: url("../img/p_m_2.webp");
	background-position: center top;
}

header nav li#bt_careerpath article div.droparea div.dropinner:nth-of-type(3) figure.p_p_1 i{
	background-image: url("../img/p_p_1.webp");
	background-position: center top;
}

header nav li#bt_careerpath article div.droparea div.dropinner:nth-of-type(3) figure.p_p_2 i{
	background-image: url("../img/p_p_2.webp");
	background-position: center top;
}

header nav li#bt_careerpath article div.droparea div.dropinner:nth-of-type(3) figure.p_p_3 i{
	background-image: url("../img/p_p_3.webp");
	background-position: center top;
}

header nav li#bt_careerpath article div.droparea div.dropinner:nth-of-type(3) figure.p_p_4 i{
	background-image: url("../img/p_p_4.webp");
	background-position: center top;
}

header nav li#bt_careerpath article div.droparea div.dropinner:nth-of-type(3) figure.p_p_5 i{
	background-image: url("../img/p_p_5.webp");
	background-position: center top;
}


/* 環境・制度 */

header nav li#bt_institution article div.droparea div.dropinner:nth-of-type(1) figure i{
	background-image: url("../img/p_training.webp");
	background-position: center top;
}

header nav li#bt_institution article div.droparea div.dropinner:nth-of-type(2) figure i{
	background-image: url("../img/p_welfare.webp");
	background-position: center top;
}


/* 環境・制度 */

header nav li#bt_recruit article div.droparea div.dropinner:nth-of-type(1) figure i{
	background-image: url("../img/p_recruit.webp");
	background-position: center top;
}

header nav li#bt_recruit article div.droparea div.dropinner:nth-of-type(2) figure i{
	background-image: url("../img/p_career.webp");
	background-position: left top;
}

header nav li#bt_recruit article div.droparea div.dropinner:nth-of-type(3) figure i{
	background-image: url("../img/p_disability.webp");
	background-position: center top;
}

header nav li#bt_recruit article div.droparea div.dropinner:nth-of-type(4) figure i{
	background-image: url("../img/p_faq.webp");
	background-position: center top;
}




@media screen and (max-width: 1250px) {

	header #logo{
		width: 230px;
		top: 27px;
		left: 27px;
	}

	header #logo h1{
		width: 60px;
	}

	header #logo h2{
		width: 160px;
		font-size: 12px;
		padding-top: 1px;
	}
	
	/* ******************** header menu ******************** */

	header #bt_entry{
		width: 200px;
	}
	
	header #bt_entry a{
		font-size: 14px;
	}
	
	header nav ul{
		right : 210px;
	}

	header nav li h2{
		padding: 8px 10px;
	}

	/* ******************** header menu ******************** */


}



@media screen and (max-width: 1050px) {
	
	/* ******************** header ******************** */

	header{
		height: 56px;
	}

	header #logo{
		top: 20px;
		left: 20px;
	}

	

	
	/* ******************** header menu ******************** */

	header #bt_entry{
		position: absolute;
		width: 240px;
		height: 100%;
		top: 0;
		right: 56px;
		z-index: 1000;
	}

	
	
	header nav{
		transition: all 500ms 0s ease;
		position: fixed;
		display: block;
		width: 100%;
		height: 0% ;
		top: 56px;
		left: 0px;
		overflow: hidden;
		background-color: #002b62;
	}
	
	header nav.active{
		height: calc(100% - 56px) ;
	}
	
	header nav section{
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: scroll;
	}
	
	
	
	header nav ul{
		position: static;
		display: block;
		right : 0px;
		bottom: 0;
		width: 100%;
		height: auto;
		padding: 30px 6% 100px;
	}
	
	header nav li,
	header nav li:nth-child(1),
	header nav li:nth-child(2),
	header nav li:nth-child(3),
	header nav li:nth-child(4){
		display: block;
		width: 100%;
		padding: 7px 0px;
		cursor: auto;
		border-bottom: #406089 solid 1px;
	}

	header nav li h2{
		transition: all 500ms 0s ease;
		position: relative;
		display: block;
		padding: 0px;
		font-size: 20px;
		white-space: nowrap;
		line-height: 1;
	}

	header nav li h2::before{
		transition: all 500ms 0s ease;
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 0%;
		background-color: #002b62;
		bottom: 0;
		left: 0;
		z-index: -1;
		opacity: .8;
	}

	header nav li h2 p,
	header nav li h2 a{
		transition: all 500ms 0s ease;
		position: relative;
		display: block;
		color: #FFF;
		padding: 20px 0px 20px;
		cursor: pointer;
		
	}
	
	header nav li h2 a::before{
		content: "";
		position: absolute;
		display: block;
		width: 16px;
		height: 16px;
		border-top: #FFF solid 1px;
		border-right: #FFF solid 1px;
		transform: rotate(45deg);
		right: 15px;
		top: 23px;
		z-index: 10;
	}
	
	header nav li h2 p::before,
	header nav li h2 p::after{
		transition: all 500ms 0s ease;
		content: "";
		position: absolute;
		display: block;
		background-color: #FFF;
	}
	
	header nav li h2 p::before{
		width: 18px;
		height: 1px;
		background-color: #FFF;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}
	
	header nav li h2 p::after{
		width: 1px;
		height: 19px;
		background-color: #FFF;
		right: 18px;
		top: 50%;
		transform: translateY(-50%);
	}
	
	header nav li.active h2 p::before{
		transform: translateY(-50%) rotate(180deg);
	}
	
	header nav li.active h2 p::after{
		transform: translateY(-50%) rotate(270deg);
	}

	.pc header nav li.active h2::before{
		height: 16px;
	}

	.pc header nav li.active h2,
	.pc header nav li.active h2 a{
		color: #FFF;
	}

	body#BUSINESS header nav li#business h2 a,
	body#PERSON header nav li#bt_person h2,
	body#INSTITUTION header nav li#bt_institution h2,
	body#RECRUIT header nav li#bt_recruit h2{
		background-color: #002b62;
		color: #FFF;
	}



	header nav li article{
		transition: all 500ms 0s ease;
		position: relative;
		display: grid; 
		width: 100%;
		height: 0;
		/* max-height: 0px; */
		grid-template-rows: 0fr;
		height: auto;
		top: auto;
		left: auto;
		
		background-color: #002b62;
		padding-right: 40px;
	}

	header nav li.active article{
		height: auto;
		/* max-height: 1000px; */
		grid-template-rows: 1fr;
		z-index: 100;
	}

	header nav li article div.droparea{
		position: relative;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		left: auto;
		top: auto;
		transform: translate(0%,0%);
		padding: 20px 0px;
		overflow: hidden;
		margin-bottom: 20px;
	}

	header nav li#bt_careerpath article div.droparea,
	header nav li#bt_recruit article div.droparea{
		width: 100%;
	}

	header nav li#bt_careerpath article div.droparea br{
		display: none;
	}

	header nav li article div.droparea div.dropinner{
		width: 48%;
		text-align: left;
		padding-bottom: 20px;
	}
	
	

	header nav li article div.droparea div.dropinner a{
		color: #FFF;
		width: 100%;
	}

	header nav li article div.droparea div.dropinner figure{
		display: block;
		width: 100%;
		height: 100px;
		background-size: cover;
		overflow: hidden;
	}

	header nav li article div.droparea div.dropinner a figure div{
		transition: all 500ms 0s ease;
		width: 100%;
		height: 100%;
	}

	.pc header nav li article div.droparea div.dropinner a:hover figure div{
		transform: scale(1.1);
	}

	header nav li article div.droparea div.dropinner figure i{
		display: block;
		width: 100%;
		height: 100%;
		background-size: cover;
	}

	
	



	/* ******************** header menu ******************** */
	
	
	
	
	
	/* ******************** hanmenu ******************** */
	
	#hanmenu{
		position: absolute;
		display: block;
		width: 56px;
		height: 56px;
		right: 0;
		top: 0;
		overflow: hidden;
		background-color: #002b62;
		cursor: pointer;
	}
	
	 #hanmenu:hover .panel_btn{
		transition: all 500ms 0s ease;
		background-color: rgba(255,255,255,.2);
	}
	
	.pc #hanmenu:hover .panel_btn{
		background-color: rgba(255,255,255,.1);
		width: 100%;
		height: 100%;
	}
	
	#hanmenu .panel_btn span{
		position: absolute;
		display: block;
		width: 26px;
		height: 2px;
		background-color: #FFF;
		left: 15px;
	}
	
	#hanmenu .panel_btn span:nth-of-type(1){
		top: 18px;
	}
	
	#hanmenu .panel_btn span:nth-of-type(2){
		top: 27px;
	}
	
	#hanmenu .panel_btn span:nth-of-type(3){
		bottom: 18px;
	}
	
	#hanmenu.active .panel_btn span:nth-of-type(1){
		animation: hanmenu_1 .7s forwards cubic-bezier(.07,.68,.41,1) 0s;
	}
	
	#hanmenu.active .panel_btn span:nth-of-type(2){
		animation: hanmenu_2 .7s forwards cubic-bezier(.07,.68,.41,1) 0s;
	}
	
	#hanmenu.active .panel_btn span:nth-of-type(3){
		animation: hanmenu_3 .7s forwards cubic-bezier(.07,.68,.41,1) 0s;
	}

	
	
	
	#hanmenu.active_off .panel_btn span:nth-of-type(1){
		animation: hanmenuoff_1 .7s forwards cubic-bezier(.07,.68,.41,1) 0s;
	}
	
	#hanmenu.active_off .panel_btn span:nth-of-type(2){
		animation: hanmenuoff_2 .7s forwards cubic-bezier(.07,.68,.41,1) 0s;
	}
	
	#hanmenu.active_off .panel_btn span:nth-of-type(3){
		animation: hanmenuoff_3 .7s forwards cubic-bezier(.07,.68,.41,1) 0s;
	}


	
	
	
	
	
	/* ******************** hanmenu ******************** */
	
	
	
	
}

/* 
@media screen and (max-width: 1050px) {
	

	header nav li article div.droparea{
		width: 380px;
	}

	header nav li#bt_recruit article div.droparea{
		width: 780px;
	}

	header nav li article div.droparea div.dropinner{
		width: 180px;
	}

	header #bt_entry{
		width: 180px;
	}

	header #bt_entry a{
		font-size: 12px;
	}
		

	header nav ul{
		right : 190px;
	}
	
	header nav li{
		padding: 5px 1px;
	}
	
	header nav li h2{
		font-size: 13px;
		padding: 8px 8px;
	}

} */





@media screen and (max-width: 768px) {

	/* ******************** header ******************** */

	

	header nav li#bt_careerpath article div.droparea br{
		display: inline-block;
	}
	
	/* ******************** header ******************** */
	
}


@media screen and (max-width: 560px) {
	
	
	header #logo{
		display: block;
		width: 140px;
		top: 12px;
		left: 15px;
	}

	header #logo h1{
		width: 60px;
	}

	header #logo h2{
		width: 100%;
		font-size: 12px;
		padding-top: 7px;
	}

	
	/* ******************** header menu ******************** */

	header #bt_entry{
		width: 200px;
	}

	header #bt_entry a {
		font-size: 13px;
	}
	
	header nav li.active article {
		/* height: 135px; */
		z-index: 100;
	}
	
	header nav li h2 {
		font-size: 18px;
	}
	
	
	header nav li article div.droparea {
		padding: 15px 0px;
	}
	
	
	header nav li article div.droparea div.dropinner figure{
		display: block;
		width: 100%;
		height: 70px;
		background-size: cover;
		overflow: hidden;
	}
	
	/* ******************** header menu ******************** */

}




@media screen and (max-width: 480px) {

	.only_480{
		display: inline-block;
	}
	
	.no_480{
		display: none;
	}
	
	
	
	/* ******************** header menu ******************** */

	header #bt_entry{
		position: fixed;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		width: 100%;
		height: 50px;
		top: auto;
		bottom: 0;
		right: 0;
		z-index: 1000;
	}
	
	header nav li.active article {
		height: auto;
		z-index: 100;
		padding-right: 0px;
	}
	
	header nav li article div.droparea{
		position: relative;
		width: 100%;
		display: block;
		padding: 15px 0px;
	}

	header nav li#bt_careerpath article div.droparea br{
		display: inline-block;
	}
	
	header nav li article div.droparea div.dropinner{
		width: 100%;
	}

	header nav li article div.droparea div.dropinner a{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		text-align: left;
		padding-bottom: 20px;
		font-size: 14px;
	}
	
	header nav li article div.droparea div.dropinner figure{
		width: 120px;
		height: 60px;
	}
	
	header nav li article div.droparea div.dropinner span{
		display: block;
		width : calc(100% - 140px) ;
		padding-bottom: 5px;
	}
	
	header nav li article div.droparea div.dropinner span i{
		white-space: nowrap;
	}
	

	header nav li#bt_person article div.droparea div.dropinner:nth-of-type(1) figure i{
		width: 33.3333333%;

	}
	
	header nav li#bt_person article div.droparea div.dropinner:nth-of-type(4) figure i{
		display: none;
	}

	
	/* ******************** header menu ******************** */
	
	
}



/* ******************** header menu ******************** */



/* ******************** common ******************** */

#contents{
	padding-top: 72px;
}

#contents.pb{
	padding-bottom: 200px;
}


main#main{
	position: relative;
	width: 100%;
	min-height: 350px;
	
}

main article{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
	top: 0;
}

main article div.maintxt{
	position: absolute;
	color: #FFF;
	width: 100%;
	top:50%;
	transform: translateY(-50%);
	z-index: 10000;
}

main article div.bg{
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-size: cover;
}

main article div.bg::before{
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.2);
}

main article h1{
	font-size: 40px;
	font-weight: 700;
	text-align: center;
	line-height: 1.6;
}

main article p{
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	line-height: 1;
}


figure.circlemove{
	position: absolute;
	width: 150px;
	height: 150px;
	opacity: .2;
	z-index: 200;
	right: 10px;
	bottom: -75px;
	
}

figure.circlemove div{
	animation: circlerote 30s infinite linear 0s;
}

.inner{
	width: 84%;
	max-width: 1400px;
	margin: 0 auto;
}

section#section_top  h2{
	padding: 130px 0px;
	font-size: 16px;
	line-height: 2;
}

section#section_top  h2 span{
	display: inline-block;
}

.bgw{
	background-color: #FFF;
}

.bgn{
	background-color: #002b62;
}

.first{
	margin-top: 130px;
}

.t_center{
	text-align: center;
}

#contents_footer{
	text-align: center;
	padding: 70px 0px 70px;
}

#contents_footer h1{
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	padding-bottom: 40px;
}

.contents_footer_bt a{
	transition: all 500ms 0s ease;
	display: inline-block;
	margin: 0px 25px 10px;
	background-color: #FFF;
	color: #002b62;
	letter-spacing: 1px;
	line-height: 1;
	padding: 17px 0px;
	width: 230px;
	font-size: 16px;
}

.pc .contents_footer_bt a:hover{
	color: #FFF;
	background-color: #002b62;
}

.stitle{
	position: relative;
	font-size: 30px;
	font-weight: 500;
	color: #002b62;
	text-align: center;
	line-height: 1;
	padding-bottom: 26px;
}

.stitle::before{
	content: "";
	position: absolute;
	display: block;
	width: 40px;
	height: 2px;
	background-color: #002b62;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
}


@media screen and (max-width:1350px) {

	.contents_footer_bt{
		max-width: 800px;
		margin: 0 auto;
	}

}


@media screen and (max-width:1050px) {
	
	
	
	/* ******************** common ******************** */

	#contents{
		padding-top: 56px;
	}
	
	#contents.pb{
		padding-bottom: 150px;
	}


	/* ******************** common ******************** */
	
}

/* ******************** common ******************** */



/* ******************** footer ******************** */

footer{
	background-color: #002b62;
}

footer section{
	padding: 60px 6% 20px;
	color: #FFF;
}

footer section a{
	transition: all 500ms 0s ease;
	color: #FFF;
}

footer h1{
	font-family: 'Noto Sans JP';
	font-size: 50px;
	font-weight: 500;
	font-style: italic;
	color: #FFF;
	line-height: 1;
	padding-bottom: 60px;
}


footer #fmenu{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: 20px;
	border-bottom: #FFF solid 1px;
}

footer #fmenu div{
	width: 50%;
	font-size: 16px;
	line-height: 1;
}

footer #fmenu div:nth-of-type(2){
	text-align: right;
}

.pc footer #fmenu div a:hover{
	padding: 0px 10px;
}

footer nav{
	padding-bottom: 20px;
	border-bottom: #335581 solid 1px;
	margin-bottom: 20px;
}


footer nav ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 30px;
}

footer nav ul li{
	/* width : calc(calc(100% - 140px)/4) ; */
	width : calc(96%/5)
}

footer nav ul li:nth-of-type(5){
	/* width: 140px; */
}

footer nav ul li h2{
	display: block;
	background-color: rgba(255,255,255,.1);
	font-size: 16px;
	line-height: 1;
	padding: 4px 20px 4px 5px;
}

footer nav ul li article{
	padding-top: 20px;
}

footer nav ul li article div{
	padding-bottom: 5px;
}

footer nav ul li article div a{
	transition: all 500ms 0s ease;
	position: relative;
	display: inline-block;
	line-height: 1;
	padding: 5px 15px 5px 35px;
}

footer nav ul li article div a span{
	position: relative;
	z-index: 20;
	letter-spacing: 1px;
}

footer nav ul li article div a::before{
	transition: all 500ms 0s ease;
	content: "";
	display: block;
	position: absolute;
	width: 13px;
	height: 1px;
	background-color: #FFF;
	left: 5px;
	top: 50%;
	z-index: 10;
}

footer nav ul li article div a::after{
	transition: all 500ms 0s ease;
	content: "";
	display: block;
	position: absolute;
	width: 0%;
	height: 100%;
	background-color: #FFF;
	left: 0%;
	top: 0%;
	z-index: 1;
}

.pc footer nav ul li article div a:hover{
	color: #002b62;
}

.pc footer nav ul li article div a:hover::before{
	background-color: #002b62;
}

.pc footer nav ul li article div a:hover::after{
	width: 100%;
}



#f_inquiry{
    width: 260px;
    display: block;
    margin: 0 0 0 auto;
	line-height: 1.6;
}

@media screen and (max-width: 768px) {

	#f_inquiry{
		width: 260px;
		display: block;
		margin: 0 auto 0 0;
		line-height: 1.6;
	}
}


address{
	background-color: #001a3b;
	text-align: center;
	padding: 20px;
	color: #FFF;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
}


@media screen and (max-width: 480px) {
	address{
		padding-bottom: 70px;
	}
}




/* ******************** footer ******************** */




/* ******************** overlay ******************** */


#overlay{
	display: none;
	width: 100%;
	position: fixed;
	top: 0;
	height: 100%;
	z-index: 1000000000;
}


#overlay section{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	z-index: 10;
	height: 100%;
}



#overlay .video_tag{
	display: none;
}

#overlay section > div{
	position: relative;
	width: 100%;
	padding: 0px 20px;

}

#overlay section > div .iclose {
	position: absolute;
	right: 0%;
	top: 0px;
	width: 50px;
	height: 50px;
	padding: 10px;
	cursor: pointer;
}

#overlay section > div .iclose::before,
#overlay section > div .iclose::after{
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #fff;
	border-radius: 1.5px;
}

@media screen and (max-width: 480px) {
	#overlay section > div .iclose {
		position: absolute;
		right: 0%;
		top: 0px;
		width: 30px;
		height: 30px;
		padding: 10px;
		cursor: pointer;
	}
}

#overlay section > div .iclose::before{
	-webkit-transform: translateX(0px) rotate(-45deg);
	transform: translateX(0px) rotate(-45deg);
}

#overlay section > div .iclose::after{
	-webkit-transform: translateX(0px) rotate(45deg);
	transform: translateX(0px) rotate(45deg);
}

.movielinkarea{
	position: relative;
	z-index: 100;
}


.movielinkarea article{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 50px 0px 100px;
}

#overlay.view .movielinkarea article{
	opacity: 0;
	animation: alpha_100 .5s forwards cubic-bezier(.07,.68,.41,1) .5s;
}

#overlay.out .movielinkarea article{
	opacity: 1;
	animation: alpha_0 .5s forwards cubic-bezier(.07,.68,.41,1) 0s;
}
	
.movielinkarea article #playbox video{
	position: relative;
	width: 100%;
	margin: 0 auto;
	max-width: 1000px;
}

.switching.load #loading ul li::before{
	width: 0%;
	animation: width_100 .7s forwards cubic-bezier(.07,.68,.41,1) 0s;
}


#overlay ul{
	position: fixed;
	right: 0px;
	top: 0;
	height: 100vh;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	z-index: 1;
}

#overlay ul li{
	position: relative;
	width: 25%;
	height: 100%;
	/* background-color: rgba(0,0,0,.9); */
}


#overlay ul li::before{
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top:0;
	right: 0;
	background-color: rgba(0, 0, 0,.95);
}




#overlay.view ul li:nth-child(1)::before{
	width: 0%;
	animation: width_100 .7s forwards cubic-bezier(.07,.68,.41,1) 0s;
}

#overlay.view ul li:nth-child(2)::before{
	width: 0%;
	animation: width_100 .7s forwards cubic-bezier(.07,.68,.41,1) 0.1s;
}

#overlay.view ul li:nth-child(3)::before{
	width: 0%;
	animation: width_100 .7s forwards cubic-bezier(.07,.68,.41,1) 0.2s;
}

#overlay.view ul li:nth-child(4)::before{
	width: 0%;
	animation: width_100 .7s forwards cubic-bezier(.07,.68,.41,1) 0.3s;
}


#overlay.view.out ul li:nth-child(1)::before{
	width: 100%;
	animation: width_0 .5s forwards cubic-bezier(.07,.68,.41,1) .5s;
}

#overlay.view.out ul li:nth-child(2)::before{
	width: 100%;
	animation: width_0 .5s forwards cubic-bezier(.07,.68,.41,1) 0.6s;
}

#overlay.view.out ul li:nth-child(3)::before{
	width: 100%;
	animation: width_0 .5s forwards cubic-bezier(.07,.68,.41,1) 0.7s;
}

#overlay.view.out ul li:nth-child(4)::before{
	width: 100%;
	animation: width_0 .5s forwards cubic-bezier(.07,.68,.41,1) 0.8s;
}


.redtxt{
	display: block;
	color:#ffffff;
	font-size:14pt;
	font-weight:bold;
	text-shadow:1px 1px 10px #ff0000, -1px -1px 10px #ff0000;
	text-align: right;
}

@media screen and (max-width: 480px) {
	.redtxt{
		font-size:12pt;
	}
}


/* ******************** overlay ******************** */




























/* bgs */


.bgs li{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
}

		
.bgs li.c1{
	background: rgb(187,158,192);
	background: linear-gradient(to right, rgba(187,158,192,1) 0%, rgba(164,154,211,1) 100%);
}

.bgs li.c2{
	background: rgb(202,179,164);
	background: linear-gradient(90deg, rgba(202,179,164,1) 0%, rgba(212,146,148,1) 100%);
}

.bgs li.c3{
	background: rgb(160,193,188);
	background: linear-gradient(to right, rgba(160,193,188,1) 0%, rgba(151,213,141,1) 100%);
}

.bgs li.c4{
	background: rgb(113,139,178);
	background: linear-gradient(90deg, rgba(113,139,178,1) 0%, rgba(79,202,218,1) 100%); 
}

.bgs li.c5{
	background: rgb(144,123,170);
	background: linear-gradient(to right, rgba(144,123,170,1) 0%, rgba(119,148,189,1) 100%);
}



.bgs li:nth-child(1){
	z-index: 10;
	opacity: 1;
}

.bgs li:nth-child(2){
	z-index: 9;
}

.bgs li:nth-child(3){
	z-index: 8;
}

.bgs li:nth-child(4){
	z-index: 7;
}

.bgs li:nth-child(5){
	z-index: 6;
}

.bgs li.active{
	opacity: 0;
	animation: alpha_100 5s forwards linear 0s;
}

.bgs li.active_stay{
	opacity: 1;
}


/* bgs */


.clippy{
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

.load main .clippy{
	width: 100%;
	animation: clippy_100 .7s forwards cubic-bezier(.07,.68,.41,1) 1.3s;
}


.load .inview_anime_slide_on.clippy{
	width: 100%;
	animation: clippy_100 .7s forwards cubic-bezier(.07,.68,.41,1) .3s;
}



@keyframes loadalpha{
	0% {
		opacity: 1
	}
	50% {
		opacity: .5
	}
	100% {
		opacity: 1
	}
}


@keyframes loadscale{
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes load_figure{
	0% {
		opacity: 1;
/*		transform: translate(-50%,-50%) scale(1);*/
	}
	100% {
		opacity: 0;
/*		transform: translate(-50%,-50%) scale(3);*/
	}
}


@keyframes hanmenu_1 {
	0% {
		transform: scaleX(1);
	}
	49% {
		transform: scaleX(0);
	}
	50% {
		transform: translateY(9px) scaleX(0) rotate(45deg);
	}
	100% {
		transform: translateY(9px) scaleX(1) rotate(45deg);
	}
}

@keyframes hanmenu_2 {
	0% {
		transform: scaleX(1);
		opacity: 1;
	}
	49% {
		transform: scaleX(0);
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes hanmenu_3 {
	0% {
		transform: scaleX(1);
	}
	49% {
		transform: scaleX(0);
	}
	50% {
		transform: translateY(-9px) scaleX(0) rotate(-45deg);
	}
	100% {
		transform: translateY(-9px) scaleX(1) rotate(-45deg);
	}
}

@keyframes hanmenuoff_1 {
	0% {
		transform: translateY(9px) scaleX(1) rotate(45deg);
	}
	49% {

		transform: translateY(9px) scaleX(0) rotate(45deg);
	}
	50% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}

@keyframes hanmenuoff_2 {
	0% {
		opacity: 0;
	}
	49% {
		opacity: 0;
	}
	50% {
		transform: scaleX(0);
		opacity: 1;
	}
	100% {
		transform: scaleX(1);
		opacity: 1;
	}
}

@keyframes hanmenuoff_3 {
	0% {
		transform: translateY(-9px) scaleX(1) rotate(-45deg);
	}
	49% {
		transform: translateY(-9px) scaleX(0) rotate(-45deg);
	}
	50% {
		transform: scaleX(0);
	}
	100% {

		transform: scaleX(1);
	}
}



@keyframes hanmenuoff_3 {
	0% {
		transform: translateY(-9px) scaleX(1) rotate(-45deg);
	}
	49% {
		transform: translateY(-9px) scaleX(0) rotate(-45deg);
	}
	50% {
		transform: scaleX(0);
	}
	100% {

		transform: scaleX(1);
	}
}

@keyframes circlerote {
	0% {
		transform: rotate(0deg);
	}
	100% {

		transform: rotate(-360deg);
	}
}


@keyframes width_100 {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}

@keyframes width_0 {
	0% {
		width: 100%;
	}
	100% {
		width: 0%;
	}
}

@keyframes height_100 {
	0% {
		height: 0%;
	}
	100% {
		height: 100%;
	}
}

@keyframes height_0 {
	0% {
		height: 100%;
	}
	100% {
		height: 0%;
	}
}

@keyframes alpha_100 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes alpha_0 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes pos_0 {
	0% {
		transform: translateX(150%);
	}
	100% {
		transform: translateX(0%);
	}
}

@keyframes inview_animetion_slide {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
	
}

@keyframes clippy_100 {
	0% {
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
	
}





.only_1000,
.only_900,
.only_840,
.only_768,
.only_640,
.only_560,
.only_480,
.only_360{
	display: none;
}

.no_1000,
.no_900,
.no_840,
.no_768,
.no_640,
.no_560,
.no_480,
.no_360{
	display: inline-block;
}



@media screen and (max-width: 1190px) {
	
	.first{
		margin-top: 13%;
	}
	
	section#section_top  h2{
		padding: 13% 0px;
	}
	
}


@media screen and (max-width: 1100px) {
	
	

	/* ******************** footer ******************** */

	footer nav ul li{
		/* width : calc(calc(100% - 140px)/4) ; */
		width : calc(96%/3)
	}

	footer nav ul li:nth-child(-n+3){
		margin-bottom: 30px;
	}

	footer nav ul::after{
		content: "";
		display: block;
		width : calc(96%/3)
	}

	/* ******************** footer ******************** */

}


@media screen and (max-width: 1000px) {
	
	.only_1000{
		display: inline-block;
	}
	
	.no_1000{
		display: none;
	}
	
	/*  bubu  */



}


@media screen and (max-width: 900px) {
	
	.only_900{
		display: inline-block;
	}
	
	.no_900{
		display: none;
	}
	
}





@media screen and (max-width: 840px) {
	
	.only_840{
		display: inline-block;
	}
	
	.no_840{
		display: none;
	}
	
	
	
}


@media screen and (max-width: 768px) {
	
	.only_768{
		display: inline-block;
	}
	
	.no_768{
		display: none;
	}
	
	.inner {
		width: 88%;
	}
	
	/* ******************** common ******************** */
	
	main#main{
		position: relative;
		width: 100%;
		height: auto;
		min-height: auto;
	}
	
	main article{
		position: absolute;
		width: 100%;
		height: auto;
		z-index: 10;
	}
	
	main#main::after,
	main#main .bg::after{
		content: "";
		display: block;
		padding-top: 52%;
	}
	
	figure.circlemove{
		position: absolute;
		width: 120px;
		height: 120px;
		opacity: .2;
		z-index: 200;
		right: 10px;
		bottom: -20%;
	}
	
	main article h1{
		font-size: 32px;
	}

	main article p{
		font-size: 18px;
	}
	
	
	#contents_footer{
		text-align: center;
		padding: 50px 0px 60px;
	}

	#contents_footer h1{
		font-size: 20px;
		font-weight: 500;
		padding-bottom: 35px;
	}
	
	.contents_footer_bt a{
		transition: all 500ms 0s ease;
		display: block;
		margin: 0px auto 20px;
	}
	
	section#section_top  h2{
		padding: 15% 0px;
	}
	
	.first{
		margin-top: 15%;
	}
	
	.stitle{
		font-size: 26px;
	}
	
	
	/* ******************** common ******************** */
	
	
	
	/* ******************** footer ******************** */

	footer nav ul li{
		/* width : calc(calc(100% - 140px)/4) ; */
		width : calc(96%/2)
	}

	footer nav ul li:nth-child(-n+4){
		margin-bottom: 30px;
	}

	footer nav ul::after{
		content: "";
		display: block;
		width : calc(96%/2)
	}
	
	/* ******************** footer ******************** */
	
	
}



@media screen and (max-width: 640px) {
	
	.only_640{
		display: inline-block;
	}
	
	.no_640{
		display: none;
	}
	
	
	
	
}






@media screen and (max-width: 560px) {
	
	
	/* ******************** footer ******************** */
	
	footer section{
		padding: 10% 6% 15px;
		color: #FFF;
	}
	
	footer h1{
		font-size: 10vw;
		font-weight: 500;
		font-style: italic;
		color: #FFF;
		line-height: 1.2;
		padding-bottom: 12%;
	}
	
	

	footer #fmenu div a{
		display: block;
	}

	
	footer nav ul li:nth-child(2n-1),
	footer nav ul li:nth-child(2n),
	footer nav ul li:nth-of-type(4){
		width : 100%;
	}
	
	footer nav ul li{
		padding-top: 10px;
		padding-bottom: 25px;
	}

	
	footer nav ul li:nth-child(-n+4){
		margin-bottom: 0;
	}
	
	footer nav ul li h2{
		display: block;
		padding: 10px;
	}
	
	footer nav ul li article {
		padding-top: 10px;
	}
	
	footer nav ul li article div a{
		transition: all 500ms 0s ease;
		position: relative;
		display: block;
		line-height: 1;
		padding: 10px 15px 10px 35px;
		border-bottom: #1a4172 solid 1px;
	}
	
	/* ******************** footer ******************** */
	
	
}



@media screen and (max-width: 480px) {

	
	
	
	/* ******************** common ******************** */
	
	main article h1{
		font-size: 26px;
	}
	
	main article p{
		font-size: 15px;
	}
	
	figure.circlemove{
		position: absolute;
		width: 100px;
		height: 100px;
		opacity: .2;
		z-index: 200;
		right: -20px;
		bottom: -20%;

	}
	
	
	#contents_footer{
		text-align: center;
		padding: 40px 0px 40px;
	}

	#contents_footer h1{
		font-size: 18px;
		font-weight: 500;
		padding-bottom: 25px;
	}
	
	.contents_footer_bt a:last-child{
		margin-bottom: 0;
	}
	
	section#section_top  h2{
		padding: 18% 0px;
		font-size: 15px;
	}
	
	.first{
		margin-top: 18%;
	}
	
	.stitle{
		font-size: 22px;
	}

	.stitle::before{
		width: 30px;
	}
	
	
	/* ******************** common ******************** */

	/* ******************** footer ******************** */
	
	footer section{
		padding: 12% 6% 8%;
		color: #FFF;
	}
	
	footer h1{
		font-size: 12vw;
		padding-bottom: 14%;
	}
	
	
	
	/* ******************** footer ******************** */

}




@media screen and (max-width: 560px) {
	
	.only_560{
		display: inline-block;
	}
	
	.no_560{
		display: none;
	}
	
}




@media screen and (max-width: 480px) {

	.only_480{
		display: inline-block;
	}
	
	.no_480{
		display: none;
	}
	
}


@media screen and (max-width: 360px) {

	.only_360{
		display: inline-block;
	}
	
	.no_360{
		display: none;
	}
	


}