/* ----------------------------------------------------------------------------------
   全ページで使う可能性があるけれど、最初の描画（ファーストビュー）には関係ないもの
---------------------------------------------------------------------------------- */

/* =========================================================
   12. Modal (Airport Map)
========================================================= */
#km-auto-modal-overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2147483647;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s ease;
  backdrop-filter: blur(4px);
}

#km-auto-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.km-auto-modal-content {
  position: relative;
  min-height: 150px;
  width: 90%;
  max-width: 600px;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 15px;
  background: #fff;
}

.km-modal-source {
  display: none;
}

/* =========================================================
   19. Footer Styles
========================================================= */
.footer a .gf,
#footer-top a .gf {
  display: none;
}

#footer-top .widget {
  margin-top: 2em;
}

#footer-top ul {
  border-top: 1px solid rgba(216, 216, 216, 0.15);
}

#footer-top li {
  border-bottom: 1px solid rgba(216, 216, 216, 0.15);
}

/* =========================================================
   23. Swiper Core
========================================================= */

.swiper {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  list-style: none;
}

.swiper-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  block-size: 100%;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

/* --- Navigation --- */
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  cursor: pointer;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-horizontal > .swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-horizontal > .swiper-button-prev {
  right: auto;
  left: var(--swiper-navigation-sides-offset, 10px);
}

/* --- Pagination --- */
.swiper-pagination {
  position: absolute;
  z-index: 10;
  text-align: center;
  transform: translate3d(0, 0, 0);
  transition: 0.3s opacity;
}

.swiper-pagination-fraction {
  color: inherit;
  font-size: 14px;
}

.swiper-pagination-bullets {
  bottom: var(--swiper-pagination-bottom, 8px);
  width: 100%;
}

.swiper-pagination-bullet {
  display: inline-block;
  width: var(--swiper-pagination-bullet-width, 8px);
  height: var(--swiper-pagination-bullet-height, 8px);
  border-radius: 50%;
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
}

button.swiper-pagination-bullet {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  appearance: none;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

/* --- Scrollbar --- */
.swiper-scrollbar {
  position: absolute;
  z-index: 50;
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}

.swiper-horizontal > .swiper-scrollbar {
  bottom: var(--swiper-scrollbar-bottom, 4px);
  left: var(--swiper-scrollbar-sides-offset, 1%);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  height: var(--swiper-scrollbar-size, 4px);
}

.swiper-scrollbar-drag {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
}

/* --- Fade Effect --- */
.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}

/* --- Thumbs --- */
.swiper-thumbs .swiper-slide {
  cursor: pointer;
}

.swiper-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}


/* =========================================================
   25. Floating TOC Button / TOC Modal
========================================================= */
#index-btn {
  position: fixed;
  right: calc(2% + 26px);
  bottom: 158px;
  z-index: 1000001;
  width: 62px;
  height: 62px;
  color: #136299;
  text-align: center;
  transform: translateY(300px);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 6px 6px 16px -12.5px #fff, -6px -6px 16px -12.5px #707070;
}

#index-btn:hover,
.mac #index-btn:hover {
  transform: translateY(-3px);
  transition-delay: 0s;
}

#index-btn:hover {
  cursor: pointer;
}

#index-btn i {
  position: relative;
  top: 1.5px;
  font-size: 1.45em;
}

#index-btn span {
  position: relative;
  top: -6px;
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.iphone #index-btn i {
  top: 2.8px;
}

.iphone #index-btn span {
  top: -4.7px;
}

.index-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  background: #0c0e0f82;
  transition: opacity 0.15s, visibility 0.15s;
}

.index-modal #ez-toc-container {
  min-width: 455px;
  border: none;
}

.index-modal #ez-toc-container::before {
  display: none;
}

.index-modal:not(.active) {
  pointer-events: none;
}

.index-modal.active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s, visibility 0.5s;
}

.index-modal .close {
  position: absolute;
  top: 8px;
  right: 20px;
  font-size: 23px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.index-modal .close:hover {
  opacity: 0.7;
}

.index-modal .ez-toc-container-modal {
  margin: 0.5em !important;
}


/* =========================================================
   26. Generic Modal Area
========================================================= */
.js-open .header,
.js-open .footer-background,
.js-open #breadcrumb,
.js-open nav#g_nav,
.js-open .widget_categories li a,
.js-open .widget_categories li.cat-item::before,
.js-open .recommended-articles-container,
.js-open #categories-2 li.cat-item,
.js-open #page-top {
  z-index: -2 !important;
}

body.js-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.modal-text,
.modal-box figure {
  overscroll-behavior: contain;
}

.modal-text {
  position: relative;
  overflow-y: auto;
  max-height: 16vh;
  margin-top: 1.3em;
  padding: 0 1.3em;
  overscroll-behavior: contain;
}

.modal-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000002;
  display: none;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #0c0e0f82;
  transition: opacity 0.15s;
  transition-behavior: allow-discrete;

  @starting-style {
    opacity: 1;
  }
}

.modal-wrap.is-open {
  display: flex !important;
  opacity: 1;
  transition: opacity 0.55s;

  @starting-style {
    opacity: 0;
  }
}

.modal-box {
  position: relative;
  width: 96%;
  max-width: 950px;
  margin: auto;
  padding: 0 0 1.3em;
  border-radius: 10px 0 10px 10px;
  background: #c9eaff;
}

.modal-box.gallery,
.modal-box.gallery-s {
  padding: 1.3em;
}

.modal-box.gallery-s .modal-text {
  margin: 1.3em -1.3em 0;
}

.modal-box.gallery .modal-text {
  margin: 1.3em;
}

.modal-box figure {
  position: relative;
  display: grid;
  place-items: center;
  overflow: auto;
  max-height: 63vh;
  margin: 1.3em 1.3em 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px -8.5px #ffffffcc, 0 -6px 16px -8.5px #00000030;
  overscroll-behavior: contain;
}

.iphone .modal-box figure {
  max-height: 120vw;
}

figure.wp-block-video {
  background: unset;
}

.modal-wrap .modal-close {
  position: absolute;
  top: -2.3em;
  right: 0;
  padding: 0.45em 0.8em;
  border-radius: 10px 10px 0 0;
  color: #042234;
  background: #c9eaff;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: 500;
  transition: color 0.2s;
}

.modal-close i {
  padding-right: 0.15em;
}

.modal-wrap .modal-close:hover {
  color: #042234b3;
}

.js-modal-open {
  color: #0066ff;
  transition: color 0.18s;
}

.footer .js-modal-open {
  color: #042234;
}

/* =========================================================
   27. Swiper Custom Area
========================================================= */
/*
.swiper.swiper-horizontal {
  touch-action: auto;
}
ピンチイン禁止解除(androidでスワイプできない弊害発生)
*/

.swiper-button-next,
.swiper-button-prev {
  top: var(--swiper-navigation-top-offset, 49%) !important;
  padding: 25.5px;
  border-radius: 35px;
  opacity: 0.3;
  background: white;
  box-shadow: 6px 6px 16px -12.5px #fff, -6px -6px 16px -12.5px #707070;
  transition: 0.2s ease-out;
}

.modal-box .swiper-button-next,
.modal-box .swiper-button-prev {
  background: inherit;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  position: relative;
  top: 0.03em;
  color: #7fd1ff;
  font-size: 40px;
}

.blockquote-inside .swiper-button-next::after,
.blockquote-inside .swiper-button-prev::after {
  color: #747474;
}

.swiper-button-next {
  transform: translateX(-10px);
}

.swiper-button-prev {
  transform: translateX(10px);
}

.swiper-pagination-fraction {
  top: 0.5em !important;
  bottom: unset !important;
  width: 100%;
  font-size: 0.9em;
  font-weight: 400;
}

.swiper-pagination-fraction::before {
  padding-right: 0.25em;
  content: "slide";
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  bottom: var(--swiper-scrollbar-bottom, 0px) !important;
}

.swiper {
  border-radius: 10px;
  background: #e1f3ff;
}

.swiper-scrollbar {
  background: transparent !important;
}

.swiper-wrapper {
  transition-timing-function: cubic-bezier(0.3, 0.63, 0.56, 1);
}

.tab-panel.animation .swiper {
  animation: fade-in 2.4s cubic-bezier(0.19, 1.46, 0.58, 1) forwards;
}

.flex-group .swiper-wrapper {
  width: 0;
}

.slider-thumbnail img {
  filter: brightness(0.43);
  transition: 0.3s ease-in-out;
}

.slider-thumbnail .swiper-slide:hover img,
.swiper-slide-thumb-active img {
  filter: brightness(1);
}

.slider-thumbnail {
  margin-top: 1em;
  box-shadow: unset;
}

.modal-box img,
.slider-wrapper img:not(.slider-thumbnail img),
.fade-slider-wrapper img:not(.slider-thumbnail img) {
  aspect-ratio: 1 / 0.56;
}

.modal-box .swiper.gallery img,
.swiper.gallery img {
  aspect-ratio: 1 / 0.52;
}

.swiper.full-size img {
  aspect-ratio: unset;
}

.swiper-button-next:not(.mobile .swiper-button-next):hover {
  transform: translateX(-6px);
}

.swiper-button-prev:not(.mobile .swiper-button-prev):hover {
  transform: translateX(6px);
}

.mobile .swiper-button-next:active {
  transform: translateX(-6px);
}

.mobile .swiper-button-prev:active {
  transform: translateX(6px);
}

.mobile .swiper:active .swiper-button-next,
.mobile .swiper:active .swiper-button-prev {
  opacity: 1;
  transition: opacity 0.03s ease-out, transform 0.2s ease-out;
}

.mobile .swiper .swiper-button-next,
.mobile .swiper .swiper-button-prev {
  transition: opacity 0.2s 2s ease-out, transform 0.2s 2s ease-out;
}

/* =========================================================
   35. Header Birds
========================================================= */
.animation-3 .seagull {
  animation: fly-around-seagull 16s ease-in-out infinite;
}

/* =========================================================
   38. Header Character Animation Hooks
========================================================= */
.animation-3 .header-second-son-right-hand {
  animation: header-second-son-right-hand 20s 4.7s infinite;
}

.animation-3 .header-second-son-face,
.animation-3 .header-second-son-smile-face {
  animation: header-second-son-face 20s 4.7s infinite;
  will-change: transform;
}

.animation-3 .header-second-son-smile-face {
  animation: header-second-son-smile-face 20s 4.7s infinite;
}

.animation-3 .header-second-son-left-hand {
  animation: header-second-son-left-hand 20s 4.7s infinite;
}

.animation-3 .header-third-son {
  animation: header-third-son 20s 4.7s ease-in-out infinite;
}

.animation-3 .header-third-son-right-hand {
  animation: header-third-son-right-hand 20s 4.7s infinite;
}

.header .site-title:hover {
  opacity: 0.7;
}

/* =========================================================
   40. Cool Button
========================================================= */
.cool-button {
  display: inline-block;
  margin: 30px 0 50px;
  transition: 0.2s ease-out;
  user-select: none;
  -webkit-user-select: none;
}

.cool-button.demo {
  will-change: transform;
}

.cool-button a {
  position: relative;
  padding: 15px 31px;
  border: #0f081d solid 1px;
  border-radius: 50px;
  color: white;
  font-size: 0.77em;
  box-shadow: 0 2.5px 0 #6ac6ff;
  background-image: radial-gradient(circle, #ffffff85 0.6px, transparent 0.6px);
  background-repeat: space;
  background-size: 5px 5px;
  transition: 0.2s ease-out;
}

.mac .cool-button a {
  padding: 16px 31px 14px;
}

_::-webkit-full-page-media,
_:future,
:root .cool-button a:not(.iphone .cool-button a) {
  padding: 17px 31px 13px;
}

.cool-button a::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  opacity: 0.23;
  content: "";
  transition: 0.4s ease-out;
  box-shadow:
    inset 0 0 2rem 0 rgb(180 225 255 / 90%),
    inset 0 0 6rem 0 rgb(180 225 255 / 90%),
    0 0 2rem 0 rgb(180 225 255 / 90%),
    0 0 6rem 0 rgb(180 225 255 / 90%);
}

.cool-button a:hover::after {
  opacity: 1;
}

.cool-button a:hover {
  background-color: #009dff;
  box-shadow: 0 0.5px 0 #6ac6ff;
}

.cool-button:hover {
  transform: translateY(2.5px);
}

/* =========================================================
   41. Infinity / Scroll Sign
========================================================= */
.scroll-infinity-wrap {
  display: flex;
  overflow: hidden;
}

.first-and-second {
  display: flex;
}

.animation .first-and-second {
  animation: infinity-scroll 9s 2.5s 2 linear;
}

.sub-list {
  position: relative;
}

.scroll-sign {
  position: relative;
  right: calc(-100% + 109px);
  display: flex;
  align-items: center;
}

.table-corporate-style .scroll-sign {
  right: calc(-43.7% + 53px);
  margin-bottom: 0.5em;
}

/* =========================================================
   42. Mobile Scrollbar Adjustments
========================================================= */
.iphone .mobile-scrollbar.adj-0 {
  top: -1.2px;
}

.mobile-scrollbar.adj-0 {
  top: 0.8px;
}

.iphone .mobile-scrollbar.adj-1 {
  top: -1.7px;
}

.iphone .mobile-scrollbar.adj-2 {
  top: -1.9px;
}

.iphone .mobile-scrollbar.adj-3 {
  top: -0.7px;
}

.mobile-scrollbar.adj-3 {
  top: 1.5px;
}

.iphone .mobile-scrollbar.adj-4 {
  top: -9.6px;
}

.mobile-scrollbar.adj-4 {
  top: -7px;
}

.mobile-scrollbar.adj-5 {
  top: -6.5px;
  margin: 0 6.5px;
  margin-bottom: -6.5px;
}

.mobile-scrollbar.adj-5::before {
  left: -7.5px;
}

.mobile-scrollbar.adj-5::after {
  right: -8.4px;
}

.iphone .mobile-scrollbar.adj-5 {
  top: -10px;
  margin-bottom: -10px;
}

.iphone .mobile-scrollbar.adj-6 {
  top: -2.2px;
}

.mobile-scrollbar.adj-6 {
  top: 1px;
}

.iphone .mobile-scrollbar.adj-7 {
  top: -1.5px;
}

.mobile-scrollbar.adj-7 {
  top: 0.8px;
}

.iphone .explanation-layout .mobile-scrollbar {
  top: 26.4px;
}

.iphone .explanation-layout .mobile-scrollbar.caption {
  top: 25.9px;
}

.explanation-layout .mobile-scrollbar {
  top: 29.1px;
}

.mobile-scrollbar {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 10px;
  margin: 0 0.7px;
  border-radius: 10px;
  background: #d0d5d5;
}

.mobile-scrollbar::before,
.mobile-scrollbar::after {
  position: absolute;
  top: -10px;
  color: #565656;
  font-family: "uicons-thin-rounded";
  font-size: 18.5px;
}

.mobile-scrollbar::before {
  left: -7px;
  content: "\e375";
}

.mobile-scrollbar::after {
  right: -7px;
  content: "\e377";
}

.parallel-layout-scroll figcaption:not(.explanation-layout figcaption) {
  margin-bottom: 1.5em;
}

.scroll-sign.animation,
.animation .scroll-sign {
  animation:
    front-and-rear 0.07s 2.8s 4 alternate,
    front-and-rear 1s 3.1s 10 alternate linear;
}

.stepbarwrap .scroll-sign {
  margin: -2.2em 0 1em;
}

.scroll-sign .text {
  padding-right: 7px;
  font-size: 13px;
  font-weight: 500;
}

.scroll-sign .horizontal-bar {
  position: relative;
  top: 1px;
  width: 50px;
  height: 1.5px;
  border-radius: 10px;
  background: #042234;
}

.table-corporate-style .horizontal-bar,
.table-corporate-style .sphere {
  background: white;
}

.table-corporate-style .arrow {
  border-left-color: white;
}

.animation .sphere {
  animation: scrolling 0.8s ease-in-out 3;
}

.animation .arrow {
  animation: fade-in ease-in-out 0.4s 2.4s forwards;
}

/* =========================================================
   43. Search Icon / Box Base
========================================================= */
.fi-tr-search::before {
  color: #6d6d6d;
}

.box:not(.layout-automatic-change .box, .parallel-layout-scroll .box) {
  margin: 1.5em auto;
}

.box {
  width: 100%;
  max-width: 540px;
}

.flex-group-answer .box {
  margin: 1.3em auto;
}

.explanation-layout .stepinside .box {
  position: relative;
}

.box .title {
  border-radius: 10px 10px 0 0;
  color: inherit;
  font-size: 1.03em;
  font-weight: 400;
  text-align: center;
  text-shadow: 0 0 7px #00000014;
}

.box.color-select-5 .title {
  background: #7fd1ff;
}

.box.color-select .title {
  background: #87bcdd;
  text-shadow: none;
}

.box.border-style.color-select .content {
  border: 4px solid #87bcdd;
}

.box.rich-style.color-select .content {
  border-bottom: 4px solid #c6c6c6;
  background: #fbfbfb;
}

.box.rich-style .title,
.box.rich-column-style .title {
  padding: 0.43em 1em;
}

.iphone .box.rich-style .title,
.box.rich-column-style .title {
  padding: 0.54em 1em 0.32em;
}

.box.border-style .title {
  margin-bottom: -2px;
  padding: 0.45em 1em 0.3em;
}

.iphone .box.border-style .title {
  padding: 0.54em 1em 0.21em;
}

.box .content {
  position: relative;
  display: flex;
  overflow: auto;
  align-items: center;
  flex-wrap: wrap;
  border-radius: 0 0 10px 10px;
  color: inherit;
}

.parallel-layout-scroll .box .content {
  min-height: 6em;
}

.box.demo .content {
  overflow: visible;
}

.stepinside .box .content {
  max-height: 290px;
}

.box.rich-style .content,
.box.dream-style .content:not(.speech-bubble .content) {
  padding: 1.15em 1.1em;
}

.box.color-select-5 .content {
  border-bottom: 4px solid #7fd1ff;
  background: #f2fbff;
}

.speech-bubble.color-select-5 .content {
  border-bottom: 4px solid #70bae4;
}

.speech-bubble.color-select-9 .content {
  border-bottom: 4px solid #9d6f6f;
}

.explanation-layout .speech-bubble .content {
  background: #fff;
}

.speech-bubble.color-select-1 .content {
  border-bottom: 4px solid #7acdc2;
}

.speech-bubble.color-select-2 .content {
  border-bottom: 4px solid #ffb88f;
}

.speech-bubble.color-select-3 .content {
  border-bottom: 4px solid #ffa2ae;
}

.speech-bubble.color-select-8 .content {
  border-bottom: 4px solid #60696d;
  background: #f6f8f9;
}

.box.border-style .content {
  padding: 1.1em;
  background: white;
}

.box.border-style.color-select-5 .content {
  border: 4px solid #7fd1ff;
}

.box.rich-column-style .content {
  gap: 1.2em;
  padding: 1.15em 1.1em 1.15em 0.8em;
  flex-wrap: nowrap;
}

/* =========================================================
   44. Anime Icon
========================================================= */
.anime-icon {
  position: relative;
}

.color-select-5 .anime-icon {
  color: #7fd1ff;
}

.anime-icon i {
  font-size: 2.2em;
}

.anime-icon::before {
  position: absolute;
  top: 13%;
  left: 122%;
  width: 2.5px;
  height: 2.8em;
  border-radius: 20px;
  content: "";
  background: #8989895e;
}

.anime-icon::after {
  position: absolute;
  bottom: -4.5px;
  left: 0;
  width: 100%;
  height: 20px;
  content: "";
  background: radial-gradient(50% 30% at center center, rgb(0 0 0 / 20%), rgba(0, 0, 0, 0));
  animation: floating-icon-shadow 17s 4s ease-in-out infinite;
}

.anime-icon.floating i {
  animation: floating-3 17s 4s ease-in-out infinite;
}

.box.color-select-1 .title {
  background: #81d6cb;
}

.box.border-style.color-select-1 .content {
  border: 4px solid #81d6cb;
}

.box.color-select-1 .content:not(.border-style .content) {
  border-bottom: 4px solid #81d6cb;
  background: #effcfb;
}

.color-select-1 .anime-icon {
  color: #81d6cb;
}

.anime-icon.floating-rotating i {
  animation: floating-rotating 10s 5s ease-in-out infinite;
}

.anime-icon.floating-rotating::after {
  animation: floating-icon-shadow-2 10s 5s ease-in-out infinite;
}

.box.color-select-2 .title {
  background: #ffb88f;
}

.box.border-style.color-select-2 .content {
  border: 4px solid #ffb88f;
}

.box.color-select-2 .content:not(.border-style .content) {
  border-bottom: 4px solid #ffb88f;
  background: #fffaf6;
}

.color-select-2 .anime-icon {
  color: #ffb88f;
}

.anime-icon.floating-switching i.front {
  animation: rotate-alternately 20s 6s ease-in-out infinite;
}

.anime-icon.floating-switching i.back {
  position: relative;
  transform: translate(0) rotateY(-180deg);
  animation: rotate-alternately-2 20s 6s ease-in-out infinite;
}

.anime-icon.floating-switching::after {
  animation: floating-icon-shadow-3 20s 6s ease-in-out infinite;
}

.box.color-select-3 .title {
  background: #ffa2ae;
}

.box.border-style.color-select-3 .content {
  border: 4px solid #ffa2ae;
}

.box.color-select-3 .content:not(.border-style .content) {
  border-bottom: 4px solid #ffa2ae;
  background: #fff7f8;
}

.color-select-3 .anime-icon {
  color: #ffa2ae;
}

.anime-icon.floating-shake i {
  animation: shake-icon 10s 6s ease-in-out infinite;
}

.anime-icon.floating-shake::after {
  animation: floating-icon-shadow-2 10s 6s infinite;
}

.color-select-4 .anime-icon {
  color: #9ab8ff;
}

.box.color-select-4 .title {
  background: #9ab8ff;
}

.box.color-select-4 .content {
  border-bottom: 4px solid #9ab8ff;
  background: #f4f7ff;
}

.anime-icon.jumping i {
  transform-origin: bottom;
  animation: jumping-8 8.9s 7s infinite;
}

.anime-icon.jumping::after {
  animation: floating-icon-shadow-8 8.9s 7s infinite;
}

.anime-icon.sanjyo::before {
  top: 21%;
  left: 113%;
  background: #fafafa6b;
}

.box.color-select-6 .title {
  background: #fced8a;
}

.box.color-select-6 .content {
  border-bottom: 4px solid #fced8a;
  background-color: #fffce9;
  background-image: radial-gradient(circle, #978e52 2.4px, transparent 2.4px);
  background-size: 30px 30px;
}

.color-select-6 .anime-icon {
  color: #fced8a;
}

.box.color-select-7 .title {
  background: #7ba0fa;
}

.box.color-select-7 .content {
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid #7ba0fa;
  background: #eff3fe;
}

.color-select-7 .anime-icon {
  color: #7ba0fa;
}

/* =========================================================
   45. Moving Wave / Dream Style
========================================================= */
.box .moving-wave p {
  position: relative;
  z-index: 1;
}

.big-wave {
  position: absolute;
  width: 900px;
  height: 900px;
  animation: wave linear infinite;
  animation-delay: 9s;
}

.big-wave.n1 {
  bottom: -900px;
  left: -225px;
  border-radius: 30% 70% / 30% 50%;
  background: #719bff;
  animation-duration: 13.5s;
}

.big-wave.n2 {
  bottom: -895px;
  left: -260px;
  border-radius: 50% 50% / 50% 70%;
  background: #84a5ff;
  animation-duration: 8s;
}

.big-wave.n3 {
  bottom: -900px;
  left: -150px;
  border-radius: 50% 50% / 50% 70%;
  background: #a4bcff;
  animation-duration: 6s;
}

.box .moving-background {
  animation: infinite-scroll 7s 8s linear infinite;
}

.box.dream-style .decoration {
  position: relative;
  display: flex;
  gap: 1em;
  padding: 0.43em 1em;
  border-radius: 10px 10px 0 0;
}

.box.dream-style .title {
  width: 100%;
  overflow: auto;
  padding: 0.05em 1em;
  border-radius: 5.5px;
  background: white;
  text-align: left;
  box-shadow: 1px 1px 1px -0.5px rgb(0 0 0 / 30%);
}

.box.dream-style .title span {
  display: inline-block;
  min-width: max-content;
  text-shadow: none;
}

.box.dream-style .title .fi-tr-bars-staggered {
  position: relative;
  bottom: 0.1em;
  margin-right: 0.3em;
  color: #c0c0c0;
  font-size: 0.78em;
}

.circle-group {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.box.dream-style .circle {
  width: 1.38em;
  height: 1.38em;
  margin: 0;
  border-radius: 50%;
  box-shadow: 1px 1px 2px -1px rgb(0 0 0 / 30%);
}

.page .dream-style.speech-bubble .circle {
  width: 20px;
  height: 20px;
}

.single .dream-style.speech-bubble .circle {
  width: 17px;
  height: 17px;
}

.box.dream-style .circle.n1 {
  background: #f47a5c;
}

.box.dream-style .circle.n2 {
  background: #ffd95a;
}

.box.dream-style .circle.n3 {
  background: #7ce780;
}

.dream-style.color-select-2 .decoration,
.speech-bubble.color-select-2 .decoration {
  background: #ffb88f;
}

.dream-style.color-select-3 .decoration,
.speech-bubble.color-select-3 .decoration,
.speech-bubble.color-select-6 .decoration {
  background: #ffa2ae;
}

.speech-bubble.color-select-1 .decoration {
  background: #7acdc2;
}

.speech-bubble.color-select-5 .decoration {
  background: #70bae4;
}

.speech-bubble.color-select-8 .decoration {
  background: #60696d;
}

.speech-bubble.color-select-9 .decoration {
  background: #9d6f6f;
}


/* =========================================================
   55. Small Animation Hooks
========================================================= */
.ring {
  animation: ring-anim 2s infinite;
}

.blend-anime .child-element:not(.blend-anime .child-element.n0) {
  opacity: 0;
}

.blend-anime.animation .child-element.n1 {
  animation: fade-in 2s 0.7s cubic-bezier(0.6, 0.01, 0.6, 1) forwards;
}

.blend-anime.animation .child-element.n2 {
  animation: fade-in 2s 2.7s cubic-bezier(0.6, 0.01, 0.6, 1) forwards;
}

.rocket-anime-sub-1,
.rocket-anime-sub-2 {
  transform: translateY(65%);
}

/* =========================================================
   46. Speech Bubble
========================================================= */
.speech-bubble::before {
  position: absolute;
  top: 25%;
  left: -20.5px;
  content: "";
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
}

.speech-bubble.color-select-1::before {
  border-right: 21px solid #7acdc2;
}

.speech-bubble.color-select-5::before {
  border-right: 21px solid #70bae4;
}

.speech-bubble.color-select-9::before {
  border-right: 21px solid #9d6f6f;
}

.speech-bubble.color-select-3::before {
  border-right: 21px solid #ffa2ae;
}

.speech-bubble.color-select-8::before {
  border-right: 21px solid #60696d;
}

.speech-bubble.color-select-2::before {
  border-right: 21px solid #ffb88f;
}

.speech-bubble .title::after {
  display: none;
}

.speech-bubble .content {
  min-height: 6em;
  max-height: 202px;
  padding: 0.6em 0.65em !important;
}

.explanation-layout .speech-bubble .content {
  height: 165px;
}

/* =========================================================
   47. Blackboard
========================================================= */
.box.blackboard {
  position: relative;
  padding: 0.6em 0.85em 1.1em;
  border: 10px solid #bcc5cc;
  border-radius: 17px;
  color: #fff;
  background: #34505d;
  box-shadow: 0 0 12px 0 #000000d6 inset;
}

.box.blackboard .title {
  position: relative;
  left: 50%;
  display: inline-block;
  margin-bottom: 0.65em;
  transform: translateX(-50%);
  border-bottom: 1px solid #fff;
  background: unset;
  opacity: 1 !important;
}

.box.trigger p:not(.speech-bubble p),
.box.trigger,
.stretch.trigger,
.trigger .item-name span,
.fade-up.trigger,
.ac-sub-inside-2.trigger .fw-ul.lf,
.trigger .anime-container {
  opacity: 0;
}

.js-modal-open:hover,
.blackboard a:hover {
  color: #8fb7ff !important;
}

.footer .js-modal-open:hover {
  color: white !important;
}

.blackboard .js-modal-open,
.blackboard a {
  color: #67a4ff;
}

.chalk {
  position: absolute;
  bottom: 0;
  height: 5.5px;
  border-radius: 5px 2px 2px 5px;
}

.chalk.n1 {
  right: 6.5%;
  width: 20px;
  background: #fff;
}

.chalk.n2 {
  right: calc(7% + 23px);
  width: 25px;
  background: #a0beff;
}

.page .box.blackboard {
  max-width: 756px !important;
}


/* =========================================================
   48. Overflow Sign / Color Picker
========================================================= */
.overflow-sign {
  position: absolute;
  top: 2px;
  left: 98%;
}

.modal-box .overflow-sign {
  left: 98.4%;
}

.iphone .overflow-sign::after {
  position: absolute;
  width: 3px;
  height: 50px;
  content: "";
  border-radius: 10px;
  background: #808080;
}

.color-picker {
  display: flex;
  gap: 1em;
  max-width: 400px;
}

.color-picker div {
  position: relative;
  width: 5em;
  cursor: pointer;
  transition: 0.1s ease-out;
}

.color-picker div::before {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2px;
  border-radius: 0 0 0.5em 0.5em;
  font-size: 0.7em;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-align: center;
}

.color-picker .active {
  transform: scale(1.1);
}

.color-picker.type-1 {
  margin: 1.5em auto 1em;
}

.color-picker.type-1 div {
  height: 5em;
  border-radius: 0.5em;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.color-picker.type-1 div::before {
  bottom: 0;
  color: #656a6b;
  background-color: #fff;
}

.color-picker.type-1 div::after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 1em;
  content: "";
  border-radius: 100%;
  box-shadow: 0 4px 30px -5px #b9b9b9;
}

.color-picker.type-1 div:nth-child(1) {
  background-color: #7fd1ff;
}

.color-picker.type-1 div:nth-child(2) {
  background-color: #81d6cb;
}

.color-picker.type-1 div:nth-child(3) {
  background-color: #ffb88f;
}

.color-picker.type-1 div:nth-child(4) {
  background-color: #9ab8ff;
}

.color-picker.type-1 div:nth-child(1)::before {
  content: "#7fd1ff";
}

.color-picker.type-1 div:nth-child(2)::before {
  content: "#81d6cb";
}

.color-picker.type-1 div:nth-child(3)::before {
  content: "#ffb88f";
}

.color-picker.type-1 div:nth-child(4)::before {
  content: "#9ab8ff";
}

/* =========================================================
   49. Table Container
========================================================= */
.scroll-container {
  overflow: auto;
}

.table-container {
  position: relative;
  margin: 3em auto 0;
  font-weight: 400;
}

.table-container tbody tr:hover {
  color: #fff;
}

.table-container.add-color tbody tr:hover {
  color: #00fffd;
}

.table-container thead th {
  max-width: 100px;
  padding: 50px 5px 5px;
  font-weight: 500;
}

.table-container td {
  max-width: 100px;
  padding: 5px;
  text-align: center;
}

.table-container thead th span:not(span.svg-icon),
.table-container td span {
  display: grid;
  place-items: center;
  overflow: auto;
  height: 53px;
  padding: 0 7px;
}

.table-container .svg-icon::before {
  top: -0.2em;
}

.table-container .inner {
  border-radius: 0.6em 0.6em 0 0;
  line-height: 1.25;
  background-color: #7fd1ff;
}

.table-container table {
  font-size: 16.5px;
}

.table-caption {
  position: absolute;
  top: -42px;
  left: 50%;
  z-index: 2;
  width: 100%;
  max-width: 96%;
  padding: 10px 18px;
  transform: translateX(-50%);
  border-radius: 0.6em;
  line-height: 1.6;
  background-color: #7fd1ff;
  box-shadow: 0 18px 20px -20px #0d0d0d8c;
}

.table-caption.move {
  transform: translate(-50%, -6px);
  transition: 0.65s 1.5s ease-in-out;
}

.animation .table-caption.move {
  transform: translate(-50%, 0);
}

.table-container.add-color .table-caption,
.table-container.add-color .inner,
.table-container.add-color .sticky {
  background: #f8f8f8;
}

.table-caption .table-title {
  font-size: 22px;
  font-weight: 500;
}

.table-title-sub {
  font-size: 17px;
}

.table-container td.sticky::before,
.table-container th.sticky::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  border-right: 1.5px solid #00000024;
}

.table-container thead tr,
.table-container table tr:not(:last-child) {
  border-bottom: 1.5px solid #00000024;
}

.table-container .sticky,
.table-container tr {
  transition: 0.1s ease-out;
}

.table-container .sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  line-height: 1.3;
  text-align: center;
}

