/*topイメージ*/
/* 親コンテナを画面全体の高さに固定 */
.top-section {
    position: relative;
    width: 100%;
    /* 1920px時の理想の高さに合わせて比率を設定 */
    /* 例: 1920:800 の比率なら 800/1920 = 41.66% */
    aspect-ratio: 1920 / 1000; 
	overflow: hidden;
    background-color: #fff;
}
/* 1. 背景の住宅スケッチ（最背面） */
/* 背景画像もコンテナに追従させる */
.top-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
	display: block;        /* 画像の下に生まれる数ピクセルの隙間を消す */
    vertical-align: bottom; /* 行末の余白を強制排除 */
	opacity: 0.5;
}
/* 2. ブラシライン（背景と文字の間） */
.brush-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* 背景より上 */
    pointer-events: none;
	mix-blend-mode:multiply;
}
/* 各SVGの位置調整（イラレの座標に合わせて微調整） */
.brush-svg {
    position: absolute;
    width: 100%;  /* 画面に対してのサイズ感 */
    height: auto;
    right: 0;  /* 右端から少しはみ出す感じ */
    top: -15%;    /* 上からの位置 */
}
.green-line {
    top: -8%;    /* オレンジより少し下げる */
    right: -2%;
}
/* 3. キャッチコピー（最前面） */
/* キャッチコピーの位置固定 */
.top-catch-copy {
    position: absolute;
    /* %ではなく、横幅基準の単位「vw」を使うと比率が維持されやすい */
    top: 30%; 
    left: 40%;
    transform: translate(-50%, -50%);
    width: 50%; 
    max-width: 1100px;
    z-index: 3;
}
/* 線のアニメーション設定（前回分を含む） */
.brush-path {
    fill: none;
    stroke-width: 200; /* 筆っぽく太めに */
    stroke-linecap: round;
	stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw-brush 1s cubic-bezier(0.1, 0, 0.3, 0.2) forwards;

}
.orange-line .brush-path { stroke: #F39800; animation-delay: 0.5s; }
.green-line .brush-path { stroke: #8FC31F; animation-delay: 1.0s; }

	/*ニュース*/
	/* 1. ニュース枠を囲む親要素を新設（またはtop-sectionを調整） */
.top-box {
    position: relative;
    width: 100%;
    max-width: 1920px; /* 画像の最大幅に合わせる */
    margin: 0 auto;    /* 1920px以上のモニターでも中央に寄るように */
    overflow: hidden;
}
	/* 2. ニュース枠本体の修正 */
.topnews {
    position: absolute;
    z-index: 10;
    
    /* 修正の肝：画面中央(50%)を基準にしつつ、1920px時の理想の位置をpxで指定 */
    left: 50%;
    /* 例：1920pxの時、中央からどれくらい右（または左）に寄っていたいか */
    /* 中央ぴったりなら translateX(-50%) のみでOK */
    transform: translateX(-50%); 

    /* 幅を「%」ではなく「px」または「vw」で、1920基準のサイズにする */
    width: 700px; 
    
    /* 上からの位置も、画像のアスペクト比に合わせて固定 */
    top: 65%; /* 1080pxの高さに対しての理想のpx値を指定 */
    
    background: #000;
    padding: 1em;
    border-radius: 15px;
    display: flex;
    align-items: center;
}
	.newsttl {width:13%;}
	.top-news-container ul.news-list {
    margin-bottom: 0 !important;
}
	.news-list {
		margin-left:1.5em;
		flex-grow: 1;
	}
	.nwesli {border-bottom: 1px solid #fff;}
	.newsdate {
		font-size: 15px;
		margin-right: 1em;
	}
	.newsttl {}
	.newslink {
		text-decoration:none;
		color:#fff;
	}
	.news-btn-wrap {text-align:end;}
	.news-more-btn {
		text-decoration:none;
		color:#fff;
		font-size:15px;
	}
	.news-arrow-svg {width:5%;}

/*TOPページ*/
.works-section {
	background-image:url(/wp-content/uploads/2026/03/backtxt1.svg);
	background-repeat:no-repeat;
	background-color: #fcf4ce;
    background-blend-mode: multiply;
}
.service-circles {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
	margin-bottom:5%;
	padding-top:5%;
}
.circle-item {width:22%;}
.works-txt {
	margin-top:0.5em;
	line-height:1.5;
	text-align:justify;
	font-feature-settings: "palt";
}
.works-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top:7%;
	padding-bottom:15%;
}
.btn-capsule {
    flex: 1;               /* 3つの幅を均等にする */
    max-width: 280px;      /* 広がりすぎないように制限 */
    background: #000;
    color: #fff;
    padding: 18px 0;       /* 上下パディングで高さを出す */
    border-radius: 100px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
	font-feature-settings: "palt";
}
.btn-capsule:hover {
    background: #333;
    transform: translateY(-2px); /* 少し浮く演出 */
}
/*TOP強み*/
.top-tsyomi-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
	padding:3% 0 8% 0;
}
/* 1. 背景文字 */
.concept-back-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
    opacity: 0.6;
}
/* 2. オレンジ筆跡レイヤー */
.orange-brush-layer {
    position: absolute;
    top: 55%; /* 文字との重なり具合で調整 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1920px;
    z-index: 2;
}
.brush-svg-wrap {
    width: 100%;
    height: auto;
}
/* マスク用の白い四角形のアニメーション */
.mask-rect {
    animation: reveal-left 1.5s 0.8s ease-out forwards;
}

/* マスクの初期状態：停止 */
.mask-rect {
    /* animationから実行時間を消し、名前だけ残します */
    animation: reveal-left 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.3s;
    animation-play-state: paused; /* ★最初は止めておく */
}

/* 画面に入って .is-active がついたら動かす */
.zigzag-content.is-active .mask-rect {
    animation-play-state: running; /* ★再生開始 */
}
/* --- 以下、既存のパーツ用スタイル --- */
.top-tsyomi-inner-flex {
    position: relative;
    z-index: 10; /* 文字やブラシより前に出す */
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin:0 auto;
}
.top-tsyomi-inner-flex img { width: 40%; height: auto; }
.top-tsyomi-inner-flex-l {width:40%;}
.top-tsyomi-inner-flex-l img {width:100%;}
.top-tsyomi-inner-flex-r { width: 57%; }
.works-title.title2 {margin-bottom:3%;}
.btn-capsule.top-tsyomi { display: block; background: #000; color: #fff; text-decoration: none; border-radius: 50px; padding: 15px 30px; text-align: center;}
.btn-capsule.top-tsyomi:hover {
	background: #333;
    transform: translateY(-2px); /* 少し浮く演出 */
	color:#e53900
}

/*TOPマスター*/
/* 1. 背景文字 */
.top-master-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
	padding:3% 0 8% 0;
}
.master-back-text {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
    opacity: 0.6;
	mix-blend-mode: multiply;
}
.top-master-inner-flex {
    position: relative;
    z-index: 10; /* 文字やブラシより前に出す */
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin:0 auto;
}
.top-tsyomi-inner-flex-l {width:40%}
.top-tsyomi-inner-flex-r {width:57%}
.top-meister-txt {
	font-size:16px;
	text-align:justify;
	font-feature-settings: "palt";
}
.top-master-inner2 {
	width:70%;
	margin:0 auto;
}
.works-title.title3 {margin:3% 0 2% 0;}
.top-tsyomi-btn.shikisai {margin-top:5%;}

/*TOPSNS*/
.top-sns-inner {
    position: relative; /* これが抜けているか、効いていない可能性があります */
    z-index: 10;        /* 念のため前面に出す */
    width: 70%;
    margin: 0 auto;
    overflow: visible;  /* ブラシが枠外にはみ出せるように変更 */
    padding: 3% 0;
}
/* --- 緑ブラシ演出の追加 --- */

/* ブラシの親要素：SNSの内側に配置される想定 */
.green-brush-layer {
    position: absolute;
    /* top: 0; だとSNSセクションの一番上に来ます */
    /* 添付図のような位置なら、bottom付近に配置します */
    bottom: -280px;     
    left: 48%;
    transform: translateX(-50%);
    width: 140%;        /* 画面端まで伸ばすために少し大きく */
    max-width: 1920px;
    z-index: -1;        /* 文字の後ろに回す */
    pointer-events: none;
}

.brush-svg-wrap {
    width: 100%;
    height: auto;
}

/* マスクの初期状態：左（-100%）に隠して止めておく */
.mask-rect-green {
    /* x: 0 !important; ←これを削除！ */
    animation: reveal-right 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.3s;
    animation-play-state: paused; /* 最初は止めておく */
}
/* 画面に入って .top-sns-inner に .is-active がついたら動かす */
.is-active .mask-rect-green {
    animation-play-state: running !important;
}
/* ==========================================
   公式SNS
========================================== */
/* SNS全体 */
.sns-box {
	width: calc(100% - 30px);
	max-width: 900px;
	margin: 35px auto 0;
}

/* 2つの枠を横並び */
.sns-box1 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 20px;
}

