/* -----------------------------------------------------------------
   Role: アーカイブページ専用 非同期遅延CSS 
   ----------------------------------------------------------------- */

[class^="fi-tr-"],
[class*=" fi-tr-"],
.swiper-button-prev::after,
.swiper-button-next::after {
    display: inline-block;
    font-family: "uicons-thin-rounded";
    font-style: normal;
}

a:active,
a:hover {
    outline: 0
}

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

li.cat-item.cat-item-1 {
    display: none;
}

.widget li a::after {
    color: var(--c-accent)
}

/* =========================================================
   12. Modal (Airport Map)
========================================================= */
#km-auto-modal-overlay,
.index-modal {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#km-auto-modal-overlay {
    z-index: 2147483647;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.26s ease, visibility 0.26s ease;
    backdrop-filter: blur(4px);
}

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

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

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

/* =========================================================
   19. Footer Styles
========================================================= */

#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);
}



.swiper-pagination-fraction {
    top: 0.5em;
    width: 100%;
    font-size: 0.9em;
    font-weight: 400;
    position: absolute;
    text-align: center;
}

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

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

/* --- Scrollbar --- */
.swiper-scrollbar {
    position: absolute;
    z-index: 50;
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    background: transparent !important;
}

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

.swiper-horizontal>.swiper-scrollbar {
    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,
.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none;
}

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

.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 / TOC
========================================================= */

#page-top.is-visible {
    transform: translateY(0);
    will-change: transform;
}

/* =========================================================
   26. Generic Modal Area
========================================================= */

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;
}

.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;
}

.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;
}

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

}

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

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

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

.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-button-next:not(.mobile .swiper-button-next):hover {
    transform: translateY(-50%)translateX(-6px);
}

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

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

.mobile .swiper-button-prev:active {
    transform: translateY(-50%)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;
}

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

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

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

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

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

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

.animation-3 .header-third-son-left-hand {
    animation: header-third-son-left-hand 20s 2.2s infinite;
}

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








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

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

/* =========================================================
   48. Overflow Sign / Color Picker
========================================================= */
.footer-cloud,
.sea,
.seaside-scenery div,
.site-mascot-third-son-silhouette,
.ribbon span::before,
.ribbon span::after {
    position: absolute;
}

.site-mascot-third-son-silhouette {
    background-repeat: no-repeat;
}

/* =========================================================
   54. a.anchor
========================================================= */

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

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

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

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

/* =========================================================
   72. Footer Scene
========================================================= */
.footer {
    padding-bottom: 20px;
    background-image: linear-gradient(180deg, #60c2ff 0%, #fff 100%);
}

.footer:not(.page-id-979 .footer) {
    box-shadow: 0 -16px 16px -26.5px #000;
    position: relative;
}

.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;
}

.sandy-beach {
    top: 610px;
    width: 100vw;
}

.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 {
    width: 100%;
    height: 100%;
    transform: translateY(-8px);
}

.sea.n1 {
    background: #204d69;
    top: 84%;
}

.sea.n2 {
    background: #46baff;
    top: 85%;
}

/* =========================================================
   75. Recommended Articles
========================================================= */

.recommended-articles-container.animation .articles-date,
.recommended-articles-container.animation .article-title {
    opacity: 1;
    transition: opacity 0.5s 10.7s;
}


/* =========================================================
   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;
}

.mascot {
    z-index: 1;
}

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

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

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

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

.site-mascot-third-son-silhouette {
    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");
}

/* =========================================================
   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;
}

/* =========================================================
   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: center no-repeat;
    transition: 0.3s 0.02s box-shadow ease-in-out, 0.3s 0.02s transform ease-in-out;
}

/* =========================================================
   修正後：星評価アニメーション（GPU完全オフロード版）
========================================================= */
.carousel .third-son .front {
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/third-son-of-the-site-mascot.svg");
}

/* =========================================================
   83. Page Top
========================================================= */

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

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

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

.top,
.buhi-n {
    top: 8.5%;
    transition: opacity 0.02s 1.1s;
}

html:not(.mobile) #page-top:hover .top,
.mobile #page-top:active .top {
    opacity: 0;
    transition-delay: 0s;
}

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

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

.is-flying {
    animation: pegasus-takeoff 1.6s cubic-bezier(0.12, 0.53, 0.55, 0.95);
    pointer-events: none;
    will-change: transform;
}

#page-top:focus-visible,
.js-modal-open:focus-visible {
    outline: 2px solid #6ac6ff;
    outline-offset: 2px
}

