/* -----------------------------------------------------------------
   Role: 投稿ページ専用 同期CSS (FV/骨格用)
   Rule: ID別ファイルがない場合に自動発動。
   ----------------------------------------------------------------- */



/* =========================================================
   標準セット
========================================================= */

:root {
    --c-text: #1a2026;
    --c-bg: #eff4fc;
    --c-bg-main: #fafafa;
    --c-header-stripe: #cbeaff;
    --c-glass: #ffffff1c;
    --c-menu-text: #fbbf24;
    --c-menu-bg: #3a4652;
    --c-contact-text: #6d6d6d;
    --c-white: #fff;
    --c-panel: #fafafa;
    --c-accent: #72c8ff;
    --c-dark-2: #272d31;
    --c-dark: #0e7ac7;
    --c-dark-3: #475159;
    --c-bg-light: #f8f9fa;
    --shadow-soft: 6px 6px 16px -12.5px #fff, -6px -6px 16px -12.5px #707070;
    --shadow-soft-2: 6px 6px 12px -8.5px #fff, -6px -6px 12px -8.5px #c5c5c5;
    --shadow-profile-bg: -6px -6px 16px -12.5px #000;
    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 15px;
    --radius-nav: 2.7em 1em 2.7em 1em;
    --radius-widget: 10px;
    --tracking-base: .5px;
    --tr-fast: .1s;
    --tr-bg: background 1.5s ease-in-out;
    --tr-bg-fast: background .3s cubic-bezier(.25, 1, .5, 1);
    --tr-title: opacity .4s ease-out;
    --ease-smooth: cubic-bezier(0.1, 0.36, 0.2, 1);
    --scroll-n1-b: auto;
    --scroll-n2-b: auto;
    --scroll-n3-b: auto;
    --mean-nav-mt: 86px;
    --swiper-theme-color: #007aff;
    --c-accent-border: #0094ff4d;
    --c-accent-blur: #9dd6ff4d;
    --welcome-w: 14.2%;
    --welcome-l: 27.4%;
    --welcome-t: clamp(25%, calc(25% + 2.38vw - 18.27px), 27%);
    --site-title-w: 38%;
    --site-title-l: 16.5%;
    --site-title-t: 38.2%;
    --site-title-h: 25.4%;
    --catch-w: 27%;
    --catch-l: 21.2%;
    --catch-t: clamp(66%, calc(66% + 3.57vw - 22px), 70%);
}

html {
    scrollbar-gutter: stable;
    font-family: "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%
}

/* 投稿ページ・固定ページの中身、全ページのフッターを隠匿 */
:is(.single, .page) #content,
#fortress-footer-gate {
    opacity: 0;
}

#main .article {
    background: var(--c-bg-main);
}

*,
*::before,
*::after {
    box-sizing: border-box
}

body {
    margin: 0;
    color: var(--c-text);
    background-color: var(--c-bg);
    font-size: 17.8px;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.7px;
    word-wrap: break-word;
    word-break: break-all;
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

#content {
    margin: 29px 0;
}

#container {
    overflow: clip;
}

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

p,
figure {
    margin-block: 1.5em
}

figure {
    margin: auto
}

a {
    background: transparent;
    text-decoration: none;
    text-shadow: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.entry-content p a,
figcaption a {
    color: #0066ff;
    transition: color .18s ease-out;
}

:is(dl, menu, ol, ul, button, input, select, textarea) {
    margin: 0;
    outline: 0;
}

:is(ol, ul) {
    padding: 0;
    list-style: none;
}

menu {
    padding: 0;
    padding-left: 40px;
}

img {
    vertical-align: bottom;
    width: 100%;
    max-width: 100%;
    height: auto;
}

:is(button, select) {
    appearance: none;
    border: none;
    text-transform: none;
}

:is(button, input[type="button"], input[type="submit"]) {
    cursor: pointer;
}

:is(button, input):disabled {
    cursor: default;
}

.mobile_site_description {
    display: none;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
    display: block;
    border: 0;
    border-radius: var(--radius-sm);
    transition: background-color 1.5s ease-in-out
}

textarea {
    overflow: auto;
    vertical-align: top
}

input[type="search"]:not(.header input[type="search"]),
.fa-search:not(.header .fa-search)::before {
    display: none
}

#inner-header {
    position: relative;
    width: 100%;
}

