
/*ブロックの高さ調節*/
#support-block .rr-block-column {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	margin-bottom: 1.5rem;
	border-radius: 8px;
}
#support-block .site-block-button {
	margin-top: auto;
}

/*タグ表示*/
/* 一覧ページ全体（#body_wrap にも tag の class が付く）には効かせない 2026-11-05 */
.tag:not(#body_wrap) {
	display: inline-block;
	margin: 0 .1em .6em 0;
	padding: .6em;
	line-height: 1;
	text-decoration: none;
	color: #808080;
	background-color: #fff;
	border: 1px solid #808080;
	border-radius: 2em;
}

/*商品紹介の各ブロック高さ調節（PCのみ）*/
@media screen and (min-width: 960px) {
.section1{
	height: 20rem;
}
.section2{
	height: 15rem;
}

.section3{
	height: 20rem;
}

.section4{
	height: 20rem;
}

.section5{
	height: 20rem;
}
}

/*フッターの調整*/
.l-footer__nav {
  gap: 1em;
  padding: 1em 0 4em;
}

.l-footer__nav a {
  border-right: none;
}

.l-footer__nav li:first-child a {
  border-left: none;
}

.l-footer__nav > li > a {
  font-weight: 700;
  font-size: 14px;
}

.l-footer__nav .sub-menu {
  margin-top: 0.25em;
  display: grid;
  gap: 0.3em;
}

.l-footer__nav .sub-menu > li {
  margin-left: 0.75em;
}

.l-footer__nav .sub-menu > li a {
  padding: 0 0.75em;
  position: relative;
  font-size: 13px;
}

.l-footer__nav .sub-menu > li a::before {
  content: "";
  width: 5px;
  height: 1px;
  background-color: var(--color_footer_text);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
  .l-footer__nav {
    gap: 0.5em;
    flex-direction: column;
  }

  .l-footer__nav > li:nth-of-type(n + 2) {
    padding-bottom: 0.5em;
  }

  .l-footer__nav > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }

  .l-footer__nav > li > a {
    font-size: 13px;
  }

  .l-footer__nav .sub-menu {
    margin-top: 0.2em;
    gap: 0.5em;
  }

  .l-footer__nav .sub-menu > li a {
    font-size: 12px;
  }
}

/* アクセシビリティ（WCAG 2.2 AA）の手直し 2026-11-05 */
/* リンクの青を少し濃く：薄い灰色の背景（#f7f7f7）でも文字が読みやすいように（コントラスト 4.5 以上） */
:root {
  --color_link: #0b62b3;
}
/* お知らせの枠の中のリンクは、色だけでなく下線でもわかるように */
.is-style-icon_announce a {
  text-decoration: underline;
}
/* 表の中のリンク（リザルトなど）は、指で押しやすい高さ（24px 以上）に */
.rr-block-table td a {
  display: inline-block;
  padding: 3px 0;
}
/* スライドの丸いボタン：見た目の丸の大きさはそのまま、押せる範囲を 24px に（まわりを透明のふちで広げる） */
.flex-control-nav.flex-control-paging li {
  margin: 0 1px;
}
.flex-control-nav.flex-control-paging li a {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 6.5px solid transparent;
  background-clip: padding-box !important;
  box-shadow: none;
}
.swiper-pagination-bullets .swiper-pagination-bullet {
  width: 24px !important;
  height: 24px !important;
  box-sizing: border-box;
  border: 8px solid transparent !important;
  background-clip: padding-box !important;
  margin: 0 1px !important;
}

/* YouTube：最初は写真と再生ボタンだけ（押すと動画を読み込む・yt-lite.js） */
.rr-yt {
  position: absolute;
  inset: 0;
  background: #000;
}
.rr-yt__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.rr-yt__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rr-yt__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  border-radius: 12px;
  background: rgba(255, 0, 0, .9);
}
.rr-yt__play::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 14px;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
}
.rr-yt__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}
.rr-yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 技術講習（/training/）の手引きの部分（.rr-guide）2026-11-05 オーナー指示：画像・動画は真ん中、すき間は少なく、WCAG 2.2 AA */
/* 部品どうしのすき間を小さく（もとは 2em） */
.post_content .rr-guide > * { margin-bottom: 1.25em; }
.post_content .rr-guide > :last-child { margin-bottom: 0; }
/* 見出しの上下の余白を小さく（もとは h2 が上 4em・下 2em、h3 が上 3em・下 2em） */
.post_content .rr-guide h2 { margin: 2.25em 0 .9em; }
.post_content .rr-guide h3 { margin: 1.9em 0 .9em; }
.post_content .rr-guide > h2:first-child, .post_content .rr-guide > :first-child + h2 { margin-top: 1.5em; }
/* 動画・図は真ん中に、大きくなりすぎないように（画面の写真は文字が読めるよう本文の幅いっぱいのまま） */
.post_content .rr-guide figure.rr-block-embed,
.post_content .rr-guide figure.rr-fig-m { max-width: 640px; margin-left: auto; margin-right: auto; }
.post_content .rr-guide figure.rr-block-image img { display: block; margin-left: auto; margin-right: auto; height: auto; }
/* 図の下の説明：小さいスマホでも読める大きさ（13px 以上）・真ん中 */
.post_content .rr-guide .rr-element-caption { font-size: max(.85em, 13px); text-align: center; margin-top: .5em; }
/* 青い帯の「ナレッジベース」ボタン：文字が小さすぎた（約 10px）ので 14px に */
#support-block .site-block-button__link .u-fz-xs { font-size: 14px !important; }   /* もとの u-fz-xs に !important があるため */
/* 技術講習の「実践ガイド」の見出しの上も、ほかの見出しと同じくらいに */
.post_content h3#guide { margin: 1.9em 0 .9em; }

