@charset "utf-8";

/*
	ヘッダー、グローバルメニュー専用css

*/

/* -----------------------------------------------
	global-nav
-------------------------------------------------- */
	/* -----------------------------------------------
		header > PCのみ
	-------------------------------------------------- */
	@media (min-width:721px) {
		/* PC版グローバルメニュー PC_menu */
		.pc_menu {
		}
		.pc_gloval-nav {
		}
		.pc_gloval-nav {
			display: flex;
			justify-content: space-between;
			list-style: none;
			margin: 0 0 0.5rem 0;
		}
		.pc_gloval-nav li {
			width: auto;
			flex: auto;
			display: flex;
		}
		.pc_gloval-nav li:first-child, 
		.pc_gloval-nav li+li {
			border-left: 1px solid #ccc;
		}
		.pc_gloval-nav li:last-child {
			border-right: 1px solid #ccc;
		}
		.pc_gloval-nav li a {
			width: 100%;
			display: block;
			text-align: center;
			color: #222;
			font-size: 1rem;
			line-height: 1rem;
			padding: 0.25rem 0rem 0.25rem 0; /*height 3remになるよう調整*/
			position: relative; /*下線固定*/
		}
		/*英語*/
		.pc_gloval-nav li a .pc_gloval-nav_en {
			margin-top: 0.25rem;
			display: block;
			color: #aaa;
			font-size: 0.75rem;
			font-weight: normal;
		}
		.pc_gloval-nav li a:hover {
			color: #1252B1;
			text-decoration: none;
			padding-bottom: 0.25rem;
		}
		.pc_gloval-nav li a:after { /*下線*/
			content: '';
			position: absolute;
			left: 0;
			bottom: -0.5rem;
			width: 0;
			background-color: #eee;
			border-bottom-width: 2px;
			border-bottom-style: solid;
			display: block;
		}
		.pc_gloval-nav li a:hover:after { /*hoverで下線を出す*/
			width: 100%;
			border-bottom-color: #1252B1;
		}
		.pc_gloval-nav li a:after { /*下線*/
			border-bottom-color: #1252B1;
		}

		/*PC版　スクロール*/
		.scrolled .header-background {
			background-color: #fff;
			box-shadow: 0 1px 3px 0px rgba(0,0,0,0.2);
		}
		 /* スマホ版ナビ nav-toggle 非表示*/
		#nav-toggle {
			display: none;
		}
		.sp_menu {
			display: none;
		}
	}
	/* -----------------------------------------------
		header > SPのみ
	-------------------------------------------------- */
	@media (max-width:720px) {
		/*PC版ナビ非表示*/
		.pc_menu {
			display: none;
		}
		#wrapper {
			position: relative;
		}
		/*------ ハンバーガーメニューボタン（toggle_menu） ------*/
		#nav-toggle {
			display: block;
			position: fixed;
			top: 0;
			right: 0;
			height: 60px;
			width: 60px;
			cursor: pointer;
			z-index: 6;
			background-color: #1252B1;
		}
		#nav-toggle > div {
			position: relative;
			width: 34px;
		}
		#nav-toggle > p { /* menuの文字 */
			font-size: 10px;
			color: #fff;
			position: absolute;
			display: block;
			width: 100%;
			top: 36px;
			text-align: center
		}
		#nav-toggle span { /*三本線*/
			width: 100%;
			height: 1px;
			left: 14px;
			display: block;
			background: #fff;
			position: absolute;
			transition: transform 0.3s ease-in-out, top 0.3s ease;
		}
		#nav-toggle span:nth-child(1) {
			top: 10px;
		}
		#nav-toggle span:nth-child(2) {
			top: 20px;
		}
		#nav-toggle span:nth-child(3) {
			top: 30px;
		}
		#nav-toggle:hover span:nth-child(1) {
			top: 15px;
		}
		#nav-toggle:hover span:nth-child(3) {
			top: 24px;
		}
		
		/*スクロール*/
		.scrolled #nav-toggle {
			/*background-color: #1764D8;*/
		}
		
		
		/*メニューを開いたとき*/
		.open #nav-toggle { 
			border: 0;
			background-color: #1252B1;
		}
		.open #nav-toggle span {
			background: #fff;
		}
		.open #nav-toggle > p {
			color: #fff;
		}
		.open #nav-toggle span:nth-child(1) {
			top: 20px;
			transform: rotate(45deg);
		}
		.open #nav-toggle span:nth-child(2) {
			top: 20px;
			width: 0;
			left: 50%;
		}
		.open #nav-toggle span:nth-child(3) {
			top: 20px;
			transform: rotate(-45deg);
		}
	
		/** スマホ版グローバルメニュー **/
		.sp_menu {
			/*画面を覆う*/
			/*width: 100%;*/
			width: calc(100% - 2rem);
			height: 100%;
			/*background: rgba(0, 0, 0, 0.8);*/
			background:#fff;
			color: #222;
			position: fixed;
			top: 0;
			left: auto;
			right: 0;
			bottom: 0;
			z-index: 5;
			/*テキスト*/
			/*font-size: 1.5rem;*/
			/*text-align: center;*/
			/*普段は不可視*/
			visibility: hidden;
			opacity: 0;
			/*flexbox*/
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			/*変化*/
			transition: opacity 0.6s ease, visibility 0.6s ease;
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch; /*慣性スクロールを追加*/
		}
		.sp_menu a {
			display: block;
			color: #222;
			text-decoration: none;
			transition: color 0.6s ease;
		}
		.sp_menu a:hover {
			color: #3B941C; /*タッチ後、違う要素がタッチされるまでの色*/
			text-decoration: underline;
			background-color: #fafafa;
		}

		/** スマホ版グローバルメニュー全般の挙動 **/
		.sp_menu ul {
			list-style: none;
		}
		.sp_menu ul li {
			/* border-left: 0;*/
			/*opacity: 0;
			transform: translateX(200px);
			transition: transform 0.2s ease, opacity 0.2s ease;*/
		}
			/*一行ずつ表示アニメ
		.sp_menu ul li:nth-child(2) { 
			transition-delay: 0.15s;
		}
		.sp_menu ul li:nth-child(3) {
			transition-delay: 0.3s;
		}
		.sp_menu ul li:nth-child(4) {
			transition-delay: 0.45s;
		}
		.sp_menu ul li:nth-child(5) {
			transition-delay: 0.6s;
		}
		.sp_menu ul li:nth-child(6) {
			transition-delay: 0.75s;
		}
		.sp_menu ul li:nth-child(7) {
			transition-delay: 0.9s;
		}*/

	

		/* open: メニューを開くとclass.open付与 表示させる */
		.open {
			overflow: hidden;
		}
		.open .sp_menu {
			visibility: visible;
			opacity: 1;
			box-shadow: -6px 0px 12px -6px rgba(0,0,0,0.29);
		}
		.open .sp_menu li {
			opacity: 1;
			transform: translateX(0);
			transition: transform 1s ease, opacity 0.9s ease;
		}

		/* スマホ版グローバルメニュー（メニュースタイル）sp_gloval-nav*/
		.sp_gloval-nav {
			font-size: 1.5rem;
		}
		.sp_gloval-nav a {
			/*padding: 0.5rem 0;*/
		}
		.sp_gloval-nav-list li > a:hover {
			color: #1764D8;
		}
		.sp_gloval-nav-list li > a {
			border-bottom: 1px solid #aaa;
			cursor: pointer;
		}
		.sp_gloval-nav-list_second { /*リスト（第二階層目）*/
			/*display: none;*/
			margin-bottom: 1rem;
		}
		.sp_gloval-nav-list_second > li {
			display: block;
			color: #fff;
			padding: 0;
			margin: 0;
			position: relative;
		}
		.sp_gloval-nav-list_second > li > a {
			font-size: 1rem;
			line-height: 1.25em;
			padding: 0.5rem 0;
			margin: 0;
		}
		.sp_gloval-nav-list_second > li > a:hover {
			color: #1764D8;
			text-decoration: underline;
		}


		/*-- スマホ版グローバルメニュー（アコーディオンメニューの動作）--*/
		div.accordion {
			position: absolute; /*開閉で移動しないよう固定*/
			left: 50px;
			right: 50px;
			top: 80px;
			width: calc(100% - 100px);
			/*width: 80%;*/
			margin: 0 auto;
			padding-bottom: 50px /*見切れ対策*/
		}
		div.accordion > ul > li > a {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		div.accordion > ul > li > a:hover,
		div.accordion > ul > li > a:active {
			/*background-position: right 1rem center;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			transition: all  0.3s ease;*/
		}
		
		/*-- 1つずつのスタイル --*/
		.sp_gloval-nav--access .icon,
		.sp_gloval-nav--tel .icon,
		.sp_gloval-nav--contact .icon {
			margin-right: 0.5rem;
			width: 1.125rem;
			height: auto;
		}
		/*slug*/
		.sp_gloval-nav--slug {
			font-weight: normal;
			font-size: 0.7rem;
			color: #aaa;
			display: block;
			width: 100%;
		}
		/*文字サイズ*/
		.sp_gloval-nav-list .h_fontsize span {
			margin-right: 0.5rem;
			letter-spacing: 1px;
		}
		.sp_gloval-nav-list .h_fontsize {
			padding: 0.5rem;
		}
		.sp_gloval-nav-list .h_fontsize a {
			width: 3rem;
		}
		.subnav-list--fontsize+.subnav-list--search {
			margin-top: 1rem;
		}
		/*検索ボックス*/
		.subnav-list--search input {
			height: 2rem;
			line-height: 1.5em;
			border-width: 2px;
		}
		.sp_gloval-nav-list .subnav-list--search input[type="submit"] {
			font-size: 0.875rem;
			padding: 0.25rem 1rem;
		}
		/*リンク*/
		.sp_gloval-nav--item a {
			font-weight: bold;
			padding: 1rem 0;
		}
		/*金融機関の皆様へ*/
		.sp_gloval-nav--item_member .icon {
			width: 1em;
			height: 1em;
			margin-right: 0.75rem;
		}
		/*snsアイコン*/
		.sp_gloval-nav-list--sns {
			margin: 20px auto 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			gap: 20px;
		}
		.sp_gloval-nav-list--sns li a{
			border-bottom: none;
		}
		.sp_gloval-nav-list--sns img {
			width: auto;
			height: auto;
			object-fit: unset;
		}
		.sp_gloval-nav-list--sns li a[target="_blank"]:after{
			content: none;
		}
	}