/* -----------------------------------------------------------------
   Role: 投稿ページ専用 非同期遅延CSS (装飾/下部用)
   Rule: ID別ファイルがない場合に自動発動
   ----------------------------------------------------------------- */



#container {
    overflow: clip;
}

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

h5,
.h5 {
    text-transform: uppercase
}

.accordion-main h3 {
    font-size: 1em;
    letter-spacing: .7px
}

.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 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-android .swiper-slide,
.swiper-ios .swiper-slide {
  transform: translate3d(0, 0, 0);
}

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

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

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

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

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

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

/*
.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: 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
========================================================= */
#index-btn.is-visible,
#page-top.is-visible {
    transform: translateY(0);
    will-change: transform;
}

/* 774行目付近を修正 */
#index-btn:hover,
#index-btn.is-active {
    cursor: pointer;
    transform: translateY(-3px);
}

#index-btn i {
    line-height: 1;
    font-size: 1.45em;
}

#index-btn span {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.index-modal {
    z-index: 1000000;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    background: #0c0e0fba;
    transition: opacity 0.15s, visibility 0.15s;
}

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

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

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

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

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

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

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

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

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

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

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

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

.index-modal #ez-toc-container.ez-toc-v2 {
    margin: 0.7em;
}






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

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でスワイプできない弊害発生)
*/

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

}

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

.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 {
    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.full-size img {
    aspect-ratio: unset;
}

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

/* =========================================================
   40. Cool Button
========================================================= */
.cool-button {
    display: inline-block;
    margin: 30px 0 50px;
    transition: transform 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: 1px solid #0f081d;
    border-radius: 50px;
    color: #fff;
    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 background-color ease-out, 0.2s box-shadow ease-out;
}

.cool-button a::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    opacity: 0.23;
    content: "";
    transition: 0.4s opacity 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,
.first-and-second,
.scroll-sign,
.circle-group,
.ending,
.table-flex,
.table-corporate-style,
.table-corporate-style .creative-image {
    display: flex;
}

.scroll-sign,
.circle-group,
.ending {
    align-items: center;
}

.ending,
.table-corporate-style,
.table-corporate-style .creative-image {
    justify-content: center;
}

.scroll-infinity-wrap {
    overflow: hidden;
}

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

.sub-list,
.scroll-sign,
.table-corporate-style .creative-image,
.table-corporate-style {
    position: relative;
}

.scroll-sign {
    right: calc(-100% + 109px);
}

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

/* =========================================================
   42. Mobile Scrollbar Adjustments
========================================================= */
.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";
}

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

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

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

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

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

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

.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: #fff;
}

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

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

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

.explanation-layout .stepinside .box,
.box .content,
.explanation-layout .speech-bubble .content,
.table-container td.sticky::before,
.table-container th.sticky::before,
.color-picker div,
.color-picker.type-1 div::after {
    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 .title {
    background: #87bcdd;
    text-shadow: none;
}

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

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

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

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

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

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

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

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

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

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

.parallel-layout-scroll .box .content,
.speech-bubble .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),
.box.rich-column-style .content {
    padding: 1.15em 1.1em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-5 .content {
    border-bottom: 4px solid #70bae4;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =========================================================
   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 {
    overflow: auto;
    width: 100%;
    padding: 0.05em 1em;
    border-radius: 5.5px;
    background: #fff;
    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;
}

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

/* =========================================================
   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-2::before {
    border-right: 21px solid #ffb88f;
}

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

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

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

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

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

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

/* =========================================================
   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: #fff !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
========================================================= */
.footer-cloud,
.sea,
.seaside-scenery div,
.site-mascot-third-son-silhouette,
ul li.icon::after,
.overflow-sign,
.quotation-marks::before,
.quotation-marks::after,
.ribbon span::before,
.ribbon span::after,
.sns a::before,
.sns a::after,
.sns .fi-brands-instagram,
.sns span.text-anime,
.sns .twitter a::after {
    position: absolute;
}

ul li.icon::after,
.seaside-scenery div,
.site-mascot-third-son-silhouette {
    background-repeat: no-repeat;
}

.overflow-sign {
    top: 2px;
    left: 98%;
}

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

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

.color-picker div {
    width: 5em;
    cursor: pointer;
    transition: 0.06s transform;
}

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

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

.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,
.table-container td {
    max-width: 100px;
}

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

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

.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: transform 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 {
    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;
}

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

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

/* =========================================================
   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 .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 {
    z-index: 0;
    flex-wrap: wrap;
    margin: 1.5em -1.5em;
    color: #fff;
    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 {
    height: 5em;
    margin: 20px 8px 0;
    padding: 0 7px;
    font-size: 0.9em;
}

.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;
    height: 140px;
    margin: 0;
    padding: 0.7em 1em 1em;
    font-size: 0.92em;
}

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

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

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

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

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

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


/* =========================================================
   57. Image / Quotation / Form Reset Again
========================================================= */

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

.quotation-marks {
    position: relative;
}

.quotation-marks::before,
.quotation-marks::after {
    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;
}

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

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

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

/* =========================================================
   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 3s cubic-bezier(0.19, 0.02, 0.24, 0.92),
    swaying-in-the-wind 33s 11s cubic-bezier(0.19, 0.02, 0.24, 0.92) forwards;*/
    animation: perspective-change-swaying-in-the-wind 41s 3s cubic-bezier(0.19, 0.02, 0.24, 0.92) forwards;
}

@keyframes perspective-change-swaying-in-the-wind {

    /* ▼ 第1フェーズ：perspective-change（0秒〜8秒 / 全体の 19.51%） ▼ */
    0% {
        transform: translate(12%, -49%) scale(1.3);
    }

    19.51% {
        transform: translate(0) scale(1.03);
    }

    /* ▼ 第2フェーズ：swaying-in-the-wind（8秒〜41秒 / 全体の 19.51% 〜 100%） ▼ */
    /* 元の 23% 地点 (33秒中 7.59秒経過 = 全体の 38.02%) */
    38.02% {
        transform: translate(-2.16%, -2.16%) scale(1.08);
    }

    /* 元の 46% 地点 (33秒中 15.18秒経過 = 全体の 56.54%) */
    56.54% {
        transform: translate(0.83%, 0.5%) scale(1.03);
    }

    /* 元の 69% 地点 (33秒中 22.77秒経過 = 全体の 75.05%) */
    75.05% {
        transform: translate(-5%, 2.5%) scale(1.11);
    }

    /* 元の 100% 地点 (33秒完了 = 全体の 100%) */
    100% {
        transform: translate(0) scale(1.03);
    }
}




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

.is-active .suspicious-fireflies.n1 {
    animation: fly-around-2 1.6s 2s ease-out;
}

.is-active .suspicious-fireflies.n2 {
    animation: fly-around-3 1.6s 4s ease-out;
}

.is-active .suspicious-fireflies.n3 {
    animation: fly-around-2 1.8s 5s ease-out;
}

.is-active .suspicious-fireflies.n4 {
    animation: fly-around-2 3s 17s 10 linear;
}

.is-active .suspicious-fireflies.n5 {
    animation: fly-around-3 3s 17.5s 10 linear;
}

.suspicious-fireflies.n1 {
    top: 60%;
    left: -5%;
}

.suspicious-fireflies.n2 {
    top: 50%;
    left: 70%;
}

.suspicious-fireflies.n3 {
    top: 25%;
    left: 20%;
}

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

.suspicious-fireflies.n5 {
    left: 36%;
}

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

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

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

.is-active .tobimusi.n1 {
    animation: fly-around-5 1.8s 13s cubic-bezier(0.77, 0, 1, 1) reverse;
}

.is-active .tobimusi.n2 {
    animation: fly-around-5 1.5s 14.5s cubic-bezier(0.77, 0, 1, 1) reverse;
}

.is-active .tobimusi.n3 {
    animation: fly-around-4 1s 16s 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: left 0.25s ease-out;
}

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

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

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

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

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

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

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

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

/* =========================================================
   68. List Mascot Icons / Sub List
========================================================= */
ul li.icon::after {
    width: 50px;
    height: 52px;
    content: " ";
    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);
}