.table-container .sticky:first-child {
  border-radius: 0.6em 0 0 0;
}

/* =========================================================
   50. Text / Weight / Date Icon
========================================================= */
.ac-sub-inside-3 .fw-ul {
  font-weight: 500;
  letter-spacing: 0.55px;
}

_::-webkit-full-page-media,
_:future,
:root .recommended-articles-container .time__date:not(.iphone .recommended-articles-container .time__date)::before {
  top: -2px;
  font-size: 0.98em;
}

.recommended-articles-container .time__date.date {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 36.5px;
  letter-spacing: 0.4px;
}

.iphone .recommended-articles-container .time__date.date {
  margin-left: 2.14em;
}

.iphone .recommended-articles-container .time__date::before {
  font-size: 0.92em;
}

.related-box li .date {
  position: relative;
  margin: 0 0 0 44.5px;
  font-size: 22.5px;
  line-height: 1;
  letter-spacing: 0.5px;
}

.iphone .related-box li .date {
  margin: 0 0 0 38px;
  font-size: 17.2px;
}

.related-post .time__date::before {
  top: 20.2%;
  left: -22.8%;
}

.mac .related-post .time__date::before {
  top: 1%;
  left: -20%;
  font-size: 1em;
}

.iphone .related-post .time__date::before {
  top: 7%;
  left: -1.2em;
}

/* =========================================================
   53. Corporate Table Creative Image
========================================================= */
.table-corporate-style .scroll-infinity .item {
  width: 200px;
}

.creative-image .n4 {
  position: absolute;
  transform-origin: left bottom;
}

.creative-image.animation .n4 {
  animation: tilt 1.5s 1s ease-in-out forwards;
}

.creative-image.animation .n0,
.creative-image.animation .moving {
  animation: slide 1.5s 1s ease-in-out forwards;
}

.gradient-text {
  background-image: linear-gradient(-97deg, #e7e8ea00, #e7e8ea00 50%, #f55600 0, #f2416b);
  background-position: 100% 0;
  background-size: 200% 100%;
  background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  text-fill-color: rgba(0, 0, 0, 0);
}

.animation .gradient-text {
  background-position: 0;
  transition: background-position 2.5s linear;
}

.table-corporate-style .creative-image {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 10px 0 35px;
}

.table-corporate-style .creative-image .n0 {
  position: absolute;
  top: 25px;
}

.table-corporate-style .creative-image .moving {
  position: relative;
  top: 32px;
  overflow: hidden;
  width: 93px;
  height: 186px;
  border-radius: 14px;
}

.table-corporate-style .creative-image .n1 {
  transform: translate(102%, -76%) scale(3);
}

.table-corporate-style .creative-image.animation .n1 {
  animation: moving 6.6s 2.5s forwards;
}

.table-corporate-style .group.n5 .creative-image .n1 {
  transform: translateX(-25px);
}

.table-corporate-style .group.n5 .creative-image.animation .n1 {
  animation: slide-4 8s 2.5s 2 forwards;
}

.table-corporate-style .creative-image .n2 {
  position: absolute;
  top: -7px;
  left: 0;
}

.table-corporate-style {
  position: relative;
  z-index: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.5em -1.5em;
  color: white;
  background: #000;
  text-align: center;
  font-weight: 400;
}

.table-corporate-style .table-title {
  margin: 0;
  padding: 0.7em 1em 0.25em;
  opacity: 0;
  background: linear-gradient(90deg, #0095ff, #c271ff, #ff4672, #ff5a00, #ff4672, #c271ff, #0090f7, #c271ff, #ff4672, #ff5a00);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  text-fill-color: rgba(0, 0, 0, 0);
  font-size: clamp(32px, 4.8vw, 42px);
  font-weight: 500;
  line-height: 1.2;
}

.table-corporate-style .table-title.animation {
  opacity: 1;
  background-position: 100% 0;
  transition: opacity 0.7s ease-in-out, background-position 2.5s 1s linear;
}

.table-corporate-style .lead-lines-on-both-sides::before,
.table-corporate-style .lead-lines-on-both-sides::after {
  background: #fbfbff;
}

.table-corporate-style .item-name {
  margin: 0;
  padding: 6.5px 21px;
  color: #042234;
  background: linear-gradient(#fbfbfb, #f8f8f8);
  font-size: 18px;
  font-weight: 500;
}

.table-corporate-style .product-name {
  margin: 26px 10px 0;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.2;
}

.table-corporate-style .remarks {
  overflow: auto;
  height: 5em;
  margin: 20px 8px 0;
  padding: 0 7px;
  font-size: 0.9em;
}

.table-flex {
  display: flex;
  overflow: auto;
  text-align: center;
}

.table-corporate-style .lead-lines-on-both-sides {
  margin: 28px 10px 25px;
}

.table-corporate-style .group {
  min-width: 271px;
}

.table-corporate-style .item-description {
  display: grid;
  align-items: center;
  overflow: auto;
  height: 140px;
  margin: 0;
  padding: 0.7em 1em 1em;
  font-size: 0.92em;
}

.table-corporate-style .item-description span {
  font-size: 25px;
}

/* =========================================================
   56. Widget Categories Extras
========================================================= */
.widget_categories li li:not(.parent-category li)::before {
  top: 7.5px;
  left: 0.5em;
  font-family: uicons-thin-rounded;
  content: "\ebce";
}

.iphone .widget_categories li li:not(.parent-category li)::before,
.mac .widget_categories li li:not(.parent-category li)::before {
  top: 5.5px;
}

.widget_categories li.cat-item.cat-item-312::before {
  position: absolute;
  top: 8px;
  left: 8.3em;
  font-family: "uicons-thin-rounded";
  content: "\e1c0";
  animation: ring-anim 2s infinite;
}

.iphone .widget_categories li.cat-item.cat-item-312::before {
  top: 5px;
}

.widget_categories li.cat-item.cat-item-311::after {
  position: absolute;
  top: 8.5px;
  left: 11.7em;
  font-family: "uicons-thin-rounded";
  content: "\f139";
  animation: ring-anim 2s infinite;
}

.iphone .widget_categories li.cat-item.cat-item-311::after {
  top: 5px;
}

/* =========================================================
   57. Image / Quotation / Form Reset Again
========================================================= */
.image-elements {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 1.618 / 1;
}

.image-std img {
  border-radius: 10px;
  aspect-ratio: 1.618 / 1;
  object-fit: cover;
}

.quotation-marks {
  position: relative;
}

.quotation-marks::before,
.quotation-marks::after {
  position: absolute;
  top: 0;
  color: #7fd1ff;
  font-family: "uicons-thin-rounded";
  font-size: 22px;
  line-height: 1;
  content: "\ef06";
}

.quotation-marks::before {
  left: 0;
}

.quotation-marks::after {
  right: 0;
}





/* =========================================================
   54. ez-toc
========================================================= */
.wp-block-heading:has(.ez-toc-section) {
  position: relative;
}

.ez-toc-section {
  position: absolute;
  top: 11px;
}

_::-webkit-full-page-media,
_:future,
:root .ez-toc-section:not(.iphone .ez-toc-section) {
  top: -26px;
}

.mobile .ez-toc-section {
  top: -22px;
}

h2 a,
h2 a:hover,
h3 a,
h3 a:hover,
h4 a,
h4 a:hover {
  color: inherit;
  transition: unset;
}

h2 a.anchor {
  scroll-margin-top: 25px;
}

.mobile h2 a.anchor {
  scroll-margin-top: 49px;
}

h3 a.anchor {
  scroll-margin-top: -10px;
}

_::-webkit-full-page-media,
_:future,
:root h3 a.anchor:not(.iphone h3 a.anchor) {
  scroll-margin-top: 22px;
}

.mobile h3 a.anchor {
  scroll-margin-top: 14px;
}

/* =========================================================
   58. Child Element Delay Helpers
========================================================= */
.child-element {
  position: absolute;
}

.d-1 {
  animation-delay: 0.25s !important;
}

.d-2 {
  animation-delay: 0.4s !important;
}

.d-3 {
  animation-delay: 0.55s !important;
}

.d-4 {
  animation-delay: 0.7s !important;
}

.d-5 {
  animation-delay: 0.85s !important;
}

.d-6 {
  animation-delay: 1s !important;
}

/* =========================================================
   59. Animation Group 2
========================================================= */
.animation-2 .box-floating-anime .child-element.n1 {
  animation: floating-2 5s ease-in-out alternate infinite;
}

.animation-2 .box-floating-anime .child-element.n2 {
  animation: floating-2 5s 0.5s ease-in-out alternate infinite;
}

.animation-2 .box-floating-anime .child-element.n3 {
  animation: floating-2 5s 1.5s ease-in-out alternate infinite;
}

.animation-2 .box-floating-anime .child-element.n4 {
  animation: floating-2 5s 2.5s ease-in-out alternate infinite;
}

.animation-2 .box-floating-anime .child-element.n5 {
  animation: floating-2 14s ease-in-out alternate infinite;
}

.animation-2 .box-floating-anime .child-element.n6 {
  animation: floating-2 12s ease-in-out alternate infinite;
}

.animation-2 .box-floating-anime .child-element.n7 {
  animation: floating-2 5s 3s ease-in-out alternate infinite;
}

.animation-2 .box-floating-anime .child-element.n8 {
  animation: floating-2 5s 2s ease-in-out alternate infinite;
}

.animation-2 .bulleted-list-anime .child-element.n1 {
  animation: rotating 2.5s linear infinite;
}

.animation-2 .bulleted-list-anime .child-element.n3 {
  animation: rotating 100s linear infinite;
}

.rotating-steps.animation-2 {
  animation: rotating 5s steps(9) infinite;
}

/* =========================================================
   60. Search Bot / Ghost / Electric Matryoshka
========================================================= */
.search-bot-anime .child-element.n1 {
  animation: rotating-y 7.5s 7.6s cubic-bezier(0.2, 0, 1, 1) forwards;
}

.search-bot-anime .child-element.n2 {
  transform: translateY(-3.5px);
  animation:
    jumping 0.15s 0.5s 2 ease-in,
    super-high-speed-rotation 4.7s 2.2s cubic-bezier(0.41, 0, 0, 1) forwards,
    jumping 0.15s 7.2s ease-in,
    rotate-20 0.28s 7.8s ease-in forwards,
    rotate-20 0.28s 17.5s ease-in reverse forwards;
}

.rotating-y {
  animation: rotating-y 9s 7.6s cubic-bezier(0.2, 0, 1, 1) forwards;
}

.ghost-anime .child-element.n1 {
  transform: translateY(19%);
  animation: home-position 19.8s cubic-bezier(0.2, 0, 1, 1) forwards;
}

.ghost-anime .child-element.n3 {
  animation: gakuburu 0.012s 2.3s 60;
}

.ghost-anime .child-element.n4 {
  animation: gakuburu 0.012s 6.3s 60;
}

.ghost-anime .child-element.n5 {
  animation: gakuburu 0.012s 10.3s 60;
}

.ghost-anime .child-element.n6 {
  animation: gakuburu 0.012s 14.3s 60;
}

.ghost-anime .gakuburu-anime {
  animation: gakuburu 0.012s 16s 200, gakuburu 0.012s 29.2s 200;
}

.ghost-anime .floating {
  animation: floating 1.8s 0.5s ease-in-out 16;
}

.ghost-anime .child-element.n7 {
  transform: translateX(-2em) rotate(22deg);
  animation:
    swing 8s 1s ease-in-out alternate 2,
    swing 1s 17s ease-in-out alternate 2,
    home-position 2s 19s ease-in-out,
    launching-obake 10s 21s ease-in-out forwards;
}

.electric-matryoshka-anime .child-element.n1 {
  animation:
    gakuburu 0.01s 600,
    gakuburu 0.12s 6s 25,
    gakuburu 0.2s 9s 20,
    gakuburu 1s 13s 3,
    gakuburu 1.6s 16.6s;
}

.mac _::-webkit-full-page-media,
_:future,
:root .electric-matryoshka-anime .child-element.n1 {
  animation:
    gakuburu 0.012s 600,
    gakuburu 0.12s 6s 25,
    gakuburu 0.2s 9s 20,
    gakuburu 1s 13s 3,
    gakuburu 1.6s 16.6s;
}

.electric-matryoshka-anime .battery-anime {
  animation: flash 2s 18s 3, fade-out 0.55s 24s ease-in-out forwards;
}

.electric-matryoshka-anime .child-element.n4 {
  animation: fade-out 1.5s 12.9s ease-in-out forwards;
}

.electric-matryoshka-anime .child-element.n5 {
  animation: fade-out 1.5s 5.5s ease-in-out forwards;
}

/* =========================================================
   61. UFO / Spaceship / Rocket Animation
========================================================= */
.ufo-anime .floating {
  animation:
    floating 2.5s 0.5s ease-in-out 8,
    launching-rocket 3s 21.5s cubic-bezier(0.08, 0.44, 1, -0.26) forwards;
}

.ufo-anime .child-element.n1 {
  transform: translateX(-2em) rotate(22deg);
  animation:
    swing 8s 1s ease-in-out alternate 2,
    swing 1s 17s ease-in-out alternate 2,
    home-position 2s 19s ease-in-out forwards;
}

.spaceship-anime .child-element.n2 {
  transform: translate(-10.8%, -18%);
}

.spaceship-anime .child-element.n3 {
  transform: translate(10.7%, -18%);
}

.spaceship-anime.animation .floating {
  animation: floating 2s 0.5s ease-in-out 4;
}

.spaceship-anime.animation .child-element.n1 {
  animation: launching 3.3s 8.5s cubic-bezier(0.71, 0, 1, -0.7) forwards;
}

.spaceship-anime.animation .child-element.n2 {
  animation:
    home-position 2s 3.5s ease-in-out,
    launching 4s 5.5s cubic-bezier(0.71, 0, 1, -0.45) forwards;
}

.spaceship-anime.animation .child-element.n3 {
  animation:
    home-position 2s 4.5s ease-in-out,
    launching 4s 6.5s cubic-bezier(0.71, 0, 1, -0.45) forwards;
}

.rocket-anime .child-element.n0 {
  transform: translateY(-88%);
  animation: home-position 24.5s 2.1s cubic-bezier(0.44, 0.13, 0.9, 1) forwards;
}

.mac .rocket-anime .child-element.n0 {
  top: -10px;
}

.rocket-anime .child-element.n1 {
  transform: translateY(50%);
  animation: rise-2 5s 1s cubic-bezier(0.77, 0.14, 1, 1);
}

.rocket-anime .child-element.n3 {
  transform: translateY(50%);
  animation: rise-2 3s 1.5s cubic-bezier(0.77, 0.14, 1, 1);
}

.rocket-anime .child-element.n2 {
  top: 7px;
  animation: floating 6.5s 4 ease-in-out forwards;
}

.rocket-anime .child-element.n14 {
  top: 7px;
  animation: floating 5s 5 ease-in-out forwards;
}

.rocket-anime .child-element.n15 {
  top: 7.5px;
  animation: floating 3.5s 7 ease-in-out forwards;
}

.rocket-third-son,
.rocket-third-daughter {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translate(0, 77%) scale(1.5);
}

.rocket-anime .floating {
  animation: floating 2.5s 4s ease-in-out 8;
}

.rocket-third-son {
  left: 11%;
  animation: rise 11s 5s ease-in-out forwards;
}

.rocket-third-daughter {
  top: 12%;
  left: -11%;
  animation: rise-3 11s 13s ease-in-out forwards;
}

.rocket-anime .child-element.n5 {
  transform: translateY(12%);
  animation: home-position 0.3s 9s forwards;
}

.rocket-anime .child-element.n10 {
  transform: translateY(12%);
  animation: home-position 0.3s 17s forwards;
}

.rocket-anime .child-element.n7,
.rocket-anime .child-element.n8,
.rocket-anime .child-element.n12,
.rocket-anime .child-element.n13 {
  left: 45.6%;
  width: 9.3%;
  margin-top: 45.9%;
}

.rocket-anime .child-element.n7,
.rocket-anime .child-element.n12 {
  filter: blur(13px) brightness(1.7);
}

.rocket-anime .child-element.n8 {
  animation: flame-2 0.8s 5s ease-in-out 14;
}

.rocket-anime .child-element.n13 {
  animation: flame-2 0.8s 13s ease-in-out 14;
}


/* =========================================================
   62. Utility Motion / Stepbar
========================================================= */
.rotating-run {
  position: relative;
}

.rotating-run::after {
  position: absolute;
  top: 0;
  left: -0.38em;
  font-family: uicons-thin-rounded;
  font-size: 5em;
  content: "\e746";
  transform: translateY(-41%) scale(0.2);
}

.zoom-in-down.animation {
  animation: zoom-in-down 1.5s forwards;
}

.stepbar-anime .child-element.n1 {
  transform: scale(0.85);
}

.animation-2 .stepbar-anime .child-element.n1 {
  animation: expansion-and-contraction 5s ease-in-out alternate infinite;
}

.stepbar-anime .child-element.n2 {
  top: 30%;
  left: 49.8%;
  width: 0.8%;
  transform: scale(0);
  transform-origin: top;
}

.animation-2 .stepbar-anime .child-element.n2 {
  animation: vertical-stretch 8s ease-in infinite;
}

.stepbar-anime .child-element.n4,
.stepbar-anime .child-element.n5 {
  left: 48.6%;
  width: 3%;
  transform: scale(0);
}

.stepbar-anime .child-element.n4 {
  top: 46.5%;
}

.animation-2 .stepbar-anime .child-element.n4 {
  animation: scaleing 8s infinite;
}

.stepbar-anime .child-element.n5 {
  top: 65%;
}

.animation-2 .stepbar-anime .child-element.n5 {
  animation: scaleing 8s 1.4s infinite;
}

.iphone .stepbar-anime .child-element.n2 {
  top: 28.6%;
}

.iphone .stepbar-anime .child-element.n4 {
  top: 44.5%;
}

.iphone .stepbar-anime .child-element.n5 {
  top: 61.9%;
}

/* =========================================================
   63. Entry Content / Palette / Flowing Background
========================================================= */
.ver1 .color-palette {
  display: block;
  width: 1.03em;
  height: 1.03em;
  margin: 0.2em auto;
  border-radius: 50%;
}

.ver1 .color-palette.n1 {
  background: linear-gradient(to bottom, #70bae4 50%, #f2fbff 50%);
}

.ver1 .color-palette.n2 {
  background: linear-gradient(to bottom, #87d9ce 50%, #effcfb 50%);
}

.ver1 .color-palette.n3 {
  background: linear-gradient(to bottom, #ffb88f 50%, #fffaf6 50%);
}

.ver1 .color-palette.n4 {
  background: linear-gradient(to bottom, #ffa2ae 50%, #fff7f8 50%);
}

.ver1 .color-palette.n5 {
  background: linear-gradient(to bottom, #60696d 50%, #f6f8f9 50%);
}

.flowing-background img {
  transform: translate(12%, -49%) scale(1.3);
  animation:
    perspective-change 8s 7s cubic-bezier(0.19, 0.02, 0.24, 0.92),
    swaying-in-the-wind 33s 15s cubic-bezier(0.19, 0.02, 0.24, 0.92) forwards;
}

/* =========================================================
   66. Parallel Layout / Generic Utilities
========================================================= */
.parallel-layout-scroll {
  position: relative;
  z-index: 1;
  display: flex;
  overflow: auto;
  gap: 1.5em;
  margin: 0.5em 0 -30px;
}

.mac .parallel-layout-scroll {
  padding: 0 1px;
}

.mobile .parallel-layout-scroll,
.mobile .table-flex {
  scroll-snap-type: x mandatory;
}

.mobile .flex-group,
.mobile .flex-group-2,
.mobile .table-corporate-style .group {
  scroll-snap-align: start;
}

.flex-group {
  width: 100%;
  min-width: max-content;
  margin: 0 auto;
}

.flex-group-2 {
  width: 100%;
}

.o-r {
  transform-origin: right;
}

.o-l {
  transform-origin: left;
}

.jiggle-anime {
  display: inline-block;
  animation: jiggle 1.5s ease-in infinite;
}

del.line {
  background-image: linear-gradient(#ff4b60, #ff4b60);
  background-position: 0 53%;
  background-repeat: repeat-x;
  background-size: 100% 1px;
  text-decoration: none;
}

/* =========================================================
   64. Fireflies / Insects / Author Overlay
========================================================= */
.suspicious-fireflies {
  position: absolute;
  width: 2px;
  height: 2px;
  opacity: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px #cb0019, 0 0 10px 3px #ff2424d4;
}

.suspicious-fireflies.n1,
.suspicious-fireflies.n2,
.suspicious-fireflies.n3 {
  offset-path: path("M.25,11.61S17.73,1.69,37,.61c35.83-2,62.76,23.28,100.25,26,41.35,3,76.04-10.6,100-10,40,1,55,16,81,17,23.94.92,38.5-6,38.5-6");
}

.suspicious-fireflies.n1 {
  top: 60%;
  left: -5%;
  animation: fly-around-2 1.6s 3.5s ease-out;
}

.suspicious-fireflies.n2 {
  top: 50%;
  left: 70%;
  animation: fly-around-3 1.6s 5.5s ease-out;
}

.suspicious-fireflies.n3 {
  top: 25%;
  left: 20%;
  animation: fly-around-2 1.8s 6.5s ease-out;
}

.suspicious-fireflies.n4,
.suspicious-fireflies.n5 {
  top: 15%;
  offset-path: path("M1.49,22.35c2.39,8.08,14.38,10.48,26.51,8.59,10.73-1.68,21.66-8.98,19.53-18.75C45,.62,33.03-.85,18.45,2.7,8.66,5.09-1.34,12.76,1.49,22.35Z");
}

.suspicious-fireflies.n4 {
  left: 34%;
  animation: fly-around-2 3s 17s 10 linear;
}

.suspicious-fireflies.n5 {
  left: 36%;
  animation: fly-around-3 3s 17.5s 10 linear;
}

.tobimusi {
  position: absolute;
  width: 20%;
  opacity: 0;
  will-change: transform, opacity;
}

.tobimusi.n1 {
  top: 10%;
  left: 70%;
  offset-path: path("M66.42,458.21c-34.61-17.72-44.41-73.11-42.04-105.97,2.01-27.93,11.11-51.96,8.02-87.9-2.21-25.64-18.07-48.9-21.77-91.85-3.68-42.73,13.09-69.21,9.41-111.94C15.93,13,.31.39.31.39");
  animation: fly-around-5 1.8s 16s cubic-bezier(0.77, 0, 1, 1) reverse;
}

.tobimusi.n2 {
  top: 3%;
  left: 30%;
  offset-path: path("M62.56.23c34.84,67.17,11.49,105.23-10.94,141.26-12.57,20.18-18.25,38-16.8,71.3,1.14,25.97,6.54,51.41,2.38,78.48-6.59,42.81-30.29,65.4-35.19,108.45-5.46,47.89,5.66,62.62,5.66,62.62");
  animation: fly-around-5 1.5s 17.5s cubic-bezier(0.77, 0, 1, 1) reverse;
}

.tobimusi.n3 {
  top: 0.5%;
  left: 50%;
  offset-path: path("M66.42,458.21c-34.61-17.72-44.41-73.11-42.04-105.97,2.01-27.93,11.11-51.96,8.02-87.9-2.21-25.64-18.07-48.9-21.77-91.85-3.68-42.73,13.09-69.21,9.41-111.94C15.93,13,.31.39.31.39");
  animation: fly-around-4 1s 19s cubic-bezier(0.77, 0, 1, 1);
}

.single .author-2 {
  position: absolute;
  top: 61%;
  left: 1.3%;
  width: 60%;
  opacity: 0;
  animation: fade-in-out 27s 21.5s ease-in-out forwards;
}

/* =========================================================
   65. Copy Button
========================================================= */
.btn-copy {
  position: relative;
  width: 63px;
  height: 63px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 11px 11px -11px #00000052;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
}

.btn-copy::before {
  position: absolute;
  top: 21px;
  left: -100%;
  width: 100%;
  height: 100%;
  content: "Copied";
  transition: 0.25s ease-out;
}

.btn-copy-text {
  position: relative;
  top: 20px;
  display: inline-block;
  transition: 0.2s;
}

_::-webkit-full-page-media,
_:future,
:root .btn-copy .btn-copy-text:not(.iphone .btn-copy-text) {
  top: 22.5px;
}

.iphone .btn-copy-text {
  top: 21.5px;
}

.btn-copy-active::before {
  left: 0;
}

.btn-copy-active .btn-copy-text {
  transform: translateY(250%);
}


/* =========================================================
   72. Footer Scene
========================================================= */
.footer {
  padding-bottom: 22px;
  background-image: linear-gradient(180deg, #60c2ffdb 0%, #ffffff 100%);
  font-size: clamp(16.5px, 4.3vw, 1em);
}

.footer:not(.page-id-979 .footer) {
  position: relative;
  z-index: 1;
  border-top: #7ec5f6 solid 17px;
  background-color: unset;
  box-shadow: 0 -16px 16px -26.5px #000;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.footer-background {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin-top: 50px;
  border-top: #cbeaff solid 17px;
  background: #a1ddff;
  content-visibility: auto;
}

.footer-cloud {
  position: absolute;
}

.footer-cloud.n1 {
  top: 48%;
  left: 8%;
}

.footer-cloud.n2 {
  top: 49.5%;
  left: 75%;
}

.animation .footer-cloud {
  transform: translate(0) !important;
  opacity: 1 !important;
}

.seaside-scenery div {
  position: absolute;
  background-repeat: no-repeat;
}

.sandy-beach {
  top: 610px;
}

.palm-tree {
  transform-origin: bottom;
}

.palm-tree.n1 {
  left: calc(49.5vw - 670px);
  z-index: 1;
  margin-top: -100px;
}

.palm-tree.n2 {
  right: calc(49.5vw - 670px);
  z-index: 1;
  margin-top: -100px;
}

.palm-tree.n3 {
  left: calc(44vw - 220px);
  margin-top: 175px;
}

.palm-tree.n4 {
  right: calc(44vw - 220px);
  margin-top: 175px;
}

.stone {
  z-index: 2;
}

.stone.n1 {
  left: calc(50vw + 235px);
  margin-top: 480px;
}

.stone.n2 {
  left: calc(26vw - 107px);
  margin-top: 470px;
}

.crab {
  z-index: 1;
  offset-distance: 100%;
}

.crab.n1 {
  left: calc(50vw + 242px);
  margin-top: 473px;
  offset-path: path("M0,.47C43.98-.15,91.81,7.83,134.67,18.73");
}

.crab.n2 {
  left: calc(50vw - 363px);
  margin-top: 475px;
  offset-path: path("M.04,4.78C40.85-.9,108.76.42,108.76.42");
}

.sea {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateY(-7px);
}

.sea.n1 {
  top: 60%;
  background: #3f687f;
}

.sea.n2 {
  top: 60.3%;
  background-image: linear-gradient(180deg, #6ac6ff 0%, #ffffff 30%);
}

/* =========================================================
   67. Ordered / Unordered Lists
========================================================= */
.box ol li,
.box ul li {
  line-height: 1.48;
}

.box ol li {
  padding-left: 0.2em;
}

.demerit.inner ul.list-square li::before {
  background: #ffa2ae;
}

.iphone ul.list-small-circle li::before {
  top: 0.48em;
}

.mac ul.list-small-circle li::before {
  top: 0.51em;
}

.blackboard ul.list-big-circle li::before {
  background: #fff;
}

.box.blackboard.color-select li::before {
  color: #e0e2ee;
}

.iphone ul.list-feedback-review li::before,
.mac ul.list-feedback-review li::before {
  top: -0.13em;
}

.mac ul.list-check li::before {
  top: 0;
}

.mac ul.list-square li::before {
  top: 30%;
}

.iphone ul.list-square li::before {
  top: 0.46em;
}

.iphone ul.list-big-circle li::before,
.mac ul.list-big-circle li::before {
  top: 0.35em;
}

/* =========================================================
   68. List Mascot Icons / Sub List
========================================================= */
ul li.icon::after {
  position: absolute;
  width: 50px;
  height: 52px;
  content: " ";
  background-repeat: no-repeat;
  transform-origin: bottom;
}

ul li.third-son::after {
  top: -11px;
  left: -41px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/third-son-of-the-site-mascot.svg");
  background-size: 80%;
  animation: jumping-10 8s -2.6s;
}

ul li.third-daughter.icon::after {
  top: -18px;
  left: -40px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/site-mascot-third-daughter-and-rabbit-ear-headband.svg");
  background-size: 71%;
  animation: jumping-10 8s -1.6s;
}

ul li.second-son.icon::after {
  top: -7px;
  left: -42px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/second-son-of-the-site-mascot.svg");
  background-size: 79%;
  animation: jumping-10 8s -0.6s;
}

ul li.second-daughter.icon::after {
  top: -15px;
  left: -41px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/second-daughter-of-the-site-mascot.svg");
  background-size: 79%;
  animation: jumping-10 8s 0.4s;
}

.sub-list::before {
  position: absolute;
  top: 0.33em;
  left: -1.43em;
  font-family: uicons-thin-rounded !important;
  font-size: 0.78em;
  content: "\ef7c";
  transform: scaleX(0.87);
}

.iphone .sub-list::before {
  top: 0.23em;
}

.mac .sub-list::before {
  top: 0.24em;
}

.lead-lines-on-both-sides.animation {
  animation: flexibility 0.28s forwards;
}

.lead-lines-on-both-sides.animation::before,
.lead-lines-on-both-sides.animation::after {
  animation: flexibility 0.28s 0.3s forwards;
}

.accordion-main-demo .lead-lines-on-both-sides.animation {
  animation: flexibility 0.28s 0.73s forwards;
}

.accordion-main-demo .lead-lines-on-both-sides.animation::before,
.accordion-main-demo .lead-lines-on-both-sides.animation::after {
  animation: flexibility 0.28s 1s forwards;
}

.ac-inside .lead-lines-on-both-sides::before,
.ac-inside .lead-lines-on-both-sides::after {
  background: white;
}

.lead-lines-on-both-sides.delay-2.animation::before,
.lead-lines-on-both-sides.delay-2.animation::after {
  animation-delay: 0.97s;
}

.fade-up.animation {
  animation: fade-up-jump 0.3s cubic-bezier(0.15, 0.16, 0.14, 1.73) forwards;
}

.supplement.animation {
  animation: fade-up 0.3s cubic-bezier(0.15, 0.16, 0.25, 1) forwards;
}

.supplement.animation::before,
.supplement.animation::after {
  animation: fade-up 0.6s cubic-bezier(0.15, 0.16, 0.2, 1) forwards;
}

.supplement.down.animation {
  animation: fade-down 0.3s cubic-bezier(0.15, 0.16, 0.25, 1) forwards;
}

.box.flexibility.animation {
  animation: flexibility 0.48s cubic-bezier(0.19, 1.46, 0.58, 1) forwards;
}

.box.flexibility.animation p:not(p.title) {
  width: 100%;
  animation: flexibility 0.3s 0.35s forwards;
}

.box.flexibility.delay-1 p:not(p.title) {
  animation-delay: 0.9s !important;
}

.box.up-down.animation {
  transform-origin: bottom;
  animation: flexibility-2 0.45s cubic-bezier(0.19, 1.46, 0.58, 1) forwards;
}

.box.up-down.animation p:not(.title) {
  transform-origin: bottom;
  animation: flexibility-2 0.28s 0.35s forwards;
}

.modal-box.flexibility.animation {
  animation: flexibility 0.45s 0.42s cubic-bezier(0.19, 1.46, 0.58, 1) forwards;
}

.lead-lines-on-both-sides::before {
  margin-right: 13px;
  margin-left: 8px;
  transform-origin: right;
}

.lead-lines-on-both-sides::after {
  margin-right: 8px;
  margin-left: 13px;
  transform-origin: left;
}

/* =========================================================
   69. Lead Lines / Supplement 
========================================================= */
.stretch.animation {
  animation: flexibility 0.28s forwards;
}

/* =========================================================
   70. Ending / Profile Card Additions / Intro
========================================================= */
.ending {
  display: flex;
  align-items: center;
  justify-content: center;
}

.entry-content .ending img:not(.site-logo img) {
  aspect-ratio: 1 / 0.4;
  object-fit: cover;
  filter: brightness(55%) saturate(0.5);
}

.mac .operator-name {
  padding: 4px 0 2px;
}

.iphone .operator-name::before {
  width: 1.077em;
  height: 72.5%;
}

.mac .dot::before {
  top: -0.12em;
}

_::-webkit-full-page-media,
_:future,
:root .profile-card .dot:not(.iphone .profile-card .dot)::before {
  top: 0;
}

/* =========================================================
   71. 3D Button
========================================================= */
.button-3d {
  position: relative;
  z-index: 1;
  display: inline-flex;
  perspective: 900px;
  margin: 0 auto;
}

.button-3d-square {
  position: relative;
  transform: rotateX(45deg);
  transform-style: preserve-3d;
  padding: 0.9em 0.8em 0.9em 1em;
  border-radius: 0.25rem 0.25rem 0.1rem 0.1rem;
  background: #524c4c;
  color: white !important;
  font-size: clamp(15.7px, 3.6vw, 18px);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-shadow: 0 0 #000;
  transition: transform 1.2s 0.1s linear;
  -webkit-user-select: none;
  user-select: none;
}

.button-3d-square:hover {
  transform: rotateX(0);
  border-radius: 5px;
  transition: 0.35s cubic-bezier(0, 0, 0.48, 1);
  will-change: transform;
}

.button-3d-square::after {
  position: absolute;
  top: 97%;
  left: 0;
  width: 100%;
  height: 30%;
  content: "";
  transform: rotateX(-90deg);
  transform-origin: 0 0;
  border-radius: 0 0 4px 4px;
  background: #3b3838;
}

.fi-tr-angle-double-small-down::before {
  position: relative;
  top: 0.12em;
  left: 0.12em;
  font-size: 1.1em;
}

/* =========================================================
   73. TOC
========================================================= */

.ez-toc-counter nav ul li a::before {
  position: relative;
  top: 0.08em;
  width: 1.65em;
  margin: 0 0 0 1em;
  font-size: 0.92em;
  letter-spacing: 0;
}

.mac .ez-toc-counter nav ul li a::before,
.iphone .ez-toc-counter nav ul li a::before {
  width: 1.95em;
}

#ez-toc-container::before {
  /*
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/third-son-of-the-site-mascot.svg");
  background-repeat: no-repeat;
  height: 100%;
  width: 4.2em;
  content: "";
  top: 1.9em;
  position: absolute;
  transform: translateX(-50%) rotate(180deg);
  left: 50%;
  animation: mascot-third-son-hiding 2.5s 7s forwards ease-in-out;
  */
}

#ez-toc-container a,
#ez-toc-container a:visited {
  color: #042234;
}

#ez-toc-container ul li {
  padding: 11.2px 0;
  line-height: 1.42;
}

#ez-toc-container ul {
  padding: 0.6em 1em 0.6em 0;
  border: 2px dashed #fff;
  border-radius: 12.5px;
  background: linear-gradient(#fcfcfc, #fafafa);
  box-shadow: 6px 6px 16px -12.5px #fff, -6px -6px 16px -12.5px #707070;
}

.index-modal #ez-toc-container ul {
  max-height: clamp(499px, 133vw, 630px);
  overflow: auto;
}

.mac .ez-toc-widget-container nav ul li a::before {
  height: 28px;
  padding-top: 2px;
  font-size: 0.73em;
  font-weight: 600;
}

_::-webkit-full-page-media,
_:future,
:root .ez-toc-widget-container nav ul li a:not(.iphone .ez-toc-widget-container nav ul li a)::before {
  height: 26px;
  padding-top: 4px;
}

.ez-toc-widget-container nav ul li.active a::before {
  color: #042234;
  background: white;
}

.ez-toc-widget-container li.active > a {
  color: white !important;
}

.index-modal #ez-toc-container a:hover::before {
  transform: scale(1);
}

#ez-toc-container a:hover {
  text-decoration: none;
}

#ez-toc-container ul li a::after {
  position: absolute;
  bottom: 0;
  left: 2.45em;
  width: calc(100% - 2.6em);
  height: 1px;
  content: "";
  opacity: 0;
  background: #042234;
  transform: translateY(10px);
  transition:
    transform 0.23s 0.01s ease-in-out,
    opacity 0.15s 0.01s ease-in-out;
}

.mac #ez-toc-container ul li a::after {
  left: 2.65em;
}

_::-webkit-full-page-media,
_:future,
:root #ez-toc-container ul li a:not(.iphone #ez-toc-container ul li a)::after {
  height: 2px;
}

#ez-toc-container ul li a:hover::after {
  opacity: 1;
  transform: translateY(2.5px);
  will-change: transform;
}

.index-modal #ez-toc-container ul li a:hover {
  opacity: 0.6;
}

