@charset "UTF-8";

/* -------------------------------------------------------------------------------- */
/* Reset                                                                            */
/* -------------------------------------------------------------------------------- */
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http: //richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display: block;
}

nav ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote: before, blockquote: after,
q: before, q: after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000; 
    font-style: normal;
    font-weight: bold;
}

del {
    text-decoration:  line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
 
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
 
button,
input { /* 1 */
  overflow: visible;
}
 
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
 
button,
select { /* 1 */
  text-transform: none;
}
 
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
 
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}


/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}

i {
    font-style: normal;
}


body .protip-container.protip-mixin--css-no-transition {
  transition: all 0s; }

body .protip-container.protip-mixin--css-bold {
  font-weight: bold; }

body .protip-container.protip-mixin--css-italic {
  font-style: italic; }

body .protip-container.protip-mixin--css-no-style {
  background: none;
  color: inherit; }
  body .protip-container.protip-mixin--css-no-style .protip-arrow {
    display: none; }

.protip-container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box; }
  .protip-container > i {
    position: absolute;
    left: 10px; }
    .protip-container > i + div {
      padding-left: 20px; }

.protip-arrow {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent; }

.protip-show {
  opacity: 1;
  pointer-events: auto; }

/* Include skins here which you would like to use */
.protip-skin-default--size-tiny {
  padding: 8px;
  font-size: 10px;
  border-radius: 3px; }

.protip-skin-default--size-tiny[data-pt-position="top-left"] .protip-arrow,
.protip-skin-default--size-tiny[data-pt-position="top"] .protip-arrow,
.protip-skin-default--size-tiny[data-pt-position="top-right"] .protip-arrow {
  top: 100%;
  left: auto;
  margin: 0 0 0 -4px;
  border-width: 4px 4px 0 4px; }

.protip-skin-default--size-tiny[data-pt-position="top-left"] .protip-arrow {
  left: 20px; }

.protip-skin-default--size-tiny[data-pt-position="top"] .protip-arrow {
  left: 50%; }

.protip-skin-default--size-tiny[data-pt-position="top-right"] .protip-arrow {
  left: auto;
  right: 20px;
  margin-right: -4px; }

.protip-skin-default--size-tiny[data-pt-position="bottom-left"] .protip-arrow,
.protip-skin-default--size-tiny[data-pt-position="bottom"] .protip-arrow,
.protip-skin-default--size-tiny[data-pt-position="bottom-right"] .protip-arrow {
  top: -4px;
  left: auto;
  margin: 0 0 0 -4px;
  border-width: 0 4px 4px 4px; }

.protip-skin-default--size-tiny[data-pt-position="bottom-left"] .protip-arrow {
  left: 20px; }

.protip-skin-default--size-tiny[data-pt-position="bottom"] .protip-arrow {
  left: 50%; }

.protip-skin-default--size-tiny[data-pt-position="bottom-right"] .protip-arrow {
  left: auto;
  right: 20px;
  margin-right: -4px; }

.protip-skin-default--size-tiny[data-pt-position="left-top"] .protip-arrow,
.protip-skin-default--size-tiny[data-pt-position="left"] .protip-arrow,
.protip-skin-default--size-tiny[data-pt-position="left-bottom"] .protip-arrow {
  top: auto;
  left: 100%;
  margin: -4px 0 0 0;
  border-width: 4px 0 4px 4px; }

.protip-skin-default--size-tiny[data-pt-position="left-top"] .protip-arrow {
  top: 20px; }

.protip-skin-default--size-tiny[data-pt-position="left"] .protip-arrow {
  top: 50%; }

.protip-skin-default--size-tiny[data-pt-position="left-bottom"] .protip-arrow {
  top: auto;
  bottom: 20px;
  margin-bottom: -4px; }

.protip-skin-default--size-tiny[data-pt-position="right-top"] .protip-arrow,
.protip-skin-default--size-tiny[data-pt-position="right"] .protip-arrow,
.protip-skin-default--size-tiny[data-pt-position="right-bottom"] .protip-arrow {
  top: auto;
  right: 100%;
  margin: -4px 0 0 0;
  border-width: 4px 4px 4px 0; }

.protip-skin-default--size-tiny[data-pt-position="right-top"] .protip-arrow {
  top: 20px; }

.protip-skin-default--size-tiny[data-pt-position="right"] .protip-arrow {
  top: 50%; }

.protip-skin-default--size-tiny[data-pt-position="right-bottom"] .protip-arrow {
  top: auto;
  bottom: 20px;
  margin-bottom: -4px; }

.protip-skin-default--size-tiny[data-pt-position="top-left-corner"] {
  border-bottom-right-radius: 0; }
  .protip-skin-default--size-tiny[data-pt-position="top-left-corner"] .protip-arrow {
    top: 100%;
    left: 100%;
    margin: 0 0 0 -4px;
    border-width: 0 4px 4px 0; }

.protip-skin-default--size-tiny[data-pt-position="top-right-corner"] {
  border-bottom-left-radius: 0; }
  .protip-skin-default--size-tiny[data-pt-position="top-right-corner"] .protip-arrow {
    top: 100%;
    left: -4px;
    margin: 0 0 0 4px;
    border-width: 4px 4px 0 0; }

.protip-skin-default--size-tiny[data-pt-position="bottom-left-corner"] {
  border-top-right-radius: 0; }
  .protip-skin-default--size-tiny[data-pt-position="bottom-left-corner"] .protip-arrow {
    top: -4px;
    left: 100%;
    margin: 0 0 0 -4px;
    border-width: 0 0 4px 4px; }

.protip-skin-default--size-tiny[data-pt-position="bottom-right-corner"] {
  border-top-left-radius: 0; }
  .protip-skin-default--size-tiny[data-pt-position="bottom-right-corner"] .protip-arrow {
    top: 0;
    left: -4px;
    margin: -4px 0 0 4px;
    border-width: 4px 0 0 4px; }

.protip-skin-default--scheme-pro.protip-container {
  color: #000;
  background: #da2e2b;
  font-family: sans-serif;
  transition: opacity 0.2s ease-out; }

