@charset "utf-8";

/**
*
*  global_header.css
*  ヘッダー
*
*/

/*--------------------------------------------------------------------------
	Header
---------------------------------------------------------------------------*/
	#Header {
		position: fixed;
		width: 260px;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 9999;
		background: #FDFEFF;
	/*	background: linear-gradient(180deg, #FFFFFF, #FDFDFD, #FFFFFF);*/
		overflow: hidden;
		overflow-y: auto;
		-webkit-box-sizing: border-box;
						box-sizing: border-box;
	}
	#Header > .inline {
		display: table;
		position: relative;
		width: 100%;
		height: 100%;
		padding: 30px 30px 50px;
		table-layout: fixed;
		-webkit-box-sizing: border-box;
						box-sizing: border-box;
	}
/* @pc wide **************************************************/
@media all and (min-width: 768px){
	#Header {
		-webkit-filter:　drop-shadow(0px 0px 8px rgba(20,60,80,0.07));
			-ms-filter:　drop-shadow(0px 0px 8px rgba(20,60,80,0.07));
				filter: drop-shadow(0px 0px 8px rgba(20,60,80,0.07));
	}
	/* IE11,Edge */
	_:-ms-lang(x)::-ms-backdrop,
	#Header {
		box-shadow:0px 0px 12px rgba(150,150,150,0.65) !important;
	}
}
/* @sp **************************************************/
@media all and (max-width: 1100px){
	#Header {
		width: 100%;
		height: auto;
		background: rgba(255, 255, 255, 0.95);
		overflow: inherit;
		overflow-y: inherit;
		-webkit-filter:　drop-shadow(0px 0px 3px rgba(20,60,80,0.1));
			-ms-filter:　drop-shadow(0px 0px 3px rgba(20,60,80,0.1));
				filter: drop-shadow(0px 0px 3px rgba(20,60,80,0.1));
	}
	#Header > .inline {
		height: auto;
		padding: 0;
	}
}
/* @tablet **************************************************/
	html.dev-tb #Header {
		width: 100%;
		height: 128px;
		overflow: inherit;
		overflow-y: inherit;
	}
	html.dev-tb #Header > .inline {
		padding: 0;
	}
	html.dev-tb #Header .u_pc {
		display: none !important;
	}
	html.dev-tb #Header .u_sp {
		display: block !important;
		font-size: 24px;
	}
	html.dev-tb #Header img.u_sp {
		display: inline-block !important;
		width: auto;
		height: auto;
	}


/* .hd_head
-----------------------------------------------------------------*/
	.hd_head {
		display: table-row;
	}
	.hd_head a {
		text-decoration: none;
	}
/* @sp **************************************************/
@media all and (max-width: 1100px){
	.hd_head {
		position: relative;
		width: 100%;
		height: 55px;
		-webkit-box-sizing: border-box;
				box-sizing: border-box;
		z-index: 5;
	}
	.hd_head a {
		display: inline-block;
		position: relative;
		width: 100%;
		top: 5px;
	}
	.hd_head > nav {
		display: none;
	}
}


/* .hd_bottom
-----------------------------------------------------------------*/
	.hd_bottom {
		display: table-row;
	}
	.hd_nav_wrap {
	/*    display: table-cell;*/
		vertical-align: bottom;
	}
	.hd_nav_wrap > .inline {
		width: 100%;
		padding-top: 0;
	}

/* @pc wide **************************************************/
@media all and (min-width: 768px){
	.hd_bottom nav.nothidden {
		display: none;
	}
}
/* @sp **************************************************/
@media all and (max-width: 1100px){
	.hd_bottom {
		display: none; /* ヘッダーバーを非表示 */
		position: fixed;
		width: 100%;
		height: 100vh;
		background: rgba(41, 44, 48, 0.9);
		transform: translate3d(0, 0, 0);
		-webkit-transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.hd_nav_wrap {
		width: 100%;
		height: 100%;
		padding-bottom: 20px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
				overflow-scrolling: touch;
	}
	.hd_nav_wrap > .inline {
		width: auto;
		padding: 5px 20px 150px;
		overflow: auto;
	}
}


/* _is_open */
	html.dev-tb #Header._is_open .hd_bottom {
		height: 100%;
		opacity: 1;
		filter: alpha(opacity=100);
	}
	html.dev-tb #Header._is_open .hd_nav_wrap {
		height: 100%;
	}