.index-modal #ez-toc-container a {
  transition: opacity 0.3s;
}

/* =========================================================
   74. Ribbon / Category Icons
========================================================= */
.ribbon {
  position: absolute;
  top: -7.5px;
  right: -7.5px;
  overflow: hidden;
}

.ribbon span {
  position: absolute;
  z-index: 1;
  transform: rotate(45deg);
  background: #524c4c;
  color: white;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.5px;
}

.ribbon span::before,
.ribbon span::after {
  position: absolute;
  bottom: -5.5px;
  content: "";
  border-top: 6px solid #3b3838;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.widget_categories li.cat-item::before {
  position: absolute;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
}

.widget_categories .cat-item-286::before {
  top: 0.39em;
  left: 0.44em;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/camera-icon.svg");
  background-size: 20px;
}

.iphone .widget_categories .cat-item-286::before {
  top: 0.25em;
  left: 0.4em;
}

.mac .widget_categories .cat-item-286::before {
  top: 0.28em;
}

_::-webkit-full-page-media,
_:future,
:root .widget_categories .cat-item-286:not(.iphone .widget_categories .cat-item-286)::before {
  top: 0.2em;
}

.widget_categories .cat-item-310::before {
  top: 0.35em;
  left: 0.35em;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/tour-guide-icon.svg");
  background-size: 23px;
}

.iphone .widget_categories .cat-item-310::before {
  top: 0.25em;
}

.mac .widget_categories .cat-item-310::before {
  top: 0.23em;
}

_::-webkit-full-page-media,
_:future,
:root .widget_categories .cat-item-310:not(.iphone .widget_categories .cat-item-310)::before {
  top: 0.13em;
}

.widget_categories .cat-item-313::before {
  top: 0.53em;
  left: 0.4em;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/hotel-icon.svg");
  background-size: 21px;
}

.iphone .widget_categories .cat-item-313::before {
  top: 0.45em;
}

.mac .widget_categories .cat-item-313::before {
  top: 0.42em;
}

_::-webkit-full-page-media,
_:future,
:root .widget_categories .cat-item-313:not(.iphone .widget_categories .cat-item-313)::before {
  top: 0.33em;
}

.widget_categories .cat-item-322::before {
  top: 0.82em;
  left: 0.36em;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/tuk-tuk-icon.svg");
  background-size: 21px;
}

.iphone .widget_categories .cat-item-322::before {
  top: 0.73em;
}

.mac .widget_categories .cat-item-322::before {
  top: 0.7em;
}

_::-webkit-full-page-media,
_:future,
:root .widget_categories .cat-item-322:not(.iphone .widget_categories .cat-item-322)::before {
  top: 0.68em;
}

.widget_categories .cat-item-333::before {
  top: 0.45em;
  left: 0.28em;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/cooking-icon.svg");
  background-size: 23px;
}

.iphone .widget_categories .cat-item-333::before {
  top: 0.34em;
}

.mac .widget_categories .cat-item-333::before {
  top: 0.3em;
}

_::-webkit-full-page-media,
_:future,
:root .widget_categories .cat-item-333:not(.iphone .widget_categories .cat-item-333)::before {
  top: 0.22em;
}

.widget_categories .cat-item-342::before {
  top: 0.72em;
  left: 0.43em;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/ux-icon.svg");
  background-size: 20.5px;
}

.iphone .widget_categories .cat-item-342::before,
.mac .widget_categories .cat-item-342::before {
  top: 0.62em;
}

_::-webkit-full-page-media,
_:future,
:root .widget_categories .cat-item-342:not(.iphone .widget_categories .cat-item-342)::before {
  top: 0.58em;
}

.widget_categories .cat-item-352::before {
  top: 0.65em;
  left: 0.42em;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/rocket-icon.svg");
  background-size: 20.5px;
}

.iphone .widget_categories .cat-item-352::before {
  top: 0.55em;
}

.mac .widget_categories .cat-item-352::before {
  top: 0.52em;
}

_::-webkit-full-page-media,
_:future,
:root .widget_categories .cat-item-352:not(.iphone .widget_categories .cat-item-352)::before {
  top: 0.42em;
}

/* =========================================================
   75. Recommended Articles
========================================================= */
.recommended-articles-container {
  position: relative;
  margin: 12.5px 0 1em;
  pointer-events: none;
  will-change: transform;
}

.recommended-articles-container .fi-tr-lock,
.recommended-articles-container .fi-tr-lock-open {
  position: absolute;
  top: 41%;
  left: 50%;
  color: #fff;
}

.recommended-articles-container.animation .fi-tr-lock {
  opacity: 0;
  transition: 0s 10s;
}

.recommended-articles-container .fi-tr-lock-open {
  opacity: 0;
}

.recommended-articles-container.animation .fi-tr-lock-open {
  opacity: 1;
  transform: rotateY(360deg);
  animation: fade-out 0.8s 10.7s forwards;
  transition:
    opacity 0s 10s,
    transform 0.5s 10s;
}

.recommended-articles-container .illusion {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 3em 1em 3em 1em;
}

.recommended-articles-container .n4 {
  position: relative;
}

.recommended-articles-container:hover .illusion.n1 img {
  opacity: 0;
  transform: translateY(-26%) scale(1.5);
  transition: 0.75s 0.02s cubic-bezier(0.4, 0, 0.51, 1);
}

.recommended-articles-container .n1 img {
  transform: translateY(-27%) rotate(-60deg) scale(2.2);
  transition:
    transform 1.2s cubic-bezier(0.98, 0.08, 0.8, 0.98),
    opacity 1.2s cubic-bezier(0.98, 0.08, 0.8, 0.98);
}

.recommended-articles-container.animation .n1 img {
  transform: translate(0);
  animation: fade-in-out-img 10s 1.2s cubic-bezier(0.08, 0.5, 0.2, 1);
}

.recommended-articles-container .n2 img {
  transform: scale(1.25);
  transition:
    transform 5.3s 1.2s cubic-bezier(0.08, 0.5, 0.2, 1),
    opacity 3s 3.5s cubic-bezier(0.08, 0.5, 0.2, 1);
}

.recommended-articles-container.animation .n2 img {
  opacity: 0;
  transform: scale(1);
  animation: fade-in 0s 11.2s forwards;
}

.recommended-articles-container .n3 img {
  transform: scale(1.25);
  transition:
    transform 5.3s 3.5s cubic-bezier(0.08, 0.5, 0.2, 1),
    opacity 3s 5.8s cubic-bezier(0.08, 0.5, 0.2, 1);
}

.recommended-articles-container.animation .n3 img {
  opacity: 0;
  transform: scale(1);
}

.recommended-articles-container .n4 img {
  transform: scale(1.25);
  transition: transform 5.3s 5.8s cubic-bezier(0.08, 0.5, 0.2, 1);
}

.recommended-articles-container.animation .n4 img {
  transform: scale(1);
}

.recommended-articles-container.animation {
  animation: pointer-events-on 0s 11.2s forwards;
}

.sidebar .title-background,
.sidebar .articles-date,
.sidebar .article-title {
  pointer-events: none;
}

.sidebar .title-background {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 36.7%;
  border-radius: 0 0 3em 1em;
  background: linear-gradient(rgba(0, 0, 0, 0) 0, rgb(0 10 11 / 50%) 40%, rgb(0 10 11 / 50%) 100%);
}

.sidebar .article-title,
.sidebar .articles-date {
  position: absolute;
  color: #fff;
  opacity: 0.3;
  transition: opacity 0.5s 1.1s;
}

.mobile .sidebar .article-title,
.mobile .sidebar .articles-date {
  opacity: 1;
}

.sidebar .article-title {
  bottom: -1.15em;
  overflow: hidden;
  padding: 0 0.6em 0;
  font-size: 21.4px;
  line-height: 1.48;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sidebar .articles-date {
  bottom: 4em;
  font-size: 18px;
}

.iphone .sidebar .date {
  font-size: 16px;
}

.recommended-articles-container:hover .articles-date,
.recommended-articles-container:hover .article-title {
  opacity: 1;
  transition: 0.22s;
}

.sidebar .label {
  position: relative;
  top: -1.5px;
  margin-left: 0.5em;
  padding: 0.15em 0.43em 0.2em;
  border: 1px solid #ffffffd6;
  border-radius: 2.5px;
  font-size: 0.88em;
}

.iphone .sidebar .label,
.mac .sidebar .label {
  padding: 0.42em 0.43em 0.35em;
}

_::-webkit-full-page-media,
_:future,
:root .sidebar .label:not(.iphone .sidebar .label) {
  padding: 0.4em 0.43em 0.1em;
}

/* =========================================================
   76. Fade Helpers / iframe / Widget Containers
========================================================= */
.fade-up-jump.animation,
.animation .fade-up-jump {
  opacity: 0;
  animation: fade-up-jump 0.3s cubic-bezier(0.15, 0.16, 0.14, 1.73) forwards;
}

.fade-down.animation,
.animation .fade-down {
  animation: fade-down 0.35s cubic-bezier(0.25, 0.1, 0.1, 1) forwards;
}

.microcopy.animation {
  animation: fade-up 0.35s cubic-bezier(0.15, 0.16, 0.25, 1) forwards;
}

.microcopy.animation::before {
  animation: fade-up-l 0.66s cubic-bezier(0.15, 0.16, 0.2, 1) forwards;
}

.microcopy.animation::after {
  animation: fade-up-r 0.66s cubic-bezier(0.15, 0.16, 0.2, 1) forwards;
}

.list-centering-content {
  display: block;
  margin-left: -0.9em;
}

iframe {
  display: block;
  height: 38vh;
  min-height: 307px;
  max-width: 540px;
  margin: auto;
  border-radius: 15px;
}

.mascot {
  z-index: 1;
  background-repeat: no-repeat;
}

.mac .mascot {
  will-change: transform;
}

#categories-2 li.cat-item {
  position: relative;
}

.widget_categories ul:not(.widget_categories li ul ul a, .widget_categories li ul) {
  overflow: auto;
  max-height: 597px;
}

/* =========================================================
   77. Fantasy Style / Kodama
========================================================= */
.fantasy-style-third-son {
  position: absolute;
  top: 5.1%;
  left: 74.8%;
  z-index: 2;
  width: 14.5%;
  opacity: 0;
  animation:
    fade-in-out 26.2s 20s ease-in-out forwards,
    swaying-in-the-wind-mascot 33s 15.75s cubic-bezier(0.19, 0.02, 0.24, 0.92) forwards;
}

.fade-out {
  animation: fade-out 1s 42.7s ease-in-out forwards;
}

.fantasy-style-third-son .parts-of-face {
  animation:
    suspicious-rotation 4s 28.5s,
    falling-severed-head 6s 36.2s;
}

.fantasy-style-third-son .parts-of-body {
  position: absolute;
  left: -3%;
  width: 103%;
  margin-top: 32%;
}

.princess-mononoke-kodama {
  position: absolute;
  opacity: 0;
}

.princess-mononoke-kodama.n1 {
  top: 12%;
  left: 82.3%;
  width: 18.8%;
  animation:
    fade-in-out 28.5s 18s ease-in-out forwards,
    swaying-in-the-wind-mascot 33s 15.25s cubic-bezier(0.19, 0.02, 0.24, 0.92) forwards;
}

.princess-mononoke-kodama .parts-of-face {
  position: absolute;
}

.princess-mononoke-kodama .parts-of-face.n1,
.princess-mononoke-kodama .parts-of-face {
  width: 103%;
  margin-top: 33%;
  left: -3.3%;
  animation: giant-slalom 1s 23.5s;
}

.princess-mononoke-kodama .parts-of-body {
  position: absolute;
}

.princess-mononoke-kodama .parts-of-body.n1 {
  left: -10%;
  width: 115%;
  margin-top: 70.6%;
}

.princess-mononoke-kodama.n2 {
  top: 18.6%;
  left: 67.6%;
  width: 14.8%;
  animation:
    fade-in-out 28.5s 16.3s ease-in-out forwards,
    swaying-in-the-wind-mascot 33s 15s cubic-bezier(0.19, 0.02, 0.24, 0.92) forwards;
}

.princess-mononoke-kodama .parts-of-face.n2 {
  animation: giant-slalom 1s 24.5s;
}

.princess-mononoke-kodama .parts-of-body.n2 {
  left: -15%;
  width: 126%;
  margin-top: 62.5%;
}

.princess-mononoke-kodama.n3 {
  top: -3.8%;
  left: 60.3%;
  width: 14.8%;
  animation:
    fade-in-out 28.5s 18.8s ease-in-out forwards,
    swaying-in-the-wind-mascot 33s 15.5s cubic-bezier(0.19, 0.02, 0.24, 0.92) forwards;
}

.princess-mononoke-kodama .parts-of-face.n3 {
  animation: giant-slalom 1s 25.5s;
}

.princess-mononoke-kodama .parts-of-body.n3 {
  left: -15%;
  width: 122%;
  margin-top: 73%;
}

.parts-of-face {
  position: absolute;
}

/* =========================================================
   78. Font Awesome Motion / Footer Links
========================================================= */

.faa-spin.animated {
  animation: spin 1.5s linear infinite;
}

.faa-vertical.animation {
  animation: vertical 2s 5;
}

.faa-flash.animation {
  animation: flash 2s 5;
}

.faa-horizontal.animation {
  animation: horizontal 2s infinite;
}

.faa-shake.animation,
.faa-wrench.animation {
  animation: wrench 2s 5;
}

.faa-float.animation {
  animation: float 2s ease-in-out infinite;
}

.faa-ring.animation {
  animation: ring 2s infinite;
}

.faa-bounce.animation {
  animation: bounce 2s infinite;
}

.faa-tada.animation {
  animation: tada 2s linear infinite;
}

.fa-fw {
  width: 1.28571429em;
  text-align: center;
}

.footer-links ul li::after {
  margin-right: 4.5px;
  margin-left: 8.5px;
  content: "|";
}

.footer-links ul li:last-child::after {
  content: none;
}

.footer-links ul li {
  display: inline-block;
}

.copyright {
  margin: 67px 18px 0;
  font-size: 13px;
  letter-spacing: 0.55px;
  pointer-events: none;
}

.site-mascot-third-son-silhouette {
  position: absolute;
  top: 3.54em;
  left: 50%;
  width: 45px;
  height: 50px;
  transform: translateX(-50%);
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/site-mascot-third-son-silhouette.svg");
  background-repeat: no-repeat;
}

/* =========================================================
   79. Share / SNS
========================================================= */
.sns li a:hover {
  transform: translateY(-2px);
}

.sns .hatebu a::before {
  font-weight: bold;
  content: "B!";
}

.share.short .sns li {
  width: 19%;
  margin: 0 1% 0 0;
}

.share.short .sns li a {
  padding: 11px 4px;
}

.sharewrap {
  padding: 0.5px 7px 20px;
  border-radius: 0 0 9px 9px;
}

.sns ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  line-height: 1.62;
}

.sns li {
  position: relative;
  width: 31.8%;
  margin: 4px 2.3px;
}

.sns li a {
  display: block;
  padding: 17% 0 0.5em;
  border-radius: 9px;
  color: white;
  text-align: center;
  font-size: 85%;
  letter-spacing: 0.4px;
  transition: transform 0.25s ease-out;
}

.sns .twitter a::after {
  width: 35px;
  height: 50px;
  margin: -0.95em 0 0 1.35em;
  content: "";
  opacity: 0;
  transform: translateX(-2.1em);
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/logo-twitter.svg");
  background-repeat: no-repeat;
  background-size: 2.2em;
}

.sns span.text-anime {
  margin-left: -2.58em;
  opacity: 0;
  position: absolute;
  transform: translateX(-1em);
}

.sns a::before,
.sns a::after {
  position: absolute;
  will-change: transform;
}

.sns .hatebu a::before {
  margin-top: -0.53em;
  margin-left: -0.38em;
  font-size: 1.6em;
}

.pocket svg,
.facebook svg,
.twitter svg,
.line svg {
  position: absolute;
  width: 2.1em;
  margin-top: -0.5em;
  margin-left: -1em;
  fill: white;
}

.pocket svg {
  width: 2.17em;
  margin-top: -0.57em;
}

.line svg {
  width: 1.96em;
  margin-left: -0.96em;
}

.facebook svg {
  margin-top: -0.53em;
  margin-left: -0.95em;
}

.sns .fi-brands-instagram {
  position: absolute;
  margin-top: -0.42em;
  margin-left: -0.45em;
  font-size: 1.55em;
}

.sns .hatebu a:hover::before,
.sns .twitter a:hover svg,
.sns .facebook a:hover svg,
.sns .pocket a:hover svg,
.sns .instagram a:hover .fi-brands-instagram,
.sns .line a:hover svg {
  animation: jumping 0.2s ease-in;
}

.twitter.animation span,
.twitter.animation a::after {
  opacity: 1;
  transform: translate(0);
  transition:
    transform 1s 1.4s cubic-bezier(0.17, 0.65, 0.58, 1),
    opacity 0.8s 1.4s cubic-bezier(0.17, 0.65, 0.58, 1);
}

.sns .twitter.animation a {
  background: #343434;
  box-shadow: 0 4px 0 #202020;
  transition:
    background 0.4s 1s ease-in,
    box-shadow 0.4s 1s ease-in,
    transform 0.2s ease-out;
}

.sns .twitter a {
  height: 100%;
  background: #35a4f1;
  box-shadow: 0 4px 0 #2b6cab;
}

.sns .hatebu a {
  padding: 17% 0 2.22em;
  background: #00b0ee;
  box-shadow: 0 4px 0 #20688d;
}

.sns .line a {
  background: linear-gradient(144deg, #75f475, #4dcc4d 50% 60%, #54d254);
  box-shadow: 0 4px 0 #36792e;
}

.sns .instagram a {
  background:
    linear-gradient(217deg, #ff1972, #ffffff00 90%),
    linear-gradient(127deg, #6210ff, #ffffff00 90%),
    linear-gradient(336deg, #ffef00, #ffffff00 90%);
  box-shadow: 0 4px 0 #921270;
}

.sns .pocket a {
  padding: 17% 0 2.12em;
  background: #ff566c;
  box-shadow: 0 4px 0 #a12c39;
}

.sns .facebook a {
  padding: 17% 0 9px;
  background: linear-gradient(144deg, #64b9ec, #129ef6 50% 60%, #3989de);
  box-shadow: 0 4px 0 #3a5993;
}

.sns .hatebu a span::after,
.sns .pocket a::after {
  position: absolute;
  transform: translateX(-50%);
}

.sns .hatebu a span::after {
  content: "はてブ";
}

.sns .pocket a::after {
  content: "Pocket";
}

/* =========================================================
   80. Footer Inner / Mascot / Radar Chart
========================================================= */
.copyright,
#inner-footer nav {
  text-align: center;
}

#inner-footer nav {
  overflow: auto;
  padding: 22px 0.5em 0.5em;
  letter-spacing: 0.5px;
}

.mascot.second-son span {
  position: absolute;
  background-repeat: no-repeat;
}

.radar-chart-2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56%;
  height: 25vw;
  margin: 0 auto;
  padding: 10% 6%;
}

.radar-chart-2 svg {
  width: 100%;
  height: 120%;
}

.radar-chart-2 dl {
  position: absolute;
  width: 100%;
  height: 100%;
}

.radar-chart-2 dl > div {
  position: absolute;
  width: max-content;
  font-size: 0.6em;
  text-align: center;
}

.radar-chart-2 dl > div:nth-child(1) {
  top: -2%;
  left: 50%;
  transform: translateX(-50%);
}

.radar-chart-2 dl > div:nth-child(2) {
  top: 31%;
  right: -10%;
  transform: translateX(50%);
}

.radar-chart-2 dl > div:nth-child(3) {
  right: 7%;
  bottom: -2%;
  transform: translateX(50%);
}

.radar-chart-2 dl > div:nth-child(4) {
  bottom: -2%;
  left: 7%;
  transform: translateX(-50%);
}

.radar-chart-2 dl > div:nth-child(5) {
  top: 31%;
  left: -10%;
  transform: translateX(-50%);
}

.radar-chart-2 dd {
  margin: 0;
  font-size: 0.9em;
}

path.scale,
.r circle {
  transform: scale(0);
  transform-origin: center;
}

.animation path.scale {
  animation: expanding-graph 2.2s 1.4s cubic-bezier(0.15, 0.16, 0.19, 1.23) forwards;
}

.animation .r circle {
  animation: expanding-graph-sphere 1.5s cubic-bezier(0.15, 0.16, 0.19, 1.23) forwards;
}

.r circle {
  opacity: 0;
}

.animation .r circle:nth-child(1) {
  animation-delay: 2.3s;
}

.animation .r circle:nth-child(2) {
  animation-delay: 2.5s;
}

.animation .r circle:nth-child(3) {
  animation-delay: 2.7s;
}

.animation .r circle:nth-child(4) {
  animation-delay: 2.9s;
}

.animation .r circle:nth-child(5) {
  animation-delay: 3.1s;
}

/* =========================================================
   81. External Buttons
========================================================= */
.btn a {
  position: relative;
  display: block;
  width: 90%;
  max-width: 338px;
  height: 57px;
  margin: 0 auto;
  border-radius: 5px;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.3s 0.02s ease-in-out;
}

.btn.amazon a {
  background-color: #edbb81;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/amazon-rogo.svg");
  background-size: 120px;
  box-shadow: 0 4px 0 #0f1419;
}

.btn.rakuten a {
  background-color: #e4e4e4;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/rakuten-logo.svg");
  background-size: 98px;
  box-shadow: 0 4px 0 #0f1419;
}

.btn.agoda a {
  background-color: #fafafa;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/agoda-rogo.svg");
  background-size: 80px;
  box-shadow:
    0 4px 0 #424242,
    6px 6px 16px -12.5px #fff,
    -6px -6px 16px -12.5px #707070;
}

.btn a:hover {
  transform: translateY(2px);
  transition: 0.17s 0.02s ease-in-out;
}

.btn.amazon a:hover,
.btn.rakuten a:hover {
  box-shadow: 0 2px 0 #0f1419;
}

.btn.agoda a:hover {
  box-shadow:
    0 2px 0 #424242,
    4px 4px 16px -12.5px #fff,
    -4px -4px 16px -12.5px #707070;
}

.btn.amazon a::before {
  position: absolute;
  top: 0;
  left: 18px;
  width: 27px;
  height: 27px;
  content: "";
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/amazon-ribbon.svg");
  background-repeat: no-repeat;
}

/* =========================================================
   82. Misc UI / Review Star / Widget Arrow
========================================================= */
.fi-tr-face-confounded.animation {
  animation: jumping-10 8s -2.6s 2;
}

.fi-tr-face-confounded::before {
  background: #fff;
  border-radius: 50%;
}

.cool-layout {
  display: grid;
  place-items: center;
  border-radius: 10px;
}

.item-title,
.evaluation {
  font-weight: 500;
  line-height: 1.3;
}

.item-title {
  margin: 0;
  font-size: 1.3em;
}

.evaluation {
  margin-top: 1em;
  font-size: 1.1em;
}

/* --- エラーなし！丸角スター・アニメーション --- */
.card-review-star {
  position: relative;
  display: inline-block;
  width: 125px;
  height: 25px;
  background-color: #eeeeee;
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDMuMkwxNC4yIDkuNWg2LjhsLTUuNSA0IDIuMSA2LjYtNS42LTQuMi01LjYgNC4yIDIuMS02LjYtNS41LTRoNi44eiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9ImJsYWNrIi8+PC9zdmc+');
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDMuMkwxNC4yIDkuNWg2LjhsLTUuNSA0IDIuMSA2LjYtNS42LTQuMi01LjYgNC4yIDIuMS02LjYtNS41LTRoNi44eiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9ImJsYWNrIi8+PC9zdmc+');
  -webkit-mask-size: 25px 25px;
  mask-size: 25px 25px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

/* =========================================================
   修正後：星評価アニメーション（GPU完全オフロード版）
========================================================= */
.card-review-star::after {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rating);
  height: 100%;
  content: "";
  background-color: #ffcc00;
  transform-origin: left;
  will-change: transform;
  animation: slide-fill 1.5s ease-out forwards;
}

.carousel .third-son .front {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/third-son-of-the-site-mascot.svg");
}

.related_article .inbox {
  padding-left: 151.5px;
}

.widget_categories li a::after {
  top: 1.13em;
  right: 0.6em;
  font-size: 22px;
  transition: 0.18s ease-out;
}

.mobile .widget_categories li a::after {
  top: 1.05em;
}

.widget li a::after {
  color: #7fd1ff;
}

.widget_categories li a:hover::before,
.widget_categories li a:hover::after {
  transform: translateX(4px);
}

/* =========================================================
   83. Page Top
========================================================= */
#page-top {
  position: fixed;
  right: 2%;
  bottom: 6px;
  z-index: 99999;
  width: 112px;
  height: 112px;
  margin-bottom: 16px;
  border-radius: 77px;
  color: #136299;
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 6px 6px 16px -12.5px #fff, -6px -6px 16px -12.5px #707070;
  transform: translateY(150px);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  cursor: pointer;
}

#page-top a {
  color: #3b3838;
}