.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: #fff;
}

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

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

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

.mascot {
    z-index: 1;
}

/* =========================================================
   77. Fantasy Style / Kodama
========================================================= */
.fantasy-style-third-son,
.princess-mononoke-kodama {
    position: absolute;
    opacity: 0;
}

.fantasy-style-third-son {
    top: 5.1%;
    left: 74.8%;
    z-index: 2;
    width: 14.5%;
    animation:
        fade-in-out 26.2s 20s ease-in-out forwards,
        swaying-in-the-wind-mascot 33s 11.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-falling-severed-head 13.7s 28.5s;
}

@keyframes suspicious-rotation-falling-severed-head {

    /* =========================================
     第1フェーズ：怪しい回転（0秒〜4秒）
     ※ 13.7秒中の 0% 〜 29.20% に相当
  ========================================= */
    0% {
        transform: translate(0, 0) rotate(0deg);
        animation-timing-function: ease-in-out;
    }

    20.44%,
    21.90% {
        /* 70%, 75% 地点 */
        transform: translate(4px, 1px) rotate(42deg);
    }

    22.77% {
        /* 78% 地点 */
        transform: translate(0, 0) rotate(-25deg);
    }

    23.65% {
        /* 81% 地点 */
        transform: translate(0, 0) rotate(20deg);
    }

    24.53% {
        /* 84% 地点 */
        transform: translate(0, 0) rotate(-15deg);
    }

    25.40% {
        /* 87% 地点 */
        transform: translate(0, 0) rotate(10deg);
    }

    26.28% {
        /* 90% 地点 */
        transform: translate(0, 0) rotate(-5deg);
    }

    27.15%,
    29.20% {
        /* 93%, 100% 地点 (ここで回転終了) */
        transform: translate(0, 0) rotate(0deg);
    }

    28.03% {
        /* 96% 地点 */
        transform: translate(0, 0) rotate(-2deg);
    }

    /* =========================================
     待機フェーズ（4秒〜7.7秒）
     ※ 13.7秒中の 29.20% 〜 56.20% に相当
  ========================================= */
    56.20% {
        /* ここまで動かさず待機。生首落下の 0% 地点 */
        transform: translate(0, 0) rotate(0deg);
    }

    /* =========================================
     第2フェーズ：生首落下（7.7秒〜13.7秒）
     ※ 13.7秒中の 56.20% 〜 100% に相当
  ========================================= */
    58.04%,
    78.10% {
        /* 落下の 4.2%, 50% 地点 */
        transform: translate(0, 50%) rotate(0deg);
    }

    79.85%,
    82.48% {
        /* 落下の 54%, 60% 地点 */
        transform: translate(0, 0) rotate(0deg);
    }

    86.86%,
    96.93% {
        /* 落下の 70%, 93% 地点 */
        transform: translate(0, 0) rotate(19deg);
        animation-timing-function: linear;
    }

    100% {
        /* 落下完了 */
        transform: translate(0, 0) rotate(0deg);
    }
}



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

.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 11.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 {
    left: -3.3%;
    width: 103%;
    margin-top: 33%;
    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 11s 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 11.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 {
    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");
}

/* =========================================================
   79. Share / SNS
========================================================= */
.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: #fff;
    text-align: center;
    font-size: 85%;
    letter-spacing: 0.4px;
    transition: transform 0.25s ease-out;
}

.sns li a:hover {
    transform: translateY(-2px);
}

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

.sns .hatebu a::before {
    margin-top: -0.53em;
    margin-left: -0.38em;
    font-size: 1.6em;
    font-weight: bold;
    content: "B!";
    will-change: transform;
}

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

.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 .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;
    transform: translateX(-1em);
}

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

.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 {
    margin-top: -0.42em;
    margin-left: -0.45em;
    font-size: 1.55em;
}

.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;
    place-content: center;
    place-items: center;
    width: 56%;
    height: 25vw;
    margin: 0 auto;
    padding: 10% 6%;
}

.radar-chart-2 svg,
.radar-chart-2 dl {
    width: 100%;
}

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

.radar-chart-2 dl {
    position: absolute;
    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;
}

.r circle {
    opacity: 0;
}

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

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

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

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

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

.btn.agoda a {
    background:
        #fafafa url("https://self-traveling-thailand.jp/wp-content/uploads/agoda-rogo.svg") center / 80px no-repeat;
    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 box-shadow ease-in-out, 0.17s 0.02s transform 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: url("https://self-traveling-thailand.jp/wp-content/uploads/amazon-ribbon.svg") 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: #eee;
    -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;
    inset: 0 auto 0 0;
    width: var(--rating);
    content: "";
    background-color: #fc0;
    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;
}

/* =========================================================
   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.2s cubic-bezier(.45, .05, .55, .95);
    pointer-events: none;
    will-change: transform;
}

#index-btn:focus-visible,
#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;
}

/* =========================================================
   84. Related / Inbox / Category / Search
========================================================= */
.related-none-h {
    margin-bottom: 0;
    padding-bottom: 0.75em;
}

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

.inbox .recommend {
    display: inline-block;
    width: calc(36vw + 76px);
    max-width: 310px;
    margin: 1.5em 0 0 3%;
    aspect-ratio: 8.6 / 1;
    background: url("https://self-traveling-thailand.jp/wp-content/uploads/recommend.svg") 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 {
    z-index: 2;
    width: 47.9%;
    margin: 5px 2.3px;
    border: 0;
    border-bottom: solid #ededed 7px;
    border-radius: 13px;
    background: #fff;
    transition: transform 0.7s ease-in;
}

.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 .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%;
    display: grid;
    align-items: center;
    min-width: 3.64em;
    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);
}

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

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

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

.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;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    will-change: transform;
}

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

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

.microcopy::before,
.microcopy::after {
    background: #042234;
}

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

.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-top: 1.2em;
}

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

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

/*
#container .related_article a {
  width: 100%;
  padding: 0.95em 0.9em 0.59em 0.93em;
  border: 0;
  border-bottom: 3px solid #f8acac;
  border-radius: 3.5px;
  color: #555;
  background-image: linear-gradient(#f8acac 10%, #f1f0ab 100%);
  transition: 0.84s ease-out;
}*/
/*
#container .related_article a:hover {
  transform: translateY(-30.5px);
  box-shadow: 0 2.3px 5px 3px rgb(0 0 0 / 10%);
  transition: 0s 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-left: 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, var(--c-dark) 70%, #67c5fe 0);
}


/* =========================================================
   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,
.accordion-sub.type-3 .wp-block-separator,
.accordion-main-demo .wp-block-separator::before {
    color: #fff;
}

.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:
        1.6em/1 serif;
    letter-spacing: 2em;
    content: "···";
}

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

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

/* =========================================================
   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-right: 1.15em;
}

.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: #e4112e;
}

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

/* =========================================================
   88. Figures / Links / Gradient Marker / Ruby
========================================================= */
.flex-group .swiper-pagination-fraction {
    font-size: 0.84em;
}

.swiper-slide figcaption,
.modal-box figcaption {
    position: absolute;
    bottom: 0.65em;
    width: 100%;
}