#logo {
    position: relative
}

#logo div {
    position: absolute;
}

#main .article-header {
    position: relative;
    padding: 0 1.3em
}

.site-logo {
    position: absolute;
    mix-blend-mode: soft-light
}

.wrap {
    width: 95%;
    margin: 0 auto;
    max-width: 1230px;
}

#sidebar1 {
    max-width: 462px;
    margin: 18px auto 0
}

.header {
    position: relative;
    z-index: 2;
    overflow: clip;
    background: #a1ddff;
    box-shadow: 0 16px 16px -26.5px #000;
}

.header-info {
    position: relative;
    z-index: 3;
    height: .8em;
    background: repeating-linear-gradient(45deg, #fff, #fff 2.5px, var(--c-header-stripe) 0, var(--c-header-stripe) 11px)
}

.header .scroll-infinity {
    position: absolute;
    z-index: 3;
    display: flex;
    overflow: hidden;
    pointer-events: none;
    width: 100%;
    left: 0;
    height: 54px;
    contain: paint;
}

.header .scroll-infinity.n1 {
    bottom: var(--scroll-n1-b)
}

.header .scroll-infinity.n2 {
    bottom: var(--scroll-n2-b)
}

.header .scroll-infinity.n3 {
    bottom: var(--scroll-n3-b)
}

.header .scroll-infinity-container {
    display: flex
}

.header .scroll-infinity-item img {
    max-width: 1347px;
    height: 54px;
    margin: 0 -.4px;
    width: 100vw;
}

.subnav {
    position: absolute;
    top: 0;
    width: 100%
}

.subnav .site_description {
    font-weight: 400
}

.subnav .site_description img {
    width: 1.13em;
    margin: 0 .14em .36em 0
}

.subnav form div {
    position: relative
}

.subnav form button {
    position: absolute;
    top: 0;
    background: none;
    font-size: 14px;
    height: 51px;
}

.subnav .contactbutton {
    float: right;
    text-align: center
}

.subnav .contactbutton a i {
    position: relative;
    left: -.23em
}

.subnav .contactbutton a[href^="tel"] i::before {
    content: "\f095"
}

.nav li li span {
    display: none
}

.tropical-island {
    width: 71%;
    left: 51.5%;
    top: 3.7%;
    z-index: 2
}

[target="_blank"]::after {
    position: relative;
    top: .01em;
    padding: 0 .2em;
    font-family: "uicons-regular-rounded";
    font-size: 0.85em;
    content: "\e10a"
}

#main .article,
.background-parent,
.single .wp-block-video video:not(.blog-card video),
.enclosure-decoration,
.preface,
.summarize {
    border-radius: var(--radius-md)
}

:is(#main .article footer, .box, .modal-box, .modal-text, .enclosure-decoration, .poppy-layout, .question-layout, .merit-demerit, .gallery-text, .preface, .m-s-b-comment, .summarize) p,
.accordion-main h3 {
    margin: 0
}

.screen-reader-text {
    position: absolute;
    clip-path: inset(50%)
}

:is(.widgettitle, .subnav .contactbutton a, .subnav form input, .nav>li, .swiper-button-next, .swiper-button-prev, .enclosure-decoration, .preface, .summarize, .single .article-header .cat-name) {
    box-shadow: var(--shadow-soft);
}

.flag {
    width: 5.1%;
    left: 13.7%;
    top: 11.9%;
    transform: rotateX(90deg);
    transform-origin: bottom;
    animation: home-position .8s 1.8s cubic-bezier(.3, .1, .25, 1.8) forwards
}

#logo .clouds {
    width: 18%
}

#logo .clouds.n1 {
    left: 78.2%;
    top: 19.5%
}

