@charset "utf-8";

/*===================================
 共通
===================================*/
body {
	padding: 0;
	-webkit-text-size-adjust: 100%; /* 文字サイズ自動調整の制御 */
}
form{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main{
    flex: 1; /* 縦に細長い画面の場合でもメインを伸ばすことでフッターを最下部に表示 */
}
a:hover {
	opacity: 1;
}

/* 文字サイズ */
.f22 {
	font-size: 13px;
	font-size: 1.3rem;
}

/* 余白 */
.space {
	margin: 10px;
}

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

/* コンテンツ横幅 */
#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: 100%;
}
header,
.content-page-description,
.content-header {
	min-width: 100%;
}

/*=== リンクアイコン ===*/
.link-icon {
	font-size: 12px;
	font-size: 1.2rem;
	top: 8px;
}
.link-icon::before {
	width: 7px;
	height: 7px;
	top: -1px;
	left: -25px;
}
.link-icon::after {
	width: 11px;
	height: 11px;
	top: 2px;
	left: -22px;
}

/* ご注意ください */
.caution-box {
	margin: 30px 10px 35px;
	padding: 10px;
	font-size: 13px;
	font-size: 1.3rem;
}

/* message box */
.message-box {
	margin: 20px 10px;
}

/*===================================
 ヘッダー
===================================*/
header {
	position: relative;
}

/* 金融機関ロゴ */
.bank-bar{
    background: #fff;
    height: 50px;
}
.bank-bar img{
    height: 50px;
}
/* ページタイトル */
header .page-title {
	float: none;
	box-sizing: border-box;
	max-width: 100%;
	padding: 5px 0 10px;
	font-size: 16px;
	font-size: 1.6rem;
	text-align: center;
}
header .page-title small {
	display: inline-block;
	width: 100%;
	font-size: 10px;
	font-size: 1rem;
	text-align: center;
}

/*=== STEP表示 ===*/
header .step-nav {
	float: none;
	font-size: 0;
}
header .step-nav ol {
	display: table;
	width: 100%;
	border-top: 1px #e5dcb9 solid;
	text-align: left;
}
header .step-nav ol::before {
	width: 45px;
	font-size: 16px;
	font-size: 1.6rem;
	padding: 0 5px 0 15px;
	margin-top: 3px;
}
header .step-nav ol li {
	width: calc((100% - 75px) / 4);
	padding: 5px 10px 5px 20px;
	font-size: 14px;
	font-size: 1.4rem;
	vertical-align: top;
}
header .step-nav ol li:last-child {
	padding: 5px 10px 5px 20px;
}

/* 矢印 */
header .step-nav ol li::before {
	padding: .62em;
	top: 4px;
	left: -12px;
}

/* 選択中の色 */
header .step-nav ol li.current::before,
header .step-nav ol li.current + li::before {
	padding: .74em;
	top: 5px;
	left: -12px;
}

/*===================================
 フッター
===================================*/
footer {
	position: static;
	min-height: 0;
	padding: 0;
	border: none;
	transition: 0s;
}
footer #footer-contents {
	min-height: 120px;
}

/* ボタン */
footer .btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 20px 0;
	border-radius: 0;
	font-size: 16px;
	font-size: 1.6rem;
	position: relative;
}
footer .btn::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;
	right: 20px;
	top: calc(50% - 5px);
}

/* 戻る・終了 */
footer .back-btn,
footer .close-btn {
	display: block;
	width: 50%;
	padding: 15px 0 38px;
	font-size: 16px;
	font-size: 1.6rem;
	top: 66px; /* #btnの高さ */
	bottom: 0;
	border-top: 2px #ededed solid;
	border-bottom: 2px #ededed solid;
}
footer .disabled {
	display: block !important;
	color: #ccc;
}
footer .disabled::before,
footer .disabled::after {
	border-color: #ccc;
}

/* 戻る */
footer .back-btn {
	left: 0;
	border-right: 2px #ededed solid;
}
footer .back-btn::before {
	border-width: 2px;
	width: 10px;
	height: 10px;
}

/* 終了 */
footer .close-btn {
	right: 0;
}
footer .close-btn::before,
footer .close-btn::after {
	border-width: 2px;
	height: 20px;
	left: calc(100% / 2 - 2.5em);
}

/*===================================
 トップページ
===================================*/
/* ヘッダー */
.top-page header {
	font-size: 16px;
	font-size: 1.6rem;
}

