/* Isolated widget styling. Article/theme layout remains controlled by AFFINGER. */
.oe-fanza-page-notice { margin: 0 0 12px; color: #5b6066; font-size: 13px; line-height: 1.6; }
.oe-fanza-site-credit {
  box-sizing: border-box;
  max-width: 100%;
  margin: 16px auto;
  padding: 0 12px;
  text-align: center;
  line-height: 1;
}
.oe-fanza-site-credit a { display: inline-block; }
.oe-fanza-site-credit img {
  display: block;
  width: 135px;
  height: 17px;
  max-width: 100%;
  margin: 0 auto;
  border: 0;
}
#side .oe-common-fanza,
#side .oe-common-related {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 16px;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  background: #fff;
  margin: 0 0 24px;
}
#side .oe-common-fanza *, #side .oe-common-related * { box-sizing: border-box; }
#side .oe-common-fanza .st-widgets-title,
#side .oe-common-related .st-widgets-title { margin: 0 0 16px; }
#side .oe-common-label { margin: 0 0 8px; color: #646a70; font-size: 11px; line-height: 1.4; }
#side .oe-common-category { margin: -8px 0 12px; color: #606a70; font-size: 12px; line-height: 1.5; }
#side .oe-common-fanza-list, #side .oe-common-related-list { display: grid; gap: 14px; }
#side a.oe-common-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid #eceef0;
  text-decoration: none;
  color: #20282c;
}
#side a.oe-common-product:last-child { border-bottom: 0; padding-bottom: 0; }
#side .oe-common-product img {
  display: block;
  width: 100% !important; height: auto !important;
  max-width: 100% !important; max-height: none !important;
  aspect-ratio: 3/2; object-fit: contain;
  margin: 0; border-radius: 4px; background: #f6f4ef;
}
#side .oe-common-product-body { display: grid; gap: 12px; min-width: 0; }
#side .oe-common-product-title {
  font-size: 13px; font-weight: 600; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
#side .oe-common-credit { margin: 14px 0 0; color: #646a70; font-size: 10px; line-height: 1.5; }
#side .oe-common-credit a { font-size: inherit; text-decoration: underline; }
#side a.oe-common-related-card {
  display: grid; grid-template-columns: 96px minmax(0,1fr); align-items: center;
  gap: 12px; min-width: 0; padding: 0 0 14px;
  border-bottom: 1px solid #eceef0; text-decoration: none; color: #20282c;
}
#side a.oe-common-related-card:last-child { border-bottom: 0; padding-bottom: 0; }
#side .oe-common-related-image { display: block; width: 96px; height: auto; aspect-ratio: 16/9; object-fit: contain; margin: 0; border-radius: 4px; }
#side .oe-common-related-card span { font-size: 13px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
#side a.oe-common-product:hover .oe-common-product-title,
#side a.oe-common-related-card:hover span { color: #235a91; text-decoration: underline; }
#side a.oe-common-product:focus-visible, #side a.oe-common-related-card:focus-visible { outline: 3px solid #235a91; outline-offset: 4px; }
@media (max-width: 359px) {
  #side .oe-common-fanza, #side .oe-common-related { padding: 12px; }
  #side a.oe-common-product { gap: 10px; }
  #side a.oe-common-related-card { grid-template-columns: 80px minmax(0,1fr); gap: 10px; }
  #side .oe-common-related-image { width: 80px; }
}

