:root {
  --maxw: 1280px;
  --primary: #1f2e6d;
  --primary-800: #192558;
  --accent: #5fa9d8;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --radius: 12px;
}

/* Reset basics */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.75;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Layout helpers */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.btn {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.2), 
    0 4px 6px rgba(0, 0, 0, 0.1);  /* 影を追加 */
  transition: box-shadow 0.2s ease;
}

.btn:hover {
  background: var(--primary-800);
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.25), 
    0 6px 8px rgba(0, 0, 0, 0.15);  /* ホバー時に少し強調 */
}

.btn-soft {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

.section {
  padding: 56px 0;
}

.section-title {
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 28px;
}

/* Header */
.header {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  z-index: 30;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
}

.brand img {
  height: 54px;
  width: auto;
}

.nav {
  display: none;
  gap: 28px;
  font-weight: 700;
}

.nav-cta {
  margin-left: auto;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

@media (min-width: 1280px) {
  .nav {
    display: flex;
  }
  .menu-btn {
    display: none;
  }
}
/* ============================
   Header: 768px以下のときの最適化
   - ロゴ : ボタン = 6 : 4
   - ボタンは折り返さない（white-space: nowrap）
   - 文字は画面幅に応じて自動縮小（clamp）
   ============================ */
@media (max-width: 768px) {
  /* 間隔を少し詰める */
  .header-inner {
    gap: 8px;
    height: auto;              /* ボタンの高さに合わせて可変 */
    padding: 6px 0;
  }

  /* ロゴのブロック比率（6割） */
  .header-inner .brand {
    flex: 0 0 60%;
  }

  /* 右の「お問い合わせ」ボタンのブロック比率（4割） */
  .header-inner .nav-cta {
    flex: 0 0 40%;
    margin-left: 0;            /* 既存の auto を無効化 */
    display: inline-flex;
    justify-content: center;   /* ボタンを中央寄せ */
  }

  /* ボタン本体（折り返さない＆自動縮小） */
  .header-inner .nav-cta.btn {
    width: 100%;
    padding: 10px 12px;
    line-height: 1;            /* 高さを詰めて折返し防止に寄与 */
    white-space: nowrap;       /* 折り返し禁止 */
    font-size: clamp(11px, 2.8vw, 14px); /* 画面幅に応じて縮小 */
    border-radius: 999px;
    text-align: center;
  }

  /* ロゴ画像は自然に縮小 */
  .header-inner .brand img {
    height: 48px;
    width: auto;
  }

  /* ハンバーガー（メニュー）ボタンはそのまま末尾に */
  .header-inner .menu-btn {
    order: 3;                  /* 念のため末尾に固定 */
  }
  /* 768px以下はGridで 6 : 4 : 40px の3カラムに */
@media (max-width: 768px) {
  .header-inner {
    display: grid;                     /* Flex → Grid に切り替え */
    grid-template-columns: 6fr 4fr 40px; /* ロゴ6 / ボタン4 / メニュー40px */
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 6px 0;
  }

  /* ロゴは1列目に */
  .header-inner .brand {
    grid-column: 1 / 2;
    flex: initial;          /* 既存のflex指定を無効化 */
  }

  /* お問い合わせボタンは2列目に */
  .header-inner .nav-cta {
    grid-column: 2 / 3;
    margin-left: 0;         /* 既存のauto/余白を無効化 */
    display: block;
    justify-self: center;   /* ボタンを列内中央に */
  }

  /* ボタン本体の見た目調整（折り返し防止・自動縮小） */
  .header-inner .nav-cta.btn {
    width: 100%;
    padding: 10px 12px;
    line-height: 1;
    white-space: nowrap;                     /* 折り返し禁止 */
    font-size: clamp(11px, 2.8vw, 14px);     /* 画面幅に応じて縮小 */
    border-radius: 999px;
    text-align: center;
    overflow: hidden;                        /* 念のためはみ出し防止 */
    text-overflow: ellipsis;                 /* さらに保険 */
  }

  /* ハンバーガーは3列目に固定・必ず表示 */
  .header-inner .menu-btn {
    grid-column: 3 / 4;
    width: 40px;
    height: 40px;
    margin-left: 0;
    flex-shrink: 0;             /* 潰れ防止 */
    justify-self: end;          /* 右端に寄せる */
    z-index: 2;                 /* ボタンより上に */
  }
}

/* さらに狭い端末(保険) */
@media (max-width: 360px) {
  .header-inner .nav-cta.btn {
    font-size: clamp(10px, 3.4vw, 12px);
    padding: 8px 10px;
  }
}
}

/* さらに狭い端末（念のための保険） */
@media (max-width: 360px) {
  .header-inner .nav-cta.btn {
    font-size: clamp(10px, 3.4vw, 12px);
    padding: 8px 10px;
  }
  .header-inner .brand img {
    height: 44px;
  }
}
.drawer {
  display: none;
  border-top: 1px solid var(--border);
}

.drawer a {
  display: block;
  padding: 16px 8px;
  font-weight: 700;
}

.drawer.show {
  display: block;
}

/* Hero */
.hero {
  position: relative;
}

.hero-media {
  position: relative;
  width: 100%;
  height: 30vw;         /* 48vw の 75% に縮小 */
  min-height: 175px;    /* 260px の 75% */
  max-height: 400px;    /* 560px の 75% */
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media h1 img {
  width: 100%;
  height: auto;
  transform: scale(0.7); /* 縦横30%縮小 */
  transform-origin: center; /* 中央基準で縮小 */
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4)); /* ほんのり影 */
  transition: transform 0.3s ease;
}

.hero-title-box {
  position: absolute;
  top: 15%;               /* 上からの位置（調整可） */
  right: 0;               /* 右端から配置 */
  width: 30%;             /* ページ幅の30%を黒帯にする */
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.5); /* 半透明の黒帯 */
  display: flex;          /* テキストを縦中央揃えに */
  align-items: center;
  border-radius: 4px 0 0 4px; /* 左端を少し丸める */
}

