@charset "UTF-8";
:root {
  color-scheme: light dark;
  --c-primary: light-dark(#0076b5, #EBCB1A);
  --c-on-primary: light-dark(#FFF, #222);
  --c-secondary: light-dark(#17C2C7, #FF178D);
  --c-background-base: light-dark(#F7F9FB, #2B2B2B);
  --c-background-primary: light-dark(#FFF, #313131);
  --c-background-secondary: light-dark(#F0F2F5, #242424);
  --c-text-base: light-dark(#555, #EAEAEA);
  --c-text-lighter: light-dark(#676767, #B7B7B7);
  --c-text-link: light-dark(#0076b5, #8AB4F8);
  --c-white: #FFF;
  --c-black: #222;
  --c-footer-bg: #333;
  --c-footer-text: #EAEAEA;
  --c-th-bg: #555;
  --c-th-text: #F7F9FB;
  --c-sns-share: #555;
  --c-sns-x: #000;
  --c-sns-facebook: #3b5998;
  --c-sns-hatena: #007bbd;
  --c-sns-line: #00c300;
  --c-sns-bluesky: #0085FF;
  --c-sns-threads: #000;
  --c-sns-linkedin: #0077B5;
  --c-sns-readwise: #003B36;
  --c-sns-instapaper: #1F1F1F;
  --c-sns-raindrop: #0098FA;
  --c-sns-pinterest: #E60023;
  --c-sns-webshare: #0076b5;
  --c-ai-chatgpt: #10A37F;
  --c-ai-claude: #D97757;
  --c-ai-perplexity: #20808D;
  --c-ai-grok: #000;
  --c-cat-label-bg: #2B2B2B;
  --c-cat-webdesign: #bd2459;
  --c-cat-coding: #2f67a9;
  --c-cat-utility: #276077;
  --font-family-base: 'Noto Sans CJK JP', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --fs-2xs: 0.6875rem;  
  --fs-xs: 0.75rem;     
  --fs-sm: 0.8125rem;   
  --fs-base: 0.875rem;  
  --fs-md: 0.9375rem;   
  --fs-lg: 1rem;        
  --fs-xl: 1.125rem;    
  --fs-2xl: 1.375rem;   
  --fs-3xl: 1.5rem;     
  --fs-4xl: 1.75rem;    
  --fs-5xl: 2.25rem;    
  --lh-none: 1;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;
  --tracking: 0.05em;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 28px;
  --space-12: 32px;
  --space-13: 40px;
  --space-14: 48px;
  --container-max: 1420px;
  --container-lg: 1024px;
  --sidebar-width: 230px;
  --bp-xxl: 1420px;
  --bp-xl: 1180px;
  --bp-lg: 960px;
  --bp-md: 680px;
  --bp-sm: 480px;
  --bp-xs: 320px;
  --ar-eyecatch: 1200 / 630;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 30px;
  --radius-full: 50%;
  --shadow-normal: 0 4px 8px light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.35));
  --shadow-hover: 0 4px 12px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
  --shadow-deep: 0 3px 12px light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.35));
  --shadow-inset: 0 3px 12px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.4)) inset;
  --transition: 0.3s ease-in-out;
  --z-bg: -1;
  --z-default: 1;
  --z-raised: 3;
  --z-overlay: 10;
  --z-navbar: 99;
  --z-dropdown: 100;
  --z-modal: 1000;
}
.light-theme { color-scheme: light; }
.dark-theme  { color-scheme: dark; }
.monochrome-theme {
  color-scheme: dark;
  --c-primary: #555;
  --c-secondary: #111;
  --c-background-base: #000;
  --c-background-primary: #111;
  --c-background-secondary: #000;
  --c-text-base: #E0E0E0;
  --c-text-lighter: #B7B7B7;
  --c-text-link: #B7B7B7;
  --c-on-primary: var(--c-white);
  --c-footer-bg: #111;
  --c-sns-share: var(--c-black);
  --c-sns-x: var(--c-black);
  --c-sns-facebook: var(--c-black);
  --c-sns-hatena: var(--c-black);
  --c-sns-line: var(--c-black);
  --c-sns-bluesky: var(--c-black);
  --c-sns-threads: var(--c-black);
  --c-sns-linkedin: var(--c-black);
  --c-sns-readwise: var(--c-black);
  --c-sns-instapaper: var(--c-black);
  --c-sns-raindrop: var(--c-black);
  --c-sns-pinterest: var(--c-black);
  --c-sns-webshare: var(--c-black);
  --c-ai-chatgpt: var(--c-black);
  --c-ai-claude: var(--c-black);
  --c-ai-perplexity: var(--c-black);
  --c-ai-grok: var(--c-black);
  --c-cat-webdesign: #333;
  --c-cat-coding: #333;
  --c-cat-utility: #333;
  & img { filter: brightness(0.7); }
  & .card_article_image span.card_article_category { background: var(--c-black); }
}
.color_primary { color: var(--c-primary); }
.color_secondary { color: var(--c-secondary); }
.color_bg_base { color: var(--c-background-base); }
.color_bg_primary { color: var(--c-background-primary); }
.color_bg_secondary { color: var(--c-background-secondary); }
.color_t_base { color: var(--c-text-base); }
.color_t_light { color: var(--c-text-lighter); }
.color_t_link { color: var(--c-text-link); }
.bg_primary { background: var(--c-primary); }
.bg_secondary { background: var(--c-secondary); }
.bg_bg_base { background: var(--c-background-base); }
.bg_bg_primary { background: var(--c-background-primary); }
.bg_bg_secondary { background: var(--c-background-secondary); }
.bg_t_base { background: var(--c-text-base); }
.bg_t_light { background: var(--c-text-lighter); }
.bg_t_link { background: var(--c-text-link); }
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
:root { tab-size: 4; }
body { margin: 0; }
search { display: block; } 
h1 { font-size: 2em; margin: 0.67em 0; }
hr { height: 0; }
abbr[title] { text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.2; margin: 0; }
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; }
button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { padding: 0; }
progress { vertical-align: baseline; }
[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
[type='search']::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}
.card_article_image img[data-vt-name],
.article_image img {
	view-transition-class: post-image;
}
::view-transition-group(*.post-image) {
	animation-duration: 0.3s;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(*.post-image),
::view-transition-new(*.post-image) {
	animation: none;
	mix-blend-mode: normal;
}
html {
	font-size: var(--fs-lg);
	line-height: var(--lh-tight);
	overflow-x: clip;
	@media screen and (max-width: 320px) {
		font-size: 15px;
	}
}
body {
	font-family: var(--font-family-base);
	color: var(--c-text-base);
	background-color: var(--c-background-base);
	transition: var(--transition);
	overflow-x: clip;
}
p {
	font-size: var(--fs-lg);
	color: inherit;
}
.heading {
	font-size: var(--fs-3xl);
	color: var(--c-text-base);
	font-weight: normal;
	position: relative;
	margin: 0;
}
.heading_parent {
	font-size: var(--fs-base);
	color: var(--c-text-base);
	position: absolute;
	bottom: 1.9rem;
	left: 0;
	&:after {
		font-size: var(--fs-xs);
		content: "/";
	}
	&:hover {
		text-decoration: underline;
	}
}
.heading_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	& .changeSort_select {
		max-width: 150px;
	}
	& .changePageNum_select {
		max-width: 140px;
	}
}
.heading_controls {
	display: flex;
	align-items: center;
	gap: 8px;
}
.viewToggle {
	display: flex;
	gap: 2px;
	background: var(--c-background-secondary);
	border-radius: var(--radius-md);
	padding: 2px;
}
.viewToggle_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--c-text-lighter);
	cursor: pointer;
	transition: var(--transition);
	&::before {
		content: "";
		display: block;
		width: 18px;
		height: 18px;
		background-color: currentColor;
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: center;
	}
	&[data-view="card"]::before {
		mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/view_grid.svg);
	}
	&[data-view="list"]::before {
		mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/view_list.svg);
	}
	&:hover {
		color: var(--c-text-base);
	}
	&:focus-visible {
		outline: 2px solid var(--c-primary);
		outline-offset: 2px;
	}
	&.is-active {
		background: var(--c-background-primary);
		color: var(--c-text-base);
		box-shadow: var(--shadow-normal);
	}
}
.btn {
	font-size: var(--fs-base);
	border-radius: var(--radius-md);
	transition: var(--transition);
	display: block;
	text-align: center;
	text-decoration: none;
	&:hover {
		box-shadow: var(--shadow-hover);
		filter: brightness(1.05);
	}
	&:focus-visible {
		outline: 2px solid var(--c-primary);
		outline-offset: 2px;
	}
	&:active {
		box-shadow: none;
		filter: brightness(0.95);
	}
}
.btn_black {
	color: var(--c-background-base);
	background: var(--c-text-base);
}
.btn_primary {
	color: var(--c-on-primary);
	background: var(--c-primary);
}
.btn.is-md {
	max-width: 320px;
}
.btn_inline {
	font-size: var(--fs-base);
	display: inline-block;
	line-height: var(--lh-none);
	padding: 0.85rem 1rem;
	@media screen and (max-width: 480px) {
		padding: 0.85rem;
	}
	& + .btn_inline {
		margin-left: 10px;
		@media screen and (max-width: 680px) {
			margin-left: 5px;
		}
	}
}
.btn_sns {
	font-size: var(--fs-base);
	border-radius: var(--radius-md);
	transition: var(--transition);
	color: #fff;
	display: block;
	line-height: var(--lh-none);
	margin-top: -6px;
	margin-bottom: 16px;
	padding: 14px 16px;
	text-decoration: none;
	& i,
	& .fa-svg {
		margin-right: 6px;
	}
	&:last-child {
		margin-bottom: 36px;
	}
	&:hover {
		box-shadow: var(--shadow-hover);
		filter: brightness(1.05);
	}
	&:active {
		box-shadow: none;
		filter: brightness(0.95);
	}
}
.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: var(--z-modal);
	background: var(--c-primary);
	color: var(--c-on-primary);
	padding: 8px 16px;
	font-size: var(--fs-base);
	text-decoration: none;
	border-radius: 0 0 var(--radius-md) 0;
	&:focus-visible {
		top: 0;
	}
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.entory_content :is(p, li) {
	text-wrap: pretty;
}
@media (forced-colors: active) {
	.article,
	.box,
	.card_article,
	.modal,
	dialog {
		border: 1px solid CanvasText;
	}
}
@media (pointer: coarse) {
	.viewToggle_btn,
	.modal_close,
	.code-block-copy,
	.code-block-expand {
		min-width: 44px;
		min-height: 44px;
	}
}
.is-center {
  text-align: center;
}
.wrap-xxl {
  max-width: var(--container-max);
  width: 100%;
  padding: 0 20px;
  margin: 0 auto;
}
.wrap_md {
  max-width: 680px;
  width: 100%;
  padding: 0 20px;
  margin: 0 auto;
}
.modal .wrap_md + .wrap_md {
  padding-top: 0;
}
.wrap_sm {
  max-width: 480px;
  width: 100%;
  padding: 0 20px;
  margin: 0 auto;
}
.layout_imageBox {
  border-radius: var(--radius-md);
  background: var(--c-background-secondary);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
  margin-top: -20px;
  margin-bottom: 26px;
  @media screen and (max-width: 680px) {
    flex-direction: column;
    padding-bottom: 0;
  }
}
.layout_imageBox_image {
  max-width: 192px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  @media screen and (max-width: 680px) {
    display: none;
  }
  & img {
    width: 100%;
    vertical-align: bottom;
  }
}
.layout_imageBox_text {
  margin-left: 20px;
  @media screen and (max-width: 680px) {
    margin: 0;
  }
}
.layout_column {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  grid-template-rows: 1fr;
  gap: 32px;
  @media screen and (max-width: 960px) {
    grid-template-columns: 1fr;
  }
  & a {
    color: var(--c-text-base);
  }
  & ul li a {
    color: var(--c-text-base);
  }
}
.header {
  height: 60px;
}
.header_wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  @media screen and (max-width: 680px) {
    padding: 0 20px 0 0;
  }
  & .logo {
    margin: 0;
    height: 100%;
    & a {
      display: block;
      padding: 0 15px;
      &:hover {
        transition: var(--transition);
        opacity: 0.8;
      }
    }
    & img {
      display: block;
      height: 60px;
      object-fit: contain;
      vertical-align: middle;
      @media screen and (max-width: 680px) {
        width: 140px;
      }
    }
  }
}
.header_right {
  @media screen and (max-width: 960px) {
    display: none;
  }
}
.header_nav {
  & ul {
    display: flex;
    justify-content: space-between;
  }
  & li {
    display: block;
    height: 60px;
  }
  & a {
    font-size: var(--fs-sm);
    transition: var(--transition);
    display: block;
    padding: 15px;
    height: 100%;
    font-weight: 600;
    color: var(--c-text-base);
    text-decoration: none;
    & span {
      font-size: var(--fs-2xs);
      transition: var(--transition);
      color: var(--c-primary);
      display: block;
      margin: 4px 0 0;
      font-weight: 500;
      line-height: var(--lh-none);
    }
    &:hover {
      color: var(--c-background-primary);
      background: var(--c-primary);
      & span {
        color: var(--c-background-secondary);
      }
    }
    &:focus-visible {
      outline: 2px solid var(--c-primary);
      outline-offset: -2px;
    }
  }
}
.header_sp {
  position: relative;
  display: none;
  @media screen and (max-width: 960px) {
    display: block;
  }
}
.header_sp_open {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  display: inline-block;
  width: 30px;
  height: 22px;
  cursor: pointer;
  vertical-align: middle;
  & span,
  & span:before,
  & span:after {
    border-radius: var(--radius-md);
    background: var(--c-text-base);
    display: block;
    content: '';
    height: 3px;
    width: 25px;
    position: absolute;
  }
  & span:before {
    bottom: -8px;
  }
  & span:after {
    bottom: -16px;
  }
  &:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
}
.header_sp_close {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  &::before,
  &::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: var(--c-text-base);
    position: absolute;
    top: 50%;
    left: 50%;
  }
  &::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  &:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
}
.header_sp_content {
  background: var(--c-background-secondary);
  overflow: auto;
  width: 90%;
  max-width: 330px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  inset: 0 auto 0 0;
  transform: translateX(-105%);
  transition-property: transform, display, overlay;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-behavior: allow-discrete;
  &:popover-open {
    box-shadow: var(--shadow-deep);
    transform: translateX(0%);
    @starting-style {
      transform: translateX(-105%);
    }
  }
  &::backdrop {
    background: rgba(0, 0, 0, 0);
    transition-property: background-color, display, overlay;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-behavior: allow-discrete;
  }
  &:popover-open::backdrop {
    background: rgba(0, 0, 0, 0.5);
    @starting-style {
      background: rgba(0, 0, 0, 0);
    }
  }
  & a {
    transition: var(--transition);
    color: var(--c-text-base);
    border-bottom: 1px solid var(--c-background-base);
    display: block;
    text-decoration: none;
    padding: 10px 20px;
    position: relative;
    & span {
      display: none;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .header_sp_content {
    transform: none;
    transition-duration: 0.1s;
    &:popover-open {
      transform: none;
      @starting-style {
        transform: none;
      }
    }
  }
}
@supports not selector(:popover-open) {
  .header_sp_content {
    transform: none;
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
  }
  .header_sp_close {
    display: none;
  }
}
.footer {
  color: var(--c-footer-text);
  background: var(--c-footer-bg);
}
.footer_wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 25px 20px 10px;
  & ul {
    display: flex;
    justify-content: center;
  }
  & li {
    margin: 0 0 0 8px;
    padding: 0 0 0 8px;
    & + li {
      border-left: 1px solid currentColor;
    }
  }
  & a {
    font-size: var(--fs-xs);
    display: block;
    color: #fff;
    text-decoration: underline;
  }
}
.footer .copyright {
  font-size: var(--fs-xs);
  padding: 5px 5px 10px;
  text-align: center;
}
.fa-svg {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  & svg {
    max-width: 0.95rem;
    height: 0.9rem;
    line-height: 1rem;
  }
}
.icn {
  font-size: var(--fs-sm);
  padding-left: 1.4em;
  position: relative;
  &::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--c-text-base);
    mask-size: contain;
    position: absolute;
    top: 0.02em;
    left: 0;
    bottom: 0;
    margin: auto;
  }
  &.icn_date::before {
    mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/cal_create.svg);
  }
  &.icn_date_edit::before {
    mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/cal_edit.svg);
  }
}
.mainVisual {
  position: relative;
  width: 100%;
  margin: 0;
  & .mainVisual_title {
    font-size: clamp(1.375rem, 0.9rem + 2.4vw, 2.25rem);
    color: var(--c-text-base);
    font-weight: normal;
    text-align: center;
    margin: 0;
    padding: 44px 20px 68px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.08);
    @media screen and (max-width: 680px) {
      padding: 20px 12px 34px;
    }
  }
  & span {
    font-size: var(--fs-base);
    display: block;
    line-height: var(--lh-normal);
    @media screen and (max-width: 680px) {
      font-size: var(--fs-sm);
    }
  }
}
.mainVisual_wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
}
.mainVisual_shape {
  position: absolute;
  z-index: var(--z-bg);
  transform-origin: top left;
  @media screen and (max-width: 960px) {
    scale: 0.8;
  }
  @media screen and (max-width: 680px) {
    scale: 0.65;
  }
  @media screen and (max-width: 480px) {
    scale: 0.4;
  }
}
.mainVisual_shape_1 {
  top: -280px;
  left: -60px;
  @media screen and (max-width: 680px) {
    top: -200px;
    left: -80px;
  }
  @media screen and (max-width: 480px) {
    top: -120px;
    left: -10px;
  }
}
.mainVisual_shape_2 {
  top: 100px;
  right: 0;
  @media screen and (max-width: 960px) {
    right: -180px;
  }
  @media screen and (max-width: 680px) {
    top: 50px;
    right: -240px;
  }
  @media screen and (max-width: 480px) {
    top: 20px;
    right: -310px;
  }
}
.mainVisual_shape_start {
  fill: var(--c-secondary);
  stop-color: var(--c-secondary);
}
.mainVisual_shape_end {
  fill: var(--c-primary);
  stop-color: var(--c-primary);
}
.sideBlock_announcement {
  overflow: hidden;
}
.sideBlock_announcement .sideBlock_title {
  margin-bottom: 0;
}
.sideBlock_announcement img {
  display: block;
  width: 100%;
  height: auto;
}
.sideBlock_announcement a:not(.wp-block-button__link) {
  display: block;
  text-decoration: none;
  color: var(--c-text-base);
  transition: var(--transition);
}
.sideBlock_announcement a:not(.wp-block-button__link):hover {
  opacity: 0.85;
}
.sideBlock_announcement p {
  margin: 0;
  padding: 12px 14px;
  font-size: var(--fs-sm);
}
.sideBlock_announcement .wp-block-heading {
  margin: 0;
  padding: 12px 14px;
}
.sideBlock_announcement .wp-block-buttons {
  justify-content: center; 
  margin: 16px 14px;
}
.sideBlock_announcement .wp-block-button {
  margin: 16px auto; 
  text-align: center;
}
.sideBlock_announcement .wp-block-buttons .wp-block-button {
  margin: 0; 
}
.sideBlock_announcement .wp-block-button__link {
  display: inline-block;
  width: auto; 
  padding: 0.85rem 1.5rem;
  background-color: var(--c-primary);
  color: var(--c-on-primary);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.sideBlock_announcement .wp-block-button__link:hover {
  filter: brightness(1.05);
}
.sideBlock.sideBlock_announcement ul,
.sideBlock.sideBlock_announcement ol {
  margin: 12px 14px;
  padding-left: 1.5em;
  font-size: var(--fs-sm);
  list-style-position: outside;
}
.sideBlock.sideBlock_announcement ul {
  list-style-type: disc;
}
.sideBlock.sideBlock_announcement ol {
  list-style-type: decimal;
}
.sideBlock.sideBlock_announcement li {
  margin-bottom: 4px;
}
.sideBlock.sideBlock_announcement li:last-child {
  margin-bottom: 0;
}
.sideBlock_announcement_body {
  padding: 14px;
}
.sideBlock_title + .sideBlock_announcement_body {
  padding-top: 0;
}
.sideBlock_announcement_img {
  border-radius: var(--radius-md);
}
.sideBlock_announcement_text {
  margin-top: 8px;
  text-align: center;
}
.sideBlock_announcement_link:not(:has(.sideBlock_announcement_img)) .sideBlock_announcement_text {
  margin-top: 0;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.breadcrumb {
	background: color-mix(in srgb, var(--c-footer-bg), black 25%);
}
.breadcrumb_wrap {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 8px 20px;
}
.breadcrumb_list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
	& li {
		display: flex;
		align-items: center;
		&:not(:last-child)::after {
			content: "›";
			padding: 0 6px;
			color: #777;
			font-size: var(--fs-sm);
			line-height: 1;
		}
	}
	& a {
		font-size: var(--fs-sm);
		color: var(--c-footer-text);
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}
		&.breadcrumb_home {
			text-transform: uppercase;
		}
	}
	& span {
		font-size: var(--fs-sm);
		color: #999;
	}
}
.box {
  display: block;
  color: var(--c-text-base);
  background: var(--c-background-primary);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  &:last-child {
    margin-bottom: 64px;
  }
}
.box_header {
  padding: 0 20px;
  border-bottom: 1px solid var(--c-background-secondary);
}
.box h2 {
  font-size: var(--fs-2xl);
  font-weight: normal;
}
.hljs {
  font-size: var(--fs-sm);
  color: #abb2bf;
  background: #282c34;
  display: block;
  overflow-x: auto;
  padding: 1em;
  line-height: 1.3;
}
pre.hljs {
  background: #282c34;
  color: #abb2bf;
  line-height: 1.3;
}
pre.hljs code {
  display: block;
  padding: 1em;
  overflow-x: auto;
  background: transparent;
  color: inherit;
  font-size: var(--fs-sm);
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  line-height: inherit;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
}
.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a1e28;
  padding: 0.35em 0.8em;
  border-bottom: 1px solid #2c313a;
  min-height: 2em;
  gap: 0.5em;
}
.code-block-header-left {
  display: flex;
  align-items: center;
  gap: 0.6em;
  overflow: hidden;
  min-width: 0;
}
.code-block-header:has(+ code.html) .code-block-header-left::before,
.code-block-header:has(+ code.css) .code-block-header-left::before,
.code-block-header:has(+ code.scss) .code-block-header-left::before,
.code-block-header:has(+ code.javascript) .code-block-header-left::before,
.code-block-header:has(+ code.typescript) .code-block-header-left::before,
.code-block-header:has(+ code.jsx) .code-block-header-left::before,
.code-block-header:has(+ code.tsx) .code-block-header-left::before,
.code-block-header:has(+ code.php) .code-block-header-left::before,
.code-block-header:has(+ code.python) .code-block-header-left::before,
.code-block-header:has(+ code.ruby) .code-block-header-left::before,
.code-block-header:has(+ code.java) .code-block-header-left::before,
.code-block-header:has(+ code.c) .code-block-header-left::before,
.code-block-header:has(+ code.cpp) .code-block-header-left::before,
.code-block-header:has(+ code.csharp) .code-block-header-left::before,
.code-block-header:has(+ code.go) .code-block-header-left::before,
.code-block-header:has(+ code.rust) .code-block-header-left::before,
.code-block-header:has(+ code.swift) .code-block-header-left::before,
.code-block-header:has(+ code.kotlin) .code-block-header-left::before,
.code-block-header:has(+ code.sql) .code-block-header-left::before,
.code-block-header:has(+ code.bash) .code-block-header-left::before,
.code-block-header:has(+ code.shell) .code-block-header-left::before,
.code-block-header:has(+ code.json) .code-block-header-left::before,
.code-block-header:has(+ code.yaml) .code-block-header-left::before,
.code-block-header:has(+ code.xml) .code-block-header-left::before,
.code-block-header:has(+ code.markdown) .code-block-header-left::before {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: var(--fs-xs);
  color: #7a8394;
  white-space: nowrap;
  flex-shrink: 0;
}
.code-block-header:has(+ code.html) .code-block-header-left::before { content: 'HTML'; }
.code-block-header:has(+ code.css) .code-block-header-left::before { content: 'CSS'; }
.code-block-header:has(+ code.scss) .code-block-header-left::before { content: 'SCSS'; }
.code-block-header:has(+ code.javascript) .code-block-header-left::before { content: 'JavaScript'; }
.code-block-header:has(+ code.typescript) .code-block-header-left::before { content: 'TypeScript'; }
.code-block-header:has(+ code.jsx) .code-block-header-left::before { content: 'JSX'; }
.code-block-header:has(+ code.tsx) .code-block-header-left::before { content: 'TSX'; }
.code-block-header:has(+ code.php) .code-block-header-left::before { content: 'PHP'; }
.code-block-header:has(+ code.python) .code-block-header-left::before { content: 'Python'; }
.code-block-header:has(+ code.ruby) .code-block-header-left::before { content: 'Ruby'; }
.code-block-header:has(+ code.java) .code-block-header-left::before { content: 'Java'; }
.code-block-header:has(+ code.c) .code-block-header-left::before { content: 'C'; }
.code-block-header:has(+ code.cpp) .code-block-header-left::before { content: 'C++'; }
.code-block-header:has(+ code.csharp) .code-block-header-left::before { content: 'C#'; }
.code-block-header:has(+ code.go) .code-block-header-left::before { content: 'Go'; }
.code-block-header:has(+ code.rust) .code-block-header-left::before { content: 'Rust'; }
.code-block-header:has(+ code.swift) .code-block-header-left::before { content: 'Swift'; }
.code-block-header:has(+ code.kotlin) .code-block-header-left::before { content: 'Kotlin'; }
.code-block-header:has(+ code.sql) .code-block-header-left::before { content: 'SQL'; }
.code-block-header:has(+ code.bash) .code-block-header-left::before { content: 'Bash'; }
.code-block-header:has(+ code.shell) .code-block-header-left::before { content: 'Shell'; }
.code-block-header:has(+ code.json) .code-block-header-left::before { content: 'JSON'; }
.code-block-header:has(+ code.yaml) .code-block-header-left::before { content: 'YAML'; }
.code-block-header:has(+ code.xml) .code-block-header-left::before { content: 'XML'; }
.code-block-header:has(+ code.markdown) .code-block-header-left::before { content: 'Markdown'; }
.hljs-code-title {
  color: #abb2bf;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.code-block-header-right {
  display: flex;
  align-items: center;
  gap: 0.4em;
  flex-shrink: 0;
}
@media (max-width: 680px) {
  .code-block-expand {
    display: none;
  }
}
.code-block-expand {
  background: transparent;
  border: 1px solid #3e4452;
  color: #7a8394;
  width: 1.75em;
  height: 1.75em;
  min-width: 24px;  
  min-height: 24px;
  padding: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  &::before {
    content: '';
    display: block;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/maximize.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
  &:hover {
    background: #3e4452;
    color: #abb2bf;
  }
}
.code-block-copy {
  background: transparent;
  border: 1px solid #3e4452;
  color: #7a8394;
  padding: 0.15em 0.65em;
  min-height: 24px;  
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  line-height: var(--lh-normal);
  flex-shrink: 0;
  &:hover {
    background: #3e4452;
    color: #abb2bf;
  }
}
.modal.code-modal {
  max-width: 1080px;
  width: calc(100% - 40px);
  max-height: 85vh;
  padding: 0;
  background: #282c34;
  border: none;
}
.modal.code-modal[open] {
  display: flex;
  flex-direction: column;
}
.code-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a1e28;
  padding: 0.35em 0.5em 0.35em 0.8em;
  border-bottom: 1px solid #2c313a;
  min-height: 2.5em;
  gap: 0.5em;
}
.code-modal-header-right {
  display: flex;
  align-items: center;
  gap: 0.8em;
  flex-shrink: 0;
}
.code-modal-header-left {
  display: flex;
  align-items: center;
  gap: 0.6em;
  overflow: hidden;
  min-width: 0;
}
.code-modal:has(code.html) .code-modal-header-left::before,
.code-modal:has(code.css) .code-modal-header-left::before,
.code-modal:has(code.scss) .code-modal-header-left::before,
.code-modal:has(code.javascript) .code-modal-header-left::before,
.code-modal:has(code.typescript) .code-modal-header-left::before,
.code-modal:has(code.jsx) .code-modal-header-left::before,
.code-modal:has(code.tsx) .code-modal-header-left::before,
.code-modal:has(code.php) .code-modal-header-left::before,
.code-modal:has(code.python) .code-modal-header-left::before,
.code-modal:has(code.ruby) .code-modal-header-left::before,
.code-modal:has(code.java) .code-modal-header-left::before,
.code-modal:has(code.c) .code-modal-header-left::before,
.code-modal:has(code.cpp) .code-modal-header-left::before,
.code-modal:has(code.csharp) .code-modal-header-left::before,
.code-modal:has(code.go) .code-modal-header-left::before,
.code-modal:has(code.rust) .code-modal-header-left::before,
.code-modal:has(code.swift) .code-modal-header-left::before,
.code-modal:has(code.kotlin) .code-modal-header-left::before,
.code-modal:has(code.sql) .code-modal-header-left::before,
.code-modal:has(code.bash) .code-modal-header-left::before,
.code-modal:has(code.shell) .code-modal-header-left::before,
.code-modal:has(code.json) .code-modal-header-left::before,
.code-modal:has(code.yaml) .code-modal-header-left::before,
.code-modal:has(code.xml) .code-modal-header-left::before,
.code-modal:has(code.markdown) .code-modal-header-left::before {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: var(--fs-xs);
  color: #7a8394;
  white-space: nowrap;
  flex-shrink: 0;
}
.code-modal:has(code.html) .code-modal-header-left::before { content: 'HTML'; }
.code-modal:has(code.css) .code-modal-header-left::before { content: 'CSS'; }
.code-modal:has(code.scss) .code-modal-header-left::before { content: 'SCSS'; }
.code-modal:has(code.javascript) .code-modal-header-left::before { content: 'JavaScript'; }
.code-modal:has(code.typescript) .code-modal-header-left::before { content: 'TypeScript'; }
.code-modal:has(code.jsx) .code-modal-header-left::before { content: 'JSX'; }
.code-modal:has(code.tsx) .code-modal-header-left::before { content: 'TSX'; }
.code-modal:has(code.php) .code-modal-header-left::before { content: 'PHP'; }
.code-modal:has(code.python) .code-modal-header-left::before { content: 'Python'; }
.code-modal:has(code.ruby) .code-modal-header-left::before { content: 'Ruby'; }
.code-modal:has(code.java) .code-modal-header-left::before { content: 'Java'; }
.code-modal:has(code.c) .code-modal-header-left::before { content: 'C'; }
.code-modal:has(code.cpp) .code-modal-header-left::before { content: 'C++'; }
.code-modal:has(code.csharp) .code-modal-header-left::before { content: 'C#'; }
.code-modal:has(code.go) .code-modal-header-left::before { content: 'Go'; }
.code-modal:has(code.rust) .code-modal-header-left::before { content: 'Rust'; }
.code-modal:has(code.swift) .code-modal-header-left::before { content: 'Swift'; }
.code-modal:has(code.kotlin) .code-modal-header-left::before { content: 'Kotlin'; }
.code-modal:has(code.sql) .code-modal-header-left::before { content: 'SQL'; }
.code-modal:has(code.bash) .code-modal-header-left::before { content: 'Bash'; }
.code-modal:has(code.shell) .code-modal-header-left::before { content: 'Shell'; }
.code-modal:has(code.json) .code-modal-header-left::before { content: 'JSON'; }
.code-modal:has(code.yaml) .code-modal-header-left::before { content: 'YAML'; }
.code-modal:has(code.xml) .code-modal-header-left::before { content: 'XML'; }
.code-modal:has(code.markdown) .code-modal-header-left::before { content: 'Markdown'; }
.code-modal .modal_close::before,
.code-modal .modal_close::after {
  background: #abb2bf;
}
.code-modal-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 0;
}
.code-modal .code-modal-pre {
  margin: 0;
  border-radius: 0;
  border: none;
  overflow: visible;
}
.code-modal .code-modal-pre code {
  min-height: 4em;
}
.hljs-comment,
.hljs-quote {
  color: #5c6370;
  font-style: italic;
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: #c678dd;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: #e06c75;
}
.hljs-literal {
  color: #56b6c2;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
  color: #98c379;
}
.hljs-built_in,
.hljs-class .hljs-title {
  color: #e6c07b;
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: #d19a66;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: #61aeee;
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: bold;
}
.hljs-link {
  text-decoration: underline;
}
.faq {
  margin: 0 0 var(--space-13);
  &:last-child {
    margin-bottom: 0;
  }
}
.faq_item {
  margin-bottom: var(--space-10);
  &:last-child {
    margin-bottom: 0;
  }
}
.faq_q {
  position: relative;
  padding-left: var(--space-13);
  font-size: var(--fs-lg);
  font-weight: bold;
  color: var(--c-text-base);
  &::before {
    content: "Q";
    position: absolute;
    left: 0;
    color: var(--c-primary);
  }
}
.faq_a {
  position: relative;
  margin: var(--space-6) 0 0;
  padding: var(--space-8) var(--space-9) var(--space-8) var(--space-13);
  color: var(--c-text-base);
  background: var(--c-background-primary);
  border-radius: var(--radius-md);
  &::before {
    content: "A";
    position: absolute;
    left: var(--space-9);
    color: var(--c-secondary);
    font-weight: bold;
  }
}
input {
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	&:focus-visible {
		outline: 2px solid var(--c-primary);
		outline-offset: 2px;
	}
}
input:user-invalid,
textarea:user-invalid {
	border-color: #d93025;
	background-color: color-mix(in srgb, #d93025 8%, transparent);
}
input:user-valid,
textarea:user-valid {
	border-color: #188038;
}
input:user-invalid + .error-msg,
textarea:user-invalid + .error-msg {
	display: block;
}
.field:has(input:user-invalid) .rules-list,
.field:has(textarea:user-invalid) .rules-list {
	color: #d93025;
}
select {
	appearance: none;
	border: none;
	outline: none;
	background: transparent;
	cursor: pointer;
	&:focus-visible {
		outline: 2px solid var(--c-primary);
		outline-offset: 2px;
	}
}
textarea {
	font-size: var(--fs-base);
	appearance: none;
	border: none;
	outline: none;
	background: #fff;
	padding: 12px;
	width: 100%;
	height: 100px;
	min-height: 100px;
	max-height: 100px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: var(--radius-sm);
	box-sizing: border-box;
	color: #222;
	line-height: var(--lh-tight);
	resize: none;
	&:focus-visible {
		outline: 2px solid var(--c-primary);
		outline-offset: 2px;
	}
}
label {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	input[type="text"],
	input[type="number"],
	input[type="tel"],
	input[type="search"],
	select {
		font-size: var(--fs-base);
		border-radius: var(--radius-md);
		display: block;
		color: var(--c-text-base);
		background: var(--c-background-primary);
		border: 2px solid var(--c-background-secondary);
		padding: 4px 12px;
		width: 100%;
		min-height: 36px;
		line-height: var(--lh-tight);
	}
}
.select {
	position: relative;
	select {
		padding-right: 28px;
	}
	span {
		font-size: var(--fs-xs);
		display: block;
		color: var(--c-text-base);
		white-space: nowrap;
	}
	&::before {
		content: "";
		display: block;
		width: 18px;
		height: 18px;
		background-position: center;
		background-repeat: no-repeat;
		background-color: var(--c-text-base);
		mask-size: contain;
		mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/chevron_up.svg);
		transform: rotate(180deg);
		position: absolute;
		top: 0;
		right: 10px;
		bottom: 0;
		margin: auto;
		pointer-events: none;
	}
}
.radio {
	display: inline-block;
	width: auto;
	margin: 14px 18px 14px 0;
	padding: 0;
	font-size: var(--fs-md);
	line-height: 1.7;
	cursor: pointer;
	@media screen and (max-width: 680px) {
		font-size: var(--fs-base);
		line-height: var(--lh-relaxed);
		margin: 8px 10px 8px 0;
	}
	input {
		height: 0;
		width: 0;
		opacity: 0;
		margin: 0;
		&:checked + .outer {
			border: 2px solid var(--c-primary);
			.inner {
				transform: scale(1);
				opacity: 1;
			}
		}
		&:focus-visible + .outer {
			outline: 2px solid var(--c-primary);
			outline-offset: 2px;
			.inner {
				transform: scale(1);
				opacity: 1;
				background-color: var(--c-primary);
			}
		}
	}
	.outer {
		height: 22px;
		width: 22px;
		display: block;
		box-sizing: border-box;
		float: left;
		margin: 2px;
		border: 2px solid var(--c-text-lighter);
		border-radius: 50%;
		background-color: var(--c-background-primary);
	}
	.inner {
		transition: all 0.25s ease-in-out;
		height: 12px;
		width: 12px;
		transform: scale(0);
		display: block;
		margin: 3px;
		border-radius: 50%;
		background-color: var(--c-primary);
		opacity: 0;
	}
	&:hover {
		.inner {
			transform: scale(0.5);
			opacity: 0.5;
		}
	}
}
.radio.is-sm {
	margin: 4px 0;
	padding: 0;
	font-size: var(--fs-base);
	line-height: 1.7;
	.inner {
		margin: 3px;
		height: 7px;
		width: 7px;
	}
	.outer {
		height: 15px;
		width: 15px;
		border-width: 1px;
		margin: 4px 0;
	}
	input:checked + .outer {
		border-width: 1px;
	}
}
.radio.is-sm + .radio {
	margin-left: 4px;
}
.checkbox {
	display: inline-block;
	width: auto;
	margin: 4px 0;
	padding: 0;
	font-size: var(--fs-base);
	line-height: 1.7;
	cursor: pointer;
	input {
		height: 0;
		width: 0;
		opacity: 0;
		margin: 0;
		&:checked + .outer {
			border: 2px solid var(--c-primary);
			background: var(--c-primary);
			.inner {
				transform: rotate(45deg) scale(1);
				opacity: 1;
			}
		}
		&:focus-visible + .outer {
			outline: 2px solid var(--c-primary);
			outline-offset: 2px;
		}
	}
	.outer {
		height: 18px;
		width: 18px;
		display: block;
		box-sizing: border-box;
		float: left;
		margin: 2px;
		border: 2px solid var(--c-text-lighter);
		border-radius: var(--radius-sm);
		background-color: var(--c-background-primary);
	}
	.inner {
		transition: opacity 0.2s linear;
		position: absolute;
		top: 11px;
		left: 8px;
		display: block;
		margin-top: -7px;
		width: 5px;
		height: 12px;
		border-right: 2px solid var(--c-background-primary);
		border-bottom: 2px solid var(--c-background-primary);
		content: "";
		opacity: 0;
		transform: rotate(45deg) scale(0);
	}
}
.checkbox.is-sm {
	margin: 4px 0;
	.inner {
		left: 5px;
	}
	.outer {
		height: 15px;
		width: 15px;
		border-width: 1px;
		margin: 4px 0;
	}
}
.checkbox.is-sm + .checkbox {
	margin-left: 4px;
}
.modal.table-modal {
  max-width: min(95vw, 1400px);
  width: calc(100% - 40px);
  & .table-modal-body {
    padding-bottom: 0;
  }
  & .entory_content {
    padding-bottom: 0;
  }
  & .table-scroll {
    margin-bottom: 0;
  }
}
.table-modal-body {
  overflow: auto;
  & table {
    width: 100%;
  }
  & thead {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}
.modal {
  color: var(--c-text-base);
  background: var(--c-background-primary);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-normal);
  max-width: 680px;
  width: calc(100% - 40px);
  padding: 0;
  transform: translateY(-2rem);
  opacity: 0;
  transition-property: opacity, transform, display, overlay;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-behavior: allow-discrete;
  &[open] {
    transform: translateY(0);
    opacity: 1;
    @starting-style {
      transform: translateY(-2rem);
      opacity: 0;
    }
  }
  &::backdrop {
    background: rgba(0, 0, 0, 0);
    transition-property: background-color, display, overlay;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-behavior: allow-discrete;
  }
  &[open]::backdrop {
    background: rgba(0, 0, 0, 0.5);
    @starting-style {
      background: rgba(0, 0, 0, 0);
    }
  }
}
.modal_header {
  color: var(--c-text-base);
  border-bottom: 1px solid var(--c-background-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  padding: 8px 20px;
  h2 {
    color: var(--c-text-base);
    font-size: var(--fs-xl);
  }
}
.modal_close {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  position: relative;
  &::before,
  &::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: var(--c-text-base);
    position: absolute;
    top: 50%;
    left: 50%;
  }
  &::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}