.protip-skin-default--scheme-pro[data-pt-position="top-left"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="top"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="top-right"] .protip-arrow {
  border-top-color: #da2e2b; }

.protip-skin-default--scheme-pro[data-pt-position="bottom-left"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="bottom"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="bottom-right"] .protip-arrow {
  border-bottom-color: #da2e2b; }

.protip-skin-default--scheme-pro[data-pt-position="left-top"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="left"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="left-bottom"] .protip-arrow {
  border-left-color: #da2e2b; }

.protip-skin-default--scheme-pro[data-pt-position="right-top"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="right"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="right-bottom"] .protip-arrow {
  border-right-color: #da2e2b; }

.protip-skin-default--scheme-pro[data-pt-position="top-left-corner"] .protip-arrow {
  border-right-color: #da2e2b; }

.protip-skin-default--scheme-pro[data-pt-position="top-right-corner"] .protip-arrow {
  border-top-color: #da2e2b; }

.protip-skin-default--scheme-pro[data-pt-position="bottom-left-corner"] .protip-arrow {
  border-bottom-color: #da2e2b; }

.protip-skin-default--scheme-pro[data-pt-position="bottom-right-corner"] .protip-arrow {
  border-left-color: #da2e2b; }

.protip-skin-default--scheme-blue.protip-container {
  color: #fff;
  background: #336699;
  font-family: sans-serif;
  transition: opacity 0.2s ease-out; }

.protip-skin-default--scheme-blue[data-pt-position="top-left"] .protip-arrow,
.protip-skin-default--scheme-blue[data-pt-position="top"] .protip-arrow,
.protip-skin-default--scheme-blue[data-pt-position="top-right"] .protip-arrow {
  border-top-color: #336699; }

.protip-skin-default--scheme-blue[data-pt-position="bottom-left"] .protip-arrow,
.protip-skin-default--scheme-blue[data-pt-position="bottom"] .protip-arrow,
.protip-skin-default--scheme-blue[data-pt-position="bottom-right"] .protip-arrow {
  border-bottom-color: #336699; }

.protip-skin-default--scheme-blue[data-pt-position="left-top"] .protip-arrow,
.protip-skin-default--scheme-blue[data-pt-position="left"] .protip-arrow,
.protip-skin-default--scheme-blue[data-pt-position="left-bottom"] .protip-arrow {
  border-left-color: #336699; }

.protip-skin-default--scheme-blue[data-pt-position="right-top"] .protip-arrow,
.protip-skin-default--scheme-blue[data-pt-position="right"] .protip-arrow,
.protip-skin-default--scheme-blue[data-pt-position="right-bottom"] .protip-arrow {
  border-right-color: #336699; }

.protip-skin-default--scheme-blue[data-pt-position="top-left-corner"] .protip-arrow {
  border-right-color: #336699; }

.protip-skin-default--scheme-blue[data-pt-position="top-right-corner"] .protip-arrow {
  border-top-color: #336699; }

.protip-skin-default--scheme-blue[data-pt-position="bottom-left-corner"] .protip-arrow {
  border-bottom-color: #336699; }

.protip-skin-default--scheme-blue[data-pt-position="bottom-right-corner"] .protip-arrow {
  border-left-color: #336699; }

.protip-skin-square--size-tiny {
  padding: 8px;
  font-size: 10px; }

.protip-skin-square--size-tiny[data-pt-position="top-left"] .protip-arrow,
.protip-skin-square--size-tiny[data-pt-position="top"] .protip-arrow,
.protip-skin-square--size-tiny[data-pt-position="top-right"] .protip-arrow {
  top: 100%;
  left: auto;
  margin: 0 0 0 -4px;
  border-width: 4px 4px 0 4px; }

.protip-skin-square--size-tiny[data-pt-position="top-left"] .protip-arrow {
  left: 20px; }

.protip-skin-square--size-tiny[data-pt-position="top"] .protip-arrow {
  left: 50%; }

.protip-skin-square--size-tiny[data-pt-position="top-right"] .protip-arrow {
  left: auto;
  right: 20px;
  margin-right: -4px; }

.protip-skin-square--size-tiny[data-pt-position="bottom-left"] .protip-arrow,
.protip-skin-square--size-tiny[data-pt-position="bottom"] .protip-arrow,
.protip-skin-square--size-tiny[data-pt-position="bottom-right"] .protip-arrow {
  top: -4px;
  left: auto;
  margin: 0 0 0 -4px;
  border-width: 0 4px 4px 4px; }

.protip-skin-square--size-tiny[data-pt-position="bottom-left"] .protip-arrow {
  left: 20px; }

.protip-skin-square--size-tiny[data-pt-position="bottom"] .protip-arrow {
  left: 50%; }

.protip-skin-square--size-tiny[data-pt-position="bottom-right"] .protip-arrow {
  left: auto;
  right: 20px;
  margin-right: -4px; }

.protip-skin-square--size-tiny[data-pt-position="left-top"] .protip-arrow,
.protip-skin-square--size-tiny[data-pt-position="left"] .protip-arrow,
.protip-skin-square--size-tiny[data-pt-position="left-bottom"] .protip-arrow {
  top: auto;
  left: 100%;
  margin: -4px 0 0 0;
  border-width: 4px 0 4px 4px; }

.protip-skin-square--size-tiny[data-pt-position="left-top"] .protip-arrow {
  top: 20px; }

.protip-skin-square--size-tiny[data-pt-position="left"] .protip-arrow {
  top: 50%; }

.protip-skin-square--size-tiny[data-pt-position="left-bottom"] .protip-arrow {
  top: auto;
  bottom: 20px;
  margin-bottom: -4px; }

.protip-skin-square--size-tiny[data-pt-position="right-top"] .protip-arrow,
.protip-skin-square--size-tiny[data-pt-position="right"] .protip-arrow,
.protip-skin-square--size-tiny[data-pt-position="right-bottom"] .protip-arrow {
  top: auto;
  right: 100%;
  margin: -4px 0 0 0;
  border-width: 4px 4px 4px 0; }

.protip-skin-square--size-tiny[data-pt-position="right-top"] .protip-arrow {
  top: 20px; }

.protip-skin-square--size-tiny[data-pt-position="right"] .protip-arrow {
  top: 50%; }

.protip-skin-square--size-tiny[data-pt-position="right-bottom"] .protip-arrow {
  top: auto;
  bottom: 20px;
  margin-bottom: -4px; }

.protip-skin-square--size-tiny[data-pt-position="top-left-corner"] {
  border-bottom-right-radius: 0; }
  .protip-skin-square--size-tiny[data-pt-position="top-left-corner"] .protip-arrow {
    top: 100%;
    left: 100%;
    margin: 0 0 0 -4px;
    border-width: 0 4px 4px 0; }

.protip-skin-square--size-tiny[data-pt-position="top-right-corner"] {
  border-bottom-left-radius: 0; }
  .protip-skin-square--size-tiny[data-pt-position="top-right-corner"] .protip-arrow {
    top: 100%;
    left: -4px;
    margin: 0 0 0 4px;
    border-width: 4px 4px 0 0; }

.protip-skin-square--size-tiny[data-pt-position="bottom-left-corner"] {
  border-top-right-radius: 0; }
  .protip-skin-square--size-tiny[data-pt-position="bottom-left-corner"] .protip-arrow {
    top: -4px;
    left: 100%;
    margin: 0 0 0 -4px;
    border-width: 0 0 4px 4px; }

.protip-skin-square--size-tiny[data-pt-position="bottom-right-corner"] {
  border-top-left-radius: 0; }
  .protip-skin-square--size-tiny[data-pt-position="bottom-right-corner"] .protip-arrow {
    top: 0;
    left: -4px;
    margin: -4px 0 0 4px;
    border-width: 4px 0 0 4px; }

.protip-skin-square--scheme-pro.protip-container {
  color: #000;
  background: #da2e2b;
  font-family: sans-serif;
  transition: opacity 0.2s ease-out; }

.protip-skin-square--scheme-pro[data-pt-position="top-left"] .protip-arrow,
.protip-skin-square--scheme-pro[data-pt-position="top"] .protip-arrow,
.protip-skin-square--scheme-pro[data-pt-position="top-right"] .protip-arrow {
  border-top-color: #da2e2b; }

.protip-skin-square--scheme-pro[data-pt-position="bottom-left"] .protip-arrow,
.protip-skin-square--scheme-pro[data-pt-position="bottom"] .protip-arrow,
.protip-skin-square--scheme-pro[data-pt-position="bottom-right"] .protip-arrow {
  border-bottom-color: #da2e2b; }

.protip-skin-square--scheme-pro[data-pt-position="left-top"] .protip-arrow,
.protip-skin-square--scheme-pro[data-pt-position="left"] .protip-arrow,
.protip-skin-square--scheme-pro[data-pt-position="left-bottom"] .protip-arrow {
  border-left-color: #da2e2b; }

.protip-skin-square--scheme-pro[data-pt-position="right-top"] .protip-arrow,
.protip-skin-square--scheme-pro[data-pt-position="right"] .protip-arrow,
.protip-skin-square--scheme-pro[data-pt-position="right-bottom"] .protip-arrow {
  border-right-color: #da2e2b; }

.protip-skin-square--scheme-pro[data-pt-position="top-left-corner"] .protip-arrow {
  border-right-color: #da2e2b; }

.protip-skin-square--scheme-pro[data-pt-position="top-right-corner"] .protip-arrow {
  border-top-color: #da2e2b; }

.protip-skin-square--scheme-pro[data-pt-position="bottom-left-corner"] .protip-arrow {
  border-bottom-color: #da2e2b; }

.protip-skin-square--scheme-pro[data-pt-position="bottom-right-corner"] .protip-arrow {
  border-left-color: #da2e2b; }

.protip-skin-square--scheme-blue.protip-container {
  color: #fff;
  background: #336699;
  font-family: sans-serif;
  transition: opacity 0.2s ease-out; }

.protip-skin-square--scheme-blue[data-pt-position="top-left"] .protip-arrow,
.protip-skin-square--scheme-blue[data-pt-position="top"] .protip-arrow,
.protip-skin-square--scheme-blue[data-pt-position="top-right"] .protip-arrow {
  border-top-color: #336699; }

.protip-skin-square--scheme-blue[data-pt-position="bottom-left"] .protip-arrow,
.protip-skin-square--scheme-blue[data-pt-position="bottom"] .protip-arrow,
.protip-skin-square--scheme-blue[data-pt-position="bottom-right"] .protip-arrow {
  border-bottom-color: #336699; }

.protip-skin-square--scheme-blue[data-pt-position="left-top"] .protip-arrow,
.protip-skin-square--scheme-blue[data-pt-position="left"] .protip-arrow,
.protip-skin-square--scheme-blue[data-pt-position="left-bottom"] .protip-arrow {
  border-left-color: #336699; }

.protip-skin-square--scheme-blue[data-pt-position="right-top"] .protip-arrow,
.protip-skin-square--scheme-blue[data-pt-position="right"] .protip-arrow,
.protip-skin-square--scheme-blue[data-pt-position="right-bottom"] .protip-arrow {
  border-right-color: #336699; }

.protip-skin-square--scheme-blue[data-pt-position="top-left-corner"] .protip-arrow {
  border-right-color: #336699; }

.protip-skin-square--scheme-blue[data-pt-position="top-right-corner"] .protip-arrow {
  border-top-color: #336699; }

.protip-skin-square--scheme-blue[data-pt-position="bottom-left-corner"] .protip-arrow {
  border-bottom-color: #336699; }

.protip-skin-square--scheme-blue[data-pt-position="bottom-right-corner"] .protip-arrow {
  border-left-color: #336699; }



/**
 * Container
 */
.ac_container {
  border: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: text-bottom;
  position: relative;
}

.ac_input {
  background-color: white;
  border-right: none;
  border: 1px solid #888;
  vertical-align: text-bottom;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  padding: 4px;
  width: 320px;
  height: 32px;
  box-sizing: border-box;
}

/**
 * "Get all" button
 */
.ac_button {
  display: inline-block;
  vertical-align: text-bottom;
  border: 1px solid #888;
  border-left: 0;
  cursor: pointer;
  position: relative;
  text-align: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  color: #666;
}

.ac_button > img {
  top: 6px;
  left: 8px;
  height: 16px;
  position: absolute;
  width: 16px;
}

.ac_btn_out {
  background: #ddd;
}

.ac_btn_on {
  background: #ccc;
}

.octicon-chevron-down {
  display: inline-block;
  fill: currentColor;
  height: 1.5em;
  margin-top: 0.22em;
}

/**
 * Results
 */
.ac_result_area {
  background-color: transparent;
  border: 1px solid #888;
  box-shadow: 1px 1px 1px #aaa;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 100;
}

.ac_results {
  background-color: white;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ac_results > li {
  color: #000;
  font-size: 0.9em;
  height: auto !important;
  line-height: 1;
  margin: 0;
  overflow: hidden;
  line-height: 1.6;
  position: relative;
  text-align: left;
  white-space: nowrap;
}

.ac_selected {
  background-color: #def;
  font-weight: bold;
}

.ac_over {
  background-color: #47c;
  color: #fff !important;
  cursor: pointer;
}

/**
 * 選択していないほうの表示を暗くする
 */
.ac_results_off {
  background: #eee;
}

.ac_input_off {
  background: #eee;
  color: #555;
}

.ac_hide {
  display: none;
}

/**
 * Navi
 */
.ac_navi {
  background: #eee;
  border-bottom: 1px solid #888;
  font-size: 0.8em;
  font-weight: normal;
  line-height: 1;
  margin: 0;
  padding: 0.4em 0.3em;
  text-align: right;
}

.ac_navi > p > a:link,
.ac_navi > p > a:visited,
.ac_navi > p > a:hover,
.ac_navi > p > a:active {
  color: #23c;
  font-weight: normal;
  margin: 0 0.2em;
  text-decoration: underline;
}

.ac_navi > p {
  color: black;
  font-size: 1.1em;
  margin: 0;
  padding-top: 0.3em;
  text-align: center;
}

.ac_navi > p > a >.current {
  color: #00c;
  font-size: 1em;
  font-weight: bold;
}

.ac_navi > p >.page_end {
  color: gray;
  font-weight: normal;
  margin: 0 0.2em;
}

.navi_page,
.navi_first,
.navi_prev,
.navi_next,
.navi_last {
  margin: auto 0.2em !important;
}

.ac_navi > .info {
  margin: 0 !important;
  padding: 0 !important;
}

/**
 * Sub-info
 */
.ac_subinfo {
  margin: 0 !important;
  padding: 0 !important;
}

.ac_subinfo > dl {
  background: #eee;
  border: 1px solid #aaa;
  box-shadow: 1px 1px 1px #aaa;
  color: #000;
  display: none;
  margin: 0;
  position: absolute;
  width: 260px;
  z-index: 200;
  font-size: 0.85em;
  line-height: 1.5;
}

.ac_subinfo > dl > dt {
  background: #CEDFF7;
  clear: both;
  color: #37486A;
  float: left;
  font-weight: normal;
  margin: 0;
  padding: 0 0.3em;
  text-align: left;
  width: 100px;
  word-wrap: break-word;
  box-sizing: border-box;
}

.ac_subinfo > dl > dt.hide {
  display: none !important;
}

.ac_subinfo > dl > dd {
  float: left;
  margin: 0;
  padding: 0 0.3em;
  width: 160px;
  word-wrap: break-word;
  box-sizing: border-box;
}

/**
 * Select only
 */
.ac_container > .ac_select_ng {
  background: #fcc;
}


/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}


/**
* @file: highslide.css 
* @version: 5.0.0
*/
/*.highslide-container div {
	font-family: Verdana, Helvetica;
	font-size: 10pt;
}*/
.highslide-container table {
	background: none;
	table-layout: auto;
}
.highslide {
	outline: none;
	text-decoration: none;
}
/*.highslide img {
	border: 2px solid silver;
}
.highslide:hover img {
	border-color: gray;
}*/
.highslide-active-anchor img {
	visibility: hidden;
}
.highslide-gallery .highslide-active-anchor img {
	border-color: black;
	visibility: visible;
	cursor: default;
}
/*.highslide-image {
	border-width: 2px;
	border-style: solid;
	border-color: white;
}*/
.highslide-wrapper, .highslide-outline {
	background: white;
}
.glossy-dark {
	background: #111;
}

.highslide-image-blur {
}
.highslide-number {
	font-weight: bold;
	color: gray;
	font-size: .9em;
}
.highslide-caption {
	display: none;
	font-size: 1em;
	padding: 5px;
	/*background: white;*/
}
.highslide-heading {
	display: none;
	font-weight: bold;
	margin: 0.4em;
}
.highslide-dimming {
	/*position: absolute;*/
	background: black;
}
a.highslide-full-expand {
   background: url(../scripts/highslide/graphics/fullexpand.gif) no-repeat;
   display: block;
   margin: 0 10px 10px 0;
   width: 34px;
   height: 34px;
}
.highslide-loading {
	display: block;
	color: black;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	padding: 3px;
	border: 1px solid white;
	background-color: white;
	padding-left: 22px;
	background-image: url(../scripts/highslide/graphics/loader.white.gif);
	background-repeat: no-repeat;
	background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
	padding: 2px;
	color: silver;
	text-decoration: none;
	font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
	color: white;
	background-color: gray;
}
.highslide-move, .highslide-move * {
	cursor: move;
}

.highslide-viewport {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: none;
	left: 0;
	top: 0;
}
.highslide-overlay {
	display: none;
}
.hidden-container {
	display: none;
}
/* Example of a semitransparent, offset closebutton */
.closebutton {
	position: relative;
	top: -15px;
	left: 15px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	background: url(../scripts/highslide/graphics/close.png);
	/* NOTE! For IE6, you also need to update the highslide-ie6.css file. */
}

/*****************************************************************************/
/* Thumbnail boxes for the galleries.                                        */
/* Remove these if you are not using a gallery.                              */
/*****************************************************************************/
.highslide-gallery ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
/*.highslide-gallery ul li {
	display: block;
	position: relative;
	float: left;
	width: 106px;
	height: 106px;
	border: 1px solid silver;
	background: #ededed;
	margin: 2px;
	padding: 0;
	line-height: 0;
	overflow: hidden;
}*/
.highslide-gallery ul a {
	position: absolute;
	top: 50%;
	left: 50%;
}
.highslide-gallery ul img {
 	position: relative;
	top: -50%;
	left: -50%;
}
html>/**/body .highslide-gallery ul li {
	display: table;
	text-align: center;
}
html>/**/body .highslide-gallery ul li {
	text-align: center;
}
html>/**/body .highslide-gallery ul a {
	position: static;
	display: table-cell;
	vertical-align: middle;
}
html>/**/body .highslide-gallery ul img {
	position: static;
}

/*****************************************************************************/
/* Controls for the galleries.											     */
/* Remove these if you are not using a gallery							     */
/*****************************************************************************/
.highslide-controls {
	width: 195px;
	height: 40px;
	background: url(../scripts/highslide/graphics/controlbar-white.gif) 0 -90px no-repeat;
	margin: 20px 15px 10px 0;
}
.highslide-controls ul {
	position: relative;
	left: 15px;
	height: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: url(../scripts/highslide/graphics/controlbar-white.gif) right -90px no-repeat;

}
.highslide-controls li {
	float: left;
	padding: 5px 0;
	margin:0;
	list-style: none;
}
.highslide-controls a {
	background-image: url(../scripts/highslide/graphics/controlbar-white.gif);
	display: block;
	float: left;
	height: 30px;
	width: 30px;
	outline: none;
}
.highslide-controls a.disabled {
	cursor: default;
}
.highslide-controls a.disabled span {
	cursor: default;
}
.highslide-controls a span {
	/* hide the text for these graphic buttons */
	display: none;
	cursor: pointer;
}


/* The CSS sprites for the controlbar - see http://www.google.com/search?q=css+sprites */
.highslide-controls .highslide-previous a {
	background-position: 0 0;
}
.highslide-controls .highslide-previous a:hover {
	background-position: 0 -30px;
}
.highslide-controls .highslide-previous a.disabled {
	background-position: 0 -60px !important;
}
.highslide-controls .highslide-play a {
	background-position: -30px 0;
}
.highslide-controls .highslide-play a:hover {
	background-position: -30px -30px;
}
.highslide-controls .highslide-play a.disabled {
	background-position: -30px -60px !important;
}
.highslide-controls .highslide-pause a {
	background-position: -60px 0;
}
.highslide-controls .highslide-pause a:hover {
	background-position: -60px -30px;
}
.highslide-controls .highslide-next a {
	background-position: -90px 0;
}
.highslide-controls .highslide-next a:hover {
	background-position: -90px -30px;
}
.highslide-controls .highslide-next a.disabled {
	background-position: -90px -60px !important;
}
.highslide-controls .highslide-move a {
	background-position: -120px 0;
}
.highslide-controls .highslide-move a:hover {
	background-position: -120px -30px;
}
.highslide-controls .highslide-full-expand a {
	background-position: -150px 0;
}
.highslide-controls .highslide-full-expand a:hover {
	background-position: -150px -30px;
}
.highslide-controls .highslide-full-expand a.disabled {
	background-position: -150px -60px !important;
}
.highslide-controls .highslide-close a {
	background-position: -180px 0;
}
.highslide-controls .highslide-close a:hover {
	background-position: -180px -30px;
}

/*****************************************************************************/
/* Styles for the HTML popups											     */
/* Remove these if you are not using Highslide HTML						     */
/*****************************************************************************/
.highslide-maincontent {
	display: none;
}
.highslide-html {
	background-color: white;
}
.mobile .highslide-html {
	border: 1px solid silver;
}
.highslide-html-content {
	display: none;
	width: 400px;
	padding: 0 5px 5px 5px;
}
.highslide-header {
	padding-bottom: 5px;
}
.highslide-header ul {
	margin: 0;
	padding: 0;
	text-align: right;
}
.highslide-header ul li {
	display: inline;
	padding-left: 1em;
}
.highslide-header ul li.highslide-previous, .highslide-header ul li.highslide-next {
	display: none;
}
.highslide-header a {
	font-weight: bold;
	color: #000;
	text-transform: uppercase;
	text-decoration: none;
}
.highslide-header a:hover {
	color: black;
}
.highslide-header .highslide-move a {
	cursor: move;
}
.highslide-footer {
	height: 16px;
}
.highslide-footer .highslide-resize {
	display: block;
	float: right;
	margin-top: 5px;
	height: 11px;
	width: 11px;
	background: url(../scripts/highslide/graphics/resize.gif) no-repeat;
}
.highslide-footer .highslide-resize span {
	display: none;
}
.highslide-body {
}
.highslide-resize {
	cursor: nw-resize;
}

/*****************************************************************************/
/* Styles for the Individual wrapper class names.							 */
/* See www.highslide.com/ref/hs.wrapperClassName							 */
/* You can safely remove the class name themes you don't use				 */
/*****************************************************************************/

/* hs.wrapperClassName = 'draggable-header' */
.draggable-header .highslide-header {
	height: 18px;
	border-bottom: 1px solid #dddddd;
}
.draggable-header .highslide-heading {
	position: absolute;
	margin: 2px 0.4em;
}

.draggable-header .highslide-header .highslide-move {
	cursor: move;
	display: block;
	height: 16px;
	position: absolute;
	right: 24px;
	top: 0;
	width: 100%;
	z-index: 1;
}
.draggable-header .highslide-header .highslide-move * {
	display: none;
}
.draggable-header .highslide-header .highslide-close {
	position: absolute;
	right: 2px;
	top: 2px;
	z-index: 5;
	padding: 0;
}
.draggable-header .highslide-header .highslide-close a {
	display: block;
	height: 16px;
	width: 16px;
	background-image: url(../scripts/highslide/graphics/closeX.png);
}
.draggable-header .highslide-header .highslide-close a:hover {
	background-position: 0 16px;
}
.draggable-header .highslide-header .highslide-close span {
	display: none;
}
.draggable-header .highslide-maincontent {
	padding-top: 1em;
}

/* hs.wrapperClassName = 'titlebar' */
.titlebar .highslide-header {
	height: 18px;
	border-bottom: 1px solid #dddddd;
}
.titlebar .highslide-heading {
	position: absolute;
	width: 90%;
	margin: 1px 0 1px 5px;
	color: #666666;
}

.titlebar .highslide-header .highslide-move {
	cursor: move;
	display: block;
	height: 16px;
	position: absolute;
	right: 24px;
	top: 0;
	width: 100%;
	z-index: 1;
}
.titlebar .highslide-header .highslide-move * {
	display: none;
}
.titlebar .highslide-header li {
	position: relative;
	top: 3px;
	z-index: 2;
	padding: 0 0 0 1em;
}
.titlebar .highslide-maincontent {
	padding-top: 1em;
}

/* hs.wrapperClassName = 'no-footer' */
.no-footer .highslide-footer {
	display: none;
}

/* hs.wrapperClassName = 'wide-border' */
.wide-border {
	background: white;
}
.wide-border .highslide-image {
	border-width: 10px;
}
.wide-border .highslide-caption {
	padding: 0 10px 10px 10px;
}

/* hs.wrapperClassName = 'borderless' */
.borderless .highslide-image {
	border: none;
}
.borderless .highslide-caption {
	border-bottom: 1px solid white;
	border-top: 1px solid white;
	background: silver;
}

/* hs.wrapperClassName = 'outer-glow' */
.outer-glow {
	background: #444;
}
.outer-glow .highslide-image {
	border: 5px solid #444444;
}
.outer-glow .highslide-caption {
	border: 5px solid #444444;
	border-top: none;
	padding: 5px;
	background-color: gray;
}

/* hs.wrapperClassName = 'colored-border' */
.colored-border {
	background: white;
}
.colored-border .highslide-image {
	border: 2px solid green;
}
.colored-border .highslide-caption {
	border: 2px solid green;
	border-top: none;
}

/* hs.wrapperClassName = 'dark' */
.dark {
	background: #111;
}
.dark .highslide-image {
	border-color: black black #202020 black;
	background: gray;
}
.dark .highslide-caption {
	color: white;
	background: #111;
}
.dark .highslide-controls,
.dark .highslide-controls ul,
.dark .highslide-controls a {
	background-image: url(../scripts/highslide/graphics/controlbar-black-border.gif);
}

/* hs.wrapperClassName = 'floating-caption' */
.floating-caption .highslide-caption {
	position: absolute;
	padding: 1em 0 0 0;
	background: none;
	color: white;
	border: none;
	font-weight: bold;
}

/* hs.wrapperClassName = 'controls-in-heading' */
.controls-in-heading .highslide-heading {
	color: gray;
	font-weight: bold;
	height: 20px;
	overflow: hidden;
	cursor: default;
	padding: 0 0 0 22px;
	margin: 0;
	background: url(../scripts/highslide/graphics/icon.gif) no-repeat 0 1px;
}
.controls-in-heading .highslide-controls {
	width: 105px;
	height: 20px;
	position: relative;
	margin: 0;
	top: -23px;
	left: 7px;
	background: none;
}
.controls-in-heading .highslide-controls ul {
	position: static;
	height: 20px;
	background: none;
}
.controls-in-heading .highslide-controls li {
	padding: 0;
}
.controls-in-heading .highslide-controls a {
	background-image: url(../scripts/highslide/graphics/controlbar-white-small.gif);
	height: 20px;
	width: 20px;
}

.controls-in-heading .highslide-controls .highslide-move {
	display: none;
}

.controls-in-heading .highslide-controls .highslide-previous a {
	background-position: 0 0;
}
.controls-in-heading .highslide-controls .highslide-previous a:hover {
	background-position: 0 -20px;
}
.controls-in-heading .highslide-controls .highslide-previous a.disabled {
	background-position: 0 -40px !important;
}
.controls-in-heading .highslide-controls .highslide-play a {
	background-position: -20px 0;
}
.controls-in-heading .highslide-controls .highslide-play a:hover {
	background-position: -20px -20px;
}
.controls-in-heading .highslide-controls .highslide-play a.disabled {
	background-position: -20px -40px !important;
}
.controls-in-heading .highslide-controls .highslide-pause a {
	background-position: -40px 0;
}
.controls-in-heading .highslide-controls .highslide-pause a:hover {
	background-position: -40px -20px;
}
.controls-in-heading .highslide-controls .highslide-next a {
	background-position: -60px 0;
}
.controls-in-heading .highslide-controls .highslide-next a:hover {
	background-position: -60px -20px;
}
.controls-in-heading .highslide-controls .highslide-next a.disabled {
	background-position: -60px -40px !important;
}
.controls-in-heading .highslide-controls .highslide-full-expand a {
	background-position: -100px 0;
}
.controls-in-heading .highslide-controls .highslide-full-expand a:hover {
	background-position: -100px -20px;
}
.controls-in-heading .highslide-controls .highslide-full-expand a.disabled {
	background-position: -100px -40px !important;
}
.controls-in-heading .highslide-controls .highslide-close a {
	background-position: -120px 0;
}
.controls-in-heading .highslide-controls .highslide-close a:hover {
	background-position: -120px -20px;
}

/*****************************************************************************/
/* Styles for text based controls.						                     */
/* You can safely remove this if you don't use text based controls			 */
/*****************************************************************************/

.text-controls .highslide-controls {
	width: auto;
	height: auto;
	margin: 0;
	text-align: center;
	background: none;
}
.text-controls ul {
	position: static;
	background: none;
	height: auto;
	left: 0;
}
.text-controls .highslide-move {
	display: none;
}
.text-controls li {
    background-image: url(../scripts/highslide/graphics/controlbar-text-buttons.png);
	background-position: right top !important;
	padding: 0;
	margin-left: 15px;
	display: block;
	width: auto;
}
.text-controls a {
    background: url(../scripts/highslide/graphics/controlbar-text-buttons.png) no-repeat;
    background-position: left top !important;
    position: relative;
    left: -10px;
	display: block;
	width: auto;
	height: auto;
	text-decoration: none !important;
}
.text-controls a span {
	background: url(../scripts/highslide/graphics/controlbar-text-buttons.png) no-repeat;
    margin: 1px 2px 1px 10px;
	display: block;
    min-width: 4em;
    height: 18px;
    line-height: 18px;
	padding: 1px 0 1px 18px;
    color: #333;
	/*font-family: "Trebuchet MS", Arial, sans-serif;*/
	font-size: 12px;
	font-weight: bold;
	white-space: nowrap;
}
.text-controls .highslide-next {
	margin-right: 1em;
}
.text-controls .highslide-full-expand a span {
	min-width: 0;
	margin: 1px 0;
	padding: 1px 0 1px 10px;
}
.text-controls .highslide-close a span {
	min-width: 0;
}
.text-controls a:hover span {
	color: black;
}
.text-controls a.disabled span {
	color: #999;
}

.text-controls .highslide-previous span {
	background-position: 0 -40px;
}
.text-controls .highslide-previous a.disabled {
	background-position: left top !important;
}
.text-controls .highslide-previous a.disabled span {
	background-position: 0 -140px;
}
.text-controls .highslide-play span {
	background-position: 0 -60px;
}
.text-controls .highslide-play a.disabled {
	background-position: left top !important;
}
.text-controls .highslide-play a.disabled span {
	background-position: 0 -160px;
}
.text-controls .highslide-pause span {
	background-position: 0 -80px;
}
.text-controls .highslide-next span {
	background-position: 0 -100px;
}
.text-controls .highslide-next a.disabled {
	background-position: left top !important;
}
.text-controls .highslide-next a.disabled span {
	background-position: 0 -200px;
}
.text-controls .highslide-full-expand span {
	background: none;
}
.text-controls .highslide-full-expand a.disabled {
	background-position: left top !important;
}
.text-controls .highslide-close span {
	background-position: 0 -120px;
}


/*****************************************************************************/
/* Styles for the thumbstrip.							                     */
/* See www.highslide.com/ref/hs.addSlideshow    							 */
/* You can safely remove this if you don't use a thumbstrip 				 */
/*****************************************************************************/

.highslide-thumbstrip {
	height: 100%;
	direction: ltr;
}
.highslide-thumbstrip div {
	overflow: hidden;
}
.highslide-thumbstrip table {
	position: relative;
	padding: 0;
	border-collapse: collapse;
}
.highslide-thumbstrip td {
	padding: 1px;
	/*text-align: center;*/
}
.highslide-thumbstrip a {
	outline: none;
}
.highslide-thumbstrip img {
	display: block;
	border: 1px solid gray;
	margin: 0 auto;
}
.highslide-thumbstrip .highslide-active-anchor img {
	visibility: visible;
}
.highslide-thumbstrip .highslide-marker {
	position: absolute;
	width: 0;
	height: 0;
	border-width: 0;
	border-style: solid;
	border-color: transparent; /* change this to actual background color in highslide-ie6.css */
}
.highslide-thumbstrip-horizontal div {
	width: auto;
	/* width: 100% breaks in small strips in IE */
}
.highslide-thumbstrip-horizontal .highslide-scroll-up {
	display: none;
	position: absolute;
	top: 3px;
	left: 3px;
	width: 25px;
	height: 42px;
}
.highslide-thumbstrip-horizontal .highslide-scroll-up div {
	margin-bottom: 10px;
	cursor: pointer;
	background: url(../scripts/highslide/graphics/scrollarrows.png) left center no-repeat;
	height: 42px;
}
.highslide-thumbstrip-horizontal .highslide-scroll-down {
	display: none;
	position: absolute;
	top: 3px;
	right: 3px;
	width: 25px;
	height: 42px;
}
.highslide-thumbstrip-horizontal .highslide-scroll-down div {
	margin-bottom: 10px;
	cursor: pointer;
	background: url(../scripts/highslide/graphics/scrollarrows.png) center right no-repeat;
	height: 42px;
}
.highslide-thumbstrip-horizontal table {
	margin: 2px 0 10px 0;
}
.highslide-viewport .highslide-thumbstrip-horizontal table {
	margin-left: 10px;
}
.highslide-thumbstrip-horizontal img {
	width: auto;
	height: 40px;
}
.highslide-thumbstrip-horizontal .highslide-marker {
	top: 47px;
	border-left-width: 6px;
	border-right-width: 6px;
	border-bottom: 6px solid gray;
}
.highslide-viewport .highslide-thumbstrip-horizontal .highslide-marker {
	margin-left: 10px;
}
.dark .highslide-thumbstrip-horizontal .highslide-marker, .highslide-viewport .highslide-thumbstrip-horizontal .highslide-marker {
	border-bottom-color: white !important;
}

.highslide-thumbstrip-vertical-overlay {
	overflow: hidden !important;
}
.highslide-thumbstrip-vertical div {
	height: 100%;
}
.highslide-thumbstrip-vertical a {
	display: block;
}
.highslide-thumbstrip-vertical .highslide-scroll-up {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 25px;
}
.highslide-thumbstrip-vertical .highslide-scroll-up div {
	margin-left: 10px;
	cursor: pointer;
	background: url(../scripts/highslide/graphics/scrollarrows.png) top center no-repeat;
	height: 25px;
}
.highslide-thumbstrip-vertical .highslide-scroll-down {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 25px;
}
.highslide-thumbstrip-vertical .highslide-scroll-down div {
	margin-left: 10px;
	cursor: pointer;
	background: url(../scripts/highslide/graphics/scrollarrows.png) bottom center no-repeat;
	height: 25px;
}
.highslide-thumbstrip-vertical table {
	margin: 10px 0 0 10px;
}
.highslide-thumbstrip-vertical img {
	width: 60px; /* t=5481 */
}
.highslide-thumbstrip-vertical .highslide-marker {
	left: 0;
	margin-top: 8px;
	border-top-width: 6px;
	border-bottom-width: 6px;
	border-left: 6px solid gray;
}
.dark .highslide-thumbstrip-vertical .highslide-marker, .highslide-viewport .highslide-thumbstrip-vertical .highslide-marker {
	border-left-color: white;
}

.highslide-viewport .highslide-thumbstrip-float {
	overflow: auto;
}
.highslide-thumbstrip-float ul {
	margin: 2px 0;
	padding: 0;
}
.highslide-thumbstrip-float li {
	display: block;
	height: 60px;
	margin: 0 2px;
	list-style: none;
	float: left;
}
.highslide-thumbstrip-float img {
	display: inline;
	border-color: silver;
	max-height: 56px;
}
.highslide-thumbstrip-float .highslide-active-anchor img {
	border-color: black;
}
.highslide-thumbstrip-float .highslide-scroll-up div, .highslide-thumbstrip-float .highslide-scroll-down div {
	display: none;
}
.highslide-thumbstrip-float .highslide-marker {
	display: none;
}


/*****************************************************************************/
/* The following styles are added by the Highslide Editor                    */
/*****************************************************************************/
.highslide-wrapper, .highslide-outline {
	background: #000;
}
/*.highslide img {
	border: 1px solid #D0D0D0;
}*/
/*.highslide:hover img {
	border-color: #A0A0A0;
}*/
.highslide-active-anchor img {
	visibility: visible;
	border-color: #000 !important;
}
.highslide-image {
	border: 8px solid #000;
}
.highslide-caption {
	padding: 0px;
	padding-right: 2px;
	padding-bottom: 10px;
	padding-left: 10px;
}
.highslide-number {
	color: #fff;
	font-size: 10pt !important;
}
.highslide-loading {
	color: black;
	border: 1px solid black;
	background-color: white;
	background-image: url(../scripts/highslide/graphics/loader.white.gif);
}

.highslide-controls {
	position: static !important;
	margin-bottom: 0;
	width: 136px !important;
}
.large-dark .highslide-controls, .large-dark .highslide-controls ul, .large-dark .highslide-controls a {
	background-image: url(../scripts/highslide/graphics/controlbar-black-border.gif);
}

.highslide-controls .highslide-move {
	display: none;
}
.highslide-controls .highslide-full-expand {
	display: none;
}

/*.highslide-gallery ul li {
	width: 106px;
	height: 106px;
	border: 1px solid #D0D0D0;
	background: #EDEDED;
	margin: 2px;
}*/
.highslide-html {
	background: none;
}
.highslide-header ul a {
	background-image: url(../scripts/highslide/graphics/controlbar-text-buttons.png);
	padding-left: 16px;
	display: inline-block;
	height: 16px;
}
.highslide-header ul li span {
	display: none;
}
.highslide-header .highslide-move {
	display: none;
}
.highslide-header .highslide-close a {
	background-position: 0 -221px;
}



body {
    color: #fff;
    font-family: sans-serif;
    font-weight: 400;
    background-image: none;
    background-color: #08080b;
    overflow-x: hidden;
}

@media screen and (min-width: 960px) {
body {
    background: url("/assets/images/bg-1.jpg") no-repeat center bottom,
                url("/assets/images/bg-5.jpg") repeat-x left bottom,
                url("/assets/images/bg-2.jpg") no-repeat center top,
                url("/assets/images/bg-3.jpg") repeat-y center top,
                url("/assets/images/bg-4.jpg") repeat left top;
}

body.no-panel {
        background: url("/assets/images/bg-6.jpg") no-repeat center bottom,
                url("/assets/images/bg-5.jpg") repeat-x left bottom,
                url("/assets/images/bg-2.jpg") no-repeat center top,
                url("/assets/images/bg-3.jpg") repeat-y center top,
                url("/assets/images/bg-4.jpg") repeat left top;
}
}

@media screen and (max-width: 959.98px) {
body {
    background: url("/assets/images/bg-2.jpg") no-repeat center top;
    background-color: #113157;
}
}



@font-face {
    font-family: icomoon;
    src: url('/assets/fonts/icomoon/icomoon.woff') format("woff"),
         url('/assets/fonts/icomoon/icomoon.svg') format("svg"),
         url('/assets/fonts/icomoon/icomoon.ttf') format("truetype");
}

:root {
    --panel-color: #1e212e;
    --dt-color: #939fb7;
    --nav-color: #828697;
    --link-color: #759eff;
    --key-color: #5eb0ac;
    --icon-color: #34b6a3;
    --em-color: #db446d;

    --lineheight-001: 1.7em;
}


html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

h1 {
    font-size: 2.4rem;
}
h2 {
    font-size: 2rem;
}

@media screen and (min-width: 520px) {
h1 {
    font-size: 3.6rem;
}
h2 {
    font-size: 2.4rem;
}
}

@media screen and (min-width: 960px) {
h1 {
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));
}
h2 {
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));
}
}


a {
    color: #fff;
    font-style: normal;
    text-decoration: none;
}

a:link {
    color: #fff;
    font-style: normal;
    text-decoration: none;
}

a:visited {
    color: #fff;
    font-style: normal;
    text-decoration: none;
}

a:hover {
    color: #ccc;
    font-style: normal;
    text-decoration: underline;
}

a:active {
    color: #ccc;
    font-style: normal;
    text-decoration: underline;
}

a:hover.no-underline {
    text-decoration: none;
}

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

.linkcolor-b a,
.linkcolor-b a:link,
.linkcolor-b a:visited,
.linkcolor-b a:hover,
.linkcolor-b a:active {
    color: var(--link-color);
}

.linkcolor-w a,
.linkcolor-w a:link,
.linkcolor-w a:visited,
.linkcolor-w a:hover,
.linkcolor-w a:active {
    color: #fff;
}

.link-transition-wb a {
    transition: all 0.2s ease-in 0s;
}

.link-transition-wb a:hover {
    color: var(--link-color);
}

.hover-no-underline a:hover {
    text-decoration: none;
}


em {
    font-weight: normal;
    font-style: normal;
    color: var(--em-color);
}

hr.hr-style-001 {
    width: 216px;
    margin-right: auto;
    margin-left: auto;
    border-width: 0 0 8px;
    border-style: solid;
    border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="darkturquoise" cx="1" cy="0.5" r="0.5" /></svg>') 0 0 100% repeat;
    }

hr,
.horizontalrule {
    width: auto;
    max-width: 912px;
    margin: 0 0;
    border-top: 2px solid #000;
    border-bottom: 1px solid #434556;
    z-index: 2;
}


@media screen and (max-width: 959.98px) {
hr {
    max-width: calc(100vw - 32px);
}
}

code {
    margin: 0 4px;
    color: var(--key-color);
    font-family: 'Oxygen Mono',monospace;
    font-size: 1.5rem;
    font-weight: bold;
}

.code-cr::after {
    content: "\f0e2";
    display: inline-block;
    position: relative;
    margin: 0 4px 0 4px;
    color: var(--key-color);
    font-family: 'Line Awesome Free';
    font-size: 1.8rem;
    transform: rotateX(180deg);
}

kbd {
    color: var(--key-color);
    font-family: 'Oxygen Mono',monospace;
    font-size: 1.8rem;
}

kbd.key {
    display: inline-block;
    height: 2rem;
    min-width: 2rem;
    padding: 0 8px;
    margin: 4px 8px;
    color: #333;
    font-size: 1.4rem;
    font-weight: bold;
    text-shadow: 0 1px 0 #f5f5f5;
    text-align: center;
    letter-spacing: 2px;
    line-height: 2rem;
    background: linear-gradient(to top, rgba(239,240,242,1) 0%,rgba(142,143,145,1) 100%);
    border-radius: 4px;
    border-top: 1px solid #f5f5f5;
    box-shadow: 0 0 25px #e8e8e8 inset, 0 1px 0 #a3a3a3, 0 2px 0 #c9c9c9, 0 2px 3px #333333;
}

kbd.square {
    display: inline-block;
    margin: 2px 4px;
    padding: 0px 6px;
    color: #fff;
    font-size: 1.5rem;
    border: #fff solid 1px;
}

samp {
    margin: 0 4px;
    color: var(--key-color);
    font-family: 'Oxygen Mono',monospace;
    font-size: 1.5rem;
    font-weight: bold;
}

cite {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--dt-color);
    font-style: normal;
}

cite::before {
    content: '';
    width: 3em;
    border-top: solid 1px;
}


.icon::before {
    flex-grow: 16px;
    width: auto;
    height: 1.6;
    padding: 1px 1px 0 1px;
    font-family: 'Line Awesome Free';
    font-style: normal;
    font-size: 2rem;
    font-weight: 900;
        border-radius: 3px;
}


.release_source i {
    width: 2.4em;
    height: 1.6em;
    margin-right: 4px;
    padding: 0 1px;
    font-family: 'Line Awesome Free';
    font-style: normal;
    font-size: 1.8rem;
    font-weight: 900;
    border-radius: 2px;
}

.release_source i.la-save {
    background-color: #9c2e68;
}

.release_source i.la-book-open {
    background-color: #1c8fa4;
}

.la-hand-point-up::before {
    content: '\f0a6';
    margin-right: 2px;
}

.la-hand-point-right::before {
    content: '\f0a4';
    position: relative;
    top: 3px;
    margin-right: 4px;
    color: #34b6a3;
}

.la-book-list-yes::before {
    content: '\f1c4';
    position: relative;
    top: 2px;
    margin-left: 4px;
    color: #34b6a3;
}

.la-book-list-no::before {
    content: '\f1c4';
    position: relative;
    top: 2px;
    margin-left: 4px;
    color: #6d727c;
}

.la-cr::before {
    content: '\f0e2';
    position: relative;
    top: -2px;
    margin: 0 4px 0 4px;
    color: var(--key-color);
}

.icon-rotate-90 {
    transform: rotate(90deg);
}


.button-001 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 10em;
    height: 3em;
    margin-bottom: 8px;
    line-height: 3em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 1.5em;
    background-image: -webkit-gradient(linear, left top, right top, from(#b721ff), color-stop(#21d4fd), to(#b721ff));
    background-image: linear-gradient(to right, #b721ff, #21d4fd, #b721ff);
    background-size: 400%;
    z-index: 2;
}

.button-001 span {
    font-family: 'Play';
    font-size: 2rem;
    font-weight: bold;
}

.button-001::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1.5em;
    background: inherit;
    -webkit-filter: blur(1em);
            filter: blur(1em);
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
    z-index: -1;
}

.button-001:hover {
    -webkit-animation: glow 6s linear infinite;
            animation: glow 6s linear infinite;
}

.button-001:hover::before {
    -webkit-animation: glow 6s linear infinite;
            animation: glow 6s linear infinite;
    opacity: 1;
}

.download {
    display: flex;
    flex-direction: column;
    margin: 16px auto;
}

.download a {
    text-decoration: none;
}

.download p:not(:first-child){
        font-size: 1.4rem;
    line-height: 1.4;
}

.download p {
    margin: 0 auto;
}


@-webkit-keyframes glow {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 400%;
    }
}

@keyframes glow {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 400%;
    }
}

@media screen and (min-width: 960px) {
#container {
    width: 960px;
    display: block;
    margin: 0 auto;
}
}

@media screen and (max-width: 959.78px) {
#container {
    width: 100%;
    display: block;
    margin: 24px auto 0 auto;
}
}


@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        display: none;
        opacity: 0;
        z-index: -1;
    }
}

#loader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #11161e;
    z-index: 4096;
}

#loader.loaded {
    animation: fadeOut 0.5s forwards;
}

.sk-cube-grid {
    width: 40px;
    height: 40px;
}

.sk-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: #ccd9df;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
            animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}

.sk-cube-grid .sk-cube1 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
}

#loader p {
    margin-top: 1em;
    color: #d1d8de;
    font-family: 'Play', sans-serif;
    font-size: 2rem;
    font-weight: bold;
}

@-webkit-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
      -webkit-transform: scale3D(1, 1, 1);
              transform: scale3D(1, 1, 1);
    } 35% {
      -webkit-transform: scale3D(0, 0, 1);
              transform: scale3D(0, 0, 1); 
    }
}
  
@keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
      -webkit-transform: scale3D(1, 1, 1);
              transform: scale3D(1, 1, 1);
    } 35% {
      -webkit-transform: scale3D(0, 0, 1);
              transform: scale3D(0, 0, 1);
    } 
}


#panel {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    background: linear-gradient(var(--panel-color), var(--panel-color)), linear-gradient(to right, #3d435f 0%, #ccc 50%, #3d435f 100%);
    background-clip: padding-box, border-box;
    background-origin: border-box;
    border-top: 1px solid transparent;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

@media screen and (min-width: 960px) {
#panel {
    width: auto;
    max-width: 960px;
    height: auto;
    padding: 0 24px 80px 24px;
    border: none;
    border-radius: 0;
    background-color: #1e2e5b;
    background: url("/assets/images/panel-top.jpg") repeat no-repeat, url("/assets/images/panel-body.jpg") repeat-y;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.7);
}
}

#foot-container {
    width: 100%;
    min-height: 184px;
    margin-top: -36px;
    margin-bottom: 216px;
    font-size: 1.4rem;
}

@media screen and (max-width: 959.98px) {
#foot-container {
    height: auto;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 32px;
    padding-top: 32px;
    background-color: #1e212e;
}
}

#foot-container i {
    margin-right: 4px;
    font-family: 'icomoon';
}

.foot {
    display: flex;
    justify-content: flex-end;
    width: auto;
    padding: 0 0 20px 24px;
}

.foot-reflection {
    display: flex;
    justify-content: flex-end;
    width: auto;
    margin-top: 8px;
    padding: 0 0 8px 24px;
    transform: rotateX(180deg);
    opacity: 0.5;
}

.foot > dl,
.foot-reflection > dl {
    margin-right: 24px;
}

.foot dl,
.foot-reflection dl {
    display: flex;
}

.foot dl dt::after,
.foot-reflection dl dt::after {
    content: '：';
}

@media screen and (max-width: 959.98px) {
#foot-container {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

.foot {
    display: block;
    line-height: 2;
}

.foot > dl {
    text-align: right;
}

.foot-reflection {
    display: none;
}
}

footer {
    width: 960px;
    height: 144px;
}

footer p {
    position:relative;
    color: #666;
    font-family: 'Play', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 0 3px 2px #fff !important;
}

@media screen and (min-width: 520px) {
footer div {
    display: flex;
}

footer div p:first-of-type {
    margin-right: 8px;
}
}

footer ul {
    margin-top: 32px;
    margin-bottom: 32px;
}

footer ul li {
    display: inline;
    margin-right: 16px;
    padding-right: 16px;
    list-style-type: none;
    border-right:  #666 1px solid;
    box-shadow: 2px 0 0 #eee;
}

footer ul li:last-child {
    border: none;
    box-shadow: none;
}

footer a {
    color: #666;
    font-weight: bold;
    text-shadow: 0 3px 2px #fff !important;
}

footer a:link {
    color: #666;
    font-style: normal;
    text-decoration: none;
}

footer a:visited {
    color: #666;
    font-style: normal;
    text-decoration: none;
}

footer a:hover {
    color: #aaa;
    font-style: normal;
    text-decoration: none;
}

footer a:active {
    color: #aaa;
    font-style: normal;
    text-decoration: none;
}

@media screen and (max-width: 959.98px) {
footer {
    width: 100%;
    height: auto;
    padding: 16px 0 64px 0;
    background-color: #d3d4d9;
}

footer ul {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding-left: 16px;
    line-height: 1.8;
}

footer ul li {
    border: none;
    box-shadow: none;
}

footer p {
    padding-left: 16px;
}
}

.basic_layout {
    box-sizing: border-box;
    width: 960px;
}

.textstyle-001 {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    font-size: 1.5rem;
    line-height: 1.7;
    text-indent: 1em;
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: normal;
}

.column-2 {
    columns: 2 15em;
    column-rule: 1px dotted #5c5c69;
    column-gap: 3em;
    column-fill: balance;
}

@media screen and (max-width: 959.98px) {
.textstyle-001 {
    margin-right: 0;
    margin-left: 0;
}
}

@media screen and (min-width: 960px) {
.heading-001 {
    position: relative;
    width: auto;
    max-width: 912px;
    height: 40px;
    margin: 24px auto 0 auto;
    padding-top: 2px;
    font-size: 1.7rem;
    line-height: 40px;
    text-indent: 2em;
    text-align: center;
    color: #fff;
    background-image: url("/assets/images/heading-back.jpg");
    background-repeat: no-repeat;
}
}

@media screen and (max-width: 959.98px) {
.heading-wrapper{
    display: flex;
    justify-content: center;
    width: calc(100vw - 32px);
    height: auto;
    margin: 32px auto 32px auto;
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    background-color: #393c4b;
    background-image: linear-gradient(45deg, #444756 25%, transparent 25%, transparent 75%, #444756 75%),
                      linear-gradient(45deg, #444756 25%, transparent 25%, transparent 75%, #444756 75%);
    border-radius: 4px;
    border-bottom: #999 solid 1px;
    box-shadow: 2px 6px 4px rgba(0,0,0,0.5) inset, -2px 0 3px rgba(0,0,0,0.8) inset, 0 -2px 3px rgba(0,0,0,0.2) inset;
}

.heading-001 {
    display: inline-block;
    height: auto;
    margin: 0 auto;
    padding: 8px 12px 0 12px;
    font-size: 1.7rem;
    text-align: left;
    color: #fff;
    line-height: 1.8;
}

#base p:first-of-type {
    margin-top: 16px;
    margin-left: 0;
}
}

.content-headline-margin-top {
    margin-top: 32px;
}

.heading-002 {
    position: relative;
    display: inline-block;
    width: auto;
    max-width: 800px;
    height: auto;
    margin: 16px 0 0 0;
    padding: 6px 0 6px 34px;
    color: #ddd;
    font-size: 1.6rem;
    text-indent: 0;
}

.heading-002::before {
    content: '';
    position: absolute;
    display: inline-block;
    top: 40%;
    width: 2.4rem;
    margin-left: 2px;
    left: 0;
    border-top: 4px solid #009FFA;
}

@media screen and (max-width: 959.98px) {
.heading-002 {
    font-size: 1.4rem;
    line-height: 1.4;
}

.heading-002::before {
    margin-left: 0;
}
}

.heading-003 {
    display: inline-block;
    background-color: #3752aa;
    border-radius: 16px;
}

.heading-004 {
    border-bottom: #999 1px dotted;
}

.heading-004:first-of-type {
    border-top: #999 1px dotted;
} 
.heading-005 {
    display: inline-block;
    position: relative;
    top: 4px;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background: linear-gradient(180deg, #000 0%, rgb(60,60,60) 95%, rgb(150,150,150) 100%);
}

.heading-005::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    background: radial-gradient(rgb(200,40,106) 0%, rgb(166,31,87) 30%, rgb(109,26,61) 60%, rgb(73,23,46) 100%);
    box-shadow: 0px 4px 3px 0px rgba(41,2,19,0.4) inset;
}

.heading-005::after {
    content: '\ea1c';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 17px;
    height: 16px;
    padding-top: 4px;
    padding-left: 1px;
    text-align: center;
    color: #e4e6e9;
    font-family: 'icomoon';
    font-size: 1.2rem;
    box-shadow: 0px 9px 0px 0px rgba(255,255,255,0.3) inset;
}

.heading-006 {
    padding: 0.5em 0;
    border-top: solid 2px #4580c0;
    border-bottom: solid 2px #4580c0;
} 
.heading-007 {
    height: 3rem;
    background: linear-gradient(180deg, #3e3f4c, #30313e);
    box-shadow: 0 1px 0 #696a70 inset, 0 -1px 0 #2f3034 inset;
    line-height: 3rem;
    border-bottom: #000 solid 1px;
}

.heading-008 {
    display: inline-block;
    position: relative;
    width: 2rem;
    height: 2rem;
    background: linear-gradient(180deg, #000 0%, #28282a 50%, #6d6e74 100%);
    border-radius: 50%;
}

.heading-008::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 1.4rem;
    height: 1.4rem;
    background: radial-gradient(#94acbc 0%, #83accd 30%, #5384b3 60%, #284a88 80%, #122f5a 100%);
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(32,34,47,.4);
    filter: drop-shadow(0 0 4px rgba(7,99,246,.9)) drop-shadow(0 0 4px rgba(7,143,250,.6));
}

.heading-008::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 7px;
    width: 0.6rem;
    height: 0.4rem;
    background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(200,200,200,.8));
    border-radius: 50%;
    filter: blur(1px);
}


[class^="caption-"] {
    padding-bottom: 1.5rem;
    font-size: 1.3rem;
    line-height: 1;
}

[class^="caption-"]::before {
    margin-right: 2px;
    color: var(--icon-color);
}

.caption-001 {
    color: #fff;
}

.caption-001::before {
    content: '\f0a6';
} 
.caption-002 {
    color: #cbcbcb;
}

.caption-002::before {
    content: '\f0a6';
} 
.caption-003::before {
    content: '\f0a7';
} 

[class^="liststyle-"] {
    width: auto;
    margin: 0 auto;
    font-size: 1.4rem;
    line-height: 1.7;
}

@media screen and (max-width: 959.98px) {
[class^="liststyle-"] {
        margin: 0 auto;
}
}

.liststyle-001 dt {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 8px;
    font-size: 1.6rem;
}

.liststyle-001 i {
    margin-right: 12px;
    color: #8affff;
    font-family: 'icomoon';
    font-size: 2.4rem;
    font-weight: normal;
    filter: drop-shadow(0 0 6px rgba(7,99,246,.9)) drop-shadow(0 0 6px rgba(7,173,250,0.6));
}

[class^="liststyle-"] dd {
    margin-left: 32px;
    margin-bottom: 16px;
}

[class^="liststyle-"] dt img {
    margin-top: -4px;
    margin-right: 4px;
    vertical-align: middle;
}

.liststyle-002 li img {
    position: absolute;
    top: -4px;
    left: 0;
    vertical-align: middle;
}

.liststyle-002 li .mouse-hover{
    position: absolute;
    top: -4px;
    left: 0;
}
.liststyle-002 dt .mouse-hover {
    position: absolute;
    top: 0px;
    left: 0;
}

.liststyle-002 li .mouse-hover,
.liststyle-002 dt .mouse-hover {
    transition: .25s ease-in-out;
    opacity: 0;
}

.liststyle-002 li {
    padding-left: 24px;
}

.liststyle-002 dt {
    display: inline-block;
}

.liststyle-002 li,
.liststyle-002 dt {
    position: relative;
    margin-top: 8px;
    font-size: 1.6rem;
}

.liststyle-002 li:hover .mouse-hover,
.liststyle-002 dt:hover .mouse-hover {
    opacity: 1;
}

@media screen and (min-width: 960px) {
.liststyle-002 span.heading-008 {
    display: none;
}
}

@media screen and (max-width: 959.98px) {
.liststyle-002 img {
    display: none;
}

.liststyle-002 span {
    display: inline-block;
    top: 4px;
}

.liststyle-002 span:first-of-type {
    margin-right: 8px;
}

.liststyle-002 dd ul {
    margin-left: 0;
}
}

.liststyle-003 li {
    display: flex;
    align-items: center;
    height: 40px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    text-indent: 0;
    line-height: 40px;
    list-style-type: none;
    border-bottom: 1px #99a dotted;
}

.liststyle-003 li::before {
    content: url(/assets/images/icon-tamori.png);
    margin-right: 16px;
    line-height: normal;
}

ol.liststyle-004 {
    margin-left: 1em;
    counter-reset: li;
}

ol.liststyle-004 > li {
    position: relative;    padding-left: 2.5em;     list-style: none;
    }

ol.liststyle-004 > li::before {
    counter-increment: li;
    content: counter(li);
    position: absolute;    width: 1.3em;    height: 1.3em;        left: 0;    margin-right: 1em;
    font-family: 'Play';
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,.7);
    color: #fff;    background: #0d799d;            text-align: center;    line-height: 1.4;}

.liststyle-005 li {
    display: table;
}

.liststyle-005 li::before {
    content: url(/assets/images/listtype-02.png);
    display: table-cell;
    position: relative;
    vertical-align: top;
    padding-right: 8px;
    line-height: normal;
}

.liststyle-006 > li {
    display: inline-block;
    padding: 4px 16px 0 16px;
    background-color: rgba(138, 157, 190, 0.4);
    border-radius: 4px;
}

.liststyle-007 > li {
    display: table;
    padding: 0 0 0.5em 0;
    font-size: 1.5rem;
    list-style: none;
    background: none;
}

.liststyle-007 > li::before {
    content: '\ea10';
    display: table-cell;
    position: relative;
    top: 0;
    padding-right: 8px;
    vertical-align: top;
    color: #5676f3;
    font-family: 'icomoon';
}

.liststyle-008 li {
    margin-left: 0;
    list-style: none;
}

.liststyle-008 {
    position: relative;
    top: 4px;
    left: 0;
    margin-right: 8px;
    font-size: 2.2rem;
}

.liststyle-009 {
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
}

.liststyle-009 div {
    display: flex;
    flex-direction: row;
    margin-left: 1em;
}

.liststyle-009 dt {
    display: inline-block;
    margin: 0 8px 0 0;
    color: var(--dt-color);
    white-space: nowrap;
}

.liststyle-009 dd {
    margin: 0;
}

.liststyle-010 {
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
    text-indent: 0;
}

.liststyle-010 div {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 32px 0.5em 0;
}

.liststyle-010 dt {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 2px 0;
    color: #fff;
    text-align: center;
    background-color: #1f5598;
    border-radius: 2px;
}

.liststyle-010 dd {
    margin: 0 0 1.5em 1em;
}

.liststyle-011 {
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
    text-indent: 0;
    list-style-type: none;
}

.liststyle-011 div {
    display: flex;
    flex-direction: row;
    margin: 0 0 0.5em 1em;
}

.liststyle-011 li::before,
.liststyle-011 dt::before {
    content: '\e836';
    margin-right: 8px;
    font-family: 'Material Icons';
    font-size: 0.5em;
}

.liststyle-mb li {
    margin-bottom: 0.5em;
}


.enclosure {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.8rem;
    margin-right: 4px;
    margin-bottom: 4px !important;
    border-radius: 2px;
}

.enclosure-wrap .platform {
    width: 5.7rem;
    font-weight: bold;
    color: #fff;
    background-color: #ab2e50;
}

.enclosure-wrap .platform span {
    color: #fff;
    font-size: 1.4rem;
}

.enclosure-wrap .platform-uncertain {
    width: 5.7rem;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    background-color: #6d1f1b;
}

.enclosure-wrap .media {
    width: 5.7rem;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    background-color: #395a9f;
}

.enclosure-wrap .unsupported {
    width: 5.7rem;
    font-size: 1.4rem;
    font-weight: bold;
    color: #ccc;
    background-color: #666;
}

span[class^="dash"] {
    display: inline-block;
    margin-right: 8px;
    margin-left: 4px;
    text-indent: 0;
    text-align: left;
    text-justify: none;
    letter-spacing: -0.1em;
}

span.dash-before {
    margin-left: 0;
}

span.dash-after {
    margin-right: 0;
}


.pagination {
    display: flex;
    width: auto;
    margin: 32px auto;
}

.pagination ol {
    display: flex;
    margin: 0 auto;
    list-style-type: none;
}

.pagination li {
    margin: 0 8px;
    background-color: #ccd;
    border-radius: 15%;
}

.pagination li.pagination-current {
    background-color: #728ae0;
}

.pagination ol a {
    display: block;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    color: #000;
    transition: all 0.4s ease-in;
}

.pagination ol a:hover {
    background-color: #21d4fd;
    border-radius: 15%;
}


.table-scroll {
    width: 100%;
    overflow-x: auto;
}

@media screen and (min-width: 960px) {
.table-scroll {
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none;
}

.table-scroll::-webkit-scrollbar {
    display: none;
}
}

table.table-001 {
    display: table;
    table-layout: fixed;
    margin-left: auto;
    margin-right: auto;
}

table.table-001 thead {
    display: table-header-group;
    font-size: 1.4rem;
    text-align: center;
}

table.table-001 tbody {
    display: table-row-group;
    font-size: 1.4rem;
}

table.table-001 th {
    display: table-cell;
    height: 3.5rem;
    background: linear-gradient(180deg, #3e3f4c, #30313e);
    box-shadow: 0 1px 0 #696a70 inset, 0 -1px 0 #2f3034 inset;
    text-align: center;
    vertical-align: middle;
    border-bottom: #000 solid 1px;
}

table.table-001 tr {
    display: table-row;
}

table.table-001 td {
    display: table-cell;
    padding: 8px 8px 8px 8px;
    vertical-align: middle;
    line-height: 1.6;
    border-bottom: #ccc dotted 1px;
    background-color: rgba(72,72,84,0.25);
}

table.table-001 td:last-child {
    padding-left: 8px;
    padding-right: 16px;
}

table.table-001 img {
    margin: 0;
}


.gallery .product-caption {
    margin-left: 32px;
}

.gallery .image {
    margin: 0 32px;
    padding: 16px 0;
    text-align: center;
    vertical-align: middle;
    background: linear-gradient(90deg, #24273d, #323c5a 50%, #24273d);
    border-radius: 6px;
    border-bottom: #666 solid 1px;
    box-shadow: 2px 3px 3px rgba(0,0,0,0.8) inset, -2px 0 3px rgba(0,0,0,0.8) inset, 0 -2px 3px rgba(0,0,0,0.2) inset;
}

.note {
    width: auto;
    max-width: 976px;
    margin: 0 auto;
    color: var(--dt-color);
}

.size-80 {
    font-size: 1.3rem;
}

.align-right {
    text-align: right;
}


.image-frame {
    padding: 16px 0;
    text-align: center;
    vertical-align: middle;
    background: linear-gradient(90deg, #24273d, #323c5a 50%, #24273d);
    border-radius: 6px;
    border-bottom: #666 solid 1px;
    box-shadow: 2px 3px 3px rgba(0,0,0,0.8) inset, -2px 0 3px rgba(0,0,0,0.8) inset, 0 -2px 3px rgba(0,0,0,0.2) inset;
}

img.screenshot {
    width: auto;
    height: auto;
    max-width: 320px;
    max-height: 320px;
    padding: 0;
    background-color: #000;
    border-top: 12px solid #000;
    border-bottom: 12px solid #000;
    border-left: 12px solid #000;
    border-right: 12px solid #000;
    border-radius: 8px;
}

@media screen and (max-width: 367.98px) {
img.screenshot {
    border: none;
    border-radius: 0;
}
}

img.ss-320 {
    width: auto;
    height: 200px;
    -ms-interpolation-mode: bicubic;
    image-rendering: auto;
    filter: brightness(250%) contrast(100%);
}

img.vertical {
    width: 200px;
    height: 320px;
    -ms-interpolation-mode: bicubic;
    image-rendering: auto;
    filter: brightness(250%) contrast(100%);
}

img.ss-160 {
    width: auto;
    height: 100px;
    padding: 4px;
    background-color: #000;
    border-radius: 4px;
    filter: brightness(250%) contrast(100%);
}

img.ss-320-nf {
    width: auto;
    height: 200px;
}

img.ss-160-nf {
    width: auto;
    height: 100px;
}

img.ss-096 {
    width: 96px;
    height: 60px;
    filter: brightness(250%) contrast(100%);
}

img.gallery-image {
    width: auto;
    height: auto;
    max-width: 320px;
    max-height: 320px;
}

img.no-filter {
    filter: none;
}




.cp-box {
    position: relative;
}

.cp-box label {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 160px;     text-align: center;
    color:#1e212e;
        background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(37, 39, 52, 0.95) 90%);
    cursor: pointer;
    z-index: 1;
}

.cp-box input:checked + label {
    background: inherit; }

.cp-box label:after {
    content: '\ea43'' 続きを表示';
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 16rem;
    line-height: 2.5rem;
    font-family: 'icomoon';
    letter-spacing: 0.05em;
    color: #fff;
    background-color: rgba(7, 140, 160, 1);
    border-radius: 20px;
    transform: translate(-50%, 0);
    z-index: 2;
}

.cp-box input {
    display: none;
}

.cp-box .cp-container {
    overflow-y: hidden;
    height: 480px;     transition: all 0.5s;
}

.cp-box input:checked + label {
    }

.cp-box input:checked + label:after {
    content: '\ea41'' 閉じる';
    font-family: 'icomoon';
}

.cp-box input:checked ~ .cp-container {
    height: auto;
    padding-bottom: 80px;     transition: all 0.5s;
}


.head-container {
    width: 100%;
    height: auto;
    min-height: 134px;
    margin: 0 auto;
    background: linear-gradient(90deg, #25262a 0%, #4a4e59 50%, #25262a 100%);
    box-shadow: rgba(55,55,62,.8) 0 -1px 0 0 inset, rgba(16,16,16,.7) 0 8px 8px 1px;
}

header {
    max-width: 100vw;
    margin: 0 auto;
    padding-top: 8px;
}

@media screen and (min-width: 768px) and (max-width: 959.98px) {
.head-container {
    width: 100vw;
}

header {
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 32px 0;
}

header div {
    margin-left: 16px;
}
}

@media screen and (min-width: 960px) {
.head-container {
    margin: 0 auto 32px auto;
}

header {
    width: 960px;
    max-width: 960px;
    margin: 0 auto;
    padding-top: 8px;
}

header > div {
    display: flex;
    justify-content: space-between;
}

header > div #site-search {
    display: flex;
}
}

#logotype {
    width: 128px;
    height: 64px;
}

@media screen and (max-width: 959.98px) {
#logotype {
    margin: 0 auto;
}
}

#site-search {
    width: auto;
    max-width: 100vw;
    margin-top: 8px;
    margin-left: 32px;
}

@media screen and (max-width: 959.98px) {
#site-search {
    margin-left: 8px;
}
}

#site-search input#search-box-input {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

@media screen and (min-width: 768px) and (max-width: 959.98px) {
header > div #site-search {
    display: flex;
    margin-top: 16px;
}
}

@media screen and (min-width: 768px) {
#site-search input#search-box-input,
#site-search #search-box-open {
    display: none;
}
}

#site-search .search-box-unshown {
    display: none;
}

@media screen and (max-width: 767.98px) {
    #site-search {
    margin-top: 0px;
}

#site-search #search-box-open {
    position: absolute;
    top: 16px;
    right: 16px;
}

#site-search #search-box-open p {
    color: #ccc;
    font-family: 'Material Icons';
    font-size: 2.4rem;
}

#site-search .search-box {
    visibility: hidden;
    height: 0;
    opacity: 0;
    transition: height 1s linear;
}

#site-search input#search-box-input:checked ~ .search-box {
    visibility: visible;
    height: auto;
    margin-top: 16px;
    opacity: 1;
    transition: all .5s linear;
    }


