@charset "UTF-8";
/* **
    ✅ 使用方式範例：
.shadow-box {
  box-shadow: photoshop-drop-shadow(135deg, 10px, 20%, 12px, rgba(0, 0, 0, 0.3));
}

.inner-shadow-box {
  box-shadow: photoshop-inner-shadow(45deg, 8px, 10%, 9px, rgba(0, 0, 0, 0.25));
}
// 用法  外陰影（drop shadow）
.card {
  // 模擬 Photoshop 的陰影效果：
  // 陰影方向：右下（135°）、偏移距離：8px、模糊範圍：20px、spread：15%、顏色：黑色透明 25%
  @include photoshop-drop-shadow(135, 8, 15, 20, rgba(0, 0, 0, 0.25));
}
** */
/* **
// 用法  內陰影（inner shadow）
.card {
  // 模擬 Photoshop 的陰影效果：陰影從下方 90° 打上來，模擬凹陷感
  // 陰影方向：右下（135°）、偏移距離：8px、模糊範圍：20px、spread：15%、顏色：黑色透明 25%
  // @include photoshop-inner-shadow(...) 是對 drop-shadow(..., true) 的簡化語法
  @include photoshop-drop-shadow(135, 8, 15, 20, rgba(0, 0, 0, 0.25));
}
** */
/* **
// 用法
.title-shadow {
  // 模擬 Photoshop 的文字陰影效果：
  // 角度 135 度、距離 5px、spread 20%、模糊 10px、顏色黑
  @include photoshop-text-shadow(135, 5, 20, 10, rgba(0, 0, 0, 0.3));
}
** */
/* **
// 用法
.long-shadow {
    font-size: 5rem;
    color: #ffa726;
    @include long-text-shadow(30, #442c26);
}
** */
:root {
  --fs-14: 0.875rem;
  --fs-18-22: clamp(1.125rem, calc(0.9204545455rem + 0.5681818182vw), 1.375rem);
  --fs-25: 1.5625rem;
  --fs-20: 1.25rem;
  --date-color: var(--color-secondary-light);
  --group-summary-h2-fs: var(--fs-25);
  --color-bg-primary: #f1edea;
}

#blog .customized.swiper-button-prev, #blog .customized.swiper-button-next {
  --swiper-navigation-size: 36px;
  background-color: var(--swiper-button-bg, var(--color-primary));
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: var(--swiper-navigation-size);
  top: var(--swiper-navigation-top, 65%);
  left: var(--swiper-navigation-left, auto);
  right: var(--swiper-navigation-right, 4px);
}
#blog .customized.swiper-button-prev:after, #blog .customized.swiper-button-next:after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/icon_arrow.svg);
  -webkit-filter: var(--swiper-button-after-filter, var(--svgBlack2White));
  filter: var(--swiper-button-after-filter, var(--svgBlack2White));
}
#blog .customized.swiper-button-prev {
  --swiper-navigation-left: 4px;
}
#blog .customized.swiper-button-prev:after {
  transform: scaleX(-100%);
}
#blog .swiper-button-prev:not(.customized), #blog .swiper-button-next:not(.customized) {
  --swiper-navigation-size: clamp(2rem, 4.787vw + 1.043rem, 4.25rem);
  --swiper-navigation-color: white;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: var(--swiper-navigation-size);
  top: var(--swiper-navigation-top, 65%);
  left: var(--swiper-navigation-left, auto);
  right: var(--swiper-navigation-right, 4px);
}
#blog .swiper-button-prev:not(.customized):after, #blog .swiper-button-prev:not(.customized):before, #blog .swiper-button-next:not(.customized):after, #blog .swiper-button-next:not(.customized):before {
  font-size: clamp(1.5rem, 1.596vw + 1.181rem, 2.25rem);
  font-weight: bolder;
}
#blog .swiper-button-prev:not(.customized) {
  --swiper-navigation-left: 4px;
}
#blog .swiper-scrollbar-drag {
  background-color: var(--color-titleLine);
  background-color: rgba(184, 165, 150, 0.5);
}
#blog .swiper-scrollbar {
  background-color: white;
}