#logo .clouds.n2 {
    left: 86.3%;
    top: 10.5%;
    transform: translateX(-45%);
    animation: home-position 1.6s 1s linear forwards
}

#logo .clouds.n3 {
    left: -2%;
    top: 19.5%
}

#logo .clouds.n4 {
    width: 14.7%;
    left: -2%;
    top: 10.5%;
    transform: translateX(22.3%);
    animation: home-position 1.6s 1s linear forwards
}

.sun {
    width: 14%;
    left: 66.1%;
    top: 2%;
    transform: translateY(-23%) rotate(23deg);
    transform-origin: bottom;
    animation: home-position 1.6s 1s linear forwards
}

.header-second-son,
.header-third-son {
    width: 100%
}

.header-second-son {
    left: 85%;
    top: 70%
}

.header-third-son {
    top: 71.4%;
    left: 77.5%;
    z-index: 2;
    height: 4vw;
    max-height: 51px
}

[class^="header-"][class*="-son-"] {
    background-repeat: no-repeat;
    background-size: contain;
}

.header-second-son-face,
.header-second-son-smile-face,
.header-third-son-face {
    transform-origin: bottom
}

.header-second-son-right-hand,
.header-third-son-right-hand {
    transform-origin: right
}

.header-second-son-right-hand {
    width: 3.7%;
    left: -2.75%;
    height: 1.7vw;
    max-height: 21.6px;
    margin-top: .3%;
    transform: rotate(-20deg);
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/elephant-hand-holding-the-thai-flag.svg")
}

.header-second-son-body {
    width: 3.6%;
    left: 0;
    height: 3.9vw;
    max-height: 50px;
    margin-top: 0;
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/elephant-torso.svg")
}

.header-second-son-face,
.header-second-son-smile-face {
    width: 5.8%;
    left: -1%;
    height: 4.4vw;
    max-height: 56px;
    margin-top: -3.2%;
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/elephant-face-1.svg")
}

.header-second-son-left-hand {
    width: 3.7%;
    left: 2.27%;
    height: 3vw;
    max-height: 38.5px;
    margin-top: -1.8%;
    transform: translate(-5%, -22%) rotate(76deg);
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/elephant-hand-holding-the-japan-flag.svg");
    transform-origin: left bottom;
}

.header-third-son-body {
    width: 3.2%;
    left: 0;
    height: 3.9vw;
    max-height: 48.5px;
    margin-top: 0;
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/elephant-torso-1.svg")
}

.header-third-son-left-hand {
    width: 1.4%;
    left: 2%;
    height: 1vw;
    max-height: 13px;
    margin-top: .5%;
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/elephant-hand.svg");
    transform-origin: left;
    transform: translate(0) rotate(16deg);
}

.header-third-son-face {
    width: 4.6%;
    left: -1.3%;
    height: 3.3vw;
    max-height: 40.8px;
    margin-top: -2%;
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/elephant-face.svg")
}

.header-second-son-smile-face {
    opacity: 0;
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/smiling-elephant-face.svg")
}

.header-third-son-right-hand {
    width: 1%;
    left: .1%;
    height: 1.1vw;
    max-height: 14px;
    margin-top: .15%;
    transform: translate(-23%, -18%) rotate(-10deg);
    background-image: url("https://self-traveling-thailand.jp/wp-content/uploads/elephant-hand-2.svg")
}

.header-second-son div,
.header-third-son div {
    z-index: 2
}

.welcome {
    width: var(--welcome-w);
    left: var(--welcome-l);
    top: var(--welcome-t)
}

.site-title {
    position: absolute;
    top: var(--site-title-t);
    left: var(--site-title-l);
    z-index: 9;
    width: var(--site-title-w);
    height: var(--site-title-h);
    transition: var(--tr-title)
}

.catchphrase {
    width: var(--catch-w);
    left: var(--catch-l);
    top: var(--catch-t)
}