header div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#site-search > div:first-child {
    margin-bottom: 32px;
    margin-right: 16px;
}

.search-box > div {
    flex-direction: row;
    justify-content: flex-start;
}
}

#site-search > div {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}

#site-search div:first-child {
    margin-right: 16px;
}

#site-search p {
    width: auto;
    height: 2rem;
    font-size: 1.4rem;
    color: #cdd6de;
}

#site-search p::before {
    font-size: 2rem;
    color: #8affff;
    filter: drop-shadow(0 0 6px rgba(7,99,246,.9)) drop-shadow(0 0 6px rgba(7,173,250,0.6));
}

@media screen and (max-width: 959.98px) {
#site-search {
    display: flex;
    margin: 0 auto 0 auto;
}
}

.search-box > div {
    display: flex;
    height: 2rem;
    line-height: 2rem;
}

.search-box span.material-icons {
    margin-left: 4px;
    color: #8baffc;
    font-size: 2rem;
    cursor: pointer;
}

.search-box span.material-icons:hover {
    color: #5ce1fe;
    transition: all 0.4s;
}

.search-box input:focus {
    outline: none;
}

#msearch input#query {
    width: 256px;
    height: 26px;
    padding: 2px 12px 0 12px;
    color: #fff !important;
    background-color: #5a6981;
    border: none;
    border-bottom: #999 1px solid;
    border-radius: 4px;
    border-radius: 26px;
    box-shadow: inset 0 2px 3px 2px rgba(0,0,0,0.6);
}

