@charset "utf-8";


/*--------------------------------------------------------------------------
   html
---------------------------------------------------------------------------*/

html{
	overflow-y: scroll;
	font-size: 62.5%;
}


/*--------------------------------------------------------------------------
   body
---------------------------------------------------------------------------*/

body{
	color: #333;
	background: #FFF;
	font-family:"Zen Kaku Gothic New","游ゴシック体", "Yu Gothic", YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo ,"ＭＳ Ｐゴシック" ,"MS P Gothic" ,sans-serif;
	font-size: 1.6rem;
	line-height: 1.8;	
}

/* fonts */
.en{
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 300;		
}


/*--------------------------------------------------------------------------
   base link
---------------------------------------------------------------------------*/

a{
	outline: none;
}
a:link,
a:visited{
	text-decoration: none;
	color: #333;
}

.ophover{
	transition: opacity ease .3s;	
}
.ophover:hover{
	opacity: .7;
}


/*--------------------------------------------------------------------------
   img
---------------------------------------------------------------------------*/
img{
	max-width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;		
}

/*--------------------------------------------------------------------------
   Animation
---------------------------------------------------------------------------*/

.fade,.fade01,.fade02,.fade03,.fade04,.blur,.zoom,
.delay01,.delay02,.delay03,.delay04,.delay05 {
	transition: 1.3s;
}
.fade {
	opacity: 0;
	transform: translate(0,0); 
}
.fade01{
	opacity: 0;
	transform: translate(0,50px); 
}
 .fade02 {
	opacity: 0;
	transform: translate(0,-50px); 
}
.fade03 {
	opacity: 0;
	transform: translate(-50px,0); 
}
.fade04 {
	opacity: 0;
	transform: translate(50px,0); 
}
.blur {
  -webkit-filter: blur(14px);
	filter: blur(14px);  
}
.zoom{
  transform: scale(1.1,1.1); 
}
.delay01{
	transition-delay: 0.3s;		
}
.delay02{
	transition-delay: 0.6s;		
}
.delay03{
	transition-delay: 0.9s;		
}
.delay04{
	transition-delay: 1.2s;		
}
.delay05{
	transition-delay: 1.5s;		
}

 .mv {
	opacity: 1;
  -webkit-filter: blur(0);
	filter: blur(0);
	transform: translate(0,0) scale(1,1); 
}


/*--------------------------------------------------------------------------
   PC
---------------------------------------------------------------------------*/
.sp{
	display: none;	
}
/* box-sizing ---*/	
header, footer, section, div, h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, th, td, a, span {
	box-sizing: border-box;
}


/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
#Page{
	overflow: hidden;	
}
.inner{
	max-width: 1200px;
	margin: 0 auto;
}
.layout-box{
  display: flex;
  justify-content: space-between;  
}

._box{
  background: #FFF;
  box-shadow: 0 0 10px rgba(0,0,0,.08);  
}

._gradient{
  background: linear-gradient(0deg, rgba(0,135,239,1) 0%, rgba(0,101,179,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



@media screen and (max-width: 1200px) {
	.inner{
		width: 94%;
	}
}

/*--------------------------------------------------------------------------
   Header
---------------------------------------------------------------------------*/
#Header{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10000;
	display: flex;
	justify-content: space-between;
  align-items: center;
	width: 100%;
  padding: 20px 40px 0;
	background: rgba(255,255,255, 0);
	transition: .3s;
}
#Header.scroll{
	padding-top: 0;
	background: rgba(255,255,255, .8);
}
#Header .logo{
  position: relative;
  width: 24%;
}
#Header .logo span{
	transition: .3s;	
}
#Header .logo .white{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;  
}
#Header .logo .original{
  width: 80%;
  opacity: 0;  
}
#Header.scroll .logo .white{
	opacity: 0;
}
#Header.scroll .logo .original{
	opacity: 1;
}
#Header .logo img{
	width: 100%;
}
#Header > div{
	display: flex;
  align-items: center;  
}

