/*
Theme Name: Yukousetsubi Thema
Theme URI: https://example.com/yukousetsubithema
Author: Yukousetsubi
Author URI: https://example.com
Description: Yukousetsubi Thema emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yukousetsubithema
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, accessibility-ready, blog, portfolio, news
*/


/* Reset and Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Noto Sans", sans-serif;
	line-height: 1.6;
	color: #333;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	text-decoration: none;
}

ul,
ol {
	list-style-type: none;
	padding-left: 0;
}

.font-bold {
	font-weight: bold;
}

/* ハンバーガーメニューここから */
.pc-nav {
	display: block;
}

.sp-nav {
	position: fixed;
	z-index: 999;
	top: 0;
	right: -120%;
	width: 100%;
	height: 100vh;
	background: #183889;
	transition: all 0.6s;
}

.sp-nav ul li:nth-of-type(5) {
	border: 1px solid #ffffff;
	padding: 0 10px 0 10px;
	border-radius: 10px;
}


.sp-nav ul li:nth-of-type(5):hover {
	border: 1px solid #ffffff;
	background: #ffffff;
	color: #183889;
	text-decoration: none;
}

nav.pc-nav ul li:nth-of-type(5) a:hover {
	color: #ffffff;
}

.sp-nav.panelactive {
	right: 0;
}

.sp-nav ul {
	position: absolute;
	z-index: 999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sp-nav li {
	list-style: none;
	text-align: center;
	margin-bottom: 30px;
}

.sp-nav li a {
	color: #ffffff;
	text-decoration: none;
	padding: 10px;
	display: block;
	font-size: 16px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: normal;
	transition: opacity 0.3s ease;
}

.sp-nav li a:hover {
	opacity: 0.8;
}

.sp-open-btn {
	position: fixed;
	z-index: 9999;
	top: 4px;
	right: 10px;
	cursor: pointer;
	width: 50px;
	height: 50px;
	display: none;
}

.sp-open-btn span {
	display: inline-block;
	transition: all 0.4s;
	position: absolute;
	left: 14px;
	height: 3px;
	border-radius: 2px;
	background-color: #0f4f90;
	width: 45%;
}

.sp-open-btn span:nth-of-type(1) {
	top: 15px;
}

.sp-open-btn span:nth-of-type(2) {
	top: 23px;
}

.sp-open-btn span:nth-of-type(3) {
	top: 31px;
}

.sp-open-btn.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
	background-color: #ffffff;
}

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

.sp-open-btn.active span:nth-of-type(3) {
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
	background-color: #ffffff;
}

body.active {
	height: 100%;
	overflow: hidden;
}


/* Header Styles */
.header {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 15px 0;
}



.header-container {
	max-width: 1440px;
	margin: 0 auto;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 16px;
}

.company-name {
	font-family: "Noto Serif", serif;
	font-size: 24px;
	font-weight: bold;
	color: #183889;
	margin-bottom: 5px;
	line-height: 1;
}

.company-tagline {
	font-size: 0.6rem;
	color: #333;
	font-weight: normal;
}

.nav {
	display: flex;
	align-items: center;
	gap: 76px;
}

.sp-nav {
	display: none;
}

.nav-list {
	display: flex;
	list-style: none;
	gap: 40px;
	margin: 0;
	padding: 0;
}

.nav-list a {
	text-decoration: none;
	color: #333;
	font-weight: 500;
	font-size: 16px;
	transition: color 0.3s ease;
	position: relative;
}

.nav-list a:hover {
	color: #183889;
}

.nav-list li:not(:nth-of-type(5)) a::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 2px;
	background: #183889;
	transition: width 0.3s ease;
}

.nav-list a:hover::after {
	width: 100%;
}

a.header-contact-btn {
	background: #183889;
	color: #ffffff;
	padding: 10px 20px;
	border-radius: 30px;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.hamburger {
	display: none;
	flex-direction: column;
	cursor: pointer;
	padding: 5px;
}



.hamburger span {
	width: 25px;
	height: 3px;
	background: #183889;
	transition: 0.3s;
}

.hamburger.active span:nth-child(1) {
	transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	transform: rotate(45deg) translate(-5px, -6px);
}

/* Hero Section */
.hero {
	position: relative;
	width: 100%;
	height: 300px;
	background: linear-gradient(135deg, #F8FBFF 0%, #CDE7FF 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 80px;
}

.hero-overlay {
	text-align: center;
	color: #183889;
}

.hero-title {
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 10px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
}

.hero-subtitle {
	font-size: 1.2rem;
	font-weight: 400;
	opacity: 0.8;
}

/* Top Page Hero Section */
.top-hero {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 0;
}

.top-hero-container {
	margin: 0 auto;
}

.top-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.top-latest-news-button {
	position: absolute;
	width: fit-content;
	bottom: 50px;
	right: 50px;
	z-index: 10;
}

.top-news-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	color: #ffffff;
	text-decoration: none;
	padding: 25px 25px;
	font-weight: 600;
	transition: all 0.3s ease;
	border: 2px solid #ffffff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.top-news-btn:hover {
	background: rgba(255, 255, 255, 0.6);
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.top-arrow {
	font-weight: bold;
	transition: transform 0.3s ease;
}

.top-news-btn:hover .top-arrow {
	transform: translateX(5px);
}

/* Sub Page Hero Section */
.sub-page-hero {
	position: relative;
	width: 100%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 80px;
	margin-bottom: 50px;
}

.sub-page-hero-overlay {
	text-align: center;
	color: #183889;
}

.sub-page-hero-title {
	font-size: 42px;
	font-weight: bold;
	margin-bottom: 10px;
	font-family: 'Noto Sans', sans-serif;
	line-height: 1;
	color: #0f4f90;
}

.sub-page-hero-subtitle {
	font-size: 14px;
	font-weight: 400;
	opacity: 0.8;
	color: #183889;
}

/* Top Page Content Section */
.top-content-section {
	padding: 80px 0;
	background: linear-gradient(135deg, #F8FBFF 0%, #CDE7FF 100%);
}

.top-content-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	position: relative;
}

.top-text-content {
	text-align: center;
	max-width: 672px;
	width: 672px;
	background: white;
	padding: 32px 50px 40px 50px;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 2;
}

.top-main-heading {
	font-size: 75px;
	font-weight: bold;
	color: #7AB2EA;
	margin-bottom: 20px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	margin-top: -72px;
	margin-left: -72px;
}

.top-sub-heading {
	font-size: 36px;
	color: #183889;
	margin-bottom: 20px;
	font-weight: bold;
	line-height: 1;
}

.top-body-text {
	margin-bottom: 40px;
}

.top-body-text p {
	font-size: 1.1rem;
	color: #495057;
	line-height: 1.8;
	margin-bottom: 20px;
}

.top-cta-button {
	margin-top: 30px;
}

.top-details-btn {
	width: 292px;
	display: inline-block;
	background: #183889;
	color: white;
	text-decoration: none;
	padding: 15px 30px;
	border-radius: 30px;
	font-size: 1.1rem;
	font-weight: 600;
	transition: all 0.3s ease;
	/* box-shadow: 0 4px 15px rgba(24, 56, 137, 0.3); */
}

.top-details-btn:hover {
	color: #183889;
	background: #ffffff;
	border: 3px solid #183889;
}

.top-image-content {
	text-align: center;
	position: relative;
	z-index: 1;
}

.top-city-image {
	display: block;
	width: 500px;
	height: 400px;
	max-width: 500px;
	object-fit: cover;
	margin-left: -70px;
}

/* Top Page Service Section */
.top-service-section {
	padding: 100px 0;
	background: #ffffff;
}

.top-service-wrapper {
	text-align: center;
}


.top-service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	max-width: 900px;
	margin: 0 auto;
}

.top-service-item {
	background: white;
	padding: 20px 30px;
	border: 2px solid #183889;
	border-radius: 15px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: pointer;
}

.top-service-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}



