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

　サイト内で繰り返し使われる、独立したUI部品（パーツ）のスタイルをまとめます。
	
===========================================================================*/

/*　パンくずリスト
===========================================================================*/

/*
<nav aria-label="パンくずリスト" class="breadcrumb">
  <ol class="breadcrumb__list inner">
    <li class="breadcrumb__item">
      <a href="/" class="breadcrumb__link">ホーム</a>
    </li>
    <li class="breadcrumb__item">
      <a href="/category/" class="breadcrumb__link">カテゴリ一覧</a>
    </li>
    <li class="breadcrumb__item" aria-current="page">
      現在のページ
    </li>
  </ol>
</nav>
*/

.breadcrumb {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-light);
}
.breadcrumb__list {
	display: flex;
	align-items: center;
  gap: 5px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f0f0f0;
}
.breadcrumb__list::-webkit-scrollbar {
  height: 4px;
}
.breadcrumb__list::-webkit-scrollbar-track {
  background: #f0f0f0;
}
.breadcrumb__list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}
.breadcrumb__item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 1.2rem;
	color: var(--color-text);
}
.breadcrumb__item:not(:first-child)::before {
  font-family: var(--font-icon);
  font-weight: 300;
  content: "\f105";
  color: #ccc;
}
.breadcrumb__link {
  transition: text-decoration 0.3s;
}
.breadcrumb__link:hover {
	color: var(--color-primary);
  text-decoration: underline;
}
.breadcrumb__item[aria-current="page"] {
  font-weight: bold;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .breadcrumb__list {
    overflow-x: visible;
    white-space: normal;
  }
  .breadcrumb__item {
    font-size: 1.5rem;
  }
}

/* アンカーナビ
===========================================================================*/

/*
<nav aria-label="ページ内ナビゲーション" class="anchor-nav">
  <ul class="anchor-nav__list">
    <li class="anchor-nav__item">
      <a href="#section1" class="anchor-nav__link">
        <i class="fa-solid fa-circle-info"></i>
        <span>概要</span>
      </a>
    </li>
    <li class="anchor-nav__item">
      <a href="#section2" class="anchor-nav__link">
        <i class="fa-solid fa-star"></i>
        <span>特徴</span>
      </a>
    </li>
    <li class="anchor-nav__item">
      <a href="#section3" class="anchor-nav__link">
        <i class="fa-solid fa-map-location-dot"></i>
        <span>アクセス</span>
      </a>
    </li>
    <li class="anchor-nav__item">
      <a href="#section4" class="anchor-nav__link">
        <i class="fa-solid fa-envelope"></i>
        <span>お問い合わせ</span>
      </a>
    </li>
  </ul>
</nav>
*/

.anchor-nav {
}
.anchor-nav__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px;
}
.anchor-nav__item {
	border: none;
}
.anchor-nav__item:nth-child(3n),
.anchor-nav__item:nth-child(n+4) {
	border: none;
}
.anchor-nav__link,
.anchor-nav__link--active {
	display:block;
	text-align:center;
	padding: 1em 1em;
	background-color: #F2F5F8;
	color: #666;
	border-radius: 3px;
	font-family: var(--font-sans);
	font-size: 1.2rem;
	font-weight: 500;
	line-height:1.2;
	transition: background-color 0.3s, color 0.3s;
}
.anchor-nav__link--active{
	background-color:var(--color-primary);
	color: #fff;
	}
.anchor-nav__text{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	}
.anchor-nav__link:hover {
	background-color:var(--color-primary);
	color: #fff;
}
@media (min-width: 768px) {
	.anchor-nav__list {
		/* PC: 5カラム */
		grid-template-columns: repeat(5, 1fr);
		gap: 10px;
		padding: 0;
	}
	.anchor-nav__link {
	}
}
@media (min-width: 1200px) {
}

/*　ニュース一覧
===========================================================================*/