a.site-title img {
    position: absolute;
    height: 5.2vw;
    max-height: 66px;
    transform: rotateY(180deg);
    animation: site-title-anime 1s forwards;
    backface-visibility: hidden;
    will-change: transform;
}

a.site-title img.n1 {
    width: 11%;
    left: -.3%;
}

a.site-title img.n2 {
    width: 14.3%;
    left: 14.1%;
    animation-delay: .1s
}

a.site-title img.n3 {
    width: 6.1%;
    left: 35.2%;
    animation-delay: .2s
}

a.site-title img.n4 {
    width: 14.7%;
    left: 46.7%;
    max-height: 64px;
    animation-delay: .3s
}

a.site-title img.n5 {
    width: 7.1%;
    left: 66.3%;
    animation-delay: .4s
}

a.site-title img.n6 {
    width: 7%;
    left: 80%;
    animation-delay: .5s
}

a.site-title img:is(.n7, .n8, .n9, .n10, .n11, .n12) {
    margin-top: 17.7%
}

a.site-title img.n7 {
    width: 7.5%;
    left: 24.2%;
    animation-delay: .6s
}

a.site-title img.n8 {
    width: 7.2%;
    left: 37.9%;
    animation-delay: .7s
}

a.site-title img.n9 {
    width: 6.8%;
    left: 52.5%;
    animation-delay: .8s
}

a.site-title img.n10 {
    width: 12.5%;
    left: 65.4%;
    animation-delay: .9s
}

a.site-title img.n11 {
    width: 7.1%;
    left: 83.9%;
    max-height: 64px;
    animation-delay: 1s
}

a.site-title img.n12 {
    width: 1.6%;
    left: 98.4%;
    animation-delay: 1.1s
}

.seagull {
    offset-path: path("M.3,19.7S16.35,7.52,50.96,10.29C95.05,13.82,100.92-.79,129.85.59")
}

.is-active .seagull {
    animation: fly-around-seagull 16s ease-in-out infinite
}

.seagull.n1 {
    width: 7%;
    left: 58.6%;
    top: 32%;
}

.seagull.n2 {
    width: 5%;
    left: 55%;
    top: 38.7%;
    animation-delay: 1s
}

.seagull.n3 {
    width: 4%;
    left: 59%;
    top: 41.3%;
    animation-delay: 2s
}

.fi-tr-land-layer-location::before {
    content: "\eae2"
}

.fi-tr-tour-guide-people::before {
    content: "\f2e9"
}

.fi-tr-hotel::before {
    content: "\e9ef"
}

.fi-tr-car-bus::before {
    content: "\e352"
}

.fi-tr-plate-utensils::before {
    content: "\e901"
}

.fi-tr-user-robot::before {
    content: "\f3eb"
}

.fi-tr-face-disguise::before {
    content: "\e740"
}

.fi-tr-angle-double-small-right::before {
    content: "\f376"
}

.fi-tr-land-layer-location-2::before {
    content: "\e001"
}

.fi-tr-envelope::before {
    content: "\e6f1"
}

.fi-tr-search::before {
    content: "\f015"
}

.fi-tr-time::before {
    content: "\edaf";
}

.fi-tr-caret-down::before {
    content: "\e009"
}

.fi-tr-tour-guide-people-2::before {
    content: "\e003"
}

.fi-tr-hotel-2::before {
    content: "\e004"
}

.fi-tr-car-bus-2::before {
    content: "\e005"
}

.fi-tr-plate-utensils-2::before {
    content: "\e006"
}

.fi-tr-user-robot-2::before {
    content: "\e007"
}

.fi-tr-face-disguise-2::before {
    content: "\e008"
}

.fi-tr-wishlist-star::before {
    content: "\e010"
}

.fi-tr-web-test::before {
    content: "\f490"
}

.fi-tr-lock-open::before {
    content: "\eb7c"
}

.fi-tr-lock::before {
    content: "\eb79"
}

.fi-tr-galaxy-star::before {
    content: "\e88d"
}

