@charset "UTF-8";

/* 基本設定 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    background-color: #F1F1F1;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    color: #333;
    line-height: 1.6;
}
a { text-decoration: none; color: inherit; }

/* ヘッダー */
header { 
    position: absolute; 
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
}
.header-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    /* 左右の余白を 80px に設定して MV の文字位置と揃える */
    padding: 20px 80px !important; 
}
.main-ul {
    display: flex !important;
    list-style: none !important;
    gap: 70px;
}
.main-ul li a { font-size: 14px; color: #ffffff; }
.nav-btn a { 
    background: rgba(255,255,255,0.2); 
    padding: 5px 15px; 
    border-radius: 30px; 
    white-space: nowrap;
}
/* ロゴ画像の左側の透明な余白を打ち消す */
.logo img {
    width: 150px;
    display: block;
    /* ここが重要：画像内の余白分（約10〜15px）だけ左に強制移動 */
    margin-left: -12px; 
}

/* メインビジュアル */
.main-visual { 
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    /* background-image: url(images/main.JPG); ←これをコメントアウトして無効化 */
	background-color: #f1f1f1; /* ←ここにお好きな色を指定 */
    background-size: cover;
    background-position: center;
    position: relative;
}

/* CASE.01 */
.mv-copy span {
    display: block;
    font-size: 16px;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

/* 「中野の住宅」と「VIEW MORE」を並べる親要素 */
.mv-title-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    border-bottom: 1px solid #fff !important;
    
    /* 1行に収まるよう、十分な幅を確保（計画の比率に合わせる） */
    width: 35vw !important; 
    min-width: 500px !important; /* 狭い画面でも1行を維持 */
    
    padding-bottom: 15px;
}

/* 中野の住宅（タイトル） */
.mv-title-flex h2 {
    font-size: 2.2rem !important; /* 計画に近いサイズ */
    white-space: nowrap !important; /* 絶対に改行させない */
    margin: 0 !important;
}

/* VIEW MORE リンク */
.view-more-link {
    font-size: 14px !important;
    white-space: nowrap !important;
    color: #fff;
    text-decoration: none;
    margin-left: 40px !important; /* タイトルとの間隔 */
}

.mv-title-flex p { font-size: 0.5rem; }





/* メインビジュアルの高さを強制的に確保する0312追加 */

/* メインビジュアル全体の枠 */
.main-visual, 
.swiper, 
.mySwiper {
    width: 100%;
    height: 700px !important;
    position: relative;
    overflow: hidden;
    background-color: #000; /* 背景を黒にしておくと画像切替時が綺麗です */
}

/* --- 文字と線の配置（ここが重要） --- */
.mv-copy {
    position: absolute !important;
    left: 40px !important;    /* 左からの位置 */
    bottom: 80px !important;  /* 下からの位置 */
    z-index: 10 !important;   /* 画像より手前に出す */
    color: #fff !important;
}

/* CASE.01 などの数字 */
.mv-copy span {
    display: block;
    font-size: 16px;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.mv-title-flex h2 {
    font-size: 2.2rem !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

.view-more-link {
    font-size: 14px !important;
    white-space: nowrap !important;
    color: #fff !important;
    text-decoration: none;
    margin-left: 40px !important;
}

.swiper-slide {
    overflow: hidden !important; /* 拡大した画像が枠からはみ出さないように */
}

.slide-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    transform-origin: center center;
    transition: transform 2.5s ease-out !important;
    transform: scale(1.0);
}

.swiper-slide-active .slide-image,
.swiper-slide-duplicate-active .slide-image {
    transform: scale(1.1) !important;
}

/* スライドが切り替わる瞬間にパッと戻らないよう、非アクティブ時はゆっくり戻す */
.swiper-slide .slide-image {
    transition: transform 20s linear;
}






/* --- Common: Section Label (Concept / Flow の左上ラベル) --- */
.section-label {
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ラベルの左にある細い線 */
.section-label::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #333;
}

/* --- Concept Section 修正 --- */
.concept {
    width: 100%;
    padding: 120px 40px;
}

/* コンテナ内を2カラムに */
.concept-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.concept-main-title {
    flex: 0 0 45%;
}

.concept-main-title h2 {
    font-size: 36px; /* 指示書のサイズ感 */
    line-height: 1.8;
    font-weight: bold;
    margin: 0;
}

.concept-description {
    flex: 0 0 50%;
}

.concept-description p {
    font-size: 14px;
    line-height: 2.2;
    margin-bottom: 2em;
    color: #333;
}

/* Read More リンク共通 */
.line-link {
    display: inline-block;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    margin-top: 20px;
    transition: opacity 0.3s;
}

.line-link:hover {
    opacity: 0.6;
}

/* --- Flow Overview Section (トップページ用) --- */
.flow-overview {
    padding: 120px 40px;
}

.flow-intro h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 50px;
}

/* お送りいただいた flow-all.png の表示設定 */
.flow-all-image {
    width: 100%;
    margin-bottom: 40px;
}

.flow-all-image img {
    width: 100%;
    height: auto;
    display: block;
}

.flow-link {
    text-align: right; /* Read Moreを右寄せに */
}

/* --- One Stop Support (バナーエリア) --- */
.one-stop-support {
    padding: 100px 0;
    background-color: #fff;
}

.support-lead {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: left;
}

.support-visual {
    width: 100%;
    background-color: #f4f4f4; /* バナーの背景色 */
    padding: 60px;
    text-align: center;
}

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

/* Project Section */
.projects { padding: 100px 40px; }
.container { max-width: 1200px; margin: 0 auto; }
.project-header { margin-bottom: 60px; padding-top: 20px; position: relative; }
.project-header::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 70px; height: 1px; background-color: #333;
}
.sub-title { display: block; font-size: 24px; font-family: serif; margin-bottom: 10px; }
.main-title { font-size: 14px; letter-spacing: 0.2em; }
.project-list { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.project-item { flex: 1; min-width: 300px; max-width: 346px; }
.project-img { 
	width: 100%;            /* 横幅は親要素（3つ並び）に合わせる */
    aspect-ratio: 3 / 2;    /* ★重要：横3：縦2の比率で固定（346/230などお好みで） */
    overflow: hidden;       /* 枠からはみ出た分を隠す */
    margin-bottom: 20px;
    background-color: #D9D9D9;
	 }
.project-img img { 
	width: 100%;            /* 枠の横幅いっぱいに広げる */
    height: 100%;           /* 枠の縦幅いっぱいに広げる */
    object-fit: cover;      /* ★重要：比率を維持したまま、枠を埋め尽くす（はみ出しは自動カット） */
    object-position: center; /* 写真の真ん中を中心に表示 */
    transition: transform 0.5s ease; /* 0.5秒かけて滑らかに動かす */
	}
	
.project-item:hover .project-img img {
    transform: scale(1.1); /* 1.1倍に拡大 */
}
	
.item-title { font-size: 16px; margin-bottom: 8px; }
.item-info { font-size: 13px; color: #666; }

/* cconcept/flow/Projectと共通の【readmore・view all】リンクエリア設定 */
.view-all-area { 
    display: flex; 
    justify-content: flex-end; 
    margin-top: 40px; 
}

.view-all-link {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    width: 280px; 
    padding-bottom: 10px; 
    border-bottom: 1px solid #333;
    text-decoration: none; /* 下線を消す */
    color: #333;           /* 文字色を統一 */
}

/* 文字の細かい調整（お好みで） */
.link-text {
    font-size: 14px;
    letter-spacing: 0.2em;
    font-weight: bold;
}

.link-arrow {
    font-size: 10px;
}





/* Blog Section */
.b-sec { padding: 100px 80px !important; }
.b-container { max-width: 1200px; margin: 0 auto; padding: 0 0px; }
.b-head { margin-bottom: 40px; padding-top: 20px; position: relative; }
.b-head::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 70px; height: 1px; background-color: #333;
}
.b-en { display: block; font-size: 24px; font-family: serif; }
.b-jp { font-size: 14px; margin-top: 5px; }
.b-item {
    display: flex !important; 
	align-items: center;
    margin-bottom: 20px; 
	border-bottom: 1px solid #ccc; 
	padding-bottom: 20px;
}
.b-img {
   width: 120px;
    height: 80px;
    background-color: #D9D9D9;
    flex-shrink: 0;
    margin-right: 30px;
    
    /* ★ここを追加：中身の文字を上下左右中央に配置する */
    display: flex !important;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
}

.b-item .b-img {
	background-position: center center !important; /* 画像の「中心」を枠の中心に合わせる */
    transition: transform 0.6s ease, opacity 0.6s ease !important;
    overflow: hidden !important;
}

/* 2. マウスを乗せた時（ホバー時）の動き */
.b-item:hover .b-img {
    /* 写真を少し大きくする（1.05倍） */
    transform: scale(1.05) !important;
    
    /* 少しだけ明るく（または薄く）して反応を分かりやすくする */
    opacity: 0.8 !important;
}

/* 中の「coming soon...」の文字設定 */
.b-img span {
    color: #666;
    
    /* ★ここを調整：サイズを小さくし、太字を解除してスッキリさせる */
    font-size: 10px;         /* お好みで 9px くらいまで小さくしても綺麗です */
    font-weight: normal;     /* bodyのBold設定を打ち消して細くする */
    letter-spacing: 0.05em;  /* 少し文字の間隔を広げると読みやすくなります */
}

.b-txt { display: flex; flex-direction: column; }
.b-date { font-size: 13px; }
.b-title { font-size: 16px; font-weight: normal; }
.b-btn-area { display: flex; justify-content: flex-end; margin-top: 40px; }
.b-btn { display: flex; justify-content: space-between; width: 280px; border-bottom: 1px solid #333; padding-bottom: 10px; }

/* --- Footer Section 全体 --- */
.f-section {
    width: 100%;
    color: #333;
}

/* --- 1. Contactエリア --- */

/* CONTACTページのコンテナ余白をFLOW（40px）に合わせる */
.c-main-section .a-container {
    padding-left: 200px !important;
    padding-right: 200px !important;
}

/* ついでに、もしPCで見た時に中央寄せの幅が微妙に違っていたらここも統一 */
.a-container {
    max-width: 1000px !important; /* FLOWの設定値に合わせる */
    margin-left: auto !important;
    margin-right: auto !important;
}


.f-contact-bg { 
    position: relative;
    /* 背景画像の設定（拡張子.JPEGを反映） */
    background-image: url('images/footer-bg.JPEG'); 
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    overflow: hidden;
    /* エリア内の基本文字色を白にする */
    color: #fff !important;
}

/* 画像の上に黒い幕（40%）を張る設定 */
.f-contact-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); 
    z-index: 1;
}

