@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Quicksand:700);

/*===================================
 共通
===================================*/
html {
	height: 100%;
	font-size: 62.5%; /* 1rem = 10px */
}
body {
	height: auto;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.5;
	color: #933;
	letter-spacing: 1.2px;
	padding-bottom: 95px; /* footer.height */
	display: none;
}
body, input, textarea, select {
	font-family: 'Quicksand',Hiragino Sans,'ヒラギノ角ゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo', 'メイリオ', Verdana,'ＭＳ Ｐゴシック',sans-serif;
	-webkit-appearance: none;
}
img {
	vertical-align: bottom; /* 画像下部の余白対策 */
}
a {
	cursor: pointer;
}
a:hover {
	opacity: .5;
}
hr {
	border: none;
	border-bottom: 1px #ebebeb solid;
}

.default-font {
	font-family: Hiragino Sans,'ヒラギノ角ゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo', 'メイリオ', Verdana,'ＭＳ Ｐゴシック',sans-serif;
}

/* 文字レイアウト */
.bold {
	font-weight: bold;
}
.color-red {
	color: #f00;
}
.align-left {
	text-align: left !important;
}
.align-right {
	text-align: right;
}
.indent {
	text-indent: -1em;
	margin-left: 1em;
}

/* 文字サイズ */
.f20 {
	font-size: 20px;
	font-size: 2.0rem;
}
.f22 {
	font-size: 22px;
	font-size: 2.2rem;
}

/* 余白 */
.space,
.m20 {
	margin: 20px;
}
.mT0 {
	margin-top: 0;
}
.mT30 {
	margin-top: 30px;
}
.mB5 {
	margin-bottom: 5px;
}

/* PC版のみ表示 */
.pc-only {
	display: block;
}
/* SP版のみ表示 */
.sp-only {
	display: none;
}

/* コンテンツ横幅 */
#header-contents,
.content-page-description > p,
.content-header-title,
.content-wrap .content-tab ul,
.content-body,
#footer-contents,
.top-page main,
.top-page .top-page-title,
.top-page footer,
.bank-bar {
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
}
header,
.content-page-description,
.content-header {
	min-width: 1024px;
}

/*=== リンクアイコン ===*/
.link-icon {
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	color: #ff0 !important;
	position: relative;
	text-decoration: underline;
}
.link-icon::before,
.link-icon::after {
	display: block;
	content: "";
	position: absolute;
}
.link-icon::before {
	width: 10px;
	height: 10px;
	border: 3px #ff0 solid;
	top: 2px;
	left: -31px;
}
.link-icon::after {
	width: 15px;
	height: 15px;
	border-right: 2px #ff0 solid;
	border-bottom: 2px #ff0 solid;
	top: 5px;
	left: -28px;
}

/*=== インデントつきの黒丸リスト ===*/
.disc-list {
	list-style: disc;
	margin-left: 2em;
	word-break: break-all;
}

/*=== ご注意ください ===*/
.caution-box {
	box-sizing: border-box;
	margin: 40px 20px 0;
	padding: 10px 20px;
	background: #ededed;
	border-radius: 10px;
	font-size: 16px;
	font-size: 1.6rem;
}
.caution-box .sub-title {
	margin-top: 1em;
	font-weight: bold;
}
.caution-box ul {
	margin: 1em 0;
}

/* 各種ボタン */
.back-btn,
.close-btn,
.btn {
	text-decoration: none;
}

/* 戻る・終了 */
.back-btn,
.close-btn {
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: bold;
	color: #933;
}