#Header .fixed-nav .btn a{
  display: block;
  width: 200px;
  border-radius: 5px;
  background: #004d88;
  line-height: 1;
  padding: 1em 0;
  text-align: center;
  color: #FFF;
  transition: .3s;
}
#Header .fixed-nav .btn a:hover{
  background: #0089f2;  
}
#Header .fixed-nav .btn a span{
  display: none;  
}
.btn-trigger{
  display: none;
}

/* ---------------------------------------------------------------------------
			#Gnav	
				グローバルナビゲーション
--------------------------------------------------------------------------- */
#Gnav .gnav{
  display: flex;
  margin-right: 15px;
}
#Gnav .gnav > li > p a,
#Gnav .gnav > li > p span{
  position: relative;
  display: block;
  padding: 25px 20px 25px 17px;
  line-height: 1;
  color: #FFF;
  transition: .3s;
  cursor: pointer;
}
.scroll #Gnav .gnav > li > p a,
.scroll #Gnav .gnav > li > p span{
  color: #333;
}
#Gnav .gnav > li > p a:hover{
  color: #0089f2;  
}
#Gnav .gnav > li > p span{
  padding-right: 50px;
  background: url(../../img/common/arw_down_w.svg) no-repeat right 30px center;
  background-size: 10px auto;  
}
.scroll #Gnav .gnav > li > p span{
   background-image: url(../../img/common/arw_down.svg); 
}
#Gnav .gnav > li > p a::after,
#Gnav .gnav > li > p span::after{
  position:absolute;
  left: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 0;
  height: 3px;
  background: #0089f2;
  transition: .3s;  
}
#Gnav .gnav > li.current > p a::after,
#Gnav .gnav > li.current > p span::after,
#Gnav .gnav > li > p a:hover::after,
#Gnav .gnav > li > p span:hover::after{
  width: calc(100% - 2px);
}
#Gnav .gnav .nav-middle{
  display: none;
  position: fixed;
  left: 0;
  top: 86px;
  z-index: 10000;
  width: 100%; 
  padding: 0 40px;
}
.scroll #Gnav .gnav .nav-middle{
	top: 66px;
}
#Gnav .gnav > li:hover .nav-middle{
  display: block;
}
#Gnav .gnav .nav-middle ul{
  display: flex;
  padding: 30px 0;
  background: rgba(255,255,255,.95);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0,0,0,.1); 
  transition-property: opacity;
  animation-name: fadein;
  animation-duration: .3s;
  animation-iteration-count: 1;
  animation-play-state: runinng;	 
}
#Gnav .gnav .nav-middle ul li{
  width: 20%;
  padding: 0 1.8%;  
}
#Gnav .gnav .nav-middle ul li:nth-child(n+2){
  border-left: 1px solid #ccc;  
}
#Gnav .gnav .nav-middle ul li p{
  margin-bottom: 10px;
  border-bottom: 2px solid #0089f2;  
}
#Gnav .gnav .nav-middle ul li p a{
  position: relative;
  display: block;
  padding: 8px 30px 8px 0;
  color: #0089f2;
  font-size: 1.8rem;
  line-heigjt: 1; 
}
#Gnav .gnav .nav-middle ul li p a::after{
  position:absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  content: "";
  width: 17px;
  height: 5px;
  background:url(../../img/common/arw_btn.svg) no-repeat;
  background-size: 100% auto;
  transition: .3s;  
}
#Gnav .gnav .nav-middle ul li p a:hover::after{
  right: -5px;  
}
#Gnav .gnav .nav-middle ul li span{
  display: block;
  padding:0 10px; 
}
#Gnav .gnav .nav-middle ul li span + span{
  margin-top: 10px; 
}
#Gnav .gnav .nav-middle ul li span a{
  position: relative;
  display: block;
  padding-left: 20px;
  font-size: 1.4rem;
  line-height: 1.3;
  transition :.3s;
}
#Gnav .gnav .nav-middle ul li span a:hover{
  color: #0089f2;  
}
#Gnav .gnav .nav-middle ul li span a::after{
  position:absolute;
  left: 0;
  top: 0.7em;
  display: block;
  content: "";
  width: 12px;
  height: 1px;
  background: #005596;  
}

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


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
.content{
  background: #f4f7f8;
  padding-bottom: 110px;  
}

