@layer components {
/* ==========================================================================
   Custom Tailwind Utilities (カスタム拡張クラス)
   標準Tailwindクラスは tailwind.css を参照
   ========================================================================== */

/* Flexbox extensions */
/* flex-direction, flex-wrap, align-items, justify-content utilities are in Tailwind */
/* gap utilities with standard scales and arbitrary values are in Tailwind */
.gap-2xl{ gap:5rem }
.gap-2xs{ gap:1rem }
.gap-3xl{ gap:7.5rem }
.gap-3xs{ gap:.75rem }
.gap-4xl{ gap:10rem }
.gap-4xs{ gap:.5rem }
.gap-5xl{ gap:12.5rem }
.gap-5xs{ gap:.25rem }
.gap-lg{ gap:3rem }
.gap-md{ gap:2rem }
.gap-sm{ gap:1.5rem }
.gap-xl{ gap:4rem }
.gap-xs{ gap:1.25rem }
.gap-x-2xs{ column-gap:1rem }
.gap-x-3xs{ column-gap:.75rem }
.gap-x-4xs{ column-gap:.5rem }
.gap-x-5xs{ column-gap:.25rem }
.gap-x-lg{ column-gap:3rem }
.gap-x-sm{ column-gap:1.5rem }
.gap-x-xl{ column-gap:4rem }
.gap-x-xs{ column-gap:1.25rem }
.gap-y-2xl{ row-gap:5rem }
.gap-y-2xs{ row-gap:1rem }
.gap-y-3xs{ row-gap:.75rem }
.gap-y-4xs{ row-gap:.5rem }
.gap-y-5xs{ row-gap:.25rem }
.gap-y-lg{ row-gap:3rem }
.gap-y-md{ row-gap:2rem }
.gap-y-sm{ row-gap:1.5rem }
.gap-y-xl{ row-gap:4rem }
.gap-y-xs{ row-gap:1.25rem }
/* Standard margin classes and arbitrary values are in Tailwind */
.m-3xs{ margin:.75rem }
.m-xs{ margin:1.25rem }
.-mx-3xs{ margin-left:-.75rem; margin-right:-.75rem }
.-mx-md{ margin-left:-2rem; margin-right:-2rem }
.-mx-sm{ margin-left:-1.5rem; margin-right:-1.5rem }
.-mx-xs{ margin-left:-1.25rem; margin-right:-1.25rem }
.mx-3xs{ margin-left:.75rem; margin-right:.75rem }
.mx-lg{ margin-left:3rem; margin-right:3rem }
.mx-md{ margin-left:2rem; margin-right:2rem }
.mx-sm{ margin-left:1.5rem; margin-right:1.5rem }
.mx-xs{ margin-left:1.25rem; margin-right:1.25rem }
.my-2xs{ margin-top:1rem; margin-bottom:1rem }
.my-3xs{ margin-top:.75rem; margin-bottom:.75rem }
.my-5xs{ margin-top:.25rem; margin-bottom:.25rem }
.my-md{ margin-top:2rem; margin-bottom:2rem }
.my-xs{ margin-top:1.25rem; margin-bottom:1.25rem }
.\!mt-2xs{ margin-top:1rem!important }
.-mb-5xs{ margin-bottom:-.25rem }
.-mb-header-h{ margin-bottom:calc(var(--header-h) * -1) }
.-mb-md{ margin-bottom:-2rem }
.-mb-sm{ margin-bottom:-1.5rem }
.-ml-5xs{ margin-left:-.25rem }
.-ml-xs{ margin-left:-1.25rem }
.-mr-xs{ margin-right:-1.25rem }
.-mt-2xl{ margin-top:-5rem }
.-mt-2xs{ margin-top:-1rem }
.-mt-sm{ margin-top:-1.5rem }
.mb-2xl{ margin-bottom:5rem }
.mb-2xs{ margin-bottom:1rem }
.mb-3xs{ margin-bottom:.75rem }
.mb-4xl{ margin-bottom:10rem }
.mb-4xs{ margin-bottom:.5rem }
.mb-5xs{ margin-bottom:.25rem }
.mb-lg{ margin-bottom:3rem }
.mb-md{ margin-bottom:2rem }
.mb-sm{ margin-bottom:1.5rem }
.mb-xl{ margin-bottom:4rem }
.mb-xs{ margin-bottom:1.25rem }
/* Standard ml classes (ml-0, ml-1, etc.) and arbitrary values are in Tailwind */
.ml-2xs{ margin-left:1rem }
.ml-3xs{ margin-left:.75rem }
.ml-4xs{ margin-left:.5rem }
.ml-5xs{ margin-left:.25rem }
.ml-md{ margin-left:2rem }
.ml-sm{ margin-left:1.5rem }
.ml-xl{ margin-left:4rem }
.ml-xs{ margin-left:1.25rem }
/* Standard mr classes (mr-0, mr-1, etc.) and arbitrary values are in Tailwind */
.mr-2xs{ margin-right:1rem }
.mr-3xs{ margin-right:.75rem }
.mr-4xs{ margin-right:.5rem }
.mr-5xs{ margin-right:.25rem }
.mr-md{ margin-right:2rem }
.mr-sm{ margin-right:1.5rem }
.mr-xl{ margin-right:4rem }
.mr-xs{ margin-right:1.25rem }
/* Standard mt classes (mt-0, mt-1, etc.) and arbitrary values are in Tailwind */
.mt-2xl{ margin-top:5rem }
.mt-2xs{ margin-top:1rem }
.mt-3xl{ margin-top:7.5rem }
.mt-3xs{ margin-top:.75rem }
.mt-4xs{ margin-top:.5rem }
.mt-5xs{ margin-top:.25rem }
.mt-lg{ margin-top:3rem }
.mt-md{ margin-top:2rem }
.mt-sm{ margin-top:1.5rem }
.mt-v{ margin-top:1.6875rem }
.mt-xl{ margin-top:4rem }
.mt-xs{ margin-top:1.25rem }
/* Standard p classes (p-0, p-1, etc.) and arbitrary values are in Tailwind */
.p-2xl{ padding:5rem }
.p-2xs{ padding:1rem }
.p-3xs{ padding:.75rem }
.p-4xs{ padding:.5rem }
.p-5xs{ padding:.25rem }
.p-lg{ padding:3rem }
.p-md{ padding:2rem }
.p-sm{ padding:1.5rem }
.p-xs{ padding:1.25rem }
/* Standard px classes and arbitrary values are in Tailwind */
/* !important variants: use Tailwind's ! prefix */
.\!py-4xs{ padding-top:.5rem!important; padding-bottom:.5rem!important }
.px-2xs{ padding-left:1rem; padding-right:1rem }
.px-3xs{ padding-left:.75rem; padding-right:.75rem }
.px-4xs{ padding-left:.5rem; padding-right:.5rem }
.px-5xs{ padding-left:.25rem; padding-right:.25rem }
.px-md{ padding-left:2rem; padding-right:2rem }
.px-sm{ padding-left:1.5rem; padding-right:1.5rem }
.px-xl{ padding-left:4rem; padding-right:4rem }
.px-xs{ padding-left:1.25rem; padding-right:1.25rem }
/* Standard py classes and arbitrary values are in Tailwind */
.py-2xl{ padding-top:5rem; padding-bottom:5rem }
.py-2xs{ padding-top:1rem; padding-bottom:1rem }
.py-3xl{ padding-top:7.5rem; padding-bottom:7.5rem }
.py-3xs{ padding-top:.75rem; padding-bottom:.75rem }
.py-4xl{ padding-top:10rem; padding-bottom:10rem }
.py-4xs{ padding-top:.5rem; padding-bottom:.5rem }
.py-5xs{ padding-top:.25rem; padding-bottom:.25rem }
.py-lg{ padding-top:3rem; padding-bottom:3rem }
.py-md{ padding-top:2rem; padding-bottom:2rem }
.py-sm{ padding-top:1.5rem; padding-bottom:1.5rem }
.py-xl{ padding-top:4rem; padding-bottom:4rem }
.py-xs{ padding-top:1.25rem; padding-bottom:1.25rem }
/* Standard pb classes and arbitrary values are in Tailwind */
.pb-2xs{ padding-bottom:1rem }
.pb-3xs{ padding-bottom:.75rem }
.pb-4xs{ padding-bottom:.5rem }
.pb-5xs{ padding-bottom:.25rem }
.pb-lg{ padding-bottom:3rem }
.pb-md{ padding-bottom:2rem }
.pb-sm{ padding-bottom:1.5rem }
.pb-v{ padding-bottom:1.6875rem }
.pb-xl{ padding-bottom:4rem }
.pb-xs{ padding-bottom:1.25rem }
/* Standard pl classes and arbitrary values are in Tailwind */
.pl-2xs{ padding-left:1rem }
.pl-3xs{ padding-left:.75rem }
.pl-5xs{ padding-left:.25rem }
.pl-md{ padding-left:2rem }
.pl-nav-width{ padding-left:12.5rem }
.pl-sm{ padding-left:1.5rem }
.pl-v{ padding-left:1.6875rem }
.pl-xs{ padding-left:1.25rem }
/* Standard pr classes and arbitrary values are in Tailwind */
.pr-2xl{ padding-right:5rem }
.pr-3xs{ padding-right:.75rem }
.pr-4xs{ padding-right:.5rem }
.pr-5xs{ padding-right:.25rem }
.pr-md{ padding-right:2rem }
.pr-sm{ padding-right:1.5rem }
.pr-xs{ padding-right:1.25rem }
/* Standard pt classes and arbitrary values are in Tailwind */
.pt-2xl{ padding-top:5rem }
.pt-2xs{ padding-top:1rem }
.pt-3xs{ padding-top:.75rem }
.pt-4xs{ padding-top:.5rem }
.pt-5xs{ padding-top:.25rem }
.pt-header-h{ padding-top:var(--header-h) }
.pt-lg{ padding-top:3rem }
.pt-md{ padding-top:2rem }
.pt-sm{ padding-top:1.5rem }
.pt-xl{ padding-top:4rem }
/* overflow and overscroll utilities are in Tailwind */
/* Standard rounded classes and arbitrary values are in Tailwind */
/* Custom rounded scale (different from Tailwind defaults) */
.rounded-xs{ border-radius:.125rem }
.rounded-sm{ border-radius:.25rem }
.rounded-lg{ border-radius:1rem }
.rounded-xl{ border-radius:2rem }
/* Directional rounded with custom scale */
.rounded-b-sm{ border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem }
.rounded-l-md{ border-top-left-radius:.38rem;border-bottom-left-radius:.38rem }
.rounded-s{ border-start-start-radius:.25rem;border-end-start-radius:.25rem }
.rounded-t-lg{ border-top-left-radius:1rem;border-top-right-radius:1rem }
.rounded-t-sm{ border-top-left-radius:.25rem;border-top-right-radius:.25rem }
.rounded-bl-md{ border-bottom-left-radius:.38rem }
.rounded-bl-sm{ border-bottom-left-radius:.25rem }
.rounded-br-lg{ border-bottom-right-radius:1rem }
.rounded-br-md{ border-bottom-right-radius:.38rem }
.rounded-br-sm{ border-bottom-right-radius:.25rem }
.rounded-tl-lg{ border-top-left-radius:1rem }
.rounded-tl-md{ border-top-left-radius:.38rem }
.rounded-tl-sm{ border-top-left-radius:.25rem }
.rounded-tr-lg{ border-top-right-radius:1rem }
.rounded-tr-md{ border-top-right-radius:.38rem }
.rounded-tr-sm{ border-top-right-radius:.25rem }
/* Standard border-width, border-style utilities are in Tailwind */
/* Custom border colors using CSS variables */
.border-primary-5{ border-color:var(--nx-grayscale-color-5) }
.border-primary-10{ border-color:var(--nx-grayscale-color-10) }
.border-primary-45{ border-color:var(--nx-grayscale-color-45) }
.border-primary-60{ border-color:var(--nx-grayscale-color-60) }
.border-primary-80{ border-color:var(--nx-grayscale-color-80) }
.border-b-primary-5{ border-bottom-color:var(--nx-grayscale-color-5) }
.border-b-primary-10{ border-bottom-color:var(--nx-grayscale-color-10) }
.border-b-primary-60{ border-bottom-color:var(--nx-grayscale-color-60) }
.border-l-primary-5{ border-left-color:var(--nx-grayscale-color-5) }
.border-l-primary-10{ border-left-color:var(--nx-grayscale-color-10) }
.border-r-primary-10{ border-right-color:var(--nx-grayscale-color-10) }
.border-t-primary-10{ border-top-color:var(--nx-grayscale-color-10) }
.border-t-primary-5{ border-top-color:var(--nx-grayscale-color-5) }
/* Standard aspect-ratio utilities and arbitrary values are in Tailwind */
/* Standard position, transform, and inset utilities are in Tailwind */
/* Custom inset with scale */
.-left-3xs{ left:-.75rem }
.-top-md{ top:-2rem }
.bottom-md{ bottom:2rem }
.bottom-sm{ bottom:1.5rem }
.left-nav-width{ left:12.5rem }
.left-sm{ left:1.5rem }
.left-xs{ left:1.25rem }
.right-2xs{ right:1rem }
.right-3xs{ right:.75rem }
.right-sm{ right:1.5rem }
.top-2xs{ top:1rem }
.top-3xs{ top:.75rem }
.top-header-h{ top:var(--header-h) }
.top-md{ top:2rem }
.top-xl{ top:4rem }
/* list-style and rounded utilities with standard scales are in Tailwind */

} /* end @layer components */