#msearch input#msearch-submit {
    width: auto;
    height: 24px;
    vertical-align: middle;
    text-align: center;
    font-family: "Material Icons";
    font-size: 2rem;
    color: #fff;
    background: linear-gradient(rgb(83,85,91)0%,rgb(79,86,94)50%,rgb(53,58,71)50%,rgb(71,78,92)100%);
    border-top: #000 1px solid;
    border-bottom: #888 1px solid;
    border-left: #000 1px solid;
    border-right: #000 1px solid;
    transition: .25s;
}

#msearch input#msearch-submit:hover {
    color: #8affff;
}


#breadcrumbs {
    width: 100%;
    max-width: 960px;
    height: auto;
    min-height: 16px;
    margin: 12px auto 4px auto;
    white-space: nowrap;
    overflow: hidden;
}

#breadcrumbs ol::-webkit-scrollbar {
    display: none;
}

#breadcrumbs ol {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    margin-left: 8px;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#breadcrumbs li {
    width: auto;
    max-width: 32em;
    margin-right: 8px;
    font-size: 1.4rem;
    list-style-type: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#breadcrumbs li:first-child {
    font-family: 'Play', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
}

#breadcrumbs li:last-child {
    margin-right: 0;
}

#breadcrumbs li:not(:first-child)::before {
    content: '\ea1c';
    position: relative;
    top: 1px;
    margin-right: 4px;
    color: #ccc;
    font-family: 'icomoon';
}

#breadcrumbs li:last-of-type {
    color: #63e2fe;
}

@media screen and (max-width: 959.98px) {
#breadcrumbs {
    width: calc(100vw - 16px);
}

#breadcrumbs ol {
    flex-wrap: nowrap;
    overflow-x: scroll;
}

#breadcrumbs li {
    max-width: auto;
}

#breadcrumbs li:last-child {
    margin-right: 16px;
}

#breadcrumbs li a {
    color: var(--link-color);
}
}

@media screen and (min-width: 520px) and (max-width: 959.98px) {
#breadcrumbs {
    margin: 32px 0 24px 8px;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#breadcrumbs::-webkit-scrollbar {
    display: none;
}

#breadcrumbs ol {
    width: calc(100vw - 16px);
    margin-left: 8px;
}
}

@media screen and (max-width: 519.98px) {
#breadcrumbs {
    max-width: 519.98px;
    margin: 32px auto 24px auto;
}
}


#page-top {
    position: fixed;
    right: 32px;
    bottom: 32px;
    width: 90px;
    height: 90px;
    background-color: #1b5270;
    border-radius: 50%;
    box-shadow: 0px 16px 16px -8px rgba(0,0,0,0.7);
    transform: none;
    opacity: 0.7;
}

#page-top a {
    display: block;
    position: relative;
    width: 90px;
    height: 90px;
    text-decoration: none;
}

#page-top a::before {
    content: '\f0a6';
    position: absolute;
    top: -24px;
    bottom: 0;
    right: 0;
    left: 0;
    width: 32px;
    height: 32px;
    margin: auto;
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 3.2rem;
    color: #fff;
    text-align: center;
}

#page-top a::after {
    content: 'PAGE TOP';
    position: absolute;
    top: 54px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    font-size: 1.4rem;
    font-family: 'Play', sans-serif;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

@media screen and (max-width: 959.98px) {
#page-top {
    position: fixed;
    right: 0px;
    bottom: 0px;
    transform: scale(0.6);
}
}


@media screen and (min-width: 960px) {
#home-container {
    position: relative;
    height: 952px;
}
}

#information {
    width: calc(100% - 32px);
    max-width: 400px;
    height: auto;
    margin: 0 auto 32px auto;
    padding-bottom: 32px;
    color: #fff;
    font-size: 1.4rem;
}

@media screen and (min-width: 960px) {
#information {
    position: absolute;
    top: 0;
    left: 16px;
    width: 400px;
}
}

#information p {
    margin-top: 16px;
    text-align: center;
}

#information h2 {
    text-align: center;
    color: #dc1f66;
    font-family: 'Play', sans-serif;
    font-size: 3rem;
}

#information > div {
    display: flex;
    justify-content: center;
    margin-top: 1em;
    padding-bottom: 24px;
}

#information dl {
    display: flex;
    font-size: 1.7rem;
}

#information > div dl dt {
    font-family: 'Play', sans-serif;
    font-weight: bold;
}

#information > div dl dd {
    font-family: 'Play', sans-serif;
    font-weight: bold;
}

#information > div dt::after {
    content: '：';
}

#information dl.notice {
    display: flex;
    flex-direction: column;
    margin: 0 16px;
    line-height: 1.4;
    font-size: 1.4rem;
}

#information dl.notice div dt {
    color: var(--dt-color);
    font-family: 'Play', sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
}

.glass-container{
    gap: 20px;
    border-radius: 8px;
    backdrop-filter: blur(5px);
    background-color: rgba(74,98,151,0.4);
    box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
    border-top: 1px rgba(255,255,255,0.4) solid;
    border-bottom: 1px rgba(40,40,40,0.35) solid;
    border-left: 1px rgba(192,192,192,0.35) solid;
    border-right: 1px rgba(192,192,192,0.35) solid;
}

@media screen and (max-width: 959.98px) {
#ohfm-7-mockup {
    display: none;
}
}

@media screen and (min-width: 960px) {
#ohfm-7-mockup {
    position: relative;
    top: 400px;
    left: -136px;
    width: 576px;
    height: 282px;
}

.webp #ohfm-7-mockup {
    background: url('/assets/images/logotype-mockup.webp') left top no-repeat,
                url('/assets/images/logotype-mockup-reflection.webp') left 116px bottom no-repeat;
}

.no-webp #ohfm-7-mockup {
    background: url('/assets/images/logotype-mockup.png') left top no-repeat,
                url('/assets/images/logotype-mockup-reflection.png') left 116px bottom no-repeat;
}
}

@media screen and (max-width: 959.98px) {
#fm77av40ex {
    width: 96%;
    max-width: 496px;
    height: calc(100vw * 0.96 * 1.2);
    max-height: 607px;
    margin: 0 auto;
}

.webp #fm77av40ex {
    background: url('/assets/images/fm77av40ex.webp') center top / contain no-repeat;
}

.no-webp #fm77av40ex {
    background: url('/assets/images/fm77av40ex.png') center top / contain no-repeat;
}
}

@media screen and (min-width: 960px) {
#fm77av40ex {
    position: relative;
    top: -274px;
    left: 200px;
    width: 496px;
    height: 687px;
    margin: 0 auto;
}

.webp #fm77av40ex {
    background: url('/assets/images/fm77av40ex.webp') center top no-repeat,
                url('/assets/images/fm77av40ex-reflection.webp') center bottom no-repeat;
}

.no-webp #fm77av40ex {
    background: url('/assets/images/fm77av40ex.png') center top no-repeat,
                url('/assets/images/fm77av40ex-reflection.png') center bottom no-repeat;
}
}

@media screen and (max-width: 511.98px) {
#fm77av40ex ul {
    display: none;
}
}

#fm77av40ex ul {
    position: relative;
    top: 72px;
    left: 81px;
    list-style: none;
}


#modification .years {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 48px 8px 0 8px;
    line-height: 1.7;
    font-size: 1.5rem;
    list-style: none;
}

#modification .years li {
    margin-right: 2em;
}

#modification .years li::before {
    content: 'slideshow';
    position: relative;
    top: 3px;
    margin-right: 4px;
    font-family: 'Material Icons';
    font-size: 1.6rem;
    color: #aacbf2;
}

#modification .modifications {
    margin: 8px 0 0 16px;
    line-height: 1.7;
    font-size: 1.5rem;
    list-style-type: square;
}

#modification h3 {
    margin-top: 48px;
}

#modification .modifications .itemlist-1 {
    margin-bottom: 1em;
    color: #53bce3;
    list-style: none;
}

#modification .modifications .itemlist-2 {
    color: #53bce3;
    list-style: none;
}

#modification .modifications p:not(:first-child) {
    margin-top: 1em;
}

#modification .modifications .contribute,
#modification .modifications p.note {
    margin-top: 0;
    margin-bottom: 1em;
}

#modification .modifications .contribute dl {
    display: flex;
    flex-direction: row;
    color: var(--dt-color);
}

#modification .modifications .contribute dt::before,
#modification .modifications .note::before {
    content: '＊';
}

#modification .modifications .contribute dt::after {
    content: '：';
}

#modification .modifications .contribute dd:not(:last-child)::after {
    content: '、';
}

#modification h4 {
    display: inline-block;
    margin: 2em 0 0.5em 0;
    padding: 4px 16px 4px 12px;
    color: #7cabe4;
    color: #fff;
    background-color: #1f8196;
    font-size: 1.4rem;
    border-radius: 3px;
    border: none;
}

#modification h4::before {
    content: '\e3c9';
    position: relative;
    top: 3px;
    margin-right: 4px;
    color: var(--icon-color);
    color: #fff;
    font-family: 'Material Icons';
    font-size: 1.8rem;
}

#modification .content {
    display: flex;
    align-items: baseline;
    position: relative;
    color: #ac3755;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.3;
}

#modification .content::before {
    content: '';
    display: block;
    position: absolute;
    top: 0.2em;
    left: -1em;
    width: .75em;
    height: .75em;
    margin-right: 10px;
    background-color: #ac3755;
}

#modification .memo {
    margin: 0 16px;
    font-size: 1.4rem;
    line-height: 1.6;
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: normal;
}

@media screen and (max-width: 959.98px) {
#modification .years {
    margin-top: 16px;
}

#modification .modifications > li {
    margin-left: 0.5em;
}

#modification .modifications .itemlist-1,
#modification .modifications .itemlist-2 {
    margin-left: 1em;
    list-style: circle;
}

#modification .memo {
    margin: 0;
}
}


#links ul {
    display: block;
    margin: 0 32px 0 32px;
    list-style-type: none;
}

#links ul#link-category {
    margin-top: 32px;
    margin-left: 48px;
    margin-bottom: 32px;
}

#links ul#link-category li {
    margin: 0px 0 0px 0;
    padding: 8px 0 8px 24px;
    border-bottom: 1px #99a dotted;
}

#links ul#link-category li:first-child {
    border-top: 1px #99a dotted;
}

#links ul#link-category li img {
    padding-top: 8px;
}

#links ul#link-category li span {
    margin-left: 16px;
}

#links div[class*="link"] {
    width: 100%;
    margin: 48px 0 64px 0;
}

#links div div {
    display: flex;
    margin: 16px 0 32px 0;
    text-indent: 0;
}

#links div div div {
    min-width: 320px;
    max-width: 320px;
    margin: 0 16px 0 0;
}

#links dl {
    display: flex;
    margin-right: 16px;
}

#links dl div {
    display: flex;
    flex-direction: column;
}

#links dl dt {
    font-size: 1.3rem;
}

#links dl dt span {
    color: #ccc;
}

#links dl dt span::after {
    content: ':';
    margin: 0 4px 0 4px;
}

#links .image-frame {
    padding-top: 24px;
}

@media screen and (max-width: 959.98px) {
#links div[class*="link"] {
    margin: 0 0 64px 0;
}

#links .textstyle-001 {
    margin-top: 16px;
}

#links ul#link-category {
    margin: 0 0 32px 0;
}

#links ul#link-category li {
    padding-left: 0;
    font-size: 1.4rem;
}

#links ul#link-category li a {
    color: var(--link-color);
}

#links ul#link-category li span {
    margin-left: 0;
}

#links ul#link-category li img {
    display: none;
}

#links ul {
    margin: 16px 0 0 0;
}

#links div div div {
    margin: 0 auto;
}

#links dl {
    flex-direction: column;
    margin: 0 auto;
}

#links div div dl dd {
    margin-top: 16px;
    margin-bottom: 32px;
    padding: 0 16px;
}
}


#sitemap ul {
    font-size: 1.5rem;
    line-height: 2;
    list-style: none;
}

#sitemap section > ul {
    margin-top: 48px;
    padding: 0 16px;
}

#sitemap section > ul > li {
    position: relative;
    margin-top: 1em;
}

#sitemap section > ul > li::before {
    content: '\ea1c';
    margin-right: 4px;
    color: deepskyblue;
    font-family: 'icomoon';
}

#sitemap section ul ul li::before {
    content: '\e047';
    width: 1rem;
    padding-right: 4px;
    font-family: 'Material Icons';
    font-size: 1rem;
}

#sitemap section ul ul ul li::before {
    content: '\e3c6';
    margin-right: 4px;
    font-family: 'Material Icons';
    font-size: 0.5em;
}

#sitemap section > ul > ul {
    margin-left: 32px;
}

#sitemap section > ul ul ul {
    margin-left: 1em;
}

@media screen and (max-width: 959.98px) {
#sitemap section > ul {
    margin-top: 16px;
}
}


#contribute .mailto {
    display: flex;
    align-items: center;
}

#contribute .mailto a {
    font-family: 'Play', sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
}

@media screen and (max-width: 959.98px) {
#contribute div:nth-child(2) {
    margin-top: 0;
}
}


#support .shopping div {
    display: flex;
    flex-direction: column;
}

#support .pointsite {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#support .pointsite p {
    width: 360px;
    margin: 16px 32px;
    text-align: center;
}

@media screen and (min-width: 960px) {
#support section {
    margin-top: 48px;
}

#support .pointsite p {
    margin: 16px;
}
}

@media screen and (max-width: 671.98px) {
#support p img {
    max-width: calc(100vw - 32px);
}
}


#product .caption-002 {
    margin-left: 0;
    color: #ddd;
}

.product-list-container {
    width: auto;
        margin: 16px 0 0 0;
    list-style-type: none;
}

.product-list {
    position: relative;
    width: auto;
        margin: 8px 0 8px 0;
    padding-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    border-bottom: #565965 1px dotted;
}

.product-list p.product-list-thumbnail {
    display: flex;
    width: 192px;
    margin-right: 16px;
    padding: 8px 16px 4px 16px;
    background: linear-gradient(180deg, #323c5a, #24273d);
    border-bottom: #666 1px solid;
    border-radius: 4px;
    box-shadow: 0 1px 1px 1px rgba(0,0,0,.8) inset;
}

.product-list p a {
    margin: auto;
}

.product-list-details {
    width: auto;
    min-height: 96px;
    line-height: 1.4;
}

.product-list dt {
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
}

.product-list dd {
    display: list-item;
    margin-left: 1.5em;
    color: var(--dt-color);
    list-style-type: square;
}

.product-list dl dd {
    margin-right: 8px;
    font-size: 1.5rem;
}

.product-list-details .list-involvement span:not(:last-child)::after {
    content: ',';
    margin-right: 4px;
}

.product-list p.compilation {
    display: block;
    position: absolute;
    top: 7em;
    left: 0em;
    margin: 8px 0 0 256px;
    font-size: 1.3rem;
    line-height: 1;
    color: aqua;
}

.product-list label:hover {
    border-bottom: #7594ce 1px solid;
}

input[id^="product-list-parent-"] {
    display: none;
}

.product-list p.compilation::before {
    content: '\f0a7';
    position: relative;
    margin-right: 4px;
    color: aqua;
    font-family: "Line Awesome Free";
    font-size: 1.6rem;
    font-weight: bold;
}

.product-list label.selected::before {
    transform: rotate(-90deg);
    transition: all 0.25s;
}

.children {
    margin-left: 32px;
}

.product-list-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 16px 0 16px 0;
    font-size: 1.3rem;
}

.product-list-controls div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    min-height: 3rem;
}

.product-list-controls i {
    width: auto;
    color: #34b6a3;
    line-height: 1.6rem;
    font-family: 'icomoon';
    font-size: 1.5rem;
    font-weight: bold;
}

.product-list-controls input {
    height: 2rem;
    margin-left: 8px;
    margin-right: 32px;
}

.product-list-controls ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: -6px;
    margin-left: 8px;
    line-height: 1.6rem;
    list-style-type: none;
}

.product-list-controls ul li {
    position: relative;
    width: 5em;
    height: auto;
    margin: 6px 8px 0 0;
    padding: 6px 12px;
    text-align: center;
    color: #9ea7b4;
    background: linear-gradient(180deg, #3e3f4c, #30313e);
    border: #000 2px solid;
    border-radius: 3px;
    box-shadow: 0 1px 0 #696a70 inset, 0 -1px 0 #2f3034 inset;
    transition: color .3s ease-in-out;
    cursor: pointer;
}

.product-list-controls ul li:hover {
    color: #02cdf9;
    text-shadow: 0 0 1px rgba(76,188,222,1);
}

.product-list-controls ul li.active-asc,
.product-list-controls ul li.active-desc {
    padding-right: 24px;
    color: #02cdf9;
    text-shadow: 0 0 1px rgba(76,188,222,1);
}

.product-list-controls ul li.active-asc::after {
    content: '';
    position: absolute;
    top: 40%;
    right: 0.8rem;
    border-right: 5px solid transparent;
    border-bottom: #02cdf9 5px solid;
    border-left: 5px solid transparent; 
}

.product-list-controls ul li.active-desc::after {
    content: '';
    position: absolute;
    top: 40%;
    right: 0.8rem;
    border-right: 5px solid transparent;
    border-top: #02cdf9 5px solid;
    border-left: 5px solid transparent; 
}

.product-list-controls .form-group {
    width: 100%;
    justify-content: flex-end;
    font-size: 1.4rem;
    border: none;
}

.product-list-controls .form-hidden label {
    margin-left: 16px;
}

#index-peripherals .product-list-controls {
    margin-top: 32px !important;
}

@media screen and (max-width: 959.98px) {
.product-list-container {
    width: auto;
    margin: 0;
    padding: 0 0;
}

.product-list {
    width: auto;
}

.product-list-details {
    width: calc(100% - 192px);
    margin: 8px 0 0 0;
    padding: 0;
}

.product-list img {
    margin-left: 0;
}

.product-list ul {
    flex-direction: column;
}

.product-list dl dt a {
    color: var(--link-color);
}

.product-list dl dd {
    font-size: 1.3rem;
}

.product-list p.compilation {
    display: block;
    position: relative;
    top: 0em;
    left: 0em;
    width: 100%;
    margin: 8px 0 0 0;
    text-align: right;
}

.product-list-controls {
    flex-direction: column;
    justify-content: flex-start;
}

.product-list-controls:only-child {
    align-items: center;
}

main:not(#product) .product-list-controls {
    margin: -32px auto 16px auto;
}

.product-list-controls > div {
    flex-wrap: nowrap;
    align-items: baseline;
}

.product-list-controls > div:only-of-type {
    justify-content: center;
    margin: 0 auto;
}

.product-list-controls div i {
    margin-top: 0;
    margin-right: 16px;
}

.product-list-controls div input {
    margin: 0 0 16px 0;
}

.product-list-controls ul {
    display: flex;
    justify-content: flex-start;
    margin-top: -16px;
    margin-left: 0;
}

.product-list-controls ul li {
    margin: 0 8px 4px 0;
}

.product-list-controls ul li span {
    display: inline-block;
    width: 6rem;
    text-align: right;
}

.product-list-controls ul li i {
    margin: 0 8px;
    padding: 0 8px;
}

.product-list-controls .form-group {
    justify-content: flex-start;
}

.product-list-controls .form-hidden label:first-of-type {
    margin-left: 0;
}
}

@media screen and (min-width: 768px) {
.product-list-details {
    width: auto;
}

.product-list p.compilation {
    text-align: left;
}
}

@media screen and (min-width: 768px) and (max-width: 959.98px) {
main:not(#product) .product-list-controls {
    margin-top: -16px;
}

#index-peripherals .product-list-controls {
    margin-top: 0;
}
}

@media screen and (max-width: 639.98px) {
.product-list {
    flex-direction: column;
}

.product-list-details {
    width: 100%;
}
}

@media screen and (max-width: 519.98px) {
main:not(#product) .product-list-controls {
    margin-top: -88px;
}
}


@media screen and (max-width: 959.98px) {
main#museum article section p {
    margin-top: 16px;
}
}

#mmuseum-content ul {
    line-height: 2;
    list-style-type: none;
}

#mmuseum-content ul.list-handpoint li {
    border-bottom: 1px #999 dotted;
}

#mmuseum-content ul.list-handpoint li::before {
    content: '\f0a4';
    margin-right: 8px;
    color: var(--icon-color);
    font-family: "Line Awesome Free";
    font-size: 2rem;
    font-weight: 900;
}

#mmuseum-content ul.list-decimal {
    list-style-type: decimal-leading-zero;
}