/* 中身のコンテンツを幕より手前に出す */
.f-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

.f-contact-flex { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 40px; 
}

/* --- 2. 見出しと白い線 --- */
.f-head { 
    position: relative; 
    min-width: 180px; 
}

.f-en { font-size: 24px; display: block; line-height: 1; }
.f-jp { font-size: 14px; margin-top: 10px; }
.f-text { flex: 1; font-size: 15px; line-height: 2; }

/* --- 3. コンタクトボタン（中央配置） --- */
.f-contact-btn {
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    width: 260px;
    height: 60px;
    padding: 0 30px;
    border: 1px solid #fff;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    transition: all 0.3s;
}

.f-contact-btn:hover {
    background: #fff;
    color: #333;
}

.f-arrow {
    margin-left: 10px;
}

/* --- 4. フッターボトム（ロゴとSNS横並び） --- */
.f-bottom { 
    background-color: #fff; 
}

.f-bottom-flex { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    max-width: 1200px;
    margin: 0 auto;

}

/* ロゴとSNSを横に並べるための親要素 */
.f-logo-area {
    display: flex;
    align-items: center; /* 上下中央を揃える */
    gap: 40px;           /* H-MADEとアイコンの間の隙間 */
}

.f-logo { 
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #333;
}

/* SNSアイコン自体の並び */
.f-sns {
    display: flex;
    align-items: center;
    gap: 20px;           /* アイコン同士の隙間 */
}

/* アイコン画像のサイズを統一 */
.f-sns img {
    width: 24px;         /* お好みの大きさに調整してください */
    height: auto;
    display: block;
}

.f-sns a:hover img {
    opacity: 0.6;
}

/* コピーライトの設定（位置がズレないように調整） */
.f-copyright {
    font-size: 14px;
    color: #999;
    margin: 0;           /* 余計な余白を消す */
}
/* 全体の左右振り分け */
.f-bottom-flex {
    display: flex;
    justify-content: space-between; /* 左にロゴ・SNS、右にコピーライト */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    /* 1. フレックスボックスの中身を中央に寄せる */
    .f-contact-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;   /* 子要素を水平方向の中央に */
        text-align: center !important;    /* 中のテキストをすべて中央揃えに */
    }
	
	/* 2. ヘッドエリア（タイトル部分）の調整 */
    .f-head {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 30px !important;
    }
	
	/* 3. テキストエリアの調整 */
    .f-text {
        width: 100% !important;
        margin-bottom: 40px !important;
    }
    .f-text p {
        text-align: center !important;    /* 文章を中央寄せ */
        display: inline-block;            /* 折り返しを綺麗にする */
    }

    /* 4. ボタンエリアの調整（Contact formボタン） */
    .f-btn-area {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important; /* ボタンを中央に配置 */
    }

    .f-btn-area a {
        margin: 0 auto !important;         /* 念のためマージンでも中央寄せ */
    }
}




/* --- concept Page Specific --- */
.a-mv img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.a-container {
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 40px;
}

.a-section { margin-bottom: 100px; }

/* 見出しの縦棒デザイン */
.a-head {
	position: relative;
    padding-top: 30px; /* 線からの距離 */
    margin-bottom: 60px;
    display: block;
}

/* 見出しの上の「白い線」を「黒い線」に変更（Aboutは背景が白いため） */
.a-head::before {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;      /* 線の長さ */
    height: 1px;      /* 線の太さ */
    background-color: #333; /* 線の色 */
}

/* 英語部分（大きく） */
.a-en {
	font-size: 24px;  /* 文字の大きさ */
    font-weight: 500;
    display: block;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #333;
    /* ★ここを修正：uppercase（全大文字）を none に変更 */
    text-transform: none;
}