/* コンテンツ */
.top-page main {
	font-size: 14px;
	font-size: 1.4rem;
}
.top-page .content-wrap {
	width: calc(100% - 35px);
	margin: 0 10px 0 25px;
}
.top-page .content-wrap .disc-list li:not(:last-child) {
	padding-bottom: 15px;
}

/* フッター */
.top-page footer .btn {
	margin: 0;
	padding: 20px 0;
}
.top-page footer small {
	display: block;
	padding: 10px 0;
}
@media all and (orientation: portrait) {
	.top-page main {
		height: calc(100% - 44px - 121px);
	}
}
@media all and (orientation: landscape) {
	.top-page main {
		height: auto;
		padding: 30px 0;
	}
}

/*===================================
 コンテンツ
===================================*/
/* 枠上部の説明文 */
.page-description {
	font-size: 18px;
	font-size: 1.8rem;
}

/*=== コンテンツのタイトル ===*/
.content-wrap .content-header {
	font-size: 14px;
	font-size: 1.4rem;
	padding: 10px;
}
.content-wrap .content-header.low {
	padding: 10px;
}

/* 文字サイズ */
.content-wrap .content-header .f-xs {
	font-size: 12px;
	font-size: 1.2rem;
}
.content-wrap .content-header .f-s {
	font-size: 14px;
	font-size: 1.4rem;
}
.content-wrap .content-header .f-l {
	font-size: 18px;
	font-size: 1.8rem;
}
.content-wrap .content-header .f-ll,
.content-wrap .content-header .f-xl {
	font-size: 28px;
	font-size: 2.8rem;
}

/*=== コンテンツのタブ ===*/
.content-wrap .content-tab {
	padding: 10px 10px 0;
}
.content-wrap .content-tab ul {
	width: 100%;
}
.content-wrap .content-tab ul li {
	width: calc((100% - 23px) / 3);
	margin: 0;
	font-size: 14px;
	font-size: 1.4rem;
	padding-bottom: 25px;
	position: relative;
}
.content-wrap .content-tab ul li:not(:last-child) {
	margin-right: 10px;
}
.content-wrap .content-tab ul li::after {
	display: block;
	content: "";
	width: 10px;
	height: 10px;
	border-right: 2px #fff solid;
	border-bottom: 2px #fff solid;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	position: absolute;
	left: calc(50% - 5px);
	bottom: 10px;
}

/*=== コンテンツの中身 ===*/
.content-wrap .content-body {
	font-size: 12px;
	font-size: 1.2rem;
}

/*=== ボタン ===*/
.content-wrap .content-body .btn {
	min-width: auto;
	box-sizing: border-box;
	font-size: 14px;
	font-size: 1.4rem;
}
.content-wrap .content-body .btn.link-icon::before {
	top: 8px;
	left: 20px;
}
.content-wrap .content-body .btn.link-icon::after {
	top: 12px;
	left: 23px;
}

/*===================================
 STEP1 国民年金加入者区分
===================================*/
.kbn-list {
	margin: 20px 0;
	font-size: 0;
}
.kbn-list li {
	display: inline-block;
	width: calc(50% - 15px);
	margin: 0 5px 15px;
}
.kbn-list li input {
	display: none;
}
.kbn-list li label {
	width: 100%;
}

/* ボタン画像 */
.kbn-list li input[value="1"] + label .bg-btn {
	width: 100%;
	height: auto;
	background-position: top center;
}
.kbn-list li input[value="2"] + label .bg-btn {
	width: 100%;
	height: auto;
	background-position: top center;
}
.kbn-list li input[value="3"] + label .bg-btn {
	width: 100%;
	height: auto;
	background-position: top center;
}
.kbn-list li input[value="4"] + label .bg-btn {
	width: 100%;
	height: auto;
	background-position: top center;
}
.kbn-list li input[value="1"]:checked + label .bg-btn {
	background-position: top center;
}
.kbn-list li input[value="2"]:checked + label .bg-btn {
	background-position: top center;
}
.kbn-list li input[value="3"]:checked + label .bg-btn {
	background-position: top center;
}
.kbn-list li input[value="4"]:checked + label .bg-btn {
	background-position: top center;
}
.kbn-list li input[value="1"] + label .bg-btn img {
	max-width: 100%;
}
.kbn-list li input[value="2"] + label .bg-btn img {
	max-width: 100%;
}
.kbn-list li input[value="3"] + label .bg-btn img {
	max-width: 100%;
}
.kbn-list li input[value="4"] + label .bg-btn img {
	max-width: 100%;
}

/* テキスト */
.kbn-list li label .text {
	font-size: 16px;
	font-size: 1.6rem;
}
.kbn-list li label small {
	font-size: 10px;
	font-size: 1rem;
}