/*--------------------------------------------------------------------------
	ヘッダーテキスト ロゴ
---------------------------------------------------------------------------*/
	.hd_txt_catch {
		margin-bottom: 45px;
		line-height: 1;
		font-size: 18px;
		color: #292C30;
		font-weight: bold;
	}
	.hd_logo {
		height: 200px;
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;
		background-size: contain !important;
		background-position: center !important;
	}
	.rentallogo {
		background: url(../../carsense-rentacar/images/index/carsenseRENTA_logo.svg) no-repeat;
		margin: 0px auto 0px;
		padding-top: 10px;
	}
	.hd_logo img.u_pc {
		display: none;
	}
	html.no-svg .hd_logo img.u_pc {
		display: block;
	}
	html.browser-old-ie .hd_logo > span {
		width: 266px;
		height: 123px;
	}
	.hd_logo > span {
		display: block;
		width: 266px;
		height: 123px;
	}
	.hd_logo .u_pc {
		width: 100%;
		height: auto;
	}
/* @sp **************************************************/
@media all and (max-width: 1100px){
	.hd_txt_catch {
		margin-bottom: 5px;
		font-size: 10px;
	}
	.hd_logo > span {
	}
	.rentallogo {
		display: inline-block;
		background: url(../../carsense-rentacar/images/index/carsenseRENTA_logo_B.svg) no-repeat;
		width: 120px;
		height: 45px;
		max-width: 120px;
		margin: 0 5%;
		padding-top: 0;
	}
}


/*--------------------------------------------------------------------------
	SP MENUトリガーボタン
---------------------------------------------------------------------------*/
@media screen and (min-width: 701px){
	#menu {
		display: none;
	}
}
/* @sp **************************************************/
@media all and (max-width: 1100px){
	#menu {
		display: block;
		position: absolute;
		width: 30px;
		height: 24px;
		top: 16px;
		right: 20px;
		padding: 0;
		background-color: transparent;
		background-image: linear-gradient(to right, #000, #000);
		background-position: center;
		background-repeat: repeat-x;
		background-size: auto 2px;
		border: 0;
		color: transparent;
		cursor: pointer;
		font-size: 0;
		transition: transform 0.2s;
		z-index: 99999;
	}
	#menu:hover {
		cursor: pointer;
		opacity: 0.7;
	}
	#menu:focus {
		outline: none;
	}
	#menu::before,
	#menu::after {
		background: #000;
		content: "";
		display: block;
		height: 2px;
		position: absolute;
		width: 100%;
	}
	#menu::before {
		top: 0;
	}
	#menu::after {
		bottom: 0;
	}
	#menu.open {
		transform: rotate(360deg);
		background: none;
	}
	#menu.open::before {
		top: auto;
		transform: rotate(-45deg);
	}
	#menu.open::after {
		bottom: auto;
		transform: rotate(45deg);
	}
}


/*--------------------------------------------------------------------------
	グローバルナビ
---------------------------------------------------------------------------*/
	.gnav a {
		position: relative;
		font-weight: bold;
		font-size: 1.45rem;
		text-decoration: none;
		line-height: 2.8rem;
	}
	.hd_bottom .gnav ul.list a {
		left: 5px;
		padding: 10px 30px 10px 10px;
	}
	.hd_head .gnav a {
		color: #006DAD;
	}
	.gnav a:after {
		content: "";
		display: block;
		position: absolute;
		width: 0%;
		height: 100%;
		padding: 0;
		top: 0em;
		z-index: -1;
		-webkit-transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
				transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	}
	.hd_bottom .gnav a:after {
		left: -6px;
	}
	/* gnav hover color */
	#gnav00 a:after { background: #FFE200;}
	#gnav01 a:after { background: #FFE200;}
	#gnav02 a:after { background: #FFE200;}
	#gnav03 a:after { background: #FFE200;}
	#gnav04 a:after { background: #FFE200;}
	#gnav05 a:after { background: #FFE200;}
	#gnav06 a:after { background: #FFE200;}
	#gnav07 a:after { background: #FFDE5E;}
	#gnav08 a:after { background: #DEE5EF;}
	
	
	.gnav li.insta a:after {
		background: #415d9e;
	}
	.gnav li.faceb a:after {
		background: #415d9e;
	}
	.gnav ul {
		margin-bottom: 0;	
	}
	.gnav li {
		margin-top: 1.8rem;
		letter-spacing: 0.1em;
	}
	.gnav li.gnav00 {
		font-size: 1.2rem;
		font-weight: bold;
	}
	.gnav li.gnav001 {
		margin-top: 3.85rem;
	}
	.gnav li.gnav002 {
		margin-top: 1rem;
	}
	/* hover active */
	.gnav li._is_active a:after,
	.gnav a:hover:after {
		width: 100%;
		border-radius: 3px;
	}