.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;
}

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

.c-red {
    color: #e4112e;
}

.modal-box figcaption {
    font-weight: 400;
}

/* =========================================================
   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;
}

.gallery-text {
    overflow: auto;
    background: #fff;
}

.modal-box.text-only {
    padding: 1.3em;
}

.text-only .modal-text {
    display: grid;
    align-items: center;
    min-height: 6.5em;
    max-height: 50vh;
    margin: 0;
    padding: 1em;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 -6px 16px -11px #00000030;
}

.footer a:hover {
    color: #fff;
}

/* =========================================================
   93. Footer Carousel / Mascot Introduction
========================================================= */
.introduction-of-site-mascot {
    width: 187px;
    height: 250px;
    margin: 165px auto 278px;
    perspective: 970px;
    /* ▼ 追加：外の世界（海や木）との計算を物理的に遮断する ▼ */
    isolation: isolate;
    contain: layout size;
    /* 親のサイズを固定し、計算をこの箱に閉じ込める */
}

/* 巨大SVG要素が3D空間の計算に混ざらないようにする */
.palm-tree img,
.footer-cloud img {
    pointer-events: none;
}


#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);
    will-change: transform;

    /* ▼ 追加：ブラウザの余計なイベント監視を止めて、描画に専念させる ▼ */
    touch-action: manipulation;
    pointer-events: auto;
    /* ボタン以外の不要なイベント反応を絞るならJSと併用 */
}

.carousel .item .notepad,
.carousel .item .mascot {
    /* ▼ 3D回転による「文字の滲み」を防ぎ、GPUの負担を最小化する ▼ */
    backface-visibility: visible;
    /* 背面は見せる */
    transform: translateZ(1px);
    /* 1ピクセルだけ浮かせて、親パネルの表面に張り付かせる */
}

.carousel-title,
#footer-top .fi-tr-caret-down {
    position: absolute;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -30px);
    transition: transform 1.8s cubic-bezier(.24, .29, .16, 1), opacity 1.8s cubic-bezier(.24, .29, .16, 1)
}

.carousel-title {
    top: 3.6%;
    width: 177px
}

.single .carousel .item {
    opacity: 0
}

.carousel .item {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 285px;
    border-radius: 10px;
    background: linear-gradient(#fcfcfc, #fafafa);
    contain: layout paint;
    -webkit-transform-style: flat;
    /* パネルの中身（子要素）だけは3D計算させない */
    transform-style: flat;
}

.carousel .mascot *,
.carousel .anime-container * {
    /* 動く小石や尻尾、鼻水、すべてをGPUで合成処理させる */
    transform: translate3d(0, 0, 0);
}

/* --- カルーセル操作ボタン全体の設定 --- */
.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: var(--c-accent);
    box-shadow: 0 3.5px 0 #3f687f;
    font-size: 13.4px;
    transition: color 0.2s 0.03s ease-in-out, transform 0.15s ease-out, box-shadow ease-in-out 0.15s;
}

.operation-buttons button:hover {
    color: #fff;
}

.operation-buttons button:active {
    transform: translateY(1.5px);
    box-shadow: 0 2px 0 #3f687f;
}

.operation-buttons span {
    display: flex;
    place-content: center;
    place-items: center;
    width: 77px;
    height: 38px;
    padding-top: 1.5px;
    font-weight: 400;
    user-select: none;
}

.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";
}

.item.a {
    transform: rotateY(0) translateZ(330px);
}

.item.b {
    transform: rotateY(45deg) translateZ(330px);
}

.item.c {
    transform: rotateY(90deg) translateZ(330px);
}

.item.d {
    overflow: hidden;
    transform: rotateY(135deg) translateZ(330px);
}

.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);
}