.museum-nav-container input,
.product-nav-container input,
#museum-nav-open,
#nav-open {
    display: none;
}

.museum-nav {
    width: 976px;
    padding-top: 2px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto 32px auto;
    font-weight: bold;
    background-color: #000;
    border-top: rgba(85,85,92,.8) 1px solid;
}

.museum-nav-container.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    background: linear-gradient(90deg, #25262a 0%, #4a4e59 50%, #25262a 100%);
    transition: all .25s ease 0s, background .25s ease .2s;
    z-index: 256;
}

.museum-nav > li {
    width: 160px;
    height: 40px;
    margin-right: 2px;
}

.museum-nav > li span {
    visibility: hidden;
}

.museum-nav > li:first-child {
    margin-left: 3px;
}

.museum-nav li img {
    width: 160px;
    height: 40px;
}

.museum-nav > li {
    position: relative;
    width: 16%;
    height: 40px;
    font-size: 1.3rem;
    line-height: 40px;
}

.museum-nav li,
.museum-nav a {
    display: block;
    width: 160px;
    height: 40px;
}

.museum-nav span[class^="museum-nav-button-"] {
    display: none;
}

.product-nav-container {
    width: 100%;
    margin: 0 auto 16px auto;
    padding-top: 32px;
    transition: .25s;
}

.product-nav-container.fixed {
    position: fixed;
    top: 44px;
    left: 0;
    width: 100%;
    height: 48px;
    margin: 0 auto;
    background-color: rgba(16,16,24,.9);
    transition: all .25s ease 0s, background .25s ease .2s;
    z-index: 255;
}

.product-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 912px;
    height: auto;
    margin: 0 auto;
}

.product-nav > li {
    position: relative;
    width: 17%;
    height: 30px;
    margin-left: 2px;
    margin-right: 2px;
    text-align: center;
    font-size: 1.4rem;
    line-height: 30px;
    border-bottom: #828697 solid 2px;
}

.product-nav li,
.product-nav a {
    display: block;
    height: 32px;
}

.product-nav a:hover,
.product-nav a:focus {
    color: #b1b4be;
    border-bottom: #93284e solid 2px;
    text-decoration: none;
}

.product-nav li.active {
    width: 140px;
    height: 32px;
    color: #fff;
    border-bottom: #00a3c6 solid 2px;
}

.product-nav li.active::before {
    content: '';
    width: 100%;
    height: 32px;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: #00a3c6 solid 6px;
    filter: blur(8px);
    opacity: .8;
}

.product-nav li.product-nav-not_available {
    color: #828697;
}

@media screen and (max-width: 959.98px) {
.museum-nav-container {
    width: calc(100% - 16px);
    margin: 0 auto;
    padding-top: 0;
}

.museum-nav-container.fixed {
    position: fixed;
    top: 0;
    left: 0px;
    width: 100%;
    height: 80px;
}

.product-nav-container {
    width: 100%;
        padding-top: 0;
}

.product-nav-container.fixed {
    position: fixed;
    top: 84px;
    left: 0;
    width: 100vw;
    height: 96px;
    margin-top: -8px;
    z-index: 255;
}

.museum-nav,
.product-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0;
}

.museum-nav a:hover,
.product-nav a:hover {
    text-decoration: none;
}

.product-nav {
    justify-content: space-around;
}

.museum-nav > li {
    display: block;
    width: calc((100vw - 24px) / 3);
    height: 40px;
    margin: 0 0px 2px 0px;
    text-align: center;
    font-size: 1.3rem;
}

.museum-nav > li:first-child {
    margin-left: 0;
}

.museum-nav > li:nth-child(2n) {
    margin-right: 2px;
    margin-left: 2px;
}

.museum-nav li:first-of-type span {
    color: #fff;
}

.museum-nav > li a {
    width: 100%;
}

.museum-nav li img {
    display: none;
}

.museum-nav span[class^="museum-nav-button-"] {
    display: flex;
    visibility: visible;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    margin-left: 0;
    margin-right: 2px;
    padding-left: 8px;
    color: #b4b4b4;
}

.museum-nav span i {
    margin-right: 2px;
    font-family: 'icomoon';
    font-weight: normal;
}

.product-nav > li {
    display: flex;
    justify-content: center;
    width: calc((100% - 4px) / 3 - 2px);
    height: 32px;
    margin: 16px 0px 2px 0;
    text-align: center;
    font-size: 1.3rem;
}

.product-nav > li:nth-child(n+4) {
    margin-top: 8px;
}

.product-nav a {
    display: block;
    width: 100%;
    white-space: nowrap;
}

.product-nav > li.active {
    width: calc((100% - 4px) / 3 - 2px);
}

.product-nav > li.active::before {
        width: 100%;
}

.product-nav ul li {
    display: flex;
    justify-content: center;
}

.museum-nav .museum-nav-button-001 {
    background: linear-gradient(rgb(79,18,35)0%,rgb(120,39,65)10%,rgb(92,34,54)25%,rgb(87,35,52)50%,rgb(66,17,32)100%);
    border-top: #845c68 solid 1px;
    border-right: #451d2a solid 1px;
    border-left: #7c4352 solid 1px;
    border-bottom: #b21953 solid 1px;
    box-shadow: 4px 0 4px 0px #602737 inset;
}

.museum-nav .museum-nav-button-002 {
    width: calc(100vw / 3 - 8px);
    background: linear-gradient(rgb(32,50,65)0%,rgb(58,83,101)10%,rgb(39,60,77)25%,rgb(31,48,60)50%,rgb(27,40,52)100%);
    border-top: #66717b solid 1px;
    border-right: #26333d solid 1px;
    border-left: #516170 solid 1px;
    border-bottom: #4886aa solid 1px;
    box-shadow: 4px 0 4px 0px #2f3f4d inset;
}

.museum-nav [class^="museum-nav-button-"]::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 75%;
    border-top: 40px solid rgba(255,255,255,.075);
    border-right: 24px solid transparent;
    box-sizing: border-box;
}

.museum-nav [class^="museum-nav-button-"]::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: #fff;
}

.museum-nav span.active-museum {
    color: #fff;
    background: linear-gradient(rgb(133,36,62)0%,rgb(159,44,74)10%,rgb(165,47,77)25%,rgb(165,47,76)50%,rgb(173,49,80)100%);
}

.museum-nav span.active {
    color: #fff;
    background: linear-gradient(rgb(62,86,110)0%,rgb(75,104,131)10%,rgb(74,106,138)25%,rgb(74,106,137)50%,rgb(78,111,144)100%);
}
}

@media screen and (min-width: 520px) {
.museum-nav span i {
    margin-right: 6px;
    font-size: 1.8rem;
}
}

@media screen and (max-width: 399px) {
.museum-nav span i {
    display: none;
}
}


.dropmenu {
    text-decoration: none;
    transition: all .2s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.dropmenu:before,
.dropmenu:after {
    content: '';
    display: table;
}

.dropmenu:after {
    content: '';
    position: absolute;
    top: 60%;
    right: 0.5rem;
    border: 5px solid transparent;
    border-top: 5px solid var(--nav-color);
    transform: translateY(-40%);
}

.dropmenu ul {
    visibility: hidden;
    position: absolute;
    width: 100%;
    top: 25%;
    left: 0;
    margin: 2px 0 0 0;
    padding: 8px 0 0 0;
    list-style: none;
    background-color: rgba(21,21,31,.9);
    box-shadow: 0 8px 12px 0 rgba(0,0,0,.7), 1px 1px rgba(66,69,81,.4) inset, -1px 1px rgba(66,69,81,.4) inset;
    transition: .25s;
    opacity: 0;
    z-index: 4096;
}


.museum-nav > li.hover ul,
.product-nav > li.hover ul {
    top: 100%;
    visibility: visible;
    opacity: 1;
}

.museum-nav .dropmenu ul {
    width: 152px;
    padding: 0 0 8px 8px;
    background: linear-gradient(90deg, #313442, #202128);
    box-shadow: 0 8px 12px 0 rgba(0,0,0,.7), 1px 1px rgba(66,69,81,.5) inset, -1px 1px rgba(66,69,81,.5) inset;
    border-top: #45484b 1px solid;
    border-radius: 3px;
}

.dropmenu ul li {
    width: 100%;
    text-align: center;
}

.dropmenu ul li a {
    display: block;
    padding: 0;
}

.museum-nav .dropmenu ul li {
    width: 136px;
    height: 30px;
    padding: 0 0 0 8px;
}

.museum-nav .dropmenu ul li {
    padding: 0 0 8px 8px;
    border-bottom: #161718 1px solid;
    box-shadow: 0 1px 0 #46474d;
}

.museum-nav .dropmenu ul li:last-child {
    padding-bottom: 0;
    border: none;
    box-shadow: none;
}

.product-nav .dropmenu ul li:last-child {
    padding-top: 8px;
}

.dropmenu ul li a:hover,
.dropmenu ul li a:active {
    text-decoration: none;
}

.museum-nav .dropmenu ul li a {
    padding-left: 16px;
    text-align: left;
}

.museum-nav .dropmenu ul li a::before {
    content: '\ea1c';
    margin-right: 8px;
    font-family: 'icomoon';
}

.museum-nav .dropmenu ul li a:hover,
.museum-nav .dropmenu ul li a:active {
    color: #4896e3;
}

@media screen and (max-width: 959.98px) {
.dropmenu:after {
    right: 5%;
}

.museum-nav .dropmenu ul {
    width: 128px;
}

.museum-nav .dropmenu ul li {
    width: 116px;
    padding: 0 0 8px 0;
}

.museum-nav .dropmenu ul li a {
    padding-left: 8px;
}
}


#search {
    margin: 32px 16px 16px 16px;
    font-size: 1.4rem;
}

.content-headline-top {
    top: 32px;
}

.search-ul {
    display: table;
    width: auto;
    margin: 16px auto;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.5;
    list-style-type: square;
}

.form-group {
    display: flex;
    margin: 4px 0 4px 0;
    padding-bottom: 6px;
    border-bottom: #667 1px dotted;
}

.form-group:first-child {
    padding-top: 6px;
    border-top: #667 1px dotted;
}

.form-group .form-group-inner {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 5;
    align-items: center;
}

.form-group label {
    align-items: center;
    width: 15em;
}

.form-group input {
    height: 2.6rem;
    margin-right: 4px;
    font-size: 1.6rem;
}

.form-group input:focus {
    outline: none;
}

.form-group .form-control,
.form-group .form-operator {
    align-items: center;
    height: 2.6rem;
}

.form-group .form-operator {
    margin-right: 4px;
}

.form-group select#input-platform1 {
    height: 2.8rem;
}

.form-group span {
    margin-right: 16px;
}

.form-group input.form-text {
    height: 2.6rem;
    padding: 0 8px;
    border-radius: 4px;
    border: none;
    box-shadow: 0 1px 1px 1px #333 inset;
    appearance: none;
}

.form-group .form-hidden input[type="checkbox"],
.form-group .form-hidden input[type="radio"] {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    appearance: none;
}

.form-group .form-checkbox {
    display: inline-block;
    position: relative;
    width: auto;
    box-sizing: border-box;
    padding: 6px 0.5em 0 2.2em;
    cursor: pointer;
}

.form-group label:hover {
    color: var(--link-color);
    transition: .2s ease-in-out;
}

.form-group .form-checkbox::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 5px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.form-group .form-checkbox::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 9px;
    width: 6px;
    height: 10px;
    margin-top: -8px;
    border-right: 4px solid #244997;
    border-bottom: 4px solid #244997;
    transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    opacity: 0;
}

.form-group input[type="checkbox"]:checked + .form-checkbox::before {
    border-color: #666;
}

.form-group input[type="checkbox"]:checked + .form-checkbox::after {
    transform: rotate(45deg) scale3d(1,1,1);
    opacity: 1;
}

.form-group input[type="checkbox"]:checked + .form-checkbox {
    color: #5bf0f4;
}

.form-group .form-radio {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: auto;
    padding: 6px 0.5em 0 2.2em;
    cursor: pointer;
}

.form-group label:hover {
    color: var(--link-color);
    transition: .2s ease-in-out;
}

.form-group .form-radio::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 5px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
}

.form-group .form-radio::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 9px;
    width: 10px;
    height: 10px;
    margin-top: -4px;
    background: #244997;
    border-radius: 50%;
    transform: scale3d(.3,.3,1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    opacity: 0;
}

.form-group input[type="radio"]:checked + .form-radio::before {
    border-color: #666;
}

.form-group input[type="radio"]:checked + .form-radio::after {
    transform: scale3d(1,1,1);
    opacity: 1;
}

.form-group input[type="radio"]:checked + .form-radio {
    color: #5bf0f4;
}

form#search .form-label {
    display: inline-block;
    width: 16em;
    margin-right: 1em;
    padding-top: 8px;
    color: var(--dt-color);
    text-align: right;
}

form#search .chkbox {
    margin: 0 0 10px 20px;
}

#form-submit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 18em;
    margin: 32px auto 64px auto;
}

#form-submit button {
    width: 8em;
    height: 3em;
    margin: 0 auto;
    color: #fff;
    background: linear-gradient(180deg, #3e3f4c, #30313e);
    border: #000 2px solid;
    border-radius: 3px;
    box-shadow: 0 1px 0 #696a70 inset, 0 -1px 0 #2f3034 inset;
    cursor: pointer;
    transition: .2s ease-in-out;
}

#form-submit #submit {
    width: 12em;
    height: 3em;
    margin: 0 auto 16px auto;
    padding: 0;
    font-family: 'Play', sans-serif;
    font-size: 2rem;
    font-weight: bold;
}

#form-submit #submit::before {
    content: '\e8b6';
    position: relative;
    top: 4px;
    margin-right: 8px;
    font-family: 'Material Icons';
}

#form-submit button:hover {
    color: #00ffff;
}


#form-submit > div {
    display: flex;
    justify-content: space-between;
    width: 18em;
}


#form-options {
    display: flex;
    flex-direction: column;
    width: 20em;
    margin: 32px auto;
    border: none;
}

#form-options p {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
    font-size: 1.5rem;
}

#form-options p:not(:first-child) {
    cursor: pointer;
}

#form-options p:first-of-type {
    padding-bottom: 4px;
    border-bottom: #99a 1px dotted;
}

#form-options p:first-of-type::before {
    content: '\e8b8';
    margin-right: 8px;
    font-family: 'Material Icons';
    font-size: 2.6rem;
    color: #719793;
}

#form-options p:not(:first-child):hover {
    color: var(--link-color);
    transition: .25s ease-in-out;
}

#form-options p i {
    margin-left: 8px;
    margin-right: 16px;
    font-family: 'icomoon';
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--dt-color);
}

#form-options p.option-button-switch i {
    color: #8affff;
    filter: drop-shadow(0 0 6px rgba(7,99,246,.9)) drop-shadow(0 0 6px rgba(7,173,250,0.6));
}

#form-options p.option-button-switch:hover::before,
#form-options p.option-button-switch::before {
    content: url(/assets/images/indicator-on.png);
    border-radius: 8px;
}

#new-window span {
    position: relative;
    top: -4px;
}

#result_list {
    position: relative;
    width: auto;
    margin: 0 -16px 48px -16px;
    z-index: 0;
}

@media screen and (max-width: 959.98px) {
#search {
    margin: 32px 0 16px 0;
}

.form-group{
    flex-direction: column;
}

form#search .form-label {
    margin-bottom: 4px;
    text-align: left;
}

.form-group-inner {
    line-height: 1.8;
}

.form-group-inner input {
    width: 100%;
    margin-bottom: 8px;
}

.form-group div.u-flex {
    flex-direction: column;
}

.form-group div.u-flex .form-group-inner input {
    width: 128px;
}

#result_list {
    width: auto;
    overflow-x: auto;
    margin: 0 -8px 48px -8px;
}
}


#explanatory .liststyle-009 > div {
    flex-direction: column;
}

#explanatory .liststyle-009 div > div {
    display: flex;
    flex-direction: column;
    margin-left: 0;
}

#explanatory ul .material-icons {
    margin-right: 4px;
    color: #999;
    font-size: 2.2rem;
}

#explanatory .liststyle-009 {
    line-height: 1.4;
}

#explanatory .liststyle-009 li,
#explanatory .liststyle-009 > div {
    margin-bottom: 1em;
    line-height: 1.6;
}

#explanatory .liststyle-009 div dl {
    margin-bottom: 0;
}

#explanatory .liststyle-009 li,
#explanatory .liststyle-009 div > dd {
    display: table;
    margin: 0 0 0 8px;
}

#explanatory .liststyle-009 li::before,
#explanatory .liststyle-009 div > dd::before {
    content: '\e047';
    display: table-cell;
    width: 1rem;
    padding-right: 4px;
    font-family: 'Material Icons';
    font-size: 1rem;
}

#explanatory .no-liststyle::before {
    content: none !important;
}

#explanatory h4[id^="tab-"] {
    display: inline-block;
}


#explanatory .enclosure {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0.5em 0 24px;
    font-family: 'Play', sans-serif;
    font-size: 1.4rem;
}

#explanatory div ul.enumerate {
    display: flex;
    margin-left: 2em;
}

#explanatory div ul.enumerate li {
    margin-right: 2em;
    margin-left: 1em;
}

#explanatory .emulator {
    margin-left: 2em;
}

#explanatory .emulator div {
    display: flex;
}

#explanatory .emulator dt {
    width: 1.5em;
    margin: 0 8px 0 0;
    text-align: center;
}

#explanatory .emulator dd {
    margin: 0;
}

#explanatory .liststyle-1 {
    display: flex;
    flex-direction: column;
    margin-left: 1em;
    font-size: 1.4rem;
    text-indent: 0;
    list-style-type: none;
}

#explanatory .liststyle-1 div {
    display: flex;
    flex-direction: row;
    margin: 0 0 0.5em 1em;
}

#explanatory .direction-row {
    flex-direction: row;
    flex-wrap: wrap;
}

#explanatory .direction-row li {
    width: 14em;
}

#explanatory .liststyle-1 li::before,
#explanatory .liststyle-1 dt::before {
    content: '\e3c6';
    margin-right: 8px;
    font-family: 'Material Icons';
    font-size: 0.5em;
}

#explanatory .liststyle-1 ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 800px;
    margin-left: 3em;
    margin-right: 32px;
}

#explanatory .liststyle-1 ul li {
    display: inline;
    margin: 0;
    color: #b4cbd3;
}

#explanatory .liststyle-1 ul li::before {
    content: '';
}

#explanatory .liststyle-1 ul li:not(:last-child)::after {
    content: '／';
    margin: 0 0.5em;
}

#explanatory .liststyle-1 div {
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    font-size: 1.5rem;
}

#explanatory .liststyle-1 div dt {
    margin-left: 1em;
    color: #ccc;
}

#explanatory .liststyle-1 div dt::after {
    content: '：';
    margin-left: 4px;
}

#explanatory .liststyle-1 div dd {
    margin-left: 0;
}

#explanatory .liststyle-1 div dd::before {
    content: none;
}

.explanatory-magazine .liststyle-007 dl div {
    display: flex;
    align-items: center;
}

#explanatory .product-book-details-icons dd {
    margin: 0;
}

#explanatory .product-book-details-icons .research-yes {
    color: #ab2e50;
}

@media screen and (max-width: 959.98px) {
#explanatory div ul ul {
    margin-left: 1em;
}

#explanatory .liststyle-009 li {
    margin: 0 0 0 8px;
}

#explanatory .liststyle-009 div > dd {
    margin: 0 0 0 8px;
}

#explanatory .liststyle-009 div div dd {
    margin: 0 0 0 8px;
}

#explanatory .liststyle-009 div div div dd {
    margin: 0 0 0 8px;
}

#explanatory .liststyle-009 dl.enclosure-wrap {
    flex-direction: column;
}

#explanatory .liststyle-009 div div p {
    margin-left: 2em;
}

#explanatory .liststyle-010 {
    width: 100%;
}

#explanatory .liststyle-010 dd {
    margin-left: 0;
}

#explanatory .liststyle-1 ul {
    width: 75%;
    margin-right: 0;
}

#explanatory .liststyle-1 div {
    display: flex;
    flex-direction: column;
    margin: 0 0 0.5em 0;
}

#explanatory .liststyle-1 div dt::after {
    content: '';
}

#explanatory .liststyle-1 div dd {
    margin-left: 32px;
}

#explanatory .liststyle-009 dl.enclosure-wrap div {
    display: flex;
    align-items: baseline;
}

#explanatory .liststyle-1 ul {
    flex-direction: column;
}

#explanatory .liststyle-1 ul li {
    width: 100%;
}

#explanatory .liststyle-1 ul li::after {
    content: none !important;
}

.explanatory-magazine .liststyle-007 dl {
    flex-direction: column;
    align-items: inherit;
}
}

.box-title {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    width: auto;
    max-width: 960px;
    height: auto;
    margin-top: 16px;
}

.category {
    display: flex;
    align-items: flex-end;
    padding: 24px 0 4px 8px;
}

.category i {
    margin-right: 12px;
    color: #8affff;
    font-family: 'icomoon';
    font-size: 3rem;
    font-weight: normal;
    filter: drop-shadow(0 0 6px rgba(7,99,246,.9)) drop-shadow(0 0 6px rgba(7,173,250,0.6));
}

.category dt {
    bottom: 0;
    margin-bottom: 1px;
    color: var(--dt-color);
    font-family: 'Play', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
}

.category dd {
    color: #fff;
    font-family: 'Play', sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
}

.box-title {
    width: auto;
    min-height: 2rem;
    margin: 16px 24px 0 0px;
}

.box-title div {
    display: flex;
    align-items: baseline;
}

.box-title h1 {
    order: 2;
    padding: 0;
    font-size: 2.4rem;
    font-weight: bold;
}

.box-title p.title-series {
    order: 0;
    width: 100%;
    margin-bottom: 8px;
    padding: 0;
    font-size: 1.4rem;
}

.box-title p.title-sub-1 {
    order: 1;
    padding-right: 1rem;
    font-size: 1.5rem;
}

.box-title p.title-sub-2 {
    order: 3;
    padding: 0;
    font-size: 1.5rem;
}

.box-title p.title-sub-2::before {
    content: '～';
    margin: 0 6px;
}

.box-title .title-classification {
    margin-left: 8px;
    font-size: 1.6rem;
}

.box-title .title-classification::before {
    content: '［';
    margin-right: 4px;
}

.box-title .title-classification::after {
    content: '］';
    margin-left: 4px;
}

.box-release_data {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 0 0 8px 0;
}

.box-release_data div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.box-release_data li {
    margin-right: 16px;
    color: #eee;
    font-size: 1.6rem;
    list-style-type: none;
}
.box-release_data span {
    margin-right: 4px;
    color: #999;
    font-size: 2.2rem;
    cursor: pointer;
}

@media screen and (max-width: 959.98px) {
.box-title div {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
}

.box-title h1 {
    padding: 0 0 0 0;
    line-height: 1.3;
}

.box-title .title-series {
    width: auto;
    margin-bottom: 8px;
    padding: 0 24px 0 0;
}

.box-title [class^="title-sub"] {
    width: 100%;
    padding: 8px 24px 0 0;
}

.box-title [class^="title-sub"]::before {
    margin: 0;
}

.box-release_data {
    flex-direction: column;
}
}


.index {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: calc(100% - 144px);
    margin: 32px auto 0 auto;
}

.index div {
    display: flex;
    flex-wrap: nowrap;
}

.index li {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2em;
    height: 2em;
    margin: 0 6px 8px 0;
    font-size: 1.6rem;
    list-style-type: none;
    background: linear-gradient(rgb(93,95,96)0%,rgb(89,96,99)50%,rgb(43,48,56)50%,rgb(61,68,77)100%);
    border-top: #000 1px solid;
    border-bottom: #888 1px solid;
    border-left: #000 1px solid;
    border-right: #000 1px solid;
    transition: .2s;
}

.index li::before {
    content: '';
    position: absolute;
    left: 25%;
    bottom: 10%;
    width: 1em;
    height: 50%;
    border-bottom: #9bb8bf solid 1em;
    filter: blur(5px);
    opacity: .2;
}

.index a {
    display: block;
    text-decoration: none;
}

.index li:not(.index-unavailable):hover {
    color: #2cdab7;
}

.index li:not(.index-unavailable):hover::before {
    border-bottom: #d6e1e4 solid 1em;
    filter: blur(8px);
    opacity: .7;
}

.index-unavailable {
    color: var(--dt-color);
}

.index-none {
    visibility: hidden;
}

.index a:nth-of-type(5n) {
    margin-right: 1.5em;
}

div[id^="index-"] {
    margin-bottom: 2em;
}