.image-elements figcaption {
    position: absolute;
    bottom: 0.4em;
    width: 100%;
}

.modal-box figcaption {
    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: right -200% bottom / 150% 3.5px no-repeat;
}

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

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

.steplabel .stepnumber::before {
    position: absolute;
    top: 98%;
    left: calc(48% - 6px);
    content: "";
    border: 7.5px solid transparent;
    border-top-color: #73b9e2;
}

.stepinside {
    margin: 0 0.45em 0 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: #fff;
    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-color: #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-color: #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-color: #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-color: #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-color: #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,
.supplementary-title-layout {
    display: flex;
    gap: 1.5em;
}

.add-place-items {
    display: grid;
    place-items: center;
}

.layout-automatic-change img:not(.swiper img) {
    aspect-ratio: 1600 / 990;
    border-radius: 13px;
}

.layout-automatic-change.svg-shadow img {
    box-shadow: 0 -6px 16px -12.5px #707070;
}

.explanation-layout .layout-automatic-change {
    gap: 1.5em;
    margin: 0;
}

.explanation-layout .parallel-layout-scroll .layout-automatic-change {
    min-width: 100%;
    margin: 0 auto 1.5em;
    flex-wrap: wrap;
}

.add-inline-block {
    display: inline-block !important;
}

.supplementary-title {
    display: flex;
    place-content: center;
    place-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;
}

.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;
    left: 50%;
    display: inline-flex;
    height: 40px;
    margin: 0 0 10em;
    padding: 0 11.5px 0 26px;
    align-items: center;
    border-radius: 18px 7.5px;
    background: var(--c-dark);
    box-shadow: 0 3px var(--c-dark);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    transform: translateX(-50%);
    transition: transform .2s, box-shadow .2s;
    /*user-select: none*/
}

.ac-close-button:active {
    transform: translateX(-50%)translateY(2px);
    box-shadow: 0 1px 0 #325f79;
    will-change: box-shadow;
}

.ac-close-button.demo {
    box-shadow: 0 3px 0 #000;
}

.ac-close-button.demo:active {
    box-shadow: 0 1px 0 #000;
}

.ac-close-button:hover .fi-tr-address-card:before {
    transform: translateY(-3px) rotate(-90deg);
    transition: transform 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: rotate(-90deg);
    transition: 0.2s 0.8s transform cubic-bezier(0.6, -0.28, 0.74, 0.05);
}

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

.single .animation .carousel .item {
    opacity: 1;
    will-change: opacity, 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: 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");
}

/* =========================================================
   94. Hidden / Tabs / Merit Demerit / Color Palette
========================================================= */
li.cat-item.cat-item-48.parent-category a:after {
    margin-left: 3.3em;
}

.cool-tabs .nav-link {
    background: #425a69;
    color: #fff;
}

.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: background-color 0.1s ease-in-out;
}

.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 url("https://self-traveling-thailand.jp/wp-content/uploads/circle-mark.svg") center / 9em no-repeat !important;
}

.merit-demerit .demerit.inner {
    background:
        #ffe1e4 url("https://self-traveling-thailand.jp/wp-content/uploads/cross-mark.svg") center / 9em no-repeat !important;
}

.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,
.demerit .nav-link:hover,
.demerit .nav-link.active {
    background: #ffa2ae;
    color: #fff;
}

.merit .nav-link {
    background: #7fd1ff;
    color: #fff;
}

.nav-link:hover,
.nav-link.active {
    background: #7fd1ff;
    color: inherit;
}

.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%;
    background: linear-gradient(to right, #7fd1ff 50%, #425a69 50%);
}

.comparison-title.merit-demerit span {
    background: linear-gradient(to right, #7fd1ff 50%, #ffa2ae 50%);
}

.cool-tabs .slider {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 3.5px;
    border-radius: 5.5px;
    background: #20acff;
    transition: transform 0.3s ease-in-out, width 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,
.cool-tabs.ver2.animation .nav-link.n1 {
    animation: zoom-in-down 2s 0.3s forwards;
}

.table-corporate-style .nav-tabs.animation .nav-link.n2,
.cool-tabs.ver2.animation .nav-link.n2 {
    animation: zoom-in-down 2s 0.6s forwards;
}

.table-corporate-style .nav-tabs.animation .nav-link.n3,
.cool-tabs.ver2.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;
}

.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,
.tab-panels>.tab-panel {
    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;
}

.bc-mascot,
.ac-sub-inside-4 .announcement {
    background-repeat: no-repeat;
    transform: translate(0);
}

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

.bc-date {
    position: relative;
    bottom: -6px;
    left: 0.5em;
    font-size: 0.9em;
    letter-spacing: 0.4px;
}

.bc-date i {
    padding-right: 0.12em;
    font-size: 0.96em;
}

.bc-date i:before {
    top: 0.01em;
}

/* =========================================================
   96. Notices / Search Chips / Blockquote
========================================================= */
.expandable-notices {
    display: none;
}

.expandable-notices.win-mac,
.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;
}

.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;
    content: "\ef06";
    font-family: "uicons-thin-rounded";
    font-size: 22px;
    line-height: 1;
    text-align: center;
    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;
}

.l-position.trigger.text p {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.3s;
}

.r-position.trigger.text p {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1.3s;
}

.l-position.animation.text p,
.r-position.animation.text p,
.mascot-speech-bubble.l-position.animation.all,
.mascot-speech-bubble.r-position.animation.all {
    clip-path: inset(0);
}

.mascot-speech-bubble.l-position.trigger.all {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 2.8s;
}

.mascot-speech-bubble.r-position.trigger.all {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 2.8s;
}

.l-position.trigger.comment .m-s-b-comment,
.r-position.trigger.comment .m-s-b-comment,
.mascot-speech-bubble.l-position.trigger.slide,
.mascot-speech-bubble.r-position.trigger.slide {
    transition: transform 0.48s cubic-bezier(0.19, 1.46, 0.58, 1);
}

.l-position.trigger.comment .m-s-b-comment {
    transform: translateX(-10px) scale(0, 1);
    transform-origin: left;
}

.r-position.trigger.comment .m-s-b-comment {
    transform: translateX(10px) scale(0, 1);
    transform-origin: right;
}

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

.mascot-speech-bubble.r-position.trigger.slide {
    transform: translateX(40px);
}

.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,
.accordion-sub summary {
    position: relative;
    margin: 1.5em auto 0;
    border-radius: 6px;
    cursor: pointer;
    transform: translate(0);
}

summary.ac-main,
summary.ac-main-demo {
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.4em;
    width: 90%;
    max-width: 454px;
    min-height: 3.4em;
    padding: 0 2.6em 0 clamp(0.82em, 3.6vw, 1.15em);
    background: var(--c-dark);
    color: white;
    line-height: 1.26;
    font-weight: 500;
    box-shadow: 0 20px 20px -22px #00000000;
    transition:
        transform 0.3s 0.12s cubic-bezier(0.61, 0.07, 0.58, 1),
        box-shadow 0.2s 0.12s cubic-bezier(0.61, 0.07, 0.58, 1);
    will-change: transform;
}

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: transform 0.6s 0.42s ease-in-out, filter 0.6s 0.42s 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: transform 0.7s 0.53s ease-in-out;
}

.accordion-main[open] summary.ac-main:after,
.accordion-main-demo[open] summary.ac-main-demo:after {
    filter: blur(20px);
    transform: rotate(360deg);
    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: transform 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;*/
    margin: 0 -1.5em;
    /*padding: 2em 1.5em 1.5em;*/
    padding: 0 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: var(--c-white);
}

