@charset "utf-8";

html{
	background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 100%) !important;
}

.lower-page-header {
    position: relative;
    width: 100%;
    padding-top: 100px; 
}

/* --- タイトルエリア --- */

.lower-page-title {
    font-family: "Cormorant", serif;
    font-size: 150px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1;
	opacity: 0.7;
}
.lower-page-header .container{
	padding-bottom: 0;
}

.breadcrumb-bar {
    width: 100%;
}
.breadcrumb-bar .container{
	padding: 50px 0;
}
.breadcrumb-list, 
.breadcrumb-list span, 
.breadcrumb-list li,
.breadcrumb-list li a{
    display: inline !important; 
    padding: 0;
    margin: 0;
    white-space: nowrap; 
	font-size: 14px;
	color: #fff;
	letter-spacing: 0.05em;
}
.breadcrumb-list a::after {
    content: "/";
    margin: 0 10px;
    color: #a0a0a0; 
    display: inline-block;
}

.breadcrumb-list li.current {
    opacity: 0.9;
    margin-left: 0;
}

.breadcrumb-list li a:hover {
    opacity: 0.6;
}

/* ==========================================================================
   12. 下層レイアウト
   ========================================================================== */
.lower-content-section {
    color: #fff;
    padding: 120px 0;
}
.lower-container {
    display: flex;
    align-items: flex-start;
}
.lower-sidebar {
    flex: 1;
    position: sticky;
    top: 140px;
    z-index: 10;
}
.sidebar-menu { list-style: none; padding: 0; margin: 0 20% 0 0; }
.sidebar-item { margin-bottom: 30px; border-top: 1px solid #A0A0A0; padding-top: 20px;}
.sidebar-item a { font-family: "Cormorant", serif; font-size: 12px; text-decoration: none; letter-spacing: 0.05em; color: #666666; transition: color 0.3s ease; font-weight: 300; line-height: 1;}
.sidebar-item a span{
	display: block;
	font-size: 22px;
	padding: 10px 0 0;
}
.sidebar-item a:hover { color: #bbb; }
.sidebar-item.is-active a { color: #ffffff; font-weight: 400; }

.lower-main-content {
    flex: 4;
	padding-left: 5%;
}

.lower-main-content.soon_content{
	padding-left: 0;
}

.section-title{
	font-size: 35px;
	font-family: "Cormorant", serif;
	color: #fff;
}
.section-title span{
	font-size: 14px;
	display: block;
	font-weight: 300;
}

.content-block {
    padding-bottom: 120px;
}
.content-block:last-child {
    padding-bottom: 0;
}
.content-block-title span { font-size: 1.4rem; margin-right: 12px; vertical-align: middle; display: inline-block; position: relative; top: -4px; }

/* ==========================================
   SECTION: Mission / Vision / Value
========================================== */
#profile-block, #partner-block, #work-block,#process-block, #other-block{
	padding-top: 120px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.mvv-wrapper {
	padding: 0 3%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
	margin-top: 50px;
}

.mvv-block {
    display: flex;
    background: #edebe6; 
    color: #141313;
    padding: 50px 50px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0px 20px 0px 0px; 
}


.mvv-left {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border-right: 1px dashed #aaa; 
    padding-right: 40px;
    margin-right: 40px;
}

.mvv-en-ttl {
    font-family: "Cormorant", serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.03em;
}

.mvv-ja-ttl {
    font-size: 12px;
    letter-spacing: 0.05em;
	padding-left: 5px;
}


.mvv-right {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mvv-catch {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 15px;
    letter-spacing: 0.03em;
}

.mvv-desc {
    font-size: 12px;
    line-height: 1.8;
    color: #464646;
    text-align: justify;
	font-family: "Noto Sans JP", sans-serif;
}

/* ==========================================
   SECTION: Company Profile
========================================== */

.profile-wrapper {
    width: 100%;
    padding: 0 3%;
    box-sizing: border-box;
	margin-top: 50px;
}

.profile-box {
    background: #edebe6; 
    color: #141313;
    padding: 80px 10%; 
    width: 100%;
    box-sizing: border-box;
}

.profile-row {
    display: flex;
    align-items: flex-start; 
    padding: 35px 0;
    margin: 0;
    border-bottom: 1px solid rgba(20, 19, 19, 0.15); 
}

.profile-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.profile-row:first-child {
    padding-top: 0;
}

.profile-label {
    font-family: "Zen Old Mincho", serif;
    font-size: 16px;
    font-weight: 600;
    width: 30%;
    letter-spacing: 0.05em;
}

.profile-data {
    font-family: "Zen Old Mincho", serif;
    font-size: 16px;
    width: 70%; 
    margin: 0;
    line-height: 1.8;
    letter-spacing: 0.03em;
}

.business-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.business-list li {
    margin-bottom: 8px; 
}

.business-list li:last-child {
    margin-bottom: 0;
}


.partner-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    width: 100%;
	padding: 0 3%;
	margin-top: 50px;
}

.partner-logo-item {
    width: calc((100% - 60px) / 4); 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.partner-logo-item img {
    width: 100%;
    height: auto;
}

/* ==========================================
   SERVICE PAGE: Hero Section
========================================== */

.svc-hero-content {
	padding: 0 3%;
	margin-top: 50px;
}

.svc-catch {
    font-family: "Zen Old Mincho", serif;
    font-size: 30px; 
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 30px;
    letter-spacing: 0.03em;
}

/* 詳細な説明文 */
.svc-desc {
    font-family: "Zen Old Mincho", serif;
    font-size: 16px;
    line-height: 2.2; 
    color: #d2d2d2;
    text-align: justify;
    letter-spacing: 0.04em;
}

/* ==========================================
   SERVICE PAGE: Service List
========================================== */
.svc-list-wrapper {
    width: 100%;
    padding: 0 3%;
    box-sizing: border-box;
	margin-top: 50px;
}

.svc-flex-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; 
    width: 100%;
}

.svc-item-card {
    display: flex;
    background: #edebe6;
    color: #141313;
    padding: 35px 20px;
    box-sizing: border-box;
    align-items: center;
    width: calc((100% - 30px) / 2); 
}

.svc-item-left {
    flex-shrink: 0; 
    margin-right: 15px;
}

.svc-icon-circle {
    width: 100px;
    height: 100px;
    background: #fff;
    border: 1px solid #c8c6c1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.svc-icon-circle img {
    width: 70px;
    height: auto;
    object-fit: contain;
}

.svc-item-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.svc-item-num {
    font-family: "Cormorant", serif;
    font-size: 14px;
    font-weight: 500;
    color: #141313;
    line-height: 1;
    margin-bottom: 6px;
}

.svc-item-ttl {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 15px;
    letter-spacing: 0.02em;
}

.svc-item-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #464646;
    text-align: justify;
}

/* ==========================================
   SERVICE PAGE: Process
========================================== */

.svc-process-wrapper {
    width: 100%;
    padding: 0 3%;
    box-sizing: border-box;
	margin-top: 50px;
}

.process-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    position: relative;
}

.process-list::before {
    content: "";
    position: absolute;
    top: 50px;       
    bottom: 50px; 
    left: 45px;
    width: 2px; 
    background: rgba(255, 255, 255, 0.4);
    z-index: 1; 
}

.process-item {
    display: flex;
    background: #edebe6; /* ライトグレー */
    color: #141313;
    padding: 45px 40px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    z-index: 2; 
}

.process-left {
    display: flex;
    flex-direction: column;
    width: 25%; 
    padding-left: 35px;
    flex-shrink: 0;
}

.process-step {
    font-family: "Cormorant", serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin-bottom: 12px;
}

.process-en-ttl {
    font-family: "Cormorant", serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.process-right {
    display: flex;
    align-items: center; 
    width: 75%; 
    padding-left: 20px;
}

/* 説明文 */
.process-desc {
    font-family: "Zen Old Mincho", serif;
    font-size: 14px;
    line-height: 1.9; 
    color: #141313;
    text-align: justify;
}

/* ==========================================
   SERVICE PAGE: Business Link
========================================== */

.svc-business-wrapper {
    width: 100%;
    padding: 0 3%;
    box-sizing: border-box;
	margin-top: 50px;
}

.svc-business-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
}

.business-card {
    display: block;
    width: calc((100% - 30px) / 2); 
    height: 240px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    background-size: cover;
    background-position: center;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
    filter: grayscale(100%);
    z-index: 1;
}

.business-card:hover {
    filter: grayscale(0%);
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
    z-index: 10;
}

.card-img-01 { background-image: url('../image/service_clr_01.jpg'); }
.card-img-02 { background-image: url('../image/service_clr_02.jpg'); }
.card-img-03 { background-image: url('../image/service_clr_03.jpg'); }
.card-img-04 { background-image: url('../image/service_clr_04.jpg'); }
.card-img-05 { background-image: url('../image/service_clr_05.jpg'); }

.business-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    transition: background 0.4s ease;
    z-index: 1;
}

.business-card-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 35px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.business-card-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.business-num {
    font-family: "Cormorant", serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
}

.business-ttl {
    font-family: "Cormorant", serif;
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
}

.business-ja {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 6px;
}

.business-arrow-btn {
    width: 45px;
    height: 40px;
    background: #fff;
    color: #141313;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
}

.business-card:hover::before {
    background: rgba(0, 0, 0, 0.2); 
}

.business-card:hover .business-arrow-btn {
    background: #141313;
    color: #fff;
}

/* ==========================================
   SERVICE PAGE: Coming Soon
========================================== */
.svc-soon-section {
    padding: 140px 0 0; 
    width: 100%;
}

.svc-soon-wrapper {
    width: 100%;
    padding: 0 3%;
    box-sizing: border-box;
}

.soon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    text-align: center; 
    width: 100%;
    min-height: 300px;
}

