﻿

@media screen and (min-width: 751px) {
			
	/*--------------------------------------------------------------------------------------------------------------------------------------------------------
		共通
	--------------------------------------------------------------------------------------------------------------------------------------------------------*/
	/*------------------------------------
		ベース
	------------------------------------*/
	html {
		font-size: 16px;
	}
	
	.common_outer {
		width: 100%;
		max-width: 1240px;
		padding: 0 20px;
		margin: 0 auto;
	}
	
	.pc_display_none {
		display: none;
	}
	
	/* margin */
	.pcMt5 {
		margin-top: 5px;
	}

	.pcMt10 {
		margin-top: 10px;
	}

	.pcMt15 {
		margin-top: 15px;
	}

	.pcMt20 {
		margin-top: 20px;
	}

	.pcMt25 {
		margin-top: 25px;
	}

	.pcMt30 {
		margin-top: 30px;
	}

	
	/*------------------------------------
		パーツ
	------------------------------------*/
	/* タイトル */
	.common_title {
		font-size: 1.62rem;
	}
	
	.common_en_title {
		font-size: 2.62rem;
	}
	
	.common_en_title span {
		font-size: 1rem;
		font-weight: bold;
	}

	/* テキスト（イントロ） */
	.common_txt_intro {
		font-size: 1.12rem;
	}
	
	/* 共通ボタン */
	.common_btn {
		border: solid 2px #3f769d;
		padding: 9px 8px;
	}
	
	.common_btn span::after {
		border-left: 7px solid #3f769d;
	}
	
	/* 開閉ボタン */
	.opening_closing_title a::after {
		right: 21px;
		width: 8px;
		height: 8px;
	}

	/* 注釈 */
	.common_attention li,
	.common_attention {
		font-size: 0.97em;
	}
	
	/* 電話 */
	.txt_tel {
		font-size: 1.6vw;
		background-size: 25px;
		padding-left: 27px;
	}
	
	/* pdf_list */
	.pdf_list {
		margin-top: 40px;
		display: flex;
		justify-content: center;
	}
	
	.pdf_list li {
		margin: 0 1%;
		width: 32%;
	}
	
	.pdf_list li a {
		background-size: 15px;
		background-position: 12px center;
		padding: 8px 12px 8px 35px;
	}
	
	.pdf_list li a span {
		font-size: 0.9rem;
		background-size: 14px;
	}
	
	/* プラグインCSSの上書き */
	.slick-dots {
		margin-top: 45px;
	}
	
	.slick-dots li {
		margin: 0 8px;
	}
	
	.slick-dots li span {
		width: 13px;
		height: 13px;
	}
	
	/*------------------------------------
		header
	------------------------------------*/
	/* header */
	#header_wrap {
		padding: 2px 10px;
	}
	
	#header_wrap h1 {
		width: auto;
	}
	
	#header_wrap p {
		font-size: 0.94rem;
	}
	
	#header_wrap p a {
		padding-left: 15px;
	}
	
	#header_wrap p a::after {
		width: 4px;
		height: 6px;
		border: 4px solid transparent;
		border-left: 6px solid #c8260b;
	}
	
	/* ナビ */
	ul.nav_list {
		width: 100%;
		max-width: 1240px;
		padding: 0 20px;
		margin: 0 auto;
	}
	
	ul.nav_list li {
		width: 25%;
		margin-top: 0;
	}
		
	ul.nav_list li a {
		font-size: 1rem;
		height: 80px;
		line-height: 1.5;
	}
	
	ul.nav_list li a::after {
		right: 15px;
	}
	
	#nav_jump {
		background-color: #2e7a9f;
	}
	
	#nav_jump ul.nav_list li a {
		padding: 0 3vw;
		background: url("../image/common_menu_bg01_pc.gif") no-repeat center center / cover;
	}
	
	#nav_jump ul.nav_list li a::after {
		width: 5px;
		height: 7px;
		border: 4px solid transparent;
		border-top: 7px solid #fff;
	}
	
	#nav_win {
		background-color: #d5e5ec;
	}
	
	#nav_win ul.nav_list {
		justify-content: center;
	}
	
	#nav_win ul.nav_list li a {
		padding: 0 3vw;
		background: url("../image/common_menu_bg02_pc.gif") no-repeat center center / cover;
	}
	
	#nav_win ul.nav_list li a::after {
		width: 14px;
	}
	
	#nav_win ul.nav_list li a span {
		font-size: 112%;
	}
	
	#nav_win ul.nav_list li#nav_jcb a span,
	#nav_win ul.nav_list li#nav_visa a span {
		background-size: 23%;
	}
	
	#index_page #nav_win ul.nav_list li a span {
		padding: 10px 0 10px 20%;
	}
	
	.card_page #nav_win ul.nav_list li a span {
		padding: 10px 10% 10px 15%;
	}
		
	/*------------------------------------
		footer
	------------------------------------*/
	#footer_wrap #fixed_sec {
		padding: 18px 0;
	}
	
	#footer_wrap #fixed_sec div {
		width: 24%;
		margin: 0 1%;
		max-width: 336px;
	}
	
	#footer_wrap #fixed_sec #pagetop {
		position: absolute;
		right: 10px;
		width: 61px;
	}
	
	
	#footer_wrap #copy_sec {
		padding: 13px 0;
	}
	
	#footer_wrap #copy_sec small {
		font-size: 0.69rem;
	}	
	/*------------------------------------
		コンテンツ
	------------------------------------*/
	/* Pick Up */
	#pickup_sec {
		background-color: #e6eff3;
		padding: 65px 0 55px;
	}
	
	#pickup_sec .common_outer {
		max-width: 100%;
		padding: 0;
	}
	
	#pickup_sec .slick_slider {
		margin-top: 25px;
	}
	
	#pickup_sec .slick_slider .slick-slide {
		margin: 0 25px;
	}
	
	#pickup_sec .slick-arrow {
		width: 50px;
		height: 50px;
		background-color: #3f769d;
		border-radius: 50%;
		bottom: -15px;
	}
		
	#pickup_sec .slick-prev {
		left: 22px;
	}
	
	#pickup_sec .slick-next {
		right: 22px;
	}
	
	#pickup_sec .slick-prev::before {
		border-bottom: solid 2px #fff;
		border-left: solid 2px #fff;
		left: 21px;
	}

	#pickup_sec .slick-next::before {
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		right: 21px;
	}
	
	
	/* 平日の日中に窓口へ行くのが難しいお客さま */
	dl.weekday_area {
		margin: 30px auto 0;
		border: solid 3px #e6eff3;
		width: 100%;
	}
	
	dl.weekday_area dt {
		font-size: 1.12rem;
		padding: 5px 29% 5px 18px;
	}
	
	dl.weekday_area dt img {
		width: 28%;
		max-width: 92px;
		right: 6px;
	}
	
	dl.weekday_area dd {
		padding: 18px 15px;
		line-height: 1.5;
	}
	
	dl.weekday_area dd div {
		margin-top: 15px;
	}
	
	dl.weekday_area dd div .common_btn {
		padding: 5px 8px;
	}
	
	/* お申し込み方法 */
	#how_sec {
		padding: 170px 0 0;
	}
	
	#how_sec .how_bg01 {
		background: url("../image/common_how_bg_pc.gif") no-repeat center bottom / 100%;
	}

	#how_sec .how_bg02 {
		padding-bottom: 100px;
	}

	#how_sec ul#how_list {
		display: flex;
		justify-content: center;
		margin-top: 55px;
	}
	
	#how_sec ul#how_list > li {
		width: 33%;
		padding: 0 2.5%
	}
	
	#how_sec ul#how_list > li:nth-child(2) {
		width: 34%;
		border-left: solid 1px #cdcdcd;
		border-right: solid 1px #cdcdcd;
	}
	
	#how_sec ul#how_list li .opening_closing_title {
		margin: 10px auto 0;
		width: 58%;
		max-width: 192px;
	}
	
	#how_sec ul#how_list li .opening_closing_title a {
		pointer-events: none;
	}
	
	#how_sec ul#how_list li .opening_closing_title a::after {
		display: none;
	}
	
	#how_sec ul#how_list li .opening_closing_contents {
		display: block;
		margin-top: 25px;
		padding: 0;
	}
	
	#how_sec ul#how_list li .opening_closing_contents ul.common_list {
		margin-top: 25px;
	}
	
	#how_sec ul#how_list li .opening_closing_contents p.txt_bold + ul.common_list {
		margin-top: 5px;
	}

	#how_sec .opening_closing_contents p.txt_bold {
		margin-top: 30px;
		font-size: 1.06rem;
	}
	
	#how_sec .opening_closing_contents p.txt_bold ul.common_list {
		margin-top: 5px;
	}
	
	#how_sec .opening_closing_contents .how_bn {
		width: 100%;
	}
	
	#how_sec #member_page ul {
		margin-top: 20px;
		justify-content: center;
	}
	
	#how_sec #member_page ul li {
		width: 32%;
		max-width: 382px;
		margin: 0 15px;
	}
	
	#how_sec #member_page > div {
		margin: 20px auto 0;
		width: 380px;
	}
	
	#how_sec #member_page h2 {
		font-size: 1.5rem;
		margin-top: 50px;
		text-align: center;
	}
	
	#how_sec #member_page ol {
		margin: 30px auto 0;
		max-width: 1100px;
	}
	
	#how_sec #member_page ol li p.opening_closing_title a,
	#how_sec #member_page ol li p span {
		padding: 13px 7px;
	}
	
	#how_sec #member_page ol li p.opening_closing_title a::before,
	#how_sec #member_page ol li p.opening_closing_title a::after {
		width: 15px;
		height: 3px;
	}
	
	#how_sec #member_page ol li .opening_closing_contents {
		padding-bottom: 18px;
	}
	
	#how_sec #member_page ol li .opening_closing_contents ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	#how_sec #member_page ol li .opening_closing_contents ul li {
		max-width: 100%;
		width: 33.3%;
		margin: 0;
	}
	
	#how_sec #member_page ol li .opening_closing_contents ul li:nth-child(n+4) {
		margin-top: 10px;
	}

	/* お申込み手続きについて */
	#procedure_area {
		margin: 55px auto 0;
		padding: 55px 50px;
	}
	
	#procedure_area .common_title {
		font-size: 1.5rem;
	}
	
	#procedure_area .common_list {
		margin-top: 20px;
	}
	
	/* よくあるご質問 */
	#faq_sec {
		padding: 90px 0 95px;
	}
	
	#faq_sec .faq_area {
		max-width: 1000px;
		margin: 20px auto 0;
	}

	#faq_sec h2 + .faq_area {
		margin-top: 60px;
	}
	
	#faq_sec .faq_area p.opening_closing_title a {
		padding: 25px 45px 25px 72px;
		background-position: 25px 20px;
		background-size: 34px;
	}
	
	#faq_sec .faq_area .opening_closing_contents {
		padding: 25px 45px 25px 72px;
		background-position: 25px 22px;
		background-size: 34px;
	}
	
	#faq_sec .faq_area .opening_closing_contents dl dt {
		margin-top: 20px;
		font-size: 1.12rem;
	}
	
	/* お問い合わせ・ご相談はこちら */
	#contact_sec {
		padding: 55px 0 65px;
	}

	#contact_sec h2 {
		font-size: 1.87rem;
	}
	
	#contact_sec #contact_area {
		display: flex;
		justify-content: space-between;
	}
	
	#contact_sec #contact_area .contact_inner {
		width: 61%;
		padding: 24px 28px;
	}

	#contact_sec #contact_area .contact_inner + .contact_inner {
		width: 37.5%;
	}
	
	#contact_sec #contact_area .contact_inner .contact_box {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}
	
	#contact_sec #contact_area .contact_inner .contact_box dl {
		width: 49%;
		margin: 0;
	}
	
	#contact_sec #contact_area .contact_inner .contact_box dl + dl {
		margin: 0;
	}
	
	#contact_sec #contact_area .contact_inner .contact_box dl dt {
		padding: 7px 5px;
	}
	
	#contact_sec #contact_area .contact_inner .contact_box dl dd {
		padding: 10px 5px 15px;
	}
	
	#contact_sec #contact_area .contact_inner .img_store {
		margin-top: 40px;
	}
	
	#contact_sec #contact_area .contact_inner .img_store img {
		width: 61px;
	}
	
	#contact_sec #contact_area .contact_inner .img_store + div {
		margin: 55px auto 0;
		max-width: 240px;
	}	
	
	
	/*--------------------------------------------------------------------------------------------------------------------------------------------------------
		index.html
	--------------------------------------------------------------------------------------------------------------------------------------------------------*/
	/* Pick Up */
	#index_page #pickup_sec {
		margin-top: 50px;
	}

	/* 「ほくぎんデビット」とは？ */
	#about_sec {
		padding: 85px 0 55px;
	}
	
	#about_sec h2 br {
		display: none;
	}
	
	#about_sec #about_area {
		margin-top: 55px;
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
	}
	
	#about_sec #about_area #about_txt {
		width: 70%;
		margin-left: 30px;
	}
	
	#about_sec #about_area #about_txt p {
		  margin-top: 20px;
	}
	
	#about_sec #about_area #about_img {
		width: 30%;
		max-width: 350px;
		margin: 0;
	}
	
	/* 詳しくみる */
	#detail_sec {
		padding: 160px 0 40px;
	}
	
	#detail_sec .common_outer ul {
		max-width: 700px;
		margin: 80px auto 0;
		justify-content: center;
	}
	
	#detail_sec .common_outer ul li {
		width: 44%;
		max-width: 310px;
		margin: 0 18px;
	}
	
	#detail_sec .common_outer ul li a {
		border-radius: 18px;
	}
	
	#detail_sec .common_outer ul li h3 {
		font-size: 200%;
	}
	
	#detail_sec .common_outer ul li .detail_img {
		margin: 25px 10% 0;
	}
	
	#detail_sec .common_outer ul li .detail_btn {
		margin: 22px 9% 0;
		padding: 6px;
		font-size: 112%;
		font-weight: bold;
	}
	
	#detail_sec .common_outer ul li .detail_btn::after {
		content: none;
	}
	
	#detail_sec .common_outer ul li .detail_btn span {
		position: relative;
		padding: 0 20px;
	}

	#detail_sec .common_outer ul li .detail_btn span::after {
		content: "";
		width: 8px;
		height: 8px;
		border: 5px solid transparent;
		border-left: 8px solid #3f769d;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	
	#detail_sec .common_outer .sp_scroll {
		margin: 70px auto 0;
		overflow-x: auto;
		text-align: center;
		max-width: 800px;
		padding: 55px 30px;
	}
	
	#detail_sec .common_outer .sp_scroll img {
		width: auto;
	}
	
	
	/*--------------------------------------------------------------------------------------------------------------------------------------------------------
		jcb_debit.html　visa_debit 共通
	--------------------------------------------------------------------------------------------------------------------------------------------------------*/
	/*------------------------------------
		header
	------------------------------------*/
	/* ナビ */
	.card_page #nav_win ul.nav_list li {
		width: 50%;
	}
	
	/*------------------------------------
		コンテンツ
	------------------------------------*/
	#movie_sec {
		padding: 70px 0;
	}
	
	#movie_sec .common_outer {
		max-width: 840px;
	}
	
	#movie_sec .movie_outer {
		max-width: 800px;
		margin: 0 auto;
	}

	/* point */
	#point_sec {
		padding: 100px 0 60px;
	}
	
	#point_sec ol.point_list {
		max-width: 1000px;
		margin: 0 auto;
	}

	#point_sec ol.point_list > li {
		margin-top: 20px;
	}
	
	#point_sec ol.point_list li h2 .point_num {
		padding: 22px 28px;
		font-size: 1.19rem;
	}
	
	#point_sec ol.point_list li h2 .point_title {
		font-size: 1.37rem;
		padding: 6px 40px 6px 30px;
	}
	
	#point_sec ol.point_list .opening_closing_contents {
		padding: 50px 6%;
	}
	
	#point_sec ol.point_list .opening_closing_contents h3 {
		font-size: 1.21rem;
	}
	
	#point_sec ol.point_list .opening_closing_contents h3 span {
		font-size: 1.31rem;
	}
	
	#point_sec ol.point_list .opening_closing_contents h3 br {
		display: none;
	}
	
	#point_sec ol.point_list .opening_closing_contents table {
		margin: 25px auto 0;
		max-width: 800px;
		border: solid 1px #d7d7d7;
	}
	
	#point_sec ol.point_list .opening_closing_contents table th {
		width: 47%;
	}
	
	#point_sec ol.point_list .opening_closing_contents h4 {
		  margin-top: 20px;
	}
	
	#point_sec ol.point_list .opening_closing_contents table + h4 {
		  margin-top: 35px;
	}

	#point_sec ol.point_list .opening_closing_contents div.mt30 img {
		padding: 0 4.5%;
	}
	
	#point_sec ol.point_list .opening_closing_contents .common_list li {
		margin-top: 10px;
	}
	
	#point_sec ol.point_list .opening_closing_contents .pc_flex_direction_row {
		display: flex;
	}
	
	#point_sec ol.point_list #common_point02 p + h3 {
		margin-top: 20px;
	}
	
	#point_sec ol.point_list #common_point02 h3 {
		margin-top: 40px;
	}
	
	#point_sec ol.point_list #common_point02 h3 + h4 {
		margin-top: 22px;
	}
	
	#point_sec ol.point_list #common_point02 h4 {
		margin-top: 43px;
	}
	
	#point_sec ol.point_list #common_point02 h4 img {
		width: 53px;
	}
	
	#point_sec ol.point_list #common_point02 .pc_flex_direction_row .point_img {
		width: 39.5%;
		margin-top: 0;
	}
	
	#point_sec ol.point_list #common_point02 .pc_flex_direction_row .point_img + p {
		width: 55%;
		margin-left: 4.5%;
	}
	
	#point_sec ol.point_list #common_point02 .point_slider {
		display: flex;
		justify-content: space-between;
		margin-top: 18px;
	}
	
	#point_sec ol.point_list #common_point02 .point_slider > div {
		width: 32%;
	}
	
	
	/* ご利用概要 */
	#outline_sec {
		padding: 150px 0 40px;
	}
	
	#outline_sec .outline_table {
		margin: 55px auto 0;
		max-width: 1000px;
	}

	#outline_sec .outline_table th {
		padding: 20px;
		font-size: 1rem;
	}
	
	#outline_sec .outline_table td {
		padding: 20px 30px;
		font-size: 1rem;
	}
		
	#outline_sec .outline_table td .common_attention li,
	#outline_sec .outline_table td p.common_attention {
		font-size: 1rem;
		margin-top: 10px;
	}
	
	#outline_sec .outline_table td .common_list + div {
		margin-top: 15px;
	}
	
	#outline_sec .outline_table td a.common_btn_gray {
		margin: 0;
		display: inline-block;
		padding: 5px 15px 5px 25px;
	}
	
	#outline_sec .outline_table td a.common_btn span {
		padding-right: 20px;
	}
	
	#outline_sec .outline_table td a.common_btn_gray[target="_blank"] span::after {
		width: 13px;
	}
	
	#outline_sec .outline_table td .outline_table th {
		font-weight: bold;
	}
	
	#outline_sec .outline_table td .outline_table tr:first-child th {
		padding: 10px;
	}
	
	#outline_sec .outline_table td .outline_table th,
	#outline_sec .outline_table td .outline_table td {
		padding: 18px 23px;
	}
	
	#outline_sec .outline_table td .outline_table + p.common_attention {
		margin-top: 20px;
	}
	
	#outline_sec .outline_table td .btn_right {
		text-align: right;
	}
	
	#outline_sec .outline_table td .common_link_arrow[target="_blank"]::after {
		width: 14px;
		height: 11px;
		right: -19px;
	}
	
	.card_page #contact_sec #contact_area .contact_inner .contact_box dl {
		width: 100%;
	}
	
	.card_page #contact_sec #contact_area .contact_inner > div {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	
	/*--------------------------------------------------------------------------------------------------------------------------------------------------------
		jcb_debit.html
	--------------------------------------------------------------------------------------------------------------------------------------------------------*/	
	#jcb_page #point_sec ol.point_list #jcb_point03 div {
		margin: 0;
	}
	
	#jcb_page #point_sec ol.point_list #jcb_point03 .pc_flex_direction_row {
		justify-content: space-between;
	}
	
	#jcb_page #point_sec ol.point_list #jcb_point03 .pc_flex_direction_row .point_txt {
		width: 55%;
	}
	
	#jcb_page #point_sec ol.point_list #jcb_point03 .pc_flex_direction_row .point_txt #img_oki_doki {
		width: 28%;
		margin: 0 auto;
	}
	
	#jcb_page #point_sec ol.point_list #jcb_point03 .pc_flex_direction_row .point_txt h3 {
		font-size: 1.37rem;
	}
	
	#jcb_page #point_sec ol.point_list #jcb_point03 .pc_flex_direction_row .point_txt p {
		margin-top: 18px;
	}
	
	#jcb_page #point_sec ol.point_list #jcb_point03 .pc_flex_direction_row .point_txt p + p {
		margin-top: 35px;
	}
	
	#jcb_page #point_sec ol.point_list #jcb_point03 .pc_flex_direction_row .point_img {
		width: 40%;
	}
	
	#jcb_page #point_sec ol.point_list #jcb_point04 .pc_flex_direction_row {
		justify-content: center;
		align-items: center;
	}
	
	#jcb_page #point_sec ol.point_list #jcb_point04 .pc_flex_direction_row #txt_plus {
		font-size: 1.37rem;
	}
	
	#jcb_page #point_sec ol.point_list #jcb_point04 .pc_flex_direction_row #txt_plus + div {
		margin-left: 4%;
		margin-right: 3%;
	}
	
	#jcb_page #point_sec ol.point_list #jcb_point04 .pc_flex_direction_row .point_comment {
		font-size: 1.12rem;
		margin-top: 0;
	}
	
	#jcb_page #point_sec ol.point_list #jcb_point04 .pc_flex_direction_row #img_card {
		margin-top: 15px;
		width: 64%;
	}
	
	
	/*--------------------------------------------------------------------------------------------------------------------------------------------------------
		visa_debit.html
	--------------------------------------------------------------------------------------------------------------------------------------------------------*/	
	#visa_page #point_sec ol.point_list #visa_point03 .pc_flex_direction_row {
		align-items: center;
	}
	
	#visa_page #point_sec ol.point_list #visa_point03 p {
		margin: 0 0 0 4.5%;
	}
	
	#visa_page #how_sec ul#how_list > li:nth-child(2) {
		border-right: none;
	}
	
	/* footer */
	#visa_page #footer_wrap #fixed_sec div {
		max-width: 380px;
	}
	
}


@media screen and (min-width: 1201px) {
	
	/*--------------------------------------------------------------------------------------------------------------------------------------------------------
		共通
	--------------------------------------------------------------------------------------------------------------------------------------------------------*/
	/*------------------------------------
		パーツ
	------------------------------------*/
	/* 電話 */
	.txt_tel {
		font-size: 1.3rem;
	}
	
	/* pdf_list */
	.pdf_list li {
		margin: 0 15px;
		width: 28%;
	}
	
	.pdf_list li a {
		padding-left: 48px;
	}
	
	.pdf_list li a span {
		font-size: 1rem;
	}

	
}