/* 戻る */
.back-btn::before {
	display: inline-block;
	content: "";
	width: 12px;
	height: 12px;
	margin-right: 10px;
	border-left: 4px #f90 solid;
	border-bottom: 4px #f90 solid;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

/* 終了 */
.close-btn {
	padding-left: 35px;
}
.close-btn::before,
.close-btn::after {
	display: inline-block;
	content: "";
	height: 24px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: .5em;
	margin: auto;
}
.close-btn::before {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	border-left: 4px #f90 solid;
}
.close-btn::after {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	border-right: 4px #f90 solid;
}

/* ボタン */
.btn {
	margin: 0 3px;
	padding: 10px 50px;
	font-size: 36px;
	font-size: 3.6rem;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(#4e8fdf, #3e72b3);
	border-top: 1px #d2e3f7 solid;
	border-bottom: 1px #4a7ab6 solid;
	border-radius: 5px;
}
#btnPrint.btn {
	display: none;
}

/*===================================
 ヘッダー
===================================*/
header {
	background: #f2edd8;
	font-weight: bold;
	overflow: hidden;
}

/* 金融機関ロゴ */
.bank-bar{
    background: #fff;
    width: 1024px;
    height: 50px;
}
.bank-bar img{
    height: 50px;
}

/* ページタイトル */
header .page-title {
	box-sizing: border-box;
	max-width: calc(100% - 500px);
	padding: 6px 25px 14px;
	font-size: 26px;
	font-size: 2.6rem;
	line-height: 1;
	font-family: Hiragino Sans,'ヒラギノ角ゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo', 'メイリオ', Verdana,'ＭＳ Ｐゴシック',sans-serif;
}
header .page-title small {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: normal;
	display: inline-block;
	padding-bottom: 5px;
}

/*=== STEP表示 ===*/
header .step-nav {
	font-size: 30px;
	font-size: 3rem;
	text-align: right;
}
header .step-nav ol::before {
	display: inline-block;
	content: 'STEP';
	color: #f90;
	margin-right: 10px;
	position: relative;
	z-index: 2;
}
header .step-nav ol {
	width: 500px;
}
header .step-nav ol li {
	box-sizing: border-box;
	width: calc((100% - 4em - 30px) / 4);
	display: inline-block;
	position: relative;
	padding: 15px 40px;
	padding-right: 0;
	text-align: center;
}
header .step-nav ol li.current {
	z-index: 1;
}
header .step-nav ol li:last-child {
	padding-right: 25px;
}

/* 矢印 */
header .step-nav ol li::before {
	display: block;
	content: "";
	box-sizing: border-box;
	padding: 22px 23px;
	border: 2px #e5dcb9 solid;
	transform: rotate(-55deg) skew(-23deg);
	-webkit-transform: rotate(-55deg) skew(-23deg);
	clip: rect(3px auto auto 3px);
	position: absolute;
	top: 10px;
	left: -25px;
}

/* 選択中の色 */
header .step-nav ol li.current:not(:last-child) {
	padding-right: 10px;
}
header .step-nav ol li.current,
header .step-nav ol li.current + li::before {
	background: #98ba10;
	color: #fff;
}
header .step-nav ol li.current::before,
header .step-nav ol li.current + li::before {
	border-width: 0;
	padding: 25px 25px;
	top: 9px;
	left: -27px;
}
header .step-nav ol li.current::before {
	background: #f2edd8; /* headerの背景色 */
}
header .step-nav ol li.current + li::before {
	left: -36px;
}
.mono-space span {
	display: inline-block;
	width: .6em;
	text-align: center;
}
.mono-space span.comma {
	width: .4em;
}

/*===================================
 フッター
===================================*/
footer {
	box-sizing: border-box;
	width: 100%;
	min-height: 75px;
	padding: 10px;
	text-align: center;
	background: rgba(255, 255, 255, .90);
	border-top: 2px #f2edd8 solid;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 10;
}
footer #footer-contents {
	position: relative;
	min-height: 55px;
}

/* footer 戻る・終了 */
footer .back-btn,
footer .close-btn {
	position: absolute;
	top: calc(50% - 15px);
}
footer .back-btn {
	left: 30px;
}
footer .close-btn {
	right: 30px;
}

/*===================================
 トップページ
===================================*/
.top-page {
	height: 100%;
	padding: 0;
}

/* ヘッダー */
.top-page header {
	padding: 10px 0;
	font-size: 28px;
	font-size: 2.8rem;
	text-align: center;
}

/* コンテンツ */
.top-page main {
	height: calc(100% - 62px - 110px);
	font-size: 24px;
	font-size: 2.4rem;
}
.top-page .content-wrap {
	width: 1024px;
	height: 100%;
	display: table;
}
.top-page .content-wrap .disc-list {
	display: table-cell;
	vertical-align: middle;
	margin-left: 0;
}
.device-tablet.top-page .content-wrap .disc-list {
	padding: 30px 20px 120px 40px;
}
.top-page .content-wrap .disc-list li:not(:last-child) {
	padding-bottom: 30px;
}
.top-page .footer-space{
    padding-bottom: 110px; /* フッターと文字が重なることを防止 */
}

/* フッター */
.top-page footer {
	min-height: auto;
	padding: 0;
	border: none;
	position: fixed !important;
}
.top-page footer .btn {
	display: inline-block;
	margin: 10px 0;
	padding: 5px 15px;
}
.top-page footer small {
	font-size: 10px;
	font-size: 1rem;
	letter-spacing: 0;
}