/* breadcrumb
-----------------------------------------------------------------*/
.breadcrumb{
  margin: 30px 0 85px;  
}
.breadcrumb ul{
  display: flex;
  line-height: 1;
  font-size: 1.4rem;
  color: #0077d3;  
}
.breadcrumb ul li{
  position: relative;  
}
.breadcrumb ul li:nth-child(n+2){
  margin-left: 65px;  
}
.breadcrumb ul li:nth-child(n+2)::before{
  position:absolute;
  left: -42px;
  top: 6px;
  display: block;
  content: "";
  width: 20px;
  height: 1px;
  background: #4583b3;  
}
.breadcrumb ul a:hover{
   text-decoration: underline;
}

/* 見出し
-----------------------------------------------------------------*/

/* page-ttl */
.page-ttl{
  position: relative;
  height: 480px;
  background: no-repeat center center;
  background-size: cover;
  text-align: center;
  color: #fff;  
}
.page-ttl h1{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  line-height: 1;
  text-shadow: 0 0 10px rgba(0,0,0,.6);
}
.page-ttl h1 .en{
  display: block;
  margin-bottom: 15px;
  font-size: 8rem;
  letter-spacing: .15em;
}
.page-ttl h1 .ja{
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: .08em;
}

/* ttl-sec */
.ttl-sec{
  text-align: center;
  line-height: 1;
}
.ttl-sec .en{
  display: block;
  margin-bottom: 20px;
  font-size: 8rem;
  font-weight: 200;
  letter-spacing: .08em; 
}
.ttl-sec .ja{
 font-weight: 500;
 letter-spacing: .1em;  
}
.ttl-sec._w{
	color: #FFF;
	text-shadow: 0 0 10px rgba(0,0,0,.1);
}

/* ボタン
-----------------------------------------------------------------*/
.btn-base a{
	position: relative;
	display: block;
	padding: 20px 55px;
	border-radius: 3px;
	border: 1px solid #0078d6;
	background: #0078d6;
	color: #FFF;
	line-height: 1;
	font-size: 1.5rem;
	text-align: center;
	transition: .3s;	
}
.btn-base a::after{
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 37px;
	height: 5px;
	content: "";
	background:url(../../img/common/arw_btn_long_w.svg) no-repeat;
	background-size: 100% auto;	
}
.btn-base a:hover{
	background-color: #FFF;
	color: #0078d6;
}
.btn-base a:hover::after{
	background-image: url(../../img/common/arw_btn_long.svg);	
}


.btn-base._w a{
	background: #FFF;
	color: #0078d6;
	border:none;
}
.btn-base._w a::after{
	background-image: url(../../img/common/arw_btn_long.svg);	
}
.btn-base._w a:hover{
	background: #0078d6;
	color: #FFF;
}
.btn-base._w a:hover::after{
	background-image: url(../../img/common/arw_btn_long_w.svg);	
}

.btn-line a{
	position: relative;
	display: block;
	padding: 20px 55px;
	border: 1px solid #333;
	border-radius: 3px;
	line-height: 1;
	font-size: 1.5rem;
	text-align: center;
	transition: .3s;
}
.btn-line a::after{
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 37px;
	height: 5px;
	content: "";
	background:url(../../img/common/arw_btn_long_bk.svg) no-repeat;
	background-size: 100% auto;
}
.btn-line a:hover{
	background: #333;
	color: #FFF;
}
.btn-line a:hover::after{
	background-image: url(../../img/common/arw_btn_long_w.svg);
}