#page-top::before {
  position: absolute;
  top: 43.5px;
  left: 31.5px;
  width: 58px;
  height: 58px;
  content: "";
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/pegasus-2.svg");
  background-repeat: no-repeat;
  filter: drop-shadow(0 1.5px 0 #9ea2a5);
}

#page-top span {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  font-weight: 500;
}

.top,
.buhi-n {
  top: 8.5%;
}

.buhi-n {
  opacity: 0;
  letter-spacing: 0.1px;
}

.dot-3 {
  top: 18%;
  left: 0.4%;
  letter-spacing: 2px;
}

.top,
.buhi-n {
  transition: 0s 1.35s;
}

#page-top:hover {
  transform: translateY(-3px);
  transition-delay: 0s;
}

#page-top:hover .buhi-n,
#page-top:active .buhi-n {
  opacity: 1;
  transition-delay: 0s;
}

#page-top:hover .top,
#page-top:active .top {
  opacity: 0;
  transition-delay: 0s;
}

#page-top:hover::before {
  animation: jiggle 1.1s ease-in infinite;
}

.mobile #page-top:hover::before {
  animation-iteration-count: 2;
}

.pointer-events {
  animation: pointer-events 4s forwards;
}

.pointer-events-on {
  animation: pointer-events-on 0s 2.5s forwards;
}

.pointer-events-on-2 {
  animation: pointer-events-on 0s 11.1s forwards;
}

/* =========================================================
   84. Related / Inbox / Category / Search
========================================================= */

.related-none-h {
  margin-bottom: 0;
  padding-bottom: 0.75em;
}

.related-box .inbox {
  margin-top: 18px;
  padding: 0 7px;
  border-radius: 9px;
  background: #fafafa;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/icons.svg");
  background-size: 1070px;
  background-position: 4px -218px;
  background-repeat: no-repeat;
}

.inbox .recommend {
  display: inline-block;
  width: calc(36vw + 76px);
  max-width: 310px;
  margin: 1.5em 0 0 3%;
  aspect-ratio: 8.6 / 1;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/recommend.svg");
  background-repeat: no-repeat;
  filter: drop-shadow(3px 3px 0 #fff);
  will-change: transform;
}

ul.related-list.cf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 0 23px;
}

.related-box li .cat-name::before {
  position: absolute;
  left: 12%;
  width: 0.47em;
  height: 0.47em;
  content: "";
  border-radius: 50%;
  background: #fff;
}

.related-box li {
  z-index: 2;
  width: 47.9%;
  margin: 5px 2.3px;
  border-radius: 13px;
  border-bottom: solid #ededed 7px;
  background: white;
  transition: transform 0.7s ease-in;
}

.related-box li .eyecatch {
  margin-bottom: 3.1%;
  border-radius: 12px 12px 50% 50% / 12px 12px 11% 11%;
  box-shadow: 0 10px 18px -8px #c1c6c8;
  transition: transform 1.8s 0.73s cubic-bezier(0.42, 0, 0.1, 1.55);
}

.related-box li .cat-name {
  top: 4%;
  right: 4.6%;
  min-width: 3.64em;
  display: grid;
  align-items: center;
  padding: 0.3em 0.34em 0.3em 6.3%;
  border-radius: 100vh 26vh 26vh 100vh;
  box-shadow: 3.5px 3.5px 0 0 #fff;
  background: #bec4c8;
  color: #262728;
  font-size: clamp(12.2px, 2.5vw, 21.5px);
  font-weight: 400;
  letter-spacing: 0.5px;
  transition: transform 1.9s 1.23s cubic-bezier(0.42, 0, 0.1, 1.55);
}

.iphone .related-box li .cat-name,
.mac .related-box li .cat-name {
  padding-top: 0.36em;
  padding-bottom: 0.24em;
}

.related-box li:hover {
  transform: translateY(-3.17%);
  transition: 0.52s;
}

.related-box li:hover .eyecatch {
  transform: translateY(-6.8%);
  transition: 0.8s 0.15s;
}

.related-box li:hover .cat-name {
  transform: translateY(-52.5%);
  transition: 1s 0.2s;
}

.widget_categories li a {
  padding: 0.56em 3em 0.56em 2em;
  color: #042234;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  transition: 0.12s ease-out;
}

.widget_categories li a:not(.widget_categories li li a) {
  font-weight: 500;
}

.related_article .thum {
  width: 140px;
}

.related-box li .ttl {
  min-height: 5em;
  margin: 0;
  padding: 0 15px 8px;
  text-align: justify;
  font-size: clamp(23.5px, 3.03vw, 26.5px);
  font-weight: 500;
}

.related-box a {
  color: inherit;
}

/* =========================================================
   85. Microcopy / Accordion Flex / Related CTA
========================================================= */
.microcopy {
  position: relative;
  width: fit-content;
  margin: 1em auto 0.5em;
  padding: 0 1.5em;
  color: inherit;
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
  will-change: transform;
}

.sharewrap .microcopy {
  color: #9ea2a5;
  font-size: 1.3em;
  font-weight: 500;
  letter-spacing: 0;
}

.sharewrap .microcopy::before,
.sharewrap .microcopy::after {
  background: #9ea2a5;
}

.microcopy::before,
.microcopy::after {
  position: absolute;
  bottom: 15%;
  width: 0.122em;
  height: 63%;
  content: "";
  border-radius: 3px;
  background: #042234;
  transform: rotate(-22deg);
}

.microcopy.trigger,
.microcopy.trigger::before,
.microcopy.trigger::after {
  opacity: 0;
}

.microcopy::before {
  left: 0.6em;
}

.microcopy::after {
  right: 0.6em;
  transform: rotate(22deg);
}

.flex-group.icon .fi-tr-square-a::before {
  top: 0.2em;
  transform: rotate(-90deg);
  animation: home-position 0.5s 0.7s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.accordion-sub .flex-layout {
  display: flex;
  align-items: center;
  gap: 1.4em;
  margin: 1.2em 0 0;
}

.accordion-sub .flex-layout .icon {
  position: relative;
}

.accordion-sub .flex-layout .icon::after {
  position: absolute;
  top: 0;
  left: 1.7em;
  width: 2px;
  height: 100%;
  content: "";
  border-radius: 20px;
  background: #00000036;
}

#container .related_article a {
  width: 100%;
  padding: 0.95em 0.9em 0.59em 0.93em;
  border: none;
  border-bottom: 3px solid #f8acac;
  border-radius: 3.5px;
  color: #555555;
  background-image: linear-gradient(#f8acac 10%, #f1f0ab 100%);
  transition: 0.84s ease-out;
}

#container .related_article a:hover {
  transform: translateY(-3.5px);
  box-shadow: 0 2.3px 5px 3px rgb(0 0 0 / 10%);
  transition: 0.4s;
  transition-timing-function: cubic-bezier(0, -0.01, 0.43, 1);
}

.modal-box .swiper-slide,
.cool-tabs .swiper-slide {
  background: #fff;
}

h5 {
  position: relative;
  line-height: 1.26;
}

h5.demo {
  padding: 0 0 0 0.95em;
}

h5.demo::before {
  position: absolute;
  left: 0;
  width: 0.72em;
  height: 0.3em;
  margin-top: 0.14em;
  content: "";
  border-radius: 1.5px;
  background: linear-gradient(to right, #103750 70%, #67c5fe 0);
}

.mac h5.demo::before {
  margin-top: 0;
}

_::-webkit-full-page-media,
_:future,
:root h5.demo:not(.iphone h5.demo)::before {
  margin-top: -3px;
}

/* =========================================================
   86. Separator / Code / Text Blocks
========================================================= */
.wp-block-separator {
  margin: 1em 0 0.5em;
  border-top: 4px dotted;
}

.ac-sub-inside-1 .wp-block-separator,
.cool-tabs.merit-demerit .wp-block-separator {
  color: white;
}

.wp-block-separator.is-style-dots {
  border: none !important;
}

:root :where(.wp-block-separator.is-style-dots) {
  line-height: 1;
  text-align: center;
}

.wp-block-separator.is-style-dots::before {
  display: inline-block;
  margin-top: -0.5em;
  padding-left: 2em;
  color: #042234;
  font-family: serif;
  font-size: 1.6em;
  letter-spacing: 2em;
  content: "···";
}

.accordion-sub.type-3 .wp-block-separator {
  color: #fff;
}

.wp-block-code {
  overflow: auto;
  margin: 1.5em 0 1.5em;
}

.wp-block-code code {
  max-height: 250px;
  font-size: 0.9em;
  letter-spacing: 0.4px;
}

.wp-block-code code div {
  margin-bottom: -1em;
  color: #fff;
  font-weight: 600;
}

.accordion-main-demo .wp-block-separator::before {
  color: white;
}

/* =========================================================
   87. SVG Icon / Browser Animation / Text Utilities
========================================================= */
.table-container thead span::before {
  left: -0.1em;
  filter: drop-shadow(0 1px 2.5px #00000024);
}

.svg-icon {
  position: relative;
  display: inline-block;
  padding: 0 1.15em 0 0;
}

.svg-icon::before {
  position: absolute;
  top: -0.95em;
  width: 1.05em;
  height: 1.05em;
  content: "";
  background-repeat: no-repeat;
}

.trigger .svg-icon::before,
.trigger.svg-icon::before {
  transform: translateY(-3.5px) rotate(0);
}

.high-speed-rotation.animation::before {
  animation:
    super-high-speed-rotation 4.7s 0.6s cubic-bezier(0.41, 0, 0, 1) forwards,
    jumping 0.2s 5.5s ease-in;
}

.svg-icon.wordpress::before {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/wordpress-icon.svg");
}

.svg-icon.laugh::before {
  top: -0.9em;
  transform: rotate(33deg);
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/laugh-icon.svg");
}

.svg-icon.excel::before {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/excel.svg");
}

.svg-icon.google-map::before {
  top: -1.18em;
  left: 0.15em;
  height: 1.35em;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/google-maps.svg");
}

.svg-icon.google-chrome::before {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/google-chrome-icon.svg");
}

.svg-icon.safari::before {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/safari-icon.svg");
}

.svg-icon.windows-edge::before {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/windows-edge-icon.svg");
}

.svg-icon.firefox::before {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/firefox-icon.svg");
}

.svg-icon.gmail::before {
  top: -0.7em;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/gmail-icon.svg");
}

.table-container.animation .google-chrome::before {
  animation:
    super-high-speed-rotation 4.7s 0s cubic-bezier(0.41, 0, 0, 1) forwards,
    jumping 0.2s 4.9s ease-in;
}

.table-container.animation .windows-edge::before {
  animation:
    super-high-speed-rotation 4.7s 0.3s cubic-bezier(0.41, 0, 0, 1) forwards,
    jumping 0.2s 5.2s ease-in;
}

.table-container.animation .safari::before {
  animation:
    super-high-speed-rotation 4.7s 0.6s cubic-bezier(0.41, 0, 0, 1) forwards,
    jumping 0.2s 5.5s ease-in;
}

.table-container.animation .firefox::before {
  animation:
    super-high-speed-rotation 4.7s 0.9s cubic-bezier(0.41, 0, 0, 1) forwards,
    jumping 0.2s 5.8s ease-in;
}

.grecaptcha-badge {
  visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.c-red {
  color: #ff4b60;
}

.item-name span {
  display: inline-block;
}

.ul-1 {
  text-decoration: underline solid;
  -webkit-text-decoration: underline solid;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}

.ul-2 {
  text-decoration: underline solid #ff7272;
  -webkit-text-decoration: underline solid #ff7272;
  text-underline-offset: 4.5px;
  text-decoration-thickness: 2px;
}

.ul-3 {
  text-decoration: underline wavy #ff4b60;
  -webkit-text-decoration: underline wavy #ff4b60;
  text-underline-offset: 2.5px;
  text-decoration-thickness: 1.5px;
}

.mac .ul-1,
.mac .ul-2,
.mac .ul-3 {
  text-decoration-thickness: 2px;
}

/* =========================================================
   88. Figures / Links / Gradient Marker / Ruby
========================================================= */
.flex-group .swiper-pagination-fraction {
  font-size: 0.84em;
}

.swiper-slide figcaption {
  position: absolute;
  bottom: 0.65em;
  width: 100%;
}

.image-elements figcaption {
  position: absolute;
  bottom: 0.4em;
  width: 100%;
}

.modal-box figcaption {
  position: absolute;
  bottom: 0.65em;
  font-weight: 400;
}

.swiper.gallery figcaption {
  position: relative;
  margin: -1.3em 0 1em;
}

.swiper.gallery .is-style-wide {
  margin: 1.5em 1em 0;
  color: #ccc;
}

.gradient-marker {
  display: inline;
  margin: 0;
  padding-bottom: 2px;
  background-repeat: no-repeat;
  background-position: right -200% bottom;
  background-size: 150% 3.5px;
}

.iphone .gradient-marker {
  padding-bottom: 4px;
}

.mac .gradient-marker {
  padding-bottom: 5.5px;
}

.gradient-marker.animation {
  animation: marker 2.3s cubic-bezier(0.61, 0.07, 0.58, 1) forwards;
}

.gradient-marker.color-1 {
  background-image: linear-gradient(to right, #ffb88f 0%, #ffb88f 80%, transparent);
}

.gradient-marker.color-2 {
  background-image: linear-gradient(
    45deg,
    #ee7373,
    #f2ab71,
    #f0ee6f,
    #96f073,
    #75f0dc,
    #7085ed,
    #ae71f0,
    #ed71d3,
    #f07474,
    transparent
  );
}

/* =========================================================
   89. Modal Text / Gallery Text
========================================================= */
.modal-box.gallery .modal-text,
.gallery-text {
  position: relative;
  display: grid;
  align-items: center;
  height: 9em;
  margin: 1em;
  padding: 1em;
  border-radius: 9px;
  background: #c9eaff;
}

blockquote .gallery-text {
  margin: 0.6em 0.85em 0.7em;
  padding: 0.75em 1em;
  background: #ededed;
}

.gallery-text {
  overflow: auto;
  background: white;
}

.modal-box.text-only {
  padding: 1.3em;
}

.text-only .modal-text {
  display: grid;
  align-items: center;
  max-height: 50vh;
  min-height: 6.5em;
  margin: 0;
  padding: 1em;
  border-radius: 10px;
  background: white;
  box-shadow: 0 -6px 16px -11px #00000030;
}

.modal-box .swiper .wp-block-separator {
  width: 95%;
  margin: 0.5em auto 0;
}

/* =========================================================
   90. Stepbar
========================================================= */
.stepbar .stepbarwrap {
  position: relative;
}

.steplabel {
  display: inline-flex;
  align-items: center;
  margin-top: -0.5em;
}

.stepcircle {
  z-index: 2;
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  content: "";
  border-radius: 50%;
  background: #7fd1ff;
}

.stepbar .line-start,
.stepbar .line-end {
  position: absolute;
  left: 0.5em;
  z-index: 1;
  width: 3px;
  height: 1em;
  background: #7fd1ff;
}

.stepbar .line-start {
  top: 2em;
}

.stepbar .line-end {
  top: 0.4em;
}

.steplabel .stepnumber {
  position: relative;
  min-width: 4.5em;
  margin-left: 1.3em;
  padding: 0.32em 0.7em 0.35em;
  border-radius: 5.5px;
  background: #7fd1ff;
  color: #fff;
  font-size: 0.8em;
  font-weight: 500;
  text-align: center;
}

.iphone .steplabel .stepnumber,
.mac .steplabel .stepnumber {
  padding-top: 0.42em;
  padding-bottom: 0.25em;
}

_::-webkit-full-page-media,
_:future,
:root .steplabel .stepnumber:not(.iphone .steplabel .stepnumber) {
  padding-top: 0.52em;
  padding-bottom: 0.15em;
}

.steplabel .stepnumber::before {
  position: absolute;
  top: 98%;
  left: calc(48% - 6px);
  content: "";
  border: 7.5px solid transparent;
  border-top: 7.5px solid #73b9e2;
}

.stepinside {
  margin-right: 0.45em;
  margin-left: 2em;
}

.stepinside .title:not(.box .title) {
  margin: 0 0 1em;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1.43;
}

.explanation-layout-comment {
  padding: 0 2.3em;
}

.stepinside iframe {
  margin: 1.5em auto;
}

.stepline {
  position: absolute;
  top: 2.7em;
  left: 0.5em;
  width: 3px;
  border-radius: 12px;
  background: #ededed;
}

.animation .stepline {
  animation: stepline 3s cubic-bezier(0.85, 0, 0.58, 1) forwards;
}

.stepbarwrap .partition-line {
  display: block;
  border-bottom: dotted 2px #ededed;
}

.steplabel .add {
  color: white;
  box-shadow: none;
}

.stepbar .stepinside.poppy-layout {
  margin-bottom: 2.1em;
  padding: 1.16em 1em 1.05em;
  border-radius: 9px;
}

.explanation-layout .stepinside {
  position: relative;
  z-index: 0;
  margin-bottom: 1.5em;
  padding: 1.5em;
  border-radius: 9px;
  background: #e6e5e5;
}

.explanation-layout.end .stepinside {
  margin-top: -1em;
  padding-bottom: 0;
  background: none;
}

.explanation-layout figcaption {
  margin: 4.5px 0 -1.15em;
}

.stepinside figcaption:not(.explanation-layout figcaption) {
  margin: 8px 0 -0.5em;
}

.stepbarwrap.blue .stepcircle,
.stepbarwrap.blue .line-start,
.stepbarwrap.blue .stepline,
.stepbarwrap.blue .line-end {
  background: #7fd1ff;
}

.stepbarwrap.blue .stepinside {
  background: #b0e1ff;
}

.stepbarwrap.yellow .stepnumber,
.stepbarwrap.yellow .stepcircle,
.stepbarwrap.yellow .line-start,
.stepbarwrap.yellow .stepline,
.stepbarwrap.yellow .line-end {
  background: #fced8a;
}

.stepbarwrap.yellow .stepnumber::before {
  border-top: 7.5px solid #e9db7f;
}

.stepbarwrap.yellow .stepinside {
  background: #fff4b3;
}

.stepbarwrap.green .stepnumber,
.stepbarwrap.green .stepcircle,
.stepbarwrap.green .line-start,
.stepbarwrap.green .stepline,
.stepbarwrap.green .line-end {
  background: #81d6cb;
}

.stepbarwrap.green .stepnumber::before {
  border-top: 7.5px solid #74ccc0;
}

.stepbarwrap.green .stepinside {
  background: #abe9e1;
}

.stepbarwrap.red .stepnumber,
.stepbarwrap.red .stepcircle,
.stepbarwrap.red .line-start,
.stepbarwrap.red .stepline,
.stepbarwrap.red .line-end {
  background: #ffa2ae;
}

.stepbarwrap.red .stepnumber::before {
  border-top: 7.5px solid #ee8793;
}

.stepbarwrap.red .stepinside {
  background: #ffbec7;
}

.stepbarwrap.purple .stepnumber,
.stepbarwrap.purple .stepcircle,
.stepbarwrap.purple .line-start,
.stepbarwrap.purple .stepline,
.stepbarwrap.purple .line-end {
  background: #9ab8ff;
}

.stepbarwrap.purple .stepnumber::before {
  border-top: 7.5px solid #8693de;
}

.stepbarwrap.purple .stepinside {
  background: #d2d8f9;
}

.stepbarwrap.gray .stepnumber,
.stepbarwrap.gray .stepcircle,
.stepbarwrap.gray .line-start,
.stepbarwrap.gray .line-end {
  background: #524c4c;
}

.stepbarwrap.gray .stepnumber::before {
  border-top: 7.5px solid #3b3838;
}

.stepbarwrap.gray .poppy-layout {
  background: #e6e5e5;
}

/* =========================================================
   91. Image / Auto Layout / Supplement
========================================================= */
.img-m {
  max-width: 540px;
  margin: 1.5em auto;
}

.img-m img {
  border-radius: 10px;
}

.layout-automatic-change {
  display: flex;
  gap: 1.5em;
}

.add-place-items {
  display: grid;
  place-items: center;
}

.layout-automatic-change img:not(.swiper img) {
  border-radius: 13px;
  aspect-ratio: 1.618 / 1;
}

.layout-automatic-change.svg-shadow img {
  box-shadow: 0 -6px 16px -12.5px #707070;
}

.explanation-layout .layout-automatic-change {
  margin: 0;
  gap: 1.5em;
}

.explanation-layout .parallel-layout-scroll .layout-automatic-change {
  min-width: 100%;
  margin: 0 auto 1.5em;
  flex-wrap: wrap;
}

.supplementary-title-layout {
  display: flex;
  gap: 1.5em;
}

.add-inline-block {
  display: inline-block !important;
}

.supplementary-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: -0.5em;
  padding: 0.6em 0.8em;
  border-radius: 5.5px;
  background: #524c4c;
  color: #fff;
  font-size: 0.9em;
  font-weight: 400;
}

.iphone .supplementary-title {
  padding: 0.66em 0.8em 0.54em;
}

.supplementary-title p {
  margin: 0;
}

.explanation-layout .stepbar-title {
  margin: -0.4em 0 0.8em;
  font-size: 1.15em;
  font-weight: 500;
  line-height: 1.26;
}

.speech-bubble.slide-in.animation,
.animation .item-name span {
  animation: slide-in-r 0.4s cubic-bezier(0.19, 1.46, 0.58, 1) forwards;
}

.item-name.n1 span {
  animation-delay: 0.5s;
}

.item-name.n2 span {
  animation-delay: 0.9s;
}

.item-name.n3 span {
  animation-delay: 1.3s;
}

.item-name.n4 span {
  animation-delay: 1.7s;
}

.item-name.n5 span {
  animation-delay: 2.1s;
}


/* =========================================================
   92. Accordion Close Button
========================================================= */
.ac-close-button {
  position: relative;
  display: block;
  margin: 0.5em auto 2.5em;
  padding: 11.3px 11.5px 9.5px 26px;
  border-radius: 18px 7.5px 18px 7.5px;
  background: #4999cc;
  box-shadow: 0 3px 0 #325f79;
  color: white;
  font-size: 13px;
  font-weight: 500;
  transition: 0.2s;
  user-select: none;
  -webkit-user-select: none;
}

.iphone .ac-close-button {
  padding: 10.7px 2px 7.9px 19.5px;
}

.mac .ac-close-button {
  padding: 10px 0 6.6px 16.5px;
}

_::-webkit-full-page-media,
_:future,
:root .ac-close-button:not(.iphone .ac-close-button) {
  padding: 11.3px 0 5.3px 18px;
}

.ac-close-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #325f79;
  will-change: box-shadow;
}

.ac-close-button.demo {
  box-shadow: 0 3px 0 #000000;
}

.ac-close-button.demo:active {
  box-shadow: 0 1px 0 #000000;
}

.ac-close-button:hover .fi-tr-address-card:before {
  transform: translateY(-3px) rotate(-90deg);
  transition: 0.2s 0.01s ease-out;
  will-change: transform;
}

.ac-close-button .fi-tr-address-card:before {
  position: absolute;
  top: 1.5em;
  left: 1em;
  font-size: 0.85em;
  transform: translate(0) rotate(-90deg);
  transition: 0.2s 0.8s cubic-bezier(0.6, -0.28, 0.74, 0.05);
}

.footer a:hover {
  color: white;
}

/* =========================================================
   93. Footer Carousel / Mascot Introduction
========================================================= */
.introduction-of-site-mascot {
  width: 187px;
  height: 250px;
  margin: 165px auto 278px;
  perspective: 970px;
}

#footer-top .fi-tr-caret-down {
  top: 5.4%;
  font-size: 30px;
  transition-delay: 0.3s;
}

.animation .carousel-title,
.animation #footer-top .fi-tr-caret-down {
  transform: translate(-50%, 0);
  opacity: 1;
}

.carousel {
  transform-style: preserve-3d;
  transition: transform 0.88s cubic-bezier(0.9, 0, 0.43, 1);
}