/*===================================
 コンテンツ
===================================*/
/* 枠上部の説明文 */
.content-page-description {
	text-align: center;
	margin: 10px 0;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
}
.content-page-description + .content-header {
	border-top: 2px #ededed solid;
}

/* 枠 */
.content-wrap a {
	color: #933;
}
.content-wrap em.large {
	font-size: 120%;
}

/*=== コンテンツのタイトル ===*/
.content-wrap .content-header {
	padding: 20px 0;
	background: #f78940;
	color: #fff;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
	border-bottom: 2px #ebebeb solid;
	box-sizing: border-box;
}
.content-wrap .content-header em {
	color: #ff0;
}
.content-wrap .content-header.no-border-bottom {
	border-bottom: none;
}

/* 文字サイズ */
.content-wrap .content-header .f-xs {
	font-size: 20px;
	font-size: 2rem;
}
.content-wrap .content-header .f-s {
	font-size: 22px;
	font-size: 2.2rem;
}
.content-wrap .content-header .f-l {
	font-size: 32px;
	font-size: 3.2rem;
}
.content-wrap .content-header .f-ll {
	font-size: 36px;
	font-size: 3.6rem;
}
.content-wrap .content-header .f-xl {
	font-size: 48px;
	font-size: 4.8rem;
	vertical-align: sub;
}