.switching {
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.carousel .background {
    position: absolute;
    top: 5.5px;
    width: 92%;
    height: 179px;
    border-radius: 34% 70% 70% 30% / 35% 39% 64% 67%;
    background-position: 186px 7px;
    background-image: url(https://self-traveling-thailand.jp/wp-content/uploads/check-pattern.svg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel .repletion {
    position: absolute;
    bottom: -21px;
    font-size: 10px;
    opacity: 0.72;
}

.carousel .commentary {
    position: absolute;
    top: 2px;
    width: 96%;
    font-weight: 500;
    line-height: 1.63;
    text-align: center;
    text-shadow: 0 0 0 #042234;
}

.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: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 12.3px;
    line-height: 1.73;
    letter-spacing: 0.65px;
    text-align: justify;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

.carousel .mascot,
.carousel .background,
.carousel .notepad {
    /* ▼ 追加：ベクター画像をテクスチャ（平面画像）としてGPUに固定化 ▼ */
    transform: translateZ(0);
}

.item.a span.spacer {
    margin-left: 85px;
}

.item.b span.spacer {
    margin-left: 78px;
}

.item.c span.spacer {
    margin-left: 136px;
}

.item.d span.spacer {
    margin-left: 97px;
}

.item.e span.spacer {
    margin-left: 135px;
}

.item.f span.spacer {
    margin-left: 98px;
}

.item.g span.spacer,
.item.h span.spacer {
    margin-left: 74px;
}

.carousel .third-son,
.carousel .second-son {
    position: relative;
    display: flex;
    justify-content: center;
}

.carousel .third-son .front,
.carousel .third-son .rear {
    top: 34px;
    width: 80px;
    height: 83px;
    background-repeat: no-repeat;
}

.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: url("https://self-traveling-thailand.jp/wp-content/uploads/snot.svg") no-repeat;
    transform-origin: center top;
}

.carousel .shake-the-tail {
    position: absolute;
    top: 67.8px;
    left: 33px;
    width: 8.5px;
    height: 6.5px;
    background: url("https://self-traveling-thailand.jp/wp-content/uploads/third-son-tail.svg") 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), rgb(0 0 0 / 0));
}

.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;
}

.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;
}

.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: rotate(-20deg);
}

.hand.left.pen-light:after {
    right: 0;
    transform: rotate(20deg);
}

.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: url("https://self-traveling-thailand.jp/wp-content/uploads/butterfly.svg") 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: url("https://self-traveling-thailand.jp/wp-content/uploads/pon-chan-the-raccoon-dog.svg") no-repeat;
}

.pon-chan-leaf-pants {
    position: absolute;
    right: -2%;
    bottom: 55.7%;
    z-index: 1;
    width: 22px;
    height: 22px;
    opacity: 0;
    background: url("https://self-traveling-thailand.jp/wp-content/uploads/leaf.svg") no-repeat;
}

.leaf-on-head {
    position: absolute;
    top: 0;
    left: 53.5%;
    z-index: -1;
    width: 26px;
    height: 18px;
    background: url("https://self-traveling-thailand.jp/wp-content/uploads/leaf-on-head.svg") no-repeat;
}

.pon-chan-container {
    display: flex;
    opacity: 0;
    transform: scale(0.3);
}

.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");
}

.search-form {
    margin: 0 0.3em;
    padding: 0.1em 0.5em 0.15em;
    border-radius: 6px;
    font-size: 0.9em;
    background: #ededed;
}

.byline .cat-name,
.footer a,
#footer-top a {
    color: var(--c-text)
}

.fi-tr-graduation-cap::before {
    position: relative
}

.widgettitle {
    margin: 30px 0 15px;
    padding: calc(.5vw + 21px);
    color: var(--c-white);
    font-size: clamp(21.3px, 4.4vw, 27px);
    font-weight: 500;
    letter-spacing: var(--tracking-base);
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/creative-decoration-7.svg");
    background-position: 75% 100%;
    background-size: cover;
    border-radius: var(--radius-widget)
}

.fi-tr-marker::before {
    content: "\ebce"
}

.fi-tr-angle-double-small-down::before {
    content: "\f377"
}

.profile-card .cover-photo span {
    position: absolute;
    color: var(--c-white);
    font-size: 16px;
    letter-spacing: var(--tracking-base)
}

.profile-card figure {
    position: relative;
    z-index: 1
}

.introduction {
    margin: 0.5em 0;
    padding: 0 1em;
    text-align: justify;
    font-size: clamp(1em, 4.1vw, 1.13em);
    line-height: 1.86;
    font-weight: 400
}

.dot {
    position: relative;
    display: inline-flex;
    justify-content: center
}

.dot::before {
    position: absolute;
    top: -.06em;
    width: .2em;
    height: .2em;
    content: "";
    border-radius: 10px;
    background: var(--c-text)
}

.profile-card .dot::before {
    top: .08em
}

.letter-decoration {
    display: block;
    text-align: center;
    font-size: clamp(18.2px, 4.4vw, 21px)
}

.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;
    margin-bottom: 1em;
    font-size: clamp(14px, 3.6vw, 17.2px);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-white) !important;
    border-radius: 5px 5px 4px 4px;
    background: var(--c-dark-3);
    transition: transform 1.2s linear 0.1s, border-radius 1s linear 0.1s;
    gap: 0.06em;
    padding: 0 1.05em;
    height: 3.8em
}