.hidden-not-display p {
    display: none !important;
}

[class^="product-index-"] li {
    margin: 0 32px 4px 64px;
    font-size: 1.5rem;
    list-style-type: none;
    border: none;
}

.product-index-indicator a {
    line-height: 24px;
}

.product-index-indicator a::before {
    content: url(/assets/images/lamp-off.png);
    margin-right: 8px;
    line-height: 24px;
}

ul.product-index-softwarehouses li,
ul.product-index-magazines li,
ul.product-index-books li,
ul.product-index-manuals li,
ul.product-index-publishers li,
ul.product-index-peripherals li {
    display: table;
}

ul.product-index-softwarehouses li::before,
ul.product-index-magazines li::before,
ul.product-index-books li::before,
ul.product-index-manuals li::before,
ul.product-index-publishers li::before,
ul.product-index-peripherals li::before {
    content: '\e037';
    display: table-cell;
    padding-right: 4px;
    vertical-align: top;
    font-family: 'Material Icons';
    color: #bdf;
}

.product-index-softwarehouses li a {
    text-decoration: underline;
}

.softwarehouse-aliase {
    color: #ccc;
}

.softwarehouse-aliase::after {
    content: '→';
    margin: 0 8px;
}

[class^="product-index-"] p {
    display: block;
    width: 90%;
    height: 3rem;
    margin: 0 auto 1em auto;
    line-height: 3rem;
    text-align: center;
    background: linear-gradient(180deg, #3e3f4c, #30313e);
    box-shadow: 0 1px 0 #696a70 inset, 0 -1px 0 #2f3034 inset;
    border-bottom: #000 solid 1px;
}

[class^="product-index-"] p.index {
    display: none;
}

.product-index-manuals li:nth-of-type(5n) {
    margin-bottom: 2em;
}

.product-index-peripherals .product-list {
    display: flex;
    flex-direction: column;
    margin: 16px 0 0 0;
    padding: 0;
    border: none;
}

.product-index-peripherals div:first-child {
    margin-top: 32px;
}

.product-index-peripherals dd ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 1em;
    list-style-type: none;
}

.product-index-peripherals dd ul li {
    margin: 0;
}

.product-index-peripherals dd ul li:not(:last-child)::after {
    content: '／';
    margin: 0 8px 0 4px;
}

.product-index-peripherals li {
    margin-left: 16px;
    margin-bottom: 1em;
    padding-left: 0;
    font-size: 1.5rem;
}

.product-index-peripherals hr,
.product-index-exhibition hr {
    margin-bottom: 1.5em;
}

.product-index-peripherals span:first-of-type {
    margin-right: 16px;
}

.product-index-exhibition li:first-of-type {
    margin-top: 2em;
}

.product-index-exhibition .product-list,
.product-index-exhibition span {
    display: block;
}

@media screen and (max-width: 767.98px) {
.index {
    width: 100%;
    margin: 0 0 32px 0;
}

[class^="product-index-"] p {
    width: 100%;
}

[class^="product-index-"] li {
    margin-left: 0;
}
}

@media screen and (max-width: 959.98px) {
[class^="product-index-"] li {
    line-height: 1.3;
}
}


.product-image {
    width: auto;
    height: auto;
    max-width: 928px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 16px auto;
    padding: 12px;
    list-style-type: none;
    background: linear-gradient(90deg, #24273d, #323c5a 50%, #24273d);
    border-bottom: #666 solid 1px;
    border-radius: 6px;
    box-shadow: 2px 3px 3px rgba(0,0,0,0.8) inset, -2px 0 3px rgba(0,0,0,0.8) inset, 0 -2px 3px rgba(0,0,0,0.2) inset;
}

.product-image-releases {
    width: auto;
    max-width: 800px;
}

.product-image-carousel {
    margin: 0 auto 32px;
    padding: 0;
}

.product-image > li {
    margin-right: 16px;
    list-style-type: none;
}

.product-image img {
    margin: auto 8px;
    padding: 0;
}

.product-image-note {
    margin: 0 24px 32px 0;
    padding-top: 8px;
    text-align: right;
    color: #cbcbcb;
    font-size: 1.3rem;
}

.product-image-note::before {
    content: '\f0a6';
    margin-right: 2px;
    color: var(--icon-color);
}

@media screen and (max-width: 959.98px) {
.product-image {
    padding-bottom: 48px;
}

.product-image-releases,
.owl-carousel {
    width: 100%;
    height: auto;
    max-height: 320px;
}

.product-image-carousel {
    max-height: 352px;
}
}

@media screen and (max-width: 519.98px) {
.product-image-releases,
.owl-carousel {
    width: 100%;
}

.product-image-releases li img {
    max-width: 296px;
    max-height: auto;
}

.product-image-carousel {
    max-height: 352px;
}
}


.product-data {
    width: auto;
    max-width: 1008px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 8px 0 32px 0;
}

.product-data > div {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    width: 100%;
}

.product-data a,
.product-data a:link,
.product-data a:visited,
.product-data a:hover,
.product-data a:active {
    color: var(--link-color);
    word-wrap: break-word;
}

.product-data dt {
    width: auto;
    min-width: 12em;
    color: var(--dt-color);
    text-align: right;
    line-height: 1.8;
    font-size: 1.5rem;
    font-weight: bold;
    white-space: nowrap;
}

.product-data dd {
        width: auto;
    height: 1.8;
    line-height: 1.8;
    font-size: 1.5rem;
    align-items: center;
}

.product-data-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: calc(100% - 11em);
}

.product-data dt::after {
    content: '';
    margin: 0 12px 0 4px;
    color: #909196;
}

.product-data .enumerate:not(:last-child)::after {
    content: ',';
    margin: 0 8px 0 4px;
    color: #ccc;
}

.product-data .release-year,
.product-data .release-month {
    margin-right: 4px;
}

.product-data-wrap .enclosure span {
    font-family: 'Play', sans-serif;
    font-weight: bold;
}

.product-data dd form {
    display: inline-block;
}

.product-data-tags {
    display: flex;
    align-items: center;
    width: 80%;
}

.product-data-tags dd.tag {
    width: auto;
}

.product-data-tags form {
    display: inline;
}

.product-data .equipment {
    width: auto;
    margin-right: 4px;
    padding: 2px 6px 0 6px;
    background-color: #45897e;
    border-radius: 2px;
    text-align: center;
    font-size: 1.3rem;
}

.product-data.product-data-emulator span {
    display: inline-block;
    width: 1.5em;
    margin-right: 4px;
    text-align: center;
}

.releases-data-container {
    margin-left: 0;
    margin-bottom: 64px;
    padding-bottom: 32px;
    background: url("/assets/images/divider-shadow.jpg") no-repeat;
    background-position: left bottom;
}

.releases-data {
    margin-top: 48px;
}

@media screen and (min-width: 768px) and (max-width: 959.98px) {
.releases-data-container {
    position: relative;
    margin-bottom: 32px;
    background: linear-gradient(30deg, #292b38 0%, #1e212e 15%, #1e212e 100%);
}

.releases-data-container::after {
    content: '';
    position: absolute;
    left: 12px;
    bottom: -16px;
    width: 100%;
    border-bottom: 12px solid transparent;
    border-left: 50vw solid rgba(0,0,0,.7);
    filter: blur(5px);
}
}

@media screen and (max-width: 767.98px) {
.releases-data-container {
    background: none;
}
}

@media screen and (max-width: 639.98px) {
.product-caption {
    width: auto;
}

.product-data {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: baseline;
    margin: 8px 0 32px 0;
    padding: 0;
}

.product-data > div {
    flex-direction: column;
}

.product-data dt {
    width: 100%;
    color: var(--dt-color);
    font-size: 1.4rem;
    font-weight: bold;
    text-align: left;
    line-height: 1;
}

.product-data dd {
    width: 100%;
    font-size: 1.4rem;
    margin-bottom: 16px;
}

.product-data dd.platform,
.product-data dd.media {
    margin-bottom: 8px;
}

.product-data-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 16px;
}

.releases-data {
    margin-top: 48px;
}

.releases-data-container {
    background: none;
}

.product-data-modification dt {
    margin-left: 0;
}

.product-data-modification dd {
    margin-left: 1em;
}
}


.product-product-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: auto;
    max-width: 976px;
    margin: 12px auto 0 auto;
}

.product-product-list li {
    margin-bottom: 8px;
    padding-bottom: 4px;
    list-style-type: none;
    border-bottom: #464955 1px dotted;
}

.product-product-list li:last-child {
    border-bottom: #464955 1px dotted;
}

.product-product-list li dl {
    display: inline-block;
    vertical-align: top;
    margin-left: 8px;
}

.product-product-list li dt {
    margin-bottom: 8px;
    font-size: 1.3rem;
}

.product-product-list li dd {
    color: var(--dt-color);
    font-size: 1.1rem;
}


.article {
    width: auto;
    max-width: 896px;
    margin: 8px auto 32px auto;
    margin-left: auto;
    margin-right: auto;
}

.column {
    columns: 2 15em;
    column-rule: 1px dotted #5c5c69;
    column-gap: 3em;
    column-fill: balance;
}

.article p {
    font-size: 1.5rem;
    line-height: 1.7;
    text-indent: 1em;
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: normal;
}

.article li {
    font-size: 1.5rem;
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: normal;
}

.article .u-noindent {
    text-indent: 0;
}

.article .remark {
    margin: 1.7em 0 0 0;
    color: #bbb;
}

.column .u-align-right {
    text-align: right;
}

.notes {
    margin-top: 4px;
    font-size: 1.5rem;
    line-height: 1.5;
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: normal;
}

.notes li {
    display: table;
    width: 100%;
    list-style-type: none;
}

.notes li::before {
    content: "\f303";
    display: table-cell;
    width: 1em;
    padding-right: 4px;
    color: #34b6a3;
}

@media screen and (max-width: 959.98px) {
main #software-index section:first-of-type {
    margin-top: 64px;
}

.article {
    width: auto;
    padding: 0;
    columns: 1;
}
}


.product-gallery{
    width: auto;
    max-width: 832px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 16px auto 0 auto;
    padding: 16px;
}

.product-gallery div {
    display: flex;
    flex-direction: column;
    margin: 0 16px 32px 16px;
}

.product-gallery li {
    display: table-cell;
    width: 384px;
    height: auto;
    margin: 8px 0 8px 0;
    padding: 24px 0;
    text-align: center;
    vertical-align: middle;
    list-style-type: none;
    background: linear-gradient(90deg, #24273d, #323c5a 50%, #24273d);
    border-radius: 6px;
    border-bottom: #666 solid 1px;
    box-shadow: 2px 3px 3px rgba(0,0,0,0.8) inset, -2px 0 3px rgba(0,0,0,0.8) inset, 0 -2px 3px rgba(0,0,0,0.2) inset;
}

.product-gallery div:only-child,
.product-gallery li:only-child {
    margin: 0 auto;
}

.product-gallery figcaption {
    margin-top: 6px;
    font-size: 1.3rem;
    width: 100%;
    text-align: center;
}

.product-gallery figcaption span {
    position: relative;
    display: inline-block;
    padding: 0 8px;
    color: #acaec1;
}

.product-gallery figcaption span::before,
.product-gallery figcaption span::after {
    position: absolute;
    content: '';
    top: 33%;
    width: 64px;
    border-top: 2px solid #000;
    border-bottom: 1px solid #434556;
}

.product-gallery figcaption span::before {
    left: 100%;
}

.product-gallery figcaption span::after { 
    right: 100%;
}

.product-gallery img {
    margin: 0;
    padding: 0;
}

.product-gallery img.screenshot {
    width: auto;
    height: auto;
    max-width: 320px;
    max-height: 320px;
    background-color: #000;
    border-top: 12px solid #000;
    border-bottom: 12px solid #000;
    border-left: 12px solid #000;
    border-right: 12px solid #000;
    border-radius: 8px;
}

.product-gallery-note {
    margin: 32px 24px 32px 0;
    text-align: right;
    color: #cbcbcb;
    font-size: 1.4rem;
}

@media screen and (min-width: 704px) and (max-width: 959.98px) {
.product-gallery {
    justify-content: center;
    width: auto;
    padding: 0;
}

.product-gallery div {
    width: calc(50% - 16px);
    height: auto;
    margin: 0 0 48px 0;
}

.product-gallery div:nth-child(2n+1) {
    margin-right: 8px;
}

.product-gallery div li {
    width: 100%;
    margin: 0 0 8px 0;
}
}

@media screen and (min-width: 520px) and (max-width: 704px) {
.product-gallery div {
    margin: 0 auto 48px auto;
}
}

@media screen and (max-width: 519.98px) {
.product-gallery {
    width: auto;
    max-width: 100%;
    padding: 0;
}

.product-gallery div {
    width: 100%;
    min-width: 320px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 48px auto;
}

.product-gallery li {
    width: 100%;
    margin: 0 auto 8px auto;
}

.product-gallery img {
    max-width: 296px;
    max-height: auto;
}
}

@media screen and (max-width: 336px) {
.product-gallery {
    padding-left: 0;
    padding-right: 0;
}
}

@media screen and (max-width: 367.98px) {
.product-gallery li {
    display: block;
    margin: 0;
    padding: 24px 0 8px 0;
    text-align: center;
    list-style-type: none;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.product-gallery img.screenshot {
    border: none;
    border-radius: 0;
}
}


.random-access {
    width: calc(1.5rem * 12);
    height: 24px;
    margin: 16px 0 16px 0;
}

@media screen and (max-width: 959.98px) {
.random-access {
    margin: 16px auto 24px auto;
}
}

.random-access button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: calc(1.5rem * 12);
    height: 24px;
    font-family: 'Play', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: #e0e9ed;
    background: linear-gradient(rgb(53,58,71)50%,rgb(71,78,92)100%);
    border-top: #000 1px solid;
    border-bottom: #888 1px solid;
    border-left: #000 1px solid;
    border-right: #000 1px solid;
    transition: .25s ease-in-out;
}

.random-access button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-top: 12px solid #fff;
    opacity: .25;
}

.random-access button:hover::after {
    content: '';
    position: absolute;
    left: 8%;
    bottom: 10%;
    width: calc(1.5rem * 10);
    height: 75%;
    border-bottom: #bdf2fd solid 10px;
    filter: blur(6px);
    opacity: .5;
}

.random-access button:hover {
    color: #fff;
}


aside {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 64px;
    margin-bottom: 32px;
}

aside .social-links {
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 959.98px) {
aside {
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 32px;
}

aside .social-links {
    margin: 0 auto 16px auto;
}
}

aside .social-links p {
    width: 3rem;
    height: 3rem;
    margin-left: 16px;
}

aside .social-links p a {
    text-decoration: none;
}

aside .social-links p i {
    font-family: 'icomoon';
    font-size: 3rem;
}

aside .social-links p.social-twitter i:hover {
    color: #1da1f2;
}

aside .social-links p.social-facebook i:hover {
    color: #1877f2;
}

aside .social-links p.social-hatena i:hover {
    color: #008fde;
}

aside .social-links p.social-line i:hover {
    color: #00b900;
}

aside .social-links p.social-pocket i:hover {
    color: #ef4056;
}

#home aside {
    margin-top: 4px;
    margin-bottom: 9px;
}

#home aside .social-links {
    margin-right: 0;
}

#home aside .social-links p {
    width: 2rem;
    height: 2rem;
}

#home aside .social-links p i {
    font-size: 2rem;
}

#home aside .support-links {
    display: none;
}

@media screen and (max-width: 959.98px) {
#home aside {
    margin-top: 16px;
    padding-bottom: 8px;
}

#home aside .social-links {
    margin-right: 16px;
}
}

aside .support-links {
    display: flex;
    flex-direction: row;
    margin-left: 32px;
}

aside .support-links p {
    margin-left: 8px;
}

@media screen and (max-width: 959.98px) {
aside .support-links {
    margin: 0 auto;
}
}


.product-data-publications-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 16px 0;
}

.product-data-publications {
    display: flex;
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: #464955 1px dotted;
}

.product-data-publications:last-of-type {
    border: none;
}

.product-data-publications h4 {
    font-size: 1.6rem;
}

.product-data-publications p {
    width: 144px;
    min-width: 144px;
    height: 160px;
    margin-right: 4px;
}

.product-data-publications p a.publications-bg img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.product-data-publications p a.publications-bg:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.product-data-publications-details {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.product-data-publications-details dl {
    margin-top: 8px;
    line-height: 1.4;
}

.product-data-publications-details dl div {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    font-size: 1.4rem;
}

.product-data-publications-details dl div span.material-icons {
    margin-right: 4px;
    color: #34b6a3;
    font-size: 1.6em;
}

.product-data-publications-details dt {
    position: relative;
    top: 2px;
    width: 8em;
    color: var(--dt-color);
}

.product-data-publications-details dd {
    position: relative;
    top: 2px;
    width: calc(100% - 4em);
    padding-left: 1em;
    color: #fff;
    list-style: none;
}

.product-data-publications-details dl.bugfix {
    display: flex;
    flex-direction: column;
    margin: 4px 0 0 8em;
}

.product-data-publications-details dl.bugfix dt {
    width: 4rem;
    height: 1.4;
    padding: 0 8px;
    text-align: center;
    text-indent: 0;
    font-size: 1.3rem;
    line-height: 1.4;
    color: #fff;
    background-color: #93284e;
    border-radius: 2px;
}

.product-data-publications-details dl.bugfix dd {
    padding-left: 0;
}

.product-data-publications-details .page-article,
.product-data-publications-details .page-list {
    margin-right: 8px;
    padding: 1px 8px;
    text-align: center;
    text-indent: 0;
    font-size: 1.3rem;
    line-height: 1.4;
    background-color: #4581a5;
    border-radius: 2px;
}

.product-data-publications-details .page-list {
    margin-left: 24px;
}

.product-data-publications-details .list-type:not(:last-child)::after {
    content: ',';
    margin-left: 4px;
    margin-right: 8px;
}

.product-data-publications-details code i {
    margin: 0 8px 0;
    color: #fff;
    font-family: 'icomoon';
    font-size: 1.3rem;
}

@media screen and (max-width: 639.98px) {
.product-data-publications-container {
    width: 100%;
    margin: 16px auto 0 auto;
}

.product-data-publications {
    flex-direction: column;
}

.product-data-publications-details {
    margin-left: 0;
    font-size: 1.4rem;
}

.product-data-publications p {
    width: 144px;
    min-width: 144px;
    margin: 0 auto 4px auto;
}

.product-data-publications h4 {
    display: inline-block;
    text-align: center;
    margin-top: 8px;
}

.product-data-publications-details dl {
    width: 100%;
    margin-left: 0;
}

.product-data-publications-details dl div {
    flex-direction: column;
    font-size: 1.4rem;
}

.product-data-publications-details dl div div {
    flex-direction: row;
    align-items: center;
}

.product-data-publications-details dl div div .material-icons {
    display: inline-block;
}

.product-data-publications-details dd {
    width: 100%;
    margin-bottom: 1em;
    padding-left: 0;
}
}


.product-data-publications-details .bug-info {
    width: 100%;
    margin-bottom: 16px;
    padding-bottom: 16px;
    line-height: 1.6;
}

.product-data-publications-details .bug-info .material-icons {
    margin-top: 4px;
    font-size: 2.2rem;
}

.product-data-publications-details dl.bug-info {
    margin-top: 0;
}

.product-data-publications-details .bug-info dt {
    width: 8em;
}

.product-data-publications-details .bug-info dd {
    width: calc(100% - 32px - 8em);
    padding-left: 0;
}

.product-data-publications-details .bug-info code {
    width: auto;
    max-width: 100%;
    margin-left: 0;
}

@media not all and (min-width: 768px) {
.product-data-publications-details {
    width: calc(100vw - 32px);
    margin: 0 auto;
}

.product-data-publications-details dl.bug-info {
    width: 100%;
    margin-top: 8px;
}

.product-data-publications-details .bug-info dd {
    width: calc(100% - 16px);
}
}

@media screen and (max-width: 639.98px) {
.product-data-publications-details dl div div {
    flex-direction: row;
    align-items: center;
}

.product-data-publications-details dl div div .material-icons {
    display: inline-block;
}
}


.product-data-urawaza {
    width: auto;
    max-width: 944px;
    margin: 16px 0 32px 0;
    font-size: 1.4rem;
}

.product-data-urawaza ol {
    line-height: 1.6;
    list-style-position: outside;
}

.product-data-urawaza li {
    margin-right: 16px;
    margin-bottom: 4px;
}

.product-data-urawaza ol ul {
    margin-left: 2em;
    list-style-type: none;
}

.urawaza li img {
    margin:8px 0 8px 8px;
}

.product-data-urawaza dl {
    margin-left: 16px;
}

.product-data-urawaza dl div {
    display: flex;
    margin-right: 2em;
}

.product-data-urawaza dl dt {
    margin-right: 8px;
    color: var(--icon-color);
}

.product-data-urawaza > div {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.product-data-urawaza div p {
    margin-right: 16px;
}

.product-data-urawaza table td {
    padding: 8px 16px;
}

@media screen and (max-width: 767.98px) {
.product-data-urawaza {
    width: auto;
    margin: 16px 0 32px 0;
}

.product-data-urawaza ol {
    width: auto;
}

.product-data-urawaza ol.liststyle-004 {
    margin-left: 0;
}

.product-data-urawaza li {
    margin-right: 0;
}

.product-data-urawaza div p {
    margin: 16px auto;
    padding: 0;
}

.product-data-urawaza > div {
    flex-direction: column;
}

.img.ss320 {
    width: 296px;
}
}

@media screen and (max-width: 344px) {
.product-data-urawaza div p {
    margin-left: 0;
    margin-right: 0;
}

.product-data-urawaza > div img {
    border: none;
    border-radius: 0;
}
}


.product-data-staff {
    width: auto;
    max-width: 960px;
    margin: 16px 0 32px 0;
}

.product-data-staff dt {
    width: auto;
    max-width: 960px;
    color: var(--dt-color);
    line-height: 1.7;
    font-size: 1.5rem;
    font-weight: bold;
}

.product-data-staff dd {
    display: inline;
    width: auto;
    max-width: 960px;
    height: 1.7;
    margin-bottom: 16px;
    padding: 0 0 4px 8px;
    line-height: 1.7;
    font-size: 1.6rem;
}

.product-data-staff dd:not(:last-of-type)::after {
    content: ',';
}

.product-data-staff div {
    margin-bottom: 24px;
    padding-left: 8px;
    padding-bottom: 8px;
    border-bottom: #464955 1px dotted;
}

.product-data-staff p {
    margin-top: 32px;
    margin-bottom: 8px;
    color: #93284e;
}

.product-data-staff p::before {
    content: '[';
    margin-right: 4px;
}

.product-data-staff p::after {
    content: ']';
    margin-left: 4px;
}

@media screen and (max-width: 519.98px) {
.product-data-staff {
    width: auto;
    margin: 32px auto 0 auto;
}

.product-data-staff div {
    display: flex;
    flex-direction: column;
}

.product-data-staff dt {
    width: 100%;
    padding-right: 16px;
}

.product-data-staff dd {
    width: auto;
    margin-right: 16px;
    margin-bottom: 0;
}

.product-data-staff dd:not(:last-of-type)::after {
    content: '';
}
}


[id^=institute] em kbd {
    font-style: normal;
}

@media screen and (max-width: 519.98px) {
[id^=institute] section div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[id^=institute] section div img:not(.ss-320) {
    max-width: calc(100vw - 32px);
    height: auto;
    margin: 0 auto 8px auto;
}

[id^=institute] .caption-002 {
    margin-left: 0;
}
}

@media screen and (max-width: 959.98px) {
[id^=institute] .column-2 {
    columns: 1;
}

[id^=institute] .liststyle-002 {
    margin-right: 16px;
    margin-left: 16px;
}

[id^=institute] .liststyle-002 li {
    padding-left: 0;
}

[id^=institute] .liststyle-007 {
    margin-right: 0;
    margin-left: 0;
}

[id^=institute] dl.u-ml-16 {
    margin-left: 0;
    text-indent: 0;
}

[id^=institute] dd.u-ml-16 {
    margin-left: 0;
}
}

[id^=institute] .gallery .image {
    width: auto;
    min-width: 376px;
    max-width: 640px;
    margin: 0 auto;
}

@media screen and (max-width: 399.98px) {
[id^=institute] .gallery .image {
    display: block;
    width: 100%;
    min-width: 100%;
    margin: 0;
    padding: 24px 0 8px 0;
    text-align: center;
    list-style-type: none;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

[id^=institute] .gallery .image img.screenshot {
    border: none;
    border-radius: 0;
}
}

#institute-9gyjgaaf dl.u-ml-16 dd::before {
    content: '\e047';
    display: table-cell;
    margin-right: 4px;
    font-family: 'Material Icons';
    font-size: 1rem;
}

#institute-9gyjgaaf table {
    width: 75%;
}

#institute-9gyjgaaf .data-analysis .u-sticky {
    position: sticky;
    top: 192px;
    height: 100%;
}