.carousel .item {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 285px;
  border-radius: 10px;
  background: linear-gradient(#fcfcfc, #fafafa);
  will-change: transform;
}

/* --- カルーセル操作ボタン全体の設定 --- */
.operation-buttons {
  position: relative;
  top: 467.5px;
  display: flex;
  justify-content: center;
  gap: 10px;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

/* --- ボタン本体の設定（divから修正） --- */
.operation-buttons button {
  padding: 0;
  border-radius: 6px;
  background: #6ac6ff;
  box-shadow: 0 3.5px 0 #3f687f;
  font-size: 13.4px;
  transition: 0.2s 0.03s ease-in-out;
}

.operation-buttons button:hover {
  color: white;
}

.operation-buttons button:active {
  transform: translateY(1.5px);
  box-shadow: 0 2px 0 #3f687f;
  transition: 0.15s ease-out;
}

.operation-buttons span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 77px;
  height: 38px;
  padding-top: 1.5px;
  font-weight: 400;
}

.operation-buttons .prev span {
  padding-left: 9px;
}

.operation-buttons .next span {
  padding-right: 9px;
}

.operation-buttons .prev:after {
  margin-left: -30px;
  content: "\e375";
}

.operation-buttons .next:before {
  margin-left: 17px;
  content: "\e377";
}

.operation-buttons .next:before,
.operation-buttons .prev:after {
  position: absolute;
  top: 13.5px;
  font-family: "uicons-thin-rounded";
}

_::-webkit-full-page-media,
_:future,
:root .carousel .item:not(.iphone .carousel .item) {
  height: 276.5px;
}

.item.a {
  transform: rotateY(0) translateZ(330px);
}

.item.b {
  transform: rotateY(45deg) translateZ(330px);
}

.item.c {
  transform: rotateY(90deg) translateZ(330px);
}

.switching {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.item.d {
  transform: rotateY(135deg) translateZ(330px);
  overflow: hidden;
}

.item.e {
  transform: rotateY(180deg) translateZ(330px);
}

.item.f {
  transform: rotateY(225deg) translateZ(330px);
}

.item.g {
  transform: rotateY(270deg) translateZ(330px);
}

.item.h {
  transform: rotateY(315deg) translateZ(330px);
}

.carousel .background {
  position: absolute;
  top: 5.5px;
  width: 92%;
  height: 179px;
  border-radius: 34% 70% 70% 30% / 35% 39% 64% 67%;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/check-pattern.svg");
  background-position: 186px 7px;
  box-shadow: 0 -6px 16px -8px #fff, 0 6px 16px -14px #000;
}

.carousel .repletion {
  position: absolute;
  bottom: -21px;
  font-size: 10px;
  opacity: 0.72;
}

_::-webkit-full-page-media,
_:future,
:root .carousel .repletion:not(.iphone .carousel .repletion) {
  bottom: -26px;
}

.carousel .commentary {
  position: absolute;
  top: 2px;
  width: 96%;
  text-align: center;
  line-height: 1.63;
  font-weight: 500;
  text-shadow: 0 0 0 #042234;
}

.mac .carousel .commentary {
  top: 5px;
  line-height: 1.02;
}

.iphone .carousel .commentary {
  top: 4.5px;
  line-height: 1.31;
}

_::-webkit-full-page-media,
_:future,
:root .carousel .commentary:not(.iphone .carousel .commentary) {
  line-height: 1.1;
}

_::-webkit-full-page-media,
_:future,
:root .carousel .notepad span:not(.adj-margin, .iphone .carousel .notepad span) {
  padding-bottom: 0;
  border-bottom: 0.5px dashed #ededed;
}

.mac .carousel .notepad span:not(.adj-margin) {
  padding-bottom: 2.5px;
}

.carousel .notepad span:not(.adj-margin) {
  padding-bottom: 1px;
  border-bottom: 1px dashed #ededed;
}

.fi-tr-galaxy-star.r {
  margin-left: 13.5px;
}

.fi-tr-galaxy-star.l {
  margin-right: 12px;
}

.d .fi-tr-galaxy-star.r {
  margin-left: 19.5px;
}

.d .fi-tr-galaxy-star.l {
  margin-right: 19.5px;
}

.e .fi-tr-galaxy-star.r {
  margin-left: 8px;
}

.e .fi-tr-galaxy-star.l {
  margin-right: 8px;
}

.carousel .notepad {
  position: absolute;
  bottom: 5px;
  width: 177px;
  height: 154px;
  padding: 23px 4.5px 0;
  border-radius: 5.5px;
  background: inherit;
  box-shadow:
    rgb(224 224 224 / 20%) 0 0 0 3px,
    0 6px 16px -8px #ffffffa3,
    0 -6px 16px -8px #00000052;
  text-align: justify;
  font-size: 12.3px;
  line-height: 1.73;
  letter-spacing: 0.65px;
}

_::-webkit-full-page-media,
_:future,
:root .carousel .notepad:not(.iphone .carousel .notepad) {
  height: 146px;
}

.item.a span.spacer {
  margin-left: 85px;
}

.item.b span.spacer {
  margin-left: 78px;
}

.iphone .item.b span.spacer,
.mac .item.b span.spacer {
  margin-left: 100px;
}

.item.c span.spacer {
  margin-left: 136px;
}

.iphone .item.c span.spacer,
.mac .item.c span.spacer {
  margin-left: 125px;
}

.item.e span.spacer {
  margin-left: 135px;
}

.item.h span.spacer {
  margin-left: 74px;
}

.item.d span.spacer {
  margin-left: 97px;
}

.iphone .item.d span.spacer,
.mac .item.d span.spacer {
  margin-left: 98px;
}

.item.f span.spacer {
  margin-left: 98px;
}

.item.g span.spacer {
  margin-left: 74px;
}

.carousel .third-son .front,
.carousel .third-son .rear {
  top: 34px;
  width: 80px;
  height: 83px;
  background-repeat: no-repeat;
}

.carousel .third-son,
.carousel .second-son {
  position: relative;
  display: flex;
  justify-content: center;
}

.carousel .third-son .rear {
  transform: rotateY(180deg);
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/mascot-third-son-back-view-2.svg");
}

.carousel .runny-nose {
  position: absolute;
  top: 43px;
  left: 27px;
  width: 12px;
  height: 24px;
  opacity: 0;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/snot.svg");
  background-repeat: no-repeat;
  transform-origin: center top;
}

.carousel .shake-the-tail {
  position: absolute;
  top: 67.8px;
  left: 33px;
  width: 8.5px;
  height: 6.5px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/third-son-tail.svg");
  background-repeat: no-repeat;
}

.carousel .shadow-of-feet {
  position: absolute;
  bottom: 158px;
  width: 29%;
  height: 19px;
  background: radial-gradient(60% 22% at center center, rgb(110 110 110), rgba(0, 0, 0, 0));
}

_::-webkit-full-page-media,
_:future,
:root .carousel .shadow-of-feet:not(.iphone .carousel .shadow-of-feet) {
  bottom: 150px;
}

.carousel .second-son .hand.right,
.carousel .second-son .hand.left {
  top: 81px;
  width: 19.5px;
  height: 12px;
}

.second-son .hand.left.pen-light {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/pen-light-2.svg");
}

.second-son .hand.right.pen-light {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/pen-light.svg");
}

.second-son .hand.right {
  left: -31.6px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/second-son-right-hand-3.svg");
  transform-origin: center right;
}

.hand.right.pen-light:after,
.hand.left.pen-light:after {
  position: absolute;
  top: -12.5px;
  width: 3px;
  height: 26px;
  content: "";
  border-radius: 10px;
  background: #97fff5;
  box-shadow: 0 -5px 7px 0.5px #d9fffb;
}

.hand.right.pen-light:after {
  left: -1px;
  transform: translate(0) rotate(-20deg);
}

.hand.left.pen-light:after {
  right: 0;
  transform: translate(0) rotate(20deg);
}

.second-son .hand.left {
  right: -31.6px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/second-son-left-hand-2.svg");
  transform-origin: center left;
}

.second-son .torso {
  top: 75px;
  width: 36px;
  height: 50px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/body-2.svg");
}

.carousel .second-son .face {
  top: 32.3px;
  width: 89px;
  height: 72px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/face.svg");
}

.second-son .face.embarrassed {
  opacity: 0;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/embarrassed-face.svg");
}

.butterfly {
  position: absolute;
  width: 0;
  height: 20px;
  content: "";
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/butterfly.svg");
  background-repeat: no-repeat;
  offset-path: path("m151.12,31.4c-16.63,0-19.34-13.08-36.09-14.9-15.06-1.64-22.97,4.62-42.79,1.4-15.15-2.46-18.51-13.46-30.37-16.43C26.1-2.47,17.35,7.14.11,3.32");
  transform: rotate(150deg) rotateY(0);
}

.butterfly.n1 {
  left: 19px;
  bottom: 250px;
  z-index: 8;
  width: 18px;
  animation-delay: 11.5s !important;
}

.butterfly.n2 {
  left: 19px;
  bottom: 226px;
  z-index: 8;
  width: 14px;
  animation-delay: 12.5s !important;
}

.carousel .eldest-son {
  width: 100px;
  height: 100px;
  margin-top: 24px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/eldest-son-of-mascot-2.svg");
  transform-origin: bottom;
}

.carousel .pon-chan-the-raccoon-dog {
  width: 74px;
  height: 90px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/pon-chan-the-raccoon-dog.svg");
  background-repeat: no-repeat;
}

.pon-chan-leaf-pants {
  position: absolute;
  right: -2%;
  bottom: 55.7%;
  z-index: 1;
  width: 22px;
  height: 22px;
  opacity: 0;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/leaf.svg");
  background-repeat: no-repeat;
  background-size: 100%;
}

.leaf-on-head {
  position: absolute;
  top: 0;
  left: 53.5%;
  z-index: -1;
  width: 26px;
  height: 18px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/leaf-on-head.svg");
  background-repeat: no-repeat;
}

.pon-chan-container {
  display: flex;
  transform: translate(0) scale(0.3);
  opacity: 0;
}

.animation-2 .item.d .anime-container {
  z-index: 1;
  animation: fall 21s ease-in-out forwards, fall 21s 38s ease-in-out forwards;
}

.animation-2 .pon-chan-container {
  animation: stalking 38s ease-in-out, stalking 38s 38s ease-in-out;
}

.animation-2 .leaf-on-head {
  animation: estrus-period 38s, estrus-period 38s 38s;
}

.animation-2 .pon-chan-leaf-pants {
  animation: leaves-that-have-fallen-off 11.3s 31.2s, leaves-that-have-fallen-off 11.3s 69.2s;
}

.carousel .third-daughter {
  width: 80px;
  height: 93px;
  margin-top: 31px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/site-mascot-third-daughter.svg");
}

.carousel .second-daughter {
  width: 90px;
  height: 112px;
  margin-top: 14px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/second-daughter-of-the-site-mascot.svg");
}

.carousel .eldest-daughter {
  position: absolute;
  width: 100px;
  height: 100px;
  margin-top: 24.3px;
  opacity: 0;
  transform-origin: bottom;
}

.mascot.eldest-daughter.n6 {
  opacity: 1;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/eldest-daughter-of-mascot.svg");
}

.mascot.eldest-daughter.n5 {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/eldest-daughter-of-mascot-6.svg");
}

.mascot.eldest-daughter.n4 {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/eldest-daughter-of-mascot-5.svg");
}

.mascot.eldest-daughter.n3 {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/eldest-daughter-of-mascot-4.svg");
}

.mascot.eldest-daughter.n2 {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/eldest-daughter-of-mascot-3.svg");
}

.mascot.eldest-daughter.n1 {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/eldest-daughter-of-mascot-2.svg");
}

.carousel .ugly-pegasus {
  width: 60px;
  height: 66px;
  margin-top: 58px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/ugly-pegasus.svg");
}


/* =========================================================
   94. Hidden / Tabs / Merit Demerit / Color Palette
========================================================= */
li.cat-item.cat-item-48.parent-category a:after {
  margin-left: 3.3em;
}

.mac .widgettitle {
  padding: calc(0.5vw + 22px) calc(0.5vw + 21px) calc(0.5vw + 20px);
  background-position: 84.3% 100%;
  font-weight: 600;
}

.iphone .widgettitle {
  background-position: 84.1% 100%;
}

.cool-tabs .nav-link:not(.color-palette .nav-link) {
  width: 100%;
  min-height: 58px;
  height: 100%;
  padding: 0.6em 1em;
  border-right: 0.5px solid #a9babd80;
  border-bottom: 0.5px solid #a9babd80;
  font-size: 0.9em;
  transition: 0.15s ease-in-out;
}

.iphone .cool-tabs .nav-link:not(.color-palette .nav-link) {
  padding: 0.67em 1em 0.53em;
}

.cool-tabs .nav-link {
  background: #425a69;
  color: #fff;
}

.merit-demerit .inner {
  min-height: 12.5em;
  padding: 1em;
  border-radius: 5.5px;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 9em !important;
}

.merit-demerit .merit.inner {
  background: #e1f3ff;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/circle-mark.svg");
}

.merit-demerit .demerit.inner {
  background: #ffe1e4;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/cross-mark.svg");
}

.color-palette.ver2 {
  display: grid;
  margin-top: -1.5em;
}

.cool-tabs .nav-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border-radius: 7.5px;
  line-height: 1.42;
}

.cool-tabs.rich .nav-tabs {
  border-radius: 6px 6px 0 0;
}

.cool-tabs .nav-item {
  flex: 1;
  min-width: fit-content;
}

.demerit .nav-link {
  background: #ffa2ae;
  color: white;
}

.demerit .nav-link:hover,
.demerit .nav-link.active {
  background: #ffa2ae;
}

.merit .nav-link {
  background: #7fd1ff;
  color: white;
}

.nav-link:hover,
.nav-link.active {
  color: inherit;
  background: #7fd1ff;
}

.comparison-title {
  margin: 0 0 0.5em;
  font-size: 1.35em;
  font-weight: 500;
  line-height: 1.3;
}

.comparison-title span {
  position: relative;
  top: 0.08em;
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.2em;
  border-radius: 50%;
}

.comparison-title.merit-demerit span {
  background: linear-gradient(to right, #7fd1ff 50%, #ffa2ae 50%);
}

.comparison-title span {
  background: linear-gradient(to right, #7fd1ff 50%, #425a69 50%);
}

.cool-tabs .slider {
  position: absolute;
  bottom: 0;
  z-index: 1;
  height: 3.5px;
  border-radius: 5.5px;
  background: #20acff;
  transition: 0.3s ease-in-out;
}

.cool-tabs .swiper {
  opacity: 0;
}

.cool-tabs.rich .tab-panels {
  position: relative;
  min-height: 16.5em;
  padding: 1em;
  border-radius: 0 0 6px 6px;
  background: #c9eaff;
}

.table-corporate-style .color-palette {
  display: inline-grid;
  place-items: center;
}

.color-palette .nav-tabs {
  gap: 15px;
}

.color-palette.ver1 .nav-tabs {
  padding: 11px 15px;
  background: #1d2124;
}

.table-corporate-style .nav-tabs {
  margin-top: 30px;
}

.table-corporate-style .nav-tabs.animation .nav-link.n1 {
  animation: zoom-in-down 2s 0.3s forwards;
}

.table-corporate-style .nav-tabs.animation .nav-link.n2 {
  animation: zoom-in-down 2s 0.6s forwards;
}

.table-corporate-style .nav-tabs.animation .nav-link.n3 {
  animation: zoom-in-down 2s 0.9s forwards;
}

.cool-tabs.ver2 .nav-link {
  width: 31px;
  height: 31px;
}

.cool-tabs.ver2 .nav-tabs {
  height: 35px;
  margin: -1em auto 0;
}

.cool-tabs.ver2 .nav-link.n1 {
  background: linear-gradient(to bottom, #81d6cb 54%, #effcfb 54%);
  border-bottom: solid 2px #81d6cb;
}

.cool-tabs.ver2 .nav-link.n2 {
  background: linear-gradient(to bottom, #ffb88f 54%, #fffaf6 54%);
  border-bottom: solid 2px #ffb88f;
}

.cool-tabs.ver2 .nav-link.n3 {
  background: linear-gradient(to bottom, #ffa2ae 54%, #fff7f8 54%);
  border-bottom: solid 2px #ffa2ae;
}

.zoom-in-down {
  transform: scale(0);
}

.cool-tabs.ver2.animation .nav-tabs {
  animation: zoom-in-down 1.5s forwards;
}

.cool-tabs.ver2.animation .nav-link.n1 {
  animation: zoom-in-down 2s 0.3s forwards;
}

.cool-tabs.ver2.animation .nav-link.n2 {
  animation: zoom-in-down 2s 0.6s forwards;
}

.cool-tabs.ver2.animation .nav-link.n3 {
  animation: zoom-in-down 2s 0.9s forwards;
}

.color-palette .nav-link {
  display: block;
  border-radius: 24px;
  opacity: 0.4;
  transform: scale(0);
  transition: opacity 0.3s ease-in-out, transform 0.1s linear;
  will-change: transform;
}

.color-palette.ver1 .nav-link {
  width: 24px;
  height: 24px;
}

.group.n1 .color-palette .nav-link.n1,
.group.n2 .color-palette .nav-link.n1 {
  background: #f2dc91;
}

.group.n1 .color-palette .nav-link.n2,
.group.n2 .color-palette .nav-link.n2 {
  background: #ed8b90;
}

.group.n1 .color-palette .nav-link.n3,
.group.n2 .color-palette .nav-link.n3 {
  background: #93c4f3;
}

.group.n3 .color-palette .nav-link.n1 {
  background: linear-gradient(225deg, #8267bb 0%, #d9d9d9 100%);
}

.group.n3 .color-palette .nav-link.n2 {
  background: linear-gradient(225deg, #bdb261 0%, #d9d9d9 100%);
}

.group.n3 .color-palette .nav-link.n3 {
  background: #535352;
}

.group.n4 .color-palette .nav-link.n1,
.group.n5 .color-palette .nav-link.n1 {
  background: #ed8bb1;
}

.group.n4 .color-palette .nav-link.n2,
.group.n5 .color-palette .nav-link.n2 {
  background: #988bf1;
}

.group.n4 .color-palette .nav-link.n3,
.group.n5 .color-palette .nav-link.n3 {
  background: #fefefe;
}

.group.n6 .color-palette .nav-link.n1 {
  background: linear-gradient(225deg, #74bbbf 0%, #d9d9d9 100%);
}

.group.n6 .color-palette .nav-link.n2 {
  background: linear-gradient(225deg, #b96abc 0%, #d9d9d9 100%);
}

.group.n6 .color-palette .nav-link.n3 {
  background: #45454d;
}

.color-palette .nav-link:hover,
.color-palette button.nav-link.active {
  opacity: 1;
}

.nocomments {
  display: none;
}

/* =========================================================
   95. Footer Information / Blog Card
========================================================= */
.footer-information {
  display: flex;
  justify-content: center;
  gap: 1.03em;
  min-width: max-content;
  padding: 0.5em;
}

.information-container {
  overflow: auto;
}

.blog-card {
  width: 100%;
  max-width: 575px;
  margin: 1.5em auto;
  border-radius: 12px;
  transition: transform 0.25s ease-out;
}

.bc-mascot {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 16%;
  height: 14vw;
  max-height: 88px;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/third-son-of-the-site-mascot.svg");
  background-repeat: no-repeat;
  transform: translate(0);
  transition: transform 1.05s cubic-bezier(1, -0.55, 1, 1);
}

.bc-mascot.n5 {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/emon-back.svg");
}

.bc-mascot.n6 {
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/emon.svg");
}

.blog-card.demo:hover .bc-mascot {
  transform: translateY(-100%);
  transition: transform 0.4s;
}

.blog-card:not(.blog-card.demo:hover):hover {
  transform: translateY(-2px);
}

.blog-card a {
  display: block;
  padding: 0.8em;
}

a .bc-inner {
  display: flex;
  gap: 0.75em;
  overflow: hidden;
  max-height: 140px;
  border: solid 1.5px white;
  border-radius: 8px;
}

.bc-article-title {
  width: 200%;
  margin: 0.55em 0.6em 0.4em 0;
  color: #042234;
}

.blog-card figure img,
.blog-card video {
  aspect-ratio: 1.2 / 1;
  object-fit: cover;
}

.blog-card video {
  width: 100%;
}

.bc-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: 0.98em;
  line-height: 1.63;
  text-shadow: 0 0 #042234;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.bc-category {
  display: inline-block;
  margin: 0 0 0.4em;
  padding: 0.16em 0.5em;
  border-radius: 5px;
  background: #ffffff30;
  box-shadow: 0 7px 15px -10px #ffffff8f, 0 -7px 15px -10px #00000030;
  font-size: 0.88em;
  font-weight: 300;
}

.mac .bc-category {
  padding: 0.2em 0.5em 0.12em;
}

_::-webkit-full-page-media,
_:future,
:root .bc-category:not(.iphone .bc-category) {
  padding: 0.3em 0.5em 0.02em;
}

.bc-date {
  position: relative;
  bottom: -6px;
  left: 0.5em;
  font-size: 0.9em;
  letter-spacing: 0.4px;
}

.iphone .bc-date {
  font-size: 0.75em;
}

.bc-date i {
  font-size: 0.96em;
  padding-right: 0.12em;
}

.bc-date i:before {
  top: 0.01em;
}

/* =========================================================
   96. Notices / Search Chips / Blockquote
========================================================= */
.expandable-notices {
  display: none;
}

.expandable-notices.win-mac {
  display: block;
}

.mobile .expandable-notices.mobile {
  display: block;
}

.search-form,
.easy-to-see {
  margin: 0 0.3em;
  padding: 0.1em 0.5em 0.15em;
  border-radius: 6px;
  font-size: 0.9em;
}

.iphone .search-form,
.iphone .easy-to-see {
  padding: 0.3em 0.5em;
}

.mac .search-form,
.mac .easy-to-see {
  padding: 0.38em 0.5em 0.32em;
}

_::-webkit-full-page-media,
_:future,
:root .search-form,
.mac .easy-to-see:not(.iphone .easy-to-see) {
  padding: 0.41em 0.5em 0.29em;
}

.search-form {
  background: #ededed;
}

.easy-to-see {
  background: #ffb88f;
}

blockquote {
  position: relative;
  margin: 2.5em 0 1.5em;
  padding: 1.5em 0;
  border: 3px solid #ccc;
  border-radius: 10px;
}

blockquote.slide {
  padding: 1.5em 1em 0;
}

blockquote.demo-g p {
  color: #5f6368;
  font-weight: 400;
}

blockquote.demo-g p.g-f {
  margin: 37px 0 -9px;
  color: #202124;
  font-size: 24px;
  line-height: 1.2;
}

blockquote:before {
  position: absolute;
  top: -33px;
  left: 50%;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  padding-top: 16.5px;
  border: 3px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  color: #747474;
  font-family: "uicons-thin-rounded";
  font-size: 22px;
  line-height: 1;
  text-align: center;
  content: "\ef06";
  transform: translateX(-50%);
}

blockquote cite {
  display: block;
  margin: 0 1.7em 1.5em;
  padding: 1em;
  border-bottom: 1px solid #747474;
  color: inherit;
  font-size: 13px;
  font-style: normal;
  text-align: center;
}

blockquote.slide cite {
  margin: 0 0 1.5em;
}

.blockquote-inside {
  position: relative;
  overflow: auto;
  max-height: 549px;
  padding: 0 1.2em;
}

.slide .blockquote-inside {
  padding: 0;
}

/* =========================================================
   97. Mascot Speech Bubble
========================================================= */
.mascot-speech-bubble {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  width: 100%;
  margin-bottom: 20px;
  will-change: transform;
}

.mascot-speech-bubble.r-position {
  justify-content: right;
}

.m-s-b-icon {
  max-width: 3.8em;
  margin: 0 0.5em;
}

.circle img {
  border: solid 5px #0094ff4d;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 6px 6px 16px -12.5px #fff, -6px -6px 16px -12.5px #707070;
}

.circle .m-s-b-icon {
  min-width: 5em;
  max-width: 5em;
}

.m-s-b-comment {
  position: relative;
  display: flex;
  align-items: center;
  min-width: clamp(130px, 21vw, 180px);
  max-width: 450px;
  min-height: 3.6em;
  padding: 0.6em 0.8em;
  border-radius: 7px;
  line-height: 1.42;
}

.mac .m-s-b-comment,
.iphone .m-s-b-comment {
  padding: 0.67em 0.8em 0.53em;
}

_::-webkit-full-page-media,
_:future,
:root .m-s-b-comment:not(.iphone .m-s-b-comment) {
  padding: 0.7em 0.8em 0.5em;
}

.l-position.trigger.text p {
  clip-path: inset(0 100% 0 0);
  transition: 1.3s;
}

.r-position.trigger.text p {
  clip-path: inset(0 0 0 100%);
  transition: 1.3s;
}

.l-position.animation.text p,
.r-position.animation.text p {
  clip-path: inset(0);
}

.mascot-speech-bubble.l-position.trigger.all {
  clip-path: inset(0 100% 0 0);
  transition: 2.8s;
}

.mascot-speech-bubble.r-position.trigger.all {
  clip-path: inset(0 0 0 100%);
  transition: 2.8s;
}

.mascot-speech-bubble.l-position.animation.all,
.mascot-speech-bubble.r-position.animation.all {
  clip-path: inset(0);
}

.l-position.trigger.comment .m-s-b-comment {
  transform: translateX(-10px) scale(0, 1);
  transform-origin: left;
  transition: 0.48s cubic-bezier(0.19, 1.46, 0.58, 1);
}

.r-position.trigger.comment .m-s-b-comment {
  transform: translateX(10px) scale(0, 1);
  transform-origin: right;
  transition: 0.48s cubic-bezier(0.19, 1.46, 0.58, 1);
}

.l-position.animation.comment .m-s-b-comment,
.r-position.animation.comment .m-s-b-comment {
  transform: translate(0) scale(1);
  will-change: transform;
}

.mascot-speech-bubble.l-position.trigger.slide {
  transform: translateX(-40px);
  transition: 0.48s cubic-bezier(0.19, 1.46, 0.58, 1);
}

.mascot-speech-bubble.r-position.trigger.slide {
  transform: translateX(40px);
  transition: 0.48s cubic-bezier(0.19, 1.46, 0.58, 1);
}

.mascot-speech-bubble.r-position.animation.slide,
.mascot-speech-bubble.l-position.animation.slide {
  transform: translate(0);
}

.mascot-speech-bubble.animation.icon-jumping figure {
  animation: jumping 0.2s 15 ease-in;
}

.space-saving-container {
  position: relative;
  overflow: auto;
  height: clamp(19em, 70vw, 20.3em);
}

.r-color .m-s-b-comment {
  background: #ffc7ce;
}

.b-color .m-s-b-comment {
  background: #abe0ff;
}

.m-s-b-comment:before {
  position: absolute;
  top: 26%;
  z-index: -1;
  width: 17px;
  height: 17px;
  content: "";
  background: inherit;
  transform: rotate(45deg);
}

.l-position .m-s-b-comment:before {
  left: -7.5px;
}

.r-position .m-s-b-comment:before {
  right: -7.5px;
}

.mascot-speech-bubble figcaption {
  margin-top: 5px;
  padding: 0;
  font-size: 11.6px;
  letter-spacing: 0.2px;
}

/* =========================================================
   94. Hidden / Tabs / Merit Demerit / Color Palette
========================================================= */

.tab-panels > .tab-panel {
  display: none;
}

.tab-panels > .active {
  display: block;
}

/* =========================================================
   98. Accordion Main
========================================================= */
summary.ac-main,
summary.ac-main-demo {
  display: flex;
  align-items: center;
  gap: 0.4em;
  z-index: 2;
  width: 90%;
  max-width: 454px;
  min-height: 3.4em;
  padding: 0.73em 2.6em 0.85em clamp(0.82em, 3.6vw, 1.15em);
  background: #4b9acc;
  color: white;
  line-height: 1.26;
  font-weight: 500;
  box-shadow: 0 20px 20px -22px #00000000;
  transition:
    transform 0.3s cubic-bezier(0.61, 0.07, 0.58, 1),
    box-shadow 0.2s cubic-bezier(0.61, 0.07, 0.58, 1);
  will-change: transform;
}

.iphone summary.ac-main,
summary.ac-main-demo {
  padding: 0.69em 2.6em 0.61em clamp(0.82em, 3.6vw, 1.15em);
}

.page summary.ac-main {
  background: #1653c8;
  color: #fff;
}

.accordion-main[open] summary.ac-main {
  transform: translateY(-3px);
  box-shadow: 0 20px 20px -22px #0000004a;
  transition: 0s;
}

summary.ac-main:not(.mobile summary.ac-main):hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 20px -22px #0000004a;
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.7, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.7, 1);
}

.accordion-main-demo[open] summary.ac-main-demo {
  transform: translateY(-3px);
  box-shadow: 0 20px 20px -22px #ffffff75;
  transition: 0s;
}

summary.ac-main-demo:not(.mobile summary.ac-main-demo):hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 20px -22px #ffffff75;
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.7, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.7, 1);
}

.mobile .accordion-main[open] summary.ac-main,
.mobile .accordion-main-demo[open] summary.ac-main-demo {
  transition:
    transform 0.2s 0.53s cubic-bezier(0.4, 0, 0.7, 1),
    box-shadow 0.2s 0.53s cubic-bezier(0.4, 0, 0.7, 1);
}

summary.ac-main:before,
summary.ac-main:after,
summary.ac-main-demo:before,
summary.ac-main-demo:after {
  position: absolute;
  top: 49.5%;
  right: clamp(0.9em, 4.3vw, 1.2em);
  width: 15.5px;
  content: "";
  border-bottom: 2.5px solid;
  border-radius: 3px;
  transition: 0.6s 0.3s ease-in-out;
}

summary.ac-main:before,
summary.ac-main-demo:before {
  transform: rotate(-90deg);
}

.accordion-main[open] summary.ac-main:before,
.accordion-main-demo[open] summary.ac-main-demo:before {
  transform: rotate(180deg);
  transition: 0.7s 0.53s ease-in-out;
}

.accordion-main[open] summary.ac-main:after,
.accordion-main-demo[open] summary.ac-main-demo:after {
  transform: rotate(360deg);
  filter: blur(20px);
  transition:
    transform 0.9s 0.53s ease-in-out,
    filter 0.5s 1.33s;
}

.mobile .accordion-main[open] summary.ac-main:before,
.mobile .accordion-main-demo[open] summary.ac-main-demo:before {
  transition: 0.7s 0.73s ease-in-out;
}

.mobile .accordion-main[open] summary.ac-main:after,
.mobile .accordion-main-demo[open] summary.ac-main-demo:after {
  transition:
    transform 0.9s 0.73s ease-in-out,
    filter 0.5s 1.53s;
}

.ac-main-inside {
  position: relative;
  margin: -1.9em -1.5em 1.5em;
  padding: 2em 1.5em 1.5em;
  background: #fff;
  transform: translateY(-25px);
}

.page .ac-main-inside {
  border-radius: 15px;
}

.accordion-main[open] .ac-main-inside {
  transform: translate(0);
  animation: ac-main-open 0.53s cubic-bezier(0.76, 0.13, 0.58, 1);
}

.is-opened .answer p {
  animation: fade-in-ac-q 0.55s ease-in-out;
}

.accordion-main-demo .lead-lines-on-both-sides:before,
.accordion-main-demo .lead-lines-on-both-sides:after {
  background: white;
}

.accordion-main-demo .ac-main-inside:after {
  display: none;
}

summary.ac-main,
summary.ac-main-demo,
.accordion-sub summary {
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  margin: 1.5em auto 0;   user-select: none;
  -webkit-user-select: none;
  transform: translate(0);
}

/* =========================================================
   99. Accordion Sub
========================================================= */
.accordion-sub summary {
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 177px;
  max-width: max-content;
  min-height: 50px;
  padding: 0.75em 2.9em 0.75em 4.1em;
  background: linear-gradient(to right, #7fd1ff 3.5em, #e1f3ff 0);
  font-size: 15px;
  font-weight: 400;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.7, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.7, 1);
}

.mac .accordion-sub summary {
  padding: 0.78em 2.9em 0.72em 4.1em;
}

_::-webkit-full-page-media,
_:future,
:root .accordion-sub:not(.iphone .accordion-sub) summary {
  padding: 0.89em 2.9em 0.61em 4.1em;
}

.accordion-sub[open] summary {
  transform: translateY(6px);
  box-shadow: 0 11px 11px -11px #00000052;
  transition: 0.3s cubic-bezier(0.4, 0, 0.7, 1);
}

.ac-sub-inside-2.animation .fw-ul.lf.slide-in {
  animation: slide-in-l 0.4s cubic-bezier(0.19, 1.46, 0.58, 1) forwards;
}

.ac-sub-inside-2.animation .anime-container.fade-up {
  animation: fade-up 2.3s cubic-bezier(0.22, 0.21, 0.1, 0.87) forwards;
}

.ac-sub-inside-2.animation .anime-container.fade-down-2 {
  animation: fade-down 2.3s cubic-bezier(0.22, 0.21, 0.1, 0.87) forwards;
}

.ac-sub-inside-2.animation .anime-container.slide-in {
  animation: slide-in-l 2.3s cubic-bezier(0.22, 0.21, 0.1, 0.87) forwards;
}

.accordion-sub.type-4[open] summary {
  transition: 0.3s 0.3s cubic-bezier(0.4, 0, 0.7, 1);
}

.accordion-sub summary:hover:before {
  transform: rotate(-180deg);
}

.mobile .accordion-sub summary:hover:before {
  transform: unset;
}

.ac-partition {
  position: absolute;
  left: 37.5px;
  height: 18.5px;
  border-right: solid #042234 1.5px;
}

.accordion-sub summary:before,
.accordion-sub summary:after {
  position: absolute;
  font-family: "uicons-thin-rounded";
}

.accordion-sub summary:before {
  left: 10.5px;
  font-size: 18px;
}

.mobile .accordion-sub summary:not(.accordion-sub.type-4 summary):before {
  transition: transform 0.3s 0.3s cubic-bezier(0.4, 0, 0.7, 1);
}

.accordion-sub.type-1 summary:before,
.accordion-sub.type-2 summary:before {
  content: "\e4e5";
  transition: 0.3s cubic-bezier(0.4, 0, 0.7, 1);
}

.accordion-sub.type-3 summary:before {
  content: "\e0a4";
  transition: 0.3s cubic-bezier(0.4, 0, 0.7, 1);
}

.accordion-sub.type-4 summary:before {
  content: "\eb13";
  transform: unset;
  transition: filter 0.3s 0.3s ease-in-out;
}

.accordion-sub[open] summary:not(.accordion-sub.type-4 summary):before {
  transform: rotate(-180deg);
}

.accordion-sub.type-4[open] summary:before {
  filter: blur(20px);
  transition: filter 0.3s;
}

.accordion-sub summary:after {
  right: 8px;
  font-size: 23px;
  content: "\e089";
  transition: 0.3s cubic-bezier(0.4, 0, 0.7, 1);
}

.accordion-sub[open] summary:after {
  transform: rotate(-180deg);
}

.accordion-sub.type-4[open] summary:after {
  transition: 0.3s 0.3s cubic-bezier(0.4, 0, 0.7, 1);
}

.ac-sub-inside-1 {
  margin: -18px 0 1.5em;
  padding: 37px 1.1em 1.5em;
  border-radius: 10px;
  background: #c9eaff;
  will-change: transform;
}

.ac-sub-inside-2 {
  background: #e1f3ff;
}

.ac-sub-inside-2.n1,
.ac-sub-inside-2.n2,
.ac-sub-inside-2.n3 {
  margin-bottom: 1em;
}

.type-3 .ac-sub-inside-3 {
  background: #b0e1ff;
}

.ac-sub-inside-4 {
  position: relative;
  z-index: 0;
  overflow: hidden;
  max-width: 645px;
  margin: -19px auto 1.5em;
  padding: 0.9em 0.83em 0.77em;
  border-radius: 13px;
  background:
    radial-gradient(140% 107.13% at 50% 10%, #0000000a 37.41%, #1fadff 69.27%, #ffffff 100%);
  background-color: #0098ef;
}

.ac-sub-inside-4:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  content: "";
  background:
    radial-gradient(140% 107.13% at 50% 10%, #0000000a 37.41%, #000000 69.27%, #000000 100%);
  background-color: #002134;
}

.accordion-sub[open] .ac-sub-inside-4:before {
  animation: fade-out 0.45s 0.2s ease-in-out forwards;
}

.ac-sub-inside-4:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 13px;
  background: url("https://self-traveling-thailand.jp/wp-content/uploads/light-of-Jewelry.svg");
  transform: translateY(100%) scale(0);
}

[open] .ac-sub-inside-4:after {
  animation: home-position 0.37s 1.25s cubic-bezier(0.14, 0.62, 0.52, 1) forwards;
}

.asi-4-border {
  padding: 1.3em 0.7em 1.22em;
  border: dashed 2.5px #e1f3ff;
  border-radius: 12px;
}

.ac-sub-inside-4 .announcement {
  position: absolute;
  top: -100px;
  left: clamp(42%, 38vw, 45.5%);
  width: 100px;
  height: 113px;
  opacity: 0;
  background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/third-son-with-a-placard.svg");
  background-repeat: no-repeat;
  transform: translate(0) rotate(180deg);
}

.accordion-sub[open] .ac-sub-inside-4 .announcement {
  animation: informs 4.9s 4.5s;
}

.accordion-sub[open] .rotating-run:after,
.is-opened i.fi-tr-face-fearful {
  animation: rotating-run 9s 1.8s forwards;
  will-change: transform;
}

.accordion-sub[open] .zoom-in-down {
  animation: zoom-in-down 1.5s forwards;
}

[open] .anime-17 {
  animation: slide-in-l 0.4s 1s cubic-bezier(0.19, 1.46, 0.58, 1) forwards;
}

.accordion-sub p,
.accordion-sub-q p {
  margin: 0;
}

/* =========================================================
   100. Accordion Q&A / Details
========================================================= */
summary {
  display: inline-block;
  width: 100%;
}

.summary-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25em;
  max-width: 454px;
  min-height: 63px;
  margin: 0 auto;
  padding: 0.6em 5em 0.6em 1.2em;
  border-radius: 6px;
  background: linear-gradient(to right, #d8e1e8 calc(92% - 26px), #9ea2a5 0);
  cursor: pointer;
  line-height: 1.36;
  font-weight: 400;
  transition:
    transform 0.3s 0.3s cubic-bezier(0.61, 0.07, 0.58, 1),
    box-shadow 0.3s 0.3s cubic-bezier(0.61, 0.07, 0.58, 1);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.accordion-sub-q {
  margin: 1.5em auto;
}

.summary-inner i {
  position: relative;
  bottom: 0.1em;
  font-size: 1.18em;
  will-change: transform;
}

.is-opened .summary-inner i {
  animation: rotating-y 1.7s 0.55s cubic-bezier(0.2, 0, 1, 1) 5;
}

.icon-shadow {
  position: absolute;
  top: 58%;
  left: 1.28em;
  width: 1em;
  height: 1em;
  background: radial-gradient(43% 12% at center center, #17212680, rgb(0 0 0 / 0%));
}

.s-i-partition:before {
  position: absolute;
  top: 26%;
  left: 2.9em;
  width: 2px;
  height: 50%;
  content: "";
  border-radius: 10px;
  background: #00000036;
}

.summary-inner:after {
  position: absolute;
  right: 3.8%;
  font-family: "uicons-thin-rounded";
  font-size: 1.43em;
  content: "\e089";
  transition: 0.3s cubic-bezier(0.4, 0, 0.7, 1);
}

.is-opened .summary-inner:after {
  transform: rotate(-180deg);
}

.is-opened .summary-inner {
  transform: translateY(-3px);
  box-shadow: 0 10.5px 10.5px -10.5px #707070;
}

details .content-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1em;
  width: 97%;
  max-width: 443px;
  min-height: 6.5em;
  margin: 1em auto 0;
  padding: 0.5em 0;
  border-top: dashed 1.5px #9ea2a5;
  border-bottom: dashed 1.5px #9ea2a5;
}

.answer {
  position: relative;
  overflow: auto;
  max-height: 245px;
  padding-right: 10px;
}

details .content-inner .fi-tr-square-a {
  color: #009fff;
}

details .content-inner:before {
  position: absolute;
  left: 1.5em;
  height: 12%;
  min-height: 35px;
  margin-bottom: 3px;
  content: "";
  border-right: solid 1.5px #042234;
}

details .content {
  overflow: hidden;
}




/* =========================================
   目次の階層番号 自動生成（完全分離版）
========================================= */

#ez-toc-container nav ul li {
  counter-increment: item;
}

/* =================================================================
   【合理的統治】目次カウンターの再定義（最短経路版）
==================================================================== */

/* 1. 記事冒頭のメイン目次 */
.ez-toc-list > li > a::before {
  content: counters(item, ".") ". ";
  font-size: 0.9em;
  font-weight: bold;
  color: #666;
  margin-right: 5px;
}

/* 2. モーダル内の目次（専用クラスで直撃） */
.ez-toc-container-modal .ez-toc-list > li > a::before {
  content: counters(item, ".");
}

/* =========================================
   記事内：メイン目次（自作エンジン版）
========================================= */
#ez-toc-container.ez-toc-v2 {
  background: #f8f9fa;
  border: 2px solid #103750;
  border-radius: 12px;
  padding: 20px;
  margin: 2em auto;
  max-width: 600px;
}

#ez-toc-container.ez-toc-v2 .ez-toc-title {
  font-weight: 600;
  font-size: 1.2em;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

#ez-toc-container.ez-toc-v2 li {
  margin-bottom: 8px;
}

#ez-toc-container.ez-toc-v2 li a {
  font-weight: 500;
}

/* =========================================
   モバイル目次：エリート・エディション
========================================= */

/* モーダル外枠の余白（これはモーダル専用） */
.ez-toc-container-modal .ez-toc-list {
  padding: 15px 10px !important;
}

/* 各項目：リストのポッチを消し、数字を1ずつ増やす（共通設定） */
#my-toc-content li {
  counter-increment: modal-counter;
  margin-bottom: 5px;
}

/* モーダル専用：カードの余白とアニメーション */
.ez-toc-container-modal li {
  margin-bottom: 10px;
  transition: transform 0.1s ease;
}

/* タップした瞬間の「キュッ」という手応え */
.ez-toc-container-modal li:active {
  transform: scale(0.96);
}

.ez-toc-container-modal li a {
  display: flex;
  align-items: center;
  padding: 18px 15px;
  background: #fff;
  border-radius: 12px;
  color: #103750 !important;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

/* 番号円：サイドバーとモーダルの共通デザイン */
#my-toc-content li a::before,
.ez-toc-container-modal li a::before {
  content: counter(modal-counter);
  width: 32px;
  height: 32px;
  background: #103750;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  flex-shrink: 0;
  font-size: 14px;
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0, 1.77);
}

/* アクティブ（現在地）の濃紺支配 */
.ez-toc-container-modal li.active a {
  background-color: #103750 !important;
  color: white !important;
}

.ez-toc-container-modal li.active a::before {
  background: white !important;
  color: #103750 !important;
  transform: scale(1.1);
}

/* ==================================================
   独立要塞：GPUアクセラレーション専用アニメーション
   （bottom操作を排除し、transformで完結させる）
================================================== */

/* --- 目次ボタン --- */
#index-btn.is-visible {
  transform: translateY(0);
}