.top-service-icon {
	margin-bottom: 20px;
}

.top-service-icon img {
	width: 144px;
	height: 144px;
}

.top-service-title {
	position: relative;
	font-size: 27px;
	font-weight: bold;
	color: #183889;
	margin-left: -30px;
	margin-bottom: 4px;
	line-height: 1;
}

.top-service-title::after {
	position: absolute;
	right: 30px;
	top: 45%;
	transform: translateY(-50%);
	content: ">>";
}

.top-service-desc {
	font-size: 12px;
	color: #183889;
	font-weight: 500;
}

/* Top Page Access Section */
.top-access-section {
	padding: 0 0 60px 0;
	background: #ffffff;
}

.top-access-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: start;
}

.top-access-info {
	max-width: 500px;
	margin-inline: auto;
}

.top-access-heading {
	text-align: center;
	font-size: 36px;
	font-weight: bold;
	color: #183889;
	margin-bottom: 5px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	line-height: 1;
}

.top-access-subtitle {
	text-align: center;
	font-size: 14px;
	color: #183889;
	font-weight: 500;
	margin-bottom: 40px;
}

.top-office-info {
	margin-bottom: 40px;
}

.top-office-item {
	margin-bottom: 30px;
}

.top-office-details {
	padding: 0;
	border-radius: 10px;
}

.top-address-info {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.top-address-info p {
	font-size: 1rem;
	color: #495057;
	line-height: 1.6;
	margin-bottom: 15px;
}

.top-map-item {
	margin-bottom: 30px;
}

.top-map-frame {
	width: 310px;
	height: 250px;
	overflow: hidden;
}

.top-map-frame iframe {
	width: 100%;
	height: 250px;
	border: none;
}

/* 地図を横並びにするための新しいスタイル */
.top-maps-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.top-map-item {
	margin-bottom: 0;
}

/* About Section */
.about-section {
	background: #ffffff;
	padding-bottom: 70px;
}

.about-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	justify-items: center;
	align-items: start;
}

.about-headline {
	font-size: 52px;
	color: #333;
	font-weight: bold;
	margin-bottom: 40px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.4;
	text-align: center;
}

.about-description {
	margin-bottom: 40px;
}

.about-description p {
	font-size: 1.1rem;
	color: #495057;
	line-height: 1.8;
	margin-bottom: 20px;
}

.president-info {
	padding-top: 20px;
}

.president-info p {
	font-size: 1rem;
	color: #333;
}

.about-image img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* About Page Specific Styles */
.about-about-section {
	background: #ffffff;
	padding: 100px 0;
}

.about-about-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}

.about-about-headline {
	font-size: 2.2rem;
	color: #333;
	font-weight: bold;
	margin-bottom: 40px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.4;
	text-align: center;
}

.about-about-description {
	margin-bottom: 40px;
}

.about-about-description p {
	font-size: 1.1rem;
	color: #495057;
	line-height: 1.8;
	margin-bottom: 20px;
}