/* card
-----------------------------------------------------------------*/
.card{
	position: relative;
	background: #FFF;
	box-shadow: 0 0 10px rgba(0,0,0,.1);	
}
.card::before{
	position: absolute;
	left: 20px;
	top: 0;
	display: block;
	width: calc(100% - 40px);
	height: 4px;
	clip-path: polygon( 0% 0%, 3px 100%, calc(100% - 3px) 100%, 100% 0%);
	content: "";
	background: #237ac5;	
}


/* topic
-----------------------------------------------------------------*/
.topics .ttl-sec .en{
	font-size: 5rem;
}
.topics-category{
	display: none;
}
.topics-tabs{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 35px auto 60px;
}
.topics-tabs li a{
	display: block;
	padding: 6px 18px;
	font-size: 1.8rem;
	text-align: center;
	border: 1px solid #0077d3;
	border-radius: 3px;
	background: linear-gradient(0deg, rgba(0,135,239,1) 0%, rgba(0,101,179,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	transition: .3s;
}
.topics-tabs li a:hover,
.topics-tabs li a.active{
	-webkit-background-clip: transparent;
  -webkit-text-fill-color: #fff;
	color: #fff;
	background: rgb(0,135,239);
	background: linear-gradient(355deg, rgba(0,135,239,1) 0%, rgba(0,101,179,1) 100%);
}
.tab-content .tab-item {
  display: none;
}
.tab-content .tab-item.active {
  display: block;
}
.topic-list{
	font-size: 1.5rem;
	line-height: 1.5;
}
.topic-list div{
  position: relative;
	display: flex;
  align-items: center;
	padding: 20px 0;	
}
.topic-list  dt{
	flex-shrink: 0;
	min-width: 146px;
  padding-right: 20px;
	letter-spacing: .06em;
}
.topic-list dt .new::after{
  content: "NEW";
	background: linear-gradient(0deg, rgba(0,135,239,1) 0%, rgba(0,101,179,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	 margin: 0 0 0 10px; 
	/*position: absolute;
	left: -40px;*/
}
.topic-list dt .cate{
  display: block;
  padding: 0 5px;
  margin: 6px 0 0;
  border: 1px solid #0077d3;
  border-radius: 3px;
  font-size: 1.3rem;
  background: linear-gradient(0deg, rgba(0,135,239,1) 0%, rgba(0,101,179,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	text-align: center;
}
.topics .topic-list dt .cate{
	width: 95%;
}
.topic-list a{
  display: inline-block;
	text-decoration: underline;	
}
.topic-list a:hover{
	text-decoration: none;
}
.topic-list dd span{
  position: relative;  
}
.topic-list a[target="_blank"] span::after,
.topic-list a.pdf span::after,
.topic-list a.xls span::after,
.topic-list a.word span::after{
  position:absolute;
  right: -7px;
  bottom: 0;
  transform: translate(100%,0);
  display: block;
  content: "";
  background: no-repeat;
  background-size: 100% auto;
}
.topic-list a[target="_blank"] span::after{
  bottom: 2px;
  width: 12px;
  height: 13px;
  background-image:url(../../img/topics/ico_blank.png); 
}
.topic-list a.pdf span::after{
  width: 17px;
  height: 21px;
  background-image: url(../../img/topics/ico_pdf.png); 
}
.topic-list a.xls span::after{
  width: 20px;
  height: 20px;
  background-image: url(../../img/topics/ico_xls.png);  
}
.topic-list a.word span::after{
  width: 20px;
  height: 20px;
  background-image: url(../../img/topics/ico_word.png); 
}

/* category */






/*--------------------------------------------------------------------------
   Cv
---------------------------------------------------------------------------*/
#Cv{
	padding: 65px 0 70px;
	background: url(../../img/common/bg_cv_pc.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;	
}
#Cv h2{
	margin-bottom: 30px;	
}
#Cv .txt{
	margin-bottom: 35px;
	font-size: 1.5rem;
	color: #FFF;	
}
#Cv .btn{
	max-width: 586px;
	margin: 0 auto;	
}

/*--------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------*/
#Footer{
	padding: 55px 0 30px;
}
#Footer .ft-area01{
	margin-bottom: 55px;	
}
#Footer .ft-logo{
	width: 25%;
}
#Footer .ft-logo img{
	width: 100%;
}