/* 日本語部分（小さく） */
.a-jp {
    font-size: 14px;  /* ここがTOPと同じサイズ */
    margin-top: 15px;
    display: block;
    color: #666;
    font-weight: normal;
}

.a-content h3 { line-height: 1.6; margin-bottom: 25px; }
.a-content p { line-height: 2; color: #555; }

/* Flowリスト */
.a-flow-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 60px 0;
    border-bottom: 1px solid #eee;
}
/* Flowの1枚画像エリア */
.a-flow-image-area {
    width: 100%;
    margin: 60px 0;
    text-align: center;
}

.a-flow-image-area img {
    max-width: 100%; /* 画面からはみ出さないように */
    height: auto;    /* 比率を維持 */
    display: block;
    margin: 0 auto;
}

/* Flow詳細（dl全体）の設定 */
.a-flow-detail dl {
    margin-top: 60px; /* 上の画像との間隔 */
}

/* 見出し（1. 物件提案など）の設定 */
.a-flow-detail dt {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin-top: 30px;    /* ★行の上の隙間 */
    margin-bottom: 8px;  /* ★見出しと説明文の間の少しの隙間 */
}

/* 説明文の設定 */
.a-flow-detail dd {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px; /* ★次の行（次のdt）へ行く前の下の隙間 */
    padding-bottom: 20px;
    border-bottom: 1px solid #eee; /* お好みで：区切り線を入れるとさらに見やすくなります */
}

/* 最後の下線だけ消す設定 */
.a-flow-detail dd:last-child {
    border-bottom: none;
}

/* プロフィール上のリード文 */
.a-profile-text {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 60px;
    font-weight: 500;
}

/* テーブル全体のスタイル */
.a-table {
    width: 100%;
    border-collapse: collapse;

}

.a-table th, .a-table td {
    padding: 12px 0; /* 左右の余白をなくし、上下をゆったりさせる */
    border-bottom: 1px solid #ccc; /* 境界線 */
    text-align: left;
    vertical-align: top;
}

.a-table th {
    width: 30%; /* 左側の幅を調整 */
    font-weight: normal; /* デザインに合わせて細めに */
    color: #333;
    background: none; /* 背景色を消す */
}

.a-table td {
    color: #333;
    font-weight: normal;
}

/* 一番下の線を少し太くするか、デザイン通りにする */
.a-table tr:last-child th, 
.a-table tr:last-child td {
    border-bottom: 1px solid #ccc;
}

/* --- Footer Access --- */


/* 地図エリアの余白 */
.f-map {
    margin: 40px 0 20px; /* 上に40px、下に20pxの空き */
    width: 100%;
    filter: grayscale(100%); /* デザインに馴染むよう白黒に設定 */
}

.f-map iframe {
    width: 100% !important; /* HTMLのwidth="600"を強制的に100%に上書き */
    display: block;        /* 下の謎の隙間を解消 */
}

/* 下のテキスト説明エリア */
.f-access-desc {
    text-align: left;
    margin-top: 20px;
}

.f-access-desc p {
    font-size: 8px; /* Figmaのスケールに合わせたサイズ */
    line-height: 1.8;
    color: #333;
    margin-bottom: 5px;
}

/* モバイル用の調整（必要に応じて） */
@media (max-width: 768px) {
    .f-map iframe {
        height: 300px; /* スマホでは高さを少し抑える */
    }
}

/* Footer Bottom 調整 */
.f-bottom { background: #f4f4f4; }








/* --- Project Page Specific --- */

/* --- Projectページ専用：ヘッダーの文字色を黒に --- */

/* 1. メニューの文字色を黒にする */
.p-page .main-ul li a {
    color: #333 !important; /* !importantでトップページの白設定を上書きします */
}

/* 2. LINEボタン（右端のボタン）の見た目を調整 */
.p-page .nav-btn a {
    color: #333 !important;
    border: 1px solid #333; /* 枠線を黒に */
    background-color: rgba(0, 0, 0, 0.05); /* ほんのり背景色をつける */
}

/* 3. ホバー（マウスを乗せた時）の色の変化 */
.p-page .main-ul li a:hover {
    opacity: 0.6;
}

.p-page .nav-btn a:hover {
    background-color: #333;
    color: #fff !important; /* ホバー時は反転させて白文字に */
}

/* ヘッダーセクションの余白 */
.p-header-section {
    margin-top: 10px; /* ヘッダーの下から開始 */
    margin-bottom: 80px;
}

/* 2. グリッドリストの調整 */
.project-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 均等な3列 */
    gap: 60px 40px; /* 上下60px、左右40px（少し広げると高級感が出ます） */
    margin: 0 auto 120px; /* 下の余白を維持しつつ中央寄せ */
    width: 100%;
}

/* 事例タイトルのサイズ微調整 */
.p-grid-section .item-title {
    font-size: 18px;
    margin-top: 20px;
    font-weight: bold;
}

.p-grid-section .item-info {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    letter-spacing: 0.05em;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .p-grid-section .project-list {
        grid-template-columns: 1fr; /* スマホでは1列 */
    }
}









/* --- Project Detail 最終調整 --- */

/* ページ全体の背景（デザイン案の落ち着いたトーンに合わせる） */
.p-page {
    background-color: #F1F1F1;
}

/* メインビジュアルを画面横いっぱいに */
.p-detail-mv {
    width: 100%;
    margin-top: 80px; /* ヘッダーとの重なり調整 */
}

.p-detail-mv img {
    width: 100%;
    height: auto;
    display: block;
}

/* レイアウト全体の調整 */
.p-detail-layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 基本は左寄せ */
    position: relative;
}

/* タイトル部分：幅を例えば300pxなどに固定してみる */
.p-detail-head {
    width: 300px; 
    margin-top: 80px;
    margin-bottom: 40px;
}

.p-detail-title {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #333;
}

.p-detail-spec {
    font-size: 14px;
    color: #888;
    margin-top: 15px;
}

/* ギャラリー部分：タイトルの右端（300px）から始まるように左余白を作る */
.p-detail-gallery {
    display: flex;
    flex-direction: column;
    gap: 100px;
    
    /* ここがポイント！タイトルの幅分だけ右にズラす */
    margin-left: 300px; 
    
    /* 画像を少し小さく表示させる（コンテナ幅いっぱいにしない） */
    width: calc(100% - 300px); 
    max-width: 600px; /* お好みの画像の大きさに固定 */
}

.gallery-item img {
    width: 100%; /* 上記で決めた600pxの中で100%表示 */
    height: auto;
}

/* 戻るリンク */
.back-to-project {
    text-align: center;
    margin-bottom: 150px;
}

.back-to-project a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
    transition: opacity 0.3s;
}
.back-to-project {
    /* 画像の開始位置(margin-left)と幅(max-width)を合計した範囲内に収める */
    margin-left: 300px;  /* ギャラリーと同じ左余白 */
    max-width: 600px;   /* ギャラリーと同じ最大幅 */
    
    /* 文字をその範囲の「右端」に寄せる */
    text-align: right; 
    
    margin-top: 50px;   /* 画像との間隔 */
    margin-bottom: 120px;
}

