@charset "utf-8";
/*===========================================================================

　ヘッダー、グリッド、主要なコンテンツエリアなど、サイトの骨格となるレイアウト関連のスタイルをまとめます。
	
===========================================================================*/

/*　ハンバーガーメニュー
===========================================================================*/
.hamburger-btn {
	position: relative;
	z-index: 150;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 60px;
	min-width:60px;
	height: 60px;
	padding: 15px;
	background-color: var(--color-primary);
	cursor: pointer;
	transition: ease .3s;
}
.hamburger-btn:hover{
	background-color: var(--color-primary-dark);
	}
.hamburger-btn__bar {
	display: block;
	width: 100%;
	height: 1px;
	background-color: #fff;
	transition: transform 0.4s ease, background-color 0.4s ease;
}
.hamburger-btn.is-active .hamburger-btn__bar:nth-of-type(1) {
	transform: translateY(10px) rotate(45deg);
}
.hamburger-btn.is-active .hamburger-btn__bar:nth-of-type(2) {
	transform: scaleX(0);
}
.hamburger-btn.is-active .hamburger-btn__bar:nth-of-type(3) {
	transform: translateY(-10px) rotate(-45deg);
}
/* --- グローバルナビゲーション (モバイル) --- */
.global-nav {
	position: fixed;
	top: 60px;
	right: 0;
	z-index: 120;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0 0 60px;
	background-color: rgba(255, 255, 255, 0.95);
	overflow-y: auto;
	backdrop-filter: blur(5px);
	transform: translateX(100%);
	transition: transform 0.4s ease;
}
.global-nav.is-active {
	transform: translateX(0);
}
.global-nav__list {
	text-align: center;
	border-top: 1px solid var(--color-border);
}
.global-nav__item {
	border-bottom: 1px solid var(--color-border);
}
.global-nav__link {
	display: block;
	padding: var(--space-10) var(--space-10);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1;
	transition: ease .3s;
}
.global-nav__link:hover {
	color: var(--color-primary-dark);
	opacity: 1;
}
@media (min-width: 1200px) {
	.hamburger-btn {
		display: none;
	}
	.global-nav {
		position: static;
		display: flex;
		justify-content: center;
		align-items: center;
		width: auto;
		height: 100%;
		padding: 0;
		background-color: transparent;
		overflow-y: visible;
		backdrop-filter: none;
		transform: none;
	}
	.global-nav__list {
		display: flex;
		align-items: center;
		gap: var(--space-5);
		height: 100%;
		border: none;
	}
	.global-nav__item {
		display: flex;
		align-items: center;
		height: 100%;
		border: none;
	}
	.global-nav__link {
		padding: 0;
	}
	.global-nav__item-main {
		padding: 0;
	}
	.submenu-toggle {
		display: none !important;
	}
	.global-nav__item--contact {
		justify-content: normal;
		width: 180px;
	}
	.global-nav__item--contact .global-nav__link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.25em;
		width: 100%;
		height: 50px;
		color: #fff;
		background-color: var(--color-primary);
		transition: background-color 0.3s ease;
	}
	.global-nav__item--contact .global-nav__link:hover {
		background-color: var(--color-primary-dark);
	}
}