.accordion-main-demo .ac-main-inside:after {
    display: none;
}

/* =========================================================
   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;
    box-shadow: 0 11px 11px -11px #00000000;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.7, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.7, 1);
}

.accordion-sub[open] summary {
    transform: translateY(6px);
    box-shadow: 0 11px 11px -11px #00000052;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.7, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.7, 1);
}

.accordion-sub.type-4[open] summary {
    transition: transform 0.3s 0.3s cubic-bezier(0.4, 0, 0.7, 1), box-shadow 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,
.accordion-sub.type-1 summary:before,
.accordion-sub.type-2 summary:before,
.accordion-sub.type-3 summary:before,
.accordion-sub summary:after {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.7, 1);
}

.mobile .accordion-sub summary:not(.accordion-sub.type-4 summary):before {
    transition-delay: 0.3s;
}

.accordion-sub.type-1 summary:before,
.accordion-sub.type-2 summary:before {
    content: "\e4e5";
}

.accordion-sub.type-3 summary:before {
    content: "\e0a4";
}

.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;
    content: "\e089";
    font-size: 23px;
}

.accordion-sub[open] summary:after {
    transform: rotate(-180deg);
}

.accordion-sub.type-4[open] summary:after {
    transition: transform 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,
.ac-sub-inside-4:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
}

.ac-sub-inside-4:before {
    z-index: 0;
    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 {
    z-index: -1;
    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");
    transform: 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;
}

.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,
.ac-sub-inside-2.animation .anime-container.fade-down-2,
.ac-sub-inside-2.animation .anime-container.slide-in {
    animation-duration: 2.3s;
    animation-timing-function: cubic-bezier(0.22, 0.21, 0.1, 0.87);
    animation-fill-mode: forwards;
}

.ac-sub-inside-2.animation .anime-container.fade-up {
    animation-name: fade-up;
}

.ac-sub-inside-2.animation .anime-container.fade-down-2 {
    animation-name: fade-down;
}

.ac-sub-inside-2.animation .anime-container.slide-in {
    animation-name: slide-in-l;
}

.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;
    /*user-select: none;
  -webkit-user-select: none;*/
    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;
}

.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%;
    content: "\e089";
    font-family: "uicons-thin-rounded";
    font-size: 1.43em;
    transition: transform 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);
}

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

/* =========================================================
   94.
========================================================= */
.single .animation .carousel .item.a {
    animation: fade-in-carousel-a 5.8s cubic-bezier(0.29, 0.28, 0.16, 1);
}

.single .animation .carousel .item.b,
.single .animation .carousel .item.h {
    animation: fade-in-carousel-bh 5.4s cubic-bezier(0.29, 0.28, 0.16, 1);
}

.single .animation .carousel .item.c,
.single .animation .carousel .item.g {
    animation: fade-in-carousel-cg 5s cubic-bezier(0.29, 0.28, 0.16, 1);
}

.single .animation .carousel .item.d,
.single .animation .carousel .item.f {
    animation: fade-in-carousel-df 4.4s cubic-bezier(0.29, 0.28, 0.16, 1);
}

.single .animation .carousel .item.e {
    animation: fade-in-carousel-e 4.7s cubic-bezier(0.29, 0.28, 0.16, 1);
}

.single .footer-cloud.n1 {
    transform: translate(160px, 33px);
    transition-delay: 2s;
}

.single .footer-cloud.n2 {
    transform: translate(160px, -30px);
    transition-delay: 2.5s;
}

.single .animation .palm-tree {
    transform: rotate(0) !important;
}

.single .palm-tree.n1,
.single .palm-tree.n3 {
    transform: rotate(7deg);
    transition: transform 1.65s cubic-bezier(0.3, 0.05, 0.53, 1);
}

.single .palm-tree.n1 {
    transition-delay: 2.6s;
}

.single .palm-tree.n3 {
    transition-delay: 1.8s;
}

.single .palm-tree.n2,
.single .palm-tree.n4 {
    transform: rotate(-7deg);
    transition: transform 1.4s cubic-bezier(0.3, 0.05, 0.53, 1);
}

.single .palm-tree.n2 {
    transition-delay: 2.4s;
}

.single .palm-tree.n4 {
    transition-delay: 1.6s;
}

.single .animation-2 .crab.n1,
.single .animation-2 .crab.n2 {
    animation-name: crab;
    animation-delay: 5s;
    animation-timing-function: cubic-bezier(0.05, 0.06, 0.85, 0.98);
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.single .animation-2 .crab.n2 {
    animation-duration: 7s;
}

.single .animation-2 .crab.n1 {
    animation-duration: 10s;
}

.single .animation-2 .sea.n1,
.single .animation-2 .sea.n2 {
    animation: home-position ease-in-out infinite alternate;
    will-change: transform;
}

.single .animation-2 .sea.n1 {
    animation-duration: 4.5s;
}

.single .animation-2 .sea.n2 {
    animation-duration: 3s;
}

.single .animation-2 .carousel .third-son {
    animation: overreaching 30.3s 5.6s cubic-bezier(0.56, 0.04, 1, 1);
}

.single .animation-2 .carousel .third-son .front,
.single .animation-2 .carousel .third-son .rear {
    animation-duration: 30s;
    animation-delay: 6s;
    animation-timing-function: cubic-bezier(0.17, 0.03, 0.58, 1);
    animation-iteration-count: infinite;
}

.single .animation-2 .carousel .third-son .front {
    animation-name: rotate-while-floating;
}

.single .animation-2 .carousel .third-son .rear {
    animation-name: rotate-while-floating-2;
}

.single .animation-2 .carousel .runny-nose {
    animation: drooping-swaying-falling 30s 36s infinite;
}

.single .animation-2 .carousel .shake-the-tail,
.single .animation-2 .carousel .shadow-of-feet,
.single .animation-2 .carousel .second-son,
.single .animation-2 .carousel .hand.right,
.single .animation-2 .carousel .hand.left,
.single .animation-2 .carousel .face,
.single .animation-2 .carousel .embarrassed,
.single .animation-2 .hand.right.pen-light:after,
.single .animation-2 .hand.left.pen-light:after {
    animation-duration: 30s;
    animation-iteration-count: infinite;
}

.single .animation-2 .carousel .shake-the-tail,
.single .animation-2 .carousel .shadow-of-feet {
    animation-delay: 6s;
}

.single .animation-2 .carousel .second-son,
.single .animation-2 .carousel .hand.right,
.single .animation-2 .carousel .hand.left,
.single .animation-2 .carousel .face,
.single .animation-2 .carousel .embarrassed,
.single .animation-2 .hand.right.pen-light:after,
.single .animation-2 .hand.left.pen-light:after {
    animation-delay: 9s;
}

.single .animation-2 .carousel .shake-the-tail {
    animation-name: shake-the-tail;
}

.single .animation-2 .carousel .shadow-of-feet {
    animation-name: big-small;
    animation-timing-function: cubic-bezier(0.17, 0.03, 0.58, 1);
}

.single .animation-2 .carousel .second-son {
    animation-name: happy-dance;
}

.single .animation-2 .carousel .hand.right {
    animation-name: wave-hands-r;
}

.single .animation-2 .carousel .hand.left {
    animation-name: wave-hands-l;
}

.single .animation-2 .carousel .face {
    animation-name: face-second-son;
}

.single .animation-2 .carousel .embarrassed {
    animation-name: face-shake-second-son;
}

.single .animation-2 .hand.right.pen-light:after {
    animation-name: pen-light-r;
}

.single .animation-2 .hand.left.pen-light:after {
    animation-name: pen-light-l;
}

.single .animation-2 .carousel .butterfly {
    animation: fly-around 19s ease-in-out infinite;
}

.single .animation-2 .carousel .eldest-son {
    animation: boing-boing 8s 14s infinite;
}

.single .animation-2 .mascot.eldest-daughter.n6,
.single .animation-2 .mascot.eldest-daughter.n5,
.single .animation-2 .mascot.eldest-daughter.n4,
.single .animation-2 .mascot.eldest-daughter.n3,
.single .animation-2 .mascot.eldest-daughter.n2,
.single .animation-2 .mascot.eldest-daughter.n1 {
    animation-duration: 15s;
    animation-delay: 15s;
    animation-iteration-count: infinite;
}

.single .animation-2 .mascot.eldest-daughter.n6 {
    animation-name: quick-change-of-clothes;
}

.single .animation-2 .mascot.eldest-daughter.n5 {
    animation-name: quick-change-of-clothes-2;
}

.single .animation-2 .mascot.eldest-daughter.n4 {
    animation-name: quick-change-of-clothes-3;
}

.single .animation-2 .mascot.eldest-daughter.n3 {
    animation-name: quick-change-of-clothes-4;
}

.single .animation-2 .mascot.eldest-daughter.n2 {
    animation-name: quick-change-of-clothes-5;
}

.single .animation-2 .mascot.eldest-daughter.n1 {
    animation-name: quick-change-of-clothes-6;
}

/* =========================================
   目次の階層番号 自動生成（完全分離版）
========================================= */


.ez-toc-container-modal .ez-toc-list>li>a::before {
    content: counters(item, ".");
}



/* =========================================
   モバイル目次：エリート・エディション
========================================= */
.ez-toc-container-modal .ez-toc-list {
    padding: 15px 10px !important;
}

.ez-toc-container-modal li {
    transition: transform 0.1s;
    /*scroll-margin-block: 270px;*/
}

.ez-toc-container-modal li:active {
    transform: scale(0.96);
}

.ez-toc-container-modal li a {
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

#my-toc-content li a::before,
.ez-toc-container-modal li a::before {
    content: counter(modal-counter);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c-dark-3);
    color: white;
    font-size: 14px;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0, 1.77);
    font-weight: bold;
}