.about-about-image img {
	width: 300px;
	height: 330px;
	object-fit: cover;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Company Info Section */
.company-info-section {
	background: linear-gradient(135deg, #F8FBFF 0%, #CDE7FF 100%);
	padding: 100px 0;
}

.company-info-content {
	max-width: 51.38vw;
	margin: 0 auto;
	background-color: #ffffff;
	padding: 74px 9.02vw 74px 9.02vw;
}

.info-item {
	border-bottom: 1px solid #e9ecef;
	padding: 30px 0;
}

.info-item:last-child {
	border-bottom: none;
}

.info-title {
	font-size: 14px;
	color: #183889;
	font-weight: bold;
	margin-bottom: 15px;
}

.info-content {
	font-size: 14px;
	color: #495057;
	line-height: 1.6;
}

.info-content p {
	margin-bottom: 15px;
}

.info-content strong {
	color: #183889;
	font-weight: bold;
}

.info-content ol {
	padding-left: 20px;
}

.info-content ol li {
	margin-bottom: 8px;
}

.info-content ul {
	padding-left: 20px;
}

.info-content ul li {
	margin-bottom: 8px;
}

.contact-cta {
	text-align: center;
	margin-top: 60px;
}

.contact-btn-large {
	display: inline-block;
	background: #183889;
	color: white;
	text-decoration: none;
	padding: 20px 40px;
	border-radius: 8px;
	font-size: 1.2rem;
	font-weight: 600;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(24, 56, 137, 0.3);
}

.contact-btn-large:hover {
	color: #183889;
	background: #ffffff;
	border: 3px solid #183889;
}

/* About Page Company Info Section */
.about-company-info-section {
	background: linear-gradient(135deg, #F8FBFF 0%, #CDE7FF 100%);
	padding: 100px 0;
}

.about-company-info-content {
	max-width: 740px;
	margin: 0 auto;
	background-color: #ffffff;
	padding: 50px 6vw 50px 6vw;
}

.about-info-item {
	border-bottom: 1px solid #e9ecef;
	padding: 20px 0;
}

.about-info-item:last-child {
	border-bottom: none;
}

.about-info-title {
	font-size: 14px;
	color: #183889;
	font-weight: bold;
	margin-bottom: 15px;
}

.about-info-content {
	font-size: 14px;
	color: #495057;
	line-height: 1.6;
}

.products-intro-subheading {
	font-size: 36px;
}

.about-info-content p:nth-of-type(1) {
	margin-bottom: 1rem;
}


.about-info-content strong {
	color: #183889;
	font-weight: bold;
}

.about-info-content ol li {
	margin-bottom: 8px;
}


.about-info-content ul li {
	margin-bottom: 8px;
}

.about-contact-cta {
	text-align: center;
	margin-top: 60px;
}

.about-contact-btn-large {
	width: 300px;
	display: inline-block;
	background: #183889;
	color: white;
	text-decoration: none;
	padding: 20px 40px;
	border-radius: 40px;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.about-contact-btn-large:hover {
	color: #183889;
	background: #ffffff;
	border: 3px solid #183889;
}

/* Footer */
.footer {
	position: fixed;
	width: 100%;
	bottom: 0;
	color: #ffffff;
	background: #183889;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	font-size: 12px;
}


/* Container */
.container {
	max-width: 1080px;
	margin: 0 auto;
}

/* Products Page Specific Styles */

.products-intro-section {
	background: #ffffff;
	margin-bottom: 100px;
}

.products-intro-content {
	text-align: center;
	max-width: 1440px;
	margin: 0 auto;
}



.products-intro-subheading {
	font-size: 36px;
	color: #333333;
	margin-bottom: 20px;
	font-weight: bold;
	font-family: 'Noto Sans', sans-serif;
}

.products-intro-description {
	font-size: 22px;
	color: #333333;
	line-height: 1.6;
	margin-bottom: 0;
	font-family: 'Noto Sans', sans-serif;
}

/* Products Details Section */
.products-details-section {
	background: #ffffff;
}

.products-details-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	max-width: 1083px;
	margin: 0 auto;
	align-items: stretch;
}

.products-detail-item {
	background: white;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	position: relative;
	border: none;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.products-detail-image {
	text-align: center;
	margin-bottom: 0;
}

.products-detail-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
}

.products-detail-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 20px 0;
}



.products-detail-title {
	font-size: 24px;
	font-weight: bold;
	color: #0f4f90;
	margin: 0;
	font-family: 'Noto Sans', sans-serif;
}

.products-detail-price {
	display: none;
}

.products-detail-description {
	font-size: 16px;
	color: #333333;
	line-height: 1.75;
	margin-bottom: 20px;
}

.products-detail-note {
	display: none;
}

.products-detail-cta {
	margin-top: auto;
	margin-bottom: 0;
}

.products-detail-btn {
	width: 200px;
	margin-inline: auto;
	display: block;
	background: transparent;
	color: #0f4f90;
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: bold;
	transition: all 0.3s ease;
	border: 1px solid #0f4f90;
	text-align: center;
}

.products-detail-btn:hover {
	color: #ffffff;
	background: #0f4f90;
	border: 1px solid #0f4f90;
}

/* Products Contact Section */
.products-contact-section {
	padding: 100px 0;
}

.products-contact-wrapper {
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
}

.products-contact-heading {
	font-size: 2.5rem;
	font-weight: bold;
	color: #183889;
	margin-bottom: 20px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
}

.products-contact-description {
	font-size: 1.1rem;
	color: #495057;
	line-height: 1.8;
	margin-bottom: 40px;
}

.products-contact-cta {
	margin-top: 40px;
}


/* Recruitment Page Styles */
.recruitment-nav {
	padding: 16px 0;
	background: #ffffff;
	border-top: 2px solid #0f4f90;
	border-bottom: 2px solid #0f4f90;
}

.recruitment-nav-wrapper {
	display: flex;
	justify-content: center;
	gap: 0;
	max-width: 1080px;
	margin: 0 auto;
	position: relative;
}

.recruitment-nav-btn {
	background: none;
	border: none;
	color: #0f4f90;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	padding: 15px 40px;
	transition: all 0.3s ease;
	position: relative;
	border-right: 2px solid #0f4f90;
}

.recruitment-nav-btn:last-child {
	border-right: none;
}

.recruitment-nav-btn.active,
.recruitment-nav-btn:hover {
	color: #0f4f90;
}

.recruitment-nav-btn::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 2px;
	transition: width 0.3s ease;
}

.recruitment-nav-btn.active::after,
.recruitment-nav-btn:hover::after {
	width: 100%;
}

.recruitment-main {
	padding: 60px 0;
}

.recruitment-hero {
	text-align: center;
	max-width: 1080px;
	margin: 0 auto 80px;
}

.recruitment-hero-title {
	font-size: 47px;
	font-weight: bold;
	color: #0f4f90;
	margin-bottom: 30px;
	font-family: 'Noto Sans', sans-serif;
	line-height: 1.4;
}

.recruitment-hero-description {
	font-size: 22px;
	color: #333333;
	line-height: 1.6;
	margin-bottom: 40px;
	font-family: 'Noto Sans', sans-serif;
	text-align: left;
	max-width: 818px;
	margin-left: auto;
	margin-right: auto;
}

.recruitment-hero-image {
	max-width: 586px;
}

.recruitment-hero-content {
	display: flex;
	align-items: center;
	gap: 40px;
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 100px;
}

.recruitment-hero-features {
	text-align: left;
	max-width: 510px;
	flex: 1;
}

.recruitment-hero-features p {
	font-size: 22px;
	color: #333333;
	line-height: 1.6;
	margin-bottom: 10px;
	font-family: 'Noto Sans', sans-serif;
}


.recruitment-hero-features p:nth-of-type(4) {
	margin-bottom: 3rem;
}


.recruitment-section-title {
	font-size: 42px;
	font-weight: bold;
	color: #0f4f90;
	text-align: center;
	margin-bottom: 60px;
	font-family: 'Noto Sans', sans-serif;
}

.work-style-grid {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 1080px;
	margin: 0 auto 100px;
}

.work-style-item {
	display: grid;
	grid-template-columns: 1fr 160px;
	align-items: center;
	gap: 30px;
	padding: 20px 40px 20px 40px;
	border-radius: 10px;
	background: #f8f9fa;
}

.work-style-item:nth-child(even) {
	background: #e3f2fd;
}

.work-style-item:nth-child(3n) {
	background: #f5f5f5;
}

.work-style-content {
	flex: 1;
}

.work-style-title {
	font-size: 30px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 20px;
	font-family: 'Noto Sans', sans-serif;
	line-height: 1.3;
	text-align: left;
}

.work-style-text {
	font-size: 22px;
	color: #333333;
	line-height: 1.5;
	font-family: 'Noto Sans', sans-serif;
	text-align: left;
}

.work-style-image {
	width: 160px;
}

.work-style-item:nth-of-type(3),
.work-style-item:nth-of-type(6) {
	grid-template-columns: 1fr 225px;
}

.work-style-item:nth-of-type(3) .work-style-image,
.work-style-item:nth-of-type(6) .work-style-image {
	width: 225px;
}

.recruitment-interview {
	max-width: 1080px;
	margin: 0 auto 80px;
}

.interview-item {
	display: flex;
	gap: 40px;
	margin-bottom: 60px;
	align-items: flex-start;
}

.interview-item:first-child {
	border-bottom: 1px solid #e9ecef;
	padding-bottom: 60px;
}

.interview-content {
	flex: 1;
}







.interview-content-text {
	display: grid;
	grid-template-columns: 1fr 250px;
	gap: 60px;
}

.interview-item:nth-of-type(odd) .interview-content-text {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 60px;
	margin-bottom: 2rem;
}

.interview-item:nth-of-type(even) .interview-content {
	padding-bottom: 50px;
	border-bottom: 1px solid #00468C;
}






.interview-title {
	font-size: 42px;
	font-weight: normal;
	text-align: left;
	color: #000000;
	margin-bottom: 30px;
	font-family: 'Noto Sans', sans-serif;
	line-height: 1.3;
}

.interview-text {
	font-size: 22px;
	text-align: left;
	color: #000000;
	line-height: 1.6;
	margin-bottom: 20px;
	font-family: 'Noto Sans', sans-serif;
}

.interview-quote {
	font-size: 22px;
	text-align: left;
	color: #000000;
	line-height: 1.6;
	margin-bottom: 20px;
	font-family: 'Noto Sans', sans-serif;
}

.interview-image {
	flex-shrink: 0;
	width: 250px;
	height: 300px;
	border: 1px solid #333333;
	display: flex;
	align-items: center;
	justify-content: center;
}

.interview-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
}