/* @sp **************************************************/
@media all and (max-width: 1100px){
	.gnav {
		text-align: center;
	}
	.gnav a {
		display: block;
		padding: 15px;
		color: #FFF;
		font-size: 1.3rem;
		font-weight: normal;
	}
	.hd_bottom .gnav a {
		left: 0;
	}
	.gnav li {
		margin-top: 0;
		border-bottom: 1px solid #9a9a9a;
	}
	/* hover active */
	.gnav li a:hover {
		background: #484a4d;
	}
	.gnav li a:after {
		display: none;
	}
}


/*--------------------------------------------------------------------------
	ヘッダーボタン
---------------------------------------------------------------------------*/
	.hd_btns {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		margin: 30px 0 0;
		overflow: hidden;
	}
	.hd_btns li {
		width: 50%;
		font-weight: bold;
		font-size: 1.1rem;
		font-family: 'Ubuntu', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,"ＭＳ Ｐゴシック",Sans-Serif;
		letter-spacing: 0.3em;
		-webkit-box-sizing: border-box;
				box-sizing: border-box;
	}
	.hd_btns li:first-child {
		border-right: 1px solid #fff;
	}
	.hd_btns li a {
		display: block;
		position: relative;
		padding: 10px 5px;
		border: 2px solid #0088D8;
		background: #006DAD;
		text-align: center;
		color: #FFF;
		-webkit-box-sizing: border-box;
				box-sizing: border-box;
		-webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.hd_btns li a span {
		position: relative;
		z-index: 5;
	}
	.hd_btns li a:before {
		content: "";
		display: block;
		position: absolute;
		width: 0;
		height: 100%;
		top: 0;
		right: 0;
		background: #FFF;
		-webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.hd_btns li a:hover {
		color: #0088D8;
	}
	.hd_btns li a:hover:before {
		width: 100%;
		right: auto;
		left: 0;
	}
/* @sp **************************************************/
@media all and (max-width: 1100px){
	.hd_bottom ul.hd_btns {
		margin: 35px auto;
	}
	.hd_btns li {
		padding: 0 10px;
	/*width: 50%;*/
	}
	.hd_btns li:first-child {
		border: 0;
	}
	.hd_btns li a {
		display: block;
		padding: 10px 5px;
		background: none;
		border: 1px solid #FFF;
	}
}


/*--------------------------------------------------------------------------
	ヘッダー HR
---------------------------------------------------------------------------*/
	.hd_head hr {
		margin: 35px 0 0;
	}
	.hd_bottom hr {
		margin: 30px 0;
	}
/* @sp **************************************************/
@media all and (max-width: 1100px){
	.hd_bottom hr {
		color: #9a9a9a;
	}
	.hd_bottom hr:nth-of-type(1) {
		display: none;
	}
}


/*--------------------------------------------------------------------------
	ヘッダーバナー
---------------------------------------------------------------------------*/
	.hd_bnrs,
	.hd_bnrs2 {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		margin: 30px 0 0;
	}
	.hd_bnrs a,
	.hd_bnrs2 li a {
		display: block;
		background: #FFF;
		border: 2px solid transparent;
		text-align: center;
		-webkit-box-sizing: border-box;
				box-sizing: border-box;
	}
	.gnav ul.hd_bnrs2 a {
		padding: 20px 15px;
		font-size: 1.25rem;
		line-height: 2.0rem;
		color: #FFF;
	}
	.gnav ul.hd_bnrs2 li:nth-of-type(1) {
		border-radius: 5px 0 0 5px;
	}
	.gnav ul.hd_bnrs2 li:nth-of-type(2) {
		border-radius: 0 5px 5px 0;
	}
	.gnav ul.hd_bnrs2 li:nth-of-type(1) a {
		background: #DC143C;
		border: 1px solid #BE235C;
		border-radius: 5px 2px 2px 5px;
	}
	.gnav ul.hd_bnrs2 li:nth-of-type(2) a {
		background: #F9645E;
		border: 1px solid #BE235C;
		border-radius: 2px 5px 5px 2px;
	}
	.hd_bnrs2 li a {
		top: 0 !important;
    	box-shadow: 0 5px 0 0 #BE235C !important;
		margin-top: 4px !important;
		margin-bottom: 4px !important;
		transition: all 0.1s ease;
	}
	.hd_bnrs2 li a:hover {
		top: 4px !important;
    	box-shadow: 0 0 0 0 #BE235C !important;
		margin-top: 4px !important;
		margin-bottom: 4px !important;
	}
	.hd_bnrs2 li:nth-of-type(1) a:hover {
		border: 1px solid #BE235C !important;
	}
	.hd_bnrs2 li:nth-of-type(2) a:hover {
		border: 1px solid #BE235C !important;
	}
	.gnav > ul.hd_bnrs span,
	.gnav > ul.hd_bnrs2 span {
		width: 100%;
		padding-bottom: 1.5%;
		text-align: center;
		font-weight: bold;
		font-size: 1.15rem !important;
		letter-spacing: 0.25rem;
	}
	.gnav > ul.hd_bnrs span:nth-of-type(1),
	.gnav > ul.hd_bnrs2 span:nth-of-type(1) {
		display: block;
		font-size: 1.15rem;
	}
	.gnav > ul.hd_bnrs span:nth-of-type(2),
	.gnav > ul.hd_bnrs2 span:nth-of-type(2) {
		display: block;
		font-size: 1.45rem !important;
	}
	.hd_bnrs img {
		display: inline-block;
		width:100%;
	}
	.hd_bnrs div,
	.hd_bnrs2 li {
	}
	.hd_bnrs2 li {
		width: 48%;
	}
	.hd_bnrs2 li:nth-of-type(1) {
		margin-right: 1px;
	}
	.hd_bnrs2 li img {
		display: inline-block;
		width: 80%;
		max-width: 200px;
	}
/* @sp **************************************************/
@media all and (max-width: 1100px){
	.hd_bnrs div,
	.hd_bnrs2 div {
		color: #FFF;
	}
	.hd_bnrs2 li {
		max-width: 35%;
		border: 0;
	}
	.gnav ul.hd_bnrs2 a {
		padding: 10px 15px;
	}
	.hd_bnrs2 li a,
	.hd_bnrs2 li a:hover {
	}
	.hd_bnrs2 span {
		color: #FFF;
	}
}
@media all and (max-height: 990px){
	.hd_bnrs {
		display: none;
	}
}

/*--------------------------------------------------------------------------
	ヘッダーリンク
---------------------------------------------------------------------------*/
	.hd_links {
		text-align: center;
		margin: 30px 0 0;
	}
	.hd_links div {
		width: 100%;
		padding-bottom: 1.5%;
		text-align: center;
		font-weight: bold;
		font-size: 1.15rem;
		letter-spacing: 0.25rem;
	}
	.hd_links a {
		color: #FFF;
		text-decoration: none;
		font-size: 1.2rem;
	}
	.hd_links li {
		display: inline-block;
		margin: 0 2px;
		line-height: 2.5em;
	}
	.hd_links li br {
		display: none;
	}
	.hd_links li img {
		display: inline-block;
		width: 20px;
/*		vertical-align: text-top;*/
		vertical-align: middle;
	}
	.hd_links li a:nth-of-type(2) img {
		display: none;
	}
	.hd_links .hd_ig span {
		padding: 0 3px;
		color: #AB36C1;
	}
	.hd_links .hd_fb span {
		padding: 0 3px;
		color: #4267B2;
	}
/* @sp **************************************************/
@media all and (max-width: 1100px){
	.hd_links {
		margin-top: 30px;
		color: #FFF;
	}
	.hd_links div {
		color: #FFF;
	}
	.hd_links li {
		line-height: 3em;
	}
	.hd_links li a {
		margin: 0 3px;
	}
	.hd_links li a:nth-of-type(2) img {
		display: inline-block;
	}
	.hd_links li br {
		display: block;
	}
	.hd_links li img {
        display: block;
		margin: auto;
		padding:0 5px;
	}
	.hd_links .hd_ig span {
		color: #FFF;
	}
	.hd_links .hd_fb span {
		color: #FFF;
	}
}