.hero-title-box-top {
  position: absolute;
  right: 3%;       /* 左寄せに変更 */
  top: 5%;       /* 上寄せに変更 */
  left: auto;    /* 右側の設定を無効化 */
  bottom: auto;   /* 下側の設定を無効化 */
}

.hero-title {
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  margin: 0;
  line-height: 1.4;
}

@media (min-width: 1280px) {
  .hero-title {
    font-size: 34px;   /* PC時はやや大きめ */
  }
}

/* Home */
/* メニュー部分（pill-links） */
.pill-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 50px;
}

.pill-links a {
  background: var(--primary);
  color: #fff;
  padding: 16px;
  border-radius: 14px;
  text-align: center;
  font-weight: 800;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.2),   /* 下に落ちる影（強め） */
    0 4px 6px rgba(0, 0, 0, 0.1);   /* 広がる影（柔らかめ） */
}

.pill-links a:hover {
  background: var(--primary-800);
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.25), 
    0 6px 8px rgba(0, 0, 0, 0.15);  /* ホバー時に少し強調 */
}

/* 768px 以上で横並び4つ */
@media (min-width: 768px) {
  .pill-links {
    grid-template-columns: repeat(4, 1fr);
  }
}

.greet {
  max-width: 980px;
  margin: 40px auto;
  text-align: center;
}

.greet h2 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 16px;
}


/* ごあいさつ本文の横幅を75%にして中央寄せ */
.greet p {
  max-width: 75%;
  margin: 0 auto;       /* ブロックを中央に */
  text-align: center;   /* 文章も中央揃え */
}

@media (max-width: 768px) {
  .greet p {
    max-width: 100%;  /* スマホは全幅 */
  }
}

.greet .hr {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

.info-board {
  text-align: center;
  margin: 26px auto;
}

.info-board .btn-soft {
  padding: 14px 40px;
  font-weight: 800;
}

.btn-soft {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.2),   /* 下に落ちる影 */
    0 4px 6px rgba(0, 0, 0, 0.1);   /* 広がる影 */
  transition: box-shadow 0.2s ease;
}

.btn-soft:hover {
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.25),  /* 少し強めに */
    0 6px 8px rgba(0, 0, 0, 0.15);
}
.news-list {
  max-width: 1000px;
  margin: 22px auto;
}