/* Article gallery: its layout never changes the theme's article or sidebar grid. */
.oe-fanza-gallery {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin: 28px 0;
  padding: 18px;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  background: #f6f4f1;
  color: #20282c;
}
.oe-fanza-gallery * { box-sizing: border-box; }
.oe-fanza-gallery-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
body.single-post #contentInner .entry-content .oe-fanza-gallery-heading h3.st-css-no.st-css-no2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #20282c !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
}
body.single-post #contentInner .entry-content .oe-fanza-gallery-heading h3.st-css-no.st-css-no2::before,
body.single-post #contentInner .entry-content .oe-fanza-gallery-heading h3.st-css-no.st-css-no2::after {
  display: none !important;
  content: none !important;
}
.oe-fanza-gallery-heading p { margin: 0; color: #b3263d; font-size: 11px; font-weight: 700; white-space: nowrap; }
.oe-fanza-gallery-hint { display: none; }
ul.oe-fanza-gallery-list {
  display: flex;
  gap: 12px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  padding: 2px 2px 12px;
  scroll-padding-inline: 2px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  list-style: none;
}
.oe-fanza-gallery-card { flex: 0 0 48%; min-width: 0; margin: 0; padding: 0; list-style: none; scroll-snap-align: start; }
.oe-fanza-gallery-card::before { display: none; }
.oe-fanza-gallery-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #fff;
  color: #20282c;
  text-decoration: none;
}
.oe-fanza-gallery-card img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: 3 / 2;
  margin: 0 0 10px;
  border-radius: 5px;
  background: #f6f4ef;
  object-fit: contain;
}
.oe-fanza-gallery-sort { color: #b3263d; font-size: 11px; line-height: 1.5; }
.oe-fanza-gallery-title { margin: 5px 0 12px; font-size: 13px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.oe-fanza-gallery-card a:hover .oe-fanza-gallery-title { color: #8f2034; text-decoration: underline; }
.oe-fanza-gallery-card a:focus-visible { outline: 3px solid #235a91; outline-offset: 2px; }
.oe-fanza-gallery-credit { margin: 12px 0 0; color: #646a70; font-size: 10px; line-height: 1.5; }
.oe-fanza-gallery-credit a { color: inherit; font-size: inherit; text-decoration: underline; }

@media (max-width: 767px) {
  .oe-fanza-gallery { padding: 14px; }
  .oe-fanza-gallery-heading { margin-bottom: 6px; }
  body.single-post #contentInner .entry-content .oe-fanza-gallery-heading h3.st-css-no.st-css-no2 { font-size: 16px !important; }
  .oe-fanza-gallery-hint { display: block; margin: 0 14px 12px 0; color: #646a70; font-size: 11px; line-height: 1.5; }
  ul.oe-fanza-gallery-list {
    gap: 10px;
  }
  .oe-fanza-gallery-card { flex-basis: 94%; }
  .oe-fanza-gallery-credit { margin-right: 14px; }
}

/* In-article carousel and two-product closing module. */
.oe-fanza-mid,
.oe-fanza-bottom {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 28px 0;
  padding: 16px;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  background: #f6f4f1;
  color: #20282c;
}
.oe-fanza-mid *, .oe-fanza-bottom * { box-sizing: border-box; }
.oe-fanza-mid-heading,
.oe-fanza-bottom-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
body.single-post #contentInner .entry-content .oe-fanza-mid-heading h3.st-css-no.st-css-no2,
body.single-post #contentInner .entry-content .oe-fanza-bottom-heading h3.st-css-no.st-css-no2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #20282c !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
body.single-post #contentInner .entry-content .oe-fanza-mid-heading h3.st-css-no.st-css-no2::before,
body.single-post #contentInner .entry-content .oe-fanza-mid-heading h3.st-css-no.st-css-no2::after,
body.single-post #contentInner .entry-content .oe-fanza-bottom-heading h3.st-css-no.st-css-no2::before,
body.single-post #contentInner .entry-content .oe-fanza-bottom-heading h3.st-css-no.st-css-no2::after {
  display: none !important;
  content: none !important;
}
.oe-fanza-mid-heading p,
.oe-fanza-bottom-heading p {
  margin: 0;
  color: #b3263d;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.oe-fanza-mid-card,
.oe-fanza-bottom-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #fff;
  color: #20282c;
  text-decoration: none;
}
.oe-fanza-mid-card img,
.oe-fanza-bottom-card img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: 3 / 2;
  margin: 0;
  border-radius: 5px;
  background: #f6f4ef;
  object-fit: contain;
}
.oe-fanza-mid-body,
.oe-fanza-bottom-body {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}
.oe-fanza-mid-title,
.oe-fanza-bottom-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.oe-fanza-mid-title {
  display: -webkit-box;
  min-height: 6.4em;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oe-fanza-mid-sort,
.oe-fanza-bottom-sort { color: #b3263d; font-size: 11px; line-height: 1.5; }
.oe-fanza-mid-card:hover .oe-fanza-mid-title,
.oe-fanza-bottom-card:hover .oe-fanza-bottom-title { color: #8f2034; text-decoration: underline; }
.oe-fanza-mid-card:focus-visible,
.oe-fanza-bottom-card:focus-visible { outline: 3px solid #235a91; outline-offset: 2px; }
.oe-fanza-bottom-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
.oe-fanza-mid-list {
  display: grid;
  min-width: 0;
}
.oe-fanza-mid .oe-fanza-slide {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}
.oe-fanza-mid:not(.oe-fanza-carousel-ready) .oe-fanza-slide[hidden] { display: none; }
/* Keep every slide in the same grid cell to reserve height before and after a switch. */
.oe-fanza-mid.oe-fanza-carousel-ready .oe-fanza-slide[hidden] {
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
}
.oe-fanza-carousel-workarea { position: relative; min-width: 0; }
.oe-fanza-mid-actions { display: flex; align-items: center; gap: 8px; }
.oe-fanza-mid:not(.oe-fanza-carousel-ready) [data-oe-prev],
.oe-fanza-mid:not(.oe-fanza-carousel-ready) [data-oe-next],
.oe-fanza-mid:not(.oe-fanza-carousel-ready) [data-oe-toggle] { display: none; }
.oe-fanza-mid [data-oe-prev],
.oe-fanza-mid [data-oe-next],
.oe-fanza-mid [data-oe-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid #cbd0d6;
  border-radius: 6px;
  background: #fff;
  color: #253a5c;
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.oe-fanza-mid [data-oe-prev],
.oe-fanza-mid [data-oe-next] {
  position: absolute;
  z-index: 2;
  /* Percentage margins use the work area's width: center on the 3:2 jacket,
     independently of the title height and reserved hidden-slide height. */
  top: 11px;
  margin-top: calc(16.666667% - 9.333333px);
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 8px rgba(32, 40, 44, .16);
  font-size: 30px;
  line-height: 1;
}
.oe-fanza-mid [data-oe-prev] { left: -8px; }
.oe-fanza-mid [data-oe-next] { right: -8px; }
.oe-fanza-mid [data-oe-toggle] { border: 0; background: transparent; }
.oe-fanza-mid [data-oe-toggle][aria-pressed="true"] { background: #edf1f5; }
.oe-fanza-mid [data-oe-prev]:hover,
.oe-fanza-mid [data-oe-next]:hover,
.oe-fanza-mid [data-oe-toggle]:hover { border-color: #235a91; background: #edf1f5; }
.oe-fanza-mid [data-oe-prev]:focus-visible,
.oe-fanza-mid [data-oe-next]:focus-visible,
.oe-fanza-mid [data-oe-toggle]:focus-visible { outline: 3px solid #235a91; outline-offset: 2px; }
.oe-fanza-mid button:disabled { opacity: .45; cursor: default; }
.oe-fanza-mid [data-oe-status] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.oe-fanza-mid-credit,
.oe-fanza-bottom-credit {
  margin: 12px 0 0;
  color: #646a70;
  font-size: 10px;
  line-height: 1.5;
}
.oe-fanza-mid-credit a,
.oe-fanza-bottom-credit a { color: inherit; font-size: inherit; text-decoration: underline; }
@media (max-width: 767px) {
  .oe-fanza-mid, .oe-fanza-bottom { padding: 14px; }
  .oe-fanza-mid .oe-fanza-slide { grid-template-columns: minmax(0, 1fr); }
  .oe-fanza-bottom-list { grid-template-columns: minmax(0, 1fr); }
  .oe-fanza-mid [data-oe-prev], .oe-fanza-mid [data-oe-next] { margin-top: calc(33.333333% - 7.333333px); }
}
@media (max-width: 359px) {
  .oe-fanza-gallery, .oe-fanza-mid, .oe-fanza-bottom { padding: 12px; }
}