/* --- ペガサス（トップへ戻る） --- */
#page-top.is-visible {
  transform: translateY(0);
}

/* ==================================================
   独立要塞：目次ハイライト追従時の余白確保
   （scrollIntoView実行時の停止位置を調整）
================================================== */
.ez-toc-list li {
  scroll-margin-top: 15px;
  scroll-margin-bottom: 15px;
}

@media (min-width: 768px) {
  .related_article p.ttl {
    margin-top: -2.5px;
    font-size: 0.97em;
  }

  .footer-background {
    min-height: 1016px;
  }

  .modal-box {
    width: 50%;
  }

  .mobile-scrollbar {
    display: none;
  }

  .ac-sub-inside-2 {
    margin: -19px -1.5em 1.5em;
    padding: 2.45em 1.5em;
  }

  .ac-sub-inside-3 {
    margin: -19px -1.5em 1.5em;
    padding: 2.45em 0 1.5em;
  }

  .ac-sub-inside-3 p,
  .ac-sub-inside-3 .wp-block-code {
    padding: 0 1.5em;
  }

  .stepinside .parallel-layout-scroll:not(.explanation-layout .stepinside .parallel-layout-scroll) {
    margin: -1em 0 1.5em;
  }

  .blog-card figure {
    width: 505px;
  }

  _::-webkit-full-page-media,
  _:future,
  :root .subnav form input {
    padding: 11.5px 17% 11.5px 6%;
  }

  .no-snap {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
  }

  .no-snap img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
  }

  .swiper:hover .swiper-button-next,
  .swiper:hover .swiper-button-prev,
  .slider-wrapper:hover .swiper-button-next,
  .slider-wrapper:hover .swiper-button-prev,
  .fade-slider-wrapper:hover .swiper-button-next,
  .fade-slider-wrapper:hover .swiper-button-prev {
    opacity: 1;
  }

  .nav li:hover > ul {
    visibility: visible;
  }

  .stepinside .box:not(.explanation-layout .stepinside .box) {
    margin: 1.5em auto;
  }

  .modal-box.mini {
    max-width: 440px;
  }

  .stepbarwrap .partition-line,
  p.comment-poppy {
    margin: 0 0.5em 1em 2.1em;
  }

  .explanation-layout .partition-line {
    margin: 0 1.8em 1em 2.1em;
  }

  .stone.n2 {
    left: calc(50vw - 352px);
  }

  .explanation-layout .stepinside {
    margin: 0 1.8em 1.5em;
  }

  .steplabel .stepnumber {
    margin-left: 1.5em;
  }

  .explanation-layout .steplabel .stepnumber {
    margin-left: 1em;
  }
	
  .menu-item-258456 ul.sub-menu,
  .menu-item-258486 ul.sub-menu {
    width: 127px !important;
  }

  .nav li ul.sub-menu li a {
    display: flex;
    align-items: center;
    height: 50.5px;
    padding: 1.25em 1.9em 1.15em 0.8em;
    line-height: 1.4;
    text-align: left;
    color: #fff;
    opacity: 1;
    border-bottom: 0.5px #00000017 solid;
  }

  .nav li ul.sub-menu li li a {
    border-top: 0.5px #00000017 solid;
    border-bottom: 0;
  }

  .nav li ul.sub-menu li li:first-child a {
    border-top: 0;
  }

  .nav li ul.sub-menu li:last-child a {
    border-bottom: 0;
  }

  .nav li ul.sub-menu li a:hover {
    color: #00fffd;
  }

  .nav > li > a:after {
    pointer-events: none;
    position: absolute;
    top: 97.5%;
    left: 7.5%;
    width: 70%;
    content: "";
    opacity: 0;
    filter: blur(7px);
    transform: scale(1) translate(0, 120px) rotate(110deg);
    transform-origin: right;
    transition: 1.6s 1s cubic-bezier(0.84, 0, 0.3, 1);
    border: 0.2em solid #eef4ff;
    border-radius: 20px;
    box-shadow: 0 0 1em 0.1em rgb(204 223 255), 0 0 4em 0.4em rgb(123 169 255 / 78%),
      inset 0 0 0.75em 0.1em rgb(204 223 255);
  }

  .nav > li > a:hover::after {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    transition: 0.3s;
  }

  .nav li:hover > ul.sub-menu {
    opacity: 1;
    transition: opacity 0.2s ease-out;
  }

  .nav li ul.sub-menu li ul {
    margin-top: -50.5px;
    transform: translateX(163.3px);
    filter: unset;
  }

  .ribbon {
    width: 175px;
    height: 175px;
  }

  .ribbon span {
    top: 34px;
    left: 13px;
    width: 209px;
    padding: 10.5px 0 13.5px;
    font-size: 1.3em;
    text-shadow: 0 0 #000;
  }

  .iphone .ribbon span,
  .mac .ribbon span {
    padding: 12px 0;
  }

  .ribbon span:before {
    left: -1px;
  }

  .ribbon span:after {
    right: -1px;
  }
	
  .nav li ul.sub-menu li a .fi-tr-angle-double-small-right {
    position: absolute;
    right: 4.3%;
  }
	
  .table-container .inner,
  .parallel-layout-scroll,
  .table-flex,
  .swiper {
    cursor: grab;
  }	
	
  .iphone .nav li a span.gf {
   top: calc(-2.4vw + 17.5px);
   letter-spacing: 1.5px;
  }
}

@media (min-width: 880px) {
 .radar-chart-2 {
    width: 217px;
    height: 225px;
    padding: 13px 27px 0;
  }

  .radar-chart-2 dl > div:nth-child(1) {
    top: -4.5%;
  }

  .radar-chart-2 dl > div:nth-child(2) {
    right: -6%;
  }

  .radar-chart-2 dl > div:nth-child(3),
  .radar-chart-2 dl > div:nth-child(4) {
    bottom: 0.8%;
  }

  .radar-chart-2 dl > div:nth-child(5) {
    left: -6%;
  }

  .read-more {
    font-size: 25.3px;
  }

  .nav li ul.sub-menu {
    width: 189px;
  }

  .nav li ul.sub-menu li ul {
    transform: translateX(188.3px);
  }

  .menu-item-258456 ul.sub-menu,
  .menu-item-258486 ul.sub-menu {
    width: 141px !important;
  }
	
  .nav li ul.sub-menu {
    margin-top: 13.4px;
  }
	
  .nav li ul.sub-menu li a {
    font-size: 13.5px;
  }

  label,
  .recommended-articles-container,
  .ac-close-button {
    cursor: pointer;
  }

  .single .ac-main-inside::after {
    height: 66px;
    clip-path: polygon(0 0, 100% 66px, 100% 100%, 0% 100%);
  }
}

@media (min-width: 1270px) {
  .button-3d-square {
    font-size: 14.8px;
  }
	
  #container .related_article {
    width: 80%;
  }

  .modal-box {
    width: 60%;
  }

  .recommended-articles-container .time__date.date {
    margin-left: 28.5px;
  }

  .nav li ul.sub-menu {
    width: 220px;
    margin-top: 17px;
  }
	
/* ① ウィジェットタイトル */
  .single #my-toc-container .widgettitle {
    display: block;
  }

  /* ② 目次パネル（豪華装飾 ✕ スクロールバー非表示） */
  #my-toc-content .ez-toc-list {
    height: 495px;
    margin-top: 10px;
    padding: 20px 8px !important;
    overflow-y: auto;
    background: white;
    box-shadow: 6px 6px 16px -12.5px #fff, -6px -6px 16px -12.5px #707070;
    border-radius: 18px;
    scrollbar-width: none;
    counter-reset: my-toc-counter;
  }

  #my-toc-content .ez-toc-list::-webkit-scrollbar {
    display: none;
  }

  #my-toc-content .ez-toc-list li a {
    display: flex;
    align-items: center;
    padding: 14px 10px;
    font-size: 16.5px;
    line-height: 1.4;
    font-weight: 500;
    color: #042234;
  }

  /* ⑤ ★ホバー演出：番号円をスッと消す（移植完了） */
  #my-toc-content .ez-toc-list li a:hover::before {
    transform: scale(0);
    transition-timing-function: ease;
  }

  /* ⑥ アクティブ・ハイライト（聖域の着色） */
  #my-toc-content .ez-toc-list li.active {
    display: flex;
    align-items: center;
    min-height: 77px;
    background-color: #103750 !important;
    border-radius: 32px 10px 32px 10px;
    transition: background-color 0.2s ease;
  }

  #my-toc-content .ez-toc-list li.active a {
    color: white !important;
    font-weight: 600 !important;
  }

  /* ⑦ アクティブ時の番号円反転 */
  #my-toc-content .ez-toc-list li.active a::before {
    color: #103750;
    background: white;
  }

  /* ⑧ 追従（Sticky）レイアウト設定 */
  #inner-content {
    display: flex;
  }

  #scrollfix {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 80px !important;
    z-index: 10;
    width: 100%;
    max-height: calc(100vh - 100px);
  }
	
  .nav li ul.sub-menu li ul {
    margin-top: -56px;
    transform: translateX(219.2px);
  }

  .nav li ul.sub-menu li a {
    height: 56px;
    font-size: 15px;
  }

  .menu-item-258456 ul.sub-menu,
  .menu-item-258486 ul.sub-menu {
    width: 205px !important;
  }	
	
  .stepbar {
    margin: 0 auto;
  }

  .ribbon {
    width: 110px;
    height: 110px;
  }

  .ribbon span {
    top: 27px;
    left: -27px;
    width: 187px;
    padding: 6.4px 0 9.6px;
    font-size: 0.98em;
  }

  .mac .ribbon span {
    padding: 8px 0;
  }

  .ribbon span:before {
    left: 14.9px;
  }

  .ribbon span:after {
    right: 14.9px;
  }
	
  .sidebar .article-title {
    font-size: 16.3px;
  }

  .sidebar .articles-date {
    bottom: 56px;
    font-size: 15.3px;
  }	
	
  .single .ez-toc {
    display: block;
    margin-top: 10px;
  }	
	
  .single .widget_categories ul:not(.widget_categories li ul ul a, .widget_categories li ul) {
    max-height: 482px;
    margin-bottom: 0.5em;
  }
}

@media (max-width: 879.9px) {
  .speech-bubble .content {
    max-height: calc(30vw - 62px);
  }

  .explanation-layout .speech-bubble .content {
    height: calc(30vw - 98.5px);
  }

  .sharewrap h3 {
    font-size: calc(0.7vw + 12.6px);
  }
}

@media (max-width: 767px) {
  .footer-background {
    min-height: 1007px;
  }

  .postid-408774 .parallel-layout-scroll {
    margin: 0;
  }

  .table-container {
    margin-bottom: 1.5em;
  }

  .ac-sub-inside-2 {
    margin: -19px -1.2em 1.5em;
    padding: 2.45em 1.2em;
  }

  .ac-sub-inside-3 {
    margin: -19px -1.2em 1.5em;
    padding: 2.45em 0 1.5em;
  }

  .ac-sub-inside-3 p,
  .ac-sub-inside-3 .wp-block-code {
    padding: 0 1.2em;
  }

  #ez-toc-container ul {
    padding: 0.6em 0.65em 0.6em 0;
  }

  #ez-toc-container {
    padding: 10px 14px;
  }

  .parallel-layout-scroll {
    margin: 0.5em 0 -36px;
  }

  .modal-box .swiper.gallery img,
  .swiper.gallery img,
  .modal-box img {
    aspect-ratio: 1.618 / 1;
  }

  .blog-card figure {
    width: calc(-40vw + 786px);
  }

  .explanation-layout .stepbarwrap .mobile-scrollbar {
    top: 29px;
  }

  .swiper-wrapper-home .swiper {
    margin: 0 -2vw 0 -2vw;
    border-radius: 0;
  }

  .stepinside .parallel-layout-scroll .box:not(.explanation-layout .stepinside .box) {
    margin: 1.5em auto 2em;
  }

  .stepinside .parallel-layout-scroll:not(.explanation-layout .stepinside .parallel-layout-scroll) {
    margin: -1.1em 0 -0.5em;
  }

  .modal-text {
    max-height: 35vw;
  }
	
  .table-corporate-style .table-title {
    padding: 0.7em 0.5em 0.25em;
  }

  a {
    transition: 0.05s;
  }

  .related-box li .date {
    margin: 0 0 0 calc(2.2vw + 18.5px);
    font-size: calc(2.2vw + 3.8px);
  }

  .iphone .related-box li .date {
    margin: 0 0 0 calc(2.2vw + 16.5px);
    font-size: 16px;
  }

  .sns li {
    width: 31.5%;
  }

  .accordion-sub .flex-layout {
    gap: 1em;
  }

  .accordion-sub .flex-layout .icon:after {
    left: 1.5em;
  }

  .related-box li {
    margin: 4px 2.3px;
    box-shadow: 0 4px 0 #ededed;
  }

  .footer-links.cf {
    min-width: max-content;
  }

  .related-box li .eyecatch {
    margin-bottom: 2.3%;
  }

  .related-box li.related-rightlist:after {
    display: table;
    clear: both;
    content: "";
  }

  .share.short {
    padding: 0 1em;
  }

  .share.short .sns li a .text {
    display: none;
  }

  .footer-cloud.n1 {
    left: 3%;
    width: 150px;
  }

  .footer-cloud.n2 {
    width: 190px;
  }

  .yasinoki.n1 {
    left: calc(0.5vw - 140px);
    width: 350px;
    height: 578px;
    margin-top: -10px;
  }

  .yasinoki.n2 {
    right: calc(0.5vw - 140px);
    width: 350px;
    height: 578px;
    margin-top: -10px;
  }

  .yasinoki.n3 {
    left: calc(8vw - 81px);
    width: 200px;
    height: 330px;
    margin-top: 230px;
  }

  .yasinoki.n4 {
    right: calc(8vw - 81px);
    width: 200px;
    height: 330px;
    margin-top: 230px;
  }

  .stone.n1 {
    left: 61%;
    margin-top: 495px;
  }

  .crab.n1 {
    left: calc(50vw + 135px);
    margin-top: 500px;
  }

  .crab.n2 {
    left: calc(26vw - 116px);
  }	
	
  .table-corporate-style {
    margin: 2em -1.2em 1.5em -1.2em;
  }

  .ribbon {
    width: 180px;
    height: 180px;
  }

  .ribbon span {
    top: 36px;
    left: 24px;
    width: 200px;
    padding: 9px 0 11px;
    font-size: 1.2em;
  }

  .iphone .ribbon span {
    padding: 11px 0 9px;
  }

  .ribbon span:before {
    left: 1px;
  }

  .ribbon span:after {
    right: 1px;
  }
	
  .speech-bubble .content {
    max-height: calc(30vw - 54px);
  }

  .explanation-layout .speech-bubble .content {
    height: calc(29.8vw - 80px);
  }

  .stepbar .stepbarwrap {
    margin: 0 0 0 -0.5em;
  }

  .stepbarwrap .partition-line,
  p.comment-poppy {
    margin: 0 0.5em 1em 2.2em;
  }

  .explanation-layout-comment {
    padding: 0 1em 0 2.5em;
  }
	
  .nationality-gender-and-name {
    margin: 1.2em 0 3.23em 48%;
    font-size: 25px;
  }

  .mean-container .mean-nav ul li a {
    position: relative;
    display: flex;
    align-items: center;
    height: 33px;
    padding: 42px 30% 5px 1em;
    line-height: 1.4;
    color: white;
    border-top: 0.5px solid #0000002e;
  }

  .mean-nav ul li a img {
    opacity: 0.73;
  }

  .mean-container .mean-nav ul li li a {
    padding: 1.1em 2em;
    font-size: 15.7px;
  }

  .mean-container .mean-nav ul li li li a {
    padding: 1.2em 1em 1em 3em;
  }

  ul.sub-menu .fi-tr-angle-double-small-right:before {
    margin-left: 5.5em;
    font-size: 20px;
    bottom: 0.85em;
    content: "\f377";
    opacity: 0.1;
    transition: opacity 0.3s;
  }

  .mean-nav li:has(> a.mean-clicked) > a .fi-tr-angle-double-small-right:before {
    opacity: 1;
  }

  .meanmenu-reveal.animate.meanclose::after {
    content: "CLOSE";
  }

  .meanmenu-reveal.animate span:nth-of-type(1) {
    animation: hamburger-first-line 1s forwards;
  }

  .meanmenu-reveal.animate.meanclose span:nth-of-type(1) {
    animation: active-hamburger-first-line 1s forwards;
  }

  .meanmenu-reveal.animate span:nth-of-type(2) {
    animation: hamburger-second-line 1s forwards;
  }

  .meanmenu-reveal.animate.meanclose span:nth-of-type(2) {
    animation: active-hamburger-second-line 1s forwards;
  }

  .meanmenu-reveal.animate span:nth-of-type(3) {
    animation: hamburger-third-line 1s forwards;
  }

  .meanmenu-reveal.animate.meanclose span:nth-of-type(3) {
    animation: active-hamburger-third-line 1s forwards;
  }
	
  .subnav .contactbutton a:hover {
    opacity: 0.55;
  }	
	
  .mean-container .mean-nav ul li a.mean-expand {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(16.1% + 13px);
    padding: 23.5px 0;
    border-top: 0;
    border-left: 0.5px solid #0000002e;
  }

  .mean-container .mean-nav ul li li a.mean-expand {
    padding: 17px 0;
  }

  .mean-container .mean-nav ul li a.mean-expand::before,
  .mean-container .mean-nav ul li a.mean-expand::after {
    position: absolute;
    top: 50%;
    left: 50.4%;
    display: block;
    width: 14px;
    height: 2px;
    content: "";
    background-color: white;
    border-radius: 4px;
    translate: -50% -50%;
    transform-origin: center center;
    transition: rotate 0.3s ease-in-out;
  }

  .mean-container .mean-nav ul li a.mean-expand::after {
    rotate: 90deg;
  }

  .mean-container .mean-nav ul li a.mean-expand.mean-clicked {
    width: calc(16.1% + 47px);
    background: #a7a4a4;
  }

  .mean-container .mean-nav ul li a.mean-expand.mean-clicked::after {
    rotate: 180deg;
  }

  .mean-container .mean-nav ul li li a.mean-expand.mean-clicked {
    width: calc(16.1% + 28px);
  }

  .poppy-layout-comment {
    padding: 0 1.4em 0 2.9em;
  }

  .related-box li .ttl {
    margin-top: -0.16em;
    padding: 0 10px 7px;
    font-size: clamp(19px, 3.2vw, 23.5px);
    line-height: calc(203% - 8.5px);
    letter-spacing: 0.2px;
  }

  .mean-nav ul:not(ul.sub-menu) {
    margin-bottom: 15%;
  }	
	
  .single .related-box a:hover img {
    transition: 0.1s 0s ease-out, filter 0.02s ease-out;
  }	
		
}

@media (max-width: 574px) {
  .cool-tabs.rich .tab-panels {
    padding: 1em 0.9em;
  }

  .layout-automatic-change.d-block-sp {
    display: block;
  }

  .layout-automatic-change.f-wrap-sp {
    flex-wrap: wrap;
  }

  .cool-tabs.rich .layout-automatic-change:not(.cool-tabs.rich .layout-automatic-change.btn) {
    gap: 2em;
  }

  .cool-tabs.rich .layout-automatic-change.btn {
    gap: 1em;
  }

  .layout-automatic-change figcaption:not(.swiper-slide figcaption, .explanation-layout figcaption) {
    margin-bottom: 1.5em;
  }

  .radar-chart-2 {
    width: 57%;
    height: 60vw;
    padding: 10% 2%;
  }

  .radar-chart-2 dl > div:nth-child(1) {
    top: -5%;
  }

  .radar-chart-2 dl > div:nth-child(3),
  .radar-chart-2 dl > div:nth-child(4) {
    bottom: 0.5%;
  }

  .explanation-layout .parallel-layout-scroll .layout-automatic-change {
    margin: 4.5em auto 1.3em;
  }

  .explanation-layout figcaption {
    position: absolute;
    top: -26px;
    width: 100%;
  }

  .speech-bubble.slide-in.animation {
    animation: fade-up-jump 0.4s cubic-bezier(0.19, 1.46, 0.58, 1) forwards;
  }

  .speech-bubble .content {
    max-height: calc(56vw - 13px);
  }

  .explanation-layout .speech-bubble .content {
    height: calc(50vw - 15px);
  }

  .supplementary-title-layout {
    flex-wrap: wrap;
  }

  .supplementary-title-layout.figcaption {
    position: relative;
    margin-top: 1em;
  }

  .explanation-layout .stepinside {
    padding: 1.5em 0.8em;
  }

  .explanation-layout .parallel-layout-scroll {
    margin-top: -4.5em;
  }

  .speech-bubble:before {
    position: absolute;
    top: -40.5px;
    left: 50%;
    content: "";
    border-left: 21px solid transparent;
    border-right: 21px solid transparent !important;
    transform: translateX(-50%);
  }

  .speech-bubble.color-select-1:before {
    border-bottom: 21px solid #7acdc2;
  }

  .speech-bubble.color-select-5:before {
    border-bottom: 21px solid #70bae4;
  }

  .speech-bubble.color-select-9:before {
    border-bottom: 21px solid #9d6f6f;
  }

  .speech-bubble.color-select-3:before {
    border-bottom: 21px solid #ffa2ae;
  }

  .speech-bubble.color-select-8:before {
    border-bottom: 21px solid #60696d;
  }

  .speech-bubble.color-select-2:before {
    border-bottom: 21px solid #ffb88f;
  }

  .flex-group,
  .flex-group-2 {
    min-width: 100%;
  }
}

