/*------------------------------
	コンテンツ
-------------------------------*/
html {scroll-behavior: smooth;}

body { font: 14px/1.5em "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic"; color:#333333; }

a { color:#e0416c; }
a:hover { color:#f3809f; text-decoration:none; }

/*share*/
.spDisplay { display:none; }
.pcDisplay { display:block; }
.txtBold { font-weight:bold; }

/*header*/
#headerWrap { width:100%; border-bottom:3px solid #d60b16; }
#headerWrap h1 { margin:20px 20px 10px 20px; }

/*area*/
#contentsWrap { width:100%; background:url("../image/bg01.jpg") no-repeat center top / contain; line-height:1.8; letter-spacing:0.6px; padding:0 20px; box-sizing:border-box; }
#contentsWrap #contentsSec { width:100%; max-width:960px; margin:0 auto 70px; }

/*h*/
#contentsWrap #contentsSec h2 { font-size:150%; font-weight:bold; letter-spacing:1px; padding-top:70px; padding-left:1em; text-indent:-1em; }
#contentsWrap #contentsSec h2 span { color:#da3e6a; }
#contentsWrap #contentsSec h2 + p { margin:10px 0 0 25px; }

/*開閉*/
#contentsWrap #contentsSec .ocArea { background:url("../image/bg02.gif"); padding:30px 0 10px 0; margin-top:20px;}
#contentsWrap #contentsSec .ocArea ul.ocInner li { margin:30px 30px 0; }
#contentsWrap #contentsSec .ocArea ul.ocInner li:first-child { margin:0 30px 30px; }
#contentsWrap #contentsSec .ocArea ul.ocInner li .hBox h3 { background:#ffffff; border-left:5px solid #771732; font-size:105%; }
#contentsWrap #contentsSec .ocArea ul.ocInner li .hBox h3 span { background:url("../image/icon_ten.gif") no-repeat 3px 10px; padding-left:1.2em; display:inline-block; }
#contentsWrap #contentsSec .ocArea ul.ocInner li .hBox h3 a { padding:12px 60px 12px 10px; display:block; color:#000000; text-decoration:none; background:url("../image/icon_plus.png") no-repeat right 20px center; }

#contentsWrap #contentsSec .ocArea ul.ocInner li .inBox { margin:15px 0 15px 15px; display:none; }
#contentsWrap #contentsSec .ocArea ul.ocInner li.open .hBox h3 a { background:url("../image/icon_minus.png") no-repeat right 20px center; }
#contentsWrap #contentsSec .ocArea ul.ocInner li .hBox h3 a:hover { background-color:rgba(255,256,234,0.7); }

/*ほくぎんビジネスポータル*/
#contentsWrap #contentsSec .loginArea { display:block; align-items:flex-end; justify-content:space-between; margin-top:20px; background:#ffffff; border:1px solid #b2adad; box-shadow:2px 3px 5px 0 rgba(0, 0, 0, .2); }
#contentsWrap #contentsSec .loginArea .txtInner { width:100%; }
#contentsWrap #contentsSec .loginArea .txtInner h3 { font-size:120%; font-weight:bold; margin:20px 0 0 1.5em; }
#contentsWrap #contentsSec .loginArea .txtInner p { margin:5px 0 20px 3.5em; }
#contentsWrap #contentsSec .loginArea .btnInner { width:100%; text-align:center; margin-bottom:40px; margin-top:40px; }
#contentsWrap #contentsSec .loginArea .btnInner p a { background:url("../image/icon_arrow01.png") #e0416c no-repeat right 20px center; color:#ffffff; padding:18px 120px 18px 115px; border-radius:6px; margin:0 0 0 0; text-decoration:none; }
#contentsWrap #contentsSec .loginArea .btnInner p a:hover { background-color:#f3809f; }

/*お困りの方はこちら*/
#contentsWrap #contentsSec .helpArea { display:block; align-items:flex-end; justify-content:space-between; margin-top:20px; background:#ffffff; border:1px solid #b2adad; box-shadow:2px 3px 5px 0 rgba(0, 0, 0, .2); }
#contentsWrap #contentsSec .helpArea .txtInner { width:100%; }
#contentsWrap #contentsSec .helpArea .txtInner h3 { font-size:120%; font-weight:bold; margin:20px 0 0 1.5em; }
#contentsWrap #contentsSec .helpArea .txtInner p { margin:5px 0 20px 3.5em; }

#contentsWrap #contentsSec .helpArea .btnInner { width:100%; text-align:center; margin-bottom:40px; margin-top:10px; }
#contentsWrap #contentsSec .helpArea .btnInner ul { width:95%; max-width:1000px; margin:0 auto; display:flex; padding:0 20px; box-sizing:border-box; }
#contentsWrap #contentsSec .helpArea .btnInner ul li { width:33%; margin-left:2%; text-align:center; background:none #f6f6f6; }
#contentsWrap #contentsSec .helpArea .btnInner ul li:first-child { margin-left:0; }
#contentsWrap #contentsSec .helpArea .btnInner ul li:nth-child(2),
#contentsWrap #contentsSec .helpArea .btnInner ul li:nth-child(3) { width:33%; }
#contentsWrap #contentsSec .helpArea .btnInner ul li a { border-radius:6px; font-size:100%;  width:32.5%; display:table-cell; vertical-align:middle; padding:18px 25px; border:1px #00509f solid;  background:url(../image/icon_arrow01.png) 97% 50% no-repeat #00509f; text-decoration:none; color:#ffffff; }
#contentsWrap #contentsSec .helpArea .btnInner ul li a img { vertical-align:middle; }
#contentsWrap #contentsSec .helpArea .btnInner ul li a:hover { opacity:0.7; filter:alpha(opacity=70); }

/*お知らせ*/
#contentsWrap #contentsSec .pLink { margin-top: 10px; display: block; text-indent:-9em; padding-left:9em; }
#contentsWrap #contentsSec .pLink::before { content: url(../image/arrow01.gif); margin-right: 7px; }
#contentsWrap #contentsSec .pLink .day { color:#cc0000; font-weight: bold; margin-right: 10px; }

/*マニュアル*/
#contentsWrap #contentsSec #manualArea div.bg { width:100%; max-width:1000px; margin:20px 0 30px; text-align:center; background:url("../image/bg02.gif"); border-radius:10px; padding:25px 3px; box-sizing:border-box; flex-wrap:wrap; justify-content:space-between; }

#contentsWrap #contentsSec #manualArea ul { justify-content:center; display:inline-flex; flex-wrap:wrap; padding-bottom:0; align-items:center; max-width: 800px; }
#contentsWrap #contentsSec #manualArea ul li { width:auto; border-left:1px solid #e0416c; border-radius:0; margin:10px 10px 0 0; padding:0 0 0 10px; margin-bottom:0; }
#contentsWrap #contentsSec #manualArea ul li:nth-child(1) { border: none; }
#contentsWrap #contentsSec #manualArea ul.service li:nth-child(6) { border: none; }

#contentsWrap #contentsSec #manualArea .btnArea { display:block; align-items:flex-end; justify-content:space-between; margin-top:50px; margin-bottom:60px; background:#ffffff; }
#contentsWrap #contentsSec #manualArea .btnArea .btnInner { width:100%; text-align:center; margin-bottom:40px; margin-top:40px; }
#contentsWrap #contentsSec #manualArea .btnArea .btnInner p a { background:url("../image/icon_arrow01.png") #00509f no-repeat right 20px center; color:#ffffff; padding:18px 80px 18px 85px; border-radius:6px; margin:0 0 0 0; text-decoration:none; }
#contentsWrap #contentsSec #manualArea .btnArea .btnInner p a:hover { opacity:0.7; filter:alpha(opacity=70); }

/*安全にご利用になるために*/
#contentsWrap #contentsSec .ocArea ul.ocInner li ul.m_plane_list li { margin-top: 0; }

/*fotter*/
#footerWrap { width:100%; text-align:center; padding:15px 0; }