/*　多階層ナビゲーション (ドロップダウン)
===========================================================================*/
.global-nav__item.has-submenu {
	position: relative;
}
.submenu {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease-in-out, margin-top 0.5s ease-in-out;
}
.submenu__link {
	display: block;
	padding: var(--space-8) var(--space-10);
	border-top: 1px solid #eee;
	background-color: #f7f7f7;
	font-size: 1.5rem;
	line-height: 1;
}
.submenu-toggle {
	position: relative;
	display: block; /* モバイルでは常に表示 */
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	color: #fff;
	background-color: var(--color-primary);
	cursor: pointer;
}
.submenu-toggle::before,
.submenu-toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	background-color: #fff;
	transition: transform 0.3s ease;
}
.submenu-toggle::before {
	transform: translate(-50%, -50%);
}
.submenu-toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
.global-nav__item-main {
	position: relative;
}
.global-nav__item.has-submenu .submenu-toggle {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
.global-nav__item.has-submenu.is-open .submenu-toggle::after {
	display: none;
}
.global-nav__item.has-submenu .submenu {
	width: 100%;
}
@media (min-width: 1200px) {
	.global-nav__item.has-submenu .global-nav__link::after {
		content: '\f078';
		margin-left: 0.5em;
		font-family: var(--font-icon);
		font-size: 1.2rem;
		font-weight: 900;
		transition: transform 0.3s ease;
	}
	.global-nav__item.has-submenu:hover .global-nav__link::after {
		transform: rotate(180deg);
	}
	.submenu {
		position: absolute;
		top: 100%;
		left: 50%;
		width: 200px !important;
		height: auto;
		margin-top: -20px;
		max-height: none;
		background-color: #fff;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
		opacity: 0;
		visibility: hidden;
		overflow: visible;
		transform: translateX(-50%) translateY(10px);
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	}
	.site-header--fixed .submenu{
		margin-top: -5px;
		}
	.global-nav__item.has-submenu:hover>.submenu,
	.global-nav__item.has-submenu:focus-within>.submenu {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}
	.global-nav__item.has-submenu:hover .global-nav__link,
	.global-nav__item.has-submenu:focus-within .global-nav__link {
		color: var(--color-primary);
	}
	.submenu__item {
		height: auto;
	}
	.submenu__link {
		display: block;
		border-top: none;
		background-color: transparent;
		transition: background-color 0.3s;
		padding: var(--space-5) var(--space-2);
	}
	.submenu__link:hover {
		background-color: var(--color-bg-light);
	}
}

/*　グリッドシステム
===========================================================================*/

/*
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
  <div></div>
	<div></div>
	<div></div>
</div>
*/

.grid { display: -ms-grid; display: grid; }
/* 基本 */
.grid-cols-1 { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); }
.grid-cols-7 { -ms-grid-columns: (1fr)[7]; grid-template-columns: repeat(7, 1fr); }
.grid-cols-8 { -ms-grid-columns: (1fr)[8]; grid-template-columns: repeat(8, 1fr); }
.grid-cols-9 { -ms-grid-columns: (1fr)[9]; grid-template-columns: repeat(9, 1fr); }
.grid-cols-10 { -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); }
/* sm (480px～) */
@media (min-width: 480px) {
	.sm\:grid-cols-1 { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); }
	.sm\:grid-cols-2 { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); }
	.sm\:grid-cols-3 { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); }
	.sm\:grid-cols-4 { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); }
	.sm\:grid-cols-5 { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); }
	.sm\:grid-cols-6 { -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); }
	.sm\:grid-cols-7 { -ms-grid-columns: (1fr)[7]; grid-template-columns: repeat(7, 1fr); }
	.sm\:grid-cols-8 { -ms-grid-columns: (1fr)[8]; grid-template-columns: repeat(8, 1fr); }
	.sm\:grid-cols-9 { -ms-grid-columns: (1fr)[9]; grid-template-columns: repeat(9, 1fr); }
	.sm\:grid-cols-10 { -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); }
}
/* md (768px～) */
@media (min-width: 768px) {
	.md\:grid-cols-1 { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); }
	.md\:grid-cols-2 { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); }
	.md\:grid-cols-3 { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); }
	.md\:grid-cols-4 { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); }
	.md\:grid-cols-5 { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); }
	.md\:grid-cols-6 { -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); }
	.md\:grid-cols-7 { -ms-grid-columns: (1fr)[7]; grid-template-columns: repeat(7, 1fr); }
	.md\:grid-cols-8 { -ms-grid-columns: (1fr)[8]; grid-template-columns: repeat(8, 1fr); }
	.md\:grid-cols-9 { -ms-grid-columns: (1fr)[9]; grid-template-columns: repeat(9, 1fr); }
	.md\:grid-cols-10 { -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); }
}
/* lg (1200px～) */
@media (min-width: 1200px) {
	.lg\:grid-cols-1 { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); }
	.lg\:grid-cols-2 { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); }
	.lg\:grid-cols-3 { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); }
	.lg\:grid-cols-4 { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); }
	.lg\:grid-cols-5 { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); }
	.lg\:grid-cols-6 { -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); }
	.lg\:grid-cols-7 { -ms-grid-columns: (1fr)[7]; grid-template-columns: repeat(7, 1fr); }
	.lg\:grid-cols-8 { -ms-grid-columns: (1fr)[8]; grid-template-columns: repeat(8, 1fr); }
	.lg\:grid-cols-9 { -ms-grid-columns: (1fr)[9]; grid-template-columns: repeat(9, 1fr); }
	.lg\:grid-cols-10 { -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); }
}
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }
.gap-9 { gap: var(--space-9); }
.gap-10 { gap: var(--space-10); }
.gap-11 { gap: var(--space-11); }
.gap-12 { gap: var(--space-12); }
.gap-13 { gap: var(--space-13); }
.gap-14 { gap: var(--space-14); }
.gap-15 { gap: var(--space-15); }
.gap-16 { gap: var(--space-16); }
.gap-17 { gap: var(--space-17); }
.gap-18 { gap: var(--space-18); }
.gap-19 { gap: var(--space-19); }
.gap-20 { gap: var(--space-20); }
.gap-21 { gap: var(--space-21); }
.gap-22 { gap: var(--space-22); }
.gap-23 { gap: var(--space-23); }
.gap-24 { gap: var(--space-24); }
.gap-25 { gap: var(--space-25); }
.gap-26 { gap: var(--space-26); }
.gap-27 { gap: var(--space-27); }
.gap-28 { gap: var(--space-28); }
.gap-29 { gap: var(--space-29); }
.gap-30 { gap: var(--space-30); }
/* md (768px～) */
@media (min-width: 768px) {
	.md\:gap-1 { gap: var(--space-1); }
	.md\:gap-2 { gap: var(--space-2); }
	.md\:gap-3 { gap: var(--space-3); }
	.md\:gap-4 { gap: var(--space-4); }
	.md\:gap-5 { gap: var(--space-5); }
	.md\:gap-6 { gap: var(--space-6); }
	.md\:gap-7 { gap: var(--space-7); }
	.md\:gap-8 { gap: var(--space-8); }
	.md\:gap-9 { gap: var(--space-9); }
	.md\:gap-10 { gap: var(--space-10); }
	.md\:gap-11 { gap: var(--space-11); }
	.md\:gap-12 { gap: var(--space-12); }
	.md\:gap-13 { gap: var(--space-13); }
	.md\:gap-14 { gap: var(--space-14); }
	.md\:gap-15 { gap: var(--space-15); }
	.md\:gap-16 { gap: var(--space-16); }
	.md\:gap-17 { gap: var(--space-17); }
	.md\:gap-18 { gap: var(--space-18); }
	.md\:gap-19 { gap: var(--space-19); }
	.md\:gap-20 { gap: var(--space-20); }
	.md\:gap-21 { gap: var(--space-21); }
	.md\:gap-22 { gap: var(--space-22); }
	.md\:gap-23 { gap: var(--space-23); }
	.md\:gap-24 { gap: var(--space-24); }
	.md\:gap-25 { gap: var(--space-25); }
	.md\:gap-26 { gap: var(--space-26); }
	.md\:gap-27 { gap: var(--space-27); }
	.md\:gap-28 { gap: var(--space-28); }
	.md\:gap-29 { gap: var(--space-29); }
	.md\:gap-30 { gap: var(--space-30); }
}
/* lg (1200px～) */
@media (min-width: 1200px) {
	.lg\:gap-1 { gap: var(--space-1); }
	.lg\:gap-2 { gap: var(--space-2); }
	.lg\:gap-3 { gap: var(--space-3); }
	.lg\:gap-4 { gap: var(--space-4); }
	.lg\:gap-5 { gap: var(--space-5); }
	.lg\:gap-6 { gap: var(--space-6); }
	.lg\:gap-7 { gap: var(--space-7); }
	.lg\:gap-8 { gap: var(--space-8); }
	.lg\:gap-9 { gap: var(--space-9); }
	.lg\:gap-10 { gap: var(--space-10); }
	.lg\:gap-11 { gap: var(--space-11); }
	.lg\:gap-12 { gap: var(--space-12); }
	.lg\:gap-13 { gap: var(--space-13); }
	.lg\:gap-14 { gap: var(--space-14); }
	.lg\:gap-15 { gap: var(--space-15); }
	.lg\:gap-16 { gap: var(--space-16); }
	.lg\:gap-17 { gap: var(--space-17); }
	.lg\:gap-18 { gap: var(--space-18); }
	.lg\:gap-19 { gap: var(--space-19); }
	.lg\:gap-20 { gap: var(--space-20); }
	.lg\:gap-21 { gap: var(--space-21); }
	.lg\:gap-22 { gap: var(--space-22); }
	.lg\:gap-23 { gap: var(--space-23); }
	.lg\:gap-24 { gap: var(--space-24); }
	.lg\:gap-25 { gap: var(--space-25); }
	.lg\:gap-26 { gap: var(--space-26); }
	.lg\:gap-27 { gap: var(--space-27); }
	.lg\:gap-28 { gap: var(--space-28); }
	.lg\:gap-29 { gap: var(--space-29); }
	.lg\:gap-30 { gap: var(--space-30); }
}