.fi-tr-zoom-in::before {
    content: "\f4fe"
}

.modal-box.flexibility {
    opacity: 0
}

.scroll-container,
.parallel-layout-scroll,
.table-flex,
.table-corporate-style .remarks,
.table-corporate-style .item-description,
.index-modal #ez-toc-container ul,
.box.dream-style .title {
    overflow: auto
}

#my-toc-container .widgettitle {
    display: none
}

.m-all {
    position: relative;
    max-width: 868px;
    margin: 0 auto
}

.vcard .date {
    position: relative
}

.subnav .contactbutton a {
    display: block
}

.subnav form input {
    font-family: "ヒラギノ角ゴ ProN", "ヒラギノ角ゴシック", "Noto Sans CJK JP", sans-serif;
    font-size: clamp(11px, .88vw, 13px);
    font-weight: 300;
    background: var(--c-glass);
}

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5) {
    text-rendering: optimizeLegibility;
    font-weight: 500;
    letter-spacing: var(--tracking-base)
}

:is(h1, .h1) {
    line-height: 1.37
}

:is(h2, .h2) {
    line-height: 1.28
}

.wp-block-image :where(figcaption) {
    margin-top: 9px;
    margin-bottom: unset
}

.image-elements img {
    width: 100vw;
}

.stepbarwrap:last-of-type .stepline:last-of-type,
.entry-content ul.site-mascot li::before,
.tab ul li::before {
    display: none;
}

:is(.sp, .tb, .tbs, .tbl, .pcs, .pcm, .pcl, .pc, .f-l-sp) {
    display: none !important
}

.single .entry-content {
    overflow: hidden
}

.single .header.animation-3 .scroll-infinity-container {
    animation: infinity-scroll infinite linear;
}

.single .header .scroll-infinity-container.n1 {
    animation-duration: 150s
}

.single .header.animation-3 .scroll-infinity-container.n2 {
    animation-name: infinity-scroll-2;
    animation-duration: 200s
}

.single .header .scroll-infinity-container.n3 {
    animation-duration: 250s
}

#page-top {
    position: fixed;
    right: max(5%, calc(50% - 615px));
    bottom: 6px;
    z-index: 99999;
    width: 112px;
    height: 112px;
    margin-bottom: 16px;
    border-radius: 77px;
    color: var(--c-dark-3);
    transform: translateY(150px);
    transition: transform .3s cubic-bezier(.25, 1, .5, 1);
    cursor: pointer;
    user-select: none;
    transform-origin: bottom;
}

#index-btn {
    position: fixed;
    right: max(calc(5% + 26px), calc(50% - 615px + 26px));
    bottom: 158px;
    z-index: 1000001;
    width: 62px;
    height: 62px;
    border-radius: 12px;
    color: var(--c-dark-3);
    text-align: center;
    transform: translateY(300px);
    transition: transform 0.6s cubic-bezier(0.24, 0.65, 1, 1);
    display: grid;
    align-content: center;
    gap: 0.22em;
}

.ultra-glass-layer {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(40px) saturate(250%) brightness(115%) contrast(105%);
    -webkit-backdrop-filter: blur(40px) saturate(250%) brightness(115%) contrast(105%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.45);
    border-left-color: rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.8),
        inset 0 -1px 2px rgba(255, 255, 255, 0.1),
        inset 1px 0 2px rgba(255, 255, 255, 0.2),
        0 8px 24px -4px rgba(0, 15, 30, 0.15),
        0 16px 40px -8px rgba(0, 15, 30, 0.2);
}

.is-flying .ultra-glass-layer {
    transform: translateZ(0);
    will-change: transform, backdrop-filter;
}

.ultra-glass-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
    opacity: 0.85;
}

.ultra-glass-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(115deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.05) 25%,
            rgba(255, 255, 255, 0) 50%,
            rgba(255, 255, 255, 0.02) 75%,
            rgba(255, 255, 255, 0.2) 100%);
    mix-blend-mode: color-dodge;
}

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

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