.news-item {
  padding: 16px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.news-item strong {
  color: var(--text);
  margin-right: 10px;
}

.big-cta {
  text-align: center;
  margin: 48px 0;
}

.big-cta .btn {
  font-size: 18px;
  padding: 18px 28px;
}

/* Footer (色統一＋余白コンパクト) */
.footer {
  background: #1d236d;
  color: #fff;
  padding: 30px 0 0;
}

.footer-top {
  display: grid;
  gap: 20px;
  padding-bottom: 20px;
}

.footer-left {
  font-size: 14px;       /* 全体を少し小さめに */
  line-height: 1.6;      /* 行間を詰める */
  font-weight: 400;      /* 通常の太さに */
}

.footer-left .title {
  font-size: 16px;       /* 見出しだけ少し大きめ */
  font-weight: 400;      /* 見出しは太字 */
  margin-bottom: 6px;    /* 下の余白を小さめに */
}

.footer-left .office-name {
  font-size: 20px;       /* 事務所名を大きめに */
  font-weight: 700;      /* 太字で強調 */
  margin-bottom: 8px;
}

/* 共通：縦一列 */
.footer .cols {
  display: block;
}

.footer .cols ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer .cols li {
  padding: 2px 0;
}

.footer .cols a {
  display: inline-block;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}

.footer .cols a:hover {
  text-decoration: underline;
}

.footer .address {
  font-size: 13px;
  color: #fff;
  line-height: 1.6;
}

.copy {
  display: flex;
  align-items: center;   /* 上下中央揃え */
  justify-content: center; /* 横も中央揃え */
  height: 30px;          /* 好きな高さを指定（例：40px） */
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  text-align: center;
  padding-top: 8px;
  background: #fff;
  color: #1d236d;
  font-size: 12px;
  margin-top: 10px;
}

/* 768px 以上で横並びにする */
@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: 3.5fr 1.5fr;
  }
  .footer .cols {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .footer {
    text-align: center;
  }
  .footer .address {
    text-align: center;
  }
  .footer .cols {
    align-items: center; /* 中央寄せ */
  }
  .footer .cols ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
  }
  .footer .cols li {
    display: inline-block; /* li を中央寄せで並べる */
    margin: 4px 8px;
  }
}

/* Overview */
.details {
  display: grid;
  gap: 20px;
}

.row {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #ddd;
}

.label {
  width: 200px; /* ラベル部分の幅固定 */
  font-weight: 600;
}


/* === 事務所概要＋代表者写真レイアウト === */
.container.details {
  display: grid;
  grid-template-columns: 60% 40%; /* 左60%（テキスト）右40%（写真） */
  column-gap: 30px;
  align-items: start;
}

/* 右カラム（写真）を中央寄せに */
.container.details .overview-photo-shirasaka {
  display: flex;
  justify-content: center; /* 横方向中央寄せ */
  align-items: start;       /* 縦方向は上寄せ（必要なら center に） */
}

/* 写真サイズの調整 */
.container.details .overview-photo-shirasaka img {
  width: 70%;           /* 枠の40%内でさらに70%のサイズ（お好みで調整） */
  height: auto;
  border-radius: 8px;
  display: block;
}

/* --- スマホでは縦並びに変更 --- */
@media (max-width: 767px) {
  .container.details {
    grid-template-columns: 1fr;
  }

  .container.details .overview-photo-shirasaka {
    justify-content: center;
  }

  .container.details .overview-photo-shirasaka img {
    width: 65%;
  }
}

/* === 所在地セクション === */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}

/* 枠で高さを決める：常に 16:9、最大でも 400px を超えない */
.overview-grid .overview-map,
.overview-grid .overview-photo {
  position: relative;          /* ← 子要素を絶対配置でフィットさせるため */
  width: 100%;
  aspect-ratio: 15 / 11;        /* 比率固定 */
  max-height: 400px;           /* 1260px以上の見た目を超えない */
  overflow: hidden;            /* はみ出し防止 */
}

/* 中身を枠いっぱいにフィット（地図＆写真） */
.overview-grid .overview-map iframe,
.overview-grid .overview-photo img {
  position: absolute;
  inset: 0;                    /* top/right/bottom/left:0 のショートハンド */
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* 1200px以上は 400px で固定（見た目を揃える） */
@media (min-width: 1200px) {
  .overview-grid .overview-map,
  .overview-grid .overview-photo {
    aspect-ratio: auto;        /* 比率制御解除 */
    height: 400px;             /* 固定 */
    max-height: none;          /* 上の上限は不要 */
  }
}

/* モバイルは1カラム＆やや縦長（必要なければ削除OK） */
@media (max-width: 767px) {
  .overview-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .overview-grid .overview-map,
  .overview-grid .overview-photo {
    aspect-ratio: 4 / 3;       /* 少し縦長に */
  }
}




/* Services */
.services ul {
  margin: 0 auto;
  max-width: 960px;
  padding-left: 1.2em;
}

.services li {
  margin: 10px 0;
}

.services p {
  margin-top: 30px;
  text-align: center;
  font-weight: bold;
}

/* ---------- Price table ---------- */

/* セクション見出し（ページ内タイトル） */
.section-title.price-title {
  background: #1F2E6D;
  color: #fff;
  padding: 14px;
  border-radius: 6px;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
}

/* テーブル枠 */
.table-wrap {
  overflow: auto;
  border: 1px solid #d7dde6;
  border-radius: 8px;
  background: #fff;
}

table.price-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 920px;
}