.recruitment-job-details {
	max-width: 1080px;
	margin: 0 auto 80px;
}

.job-details-subtitle {
	font-size: 25px;
	font-weight: normal;
	color: #000000;
	text-align: center;
	margin-bottom: 60px;
	font-family: 'Noto Sans', sans-serif;
	line-height: 1.4;
}

.job-details-table {
	font-weight: normal;
	border: 1px solid #333333;
}

.job-detail-row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #333333;
}

.job-detail-row:last-child {
	border-bottom: none;
}

.job-detail-label {
	width: 220px;
	background: #ffffff;
	padding: 20px;
	font-size: 24px;
	font-weight: 500;
	color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Noto Sans', sans-serif;

}

.job-detail-content {
	flex: 1;
	padding: 30px;
	font-size: 16px;
	color: #000000;
	line-height: 1.6;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 400;
	text-align: left;
	border-left: 1px solid #333333;
	height: 100%;
	margin-top: -1px;
	margin-bottom: -1px;
}

.benefit-link a {
	color: #0000EE;
	text-decoration: underline;
}

.recruitment-work-style-title {
	text-align: center;
	margin-bottom: 60px;
}

.recruitment-contact {
	text-align: center;
	margin-top: 60px;
}

/* Takumi Page Styles */
.takumi-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 600px;
	overflow: hidden;
	background-image: url('/wp-content/themes/yukousetsubithema/assets/images/lp-hero-bk.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.takumi-hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.takumi-hero-city-bg {
	position: absolute;
	top: -454px;
	left: 78px;
	width: 1787.38px;
	height: 1188.08px;
	background-image: url('../images/lp-hero-bk.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	mask-size: 1582px 607px;
	mask-position: -78px 454px;
	mask-repeat: no-repeat;

}

.takumi-hero-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* height: 100%; */
	text-align: center;
	color: #ffffff;
	padding: 0 20px;
	/* margin-top: 63.75px; */
}

.takumi-hero-house {
	position: absolute;
	top: 63.75px;
	left: 242px;
	width: 1103px;
	height: 486.747px;
}