/*
 * override.css
 */
.row.row-layout{ margin-left:-40px; margin-right:-40px; }
.row.row-layout .col-layout{ padding:0 40px; }
.row.row-layout .col-title{ padding:0 40px; }
.row.row-layout .col-content{ padding:0 40px; }
.row{ margin-left:-12px; margin-right:-12px; display:-webkit-flex; display:flex; -webkit-box-pack:justify; -webkit-justify-content:flex-start; -ms-flex-pack:justify; justify-content:flex-start; flex-wrap:wrap; }
.table{ margin-bottom:0; }
.form-control{ border:1px solid#e7e7e7; width:100%; height:40px; padding:8px 12px; font-size:1rem; color:#000; background-color:#fff; box-shadow:none; -webkit-box-shadow:none; -webkit-border-radius:6px; border-radius:6px; -webkit-transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-15,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-15,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-15,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-15{position:relative;min-height:1px;padding-right:12px;padding-left:12px}
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-15{float:left}
.col-xs-12{width:100%}
.col-xs-11{width:91.66666667%}
.col-xs-10{width:83.33333333%}
.col-xs-9{width:75%}
.col-xs-8{width:66.66666667%}
.col-xs-7{width:58.33333333%}
.col-xs-6{width:50%}
.col-xs-5{width:41.66666667%}
.col-xs-4{width:33.33333333%}
.col-xs-3{width:25%}
.col-xs-15{width:20%}
.col-xs-2{width:16.66666667%}
.col-xs-1{width:8.33333333%}
.col-xs-offset-15{margin-left:20%}
.col-xs-offset-12{margin-left:100%}
.col-xs-offset-11{margin-left:91.66666667%}
.col-xs-offset-10{margin-left:83.33333333%}
.col-xs-offset-9{margin-left:75%}
.col-xs-offset-8{margin-left:66.66666667%}
.col-xs-offset-7{margin-left:58.33333333%}
.col-xs-offset-6{margin-left:50%}
.col-xs-offset-5{margin-left:41.66666667%}
.col-xs-offset-4{margin-left:33.33333333%}
.col-xs-offset-3{margin-left:25%}
.col-xs-offset-2{margin-left:16.66666667%}
.col-xs-offset-1{margin-left:8.33333333%}
.col-xs-offset-0{margin-left:0}
.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container-lg:after,.container-lg:before,.container-sm:after,.container-sm:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{ width:0; text-indent:-9999px; }
.container-sm{ width:100%; max-width:40rem; margin-left:auto; margin-right:auto; padding-left:1.5rem; padding-right:1.5rem; }

@media (min-width:1024px){
.lg\:grid-cols-1-2-1{ grid-template-columns:1fr 2fr 1fr; }
.lg\:grid-cols-1-3-1{ grid-template-columns:1fr 3fr 1fr; }
}

@media (min-width:768px){
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-15{float:left}
.col-sm-12{width:100%}
.col-sm-11{width:91.66666667%}
.col-sm-10{width:83.33333333%}
.col-sm-9{width:75%}
.col-sm-8{width:66.66666667%}
.col-sm-7{width:58.33333333%}
.col-sm-6{width:50%}
.col-sm-5{width:41.66666667%}
.col-sm-4{width:33.33333333%}
.col-sm-3{width:25%}
.col-sm-15{width:20%}
.col-sm-2{width:16.66666667%}
.col-sm-1{width:8.33333333%}
.col-sm-offset-15{margin-left:20%}
.col-sm-offset-12{margin-left:100%}
.col-sm-offset-11{margin-left:91.66666667%}
.col-sm-offset-10{margin-left:83.33333333%}
.col-sm-offset-9{margin-left:75%}
.col-sm-offset-8{margin-left:66.66666667%}
.col-sm-offset-7{margin-left:58.33333333%}
.col-sm-offset-6{margin-left:50%}
.col-sm-offset-5{margin-left:41.66666667%}
.col-sm-offset-4{margin-left:33.33333333%}
.col-sm-offset-3{margin-left:25%}
.col-sm-offset-2{margin-left:16.66666667%}
.col-sm-offset-1{margin-left:8.33333333%}
.col-sm-offset-0{margin-left:0}
}
@media (min-width:992px){
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-15{float:left}
.col-md-12{width:100%}
.col-md-11{width:91.66666667%}
.col-md-10{width:83.33333333%}
.col-md-9{width:75%}
.col-md-8{width:66.66666667%}
.col-md-7{width:58.33333333%}
.col-md-6{width:50%}
.col-md-5{width:41.66666667%}
.col-md-4{width:33.33333333%}
.col-md-3{width:25%}
.col-md-15{width:20%}
.col-md-2{width:16.66666667%}
.col-md-1{width:8.33333333%}
.col-md-offset-15{margin-left:20%}
.col-md-offset-12{margin-left:100%}
.col-md-offset-11{margin-left:91.66666667%}
.col-md-offset-10{margin-left:83.33333333%}
.col-md-offset-9{margin-left:75%}
.col-md-offset-8{margin-left:66.66666667%}
.col-md-offset-7{margin-left:58.33333333%}
.col-md-offset-6{margin-left:50%}
.col-md-offset-5{margin-left:41.66666667%}
.col-md-offset-4{margin-left:33.33333333%}
.col-md-offset-3{margin-left:25%}
.col-md-offset-2{margin-left:16.66666667%}
.col-md-offset-1{margin-left:8.33333333%}
.col-md-offset-0{margin-left:0}
}

@media (min-width:1200px){
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-15{float:left}
.col-lg-12{width:100%}
.col-lg-11{width:91.66666667%}
.col-lg-10{width:83.33333333%}
.col-lg-9{width:75%}
.col-lg-8{width:66.66666667%}
.col-lg-7{width:58.33333333%}
.col-lg-6{width:50%}
.col-lg-5{width:41.66666667%}
.col-lg-4{width:33.33333333%}
.col-lg-3{width:25%}
.col-lg-15{width:20%}
.col-lg-2{width:16.66666667%}
.col-lg-1{width:8.33333333%}
.col-lg-offset-15{margin-left:20%}
.col-lg-offset-12{margin-left:100%}
.col-lg-offset-11{margin-left:91.66666667%}
.col-lg-offset-10{margin-left:83.33333333%}
.col-lg-offset-9{margin-left:75%}
.col-lg-offset-8{margin-left:66.66666667%}
.col-lg-offset-7{margin-left:58.33333333%}
.col-lg-offset-6{margin-left:50%}
.col-lg-offset-5{margin-left:41.66666667%}
.col-lg-offset-4{margin-left:33.33333333%}
.col-lg-offset-3{margin-left:25%}
.col-lg-offset-2{margin-left:16.66666667%}
.col-lg-offset-1{margin-left:8.33333333%}
.col-lg-offset-0{margin-left:0}
}

input:focus-visible{ outline:none; }

h1, h2, h3, h4, h5, h6,
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small{ color:var(--nx-grayscale-color-100); font-weight:500; }
strong{ font-weight:500; color:var(--nx-grayscale-color-100); }
th{ font-weight:500; color:var(--nx-grayscale-color-100); }

.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6{ color:var(--nx-grayscale-color-100); font-weight:500; }
.text-h1{ font-size:clamp(2rem,calc(2rem + 2 * ((100vw - 23.4375rem) / 66.5625)),3.5rem); line-height:clamp(2.28rem,calc(2.28rem + 1.72 * ((100vw - 23.4375rem) / 66.5625)),4rem); font-weight:500; }
.text-h2{ font-size:clamp(2rem,calc(2rem + 1 * ((100vw - 23.4375rem) / 66.5625)),2.5rem); line-height:clamp(2.28rem,calc(2.28rem + 1.2 * ((100vw - 23.4375rem) / 66.5625)),3.48rem); font-weight:500; }
.text-h3{ font-size:clamp(1.5rem,calc(1.5rem + .375 * ((100vw - 23.4375rem) / 66.5625)),1.875rem);line-height:clamp(1.98rem,calc(1.98rem + .495 * ((100vw - 23.4375rem) / 66.5625)),2.475rem); font-weight:500; }
.text-h4{ font-size:clamp(1.25rem,calc(1.25rem + .125 * ((100vw - 23.4375rem) / 66.5625)),1.375rem);line-height:clamp(1.5rem,calc(1.5rem + .2325 * ((100vw - 23.4375rem) / 66.5625)),1.7325rem); font-weight:500; }
.text-h5{ font-size:clamp(1rem,calc(1rem + .125 * ((100vw - 23.4375rem) / 66.5625)),1.125rem);line-height:clamp(1.25rem,calc(1.25rem + .235 * ((100vw - 23.4375rem) / 66.5625)),1.485rem); }
/* text-cta, text-meta, text-nav-desktop, text-nav-mobile: font-size/line-height は @theme で定義済み */
.text-cta{ letter-spacing:0; font-weight:500; }
.text-meta{ font-weight:500; }


/*
 * Common
 */
.page-section{ min-height:62vh; }
.hero-section{ width:100%; height:auto; background-repeat:no-repeat; background-size:cover; }
.content-container{ position:relative; background:#fff; }
/* .content-section .content-section-inner{ padding:60px 0 72px; } */
.section-title{ font-size:2.214em; font-weight:bold; margin-bottom:48px; text-align:center; }
.section-title.section-title-center{ display:flex; align-items:center; justify-content:center; flex:1 auto; font-size:0.875rem; }
/* .section-title.section-title-center:before,
.section-title.section-title-center:after{ content:''; flex:1; border-bottom:1px solid var(--nx-grayscale-color-10); } */
.section-title.section-title-center h2,
.section-title.section-title-center h3,
.section-title.section-title-center p{ padding:0 36px; color:var(--nx-grayscale-color:100); font-size:1.714em; }
.content-section .item-title{ font-weight:normal; }
.content-title{ margin-bottom:24px; text-align:center; font-weight:700; font-size:2.214em; }
.content-title p,
.content-title small{ line-height:1; }
.content-title small{ font-size:65%; color:#999; }
.nav-section{ margin-top:24px; text-align:center; }
.nav-section .borderline{ width:100%; height:1px; border:0; border-top:1px solid #d5d5d5; margin:16px 0 14px; padding:0; display:inline-block; }
.nav-section .borderline a{ background:#fff; display:inline-block; position:relative; top:-12px; padding:0 12px; }
.nav-section .borderline-bg-gray a{ background:#fafafa; }
.marquee-section{ color:#000; text-align:center; }
.marquee{ padding:60px 0 48px; }
.marquee-section .marquee-headline{ font-weight:bold; font-size:42px; line-height:1.15; max-width:720px; margin:0 auto; }
.marquee-section .marquee-headline strong{ font-weight:700; }
.marquee-section .marquee-heading{ font-size:42px; color:#000; line-height:inherit; }
.marquee-section .marquee-intro{ font-size:1.217em; font-weight:bold; max-width:720px; margin:12px auto; }
.rainbow{ -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-image:-webkit-linear-gradient(left, #f00, #fc0, #3c3, #09f, #96f); background-image:-moz-linear-gradient(left, #f00, #fc0, #3c3, #09f, #96f); background-image:-o-linear-gradient(left, #f00, #fc0, #3c3, #09f, #96f); background-image:-ms-linear-gradient(left, #f00, #fc0, #3c3, #09f, #96f); }
.ico-newtab{ margin-left:3px; }
.visuallyhidden{ position:absolute; clip:rect(1px, 1px, 1px, 1px); -webkit-clip-path:inset(0px 0px 99.9% 99.9%); clip-path:inset(0px 0px 99.9% 99.9%); overflow:hidden; height:1px; width:1px; padding:0; border:0; }
.spbr{ display:none; }

/* WordPress Override */
.wp-block-embed__wrapper{ margin-bottom:0 !important; }

/* ribbon */
.cta-ribbon{ background-color:#eee; text-align:center; padding:12px 0; font-size:0.857em; }
.cta-ribbon p a{ margin-left:12px; }


/* header */
.local-header{ padding:24px 0 24px; position:relative; border-bottom:1px solid rgba(0,0,0,.1); }
.local-header.no-line{ border-bottom:none; padding-bottom:0; }
.local-header .title{ width:100%; display:flex; align-items:center; justify-content:space-between; }
.local-header .title .main-title{ font-weight:700; font-size:2em; color:var(--nx-grayscale-color:100); }
.local-header .title .main-title a{ text-decoration:none; }
.local-header .title .sub-title{ font-size:1.429em; font-weight:700; color:#7a7a7a; }
.local-header.dark{ background-color:#000; border-bottom-color:rgba(255,255,255,.2); }
.local-header.dark .title .main-title{ color:#fff; }
.local-header.dark .title .sub-title{ font-size:1.429em; font-weight:700; color:#fff; }
/*
<div class="local-header">
    <div class="container">
        <div class="title">
            <p class="main-title">Test</p>
            <p class="sub-title">Test</p>
        </div>
    </div>
</div>
*/

/* headline */
.local-headline{ margin-bottom:36px; position:relative; }
.local-headline .title{ width:100%; }
.local-headline .title.no-line{ border-bottom:none; padding-bottom:0; }
.local-headline .center{ text-align:center; }
.local-headline .title .sup{ font-size:1.125rem; font-weight:700; margin-bottom:12px; }
.local-headline .title .main-title{ font-weight:700; font-size:2em; }
.local-headline .title .main-title a{ text-decoration:none; }
.local-headline .title .sub-title{ font-size:1.125rem; font-weight:700; color:#7a7a7a; margin-top:10px; }
.local-headline .text{ width:75%; margin:12px auto 0; }
.local-headline .text p{ font-size:1.125rem; line-height:1.7; }
/*
<div class="local-headline">
    <div class="title">
        <p class="main-title">Test</p>
        <p class="sub-title">Test</p>
    </div>
</div>
*/

/* copy */
.copy{ margin-bottom:3rem; position:relative; }
.copy.center{ text-align:center; }
.copy .copy-header{ width:100%; }
.copy .copy-header .copy-caption{ font-size:1.125rem; font-weight:700; margin-bottom:18px; color:var(--nx-primary-color); }
.copy .copy-header .copy-title{ font-weight:400; font-size:2.375rem; }
.copy .copy-header .copy-title.center{ text-align:center; }
.copy .copy-header .copy-title a{ text-decoration:none; }
.copy .copy-body{ width:100%; margin-top:1.125rem; }
.copy .copy-body .readmore{ margin-top:18px; }
.copy.copy-accent .copy-header{ margin-bottom:6px; }
.copy.copy-accent .copy-header .copy-title{ font-size:1.714em; color:var(--nx-primary-color); position:relative; }
.copy.copy-accent .copy-header .copy-title:before{ content:''; display:block; position:absolute; left:-18px; top:6px; bottom:6px; width:2px; background-color:var(--nx-primary-color); }
.copy.copy-accent .copy-body{ margin-top:0; }
.copy.copy-accent .copy-body p{ font-size:1rem; }
.copy.copy-accent .copy-body p.sup{ line-height:1.35; margin-top:6px; }
.copy.copy-accent .copy-body ul{ margin-left:1rem; }
.copy.copy-accent .copy-body ul li{ list-style:disc outside; }
.copy.copy-subsection{ margin-bottom:40px; }
.copy.copy-subsection .copy-header .copy-title{ font-size:1.929em; }
.row-copy{ align-items:center; }
/*
<div class="copy">
    <div class="copy-header">
        <p class="copy-caption"></p>
        <h2 class="copy-title"></h2>
    </div>
    <div class="copy-body">
        <p></p>
    </div>
</div>
*/

/* faq */
.faq-list .row{ margin-left:-18px; margin-right:-18px; }
.faq-list .row .col{ padding:0 18px; display:flex; flex:1 0 auto; margin-bottom:36px; }
.faq .faq-container{ width:100%; padding:24px; position:relative; border-radius:23px; box-shadow:0 5px 28px 0 rgba(0,0,0,.1); display:flex; flex:1 0 auto; flex-direction:column; background:#fff; }
.faq .faq-content{ padding:24px; margin-bottom:18px; display:flex; flex:1 0 auto; flex-direction:column; }
.faq .faq-content .title{ font-size:1.429em; }
.faq .faq-meta{ background-color:#f5f5f7; margin-top:18px; font-size:0.875rem; padding:54px 24px 24px; border-radius:18px; position:relative; }
.faq .faq-meta .profile{ position:absolute; top:-30px; }
.faq .faq-meta .profile img{ width:60px; height:60px; border-radius:50%; }

/*
<div class="faq-list">
    <div class="row">
        <article class="faq col col-xs-12 col-sm-6 col-md-4 col-lg-4">
            <div class="faq-container">
                <div class="faq-content">
                    <h4 class="title">よくある質問</h4>
                </div>
                <div class="faq-meta">
                    <div class="profile"><img src="/static/img/profile_tako_square.jpg"></div>
                    <div class="comment">
                        <p>回答</p>
                    </div>
                </div>
            </div>
        </article>
    </div>
</div>
*/

/* readmore */
.readmore{ display:flex; justify-content:center; align-items:center; text-decoration:underline; text-decoration-color:rgba(0,0,0,.44); text-decoration-thickness:1px; text-underline-offset:.25rem; }
.readmore.left{ justify-content:flex-start; }
.readmore a{ font-size:1rem; color:#121212; text-decoration:underline !important; text-underline-offset:.25rem; text-decoration-thickness:1px; }
/*
<div class="readmore">
    <a href="/">すべて読む</a>
</div>
*/

/* cta - font-size は @theme で定義済み */

/* nav */
.local-nav{ position:sticky; top:0; width:100%; background-color:transparent; z-index:100; z-index:999; -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); background-color:rgba(255,255,255,.7); -webkit-transition:background-color 0.5s cubic-bezier(255,255,255,.7); transition:background-color 0.5s cubic-bezier(2.55, 2.55, 2.55,.7); -webkit-transition-property:background-color, -webkit-backdrop-filter; transition-property:background-color, -webkit-backdrop-filter; transition-property:background-color, backdrop-filter; transition-property:background-color, backdrop-filter, -webkit-backdrop-filter; }
.local-nav .local-nav-container{ height:100%; }
.local-nav .local-nav-row{ height:100%; display:-webkit-flex; display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; margin-left:-12px; margin-right:-12px; }
.local-nav.no-cta .local-nav-row{ margin-right:-12px; margin-left:-12px; }
.local-nav .ln-fill{ -webkit-box-flex:2; -webkit-flex:2; -ms-flex:2; flex:2;  }
.local-nav .ln-left{ -webkit-box-ordinal-group:1; -webkit-order:1; -ms-flex-order:1; order:1; -webkit-box-pack:start; -webkit-justify-content:flex-start; -ms-flex-pack:start; justify-content:flex-start; -webkit-box-flex:2; -webkit-flex:2; -ms-flex:2; flex:2; }
.local-nav .ln-center{ -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1; -webkit-box-ordinal-group:2; -webkit-order:2; -ms-flex-order:2; order:2; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; }
.local-nav .ln-right{ -webkit-box-pack:end; -webkit-justify-content:flex-end; -ms-flex-pack:end; justify-content:flex-end; -webkit-box-ordinal-group:2; -webkit-order:3; -ms-flex-order:3; order:3; -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:2; }
.local-nav .ln-item-wrap{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; }
.local-nav .ln-item{ height:100%; padding:0 12px; text-align:center; vertical-align:middle; display:-webkit-box; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; }
.local-nav .ln-item-link{ height:100%; position:relative; display:block; -webkit-transition:all .1s; transition:all .1s; display:-webkit-box; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; }
.local-nav .ln-item-link i{ margin-right:6px; }
.local-nav .ln-item .ln-item-link{ position:relative; }
.local-nav .ln-item .ln-item-link.active{ color:#dc0500; }
.local-nav .ln-item .ln-item-link.active:before{ content:''; display:block; position:absolute; bottom:0; left:0; right:0; height:2px; background:#dc0500; }
.local-nav .ln-item-link-hover{ opacity:.5; }
.local-nav .ln-item.ln-brand .ln-item-link:hover,
.local-nav .ln-item.ln-brand .ln-item-link:focus,
.local-nav .ln-item.ln-brand .ln-item-link:active{ text-decoration:none; }
/* .local-nav .ln-item-link.btn{ height:24px; font-size:0.714em; padding-left:12px; padding-right:12px; } */
.local-nav .ln-brand{ height:auto; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; }
.local-nav .ln-brand a.ln-item-link{ font-size:1.25rem; white-space:nowrap; font-weight:700; letter-spacing:0; line-height:1; }
.local-nav .ln-brand a.ln-item-link.parent{ font-size:12px; line-height:23px; font-weight:normal; color:rgba(0,0,0,.64) }
.local-nav .dropdown-category .fa{ margin-left:3px; }
.local-nav .dropdown .dropdown-menu{ margin-top:-2px; border-radius:0; padding:0; border:none; background-color:#fff; }
.local-nav .dropdown .dropdown-menu:after{ content:''; display:block; position:absolute; top:-10px; left:24px; border-top:transparent; border-right:10px solid transparent; border-bottom:10px solid #fff; border-left:10px solid transparent; }
.local-nav .dropdown .dropdown-menu a{ color:var(--nx-grayscale-color:100); padding-top:15px; padding-bottom:15px; }
.local-nav .dropdown .dropdown-menu a:hover{ color:var(--nx-primary-color); }
.local-nav .dropdown .dropdown-menu li:not(:last-child){ border-bottom:1px solid #e7e7e7; }
.local-nav.dark .dropdown .dropdown-menu{ background:#000; margin-top:-2px; border-radius:0; padding:0; border:none; }
.local-nav.dark .dropdown .dropdown-menu:after{ content:''; display:block; position:absolute; top:-10px; left:24px; border-top:transparent; border-right:10px solid transparent; border-bottom:10px solid #000; border-left:10px solid transparent; }
.local-nav.dark .dropdown .dropdown-menu a{ padding-top:15px; padding-bottom:15px; }
.local-nav.dark .dropdown .dropdown-menu a:hover{ background-color:var(--nx-grayscale-color:100); }
.local-nav.dark .dropdown .dropdown-menu li:not(:last-child){ border-bottom:1px solid rgba(255,255,255,.2); }
.local-nav .ln-cta a:not(:last-child){ margin-right:6px; }
.local-nav .btn{ padding:5px 8px; display:flex; align-items:center; font-size:11px; font-weight:normal; }
.local-nav .btn i{ margin-left:6px; }
.local-nav .ln-call{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; }
.local-nav .ln-call a{ height:auto; font-weight:400; letter-spacing:0; }
.local-nav .ln-call a span:last-child{ font-size:10px; }
.local-nav .ln-call .sup{ font-size:0.714em; }
.local-nav .ln-mobilenav{ display:none; }
.local-nav .ln-mobilenav .ln-mobilenav-cta{ width:24px; height:24px; cursor:pointer; }
.local-nav .ln-mobilenav .ln-mobilenav-cta::before,
.local-nav .ln-mobilenav .ln-mobilenav-cta::after{ content:""; display:block; width:12px; height:1px; background-color:#000; position:relative; transition:all 0.4s ease-in-out; top:12px; }
.local-nav .ln-mobilenav .ln-mobilenav-cta::before{ transform:rotate(40deg); float:left; right:-2px; }
.local-nav .ln-mobilenav .ln-mobilenav-cta::after{ transform:rotate(-40deg); float:right; left:-1px; }
.local-nav .ln-mobilenav .ln-mobilenav-cta.open::before{ transform:rotate(-40deg); }
.local-nav .ln-mobilenav .ln-mobilenav-cta.open::after{ transform:rotate(40deg); }
.local-nav.dark{ -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);  -webkit-transition:background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1); transition:background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1); -webkit-transition-property:background-color, -webkit-backdrop-filter; transition-property:background-color, -webkit-backdrop-filter; transition-property:background-color, backdrop-filter; transition-property:background-color, backdrop-filter, -webkit-backdrop-filter; background:rgba(0,0,0,1); }
.local-nav.dark .ln-item.active .ln-item-link{ color:#fff; font-weight:bold; }
.local-nav.dark .ln-item-link{ color:#fff; }
.local-nav.dark .ln-brand a.ln-item-link.parent{ color:rgba(255,255,255,.64) }
.local-nav.dark a:hover,
.local-nav.dark .ln-item-link:hover,
.local-nav.dark .ln-item-link:focus,
.local-nav.dark .ln-item-link:active{ text-decoration:none; color:#fff; }
.local-nav.dark .ln-brand a.ln-item-link{ color:#fff }
.local-nav.dark .ln-mobilenav .ln-mobilenav-cta::before,
.local-nav.dark .ln-mobilenav .ln-mobilenav-cta::after{ background-color:#fff; }
.local-nav.dark .ln-call .sup{ color:#fff; }
/*
<nav class="local-nav">
    <div class="local-nav-container container">
        <div class="local-nav-row">
            <div class="ln-item-wrap ln-left ln-fill">
                <div class="ln-item ln-brand"><a href="#" class="ln-item-link">Title</a></div>
            </div>
            <ul class="ln-item-wrap ln-right ln-fill">
                <li class="ln-item"><a href="#" class="ln-item-link">Sample</a></li>
                <li class="ln-item ln-mobilenav">
                    <div class="ln-mobilenav-cta">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>
<nav class="mobilenav">
    <div class="container">
        <div class="nav-group">
            <div class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <p class="panel-title"><a href="#">Sample 1</a></p>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <p class="panel-title"><a href="#">Sample 2</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
*/

/* ページ内ナビゲーション - ヘッダー下 */
.local-content-nav{ position:sticky; top:var(--gh-height); width:100%; background-color:transparent; z-index:100; height:72px; z-index:999; -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); background-color:rgba(255,255,255,.7); -webkit-transition:background-color 0.5s cubic-bezier(255,255,255,.7); transition:background-color 0.5s cubic-bezier(2.55, 2.55, 2.55,.7); -webkit-transition-property:background-color, -webkit-backdrop-filter; transition-property:background-color, -webkit-backdrop-filter; transition-property:background-color, backdrop-filter; transition-property:background-color, backdrop-filter, -webkit-backdrop-filter; }
.local-content-nav .local-content-nav-container{ height:100%; padding:0; }
.local-content-nav .local-content-nav-row{ height:100%; margin-right:0; margin-left:0; display:-webkit-flex; display:flex; justify-content:center;  }
.local-content-nav .local-content-nav-row .lcn-item-wrap{ display:flex; align-items:center; justify-content:center; }
.local-content-nav .local-content-nav-row .lcn-item-wrap{ margin-left:-18px; margin-right:-18px; }
.local-content-nav .local-content-nav-row .lcn-item-wrap .lcn-item{ padding:0 18px; position:relative; height:100%; display:flex; align-items:center; }
.local-content-nav .local-content-nav-row .lcn-item-wrap .lcn-item:after{ content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:#000; opacity:0; transition:opacity 0.1s ease; pointer-events:none; }
.local-content-nav .local-content-nav-row .lcn-item-wrap .lcn-item.active:after{ opacity:1; }
/*
<nav class="local-content-nav">
    <div class="local-content-nav-container container">
        <div class="local-content-nav-row">
            <ul class="ln-item-wrap ln-fill">
                <li class="ln-item"><a href="#example1" class="ln-item-link">Example1</a></li>
                <li class="ln-item"><a href="#example2" class="ln-item-link">Example2</a></li>
                <li class="ln-item"><a href="#example3" class="ln-item-link">Example3</a></li>
            </ul>
        </div>
    </div>
</nav>
*/


/* Scroll nav + Mouse */
.scroll-indicator .fullscreen{ display:block; position:absolute; bottom:36px; left:0; right:0; text-align:center; }
.scroll-indicator .fullscreen > *{ color:#fff; text-transform:uppercase; letter-spacing:3px; }
.scroll-indicator .fullscreen > * .mouse{ position:relative; display:block; width:28px; height:40px; margin:0 auto 12px; border:1px solid #fff; border-radius:35px; }
.scroll-indicator .fullscreen > * .mouse > *{ position:absolute; display:block; top:29%; left:50%; width:6px; height:6px; margin:-3px 0 0 -3px; background:#fff; border-radius:50%; -webkit-animation:ani-mouse 2.5s linear infinite; animation:ani-mouse 2.5s linear infinite; }
.scroll-indicator .mobile{ display:none; position:absolute; left:50%; margin-left:-14px; bottom:24px; -webkit-animation:bounce 1.2s infinite; animation:bounce 1.2s infinite; color:#fff; }
.scroll-indicator p{ margin-bottom:12px; }
.scroll-indicator.light .fullscreen > *{ color:var(--nx-grayscale-color:100); }
.scroll-indicator.light .fullscreen > * .mouse{ border:1px solid var(--nx-grayscale-color:100); }
.scroll-indicator.light .fullscreen > * .mouse > *{ background:var(--nx-grayscale-color:100); }
.scroll-indicator.light .mobile{ color:var(--nx-grayscale-color:100); }
/* Mouse animation */
@-webkit-keyframes ani-mouse{ 0%{ opacity:1; top:29%; } 15%{ opacity:1; top:50%; } 50%{ opacity:0; top:50%; } 100%{ opacity:0; top:29%; } }
@keyframes ani-mouse{ 0%{ opacity:1; top:29%; } 15%{ opacity:1; top:50%; } 50%{ opacity:0; top:50%; } 100%{ opacity:0; top:29%; } }
@-webkit-keyframes bounce{ 0%{ bottom:24px; } 50%{ bottom:36px; } 100%{ bottom:24px; } }
@keyframes bounce{ 0%{ bottom:24px; } 50%{ bottom:36px; } 100%{ bottom:24px; } }
/*
<span class="scroll-btn"><a><span class="mouse"><span></span></span></a><p>Scroll</p></span>
*/


/*
 * Button
 */
.btn{ display:inline-block; -webkit-transition:all .3s; -moz-transition:all .3s; transition:all .3s; border-radius:5px; padding:12px 22px; border:none; border:1px solid transparent; font-size:0.875rem; white-space:nowrap; }
.btn:hover,
.btn:focus,
.btn:active{ outline:0 !important; }
.btn:active{ box-shadow:none; }
a.btn-lg{ padding:18px 36px; font-size:0.875rem; }
a.btn-sm{ padding:6px 24px; }
a.btn-xs{ padding:2px 7px; }
.btn-default{ background-color:#ecf0f1; border-color:#ecf0f1; color:var(--nx-grayscale-color:100); }
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:active:hover{ background-color:#bdc3c7; border-color:#bdc3c7; }
.btn-default-dark{ background-color:#fff; border-color:#fff; color:var(--nx-grayscale-color:100); }
.btn-default-dark:hover,
.btn-default-dark:focus,
.btn-default-dark:active,
.btn-default-dark:active:hover{ background-color:#bbb; border-color:#bbb; }
.btn-primary{ background-color:var(--nx-primary-color); border-color:var(--nx-primary-color); }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:hover{ background-color:var(--nx-primary-color-hover); border-color:var(--nx-primary-color-hover); }
.btn-primary-dark{ background-color:#fff; border-color:#fff; color:var(--nx-primary-color) }
.btn-primary-dark:hover,
.btn-primary-dark:focus,
.btn-primary-dark:active,
.btn-primary-dark:active:hover{ color:#0067d8; }
.btn-success{ background-color:#34c759; border-color:#34c759; }
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:active:hover{ background-color:#26af49; border-color:#26af49; }
.btn-warning{ background-color:#ffb400; border-color:#ffb400; }
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning:hover{ background-color:#ff9900; border-color:#ff9600; }
.btn-warning-ghost{ border-color:#ffb400; color:#ffb400; }
.btn-warning-ghost:hover,
.btn-warning-ghost:focus,
.btn-warning-ghost:active,
.btn-warning-ghost:active:hover{ border-color:#ff9900; border-color:#ff9900; color:#ff9900; }
.btn-danger{ background-color:var(--nx-primary-color); border-color:var(--nx-primary-color); }
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger:active:hover{ background-color:#f22217; border-color:#f22217; }
.btn-info{ background-color:#5ac8fa; border-color:#5ac8fa; }
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info:active:hover{ background-color:#4fb2df; border-color:#4fb2df; }
.btn-white{ background-color:#fff; border-color:#fff; color:#000; }
.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white:active:hover{ background-color:#fff; border-color:#fff; color:#000; }
.btn-black{ background-color:var(--nx-grayscale-color-100); border-color:var(--nx-grayscale-color-100); color:#fff; }
.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black:active:hover{ background-color:var(--nx-grayscale-color-80); border-color:var(--nx-grayscale-color-80); color:#fff; }
.btn-link{ color:var(--nx-primary-color); border:none; }
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link:active:hover{ color:var(--nx-primary-color); border:none; }
.btn-link-white{ color:#fff; border:none; }
.btn-link-white:hover,
.btn-link-white:focus,
.btn-link-white:active,
.btn-link-white:active:hover{ color:#ddd; border:none; }
.btn-link-black{ color:var(--nx-grayscale-color:100); border:none; }
.btn-link-black:hover,
.btn-link-black:focus,
.btn-link-black:active,
.btn-link-black:active:hover{ color:#333333; border:none; }
.btn-ghost{ background:transparent; border-color:#fff; color:#fff; font-weight:400; }
.btn-ghost:hover,
.btn-ghost:focus,
.btn-ghost:active{ background:transparent; border-color:#ccc; color:#ccc; }
.btn-default-ghost{ background:transparent; border:1px solid #eee; }
.btn-default-ghost:hover,
.btn-default-ghost:focus,
.btn-default-ghost:active,
.btn-default-ghost:active:hover{ background:transparent; border-color:#ccc; }
.btn-primary-ghost{ background:transparent; border-color:var(--nx-primary-color); color:var(--nx-primary-color); }
.btn-primary-ghost:hover,
.btn-primary-ghost:focus,
.btn-primary-ghost:active,
.btn-primary-ghost:active:hover{ background:transparent; border-color:#0067d8; color:#0067d8; }
.btn-rounded{ -webkit-border-radius:50px; border-radius:50px; }
.btn .caret{ margin-left:7px; }

/*
 * pagination
 */
.pagination{ display:-webkit-flex; display:-ms-flexbox; display:flex; justify-content:space-between; -webkit-align-items:center; -ms-flex-align:center; align-items:center; max-width:240px; margin:0 auto; }
.pagination .pager a:hover,
.pagination .pager a:active,
.pagination .pager a:focus{ text-decoration:none; }
.pagination .btn-pager{ width:36px; height:36px; background:var(--nx-grayscale-color-100); -webkit-border-radius:50%; border-radius:50%; display:-ms-flexbox; display:flex; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; color:#fff; font-size:2.214em; line-height:1; }
.pagination .disabled .btn-pager{ background:#ccc; }
.pagination .btn-pager .fa{ margin-top:-3px; }
.pagination .pager-previous{ order:1; }
.pagination .btn-pager-previous .fa{ margin-left:-3px; }
.pagination .pager-current{ order:2; font-size:1rem; }
.pagination .pager-next{ order:3; }
.pagination .btn-pager-next .fa{ margin-left:3px; }

/* tag */
.tags ul{display:block; margin-bottom:0; }
.tags ul li{ margin:0 0 6px 0; display:inline-block; font-size:0.875rem; }
.tags ul li a,
.tags ul li span{ display:block; border:1px solid #ddd; padding:7px 10px 5px; line-height:110%; color:#777; -webkit-border-radius:3px; border-radius:3px; -webkit-transition:all .2s; -moz-transition:all .2s; transition:all .2s; font-size:0.857em; }
.tags ul li a:hover,
.tags ul li span:hover{ cursor:pointer; border-color:#000; color:#000; text-decoration:none; }

/* テキストフィルター */
.text-fill{ -webkit-background-clip:text; background-position:center center; background-size:cover; background-repeat:no-repeat; }
.text-fill.text-fill-01{ background-image:url(../img/bg_gradient_01.jpg); }
.text-fill .fill{ -webkit-text-fill-color:transparent }

/* ドロップダウンナビ */
.dropdown-nav-container{ -webkit-transition:all .2s; -moz-transition:all .2s; transition:all .2s; }
.dropdown-nav{ display:none; color:#fff; position:fixed; top:0; left:0; right:0; bottom:0; }
.dropdown-nav.active{ display:block; z-index:1002;  background:rgba(255,255,255,.25);-webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);  -webkit-transition:background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1); transition:background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1); -webkit-transition-property:background-color, -webkit-backdrop-filter; transition-property:background-color, -webkit-backdrop-filter; transition-property:background-color, backdrop-filter; transition-property:background-color, backdrop-filter, -webkit-backdrop-filter; }
.dropdown-nav-wrap{ display:none; width:100%; background:#fff; padding:72px 0 48px; }
.dropdown-nav-wrap .ddn-item-link:hover{ text-decoration:none; opacity:.75; }
.dropdown-nav-wrap .ddn-item-link .figure{ margin-right:18px; }
.dropdown-nav-wrap .ddn-item-link .name{ font-size:0.875rem; margin-bottom:18px; font-weight:bold; }
.dropdown-nav-wrap .ddn-item-link .link{ margin-top:24px; }
.dropdown-nav .ddn-title{ color:#555; }
.dropdown-nav .app-icon{ background:#000; width:96px; height:96px; display:flex; justify-content:flex-start; align-items:center; -webkit-border-radius:24px; border-radius:24px; border:1px solid rgba(255, 255, 255, .3) }
.dropdown-nav .app-icon img{ width:60px; height:60px; margin:0 auto; }
.dropdown-nav .app-icon img{ width:60px; margin:0 auto; }
.dropdown-nav .logo img{ height:24px; margin:0 auto 18px; }
.dropdown-nav a{ color:var(--nx-grayscale-color:100); }
.dropdown-nav a .description{ font-size:1rem; }
.dropdown-nav a:hover{ color:#000; }
.dropdown-nav .nav-group:not(:last-child){ margin-bottom:24px; }



/* list */
.list li{ list-style:disc; margin-left:18px; }


/* news */
.news-list .entries{ border-top:1px solid #e7e7e7; margin-bottom:24px; }
.news-list .entry{ border-bottom:1px solid #e7e7e7; }
.news-list .entry .entry-link{ color:var(--nx-grayscale-color:100); display:flex; align-items:center; padding:24px 0; }
.news-list .entry .entry-link:hover,
.news-list .entry .entry-link:active,
.news-list .entry .entry-link:focus{ text-decoration:none; transition:all .2s; scale:1.02; }
.news-list .entry .meta{ width:31%; display:flex; justify-content:space-between; margin-right:24px; }
.news-list .entry .meta .posted-on{ width:50%; margin-right:24px; }
.news-list .entry .meta .category{ width:45%; }
.news-list .entry .meta .category span{ font-size:0.857em; border:1px solid #e7e7e7; display:block; text-align:center; padding:3px 0; border-radius:4px; font-weight:bold; }
.news-list .entry .entry-title{ flex:1; font-size:1.070.875rem; display:flex; justify-content:space-between; align-items:center; }


/* card list */
.card-list .row{ margin-left:-18px; margin-right:-18px; }
.card-list .row .col{ padding:0 18px; display:flex; }
.card-list .card-link{ display:block; background:#fff; color:#000; width:100%; }
.card-list .card-link:hover,
.card-list .card-link:focus,
.card-list .card-link:active{ text-decoration:none; }
.card-list .card-link:hover .image{ transform:scale(1.02); }
.card-list .card .image{ display:block; width:100%; background-position:center center; background-size:cover; transition:400ms cubic-bezier(0.4, 0, 0.25, 1) 0ms; }
.card-list .card .card-content{ position:relative; }
.card-list .card .card-content .card-title{ font-size:1.125rem; line-height:1.25; }
.card-list .card .card-content .card-meta{ margin-top:18px; }
.card-list .card .card-content .card-meta .card-date{ margin:0 -2px; }
.card-list .card .card-content .card-meta .card-date .date{ margin:0 2px; }

/*
<div class="card-list">
    <div class="row">
        <articleclass="card col col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <a href="" class="card-link">
                <div class="image-container">
                    <div class="image" style="background-image:url()"></div>
                </div>
                <div class="card-content">
                    <h4 class="card-title"></h4>
                    <div class="card-meta">
                        <div class="meta">
                            <div class="posted-on"></div>
                        </div>
                    </div>
                </div>
            </a>
        </article>
    </div>
</div>
*/

/* panel */
.panel-group{ -webkit-border-radius:5px; border-radius:5px; padding:0; margin:0; }
.panel-group .panel+.panel{ margin-top:0; }
.panel-group .panel{ border-radius:0; border:none; -webkit-box-shadow:none; box-shadow:none; background:transparent; background:transparent; }
.panel-group .panel:last-child{ border-bottom:none; }
.panel-default>.panel-heading{ color:inherit; background-color:transparent; border:none; padding:0; }
.panel-default a{ display:flex; justify-content:space-between; align-items:center; position:relative; }
.panel-collapse>.panel-body{ border-top:none !important; padding-top:0; padding-right:0; }
.accordion-toggle a:after{ content:'' !important; width:20px; height:20px; background:url(../img/ico_minus_whitebg.svg) 0 0 /cover no-repeat; }
.accordion-toggle a.collapsed:after{ content:'' !important; background:url(../img/ico_plus_whitebg.svg) 0 0 /cover no-repeat; }
.panel-group a:hover,
.panel-group a:focus,
.panel-group a:active{ text-decoration:none; }

/* section diviter */
.section-division{ display:flex; align-items:center; width:100%; }
.section-division p{ flex-grow:10; text-align:center; font-size:1.375rem; font-weight:400; }
.section-division:before,
.section-division:after{ content:''; display:block; width:35%; height:1px; background-color:#e7e7e7; }

/* sharer */
.sharer ul{ line-height:1 !important; }
.sharer ul li{ display:inline-block; margin-right:15px; }
.sharer ul li a{ font-size:1.125rem; color:#707070; position:relative; }
.sharer ul li a:hover{ color:var(--nx-grayscale-color-100); }
.share-tooltip{
    position:absolute;
    bottom:-36px;
    left:50%;
    transform:translateX(-50%);
    background:#f7f7f7;
    color:#000;
    font-size:0.875rem;
    padding:6px 10px;
    border-radius:4px;
    white-space:nowrap;
    opacity:0;
    transition:opacity 0.2s ease;
    pointer-events:none;
    z-index:1000;
}
/* .share-tooltip::after{
    content:'';
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border:5px solid transparent;
    border-top-color:#e7e7e7;
} */
.share-tooltip.show{ opacity:1; }


/* contact form */
.contact .require{ color:red; }
.contact .form-group{ margin-bottom:1.5rem; }
.contact .form-group label{ display:block; margin-bottom:0.875rem; font-weight:400; }
.contact input.form-control,
.contact textarea.form-control,
.contact select.form-control{ -webkit-border-radius:6px; border-radius:6px; -webkit-box-shadow:none; box-shadow:none; }
.contact input.form-control,
.contact select.form-control{ height:48px;  }
.contact textarea.form-control{ resize:none; }
.contact .form-control:focus{ border-color:rgba(0,0,0,.44); outline:0; -webkit-box-shadow:0 0 0 4px rgba(0,0,0,.25); box-shadow:0 0 0 4px rgba(0,0,0,.25) }
.contact .wpcf7-list-item{ display:inline-block; margin-right:20px; }
.contact .sup{ margin-top:10px; }
.contact .wpcf7-form-control-wrap{ display:block !important; }
.contact .wpcf7-validation-errors{ background:red; color:#fff; text-align:center; padding:20px; margin-bottom:50px; border:none; }
.contact .wpcf7-not-valid-tip{ display:block; color:red; margin-top:10px; text-align:left; }
.contact .wpcf7-submit{ margin-right:12px; }
.contact .screen-reader-response{ display:none; }
.contact .wpcf7-form{ margin-bottom:48px; }
.contact .form-group label,
.contact input.form-control,
.contact textarea.form-control,
.contact select.form-control,
.contact .wpcf7-list-item,
.contact .wpcf7-validation-errors{ font-size:1rem; }

/* browser */
.screen{ border-radius:30px; box-shadow:0 34px 69px 0 rgba(0, 0, 0, .1), 0 34px 69px 0 rgba(50, 50, 93, .25); width:67.5%; font-size:17px; }
.screen.screen-light{ background:rgba(255, 255, 255, 1); border:1px solid #fff; }
.screen.screen-dark{ background:rgba(0, 0, 0, .85); border:1px solid #000; }
.screen img{ width:90px; }
.screen .chat .message:not(:last-child){ margin-bottom:1rem; }
.screen .chat .message .icon{ aspect-ratio:1/1; width:1.75rem; border-radius:50%; display:flex; align-items:center; justify-content:center; line-height:1; }
.screen .chat .message .child{ min-width:0; }
.screen .chat .message.message-llm{ display:flex; max-width:100%; }
.screen .chat .message.message-llm .icon{ background-color:#000; margin-right:1rem; }
.screen .chat .message.message-me{ display:flex; justify-content:flex-end; flex-direction:column; align-items:flex-end; }
.screen .chat .message.message-me img{ border-radius:6px; margin-bottom:6px; }
.screen .chat .message.message-me .text{ background-color:#f5f5f7; border-radius:23px; padding:20px; }
.screen .chat .message.message-llm .code{ color:#000; background:#f5f5f7; font-size:0.75rem; border-radius:6px; margin-top:12px; border:1px solid #e7e7e7; overflow:hidden; }
.screen .chat .message.message-llm .code .header{ display:flex; justify-content:space-between; padding:12px; }
.screen .chat .message.message-llm .code .body{ padding:0.875rem; background:#fff; font-size:0.875rem; border:none; border-radius:0; }
.screen .chat .message.message-llm .image{ display:flex; margin-top:6px; }
.screen .chat .message.message-llm .image.image-3 img{ width:48px; }
.screen .chat .message.message-llm .image img:not(:last-child){ margin-right:5px; }


/* carousel with slick */
.carousel-section{ width:100%; max-width:100%; overflow:hidden; }
.carousel-section .slick-list{ overflow:visible; padding:30px 0; }
.carousel-section .slick-track{ display:flex; }
.carousel-section .slick-track .slick-slide,
.carousel-section .slick-track .slick-slide>div,
.carousel-section .slick-track .slick-slide>div>.carousel-item{ display:flex !important; flex-grow:1; height:auto; }
.carousel-section .slick-track .slick-slide .carousel-item .item{ display:flex !important; flex-direction:column; flex-grow:1; }
.slick-arrows .slick-next,
.slick-arrows .slick-prev{ bottom:0; top:auto; font-size:0.875rem; border:1px solid var(--nx-primary-color-20); border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; mix-blend-mode:initial; color:var(--nx-primary-color); background:var(--nx-primary-color-20); }
/* .slick-arrows .slick-disabled{ border:1px solid #e7e7e7 !important; background:transparent !important; color:#717f96 !important; } */
.slick-arrows .slick-next{ right:0; left:auto; margin-right:0; margin-top:0; }
.slick-arrows .slick-prev{ right:34px; left:auto; margin-left:0; margin-top:0; }
/* <section class="carousel-section">
    <div class="container">
        <div class="carousel">
            <div class="carousel-item">
                <div class="item">
                    <p>ITEM-01</p>
                </div>
            <div>
        </div>
    </div>
</section> */


/* チケット */
.ticket{ height:240px; max-width:1024px; min-width:100%; width:100%; display:grid; grid-template-rows:40px 200px; grid-template-columns:100%; perspective:1024px; will-change:transform; transition:all 1s; position:relative; transform:scale3d(1, 1, 1) rotate3d(0, 1, 0, 0deg); }
.ticket.crumbing{ transform:scale3d(0.25, 0.25, 0.25) rotate3d(0, 1, 0, 90deg); }
.ticket:before{ content:''; width:100%; height:100%; position:absolute; background-image:url("../img/bg_ticket.png"); background-size:100% 100%; background-position:center center; background-repeat:no-repeat; opacity:0.2; z-index:999; }
.ticket-head{ background:#022c52; position:relative; display:flex; align-items:center; justify-content:space-between; padding-right:10px; height:40px; }
.ticket-head:before{ content:''; position:absolute; width:100%; height:100%; background-image:url("../img/bg_ticket_header.png"); background-position:right; background-repeat:no-repeat; filter:invert(100%); opacity:0.45; }
.ticket-head-url{ justify-content:flex-start; padding-left:10px; color:#f8ffff; font-weight:500; }
.ticket-head-url h1{ color:#f8ffff; font-size:16px; }
.ticket-head-holo{ height:26px; width:72px; border-radius:10px/10px; display:flex; justify-content:center; align-items:center; background-image:linear-gradient(to right, #c2ffb6, #ffa3b6, #dda9ff, #a2d1ff); opacity:1; z-index:2; }
.ticket-head-holo span{ color:#c0c0c0; opacity:0.75; -webkit-text-stroke-width:1px; -webkit-text-stroke-color:#808080; font-size:13px; letter-spacing:0; }
.ticket-body{ height:200px; display:grid; grid-template-rows:100%; grid-template-columns:15% 70% 15%; padding:10px; background:#f5f5f7; }
.ticket-body-code{ display:grid; grid-template-columns:100%; }
.ticket-body-code .barcode{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; will-change:transform; white-space:nowrap; }
.ticket-body-code .barcode .code{ font-family:'Libre Barcode 39', cursive; transform:rotate(-90deg); font-size:3.5em; position:absolute; letter-spacing:-0.5px; }
.ticket-body-code .barcode .code:before{ content:'100001'; font-family:'Pathway Gothic One', sans-serif; font-size:1rem; text-align:center; top:40px; width:100%; height:100%; position:absolute; font-weight:bold; }
.ticket-body-data{ background:#eee; padding:5px; display:grid; grid-gap:10px; grid-template-rows:auto; font-weight:500; align-items:center; }
.ticket-body-data [class^="data"]{ display:flex; flex-direction:column; }
.ticket-body-data .data-date{ flex-direction:row; display:flex; justify-content:space-between; }
.ticket-body-data .small{ font-size:0.675em; }
.ticket-body-data .big{ font-size:1rem; }
.ticket-body-logo{ padding:20px; background:#eee; position:relative; }
.ticket-body-logo .logo{ background-image:url("../img/logo_public.svg"); background-size:contain; background-repeat:no-repeat; background-position:center center; width:27px; height:25px; }
/*
<div class="ticket">
    <div class="ticket-head">
        <div class="ticket-head-url">
            <h1>www.next.inc</h1>
        </div>
        <div class="ticket-head-holo">
            <span>NEXT.INC</span>
        </div>
    </div>
    <div class="ticket-body">
        <div class="ticket-body-code">
            <div class="barcode">
                <div class="code">
                    <span>100245</span>
                </div>
            </div>
        </div>
        <div class="ticket-body-data">
            <div class="data-title">
                <span class="small">NEXT PRESENTS</span>
                <span class="big">最長90日間の初期構築期間50%OFF</span>
                <span class="small">50% off the initial build period of the system for up to 90 days</span>
            </div>
            <div class="data-event">
                <span class="big">初回取引キャンペーン</span>
                <span class="small">通常の料金の50%オフでサービス提供</span>
                <span class="small">初回取引のみ有効</span>
            </div>
            <div class="data-date">
                <span class="big">任意の日から最長90日間有効</span>
                <span class="big">10:00</span>
            </div>
        </div>
        <div class="ticket-body-logo">
            <div class="logo"></div>
        </div>
    </div>
</div>
*/

/* スーパーナビ */
.dropdown-nav .main-nav ul li a{ font-size:1.375rem; line-height:2.4rem; font-weight:500; transition:all .2s; }
.dropdown-nav ul li a:hover,
.dropdown-nav ul li a:active,
.dropdown-nav ul li a:focus{ text-decoration:none; opacity:.6; }
.dropdown-nav .sub-nav ul li a{ font-size:0.875rem; line-height:1.5rem; font-weight:500; }
/*
<div class="dropdown-nav-container">
    <nav id="gh-services-nav" class="dropdown-nav">
        <div id="gh-services-nav-wrap" class="dropdown-nav-wrap">
            <div class="container">
                <div class="nav-group">
                    <div class="row">
                        <div class="ddn-item main-nav col-md-4 col-lg-4">
                            <h4>サービスから探す</h4>
                            <ul>
                                <li><a href="<?= NX_HOME;?>/services/">サービス一覧</a></li>
                            </ul>
                        </div>
                        <div class="ddn-item main-nav col-md-4 col-lg-4">
                            <h4>用途から探す</h4>
                            <ul>
                                <li><a href="<?= NX_HOME;?>/services/generative-ai/">生成AI</a></li>
                            </ul>
                        </div>
                        <div class="ddn-item sub-nav col-md-3 col-lg-3">
                            <h4>こちらも参考</h4>
                            <ul>
                                <li><a href="<?= NX_HOME;?>/features/">ネクストが選ばれる理由</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>
*/

/* コネクタ */
.content-connector .connector{ display:flex; align-items:center; justify-content:center; }
.content-connector .connector:before,
.content-connector .connector:after{ content:''; width:100%; height:1px; background:#ddd; }
.content-connector .connector:before{ border-radius:4px 0 0 4px; }
.content-connector .connector:after{ border-radius:0 4px 4px 0; }
.content-connector .connector i{ font-size:48px; }
/*
<div class="content-connector">
    <div class="container">
        <div class="connector"><i class="fa-thin fa-circle-arrow-down"></i></div>
    </div>
</div>
*/

/**************
 * Responsive *
 **************/
.local-mobilenav{ display:none; position:fixed !important; width:100vw; height:100vh; z-index:900; -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); background-color:rgba(255,255,255,0.7); -webkit-transition:background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1); transition:background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1); -webkit-transition-property:background-color, -webkit-backdrop-filter; transition-property:background-color, -webkit-backdrop-filter; transition-property:background-color, backdrop-filter; transition-property:background-color, backdrop-filter, -webkit-backdrop-filter; }
.local-mobilenav .container{ padding-top:6px; padding-bottom:18px; }
.local-mobilenav .panel-group .panel:not(:last-child){ border-bottom-width:1px; border-bottom-style:solid; }
.local-mobilenav.light{ background-color:rgba(255,255,255,0.25); -webkit-transition:background-color 0.5s cubic-bezier(255,255,255,0.25); transition:background-color 0.5s cubic-bezier(255,255,255,0.25); }
.local-mobilenav.light .container{ background-color:rgba(255,255,255,1); -webkit-transition:background-color 0.5s cubic-bezier(255,255,255,1); transition:background-color 0.5s cubic-bezier(255,255,255,1); }
.local-mobilenav.light .panel-default a{ color:var(--nx-grayscale-color:100); }
.local-mobilenav.light .panel-group .panel:not(:last-child){ border-bottom-color:rgba(0,0,0,.04); }
.local-mobilenav.dark{ background-color:rgba(0,0,0,.25); -webkit-transition:background-color 0.5s cubic-bezier(0,0,0,.25); transition:background-color 0.5s cubic-bezier(0,0,0,.25); }
.local-mobilenav.dark .container{ background-color:rgba(0,0,0,1); -webkit-transition:background-color 0.5s cubic-bezier(0,0,0,1); transition:background-color 0.5s cubic-bezier(0,0,0,1); }
.local-mobilenav.dark .panel-default a{ color:#fff; }
.local-mobilenav.dark .panel-group .panel:not(:last-child){ border-bottom-color:rgba(255,255,255,.1); }

.local-mobilecta{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:99; }
.local-mobilecta .cta-group{ display:flex; justify-content:space-around; align-items:center; width:100%; }
.local-mobilecta .cta-group .cta{ display:flex; justify-content:center; align-items:center; height:48px; font-size:0.875rem; }
/*
<nav class="local-mobilecta">
    <div class="cta-group">
        <div class="cta cta-xxxx">
            <a href="/path/to/xxxx">xxxx</a>
        </div>
        <div class="cta cta-yyyy">
            <a href="/path/to/yyyy">yyyy</a>
        </div>
    </div>
</nav>
*/


/* basic animation */
@media not print{
.anm{ opacity:0; }
.anm.is-animated{ -webkit-animation:fadeIn 1.5s forwards; animation:fadeIn 1.5s forwards; }
.anm-up{ -webkit-transform:translateY(30px); transform:translateY(30px); opacity:0; }
.anm-up.is-animated{ -webkit-animation:fadeInUp 1.5s forwards; animation:fadeInUp 1.5s forwards; }
.anm-left{ -webkit-transform:translateX(30px); transform:translateX(30px); opacity:0; }
.anm-left.is-animated{ -webkit-animation:fadeInLeft 1.5s forwards; animation:fadeInLeft 1.5s forwards; }
.anm-right{ -webkit-transform:translateX(-30px); transform:translateX(-30px); opacity:0; }
.anm-right.is-animated{ -webkit-animation:fadeInRight 1.5s forwards; animation:fadeInRight 1.5s forwards; }
}
.anm-list > *{ -webkit-transform:translateY(30px); transform:translateY(30px); opacity:0; }
.anm-list > *.is-animated{ -webkit-animation:fadeInUp 1.5s forwards; animation:fadeInUp 1.5s forwards; }
@-webkit-keyframes fadeIn{ 0%{ opacity:0; } 100%{ opacity:1; } }
@keyframes fadeIn{ 0%{ opacity:0; } 100%{ opacity:1; } }
@-webkit-keyframes fadeInUp{ 0%{ -webkit-transform:translateY(20px); transform:translateY(20px); opacity:0; -webkit-transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); } 100%{ -webkit-transform:translateY(0); transform:translateY(0); opacity:1; } }
@keyframes fadeInUp{ 0%{ -webkit-transform:translateY(20px); transform:translateY(20px); opacity:0; -webkit-transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); } 100%{ -webkit-transform:translateY(0); transform:translateY(0); opacity:1; } }
@-webkit-keyframes fadeInDown{ 0%{ -webkit-transform:translateY(-20px); transform:translateY(-20px); opacity:0; -webkit-transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); } 100%{ -webkit-transform:translateY(0); transform:translateY(0); opacity:1; } }
@keyframes fadeInDown{ 0%{ -webkit-transform:translateY(-20px); transform:translateY(-20px); opacity:0; -webkit-transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); } 100%{ -webkit-transform:translateY(0); transform:translateY(0); opacity:1; } }
@-webkit-keyframes fadeOutUp{ 0%{ -webkit-transform:translateY(0); transform:translateY(0); opacity:1; } 100%{ -webkit-transform:translateY(-20px); transform:translateY(-20px); opacity:0; -webkit-transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); } }
@keyframes fadeOutUp{ 0%{ -webkit-transform:translateY(0); transform:translateY(0); opacity:1; } 100%{ -webkit-transform:translateY(-20px); transform:translateY(-20px); opacity:0; -webkit-transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); } }
@-webkit-keyframes fadeInLeft{ 0%{ -webkit-transform:translateX(30px); transform:translateX(30px); opacity:0; -webkit-transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); } 100%{ -webkit-transform:translateX(0); transform:translateX(0); opacity:1; } }
@keyframes fadeInLeft{ 0%{ -webkit-transform:translateX(30px); transform:translateX(30px); opacity:0; -webkit-transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); } 100%{ -webkit-transform:translateX(0); transform:translateX(0); opacity:1; } }
@-webkit-keyframes fadeInRight{ 0%{ -webkit-transform:translateX(-30px); transform:translateX(-30px); opacity:0; -webkit-transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); } 100%{ -webkit-transform:translateX(0); transform:translateX(0); opacity:1; } }
@keyframes fadeInRight{ 0%{ -webkit-transform:translateX(-30px); transform:translateX(-30px); opacity:0; -webkit-transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); transition-timing-function:cubic-bezier(0, 0.4, 0.2, 1); } 100%{ -webkit-transform:translateX(0); transform:translateX(0); opacity:1; } }
@-webkit-keyframes ballDrop{ 60%{ -webkit-transform:translate(0, 20px) rotate(-180deg) scale(0.5); transform:translate(0, 20px) rotate(-180deg) scale(0.5); }
100%{ -webkit-transform:translate(0) rotate(0deg) scale(1); transform:translate(0) rotate(0deg) scale(1); opacity:1; } }
@keyframes ballDrop{ 60%{ -webkit-transform:translate(0, 20px) rotate(-180deg) scale(0.5); transform:translate(0, 20px) rotate(-180deg) scale(0.5); } 100%{ -webkit-transform:translate(0) rotate(0deg) scale(1); transform:translate(0) rotate(0deg) scale(1); opacity:1; } }

/* bar animation */
.passing{ display:block; }
.passing .anm-bar{ -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); display:inline-block; position:relative; transform:translate3d(0, 0, 0); }
.passing .anm-bar::before{ display:inline-block; z-index:1; position:absolute; top:0; left:0; width:0; height:100%; background:var(--nx-grayscale-color:100); content:""; }
.passing .anm-copy{ -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); opacity:0; }
.passing.is-visible .anm-bar::before{ -webkit-animation:anm-bar 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s 1 normal forwards; animation:anm-bar 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s 1 normal forwards; }
.passing.is-visible .anm-copy{ -webkit-animation:anm-cont 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.2s 1 normal forwards; animation:anm-cont 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.2s 1 normal forwards; }
@-webkit-keyframes anm-bar{ 0%{ right:auto; left:0; width:0; } 50%{ right:auto; left:0; width:100%; } 100%{ right:0; left:auto; width:0; } }
@keyframes anm-bar{ 0%{ left:0; width:0; } 50%{ left:0; width:100%; } 100%{ left:100%; width:0; } }
@-webkit-keyframes anm-cont{ 0%{ opacity:0; } 100%{ opacity:1; } }
@keyframes anm-cont{ 0%{ opacity:0; } 100%{ opacity:1; } }


/* 1025 - 1280 */
@media only screen and (min-width:1025px) and (max-width:1280px){
.container{ width:960px; padding-left:1.5rem; padding-right:1.5rem; }
.container-lg,
.container-fluid,
.container-xl{ width:100%; padding-left:1.5rem; padding-right:1.5rem; }
.local-nav .local-nav-container{ padding-left:1.5rem; padding-right:1.5rem; }
}


/* iPad 3, 4, Air, mini Retina 768 - 1024 [portrait&landscape] */
@media only screen and (min-width:768px) and (max-width:1024px){
.container-lg,
.container-fluid,
.container-xl{ width:100%; padding-left:2rem; padding-right:2rem; max-width:90%; }
.container{ width:90%; max-width:90%; }
.btn{ letter-spacing:0; }
.content-title{ margin-bottom:12px; }
.marquee-section .marquee{ padding:36px 16px 36px; }
.marquee-section .marquee-headline{ font-size:1.929em; }
.cta-section .container{ padding-top:72px; padding-bottom:72px; }
.cta-section .btn{ font-size:0.875rem; }
.cta-section .cta-contact a.btn{ padding-left:48px; padding-right:48px; }
.cta-section .cta-announcement .item.title{ font-size:0.875rem; }
.cta-section .cta-announcement .item.telephone{ font-size:1.929em; }
.nav-section{ margin-top:12px; }
.local-header{ padding:18px 0 12px; position:relative; border-bottom:1px solid rgba(0,0,0,.1); }
.local-header .container{ padding-left:12px; padding-right:12px; }
.local-header.no-line{ border-bottom:none; padding-bottom:0; }
.local-header .title .main-title{ font-size:1.570.875rem; }
.local-header .title .main-title a{ text-decoration:none; }
.local-header .title .sub-title{ font-size:1rem; font-weight:700; color:#7a7a7a; margin-top:10px; }
.local-nav .local-nav-container{ padding-left:1.5rem; padding-right:1.5rem; }
.local-nav .ln-item.active .ln-item-link{ font-weight:500; white-space:nowrap; }
.local-nav .ln-item-wrap li:not(.ln-brand):not(.ln-mobilenav):not(.ln-cta){ display:none }
.local-nav .ln-left{ -webkit-box-flex:5; -webkit-flex:5; -ms-flex:5; flex:5; }
.local-nav .ln-mobilenav{ display:flex; }
.local-nav .ln-brand a.ln-item-link{ font-size:1.125rem; }
.local-nav .ln-cta{ font-size:0.857em; padding-left:0; }
.local-nav .ln-cta a:not(:last-child){ margin-right:3px; }
.local-nav .btn{ padding:6px 12px; letter-spacing:0; }
.local-mobilenav .container{ padding-left:30px; padding-right:30px; }
.local-headline .title .main-title{ font-size:1.929em; }
.local-headline .view-archive{ font-size:0.857em; }
.news-list .entry .posted-on{ white-space:nowrap; font-size:0.929em; width:20%; }
.readmore a{ font-size:1rem; }
.breadcrumb{ margin-left:-20px; }
.breadcrumb>li{ padding:18px 20px; }
.breadcrumb>li+li:before{ height:57px; }
.breadcrumb>li>a{ max-width:180px; }
.tags{ font-size:0.857em; }

.scroll-indicator .fullscreen{ display:none; }
.scroll-indicator .mobile{ display:block; }
.news-list .entry .meta{ flex-direction:column-reverse; width:20%; }
.news-list .entry .meta .posted-on{ margin-top:6px; }
.news-list .entry .meta .posted-on,
.news-list .entry .meta .category{ width:100%; }
.news-list .entry .meta .category span{ font-size:0.714em; }
.card-list .entries .row{ margin-left:-12px; margin-right:-12px; }
.card-list .entries .row .col{ padding:0 12px; }
.copy .copy-header .copy-title{ font-size:2.214em; word-break:auto-phrase; }
.copy.copy-subsection .copy-header .copy-title{ font-size:1.714em; }
.copy.copy-accent .copy-header .copy-title{ font-size:1.125rem; }
.ticket-body{ grid-template-columns:17.5% 65% 17.5%; }
.ticket-body-data .big{ font-size:0.875rem; }
.ticket-body-logo .logo{ width:24px; height:21px; }
}

 /* 320 - 768 */
@media only screen and (min-width:320px) and (max-width:767px){
.\@xs\:order-2{ order:2; }
.row,
.row.row-layout{ margin-left:0; margin-right:0; }
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{ padding-right:0; padding-left:0; }
.row.row-layout .col-layout{ padding-left:0; padding-right:0; }
.container,
.container-lg,
.container-fluid,
.container-xl{ width:100%; max-width:100%; padding-left:1.5rem; padding-right:1.5rem; }
.spbr{ display:inline; }
.content-title{ margin-bottom:12px; }
.nav-section{ margin-top:12px; }
.marquee-section .marquee{ padding:48px 16px 48px; }
.marquee-section .marquee-headline{ font-size:2em; }
.cta-ribbon{ font-size:0.857em; }
.cta-ribbon a{ display:block; }
.content-container{ padding-top:0; }
.content-section .section-title{ margin-bottom:24px; text-align:center; }
.local-header{ padding:18px 0; position:relative; border-bottom:1px solid rgba(0,0,0,.1); }
.local-header .container{ padding-left:12px; padding-right:12px; }
.local-header.no-line{ border-bottom:none; padding-bottom:0; }
.local-header .title .main-title{ font-size:1.429em; }
.local-header .title .main-title a{ text-decoration:none; }
.local-header .title .sub-title{ font-size:0.875rem; }
.local-headline{ margin-bottom:30px; }
.local-headline .title .main-title{ font-size:1.714em; }
.local-headline .title .sub-title{ font-size:1rem; margin-top:6px; }
.local-headline .text{ width:100%; margin-top:8px; }
.local-nav{ height:3.375rem; }
.local-nav .local-nav-container{ padding-left:1.5rem; padding-right:1.5rem; }
.local-nav .ln-item.active .ln-item-link{ font-weight:500; white-space:nowrap; }
.local-nav .ln-item-wrap li:not(.ln-brand):not(.ln-mobilenav):not(.ln-cta){ display:none }
.local-nav .ln-left{ -webkit-box-flex:5; -webkit-flex:5; -ms-flex:5; flex:5; }
.local-nav .ln-mobilenav{ display:flex; }
.local-nav .ln-brand a.ln-item-link{ font-size:1.125rem; }
.local-nav .ln-cta{ padding-left:0; }
.local-nav .ln-cta a:not(:last-child){ margin-right:3px; }
.local-nav .btn{ padding:4px 8px; letter-spacing:0; }
.local-mobilenav .container{ padding-left:30px; padding-right:30px; }
.local-mobilecta{ display:block; }
.local-content-nav{ display:none; }
.news-list ul li a{ font-size:1rem; padding:18px 0; }
.news-list ul li a .icon{ display:none; }
.news-list .entry .entry-link{ flex-direction:column; }
.news-list .entry .meta{ flex-direction:row-reverse; justify-content:space-between; align-items:center; width:100%; margin-right:0; margin-bottom:12px; }
.news-list .entry .meta .posted-on{ margin:0; width:auto; color:#888; }
.news-list .entry .meta .posted-on,
.news-list .entry .meta .category{ display:inline-block; }
.news-list .entry .meta .category{ width:auto; }
.news-list .entry .meta .category span{ font-size:0.714em; padding-left:10px; padding-right:10px; }
.news-list .entry .entry-title{ width:100%; }
.card-list .entries .row .col{ margin-bottom:18px; }
.readmore.left{ justify-content:center; }
.readmore a{ font-size:1rem; }
.tags{ font-size:0.857em; }
.entries .entry-item .entry,
.entries .entry-content .entry-title{ height:auto !important; }
.entries .entry-content .entry-title{ font-size:1.125rem; margin-bottom:12px; }
.category-list .category a{ padding:24px; }
.category-list .category i{ width:48px; height:48px; }
.contact .wpcf7-form{ margin-bottom:0; }
.contact .form-group{ margin-bottom:30px; }
.contact input.form-control,
.contact select.form-control{ height:40px; }
.contact .form-group label,
.contact input.form-control,
.contact textarea.form-control,
.contact select.form-control,
.contact .wpcf7-list-item,
.contact .wpcf7-validation-errors{ font-size:0.875rem; }
.scroll-indicator .fullscreen{ display:none; }
.scroll-indicator .mobile{ display:block; }
.section-division p{ font-size:1.429em; }
.section-division:before,
.section-division:after{ width:30px; }
.ticket-body{ grid-template-columns:17.5% 65% 17.5%; }
.ticket-body-data .big{ font-size:0.875rem; }
.ticket-body-logo .logo{ width:24px; height:21px; }
}



/*
 * Color Chart
 * https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
 *
 * Light Theme
 * Blue     #007aff 
 * Green    #34c759
 * Indigo   #5856d6
 * Orange   #ff9500
 * Pink     #ff2d55
 * Purple   #af52de
 * Red      #ff3b30
 * Teal     #5ac8fa
 * Yellow   #ffcc00
 *
 * Dark Theme
 * Blue     #0a84ff
 * Green    #30d158
 * Indigo   #5e5ce6
 * Orange   #ff9f0a
 * Pink     #ff375f
 * Purple   #bf5af2
 * Red      #ff453a
 * Teal     #64d2ff
 * Yellow   #ffd60a
 */