@media (max-width: 480px) {
 .ez-toc-counter nav ul li a::before {
    margin: 0 0 0 0.7em;
  }

  #ez-toc-container ul li a:after {
    left: 2.3em;
  }

  .iphone .recommended-articles-container .time__date.date {
    margin-left: 2.05em;
  }

  .recommended-articles-container .time__date.date {
    margin-left: 30.5px;
  }

  .widgettitle {
    padding-left: 17.2px;
  }

  .iphone .sidebar .date {
    font-size: 14px;
  }

  .ac-sub-inside-3 p,
  .ac-sub-inside-3 .wp-block-code {
    padding: 0 0.6em;
  }

.index-modal #ez-toc-container {
  min-width: 94.6vw;
}

  .modal-text {
    max-height: 57vw;
  }

  .modal-box.text-only,
  .text-only .modal-text,
  .modal-box.gallery,
  .modal-box.gallery-s {
    padding: 0.8em;
  }

  .modal-box figure {
    margin: 0.8em 0.8em 0;
  }

  .modal-text {
    margin-top: 0.8em;
    padding: 0 0.8em;
  }

  .modal-box {
    padding: 0 0 0.8em;
  }

  .modal-box.gallery-s .modal-text {
    margin: 0.8em -0.8em 0;
  }

  .modal-box.gallery .modal-text,
  .gallery-text {
    margin: 0.8em;
    padding: 0.7em;
  }

  .sns li a {
    font-size: 66%;
  }

  .sns .hatebu a {
    padding: 17% 0 24.9px;
  }

  .sns .pocket a {
    padding: 17% 0 24.2px;
  }

  .iphone .sns .pocket a {
    padding: 17% 0 23.7px;
  }

  .sns .instagram a {
    padding: 17% 0 5.8px;
  }

  .sns .facebook a {
    padding: 17% 0 6.2px;
  }

  .iphone .sns .facebook a {
    padding: 17% 0 7px;
  }

  .blockquote-inside {
    padding: 0 0.7em;
  }

  blockquote cite {
    margin: 0 1.2em 1.5em;
  }

  blockquote.slide {
    padding: 1.5em 0.6em 0;
  }

  blockquote .gallery-text {
    margin: 0.6em 0.3em 0.7em;
    padding: 0.5em 0.7em 0.8em;
  }

  blockquote .swiper.gallery .is-style-wide {
    margin: 1.5em 0.6em 0;
  }

  .m-s-b-comment {
    min-height: 3.2em;
    padding: 0.55em 0.7em;
  }

  .iphone .m-s-b-comment {
    padding: 0.6em 0.7em 0.5em;
  }

  .circle .m-s-b-icon {
    max-width: 4.4em;
    min-width: 4.4em;
  }

  .m-s-b-icon {
    max-width: 3.15em;
  }

  .summary-inner {
    padding: 0.6em 3.85em 0.6em 0.8em;
  }

  .icon-shadow {
    left: 0.9em;
  }

  .s-i-partition:before {
    left: 2.5em;
  }
 
  .ac-sub-inside-1 {
    padding: 37px 0.8em 1.5em;
  }

  .ac-sub-inside-2 {
    margin: -19px -0.6em 1.5em;
    padding: 2.45em 0.6em;
  }

  .ac-sub-inside-3 {
    margin: -19px -0.6em 1.5em;
    padding: 2.45em 0 1.5em;
  }

  .ac-sub-inside-4 {
    padding: 0.8em 0.73em 0.67em;
  }

  .blog-owner-katoshiro {
    aspect-ratio: 1 / 1.45;
  }

  .merit-demerit .inner {
    padding: 1em;
  }

  .blog-card a {
    padding: 0.68em;
  }

  a .bc-inner {
    gap: 0.6em;
    max-height: clamp(120px, 35vw, 132px);
  }

  .bc-article-title {
    font-size: clamp(0.85em, 4.4vw, 0.96em);
  }

  .bc-date {
    left: 0.3em;
  }

  .blog-card figure img,
  .blog-card video {
    aspect-ratio: 0.84 / 1;
  }

  .blog-card figure {
    width: calc(-34vw + 490px);
  }	
	
  .table-corporate-style .group {
    min-width: 100%;
  }

  .table-corporate-style .remarks {
    padding: 0 65px;
  }

  .share.short .sns li a {
    padding: 10px 4px;
  }

  .sharewrap h3 {
    margin: 0.5em auto 0.35em;
  }

  .footer-cloud.n1 {
    left: -17%;
  }

  .related-box li .date {
    margin: 0 0 0 calc(2.2vw + 16px);
    font-size: calc(2.2vw + 4.8px);
  }

  .iphone .related-box li .date {
    margin: 0 0 0 calc(2.2vw + 15.2px);
    font-size: calc(2.2vw + 4.4px);
  }
	
  .related-box li .eyecatch {
    margin-bottom: -1px;
  }

  .stone.n2 {
    margin-top: calc(-2.2vw + 477px);
  }

  .crab.n2 {
    left: calc(26vw - 150px);
  }
	
  .mean-nav ul:not(ul.sub-menu) {
    margin-bottom: calc(11% + 33px);
  }
	
  .sidebar .article-title {
    font-size: 17.6px;
  }

  .sidebar .articles-date {
    font-size: 15.5px;
  }

  .stepinside {
    margin: 0 0 0 1.2em;
  }

  .table-corporate-style {
    margin: 2em -0.8em 1.5em -0.8em;
  }

  .fa-facebook-f:before,
  .fa-facebook:before {
    top: 0.15em;
  }

  .operator-name {
    font-size: clamp(22px, 5.8vw, 27px);
  }	
	
  .introduction {
    padding: 0 0.7em;
  }

  .related-box li .ttl {
    padding: 0 8px 8px;
    font-size: clamp(15.2px, 4vw, 18px);
    line-height: 1.48;
  }

  .related-box li .cat-name {
    padding-left: 14px;
    box-shadow: 2px 2px 0 0 #fff;
  }

  .inbox .recommend {
    filter: drop-shadow(2px 2px 0 #fff);
  }

  .ribbon {
    width: 130px;
    height: 130px;
  }

  .ribbon span {
    top: 31.6px;
    left: -18.8px;
    font-size: 1.1em;
  }

  .ribbon span:before {
    left: 8.5px;
  }

  .ribbon span:after {
    right: 10.5px;
  }

  .twitter svg {
    width: 1.92em;
    margin-top: -1px;
  }

  .pocket svg {
    width: 1.88em;
    margin-top: -0.7px;
    margin-left: -0.85em;
  }

  .facebook svg {
    width: 1.8em;
    margin-top: -1.2px;
    margin-left: -0.85em;
  }

  .line svg {
    width: 1.67em;
    margin-top: 0.05em;
    margin-left: -0.8em;
  }

  .sns .hatebu a:before {
    margin-top: -2px;
    margin-left: -0.45em;
    font-size: 1.37em;
  }

  .sns .fi-brands-instagram {
    margin-top: -0.1em;
    margin-left: -0.4em;
    font-size: 1.25em;
  }

  .sns .twitter a:after {
    margin: -0.5em 0 0 1.13em;
    background-size: 1.8em;
  }

  .box.rich-style .content,
  .box.dream-style .content {
    padding: 0.9em 0.8em;
  }

  .box.border-style .content {
    padding: 0.9em 0.7em;
  }

  .box.rich-column-style .content {
    padding: 0.9em 0.8em 0.9em 0.7em;
  }

  .tobimusi.n1 {
    offset-path: path("M.29,215.3c13.47-9.77,24.11-32.89,22.71-49-1.7-19.5-6.95-25.24-8.19-42.01-1.11-15,6.32-26.35,5.17-44.84-1.01-16.22-9.45-27.91-5.83-50.57C17.64,6.9,30.29.45,30.29.45");
  }

  .tobimusi.n2 {
    offset-path: path("M.29.4c13.47,9.77,24.11,32.89,22.71,49-1.7,19.5-6.95,25.24-8.19,42.01-1.11,15,6.32,26.35,5.17,44.84-1.01,16.22-9.45,27.91-5.83,50.57,3.5,21.98,16.16,28.43,16.16,28.43");
  }

  .tobimusi.n3 {
    offset-path: path("M.29,215.3c13.47-9.77,24.11-32.89,22.71-49-1.7-19.5-6.95-25.24-8.19-42.01-1.11-15,6.32-26.35,5.17-44.84-1.01-16.22-9.45-27.91-5.83-50.57C17.64,6.9,30.29.45,30.29.45");
  }

  .suspicious-fireflies,
  .suspicious-fireflies.n2,
  .suspicious-fireflies.n3 {
    offset-path: path("M.12,3.15S15-.45,26.27.74c11.28,1.19,17.17,5.55,25.7,5.99,28.15,1.46,40.15-8.54,65.15-5.54,15.22,1.83,23,12,56,7");
  }

  .suspicious-fireflies.n4,
  .suspicious-fireflies.n5 {
    offset-path: path("M1.27,12.93c1.33,4.52,8.04,5.86,14.82,4.8,6-.94,12.11-5.02,10.92-10.48C25.59.79,18.9-.03,10.75,1.95,5.28,3.28-.31,7.58,1.27,12.93Z");
  }

  .related-box li .eyecatch {
    box-shadow: 0 8px 16px -8px #c1c6c8;
  }	
	
  .box.blackboard {
    padding: 0.6em 0.7em 0.75em;
  }

  .stepbarwrap .partition-line,
  p.comment-poppy {
    margin: 0 0.3em 1em 1.4em;
  }

  .stepcircle,
  .stepbar .line-start,
  .stepbar .line-end,
  .stepline {
    margin-left: -0.17em;
  }

  .stepbar .stepbarwrap {
    margin: 0 0 0 -0.16em;
  }

  .steplabel .stepnumber {
    margin-left: 0.7em;
  }

  .poppy-layout-comment {
    padding: 0 0.2em 0 2.2em;
  }

  .explanation-layout-comment {
    padding: 0 0.6em 0 1.5em;
  }
	
  #container .related_article a {
    width: 103.7%;
    max-width: 353px;
    margin: auto;
    margin-top: 0;
    margin-left: -1.69%;
    padding: 0.9em 0.5em 0.25em 0.78em;
    font-size: 11.5px;
    box-shadow: none;
    border-bottom: 2.7px solid #d9a7c7;
  }

  .related_article .thum {
    width: 102px;
  }

  .related_article .inbox {
    padding-top: 3px;
    padding-left: 108px;
  }

  .related_article p.ttl {
    margin-bottom: -1.3px;
    font-size: 0.95em;
  }
	
}

@media (min-height: 700px) {
  .modal-box {
    width: 96%;
  }
}

























/* =========================================================
   Hamburger Keyframes  &  Motion Tokens
========================================================= */
:root {
  --ham-line-w-min: 21%;
  --ham-line-w-max: 55%;
  --ham-line-shift: 11.5px;
}

@keyframes hamburger-first-line {
  0% {
    width: var(--ham-line-w-min);
    transform: translateY(var(--ham-line-shift)) rotate(45deg);
  }
  30% {
    width: var(--ham-line-w-min);
    transform: translateY(var(--ham-line-shift)) rotate(0);
  }
  80% {
    width: var(--ham-line-w-max);
    transform: translateY(var(--ham-line-shift)) rotate(0);
  }
  100% {
    width: var(--ham-line-w-max);
    transform: translate(0) rotate(0);
  }
}

@keyframes active-hamburger-first-line {
  0% {
    transform: translate(0) rotate(0);
  }
  50% {
    width: var(--ham-line-w-max);
    transform: translateY(var(--ham-line-shift)) rotate(0);
  }
  80% {
    width: var(--ham-line-w-min);
    transform: translateY(var(--ham-line-shift)) rotate(0);
  }
  100% {
    width: var(--ham-line-w-min);
    transform: translateY(var(--ham-line-shift)) rotate(45deg);
  }
}

@keyframes hamburger-second-line {
  0%,
  77% {
    opacity: 0;
  }
  78%,
  100% {
    opacity: 1;
  }
}

@keyframes active-hamburger-second-line {
  0%,
  49.8% {
    opacity: 1;
  }
  49.9%,
  100% {
    opacity: 0;
  }
}

@keyframes hamburger-third-line {
  0% {
    width: var(--ham-line-w-min);
    transform: translateY(calc(var(--ham-line-shift) * -1)) rotate(-45deg);
  }
  30% {
    width: var(--ham-line-w-min);
    transform: translateY(calc(var(--ham-line-shift) * -1)) rotate(0);
  }
  80% {
    width: var(--ham-line-w-max);
    transform: translateY(calc(var(--ham-line-shift) * -1)) rotate(0);
  }
  100% {
    width: var(--ham-line-w-max);
    transform: translate(0) rotate(0);
  }
}

@keyframes active-hamburger-third-line {
  0% {
    transform: translate(0) rotate(0);
  }
  50% {
    width: var(--ham-line-w-max);
    transform: translateY(calc(var(--ham-line-shift) * -1)) rotate(0);
  }
  80% {
    width: var(--ham-line-w-min);
    transform: translateY(calc(var(--ham-line-shift) * -1)) rotate(0);
  }
  100% {
    width: var(--ham-line-w-min);
    transform: translateY(calc(var(--ham-line-shift) * -1)) rotate(-45deg);
  }
}

@keyframes pegasus-takeoff {
  0% { transform: translateY(0) scale(1); animation-timing-function: ease-in-out; }
  15%, 20% { transform: translateY(8px) scale(1.1, 0.88); animation-timing-function: cubic-bezier(0.24, 0.65, 1, 1); }
  50% { opacity: 1; }
  100% { transform: translateY(-180vh) rotate(-15deg) scale(0.5); opacity: 0; }
}

@keyframes fade-in {
  100% { opacity: 1; }
}

@keyframes header-second-son-right-hand {
  0%, 11.5%, 30%, 34.5%, 40%, 44.1%, 48%, 52%, 61% { transform: rotate(-20deg); }
  1.25%, 10%, 31.25%, 33%, 41%, 43%, 49%, 51%, 53%, 60% { transform: rotate(14deg); }
}

@keyframes header-second-son-face {
  43.3%, 52.3% { transform: rotate(0); }
  44.3%, 46.3%, 48.3%, 50.3% { transform: rotate(2deg); }
  45.3%, 47.3%, 49.3%, 51.3% { transform: rotate(-2deg); }
}

@keyframes header-second-son-smile-face {
  43.3% { transform: rotate(0); opacity: 0; }
  43.4%, 60% { opacity: 1; }
  44.3%, 46.3%, 48.3%, 50.3% { transform: rotate(2deg); }
  45.3%, 47.3%, 49.3%, 51.3% { transform: rotate(-2deg); }
  52.3% { transform: rotate(0); }
  60.1% { opacity: 0; }
}

@keyframes header-second-son-left-hand {
  19.1%, 31.6%, 37.1%, 41.5%, 44.1%, 48%, 52%, 61% { transform: translate(-5%, -22%) rotate(76deg); }
  20.35%, 30.35%, 38.35%, 40.35%, 45.1%, 47%, 53%, 60% { transform: translate(-3.5%, -3%) rotate(24deg); }
}

@keyframes header-third-son {
  3.7%, 6.7%, 20.1%, 23.1%, 31%, 33.5%, 38%, 40.5%, 45%, 48%, 51%, 54% { transform: translate(0) scale(1); }
  4.7%, 21.1%, 31.53%, 38.53%, 46%, 49%, 52% { transform: translate(4.8%, 4.8%) scale(1.1, 0.9); }
  5.7%, 22.1%, 32.5%, 39.5%, 47%, 50%, 53% { transform: translateY(-10.5%) scale(1); }
}

@keyframes header-third-son-right-hand {
  4%, 7.2%, 20.4%, 23.6%, 31.3%, 33.8%, 38.3%, 40.8%, 45%, 48%, 51%, 54%, 66.3%, 99% { transform: translate(-23%, -18%) rotate(-10deg); }
  4.3%, 6.3%, 20.7%, 22.7%, 31.6%, 33.1%, 38.6%, 40.1% { transform: translate(-38%, -36%) rotate(-25deg); }
  46.5%, 49.5%, 52.5% { transform: translate(0, 5%) rotate(7deg); }
  67%, 69.1%, 71.2%, 77%, 79.1%, 81.2%, 87%, 89.1%, 91.2%, 98.3% { transform: translate(0) scale(1); }
  67.7%, 69.8%, 77.7%, 79.8%, 87.7%, 89.8% { transform: translate(4.8%, 4.8%) scale(1.1, 0.9); }
  68.4%, 70.5%, 78.4%, 80.5%, 88.4%, 90.5% { transform: translateY(-10.5%) scale(1); }
}

@keyframes site-title-anime {
  0% { transform: rotateY(180deg); }
  100% { transform: rotateY(0); }
}

@keyframes fly-around-seagull {
  0%, 50%, 100% { offset-distance: 0%; }
  9.8%, 11.3%, 13% { transform: translateY(0) scale(1); }
  10.3%, 11.8% { transform: translateY(0) scale(1, 0.85); }
  10.8%, 12.3% { transform: translateY(3px) scale(0.15, 1); }
  25%, 75% { offset-distance: 100%; }
}

@keyframes infinity-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes infinity-scroll-2 {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes front-and-rear {
  0% { transform: translate(0); }
  100% { transform: translateX(5px); }
}

@keyframes scrolling {
  0% { transform: translateX(-55.2px); }
  22%, 65% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-6.2px); }
}

@keyframes informs {
  0% { transform: translate(0) rotate(180deg); opacity: 1; }
  28%, 70% { transform: translateY(36%) rotate(180deg); }
  77% { transform: translateY(107px) rotate(180deg); }
  80% { transform: translate(0, 107px) rotate(180deg); animation-timing-function: cubic-bezier(1, 0, 1, 1); }
  100% { transform: translate(30%, -60%) rotate(68deg); opacity: 1; }
}

@keyframes small-big-fade-in {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1); }
  100% { opacity: 1; }
}

@keyframes floating-3 {
  0%, 20%, 100% { transform: translate(0); }
  55%, 60% { transform: translateY(-20px); }
}

@keyframes floating-icon-shadow {
  0%, 20%, 100% { transform: scale(1); }
  55%, 60% { transform: scale(0.43); }
}

@keyframes floating-rotating {
  0%, 7% { transform: translate(0); }
  30% { transform: translateY(-25px) rotateY(0); }
  41% { transform: translateY(-25px) rotateY(360deg); }
  100% { transform: translate(0) rotateY(360deg); }
}

@keyframes floating-icon-shadow-2 {
  0%, 7%, 100% { transform: scale(1); }
  30%, 41% { transform: scale(0.43); }
}

@keyframes rotate-alternately {
  0%, 20% { transform: translate(0); }
  57.5% { transform: translateY(-20px) rotateY(360deg); }
  100% { transform: translate(0) rotateY(0); }
}

@keyframes rotate-alternately-2 {
  0%, 20%, 100% { transform: translate(0) rotateY(-180deg); }
  57.5% { transform: translateY(-20px) rotateY(180deg); }
}

@keyframes floating-icon-shadow-3 {
  0%, 20%, 100% { transform: scale(1); }
  57.5% { transform: scale(0.43); }
}

