@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Satisfy);
/*! sanitize.css v5.0.0 | CC0 License | github.com/jonathantneal/sanitize.css */
/* Document (https://html.spec.whatwg.org/multipage/semantics.html#semantics)
   ========================================================================== */
/**
 * 1. Remove repeating backgrounds in all browsers (opinionated).
 * 2. Add box sizing inheritence in all browsers (opinionated).
 */
*,
main ::before,
main ::after {
  background-repeat: no-repeat;
  /* 1 */
  box-sizing: inherit;
  /* 2 */
}

footer,
header {
  font-size: 10px;
}

main {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritence in all browsers (opinionated).
 */
 main ::before,
 main ::after {
  text-decoration: inherit;
  /* 1 */
  vertical-align: inherit;
  /* 2 */
}

/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Add the default cursor in all browsers (opinionated).
 * 3. Prevent font size adjustments after orientation changes in IE and iOS.
 */
html {
  box-sizing: border-box;
  /* 1 */
  cursor: default;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */
}

/* Sections (https://html.spec.whatwg.org/multipage/semantics.html#sections)
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
main h1 {
  font-size: 2em;
}

/* Grouping content (https://html.spec.whatwg.org/multipage/semantics.html#grouping-content)
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
main figcaption,
main figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
main figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
main hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
main nav ol,
main nav ul {
  list-style: none;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
main pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics (https://html.spec.whatwg.org/multipage/semantics.html#text-level-semantics)
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
main a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
main abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
main b,
main strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
main b,
main strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
main code,
main kbd,
main samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
main dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
main mark {
  background-color: #ffff00;
  color: #000000;
}

/**
 * Add the correct font size in all browsers.
 */
main small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
main sub,
main sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

main sub {
  bottom: -.25em;
}

main sup {
  top: -.5em;
}

/*
 * Remove the text shadow on text selections (opinionated).
 * 1. Restore the coloring undone by defining the text shadow (opinionated).
 */

main ::selection {
  background-color: #b3d4fc;
  /* 1 */
  color: #000000;
  /* 1 */
  text-shadow: none;
}

/* Embedded content (https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content)
   ========================================================================== */
/*
 * Change the alignment on media elements in all browers (opinionated).
 */
main audio,
main canvas,
main iframe,
main img,
main svg,
main video {
  vertical-align: middle;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
main img {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
main svg {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */
main svg:not(:root) {
  overflow: hidden;
}

/* Tabular data (https://html.spec.whatwg.org/multipage/tables.html#tables)
   ========================================================================== */
/**
 * Collapse border spacing
 */
main table {
  border-collapse: collapse;
}

/* Forms (https://html.spec.whatwg.org/multipage/forms.html#forms)
   ========================================================================== */
/**
 * Remove the margin in Firefox and Safari.
 */
main button,
main input,
main optgroup,
main select,
main textarea {
  margin: 0;
}

/**
 * Inherit styling in all browsers (opinionated).
 */
main button,
main input,
main select,
main textarea {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
main button,
main input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
main button,
main select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
main button,
main html [type="button"],
main [type="reset"],
main [type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
main button::-moz-focus-inner,
main [type="button"]::-moz-focus-inner,
main [type="reset"]::-moz-focus-inner,
main [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

main button {
  line-height: 1.75;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
main button:-moz-focusring,
main [type="button"]:-moz-focusring,
main [type="reset"]:-moz-focusring,
main [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
main legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
main progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * 1. Remove the default vertical scrollbar in IE.
 * 2. Change the resize direction on textareas in all browsers (opinionated).
 */
main textarea {
  overflow: auto;
  /* 1 */
  resize: vertical;
  /* 2 */
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
main [type="checkbox"],
main [type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
main [type="number"]::-webkit-inner-spin-button,
main [type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
main [type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
main [type="search"]::-webkit-search-cancel-button,
main [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
main ::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

*:focus {
  outline: none;
}

/* Interactive elements (https://html.spec.whatwg.org/multipage/forms.html#interactive-elements)
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
main details,
main menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
main summary {
  display: list-item;
}

/* Scripting (https://html.spec.whatwg.org/multipage/scripting.html#scripting-3)
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
main canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
main template {
  display: none;
}

/* User interaction (https://html.spec.whatwg.org/multipage/interaction.html#editing)
   ========================================================================== */
/*
 * Remove the tapping delay on clickable elements (opinionated).
 * 1. Remove the tapping delay in IE 10.
 */
main a,
main area,
main button,
main input,
main label,
main select,
main summary,
main textarea,
main [tabindex] {
  /* 1 */
  touch-action: manipulation;
}

/**
 * Add the correct display in IE 10-.
 */
main [hidden] {
  display: none;
}

/* ARIA (https://w3c.github.io/html-aria/)
   ========================================================================== */
/**
 * Change the cursor on busy elements (opinionated).
 */
main [aria-busy="true"] {
  cursor: progress;
}

/*
 * Change the cursor on control elements (opinionated).
 */
main [aria-controls] {
  cursor: pointer;
}

/*
 * Change the display on visually hidden accessible elements (opinionated).
 */
main [aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements (opinionated).
 */
main [aria-disabled] {
  cursor: default;
}

html {
  /* font-size: 10px; */
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

body {
  background: #fff;
  color: #666;
  font-family: "Hiragino Kaku Gothic Pro", "Helvetica Neue", Arial, Meiryo, sans-serif;
  /* font-size: 1.6rem;
  line-height: 1.67; */
  height: 100%;
  word-break: break-all;
}

/* Headnigs */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  color: #333;
  font-weight: bold;
  line-height: 1.34;
}

main pre code {
  display: block;
  line-height: 1.34;
}

/* Figure */
main figure {
  margin-left: 0;
  margin-right: 0;
}

/* Table */
main table {
  margin-bottom: 1em;
  margin-top: 1em;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main p {
  margin: 1em 0;
}

main h1 {
  font-size: 1.5em;
  color: #6a3906;
}

/* Horizontal Rule */
main hr {
  border: none;
  border-top: 1px solid #dde0e3;
}

/* Inline Elements */
main img {
  display: inline;
  height: auto;
  max-width: 100%;
  width: auto;
}

main a {
  color: #0086be;
  transition: opacity .2s;
}

main a:focus, main a:hover {
  opacity: .6;
}

main code {
  font-family: "Menlo", "Lucida Console", monospace;
  font-size: 1.2rem;
}

header {
  position: relative;
  border-bottom: solid 2px #f8b62d
}

header::after {
  position: absolute;
  content: '';
  height: 1px;
  background: #cfdb00;
  width: 100%;
  bottom: -5px;
}

.layout-header {
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

.layout-main {
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  width: 100%;
  max-width: 1200px;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  .layout-main {
    margin-top: 40px;
    justify-content: center;
  }
}

.layout-article {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 980px) {
  .layout-article {
    width: 66.66667%;
  }
}

.layout-aside {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 980px) {
  .layout-aside {
    width: 33.33333%;
  }
}

@media (min-width: 768px) {
  .layout-multi {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
}

@media (max-width: 767px) {
  .layout-multi-side {
    display: none;
  }
}

@media (min-width: 768px) {
  .layout-multi-side {
    width: 190px;
  }
}

@media (min-width: 768px) {
  .layout-multi-main {
    width: calc(100% - 220px);
  }
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

.container-fluid {
  margin-left: -15px;
  margin-right: -15px;
}

@media (min-width: 768px) {
  .container-fluid {
    margin-left: auto;
    margin-right: auto;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

[class^="col-"],
[class*=" col-"] {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

[class^="col-"]._cover-image,
[class*=" col-"]._cover-image {
  min-height: 67vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 768px) {
  [class^="col-"]._cover-image,
  [class*=" col-"]._cover-image {
    min-height: 0;
  }
}

@media (min-width: 768px) {
  [class^="col-"]._cover-content,
  [class*=" col-"]._cover-content {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33333%;
}

.col-5 {
  width: 41.66667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33333%;
}

.col-8 {
  width: 66.66667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33333%;
}

.col-11 {
  width: 91.66667%;
}

.col-12 {
  width: 100%;
}

@media (min-width: 576px) {
  .col-sm-1 {
    width: 8.33333%;
  }
}

@media (min-width: 576px) {
  .col-sm-2 {
    width: 16.66667%;
  }
}

@media (min-width: 576px) {
  .col-sm-3 {
    width: 25%;
  }
}

@media (min-width: 576px) {
  .col-sm-4 {
    width: 33.33333%;
  }
}

@media (min-width: 576px) {
  .col-sm-5 {
    width: 41.66667%;
  }
}

@media (min-width: 576px) {
  .col-sm-6 {
    width: 50%;
  }
}

@media (min-width: 576px) {
  .col-sm-7 {
    width: 58.33333%;
  }
}

@media (min-width: 576px) {
  .col-sm-8 {
    width: 66.66667%;
  }
}

@media (min-width: 576px) {
  .col-sm-9 {
    width: 75%;
  }
}

@media (min-width: 576px) {
  .col-sm-10 {
    width: 83.33333%;
  }
}

@media (min-width: 576px) {
  .col-sm-11 {
    width: 91.66667%;
  }
}

@media (min-width: 576px) {
  .col-sm-12 {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .col-md-1 {
    width: 8.33333%;
  }
}

@media (min-width: 768px) {
  .col-md-2 {
    width: 16.66667%;
  }
}

@media (min-width: 768px) {
  .col-md-3 {
    width: 25%;
  }
}

@media (min-width: 768px) {
  .col-md-4 {
    width: 33.33333%;
  }
}

@media (min-width: 768px) {
  .col-md-5 {
    width: 41.66667%;
  }
}

@media (min-width: 768px) {
  .col-md-6 {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .col-md-7 {
    width: 58.33333%;
  }
}

@media (min-width: 768px) {
  .col-md-8 {
    width: 66.66667%;
  }
}

@media (min-width: 768px) {
  .col-md-9 {
    width: 75%;
  }
}

@media (min-width: 768px) {
  .col-md-10 {
    width: 83.33333%;
  }
}

@media (min-width: 768px) {
  .col-md-11 {
    width: 91.66667%;
  }
}

@media (min-width: 768px) {
  .col-md-12 {
    width: 100%;
  }
}

@media (min-width: 980px) {
  .col-lg-1 {
    width: 8.33333%;
  }
}

@media (min-width: 980px) {
  .col-lg-2 {
    width: 16.66667%;
  }
}

@media (min-width: 980px) {
  .col-lg-3 {
    width: 25%;
  }
}

@media (min-width: 980px) {
  .col-lg-4 {
    width: 33.33333%;
  }
}

@media (min-width: 980px) {
  .col-lg-5 {
    width: 41.66667%;
  }
}

@media (min-width: 980px) {
  .col-lg-6 {
    width: 50%;
  }
}

@media (min-width: 980px) {
  .col-lg-7 {
    width: 58.33333%;
  }
}

@media (min-width: 980px) {
  .col-lg-8 {
    width: 66.66667%;
  }
}

@media (min-width: 980px) {
  .col-lg-9 {
    width: 75%;
  }
}

@media (min-width: 980px) {
  .col-lg-10 {
    width: 83.33333%;
  }
}

@media (min-width: 980px) {
  .col-lg-11 {
    width: 91.66667%;
  }
}

@media (min-width: 980px) {
  .col-lg-12 {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .col-xl-1 {
    width: 8.33333%;
  }
}

@media (min-width: 1200px) {
  .col-xl-2 {
    width: 16.66667%;
  }
}

@media (min-width: 1200px) {
  .col-xl-3 {
    width: 25%;
  }
}

@media (min-width: 1200px) {
  .col-xl-4 {
    width: 33.33333%;
  }
}

@media (min-width: 1200px) {
  .col-xl-5 {
    width: 41.66667%;
  }
}

@media (min-width: 1200px) {
  .col-xl-6 {
    width: 50%;
  }
}

@media (min-width: 1200px) {
  .col-xl-7 {
    width: 58.33333%;
  }
}

@media (min-width: 1200px) {
  .col-xl-8 {
    width: 66.66667%;
  }
}

@media (min-width: 1200px) {
  .col-xl-9 {
    width: 75%;
  }
}

@media (min-width: 1200px) {
  .col-xl-10 {
    width: 83.33333%;
  }
}

@media (min-width: 1200px) {
  .col-xl-11 {
    width: 91.66667%;
  }
}

@media (min-width: 1200px) {
  .col-xl-12 {
    width: 100%;
  }
}

@font-face {
  font-family: "icon";
  src: url("../fonts/icon.eot");
  src: url("../fonts/icon.eot?#iefix") format("eot"), url("../fonts/icon.woff") format("woff"), url("../fonts/icon.ttf") format("truetype"), url("../fonts/icon.svg#icon") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: "icon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  vertical-align: middle;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-bracket-top:before {
  content: "\E101";
}

.icon-bracket-left:before {
  content: "\E102";
}

.icon-bracket-right:before {
  content: "\E103";
}

.icon-bracket-bottom:before {
  content: "\E104";
}

.icon-arrow-top:before {
  content: "\E105";
}

.icon-arrow-bottom:before {
  content: "\E106";
}

.icon-arrow-left:before {
  content: "\E107";
}

.icon-arrow-right:before {
  content: "\E108";
}

.icon-circle:before {
  content: "\E109";
}

.icon-external:before {
  content: "\E110";
}

.icon-arrow-right-dot:before {
  content: "\E111";
}

p.heading {
  font-size: 1.25em;
  display: flex;
  align-items: center;
  position: relative;
  line-height: 1em;
}

p.heading i {
  margin-right: 5px;
}

p.heading i img {
  max-height: 20px;
}

.layout-multi-main h1 {
  margin-top: 0;
}

.embed-heading {
  background: #fffbca;
  margin: 15px 0;
}

.embed-heading > h2.heading {
  margin: 0;
}

h1.heading,
h2.heading,
h3.heading {
  color: #121416;
  font-weight: bold !important;
  font-size: 1.17em;
  background: #fffbca;
  margin-left: -15px;
  margin-right: -15px;
  padding: .5em .4em .4em;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  line-height: 1.8;
}

@media (min-width: 768px) {
  h1.heading,
  h2.heading,
  h3.heading {
    margin-left: 0;
    margin-right: 0;
  }
}

h1.heading.adjust,
h2.heading.adjust,
h3.heading.adjust {
  padding: .5em .4em .4em;
  padding-left: 15px;
  padding-right: 15px;
}

h1.heading.adjust i img,
h2.heading.adjust i img,
h3.heading.adjust i img {
  max-height: 30px;
}

h1.heading i,
h2.heading i,
h3.heading i {
  margin-right: 10px;
}

h1.heading i img,
h2.heading i img,
h3.heading i img {
  max-height: 26px;
  max-width: 40px;
}

h1.heading span.spmini,
h2.heading span.spmini,
h3.heading span.spmini {
  font-size: 16px;
}

@media (min-width: 768px) {
  h1.heading span.spmini,
  h2.heading span.spmini,
  h3.heading span.spmini {
    font-size: 20px;
  }
}

h1.heading.composite,
h2.heading.composite,
h3.heading.composite {
  justify-content: space-between;
}

h1.heading span.mainheading,
h2.heading span.mainheading,
h3.heading span.mainheading {
  display: inline-flex;
  align-items: center;
}

h1.heading span.subheading,
h2.heading span.subheading,
h3.heading span.subheading {
  font-size: 0.8em;
  font-weight: normal;
}

@media (min-width: 768px) {
  h1.heading span.subheading,
  h2.heading span.subheading,
  h3.heading span.subheading {
    font-size: 1em;
  }
}

h1.heading span.subheading .count,
h2.heading span.subheading .count,
h3.heading span.subheading .count {
  color: #e60012;
  font-size: 1em;
}

@media (min-width: 768px) {
  h1.heading span.subheading .count,
  h2.heading span.subheading .count,
  h3.heading span.subheading .count {
    font-size: 1em;
  }
}

h1.heading span.subheading .pcmini,
h2.heading span.subheading .pcmini,
h3.heading span.subheading .pcmini {
  color: #6a3906;
  font-size: 12px;
}

@media (min-width: 768px) {
  h1.heading span.subheading .pcmini,
  h2.heading span.subheading .pcmini,
  h3.heading span.subheading .pcmini {
    font-size: 14px;
  }
}

h1.heading.heading-border,
h2.heading.heading-border,
h3.heading.heading-border {
  display: flex;
  align-items: center;
}

h1.heading.heading-border i img,
h2.heading.heading-border i img,
h3.heading.heading-border i img {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}

@media (min-width: 768px) {
  h1.heading.heading-border,
  h2.heading.heading-border,
  h3.heading.heading-border {
    border: solid 1px #f8b62d;
    border-radius: 5px;
    padding: .2em .4em .1em;
  }
  h1.heading.heading-border i img,
  h2.heading.heading-border i img,
  h3.heading.heading-border i img {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
}

h2.heading-dashedborder {
  font-size: 18px;
  border-bottom: solid 2px #f8b62d;
  padding: 0 0 10px 5px;
  margin: 16px 0;
  margin-bottom: 16px;
  position: relative;
}

h2.heading-dashedborder:after {
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 3px;
  border-bottom: dashed 1px #f8b62d;
}

.text-color-default {
  color: #666;
}

.text-color-inverse {
  color: #fff;
}

.text-color-primary {
  color: #f8b62d;
}

.text-color-secondary {
  color: #cfdb00;
}

.text-color-accent {
  color: #e60012;
}

.text-color-warning {
  color: #eb6877;
}

.text-color-annotation {
  color: #00a49c;
}

.text-size-largest {
  font-size: 2em;
}

.text-size-larger {
  font-size: 1.5em;
}

.text-size-large {
  font-size: 1.25em;
}

.text-size-medium {
  font-size: 1em;
}

.text-size-small {
  font-size: 0.9em;
}

.text-size-smaller {
  font-size: 0.7em;
}

.text-size-smallest {
  font-size: 0.6em;
}

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

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

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

.text-icon-circle {
  position: relative;
}

.text-icon-circle:before {
  content: "\E109";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  color: #f8b62d;
  margin-right: 4px;
  margin-bottom: 0;
  line-height: inherit;
}

.Banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.Banner a {
  display: inline-block;
  -ms-flex: 0 1 auto;
}

.Banner a:not(:first-child) {
  margin-top: 20px;
}

.Banner a img {
  width: 100%;
}

.Banner > img {
  display: inline-block;
  -ms-flex: 0 1 auto;
  width: 100%;
  height: auto;
}

.link-more {
  display: block;
  background-color: #fffbca;
  text-decoration: none;
  padding: 10px 30px 10px 10px;
  position: relative;
  text-align: center;
  color: #121416;
  line-height: 1.3;
  margin-bottom: 20px;
}

.link-more:after {
  content: "\E108";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-size: .8em;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #121416;
  pointer-events: none;
}

.link-more-arrowin {
  display: block;
  background-color: #fffbca;
  text-decoration: none;
  padding: 14px 30px;
  position: relative;
  text-align: center;
  color: #121416;
  line-height: 1.3;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .link-more-arrowin {
    padding: 10px 30px;
  }
}

.link-more-arrowin span:after {
  content: "\E108";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-size: 0.8em;
  color: #121416;
  pointer-events: none;
  margin-left: 10px;
}

@media (min-width: 768px) {
  .link-border {
    border: solid 1px #f8b62d;
    border-radius: 24px;
  }
}

.link-title {
  font-size: 1.17em;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.5;
}

.layout-aside .link-title,
.TabContent .link-title {
  font-size: 16px;
}

[class^="btn-"],
[class*=" btn-"] {
  background-color: #f3f4f5;
  display: block;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.1em;
  color: #fff;
  border-radius: 5px;
  padding: 6px 10px 2px;
  padding-right: 25px;
  margin: 10px 0;
  position: relative;
  display: block;
  line-height: 1em;
}

[class^="btn-"]:after,
[class*=" btn-"]:after {
  content: "\E108";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-size: .8em;
  position: absolute;
  top: 50%;
  right: 5px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #fff;
  pointer-events: none;
}

[class^="btn-rev"]:after, [class*=" btn-rev"]:after {
  content: "\E107";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-size: 1.0em;
  position: absolute;
  top: 50%;
  left: 5px;
  width: 30px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #fff;
  pointer-events: none;
}

[class^="btn-"][class$="-white"]:after {
  content: "\E108";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-size: .8em;
  position: absolute;
  top: 50%;
  right: 5px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #f8b62d;
  pointer-events: none;
}

@media (min-width: 768px) {
  [class^="btn-"],
  [class*=" btn-"] {
    font-size: 1.25em;
    display: inline-block;
    min-width: 300px;
  }
}

[class^="btn-"] i.margin-left,
[class*=" btn-"] i.margin-left {
  margin-left: 5px;
}

[class^="btn-"] i.margin-right,
[class*=" btn-"] i.margin-right {
  margin-right: 5px;
}

[class^="btn-"] i img,
[class*=" btn-"] i img {
  max-height: 34px;
  padding: 0px 2px 4px;
}

[class$="-noarrow"],
[class*="-noarrow"] {
  padding-right: 10px;
}

[class$="-noarrow"]:after,
[class*="-noarrow "]:after {
  display: none;
}

[class$="-textonly"],
[class*="-textonly"] {
  padding: 11px 30px 10px 10px;
}

[class$="-textnoarrow"],
[class*="-textnoarrow"] {
  padding: 11px 10px;
  padding-right: 10px;
}

[class$="-textnoarrow"]:after,
[class*="-textnoarrow"]:after {
  display: none;
}

[class^="btn-default"],
[class*=" btn-default"] {
  background-color: #333;
  color: #fff;
}

[class^="btn-primary"],
[class*=" btn-primary"] {
  background-color: #f8b62d;
  color: #fff;
}

[class^="btn-secondary"],
[class*=" btn-secondary"] {
  background-color: #cfdb00;
  color: #fff;
}

[class^="btn-accent"],
[class*=" btn-accent"] {
  background-color: #e60012;
  color: #fff;
}

[class^="btn-success"],
[class*=" btn-success"] {
  background-color: #6a3906;
  color: #fff;
}

[class^="btn-information"],
[class*=" btn-information"] {
  background-color: #00a49c;
  color: #fff;
}

[class^="btn-pink"],
[class*=" btn-pink"] {
  background-color: #e986b1;
  color: #fff;
}

.btn-size-small {
  font-size: 0.9em;
  padding: 8px 10px;
}

.btn-size-medium {
  font-size: 1em;
}

.btn-size-large {
  font-size: 1.25em;
}

.btn-width-max {
  display: block;
}

.btn-nextread {
  background-color: #f8b62d;
  border: solid 3px #fff;
  border-radius: 8px;
  line-height: 1.3;
  padding: 10px 25px 10px 25px;
  width: 300px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-nextread-white {
  background-color: #fff;
  border: solid 3px #f8b62d;
  color: #f8b62d;
  border-radius: 8px;
  line-height: 1.3;
  padding: 10px 25px 10px 25px;
  width: 300px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-nextread i
.btn-nextread-white i {
  position: absolute;
  left: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.btn-nextread i img
.btn-nextread-white i img {
  width: 42px;
  height: auto;
  max-height: none;
  padding: 0;
}

.pageback {
  display: inline-block;
  background-color: #cfdb00;
  color: #FFF;
  border-radius: 20px;
  text-decoration: none;
  padding: 4px 15px 4px 26px;
  position: relative;
}

.pageback:before {
  content: "\E107";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-size: .8em;
  position: absolute;
  top: 50%;
  left: 8px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #fff;
  pointer-events: none;
}

.ButtonGroup {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

@media (min-width: 980px) {
  .ButtonGroup {
    display: none;
  }
}

.ButtonGroup [class^="btn-"],
.ButtonGroup [class*=" btn-"] {
  min-width: auto;
  font-size: 16px;
  padding: 13px 5px 10px;
  width: calc(50% - 5px);
}

@media (min-width: 980px) {
  .ButtonGroup [class^="btn-"],
  .ButtonGroup [class*=" btn-"] {
    width: 240px;
    margin: 0 10px;
  }
}

.ButtonGroup [class^="btn-"] i img,
.ButtonGroup [class*=" btn-"] i img {
  max-height: 26px;
  padding: 0px 2px 4px;
}

[class^="list-"],
[class*=" list-"] {
  counter-reset: i;
  list-style-type: none;
  padding-left: 0;
}

[class^="list-"] > *,
[class*=" list-"] > * {
  padding-left: 1em;
  position: relative;
}

[class^="list-"] > *:before,
[class*=" list-"] > *:before {
  color: #666;
  counter-increment: i;
  display: inline-block;
  margin-right: -.5em;
  position: absolute;
  right: 100%;
  text-decoration: none;
  white-space: nowrap;
}

.list-type-bullet > *:before {
  content: "\2022";
}

.list-type-number > *:before {
  content: counter(i) ".";
}

ul.list-type-circle > *:before {
  content: "\25CB";
}

ol.list-type-circle > *:before {
  border: 1px solid #666;
  border-radius: 50%;
  box-sizing: content-box;
  content: counter(i);
  line-height: 1;
  text-align: center;
  top: .25em;
  width: 1em;
}

ul.list-type-rectangle > *:before {
  content: "\20DE";
}

ol.list-type-rectangle > *:before {
  border: 1px solid #666;
  box-sizing: content-box;
  content: counter(i);
  line-height: 1;
  text-align: center;
  top: .25em;
  width: 1em;
}

ul.list-type-asterisk > *:before {
  content: "\FF0A";
}

ol.list-type-asterisk > *:before {
  content: "＊" counter(i);
}

ul.list-type-komejirushi > *:before {
  content: "\203b";
}

ol.list-type-komejirushi > *:before {
  content: "※" counter(i);
}

ul.list-type-notice > *:before {
  content: "\6ce8";
}

ol.list-type-notice > *:before {
  content: "注" counter(i);
}

ol.list-type-lowerLatin > *:before {
  content: counter(i, lower-latin) ".";
}

ol.list-type-upperLatin > *:before {
  content: counter(i, upper-latin) ".";
}

ol.list-type-parenthesis > *:before {
  content: "(" counter(i) ")";
}

ol.list-type-squareBracket > *:before {
  content: "[" counter(i) "]";
}

ol.list-type-angleBracket > *:before {
  content: "⟨" counter(i) "⟩";
}

.list-color-default > *:before {
  color: #666;
}

.list-color-inverse > *:before {
  color: #fff;
}

.list-color-primary > *:before {
  color: #f8b62d;
}

.list-color-secondary > *:before {
  color: #cfdb00;
}

.list-color-accent > *:before {
  color: #e60012;
}

[class^="dl-"],
[class*=" dl-"] {
  margin: 0 0 20px;
  font-size: 0.9em;
  line-height: 1.5;
}

[class^="dl-"] dt,
[class*=" dl-"] dt {
  font-weight: bold;
  color: #6a3906;
}

[class^="dl-"] dd,
[class*=" dl-"] dd {
  margin: 0 0 10px;
  color: #121416;
}

.dl-horizontal dt {
  width: 40%;
  float: left;
}

@media (min-width: 768px) {
  .dl-horizontal dt {
    width: 20%;
  }
}

.dl-horizontal dd {
  padding-left: 40%;
  padding-bottom: 8px;
  border-bottom: dashed 1px #9aa3ac;
}

@media (min-width: 768px) {
  .dl-horizontal dd {
    padding-left: 20%;
  }
}

.dl-horizontal dd:after {
  content: '';
  display: block;
  clear: both;
}

.dl-horizontal dd dl {
  margin-top: 0;
}

.dl-horizontal dd dl:last-child {
  margin-bottom: 0;
}

.dl-horizontal dd dl dd:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.RecruitList {
  border-radius: 5px;
  border: solid 1px #dde0e3;
  margin-bottom: 40px;
  overflow: hidden;
}

.RecruitList .RecruitList-Header {
  background: #fffbca;
  padding: 5px 10px 4px;
  color: #333;
}

.RecruitList .RecruitList-Header * {
  margin: 0;
}

.RecruitList .RecruitList-Content {
  background-color: #fff;
}

.RecruitList .RecruitList-Content ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.RecruitList .RecruitList-Content ul li:not(:last-child) {
  border-bottom: 1px solid #dde0e3;
}

.RecruitList .RecruitList-Content ul li a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  position: relative;
  padding: 5px 25px;
}

.RecruitList .RecruitList-Content ul li a:before {
  content: '';
  background-image: url("../images/icons/recommend2.png");
  background-position: center;
  background-size: contain;
  width: 20px;
  height: 100%;
  position: absolute;
  left: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.RecruitList .RecruitList-Content ul li a:after {
  content: "\E108";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-size: 0.9em;
  color: #9aa3ac;
  position: absolute;
  right: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.RecruitList .RecruitList-Content ul li a span {
  display: inline-block;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

[class^="label-"],
[class*=" label-"] {
  background-color: #f3f4f5;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #333;
  display: inline-block;
  padding: .5em 1em;
  text-decoration: none;
  line-height: 1.3em;
}

.label-default {
  background-color: #9aa3ac;
  color: #fff;
}

.label-inverse {
  background-color: #fff;
  color: #333;
}

.label-primary {
  background-color: #f8b62d;
  color: #fff;
}

.label-secondary {
  background-color: #cfdb00;
  color: #fff;
}

.label-information {
  background-color: #00a49c;
  color: #fff;
}

.label-success {
  background-color: #6a3906;
  color: #fff;
}

.label-warning {
  background-color: #eb6877;
  color: #fff;
}

.label-danger {
  background-color: #e60012;
  color: #fff;
}

.label-accent4 {
  background-color: #e986b1;
  color: #fff;
}

.label-size-small {
  font-size: 0.7em;
  padding: 0 .8em;
  margin: 0 5px;
  line-height: 1.2em;
}

.label-size-medium {
  font-size: 1em;
}

.label-size-large {
  font-size: 1.25em;
}

.label-width-max {
  display: block;
}

@media (min-width: 768px) {
  .label-width-max {
    display: inline-block;
  }
}

[class^="grid"],
[class*=" grid"] {
  display: flex;
  flex-wrap: wrap;
  margin-left: -7.5px;
  margin-right: -7.5px;
}

[class^="grid"] > *,
[class*=" grid"] > * {
  width: 100%;
}

[class^="grid"] > [class^="card-"], [class^="grid"] > [class*=" card-"],
[class^="grid"][class^="list-"] > *,
[class^="grid"][class*=" list-"] > *,
[class*=" grid"] > [class^="card-"],
[class*=" grid"] > [class*=" card-"],
[class*=" grid"][class^="list-"] > *,
[class*=" grid"][class*=" list-"] > * {
  margin-left: 7.5px;
  margin-right: 7.5px;
}

[class^="grid"] > ._item,
[class*=" grid"] > ._item {
  padding-left: 7.5px;
  padding-right: 7.5px;
}

.grid-1 > ._item {
  width: 100%;
}

.grid-1 > [class^="card-"], .grid-1 > [class*=" card-"],
.grid-1[class^="list-"] > *,
.grid-1[class*=" list"] > * {
  width: calc(100% - 15px);
}

.grid-2 > ._item {
  width: 50%;
}

.grid-2 > [class^="card-"], .grid-2 > [class*=" card-"],
.grid-2[class^="list-"] > *,
.grid-2[class*=" list"] > * {
  width: calc(50% - 15px);
}

.grid-3 > ._item {
  width: 33.33333%;
}

.grid-3 > [class^="card-"], .grid-3 > [class*=" card-"],
.grid-3[class^="list-"] > *,
.grid-3[class*=" list"] > * {
  width: calc(33.33333% - 15px);
}

.grid-4 > ._item {
  width: 25%;
}

.grid-4 > [class^="card-"], .grid-4 > [class*=" card-"],
.grid-4[class^="list-"] > *,
.grid-4[class*=" list"] > * {
  width: calc(25% - 15px);
}

.grid-5 > ._item {
  width: 20%;
}

.grid-5 > [class^="card-"], .grid-5 > [class*=" card-"],
.grid-5[class^="list-"] > *,
.grid-5[class*=" list"] > * {
  width: calc(20% - 15px);
}

.grid-6 > ._item {
  width: 16.66667%;
}

.grid-6 > [class^="card-"], .grid-6 > [class*=" card-"],
.grid-6[class^="list-"] > *,
.grid-6[class*=" list"] > * {
  width: calc(16.66667% - 15px);
}

.grid-7 > ._item {
  width: 14.28571%;
}

.grid-7 > [class^="card-"], .grid-7 > [class*=" card-"],
.grid-7[class^="list-"] > *,
.grid-7[class*=" list"] > * {
  width: calc(14.28571% - 15px);
}

.grid-8 > ._item {
  width: 12.5%;
}

.grid-8 > [class^="card-"], .grid-8 > [class*=" card-"],
.grid-8[class^="list-"] > *,
.grid-8[class*=" list"] > * {
  width: calc(12.5% - 15px);
}

.grid-9 > ._item {
  width: 11.11111%;
}

.grid-9 > [class^="card-"], .grid-9 > [class*=" card-"],
.grid-9[class^="list-"] > *,
.grid-9[class*=" list"] > * {
  width: calc(11.11111% - 15px);
}

.grid-10 > ._item {
  width: 10%;
}

.grid-10 > [class^="card-"], .grid-10 > [class*=" card-"],
.grid-10[class^="list-"] > *,
.grid-10[class*=" list"] > * {
  width: calc(10% - 15px);
}

.grid-11 > ._item {
  width: 9.09091%;
}

.grid-11 > [class^="card-"], .grid-11 > [class*=" card-"],
.grid-11[class^="list-"] > *,
.grid-11[class*=" list"] > * {
  width: calc(9.09091% - 15px);
}

.grid-12 > ._item {
  width: 8.33333%;
}

.grid-12 > [class^="card-"], .grid-12 > [class*=" card-"],
.grid-12[class^="list-"] > *,
.grid-12[class*=" list"] > * {
  width: calc(8.33333% - 15px);
}

@media (min-width: 576px) {
  .grid-sm-1 > ._item {
    width: 100%;
  }
  .grid-sm-1 > [class^="card-"], .grid-sm-1 > [class*=" card-"],
  .grid-sm-1[class^="list-"] > *,
  .grid-sm-1[class*=" list"] > * {
    width: calc(100% - 15px);
  }
  .grid-sm-2 > ._item {
    width: 50%;
  }
  .grid-sm-2 > [class^="card-"], .grid-sm-2 > [class*=" card-"],
  .grid-sm-2[class^="list-"] > *,
  .grid-sm-2[class*=" list"] > * {
    width: calc(50% - 15px);
  }
  .grid-sm-3 > ._item {
    width: 33.33333%;
  }
  .grid-sm-3 > [class^="card-"], .grid-sm-3 > [class*=" card-"],
  .grid-sm-3[class^="list-"] > *,
  .grid-sm-3[class*=" list"] > * {
    width: calc(33.33333% - 15px);
  }
  .grid-sm-4 > ._item {
    width: 25%;
  }
  .grid-sm-4 > [class^="card-"], .grid-sm-4 > [class*=" card-"],
  .grid-sm-4[class^="list-"] > *,
  .grid-sm-4[class*=" list"] > * {
    width: calc(25% - 15px);
  }
  .grid-sm-5 > ._item {
    width: 20%;
  }
  .grid-sm-5 > [class^="card-"], .grid-sm-5 > [class*=" card-"],
  .grid-sm-5[class^="list-"] > *,
  .grid-sm-5[class*=" list"] > * {
    width: calc(20% - 15px);
  }
  .grid-sm-6 > ._item {
    width: 16.66667%;
  }
  .grid-sm-6 > [class^="card-"], .grid-sm-6 > [class*=" card-"],
  .grid-sm-6[class^="list-"] > *,
  .grid-sm-6[class*=" list"] > * {
    width: calc(16.66667% - 15px);
  }
  .grid-sm-7 > ._item {
    width: 14.28571%;
  }
  .grid-sm-7 > [class^="card-"], .grid-sm-7 > [class*=" card-"],
  .grid-sm-7[class^="list-"] > *,
  .grid-sm-7[class*=" list"] > * {
    width: calc(14.28571% - 15px);
  }
  .grid-sm-8 > ._item {
    width: 12.5%;
  }
  .grid-sm-8 > [class^="card-"], .grid-sm-8 > [class*=" card-"],
  .grid-sm-8[class^="list-"] > *,
  .grid-sm-8[class*=" list"] > * {
    width: calc(12.5% - 15px);
  }
  .grid-sm-9 > ._item {
    width: 11.11111%;
  }
  .grid-sm-9 > [class^="card-"], .grid-sm-9 > [class*=" card-"],
  .grid-sm-9[class^="list-"] > *,
  .grid-sm-9[class*=" list"] > * {
    width: calc(11.11111% - 15px);
  }
  .grid-sm-10 > ._item {
    width: 10%;
  }
  .grid-sm-10 > [class^="card-"], .grid-sm-10 > [class*=" card-"],
  .grid-sm-10[class^="list-"] > *,
  .grid-sm-10[class*=" list"] > * {
    width: calc(10% - 15px);
  }
  .grid-sm-11 > ._item {
    width: 9.09091%;
  }
  .grid-sm-11 > [class^="card-"], .grid-sm-11 > [class*=" card-"],
  .grid-sm-11[class^="list-"] > *,
  .grid-sm-11[class*=" list"] > * {
    width: calc(9.09091% - 15px);
  }
  .grid-sm-12 > ._item {
    width: 8.33333%;
  }
  .grid-sm-12 > [class^="card-"], .grid-sm-12 > [class*=" card-"],
  .grid-sm-12[class^="list-"] > *,
  .grid-sm-12[class*=" list"] > * {
    width: calc(8.33333% - 15px);
  }
}

@media (min-width: 768px) {
  .grid-md-1 > ._item {
    width: 100%;
  }
  .grid-md-1 > [class^="card-"], .grid-md-1 > [class*=" card-"],
  .grid-md-1[class^="list-"] > *,
  .grid-md-1[class*=" list"] > * {
    width: calc(100% - 15px);
  }
  .grid-md-2 > ._item {
    width: 50%;
  }
  .grid-md-2 > [class^="card-"], .grid-md-2 > [class*=" card-"],
  .grid-md-2[class^="list-"] > *,
  .grid-md-2[class*=" list"] > * {
    width: calc(50% - 15px);
  }
  .grid-md-3 > ._item {
    width: 33.33333%;
  }
  .grid-md-3 > [class^="card-"], .grid-md-3 > [class*=" card-"],
  .grid-md-3[class^="list-"] > *,
  .grid-md-3[class*=" list"] > * {
    width: calc(33.33333% - 15px);
  }
  .grid-md-4 > ._item {
    width: 25%;
  }
  .grid-md-4 > [class^="card-"], .grid-md-4 > [class*=" card-"],
  .grid-md-4[class^="list-"] > *,
  .grid-md-4[class*=" list"] > * {
    width: calc(25% - 15px);
  }
  .grid-md-5 > ._item {
    width: 20%;
  }
  .grid-md-5 > [class^="card-"], .grid-md-5 > [class*=" card-"],
  .grid-md-5[class^="list-"] > *,
  .grid-md-5[class*=" list"] > * {
    width: calc(20% - 15px);
  }
  .grid-md-6 > ._item {
    width: 16.66667%;
  }
  .grid-md-6 > [class^="card-"], .grid-md-6 > [class*=" card-"],
  .grid-md-6[class^="list-"] > *,
  .grid-md-6[class*=" list"] > * {
    width: calc(16.66667% - 15px);
  }
  .grid-md-7 > ._item {
    width: 14.28571%;
  }
  .grid-md-7 > [class^="card-"], .grid-md-7 > [class*=" card-"],
  .grid-md-7[class^="list-"] > *,
  .grid-md-7[class*=" list"] > * {
    width: calc(14.28571% - 15px);
  }
  .grid-md-8 > ._item {
    width: 12.5%;
  }
  .grid-md-8 > [class^="card-"], .grid-md-8 > [class*=" card-"],
  .grid-md-8[class^="list-"] > *,
  .grid-md-8[class*=" list"] > * {
    width: calc(12.5% - 15px);
  }
  .grid-md-9 > ._item {
    width: 11.11111%;
  }
  .grid-md-9 > [class^="card-"], .grid-md-9 > [class*=" card-"],
  .grid-md-9[class^="list-"] > *,
  .grid-md-9[class*=" list"] > * {
    width: calc(11.11111% - 15px);
  }
  .grid-md-10 > ._item {
    width: 10%;
  }
  .grid-md-10 > [class^="card-"], .grid-md-10 > [class*=" card-"],
  .grid-md-10[class^="list-"] > *,
  .grid-md-10[class*=" list"] > * {
    width: calc(10% - 15px);
  }
  .grid-md-11 > ._item {
    width: 9.09091%;
  }
  .grid-md-11 > [class^="card-"], .grid-md-11 > [class*=" card-"],
  .grid-md-11[class^="list-"] > *,
  .grid-md-11[class*=" list"] > * {
    width: calc(9.09091% - 15px);
  }
  .grid-md-12 > ._item {
    width: 8.33333%;
  }
  .grid-md-12 > [class^="card-"], .grid-md-12 > [class*=" card-"],
  .grid-md-12[class^="list-"] > *,
  .grid-md-12[class*=" list"] > * {
    width: calc(8.33333% - 15px);
  }
}

@media (min-width: 980px) {
  .grid-lg-1 > ._item {
    width: 100%;
  }
  .grid-lg-1 > [class^="card-"], .grid-lg-1 > [class*=" card-"],
  .grid-lg-1[class^="list-"] > *,
  .grid-lg-1[class*=" list"] > * {
    width: calc(100% - 15px);
  }
  .grid-lg-2 > ._item {
    width: 50%;
  }
  .grid-lg-2 > [class^="card-"], .grid-lg-2 > [class*=" card-"],
  .grid-lg-2[class^="list-"] > *,
  .grid-lg-2[class*=" list"] > * {
    width: calc(50% - 15px);
  }
  .grid-lg-3 > ._item {
    width: 33.33333%;
  }
  .grid-lg-3 > [class^="card-"], .grid-lg-3 > [class*=" card-"],
  .grid-lg-3[class^="list-"] > *,
  .grid-lg-3[class*=" list"] > * {
    width: calc(33.33333% - 15px);
  }
  .grid-lg-4 > ._item {
    width: 25%;
  }
  .grid-lg-4 > [class^="card-"], .grid-lg-4 > [class*=" card-"],
  .grid-lg-4[class^="list-"] > *,
  .grid-lg-4[class*=" list"] > * {
    width: calc(25% - 15px);
  }
  .grid-lg-5 > ._item {
    width: 20%;
  }
  .grid-lg-5 > [class^="card-"], .grid-lg-5 > [class*=" card-"],
  .grid-lg-5[class^="list-"] > *,
  .grid-lg-5[class*=" list"] > * {
    width: calc(20% - 15px);
  }
  .grid-lg-6 > ._item {
    width: 16.66667%;
  }
  .grid-lg-6 > [class^="card-"], .grid-lg-6 > [class*=" card-"],
  .grid-lg-6[class^="list-"] > *,
  .grid-lg-6[class*=" list"] > * {
    width: calc(16.66667% - 15px);
  }
  .grid-lg-7 > ._item {
    width: 14.28571%;
  }
  .grid-lg-7 > [class^="card-"], .grid-lg-7 > [class*=" card-"],
  .grid-lg-7[class^="list-"] > *,
  .grid-lg-7[class*=" list"] > * {
    width: calc(14.28571% - 15px);
  }
  .grid-lg-8 > ._item {
    width: 12.5%;
  }
  .grid-lg-8 > [class^="card-"], .grid-lg-8 > [class*=" card-"],
  .grid-lg-8[class^="list-"] > *,
  .grid-lg-8[class*=" list"] > * {
    width: calc(12.5% - 15px);
  }
  .grid-lg-9 > ._item {
    width: 11.11111%;
  }
  .grid-lg-9 > [class^="card-"], .grid-lg-9 > [class*=" card-"],
  .grid-lg-9[class^="list-"] > *,
  .grid-lg-9[class*=" list"] > * {
    width: calc(11.11111% - 15px);
  }
  .grid-lg-10 > ._item {
    width: 10%;
  }
  .grid-lg-10 > [class^="card-"], .grid-lg-10 > [class*=" card-"],
  .grid-lg-10[class^="list-"] > *,
  .grid-lg-10[class*=" list"] > * {
    width: calc(10% - 15px);
  }
  .grid-lg-11 > ._item {
    width: 9.09091%;
  }
  .grid-lg-11 > [class^="card-"], .grid-lg-11 > [class*=" card-"],
  .grid-lg-11[class^="list-"] > *,
  .grid-lg-11[class*=" list"] > * {
    width: calc(9.09091% - 15px);
  }
  .grid-lg-12 > ._item {
    width: 8.33333%;
  }
  .grid-lg-12 > [class^="card-"], .grid-lg-12 > [class*=" card-"],
  .grid-lg-12[class^="list-"] > *,
  .grid-lg-12[class*=" list"] > * {
    width: calc(8.33333% - 15px);
  }
}

@media (min-width: 1200px) {
  .grid-xl-1 > ._item {
    width: 100%;
  }
  .grid-xl-1 > [class^="card-"], .grid-xl-1 > [class*=" card-"],
  .grid-xl-1[class^="list-"] > *,
  .grid-xl-1[class*=" list"] > * {
    width: calc(100% - 15px);
  }
  .grid-xl-2 > ._item {
    width: 50%;
  }
  .grid-xl-2 > [class^="card-"], .grid-xl-2 > [class*=" card-"],
  .grid-xl-2[class^="list-"] > *,
  .grid-xl-2[class*=" list"] > * {
    width: calc(50% - 15px);
  }
  .grid-xl-3 > ._item {
    width: 33.33333%;
  }
  .grid-xl-3 > [class^="card-"], .grid-xl-3 > [class*=" card-"],
  .grid-xl-3[class^="list-"] > *,
  .grid-xl-3[class*=" list"] > * {
    width: calc(33.33333% - 15px);
  }
  .grid-xl-4 > ._item {
    width: 25%;
  }
  .grid-xl-4 > [class^="card-"], .grid-xl-4 > [class*=" card-"],
  .grid-xl-4[class^="list-"] > *,
  .grid-xl-4[class*=" list"] > * {
    width: calc(25% - 15px);
  }
  .grid-xl-5 > ._item {
    width: 20%;
  }
  .grid-xl-5 > [class^="card-"], .grid-xl-5 > [class*=" card-"],
  .grid-xl-5[class^="list-"] > *,
  .grid-xl-5[class*=" list"] > * {
    width: calc(20% - 15px);
  }
  .grid-xl-6 > ._item {
    width: 16.66667%;
  }
  .grid-xl-6 > [class^="card-"], .grid-xl-6 > [class*=" card-"],
  .grid-xl-6[class^="list-"] > *,
  .grid-xl-6[class*=" list"] > * {
    width: calc(16.66667% - 15px);
  }
  .grid-xl-7 > ._item {
    width: 14.28571%;
  }
  .grid-xl-7 > [class^="card-"], .grid-xl-7 > [class*=" card-"],
  .grid-xl-7[class^="list-"] > *,
  .grid-xl-7[class*=" list"] > * {
    width: calc(14.28571% - 15px);
  }
  .grid-xl-8 > ._item {
    width: 12.5%;
  }
  .grid-xl-8 > [class^="card-"], .grid-xl-8 > [class*=" card-"],
  .grid-xl-8[class^="list-"] > *,
  .grid-xl-8[class*=" list"] > * {
    width: calc(12.5% - 15px);
  }
  .grid-xl-9 > ._item {
    width: 11.11111%;
  }
  .grid-xl-9 > [class^="card-"], .grid-xl-9 > [class*=" card-"],
  .grid-xl-9[class^="list-"] > *,
  .grid-xl-9[class*=" list"] > * {
    width: calc(11.11111% - 15px);
  }
  .grid-xl-10 > ._item {
    width: 10%;
  }
  .grid-xl-10 > [class^="card-"], .grid-xl-10 > [class*=" card-"],
  .grid-xl-10[class^="list-"] > *,
  .grid-xl-10[class*=" list"] > * {
    width: calc(10% - 15px);
  }
  .grid-xl-11 > ._item {
    width: 9.09091%;
  }
  .grid-xl-11 > [class^="card-"], .grid-xl-11 > [class*=" card-"],
  .grid-xl-11[class^="list-"] > *,
  .grid-xl-11[class*=" list"] > * {
    width: calc(9.09091% - 15px);
  }
  .grid-xl-12 > ._item {
    width: 8.33333%;
  }
  .grid-xl-12 > [class^="card-"], .grid-xl-12 > [class*=" card-"],
  .grid-xl-12[class^="list-"] > *,
  .grid-xl-12[class*=" list"] > * {
    width: calc(8.33333% - 15px);
  }
}

.grid > ._item-1 {
  width: 8.33333%;
}

.grid > ._item-2 {
  width: 16.66667%;
}

.grid > ._item-3 {
  width: 25%;
}

.grid > ._item-4 {
  width: 33.33333%;
}

.grid > ._item-5 {
  width: 41.66667%;
}

.grid > ._item-6 {
  width: 50%;
}

.grid > ._item-7 {
  width: 58.33333%;
}

.grid > ._item-8 {
  width: 66.66667%;
}

.grid > ._item-9 {
  width: 75%;
}

.grid > ._item-10 {
  width: 83.33333%;
}

.grid > ._item-11 {
  width: 91.66667%;
}

.grid > ._item-12 {
  width: 100%;
}

@media (min-width: 576px) {
  .grid > ._item-sm-1 {
    width: 8.33333%;
  }
  .grid > ._item-sm-2 {
    width: 16.66667%;
  }
  .grid > ._item-sm-3 {
    width: 25%;
  }
  .grid > ._item-sm-4 {
    width: 33.33333%;
  }
  .grid > ._item-sm-5 {
    width: 41.66667%;
  }
  .grid > ._item-sm-6 {
    width: 50%;
  }
  .grid > ._item-sm-7 {
    width: 58.33333%;
  }
  .grid > ._item-sm-8 {
    width: 66.66667%;
  }
  .grid > ._item-sm-9 {
    width: 75%;
  }
  .grid > ._item-sm-10 {
    width: 83.33333%;
  }
  .grid > ._item-sm-11 {
    width: 91.66667%;
  }
  .grid > ._item-sm-12 {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .grid > ._item-md-1 {
    width: 8.33333%;
  }
  .grid > ._item-md-2 {
    width: 16.66667%;
  }
  .grid > ._item-md-3 {
    width: 25%;
  }
  .grid > ._item-md-4 {
    width: 33.33333%;
  }
  .grid > ._item-md-5 {
    width: 41.66667%;
  }
  .grid > ._item-md-6 {
    width: 50%;
  }
  .grid > ._item-md-7 {
    width: 58.33333%;
  }
  .grid > ._item-md-8 {
    width: 66.66667%;
  }
  .grid > ._item-md-9 {
    width: 75%;
  }
  .grid > ._item-md-10 {
    width: 83.33333%;
  }
  .grid > ._item-md-11 {
    width: 91.66667%;
  }
  .grid > ._item-md-12 {
    width: 100%;
  }
}

@media (min-width: 980px) {
  .grid > ._item-lg-1 {
    width: 8.33333%;
  }
  .grid > ._item-lg-2 {
    width: 16.66667%;
  }
  .grid > ._item-lg-3 {
    width: 25%;
  }
  .grid > ._item-lg-4 {
    width: 33.33333%;
  }
  .grid > ._item-lg-5 {
    width: 41.66667%;
  }
  .grid > ._item-lg-6 {
    width: 50%;
  }
  .grid > ._item-lg-7 {
    width: 58.33333%;
  }
  .grid > ._item-lg-8 {
    width: 66.66667%;
  }
  .grid > ._item-lg-9 {
    width: 75%;
  }
  .grid > ._item-lg-10 {
    width: 83.33333%;
  }
  .grid > ._item-lg-11 {
    width: 91.66667%;
  }
  .grid > ._item-lg-12 {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .grid > ._item-xl-1 {
    width: 8.33333%;
  }
  .grid > ._item-xl-2 {
    width: 16.66667%;
  }
  .grid > ._item-xl-3 {
    width: 25%;
  }
  .grid > ._item-xl-4 {
    width: 33.33333%;
  }
  .grid > ._item-xl-5 {
    width: 41.66667%;
  }
  .grid > ._item-xl-6 {
    width: 50%;
  }
  .grid > ._item-xl-7 {
    width: 58.33333%;
  }
  .grid > ._item-xl-8 {
    width: 66.66667%;
  }
  .grid > ._item-xl-9 {
    width: 75%;
  }
  .grid > ._item-xl-10 {
    width: 83.33333%;
  }
  .grid > ._item-xl-11 {
    width: 91.66667%;
  }
  .grid > ._item-xl-12 {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .align-left {
    display: flex;
    justify-content: flex-start;
  }
}

@media (min-width: 768px) {
  .align-center {
    display: flex;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .align-right {
    display: flex;
    justify-content: flex-end;
  }
}

@media (min-width: 768px) {
  .float-left {
    float: left;
    margin-right: 30px;
  }
  .float-left > * {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .float-right {
    float: right;
    margin-left: 30px;
  }
  .float-right > * {
    margin-top: 0;
  }
}

.space-m-0 {
  margin: 0;
}

.space-m-10 {
  margin: 10px 0;
}

.space-m-20 {
  margin: 20px 0;
}

.space-m-30 {
  margin: 30px 0;
}

.space-mt-0 {
  margin-top: 0;
}

.space-mt-10 {
  margin-top: 10px;
}

.space-mt-20 {
  margin-top: 20px;
}

.space-mt-30 {
  margin-top: 30px;
}

.space-mb-0 {
  margin-bottom: 0;
}

.space-mb-10 {
  margin-bottom: 10px;
}

.space-mb-20 {
  margin-bottom: 20px;
}

.space-mb-30 {
  margin-bottom: 30px;
}

.space-mr-10 {
  margin-right: 10px;
}

.space-ml-10 {
  margin-left: 10px;
}

.space-mr-5 {
  margin-right: 5px;
}

.space-ml-5 {
  margin-left: 5px;
}

form > p:not([class]) {
  margin-left: 10px;
}

form > ul:not([class]) {
  list-style-type: none;
  margin-left: 10px;
  padding: 0;
}

form > ul:not([class]) > li:not(:last-child) {
  margin-bottom: 5px;
}

form > .images {
  display: flex;
  flex-wrap: wrap;
  margin: 20px -10px;
}

form > .images > .image {
  margin: 10px;
  width: calc(33.3334% - 20px);
  height: 0;
  padding-top: calc(33.3334% - 20px);
  position: relative;
}

form > .images > .image img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover";
  border-radius: 5px;
}

.form-title {
  color: #121416;
  font-weight: bold;
  background: #fffbca;
  margin-left: -15px;
  margin-right: -15px;
  padding-top: .5em;
  padding-bottom: .5em;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .form-title {
    padding: .5em;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .layout-multi-main .form-title {
    border: solid 1px #f8b62d;
    border-radius: 5px;
    padding: .4em .6em .3em;
  }
}

.form-item {
  margin-bottom: 20px;
}

.form-item input,
.form-item textarea,
.form-item button,
.form-item .form-select select {
  width: 100%;
  border-radius: 5px;
  padding: 4px 10px;
  border: solid 2px #dde0e3;
}

@media all and (-ms-high-contrast: none) {
  .form-item input,
  .form-item button,
  .form-item .form-select select {
    height: 39px\0;
  }
}

.form-item input.form-input-em,
.form-item textarea.form-input-em,
.form-item button.form-input-em,
.form-item .form-select select.form-input-em {
  background-color: #fcf3e5;
  color: #000 !important;
}

.form-item select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

.form-item select::-ms-expand {
  display: none;
}

.form-item ::-webkit-input-placeholder {
  color: #dde0e3;
}

.form-item :-ms-input-placeholder {
  color: #dde0e3;
}

.form-item ::-ms-input-placeholder {
  color: #dde0e3;
}

.form-item ::placeholder {
  color: #dde0e3;
}

@media (min-width: 768px) {
  .form-item.form-align-center {
    text-align: center;
  }
}

.form-single {
  display: flex;
}

.form-single input,
.form-single .form-select {
  width: 100%;
  max-width: 220px;
}

.form-double {
  display: flex;
  justify-content: space-between;
}

.form-double input,
.form-double .form-select {
  width: calc(50% - 5px);
}

.form-triple {
  display: flex;
  justify-content: space-between;
}

.form-triple input,
.form-triple .form-select {
  width: calc(33.3334% - 5px);
}

.form-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.form-flex input,
.form-flex .form-select {
  width: calc(50% - 5px);
  margin-bottom: 10px;
}

.form-flex input:before,
.form-flex .form-select:before {
  content: '';
  width: 20px;
  height: 30px;
  display: block;
  position: absolute;
  right: 2px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: #fcf3e5;
}

.form-flex-pc input,
.form-flex-pc .form-select {
  display: block;
  margin-bottom: 10px;
}

.form-flex-pc input:before {
  content: '';
  width: 20px;
  height: 30px;
  display: block;
  position: absolute;
  right: 2px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: #fcf3e5;
}

@media (min-width: 768px) {
  .form-flex-pc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .form-flex-pc input,
  .form-flex-pc .form-select {
    width: calc(50% - 5px);
  }
}

.form-quad-image {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.form-quad-image label {
  width: calc(25% - 5px);
  margin: 4px 0;
}

.form-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-weight: bold;
}

.form-label span {
  font-weight: normal;
}

.form-select {
  position: relative;
  overflow: hidden;
}

.form-select.form-select-em select {
  background-color: #fcf3e5;
}

.form-checkbox-circle {
  cursor: pointer;
  display: inline-block;
}

.form-checkbox-circle input {
  display: none;
}

.form-checkbox-circle input:checked + span:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: #f8b62d;
  border-radius: 100%;
}

.form-checkbox-circle span {
  padding-left: 20px;
  position: relative;
  margin-right: 20px;
}

.form-checkbox-circle span:before {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: 18px;
  height: 18px;
  border: 1px solid #9aa3ac;
  border-radius: 100%;
}

.form-checkbox-circle.form-checkbox-img {
  display: inline;
}

.form-checkbox-circle.form-checkbox-img span {
  margin-right: 0px;
}

.form-checkbox-circle.form-checkbox-img img {
  pointer-events: none;
  width: 60%;
  max-width: 60px;
}

.form-checkbox-circle-box {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  border-bottom: dashed 1px #666;
  padding: 5px 0;
}

.form-checkbox-circle-box input {
  display: none;
}

.form-checkbox-circle-box input:checked + .content:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 2px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: #f8b62d;
  border-radius: 100%;
}

.form-checkbox-circle-box > .content {
  padding-left: 25px;
  position: relative;
}

.form-checkbox-circle-box > .content:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: -2px;
  width: 18px;
  height: 18px;
  border: 1px solid #9aa3ac;
  border-radius: 100%;
}

.form-checkbox-circle-box > .content p {
  margin: 0;
}

.form-checkbox-circle-box > .content p span {
  font-size: 0.9em;
  padding: 0 5px;
  margin-right: 5px;
}

.form-checkbox-circle-box.form-checkbox-img {
  display: inline;
}

.form-checkbox-circle-box.form-checkbox-img span {
  margin-right: 0px;
}

.form-checkbox-circle-box.form-checkbox-img img {
  pointer-events: none;
  width: 60%;
  max-width: 60px;
}

.form-checkbox-check {
  cursor: pointer;
  display: block;
}

@media (min-width: 768px) {
  .form-checkbox-check {
    display: inline-block;
  }
}

.form-checkbox-check.form-checkbox-liststyle {
  width: 100%;
  border-bottom: dashed 1px #9aa3ac;
  padding: 5px 0;
}

.form-checkbox-check input {
  display: none;
}

.form-checkbox-check input:checked + span:after,
.form-checkbox-check input:checked + div:after {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  left: 7px;
  width: 7px;
  height: 14px;
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
  border-bottom: 3px solid #f8b62d;
  border-right: 3px solid #f8b62d;
}

.form-checkbox-check input:checked + div:after {
  top: 2px;
}

.form-checkbox-check > span,
.form-checkbox-check > div {
  padding-left: 20px;
  position: relative;
  margin-right: 20px;
}

.form-checkbox-check > span:before,
.form-checkbox-check > div:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #9aa3ac;
  border-radius: 2px;
}

.form-checkbox-check > div {
  display: flex;
  justify-content: space-between;
  margin-right: 0;
}

.form-checkbox-check > div.bookmark {
  display: flex;
  justify-content: initial;
  margin-right: 0;
}

.bookmark-box {
  padding: 2px 5px;
  margin: 0;
}

.bookmark .title-box {
  display: flex;
  align-items: center;
  width: 80%;
}

.bookmark .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark > div.label {
  font-size: 12px;
  line-height: 1.6em;
  margin: 0 5px;
  padding: 2px 5px;
  border: solid 1px transparent;
  border-radius: 5px;
  width: 60px;
  text-align: center;
}

.bookmark-submit {
  display: flex;
  justify-content: center;
}

.blocked-user-list {
  list-style-type: none;
  padding: 10px;
}

.blocked-user-list > li {
  width: 100%;
  padding: 10px 5px;
  border-bottom: dotted 1px #dde0e3;
}

.form-checkbox-check > div:before {
  top: 4px;
}

.form-checkbox-check > div span {
  display: inline-block;
  width: calc(100% - 80px);
}

.form-checkbox-check > div span.time {
  font-size: 12px;
  width: 80px;
  text-align: right;
}

.form-submit {
  position: relative;
  display: block;
  transition: opacity .2s;
}

.form-submit:focus, .form-submit:hover {
  opacity: .6;
}

@media (min-width: 768px) {
  .form-submit {
    display: inline-block;
    min-width: 300px;
  }
}

.form-submit:after {
  content: "\E108";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-size: 1em;
  position: absolute;
  top: 50%;
  right: 5px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #fff;
  pointer-events: none;
}

.form-submit button {
  cursor: pointer;
  font-size: 1.25em;
  font-weight: bold;
  color: #fff;
  background: #f8b62d;
  border: none;
  padding-right: 25px;
}

.form-submit.form-submit-green button {
  background: #00a49c;
}

.form-submit.form-submit-pink button {
  background: #e986b1;
}

.form-allchecks {
  display: flex;
  margin-top: 20px;
}

.form-allchecks input.all-check {
  background-color: #eee;
  border: solid 1px #777;
  border-radius: 20px;
  width: auto;
  line-height: 1em;
  cursor: pointer;
}

.form-allchecks input.all-check:first-child {
  margin-right: 10px;
}

.validation {
  color: #e60012;
}

.validation > p {
  font-size: 0.9em;
  margin: 0;
}

.validation .validation-container {
  border: solid 2px #e60012;
  padding: 10px;
}

.validation-tag {
  border: solid 2px #ff0000;
  background-color: #fff2f2;
  color: #1b1b1b;
  padding: 2px 5px;
}

@media (min-width: 768px) {
  .validation .validation-container {
    padding: 20px;
  }
}

.validation .validation-container ._title {
  text-align: center;
  margin-top: 0;
}

.validation .validation-container ul {
  margin: 0;
  padding: 0 0 0 20px;
}

@media (min-width: 768px) {
  .form-select-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
  }
  .form-select-wrapper > label {
    width: calc(33.3334% - 20px);
    margin: 0 10px;
  }
}

.form-item-vertical {
  padding-left: 2px;
}

.form-item-vertical > label {
  display: table;
}

.form-item-vertical > label:not(:last-child) {
  margin-bottom: 5px;
}

.form-item-vertical > label span {
  margin-right: 0;
}

.form-item-genre:not(:last-child) {
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .form-item-genre:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .form-item-genre {
    display: flex;
    justify-content: space-between;
  }
}

.form-item-genre .form-select {
  display: block;
}

.form-item-genre .form-select:after {
  font-size: 20px;
  right: 12px;
}

.form-item-genre .form-select select {
  padding-right: 40px;
  border: solid 1px #f8b62d;
}

@media (min-width: 768px) {
  .form-item-genre .form-select {
    width: 180px;
    font-size: 14px;
  }
  .form-item-genre .form-select select {
    padding: 7px 40px 7px 10px;
  }
}

@media (max-width: 767px) {
  .form-item-genre input {
    margin-top: 20px;
  }
}

@media (min-width: 768px) {
  .form-item-genre input {
    width: calc(100% - 190px);
    font-size: 14px;
    padding: 6px 10px;
  }
}

.form-file {
  border-radius: 5px;
  padding: 6px 10px 5px;
  border: solid 1px #f8b62d;
  background-color: #fcf3e5;
  color: #121416;
  cursor: pointer;
}

@media all and (-ms-high-contrast: none) {
  .form-file {
    height: 39px\0;
  }
}

.form-file input {
  display: none;
}

.form-item-file {
  display: flex;
  align-items: center;
}

.form-item-file:not(:last-child) {
  margin-bottom: 20px;
}

.form-item-file > p {
  margin: 0 20px 0 0;
}

.form-select-image {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .form-select-image {
    padding: 0 15px;
  }
}

@media (max-width: 767px) {
  .form-check-image {
    width: calc(50% - 20px);
    margin: 10px 0 30px;
  }
}

@media (min-width: 768px) {
  .form-check-image {
    width: calc(50% - 45px);
    cursor: pointer;
    margin: 10px 0 30px;
  }
}

.form-check-image input {
  display: none;
}

.form-check-image .title {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #9aa3ac;
  margin-bottom: 15px;
}

.form-check-image .image {
  width: 100%;
  height: 0;
  padding-top: 100%;
  border-radius: 5px;
  position: relative;
  display: block;
}

.form-check-image .image:before {
  content: "";
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #f8b62d;
  border-radius: 5px;
  transition: opacity .2s;
  opacity: 0;
  pointer-events: none;
}

.form-check-image .image img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover";
  border-radius: 5px;
  pointer-events: none;
}

.form-check-image input:checked + .title {
  color: #666 !important;
}

.form-check-image input:checked + .title + .image:before {
  opacity: 1 !important;
}

.form-check-image:hover .image:before {
  opacity: .5;
}

[class^="background-"],
[class*=" background-"] {
  padding: 10px;
}

[class^="background-"] *:last-child,
[class*=" background-"] *:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  [class^="background-"],
  [class*=" background-"] {
    padding: 20px;
  }
}

.background-primary {
  background-color: #f8b62d;
}

.background-secondary {
  background-color: #cfdb00;
}

.background-accent {
  background-color: #fffbca;
}

.background-accent2 {
  background-color: #e9f7be;
}

.background-information {
  background-color: #00a49c;
}

.background-success {
  background-color: #6a3906;
}

.background-warning {
  background-color: #eb6877;
}

.background-danger {
  background-color: #e60012;
}

.sp-only {
  display: block !important;
}

@media (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}

.pc-only {
  display: none !important;
}

@media (min-width: 768px) {
  .pc-only {
    display: block !important;
  }
}

.note {
  background-color: #f3f4f5;
  color: #333;
  border-radius: 5px;
  padding: 20px;
  margin: 30px 0;
}

.note > *:first-child {
  margin-top: 0;
}

.note > *:last-child {
  margin-bottom: 0;
}

ul.modal-ApplauseList {
  display: none;
  background: #fff;
  width: 280px;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

ul.modal-ApplauseList:before {
  content: '';
  width: 100%;
  height: 80px;
}

.modaal-wrapper ul.modal-ApplauseList {
  display: block;
}

ul.modal-ApplauseList li {
  width: 100%;
  padding: 20px;
  border-bottom: dotted 1px #dde0e3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

ul.modal-ApplauseList li .image img {
  width: 60px;
}

ul.modal-ApplauseList li a.name {
  display: block;
  width: calc(100% - 80px);
}

.ApplauseButton,
.FavoriteButton {
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity .2s;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
  overflow: visible;
}

.ApplauseButton:hover,
.FavoriteButton:hover {
  opacity: .6;
}

.ApplauseButton img,
.FavoriteButton img {
  height: 26px;
}

.FavoriteList,
.ApplauseList {
  border: none;
  background: none;
  padding: 0 0 0 10px;
  position: relative;
}

.FavoriteList:before,
.ApplauseList:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 4px solid transparent;
  border-right: 6px solid #e5e5e6;
}

.FavoriteList .count,
.ApplauseList .count {
  display: inline-block;
  position: relative;
  min-width: 26px;
  padding: 0px 10px 0px 10px;
  background-color: #e5e5e6;
  border-radius: 3px;
  text-align: center;
}

.ApplauseList {
  cursor: pointer;
  transition: opacity .2s;
}

.ApplauseList:hover {
  opacity: .6;
}

.ApplauseList .count {
  color: #0086be;
}

span.View, span.Answer, span.Applause, span.Time, span.Comment, span.Hourglass {
  display: inline-block;
  margin-right: 5px;
  font-size: 13px;
}

span.View:last-child, span.Answer:last-child, span.Applause:last-child, span.Time:last-child, span.Comment:last-child, span.Hourglass:last-child {
  margin-right: 0;
}

span.View:before, span.Answer:before, span.Applause:before, span.Time:before, span.Comment:before, span.Hourglass:before {
  content: '';
  display: inline-block;
  background-size: contain;
  background-position: center center;
  vertical-align: text-bottom;
  width: 26px;
  height: 20px;
  margin-right: 2px;
  margin-bottom: -1px;
}

.View:before {
  background-image: url("../images/icons/view.png");
}

.Time:before {
  background-image: url("../images/icons/time.png");
}

.Hourglass:before {
  background-image: url("../images/icons/hourglass.png");
}

.Answer:before {
  background-image: url("../images/icons/a.png");
}

.Applause:before {
  background-image: url("../images/icons/applause.png");
}

.Comment:before {
  background-image: url("../images/icons/comment2.png");
}

.GlobalHeader {
  position: relative;
  border-bottom: solid 2px #f8b62d;
  height: 60px;
}

@media (min-width: 768px) {
  .GlobalHeader {
    height: auto;
  }
}

.GlobalHeader::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: #cfdb00;
}

.GlobalHeader-Container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  height: 100%;
}

.GlobalHeader-Wrapper {
  margin-left: -15px;
  margin-right: -15px;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 6px 0;
}

@media (min-width: 1024px) {
  .GlobalHeader-Wrapper {
    padding: 20px 0;
  }
}

.GlobalHeader-LogoContainer {
  margin-left: 15px;
  margin-right: 15px;
  width: 58.33333%;
  display: flex;
  -ms-flex: 0 1 auto;
  align-items: flex-end;
  height: 100%;
}

@media (min-width: 1024px) {
  .GlobalHeader-LogoContainer {
    width: 33.33333%;
  }
}

.GlobalHeader-LogoContainer .GlobalHeader-Logo {
  margin: 0;
  width: 100%;
  line-height: 1em;
}

@media (min-width: 1024px) {
  .GlobalHeader-LogoContainer .GlobalHeader-Logo {
    width: auto;
  }
}

@media all and (min-width: 1024px) and (-ms-high-contrast: none) {
  .GlobalHeader-LogoContainer .GlobalHeader-Logo {
    width: calc(100% - 100px);
  }
}

.GlobalHeader-LogoContainer .GlobalHeader-Logo a {
  display: block;
  height: 100%;
}

.GlobalHeader-LogoContainer .GlobalHeader-Logo a img {
  width: auto;
  max-height: 60px;
  padding: 5px 0;
}

.GlobalHeader-LogoContainer .GlobalHeader-Appeal {
  display: none;
}

.GlobalHeader-Logo > .sub-title {
  display: none;
}

@media (min-width: 768px) {
  .GlobalHeader-Logo > .sub-title {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: normal;
    color: #6a3906;
    line-height: 0.4em;
  }
}

@media (min-width: 1024px) {
  .GlobalHeader-LogoContainer .GlobalHeader-Appeal {
    display: block;
    width: 100px;
    padding: 0 20px;
  }
}


.GlobalHeader-NavContainer {
  margin-left: 15px;
  margin-right: 15px;
  width: 41.66667%;
  -ms-flex: 0 1 auto;
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 1024px) {
  .GlobalHeader-NavContainer {
    width: 66.66667%;
    display: block;
  }
}

.GlobalHeader-Nav {
  display: flex;
  justify-content: flex-end;
}

.GlobalHeader-GlobalNav {
  display: none;
}

@media (min-width: 1024px) {
  .GlobalHeader-GlobalNav {
    display: block;
  }
}

.GlobalHeader-GlobalNav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}

.GlobalHeader-GlobalNav ul li:not(:first-child) {
  margin-left: 10px;
}

.GlobalHeader-GlobalNav ul li.Repo {
  display: none;
}

@media (min-width: 768px) {
  .GlobalHeader-GlobalNav ul li.Repo {
    display: inline-block;
  }
}

@media (min-width: 768px) {
  .GlobalHeader-GlobalNav ul li.Repo a:after {
    background-image: url("../images/header/header-repo_md.png");
  }
}


@media (min-width: 768px) {
  .GlobalHeader-GlobalNav ul li.Qa a:after {
    background-image: url("../images/header/header-qa_md.png");
  }
}

.GlobalHeader-GlobalNav ul li.Recruit {
  display: none;
}

@media (min-width: 768px) {
  .GlobalHeader-GlobalNav ul li.Recruit {
    display: inline-block;
  }
}

@media (min-width: 768px) {
  .GlobalHeader-GlobalNav ul li.Recruit a:after {
    background-image: url("../images/header/header-recruit_md.png");
  }
}

.GlobalHeader-GlobalNav ul li.Login {
  display: none;
}

@media (min-width: 768px) {
  .GlobalHeader-GlobalNav ul li.Login {
    display: inline-block;
  }
}

@media (min-width: 768px) {
  .GlobalHeader-GlobalNav ul li.Login a:after {
    background-image: url("../images/header/header-login_md.png");
  }
}

.GlobalHeader-GlobalNav ul li a {
  position: relative;
  display: block;
  border: solid 2px #f8b62d;
  border-radius: 4px;
  text-decoration: none;
  padding-top: 42px;
  width: 50px;
  height: 40px;
  font-size: 0.6em;
  font-weight: bold;
}

@media (min-width: 768px) {
  .GlobalHeader-GlobalNav ul li a {
    padding: 10px 10px 10px 40px;
    width: auto;
    font-size: 1em;
    background: #f8b62d;
    display: flex;
    align-items: center;
  }
}

.GlobalHeader-GlobalNav ul li a:after {
  content: '';
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 22px;
}

@media (min-width: 768px) {
  .GlobalHeader-GlobalNav ul li a:after {
    width: 30px;
    top: 6px;
    left: 4px;
  }
}

.GlobalHeader-GlobalNav ul li a span.text {
  display: block;
  background: #f8b62d;
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .GlobalHeader-GlobalNav ul li a span.text {
    position: static;
    width: auto;
    line-height: 1em;
  }
}

@media (min-width: 768px) {
  .GlobalHeader-ExtraNav {
    margin-left: 10px;
  }
}

.GlobalHeader-ExtraNav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}

.GlobalHeader-ExtraNav ul li:not(:first-child) {
  margin-left: 10px;
}

.GlobalHeader-ExtraNav ul li.Mypage {
  display: none;
}

@media (min-width: 1024px) {
  .GlobalHeader-ExtraNav ul li.Mypage {
    display: inline-block;
  }
}

@media (min-width: 1024px) {
  .GlobalHeader-ExtraNav ul li.Mypage a:after,
  li.Verify a:after  {
    background-image: url("../images/header/header-mypage_md.png");
  }
}

.GlobalHeader-ExtraNav ul li.News a:after {
  background-image: url("../images/header/header-notify_sm.png");
}

@media (min-width: 1024px) {
  .GlobalHeader-ExtraNav ul li.News a:after {
    background-image: url("../images/header/header-notify_md.png");
  }
}

.GlobalHeader-ExtraNav ul li.Signin {
  display: none;
}

@media (min-width: 1024px) {
  .GlobalHeader-ExtraNav ul li.Signin {
    display: inline-block;
  }
}

@media (min-width: 1024px) {
  .GlobalHeader-ExtraNav ul li.Signin a:after {
    background-image: url("../images/header/header-signin_md.png");
  }
}

.GlobalHeader-ExtraNav ul li.Login {
  display: none;
}

@media (min-width: 1024px) {
  .GlobalHeader-ExtraNav ul li.Login {
    display: inline-block;
  }
}

@media (min-width: 1024px) {
  .GlobalHeader-ExtraNav ul li.Login a:after {
    background-image: url("../images/header/header-login_md.png");
  }
}

.GlobalHeader-ExtraNav ul li a {
  position: relative;
  display: block;
  border: solid 2px #00a49c;
  border-radius: 4px;
  text-decoration: none;
  padding-top: 42px;
  width: 50px;
  height: 40px;
  font-size: 0.6em;
  font-weight: bold;
}

@media (min-width: 1024px) {
  .GlobalHeader-ExtraNav ul li a {
    padding: 10px 10px 10px 30px;
    width: auto;
    font-size: 1em;
    background: #00a49c;
    display: flex;
    align-items: center;
  }
}

.GlobalHeader-ExtraNav ul li a:after {
  content: '';
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 22px;
}

@media (min-width: 1024px) {
  .GlobalHeader-ExtraNav ul li a:after {
    width: 30px;
    top: 6px;
    left: 0;
  }
}

.GlobalHeader-ExtraNav ul li a span.text {
  display: block;
  background: #00a49c;
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

@media (min-width: 1024px) {
  .GlobalHeader-ExtraNav ul li a span.text {
    position: static;
    width: auto;
    line-height: 1em;
  }
}

.GlobalHeader-ExtraNav ul li a span.badge {
  position: absolute;
  display: block;
  background: #e60012;
  border-radius: 10px;
  color: #fff;
  left: -8px;
  top: -5px;
  text-align: center;
  line-height: 1em;
  width: 20px;
  height: 20px;
  padding-top: 5px;
  z-index: 1;
}

@media (min-width: 1024px) {
  .GlobalHeader-ExtraNav ul li a span.badge {
    position: static;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    padding-top: 6px;
    margin-left: 10px;
    font-size: 0.9em;
  }
}

.GlobalHeader-Support {
  margin-left: 10px;
}

@media (min-width: 1024px) {
  .GlobalHeader-Support {
    margin-top: 20px;
    margin-left: 0;
    display: flex;
    justify-content: flex-end;
  }
}

.GlobalHeader-Link {
  display: none;
}

@media (min-width: 1024px) {
  .GlobalHeader-Link {
    display: block;
    margin-left: 10px;
  }
}

.GlobalHeader-SearchButton {
  position: relative;
  display: block;
  border: solid 2px #00a49c;
  border-radius: 4px;
  text-decoration: none;
  padding-top: 42px;
  width: 50px;
  height: 40px;
  font-size: 0.6em;
  font-weight: bold;
}

@media (min-width: 1024px) {
  .GlobalHeader-SearchButton {
    display: none;
  }
}

.GlobalHeader-SearchButton::after {
  content: '';
  background-image: url("../images/header/header-search_sm.png");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 22px;
}


.GlobalHeader-SearchButton span {
  display: block;
  background: #00a49c;
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

#modal {
  display: none;
}

@media (min-width: 1024px) {
  #modal {
    display: block;
  }
}

.GlobalHeader-SearchForm form {
  display: flex;
}

.GlobalHeader-SearchForm form .GlobalHeader-SearchText {
  width: 80%;
}

@media (min-width: 1024px) {
  .GlobalHeader-SearchForm form .GlobalHeader-SearchText {
    width: 220px;
  }
}

@media (min-width: 980px) {
  .GlobalHeader-SearchForm form .GlobalHeader-SearchText {
    width: 300px;
  }
}

.GlobalHeader-SearchForm form .GlobalHeader-SearchText input {
  position: relative;
  border-radius: 4px 0 0 4px;
  width: 100%;
  padding: 4px 10px;
  border: solid 2px #00a49c;
  font-size: 1.25em;
}

@media (min-width: 1024px) {
  .GlobalHeader-SearchForm form .GlobalHeader-SearchText input {
    font-size: 1em;
  }
}

@media all and (-ms-high-contrast: none) {
  .GlobalHeader-SearchForm form .GlobalHeader-SearchText input {
    height: 39px\0;
  }
}

.GlobalHeader-SearchForm form .GlobalHeader-SearchText ::-webkit-input-placeholder {
  color: #dde0e3;
}

.GlobalHeader-SearchForm form .GlobalHeader-SearchText :-ms-input-placeholder {
  color: #dde0e3;
}

.GlobalHeader-SearchForm form .GlobalHeader-SearchText ::-ms-input-placeholder {
  color: #dde0e3;
}

.GlobalHeader-SearchForm form .GlobalHeader-SearchText ::placeholder {
  color: #dde0e3;
}

.GlobalHeader-SearchForm form .GlobalHeader-SearchSubmit {
  position: relative;
  width: 20%;
}

@media (min-width: 1024px) {
  .GlobalHeader-SearchForm form .GlobalHeader-SearchSubmit {
    width: 60px;
  }
}

.GlobalHeader-SearchForm form .GlobalHeader-SearchSubmit input {
  width: 100%;
  border-radius: 0 5px 5px 0;
  border: solid 2px #00a49c;
  background: #00a49c;
  padding: 4px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.25em;
}

@media (min-width: 1024px) {
  .GlobalHeader-SearchForm form .GlobalHeader-SearchSubmit input {
    font-size: 1em;
    padding: 4px;
  }
}

.GlobalNav {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #f3f4f5;
  width: 100%;
  z-index: 9997;
}

@media (min-width: 1024px) {
  .GlobalNav {
    display: none;
  }
}

.GlobalNav-Container nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.GlobalNav-Container nav ul li {
  width: 20%;
}

.GlobalNav-Container nav ul li a {
  position: relative;
  display: block;
  font-size: 0.7em;
  text-align: center;
  text-decoration: none;
  padding: 40px 2px 8px;
  color: #666;
}

.GlobalNav-Container nav ul li a:before {
  content: '';
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 36px;
}

.GlobalNav-Container nav ul li.Current a {
  color: #f8b62d;
}

.GlobalNav-Container nav ul li.Home a:before {
  background-image: url("../images/nav/nav-home.png");
}

.GlobalNav-Container nav ul li.Home.Current a:before {
  background-image: url("../images/nav/nav-home_on.png");
}

.GlobalNav-Container nav ul li.Qa a:before {
  background-image: url("../images/nav/nav-qa.png");
}

.GlobalNav-Container nav ul li.Qa.Current a:before {
  background-image: url("../images/nav/nav-qa_on.png");
}

.GlobalNav-Container nav ul li.Repo a:before {
  background-image: url("../images/nav/nav-repo.png");
}

.GlobalNav-Container nav ul li.Repo.Current a:before {
  background-image: url("../images/nav/nav-repo_on.png");
}

.GlobalNav-Container nav ul li.Recruit a:before {
  background-image: url("../images/nav/nav-recruit.png");
}

.GlobalNav-Container nav ul li.Recruit.Current a:before {
  background-image: url("../images/nav/nav-recruit_on.png");
}

.GlobalNav-Container nav ul li.Mypage a:before {
  background-image: url("../images/nav/nav-mypage.png");
}

.GlobalNav-Container nav ul li.Mypage.Current a:before {
  background-image: url("../images/nav/nav-mypage_on.png");
}

.GlobalNav-Container nav ul li.Login a:before {
  background-image: url("../images/nav/nav-login.png");
}

.GlobalNav-Container nav ul li.Login.Current a:before {
  background-image: url("../images/nav/nav-login_on.png");
}

.GlobalFooter {
  position: relative;
  background: #e9f7be;
  margin-top: 40px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .GlobalFooter {
    margin-top: 60px;
  }
}

.Breadcrumb + .GlobalFooter {
  margin-top: 0;
}

@media (min-width: 768px) {
  .Breadcrumb + .GlobalFooter {
    margin-top: 0;
  }
}

.GlobalFooter-Container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.GlobalFooter-Wrapper {
  padding: 10px 0;
  display: flex;
  align-items: center;
  border-bottom: dashed 1px #cfdb00;
}

@media (min-width: 768px) {
  .GlobalFooter-Wrapper {
    padding: 20px 0;
  }
}

.GlobalFooter-UtilityNav {
  width: 100%;
}

.GlobalFooter-UtilityNav ul {
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .GlobalFooter-UtilityNav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.GlobalFooter-UtilityNav ul li {
  line-height: 1.2em;
  margin-top: 10px;
}

@media (min-width: 768px) {
  .GlobalFooter-UtilityNav ul li {
    width: auto;
  }
  .GlobalFooter-UtilityNav ul li:not(:last-child) {
    margin-right: 40px;
  }
}

.GlobalFooter-UtilityNav ul li a {
  font-size: 0.9em;
  color: #333;
  text-decoration: none;
}

.GlobalFooter-Security {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
}

.GlobalFooter-Security a {
  display: block;
}

.GlobalFooter-Security a:not(:last-child) {
  margin-right: 10px;
}

.GlobalFooter-Copy {
  text-align: center;
  font-size: 0.9em;
  color: #333;
  padding: 10px 0;
}

.Side-UserInfo {
  font-size: 0.9em;
  margin-bottom: 20px;
}

.Side-UserInfo .Side-UserInfo-Container {
  border: solid 2px #f8b62d;
  padding: 20px;
}

.Side-UserInfo .Side-UserInfo-Container .Side-UserInfo-Main {
  display: flex;
  align-items: flex-end;
}

.Side-UserInfo .Side-UserInfo-Container .Side-UserInfo-Main .Side-UserInfo-Image {
  margin-right: 10px;
}

.Side-UserInfo .Side-UserInfo-Container .Side-UserInfo-Main .Side-UserInfo-Image > img {
  width: 100px;
  height: 100px;
}

.Side-UserInfo .Side-UserInfo-Container .Side-UserInfo-Main .Side-UserInfo-Set {
  width: calc(100% - 100px);
}

.Side-UserInfo .Side-UserInfo-Container .Side-UserInfo-Main .Side-UserInfo-Set > a {
  display: block;
}

.Side-UserInfo .Side-UserInfo-Container .Side-UserInfo-Main .Side-UserInfo-Set > a > i {
  margin-right: 5px;
}

.Side-UserInfo .Side-UserInfo-Container .Side-UserInfo-Links {
  border-top: solid 1px #CCC;
  padding-top: 10px;
  margin-top: 10px;
}

.Side-UserInfo .Side-UserInfo-Container .Side-UserInfo-Links a {
  margin: 0;
  min-width: 100%;
}

.Side-UserInfo .Side-UserInfo-Container .Side-UserInfo-Links a:not(:first-child) {
  margin: 5px 0 0;
}

.Side-Support {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
  margin-left: -15px;
  margin-right: -15px;
}

@media (min-width: 768px) {
  .Side-Support {
    margin-bottom: 0;
  }
}

.Side-Support > a {
  margin-left: 15px;
  margin-right: 15px;
  display: inline-block;
  -ms-flex: 0 1 auto;
  margin-top: 20px;
}

.Side-Support > a:first-child {
  margin-top: 0;
}

.Side-Support > a > img {
  width: 100%;
}

.Side-Banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: -15px;
  margin-right: -15px;
}

.Side-Banner > a {
  margin-left: 15px;
  margin-right: 15px;
  display: inline-block;
  -ms-flex: 0 1 auto;
  margin-top: 20px;
}

@media (min-width: 980px) {
  .Side-Banner > a:first-child {
    margin-top: 0px;
  }
}

.Side-Banner > a > img {
  width: 100%;
}

.Side-Recruit {
  margin-top: 40px;
  margin-bottom: 30px;
}

.Side-Recruit .Side-Recruit-Content ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.Side-Recruit .Side-Recruit-Content ul li:not(:first-child) {
  margin-top: 5px;
}

.Side-Recruit .Side-Recruit-Content ul li a {
  display: block;
  border: solid 2px #00a49c;
  padding: 26px 20px 5px 5px;
  font-size: 14px;
  text-decoration: none;
  position: relative;
}

.Side-Recruit .Side-Recruit-Content ul li a:after {
  content: "\E108";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-size: 1em;
  position: absolute;
  top: 50%;
  right: 5px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #9aa3ac;
  pointer-events: none;
}

.Side-Recruit .Side-Recruit-Content ul li a span.state {
  display: block;
  font-weight: bold;
  color: #FFF;
  position: absolute;
  top: -1px;
  left: -1px;
  padding: 2px 20px 2px 10px;
  font-size: 0.7em;
  background-image: url("../images/icons/ribbon.png");
  background-repeat: no-repeat;
}

.Side-Recruit .Side-Recruit-Content ul li a p {
  margin: 0;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.Side-Recruit .Side-Recruit-Content ul li a p.title {
  width: 100%;
  padding-right: 5px;
  color: #6a3906;
}

.Side-Recruit .Side-Recruit-Content ul li a p.title.new:after {
  content: 'NEW!';
  color: #fff;
  font-size: 0.7em;
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 3px;
  text-decoration: none;
  background-color: #b52323;
  padding: 0 5px;
  border-radius: 15px;
}

.Side-Recruit .Side-Recruit-Content ul li a p.text {
  color: #666;
}

.Side-Rank .QuestionWrapper {
  margin-bottom: 30px;
}

.Side-Rank .QuestionWrapper .QuestionItem {
  margin-bottom: 10px;
}

.Side-Rank .QuestionWrapper .QuestionItem:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.Side-Recruit .message {
  font-size: 0.8em;
  padding: 20px 10px;
  background-color: #eee;
  text-align: center;
  margin-top: -10px;
}


ul.Reccomend {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.Reccomend li {
  border-bottom: solid 1px #dde0e3;
}

ul.Reccomend li.banner a {
  display: block;
  padding: 0;
  text-align: center;
}

@media (min-width: 768px) {
  ul.Reccomend li.banner a {
    padding: 20px 0;
  }
}

ul.Reccomend li.banner a:after {
  display: none;
}

ul.Reccomend li a {
  display: flex;
  padding: 10px 40px 10px 0;
  text-decoration: none;
  line-height: 1.3;
  position: relative;
}

ul.Reccomend li a:after {
  content: "\E108";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-size: .8em;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #9aa3ac;
  pointer-events: none;
}

ul.Reccomend li a .icon {
  width: 60px;
}

ul.Reccomend li a .icon img {
  display: block;
  margin: 0 auto;
  width: 60%;
}

ul.Reccomend li a .main {
  width: calc(100% - 15px);
  position: relative;
  min-width: 0;
  margin-left: 15px;
}

ul.Reccomend li a .main p {
  margin: 0 0 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

ul.Reccomend li a .main .title {
  font-size: 1em;
  font-weight: bold;
  color: #6a3906;
}

ul.Reccomend li a .main .text {
  font-size: 0.9em;
  color: #333;
  margin-bottom: 0;
}

ul.Reccomend li a .icon + .main {
  width: calc(100% - 60px);
  margin-left: 0;
}

.Pager {
  margin-top: 40px;
  margin-bottom: 40px;
}

.Pager .pager-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Pager .pager-content .prev {
  width: 30px;
  margin-right: 20px;
}

.Pager .pager-content .next {
  width: 30px;
  margin-left: 20px;
}

.Pager .pager-content p {
  margin: 0;
}

.maparea {
  position: relative;
  width: 300px;
  height: 270px;
  margin: 60px auto 0px;
}

@media (min-width: 768px) {
  .maparea {
    width: 540px;
    height: 480px;
  }
}

.maparea .map-layer {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.map-prev {
  position: absolute;
  cursor: pointer;
  display: block;
  background: #f8b62d;
  color: #fff;
  font-size: 13px;
  border-radius: 4px;
  text-align: center;
  right: 10px;
  top: -40px;
  padding: 10px 20px 10px 10px;
}

@media (min-width: 768px) {
  .map-prev {
    right: -40px;
    top: -40px;
  }
}

.map-prev:before {
  content: "\E102";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-size: 10px;
  color: #fff;
  padding-right: 10px;
}

.map-image {
  text-align: center;
  width: 300px;
}

@media (min-width: 768px) {
  .map-image {
    width: 540px;
  }
}

.map-image img {
  width: 100%;
}

.Sort {
  background-color: #fffbca;
  padding: 15px;
}

.Sort .counttext {
  color: #6a3906;
  margin: 0 0 5px;
  font-size: 0.9em;
}

.Sort .counttext .count {
  font-size: 1.5em;
  color: #e60012;
}

.Sort .Sort-Container {
  background-color: #FFF;
  border: solid 1px #6a3906;
  border-radius: 6px;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .Sort .Sort-Container {
    padding: 20px 10px 10px;
  }
}

.Sort .Sort-Container:not(:first-child) {
  margin-top: 10px;
}

.Sort .Sort-Container .wrap {
  display: flex;
  align-items: center;
}

.Sort .Sort-Container .wrap .title {
  width: 50px;
  margin-right: 5px;
}

.Sort .Sort-Container .wrap p {
  margin: 0;
}

.Sort .Sort-Container a.Sort-City,
.Sort .Sort-Container a.Sort-Workplace {
  text-decoration: none;
}

@media (min-width: 768px) {
  .Sort .Sort-Container a.Sort-City,
  .Sort .Sort-Container a.Sort-Workplace {
    display: none;
  }
}

.Sort .Sort-Container #modal-City,
.Sort .Sort-Container #modal-Workplace {
  display: none;
}

@media (min-width: 768px) {
  .Sort .Sort-Container #modal-City,
  .Sort .Sort-Container #modal-Workplace {
    width: 100%;
    display: block;
  }
}

.Sort-List {
  background-color: #FFF;
  border-radius: 6px;
  padding: 10px;
}

.Sort-List ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.Sort-List ul li {
  display: inline-block;
  position: relative;
}

.Sort-List ul li:not(:first-child) {
  padding-left: 20px;
}

.Sort-List ul li:not(:first-child):before {
  content: '/';
  position: absolute;
  left: 6px;
  color: #9aa3ac;
}

.Sort-List ul li a {
  text-decoration: none;
}

.QuestionHeader .QuestionHeader-Wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.QuestionHeader .QuestionHeader-Wrapper .QuestionHeader-Nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}

@media (min-width: 768px) {
  .QuestionHeader .QuestionHeader-Wrapper .QuestionHeader-Total {
    margin-left: 20px;
  }
}

.QuestionHeader .QuestionHeader-Wrapper .QuestionHeader-Total p {
  display: inline-block;
  font-size: 0.8em;
  color: #6a3906;
  line-height: 1.3em;
  margin-bottom: 0;
  background: linear-gradient(transparent 60%, #fff45c 60%);
}

.QuestionHeader .QuestionHeader-Wrapper .QuestionHeader-Total p .count {
  color: #eb6877;
  font-size: 1.5em;
}

@media (min-width: 768px) {
  .QuestionHeader .QuestionHeader-Wrapper .QuestionHeader-Total p {
    font-size: 1.25em;
  }
}

.QuestionHeader .QuestionSearch {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.QuestionHeader .QuestionSearch form {
  display: flex;
}

.QuestionHeader .QuestionSearch form .QuestionSearch-SearchText {
  width: 80%;
}

@media (min-width: 768px) {
  .QuestionHeader .QuestionSearch form .QuestionSearch-SearchText {
    width: 300px;
  }
}

.QuestionHeader .QuestionSearch form .QuestionSearch-SearchText input {
  position: relative;
  border-radius: 4px 0 0 4px;
  width: 100%;
  padding: 4px 10px;
  border: solid 2px #00a49c;
}

@media all and (-ms-high-contrast: none) {
  .QuestionHeader .QuestionSearch form .QuestionSearch-SearchText input {
    height: 39px\0;
  }
}

.QuestionHeader .QuestionSearch form .QuestionSearch-SearchText ::-webkit-input-placeholder {
  color: #dde0e3;
}

.QuestionHeader .QuestionSearch form .QuestionSearch-SearchText :-ms-input-placeholder {
  color: #dde0e3;
}

.QuestionHeader .QuestionSearch form .QuestionSearch-SearchText ::-ms-input-placeholder {
  color: #dde0e3;
}

.QuestionHeader .QuestionSearch form .QuestionSearch-SearchText ::placeholder {
  color: #dde0e3;
}

.QuestionHeader .QuestionSearch form .QuestionSearch-SearchSubmit {
  position: relative;
  width: 20%;
}

@media (min-width: 768px) {
  .QuestionHeader .QuestionSearch form .QuestionSearch-SearchSubmit {
    width: 60px;
  }
}

.QuestionHeader .QuestionSearch form .QuestionSearch-SearchSubmit input {
  width: 100%;
  border-radius: 0 5px 5px 0;
  border: solid 2px #00a49c;
  background: #00a49c;
  padding: 4px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.QuestionWrapper {
  margin-bottom: 40px;
  margin-left: -15px;
  margin-right: -15px;
}

@media (min-width: 768px) {
  .QuestionWrapper {
    margin-left: 0;
    margin-right: 0;
  }
}

.QuestionWrapper .QuestionItem, .QuestionWrapper .om {
  border-bottom: dashed 1px #9aa3ac;
  margin-bottom: 25px;
}

.QuestionWrapper .om {
  padding-top: 0;
}

.QuestionItem {
  padding: 0 15px;
}

@media (min-width: 768px) {
  .QuestionItem {
    padding: 0;
  }
}

.QuestionItem .QuestionItem-Title {
  display: flex;
  justify-content: space-between;
}

.QuestionItem .QuestionItem-Title .QuestionItem-Main {
  width: calc(100% - 90px);
  padding-right: 10px;
}

@media (min-width: 768px) {
  .QuestionItem .QuestionItem-Title .QuestionItem-Main {
    width: calc(100% - 102px);
  }
}

.QuestionItem .QuestionItem-Title .QuestionItem-Main a.link-title {
  display: inline;
  margin-bottom: 5px;
}

.QuestionItem .QuestionItem-Title .QuestionItem-Main a.user {
  display: block;
  text-decoration: none;
}

.QuestionItem .QuestionItem-Title .QuestionItem-Image {
  width: 90px;
  text-align: center;
}

@media (min-width: 768px) {
  .QuestionItem .QuestionItem-Title .QuestionItem-Image {
    width: 102px;
  }
}

.QuestionItem .QuestionItem-Title .QuestionItem-Image span {
  padding: 2px 6px 1px;
  margin-bottom: 5px;
  font-size: 0.9em;
}

@media (min-width: 768px) {
  .QuestionItem .QuestionItem-Title .QuestionItem-Image span {
    padding: 3px 10px 1px;
    font-size: 1em;
  }
}

.QuestionItem .QuestionItem-Title .QuestionItem-Image .image {
  display: inline-block;
}

.QuestionItem .QuestionItem-Title .QuestionItem-Image .image img {
  width: 60px;
  height: 60px;
}

@media (min-width: 768px) {
  .QuestionItem .QuestionItem-Title .QuestionItem-Image .image img {
    width: 70px;
    height: 70px;
  }
}

.QuestionItem .QuestionItem-Status {
  margin-top: 5px;
  padding-bottom: 5px;
}

@media (min-width: 768px) {
  .QuestionItem .QuestionItem-Status {
    margin-right: -10px;
  }
}

.QuestionItem .QuestionItem-Title2 .QuestionItem-Wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.QuestionItem .QuestionItem-Title2 .QuestionItem-Status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.QuestionItem .QuestionItem-Title2 .QuestionItem-Status span {
  margin-right: 10px;
}

.QuestionItem .QuestionItem-Title2 .QuestionItem-Status span:before {
  width: 30px;
  height: 22px;
  margin-right: 2px;
  margin-bottom: -1px;
}

.QuestionItem .QuestionItem-Desc {
  position: relative;
  text-align: right;
}

.QuestionItem .QuestionItem-Desc p {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 5px;
}

.QuestionItem .QuestionItem-Desc a {
  display: inline-block;
  text-decoration: none;
  font-size: 0.9em;
  margin-bottom: 10px;
  transition: .1s linear;
}

.QuestionItem .QuestionItem-Desc a:hover {
  opacity: 0.6;
}

.QuestionRanking .QuestionItem .QuestionItem-Title .QuestionItem-Main:before, .QuestionRanking .QuestionItem .QuestionItem-Title .QuestionItem-Main:after, .QuestionRanking .QuestionItem .QuestionItem-Title2 .QuestionItem-Main:before, .QuestionRanking .QuestionItem .QuestionItem-Title2 .QuestionItem-Main:after {
  content: '';
  display: table;
}

.QuestionRanking .QuestionItem .QuestionItem-Title .QuestionItem-Main:after, .QuestionRanking .QuestionItem .QuestionItem-Title2 .QuestionItem-Main:after {
  clear: both;
}

.QuestionRanking .QuestionItem .QuestionItem-Title .QuestionItem-Main .rank-icon,
.QuestionRanking .QuestionItem .QuestionItem-Title2 .QuestionItem-Main .rank-icon {
  display: inline-block;
}

.QuestionRanking .QuestionItem .QuestionItem-Title .QuestionItem-Main .rank-icon > img,
.QuestionRanking .QuestionItem .QuestionItem-Title2 .QuestionItem-Main .rank-icon > img {
  width: 50px;
  margin-top: -4px;
  margin-right: 6px;
  margin-left: -15px;
}

@media (min-width: 768px) {
  .QuestionRanking .QuestionItem .QuestionItem-Title .QuestionItem-Main .rank-icon > img,
  .QuestionRanking .QuestionItem .QuestionItem-Title2 .QuestionItem-Main .rank-icon > img {
    margin-left: 0;
  }
}

.QuestionRanking .QuestionItem .QuestionItem-Title .QuestionItem-Main .rank-icon > span,
.QuestionRanking .QuestionItem .QuestionItem-Title2 .QuestionItem-Main .rank-icon > span {
  display: inline-block;
  width: 56px;
  height: 28px;
  padding-top: 2px;
  padding-left: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #121416;
  margin-left: -15px;
}

@media (min-width: 768px) {
  .QuestionRanking .QuestionItem .QuestionItem-Title .QuestionItem-Main .rank-icon > span,
  .QuestionRanking .QuestionItem .QuestionItem-Title2 .QuestionItem-Main .rank-icon > span {
    margin-left: 0;
    padding-top: 3px;
    width: 56px;
    height: 30px;
  }
}

.QuestionRanking .QuestionItem .QuestionItem-Title .QuestionItem-Main .rank-icon > span.Rank,
.QuestionRanking .QuestionItem .QuestionItem-Title2 .QuestionItem-Main .rank-icon > span.Rank {
  background-image: url("../images/icons/rank-label.png");
  background-size: contain;
  background-position: left top;
  background-size: 56px;
}

@media (min-width: 768px) {
  .QuestionRanking .QuestionItem .QuestionItem-Title .QuestionItem-Main .link-title,
  .QuestionRanking .QuestionItem .QuestionItem-Title2 .QuestionItem-Main .link-title {
    line-height: 1.5;
  }
}

.QuestionHeader + .QuestionDetail-Header {
  margin-top: 20px;
}

.QuestionDetail-Header {
  margin-bottom: 15px;
}

@media (min-width: 768px) {
  .QuestionDetail-Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

.QuestionDetail-Header [class^="label-"],
.QuestionDetail-Header [class*=" label-"] {
  padding: 5px 10px 2px;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .QuestionDetail-Header [class^="label-"],
  .QuestionDetail-Header [class*=" label-"] {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {
  .QuestionDetail-Header > br {
    display: none;
  }
}

.QuestionDetail-Header .CategoryName {
  position: relative;
  display: inline-block;
  color: #eb6877;
  border: solid 1px #eb6877;
  border-radius: 4px;
  padding: 1px 10px 0px 50px;
  font-weight: bold;
  text-decoration: none;
}

.QuestionDetail-Header .CategoryName:before {
  content: '';
  width: 40px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #eb6877;
}

.QuestionDetail-Header .CategoryName:after {
  content: '';
  width: 28px;
  height: 100%;
  background-image: url("../images/icons/category2.png");
  background-position: left top;
  background-size: 26px;
  z-index: 1;
  position: absolute;
  left: 6px;
  top: 1px;
}

.QuestionDetail-Main, .QuestionDetail-Comment {
  color: #333;
  padding: 5px 15px;
  margin: 0 -15px 20px;
}

@media (min-width: 768px) {
  .QuestionDetail-Main, .QuestionDetail-Comment {
    border-radius: 6px;
    padding: 12px 20px;
    margin: 0 0 30px;
  }
}

@media (min-width: 768px) {
  .QuestionDetail-Main [class^="btn-"],
  .QuestionDetail-Main [class*=" btn-"], .QuestionDetail-Comment [class^="btn-"],
  .QuestionDetail-Comment [class*=" btn-"] {
    min-width: 400px;
  }
}

.QuestionDetail-Main {
  background-color: #fff6e9;
}

.QuestionDetail-Comment {
  background-color: #e5f8f7;
  padding: 20px 15px;
}

@media (min-width: 768px) {
  .QuestionDetail-Comment {
    padding: 20px;
  }
}

.QuestionDetail-Comment .QuestionDetail-Wrapper:first-child {
  border-bottom: dashed 1px #9aa3ac;
  padding-bottom: 15px;
}

@media (min-width: 768px) {
  .QuestionDetail-Comment .QuestionDetail-Wrapper:first-child {
    padding-bottom: 30px;
  }
}

.QuestionDetail-Comment .QuestionDetail-Wrapper:only-child {
  border-bottom: none;
  padding-bottom: 0;
}

.QuestionDetail-Comment .QuestionDetail-Wrapper:last-child {
  margin-bottom: 0;
}

.QuestionDetail-Wrapper {
  margin-bottom: 20px;
}

.QuestionDetail-Wrapper > *:last-child {
  margin-bottom: 0;
}

.QuestionDetail-Wrapper.Reply {
  padding-left: 20px;
  position: relative;
}

.QuestionDetail-Wrapper.Reply:before {
  content: '';
  background-image: url("../images/icons/re.gif");
  background-size: contain;
  width: 15px;
  height: 15px;
  position: absolute;
  left: 2px;
  top: 0;
}

@media (min-width: 768px) {
  .QuestionDetail-Wrapper.Reply {
    padding-left: 32px;
  }
  .QuestionDetail-Wrapper.Reply:before {
    width: 22px;
    height: 21px;
    left: 10px;
  }
}

.QuestionDetail-Wrapper .QuestionDetail-Title h1 {
  color: #121416;
  position: relative;
  padding-left: 40px;
  margin-top: 0;
}

.QuestionDetail-Wrapper .QuestionDetail-Title h1:before {
  content: '';
  width: 30px;
  height: 30px;
  background-image: url("../images/icons/q.png");
  background-position: left top;
  background-size: 30px;
  position: absolute;
  left: 0;
  top: 0;
}

.QuestionDetail-Wrapper .QuestionDetail-Status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.QuestionDetail-Wrapper .QuestionDetail-Status span {
  margin-right: 10px;
  font-size: 12px;
}

@media (min-width: 768px) {
  .QuestionDetail-Wrapper .QuestionDetail-Status span {
    font-size: 16px;
  }
}

.QuestionDetail-Wrapper .QuestionDetail-Status span:before {
  width: 30px;
  height: 22px;
  margin-right: 4px;
  margin-bottom: -1px;
}

.QuestionDetail-Wrapper .QuestionDetail-User {
  display: flex;
  align-items: center;
}

.QuestionDetail-Wrapper .QuestionDetail-User.between {
  justify-content: space-between;
}

.QuestionDetail-Wrapper .QuestionDetail-User .image img {
  margin-right: 10px;
  width: 60px;
  height: 60px;
}

@media (min-width: 768px) {
  .QuestionDetail-Wrapper .QuestionDetail-User .image img {
    width: 70px;
    height: 70px;
  }
}

.QuestionDetail-Wrapper .QuestionDetail-User .name {
  width: calc(100% - 70px);
}

@media (min-width: 768px) {
  .QuestionDetail-Wrapper .QuestionDetail-User .name {
    width: calc(100% - 90px);
  }
}

.QuestionDetail-Wrapper .QuestionDetail-User a {
  text-decoration: none;
}

.QuestionDetail-Wrapper .QuestionDetail-Date .Time {
  display: block;
  text-align: right;
  margin-top: 0px;
}

.QuestionDetail-Wrapper .QuestionDetail-Date .Time:before {
  content: '';
  display: inline-block;
  background-size: contain;
  background-position: center center;
  vertical-align: text-bottom;
  width: 30px;
  height: 20px;
  margin-right: 2px;
  margin-bottom: -1px;
  background-image: url("../images/icons/time.png");
}

.QuestionDetail-Wrapper .QuestionDetail-Delete {
  margin-top: 10px;
  background: #fff;
  color: #999;
  font-size: 0.8em;
  text-align: center;
  padding: 5px 10px;
}

@media (min-width: 768px) {
  .QuestionDetail-Wrapper .QuestionDetail-Delete {
    padding: 5px;
  }
}

.QuestionDetail-Wrapper .QuestionDetail-Delete p {
  margin: 0;
}

.QuestionDetail-StatusText {
  text-align: center;
}

.QuestionDetail-ButtonWrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.QuestionDetail-ButtonWrapper > *:not(:first-child) {
  margin-left: 10px;
}

@media (min-width: 768px) {
  .QuestionDetail-ButtonWrapper > *:not(:first-child) {
    margin-left: 25px;
  }
}

.QuestionDetail-Applause,
.QuestionDetail-Favorite {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.QuestionList {
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .QuestionList {
    margin-left: 0;
    margin-right: 0;
  }
}

.QuestionList .QuestionItem {
  margin-bottom: 0px;
  padding: 15px 10px 10px;
}

.QuestionList .QuestionItem:last-child {
  border-bottom: none;
  padding-bottom: 20px;
}

.QuestionList .QuestionItem:not(:last-child) {
  border-bottom: dashed 1px #9aa3ac;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.QuestionList .QuestionItem .QuestionItem-Main {
  margin-bottom: 10px;
}

.QuestionList .QuestionItem .QuestionItem-Wrapper {
  display: flex;
  justify-content: space-between;
}

.QuestionList .QuestionItem .QuestionItem-Wrapper .QuestionItem-Status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.QuestionList .QuestionItem .QuestionItem-Wrapper .QuestionItem-Status span {
  margin-right: 10px;
}

.QuestionList .QuestionItem .QuestionItem-Wrapper .QuestionItem-Status span:before {
  width: 30px;
  height: 22px;
}

.QuestionDetail-LogoutContent {
  background-image: url("../images/icons/hide.png");
  background-size: cover;
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
}

@media (min-width: 768px) {
  .QuestionDetail-LogoutContent {
    background-image: url("../images/icons/hide-pc.png");
  }
}

.QuestionColorNew .heading, .QuestionColorNew .link-more-arrowin {
  background-color: #d2f7f0 !important;
  border-color: #00a49c !important;
}

.QuestionColorNew .QuestionWrapper, .QuestionColorNew .QuestionList {
  background-color: #e9fdfc !important;
}

.QuestionColorPopular .heading, .QuestionColorPopular .link-more-arrowin {
  background-color: #ffeff7 !important;
  border-color: #e986b1 !important;
}

.QuestionColorPopular .QuestionWrapper, .QuestionColorPopular .QuestionList {
  background-color: #fff6fa !important;
}

.QuestionColorCategory .heading, .QuestionColorCategory .link-more-arrowin {
  background-color: #fffbca !important;
  border-color: #f8b62d !important;
}

.QuestionColorCategory .QuestionWrapper, .QuestionColorCategory .QuestionList {
  background-color: #ffffe5 !important;
}

.layout-aside .QuestionItem .QuestionItem-Title .QuestionItem-Main {
  width: calc(100% - 60px);
}

@media (min-width: 768px) {
  .layout-aside .QuestionItem .QuestionItem-Title .QuestionItem-Main {
    width: calc(100% - 70px);
  }
}

.layout-aside .QuestionItem .QuestionItem-Title .QuestionItem-Image {
  width: 60px;
}

@media (min-width: 768px) {
  .layout-aside .QuestionItem .QuestionItem-Title .QuestionItem-Image {
    width: 70px;
  }
}

.om {
  text-align: center;
  padding: 20px 0;
}

.om img {
  height: 24px;
}

.Breadcrumb {
  display: block;
  margin-bottom: 15px;
  overflow-x: auto;
  font-size: 0.9rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
  font-feature-settings: "palt";
}

.Breadcrumb::-webkit-scrollbar {
  display: none;
}

.Breadcrumb .Breadcrumb-Wrapper ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .Breadcrumb-Wrapper {
    font-size: 10px;
  }
}

.Breadcrumb .Breadcrumb-Wrapper ul li:not(:first-child) {
  margin-left: 10px;
}

.Breadcrumb .Breadcrumb-Wrapper ul li:not(:first-child):before {
  content: '>';
  margin-right: 10px;
}

.Breadcrumb .Breadcrumb-Wrapper ul li a, .Breadcrumb .Breadcrumb-Wrapper ul li span {
  color: #333;
  text-decoration: none;
}

.Notice {
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .Notice {
    margin-bottom: 40px;
  }
}

.Notice .Notice-Title p {
  color: #6a3906;
  margin: 0;
  padding: 1px 15px;
  border-radius: 5px 5px 0px 0px;
  background-color: #cfdb00;
  display: inline-block;
}

.Notice .Notice-Container {
  border: solid 1px #cfdb00;
  padding: 10px;
  border-radius: 0 5px 5px 5px;
}

.Notice .Notice-Container ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.Notice .Notice-Container ul li {
  position: relative;
  padding-left: 14px;
  line-height: 1.3;
  font-size: 12px;
}

@media (min-width: 768px) {
  .Notice .Notice-Container ul li {
    font-size: 14px;
  }
}

.Notice .Notice-Container ul li:not(:first-child) {
  margin-top: 8px;
}

.Notice .Notice-Container ul li:before {
  content: '▶';
  display: inline-block;
  font-size: .6em;
  color: #6a3906;
  position: absolute;
  left: 0;
  top: 3px;
}

.Notice .Notice-Container ul li a {
  text-decoration: none;
  color: #6a3906;
}

.Tab {
  width: 100%;
}

@media (min-width: 768px) {
  .Tab {
    display: flex;
    justify-content: space-between;
  }
}

.Tab .TabItem {
  width: calc(50% - 5px);
  background-color: #dde0e3;
  color: #fff;
  transition: opacity .2s;
  font-weight: bold;
  text-align: center;
  padding: 6px 10px 2px;
  border-radius: 5px 5px 0px 0px;
  cursor: pointer;
}

@media (min-width: 768px) {
  .Tab .TabItem {
    display: none;
  }
}

.Tab .TabItem.TabItem_Qa {
  float: left;
}

.Tab .TabItem.TabItem_Ranking {
  float: right;
}

.Tab input[name='TabItem'] {
  display: none;
}

.Tab input:checked + .TabItem {
  background-color: #f8b62d;
}

.Tab .TabContent {
  display: none;
  clear: both;
  border-top: solid 3px #f8b62d;
  margin: 0 -15px;
  padding: 0 15px;
}

@media (min-width: 768px) {
  .Tab .TabContent {
    margin: 0;
    padding: 0;
    border-top: none;
    display: block;
    width: calc(50% - 10px);
  }
  .Tab .TabContent h3.heading {
    font-size: 14px;
  }
  .Tab .TabContent h3.heading span {
    font-size: 14px;
  }
  .Tab .TabContent h3.heading .pcmini {
    font-size: 12px;
  }
}

.Tab .TabContent > *:first-child {
  margin-top: 0;
}

.Tab #TabQa:checked ~ #TabQa_content,
.Tab #TabRanking:checked ~ #TabRanking_content {
  display: block;
}

.Tab .link-more-arrowin {
  margin: -40px -15px 20px;
}

@media (min-width: 768px) {
  .Tab .link-more-arrowin {
    margin: -20px 0 20px;
  }
}

.TabContent .QuestionItem {
  margin-bottom: 0px;
  padding: 15px 10px 0px;
}

.TabContent .QuestionItem:last-child {
  border-bottom: none;
  padding-bottom: 10px;
}

.TabContent .QuestionItem:not(:first-child):not(:last-child):nth-child(5n) {
  background-image: url("../images/icons/lineimage.png");
  background-repeat: repeat-x;
  background-position: bottom;
  border: none;
  padding-bottom: 15px;
}

.TabContent .QuestionItem .QuestionItem-Title {
  margin-bottom: 0;
}

.TabContent .QuestionItem .QuestionItem-Title .QuestionItem-Main {
  width: calc(100% - 60px);
}

@media (min-width: 768px) {
  .TabContent .QuestionItem .QuestionItem-Title .QuestionItem-Main {
    width: calc(100% - 70px);
  }
}

.TabContent .QuestionItem .QuestionItem-Title .QuestionItem-Image {
  width: 60px;
}

@media (min-width: 768px) {
  .TabContent .QuestionItem .QuestionItem-Title .QuestionItem-Image {
    width: 70px;
  }
}

.TabContent .QuestionItem .QuestionItem-Status {
  padding-bottom: 5px;
}

.Tab_Mypage {
  width: 100%;
}

#Tab_Index {
  display: flex;
  flex-flow: row wrap;
  border-bottom: 3px #f8b62d solid;
  margin: 0 -13px;
}

@media (min-width: 768px) {
  #Tab_Index {
    margin: 0;
  }
}

#TabTop:checked ~ #Tab_Index #TabItem_Top,
#TabBookmark:checked ~ #Tab_Index #TabItem_Bookmark,
#TabUpdate:checked ~ #Tab_Index #TabItem_Update,
#TabBlockedUsers:checked ~ #Tab_Index #TabItem_BlockedUsers {
  background-color: #f8b62d;
}

#TabTop:checked ~ #TabTop_content,
#TabQa:checked ~ #TabQa_content,
#TabBookmark:checked ~ #TabBookmark_content,
#TabUpdate:checked ~ #TabUpdate_content,
#TabBlockedUsers:checked ~ #TabBlockedUsers_content {
  display: block;
}

.Tab_Mypage h3 {
  color: #6a3906;
}

#Tab_Index > .TabItem {
  flex-grow: 1;
  background-color: #dde0e3;
  margin-right: 2px;
  color: #fff;
  transition: opacity .2s;
  font-weight: bold;
  text-align: center;
  padding: 6px 0px 2px;
  border-radius: 5px 5px 0px 0px;
  font-size: 12px;
  cursor: pointer;
}

#Tab_Index > .TabItem:last-child {
  margin-right: 0;
}

@media (min-width: 768px) {
  #Tab_Index > .TabItem {
    font-size: 16px;
    padding: 6px 10px 2px;
  }
}

.Tab_Mypage input[name='TabItem'] {
  display: none;
}

.Tab_Mypage .TabContent {
  display: none;
  clear: both;
  margin: 0 -15px;
  padding: 0 15px;
}

@media (min-width: 768px) {
  .Tab_Mypage .TabContent {
    margin: 0;
    padding: 0;
  }
}

.ApplauseContent {
  margin-bottom: 20px;
}

.ApplauseContent .ApplauseWrapper {
  border: solid 1px #f8b62d;
  border-radius: 5px;
  width: 200px;
  margin: 0 auto;
}

.ApplauseContent .ApplauseWrapper .ApplauseTitle {
  background-color: #fffbca;
  text-align: center;
  padding: 4px 0 2px;
  border-radius: 5px 5px 0 0;
}

.ApplauseContent .ApplauseWrapper .ApplauseTitle p {
  margin: 0;
  color: #6a3906;
  font-weight: bold;
}

.ApplauseContent .ApplauseWrapper .ApplauseCount {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.ApplauseContent .ApplauseWrapper .ApplauseCount i img {
  width: 36px;
}

.ApplauseContent .ApplauseWrapper .ApplauseCount p {
  margin: 0;
  text-align: center;
  line-height: 1.2;
  font-size: 14px;
}

.ApplauseContent .ApplauseWrapper .ApplauseCount p span {
  font-weight: bold;
  font-size: 20px;
}

.MypageQaWrapper {
  margin: 0 -15px 40px;
}

@media (min-width: 768px) {
  .MypageQaWrapper {
    margin: 0 0 40px;
  }
}

.MypageQaWrapper .MypageQaItem {
  display: flex;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
}

.MypageQaWrapper .MypageQaItem:not(:first-child) {
  border-top: dashed 1px #9aa3ac;
}

@media (min-width: 768px) {
  .MypageQaWrapper .MypageQaItem {
    padding: 10px 0px;
  }
}

.MypageQaWrapper .MypageQaItem .MypageQaLabel {
  width: 80px;
}

.MypageQaWrapper .MypageQaItem .MypageQaLabel span {
  padding: 2px;
  width: 100%;
  text-align: center;
  font-size: 14px;
}

.MypageQaWrapper .MypageQaItem .MypageQaContent {
  width: calc(100% - 80px);
  padding-left: 10px;
  text-align: right;
}

.MypageQaWrapper .MypageQaItem .MypageQaContent p {
  margin: 0;
  text-align: left;
}

.MypageQaWrapper .MypageQaItem .MypageQaContent .time {
  font-size: 14px;
}

.MypageProfile {
  background-color: #e2fefd;
  padding: 10px 0px 60px;
  margin: 0 -15px 20px;
}

@media (min-width: 768px) {
  .MypageProfile {
    margin: 0 0 20px;
    padding: 10px 20px 60px;
  }
}

.MypageProfile .MypageProfileUser {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 0 15px;
}

@media (min-width: 768px) {
  .MypageProfile .MypageProfileUser {
    padding: 0;
  }
}

.MypageProfile .MypageProfileUser img {
  width: 80px;
  height: 80px;
  -o-object-fit: contain;
     object-fit: contain;
  font-family: 'object-fit: contain;';
}

.MypageProfile .MypageProfileUser p {
  margin: 0 0 0 10px;
  font-size: 20px;
}

.MypageProfile ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.MypageProfile ul li {
  border-top: dashed 1px #00a49c;
  padding: 4px 10px;
}

.MypageProfile ul li:last-child {
  padding: 10px 10px 4px;
}

.MypageNewsList {
  list-style-type: none;
  margin: 0 -15px 40px;
  padding: 0;
}

@media (min-width: 768px) {
  .MypageNewsList {
    margin: 0 0 40px;
  }
}

.MypageNewsList li {
  border-bottom: dashed 1px #9aa3ac;
  padding: 0 15px;
}

@media (min-width: 768px) {
  .MypageNewsList li {
    padding: 0;
  }
}

.MypageNewsList li a {
  display: block;
  color: #6a3906;
  text-decoration: none;
  position: relative;
  padding: 5px 0 5px 18px;
}

.MypageNewsList li a:before {
  content: '▶';
  position: absolute;
  left: 0;
  top: 7px;
  font-size: 80%;
  color: #6a3906;
}

.MypageNewsList li span.time {
  display: block;
  text-align: right;
  color: #666;
  font-size: 14px;
}

.MypageUpdateWrapper {
  margin: 0 -15px;
}

@media (min-width: 768px) {
  .MypageUpdateWrapper {
    margin: 0;
  }
}

.MypageUpdateWrapper .form-item label {
  padding: 5px 15px;
}

@media (min-width: 768px) {
  .MypageUpdateWrapper .form-item label {
    padding: 5px 0;
  }
}

.MypageUpdateWrapper .form-allchecks {
  padding: 0 15px;
}

@media (min-width: 768px) {
  .MypageUpdateWrapper .form-allchecks {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .CategoryPage {
    margin: 0 -15px 30px;
  }
  .CategoryPage .CategoryItem .accswitch {
    border-bottom: dashed 1px #666;
    color: #333;
    font-weight: bold;
    padding: 10px 40px 8px 10px;
    margin: 0;
    position: relative;
  }
  .CategoryPage .CategoryItem .accswitch:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url("../images/icons/acc-open.png") no-repeat;
    background-size: contain;
  }
  .CategoryPage .CategoryItem ul {
    display: none;
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  .CategoryPage .CategoryItem ul li a {
    display: block;
    padding: 8px 40px 6px 10px;
    background-color: #eee;
    border-bottom: dashed 1px #666;
    color: #333;
    text-decoration: none;
    position: relative;
  }
  .CategoryPage .CategoryItem ul li a:after {
    content: "\E108";
    font-family: "icon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    color: #a0a0a0;
    font-size: 16px;
  }
}

.CategoryPage > .CategoryItem > .CategoryPageBlock {
  margin-bottom: 0;
}

.CategoryPageBlock > li > a:before {
  content: "";
}

.CategoryPageBlock > li > a {
  color: #333;
  text-decoration: none;
  position: relative;
  display: block;
  padding-left: 14px;
}

@media (min-width: 768px) {
  .CategoryPage > .CategoryItem > .CategoryPageBlock {
    margin-bottom: 20px;
  }

  .CategoryPageBlock > li > a:before {
    content: "\E111";
    font-family: "icon";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    color: #6a3906;
    font-size: 10px;
    position: absolute;
    left: 0;
    top: 7px;
  }

  .CategoryPageBlock > li > a {
    color: #333;
    text-decoration: none;
    position: relative;
    display: block;
    padding-left: 14px;
  }  
}

@media (min-width: 768px) {
  .CategoryPage {
    margin: 10px 0 40px;
  }

  .CategoryPage .CategoryItem .accswitch {
    pointer-events: none;
    color: #333;
    font-weight: bold;
    margin: 0 0 10px;
  }
  .CategoryPage .CategoryItem ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
  }
  .CategoryPage .CategoryItem ul li {
    width: calc(25% - 40px);
    margin: 2px 10px;
  }
  .CategoryPage .CategoryItem ul li a {
    color: #333;
    text-decoration: none;
  }
}

.ArticleList ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.ArticleList ul li {
  border-bottom: 1px dashed #9aa3ac;
  margin-bottom: 15px;
}

.ArticleList ul li a {
  display: flex;
  text-decoration: none;
  padding-bottom: 15px;
}

@media (max-width: 767px) {
  .ArticleList ul li a {
    display: block;
  }
}

.ArticleList ul li a .image {
  width: 160px;
  height: 100px;
  position: relative;
}

@media (max-width: 767px) {
  .ArticleList ul li a .image {
    width: 100%;
    height: auto;
  }
  .ArticleList ul li a .image img {
    display: none;
  }
}

.ArticleList ul li a .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: 'object-fit: cover';
}

.ArticleList ul li a .image .date {
  color: #666;
  font-size: 12px;
}

@media (min-width: 768px) {
  .ArticleList ul li a .image .date {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.7);
    padding: 0 4px;
  }
}

.ArticleList ul li a .content {
  padding-left: 20px;
  flex: 1;
}

@media (max-width: 767px) {
  .ArticleList ul li a .content {
    padding: 0;
  }
}

.ArticleList ul li a .content dl {
  margin: 0;
}

.ArticleList ul li a .content dl dt {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 5px;
}

.ArticleList ul li a .content dl dd {
  color: #666;
  margin-left: 0;
  line-height: 1.5;
}

.ArticleList ul li a .content dl .continue {
  color: inherit;
  font-size: 14px;
  text-align: right;
}

.ArticleDetail {
  color: #666;
}

.ArticleDetail h1 {
  display: block;
  font-size: 24px;
  font-weight: bold;
  width: 100%;
  line-height: 1.6;
  border-top: 4px solid #f8b629;
  border-bottom: 4px solid #f8b629;
  position: relative;
  padding: 8px 8px;
  margin-top: 3px;
  margin-bottom: 24px;
  color: #6b3a09;
}

.ArticleDetail h1:before {
  content: '';
  width: 100%;
  border: 1px solid #f8b629;
  top: -7px;
  left: 0;
  position: absolute;
}

.ArticleDetail .ArticleDetail-Property {
  text-align: right;
  margin-bottom: 24px;
}

.ArticleDetail .ArticleDetail-Property .date {
  color: #f8b629;
  font-size: 14px;
}

.ArticleDetail .ArticleDetail-Property .label {
  display: inline-block;
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  background: #d2d2d2;
  padding: 0 6px;
}

.ArticleDetail pre {
  font-size: 12px;
}

.ArticleDetail h2 {
  color: #6b3a09;
  display: block;
  font-size: 20px;
  width: 100%;
  border-left: 4px solid #f8b629;
  line-height: 1.4;
  position: relative;
  padding-left: 12px;
  margin-bottom: 16px;
}

.ArticleDetail h2:before {
  content: '';
  height: 100%;
  left: 1px;
  border-left: 2px solid #ebddc0;
  position: absolute;
}

.ArticleDetail p {
  margin-bottom: 24px;
}

.ArticleDetail dl.ordered {
  counter-reset: list-counter;
  margin-bottom: 32px;
}

.ArticleDetail dl.ordered > dt {
  line-height: 1.4;
  margin-top: 24px;
  margin-bottom: 8px;
  font-weight: bold;
}

.ArticleDetail dl.ordered > dt:before {
  content: counter(list-counter);
  counter-increment: list-counter;
  margin-right: 4px;
  background: #f8b629;
  display: inline-block;
  width: 22px;
  height: 22px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-weight: normal;
}

.ArticleDetail dl.ordered > dd {
  margin-bottom: 8px;
  margin-left: 0;
}

.ArticleDetail dl.footnote {
  font-size: 12px;
  margin-top: 24px;
}

.ArticleDetail dl.footnote > dt {
  font-weight: bold;
}

.ArticleDetail dl.footnote > dd {
  margin-left: 0;
  margin-bottom: 8px;
}

.MenuReportWrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0px -10px 0 0;
}

@media (min-width: 980px) {
  .MenuReportWrapper {
    margin: 0 -10px;
  }
}

.MenuReportItem {
  width: 50%;
  padding: 0 10px 0 0;
  margin: 10px 0;
}

@media (min-width: 980px) {
  .MenuReportItem {
    width: 25%;
    padding: 0 10px;
  }
}

@media (min-width: 980px) {
  .layout-multi-main .MenuReportItem {
    width: 50%;
  }
}

@media (min-width: 1200px) {
  .layout-multi-main .MenuReportItem {
    width: 33.3334%;
  }
}

.MenuReportItem-Contents {
  display: block;
  border: solid 1px #e5e5e5;
  background-color: #fff6e9;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.MenuReportItem-Rank {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity .2s;
}

.MenuReportItem-Image:hover + .MenuReportItem-Rank {
  opacity: 0;
}

.MenuReportItem-Rank > img {
  width: 36px;
}

.MenuReportItem-Rank > span {
  display: inline-block;
  width: 36px;
  height: 50px;
  padding-top: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #121416;
  background-image: url("../images/icons/rank-label-v.png");
  background-size: contain;
  background-position: left top;
  background-size: 36px;
}

.MenuReportItem-Image {
  height: 0;
  padding-top: 100%;
  position: relative;
}

.MenuReportItem-Image a {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
  background-color: #121416;
}

.MenuReportItem-Image a:hover {
  opacity: 1;
}

.MenuReportItem-Image a:hover img {
  opacity: .5;
}

.MenuReportItem-Image a:hover .MenuReportItem-Tag {
  opacity: 1;
}

.MenuReportItem-Image img {
  width: 100%;
  height: 100%;
  transition: opacity .2s;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: 'object-fit: cover;';
}

.MenuReportItem-Tag {
  opacity: 0;
  transition: opacity .2s;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}

.MenuReportItem-Tag span {
  text-align: center;
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.MenuReportItem-Title {
  margin: 10px;
  font-size: 15px;
}

.MenuReportItem-Title a {
  text-decoration: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.MenuReportItem-User {
  margin: 5px 10px;
  font-size: 14px;
}

.MenuReportItem-User a {
  text-decoration: none;
}

.MenuReportItem-Status {
  margin: 5px 10px 10px;
}

.MenuReportLinks {
  margin: 10px 0 40px;
}

@media (min-width: 768px) {
  .MenuReportLinks {
    flex-direction: row-reverse;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 10px 0px 40px;
  }
}

.MenuReportLinksItem {
  margin: 20px 0;
}

@media (min-width: 768px) {
  .MenuReportLinksItem {
    display: flex;
    justify-content: center;
    width: 50%;
    padding: 0 5px;
    margin: 0;
  }
}

@media (min-width: 980px) {
  .MenuReportLinksItem {
    padding: 0 10px;
  }
}

.MenuReportLinksItem:only-child {
  width: 100% !important;
}

.MenuReportLinksItem a {
  margin: 0;
}

.MenuReportLinksItem a.link-more-arrowin {
  margin: 10px -15px;
}

@media (min-width: 768px) {
  .MenuReportLinksItem a.link-more-arrowin {
    margin: 0;
  }
}

@media (min-width: 768px) and (min-width: 768px) {
  .layout-multi-main .MenuReportLinksItem {
    width: auto;
    padding: 0;
    margin: 5px 0;
  }
}

@media (min-width: 768px) and (min-width: 980px) {
  .layout-multi-main .MenuReportLinksItem {
    padding: 0;
  }
}

.MenuReportDetail-ButtonWrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.MenuReportDetail-ButtonWrapper > *:not(:first-child) {
  margin-left: 10px;
}

@media (min-width: 768px) {
  .MenuReportDetail-ButtonWrapper > *:not(:first-child) {
    margin-left: 25px;
  }
}

.MenuReportDetail-Applause,
.MenuReportDetail-Favorite {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.MenuReportDetail-Status span {
  font-size: 15px;
  margin-right: 10px;
}

.MenuReportDetail-Info > p {
  font-weight: bold;
}

.MenuReportDetail-Date span {
  display: block;
  text-align: right;
  font-size: 15px;
}

.MenuReportDetail-Menu {
  background-color: #fff6e9;
  border-radius: 3px;
  padding: 10px 20px;
  margin-bottom: 30px;
  font-size: 18px;
}

.MenuReportDetail-Menu > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.MenuReportDetail-Menu > :last-child {
  margin-bottom: 0;
}

.MenuReportDetail-Comment {
  border-radius: 3px;
  padding: 10px 20px;
  background-color: #e5f8f7;
  margin-bottom: 30px;
}

.MenuReportDetail-CommentItem {
  margin-bottom: 15px;
}

.MenuReportDetail-CommentItem:first-child {
  border-bottom: dashed 1px #9aa3ac;
}

.MenuReportDetail-CommentItem:only-child {
  border-bottom: none;
}

.MenuReportDetail-CommentItem:last-child {
  margin-bottom: 0;
}

.MenuReportDetail-User {
  display: flex;
  align-items: center;
}

.MenuReportDetail-User .image img {
  margin-right: 10px;
  width: 60px;
  height: 60px;
}

@media (min-width: 768px) {
  .MenuReportDetail-User .image img {
    width: 70px;
    height: 70px;
  }
}

.MenuReportDetail-User .name {
  width: calc(100% - 70px);
}

@media (min-width: 768px) {
  .MenuReportDetail-User .name {
    width: calc(100% - 90px);
  }
}

.MenuReportDetail-User a {
  text-decoration: none;
}

.MenuReportDetail-Description p {
  margin-top: 0;
}

.MenuReportDetail-Form {
  margin-top: 30px;
  margin-bottom: 60px;
}

.MenuReportDetail-Form textarea {
  padding: 10px;
}

.MenuReportDetail-Form textarea::-webkit-input-placeholder {
  color: #666;
}

.MenuReportDetail-Form textarea:-ms-input-placeholder {
  color: #666;
}

.MenuReportDetail-Form textarea::-ms-input-placeholder {
  color: #666;
}

.MenuReportDetail-Form textarea::placeholder {
  color: #666;
}

.MenuReportDetail-Form .form-submit:after {
  display: none;
}

.MenuReportDetail-Image {
  margin-bottom: 20px;
}

@media (min-width: 1200px) {
  .MenuReportDetail-Image {
    display: flex;
    justify-content: space-between;
  }
}

.MenuReportDetail-ImageMain {
  height: 0;
  position: relative;
}

@media (max-width: 1199px) {
  .MenuReportDetail-ImageMain {
    width: 100%;
    padding-top: 100%;
    margin-bottom: 20px;
  }
}

@media (min-width: 1200px) {
  .MenuReportDetail-ImageMain {
    width: calc(60% - 5px);
    padding-top: calc(60% - 5px);
  }
}

.MenuReportDetail-ImageMain > img {
  border-radius: 5px;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover;";
}

@media (max-width: 1199px) {
  .MenuReportDetail-ImageSub {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .MenuReportDetail-ImageSub {
    width: calc(40% - 5px);
  }
}

.MenuReportDetail-ImageSubList {
  list-style-type: none;
  margin: -5px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.MenuReportDetail-ImageSubList > li {
  padding: 5px;
}

@media (max-width: 1199px) {
  .MenuReportDetail-ImageSubList > li {
    width: 33.3334%;
  }
}

@media (min-width: 1200px) {
  .MenuReportDetail-ImageSubList {
    padding: 0 0 0 5px;
  }
  .MenuReportDetail-ImageSubList > li {
    width: 50%;
  }
}

.MenuReportDetail-ImageSubList .Image {
  cursor: pointer;
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: relative;
  border: solid 1px #bfbfbf;
  border-radius: 5px;
  overflow: hidden;
}

.MenuReportDetail-ImageSubList .Image > img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover;";
}

.MenuReportDetail-ImageSubList .Thumbnail {
  border-radius: 5px;
}

.MenuReportDetail-ImageSubList .Thumbnail.is-active {
  background-color: #f8b62d;
}

.MenuReportDetail-ImageSubList .UserBlock a {
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: relative;
  display: block;
  border: solid 1px #f8b62d;
  border-radius: 5px;
  text-decoration: none;
  line-height: 1.2;
}

.MenuReportDetail-ImageSubList .UserBlock img {
  width: 100%;
  height: calc(70% - 5px);
  position: absolute;
  left: 50%;
  top: 2px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -o-object-fit: contain;
     object-fit: contain;
  font-family: "object-fit: contain;";
}

.MenuReportDetail-ImageSubList .UserBlock span {
  font-size: 12px;
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: 0px;
  padding: 0 5px;
  text-align: center;
}

.MenuReportComplete-Images {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}

.MenuReportComplete-Images > img {
  width: 50%;
  max-width: 240px;
  height: auto;
}

.CategoryFinder-Title {
  border-top: solid 1px #f8b62d;
  border-bottom: solid 2px #f8b62d;
  padding: 3px 0;
  margin-bottom: 16px;
}

.CategoryFinder-Title h3 {
  margin: 0;
  border-bottom: dashed 1px #f8b62d;
  padding: 5px 0;
}

.CategoryFinder-Group {
  padding: 0 10px 20px;
}

.CategoryFinder-Group:not(:last-child) {
  border-bottom: dashed 1px #dde0e3;
  margin-bottom: 16px;
}

.CategoryFinder-SubTitle h4 {
  color: #6a3906;
  margin-top: 0;
  margin-bottom: 12px;
}

.CategoryFinder-List {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.CategoryFinder-List:not(:last-child) {
  margin-bottom: 20px;
}

.CategoryFinder-List > li {
  font-size: 15px;
}

.CategoryFinder-List > li:not(:last-child) {
  margin-bottom: 8px;
}

.CategoryFinder-List > li > a {
  color: #333;
  text-decoration: none;
  position: relative;
  display: block;
  padding-left: 14px;
}

.CategoryFinder-List > li > a:before {
  content: "\E111";
  font-family: "icon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  color: #6a3906;
  font-size: 10px;
  position: absolute;
  left: 0;
  top: 7px;
}

.Utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.Utility-Nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}

.Utility-Nav ul li:not(:first-child) {
  margin-left: 4px;
}

@media (min-width: 768px) {
  .Utility-Total {
    margin-left: 20px;
  }
}

.Utility-Total p {
  display: inline-block;
  font-size: 0.8em;
  color: #6a3906;
  line-height: 1.3em;
  margin-bottom: 0;
  background: linear-gradient(transparent 60%, #fff45c 60%);
}

.Utility-Total p .count {
  color: #eb6877;
  font-size: 1.5em;
}

@media (min-width: 768px) {
  .Utility-Total p {
    font-size: 1.25em;
  }
}

li.Post:not(:first-child), li.Question:not(:first-child), li.Ranking:not(:first-child), li.Category:not(:first-child) {
  margin-left: 4px;
}

li.Post > a, li.Question > a, li.Ranking > a, li.Category > a {
  position: relative;
  display: block;
  border-radius: 4px;
  text-decoration: none;
  padding-top: 48px;
  width: 54px;
  height: 50px;
  font-size: 0.6em;
  font-weight: bold;
}

@media (min-width: 768px) {
  li.Post > a, li.Question > a, li.Ranking > a, li.Category > a {
    width: 56px;
    height: 50px;
  }
}

li.Post > a:after, li.Question > a:after, li.Ranking > a:after, li.Category > a:after {
  content: '';
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 28px;
}

li.Post > a .text, li.Question > a .text, li.Ranking > a .text, li.Category > a .text {
  display: block;
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

li.Post a {
  border: solid 2px #f8b62d;
}

li.Post a:after {
  background-image: url("../images/icons/menu3.png");
}

li.Post .text {
  background: #f8b62d;
}

li.Question a {
  border: solid 2px #f8b62d;
}

li.Question a:after {
  background-image: url("../images/icons/q2.png");
}

li.Question .text {
  background: #f8b62d;
}

li.Ranking a {
  border: solid 2px #a79b03;
}

li.Ranking a:after {
  background-image: url("../images/icons/rank3.png");
}

li.Ranking .text {
  background: #a79b03;
}

li.Category a {
  border: solid 2px #eb6877;
}

li.Category a:after {
  background-image: url("../images/icons/category.png");
}

li.Category .text {
  background: #eb6877;
}

@media (min-width: 768px) {
  .Utility-Total {
    margin-left: 20px;
  }
}

.Utility-Total p {
  display: inline-block;
  font-size: 0.8em;
  color: #6a3906;
  line-height: 1.3em;
  margin-bottom: 0;
  background: linear-gradient(transparent 60%, #fff45c 60%);
}

.Utility-Total p .count {
  color: #eb6877;
  font-size: 1.5em;
}

/*!
	Modaal - accessible modals - v0.4.4
	by Humaan, for all humans.
	http://humaan.com
 */
.modaal-noscroll {
  overflow: hidden;
}

.modaal-accessible-hide {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modal-content {
  display: none;
  padding: 0;
}

.modaal-wrapper .modal-content {
  display: block;
}

.modaal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  opacity: 0;
}

.modaal-wrapper {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow: auto;
  opacity: 1;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  transition: all 0.3s ease-in-out;
}

.modaal-wrapper * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
}

.modaal-wrapper .modaal-close {
  border: none;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
}

.modaal-wrapper.modaal-start_none {
  display: none;
  opacity: 1;
}

.modaal-wrapper.modaal-start_fade {
  opacity: 0;
}

.modaal-wrapper *[tabindex="0"] {
  outline: none !important;
}

.modaal-wrapper.modaal-fullscreen {
  overflow: hidden;
}

.modaal-outer-wrapper {
  display: table;
  position: relative;
  width: 100%;
  height: 100%;
}

.modaal-fullscreen .modaal-outer-wrapper {
  display: block;
}

.modaal-inner-wrapper {
  display: table-cell;
  width: 100%;
  height: 100%;
  position: relative;
  vertical-align: middle;
  text-align: center;
  padding: 0 20px;
}

.modaal-fullscreen .modaal-inner-wrapper {
  padding: 0;
  display: block;
  vertical-align: top;
}

.modaal-container {
  position: relative;
  display: inline-block;
  margin: auto;
  text-align: left;
  color: #000;
  max-width: 1000px;
  border-radius: 0px;
  cursor: auto;
  width: 100%;
}

@media (min-width: 768px) {
  .modaal-container {
    width: auto;
  }
}

.modaal-container.is_loading {
  height: 100px;
  width: 100px;
  overflow: hidden;
}

.modaal-fullscreen .modaal-container {
  max-width: none;
  height: 100%;
  overflow: auto;
}

.modaal-close {
  position: fixed;
  right: 20px;
  top: 20px;
  color: #fff;
  cursor: pointer;
  opacity: 1;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0);
  border-radius: 100%;
  transition: all 0.2s ease-in-out;
}

.modaal-close:focus, .modaal-close:hover {
  outline: none;
  background: #fff;
}

.modaal-close:focus:before, .modaal-close:focus:after, .modaal-close:hover:before, .modaal-close:hover:after {
  background: #00a49c;
}

.modaal-close span {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modaal-close:before, .modaal-close:after {
  display: block;
  content: " ";
  position: absolute;
  top: 14px;
  left: 23px;
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: #fff;
  transition: background 0.2s ease-in-out;
}

.modaal-close:before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.modaal-close:after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.modaal-fullscreen .modaal-close {
  background: #afb7bc;
  right: 10px;
  top: 10px;
}

.modaal-confirm-wrap {
  padding: 30px 0 0;
  text-align: center;
  font-size: 0;
}

.modaal-confirm-btn {
  font-size: 14px;
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  background: transparent;
}

.modaal-confirm-btn.modaal-ok {
  padding: 10px 15px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  transition: background 0.2s ease-in-out;
}

.modaal-confirm-btn.modaal-ok:hover {
  background: #2f2f2f;
}

.modaal-confirm-btn.modaal-cancel {
  text-decoration: underline;
}

.modaal-confirm-btn.modaal-cancel:hover {
  text-decoration: none;
  color: #2f2f2f;
}

@keyframes instaReveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes instaReveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.modaal-instagram .modaal-container {
  width: auto;
  background: transparent;
  box-shadow: none !important;
}

.modaal-instagram .modaal-content-container {
  padding: 0;
  background: transparent;
}

.modaal-instagram .modaal-content-container > blockquote {
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.modaal-instagram iframe {
  opacity: 0;
  margin: -6px !important;
  border-radius: 0 !important;
  width: 1000px !important;
  max-width: 800px !important;
  box-shadow: none !important;
  -webkit-animation: instaReveal 1s linear forwards;
          animation: instaReveal 1s linear forwards;
}

.modaal-image .modaal-inner-wrapper {
  padding-left: 140px;
  padding-right: 140px;
}

.modaal-image .modaal-container {
  width: auto;
  max-width: 100%;
}

.modaal-gallery-wrap {
  position: relative;
  color: #fff;
}

.modaal-gallery-item {
  display: none;
}

.modaal-gallery-item img {
  display: block;
}

.modaal-gallery-item.is_active {
  display: block;
}

.modaal-gallery-label {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 20px 0 0;
  font-size: 18px;
  text-align: center;
  color: #fff;
}

.modaal-gallery-label:focus {
  outline: none;
}

.modaal-gallery-control {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 1;
  cursor: pointer;
  color: #fff;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 100%;
  transition: all 0.2s ease-in-out;
}

.modaal-gallery-control.is_hidden {
  opacity: 0;
  cursor: default;
}

.modaal-gallery-control:focus, .modaal-gallery-control:hover {
  outline: none;
  background: #fff;
}

.modaal-gallery-control:focus:before, .modaal-gallery-control:focus:after, .modaal-gallery-control:hover:before, .modaal-gallery-control:hover:after {
  background: #afb7bc;
}

.modaal-gallery-control span {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modaal-gallery-control:before, .modaal-gallery-control:after {
  display: block;
  content: " ";
  position: absolute;
  top: 16px;
  left: 25px;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
  transition: background 0.2s ease-in-out;
}

.modaal-gallery-control:before {
  margin: -5px 0 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.modaal-gallery-control:after {
  margin: 5px 0 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.modaal-gallery-next-inner {
  left: 100%;
  margin-left: 40px;
}

.modaal-gallery-next-outer {
  right: 45px;
}

.modaal-gallery-prev:before, .modaal-gallery-prev:after {
  left: 22px;
}

.modaal-gallery-prev:before {
  margin: 5px 0 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.modaal-gallery-prev:after {
  margin: -5px 0 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.modaal-gallery-prev-inner {
  right: 100%;
  margin-right: 40px;
}

.modaal-gallery-prev-outer {
  left: 45px;
}

.modaal-video-wrap {
  margin: auto 50px;
  position: relative;
}

.modaal-video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.modaal-video-container iframe,
.modaal-video-container object,
.modaal-video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modaal-iframe .modaal-content {
  width: 100%;
  height: 100%;
}

.modaal-iframe-elem {
  width: 100%;
  height: 100%;
  display: block;
}

@media only screen and (min-width: 1400px) {
  .modaal-video-container {
    padding-bottom: 0;
    height: 731px;
  }
}

@media only screen and (max-width: 1140px) {
  .modaal-image .modaal-inner-wrapper {
    padding-left: 25px;
    padding-right: 25px;
  }
  .modaal-gallery-control {
    top: auto;
    bottom: 20px;
    -webkit-transform: none;
            transform: none;
    background: rgba(0, 0, 0, 0.7);
  }
  .modaal-gallery-control:before, .modaal-gallery-control:after {
    background: #fff;
  }
  .modaal-gallery-next {
    left: auto;
    right: 20px;
  }
  .modaal-gallery-prev {
    left: 20px;
    right: auto;
  }
}

@media screen and (max-width: 900px) {
  .modaal-instagram iframe {
    width: 500px !important;
  }
}

@media screen and (max-height: 1100px) {
  .modaal-instagram iframe {
    width: 700px !important;
  }
}

@media screen and (max-height: 1000px) {
  .modaal-instagram iframe {
    width: 600px !important;
  }
}

@media screen and (max-height: 900px) {
  .modaal-instagram iframe {
    width: 500px !important;
  }
  .modaal-video-container {
    max-width: 900px;
    max-height: 510px;
  }
}

@media only screen and (max-width: 600px) {
  .modaal-instagram iframe {
    width: 280px !important;
  }
}

@media only screen and (max-height: 820px) {
  .modaal-gallery-label {
    display: none;
  }
}

.modaal-loading-spinner {
  background: none;
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  -webkit-transform: scale(0.25);
          transform: scale(0.25);
}

@-webkit-keyframes modaal-loading-spinner {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: .1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes modaal-loading-spinner {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: .1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.modaal-loading-spinner > div {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  margin-top: 4px;
  position: absolute;
}

.modaal-loading-spinner > div > div {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #fff;
}

.modaal-loading-spinner > div:nth-of-type(1) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.modaal-loading-spinner > div:nth-of-type(2) > div, .modaal-loading-spinner > div:nth-of-type(3) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner > div:nth-of-type(1) {
  -webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(2) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
          animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .12s;
  animation-delay: .12s;
}

.modaal-loading-spinner > div:nth-of-type(2) {
  -webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(3) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
          animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .25s;
  animation-delay: .25s;
}

.modaal-loading-spinner > div:nth-of-type(4) > div, .modaal-loading-spinner > div:nth-of-type(5) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner > div:nth-of-type(3) {
  -webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(4) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
          animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .37s;
  animation-delay: .37s;
}

.modaal-loading-spinner > div:nth-of-type(4) {
  -webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(5) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
          animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}

.modaal-loading-spinner > div:nth-of-type(6) > div, .modaal-loading-spinner > div:nth-of-type(7) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner > div:nth-of-type(5) {
  -webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(6) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
          animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .62s;
  animation-delay: .62s;
}

.modaal-loading-spinner > div:nth-of-type(6) {
  -webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(7) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
          animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .75s;
  animation-delay: .75s;
}

.modaal-loading-spinner > div:nth-of-type(7) {
  -webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
}

.modaal-loading-spinner > div:nth-of-type(8) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .87s;
  animation-delay: .87s;
}

.modaal-loading-spinner > div:nth-of-type(8) {
  -webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
}

.object-fit-cover {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  font-family: 'object-fit: cover; object-position: center top;';
}

.object-fit-contain {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center top;
     object-position: center top;
  font-family: 'object-fit: contain; object-position: center top;';
}

.box-center {
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
}

.box-between {
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  align-items: center;
}

.page-nav {
  font-size: 0.8em;
  text-align: right;
  padding: 5px;
}

.page-nav > a {
  margin-right: 10px;
}

.page-nav > a:last-child {
  margin-right: 0;
}

#recruit-button {
  position: relative;
  background-color: #6a3906;
  color: #fff;
  padding: 0;
  min-width: auto;
  width: calc(50% - 5px);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: 5px;
  margin: 10px 0;
  display: block;
}

#recruit-button-text {
  padding: 13px 5px 10px;
  font-size: 16px;
}

#recruit-button-icon {
  margin-left: 10px;
  height: 26px;
  width: auto;
}

#shine {
  position: absolute;
  background: white;
  height: 100%;
  top: 0;
}


.flex-ad-box-frame {
  display: flex;
  justify-content: center;
}

.flex-ad-box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.flex-ad-box-content {
  margin: 0 2px;
}

.without-zip-input {
  margin: -25px 0 25px;
}

.without-zip-input > label > input {
  display: none;
}

.without-zip-input > label > span {
  font-size: 1.2rem;
  color: #0086be;
  text-decoration: underline;
  cursor: pointer;
}

.terms-link {
  font-size: 10px;
  text-align: center;
  margin: -5px 0 5px;
}

@media (min-width: 768px) {
  .terms-link {
    font-size: 1.2vw;
  }
}

.Verify {
  display: inline-block;
  position: relative;
}

.GlobalHeader-ExtraNav li.Verify > a > span.text {
  background: #f8b62d;
}

.GlobalHeader-ExtraNav li.Verify > a {
  border-color: #f8b62d;
}

.Verify::after {
  content: '';
  background-image: url("../images/header/header-register_sm.png");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 22px;
}

@media (min-width: 1024px) {
  .Verify {
    margin-right: 10px;
  }

  .Verify:after {
    display: none;
  }

  .GlobalHeader-ExtraNav li.Verify > a > span.text {
    background: #00a49c;
  }

  .GlobalHeader-ExtraNav li.Verify > a {
    border-color: #00a49c;
  }
}

.share-buttons-area {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.share-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 180px;
}

[class^="share-button-"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}


.warning {
  filter: invert(20%) sepia(76%) saturate(7472%) hue-rotate(356deg) brightness(96%) contrast(81%);
  width: 20px;
  height: auto;
}

[class^="share-button-"] > img {
  filter: invert(99%) sepia(0%) saturate(5%) hue-rotate(202deg) brightness(115%) contrast(100%);
  width: 20px;
  height: auto;
}

.share-button-line {
  background: #00C300;
}

.share-button-facebook {
  background: #1877F2;
}

.share-button-twitter,
.bg-twitter {
  background: #1DA1F2;
}

.share-button-copy {
  background: #999;
}

div.vex > .vex-content.vex-content-custom {
  width: 90%;
  max-width: 450px;
}

[class^="user-menu-"] > img {
  width: 30px;
  height: auto;
}

.user-menu-link {
  position: relative;
}

.user-menu {
  position: absolute;
  display: none;
  top: -15px;
  right: 0;
  width: 300px;
  background: #fff;
  border-radius: 5px;
  list-style-type: none;
  padding: 5px;
  z-index: 10;
  font-size: 0.8em;
  box-shadow: rgb(101 119 134 / 20%) 0px 0px 15px, rgb(101 119 134 / 15%) 0px 0px 3px 1px;
}

.user-menu > li {
  width: 100%;
  border-bottom: dotted 1px #dde0e3;
  cursor: pointer;
}

.user-menu > li:last-child {
  border-bottom: none
}

.user-menu > li > a {
  display: block;
  width: 100%;
  padding: 7px;
  text-decoration: none;
}

.user-menu > li > a:hover {
  background: #fffbca;
  opacity: 1;
}

.user-menu-icon {
  background: transparent;
  display: block;
  padding: 5px 8px;
  color: #333;
  border-radius: 50%;
  font-size: 0.8em;
  font-weight: bold;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
  cursor: pointer;
}

.user-menu-icon:hover {
  background: #8dbeff;
  color: #fff;
  opacity: 1;
}

.user-menu-icon:hover >img {
  filter: invert(99%) sepia(0%) saturate(5%) hue-rotate(202deg) brightness(115%) contrast(100%);
}

.user-label {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
}

.rule-book-anchor {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.order-box {
  padding: 2px;
  margin-right: 10px;
}

.sns-share-banner {
  width: 300px;
  height: 80px;
  margin-bottom: 20px
}

.sns-share-banner > a {
  margin: 0;
  text-decoration: none;
}

.sns-share-banner-content {
  display:flex;
  justify-content: center;
  align-items:center;
  flex-wrap: nowrap;
  width: 294px;
  height: 74px;
  margin: 3px;
  border: 2px solid #fff;
}

.sns-share-banner-content > img {
  filter: invert(99%) sepia(0%) saturate(5%) hue-rotate(202deg) brightness(115%) contrast(100%);
  width: 45px;
  height: auto;
  margin-right: 5px;
}

.sns-share-banner-content > span {
  font-size: 0.8rem;
  color: #fff;
  line-height: 1.2;
}

.sns-share-banner-content > span > strong {
  font-size: 1rem;
  font-weight: bold;
}

.cancel-anchor {
  display: inline-block;
  text-decoration:underline;
  color: red;
  cursor: pointer;
  margin-bottom: 20px;
}

.vex-checkbox {
  float: left;
  margin: 0.6rem 0.4rem 0 0;
}

.vex-checkbox-label {
  display: block;
  overflow: hidden;
}

div.vex > .vex-content.vex-content-checklist {
  width: 90%;
  max-width: 550px;
}

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

#show-search-box:checked ~ #search-box {
    display: block;
    position: absolute;
    right: 1rem;
}

#show-search-box:checked ~ #search-box-padding {
    display: block;
}