#FtGnav{
	max-width: 845px;
	width: calc(100% - 320px);
}
#FtGnav .ft-gnav{
	display: flex;
	line-height: 1.5;	
	white-space: nowrap;
}
#FtGnav .ft-gnav > li:first-child{
	max-width: 570px;
	width: 80%;
}
#FtGnav .ft-gnav > li:nth-child(2){
	margin-left: 40px;
}


@media screen and (max-width: 1000px) {
	#Footer .ft-area01 {
		display: block;
	}
	#Footer .ft-logo {
		width: 310px;
		margin: 0 auto 30px;
	}
	#FtGnav{
		max-width: 845px;
		width: 100%;
	}
	#FtGnav .ft-gnav > li:first-child{

	}


}

#FtGnav .ft-gnav > li:first-child p.has-middle{
	margin-bottom: 25px;	
	border-bottom: 1px solid #d9d9d9;
}
#FtGnav .ft-gnav > li:first-child .nav-middle ul li:nth-child(n+2),
#FtGnav .ft-gnav > li:nth-child(2) p:nth-child(n+2){
	margin-top: 25px;
}
#FtGnav .ft-gnav > li:first-child .nav-middle p a,
#FtGnav .ft-gnav > li:nth-child(2) p a{
	position: relative;
	display: inline-block;
	padding-left: 20px;
}
#FtGnav .ft-gnav > li:first-child .nav-middle p a::before,
#FtGnav .ft-gnav > li:nth-child(2) p a::before{
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 10px;
	height: 2px;
	content: "";
	background: #0087ef;	
}
#FtGnav .ft-gnav > li:first-child .nav-middle span,
#FtGnav .ft-gnav > li:nth-child(2) .nav-middle li a{
	display: block;
	margin-top: 5px;
}
#FtGnav .ft-gnav > li:first-child .nav-middle span a,
#FtGnav .ft-gnav > li:nth-child(2) .nav-middle li a{
	position: relative;
	display: inline-block;
	padding-left: 15px;
	font-size: 1.3rem;	
}
#FtGnav .ft-gnav > li:first-child .nav-middle span a::after,
#FtGnav .ft-gnav > li:nth-child(2) .nav-middle li a::after{
	position: absolute;
	left: 0px;
	top: 0.75em;
	display: block;
	width: 11px;
	height: 3px;
	content: "";
	background: url(../../img/common/arw_btn_bk.svg) no-repeat right top;
	background-size: 100% auto;		
}
#FtGnav .ft-gnav a:hover{
	color: #0089f2;
}
#Footer .ft-area02{
	align-items: center;	
}
#Footer .txt-link-list{
	display: flex;
}
#Footer .txt-link-list li:nth-child(n+2){
	margin-left: 20%;
}
#Footer .txt-link-list a{
	display: inline-block;
	font-size: 1.4rem;
	white-space: nowrap;
}
#Footer .txt-link-list a:hover{
	color: #0087ef;
}
#Footer .copyright{
	font-size: 1.2rem;
	letter-spacing: .06em;
}

.pagetop{
	position: fixed;
	right: 35px;
	bottom: 35px;
	z-index: 5000;
	width: 18px;
	display: none;
}
.pagetop span{
	display: block;	
}
.pagetop .line{
	overflow: hidden;
	position: relative;
	width: 2px;
	height: 200px;
	margin: 0 auto 20px;
	background: #ccc;
}
.pagetop .line::before{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: #333;
	animation: line 3s linear infinite;
	animation-play-state: running; 		
}



@keyframes line {
  0% {
    transform: translateY(100%);
  }
  60% {
    transform: translateY(-100%);
  }
	100% {
    transform: translateY(-100%);
  }
}

