/*===================================
 STEP1.5 会社員選択時の追加項目
===================================*/
.radio-list li {
	font-size: 14px;
	font-size: 1.4rem;
}
.radio-list > li {
	padding: 15px 10px;
	border: none;
}
.radio-list > li:last-child {
	padding-bottom: 0;
}
.radio-list li p {
	float: none;
	width: 100%;
	padding: 10px 0;
}
.radio-list li ul {
	font-size: 0;
	text-align: center;
}
.radio-list li ul li {
	display: inline-block;
	width: 144px;
	height: 58px;
	text-align: left;
}
.radio-list li ul li:first-child {
	margin-right: 10px;
}
.radio-list li ul li label {
	padding-top: 0;
	padding-left: 50%;
	line-height: 58px;
}

/*===================================
 STEP2 加入者区分を確認
===================================*/
/* あなたが加入できる年金 */
.pension {
	width: calc(100% - 20px);
	margin: 10px;
	border-spacing: 0;
}
.pension tr td {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	font-size: 1.4rem;
}
.pension tr:last-child td:last-child {
	margin-bottom: 0;
}
.pension tr td.note {
	font-size: 12px;
	font-size: 1.2rem;
}
.pension tr td.active {
	font-size: 14px;
	font-size: 14px;
}
.pension tr td small {
	font-size: 12px;
	font-size: 1.2rem;
}

/* 補足ありの区分 */
.pension.pension-type1 tr td {
	margin-bottom: 0;
}
.pension.pension-type1 tr:first-child td:first-child {
	margin-bottom: 10px;
}

/* 上限 */
.limit-amount {
	font-size: 16px;
	font-size: 1.6rem;
}

/* pdfボタン */
.content-wrap .content-body .btn.pdf_area {
	box-sizing: border-box;
	width: calc(100% - 20px);
	padding: 10px;
	font-size: 14px;
	font-size: 1.4rem;
}
.content-wrap .content-body .btn.pdf_area::after {
	width: 8px;
	height: 8px;
	border-width: 2px;
	top: calc(50% - 6px);
	right: 35%;
}
/*===================================
 STEP3 条件入力
===================================*/
.precondition-wrap .item {
	padding: 10px;
}
/* テキスト */
.precondition-wrap .item .text {
	margin-bottom: 5px;
}

/* 項目名 */
.precondition-wrap .item .input-box {
	width: 100%;
	font-size: 16px;
	font-size: 1.6rem;
}
.precondition-wrap .item .input-box .label {
	text-align: left;
}
.precondition-wrap .item .input-box .label small,
.precondition-wrap .item .input-box .unit {
	font-size: 12px;
	font-size: 1.2rem;
}
.precondition-wrap .item .input-box input {
	margin: 0 10px;
	font-size: 22px;
	font-size: 2.2rem;
}
.precondition-wrap .item .input-box .unit br {
	display: none;
}

.precondition-wrap .item .select-box, 
.precondition-wrap .item .radio-box {
	width: 100%;
	font-size: 16px;
	font-size: 1.6rem;
}
.precondition-wrap .item .radio-box .label1 {
	text-align: left;
	float: none;
}
.precondition-wrap .item .select-box .label1 small,
.precondition-wrap .item .select-box .label2,
.precondition-wrap .item .radio-box .label1 small,
.precondition-wrap .item .select-box .unit,
.precondition-wrap .item .radio-box .unit {
	font-size: 12px;
	font-size: 1.2rem;
}
.precondition-wrap .item .select-box .label2{
	margin-left: 60px;
}
.precondition-wrap .item .select-box input,
.precondition-wrap .item .radio-box input {
	margin: 0 10px;
	font-size: 22px;
	font-size: 2.2rem;
}

.precondition-wrap .item .select-box .unit br, 
.precondition-wrap .item .radio-box .unit br {
	display: none;
}

.select-age {
	width: 100%;
	margin: auto;
}

.precondition-wrap .item .radio-box .radio-p ul {
	margin-left: 50px;
	text-align: left;
}

.precondition-wrap .item .radio-box .block,
.precondition-wrap .item .select-box .block {
	display: block;
	margin:10px 0px;
}

