@charset "utf-8";
/* CSS Document */

/* ==========================
   Two Tone Background
========================== */

.two-tone-bg {
  position: relative;
  width: 100%;
  min-height: 300px;
  display: flex;
}

/* 左：薄グレー 400px */
.two-tone-bg::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 400px;
	height: 100%;
	background-color: #2A2A2A;
	z-index: 0;
}

/* 右：濃グレー */
.two-tone-bg::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: calc(100% - 400px);
	height: 100%;
	background-color: #333434;
	z-index: 0;
}

/* 中身 */
.two-tone-bg .content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0px;
  color: #fff;
}
/* ==========================
   Two Tone Background
========================== */

.two-tone-bg {
  position: relative;
  width: 100%;
  min-height: 300px;
  display: flex;
}

/* 左：薄グレー 400px */
.two-tone-bg::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 400px;
	height: 100%;
	background-color: #202125;
	z-index: 0;
}

/* 右：濃グレー */
.two-tone-bg::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: calc(100% - 400px);
	height: 100%;
	background-color: #171818;
	z-index: 0;
}

/* 中身 */
.two-tone-bg .content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 80px;
  color: #fff;
}
.two-tone-bg {
  position: relative;
  overflow: visible; /* ← 念のため */
}

.two-tone-bg .bg-title {
	position: absolute;
	top: 40px;
	left: 0;
margin-left: -0.4em; /* ← ここが肝 */
	writing-mode: vertical-lr; /* ← 向きそのまま */
	text-orientation: mixed;

	font-size: 150px;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: hsla(0,0%,0%,0.48);
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
	font-family: "Arial Black", Gadget, sans-serif;
}

@media screen and (max-width: 1024px) {

  /* 左の400px部分を消す */
  .two-tone-bg::before {
    display: none;
  }

  /* 右の濃グレーを全面に */
  .two-tone-bg::after {
    left: 0;
    right: auto;
    width: 100%;
  }

  /* 英語タイトルは背景装飾なので非表示 */
  .two-tone-bg .bg-title {
    display: none;
  }

  /* 余白が広すぎる場合の保険 */
  .two-tone-bg .content {
    padding: 40px 20px;
  }
}