/* 同じ幅の2分割 */
.sns-box2 {
	flex: 1 1 0;
	min-width: 0;
}

/* ロゴと文字を縦に配置 */
.sns-box2 .sns-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
	width: 100%;
	min-height: 200px;
	padding: 25px 15px;
	box-sizing: border-box;
	border: 1px solid #dddddd;
	background: #ffffff;
	color: #333333;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}

.sns-box2 .sns-link:hover {
	background: #f7f7f7;
	color: #e53900;
}

/* ロゴ */
.sns-box2 .sns-icon {
	display: block;
	width: 68px;
	height: 68px;
	margin: 0;
	object-fit: contain;
}

/* ロゴの下の文字 */
.sns-link__text {
	font-size: 22px;
	line-height: 1.4;
	text-align: center;
}

/* 矢印は非表示 */
.sns-link__arrow {
	display: none;
}

/* モバイル */
@media screen and (max-width: 767px) {
	.sns-box1 {
		gap: 10px;
	}

	.sns-box2 .sns-link {
		min-height: 145px;
		padding: 20px 10px;
		gap: 10px;
	}

	.sns-box2 .sns-icon {
		width: 52px;
		height: 52px;
	}

	.sns-link__text {
		font-size: 16px;
	}
}


/* ==========================================
   スマートフォン
========================================== */