/*
<div class="news">
  <ul class="news-list">
    <li class="news-list__item">
      <a href="#" class="news-list__link">
        <time class="news-list__date" datetime="2025-07-25">2025.07.25</time>
        <span class="news-list__category news-list__category--info">お知らせ</span>
        <p class="news-list__title">ホームページをリニューアル致しました。今後ともよろしくお願いいたします。</p>
      </a>
    </li>
    <li class="news-list__item">
      <a href="#" class="news-list__link">
        <time class="news-list__date" datetime="2025-07-20">2025.07.20</time>
        <span class="news-list__category news-list__category--event">イベント</span>
        <p class="news-list__title">夏期限定キャンペーンを開始しました。</p>
      </a>
    </li>
    <li class="news-list__item">
      <div class="news-list__link"> <time class="news-list__date" datetime="2025-07-15">2025.07.15</time>
        <span class="news-list__category news-list__category--other">その他</span>
        <p class="news-list__title">システムメンテナンスのお知らせ（リンク無し）</p>
      </div>
    </li>
  </ul>
</div>
*/

.news-list {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.news-list__item:not(:first-child) {
   border-top: 1px solid var(--color-border);
}
.news-list__link {
	position:relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	padding: var(--space-5);
	color: var(--color-text);
	transition: background-color 0.3s;
	font-size: 1.5rem;
}
.news-list__link[href]::after {
	font-family: var(--font-icon);
	font-weight: 200;
	content: "\f054";
	position:absolute;
	right:var(--space-5);
	top:50%;
	margin-top:-1em;
	color: #ccc;
	transition: color 0.3s;
}
.news-list__link[href]:hover {
	background-color: var(--color-bg-light);
}
.news-list__link[href]:hover::after {
	color: var(--color-primary);
}
.news-list__date {
	flex-shrink: 0;
}
.news-list__category {
	flex-shrink: 0;
  padding: 0.25em 0.75em;
  font-size: 1.2rem;
  text-align: center;
	min-width: 100px;
	border:1px solid var(--color-primary);
	color:var(--color-primary);
	}
	/*
	.news-list__category--1 { color: #fff; background-color: var(--color-primary); }
	.news-list__category--2 { color: #fff; background-color: var(--color-primary); }
	.news-list__category--3 { color: #fff; background-color: var(--color-primary); }
	*/
.news-list__title {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	order: 3;
}
@media (min-width: 768px) {
  .news-list__link {
		flex-wrap: nowrap;
		align-items: center;
  }
}

/* ページネーション
===========================================================================*/

/*
<nav aria-label="ページネーション" class="pagination">
	<ol class="pagination__list">
		<li class="pagination__item">
			<a href="#" class="pagination__link"><i class="fa-regular fa-chevron-left"></i></a>
		</li>
		<li class="pagination__item">
			<a href="#" class="pagination__link">1</a>
		</li>
		<li class="pagination__item">
			<span class="pagination__link pagination__link--current" aria-current="page">2</span>
		</li>
		<li class="pagination__item">
			<a href="#" class="pagination__link">3</a>
		</li>
		<li class="pagination__item">
			<a href="#" class="pagination__link"><i class="fa-regular fa-angle-right"></i></a>
		</li>
	</ol>
</nav>
*/

.pagination__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
}
.pagination__link {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5em;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--color-primary);
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
.pagination__link--current {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
a.pagination__link:hover {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
@media (min-width: 768px) {
  .pagination__link {
    font-size: 1.5rem;
  }
}

/* サムネイル (アスペクト比固定)
===========================================================================*/

/*
<!-- 16:9 のサムネイル -->
<div class="thumbnail thumbnail--16-9">
  <img src="https://placehold.co/1600x900/74c69d/fff?text=16:9" alt="16:9の画像">
</div>
<!-- 4:3 のサムネイル -->
<div class="thumbnail thumbnail--4-3">
  <img src="https://placehold.co/800x600/3b82f6/fff?text=4:3" alt="4:3の画像">
</div>
<!-- 1:1 (正方形) のサムネイル -->
<div class="thumbnail thumbnail--1-1">
  <img src="https://placehold.co/800x800/6b7280/fff?text=1:1" alt="1:1の画像">
</div>
*/

.thumbnail {
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-bg-light);
}
.thumbnail--16-9 { aspect-ratio: 16 / 9; }
.thumbnail--4-3  { aspect-ratio: 4 / 3; }
.thumbnail--1-1  { aspect-ratio: 1 / 1; }
.thumbnail--3-2  { aspect-ratio: 3 / 2; }
.thumbnail img {
  width: 100%;
  height: 100%;
 object-fit: contain;
 object-position: center;
}

/* メディアレスポンシブ対応
===========================================================================*/

/*
<div class="media-container">
  <iframe 
    src="https://www.youtube.com/embed/your_video_id" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
  </iframe>
</div>
<div class="media-container">
  <iframe 
    src="https://www.google.com/maps/embed?pb=..." 
    allowfullscreen="" 
    loading="lazy">
  </iframe>
</div>
*/

.media-container {
  width: 100%;
  overflow: hidden;
}
.media-container--16-9 { aspect-ratio: 16 / 9; }
.media-container--4-3  { aspect-ratio: 4 / 3; }
.media-container--1-1  { aspect-ratio: 1 / 1; }
.media-container--3-2  { aspect-ratio: 3 / 2; }
.media-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/*　アコーディオン
===========================================================================*/

/*
<div class="accordion">
	<div class="accordion__head" aria-expanded="false">
		<span class="accordion__q"><i class="fa-solid fa-q"></i></span>
		<span class="accordion__title">このアコーディオンはどのように機能しますか？</span>
	</div>
	<div class="accordion__body">
		<p>このアコーディオンは、HTML、CSS、そしてJavaScriptを使用して作成されています。質問部分（.accordion__head）をクリックすると、JavaScriptが親要素に 'is-open' というクラスを付け外しします。CSS側では、そのクラスの有無に応じて、答えの部分（.accordion__body）の表示・非表示をアニメーションで切り替えています。</p>
	</div>
</div>
*/

.accordion {
	border: 1px solid var(--color-border);
	overflow: hidden;
	background-color: #fff;
	transition: box-shadow 0.3s ease;
}
.accordion:not(:last-child) {
	margin-bottom: var(--space-4);
}
.accordion:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.accordion__head {
	display: flex;
	align-items: center;
	width: 100%;
	padding: var(--space-8);
	background-color: #fff;
	cursor: pointer;
	position: relative;
	text-align: left;
	transition: background-color 0.3s ease;
}
.accordion__q {
	display:inline-block;
	width:40px;
	height:40px;
	border-radius: 999px;
	background-color: var(--color-primary);
	color: #FFF;
	text-align:center;
	font-weight: bold;
	line-height: 40px;
	margin-right:10px;
}
.accordion__title {
	line-height:1.5em;
	font-weight:bold;
	flex: 1;
}
.accordion__head::before,
.accordion__head::after {
	content: '';
	position: absolute;
	top: 50%;
	right: var(--space-5);
	width: 18px;
	height: 2px;
	background-color: var(--color-primary);
	transform-origin: center;
	transition: transform 0.4s ease;
}
.accordion__head::before {
	transform: translateY(-50%) rotate(90deg);
}
.accordion__head::after {
	transform: translateY(-50%) rotate(0deg);
}
.accordion.is-open .accordion__head {
	background-color: var(--color-primary);
}
.accordion.is-open .accordion__q {
	background-color: #fff;
	color: var(--color-primary);
}
.accordion.is-open .accordion__title {
	color:#fff;
}
.accordion.is-open .accordion__head::before {
	background-color:#fff;
	transform: translateY(-50%) rotate(180deg);
}
.accordion.is-open .accordion__head::after {
	background-color:#fff;
	transform: translateY(-50%) rotate(180deg);
}
.accordion__body {
	display: none;
	padding: var(--space-8);
	background-color: #fff;
}
.accordion__body > p {
	margin: 0;
}
/* is-openクラスが付いた時に、表示 */
.accordion.is-open .accordion__body {
	display: block;
}
@media (min-width: 768px) {
	.accordion__head { padding: var(--space-5); }
	.accordion__body { padding: var(--space-5); }
}

/*　ページトップ
===========================================================================*/

/*
<a href="#" class="page-top"><i class="fa-solid fa-arrow-up"></i></a>
*/

.page-top {
	background-color: var(--color-primary);
	color: #fff;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	z-index:999;
	position: fixed;
	right: 20px;
	bottom: 20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}
.page-top:hover{
	background-color:#fff;
	color:var(--color-primary);
	}
/* is-activeクラスが付与されたときのスタイル（表示状態） */
.page-top.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
@media (min-width: 768px) {
.page-top {
	width: 50px;
	height: 50px;
	line-height: 50px;
}
}