/*=== スライダー ===*/
.precondition-wrap .item .slider-box {
	width: 100%;
	margin: 15px 0 20px;
	padding-bottom: 1em;
	background: #f2f2f2;
	border-radius: 10px;
	position: relative;
}
/* 吹き出し */
.precondition-wrap .item .slider-box::before {
	content: "";
	padding: 4px;
	background: #f2f2f2;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	position: absolute;
	top: -4px;
	left: calc(50% - 2px);
}
/* 最小値・最大値 */
.precondition-wrap .item .slider-box .min,
.precondition-wrap .item .slider-box .max {
	position: absolute;
	bottom: 3px;
	font-size: 11px;
	font-size: 1.1rem;
}
.precondition-wrap .item .slider-box .min {
	left: 20px;
	text-align: left;
}
.precondition-wrap .item .slider-box .max {
	right: 20px;
	text-align: right;
}
/* バー */
.precondition-wrap .item .slider-box .slider {
	width: 80%;
	margin: 20px 10%;
	background: #ccc;
}
/* つまみ部分 */
.precondition-wrap .item .slider-box .slider .ui-slider-handle {
	width: 1.2em;
	height: 1.2em;
	top: -.5em;
}

/*===================================
 STEP4 シミュレーション結果
===================================*/
.step4 .content-wrap .content-header {
	text-align: center;
	padding: 10px;
	line-height: 1;
}
.step4 .content-wrap .content-header .left {
	float: none;
	margin-top: 10px;
}
h2 {
	margin: 0;
	padding: 30px 10px 5px;
	font-size: 20px;
	font-size: 2rem;
	border-bottom-width: 2px;
}
h3 {
	font-size: 16px;
	font-size: 1.6rem;
	margin-bottom: 5px;
}

/*===================================
 STEP4 拠出時のメリット
===================================*/
.merit {
	margin: 35px auto 10px;
	padding-left: 50px;
	text-align: center;
}
.merit p {
	padding: 0 10px 0 40px;
	font-size: 15px;
	font-size: 1.5rem;
	white-space: nowrap;
	border-bottom-width: 2px;
}
.merit p span {
	font-size: 36px;
	font-size: 3.6rem;
}
.merit p::before {
	content: url(../images/merit.png);
	transform: scale(0.3);
	position: absolute;
	top: -100px;
	left: -140px;
}
/* 節税額の内訳テーブル */
.merit-detail table {
	width: calc(100% - 20px);
	margin: 10px;
	padding: 10px 5px;
	font-size: 12px;
	font-size: 1.2rem;
	border-width: 1px;
}
.merit-detail h3{
    width: calc(100% - 20px);
    margin: auto;
    margin-top: 30px;
}
.merit-detail th{
    line-height: 3;
    width: 40%;
    border: 1px #ccc solid;
    vertical-align: middle
}
.merit-detail td{
    line-height: inherit;
    width: 60%;
    border: 1px #ccc solid;
    vertical-align: middle;
}
.merit-detail table em{
    font-size: 20px;
	font-size: 2rem;
}
.merit-detail table tr:last-child td{
    border: 2px #ff9a00 solid;
}
.merit-detail table tr:last-child em{
    font-size: 36px;
	font-size: 3.6rem;
}
/* 吹き出し */
.balloon {
	width: calc(100% - 20px);
	margin: 10px;
	padding: 10px 5px;
	font-size: 13px;
	font-size: 1.3rem;
	border-width: 1px;
}
.balloon::before {
	border-width: 1px;
	top: -9px;
}
.balloon em {
	font-size: 16px;
	font-size: 1.6rem;
}

/*===================================
 STEP4 運用時のメリット
===================================*/
/*=== 税制メリット ===*/
.merit-flow {
	margin: 30px 0;
}
.merit-flow ul {
	display: block;
	margin: 30px 10px;
	padding: 10px;
	border: 2px #ccc solid;
	position: relative;
	overflow: visible;
}
.merit-flow ul li {
	display: block;
	padding: 5px 0;
	border: none;
	font-size: 14px;
	font-size: 1.4rem;
	position: relative;
}
.merit-flow ul li:last-child {
	border-right: none;
}
.merit-flow ul li em {
	font-size: 20px;
	font-size: 2rem;
}
.merit-flow ul li br {
	display: none;
}
/* 矢印 */
.merit-flow ul li:not(:first-child)::before {
	display: none;
}
/* 税制メリット */
.merit-flow ul li:first-child {
	font-size: 0;
	width: 80px;
	height: 80px;
	background: url(../images/merit.png) no-repeat center /contain;
	position: absolute;
	top: -28px;
	left: -15px;
	border: none;
}
/* 金額 */
.merit-flow ul li:last-child {
	font-size: 14px;
	font-size: 1.4rem;
}
.merit-flow ul li:last-child em {
	font-size: 30px;
	font-size: 3rem;
}

