@charset "UTF-8";

/* ====================================
	Fonts
==================================== */
@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/noto-sans-jp-regular.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 500;
	src: url('fonts/noto-sans-jp-500.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 600;
	src: url('fonts/noto-sans-jp-600.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/noto-sans-jp-700.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans JP';
	font-weight: 800;
	src: url('fonts/noto-sans-jp-800.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 900;
	src: url('fonts/noto-sans-jp-900.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/roboto-regular.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: url('fonts/roboto-500.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 600;
	src: url('fonts/roboto-600.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/roboto-700.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 800;
	src: url('fonts/roboto-800.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 900;
	src: url('fonts/roboto-900.woff2') format('woff2');
	font-display: swap;
}

/* ====================================
	Reset & Base
==================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	font-family: "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	color: #222222;
	background-color: #ffffff;
	line-height: 1.6;
	font-size: 16px;
	overflow-x: hidden;
}

img,
picture,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	text-decoration: none;
	color: inherit;
	transition: 0.1s;
}

ul,
ol {
	list-style: none;
}

/* ====================================
	Utility Classes & Typography
==================================== */
.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.pt-24 {
	padding-top: 24px;
}

.pb-140 {
	padding-bottom: 140px;
}

.mt-10 {
	margin-top: 10px;
}

.mt-24 {
	margin-top: 24px;
}

.mt-32 {
	margin-top: 32px;
}

.mt-40 {
	margin-top: 40px;
}

.mt-64 {
	margin-top: 64px;
}

.mb-40 {
	margin-bottom: 40px;
}

.indent2 {
	padding-left: 2em;
	text-indent: -2em;
	display: inline-block;
}

.small-font {
	font-size: 0.8em;
	font-weight: 400;
}

.font-bigger {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 20px;
	line-height: 1.9;
}

.font-smaller {
	font-size: 15px;
}

.strong {
	font-weight: 700;
}

.asterisk {
	font-size: 14px;
	color: #444444;
	font-weight: 400;
	background: none;
	padding-left: 8px;
}

/* ====================================
	Common Layout Components
==================================== */
.container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

.container.step-area {
	padding: 0;
}

.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.section-wrap {
	padding: 40px 0;
}

.bg-box {
	background: linear-gradient(135deg, #fff7eb, #fff7eb);
	border: 1px solid #fbe3d3;
	border-radius: 40px;
	padding: clamp(30px, 4vw, 56px) clamp(20px, 5vw, 80px);
	margin-bottom: 24px;
}

.bg-box.pb-140 {
	padding-bottom: 140px;
}

.section-title {
	font-size: clamp(20px, 4vw, 24px);
	font-weight: 900;
	margin-bottom: 24px;
	border-bottom: 1px solid #cccccc;
	padding-bottom: 4px;
}

.section-lead {
	margin-bottom: 24px;
}

.top-message p {
	margin: 0 auto 24px;
	text-align: center;
}

.bottom-message p {
	margin: 28px auto 0;
	text-align: center;
}

.bottom-message.text-left p {
	text-align: left;
}

.small-message {
	font-size: 14px;
}

.heading-flex {
	display: flex;
	flex-direction: row-reverse;
	text-align: left;
	justify-content: space-between;
	align-items: center;
}

.heading-img {
	width: 42%;
	padding-left: 24px;
}

.heading-text {
	display: flex;
	flex-direction: column;
	width: 58%;
	padding-left: 40px;
}

.heading-text .card-desc-small {
	font-size: 14px;
	margin-top: 12px;
	margin-bottom: 0;
	line-height: 1.6;
	text-align: left;
}



.step-label-num {
	font-size: 28px;
	font-weight: 700;
}

.heading-title {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 900;
	line-height: 1.5;
	margin-bottom: 24px;
	background: linear-gradient(20deg, #dc490f, #f46a18);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.heading-desc {
	font-weight: 500;
}

/* ====================================
	Common UI Components
==================================== */
/* === Cards === */
.card {
	background: #ffffff;
	border: 1px solid #14b34f;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.card-gray {
	border: 1px solid #cccccc;
	padding: 24px 22px;
	box-shadow: none;
}

.card-title-big {
	font-size: clamp(18px, 4vw, 21px);
	font-weight: 700;
	margin-bottom: 12px;
	line-height: 1.4;
	background: linear-gradient(180deg, #dc490f 0%, #d46032 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.card-title-midium {
	font-weight: 500;
}

.card-separator {
	height: 2px;
	background: #222222;
	width: 40px;
	margin: 0 auto 24px;
}

.card-separator.sm {
	width: 30px;
	margin-bottom: 20px;
}

.card-desc-small {
	font-size: 14px;
	margin-bottom: 16px;
	line-height: 1.6;
}

.card-note {
	font-size: 13px;
	color: #444444;
	text-align: left;
	margin-top: 6px;
	margin-bottom: 16px;
}

.card-desc-small + .card-note {
	margin-top: -8px;
}

/* === Buttons === */
.btn-area {
	margin: 56px 0 24px;
}

.btn {
	color: #ffffff;
	border-radius: 50px;
	padding: 10px 30px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-lg {
	background: linear-gradient(45deg, #f69f0a, #f03c04);
	font-size: 22px;
	font-weight: 900;
	padding: 20px 24px;
	max-width: 520px;
	width: 90%;
	transition: 0.1s;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

@media (hover: hover) {
	.btn-lg:hover {
		background: linear-gradient(45deg, #cd3000, #cd3000);
		box-shadow: none;
	}
}

.card-btn {
	background: #0cb252;
	color: #ffffff;
	padding: 14px 24px;
	border-radius: 40px;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	transition: 0.2s;
}

.card-btn:hover {
	background: #009640;
	text-decoration: underline;
}

.card-btn.gradation {
	background: linear-gradient(45deg, #f69f0a, #f03c04);
	color: #ffffff;
	padding: 14px 20px;
	border-radius: 40px;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	transition: 0.2s;
	box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card-btn.gradation:hover {
	background: linear-gradient(45deg, #cd3000, #cd3000);
	box-shadow: none;
}

.card-btn.center {
	justify-content: center;
	max-width: 260px;
	margin: auto auto 0;
	width: 90%;
}

/* ====================================
	SVG Icons Control
==================================== */
.svg-icon {
	display: block;
	width: 1em;
	height: 1em;
}

/* === Icon Frame Base === */
.icon-circle-color,
.icon-circle-white,
.icon-circle-black,
.icon-accordion-frame,
.icon-jump-frame {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	flex-shrink: 0;
}

/* === Color Circle === */
.icon-circle-color {
	width: 1.6em;
	height: 1.6em;
	background: linear-gradient(0deg, #8cc714, #0cb252);
	color: #ffffff;
	margin-left: 8px;
}

.icon-circle-color .svg-icon {
	font-size: 0.8em;
}

/* === White Circle === */
.icon-circle-white {
	width: 1.6em;
	height: 1.6em;
	background: #ffffff;
	color: #f03c04;
	transition: none;
}

.icon-circle-white .svg-icon {
	font-size: 0.8em;
}

/* === 余白設定と特定アニメーションの限定化 === */
.card-btn .icon-circle-white {
	margin-right: 10px;
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
	backface-visibility: hidden;
	transform: translateZ(0);
}

.card-btn:hover .icon-circle-white {
	transform: translateY(3px);
}

.btn-apply .icon-circle-white {
	margin-left: 12px;
	transition: none;
}

.btn-apply:hover {
	box-shadow: none;
}

.btn-apply:hover .icon-circle-white {
	transform: none;
}

/* === Black Circle === */
.icon-circle-black {
	width: 1.6em;
	height: 1.6em;
	background: #222222;
	color: #ffffff;
	margin-left: 8px;
	transition: none;
}

.icon-circle-black .svg-icon {
	font-size: 0.8em;
}

.kiyaku:hover .icon-circle-black {
	transform: none;
}

/* === Accordion Frame === */
.icon-accordion-frame {
	position: absolute;
	top: 50%;
	right: 28px;
	transform: translateY(-50%);
	width: 2em;
	height: 2em;
	background: linear-gradient(45deg, #f69f0a, #f03c04);
	color: #ffffff;
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.icon-accordion-frame .svg-icon {
	font-size: 1em;
}

/* === Jump Frame === */
.icon-jump-frame {
	width: 1.6em;
	height: 1.6em;
	margin-right: 14px;
	background: #ffffff;
	color: #f03c04;
	transform: rotate(90deg);
	position: relative;
	top: 0;
	transition: top 0.2s ease, transform 0.3s ease;
}

.icon-jump-frame .svg-icon {
	font-size: 0.9em;
}

@media (hover: hover) {
	.fixed-entry-area .btn-lg:hover .icon-jump-frame {
		top: 5px;
	}
}

/* ====================================
	Common Flow
==================================== */
.flow-container {
	max-width: 680px;
	width: 100%;
	margin: 0 auto;
}

.flow-container.white-wrap {
	padding: 40px;
	border-radius: 16px;
	border: 1px solid #666666;
	background: #ffffff;
}

.flow-item {
	background: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 16px;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	box-shadow: 0 0 5px rgba(181, 217, 181, 0.2);
}

.flow-content {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 36px);
}

.flow-num {
	text-align: center;
	min-width: 45px;
	line-height: 1;
}

.flow-num span {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: #222222;
	margin-bottom: 6px;
}

.flow-num strong {
	font-size: 26px;
	font-weight: 700;
}

.item-title {
	font-size: clamp(18px, 3vw, 24px);
	font-weight: 900;
	line-height: 1.6;
	margin-bottom: 4px;
	background: linear-gradient(180deg, #dc490f 0%, #d46032 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.item-title.md {
	font-size: clamp(23px, 3vw, 25px);
	text-align: center;
	margin-bottom: 12px;
}

.flow-desc {
	font-size: 15px;
	font-weight: 500;
	color: #222222;
	line-height: 1.5;
}

/* === Accordion Base === */
details {
	width: 100%;
	margin-top: 10px;
}

summary {
	font-weight: 500;
	position: relative;
	display: block;
	padding-right: 46px;
	cursor: pointer;
}

summary::-webkit-details-marker {
	display: none;
}

details.is-open .icon-accordion-frame {
	transform: translateY(-50%) rotate(180deg);
}

/* ====================================
	Header
==================================== */
header {
	height: 80px;
	background: #ffffff;
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	align-items: center;
}

.header-inner {
	width: 100%;
	padding: 0 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo-area {
	display: flex;
	justify-content: left;
	align-items: center;
	gap: 20px;
}

.logo-area a.logo-ymfg {
	width: clamp(80px, 4.6vw + 63px, 110px);
	margin-top: 4px;
	flex-shrink: 0;
}

.logo-area a.logo-bank {
	width: clamp(138px, 8.2vw + 108px, 191px);
	flex-shrink: 0;
}

.nav-list {
	display: flex;
	gap: clamp(10px, 2vw, 24px);
}

.nav-item {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.nav-item a {
	display: inline-block;
	color: #222222;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	transition: border-color 0.3s;
}

.nav-item a:hover {
	border-bottom-color: #e13a06;
}

.sp-menu {
	display: none;
	position: relative;
	z-index: 2000;
	width: 30px;
	height: 20px;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
}

.sp-menu span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #333333;
	transition: all 0.3s;
	display: block;
}

.sp-menu span:nth-of-type(1) {
	top: 0;
}

.sp-menu span:nth-of-type(2) {
	top: 50%;
	transform: translateY(-50%);
}

.sp-menu span:nth-of-type(3) {
	bottom: 0;
}

.sp-menu.active span:nth-of-type(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.sp-menu.active span:nth-of-type(2) {
	opacity: 0;
}

.sp-menu.active span:nth-of-type(3) {
	bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
}

/* ====================================
	Hero Area
==================================== */
.hero-bg-section {
	width: 100%;
	background-image: url('images/main-pc.png');
	background-size: 1920px;
	height: auto;
	background-position: center -100px;
	background-repeat: no-repeat;
	padding: 0 80px;
}

.hero-bg-section .hero-container {
	max-width: 1500px;
	margin: 0 auto;
}

.hero-text {
	max-width: 680px;
	padding-top: 120px;
	padding-left: 16px;
	padding-right: 16px;
}

.hero-title {
	font-size: clamp(30px, 5vw, 56px);
	font-weight: 900;
	margin-bottom: 16px;
	line-height: 1.2;
/*
	background: linear-gradient(180deg, #009e53 0%, #0cb252 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
*/
	color: #222222;
}

.hero-sub {
	font-size: clamp(18px, 3vw, 32px);
	font-weight: 800;
	margin-bottom: 40px;
	color: #bc340b;
}

.hero-desc {
	font-weight: 500;
	margin-bottom: 24px;
}

details.hero-details summary {
	max-width: 420px;
	background: #ffffff;
	border: 1px solid #df6b41;
	border-radius: 40px;
	padding: 22px 36px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
	height: 100%;
}

details.hero-details summary:hover {
	background: #fff1ea;
}

details.hero-details[open] {
	margin-bottom: -160px;
}

.hero-detail-body {
	background: linear-gradient(135deg, #fff7eb, #fff7eb);
	border: 1px solid #fbe3d3;
	border-radius: 40px;
	padding: clamp(30px, 4vw, 56px) clamp(20px, 5vw, 80px);
	z-index: 100;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.hero-detail-body .about {
	margin-bottom: 40px;
}

.hero-detail-body .about h2 {
	font-size: clamp(20px, 4vw, 24px);
	font-weight: 900;
	margin-bottom: 40px;
	border-bottom: 1px solid #cccccc;
	padding-bottom: 4px;
}

.hero-detail-body .text-image-area {
	display: flex;
	text-align: left;
	justify-content: space-between;
	align-items: flex-start;
}

.hero-detail-body .text-area {
	width: 55%;
	padding-left: 24px;
	padding-right: 64px;
}

.hero-detail-body .text-area p {
	line-height: 2;
	font-size: 18px;
	font-weight: 500;
}

.hero-detail-body .image-area {
	width: 45%;
}

.hero-detail-body img {
	width: 100%;
}

.hero-detail-body .item-title {
	color: #222222;
	font-size: 18px;
	background: none;
	-webkit-text-fill-color: initial;
}

.hero-detail-body .flow-desc {
	font-weight: 400;
	color: #333333;
}

/* ====================================
	Step Area (契約者・対象者)
==================================== */
.step-area {
	margin-top: 200px;
}

.partner .card-gray {
	padding: 24px 22px 32px;
}

.partner p.card-title-big {
	font-size: 23px;
}

.partner .card-title-midium {
	font-size: 17px;
}

img.face {
	max-width: 100%;
	height: 130px;
	margin: 0 auto 26px;
	object-fit: contain;
}

/* ====================================
	Step 1 (従業員向け)
==================================== */
.service .card-title-big {
	margin-bottom: 14px;
}

img.service-icon {
	max-width: 100%;
	height: 68px;
	margin: 0 auto 16px;
	object-fit: contain;
}

/* ====================================
	Step 2 (企業向け)
==================================== */
.for-company .item-title.md {
	font-weight: 800;
}

/* ====================================
	Step 3 (企業型DC)
==================================== */
.features .card-title-big {
	align-self: center;
	background: #ffe640;
	color: #222222;
	-webkit-text-fill-color: initial;
	background-clip: border-box;
	display: inline-block;
	padding: 6px 32px;
	border-radius: 50px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 20px;
}

.features .card-title-big span {
	font-size: 20px;
	margin-left: 6px;
}

.features .card .font-smaller {
	line-height: 1.8;
	color: #333333;
}

.point-title {
	font-size: 20px;
	font-weight: 700;
	margin: 10px auto 12px;
}

details.accordion-panel {
	width: 100%;
	margin-top: 32px;
}

details.accordion-panel summary {
	display: block;
	background: #ffffff;
	border: 1px solid #df6b41;
	border-radius: 20px;
	padding: 18px 36px;
	font-weight: 700;
	color: #222222;
	cursor: pointer;
	position: relative;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
	max-width: 800px;
	margin: 0 auto;
	text-align: left;
	width: 90%;
}

details.accordion-panel summary:hover {
	background: #fff1ea;
}

.detail-body {
	overflow: hidden;
}

.pension-top-area {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-bottom: 60px;
}

.pension-link-item {
	flex: 1;
	text-align: center;
	max-width: 400px;
}

.link-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 24px;
	line-height: 1.6;
}

.pension-top-area .btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 320px;
	width: 90%;
	height: auto;
	border-radius: 38px;
	font-weight: 700;
	font-size: 16px;
	padding: 18px 32px 18px 54px;
	box-sizing: border-box;
	transition: opacity 0.3s;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	margin: 0 auto;
}

.pension-top-area .btn-gradient {
	background: linear-gradient(90deg, #9acd32 0%, #2db458 100%);
	color: #ffffff;
	border: none;
}

.pension-top-area .btn-outline {
	background-color: #ffffff;
	color: #00a54f;
	border: 2px solid #00a54f;
}

.pension-top-area a.btn-gradient:hover {
	background: linear-gradient(90deg, #00a54f 0%, #00a54f 100%);
	text-decoration: underline;
}

.pension-top-area a.btn-outline:hover {
	background-color: #00a54f;
	color: #ffffff;
	text-decoration: underline;
}

.pension-contact-area {
	text-align: center;
}

.contact-header {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 18px;
}

.contact-card {
	background-color: #ffffff;
	border-radius: 16px;
	padding: 30px;
	max-width: 700px;
	margin: 0 auto;
	border: 1px solid #cccccc;
}

.card-title {
	color: #00a040;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 20px 0;
}

.phone-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-bottom: 10px;
	pointer-events: none;
	text-decoration: none;
	color: inherit;
}

.free-icon {
	height: 30px;
	width: auto;
}

.phone-number {
	font-size: 42px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #222222;
	line-height: 1;
}

.reception-time {
	font-size: 14px;
	margin-bottom: 20px;
}

.card-divider {
	border-top: 1px solid #dddddd;
	margin: 0 0 15px 0;
}

.company-name {
	font-size: 14px;
	color: #333333;
}

.please-contact {
	font-size: 22px;
	margin: 12px 0 22px;
}


/* ====================================
	Step 4 (iDeCo+)
==================================== */
.problem-area .card {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	overflow: visible;
	height: 100%;
}

.problem-area .card p.font-smaller {
	background: #ffffff;
	border-radius: 20px;
	padding: 30px 24px 40px;
	min-height: 160px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	position: relative;
	z-index: 1;
	margin-bottom: 0;
	display: flex;
	align-items: flex-start;
	flex-grow: 1;
}

.problem-area .card img {
	width: auto;
	height: 130px;
	margin: -40px auto 0;
	position: relative;
	z-index: 2;
}

.about-system img {
	border: 1px solid #dddddd;
	border-radius: 16px;
}

details.accordion-panel.minus-margin {
	margin-top: -124px;
	margin-bottom: 120px;
}

details.accordion-panel.minus-margin[open] {
	margin-bottom: 64px;
}

.information-box {
	background: #ffffff;
	border: 1px solid #c76441;
	border-radius: 16px;
	padding: 50px 40px;
	width: 100%;
	margin: 32px auto 0;
}

.information-box dt {
	background-color: #f5f5f5;
	padding: 14px 24px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 18px;
	color: #222222;
	margin-bottom: 16px;
}

.information-box dd {
	margin: 0 0 28px 0;
	padding: 0 16px;
	font-size: 16px;
	line-height: 1.8;
}

.information-box.information-notes {
	padding: 32px 40px;
}

.information-notes p {
	position: relative;
	padding-left: 24px;
	margin-bottom: 12px;
	line-height: 1.6;
}

.information-notes p::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 0;
	width: 10px;
	height: 10px;
	background-color: #c76441;
	border-radius: 50%;
}

.service-flow.white-wrap {
	max-width: 800px;
	width: 100%;
}

.service-flow .flow-item {
	background: #b35c42;
	border: none;
	border-radius: 10px;
	padding: 12px 30px;
	margin-bottom: 16px;
	justify-content: flex-start;
}

.service-flow .flow-num {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: #ffffff;
	border-right: 1px solid rgba(255, 255, 255, 0.6);
	padding-right: 20px;
	margin-right: 20px;
	text-align: left;
	min-width: auto;
}

.service-flow .flow-num span {
	color: #ffffff;
	font-size: 13px;
	margin-right: 4px;
}

.service-flow .flow-num strong {
	font-size: 28px;
	color: #ffffff;
}

.service-flow .item-title {
	color: #ffffff;
	background: none;
	-webkit-text-fill-color: initial;
	font-size: 20px;
	margin: 0;
}

.service-flow .flow-description {
	text-align: left;
	font-size: 15px;
	line-height: 1.8;
	color: #333333;
	margin-bottom: 12px;
	padding: 0 10px;
}

.service-flow .arrow-down {
	width: 0;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 10px solid #fcb913;
	margin: 0 auto 18px;
}

/* ====================================
	Footer
==================================== */
footer {
	background: #f5f5f5;
	margin-top: 56px;
	padding: 56px 0 12px;
	border-top: 1px solid #eeeeee;
}

.footer-layout {
	max-width: 1000px;
}

.footer-box {
	background: #ffffff;
	border: 2px solid #c76441;
	border-radius: 24px;
	padding: 32px clamp(20px, 5vw, 60px) 40px;
	width: 100%;
	margin-bottom: 80px;
}

.footer-box .footer-text {
	margin-bottom: 12px;
}

.footer-logo-area {
	display: flex;
	justify-content: left;
	align-items: center;
	gap: 20px;
}

.footer-logo-area a.logo-ymfg {
	width: clamp(80px, 4.6vw + 63px, 110px);
	margin-top: 4px;
	flex-shrink: 0;
}

.footer-logo-area a.logo-bank {
	width: clamp(131px, 7.8vw + 102px, 181px);
	flex-shrink: 0;
}

.footer-corporate-information {
	display: flex;
	justify-content: left;
	gap: 32px;
	margin: 40px auto 24px;
	align-items: center;
}

.footer-corporate-information-text {
	font-size: 14px;
	color: #222222;
	text-align: left;
}

.footer-corporate-information-text p {
	display: flex;
	align-items: flex-start;
}

.footer-corporate-information-text p span {
	flex-shrink: 0;
}

.apply-btn-area {
	max-width: 580px;
	margin: 32px auto 16px;
}

.btn-apply.color-gradient {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(90deg, #fcb913 0%, #f03c04 50%, #f03c04 100%);
	background-size: 200% auto;
	background-position: 0% center;
	color: #ffffff;
	font-weight: 900;
	font-size: 20px;
	width: 100%;
	max-width: 500px;
	margin: 28px auto 56px;
	padding: 22px 24px;
	border-radius: 50px;
	border: 5px solid #ffffff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	transition: background-position 0.3s ease;
}

.btn-apply.color-gradient:hover {

	background: linear-gradient(90deg, #f03c04 0%, #cd3000 50%, #cd3000 100%);
	background-position: 100% center;
	box-shadow: none;
}

.kiyaku-area a {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	color: #222222;
	line-height: 1.6;
	font-size: 18px;
}

.kiyaku-area a:hover {
	text-decoration: underline;
}

/* ====================================
	Fixed Entry Area
==================================== */
.fixed-entry-area {
	position: fixed;
	bottom: 14px;
	right: 18px;
	width: auto;
	z-index: 1000;
	display: flex;
	justify-content: center;
	transform: translateY(calc(100% + 20px));
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.fixed-entry-area.is-active {
	transform: translateY(0);
}

.btn-area {
	margin: 56px 0 24px;
}

.btn-area.fixed-entry-area {
	margin: 0;
}

.fixed-entry-area .btn-lg {
	font-size: 16px;
	font-weight: 700;
	padding: 18px 30px;
	max-width: 460px;
	line-height: 1.5;
	border-radius: 16px;
	width: 100%;
}

/* ====================================
	Media Queries
==================================== */
@media (max-width: 1460px) {
	.header-inner {
		padding: 0 40px;
	}
}

@media (max-width: 1320px) {
	header {
		height: 70px;
	}

	.header-inner {
		padding: 0 40px;
	}

	.sp-menu {
		display: block;
		margin-left: auto;
	}

	.nav-list {
		position: fixed;
		top: 0;
		right: 0;
		transform: translateX(100%);
		width: 100%;
		height: 100vh;
		background: rgba(255, 255, 255, 0.98);
		display: grid;
		justify-content: center;
		align-content: center;
		padding-bottom: 16vh;
		gap: 30px;
		transition: transform 0.4s ease-in-out;
		z-index: 1500;
	}

	.nav-list.active {
		transform: translateX(0);
	}

	.nav-item {
		font-size: 19px;
		text-align: left;
		width: 100%;
	}

	.hero-bg-section {
		background-size: auto 700px;
		background-position: 40% -70px;
		padding: 0 20px;
	}

	.step-area {
		margin-top: 140px;
	}

	details.hero-details[open] {
		margin-bottom: -100px;
	}

	br.pc-only {
		display: none;
	}
}

@media (max-width: 1024px) {
	.hero-bg-section {
		background-image: url('images/main-sp.png');
		background-size: auto 510px;
		background-position: 20% 0;
	}

	.hero-text {
		max-width: 100%;
		padding-top: 80px;
	}

	details.hero-details summary {
		max-width: 390px;
		padding: 20px 32px;
		font-size: 15px;
	}

	.hero-detail-body {
		width: 80%;
		flex-direction: column;
		padding: 36px 40px;
	}

	details.hero-details[open] {
		margin-bottom: -50px;
	}

	.hero-detail-body .text-area {
		width: 50%;
		padding-right: 0;
		margin-bottom: 32px;
	}

	.hero-detail-body .text-area p {
		line-height: 1.8;
		font-size: 16px;
		font-weight: 400;
	}

	.hero-detail-body .image-area {
		width: 50%;
		max-width: 400px;
		margin: 0 auto;
	}

	.hero-detail-body img {
		padding-left: 40px;
	}

	.heading-img {
		width: 40%;
	}

	.heading-title {
		font-size: clamp(28px, 3.5vw, 42px);
		margin-bottom: 24px;
	}

	.step-label-num {
		font-size: 22px;
	}

	.heading-text {
		width: 60%;
		padding-left: 40px;
		margin-bottom: 32px;
	}

	.step-area {
		margin-top: 80px;
	}

	footer {
		margin-top: 64px;
		padding: 48px 0 12px;
	}

	.footer-corporate-information {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}

@media (max-width: 920px) {
	.header-inner {
		padding: 0 32px 0 20px;
	}

	.hero-bg-section {
		background-size: auto 390px;
		background-position: center -50px;
		padding: 346px 20px 0;
	}

	.hero-sub {
		margin-bottom: 20px;
	}

	.hero-text {
		padding-top: 20px;
	}

	.hero-desc {
		font-size: 15px;
	}

	details.hero-details summary {
		max-width: 390px;
		padding: 18px 50px 18px 36px;
		font-size: 15px;
		width: 98%;
		border-radius: 32px;
	}

	.hero-detail-body .text-area p {
		line-height: 1.8;
	}

	.step-area {
		margin-top: 46px;
	}

	.partner p.card-title-big {
		font-size: 20px;
	}

	.partner .card-title-midium {
		font-size: 16px;
	}

	.hero-detail-body {
		width: 100%;
		padding: 26px 28px;
	}

	details.hero-details[open] {
		margin-bottom: -16px;
	}

	.hero-detail-body .item-title {
		font-size: clamp(17px, 3vw, 18px);
	}

	.link-title {
		font-size: 17px;
	}

	.pension-top-area .btn {
		width: 100%;
		font-size: 15px;
		padding: 18px 28px 18px 32px;
	}

	.card-title {
		font-size: 19px;
	}

	.phone-number {
		font-size: 32px;
	}

	.phone-wrapper {
		margin-bottom: 14px;
	}

	.reception-time {
		font-size: 13px;
	}

	.card-title-big {
		font-size: 20px;
	}

	.item-title.md {
		font-size: 20px;
	}

	.features .card-title-big {
		font-size: 14px;
	}

	.features .card-title-big span {
		font-size: 18px;
	}

	.service-flow .item-title {
		font-size: 18px;
	}

	.service-flow .flow-item {
		margin-bottom: 13px;
	}

	.service-flow .flow-num {
		margin-right: 8px;
	}

	.service-flow .flow-num strong {
		font-size: 24px;
	}

	.service-flow .arrow-down {
		margin: 0 auto 12px;
	}

	.font-bigger {
		font-size: 15px;
		line-height: 1.7;
	}

	.mb-40 {
		margin-bottom: 32px;
	}

	.information-box dt {
		padding: 12px 20px;
		font-size: 17px;
		margin-bottom: 14px;
	}

	.fixed-entry-area {
		bottom: 1px;
		right: 6px;
	}
}

@media (max-width: 768px) {
	.hero-bg-section {
		padding: 346px 20px 0;
	}

	.hero-detail-body .about h2 {
		font-size: 22px;
		margin-bottom: 28px;
		line-height: 1.5;
	}

	.heading-flex {
		flex-direction: column;
		text-align: center;
	}

	.heading-img {
		width: 46%;
		max-width: 500px;
		padding-left: 0;
	}

	.heading-text {
		align-items: center;
		width: 100%;
		padding-left: 0;
		padding-top: 24px;
	}

	.heading-title {
		margin-bottom: 20px;
	}

	.heading-desc {
		font-weight: 400;
		text-align: left;
	}

	.top-message p,
	.bottom-message p {
		text-align: left;
	}

	.flow-item {
		flex-direction: column;
		text-align: left;
		align-items: flex-start;
		padding: 16px 20px 18px;
	}

	.flow-content {
		gap: 14px;
	}

	.flow-num {
		margin-left: -14px;
	}

	.item-title {
		font-size: clamp(21px, 3vw, 24px);
		margin-bottom: 8px;
		text-align: left;
	}

	.flow-desc {
		font-size: 14px;
		font-weight: 400;
		color: #333333;
		text-align: left;
	}

	.section-lead {
		font-size: 15px;
	}

	.section-title {
		font-size: 22px;
	}

	.bg-box {
		padding: 30px 16px;
		border-radius: 20px;
	}

	.card-title-midium {
		line-height: 1.5;
		text-align: center;
	}

	.card-btn.center {
		margin-top: 12px;
	}

	.grid-2,
	.grid-3 {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.pension-top-area {
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}

	.pension-link-item {
		width: 100%;
	}

	.link-title {
		margin-bottom: 14px;
	}

	.contact-header {
		font-size: 20px;
	}

	.free-icon {
		height: 24px;
	}

	.phone-wrapper {
		flex-wrap: wrap;
		pointer-events: auto;
	}

	.phone-number {
		font-size: 34px;
	}

	.information-box {
		padding: 30px 20px;
	}

	.information-box dt {
		font-size: 16px;
		padding: 12px 16px;
	}

	.information-box dd {
		margin-bottom: 24px;
		font-size: 15px;
	}

	.information-box.information-notes {
		padding: 32px 22px;
	}

	.information-notes p {
		padding-left: 20px;
		font-size: 15px;
	}

	.service-flow.white-wrap {
		padding: 30px 20px;
	}

	.service-flow .flow-item {
		flex-direction: column;
		text-align: left;
		align-items: flex-start;
		padding: 10px 20px;
	}

	.service-flow .item-title {
		font-size: 17px;
	}

	.service-flow .flow-num {
		margin-left: 0;
		margin-right: 20px;
		border-right: 1px solid rgba(255, 255, 255, 0.6);
		padding-right: 15px;
	}

	.service-flow .flow-num strong {
		font-size: 22px;
	}

	.fixed-entry-area .btn-lg {
		font-size: 17px;
		padding: 20px 24px;
		max-width: 480px;
	}

	img.face {
		height: 90px;
	}

	img.service-icon {
		height: 64px;
	}

	.card-title-big {
		font-size: 20px;
	}

	.card-title {
		font-size: 18px;
	}

	.hero-detail-body .text-image-area {
		display: block;
	}

	.hero-detail-body .text-area {
		width: 100%;
		padding: 0;
		margin-bottom: 24px;
	}

	.hero-detail-body .image-area {
		width: 96%;
		max-width: 400px;
		margin: 0 auto;
	}

	.hero-detail-body img {
		padding: 0;
	}

	.card-btn.gradation {
		padding: 14px 12px;
		font-size: 13px;
	}

	.heading-title {
		font-size: 24px;
		margin-bottom: 20px;
	}

	footer {
		padding: 40px 0 2px;
	}

	.footer-box {
		margin-bottom: 48px;
	}
}

@media (max-width: 510px) {
	.header-inner {
		padding: 0 24px 0 18px;
	}

	.container {
		padding: 0 16px;
	}

	.hero-bg-section {
		background-size: auto 330px;
		background-position: center -32px;
		padding: 310px 20px 0;
	}

	.hero-detail-body {
		padding: 26px 20px;
		border-radius: 20px;
	}

	details.hero-details summary {
		padding: 18px 52px 18px 20px;
		width: 100%;
	}

	.icon-accordion-frame {
		right: 18px;
		width: 1.8em;
		height: 1.8em;
	}

	.hero-title {
		font-size: 31px;
		margin-bottom: 12px;
	}

	.hero-sub {
		font-size: 20px;
	}

	.hero-detail-body .about h2 {
		font-size: 20px;
		margin-bottom: 24px;
	}

	.grid-2,
	.grid-3 {
		grid-template-columns: 1fr;
	}

	.heading-text {
		padding-top: 18px;
		margin-bottom: 18px;
	}

	.section-title {
		font-size: 20px;
		font-weight: 700;
	}

	.bottom-message p {
		font-size: 15px;
	}

	.heading-desc {
		font-size: 15px;
	}

	.step-label-num {
		font-size: 16px;
	}

	.pension-top-area .btn {
		padding: 18px 24px 18px 32px;
		max-width: 300px;
	}

	.contact-card {
		padding: 30px 18px;
	}

	.phone-number {
		font-size: 28px;
	}

	.reception-time,
	.company-name {
		text-align: left;
	}

	.service-flow .flow-item {
		padding: 10px 14px;
	}

	.service-flow .flow-num {
		margin-right: 2px;
		padding-right: 12px;
	}

	.service-flow .item-title {
		font-size: 16px;
	}

	.problem-area .card img {
		height: 100px;
		margin-top: -48px;
	}

	.partner .card-gray {
		padding: 20px 16px 26px;
	}

	.fixed-entry-area .btn-lg {
		font-size: 14px;
		padding: 18px 16px;
	}

	.btn-apply.color-gradient {
		gap: 12px;
		font-size: 15px;
		padding: 22px 6px;
		font-weight: 700;
	}

	.footer-box {
		padding: 32px 16px 40px;
	}

	.kiyaku-area a {
		font-size: 15px;
	}

	.point-title {
		font-size: 19px;
	}
	.please-contact {
		font-size: 17px;
		margin: 10px 0 22px;
		text-align: left;
	}
}

@media (max-width: 480px) {
	br.under480-only,
	br.pc-only.also-under480 {
		display: block;
	}
}

@media (max-width: 380px) {
	.header-inner {
		padding: 0 16px;
	}

	.hero-bg-section {
		padding: 300px 16px 0;
	}

	.hero-title {
		font-size: 26px;
	}

	.hero-detail-body .about h2 {
		font-size: 18px;
	}
}