@charset 'UTF-8';

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

@font-face { font-family: 'PyeojinGothic'; src: url('./fonts/PyeojinGothic-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'PyeojinGothic'; src: url('./fonts/PyeojinGothic-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PyeojinGothic'; src: url('./fonts/PyeojinGothic-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'PyeojinGothic'; src: url('./fonts/PyeojinGothic-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'PyeojinGothic'; src: url('./fonts/PyeojinGothic-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'PyeojinGothic'; src: url('./fonts/PyeojinGothic-Extrabold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'PyeojinGothic'; src: url('./fonts/PyeojinGothic-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* environment */
:root {
    --mX: 0; --mY: 0; --pxMinW: 1440px;
    --pxMW: 1600px; --pxPaddingSide: max(40px, calc(50vw - var(--pxMinW) / 2));
    --cGeneral: #0032B4;
    --cP: var(--cGeneral); --cVanilla: #007FB3; --cFine: #B71C2C; --cK: #070709; --cBgG: #F3F3F3; --cBgDG: #DDE1E2;
    --cSR: #b91c23;
    --cU: #007FB3; --cGU: #00215B; --cSU: #E28CB8; --cSUt: #dc75aa; --cCLIPU: #D2C475; --cCLIPUt: #b3a457; --cFSWU: #E62C86; --cBLU: #F08429;
    --cFU: #B81C2B; --cTFU: #EEB141; --cTFUt: #d39a34; --cFUTS: #003686;
    --fW: 500; --fS: 18px; --fH: 1.5em; --fF: 'PyeojinGothic', sans-serif; --tC: var(--cK); --tA: left;
    --pxHeaderH: 80px;
    --vHexV: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    --vHexH: polygon(0% 50%, 25% 100%, 75% 100%, 100% 50%, 75% 0%, 25% 0%);
}
:root:has(#news li) { --pxNewsHeight: 40px; }
* { font: var(--fW) var(--fS)/var(--fH) var(--fF); color: var(--tC); text-align: var(--tA); padding: 0; margin: 0; border: 0 none; background: transparent; }

html { position: relative; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.5) transparent; background-attachment: fixed; word-break: keep-all; }
html.on { scroll-behavior: smooth; }
body { min-width: var(--pxMinW); }

/* component */
form { display: contents; }
a,
button { cursor: pointer; transition: .2s, font 0s; -webkit-tap-highlight-color: transparent; }
button { --tA: center; }
a { text-decoration: none; }
img { display: block; height: auto; max-width: 100%; }
ul,
ol { list-style-type: none; }
:is(input:not([type="checkbox"]),textarea) { --fW: 300; --fS: 14px; --fH: 24px; display: block; box-sizing: border-box; width: 100%; background: var(--cGL); padding: 2px 7px; }
:is(input,textarea):focus { outline: none; }
:is(input,textarea)::placeholder { font: 300 14px/24px var(--fF); color: var(--cK05); }
input { height: 28px; }
textarea { resize: none; }
textarea::placeholder { color: #888; }
table { table-layout: fixed; border-spacing: 0; border-collapse: collapse; width: 100%; }
table.info { --tA: left; border-top: 2px solid rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 0 #fff, 0 2px 0 0 rgba(0, 0, 0, 0.25); }
h4.hex+table.info:not(.hex) { border-top: 0 none; margin-top: -16px; }
table.info th,
table.info td { border-bottom: 1px solid rgba(0, 0, 0, 0.25); padding-top: 10px; padding-bottom: 10px; }
table.info th { --fW: 700; --fS: 16px; --fH: 24px; }
table.info td { --fW: 500; --fS: 18px; --fH: 24px; }
table.info th+td { padding-left: 30px; }
table.info thead { --tA: center; background: var(--cBgG); }
/* table.info thead th { box-shadow: 1px 0 0 0 #fff; } */
table.info thead+tbody { --tA: center; }
table.info thead+tbody th+td { padding-left: 0; }
.note { --fW: 400; --fS: 16px; --fH: 27px; --tA: left; margin: 8px 0; }
.note.underTable { margin-top: 16px; }
dl.note { margin: 8px 0; }
dl.note dt { --tC: var(--cP); --fW: 700; --fS: 16px; --fH: 18px; margin-bottom: 12px; }
.scrollH { overflow-x: auto; }
.scrollH table.info { position: relative; }
.scrollH table.info caption,
.scrollH table.info th:first-child:not(.noFix),
.scrollH table.info tr.fix { position: sticky; left: 0; }
*+:is(table.info,.scrollH) { margin-top: 42px; }
.col2>*+:is(table.info,.scrollH) { margin-top: 0; }

:is(h3,h4,figcaption).hex { display: flex; align-items: center; --fW: 700; --fS: 22px; --fH: 42px; margin-bottom: 12px; }
:is(h3,h4,figcaption).hex+.dot { margin-left: 8px; }
:is(h3,h4,caption,figcaption).hex::before { content: ''; display: block; width: 14px; height: 12px; background: var(--tC); clip-path: var(--vHexH); margin: -1px 7px 0 0; }
:is(h3,h4).hex::after { content: ''; flex: 1; height: 1px; background: var(--tC); box-shadow: 0 1px 0 rgba(34, 34, 34, 0.2); margin: -1px 0 0 9px; }
:is(h3,h4).hex+.text { margin-top: 46px; }

ul.hyphen li { text-indent: -.65em; padding-left: .65em; }
ul.hyphen li::before { content: '- '; }
ul.dot { --tA: left; }
ul.dot li { text-indent: -.7em; padding-left: .7em; }
ul.dot li::before { content: '• '; }
ul.note li,
dl.note dd { text-indent: -.9em; padding-left: .9em; }
ul.note li::before,
dl.note dd::before { content: '※ '; }
em.note { display: block; --tC: #fff; --tA: center; --fW: 700; --fS: 1.2em; --fH: 1.5em; padding: .5em; background: var(--cP); }
*+em.note { margin-top: 2em; }

dl.item { border: 1px solid var(--cBgDG); padding: 1em; --fS: 16px; }

div.arrow { width:40px; height: 40px; position: relative; }
div.arrow i {
    position: absolute; inset: 0 0 0 0; margin: 0 auto; 
    display: block; width: 20px; height: 20px; opacity: 0; 
    animation: arrow 1.8s infinite linear; }
div.arrow i::before { content: '';
    display: block; width: 100%; height: 100%;
    border: solid var(--cGeneral); border-width: 0 3px 3px 0; transform: rotate(45deg); }
@keyframes arrow {
    0% { transform: translateY(0); opacity: 0; }
    37.5% { transform: translateY(15px); opacity: 1; }
    75% { transform: translateY(30px); opacity: 0; }
}
div.arrow i:nth-child(2) { animation-delay: .4s; }
div.arrow i:nth-child(3) { animation-delay: .8s; }
#inquiry div.arrow { height: 0; margin-left: auto; margin-right: auto; }
#inquiry div.arrow i { inset: auto 0 140px; }

[data-popup] { -webkit-tap-highlight-color: transparent; }
.toast {
    position: fixed; z-index: 102; inset: -100vh 0 auto; transition: .5s, inset 0s .5s; 
    width: fit-content; height: max-content; margin: auto;
    text-align: center; background: #000c; border-radius: 12px; padding: 2px;
    box-shadow: 0 10px 10px #0003, 0 2px 2px #0006; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; transform: translateY(10px); }
.toast p { --fS: 14px; --fH: 1.4em; --tC: #fff; width: fit-content; height: max-content; border: 1px solid; border-color: #fff2#fff3 #fff3 #fff2; border-radius: 10px; padding: 8px 24px; --tA: center; }
.toast.on { top: 0; bottom: 0; transition: .5s, inset 0s; animation: toast 2s; }
@keyframes toast {
    0% { transform: scale(.95) translateY(10px); opacity: 0; }
    10% { transform: translateY(-3px) scale(1.02); opacity: 1; }
    20% { transform: translateY(0) scale(1); opacity: 1; }
    85% { transform: translateY(0); opacity: 1; }
    100% { transform: scale(1) translateY(10px); opacity: 0; }
}
[role="popup"] { display: none; }

/* common */
.ww { display: inline-block; }

/* layout */
header.common {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: stretch; height: var(--pxHeaderH);
    background: #fff; box-shadow: 0 4px 20px rgba(35, 41, 58, 0.08); }
h1 { flex: 0 0 220px; height: 100%; background: url('./images/logo.png') center no-repeat; background-size: auto 60px; }
h1 a,
h1 button { display: block; width: 100%; height: 100%; --fS: 0; text-indent: -999px; overflow: hidden; color: transparent; }
nav.bookmark { flex: 1; display: flex; justify-content: space-evenly; padding: 0 4%; height: 100%; align-items: center; }
nav.bookmark a,
nav.bookmark button { --fS: 16px; --tA: center; flex: 1; position: relative; display: flex; align-items: center; justify-content: center; height: 100%; }
nav.bookmark a:hover,
nav.bookmark button:hover { --tC: var(--cP);}
nav.bookmark a.back::before { content: '←'; margin-right: .2em; }
nav.series { display: contents; }
nav.series a { flex: 0 0 180px; position: relative; height: 100%; --fS: 0; text-indent: -999px; overflow: hidden; color: transparent; }
nav.series a::after { content: ''; position: relative; z-index: 1; display: block; width: 100%; height: 100%; background: no-repeat center; background-size: auto 30px; }
nav.series a.index { background: #fff; --tC: var(--cP); }
nav.series a.fujilok { background-color: var(--cVanilla); }
nav.series a.fujilok::after { background-image: url('./images/bi-fujilok.svg'); }
nav.series a.fine { background-color: var(--cFine); }
nav.series a.fine::after { background-image: url('./images/bi-fine.svg'); }
button.menu { position: relative; flex: 0 0 var(--pxHeaderH); height: 100%; --fS: 0; text-indent: -999px; overflow: hidden; color: transparent; }
button.menu i::before,
button.menu i { content: ''; position: absolute; inset: 0; margin: auto; display: block; width: 40px; transition: .2s; }
button.menu i::before { height: 2px; background: var(--cK); }
button.menu i { height: 24px; border: solid var(--cK); border-width: 2px 0; }
button.menu:hover i { border-color: var(--cP); }
button.menu:hover i::before { background: var(--cP); }
nav.series a::before,
button.menu::before { content: ''; position: absolute; z-index: 0; inset: 1px 0 0; display: block; height: 50%; background: linear-gradient(rgba(0, 0, 54, 0.6), rgba(0, 0, 54, 0)); opacity: 0; transition: .5s; }
button.menu::before { background: linear-gradient(rgba(0, 0, 54, 0.6), rgba(0, 0, 54, 0)); }
nav.series a:hover::before,
button.menu:hover::before { opacity: .3; height: 100%; margin-top: 0; }

nav.bookmark button { --progressL: 0; --progressR: 100%; }
nav.bookmark button::before,
nav.bookmark button::after { content: ''; position: absolute; inset: auto var(--progressR) 0 var(--progressL); height: 2px; background: var(--cY); opacity: 1; box-sizing: border-box; }
nav.bookmark button::before { background: var(--cP); }
nav.bookmark button::after { height: 12px; background: linear-gradient(#0032B400 0%, #0032B422 50%, #0032B411 75%, #0032B4ff 100%); opacity: .2; }
nav.bookmark button:not(.on) { --progressL: 0 !important; --progressR: 100% !important; }

.regularHex { display: flex; flex-flow: wrap; justify-content: center; }
nav.tab button,
.regularHex :is(a,button,li) { --tA: center;
    position: relative;
    display: flex; justify-content: center; align-items: center;
    clip-path: var(--vHexV); }
nav.tab button::before,
.regularHex li::before,
.regularHex>:is(a,button)::before { content: '';
    position: absolute;
    display: block; box-sizing: border-box; width: 86.6%; height: 86.6%; border: solid var(--cP); border-width: 1px 0;
    transform: rotate(-30deg); }
nav.tab { display: flex; justify-content: center; }
nav.tab button { flex: 0 0 75px; height: 86px; --tC: var(--cP); --fS: 16px; --fH: 18px; --fW: 600; }
nav.tab button:hover { background: #fff; transition: 0s; }
nav.tab button[aria-selected="true"] { background: var(--cP); --tC: #fff; --fW: 700; }

main>section { padding-top: 100px; padding-bottom: 100px; }
section.inner { background: var(--cBgG); margin: 0 var(--pxPaddingSide) 140px; border-radius: 20px; padding: 40px; box-sizing: border-box; }
@media (max-width: 1440px) { section.inner { margin: 0 auto 140px; max-width: 1360px; } }
section section.inner { margin-left: 40px; margin-right: 40px; margin: 40px; }
section section.inner h3:first-child { margin-top: -20px; }
section.bgDiv { background: var(--cBgG); padding: 100px 0; }
:is(h2,h3).common { --tC: var(--cP); --fS: 28px; --fH: 1.6em; --fW: 400; text-align: center; border-bottom: 1px solid var(--tC); width: fit-content; margin: 0 auto 36px; padding: 0 8px; position: relative; }
:is(h2,h3).common::after { content: ''; position: absolute; inset: auto 0 1px; height: 1px; background: var(--tC); }
:is(h5).line { --fW: 600; --fS: 20px; --fH: 1.6em; text-align: center; border-top: 1px solid var(--tC); border-bottom: 1px solid var(--tC); width: fit-content; margin: 0 auto 36px; padding: 0 8px; position: relative; }
*+:is(h5).line { margin-top: 36px; }
h2:not(.soft) { --fS: 36px; --fW: 800; padding-left: 2px; padding-right: 2px; }
h3.strong { --fS: 28px; --fW: 900; --fH: 36px; --tC: var(--cP); --tA: center; }

.video iframe { width: 485px; height: 272px; background: var(--cBgG); border-radius: 20px; overflow: hidden; }

#application { position: relative; background: #000; overflow: hidden; --tC: #fff; padding: 100px; }
#application::before { content: ''; display: block; position: absolute; inset: -10%; background: url(./images/index/application-bg.png) no-repeat center; background-size: cover; opacity: .2; }
#application>* { position: relative; z-index: 1; }
#application h2 { --tC: #fff; margin-bottom: 60px; }
#application .app { display: flex; flex-flow: wrap; width: 752px; margin: 0 auto 55px; }
#application .app li { position: relative; width: 188px; height: 217px; margin-bottom: -55px; pointer-events: none; --fS: 22px; --fW: 700; }
#application .app li:nth-child(8n+1) { margin-left: -47px; }
#application .app li:nth-child(8n+5) { margin-left: 47px; }
#application .app li:nth-child(8n+8) { margin-right: -47px; }
#application .app li button { --tA: center;
    position: relative;
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    clip-path: var(--vHexV); background: transparent; pointer-events: all; }
#application .app li button::before { content: '';
    position: absolute;
    display: block; box-sizing: border-box; width: 86.6%; height: 86.6%; border: solid #fff; border-width: 1px 0;
    transform: rotate(-30deg); }
#application .app li button:hover { background: #0032B4dd; z-index: 1; }

#faq { --cP: var(--cGeneral); }
#faq .faq { width: 842px; margin: 0 auto; }
#faq .faq li { padding: 20px 16px; }
#faq .faq li[aria-hidden="true"] { display: none; }
#faq .faq li[aria-hidden="false"]~li { border-top: 2px solid #fff; }
#faq .faq p { padding: 11px 0 11px 51px; position: relative; }
#faq .question::before,
#faq .answer::before { content: 'Q'; position: absolute; inset: 0 auto auto 0; width: 46px; height: 40px; display: block; background: #fff; color: var(--cP); font: 800 18px/40px var(--fF); text-align: center; clip-path: var(--vHexH); }
#faq .answer::before { content: 'A'; }
#faq footer.fn { padding-left: 51px; }
#faq ul.faq :is(a,button) { text-decoration: underline; --tC: var(--cP); }
footer.fn :is(button,a) { padding: 10px 22px; --fH: 18px; --fS: 16px; --fW: 700; --tC: var(--cP); background: #fff; clip-path: polygon(0% 50%, 11px 100%, calc(100% - 11px) 100%, 100% 50%, calc(100% - 11px) 0%, 11px 0%); }
footer.fn :is(button,a):hover { background: var(--cP); --tC: #fff; }
footer.fn :is(button,a):disabled { background-color: #9f9fc0; --tC: #55a; opacity: .2; }
footer.fn button.close { width: 44px; text-indent: -999px; --tC: transparent; --fS: 0; overflow: hidden; position: relative; }
footer.fn button.close::before,
footer.fn button.close::after { content: ''; display: block; position: absolute; inset: 0; margin: auto; width: 20px; height: 2px; background: var(--cP); transition: .2s; }
footer.fn button.close::before { transform: rotate(45deg); }
footer.fn button.close::after { transform: rotate(-45deg); }
footer.fn button.close:hover::before,
footer.fn button.close:hover::after { background: #fff; }

/* index */
.index .hero { display: flex; align-items: stretch; height: calc(100vh - var(--pxHeaderH)); background: #000; padding: 0; }
.index .hero section { --tA: center; --tC: #fff; position: relative; flex: 1; height: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; overflow: hidden; transition: 1s; }
.index .hero section>* { z-index: 2; }
.index .hero section>a { position: absolute; inset: 0; z-index: 1; display: block; --fS: 0; text-indent: -999px; overflow: hidden; color: transparent; }
.index .hero section::before,
.index .hero section::after { content: ''; position: absolute; inset: -10%; z-index: 0; display: block; }
.index .hero section::after { mix-blend-mode: multiply; }
.index .hero h2 { margin-bottom: 90px; transition: 1s; }
.index .hero h2 img { margin: 0 auto; }
.index .hero h2 img.product { margin-bottom: 40px; height: 200px; transform: scale(.8); transition: 1s; transform-origin: center bottom; }
.index .hero h2 img.logo { height: 90px; }
.index .hero dl { --fW: 500; --fS: 18px; --fH: 21px; margin-top: 80px; }
.index .hero dt { --fW: 600; --fS: 28px; --fH: 33px; margin-bottom: 28px; }
.index .hero dd+dd { margin-top: 21px; }
.index .hero dd.fn { display: flex; justify-content: center; margin-top: 30px; }
.index .hero dd.fn :is(a,button) { --fW: 500; --fS: 14px; --fH: 17px; width: 75px; height: 86px; }
.index .hero dd.fn :is(a,button):hover { --tC: var(--cK); background: #fff; }
.index .hero dd.fn :is(a,button)::before { border-color: #fff; }
.index .hero dd { transition: 1s; opacity: 0; }
.index .hero dd.fn { margin-bottom: -228px; }
.index .hero section:hover { flex-grow: 1.5; }
.index .hero section:hover h2 { margin-bottom: 0; }
.index .hero section:hover h2 img.product { transform: scale(1); }
.index .hero section:hover dd { margin-bottom: 0; opacity: 1; }
.index .hero:hover section:not(:hover) { opacity: .4; }
.index .hero .fujilok::before { background: url('./images/hero-fujilok-bg.png') center no-repeat; background-size: cover; }
.index .hero .fujilok::after { background: #08132E; opacity: .8; }
.index .hero .fine::before { background: url('./images/hero-fine-bg.png') center no-repeat; background-size: cover; }
.index .hero .fine::after { background: #350B0B; opacity: .9; }

.index .motto { background: var(--cK) url(./images/pattern-hexline.svg) center 14px repeat; padding-top: 80px; padding-bottom: 0; }
.index .motto article { height: 161px; --fS: 0; text-indent: -999px; overflow: hidden; color: transparent; background: url('./images/index/motto-text.svg') no-repeat center; background-size: contain; }
.index .motto p.caution { margin-top: 80px; height: 320px; display: flex; align-items: center; justify-content: center; text-align: center; --fS: 30px; --fW: 800; --fH: 2em; --tC: #fff; background: var(--cP) url(./images/pattern-hexline.svg) center 14px repeat; }
.index .motto p.caution strong { display: inline; }

.index #product { padding-left: var(--pxPaddingSide); padding-right: var(--pxPaddingSide); }
.index #product .series { display: flex; align-items: stretch; padding: 130px 0 65px; }
.index #product .series article { flex: 1; }
.index #product .series h2 img { margin: 0 auto; height: 90px; }
.index #product .fn :is(a,button) { --fW: 500; --fS: 14px; --fH: 17px; width: 75px; height: 86px; }
.index #product .fn { margin-top: 28px; }
.index #product .series .fujilok .fn :is(a,button) { --tC: var(--cU); }
.index #product .series .fujilok .fn :is(a,button):hover { --tC: #fff; background: var(--cU); }
.index #product .series .fujilok .fn li::before { border-color: var(--cU); }
.index #product .series .fine .fn :is(a,button) { --tC: var(--cFine); }
.index #product .series .fine .fn :is(a,button):hover { --tC: #fff; background: var(--cFine); }
.index #product .series .fine .fn li::before { border-color: var(--cFine); }
.index #product .series .lineup { display: grid; grid-template-columns: auto; gap: 28px 45px; width: fit-content; margin: 70px auto 0; }
.index #product .series .lineup h3 { position: relative; padding-bottom: 12px; border-bottom: 2px solid var(--cP); width: fit-content; }
.index #product .series .lineup h3 img { height: 24px; }
.index #product .series .lineup p { --fS: 20px; --fH: 26px; --fW: 800; --tC: var(--cP); position: relative; width: fit-content; border-top: 2px solid var(--cP); margin-top: -2px; padding-top: 8px; ;}
.index #product .series .fujilok .lineup { grid-template-columns: auto auto; }
.index #product .series .lineup .u { --cP: var(--cU); }
.index #product .series .lineup .gu { --cP: var(--cGU); }
.index #product .series .lineup .su { --cP: var(--cSUt); }
.index #product .series .lineup .clipu { --cP: var(--cCLIPUt); }
.index #product .series .lineup .fswu { --cP: var(--cFSWU); }
.index #product .series .lineup .blu { --cP: var(--cBLU); }
.index #product .series .lineup .fu { --cP: var(--cFU); }
.index #product .series .lineup .tfu { --cP: var(--cTFUt); }
.index #product .series .lineup .futool { --cP: var(--cFUTS); }
.index #product .series .lineup h3::after { content: ''; position: absolute; bottom: -3px; left: 0; display: block; background: var(--cP); height: 4px; width: 0; transition: .3s; }
.index #product .series .lineup a:hover h3::after { width: 100%; }
.index #product .series .lineup p::after { content: ''; position: absolute; top: -3px; left: 0; display: block; background: var(--cP); height: 4px; width: 0; transition: .3s; }
.index #product .series .lineup a:hover p::after { width: 100%; }
.index #product .cert { display: grid; grid-template-columns: 1fr 1fr; }
.index #product .cert h3 { grid-column: 1/-1; margin-bottom: 36px; }
.index #product .cert article { padding: 20px 40px; }
.index #product .cert article+article { border-left: 2px solid #fff; }
.index #product .cert h4 { --fS: 22px; --fH: 44px; margin-bottom: 20px; --fW: 700; --tA: center; }
.index #product .cert figure.seal { margin-bottom: 30px; }
.index #product .cert figure.seal img { margin: 0 auto; }
.index #product .cert figure.seal figcaption { display: none; }
.index #product .cert .text { display: grid; grid-template-columns: auto 1fr; gap: 18px 15px; --fS: 16px; --fW: 400; --fH: 18px; }
.index #product .cert .text dt { --fS: 14px; --fW: 700; grid-column: 1/2; }
.index #product .cert .text dd { grid-column: 2/3; }
.index #product .cert .text :is(.full,.full+dd) { grid-column: 1/-1; }
.index #product .cert .text .full+dd { --fH: 27px; margin-top: -10px; }

.index #company .ci img { margin: 120px auto 80px; }
.index #company .ci figcaption { display: none; }
.index #company .contents { display: flex; align-items: center; width: 1245px; margin: 0 auto ; padding: 60px 0; justify-content: space-between; }
.index #company .contents p { --fS: 20; --fW: 400; --fH: 30px; }
.index #company .contents strong { --tC: var(--cP); --fS: 36px; --fH: 43px; --fW: 900; }
.index #company .contents strong span { display: block; }
.index #company .contents strong [lang=jp] { --fF: "Noto Sans", sans-serif; --fW: 700; }
.index #company .contents strong [lang=en] { --fF: 'Playfair Display', serif; --fW: 800; --fS: 28px; --fH: 37px; margin-top: -4px; }
.index #company article+article { margin-top: 60px; padding-top: 62px; position: relative; }
.index #company article+article::before { content: ''; display: block; position: absolute; inset: 0 0 auto; margin: 0 auto; width: 860px; height: 2px; background: var(--cBgG); }
.index #company .overview dl { display: grid; grid-template-columns: auto 1fr; gap: 18px 15px; --fS: 18px; --fW: 400; --fH: 21px; width: fit-content; margin: 0 auto; max-width: 550px; margin-top: 60px; }
.index #company .overview dt { --fS: 16px; --fW: 700; grid-column: 1/2; }
.index #company .overview dd { grid-column: 2/3; }
.index #company .overview dd ul li { display: inline-block; }
.index #company .overview dd ul li::after { content: ', '; }
.index #company .overview dd ul li:last-child::after { content: none; }
.index #company .story { display: flex; flex-flow: column; align-items: center; --tA: center; --fS: 26px; --fW: 800; --fH: 36px; --tC: var(--cP); }
.index #company .story img { border-radius: 20px; margin: 44px 0; }
.index #company .character h3 { margin-bottom: 60px; }
.index #company .character figure img { margin: 0 auto; position: relative; left: -40px;  }
.index #company .character p { width: fit-content; margin: 60px auto 0; --fW: 400; --fS: 20px; --fH: 30px; }

.cta { position: sticky; bottom: 0; z-index: 89; display: flex; height: 80px; gap: 12px; width: 680px; margin: 239px auto 0; }
.cta div.wrap { position: relative; flex: 0 0 500px; height: 100%; border-radius: 20px 20px 0 0; margin: 0 auto; box-shadow: 0 -4px 20px rgba(35, 41, 58, 0.15); }
.cta div.wrap button { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; border-radius: 12px 12px 0 0; overflow: hidden; background: var(--cGeneral); }
.cta div.wrap button img { position: relative; z-index: 1; }
.cta div.wrap button::before { content: ''; position: absolute; z-index: 0; inset: 0 0 auto; height: 50%; display: block; background: linear-gradient(rgba(0, 0, 54, 0.6), rgba(0, 0, 54, 0)); transition: .3s; opacity: 0; }
.cta div.wrap:hover button::before { height: 100%; opacity: .5; }
.cta .wrap span.wrap { position: absolute; z-index: 1; --tA: center; --tC: #fff; --fW: 700; --fS: 18px; --fH: 21px; width: 155px; inset: 2px 0 0; pointer-events: none; }
.cta .wrap span.left { left: 20px; right: auto; }
.cta .wrap span.right { left: auto; right: 20px; }
.cta .wrap span.wrap span { position: absolute; inset: 0; margin: auto 0; }
.cta .wrap span.wrap span:first-child { height: 21px; transition: .3s; }
.cta .wrap:hover span.wrap span:first-child { transform: translateY(-10px); opacity: 0; }
.cta .wrap span.left span:last-child { --fW: 700; --fS: 16px; --fH: 26px; border: solid #fff; border-width: 1px 0; height: 25px; transform: translateY(10px); width: 129px; inset: 0 auto 0 16px; opacity: 0; transition: .3s; }
.cta .wrap:hover span.wrap span:last-child { opacity: 1; transform: translateY(0); }
.cta .wrap span.right span:last-child { display: flex; --fW: 800; --fS: 16px; --fH: 17px; align-items: center; justify-content: center; top: 2px; transform: translateY(10px); opacity: 0; transition: .3s; }
.cta .wrap span.right span:last-child a { width: 32px; height: 24px; --fS: 0; --tC: transparent; background: url('./images/cta-website.svg') no-repeat center; pointer-events: all; position: relative; margin-left: 6px; margin-top: -2px; }
.cta .wrap span.right span:last-child a::before { content: ''; display: block; width: 1px; height: 10px; background: #fff; position: absolute; inset: 0; margin: auto 0; }
.cta a.download { position: relative; flex: 0 0 80px; height: 100%; border-radius: 12px 12px 0 0; margin: 0 auto; box-shadow: 0 -4px 20px rgba(35, 41, 58, 0.15); overflow: hidden; }
.cta a.download::before { content: ''; position: absolute; z-index: 0; inset: 0 0 auto; height: 50%; display: block; background: linear-gradient(rgba(0, 0, 54, 0.6), rgba(0, 0, 54, 0)); transition: .3s; opacity: 0; }
.cta a.download:hover::before { height: 100%; opacity: .5; }
.cta a.download .wrap { position: relative; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; z-index: 1; padding-bottom: 14px; box-sizing: border-box; --fW: 600; --fS: 12px; --tA: center; --fH: 14px; --tC: #fff; }
.cta a.download .wrap::before { content: ''; position: absolute; inset: auto 0 16px; margin: 0 auto; display: block; width: 8px; height: 8px; border: 0px solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: .3s; }
.cta a.download .wrap::after { content: ''; position: absolute; inset: auto 0 10px; margin: 0 auto; display: block; width: 12px; height: 2px; background: #fff; transition: .3s; }
.cta a.download.u { background: var(--cU); }
.cta a.download.fu { background: var(--cFU); }
.cta+.inquiry { margin-top: -319px; }
.cta+.inquiry header { position: relative; background: var(--cBgDG) url(./images/pattern-hexline.svg) center calc(100% + 20px) repeat; --fW: 900; --fS: 28px; --fH: 36px; --tC: var(--cGeneral); --tA: center; padding-top: 75px; }
.cta+.inquiry header p { padding-bottom: 172px; }
.inquiry form { --fS: 14px; --fW: 700; --fH: 24px; }
.inquiry .form { position: relative; background: var(--cGeneral) url(./images/pattern-hexline.svg) center 20px repeat; padding: 54px calc(max(50vw, var(--pxMinW)/2) - 340px); --tC: #fff; display: grid; grid-template-columns: 135px 135px 235px 135px; gap: 30px 13px; }
.inquiry .form::before { content: ''; position: absolute; z-index: 0; inset: 0; display: block; background: linear-gradient(rgba(0, 0, 54, 0), rgba(0, 0, 54, 0.3) 10%); }
.inquiry .form form>* { position: relative; z-index: 1; }
.inquiry :is(input,textarea) { background: #fff; --tC: var(--cK); }
.inquiry :is(.message,footer) { grid-column: 1/-1; }
.inquiry textarea { padding: 7px; }
.inquiry .notice { --fW: 300; margin-top: 6px; display: block; }
.inquiry .notice a { padding: 0; border-radius: 100px; --fW:600; }
.inquiry .notice a:hover { padding: 0 .2em; margin: 0 .1em; background: #fff; color: var(--cSR); }
.inquiry footer { --cP: var(--cGeneral); display: flex; justify-content: center; }
.inquiry footer button:hover:not(:disabled) { background: var(--cSR); }
.inquiry label::before { content: ''; display: inline-block; width: 0; transition: .2s; }
.inquiry label:has(:is(input:not(type="checkbox"),textarea):focus,:is(input:not(type="checkbox"),textarea):not(:placeholder-shown))::before { width: 5px; } 
.inquiry .agree { grid-column: 1/-1; }
.inquiry .agree label { position: relative; display: flex; align-items: center; margin-top: 8px; overflow: visible; }
.inquiry .agree input[type=checkbox] { width: 14px; height: 14px; margin-right: 4px; }
.inquiry .agree strong { font-weight: 700; text-decoration: underline; position: relative; }
.inquiry.popup .agree strong { --tC: var(--cGeneral); }
.inquiry .agreeDetail {
    position: absolute; pointer-events: none;
    width: fit-content; height: max-content; --tC: #fff; --fH: 18px; --fW: 400;
    text-align: center; background: #000c; border-radius: 12px; padding: 12px 14px;
    box-shadow: 0 10px 10px #0003, 0 2px 2px #0006; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; transform: translateY(calc(-100% - 10px)); transform-origin: center bottom; transition: .5s, margin 0s .5s;
}
.inquiry .agreeDetail dl { display: grid; grid-template-columns: auto auto; gap: 8px 12px; white-space: nowrap; margin: 8px 0; width: fit-content; }
.inquiry .agreeDetail dt { --fW: 700; }

.inquiry .agree label:hover+.agreeDetail {
    opacity: 1; transform: translateY(calc(-100% - 30px)); transition: .5s;
}


footer.common { background: #111; padding: 50px 0 0; --tC: #fff; }
footer.common header .ci { display: block; margin: 0 auto; width: 140px; height: 62px; }
footer.common header p { --fC: #fff; --fW: 700; --fS: 18px; --fH:21px; --tA: center; margin-top: 26px; }
footer.common .info { display: flex; padding: 50px var(--pxPaddingSide); align-items: flex-end; justify-content: space-between; }
footer.common .info li { flex: 0 0 auto; opacity: .6; transition: .2s; --fS: 16px; --fH: 19px; --fW: 800; }
footer.common .info li:hover { opacity: 1; }
footer.common .info li dt { --fW: 500; --fS: 13px; --fH: 16px; margin-bottom: 8px; }
footer.common .info li a { text-decoration: underline; }
footer.common .copyright { display: flex; background: #000; padding: 24px var(--pxPaddingSide); --tC: #fff; --fS: 14px; --fW: 300; --fH: 17px; }
footer.common .copyright li+li { margin-left: 20px; }
footer.common .copyright li:last-child { margin-left: auto; }
footer.common .copyright :is(dl,dt,dd) { display: contents; }

/* series */
    /* fujilok */
header.common nav.series a.index::after { background-image: url('./images/logo.png'); background-size: auto 50px; }

.series h1 { background-size: auto 40px; }
.series header.common { background-color: var(--cP); }
.series nav.bookmark button { --tC: #fff; }
.series nav.bookmark button:hover {--tC: #ffffffaa; }
.series nav.bookmark button::before { background: #fff; }
.series nav.bookmark button::after { background: linear-gradient(#ffffff00 0%, #ffffff33 50%, #ffffff11 75%, #ffffffff 100%); }
.series button.menu i::before { background: #fff; }
.series button.menu i { border-color: #fff; }
.series #hero { --tC: #fff; --tA: center;
    position: relative; box-sizing: border-box;
    display: flex; flex-flow: column; align-items: center; justify-content: center;
    height: calc(100vh - var(--pxHeaderH)); padding: 0 0 100px; 
    background: #000 center no-repeat; background-size: cover; }
.series #hero::before { content:''; position: absolute; inset: 0; display: block; opacity: .8; mix-blend-mode: multiply; }
.series #hero>*:not(.arrow) { position: relative; z-index: 1; }
.series #hero>a { position: absolute; inset: 0; z-index: 1; display: block; --fS: 0; text-indent: -999px; overflow: hidden; color: transparent; }
.series #hero h2 { margin-bottom: 0px; transition: 1s; }
.series #hero h2 img { margin: 0 auto; }
.series #hero h2 img.product {
    height: 200px; max-height: 15vh;
    margin-bottom: 40px; transition: 1s; transform-origin: center bottom; }
.series #hero h2 img.logo { height: 150px; max-height: 15vh; }
.series #hero dl { --fW: 500; --fS: 18px; --fH: 21px; margin-top: min(6vh,80px); }
.series #hero dt { --fW: 600; --fS: 28px; --fH: 33px; margin-bottom: 28px; }
.series #hero dd+dd { margin-top: 21px; }
.series #hero dd.fn { display: flex; justify-content: center; margin-top: 30px; }
.series #hero dd.fn :is(a,button) { --fW: 500; --fS: 14px; --fH: 17px; width: 75px; height: 86px; }
.series #hero dd.fn :is(a,button):hover { --tC: var(--cK); background: #fff; }
.series #hero dd.fn :is(a,button)::before { border-color: #fff; }
.series #hero .arrow { position: absolute; inset: auto 0 120px; margin: 0 auto; z-index: 1; }
.series #hero .arrow i::before { border-color: #fff; }

.series .scene { --tA: center; height: 560px; background: center bottom no-repeat; background-size: cover; }
.series .scene em { --tC: var(--cP); --fW: 800; --fS: 30px; --fH: 36px; }
.series .scene h2 { --fS: 0; --tC: transparent; height: 90px; margin-top: 34px; background: center no-repeat; background-size: auto 100%; }

.series #lineup { padding-left: calc(var(--pxPaddingSide) + 136px); padding-right: calc(var(--pxPaddingSide) + 136px); }
.series #lineup article { --tC: var(--cP); display: flex; align-items: center; justify-content: space-between; }
.series #lineup article h3 { --tC: transparent; --fS: 0; height: 60px; }
.series #lineup article h3 img { height: 100%; }
.series #lineup article em { --fS: 24px; --fH: 42px; --fW: 700; display: block; margin: 46px 0 14px; }
.series #lineup article p,
.series #lineup article dl { --fS: 16px; --fH: 20px; --fW: 400; }
.series #lineup article p { margin-top: 18px; }
.series #lineup article :is(dt,dd) { display: inline; }
.series #lineup article dt::after { content: ' ： '; }
.series #lineup article .fn { margin-top: 26px; display: flex; align-items: center; gap: 10px; }
.series #lineup article .fn :is(a,button) { position: relative; display: block; width: max-content; background: var(--cP); --tC: #fff; }
.series #lineup article .fn :is(a,button)::before,
.series #lineup article .fn :is(a,button)::after { content: ''; display: block; position: absolute; inset: 0; background: var(--cP); height: 2px; }
/* .series #lineup article .fn :is(a,button)::before { bottom: auto; }
.series #lineup article .fn :is(a,button)::after { top: auto; } */
.series #lineup article .fn :is(a,button):hover { clip-path: polygon(11px 50%, 0 100%, calc(100% - 11px) 100%, 100% 50%, calc(100% - 11px) 0%, 0 0%); }
.series #lineup article+article { margin-top: 85px; }
.series #lineup figure { flex: 0 0 auto; width: 540px; height: 380px; border-radius: 20px; overflow: hidden; }
.series #lineup figure img { object-fit: cover; width: 100%; height: 100%; }

.series #variations { --tA: center; }
.series #variations em { --fS: 30px; --fH: 36px; --fW: 800; --tC: var(--cP); display: block; margin-bottom: 25px; }
.series #variations article { position: relative; padding: 60px 0 85px; width: 730px; margin: 0 auto; }
.series #variations article+article { border-top: 2px solid #fff; }
.series #variations article+article::before,
.series #variations article+article::after { content: ''; display: block; position: absolute; inset: -17px 0 auto; margin: 0 auto; width: 32px; height: 32px; background: var(--cP); }
.series #variations article+article::before { height: 2px; top: -2px; }
.series #variations article+article::after { width: 2px; }
.series #variations h4 { --fS: 22px; --fH: 42px; --fW: 700; }
.series #variations ul.hex { display: flex; justify-content: center; flex-flow: wrap; gap: 0 17px; margin-top: 30px; }
.series #variations ul.hex li { --fS: 13px; --fH: 16px; --fW: 400; position: relative; display: flex; justify-content: center; align-items: center;  width: 106px; height: 122px; clip-path: var(--vHexV); background: #fff; }
.series #variations ul.hex figure { width: 94px; height: 110px; clip-path: var(--vHexV); margin: 6px; overflow: hidden; transition: .3s; }
.series #variations ul.hex figure img { width: 100%; height: 100%; object-fit: cover; }
.series #variations ul.hex figcaption { --tC: #fff; position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; background: var(--cP); opacity: 0; transition: .3s; }
.series #variations ul.hex figure:hover { width: 100%; height: 100%; margin: 0; }
.series #variations ul.hex figure:hover figcaption { opacity: 1; }
.series #variations ul.hex dt { --fW: 700; --fS: 16px; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--cBgDG); }
.series #variations p.note { --tA: center; --fS: 14px; --fH: 18px; --fW: 400; margin-top: 20px; opacity: .5; }
.series #variations .shape ul.hex figure img { transform: scale(1.5); }
.series #variations .shape ul.hex li:nth-child(6)~li { margin-top: -14px; }
.series #variations .material ul.hex { width: 500px; margin-left: auto; margin-right: auto; }
.series #variations .material ul.hex li:nth-child(4)~li { margin-top: -14px; }
.series #variations .surface ul.hex li { transform: translateX(-30.5px); }
.series #variations .surface ul.hex { width: 600px; margin-left: auto; margin-right: auto; }
.series #variations .surface ul.hex li:nth-child(5)~li { margin-top: -14px; transform: translateX(30.5px); }

.series.fujilok { --cP: var(--cU); }
.series.fujilok h1,
.seriesDetail.fujilok h1 { background-image: url('./images/bi-fujilok.svg'); flex-basis: 230px; }
.series.fujilok #hero { background-image: url(./images/hero-fujilok-bg.png); }
.series.fujilok #hero::before { background-color: #08132E; }
.series.fujilok .scene { background-image: url('./images/fujilok/scene.png'); }
.series.fujilok .scene h2 { background-image: url('./images/bi-fujilok-c.svg'); }
.series #lineup article.u { --cP: var(--cU); }
.series #lineup article.gu { --cP: var(--cGU); }
.series #lineup article.su { --cP: var(--cSUt); }
.series #lineup article.blu { --cP: var(--cBLU); }
.series #lineup article.fswu { --cP: var(--cFSWU); }
.series #lineup article.clipu { --cP: var(--cCLIPUt); }

.series.fine { --cP: var(--cFine); }
.series.fine h1 { background-image: url('./images/bi-fine.svg'); }
.series.fine #hero { background-image: url(./images/hero-fine-bg.png); }
.series.fine #hero::before { background-color: #350B0B; }
.series.fine .scene { background-image: url('./images/fine/scene.png'); padding-left: calc(50vw + var(--pxPaddingSide)); }
.series.fine .scene h2 { background-image: url('./images/bi-fine-c.svg'); }
.series #lineup article.fu { --cP: var(--cFU); }
.series #lineup article.twinfu { --cP: var(--cTFUt); }
.series #lineup article.futool { --cP: var(--cFUTS); }
.series #lineup article.futool h3 img { height: 70%; }

/* lineup */
.seriesDetail header.common { background: var(--cP); }
.seriesDetail nav.bookmark { padding-left: 0; }
.seriesDetail nav.bookmark a,
.seriesDetail nav.bookmark button { --tC: #fff; }
.seriesDetail nav.bookmark button::before { background: #fff; }
.seriesDetail nav.bookmark button.logo img {filter: brightness(0) invert(1); height: 20px; }
.seriesDetail nav.bookmark button.logo::before,
.seriesDetail nav.bookmark button.logo::after { opacity: 0; }
.seriesDetail button.menu i::before { background: #fff; }
.seriesDetail button.menu i { border-color: #fff; }
.seriesDetail header.common h1 { background-size: auto 40px; }
.seriesDetail .col2 { display: flex; gap: 40px; align-items: flex-start; }
.seriesDetail .col2.underTable { margin-top: 42px; }
.seriesDetail .col2>* { flex: 1; }
.seriesDetail .col2>table.info+table.info { margin-top: 0; }
.seriesDetail .col2+.col2 { margin-top: 50px; }
.seriesDetail .col2.withFigure { align-items: center; }
.seriesDetail .col2.withFigure>figure { flex: 0 0 auto; }
.seriesDetail .col2>.col { flex: 1 1 0; display: flex; flex-flow: column; justify-content: center; padding: 0; }
.seriesDetail .col2>.col.sub { --tC: #9c9ca3; }
.seriesDetail .col2.middle { align-items: center; }
.seriesDetail .col2.compare { position: relative; }
.seriesDetail .col2.compare::before { content: '';
    position: absolute; inset: 0 0 0 20px; margin: auto;
    display: block; box-sizing: border-box; width: 20px; height: 20px; border: 6px solid ; border-color: transparent transparent var(--cP) var(--cP);
    transform: rotate(45deg);
}
.seriesDetail .scrollH table.info thead th:first-child { background: var(--cBgG); }
.seriesDetail .scrollH table.info tbody th:first-child { background: #fff; }

.seriesDetail main article { padding-left: 160px; padding-right: 160px; }
.seriesDetail figure img { margin-left: auto; margin-right: auto; }
.seriesDetail :is(figure,img).frame { width: max-content; margin-left: auto; margin-right: auto; background: #fff; overflow: hidden; border-radius: 20px; }
.seriesDetail figure+p { margin-top: 56px; }
.seriesDetail caption.hex { --fW: 700; --fS: 16px; --fH: 22px; padding-left: 20px; position: relative; margin-bottom: 10px; }
.seriesDetail caption.hex::before { position: absolute; inset: 5px 0 0; margin: 0; }
.seriesDetail caption.hex figure { margin-left: -20px; }
.seriesDetail main>section:nth-child(2n+1) caption.hex figure { background: var(--cBgG); }
.seriesDetail article.text+article.text { margin-top: 70px; }
.seriesDetail article:not(.col2)>figure,
.seriesDetail .video { margin: 80px auto 100px; }
.seriesDetail .video iframe { width: 800px; height: 448px; }
.seriesDetail article figure figcaption.hex,
.seriesDetail .video :is(h3,h4).hex { --fW: 700; --fS: 16px; --fH: 22px; width: max-content; margin-left: auto; margin-right: auto; }
.seriesDetail article figure figcaption.hex::after,
.seriesDetail .video :is(h3,h4).hex::after { content: ''; display: block; width: 14px; height: 12px; background: var(--tC); clip-path: var(--vHexH); margin: -1px 0 0 7px; }
.seriesDetail p.text { margin-bottom: 30px; }
.seriesDetail dl.text { --tA: left; margin-bottom: 30px; }
.seriesDetail dl.text dt { --fW: 700; --fS: 16px; --fH: 18px; margin-bottom: 19px; }
.seriesDetail .col2 dl.text { margin: 0; }
.seriesDetail dl.text.inline { --tA: inherit; }
.seriesDetail dl.text.inline :is(dt,dd) { display: inline; }
.seriesDetail dl.text.inline dd+dt { margin-left: 1em; }
.seriesDetail dl.text.grid { display: flex; width: max-content; gap: 2em; }
.seriesDetail dl.text.grid .col { flex: 0 0 auto; }
.seriesDetail dl.text.grid dt { margin-bottom: .2em; }
.seriesDetail dl.text .row { display: flex; align-items: center; }
.seriesDetail dl.text .row+.row { margin-top: 10px; }
.seriesDetail dl.text .row :is(dt,dd) { line-height: 20px; }
.seriesDetail dl.text .row dt { margin-bottom: 0; margin-right: 1em; }
.seriesDetail ul.hex .row { display: flex; justify-content: center; flex-flow: wrap; }
.seriesDetail ul.hex li { position: relative; display: flex; justify-content: center; align-items: center; width: 238px; height: 270px; clip-path: var(--vHexV); background: #fff; transition: .2s; }
.seriesDetail ul.hex :is(figure,button) { width: 222px; height: 254px; clip-path: var(--vHexV); overflow: hidden; transition: .3s; }
.seriesDetail ul.hex :is(figure,button) img { width: 100%; height: 100%; object-fit: cover; }
.seriesDetail ul.hex li:hover { background-color: var(--cP); }
.seriesDetail ul.hex :is(figcaption,button span) { --tA: center; --fW: 600; --fS: 14px; --fH: 18px; position: absolute; inset: 0; display: flex; justify-content: center; margin-top: 54px; transition: .3s; }
.seriesDetail ul.note li { text-align: left; opacity: .5; }
.seriesDetail ol.process { counter-reset: no; }
.seriesDetail ol.process li { display: flex; --fW: 400; --fS: 18px; --fH: 27px; --tA: left; gap: 20px; align-items: center; counter-increment: no; }
.seriesDetail ol.process li+li { margin-top: 50px; }
.seriesDetail ol.process figure { flex: 0 0 274px; border-radius: 10px; overflow: hidden; }
.seriesDetail ol.process figure img { width: 100%; }
.seriesDetail ol.process p { margin-top: 0; }
.seriesDetail ol.process p::before { content: counter(no)'.'; display: block; }
.seriesDetail ol.process .caution { --fW: 700; --fS: 16px; --fH: 18px; --tC: var(--cP); }
.seriesDetail article.text.caution { background: var(--cBgG); width: 924px; margin-left: auto; margin-right: auto; padding: 30px 56px; border-radius: 20px; --tA: left; --fS: 18px; --fH: 27px; }
.seriesDetail article.text.caution h4 { margin-left: -20px; margin-right: -20px; }
.seriesDetail article.text.caution>p { --fW: 400; --fS: 16px; }
.seriesDetail article.text.caution ul { margin: 40px 0; }
.seriesDetail article.text.caution li { display: flex; align-items: center; gap: 10px; }
.seriesDetail article.text.caution li+li { margin-top: 10px; }
.seriesDetail article.text.caution img.icon { width: 100px; object-fit: none; height: 90px; }

.seriesDetail main>section { --tA: center; padding-left: max(20px, calc(50vw - 680px)); padding-right: max(20px, calc(50vw - 680px)); }
.seriesDetail main>section:nth-child(2n+1) { background: var(--cBgG); }
.seriesDetail main>section:nth-child(2n+1) .video iframe { background: #fff; }
.seriesDetail main>section:nth-child(2n+1) table.info thead { background: #fff; }
/* .seriesDetail main>section:nth-child(2n+1) table.info thead th { box-shadow: 1px 0 0 0 var(--cBgG); } */
.seriesDetail main>section:nth-child(2n+1) .scrollH table.info thead th:first-child { background: #fff; }
.seriesDetail main>section:nth-child(2n+1) .scrollH table.info tbody th:first-child { background: var(--cBgG); }
.seriesDetail main>section:nth-child(2n+1) article.text.caution { background: #fff; }
.seriesDetail main>section:nth-child(2n+1) figure:not(.frame) img:not(.frame) { mix-blend-mode: darken; }
.seriesDetail main>section:nth-child(2n) :is(figure,img).frame { background: var(--cBgG); }
.seriesDetail main>section:nth-child(2n) figure.frame img { mix-blend-mode: darken; }

.seriesDetail #hero { position: relative; padding: 66px calc(50vw - 550px); display: flex; background: transparent; align-items: center; }
.seriesDetail #hero article { flex: 1; --tC: var(--cP); --fS: 18px; --fH: 24px; --tA: left; padding: 0; }
.seriesDetail #hero em { --fW: 700; --fS: 24px; --fH: 42px; display: block; margin: 31px 0 21px; }
.seriesDetail #hero dl { margin-bottom: .5em; }
.seriesDetail #hero dt,
.seriesDetail #hero dd { display: inline; }
.seriesDetail #hero dd::before { content: ' : '; }
.seriesDetail #hero p+p { margin-top: .5em; }
.seriesDetail #hero figure { border-radius: 20px; overflow: hidden; box-shadow: 4px 4px 0 0 #fff; }
.seriesDetail #hero figure img { mix-blend-mode: normal; }
.seriesDetail #hero::before { content: '';
    position: absolute; inset: 0; z-index: -1; display: block; background: var(--cP); opacity: .1; }
.seriesDetail #hero .logo img { height: 40px; }
.seriesDetail #overview .col2 { align-items: stretch; }
.seriesDetail .feature,
.seriesDetail .field { --tA: left; --tC: var(--cP); --fW: 400; --fS: 18px; --fH: 24px;
    background: var(--cBgG); border-radius: 20px; padding: 27px 38px; }
.seriesDetail .field ul { justify-content: flex-start; --fS: 16px; --fH: 18px; }
.seriesDetail .field li { flex: 0 0 75px; height: 86px; background: var(--cBgG); }
.seriesDetail .field li.off { display: none; }
.seriesDetail .field li:nth-child(7)~li { margin-top: -23px; }
.seriesDetail .field li:nth-child(14n+8) { margin-left: 37px; }
.seriesDetail .subLineup { margin-top: 68px; padding: 0; }
.seriesDetail .subLineup p { --fW: 400; --fS: 18px; --fH: 1.5em; --tA: center; --tC: var(--cP); }
.seriesDetail .subLineup ul.hex .row { gap: 0 17px; margin-top: 77px; }
.seriesDetail .subLineup ul.hex .row+.row { margin-top: -50px; }
.seriesDetail .subLineup ul.hex li { --fS: 13px; --fH: 16px; --fW: 400; }
.seriesDetail .surface ul.hex .row { gap : 12px; width: 850px; margin: 46px auto 0; }
.seriesDetail .surface ul.hex .row+.row { margin-top: -36px; }
.seriesDetail .surface ul.hex li { --fS: 13px; --fH: 16px; --fW: 400; width: 160px; height: 186px; }
.seriesDetail .surface ul.hex button { width: 148px; height: 174px; }
.seriesDetail .surface ul.hex button span { margin-top: 32px; min-height: 36px; display: flex; align-items: center; height: max-content; }

.seriesDetail.fujilok h1 { background-image: url('./images/bi-fujilok.svg'); }
.seriesDetail.fujilok.u { --cP: var(--cU); }
.seriesDetail.fujilok.gu { --cP: var(--cGU); }
.seriesDetail.fujilok.su { --cP: var(--cSUt); }
.seriesDetail.fujilok.blu { --cP: var(--cBLU); }
.seriesDetail.fujilok.fswu { --cP: var(--cFSWU); }
.seriesDetail.fujilok.clipu { --cP: var(--cCLIPUt); }

.seriesDetail.fine h1 { background-image: url('./images/bi-fine.svg'); }
.seriesDetail.fine.fu { --cP: var(--cFU); }
.seriesDetail.fine.tfu { --cP: var(--cTFUt); }
.seriesDetail.fine.futool { --cP: var(--cFUTS); }

.seriesDetail.fine.fu nav.bookmark button.logo { min-width: 140px; }
.seriesDetail.fine.tfu nav.bookmark button.logo { min-width: 170px; }
.seriesDetail nav.bookmark button.logo img { min-height: 20px; }
.seriesDetail.fine #information img.dimension { max-width: 800px; }
.seriesDetail.fine.futool nav.bookmark button.logo { min-width: 270px; }

/* popup */
html[data-popup] button.menu.ing i { transition: .2s linear; }
html[data-popup] button.menu.ing i { height: 0; border-width: 1px 0; }
html[data-popup] button.menu i::before,
html[data-popup] button.menu i { transition: .2s, transform .2s .2s ease-out; }
html[data-popup] button.menu i::before { transform: rotate(90deg); }
html[data-popup] button.menu i { transform: rotate(45deg); height: 0; border-width: 1px 0; }
html[data-popup] button.menu:hover { background: rgba(255,255,255,.05); }

section.popup {
    padding-top: var(--pxHeaderH);
    position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; opacity: 0;
    display: flex; justify-content: safe center; align-items: safe center; overflow: hidden;
    background: linear-gradient(15deg, #000000ee, #090b10ee); transition: .5s;  backdrop-filter: blur(20px);
}
section.popup>.wrap {
    max-height: calc(90vh - var(--pxHeaderH)); padding: 0 50px; border-radius: 20px; box-sizing: border-box; overflow: auto; 
    background: var(--cBgG); box-shadow: 0 20px 40px #2d3240; transition: .5s; }

.popup header.title {
    position: sticky; z-index: 10; padding: 0; top: 0;
    width: 100%; box-sizing: border-box; margin-top: 0; padding: 36px 8px; 
    background: linear-gradient(var(--cBgG) 80%,transparent); }
.popup header.title h2 { --tC: var(--cP); --fS: 28px; --fH: 1.6em; --fW: 800; text-align: center; border-bottom: 1px solid var(--tC); width: fit-content; margin: 0 auto; position: relative; transition: .5s; }
.popup header.title h2::after { content: ''; position: absolute; inset: auto 0 1px; height: 1px; background: var(--tC); }

.popup .body { --fW: 300; flex: 0 0 auto;
    position: relative; box-sizing: border-box; 
}

.popup nav button {
    position: absolute; inset: var(--pxHeaderH) 20px 0; margin: auto 0; z-index: 99;
    display: block; width: 30px; height: 30px; border-radius: 50%; background: #fff; }
.popup nav button::before,
.popup nav button::after { content: '';
    position: absolute; inset: 0; margin: auto; 
    display: block; width: 12px; height: 4px; background: var(--cP); border-radius: 2px; transform-origin: 2px 2px; transition: .2s; }
.popup nav button::before { transform: rotate(45deg); }
.popup nav button::after { transform: rotate(-45deg); }
.popup nav button.next { left: auto; }
.popup nav button.next::before,
.popup nav button.next::after { transform-origin: 10px 2px; }
.popup nav button:hover { background: var(--cP); }
.popup nav button:hover::before,
.popup nav button:hover::after { background: #fff; }

.popup footer.fn {
    position: sticky; z-index: 10; margin: 30px 0 0; bottom: 0; padding-bottom: 30px; pointer-events: none;
    display: flex; justify-content: center; gap: 12px; background: linear-gradient(transparent 80%, var(--cBgG)); }
.popup footer.fn * { pointer-events: auto; }
.popup :is(input,textarea) { border-radius: 2px; color: #000; }

/* html[data-popup] { overflow: hidden; } */
html[data-popup^="menu"] .popup[name="menu"],
html[data-popup="inquiry"] .popup[name="inquiry"],
html[data-popup^="application"] .popup[name="application"],
html[data-popup="subLineup1"] .popup[name="subLineup1"],
html[data-popup="subLineup2"] .popup[name="subLineup2"],
html[data-popup="subLineup3"] .popup[name="subLineup3"],
html[data-popup="subLineup4"] .popup[name="subLineup4"],
html[data-popup="subLineup5"] .popup[name="subLineup5"],
html[data-popup="subLineup6"] .popup[name="subLineup6"],
html[data-popup="subLineup7"] .popup[name="subLineup7"],
html[data-popup="subLineup8"] .popup[name="subLineup8"],
html[data-popup="subLineup9"] .popup[name="subLineup9"],
html[data-popup="surface1"] .popup[name="surface1"],
html[data-popup="surface2"] .popup[name="surface2"],
html[data-popup="surface3"] .popup[name="surface3"],
html[data-popup="surface4"] .popup[name="surface4"],
html[data-popup="surface5"] .popup[name="surface5"],
html[data-popup="surface6"] .popup[name="surface6"],
html[data-popup="surface7"] .popup[name="surface7"],
html[data-popup="surface8"] .popup[name="surface8"],
html[data-popup="surface9"] .popup[name="surface9"],
html[data-popup="surface10"] .popup[name="surface10"],
html[data-popup="surface11"] .popup[name="surface11"],
html[data-popup="surface12"] .popup[name="surface12"],
html[data-popup="surface13"] .popup[name="surface13"] { visibility: visible; pointer-events: auto; opacity: 1; }
html[data-popup^="menu"] .popup[name="menu"] .wrap,
html[data-popup^="subLineup"] .popup[name^="subLineup"] .wrap { transform: none; }
html[data-popup^="subLineup"] { overflow: hidden; }


.popup.menu { --cP: var(--cGeneral); }
.popup.menu .wrap { transform: translateY(-100%); }
.popup.menu .logo { width: 100%; height: 80px; background: center no-repeat; background-size: auto 60px; display: block; overflow: hidden; text-indent: -999px; --fS: 0; --tC: transparent; margin: 0 auto; }
.popup.menu .logo.ci { background-image: url('./images/logo.png'); height: 100px; background-size: auto 80px; }
.popup.menu .logo.u { background-image: url('./images/bi-fujilok-c.svg'); }
.popup.menu .logo.fu { background-image: url('./images/bi-fine-c.svg'); }
.popup.menu article+article { margin-top: 1em; border-top: 2px solid #fff; padding-top: 1em; }
.popup.menu article>ul { display: flex; justify-content: center; gap: 1em; margin-top: .5em; }
.popup.menu .lineup>a { display: flex; align-items: center; gap: .3em; }
.popup.menu .lineup>a::after { content: ''; height: 1px; background: #000; flex: 1; }
.popup.menu .lineup>ul { display: flex; gap: 1em; }
.popup.menu article>ul>li a { --fW: 300; --fS: 16px; display: block; }
.popup.menu article.fujilok>ul>li>a:hover { --tC: var(--cU); }
.popup.menu article.fine>ul>li>a:hover { --tC: var(--cFU); }
.popup.menu article>ul ul a { --fW: 600; --fS: 16px; }
.popup.menu article>ul ul a:hover { --tC: var(--cGeneral); }
.popup.menu article>ul ul ul a:hover { --tC: var(--cP); }
.popup.menu a.bi { opacity: 1; --fW: 900; --tC: var(--cP); }
.popup.menu a.bi.u,
.popup.menu a.bi.u~ul { --cP: var(--cU); }
.popup.menu a.bi.gu,
.popup.menu a.bi.gu~ul { --cP: var(--cGU); }
.popup.menu a.bi.su,
.popup.menu a.bi.su~ul { --cP: var(--cSU); }
.popup.menu a.bi.blu,
.popup.menu a.bi.blu~ul { --cP: var(--cBLU); }
.popup.menu a.bi.fswu,
.popup.menu a.bi.fswu~ul { --cP: var(--cFSWU); }
.popup.menu a.bi.clipu,
.popup.menu a.bi.clipu~ul { --cP: var(--cCLIPU); }
.popup.menu a.bi.fu,
.popup.menu a.bi.fu~ul { --cP: var(--cFU); }
.popup.menu a.bi.tfu,
.popup.menu a.bi.tfu~ul { --cP: var(--cTFU); }
.popup.menu a.bi.tfuts,
.popup.menu a.bi.tfuts~ul { --cP: var(--cFUTS); }

.popup.inquiry>.wrap { width: 420px; --cP: var(--cGeneral); }
.popup.inquiry .body { display: flex; flex-flow: column; gap: 6px; }
.popup.inquiry footer.fn { background: var(--cGeneral) url(./images/pattern-hexline.svg) center repeat; background-size: 200px; margin: 40px -50px 0; padding: 20px; }

.popup.application { --cP: var(--cGeneral); }
.popup.application .wrap { width: 900px; }
.popup.application article+article { margin-top: 24px; }
.popup.application h4,
.popup.application .detail { padding-left: 21px; }
.popup.application h4 { font-weight: 700; margin: 4px 0 8px; }
.popup.application .detail>li { display: flex; --fW: 700; --fS: 16px; --fH: 26px; gap: 10px; --tC: var(--cGeneral); }
.popup.application .detail>li+li { margin-top: 8px; }
.popup.application .detail ul { --fS: 20px; --fW: 400; --tC: var(--cK); display: flex; flex-flow: wrap; gap: 10px; }
.popup.application figure { display: grid; grid-auto-flow: column; gap: 10px; margin-top: 24px; align-items: center; }
.popup.application figure img { border-radius: 12px; max-height: 280px; margin: 0 auto; }
.popup.application a { border-bottom: 1px solid var(--cP); }

.popup.subLineupDetail { align-items: flex-end; --tA: left; }
.popup.subLineupDetail .wrap { max-width: 1340px; width: calc(100vw - 40px); height: calc(100vh - var(--pxHeaderH) - 20px); max-height: none; border-radius: 20px 20px 0 0; transform: translateY(100%); padding-left: 40px; padding-right: 40px; }
.popup.subLineupDetail header.title { margin-bottom: 100px; margin-top: 60px;}
.popup.subLineupDetail article { padding: 0; }
.popup.subLineupDetail iframe.feature { width: 800px; padding: 0; margin: 0 calc(50% - 400px) 40px; }
.popup.subLineupDetail .overview { max-width: 800px; margin-left: auto; margin-right: auto; }
.popup.subLineupDetail h4+figure { margin-top: 0; }
.popup.subLineupDetail figure img { mix-blend-mode: darken; }
.popup.subLineupDetail table thead,
.popup.subLineupDetail table thead th { background: #fff !important; }
.popup.subLineupDetail ul.note+h4 { margin-top: 46px; }

.popup.surface figure { width: 222px; height: 254px; clip-path: var(--vHexV); overflow: hidden; position: relative; padding: 10px; background: var(--cP); margin: 0 auto 1em; }
.popup.surface figure img { width: 100%; height: 100%; object-fit: cover; clip-path: var(--vHexV); }
.popup.surface figure figcaption { --tA: center; --fW: 600; --fS: 18px; --fH: 24px; position: absolute; inset: 50px 0 auto; min-height: 48px; display: flex; align-items: center; justify-content: center; }