/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  
	#Page {
		min-width: 320px;	
	}
	
	img{
		width: 100%;
		height: auto;
	}
	
	.pc{
		display: none;	
	}
	.sp{
		display: block;	
	}
	img.sp,
	br.sp{
		display: inline;
	}


/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
	.inner{
		max-width: initial;	
	}


/*--------------------------------------------------------------------------
   Header
---------------------------------------------------------------------------*/
	#Header{
		position: absolute;
		display: block;
		width: 100%;
		padding: 10px;
		background: none;
	}
	#Header.scroll{
		padding-top: 10px;
		background: none;
	}
	#Header .logo{
		width: 255px;
  }
	#Header > div{
		display: block;
	}
	
	#Header .fixed-nav{
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		width: 100%;	
	}
	#Header .fixed-nav .btn a{
		width: calc(100vw - 70px);
		height: 70px;
		border-radius: 0;
		padding: 1.6em 0;
		letter-spacing: .08em;
		font-size: 1.6rem;
	}
	#Header .fixed-nav .btn a:hover{
		background: #0089f2;  
	}
	#Header .fixed-nav .btn a span{
		display: none;  
	}
	.btn-trigger{
		position: relative;
		display: block;
		width: 70px;
		height: 70px;
		background: linear-gradient(0deg, rgba(0,135,239,1) 0%, rgba(0,101,179,1) 100%);
		cursor: pointer;
	}
	.btn-trigger span{
		position: absolute;
		right: 19px;
		display: block;
		height: 2px;
		background: #FFF;
		transition: .3s;
	}
	.btn-trigger span:nth-child(1){
		top: 22px;
		width: 32px;
	}
	.btn-trigger span:nth-child(2){
		top: 35px;
		width: 26px;
	}
	.btn-trigger span:nth-child(3){
		bottom: 21px;
		width: 15px;
	}
	.btn-trigger.open span:nth-child(1){
		transform: rotate(-45deg) translate(-8px,10px);
	}
	.btn-trigger.open span:nth-child(2){
		opacity: 0;
	}
	.btn-trigger.open span:nth-child(3){
		transform: rotate(45deg) translate(-8px,-10px);
		width: 32px;
	}