.ez-toc-container-modal li.active a {
    background-color: #103750;
    color: white !important;
}

.ez-toc-container-modal li.active a::before {
    background: white;
    color: #103750;
    transform: scale(1.1);
}


#ez-toc-container.ez-toc-v2 {
    max-width: 600px;
    margin: 2em auto;
    padding: 20px;
    background: var(--c-bg-light);
    border: 2px solid var(--c-text)
}

.ez-toc-list>li>a::before {
    content: counters(item, ".") ". ";
}

#ez-toc-container a {
    font-weight: 500;
    color: var(--c-text);
    /*display: flex;*/
    display: inline-flex;
    width: -webkit-fill-available;
    align-items: center;
    height: 5em;
    gap: 0.5em;
    margin: 1em;
    padding: 0 0.65em;
}

#ez-toc-container nav ul li {
    counter-increment: item;
}

#ez-toc-container ul {
    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;
}

#ez-toc-container.ez-toc-v2 .ez-toc-title {
    padding-bottom: 10px;
    border-bottom: 1px solid #1a202682;
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}














/* ==================================================
   独立要塞：GPUアクセラレーション専用アニメーション
================================================== */




.scrolldown-sign:not(.single .scrolldown-sign):before {
    animation: scrolldown 0.9s 0.53s ease-in-out 3 forwards;
    background: #042234;
    border-radius: 50%;
    content: "";
    width: 10px;
    height: 10px;
    left: -4px;
    position: absolute;
    opacity: 0;
}

.scrolldown-sign .arrow {
    height: calc(10px / 2 * tan(60deg));
    width: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    top: 48px;
    left: -4px;
    background: #042234;
    position: absolute;
    opacity: 0;
    animation: fade-in ease-in-out 0.4s 3.25s forwards;
}

.scrolldown-sign span {
    font-size: 12px;
    writing-mode: vertical-rl;
    top: 7px;
    left: 1.5px;
    position: relative;
    display: inline-block;
}

.scrolldown-sign:after {
    background: #042234;
    content: "";
    height: 49px;
    top: 0;
    left: 0;
    position: absolute;
    width: 2px;
    border-radius: 10px;
}


.entry-content ul li ul li::before {
    top: 10px;
    width: 5px;
    height: 5px
}

.entry-content ul li ul li ul li::before {
    top: 10px;
    width: 7px;
    height: 2px;
    border-radius: 0
}

.entry-content ol {
    counter-reset: number
}

.entry-content ol li {
    position: relative;
    list-style: none
}

.entry-content ol li::before {
    position: absolute;
    display: block;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    text-align: center;
    counter-increment: number;
    content: counter(number)
}

#toc_containers li::before {
    content: none
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0
}

.sharewrap [target="_blank"]::after,
.entry-content a.no-icon[target="_blank"]::after,
a.amazonjs_link[target="_blank"]::after,
.add a[target="_blank"]::after,
.amazonjs_item ul li::before {
    content: none
}

a:hover {
    /* color: #6da7ff*/
}

.swiper-button-prev::after {
    content: "\e091"
}

.swiper-button-next::after {
    content: "\e092"
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-wrapper {
    display: flex;
    transform-style: preserve-3d;
    transition-timing-function: cubic-bezier(.3, .63, .56, 1)
}

.swiper-slide {
    flex-shrink: 0;
    transform: translateZ(0);
    will-change: transform;
    width: 100%;
}

.swiper-slide img {
    pointer-events: none;
    cursor: grab;
}

.swiper {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #e1f3ff;
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: .35;
    background: var(--c-white);
    transition: transform .2s ease-out, opacity .2s ease-out;
    cursor: pointer;
    width: 60px;
    height: 60px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    color: var(--c-accent);
    font-size: 40px;
}

.swiper-button-next {
    transform: translateY(-50%)translateX(-10px);
    right: 10px
}

.swiper-button-prev {
    transform: translateY(-50%)translateX(10px);
    left: 10px
}

.background-parent {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    aspect-ratio: 1.618/1
}

.img-size.n1 {
    z-index: 1;
    width: 51.5%;
    filter: blur(23px) saturate(3) brightness(1.1)
}

.img-size.n2 {
    position: absolute;
    z-index: 4;
    width: 37.5%;
    opacity: .95;
    mix-blend-mode: difference
}

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

.enclosure-decoration,
.preface,
.summarize {
    background: var(--c-white)
}

.blog-card,
#ez-toc-container.ez-toc-v2 {
    border-radius: var(--radius-lg)
}

.accordion-sub .flex-layout .icon i::before,
.fi-tr-graduation-cap::before,
i.fi.fi-brands-apple::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)
}

.profile-card {
    border-radius: 1em 1em 3em 1em;
    text-align: center;
    overflow: hidden;
}

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

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

.profile-card.ver-2 img {
    position: absolute;
    inset: 0 auto auto 0;
    border-radius: unset;
    opacity: 0;
    transition: opacity 0s;
}

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

.site-operator {
    border: solid 8px var(--c-accent-border)
}

.operator-name {
    position: relative;
    width: 100%;
    background: #64c3ff;
    font-weight: 600;
    letter-spacing: var(--tracking-base);
    font-size: clamp(1.35em, 5.3vw, 1.5em);
    height: 1.7em;
    display: flex;
    align-items: center;
    margin: -1.7em 0 0;
    justify-content: center;
    gap: 0.2em;
}