.articleCard {
  --article-card-pd-x: 1rem;
  --articleCard-border-width: 1px;
  padding-block: 1em;
  position: relative;
  border: var(--articleCard-border-width) solid var(--color-primary);
  border-radius: var(--symbolG16);
  width: 100%;
}
.articleCard > * + * {
  margin-block-start: 0.75rem;
}
.articleCard > *:not(em) {
  padding-inline: var(--article-card-pi, clamp(1rem, 1.136vw + 0.591rem, 1.5rem));
}
.articleCard em {
  padding-inline: var(--article-card-pd-x);
  background-color: var(--color-secondary-light);
  color: white;
  letter-spacing: 0;
  display: inline-block;
  padding-block: 0.25em;
}
.articleCard em:after {
  --arricleCard-em-size: 1.5em;
  content: "";
  width: var(--arricleCard-em-size);
  height: var(--arricleCard-em-size);
  display: inline-block;
  background-color: inherit;
  border-radius: 15%;
  position: absolute;
  transform: var(--arricleCard-em-transform, translate(15%, 0%)) rotate(45deg);
}
.articleCard h3 {
  font-size: clamp(1rem, 0.568vw + 0.795rem, 1.25rem);
  color: var(--color-secondary-light);
  --line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: var(--line, 3);
  line-height: var(--line-height, 1.6);
  height: calc(1em * var(--line-height, 1.6) * var(--line, 3));
}
.articleCard .cover {
  aspect-ratio: 4/3;
}
.articleCard .cover img {
  overflow: hidden;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.articleCard p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: var(--line, 3);
  line-height: var(--line-height, 1.6);
  height: calc(1em * var(--line-height, 1.6) * var(--line, 3));
}
.articleCard:focus-within .aTextLink--Un, .articleCard:focus-visible .aTextLink--Un {
  --linkColor: white;
  --a-border: transparent;
  background-color: var(--color-rose-primary);
}
@media (hover: hover) {
  .articleCard:hover .aTextLink--Un {
    --linkColor: white;
    --a-border: transparent;
    background-color: var(--color-rose-primary);
  }
}

.breadcrumbs {
  --notoSerif-fw: 400;
  list-style: none;
  padding-left: 0;
  margin-block-end: 0;
  letter-spacing: 0;
  line-height: 1;
}
.breadcrumbs li {
  display: inline-block;
}
.breadcrumbs li + li:before {
  content: ">>";
  padding-inline: 0.5em;
}
.breadcrumbs a {
  color: #777777;
}

/** shared **/
#blog {
  margin-block-end: 5rem;
}

.pagemain {
  margin-block-end: clamp(6rem, calc(2.9318181818rem + 8.5227272727vw), 9.75rem);
}

.blogNavbar {
  --width: 100%;
  background-color: var(--blogNavbar-bg, var(--color-primary));
  font-weight: var(--blogNavbar-fw, 500);
  line-height: var(--blogNavbar-lh, 1.6);
  letter-spacing: var(--blogNavbar-letterSpacing, 0.2em);
  height: var(--blogNavbar-height, 3.125rem);
  place-content: var(--blogNavbar-place-contetn, center);
  padding-inline: var(--blogNavbar-pi, 1rem);
}
.blogNavbar a {
  position: relative;
  color: var(--blogNavbar-color, white);
  display: flex;
  align-items: center;
}
.blogNavbar a:hover {
  text-decoration: none;
}
.blogNavbar .swiper-slide {
  width: auto;
}