/* 特大の Coming Soon... */
.soon-en-ttl {
    font-family: "Cormorant", serif;
    font-size: 80px; 
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    letter-spacing: 0.04em;
    margin-bottom: 45px; 
}

.soon-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.soon-lead {
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.7);
}

.soon-desc {
    font-family: "Zen Old Mincho", serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    letter-spacing: 0.05em;
}

.privacy-section{
	padding: 120px 0 0;
	color: #fff;
	font-size: 16px;
}
.privacy-section h3{
	padding-top: 30px;
	font-size: 20px;
	padding-bottom: 15px;
	font-weight: bold;
}
.privacy-section p{
	padding-bottom: 10px;
	font-weight: normal;
}
/* ==========================================
   SERVICE PAGE: Detail Content
========================================== */
.news-detail-section {
    padding: 160px 0 120px 0;
    width: 100%;
}

.news-detail-section img{
	width: 100%;
	height: auto;
}
.news-detail-wrapper {
    width: 100%;
    box-sizing: border-box;
}
.detail-container {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto; /* 画面のど真ん中に配置 */
    width: 100%;
	background: #edebe6;
	padding: 50px 40px;
}

.detail-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.detail-sub-info {
    font-family: "Cormorant", serif;
    font-size: 16px;
	font-weight: bold;
    letter-spacing: 0.03em;
}