.profile-card.ver-2.animation img {
    opacity: 1
}

.profile-card.ver-2 img.n1 {
    position: relative;
    transition-delay: 1.34s
}

.profile-card.ver-2 img.n2 {
    transition-delay: 1.06s
}

.profile-card.ver-2 img.n3 {
    transition-delay: 0.78s
}

.profile-card.ver-2 img.n4 {
    transition-delay: 0.5s
}

.profile-card.ver-2 .cover-photo span {
    right: 16px;
    bottom: 17.5%
}

.operator-name::before {
    width: 1.1em;
    height: 0.8em;
    content: "";
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/creative-japanese-flag.svg");
    background-repeat: no-repeat;
    position: relative;
    top: 0.04em;
}

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





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

b,
strong {
    font-size: .975em;
    font-weight: 500;
    letter-spacing: .55px
}

.fw {
    font-size: .975em;
    font-weight: 400
}

.mobile .fw,
.mobile .fw-ul {
    font-weight: 500
}

.fw-ul {
    border-bottom: 2px solid;
    font-weight: 400
}

.fi-brands-android::before {
    font-size: 1.05em
}

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

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

.box .title i::before {
    padding-right: .12em
}

.fi-brands-windows::before {
    font-size: .77em
}


.cs {
    margin-left: .3em
}

.cs-1 {
    margin-left: .2em
}

.cs-2 {
    margin-left: .15em
}

.cs-3 {
    margin-left: .07em
}

.cs-4 {
    margin-right: .07em
}

.cs-5 {
    margin-right: .12em
}

.cs-8 {
    margin-right: .16em
}

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

.entry-content :is(ol, ul) li {
    margin-bottom: 1em
}

.entry-content :is(ol, ul, ul.site-mascot) li:last-child {
    margin-bottom: 0
}

.entry-content ol li {
    margin-left: .9em
}

.entry-content ul li {
    position: relative;
    margin-left: 1.1em;
    padding-left: .3em
}

ol.list-numbering li::before {
    left: -1.4em;
    background: none
}

ol.list-numbering li::after {
    position: absolute;
    top: 0;
    left: -.4em;
    content: "."
}

.entry-content ul li::before {
    position: absolute;
    left: -1em;
    color: inherit;
    font-family: uicons-thin-rounded;
    transform: translate3d(0, 0, 0)
}

.bold::before {
    top: .05em;
    font-weight: bold
}

ul.list-square li::before {
    top: 36%;
    width: .55em;
    height: .55em;
    content: " ";
    border-radius: 1.5px;
    background: var(--c-accent)
}

.entry-content ul:is(.list-question, .list-feedback-review, .site-mascot) li {
    padding-left: .17em
}

ul:is(.list-big-circle, .list-square, .list-small-circle) li {
    padding-left: 0
}

ul.list-square li {
    line-height: 1.48
}

ul.list-check-2 li::before {
    font-family: uicons-regular-rounded;
    content: "\f3c4"
}

ul.list-check li::before {
    top: .06em;
    content: "\e3d8"
}

ul.list-star-shooting li::before {
    left: -1.04em;
    content: "\f1b5"
}

ul.list-question li::before {
    left: -1.05em;
    content: "\e503"
}

ul.list-finger li::before {
    left: -.9em;
    content: "\e597"
}

ul.list-feedback-review li::before {
    top: -.05em;
    left: -1.06em;
    content: "\e795"
}

ul.list-big-circle li::before {
    top: .43em;
    left: -1.1em;
    width: .75em;
    height: .75em;
    content: "";
    border-radius: 50%;
    background: var(--c-accent)
}

ul.list-small-circle li::before {
    top: .55em;
    width: .5em;
    height: .5em;
    content: "";
    border-radius: 50%;
    background: var(--c-accent)
}

.entry-content ul.site-mascot li {
    margin: 0 2.4em 1.3em
}

.lead-lines-on-both-sides {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    text-align: center;
    line-height: 1.42;
    font-size: 1.03em;
    font-weight: 400
}

.stretch.trigger {
    display: inline-block
}

.lead-lines-on-both-sides::before,
.lead-lines-on-both-sides::after {
    width: 8%;
    min-width: 42px;
    height: 2px;
    margin-top: 2px;
    opacity: 0;
    content: "";
    border-radius: 10px;
    background: #28405d
}

.supplement {
    opacity: 0;
    text-align: center;
    font-size: .98em;
    font-weight: 400
}

.supplement::before,
.supplement::after {
    display: inline-block;
    padding: 0 .15em;
    content: "～";
    opacity: 0
}

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

.fi-tr-question::before {
    font-size: .95em
}

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


figcaption {
    margin-top: 9px;
    padding: 0 .3em;
    text-align: center;
    font-size: .9em;
    line-height: 1.3
}

.enclosure-decoration {
    display: flex;
    align-items: center;
    min-height: 7em;
    margin: 1.5em 0;
    padding: 1.4em 1.1em
}

.preface,
.summarize {
    margin: 1.5em auto;
    padding: .75em 1.2em 1.3em
}

.summarize {
    margin-top: 2em;
    padding: .75em 1.2em
}

.preface.end {
    background: transparent
}

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

.invisible-pc-tb {
    opacity: 0
}

.single .article-header .cat-name {
    --cat-pad-left-base: 3.2em;
    --cat-pad-adjust: 0;
    --cat-letter-spacing: normal;
    --cat-icon-left-base: -1.14em;
    --cat-icon-left-adjust: 0;
    --cat-icon-image: none;
    position: absolute;
    top: -17.5px;
    left: -.3em;
    display: flex;
    align-items: center;
    padding: .35em .6em .35em calc(var(--cat-pad-left-base) + var(--cat-pad-adjust));
    font-size: 18px;
    font-weight: 400;
    letter-spacing: var(--cat-letter-spacing);
    text-shadow: 0 0 8px #0000001c;
    background: linear-gradient(var(--c-white), #f8f8f8);
    border-radius: 2px 5px 5px 1px
}

.single .article-header .cat-name::before {
    position: absolute;
    width: 29px;
    height: 45.5%;
    margin-left: calc(var(--cat-icon-left-base) + var(--cat-icon-left-adjust));
    content: "";
    background-image: var(--cat-icon-image);
    background-repeat: no-repeat;
    background-size: 1em
}

.single .article::before {
    position: absolute;
    top: 0;
    width: 100%;
    height: 240px;
    background: var(--c-bg-main);
    border-radius: 10px 10px 0 0
}

.single #custom_html-15 {
    display: none
}

.single h1:not(#logo h1) {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 2.8em;
    margin: 0 0 .5em;
    font-size: clamp(22.2px, 3.7vw, 29.8px);
    text-align: justify
}


















.blog-card {
    width: 100%;
    max-width: 575px;
    margin: 1.5em auto;
    transition: transform .25s ease-out
}

.single .article-header .cat-name::after {
    position: absolute;
    top: 98.8%;
    left: 0;
    z-index: -1;
    content: "";
    border: none;
    border-bottom: solid 12px transparent;
    border-right: solid 12px var(--c-text)
}

.single :is(.expansion, .ending) {
    position: relative;
    margin-inline: -30.5px;
}

.single :is(h3, h4) {
    position: relative;
    line-height: 1.26;
    display: flex;
    align-items: center;
    padding-left: 14.5px
}

.single :is(h3, h4)::before {
    position: absolute;
    left: 0;
    width: 6px;
    content: "";
    background: linear-gradient(to top, var(--c-dark) 70%, var(--c-accent) 0);
    border-radius: 1.5px
}