.pagination {
  display: flex;
  justify-content: var(--pagination-justify, center);
  gap: 0.625rem;
  padding-block-start: 2.5rem;
}
.pagination a {
  border-radius: 4px;
  color: var(--pagination-color, var(--color-primary));
  border: 1px solid var(--pagination-border-color, var(--color-primary));
  min-width: 2rem;
  height: 2.25rem;
  display: flex;
  text-align: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.pagination a.on {
  --pagination-color: white;
  --pagination-border-color: var(--color-secondary-light);
  --aIcon-filter: var(--svgBlack2White);
  background-color: var(--color-secondary-light);
}
.pagination .aIcon {
  margin-inline-end: 0;
  filter: var(--aIcon-filter, var(--svgGrey2Primary));
}
.pagination .aIcon.arrow {
  background-image: url(../images/icon_arrow_up.svg);
}
.pagination .first .aIcon {
  transform: scaleX(-100%);
}
.pagination .next .aIcon {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.pagination .prev .aIcon {
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.pageTitle- {
  --pageTitle-PB: clamp(3.75rem, calc(1.7045454545rem + 5.6818181818vw), 6.25rem) clamp(2.5rem, calc(1.4772727273rem + 2.8409090909vw), 3.75rem);
}

div:has(> .pageTitle-) {
  margin-block-start: 0;
}

/***** 首頁、列表 *****/
.heroBn {
  min-height: 533px;
}
.heroBn img {
  width: 100%;
  height: 100%;
  position: relative;
  -o-object-fit: cover;
  object-fit: cover;
}
.heroBn .swiper {
  height: 100%;
}
.heroBn .hero {
  aspect-ratio: var(--hero-ratio, 640/650);
  height: 100%;
  min-height: var(--hero-min-height, 31.25rem);
}
.heroBn .content {
  position: absolute;
  width: var(--hero-content-width, 84%);
  max-width: 650px;
  background-color: rgba(255, 255, 255, 0.84);
  letter-spacing: var(--letter-spacing-100);
  font-size: clamp(1rem, calc(0.6931818182rem + 0.8522727273vw), 1.375rem);
  color: black;
  padding: clamp(1.875rem, calc(-0.1704545455rem + 5.6818181818vw), 4.375rem) clamp(1.75rem, calc(-0.0909090909rem + 5.1136363636vw), 4rem) clamp(1.75rem, calc(1.3920454545rem + 0.9943181818vw), 2.1875rem);
  bottom: var(--content-bottom, 1.8rem); /*18px*/
  inset-inline: var(--content-inset-inline, 0);
  margin-inline: var(--content-margin-inline, auto);
  -moz-border-radius: var(--content-border-radius, var(--symbolG33));
  -webkit-border-radius: var(--content-border-radius, var(--symbolG33));
  border-radius: var(--content-border-radius, var(--symbolG33));
}
.heroBn em {
  color: var(--color-primary);
}
.heroBn h2 {
  font-size: clamp(1.375rem, calc(0.6590909091rem + 1.9886363636vw), 2.25rem);
  --line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: var(--line, 2);
  line-height: var(--line-height, 1.6);
  height: calc(1em * var(--line-height, 1.6) * var(--line, 2));
  color: var(--color-secondary-light);
}
.heroBn p {
  color: var(--color-grey-d5);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: var(--line, 4);
  line-height: var(--line-height, 1.6);
  height: calc(1em * var(--line-height, 1.6) * var(--line, 4));
  margin-block-start: clamp(1.75rem, calc(0.5227272727rem + 3.4090909091vw), 3.25rem);
}
.heroBn .aBtn {
  --btnWidth: fit-content;
  letter-spacing: 0.24em;
  float: right;
}

@media screen and (min-width: 768px) {
  .heroBn {
    --hero-ratio: 1920/700;
    --swiper-navigation-top: 50%;
  }
  .heroBn .content {
    bottom: unset;
    margin-block: auto;
    inset-block: 0;
    height: fit-content;
  }
}
@media screen and (min-width: 1072px) {
  .heroBn {
    --swiper-navigation-right: clamp(0.25rem, calc(-18.5rem + 30vw), 17.5rem);
  }
  .heroBn .swiper-button-prev:not(.customized) {
    --swiper-navigation-left: clamp(0.25rem, calc(-18.5rem + 30vw), 17.5rem) !important;
  }
  .heroBn .content {
    transform: translateX(clamp(0.0625rem, calc(-15.625rem + 25vw), 14.375rem));
  }
}
.expandWrap {
  --line-height: calc(1.6em + 1rem);
  --expandBox-height: fit-content;
  --whiteMask-height: calc(6em + var(--line-height));
  --whiteMask-gradient-height: 60%;
  padding-block-end: calc(6em - var(--line-height));
}

.hotTopicList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(8.4375rem, calc(7.1590909091rem + 3.5511363636vw), 10rem), 1fr));
  grid-template-rows: auto;
  --blogNavbar-color: var(--color-grey-d5);
}
.hotTopicList a {
  padding-inline: 1.75rem;
  position: relative;
  color: var(--blogNavbar-color);
  display: flex;
  align-items: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: var(--line, 1);
  line-height: var(--line-height, 1.6);
  height: calc(1em * var(--line-height, 1.6) * var(--line, 1));
  text-align: center;
}
.hotTopicList a:after {
  content: "";
  display: var(--divider-diaplay, block);
  width: 1px;
  height: 0.9em;
  background-color: var(--blogNavbar-color);
  position: absolute;
  inset-block: 0;
  margin-block: auto;
  right: 0;
}
.hotTopicList a:hover {
  text-decoration: none;
  color: black;
}
.hotTopicList a:last-child:after {
  --divider-diaplay: none !important;
}
.hotTopicList a:nth-child(2n):after {
  --divider-diaplay: none;
}
@media screen and (min-width: 473px) {
  .hotTopicList a:nth-child(2n):after {
    --divider-diaplay: block;
  }
  .hotTopicList a:nth-child(3n):after {
    --divider-diaplay: none;
  }
}
@media screen and (min-width: 639px) {
  .hotTopicList a:nth-child(3n):after {
    --divider-diaplay: block;
  }
  .hotTopicList a:nth-child(4n):after {
    --divider-diaplay: none;
  }
}
@media screen and (min-width: 828px) {
  .hotTopicList a:nth-child(4n):after {
    --divider-diaplay: block;
  }
  .hotTopicList a:nth-child(5n):after {
    --divider-diaplay: none;
  }
}
@media screen and (min-width: 1033px) {
  .hotTopicList a:nth-child(5n):after {
    --divider-diaplay: block;
  }
  .hotTopicList a:nth-child(6n):after {
    --divider-diaplay: none;
  }
}
@media screen and (min-width: 1255px) {
  .hotTopicList a:nth-child(6n):after {
    --divider-diaplay: block;
  }
  .hotTopicList a:nth-child(7n):after {
    --divider-diaplay: none;
  }
}
@media screen and (min-width: 1441px) {
  .hotTopicList a:nth-child(7n):after {
    --divider-diaplay: block;
  }
  .hotTopicList a:nth-child(8n):after {
    --divider-diaplay: none;
  }
}

