@charset "UTF-8";
/* 地方創生×適応 ページ用
 * カード一覧は parts-col3-*（style.css で定義）を使用
 * rr.js が .js-content__inner 内に HTML を出力
 */
#rr h2{
	font-size: 26px;
}
/*#rr figure{
	margin-bottom: 45px!important;
}*/
.m45-b{
	margin-bottom: 30px!important;
}
.m0-tb{
	margin-top: 0;
	margin-bottom: 0;
}
.rr-btn{
	margin-top: 70px!important;
	margin-inline: auto!important;	
}
/* base.css の a[href$=".pdf"][target="_blank"][rel~="noopener"]::after が
 * a.btn-download::after より詳細度が高く、PDFマークが出るため上書きする */
.rr-btn a.btn-download[href$=".pdf"][target="_blank"][rel~="noopener"]::after {
	content: none !important;
	display: none !important;
	background: none !important;
	background-image: none !important;
}

#rr #rr-report {
  font-size: 26px;
  padding: 0.5em ; /* 上下の余白も少し広げます */
  background-color: #f2f8f2; /* 薄いブルー系の背景色#f0f7ff; */
  border-left: none; /* 削除 */
  border-radius: 4px; /* 右側の角を少し丸くして柔らかさをプラス */
  color: #333; /* 文字色を少し柔らかい黒に */
  text-align: center;
  border: solid 3px #367C39;
}
.parts-col3-card figure{
	margin-bottom: 0!important;
}
/* ------------------------------------------------------------
 * リンクボタン（parts.html の btn-area / btns / arrow 用）
 * ------------------------------------------------------------ */

/* btns 共通（アイコンサイズ）*/
.develop .btns {
  --icon-size: 8px;
}

/* btns（リンクボタン本体） */
.develop .btns a {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  padding: 0 20px;
  align-items: center;
  border: 1px solid var(--black);
  font-weight: var(--fw-bold);
  color: var(--black);
  text-align: center;
  font-size: 14px;
  height: 48px; /* ボタンの高さ */
  overflow: hidden;
  position: relative; /* 疑似要素（アイコン）配置の基準 */
}

/* 背景塗り（ホバー時） */
.develop .btns a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gray-200);
  transform: scaleX(0);
  transform-origin: left center;
  transition: none;
  z-index: -1;
}

.develop .btns a:hover::before {
  transform: scaleX(1);
  transition: transform 0.35s ease;
}

/* デフォルトの「V」アイコン */
.develop .btns a::after {
  content: "";
  position: absolute;
  right: calc(var(--icon-size) * 2);
  width: var(--icon-size);
  height: var(--icon-size);
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(135deg);
}

/* 現在地（必要な箇所がある場合） */
.develop .btns .active a {
  background-color: #f4f3f2;
}
.develop .btns .active a::after {
  transform: rotate(135deg) !important;
}
.develop .btns .active a:hover {
  background-color: var(--gray-200);
  transition: all 0.3s;
}

/* アイコン「＞」*/
.develop .btns .arrow-right a::after {
  transform: rotate(45deg);
}

/* アイコン「へ」*/
.develop .btns .arrow-up a::after {
  transform: translateY(2px) rotate(315deg);
}

/* アイコン「＜」*/
.develop .btns .arrow-left a::after {
  transform: rotate(225deg);
}

/* アイコン「→」（parts.html の arrow クラス用） */
.develop .btns .arrow a::after {
  width: 15px;
  height: 6px;
  border: initial; /* 初期値に戻す */
  border-bottom: solid 1px #000;
  border-right: solid 1px #000;
  transform: skew(55deg);
}

/* btn-area：上下余白＋中央寄せ */
.develop .btn-area {
  margin-block: 40px; /* 上下の余白 */
  display: grid;
  justify-items: center;
  align-items: center;
}

/* btn-area 内では、ボタン高さを可変に（parts.html のメモ想定） */
.develop .btn-area .btns a {
  height: auto;
  min-height: 48px;
  overflow: auto;
}

/* ------------------------------------------------------------
 * レスポンシブ（スマホ幅：長文でも崩れにくく）
 * ------------------------------------------------------------ */
@media (max-width: 480px) {
  .develop .btn-area {
    margin-block: 24px;
  }

  /* 長文で折り返しても読みやすくする */
  .develop .btn-area .btns a {
    min-height: 44px;
    padding: 0 16px;
    font-size: 13px;
    overflow: visible; /* スクロールバーが出ないように */
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* アイコンのサイズも少し控えめに */
  .develop .btns .arrow a::after {
    width: 12px;
    height: 5px;
  }
}