.detail-top-lead {
    font-size: 22px;
    font-weight: 600;
    color: #141313;
    line-height: 1;
}

.detail-main-thumb {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}

.detail-block {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 50px;
    width: 100%;
}

.detail-heading {
    font-family: "Zen Old Mincho", serif;
    font-size: 22px;
    font-weight: 600;
    padding-left: 15px; 
    border-left: 3px solid #141313;
    line-height: 1.2;
}


.detail-body-text {
    display: flex;
    flex-direction: column;
    gap: 25px; 
}

.detail-body-text p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 2.0;
    text-align: justify;
}

.privacy-section .privacy-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
    width: 100%;
}

.privacy-section .privacy-block:last-child {
    margin-bottom: 0;
}

.privacy-section .privacy-heading {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    padding-left: 15px;
    border-left: 3px solid #fff;
    line-height: 1.2;
    letter-spacing: 0.02em;
	padding-top: 15px;
}

.privacy-section .privacy-body-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.privacy-section .privacy-body-text p {
    font-size: 14px;
    line-height: 2.1;
    color: #fff;
    text-align: justify;
    margin: 0;
    letter-spacing: 0.03em;font-family: "Noto Sans JP", sans-serif;
}

.privacy-section .privacy-body-text strong {
    font-weight: 600;
    color: #fff;
    display: inline-block;
    margin-top: 10px;
}