.pageTitle-:has(~ div > .hotTopicList) {
  --pageTitle-em-H: .5em;
  --pageTitle-em-bottom: -.3em;
}

.articleCardList.swiper {
  --swiper-navigation-top: 50%;
}
.articleCardList.swiper .swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
.articleCardList.swiper .swiper-slide {
  width: min(100%, 364px);
}

/***** 內頁 *****/
:root {
  --blogMainColor: #475A68;
  --bgBox-color: #F1F1F1;
  --header-height: 50px;
  --mainColumn-block-spacer: clamp(3.125rem, calc(1.5909090909rem + 4.2613636364vw), 5rem);
  --aside-block-spacer: clamp(2.25rem, calc(1.5340909091rem + 1.9886363636vw), 3.125rem);
}

.isRightLine, .blog-head p {
  padding-block: var(--isRightLine-pbT, 1.75rem) var(--isRightLine-pbB, 0);
  padding-inline-start: 1.125rem;
  border-inline-start: 5px solid var(--blogMainColor);
}

.isRightLine {
  font-size: var(--isRighitLine-fs, clamp(1.5rem, calc(1.2954545455rem + 0.5681818182vw), 1.75rem));
  color: var(--blogMainColor);
}
.isRightLine h3 {
  font-size: inherit;
  margin-block-end: 0;
}

.stickyPin {
  position: relative;
  width: 1px;
  height: 1px;
  display: block;
  margin: 0 !important;
  top: -100px;
}

.swiper {
  opacity: var(--swiper-opacity, 0);
}
.swiper.swiper-initialized {
  --swiper-opacity: 1;
}

section:has(.blog-head) {
  background-color: var(--bgBox-color);
}