/*=== コンテンツのタブ ===*/
.content-tab {
	background: linear-gradient(#f78940 70%, #dd7b3a);
}
.content-tab ul {
	font-size: 0;
}
.content-tab ul li {
	display: inline-block;
	box-sizing: border-box;
	width: calc(100% / 3 - 5px);
	margin: 0 2px;
	padding: 8px 0;
	border: 1px #999 solid;
	border-bottom: none;
	border-radius: 5px 5px 0 0;
	background: linear-gradient(#999 70%, #8a8a8a);
	color: #fff;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}
.content-tab ul li.active {
	border-color: #ededed;
	background: #fff;
	color: #ff9a00;
	border-bottom: none;
}
.content-tab ul li:not(.active):hover {
	opacity: .5;
}
.content-tab + .content-body {
	border-top: none;
}

/*=== コンテンツの中身 ===*/
.content-wrap .content-body {
	font-size: 18px;
	font-size: 1.8rem;
	/*border: 2px #f2edd8 solid;
	border-radius: 0  0 10px 10px;
	box-shadow: 0 4px 1px 0 #f2edd8;*/
}
.content-wrap .content-body em {
	color: #ff9a00;
}

/*=== ボタン ===*/
.content-wrap .content-body .btn {
	display: block;
	min-width: 180px;
	margin: 10px;
	padding: 5px;
	border: none;
	border-radius: 5px;
	background: linear-gradient(#999 60%, #838282);
	color: #fff;
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}
.step1 .content-wrap .content-body .btn {
	display: none;
}
.content-wrap .content-body .btn.link-icon {
	padding: 8px;
	color: #fff !important;
}
.content-wrap .content-body .btn.link-icon::before {
	position: static;
	display: inline-block;
	margin-right: 15px;
	border-color: #fff;
	outline: 2px #949494 solid;
	box-shadow: 4px 4px #fff;
}
.content-wrap .content-body .btn.link-icon::after {
	display: none;
}

/* message-box */
.message-box {
	margin: 20px;
	text-align: left;
}
.message-box .sub-title {
	margin-top: 30px;
	font-weight: bold;
}
.message-box .message-listing {
	margin-top: 1em;
}
.message-box .message-notice {
	margin-top: 1em;
}

/*===================================
 STEP1 国民年金加入者区分
===================================*/
.kbn-list {
	margin: 80px 0;
	text-align: center;
	font-size: 0;
}
.kbn-list li {
	display: inline-block;
	vertical-align: top;
}
.kbn-list li input {
	display: none;
}
.kbn-list li label {
	display: block;
	width: 255px;
	height: 100%;
	cursor: pointer;
}

/* ボタン画像 */
.kbn-list li input[value="1"] + label .bg-btn {
	box-sizing: border-box;
	width: 240px;
	height: 240px;
	background: url(../images/kbn-bg.png) no-repeat center /contain;
	display: inline-block;
}
.kbn-list li input[value="2"] + label .bg-btn {
	box-sizing: border-box;
	width: 240px;
	height: 240px;
	background: url(../images/kbn-bg.png) no-repeat center /contain;
	display: inline-block;
}
.kbn-list li input[value="3"] + label .bg-btn {
	box-sizing: border-box;
	width: 240px;
	height: 240px;
	background: url(../images/kbn-bg.png) no-repeat center /contain;
	display: inline-block;
}
.kbn-list li input[value="4"] + label .bg-btn {
	box-sizing: border-box;
	width: 240px;
	height: 240px;
	background: url(../images/kbn-bg.png) no-repeat center /contain;
	display: inline-block;
}
.kbn-list li input[value="1"]:checked + label .bg-btn {
	background: url(../images/kbn-bg-active.png) no-repeat center /contain;
}
.kbn-list li input[value="2"]:checked + label .bg-btn {
	background: url(../images/kbn-bg-active.png) no-repeat center /contain;
}
.kbn-list li input[value="3"]:checked + label .bg-btn {
	background: url(../images/kbn-bg-active.png) no-repeat center /contain;
}
.kbn-list li input[value="4"]:checked + label .bg-btn {
	background: url(../images/kbn-bg-active.png) no-repeat center /contain;
}

/* テキスト */
.kbn-list li label .text {
	margin-top: 15px;
	font-size: 30px;
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.2;
}
.kbn-list li label small {
	letter-spacing: 0;
	font-size: 15px;
	font-size: 1.5rem;
}

/*===================================
 STEP1.5 会社員選択時の追加項目
===================================*/
.radio-list {
	font-size: 0;
}
.radio-list li {
	font-size: 28px;
	font-size: 2.8rem;
	font-weight: bold;
}
.radio-list > li {
	padding: 40px 20px;
	border-bottom: 1px #f6f2e4 solid;
}
.radio-list li p {
	float: left;
	width: 18em;
	padding-top: 20px;
}
.radio-list li ul li {
	display: inline-block;
	width: 200px;
	height: 80px;
	position: relative;
}
.radio-list li ul li input {
	opacity: 0;
}
.radio-list li ul li label {
	display: block;
	box-sizing: border-box;
	background: url(../images/radio.png) no-repeat center /contain;
	width: 100%;
	height: 100%;
	padding-top: 18px;
	padding-left: 100px;
	position: absolute;
	top: 0;
	cursor: pointer;
}
.radio-list li ul li input:checked + label {
	background: url(../images/radio-checked.png) no-repeat center /contain;
}

/*===================================
 STEP2 加入者区分を確認
===================================*/
/* あなたが加入できる年金 */
.pension {
	width: calc(100% - 30px);
	margin: 15px;
	border-collapse: separate;
	border-spacing: 5px;
}
.pension tr td {
	padding: 15px 0;
	font-size: 24px;
	font-size: 2.4rem;
	text-align: center;
	vertical-align: middle;
	line-height: 1.2;
}
.pension tr td.note {
	padding: 5px;
	background: #fff8d3;
	font-size: 16px;
	font-size: 1.6rem;
}
.pension tr td.note2 {
	padding: 5px;
	background: #fff8d3;
	font-size: 14px;
	font-size: 1.4rem;
}
.pension tr td.normal {
	border: 2px #ccc solid;
}
.pension tr td.active {
	border: 4px #ff9a00 solid;
	color: #ff9a00;
	font-weight: bold;
}
.pension tr td small {
	font-size: 20px;
	font-size: 2rem;
}

/* ---- ここから ---- */
/* 会社員かつ企業型DCありの場合だけ適用するスタイル
　（改行を減らすため、フォントサイズを調整）
*/
.pension-type4 tr td {
	font-size: 22px;
}

.pension-type4 tr td small {
	font-size: 16px;
}

.pension-type4 .small-area {
	max-width: 380px;
	margin: auto;
}
/* ---- ここまで ---- */

/* 上限 */
.limit-amount {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
}

/* pdfリンク(ideco) */
.content-wrap .content-body .btn.pdf_area {
	display: inline-block;
	margin: 20px 10px;
	padding: 0 45px 0 15px;
	font-size: 24px;
	font-size: 2.4rem;
	position: relative;
}
.content-wrap .content-body .btn.pdf_area::after {
	display: block;
	content: "";
	width: 10px;
	height: 10px;
	border-top: 3px #fff solid;
	border-right: 3px #fff solid;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	position: absolute;
	top: calc(50% - 7px);
	right: 40px;
}

/*===================================
 STEP3 条件入力
===================================*/
.precondition-wrap {
	letter-spacing: 0;
}
.precondition-wrap .item {
	padding: 10px 20px;
	border-bottom: 1px #ebebeb solid;
}
.precondition-wrap .item .text {
	font-size: 14px;
	font-size: 1.4rem;
	padding: 3px 0;
}

/* 項目名 */
.precondition-wrap .item .input-box {
	display: inline-block;
	width: 425px;
	font-weight: bold;
	font-size: 28px;
	font-size: 2.8rem;
}
.precondition-wrap .item .input-box .label {
	display: inline-block;
	width: 6.5em;
}
.precondition-wrap .item .input-box .unit {
	display: inline-block;
	font-size: 22px;
	font-size: 2.2rem;
	line-height: 1.2;
	vertical-align: middle;
	margin-top: -10px;
}
.precondition-wrap .item .input-box small {
	font-size: 18px;
	font-size: 1.8rem;
}

/* テキストボックス */
.precondition-wrap .item .input-box input {
	width: 4em;
	padding: 5px;
	border: 3px #ccc solid;
	font-size: 36px;
	font-size: 3.6rem;
	text-align: center;
	color: #ff9a00;
}
/* radio */
.precondition-wrap .item .radio-box {
	display: inline-block;
	width: 425px;
	font-weight: bold;
	font-size: 28px;
	font-size: 2.8rem;
	position: relative;
	padding:7px 0px;
}
.precondition-wrap .item .radio-box .label1 {
	display: inline-block;
	width: 6.5em;
	float: left;
}
.precondition-wrap .item .radio-box input[type=radio] + label {
	float: left;
	display: block;
	width: 100px;
	height:42px;
	margin-right: 0;
	padding: 0;
	overflow: hidden;
	text-align: center;
	color: #666;
    font-size: large;
    text-align: center;
    line-height: 42px;
}

.radio-list li ul li.radio-w {
	display: inline-block;
	width: 100px;
	height: 42px;
	position: relative;
	padding-left: 8px;
}

.radio-list li ul li label span {
    padding-left:40px;
}

.radio-list > li.radio-p{
    padding: 0px 0px;
	border-bottom: 0px;
}
/* select */
.precondition-wrap .item .select-box {
	display: inline-block;
	width: 1024px;
	font-weight: bold;
	font-size: 28px;
	font-size: 2.8rem;
}
.select-age {
	width: 550px;
	margin: auto;
}
.precondition-wrap .item .select-box .label1 {
	display: inline-block;
	width: 9.5em;
	vertical-align: middle;
}
.precondition-wrap .item .select-box .label2 {
	display: inline-block;
	width: 4em;
	vertical-align: middle;
	font-size: 2.2rem;
}
.precondition-wrap .item .select-box .unit {
	display: inline-block;
	width: 3em;
	font-size: 22px;
	font-size: 2.2rem;
	vertical-align: middle;
}
.m-wrap {
    width: 4em;
    padding: 2px;
    border: 3px #ccc solid;
    font-size: 18px;
    color: #ff9a00;
    background-color: white;
    margin: 0px 10px;
    /* appearance: menulist; */
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
}
/* フォントが Quicksand の時、数字 4 が右にずれるため、select配下のoptionのみフォントをメイリオにする */
.m-wrap option {
    font-weight: bold;
    font-size: 18px;
    font-family: 'メイリオ', Verdana,'ＭＳ Ｐゴシック',sans-serif;
}
.select-age .m-wrap{
    width: auto;
}

/*=== スライダー ===*/
.precondition-wrap .item .slider-box {
	display: inline-block;
	width: calc(100% - 435px);
	vertical-align: super;
}
/* 最小値・最大値 */
.precondition-wrap .item .slider-box .min,
.precondition-wrap .item .slider-box .max {
	display: inline-block;
	width: 5em;
	color: #666;
}
.precondition-wrap .item .slider-box .min {
	text-align: right;
}

/* バー */
.precondition-wrap .item .slider-box .slider {
	/* スライダーの太さ(基準値) */
	font-size: 22px;
	font-size: 2.2rem;
	display: inline-block;
	width: calc(100% - 10em);
	height: .5em;
	margin: 20px;
	vertical-align: middle;
	background: #f2f2f2;
	border: none;
	border-radius: .5em;
	position: relative;
}
/* 進行中のバー */
.precondition-wrap .item .slider-box .slider .ui-slider-range {
	height: 100%;
	background: #87dde7;
	border-radius: .5em;
}
/* つまみ部分 */
.precondition-wrap .item .slider-box .slider .ui-slider-handle {
	width: 1.3em;
	height: 1.3em;
	border: 3px #fff solid;
	background: radial-gradient(at left top, #fd3e00, #fd3600 65%, #e93000 75%);
	border-radius: 50%;
	position: absolute;
	top: -.6em;
	margin-left: -.6em;
	outline: none;
}

/*===================================
 STEP4 シミュレーション結果
===================================*/
.step4 .content-wrap .content-header {
	padding: 10px 0;
	text-align: left;
}
.device-tablet.step4 .content-wrap .content-header-title {
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
h2 {
	margin: 0;
	padding: 30px 20px 5px;
	border-bottom: 4px #cacaca solid;
	font-size: 36px;
	font-size: 3.6rem;
	font-weight: bold;
}
h3 {
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
}

/*===================================
 STEP4 拠出時のメリット
===================================*/
.merit {
	margin: 35px auto 50px;
	padding-left: 110px;
	text-align: center;
}
.merit p {
	display: inline-block;
	padding: 0 20px 0 40px;
	font-size: 25px;
	font-size: 2.5rem;
	font-weight: bold;
	border-bottom: 4px #cacaca solid;
	position: relative;
}
.merit p span {
	font-size: 72px;
	font-size: 7.2rem;
	color: #ff9a00;
}
.merit p::before {
	content: url(../images/merit.png);
	transform: scale(0.5);
	position: absolute;
	top: -60px;
	left: -160px;
}
/* 節税額の内訳テーブル */
.merit-detail table {
	box-sizing: border-box;
	width: 560px;
	margin: auto;
	padding: 20px;
	border: 3px #ccc solid;
	background: #fff;
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
	position: relative;
}
.merit-detail h3{
	width: 560px;
	margin: auto;
	margin-top: 50px;
}
.merit-detail th{
	line-height: 3;
	width: 40%;
	border: 2px #ccc solid;
}
.merit-detail td{
	line-height: inherit;
	width: 60%;
	border: 2px #ccc solid;
}
.merit-detail table em{
	font-size: 28px;
	font-size: 2.8rem;
}
.merit-detail table tr:last-child td{
	border:3px #ff9a00 solid;
}
.merit-detail table tr:last-child em{
	font-size: 40px;
	font-size: 4.0rem;
}
/* 吹き出し */
.balloon {
	box-sizing: border-box;
	width: 560px;
	margin: auto;
	padding: 20px;
	border: 2px #ccc solid;
	background: #fff;
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
	position: relative;
}
.balloon em {
	font-size: 30px;
	font-size: 4rem;
	line-height: 1;
}
.balloon::before {
	content: "";
	width: 15px;
	height: 15px;
	background: #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: -10px;
	left: calc((100% - 15px) / 2);
}

/*===================================
 STEP4 運用時のメリット
===================================*/
/*=== 税制メリット ===*/
.merit-flow {
	margin: 25px 0;
}
.merit-flow ul {
	display: table;
	overflow: hidden;
}
.merit-flow ul li {
	display: table-cell;
	padding: 10px 15px;
	padding-left: 45px;
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	line-height: 1;
	white-space: nowrap;
	border-top: 2px #ccc solid;
	border-bottom: 2px #ccc solid;
	background: #fff;
	position: relative;
}
.merit-flow ul li:nth-child(1) {z-index:5;}
.merit-flow ul li:nth-child(2) {z-index:4;}
.merit-flow ul li:nth-child(3) {z-index:3;}
.merit-flow ul li:nth-child(4) {z-index:2;}
.merit-flow ul li:last-child {
	border-right: 2px #ccc solid;
}
.merit-flow ul li em {
	font-size: 36px;
	font-size: 3.6rem;
}
/* 矢印 */
.merit-flow ul li:not(:first-child)::before {
	display: block;
	content: "";
	box-sizing: border-box;
	padding: 1.2em;
	font-size: 20px;
	font-size: 2rem;
	border: 3px #ccc solid;
	border-top: none;
	border-left: none;
	transform: rotate(-45deg) skew(-20deg, -20deg);
	-webkit-transform: rotate(-45deg) skew(-20deg, -20deg);
	position: absolute;
	top: 16px;
	left: -26px;
	z-index: 1;
}
/* 税制メリット */
.merit-flow ul li:first-child {
	padding-left: 10px;
	padding-right: 0;
	background: #97b910;
	border-left: solid 2px;
	border-color: #97b910;
	color: #fff;
}
.merit-flow ul li:nth-child(2)::before {
	border-width: 0;
	background: linear-gradient(to right bottom, transparent 48%, #97b910 48%);
	border-color: #97b910;
	top: 17px;
}
@media print{
	.merit-flow ul li:first-child {
		color: #97b910;
	}
	.merit-flow ul li:nth-child(2)::before {
		border-width: 3px;
		top: 16px;
	}
}
/* 金額 */
.merit-flow ul li:last-child {
	font-size: 22px;
	font-size: 2.2rem;
}
.merit-flow ul li:last-child,
.merit-flow ul li:last-child::before {
	border-color: #ff9a00;
}
.merit-flow ul li:last-child {
	border-width: 3px;
}
.merit-flow ul li:last-child::before {
	border-width: 4px;
	top: 14px;
}
.merit-flow ul li:last-child em {
	font-size: 60px;
	font-size: 6rem;
}

/*=== ストライプの枠 ===*/
.stripe-box {
	width: 300px;
	height: 160px;
	position: relative;
	font-size: 20px;
	font-size: 2.0rem;
	background: url(../images/stripe-box-pc.png) no-repeat 0 /contain;
}
.stripe-box p {
	margin: 5px;
	padding: 27px 10px;
	font-weight: bold;
	line-height: 1.4;
}
.stripe-box p em {
	font-size: 24px;
	font-size: 2.4rem;
}
.stripe-box p em#total {
	font-size: 30px;
	font-size: 3rem;
	line-height: 1.2;
}

/*=== グラフ ===*/
.graph-box {
	width: 320px;
	height: 160px;
	margin: 0 20px;
	border: 2px #989898 solid;
	border-left: none;
	border-top: none;
	color: #265479;
	position: relative;
}
.graph {
	height: 0;
	width: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 0 solid transparent;
	border-right: 0 solid transparent;
	border-left: 320px solid transparent;
}
/* 運用益（非課税分） */
.graph-hiKazei {
	width: 320px;
}
/* 運用益 */
.graph.graph-unyoEkiMinusHiKazei {
	border-bottom-style: solid;
	border-bottom-color: #dff3f5;
}
/* 積立元本 */
.graph.graph-tsumitateGanpon {
	border-bottom-style: solid;
	border-bottom-color: #fff8d3;
}
.graph-foot {
	position: absolute;
	bottom: -1.8em;
	width: 100%;
	font-size: 14px;
	font-size: 1.4rem;
	text-align: center;
}
.graph-foot .from {
	position: absolute;
	left: -1em;
}
.graph-foot .to {
	position: absolute;
	right: -1em;
}

/*=== 計算式 ===*/
.formula {
	font-weight: bold;
}
.formula > :not(.operator) {
	padding: 5px 10px;
}
.formula > :not(.operator) .label {
	display: block;
	margin-right: 10px;
}
.formula > :not(.operator) .value {
	display: block;
	font-size: 20px;
	font-size: 2rem;
}
/* 運用益 */
.formula .val1 {
	background: #dff3f5;
}
/* 積立元本 */
.formula .val2 {
	background: #fff8d3;
}
/* 運用結果 */
.formula .total {
	background: #ff9a00;
	color: #fff;
}
@media print{
	/* 運用益 */
	.formula .val1 {
		border: solid 2px #dff3f5;
	}
	/* 積立元本 */
	.formula .val2 {
		border: solid 2px #fff8d3;
	}
	/* 運用結果 */
	.formula .total {
		border: solid 2px #ff9a00;
		color: #ff9a00;
	}
}
/* 演算子 */
.formula .operator {
	font-size: 14px;
	font-size: 1.4rem;
	color: #999;
	text-align: center;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

/* 商品情報ボタン */
.content-wrap .content-body .btn.product-info {
	display: inline-block;
	margin: 20px 0;
	padding: 0 45px 0 15px;
	font-size: 24px;
	font-size: 2.4rem;
	position: relative;
}
.content-wrap .content-body .btn.product-info::after {
	display: block;
	content: "";
	width: 10px;
	height: 10px;
	border-top: 3px #fff solid;
	border-right: 3px #fff solid;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	position: absolute;
	top: calc(50% - 7px);
	right: 60px;
}

/*===================================
 STEP4 受取時のメリット
===================================*/
.receve-info {
	margin: 20px 0 10px;
	font-size: 0;
}
.receve-info > li {
	display: inline-block;
	box-sizing: border-box;
	width: calc(50% - 4px);
	border: 2px #ccc solid;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
	vertical-align: top;
}
.receve-info > li:first-child {
	margin-right: 6.5px;
}
.receve-info > li h4 {
	padding: 5px;
	border-bottom: 2px #ccc solid;
	line-height: 1.2;
}
.receve-info > li h4 .note {
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: normal;
}

/* 一時金での受取 */
.receve-info > li.lump div {
	padding: 30px 0;
	font-size: 20px;
	font-size: 2rem;
}
.receve-info > li.lump div em {
	font-size: 48px;
	font-size: 4.8rem;
	line-height: 1;
}

/* 年金での受取 */
.receve-info > li.every table {
	margin: 10px auto;
}
.receve-info > li.every table tr th,
.receve-info > li.every table tr td {
	text-align: right;
	font-size: 20px;
	font-size: 2rem;
	line-height: 1.1;
}
.receve-info > li.every table tr td em {
	font-size: 28px;
	font-size: 2.8rem;
	padding-left: .5em;
}

/* ボタン */
.receve-info > li .btn {
	width: 17em;
	margin: 0 auto 10px !important;
}

/* バナーボタン */
.content-wrap .content-body .banner-area {
    margin: 15px 0;
}
.content-wrap .content-body .btn.banner-info {
	display: block;
	width: auto;
	margin: 10px 20px;
	padding: 8px 45px 8px 15px;
	font-size: 20px;
	font-size: 2rem;
	position: relative;
}
.content-wrap .content-body .btn.banner-info::after {
	display: block;
	content: "";
	width: 10px;
	height: 10px;
	border-top: 3px #fff solid;
	border-right: 3px #fff solid;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	position: absolute;
	top: calc(50% - 7px);
	right: 45px;
}
/* バナーボタン改行 */
.sp-br{
    display: none;
}

/*===================================
 モーダル
===================================*/
.remodal {
	position: relative;
}
.modal-header {
	border-top-left-radius: 10px; /* .ramodalのborder-radiusを超えてbackgroundで色が乗る為 */
	border-top-right-radius: 10px; /* .ramodalのborder-radiusを超えてbackgroundで色が乗る為 */
	height: 51px; /* .modal-contentの高さ計算の為 */
}
/* content-tab override */
.content-tab.modal-header ul {
	text-align: left;
	position: relative;
	bottom: -1px;
}
.content-tab.modal-header ul li {
	width: calc(calc(100% - 130px) / 3 - 3px);
	font-size: 22px;
	font-size: 2.2rem;
}
.modal-header {
	padding: 10px 10px 0;
}
.modal-content {
	height: calc(100% - 10px - 50px); /* 10px:margin-top分、50px:modal-footer分 */
	margin-top: 10px; /* border-radius分余白 */
	overflow: auto;
	padding: 10px;
	box-sizing: border-box;
	font-size: 18px;
	font-size: 1.8rem;
	letter-spacing: 0.09rem;
	line-height: 1.556;
}
#modal-about-simulation .modal-content {
	height: calc(100% - 61px - 50px); /* 61px:modal-header分、50px:modal-footer分 */
	margin-top: 0; /* border-radius分余白が不要 */
}
#modal-about-simulation section {
	display: none;
}
#modal-about-simulation section.active {
	display: block;
}
.modal-content section h1 {
	font-size: 20px;
	font-size: 2.0rem;
}
.modal-footer {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	text-align: center;
	background: rgba(255, 255, 255, .90);
	border-top: 2px #f2edd8 solid;
	z-index: 10;
	transition: .5s;
	border-bottom-left-radius: 10px; /* .ramodalのborder-radiusを超えてbackgroundで色が乗る為 */
	border-bottom-right-radius: 10px; /* .ramodalのborder-radiusを超えてbackgroundで色が乗る為 */
}
.modal-footer a {
	position: relative;
	line-height: 48px;
}
.modal-footer .close-btn::before,
.modal-footer .close-btn::after {
	top: 0;
}
/* エラー */
#modal-error .modal-content {
	display: -webkit-flex; /* Safari用 */
	display: flex;
	-webkit-justify-content: center; /* Safari用 */
	justify-content: center;
	-webkit-align-items: center; /* Safari用 */
	align-items: center;
}
#modal-error .message-box {
	text-align: center;
}
#modal-error .message-box .error-message {
	margin: 10px auto;
}
/* 公的年金控除とは */
.modal-content table {
	margin: 20px 40px;
	width: calc(100% - (40px * 2)); /* 40px * 2:margin分 */
	text-align: center;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 2;
}
.modal-content table caption {
	line-height: 4;
}
.modal-content table th {
	background: #eee;
	vertical-align: middle;
}
.modal-content table th,
.modal-content table td {
	border: solid 1px #ccc;
}
.modal-content table tfoot td {
	border: none;
	text-align: left;
}

/*
 印刷用CSS
*/
@media print{
	header,
	footer,
	.content-tab,
	.no-print {
		display: none !important;
	}
}