/* ---------------------------------------------------------------------------
			#Gnav	
				グローバルナビゲーション
--------------------------------------------------------------------------- */
	#Gnav{
		position: fixed;
		left: 0;
		top: 0;
		transform: translateY(120vh);
		width: 100%;
		height: calc(100vh - 70px);
		background: rgba(0,90,159,.90);
		overflow: auto;
		transition: .5s;
	}
	#Gnav::-webkit-scrollbar{
		background: #EEE;
	}
	#Gnav::-webkit-scrollbar-thumb{
		background: #fff;
	}
	#Gnav.open{
		transform: translateY(0);
	}
	#Gnav .gnav{
		flex-direction: column;
		margin-right: 0;
		padding: 20px;
	}
	#Gnav .gnav .nav00{
		order: 1;
	}
    #Gnav .gnav .nav03{
		order: 2;
	}
    #Gnav .gnav .nav01{
		order: 3;
	}
    #Gnav .gnav .nav02{
		order: 4;
	}
	#Gnav .gnav > li > p{
		margin-bottom: 15px;
	}
	#Gnav .gnav .nav03 > p{
		margin-bottom: 5px;
	}
	#Gnav .gnav > li > p a,
	#Gnav .gnav > li > p span{
		padding: 5px 0;
		font-size: 1.6rem;
		color:#FFF;
    background: none;
	}
  .scroll #Gnav .gnav > li > p a,
  .scroll #Gnav .gnav > li > p span {
    color: #FFF;
    background: none;
  }
	#Gnav .gnav > li > p a{
		padding-left: 20px;
	}
	#Gnav .gnav > li > p a::before{
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		display: block;
		width: 12px;
		height: 3px;
		content: "";
		background: #FFF;
	}
	#Gnav .gnav > li > p a:hover{
		color: #FFF;  
	}
	#Gnav .gnav > li > p span{
		padding-right: 0;
		background: none;
	}
	#Gnav .gnav > li > p a::after,
	#Gnav .gnav > li > p span::after{
		display: none;
	}
	#Gnav .gnav .nav-middle{
		display: block;
		position: static;
		padding: 0 10px;
		margin-bottom: 25px;
	}
	#Gnav .gnav > li:hover .nav-middle{
		display: block;
	}
	#Gnav .gnav .nav-middle ul{
		display: block;
		padding: 0;
		background: none;
		box-shadow: none; 
		animation: none; 
	}
	#Gnav .gnav .nav-middle ul li{
		width: 100%;
		padding: 0;  
	}
	#Gnav .gnav .nav-middle ul li:nth-child(n+2){
		border-left: none;
		margin-top: 10px;  
	}
	#Gnav .gnav .nav-middle ul li p{
		margin-bottom: 0;
		border-bottom: none;  
	}
	#Gnav .gnav .nav-middle ul li p a{
		padding: 5px 0 5px 20px;
		color: #FFF;
		font-size: 1.6rem; 
	}
	#Gnav .gnav .nav-middle ul li p a::before{
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		display: block;
		width: 10px;
		height: 2px;
		content: "";
		background: #FFF;		
	}
	#Gnav .gnav .nav-middle ul li p a::after{
		display: none;
	}
	#Gnav .gnav .nav-middle ul li span{
		padding:0 0 0 15px; 
	}
	#Gnav .gnav .nav-middle ul li span + span{
		margin-top: 10px; 
	}
	#Gnav .gnav .nav-middle ul li span a{
		padding-left: 20px;
		color: #FFF;
	}
	#Gnav .gnav .nav-middle ul li span a:hover{
		color: #FFF;  
	}
	#Gnav .gnav .nav-middle ul li span a::after{
		top: 0.5em;
		width: 12px;
		height: 5px;
		background:url(../../img/common/arw_btn_w.svg) no-repeat;
		background-size: 100% auto;  
	}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/


.content{
  padding-bottom: 65px;  
}

/* breadcrumb
-----------------------------------------------------------------*/
  .breadcrumb{
    display: none;  
  }

/* 見出し
-----------------------------------------------------------------*/

/* page-ttl */
  .page-ttl{
    height: 83.33vw;
    margin-bottom: 55px;  
  }
  .page-ttl h1 .en{
    margin-bottom: 10px;
    font-size: 5.1rem;
  }
  .page-ttl h1 .ja{
    font-size: 1.4rem;
  }

/* ttl-sec */
	.ttl-sec .en{
		margin-bottom: 5px;
		font-size: 6.8rem;
	}
	.ttl-sec .ja{
	 font-size: 1.3rem;  
	}
	

/* ボタン
-----------------------------------------------------------------*/
	.btn-base a{
		padding: 20px 50px;	
	}
	.btn-line a{
		padding: 16px 50px;	
	}

/* card
-----------------------------------------------------------------*/
	.card::before{
		height: 4px;
	}