th,
td {
  border: 1px solid #d7dde6;
  padding: 10px 14px;
  vertical-align: middle;
  font-size: 16px;
  background: #fff;
}

/* 列ヘッダー：背景#99ccff、黒文字 */
thead th {
  background: #99ccff;
  color: #000;
  text-align: center;
  font-weight: 700;
}

/* 列幅 */
.price-table col:nth-child(1) { width: 28%; }
.price-table col:nth-child(2) { width: 24%; }
.price-table col:nth-child(3) { width: 26%; }
.price-table col:nth-child(4) { width: 22%; }

/* 交互の行背景（薄い） */
tbody tr:nth-child(even) td {
  background: #fafbfd;
}

/* 大分類行：4セルに分割し、左端セルのみ色付き */
.section-row td {
  background: #fff;
  border: none;
  padding: 0;
}

.section-row td.section-cell {
  padding: 6px 12px;
  text-align: center;
  font-weight: 700;
  border-right: 1px solid #d7dde6;
}

/* 大分類カラー（左端セル） */
.section-row.real-estate  td.section-cell { background: #c3d69b; } /* 不動産登記 */
.section-row.inheritance td.section-cell { background: #fcd5b5; } /* 相続手続き */
.section-row.commercial  td.section-cell { background: #e6b9b8; } /* 商業登記 */
.section-row.trial       td.section-cell { background: #b3a2c7; } /* 裁判手続き */


/*job*/
.job_txt{
  text-align: center;
}



/* ================== ==========
   全体テキストを16pxに統一
   （ボタンや見出しは除外）
   ============================ */
body {
  font-size: 16px;
}

/* 主要テキスト要素を16pxに上書き */
.footer-left,
.footer .cols a,
.footer .address,
.row,
.services li,
.services p,
.news-item,
.news-item strong,
.price-table td,
.price-table th {
  font-size: 16px !important;
  line-height: 1.75;
}


/* ==========================================================================
  お問合せ
  ========================================================================== */
#mailformpro{
	margin-bottom: 80px;
}

form#mailformpro .mailform tbody tr td label.mfp_not_checked {
	padding: 3px 2rem;
	border: none;
}

.mailform {
	width: 100%;
	border-top: solid 1px #ccc;
}

#mailformpro .mailform tbody {
	font-size: 16px;
}

#mailformpro .mailform tbody tr th {
	min-width: 220px;
	width: 25%;
	background-color: #F4F4F4;
	/*
	  position: relative;
	  background-clip: padding-box;
	  */
}

#mailformpro .mailform tbody tr th span {
	font-size: 75%;
	padding: 0 10px;
	vertical-align: middle;
	background-color: #e62c2c;
	border-radius: 5px;
	color: #fff;
	margin-left: 7px;
	float: right;
}

#mailformpro .mailform tbody tr th,
#mailformpro .mailform tbody tr td {
	padding: 1rem 1.5rem;
	border-bottom: solid 1px #ccc;
	line-height: 32px;
}

#mailformpro .mailform tbody tr td .input-text-md {
	width: 60%;
  padding: 10px;
}

#mailformpro .mailform tbody tr td input {
  border-radius: 5px;
}

#mailformpro .mailform tbody tr td .input {
	width: 80% !important;
	height: 150px !important;
  padding: 10px;
  border-radius: 5px;
}

#mailformpro .mailform tbody tr td .input-textarea {
	width: 80% !important;
	height: 150px !important;
  padding: 10px;
  border-radius: 5px;
}