@media screen and (min-width: 960px) {
#institute-9gyjgaaf .data-analysis .u-sticky {
    top: 128px;
}
}

@media screen and (max-width: 767.98px) {
#institute-9gyjgaaf .data-analysis {
    display: block;
}

#institute-9gyjgaaf .data-analysis .u-sticky {
    position: initial;
    text-align: center;
    text-indent: 0;
}

#institute-9gyjgaaf .data-analysis .u-ml-32.u-counter-reset.u-noindent {
    margin-left: 0;
}

#institute-9gyjgaaf table {
    width: 100%;
}
}

[id^=institute] .characters dl {
    width: 48%;
    align-items: flex-start;
}

[id^=institute] .game-plot dl dd p {
    margin-right: 16px;
    margin-left: 32px;
}

[id^=institute] table.institute-command {
    width: 40%;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 32px;
}

[id^=institute] .table-002 {
    width: 80%;
}

[id^=institute] .table-002 td {
    padding-right: 16px;
}

[id^=institute] .table-003 td {
    padding-left: 32px;
}

#institute-lrdwgvuy .u-marked-005 {
    position: relative;
}

#institute-lrdwgvuy .u-marked-005::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: calc((100% - 160px) / 2);
    padding-left: 8%;
}

[id^=institute] div.u-flex.u-flex-wrap {
    justify-content: space-between;
    padding-right: 64px;
    padding-left: 64px;
}

@media screen and (min-width: 768px) and (max-width: 959.98px) {
[id^=institute] .image-frame {
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: 0;
}

[id^=institute] .game-plot dl dd p {
        margin-right: 0;
    margin-left: 16px;
}

[id^=institute] .game-plot dl dd p:first-child {
    margin-top: 16px;
}

[id^=institute] .game-plot dl dd p:last-child {
    margin-bottom: 16px;
}
}

@media screen and (max-width: 767.98px) {
[id^=institute] .characters dl {
    width: 100%;
}

[id^=institute] .game-plot dl {
    flex-direction: column;
}

[id^=institute] .image-frame {
    width: auto;
    min-width: 360px;
    max-width: 400px;
    margin: 0 auto 16px auto;
}

[id^=institute] .game-plot dl dd p {
    margin-right: 0;
    margin-left: 0;
}

[id^=institute] .game-plot dl dd p:last-child {
    margin-bottom: 16px;
}

[id^=institute] div.u-flex.u-flex-wrap {
    padding-right: 16px;
    padding-left: 16px;
}

[id^=institute] table.institute-command {
    width: 100%;
}

[id^=institute] .table-002 {
    width: 100%;
}

[id^=institute] .table-002 td {
    padding-right: 8px;
}

[id^=institute] .table-003 td {
    padding-left: 16px;
}
}

@media screen and (max-width: 399.98px) {
[id^=institute] .image-frame {
    display: block;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 24px 0 8px 0;
    text-align: center;
    list-style-type: none;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

[id^=institute] .image-frame img.screenshot {
    border: none;
    border-radius: 0;
}

[id^=institute] .game-plot dl dd p {
    margin-right: 0;
    margin-left: 0;
}
}



.product-data .product-data-modification {
    flex-direction: column;
    width: 100%;
}

.product-data-modification > div {
    display: flex;
    align-items: baseline;
    width: 100%;
}

.product-data-modification dl {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.product-data-modification dt {
    width: 14em;
    text-align: right;
    font-size: 1.5rem;
}

.product-data-modification dt.date {
    width: 12em;
}

.product-data-modification > div dt.date {
    visibility: hidden;
}

.product-data-modification > div:first-child dt.date {
    visibility: visible;
}

.product-data-modification dd {
    margin-right: 24px;
}

.product-data-modification dd span.modification-detail-01 {
    margin-left: 8px;
    color: #9bb6dd;
}

.product-data-modification dd span.modification-detail-02 {
    margin-left: 4px;
    margin-right: 4px;
    color: #8fced6;
}

.product-data-modification .modification-detail-03 {
    margin-right: 4px;
    color: #9bb6dd;
}

.product-data-modification .modification-detail-04 {
    margin-right: 4px;
}

.product-data-modification .contribute-name {
    margin-right: 4px;
}

@media screen and (max-width: 959.98px) {
.product-data-modification {
    margin-left: 0;
}
}

@media screen and (max-width: 639.98px) {
section#software-modification {
    margin-top: 0px;
}

.product-data-modification > div {
    flex-direction: column;
}

.product-data-modification dt {
    float: none;
    width: auto;
    text-align: left;
}

.product-data-modification > div dt.date {
    display: none;
}

.product-data-modification > div:first-child dt.date {
    display: block;
    margin-bottom: 8px;
}

.product-data-modification dd {
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

.product-data-modification dd:nth-of-type(n+2) {
    margin-top: 0px;
}

.product-data-modification dd::before {
    content: '\e037';
    margin-right: 4px;
    padding-right: 6px;
    font-family: 'Material Icons';
    font-size: 0.5em;
}
}


.product-data-softwarehouse dt {
    width: 15%;
}

.product-data-softwarehouse dd {
    width: 85%;
}

.product-data-softwarehouse dd span {
    margin-right: 8px;
}

.product-data-softwarehouse dd a.product-data-softwarehouse-history {
    padding: 0 8px;
    font-family: 'Play', sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
    background-color: #00849f;
    border-radius: 2px;
}

.product-data-softwarehouse dd a.product-data-softwarehouse-history:link,
.product-data-softwarehouse dd a.product-data-softwarehouse-history:visited {
    color: #fff;
    text-decoration: none;
}

.softwarehouse-slideshow {
    width: 640px;
    height: 240px;
    margin: 16px auto;
        list-style-type: none;
    background: linear-gradient(90deg, #24273d, #323c5a 50%, #24273d);
    border-bottom: #666 solid 1px;
    border-radius: 6px;
    box-shadow: 2px 3px 3px rgba(0,0,0,0.8) inset, -2px 0 3px rgba(0,0,0,0.8) inset, 0 -2px 3px rgba(0,0,0,0.2) inset;
}

@media screen and (max-width: 480px) {
.product-data-softwarehouse dt {
    width: auto
}

.product-data-softwarehouse dd {
    width: auto;
}
}


.publication-slideshow {
    width: 480px;
    height: 360px;
    margin: 16px auto;
    list-style-type: none;
    background: linear-gradient(90deg, #24273d, #323c5a 50%, #24273d);
    border-bottom: #666 solid 1px;
    border-radius: 6px;
    box-shadow: 2px 3px 3px rgba(0,0,0,0.8) inset, -2px 0 3px rgba(0,0,0,0.8) inset, 0 -2px 3px rgba(0,0,0,0.2) inset;
}

.publication-slideshow img {
    max-height: 320px;
}

.product-book-container {
        display: grid;
    grid-template-columns: repeat(auto-fill, 144px);
    grid-gap: 6px;
    width: auto;
    max-width: 920px;
    margin: 16px 0;
    list-style-type: none;
    border-bottom: #999 dotted 1px;
}

.product-book-container:not(:first-child) {
    margin-top: 32px;
}

.product-book {
    width: 144px;
    height: 224px;
    margin: 0 6px 40px 0;
    background: linear-gradient(to top left, rgba(132,134,147,0.2)0%,rgba(42,44,57,0.2)40%,rgba(32,34,47,0.2)100%);
    border-radius: 4px;
    box-shadow: 12px 12px 16px 0px rgba(20,20,20,0.5);
}

.product-book-container li:nth-of-type(6n) {
    margin-right: 0;
}

.product-book .product-book-details {
    margin-top: 8px;
}

.product-book h5 {
    font-size: 1.4rem;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
}

.product-book-details-icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 12px 0 20px;
}

.product-book-details-icons span {
    font-size: 2.2rem;
}

.product-book-details-icons .enclosure {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8rem;
    height: 1.6rem;
    font-family: 'Play', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
}

.product-book-details-icons .program-yes {
    color: #fff;
    background-color: #0d799d;
}

.product-book-details-icons .program-no {
    color: #ccc;
    background-color: #666;
}

.product-book-details-icons .research-yes {
    color: #ab2e50;
}

.product-book-details-icons .research-no {
    color: #666;
}

.product-data-book span:not(:last-child)::after {
    content: ',';
    margin: 0 8px 0 4px;
}

.product-book p {
    display: flex;
    justify-content: center;
}

.product-book p a img {
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.product-book p a:hover img,
.product-data-publications p a:hover img {
        box-shadow: 0 0 16px 2px #dffcff;
    border-radius: 4px;
}

@media screen and (max-width: 639.98px) {
.product-book-container {
    justify-content: center;
}

.product-data-book dt {
    width: 100%;
}
.product-data-book dd {
    width: 100%;
}

.product-book-container {
    width: 100%;
}

.product-book {
    margin: 0 0 32px 0;
}
}


.book-title {
    width: auto;
    max-width: 960px;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 12px;
}

.book-title h1 {
    order: 1;
    padding: 0 8px 0 0;
    font-size: 2.1rem;
}

.book-title .issue {
    order: 2;
    font-size: 1.8rem;
}

.product-image-book {
    width: auto;
    max-width: 512px;
    height: 336px;
}

.product-list-container .no-program {
    margin-left: 16px;
    color: var(--dt-color);
    font-size: 1.4rem;
}

@media screen and (max-width: 519.98px) {
.product-image-book {
    width: 90%;
    height: 336px;
}
}


.book-list p {
    width: 160px;
}


.product-index-machines {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 912px;
}

.product-index-machines li {
    margin: 0 0 64px 0;
}

.product-index-machines li img {
    display: block;
    margin: 0 auto;
    transition: .25s ease-in-out;
}

.product-index-machines li a.machine-thumb {
    display: block;
    background-color: #fff;
}

.product-index-machines li a:hover img {
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.product-index-machines li a.machine-name span {
    display: none;
}

.product-image-hardware {
    margin-left: 24px;
    margin-right: 24px;
}

@media screen and (max-width: 519.98px) {
.product-index-machines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 100%;
}

.product-index-machines li {
    width: 240px;
    margin: 0 auto 64px auto;
}

.product-index-machines li img {
    margin: 0 auto 0 auto;
}
}

@media screen and (min-width: 520px) and (max-width: 959.98px) {
.product-index-machines {
    display: flex;
    justify-content: center;
    width: 100%;
}

.product-index-machines li {
    width: 240px;
    margin: 0 4px 64px 4px;
}
}

@media screen and (max-width: 959.98px) {
.product-image-hardware {
    margin: 0;
    padding: 0;
}

#hardware .product-image {
    background: none;
    border: none;
    box-shadow: none;
}

#hardware .product-image li {
    width: 100%;
    margin-right: 0;
}

.product-image-hardware li img {
    max-width: 100%;
    height: 512px;
    object-fit: cover;
    margin: 0;
}

.product-index-machines li a.machine-name span {
    display: block;
    text-align: center;
    font-family: 'Play', sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
    color: var(--link-color);
}

.product-index-machines li a.machine-name img {
    display: none;
}
}

@media screen and (max-width: 519.98px) {
.product-image-hardware li img {
    width: 100%;
    height: 320px;
}
}


@media screen and (max-width: 767.98px) {
#exhibition-goods div.image {
    margin: 0;
}

#exhibition-goods div.image img {
    max-width: calc(100vw - 56px);
    height: auto;
}

#exhibition-goods p.textstyle-001 {
    margin-right: 0;
    margin-left: 0;
}
}

table.codename {
    width: 912px;
    margin: 0 auto;
    font-size: 1.3rem;
    background: url(/assets/images/table-background.jpg) #060912 no-repeat;
}

table.codename tr:hover {
    background-color: #39465e;
    opacity: .8;
}

table.codename thead td {
    height: 1.6rem;
    text-align: right;
}

table.codename thead th {
    width: auto;
    height: 2.4rem;
    line-height: 2.4rem;
    border: #000 solid 1px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAIAAAC0rgCNAAAADHRFWHRBdXRob3IATGF2ZXLWfXzfAAAAEXRFWHRDb3B5cmlnaHQAT2ghRk0tN4ZXokAAAAADc0JJVAgICNvhT+AAAAAJcEhZcwAACxIAAAsSAdLdfvwAAABNSURBVAiZLchBDoJQEERB5vXXc7H5mHj/I3gDEyF0D2FjLWt5zY33OjmOnTjYJ3FoGzvEJ+3m6iaJnt9ALUhCiKGBBBT/g6riAXzqdwPUkSNd8VcXcwAAAABJRU5ErkJggg==) repeat-x;
}

table.codename th.tablehead {
    height: 2.4rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAIAAAC0rgCNAAAADHRFWHRBdXRob3IATGF2ZXLWfXzfAAAAEXRFWHRDb3B5cmlnaHQAT2ghRk0tN4ZXokAAAAADc0JJVAgICNvhT+AAAAAJcEhZcwAACxIAAAsSAdLdfvwAAABeSURBVAiZBcFBDsIgEEDR+icsWLCwyQBlINhregG9ptbSSzSp703P94txHGRVfmOQVfnuO0uMfLaNkpKoVUpOck8RW4qEeaaaiQ+BVk2c9/TWBOd49C7XDda1y3lNf60oE9uJKCrSAAAAAElFTkSuQmCC) repeat-x;
}

table.codename tbody th {
    position: relative;
    height: 2.4rem;
    padding-left: 16px;
    line-height: 2.4rem;
    text-align: left;
    font-weight: normal;
    white-space: nowrap;
}

table.codename tbody th::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 16px;
    width: 100%;
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 0 #434556;
}

table.codename tbody td {
    position: relative;
    height: 2.4rem;
    text-align: center;
}

table.codename tbody td::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 0 #434556;
}

table.codename tbody td:last-child::after {
    width: calc(100% - 16px);
}

table.codename tbody th:last-child::after {
    height: 1px;
    margin-top: -1px;
    background-image: linear-gradient(
      90deg,
      hsla(0, 0%, 100%, 0),
      hsla(0, 0%, 100%, 0.7) 50%,
      hsla(0, 0%, 100%, 0) 100%);
    border: none;
    box-shadow: none;
}

table.codename tfoot {
    font-size: 80%;
    text-align: right;
}

#exhibition-codename .u-marked-001 {
    display: table;
}

#exhibition-codename .u-marked-001::before {
    display: table-cell;
    padding-right: 4px;
}

#exhibition-codename h4 {
    display: flex;
    flex-direction: column;
    margin: 32px 0 8px 0;
    padding: 4px 0 4px 16px;
    color: #ccc;
    font-size: 1.4rem;
    line-height: 1.3;
    border-left: 8px solid #00849f;
}

#exhibition-codename h4 span {
    color: #fff;
    font-size: 2rem;
}

#exhibition-codename img.screenshot {
    margin: 8px 0;
}

@media screen and (max-width: 767.98px) {
#exhibition-codename div.textstyle-001 {
    columns: 1;
}
}

#exhibition-tips ul li {
    padding-right: 16px;
    padding-left: 32px;
}

#exhibition-tips h3.heading-002 {
    margin-top: 48px;
}

@media screen and (max-width: 767.98px) {
#exhibition-tips ul li {
    padding-right: 0;
    padding-left: 0;
    line-height: 1.3;
}

#exhibition-tips section {
    margin-bottom: 0;
}
}

#exhibition-icon > div {
    width: 976px;
    margin: 0 auto 16px auto;
}

#exhibition-icon .icon-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 192px;
    height: 160px;
    margin: 8px 32px 16px 16px;
    background: #fff;
    border-radius: 6px;
    border-bottom: #666 solid 1px;
    box-shadow: 2px 3px 3px rgba(0,0,0,0.8) inset, -2px 0 3px rgba(0,0,0,0.8) inset, 0 -2px 3px rgba(0,0,0,0.2) inset;
}

#exhibition-icon .box-icon {
    display: flex;
    margin: 0 0;
}

#exhibition-icon .box-icon div {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    line-height: 3;
}

#exhibition-icon .box-icon div p {
    margin-bottom: 16px;
    line-height: 1.3;
}

@media screen and (max-width: 767.98px) {
#exhibition-icon .icon-image {
    min-width: 192px;
    margin-right: 16px;
    margin-left: 0;
}
}

@media screen and (max-width: 519.98px) {
#exhibition-icon .icon-image {
    min-width: 128px;
}

#exhibition-icon .icon-image img {
    max-width: 112px;
    height: auto;
}
}

#exhibition-f_font ol {
    margin-left: 0;
}

@media screen and (max-width: 767.98px) {
#exhibition-f_font img {
    width: calc(100vw - 32px);
    height: auto;
    text-align: center;
}
#exhibition-f_font div {
    columns: 1;
}
}

#exhibition-hybrid_n ol {
    margin: 32px 0 32px 32px;
}

#exhibition-hybrid_n .textstyle-001 p span {
    color: lightsteelblue;
    font-size: 1.2rem;
}

#exhibition-hybrid_n p.image {
    text-align: center;
}

#exhibition-hybrid_n {
    counter-reset: caption 0;
}

#exhibition-hybrid_n h4 {
    counter-increment: caption 1;
    position: relative;
    margin: 3em 0 1em 0;
    padding: .25em 0 .25em .75em;
    border-left: 8px solid #00849f;
}

#exhibition-hybrid_n h4::before {
    content: counter(caption)".";
    width: 2em;
    height: 1.5em;
    margin-right: 8px;
    color: #fff;
    font-size: 0.9em;
    line-height: 32px;
    text-align: center;
}

#exhibition-hybrid_n ul {
    margin: 0 1em 0 32px;
    text-indent: 0;
}

#exhibition-hybrid_n .note {
    display: block;
    margin: 1em 0 3em 0;
    color: lightsteelblue;
    font-size: 1.3rem;
    text-align: center;
    line-height: 1.5;
}

#exhibition-hybrid_n .note a {
    color: lightsteelblue;
    text-decoration: underline;
}

#exhibition-hybrid_n .note a:hover {
    color: var(--link-color);
    transition: all 0.3s ease 0s;
}

#exhibition-hybrid_n .note ul {
    display: inline-block;
}

#exhibition-hybrid_n .note ul li {
    text-align: left;
}

#exhibition-hybrid_n pre {
    color: #fff;
    font-family: monospace, serif;
    font-size: 1.4rem;
    line-height: 1.7;
}

@media screen and (max-width: 767.98px) {
#exhibition-hybrid_n ol {
    margin-left: 0;
}

#exhibition-hybrid_n ul {
    margin: 0 0 0 16px;
}

#exhibition-hybrid_n div {
    columns: 1;
}

#exhibition-hybrid_n .note {
    text-align: left;
}

#exhibition-hybrid_n p.image {
    display: flex;
    justify-content: center;
}
}

@media screen and (min-width: 768px) and (max-width: 959.98px) {
#exhibition-hybrid_n .note {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}

#exhibition-hybrid_n .note p {
    display: inline-block;
    text-align: left;
}
}

#exhibition-armrobo h3 {
    margin-top: 64px;
}

#exhibition-armrobo .wrap-around {
    display: flex;
}

#exhibition-armrobo .images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    margin: 16px auto;
}

#exhibition-armrobo .armrobo-video {
    width: 640px;
    height: auto;
    margin: 16px auto 0 auto;
}

@media screen and (max-width: 767.98px) {
#exhibition-armrobo .wrap-around {
    flex-direction: column;
}

#exhibition-armrobo .wrap-around > div {
    margin-right: 0;
}

#exhibition-armrobo .wrap-around .ad-armrobo {
    margin: 16px auto 0 auto;
}

#exhibition-armrobo .armrobo-video {
    width: 100%;
}

#exhibition-armrobo .armrobo-video iframe {
    max-width: 100%;
}
}


#msearch {
    position: relative;
}

#msearch .heading-wrapper {
    width: 100%;
    margin: 0 auto 0 auto;
    padding-top: 24px;
}

#msearch .heading-001 {
    margin-top: 0;
}

#msearch #search2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
    margin-bottom: 16px;
    font-size: 1.5rem;
}

#msearch #search2 > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 16px;
}

#msearch .msearch-help {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
    font-size: 1.4rem;
}

#msearch .msearch-help p {
    display: flex;
    align-items: center;
}

#msearch #result {
    margin-top: 16px;
    font-size: 1.5rem;
    line-height: 1.5;
}

#msearch #result .form-group {
    margin-bottom: 16px;
    border: none;
}

#msearch #result dl#list {
    margin-top: 16px;
}

#msearch #result dl#list dt span.resultnum {
    display: inline-block;
    width: auto;
    min-width: 1.5em;
    height: 16px;
    margin-right: 8px;
    padding: 0 6px 4px 6px;
    text-align: center;
    line-height: 20px;
    font-family: 'Play', sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    background-color: #0d799d;
}

#msearch #result dl div {
    position: relative;
    margin-top: 16px;
}

#msearch #result .result-summary {
    padding: 0 2em;
    font-size: 1.4rem;
}

#msearch #result .result-summary em {
    font-weight: bold;
}

#msearch #result .url {
    padding: 0 2em;
    font-size: 1.3rem;
    color: #dcdcdc;
}

#msearch .msearch-pagination {
    display: flex;
    margin: 0 auto;
}

#msearch .msearch-pagination ol {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    margin: 16px auto;
    list-style: none;
}

#msearch .msearch-pagination ol:empty {
    height: 0;
    margin: -16px 0 -32px 0;
}

#msearch .msearch-pagination ol li:empty {
    display: none;
}

#msearch .msearch-pagination ol li {
    margin-bottom: 8px;
    font-family: 'Play', sans-serif;
    font-weight: bold;
    font-size: 18px;
}

#msearch .msearch-pagination ol li.current {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    margin: 0 4px;
    padding: 8px;
    color: #000;
    background-color: #ccd;
    border-radius: 2px;
}

#msearch .msearch-pagination ol li:not(.current) a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    margin: 0 4px;
    padding: 8px;
    color: #000;
    background-color: #728ae0;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.4s ease-in;
}

#msearch .msearch-pagination ol li.direction a {
    width: 3em;
    height: 20px;
    margin: 0 4px;
    padding: 8px;
    text-align: center;
    color: #000;
    background-color: #728ae0;
    border-radius: 2px;
}

#msearch .msearch-pagination ol li a:hover {
    background-color: #21d4fd;
}

#msearch-helppage {
    line-height: 1.6;
}

#msearch-helppage h2 {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 1.6rem;
    font-weight: normal;
}

#msearch-helppage h2 span.heading-005::after {
    padding-top: 0;
}

#msearch-helppage dl div {
    display: flex;
}

#msearch-helppage dt {
    margin-right: 8px;
    color: var(--dt-color);
}

#msearch-helppage .usage-help {
    margin-top: 16px;
    margin-bottom: 32px;
    font-size: 1.5rem;
}

#msearch-helppage .usage-help div {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: #999 1px dotted;
}

#msearch-helppage .usage-help dt {
    width: 7em;
    min-width: 7em;
    margin-right: 16px;
    text-align: right;
    white-space: nowrap;
}

#msearch-helppage ol {
    margin-left: 32px;
    margin-bottom: 16px;
    padding-right: 16px;
    font-size: 1.4rem;
}

#msearch-helppage ol li {
    margin-bottom: 8px;
}

#msearch-helppage ol kbd {
    font-size: 1.5rem;
}

#msearch-helppage .msearch-note {
    display: flex;
    flex-direction: column;
    margin: 16px 0;
    font-size: 1.3rem;
}

#msearch-helppage .msearch-note div {
    margin-right: 0;
    margin-left: auto;
    text-align: right;
}

#msearch-helppage div.msearch-copyright p a {
    margin-right: 4px;
    margin-left: 4px;
}

#msearch-helppage .msearch-copyright {
    margin-top: 16px;
    margin-bottom: 16px;
    font-size: 1.4rem;
}

#msearch-helppage .noresult {
    line-height: 1.7;
}

@media screen and (max-width: 959.98px) {
.heading-wrapper{
    margin-top: 16px !important;
    padding-top: 0 !important;
}

#msearch #result .result-summary,
#msearch #result .url {
    padding: 0;
}

#msearch .msearch-pagination ol {
    justify-content: flex-start;
}
}

@media screen and (max-width: 767.98px) {
#msearch-helppage .msearch-note div {
    flex-direction: column;
}

