/* 
 * common.css
 * コンポーネント以外で使用する共通スタイル
 */
body,
html {
  scroll-behavior: smooth;
  min-height: 100vh !important;
  height: auto !important;
  position: inherit !important;
}

/*
 * SP時の固定ヘッダー対策（アンカー遷移で見出し等が隠れないようにする）
 * JSで --anchor-offset をヘッダー高さ(px)に更新する
 */
html {
  scroll-padding-top: var(--anchor-offset, 0px);
}
.s main [id],
.s [role='main'] [id],
.s #content [id],
.s main a[name],
.s [role='main'] a[name],
.s #content a[name] {
  scroll-margin-top: var(--anchor-offset, 0px);
}
body {
  /* background: linear-gradient(to bottom, #eef9ff 0%, #c4edff 100%); */
  background: url(../img/bg.png) no-repeat center;
  background-size: cover;
  font-family: 'BIZ UDPGothic', sans-serif;
}
body.s {
  background:
    url(../img/sp_bg.png) no-repeat top center/100% auto,
    #c4edff 100%;
}
img {
  max-width: 100%;
  height: auto;
}

.pc {
  display: block;
}
.sp {
  display: none;
}
.s .pc {
  display: none;
}
.s .sp {
  display: block;
}
button {
  cursor: pointer;
  background: none;
  border: none;
  pointer-events: auto;
}
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* ボタン無効化　クラス名 */
.is-disabled {
  pointer-events: none !important;
}

/* 行間 */
._padding-top5 {
  padding-top: 5px !important;
}
._padding-top10 {
  padding-top: 10px !important;
}
._padding-top15 {
  padding-top: 15px !important;
}
._padding-top20 {
  padding-top: 20px !important;
}
._padding-top30 {
  padding-top: 30px !important;
}
._padding-bottom10 {
  padding-bottom: 10px !important;
}

/* 背景色 */
._bg-darkblue {
  background-color: #003274 !important;
}
._bg-lightblue {
  background-color: #0c72be !important;
}
._bg-white {
  background-color: #fff !important;
}