.back-to-project a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    display: inline-block; /* 幅を持たせて右寄せを確実に効かせる */
}

/* スマホ表示の時は中央に戻す */
@media (max-width: 768px) {
    .back-to-project {
        margin-left: 0;
        max-width: 100%;
        text-align: center;
    }
}






/* ==========================================================================
   Blog Page Specific
   ========================================================================== */

/* ブログメインセクションの余白 */
.b-main-section {
    padding-top: 150px;
    padding-bottom: 100px;
}

/* ページ見出し */
.b-page-header {
    margin-bottom: 80px;
    position: relative;
    padding-top: 30px;
}
.b-page-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 30px; height: 1px;
    background-color: #333;
}
.b-page-title .b-en {
    font-size: 28px;
    font-family: serif;
    letter-spacing: 0.1em;
}

/* 3カラムグリッドレイアウト */
.b-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 20px; /* 上下60px, 左右20px */
}

/* 記事カード */
.b-card-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: #D9D9D9; /* 画像がない時のグレー */
    overflow: hidden;
    margin-bottom: 15px;
}
.b-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.b-card:hover .b-card-img img {
    transform: scale(1.05);
}

.b-card-date {
    display: block;
    font-size: 11px;
    color: #888;
    margin-bottom: 5px;
    font-weight: normal;
}
.b-card-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* ページネーション */
.b-pagination {
    margin-top: 100px;
    display: flex;
    justify-content: center;
}
.b-pager-list {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    font-weight: normal;
}
.b-pager-list li.current {
    font-weight: bold;
    border-bottom: 1px solid #333;
}
.b-pager-list a {
    color: #333;
    text-decoration: none;
}
.next-arrow {
    font-size: 18px;
}
.last-page {
    font-size: 12px;
    margin-left: 10px;
}

/* スマホ対応：1列にする */
@media (max-width: 768px) {
    .b-grid {
        grid-template-columns: 1fr;
    }
}

/* 記事カードの画像エリアを中央揃えに設定 */
.b-card-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: #D9D9D9;
    overflow: hidden;
    margin-bottom: 15px;
    /* ここから追加：文字を中央にする設定 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 画像がない時の Coming Soon 文字 */
.b-card-img span {
    color: #888;
    font-size: 12px;
    font-weight: normal;
}




/* Blogグリッド設定（3列並び） */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px; /* 縦・横の隙間 */
    margin-top: 40px;
}

.blog-item a {
    text-decoration: none;
    color: #333;
}

.blog-img {
    aspect-ratio: 3 / 2; /* 画像の比率を固定 */
    background-color: #eee; /* 画像がない時の仮色 */
    overflow: hidden;
}

.blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

.blog-item:hover img {
    transform: scale(1.05); /* ホバー時に少し拡大 */
}

.blog-info {
    margin-top: 15px;
}

.blog-date {
    font-size: 12px;
    color: #888;
    display: block;
}

.blog-title {
    font-size: 16px;
    margin-top: 5px;
    font-weight: normal;
}

/* ページネーション */
.pagination {
    margin-top: 60px;
    text-align: center;
    font-size: 14px;
}

.pagination a, .pagination span {
    margin: 0 10px;
    color: #333;
    text-decoration: none;
}

.pagination .current {
    font-weight: bold;
    border-bottom: 1px solid #333;
}



/* ① パンくずリスト風リンク */
.b-breadcrumb {
    margin-bottom: 30px;
    font-size: 8px;
    color: #888;
}
.b-breadcrumb a {
    text-decoration: none;
    color: #333;
}
.b-breadcrumb a:hover {
    text-decoration: underline;
}

/* ② 記事タイトルと本文 */
.b-article-container {
    max-width: 900px;
    margin-top: 40px;    /* パンくずリストとの間 */
    margin-bottom: 80px; /* 本文との間をしっかり空ける */
}
.b-article-title {
    font-size: 24px;
    font-weight: normal;
    line-height: 1.6;
    margin-bottom: 30px;
}
.b-article-date {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
}
.b-article-body {
    line-height: 2.0;
    font-size: 16px;
}

/* ボタンを中央に配置するための外枠 */
.b-back-to-list {
    display: flex;
    justify-content: center;
    margin: 80px auto; /* 上下の余白 */
    width: 100%;
}

/* ボタン本体（aタグ）のデザイン */
.b-back-to-list a {
    width: 100%;
    max-width: 400px; /* 横幅の最大値 */
    height: 55px;      /* ボタンの高さ */
    background-color: transparent; /* 背景透明 */
    border: 1px solid #333;        /* 黒い細枠 */
    color: #333;                   /* 文字色 */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;           /* カプセル型 */
    text-decoration: none;         /* 下線を消す */
    position: relative;            /* 矢印の配置基準 */
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}

/* 右矢印（▶︎）の配置調整 */
.b-back-to-list .f-arrow {
    position: absolute;
    right: 135px; /* 右端から20pxの位置に固定 */
}

/* ホバー時の反応（お好みで） */
.b-back-to-list a:hover {
    background-color: #333;
    color: #fff;
}



/* ==========================================================================
   Flow Page: Reset & Reconstruction
   ========================================================================== */
 
/* ステップ全体の枠組み（上の線など） */
.flow-step-item {
    border-top: 1px solid #333;
    padding: 60px 0;
    margin-bottom: 40px;
}

.step-text{
	display: flex;
    align-items: flex-end; /* 下線の位置でタイトルと揃える */
    gap: 20px;            /* 番号の線とタイトルの間の距離 */
    margin-bottom: 40px;  /* 下の画像エリアとの距離 */
    text-align: left;
}
	
/* 番号とタイトル */
.step-number {
	display: block;
    width: 57px;          /* 線の長さ */
    border-bottom: 1px solid #000; /* 下線 */
    text-align: right;    /* 数字を線の右端に */
    padding-bottom: 2px;  /* ★数字と線の距離：2px */
    
    /* フォント設定 */
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #333;
    line-height: 1;
    flex-shrink: 0;       /* 線が潰れないように固定 */
}

.step-title {
	font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0;
    padding-bottom: 2px;  /* ★線との高さを合わせるための微調整 */
    line-height: 1.2;
}

/* ★画像と説明文を横並びにする設定 */
.step-body {
    display: flex;
    align-items: flex-start; /* 上揃え */
    gap: 100px; /* 画像とテキストの間の距離 */
	/* ★ここがポイント：
       01の線の長さ(57px) + タイトルとの間の隙間(20px) ＝ 77px
       この分だけ左に余白を作ることで、画像の左端がタイトルの真下に揃います */
    margin-left: 77px;
}

/* 画像エリアの幅を固定 */
.step-icon {
	flex-shrink: 0;
    width: 180px; /* イラストのサイズ */
}

.step-icon img {
    width: 100%;
    height: auto;
	display: block;
}

/* 説明文エリア */
.step-right-content {
    flex: 1;
}

.step-description {
	text-align: left;
    font-size: 15px;
    line-height: 2.2;
    margin: 0;
}


/* 資金計画 */
.step-sub-title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 10px;
    color: #333;
}
/* --- 資金計画エリア：PC/スマホ出し分けの決定版 --- */

/* 1. 【共通】まずはスマホ用グループを「完全に」隠す */
.sp-graph-group {
    display: none !important;
}

