@charset "shift_jis";
/* ===========================================================
  全体設定とグリッドの設定
=========================================================== */
* { box-sizing: border-box; }
html { font-size: 62.5%; }
:root { --textColor: #333;
--myGreen: #00A08E;
--myYellow: #FABF00;
--mainGreen: #009f8d;
--mainLightGreen: #dfefec;
--mainGray: #313131;
--mainLightGray:#ddd;
--mainGradation:linear-gradient(var(--mainGreen), var(--corporateGreen));
--accentRed: #e91f08;
}
body { font: normal 1.4rem/1.7 "メイリオ", Meiryo, 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Verdana, sans-serif; color: var(--textColor); background-color: #f9f9f9; }
.wrapper { min-width: 320px; }
/* grid system 行設定 */
.row { width: 100%; max-width: 1000px; display: flex; flex-direction: row; flex-wrap: wrap; margin: 0 auto; }
/* grid system 列設定*/
.col1-12 { display: inline-block; width: calc(100% / 12); }
.col2-12 { display: inline-block; width: calc(100% / 12 * 2);}
.col2-5-12 { display: inline-block; width: calc(100% / 12 * 2.5);}
.col3-12 { display: inline-block; width: calc(100% / 12 * 3);}
.col4-12 { display: inline-block; width: calc(100% / 12 * 4);}
.col5-12 { display: inline-block; width: calc(100% / 12 * 5);}
.col6-12 { display: inline-block; width: calc(100% / 12 * 6);}
.col7-12 { display: inline-block; width: calc(100% / 12 * 7);}
.col8-12 { display: inline-block; width: calc(100% / 12 * 8);}
.col9-12 { display: inline-block; width: calc(100% / 12 * 9);}
.col10-12 { display: inline-block; width: calc(100% / 12 * 10);}
.col11-12 { display: inline-block; width: calc(100% / 12 * 11);}
.col12-12 { display: inline-block; width: 100%; }
.pushCol1 { margin-left: calc(100% / 12); }
.pushCol2 { margin-left: calc(100% / 12 * 2);}
.pushCol3 { margin-left: calc(100% / 12 * 3);}
.contentBlock { padding-top: 3em; padding-bottom: 3em; border-top: 1px solid var(--mainGray); }
 @media only screen and (max-width: 768px) {
.row { min-width: 100%; }
.col1-12,
.col2-12,
.col2-5-12,
.col3-12,
.col4-12,
.col5-12,
.col6-12,
.col7-12,
.col8-12,
.col9-12,
.col10-12,
.col11-12,
.col12-12 { width: 100%; }
.col-tb1-4 { width: calc(100% / 4); }
.col-tb1-3 { width: calc(100% / 3); }
.col-tb1-2 { width: calc(100% / 2); }
.col-tb1-1 { width: 100%; }
.pushCol1,
.pushCol2,
.pushCol3 { margin-left: 0; }
}
@media only screen and (max-width: 480px) {
.col1-12,
.col2-12,
.col3-12,
.col4-12,
.col5-12,
.col6-12,
.col7-12,
.col8-12,
.col9-12,
.col10-12,
.col11-12,
.col12-12 { width: 100%; }
.col-sp1-4 { width: calc(100% / 4); }
.col-sp1-3 { width: calc(100% / 3); }
.col-sp1-2 { width: calc(100% / 2); }
.col-sp1-1 { width: 100%; }
}
section { margin: 15px 0; }
section + section { margin-top:60px; }
/* ===========================================================
  header
=========================================================== */
header { border-top: 5px solid var(--myGreen); }
header .col12-12 { padding: 15px 30px; }
.logo { line-height: 1; }
.logo a { display: block; max-width: 410px; }
.logo a img { }
/* ===========================================================
  footer
=========================================================== */
footer { background: var(--mainGray); min-width: 320px; }
/* Copyright
----------------------------------------------------------- */
.copyright { color: #fff; line-height: 1; padding: 10px; font-size: 1.3rem; color: #fff; margin: 30px 0; }
@media only screen and (max-width: 768px) {
.copyright { line-height: 1.3; }
}
/* ===========================================================
  基本設定
=========================================================== */
main .wrapper { margin-bottom: 30px; }
main .wrapper .row { border-radius: 5px; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.2); overflow: hidden; }
.h1Block { color: #fff; line-height: 1; margin-bottom: 10px; }
.h1Block p { line-height: 1.6; margin: 10px 0; }
.contentsBlock { padding: 15px 30px; }
.h1Block .contentsBlock { background-color: var(--mainGreen); }
@media only screen and (max-width: 1000px) {
main .wrapper .row { border-radius: 0; }
}
@media only screen and (max-width: 768px) {
.h1Block { line-height: 1.5; }
.contentsBlock  { padding:15px; }
}
/* text, heading */
h1 { color: #fff; font-size: 2.8rem; margin: 10px 0; }
h2,
h3,
h4 { line-height: 1.2; }
h2 { color: var(--mainGreen); font-size: 2.4rem; padding-bottom: 0.5em; margin-bottom: 1.5em; border-bottom: 4px solid var(--mainGreen); }
h3 { font-size: 2.0rem; margin: 2.6em 0 1em 0; }
h4 { font-size: 1.8rem; margin: 1em 0; }
p { margin-bottom: 1em; }
 @media only screen and (max-width: 768px) {
h1 { font-size: 2.2rem; }
h2 { font-size: 2.0rem; }
h3 { font-size: 1.6rem; }
}
/* ul, ol, dl */
ul,
ol { margin: 0 0 1.5em 0; padding-left: .5em; }
li { margin: 0 0 0 1.5em; }
.no-indent { padding-left: 0; }
.no-indent li { margin-left: 0; }
.myy-discUL { font-weight: bold; list-style: none; padding-left: 0; }
.myy-discUL li { text-indent: -1em; padding-left: 1em; margin-left: .5em; }
.myy-discUL li:before { content: ""; width: .7em; height: .7em; display: inline-block; background-color: #fabf00; border-radius: 50%; margin-right: .3em }
/* table */
table { margin: 1em 0; border-top: 2px solid #7b7b7b; border-bottom: 2px solid #7b7b7b; }
thead th { font-weight: normal; text-align: center; background-color: #E7E7E7; }
tbody th { font-weight: normal; background-color: #f2f2f2; }
th,
td { vertical-align: middle; padding: 10px 15px; border-bottom: 1px solid #c5c5c5; border-right: 1px solid #c5c5c5; }
caption { }
@media only screen and (max-width: 768px) {
.scrollTableBlock { margin: 0 0 30px 0; padding: 15px 0; overflow: auto; position: relative; }
.scrollTableBlock:before { content: "左右にスクロールしてご覧ください"; text-align: center; white-space: nowrap; font-size: 1.4rem; color: var(--textColor); display: block; margin-bottom: 10px; }
.scrollTableBlock table { min-width: 950px; }
.tableSticky { display: block; width: 100%; height: 100%; position: absolute; top: 0; background: url(/mypage/common/image/bg_scrolltable_sticky.png) no-repeat center center, rgba(0,0,0,.4); }
.tableSticky.invisible { display: none; }
}
/* inline elements */
strong { color: var(--accentRed); font-weight: bold; }
em { font-weight: bold; font-style: normal; text-decoration: underline; }
b { font-weight: bold; }
.marker { background-color: #ff0; }
/* a (link) */
a { transition: all 0.2s 0s ease-in-out; }
a:link { color: #06c; text-decoration: underline; }
a:visited { color: #06c; text-decoration: none; }
a:hover,
a:focus,
a:active { color: #69f; text-decoration: none; }
/* ファイルアイコン追加 
   filesize getter対象要素には.filesizeを指定 */
a[target="_blank"]::after { content: url(/mypage/common/image/icon_link_blank.gif); text-decoration: none; margin: 0 4px; }
a[href*=".pdf"]::after,
a[target="_blank"][href*=".pdf"]::after { content: url(/mypage/common/image/icon_link_pdf.png); margin: 0 4px; position: relative; top: 2px; text-decoration: none; }
a.noIcon::after { content: none !important; }/* アイコンを付けたく無い時 */
/* ボタン */
a.btn { color: #fff; text-decoration: none; line-height: 1.5; text-align: center; display: inline-block; padding: 15px; background: linear-gradient(180deg, rgba(63,139,216,1) 0%, rgba(1,78,154,1) 100%); border: 1px solid #024991; border-radius: 5px; }
a.btn:hover { background: linear-gradient(180deg, rgba(1,78,154,1) 0%, rgba(63,139,216,1) 100%); }
/* ===========================================================
  汎用パーツ
=========================================================== */

/* ページトップに戻る
----------------------------------------------------------- */
.page-top { width: 45px; height: 45px; position: sticky; bottom: 0; margin-left: auto; background: rgba(0,61,52,0.4); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, transform 0.3s; z-index: 700; }
.page-top a { display: block; width: 100%; height: 100%; color: #fff; }
.page-top .arrow-up { display: inline-block; vertical-align: middle; position: relative; width: 2px; border-left: 2px solid #fff; height: 17px; background: #fff; left: 50%; top: 10px; }
.page-top .arrow-up:before { content: ''; width: 9px; height: 9px; border: 2px solid #fff; border-left: 0; border-bottom: 0; transform: rotate(-45deg); transform-origin: top right; position: absolute; right: 1px; top: -1px; }
.page-top.show { opacity: 1; visibility: visible; }
.page-top.show:hover { opacity: 0.8; }
@media only screen and (max-width: 768px) {
.page-top { width: 50px; height: 50px; }
.page-top .arrow-up { top: 12px; }
}
/* ===========================================================
  汎用クラス
=========================================================== */
/* display
----------------------------------------------------------- */
.dispFlex { display: flex; }
.pcDispInline { display: inline; }
.pcDispInlineBlock { display: inline-block; }
.pcDispBlock { display: block }
.pcDispFlex { display: flex; }
.pcDispNone { display: none; }
.pcDispTable { display: table; }
@media only screen and (max-width: 768px) {
.spDispInline { display: inline; }
.spDispInlineBlock { display: inline-block; }
.spDispBlock { display: block; }
.spDispFlex { display: flex; }
.spDispNone { display: none; }
.pcDispInlineBlock,
.pcDispFlex,
.pcDispNone,
.pcDispTable { display: block; }
}
/* flex
----------------------------------------------------------- */
.flexShrink0 { flex-shrink: 0; }
/* float
----------------------------------------------------------- */
.floatR,
.floatR-pc { float: right; }
.floatL { float: left; }
.clearfix { clear: both; }
@media only screen and (max-width: 768px) {
.floatR-pc { float: none; }
}
/* サイズ・位置など
----------------------------------------------------------- */
.w100 { width: 100%; }
.h100 { height: 100%; }
.small { font-size: 85%; }
.smaller { font-size: 80%; }
.smallest { font-size: 70%; }
.big { font-size: 125%; }
.bigger { font-size: 150%; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.middle { vertical-align: middle; }
.nobr { display: inline-block; }
.nowrap { white-space: nowrap; }
@media only screen and (max-width: 768px) {
.w100-sp { width: 100%; }
.center-sp { text-align: center; }
}
/* table */
.tableW800-pc { width: 800px; }
.thWFit { width: 0; white-space: nowrap; }
@media only screen and (max-width: 768px) {
.tableW100-sp,
.tableW800-pc { width: 100%; }
}
/* テキスト
----------------------------------------------------------- */
.accentRed { color: var(--accentRed); }
.wordBreak-breakAll { word-break: break-all; }
.bold { font-weight: 600; }
/* インデント
----------------------------------------------------------- */
.indent1em { text-indent: -1.5em; padding-left: 1.5em; }
.indent2em { text-indent: -2.5em; padding-left: 2.5em; }
.indent3em { text-indent: -3.5em; padding-left: 3.5em; }
.indentHead { margin-right: .5em; }
.indent1em .indentHead { display: inline-block; float: left; width: 1em; }
.indent2em .indentHead { display: inline-block; float: left; width: 2em; }
.indentContentsBox { margin-left: 1.5em; }
/* マージン
----------------------------------------------------------- */
.m0 { margin: 0; }
.mb0 { margin-bottom: 0; }
.mb1em { margin-bottom: 1em; }
.mb2em { margin-bottom: 2em; }
.mb3em { margin-bottom: 3em; }
.mt0 { margin-top: 0; }
.mt05em,
.mt05em-pc { margin-top: 0.5em; }
.mt1em,
.mt1em-pc { margin-top: 1em; }
.mt2em,
.mt2em-pc { margin-top: 2em; }
.mr1em { margin-right: 1em; }
.mr2em,
.mr2em-pc { margin-right: 2em; }
.pl0 { padding-left: 0; }
.ml1em,
.ml1em-pc { margin-left: 1em; }
.ml2em,
.ml2em-pc { margin-left: 2em; }
@media only screen and (max-width: 768px) {
.mt1em-sp { margin-top: 1em; }
.mt1em-pc,
.mt2em-pc { margin-top: 0; }
.mr2em-pc { margin-right: 0; }
.ml1em-pc,
.ml2em-pc { margin-left: 0; }
}
/* 動画埋込み */
.videoWrapper { max-width:720px; margin:0 auto; }
.videoBox { width: 100%; aspect-ratio: 16 / 9; }

/* チャプタードロワー */
.chapterBox { margin-bottom:30px; }
.drawerHead { display: flex; background: linear-gradient(#eee, #fff); border: 1px solid #ccc; border-bottom: 2px solid #ccc; cursor: pointer; position: relative; }
.drawerHeadText { display: block; width: calc(100% - 70px); padding: 17px 20px 16px 20px; }
.drawerHeadArrow { display: block; width: 70px; background: url(/common/img/bg_faq_arrow.png) 50% 22px no-repeat; }
.drawerHead.open .drawerHeadArrow { background-position: 50% -82px; }
.drawerBody { display:none; padding: 10px 25px; border: 1px solid #ccc; }
.drawerHead.open + .drawerBody { display:block; }
.chapterOL { list-style: none; padding-left: 0; margin-bottom:0; }
.chapterOL li { display: flex; align-items:baseline; gap: 1em; padding:10px 0; margin:0; border-bottom:1px solid #ccc; }
.chapterOL li:hover { cursor:pointer; background-color:#ffc; }
.chapterTime { color:#fff; font-size:1.3rem; text-align: center; line-height:1; width: 3.5em; padding:5px; flex-shrink: 0; background-color:var(--mainGreen); border-radius:3px; position:relative; bottom:2px; }
.chapterStep { width: 3em; flex-shrink: 0; }

@media only screen and (max-width: 480px) {
#mainContents.faq .qanda dt.open:after{transform:rotate(-45deg);top:28px;}
.drawerHeadText { width:100%; padding-right:30px; }
.drawerHeadText:after { content:"";display:block;width:6px;height:6px;border-top:2px #00f solid;border-right:2px #00f solid; transform:rotate(135deg);position:absolute;top:25px;right:15px; }
.drawerHead.open .drawerHeadText:after {  transform:rotate(-45deg); }
.drawerHeadArrow { display:none; }
.drawerBody { padding: 10px; }
.chapterOL li { font-size:1.3rem; line-height:1.5; }
}

/* ===========================================================
  【ゆうちょ銀行をご利用のお客さま】
=========================================================== */
.japanpostBlock { margin: 30px 0 0 30px; background: url(../../introduction/services/webkouzafurikae/guide/image/bg_dot.png) right bottom; border-radius: 10px; position: relative; }
.japanpostBox { padding:20px; margin: 0; border: 2px solid #fcde7a; border-radius: 5px; background-color: #fff; position: relative; top: -15px; left: -15px; }
.japanpostBox:before { content: ""; display: block; width: 34px; height: 2px; background-color: #fcde7a; border: 2px solid #fff; position: absolute; top: 3px; left: -5px; border-radius: 5px; transform: rotate(-45deg); }