/*　縦積みテーブル
===========================================================================*/

/*
<div class="table-wrapper">
  <table class="table-stacked">
    <thead>
      <tr>
        <th colspan="2">テーブルのタイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">項目名1</th>
        <td>内容が入ります。内容が入ります。</td>
      </tr>
      <tr>
        <th scope="row">項目名2</th>
        <td>内容が入ります。</td>
      </tr>
      <tr>
        <th scope="row">少し長めの項目名3</th>
        <td>内容が入ります。内容が入ります。内容が入ります。</td>
      </tr>
    </tbody>
  </table>
</div>
*/

.table-stacked {
  width: 100%;
  border-collapse: collapse;
}
.table-stacked thead {
	display: table-header-group;
}
.table-stacked thead th {
	border-bottom:none;
	color: #fff;
	background-color: var(--color-primary);
}
.table-stacked tr {
  border: 1px solid var(--color-border);
}
.table-stacked th,
.table-stacked td {
  display: block;
  width: 100%;
  text-align: left;
	padding: var(--space-8);
	background-color: #fff;
	line-height: 1.5;
	vertical-align: middle;
}
.table-stacked th {
  font-weight: bold;
	border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-light);
}
.table-stacked td {
}
@media (min-width: 768px) {
  .table-stacked tr {
    display: table-row;
    border: none;
  }
  .table-stacked th,
  .table-stacked td {
    display: table-cell;
    width: auto;
    border: 1px solid var(--color-border);
		padding: var(--space-5);
  }
  .table-stacked th[scope="row"] {
    width: 20%;
  }
}

