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

/*------------------------------------------------
*
*　タブレット
--------------------------------------------------*/
@media screen and (max-width:960px){
	/*------------------------------------------------
	*
	*　ハンバーガーボタン
	--------------------------------------------------*/
	.hamburger-btn {
		display: block;
		margin: 10px;
		top: 2px;
		right: 0;
		position: absolute;
		width: 48px;
		height: 48px;
		cursor: pointer;
	}

	.btn__text{
		display: block;
		margin-top: 12px;
		font-size: 1.2rem;
		text-transform: uppercase;
		transform: translate(-4px, 2px);
	}

	.btn__menu{
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  width: 24px;
	  height: 2px;
	  background: #26344a;
	  margin: 0;
	  padding: 0;
	  border: none;
	  transition: all 0.5s;
	  transform: translate(-50%, -50%);
	  cursor: pointer;
	}

	.btn__menu::before{
	  display: block;
	  content: "";
	  position: absolute;
	  top: -8px;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: #26344a;
	  transition: all 0.5s;
	}

	.btn__menu::after{
	  display: block;
	  content: "";
	  position: absolute;
	  bottom: -8px;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: #26344a;
	  transition: all 0.5s;
	}

	.btn__menu.active{
	  background: transparent;
	}

	.btn__menu.active::before{
	  top: 0;
	  transform: rotate(-45deg);
	}

	.btn__menu.active::after{
	  bottom: 0;
	  transform: rotate(45deg);
	}
	
	/*------------------------------------------------
	*
	*　ハンバーガーメニュー
	--------------------------------------------------*/
	.p-global-nav{
	  position: absolute;
	  top: 64px;
	  right: 0 ;
	  width: 100%;
	  padding: 0 20px 30px 20px;
	  transition: all 0.5s;
	  background-color: #fff;
	  display: none;
	  z-index: 100;
	}
	.p-global-nav.active{
	  display: block;
	}

	.p-global-nav ul.menu{
		display: block;
		background-color: rgba(255,255,255,0.95);
		width: 100%;
		right: 0;
		top: 70px;
		height: 100vh;
		text-align: center;
	}
	.p-global-nav ul.menu li {
		margin-left: 0; 
		position:relative;
	}
	.p-global-nav ul.menu li a{
		display: block;
	}

	.p-global-nav ul.menu li a:hover{
		background-color: #38B8EF;
		color: #fff;
		opacity: 1;
	}
	
	.p-global-nav .header-application{
		max-width: 100%;
	}


	.top-nav_menu{
		margin-bottom: 20px;
	}

	.top-nav_link{
		border-top:1px solid #333;
		padding-top: 20px;
	}

	.top-nav_menu:hover,.top-nav_link:hover{
		opacity:1;
	}

	.top-hero-title{
		top: 10%;
	}

	.menu__second-level{
		display: none;
	}

	li.menu__single:hover ul.menu__second-level{
		opacity: 0;
	}
	
	/*------------------------------------------------
	*
	*　サイド固定リンク→下に固定
	--------------------------------------------------*/
	.side-link{
		position: fixed;
		top: auto;
		bottom: -80px;
		right: 0;
		z-index: 100;
		width: 100%;
		display: flex;
		justify-content: space-between;
		transition: .2s;
    	-webkit-transition: .2s;
	}

	.side-link a{
		width: 49.5%;
		height: 70px;
		line-height: 70px;
		font-size: 1.8rem;
		text-align: center;
		padding:  0;
		-ms-writing-mode:inherit;
		writing-mode: inherit;
		border-radius: 0;
	}

	.side-link a:first-of-type{
		margin-bottom: 0;
	}

	.side-link a:last-of-type{
		padding-top: 0px;
	}
	
	.side-link.fixed{
		bottom:0;
	}
	/*------------------------------------------------
	*
	*　下層ページ　title h1
	--------------------------------------------------*/

	.head-block{
		margin-top: 70px;
	}
	
}

/*------------------------------------------------
*
*　sp
--------------------------------------------------*/
@media screen and (max-width:768px){
	.pc{
		display: none;
	}
	
	.sp{
		display: block;
	}
	/*------------------------------------------------
	*
	*　下層ページ　head h1
	--------------------------------------------------*/
	.head-block{
		height: 200px;
	}
	
	.head-block h1 {
		top: 50%;
		bottom: auto;
		left: 50%;
		width: 100%;
		transform: translate(-50%,-50%);
	}
	
	.head-block .title{
		font-size:3rem;
		text-align: center;
	}
	
	.head-block .title span{
		display: block;
		margin-left: 0;
	}
	
	/*------------------------------------------------
	*
	*　footer-link
	--------------------------------------------------*/
	.inner.flex.footer-link .footer-item{
		width: 100%;
		margin-bottom: 20px;
	}
	.footer-link .footer-item a span{
		font-size: 1.4rem;
	}
	.footer-link .footer-item:last-of-type a{
		font-size: 2rem;
	}
	.footer-link .footer-item:first-of-type a{
		font-size: 2rem;
	}
	
	/*------------------------------------------------
	*
	*　footer
	--------------------------------------------------*/
	footer{
		text-align: center;
	}
	
	footer ul.flex,
	footer div.flex{
		display: block;
		max-width: 100%
	}
	
	footer ul li{
		margin-bottom: 10px;
	}

	footer div a{
		margin: 0 auto 20px;
	}
	
	
}