@media screen and (max-width: 767px) {
}
/*取引メーカー*/
.top-maker-inner {
	width:70%;
	margin:0 auto;
}
.top-maker-ttl {
    display: flex;
    align-items: center; /* 文字とラインの上下中央を合わせる */
    gap: 20px;           /* 文字とラインの間の距離 */
    overflow: hidden;    /* 画面端からはみ出るラインをカット */
    width: 100%;
    font-size: 18px;     /* 「強み」のサイズ感に合わせて調整 */
    margin-bottom:2%;
}
.top-maker-ttl span {
    white-space: nowrap; /* 改行を防ぐ */
    flex-shrink: 0;      /* ラインに押されて文字が潰れるのを防ぐ */
}
.top-maker-ttl::after {
    content: "";
    height: 1px;         /* ラインの太さ */
    background: #000;    /* ラインの色 */
    flex-grow: 1;        /* 残りのスペースをすべて埋める */
    min-width: 100vw;    /* 画面端まで確実に飛ばす */
}

.cf-flex {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
	margin-bottom:2%;
}
.chlogo {width:20%;}
.chtxt {
	font-size: 15px;
    line-height: 1.5;
	width:78%;
	text-align:justify;
	font-feature-settings: "palt";
}
.makerlogo-flex {
	display:flex;
	justify-content: space-between;
	margin-bottom:2%;
		    z-index: 10;
    position: relative;
}
.makerlogo {width:23%;}
.makertxt {
	font-size:15px;
	line-height: 1.5;
	text-align:justify;
	margin-bottom:5%;
}
.makertxt a {
	color:#000;
	text-decoration:none;
}
	text-align:justify;