/*! kiso.css v1.2.2 | MIT License | https://github.com/tak-dcxi/kiso.css */
*,:before,:after {
    box-sizing: border-box
}

:where(:root) {
    font-family: sans-serif;
    line-height: 1.5;
    text-spacing-trim: trim-start;
    text-autospace: normal;
    line-break: strict;
    overflow-wrap: anywhere;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
    -webkit-tap-highlight-color: transparent
}

:where(body) {
    min-block-size: 100dvb;
    margin: unset
}

:where(h1,h2,h3,h4,h5,h6) {
    text-wrap: pretty
}

:where(h1) {
    margin-block:.67em;font-size: 2em
}

:where(h2,h3,h4,h5,h6) {
    margin-block:unset}

:where(search) {
    display: block flow
}

:where(p,blockquote,figure,pre,address,ul,ol,dl,menu) {
    margin-block:unset}

:where(blockquote,figure) {
    margin-inline:unset}

:where(p:lang(en)) {
    text-wrap: pretty
}

:where(address:lang(ja)) {
    font-style: unset
}

:where(ul,ol,menu) {
    padding-inline-start:unset;list-style-type: ""
}

:where(dt) {
    font-weight: bolder
}

:where(dd) {
    margin-inline-start:unset}

:where(pre) {
    text-spacing-trim: space-all;
    text-autospace: no-autospace
}

:where(em:lang(ja)) {
    font-weight: bolder
}

:where(:is(i,cite,em,dfn,var):lang(ja)) {
    font-style: unset
}

:where(code,kbd,samp) {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-feature-settings: initial,none;
    font-variation-settings: initial;
    font-size: unset;
    font-variant-ligatures: none
}

:where(abbr[title]) {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    cursor: help
}

:where(time) {
    text-autospace: no-autospace
}

:where(a:any-link) {
    color: unset;
    text-decoration-line: unset;
    text-decoration-thickness: from-font
}

:where(img,svg,picture,video,canvas,model,audio,iframe,embed,object) {
    block-size: auto;
    max-inline-size: 100%;
    vertical-align: bottom
}

:where(iframe) {
    border: unset
}

:where(table) {
    border-collapse: collapse
}

:where(caption,th) {
    text-align: unset
}

:where(caption) {
    text-wrap: pretty
}

:where(button,input,select,textarea),::file-selector-button {
    border-width: max(calc(var(--vw1) * 1),1px);
    border-style: solid;
    border-color: unset;
    border-radius: unset;
    color: unset;
    font: unset;
    letter-spacing: unset;
    text-align: unset
}

:where(input:is([type=radio i],[type=checkbox i])) {
    margin: unset
}

:where(input[type=file i]) {
    border: unset
}

:where(input[type=search i]) {
    -webkit-appearance: textfield
}

@supports (-webkit-touch-callout: none) {
    :where(input[type=search i]) {
        background-color: Canvas
    }
}

:where(input:is([type=tel i],[type=url i],[type=email i],[type=number i]):not(:placeholder-shown)) {
    direction: ltr
}

:where(textarea) {
    margin-block:unset;resize: vertical
}

:where(input:not([type=button i],[type=submit i],[type=reset i]),textarea,[contenteditable]) {
    text-autospace: no-autospace
}

:where(button,input:is([type=button i],[type=submit i],[type=reset i])),::file-selector-button {
    background-color: unset
}

:where(button,input:is([type=button i],[type=submit i],[type=reset i]),[role=tab i],[role=button i],[role=option i]),::file-selector-button {
    touch-action: manipulation
}

:where(button:enabled,label[for],select:enabled,input:is([type=button i],[type=submit i],[type=reset i],[type=radio i],[type=checkbox i]):enabled,[role=tab i],[role=button i],[role=option i]),:where(:enabled)::file-selector-button {
    cursor: pointer
}

:where(fieldset) {
    min-inline-size: 0;
    margin-inline:unset;padding: unset;
    border: unset
}

:where(legend) {
    padding-inline:unset}

:where(progress) {
    vertical-align: unset
}

::placeholder {
    opacity: unset
}

:where(summary) {
    list-style-type: "";
    cursor: pointer
}

:where(summary)::-webkit-details-marker {
    display: none
}

:where(dialog,[popover]) {
    overscroll-behavior-block: contain;
    padding: unset;
    border: unset
}

:where(dialog:not([open],[popover]),[popover]:not(:popover-open)) {
    display: none!important
}

:where(dialog) {
    max-inline-size: unset;
    max-block-size: unset
}

:where(dialog)::backdrop {
    background-color: #0000004d
}

:where([popover]) {
    margin: unset
}

:where(:focus-visible) {
    outline-offset: calc(var(--vw1) * 3)
}

[tabindex="-1"]:focus {
    outline: none!important
}

:where(:disabled,[aria-disabled=true i]) {
    cursor: default
}

[hidden]:not([hidden=until-found i]) {
    display: none!important
}

@font-face {
    font-family: Local Noto Sans JP;
    src: local("Noto Sans JP")
}

:root {
    --color-base: #000;
    --color-white: #fff;
    --color-primary: #039;
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 75%, white);
    --color-secondary: #c0f;
    --color-secondary-hover: color-mix(in srgb, var(--color-secondary) 50%, white);
    --color-green: #4d6f4d;
    --color-green-features: #7c9b4f;
    --color-yellow: #dfb750;
    --color-orange: #d5752c;
    --color-brown: #724d33;
    --color-blue-gray: #7296ac;
    --color-beige-bg: #ebebe4;
    --color-bg-base: var(--color-white);
    --color-bg-black: #000;
    --color-bg-blue-gray: #cbdae0;
    --color-bg-beige: #dfdbd1;
    --color-link-base: #414141;
    --color-link-hover: color-mix(in srgb, var(--color-link-base) 50%, white);
    --rem1: .0625rem;
    --vw1: min(var(--rem1), .23255814vw);
    --content-width: calc(var(--vw1) * 370);
    --content-margin-inline: calc(var(--vw1) * 30)
}

:root {
    --font-size-x2s: calc(var(--vw1) * 10);
    --font-size-xs: calc(var(--vw1) * 12);
    --font-size-sm: calc(var(--vw1) * 14);
    --font-size-base: calc(var(--vw1) * 16);
    --font-size-lg: calc(var(--vw1) * 18);
    --font-size-xl: calc(var(--vw1) * 20);
    --font-size-x2l: calc(var(--vw1) * 22);
    --font-size-head-x2s: calc(var(--vw1) * 24);
    --font-size-head-xs: calc(var(--vw1) * 28);
    --font-size-head-sm: calc(var(--vw1) * 32);
    --font-size-head-base: calc(var(--vw1) * 36);
    --line-height-xs: 1.2;
    --line-height-sm: 1.5;
    --line-height-base: 1.75;
    --line-height-heading: 1.3;
    --letter-spacing-heading: .1em;
    --letter-spacing-heading-lg: .14em;
    --space1: calc(var(--vw1) * 4);
    --space2: calc(var(--vw1) * 8);
    --space2h: calc(var(--vw1) * 10);
    --space3: calc(var(--vw1) * 12);
    --space4: calc(var(--vw1) * 16);
    --space5: calc(var(--vw1) * 20);
    --space6: calc(var(--vw1) * 24);
    --space7: calc(var(--vw1) * 28);
    --space7h: calc(var(--vw1) * 30);
    --space8: calc(var(--vw1) * 32);
    --space9: calc(var(--vw1) * 36);
    --space10: calc(var(--vw1) * 40);
    --radius-xs: calc(var(--vw1) * 4);
    --radius-sm: calc(var(--vw1) * 6);
    --radius-base: calc(var(--vw1) * 10);
    --radius-lg: calc(var(--vw1) * 20);
    --radius-xl: calc(var(--vw1) * 30);
    --z-header: 999;
    --z-header-menu: 1000;
    --z-overlay: 9999;
    --z-loading: calc(infinity);
    --family-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Local Noto Sans JP", "Noto Sans JP", Meiryo, sans-serif;
    --family-poppins: "Poppins", sans-serif;
    --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
    --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
    --ease-out-elastic: linear(0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1);
    --ui-color-base: var(--color-base);
    --ui-color-gray: #b6bbcc;
    --ui-color-placeholder: color-mix(in srgb, var(--ui-color-base) 35%, white);
    --ui-color-disable: color-mix(in srgb, var(--ui-color-base) 55%, white);
    --ui-color-danger: #f11a0a;
    --ui-bg-base: var(--color-white);
    --ui-bg-readonly: color-mix(in srgb, var(--ui-color-gray) 15%, white);
    --ui-bg-disable: color-mix(in srgb, var(--ui-color-gray) 40%, white);
    --ui-bg-required: color-mix(in srgb, var(--ui-color-danger) 8%, white);
    --ui-border-color: var(--ui-color-gray);
    --ui-border: solid max(calc(var(--vw1) * 1), 1px) var(--ui-border-color);
    --ui-radius: calc(var(--vw1) * 6);
    --ui-transition: all .1s ease-in-out;
    --ui-outline-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
    --ui-outline: solid max(calc(var(--vw1) * 2), 1px) var(--ui-outline-color);
    --ui-outline-offset: max(calc(var(--vw1) * 1), 1px)
}

body {
    font-family: var(--family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-base);
    background: var(--color-bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body .is-menu-open {
    overflow: hidden
}

:where(h1,h2,h3,h4,h5,h6) {
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading)
}

:where(h1) {
    font-size: var(--font-size-head-base)
}

:where(h2) {
    font-size: var(--font-size-head-xs)
}

:where(a:any-link) {
    text-underline-position: from-font;
    transition: var(--ui-transition);
    transition-property: color,opacity
}

:where(textarea) {
    display: block;
    inline-size: 100%;
    resize: none
}

:where(textarea:not([rows])) {
    min-height: 3lh;
    field-sizing: content
}

:where(button) {
    border: none
}

:root:has(:modal) {
    overflow: hidden
}

main :where(a) {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-underline-position: from-font
}

main :where(a:has(>img)) {
    display: inline-block
}

.header {
    position: absolute;
    z-index: var(--z-header);
    display: flex;
    gap: var(--space5);
    align-items: center;
    padding: var(--space5)
}

.header>.logo {
    width: calc(var(--vw1) * 40)
}

.header-menu-toggle {
    position: fixed;
    top: 0;
    right: 0;
    z-index: calc(var(--z-header-menu) + 1);
    width: calc(var(--vw1) * 90);
    height: calc(var(--vw1) * 90);
    padding: 0;
    background: var(--color-bg-blue-gray);
    border: none
}

.header-menu-toggle:before,.header-menu-toggle:after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: calc(var(--vw1) * 40);
    height: max(calc(var(--vw1) * 2),1px);
    content: "";
    background-color: var(--color-base);
    translate: -50% -50%;
    transition: translate .25s var(--ease-out-cubic);
    transition-property: translate,rotate
}

.header-menu-toggle:before {
    translate: -50% calc(-50% - calc(var(--vw1) * 8))
}

.header-menu-toggle:after {
    translate: -50% calc(-50% + calc(var(--vw1) * 8))
}

:is(body.is-menu-open .header-menu-toggle):before {
    rotate: 30deg;
    translate: -50% -50%
}

:is(body.is-menu-open .header-menu-toggle):after {
    rotate: -30deg;
    translate: -50% -50%
}

.header-menu-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--z-header-menu);
    width: calc(var(--vw1) * 358);
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--color-bg-blue-gray);
    translate: 100% 0;
    transition: translate .25s var(--ease-out-cubic)
}

.header-menu-nav[aria-hidden=false],.header-menu-nav:has(a:focus) {
    translate: 0 0
}

.header-menu-nav[aria-hidden=true] .header-menu-list * {
    animation: none!important
}

.header-menu-list {
    display: grid;
    gap: var(--space6);
    margin: calc(var(--vw1) * 100) calc(var(--vw1) * 58) calc(var(--vw1) * 90);
    font-size: var(--font-size-lg)
}

.header-menu-list>.item {
    --a-trans-in-duration: .6s;
    --a-trans-in-start-x: calc(var(--vw1) * 20);
    --a-trans-in-start-y: 0;
    --a-trans-in-delay: calc(var(--i) * .04s + .1s)
}

.footer {
    padding: var(--space10) 0;
    font-size: var(--font-size-sm);
    color: var(--color-white);
    background-color: var(--color-bg-black)
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--space9);
    align-items: center
}

.footer-content>.recommended {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.footer-content>.copyright {
    font-family: var(--family-poppins);
    font-weight: 400
}

.footer-sns-list {
    display: flex;
    gap: var(--space4);
    align-items: center;
    font-size: calc(var(--vw1) * 34);
    line-height: 1
}

.footer-recommended-modal>.container {
    padding: var(--space5)
}

.footer-recommended-info {
    position: relative;
    inset: 0;
    display: grid;
    gap: 1em 1.5em
}

.footer-recommended-info>.heading {
    margin: 0;
    font-weight: 700
}

:is(.footer-recommended-description>.info)>.grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2em
}

:is(.footer-recommended-description>.info)>.note {
    margin-top: 1em;
    font-size: 87.5%
}

:where(.a-clip-in) {
    --a-clip-in-duration: .8s;
    --a-clip-in-delay: 0s;
    --a-clip-in-easing: var(--ease-out-quart);
    animation: a-clip-in var(--a-clip-in-duration) var(--a-clip-in-easing) var(--a-clip-in-delay) both
}

@keyframes a-clip-in {
    0% {
        visibility: hidden
    }

    0.01% {
        visibility: visible;
        clip-path: inset(0 100% 0 0)
    }

    99.99% {
        clip-path: inset(0)
    }

    to {
        clip-path: none
    }
}

:where(.a-fade-in) {
    --a-fade-in-duration: .5s;
    --a-fade-in-delay: 0s;
    --a-fade-in-easing: linear;
    --a-fade-in-start: 0;
    --a-fade-in-end: 1;
    animation: a-fade-in var(--a-fade-in-duration) var(--a-fade-in-easing) var(--a-fade-in-delay) both
}

@keyframes a-fade-in {
    0% {
        opacity: var(--a-fade-in-start)
    }

    to {
        opacity: var(--a-fade-in-end)
    }
}

:where(.a-fade-out) {
    --a-fade-out-duration: .5s;
    --a-fade-out-delay: 0s;
    --a-fade-out-easing: linear;
    --a-fade-out-start: 1;
    --a-fade-out-end: 0;
    animation: a-fade-out var(--a-fade-out-duration) var(--a-fade-out-easing) var(--a-fade-out-delay) both
}

@keyframes a-fade-out {
    0% {
        opacity: var(--a-fade-out-start)
    }

    to {
        opacity: var(--a-fade-out-end)
    }
}

@keyframes a-trans-in {
    0% {
        translate: var(--a-trans-in-start-x) var(--a-trans-in-start-y)
    }

    to {
        translate: var(--a-trans-in-end-x) var(--a-trans-in-end-y)
    }
}

:where(.a-trans-in) {
    --a-trans-in-duration: .8s;
    --a-trans-in-delay: 0s;
    --a-trans-in-easing: var(--ease-out-cubic);
    --a-fade-in-start: 0;
    --a-fade-in-end: 1;
    --a-trans-in-start-x: 0;
    --a-trans-in-start-y: calc(var(--vw1) * 16);
    --a-trans-in-end-x: 0;
    --a-trans-in-end-y: 0;
    animation: a-fade-in var(--a-trans-in-duration) var(--a-trans-in-easing) var(--a-trans-in-delay) both,a-trans-in var(--a-trans-in-duration) var(--a-trans-in-easing) var(--a-trans-in-delay) both
}

:where(.a-trans-out) {
    --a-trans-out-duration: .5s;
    --a-trans-out-delay: 0s;
    --a-trans-out-easing: ease-out;
    --a-trans-out-start-x: 0;
    --a-trans-out-start-y: 0;
    --a-trans-out-end-x: 0;
    --a-trans-out-end-y: 20%;
    animation: a-trans-out var(--a-trans-out-duration) var(--a-trans-out-easing) var(--a-trans-out-delay) both
}

@keyframes a-trans-out {
    0% {
        translate: var(--a-trans-out-start-x) var(--a-trans-out-start-y)
    }

    to {
        translate: var(--a-trans-out-end-x) var(--a-trans-out-end-y)
    }
}

:where(.a-scale-in) {
    --a-scale-in-duration: .5s;
    --a-scale-in-delay: 0s;
    --a-scale-in-easing: ease-out;
    --a-scale-in-start: 0;
    --a-scale-in-end: 1;
    animation: a-scale-in var(--a-scale-in-duration) var(--a-scale-in-easing) var(--a-scale-in-delay) both
}

@keyframes a-scale-in {
    0% {
        scale: var(--a-scale-in-start)
    }

    to {
        scale: var(--a-scale-in-end)
    }
}

:where(.a-scale-out) {
    --a-scale-out-duration: .5s;
    --a-scale-out-delay: 0s;
    --a-scale-out-easing: ease-in;
    --a-scale-out-start: 1;
    --a-scale-out-end: 0;
    animation: a-scale-out var(--a-scale-out-duration) var(--a-scale-out-easing) var(--a-scale-out-delay) both
}

@keyframes a-scale-out {
    0% {
        scale: var(--a-scale-out-start)
    }

    to {
        scale: var(--a-scale-out-end)
    }
}

:where(.a-blur-in) {
    --a-blur-in-duration: .5s;
    --a-blur-in-delay: 0s;
    --a-blur-in-easing: ease-out;
    --a-blur-in-start: calc(var(--vw1) * 4);
    --a-blur-in-end: calc(var(--vw1) * 0);
    animation: a-blur-in var(--a-blur-in-duration) var(--a-blur-in-easing) var(--a-blur-in-delay) both
}

@keyframes a-blur-in {
    0% {
        filter: blur(var(--a-blur-in-start))
    }

    to {
        filter: blur(var(--a-blur-in-end))
    }
}

:where(.a-blur-out) {
    --a-blur-out-duration: .5s;
    --a-blur-out-delay: 0s;
    --a-blur-out-easing: ease-in;
    --a-blur-out-start: calc(var(--vw1) * 0);
    --a-blur-out-end: calc(var(--vw1) * 4);
    animation: a-blur-out var(--a-blur-out-duration) var(--a-blur-out-easing) var(--a-blur-out-delay) both
}

@keyframes a-blur-out {
    0% {
        filter: blur(var(--a-blur-out-start))
    }

    to {
        filter: blur(var(--a-blur-out-end))
    }
}

:where(.a-grad-in) {
    --a-grad-in-duration: 3s;
    --a-grad-in-delay: 0s;
    --a-grad-in-easing: ease-in-out;
    --a-grad-in-height: 1lh;
    --a-grad-in-mask-image: linear-gradient( to bottom, black 0%, black calc(50% - (var(--a-grad-in-height) / 2)), transparent calc(50% + (var(--a-grad-in-height) / 2)), transparent 100% );
    --a-grad-in-mask-size: 100% calc(200% + var(--a-grad-in-height));
    visibility: hidden;
    animation: a-grad-in var(--a-grad-in-duration) var(--a-grad-in-easing) var(--a-grad-in-delay) forwards
}