.takumi-hero-house img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.takumi-hero-text {
	position: absolute;
	top: 193.26px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.takumi-hero-title {
	font-size: 25.158px;
	font-weight: bold;
	font-family: 'Noto Sans', sans-serif;
	line-height: 48.918px;
	margin-bottom: 20px;
	width: 515.038px;
	margin-left: calc(50% - 254.749px);
}

.takumi-hero-subtitle {
	font-size: 67.787px;
	font-weight: 900;
	font-family: 'Noto Sans', sans-serif;
	line-height: 48.918px;
	margin-bottom: 10px;
	width: 482px;
	margin-left: calc(50% - 239px);
}

.takumi-hero-description {
	font-size: 27.32px;
	font-weight: bold;
	font-family: 'Noto Sans', sans-serif;
	line-height: 48.918px;
	width: 577px;
	margin-left: calc(50% - 286px);
}

.takumi-hero-character {
	position: absolute;
	top: 193.26px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 357.066px;
	font-weight: 900;
	opacity: 0.3;
	font-family: 'Noto Sans', sans-serif;
	color: #ffffff;
	z-index: 1;
	line-height: 257.676px;
	width: 459.421px;
	margin-left: calc(50% - 193.961px);
}

.takumi-main {
	padding: 80px 0;
	background: #ffffff;
}

.takumi-title-section {
	text-align: center;
	margin-bottom: 60px;
}

.takumi-main-title {
	font-size: 47px;
	font-weight: bold;
	color: #0f4f90;
	margin-bottom: 40px;
	font-family: 'Noto Sans', sans-serif;
	line-height: 1.4;
}

.takumi-main-description {
	font-size: 18px;
	color: #333333;
	line-height: 1.6;
	font-family: 'Noto Sans', sans-serif;
	max-width: 824px;
	margin: 0 auto;
	text-align: left;
}

.takumi-process {
	max-width: 1080px;
	margin: 0 auto;
}

.takumi-flow-container {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100px;
	padding-top: 10px;
	color: #FFF;
	text-align: center;
	font-family: "Noto Sans";
	font-size: 40px;
	font-style: normal;
	font-weight: 700;
	line-height: 35.2px;
	background: var(--Linear, linear-gradient(180deg, #6DE2FF 0%, #0076EC 86.06%));
	margin: 40px 0 40px 0;
}

.takumi-flow-container h2 {
	font-size: 40px;
	margin-bottom: 6px;
}

.takumi-flow-description {
	font-size: 18px;
	font-weight: normal;
	color: #ffffff;
	line-height: 1.6;
	font-family: 'Noto Sans', sans-serif;
	max-width: 824px;
	margin: 0 auto;
	text-align: left;
}

.takumi-flow-arrow {
	display: block;
	margin: 0 auto;
	width: 167px;
	height: 45px;
	margin: 20px auto 20px auto;
}

.takumi-step {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-bottom: 60px;
	position: relative;
}

.takumi-step-number {
	font-size: 47px;
	font-weight: bold;
	color: #0f4f90;
	font-family: 'Noto Sans', sans-serif;
	flex-shrink: 0;
	width: 80px;
	text-align: center;
	margin-right: 10px;
}

.takumi-step-content {
	flex: 1;
}

.takumi-step-title {
	font-size: 32px;
	font-weight: bold;
	color: #0f4f90;
	font-family: 'Noto Sans', sans-serif;
}

.takumi-step-description {
	font-size: 22px;
	color: #333333;
	line-height: 1.6;
	font-family: 'Noto Sans', sans-serif;
}

.takumi-step-note {
	font-size: 16px;
	color: #333333;
}

.takumi-step-image {
	width: 150px;
	height: 150px;
	flex-shrink: 0;
}

.takumi-step-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.takumi-completion {
	max-width: 1080px;
	margin: 80px auto 0;
	padding: 40px;
	background: #f8f9fa;
	border-radius: 15px;
}

.takumi-completion-title {
	font-size: 32px;
	font-weight: bold;
	color: #0f4f90;
	margin-bottom: 30px;
	font-family: 'Noto Sans', sans-serif;
}

.takumi-completion-description {
	font-size: 22px;
	color: #333333;
	line-height: 1.6;
	margin-bottom: 30px;
	font-family: 'Noto Sans', sans-serif;
}

.takumi-completion-important {
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	border-radius: 10px;
	padding: 30px;
}

.takumi-completion-important h4 {
	font-size: 24px;
	font-weight: bold;
	color: #856404;
	margin-bottom: 15px;
	font-family: 'Noto Sans', sans-serif;
}

.takumi-completion-important p {
	font-size: 18px;
	color: #856404;
	line-height: 1.6;
	margin-bottom: 10px;
	font-family: 'Noto Sans', sans-serif;
}

.takumi-results {
	position: relative;
	padding: 80px 0;
	background: #ffffff;
	background-image: linear-gradient(to bottom,
			rgba(109, 226, 255, 0.8),
			rgba(0, 118, 236, 0.5)),
		url('/wp-content/themes/yukousetsubithema/assets/images/lp-03-bk.webp');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

.takumi-results-background {
	position: relative;
	width: 100%;
	height: 100%;
	margin-bottom: 100px;
}

.takumi-contact-container {
	display: flex;
	justify-content: center;
	margin-bottom: 100px;
}

/* .takumi-results-background::before {
content: '';
position: absolute;
top: -26px;
left: -849px;
width: 3208px;
height: 2132px;
background-image: url('../3e3de8580b9cee8cd0290759419c80662ffa65b9.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
mask-image: url('../2233e59230b6883a63c96a068ac8336ea1d7ca72.svg');
mask-size: 1639px 2140px;
mask-position: 849px 26px;
mask-repeat: no-repeat;
-webkit-mask-image: url('../2233e59230b6883a63c96a068ac8336ea1d7ca72.svg');
-webkit-mask-size: 1639px 2140px;
-webkit-mask-position: 849px 26px;
-webkit-mask-repeat: no-repeat;
} */

/* .takumi-results-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1639px;
height: 2140px;
background-image: url('../65710012a86ba50e49878ae1d2676e9bc15f9ff4.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.7;
} */

.takumi-results .container {
	position: relative;
	z-index: 3;
	max-width: 1080px;
	margin: 0 auto;
	padding: 60px 50px;
	background: rgba(255, 255, 255, 0.72);
	border-radius: 30px;
}

.takumi-results-title {
	font-size: 47px;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	margin-bottom: 50px;
	font-family: 'Noto Sans', sans-serif;
	line-height: 1;
	position: relative;
	z-index: 4;
}


.takumi-example-title {
	font-size: 32px;
	font-weight: bold;
	color: #0f4f90;
	margin-bottom: 30px;
	font-family: 'Noto Sans', sans-serif;
	line-height: 1;
}

.takumi-example-images {
	display: flex;
	gap: 40px;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 60px;
}

.takumi-example-arrow {
	margin-left: 10px;
	rotate: 90deg;
}

.takumi-example-before,
.takumi-example-after {
	flex: 1;
	max-width: 438px;
	text-align: center;
}

.takumi-example-label {
	font-size: 24px;
	font-weight: 500;
	color: #0f4f90;
	margin-bottom: 15px;
	font-family: 'Noto Sans', sans-serif;
	line-height: 1;
	text-align: left;
}

.takumi-example-before img,
.takumi-example-after img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.takumi-example-placeholder {
	width: 100%;
	height: 315px;
	background: #d9d9d9;
	border-radius: 8px;
}

.takumi-contact {
	padding: 80px 0;
	background: #ffffff;
	text-align: center;
}

.takumi-contact-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ffffff;
	color: #0f4f90;
	text-decoration: none;
	padding: 20px 40px;
	border-radius: 30px;
	font-size: 15px;
	font-weight: bold;
	font-family: 'Noto Sans', sans-serif;
	border: 2px solid #0f4f90;
	transition: all 0.3s ease;
	width: 369px;
	height: 55px;
}

.takumi-contact-btn:hover {
	background: #0f4f90;
	color: #ffffff;
}

/* Takumi Application Heading Styles */
.takumi-application-heading {
	position: relative;
	width: 100%;
	height: 103px;
	margin: 80px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.takumi-application-bg {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1080px;
	height: 103px;
	background-image: url('../989f6ebfac18b18fd754335ea7c2292e29364cd7.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.takumi-application-text {
	position: relative;
	z-index: 2;
	text-align: center;
	color: #ffffff;
}

.takumi-application-title {
	font-size: 40px;
	font-weight: bold;
	font-family: 'Noto Sans', sans-serif;
	line-height: 35.2px;
	margin: 0;
	margin-bottom: 5px;
}

.takumi-application-subtitle {
	font-size: 18px;
	font-weight: 500;
	font-family: 'Noto Sans', sans-serif;
	line-height: 30px;
	margin: 0;
}

/* Takumi Blue Box Heading Styles */
.takumi-blue-heading {
	position: relative;
	width: 100%;
	height: 120px;
	margin: 60px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.takumi-blue-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #87CEEB 0%, #1E90FF 100%);
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(30, 144, 255, 0.3);
}

.takumi-blue-text {
	position: relative;
	z-index: 2;
	text-align: center;
	color: #ffffff;
}

.takumi-blue-title {
	font-size: 42px;
	font-weight: bold;
	font-family: 'Noto Sans', sans-serif;
	line-height: 1.2;
	margin: 0;
	margin-bottom: 8px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.takumi-blue-subtitle {
	font-size: 20px;
	font-weight: 500;
	font-family: 'Noto Sans', sans-serif;
	line-height: 1.2;
	margin: 0;
	opacity: 0.95;
}

.recruitment-mv {
	position: relative;
	width: 100%;
	height: 500px;
	background: linear-gradient(135deg, #F8FBFF 0%, #CDE7FF 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 80px;
	text-align: center;
}

.recruitment-mv__inner {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px;
}

.recruitment-mv__title {
	font-size: 2.5rem;
	font-weight: bold;
	color: #183889;
	line-height: 1.6;
}

.recruitment-styles {
	padding: 100px 0;
	background: #ffffff;
}

.recruitment-styles__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}

.recruitment-styles__title {
	font-size: 2rem;
	font-weight: bold;
	color: #183889;
	text-align: center;
	margin-bottom: 60px;
}

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

.recruitment-styles__item {
	background: white;
	border-radius: 15px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	padding: 40px;
	display: flex;
	gap: 30px;
	align-items: flex-start;
}

.recruitment-styles__item-img {
	width: 100px;
	flex-shrink: 0;
}

.recruitment-styles__item-content {
	flex: 1;
}

.recruitment-styles__item-title {
	font-size: 1.3rem;
	font-weight: bold;
	color: #183889;
	margin-bottom: 15px;
}

.recruitment-styles__item-text {
	font-size: 1rem;
	color: #495057;
	line-height: 1.8;
}

.recruitment-interview__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}

.recruitment-interview__title {
	font-size: 2rem;
	font-weight: bold;
	color: #183889;
	text-align: center;
	margin-bottom: 60px;
}

.recruitment-interview__list {
	display: grid;
	gap: 40px;
}

.recruitment-interview__item {
	background: white;
	border-radius: 15px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	padding: 40px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
}

.recruitment-interview__item-info {
	max-width: 600px;
}

.recruitment-interview__item-title {
	font-size: 1.8rem;
	font-weight: bold;
	color: #183889;
	margin-bottom: 20px;
	line-height: 1.4;
}

.recruitment-interview__item-name {
	font-size: 1.2rem;
	color: #495057;
	margin-bottom: 30px;
}

.recruitment-interview__item-text {
	font-size: 1rem;
	color: #495057;
	line-height: 1.8;
}

.recruitment-interview__item-img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.recruitment-interview__item-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recruitment-requirements {
	padding: 100px 0;
	background: #ffffff;
}

.recruitment-requirements__inner {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px;
}

.recruitment-requirements__title {
	font-size: 2rem;
	font-weight: bold;
	color: #183889;
	text-align: center;
	margin-bottom: 60px;
}

.recruitment-requirements__table {
	width: 100%;
	border-collapse: collapse;
}

.recruitment-requirements__table th,
.recruitment-requirements__table td {
	padding: 20px;
	border-bottom: 1px solid #e9ecef;
}

.recruitment-requirements__table th {
	width: 30%;
	text-align: left;
	color: #183889;
	font-weight: bold;
	vertical-align: top;
}

.recruitment-requirements__table td {
	width: 70%;
	color: #495057;
}

/* Responsive Design */
@media (max-width: 1024px) {

	.header-content {
		padding: 0 15px;
		justify-content: space-between;
		align-items: center;
	}

	.logo {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		flex: 1;
	}

	.company-name {
		font-size: 18px;
		color: #0f4f90;
		font-weight: bold;
		line-height: 1.2;
	}

	.company-tagline {
		font-size: 8px;
		color: #666666;
		line-height: 1.2;
	}

	.container {
		padding: 0 4vw;
	}

	.nav-list {
		gap: 30px;
	}

	.nav-list a {
		font-size: 15px;
	}

	/* Hero Sections */
	.hero {
		height: 200px;
		margin-top: 60px;
	}

	.hero-title {
		font-size: 2rem;
	}

	.hero-subtitle {
		font-size: 1rem;
	}

	.top-hero {
		height: 50vh;
		margin-top: 0;
	}

	.top-latest-news-button {
		bottom: 30px;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.top-news-btn {
		width: 180px;
		padding: 16px 22px;
		font-size: 0.8rem;
	}

	/* Top Page Content */
	.top-content-section {
		background-image: url(../images/top-01-01-sp.webp);
		background-position: center;
		padding: 60px 0;
	}

	.top-main-heading {
		font-size: 11vw;
		text-align: center;
		margin: 0;
		line-height: 0;
		margin-top: -10px;
		margin-bottom: 30px;
	}

	.top-sub-heading {
		font-size: 18px;
	}

	.top-cta-button {
		margin-top: 0;
	}

	.top-body-text {
		margin-bottom: 20px;
	}

	.top-body-text p {
		font-size: 10px;
		margin-bottom: 0;
	}

	.top-text-content {
		width: 100%;
		padding: 10px 10px 30px 10px;
	}

	.top-details-btn {
		width: 214px;
		padding: 12px 25px;
		font-size: 12px;
	}

	.top-image-content {
		display: none;
	}

	/* Top Service Section */
	.top-service-section {
		padding: 60px 0;
	}

	.top-service-icon {
		margin-bottom: 0;
	}

	.top-service-item {
		width: 280px;
		padding: 10px 20px;
	}

	.top-service-title {
		font-size: 1.1rem;
	}

	.top-service-title::after {
		right: 72px;
	}

	.top-service-desc {
		font-size: 0.8rem;
	}

	/* Top Access Section */
	.top-access-section {
		padding: 0 0 60px 0;
	}

	.top-access-heading {
		font-size: 36px;
	}

	.top-access-subtitle {
		font-size: 1rem;
		margin-bottom: 10px;
	}

	.top-office-details {
		padding: 15px;
	}

	.top-address-info p {
		font-size: 14px;
	}

	.top-map-frame {
		width: 100%;
	}

	.top-office-info {
		margin-bottom: 0;
	}

	.top-office-item {
		margin-bottom: 0;
	}

	.top-access-wrapper {
		gap: 0;
	}


	.about-content {
		gap: 60px;
	}

	.about-headline {
		text-align: center;
		font-size: 2rem;
	}

	.company-info-content {
		max-width: 700px;
	}

	.about-about-content {
		gap: 60px;
	}

	.about-about-headline {
		text-align: center;
		font-size: 2rem;
	}

	.about-company-info-content {
		max-width: 700px;
	}

	.top-content-wrapper {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		align-items: center;
		position: relative;
	}

	.top-main-heading {
		font-size: 2.5rem;
	}

	.top-service-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		justify-items: center;
	}

	.top-access-wrapper {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.top-access-heading {
		font-size: 1.8rem;
	}

	.top-maps-container {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.recruitment-styles__list {
		gap: 30px;
	}

	.recruitment-interview__item {
		padding: 30px;
		gap: 30px;
	}
}

@media (max-width: 768px) {

	/* Header Styles */
	.header {
		position: relative;
		padding: 10px 0;
	}

	.hamburger {
		display: flex;
		z-index: 1000;
	}



	.pc-nav {
		display: none;
	}

	/* .sp-nav {
		display: block;
	} */

	.sp-open-btn {
		display: block;
	}

	.nav {
		display: none;
		position: fixed;
		top: 0;
		right: -100%;
		width: 80%;
		height: 100vh;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
		padding: 80px 40px 40px;
		transition: right 0.3s ease;
		z-index: 999;
	}

	.nav.active {
		display: block;
		right: 0;
	}

	.nav-list {
		flex-direction: column;
		gap: 0;
		padding: 0;
	}

	.nav-list li {
		border-bottom: 1px solid #e9ecef;
	}

	.nav-list li:last-child {
		border-bottom: none;
	}

	.nav-list a {
		display: block;
		padding: 20px 0;
		font-size: 18px;
		font-weight: 600;
		color: #183889;
	}

	.nav-list a::after {
		display: none;
	}


	/* About Section */

	.sub-page-hero {
		height: auto;
		margin-top: 40px;
		margin-bottom: 30px;
	}

	.sub-page-hero-title {
		font-size: 2rem;
	}

	.sub-page-hero-subtitle {
		font-size: 1rem;
	}


	.about-section {
		padding: 0;
	}

	.about-headline {
		font-size: 1.6rem;
	}

	.about-content {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		text-align: left;
		padding: 0;
	}

	.about-description {
		margin-bottom: 0;
	}

	.about-description p {
		font-size: 0.95rem;
	}

	.about-image img {
		height: 300px;
	}

	.about-company-info-content {
		max-width: 100%;
		padding: 40px 6vw 40px 6vw;
	}

	.about-about-section {
		padding: 60px 0;
	}

	.about-about-headline {
		font-size: 1.6rem;
	}

	.about-about-description p {
		font-size: 0.95rem;
	}

	.about-about-image img {
		height: 300px;
	}

	.about-company-info-section {
		padding: 60px 0;
	}

	.about-info-item {
		padding: 20px 0;
	}

	.about-info-title {
		font-size: 1rem;
	}

	.about-info-content {
		font-size: 0.9rem;
	}

	.about-contact-btn-large {
		padding: 16px 30px;
		font-size: 1rem;
	}

	/* Company Info Section */
	.company-info-section {
		padding: 60px 0;
	}

	.info-item {
		padding: 20px 0;
	}

	.info-title {
		font-size: 1rem;
	}

	.info-content {
		font-size: 0.9rem;
	}

	.contact-btn-large {
		padding: 16px 30px;
		font-size: 1rem;
	}



	/* Products Page */
	.products-intro-section {
		margin-bottom: 0;
		padding: 0;
	}

	.products-intro-heading,
	.products-intro-subheading {
		font-size: 18px;
	}

	.products-intro-description {
		font-size: 18px;
	}

	.products-details-section {
		padding: 0;
	}

	.products-details-wrapper {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.products-detail-item {
		padding: 30px;
	}

	.products-detail-content {
		padding: 6px;
	}

	.products-detail-title {
		font-size: 1.6rem;
		margin-bottom: 10px;
		text-align: center;
	}

	.products-detail-price {
		font-size: 1.2rem;
		padding: 6px 12px;
	}

	.products-detail-description {
		font-size: 0.95rem;
	}

	.products-contact-heading {
		font-size: 1.8rem;
	}

	.products-contact-section {
		padding: 0 0 60px 0;
	}

	/* Recruitment Page */
	.recruitment-nav-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		font-size: 10px;
	}

	.recruitment-nav {
		padding: 0;
	}

	.recruitment-nav .container {
		padding: 0;
	}

	.recruitment-nav-btn {
		font-size: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 10px;
		border-right: none;
		border-bottom: none;
	}

	.recruitment-nav-btn:nth-of-type(1) {
		border-right: 2px solid #0f4f90;
		border-bottom: 2px solid #0f4f90;
	}

	.recruitment-nav-btn:nth-of-type(2) {
		border-bottom: 2px solid #0f4f90;
	}

	.recruitment-nav-btn:nth-of-type(3) {
		border-right: 2px solid #0f4f90;
	}

	.recruitment-hero-title {
		font-size: 22px;
	}

	.recruitment-hero-content {
		flex-direction: column-reverse;
	}

	.recruitment-hero-description {
		font-size: 18px;
	}

	.recruitment-hero-features {
		font-size: 18px;
	}

	.recruitment-hero-features p {
		font-size: 18px;
	}

	.recruitment-hero-content {
		margin-bottom: 60px;
	}

	.work-style-item {
		grid-template-columns: 1fr;
		justify-items: center;
		padding: 20px;
	}

	.work-style-text {
		font-size: 14px;
	}

	.work-style-title {
		font-size: 24px;
	}

	.work-style-item:nth-of-type(3),
	.work-style-item:nth-of-type(6) {
		grid-template-columns: 1fr;
	}

	.recruitment-mv {
		height: 300px;
		margin-top: 60px;
	}

	.recruitment-mv__title {
		font-size: 1.6rem;
	}

	.recruitment-styles__title,
	.recruitment-interview__title,
	.recruitment-requirements__title {
		font-size: 1.6rem;
		margin-bottom: 40px;
	}

	.recruitment-styles__item {
		padding: 20px;
		flex-direction: column;
		text-align: center;
	}

	.recruitment-styles__item-img {
		margin: 0 auto 20px;
	}

	.recruitment-styles__item-title {
		font-size: 1.2rem;
	}

	.recruitment-interview__item {
		padding: 20px;
	}

	.recruitment-interview__item-title {
		font-size: 1.4rem;
	}

	.recruitment-interview__item-name {
		font-size: 1.1rem;
	}

	.recruitment-interview__item-img {
		width: 150px;
		height: 150px;
	}

	.interview-content-text {
		grid-template-columns: 1fr;
		margin-bottom: 60px;
	}

	.interview-content-text-item {
		font-size: 20px;
		gap: 0;
	}

	.interview-image {
		width: 150px;
		height: 200px;
		margin-inline: auto;
	}

	.interview-item:nth-of-type(even) .interview-content {
		padding-bottom: 20px;
	}

	.interview-item {
		margin-bottom: 40px;
	}

	.interview-item:nth-of-type(odd) .interview-content-text {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.job-detail-label {
		font-size: 16px;
		width: 120px;
	}

	.job-detail-content {
		font-size: 16px;
	}



	/* Takumi Page */
	.takumi-main-title {
		font-size: 32px;
		margin-bottom: 30px;
	}

	.takumi-main-description {
		font-size: 16px;
	}

	.takumi-main {
		padding: 30px 0;
	}

	.takumi-flow-container {
		height: 65px;
		margin: 30px 0 30px 0;
		padding: 10px 10px 10px 10px;
	}

	.takumi-flow-container h2 {
		font-size: 24px;
		margin-bottom: 0px;
	}

	.takumi-flow-description {
		font-size: 14px;
	}

	.takumi-step {
		flex-direction: column;
		margin-bottom: 0;
		gap: 20px;
	}

	.takumi-results {
		padding: 40px 0;
	}

	.takumi-step-title {
		text-align: center;
		margin-bottom: 20px;
	}

	.takumi-step-number {
		font-size: 40px;
	}

	.takumi-step-description {
		font-size: 16px;
	}

	/* Takumi Hero */
	.takumi-hero {
		height: 300px;
		margin-top: 0;
	}

	.takumi-hero-city-bg {
		top: -200px;
		left: 20px;
		width: 100%;
		height: 600px;
		mask-size: 100% auto;
		mask-position: center;
		-webkit-mask-size: 100% auto;
		-webkit-mask-position: center;
	}

	.takumi-hero-content {
		margin-top: 20px;
		padding: 0 20px;
	}

	.takumi-hero-house {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: 200px;
		margin-bottom: 20px;
	}

	.takumi-hero-text {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		margin-top: 20px;
	}

	.takumi-hero-title {
		font-size: 18px;
		line-height: 1.4;
		width: 100%;
		margin-left: 0;
		margin-bottom: 15px;
	}

	.takumi-hero-subtitle {
		font-size: 32px;
		line-height: 1.2;
		width: 100%;
		margin-left: 0;
		margin-bottom: 10px;
	}

	.takumi-hero-description {
		font-size: 16px;
		line-height: 1.4;
		width: 100%;
		margin-left: 0;
	}

	.takumi-hero-character {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 120px;
		line-height: 1;
		width: auto;
		margin-left: 0;
		opacity: 0.2;
	}

	/* Takumi Application Heading */
	.takumi-application-heading {
		height: 80px;
		margin: 40px 0;
	}

	.takumi-application-bg {
		width: 100%;
		height: 80px;
		left: 0;
		transform: none;
	}

	.takumi-application-title {
		font-size: 28px;
		line-height: 1.2;
	}

	.takumi-application-subtitle {
		font-size: 14px;
		line-height: 1.2;
	}

	/* Takumi Blue Box Heading */
	.takumi-blue-heading {
		height: 100px;
		margin: 30px 0;
	}

	.takumi-blue-bg {
		border-radius: 6px;
	}

	.takumi-blue-title {
		font-size: 32px;
		margin-bottom: 6px;
	}

	.takumi-blue-subtitle {
		font-size: 16px;
	}

	/* Takumi Results */
	.takumi-results {
		padding: 60px 0;
	}

	.takumi-results-background::before {
		top: -100px;
		left: -400px;
		width: 100%;
		height: 1000px;
		mask-size: 100% auto;
		mask-position: center;
		-webkit-mask-size: 100% auto;
		-webkit-mask-position: center;
	}

	.takumi-results-background::after {
		width: 100%;
		height: 1000px;
	}

	.takumi-results .container {
		margin-top: 0;
		padding: 40px 20px;
		margin-left: 20px;
		margin-right: 20px;
	}

	.takumi-results-title {
		font-size: 32px;
		line-height: 1.2;
		margin-bottom: 40px;
	}

	.takumi-example {
		margin-bottom: 0;
	}

	.takumi-example-title {
		font-size: 24px;
		line-height: 1.2;
		margin-bottom: 20px;
	}

	.takumi-example-images {
		flex-direction: column;
		gap: 20px;
	}

	.takumi-example-before,
	.takumi-example-after {
		max-width: 100%;
	}

	.takumi-example-label {
		font-size: 18px;
		line-height: 1.2;
		margin-bottom: 10px;
	}

	.takumi-results-background {
		margin-bottom: 60px;
	}

	.takumi-contact-btn {
		width: 70%;
	}

	/* Container */
	.container {
		padding: 0 2vw;
	}
}