.modal_body {
  max-height: calc(100dvh - 130px);
  padding: 0 0 20px;
  overflow-y: auto;
  h3 {
    font-size: var(--fs-xl);
    margin-bottom: 0.4rem;
  }
  p {
    font-size: var(--fs-xs);
    line-height: 1.4;
    margin: 0.4rem 0;
  }
  a {
    text-decoration: underline;
    &:hover {
      text-decoration: none;
    }
  }
}
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.modal .wrap_md {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}
.setting_legend {
  font-size: var(--fs-xl);
  font-weight: 600;
  display: block;
  margin-bottom: 0.4rem;
  padding: 0;
}
.setting_group {
  padding: 12px 0;
  border-top: 1px solid var(--c-background-secondary);
  &:last-child {
    padding-top: 16px;
    border-top: none;
  }
}
.setting_group_label {
  font-size: var(--fs-sm);
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}
.setting_group_options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.setting_nosave {
  margin-left: auto;
}
.setting_reset {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 8px 24px;
}
.modal_close:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .modal {
    transform: none;
    transition-duration: 0.1s;
    &[open] {
      transform: none;
      @starting-style {
        transform: none;
        opacity: 0;
      }
    }
    &::backdrop {
      transition-duration: 0.1s;
    }
  }
}
.pagination {
	margin: 30px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	@media screen and (max-width: 680px) {
		flex-direction: column;
	}
	nav {
		display: flex;
		justify-content: center;
		align-items: center;
		ul.page-numbers {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
		}
		a,
		span {
			font-size: var(--fs-sm);
			transition: var(--transition);
			color: var(--c-text-base);
			background: var(--c-background-primary);
			border: 2px solid var(--c-background-secondary);
			line-height: var(--lh-none);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			padding: 10px;
			min-width: calc(var(--fs-sm) + 24px);
			margin: 0 2px;
			border-radius: var(--radius-lg);
			text-decoration: none;
			@media screen and (max-width: 680px) {
				padding: 8px;
				min-width: calc(var(--fs-sm) + 20px);
			}
			&.prev,
			&.next {
				padding: 7.5px;
				@media screen and (max-width: 680px) {
					padding: 5.5px;
					margin: 0 2px;
				}
				&::before {
					content: "";
					display: block;
					width: 18px;
					height: 18px;
					background-position: center;
					background-repeat: no-repeat;
					background-color: currentColor;
					mask-size: contain;
					mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/chevron_up.svg);
				}
			}
			&.prev::before {
				transform: rotate(-90deg);
			}
			&.next::before {
				transform: rotate(90deg);
			}
			&:hover {
				box-shadow: var(--shadow-hover);
				filter: brightness(1.05);
				color: var(--c-background-base);
				background: var(--c-primary);
				text-decoration: none;
			}
			&:active,
			&.current {
				box-shadow: none;
				filter: brightness(0.95);
				color: var(--c-background-base);
				background: var(--c-primary);
			}
			&.dots {
				font-size: 0.625rem;
				background: transparent;
				box-shadow: none;
				border: none;
				padding: 0;
				min-width: unset;
				transition: none;
				pointer-events: none;
			}
		}
	}
}
.pagination_select {
	max-width: 74px;
	margin-left: 15px;
	@media screen and (max-width: 680px) {
		margin: 10px 0 0;
	}
}
.next-page-list ul,
.next-page-list ol {
	margin: 0 0 20px;
	padding-left: 22px;
	a {
		&:hover {
			text-decoration: underline;
		}
	}
}
.profile {
  overflow: hidden;
  margin: 0 auto;
  padding: 10px 20px 20px;
  img {
    float: left;
    margin: 0 16px 0 0;
    @media screen and (max-width: 680px) {
      margin: 0 8px 0 0;
    }
  }
  h4 {
    font-size: var(--fs-md);
    color: var(--c-text-base);
    font-weight: bold;
    margin: 0 0 0.8em;
    span {
      font-size: var(--fs-2xs);
      display: block;
      color: var(--c-text-base);
      font-weight: normal;
    }
  }
  p {
    font-size: var(--fs-xs);
    line-height: 1.4;
    margin: 0;
  }
  .btn_sns {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    margin: 15px 0;
    padding: 12px;
    @media screen and (max-width: 320px) {
      padding: 12px 6px;
    }
    & + .btn_sns {
      margin-left: 10px;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.relatedPosts + .relatedPosts {
  margin-top: 20px;
}
.relatedPosts ul {
  margin: 0 0 20px;
  padding: 0 0 0 8px;
  list-style: none;
  li {
    padding: 0 0 0 10px;
    margin-bottom: 4px;
    position: relative;
    &::before {
      border-radius: var(--radius-md);
      content: '';
      display: block;
      background: var(--c-text-base);
      width: 4px;
      height: 4px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }
  a {
    color: var(--c-text-base);
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}
div.yyi-rinker-contents img {
  object-fit: contain;
}
.box_main div.yyi-rinker-contents {
  background: var(--c-background-primary);
  margin: 0;
  border: none;
  box-shadow: none;
  div.yyi-rinker-title a {
    color: var(--c-text-base);
  }
  div.yyi-rinker-detail {
    margin-top: 3px;
    padding: 0;
    .price-box {
      color: var(--c-text-lighter);
    }
  }
  ul.yyi-rinker-links li {
    box-shadow: var(--shadow-normal);
    transition: var(--transition);
    border-radius: var(--radius-md);
    &:hover {
      filter: brightness(1.05);
      box-shadow: var(--shadow-hover);
    }
    &:active {
      filter: brightness(0.95);
      box-shadow: none;
    }
    a {
      transition: var(--transition);
      color: var(--c-background-base);
      font-weight: normal;
    }
    &.amazonlink {
      background: var(--c-text-base);
    }
    &.rakutenlink {
      background: var(--c-text-base);
    }
    &.yahoolink {
      background: var(--c-text-base);
    }
  }
}
.share {
  display: grid;
  grid-template-rows: 46px;
  grid-template-columns: repeat(5, 1fr) 46px;
  gap: 10px;
  margin: 10px 0;
  @media screen and (max-width: 680px) {
    grid-template-columns: repeat(5, 1fr) 46px;
    gap: 8px;
    padding: 0 10px;
  }
}
.btn_share {
  font-size: var(--fs-xl);
  border-radius: var(--radius-md);
  transition: var(--transition);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--c-white);
  background: var(--c-sns-share);
  text-decoration: none;
  text-align: center;
  height: 46px;
  border: none;
  cursor: pointer;
  &:hover {
    box-shadow: var(--shadow-hover);
    filter: brightness(1.1);
  }
  &:active {
    box-shadow: none;
    filter: brightness(0.95);
  }
  & .share_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 6px;
    @media screen and (max-width: 680px) {
      margin: 0;
    }
    & svg {
      width: 1.2em;
      height: 1.1em;
    }
  }
  & .share_label {
    @media screen and (max-width: 680px) {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  }
  & .fa-hatena {
    font-weight: bold;
    font-style: normal;
    margin-right: 6px;
    @media screen and (max-width: 680px) {
      margin: 0;
    }
  }
}
.btn_x,
.btn_twitter  { background: #000; }
.btn_bluesky  { background: var(--c-sns-bluesky); }
.btn_hatena   { background: var(--c-sns-hatena); }
.btn_line     { background: var(--c-sns-line); }
.btn_copy     { background: var(--c-sns-share); }
.btn_copy:has(.share_label.is-copied) { background: var(--c-primary); color: var(--c-on-primary); }
.btn_share_more {
  background: var(--c-text-lighter);
  & .share_icon {
    margin: 0;
  }
}
.share_modal_section_label {
  font-size: var(--fs-xs);
  font-weight: bold;
  color: var(--c-text-lighter);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}
.share_modal_row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn_share_modal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--c-white);
  background: var(--c-sns-share);
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  &:hover {
    box-shadow: var(--shadow-hover);
    filter: brightness(1.1);
  }
  &:active {
    box-shadow: none;
    filter: brightness(0.95);
  }
  & .share_icon {
    display: flex;
    align-items: center;
    & svg {
      width: 1em;
      height: 1em;
    }
  }
}
.btn_facebook   { background: var(--c-sns-facebook); }
.btn_threads    { background: var(--c-sns-threads); }
.btn_linkedin   { background: var(--c-sns-linkedin); }
.btn_instapaper { background: var(--c-sns-instapaper); }
.btn_raindrop   { background: var(--c-sns-raindrop); }
.btn_readwise   { background: var(--c-sns-readwise); }
.btn_pinterest  { background: var(--c-sns-pinterest); }
.btn_webshare   { background: var(--c-sns-webshare); }
.share_copy_columns {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  align-items: start;
  @media screen and (max-width: 480px) {
    grid-template-columns: 1fr;
  }
  & > * {
    min-width: 0;
  }
}
.share_copy_qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  @media screen and (max-width: 480px) {
    flex-direction: row;
  }
  & img {
    display: block;
    width: 140px;
    height: 140px;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid var(--c-background-secondary);
    @media screen and (max-width: 480px) {
      width: 100px;
      height: 100px;
    }
  }
}
.share_copy_qr_label {
  font-size: var(--fs-xs);
  color: var(--c-text-lighter);
}
.share_copy_list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.share_copy_row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-background-secondary);
  gap: 12px;
  &:last-child {
    border-bottom: none;
  }
}
.share_copy_info {
  min-width: 0;
  flex: 1;
}
.share_copy_label {
  font-size: var(--fs-sm);
  display: block;
  margin-bottom: 4px;
  & small {
    font-size: var(--fs-xs);
    color: var(--c-text-lighter);
  }
}
.share_copy_preview {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-lighter);
  background: var(--c-background-secondary);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: monospace;
}
.share_copy_btn {
  flex-shrink: 0;
  appearance: none;
  border: 1px solid var(--c-background-secondary);
  background: var(--c-background-primary);
  color: var(--c-text-base);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  min-width: 64px;
  text-align: center;
  padding: 5px 14px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  &:hover {
    background: var(--c-primary);
    color: var(--c-on-primary);
    border-color: var(--c-primary);
  }
  &.is-copied {
    background: var(--c-primary);
    color: var(--c-on-primary);
    border-color: var(--c-primary);
  }
}
.siblingsPosts {
	margin: 32px 0;
	& ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	& li {
		min-width: 0;
	}
	& a {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: var(--c-background-primary);
		border: 1px solid var(--c-background-secondary);
		border-radius: var(--radius-md);
		overflow: hidden;
		color: var(--c-text-base);
		text-decoration: none;
		transition: var(--transition);
		height: 100%;
		min-height: 72px;
		&:hover {
			background: var(--c-background-secondary);
			text-decoration: none;
		}
	}
	@media screen and (max-width: 680px) {
		& ul {
			grid-template-columns: 1fr;
		}
	}
}
.siblingsPosts_icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	color: var(--c-text-lighter);
	&::before {
		content: "";
		display: block;
		width: 20px;
		height: 20px;
		background-color: currentColor;
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: center;
	}
}
.siblingsPosts_prev .siblingsPosts_icon::before {
	mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/chevron_left.svg);
}
.siblingsPosts_next .siblingsPosts_icon::before {
	mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/chevron_right.svg);
}
.siblingsPosts_text {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: var(--lh-snug);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.siblingsPosts_prev .siblingsPosts_text::before {
	content: "前の記事";
	font-size: var(--fs-xs);
	font-weight: normal;
	color: var(--c-text-lighter);
	margin-bottom: 4px;
}
.siblingsPosts_next a {
	text-align: right;
}
.siblingsPosts_next .siblingsPosts_text {
	align-items: flex-end;
}
.siblingsPosts_next .siblingsPosts_text::before {
	content: "次の記事";
	font-size: var(--fs-xs);
	font-weight: normal;
	color: var(--c-text-lighter);
	margin-bottom: 4px;
}
.bottomPosts {
  margin: 32px 0;
}
.bottomPosts_column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  @media screen and (max-width: 680px) {
    grid-template-columns: 1fr;
  }
}
.bottomPosts_block {
  margin-bottom: 0;
  &:last-child {
    margin-bottom: 0;
  }
  & ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  & li {
    border-bottom: 1px solid var(--c-background-secondary);
    &:last-child {
      border-bottom: none;
    }
  }
  & a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    color: var(--c-text-base);
    text-decoration: none;
    transition: var(--transition);
    &:hover {
      box-shadow: var(--shadow-hover);
      color: var(--c-on-primary);
      background: var(--c-primary);
    }
  }
  & img {
    width: 80px;
    height: calc(80px * 630 / 1200);
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
  }
  & span {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.summary_box {
  margin: 0 0 var(--space-13);
  padding: var(--space-9);
  color: var(--c-text-base);
  background: var(--c-background-primary);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--radius-md);
}
.summary_box_title {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-lg);
  font-weight: bold;
  color: var(--c-text-base);
}
.summary_box ul {
  margin: 0;
  padding-left: var(--space-9);
}
.tagcloud {
  padding: 10px 15px;
  a {
    font-size: var(--fs-xs);
    transition: var(--transition);
    color: var(--c-text-base);
    background: var(--c-background-primary);
    border: 1px solid var(--c-background-secondary);
    line-height: var(--lh-none);
    display: inline-block;
    white-space: nowrap;
    padding: 5px 12px;
    margin: 0 6px 8px 0;
    border-radius: var(--radius-lg);
    text-decoration: none;
    &:hover {
      background: var(--c-primary);
      color: var(--c-on-primary);
      border-color: var(--c-primary);
      & .tag-link-count {
        color: var(--c-on-primary);
      }
    }
    &:active {
      box-shadow: none;
      filter: brightness(0.95);
    }
  }
}
.tagcloud .tag-link-count {
  font-size: 0.625rem;
  color: var(--c-text-lighter);
  margin-left: 5px;
  padding: 2px;
  transition: var(--transition);
}
.google-auto-placed.ap_container {
  margin: 1.5rem 0;
}
.article_wrap > .news {
  padding: 15px;
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
  border-radius: var(--radius-md);
  margin: 10px 0 28px;
  h3 {
    margin: 0 0 6px;
    font-size: var(--fs-lg);
  }
  p {
    color: #8a6d3b;
    font-size: var(--fs-base);
    margin: 0;
  }
}
@supports (content-visibility: auto) {
  .bottomPosts,
  .noteSection,
  .sideBlock_twitter,
  .article_footer {
    content-visibility: auto;
    contain-intrinsic-size: auto none auto 400px;
  }
  .siblingsPosts {
    content-visibility: auto;
    contain-intrinsic-size: auto none auto 120px;
  }
  .articles:not(.is-list) .card_article:nth-child(n + 7) {
    content-visibility: auto;
    contain-intrinsic-size: auto none auto 260px;
  }
  .articles.is-list .card_article:nth-child(n + 7) {
    content-visibility: auto;
    contain-intrinsic-size: auto none auto 120px;
  }
}
.contents {
	max-width: var(--container-max);
	width: 100%;
	padding: 0 20px;
	margin: 30px auto 48px;
	display: flex;
	justify-content: space-between;
	@media screen and (max-width: 960px) {
		flex-direction: column;
	}
}
.article_wrap {
	max-width: var(--container-lg);
	width: calc(100% - 320px);
	@media screen and (max-width: 960px) {
		width: 100%;
	}
}
.articles {
	container-type: inline-size;
	container-name: articles;
	max-width: var(--container-lg);
	display: grid;
	grid-template-columns: repeat(3, minmax(250px, 1fr));
	gap: 32px;
	@media screen and (max-width: 1180px) {
		grid-template-columns: repeat(2, minmax(250px, 1fr));
		gap: 28px;
	}
	@media screen and (max-width: 960px) {
		grid-template-columns: repeat(2, minmax(220px, 1fr));
		gap: 24px;
	}
	@media screen and (max-width: 680px) {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}
.articles.articles-smallbox {
	grid-template-columns: repeat(2, minmax(320px, 1fr));
}
.articles.articles-smallbox .card_article {
	grid-template-rows: auto auto auto 1fr;
	grid-template-columns: 230px 1fr;
	min-height: auto;
}
.articles.articles-smallbox .card_article_link {
	grid-template-rows: subgrid;
	grid-template-columns: subgrid;
	grid-row: 1 / 5;
	grid-column: 1 / 3;
}
.articles.articles-smallbox .card_article_image {
	grid-row: 1 / 5;
	grid-column: 1;
}
.articles.articles-smallbox .card_article_link h3 {
	font-size: var(--fs-md);
	grid-column: 2;
}
.articles.articles-smallbox .card_article_tag_placeholder {
	grid-column: 2;
}
.articles.articles-smallbox .card_article_tag {
	grid-row: 3 / 4;
	grid-column: 2;
}
.articles.articles-smallbox .card_article_footer {
	padding: 0 10px 10px;
	grid-column: 2;
}
.articles.articles-smallbox .card_article_characters {
	font-size: var(--fs-base);
}
.articles.articles-smallbox .card_article_date {
	font-size: var(--fs-base);
}
.card_article {
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	background: var(--c-background-primary);
	border-radius: var(--radius-md);
	transition: var(--transition);
	box-shadow: var(--shadow-normal);
	min-height: 350px;
	@media screen and (max-width: 960px) {
		min-height: 280px;
	}
	&:hover {
		box-shadow: var(--shadow-hover);
	}
	&:active {
		box-shadow: none;
	}
}
.card_article_link {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: 1 / 5;
	grid-column: 1;
	color: var(--c-text-base);
	text-decoration: none;
	border-radius: var(--radius-md);
}
.card_article_image {
	position: relative;
	line-height: var(--lh-none);
	overflow: hidden;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	aspect-ratio: var(--ar-eyecatch);
	& img {
		max-width: 100%;
		width: 100%;
		height: 100%;
		object-fit: cover;
		vertical-align: text-bottom;
	}
	& span {
		font-size: var(--fs-xs);
		color: var(--c-white);
		background: var(--c-cat-label-bg);
		display: inline-block;
		padding: 4px 8px;
		position: absolute;
		top: 0;
		left: 0;
		&.uncategorized {
			display: inline-block;
		}
		&.webdesign {
			background: var(--c-cat-webdesign);
		}
		&.coding {
			background: var(--c-cat-coding);
		}
		&.utility {
			background: var(--c-cat-utility);
		}
	}
}
.card_article_link h3 {
	font-size: var(--fs-lg);
	color: var(--c-text-base);
	line-height: var(--lh-snug);
	margin: 0;
	padding: 10px 10px 6px;
}
.card_article_tag_placeholder {
	display: block;
}
.card_article_tag {
	grid-row: 3 / 4;
	grid-column: 1;
	padding: 0 10px;
	pointer-events: none;
	& ul {
		display: flex;
		flex-wrap: wrap;
	}
	& a {
		pointer-events: auto;
		font-size: var(--fs-xs);
		transition: var(--transition);
		color: var(--c-text-base);
		background: var(--c-background-primary);
		border: 1px solid var(--c-background-secondary);
		line-height: var(--lh-none);
		display: inline-block;
		white-space: nowrap;
		padding: 6px 8px;
		margin: 0 4px 4px 0;
		border-radius: var(--radius-lg);
		text-decoration: none;
		&:hover {
			background: var(--c-primary);
			color: var(--c-on-primary);
			border-color: var(--c-primary);
		}
		&:active {
			filter: brightness(0.95);
		}
	}
}
.card_article_footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 6px 10px 14px;
	font-size: var(--fs-xs);
	align-self: end;
	gap: 8px;
	@media screen and (max-width: 680px) {
		row-gap: 4px;
	}
}
.card_article_characters {
	font-size: var(--fs-sm);
	white-space: nowrap;
	& span {
		padding-left: 1.4em;
		position: relative;
		&::before {
			content: "";
			display: block;
			width: 18px;
			height: 18px;
			background-position: center;
			background-repeat: no-repeat;
			background-color: var(--c-text-base);
			mask-size: contain;
			position: absolute;
			top: 2px;
			left: 0;
			bottom: 0;
			margin: auto;
		}
		&.long::before {
			mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/text_long.svg);
		}
		&.normal::before {
			mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/text_mid.svg);
		}
		&.short::before {
			mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/text_short.svg);
		}
		&.memo::before {
			display: none;
		}
	}
}
.card_article_date {
	font-size: var(--fs-sm);
	flex-shrink: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}