#msearch-helppage dt {
    margin-right: 0;
}

#msearch-helppage ol {
    margin-left: 0;
}
}


#error h1 {
    margin-top: 16px;
    padding-top: 32px;
    padding-bottom: 32px;
    font-family: 'Play', sans-serif;
    font-size: 3rem;
    text-align: center;
}

#error div {
    display: table;
    margin: 0 auto;
}

#error div p {
    display: table;
    line-height: 1.4;
}

#error div p:not(:first-child):before {
    content: '\e047';
    display: table-cell;
    padding-right: 4px;
    font-family: 'Material Icons';
    font-size: 1rem;
}

#error img {
    margin: 64px auto;
}


#renewal h4 {
    display: inline-block;
    margin: var(--lineheight-001) 32px 8px 0;
    padding-bottom: 4px;
    text-indent: 0;
    font-size: 1.5rem;
    color: aqua;
    border-bottom: 1px #99a dotted;
}

#renewal h4::before {
    content: '\ea1c';
    margin-right: 4px;
    color: deepskyblue;
    font-family: 'icomoon';
}

#renewal div.textstyle-001 {
    margin-bottom: 32px;
}

#renewal dl {
    margin: 16px 0 32px 0;
}

#renewal dt {
    margin-left: 3rem;
    text-indent: -3rem;
    line-height: 1.8em;
    color: var(--dt-color);
}

#renewal dd {
    margin-left: 3rem;
    text-indent: -3rem;
    line-height: 1.8em;
}

#renewal dt::before {
    content: 'Q';
    width: 2.4em;
    height: 2em;
    margin-right: 8px;
    padding: 0 4px;
    font-family: 'Play', sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    background-color: #3183c6;
    text-align: center;
    line-height: 1.8em;
}

#renewal dd:first-of-type::before {
    content: 'A';
    width: 2.4em;
    height: 2em;
    margin-right: 8px;
    padding: 0 5px;
    font-family: 'Play', sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    background-color: #af2c67;
    text-align: center;
    line-height: 1.8em;
}

#renewal dd:not(:first-of-type) {
    text-indent: 0;
}

@media screen and (min-width: 960px) {
#renewal h2 {
    margin-bottom: 48px;
}

#renewal h4 {
margin-left: 1em;
}

#renewal div.textstyle-001 p {
    margin-right: 2em;
    margin-left: 2em;
}

#renewal dl {
    margin: 16px 2em 32px 2em;
}
}

@keyframes scroll-hint-appear {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%,
  100% {
    transform: translateX(-40px);
    opacity: 0;
  }
}

.scroll-hint.is-right-scrollable {
  background: linear-gradient(270deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint.is-right-scrollable.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint-icon {
  position: absolute;
  top: calc(25% - 25px);
  left: calc(50% - 60px);
  box-sizing: border-box;
  width: 120px;
  height: 80px;
  border-radius: 5px;
  transition: opacity .3s;
  opacity: 0;
  background: rgba(0, 0, 0, .7);
  text-align: center;
  padding: 20px 10px 10px 10px;
}

.scroll-hint-icon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  pointer-events: none;
}

.scroll-hint-text {
  font-size: 10px;
  color: #FFF;
  margin-top: 5px;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
  opacity: .8;
}

.scroll-hint-icon:before {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: #FFF;
  vertical-align: middle;
  text-align: center;
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=);
}

.scroll-hint-icon:after {
  content: "";
  width: 34px;
  height: 14px;
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -20px;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
  opacity: 0;
  transition-delay: 2.4s;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
  opacity: 1;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
  animation: scroll-hint-appear 1.2s linear;
  animation-iteration-count: 2;
}

.scroll-hint-icon-white {
  background-color: #FFF;
  box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}

.scroll-hint-icon-white:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=);
}

.scroll-hint-icon-white:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==);
}

.scroll-hint-icon-white .scroll-hint-text {
  color: #000;
}


.u-hidden {display: none;}
.u-inline {display: inline;}
.u-inlineblock {display: inline-block;}
.u-flex {display: flex; justify-content: flex-start;}
.u-flex-row {display: flex; flex-direction: row;}
.u-flex-column {display: flex; flex-direction: column;}
.u-flex-wrap {flex-wrap: wrap;}
.u-justifycontent-c {justify-content: center;}
.u-justifycontent-sb {justify-content: space-between;}
.u-justifycontent-fe {justify-content: flex-end;}
.u-align-items-c {align-items: center;}
.u-align-items-bl {align-items: baseline;}
.u-align-items-fs {align-items: flex-start;}

.u-width-100p {width: 100%;}
.u-width-10p {width: 10%;}
.u-width-15p {width: 15%;}
.u-width-20p {width: 20%;}
.u-width-320 {width: 320px;}
.u-width-400 {width: 400px;}
.u-width-480 {width: 480px;}
.u-width-640 {width: 640px;}
.u-width-8em {width: 8em;}
.u-width-10em {width: 10em;}


.u-mt-1em {margin-top: 1em;}
.u-mt-2em {margin-top: 2em;}
.u-mt-3em {margin-top: 3em;}
.u-mt-4em {margin-top: 4em;}
.u-mt-m1em {margin-top: -1em;}
.u-mt-1lh {margin-top: var(--lineheight-001);}
.u-mt-2 {margin-top: 2px;}
.u-mt-4 {margin-top: 4px;}
.u-mt-8 {margin-top: 8px;}
.u-mt-16 {margin-top: 16px;}
.u-mt-24 {margin-top: 24px;}
.u-mt-32 {margin-top: 32px;}
.u-mt-48 {margin-top: 48px;}
.u-mt-64 {margin-top: 64px;}

.u-mb-1em {margin-bottom: 1em;}
.u-mb-2em {margin-bottom: 2em;}
.u-mb-3em {margin-bottom: 3em;}
.u-mb-4em {margin-bottom: 4em;}
.u-mb-m1em {margin-bottom: -1em;}
.u-mb-1lh {margin-bottom: var(--lineheight-001);}
.u-mb-2 {margin-bottom: 2px;}
.u-mb-4 {margin-bottom: 4px;}
.u-mb-8 {margin-bottom: 8px;}
.u-mb-16 {margin-bottom: 16px;}
.u-mb-24 {margin-bottom: 24px;}
.u-mb-32 {margin-bottom: 32px;}
.u-mb-48 {margin-bottom: 48px;}
.u-mb-64 {margin-bottom: 64px;}
.u-mb-128 {margin-bottom: 128px;}

.u-ml-05em {margin-left: 0.5em;}
.u-ml-1em {margin-left: 1em;}
.u-ml-2em {margin-left: 2em;}
.u-ml-3em {margin-left: 3em;}
.u-ml-4em {margin-left: 4em;}
.u-ml-4 {margin-left: 4px;}
.u-ml-8 {margin-left: 8px;}
.u-ml-16 {margin-left: 16px;}
.u-ml-32 {margin-left: 32px;}
.u-ml-48 {margin-left: 48px;}
.u-ml-64 {margin-left: 64px;}
.u-ml-80 {margin-left: 80px;}

.u-mr-05em {margin-right: 0.5em;}
.u-mr-1em {margin-right: 1em;}
.u-mr-2em {margin-right: 2em;}
.u-mr-3em {margin-right: 3em;}
.u-mr-4em {margin-right: 4em;}
.u-mr-4 {margin-right: 4px;}
.u-mr-8 {margin-right: 8px;}
.u-mr-16 {margin-right: 16px;}
.u-mr-32 {margin-right: 32px;}
.u-mr-48 {margin-right: 48px;}
.u-mr-64 {margin-right: 64px;}
.u-mr-80 {margin-right: 80px;}

.u-mv-16 {margin-top: 16px; margin-bottom: 16px;}

.u-mh-auto {margin-left: auto; margin-right: auto;}
.u-mh-16 {margin-left: 16px; margin-right: 16px;}
.u-mh-32 {margin-left: 32px; margin-right: 32px;}
.u-mh-48 {margin-left: 48px; margin-right: 48px;}

.u-p-8 {padding: 8px;}

.u-pt-4 {padding-top: 4px;}
.u-pt-8 {padding-top: 8px;}
.u-pt-16 {padding-top: 16px;}
.u-pt-32 {padding-top: 32px;}

.u-pb-4 {padding-bottom: 4px;}
.u-pb-8 {padding-bottom: 8px;}
.u-pb-16 {padding-bottom: 16px;}
.u-pb-32 {padding-bottom: 32px;}
.u-pb-1em {padding-bottom: 1em;}
.u-pb-2em {padding-bottom: 2em;}

.u-pl-4 {padding-left: 4px;}
.u-pl-8 {padding-left: 8px;}
.u-pl-16 {padding-left: 16px;}
.u-pl-32 {padding-left: 32px;}
.u-pl-64 {padding-left: 64px;}
.u-pl-1em {padding-left: 1em;}
.u-pl-2em {padding-left: 2em;}

.u-pr-4 {padding-right: 4px;}
.u-pr-8 {padding-right: 8px;}
.u-pr-16 {padding-right: 16px;}
.u-pr-32 {padding-right: 32px;}
.u-pr-64 {padding-right: 64px;}
.u-pr-1em {padding-right: 1em;}
.u-pr-2em {padding-right: 2em;}

.u-align-center {text-align: center !important;}
.u-align-left {text-align: left !important;}
.u-align-right {text-align: right !important;}
.u-v_align-top {vertical-align: top !important;}
.u-v_align-middle {vertical-align: middle !important;}

.u-indent {text-indent: 1em;}
.u-noindent {text-indent: 0;}
.u-underline {text-decoration: underline;}
.u-nounderline {text-decoration: none;}

.u-lineheight-14 {line-height: 1.4;}
.u-lineheight-15 {line-height: 1.5;}
.u-lineheight-16 {line-height: 1.6;}
.u-lineheight-20 {line-height: 2;}
.u-lineheight-3ren {line-height: 3rem;}

.u-spacing {letter-spacing: 4px;}

.u-noliststyle {list-style: none;}
.u-text-emphasis {text-emphasis: filled dot;}

.u-color-key {color: var(--key-color);}
.u-color-f3528a {color: #f3528a;}
.u-color-mediumturquoise {color: #48d1cc;}
.u-color-hotpink {color: #ff69b4;}
.u-color-crimson {color: #dc143c;}
.u-color-deeppink {color: #ff1493;}
.u-color-steelblue {color: #4682b4;}
.u-color-aqua {color: #00ffff;}
.u-color-deepskyblue {color: #00bfff;}
.u-color-lavender {color: #e6e6fa;}
.u-color-lightstategray {color: #778899;}
.u-color-gainsboro {color: #dcdcdc;}
.u-color-glow-blue{color: #8affff; filter: drop-shadow(0 0 6px rgba(7,99,246,.9)) drop-shadow(0 0 6px rgba(7,173,250,.6));}

.u-color-icon::before {color: var(--icon-color);}

.u-border-solid {border-bottom: 1px #99a solid;}
.u-border-dotted {border-bottom: 1px #99a dotted;}

.u-font-monospace {font-family: 'Oxygen Mono',monospace;}
.u-font-icomoon {font-family: 'icomoon';}

.u-fontsize-1 {font-size: 1rem;}
.u-fontsize-10 {font-size: 1.0rem;}
.u-fontsize-11 {font-size: 1.1rem;}
.u-fontsize-12 {font-size: 1.2rem;}
.u-fontsize-13 {font-size: 1.3rem;}
.u-fontsize-14 {font-size: 1.4rem;}
.u-fontsize-15 {font-size: 1.5rem;}
.u-fontsize-16 {font-size: 1.6rem;}
.u-fontsize-17 {font-size: 1.7rem;}
.u-fontsize-18 {font-size: 1.8rem;}
.u-fontsize-19 {font-size: 1.9rem;}
.u-fontsize-20 {font-size: 2.0rem;}

.u-rotate-x {display: inline-block; transform: rotateX(180deg);}

.u-marked-001::before {content: '※'; margin-right: 4px;}
.u-marked-002::before {content: '\ea1e'; margin-right: 4px; font-family: 'icomoon';} 
.u-marked-003::before {content: '\e9d9'; margin-right: 4px; font-family: 'icomoon';} 
.u-marked-004::before {content: '\e55f'; margin-right: 4px; vertical-align: middle; font-family: 'Material Icons';} 
.u-marked-005::before {content: '\ea34'; margin-right: 4px; font-family: 'icomoon';} 
.u-marked-006::before {content: '\ea38'; margin-right: 4px; font-family: 'icomoon';} 
.u-marked-007::before {content: 'slideshow'; margin-right: 4px; font-family: 'Material Icons';} 
.u-marked-008::before {content: '――'; margin-right: 4px;} 
.u-marked-009::before {content: '\e037'; margin-right: 4px; vertical-align: middle; font-family: "Material Icons";} 
.u-marked-010::before {content: '\e268'; margin-right: 4px; vertical-align: middle; font-family: "Material Icons";} 
.u-marked-011::before {content: '：'; margin-left: 4px; margin-right: 4px;}

.u-marked-101 {position: relative; top: 4px; margin-left: 4px; text-indent: 0; font-size: 110%; font-weight: bold;} 
.u-marked-102::after {content: '：';} 
.u-divide::after {content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #000; border-bottom: 1px solid #3e4855;}

.u-no-link {pointer-events: none;}

.u-counter-reset {counter-reset: number 0;}
.u-counter-001:nth-of-type(1) {counter-reset: number;}
.u-counter-001:not(:nth-of-type(1)) {counter-increment: number;}
.u-counter-001::before {content: counter(number)" ";}
.u-counter-002::before {counter-increment: number 1; content: counter(number) " ";}
.u-counter-003:nth-of-type(1) {counter-reset: number;}
.u-counter-003:not(:nth-of-type(1)) {counter-increment: number;}
.u-counter-003::before {content: counter(number,decimal-leading-zero)" ";}
.u-counter-004::before {counter-increment: number 1; content: counter(number,decimal-leading-zero)" ";}
.u-counter-005:nth-of-type(1) {counter-reset: number;}
.u-counter-005:not(:nth-of-type(1)) {counter-increment: number;}
.u-counter-005::before {content: "[" counter(number,decimal-leading-zero) "] ";}
.u-counter-006::before {counter-increment: number 1; content: "[" counter(number) "] ";}


.ac_input {
    width: 100%;
}

@media screen and (min-width: 960px) {
.ac_input {
    width: 480px;
}
}

.ac_navi {
    flex-direction: column;
    padding-bottom: 8px;
    border: none;
    background-color: var(--panel-color);
}

.ac_navi > .info {
    display: block;
    margin-bottom: 8px !important;
    color: #fff;
    text-align: right;
}

.navi_page {
    padding: 4px 8px;
    background-color: #cfcfda;
    border-radius: 2px;
}

.ac_navi > p > a:link,
.ac_navi > p > a:visited,
.ac_navi > p > a:hover,
.ac_navi > p > a:active {
    margin: 0 2px !important;
    color: #000;
    text-decoration: none;
}

.ac_navi > p > a.navi_prev,
.ac_navi > p > a.navi_next {
    color: #fff;
}

.ac_navi > p > a:hover {
    color: #009ffa;
    text-decoration: underline;
}

.ac_navi > p > a >.current {
    color: #bd2d51;
}

.ac_results {
    padding-top: 8px;
    padding-bottom: 8px;
}

.ac_results > li {
    margin-left: 8px;
}

.ac_subinfo > dl {
    width: 336px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
}

.ac_subinfo > dl > dt {
    padding-left: 8px;
    color: #fff;
    background: #28354a;
}

.ac_subinfo > dl > dd {
    width: 224px;
}

.ac_container {
    display: inline-block;
    position: relative;
}

@media not all and (min-width: 640px) {
.ac_container {
    width: 312px !important;
}

.ac_subinfo {
    display: none;
}
}

.ac_container::before {
    content: '\e8b6';
    display: inline-block;
    position: absolute;
    top: 2px;
    left: 0;
    height: 1.9rem;
    padding: 4px 3px 0 6px;
    color: #fff;
    font-family: 'Material Icons';
    font-size: 2rem;
    }

.ac_container input {
    width: 320px !important;
    height: 26px;
    margin-right: -2px;
    padding: 2px 8px 0 32px;
    color: #fff !important;
    background-color: #5a6981;
    border: none;
    border-bottom: #999 1px solid;
    border-radius: 4px;
    border-radius: 26px;
    box-shadow: inset 0 2px 3px 2px rgba(0,0,0,0.6);
}

@media screen and (max-width: 328px) {
    .ac_container input {
width: 304px !important;
    }
}

.ui-widget-header {
    height: 2em !important;
    background: linear-gradient(180deg, #3e3f4c, #30313e);
    box-shadow: 0 1px 0 #696a70 inset, 0 -1px 0 #2f3034 inset;
    text-align: center;
    vertical-align: middle;
    border-bottom: #000 solid 1px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    background: linear-gradient(rgb(63,65,71)0%,rgb(59,66,74)50%,rgb(33,38,51)50%,rgb(51,58,72)100%);
    border-top: #000 1px solid;
    border-bottom: #888 1px solid;
    border-left: #000 1px solid;
    border-right: #000 1px solid;
    transition: .2s;
}

.ui-widget.ui-widget-content {
    border: 0 solid #666;
}

.ui-widget-content {
    border: 0 solid #666;
    background: none;     color: #fff;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 0 solid #666;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
        font-weight: bold;
    color: #eee;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    color: #65F5D3;
    background: transparent;
}

.ui-jqgrid {
    margin: 0 auto;
}

.ui-jqgrid .ui-jqgrid-title {
    position: relative !important;
    padding: 0 !important;
}

.ui-jqgrid .ui-jqgrid-caption {
    padding: 0 !important;
    text-align: center !important;
    line-height: 2em !important;
    color: #6dc5f3;
    letter-spacing: 0.2em;
}

.ui-jqgrid .ui-jqgrid-htable .ui-th-div {
    margin-top: 8px !important;
}

.ui-jqgrid .ui-th-column:not(:last-of-type) {
    border-right: #556 1px solid;
}

#list_toppager {
    overflow-x: auto;
}

.ui-common-table tbody {
    line-height: 1.6;
}

.ui-jqgrid .ui-jqgrid-view input {
    font-size: 1.5rem !important;
}

.ui-jqgrid tr.jqgrow td {
    vertical-align: middle;
}

.ui-jqgrid tr.ui-row-ltr td {
    height: 32px !important;
    text-indent: 0 !important;
    text-align: left;
    border-right-width: 0;
    border-right-color: inherit;
    border-right-style: solid;
}

#sopt_menu {
    background: #333;
}

.ui-row-even {
        }

.ui-jqgrid tr.jqgrow td {
    font-size: 1.3rem;
}

.ui-jqgrid tr.ui-row-ltr td a {
    color: var(--link-color);
    font-style: normal;
    text-decoration: none;
    transition: 0.7s;
}

.ui-jqgrid tr.ui-row-ltr td a:link {
    color: var(--link-color);
    font-style: normal;
    text-decoration: none;
}

.ui-jqgrid tr.ui-row-ltr td a:visited {
    color: var(--link-color);
    font-style: normal;
    text-decoration: none;
}

.ui-jqgrid tr.ui-row-ltr td a:hover {
    color: #72eff8;
    font-style: normal;
    text-decoration: underline;
}

.ui-jqgrid tr.ui-row-ltr tdv a:active {
    color: #72eff8;
    font-style: normal;
    text-decoration: underline;
    background-color: none;
}

#result_list img.screenshot {
    width: 96px;
    height: 60px;
    margin: 2px 8px 2px 0;
    vertical-align: middle;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-radius: 2px;
}

a.publisher {
    overflow: hidden;
    text-overflow: ellipsis;
}


.ui-tooltip {
    border: 1px solid #333;
    background: #000;
    padding: 4px 4px 0 4px;
    color: #fff;
        box-shadow: 0 8px 20px -8px #000;
    border-radius: 4px;
}
.tooltip {
    width: 160px;
    height: 100px;
    filter: brightness(200%) contrast(150%);
}


.multiple-select {
    font-size: 1.5rem;
    line-height: 1.5;
}

.multiple-select input[type="checkbox"],
.multiple-select input[type="radio"] {
    position: relative;
}

.multiple-select .multiple {
    width: 46% !important;
    min-width: 256px;
}

.ms-choice {
    color: #000;
}

.ms-choice > span.placeholder {
    color:#000;
}

@media screen and (max-width: 959.98px) {
.multiple-select {
    width: 100%;
    font-size: 1.4rem;
}

.multiple-select .ms-drop.bottom{
    width: calc(100vw - 32px) !important;
    max-width: 672px;
}

.multiple-select .ms-drop ul > li.ms-select-all label,
.multiple-select .ms-drop ul > li.multiple label {
    overflow: visible;
    width: 32px;
    padding: 0;
}

.multiple-select .ms-drop ul > li.ms-select-all label input,
.multiple-select .ms-drop ul > li.multiple label input {
    margin-right: 0;
    margin-left: 0;
}

.multiple-select .multiple {
    width: 46% !important;
    min-width: 256px;
}
}

.protip-container {
    z-index: 256;
    box-shadow: 0 8px 8px 0 rgb(0, 0, 5, 0.5);
    font-size: 1.3rem;
}

.protip-content {
    padding-left: 4px;
    line-height: 1.4;
}

.owl-carousel {
    height: auto;
}

.owl-loaded {
    height: auto;
}

.owl-drag {
    height: auto;
}

.owl-theme {
    height: auto;
    margin-top: 0;
}

.owl-stage-outer {
    margin-top: 16px;
}

.owl-stage {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 24px auto 0;
    padding: 24px 0 24px 16px;
    cursor: grab;
}

.owl-item:only-child li {
    margin-bottom: 24px;
}

@media screen and (max-width: 959.98px) {
.owl-stage {
    margin-top: 0;
    overflow-x: hidden;
}
}

.owl-carousel .owl-item img {
    display: block;
    width: auto;
    max-width: 320px;
    height: 100%;
}

.owl-carousel .owl-item img.ss-320 {
    max-height: 200px;
}

.owl-carousel .owl-item img.vertical {
    width: 200px;
    height: 320px;
}

.owl-nav {
    top: 16px;
}

.circle-left::before {
    content: "\ea44";
    margin: 0 0 16px 8px;
    font-family: 'icomoon';
    font-size: 4rem;
}

.circle-right::before {
    content: '\ea42';
    margin: 0 8px 16px 0;
    font-family: 'icomoon';
    font-size: 4rem;
}

@media screen and (min-width: 960px) {
.owl-theme .owl-dots {
    position: relative;
    top: 32px;
}
}

.owl-theme .owl-dots .owl-dot span {
    width: 32px;
    height: 7px;
    margin: 4px 4px;
    background: #36363d;
    display: block;
    -webkit-backface-visibility: visible;
    border-top: #000 1px solid;
    border-radius: 0;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #009FFA;
    background: radial-gradient(ellipse at center, rgba(106,218,252,1) 0%,rgba(83,203,241,1) 40%,rgba(6,130,224,1) 100%);
    box-shadow: 0 0 6px 0 #88c0ff;
    border-top: none;
    transition: all .3s ease-in-out;
}

.owl-theme .owl-nav [class*='owl-']:hover {
    background: none;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
    transition: all .3s ease-in-out;
}

.owl-next.disabled, .owl-prev.disabled {
    transform: none !important;
        }

.owl-prev,
.owl-next {
  position: absolute;
  bottom: 1%;
  text-shadow: 0 4px 4px rgb(0, 0, 5, 0.8);
}

.owl-prev {
  left: 0;
}

.owl-next {
  right: 0;
}

.owl-prev,
.owl-next {
    opacity: 0 !important;
}

.owl-carousel:hover .owl-nav .owl-prev,
.owl-carousel:hover .owl-nav .owl-next {
    transition: .5s all ease-in-out;
    opacity: 1 !important;
}

.owl-carousel:hover .owl-nav .owl-prev.disabled,
.owl-carousel:hover .owl-nav .owl-next.disabled {
    transition: .5s all ease-in-out;
    opacity: 0.3 !important;
}

@media screen and (max-width: 959.98px) {
.owl-theme {
    position: relative;
    height: 352px;
}

.owl-stage {
    height: 352px;
}

.owl-prev,
.owl-next {
    bottom: 8px;
}

.owl-theme .owl-dots {
    position: absolute;
    left: 50%;
    bottom: -32px;
    width: 100vw;
    transform: translateX(-50%);
}
}

@media screen and (min-width: 960px) {
.scroll-hint-icon-wrap,
.scroll-hint-text {
    display: none;
}

.is-right-scrollable,
.is-left-scrollable {
    background: none !important;
}
}