/*===================================
 STEP4 運用時のメリット
===================================*/

/*=== ストライプの枠 ===*/
.stripe-box {
	width: 250px;
	height: 115px;
	margin-left: calc((100% - 250px) / 2);
	margin-bottom: 10px;
	background: url(../images/stripe-box-sp.png) no-repeat top /contain;
	font-size: 14px;
	font-size: 1.4rem;
	text-align: center;
}
.stripe-box p {
	padding: 16px 10px;
}
.stripe-box p em {
	font-size: 15px;
	font-size: 1.5rem;
}
.stripe-box p em#total {
	font-size: 18px;
	font-size: 1.8rem;
}
.stripe-box::after {
	top: calc(100% - 8px);
	left: calc(50% - 8px);
}

/*=== グラフ ===*/
.graph-box {
	width: 240px;
	height: 120px;
	margin: 0 20px 40px;
	margin-left: calc((100% - 240px) / 2);
}
.graph {
	border-top: 0 solid transparent;
	border-right: 0 solid transparent;
	border-left: 240px solid transparent;
}
/* 運用益（非課税分） */
.graph-hiKazei {
	width: 240px;
}
.graph-left-top {
	border-top: 140px solid #fff;
	border-right: 240px solid transparent;
	border-left: 0 solid transparent;
	border-bottom: 0 solid transparent;
}

/*=== 計算式 ===*/
.formula {
	width: 240px;
	margin-left: calc((100% - 240px) / 2);
	font-size: 14px;
	font-size: 1.4rem;
}
.formula .value .mono-space {
	padding-right: 3px;
	font-size: 20px;
	font-size: 2rem;
	line-height: 1;
}
.formula > :not(.operator) .value {
	font-size: 14px;
	font-size: 1.4rem;
}

/* 商品情報ボタン */
.content-wrap .content-body .btn.product-info {
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	font-size: 14px;
	font-size: 1.4rem;
}
.content-wrap .content-body .btn.product-info::after {
	width: 8px;
	height: 8px;
	border-width: 2px;
	top: calc(50% - 6px);
	right: 35%;
}

/*===================================
 STEP4 受取時のメリット
===================================*/
.receve-info > li {
	width: 100%;
	border-width: 1px;
}
.receve-info > li:first-child {
	margin-right: 0;
	margin-bottom: 20px;
}
.receve-info > li h4 {
	font-size: 16px;
	font-size: 1.6rem;
	border-bottom-width: 1px;
}
.receve-info > li h4 .note {
	font-size: 12px;
	font-size: 1.2rem;
}

/* 一時金での受取 */
.receve-info > li.lump div {
	padding: 20px 0 0;
	font-size: 14px;
	font-size: 1.4rem;
}
.receve-info > li.lump div em {
	font-size: 30px;
	font-size: 3rem;
}

/* 年金での受取 */
.receve-info > li.every table {
	margin: 20px auto 10px;
}
.receve-info > li.every table tr th,
.receve-info > li.every table tr td {
	font-size: 14px;
	font-size: 1.4rem;
}
.receve-info > li.every table tr td em {
	font-size: 16px;
	font-size: 1.6rem;
}

/* ボタン */
.receve-info > li .btn {
	width: calc(100% - 60px);
	margin: 10px 30px 30px !important;
}

/* バナーボタン */
.content-wrap .content-body .btn.banner-info {
	box-sizing: border-box;
	width: auto;
	margin: 10px;
	padding: 8px 20px;
	font-size: 14px;
	font-size: 1.4rem;
}
.content-wrap .content-body .btn.banner-info::after {
	width: 8px;
	height: 8px;
	border-width: 2px;
	top: calc(50% - 6px);
	right: 5%;
}
.banner-upper{
    font-size: 14px;
    font-size: 4.375vw;
}
/* バナーボタン改行 */
.sp-br{
    display: inline;
}

/*===================================
 モーダル
===================================*/
.remodal-wrapper {
	padding: 0;
}
.remodal {
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
}
.modal-header {
	height: auto;
	border-radius: 0;
}

/* タブ */
.content-tab.modal-header ul li {
	width: 30%;
	height: 60px;
	font-size: 14px;
	font-size: 1.4rem;
	vertical-align: top;
}
.content-tab.modal-header ul li:first-child {
	padding-top: 18px;
}

/* コンテンツ */
.modal-content {
	font-size: 12px;
	font-size: 1.2rem;
	padding: 5px;
}

/* 表 */
.modal-content table {
	width: 100%;
	margin: 0;
	font-size: 10px;
	font-size: 1.0rem;
}