@keyframes a-grad-in {
    0% {
        visibility: hidden;
        -webkit-mask-image: var(--a-grad-in-mask-image);
        mask-image: var(--a-grad-in-mask-image);
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
        -webkit-mask-size: var(--a-grad-in-mask-size);
        mask-size: var(--a-grad-in-mask-size);
        will-change: mask-position
    }

    99.99% {
        -webkit-mask-image: var(--a-grad-in-mask-image);
        mask-image: var(--a-grad-in-mask-image);
        -webkit-mask-position: 0 0%;
        mask-position: 0 0%;
        -webkit-mask-size: var(--a-grad-in-mask-size);
        mask-size: var(--a-grad-in-mask-size);
        will-change: mask-position
    }

    to {
        visibility: visible;
        -webkit-mask-image: none;
        mask-image: none;
        -webkit-mask-position: 0 0%;
        mask-position: 0 0%;
        -webkit-mask-size: auto;
        mask-size: auto;
        will-change: none
    }
}

:where(.a-blink) {
    --a-blink-duration: .8s;
    --a-blink-delay: 0s;
    --a-blink-easing: linear;
    --a-blink-min: 0;
    --a-blink-max: 1;
    animation: a-blink var(--a-blink-duration) var(--a-blink-easing) var(--a-blink-delay) both alternate infinite
}

@keyframes a-blink {
    0% {
        opacity: var(--a-blink-min)
    }

    to {
        opacity: var(--a-blink-max)
    }
}

:where(.a-rotate) {
    --a-rotate-duration: 10s;
    --a-rotate-delay: 0s;
    --a-rotate-easing: linear;
    --a-rotate-direction: normal;
    animation: a-rotate var(--a-rotate-duration) var(--a-rotate-easing) var(--a-rotate-delay) both infinite var(--a-rotate-direction)
}

@keyframes a-rotate {
    0% {
        rotate: 0deg
    }

    to {
        rotate: 360deg
    }
}

:where(.a-fluffy) {
    --a-fluffy-duration: 8s;
    --a-fluffy-delay: 0s;
    --a-fluffy-easing: ease-in-out;
    --a-fluffy-x: 0%;
    --a-fluffy-y: 20%;
    animation: a-fluffy-translate var(--a-fluffy-duration) var(--a-fluffy-easing) var(--a-fluffy-delay) both infinite
}

@keyframes a-fluffy-translate {
    0% {
        translate: calc(var(--a-fluffy-x) * -.5) calc(var(--a-fluffy-y) * -.5)
    }

    50% {
        translate: calc(var(--a-fluffy-x) * .5) calc(var(--a-fluffy-y) * .5)
    }

    to {
        translate: calc(var(--a-fluffy-x) * -.5) calc(var(--a-fluffy-y) * -.5)
    }
}

:where(.a-swing) {
    --a-swing-duration: 8s;
    --a-swing-delay: 0s;
    --a-swing-easing: ease-in-out;
    --a-swing-angle: 20deg;
    animation: a-swing-rotate var(--a-swing-duration) var(--a-swing-easing) var(--a-swing-delay) both infinite
}

@keyframes a-swing-rotate {
    0% {
        rotate: calc(var(--a-swing-angle) * -.5)
    }

    50% {
        rotate: calc(var(--a-swing-angle) * .5)
    }

    to {
        rotate: calc(var(--a-swing-angle) * -.5)
    }
}

:where(.a-stroke-draw) {
    --a-stroke-draw-duration: .5s;
    --a-stroke-draw-delay: .5s;
    --a-stroke-draw-easing: ease-in-out;
    --a-stroke-draw-length: 100;
    fill: none;
    stroke: var(--color-primary);
    animation: a-stroke-draw var(--a-stroke-draw-duration) var(--a-stroke-draw-easing) var(--a-stroke-draw-delay) both
}

@keyframes a-stroke-draw {
    0% {
        stroke-dasharray: var(--a-stroke-draw-length);
        stroke-dashoffset: var(--a-stroke-draw-length)
    }

    to {
        stroke-dasharray: var(--a-stroke-draw-length);
        stroke-dashoffset: 0
    }
}

.c-button {
    --c-button-text: var(--color-white);
    --c-button-text-hover: var(--color-white);
    --c-button-bg: var(--color-base);
    --c-button-bg-hover: var(--color-base);
    --c-button-border-color: var(--c-button-bg);
    --c-button-border-color-hover: var(--c-button-bg-hover);
    --c-button-border: solid max(calc(var(--vw1) * 2), 1px) var(--c-button-bg);
    --c-button-padding: var(--space2) var(--space6);
    --c-button-font-size: var(--font-size-base);
    --c-button-radius: calc(var(--vw1) * 100);
    --c-button-gap-icon: .5em;
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: calc(var(--vw1) * 256);
    padding: var(--c-button-padding);
    font-size: var(--c-button-font-size);
    line-height: 1;
    vertical-align: middle;
    color: var(--c-button-text);
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    appearance: none;
    cursor: pointer;
    background-color: var(--c-button-bg);
    border: var(--c-button-border);
    border-color: var(--c-button-border-color);
    border-radius: var(--c-button-radius);
    box-shadow: none;
    transition: var(--ui-transition);
    transition-property: color,background-color,border-color
}

.c-button:disabled,.c-button[disabled],.c-button[inert],.c-button[aria-disabled] {
    --c-button-bg: var(--ui-bg-disable);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.c-button[target=_blank]:after {
    position: absolute;
    top: 50%;
    right: var(--space3);
    display: block;
    width: calc(var(--vw1) * 12);
    aspect-ratio: 12 / 9;
    content: "";
    background: currentColor;
    mask: url("data:image/svg+xml,%3csvg%20width='12'%20height='9'%20viewBox='0%200%2012%209'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='4.02014'%20y='0.5'%20width='6.72'%20height='5.25'%20stroke='black'/%3e%3cpath%20d='M0.5%202.66699V8.50033H7.96667'%20stroke='black'/%3e%3c/svg%3e") center center / contain no-repeat;
    translate: 0 -50%
}

.c-button.is-outline {
    --c-button-text: var(--color-base);
    --c-button-bg: var(--color-white);
    --c-button-border-color: var(--c-button-text)
}

.c-button.is-yellow {
    --c-button-text: var(--color-white);
    --c-button-text-hover: var(--color-yellow);
    --c-button-bg: var(--color-yellow);
    --c-button-bg-hover: var(--color-white);
    --c-button-border-color: var(--color-yellow);
    --c-button-border-color-hover: var(--color-yellow)
}

.c-button:has(>.c-icon:first-child) {
    grid: auto/auto 1fr;
    gap: var(--c-button-gap-icon)
}

.c-button:has(>.c-icon:last-child) {
    grid: auto/1fr auto;
    gap: var(--c-button-gap-icon)
}

.c-button.is-block {
    display: grid;
    width: 100%
}

.c-button.is-center {
    display: grid;
    width: max-content;
    margin-inline:auto}

.c-button.is-lg {
    display: grid;
    width: 100%;
    max-width: calc(var(--vw1) * 330);
    padding: var(--space4) var(--space6);
    margin-inline:auto;font-weight: 700
}

.c-choice {
    --c-choice-text: var(--color-base);
    --c-choice-check: var(--color-primary);
    --c-choice-bg: var(--ui-bg-base);
    --c-choice-border-color: var(--ui-border-color);
    --c-choice-border: var(--ui-border);
    --c-choice-size: calc(var(--vw1) * 16);
    --c-choice-check-radius: calc(var(--vw1) * 4);
    --c-choice-gap-label: .5em;
    --c-choice-icon-check: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='11'%20viewBox='0%200%2016%2011'%3e%3cpath%20d='M8.821,16.47a1.386,1.386,0,0,1-.936-.356L3.47,12.057l1.873-1.721,3.478,3.2L17.6,5.47,19.47,7.19,9.757,16.113A1.386,1.386,0,0,1,8.821,16.47Z'%20transform='translate(-3.47%20-5.47)'%20fill='%230165bd'/%3e%3c/svg%3e");
    position: relative;
    display: inline-grid;
    grid: auto/auto 1fr;
    gap: var(--c-choice-gap-label);
    align-items: center;
    line-height: 1;
    vertical-align: middle;
    color: var(--c-choice-text)
}

.c-choice:before {
    width: var(--c-choice-size);
    aspect-ratio: 1;
    content: "";
    background-color: var(--c-choice-bg);
    border: var(--c-choice-border);
    border-color: var(--c-choice-border-color);
    transition: var(--ui-transition);
    transition-property: background-color,border-color,outline
}

.c-choice:after {
    position: absolute;
    top: 50%;
    left: calc(var(--vw1) * 3);
    width: calc(var(--vw1) * 10);
    aspect-ratio: 1;
    content: "";
    background-color: var(--c-choice-check);
    scale: 0;
    translate: 0 -50%;
    transition: scale .05s ease-out
}

.c-choice:focus-within:before {
    outline: var(--ui-outline);
    outline-offset: var(--ui-outline-offset)
}

.c-choice:has(input[type=checkbox]) {
    --c-choice-check: var(--color-white)
}

.c-choice:has(input[type=checkbox]):before {
    border-radius: var(--c-choice-check-radius)
}

.c-choice:has(input[type=checkbox]):after {
    left: calc(var(--vw1) * 4);
    width: calc(var(--vw1) * 9);
    aspect-ratio: 16 / 11;
    mask: var(--c-choice-icon-check) center center / contain no-repeat
}

.c-choice:has(input[type=checkbox]):has(input:checked) {
    --c-choice-bg: var(--color-primary)
}

.c-choice:has(input[type=checkbox]):has(input:checked):after {
    transition-duration: .15s
}

.c-choice:has(input[type=radio]):before,.c-choice:has(input[type=radio]):after {
    border-radius: 50%
}

.c-choice:has(input.isEmpty:required) {
    --c-choice-bg: var(--ui-bg-required)
}

.c-choice:has(input:user-invalid) {
    --c-choice-border-color: var(--ui-color-danger)
}

.c-choice:has(input:checked) {
    --c-choice-border-color: var(--color-primary)
}

.c-choice:has(input:checked):after {
    scale: 1;
    transition-duration: .1s
}

.c-choice:has(input[readonly]) {
    --c-choice-check: var(--ui-color-disable) !important;
    --c-choice-bg: var(--ui-bg-readonly) !important;
    --c-choice-border-color: var(--ui-border-color) !important;
    color: var(--ui-color-disable)!important;
    pointer-events: none!important;
    outline-width: 0
}

.c-choice:has(input:disabled) {
    --c-choice-check: var(--ui-color-disable) !important;
    --c-choice-bg: var(--ui-bg-disable) !important;
    --c-choice-border-color: var(--ui-border-color) !important;
    color: var(--ui-color-disable)!important;
    pointer-events: none
}

.c-icon,.c-icon-before:before,.c-icon-after:after {
    display: inline-block;
    height: var(--c-icon-height);
    aspect-ratio: var(--c-icon-aspect-ratio);
    line-height: 1;
    vertical-align: middle;
    background-color: currentColor;
    mask: var(--c-icon-mask) center center / contain no-repeat
}

.c-icon-before:before,.c-icon-after:after {
    content: ""
}

:where(.c-icon,.c-icon-before,.c-icon-after) {
    --c-icon-mask: url('data:image/svg+xml;charset=utf-8,%3Csvg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="none" stroke="black" stroke-width="4" stroke-dasharray="2" d="M0 0h20v20H0z"/%3E%3C/svg%3E');
    --c-icon-height: 1em;
    --c-icon-aspect-ratio: 1
}

:where(.c-icon,.c-icon-before,.c-icon-after):where(.is-sns-x) {
    --c-icon-mask: url("data:image/svg+xml,%3csvg%20width='1200'%20height='1227'%20viewBox='0%200%201200%201227'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M714.163%20519.284L1160.89%200H1055.03L667.137%20450.887L357.328%200H0L468.492%20681.821L0%201226.37H105.866L515.491%20750.218L842.672%201226.37H1200L714.137%20519.284H714.163ZM569.165%20687.828L521.697%20619.934L144.011%2079.6944H306.615L611.412%20515.685L658.88%20583.579L1055.08%201150.3H892.476L569.165%20687.854V687.828Z'%20fill='%23000'/%3e%3c/svg%3e");
    --c-icon-aspect-ratio: 1200 / 1227
}

:where(.c-icon,.c-icon-before,.c-icon-after):where(.is-sns-facebook) {
    --c-icon-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%201024'%3e%3cpath%20d='M512.973,0C230.2-.54.536,228.252,0,511.021c-.489,255.554,186.337,467.727,431.032,506.6l.684-357.777-130-.249.282-148,130,.248.216-112.8c.245-128.319,76.819-199.053,193.769-198.83,56.019.107,114.592,10.219,114.592,10.219l-.241,126-64.563-.123c-63.6-.122-83.512,39.307-83.59,79.8l-.183,96.043,142,.271L711.011,660.381l-119.3-.228-.684,357.777c244.842-37.94,432.478-249.4,432.966-504.951C1024.534,230.209,795.742.541,512.973,0Z'/%3e%3c/svg%3e")
}

:where(.c-icon,.c-icon-before,.c-icon-after):where(.is-sns-line) {
    --c-icon-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20data-name='レイヤー_1'%20viewBox='0%200%2029.96%2028.12'%3e%3cpath%20d='M29.96%2012.07C29.96%205.27%2023.17%200%2014.98%200S0%205.41%200%2012.07%205.27%2023.03%2012.48%2024c.55%200%201.11.28%201.25.69v1.25s0%20.97-.28%201.25c0%20.42-.28%201.39%201.25.69s8.6-4.99%2011.79-8.6c2.22-2.36%203.19-4.72%203.19-7.35h.14zM9.71%2015.68s0%20.28-.28.28H5.27s-.28%200-.28-.28V9.16s0-.28.28-.28h.97s.28%200%20.28.28v5.13h2.91s.28%200%20.28.28zm2.5%200s0%20.28-.28.28h-.97s-.28%200-.28-.28V9.16s0-.28.28-.28h.97s.28%200%20.28.28zm7.21%200s0%20.28-.28.28h-.97l-3.05-4.02v3.88s0%20.28-.28.28h-.97s-.28%200-.28-.28V9.3s0-.28.28-.28h.97l3.05%203.88V9.02s0-.28.28-.28h.97s.28%200%20.28.28zm5.83-5.28s0%20.28-.28.28h-2.91v.97h2.91s.28%200%20.28.28v.97s0%20.28-.28.28h-2.91v.97h2.91s.28%200%20.28.28v.97s0%20.28-.28.28h-4.16s-.28%200-.28-.28V8.88s0-.28.28-.28h4.16s.28%200%20.28.28z'/%3e%3c/svg%3e")
}

:where(.c-icon,.c-icon-before,.c-icon-after):where(.is-close) {
    --c-icon-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2077.07%2077.07'%3e%3cpath%20d='m44.9%2038.54%2032.17%2032.17-6.36%206.36L38.54%2044.9%206.36%2077.07%200%2070.71l32.17-32.17L0%206.36%206.36%200l32.17%2032.17L70.71%200l6.36%206.36z'%20/%3e%3c/svg%3e")
}

:where(.c-icon,.c-icon-before,.c-icon-after):where(.is-pin) {
    --c-icon-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2019%2028'%3e%3cpath%20fill='%23dfb750'%20d='M9.5%2013.15a3.64%203.64%200%201%201%200-7.27%203.64%203.64%200%200%201%200%207.27M9.5%200A9.5%209.5%200%200%200%200%209.5c0%205.52%204.38%208.96%206.73%2013.07C9%2026.5%209%2028.01%209.5%2028.01s.5-1.5%202.77-5.44C14.64%2018.47%2019%2015.02%2019%209.51S14.75%200%209.5%200'/%3e%3c/svg%3e");
    --c-icon-aspect-ratio: 19 / 28
}

:where(.c-icon,.c-icon-before,.c-icon-after):where(.is-sign-r) {
    --c-icon-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%206%209'%3e%3cpath%20stroke='%234d6f4d'%20d='m.35.35%204%204-4%204'/%3e%3c/svg%3e");
    --c-icon-aspect-ratio: 6 / 9
}

:where(.c-icon,.c-icon-before,.c-icon-after):where(.is-pop-tail) {
    --c-icon-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='15.5'%20height='19.1'%20viewBox='0%200%2015.5%2019.1'%3e%3cpath%20d='M.5%202.3c2%208%207.8%2014.1%2015.1%2016.8q-.9-1.95-1.5-4.2a24.3%2024.3%200%200%201%201-14.9H0c.1.8.3%201.5.5%202.3'%20fill='%23d6d2c6'/%3e%3c/svg%3e");
    --c-icon-aspect-ratio: 16 / 19
}

:where(.c-icon,.c-icon-before,.c-icon-after):where(.is-blank) {
    --c-icon-mask: url("data:image/svg+xml,%3csvg%20width='12'%20height='9'%20viewBox='0%200%2012%209'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='4.02014'%20y='0.5'%20width='6.72'%20height='5.25'%20stroke='black'/%3e%3cpath%20d='M0.5%202.66699V8.50033H7.96667'%20stroke='black'/%3e%3c/svg%3e");
    --c-icon-aspect-ratio: 12 / 9
}

:where(.c-icon,.c-icon-before,.c-icon-after):where(.is-tri-r) {
    --c-icon-mask: url("data:image/svg+xml,%3csvg%20width='8'%20height='12'%20viewBox='0%200%208%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%200V12L8%206L0%200Z'%20fill='%237C9B4F'/%3e%3c/svg%3e");
    --c-icon-aspect-ratio: 8 / 12
}

:where(.c-icon,.c-icon-before,.c-icon-after):where(.is-plus) {
    --c-icon-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20data-name='レイヤー_1'%20viewBox='0%200%2012%2012'%3e%3cpath%20d='M7%2012H5V7H0V5h5V0h2v5h5v2H7z'/%3e%3c/svg%3e")
}

:where(.c-icon,.c-icon-before,.c-icon-after):where(.is-minus) {
    --c-icon-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20data-name='レイヤー_1'%20viewBox='0%200%2012%2012'%3e%3cpath%20d='M0%205h12v2H0z'/%3e%3c/svg%3e")
}

.c-input {
    --c-input-text: var(--color-base);
    --c-input-bg: var(--ui-bg-base);
    --c-input-border-color: var(--ui-border-color);
    --c-input-border: var(--ui-border);
    --c-input-padding: .5em 1em;
    --c-input-radius: var(--ui-radius);
    --c-input-width: auto;
    --c-input-icon-select-arrow: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='11.148'%20viewBox='0%200%2020%2011.148'%3e%3cpath%20d='M14.646,22.795a1.145,1.145,0,0,1-.812-.336L4.646,13.271l1.624-1.624,8.376,8.376,8.376-8.376,1.624,1.624-9.188,9.188A1.145,1.145,0,0,1,14.646,22.795Z'%20transform='translate(-4.646%20-11.646)'%20fill='%23858ba3'/%3e%3c/svg%3e");
    inline-size: var(--c-input-width);
    padding: var(--c-input-padding);
    color: var(--c-input-text);
    appearance: none;
    outline: transparent solid 0;
    background-color: var(--c-input-bg);
    border: var(--c-input-border);
    border-color: var(--c-input-border-color);
    border-radius: var(--c-input-radius);
    transition: var(--ui-transition);
    transition-property: outline,border-color,background-color
}

.c-input:not(textarea) {
    line-height: 1
}

textarea.c-input {
    display: block;
    inline-size: 100%
}

select.c-input {
    --c-input-padding: .5625em 1em;
    padding-right: 1.875em!important;
    background-image: var(--c-input-icon-select-arrow);
    background-repeat: no-repeat;
    background-position: top 50% right .625em;
    background-size: .625em auto
}

.c-input::placeholder {
    color: var(--ui-color-placeholder)
}

.c-input:focus-visible {
    outline: var(--ui-outline);
    outline-offset: var(--ui-outline-offset)
}

.c-input:required:placeholder-shown,select.c-input:required:has(option:checked[value=""]) {
    --c-input-bg: var(--ui-bg-required)
}

.c-input:user-invalid {
    --c-input-border-color: var(--ui-color-danger)
}

.c-input:not(select):read-only,select.c-input[readonly] {
    --c-input-text: var(--ui-color-disable);
    --c-input-bg: var(--ui-bg-readonly);
    pointer-events: none!important;
    outline-width: 0
}

.c-input:disabled {
    --c-input-text: var(--ui-color-disable) !important;
    --c-input-bg: var(--ui-bg-disable) !important;
    pointer-events: none!important;
    -webkit-user-select: none;
    user-select: none;
    opacity: 1
}

.c-input.is-md {
    --c-input-width: calc(var(--vw1) * 280)
}

.c-input.is-lg {
    --c-input-width: calc(var(--vw1) * 420)
}

.c-input.is-block {
    --c-input-width: 100%;
    display: block
}

.c-input-error {
    margin-top: calc(var(--vw1) * 4);
    font-size: var(--font-size-xs);
    line-height: 1.2;
    color: var(--ui-color-danger)
}

.c-input-error:empty {
    display: none
}

.c-details[aria-expanded=false]>.is-show-open {
    display: none!important
}

.c-details[aria-expanded=true]>.is-show-close {
    display: none!important
}

.c-details-content {
    display: grid;
    grid-template-rows: 0fr
}

.c-details-content[aria-hidden=false] {
    grid-template-rows: 1fr
}

.c-details-content-inner {
    overflow: hidden
}

.c-inner {
    margin-inline:var(--content-margin-inline)}

.c-sprite {
    display: inline-block;
    aspect-ratio: 1;
    line-height: 1;
    vertical-align: middle
}

.c-sprite:has(use[href$="#sprite-sample-logo"]) {
    aspect-ratio: 512 / 365.14
}

.c-sprite:has(use[href$="#sprite-icon-check"]) {
    width: calc(var(--vw1) * 24);
    aspect-ratio: 24 / 23
}

.c-sprite.-green:has(use[href$="#sprite-icon-check"]) {
    --icon-check-color: var(--color-orange);
    --icon-check-line: var(--color-green)
}

.c-sprite.-white:has(use[href$="#sprite-icon-check"]) {
    --icon-check-bg: transparent;
    --icon-check-color: var(--color-yellow);
    --icon-check-line: var(--color-white)
}

.c-sprite.-basis:has(use[href$="#sprite-icon-check"]) {
    --icon-check-bg: transparent;
    --icon-check-color: var(--color-orange);
    --icon-check-line: var(--color-white)
}

.c-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    overscroll-behavior: contain;
    border: 0;
    opacity: 0;
    transition: .25s;
    transition-behavior: allow-discrete
}