@media (min-width:880px) and (max-width:1269px) {
    .pcm {
        display: block !important
    }
}

@media (min-width:768px) and (max-width:879.9px) {
    .pcs {
        display: block !important
    }
}

@media (max-width:574px) {

    .tbs,
    .f-l-sp {
        display: block !important
    }

    .tbl,
    .f-l-pc {
        display: none !important
    }
}

@media (min-width:768px) {
    :root {
        --scroll-n1-b: .5%;
        --scroll-n2-b: 2.5%;
        --scroll-n3-b: 4.5%;
    }

    .pc {
        display: block !important
    }

    #fortress-footer-gate {
        min-height: 994px;
    }

    #logo {
        aspect-ratio: 100 / 47;
    }

    .subnav form input {
        width: 107%;
        padding: 13.5px 17% 13.5px 6%;
        backdrop-filter: blur(8px)
    }

    .subnav form div {
        left: max(-112.5px, -6.3vw - 31px);
        z-index: 2;
        float: right;
        width: calc(15vw + 80px);
        max-width: 275px;
    }

    .subnav form button {
        right: -26.8%
    }

    .contactbutton {
        width: 20.5%;
        max-width: 200px;
        margin-right: 20px;
    }

    .subnav .contactbutton a {
        position: relative;
        z-index: 2;
        padding: 1em;
        color: var(--c-contact-text);
        letter-spacing: .45px;
        background: var(--c-glass);
        backdrop-filter: blur(8px);
        border-radius: var(--radius-sm);
        transition: var(--tr-bg)
    }

    :is(.subnav .contactbutton a, .site_description) {
        font-size: clamp(12px, calc(.78vw + 6px), 16.8px);
    }

    .site_description {
        margin: 1em 0 0 23px;
    }

    .header.headercenter #g_nav,
    .header.headercenter #g_nav>.nav {
        text-align: center
    }

    .header.headercenter #g_nav>.nav {
        display: inline-block
    }

    nav#g_nav {
        position: absolute;
        left: 50%;
        z-index: 4;
        width: max-content;
        margin-top: clamp(-118.5px, -8.367vw - 18.75px, -83px);
        font-weight: 400;
        text-align: center;
        transform: translateX(-50%)
    }

    .nav>li>a i::before {
        position: relative;
        top: -0.15vw;
        font-size: calc(280% - 18px);
    }

    .nav>li>a .fi-tr-hotel::before {
        left: -0.12em;
    }

    .nav li a span.gf {
        position: absolute;
        font-size: clamp(9px, 1.2vw, 13px);
        bottom: clamp(3.6em, 4.3vw, 3.9em);
        letter-spacing: 0.6px;
    }

    .mean-nav {
        display: none;
    }

    .nav>li {
        display: inline-flex;
        justify-content: center;
        width: 12vw;
        max-width: 140px;
        margin: 0 min(10px, 1.3vw - 8px);
        font-size: clamp(12px, calc(0.76vw + 7px), 16.2px);
        background: var(--c-white);
        border-radius: var(--radius-nav);
        position: relative;
        aspect-ratio: 100 / 57.3;
    }

    .nav>li>a {
        color: var(--c-text);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4em;
        width: 100%;
        position: absolute;
        bottom: clamp(-2%, calc(-4 / 502 * (100vw - 768px) - 2%), -2%);
        letter-spacing: 0.4px;
    }

    ::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb:hover {
        background: #9fa4a7;
        border-radius: 12px
    }

    .article ::-webkit-scrollbar-thumb,
    .article ::-webkit-scrollbar-thumb:hover {
        background: #ededed
    }

    .answer::-webkit-scrollbar-thumb,
    .answer::-webkit-scrollbar-thumb:hover {
        background: var(--c-header)
    }

    ::-webkit-scrollbar {
        width: 9px;
        height: 9px;
        background: var(--c-white);
        border-radius: 12px
    }

    :is(.article, #sidebar1) ::-webkit-scrollbar {
        background: transparent
    }

    .nav li ul.sub-menu li a {
        display: flex;
        align-items: center;
        padding: clamp(12px, 4.29vw - 27.6px, 18px) 1.9em clamp(12px, 4.29vw - 27.6px, 18px) 0.8em;
        line-height: 1.4;
        text-align: left;
        color: var(--c-white);
        border-bottom: .5px #00000017 solid;
        font-size: clamp(11.8px, (1.3vw), 13.8px);
    }

    .nav li ul.sub-menu {
        width: clamp(151px, calc(13.5vw + 43px), 220px);
        opacity: 0;
        background: var(--c-menu-bg);
        border-radius: var(--radius-md);
        transition: opacity .4s ease-in-out, visibility .4s ease-in-out;
        top: calc(100% + clamp(15px, 6vw - 48px, 24px));
        position: absolute;
        z-index: 4;
        visibility: hidden;
        display: block;
    }

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