/* 2. 【共通】グラフエリア内の画像設定 */
.step-graph-area img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3. 【PC用】1枚画像の設定 */
.pc-graph-img {
    display: block !important;
    width: 60% !important;  /* 親要素に対して60%の幅 */
    height: auto !important; /* アスペクト比を維持 */
    margin: 0 auto !important; /* 左右に自動で余白を作って中央に配置 */
}

/* 4. 【切り替え】425px以下（スマホ）になった時だけ入れ替える */
@media screen and (max-width: 425px) {
    /* PC版を隠す */
    .pc-graph-img {
        display: none !important;
    }

    /* スマホ版を表示する */
    .sp-graph-group {
        display: flex !important; /* display: none を上書き */
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
    }

    .sp-graph-group img {
        /* 幅の指定（60%だとかなり細身になるので、適宜 80%〜90% も検討してください） */
        width: 60% !important; 
        
        /* 修正点：argin ではなく margin に直します */
        margin: 0 auto !important; 
        
        display: block !important; /* 中央寄せを確実にするために追加 */
        height: auto !important;
    }
}
/* 締めくくりセクション全体 */
.flow-closing {
    padding: 100px 0;
    width: 100%;
    background-color: #F1F1F1; /* 必要に応じて背景色を調整 */
}

/* 1200pxのコンテナの中で中身を中央に寄せる */
.flow-closing .closing-content {
    max-width: 900px;   /* テキストが広がりすぎないよう、1200pxより少し絞るのが美しく見えます */
    margin: 0 auto;     /* ★これで1200pxのコンテナ内で中央配置になります */
    text-align: center; /* 中のテキストを中央揃えに */
}

/* 見出し：わからないことがあれば〜 */
.flow-closing h3 {
    font-size: 26px;     /* 指示書に合わせて少し大きめに */
    font-weight: bold;
    margin-bottom: 40px;
    line-height: 1.5;
    color: #333;
    display: block;
}

/* 本文の段落 */
.flow-closing .closing-body p {
    font-size: 16px;
    line-height: 2.2;   /* ゆったりした行間 */
    color: #333;
    margin: 0 auto;
    display: inline-block; /* 幅をテキストに合わせる */
    text-align: center;
}

@media screen and (max-width: 425px) {
    /* 1. 見出し（H3）のサイズを調整して収まりを良くする */
    .flow-closing h3 {
        font-size: 18px !important; /* 26pxから縮小 */
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
        text-align: center !important;
    }

    /* 2. 本文（P）のサイズ調整 */
    .closing-body p {
        font-size: 14px !important;
        line-height: 1.8 !important;
        text-align: center !important; /* スマホでは中央寄せが綺麗です */
    }

    /* 3. 中途半端な改行（br）を制御する */
    .sp-br {
        display: block !important; /* 改行を有効にする */
    }

    /* 280pxなどの極端に狭い画面向けの微調整 */
    @media (max-width: 320px) {
        .flow-closing h3 {
            font-size: 16px !important;
        }
        .closing-body p {
            font-size: 13px !important;
            letter-spacing: -0.02em; /* 文字間を少し詰めてはみ出しを防ぐ */
        }
    }
}

/* PC版（426px以上）ではスマホ用改行を消す */
@media screen and (min-width: 426px) {
    .sp-br {
        display: none !important;
    }
}






/* スマホ対応 */
@media (max-width: 768px) {
    .step-graph-area {
        margin-top: 30px;
        /* スマホで画像が小さくなりすぎる場合はここで調整 */
    }
}

/* スマホでは縦並びに戻す */
@media (max-width: 768px) {
    .step-body {
        flex-direction: column;
        gap: 20px;
    }
    .step-icon {
        width: 150px;
    }
}
























/* --- Contact Page Styles --- */
.c-main-section {
    padding: 120px 0 100px;
}

.c-page-header {
    margin-bottom: 80px;
    position: relative;
    padding-top: 20px;
}

.c-page-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 30px; height: 1px;
    background: #333;
}

.c-page-title .c-en {
    font-size: 24px;
    font-family: serif;
    letter-spacing: 0.05em;
}

.c-form-container {
    max-width: 600px; /* デザイン案に合わせたスリムな幅 */
    margin: 0 auto;
}

.c-form-item {
    margin-bottom: 25px;
}

.c-form-item label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 8px;
}

.c-req {
    color: #d00;
    font-size: 10px;
    margin-left: 5px;
}

/* 入力フィールドの共通スタイル */
.c-form-item input,
.c-form-item select,
.c-form-item textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    background-color: #fcfcfc;
    font-size: 14px;
    outline: none;
}

/* 2カラム（姓・名など）の設定 */
.c-flex-inputs {
    display: flex;
    gap: 10px;
}
.c-flex-inputs input {
    flex: 1;
}

/* ボタンエリア */
.c-btn-area {
    margin-top: 50px;
    text-align: center;
}

.c-submit-btn {
    background-color: #d9d9d9; /* デザイン案のグレー */
    color: #fff;
    border: none;
    padding: 15px 80px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}

.c-submit-btn:hover {
    background-color: #333; /* ホバーで黒に */
}

/* スマホ対応 */
@media (max-width: 600px) {
    .c-flex-inputs {
        flex-direction: column;
    }
}








/* サンキューページ */
.t-main-section {
    padding: 200px 0 150px;
    text-align: center;
}
.t-title {
    font-size: 32px;
    font-family: serif;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}
.t-text {
    font-size: 15px;
    line-height: 2;
    margin-bottom: 50px;
    color: #333;
}
.t-back-btn {
    display: inline-block;
    padding: 15px 50px;
    border: 1px solid #333;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s;
}
.t-back-btn:hover {
    background: #333;
    color: #fff;
}






/* --- フッター調整：ABOUTと同じく画面いっぱいに --- */

.f-contact-bg {
    width: 100%;
    /* 背景画像の設定 */
    background: url('images/footer-bg.JPEG') no-repeat center/cover;
    position: relative;
    padding: 100px 0; /* 上下の余白 */
    color: #fff; /* 全体の文字を白に */
    margin-top: 100px; /* 前のコンテンツとの間隔 */
}
/* --- 1. Contactエリア（背景画像と黒い幕） --- */
.f-contact-bg { 
    position: relative;
    /* 背景画像の設定（拡張子.JPEGを反映） */
    background-image: url('images/footer-bg.JPEG'); 
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    overflow: hidden;
    /* エリア内の基本文字色を白にする */
    color: #fff !important;
}

/* 画像の上に黒い幕（40%）を張る設定 */
.f-contact-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); 
    z-index: 1;
}

/* 中身のコンテンツを幕より手前に出す */
.f-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

.f-contact-flex { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 40px; 
}

/* --- 2. 見出しと白い線 --- */
.f-head { 
    position: relative; 
    min-width: 180px; 
}

.f-en { font-size: 24px; display: block; line-height: 1; }
.f-jp { font-size: 14px; margin-top: 10px; }
.f-text { flex: 1; font-size: 15px; line-height: 2; }

/* --- 3. コンタクトボタン（中央配置） --- */
.f-contact-btn {
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    width: 260px;
    height: 60px;
    padding: 0 30px;
    border: 1px solid #fff;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    transition: all 0.3s;
}