@keyframes shake-icon {
  0%, 7%, 100% { transform: translate(0); }
  30%, 33.5%, 38.5%, 41% { transform: translate(0, -20px); animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  34%, 35%, 36%, 37%, 38% { transform: translate(7%, -20px); }
  34.5%, 35.5%, 36.5%, 37.5% { transform: translate(-7%, -20px); }
}

@keyframes jumping-8 {
  44.7% { transform: translate(0) scale(1); animation-timing-function: ease-in; }
  55.9%, 56.1%, 65%, 65.1%, 73.1%, 73.4%, 81.4%, 81.5% { transform: translate(0) scale(1.25, 0.7); }
  61.1%, 69.5%, 77.8%, 85.9% { transform: translateY(-30px) scale(0.85, 1.15); animation-timing-function: ease-in; }
  64.1%, 72.2%, 80.5%, 88.5% { transform: translate(0) scale(1); animation-timing-function: ease-out; }
  90.4%, 90.5% { transform: translate(0) scale(1.35, 0.3); animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
  100% { transform: translate(0) scale(1); }
}

@keyframes floating-icon-shadow-8 {
  44.7% { transform: scale(1); animation-timing-function: ease-in; }
  55.9%, 56.1%, 65%, 65.1%, 73.1%, 73.4%, 81.4%, 81.5% { transform: scale(1.28, 1); }
  61.1%, 69.5%, 77.8%, 85.9% { transform: scale(0.4); animation-timing-function: ease-in; }
  64.1%, 72.2%, 80.5%, 88.5% { transform: scale(1); animation-timing-function: ease-out; }
  90.4%, 90.5% { transform: translateY(9.5px) scale(1.55, 1); animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes wave {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes infinite-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 360px -360px; }
}

@keyframes tilt {
  0% { transform: perspective(600px) translate(0) rotate3d(0, 1.3, -0.3, 0); }
  100% { transform: perspective(600px) translate(-15px, 9px) rotate3d(0, 1.3, -0.3, 36deg); }
}

@keyframes slide {
  100% { transform: translateX(21px); }
}

@keyframes moving {
  0% { transform: translate(102%, -76%) scale(3); animation-timing-function: cubic-bezier(0.19, 0.02, 0.24, 0.92); }
  71% { transform: translate(102%, 70%) scale(3); animation-timing-function: cubic-bezier(0.8, 0, 0.92, 0.95); }
  90% { transform: translate(0, 70%) scale(3); animation-timing-function: cubic-bezier(0.82, 0.05, 0.76, 0.96); }
  100% { transform: translate(0, 13%) scale(1.22); }
}

@keyframes slide-4 {
  0%, 15%, 100% { transform: translateX(-25px); }
  25%, 40% { transform: translateX(-171px); }
  50%, 65% { transform: translateX(-309px); }
  75%, 90% { transform: translateX(-438px); }
}

@keyframes ring-anim {
  0% { transform: rotate(-15deg); }
  2% { transform: rotate(15deg); }
  4%, 12% { transform: rotate(-18deg); }
  6%, 14% { transform: rotate(18deg); }
  8% { transform: rotate(-22deg); }
  10% { transform: rotate(22deg); }
  16% { transform: rotate(-12deg); }
  18% { transform: rotate(12deg); }
  20%, 100% { transform: rotate(0); }
}

@keyframes launching-rocket {
  0% { transform: translate(0); }
  100% { transform: translate(63%, calc(-36vw + 2px)); }
}

@keyframes flame-2 {
  0%, 100% { transform-origin: top; transform: scale(1, 0); }
  20% { transform-origin: top; transform: scale(1); }
  60% { transform-origin: bottom; transform: scale(1); opacity: 1; }
  95% { transform-origin: bottom; transform: scale(1, 0); opacity: 0; }
}

@keyframes floating-2 {
  0% { transform: translateY(0); }
  100% { transform: translateY(9%); }
}

@keyframes rotating-y {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(180deg); }
}

@keyframes rotate-20 {
  0% { transform: rotate(0); }
  100% { transform: rotate(20deg); }
}

@keyframes home-position {
  100% { transform: translate(0) scale(1); }
}

@keyframes gakuburu {
  0%, 25%, 100% { transform: translate(0) rotate(0); }
  43.8% { transform: translate(1px, 1px) rotate(1deg); }
  62.6% { transform: translate(0, 1px) rotate(0); }
  81.4% { transform: translate(1px, 0) rotate(-1deg); }
}

@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}

@keyframes swing {
  0% { transform: translateX(-2em) rotate(22deg); }
  100% { transform: translateX(2em) rotate(-22deg); }
}

@keyframes launching-obake {
  0% { transform: translate(0) scale(1); animation-timing-function: cubic-bezier(0.57, 0, 0.65, 1); }
  85%, 87% { transform: translate(-6%, 15%) scale(0.6); animation-timing-function: cubic-bezier(0.06, 0.96, 1, 1); }
  88% { filter: blur(0); opacity: 1; }
  100% { transform: translate(15%, -67%) scale(6); filter: blur(32px); opacity: 0; }
}

@keyframes launching {
  0% { transform: translate(0); }
  100% { transform: translateY(-106%); }
}

@keyframes rise-2 {
  100% { transform: translateY(-72%); }
}

@keyframes rise {
  0% { transform: translate(0, 77%) rotate3d(0, 0, 0, 0) scale(1.5); }
  27%, 57% { transform: translate(0, 22%) rotate3d(0, 0, 0, 0) scale(1.5); animation-timing-function: cubic-bezier(0.87, 0.04, 0.93, 0.47); }
  100% { transform: translate(33%, -70%) rotate3d(0, 1, 0.7, 62deg) scale(0.3); }
}

@keyframes rise-3 {
  0% { transform: translate(0, 77%) rotate3d(0, 0, 0, 0) scale(1.5); }
  27%, 50% { transform: translate(0, 22%) rotate3d(0, 0, 0, 0) scale(1.5); animation-timing-function: cubic-bezier(0.87, 0.04, 0.93, 0.47); }
  100% { transform: translate(-33%, -77%) rotate3d(0, 1, 0.7, -62deg) scale(0.3); }
}

@keyframes rotating-run {
  0% { transform: translateY(-41%) scale(0.2) rotate(0); animation-timing-function: cubic-bezier(0.76, 0, 0.4, 1); }
  50%, 61% { transform: translateY(-61%) scale(0.9) rotate(3600deg); }
  62.4%, 69% { transform: translateY(-64%) scale(0.9, 1); animation-timing-function: cubic-bezier(0.18, 1.02, 0.9, 1); }
  78%, 82% { transform: translateY(-41%) scale(0.2) rotate(0); animation-timing-function: ease-in-out; }
  100% { transform: translateY(-41%) scale(0.2) rotate(45deg); }
}

@keyframes rotating {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes expansion-and-contraction {
  0% { transform: scale(0.85); }
  100% { transform: scale(1); }
}

@keyframes vertical-stretch {
  0%, 100% { transform: scale(1, 0); }
  20% { opacity: 1; }
  50% { transform: scale(1); }
  95% { opacity: 1; animation-timing-function: ease; }
  100% { opacity: 0; }
}

@keyframes scaleing {
  0%, 30%, 100% { transform: scale(0); opacity: 0; }
  31%, 96% { opacity: 1; }
  33% { transform: scale(1.25); }
  35%, 95% { transform: scale(1); }
}

@keyframes perspective-change {
  0% { transform: translate(12%, -49%) scale(1.3); }
  100% { transform: translate(0) scale(1.03); }
}

@keyframes swaying-in-the-wind {
  0%, 100% { transform: translate(0) scale(1.03); }
  23% { transform: translate(-2.16%, -2.16%) scale(1.08); }
  46% { transform: translate(0.83%, 0.5%) scale(1.03); }
  69% { transform: translate(-5%, 2.5%) scale(1.11); }
}

@keyframes swaying-in-the-wind-mascot {
  0%, 100% { transform: translate(0) scale(1.03); }
  23% { transform: translate(-13px, -13px) scale(1.08); }
  46% { transform: translate(5px, 3px) scale(1.03); }
  69% { transform: translate(-30px, 15px) scale(1.1); }
}

@keyframes giant-slalom {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes fly-around-2 {
  0% { offset-distance: 0%; }
  50%, 60% { opacity: 1; }
  100% { offset-distance: 100%; }
}

@keyframes fly-around-3 {
  0% { offset-distance: 100%; }
  50%, 60% { opacity: 1; }
  100% { offset-distance: 0%; }
}

@keyframes fly-around-4 {
  0% { offset-distance: 100%; transform: scale(0.3); opacity: 0; }
  20% { opacity: 0.3; }
  70% { opacity: 1; }
  100% { offset-distance: 0%; opacity: 0; transform: scale(2.5); }
}

@keyframes fly-around-5 {
  0% { offset-distance: 0%; transform: scale(0.3); opacity: 0; }
  20% { opacity: 0.3; }
  70% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; transform: scale(2.5); }
}

@keyframes jiggle {
  38%, 52% { transform: scale(1, 1); }
  40% { transform: scale(1.1, 0.9); }
  46% { transform: scale(0.9, 1.1) translate(0, -11%); }
  49% { transform: scale(1, 1) translate(0, -6%); }
}

@keyframes jumping-10 {
  0%, 42.7% { transform: translate(0) scale(1); animation-timing-function: ease-in; }
  53.9%, 54.1% { transform: translateY(0.6px) scale(1.16, 0.7); }
  59.1% { transform: translateY(-30px) scale(0.87, 1.23); animation-timing-function: ease-in; }
  62.1%, 70.2%, 78.5%, 86.6% { transform: translate(0) scale(1); animation-timing-function: ease-out; }
  63%, 63.1%, 71.1%, 71.4%, 79.4%, 79.5% { transform: translateY(0.6px) scale(1.2, 0.7); }
  67.5%, 75.8%, 83.9% { transform: translateY(-30px) scale(0.87, 1.2); animation-timing-function: ease-in; }
  88%, 96% { transform: translateY(0) scale(1.05, 0.9); animation-timing-function: ease-in-out; }
  100% { transform: translate(0) scale(1); }
}

@keyframes flexibility-2 {
  0% { transform: scale(1, 0); }
  70% { opacity: 1; }
  100% { transform: scale(1, 1); opacity: 1; }
}

@keyframes flexibility {
  0% { transform: scale(0, 1); }
  70% { opacity: 1; }
  100% { transform: scale(1, 1); opacity: 1; }
}

@keyframes pointer-events {
  0%, 100% { pointer-events: none; }
}

@keyframes pointer-events-on {
  0%, 100% { pointer-events: auto; }
}

@keyframes ripples-spread {
  0% { opacity: 0; transform: scale(0.6); }
  10% { opacity: 1; }
  20% { filter: blur(0); }
  100% { filter: blur(3px); opacity: 0; transform: scale(2); }
}

@keyframes mascot-third-son-hiding {
  0% { transform: translateX(-50%) rotate(180deg); }
  100% { transform: translate(-50%, -25%) rotate(180deg); }
}

@keyframes fade-in-out-img {
  0%, 100% { opacity: 1; }
  30%, 70% { opacity: 0; }
}

@keyframes fade-up {
  0% { transform: translateY(30px); }
  90% { transform: translate(0); }
  100% { opacity: 1; }
}

@keyframes fade-up-jump {
  0% { transform: translateY(33px); opacity: 0; }
  90%, 100% { opacity: 1; }
}

@keyframes fade-down {
  0% { transform: translateY(-30px); opacity: 0; }
  90%, 100% { opacity: 1; }
}

@keyframes fade-up-l {
  0% { transform: translateY(28px) rotate(-22deg); opacity: 0; }
  100% { transform: translate(0) rotate(-22deg); opacity: 1; }
}

@keyframes fade-up-r {
  0% { transform: translateY(28px) rotate(22deg); opacity: 0; }
  100% { transform: translate(0) rotate(22deg); opacity: 1; }
}

@keyframes suspicious-rotation {
  0% { transform: translateX(0) rotate(0); animation-timing-function: ease-in-out; }
  70%, 75% { transform: translate(4px, 1px) rotate(42deg); }
  78% { transform: translate(0) rotate(-25deg); }
  81% { transform: rotate(20deg); }
  84% { transform: rotate(-15deg); }
  87% { transform: rotate(10deg); }
  90% { transform: rotate(-5deg); }
  93%, 100% { transform: rotate(0); }
  96% { transform: rotate(-2deg); }
}

@keyframes falling-severed-head {
  0%, 100% { transform: translate(0); }
  4.2%, 50% { transform: translateY(50%); }
  54%, 60% { transform: translateY(0) rotate(0); }
  70%, 93% { transform: translateY(0) rotate(19deg); animation-timing-function: linear; }
}

@keyframes fade-in-out {
  0%, 100% { opacity: 0; }
  5%, 95% { opacity: 1; }
}

@keyframes marker-title {
  0% { background-position: 220% 100%; }
  100% { background-position: 0% 100%; }
}

@keyframes hue-rotate {
  from { filter: hue-rotate(0); }
  to { filter: hue-rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0); }
  100% { transform: rotate(359deg); }
}

@keyframes vertical {
  0%, 8%, 16% { transform: translate(0, -3px); }
  4%, 12%, 20% { transform: translate(0, 3px); }
  22%, 100% { transform: translate(0); }
}

@keyframes flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

@keyframes horizontal {
  6%, 18%, 30% { transform: translate(5px, 0); }
  12%, 24%, 36%, 100% { transform: translate(0); }
}

@keyframes wrench {
  10%, 30%, 50% { transform: rotate(-24deg); }
  20%, 40% { transform: rotate(24deg); }
  60%, 100% { transform: rotate(0); }
}

@keyframes float {
  50% { transform: translateY(-6px); }
  100% { transform: translate(0); }
}

@keyframes ring {
  0%, 20%, 100% { transform: rotate(0); }
  2% { transform: rotate(15deg); }
  4%, 12% { transform: rotate(-18deg); }
  6%, 14% { transform: rotate(18deg); }
  8% { transform: rotate(-22deg); }
  10% { transform: rotate(22deg); }
  16% { transform: rotate(-12deg); }
  18% { transform: rotate(12deg); }
}

@keyframes bounce {
  0%, 10%, 20%, 50%, 80%, 100% { transform: translate(0); }
  40%, 60% { transform: translateY(-15px); }
}

@keyframes tada {
  0%, 80%, 100% { transform: translateY(0) scale(1) rotate(0); }
  10%, 20% { transform: translateY(0) scale(0.9) rotate(-8deg); }
  30%, 50%, 70% { transform: translateY(-12%) scale(1.3) rotate(8deg); }
  40%, 60% { transform: translateY(-12%) scale(1.3) rotate(-8deg); }
}

@keyframes jumping {
  0%, 100% { transform: translateY(0) scale(1); }
  12% { transform: translateY(0) scale(1.1, 0.9); }
  52% { transform: translateY(-4.5px) scale(0.9, 1.1); }
  78.6% { transform: translateY(-2.5px) scale(1); }
}

@keyframes jumping-mark {
  0%, 100% { transform: translate(0) scale(1); }
  10% { transform: translate(0) scale(1.15, 0.85); }
  60% { transform: translateY(-0.26em) scale(1); }
}

@keyframes expanding-graph {
  100% { transform: scale(1); }
}

@keyframes expanding-graph-sphere {
  0% { transform: scale(0.8); }
  50% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes slide-fill {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@keyframes fade-out {
  100% { opacity: 0; }
}

@keyframes super-high-speed-rotation {
  0% { transform: translateY(-3.5px) rotate(0); }
  100% { transform: translate(0) rotateY(7200deg); }
}

@keyframes crab {
  0%, 30% { offset-distance: 100%; }
  40%, 60% { offset-distance: 50%; }
  70%, 100% { offset-distance: 0; }
}

@keyframes marker {
  0% { background-position: right -200% bottom; }
  100% { background-position: left 0% bottom; }
}

@keyframes stepline {
  0% { height: 0%; }
  100% { height: calc(100% - 19px); }
}

@keyframes slide-in-r {
  0% { transform: translateX(30px); }
  100% { opacity: 1; }
}

@keyframes slide-in-l {
  0% { transform: translateX(-30px); }
  100% { opacity: 1; }
}

@keyframes fade-in-carousel-a {
  0%, 43% { opacity: 0; transform: perspective(680px) translate(0); }
  100% { opacity: 1; }
}

@keyframes fade-in-a {
  0%, 43% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-in-carousel-bh {
  0%, 39% { opacity: 0; transform: perspective(680px) translate(0); }
  100% { opacity: 1; }
}

@keyframes fade-in-bh {
  0%, 39% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-in-carousel-cg {
  0%, 34% { opacity: 0; transform: perspective(680px) translate(0); }
  100% { opacity: 1; }
}

@keyframes fade-in-cg {
  0%, 34% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-in-carousel-df {
  0%, 25% { opacity: 0; transform: perspective(680px) translate(0); }
  100% { opacity: 1; }
}

@keyframes fade-in-df {
  0%, 25% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-in-carousel-e {
  0%, 30% { opacity: 0; transform: perspective(680px) translate(0); }
  100% { opacity: 1; }
}

@keyframes fade-in-e {
  0%, 15% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes overreaching {
  0.6%, 99.2% { transform: translateY(3.5px) scale(0.85, 1.15); animation-timing-function: cubic-bezier(0.59, 0.03, 1, 1); }
}

@keyframes rotate-while-floating {
  0%, 100% { transform: rotateY(0); }
  50% { transform: translateY(-47px) rotateY(180deg); }
}

@keyframes rotate-while-floating-2 {
  0%, 100% { transform: rotateY(180deg); }
  50% { transform: translateY(-47px) rotateY(0); }
}

@keyframes drooping-swaying-falling {
  0% { transform: translateY(-35px); }
  0.1% { opacity: 0; }
  0.7% { transform: translate(0); }
  1.7% { transform: rotateZ(0); opacity: 1; animation-timing-function: ease-in-out; }
  2.3%, 3.9%, 5.5%, 7.3% { transform: rotateZ(15deg); }
  3.1%, 4.7%, 6.3% { transform: rotateZ(-15deg); }
  8.5%, 10% { transform: translate(0) scale(1) rotateZ(0); animation-timing-function: cubic-bezier(1, 0, 1, 1); }
  12.3% { opacity: 1; }
  14%, 100% { transform: translateY(190px) scale(0.8, 1.7); opacity: 0; }
}

@keyframes shake-the-tail {
  25%, 47.5%, 48.5%, 49.5%, 50.5%, 51.5%, 52.5% { transform: translateX(0) rotateY(0); }
  47%, 48%, 49%, 50%, 51%, 52%, 53%, 75% { transform: translateX(4.8px) rotateY(180deg); }
}

@keyframes big-small {
  0% { transform: scale(1); }
  50% { transform: scale(0.3); }
}

@keyframes pen-light-r {
  0%, 0.85% { transform: translate(0) rotate(-20deg); }
  1.8%, 11.1% { transform: translate(-8px, 6px) rotate(265deg); }
  12%, 12.3%, 17.8% { transform: translate(0) rotate(-20deg); }
  19.1%, 21.3% { transform: translate(-8px, 6px) rotate(265deg); animation-timing-function: ease-in-out; }
  21.8%, 22% { transform: translate(0) rotate(-230deg); }
  22.5%, 25.5%, 52.1%, 64% { transform: translate(0) rotate(-20deg); animation-timing-function: cubic-bezier(0.26, 0.54, 0.68, 1); }
  26.97%, 65.6% { transform: translate(-13px, -32px) rotate(-1102deg); animation-timing-function: cubic-bezier(0.77, 0.1, 1, 1); }
  28.6%, 51.4% { transform: translate(0) rotate(0); }
  67.1%, 69% { transform: translate(0) rotate(-20deg); }
  70%, 71.8% { transform: translate(-8px, 7px) rotate(-96deg); }
  72.3%, 100% { transform: translate(0) rotate(-380deg); }
}

@keyframes pen-light-l {
  0%, 0.85% { transform: translate(0) rotate(20deg); }
  1.8%, 11.1% { transform: translate(-3px, -5px) rotate(-10deg); }
  12%, 17.8%, 72.8%, 100% { transform: translate(0) rotate(20deg); }
  19.1%, 19.4% { transform: translate(-3px, -3px) rotate(-17deg); }
  20.7%, 22.6% { transform: translate(0) rotate(20deg); animation-timing-function: ease-in-out; }
  23.1%, 23.3% { transform: translate(0) rotate(230deg); }
  23.8%, 25.5%, 48.9%, 67.1% { transform: translate(0) rotate(20deg); animation-timing-function: cubic-bezier(0.26, 0.54, 0.68, 1); }
  26.97% { transform: translate(13px, -32px) rotate(1102deg); animation-timing-function: cubic-bezier(0.77, 0.1, 1, 1); }
  28.6%, 46.6% { transform: translate(0) rotate(0); }
  47.8%, 48.06%, 48.32% { transform: translate(4px, -0.5px) rotate(45deg); }
  47.93%, 48.19% { transform: translate(-0.5px, -2.5px) rotate(5deg); }
  67.9%, 69% { transform: translate(0) rotate(-340deg); }
  70%, 72.2% { transform: translate(8px, 7px) rotate(-263deg); }
}

@keyframes wave-hands-l {
  0% { transform: rotate(0); animation-timing-function: ease-in-out; }
  0.7%, 0.85% { transform: rotate(2deg); animation-timing-function: ease-in-out; }
  1.8%, 11.1% { transform: rotate(-29deg); animation-timing-function: cubic-bezier(0.52, 0.11, 0.58, 1); }
  12%, 12.3%, 13.9%, 22%, 23.6%, 25.2%, 32.6%, 33.4%, 35%, 38.1%, 40.4%, 41.2%, 43.5%, 44.3%, 46.6%, 48.9%, 51.4%, 61.4% { transform: rotate(0); }
  12.7%, 13.5%, 22.4%, 23.2% { transform: rotate(10deg); }
  13.1%, 22.8% { transform: rotate(-5deg); }
  16% { transform: rotate(-13deg); }
  17.8% { transform: rotate(3deg); }
  19.1%, 19.4% { transform: rotate(-22deg); }
  20.7%, 21.3% { transform: rotate(6deg); animation-timing-function: ease-in-out; }
  25.8%, 28.7% { transform: rotate(-24deg); }
  30.7%, 31.8%, 52.1%, 53.5%, 54.9%, 56.3%, 57.7%, 59.1%, 60.5% { transform: rotate(4deg); }
  32.2%, 33% { transform: rotate(-12deg); }
  36%, 39.1%, 42.2%, 45.3% { transform: rotate(-4deg); }
  36.5%, 39.6%, 42.7%, 45.8% { transform: rotate(-25deg); }
  47.8%, 48.3% { transform: rotate(-26deg); animation-timing-function: ease-in-out; }
  52.8%, 54.2%, 55.6%, 57%, 58.4%, 59.8% { transform: rotate(-22deg); }
}

@keyframes wave-hands-r {
  0% { transform: rotate(0); animation-timing-function: ease-in-out; }
  0.7%, 0.85% { transform: rotate(-2deg); animation-timing-function: ease-in-out; }
  1.8%, 11.1% { transform: rotate(-7deg); animation-timing-function: cubic-bezier(0.52, 0.11, 0.58, 1); }
  12%, 12.3%, 13.9%, 22%, 23.6%, 25.2%, 34.2%, 35%, 38.1%, 40.4%, 41.2%, 43.5%, 44.3%, 46.6%, 51.4%, 61.4%, 63.7%, 67.2%, 100% { transform: rotate(0); }
  12.7%, 13.5%, 22.4%, 23.2% { transform: rotate(-10deg); }
  13.1%, 22.8% { transform: rotate(5deg); }
  16% { transform: rotate(-3deg); }
  17.8% { transform: rotate(13deg); }
  19.1%, 19.4% { transform: rotate(-6deg); }
  20.7%, 21.3% { transform: rotate(17deg); animation-timing-function: ease-in-out; }
  25.8%, 28.7% { transform: rotate(24deg); }
  30.7%, 33.4%, 52.8%, 54.2%, 55.6%, 57%, 58.4%, 59.8% { transform: rotate(-4deg); }
  33.8%, 34.6% { transform: rotate(12deg); }
  36%, 39.1%, 42.2%, 45.3% { transform: rotate(15deg); }
  36.5%, 39.6%, 42.7%, 45.8% { transform: rotate(25deg); }
  52.1%, 53.5%, 54.9%, 56.3%, 57.7%, 59.1%, 60.5% { transform: rotate(22deg); }
  64.3%, 66.6% { transform: rotate(25deg); animation-timing-function: ease-in-out; }
}

@keyframes face-second-son {
  7.1%, 8.3%, 39%, 44%, 47%, 51.4%, 61.4%, 100% { opacity: 1; }
  7.11%, 8.29%, 39.01%, 43.99%, 51.41%, 61.39% { opacity: 0; }
  36%, 47%, 51.4% { transform: rotate(0) skew(0); }
  37%, 39%, 45% { transform: rotate3d(1, 1, 1, 5deg) skew(1deg, 1deg); }
  38%, 44%, 46% { transform: rotate3d(1, 1, 1, -5deg) skew(-1deg, -1deg); }
}

@keyframes face-shake-second-son {
  0%, 7.09%, 8.31%, 38.99%, 44.01%, 51.39%, 61.41%, 100% { opacity: 0; }
  7.1%, 8.3%, 39%, 44%, 51.4%, 61.4% { opacity: 1; }
  7.1%, 8.3%, 51.2%, 51.4%, 61.4% { transform: rotate(0) skew(0); }
  7.5% { transform: rotate(-7deg); }
  7.9% { transform: rotate(7deg); }
  39%, 41%, 43% { transform: rotate3d(1, 1, 1, 5deg) skew(1deg, 1deg); }
  40%, 42%, 44% { transform: rotate3d(1, 1, 1, -5deg) skew(-1deg, -1deg); }
  52.1%, 53.5%, 54.9%, 56.3%, 57.7%, 59.1%, 60.5% { transform: rotate3d(1, 1, 1, -10deg) skew(-1.5deg, -1.5deg); }
  52.8%, 54.2%, 55.6%, 57%, 58.4%, 59.8% { transform: rotate3d(1, 1, 1, 10deg) skew(1.5deg, 1.5deg); }
}

@keyframes happy-dance {
  0% { transform: translate(0) rotate(0) scale(1); animation-timing-function: ease-in-out; }
  0.7%, 0.85% { transform: translate(0) rotate(0) scale(1.02, 0.93); animation-timing-function: ease-in-out; }
  1.8%, 11.1% { transform: translate(-4.2px, -3px) rotate(18deg) scale(0.98, 1.05); animation-timing-function: cubic-bezier(0.52, 0.11, 0.58, 1); }  
  12%, 12.3%, 72.8% { transform: translate(0) rotate(0) scale(1); animation-timing-function: linear; }  
  12.7%, 13.5%, 47.8%, 48.6%, 73.2%, 74% { transform: translateY(-1.5px); animation-timing-function: linear; }
  13.1%, 48.2%, 73.6% { transform: translate(0); animation-timing-function: linear; }  
  13.9% { transform: translate(0) rotate(0) skew(0); }
  16% { transform: translate(0, 0.5px) rotate(3.5deg) skew(-1deg, -1deg); }
  17.8% { transform: translate(0, 0.5px) rotate(-3.5deg) skew(1deg, 1deg); }
  19.1%, 19.4% { transform: translate(28px, 0.5px) rotate(4deg) skew(-1deg, -1deg); } 
  20.6%, 21.15% { transform: translate(-50.5px, 0.5px) rotate(-4deg) skew(1deg, 1deg); animation-timing-function: ease-in-out; }
  22% { transform: translate(-50.5px, 0.5px) rotate(0) skew(0); animation-timing-function: linear; }
  22.4%, 23.2% { transform: translate(-50.5px, -1.5px); animation-timing-function: linear; }
  22.8% { transform: translate(-50.5px, 0); animation-timing-function: linear; }
  23.6%, 29% { transform: translate(-50.5px, 0) rotate(0); }  
  31%, 31.8% { transform: translate(0) rotateY(360deg); animation-timing-function: linear; }
  31.4%, 32.2% { transform: translateY(-1.5px) rotateY(360deg); animation-timing-function: linear; }
  32.6% { transform: translate(0) rotateY(360deg); }
  35% { transform: translate(0) rotateY(360deg); animation-timing-function: ease-in-out; }  
  36%, 42.2% { transform: translate(-2px, -2px) rotate(12deg); }
  36.5%, 42.7% { transform: translate(-2px, -7px) rotate(12deg); animation-timing-function: ease-in; }
  37.3%, 43.5% { transform: translate(-2px, -2px) rotate(12deg); animation-timing-function: ease-out; }
  38.1%, 44.3% { transform: translate(0) rotate(0); animation-timing-function: ease-in-out; }  
  39.1%, 45.3% { transform: translate(2px, -2px) rotate(-12deg); }
  39.6%, 45.8% { transform: translate(2px, -7px) rotate(-12deg); animation-timing-function: ease-in; }
  40.4%, 46.6% { transform: translate(2px, -2px) rotate(-12deg); animation-timing-function: ease-out; }  
  41.2% { transform: translate(0) rotate(0); animation-timing-function: ease-out; }
  47.4% { transform: translate(0) rotate(0); animation-timing-function: linear; }
  49% { transform: translate(0) rotate(0) scale(1); }  
  51.2%, 61.5% { transform: translateY(17px) rotateY(360deg) scale(1.1); animation-timing-function: ease-in; }
  62% { transform: translateY(7px) rotateY(360deg) scale(1.1); animation-timing-function: ease-in-out; }
  62.61%, 70.6% { transform: translateY(17px) rotateY(360deg) scale(1.1); animation-timing-function: cubic-bezier(0.11, 0.4, 0.2, 1); }  
  74.4% { transform: translate(0); }
}

@keyframes fly-around {
  0% { offset-distance: 0%; transform: rotate(150deg); }
  10%, 11.1%, 12.2% { transform: scale(1) rotate(150deg); }
  10.2%, 11.3%, 12.4% { transform: scale(1, 0.85) rotate(150deg); }
  10.8%, 11.9%, 13% { transform: scale(0.15, 1) translateY(1px) rotate(150deg); }
  11%, 12.1%, 13.2% { transform: scale(1) translateY(0) rotate(150deg); }
  49% { transform: rotate(150deg) rotateY(0); }
  50% { offset-distance: 100%; }
  51% { transform: rotate(187deg) rotateY(180deg); }
  60%, 61.1%, 62.2% { transform: scale(1) rotate(187deg) rotateY(180deg); }
  60.2%, 61.3%, 62.4% { transform: scale(1, 0.85) rotate(187deg) rotateY(180deg); }
  60.8%, 61.9%, 63% { transform: scale(0.15, 1) translateY(1px) rotate(187deg) rotateY(180deg); }
  61%, 62.1%, 63.2% { transform: scale(1) translateY(0) rotate(187deg) rotateY(180deg); }
  98% { offset-distance: 0%; transform: rotate(187deg) rotateY(180deg); }
}

@keyframes boing-boing {
  0% { transform: translate(0); animation-timing-function: ease-in; }
  11.25% { transform: translate(0) scale(1.15, 0.85); }
  16.25% { transform: translateY(-23%) scale(0.85, 1.15); animation-timing-function: ease-in; }
  20% { transform: translateY(-6%) scale(0.85, 1.15); animation-timing-function: cubic-bezier(0, 0.27, 0.58, 1); }
  22.5% { transform: translate(0) scale(1.15, 0.85); animation-timing-function: ease-in-out; }
  24.4%, 28.4% { transform: translate(0) rotateY(0); animation-timing-function: cubic-bezier(0.4, 0.15, 0.21, 1.7); }
  35.9%, 67.1% { transform: translate(0) rotateY(180deg); animation-timing-function: cubic-bezier(0.67, 0.16, 0.58, 1); }
  75.1%, 100% { transform: translate(0) rotateY(0); }
}

@keyframes leaves-that-have-fallen-off {
  0% { transform: translate(105%, 45%) rotate3d(0.2, 0.6, 0.2, 0) scale(1); }
  20% { transform: translate(-300%, -160%) rotate3d(0.2, 0.6, 0.2, 1080deg) scale(1); animation-timing-function: ease-in-out; }
  25%, 58% { opacity: 1; }
  37.5% { transform: translate(-370%, -58%) rotate3d(0, 0, 1, 1145deg) scale(1); animation-timing-function: ease-in-out; }
  49%, 53% { transform: translate(-300%, -10%) rotate3d(0, 0, 1, 1110deg) scale(1); height: 22px; }
  56% { height: 60px; }
  65% { opacity: 0; height: 30px; }
  80% { transform: translate(230%, -70%) rotate3d(0.2, 0.6, 0.2, 0deg) scale(0.6); }
}

@keyframes fall {
  0%, 63% { transform: translateY(-60px); opacity: 0; }
  64% { opacity: 1; }	
  100% { transform: translateY(65px); opacity: 1; }
}

@keyframes stalking {
  0%, 36% { transform: translateX(30%) rotate(-60deg) scale(0.3); opacity: 1; }
  42% { transform: translateX(-30%) rotate(20deg) scale(0.3); }
  48% { transform: translateX(30%) rotate(-57deg) scale(0.3); }
  54.8%, 56% { transform: translate(0) rotate(0) scale(0.3); animation-timing-function: cubic-bezier(0.12, 0.58, 0.31, 1); }
  60.2%, 61% { transform: translate(0, -70%) rotate(1080deg) scale(1); animation-timing-function: cubic-bezier(0.82, 0, 0.93, 0.7); }
  63.2% { transform: translate(0, -36%) rotate(1080deg); animation-timing-function: cubic-bezier(0.38, 0.23, 0.7, 1); }
  72.5% { transform: translate(-23%, -36%) rotate(1080deg) scale(1); }
  73%, 79% { transform: translate(-23%, -31%) rotate(1080deg) scale(1, 0.9); }
  79.5%, 80% { transform: translate(-11%, -31%) rotate(1091deg) scale(1, 0.9); }
  80.5%, 81% { transform: translate(200%, -31%) rotate(1095deg) scale(1, 0.9); }
  81.5%, 82% { transform: translate(100%, -35%) rotate(1030deg) scale(1, 0.9); }
  82.5%, 100% { transform: translate(200%, -31%) rotate(1100deg) scale(1, 0.9); opacity: 1; }
}

@keyframes estrus-period {
  0%, 74.6%, 75.8% { transform: scale(1); }
  75.2% { transform: scale(1.2); }
  76.4% { transform: scale(1.3); }
  77% { transform: scale(1); filter: hue-rotate(0); animation-timing-function: ease-in-out; }
  77.6%, 100% { transform: scale(1.5); filter: hue-rotate(200deg); }
}

@keyframes quick-change-of-clothes {
  0% { transform: translate(0) scale(1) rotateY(0); animation-timing-function: ease-in-out; opacity: 1; }
  4% { transform: translate(0) scale(1.1, 0.88) rotateY(0); }
  5%, 45%, 69.5%, 100% { opacity: 1; }
  5.01%, 44.99% { opacity: 0; }
  8%, 43.99% { transform: translateY(-14px) scale(0.95, 1.05) rotateY(360deg); animation-timing-function: ease-in; }
  44% { transform: translate(0) scale(1.1, 0.88) rotateY(1800deg); }
  48% { transform: translateY(-14px) scale(0.95, 1.05) rotateY(2160deg); animation-timing-function: ease-in; }
  50% { transform: translate(0) scale(1) rotateY(2160deg); animation-timing-function: ease-out; }
  51.8% { transform: translate(0) scale(1.1, 0.88) rotateY(2160deg); animation-timing-function: ease-in-out; }
  54%, 56% { transform: translate(0) scale(1) rotateY(2160deg); animation-timing-function: cubic-bezier(0.4, 0.15, 0.21, 1.7); }
  61%, 66% { transform: translate(0) scale(1) rotateY(1980deg); animation-timing-function: cubic-bezier(0.4, 0.15, 0.27, 0.99); }
  90%, 100% { transform: translate(0) scale(1) rotateY(0) }
}

@keyframes quick-change-of-clothes-2 {
  0%, 4% { transform: translate(0) scale(1.1, 0.88) rotateY(0); }
  4.99%, 13.01% { opacity: 0; }
  5%, 13% { opacity: 1; }
  8% { transform: translateY(-14px) scale(0.95, 1.05) rotateY(360deg); animation-timing-function: ease-in; }
  10% { transform: translate(0) scale(1) rotateY(360deg); animation-timing-function: ease-out; }
  11.8% { transform: translate(0) scale(1.1, 0.88) rotateY(360deg); }
  16% { transform: translateY(-14px) scale(0.95, 1.05) rotateY(720deg); }
}

@keyframes quick-change-of-clothes-3 {
  0%, 12% { transform: translate(0) scale(1.1, 0.88) rotateY(360deg); }
  12.99%, 21.01% { opacity: 0; }
  13%, 21% { opacity: 1; }
  16% { transform: translateY(-14px) scale(0.95, 1.05) rotateY(720deg); animation-timing-function: ease-in; }
  18% { transform: translate(0) scale(1) rotateY(720deg); animation-timing-function: ease-out; }
  19.8% { transform: translate(0) scale(1.1, 0.88) rotateY(720deg); }
  24% { transform: translateY(-14px) scale(0.95, 1.05) rotateY(1080deg); }
}

@keyframes quick-change-of-clothes-4 {
  0%, 20% { transform: translate(0) scale(1.1, 0.88) rotateY(720deg); }
  20.99%, 29.01% { opacity: 0; }
  21%, 29% { opacity: 1; }
  24% { transform: translateY(-14px) scale(0.95, 1.05) rotateY(1080deg); animation-timing-function: ease-in; }
  26% { transform: translate(0) scale(1) rotateY(1080deg); animation-timing-function: ease-out; }
  27.8% { transform: translate(0) scale(1.1, 0.88) rotateY(1080deg); }
  32% { transform: translateY(-14px) scale(0.95, 1.05) rotateY(1440deg); }
}

@keyframes quick-change-of-clothes-5 {
  0%, 28% { transform: translate(0) scale(1.1, 0.88) rotateY(1080deg); }
  28.99%, 37.01% { opacity: 0; }
  29%, 37% { opacity: 1; }
  32% { transform: translateY(-14px) scale(0.95, 1.05) rotateY(1440deg); animation-timing-function: ease-in; }
  34% { transform: translate(0) scale(1) rotateY(1440deg); animation-timing-function: ease-out; }
  35.8% { transform: translate(0) scale(1.1, 0.88) rotateY(1440deg); }
  40% { transform: translateY(-14px) scale(0.95, 1.05) rotateY(1800deg); }
}

@keyframes quick-change-of-clothes-6 {
  0%, 36% { transform: translate(0) scale(1.1, 0.88) rotateY(1440deg); }
  36.99%, 45.01% { opacity: 0; }
  37%, 45% { opacity: 1; }
  40% { transform: translateY(-14px) scale(0.95, 1.05) rotateY(1800deg); animation-timing-function: ease-in; }
  42% { transform: translate(0) scale(1) rotateY(1800deg); animation-timing-function: ease-out; }
  43.8% { transform: translate(0) scale(1.1, 0.88) rotateY(1800deg); }
  48% { transform: translateY(-14px) scale(0.95, 1.05) rotateY(2160deg); }
}

@keyframes zoom-in-down {
  0% { transform: scale3d(0, 0, 0) translate3d(0, -500%, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  50% { transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 70%, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
  100% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

@keyframes ac-main-open {
  0% { transform: translateY(-25px); filter: blur(3px); }
  100% { transform: translate(0); opacity: 1; }
}

@keyframes fade-in-ac-q {
  0%, 50% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes float-and-rotate {
  0%, 19% { transform: translate(0) rotateY(0) scale(1.25); }
  41% { transform: translateY(-4px) rotateY(0) scale(1.35); }
  49%, 52% { transform: translateY(-4px) rotateY(360deg) scale(1.35); }
  75%, 100% { transform: translate(0) rotateY(360deg) scale(1.25); }
}








@media (min-width: 768px) {
@keyframes popping-out-hearts {
    0% {
      transform: translate(0, calc(-50% + 27px)) rotate(-60deg) scale(0.4);
      z-index: 6;
    }
    10% {
      height: 8vw;
      max-height: 80px;
    }
    27% {
      opacity: 1;
    }
    50% {
      height: 5vw;
      max-height: 60px;
      opacity: 1;
    }
    100% {
      transform: translate(233%, calc(-50% - 477px)) rotate(260deg) scale(1);
      z-index: 6;
      opacity: 0;
      height: 11vw;
      max-height: 300px;
    }
  }
}

@media (min-width: 880px) {
  @keyframes launching-rocket {
    0% {
      transform: translate(0);
    }
    100% {
      transform: translate(67%, -368px);
    }
  }
}


@media (max-width: 767px) {
@keyframes swaying-in-the-wind-mascot {
    0%,
    100% {
      transform: translate(0) scale(1.03);
    }
    23% {
      transform: translate(-6.5px, -6.5px) scale(1.08);
    }
    46% {
      transform: translate(2.5px, 1.5px) scale(1.03);
    }
    69% {
      transform: translate(-15px, 7.5px) scale(1.1);
    }
  }
}


@media (max-width: 480px) {
  :root {
    --ham-line-w-min: 26%;
    --ham-line-shift: 10px;
  }/* Hamburger Motion Tokens */
}