.blog-head {
  font-size: 1.125rem;
  color: var(--blogMainColor);
  width: min(88.8709677419%, 57.5rem);
  position: relative;
  margin-inline: auto;
  padding: 1.875rem 0;
  --isRightLine-pbB: 0.5em;
  line-height: 1.8;
}
.blog-head > * + * {
  margin-block: 2.5rem 1.25rem;
}
.blog-head h1 {
  --notoSerif-fw: 600;
  font-size: clamp(1.375rem, calc(0.4545454545rem + 2.5568181818vw), 2.5rem);
  line-height: 1.2;
}
.blog-head .cover {
  border-radius: var(--border-radius-2);
  overflow: hidden;
  border-radius: var(--symbolG16);
}
.blog-head .cover img {
  width: 100%;
}

.main-aside {
  margin-block: 5rem;
}
@media screen and (min-width: 1072px) {
  .main-aside {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    gap: 2.25rem;
  }
  .main-aside .regularToc {
    margin-block-start: 0;
  }
  .main-aside aside {
    margin-block-start: 0;
  }
}

.mainColumn {
  padding-block-end: 0;
  --mainColumn-overflow: "";
}
.mainColumn .section-title {
  margin-block: 6.25rem 3.75rem;
}

.mainColumn > * + * {
  margin-block-start: var(--mainColumn-block-spacer);
}

aside {
  margin-block-start: var(--mainColumn-block-spacer);
}
aside > * + * {
  margin-block-start: var(--aside-block-spacer);
}

.areaForToc > * + * {
  margin-block-start: var(--mainColumn-block-spacer);
}

.toc {
  display: var(--toc-display, none);
}

.toc, .regularToc {
  position: var(--toc-position, relative);
  z-index: 2;
  border: 1px solid #F1F1F1;
  border-radius: var(--symbolG8);
  padding: var(--toc-padding-block, clamp(1.25rem, calc(1.0454545455rem + 0.5681818182vw), 1.5rem)) var(--toc-padding-inline, clamp(1.25rem, calc(-1rem + 6.25vw), 4rem));
  font-size: 1.125rem;
  line-height: 1.6;
}
.toc h3, .regularToc h3 {
  cursor: pointer;
  position: relative;
  transition: font-size 0.3s linear;
}
.toc h3 .tocToggle, .regularToc h3 .tocToggle {
  display: var(--tocToggle-display, none);
  outline: none;
  background-color: transparent;
}
.toc ol, .regularToc ol {
  margin-block: var(--ol-margin-BS, clamp(1.25rem, calc(1.0454545455rem + 0.5681818182vw), 1.5rem)) var(--ol-margin-BE, 0);
  color: #61A8DB;
}
.toc li, .regularToc li {
  margin-block: 0.22em;
}
.toc a, .regularToc a {
  color: inherit;
  text-underline-offset: 0.3rem;
}
.toc.isSticky, .regularToc.isSticky {
  --h3-margin-BE: 0;
  --bgBox-padding-block: .5em;
  --toc-position: sticky;
  --toc-display: block;
  --toc-padding-block: 1rem;
  --toc-padding-inline: 0;
  --ol-margin-BS: 0;
  --isRightLine-pbT: 0;
  box-shadow: var(--box-shadow-primary);
  width: var(--toc-width, fit-content);
  top: var(--toc-top, var(--header-height));
  background-color: white;
  margin-inline: auto;
}
.toc.isSticky h3, .regularToc.isSticky h3 {
  margin-block-end: 0;
  transform: scale(var(--h3-scale, 70%));
}
.toc.isSticky h3 > i, .regularToc.isSticky h3 > i {
  display: inline-block;
  width: var(--icon-size, 1.4em);
  height: var(--icon-size, 1.4em);
  background: var(--iconUrl, url(../images/icon_expand.svg)) no-repeat center/130%;
  filter: var(--svgBlack2Greyd5);
  vertical-align: middle;
}
.toc.isSticky ol, .regularToc.isSticky ol {
  height: var(--ol-height, 0);
  overflow: hidden;
  opacity: var(--ol-opacity, 0);
  -moz-transition: height 0.3s linear;
  -o-transition: height 0.3s linear;
  -webkit-transition: height 0.3s linear;
  width: var(--ol-width, min-content);
}
.toc.isSticky .tocToggle, .regularToc.isSticky .tocToggle {
  --tocToggle-display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
}
.toc.isSticky.isExpanded, .regularToc.isSticky.isExpanded {
  --toc-width: auto;
  --toc-padding-block: unset;
  --toc-padding-inline: unset;
  --h3-margin-BE: 1em;
  --ol-margin-BE: 1em;
  --ol-margin-BS: clamp(1.25rem, calc(1.0454545455rem + 0.5681818182vw), 1.5rem);
  --ol-height: auto;
  --ol-width: auto;
  --ol-opacity: 1;
  --iconUrl: url(../images/icon_collapse.svg);
  --isRightLine-pbT: 1.75rem;
  --h3-scale: 1;
}