@media (min-width:1270px) {
    .pcl {
        display: block !important
    }

    #inner-content {
        display: flex;
        min-height: 650px;
    }

    #inner-content>#main {
        margin-left: 0
    }

    .single #index-btn,
    .single .index-modal {
        display: none
    }
}

@media (max-width:767px) {
    :root {
        --inner-header-pt: calc(10vw + 39px);
        --scroll-n1-b: calc(2vw - 14px);
        --scroll-n2-b: calc(2vw - 10px);
        --scroll-n3-b: calc(2vw - 6px);
        --welcome-w: 16%;
        --welcome-l: 22.9%;
        --welcome-t: calc(6vw - 45px);
        --site-title-w: 42%;
        --site-title-l: 11.3%;
        --site-title-t: 18.8%;
        --site-title-h: 43%;
        --catch-w: 40%;
        --catch-l: 11%;
        --catch-t: calc(24vw - 19px);
        --ham-line-w-min: 21%;
        --ham-line-w-max: 55%;
        --ham-line-shift: 14px;
    }

    body {
        font-size: 16.6px;
        line-height: 1.63;
    }

    .tb,
    .tbl {
        display: block !important
    }

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

    #inner-header {
        padding-top: calc(2vw + 81px);
        min-height: calc(35vw + 93px);
    }

    #fortress-footer-gate {
        min-height: 982px;
    }

    .subnav :is(.site_description, .linklist) {
        display: none
    }

    .subnav .contactbutton a {
        box-shadow: none !important;
    }

    .mean-bar {
        float: left;
        width: 100%
    }

    a.meanmenu-reveal {
        width: 19%;
        padding-top: 14px;
        right: 1px;
        position: absolute;
        z-index: 4;
    }

    .meanmenu-reveal span {
        position: relative;
        left: .6px;
        display: block;
        width: 55%;
        height: 2.5px;
        margin-top: 7.5px;
        margin-inline: auto;
        background: var(--c-text);
        border-radius: 20px;
        will-change: transform, opacity
    }

    nav#g_nav {
        display: none;
    }

    .subnav {
        width: 89%
    }

    #logo {
        aspect-ratio: 100 / 33;
    }

    .tropical-island {
        left: 45%;
        top: -32.5%
    }

    .meanmenu-reveal::after {
        display: block;
        content: "MENU";
        text-align: center;
        font-size: clamp(8px, 1.6vw, 11.2px);
        font-weight: 500;
        bottom: -8.5px;
        position: relative;
        color: var(--c-text);
    }

    .contactbutton a {
        position: relative;
        z-index: 2;
        margin-right: 6.7vw;
        color: var(--c-text) !important;
        font-size: calc(1vw + 8.5px);
        font-weight: 500;
        line-height: 66px;
        transition: opacity var(--tr-fast)
    }

    .mobile_site_description {
        position: relative;
        top: -13px;
        z-index: 2;
        display: block;
        margin: 0 0 0 5%;
        font-size: clamp(12px, 2.05vw, 15.5px);
        line-height: 1;
    }

    #main .article-header {
        padding: 0 1em
    }

    .flag {
        left: 7%;
        top: calc(2.7vw - 91.5px);
        width: 6.5%
    }

    .sun {
        left: 70.5%;
        top: calc(-1vw - 92.8px);
    }

    #logo .clouds.n1 {
        left: 80%;
    }

    #logo .clouds.n2 {
        left: 85.6%;
        transform: translateX(-30%)
    }

    #logo .clouds.n3 {
        left: -9%;
    }

    #logo .clouds.n4 {
        left: -9.1%;
    }

    #logo .clouds:is(.n1, .n3) {
        top: calc(9vw - 106.4px);
    }

    #logo .clouds:is(.n2, .n4) {
        top: calc(3vw - 102px);
    }

    .header-second-son {
        left: 76.5%;
        top: 60.5%
    }

    .header-second-son-right-hand {
        left: -3.5%;
        width: 5%;
        height: 2.5vw;
        margin-top: .3%
    }

    .header-second-son-body {
        width: 5%;
        height: 5.6vw
    }

    .header-second-son-face,
    .header-second-son-smile-face {
        left: -1.2%;
        width: 7.8%;
        height: 6vw;
        margin-top: -4.3%
    }

    .header-second-son-left-hand {
        left: 3.3%;
        width: 4.7%;
        height: 3.8vw;
        margin-top: -2.3%
    }

    .header-third-son {
        left: 65.8%;
        top: 61%;
        height: 6.4vw
    }

    .header-third-son-body {
        width: 4.8%;
        height: 6vw
    }

    .header-third-son-left-hand {
        left: 2.9%;
        width: 2.2%;
        height: 1.7vw;
    }

    .header-third-son-face {
        left: -1.8%;
        width: 6.7%;
        height: 4.8vw;
        margin-top: -2.9%
    }

    .header-third-son-right-hand {
        left: .3%;
        width: 1.5%;
        height: 2vw
    }

    a.site-title img {
        height: 5.8vw
    }

    .seagull.n1 {
        left: 56.8%;
        top: -13%
    }

    .seagull.n2 {
        left: 53.3%;
        top: -1.8%
    }

    .seagull.n3 {
        left: 56.8%;
        top: 1%
    }

    .subnav form input {
        width: calc(68% - 58px);
        padding: 12.5px 9% 12.5px 3.5%;
        text-align: center;
    }

    .fi-tr-envelope:before {
        font-weight: bold
    }

    .subnav form div {
        margin: 21px 0 0 4.3%;
        z-index: 1
    }

    .subnav form button {
        top: -3px;
        right: calc(17vw + 63px)
    }
}