.articles.is-list {
	grid-template-columns: 1fr;
	gap: 12px;
	max-width: 720px;
	& .card_article {
		grid-template-rows: auto auto auto 1fr;
		grid-template-columns: 160px 1fr;
		min-height: 110px;
		@media screen and (max-width: 680px) {
			grid-template-columns: 100px 1fr;
			min-height: 80px;
		}
	}
	& .card_article_link {
		grid-template-rows: subgrid;
		grid-template-columns: subgrid;
		grid-row: 1 / 5;
		grid-column: 1 / 3;
	}
	& .card_article_image {
		grid-row: 1 / 5;
		grid-column: 1;
		align-self: stretch;
		aspect-ratio: unset;
		overflow: visible;
		border-radius: 0;
		padding: 12px 0 12px 12px;
		@media screen and (max-width: 680px) {
			padding: 6px 0 6px 6px;
		}
		& span {
			position: static;
			border-radius: 0 0 var(--radius-md) var(--radius-md);
			width: 100%;
			text-align: center;
			margin-top: 0;
		}
		& img {
			width: 100%;
			height: auto;
			object-fit: cover;
			border-radius: var(--radius-md) var(--radius-md) 0 0;
		}
	}
	& .card_article_link h3 {
		font-size: var(--fs-base);
		grid-column: 2;
	}
	& .card_article_tag_placeholder {
		grid-column: 2;
	}
	& .card_article_tag {
		grid-row: 3 / 4;
		grid-column: 2;
		@media screen and (max-width: 680px) {
			display: none;
		}
	}
	& .card_article_footer {
		grid-column: 2;
		grid-row: 4;
	}
}
.contents.is-list-view {
	max-width: 960px;
}
.front-sidebar {
	max-width: 320px;
	margin-left: 36px;
	@media screen and (max-width: 680px) {
		max-width: 100%;
		margin-left: 0;
	}
}
.sideBlock {
	border-radius: var(--radius-md);
	background: var(--c-background-primary);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
	margin: 0 0 32px;
	& ul {
		list-style: none;
		padding: 0;
		margin: 0 0 10px;
		& a {
			font-size: var(--fs-sm);
			transition: var(--transition);
			color: var(--c-text-base);
			display: block;
			text-decoration: none;
			padding: 10px 12px;
			position: relative;
			& .post-count {
				font-size: var(--fs-sm);
				padding: 2px;
				color: var(--c-text-base);
				position: absolute;
				right: 20px;
				transition: var(--transition);
			}
			&:hover {
				color: var(--c-background-base);
				background: var(--c-primary);
				box-shadow: var(--shadow-hover);
				filter: brightness(1.05);
				& .post-count {
					color: var(--c-on-primary);
				}
			}
			&:active {
				box-shadow: none;
				filter: brightness(0.95);
			}
		}
		&.children a {
			padding-left: 3em;
			position: relative;
			&::before {
				transition: var(--transition);
				background: var(--c-text-lighter);
				content: "";
				display: block;
				width: 1.15em;
				height: 1px;
				position: absolute;
				left: 1.2em;
				top: 1px;
				bottom: 0;
				margin: auto;
			}
			&:hover::before {
				background: var(--c-background-base);
			}
		}
	}
}
.sideBlock_title {
	font-size: var(--fs-sm);
	color: var(--c-text-base);
	border-bottom: 1px solid var(--c-background-secondary);
	font-weight: 600;
	margin: 0 0 10px;
	padding: 16px 14px;
}
.noteSection.home {
	background: var(--c-background-secondary);
	padding: 30px 0 48px;
	& .heading {
		margin-bottom: 20px;
	}
}
.noteSection_icon {
	width: 1.1em;
	height: 1.1em;
	vertical-align: -0.15em;
	margin-right: 0.2em;
}
.noteSection_more {
	display: flex;
	justify-content: center;
	margin-top: 32px;
	& .btn {
		min-width: 240px;
		padding: 14px 24px;
	}
}
.noteSection_articles {
	display: grid;
	grid-template-columns: repeat(4, minmax(220px, 1fr));
	align-items: start;
	gap: 24px;
	@media screen and (max-width: 1180px) {
		grid-template-columns: repeat(3, minmax(220px, 1fr));
	}
	@media screen and (max-width: 960px) {
		grid-template-columns: repeat(2, minmax(200px, 1fr));
		gap: 20px;
	}
	@media screen and (max-width: 680px) {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}
.noteSection_articles .card_article {
	min-height: 300px;
}
.noteSection_card {
	& a {
		display: block;
		color: var(--c-text-base);
		background: var(--c-background-primary);
		border-radius: var(--radius-md);
		overflow: hidden;
		box-shadow: var(--shadow-normal);
		transition: var(--transition);
		text-decoration: none;
		&:hover {
			box-shadow: var(--shadow-hover);
			filter: brightness(1.05);
		}
		&:active {
			box-shadow: none;
			filter: brightness(0.95);
		}
	}
}
.noteSection_card_text {
	padding: 10px 12px 14px;
	& h3 {
		font-size: var(--fs-base);
		line-height: var(--lh-snug);
		margin: 0 0 8px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}
.noteSection_card_date {
	font-size: var(--fs-xs);
	color: var(--c-text-lighter);
}
.singleContents_wrap {
  max-width: 1118px;
  margin: 0 auto 64px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  &.is-page {
    max-width: 960px;
  }
}
.singleContents_left > *:last-child {
  margin-bottom: 0;
}
.singleContents_left {
  max-width: 760px;
  width: calc(100% - 358px);
  @media screen and (max-width: 960px) {
    width: 100%;
    max-width: 100%;
    & > *:not(.article) {
      margin-left: 20px;
      margin-right: 20px;
    }
  }
}
.sidebar {
  max-width: 320px;
  width: 100%;
  margin: 0 0 0 38px;
  padding: 0;
  @media screen and (max-width: 960px) {
    display: none;
  }
  &.front-sidebar {
    flex-shrink: 0;
    margin-left: 36px;
    @media screen and (max-width: 960px) {
      display: block;
      max-width: none;
      width: 100%;
      margin-left: 0;
    }
  }
  & .adsbygoogle {
    margin-bottom: 20px;
  }
  & .sideBlock_sticky {
    position: sticky;
    top: 0;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    & .sideBlock {
      margin: 0;
    }
  }
}
.sidebar_open {
  appearance: none;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-normal);
  transition: var(--transition);
  color: var(--c-background-base);
  background: var(--c-text-base);
  display: none;
  width: 54px;
  height: 54px;
  border-radius: 54px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-overlay);
  text-align: center;
  &::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/toc.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    margin: auto;
  }
  &:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
  }
  @media screen and (max-width: 960px) {
    display: block;
  }
  &.active {
    background: var(--c-text-lighter);
  }
  & img {
    margin: 16px auto;
  }
}
.sidebar_sp {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-raised);
  &.active {
    display: block;
  }
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: var(--z-bg);
  }
  & .sideBlock_sp {
    border-radius: var(--radius-md);
    background: var(--c-background-primary);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
    max-width: calc(100% - 40px);
    margin: 20px;
    & ul {
      list-style: none;
      max-height: 50vh;
      padding: 0;
      margin: 0;
      overflow-y: auto;
      & a {
        color: var(--c-text-base);
        display: block;
        text-decoration: none;
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
  }
}
.article {
  display: block;
  color: var(--c-text-base);
  background: var(--c-background-primary);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-normal);
  margin: 0 auto 40px;
  padding: 0 20px;
  & details {
    border-radius: var(--radius-md);
    transition: var(--transition);
    color: var(--c-text-base);
    background: var(--c-background-secondary);
    border: 1px solid var(--c-background-base);
    display: block;
    margin: -10px 0 40px;
    padding: 20px 20px 6px;
    @media screen and (max-width: 680px) {
      margin: -16px -10px 40px;
    }
  }
  & summary {
    font-size: var(--fs-md);
    font-weight: bold;
    display: list-item;
    margin-bottom: 14px;
    outline: none;
    cursor: pointer;
    &:focus-visible {
      outline: 2px solid var(--c-primary);
      outline-offset: 2px;
    }
  }
}
.article_header {
  padding: 20px 0;
  @media screen and (max-width: 680px) {
    margin: 0 -20px;
  }
  & h1 {
    font-size: clamp(1.125rem, 0.7rem + 1.9vw, 1.75rem);
    font-weight: normal;
    margin: 0 0 15px;
    padding: 0;
    line-height: 1.4;
    @media screen and (max-width: 680px) {
      padding: 0.5em;
    }
  }
}
.article_state {
  background: var(--c-background-secondary);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 20px;
  margin: 0 -20px 0;
  @media screen and (max-width: 960px) {
    padding: 8px 10px;
    margin: 0 0;
  }
}
.article_date {
  float: left;
  display: flex;
  align-items: center;
  gap: 12px;
}
.article_image {
  position: relative;
  overflow: hidden;
  margin: 0 -20px 12px;
  aspect-ratio: var(--ar-eyecatch);
  @media screen and (max-width: 960px) {
    margin: 0 0 12px;
  }
  @media screen and (max-width: 680px) {
    margin: 0 0 12px;
  }
  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) inset;
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}
.article_category {
  font-size: var(--fs-sm);
  transition: var(--transition);
  color: var(--c-text-base);
  border: 1px solid var(--c-background-secondary);
  float: left;
  line-height: var(--lh-none);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 4px 12px;
  margin: 0 6px 6px 0;
  border-radius: var(--radius-lg);
  text-decoration: none;
  position: relative;
  z-index: var(--z-default);
  &::before {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/folder.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    flex-shrink: 0;
  }
  & a {
    color: var(--c-text-base);
    text-decoration: none;
  }
}
.article_tags {
  overflow: hidden;
}
.article_tag {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  & a {
    font-size: var(--fs-sm);
    transition: var(--transition);
    color: var(--c-text-base);
    background: var(--c-background-primary);
    border: 1px solid var(--c-background-secondary);
    line-height: var(--lh-none);
    display: inline-block;
    white-space: nowrap;
    padding: 6px 12px;
    margin: 0 6px 6px 0;
    border-radius: var(--radius-lg);
    text-decoration: none;
    position: relative;
    z-index: var(--z-default);
    &:hover {
      background: var(--c-primary);
      color: var(--c-on-primary);
      border-color: var(--c-primary);
    }
  }
}
.article_footer_box {
  border-radius: var(--radius-md);
  background: var(--c-background-secondary);
  padding: 15px 15px 8px;
  margin: 0 0 20px;
}
.article_footer {
  padding-bottom: 10px;
  & h2 {
    font-size: var(--fs-lg);
    margin: 0 0 0.8em;
    padding: 0 5px;
  }
  & .references ul {
    margin: 0 0 20px;
    padding: 0 0 0 8px;
    list-style: none;
    & li {
      padding: 0 0 0 10px;
      margin-bottom: 4px;
      position: relative;
      &::before {
        border-radius: var(--radius-md);
        content: "";
        display: block;
        background: var(--c-text-base);
        width: 4px;
        height: 4px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
    & a {
      color: var(--c-text-base);
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  & .histories ul {
    margin: 0 0 20px;
    padding: 0 0 0 8px;
    list-style: none;
    & li {
      padding: 0 0 0 10px;
      margin-bottom: 4px;
      position: relative;
      &::before {
        border-radius: var(--radius-md);
        content: "";
        display: block;
        background: var(--c-text-base);
        width: 4px;
        height: 4px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
    & a {
      color: var(--c-text-base);
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
.sideBlock_title + .tab_menu {
  margin-top: -10px;
}
.sideBlock .tab_menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--c-background-secondary);
  margin-bottom: 10px;
  & button {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-sm);
    transition: var(--transition);
    display: block;
    padding: 8px 4px;
    width: 100%;
    text-align: center;
    background: transparent;
    color: var(--c-text-base);
    &:hover {
      box-shadow: var(--shadow-hover);
      color: var(--c-on-primary);
      background: var(--c-primary);
    }
    &:focus-visible {
      outline: 2px solid var(--c-primary);
      outline-offset: -2px;
    }
    &:active {
      box-shadow: none;
    }
    &.is-active {
      color: var(--c-on-primary);
      background: var(--c-primary);
    }
  }
}
.sideBlock .tab_content {
  display: none;
  &.is-active {
    display: block;
  }
}
.sideBlock_toc ul {
  max-height: calc(50vh - 80px);
  min-height: 100px;
  overflow-y: auto;
  position: relative;
  & a {
    padding: 5px 15px;
    &:hover {
      box-shadow: var(--shadow-hover);
      color: var(--c-on-primary);
      background: var(--c-primary);
    }
    &:active {
      box-shadow: none;
    }
  }
  & .toc-active a {
    color: var(--c-primary);
    &:hover {
      color: var(--c-on-primary);
    }
  }
  & .toc-active {
    anchor-name: --toc-active;
  }
  @supports (anchor-name: --a) {
    &::before {
      content: "";
      position: absolute;
      top: anchor(--toc-active top);
      left: 0;
      width: 3px;
      height: anchor-size(--toc-active height);
      background: var(--c-primary);
      border-radius: var(--radius-sm);
      transition:
        top 0.2s ease,
        height 0.2s ease;
    }
  }
  & .toc-h2 a {
    padding: 5px 15px;
  }
  & .toc-h3 a {
    padding: 5px 15px 5px 25px;
  }
  & .toc-h4 a {
    padding: 5px 15px 5px 35px;
  }
  & .toc-h5 a {
    padding: 5px 15px 5px 45px;
  }
  & .toc-h6 a {
    padding: 5px 15px 5px 55px;
  }
}
.sideBlock_ai {
  flex-shrink: 0;
  & .ai_consult_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 14px 14px;
  }
}
.btn_ai {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--c-white);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
  &:hover {
    box-shadow: var(--shadow-hover);
    filter: brightness(1.1);
  }
  &:active {
    box-shadow: none;
    filter: brightness(0.95);
  }
  & .ai_icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    & svg {
      width: 1em;
      height: 1em;
    }
  }
}
.btn_chatgpt    { background: var(--c-ai-chatgpt); }
.btn_claude     { background: var(--c-ai-claude); }
.btn_perplexity { background: var(--c-ai-perplexity); }
.btn_grok       { background: var(--c-ai-grok); border: 1px solid var(--c-text-lighter); }
.sideBlock_ad {
  box-shadow: none;
  min-height: 250px;
  & p.ad {
    font-size: var(--fs-xs);
    text-align: center;
  }
}
.sideBlock_series ul {
  max-height: calc(50vh - 100px);
  overflow-y: auto;
}
.sideBlock_article {
  & ul {
    & a {
      overflow: hidden;
      padding: 5px 15px;
      &.is-active {
        color: var(--c-background-base);
        background: var(--c-primary);
        box-shadow: none;
        filter: brightness(1.05);
      }
    }
    & img {
      max-width: 100px;
      max-height: fit-content;
      height: auto;
      float: left;
      margin-right: 5px;
      contain-intrinsic-size: auto 100px;
    }
    & span {
      font-size: var(--fs-base);
    }
  }
  & > a {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: var(--transition);
    color: var(--c-text-base);
    border-top: 1px solid var(--c-background-secondary);
    display: block;
    text-align: center;
    padding: 12px;
    &:hover {
      color: var(--c-background-base);
      background: var(--c-primary);
      box-shadow: var(--shadow-hover);
      filter: brightness(1.05);
    }
    &:active {
      box-shadow: none;
      filter: brightness(0.95);
    }
  }
}
.articles.series-articles {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 32px;
}
.article_memo {
  display: block;
  color: var(--c-text-base);
  background: var(--c-background-primary);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-normal);
  padding: 2px 20px;
  margin-bottom: 30px;
  &:empty {
    display: none;
  }
}
.simple_article {
  box-shadow: var(--shadow-normal);
  display: block;
  color: var(--c-text-base);
  background: var(--c-background-primary);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  padding: 20px;
  @media screen and (max-width: 960px) {
    padding: 0;
  }
  &:hover {
    box-shadow: var(--shadow-hover);
  }
  &:active {
    box-shadow: none;
  }
  & > a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-default);
  }
}
.simple_article_wrap {
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-rows: 1fr;
  gap: 16px;
  position: relative;
  @media screen and (max-width: 960px) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 10px;
  }
}
.simple_article_image {
  max-width: 100%;
  width: 100%;
  position: relative;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  overflow: hidden;
  aspect-ratio: var(--ar-eyecatch);
  @media screen and (max-width: 960px) {
    border-radius: 0;
  }
  & img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.simple_article_category {
  font-size: var(--fs-xs);
  color: var(--c-white);
  background: var(--c-cat-label-bg);
  display: inline-block;
  padding: 4px 8px;
  position: absolute;
  top: 0;
  left: 0;
  &.uncategorized {
    display: inline-block;
  }
  &.webdesign {
    background: var(--c-cat-webdesign);
  }
  &.coding {
    background: var(--c-cat-coding);
  }
  &.utility {
    background: var(--c-cat-utility);
  }
}
.simple_article_text {
  padding: 10px 10px 35px;
  position: relative;
  @media screen and (max-width: 680px) {
    padding-bottom: 40px;
  }
  & h3 {
    font-size: var(--fs-lg);
    color: var(--c-text-base);
    line-height: var(--lh-snug);
    margin: 0 0 6px;
  }
}
.simple_article_excerpt {
  @media screen and (max-width: 960px) {
    display: none;
  }
  & p {
    font-size: var(--fs-sm);
    color: var(--c-text-lighter);
  }
}
.simple_article_tag {
  & ul {
    display: flex;
    flex-wrap: wrap;
  }
  & a {
    font-size: var(--fs-xs);
    transition: var(--transition);
    color: var(--c-text-base);
    background: var(--c-background-primary);
    border: 1px solid var(--c-background-secondary);
    line-height: var(--lh-none);
    display: inline-block;
    white-space: nowrap;
    padding: 4px 8px;
    margin: 0 6px 6px 0;
    border-radius: var(--radius-lg);
    text-decoration: none;
    position: relative;
    z-index: var(--z-default);
    &:hover {
      box-shadow: var(--shadow-hover);
      filter: brightness(1.05);
    }
    &:active {
      box-shadow: none;
      filter: brightness(0.95);
    }
  }
}
.simple_article_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 10px 14px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.simple_article_characters {
  & span {
    padding-left: 1.4em;
    position: relative;
    &::before {
      content: '';
      display: block;
      width: 18px;
      height: 18px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 18px;
      position: absolute;
      top: 2px;
      left: 0;
      bottom: 0;
      margin: auto;
    }
    &.long::before {
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%236A6A6A%22%20d%3D%22M1%204h10v1H1zM1%202h10v1H1zM1%206h10v1H1z%22%2F%3E%3Cpath%20fill%3D%22%23DDD%22%20d%3D%22M1%208h10v1H1z%22%2F%3E%3Cpath%20fill%3D%22%236A6A6A%22%20d%3D%22M1%208h7v1H1z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    }
    &.normal::before {
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23DDD%22%20d%3D%22M1%206h10v1H1zM1%208h10v1H1z%22%2F%3E%3Cpath%20fill%3D%22%236A6A6A%22%20d%3D%22M1%202h10v1H1zM1%204h10v1H1zM1%206h4v1H1z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    }
    &.short::before {
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23DDD%22%20d%3D%22M1%202h10v1H1z%22%2F%3E%3Cpath%20fill%3D%22%236A6A6A%22%20d%3D%22M1%202h8v1H1z%22%2F%3E%3Cpath%20fill%3D%22%23DDD%22%20d%3D%22M1%208h10v1H1zM1%206h10v1H1zM1%204h10v1H1z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    }
    &.memo::before {
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.5%201.5v9h4.288L9.5%207.793V1.5h-7z%22%20stroke%3D%22%236A6A6A%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
    }
  }
}
.simple_article_date {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.entory_content {
  font-size: 1.03125rem;
  width: 100%;
  line-height: 1.65;
  font-kerning: auto;
  font-variant-ligatures: none;
  letter-spacing: var(--tracking);
  margin: 0;
  padding: 0 0 20px;
  overflow-wrap: break-word;
  & h1:nth-of-type(1),
  & h2:nth-of-type(1),
  & h3:nth-of-type(1),
  & h4:nth-of-type(1),
  & h5:nth-of-type(1),
  & h6:nth-of-type(1) {
    margin-top: 0;
  }
  & h2 {
    font-size: 1.5em;
    border-radius: var(--radius-md);
    color: var(--c-text-base);
    background: var(--c-background-secondary);
    padding: 14px 12px;
    font-weight: 400;
    margin: 2em 0 1em;
  }
  & h3 {
    font-size: 1.375em;
    color: var(--c-text-base);
    border-bottom: 3px solid var(--c-text-base);
    padding: 5px 12px;
    font-weight: 600;
    margin: 2em 0 1em;
  }
  & h4 {
    font-size: 1.25em;
    padding: 5px 5px 5px 12px;
    font-weight: 600;
    position: relative;
    margin: 2em 0 1.5em;
    &::before {
      border-radius: var(--radius-md);
      content: "";
      display: block;
      background: var(--c-text-base);
      width: 3px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      margin: auto;
    }
  }
  & h5 {
    font-size: 1.125em;
    padding: 5px 0;
    font-weight: 600;
    margin: 1.5em 0 1em;
  }
  & h6 {
    font-size: 1em;
    padding: 5px 0;
    font-weight: 600;
    margin: 1.5em 0 1em;
  }
  & p {
    font-size: 1em;
    margin: 0 0 1.5em;
    color: var(--c-text-base);
    text-wrap: pretty; 
  }
  & img {
    max-width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
  }
  & figure {
    max-width: 100%;
    margin-inline: 0;
  }
  & strong {
    font-weight: 600;
    background: linear-gradient(
      transparent 41%,
      var(--c-primary) 0,
      var(--c-primary) 0
    );
  }
  & ul {
    padding: 0;
    margin: 1em 0 1.5em;
    list-style: none;
    & li {
      font-size: 1em;
      line-height: var(--lh-snug);
      padding: 0 0 0.2em 1.5em;
      position: relative;
      &::before {
        content: "";
        display: block;
        background: var(--c-text-base);
        width: 0.25em;
        height: 0.25em;
        border-radius: 50%;
        position: absolute;
        top: 0.65em;
        left: 0.75em;
      }
    }
    & ul {
      margin: 0.2em 0 0;
    }
  }
  & ol {
    padding: 0;
    margin: 1em 0 1.5em;
    list-style: none;
    counter-reset: number;
    & li {
      font-size: 1em;
      line-height: var(--lh-snug);
      padding: 0 0 0.2em 1.5em;
      position: relative;
    }
    & > li::before {
      counter-increment: number;
      content: counter(number) ".";
      color: var(--c-text-base);
      display: block;
      position: absolute;
      top: 0;
      left: 0.3em;
    }
    & ol {
      margin: 0.2em 0 0;
      & li::before {
        border-radius: var(--radius-md);
        content: "";
        background: var(--c-text-base);
        width: 4px;
        height: 4px;
        top: 0.8em;
        left: 0.8em;
      }
    }
    & ul {
      margin: 0.2em 0 0;
      list-style: none;
      & li {
        font-size: 1em;
        line-height: var(--lh-snug);
        padding: 0 0 0.2em 1.5em;
        position: relative;
        &::before {
          content: "";
          display: block;
          background: var(--c-text-base);
          width: 0.25em;
          height: 0.25em;
          border-radius: 50%;
          position: absolute;
          top: 0.65em;
          left: 0.75em;
        }
      }
    }
  }
  & a {
    transition: var(--transition);
    color: var(--c-text-link);
    text-decoration: underline;
  }
  & iframe {
    max-width: 100%;
  }
  & blockquote {
    font-size: 1em;
    background: var(--c-background-secondary);
    margin: 1em 0 1.5em;
    padding: 1em 1em 0.2em 1.5em;
    position: relative;
    &::before {
      background: var(--c-background-primary);
      content: "";
      display: block;
      width: 4px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      margin: auto;
    }
    & p {
      margin: 0 0 0.2em;
    }
    & cite {
      display: block;
      font-style: normal;
      text-align: right;
      margin: 0;
      & a {
        color: var(--c-text-base);
        text-decoration: underline;
        &:hover {
          text-decoration: none;
        }
        &::after {
          display: none;
        }
      }
    }
  }
  & kbd {
    border-radius: var(--radius-md);
    color: var(--c-text-base);
    background: var(--c-background-secondary);
    display: inline-block;
    min-width: 12px;
    padding: 0 6px;
    margin: 0 2px 0;
    box-shadow:
      0 0 3px light-dark(#c3c3c3, #000) inset,
      0 2px 0px light-dark(rgba(228, 228, 228, 0.5), rgba(0, 0, 0, 0.5));
    font: normal 14px arial;
    text-align: center;
    line-height: var(--lh-normal);
    vertical-align: text-bottom;
  }
  & .table-container {
    position: relative;
    margin-bottom: 1.5em;
    & .table-scroll {
      margin-bottom: 0;
    }
  }
  & .table-toolbar {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    @media (max-width: 680px) {
      display: none;
    }
  }
  & .table-expand-btn {
    background: transparent;
    border: 1px solid var(--c-text-lighter);
    color: var(--c-text-lighter);
    width: 1.75em;
    height: 1.75em;
    padding: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    &::before {
      content: "";
      display: block;
      width: 13px;
      height: 13px;
      background-color: currentColor;
      mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/maximize.svg);
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
    }
    &:hover {
      background: var(--c-background-secondary);
      color: var(--c-text-base);
      border-color: var(--c-text-base);
    }
  }
  & .table-scroll {
    max-width: 100%;
    overflow: auto;
    white-space: nowrap;
    margin-bottom: 1.5em;
    &::-webkit-scrollbar {
      height: 5px;
    }
    &::-webkit-scrollbar-track {
      background: var(--c-background-primary);
    }
    &::-webkit-scrollbar-thumb {
      background: var(--c-background-secondary);
    }
  }
  & table {
    font-size: 1em;
    border-collapse: collapse;
    max-width: 100%;
    & thead {
      border-bottom: solid 2px var(--c-text-lighter);
      & th {
        border-top-color: var(--c-text-base);
      }
      & th:first-child {
        border-left-color: var(--c-text-base);
      }
      & th:last-child {
        border-right-color: var(--c-text-base);
      }
    }
    & p {
      margin: 0;
      line-height: 1.15;
    }
    & strong {
      background: none;
    }
  }
  & th,
  & td {
    border: solid 1px var(--c-text-lighter);
    padding: 5px 10px;
    text-align: left;
    font-weight: normal;
    vertical-align: top;
  }
  & th {
    color: var(--c-th-text);
    background: var(--c-th-bg);
    max-width: 360px;
    & a {
      background: var(--c-th-bg);
      color: var(--c-th-text);
      text-decoration: underline;
      &:hover {
        text-decoration: none;
      }
    }
  }
  & pre {
    display: block;
    & code {
      display: block;
    }
  }
  & pre.wp-block-code {
    background: #282c34;
    border-radius: var(--radius-md);
    padding: 0;
    margin: 1em 0 1.5em;
    overflow: hidden;
    & code {
      text-align: left;
      min-width: 0;
      border-radius: 0;
      margin: 0;
    }
  }
  & code:not(.hljs):not(pre code) {
    font-size: 0.875em;
    border-radius: var(--radius-sm);
    background: var(--c-background-secondary);
    display: inline;
    padding: 2px 6px;
    line-height: var(--lh-normal);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  & code.jljs {
    display: block;
  }
  & .linkcard {
    margin: 1.5em 0 !important;
  }
  & .lkc-external-wrap,
  & .lkc-internal-wrap,
  & .lkc-this-wrap {
    border: 1px solid var(--c-background-secondary);
    border-radius: var(--radius-md);
    background: var(--c-background-primary);
    overflow: hidden;
    transition: var(--transition);
    max-width: 100%;
    &:hover {
      background: var(--c-background-secondary);
    }
  }
  & .lkc-content {
    flex: 1;
    min-width: 0;
    height: auto;
    margin-top: 8px;
  }
  .lkc-card {
    margin: 0;
    padding: 12px;
  }
  & .lkc-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--c-text-base);
    line-height: var(--lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }
  & .lkc-title-text {
    color: inherit;
  }
  & .lkc-excerpt {
    font-size: var(--fs-xs);
    color: var(--c-text-lighter);
    line-height: var(--lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }
  & .lkc-info {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
  }
  & .lkc-favicon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  & .lkc-domain {
    font-size: var(--fs-xs);
    color: var(--c-text-lighter);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  & .lkc-url {
    color: var(--c-text-link);
    margin-bottom: 4px;
  }
  & .lkc-thumbnail {
    flex-shrink: 0;
    width: 160px;
    margin-right: 0.5em;
    aspect-ratio: 16 / 9;
    order: 1;
    overflow: hidden;
  }
  & .lkc-thumbnail-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  & .lkc-link {
    display: block;
    text-decoration: none;
    &::after {
      display: none;
    }
    &:hover {
      text-decoration: none;
    }
  }
  & .lkc-share,
  & .lkc-url-info,
  & .lkc-date,
  & .lkc-heading,
  & .lkc-more,
  & .lkc-added {
    display: none;
  }
  @media screen and (max-width: 480px) {
    & .lkc-thumbnail {
      width: 100px;
    }
    & .lkc-content {
      padding: 10px 12px;
    }
    & .lkc-title {
      font-size: var(--fs-sm);
    }
    & .lkc-excerpt {
      display: none;
    }
  }
  & .box-reference {
    border-radius: var(--radius-md);
    padding: 1em;
    border: 2px solid var(--c-text-lighter);
    & ul {
      margin: 0;
      & a {
        color: var(--c-text-base);
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
.entory_content .box-reference-title {
  color: var(--c-text-base);
  font-weight: bold;
  margin-bottom: 0.5em;
}
.form_search {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-normal);
	background: var(--c-background-primary);
	overflow: hidden;
	margin: 0 0 20px;
}
::placeholder {
	color: var(--c-text-lighter);
}
.form {
	& input[type="text"],
	& input[type="search"] {
		border-radius: var(--radius-md);
		color: var(--c-text-base);
		border: 2px solid var(--c-background-secondary);
		outline: none;
		padding: 7px 8px;
		appearance: none;
		&:focus-visible {
			outline: 2px solid var(--c-primary);
			outline-offset: 2px;
		}
	}
	& button {
		border-radius: var(--radius-md);
		transition: var(--transition);
		color: var(--c-background-base);
		background: var(--c-primary);
		border: none;
		outline: none;
		padding: 8px;
		margin: 0 0 0 4px;
		appearance: none;
		text-align: center;
		cursor: pointer;
		@media screen and (max-width: 680px) {
			margin: 0;
		}
		&:hover {
			box-shadow: var(--shadow-hover);
			filter: brightness(1.05);
		}
		&:active {
			box-shadow: none;
			filter: brightness(0.95);
		}
	}
}
.form_main {
	padding: 15px;
	& input {
		width: calc(100% - 74px);
	}
	& button {
		width: 64px;
	}
}
.form_sub {
	padding: 15px;
	border-top: 1px solid var(--c-background-base);
}
.form_item {
	display: flex;
}
.form_item_title {
	display: inline;
	width: 64px;
	margin-top: 8px;
	font-size: var(--fs-xs);
}
.form_item_wrap {
	width: calc(100% - 64px);
}
.multiSelect {
	position: relative;
	margin-bottom: 4px;
}
.multiSelect_trigger {
	border-radius: var(--radius-md);
	color: var(--c-text-lighter);
	border: 2px solid var(--c-background-secondary);
	padding: 6px 28px 6px 8px;
	font-size: var(--fs-sm);
	cursor: pointer;
	position: relative;
	&.has-value {
		color: var(--c-text-base);
	}
	&::after {
		content: "";
		display: block;
		width: 14px;
		height: 14px;
		background-color: var(--c-text-lighter);
		mask-image: url(//webrandum.net/mskz/wp-content/themes/webrandum-2026/assets/css/dist/../../images/icons/chevron_down.svg);
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: center;
		position: absolute;
		top: 0;
		right: 8px;
		bottom: 0;
		margin: auto;
		transition: var(--transition);
	}
}
.multiSelect.is-open .multiSelect_trigger::after {
	transform: rotate(180deg);
}
.multiSelect_selected {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	&:not(:empty) {
		margin-bottom: 4px;
	}
}
.multiSelect_tag {
	font-size: var(--fs-xs);
	color: var(--c-text-base);
	background: var(--c-background-primary);
	border: 1px solid var(--c-background-secondary);
	border-radius: var(--radius-lg);
	padding: 4px 6px 4px 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	line-height: var(--lh-none);
}
.multiSelect_tag_remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	font-size: 10px;
	color: var(--c-text-lighter);
	background: var(--c-background-secondary);
	border: none;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	line-height: 1;
	flex-shrink: 0;
	&:hover {
		color: var(--c-text-base);
	}
}
.multiSelect_dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	z-index: var(--z-dropdown);
	background: var(--c-background-primary);
	border: 2px solid var(--c-background-secondary);
	border-radius: var(--radius-md);
	overflow: hidden;
}
@supports (anchor-name: --a) {
	.multiSelect_dropdown {
		position: fixed;
		top: anchor(bottom);
		left: anchor(left);
		right: auto;
		width: anchor-size(width);
	}
}
.multiSelect.is-open .multiSelect_dropdown {
	display: block;
}
.multiSelect_search {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--c-background-secondary);
	padding: 8px;
	font-size: var(--fs-sm);
	outline: none;
	box-sizing: border-box;
	&:focus-visible {
		outline: 2px solid var(--c-primary);
		outline-offset: -2px;
	}
}
.multiSelect_options {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 200px;
	overflow-y: auto;
	& li {
		font-size: var(--fs-sm);
		padding: 8px;
		cursor: pointer;
		transition: var(--transition);
		&::before {
			display: none;
		}
		&:hover {
			background: var(--c-background-secondary);
		}
		&.is-selected {
			color: var(--c-background-primary);
			background: var(--c-primary);
		}
	}
}
.search .article {
	width: 100%;
}

img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
:root{--wp--preset--aspect-ratio--square:1;--wp--preset--aspect-ratio--4-3:4/3;--wp--preset--aspect-ratio--3-4:3/4;--wp--preset--aspect-ratio--3-2:3/2;--wp--preset--aspect-ratio--2-3:2/3;--wp--preset--aspect-ratio--16-9:16/9;--wp--preset--aspect-ratio--9-16:9/16;--wp--preset--color--black:#000;--wp--preset--color--cyan-bluish-gray:#abb8c3;--wp--preset--color--white:#fff;--wp--preset--color--pale-pink:#f78da7;--wp--preset--color--vivid-red:#cf2e2e;--wp--preset--color--luminous-vivid-orange:#ff6900;--wp--preset--color--luminous-vivid-amber:#fcb900;--wp--preset--color--light-green-cyan:#7bdcb5;--wp--preset--color--vivid-green-cyan:#00d084;--wp--preset--color--pale-cyan-blue:#8ed1fc;--wp--preset--color--vivid-cyan-blue:#0693e3;--wp--preset--color--vivid-purple:#9b51e0;--wp--preset--color--primary:#0076b5;--wp--preset--color--secondary:#17c2c7;--wp--preset--color--background-base:#f7f9fb;--wp--preset--color--background-primary:#fff;--wp--preset--color--background-secondary:#f0f2f5;--wp--preset--color--text-base:#555;--wp--preset--color--text-lighter:#676767;--wp--preset--color--text-link:#0076b5;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple:linear-gradient(135deg,#0693e3 0%,#9b51e0 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan:linear-gradient(135deg,#7adcb4 0%,#00d082 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange:linear-gradient(135deg,#fcb900 0%,#ff6900 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red:linear-gradient(135deg,#ff6900 0%,#cf2e2e 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray:linear-gradient(135deg,#eee 0%,#a9b8c3 100%);--wp--preset--gradient--cool-to-warm-spectrum:linear-gradient(135deg,#4aeadc 0%,#9778d1 20%,#cf2aba 40%,#ee2c82 60%,#fb6962 80%,#fef84c 100%);--wp--preset--gradient--blush-light-purple:linear-gradient(135deg,#ffceec 0%,#9896f0 100%);--wp--preset--gradient--blush-bordeaux:linear-gradient(135deg,#fecda5 0%,#fe2d2d 50%,#6b003e 100%);--wp--preset--gradient--luminous-dusk:linear-gradient(135deg,#ffcb70 0%,#c751c0 50%,#4158d0 100%);--wp--preset--gradient--pale-ocean:linear-gradient(135deg,#fff5cb 0%,#b6e3d4 50%,#33a7b5 100%);--wp--preset--gradient--electric-grass:linear-gradient(135deg,#caf880 0%,#71ce7e 100%);--wp--preset--gradient--midnight:linear-gradient(135deg,#020381 0%,#2874fc 100%);--wp--preset--font-size--small:13px;--wp--preset--font-size--medium:20px;--wp--preset--font-size--large:36px;--wp--preset--font-size--x-large:42px;--wp--preset--font-family--noto-sans-jp:'Noto Sans CJK JP','Noto Sans JP',sans-serif;--wp--preset--spacing--20:.44rem;--wp--preset--spacing--30:.67rem;--wp--preset--spacing--40:1rem;--wp--preset--spacing--50:1.5rem;--wp--preset--spacing--60:2.25rem;--wp--preset--spacing--70:3.38rem;--wp--preset--spacing--80:5.06rem;--wp--preset--shadow--natural:6px 6px 9px rgba(0,0,0,.2);--wp--preset--shadow--deep:12px 12px 50px rgba(0,0,0,.4);--wp--preset--shadow--sharp:6px 6px 0px rgba(0,0,0,.2);--wp--preset--shadow--outlined:6px 6px 0px -3px #fff,6px 6px #000;--wp--preset--shadow--crisp:6px 6px 0px #000}:root{--wp--style--global--content-size:960px;--wp--style--global--wide-size:1180px}:where(body){margin:0}.wp-site-blocks>.alignleft{float:left;margin-right:2em}.wp-site-blocks>.alignright{float:right;margin-left:2em}.wp-site-blocks>.aligncenter{justify-content:center;margin-left:auto;margin-right:auto}:where(.wp-site-blocks)>*{margin-block-start:24px;margin-block-end:0}:where(.wp-site-blocks)>:first-child{margin-block-start:0}:where(.wp-site-blocks)>:last-child{margin-block-end:0}:root{--wp--style--block-gap:24px}:root :where(.is-layout-flow)>:first-child{margin-block-start:0}:root :where(.is-layout-flow)>:last-child{margin-block-end:0}:root :where(.is-layout-flow)>*{margin-block-start:24px;margin-block-end:0}:root :where(.is-layout-constrained)>:first-child{margin-block-start:0}:root :where(.is-layout-constrained)>:last-child{margin-block-end:0}:root :where(.is-layout-constrained)>*{margin-block-start:24px;margin-block-end:0}:root :where(.is-layout-flex){gap:24px}:root :where(.is-layout-grid){gap:24px}.is-layout-flow>.alignleft{float:left;margin-inline-start:0;margin-inline-end:2em}.is-layout-flow>.alignright{float:right;margin-inline-start:2em;margin-inline-end:0}.is-layout-flow>.aligncenter{margin-left:auto !important;margin-right:auto !important}.is-layout-constrained>.alignleft{float:left;margin-inline-start:0;margin-inline-end:2em}.is-layout-constrained>.alignright{float:right;margin-inline-start:2em;margin-inline-end:0}.is-layout-constrained>.aligncenter{margin-left:auto !important;margin-right:auto !important}.is-layout-constrained>:where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:var(--wp--style--global--content-size);margin-left:auto !important;margin-right:auto !important}.is-layout-constrained>.alignwide{max-width:var(--wp--style--global--wide-size)}body .is-layout-flex{display:flex}.is-layout-flex{flex-wrap:wrap;align-items:center}.is-layout-flex>:is(*,div){margin:0}body .is-layout-grid{display:grid}.is-layout-grid>:is(*,div){margin:0}body{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0}:root :where(.wp-element-button,.wp-block-button__link){background-color:#32373c;border-width:0;color:#fff;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;padding-top:calc(0.667em + 2px);padding-right:calc(1.333em + 2px);padding-bottom:calc(0.667em + 2px);padding-left:calc(1.333em + 2px);text-decoration:none;text-transform:inherit}.has-black-color{color:var(--wp--preset--color--black) !important}.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray) !important}.has-white-color{color:var(--wp--preset--color--white) !important}.has-pale-pink-color{color:var(--wp--preset--color--pale-pink) !important}.has-vivid-red-color{color:var(--wp--preset--color--vivid-red) !important}.has-luminous-vivid-orange-color{color:var(--wp--preset--color--luminous-vivid-orange) !important}.has-luminous-vivid-amber-color{color:var(--wp--preset--color--luminous-vivid-amber) !important}.has-light-green-cyan-color{color:var(--wp--preset--color--light-green-cyan) !important}.has-vivid-green-cyan-color{color:var(--wp--preset--color--vivid-green-cyan) !important}.has-pale-cyan-blue-color{color:var(--wp--preset--color--pale-cyan-blue) !important}.has-vivid-cyan-blue-color{color:var(--wp--preset--color--vivid-cyan-blue) !important}.has-vivid-purple-color{color:var(--wp--preset--color--vivid-purple) !important}.has-primary-color{color:var(--wp--preset--color--primary) !important}.has-secondary-color{color:var(--wp--preset--color--secondary) !important}.has-background-base-color{color:var(--wp--preset--color--background-base) !important}.has-background-primary-color{color:var(--wp--preset--color--background-primary) !important}.has-background-secondary-color{color:var(--wp--preset--color--background-secondary) !important}.has-text-base-color{color:var(--wp--preset--color--text-base) !important}.has-text-lighter-color{color:var(--wp--preset--color--text-lighter) !important}.has-text-link-color{color:var(--wp--preset--color--text-link) !important}.has-black-background-color{background-color:var(--wp--preset--color--black) !important}.has-cyan-bluish-gray-background-color{background-color:var(--wp--preset--color--cyan-bluish-gray) !important}.has-white-background-color{background-color:var(--wp--preset--color--white) !important}.has-pale-pink-background-color{background-color:var(--wp--preset--color--pale-pink) !important}.has-vivid-red-background-color{background-color:var(--wp--preset--color--vivid-red) !important}.has-luminous-vivid-orange-background-color{background-color:var(--wp--preset--color--luminous-vivid-orange) !important}.has-luminous-vivid-amber-background-color{background-color:var(--wp--preset--color--luminous-vivid-amber) !important}.has-light-green-cyan-background-color{background-color:var(--wp--preset--color--light-green-cyan) !important}.has-vivid-green-cyan-background-color{background-color:var(--wp--preset--color--vivid-green-cyan) !important}.has-pale-cyan-blue-background-color{background-color:var(--wp--preset--color--pale-cyan-blue) !important}.has-vivid-cyan-blue-background-color{background-color:var(--wp--preset--color--vivid-cyan-blue) !important}.has-vivid-purple-background-color{background-color:var(--wp--preset--color--vivid-purple) !important}.has-primary-background-color{background-color:var(--wp--preset--color--primary) !important}.has-secondary-background-color{background-color:var(--wp--preset--color--secondary) !important}.has-background-base-background-color{background-color:var(--wp--preset--color--background-base) !important}.has-background-primary-background-color{background-color:var(--wp--preset--color--background-primary) !important}.has-background-secondary-background-color{background-color:var(--wp--preset--color--background-secondary) !important}.has-text-base-background-color{background-color:var(--wp--preset--color--text-base) !important}.has-text-lighter-background-color{background-color:var(--wp--preset--color--text-lighter) !important}.has-text-link-background-color{background-color:var(--wp--preset--color--text-link) !important}.has-black-border-color{border-color:var(--wp--preset--color--black) !important}.has-cyan-bluish-gray-border-color{border-color:var(--wp--preset--color--cyan-bluish-gray) !important}.has-white-border-color{border-color:var(--wp--preset--color--white) !important}.has-pale-pink-border-color{border-color:var(--wp--preset--color--pale-pink) !important}.has-vivid-red-border-color{border-color:var(--wp--preset--color--vivid-red) !important}.has-luminous-vivid-orange-border-color{border-color:var(--wp--preset--color--luminous-vivid-orange) !important}.has-luminous-vivid-amber-border-color{border-color:var(--wp--preset--color--luminous-vivid-amber) !important}.has-light-green-cyan-border-color{border-color:var(--wp--preset--color--light-green-cyan) !important}.has-vivid-green-cyan-border-color{border-color:var(--wp--preset--color--vivid-green-cyan) !important}.has-pale-cyan-blue-border-color{border-color:var(--wp--preset--color--pale-cyan-blue) !important}.has-vivid-cyan-blue-border-color{border-color:var(--wp--preset--color--vivid-cyan-blue) !important}.has-vivid-purple-border-color{border-color:var(--wp--preset--color--vivid-purple) !important}.has-primary-border-color{border-color:var(--wp--preset--color--primary) !important}.has-secondary-border-color{border-color:var(--wp--preset--color--secondary) !important}.has-background-base-border-color{border-color:var(--wp--preset--color--background-base) !important}.has-background-primary-border-color{border-color:var(--wp--preset--color--background-primary) !important}.has-background-secondary-border-color{border-color:var(--wp--preset--color--background-secondary) !important}.has-text-base-border-color{border-color:var(--wp--preset--color--text-base) !important}.has-text-lighter-border-color{border-color:var(--wp--preset--color--text-lighter) !important}.has-text-link-border-color{border-color:var(--wp--preset--color--text-link) !important}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important}.has-cool-to-warm-spectrum-gradient-background{background:var(--wp--preset--gradient--cool-to-warm-spectrum) !important}.has-blush-light-purple-gradient-background{background:var(--wp--preset--gradient--blush-light-purple) !important}.has-blush-bordeaux-gradient-background{background:var(--wp--preset--gradient--blush-bordeaux) !important}.has-luminous-dusk-gradient-background{background:var(--wp--preset--gradient--luminous-dusk) !important}.has-pale-ocean-gradient-background{background:var(--wp--preset--gradient--pale-ocean) !important}.has-electric-grass-gradient-background{background:var(--wp--preset--gradient--electric-grass) !important}.has-midnight-gradient-background{background:var(--wp--preset--gradient--midnight) !important}.has-small-font-size{font-size:var(--wp--preset--font-size--small) !important}.has-medium-font-size{font-size:var(--wp--preset--font-size--medium) !important}.has-large-font-size{font-size:var(--wp--preset--font-size--large) !important}.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large) !important}.has-noto-sans-jp-font-family{font-family:var(--wp--preset--font-family--noto-sans-jp) !important}
@charset "UTF-8";.linkcard{margin-top:4px!important;margin-bottom:16px!important;}.linkcard a{text-decoration:none;}.linkcard img{margin:0!important;padding:0;border:none;}.linkcard span.external-icon{display:none;}.linkcard p{display:none;}.lkc-unlink{cursor:not-allowed;}.lkc-external-wrap{border:#888888 none 1px;background-color:#f8f8f8;}.lkc-internal-wrap{border:#888888 none 1px;background-color:#ddeeff;}.lkc-this-wrap{border:none 1px;background-color:#bbccdd;}.lkc-external-wrap,.lkc-internal-wrap,.lkc-this-wrap{position:relative;margin:0;padding:0;width:100%;}.lkc-card{margin-top:8px;margin-bottom:8px;margin-left:8px;margin-right:8px;}.lkc-content{word-break:break-all;white-space:normal;overflow:hidden;height:108px;margin:6px 0 0 0;}.lkc-title{display:block;overflow:hidden;word-break:break-all;color:#111111;font-size:16px;line-height:24px;white-space:wrap;text-overflow:ellipsis;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-weight:bold;font-style:normal;text-decoration:none;}.lkc-title:hover{text-decoration:underline;}.lkc-excerpt{padding:0;overflow:hidden;color:#333333;font-size:11px;line-height:17px;white-space:wrap;text-overflow:ellipsis;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-weight:normal;font-style:normal;text-decoration:none;}.lkc-excerpt:hover{text-decoration:none;}.lkc-url{display:block!important;margin:0;padding:0;border-radius:4px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#4466ff;font-size:10px;line-height:10px;font-weight:normal;font-style:normal;text-decoration:underline;}.lkc-url:hover{text-decoration:underline;}.lkc-url:link{text-decoration:none;}.lkc-date{display:block!important;margin:0;padding:0 4px;border-radius:4px;text-decoration:none;overflow:hidden;color:#444444;font-size:10px;line-height:16px;font-weight:normal;font-style:normal;text-decoration:none;}.lkc-date:hover{text-decoration:none;}.lkc-external-wrap .lkc-heading{position:absolute;top:-17px;left:20px;padding:0 17px;border:#888888 none 1px;background-color:#f8f8f8;}.lkc-internal-wrap .lkc-heading{position:absolute;top:-17px;left:20px;padding:0 17px;border:#888888 none 1px;background-color:#ddeeff;}.lkc-this-wrap .lkc-heading{position:absolute;top:-17px;left:20px;padding:0 17px;border:none 1px;background-color:#bbccdd;}.lkc-heading{display:inline!important;color:#444444;font-size:12px;line-height:32px;font-weight:normal;font-style:normal;text-decoration:none;}.lkc-heading:hover{text-decoration:none;}.lkc-external-wrap .lkc-more{position:absolute;bottom:8px;right:8px;padding:0 12px;border:#888888 none 1px;border-radius:4px;background-color:#f8f8f8;}.lkc-internal-wrap .lkc-more{position:absolute;bottom:8px;right:8px;padding:0 12px;border:#888888 none 1px;border-radius:4px;background-color:#ddeeff;}.lkc-this-wrap .lkc-more{position:absolute;bottom:8px;right:8px;padding:0 12px;border:none 1px;border-radius:4px;background-color:#bbccdd;}.lkc-more{display:inline;position:absolute;padding:0 24px;color:#444444;font-size:12px;line-height:40px;font-weight:normal;font-style:normal;text-decoration:none;}.lkc-more:hover{text-decoration:none;}.lkc-info{display:flex!important;margin:0;padding:0;align-items:center;color:#222222;font-size:12px;line-height:12px;font-weight:normal;font-style:normal;text-decoration:none;}.lkc-added{display:inline!important;border-radius:4px;color:#222222;padding:4px;background-color:#365cd9;font-size:12px;line-height:12px;font-weight:normal;font-style:normal;text-decoration:none;}.lkc-added:hover{text-decoration:none;}.lkc-info:hover{text-decoration:none;}.lkc-info *{margin:0 4px 0 0;white-space:nowrap;overflow:hidden;}.lkc-favicon{display:inline-flex!important;vertical-align:middle!important;border:none;height:16px;width:16px;}img.lkc-favicon{margin:-4px 0 0 0!important;object-fit:cover;height:100%;width:100%;}.lkc-domain{display:inline-flex!important;vertical-align:middle!important;text-decoration:none;color:#222222;font-size:12px;line-height:12px;font-weight:normal;font-style:normal;text-decoration:none;}.lkc-share{text-shadow:none;white-space:nowrap;overflow:hidden;line-height:12px;}.lkc-share *{display:inline;margin:0!important;padding:0 1px!important;font-size:9px;text-decoration:underline!important;font-weight:bold!important;white-space:nowrap;}.lkc-sns-x{color:#ffffff!important;background-color:#333!important;}.lkc-sns-tw{color:#5ea9dd!important;background-color:#e0f8fa!important;}.lkc-sns-fb{color:#ffffff!important;background-color:#3864a3!important;}.lkc-sns-hb{color:#ff6464!important;background-color:#ffefef!important;}.lkc-sns-gp{color:#dd4e42!important;background-color:#ffffff!important;}.lkc-sns-po{color:#eeeeee!important;background-color:#ee4055!important;}.lkc-url-info{font-weight:normal;text-decoration:underline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#4466ff;font-size:10px;line-height:10px;font-weight:normal;font-style:normal;text-decoration:underline;}.lkc-url-info:hover{text-decoration:underline;}.lkc-thumbnail{display:flex;float:left;width:102px;margin:0 8px 0 0;}.lkc-thumbnail-img{object-fit:cover;width:100px!important;height:108px!important;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;}.lkc-error{display:block;padding-top:50px;margin-top:-50px;}.clear{clear:both;}blockquote.lkc-quote{background-color:transparent;background-image:none;padding:0;margin:0;border:none;}blockquote.lkc-quote::before{content:'';}blockquote.lkc-quote::after{content:'';}.lkc-iframe-wrap{width:100%;}.lkc-iframe{padding:0;margin:0;width:100%;}@media screen and (max-width:600px){.lkc-title{font-size:14px;line-height:21px;}.lkc-excerpt{font-size:10px;}.lkc-thumbnail{width:90px!important;}img.lkc-thumbnail-img{height:97px!important;width:90px!important;}}@media screen and (max-width:480px){.lkc-title{font-size:12px;line-height:19px;}.lkc-excerpt{font-size:8px;}.lkc-thumbnail{width:70px!important;}img.lkc-thumbnail-img{height:75px!important;width:70px!important;}}@media screen and (max-width:320px){.lkc-title{font-size:11px;line-height:16px;}.lkc-excerpt{font-size:6px;}.lkc-thumbnail{width:50px!important;}img.lkc-thumbnail-img{height:54px!important;width:50px!important;}}/*Pz-LkC2.6.0.1#1787197516*/
div.yyi-rinker-contents{margin:2em 0;padding:0;border:solid 1px #dbdbdb;background-color:#fff;box-shadow:2px 3px 8px -5px rgba(0,0,0,.25);position:relative;overflow:visible}div.yyi-rinker-contents a{border:none}div.yyi-rinker-contents div.yyi-rinker-box{display:flex;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;box-sizing:border-box;padding:12px}div.yyi-rinker-contents div.yyi-rinker-image{padding:0;display:flex;vertical-align:middle;justify-content:center;align-items:center}.yyi-rinker-img-s .yyi-rinker-image{width:75px;min-width:75px}.yyi-rinker-img-m .yyi-rinker-image{width:175px;min-width:175px}.yyi-rinker-img-l div.yyi-rinker-image{width:200px;min-width:200px}.yyi-rinker-images{display:flex;justify-content:center;align-items:center;position:relative;margin:5px}div.yyi-rinker-image img.yyi-rinker-main-img.hidden{display:none}.yyi-rinker-images-arrow{cursor:pointer;position:absolute;top:50%;display:block;margin-top:-11px;opacity:.6;width:22px}.yyi-rinker-images-arrow-left{left:-10px}.yyi-rinker-images-arrow-right{right:-10px}.yyi-rinker-images-arrow-left.hidden{display:none}.yyi-rinker-images-arrow-right.hidden{display:none}div.yyi-rinker-contents.yyi-rinker-img-s div.yyi-rinker-info{width:calc(100% - 75px)}div.yyi-rinker-contents div.yyi-rinker-info{width:calc(100% - 175px)}div.yyi-rinker-contents.yyi-rinker-img-l div.yyi-rinker-info{width:calc(100% - 200px)}div.yyi-rinker-contents div.yyi-rinker-title a{color:#333;text-decoration:none}div.yyi-rinker-contents div.yyi-rinker-title p{margin:5px}div.yyi-rinker-contents div.yyi-rinker-detail{font-size:.8em;color:#999;padding-left:15px}div.yyi-rinker-contents div.yyi-rinker-detail a{text-decoration:underline}div.yyi-rinker-contents div.yyi-rinker-detail .price-box{color:#aaa}div.yyi-rinker-contents div.yyi-rinker-detail .free-text{color:#aaa}div.yyi-rinker-contents ul.yyi-rinker-links{border:none;list-style-type:none;display:inline-flex;display:-ms-inline-flexbox;display:-webkit-inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:10px auto;padding:0;width:100%}div.yyi-rinker-contents ul.yyi-rinker-links li{content:'';position:static;margin:2px 5px;padding:0;border-radius:2px;border:none;box-shadow:0 6px 12px -5px rgba(0,0,0,.3);-ms-flex:0 0 auto}div.yyi-rinker-contents ul.yyi-rinker-links li:before{content:'';position:static}div.yyi-rinker-contents ul.yyi-rinker-links li:hover{box-shadow:0 5px 8px -5px rgba(0,0,0,.3)}div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink{background:#f6a306}div.yyi-rinker-contents ul.yyi-rinker-links li a{position:relative;display:block;color:#fff;font-weight:700;text-decoration:none;font-size:.9em;height:30px;line-height:30px;padding:0 18px}div.yyi-rinker-contents ul.yyi-rinker-links li a:hover{border:none;opacity:.7}div.yyi-rinker-contents ul.yyi-rinker-links li a:before{position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;color:#fff;text-align:center;border:none}div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink{order:20}div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before{content:''}div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink{background:#666;order:15}div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink a:before{content:''}div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink{background:#cf4944;order:30}div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before{content:''}div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink{background:#51a7e8;order:40}div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before{content:''}div.yyi-rinker-contents ul.yyi-rinker-links li.mercarilink{background-color:#ff0211;order:50}div.yyi-rinker-contents ul.yyi-rinker-links li.mercarilink a:before{content:''}div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1{background:#4072b3;order:10}div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2{background:#4dc0b2;order:50}div.yyi-rinker-contents ul.yyi-rinker-links li.freelink3{background:#6f63ad;order:15}div.yyi-rinker-contents ul.yyi-rinker-links li.freelink4{background:#63ad87;order:55}div.yyi-rinker-contents ul.yyi-rinker-links img,div.yyi-rinker-contents div.yyi-rinker-title img,div.yyi-rinker-contents div.yyi-rinker-image a+img{display:none}div.yyi-rinker-detail .credit-box{font-size:75%}ul.yyi-rinker-links li:before{background-color:transparent}@media all and (max-width:420px){.yyi-rinker-images{margin:auto}}@media all and (max-width:420px) and (min-width:321px){body div.yyi-rinker-contents ul.yyi-rinker-links li a{padding:0 0 0 15px}div.yyi-rinker-contents ul.yyi-rinker-links{-webkit-flex-flow:column;flex-direction:column}.yyi-rinker-img-s .yyi-rinker-image{width:75px;min-width:75px}.yyi-rinker-img-m .yyi-rinker-image{width:125px;min-width:125px}.yyi-rinker-img-l div.yyi-rinker-image{width:150px;min-width:150px}div.yyi-rinker-contents.yyi-rinker-img-s div.yyi-rinker-info{width:calc(100% - 75px)}div.yyi-rinker-contents div.yyi-rinker-info{width:calc(100% - 125px)}div.yyi-rinker-contents.yyi-rinker-img-l div.yyi-rinker-info{width:calc(100% - 150px)}}@media all and (max-width:320px){div.yyi-rinker-contents ul.yyi-rinker-links li a{padding:0 0 0 7px}div.yyi-rinker-contents ul.yyi-rinker-links{-webkit-flex-flow:column;flex-direction:column}.yyi-rinker-img-s .yyi-rinker-image{width:75px;min-width:75px}.yyi-rinker-img-m .yyi-rinker-image{width:100px;min-width:100px}.yyi-rinker-img-l div.yyi-rinker-image{width:125px;min-width:125px}div.yyi-rinker-contents.yyi-rinker-img-s div.yyi-rinker-info{width:calc(100% - 75px)}div.yyi-rinker-contents div.yyi-rinker-info{width:calc(100% - 100px)}div.yyi-rinker-contents.yyi-rinker-img-l div.yyi-rinker-info{width:calc(100% - 125px)}}body div.yyi-rinker-contents ul.yyi-rinker-links li{list-style:none}body div.yyi-rinker-contents ul.yyi-rinker-links li:before{position:absolute}div.yyi-rinker-contents p{padding:0}div.yyi-rinker-contents img{margin-bottom:0}div.yyi_rinker-gutenberg input.rinkerg-richtext{width:300px}input.rinkerg-richtext{width:70%}div.yyi-rinker-contents div.yyi-rinker-detail .free-text .count-in{color:#333}.editor-styles-wrapper div.yyi-rinker-contents .count-top p{margin-top:0}div.yyi-rinker-contents.yyi-rinker-design-tate div.yyi-rinker-box{flex-direction:column}div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-box .yyi-rinker-links{flex-direction:column}div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-info{width:100%}div.yyi-rinker-contents.yyi-rinker-design-slim .yyi-rinker-title{text-align:center}div.yyi-rinker-contents.yyi-rinker-design-slim .yyi-rinker-links{text-align:center}div.yyi-rinker-contents.yyi-rinker-design-slim .yyi-rinker-image{margin:auto}div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-info ul.yyi-rinker-links li{align-self:stretch}div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-box div.yyi-rinker-info{padding:0}div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-box{flex-direction:column;padding:14px 5px 0}.yyi-rinker-design-slim div.yyi-rinker-box div.yyi-rinker-info{text-align:center}.yyi-rinker-design-slim div.price-box span.price{display:block}div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-info div.yyi-rinker-title a{font-size:16px}div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.amazonkindlelink:before,div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.amazonlink:before,div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.rakutenlink:before,div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.yahoolink:before{font-size:12px}div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li a{font-size:13px}.yyi-rinker-contents .yyi-rinker-info{padding-left:10px}.yyi-rinker-img-s .yyi-rinker-image .yyi-rinker-images img{max-height:75px}.yyi-rinker-img-m .yyi-rinker-image .yyi-rinker-images img{max-height:175px}.yyi-rinker-img-l .yyi-rinker-image .yyi-rinker-images img{max-height:200px}div.yyi-rinker-contents div.yyi-rinker-image{flex-direction:column;align-items:center}div.yyi-rinker-contents ul.yyi-rinker-thumbnails{display:flex;flex-direction:row;flex-wrap:wrap;list-style:none;border:none;padding:0;margin:5px 0}div.yyi-rinker-contents ul.yyi-rinker-thumbnails li{cursor:pointer;height:32px;text-align:center;vertical-align:middle;width:32px;border:none;padding:0;margin:0;box-sizing:content-box}div.yyi-rinker-contents ul.yyi-rinker-thumbnails li img{vertical-align:middle}div.yyi-rinker-contents ul.yyi-rinker-thumbnails li{border:1px solid #fff}div.yyi-rinker-contents ul.yyi-rinker-thumbnails li.thumb-active{border:1px solid #eee}div.yyi-rinker-contents.yyi-rinker-design-mini{border:none;box-shadow:none;background-color:transparent}.yyi-rinker-design-mini div.yyi-rinker-info ul.yyi-rinker-links,.yyi-rinker-design-mini div.yyi-rinker-info .brand,.yyi-rinker-design-mini div.yyi-rinker-info .price-box{display:none}div.yyi-rinker-contents.yyi-rinker-design-mini .credit-box{text-align:right}div.yyi-rinker-contents.yyi-rinker-design-mini div.yyi-rinker-info{width:100%}.yyi-rinker-design-mini div.yyi-rinker-info div.yyi-rinker-title{line-height:1.2;min-height:2.4em;margin-bottom:0}.yyi-rinker-design-mini div.yyi-rinker-info div.yyi-rinker-title a{font-size:12px;text-decoration:none;text-decoration:underline}div.yyi-rinker-contents.yyi-rinker-design-mini{position:relative;max-width:100%;border:none;border-radius:12px;box-shadow:0 1px 6px rgb(0 0 0/12%);background-color:#fff}div.yyi-rinker-contents.yyi-rinker-design-mini div.yyi-rinker-box{border:none}.yyi-rinker-design-mini div.yyi-rinker-image{width:60px;min-width:60px}.yyi-rinker-design-mini div.yyi-rinker-image img{max-height:3.6em}.yyi-rinker-design-mini div.yyi-rinker-detail div.credit-box{font-size:10px}.yyi-rinker-design-mini div.yyi-rinker-detail div.brand,.yyi-rinker-design-mini div.yyi-rinker-detail div.price-box{font-size:10px}.yyi-rinker-design-mini div.yyi-rinker-info div.yyi-rinker-detail{padding:0}.yyi-rinker-design-mini div.yyi-rinker-detail div:not(:last-child){padding-bottom:0}.yyi-rinker-design-mini div.yyi-rinker-box div.yyi-rinker-image a{margin-bottom:16px}@media (min-width:768px){div.yyi-rinker-contents.yyi-rinker-design-mini div.yyi-rinker-box{padding:12px}.yyi-rinker-design-mini div.yyi-rinker-box div.yyi-rinker-info{justify-content:center;padding-left:24px}}@media (max-width:767px){div.yyi-rinker-contents.yyi-rinker-design-mini{max-width:100%}div.yyi-rinker-contents.yyi-rinker-design-mini div.yyi-rinker-box{flex-direction:row;padding:12px}.yyi-rinker-design-mini div.yyi-rinker-box div.yyi-rinker-info{justify-content:center;margin-bottom:16px;padding-left:16px;text-align:left}}div.yyi-rinker-contents .yyi-rinker-attention{display:inline;line-height:30px;position:absolute;top:-10px;left:-9px;min-width:60px;padding:0;height:30px;text-align:center;font-weight:600;color:#fff;background:#fea724;z-index:10}div.yyi-rinker-contents .yyi-rinker-attention span{padding:0 15px}.yyi-rinker-attention-before,.yyi-rinker-attention-after{display:inline;position:absolute;content:''}.yyi-rinker-attention-before{bottom:-8px;left:.1px;width:0;height:0;border-top:9px solid;border-top-color:inherit;border-left:9px solid transparent;z-index:1}.yyi-rinker-attention-after{top:0;right:-14.5px;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid;border-left-color:inherit}div.yyi-rinker-contents .yyi-rinker-attention.attention_desing_circle{display:flex;position:absolute;top:-20px;left:-20px;width:60px;height:60px;min-width:auto;min-height:auto;justify-content:center;align-items:center;border-radius:50%;color:#fff;background:#fea724;font-weight:600;font-size:17px}div.yyi-rinker-contents.yyi-rinker-design-mini .yyi-rinker-attention.attention_desing_circle{top:-14px;left:-14px;width:36px;height:36px;font-size:12px}div.yyi-rinker-contents .yyi-rinker-attention.attention_desing_circle span{padding:0}div.yyi-rinker-contents .yyi-rinker-attention.attention_desing_circle .yyi-rinker-attention-after,div.yyi-rinker-contents .yyi-rinker-attention.attention_desing_circle .yyi-rinker-attention-before{display:none}div.yyi-rinker-contents .yyi-rinker-attention.attention_desing_right_ribbon{width:89px;height:91px;position:absolute;top:-1px;right:-1px;left:auto;overflow:hidden}div.yyi-rinker-contents .yyi-rinker-attention.attention_desing_right_ribbon span{display:inline-block;width:146px;position:absolute;padding:4px 0;left:-13px;top:12px;text-align:center;font-size:12px;line-height:24px;-webkit-transform:rotate(45deg);transform:rotate(45deg);box-shadow:0 1px 3px rgba(0,0,0,.2)}div.yyi-rinker-contents .yyi-rinker-attention.attention_desing_right_ribbon{background:0 0}.yyi-rinker-attention.attention_desing_right_ribbon .yyi-rinker-attention-after,.yyi-rinker-attention.attention_desing_right_ribbon .yyi-rinker-attention-before{display:none}div.yyi-rinker-use-right_ribbon div.yyi-rinker-title{margin-right:2rem}
.yyi-rinker-images{display:flex;justify-content:center;align-items:center;position:relative}div.yyi-rinker-image img.yyi-rinker-main-img.hidden{display:none}.yyi-rinker-images-arrow{cursor:pointer;position:absolute;top:50%;display:block;margin-top:-11px;opacity:.6;width:22px}.yyi-rinker-images-arrow-left{left:-10px}.yyi-rinker-images-arrow-right{right:-10px}.yyi-rinker-images-arrow-left.hidden{display:none}.yyi-rinker-images-arrow-right.hidden{display:none}div.yyi-rinker-contents.yyi-rinker-design-tate div.yyi-rinker-box{flex-direction:column}div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-box .yyi-rinker-links{flex-direction:column}div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-info{width:100%}div.yyi-rinker-contents.yyi-rinker-design-slim .yyi-rinker-title{text-align:center}div.yyi-rinker-contents.yyi-rinker-design-slim .yyi-rinker-links{text-align:center}div.yyi-rinker-contents.yyi-rinker-design-slim .yyi-rinker-image{margin:auto}div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-info ul.yyi-rinker-links li{align-self:stretch}div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-box div.yyi-rinker-info{padding:0}div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-box{flex-direction:column;padding:14px 5px 0}.yyi-rinker-design-slim div.yyi-rinker-box div.yyi-rinker-info{text-align:center}.yyi-rinker-design-slim div.price-box span.price{display:block}div.yyi-rinker-contents.yyi-rinker-design-slim div.yyi-rinker-info div.yyi-rinker-title a{font-size:16px}div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.amazonkindlelink:before,div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.amazonlink:before,div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.rakutenlink:before,div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.yahoolink:before,div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li.mercarilink:before{font-size:12px}div.yyi-rinker-contents.yyi-rinker-design-slim ul.yyi-rinker-links li a{font-size:13px}.entry-content ul.yyi-rinker-links li{padding:0}div.yyi-rinker-contents .yyi-rinker-attention.attention_desing_right_ribbon{width:89px;height:91px;position:absolute;top:-1px;right:-1px;left:auto;overflow:hidden}div.yyi-rinker-contents .yyi-rinker-attention.attention_desing_right_ribbon span{display:inline-block;width:146px;position:absolute;padding:4px 0;left:-13px;top:12px;text-align:center;font-size:12px;line-height:24px;-webkit-transform:rotate(45deg);transform:rotate(45deg);box-shadow:0 1px 3px rgba(0,0,0,.2)}div.yyi-rinker-contents .yyi-rinker-attention.attention_desing_right_ribbon{background:0 0}.yyi-rinker-attention.attention_desing_right_ribbon .yyi-rinker-attention-after,.yyi-rinker-attention.attention_desing_right_ribbon .yyi-rinker-attention-before{display:none}div.yyi-rinker-use-right_ribbon div.yyi-rinker-title{margin-right:2rem}
.mvShapeA{fill:url(#a)}
.mvShapeB{fill:url(#b)}