.c-modal[open] {
    opacity: 1
}

@starting-style {
    .c-modal[open] {
        opacity: 0
    }
}

.c-modal[open]::backdrop {
    background-color: #000000e5
}

@starting-style {
    .c-modal[open]: :backdrop {
        background-color:#0000
    }
}

.c-modal::backdrop {
    background-color: #0000;
    transition: .25s;
    transition-behavior: allow-discrete
}

:is(.c-modal>.container)>.img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain
}

:is(.c-modal>.container)>.close {
    position: fixed;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: calc(var(--vw1) * 90);
    aspect-ratio: 1;
    font-size: calc(var(--vw1) * 30);
    color: var(--color-white);
    background-color: var(--color-bg-black)
}

:where(.c-marker) {
    --c-maker-color: #ffe730;
    --c-maker-thickness: 120%;
    --c-maker-offset: -105%;
    text-decoration-line: underline;
    text-decoration-thickness: var(--c-maker-thickness);
    text-decoration-style: solid;
    text-decoration-color: var(--c-maker-color);
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
    text-underline-offset: var(--c-maker-offset)
}

:where(.c-marker):before {
    content: " "
}

.c-photo-figure {
    position: relative
}

.c-photo-figure.-cap-r {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space4);
    align-items: center
}

.c-photo-figure.-cap-r figcaption {
    margin-top: 0
}

.c-photo-figure:has(.tagLabel.-ontop) {
    margin-top: var(--space7)
}

.c-photo-figure :where(figcaption) {
    margin-top: var(--space3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm)
}

.c-photo-figure .tagLabel {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--space1) var(--space3);
    margin-top: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-sm);
    color: var(--color-white);
    letter-spacing: var(--letter-spacing-heading-lg);
    background: var(--color-brown);
    border-bottom-right-radius: var(--radius-xs)
}

.-ontop:is(.c-photo-figure .tagLabel) {
    line-height: var(--line-height-xs);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    translate: 0 -100%
}

.c-vertical-scroll {
    position: relative
}

.c-vertical-scroll>.circleArrow {
    --a-fade-out-duration: .15s;
    position: absolute;
    top: 50%;
    right: 0;
    display: grid;
    place-content: center;
    width: calc(var(--vw1) * 40);
    aspect-ratio: 1;
    background-color: #0000004d;
    border-radius: 50%;
    translate: 0 -50%
}

:is(.c-vertical-scroll>.circleArrow)>.icon {
    margin-left: max(calc(var(--vw1) * 2),1px);
    font-size: var(--font-size-sm);
    color: var(--color-white)
}

.c-inview {
    animation-play-state: paused
}

.c-inview.is-inview {
    animation-play-state: running
}

.c-pop-title {
    --color: var(--color-green);
    --bg-color: #d6d2c6;
    --tail-height: calc(var(--vw1) * 19);
    position: relative;
    width: max-content;
    padding: var(--space1) var(--space8);
    margin-bottom: var(--space5);
    font-size: var(--font-size-x2l);
    font-weight: 700;
    line-height: var(--line-height-xs);
    color: var(--color);
    text-align: center;
    letter-spacing: var(--letter-spacing-heading);
    background: var(--bg-color);
    border-radius: var(--radius-xs)
}

.c-pop-title.-tech {
    --color: var(--color-white);
    --bg-color: var(--color-brown)
}

.c-pop-title.-green {
    --color: var(--color-green);
    --bg-color: #d6d2c6
}

.c-pop-title.-features {
    --color: var(--color-white);
    --bg-color: var(--color-green-features)
}

.c-pop-title.-basis {
    --color: var(--color-white);
    --bg-color: var(--color-blue-gray)
}

.c-pop-title.-round {
    border-radius: var(--radius-lg)
}

.c-pop-title:after {
    position: absolute;
    bottom: max(calc(var(--vw1) * 1),1px);
    left: 50%;
    display: inline-block;
    height: var(--tail-height);
    aspect-ratio: 16 / 19;
    line-height: 1;
    vertical-align: middle;
    content: "";
    background: var(--bg-color);
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='15.5'%20height='19.1'%20viewBox='0%200%2015.5%2019.1'%3e%3cpath%20d='M.5%202.3c2%208%207.8%2014.1%2015.1%2016.8q-.9-1.95-1.5-4.2a24.3%2024.3%200%200%201%201-14.9H0c.1.8.3%201.5.5%202.3'%20fill='%23d6d2c6'/%3e%3c/svg%3e") center center / contain no-repeat;
    translate: -50% 98%
}

.c-sect-line {
    --sect-line-color: var(--color-green-features);
    --sect-line-size: calc(var(--vw1) * 10);
    background-image: linear-gradient(to right,var(--sect-line-color) 0,var(--sect-line-color) var(--sect-line-size)),linear-gradient(to right,var(--sect-line-color) 0,var(--sect-line-color) var(--sect-line-size));
    background-repeat: repeat-y;
    background-position: left top,right top;
    background-size: var(--sect-line-size) 100%
}

.c-spec-list {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-heading)
}

.c-spec-list>li {
    display: inline;
    margin-right: .68em
}

:is(.c-spec-list>li):before {
    display: inline-block;
    content: "・"
}

.c-photo-example-comb {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space8);
    margin-top: var(--space2)
}

.c-photo-example-comb>.photoItem {
    display: grid;
    gap: var(--space3)
}

:is(.c-photo-example-comb>.photoItem)>.textCont {
    display: grid;
    gap: var(--space1);
    justify-items: center
}

:is(:is(.c-photo-example-comb>.photoItem)>.textCont)>.pop {
    --a-trans-in-duration: .4s;
    --a-trans-in-delay: .25s;
    --a-trans-in-easing: var(--ease-out-quart);
    --a-trans-in-start-y: calc(var(--vw1) * 14);
    width: calc(var(--vw1) * 208);
    padding: var(--space2h) var(--space4);
    font-size: var(--font-size-lg)
}

.u-hide {
    display: none!important
}

.u-visually-hidden,.u-visually-hidden.-focusable:not(:focus):not(:focus-within) {
    position: absolute!important;
    width: max(calc(var(--vw1) * 1),1px)!important;
    height: max(calc(var(--vw1) * 1),1px)!important;
    padding: 0!important;
    margin: max(calc(var(--vw1) * -1),1px)!important;
    overflow: hidden!important;
    white-space: nowrap!important;
    border: 0!important;
    clip: rect(0,0,0,0)!important
}

:is(.u-visually-hidden,.u-visually-hidden.-focusable:not(:focus):not(:focus-within)):not(caption) {
    position: absolute!important
}

:is(.u-visually-hidden,.u-visually-hidden.-focusable:not(:focus):not(:focus-within)) * {
    overflow: hidden!important
}

:where(.u-fluid) {
    display: block;
    width: 100%;
    height: auto
}

:where(.u-round) {
    overflow: hidden;
    border-radius: calc(infinity * max(calc(var(--vw1) * 1),1px))
}

._i0 {
    --i: 0
}

._i1 {
    --i: 1
}

._i2 {
    --i: 2
}

._i3 {
    --i: 3
}

._i4 {
    --i: 4
}

._i5 {
    --i: 5
}

._i6 {
    --i: 6
}

._i7 {
    --i: 7
}

._i8 {
    --i: 8
}

._i9 {
    --i: 9
}

._i10 {
    --i: 10
}

.visual-sect {
    position: relative;
    min-height: calc(var(--vw1) * 812);
    overflow: hidden;
    background: var(--color-white)
}

.visual-sect:after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(var(--vw1) * 552);
    content: "";
    background: var(--color-bg-blue-gray)
}

.visual-cont {
    position: relative;
    z-index: 1
}

.visual-cont>.titleWrap {
    --a-trans-in-duration: 2s;
    position: absolute;
    top: calc(var(--vw1) * 157);
    left: 0;
    z-index: 10;
    margin: 0;
    font-size: calc(var(--vw1) * 46);
    font-weight: 400;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading-lg);
    white-space: nowrap
}

:is(.visual-cont>.titleWrap)>.line {
    display: block
}

:is(:is(.visual-cont>.titleWrap)>.line):nth-child(2) {
    --a-trans-in-delay: .1s
}

.visual-cont>.birdDeco {
    --a-fluffy-y: 14%;
    position: absolute
}

.-left:is(.visual-cont>.birdDeco) {
    --a-fluffy-duration: 3s;
    top: calc(var(--vw1) * 49);
    right: calc(var(--vw1) * 160);
    width: calc(var(--vw1) * 98)
}

.-right:is(.visual-cont>.birdDeco) {
    --a-fluffy-duration: 4s;
    --a-rotate-delay: -2s;
    top: calc(var(--vw1) * 139);
    right: calc(var(--vw1) * 6);
    width: calc(var(--vw1) * 66)
}

.visual-cont>.photo1 {
    --a-trans-in-delay: .5s;
    position: absolute;
    top: calc(var(--vw1) * 340);
    left: 0;
    width: calc(var(--vw1) * 176)
}

.visual-cont>.photo2 {
    --a-trans-in-delay: .6s;
    position: absolute;
    top: calc(var(--vw1) * 424);
    left: calc(var(--vw1) * 227);
    width: calc(var(--vw1) * 143)
}

.visual-cont>.photo3 {
    --a-trans-in-delay: .7s;
    position: absolute;
    top: calc(var(--vw1) * 533);
    left: calc(var(--vw1) * 166);
    width: calc(var(--vw1) * 183);
    border: calc(var(--vw1) * 4) solid var(--color-bg-blue-gray)
}

.visual-cont>.artist {
    --a-trans-in-delay: .8s;
    position: absolute;
    top: calc(var(--vw1) * 704);
    left: 0;
    width: calc(var(--vw1) * 87)
}

.visual-cont>.cameraInfo {
    --a-trans-in-delay: .3s;
    position: absolute;
    top: calc(var(--vw1) * 314);
    right: calc(var(--vw1) * 59);
    z-index: 8
}

:is(.visual-cont>.cameraInfo)>.text {
    width: calc(var(--vw1) * 94)
}

:is(.visual-cont>.cameraInfo)>.logo {
    position: absolute;
    top: calc(var(--vw1) * 49);
    left: 0;
    width: calc(var(--vw1) * 88)
}

:is(.visual-cont>.cameraInfo)>.product {
    position: absolute;
    top: calc(var(--vw1) * 48);
    left: calc(var(--vw1) * 103);
    width: calc(var(--vw1) * 49)
}

.visual-cont>.catchWrap {
    position: absolute;
    top: calc(var(--vw1) * 652);
    right: 0;
    z-index: 9;
    display: grid;
    gap: calc(var(--vw1) * 5);
    justify-items: start
}

:is(.visual-cont>.catchWrap)>.line {
    --a-clip-in-duration: 1s;
    display: block;
    padding: calc(var(--vw1) * 7) calc(var(--vw1) * 3) calc(var(--vw1) * 7) calc(var(--vw1) * 11);
    font-size: calc(var(--vw1) * 21);
    line-height: 1;
    letter-spacing: var(--letter-spacing-heading-lg);
    background: var(--color-white)
}

:is(:is(.visual-cont>.catchWrap)>.line):nth-child(1) {
    --a-clip-in-delay: 1s
}

:is(:is(.visual-cont>.catchWrap)>.line):nth-child(2) {
    --a-clip-in-delay: 1.2s
}

.tech-sect {
    --sect-line-color: var(--color-yellow);
    position: relative;
    padding-block:var(--space10);background-color: var(--color-white)
}

.tech-content {
    padding-block:var(--space4) var(--space10)}

.tech-content.-details {
    margin-top: var(--space2)
}

.tech-content>.techList {
    display: grid;
    gap: calc(var(--vw1) * 64)
}

.tech-content>.accClose {
    position: relative;
    margin-top: var(--space10)
}

:is(.tech-content>.accClose)>.label {
    line-height: var(--line-height-xs)
}

:is(:is(.tech-content>.accClose)>.label):after {
    position: absolute;
    top: 50%;
    right: var(--space8);
    translate: 0 -50%
}

.tech-header {
    display: grid;
    gap: var(--space6);
    margin-bottom: var(--space8)
}

.tech-header.-top {
    gap: var(--space5)
}

.tech-header.-top>.titleRow>.line {
    padding: var(--space2h) var(--space5);
    font-size: var(--font-size-head-base);
    letter-spacing: 0
}

.tech-header.-top>.lead {
    margin-top: var(--space6)
}

.tech-header>.titleRow {
    --a-clip-in-delay: .1s;
    display: grid;
    gap: calc(var(--vw1) * 6);
    width: max-content
}

:is(.tech-header>.titleRow)>.line {
    width: max-content;
    padding: var(--space2h) var(--space3) var(--space2h) var(--space4);
    font-size: var(--font-size-head-xs);
    line-height: 1;
    color: var(--color-white);
    background-color: var(--color-yellow);
    border-radius: 0 var(--radius-sm)
}

:is(:is(.tech-header>.titleRow)>.line):nth-child(2) {
    --a-clip-in-delay: .2s
}

:is(.tech-header>.titleRow) .outline {
    color: var(--color-yellow);
    paint-order: stroke;
    -webkit-text-stroke: max(calc(var(--vw1) * 2),1px) var(--color-white)
}

.tech-header>.lead {
    margin-top: var(--space1)
}

.tech-line-pop {
    --c-maker-color: var(--color-beige-bg);
    position: relative;
    width: max-content;
    padding-bottom: var(--space1);
    font-size: var(--font-size-x2l);
    font-weight: 400;
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

.tech-line-pop:before {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: max(calc(var(--vw1) * 2),1px);
    content: "";
    background-color: var(--color-yellow)
}

.tech-line-pop:after {
    position: absolute;
    bottom: max(calc(var(--vw1) * 2),1px);
    left: 50%;
    z-index: 1;
    display: block;
    width: calc(var(--vw1) * 16);
    aspect-ratio: 1;
    content: "";
    background-color: var(--color-white);
    border-bottom: solid max(calc(var(--vw1) * 2),1px) var(--color-yellow);
    clip-path: polygon(0 0,11% 5%,95% 90%,100% 100%,0 100%);
    rotate: -45deg;
    translate: -50% 50%
}

.tech-item {
    display: grid;
    gap: var(--space5)
}

:is(.tech-item>.titleRow)>.title {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space1);
    font-size: var(--font-size-head-xs);
    color: var(--color-brown)
}

:is(:is(.tech-item>.titleRow)>.title)>.highlight {
    position: relative;
    display: inline-block;
    padding-bottom: var(--space2);
    color: var(--color-yellow);
    background: url(../img/line-wave.svg?rev=59b2cba0) repeat-x left bottom;
    background-size: calc(var(--vw1) * 15) calc(var(--vw1) * 4)
}

:is(.tech-item>.titleRow)>.lead {
    margin-top: var(--space6)
}

:is(.tech-item>.bodyContent)>.note {
    margin-top: var(--space3);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs)
}

.tech-pose>.bodyCont {
    margin-top: var(--space3)
}

.tech-column-sect {
    position: relative;
    display: grid;
    gap: var(--space7);
    padding: var(--space4) var(--space5);
    border: max(calc(var(--vw1) * 1),1px) solid var(--color-yellow)
}

.tech-column-sect>.label {
    display: grid;
    place-content: center;
    width: calc(var(--vw1) * 157);
    padding: var(--space4);
    border-right: max(calc(var(--vw1) * 1),1px) solid var(--color-yellow);
    border-bottom: max(calc(var(--vw1) * 1),1px) solid var(--color-yellow);
    border-bottom-right-radius: var(--radius-base)
}

:is(.tech-column-sect>.label)>img {
    width: auto;
    height: calc(var(--vw1) * 11)
}

.tech-column-sect>.titleCol {
    display: grid;
    gap: var(--space4)
}