/*　横スクロールテーブル
===========================================================================*/

/*
<div class="table-scroll-wrapper">
  <table class="table-scrollable">
    <thead>
      <tr>
        <th scope="col">見出し1</th>
        <th scope="col">見出し2</th>
        <th scope="col">見出し3</th>
        <th scope="col">見出し4</th>
        <th scope="col">見出し5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ1-1</td>
        <td>データ1-2</td>
        <td>データ1-3</td>
        <td>データ1-4</td>
        <td>データ1-5</td>
      </tr>
      <tr>
        <td>データ2-1</td>
        <td>データ2-2</td>
        <td>データ2-3</td>
        <td>データ2-4</td>
        <td>データ2-5</td>
      </tr>
    </tbody>
  </table>
</div>
*/

.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scrollable {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.table-scrollable th,
.table-scrollable td {
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
	line-height: 1.5;
}
.table-scrollable thead th {
  background-color: var(--color-primary);
  color: #fff;
  font-weight: bold;
}
.table-scrollable tbody tr:nth-child(odd) td {
  background-color: var(--color-bg-light);
}
@media (min-width: 768px) {
  .table-scrollable th,
  .table-scrollable td {
    padding: var(--space-5);
  }
}
@media (min-width: 1200px) {
  .table-scroll-wrapper {
    overflow-x: visible;
  }
}

/*　画像 + テキスト
===========================================================================*/

/*
<div class="media-object">
  <div class="media-object__img">
  </div>
  <div class="media-object__content">
  </div>
</div>
<div class="media-object media-object--reverse">
  <div class="media-object__img">
  </div>
  <div class="media-object__content">
  </div>
</div>
*/

.media-object {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: var(--space-10);
}
.media-object__img img {
	width: 100%;
	height: auto;
	display: block;
}
@media (min-width: 480px) {
	.media-object {
		flex-direction: row;
		justify-content: space-between;
		gap: 5%;
	}
	.media-object--reverse {
		flex-direction: row-reverse;
	}
	.media-object--custom1 { align-items: center; text-align: center; gap: 0;}
	.media-object--custom1 .media-object__img { flex: 0 0 50%; }
	.media-object__img {
		flex: 0 0 50%;
	}
	.media-object__content {
		flex: 1;
	}
}
@media (min-width: 768px) {
}

/* アンカーリンクのオフセット (固定ヘッダー用)
===========================================================================*/

/*
<!-- ヘッダーのナビゲーション（例） -->
<header class="site-header--fixed">
  <nav>
    <a href="#section-a">セクションAへ</a>
    <a href="#section-b">セクションBへ</a>
  </nav>
</header>

<main>
  <!-- リンク先のセクションに直接IDとクラスを指定 -->
  <section id="section-a" class="scroll-target">
    <h2>セクションA</h2>
    <p>このセクションの上部が、ヘッダーに隠れることなく表示されます。</p>
  </section>

  <section id="section-b" class="scroll-target">
    <h2>セクションB</h2>
    <p>こちらも同様に、ヘッダーの下にきれいに表示されます。</p>
  </section>
</main>
*/

.scroll-target {
  scroll-margin-top: 60px; /* スマホでのヘッダーの高さ */
}
@media (min-width: 1200px) {
  .scroll-target {
    scroll-margin-top: 100px; /* PCでのヘッダーの高さ */
  }
}