/* 2026-11-05 技術講習の仕上げ（オーナー指示） */
/* 技術講習：題名と最初の写真のあいだの余白を小さく（もとは 4em） */
.l-mainContent__inner > .post_content:has(.rr-guide) { margin-top: 2em; }
/* 技術講習：スマホで表の左の列（ひな形の名前）が 1 文字ずつ折り返さないように */
.post_content .rr-guide .rr-block-table th:first-child,
.post_content .rr-guide .rr-block-table td:first-child { white-space: nowrap; }
@media (max-width: 599px) {
  .post_content .rr-guide .rr-block-table { font-size: .9em; }
  .post_content .rr-guide .rr-block-table th,
  .post_content .rr-guide .rr-block-table td { padding: .5em .6em; }
}

/* 全ページ共通：パンくずの文字が 10〜11px と小さかったので 13px に */
.p-breadcrumb__list { font-size: 13px !important; }
/* 全ページ共通：スマホ・タブレットで右下の「上へ戻る」ボタンが本文に重なるので、小さく・端に寄せ・うすく（押すときは濃く） */
@media (max-width: 959px) {
  .p-fixBtnWrap { right: 6px !important; bottom: 10px !important; }
  .c-fixBtn { width: 40px !important; height: 40px !important; opacity: .55 !important; }
  .c-fixBtn:hover, .c-fixBtn:focus-visible, .c-fixBtn:active { opacity: 1 !important; }
  .c-fixBtn__icon { font-size: 16px !important; }
}