:is(.tech-column-sect>.titleCol)>.title {
    font-size: var(--font-size-x2l);
    font-weight: 700;
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

.-sm:is(:is(.tech-column-sect>.titleCol)>.title) {
    font-size: var(--font-size-xl)
}

.tech-column-sect>.bodyCol {
    padding-block:var(--space9)}

.tech-manner-list {
    display: grid;
    gap: var(--space4)
}

.tech-manner-list>.item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space1);
    align-items: start
}

:is(.tech-manner-list>.item)>.icon {
    translate: 0 var(--space1)
}

:is(.tech-manner-list>.item)>.content {
    display: grid;
    gap: var(--space1)
}

:is(:is(.tech-manner-list>.item)>.content)>.title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-heading);
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

:is(:is(.tech-manner-list>.item)>.content)>.text {
    color: var(--color-brown)
}

.tech-photo-compare {
    display: grid;
    gap: var(--space3)
}

.tech-photo-compare>.compItem {
    position: relative
}

:is(.tech-photo-compare>.compItem)>.lineTitle {
    --c-maker-color: var(--color-yellow);
    --c-maker-thickness: 160%;
    --c-maker-offset: -130%;
    position: absolute;
    top: calc(var(--vw1) * -64);
    right: calc(var(--vw1) * 3);
    z-index: 1;
    font-size: var(--font-size-x2l);
    line-height: 2;
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading);
    filter: drop-shadow(calc(var(--vw1) * -6) 0 0 var(--c-maker-color)) drop-shadow(calc(var(--vw1) * 3) 0 0 var(--c-maker-color))
}

:is(.tech-photo-compare>.compItem) .tagSign {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-content: center;
    width: calc(var(--vw1) * 48);
    aspect-ratio: 1;
    background: var(--color-white);
    border-bottom-right-radius: var(--radius-base)
}

:is(:is(.tech-photo-compare>.compItem) .tagSign)>.img {
    width: calc(var(--vw1) * 48)
}

.-tri:is(:is(:is(.tech-photo-compare>.compItem) .tagSign)>.img) {
    width: calc(var(--vw1) * 26)
}

.tech-photo-compare>.arrowCol {
    width: calc(var(--vw1) * 20);
    margin-inline:auto;margin-bottom: calc(var(--vw1) * 58)
}

.tech-flight-steps {
    display: grid;
    gap: var(--space3);
    margin-top: var(--space3)
}

.tech-flight-steps>.stepItem {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space3) var(--space2)
}

:is(.tech-flight-steps>.stepItem)>.iconTri {
    grid-column: span 2;
    margin-inline:auto;color: var(--color-yellow);
    rotate: 90deg
}

:is(.tech-flight-steps>.stepItem)>.icon {
    width: calc(var(--vw1) * 32)
}

:is(.tech-flight-steps>.stepItem)>.title {
    margin-top: var(--space1);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-heading);
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

:is(.tech-flight-steps>.stepItem)>.image {
    position: relative;
    grid-column: span 2
}

.tech-wing-shape-list {
    display: grid;
    gap: var(--space8)
}

.tech-wing-shape-list>.item {
    display: grid;
    gap: var(--space3)
}

:is(.tech-wing-shape-list>.item)>.text {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm)
}

.tech-items-column {
    margin-top: calc(var(--vw1) * 22)
}

:is(.tech-items-column>.titleCol)>.title {
    text-align: center
}

.tech-items-column>.bodyCol {
    padding-block:0 var(--space4)}

.tech-items-list {
    display: grid;
    gap: var(--space8)
}

.tech-items-list>.itemCol {
    display: grid;
    gap: var(--space2)
}

:is(.tech-items-list>.itemCol)>.image {
    margin: 0 auto var(--space5)
}

.-grass:is(:is(.tech-items-list>.itemCol)>.image) {
    width: calc(var(--vw1) * 135)
}

.-zukan:is(:is(.tech-items-list>.itemCol)>.image) {
    width: calc(var(--vw1) * 100)
}

.-note:is(:is(.tech-items-list>.itemCol)>.image) {
    width: calc(var(--vw1) * 176)
}

:is(.tech-items-list>.itemCol)>.title {
    padding-bottom: var(--space1);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-brown);
    text-align: center;
    letter-spacing: var(--letter-spacing-heading);
    border-bottom: max(calc(var(--vw1) * 1),1px) solid currentColor
}

.tech-precapture-item {
    display: grid;
    gap: var(--space1)
}

.tech-precapture-item>.bodyContent {
    display: grid;
    gap: var(--space6);
    margin-top: var(--space5)
}

:is(.tech-precapture-item>.bodyContent)>.title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-heading);
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

.tech-precapture-settings {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--space4);
    margin-top: var(--space3)
}

.tech-precapture-settings>.settingItem {
    display: grid;
    gap: var(--space1)
}

:is(.tech-precapture-settings>.settingItem)>.title {
    margin-bottom: var(--space1);
    font-weight: 700;
    line-height: var(--line-height-heading);
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

:is(.tech-precapture-settings>.settingItem)>.text {
    margin-top: 0
}

.tech-precapture-example {
    margin-block:var(--space7) calc(var(--vw1) * 60)}

.tech-precapture-example>.title {
    display: grid;
    grid-template-columns: calc(var(--vw1) * 64) 1fr;
    gap: var(--space3);
    align-items: center;
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-heading);
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

:is(.tech-precapture-example>.title):before {
    display: block;
    width: 100%;
    height: max(calc(var(--vw1) * 1),1px);
    content: "";
    background-color: var(--color-brown)
}

.tech-precapture-example>.compRow {
    display: grid;
    gap: var(--space3);
    margin-top: var(--space4)
}

.tech-precapture-example>.note {
    margin-top: var(--space3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm)
}

.tech-precapture-comp-item>.slideRow {
    position: relative;
    display: flex;
    gap: var(--space4);
    align-items: flex-start;
    margin-left: calc(var(--vw1) * 30)
}

:is(.tech-precapture-comp-item>.slideRow)>.frame {
    position: relative
}

:is(:is(.tech-precapture-comp-item>.slideRow)>.frame)>.iconTri {
    display: none
}

:is(.tech-precapture-comp-item>.slideRow)>.frameCol {
    display: grid;
    grid-template-columns: auto calc(var(--vw1) * 200);
    align-items: center;
    padding-right: calc(var(--vw1) * 30)
}

:is(.tech-precapture-comp-item>.slideRow) .image {
    max-inline-size: none;
    width: calc(var(--vw1) * 270)
}

.tech-teleconverter-compare {
    display: grid;
    gap: var(--space3)
}

.tech-teleconverter-compare>.item {
    display: grid
}

:is(.tech-teleconverter-compare>.item)>.title {
    margin-top: var(--space3);
    font-weight: 700;
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

:is(.tech-teleconverter-compare>.item)>.text {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm)
}

.tech-teleconverter-compare>.arrowCol {
    display: grid
}

:is(.tech-teleconverter-compare>.arrowCol)>img {
    place-self: center;
    width: calc(var(--vw1) * 20);
    margin-inline:auto}

.tech-teleconverter-products {
    display: grid;
    gap: var(--space8);
    margin-top: var(--space4)
}

.tech-teleconverter-products>.productItem {
    display: grid;
    gap: var(--space4)
}

:is(.tech-teleconverter-products>.productItem)>.image {
    width: calc(var(--vw1) * 104);
    margin-inline:auto;margin-bottom: var(--space1)
}

.-tc2:is(:is(.tech-teleconverter-products>.productItem)>.image) {
    width: calc(var(--vw1) * 131)
}

:is(.tech-teleconverter-products>.productItem)>.nameRow {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space2);
    align-items: center;
    font-weight: 700;
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

:is(:is(.tech-teleconverter-products>.productItem)>.nameRow):before {
    position: absolute;
    bottom: calc(var(--vw1) * -6);
    left: 0;
    display: block;
    width: 100%;
    height: max(calc(var(--vw1) * 1),1px);
    content: "";
    background-color: var(--color-brown)
}

:is(:is(.tech-teleconverter-products>.productItem)>.nameRow)>.name {
    font-size: var(--font-size-lg)
}

:is(.tech-teleconverter-products>.productItem)>.info {
    display: flex;
    gap: var(--space4);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    color: var(--color-brown)
}

:is(.tech-teleconverter-products>.productItem)>.links {
    display: grid;
    gap: var(--space2);
    justify-content: center;
    margin-top: var(--space2)
}

:is(.tech-dx-crop>.titleRow)>.title {
    width: calc(var(--vw1) * 300)
}

.tech-dx-crop>.settingList {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--space4);
    margin-top: var(--space3)
}

.tech-z8-column {
    padding-bottom: var(--space6)
}

.tech-z8-column>.bodyCol {
    padding-block:0 var(--space4)}

.tech-z8-content {
    display: grid;
    gap: var(--space4);
    justify-items: center
}

.tech-z8-content>.image {
    width: calc(var(--vw1) * 242)
}

.tech-z8-content>.contentCol {
    display: grid;
    gap: var(--space4)
}

:is(.tech-z8-content>.contentCol)>.nameRow {
    position: relative
}

:is(:is(.tech-z8-content>.contentCol)>.nameRow):before {
    position: absolute;
    bottom: calc(var(--vw1) * -6);
    left: 0;
    display: block;
    width: 100%;
    height: max(calc(var(--vw1) * 1),1px);
    content: "";
    background-color: var(--color-brown)
}

:is(:is(.tech-z8-content>.contentCol)>.nameRow)>.name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

:is(.tech-z8-content>.contentCol)>.links {
    display: grid;
    gap: var(--space2);
    justify-content: center;
    margin-top: var(--space2)
}

.photography-sect {
    --bg-size: calc(var(--vw1) * 20);
    --bg-line: #57543b;
    --bg-gradient: transparent 90deg, var(--bg-line) 0;
    padding-block:calc(var(--vw1) * 80);background: conic-gradient(from 90deg at max(calc(var(--vw1) * 1),1px) max(calc(var(--vw1) * 1),1px),var(--bg-gradient)),var(--color-green);
    background-size: var(--bg-size) var(--bg-size)
}

.photography-content>.titleCont {
    display: grid
}

:is(.photography-content>.titleCont)>.env {
    --a-trans-in-delay: .1s;
    width: calc(var(--vw1) * 102)
}

:is(.photography-content>.titleCont)>.title {
    --a-trans-in-delay: .2s;
    width: max-content;
    padding-bottom: var(--space3);
    margin-block:var(--space3) var(--space7);font-size: calc(var(--vw1) * 40);
    color: var(--color-white);
    letter-spacing: 0;
    background: url("data:image/svg+xml,%3csvg%20width='427'%20height='3'%20viewBox='0%200%20427%203'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M382.543%202.98498C381.49%202.98498%20380.41%202.595%20379.699%201.785C378.54%200.465006%20376.143%200.465006%20374.985%201.785C373.536%203.405%20370.744%203.375%20369.296%201.785C368.137%200.465006%20365.74%200.465006%20364.582%201.785C363.133%203.375%20360.341%203.405%20358.893%201.785C357.734%200.465006%20355.337%200.465006%20354.179%201.785C352.756%203.375%20349.938%203.375%20348.49%201.785C347.331%200.465006%20344.934%200.465006%20343.775%201.785C342.353%203.405%20339.535%203.405%20338.087%201.785C336.928%200.465006%20334.531%200.465006%20333.372%201.785C331.924%203.405%20329.132%203.375%20327.684%201.785C326.525%200.465006%20324.128%200.465006%20322.969%201.785C321.521%203.405%20318.729%203.405%20317.28%201.785C316.122%200.465006%20313.725%200.465006%20312.566%201.785C311.118%203.405%20308.3%203.375%20306.877%201.785C305.719%200.465006%20303.322%200.465006%20302.163%201.785C300.741%203.405%20297.923%203.405%20296.474%201.785C295.316%200.465006%20292.919%200.465006%20291.76%201.785C290.338%203.375%20287.52%203.405%20286.071%201.785C284.912%200.465006%20282.516%200.465006%20281.357%201.785C279.908%203.405%20277.117%203.405%20275.668%201.785C274.509%200.465006%20272.113%200.465006%20270.954%201.785C269.505%203.405%20266.687%203.375%20265.265%201.785C264.106%200.465006%20261.71%200.465006%20260.551%201.785C259.129%203.375%20256.311%203.405%20254.862%201.785C253.703%200.465006%20251.307%200.465006%20250.148%201.785C248.726%203.375%20245.908%203.405%20244.459%201.785C243.3%200.465006%20240.904%200.465006%20239.745%201.785C238.323%203.405%20235.504%203.375%20234.056%201.785C232.897%200.465006%20230.5%200.465006%20229.342%201.785C227.919%203.405%20225.101%203.375%20223.653%201.785C222.494%200.465006%20220.097%200.465006%20218.939%201.785C217.516%203.405%20214.698%203.405%20213.25%201.785C212.091%200.465006%20209.694%200.465006%20208.535%201.785C207.113%203.375%20204.295%203.405%20202.847%201.785C201.688%200.465006%20199.291%200.465006%20198.132%201.785C196.71%203.405%20193.892%203.375%20192.444%201.785C191.285%200.465006%20188.888%200.465006%20187.729%201.785C186.281%203.405%20183.463%203.375%20182.041%201.785C180.882%200.465006%20178.485%200.465006%20177.326%201.785C175.904%203.375%20173.086%203.375%20171.637%201.785C170.479%200.465006%20168.082%200.465006%20166.923%201.785C165.501%203.375%20162.683%203.405%20161.234%201.785C160.076%200.465006%20157.679%200.465006%20156.52%201.785C155.072%203.405%20152.28%203.375%20150.831%201.785C149.673%200.465006%20147.276%200.465006%20146.117%201.785C144.695%203.405%20141.877%203.375%20140.428%201.785C139.269%200.465006%20136.873%200.465006%20135.714%201.785C134.292%203.405%20131.474%203.375%20130.025%201.785C128.866%200.465006%20126.47%200.465006%20125.311%201.785C123.889%203.375%20121.071%203.405%20119.622%201.785C118.463%200.465006%20116.067%200.465006%20114.908%201.785C113.486%203.405%20110.668%203.375%20109.219%201.785C108.06%200.465006%20105.664%200.465006%20104.505%201.785C103.056%203.405%20100.238%203.375%2098.816%201.785C97.6572%200.465006%2095.2605%200.465006%2094.1017%201.785C92.6532%203.405%2089.8351%203.375%2088.4129%201.785C87.2541%200.465006%2084.8575%200.465006%2083.6986%201.785C82.2764%203.405%2079.4584%203.375%2078.0099%201.785C76.8511%200.465006%2074.4544%200.465006%2073.2956%201.785C71.8734%203.375%2069.0553%203.405%2067.6068%201.785C66.448%200.465006%2064.0513%200.465006%2062.8925%201.785C61.4703%203.405%2058.6523%203.405%2057.2037%201.785C56.0449%200.465006%2053.6482%200.465006%2052.4894%201.785C51.0672%203.405%2048.2492%203.375%2046.8007%201.785C45.6418%200.495006%2043.2452%200.495006%2042.0863%201.785C40.6642%203.405%2037.8461%203.375%2036.3976%201.785C35.2388%200.465006%2032.8421%200.465006%2031.6833%201.785C30.2611%203.375%2027.443%203.405%2025.9945%201.785C24.8357%200.465006%2022.439%200.465006%2021.2802%201.785C19.858%203.405%2017.04%203.405%2015.5914%201.785C14.4326%200.465006%2012.036%200.465006%2010.8771%201.785C9.42861%203.405%206.61056%203.375%205.18837%201.785C4.02955%200.465006%201.63289%200.465006%200.474065%201.785L0%201.215C1.42219%20-0.404999%204.24024%20-0.404999%205.68877%201.215C6.84759%202.53499%209.24425%202.53499%2010.4031%201.215C11.8253%20-0.404999%2014.6433%20-0.404999%2016.0918%201.215C17.2507%202.53499%2019.6473%202.53499%2020.8061%201.215C22.2547%20-0.404999%2025.0464%20-0.374999%2026.4949%201.215C27.6537%202.53499%2030.0504%202.53499%2031.2092%201.215C32.6314%20-0.404999%2035.4495%20-0.404999%2036.898%201.215C38.0568%202.53499%2040.4535%202.53499%2041.6123%201.215C43.0345%20-0.374999%2045.8525%20-0.374999%2047.3011%201.215C48.4599%202.53499%2050.8565%202.53499%2052.0154%201.215C53.4375%20-0.404999%2056.2556%20-0.404999%2057.7041%201.215C58.863%202.53499%2061.2596%202.53499%2062.4184%201.215C63.8406%20-0.404999%2066.6587%20-0.374999%2068.1072%201.215C69.266%202.53499%2071.6627%202.53499%2072.8215%201.215C74.2437%20-0.404999%2077.0617%20-0.404999%2078.5103%201.215C79.6691%202.53499%2082.0657%202.53499%2083.2246%201.215C84.6468%20-0.404999%2087.4648%20-0.404999%2088.9133%201.215C90.0722%202.53499%2092.4688%202.53499%2093.6276%201.215C95.0498%20-0.404999%2097.8679%20-0.404999%2099.3164%201.215C100.475%202.53499%20102.872%202.53499%20104.031%201.215C105.453%20-0.404999%20108.271%20-0.404999%20109.719%201.215C110.878%202.53499%20113.275%202.53499%20114.434%201.215C115.856%20-0.404999%20118.674%20-0.404999%20120.123%201.215C121.281%202.53499%20123.678%202.53499%20124.837%201.215C126.285%20-0.404999%20129.103%20-0.404999%20130.526%201.215C131.684%202.53499%20134.081%202.53499%20135.24%201.215C136.662%20-0.404999%20139.48%20-0.404999%20140.929%201.215C142.088%202.53499%20144.484%202.53499%20145.643%201.215C147.065%20-0.404999%20149.883%20-0.404999%20151.332%201.215C152.491%202.53499%20154.887%202.53499%20156.046%201.215C157.468%20-0.404999%20160.286%20-0.404999%20161.735%201.215C162.894%202.53499%20165.29%202.53499%20166.449%201.215C167.898%20-0.404999%20170.716%20-0.404999%20172.138%201.215C173.297%202.53499%20175.693%202.50499%20176.852%201.215C178.274%20-0.404999%20181.092%20-0.404999%20182.541%201.215C183.7%202.53499%20186.096%202.53499%20187.255%201.215C188.677%20-0.404999%20191.496%20-0.404999%20192.944%201.215C194.103%202.53499%20196.5%202.53499%20197.658%201.215C199.081%20-0.404999%20201.899%20-0.404999%20203.347%201.215C204.506%202.53499%20206.903%202.53499%20208.061%201.215C209.51%20-0.404999%20212.328%20-0.404999%20213.75%201.215C214.909%202.53499%20217.306%202.53499%20218.465%201.215C219.887%20-0.404999%20222.705%20-0.404999%20224.153%201.215C225.312%202.53499%20227.709%202.53499%20228.868%201.215C230.29%20-0.404999%20233.108%20-0.404999%20234.556%201.215C235.715%202.53499%20238.112%202.53499%20239.271%201.215C240.693%20-0.404999%20243.511%20-0.404999%20244.959%201.215C246.118%202.53499%20248.515%202.53499%20249.674%201.215C251.122%20-0.404999%20253.94%20-0.404999%20255.362%201.215C256.521%202.53499%20258.918%202.53499%20260.077%201.215C261.499%20-0.404999%20264.317%20-0.404999%20265.766%201.215C266.924%202.53499%20269.321%202.53499%20270.48%201.215C271.902%20-0.404999%20274.72%20-0.404999%20276.169%201.215C277.327%202.53499%20279.724%202.53499%20280.883%201.215C282.305%20-0.404999%20285.123%20-0.404999%20286.572%201.215C287.731%202.53499%20290.127%202.53499%20291.286%201.215C292.708%20-0.404999%20295.526%20-0.404999%20296.975%201.215C298.134%202.53499%20300.53%202.53499%20301.689%201.215C303.111%20-0.404999%20305.929%20-0.404999%20307.378%201.215C308.537%202.53499%20310.933%202.53499%20312.092%201.215C313.514%20-0.404999%20316.332%20-0.404999%20317.781%201.215C318.94%202.53499%20321.336%202.53499%20322.495%201.215C323.917%20-0.404999%20326.735%20-0.404999%20328.184%201.215C329.343%202.53499%20331.739%202.53499%20332.898%201.215C334.347%20-0.404999%20337.165%20-0.404999%20338.587%201.215C339.746%202.53499%20342.143%202.53499%20343.301%201.215C344.724%20-0.404999%20347.542%20-0.404999%20348.99%201.215C350.149%202.53499%20352.546%202.50499%20353.704%201.215C355.127%20-0.404999%20357.945%20-0.404999%20359.393%201.215C360.552%202.53499%20362.949%202.53499%20364.107%201.215C365.53%20-0.404999%20368.348%20-0.404999%20369.796%201.215C370.955%202.53499%20373.352%202.53499%20374.511%201.215C375.933%20-0.404999%20378.751%20-0.404999%20380.199%201.215C381.358%202.53499%20383.755%202.53499%20384.914%201.215C386.362%20-0.404999%20389.154%20-0.404999%20390.602%201.215C391.761%202.53499%20394.158%202.50499%20395.317%201.215C396.739%20-0.404999%20399.557%20-0.404999%20401.005%201.215C402.164%202.53499%20404.561%202.53499%20405.72%201.215C407.142%20-0.404999%20409.96%20-0.404999%20411.409%201.215C412.567%202.53499%20414.964%202.53499%20416.123%201.215C417.571%20-0.404999%20420.363%20-0.374999%20421.812%201.215C422.97%202.53499%20425.367%202.53499%20426.526%201.215L427%201.785C425.578%203.405%20422.76%203.405%20421.311%201.785C420.152%200.465006%20417.756%200.465006%20416.597%201.785C415.175%203.405%20412.357%203.375%20410.908%201.785C409.749%200.465006%20407.353%200.465006%20406.194%201.785C404.772%203.405%20401.954%203.405%20400.505%201.785C399.346%200.465006%20396.95%200.465006%20395.791%201.785C394.369%203.375%20391.551%203.375%20390.102%201.785C388.943%200.465006%20386.546%200.465006%20385.388%201.785C384.677%202.595%20383.597%202.98498%20382.543%202.98498Z'%20fill='white'/%3e%3c/svg%3e") repeat-x left bottom
}