/* h3 背景グラデーション */
._title-gradient {
  background-image: linear-gradient(90deg, #0074ef, #00aeef 51%, #0074ef);
}

/* 文字色 */
._color-white {
  color: #fff !important;
}

/******************************/
/* ローディング */
/******************************/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 100000;
  /* display: none; */
  background-color: rgba(255, 255, 255, 0.7);
}
.loadingIcon {
  --uib-size: 60px;
  --uib-color: #0c72be;
  --uib-speed: 2s;
  --uib-bg-opacity: 0;
  height: var(--uib-size);
  width: var(--uib-size);
  transform-origin: center;
  animation: rotate var(--uib-speed) linear infinite;
  will-change: transform;
  overflow: visible;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loadingTrack {
  fill: none;
  stroke: var(--uib-color);
  opacity: var(--uib-bg-opacity);
  transition: stroke 0.5s ease;
}
.loadingCar {
  fill: none;
  stroke: var(--uib-color);
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: stretch calc(var(--uib-speed) * 0.75) ease-in-out infinite;
  will-change: stroke-dasharray, stroke-dashoffset;
  transition: stroke 0.5s ease;
}
@keyframes rotate {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes stretch {
  0% {
    stroke-dasharray: 0, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 75, 150;
    stroke-dashoffset: -25;
  }
  100% {
    stroke-dashoffset: -100;
  }
}

/***************************/
/* パンくずリスト */
/***************************/
.breadcrumbs {
  width: 32%;
  margin-top: 20px;
  padding: 5px 11px 4px;
  background-image: linear-gradient(90deg, #ffffff 80%, #ebf8ff);
  color: #666;
  font-size: 0.75rem;
}
@media screen and (max-width: 1132px) {
  .breadcrumbs {
    width: 41%;
  }
}
.s .breadcrumbs {
  width: 100%;
  padding: 8px 16px 7px 16px;
  margin: 16px 0 23px;
  font-size: 0.75rem;
}
.breadcrumbs a {
  color: #1a0dab;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.2s;
}
.s .breadcrumbs a {
  font-size: 0.75rem;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumbs .current-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 172px;
  vertical-align: top;
}
.s .breadcrumbs .current-item {
  white-space: normal;
}

/******************************/
/* フォーカス */
/******************************/
/* マウスクリック時 */
:focus:not(:focus-visible) {
  outline: none;
}
/* タブ移動時 */
:focus-visible {
  outline: 2px solid #0058c0;
}

.type-item:focus-within {
  /* デフォルトの focus-within は無効化しておく（マウスクリックで輪郭が出るのを防ぐ） */
  outline: none;
}
/* キーボード操作時に付与するクラスでフォーカスリングを表示 */
.type-item.keyboard-focused {
  outline: 3px solid #0058c0;
  outline-offset: 2px;
}
/* 共通ボタン */
.c-button:focus-visible {
  outline: 3px solid #0058c0;
  box-shadow: inset 0 0 0 2px #fff;
}
/* TOPのコンテンツボタン */
.category-card:focus-visible,
.category-card:has(:focus-visible),
.category-card.keyboard-focused {
  outline: 3px solid #0058c0;
  outline-offset: 3px;
}
.category-card a:focus-visible {
  outline: none;
  box-shadow: none;
}
/* 横浜市の防災 */
.yokohama-initiative a {
  display: inline-block;
}
.yokohama-initiative-link:focus,
.yokohama-initiative-link:focus-visible,
.yokohama-initiative-link:focus-within,
.yokohama-initiative-link:has(:focus-visible),
.yokohama-initiative-link.keyboard-focused {
  outline: 3px solid #0058c0;
  outline-offset: 3px;
}
/* モーダル　閉じるボタン */
.disaster-modal-close:focus-visible {
  outline: 3px solid #0058c0;
  outline-offset: 3px;
}
/* モーダル　コンテンツ遷移 */
.disaster-modal .category-card:focus,
.disaster-modal .category-card:focus-visible,
.disaster-modal .category-card:has(:focus-visible),
.disaster-modal .category-card.keyboard-focused {
  outline: 3px solid #0058c0;
  outline-offset: 3px;
}
/* クリック時にブラウザが出すデフォルトのフォーカスリングを抑制する
   キーボード操作時は .type-item.keyboard-focused で表示するため安全 */
.type-list .checkbox-round:focus,
.type-list .type-label:focus,
.type-list .type-item:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* iOS/Android のタップハイライトも抑制 */
.type-list .type-label,
.type-list .checkbox-round {
  -webkit-tap-highlight-color: transparent;
}
/* キーボード操作時のみ親に自前フォーカス */
.type-item:has(.checkbox-round:focus-visible) {
  outline: 3px solid #0058c0;
  outline-offset: 2px;
}
.c-externalLink_item:has(button:focus-visible),
.c-externalLink_item.keyboard-focused {
  outline: 3px solid #0058c0;
  outline-offset: 2px;
}

.c-externalLink_item.keyboard-focused button:focus,
.c-externalLink_item.keyboard-focused button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* 閉じるボタンはフォーカスつける */
.c-externalLink_item.keyboard-focused .js-modal_closeBtn:focus,
.c-externalLink_item.keyboard-focused .js-modal_closeBtn:focus-visible {
  outline: 2px solid #0058c0 !important;
  outline-offset: 2px !important;
}
/* iosの時は閉じるボタンのフォーカス非表示 */
.s .c-externalLink_item.keyboard-focused .js-modal_closeBtn:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 下層ページ　地域選択ボタン */
.region-select {
  position: relative;
  font-size: 0.875rem;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 8px;
}
.region-select span {
  flex-shrink: 0;
}
.s .region-select_pc {
  display: none;
}
.region-select_sp {
  display: none;
}
.s .region-select_sp {
  display: block;
  width: 100%;
}
.region-select_trigger {
  width: 101px;
  padding: 6px 30px 4px 10px;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #cccccc;
  font-size: 0.875rem;
  word-wrap: break-word;
  color: #333;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.4s ease;
}
.region-select_trigger::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8%;
  width: 8px;
  height: 8px;
  border: 3px solid #666666;
  border-left: 0;
  border-top: 0;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.region-select_trigger:hover {
  transform: scale(1.03);
}

/* ポップオーバー開いている間は矢印を上向きにする */
.region-select_trigger.is-open::after,
.region-select_trigger_sp.is-open::after {
  transform: translateY(-50%) rotate(-135deg);
}
/* sp */
.popover_sp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #eef9ff 0%, #c4edff 100%);
  overflow: scroll;
  z-index: 1;
  pointer-events: auto;
  padding: 17% 20px 90px 28px;
}
.s .title-content {
  position: relative;
}
.region-select_trigger_sp {
  display: none;
}
.s .region-select_trigger_sp {
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
}
/* 絞り込む　ボタン */
.narrowDown-btn {
  width: 275px;
  margin: 30px auto 0;
  border-radius: 8px;
}
.narrowDown-btn .c-button {
  max-width: unset !important;
  width: 100%;
  padding: 20px 0 !important;
  font-size: 1.125rem !important;
}
/* sp 閉じるボタン */
.s .region-popover_sp .region-select_close {
  width: 26px;
  height: 26px;
  right: 2%;
}
.s .region-select_close:focus-visible {
  box-shadow: 0 0 0 2px #0058c0;
}

/* 閉じる　ボタン */
.region-select_close,
.lang-popover-close {
  position: absolute;
  top: 4%;
  right: 1.5%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
}
.region-select_close::before,
.region-select_close::after,
.lang-popover-close::before,
.lang-popover-close::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 2px;
  background-color: #666;
  border-radius: 1px;
}
.s .region-select_close::before,
.s .region-select_close::after,
.s .lang-popover-close::before,
.s .lang-popover-close::after {
  display: none;
}

.region-select_close::before,
.lang-popover-close::before {
  transform: rotate(45deg);
}
.region-select_close::after,
.lang-popover-close::after {
  transform: rotate(-45deg);
}

.components-panel__body button::after {
  content: '*' !important;
  display: inline-block !important;
  color: #d63638 !important;
  width: 32px;
  height: 32px;
}