/* ==========================================================================
   11. 下層共通ページヘッダー ＆ パンくずリスト
   ========================================================================== */
.lower-page-header {
    position: relative;
    width: 100%;
    /* ★ご指定のグラデーション（上：45% 〜 下：100%）を背景に適用 */
    background-image: linear-gradient(to bottom, rgba(20, 20, 20, 0.45), rgba(20, 20, 20, 1));
    /* ヘッダーの高さやデザインに応じて、上のパディング（180px〜）を微調整してください */
    padding-top: 200px; 
}

/* --- タイトルエリア --- */
.lower-title-wrap {
    padding-bottom: 90px; /* タイトル下のゆったりとした余白 */
}

.lower-page-title {
    font-family: "Jost", sans-serif;
    font-size: 4.5rem; /* どっしりとしたスタイリッシュな大文字タイポグラフィ */
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* --- パンくずリストのバー（横一文字に線を引く） --- */
.breadcrumb-bar {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* カンプの細い境界線 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 0; /* 上下の絶妙な隙間 */
	font-family: "Jost", sans-serif;
}

/* ① 全体の並びを「横一直線」に強制し、余計な隙間をリセット */
.breadcrumb-list, 
.breadcrumb-list span, 
.breadcrumb-list li {
    display: inline !important; /* Flexをやめて、通常のテキストと同じインライン並びにする */
    padding: 0;
    margin: 0;
    white-space: nowrap; /* テキストの途中で変に改行されるのを防ぐ */
}

/* ② リンク（<a>タグ）のすぐ後ろにだけ、綺麗にスラッシュを結合させる */
.breadcrumb-list a::after {
    content: "/";
    margin: 0 10px;    /* スラッシュの左右の余白 */
    color: #a0a0a0;    /* スラッシュの色 */
    display: inline-block;
}

/* ③ 現在のページ（一番右端の文字）のスタイル調整 */
.breadcrumb-list li.current {
    color: #fff;       /* 文字色（サイトのデザインに合わせて調整してください） */
    margin-left: 0;
}

/* ==========================================================================
   12. 下層レイアウト（Partner・Teams：Flexbox 100%版）
   ========================================================================== */

/* --- 【共通部分】 --- */
.lower-content-section {
	background-image: linear-gradient(to bottom, rgba(20, 20, 20, 1),rgba(20, 20, 20, 0.3), rgba(20, 20, 20, 0.2) ,rgba(20, 20, 20, 0.1));
    color: #fff;
    padding: 120px 0;
}
.activity-section.activity-page, .activity-section.activity-page, privacy-section{
	background-image: linear-gradient(to bottom, rgba(20, 20, 20, 1),rgba(20, 20, 20, 0.3), rgba(20, 20, 20, 0.2) ,rgba(20, 20, 20, 0.1));
}
.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; }
.sidebar-item { margin-bottom: 25px; }
.sidebar-item a { font-family: "Jost", sans-serif; font-size: 14px; text-decoration: none; letter-spacing: 0.05em; color: #666666; transition: color 0.3s ease; font-weight: 300;}
.sidebar-item a:hover { color: #bbb; }
.sidebar-item.is-active a { color: #ffffff; font-weight: 400; }

.lower-main-content {
    flex: 4;
}

/* 各ブロックの区切り */
.content-block {
    padding-bottom: 160px;
}
.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; }

/* Profileリスト */
.profile-spec-list { width: 100%; padding-left: 7%;}
.spec-row { margin-bottom: 55px; }
.spec-row dt { font-family: "Jost", sans-serif; font-size: 14px; color: #888888; letter-spacing: 0.05em; font-weight: 300;}
.spec-row dd { font-size: 1.05rem; color: #ffffff; line-height: 1.7; margin-left: 0; }


/* --- ✨ Partner：ロゴエリア（Flexboxで4カラム並び） --- */
.partner-grid {
    display: flex;
    flex-wrap: wrap; /* 横幅がいっぱいになったら自動で折り返す */
    gap: 20px;       /* アイテム同士の隙間 */
    width: 100%;
	padding-left: 7%;
}

/* 4カラム（横に4個並べる）にするための横幅計算 */
.partner-logo-item {
    /* 隙間（20px）が3箇所分あるので、全体から60pxを引いて4等分 */
    width: calc((100% - 60px) / 4); 
    background-color: #ffffff;
    aspect-ratio: 1 / 1; /* 綺麗な正方形を維持 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.partner-logo-item img {
   max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-dummy {
    font-family: "Jost", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #000000;
    letter-spacing: 0.05em;
}


/* --- Teams：メンバーエリア（Flexboxで2カラム並び） --- */
.teams-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 60px 40px; /* 縦の隙間60px、横の隙間40px */
    width: 100%;
	padding-left: 7%;
}

/* 2カラム（横に2個並べる）にするための横幅計算 */
.team-member-card {
    /* 隙間（40px）が1箇所分あるので、全体から40pxを引いて2等分 */
    width: calc((100% - 40px) / 2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}

.member-kana {
    font-size: 0.75rem;
    color: #888888;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.member-name {
    font-family: "Jost", sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    line-height: 1.1;
}

.member-badge {
    display: inline-block;
    font-family: "Jost", sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
	color: #141414;
    background-color: #ffffff;
    padding: 2px 18px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
}

.member-profile-text {
    font-size: 0.85rem;
    color: #cccccc;
    line-height: 1.8;
    letter-spacing: 0.04em;
    text-align: justify;
}

/* ==========================================================================
   13. サービス詳細ページ（Service Detail）確定版
   ========================================================================== */
.service-detail-section {
    background-image: linear-gradient(to bottom, rgba(20, 20, 20, 1),rgba(20, 20, 20, 0.3), rgba(20, 20, 20, 0.2) ,rgba(20, 20, 20, 0.1));
    color: #ffffff;
    padding: 120px 0 180px 0;
    overflow: hidden; /* 傾いた画像のはみ出しをカット */
}

.service-detail-container {
    display: flex;
    flex-direction: column;
}

/* --- 上部：英語タイトルエリア --- */
.service-main-titles {
    margin-bottom: 20px;
    z-index: 10;
    position: relative;
}

.service-eng-title-top,
.service-eng-title-bottom {
    font-family: "Jost", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.15;
    margin: 0;
}

.service-eng-title-top {
    font-size: 3.2rem;
    margin-bottom: 5px;
}

.service-eng-title-bottom {
    font-size: 3.2rem;
}

/* --- 画像・テキストの親コンテナ（縦並びに変更） --- */
.service-content-wrapper {
    display: flex;
    flex-direction: column; /* 左右にパカーンと分かれないように縦並びにする */
    width: 100%;
    position: relative;
}

/* --- ✨中央：画像ブロック（大きく真ん中に配置） --- */
.service-image-box {
    width: 50%;            /* 理想画像（1枚目）のサイズ感に合わせて50%に固定 */
    margin: 0 auto;        /* 画面の完全な中央に配置 */
    position: relative;
    z-index: 1;
    margin-top: -50px;     /* 英語タイトルに少し食い込ませる */
}

/* 画像を反時計回りに傾ける */
.service-skew-thumb {
    width: 100%;
    aspect-ratio: 1.15 / 1; /* カンプ通りの綺麗な比率 */
    background-color: #222222;
    position: relative;
    transform: rotate(8deg); /* 理想の傾き加減 */
    transform-origin: center center;
	height: 100%;
}

.service-skew-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

/* 「仮画像」テキスト */
.img-placeholder-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(8deg); /* 本体の-8degを打ち消して文字は真っ直ぐ */
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 2;
}

/* --- 下部：テキストを右寄せにするためのラッパー --- */
.service-text-align-wrapper {
    display: flex;
    justify-content: flex-end; /* 中のテキストボックスを完全に「右寄せ」にする */
    width: 100%;
    /* ★重要：上に引き上げて、中央にある画像の下側にガッツリ重ねる */
    margin-top: -30px; 
    position: relative;
    z-index: 5; /* 画像より上に重ねる */
}

/* 右側に配置されるテキストボックス本体 */
.service-text-box {
    width: 50%; /* 5本線グリッドの右側3スパン分に収まるサイズ感 */
    box-sizing: border-box;
}

/* 大きめの日本語リードテキスト */
.service-lead-text {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin-bottom: 25px;
    text-align: justify;
}

/* 小さめの説明文 */
.service-description-text {
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.8;
    letter-spacing: 0.04em;
    text-align: justify;
}

/* ==========================================================================
   14. サービス下層レイアウト（サイドバー追従統合版）
   ========================================================================== */
.service-layout-section {
    color: #ffffff;
}

/* 各ブロック（Service Menu と Features）の区切り余白 */
.service-content-block {
    margin-bottom: 140px; /* Service Menu の下の空き */
}

.features-content-block {
    padding-top: 20px;
}

/* --- Service Menu 内のリストスタイル（カンプ再現 確定版） --- */
.service-menu-list {
    width: 100%;
    margin-top: 30px;
	padding-left: 6.3%;
}

/* 親要素：左右のブロックを横並びにして、両端に寄せる */
.service-menu-item {
    display: flex;
    justify-content: space-between; 
    align-items: flex-start;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 50px 0; /* カンプのゆったりとした上下余白 */
}

.service-menu-list .service-menu-item:nth-child(1){
	border-top: none;
}

.service-menu-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* 左側：ナンバリングとタイトルを包むブロック（幅を全体の約38%に固定） */
.menu-left-block {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column; /* 縦並びにして、番号が上・タイトルが下 */
    align-items: flex-start;
}

/* ナンバリングのスタイル */
.menu-number {
    font-family: "Jost", sans-serif;
    font-size: 1.1rem;
    color: #ffffff;
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin-bottom: 25px; /* 番号とタイトルの間のほどよい隙間 */
}

/* タイトルのスタイル */
.menu-title {
    font-family: "Jost", sans-serif;
    font-size: 2.1rem; /* カンプに合わせた存在感のある大きさに */
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #ffffff;
}

/* 右側：説明文テキスト（幅を全体の約58%に固定してグリッドに沿わせる） */
.menu-text {
    flex: 0 0 58%;
    font-size: 0.9rem;
    color: #cccccc;
    line-height: 1.85;
    letter-spacing: 0.04em;
    text-align: justify;
    margin: 0;
    padding-top: 50px; /* カンプでテキストの1行目がタイトルの下あたりから始まる絶妙な位置調整 */
}

/* --- Features 内のリストスタイル（王道マークアップ再現版） --- */
.features-list {
    width: 100%;
    margin-top: 50px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右側にベースを寄せる（5本線グリッドの2本目からに合わせる） */
    width: 100%;
	padding-left: 6.3%;
}

.feature-item:last-child {
    margin-bottom: 0;
}

/* 1. 上段：画像のボックス（横幅：約82%） */
.feature-img-box {
	width: 100%;
    aspect-ratio: 2.3 / 1;
    background-color: #222222;
    position: relative;
    margin-bottom: 45px;
}

.feature-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

/* 2. 下段：テキストの親要素（ここで左右に綺麗に分割！） */
.feature-text-box {
    display: flex;
    justify-content: space-between; /* 左グループと右テキストを両端に寄せる */
    align-items: flex-start;
    box-sizing: border-box;
}

/* 左カラム：新設したグループ（幅を約38%に固定） */
.feature-title-area {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feature-number {
    display: block;
    font-family: "Jost", sans-serif;
    font-size: 0.9rem;
    color: #888888;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
}

.feature-title {
    font-size: 1.5rem; 
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin: 0;
    line-height: 1.3;
}

/* 右カラム：説明文テキスト（幅を約56%に固定） */
.feature-desc {
    flex: 0 0 56%;
    font-size: 0.9rem;
    color: #cccccc;
    line-height: 1.85;
    letter-spacing: 0.04em;
    text-align: justify;
    margin: 0;
    padding-top: 5px; /* タイトルの1行目と高さを揃えるための微調整 */
}

/* ==========================================================================
   14. プロジェクト下層レイアウト（サイドバー追従統合版）
   ========================================================================== */

.project-content-block{
	background-image: linear-gradient(to bottom, rgba(20, 20, 20, 1),rgba(20, 20, 20, 0.3), rgba(20, 20, 20, 0.2) ,rgba(20, 20, 20, 0.1));
	padding: 120px 0;
}

/* --- Project ギャラリーリスト（3カラム多段折り返し） --- */
.project-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* 3個ごとに自動で下段に回り込ませる */
    justify-content: flex-start; /* 左詰めで並べる */
    gap: 60px 4%; /* 上下余白を60px、左右余白を4%に設定（合計幅を100%にフィットさせる） */
}

/* 各カードアイテム（3カラムなので幅は (100% - 4%*2) / 3 = 30.6% ） */
.project-list .project-card{
    flex: 0 0 30%; /* グリッドの見た目に合わせて微調整（約32%） */
    background-color: #ffffff; /* カードの背景を白に */
    box-sizing: border-box;
    display: flex;
	width: 30%;
}

.privacy-section{
	padding: 120px 0;
	color: #fff;
	font-size: 14px;
}
.privacy-section h3{
	padding-top: 30px;
	font-size: 18px;
	padding-bottom: 15px;
	font-weight: bold;
}
.privacy-section p{
	padding-bottom: 10px;
	font-weight: normal;
}

.single_content{
	padding: 120px 0;
	color: #fff;
	background-image: linear-gradient(to bottom, rgba(20, 20, 20, 1), rgba(20, 20, 20, 0.3), rgba(20, 20, 20, 0.2), rgba(20, 20, 20, 0.1));
}
.single_content img{
	width: 100%;
	height: auto;
}
.single_content .title_head{
	margin: 60px 0 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid #fff;
}
.single_content .title_head .wrap{
	display: flex;
	font-family: "Jost", sans-serif;
}
.single_content .title_head .wrap .category{
	color: #141414;
	display: inline-block;
    font-size: 12px;
    background-color: #fff;
    padding: 6px 18px;
    border-radius: 20px;
	margin-left: 30px;
}
.single_content .title_head h2{
	font-size: 22px;
	margin-top: 10px;
}
.single_content .content_main p, .single_content .content_main img{
	margin-bottom: 30px;
}
.single_content .content_main h1, .single_content .content_main h2, .single_content .content_main h3, .single_content .content_main h4, .single_content .content_main h5{
	margin-bottom: 15px;
}
/* プラグインが出力するスパン要素を横並びにする */
.breadcrumb-list span {
    color: #fff;
}

/* ==========================================================================
   下層ページヘッダー用 レスポンシブ（スマホ対応）
   ========================================================================== */
@media (max-width: 900px) {
    .lower-container { flex-direction: column; }
    .lower-main-content { width: 100%; padding-left: 0; }
    
    /* タブレット環境：ロゴを3カラム（3個並び）にシフト */
    .partner-logo-item {
        /* 隙間（20px）が2箇所分なので、全体から40pxを引いて3等分 */
        width: calc((100% - 40px) / 3);
    }
    
    /* タブレット環境：メンバーを1カラム（100%幅の縦並び）に */
    .team-member-card {
        width: 100%;
    }
	.service-content-block {
        margin-bottom: 0px;
		padding-top: 80px;
    }
	.service-content-block .section-title{
		margin-bottom: 5px;
	}
	.service-menu-list{
		margin-top: 0;
	}
    
    .service-menu-item {
        flex-direction: column; /* スマホでは全体を縦並びにする */
        padding: 45px 0;
    }
    
    .menu-left-block {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 20px;
    }
    
    .menu-number {
        margin-bottom: 20px;
    }
    
    .menu-title {
        font-size: 1.6rem;
    }
    
    .menu-text {
        flex: 0 0 auto;
        width: 100%;
        padding-top: 0; /* スマホでは上部パディングをリセット */
    }
    
    .feature-item {
        align-items: center;
        margin-bottom: 80px;
		padding-bottom: 0;
    }

    .feature-img-box {
        width: 100%; /* スマホでは画面いっぱいに */
        aspect-ratio: 16 / 9; /* スマホで見やすい比率に */
        margin-bottom: 25px;
    }

    .feature-text-box {
        width: 100%;
        flex-direction: column; /* スマホでは縦並びに戻す */
    }

    .feature-text-box > div:first-of-type {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 15px;
    }

    .feature-title {
        font-size: 1.35rem;
    }

    .feature-desc {
        flex: 0 0 auto;
        width: 100%;
        padding-top: 0;
    }
	.project-list .project-card{
		flex: 0 0 48%;
		width: 48%;
	}
}

@media (max-width: 768px) {
    .lower-page-header {
        padding-top: 140px; /* スマホはヘッダーがコンパクトになるので少し詰める */
    }
    
    .lower-title-wrap {
        padding-bottom: 50px;
    }
    
    .lower-page-title {
        font-size: 3rem; /* スマホに合わせてフォントサイズを縮小 */
    }
    
    .breadcrumb-bar {
        padding: 10px 0;
    }
    
    .breadcrumb-list li,
    .breadcrumb-list li a {
        font-size: 0.8rem;
    }
	.lower-content-section{
		padding: 80px 0;
	}
	.service-detail-section {
        padding: 100px 0;
    }
    
    .service-image-box {
        width: 90%;
    }
    .img-placeholder-text {
        transform: translate(-50%, -50%) rotate(3deg);
    }
    
    /* スマホでは重ねるのをやめて、下に綺麗に並べる */
    .service-text-align-wrapper {
        margin-top: 0px;
        justify-content: center; /* 中央揃え */
    }
    
    .service-text-box {
        width: 100%;
        padding-left: 0;
    }
    
    .service-lead-text {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }
	.lower-sidebar{
		display: none;
	}
	/* スマホ環境：ロゴを2カラム（2個並び）にシフト */
    .partner-logo-item {
        /* 隙間（15pxに縮小）が1箇所分なので、全体から15pxを引いて2等分 */
        gap: 15px;
        width: calc((100% - 20px) / 2);
    }
	.contact-section{
		padding-top: 120px;
	}
	.service-eng-title-top, .service-eng-title-bottom{
		font-size: 2rem;
	}
	.feature-item,.service-menu-list{
		padding-left: 0;
	}
	.service-layout-section{
		padding-bottom: 30px;
	}
	.footer-logo img{
		height: 45px;
	}
	.activity-section.activity-page{
		padding-top: 50px;
		padding-bottom: 30px;
	}
	.activity-page .activity-list{
		border-top: none;
	}
	.activity-section.activity-page .activity-item{
		padding: 40px 0 20px;
	}
	.privacy-section, .single_content{
		padding: 100px 0 30px;
	}
	.single_content .title_head {
		margin: 30px 0 50px;
	}
	.single_content .title_head .wrap .category{
		padding: 3px 18px;
	}
	.project-list .project-card{
		flex: 100%;
		width: 100%;
	}
	.project-content-block{
		padding-bottom: 30px;
	}
	.teams-grid, .partner-grid, .profile-spec-list{
		padding-left: 0;
	}
}

@media (max-width: 480px) {
    
    .member-name {
        font-size: 1.8rem;
    }
}