:is(.photography-content>.titleCont)>.lead {
    color: var(--color-white)
}

.photography-env {
    margin-top: var(--space10)
}

.photography-env>.titleRow {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space4);
    align-items: center
}

:is(.photography-env>.titleRow)>.title {
    display: flex;
    gap: var(--space2);
    align-items: center;
    justify-content: center;
    min-width: calc(var(--vw1) * 200);
    padding: var(--space3) var(--space4);
    font-size: var(--font-size-x2l);
    color: var(--color-green);
    background: var(--color-white);
    border-top-left-radius: var(--radius-base);
    border-top-right-radius: var(--radius-base)
}

:is(:is(.photography-env>.titleRow)>.title)>.icon {
    --a-trans-in-easing: var(--ease-out-elastic);
    --a-trans-in-start-y: calc(var(--vw1) * 10);
    --a-trans-in-delay: .2s;
    --c-icon-height: calc(var(--vw1) * 28);
    color: var(--color-yellow)
}

:is(.photography-env>.titleRow)>.title-en {
    display: grid;
    justify-self: end
}

:is(:is(.photography-env>.titleRow)>.title-en) img {
    width: auto;
    height: calc(var(--vw1) * 8)
}

.photography-env-body {
    padding: calc(var(--vw1) * 24) calc(var(--vw1) * 19);
    background: var(--color-white)
}

.photography-env-body>.infoRowSp {
    display: grid;
    gap: var(--space6)
}

:is(.photography-env-body>.infoRowSp)>.accRow {
    padding: var(--space4);
    padding-bottom: 0;
    line-height: var(--line-height-sm);
    text-align: center;
    border-top: max(calc(var(--vw1) * 1),1px) solid var(--color-base)
}

:is(:is(:is(.photography-env-body>.infoRowSp)>.accRow)>.accToggle)>.label {
    display: inline-grid;
    grid-template-columns: 1fr auto;
    gap: var(--space2);
    align-items: center;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

:is(:is(:is(:is(.photography-env-body>.infoRowSp)>.accRow)>.accToggle)>.label):after {
    font-size: var(--font-size-xs)
}

.photography-env-body-detail>.infoRow {
    display: grid;
    margin-top: var(--space6)
}

.photography-env-body-detail>.cardList {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space7)
}

.photography-env-body-detail>.note {
    margin-top: var(--space5);
    font-size: var(--font-size-xs)
}

.photography-env-body-detail>.accClose {
    margin-block:var(--space5)}

.photography-bird-type {
    display: grid;
    padding: 0 0 var(--space5) var(--space5);
    margin-bottom: var(--space7);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-xs);
    color: var(--color-green);
    border-bottom: max(calc(var(--vw1) * 1),1px) solid var(--color-green);
    border-left: max(calc(var(--vw1) * 1),1px) solid var(--color-green);
    border-bottom-left-radius: var(--radius-lg)
}

.photography-bird-type :where(a) {
    color: var(--color-green)
}

.photography-bird-type>.titleRow {
    display: grid;
    gap: var(--space4)
}

:is(.photography-bird-type>.titleRow)>.title {
    display: flex;
    gap: var(--space1);
    align-items: center;
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-heading)
}

:is(:is(.photography-bird-type>.titleRow)>.title)>.icon {
    width: calc(var(--vw1) * 24)
}

:is(.photography-bird-type>.titleRow)>.typeLink {
    display: flex;
    gap: var(--space1);
    align-items: center
}

:is(:is(.photography-bird-type>.titleRow)>.typeLink) .icon {
    --c-icon-height: calc(var(--vw1) * 8)
}

.photography-bird-type-list {
    margin-top: var(--space4)
}

.photography-bird-type-list>.typeItem {
    display: inline-grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space2)
}

:is(.photography-bird-type-list>.typeItem)>.tag {
    align-self: start;
    padding: 0 max(calc(var(--vw1) * 2),1px) max(calc(var(--vw1) * 1),1px);
    text-align: center;
    border: max(calc(var(--vw1) * 1),1px) solid currentColor
}

.photography-card-item>.titleRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--space4);
    font-weight: 700;
    line-height: 1;
    color: var(--color-green);
    letter-spacing: var(--letter-spacing-heading)
}

:is(.photography-card-item>.titleRow)>.title {
    font-size: var(--font-size-lg)
}

:is(:is(.photography-card-item>.titleRow)>.tag,:is(.photography-card-item>.titleRow)>.size):before {
    display: inline-block;
    width: max(calc(var(--vw1) * 1),1px);
    height: 1em;
    margin: 0 var(--space2h);
    vertical-align: top;
    content: "";
    background: var(--color-green)
}

:is(.photography-card-item>.imageCont)>.cap {
    margin-top: var(--space3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm)
}

.photography-season-types {
    margin-top: var(--space10);
    color: var(--color-white)
}

.photography-season-types>.titleRow {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space4);
    align-items: center;
    margin-bottom: var(--space3);
    background: url(../img/tab-line.svg?rev=a9173e48) no-repeat 0 0;
    background-size: auto calc(var(--vw1) * 41)
}

:is(.photography-season-types>.titleRow)>.title {
    width: calc(var(--vw1) * 274);
    padding: var(--space3) 0;
    font-size: var(--font-size-head-lg);
    color: var(--color-white);
    text-align: center
}

:is(.photography-season-types>.titleRow)>.title-en {
    justify-self: end;
    width: auto;
    height: calc(var(--vw1) * 8)
}

.photography-season-types>.typeList {
    display: grid;
    gap: var(--space6)
}

.photography-season-type-item>.nameRow {
    display: flex;
    gap: var(--space1);
    align-items: center;
    margin-bottom: var(--space3);
    line-height: var(--line-height-sm)
}

:is(.photography-season-type-item>.nameRow)>.icon {
    width: calc(var(--vw1) * 24)
}

:is(.photography-season-type-item>.nameRow)>.name {
    font-size: var(--font-size-xl);
    letter-spacing: var(--letter-spacing-heading)
}

:is(.photography-season-type-item>.nameRow)>.kana {
    margin-left: var(--space1)
}

.photography-season-type-item>.desc {
    margin-top: var(--space4)
}

.related-sect {
    padding-block:calc(var(--vw1) * 80);background-color: var(--color-white)
}

.related-content>.title {
    position: relative;
    padding-bottom: calc(var(--vw1) * 10);
    margin-bottom: calc(var(--vw1) * 45);
    font-size: var(--font-size-head-sm);
    font-weight: 400;
    text-align: center;
    letter-spacing: .1em
}

:is(.related-content>.title):after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: calc(var(--vw1) * 167);
    height: max(calc(var(--vw1) * 1),1px);
    content: "";
    background: currentColor;
    translate: -50% 0
}

.related-content>.links {
    display: grid;
    gap: calc(var(--vw1) * 24)
}

.related-link {
    display: inline-block
}

.column-sect {
    padding-block:var(--space5);background: var(--color-bg-blue-gray)
}

.column-content {
    padding: var(--space10) var(--space7h) calc(var(--vw1) * 75);
    margin-inline:var(--space5);background: var(--color-white);
    border: max(calc(var(--vw1) * 1),1px) solid var(--color-brown)
}

.column-content-title {
    position: relative;
    display: grid;
    padding-bottom: var(--space6);
    margin-block:var(--space5) var(--space6);border-bottom: max(calc(var(--vw1) * 1),1px) solid var(--color-brown)
}

.column-content-title:before,.column-content-title:after {
    position: absolute;
    top: var(--space5);
    left: 0;
    width: calc(var(--vw1) * 60);
    height: max(calc(var(--vw1) * 1),1px);
    content: "";
    background: var(--color-brown)
}

.column-content-title:after {
    right: 0;
    left: auto
}

.column-content-title>.column {
    justify-self: start;
    width: auto;
    height: calc(var(--vw1) * 8)
}

.column-content-title>.titleRow {
    display: grid;
    gap: var(--space2);
    justify-items: center
}

:is(.column-content-title>.titleRow)>.sub {
    --a-blur-in-duration: .4s;
    width: calc(var(--vw1) * 193)
}

:is(.column-content-title>.titleRow)>.title {
    --a-blur-in-duration: 1s;
    width: calc(var(--vw1) * 243);
    margin-bottom: var(--space4);
    line-height: 1
}

.column-category {
    padding-block:var(--space5);margin-block: var(--space6)
}

.column-category:last-child {
    margin-bottom: 0
}

.column-category>.titleRow {
    --title-width: calc(var(--vw1) * 140);
    display: grid;
    grid-template-columns: var(--title-width) 1fr;
    gap: var(--space4);
    align-items: center;
    margin-bottom: var(--space10)
}

.-airplane:is(.column-category>.titleRow) {
    --title-width: calc(var(--vw1) * 174)
}

:is(.column-category>.titleRow)>.title {
    position: relative;
    display: grid;
    gap: var(--space1);
    justify-items: center;
    margin-bottom: var(--space2);
    font-size: var(--font-size-head-xs);
    font-weight: 700;
    color: var(--color-blue-gray);
    letter-spacing: var(--letter-spacing-heading)
}

:is(:is(.column-category>.titleRow)>.title):before,:is(:is(.column-category>.titleRow)>.title):after {
    position: absolute;
    top: 50%;
    display: inline-block;
    width: calc(var(--vw1) * 30);
    aspect-ratio: 30 / 93;
    line-height: 1;
    vertical-align: middle;
    content: "";
    background: var(--color-bg-blue-gray);
    mask: url("data:image/svg+xml,%3csvg%20width='30'%20height='93'%20viewBox='0%200%2030%2093'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M24.2736%2091.6973C9.61321%2082.3045%200.5%2064.8701%200.5%2046.2134C0.5%2027.5566%209.61321%2010.09%2024.2736%200.697266L28.5%207.6453C16.1509%2015.5583%208.45755%2030.3229%208.45755%2046.1812C8.45755%2062.0394%2016.1179%2076.804%2028.5%2084.7171L24.2736%2091.6651V91.6973Z'%20stroke='%237296AC'%20stroke-miterlimit='10'/%3e%3c/svg%3e") center center / contain no-repeat;
    translate: 0 -50%
}

:is(:is(.column-category>.titleRow)>.title):before {
    left: 0
}

:is(:is(.column-category>.titleRow)>.title):after {
    right: 0;
    transform: scaleX(-1)
}

:is(:is(.column-category>.titleRow)>.title)>.en {
    height: calc(var(--vw1) * 9)
}

:is(.column-category>.titleRow)>.features {
    display: grid;
    gap: var(--space1);
    justify-items: start;
    font-size: var(--font-size-x2l);
    line-height: var(--line-height-heading);
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

:is(:is(.column-category>.titleRow)>.features)>.item {
    display: inline-block;
    padding: max(calc(var(--vw1) * 2),1px) var(--space2);
    background-color: var(--color-beige-bg)
}

:is(.column-category>.titleRow)>.cap {
    width: calc(var(--vw1) * 120);
    height: calc(var(--vw1) * 80);
    margin-left: auto
}

:is(.column-category>.photoList)>.author {
    margin-top: var(--space2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm)
}

.column-photo {
    display: grid;
    gap: var(--space3)
}

.column-photo+.column-photo {
    margin-top: var(--space10)
}

.column-photo>.textCont {
    display: flex;
    flex-direction: column;
    gap: var(--space3)
}

:is(.column-photo>.textCont)>.tag {
    width: max-content;
    padding: var(--space2) var(--space6);
    font-size: var(--font-size-x2l);
    font-weight: 700;
    line-height: 1;
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading);
    background: var(--color-bg-blue-gray);
    border: max(calc(var(--vw1) * 1),1px) solid var(--color-brown);
    border-radius: calc(var(--vw1) * 100)
}

.features-sect {
    --sect-line-color: var(--color-green-features);
    position: relative;
    padding-block:var(--space10);background-color: var(--color-white)
}

.features-content {
    padding-block:var(--space4)}

.features-content>.featuresList {
    display: grid;
    gap: calc(var(--vw1) * 60)
}

.features-header {
    display: grid;
    gap: var(--space5);
    justify-items: center;
    padding-bottom: calc(var(--vw1) * 70);
    margin-bottom: var(--space7);
    border-right: max(calc(var(--vw1) * 2),1px) solid var(--color-green-features);
    border-bottom: max(calc(var(--vw1) * 2),1px) solid var(--color-green-features);
    border-bottom-right-radius: var(--radius-xl)
}

.features-header>.pop {
    padding: var(--space4) var(--space5);
    font-size: var(--font-size-x2l);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-heading);
    border-radius: var(--radius-base)
}

.features-header>.titleRow {
    --a-trans-in-delay: .1s;
    --a-trans-in-duration: 1s
}

.features-header-info {
    display: grid;
    gap: var(--space7)
}

.features-header-info>.productCol {
    width: calc(var(--vw1) * 250)
}

.features-header-info>.links {
    display: grid;
    gap: var(--space4)
}

:where(.feature-item)>.titleRow {
    display: grid;
    grid-template-columns: calc(var(--vw1) * 57) 1fr;
    align-items: center;
    margin-bottom: var(--space8)
}

:is(:where(.feature-item)>.titleRow)>.num {
    width: auto;
    height: calc(var(--vw1) * 80)
}

:where(.feature-item) :where(.bodyCont) {
    display: grid;
    gap: var(--space6)
}

:where(.feature-item) .captureImage {
    display: grid;
    grid-template-columns: calc(var(--vw1) * 175) 1fr;
    gap: var(--space4);
    align-items: center;
    margin-top: var(--space3)
}

.feature-title-text {
    font-size: var(--font-size-head-xs);
    font-weight: 400;
    line-height: 1.4
}

.feature-title-text>.highlight {
    --a-clip-in-delay: .4s;
    display: inline-block;
    padding-inline:var(--space1) max(calc(var(--vw1) * 2),1px);margin-inline: -.2em;
    font-weight: 700;
    color: var(--color-green-features);
    background: var(--color-beige-bg)
}

.feature-line-text {
    display: flex;
    flex-direction: column;
    gap: var(--space1)
}

.feature-line-text span {
    --a-clip-in-duration: .8s;
    width: max-content;
    padding: 0 var(--space2);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-base);
    color: var(--color-white);
    letter-spacing: .22em;
    background: var(--color-green)
}

:is(.feature-line-text span):nth-child(2) {
    --a-clip-in-delay: .1s
}

:is(.feature-line-text span):nth-child(3) {
    --a-clip-in-delay: .2s
}

.feature-af-content .contentCol {
    display: grid;
    gap: var(--space2)
}

:is(.feature-af-content .contentCol)>.capCol {
    position: relative;
    padding-top: var(--space6);
    margin-top: var(--space7)
}

:is(:is(.feature-af-content .contentCol)>.capCol)>.note {
    position: absolute;
    top: 0;
    left: 50%;
    padding: var(--space2) var(--space4);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    background: var(--color-white);
    border: max(calc(var(--vw1) * 1),1px) solid var(--color-green-features);
    border-radius: var(--radius-base);
    translate: -50% 5%
}

.feature-finder-content>.infoRow {
    display: grid;
    gap: var(--space4)
}

:is(.feature-finder-content>.infoRow)>.images {
    display: grid;
    grid-template-columns: repeat(2,auto);
    gap: 0 var(--space5)
}

:is(:is(.feature-finder-content>.infoRow)>.images) img {
    width: auto;
    height: calc(var(--vw1) * 144)
}

:is(:is(.feature-finder-content>.infoRow)>.images)>.cap {
    grid-row: 2;
    grid-column: 2
}

.feature-finder-comp {
    display: grid;
    gap: var(--space3)
}

.feature-finder-comp>.title {
    position: relative;
    padding-left: calc(var(--vw1) * 80);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

:is(.feature-finder-comp>.title):before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: calc(var(--vw1) * 64);
    height: max(calc(var(--vw1) * 1),1px);
    content: "";
    background: var(--color-brown)
}

.feature-finder-comp>.compRow {
    position: relative;
    display: grid;
    gap: var(--space3)
}