.privacy-section .privacy-body-text p:first-child strong {
    margin-top: 0;
}
.contact-main{
	color: #fff;
}
p.small{
	font-size: 14px;
	margin-top: 30px;
	color: #B8B8B8;
}
.contact-main h2{
	font-size: 40px;
	padding-bottom: 50px;
}
.thanks p{
	line-height: 2;
}
.thanks .btn-view-more{
	background: #fff;
	margin-top: 70px;
}
.thanks .btn-view-more{
	height: 70px;
}
.thanks .btn-view-more .btn-text{
	padding: 0 50px;
}

@media (max-width: 960px) {
    .svc-item-card {
        padding: 35px 25px;
    }
    .svc-flex-container {
        gap: 20px;
    }
    .svc-icon-circle {
        width: 100px;
        height: 100px;
    }
    .svc-icon-circle img {
        width: 50px;
    }
    .process-item {
        flex-direction: column;
        padding: 40px 30px;
        gap: 20px;
    }
    .process-left {
        width: 100%;
        padding-left: 0;
    }
    .process-right {
        width: 100%;
        padding-left: 0;
    }
    .process-en-ttl {
        font-size: 26px;
    }
    .svc-business-flex {
        gap: 20px;
    }
    .business-card-inner {
        padding: 25px 30px;
    }
    .business-ttl {
        font-size: 26px;
    }
}