/* 2026-11-05 トップページと全ページ共通の見やすさ・WCAG 2.2 AA（オーナー指示） */
/* 本文へ移動（スキップリンク）：ふだんは隠し、Tab で選ばれたら左上に出す */
.rr-skipLink { position: absolute; left: 8px; top: -100px; z-index: 10000; padding: .6em 1em; background: #0000cd; color: #fff !important; font-size: 15px; font-weight: 700; border-radius: 4px; text-decoration: none; }
.rr-skipLink:focus { top: 8px; outline: 3px solid #ffbf00; outline-offset: 2px; }
#main_content:focus { outline: none; }
/* スマホのメニュー：閉じているときは、読み上げ・Tab の対象から外す（見た目の消え方はそのまま） */
[data-spmenu=closed] .p-spMenu { visibility: hidden; transition: opacity 0s 1s, visibility 0s 1s; }
[data-spmenu=opened] .p-spMenu { visibility: visible; transition-delay: 0s; }
/* メニューの矢印・カテゴリーのフォルダ・日付の時計など、飾りのアイコン文字を読み上げない */
.c-listMenu a:before { content: "\e921" / ""; }
.icon-home:before { content: "\e922" / ""; }
.icon-folder:before { content: "\e92f" / ""; }
.icon-posted:before { content: "\e931" / ""; }
.icon-modified:before { content: "\e92d" / ""; }
/* トップのスライド：明るい写真の上でも白い文字が読めるよう、文字の後ろにうすい黒の帯（コントラスト 4.5:1 以上） */
.p-mainVisual__slideTitle, .p-mainVisual__slideText { display: table; margin-left: auto; margin-right: auto; padding: .2em .7em; background: rgba(0, 0, 0, .6); border-radius: 4px; text-shadow: none !important; }
.p-mainVisual__slideText { margin-top: .5em; }
/* スライドの点（ページ送り）：明るい写真でも見えるよう黒いふちを付け、今のスライドをはっきり */
/* （押せる大きさは 24px のまま、見える点は白に黒いふち・今のスライドは青に白いふち） */
#main_visual .swiper-pagination-bullet { opacity: 1 !important; background: radial-gradient(circle, #fff 0 3px, rgba(0, 0, 0, .7) 3.5px 5px, transparent 5.5px) !important; background-clip: border-box !important; border: 0 !important; }
#main_visual .swiper-pagination-bullet-active { background: radial-gradient(circle, #0000cd 0 3.5px, #fff 4px 6px, transparent 6.5px) !important; }
/* 「Scroll」：明るい写真の上でも見えるよう、うすい黒の下地。ページ送りの点と重ならないよう少し上に */
#main_visual .p-mainVisual__scroll { background: rgba(0, 0, 0, .45); border-radius: 6px; padding: 4px 8px; bottom: 42px; opacity: .9; }
/* スマホ：スライドの文字が左右の矢印ボタンにかからないように */
@media (max-width: 959px) { #main_visual .p-mainVisual__textLayer { padding-left: 46px; padding-right: 46px; } }
/* スライドの一時停止ボタン（WCAG 2.2.2）：左下・44px */
#main_visual { position: relative; }
.rr-mvPause { position: absolute; left: 12px; bottom: 12px; z-index: 10; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgba(0, 0, 0, .6); cursor: pointer; }
.rr-mvPause svg { width: 20px; height: 20px; fill: #fff; }
.rr-mvPause:hover { background: rgba(0, 0, 0, .8); }
/* キーボードで選んでいる場所を、どこでもはっきり見えるように（青い枠＋白いふち） */
a:focus-visible, button:focus-visible, [role=button]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #0000cd !important; outline-offset: 2px; box-shadow: 0 0 0 5px #fff !important;
}
/* フッターのリンク：押す場所を 24px 以上に（WCAG 2.5.8・PC も） */
#footer .w-footer a, #footer .l-footer__nav a { display: inline-block; min-height: 24px; line-height: 24px; }
/* スマホ（599px 以下）：「Scroll」がスライドの文字に重なるので出さない（下へは指で動かせる） */
@media (max-width: 599px) { #main_visual .p-mainVisual__scroll { display: none; } }
/* 記事のカード（トップ・お知らせ・一覧で共通）：日付・カテゴリーの文字が 10〜11px と小さかったので大きく・濃く */
.p-postList__meta { font-size: 13px !important; color: #4d4d4d; }
.c-postThumb__cat { font-size: 12px !important; -webkit-transform: none !important; transform: none !important; }
/* トップの英語の紹介文：12px と小さかったので 14px に */
.post_content p[lang=en] .u-fz-xs { font-size: 14px !important; line-height: 1.8; }
/* 文字の濃さ（WCAG 1.4.3・2026-11-05）
   タブ（下線の型）：選んでいないタブを全体ごと 70% に薄くしていたため、説明文が #878787（比 3.5）になっていた。
   文字は薄くせず、写真だけを薄くする（選んでいるタブは青・太字・下線で分かる） */
.is-style-bb>.c-tabList .c-tabList__button { opacity: 1; }
.is-style-bb>.c-tabList .c-tabList__button:not([aria-selected=true]):not(:hover) img { opacity: .7; }
/* 記事のカードの日付：#707070 のままだったので、まわりと同じ濃さ（#4d4d4d）に */
.p-postList__meta .c-postTimes__posted, .p-postList__meta .c-postTimes__modified { color: inherit; }
.p-postList__meta .p-postList__times.u-thin { opacity: 1; }   /* 日付を 80% に薄くしていたのをやめる */
/* ページ上部の写真の上の白い見出し：写真の明るい部分に重なっても読めるよう、文字のまわりに濃い影 */
.l-topTitleArea__body { text-shadow: 0 0 4px rgba(0, 0, 0, .6), 1px 1px 2px rgba(0, 0, 0, .5); }
/* 見出しの順番（WCAG 1.3.1・2.4.6）：タグを正しい段に直した見出しを、前と同じ見た目のままにする（2026-11-05）
   rr-look-h5：事例のカードの見出し（h5→h2）／rr-look-h3：利用実績の地域の見出し（h3→h2）／rr-look-h4：Ubidium の特長（h4→h3） */
.post_content h2.rr-look-h5 { font-size: 1em; line-height: 1.8; margin: 0; padding: 0; background: none; color: rgb(168, 24, 21); z-index: auto; }
.post_content h2.rr-look-h5::before, .post_content h2.rr-look-h5::after { content: none; }
.post_content h2.rr-look-h3 { font-size: 1.1em; line-height: 1.4; margin: 3em 0 2em; padding: 0 .5em .5em; background: none; color: rgb(0, 0, 0); z-index: auto; }
.post_content h2.rr-look-h3::before { content: ""; position: absolute; display: block; pointer-events: none; top: auto; bottom: 0; left: 0; z-index: 0; width: 100%; height: 2px; box-sizing: content-box; border: 0;
  background: repeating-linear-gradient(90deg, var(--color_htag) 0%, var(--color_htag) 29.3%, rgba(150,150,150,.2) 29.3%, rgba(150,150,150,.2) 100%); }
.post_content h2.rr-look-h3::after { content: none; }
.post_content h3.rr-look-h4 { font-size: 1.05em; line-height: 1.4; margin: 3em 0 1.5em; padding: 0; }
.post_content h3.rr-look-h4::before { content: none; }
@media (min-width: 600px) {
  .post_content h2.rr-look-h3 { font-size: 1.3em; }
  .post_content h3.rr-look-h4 { font-size: 1.2em; }
}