.feature-finder-comp>.note {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm)
}

.feature-finder-comp-item>.slideRow {
    position: relative
}

:is(.feature-finder-comp-item>.slideRow) .image {
    max-inline-size: none;
    width: auto;
    height: calc(var(--vw1) * 176)
}

.feature-operability-content>.imagesRow {
    display: grid;
    gap: var(--space6)
}

:is(:is(.feature-operability-content>.imagesRow)>.image) .dial {
    display: block;
    width: calc(var(--vw1) * 137);
    margin-inline:auto}

.feature-high-speed-content {
    gap: var(--space9) var(--space8)
}

.feature-high-speed-content>.textCol {
    display: grid;
    gap: var(--space3)
}

:is(.feature-high-speed-content>.textCol)>.desc {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base)
}

:is(.feature-high-speed-content>.textCol)>.note {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm)
}

.feature-high-speed-precapture {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--space5) var(--space4);
    margin-top: var(--space4)
}

.feature-high-speed-precapture>.itemCol {
    position: relative;
    display: grid;
    gap: var(--space2) var(--space1)
}

:is(.feature-high-speed-precapture>.itemCol)>.label {
    display: grid;
    place-items: center;
    align-self: end;
    min-height: var(--space9);
    padding: var(--space1);
    font-weight: 700;
    line-height: var(--line-height-xs);
    color: var(--color-white);
    text-align: center;
    letter-spacing: var(--letter-spacing-heading-lg);
    background: var(--color-brown);
    border-radius: var(--radius-base) var(--radius-base) 0 0
}

.-before:is(.feature-high-speed-precapture>.itemCol)>.label {
    background: var(--color-orange)
}

.-best:is(.feature-high-speed-precapture>.itemCol) {
    --a-trans-in-delay: .15s
}

.-release:is(.feature-high-speed-precapture>.itemCol) {
    grid-template-columns: repeat(2,1fr);
    grid-column: span 2
}

.-release:is(.feature-high-speed-precapture>.itemCol)>.label {
    grid-column: span 2
}

.-release:is(.feature-high-speed-precapture>.itemCol)>.iconTri {
    right: auto;
    left: calc(var(--vw1) * -11)
}

:is(.feature-high-speed-precapture>.itemCol) .image {
    width: calc(var(--vw1) * 176)
}

:is(.feature-high-speed-precapture>.itemCol)>.iconTri {
    position: absolute;
    right: calc(var(--vw1) * -12);
    bottom: calc(var(--vw1) * 54);
    color: var(--color-green-features)
}

.feature-sensor-content>.contentCol {
    display: grid;
    gap: var(--space3)
}

:is(.feature-sensor-content>.contentCol)>.sensorDiagram {
    display: grid;
    grid-template-columns: calc(var(--vw1) * 176) 1fr;
    gap: var(--space4);
    align-items: center;
    margin-top: var(--space3)
}

:is(:is(.feature-sensor-content>.contentCol)>.sensorDiagram)>.capCol {
    display: grid;
    gap: var(--space2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm)
}

:is(:is(:is(.feature-sensor-content>.contentCol)>.sensorDiagram)>.capCol)>.title {
    width: max-content;
    font-weight: 700;
    color: var(--color-brown);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-underline-offset: var(--space2)
}

.feature-high-sensitive-content>.imageRow {
    display: grid;
    gap: var(--space6)
}

.feature-high-sensitive-content>.contentRow {
    display: grid;
    gap: var(--space3)
}

.focus-limiter-content>.contentCol {
    display: grid;
    gap: var(--space3)
}

.basis-sect {
    --sect-line-color: var(--color-blue-gray);
    position: relative;
    padding-block:var(--space10);background-color: var(--color-bg-beige)
}

.basis-content {
    padding-block:var(--space10)}

.basis-content.-telephoto {
    border-top: max(calc(var(--vw1) * 2),1px) solid var(--color-brown)
}

.basis-content.-lens {
    padding-top: 0
}

.basis-content.-useful {
    padding-top: var(--space6)
}

.basis-content>.lensListTitle {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-left: calc(var(--vw1) * 48);
    margin-block:0 var(--space8);font-size: var(--font-size-head-xs);
    color: var(--color-brown)
}

:is(.basis-content>.lensListTitle)>.icon {
    position: absolute;
    top: calc(var(--vw1) * -4);
    left: 0;
    width: calc(var(--vw1) * 42)
}

:is(.basis-content>.lensListTitle) span {
    display: inline-block;
    font-weight: 400
}

.bold:is(:is(.basis-content>.lensListTitle) span) {
    font-weight: 700
}

.basis-content>.lensList {
    display: grid;
    gap: var(--space10)
}

.basis-content>.note {
    margin-top: var(--space4);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs)
}

.basis-header {
    display: grid;
    gap: var(--space3)
}

.basis-header>.pop {
    padding: var(--space4) var(--space5);
    font-size: var(--font-size-x2l);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-heading);
    border-radius: var(--radius-base)
}

.basis-header>.titleRow {
    --a-trans-in-delay: .1s;
    --a-trans-in-duration: 1s;
    width: calc(var(--vw1) * 294)
}

.basis-header>.title {
    --a-trans-in-delay: .1s;
    --a-trans-in-duration: 1s;
    font-size: calc(var(--vw1) * 48);
    color: var(--color-brown)
}

:is(.basis-header>.title)>.outline {
    font-weight: 400;
    color: var(--color-bg-beige);
    paint-order: stroke;
    -webkit-text-stroke: calc(var(--vw1) * 4) var(--color-brown)
}

.basis-header>.accToggle {
    margin-top: var(--space3)
}

:is(.basis-header>.accToggle)>.label {
    display: inline-flex;
    gap: var(--space2);
    align-items: center;
    font-weight: 700;
    -webkit-text-decoration: underline;
    text-decoration: underline
}

:is(:is(.basis-header>.accToggle)>.label):after {
    font-size: var(--font-size-xs)
}

.basis-settings {
    margin-top: var(--space6)
}

.basis-settings>.lead {
    margin-bottom: var(--space8)
}

.basis-settings>.basisList {
    display: grid;
    gap: calc(var(--vw1) * 48)
}

.basis-item {
    display: grid;
    gap: var(--space3)
}

.basis-item.-col1 {
    grid-template-columns: 1fr
}

.basis-item>.titleRow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space4);
    align-items: center;
    font-size: var(--font-size-x2l);
    color: var(--color-brown)
}

.basis-item>.image {
    margin-top: var(--space3)
}

.basis-item>.dialPic {
    margin-top: var(--space3)
}

:is(.basis-item>.dialPic) .pic {
    width: calc(var(--vw1) * 160)
}

:is(.basis-item>.dialPic)>.cap {
    width: calc(var(--vw1) * 150);
    margin-left: var(--space4)
}

.basis-item>.accClose {
    margin-block:var(--space6) var(--space8)}

.basis-item-title-enclo {
    display: inline-block;
    padding: var(--space2) var(--space4);
    color: var(--color-blue-gray);
    background-color: var(--color-white);
    border: max(calc(var(--vw1) * 1),1px) solid var(--color-blue-gray);
    border-radius: var(--radius-xs)
}

.basis-example-photos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space7);
    margin-top: var(--space2)
}

.basis-example-photos.-bird-type>.photoItem {
    display: grid;
    gap: var(--space2)
}

:is(.basis-example-photos.-bird-type>.photoItem)>.textCont {
    display: grid;
    gap: var(--space2);
    justify-items: center
}

:is(:is(.basis-example-photos.-bird-type>.photoItem)>.textCont)>.pop {
    width: calc(var(--vw1) * 208);
    padding: var(--space2h) var(--space4);
    font-size: var(--font-size-lg)
}

.basis-example-photos>.note {
    margin-top: calc(var(--vw1) * -12);
    font-size: var(--font-size-xs);
    text-align: right
}

.basis-settings-table {
    padding: var(--space4) var(--space5) var(--space9);
    margin-top: var(--space6);
    color: var(--color-brown);
    border: max(calc(var(--vw1) * 1),1px) solid var(--color-blue-gray)
}

.basis-settings-table>.title {
    width: calc(var(--vw1) * 208);
    padding: var(--space1) var(--space4);
    font-size: var(--font-size-lg);
    text-align: center;
    letter-spacing: var(--letter-spacing-heading);
    border-right: max(calc(var(--vw1) * 1),1px) solid var(--color-blue-gray);
    border-bottom: max(calc(var(--vw1) * 1),1px) solid var(--color-blue-gray);
    border-bottom-right-radius: var(--radius-base)
}

.basis-settings-table>.settings {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--space3) var(--space4);
    margin-top: var(--space6);
    line-height: var(--line-height-xs)
}

:is(.basis-settings-table>.settings)>.row {
    position: relative;
    padding-left: var(--space2h)
}

.-col2:is(:is(.basis-settings-table>.settings)>.row) {
    grid-column: span 2
}

:is(:is(.basis-settings-table>.settings)>.row):before {
    position: absolute;
    top: .45em;
    left: 0;
    display: block;
    width: calc(var(--vw1) * 6);
    aspect-ratio: 1;
    content: "";
    background-color: var(--color-blue-gray);
    border-radius: 50%
}

:is(:is(.basis-settings-table>.settings)>.row)>.value {
    display: inline-block;
    font-weight: 700
}

:is(:is(.basis-settings-table>.settings)>.row)>.note {
    margin-top: max(calc(var(--vw1) * 2),1px);
    font-size: var(--font-size-xs)
}

.basis-shutter-speed {
    display: grid;
    gap: var(--space8);
    margin-top: calc(var(--vw1) * 60)
}

.basis-shutter-speed>.headerRow {
    display: grid;
    gap: var(--space2);
    color: var(--color-brown)
}

:is(.basis-shutter-speed>.headerRow)>.subtitle {
    position: relative;
    display: flex;
    gap: var(--space2h);
    align-items: center;
    width: max-content;
    padding-inline:var(--space6) var(--space4);font-size: var(--font-size-x2l);
    letter-spacing: .2em
}

:is(:is(.basis-shutter-speed>.headerRow)>.subtitle):before,:is(:is(.basis-shutter-speed>.headerRow)>.subtitle):after {
    position: absolute;
    top: 50%;
    display: block;
    width: calc(var(--vw1) * 9);
    aspect-ratio: 9 / 25;
    content: "";
    background: var(--color-blue-gray);
    mask: url("data:image/svg+xml,%3csvg%20width='9'%20height='25'%20viewBox='0%200%209%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M8.3158%200.207031L0.663622%2024.5549'%20stroke='%237296AC'%20stroke-width='1.3913'/%3e%3c/svg%3e") center center / contain no-repeat;
    translate: 0 -50%
}

:is(:is(.basis-shutter-speed>.headerRow)>.subtitle):before {
    left: 0;
    scale: -1 1
}

:is(:is(.basis-shutter-speed>.headerRow)>.subtitle):after {
    right: 0
}

:is(.basis-shutter-speed>.headerRow)>.title {
    font-size: var(--font-size-head-xs)
}

:is(.basis-shutter-speed>.headerRow)>.text {
    margin-top: var(--space2)
}

.basis-shutter-speed>.note {
    font-size: var(--font-size-xs);
    text-align: right
}

.basis-shutter-speed>.accClose {
    margin-block:var(--space2) var(--space1)}

.basis-shutter-speed-photos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space8);
    margin-top: var(--space1)
}

.basis-shutter-speed-photos>.item {
    display: grid;
    gap: var(--space2)
}

:is(.basis-shutter-speed-photos>.item)>.title {
    display: flex;
    gap: var(--space2);
    align-items: center;
    font-weight: 700;
    color: var(--color-brown);
    letter-spacing: var(--letter-spacing-heading)
}

:is(:is(.basis-shutter-speed-photos>.item)>.title)>.icon {
    width: calc(var(--vw1) * 24)
}

.basis-lens-item {
    display: grid;
    gap: var(--space3)
}

.basis-lens-item>.productCol {
    display: grid;
    gap: var(--space3)
}

:is(.basis-lens-item>.productCol)>.name {
    margin-top: var(--space3);
    font-size: var(--font-size-lg);
    color: var(--color-brown);
    letter-spacing: inherit
}

:is(.basis-lens-item>.productCol) .photo {
    display: block;
    width: calc(var(--vw1) * 272);
    margin: var(--space3) auto 0
}

:is(.basis-lens-item>.productCol)>.links {
    display: grid;
    gap: var(--space3);
    justify-self: center;
    width: calc(var(--vw1) * 256)
}

.basis-useful-content {
    position: relative;
    display: grid;
    gap: var(--space8);
    padding: calc(var(--vw1) * 46) var(--space4) calc(var(--vw1) * 70);
    margin-top: var(--space6);
    background-color: var(--color-white)
}

.basis-useful-content>.headerRow {
    display: grid;
    gap: var(--space2);
    justify-items: center;
    color: var(--color-brown)
}

:is(.basis-useful-content>.headerRow)>.sub {
    position: absolute;
    top: calc(var(--vw1) * -40);
    left: 50%;
    width: auto;
    height: calc(var(--vw1) * 8);
    translate: -50% -50%
}

:is(.basis-useful-content>.headerRow)>.supervision {
    --a-fade-in-delay: .2s;
    --a-trans-in-start-x: -50%;
    --a-trans-in-start-y: -20%;
    --a-trans-in-end-x: -50%;
    --a-trans-in-end-y: -50%;
    position: absolute;
    top: 0;
    left: 50%;
    width: max-content;
    padding: var(--space1) var(--space6);
    font-size: var(--font-size-x2l);
    font-weight: 700;
    line-height: var(--line-height-xs);
    letter-spacing: .2em;
    background: var(--color-bg-blue-gray);
    border: max(calc(var(--vw1) * 1),1px) solid var(--color-brown);
    border-radius: var(--radius-xl);
    translate: -50% -50%
}

:is(.basis-useful-content>.headerRow)>.title {
    --a-fade-in-delay: .3s;
    --a-trans-in-duration: 1s;
    font-size: var(--font-size-head-xs);
    color: var(--color-brown)
}

.basis-useful-content>.itemList {
    display: grid;
    gap: var(--space10);
    align-items: start
}

.basis-useful-item {
    display: grid;
    gap: var(--space3)
}

.basis-useful-item>.photoRow {
    display: grid;
    gap: var(--space3);
    margin-bottom: var(--space4)
}

:is(.basis-useful-item>.photoRow)>.photo {
    position: relative
}

.-case:is(:is(.basis-useful-item>.photoRow)>.photo) {
    width: calc(var(--vw1) * 230);
    margin-inline:auto}

.-strap:is(:is(.basis-useful-item>.photoRow)>.photo) {
    padding-top: var(--space7)
}

.-strap:is(:is(.basis-useful-item>.photoRow)>.photo) img {
    display: block;
    width: calc(var(--vw1) * 320);
    margin-left: auto
}

:is(:is(.basis-useful-item>.photoRow)>.photo)>.tagRound {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 var(--space6);
    margin-top: 0;
    font-weight: 700;
    color: var(--color-blue-gray);
    letter-spacing: var(--letter-spacing-heading);
    background: var(--color-white);
    border: max(calc(var(--vw1) * 1),1px) solid var(--color-blue-gray);
    border-radius: var(--radius-xl)
}

.basis-useful-item>.title {
    padding-bottom: var(--space2);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-brown);
    text-align: center;
    letter-spacing: var(--letter-spacing-heading);
    border-bottom: max(calc(var(--vw1) * 1),1px) solid var(--color-brown)
}

.basis-useful-item>.links {
    display: grid;
    gap: var(--space3);
    justify-content: center
}