.single h3 {
    margin: 1.5em 0 1.4em;
    font-size: clamp(22px, 3.7vw, 26.8px)
}

.single h3::before {
    bottom: 1%;
    height: 93%
}

.single h3::after {
    position: absolute;
    left: 0;
    bottom: -8.5px;
    width: 100%;
    height: 2.5px;
    content: "";
    background: linear-gradient(to left, var(--c-accent) 20%, var(--c-text) 0);
}

.single h4 {
    margin: 1.5em 0 1em;
    font-size: clamp(21px, 3.5vw, 25px)
}

.single h4::before {
    bottom: 4%;
    height: 87%
}

.single h5 {
    position: relative;
    display: flex;
    align-items: center;
    margin: 1.5em 0 1em;
    font-size: clamp(19.5px, 3.5vw, 21.6px)
}

.single .entry-content h2 {
    display: flex;
    align-items: center;
    min-height: 3.55em;
    margin: 2.5em 0 1em;
    padding: 14px .85em;
    font-size: clamp(22.2px, 5vw, 27px);
    background: #43b9ff;
    border-radius: 32px 10px 32px 10px;
    box-shadow: var(--shadow-soft-2);
    text-shadow: 0 3px 2px #ffffff0f, 0 -3px 2px #0000000f;
}

.single .ac-main-inside::after {
    position: absolute;
    bottom: -.5px;
    left: 0;
    width: 100%;
    height: calc(3vw + 45px);
    content: "";
    background: var(--c-panel);
    clip-path: polygon(0 0, 100% calc(2.5vw + 49px), 100% 100%, 0% 100%)
}


.single .cat-name:is(.cat-id-310, .cat-id-342) {
    --cat-pad-adjust: .05em;
    --cat-letter-spacing: .3px;
    --cat-icon-left-adjust: -.04em;
}

.single .cat-name.cat-id-310 {
    --cat-icon-image: url("https://self-traveling-thailand.jp/wp-content/uploads/tour-guide-people-ico-2.svg");
}

.single .cat-name.cat-id-322 {
    --cat-pad-adjust: .03em;
    --cat-icon-left-adjust: -.04em;
    --cat-icon-image: url("https://self-traveling-thailand.jp/wp-content/uploads/taxi-icon-2.svg");
}

.single .cat-name.cat-id-342 {
    --cat-icon-image: url("https://self-traveling-thailand.jp/wp-content/uploads/wordpress-icon-4.svg");
}

.single .cat-name.cat-id-352 {
    --cat-pad-adjust: .08em;
    --cat-letter-spacing: .3px;
    --cat-icon-left-adjust: .04em;
    --cat-icon-image: url("https://self-traveling-thailand.jp/wp-content/uploads/rocket-icon-3.svg");
}

.single .cat-name.cat-id-286 {
    --cat-pad-adjust: -.1em;
    --cat-icon-left-adjust: .02em;
    --cat-icon-image: url("https://self-traveling-thailand.jp/wp-content/uploads/map-marker-icon-2.svg");
}

.single .cat-name.cat-id-333 {
    --cat-pad-adjust: -.14em;
    --cat-letter-spacing: .3px;
    --cat-icon-left-adjust: .09em;
    --cat-icon-image: url("https://self-traveling-thailand.jp/wp-content/uploads/plate-utensils-icon-2.svg");
}

.single .cat-name.cat-id-313 {
    --cat-pad-adjust: 0;
    --cat-letter-spacing: .3px;
    --cat-icon-left-adjust: -.01em;
    --cat-icon-image: url("https://self-traveling-thailand.jp/wp-content/uploads/hotel-icon-3.svg");
}

.single .vcard {
    margin: 0 0 .4em;
    overflow: auto
}

.single .vcard .time__date {
    display: inline-flex;
    align-items: center;
    padding-right: 30px;
    font-size: 17px;
    letter-spacing: .5px
}

.image-elements {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 1.618/1
}

.single .footer-cloud {
    opacity: 0;
    transition: opacity 2.4s ease-in, transform 27s cubic-bezier(.33, .19, .53, .93)
}

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

.table-flex ::-webkit-scrollbar {
    background: #000
}

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

rt {
    position: relative;
    top: -.4px;
    font-size: 46%;
    text-align: center
}

.sf {
    font-size: .9em
}

.sf-2 {
    font-size: .83em;
    line-height: 1.45
}

.sf-3 {
    font-size: 13px
}

.lf {
    font-size: 1.03em
}

.lf-3 {
    font-size: 1.1em
}

.lf-4 {
    font-size: 1.2em !important
}

.tc,
.tc-pc-tb,
.tc-pc {
    display: block;
    text-align: center !important
}

.tr {
    display: block;
    text-align: right !important
}

.tl {
    display: block;
    text-align: left !important
}