.editable.isDefaultCss {
  color: var(--blogMainColor);
  font-size: 1.125rem;
}
.editable.isDefaultCss > *:first-child {
  margin-block-start: 0;
}
.editable.isDefaultCss h2, .editable.isDefaultCss h3, .editable.isDefaultCss h4, .editable.isDefaultCss h5, .editable.isDefaultCss h6 {
  margin-block-end: 0.5em;
  letter-spacing: 0;
}
.editable.isDefaultCss p {
  margin-block: 1.25rem 2.25rem;
  line-height: 1.8;
}
.editable.isDefaultCss h2 {
  font-size: clamp(1.75rem, calc(1.5454545455rem + 0.5681818182vw), 2rem);
  margin-block-start: 1.25em;
  scroll-margin-block-start: calc(var(--header-height) + 100px);
}
.editable.isDefaultCss h3 {
  font-size: clamp(1.5rem, calc(1.2954545455rem + 0.5681818182vw), 1.75rem);
}
.editable.isDefaultCss h5 {
  font-size: clamp(1.25rem, calc(1.0454545455rem + 0.5681818182vw), 1.5rem);
}
.editable.isDefaultCss h6 {
  font-size: clamp(1.125rem, calc(1.0227272727rem + 0.2840909091vw), 1.25rem);
}
.editable.isDefaultCss ol {
  line-height: 1.6;
}
.editable.isDefaultCss img {
  max-width: 100%;
  display: block;
  margin: 1.25rem auto;
  height: auto;
}
.editable.isDefaultCss iframe {
  max-width: 100%;
}
.editable.isDefaultCss p:has(> iframe[allowfullscreen]) {
  --aspect-ratio: 16 / 9;
}
.editable.isDefaultCss p:has(> iframe[allowfullscreen]) > iframe[allowfullscreen] {
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  border: 0;
}
.editable.isDefaultCss p:has(> iframe[allowfullscreen]).ratio-4-3 {
  --aspect-ratio: 4 / 3;
}
.editable.isDefaultCss p:has(> iframe[allowfullscreen]).ratio-21-9 {
  --aspect-ratio: 21 / 8;
}
.editable.isDefaultCss p:has(> iframe[allowfullscreen]).ratio-9-16 {
  --aspect-ratio: 9 / 16;
}
.editable.isDefaultCss p:has(> iframe[allowfullscreen]).ratio-1-1 {
  --aspect-ratio: 1 / 1;
}
.editable.isDefaultCss .lineBox {
  border: 1px solid var(--color-primary);
  padding: clamp(1.25rem, calc(1.0454545455rem + 0.5681818182vw), 1.5rem) clamp(1.25rem, calc(-1rem + 6.25vw), 4rem);
  border-radius: var(--symbolG16);
}