@media screen and (min-width: 768px) {
    :root {
        --vw1: min(var(--rem1), .078125vw);
        --content-width: calc(var(--vw1) * 1120);
        --content-margin-inline: calc(var(--vw1) * 80)
    }

    .header>.logo {
        width: calc(var(--vw1) * 68)
    }

    .header-menu-nav {
        width: calc(var(--vw1) * 400)
    }

    .header-menu-list {
        margin: calc(var(--vw1) * 100) calc(var(--vw1) * 65) calc(var(--vw1) * 80) calc(var(--vw1) * 48)
    }

    .footer {
        padding: var(--space9) 0
    }

    .footer-content {
        flex-direction: row;
        gap: var(--space4) calc(var(--vw1) * 80)
    }

    .footer-content>.copyright {
        margin-left: auto
    }

    .footer-sns-list {
        gap: var(--space6);
        font-size: calc(var(--vw1) * 32)
    }

    .footer-recommended-modal>.container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(var(--vw1) * 855);
        height: calc(var(--vw1) * 430)
    }

    .footer-recommended-info {
        grid-template-columns: auto 1fr
    }

    .c-details-content.-md-open {
        grid-template-rows: 1fr;
        transition-duration: 0s!important
    }

    .c-inner {
        max-width: var(--content-width);
        margin-inline:auto}

    .c-pop-title {
        font-size: var(--font-size-head-x2s)
    }

    .c-sect-line {
        --sect-line-size: calc(var(--vw1) * 20)
    }

    .c-photo-example-comb {
        grid-template-rows: auto 1fr;
        grid-template-columns: calc(var(--vw1) * 352) 1fr;
        gap: var(--space6) var(--space8);
        align-items: start;
        justify-content: center;
        margin-top: var(--space4)
    }

    .c-photo-example-comb>.photoItem {
        grid-template-columns: calc(var(--vw1) * 448) 1fr;
        gap: var(--space7)
    }

    :is(.c-photo-example-comb>.photoItem):nth-child(1) {
        grid-template-columns: 1fr;
        grid-row: span 2
    }

    :is(.c-photo-example-comb>.photoItem)>.textCont {
        gap: 0;
        align-self: center;
        justify-items: start
    }

    :is(:is(.c-photo-example-comb>.photoItem)>.textCont)>.pop {
        font-size: var(--font-size-xl)
    }

    .u-hide-md {
        display: none!important
    }

    .visual-sect {
        min-height: calc(var(--vw1) * 758)
    }

    .visual-sect:after {
        height: calc(var(--vw1) * 505)
    }

    .visual-cont>.titleWrap {
        top: calc(var(--vw1) * 120);
        left: calc(var(--vw1) * 603);
        font-size: calc(var(--vw1) * 67)
    }

    .-left:is(.visual-cont>.birdDeco) {
        top: calc(var(--vw1) * 90);
        right: calc(var(--vw1) * 607);
        width: calc(var(--vw1) * 133)
    }

    .-right:is(.visual-cont>.birdDeco) {
        top: calc(var(--vw1) * 102);
        right: calc(var(--vw1) * 53);
        width: calc(var(--vw1) * 100)
    }

    .visual-cont>.photo1 {
        top: calc(var(--vw1) * 182);
        width: calc(var(--vw1) * 292)
    }

    .visual-cont>.photo2 {
        top: calc(var(--vw1) * 287);
        left: calc(var(--vw1) * 341);
        width: calc(var(--vw1) * 248)
    }

    .visual-cont>.photo3 {
        top: calc(var(--vw1) * 475);
        left: calc(var(--vw1) * 276);
        width: calc(var(--vw1) * 300);
        border-width: calc(var(--vw1) * 6)
    }

    .visual-cont>.artist {
        top: calc(var(--vw1) * 640);
        width: calc(var(--vw1) * 140)
    }

    .visual-cont>.cameraInfo {
        top: calc(var(--vw1) * 385);
        right: calc(var(--vw1) * 148);
        width: calc(var(--vw1) * 300)
    }

    :is(.visual-cont>.cameraInfo)>.text {
        width: calc(var(--vw1) * 145)
    }

    :is(.visual-cont>.cameraInfo)>.logo {
        top: calc(var(--vw1) * 72);
        width: calc(var(--vw1) * 161)
    }

    :is(.visual-cont>.cameraInfo)>.product {
        top: calc(var(--vw1) * 71);
        left: calc(var(--vw1) * 188);
        width: calc(var(--vw1) * 111)
    }

    .visual-cont>.catchWrap {
        top: calc(var(--vw1) * 574);
        right: calc(var(--vw1) * 22);
        gap: calc(var(--vw1) * 8)
    }

    :is(.visual-cont>.catchWrap)>.line {
        padding: var(--space2h) var(--space3) var(--space3) var(--space4);
        font-size: var(--font-size-head-sm)
    }

    .tech-sect {
        padding-block:calc(var(--vw1) * 74)}

    .tech-content {
        padding-block: 0
    }

    .tech-content.-details {
        margin-top: var(--space10)
    }

    .tech-content>.techList {
        gap: calc(var(--vw1) * 74)
    }

    :is(.tech-content>.techList)+.tech-header {
        margin-top: calc(var(--vw1) * 74)
    }

    .tech-content>.accClose {
        margin-top: calc(var(--vw1) * 50)
    }

    .tech-header {
        gap: var(--space7);
        margin-bottom: var(--space10)
    }

    .tech-header.-top {
        margin-bottom: var(--space8)
    }

    .tech-header.-top>.titleRow>.line {
        padding: var(--space2) var(--space4);
        font-size: calc(var(--vw1) * 48)
    }

    .tech-header.-top>.lead {
        margin-top: var(--space3)
    }

    :is(.tech-header>.titleRow)>.line {
        font-size: var(--font-size-head-base)
    }

    .tech-header>.lead {
        margin-top: 0
    }

    .tech-line-pop {
        font-size: var(--font-size-head-x2s)
    }

    .tech-item {
        gap: var(--space8);
        align-items: start
    }

    :is(.tech-item>.titleRow)>.title {
        font-size: var(--font-size-head-base)
    }

    :is(.tech-item>.titleRow)>.lead {
        margin-top: var(--space3)
    }

    :is(.tech-item>.bodyContent)>.note {
        margin-top: var(--space7);
        text-align: right
    }

    .tech-pose>.bodyCont {
        margin-top: var(--space2)
    }

    .tech-column-sect {
        grid-template-columns: 1fr 1fr;
        gap: var(--space9);
        align-items: center;
        padding: var(--space10) calc(var(--vw1) * 96)
    }

    .tech-column-sect>.label {
        position: absolute;
        top: var(--space2h);
        left: var(--space2);
        width: calc(var(--vw1) * 184);
        padding: var(--space5)
    }

    :is(.tech-column-sect>.label)>img {
        height: calc(var(--vw1) * 13)
    }

    :is(.tech-column-sect>.titleCol)>.title {
        font-size: var(--font-size-head-x2s)
    }

    .tech-column-sect>.bodyCol {
        padding-block:0}

    .tech-manner-column {
        grid-template-columns: calc(var(--vw1) * 448) 1fr;
        gap: calc(var(--vw1) * 120);
        align-items: center;
        padding: calc(var(--vw1) * 55) calc(var(--vw1) * 96)
    }

    .tech-manner-list {
        gap: var(--space6)
    }

    :is(:is(.tech-manner-list>.item)>.content)>.title {
        font-size: var(--font-size-xl)
    }

    .tech-photo-compare {
        grid-template-rows: auto 1fr;
        grid-template-columns: calc(var(--vw1) * 448) 1fr;
        gap: var(--space8);
        margin-top: var(--space4)
    }

    .-ok:is(.tech-photo-compare>.compItem) {
        grid-row: 1 / span 2;
        grid-column: 2
    }

    .-ok:is(.tech-photo-compare>.compItem)>.image {
        --a-trans-in-delay: .2s
    }

    :is(.tech-photo-compare>.compItem)>.lineTitle {
        top: calc(var(--vw1) * -17);
        font-size: var(--font-size-head-x2s);
        line-height: 1.8
    }

    :is(.tech-photo-compare>.compItem) .tagSign {
        width: calc(var(--vw1) * 64)
    }

    :is(:is(.tech-photo-compare>.compItem) .tagSign)>.img {
        width: calc(var(--vw1) * 64)
    }

    .-tri:is(:is(:is(.tech-photo-compare>.compItem) .tagSign)>.img) {
        width: calc(var(--vw1) * 36)
    }

    .tech-photo-compare>.arrowCol {
        grid-row: 2;
        grid-column: 1;
        width: calc(var(--vw1) * 132);
        margin-inline:auto 0;margin-bottom: 0
    }

    .tech-flight-steps {
        grid-template-columns: repeat(4,1fr);
        gap: var(--space8);
        margin-top: 0
    }

    .tech-flight-steps>.stepItem {
        grid-template-rows: calc(var(--vw1) * 42) 1fr;
        gap: var(--space2) var(--space2)
    }

    :is(.tech-flight-steps>.stepItem):nth-child(2)>.image img {
        --a-trans-in-delay: .2s
    }

    :is(.tech-flight-steps>.stepItem):nth-child(3)>.image img {
        --a-trans-in-delay: .4s
    }

    :is(.tech-flight-steps>.stepItem):nth-child(4)>.image img {
        --a-trans-in-delay: .6s
    }

    :is(.tech-flight-steps>.stepItem)>.iconTri {
        position: absolute;
        top: calc(var(--vw1) * 127);
        right: calc(var(--vw1) * -22);
        rotate: 0deg
    }

    :is(.tech-flight-steps>.stepItem)>.title {
        margin-top: 0;
        font-size: var(--font-size-base)
    }

    :is(.tech-wing-shape>.titleRow)>.lead {
        margin-top: var(--space8)
    }

    .tech-wing-shape-list {
        grid-template-columns: repeat(2,1fr)
    }

    :is(.tech-wing-shape-list>.item):nth-child(2)>.image {
        --a-trans-in-delay: .2s
    }

    .tech-items-column {
        grid-template-columns: 1fr;
        padding-block:calc(var(--vw1) * 75) calc(var(--vw1) * 38);margin-top: 0
    }

    .tech-items-list {
        grid-template-rows: calc(var(--vw1) * 170) auto 1fr;
        grid-template-columns: repeat(3,1fr);
        gap: var(--space8)
    }

    .tech-items-list>.itemCol {
        grid-template-rows: subgrid;
        grid-row: span 3;
        gap: var(--space4)
    }

    :is(.tech-items-list>.itemCol)>.image {
        align-self: center;
        margin: 0 auto
    }

    .-grass:is(:is(.tech-items-list>.itemCol)>.image) {
        width: calc(var(--vw1) * 195)
    }

    .-note:is(:is(.tech-items-list>.itemCol)>.image) {
        width: calc(var(--vw1) * 256)
    }

    :is(.tech-items-list>.itemCol)>.title {
        font-size: var(--font-size-xl)
    }

    .tech-precapture-item {
        grid-template-rows: auto 1fr auto;
        grid-template-columns: calc(var(--vw1) * 448) 1fr;
        gap: var(--space7)
    }

    .tech-precapture-item>.image {
        grid-row: 1 / span 2;
        grid-column: 2
    }

    .tech-precapture-item>.headerRow {
        margin-bottom: var(--space1)
    }

    .tech-precapture-item>.bodyContent {
        margin-top: 0
    }

    :is(.tech-precapture-item>.bodyContent)>.title {
        font-size: var(--font-size-xl)
    }

    .tech-precapture-settings {
        grid-template-columns: repeat(2,calc(var(--vw1) * 160));
        gap: var(--space8);
        margin-top: 0
    }

    .tech-precapture-example {
        grid-row: 3;
        grid-column: 1 / -1;
        margin-block:calc(var(--vw1) * 54) 0}

    .tech-precapture-example>.title {
        font-size: var(--font-size-xl)
    }

    .tech-precapture-example>.compRow {
        gap: var(--space4);
        margin-top: var(--space6)
    }

    .tech-precapture-example>.note {
        margin-top: calc(var(--vw1) * -42)
    }

    .tech-precapture-comp-item>.slideRow {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: var(--space6) var(--space8);
        align-items: start;
        margin-left: 0
    }

    :is(:is(.tech-precapture-comp-item>.slideRow)>.frame)>.iconTri {
        position: absolute;
        top: calc(var(--vw1) * 77);
        right: calc(var(--vw1) * -22);
        display: inline-block;
        color: var(--color-yellow)
    }

    :is(.tech-precapture-comp-item>.slideRow)>.frameCol {
        grid-template-columns: 1fr
    }

    :is(.tech-precapture-comp-item>.slideRow) .image {
        width: calc(var(--vw1) * 256)
    }

    .tech-teleconverter-compare {
        grid-template-columns: calc(var(--vw1) * 448) calc(var(--vw1) * 64) calc(var(--vw1) * 448);
        gap: var(--space2) var(--space8)
    }

    :is(:is(.tech-teleconverter-compare>.item):nth-child(3),:is(.tech-teleconverter-compare>.item):last-child)>.image {
        --a-trans-in-delay: .2s
    }

    .-clop:is(.tech-teleconverter-compare>.item) {
        grid-row: 3;
        grid-column: 1
    }

    .-comb:is(.tech-teleconverter-compare>.item) {
        grid-row: 3;
        grid-column: 3
    }

    .tech-teleconverter-compare>.arrowCol {
        place-content: center;
        height: calc(var(--vw1) * 64)
    }

    .-right:is(.tech-teleconverter-compare>.arrowCol) {
        height: calc(var(--vw1) * 300)
    }

    .-down:is(.tech-teleconverter-compare>.arrowCol) {
        margin-bottom: var(--space6)
    }

    .-down:is(.tech-teleconverter-compare>.arrowCol)>img {
        width: auto;
        height: calc(var(--vw1) * 64)
    }

    .-diag:is(.tech-teleconverter-compare>.arrowCol)>img {
        width: calc(var(--vw1) * 58)
    }

    :is(.tech-teleconverter-compare>.arrowCol)>img {
        width: auto
    }

    .tech-teleconverter-products {
        grid-template-columns: repeat(2,1fr);
        gap: var(--space8);
        margin-top: var(--space1)
    }

    .tech-teleconverter-products>.productItem {
        grid-template-columns: calc(var(--vw1) * 160) 1fr;
        gap: var(--space8)
    }

    :is(.tech-teleconverter-products>.productItem)>.image {
        grid-row: 1 / span 2;
        margin-top: var(--space1)
    }

    .-tc2:is(:is(.tech-teleconverter-products>.productItem)>.image) {
        --a-trans-in-delay: .2s
    }

    :is(.tech-teleconverter-products>.productItem)>.nameRow {
        grid-template-columns: 1fr;
        gap: 0;
        line-height: var(--line-height-sm)
    }

    :is(:is(.tech-teleconverter-products>.productItem)>.nameRow):before {
        bottom: calc(var(--vw1) * -12)
    }

    :is(:is(.tech-teleconverter-products>.productItem)>.nameRow)>.name {
        font-size: var(--font-size-xl)
    }

    :is(.tech-teleconverter-products>.productItem)>.info {
        display: grid;
        gap: 0
    }

    :is(.tech-teleconverter-products>.productItem)>.links {
        justify-content: start;
        margin-top: 0
    }

    .tech-dx-crop {
        grid-template-columns: calc(var(--vw1) * 544) 1fr;
        gap: var(--space8)
    }

    :is(.tech-dx-crop>.titleRow)>.title {
        width: calc(var(--vw1) * 350)
    }

    :is(.tech-dx-crop>.titleRow)>.lead {
        margin-top: var(--space7)
    }

    .tech-dx-crop>.settingList {
        gap: var(--space8);
        margin-top: var(--space1)
    }

    .tech-z8-column {
        align-items: start;
        padding-block:calc(var(--vw1) * 80)}

    .tech-z8-column>.titleCol {
        margin-top: var(--space6)
    }

    .tech-z8-content {
        grid-template-columns: auto 1fr;
        gap: var(--space8);
        align-items: start
    }

    .tech-z8-content>.contentCol {
        gap: var(--space8)
    }

    :is(:is(.tech-z8-content>.contentCol)>.nameRow):before {
        bottom: calc(var(--vw1) * -12)
    }

    :is(:is(.tech-z8-content>.contentCol)>.nameRow)>.name {
        padding-right: var(--space4);
        font-size: var(--font-size-xl)
    }

    :is(.tech-z8-content>.contentCol)>.links {
        justify-content: start;
        margin-top: 0
    }

    .photography-sect {
        padding-block:calc(var(--vw1) * 80) calc(var(--vw1) * 108)}

    .photography-content>.titleCont {
        grid-template-columns: auto 1fr;
        gap: var(--space5) var(--space4);
        align-items: center
    }

    :is(.photography-content>.titleCont)>.pop {
        grid-column: span 2
    }

    :is(.photography-content>.titleCont)>.env {
        align-self: start;
        width: calc(var(--vw1) * 134);
        translate: 0 -10%
    }

    :is(.photography-content>.titleCont)>.title {
        padding-bottom: var(--space2);
        margin-block:0 var(--space4);font-size: calc(var(--vw1) * 48)
    }

    :is(.photography-content>.titleCont)>.lead {
        grid-column: span 2
    }

    .photography-env {
        margin-top: var(--space9)
    }

    :is(.photography-env>.titleRow)>.title {
        padding: var(--space3) var(--space7);
        font-size: var(--font-size-head-x2s)
    }

    :is(:is(.photography-env>.titleRow)>.title-en) img {
        height: calc(var(--vw1) * 10)
    }

    .photography-env-body {
        padding-inline:calc(var(--vw1) * 95)}

    .photography-env-body-detail>.infoRow {
        grid-template-columns: 1fr 1fr;
        gap: var(--space8);
        margin-block:var(--space7) var(--space9)}

    .photography-env-body-detail>.cardList {
        grid-template-columns: 1fr 1fr;
        gap: var(--space9) var(--space8);
        align-items: start
    }

    .photography-env-body-detail>.note {
        margin-top: var(--space6);
        text-align: right
    }

    .photography-bird-type {
        padding: 0 0 var(--space4) var(--space8);
        margin-bottom: 0
    }

    .photography-bird-type>.titleRow {
        grid-template-columns: auto 1fr;
        gap: var(--space3);
        align-items: center
    }

    :is(.photography-bird-type>.titleRow)>.typeLink {
        justify-self: end
    }

    .photography-bird-type-list {
        margin-top: var(--space1)
    }

    .photography-bird-type-list>.typeItem {
        margin: var(--space2) var(--space8) 0 0
    }

    :is(.photography-card-item:nth-child(2),.photography-card-item:nth-child(4))>.imageCont {
        --a-trans-in-delay: .2s
    }

    :is(.photography-card-item>.titleRow)>.title {
        font-size: var(--font-size-xl)
    }

    :is(.photography-card-item>.imageCont)>.cap {
        margin-top: var(--space2)
    }

    .photography-season-types {
        margin-top: calc(var(--vw1) * 80)
    }

    :is(.photography-season-types>.titleRow)>.title {
        font-size: var(--font-size-xl)
    }

    :is(.photography-season-types>.titleRow)>.title-en {
        height: calc(var(--vw1) * 9);
        margin-bottom: var(--space6)
    }

    .photography-season-types>.typeList {
        grid-template-columns: repeat(4,1fr);
        gap: var(--space8)
    }

    .related-sect {
        padding-block:calc(var(--vw1) * 80) calc(var(--vw1) * 126)}

    .related-content>.title {
        margin-bottom: calc(var(--vw1) * 50)
    }

    .related-content>.links {
        grid-template-columns: 1fr 1fr;
        gap: var(--space8);
        justify-items: center
    }

    .related-link.-n2 {
        --a-trans-in-delay: .2s
    }

    .column-sect {
        padding-block:var(--space10)}

    .column-content {
        max-width: calc(var(--vw1) * 1200);
        padding: var(--space10)
    }

    .column-content-title {
        margin-block:var(--space6)}

    .column-content-title: before,.column-content-title:after {
        top:var(--space6);
        width: calc(var(--vw1) * 138)
    }

    .column-content-title:after {
        width: calc(var(--vw1) * 750)
    }

    .column-content-title>.column {
        height: calc(var(--vw1) * 13)
    }

    .column-content-title>.titleRow {
        grid-template-columns: auto 1fr;
        gap: 0 calc(var(--vw1) * 60);
        margin: 0 calc(var(--vw1) * 80) 0 calc(var(--vw1) * 95)
    }

    :is(.column-content-title>.titleRow)>.title {
        grid-row: 2;
        grid-column: 1;
        width: calc(var(--vw1) * 323);
        margin-bottom: 0
    }

    :is(.column-content-title>.titleRow)>.lead {
        grid-row: span 2;
        grid-column: 2;
        margin-top: calc(var(--vw1) * 46)
    }

    .column-category {
        padding-block:var(--space3);margin-block: var(--space6) var(--space10)
    }

    .column-category>.titleRow {
        --title-width: calc(var(--vw1) * 196);
        grid-template-columns: var(--title-width) 1fr calc(var(--vw1) * 254);
        gap: var(--space10);
        margin-bottom: var(--space8)
    }

    .-airplane:is(.column-category>.titleRow) {
        --title-width: calc(var(--vw1) * 238)
    }

    :is(.column-category>.titleRow)>.title {
        gap: var(--space2);
        margin-bottom: var(--space6);
        font-size: var(--font-size-head-base)
    }

    :is(:is(.column-category>.titleRow)>.title)>.en {
        height: calc(var(--vw1) * 11)
    }

    :is(.column-category>.titleRow)>.features {
        margin-bottom: var(--space4);
        font-size: var(--font-size-head-x2s)
    }

    :is(.column-category>.titleRow)>.cap {
        width: calc(var(--vw1) * 254);
        height: calc(var(--vw1) * 169)
    }

    :is(.column-category>.photoList)>.author {
        margin-top: 0;
        text-align: right
    }

    .column-photo {
        grid-template-columns: calc(var(--vw1) * 544) 1fr;
        gap: var(--space4) var(--space8);
        align-items: center
    }

    .column-photo+.column-photo {
        margin-top: var(--space8)
    }

    .column-photo>.imageCol {
        display: contents
    }

    :is(.column-photo>.imageCol)>picture {
        grid-row: span 2
    }

    :is(.column-photo>.imageCol)>.cap {
        grid-row: 2;
        grid-column: 2;
        align-self: start;
        margin-top: 0
    }

    .column-photo>.textCont {
        align-self: end
    }

    :is(.column-photo>.textCont)>.tag {
        font-size: var(--font-size-head-x2s)
    }

    .features-sect {
        padding-block:calc(var(--vw1) * 80)}

    .features-content {
        padding-block: 0
    }

    .features-content>.featuresList {
        gap: calc(var(--vw1) * 80)
    }

    .features-header {
        grid-template-rows: auto auto 1fr;
        grid-template-columns: 1fr calc(var(--vw1) * 256);
        gap: 0 var(--space10);
        justify-items: start;
        padding: var(--space8) calc(var(--vw1) * 64) var(--space10) 0;
        margin-bottom: calc(var(--vw1) * 80)
    }

    .features-header>.pop {
        padding: var(--space4) var(--space5);
        font-size: var(--font-size-head-x2s)
    }

    .features-header>.titleRow {
        margin-bottom: var(--space6)
    }

    .features-header>.lead {
        margin-bottom: var(--space8)
    }

    .features-header-info {
        --a-trans-in-delay: .3s;
        grid-row: 1 / span 3;
        grid-column: 2;
        gap: var(--space3);
        justify-items: center;
        justify-self: center;
        margin-top: var(--space2)
    }

    .features-header-info>.productCol {
        width: calc(var(--vw1) * 172)
    }

    .features-header-info>.links {
        gap: var(--space2);
        width: calc(var(--vw1) * 256)
    }

    :where(.feature-item)>.titleRow {
        grid-template-columns: calc(var(--vw1) * 60) 1fr;
        gap: var(--space2);
        margin-bottom: var(--space8)
    }

    :where(.feature-item) :where(.bodyCont) {
        display: grid;
        grid-template-columns: calc(var(--vw1) * 544) 1fr;
        gap: var(--space8);
        align-items: start
    }

    :where(.feature-item):nth-child(2)>.bodyCont {
        grid-template-columns: 1fr;
        gap: var(--space4)
    }

    :where(.feature-item):nth-child(3)>.bodyCont {
        grid-template-columns: 1fr 1fr
    }

    :where(.feature-item):nth-child(4)>.bodyCont {
        grid-template-columns: calc(var(--vw1) * 544) 1fr
    }

    :where(.feature-item):nth-child(5)>.bodyCont {
        grid-template-columns: calc(var(--vw1) * 544) 1fr
    }

    :where(.feature-item):nth-child(6)>.bodyCont {
        grid-template-columns: 1fr
    }

    :where(.feature-item):nth-child(7)>.bodyCont {
        grid-template-columns: calc(var(--vw1) * 545) 1fr
    }

    :where(.feature-item) .captureImage {
        grid-template-columns: calc(var(--vw1) * 258);
        gap: 0;
        margin-top: 0
    }

    .feature-title-text {
        font-size: var(--font-size-head-base)
    }

    .feature-af-content .contentCol {
        grid-column: 2;
        gap: var(--space6)
    }

    :is(.feature-af-content .contentCol)>.capCol {
        width: calc(var(--vw1) * 253);
        margin-top: 0
    }

    :is(:is(.feature-af-content .contentCol)>.capCol)>.note {
        width: calc(var(--vw1) * 180)
    }

    .feature-finder-content>.infoRow {
        grid-template-columns: 1fr 1fr;
        gap: var(--space8);
        align-items: center
    }

    :is(.feature-finder-content>.infoRow)>.images {
        gap: 0 var(--space6);
        width: calc(var(--vw1) * 476)
    }

    :is(:is(.feature-finder-content>.infoRow)>.images) img {
        height: calc(var(--vw1) * 186)
    }

    .feature-finder-comp {
        gap: var(--space2)
    }

    .feature-finder-comp>.title {
        font-size: var(--font-size-xl)
    }

    .feature-finder-comp>.compRow {
        gap: var(--space4);
        margin-top: var(--space2)
    }

    :is(.feature-finder-comp>.compRow):nth-child(3) {
        --a-trans-in-delay: .2s
    }

    .feature-operability-content {
        flex-direction: row;
        gap: var(--space8);
        align-items: center
    }

    .feature-operability-content>.imagesRow {
        grid-template-columns: calc(var(--vw1) * 158) calc(var(--vw1) * 354);
        grid-row: 1;
        grid-column: 1;
        gap: var(--space8)
    }

    .feature-operability-content>.desc {
        grid-column: 2;
        margin-bottom: calc(var(--vw1) * 60)
    }

    .feature-high-speed-content>.textCol {
        grid-column: 2;
        gap: var(--space2);
        align-self: center;
        margin-bottom: var(--space10)
    }

    .feature-high-speed-precapture {
        grid-template-columns: repeat(4,1fr);
        grid-column: 1 / -1;
        gap: var(--space8);
        margin-top: 0
    }

    :is(.feature-high-speed-precapture>.itemCol)>.label {
        padding: var(--space1) var(--space3);
        font-size: var(--font-size-sm);
        letter-spacing: .16em
    }

    .-release:is(.feature-high-speed-precapture>.itemCol) {
        --a-trans-in-delay: .3s;
        gap: var(--space2) var(--space8);
        margin-left: 0
    }

    :is(.feature-high-speed-precapture>.itemCol) .image {
        width: calc(var(--vw1) * 256)
    }

    :is(.feature-high-speed-precapture>.itemCol)>.iconTri {
        right: calc(var(--vw1) * -21);
        bottom: calc(var(--vw1) * 74)
    }

    .feature-sensor-content>.contentCol {
        grid-column: 2;
        gap: var(--space6)
    }

    :is(.feature-sensor-content>.contentCol)>.sensorDiagram {
        grid-template-columns: calc(var(--vw1) * 160) 1fr;
        gap: var(--space8);
        margin-top: 0
    }

    :is(:is(.feature-sensor-content>.contentCol)>.sensorDiagram)>.capCol {
        width: calc(var(--vw1) * 256)
    }

    .feature-high-sensitive-content>.imageRow {
        grid-template-columns: 1fr 1fr;
        gap: var(--space8)
    }

    :is(.feature-high-sensitive-content>.imageRow) .image.-n2 {
        --a-trans-in-delay: .2s
    }

    .feature-high-sensitive-content>.contentRow {
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr 1fr;
        gap: var(--space8)
    }

    :is(.feature-high-sensitive-content>.contentRow)>.desc {
        grid-column: 1
    }

    :is(.feature-high-sensitive-content>.contentRow)>.captureImage {
        grid-row: 1 / span 2;
        grid-column: 2
    }

    .focus-limiter-content>.contentCol {
        grid-column: 2;
        gap: var(--space6)
    }

    .basis-content.-lens {
        padding-top: var(--space5)
    }

    .basis-content.-useful {
        padding-top: calc(var(--vw1) * 48)
    }

    .basis-content>.lensListTitle {
        margin-block:0 var(--space9);font-size: calc(var(--vw1) * 36)
    }

    :is(.basis-content>.lensListTitle)>.icon {
        top: 0
    }

    .bold:is(:is(.basis-content>.lensListTitle) span) {
        margin-left: var(--space2)
    }

    .basis-content>.note {
        text-align: right
    }

    .basis-header>.pop {
        padding: var(--space4) var(--space5);
        font-size: var(--font-size-head-x2s)
    }

    .basis-header>.titleRow {
        width: calc(var(--vw1) * 581)
    }

    .-top:is(.basis-header>.titleRow) {
        margin-top: var(--space1)
    }

    .basis-header>.title {
        font-size: calc(var(--vw1) * 56)
    }

    .basis-settings {
        margin-top: var(--space8)
    }

    .basis-settings>.lead {
        margin-bottom: var(--space10)
    }

    .basis-settings>.basisList {
        gap: calc(var(--vw1) * 64)
    }

    .basis-item {
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr calc(var(--vw1) * 448);
        gap: var(--space4) calc(var(--vw1) * 80);
        align-items: start
    }

    .basis-item>.titleRow {
        font-size: var(--font-size-head-x2s)
    }

    .basis-item>.text {
        grid-column: 1;
        width: calc(var(--vw1) * 540)
    }

    .basis-item>.image {
        grid-row: 1 / 3;
        grid-column: 2;
        margin-top: 0
    }

    .basis-item>.dialPic {
        grid-row: 1 / 3;
        grid-column: 2;
        margin-top: 0
    }

    .basis-item>.accClose {
        margin-block:var(--space5) var(--space4)}

    .basis-example-photos {
        grid-template-columns: repeat(3,1fr);
        grid-column: 1 / -1;
        gap: var(--space8);
        justify-content: center;
        margin-top: var(--space7)
    }

    .basis-example-photos.-af-area {
        grid-template-columns: repeat(3,calc(var(--vw1) * 256));
        gap: var(--space1) var(--space8);
        margin-top: var(--space6)
    }

    .basis-example-photos.-focal {
        margin-top: var(--space4)
    }

    .basis-example-photos.-bird-type {
        grid-template-rows: auto 1fr;
        grid-template-columns: calc(var(--vw1) * 352) 1fr;
        gap: var(--space6) var(--space8);
        align-items: start;
        margin-top: var(--space4)
    }

    .basis-example-photos.-bird-type>.photoItem {
        gap: var(--space7)
    }

    .-normal:is(.basis-example-photos.-bird-type>.photoItem) {
        grid-row: span 2
    }

    .-duck:is(.basis-example-photos.-bird-type>.photoItem),.-prey:is(.basis-example-photos.-bird-type>.photoItem) {
        grid-template-columns: calc(var(--vw1) * 448) 1fr
    }

    :is(.basis-example-photos.-bird-type>.photoItem)>.textCont {
        gap: 0;
        align-self: center;
        justify-items: start
    }

    :is(:is(.basis-example-photos.-bird-type>.photoItem)>.textCont)>.pop {
        font-size: var(--font-size-xl)
    }

    :is(.basis-example-photos>.item):nth-child(2) {
        --a-trans-in-delay: .1s
    }

    :is(.basis-example-photos>.item):nth-child(3) {
        --a-trans-in-delay: .2s
    }

    :is(.basis-example-photos>.item):nth-child(4) {
        --a-trans-in-delay: .3s
    }

    .basis-example-photos>.note {
        grid-column: 1 / -1;
        margin-top: 0
    }

    .basis-settings-table {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-column: 1 / -1;
        gap: calc(var(--vw1) * 60);
        align-items: start;
        padding: var(--space4) var(--space6);
        margin-top: calc(var(--vw1) * 48)
    }

    .basis-settings-table>.title {
        font-size: var(--font-size-xl)
    }

    .basis-settings-table>.settings {
        grid-template-columns: repeat(4,1fr);
        align-self: center;
        width: max-content;
        margin-block:var(--space2h)}

    : is(:is(.basis-settings-table>.settings)>.row):nth-child(3) {
        grid-row:2
    }

    .basis-shutter-speed {
        gap: var(--space4);
        margin-top: calc(var(--vw1) * 75)
    }

    .basis-shutter-speed>.headerRow {
        grid-template-columns: 1fr calc(var(--vw1) * 544);
        gap: var(--space3) var(--space5)
    }

    :is(.basis-shutter-speed>.headerRow)>.subtitle {
        grid-column: 1 / -1
    }

    :is(.basis-shutter-speed>.headerRow)>.title {
        font-size: var(--font-size-head-sm)
    }

    :is(:is(.basis-shutter-speed>.headerRow)>.title)>.enclo {
        padding: var(--space3) var(--space7)
    }

    :is(.basis-shutter-speed>.headerRow)>.text {
        align-self: center;
        margin-top: 0
    }

    .basis-shutter-speed>.accClose {
        margin-block:0 var(--space5)}

    .basis-shutter-speed-photos {
        grid-template-columns: repeat(4,calc(var(--vw1) * 256));
        margin-top: var(--space6)
    }

    .basis-shutter-speed-photos>.item {
        gap: var(--space4)
    }

    :is(.basis-shutter-speed-photos>.item):nth-child(2)>.image {
        --a-trans-in-delay: .1s
    }

    :is(.basis-shutter-speed-photos>.item):nth-child(3)>.image {
        --a-trans-in-delay: .2s
    }

    :is(.basis-shutter-speed-photos>.item):nth-child(4)>.image {
        --a-trans-in-delay: .3s
    }

    .basis-lens-item {
        display: grid;
        grid-template-columns: calc(var(--vw1) * 544) 1fr;
        gap: var(--space4) var(--space8);
        align-items: start
    }

    .basis-lens-item>.productCol {
        grid-template-columns: calc(var(--vw1) * 257) 1fr;
        gap: var(--space4) var(--space8)
    }

    :is(.basis-lens-item>.productCol)>.name {
        grid-column: 1 / -1;
        margin-top: 0;
        font-size: var(--font-size-xl);
        letter-spacing: var(--letter-spacing-heading)
    }

    :is(.basis-lens-item>.productCol)>.desc {
        grid-column: 1 / -1
    }

    :is(.basis-lens-item>.productCol) .photo {
        --a-trans-in-delay: .2s;
        width: 100%;
        height: auto;
        margin-top: 0
    }

    :is(.basis-lens-item>.productCol)>.links {
        grid-row: 3;
        grid-column: 2;
        gap: var(--space2);
        align-self: start
    }

    .basis-useful-content {
        padding: calc(var(--vw1) * 40) calc(var(--vw1) * 96) calc(var(--vw1) * 86);
        margin-top: var(--space5);
        background: var(--color-white) url("data:image/svg+xml,%3csvg%20width='15'%20height='628'%20viewBox='0%200%2015%20628'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='11'%20cy='4'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='3'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='24'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='23'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='44'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='43'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='64'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='63'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='84'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='83'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='104'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='103'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='124'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='123'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='144'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='143'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='164'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='163'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='184'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='183'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='204'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='203'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='224'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='223'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='244'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='243'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='264'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='263'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='284'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='283'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='304'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='303'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='324'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='323'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='344'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='343'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='364'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='363'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='384'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='383'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='404'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='403'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='424'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='423'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='444'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='443'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='464'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='463'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='484'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='483'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='504'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='503'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='524'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='523'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='544'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='543'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='564'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='563'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='584'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='583'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='604'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='603'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3ccircle%20cx='11'%20cy='624'%20r='4'%20fill='%23DFDBD1'/%3e%3crect%20y='623'%20width='12'%20height='2'%20fill='%23DFDBD1'/%3e%3c/svg%3e") left center / calc(var(--vw1) * 15) no-repeat
    }

    :is(.basis-useful-content>.headerRow)>.sub {
        top: calc(var(--vw1) * -26);
        right: 0;
        left: auto;
        translate: 0 0
    }

    :is(.basis-useful-content>.headerRow)>.title {
        font-size: var(--font-size-head-base)
    }

    .basis-useful-content>.itemList {
        grid-template-rows: calc(var(--vw1) * 182) auto auto auto;
        grid-template-columns: calc(var(--vw1) * 352) 1fr;
        gap: var(--space8)
    }

    .basis-useful-item {
        grid-template-rows: subgrid;
        grid-row: span 4
    }

    .basis-useful-item>.photoRow {
        gap: var(--space4);
        align-content: center;
        justify-self: center
    }

    .-strap:is(.basis-useful-item>.photoRow) {
        width: calc(var(--vw1) * 368)
    }

    .-strap:is(:is(.basis-useful-item>.photoRow)>.photo) img {
        width: calc(var(--vw1) * 347)
    }

    .basis-useful-item>.title {
        font-size: var(--font-size-xl)
    }

    .basis-useful-item>.links {
        gap: var(--space2);
        margin-top: var(--space1)
    }

    .-strap:is(.basis-useful-item>.links) {
        display: grid;
        grid-template-rows: repeat(2,1fr);
        grid-template-columns: repeat(2,auto);
        grid-auto-flow: column;
        gap: var(--space2) var(--space8)
    }
}