/* 入力欄の外側に5pxの余白を追加 */
#mailformpro .mfp_element_text,
#mailformpro .mfp_element_email,
#mailformpro .mfp_element_tel,
#mailformpro .mfp_element_number,
#mailformpro .mfp_element_date,
#mailformpro .mfp_element_textarea,
#mailformpro .mfp_element_password,
#mailformpro .mfp_element_select-one {
  margin: 5px 0;   /* 上下5pxずつ余白 */
}

@media screen and (max-width: 768px) {
	#mailformpro {
		margin-bottom: 40px;
		max-width: 100%;
	}

	#mailformpro .mailform {
		max-width: 100%;
		table-layout: fixed;
	}

	#mailformpro .mailform tbody {
		max-width: 100%;
		font-size: 16px;
	}

	#mailformpro .tbl_basic_form tbody tr {
		border-top: 1px solid #ddd;
	}

	#mailformpro .tbl_basic_form tbody tr:first-child {
		border-top: none;
	}

	#mailformpro .mailform tbody tr th {
		border: none;
		border-bottom: 1px dotted #ddd;
		background: #8ea8e3;
		font-weight: bold;
	}

	#mailformpro .mailform tbody tr th,
	#mailformpro .mailform tbody tr td {
		width: 100%;
		display: block;
		padding: 1rem;
    border: none;
    line-height: 18px;
	}

	form#mailformpro p {
		width: 100%;
		overflow-wrap: break-word !important;
		word-break: break-all !important;
	}

	#mailformpro .mailform tbody tr td ul {
		width: 100%;
		font-size: 1.6rem;
	}

	#mailformpro .mailform tbody tr td ul li {
    font-size:14px;
		padding: 5px;
    line-height:1.2em;
	}

	form#mailformpro label {
		overflow-wrap: break-word !important;
		word-break: break-all !important;
		white-space: wrap !important;
		padding: 0 !important;
	}

	#mailformpro .mailform tbody tr td ul li label {
		display: inline-block;
	}

	#mailformpro .mailform tbody tr td ul li input {
		margin: 0.4em;
		vertical-align: top;
	}

	#mailformpro .mailform tbody tr td .input-text-md {
		width: 90%;
	}

	#mailformpro .mailform tbody tr td .input-textarea {
		width: 100% !important;
		height: 100px !important;
	}

	form#mailformpro .mailform tbody tr td label.mfp_not_checked {
		padding: 3px 2rem;
		border: none;
	}
}

/* ==========================================================================
  お問合せ ありがとうございました。
  ========================================================================== */
.thanks_para {
	text-align: center;
	margin-bottom: 60px;
}

.contact_adress {
	text-align: center;
	margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
	.thanks_para {
		text-align: center;
		line-height: 1.75;
		margin-bottom: 30px;
	}

	.contact_adress {
		text-align: center;
		line-height: 1.75;
		margin-bottom: 120px;
	}
}

/* ---- 料金表：スマホは横スクロール ---- */
@media (max-width: 767px) {
  .table-wrap {
    overflow-x: auto;                 /* 横方向にだけスクロール */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;/* iOSの慣性スクロール */
  }

  /* テーブルに最低幅を持たせ、親より広ければスクロールが出る */
  .table-wrap > table {
    min-width: 920px;  /* 既存の設計に合わせる（必要なら調整） */
  }

  /* お好み：スクロールバーの見た目（対応ブラウザのみ） */
  .table-wrap::-webkit-scrollbar {
    height: 8px;
  }
  .table-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
  }
}

/* PC ではスクロールを無効（見た目はこれまで通り） */
@media (min-width: 768px) {
  .table-wrap {
    overflow: visible;
  }
}


/* スマホ時のヒーロータイトル調整 */@media (max-width: 768px) {
  .hero-title-box {
    width: 60%;              /* ★ スマホ時は帯を画面の60%に */
    right: 0;                /* 右端にピッタリ配置 */
    left: auto;              /* 左寄せを無効化 */
    padding: 8px 12px;       /* 内側余白 */
    background: rgba(0,0,0,0.55); /* 半透明の黒帯 */
    display: flex;
    justify-content: flex-start; /* ★ テキストを帯の左に寄せる */
    align-items: center;
    border-radius: 4px 0 0 4px; /* 左端だけ丸み */
  }

  .hero-title {
    font-size: 18px;         /* 横に収めるためフォントサイズ調整 */
    line-height: 1.3;
    color: #fff;
    margin: 0;
    white-space: nowrap;     /* 改行を禁止して横表示 */
    text-align: left;        /* 左寄せ */
  }
}