@media (max-width: 767px) {
	.pc_only{
		display: none;
	}
	.lower-container{
		padding-bottom: 0;
	}
	.section-title span{
		font-size: 12px;
	}
	.lower-page-header .container{
		padding-top: 180px;
	}
	.lower-content-section{
		padding-top: 0px;
	}
	.lower-sidebar{
		display: none;
	}
	.lower-main-content{
		padding-left: 0;
	}
	/* 1. 全体を包むグレーのカード枠 */
    .mvv-block {
        flex-direction: column !important; /* 横並びから縦1列に変更 */
        padding: 35px 24px !important;    /* スマホに合わせて余白を少しスリムに */
        border-radius: 0px 16px 0px 0px;  /* 右上の角丸をスマホサイズに微調整 */
    }

    /* 2. タイトルエリア（左側だった部分） */
    .mvv-left {
        width: 100% !important;           /* 横幅いっぱいに広げる */
        border-right: none !important;    /* PC用の縦の点線を消去 */
        padding-right: 0 !important;      /* PC用の右余白をゼロに */
        margin-right: 0 !important;       /* PC用の右マージンをゼロに */
        text-align: center !important;    /* 中身の文字を中央揃えに */
        align-items: center !important;
    }

    .mvv-en-ttl {
        font-size: 32px !important;       /* スマホに合わせて少し小さく調整 */
        margin-bottom: 4px !important;    /* 日本語タイトルとの隙間 */
    }

    .mvv-ja-ttl {
        font-size: 12px !important;
        padding-left: 0 !important;       /* 中央揃えになるので左パディングをリセット */
    }

    /* ── ⚡【追加】タイトルと文章の間に挟む「横向きの点線」 ──
       CSS側だけで擬似的に点線を作り出します。HTMLを増やす必要はありません */
    .mvv-left::after {
        content: "";
        display: block;
        width: 100%;                      /* 点線の横幅（お好みで調整してください） */
        height: 1px;
        border-top: 1px dashed #aaa !important; /* PC版と同じ色味の点線 */
        margin: 20px auto !important;     /* 上下に20pxのきれいな余白を作る */
    }

    /* 3. 文章エリア（右側だった部分） */
    .mvv-right {
        width: 100% !important;           /* 横幅いっぱいに広げる */
        text-align: center !important;    /* キャッチコピーなどを中央揃えに */
    }

    .mvv-catch {
        font-size: 17px !important;       /* スマホで強すぎないサイズに調整 */
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }

    .mvv-desc {
        font-size: 14px !important;
        line-height: 1.7 !important;
        text-align: left !important;      /* 長文は左揃えの方が見やすいため左に */
    }
	/* 1. プロフィールを包むベージュのカード枠 */
    .profile-box {
        /* PCの左右10%の余白をスマホ用にスリムにし、画面いっぱいにコンテンツを広げます */
        padding: 40px 24px !important; 
    }

    /* 2. 各行（会社名、住所などのひとかたまり） */
    .profile-row {
        flex-direction: column !important; /* 横並びから縦並びに変更 */
        align-items: flex-start !important; /* スマホ時はすべて左揃えに整列 */
        padding: 20px 0 !important;        /* 各項目の間の上下余白をスッキリ調整 */
    }

    /* 3. 左側にあった項目名（会社名、代表取締役など） */
    .profile-label {
        width: 100% !important;           /* 横幅をいっぱいにする */
        font-size: 13px !important;        /* スマホで見やすいように少し小さく微調整 */
        margin-bottom: 6px !important;    /* 下の内容（dd）との間に程よい隙間を作る */
        color: #777777;                    /* ➔ 項目名を少しだけ薄くすると高級感が出て中身が引き立ちます */
    }

    /* 4. 右側にあった内容（株式会社Fukuro、住所など） */
    .profile-data {
        width: 100% !important;           /* 横幅をいっぱいにする */
        font-size: 16px !important;        /* スマホで読みやすいサイズに調整 */
        line-height: 1.6 !important;
    }
    
    /* 5. 事業内容の中のリストの微調整（もし必要であれば） */
    .business-list {
        padding-left: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
	.business-card {
        width: 100%;
        height: 200px; 
    }
	.partner-logo-item {
    	width: calc((100% - 20px) / 2);
	}
	.breadcrumb-bar .container{
		padding-top: 0;
	}
	.svc-hero-content{
		padding: 0;
	}
	.svc-desc{
		line-height: 2;
	}
	.svc-catch{
		font-size: 24px;
	}
	/* 1. 外側の余白調整（左右のゆとりをスマホ用に最適化） */
    .svc-list-wrapper {
        padding: 0 4%;
        margin-top: 40px;
    }

    /* 2. カードの並び（横2並び ➔ 縦1並びへ） */
    .svc-item-card {
        width: 100%;           /* ➔ カードの横幅を100%にして縦に1つずつ積む */
        flex-direction: column; /* ➔ カード内部（左アイコン・右テキスト）を縦並びに変更 */
        align-items: center;    /* ➔ アイコンや文字を中央揃えにする */
        text-align: center;     /* ➔ テキストの基本を中央揃えにする */
        padding: 40px 20px;     /* スマホ用に上下の余白を少しゆったりに */
    }

    /* 3. 上側にきたアイコンエリア */
    .svc-item-left {
        margin-right: 0;        /* PC用の右マージンを消去 */
        margin-bottom: 20px;    /* ➔ 代わりに、下側のテキストとの間に隙間を作る */
    }

    .svc-icon-circle {
        width: 120px;            /* スマホ画面に合わせて丸のサイズをほんの少しスリムに */
        height: 120px ;
    }

    .svc-icon-circle img {
        width: 60px;            /* 丸に合わせて中身のアイコンも微調整 */
    }

    /* 4. 下側にきたテキストエリア */
    .svc-item-right {
        width: 100%;
        align-items: center;    /* ナンバー、タイトル、説明文を中央に寄せる */
    }

    .svc-item-num {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .svc-item-ttl {
        font-size: 20px;        /* スマホで見やすい見出しサイズに */
        margin-bottom: 12px;
    }

    .svc-item-desc {
        font-size: 14px;
        line-height: 1.8;
        text-align: left !important;       
    }
	
	/* 1. セクション全体の余白調整 */
    .svc-process-wrapper {
        padding: 0 4%;
        margin-top: 40px;
    }

    .process-list::before {
        display: block; /* 消えずに表示されるよう明示 */
        top: 30px;       
        bottom: 30px; 
        left: 20px;     /* カードの左端から20pxの位置に固定 */
        width: 2px; 
        background: rgba(255, 255, 255, 0.2); /* 線がはっきり見えるように不透明度を調整 */
        z-index: 1; 
    }

    /* 3. 各プロセスのカード */
    .process-item {
        flex-direction: column;   /* 縦並びにする */
        align-items: flex-start;  /* ⚡縦線に合わせて左揃えに変更 */
        padding: 35px; 
        box-sizing: border-box;
        width: 100%;
        position: relative;
        z-index: 2; 
    }

    /* 4. タイトルエリア（StepとHeading） */
    .process-left {
        width: 100%;
        padding-left: 0;
        align-items: flex-start; /* ⚡左揃え */
    }

	
    .process-step {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .process-en-ttl {
        font-size: 30px;
        line-height: 1.2;
        margin-bottom: 12px; /* 下の説明文との間に程よい隙間 */
    }

    /* 5. 説明文エリア */
    .process-right {
        width: 100%;
        padding-left: 0;
    }

    .process-desc {
        font-size: 15px;
        line-height: 1.8;
        text-align: left; /* 左揃えで縦線からの流れを美しく */
    }
    .svc-soon-section {
        padding: 100px 15px 0;
    }
    .soon-en-ttl {
        font-size: 38px;
        margin-bottom: 30px;
    }
    .soon-lead {
        font-size: 15px;
    }
    .soon-desc {
        font-size: 12px;
    }
	.news-detail-section {
        padding: 60px 0 100px 0;
    }
    .detail-top-lead {
		line-height: 1.5;
    }
    .detail-heading {
        font-size: 18px;
    }
	.detail-container{
		padding: 50px 20px;
	}
	.privacy-section{
		padding: 0;
	}
	.privacy-section.svc-detail-section {
        padding: 60px 0 100px 0;
    }
    
    .privacy-section .privacy-header {
        margin-bottom: 40px;
    }
    
    .privacy-section .privacy-top-lead {
        font-size: 22px;
    }
    
    .privacy-section .privacy-heading {
        font-size: 16px;
    }
    
    .privacy-section .privacy-body-text p {
        font-size: 13px;
        line-height: 1.9;
    }
	.lower-page-title{
		font-size: 60px;
	}
	.lower-page-header{
		padding-top: 0;
	}
	.contact-main h2{
		font-size: 30px;
	}
	p.small{
		font-size: 13px;
	}
	.contact-main p{
		font-size: 14px;
	}
}

@media (min-width: 769px) {
	.sp_only{
		display: none;
	}
}

/* ==========================================================================
   📄 株式会社Fukuro風 フォームカスタマイズCSS
   ========================================================================== */

/* 全体コンテナ */
.fukuro-form-container {
    margin: 50px auto 0;
    padding: 40px 0px;
    color: #ffffff;
}

/* 行・レイアウトの基本 */
.form-row {
    margin-bottom: 45px;
}

/* PC版：左右2カラムの並び */
.flex-row {
    display: flex;
    gap: 40px;
}

.flex-row .form-group {
    flex: 1;
    min-width: 0;
}

/* ラベルデザイン */
.form-group label {
    display: block;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
}

/* 必須の赤い星 */
.required-star {
    color: #ff3b30;
    margin-left: 4px;
    font-weight: bold;
}

/* 補足テキスト（法人の方は〜） */
.form-note {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
}

/* 入力インプット（テキスト・メール・電話）の共通下線デザイン */
.fukuro-form-container input[type="text"],
.fukuro-form-container input[type="email"],
.fukuro-form-container input[type="tel"] {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease;
}

.fukuro-form-container input:focus {
    border-bottom-color: #ffffff !important; /* フォーカス時に線をはっきり */
}

/* お問い合わせ内容（テキストエリア白四角） */
.fukuro-form-container textarea {
    width: 100% !important;
    height: 200px !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 15px !important;
    color: #333333 !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

/* ── 🔘 ラジオボタンのカスタマイズ ── */
.custom-radio-group .wpcf7-list-item {
    display: inline-block !important;
    margin: 0 30px 20px 0 !important;
}

.custom-radio-group label {
    display: flex !important;
    align-items: center !important;
    cursor: pointer;
    font-size: 14px !important;
    margin-bottom: 0 !important;
}

/* ラジオボタン本体（標準の丸を消して白枠にする） */
.custom-radio-group input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid #ffffff !important;
    border-radius: 50% !important;
    background: transparent !important;
    margin-right: 10px !important;
    position: relative !important;
    outline: none !important;
    cursor: pointer;
    padding: 0 !important;
	top: 5px;
}

/* チェックが入ったときの真ん中の白い丸点 */
.custom-radio-group input[type="radio"]:checked::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
	top: 4px;
}

/* ── 🟩 同意チェックボックスのカスタマイズ ── */
.privacy-row {
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
}

.privacy-link {
    color: #7fa5ff; /* リンク色（適宜変更してください） */
    text-decoration: underline;
}

.privacy-row label {
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer;
}

/* チェックボックスを白枠の四角にする */
.privacy-row input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid #ffffff !important;
    background: transparent !important;
    margin-right: 10px !important;
    position: relative !important;
    outline: none !important;
    cursor: pointer;
    padding: 0 !important;
}

/* チェックが入ったときの「レ点」を擬似要素で表現 */
.privacy-row input[type="checkbox"]:checked::before {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* ==========================================================================
   ✉️ 送信ボタン 確定復活版（消滅バグを回避して横並びにする）
   ========================================================================== */

.form-submit-wrap {
    display: flex !important;
    justify-content: center !important;
    margin-top: 60px !important;
    width: 100% !important;
}

/* ⚡【超重要】ボタンと矢印を包むコンテナ */
.submit-btn-flex-container {
    display: inline-flex !important;
    flex-direction: row !important;  /* 絶対に横並び */
    flex-wrap: nowrap !important;     /* 絶対に改行させない */
    align-items: center !important;
    justify-content: center !important;
    height: 64px !important;
    box-sizing: border-box !important;
}

/* ⚡WordPressが勝手に挟んでくる自動改行（br）だけをピンポイントで消す */
.submit-btn-flex-container br {
    display: none !important;
}

/* ⚡もしボタンがpタグに包まれていても、そのpタグ自体を横並びの要素として扱う */
.submit-btn-flex-container p {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 🟩 1. 送信ボタン本体（左側の「送信する」部分） */
.submit-btn-flex-container input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    
    display: block !important;
    height: 64px !important;
    width: 240px !important; /* View Moreボタンと同じ幅 */
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    outline: none !important;

    /* デザイン：白背景・黒枠・黒文字 */
    background: #ffffff !important;
    border: 3px solid #141313 !important;
    color: #141313 !important;
    text-align: center !important;
    
    /* フォント設定 */
    font-family: "Noto Serif JP", "Shippori Mincho", serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em;
    
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease !important;
}

/* 🟩 2. 矢印ボックス（右側の「→」正方形部分） */
.submit-btn-flex-container .submit-arrow-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 形状：64pxの正方形 */
    width: 64px !important;
    height: 64px !important;
    box-sizing: border-box !important;
    
    /* デザイン：白背景・黒枠（左の線を消してボタンと結合） */
    background: #ffffff !important;
    border: 3px solid #141313 !important;
    border-left: none !important; 
    color: #141313 !important;
    
    /* フォント設定 */
    font-family: "Cormorant", serif !important;
    font-size: 22px !important;
    
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none; /* スマホ誤作動防止 */
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease !important;
}


/* ── ⚡ホバーアクション（マウスを乗せたら「黒背景・白文字」に反転） ── */

/* コンテナ全体がホバーされたとき、中のボタン本体を反転 */
.submit-btn-flex-container:hover input[type="submit"] {
    background-color: #141313 !important;
    color: #ffffff !important;
    border-color: #fff !important;
}

/* コンテナ全体がホバーされたとき、右側の矢印ボックスも反転 */
.submit-btn-flex-container:hover .submit-arrow-box {
    background-color: #141313 !important;
    color: #ffffff !important;
    border-color: #fff !important;
}
.wpcf7-spinner{
	display: none;
}

.custom-radio-group{
	font-size: 14px;
}
.form-row.text-area-area label{
	margin-bottom: 0;
}
/* ── 📱 レスポンシブ対応（スマホ表示のとき） ── */
@media screen and (max-width: 768px) {
    .flex-row {
        flex-direction: column; /* 2カラムを縦並びにする */
        gap: 35px;
    }
    
    .form-row {
        margin-bottom: 35px;
    }
    
    .custom-radio-group .wpcf7-list-item {
        display: block !important; /* スマホではラジオボタンも縦に並べる（1列3個にしたい場合は調整可能） */
        margin-right: 0 !important;
    }
}