@media screen and not (min-width: 768px) {
    .footer-recommended-modal {
        font-size:var(--font-size-sm)
    }

    .c-vertical-scroll-content {
        width: 100vw;
        margin-inline:calc(var(--vw1) * -30);overflow-x: scroll
    }

    :is(.c-photo-example-comb>.photoItem):nth-child(1)>.photo {
        display: block;
        width: calc(var(--vw1) * 272);
        margin-inline:auto}

    .u-hide-until-md {
        display: none!important
    }

    .visual-cont {
        max-width: max(75%,var(--content-width));
        margin-inline:auto}

    :is(.visual-cont>.titleWrap)>.line {
        margin-bottom: calc(var(--vw1) * 10)
    }

    .tech-header.-top>.pop {
        justify-self: center
    }

    :is(.tech-pose>.titleRow)>.title {
        width: calc(var(--vw1) * 220)
    }

    .-sm:is(:is(.tech-column-sect>.titleCol)>.title) {
        letter-spacing: 0
    }

    .-sp2l:is(:is(.photography-env>.titleRow)>.title-en) img {
        height: calc(var(--vw1) * 18)
    }

    :is(.photography-env-body-detail>.infoRow)>.desc {
        margin-bottom: var(--space6)
    }

    .photography-bird-type-list {
        display: grid;
        gap: var(--space3)
    }

    .photography-card-item>.titleRow {
        font-size: var(--font-size-sm)
    }

    .-sp-block:is(:is(.photography-card-item>.titleRow)>.title) {
        width: 100%;
        margin-bottom: var(--space2)
    }

    .-sp-block:is(:is(.photography-card-item>.titleRow)>.title)+.tag:before {
        margin-left: var(--space1)
    }

    :is(.column-category>.titleRow)>.features {
        grid-row: 2;
        grid-column: span 2
    }

    :is(:where(.feature-item) .captureImage) figcaption {
        margin-top: 0
    }

    .feature-finder-comp-item>.slideRow {
        margin-left: calc(var(--vw1) * 30)
    }

    .feature-high-speed-content {
        gap: var(--space2)
    }

    .-before:is(.feature-high-speed-precapture>.itemCol),.-best:is(.feature-high-speed-precapture>.itemCol) {
        grid-template-rows: calc(var(--vw1) * 46) auto
    }

    .-release:is(.feature-high-speed-precapture>.itemCol) {
        width: calc(var(--vw1) * 358);
        margin-left: var(--space3)
    }

    :is(.feature-high-speed-precapture>.itemCol)>.iconTri {
        font-size: var(--font-size-xs)
    }

    :is(.basis-item>.titleRow) span.-sp-mr150 {
        margin-right: calc(var(--vw1) * 150)
    }

    .-normal:is(.basis-example-photos.-bird-type>.photoItem)>.photo {
        display: block;
        width: calc(var(--vw1) * 272);
        margin-inline:auto}
}

@media(any-hover: hover) {
    main :where(a:hover) {
        opacity:.8
    }

    :is(.footer-content>.recommended):hover {
        -webkit-text-decoration: none;
        text-decoration: none
    }

    .c-button:hover {
        color: var(--c-button-text-hover);
        -webkit-text-decoration: none;
        text-decoration: none;
        background-color: var(--c-button-bg-hover);
        border-color: var(--c-button-border-color-hover)
    }

    .photography-bird-type :where(a:hover) {
        -webkit-text-decoration: none;
        text-decoration: none;
        opacity: .75
    }
}

@media(forced-colors:active) {
    :where(mark) {
        background-color: Highlight;
        color: HighlightText
    }
}

@media(prefers-reduced-motion:no-preference) {
    .c-details-content {
        transition-timing-function: ease;
        transition-duration: .4s;
        transition-property: grid-template-rows
    }
}

@media print {
    :where(mark) {
        border-width: max(calc(var(--vw1) * 1),1px);
        border-style: dotted
    }
}