.prev-next {
  --prev-next-border: 1px solid var(--color-primary);
  border-block: var(--prev-next-border);
  padding-block: clamp(1.875rem, calc(0.3409090909rem + 4.2613636364vw), 3.75rem) clamp(1.25rem, calc(1.0454545455rem + 0.5681818182vw), 1.5rem);
  display: flex;
}
.prev-next > * {
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.prev-next > * + * {
  border-inline-start: var(--prev-next-border);
}
.prev-next a {
  color: var(--color-primary);
  padding-inline: var(--prev-next-a-PIS, 1em) var(--prev-next-a-PIE, 1em);
  --arrow-border-width: 2px;
  font-size: clamp(1rem, calc(0.7954545455rem + 0.5681818182vw), 1.25rem);
}
.prev-next a em {
  display: block;
  color: var(--color-brown-primary);
}
.prev-next a .aIcon {
  background-image: url(../images/icon_arrow_up.svg);
  -moz-filter: var(--svgBlack2Primary);
  -webkit-filter: var(--svgBlack2Primary);
  filter: var(--svgBlack2Primary);
  margin-inline-end: 0;
  vertical-align: bottom;
}
.prev-next a .aIcon.left {
  transform: rotate(-90deg);
}
.prev-next a .aIcon.right {
  transform: rotate(90deg);
}
.prev-next a span {
  color: var(--color-grey-d5);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: var(--line, 3);
  line-height: var(--line-height, 1.6);
  height: calc(1em * var(--line-height, 1.6) * var(--line, 3));
}
.prev-next a:has(.left) {
  --prev-next-a-PIE: clamp(1rem, calc(-1.4545454545rem + 6.8181818182vw), 4rem) ;
}
.prev-next a:has(.right) {
  --prev-next-a-PIS: clamp(1rem, calc(-1.4545454545rem + 6.8181818182vw), 4rem);
  text-align: right;
}
.prev-next a:hover {
  text-underline-offset: 4px;
}

.bgBox {
  background-color: var(--bgBox-color);
  padding: var(--bgBox-padding-block, clamp(1.25rem, calc(1.0454545455rem + 0.5681818182vw), 1.5rem));
  border-radius: var(--symbolG16);
}
.bgBox .isRightLine {
  margin-block-end: 2.25rem;
}

.tags {
  gap: 0.5em;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.focudTag {
  --focusTag-color: var(--color-primary) ;
}

.pageTitle-:has(+ .articleCardList.blogPage) {
  --pageTitle-em-H: .5em;
  --pageTitle-em-bottom: -.3em;
}

.articleCardList.blogPage {
  display: var(--articleCardList-display, grid);
  gap: var(--articleCardList-gap, 2.5rem);
}

@media screen and (min-width: 1072px) {
  :root {
    --header-height: 80px;
    --aside-block-spacer: 2.25rem;
  }
  .articleCardList.blogPage .articleCard {
    display: grid;
    padding: 1rem 1.875rem;
    grid-template-columns: 1.6fr 2fr;
    grid-template-rows: auto;
    gap: 1.125rem 2.5em;
    --article-card-pi: 0;
    --arricleCard-em-size: 1.45em;
    --arricleCard-em-transform: translate(17%, 3%);
  }
  .articleCardList.blogPage .articleCard > * {
    margin: 0;
  }
  .articleCardList.blogPage .articleCard h3 {
    --line: 2;
    margin-block-start: 0.6rem;
  }
  .articleCardList.blogPage .articleCard em {
    position: absolute;
    inset-inline-start: 0;
    top: 1.5rem;
    padding-block: 0.1875rem;
  }
  .articleCardList.blogPage .articleCard .cover {
    grid-row: 1/span 3;
    grid-column: 1/2;
  }
  .articleCardList.blogPage .articleCard p {
    grid-row: 2;
    grid-column: 2;
    --decoration-line: 2;
  }
  .articleCardList.blogPage .articleCard div:has(a) {
    grid-row: 3;
    grid-column: 2;
    place-content: end;
  }
}
.author.bgBox .isRightLine {
  display: flex;
  align-items: flex-end;
  gap: 0.6em;
  padding-block-start: 0;
}
.author.bgBox .cover {
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  width: 2.3em;
  flex-shrink: 0;
  flex-grow: 0;
  height: fit-content;
}
.author.bgBox .cover img {
  width: 100%;
}
.author.bgBox .text {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.author.bgBox p {
  margin-block-end: 0.25rem;
}

.content-footer p {
  margin-block-end: 0.25em;
}
.content-footer .tags {
  margin-block-start: 1rem;
}
.content-footer .tags a:hover {
  transition: all 0.3s linear;
  text-decoration: none;
  font-weight: bold;
}

.bannerList {
  --swiper-navigation-top: 50%;
}
.bannerList img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--symbolG16);
  overflow: hidden;
}