@media (min-width: 768px) {

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



    .related_article p.ttl {
        margin-top: -2.5px;
        font-size: 0.97em;
    }



    .modal-box {
        width: 50%;
    }

    .mobile-scrollbar {
        display: none;
    }

    .ac-sub-inside-2,
    .ac-sub-inside-3 {
        margin: -19px -1.5em 1.5em;
    }

    .ac-sub-inside-2 {
        padding: 2.45em 1.5em;
    }

    .ac-sub-inside-3 {
        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%;
    }

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

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

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

    .table-container .inner,
    .parallel-layout-scroll,
    .table-flex {
        cursor: grab;
    }
}

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

    .menu-item-258456 ul.sub-menu,
    .menu-item-258486 ul.sub-menu {
        /*  width: 141px;*/
    }

    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) {
    .widgettitle {
        padding: 1.07em .75em;
        font-size: 20px
    }

    #sidebar1 {
        width: 332px;
        margin: -30px 0 0 30px
    }

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

    .operator-name {
        font-size: 1.15em
    }

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

    #container .related_article {
        width: 80%;
    }

    .modal-box {
        width: 60%;
    }

    #my-toc-content .ez-toc-list::-webkit-scrollbar {
        display: none;
    }

    #my-toc-content .ez-toc-list li a:hover::before {
        transform: scale(0);
        transition-timing-function: ease;
    }



    #my-toc-content li.active a {
        color: white;
        max-height: 78px;
    }

    #my-toc-content li.active a::before {
        background: var(--c-white);
        color: #103750;
    }

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

    #my-toc-content .ez-toc-list {
        height: 495px;
        padding: 16px 8px;
        overflow-y: auto;
        border-radius: 18px;
        background: var(--c-white);
        box-shadow: 6px 6px 16px -12.5px #fff, -6px -6px 16px -12.5px #707070;
        scrollbar-width: none;
        counter-reset: my-toc-counter;
    }

    #my-toc-content li a {
        display: flex;
        align-items: center;
        padding: 23px 10px;
        color: var(--c-text);
        font-size: 16.5px;
        font-weight: 500;
    }

    #my-toc-content .active {
        background-color: var(--c-dark-3);
        transition: background-color 1s cubic-bezier(0.3, 0, 0.58, 1);

    }

    #my-toc-content li {
        counter-increment: modal-counter;
        border-radius: 32px 10px 32px 10px;
        transition: background-color 0.3s cubic-bezier(0.3, 0, 0.58, 1);
    }

    .single #my-toc-container .widgettitle {
        display: block;
    }

    .stepbar {
        margin: 0 auto;
    }


}

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





    .postid-408774 .parallel-layout-scroll {
        margin: 0;
    }

    .table-container {
        margin-bottom: 1.5em;
    }

    .ac-sub-inside-2,
    .ac-sub-inside-3 {
        margin: -19px -1.2em 1.5em;
    }

    .ac-sub-inside-2 {
        padding: 2.45em 1.2em;
    }

    .ac-sub-inside-3 {
        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 {
        padding: 10px 14px;
    }

    .parallel-layout-scroll {
        margin: 0.5em 0 -36px;
    }

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

    .blog-card figure {
        width: calc(-40vw + 786px);
    }

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

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

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

    .related-box li .date {
        margin: 0 0 0 calc(2.2vw + 18.5px);
        font-size: calc(2.2vw + 3.8px);
    }

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

    .table-corporate-style {
        margin: 2em -1.2em 1.5em;
    }

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

    /*
  .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;
    transition: 0.2s;
  }*/
    /* 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;
    }

    /*
  .mean-nav ul li a.mean-expand.mean-clicked {
    width: calc(16.1% + 47px);
    background: var(--c-menu-text)
  }*/


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

    /*
  .mean-nav ul li li a.mean-expand.mean-clicked {
    width: calc(16.1% + 28px);
  }*/

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


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



    .single .related-box a:hover img {
        transition: transform 0.1s 0s ease-out, filter 0.02s ease-out;
    }

    .preface {
        padding: .6em .8em 1.1em
    }

    .summarize {
        padding: .75em .8em
    }

    .single .vcard {
        margin: 0 0 .4em
    }

    .single .article-header .cat-name {
        top: -14.5px;
        font-size: 16.5px;
        --cat-pad-left-base: 2.95em;
    }

    .single :is(.expansion, .ending) {
        margin-inline: -1.21em
    }

    .single .vcard .time__date {
        font-size: 15px
    }

    .single .cat-name:is(.cat-id-310, .cat-id-322) {
        --cat-pad-adjust: .03em
    }

    .single .cat-name.cat-id-313 {
        --cat-pad-adjust: -.01em
    }

    .single .cat-name.cat-id-342 {
        --cat-pad-adjust: 0
    }

    .single .cat-name.cat-id-352 {
        --cat-pad-adjust: .02em
    }

    .single .cat-name.cat-id-286 {
        --cat-pad-adjust: -.05em
    }

    .single .cat-name.cat-id-333 {
        --cat-pad-adjust: -.2em
    }

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

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

@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,
    .supplementary-title-layout {
        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.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-2:before {
        border-bottom: 21px solid #ffb88f;
    }

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

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

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

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

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

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

    .ez-toc-counter nav ul li a::before {
        margin: 0 0 0 0.7em;
    }

    #ez-toc-container ul li a:after {
        left: 2.3em;
    }

    .ac-sub-inside-3 p,
    .ac-sub-inside-3 .wp-block-code {
        padding: 0 0.6em;
    }

    .index-modal #ez-toc-container.ez-toc-v2 {
        min-width: unset;
    }

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

    .sns li a {
        font-size: 66%;
    }

    .sns .hatebu a {
        padding: 17% 0 24.9px;
    }

    .sns .pocket a {
        padding: 17% 0 24.2px;
    }

    .sns .instagram a {
        padding: 17% 0 5.8px;
    }

    .sns .facebook a {
        padding: 17% 0 6.2px;
    }

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

    .circle .m-s-b-icon {
        min-width: 4.4em;
        max-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,
    .ac-sub-inside-3 {
        margin: -19px -0.6em 1.5em;
    }

    .ac-sub-inside-2 {
        padding: 2.45em 0.6em;
    }

    .ac-sub-inside-3 {
        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);
    }

    .related-box li .eyecatch {
        margin-bottom: -1px;
        box-shadow: 0 8px 16px -8px #c1c6c8;
    }

    .stone.n2 {
        margin-top: calc(-2.2vw + 477px);
    }

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

    .stepinside {
        margin: 0 0 0 1.2em;
    }

    .table-corporate-style {
        margin: 2em -0.8em 1.5em;
    }

    .fa-facebook-f:before,
    .fa-facebook:before {
        top: 0.15em;
    }


    .introduction {
        padding: 0 13px;
        line-height: 1.76;
    }

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

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

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

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

    .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;
        border-bottom: 2.7px solid #d9a7c7;
        box-shadow: none;
        font-size: 11.5px;
    }

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

    .invisible-pc-tb {
        opacity: 1
    }

    .single :is(.expansion, .ending) {
        margin-inline: -.71em
    }

    .tc-pc-tb {
        text-align: left !important
    }

    .entry-content ol li {
        margin-left: .8em
    }


    .single .article-header .cat-name {
        top: -9.7px;
        font-size: 14.2px;
        --cat-pad-left-base: 2.43em;
    }

    .single .vcard {
        margin: 0 0 .21em
    }

    .single .vcard .time__date {
        padding-right: 22px;
        font-size: 13px
    }

    .single .cat-name {
        padding-right: .65em !important
    }

    .single .cat-name:is(.cat-id-313, .cat-id-322) {
        --cat-pad-adjust: 0
    }

    .single .cat-name:is(.cat-id-310, .cat-id-342) {
        --cat-pad-adjust: .04em
    }

    .single .cat-name.cat-id-352 {
        --cat-pad-adjust: -.03em
    }

    .single .cat-name.cat-id-286 {
        --cat-pad-adjust: -.1em
    }

    .single .cat-name.cat-id-333 {
        --cat-pad-adjust: -.18em
    }






}

/*
@media (min-height: 700px) {
  .modal-box {
    width: 96%;
  }
}*/


/* =========================================================
   Hamburger Keyframes  &  Motion Tokens
========================================================= */
/*
@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 bar-hide {

    0%,
    49.8% {
        opacity: 1;
    }

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

@keyframes bar-show {

    0%,
    77% {
        opacity: 0;
    }

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


/*
@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 hamburger-first-line {
0% {width: 26%;transform: translateY(10px)rotate(45deg)}
30% {width: 26%;transform: translateY(10px)rotate(0)}
80% {width: 55%;transform: translateY(10px)rotate(0)}
100% {width: 55%;transform: translate(0)rotate(0)}
}
@keyframes active-hamburger-first-line {
0% {transform: translate(0)rotate(0)}
50% {width: 55%;transform: translateY(10px)rotate(0)}
80% {width: 26%;transform: translateY(10px)rotate(0)}
100% {width: 26%;transform: translateY(10px)rotate(45deg)}
}
@keyframes hamburger-third-line {
0% {width: 26%;transform: translateY(-10px)rotate(-45deg)}
30% {width: 26%;transform: translateY(-10px)rotate(0deg)}
80% {width: 55%;transform: translateY(-10px)rotate(0)}
100% {width: 55%;transform: translate(0)rotate(0)}
}
@keyframes active-hamburger-third-line {
0% {transform: translate(0)rotate(0)}
50% {width: 55%;transform:translateY(-10px)rotate(0)}
80% {width: 26%;transform:translateY(-10px)rotate(0)}
100% {width: 26%;transform:translateY(-10px)rotate(-45deg)}
}*/
/*
@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: 26%;
  }

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

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

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

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

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

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

    21% {
        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 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(-1.1vw, -1.1vw) scale(1.08);
    }

    46% {
        transform: translate(0.4vw, 0.25vw) scale(1.03);
    }

    69% {
        transform: translate(-2.5vw, 1.25vw) 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 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: 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);
    }
}

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

@keyframes scrolldown {
    0% {
        opacity: 0;
        bottom: 40px;
    }

    40%,
    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        bottom: -5px;
    }
}






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

/* --- 開錠演出（LCP完全封殺 ※JS起因は除く） --- */
/* 錠（CSS準備）が外れた瞬間にフェードイン */
: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);
}