@media (max-width:480px) {
    :root {
        --mean-nav-mt: 71px;
        --welcome-w: 19%;
        --welcome-l: 22%;
        --welcome-t: calc(5vw - 43px);
        --site-title-w: 44.5%;
        --site-title-t: 14.4%;
        --catch-l: 10.9%;
        --catch-t: calc(26vw - 30px);
        --ham-line-w-min: 26%;
        --ham-line-shift: 10px;
    }

    .tb {
        display: none !important
    }

    .sp {
        display: block !important
    }

    .tropical-island {
        top: -35.5%
    }

    .subnav .contactbutton a i {
        left: unset;
        display: block;
        font-size: 25.5px;
        line-height: 47px
    }

    .contactbutton a i::after {
        position: absolute;
        bottom: -27px;
        left: 0;
        width: 100%;
        content: "MAIL";
        font-size: 8px
    }

    .contactbutton a {
        height: 60px;
        margin-right: 5vw;
        overflow: hidden
    }

    a.meanmenu-reveal {
        padding-top: 5px;
    }

    .subnav form div {
        margin-top: 12px
    }

    a.site-title img {
        height: 6.2vw
    }

    .subnav form input {
        width: calc(71% - 36px)
    }

    .subnav form button {
        right: calc(16vw + 31px)
    }

    .mobile_site_description {
        top: -18.5px
    }

    #main .article-header {
        padding: 0 .7em
    }
}