.button-3d-square .fi-tr-angle-double-small-down {
    padding-top: 0.2em;
    width: 0.8em;
}

.fi-tr-running::before {
    content: "\efbd";
}

.button-3d-square:hover {
    transform: rotateX(0);
    border-radius: 5px;
    transition: .35s transform cubic-bezier(0, 0, .48, 1), border-radius 0.3s cubic-bezier(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: var(--c-dark-2);
}

.fi-tr-right::before {
    font-size: .8em
}

.fi-tr-graduation-cap::before {
    padding-right: .15em
}

:is(.cs-6, .cs-7, .cs-9, .cs-10)::before {
    position: relative
}

.cs-6::before {
    top: .17em
}

.cs-7::before {
    top: .13em
}

.cs-9::before {
    top: .03em
}

.cs-10::before {
    top: -.05em
}

.fi-tr-marker.adj::before {
    left: -.13em
}

.fi-tr-zoom-in::before {
    padding-right: 3.5px
}

.time__date::before {
    font-family: uicons-thin-rounded;
    content: "\e002"
}

.time__date.undo::before {
    content: "\edaf"
}

.recommended-articles-container .time__date.undo::before {
    margin-right: 0.25em;
    font-size: 0.9em;
}

:is(.article-header, .recommended-articles-container) .time__date::before {
    left: -1.2em
}

.entry-content {
    position: relative;
    z-index: 0;
    padding: 0 30px
}

.footer-background {
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-top: var(--c-header-stripe) solid 16px;
    background: #93d8ff;
}

.recommended-articles-container {
    position: relative;
    pointer-events: none;
}

.recommended-articles-container :is(.fi-tr-lock, .fi-tr-lock-open) {
    position: absolute;
    top: 41%;
    left: 50%;
    color: var(--c-white)
}

.recommended-articles-container.animation .fi-tr-lock {
    opacity: 0;
    transition: opacity 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 .8s 10.7s forwards;
    transition: opacity 0s 10s, transform .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.6s 0.02s transform cubic-bezier(.4, 0, .51, 1), 0.6s 0.02s opacity cubic-bezier(.4, 0, .51, 1);
}

.recommended-articles-container .n1 img {
    transition: filter 0.5s 0.5s, transform 0.6s 0.1s var(--ease-smooth), opacity 1.2s 0.1s var(--ease-smooth);
    filter: grayscale(0.5);
    transform: scale(1);
}

.recommended-articles-container.animation .n1 img {
    animation: fade-in-out-img 10s 1.2s var(--ease-smooth);
    filter: grayscale(0);
}

.recommended-articles-container img {
    transform: scale(1.25)
}

.recommended-articles-container .n2 img {
    transition: transform 5.3s 1.2s var(--ease-smooth), opacity 3s 3.5s var(--ease-smooth)
}

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

.recommended-articles-container .n3 img {
    transition: transform 5.3s 3.5s var(--ease-smooth), opacity 3s 5.8s var(--ease-smooth)
}

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

.recommended-articles-container .n4 img {
    transition: transform 5.3s 5.8s var(--ease-smooth)
}

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

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

.sidebar :is(.article-title, .articles-date) {
    position: absolute;
    color: var(--c-white);
    opacity: .3;
}

.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 {
    bottom: -1.15em;
    display: -webkit-box;
    overflow: hidden;
    padding: 0 13px 0;
    font-size: 1.04em;
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.sidebar .articles-date {
    bottom: 3.5em;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin-left: 15px;
    letter-spacing: .4px;
}

.sidebar .label {
    padding: 0.05em 0.5em;
    border: 1px solid #ffffffd6;
    border-radius: 2.5px;
    font-size: .88em
}

.contactbutton a:hover::after {
    opacity: 1
}

.fade-up-jump,
.fade-down {
    opacity: 0
}

.ribbon {
    position: absolute;
    top: -7.5px;
    right: -7.5px;
    overflow: hidden
}

.ribbon span {
    position: absolute;
    z-index: 1;
    transform: rotate(45deg);
    background: var(--c-dark-3);
    color: #fff;
    text-align: center;
    display: grid;
    align-content: center;
    height: 2em;
    width: 9em;
    font-size: 1.2em;
    top: 32px;
    left: 25px;
    font-weight: 400;
}

.ribbon span::before,
.ribbon span::after {
    bottom: -5.5px;
    content: "";
    border-top: 6px solid var(--c-dark-2);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent
}

.ribbon span::before {
    left: -1px;
}

.ribbon span::after {
    right: -1px;
}

.widget_categories li.cat-item>a {
    position: relative;
    display: block;
    padding: 0.6em 3em 0.6em 2.5em;
    color: var(--c-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
    transition: .12s color ease-out;
    background-image: linear-gradient(to right, transparent 7px, #0000002e 7px, #0000002e calc(100% - 7px), transparent calc(100% - 7px));
    background-size: 100% 0.5px;
    background-position: bottom;
    background-repeat: no-repeat;
}

.widget_categories li.cat-item:last-child>a {
    background-image: none;
}

.widget_categories li.cat-item>a::before {
    content: "";
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 3px 2px #ffffff0f) drop-shadow(0 -3px 2px #0000000f);
}

.widget_categories ul.children li.cat-item>a::before {
    content: "\ebce";
    font-family: "uicons-thin-rounded";
    width: auto;
    height: auto;
    font-size: 16px;
    left: 1.5em;
}

.widget_categories .cat-item-286>a::before {
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/camera-icon.svg");
}

.widget_categories .cat-item-310>a::before {
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/tour-guide-icon.svg");
}

.widget_categories .cat-item-313>a::before {
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/hotel-icon.svg");
}

.widget_categories .cat-item-322>a::before {
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/tuk-tuk-icon.svg");
}

.widget_categories .cat-item-333>a::before {
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/cooking-icon.svg");
}

.widget_categories .cat-item-342>a::before {
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/ux-icon.svg");
}

.widget_categories .cat-item-352>a::before {
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/rocket-icon.svg");
}

.widget_categories li.cat-item>a::after {
    content: "\e092";
    font-family: "uicons-thin-rounded";
    position: absolute;
    right: 0.6em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    transition: .18s transform ease-out;
}

.widget_categories li.cat-item>a:hover::after {
    transform: translateY(-50%) translateX(4px);
}

.widget_categories ul.children {
    padding-left: 0;
}

.widget_categories ul.children li.cat-item>a {
    font-size: 15px;
    padding: 0.6em 3em 0.6em 3.2em;
    background-image: linear-gradient(to right, transparent 7px, #00000017 7px, #00000017 calc(100% - 7px), transparent calc(100% - 7px));
    background-size: 100% 0.5px;
    background-position: bottom;
    background-repeat: no-repeat;
}

.article a:not(a.anchor) {
    font-weight: 400
}

@media (min-width: 768px) {

    .subnav form input:hover,
    .subnav .contactbutton a:hover {
        background: var(--c-white);
        transition: var(--tr-bg-fast)
    }

    .modal-box {
        width: 50%;
    }

    .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;
    }

    .stone.n2 {
        left: calc(50vw - 352px);
    }

    .nav li ul.sub-menu li {
        position: relative;
    }

    .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 ul.sub-menu {
        left: 100%;
        top: 0;
    }

    .nav li ul.sub-menu li a:hover,
    .nav li ul.sub-menu li:hover>a {
        color: var(--c-menu-text);
    }

    .nav>li>a:after {
        position: absolute;
        top: 94%;
        left: 7.5%;
        width: 70%;
        content: "";
        opacity: 0;
        pointer-events: none;
        filter: blur(7px);
        transform: scale(1) translate(0, 120px) rotate(110deg);
        transform-origin: right;
        transition: transform 1.6s 1s cubic-bezier(0.84, 0, 0.3, 1), filter 1.6s 1s cubic-bezier(0.84, 0, 0.3, 1), opacity 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: transform 0.3s, filter 0.3s, opacity 0.3s;
    }

    .nav li:hover>ul.sub-menu {
        opacity: 1;
        transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
        visibility: visible;
    }

    .nav li ul.sub-menu li a .fi-tr-angle-double-small-right {
        position: absolute;
        right: 4.3%;
        font-size: 1.2em;
    }
}

@media (min-width: 880px) {
    .read-more {
        font-size: 25.3px;
    }

    label,
    .recommended-articles-container {
        cursor: pointer;
    }
}

@media (min-width: 1270px) {
    .widgettitle {
        padding: 1.07em .75em;
        font-size: 20px
    }

    .ribbon {
        width: 107px;
        height: 107px;
    }

    .ribbon span {
        top: 24px;
        left: -14px;
        font-size: 0.98em;
    }

    .ribbon span::before {
        left: 1px;
    }

    .ribbon span::after {
        right: 1px;
    }

    .sidebar .articles-date {
        font-size: 14.5px;
        bottom: 54.5px;
    }

    .sidebar .article-title {
        font-size: 0.9em
    }

    .introduction {
        font-size: 0.93em;
        line-height: 1.76
    }

    .letter-decoration {
        font-size: 16.5px
    }

    .button-3d-square {
        font-size: 15px
    }

    .modal-box {
        width: 60%;
    }

    #scrollfix {
        position: -webkit-sticky;
        position: sticky;
        top: 11.5px;
        z-index: 10;
        width: 100%;
        max-height: calc(100vh - 100px);
    }
}

@media (max-width: 767px) {
    .entry-content {
        padding: 0 1.2em;
    }

    .mean-bar * {
        box-sizing: content-box
    }

    .mean-nav {
        position: relative;
        z-index: 4;
        margin-top: var(--mean-nav-mt);
        contain: layout;
        box-shadow: 0px -6px 16px -12.5px #707070;
    }

    .mean-nav ul:not(ul.sub-menu) {
        margin-bottom: 83px;
        background: var(--c-menu-bg);
    }

    .mean-nav ul li a:hover {
        color: var(--c-menu-text);
    }

    .mean-nav span.gf {
        top: 8px;
        position: absolute;
        font-size: 10px;
        text-transform: uppercase;
        opacity: .8;
        font-weight: 300;
    }

    .modal-box .swiper.gallery img,
    .swiper.gallery img,
    .modal-box img {
        aspect-ratio: 1600 / 990;
    }

    .modal-text {
        max-height: 35vw;
    }

    .entry-content p a {
        transition: color 0.05s;
    }

    .footer-cloud.n1 {
        left: 3%;
        width: 150px;
    }

    .footer-cloud.n2 {
        width: 190px;
    }

    .yasinoki.n1,
    .yasinoki.n2 {
        width: 350px;
        height: 578px;
        margin-top: -10px;
    }

    .yasinoki.n1 {
        left: calc(0.5vw - 140px);
    }

    .yasinoki.n2 {
        right: calc(0.5vw - 140px);
    }

    .yasinoki.n3,
    .yasinoki.n4 {
        width: 200px;
        height: 330px;
        margin-top: 230px;
    }

    .yasinoki.n3 {
        left: calc(8vw - 81px);
    }

    .yasinoki.n4 {
        right: calc(8vw - 81px);
    }

    .stone.n1 {
        left: 61%;
        margin-top: 495px;
    }

    .crab.n1 {
        left: calc(50vw + 135px);
        margin-top: 500px;
    }

    .crab.n2 {
        left: calc(26vw - 116px);
    }

    .nationality-gender-and-name {
        margin: 1.2em 0 3.23em 48%;
        font-size: 25px;
    }

    .mean-nav ul li,
    .mean-nav ul li a {
        position: relative;
        box-shadow: none !important;
    }

    .mean-nav ul li a {
        display: flex;
        align-items: end;
        padding: 0 30% 8px 1em;
        height: 62px;
        line-height: 1.4;
        color: white;
        border-top: 0.5px solid #0000002e;
        font-size: 0.9em;
        font-weight: 400;
    }

    nav.mean-nav i {
        position: absolute;
        left: 83px;
        bottom: 3px;
        font-size: 29px;
    }

    .mean-nav ul li li a {
        padding-left: 45px;
        padding-bottom: 0;
        height: 62px;
        align-items: center;
    }

    .mean-nav ul li li li a {
        padding-left: 65px;
    }

    .mean-nav .fi-tr-angle-double-small-right:before {
        position: absolute;
        left: 30vw;
        opacity: 0.1;
        font-size: 18px;
        transition: opacity 0.2s;
        bottom: 19px;
        content: "\f377";
    }

    .sub-menu .fi-tr-angle-double-small-right:before {
        bottom: 15.5px;
    }

    .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) {
        --ty: 10px;
        --rot: 45deg;
        --w-act: clamp(16%, calc(26% + (16 - 26) * ((100vw - 480px) / (767 - 480))), 26%);
        animation: menu-close 0.8s forwards;
    }

    .meanmenu-reveal.animate.meanclose span:nth-of-type(1) {
        animation: menu-open 0.8s forwards;
    }

    .meanmenu-reveal.animate span:nth-of-type(2) {
        animation: bar-show 0.8s forwards;
    }

    .meanmenu-reveal.animate.meanclose span:nth-of-type(2) {
        animation: bar-hide 0.8s forwards;
    }

    .meanmenu-reveal.animate span:nth-of-type(3) {
        --ty: -10px;
        --rot: -45deg;
        --w-act: clamp(16%, calc(26% + (16 - 26) * ((100vw - 480px) / (767 - 480))), 26%);
        animation: menu-close 0.8s forwards;
    }

    .meanmenu-reveal.animate.meanclose span:nth-of-type(3) {
        animation: menu-open 0.8s forwards;
    }

    .mean-nav i::before {
        color: var(--c-menu-text);
    }

    .subnav .contactbutton a:hover {
        opacity: 0.55;
    }

    /* 1. 開くボタン本体（最初から最大幅にし、左側をクリップして隠す） */
    ul li a.mean-expand {
        position: absolute;
        top: 0;
        right: 0;
        width: 19.5%;
        height: 70px;
        padding: 0 !important;
        transition: background-color 0.2s ease-out;
        background: #617388;
    }

    a.mean-expand::before,
    a.mean-expand::after {
        position: absolute;
        top: 50%;
        left: 51.5%;
        width: 14px;
        height: 2px;
        content: "";
        background-color: var(--c-white);
        border-radius: 4px;
        translate: -50% -50%;
        transition: rotate 0.3s ease-in-out;
    }

    ul li a.mean-expand.mean-clicked::before,
    ul li a.mean-expand.mean-clicked::after {
        background-color: #042234;
    }

    ul li:has(> a.mean-expand.mean-clicked)>a:not(.mean-expand) {
        color: var(--c-menu-text);
        transition: color 0.2s;
    }

    ul li a.mean-expand::after {
        rotate: 90deg;
    }

    ul li a.mean-expand.mean-clicked::after {
        rotate: 180deg;
    }

    /* 3. クリック時（マスクを解除して全開にする） */
    ul li a.mean-expand.mean-clicked {
        background: var(--c-menu-text);
    }

    .ribbon {
        width: 180px;
        height: 180px
    }

    .ribbon span {
        top: 30px;
        left: 41px;
    }
}



@media (max-width: 480px) {
    .entry-content {
        padding: 0 .7em;
    }

    .widgettitle {
        padding-left: 17.2px
    }

    .ribbon {
        width: 130px;
        height: 130px
    }

    .ribbon span {
        top: 27px;
        left: 2px;
        font-size: 1.1em
    }

    .modal-text {
        max-height: 57vw;
        margin-top: 0.8em;
        padding: 0 0.8em;
    }

    .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-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;
    }
}









/* 真ん中の棒：表示・非表示の切り替え */
@keyframes bar-hide {

    0%,
    49.8% {
        opacity: 1;
    }

    49.9%,
    100% {
        opacity: 0;
    }
}

@keyframes bar-show {

    0%,
    77% {
        opacity: 0;
    }

    78%,
    100% {
        opacity: 1;
    }
}

@keyframes menu-open {
    0% {
        transform: translate(0) rotate(0);
        width: 55%;
    }

    50% {
        transform: translateY(var(--ty)) rotate(0);
        width: 55%;
    }

    80% {
        transform: translateY(var(--ty)) rotate(0);
        width: var(--w-act);
    }

    100% {
        transform: translateY(var(--ty)) rotate(var(--rot));
        width: var(--w-act);
    }
}

@keyframes menu-close {
    0% {
        transform: translateY(var(--ty)) rotate(var(--rot));
        width: var(--w-act);
    }

    30% {
        transform: translateY(var(--ty)) rotate(0);
        width: var(--w-act);
    }

    80% {
        transform: translateY(var(--ty)) rotate(0);
        width: 55%;
    }

    100% {
        transform: translate(0) rotate(0);
        width: 55%;
    }
}

/* --- 2. キーフレーム内で var() を使って呼び出す --- */
@keyframes pegasus-takeoff {
    0% {
        /* 開始位置 */
        transform: translateY(0) translateZ(0) scale(1);
        animation-timing-function: ease-in-out;
    }

    14.8%,
    18% {
        /* 溜め：最下点に到達し、少し潰れる */
        transform: translateY(0) translateZ(0) scale(1.12, 0.86);
        animation-timing-function: ease-in;
    }

    22.5% {
        transform: translateY(0) translateZ(0) scale(0.97, 1.03);
    }

    100% {
        /* 射出：画面外（上空）へ突き抜ける */
        transform: translateY(-125vh) translateZ(0) scale(1);
    }
}

@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 header-third-son-left-hand {

    0%,
    4% {
        transform: translate(0) rotate(16deg);
    }

    4.5% {
        transform: translate(0) rotate(20deg);
        animation-timing-function: ease-in-out;
    }

    5.5% {
        transform: translate(0) rotate(0);
    }

    7.5%,
    20.5% {
        transform: translate(0) rotate(16deg);
    }

    21% {
        transform: translate(0) rotate(20deg);
        animation-timing-function: ease-in-out;
    }

    22% {
        transform: translate(0) rotate(0);
    }

    24%,
    30.7% {
        transform: translate(0) rotate(16deg);
    }

    31.2% {
        transform: translate(0) rotate(20deg);
        animation-timing-function: ease-in-out;
    }

    32.2% {
        transform: translate(0) rotate(0);
    }

    34.2%,
    38% {
        transform: translate(0) rotate(16deg);
    }

    38.5% {
        transform: translate(0) rotate(20deg);
        animation-timing-function: ease-in-out;
    }

    39.5% {
        transform: translate(0) rotate(0);
    }

    41.5%,
    45% {
        transform: translate(0) rotate(16deg);
    }

    45.5% {
        transform: translate(0) rotate(20deg);
        animation-timing-function: ease-in-out;
    }

    46.5% {
        transform: translate(0) rotate(0);
    }

    48.5% {
        transform: translate(0) rotate(16deg);
    }

    49% {
        transform: translate(0) rotate(20deg);
        animation-timing-function: ease-in-out;
    }

    49.8% {
        transform: translate(0) rotate(0);
    }

    51.6% {
        transform: translate(0) rotate(16deg);
    }

    52.1% {
        transform: translate(0) rotate(20deg);
        animation-timing-function: ease-in-out;
    }

    52.9% {
        transform: translate(0) rotate(0);
    }

    54.7%,
    63% {
        transform: translate(0) rotate(16deg)scale(1);
        animation-timing-function: ease-in-out;
    }

    64% {
        transform: translate(0, 20%) rotate(-12deg)scale(0.9, 1.1);
    }

    65%,
    99% {
        transform: translate(0, 20%) rotate(-12deg)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 home-position {
    100% {
        transform: translate(0) scale(1);
    }
}

@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 pointer-events-on {

    0%,
    100% {
        pointer-events: auto;
    }
}

@keyframes fade-up-jump {
    0% {
        transform: translateY(33px);
        opacity: 0;
    }

    90%,
    100% {
        opacity: 1;
    }
}


@keyframes crab {

    0%,
    30% {
        offset-distance: 100%;
    }

    40%,
    60% {
        offset-distance: 50%;
    }

    70%,
    100% {
        offset-distance: 0;
    }
}

@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: translateZ(0) translateX(30%) rotate(-60deg) scale(0.3);
        opacity: 1;
    }

    42% {
        transform: translateZ(0) translateX(-30%) rotate(20deg) scale(0.3);
    }

    48% {
        transform: translateZ(0) translateX(30%) rotate(-57deg) scale(0.3);
    }

    54.8%,
    56% {
        transform: translateZ(0) translate(0) rotate(0) scale(0.3);
        animation-timing-function: cubic-bezier(0.12, 0.58, 0.31, 1);
    }

    60.2%,
    61% {
        transform: translateZ(0) translate(0, -70%) rotate(1080deg) scale(1);
        animation-timing-function: cubic-bezier(0.82, 0, 0.93, 0.7);
    }

    63.2% {
        transform: translateZ(0) translate(0, -36%) rotate(1080deg);
        animation-timing-function: cubic-bezier(0.38, 0.23, 0.7, 1);
    }

    72.5% {
        transform: translateZ(0) translate(-23%, -36%) rotate(1080deg) scale(1);
    }

    73%,
    79% {
        transform: translateZ(0) translate(-23%, -31%) rotate(1080deg) scale(1, 0.9);
    }

    79.5%,
    80% {
        transform: translateZ(0) translate(-11%, -31%) rotate(1091deg) scale(1, 0.9);
    }

    80.5%,
    81% {
        transform: translateZ(0) translate(200%, -31%) rotate(1095deg) scale(1, 0.9);
    }

    81.5%,
    82% {
        transform: translateZ(0) translate(100%, -35%) rotate(1030deg) scale(1, 0.9);
    }

    82.5%,
    100% {
        transform: translateZ(0) 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);
    }
}

@media (min-width: 768px) {

    .swiper:hover .swiper-button-next,
    .swiper:hover .swiper-button-prev {
        opacity: 1;
    }
}

:is(.single, .page) #content.is-loaded,
#fortress-footer-gate.is-loaded {
    opacity: 1;
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.18, 1);
}