@font-face {
    font-family: 'ScriptoramaTradeshowJF';
    src: url('/item/s/v2/fonts/ScriptoramaTradeshowJF.svg#ScriptoramaTradeshowJF') format('svg'),
       url('/item/s/v2/fonts/ScriptoramaTradeshowJF.ttf') format('truetype'),
       url('/item/s/v2/fonts/ScriptoramaTradeshowJF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

a.link, a.link:hover {
    text-decoration: underline;
}

textarea {
    resize: none;
}


[type=hidden]:focus,
[type=text]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=url]:focus,
[type=email]:focus,
[type=password]:focus,
[type=datetime]:focus,
[type=date]:focus,
[type=month]:focus,
[type=week]:focus,
[type=time]:focus,
[type=datetime-local]:focus,
[type=number]:focus,
select:focus,
textarea:focus {
    border-color: var(--color__link) !important;
    box-shadow: inset 0 0 1px var(--color__link);
    outline: none;
}

/*
    schematic class naming

    {selector}__{context}
*/

/* header, footer and body */
.sub-content-inner {
    margin: 0 auto;
    max-width: var(--sub-content--max-width);
}

.bg-white {
    background-color: var(--color__white);
}

.bg-grey {
    background-color: var(--color__grey);
}

.bg-lighter-grey {
    background-color: var(--color__lighter-grey);
}

.nav-tab .ps--active-x > .ps__rail-x,
.nav-tab .ps--active-y > .ps__rail-y {
    display: none;
}

.ps--active-y ~ .ps-fader-bottom {
    background: linear-gradient(0deg, rgba(0,0,0,0.3603816526610645) 25%, rgba(0,0,0,0) 100%);
    height: 7px;
}

.ps--active-y ~ .ps-fader-top {
    background: linear-gradient(180deg, rgba(0,0,0,0.3603816526610645) 25%, rgba(0,0,0,0) 100%);
    height: 7px;
}

.ps--active-x ~ .ps-fader-left {
    background: linear-gradient(90deg, rgba(0,0,0,0.3603816526610645) 25%, rgba(0,0,0,0) 100%);
    width: 7px;
}

.ps--active-x ~ .ps-fader-right {
    background: linear-gradient(270deg, rgba(0,0,0,0.3603816526610645) 25%, rgba(0,0,0,0) 100%);
    width: 7px;
}

.nav-tab .ps--active-x ~ .ps-fader-left {
    background: none;
    border-top-left-radius: var(--button--border-radius);
    border-bottom-left-radius: var(--button--border-radius);
    box-shadow: inset 11px 0px 12px -12px rgb(0 0 0 / 50%);
    width: 14px;
}

.nav-tab .ps--active-x ~ .ps-fader-right {
    background: none;
    border-top-right-radius: var(--button--border-radius);
    border-bottom-right-radius: var(--button--border-radius);
    box-shadow: inset -11px 0px 12px -12px rgb(0 0 0 / 50%);
    width: 14px;
}

/* extend fs icons */
.md-icons--m {
    width: 48px;
    height: 48px;
    vertical-align: middle;
    margin: 0 5px;
    object-fit: contain;
}

.md-icons--l {
    width: 72px;
    height: 72px;
    vertical-align: middle;
    margin: 0 5px;
    object-fit: contain;
}

/* Content overflow */
.content-overflow {
    position: relative;
    overflow: scroll;
}

.content-overflow__prev {
    display: block;
    position: absolute;
    top: 30%;
    left: 0;
    background-color: red;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: url('data:image/svg+xml,%3Csvg class="svg" width="13" height="12" viewBox="0 0 13 12" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M3.646 5.354l-3-3 .708-.708L4 4.293l2.646-2.647.708.708-3 3L4 5.707l-.354-.353z" fill-rule="evenodd" fill-opacity="1" stroke="none" transform="rotate(270 7 5) scale(1.4)"%3E%3C/path%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: 53% 50%;
    z-index: 1;
}

.content-overflow__next {
    display: block;
    position: absolute;
    top: 30%;
    left: 0;
    background-color: red;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: url('data:image/svg+xml,%3Csvg class="svg" width="13" height="12" viewBox="0 0 13 12" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M3.646 5.354l-3-3 .708-.708L4 4.293l2.646-2.647.708.708-3 3L4 5.707l-.354-.353z" fill-rule="evenodd" fill-opacity="1" stroke="none" transform="rotate(270 7 5) scale(1.4)"%3E%3C/path%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: 53% 50%;
    z-index: 1;
}

.content-overflow__row:before,
.content-overflow__row:after {
    content: '';
    display: block;
}

.content-overflow__row {
    display: inline-flex;
    margin-left: calc(var(--content-row--spacing) * -1);
    margin-right: calc(var(--content-row--spacing) * -1);
}

.content-overflow__column {
    width: 16.5vw;
    padding-left: var(--content-row--spacing);
    padding-right: var(--content-row--spacing);
}

@media screen and (min-width: 1024px) {
    .content-overflow__column {
        width: calc(var(--content--max-width) / 5.5);
    }
}

/* List */
.list-bullet {
    list-style-type: none;
    margin-left: 20px;
}

.list-bullet__item {
    text-indent: -5px;
}

.list-bullet__item:before {
    content: '・';
    margin-left: -9px;
    font-size: 1.1rem;
}

.list-bullet li {
    margin-bottom: 10px;
}

.list-number {
    list-style-type: decimal;
    margin-left: 20px;
}

.list-number li {
    margin-bottom: 10px;
}

.list-number__item {
    text-indent: 0;
}

.list-align {
    position: relative;
    left: -5px;
}

/* form input and buttons */
.form-group {
    margin-bottom: var(--form-group--margin-bottom);
}

.form-label {
    font-size: var(--font-base__size);
    margin-bottom: var(--margin--md);
}

.form-control {
    height: var(--input--height);
    border: none;
    padding: var(--input--padding);
    background-color: var(--color__white);
    border-top-left-radius: var(--input--border-radius);
    border-top-right-radius: var(--input--border-radius);
    border-bottom-left-radius: var(--input--border-radius);
    border-bottom-right-radius: var(--input--border-radius);
    font-size: var(--font-base__size);
}

textarea.form-control {
    height: auto;
}

select.form-control {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='13' transform='scale(1.2) translate(0, 3)'%3E%3Cpath d='m6.5,4 4-4 4,4zm0,1 4,4 4-4z'/%3E%3C/svg%3E");
    fill: var(--color__black);
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 49.5%;
}

.fs-c-checkbox__checkMark {
    border: none;
}

.fs-c-checkbox__checkMark::before {
    content: none
}

.fs-c-checkbox__checkMark,
.form-checkbox {
    padding: 0;
    height: 18px;
    width: 18px;
    margin-right: var(--margin__sm);
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--color__shady-grey);
    background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16px' height='16px'%3E%3Cpath d='M 20.292969 5.2929688 L 9 16.585938 L 4.7070312 12.292969 L 3.2929688 13.707031 L 9 19.414062 L 21.707031 6.7070312 L 20.292969 5.2929688 z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-bottom;
}

.fs-c-checkbox__checkbox:checked + label > .fs-c-checkbox__checkMark,
.form-checkbox:checked {
    background-color: var(--color__link);
    background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16px' height='16px'%3E%3Cpath d='M 20.292969 5.2929688 L 9 16.585938 L 4.7070312 12.292969 L 3.2929688 13.707031 L 9 19.414062 L 21.707031 6.7070312 L 20.292969 5.2929688 z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.fs-c-radio__radioMark {
    border: none;
}

.fs-c-radio__radioMark::before {
    content: none
}

.fs-c-radio__radioMark,
.form-radiobox {
    padding: 0;
    height: 18px;
    width: 18px;
    margin-right: var(--margin__sm);
    cursor: pointer;
    border-radius: 50%;
    border-width: 4px;
    border-style: solid;
    border-color: var(--color__shady-grey);
    background-color: var(--color__white);
    vertical-align: text-bottom;
}

.fs-c-radio__radiobox:checked + label > .fs-c-radio__radioMark,
.form-radiobox:checked {
    background-color: var(--color__link);
}

.was-validated input.form-control[type=text]:invalid, .was-validated input.form-control[type=email]:invalid, .was-validated input.form-control[type=tel]:invalid, .was-validated textarea.form-control:invalid, .was-validated select:invalid, .was-validated .form-label-radio-checkbox.invalid, .was-validated .form-control-file:invalid {
    border-color: #e53935 !important;
    box-shadow: 0 0 0 0 #e53935 !important;
    border-style: solid;
    border-width: 1px;
}

.invalid-feedback {
    display: none;
    margin-top: .25rem;
    font-size: .875rem;
    color: #e53935;
}

.btn:hover {
    outline: none;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color__link);
    color: var(--color__white) !important;
}

.btn-success {
    background-color: var(--color__green);
    color: var(--color__white) !important;
}

.btn-success__on-hover:hover, .btn-success:hover {
    background-color: var(--color__dark-green);
}

/* search condition tag */
.tag {
    height: var(--tag--height);
    display: inline-block;
    border-top-left-radius: var(--tag--border-radius);
    border-top-right-radius: var(--tag--border-radius);
    border-bottom-left-radius: var(--tag--border-radius);
    border-bottom-right-radius: var(--tag--border-radius);
    border-width: var(--tag--border--width);
    border-style: solid;
    border-color: var(--color__black);
    overflow: hidden;
}

.tag__text {
    padding: var(--tag--padding);
    font-size: var(--tag--font-size);
    display: inline-block;
}

.tag__delete {
    height: var(--tag--height);
    width: var(--tag-delete--icon-width);
    display: inline-block;
    padding: var(--tag-delete--padding);
    cursor: pointer;
}

.tag__delete:before {
    content: url('data:image/svg+xml,%3Csvg class="svg" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M5 5V0h1v5h5v1H6v5H5V6H0V5h5z" fill-rule="nonzero" fill-opacity="1" fill="%23000" stroke="none" transform="rotate(45, 4, 9)"%3E%3C/path%3E%3C/svg%3E');
}

/* table for multiple column
Layout in pc/mobile:
    | col1 | col2 | col3 |
    | col1 | col2 | col3 |
    | col1 | col2 | col3 |
    | col1 | col2 | col3 |
*/
.table {
    width: 100%;
}

.table-valign-top th,
.table-valign-top th {
    vertical-align: top;
}

.table thead th {
    color: var(--color__grey);
}

.table thead th,
.table thead td {
    border-bottom-width: 3px;
}

.table th,
.table td {
    padding: var(--padding__md);
    border-bottom-color: var(--color__light-grey);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    vertical-align: middle;
}

.table th:first-child,
.table td:first-child {
    padding-left: 0;
}

.table th:last-child,
.table td:last-child {
    padding-right: 0;
}

.table-sm th,
.table-sm td {
    padding: var(--padding__sm);
}

/* data label and description
Layout in pc:
    | label1 ......... description1 |
    | label2 ......... description2 |
    | label3 ......... description4 |
    | label4 ......... description5 |

Layout in mobile:
    ------------
    label1
    description1
    ------------
    label2
    description2
    ------------
    label2
    description2
    ------------
*/
.data-list {
    border-bottom-color: var(--color__light-grey);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.data-list:first-child {
    border-top-color: var(--color__light-grey);
    border-top-style: solid;
    border-top-width: 1px;
}

.data-list-first {
    border-top-color: var(--color__light-grey);
    border-top-style: solid;
    border-top-width: 1px;
}

.data-list.list-row {
    flex-direction: row;
}

@media screen and (min-width: 769px) {
    .data-list.list-row-md {
        flex-direction: row;
    }

    .data-list.list-column-md {
        flex-direction: column;
    }
}

@media screen and (min-width: 1024px) {
    .data-list.list-row-lg {
        flex-direction: row;
    }

    .data-list.list-column-lg {
        flex-direction: column;
    }
}

.data-list dt,
.data-list .data-term {
    flex: 1;
    padding-top: var(--padding__md);
    padding-bottom: var(--padding__md);
    padding-right: var(--padding__md);
    color: var(--color__grey);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.data-list dd,
.data-list .data-description {
    padding-top: var(--padding__md);
    padding-bottom: var(--padding__md);
    color: var(--color__black);
}

/* width */
.width-100 { width: 100% !important; }
.width-90 { width: 90% !important; }
.width-80 { width: 80% !important; }
.width-70 { width: 70% !important; }
.width-60 { width: 60% !important; }
.width-50 { width: 50% !important; }
.width-40 { width: 40% !important; }
.width-30 { width: 30% !important; }
.width-20 { width: 20% !important; }
.width-10 { width: 10% !important; }
.width-auto { width: auto !important; }

.max-width-100 { max-width: 100% !important; }
.max-width-90 { max-width: 90% !important; }
.max-width-80 { max-width: 80% !important; }
.max-width-70 { max-width: 70% !important; }
.max-width-60 { max-width: 60% !important; }
.max-width-50 { max-width: 50% !important; }
.max-width-40 { max-width: 40% !important; }
.max-width-30 { max-width: 30% !important; }
.max-width-20 { max-width: 20% !important; }
.max-width-10 { max-width: 10% !important; }

@media screen and (min-width: 769px) {
    .width-md-100 { width: 100% !important; }
    .width-md-90 { width: 90% !important; }
    .width-md-80 { width: 80% !important; }
    .width-md-70 { width: 70% !important; }
    .width-md-60 { width: 60% !important; }
    .width-md-50 { width: 50% !important; }
    .width-md-40 { width: 40% !important; }
    .width-md-30 { width: 30% !important; }
    .width-md-20 { width: 20% !important; }
    .width-md-10 { width: 10% !important; }
    .width-md-auto { width: auto !important; }

    .max-width-md-100 { max-width: 100% !important; }
    .max-width-md-90 { max-width: 90% !important; }
    .max-width-md-80 { max-width: 80% !important; }
    .max-width-md-70 { max-width: 70% !important; }
    .max-width-md-60 { max-width: 60% !important; }
    .max-width-md-50 { max-width: 50% !important; }
    .max-width-md-40 { max-width: 40% !important; }
    .max-width-md-30 { max-width: 30% !important; }
    .max-width-md-20 { max-width: 20% !important; }
    .max-width-md-10 { max-width: 10% !important; }
}

@media screen and (min-width: 1024px) {
    .width-lg-100 { width: 100% !important; }
    .width-lg-90 { width: 90% !important; }
    .width-lg-80 { width: 80% !important; }
    .width-lg-70 { width: 70% !important; }
    .width-lg-60 { width: 60% !important; }
    .width-lg-50 { width: 50% !important; }
    .width-lg-40 { width: 40% !important; }
    .width-lg-30 { width: 30% !important; }
    .width-lg-20 { width: 20% !important; }
    .width-lg-10 { width: 10% !important; }
    .width-lg-auto { width: auto !important; }

    .max-width-lg-100 { max-width: 100% !important; }
    .max-width-lg-90 { max-width: 90% !important; }
    .max-width-lg-80 { max-width: 80% !important; }
    .max-width-lg-70 { max-width: 70% !important; }
    .max-width-lg-60 { max-width: 60% !important; }
    .max-width-lg-50 { max-width: 50% !important; }
    .max-width-lg-40 { max-width: 40% !important; }
    .max-width-lg-30 { max-width: 30% !important; }
    .max-width-lg-20 { max-width: 20% !important; }
    .max-width-lg-10 { max-width: 10% !important; }
}

/* border */
.border-bottom {
    border-bottom-width: var(--border--width);
    border-bottom-style: solid;
    border-bottom-color: var(--color__shady-grey);
}

.border-left {
    border-left-width: var(--border--width);
    border-left-style: solid;
    border-left-color: var(--color__shady-grey);
}

.border-right {
    border-right-width: var(--border--width);
    border-right-style: solid;
    border-right-color: var(--color__shady-grey);
}

/* when header is transformed */
.g-header-menu__open:before,
.g-header__open:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    z-index: 2;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255, .7);
}

.g-header__open .g-header .g-nav-offset__items-right {
    width: 100%;
}
.g-header__open .g-header .g-nav-search__wrapper {
    background-color: var(--color__white);
    right: 0;
    left: 0;
    z-index: 2;
    width: var(--content--max-width);
}

.g-header__open .g-header .g-nav-search__inner {
    width: var(--input-search-open--max-width);
}

.g-header__open .g-header .g-header-icons__block {
    opacity: 0;
    z-index: 1;
}

.g-header__open .g-header .g-nav-search-menu {
    display: block;
}

.g-header__open .g-header .g-nav-search-menu__inner {
    max-width: var(--input-search-open--max-width);
    flex-grow: 1;
}

.g-header__open .g-header .g-nav-search__logo,
.g-header__open .g-header .g-nav-search__close {
    opacity: 1;
    z-index: 2;
}

/*
    primary menu
*/
.header-menu__dropdown {
    max-height: calc(100vh - var(--header--height));
    overflow: auto;
}

/*
    secondary menu
*/
.g-nav-search-menu__heading {
    color: var(--color__shady-grey);
}
.g-nav-search-menu__list-item a {
    color: inherit;
}
.g-nav-search-menu__inner {
    margin: 0 auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.g-nav-search-menu__inner::-webkit-scrollbar {
    width: 0;
    background: transparent;
    display: none;
}
.g-nav-search-menu__filter {
    font-size: 0.8rem;
    text-align: right;
}

.g-nav-search-menu__list {
    padding-bottom: 2rem;
    display: block;
}

/* mobile */
.mobile-content {
    display: none;
}

hr {
    border: 1px solid var(--color__light-grey);
}


/* link */
.link-color {
    color: var(--color__link) !important;
}

.fade-in-scroll {
    opacity: 0;
}