/* topic
-----------------------------------------------------------------*/

	.topics .ttl-sec .en{
		font-size: 4.8rem;
	}

	.topics-tabs{
		display: none;
	}
	.topics-category{
		display: block;
		position: relative;
		margin: 22px auto 28px;
	}
	
	.topics-category .__current {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 4.6rem;
		background: rgb(0,135,239);
		background: linear-gradient(355deg, rgba(0,135,239,1) 0%, rgba(0,101,179,1) 100%);
		color: #fff;
		border-radius: 3px;
		letter-spacing: .2em;
		font-size: 1.5rem;
		font-family: "Zen Kaku Gothic New", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
		border: none;
	}

	.topics-category .__current::after {
		content: '';
		display: block;
		width: 10px;
		height: 6px;
		background-image: url(../../img/common/arw_down_w.svg);;
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 50%;
		right: 2rem;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.topics-category .__current.is-open::after {
		-webkit-transform: translateY(-50%) rotate(180deg);
		transform: translateY(-50%) rotate(180deg);
	}
	
	.topics-category ul {
		position: absolute;
		top: calc( 100% + 1.0rem);
		left: 0;
		z-index: 1;
		width: 100%;
		padding: .8rem 2rem;
		opacity: 0;
		visibility: hidden;
		transition: .3s;
		transition-property: opacity,visibility;
		background: #fff;
		border: 2px solid #0087ef;
		border-radius: 3px;

	}
	
	.topics-category ul.is-open {
		opacity: 1;
		visibility: visible;
	}
    
	.topics-category ul li + li {
		border-top: 1px solid #efefef;
	}
	
	.topics-category ul a {
		display: block;
		text-align: center;
		padding: .6rem 0;
	}

	.topic-list div{
		display: block;
		padding: 10px 0;	
	}
	.topic-list  dt{
		width: 100%;
    margin-bottom: 5px;
	}
	.topic-list dt .cate{
		width: auto;
		display: inline-block;
	}
	.topics .topic-list dt .cate{
		width: auto;
	}

    /*sp is-open current*/
    .topics-category ul.is-open li.current{
        background: linear-gradient(355deg, rgba(0,135,239,1) 0%, rgba(0,101,179,1) 100%);
    }
    .topics-category ul.is-open li.current a{
        color: #fff;
    }
    
    
/*--------------------------------------------------------------------------
   Cv
---------------------------------------------------------------------------*/
	#Cv{
		padding: 60px 3%;
		background-image: url(../../img/common/bg_cv_sp.jpg);
	}
	#Cv h2{
		margin-bottom: 25px;	
	}
	#Cv .txt{
		margin-bottom: 20px;
		font-size: 1.4rem;
	}
	#Cv .btn{
		max-width: 586px;
		margin: 0 auto;	
	}

/*--------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------*/
	#Footer{
		padding: 40px 0 90px;
	}
	
	#Footer .ft-area01{
		display: block;
	}
	#Footer .ft-area01{
		padding-bottom: 25px;
		margin-bottom: 25px;
		border-bottom: 1px solid #d9d9d9;	
	}
	#Footer .ft-logo{
		width: 310px;
		margin: 0 auto 30px;
	}
	
	#FtGnav{
		max-width: none;
		width: 100%;
	}
	#FtGnav .ft-gnav{
		display: block;
		line-height: 1.5;	
		white-space: nowrap;
	}
	#FtGnav .ft-gnav > li:first-child{
		max-width: 570px;
		width: 80%;
	}
	#FtGnav .ft-gnav > li:nth-child(2){
		margin-left: 3%;
	}
	#FtGnav .ft-gnav > li:first-child p.has-middle{
		margin-bottom: 10px;	
		border-bottom: none;
	}
	#FtGnav .ft-gnav > li:first-child .nav-middle{
		display: block;
		padding-left: 15px;
		margin-bottom: 20px;
	}
	#FtGnav .ft-gnav > li:first-child .nav-middle ul li:nth-child(n+2),
	#FtGnav .ft-gnav > li:nth-child(2) p:nth-child(n+2){
		margin-top: 20px;
	}
	#FtGnav .ft-gnav > li:first-child .nav-middle span,
	#FtGnav .ft-gnav > li:nth-child(2) .nav-middle li a{
		display: block;
		margin: 5px 0 0 15px;
	}
	#FtGnav .ft-gnav a:hover{
		color: #333;
	}
	#FtGnav .ft-gnav .nav-middle > div+div{
		margin-top: 20px;
	}
	#Footer .ft-area02{
		display: block;
	}
	#Footer .txt-link-list{
		display: block;
		margin-bottom: 30px;
	}
	#Footer .txt-link-list li:nth-child(n+2){
		margin-left: 0;
	}
	#Footer .copyright{
		text-align: center;
	}
	
	.pagetop{
		right: 10px;
		bottom: 80px;
		width: 12px;
	}
	.pagetop .line{
		width: 1px;
		height: 80px;
		margin: 0 auto 10px;
	}

  
}