/* ================================================================= FV =================================================================*/ #fv {position: relative;} #fv .swiper {width: 100%; height: calc(100svh - 7rem); min-height: 56rem;} #fv .swiper-slide {position: relative; overflow: hidden; transform: translateZ(0);} #fv .swiper-slide picture {display: block; width: 100%; height: 100%;} #fv .swiper-slide img {width: 100%; height: 100%; object-fit: cover; display: block;} #fv .fv-content {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; align-items: center;} #fv .fv-content .inner {padding-left: 6rem; max-width: 120rem; width: 100%;} #fv .fv-content .catch-sub {font-size: 1.6rem; font-weight: 700; color: rgba(255,255,255,.9); font-family: "Roboto", sans-serif; letter-spacing: .08em; margin-bottom: 2.4rem; display: block;} #fv .fv-content .fv-heading {font-size: 6.4rem; font-weight: 700; color: #fff; line-height: 1.35; margin-bottom: 3.6rem; font-family: "Noto Serif JP", serif; display: flex; flex-direction: column; align-items: flex-start;} #fv .fv-content .fv-heading span {display: inline-block; position: relative;} #fv .fv-content .fv-heading span::before {content: ""; display: inline-block; width: 100%; height: 3.9rem; background: linear-gradient(90deg, rgba(34, 80, 227, 0.00) 0%, #2250E3 100%); mix-blend-mode: hard-light; position: absolute; bottom: 0; z-index: -1;} #fv .fv-content .fv-heading span:nth-child(1)::before {width: 106%;} #fv .fv-content .fv-heading span:nth-child(3)::before {width: 96%;} #fv .fv-bg {position: absolute; inset: 0; animation: fv-zoom 12s ease-out forwards; animation-play-state: paused;} #fv .fv-bg picture {display: block; width: 100%; height: 100%;} #fv .fv-bg img {width: 100%; height: 100%; object-fit: cover; display: block;} #fv .swiper-slide-active .fv-bg {animation-play-state: running;} /* Swiper ページネーション */ #fv .swiper-pagination {bottom: 3.2rem; z-index: 20; left: 0; right: 0; text-align: center; width: auto; display: flex; align-items: center; justify-content: center; gap: .2rem;} #fv .swiper-pagination-bullet {width: 1rem; height: .4rem; border-radius: 9999px; background: #fff; opacity: 1; margin: 0 !important; position: relative; overflow: hidden; transition: width .4s ease, height .4s ease;} #fv .swiper-pagination-bullet .bullet-progress {position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #2250e3; border-radius: 9999px;} #fv .swiper-pagination-bullet-active {width: 3rem; height: .4rem; background: #fff;} #fv .swiper-pagination-bullet.is-playing .bullet-progress {animation: bullet-fill 10s linear forwards;} #fv .fv-button {display: flex; align-items: center; justify-content: space-between; text-decoration: none; width: 22rem; height: 6rem; flex-shrink: 0; border-radius: 5px; background: linear-gradient(90deg, #2250E3 0%, #52A8FD 50%, #2250E3 100%); padding: 2rem 2rem;} #fv .fv-button:hover {opacity: 0.8;} #fv .fv-button-body {display: flex; flex-direction: column; gap: .8rem;} #fv .fv-button-title {font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1; font-family: "Noto Serif JP", serif;} #fv .fv-button-arrow {width: 3rem; height: 3rem; background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: .5rem;} #fv .fv-button-arrow::before {content:""; background-image: url("../img/common/icon-button-arrow.svg"); background-size: cover; display: block; height: .7rem; width: 1.2rem;} @keyframes bullet-fill { from { width: 0; } to { width: 100%; } } /* FV ズームアニメーション */ @keyframes fv-zoom { from { transform: scale(1.05); } to { transform: scale(1.5); } } @media screen and (max-width: 999px) { #fv {margin-top: 5rem;} #fv .swiper {height: calc(100svh - 6rem); min-height: 48rem;} #fv .fv-content .inner {padding-left: 2rem; max-width: 100%;} #fv .fv-content {align-items: flex-end; padding-bottom: 6rem;} #fv .fv-content .fv-heading {font-size: 3.2rem; line-height: 1.4; margin-bottom: 3rem;} #fv .fv-content .fv-heading span::before {display: none;} #fv .fv-content .catch-sub {font-size: 1.3rem; margin-bottom: 1.6rem;} #fv .swiper-pagination {display: none;} #fv .fv-button {width: 28rem; padding: 2rem 1.5rem;} } /* ================================================================= OUR SERVICES =================================================================*/ #services {padding: 9rem 0; position: relative; overflow: hidden;} #services::before {content: ""; position: absolute; top: 0; right: 0; width: 98rem; height: 100%; background: rgba(34, 80, 227, 0.06); pointer-events: none; z-index: 0;} #services .title-wrap {display: flex; justify-content: space-between; position: relative; z-index: 1;} #services .sec-title {margin-bottom: 2.4rem;} #services .services-lead {font-size: 1.6rem; color: #555; line-height: 1.5; font-family: "Noto Serif JP", serif; padding-top: 4.6rem;} #services .services-grid {display: flex; justify-content: space-between;} #services .service-card {width: 57rem; height: 23rem; border-radius: 1rem; background-size: cover; color: #fff; display: flex; align-items: center; justify-content: flex-end; padding: 4rem;} #services .service-card:nth-child(1) {background-image: url(../img/services_card01.png);} #services .service-card:nth-child(2) {background-image: url(../img/services_card02.png);} #services .service-card .slide-content {width: 18rem;} #services .service-card .slide-content h3 {font-size: 2rem;} #services .service-card .slide-content p {font-size: 1.4rem; color: #fff;} @media screen and (max-width: 999px) { #services {padding: 7rem 0;} #services::before {width: 26rem;} #services .title-wrap {flex-direction: column; gap: 2rem; justify-content: flex-start;} #services .sec-title {margin-bottom: 0rem;} #services .services-lead {padding: 0; margin: 0; font-size: 1.6rem; margin-bottom: 3rem;} #services .services-grid {flex-direction: column; gap: 2rem;} #services .service-card {height: 19.1rem; width: 100%; padding: 2rem;} #services .service-card:nth-child(1) {background-image: url(../img/services_card01_sp.png);} #services .service-card:nth-child(2) {background-image: url(../img/services_card02_sp.png);} #services .slide-content h3 {font-size: 2rem; margin-bottom: 1rem;} } /* ================================================================= ABOUT US =================================================================*/ #about {padding: 10rem 0 24.7rem; overflow: hidden; position: relative;} #about .inner {max-width: 1480rem;} #about .about-inner {display: flex; align-items: flex-start; justify-content: space-between; gap: 8rem; position: relative; z-index: 1;} #about .about-image {width: 70rem; flex-shrink: 0; position: relative;} #about .about-image .img-main {display: block; width: 60rem;} #about .about-image .img-sub {position: absolute; width: 48rem; bottom: -30.4rem; right: 0rem;} #about .about-text {flex: 1;} #about .about-text .sec-title {margin-bottom: 2.4rem;} #about .about-text .about-sub {font-size: 2.4rem; font-weight: 500; line-height: 1.8; margin-bottom: 2.4rem; font-family: "Noto Serif JP", serif;} #about .about-text p {font-size: 1.6rem; line-height: 1.8;} #about .about-text .btn {margin-top: 2.4rem;} @media screen and (max-width: 999px) { #about {padding: 6rem 0 17.8rem;} #about .bg-text {font-size: 6rem; top: 4rem; transform: none;} #about .inner {padding: 0;} #about .about-inner {flex-direction: column-reverse; gap: 4rem;} #about .about-image {width: 100%;} #about .about-image .img-main {width: 28.7rem;} #about .about-image .img-sub {width: 22.9rem; bottom: -14.5rem; right: 0;} #about .about-text {padding: 0 2rem;} #about .about-text .about-sub {font-size: 2rem; margin-bottom: 2rem;} #about .about-text p {line-height: 1.5;} #about .about-text .btn {width: 100%; justify-content: center;} } /* ================================================================= RECRUIT =================================================================*/ @keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(-33.333%); } } #recruit {background: #f7f9fc; position: relative;} #recruit .bg-text-track {position: absolute; top: -11.9rem; left: 0; width: 100%; height: 15.4rem; overflow: hidden; pointer-events: none; z-index: 100;} #recruit .bg-text {display: flex; width: max-content; animation: marquee-rtl 40s linear infinite; gap: 10rem;} #recruit .bg-text img {height: 15.4rem; width: auto; display: block;} #recruit h2 {letter-spacing: .5rem;} #recruit .recruit-layout {max-width: 140rem; margin: 0 auto; display: flex; justify-content: space-between; min-height: 76rem; position: relative; overflow: hidden;} #recruit .recruit-layout img {height: auto; position: absolute;} #recruit .recruit-layout .bg-img01 {width: 36rem; top: 8.2rem; left: 0;} #recruit .recruit-layout .bg-img02 {width: 26.8rem; top: 42.2rem; left: 4.6rem;} #recruit .recruit-layout .bg-img03 {width: 30rem; top: 4.4rem; right: 8rem;} #recruit .recruit-layout .bg-img04 {width: 31rem; top: 44.4rem; right: 0;} #recruit .recruit-content {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 13rem 0rem; position: absolute; left: 0; right: 0; margin: auto;} #recruit .recruit-content .sec-title {margin-bottom: 2.4rem;} #recruit .recruit-sub {font-size: 2.4rem; font-weight: 500; color: #1a1a2e; line-height: 1.8; margin-bottom: 2rem; font-family: "Noto Serif JP", serif;} #recruit .recruit-content p {font-size: 1.6rem; line-height: 1.8; color: #555; margin-bottom: 5rem;} #recruit .recruit-button {display: flex; align-items: center; justify-content: space-between; text-decoration: none; width: 22rem; height: 6rem; flex-shrink: 0; border-radius: 5px; background: linear-gradient(90deg, #2250E3 0%, #52A8FD 50%, #2250E3 100%); padding: 2rem 2rem;} #recruit .recruit-button:hover {opacity: 0.8;} #recruit .recruit-button-body {display: flex; flex-direction: column; gap: .8rem;} #recruit .recruit-button-title {font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1; font-family: "Noto Serif JP", serif;} #recruit .recruit-button-arrow {width: 3rem; height: 3rem; background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: .5rem;} #recruit .recruit-button-arrow::before {content:""; background-image: url("../img/common/icon-button-arrow.svg"); background-size: cover; display: block; height: .7rem; width: 1.2rem;} @media screen and (max-width: 999px) { #recruit .bg-text-track {height: 9.24rem; top: -7.1rem} #recruit .bg-text img {height: 9.24rem;} #recruit h2 {letter-spacing: 0rem; font-size: 3.2rem;} #recruit .recruit-sub {font-size: 2rem;} #recruit .recruit-content p {line-height: 1.5; margin-bottom: 16rem;} #recruit .recruit-layout {min-height: 67.7rem;} #recruit .recruit-layout .bg-img01 {width: 10rem; top: 7.1rem; left: 0;} #recruit .recruit-layout .bg-img02 {width: 10rem; top: 41.7rem; left: 2rem;} #recruit .recruit-layout .bg-img03 {width: 10rem; top: 2rem; right: 0rem;} #recruit .recruit-layout .bg-img04 {width: 10rem; top: 43.6rem; right: 2rem;} #recruit .recruit-content {padding: 6rem 2rem 0;} #recruit .recruit-button {width: 28rem;} } /* ================================================================= OUR JOBS =================================================================*/ #jobs {padding: 10rem 0;} #jobs .jobs-layout {display: flex; gap: 0; align-items: flex-start; justify-content: space-between;} #jobs .jobs-left {width: 50%; flex-shrink: 0; position: sticky; top: 10rem;} #jobs .jobs-left .sec-title {margin-bottom: 2.4rem;} #jobs .jobs-left .jobs-left-sub {font-size: 2.4rem; font-weight: 500; line-height: 1.8; margin-bottom: 4rem; font-family: "Noto Serif JP", serif;} #jobs .jobs-left .jobs-lead {font-size: 1.6rem; line-height: 1.8;} #jobs .jobs-right {width: 54rem; display: flex; flex-direction: column;} #jobs .job-item {border-top: .2rem solid; border-image: linear-gradient(to right, #2250e3 3.6rem, #DBDBDB 3.6rem) 1; padding: 2rem 0 4rem;} #jobs .job-item-head {display: flex; align-items: center; gap: 1.6rem; margin-bottom: 1.2rem;} #jobs .job-item-head .job-num {font-size: 3.2rem; font-weight: 500; color: #2250e3; font-family: "Poppins", sans-serif; line-height: 1;} #jobs .job-item-head h3 {font-size: 2.4rem; font-weight: 500; color: #303134; line-height: 1.5;} #jobs .job-desc {font-size: 1.6rem; line-height: 1.5; color: #303134; margin-bottom: 2rem;} #jobs .job-image {overflow: hidden;} #jobs .job-image img {display: block; width: 100%; transition: transform .6s ease;} @media screen and (max-width: 999px) { #jobs {padding: 6rem 0;} #jobs .jobs-layout {flex-direction: column; gap: 4rem;} #jobs .jobs-left {width: 100%; position: static;} #jobs .jobs-left .jobs-left-sub {font-size: 2rem; font-weight: 500;} #jobs .jobs-right {width: 100%;} #jobs .job-item {padding: 2rem 0 4rem; border-image: linear-gradient(to right, #2250e3 2.2rem, #DBDBDB 2.2rem) 1;} #jobs .job-item-head .job-num {font-size: 3.2rem;} #jobs .job-item-head h3 {font-size: 2.4rem;} } /* ================================================================= IMAGE SLIDER =================================================================*/ @keyframes marquee-ltr { from { transform: translateX(-33.333%); } to { transform: translateX(0); } } #image-slider {overflow: hidden; padding-bottom: 13rem;} #image-slider .slider-track {display: flex; gap: 4rem; width: max-content; animation: marquee-ltr 70s linear infinite;} #image-slider .slider-track img {display: block; height: 56rem; flex-shrink: 0;} @media screen and (max-width: 999px) { #image-slider {padding-bottom: 6rem;} #image-slider .slider-track {gap: 2.1rem; animation: marquee-ltr 40s linear infinite;} #image-slider .slider-track img {height: 30rem;} } /* ================================================================= INCOME =================================================================*/ #income {background: #2250e3; color: #fff; position: relative;} #income .bg-text-track {position: absolute; top: 19.5rem; left: 0; width: 100%; height: 15.4rem; overflow: hidden; pointer-events: none; z-index: 0;} #income .bg-text {display: flex; width: max-content; animation: marquee-rtl 40s linear infinite; gap: 10rem;} #income .bg-text img {height: 11.584rem; width: auto; display: block;} #income .income-inner {max-width: 120rem; margin: 0 auto; padding: 13rem 0rem; position: relative; z-index: 1;} /* ヘッダーエリア */ #income .income-header {text-align: center; margin-bottom: 6rem;} #income .income-title {font-size: 3.2rem; font-weight: 700; color: #fff; font-family: "Noto Serif JP", serif; line-height: 1.8; margin-bottom: 4rem;} #income .income-title strong {font-size: 4.8rem; font-weight: 700;} #income .income-lead {font-size: 1.5rem; color: rgba(255,255,255,.85); line-height: 1.9; font-family: "Noto Serif JP", serif;} /* 数値カード */ #income .stats-wrap {display: flex; justify-content: center; gap: 6rem; margin-bottom: 5rem;} #income .stat-card {background: #fff; padding: 3.6rem 3.2rem 3.2rem; text-align: center; flex: 1; max-width: 36rem; clip-path: polygon(4rem 0, 100% 0, 100% 100%, 0 100%, 0 4rem);} #income .stat-card .stat-label {font-size: 2rem; font-weight: 500; color: #2250e3; margin-bottom: 2rem; font-family: "Noto Serif JP", serif; line-height: 1.5;} #income .stat-card .stat-icon {height: 11.1rem; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 2rem;} #income .stat-card .stat-icon img {height: 100%; width: auto;} #income .stat-card .stat-num {font-size: 4.8rem; font-weight: 500; line-height: 1; color: #2250e3; display: flex; align-items: baseline; justify-content: center; gap: 0;} #income .stat-card .stat-num .stat-unit {font-size: 2.4rem; font-weight: 500; font-family: "Noto Serif JP", serif; color: #2250e3;} /* グラフエリア */ #income .graph-wrap {display: flex; gap: 4rem; align-items: stretch; margin-bottom: 8rem;} #income .graph-item {flex: 1; background: #fff; padding: 4rem 0 3.2rem; clip-path: polygon(4rem 0, 100% 0, 100% 100%, 0 100%, 0 4rem);} #income .graph-item h4 {font-size: 2rem; font-weight: 500; color: #2250e3; margin-bottom: 2.8rem; font-family: "Noto Serif JP", serif; text-align: center;} #income .graph-item:nth-child(2) h4 {margin-bottom: 1.478rem;} #income .graph-item .flex {display: flex; justify-content: center; align-items: flex-start; gap: 10.7rem;} #income .graph-item .flex .box {display: flex; flex-direction: column; align-items: center; gap: 1.8rem; color: #2250E3;} #income .graph-item .flex .box p {font-size: 1.6rem;} #income .graph-item .flex img {width: 17.1rem;} #income .graph-item img {width: 100%; display: block; margin: auto;} #income .graph-item:nth-child(1) img {height: 20.6rem; width: auto;} /* 棒グラフ */ #income .bar-chart-inner {display: flex; align-items: flex-end; gap: 1.2rem; height: 20.6rem; width: 24rem; margin: auto;} #income .bar-col {display: flex; flex-direction: column; align-items: center; flex: 1; width: 4.2rem;} #income .bar-wrap {width: 100%; height: 17.2rem; display: flex; align-items: flex-end; justify-content: center;} #income .bar-fill {width: 3rem;} #income .bar--light {background: #52A8FD;} #income .bar--dark {background: #2250E3;} #income .bar-label {font-size: 1.6rem; font-weight: 500; color: #2250e3; white-space: nowrap; margin-top: 1rem; font-family: "Noto Serif JP", serif; line-height: 1.5;} /* ボトムメッセージ */ #income .income-message {text-align: center; font-size: 3.2rem; font-weight: 700; color: #fff; font-family: "Noto Serif JP", serif; line-height: 1.5; margin-bottom: 4rem;} /* 働き方 */ #income .work-styles {display: flex; justify-content: center; gap: 6rem;} #income .work-style-item {display: flex; flex-direction: column; align-items: center; flex: 1; max-width: 36rem; background: #fff; padding: 4rem 3.7rem; clip-path: polygon(4rem 0, 100% 0, 100% 100%, 0 100%, 0 4rem);} #income .work-style-item .work-style-icon {height: 13.9rem; width: 13.9rem; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; background: #F9F9F9; border-radius: 100%;} #income .work-style-item .work-style-icon img {height: auto; width: auto;} #income .work-style-item h4 {font-size: 2rem; font-weight: 400; color: #2250e3; font-family: "Noto Serif JP", serif; line-height: 1.4; margin-bottom: 2rem; text-align: center;} #income .work-style-item .work-style-sub {font-size: 1.6rem; font-weight: 500; color: #2250e3; font-family: "Noto Serif JP", serif; margin-bottom: 1.2rem;} #income .work-style-item .work-style-desc {font-size: 1.6rem; color: #303134; font-family: "Noto Serif JP", serif; line-height: 1.5;} @media screen and (max-width: 999px) { #income .bg-text-track {height: 6.95rem; top: 11.4rem;} #income .bg-text img {height: 6.95rem;} #income .income-title {font-size: 2.4rem; line-height: 1.5; margin-bottom: 2rem;} #income .income-title strong {font-size: 2.8rem;} #income .income-inner {padding: 6rem 2rem;} #income .income-title {font-size: 2.4rem;} #income .income-lead {font-size: 1.6rem; line-height: 1.8;} #income .stat-card .stat-label {margin-bottom: 1.7rem;} #income .stats-wrap {flex-direction: column; align-items: stretch; gap: 2rem; margin-bottom: 2rem;} #income .stat-card {max-width: 100%; padding: 2.8rem 2rem;} #income .graph-wrap {flex-direction: column; gap: 2.4rem; margin-bottom: 6rem;} #income .graph-item {padding: 3rem;} #income .graph-item .flex {gap: 1.7rem;} #income .graph-item .flex img {width: 12rem;} #income .income-message {font-size: 2rem; margin-bottom: 2rem;} #income .work-styles {flex-direction: column; gap: 2rem;} #income .work-style-item {max-width: 100%; padding: 4rem 2.5rem;} } /* ================================================================= ENTRY FLOW（タブ切り替え：募集要項 / 採用フロー） =================================================================*/ #flow {padding: 10rem 0; background: #fff;} #flow .occupation-box {display: flex; align-items: center; justify-content: center; flex-direction: column;} #flow .occupation-box + .occupation-box {margin-top: 7.2rem;} /* タブナビ */ #flow .tab-nav {display: flex; gap: 2rem; margin-bottom: 4rem; width: 36rem; padding: 1rem; background: #F9F9F9; border-radius: .5rem;} #flow .tab-nav .tab-btn {flex: 1; width: 16rem; height: 4.4rem; font-size: 1.6rem; font-weight: 400; color: #9B9B9B; cursor: pointer; background: #fff; border: 0; font-family: "Noto Serif JP", serif; transition: .2s all; border-radius: .5rem;} #flow .tab-nav .tab-btn.is-active {background: #2250e3; color: #fff; font-weight: 400;} #flow .tab-nav .tab-btn:hover {opacity: 1; color: #2250e3;} #flow .tab-nav .tab-btn.is-active:hover {color: #fff;} /* タブコンテンツ */ #flow .tab-content {display: none;} #flow .tab-content.is-active {display: block;} /* 募集要項テーブル */ #flow .entry-table {width: 100%; max-width: 80rem; border-collapse: collapse; margin-bottom: 6rem;} #flow .entry-table th {width: 14rem; padding: 2rem 0rem; font-size: 1.6rem; font-weight: 500; color: #2250e3; text-align: left; vertical-align: middle; background: transparent; border-bottom: .1rem solid #2250E3;} #flow .entry-table td {width: 76rem ;padding: 2rem 2.4rem; font-size: 1.6rem; font-weight: 400; color: #303134; line-height: 1.8; background: #fff; border-bottom: .1rem solid #DBDBDB;} /* 採用フローステップ */ #flow .flow-steps {display: flex; flex-direction: column; gap: 0rem; max-width: 80rem; margin-bottom: 6rem;} #flow .flow-steps:before {content: "" ; width: .1rem; height: 35.4rem; background-image: url(../img/flow_line.png); background-size: cover; position: absolute; left: 2rem; top: 7.3rem; z-index: -1;} #flow .flow-step {display: flex; align-items: center; gap: 2.4rem; padding: 0rem 0;} #flow .flow-step .icon {display: flex; justify-content: center; align-items: center; flex-shrink: 0; background: #E9F5FC; border-radius: .5rem; height: 8.2rem; width: 8.2rem;} #flow .flow-step .step-circle {width: 4.4rem; height: 4.4rem; border-radius: 50%; background: #2250e3; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0;} #flow .flow-step .step-circle .en {font-size: 1.6rem; font-weight: 400; font-family: "Noto Serif JP", serif;} #flow .flow-step .step-body {flex: 1; display: flex; align-items: center; border-bottom: .1rem solid #DDDDDD; padding: 2rem 0 2rem; gap: 2rem;} #flow .flow-step .setp-body-inner {display: flex; justify-content: flex-start; align-items: center; gap: 2rem; width: 100%;} #flow .flow-step .step-body h4 {font-size: 2rem; font-weight: 500; color: #303134; margin-bottom: .8rem; font-family: "Noto Serif JP", serif;} #flow .flow-step .step-body p {font-size: 1.6rem; color: #555; line-height: 1.8; font-family: "Noto Serif JP", serif;} /* ENTRYボタン */ #flow .flow-entry {display: flex; align-items: center; justify-content: space-between; text-decoration: none; width: 45.9rem; height: 11.9rem; flex-shrink: 0; border-radius: 5px; background: linear-gradient(90deg, #2250E3 0%, #52A8FD 50%, #2250E3 100%); padding: 2rem 4rem;} #flow .flow-entry:hover {opacity: 0.8;} #flow .flow-entry-link-body {display: flex; flex-direction: column; gap: .8rem;} #flow .flow-entry-link-title {font-size: 3.2rem; font-weight: 700; color: #fff; line-height: 1.4;} #flow .flow-entry-link-sub {font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1.4;} #flow .flow-entry-link-arrow {width: 3rem; height: 3rem; background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: .5rem;} #flow .flow-entry-link-arrow::before {content:""; background-image: url("../img/common/icon-button-arrow.svg"); background-size: cover; display: block; height: .7rem; width: 1.2rem;} @media screen and (max-width: 999px) { #flow {padding: 7rem 0 5.2rem;} #flow .tab-nav {width: 100%; margin-bottom: 2rem;} #flow .tab-nav .tab-btn {font-size: 1.4rem;} #flow .entry-table th, #flow .entry-table td {display: block; width: 100%;} #flow .entry-table th {border-bottom: 0; padding: 1.1rem 0 1rem 0;} #flow .entry-table td {padding: 0 0 1.1rem 0;} #flow .flow-steps {margin-bottom: 3rem;} #flow .flow-steps:before {height: 43rem; background-size: contain; background-repeat: repeat;} #flow .flow-step:nth-child(1) .step-body {flex-direction: column; gap: 1rem;} #flow .flow-step .setp-body-inner {display: flex; justify-content: flex-start; align-items: center; gap: 2rem; width: 100%;} #flow .flow-step .step-body h4 {font-size: 1.6rem;} #flow .flow-step .step-body p {width: 100%;} #flow .flow-step:nth-child(1) img {width: 3.346rem;} #flow .flow-step:nth-child(2) img {width: 3rem;} #flow .flow-step:nth-child(3) img {width: 4.5rem;} #flow .flow-step:nth-child(4) img {width: 5.2rem;} #flow .flow-entry {width: 28rem; height: 6rem; padding: 0 2rem;} #flow .flow-entry-link-title {font-size: 2.4rem;} #flow .flow-entry-link-sub {display: none;} #flow .flow-step.one {align-items: flex-start;} #flow .flow-step.one .step-circle {margin-top: 3.8rem;} } /* ================================================================= Q&A =================================================================*/ #qa {padding: 10rem 0; background: #F9F9F9;} #qa .sec-title {text-align: center; align-items: center; margin-bottom: 5rem;} #qa .qa-list {max-width: 80rem; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem;} #qa .qa-item {background: #fff;} #qa .accordion-toggle {width: 100%; display: flex; align-items: center; gap: 2rem; padding: 1.5rem 2.1rem; cursor: pointer; background: none; border: 0; text-align: left; background: #2250E3; color: #fff;} #qa .accordion-toggle .q-mark {color: #fff; font-size: 2.4rem; font-weight: 500; font-family: "Poppins", sans-serif; display: flex; align-items: center; justify-content: center; flex-shrink: 0;} #qa .accordion-toggle .q-text {flex: 1; font-size: 2rem; font-weight: 500; color: #fff; line-height: 1.5; font-family: "Noto Serif JP", serif;} #qa .accordion-toggle .q-icon {width: 3rem; height: 3rem; border-radius: 1rem; background: #ffffff; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; transform: rotate(180deg);} #qa .accordion-toggle.is-open .q-icon {transform: rotate(0deg);} #qa button:hover {opacity: 1;} #qa .accordion-body {display: none;} #qa .accordion-body-inner {padding: 2rem;} #qa .accordion-body p {font-size: 1.6rem; line-height: 1.5; color: #303134;} @media screen and (max-width: 999px) { #qa {padding: 6rem 0;} #qa .sec-title {margin-bottom: 4rem;} #qa .accordion-toggle {padding: 1rem 2rem; gap: 1rem;} #qa .accordion-toggle .q-text {font-size: 1.8rem;} #qa .accordion-body-inner {padding: 1.3rem 2rem;} } /* ================================================================= COMPANY PROFILE =================================================================*/ #profile {padding: 13rem 0; background: #fff;} #profile .profile-inner {display: flex; gap: 8rem; align-items: flex-start;} #profile .profile-left {width: 30rem; flex-shrink: 0;} #profile .profile-left .sec-title .en {line-height: 1.15;} #profile .profile-right {flex: 1; padding-top: 18.8rem;} #profile .profile-table {width: 100%; border-collapse: collapse;} #profile .profile-table th {width: 14rem; padding: 2rem 0rem; font-size: 1.6rem; font-weight: 500; color: #2250e3; text-align: left; vertical-align: middle; background: transparent; border-bottom: .1rem solid #2250E3;} #profile .profile-table td {padding: 2rem 2.4rem; font-size: 1.6rem; font-weight: 400; color: #303134; line-height: 1.8; background: #fff; border-bottom: .1rem solid #DBDBDB;} #profile .profile-map {color: #303134; text-decoration: underline; font-size: 1.6rem;} @media screen and (max-width: 999px) { #profile {padding: 7rem 0;} #profile .profile-inner {flex-direction: column; gap: 2rem;} #profile .profile-left {width: 100%;} #profile .profile-right {padding-top: 0rem;} #profile .profile-table th, #profile .profile-table td {display: block; width: 100%;} #profile .profile-table th {border-bottom: 0; padding: 1.1rem 0 1rem 0;} #profile .profile-table td {padding: 0 0 1.1rem 0;} } /* ================================================================= CONTACT =================================================================*/ #contact {position: relative; height: 45.9rem; overflow: hidden; display: flex; align-items: center; background: url("../img/contact/bg.jpg") no-repeat center center; background-size: cover;} #contact .contact-content {position: relative; z-index: 2; width: 100%;} #contact .contact-inner {display: flex; justify-content: space-between; align-items: center; gap: 4rem;} /* 左カラム */ #contact .contact-left .sec-title {margin-bottom: 2rem;} #contact .contact-left .sec-title .label {color: #fff;} #contact .contact-left .sec-title .en {color: #fff;} #contact .contact-desc {font-size: 1.6rem; font-weight: 400; color: #fff; line-height: 1.75; font-family: "Noto Serif JP", serif;} /* 右カラム：リンク */ #contact .contact-link {display: flex; align-items: center; justify-content: space-between; text-decoration: none; width: 45.9rem; height: 10.7rem; flex-shrink: 0; border-radius: 5px; background: linear-gradient(90deg, #2250E3 0%, #52A8FD 50%, #2250E3 100%); padding: 2rem 4rem;} #contact .contact-link:hover {opacity: 0.8;} #contact .contact-link-body {display: flex; flex-direction: column; gap: .8rem;} #contact .contact-link-title {font-size: 2.4rem; font-weight: 700; color: #fff; line-height: 1.4;} #contact .contact-link-sub {font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1.4;} #contact .contact-link-arrow {width: 3rem; height: 3rem; background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: .5rem;} #contact .contact-link-arrow::before {content:""; background-image: url("../img/common/icon-button-arrow.svg"); background-size: cover; display: block; height: .7rem; width: 1.2rem;} @media screen and (max-width: 999px) { #contact {height: auto; padding: 6rem 0;} #contact .contact-inner {flex-direction: column; align-items: flex-start; gap: 4rem;} #contact .contact-link {width: 28rem; height: 6rem; padding: 1.5rem 2rem;} #contact .contact-link-title {font-size: 1.6rem;} #contact .contact-link-sub {display: none;} }