.f-contact-btn:hover {
    background: #fff;
    color: #333;
}

.f-arrow {
    margin-left: 10px;
}

/* --- 4. フッターボトム（ロゴとSNS横並び） --- */
.f-bottom { 
    background-color: #fff; 
}

.f-bottom-flex { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ロゴとSNSを横に並べるための親要素 */
.f-logo-area {
    display: flex;
    align-items: center; /* 上下中央を揃える */
    gap: 40px;           /* H-MADEとアイコンの間の隙間 */
}

.f-logo { 
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #333;
}

/* SNSアイコン自体の並び */
.f-sns {
    display: flex;
    align-items: center;
    gap: 20px;           /* アイコン同士の隙間 */
}

/* アイコン画像のサイズを統一 */
.f-sns img {
    width: 24px;         /* お好みの大きさに調整してください */
    height: auto;
    display: block;
}

.f-sns a:hover img {
    opacity: 0.6;
}

/* コピーライトの設定（位置がズレないように調整） */
.f-copyright {
    font-size: 14px;
    color: #999;
    margin: 0;           /* 余計な余白を消す */
}
/* 全体の左右振り分け */
.f-bottom-flex {
    display: flex;
    justify-content: space-between; /* 左にロゴ・SNS、右にコピーライト */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 40px;
}










/* ==========================================================================
   PC・スマホ共通
   ========================================================================== */

/* --- [1] PC・スマホ共通 / またはPC用の基本設定 --- */

/* スマホ用改行：PCでは隠す */
.sp-br {
    display: none;
}

/* スマホで消すクラス：PCでは表示する */
.u-sp-hide {
    display: block; /* PCでは表示 */
}

/* --- [2] スマホ・タブレット用設定 (1024px以下) --- */
@media (max-width: 1024px) {
    
    /* 横揺れ防止 */
    html, body {
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* スマホの時だけ非表示にする設定 */
    .u-sp-hide {
        display: none !important; /* PCで消えていた原因：!importantで確実に消す */
    }

    /* スマホ用改行：スマホの時だけ有効にする */
    .sp-br {
        display: block;
    }
	


    /* --- Conceptセクションのスマホ対応 --- */
    .concept {
        padding: 60px 80px;
    }

    .concept-content {
        display: block; /* 横並びを解除して縦並びに */
        width: 100%;
    }

    .concept-main-title {
        width: 100% !important;
        margin-bottom: 30px;
    }

    .concept-main-title h2 {
        font-size: 1.5rem; /* スマホで読みやすいサイズに */
        line-height: 1.6;
        text-align: left;
        width: 100%;
        padding: 0 10px; /* 画面端に密着しすぎないよう微調整 */
    }

    /* ボタンエリアを右寄せのままにする */
    .view-all-area {
        justify-content: flex-end;
        width: 100%;
        padding-right: 10px;
    }
	
	/* --- flowセクションのスマホ対応 --- */
	.flow-overview {
    padding: 60px 80px;
}
	/* --- projectsセクションのスマホ対応 --- */
	.projects {
    padding: 60px 80px;
}

	/* --- blogセクションのスマホ対応 --- */
	.b-sec {
    padding: 60px 80px;
}


}

/* --- [2] スマホ・タブレット用設定 (768px以下) --- */
@media (max-width: 768px) {
	.header-inner {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 10px 30px !important;
		
	}
    
    /* 1. 根本原因：セクション全体の左右余白をリセット */
    .concept, 
    .flow-overview, 
    .projects, 
    .b-sec,
    .f-container {
        padding: 60px 80px !important; /* 80pxから20pxに減らして広げる */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. メインビジュアルを横幅いっぱいにする */
    .main-visual,
    .swiper,
    .swiper-container {
        width: 100vw !important; /* 画面幅いっぱい */
        margin-left: calc(-50vw + 50%) !important; /* 親の余白を無視して広げる魔法 */
        margin-right: calc(-50vw + 50%) !important;
    }


    /* 3. メインビジュアル内の文字の位置調整 */
    .mv-copy {
        width: calc(100% - 40px) !important;
        left: 20px !important;
        bottom: 30px !important;
		display: inline-block !important; /* 箱を文字サイズに縮小 */
    }
	
	.mv-copy span {
        padding: 0px 60px !important; /* 80pxから20pxに減らして広げる */
    }

    .mv-title-flex {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        width: 80% !important;
        border-bottom: 1px solid #fff !important;
		margin: 0px 60px !important; /* 80pxから20pxに減らして広げる */
    }
	
	/* --- 2. ハンバーガーメニュー(白い3本線) --- */
    .menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 18px;
    cursor: pointer;
    /* 修正箇所：メニュー本体(999)より大きい数字にする */
    z-index: 1000 !important; 
    position: relative; /* z-indexを有効にするため */
    }
    .menu-btn span {
        display: block;
        width: 100%;
        height: 1px;
        background-color: #fff; /* 白い線 */
        transition: 0.3s;
    }
	
/* ==========================================================================
    スマホ用：ハンバーガーメニューの開閉動作
   ========================================================================== */
    /* 1. ナビゲーションを画面外（右側）に隠す設定に上書き */
    .nav-wrapper {
    display: flex !important;
    position: fixed;
    top: 0;
    right: -100%;
    width: 50%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.9); /* 少し不透明度を上げると文字が見やすいです */
    /* 修正箇所：ボタン(1000)より小さい数字にする */
    z-index: 999 !important; 
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

    /* 2. JavaScriptで 'active' クラスがついた時、画面内にスライド */
    .nav-wrapper.active {
        right: 0 !important;
    }

    /* メニュー内のリストを縦に並べる */
    .main-ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 30 !important;
        margin: 0 !important;
    }

    .main-ul li {
        margin: 1px 0 !important;
    }

    .main-ul li a {
        font-size: 1rem !important; /* スマホで押しやすい大きさ */
        color: #888 !important;
        text-decoration: none;
    }
	

    /* メニュー内のLINEボタンの背景と枠線を消す */
    .main-ul li.nav-btn a {
        background: none !important;    /* 背景を消す */
        border: none !important;        /* 枠線を消す */
        padding: 0 !important;          /* 余白をリセット */
        color: #888 !important;         /* 文字色を他の項目と合わせる */
        font-size: 13px !important;     /* 文字サイズを他の項目と合わせる */
        display: inline !important;     /* 横幅いっぱいのボタン解除 */
    }

    /* LINEボタンだけ他の項目より少し上に隙間を開ける（見やすくするため） */
    .main-ul li.nav-btn {
        margin-top: 30px !important; 
    }


    /* 3. ハンバーガーボタン(3本線)のアニメーション設定 */
    /* 昨日の .menu-btn 設定に「active」時の動きを追記 */
    .menu-btn.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background-color: #333; /* 背景が白になるので線を黒に */
    }
    .menu-btn.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-btn.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background-color: #333;
    }


	
	/* --- 768px以下：施工事例のタイトルサイズ調整 --- */
	.mv-title-flex h2 {
        font-size: 24px !important; /* 現在より一回り小さく設定（適宜調整してください） */
		font-weight: 500 !important;
		letter-spacing: 0.05em !important;
		line-height: 1.4 !important;
		margin-bottom: 5px !important;
		text-align: left !important; /* WordPress版に合わせて左寄せ */
		
	}
	

    /* 4. 768px付近でPCメニューが残るのを防ぐ（ハンバーガーに切り替え） */
    .nav-wrapper {
        display: none; /* 通常は隠す */
    }
    .nav-wrapper.active {
        display: flex !important; /* メニューが開いた時だけ出す */
    }
	
	/* --- 768px以下：タイトルの上の線を中央配置 --- */
	.f-head {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center; /* 中の文字をセンターへ */
	}
	
	
	/* --- 768px以下：コンタクトエリアの文字を中央寄せ --- */
	.f-contact-flex {
		display: flex !important;
		flex-direction: column !important; /* 縦に並べる */
		justify-content: center !important; /* 上下の中央 */
		align-items: center !important;    /* 左右の中央 */
		text-align: center !important;     /* 文字自体もセンター */
		
		min-height: 500px !important;      /* 背景画像が見えるよう高さを確保 */
		padding: 40px 20px !important;
		width: 100% !important;
		margin: 0 auto !important;
		
	}
	
	/* 説明文（あなたらしさを〜）の幅を調整して中央に置く */
	.f-text {
		width: 100% !important;
		max-width: 500px !important; /* 広がりすぎないよう制限 */
		margin: 30px auto !important; /* 上下の余白を作りつつ中央へ */
		font-size:13px;
	}
	
	/* ボタンを中央に配置 */
	.f-btn-area {
		display: flex !important;
		justify-content: center !important; /* 右寄せを解除して中央へ */
		width: 100% !important;
	}
	
	
	/* --- 768px以下：ロゴエリアを縦並びにする --- */
	.f-logo-area {
		display: flex !important;
		flex-direction: column !important; /* 縦に並べる */
		align-items: center !important;    /* センターに揃える */
		gap: 20px !important;              /* ロゴとインスタの間の隙間 */
		margin: 0 auto 20px !important;    /* 下のコピーライトとの間隔 */
	}
	
	/* インスタアイコンの親要素もセンターに */
	.f-sns {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
	}
	
	/* コピーライトも確実にセンターへ */
	.f-copyright {
		text-align: center !important;
		width: 100% !important;
		margin: 0 !important;
		font-size:10px;
	}
}	
	/* --- 425px（スマホ実機サイズ）以下の追加微調整 --- */
    @media (max-width: 425px) {
		
		.header-inner {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 10px 30px !important;
		
	}
		
		    /* 1. 根本原因：セクション全体の左右余白をリセット */
		.concept, 
		.flow-overview, 
		.projects, 
		.b-sec,
		.f-container {
        padding: 20px 30px !important; /* 80pxから20pxに減らして広げる */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
		
        
        /* 1. タイトルの文字サイズをさらに一段落とす */
        .mv-title-flex h2 {
            font-size: 0.95rem !important; /* 425px以下で1行に収まりやすくする */
            letter-spacing: 0.02em !important;
        }
		
		.mv-copy span {
        padding: 0px 10px !important; /* 80pxから20pxに減らして広げる */
    }


        /* 2. VIEW MOREの文字も少し小さく */
        .view-more-link {
            font-size: 9px !important;
            margin-left: 15px !important;
        }

        /* 3. コンセプト文などの余白をさらにタイトに */
        .concept-main-title h2 {
            font-size: 1.1rem !important;
            line-height: 1.5 !important;
        }

        /* 4. 下線の位置を微調整 */
        .mv-title-flex {
			margin: 0px 10px !important; /* 80pxから20pxに減らして広げる */
            padding-bottom: 6px !important;
			width: 20% !important;
        	border-bottom: 0px solid #fff !important;
        }
		
		.view-all-link{
			    display: flex;
				justify-content: space-between;
				align-items: center;
				width: 150px;
				padding-bottom: 10px;
				border-bottom: 1px solid #333;
				text-decoration: none;
				color: #333;
				font-size: 9px !important;
    	}
		
		.b-btn-area { 
				 display: flex;
				 justify-content: flex-end; 
				 margin-top: 40px; 
		}
		
		.b-btn { 
			display: flex; 
			justify-content: space-between; 
			align-items: center;
			width: 150px; 
			border-bottom: 1px solid #333; 
			padding-bottom: 10px; 
			font-size: 9px !important;
			text-decoration: none;
			padding-right: 10px;
		}
		
		/* --- 425px以下のスマホ：ブログを縦並びに調整 --- */
		/* 記事の枠組みを縦並びに変更 */
		.b-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 40px !important;
    }
	
		/* 画像の幅を100%にして大きく見せる */
		.b-item .b-img {
        width: 100% !important;
        height: 250px !important; /* お好みの高さに調整してください */
        margin-right: 0 !important;
        margin-bottom: 20px !important;

        /* 背景画像を中央で切り取るための3点セット */
        background-size: cover !important;     /* 枠いっぱいに広げる */
        background-position: center center !important; /* 【ここ！】真ん中を映す */
        background-repeat: no-repeat !important;
    }
	
	
		/* テキスト部分の幅を100%に */
		.b-item .b-text {
			width: 100% !important;
		}
		
		/* スマホ（425px以下）の時、Contactページの余白を最小限にしてコンテンツを広げる */

    .c-main-section .a-container {
        /* FLOWに合わせつつ、スマホでは窮屈にならない 15px〜20px が理想です */
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    /* フォームのラベル（お名前など）が縦長にならないよう調整 */
    .c-form-container dt, 
    .c-form-container dd {
        width: 100% !important;
        display: block !important;
        text-align: left !important;
    }

		
	}





/* --- ロゴとメニューの干渉・改行を防止する --- */

@media screen and (max-width: 1250px) and (min-width: 768px) {
    /* 1. メニュー全体の横幅を確保し、改行を禁止する */
    .main-ul {
        display: flex !important;
        flex-wrap: nowrap !important; /* 絶対に折り返さない */
        align-items: center !important;
        gap: 60px !important;        /* リスト間の隙間を狭く調整 */
    }

    /* 2. 各メニューの文字サイズと余白を小さくする */
    .main-ul li {
        margin: 0 !important;         /* 既存のマージンをリセット */
    }

    .main-ul li a {
        font-size: 13px !important;    /* 文字を少し小さく */
        padding: 5px 8px !important;   /* クリックエリアを少し狭く */
        white-space: nowrap !important; /* 文字自体の改行も防ぐ */
    }

    /* 3. LINEボタンのサイズを優先的に小さくする */
    .main-ul li.nav-btn a {
        padding: 8px 12px !important;
        font-size: 11px !important;
        min-width: auto !important;
    }

    /* 4. ロゴのサイズを少し絞ってスペースを譲る */
    .logo img {
        width: 130px !important;
    }
}

/* 1000px以下でさらに微調整（ハンバーガーメニューに切り替わる直前） */
@media screen and (max-width: 1050px) and (min-width: 768px) {
    .main-ul {
        gap: 40px !important;
    }
    .main-ul li a {
        font-size: 12px !important;
        padding: 5px 4px !important;
    }
}











/* ==========================================================================
   スマホレスポンシブ　index.html
   ========================================================================== */





/* ==========================================================================
   スマホレスポンシブ　About.html
   ========================================================================== */
 @media screen and (max-width: 768px) {
    /* --- About メインビジュアル --- */
    .a-mv {
        width: 100%;
        height: 50vh; /* スマホでは高さを抑える */
        overflow: hidden;
    }
    .a-mv img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 画像を切り取ってフィットさせる */
    }

    /* --- コンテナ全体の余白 --- */
    .a-container {
        padding: 40px 20px;
    }

    /* --- 各セクションの調整 --- */
    .a-section {
        margin-bottom: 60px;
    }

    .a-content h3 {
        font-size: 1.1rem !important;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .a-content p, .a-intro-text, .a-profile-text {
        font-size: 14px;
        line-height: 1.8;
        text-align: justify; /* 両端揃えできれいに */
    }

    /* --- Flow (流れ) の画像調整 --- */
    .a-flow-image-area {
        margin: 30px 0;
        text-align: center;
    }
    .a-flow-image-area img {
        width: 100% !important;
        height: auto;
    }

    /* --- Flow 詳細リスト (dl) --- */
    .a-flow-detail dl dt {
        font-weight: bold;
        border-left: 3px solid #333; /* アクセントの線 */
        padding-left: 10px;
        margin-top: 20px;
        font-size: 15px;
    }
    .a-flow-detail dl dd {
        margin-left: 0;
        padding-top: 5px;
        font-size: 14px;
        color: #666;
    }

    /* --- 会社概要 (Table) のレスポンシブ化 --- */
    .a-table {
        width: 100%;
        border-top: 1px solid #eee;
        margin-top: 30px;
    }
    .a-table tr {
        display: flex;
        flex-direction: column; /* 縦に並べる */
        border-bottom: 1px solid #eee;
        padding: 15px 0;
    }
    .a-table th {
        width: 100% !important;
        text-align: left;
        font-size: 13px;
        color: #888;
        padding-bottom: 5px;
    }
    .a-table td {
        width: 100% !important;
        font-size: 14px;
        line-height: 1.6;
    }
	
/* ==========================================================================
   スマホレスポンシブ　Project.html
   ========================================================================== */
 
    /* --- Project ヘッダーセクション --- */
    .p-header-section {
        padding: 40px 20px 20px;
    }

    /* --- 事例リストのグリッド調整 --- */
    .project-list {
        display: grid;
        /* スマホでは1列にする（2列にしたい場合は 1fr 1fr） */
        grid-template-columns: 1fr; 
        gap: 40px; /* 事例ごとの上下の間隔 */
        padding: 0 20px 80px;
    }

    /* --- 各事例アイテムの調整 --- */
    .project-item a {
        text-decoration: none;
        color: #333;
        display: block;
    }

    .project-img {
        width: 100%;
        aspect-ratio: 3 / 2; /* 画像の比率を揃える */
        overflow: hidden;
        margin-bottom: 15px;
    }

    .project-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
	
    .item-title {
        font-size: 16px !important;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .item-info {
        font-size: 12px;
        color: #888;
    }
	/* --- Projectページ専用：三本線の色を黒（またはお好みの色）にする --- */
	.p-page .menu-btn span {
    background-color: #333 !important; /* ここで色を指定（例：#333は濃いグレー） */
	}

	/* メニューが開いた時（背景が白くなる場合）も黒を維持 */
	.p-page .menu-btn.active span {
    background-color: #333 !important;
	}
	
	.p-page .nav-wrapper.active .main-ul li a {
    color: #888 !important; /* ここで文字色を指定（黒系） */
}
}

/* iPad Air (820px), Surface Pro (912px) などのタブレット〜スマホ全般 */
@media (max-width: 1024px) {

    /* --- Project一覧の調整 --- */
    .project-list {
        display: flex !important;
        flex-direction: column !important; /* 縦一列に並べる */
        align-items: center !important;    /* 中央揃え */
        width: 100% !important;
        padding: 0 !important;
    }

    .project-item {
        /* 画像サイズを80%表示にする */
        width: 80% !important; 
        max-width: 80% !important;
        margin: 0 auto 50px !important; /* 中央に寄せて、下のアイテムとの間隔を開ける */
    }

    .project-img {
        width: 100% !important; /* 親(80%)に対して100% */
        height: auto !important;
    }

    .project-img img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* タイトルや説明文も80%の幅の中で左揃えにする */
    .item-title, .item-info {
        text-align: left !important;
        width: 100% !important;
        padding: 0 5px; /* 少しだけ内側に余白 */
    }
}

/* ==========================================================================
    Galaxy Fold (280px) 対策：要素の突き出しを強制リセット
   ========================================================================== */
@media (max-width: 280px) {
    /* 1. コンテナの左右余白を最小限(10px)にして、画像を大きく見せる */
    .a-container, 
    .p-grid-section,
    .project-list {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. 画像エリアの固定幅を解除 */
    .project-item,
    .project-img {
        width: 70% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. 画像自体の横幅を「親要素に対して100%」にする */
    .project-img img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover; /* 比率を保ちつつ枠いっぱいに表示 */
    }

    /* 4. 文字サイズが大きすぎてはみ出すのを防ぐ */
    .item-title {
        font-size: 14px !important;
        line-height: 1.4;
    }
    
    .item-info {
        font-size: 11px !important;
    }
	
	footer .f-bottom .f-bottom-flex .f-copyright,
    .f-copyright {
        font-size: 9px !important; /* 10pxよりさらに小さく */
        line-height: 1.4 !important;
        margin-top: 10px !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
}



/* ファイルの一番最後に追記してください */
@media screen and (max-width: 768px) {
    /* 1. コンタクトセクション全体を中央揃えに強制リセット */
    .f-contact-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;   /* 子要素を中央へ */
        text-align: center !important;    /* テキストを中央へ */
        width: 100% !important;
    }

    /* 2. タイトルエリア（Contact / お問い合わせ） */
    .f-head {
        margin: 0 auto 30px !important;
        display: block !important;
        text-align: center !important;
    }

    /* 3. テキストエリア（お気軽にご相談ください...） */
    .f-text {
        margin: 0 auto 40px !important;
        text-align: center !important;
        width: 100% !important;
    }

    .f-text p {
        text-align: center !important;
        display: block !important;
    }

    /* 4. ボタンエリア */
    .f-btn-area {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .f-btn-area a {
        margin: 0 auto !important; /* ボタン自体を中央に */
    }
	
	/* 1. 全体を縦並びにして中央に寄せる */
    .f-bottom-flex {
        flex-direction: column !important; /* 横並びから縦並びに変更 */
        justify-content: center !important;
        align-items: center !important;
        padding: 10px 20px !important;    /* 上下の余白を調整 */
    }

    /* 2. ロゴとSNSアイコンのエリア */
    .f-logo-sns {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* 3. インスタアイコン自体の調整（もし左に寄っていたら） */
    .f-sns {
        margin-top: 10px !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* 4. コピーライト（一番下のテキスト） */
    .f-copy {
        margin: 0 !important;
        text-align: center !important;
        font-size: 10px !important; /* スマホでは少し小さくすると綺麗です */
    }
}